/* ============================================================
   /kanso-bun/works/ 固有スタイル
   ../style.css を継承し、このページで足りない分だけをここに置く。
   （../style.css は変更しない）
   ============================================================ */

.works-body{
  background:linear-gradient(180deg,#0a2a5e 0%, #0a2a5e 100%);
}

/* ---------------- HERO ---------------- */
.works-hero{
  position:relative;overflow:hidden;
  padding:38px 0 34px;
  background:linear-gradient(180deg,#1565c0 0%, #2e9fe0 55%, #7fd0f5 100%);
  text-align:center;
}
.works-hero .bubble{pointer-events:none;}
.works-hero .b1{width:26px;height:26px;left:8%;top:22%;}
.works-hero .b2{width:16px;height:16px;left:14%;top:52%;}
.works-hero .b3{width:34px;height:34px;right:9%;top:30%;}
.works-hero-inner{position:relative;z-index:3;}
.works-hero h1{
  font-family:'Zen Maru Gothic',sans-serif;font-weight:900;
  font-size:clamp(24px,7vw,32px);line-height:1.3;letter-spacing:.04em;
  color:#fff;text-shadow:0 2px 0 rgba(8,36,90,.28);
}
.works-hero .lead{
  font-family:'Kaisei Decol',serif;font-size:14px;line-height:1.9;
  color:var(--deep);max-width:560px;margin:14px auto 0;
}

/* ---------------- 本文エリア ---------------- */
.works-main{padding:26px 0 12px;}

.gallery-lead{
  font-family:'Kaisei Decol',serif;font-size:13.5px;line-height:1.9;
  color:rgba(255,255,255,.82);text-align:center;margin-bottom:18px;
}

/* ================================================================
   ギャラリー（表に出るのは実物スキャンのサムネイルだけ）
   ================================================================ */
.gallery{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
@media (max-width:599.98px){
  .gallery{grid-template-columns:1fr;gap:16px;}
}

.gallery-item{margin:0;}

.gallery-btn{
  display:block;width:100%;
  background:#fff;
  border:1.5px solid rgba(40,52,74,.32);
  border-radius:14px;
  padding:10px 10px 14px;
  box-shadow:0 6px 0 rgba(8,36,90,.18);
  cursor:pointer;                       /* 「読める」ことを示す */
  text-align:left;
  font-family:'Zen Maru Gothic',sans-serif;
  transition:transform .18s ease, box-shadow .18s ease;
}
.gallery-btn:hover,
.gallery-btn:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 9px 0 rgba(8,36,90,.22);
}
.gallery-btn:focus-visible{
  outline:3px solid var(--sun);
  outline-offset:3px;
}
.gallery-btn:active{
  transform:translateY(1px);
  box-shadow:0 3px 0 rgba(8,36,90,.18);
}

/* サムネイル本体 */
.gallery-thumb{
  position:relative;display:block;
  aspect-ratio:480 / 360;
  border-radius:8px;
  overflow:hidden;
  background:#f4f8fd;
  border:1px solid rgba(40,52,74,.14);
}
.gallery-thumb img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  transition:transform .25s ease, filter .25s ease;
}
/* ホバー：わずかな拡大＋明度アップ＋虫めがねを重ねる */
.gallery-btn:hover .gallery-thumb img,
.gallery-btn:focus-visible .gallery-thumb img{
  transform:scale(1.05);
  filter:brightness(1.06);
}
.gallery-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,42,94,.30);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.gallery-icon svg{
  width:42px;height:42px;
  color:#fff;
  filter:drop-shadow(0 2px 4px rgba(8,36,90,.5));
}
.gallery-btn:hover .gallery-icon,
.gallery-btn:focus-visible .gallery-icon{opacity:1;}

/* キャプション */
.gallery-cap{display:block;padding:12px 4px 0;}
.gallery-film{
  display:block;font-size:11.5px;font-weight:500;color:#5a6b85;letter-spacing:.02em;
}
.gallery-film em{font-style:normal;font-weight:700;color:var(--mid);}
.gallery-title{
  display:block;font-weight:900;font-size:18px;line-height:1.35;
  letter-spacing:.03em;color:var(--deep);margin-top:4px;
}
.gallery-author{
  display:block;font-family:'Kaisei Decol',serif;
  font-size:12.5px;color:var(--ink);margin-top:5px;
}

/* ================================================================
   モーダル
   ================================================================ */
.wmodal{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
}
.wmodal[hidden]{display:none;}

.wmodal-overlay{
  position:absolute;inset:0;
  background:rgba(4,18,42,.72);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

.wmodal-box{
  position:relative;
  width:100%;max-width:720px;
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(4,18,42,.45);
  display:flex;flex-direction:column;
  overflow:hidden;
}

.wmodal-close{
  position:absolute;top:10px;right:10px;z-index:3;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);
  border:1.5px solid rgba(40,52,74,.20);
  border-radius:50%;
  color:var(--deep);
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.wmodal-close svg{width:17px;height:17px;}
.wmodal-close:hover{background:var(--foam);transform:scale(1.06);}
.wmodal-close:focus-visible{outline:3px solid var(--mid);outline-offset:2px;}

.wmodal-scroll{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:22px 18px 26px;
}

/* ---------------- モーダル中身 ---------------- */
.wdetail[hidden]{display:none;}

.wdetail-title{
  font-family:'Zen Maru Gothic',sans-serif;font-weight:900;
  font-size:clamp(20px,5.6vw,26px);line-height:1.4;letter-spacing:.03em;
  color:var(--deep);
  padding-right:44px;                  /* ×ボタンと重ならないように */
}
.wdetail-author{
  font-family:'Kaisei Decol',serif;font-size:13.5px;color:var(--ink);
  text-align:right;
  margin-top:6px;padding-bottom:10px;
  border-bottom:1.5px solid var(--rule);
}

/* 読み版（原稿用紙・横長） */
.wdetail-read{margin-top:18px;}
.wdetail-read figure{
  margin:0 0 12px;
  background:#f4f8fd;
  border:1px solid rgba(40,52,74,.14);
  border-radius:8px;
  overflow:hidden;
}
.wdetail-read figure:last-child{margin-bottom:0;}
.wdetail-read img{
  width:100%;height:auto;            /* 375pxでもはみ出さない */
  display:block;
}

/* 全文テキスト */
.wdetail-text{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(21,101,192,.16);
}
.wdetail-text p{
  font-family:'Kaisei Decol',serif;
  font-size:14.5px;line-height:2.0;letter-spacing:.02em;
  color:var(--ink);text-align:justify;
  margin-top:14px;
}
.wdetail-text p:first-child{margin-top:0;}

/* ---------------- 末尾CTA ---------------- */
.works-cta{padding:30px 0 46px;text-align:center;}
.works-cta .back-btn{
  display:inline-block;
  padding:16px 30px;
  background:linear-gradient(100deg,var(--mid),var(--bright));
  border-radius:999px;
  box-shadow:0 5px 0 rgba(8,36,90,.28);
  font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.04em;color:#fff;text-decoration:none;
  transition:transform .1s ease,box-shadow .1s ease;
}
.works-cta .back-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(8,36,90,.28);}

@media (max-width:520px){
  .works-hero{padding:30px 0 28px;}
  .wmodal{padding:12px 10px;}
  .wmodal-scroll{padding:20px 14px 22px;}
}

/* ================================================================
   海神さんのひとこと（モーダル最下部・その場でトグル展開）
   ----------------------------------------------------------------
   演出は /screening.html の綿津見（js/oracle.js ＋ css/style.css の
   .oracle-avatar / .oracle-bubble）に合わせてある：
     ・ふわふわ上下に漂うアイコン（揺れと明滅が同期）
     ・白地・丸角14px・やわらかい影の吹き出し
     ・0.3秒のフェード
   新しいモーダルは作らない。既存モーダルの中で開閉するだけ。
   ================================================================ */
.wvoice{
  margin-top:24px;
  padding:20px 14px 22px;
  border-top:1px solid rgba(21,101,192,.16);
  background:linear-gradient(180deg,rgba(234,247,255,0) 0%,rgba(234,247,255,.9) 100%);
  border-radius:0 0 10px 10px;
  text-align:center;
}

/* ---- アイコン＝トグルボタン（ひとこと分のスペースの上に浮かぶ）---- */
.wvoice-toggle{
  display:inline-flex;flex-direction:column;align-items:center;gap:7px;
  padding:4px 10px 6px;
  background:transparent;border:none;border-radius:14px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.wvoice-toggle:focus-visible{outline:3px solid var(--sun);outline-offset:3px;}

/* 揺れは figure に、hover の拡大は img に分けて持たせる
   （同じ要素に載せると animation の transform が hover を食う） */
.wvoice-figure{
  display:block;
  animation:wvoice-float 5.5s ease-in-out infinite;
}
.wvoice-icon{
  width:84px;height:84px;display:block;
  filter:drop-shadow(0 6px 14px rgba(13,35,59,.35));
  transition:transform .25s ease;
}
.wvoice-toggle:hover .wvoice-icon,
.wvoice-toggle:focus-visible .wvoice-icon{transform:scale(1.06);}

@keyframes wvoice-float{
  0%,100%{transform:translateY(0);opacity:.92;}
  50%    {transform:translateY(-7px);opacity:1;}
}

/* ---- 添え文（タップできることを示す）---- */
.wvoice-label{
  display:inline-block;
  font-family:'Zen Maru Gothic',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:.12em;
  color:var(--mid);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(21,101,192,.22);
  border-radius:999px;
  padding:4px 13px;
  box-shadow:0 2px 0 rgba(8,36,90,.10);
}
.wvoice-toggle:hover .wvoice-label{background:#fff;border-color:rgba(21,101,192,.4);}

/* 文言は状態で入れ替わる。aria-hidden なので読み上げ名には混ざらない
   （状態は button の aria-expanded が伝える） */
.wvoice-cue{
  display:inline-block;
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:10.5px;letter-spacing:.12em;
  color:rgba(8,36,90,.62);
}
.wvoice-cue::before{content:'タップしてね';}
.wvoice-cue::after{
  content:'▾';
  display:inline-block;margin-left:4px;
  transition:transform .3s ease;
}
.wvoice-toggle[aria-expanded="true"] .wvoice-cue::before{content:'とじる';}
.wvoice-toggle[aria-expanded="true"] .wvoice-cue::after{transform:rotate(180deg);}

/* ---- ひとこと本体（吹き出し）---- */
.wvoice-body{
  position:relative;
  max-width:520px;margin:15px auto 0;
  background:#fff;
  border:1px solid rgba(20,36,58,.12);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 8px 24px rgba(13,35,59,.16);
  text-align:left;
  opacity:0;
  transform:translateY(-7px);      /* わずかに上から滑り降りてくる */
  transition:opacity .3s ease, transform .3s ease;
}
.wvoice-body[hidden]{display:none;}
.wvoice-body.is-open{opacity:1;transform:translateY(0);}

/* 吹き出しの尻尾（アイコンを指す） */
.wvoice-body::before{
  content:'';
  position:absolute;top:-8px;left:50%;
  width:15px;height:15px;
  background:#fff;
  border-left:1px solid rgba(20,36,58,.12);
  border-top:1px solid rgba(20,36,58,.12);
  border-radius:3px 0 0 0;
  transform:translateX(-50%) rotate(45deg);
}

.wvoice-text{
  font-family:'Kaisei Decol',serif;
  font-size:14px;line-height:1.95;letter-spacing:.02em;
  color:rgba(20,36,58,.9);
}

@media (max-width:520px){
  .wvoice{padding:18px 6px 20px;}
  .wvoice-icon{width:72px;height:72px;}
  .wvoice-body{padding:14px 15px;font-size:13.5px;}
}

/* 動きを減らす設定では、揺れも展開の動きも止める（表示は即時） */
@media (prefers-reduced-motion: reduce){
  .wvoice-figure{animation:none;}
  .wvoice-icon,
  .wvoice-body,
  .wvoice-cue::after{transition:none;}
}