/*
Theme Name: my portfolio
Description: 小さな挑戦を毎日続けていく、やさしい空色のポートフォリオ用オリジナルテーマ。管理画面の「作品」から、作品を追加できます。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-portfolio
*/
/* ↑ 一番上のこのコメントは、WordPress がテーマの名前などを読み取る場所です。消さないでください。 */

/*
  ================================================
  style.css(Webページの「見た目・デザイン」を書くファイル)
  ================================================
  CSSは、HTMLの部品に「色」「大きさ」「並べ方」などを指定する言語です。

  ■ 書き方の基本
    セレクタ(どの部品か) {
      プロパティ(何を): 値(どうする);
    }

  ■ セレクタの種類
    .logo   → class="logo" がついた部品(ドット . はclass)
    body    → <body> タグそのもの(タグ名はそのまま書く)
    .nav a  → .nav の中にある <a> だけ(半角スペースは「の中の」)
    .a:hover → .a にマウスを乗せたとき

  ■ このサイトで使っている色
    #48678E … 文字色(落ち着いた青)
    #7893B5 … 補足の文字色(少し薄い青)
    #8DB7E8 … ボタン・番号・キーボード操作の枠の水色
    #E1ECFA … 枠線の淡い水色
    #EAF3FF / #E8F2FF … 画像の下地・タイトルエリアの水色
    #F8FBFF / #F3F7FF / #E3EEFC … ごく薄い青(背景)
    #FFFFFF … 白(Works・Concept・作品ページの背景)

  ■ このファイルの並び(上から順に)
    1. 基本設定
    2. 共通パーツ(小さな英語の文字・ボタン・見出し・タグ)
    3. ヘッダー
    4. ヒーロー(トップの大きな紹介エリア)
    5. Concept
    6. Works(作品の一覧)
    7. About
    8. フッター
    9. セクションの間の雲の帯
    10. 作品ページ
    11. 動き(ゆらゆら・ふわふわ)
    12. キーボード操作のときの枠
    13. スマホ用の調整(画面幅600px以下)

  ■ このファイルは WordPress テーマ版です
    先頭の「Theme Name」のコメントは、WordPress が読み取る場所なので消さないでください。

  ■ 新しいセクションを足すとき
    上の並びに合わせて、同じ番号の見出しコメントの下に書き足します。
    スマホ用の調整は、13 の @media の中に、同じセクション名の下へ書き足します。
*/


/* ================================================
   1. 基本設定
   ================================================ */

/* * は「すべての要素」を表す。
   box-sizing: border-box; は「余白(padding)や枠線(border)を
   含めた大きさで幅や高さを計算する」設定。レイアウトが崩れにくくなる */
*{
  box-sizing: border-box;
}

/* ページ内リンクをクリックしたとき、ふわっと滑らかにスクロールさせる */
html {
  scroll-behavior: smooth;
}

/* ページ全体の基本設定 */
body {
  margin: 0;                       /* ブラウザ標準の外側の余白を消す */
  color: #48678E;                  /* 文字の色 */
  font-family: "Yu Gothic", sans-serif;  /* フォント。左が優先で、なければ右を使う */
}

/* すべての h2 見出しのフォントを明朝系・細字にそろえる */
h2 {
  font-family: Georgia, serif;
  font-weight: normal;
}


/* ================================================
   2. 共通パーツ
   ================================================ */

/* 「Welcome」「Works」など、見出しの上の小さな英語の文字 */
.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;             /* 文字と文字の間隔を広げる */
}

/* ボタン風のリンク */
.hero-button {
  display: inline-block;           /* 余白や大きさを自由に指定できる形にする */
  margin-top: 20px;                /* 上の要素との間隔 */
  padding: 13px 28px;              /* ボタン内側の余白(上下13px・左右28px) */
  border-radius: 30px;             /* 角を丸くする(大きい値でカプセル型に) */
  background: #8DB7E8;
  color: white;
  text-decoration: none;
  font-size: 14px;
}

/* セクションの大見出し(My Works / Concept / About Me / Contact)の共通設定 */
/* 余白(margin)だけは、セクションごとに違うので、それぞれの場所に書いている */
.works-title,
.concept-title,
.about-inner h2,
.footer-title {
  font-size: 27px;
  letter-spacing: 1px;
}

/* 丸いタグ風の並び(About と作品ページで使う) */
.chip-list {
  display: flex;
  flex-wrap: wrap;                 /* 幅が足りないときは折り返す */
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;                /* 先頭の「・」を消す */
}

.chip-list li {
  padding: 6px 16px;
  border: 1px solid #E1ECFA;       /* 作品の丸枠と同じ淡い水色 */
  border-radius: 30px;             /* カプセル型 */
  background: #FFFFFF;
  color: #48678E;
  font-size: 13px;
  line-height: 1.6;
}


/* ================================================
   3. ヘッダー
   ================================================ */
.header {
  display: flex;                   /* 中身(ロゴとメニュー)を横並びにする */
  justify-content: space-between;  /* 左右の端に振り分けて配置する */
  align-items: center;             /* 縦方向の真ん中にそろえる */
  flex-wrap: wrap;                 /* 幅が足りないときは折り返す */
  gap: 16px;                       /* 並んだ部品どうしのすき間 */
  padding: 20px 5%;                /* 内側の余白(上下20px・左右5%) */
  background: #F8FBFF;             /* 背景色 */
}

/* ロゴ */
.logo {
  color: #48678E;
  text-decoration: none;           /* リンクの下線を消す */
  font-family: Georgia, serif;     /* 明朝系(飾りのある)フォント */
  font-size: 20px;
}

/* メニュー */
.nav {
  display: flex;                   /* リンクを横並びにする */
  flex-wrap: wrap;
  gap: 22px;
}

/* .nav の中の <a> だけに適用 */
.nav a {
  color: #48678E;
  text-decoration: none;
  font-size: 14px;
}


/* ================================================
   4. ヒーロー(最初の大きな紹介エリア)
   ================================================ */
.hero {
  position: relative;              /* 位置の基準にする(星や雲を重ねるときに必要) */
  min-height: 760px;               /* 高さの最低ライン(背景画像の左下の猫が、文字の下に見えるよう、高めにしている) */
  display: flex;
  align-items: center;             /* 中身を縦方向の真ん中に配置 */
  padding: 90px 8% 300px;          /* 下を広めにあけて、文字を上寄りに置く(左下の猫を隠さないため) */
  overflow: hidden;                /* はみ出した飾り(星・雲)を隠す */
  /* 背景画像の指定。画像は、上から順に重ねている。
     1枚目:文字を読みやすくするための、色のグラデーション(下の --hero-overlay)
     2枚目:メイン画像(url(...) が画像ファイル)。これは昼の画像で、朝・夜は下の設定で入れ替えている */
  background-image:
    var(--hero-overlay),
    url("images/noon1.jpg");
  background-size: cover;          /* 画像を隙間なく全体に広げる */
  background-position: center;     /* 画像の中央を基準に表示する */
}

/* ===== 朝・夜のメイン画像 =====
   time-of-day.js が <html> に付ける data-time="morning" / "night" の印で、画像を入れ替える。
   昼(data-time="noon")と、印がないときは、上の .hero の設定がそのまま使われる。
   --hero-overlay-from / --hero-overlay-to は、文字を読みやすくするために、画像の上に重ねる色。
   from = 文字の後ろ(濃い)、to = それ以外の部分(うすい)。
   重ねる範囲は --hero-overlay で決めていて、文字の後ろだけに重ねて、左下の猫には重ならないようにしている。
   夜の画像が暗くて文字が読みにくいときは、ここの色を変えて調整する。 */
:root {
  --hero-overlay-from: rgba(240, 248, 255, 0.88);
  --hero-overlay-to: rgba(240, 248, 255, 0.15);
  /* 楕円(だえん)のグラデーション。ellipse 横の半径 縦の半径 at 中心の位置 */
  --hero-overlay: radial-gradient(
    ellipse 55% 42% at 22% 30%,
    var(--hero-overlay-from) 0%,
    var(--hero-overlay-from) 45%,
    var(--hero-overlay-to) 80%
  );
}

/* 朝:あたたかい白を、左から重ねる */
html[data-time="morning"] {
  --hero-overlay-from: rgba(255, 251, 246, 0.82);
  --hero-overlay-to: rgba(255, 251, 246, 0.08);
}

/* 夜:暗い紺色を左から重ね、文字を白っぽくして読みやすくする */
html[data-time="night"] {
  --hero-overlay-from: rgba(16, 24, 70, 0.66);
  --hero-overlay-to: rgba(16, 24, 70, 0.04);
}

html[data-time="night"] .hero-content {
  color: #F4F6FF;                  /* 夜は、ヒーローの文字を白っぽくする */
  text-shadow: 0 1px 12px rgba(10, 16, 50, 0.55);
}

html[data-time="morning"] .hero {
  background-image:
    var(--hero-overlay),
    url("images/morning1.jpg");
}

html[data-time="night"] .hero {
  background-image:
    var(--hero-overlay),
    url("images/night1.jpg");
}

/* 夜の画像には、もともと月が描かれているので、重ならないよう、吊り下げ飾りは消す */
html[data-time="night"] .hero .hero-stars {
  display: none;
}

/* ヒーローの下端を白へなじませる(次の Concept の背景が白なので) */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF);
  pointer-events: none;
  z-index: 1;                      /* 雲より手前、文字(z-index:2)より後ろ */
}

/* 文字をまとめた箱の最大幅(長くなりすぎないように) */
.hero-content {
  max-width: 480px;
  position: relative;              /* 飾りの画像より前面に出すための準備 */
  z-index: 2;                      /* 数字が大きいほど手前に表示される */
}

/* .hero の中の h1(大見出し) */
.hero h1 {
  font-family: Georgia, serif;
  /* clamp(最小, 理想, 最大):画面幅に合わせて文字サイズが自動で変わる。
     ここでは 27px〜43px の間で調整される */
  font-size: clamp(27px, 4vw, 43px);
  font-weight: normal;             /* 見出しは通常太字だが、細くする */
  line-height: 1.8;                /* 行の高さ(文字サイズの1.8倍) */
}

/* 自己紹介文 */
.intro {
  font-size: 14px;
  line-height: 2.2;                /* 行間を広めにして読みやすく */
}

/* 右上から吊り下がる星と月(トップと作品ページのタイトルエリアで使う) */
.hero-stars {
  position: absolute;              /* ヒーローの中で自由に位置を決める */
  top: 0;                          /* 上の端にぴったり付ける(星が上から吊り下がって見える) */
  right: 0;                        /* 右の端に寄せる */
  width: min(24%, 320px);          /* 小さめにして、控えめにする(画面の24%まで。320px以上にはしない) */
  opacity: 0.8;                    /* 少し透かして、背景の画像がじゃましないようにする */
  height: auto;
  z-index: 1;                      /* 文字(z-index:2)より後ろに置く */
  pointer-events: none;            /* 飾りがクリックやタップの邪魔をしないようにする */
  transform-origin: top center;    /* 揺れの支点を上側にする(吊り下げ飾りらしく) */
  animation: star-sway 8s ease-in-out infinite alternate;
}

/* 下端に置く雲(トップと作品ページのタイトルエリアで使う) */
.cloud {
  position: absolute;              /* セクションの端に重ねて置く */
  left: 0;
  width: 100%;
  height: clamp(110px, 15vw, 210px);  /* 雲の帯の高さ(画面幅に合わせて変わる) */
  object-fit: cover;               /* 縦横比を保ったまま帯いっぱいに表示 */
  object-position: center 85%;     /* 雲のかたまりがある下側を見せる */
  pointer-events: none;
  z-index: 1;
  /* 上側をだんだん透明にして、切り取った境目の直線が見えないようにする */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
}

.cloud-bottom {
  bottom: -1px;                    /* 1px 下げて、すき間の線が出ないようにする */
}


/* ================================================
   5. Concept(サイトの考え方)
   ================================================ */
.concept {
  padding: 80px 8% 60px;
  text-align: center;
  background: #FFFFFF;
  line-height: 2;
}

.concept-title {
  margin: 0;
}

/* 一番大きく見せる一文 */
.concept-lead {
  margin: 18px 0 8px;
  font-family: Georgia, serif;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.9;
}

.concept-text {
  margin: 0 auto 40px;
  color: #7893B5;
  font-size: 13px;
}

/* 大切にしていること3つを横に並べる(Works と同じ grid の仕組み) */
.concept-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3列を均等に */
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;                /* 先頭の「・」を消す */
}

.concept-item {
  padding: 30px 22px 28px;
  border: 1px solid #E1ECFA;       /* 作品の丸枠と同じ淡い水色 */
  border-radius: 20px;
  background: #F8FBFF;
}

/* 01 02 03 の番号 */
.concept-num {
  display: block;
  margin-bottom: 6px;
  color: #8DB7E8;
  font-family: Georgia, serif;
  font-size: 22px;
  letter-spacing: 2px;
}

.concept-item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: normal;
}

.concept-item p {
  margin: 0;
  color: #7893B5;
  font-size: 13px;
  line-height: 1.9;
}


/* ================================================
   6. Works(作品の一覧)
   ================================================ */

/* Works と About の共通設定 */
/* カンマ(,)で区切ると、複数の部品に同じ設定を適用できる */
.works,
.about {
  text-align: center;              /* 文字を中央ぞろえにする */
  line-height: 2;
}

/* My Works セクション */
.works {
  padding: 55px 6% 65px;           /* 上55px・左右6%・下65px */
  background: #FFFFFF;
}

/* 「My Works」の見出し */
.works-title {
  margin: 0;
}

/* 見出しの下の説明文 */
.works-subtitle {
  margin: 10px 0 30px;             /* 上10px・左右0・下30px */
  color: #7893B5;
  font-size: 13px;
}

/* 作品を横に並べる */
/* grid(グリッド):表のようにマス目状に並べる仕組み */
.works-list {
  display: grid;
  /* repeat(4, ...) は「4列にする」という意味。
     minmax(0, 1fr) は「列の幅を均等に分ける」という意味 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;                       /* マス目どうしのすき間 */
  max-width: 1000px;               /* 広い画面でも1000px以上には広げない */
  margin: 0 auto;                  /* 左右 auto で、箱を画面の中央に置く */
}

/* 丸い画像(作品ページへのリンク) */
.work-image {
  display: flex;                   /* 中の画像を枠の真ん中に置く */
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;             /* 縦横比を1:1(正方形)にする */
  margin: 0 auto 14px;             /* 左右auto=中央配置、下に14pxの余白 */
  overflow: hidden;                /* 枠からはみ出した部分を隠す */
  border-radius: 50%;              /* 50%で正円になる(正方形+丸い角=円) */
  background: #EAF3FF;
  border: 2px solid #E1ECFA;       /* 枠線(太さ 線の種類 色) */
}

/* 丸い枠の中の画像 */
.work-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;               /* 画像の縦横比を保ったまま枠いっぱいに表示 */
  transition: transform 0.3s ease; /* 変化を0.3秒かけてなめらかにする */
}

/* :hover = マウスを乗せたとき。画像が1.06倍にふわっと拡大する */
.work-image:hover img {
  transform: scale(1.06);
}

/* 作品のタイトル */
.work-item h3 {
  margin: 0 0 8px;
  color: #48678E;
  font-size: 14px;
  font-weight: normal;
}

/* 作品の説明文 */
.work-item p {
  margin: 0;
  color: #7893B5;
  font-size: 12px;
  line-height: 1.8;
}

/* ----- 種類ごとのグループ(WordPress版:作品の種類を作ったときに使う) ----- */
.works-group {
  max-width: 1000px;
  margin: 0 auto 56px;             /* グループどうしの間隔 */
}

.works-group:last-child {
  margin-bottom: 0;
}

/* 種類の名前。下に小さな線を引く */
.works-group-title {
  margin: 0 0 26px;
  color: #48678E;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: normal;
}

.works-group-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: #8DB7E8;
}

/* 種類ごとの表示では、作品が4つに足りないときも、中央にそろえて並べる */
.works-group .works-list,
.works-category .works-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.works-group .work-item,
.works-category .work-item {
  width: calc((100% - 72px) / 4);   /* 4列ぶんの幅(すき間24px × 3 を引いて4等分) */
}

/* 「一覧を見る →」のボタン */
.works-group-link {
  display: inline-block;
  margin-top: 26px;
  padding: 8px 24px;
  border: 1px solid #8DB7E8;
  border-radius: 30px;
  color: #48678E;
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  transition: background 0.2s ease;
}

.works-group-link:hover {
  background: #EAF3FF;
}

/* 種類ごとの一覧ページの、種類を切り替えるボタン */
.works-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 34px;
}

.works-cats a {
  padding: 6px 18px;
  border: 1px solid #E1ECFA;
  border-radius: 30px;
  color: #48678E;
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
}

.works-cats a.is-current {         /* いま開いている種類 */
  border-color: #8DB7E8;
  background: #8DB7E8;
  color: #FFFFFF;
}

/* 作品ページの小さな英語の見出しの中のリンク(種類の名前) */
.eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* 作品がまだ1つもないときの文章(WordPress版で使う) */
.works-empty {
  grid-column: 1 / -1;             /* 4列ぜんぶを使って、中央に出す */
  margin: 0;
  color: #7893B5;
  font-size: 13px;
}


/* ================================================
   7. About(自己紹介)
   ================================================ */
.about {
  padding: 50px 8% 60px;           /* 上50px・左右8%・下60px */
  background: #F3F7FF;             /* Works の白と区別するため、薄い青にする */
}

/* 中身を中央にまとめる箱 */
.about-inner {
  max-width: 880px;
  margin: 0 auto;
}

.about-inner h2 {
  margin: 0 0 30px;
}

/* 猫と文章を横に並べる(左:猫、右:文章) */
.about-body {
  display: grid;
  grid-template-columns: 240px 1fr; /* 左は240px、右は残り全部 */
  gap: 44px;
  align-items: center;
  text-align: left;
}

/* 猫のイラスト(ふわふわ上下に動く) */
.about-cat {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  animation: cat-float 5s ease-in-out infinite alternate;
}

.about-text p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 2.1;
}

/* 最初の一文だけ少し大きく */
.about-text .about-lead {
  margin-bottom: 8px;
  font-family: Georgia, serif;
  font-size: 19px;
}

/* 「できること」「学んでいること」の小見出し */
.about-sub {
  margin: 0 0 10px;
  color: #7893B5;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 2px;
}


/* ================================================
   8. フッター(Contact)
   ================================================ */
.footer {
  padding: 40px 8% 40px;
  text-align: center;
  background: linear-gradient(180deg, #F3F7FF 0%, #E3EEFC 100%);
}

/* 作品ページのフッター(直前が白い背景のとき)は、白から始める */
.footer-on-white {
  background: linear-gradient(180deg, #FFFFFF 0%, #E3EEFC 100%);
}

/* 中身を中央にまとめる箱 */
.footer-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* 眠る猫(About の猫と同じ、ふわふわ上下に動く動きを使う) */
.footer-cat {
  display: block;
  width: 190px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 6px;
  animation: cat-float 5s ease-in-out infinite alternate;
}

.footer-title {
  margin: 0 0 10px;
}

.footer-text {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 2.1;
}

/* メールボタン(トップのボタンと同じ水色のカプセル型) */
.contact-button {
  display: inline-flex;            /* アイコンと文字を横に並べる */
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 30px;
  background: #8DB7E8;
  color: white;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;  /* 変化をなめらかに */
}

/* マウスを乗せたとき、少し浮かんで影が出る */
.contact-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(141, 183, 232, 0.45);
}

.contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;                  /* 狭い画面でもアイコンがつぶれないようにする */
}

/* フッターのメニュー */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin: 44px 0 18px;
  padding-top: 26px;
  border-top: 1px solid rgba(72, 103, 142, 0.15);  /* 薄い区切り線 */
}

.footer-nav a {
  color: #48678E;
  text-decoration: none;
  font-size: 13px;
}

.footer-copy {
  margin: 0;
  color: #7893B5;
  font-size: 12px;
  letter-spacing: 1px;
}


/* ================================================
   9. セクションの間の雲の帯(cloud-divider)
   雲は本来の向き(下側)のまま使い、次のセクションの背景色へなじませる
   ================================================ */
.cloud-divider {
  position: relative;
  height: clamp(110px, 15vw, 210px);  /* 雲の帯の高さ(画面幅に合わせて変わる) */
  overflow: hidden;
  background: var(--divider-from); /* 上のセクションの背景色(下の3つの設定で決める) */
  pointer-events: none;
}

/* 雲の画像。帯の下側にそろえて表示する */
.cloud-divider-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 85%;     /* 雲のかたまりがある下側を見せる */
  /* 上側をだんだん透明にして、切り取った境目の直線が見えないようにする */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
}

/* 帯の下端を、次のセクションの背景色へなじませる */
.cloud-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--divider-to));
}

/* 「どこからどこへつなぐか」の色の設定。--divider-from=上の色、--divider-to=下の色 */
.cloud-divider-about {                 /* Works(白) → About(薄い青) */
  --divider-from: #FFFFFF;
  --divider-to: #F3F7FF;
}

.cloud-divider-footer {                /* About(薄い青) → フッター */
  --divider-from: #F3F7FF;
  --divider-to: #F3F7FF;
}

.cloud-divider-footer-white {          /* 作品ページ(白) → フッター */
  --divider-from: #FFFFFF;
  --divider-to: #FFFFFF;
}


/* ================================================
   10. 作品ページ(works フォルダの中のページ)
   ================================================ */

/* ----- タイトルエリア ----- */
.work-hero {
  position: relative;              /* 星や雲を重ねる基準にする */
  overflow: hidden;                /* はみ出した飾りを隠す */
  padding: 70px 8% 120px;          /* 下を広めにして、画像が少し重なる余白を作る */
  text-align: center;
  background: linear-gradient(180deg, #E8F2FF 0%, #F8FBFF 100%);
}

/* 下端を白へなじませる */
.work-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF);
  pointer-events: none;
  z-index: 1;
}

/* このエリアの星は、トップページより小さめにする */
.work-hero .hero-stars {
  right: 0;                        /* 作品ページは、今までどおり右端に置く */
  opacity: 1;
  width: min(42%, 460px);
}

/* 文字をまとめた箱(星や雲より手前に出す) */
.work-hero-content {
  position: relative;
  z-index: 2;
}

.work-hero h1 {
  margin: 8px 0 12px;
  font-family: Georgia, serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: normal;
  line-height: 1.6;
}

.work-hero-lead {
  margin: 0;
  color: #7893B5;
  font-size: 14px;
}

/* ----- 作品の詳細 ----- */
.work-detail {
  position: relative;
  z-index: 2;                      /* タイトルエリアの上に重ねる */
  width: 88%;                      /* 画面幅の88%を使う(左右に余白を残す) */
  max-width: 760px;
  margin: -60px auto 0;            /* 上にマイナスの値で、タイトルエリアに少し重ねる */
  padding: 0 0 20px;
}

/* 作品の大きな画像 */
.work-detail-image {
  display: block;
  width: 100%;
  height: auto;                    /* 画像の縦横比のまま表示する(切り取らない) */
  max-height: 80vh;                /* 縦長の画像でも、画面の高さの80%までにおさめる */
  object-fit: contain;             /* おさまらないときは縮めて、全体を見せる */
  border-radius: 24px;
  background: #EAF3FF;             /* 画像が読み込まれるまでの色・余った所の色 */
  box-shadow: 0 16px 40px rgba(72, 103, 142, 0.18);
}

.work-detail-body {
  padding-top: 36px;
}

.work-detail-body h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.work-detail-body p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 2.1;
}

/* 制作時期・使用技術・担当の表 */
.work-info {
  display: grid;
  grid-template-columns: 100px 1fr;  /* 左:項目名、右:内容 */
  gap: 10px 16px;
  margin: 0 0 28px;
  padding: 20px 24px;
  border-radius: 16px;
  background: #F3F7FF;
  font-size: 13px;
  line-height: 1.8;
}

.work-info dt {
  color: #7893B5;
  letter-spacing: 1px;
}

.work-info dd {
  margin: 0;
}

/* ----- 前の作品・一覧・次の作品 ----- */
.work-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* 左・中央・右の3つに分け、中央のボタンが常に真ん中に来る */
  align-items: center;
  gap: 12px;
  width: 88%;                      /* 詳細部分と同じ幅にそろえる */
  max-width: 760px;
  margin: 30px auto 0;
  padding: 28px 0 70px;
  border-top: 1px solid #E1ECFA;
}

.pager-prev,
.pager-next {
  color: #48678E;
  text-decoration: none;
  font-size: 14px;
}

.pager-next {
  text-align: right;               /* 右端にそろえる */
}

/* 真ん中の「Works一覧」はカプセル型のボタン */
.pager-list {
  padding: 10px 24px;
  border-radius: 30px;
  background: #8DB7E8;
  color: white;
  text-decoration: none;
  font-size: 14px;
}

/* ----- 作品の本文(WordPress のエディターで書いた内容)の見た目 ----- */
.work-detail-body img {
  max-width: 100%;                 /* 本文に入れた画像が、枠からはみ出さないようにする */
  height: auto;
}

.work-detail-body figure {
  margin: 0 0 24px;
}

.work-detail-body figcaption {
  color: #7893B5;
  font-size: 12px;
  text-align: center;
}

.work-detail-body h3 {
  margin: 32px 0 10px;
  font-size: 17px;
  font-weight: normal;
}

.work-detail-body ul,
.work-detail-body ol {
  margin: 0 0 24px;
  padding-left: 1.4em;
  font-size: 14px;
  line-height: 2.1;
}

.work-detail-body a {
  color: #48678E;
}


/* ================================================
   11. 動き(ゆらゆら・ふわふわ)
   ================================================ */

/* 星と月がゆらゆら揺れる動き。@keyframes は「動きの設計図」 */
@keyframes star-sway {
  from { transform: rotate(-0.8deg); }
  to   { transform: rotate(0.8deg); }
}

/* 猫がふわふわ上下に動く(About とフッターの猫で使う) */
@keyframes cat-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* 「動きを減らす」設定の人には、動きをすべて止める(やさしさの配慮) */
@media (prefers-reduced-motion: reduce) {
  .hero-stars,
  .about-cat,
  .footer-cat {
    animation: none;
  }
}


/* ================================================
   12. キーボード操作のときの枠
   Tab キーでリンクを選んだとき、どこにいるか分かるように水色の枠を出す
   ================================================ */
.work-image:focus-visible,
.pager-prev:focus-visible,
.pager-next:focus-visible,
.pager-list:focus-visible,
.contact-button:focus-visible,
.footer-nav a:focus-visible {
  outline: 3px solid #8DB7E8;
  outline-offset: 3px;
}


/* ================================================
   13. スマホ用の調整(画面幅600px以下)
   @media:画面の条件に合わせて切り替えるルール。
   max-width: 600px は「画面幅が600px以下のとき(=スマホ)だけ適用」の意味。
   上のセクションで決めた値を、スマホのときだけ上書きする。
   ================================================ */
@media (max-width: 600px) {

  /* ----- ヘッダー ----- */
  .header {
    padding: 16px 5%;
  }

  .nav {
    gap: 15px;
  }

  /* ----- ヒーロー ----- */
  /* スマホは、文字が画面いっぱいに広がるので、左から右へのグラデーションを使う */
  :root {
    --hero-overlay: linear-gradient(90deg, var(--hero-overlay-from), var(--hero-overlay-to));
  }

  .hero {
    min-height: 600px;
    padding: 50px 7%;
    background-position: 60% center;  /* 背景画像を少し右寄りの位置で表示 */
  }

  .hero-content {
    max-width: 100%;               /* スマホでは幅いっぱいに使う */
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero-stars {
    right: 3%;                     /* スマホでも、お城(右側)に重ならないよう小さめにする */
    width: 40%;
    opacity: 0.7;
  }

  .cloud {
    height: 110px;                 /* 雲の帯を低くする */
  }

  /* ----- Concept ----- */
  .concept {
    padding: 60px 7% 40px;
  }

  /* 文中の強制改行をやめて、画面幅に合わせて自然に折り返す */
  .concept-text br {
    display: none;
  }

  .concept-list {
    grid-template-columns: 1fr;    /* 3列 → 1列(縦並び)に変更 */
    gap: 14px;
  }

  /* ----- Works ----- */
  .works {
    padding: 40px 6%;
  }

  .works-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 4列 → 2列に変更 */
    gap: 28px 18px;                /* 縦のすき間28px・横のすき間18px */
  }

  .works-group .works-list,
  .works-category .works-list {
    gap: 28px 18px;
  }

  .works-group .work-item,
  .works-category .work-item {
    width: calc((100% - 18px) / 2);  /* スマホは2列 */
  }

  .works-title {
    font-size: 24px;
  }

  .work-item h3 {
    font-size: 13px;
  }

  /* ----- About ----- */
  .about {
    padding-top: 30px;
  }

  .about-body {
    grid-template-columns: 1fr;    /* 横並び → 縦並びに変更 */
    gap: 24px;
    text-align: center;            /* 文章は中央ぞろえにする */
  }

  .about-cat {
    max-width: 170px;
  }

  .about .chip-list {
    justify-content: center;       /* About のタグだけ中央に並べる */
  }

  /* ----- フッター ----- */
  .footer {
    padding: 30px 7% 32px;
  }

  /* ----- セクションの間の雲の帯 ----- */
  .cloud-divider {
    height: 110px;                 /* 帯を低くする */
  }

  /* ----- 作品ページ ----- */
  .work-hero {
    padding: 50px 7% 100px;
  }

  .work-hero .hero-stars {
    width: 70%;
    opacity: 0.5;                  /* 文字が読みやすいよう、星を薄くする */
  }

  .work-detail {
    margin-top: -50px;
  }

  .work-info {
    grid-template-columns: 80px 1fr;
    padding: 18px 20px;
  }
}