@charset "utf-8";
/* セーザイゲーム紹介ページ専用のスタイル。
   sezaigame.com（Wix）から熊野林星会サイトへ移したページです。
   文章の差し替えは public/inc/sezaigame.php、見た目の調整はこのファイルです。

   組み方の考え方（ここを崩すと「ただの書類」に戻ります）
   1. 写真はページの端まで届かせる。端に触れない写真は資料の図版になります
   2. 文字を写真の上に載せる場面を作る。言葉と絵が一枚の画になります
   3. 章題・本文・写真の大小差を大きく取る。差が小さいと平板になります
   4. 「楽しいが生み出す、好奇心。」からの章は、全幅の写真を途切れさせず、
      その上に白い明朝を置きます（元サイトの作りを実測して確認したもの）。
      ⚠️ ここを黒ベタにしないこと。写真が途切れた瞬間、読み込み失敗に見えます
   5. 何も置かない画面（章扉）を惜しまない
   6. 写真に文字を載せてよいかは「主役がいるか」で決める。
      band-maruta は丸太の木口が反復する“面”。主役がいないので暗くしても失うものがない。
      band-seri は十人が手を挙げる“出来事”。旧スクリム(.92→.88@760px)では11人中6人が沈み、
      挙がった3つの手のうち握りこぶしが完全に消え、開いた掌が半分潰れていた。
      さらに height:72vh + cover で縦20%が切れ、木口の赤いチョーク番号（次章の原木ボードの元）が落ちていた。
      同じ黒でも代償が正反対。主役がいる写真には、幕も文字もトリミングも載せないこと。
   ※#contents が全幅なので、帯は width:100% だけで端まで届きます（100vw は不要）。 */

/*========================================
色・余白・幅の決めごと
=======================================*/
.sezai{
  --white:#FFFFFF;
  --paper:#F7F6F4;
  --ink:#2B2623;
  --ink-soft:#6E6864;
  --ink-faint:#8A837E;
  --on-photo:#FFFFFF;
  --on-photo-soft:#ECE6E0;
  --teal:#79a1a3;           /* 受賞ラベルとリンクだけ */
  --red:#ce4a60;            /* お問い合わせボタンだけ */
  --rule:#D8D2CC;
  --night:#161311;          /* スマホで写真の下に文字を落とすときの地 */
  /* 縦のリズム4段 */
  --silence:240px;
  --chapter:160px;
  --section:120px;
  --para:40px;
  /* 横幅3段 */
  --wide:min(1240px, calc(100% - 80px));
  --text:700px;
  --narrow:560px;
  background:var(--white);
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:21px;
  line-height:2;
  letter-spacing:.02em;
}
/* テーマの basic.css が section{width:96%} を当てるので、このページでは打ち消します */
.sezai section{width:100%; margin:0; box-sizing:border-box}
/* 同じく section{display:block} が hidden 属性を打ち消すので、効かせ直します */
.sezai [hidden]{display:none!important}
.sezai img{max-width:100%; height:auto; display:block}
.sezai p{margin:0 0 var(--para)}
.sezai p:last-child{margin-bottom:0}
.sezai .wide{width:var(--wide); margin:0 auto}
.sezai .text{max-width:var(--text)}
.sezai .paper{background:var(--paper)}

/* 見出しは 72 / 40 の2段だけ。本文21pxとの差を大きく保つこと */
.sgChapter{font-size:72px; line-height:1.4; letter-spacing:.04em; font-weight:700; margin:0; color:var(--ink); text-wrap:balance}
.sgHead{font-size:40px; line-height:1.45; letter-spacing:.04em; font-weight:700; margin:0 0 var(--para); color:var(--ink)}
.sgNum{display:block; font-size:14px; line-height:1; letter-spacing:.4em; color:var(--ink-faint); margin:0 0 20px; font-weight:500}
.sgNote{font-size:15px; line-height:1.8; color:var(--ink-faint)}
.sgQuiet{color:var(--ink-soft)}
.sgQuiet b{color:var(--ink); font-weight:700}

/*========================================
ヒーロー
=======================================*/
.sgHero{
  position:relative; width:100%;
  height:calc(100vh - 75px); min-height:720px; max-height:960px;
  background:#2b2320 url("../sezaigame/hero.jpg") 60% 50%/cover no-repeat;
}
.sgHero:after{
  content:''; position:absolute; left:0; right:0; top:0; bottom:0;
  background:linear-gradient(0deg, rgba(18,14,12,.65) 0%, rgba(18,14,12,.12) 55%, rgba(18,14,12,.35) 100%);
}
.sgHero h1{
  position:absolute; z-index:2; left:0; right:0; top:48%; transform:translateY(-50%);
  margin:0; text-align:center;
}
.sgHero h1 img{width:520px; max-width:72vw; margin:0 auto}

/*========================================
ふつうの段（白地・左寄せ）
=======================================*/
.sgBlock{padding:var(--chapter) 0}
.sgBlock.silenceBottom{padding-bottom:var(--silence)}
.sgBlock .inner{width:var(--wide); margin:0 auto}
.sgBlock .indent{padding-left:100px}

/*========================================
動画（クリックするまでYouTubeを読み込みません）
導入文の後ろに置きます。ロゴの直後に割り込ませると、
「何のページか」を言う前に映像が入ってしまうためです。
=======================================*/
.sgMovie{padding:0 0 var(--chapter); background:var(--white)}  /* 直後が白い章扉なので240→160に詰める */
.sgPlayer{
  position:relative; width:min(960px, calc(100% - 80px)); margin:0 auto; aspect-ratio:16/9;
  background:#1a1614; overflow:hidden; cursor:pointer; border:0; padding:0; display:block;
}
.sgPlayer img{width:100%; height:100%; -o-object-fit:cover; object-fit:cover}
.sgPlayer .ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%; background:rgba(255,255,255,.92);
  transition:transform .25s ease, background .25s ease;
}
.sgPlayer .ring:after{
  content:''; position:absolute; left:52%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:15px 0 15px 25px;
  border-color:transparent transparent transparent #1a1614;
}
.sgPlayer:hover .ring, .sgPlayer:focus-visible .ring{transform:translate(-50%,-50%) scale(1.08); background:#fff}
.sgPlayer:focus-visible{outline:2px solid var(--ink); outline-offset:4px}
.sgPlayer iframe{position:absolute; left:0; top:0; width:100%; height:100%; border:0}
.sgMovie .cap{width:min(960px, calc(100% - 80px)); margin:20px auto 0; color:var(--ink-faint); font-size:15px; line-height:1.8}

/*========================================
章扉。写真の上に章題を置く／白地に章題だけを置く
スクリムは px 基準。画面幅の % で切ると、文字の左余白が縮んだときに
文字だけがスクリムの外へはみ出して読めなくなります。
=======================================*/
/* ⚠️ display:flex は行方向。子を2つ入れるので column が要ります
   （忘れると「一言」が見出しの真横に出ます） */
.sgGateWhite{
  width:100%; min-height:72vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--silence) 20px; box-sizing:border-box; text-align:center;
}
.sezai .sgLead{margin:48px 0 0; max-width:640px; font-size:21px; line-height:2; color:var(--ink-soft)}

/*========================================
写真の上に本文まで載せる段（競り）
=======================================*/
.sgOver{
  position:relative; width:100%; height:72vh; min-height:540px; max-height:760px;
  background-position:center center; background-repeat:no-repeat; background-size:cover;
  display:flex; align-items:center;
}
.sgOver.maruta{background-image:url("../sezaigame/band-maruta.jpg"); height:78vh; min-height:620px; max-height:780px}
.sgOver:after{
  content:''; position:absolute; left:0; right:0; top:0; bottom:0;
  /* 実測：文字ブロックの右端 x=740 で α0.726。本文 #ECE6E0 の最悪コントラスト 6.90:1（基準4.5:1） */
  background:linear-gradient(90deg, rgba(16,13,11,.80) 0, rgba(16,13,11,.72) 800px, rgba(16,13,11,0) 1200px);
}
.sgOver .box{position:relative; z-index:2; padding-left:120px; max-width:620px; color:#fff}
.sgOver .sgHead{color:#fff}
.sgOver .box .sgNum{color:rgba(255,255,255,.62)}
.sgOver .box p{color:var(--on-photo-soft)}

/*========================================
競りの写真。このページで唯一、幕も文字もトリミングも無い一枚。
⚠️ background-image を使わないこと。cover は必ずどこかを切ります。
   img に width:100%/height:auto だけを与えれば、絶対に切れません。
   max-width / height / aspect-ratio / vh を足した瞬間に、切れるか額縁に入ります。
=======================================*/
.sgBlock.toPhoto{padding-bottom:var(--section)}
.sgPhoto{width:100%; background:var(--white); padding:0 0 var(--chapter)}
.sgPhoto figure{margin:0; background:#EFEDEA}   /* 読込中の地。黒にすると「読込失敗」に見えます */
.sgPhoto figure > img{display:block; width:100%; height:auto}
.sgPhoto .seriZoom{display:none}
/* ⚠️ box-sizing:border-box が要る。content-box のままだと width+padding で実幅が膨らみ、
   margin:auto の中央寄せがずれて、本文の柱と50pxずれます（実測で確認） */
.sezai .sgPhoto .cap{width:var(--wide); box-sizing:border-box; margin:20px auto 0; padding-left:100px;
  font-size:15px; line-height:1.8; color:var(--ink-soft)}
/* 動画のキャプションも --ink-faint(3.73:1・基準割れ)だったので --ink-soft(5.49:1) に揃えます。
   ※トークン --ink-faint 自体は .sgNum など8箇所で使うので変えないこと */
.sezai .sgMovie .cap{color:var(--ink-soft)}

/*========================================
木取りの図
原木ボードは丸太の断面。中央の濃い花形が「節」です。
そこへ木取りカードを実際の木取りどおりに置いていきます。
位置と回転は sezaigame.com の実測値（板700px・カードは全部280px幅＝40%）。
節に当たった床板は ¥1,000（フシ）、かわせば ¥2,000（1面ムジ）。
柱も1面ムジで ¥8,000、2面ムジで ¥10,000。この値段の差が「木取り」の意味です。
カードはスクロールで1枚ずつ置かれます。JavaScriptが動かない場合は最初から全部置いてあります。
=======================================*/
.sgKidori{width:660px; max-width:88vw; margin:var(--chapter) auto 0; position:relative}
.sgKidori .board{width:100%; border-radius:50%}
.sgKidori .card{position:absolute; width:40%; transform:rotate(var(--r,0deg))}
.sgKidori .card img{width:100%; -webkit-box-shadow:0 6px 18px rgba(40,30,20,.28); box-shadow:0 6px 18px rgba(40,30,20,.28)}
/* 置く位置。板の左上からの割合 */
.sgKidori .yuka-top{left:30.00%; top:5.00%;  --r:0deg}
.sgKidori .kamoi-top{left:17.00%; top:12.86%; --r:0deg}
.sgKidori .hashira-l{left:4.43%;  top:30.14%; --r:-90deg}
.sgKidori .yuka-mid{left:29.93%; top:47.79%; --r:90deg}
.sgKidori .hashira-r{left:55.57%; top:30.29%; --r:90deg}
.sgKidori .kamoi-btm{left:42.43%; top:72.71%; --r:180deg}
.sgKidori .yuka-btm{left:29.86%; top:90.43%; --r:180deg}
/* 置かれる前。JavaScriptが ready を付けたときだけ隠れます */
.sgKidori.ready .card{
  opacity:0; transform:rotate(var(--r,0deg)) translate(-22%,0) scale(.97);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
/* 板の中へ、自分の長さの向きに滑り込ませます（木を挽く向き） */
.sgKidori.ready.play .card{opacity:1; transform:rotate(var(--r,0deg))}
.sgKidori.ready.play .hashira-r{transition-delay:0s}
.sgKidori.ready.play .hashira-l{transition-delay:.18s}
.sgKidori.ready.play .yuka-mid{transition-delay:.36s}
.sgKidori.ready.play .kamoi-top{transition-delay:.54s}
.sgKidori.ready.play .kamoi-btm{transition-delay:.72s}
.sgKidori.ready.play .yuka-top{transition-delay:.90s}
.sgKidori.ready.play .yuka-btm{transition-delay:1.08s}
/* ⚠️ .sezai p{margin:0 0 ...} に負けるので、必ず .sezai を付けて詳細度を上げること */
.sezai .sgKidoriNote{max-width:660px; margin:36px auto 0; text-align:center; font-size:16px; line-height:1.9; color:var(--ink-soft)}
.sezai .sgKidoriNote b{color:var(--ink); font-weight:700}

/*========================================
片側だけ端まで届く写真（ゲームルール・セット内容）
=======================================*/
.sgSplit{display:flex; align-items:center; width:100%}
.sgSplit .fig{flex:0 0 50%; align-self:stretch; min-height:620px;
  background-position:center center; background-repeat:no-repeat; background-size:cover}
.sgSplit .fig.rule{background-image:url("../sezaigame/photo-rule.jpg")}
.sgSplit .fig.set{background-image:url("../sezaigame/set.jpg")}
.sgSplit .txt{flex:1 1 auto; padding:var(--chapter) 80px; box-sizing:border-box; max-width:calc(var(--narrow) + 160px)}

/*========================================
道具の3つ（木取りカード・お金・箱）
=======================================*/
.sgThing{display:flex; align-items:center; gap:80px}
.sgThing + .sgThing{margin-top:var(--section)}
.sgThing.rev{flex-direction:row-reverse}
.sgThing .fig{flex:0 0 620px; max-width:620px}
.sgThing .txt{flex:1 1 auto; max-width:520px}
.sgCards{display:flex; gap:12px; margin-top:28px; align-items:flex-end}
.sgCards img{width:150px}
.sgThingWide{margin-top:var(--section)}
.sgThingWide .fig{margin-bottom:48px}
.sgThingWide .txt{max-width:var(--text)}

/*========================================
セット内容のリスト
=======================================*/
.sgSet{display:flex; flex-wrap:wrap; margin:32px 0 0; padding:0; list-style:none}
.sgSet li{width:50%; box-sizing:border-box; padding:8px 20px 8px 0; font-size:18px; line-height:2}

/*========================================
写真の章（楽しいが生み出す、好奇心。／4つの節）
全幅の写真を途切れさせず、その上に白い明朝を置きます。
⚠️ 黒ベタにしないこと。元サイトはここを写真で貫いています。
=======================================*/
.sgFilm{
  position:relative; width:100%;
  background-position:center center; background-repeat:no-repeat; background-size:cover;
  background-color:var(--night);
  font-family:"Noto Serif JP",serif;
}
.sgFilm.asobi{background-image:url("../sezaigame/band-asobi.jpg"); min-height:88vh; display:flex; align-items:center}
.sgFilm.mokuiku{background-image:url("../sezaigame/mokuiku.jpg")}
.sgFilm.kobikiza{background-image:url("../sezaigame/band-kobikiza.jpg")}
.sgFilm:after{
  content:''; position:absolute; left:0; right:0; top:0; bottom:0;
  background:linear-gradient(90deg, rgba(14,11,9,.92) 0, rgba(14,11,9,.88) 880px, rgba(14,11,9,0) 1280px);
}
.sgFilm .block{position:relative; z-index:2; padding:var(--chapter) 120px; max-width:980px; box-sizing:border-box}
.sgFilm .block + .block{padding-top:0}
.sgFilm h2{
  font-family:"Noto Serif JP",serif; font-weight:600; color:var(--on-photo);
  font-size:40px; line-height:1.55; letter-spacing:.04em; margin:0 0 var(--para);
}
/* 「楽しいが生み出す、」が1行に収まる幅を確保すること（72px×10字＝720px） */
.sgFilm .opening{font-size:72px; line-height:1.5; margin-bottom:56px; max-width:none}
.sgFilm p{font-family:"Noto Serif JP",serif; font-size:20px; line-height:2.1; color:var(--on-photo-soft); max-width:660px}

/*========================================
3つのプラン
=======================================*/
.sgPlans{display:flex; justify-content:center; gap:60px; margin-top:100px}
.sgPlan{flex:0 1 360px; max-width:360px; display:flex; flex-direction:column; background:var(--white)}
.sgPlan .fig img{width:100%; height:240px; -o-object-fit:cover; object-fit:cover}
.sgPlan .fig img.face{-o-object-position:50% 25%; object-position:50% 25%}
.sgPlan h3{font-size:22px; font-weight:700; line-height:1.5; margin:28px 0 16px; letter-spacing:.03em}
.sgPlan .desc{font-size:16px; line-height:1.9; color:var(--ink-soft); margin:0 0 24px}
.sgPlan .spec{list-style:none; margin:0 0 28px; padding:0; font-size:16px; line-height:1.9}
.sgPlan .spec li{padding-left:18px; position:relative}
.sgPlan .spec li:before{content:''; position:absolute; left:0; top:.72em; width:8px; height:8px; background:var(--teal)}
.sgPlan .price{margin-top:auto; font-size:26px; font-weight:700; line-height:1.4; letter-spacing:.02em}
.sgPlan .price span{display:block; min-height:90px; font-size:13px; font-weight:400; line-height:1.7; color:var(--ink-faint); margin-top:12px; letter-spacing:0}
.sgPlan .sgGhost{margin-top:8px; min-width:0; width:100%; font-size:15px; height:52px; line-height:50px; padding:0 12px}

/*========================================
嬉しい感想です
=======================================*/
.sgVoicesTtl{font-size:72px; padding-left:100px}
.sgVoices{margin-top:72px; padding-left:100px}
.sgVoice{max-width:760px; border-left:3px solid var(--rule); padding-left:24px}
.sgVoice + .sgVoice{margin-top:80px}
.sgVoice p{font-size:19px; line-height:1.95; color:#3A3431; margin-bottom:24px}
.sgVoice .who{font-size:15px; color:var(--ink-faint); text-align:right; margin:12px 0 0}
.sgVoice details{margin:0 0 24px}
.sgVoice summary{cursor:pointer; font-size:16px; color:var(--teal); font-weight:700}
.sgVoice details h4{font-size:16px; font-weight:700; margin:24px 0 8px; color:var(--ink)}
.sgVoice details ul{list-style:none; margin:0 0 20px; padding:0; font-size:17px; line-height:1.9; color:#3A3431}
.sgVoice details ul li{text-indent:-1em; padding-left:1em}
.sgVoice details p{font-size:17px}

/*========================================
受賞
⚠️ ウッドデザイン・マーク使用規程：枠より内側の背景には必ず白を使い、
   背景が白以外の場合は枠線を消すこと。だからこの段の背景は #FFFFFF で固定します。
   紙色（#F7F6F4）にも変えないでください。規程違反になります。
=======================================*/
.sgAwards{background:#FFFFFF; padding:var(--chapter) 0 var(--silence)}
.sgAwardsTtl{font-size:72px}
.sgAward{display:flex; gap:64px; align-items:flex-start; margin-top:72px}
.sgAward + .sgAward{margin-top:var(--chapter); padding-top:var(--chapter); position:relative}
.sgAward + .sgAward:before{content:''; position:absolute; left:0; top:0; width:80px; height:1px; background:var(--rule)}
.sgAward .mark{flex:0 0 280px; padding:40px; box-sizing:content-box; background:#fff}
.sgAward .mark img{width:280px}
.sgAward .txt{flex:1 1 auto; max-width:640px; padding-top:40px}
.sgAward .label{font-size:13px; letter-spacing:.2em; color:var(--teal); font-weight:700; margin:0 0 14px}
.sgAward h3{font-size:32px; font-weight:700; line-height:1.5; margin:0 0 12px; letter-spacing:.03em}
.sgAward .cat{font-size:19px; line-height:1.7; color:var(--ink-soft); font-weight:500; margin:0 0 32px}
.sgAward .body{font-size:17px; line-height:2}
.sgAward .body h4{font-size:17px; font-weight:700; margin:28px 0 8px}
.sgAward .body p{margin-bottom:24px}
.sgAward blockquote{margin:0 0 24px; padding-left:20px; border-left:2px solid var(--rule); color:#3A3431}
.sgAward .photo{margin-top:40px; width:520px; max-width:100%}
.sgFrom{font-size:13px; color:var(--ink-faint)}

/*========================================
ボタン
=======================================*/
.sgGhost{
  display:inline-block; box-sizing:border-box; min-width:280px; height:56px; line-height:54px;
  padding:0 32px; border:1px solid var(--ink); border-radius:0; background:transparent;
  color:var(--ink); font-size:17px; font-weight:700; letter-spacing:.1em;
  text-align:center; text-decoration:none; transition:background .2s ease, color .2s ease;
}
.sgGhost:hover{background:var(--ink); color:#fff}
.sgCta{
  display:inline-block; box-sizing:border-box; width:360px; max-width:100%; height:64px; line-height:64px;
  background:var(--red); border-radius:2px; color:#fff; font-size:18px; font-weight:700;
  text-align:center; text-decoration:none; letter-spacing:.06em;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.sgCta:hover{color:#fff; opacity:.92}
.sgContact{background:var(--paper); padding:var(--chapter) 20px; text-align:center}
.sgContact p{font-size:18px; line-height:2; max-width:660px; margin:0 auto var(--section)}

/*========================================
タブレット（既存テーマの 728〜1036px）
文字の左余白を縮めても、スクリムは px 基準なので文字は必ず濃い側に残ります。
念のため文字幅にも上限を掛けています。
=======================================*/
@media only screen and (min-width:728px) and (max-width:1036px){
.sezai{--silence:180px; --chapter:120px; --section:96px; --wide:calc(100% - 56px); font-size:19px}
.sgHero{height:calc(100vh - 64px)}
.sgChapter{font-size:52px}
.sgHead,.sgFilm h2{font-size:32px}
.sgFilm .opening{font-size:52px}
.sgVoicesTtl,.sgAwardsTtl{font-size:52px}
.sgOver .box,.sgFilm .block{padding-left:56px}
.sgOver.maruta{height:70vh; min-height:520px}
/* 文字の右端は 56+500=556px < 600px。実測コントラスト 7.02:1 */
.sgOver:after{background:linear-gradient(90deg, rgba(16,13,11,.80) 0, rgba(16,13,11,.72) 600px, rgba(16,13,11,0) 940px)}
.sezai .sgPhoto .cap{padding-left:40px}
.sgOver .box,.sgFilm .block,.sgFilm p{max-width:500px}
.sgBlock .indent,.sgVoices,.sgVoicesTtl{padding-left:40px}
.sgThing{gap:48px}
.sgThing .fig{flex:0 0 46%; max-width:46%}
.sgSplit .txt{padding:var(--chapter) 48px}
.sgKidori{width:560px}
.sgPlans{gap:28px}
.sgPlan{flex:1 1 0}
.sgAward{gap:40px}
.sgAward .mark{flex:0 0 220px; padding:28px}
.sgAward .mark img{width:220px}
.sgAward h3{font-size:27px}
}

/*========================================
スマートフォン（既存テーマの .spView に合わせて 727px 以下）
重ねを残すのは「写真の上の文字が3行以内」のときだけ。
写真の章は、写真を帯にして文字をその下の暗い地に落とします。
狭い画面で長い明朝を写真に重ねると読めなくなるためです。
=======================================*/
@media screen and (max-width:727px){
.sezai{
  --silence:120px; --chapter:96px; --section:72px; --para:28px;
  --wide:calc(100% - 40px); --text:100%; --narrow:100%;
  font-size:17px; line-height:1.95;
}
.sgChapter{font-size:32px; letter-spacing:.03em}
.sgHead,.sgFilm h2{font-size:22px}
.sgNum{font-size:12px; margin-bottom:14px}

.sgHero{height:calc(100vh - 50px); height:calc(100svh - 50px); min-height:560px}
.sgHero h1 img{width:min(72vw,300px)}

.sgMovie{padding-bottom:var(--chapter)}
.sgPlayer,.sgMovie .cap{width:calc(100% - 40px)}

.sgGateWhite{min-height:0; padding:var(--silence) 20px}
.sezai .sgLead{font-size:17px; margin-top:32px}

.sgBlock .indent{padding-left:0}

/* 目利き：本文9行は重ねたら潰れる。写真を帯にして、文字はその下の白地へ */
.sgOver{display:block; height:auto; min-height:0; max-height:none; background:none!important}
.sgOver:after{display:none}
/* ⚠️ 240px は意図的。ここを320pxに戻すと、脇役の丸太が主役の競りより大きくなります */
.sgOver .marutaFig{display:block; width:100%; height:min(34vh,240px);
  background:url("../sezaigame/band-maruta.jpg") center center/cover no-repeat}
.sgOver .box{padding:var(--chapter) 20px; max-width:none; color:var(--ink)}
.sgOver .sgHead,.sgOver .box p{color:var(--ink)}
.sgOver .box .sgNum{color:var(--ink-faint)}

/* ⚠️ maruta は切ってよい／seri は切らない。
   面の写真は端を失っても何も失わないが、人が散った写真は失った分だけ人が消えます。
   375pxでは全景が高さ211px・顔19pxにしかならないので、全景のあとに「寄り」を1枚添えます。
   順番は必ず全景→寄り。逆にすると「全体を見せる」という約束が崩れます。 */
.sgPhoto{padding:var(--chapter) 0}
.sgPhoto figure > img{width:100%}
.sgPhoto .seriZoom{display:block; width:100%; margin-top:32px;
  aspect-ratio:375/260;
  background:url("../sezaigame/band-seri-1400.jpg") no-repeat;
  background-size:260% auto; background-position:86% 28%}
/* ↑ aspect-ratio を使うので、枠と背景が同率で伸縮し、見える範囲は360/375/430pxで同一になります。
   写るのは原寸 x1059〜1828 / y166〜699。開いた掌が2つ入ります */
.sezai .sgPhoto .cap{width:calc(100% - 40px); padding-left:0; margin:20px auto 0; font-size:15px}

/* 木取り図は重ねを絶対に解かない。解くとゲームの説明にならないため */
.sgKidori{width:min(88vw,360px); margin-top:var(--section)}
.sgKidori .card img{-webkit-box-shadow:0 3px 9px rgba(40,30,20,.3); box-shadow:0 3px 9px rgba(40,30,20,.3)}
.sezai .sgKidoriNote{font-size:15px; margin:28px auto 0; text-align:left}

.sgSplit{display:block}
.sgSplit .fig{width:100%; min-height:0; height:240px}
.sgSplit .txt{padding:var(--chapter) 20px; max-width:none}

.sgThing,.sgThing.rev{display:block}
.sgThing .fig{max-width:none; margin-bottom:24px}
.sgThing .fig img{width:100%}
.sgThing .txt{max-width:none}
.sgCards img{width:92px}
.sgSet li{width:100%; padding:6px 0; font-size:16px}

/* 写真の章：写真を帯にして、文字はその下の暗い地に置く */
.sgFilm{background-image:none!important; min-height:0!important; display:block!important}
.sgFilm:after{display:none}
.sgFilm .filmFig{display:block; width:100%; height:min(46vh,330px);
  background-position:center center; background-repeat:no-repeat; background-size:cover}
.sgFilm.asobi .filmFig{background-image:url("../sezaigame/band-asobi.jpg")}
.sgFilm.mokuiku .filmFig{background-image:url("../sezaigame/mokuiku.jpg")}
.sgFilm.kobikiza .filmFig{background-image:url("../sezaigame/band-kobikiza.jpg")}
.sgFilm .block{padding:var(--chapter) 20px; max-width:none}
.sgFilm .block + .block{padding-top:0}
.sgFilm .opening{font-size:28px; line-height:1.7; margin-bottom:var(--para)}
.sgFilm p{font-size:17px; line-height:2.05; max-width:none}

.sgPlans{display:block; margin-top:56px}
.sgPlan{max-width:none}
.sgPlan + .sgPlan{margin-top:48px}
.sgPlan .fig img{height:200px}
.sgPlan .price{font-size:22px}
.sgPlan .price span{min-height:0}

.sgVoicesTtl,.sgAwardsTtl{font-size:28px}
.sgVoicesTtl,.sgVoices{padding-left:0}
.sgVoices{margin-top:48px}
.sgVoice{max-width:none}
.sgVoice + .sgVoice{margin-top:56px}
.sgVoice p{font-size:16px}

.sgAwards{padding:var(--chapter) 0 var(--silence)}
.sgAward{display:block; margin-top:48px}
.sgAward .mark{margin:0 auto 32px; padding:24px; width:200px}
.sgAward .mark img{width:200px}
.sgAward .txt{padding-top:0; max-width:none}
.sgAward h3{font-size:24px}
.sgAward .cat{font-size:17px; margin-bottom:24px}
.sgAward .body{font-size:16px}
.sgAward .photo{width:100%; margin-top:32px}

.sgGhost{min-width:0; width:100%}
.sgCta{width:100%}
.sgContact{padding:var(--chapter) 20px}
.sgContact p{font-size:16px; margin-bottom:var(--section)}
}

/* パソコン・タブレットでは、スマホ用の写真帯は出しません */
@media screen and (min-width:728px){
.sgFilm .filmFig,.sgOver .marutaFig,.sgPhoto .seriZoom{display:none}
}

@media (prefers-reduced-motion:reduce){
.sezai *{transition:none!important; animation:none!important}
.sgKidori.ready .card{opacity:1; transform:rotate(var(--r,0deg))}
}

/* ゲームルールの条件（所要時間・人数・年齢） */
.sgSpecList{list-style:none; margin:0 0 var(--para); padding:24px 0 0; border-top:1px solid var(--rule); font-size:17px; line-height:2}
.sgSpecList li{display:flex; gap:20px}
.sgSpecList span{flex:0 0 96px; color:var(--ink-faint); font-size:15px}
@media screen and (max-width:727px){
.sgSpecList{font-size:16px}
.sgSpecList span{flex:0 0 78px; font-size:14px}
}