@charset "UTF-8";

/* ==========================================================================
   あったマリン 公式サイト - 共通スタイルシート
   ========================================================================== */

:root {
  /* カラー：寒色（ブルー系）をベースに、温かみを足すクリーム＆コーラルを添える */
  --color-navy: #1f3b57;
  --color-navy-soft: #2c5476;
  --color-blue: #3f8cc4;
  --color-blue-deep: #2f6fa3;
  --color-sky: #bfe6f5;
  --color-pale: #eef8fc;
  --color-cream: #f9f6e1; /* ヘッダー・タブ・モーダル・背景のクリーム色（character-frame.png の丸と同じ色） */
  --color-cream-section: #f1eed9; /* 本文の段落の背景：ヘッダーのクリーム色をほんの少し暗くして、ヘッダーと区別する */
  --color-indigo: #3e5d8e; /* 「生きものたち」セクションの背景 */
  --color-white: #ffffff;
  --color-accent: #ff9f6b;
  --color-accent-deep: #f2784a;

  --font-main: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;

  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 16px;

  --shadow-soft: 0 10px 30px rgba(31, 59, 87, 0.12);
  --shadow-hover: 0 16px 36px rgba(31, 59, 87, 0.18);

  --header-height: 68px;
}

/* ---------------------------------- reset --------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  /* 上下にさらに引っ張ったとき（iPhone等のバウンス）にのぞく背景を、ヘッダーと同じクリーム色にする。
     どれだけ大きく引っ張っても、ヘッダーが伸びたように見える */
  background-color: var(--color-cream);
  /* iPhone でリンクやボタンをタップしたときに出る灰色の四角を消す（代わりに各ボタンを沈み込ませる） */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-main);
  color: var(--color-navy);
  background-color: var(--color-pale);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ページ最上部でさらに引っ張ったとき、固定ヘッダーとKVの間にヘッダーと同じクリーム色がのぞくよう、
   ページの上端より外側から固定ヘッダーの真下（KVの上端）までクリーム色の帯を置いておく
   （ふだんは画面外かヘッダーの裏に隠れていて見えない） */
body::before {
  content: "";
  position: absolute;
  bottom: calc(100% - var(--header-height));
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-cream);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
}

.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ------------------------------- 見出し類 ------------------------------- */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}

/* 見た目の順序だけ日本語→英語に入れ替える（読み上げ順・HTML構造はそのまま） */
.section-heading .en {
  order: 1;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--color-blue);
  margin-top: 4px;
}

.section-heading .ja {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  color: var(--color-navy);
}

/* 手書き文字のタイトル画像（白地を背景色になじませる） */
.section-heading .ja img {
  height: clamp(56px, 9.8vw, 78px);
  width: auto;
  mix-blend-mode: multiply;
}

/* 横に長いタイトル画像：PCでは他の見出しと同じ高さ（約78px）にし、
   狭い画面では幅いっぱいに収まるよう比率を保ったまま縮める */
.section-heading .ja img.title-wide {
  width: min(100%, 664px);
  height: auto;
  margin: 0 auto;
}

/* --------------------------------- header -------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  /* 「世界観」セクションと同じクリーム色 */
  background: var(--color-cream);
}

/* ヘッダーの下（枠の外）に落ちる影。KV下部のボカシと同じく、下に行くほどなめらかに薄くなる */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(
    180deg,
    rgba(31, 59, 87, 0.12) 0%,
    rgba(31, 59, 87, 0.04) 40%,
    rgba(31, 59, 87, 0.02) 75%,
    rgba(31, 59, 87, 0) 100%
  );
  pointer-events: none; /* 影の下にあるリンクやボタンもそのまま押せるようにする */
}

.site-header .header-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  /* 左右を同じ幅（1fr）にした3カラムのグリッドで、真ん中の要素を画面の中央に置く
     スマホ：SNS｜ロゴ｜メニューボタン　PC：ロゴ｜ナビ｜SNS */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-self: center;
}

/* スマホでは左右のSNS・メニュー分の幅を差し引いても収まるよう、狭い画面ではロゴを縮める */
.site-logo img {
  height: min(30px, calc((100vw - 212px) / 5));
  width: auto;
  /* ロゴ画像の白地をヘッダーのクリーム色になじませる */
  mix-blend-mode: multiply;
  transition: transform 0.2s ease;
}

/* ロゴ（トップへ戻るリンク）も押した瞬間に沈み込ませる。
   ナビと同じく、mix-blend-mode を効かせたままにするため動きは画像に付ける */
.site-logo:active img,
.footer-logo:active img {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

/* ヘッダーのSNS：クリーム地でも白い円が埋もれないよう影を付ける
   スマホではロゴより前（左端）に置き、ロゴの幅を確保するため小さめにする（PCはメディアクエリ側で拡大） */
.site-header .header-sns {
  order: -1;
  justify-self: start;
  gap: 6px;
}

.site-header .header-sns a {
  width: 36px;
  height: 36px;
  box-shadow: 0 4px 12px rgba(31, 59, 87, 0.2);
}

.site-header .header-sns img {
  width: 17px;
}

/* ハンバーガーメニュー（チェックボックスのみで開閉） */
.nav-toggle {
  display: none;
}

.nav-toggle-label {
  order: 2;
  justify-self: end;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
  z-index: 1100;
  transition: transform 0.2s ease;
}

/* 押した瞬間はほかのボタンと同じく沈み込ませる（小さなボタンなのでSNSアイコンと同じ縮め方） */
.nav-toggle-label:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

.nav-toggle-label span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--color-navy);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  background: var(--color-cream);
  /* 影は開いているときだけ付ける。閉じて画面の上に隠れている間も影があると、
     影が画面の上端から漏れて、ヘッダーの上部がうっすら暗く見えてしまうため */
  box-shadow: none;
  /* 高さに関係なく、閉じているときは必ず画面の上端より外に出す */
  transform: translateY(calc(-100% - var(--header-height)));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
}

.site-nav ul {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 24px;
}

.site-nav a {
  display: block;
  padding: 14px 8px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-navy-soft);
  border-bottom: 1px solid rgba(63, 140, 196, 0.15);
}

/* ナビの手書き文字画像 */
.site-nav img {
  height: 26px;
  width: auto;
  mix-blend-mode: multiply;
  transition: transform 0.2s ease;
}

/* ヘッダー・フッターのナビは「一覧を見る」ボタンと同じ浮き上がり方にする。
   mix-blend-mode を効かせたままにするため、動きはリンクではなく画像に付ける */
@media (hover: hover) {
  .site-nav a:hover img,
  .footer-nav a:hover img {
    transform: translateY(-2px) scale(1.03);
  }
}

.site-nav a:focus-visible img,
.footer-nav a:focus-visible img {
  transform: translateY(-2px) scale(1.03);
}

/* 押した瞬間は少し縮めて沈み込ませる（ほかのボタンも同じ。押すときは素早く、離すと元の速さで戻る） */
.site-nav a:active img,
.footer-nav a:active img {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

/* タブの間の仕切り（/）。画像は左右に大きな余白があるため、
   高さをタブ文字に揃えたうえで斜線の部分だけを切り出して表示する */
.nav-divider {
  display: flex;
  align-items: center;
}

/* .site-nav img / .footer-nav img の width:auto に負けないよう、親まで含めて指定する */
.site-nav .nav-divider img,
.footer-nav .nav-divider img {
  width: 16px;
  height: 26px;
  object-fit: cover;
  object-position: 54% 50%;
}

/* スマホのメニューは縦並び＋罫線で区切るので、仕切りは出さない */
.site-nav .nav-divider {
  display: none;
}

.nav-toggle:checked ~ .site-nav {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

/* メニューを開いている間は3本線を×にする（チェックボックスとラベルは兄弟要素） */
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 860px) {
  /* PCはロゴを左端、ナビを中央、SNSを右端に置く */
  .site-logo {
    justify-self: start;
  }

  .site-logo img {
    height: 39px; /* PCではモバイル（30px）の1.3倍 */
  }

  .site-nav {
    justify-self: center;
  }

  .site-header .header-sns {
    order: 1;
    justify-self: end;
    gap: 20px; /* PCのみアイコンの間隔を広げる */
  }

  .site-header .header-sns a {
    width: 43px;
    height: 43px;
  }

  .site-header .header-sns img {
    width: 20px;
  }

  .nav-toggle-label {
    display: none;
  }

  .site-nav {
    position: static;
    background: none;
    box-shadow: none;
    transform: none;
    max-height: none;
    overflow: visible;
  }

  .site-nav ul {
    flex-direction: row;
    padding: 0;
    gap: 8px;
  }

  .site-nav a {
    border-bottom: none;
    padding: 10px 16px;
    border-radius: 999px;
  }

  .site-nav .nav-divider {
    display: flex;
  }
}

/* --------------------------------- waves ---------------------------------- */
.wave-divider {
  position: relative;
  width: 100%;
  height: 70px;
  /* セクションの境目が小数点以下のpx位置になると、隙間から背景が細い横線のように
     透けて見えるため、上下のセクションに1pxずつ重ねて隙間をふさぐ */
  margin: -1px 0;
  line-height: 0;
  /* 一点鎖線が波の上（前のセクション側）へはみ出して描かれるため、切り取らない */
  overflow: visible;
}

.wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.wave-divider.bg-navy {
  background-color: var(--color-navy);
}

/* 波の色＝次のセクションの背景色。波の面と一点鎖線の両方に使う */
.fill-cream {
  --wave-color: var(--color-cream-section);
}

.fill-pale {
  --wave-color: var(--color-pale);
}

.fill-navy {
  --wave-color: var(--color-navy);
}

.fill-indigo {
  --wave-color: var(--color-indigo);
}

.wave-divider path {
  fill: var(--wave-color);
}

/* 波の縁と同じ形の線を少し上にずらし、一点鎖線（長い線・短い線・長い線…）で描く。
   手描きらしく見せるため、線の長さと間隔は少しずつ不規則にしている
   （パターンの一周を画面幅より長くとり、繰り返しが目立たないようにする）。
   SVGは横方向だけ引き伸ばされるので、non-scaling-stroke で線の太さと
   破線の長さを画面上のpx基準にし、画面幅によって形が崩れないようにする */
.wave-divider .wave-line {
  fill: none;
  stroke: var(--wave-color);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-dasharray:
    251px 26px 20px 23px 219px 39px 15px 33px 284px 23px 22px 28px
    214px 24px 20px 35px 218px 29px 15px 39px 264px 23px 23px 25px
    238px 40px 14px 40px 284px 34px 14px 29px 215px 39px 16px 31px
    263px 26px 22px 25px;
  vector-effect: non-scaling-stroke;
  transform: translateY(-26px); /* viewBox単位（高さ80→70pxなので約23px上） */
}

@media (max-width: 699px) {
  .wave-divider .wave-line {
    stroke-width: 5px;
    stroke-dasharray:
      123px 22px 14px 21px 118px 17px 11px 23px 107px 16px 14px 22px
      125px 24px 12px 16px 101px 21px 10px 16px 130px 22px 14px 24px
      97px 23px 11px 21px 136px 23px 13px 16px 112px 14px 14px 22px;
    transform: translateY(-22px);
  }
}

/* --------------------------------- KV ------------------------------------- */
.hero {
  position: relative;
  margin-top: var(--header-height);
  /* KV画像の比率にあわせ、どの画面幅でもイラスト全体が見切れずに収まるようにする */
  aspect-ratio: 1297 / 1080; /* スマホ用：KV_mobile.jpg */
  display: flex;
  align-items: center;
  justify-content: center;
  /* KV下部が透けたときに、下の「世界観」セクションと同じ色が見えるようにする */
  background: var(--color-cream-section);
  overflow: hidden;
}

@media (min-width: 700px) {
  .hero {
    aspect-ratio: 1920 / 890; /* PC用：KV_pc.jpg */
  }
}

.hero-media {
  position: absolute;
  inset: 0;
  /* 画像の下部を徐々に透明にし、「世界観」セクションへ溶け込ませる */
  -webkit-mask-image: linear-gradient(180deg, #000 90.67%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 90.67%, transparent 100%);
}

.hero-media picture {
  display: block;
  height: 100%;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ページを開いたときにKV画像をフェードインさせる（kv-fade.js が読み込み完了後に .is-loaded を付ける）
   JSが動く環境（html.js）でだけ最初に隠すので、JSが無効でも画像は普通に表示される */
.js .hero-media img {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}

.js .hero-media img.is-loaded {
  opacity: 1;
}

/* ------------------------------ fade-up（スクロール時の出現演出） --------------- */
/* JSが動く環境（html.js）でだけ初期状態を隠す。JSが無効でも内容は普通に表示される */
.js [data-fade] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 見出し → 中身の順に時間差で出す */
.js [data-fade="2"] { transition-delay: 0.15s; }
.js [data-fade="3"] { transition-delay: 0.3s; }

.js [data-fade].is-visible {
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定の端末では、移動なしでその場に表示する */
@media (prefers-reduced-motion: reduce) {
  .js [data-fade] {
    transform: none;
    transition: opacity 0.4s ease-out;
    transition-delay: 0s;
  }
}

/* ------------------------------ placeholder -------------------------------- */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-blue-deep);
  background: repeating-linear-gradient(
    135deg,
    var(--color-sky),
    var(--color-sky) 14px,
    var(--color-pale) 14px,
    var(--color-pale) 28px
  );
  border: 2px dashed var(--color-blue);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 12px;
}

/* --------------------------------- section base ---------------------------- */
.section {
  padding: 48px 0 56px;
}

.bg-cream {
  background-color: var(--color-cream-section);
}

.bg-pale {
  background-color: var(--color-pale);
}

.bg-navy {
  background-color: var(--color-navy);
}

.bg-indigo {
  background-color: var(--color-indigo);
}

/* 濃い背景のセクションでは、手書きのタイトル画像をフッターと同じ方法で白抜きにする
   （反転＋グレースケールで「紺の文字→白、白地→黒」にし、screen合成で黒地だけを消す） */
.bg-indigo .section-heading .ja img,
.page-indigo .section-heading .ja img {
  filter: invert(1) grayscale(1) brightness(1.35);
  mix-blend-mode: screen;
}

/* --------------------------------- about ----------------------------------- */
/* 左右の端の飾り：左右に分かれた1枚の画像を left / right に切り分け、
   セクションの左右の端にそれぞれ置く。中身（見出し・画像・文章）より奥に表示する。
   飾りを出したいセクションに、次のどちらかのクラスを付ける
   - steam-bg：湯気（湯けむり.png を切り分けたもの）。「ここは？」「お知らせ」で使用
   - rock-bg ：海藻の生えた岩場（いきものたち_両サイド.png を切り分けたもの）。「生きものたち」で使用 */
.steam-bg,
.rock-bg {
  position: relative;
  isolation: isolate; /* 飾り（z-index: -1）をセクションの背景色より手前、中身より奥に収める */
  overflow: hidden;
  /* --side-width：左の飾りの幅。
     --side-right-ratio：右の飾りの幅÷左の飾りの幅。元画像の左右の幅の比に合わせ、左右の大きさをそろえる */
  --side-width: 28vw;
}

.steam-bg::before,
.steam-bg::after,
.rock-bg::before,
.rock-bg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  /* 飾りを元の比率のまま幅いっぱいに表示する（伸び縮みさせない）。
     セクションより画像の方が長いときは上下のはみ出した分を切り、
     短いときは縦に繰り返して上端〜下端までつなげる */
  background-repeat: no-repeat repeat;
  background-size: 100% auto;
  background-position: center;
  /* 上下の端で画像が直線的に切れて見えないよう、上下それぞれ 90px かけて透明にぼかす */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  pointer-events: none;
}

@media (min-width: 760px) {
  .steam-bg,
  .rock-bg {
    --side-width: clamp(100px, 12vw, 180px);
  }
}

.steam-bg::before,
.rock-bg::before {
  left: 0;
  width: var(--side-width);
  background-image: var(--side-left-image);
}

.steam-bg::after,
.rock-bg::after {
  right: 0;
  width: calc(var(--side-width) * var(--side-right-ratio));
  background-image: var(--side-right-image);
}

.steam-bg {
  --side-left-image: url("../images/steam-left.webp");
  --side-right-image: url("../images/steam-right.webp");
  --side-right-ratio: 421 / 365;
}

.rock-bg {
  --side-left-image: url("../images/character-side-left.webp");
  --side-right-image: url("../images/character-side-right.webp");
  --side-right-ratio: 317 / 312;
}

/* スマホ：岩場は集合写真と重なってにぎやかに見えるため表示しない（PCサイズの760px以上でだけ表示する） */
@media (max-width: 759px) {
  .rock-bg::before,
  .rock-bg::after {
    display: none;
  }
}

.about-flex {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.about-text {
  text-align: center;
  max-width: 640px;
  line-height: 2.2;
}

.about-text p {
  margin-bottom: 1em;
}

.about-text p:last-child {
  margin-bottom: 0;
}

/* スマホでは文章を少し大きくして読みやすくする。
   1行に入る文字数が少なく、PC用の改行（<br>）では言葉の途中で折り返してしまうため、
   改行は無くして段落ごとに流し込む（対応ブラウザでは文節の切れ目で折り返す） */
@media (max-width: 759px) {
  .about-text {
    font-size: 1.1rem;
    word-break: auto-phrase;
  }

  .about-text br {
    display: none;
  }
}

/* 言葉の途中で折り返さないよう、ひとまとまりにしたい語を囲む */
.nobr {
  display: inline-block;
}

/* PCでだけ改行させたい位置に置く <br class="pc-only"> */
@media (max-width: 759px) {
  br.pc-only {
    display: none;
  }
}

/* 暗い画像と明るい画像を重ねる枠。画像自体に縁取りがあるので、角丸・影は付けない */
.about-lamp {
  position: relative;
  width: min(100%, 480px);
  margin: 0 auto;
}

.about-lamp img {
  width: 100%;
  height: auto; /* 画像本来の比率のまま表示する */
}

/* 明るい画像は暗い画像のぴったり真上に重ねる */
.about-lamp .about-lamp-on {
  position: absolute;
  inset: 0;
  height: 100%;
  transition: opacity 1s ease-in-out;
}

/* JSが動く環境でだけ、明るい画像を最初は隠しておく（JSが無効なら明かりがついた状態で表示） */
.js .about-lamp:not(.is-lit) .about-lamp-on {
  opacity: 0;
}

@media (min-width: 760px) {
  .about-flex {
    flex-direction: row;
    text-align: left;
    align-items: center;
  }

  /* about-image / about-text のどちらにも flex-basis が無いと、画像側が
     テキストの折り返しに押されて意図しない幅まで潰れ、余った右側の空白が
     そのまま残って全体が左寄りに見えてしまう。画像側の幅を固定し、
     テキスト側を残り幅いっぱいまで伸ばすことで解消する。 */
  .about-image {
    flex: 0 0 min(45%, 480px);
  }

  .about-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
}

/* ------------------------------- carousel（共通の横スライド機構） --------------- */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* アイテム幅をカルーセルの実表示幅（cqw）基準で決めるためのクエリコンテナ。
     ページの max-width より広いウィンドウでも、実際に見えている幅を基準に
     アイテム数がシームレスに増減する。 */
  container-type: inline-size;
}

.carousel-track {
  --item-w: 180px; /* 既定値。各カルーセルの数値で上書きする */
  display: flex;
  transform: translateX(calc(-1 * var(--index, 0) * var(--item-w)));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}

.carousel-item {
  flex: 0 0 var(--item-w);
  width: var(--item-w);
  box-sizing: border-box;
  padding: 0 14px;
  -webkit-user-drag: none;
  user-select: none;
}

.carousel-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-blue-deep);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  z-index: 2;
}

@media (hover: hover) {
  .carousel-arrow:hover {
    background: var(--color-blue);
    color: var(--color-white);
    transform: scale(1.08);
  }
}

.carousel-arrow:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

/* 最新／最古など、これ以上進めない端での見た目 */
.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.carousel-arrow:disabled:hover,
.carousel-arrow:disabled:active {
  background: var(--color-white);
  color: var(--color-blue-deep);
  transform: none;
}

/* PCは矢印操作、スマホはスワイプ操作に統一するため、狭い画面では矢印を隠す */
@media (max-width: 699px) {
  .carousel-arrow {
    display: none;
  }
}

/* ------------------------------- character（トップページの誘導） --------------- */
.character-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.character-teaser-image {
  width: 100%;
  max-width: 640px;
  height: auto; /* 画像本来の比率のまま表示する */
}

/* PC：見出しから「くわしく見る」ボタンまでが1画面に余裕をもって収まるよう、
   写真を0.9倍（640px → 576px）に、写真とボタンの間も少し詰める */
@media (min-width: 760px) {
  .character-teaser {
    gap: 20px;
  }

  .character-teaser-image {
    max-width: 576px;
  }
}

/* 手書きの画像ボタン（背景が透過したPNGなので、どの背景色の上でもそのまま置ける） */
.btn-image {
  display: inline-block;
  border-radius: 999px; /* フォーカス枠をボタンの形に合わせる */
}

/* ホバー時の動きは画像そのものに付ける */
.btn-image img {
  width: clamp(200px, 40vw, 260px);
  height: auto;
  /* ボタンのサーモンピンクを少し鮮やかにする（1 が元の色。数値を上げるほど鮮やか） */
  filter: saturate(1.5);
  transition: transform 0.2s ease;
}

/* スマホ：指で押しやすいよう、上の幅の1.2倍にする（「くわしく見る」「TOPへ戻る」の両方） */
@media (max-width: 699px) {
  .btn-image img {
    width: clamp(240px, 48vw, 312px);
  }
}

/* 右側に大きな白い余白がある、透過なしのボタン画像（btn-more.jpg）用：
   画像の左側（ボタンがある範囲：元画像の横0〜2056px）だけを表示し、
   白い四隅はボタンの形（角丸）に沿って切り取る */
.btn-image img.btn-image-crop {
  aspect-ratio: 2056 / 501;
  object-fit: cover;
  object-position: 0 50%;
  clip-path: inset(5% 3.3% 4% 3.3% round 999px);
}

@media (hover: hover) {
  .btn-image:hover img {
    transform: translateY(-2px) scale(1.03);
  }
}

.btn-image:focus-visible img {
  transform: translateY(-2px) scale(1.03);
}

.btn-image:active img {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

/* ------------------------------- character（一覧ページのカード） --------------- */
.character-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 44px 28px;
}

.character-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 「座布団」＝キャラのイラストを収める丸（character-frame.png）を置く枠 */
.character-cushion {
  position: relative;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
  .character-item:hover .character-cushion {
    transform: translateY(-10px) scale(1.06);
  }
}

.character-item:focus-visible .character-cushion {
  transform: translateY(-10px) scale(1.06);
}

.character-item:active .character-cushion {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

/* character-frame.png は丸の周りに透明な余白（片側 約13%）があるため、
   丸の部分が枠（168px）と同じ大きさになるよう、画像を拡大して余白を枠の外へ逃がす */
.character-frame {
  width: 136.4%;
  max-width: none;
  height: auto;
  margin: -18.2%;
  filter: drop-shadow(0 8px 16px rgba(31, 59, 87, 0.25));
}

/* 丸の中に収めるキャラのイラスト（今は「？？？」用の character-unknown.png）。
   character-frame.png と同じ900×900のキャンバスで描かれている前提で、丸とまったく同じ位置・大きさに重ねる */
.character-illust {
  position: absolute;
  top: -18.2%;
  left: -18.2%;
  width: 136.4%;
  max-width: none;
  height: auto;
  /* 画像の透明な余白がモーダルの×ボタンなどに重なっても、タップを横取りしないようにする */
  pointer-events: none;
}

/* イラストを小さめに見せたいキャラ用（ヒトデ）。モーダルは0.8倍 */
.character-illust.is-small {
  transform: scale(0.8);
}

/* 一覧のアイコン（丸の中）では0.9倍 */
.character-cushion .character-illust.is-small {
  transform: scale(0.9);
}

.character-name {
  margin-top: 16px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-navy);
}

.btn {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 8px 18px rgba(242, 120, 74, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .btn:hover {
    background: var(--color-accent-deep);
    transform: translateY(-2px);
  }
}

.btn:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

/* ---------------------------------- news（お知らせカルーセル） ------------------- */
.news-carousel .carousel-viewport {
  padding: 10px 0 18px;
}

/* こちらもウィンドウ幅にあわせてアイテム幅が連続的に変化する */
.news-carousel .carousel-track {
  --item-w: clamp(260px, 70cqw, 420px);
}

@supports not (container-type: inline-size) {
  .news-carousel .carousel-track {
    --item-w: 340px;
  }
}

.news-item {
  display: flex;
  height: 100%;
}

.news-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-lg); /* キーボード操作時のフォーカス枠をカードの形に合わせる */
}

/* カードはクリックでモーダルを開くので、ホバー時に画像を少し浮かせて押せることを伝える */
.news-card .news-image {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .news-card:hover .news-image {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
  }
}

.news-card:focus-visible .news-image {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* カードは大きいので、縮める量をほかのボタンより控えめにする */
.news-card:active .news-image {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* スワイプが始まったら、指を置いた瞬間に縮んだカードを元の大きさに戻す
   （.is-dragging は carousel.js がスワイプ中だけ付ける） */
.carousel.is-dragging .news-card:active .news-image {
  transform: none;
  transition-duration: 0.2s;
}

.news-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  padding: 16px;
  font-size: 0.8rem;
}

.news-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 4px 0;
}

.news-title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-navy);
  margin-bottom: 10px;
}

.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.news-meta time {
  font-size: 0.82rem;
  color: var(--color-blue);
  font-weight: 700;
}

.news-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent-deep);
  background: rgba(255, 159, 107, 0.15);
  padding: 3px 12px;
  border-radius: 999px;
}

/* 運営会社ボタン：水色のボタンに横組みロゴ（studioluca-logo.webp）＋「→」 */
.btn-company {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px 10px 20px;
  background: var(--color-sky);
  color: var(--color-navy); /* 淡い水色の上でも読めるよう矢印は紺 */
  box-shadow: none; /* .btn の光って見える影を付けない */
}

@media (hover: hover) {
  .btn-company:hover {
    background: #a6dbef;
  }
}

/* 横組みロゴ（元画像 logo_yoko@300x.webp の透明な余白を切り取ったもの） */
.btn-company-logo {
  height: 20px;
  width: auto;
}

/* --------------------------------- footer ------------------------------------ */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 56px 0 28px;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
}

/* フッターのロゴ・ナビはヘッダーと同じ画像を白抜きにして使う。
   反転＋グレースケールで「紺の文字→白、白地→黒」にし、
   screen合成で黒地だけを消して紺の背景に白文字をのせる */
.footer-logo img,
.footer-nav img {
  width: auto;
  filter: invert(1) grayscale(1) brightness(1.35);
  mix-blend-mode: screen;
}

.footer-logo img {
  height: 30px;
  transition: transform 0.2s ease;
}

.footer-nav {
  /* 仕切り（/）が行末に取り残されないよう、タブは折り返さず1行に収める */
  --footer-nav-height: min(26px, calc((100vw - 112px) / 12));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.footer-nav a {
  display: block;
}

/* 狭い画面では、3つのタブと仕切りが1行に収まるよう文字画像を縮める */
.footer-nav img {
  height: var(--footer-nav-height);
  transition: transform 0.2s ease;
}

.footer-nav .nav-divider img {
  width: calc(var(--footer-nav-height) * 0.62);
  height: var(--footer-nav-height);
}


.sns-links {
  display: flex;
  gap: 14px;
}

.sns-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 白い円の中に各SNSの公式アイコンを収める（ヘッダー・フッター共通） */
.sns-links img {
  width: 20px;
  height: auto;
}

/* Instagramのロゴは円の中で小さく見えるため、ヘッダー・フッターとも各サイズの1.2倍にする */
.sns-links a[aria-label="Instagram"] img {
  transform: scale(1.2);
}

/* ホバーの浮き上がりは、マウスなどで本当にホバーできる端末でだけ付ける。
   iPhone などではタップ後もホバー状態が残り、SNSアプリから戻ってきたときに
   押したアイコンだけ浮いたまま（位置が高いまま）になってしまうため */
@media (hover: hover) {
  .sns-links a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  }
}

.sns-links a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.sns-links a:active {
  transform: scale(0.92); /* 小さな丸なので、ほかのボタンより少し大きめに縮めて押した感じを出す */
  box-shadow: none;
  transition-duration: 0.1s;
}

@media (min-width: 760px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ヘッダーと同じく、PCではロゴを1.3倍にする */
@media (min-width: 860px) {
  .footer-logo img {
    height: 39px;
  }
}

.footer-copyright {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}

/* スマホ：フッターが大きく見えないよう、波線からロゴまでと、コピーライトの上下の余白を詰める
   （PCはフッターが横並びになる760px以上なので、それ未満だけに効かせる） */
@media (max-width: 759px) {
  .site-footer {
    padding: 32px 0 16px; /* 上：波線〜ロゴ 56→32px、下：コピーライト〜画面下 28→16px */
  }

  .footer-copyright {
    margin-top: 20px; /* 28→20px */
    padding-top: 14px; /* 区切り線〜文字 20→14px */
    line-height: 1.4;
  }
}

/* ------------------------------- キャラ詳細ページ -------------------------------- */
.page-hero {
  margin-top: var(--header-height);
  padding: 56px 0 40px;
  background: linear-gradient(180deg, var(--color-sky), var(--color-pale));
  text-align: center;
}

.breadcrumb {
  font-size: 0.8rem;
  color: var(--color-navy-soft);
  margin-bottom: 18px;
}

.breadcrumb a {
  color: var(--color-blue-deep);
  font-weight: 700;
}

.profile-card {
  max-width: 900px;
  margin: -40px auto 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 32px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.profile-image .img-placeholder {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  font-size: 3rem;
  margin: 0 auto;
}

.profile-name {
  text-align: center;
}

.profile-name .kana {
  font-size: 0.85rem;
  color: var(--color-blue);
  letter-spacing: 0.15em;
}

.profile-name h1,
.profile-name h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin: 6px 0 10px;
}

.profile-name .catch {
  color: var(--color-accent-deep);
  font-weight: 700;
}

.profile-data {
  width: 100%;
}

.profile-data table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.profile-data th,
.profile-data td {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.92rem;
}

.profile-data th {
  width: 110px;
  color: var(--color-blue-deep);
  background: var(--color-pale);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-weight: 700;
}

.profile-data td {
  background: var(--color-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

@media (min-width: 760px) {
  .profile-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 40px;
  }

  .profile-image {
    flex: 0 0 300px;
  }
}

.detail-section {
  max-width: 800px;
  margin: 0 auto;
}

.detail-section h2 {
  font-size: 1.3rem;
  color: var(--color-navy);
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 6px solid var(--color-accent);
  border-radius: 3px;
}

.detail-section p {
  margin-bottom: 1em;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.gallery-grid .img-placeholder {
  aspect-ratio: 1 / 1;
  font-size: 1.6rem;
}

.character-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* キャラクター一覧ページ：ページ全体を「生きものたち」セクションと同じ濃い青にし、
   濃い背景でも読めるよう文字色を明るくする */
.page-indigo {
  background-color: var(--color-indigo);
}

.page-indigo .page-hero {
  background: none;
  padding: 56px 0 0; /* ヘッダーから見出しまで56px */
}

/* 見出しからキャラクター一覧まで56px（上の余白とそろえて、見出しが上下の中央に見えるようにする） */
.page-indigo .section-heading {
  margin-bottom: 56px;
}

.page-indigo .section-heading .ja,
.page-indigo .character-name {
  color: var(--color-white);
}

/* ------------------------------- 404（ページが見つからない） -------------------------------- */
/* 存在しないURLで表示される 404.html。一覧ページと同じ紺地に、文字だけを置く */
.notfound {
  padding-top: 0;
  padding-bottom: 64px;
  text-align: center;
  color: var(--color-white);
}

.notfound-title {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.notfound-text {
  margin-bottom: 40px;
  line-height: 2;
}

/* スマホでは文章を自然に折り返す（PC用の改行は使わない） */
@media (max-width: 759px) {
  .notfound-text br {
    display: none;
  }
}

/* ------------------------------- キャラクターモーダル -------------------------------- */
dialog.character-modal,
dialog.news-modal {
  /* グローバルリセット（* { margin: 0 }）でネイティブの中央寄せが
     効かなくなるため、margin: auto を明示的に復元する */
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: min(560px, 92vw);
  width: 100%;
  overflow: visible;
}

dialog.character-modal::backdrop,
dialog.news-modal::backdrop {
  background: rgba(31, 59, 87, 0.55);
  backdrop-filter: blur(2px);
}

.modal-card {
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-cream); /* ヘッダーと同じクリーム色 */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: 40px 32px 32px;
}

/* 開いた直後はカード自体にフォーカスを置く（character-modal.js / news-modal.js）。
   その際に、カードやモーダル本体（dialog）の周りへブラウザ標準の枠線が出ないようにする
   （Safari は :focus-visible にも枠線を付けるため、両方とも消す） */
.modal-card:focus,
.modal-card:focus-visible,
dialog.character-modal:focus,
dialog.character-modal:focus-visible,
dialog.news-modal:focus,
dialog.news-modal:focus-visible {
  outline: none;
}

/* 閉じるボタン：通常時は白い丸に「生きものたち」セクションと同じ濃い青の×。
   ホバー（キーボード選択）時は色を反転し、濃い青の丸にクリーム色の×にする */
.modal-close {
  position: absolute;
  z-index: 2; /* イラストなどが重なっても、常に一番手前で押せるようにする */
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-indigo);
  font-size: 0; /* 文字の「×」はフォントによって上下にずれるため隠し、下の2本線で×を描く */
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* ×の2本線：ボタンのちょうど中心で交差させる（色はボタンの文字色に連動） */
.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (hover: hover) {
  .modal-close:hover {
    background: var(--color-indigo);
    color: var(--color-cream);
  }
}

.modal-close:focus-visible {
  background: var(--color-indigo);
  color: var(--color-cream);
}

.modal-close:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

/* モーダルの中身：イラスト・名前・説明文（3行程度）を縦に並べる */
.modal-character {
  text-align: center;
}

.modal-character-image {
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
  border-radius: var(--radius-md);
}

/* モーダルのイラスト（丸い枠なし）。一覧のカードと同じ基準で、イラストだけを表示する */
.modal-character-icon {
  position: relative;
  border-radius: 0;
}

/* イラストを1.2倍で見せたいキャラ用（オルくん）。1.2倍なら枠内に収まるので、余白はほかのキャラと同じまま */
.modal-character-icon.is-large .character-illust {
  transform: scale(1.2);
}

.modal-character-name {
  font-size: 1.4rem;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.modal-character-text {
  color: var(--color-navy-soft);
  line-height: 1.9;
  text-align: left;
}

/* お知らせの画像（仮置きの枠を実際の画像に差し替えたもの）：カード・モーダル共通
   枠の角丸・16:9 はそのままに、画像を枠いっぱいに表示する */
.news-image-photo {
  padding: 0;
  overflow: hidden;
}

.news-image-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------- お知らせモーダル -------------------------------- */
/* 枠（dialog・カード・閉じるボタン）はキャラクターモーダルと共通。ここでは中身だけを整える */
.modal-news-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  margin-top: 22px; /* 右上の×ボタン（上端から50pxまで）に画像がかぶらないよう下げる */
  margin-bottom: 18px;
  font-size: 0.85rem;
}

.modal-news .news-meta {
  margin-bottom: 10px;
}

.modal-news-title {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.modal-news-text {
  color: var(--color-navy-soft);
  line-height: 1.9;
}