@charset "UTF-8";
/* 
  【CSSの基本】
  CSSは「セレクタ { プロパティ: 値; }」の形で書きます。
  例) a { color: red; } → すべての <a> タグの文字色を赤にする
  ・ .○○ = class="○○" の要素   ・ #○○ = id="○○" の要素
  ※このファイルもUTF-8で保存してください（日本語コメントの文字化け防止）。
*/


/*-------------------------------------------
共通設定（ページ全体に効くスタイル）
-------------------------------------------*/
html {
  /* 100% = ブラウザの標準サイズ（通常16px）。rem はこのサイズが基準になります */
  font-size: 100%;
  /* メニューをクリックしたとき、ページ内をなめらかにスクロールさせる */
  scroll-behavior: smooth;
}

/* 動きが苦手な人向けに、OSで「視差効果を減らす」設定がONの場合はなめらかスクロールを無効にする */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  color: #383e45;
  /* 0.9rem = 16px × 0.9 = 約14.4px */
  font-size: 0.9rem;
  /* 行の高さ。文字サイズの1.7倍にすると読みやすくなります（改善点） */
  line-height: 1.7;
  /* 使うフォントの優先順位。左から順に、使えるものが採用されます（改善点） */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

a {
  /* リンクの下線を消す */
  text-decoration: none;
  /* ホバー時の変化をなめらかにする（改善点） */
  transition: opacity 0.3s;
}

/* キーボード(Tabキー)でリンクを選んだとき、枠線で位置が分かるようにする（改善点） */
a:focus-visible {
  outline: 2px solid #383e45;
  outline-offset: 2px;
}

img {
  /* 画像が親要素の幅からはみ出さないようにする（スマホ対応の基本） */
  max-width: 100%;
}

li {
  /* 箇条書きの「・」を消す */
  list-style: none;
}

/* サイトのロゴ */
.site-title {
  width: 120px;
  padding: 10px 0;
}
.site-title a {
  /* a は初期状態だとクリック範囲が文字の大きさだけ。block にすると横幅いっぱいがクリックできる */
  display: block;
}
.site-title img {
  /* 画像の下にできる謎の隙間を消す（元の line-height: 1px の代わりに、こちらが正しい方法です）（改善点） */
  display: block;
}

/* セクションの大見出し（About / Tanizaki） */
.section-title {
  /* inline-block = 文字の幅だけの大きさになる。下線が文字幅ぴったりになります */
  display: inline-block;
  font-size: 2rem;
  margin-bottom: 60px;
  border-bottom: solid 1px #383e45;
}

/* 小見出し */
.content-title {
  font-size: 1rem;
  margin: 10px 0;
}

/* 中身を中央に寄せるための枠 */
.wrapper {
  /* 画面が広くても最大960pxまで */
  max-width: 960px;
  /* 上0 / 左右auto(中央寄せ) / 下100px */
  margin: 0 auto 100px;
  /* 左右に4%の余白。スマホで画面端にくっつかないように */
  padding: 0 4%;
  text-align: center;
}


/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  /* display: flex = 子要素（ロゴとメニュー）を横並びにする */
  display: flex;
  /* 両端に配置（ロゴは左、メニューは右） */
  justify-content: space-between;
  /* 縦方向の中央に揃える */
  align-items: center;
  margin: 0 auto;
}
#header ul {
  display: flex;
  /* 項目が増えても、収まらないときは折り返す */
  flex-wrap: wrap;
  padding: 10px 0;
}
#header li {
  margin-left: 30px;
}
#header li a {
  color: #24292e;
}
#header li a:hover {
  /* マウスを乗せたら少し薄くする */
  opacity: 0.7;
}
/* 今見ているページのリンクに下線を付ける */
#header li a[aria-current="page"] {
  border-bottom: solid 1px #383e45;
}


/*-------------------------------------------
Mainvisual（大きな写真）
-------------------------------------------*/
#mainvisual {
  margin-bottom: 80px;
}
#mainvisual img {
  /* 画像はもともと「文字と同じ扱い(inline)」のため、左寄せになります。
     block にして、左右の margin を auto にすると中央に配置されます（改善点） */
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  /* 高さは画像の縦横比に任せる。固定すると左右が切れる原因になります */
  height: auto;
}


/*-------------------------------------------
About（自己紹介）
-------------------------------------------*/
/* About と 個人ページで共通の「写真＋テキスト」 */
.content {
  /* 写真とテキストを横並びにして、中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 丸い写真 */
.content img {
  width: 200px;
  height: 200px;
  /* 50% = 丸く切り抜く */
  border-radius: 50%;
  margin-right: 30px;
  /* 正方形に収めるため、写真が歪まないようにする（改善点） */
  object-fit: cover;
}
/* テキスト部分 */
.content .text {
  text-align: left;
}


/*-------------------------------------------
Tanizaki（谷崎家の紹介）
-------------------------------------------*/
#Tanizaki ul {
  /* 3つの項目を横並びにして、均等な間隔で配置 */
  display: flex;
  justify-content: space-between;
}
#Tanizaki li {
  /* 3つで 32% × 3 = 96%。残りの4%が隙間になります */
  width: 32%;
}
#Tanizaki li a {
  /* 写真と名前をまとめてクリックできるようにする */
  display: block;
  color: inherit;
}
#Tanizaki li a:hover {
  opacity: 0.7;
}
#Tanizaki li img {
  /* 写真の大きさ・縦横比を3枚とも揃える */
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


/*-------------------------------------------
個人ページ（anri.html / bailey.html / claire.html）
-------------------------------------------*/
/* 名前・読みなどの項目表（dl = 項目と説明のセット） */
.profile-list {
  max-width: 480px;
  margin: 40px auto 0;
  text-align: left;
}
.profile-list div {
  display: flex;
  padding: 12px 0;
  border-bottom: solid 1px #ddd;
}
.profile-list dt {
  width: 7em;
  font-weight: bold;
}
.profile-list dd {
  flex: 1;
}

/* 前へ・一覧へ・次へ のリンク */
.pager {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}
.pager a {
  color: #383e45;
  border-bottom: solid 1px #383e45;
}
.pager a:hover {
  opacity: 0.7;
}


/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  /* 0.5rem = 8px は小さすぎて読めないため、0.75rem(12px)に変更（改善点） */
  font-size: 0.75rem;
  padding: 10px 0;
  text-align: center;
}


/*-------------------------------------------
SP（スマホ用）
画面幅が600px以下のときだけ、下のスタイルが適用されます。
上で書いた設定を「上書き」するので、必ず後ろに書きます。
-------------------------------------------*/
@media screen and (max-width: 600px) {

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    /* ロゴの下にメニューを置く */
    flex-direction: column;
  }
  #header ul {
    justify-content: center;
  }
  #header li {
    margin: 0 12px;
  }

  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual img {
    /* スマホでも画像全体が収まるよう、高さは自動（PCと同じ） */
    height: auto;
  }

  /*-------------------------------------------
  About
  -------------------------------------------*/
  /* About と 個人ページで共通の「写真＋テキスト」 */
.content {
    /* 縦並びに変更 */
    flex-direction: column;
  }
  /* 丸い写真 */
.content img {
    margin-right: 0;
    /* 縦並びになったので、写真の下に余白を追加（改善点） */
    margin-bottom: 20px;
  }

  /*-------------------------------------------
  Tanizaki
  （スマホでは縦並びに。横並びのままにしたい場合はこのブロックを削除）
  -------------------------------------------*/
  #Tanizaki ul {
    flex-direction: column;
  }
  #Tanizaki li {
    width: 100%;
    margin-bottom: 30px;
  }
}