/* ==========================================================================
   KOWA Photo Block 3.34.103　12年アルバム（公開画面）

   本文の組み立ては functions.php の kowa_album12_block()。
   ここは見せ方だけ。動き（アルバムを開く・めくる・年表）は assets/js/album12.js。

     .kowa-album12-family … ご家族1組（写真・言葉・「アルバムを見る」ボタン）
     .kowa-album12-book   … アルバムの中身。公開画面では隠し、ボタンでポップアップに出す
     .kowa-album12-mine   … わが家の、これからの毎年（年表）。設定の文章は隠して、JSが画面を作る

   台紙の色は .kowa-album12-paper-ivory があればアイボリー、無ければ黒（標準）。
   ========================================================================== */

.kowa-album12{
  --a12-gold:var(--kowa-gold-strong,#9a7a2c);
  --a12-ink:var(--kowa-ink,#28241f);
  --a12-muted:#6f665c;
  --a12-line:#e6ddd0;
  --a12-paper:var(--kowa-paper,#fffefc);
  --a12-serif:var(--kowa-serif,'Noto Serif JP',serif);
  --a12-num:'Jost','Helvetica Neue',Arial,sans-serif;
  margin-block:clamp(32px,6vw,64px) clamp(48px,8vw,88px)!important;
}

/* ---- 前置き ---- */
.kowa-album12-intro{display:grid;gap:10px;justify-items:center;text-align:center;margin-bottom:clamp(32px,5vw,56px)!important}
.kowa-album12-intro>*{margin:0!important}
.kowa-album12-intro-title{font-size:clamp(1.25rem,2.6vw,1.6rem)!important;letter-spacing:.1em}
.kowa-album12-intro-lead{color:var(--a12-muted);max-width:34em}

/* ---- ご家族 ---- */
.kowa-album12-families{display:grid;gap:clamp(48px,8vw,88px)}
.kowa-album12-family{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,5vw,64px);align-items:center}
.kowa-album12-family:nth-child(even) .kowa-album12-family-photos{order:2}
.kowa-album12-family>*{margin:0!important}
.kowa-album12-family-photos{display:grid;justify-items:center;min-width:0}
.kowa-album12-family-photos>*{margin:0!important}
.kowa-album12-family-photo{justify-self:center;max-width:100%}
/* 3.34.114：表示範囲（拡大・位置）を設定した紹介写真は、写真が枠の幅に合わせて描かれる（photo-geometry.css）。
   中央寄せの縮み幅のままだと、枠の幅が0になって写真が消えていた（大浦様の紹介写真）。列の幅いっぱいに広げる */
.kowa-album12-family-photo.kowa-photo-display{justify-self:stretch;width:100%}
/* 紹介写真が2枚のとき：大きい1枚に、もう1枚を右下へ少し重ねる（プリントを並べたように）。
   印（.is-two）は album12.js が付ける（:has() と同じ選択に混ぜると、:has() を知らないブラウザで指定ごと無効になるため分けない） */
.kowa-album12-family-photos.is-two{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;padding-bottom:12%}
.kowa-album12-family-photos.is-two>:first-child{grid-column:1/10;grid-row:1;justify-self:start}
.kowa-album12-family-photos.is-two>:nth-child(2){grid-column:6/13;grid-row:1;align-self:end;justify-self:end;transform:translateY(22%);z-index:1}
.kowa-album12-family-photos.is-two>:nth-child(2) img{border:clamp(4px,.8vw,8px) solid var(--a12-paper);max-height:min(40vh,300px)}
.kowa-album12-family-body{display:grid;gap:14px;min-width:0}
.kowa-album12-family-body>*{margin:0!important}
.kowa-album12-family-name{font-size:clamp(1.2rem,2.4vw,1.5rem)!important;letter-spacing:.08em}
/* 文字の指定は、テーマ共通の .kowa-main p より強くする（親のクラスを付ける） */
.kowa-album12-family-body>.kowa-album12-family-meta{font-size:.8rem;color:var(--a12-muted);letter-spacing:.06em}
.kowa-album12-family-body>.kowa-album12-voice{font-family:var(--a12-serif);font-size:clamp(.98rem,1.9vw,1.1rem);line-height:2.1;padding-left:20px;border-left:1px solid #e3d3ad}
/* お話が何段落かあるとき：左の線はつなげたまま、段落のあいだを少しあける */
.kowa-album12-family-body>.kowa-album12-voice+.kowa-album12-voice{margin-top:-14px!important;padding-top:1em}
/* 紹介文（パネルの大きな文字・写真館からの紹介）とインタビューの質問。空のものは出さない */
.kowa-album12-family-body>.kowa-album12-catch{font-family:var(--a12-serif);font-size:clamp(1.05rem,2.2vw,1.28rem);line-height:1.75;letter-spacing:.04em;color:var(--a12-gold)}
.kowa-album12-family-body>.kowa-album12-about{color:var(--a12-muted);font-size:.94rem;line-height:1.95}
.kowa-album12-family-body>.kowa-album12-q{font-size:.86rem;letter-spacing:.06em;color:var(--a12-gold);font-weight:500}
.kowa-album12-family-body>.kowa-album12-q+.kowa-album12-voice{margin-top:-6px!important}
.kowa-album12-catch:empty,.kowa-album12-about:empty,.kowa-album12-q:empty{display:none}
.kowa-album12-open .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;letter-spacing:.1em}
.kowa-album12-open .wp-block-button__link::before{content:'';width:18px;height:18px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M3 5.5C6 4 9 4 12 6c3-2 6-2 9-.5V19c-3-1.5-6-1.5-9 .5-3-2-6-2-9-.5z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M3 5.5C6 4 9 4 12 6c3-2 6-2 9-.5V19c-3-1.5-6-1.5-9 .5-3-2-6-2-9-.5z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E") center/contain no-repeat}
.kowa-album12-book{display:none!important}
@media (max-width:720px){
  .kowa-album12-family{grid-template-columns:1fr}
  .kowa-album12-family:nth-child(even) .kowa-album12-family-photos{order:0}
}

/* ---- わが家の、これからの毎年 ---- */
.kowa-album12-mine{display:grid;gap:12px;margin-top:clamp(64px,10vw,112px)!important;padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--a12-line)}
.kowa-album12-mine>*{margin:0!important}
.kowa-album12-mine-lead{color:var(--a12-muted);max-width:34em}
/* 設定の文章（選択肢の言葉・節目の一覧など）は、画面を作るための材料。公開画面には出さない */
.kowa-album12-modes,.kowa-album12-mine-row,.kowa-album12-mine-first,.kowa-album12-mine-before{display:none!important}
.kowa-album12-mine.is-ready .kowa-album12-mine-legend{display:none!important}
.kowa-album12-mine.is-ready>.wp-block-buttons{display:none!important}
.a12-kinds{border:0;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.a12-kinds legend{font-size:.9rem;margin-bottom:10px;padding:0}
.a12-kinds label{cursor:pointer;position:relative}
.a12-kinds input{position:absolute;opacity:0;pointer-events:none}
.a12-kinds span{display:inline-block;padding:.55rem 1.1rem;border:1px solid var(--a12-line);background:var(--a12-paper);font-size:.88rem;letter-spacing:.04em;transition:border-color .2s,color .2s,background .2s}
.a12-kinds label:hover span{border-color:var(--a12-gold)}
.a12-kinds input:checked+span{border-color:var(--a12-gold);background:var(--a12-gold);color:#fff}
.a12-kinds input:focus-visible+span{outline:2px solid var(--a12-gold);outline-offset:3px}
.a12-picker{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:6px}
.a12-picker[hidden]{display:none}
.a12-picker select{font:inherit;padding:9px 12px;border:1px solid var(--a12-line);background:var(--a12-paper);color:var(--a12-ink)}
.a12-result{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s ease}
.a12-result.is-open{grid-template-rows:1fr}
.a12-result>div{overflow:hidden;min-height:0}
.a12-timeline{list-style:none;margin:18px 0 0 8px!important;padding:0!important;border-left:1px solid #e3d3ad}
.a12-timeline li{position:relative;padding:9px 0 9px 24px;display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;align-items:baseline;margin:0}
.a12-timeline li::before{content:'';position:absolute;left:-5px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--a12-paper);border:1px solid var(--a12-gold)}
.a12-timeline li.is-mile::before{background:var(--a12-gold)}
.a12-timeline .t{font-family:var(--a12-num);font-variant-numeric:tabular-nums;color:var(--a12-muted);font-size:.85rem;line-height:1.6}
.a12-timeline .ev{min-width:0}
.a12-timeline .ev span{display:inline-block;margin:0 6px 4px 0;padding:1px 10px;border:1px solid var(--a12-gold);color:var(--a12-gold);font-size:.8rem}
.a12-timeline .ev em{font-style:normal;color:var(--a12-muted);font-size:.85rem}
.a12-result .wp-block-buttons{margin-top:28px!important;justify-content:center}

/* ==========================================================================
   アルバムの部屋（ポップアップ）
   上から差す柔らかい光（太さ・明るさの違う帯＋かすみ）と、瞬くきらめき。
   アルバムは正面から。革の表紙・天金・紙の質感。
   ========================================================================== */
/* 開いている間は、後ろのページを止める。
   3.34.112：ただしスマホの横向き（高さ520px以下の横長の画面）では止めない（オーナー決定）。
   iPhone の Safari は、ページが動いたときだけアドレスバー・タブバーを畳む。止めているとバーが出たままで、
   アルバムに使える高さが画面の約7割しかない（実機：390pt のうち約276pt）。
   止めなければ、アルバムを上へなぞると後ろのページが動いてバーが畳まれ、本が画面の高さいっぱいまで大きくなる。
   後ろのページは部屋（不透明な背景）に隠れて見えない。閉じると開いたときの位置に戻す（album12.js の close()）。 */
@media not all and (orientation:landscape) and (max-height:520px){
  html.a12-lock,html.a12-lock body{overflow:hidden}
}
/* 動いている後ろのページのスクロールバー（パソコンの低い窓）やスクロールの印（iPhone）は出さない */
@media (orientation:landscape) and (max-height:520px){
  html.a12-lock{scrollbar-width:none}
  html.a12-lock::-webkit-scrollbar{display:none}
}
.a12-room{--light:255,236,200;--room-ink:#efe6d6;--room-muted:#a99d8b;
  position:fixed;inset:0;z-index:100050;display:flex;flex-direction:column;padding:clamp(14px,3vw,40px);overflow-y:auto;overscroll-behavior:contain;
  background-color:#0d0907;
  background-image:var(--a12-room-photo,none),radial-gradient(ellipse 70% 55% at 50% -8%,#4a3420 0%,#22170f 45%,#0d0907 100%);
  background-size:cover;background-position:center;color:var(--room-ink);
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s;overflow-x:hidden;
  font-family:'Noto Sans JP',sans-serif}
.a12-room.is-open{opacity:1;visibility:visible;transition:opacity .6s ease}
/* 写真の読み込み・復号が終わるまで本の寸法を確保し、白い写真枠の先行表示を防ぐ。 */
.a12-room.is-preparing .a12-book{visibility:hidden}
.a12-room.is-preparing img{transition:none;opacity:1}
/* 上から差す光：1つの大きな光の円錐。形とぼかしは album12.js が開いたときに1回だけ絵にして貼る
   （CSS で大きな要素をぼかして動かし続けると重かったため）。ここでは明るさをゆっくり揺らすだけ。 */
.a12-beams{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 2s ease .2s}
.a12-room.is-open .a12-beams{opacity:1}
.a12-cone{position:absolute;left:50%;top:-12%;width:min(130vw,1600px);height:108%;transform:translateX(-50%);
  background:no-repeat 50% 0/100% 100%;animation:a12-glow 9s ease-in-out infinite alternate;will-change:opacity}
@keyframes a12-glow{from{opacity:.82}to{opacity:1}}
.a12-haze{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 8%,rgba(var(--light),.16),transparent 70%),radial-gradient(ellipse 35% 25% at 47% 38%,rgba(var(--light),.07),transparent 75%)}
.a12-desk{position:fixed;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:radial-gradient(ellipse 45% 55% at 50% 0%,rgba(var(--light),.16),transparent 70%),
    repeating-linear-gradient(92deg,rgba(255,220,170,.035) 0 2px,transparent 2px 11px,rgba(0,0,0,.08) 11px 13px,transparent 13px 26px),
    linear-gradient(180deg,#3a2414 0%,#24150b 60%,#140b06 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
/* きらめきの絵（album12.js の sparkle()）。光の届く範囲だけ（JS の fit() と同じ範囲） */
.a12-sparkle{position:fixed;left:8%;top:0;width:84%;height:92%;pointer-events:none}
.a12-room::after{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,.6))}
.a12-inner{position:relative;z-index:1;width:min(100%,1100px);margin:auto;display:grid;gap:clamp(12px,2vw,22px)}
.a12-head{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding-right:52px}
.a12-head h2{margin:0;font-family:'Noto Serif JP',serif;font-weight:500;font-size:clamp(1.02rem,2.2vw,1.32rem);letter-spacing:.1em;color:var(--room-ink)}
.a12-count{font-family:'Jost',sans-serif;letter-spacing:.1em;color:var(--room-muted);font-variant-numeric:tabular-nums}
.a12-room .a12-count{display:none}
.a12-count b{color:rgba(var(--light),.95);font-weight:500;font-size:1.15rem}
.a12-room button{font:inherit}
.a12-close{position:fixed;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);z-index:3;width:44px;height:44px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.2);color:var(--room-ink);font-size:24px;line-height:1;cursor:pointer}
.a12-close:hover,.a12-nav:hover:not(:disabled){border-color:rgba(var(--light),.7)}
.a12-room :focus-visible{outline:2px solid rgba(var(--light),.9);outline-offset:3px}
.a12-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(6px,2vw,22px)}
.a12-nav{width:46px;height:46px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.2);color:var(--room-ink);font-size:22px;cursor:pointer;display:grid;place-items:center;padding:0}
.a12-nav:disabled{opacity:.25;cursor:default}
.a12-book{position:relative;perspective:2200px;min-width:0;padding:1.5% 3% 2.5%}
.a12-book::before{content:'';position:absolute;inset:-14% -10%;pointer-events:none;background:radial-gradient(ellipse 55% 50% at 50% 42%,rgba(var(--light),.22),transparent 70%)}
.a12-cover{position:relative;transform-style:preserve-3d}
.a12-cover::before{content:'';position:absolute;inset:-1.6% -2.2% -3% -2.2%;border-radius:6px;
  background:linear-gradient(160deg,#2b2622,#151210 60%,#0b0908);
  box-shadow:0 60px 60px -30px rgba(0,0,0,.85),0 18px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,220,160,.12)}
.a12-room.is-ivory .a12-cover::before{background:linear-gradient(160deg,#5a3a22,#3a2416 55%,#26170d)}
/* 台紙：標準は黒。アイボリーは .is-ivory */
/* 3.34.117作業中：オーナー指定の黒マット（比較画像の左右約78px）。
   写真の場所だけ5/6にし、細い縁・保存済み構図・紙面の配置は維持する。 */
.a12-room{--a12-photo-space:.833333333;--pg:#1b1917;--pg-ink:#efe4cf;--pg-muted:#b3a58b;--pg-accent:#d4b26a;--print:#1b1917;--print-line:rgba(212,178,106,.75);--gutter:rgba(0,0,0,.55);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.a12-room.is-ivory{--a12-photo-space:1;--pg:#f6efe2;--pg-ink:#3a3029;--pg-muted:#857565;--pg-accent:#9a7a2c;--print:#fffdf8;--print-line:transparent;--gutter:rgba(80,55,30,.22)}
.a12-spread{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:2/1.34;color:var(--pg-ink);perspective:2200px}
.a12-page{position:relative;padding:clamp(10px,6%,40px);display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--pg) var(--grain)}
.a12-page.is-left{background:linear-gradient(90deg,transparent 84%,var(--gutter)),var(--pg) var(--grain);border-radius:3px 0 0 3px}
.a12-page.is-right{background:linear-gradient(90deg,var(--gutter),transparent 14%),var(--pg) var(--grain);border-radius:0 3px 3px 0}
.a12-spread::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(255,226,170,.09),transparent 70%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.16))}
.a12-edge{position:absolute;top:1%;bottom:1%;width:var(--w,4px);transition:width .5s ease;
  background:linear-gradient(180deg,rgba(255,240,200,.5),transparent 30%,rgba(0,0,0,.25)),repeating-linear-gradient(90deg,#f1dfae 0 1px,#b98f3e 1px 2px)}
.a12-edge.is-l{right:100%}.a12-edge.is-r{left:100%}
.a12-script{font-family:'Pinyon Script','Snell Roundhand',cursive;color:var(--pg-accent);font-size:clamp(1.15rem,2.6vw,1.9rem);line-height:1.15}
.a12-print{margin:0;padding:clamp(4px,.7vw,8px);background:var(--print);box-shadow:0 1px 1px rgba(0,0,0,.18),0 10px 16px -10px rgba(0,0,0,.55);outline:1px solid var(--print-line);outline-offset:-3px}
.a12-print img{display:block;width:100%;height:auto;margin:0}
.a12-room img{transition:opacity .45s ease}
.a12-room img.is-loading{opacity:0}
/* 1ページ＝1年分：上に見出し（あれば）、真ん中にその年の写真、下に年号・「◯年目」・一言 */
.a12-pg{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.a12-page-script{font-size:clamp(1rem,2vw,1.45rem);margin-bottom:clamp(4px,1vw,10px)}
.a12-main{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.a12-shot{position:relative;line-height:0}
.a12-main .a12-print-img{display:block;box-sizing:border-box;width:auto;height:auto;max-width:100%;max-height:42vh;max-width:100cqw;max-height:100cqh;margin:0}   /* 前の2つはコンテナ単位を知らない古いSafari用 */
/* 3.34.113：保存した拡大・位置は photo-geometry.css の .kowa-photo-frame > img が描く。
   外側はこれまでと同じプリントの縁。内側だけを切るので、拡大した写真は縁にかからない。
   paddingを引いてから元画像の比率で収める（縁込みのaspect-ratioでは写真がゆがむ）。
   .a12-main と、2〜3枚の .a12-cell のどちらも、最寄りの有限のコンテナを基準にする。 */
.a12-main .a12-crop-print{--a12-print-inset:clamp(2px,.32vw,4px);flex:0 0 auto;
  width:min(calc(100cqw * var(--a12-photo-space,1)),calc((100cqh * var(--a12-photo-space,1) - 2 * var(--a12-print-inset)) * var(--a12-photo-aspect) + 2 * var(--a12-print-inset)));
  max-width:100%;max-height:none}
/* 3.34.116：別カットは手札版（83×108mm。オーナー指示）。メインの六つ切り（203×254mm）と同じ縮尺で小さく見せる。
   写真の場所の高さを六つ切りの縦の高さとみて、手札版の高さ（縦108mm／横83mm）の割合（--a12-small-h、album12.js）だけ使う
   3.34.118：写真ごとに選べるほかのサイズ（八つ切り・キャビネ・2L・L判）も同じ式。印の名前を is-tefuda から is-small にした */
.a12-main .a12-crop-print.is-small{
  width:min(calc(100cqw * var(--a12-photo-space,1)),calc((var(--a12-small-h,1) * 100cqh * var(--a12-photo-space,1) - 2 * var(--a12-print-inset)) * var(--a12-photo-aspect) + 2 * var(--a12-print-inset)))}
/* 窓の縦横比は写真の比率。photo-geometry.css の .kowa-photo-frame{aspect-ratio:var(--kowa-frame-aspect)}（既定1）と
   同じ強さだと、実際のページでは album12.css が photo-geometry.css より先に読まれるため負けて、窓が正方形になる。
   2つのクラスで指定し、読み込み順に左右されないようにする（Claude、3.34.113 の点検で修正） */
.a12-crop-print>.a12-crop-window{width:100%;aspect-ratio:var(--a12-photo-aspect);overflow:hidden}
/* 自由レイアウトを選んだページだけ。自動の並べ方とめくる紙は従来のまま。 */
.a12-main>.a12-board{position:relative;flex:0 0 auto;width:var(--a12-board-width,100%);
  width:min(calc(100cqw * var(--a12-photo-space,1)),calc(100cqh * var(--a12-photo-space,1) * var(--a12-board-aspect,.77)));
  aspect-ratio:var(--a12-board-aspect,.77);height:auto;max-width:100%;max-height:100%}
.a12-main>.a12-board>.a12-crop-print{position:absolute;box-sizing:border-box;
  left:calc(var(--kf-x)*100%);top:calc(var(--kf-y)*100%);width:calc(var(--kf-w)*100%)!important;
  height:calc(var(--kf-h)*100%)!important;max-width:none;max-height:none;margin:0;aspect-ratio:var(--kf-a)}
.a12-main>.a12-board>.a12-crop-print>.a12-crop-window{height:100%;aspect-ratio:auto}
/* 3.34.113：1ページに写真が2〜3枚のときは、重ねずに並べる（オーナー指示：写真が人や顔に重なるのは不可）。
   以前は2枚目以降を、1枚目の角に差し込んだプリントのように小さく重ねていた。
   .a12-set の中の1枚ずつの枠（.a12-cell）が大きさの基準。写真はその枠に収める（切らない・重ねない）。
   ・is-lead：その年の最初のページ。・is-even：別カットのページ。 */
/* 3.34.115：上下には並べない（オーナー指示）。必ず横に1列。
   3.34.116：枠の幅は album12.js が、写真の枠（六つ切り）の縦横比に比べて配る（高さがそろう。メインは1.6倍） */
.a12-set{display:flex;flex-direction:row;gap:clamp(6px,3cqw,14px);width:100cqw;height:100cqh}
.a12-cell{flex:1 1 0;min-width:0;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.a12-cap{margin-top:clamp(8px,1.6vw,16px);min-height:0}
.a12-cap-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.a12-cap-year{font-family:'Pinyon Script','Snell Roundhand',cursive;color:var(--pg-accent);font-size:clamp(1.05rem,2.1vw,1.55rem);line-height:1.1}
.a12-yr{font-family:'Jost',sans-serif;font-size:clamp(.76rem,1.35vw,.92rem);letter-spacing:.24em;color:var(--pg-muted)}
.a12-memo{font-family:'Noto Serif JP',serif;font-size:clamp(.8rem,1.5vw,.98rem);line-height:1.8;margin:4px 0 0}
.a12-facts{font-size:clamp(.66rem,1.1vw,.76rem);color:var(--pg-muted);letter-spacing:.06em;margin-top:2px}
/* 自動の余白ページ（本文には追加しない） */
.a12-cont{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.a12-cont .a12-memo{color:var(--pg-muted)}
.a12-sprig{width:clamp(30px,5vw,54px);height:auto;color:var(--pg-accent);opacity:.75;margin-top:8px}
/* 余白ページのA案：文字なし、中央に細い金線と小さな菱形。 */
.a12-filler{gap:clamp(4px,1vh,10px)}
.a12-blank-mark{display:flex;align-items:center;gap:clamp(10px,1.5vw,16px);width:clamp(96px,18vw,160px);max-width:60%;color:var(--pg-accent);opacity:.65}
.a12-blank-mark::before,.a12-blank-mark::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.a12-blank-mark::after{background:linear-gradient(90deg,currentColor,transparent)}
.a12-blank-diamond{flex:none;width:5px;height:5px;border:1px solid currentColor;box-sizing:border-box;transform:rotate(45deg)}
.a12-filler-era{margin:0;font-family:'Noto Serif JP',serif;font-size:clamp(.78rem,1.3vw,.95rem);letter-spacing:.35em;color:var(--pg-muted)}
/* めくる紙（album12.js の turn()）。角度と陰影は JS が決める。 */
.a12-leaf{position:absolute;top:0;bottom:0;width:50%;z-index:5;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform}
.a12-leaf.is-fwd{left:50%;transform-origin:left center}
.a12-leaf.is-back{left:0;transform-origin:right center}
.a12-leaf.is-one{left:0;width:100%;transform-origin:left center}
.a12-leaf>*{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.a12-leaf>.is-b{transform:rotateY(180deg)}
/* 紙が立ち上がるほど、紙の面が暗くなる（光から外れる）。
   陰の絵は固定で、濃さ（opacity）だけを JS が変える（ページの絵を描き直さないので軽い）。
   紙の面とは別の部品にして、紙と一緒に回す（ほんの少しだけ手前に置き、紙の上に重ねる） */
.a12-face-shade{display:block;pointer-events:none;opacity:0;transform:translateZ(.5px);will-change:opacity;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.175) 60%,rgba(255,240,210,.06) 100%)}
.a12-leaf>.a12-face-shade.is-b{transform:rotateY(180deg) translateZ(.5px)}
.a12-leaf.is-back>.a12-face-shade,.a12-leaf>.a12-face-shade.is-b{background:linear-gradient(270deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.175) 60%,rgba(255,240,210,.06) 100%)}
/* 3.34.108：前の見開きへ戻るとき、めくる紙の裏の陰を綴じ目の側に。
   以前は上の行の270degが当たり、外側の端が暗くなっていた（次へめくるときと左右逆。Braveの画面で確認） */
.a12-leaf.is-back>.a12-face-shade.is-b{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.175) 60%,rgba(255,240,210,.06) 100%)}
/* 3.34.108：紙のふくらみ。紙が立ち上がるほど、綴じ目から少し離れたふくらみが上からの光を受ける。
   陰と同じく、光の絵は固定で、濃さ（opacity）だけを変える（ページの絵を描き直さないので軽い）。
   向きは陰と同じ決まり（綴じ目から測る）。 */
.a12-face-light{display:block;pointer-events:none;opacity:0;transform:translateZ(.6px);will-change:opacity;mix-blend-mode:normal;
  background:linear-gradient(90deg,transparent 24%,rgba(255,244,222,.09) 42%,rgba(255,246,228,.19) 56%,rgba(255,244,222,.07) 72%,transparent 88%)}
.a12-leaf>.a12-face-light.is-b{transform:rotateY(180deg) translateZ(.6px)}
.a12-leaf.is-back>.a12-face-light,.a12-leaf>.a12-face-light.is-b{background:linear-gradient(270deg,transparent 24%,rgba(255,244,222,.09) 42%,rgba(255,246,228,.19) 56%,rgba(255,244,222,.07) 72%,transparent 88%)}
.a12-leaf.is-back>.a12-face-light.is-b{background:linear-gradient(90deg,transparent 24%,rgba(255,244,222,.09) 42%,rgba(255,246,228,.19) 56%,rgba(255,244,222,.07) 72%,transparent 88%)}
/* 3.34.108：紙の厚み。紙が真横を向いたとき（めくりの途中）、厚みのある縁として細く見える。
   紙が寝ているときは真横からしか見えないので、ほとんど見えない。 */
.a12-leaf>.a12-leaf-edge{inset:0 auto;width:3px;overflow:visible;-webkit-backface-visibility:visible;backface-visibility:visible;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 50%,rgba(255,255,255,.12)),var(--pg,#1c1a18)}
.a12-leaf.is-fwd>.a12-leaf-edge,.a12-leaf.is-one>.a12-leaf-edge{right:0;transform-origin:right center;transform:rotateY(90deg)}
.a12-leaf.is-back>.a12-leaf-edge{left:0;transform-origin:left center;transform:rotateY(-90deg)}
/* 台紙の裏（1ページずつのときにめくれる紙の裏側） */
.a12-page.is-blank{background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 12%),var(--pg) var(--grain)}
/* めくっている紙の下のページに落ちる影 */
/* 影の絵は固定で、濃さ（opacity）と広がり（綴じ目からの伸び縮み）を JS が変える */
.a12-turn-shade{position:absolute;top:0;bottom:0;z-index:4;pointer-events:none;opacity:0;will-change:opacity,transform}
.a12-turn-shade.is-fwd{left:50%;width:50%;transform-origin:left center;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent)}
.a12-turn-shade.is-back{left:0;width:50%;transform-origin:right center;background:linear-gradient(270deg,rgba(0,0,0,.55),transparent)}
.a12-turn-shade.is-one{left:0;width:100%;transform-origin:left center;background:linear-gradient(90deg,rgba(0,0,0,.6),transparent)}
/* ページをつかんでめくれる（横の動きはめくり、縦の動きはスクロール） */
.a12-book{touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.a12-book:active{cursor:grabbing}
.a12-dots{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.a12-dots button{width:22px;height:22px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.a12-dots button::before{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.a12-dots button.is-done::before{background:rgba(var(--light),.45)}
.a12-dots button[aria-current="true"]::before{background:rgba(var(--light),.95);transform:scale(1.4)}
/* 3.34.114：飾りのページ（見開きでメインを左にそろえるために、右ページにはさむ）の目印は出さない */
.a12-dots button.is-filler{display:none}
.a12-hint{text-align:center;color:var(--room-muted);font-size:.76rem;margin:0}
@media (max-width:700px) and (orientation:portrait){
  .a12-stage{grid-template-columns:1fr}.a12-nav{display:none}
  .a12-book{padding:0;perspective:none}.a12-cover::before{inset:-6px}
  .a12-spread{grid-template-columns:1fr;aspect-ratio:auto}
  .a12-cover{width:100%}
  .a12-page.is-left{height:max(260px,min(132vw,600px,calc(100vh - 160px)));height:max(260px,min(132vw,600px,calc(100dvh - 160px)));border-radius:3px}
  .a12-page.is-right{display:none}
  .a12-edge,.a12-leaf.is-fwd,.a12-leaf.is-back{display:none}
  .a12-spread{perspective:1300px}
}
@media (prefers-reduced-motion: reduce){.a12-cone{animation:none}.a12-leaf,.a12-edge,.a12-room,.a12-result{transition:none}}

/* ==========================================================================
   本物のアルバムに近づける
   ・写真は、台紙を切り抜いた窓の奥に収まる（白い芯が見えるベベルカット）
   ・ページは綴じ目に向かってたわみ、綴じ目は深く暗い。外側の端はわずかに落ちる
   ・年号や見出しは箔押しのような金文字
   ・別カットは、ページに差し込んだプリント（白いフチと影）
   ・表紙は革の質感、机には本の影が落ちる
   ・本の大きさは画面の高さにも合わせる（ノートPCの低い画面でも、文字や目印が切れない）
   ========================================================================== */
.a12-cover{width:min(100%,max(600px,calc((100vh - 230px) * 2 / 1.34)));width:min(100%,max(600px,calc((100dvh - 230px) * 2 / 1.34)));margin-inline:auto}
.a12-cover::before{background-image:var(--grain),linear-gradient(160deg,#2b2622,#151210 60%,#0b0908)}
.a12-room.is-ivory .a12-cover::before{background-image:var(--grain),linear-gradient(160deg,#5a3a22,#3a2416 55%,#26170d)}
.a12-book::after{content:'';position:absolute;left:4%;right:4%;bottom:-1%;height:9%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.7),transparent 70%);filter:blur(8px)}
.a12-page.is-left{background:
  linear-gradient(90deg,rgba(0,0,0,.14) 0%,transparent 5%),
  linear-gradient(90deg,transparent 76%,rgba(255,244,220,.05) 86%,transparent 91%,var(--gutter) 100%),
  radial-gradient(ellipse 85% 65% at 62% 28%,rgba(255,238,205,.07),transparent 72%),
  var(--pg) var(--grain)}
.a12-page.is-right{background:
  linear-gradient(270deg,rgba(0,0,0,.14) 0%,transparent 5%),
  linear-gradient(270deg,transparent 76%,rgba(255,244,220,.05) 86%,transparent 91%,var(--gutter) 100%),
  radial-gradient(ellipse 85% 65% at 38% 28%,rgba(255,238,205,.07),transparent 72%),
  var(--pg) var(--grain)}
.a12-spread::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.55),transparent)}
/* 台紙の窓 */
.a12-main .a12-print-img{padding:clamp(2px,.32vw,4px);outline:0;
  background:linear-gradient(135deg,#fbf3df 0%,#efe3c6 45%,#d8c6a0 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.03)}
.a12-room.is-ivory .a12-main .a12-print-img{background:linear-gradient(135deg,#fffaf0,#efe4cc 55%,#d6c39c);box-shadow:0 0 0 1px rgba(90,70,40,.32)}
/* 箔押しの金文字 */
.a12-foil{background-image:linear-gradient(100deg,#a8823a 0%,#f4dea0 28%,#c49a4a 52%,#f1d892 74%,#a37b33 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.a12-room:not(.is-ivory) .a12-foil{filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.a12-room.is-ivory .a12-foil{background-image:linear-gradient(100deg,#86601d 0%,#d9b766 30%,#9c7428 55%,#d2ad5a 78%,#86601d 100%)}
/* 文字はページの中央にそろえ、小さく静かに */
.a12-page-script,.a12-cap{text-align:center}
.a12-cap-line{justify-content:center}
.a12-memo{opacity:.92}
.a12-count{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:baseline}
/* 1ページずつの画面（スマホ・低い画面）：綴じ目の陰は付けない */
@media (max-width:700px) and (orientation:portrait){
  /* 1ページの縦横比（およそ 1:1.34）を保つ。スマホ横向きでページが横に伸びないように */
  .a12-room{--a12-ph:max(260px,min(132vw,600px,calc(100vh - 160px)))}
  /* カスタムプロパティは未対応の単位も保持するため、dvhへの切替は対応時だけ。 */
  @supports (height:100dvh){
    .a12-room{--a12-ph:max(260px,min(132vw,600px,calc(100dvh - 160px)))}
  }
  .a12-cover{width:min(100%,calc(var(--a12-ph) / 1.3))}
  .a12-page.is-left{height:var(--a12-ph)}
  .a12-page.is-left{background:linear-gradient(90deg,rgba(0,0,0,.12) 0%,transparent 4%,transparent 96%,rgba(0,0,0,.12) 100%),
    radial-gradient(ellipse 85% 65% at 50% 28%,rgba(255,238,205,.07),transparent 72%),var(--pg) var(--grain)}
  .a12-spread::before{display:none}
}
/* 高さの低い画面（スマホの横向き）：ページを画面の高さいっぱいに使う。見出しと目印はスクロールで見る */
@media (max-height:520px){
  .a12-room{--a12-ph:calc(100vh - 28px)}
  @supports (height:100dvh){
    .a12-room{--a12-ph:calc(100dvh - 28px)}
  }
}
/* コンテナ単位（cqw/cqh）を使えないブラウザ（iOS / iPadOS 15 の Safari）：
   写真の場所いっぱいに枠を広げ、その中で写真を収める（見出しや年号に重ならないように） */
@supports not (container-type:size){
  .a12-main{position:relative}
  .a12-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .a12-main .a12-print-img{max-width:100%;max-height:100%}
  /* 親の実寸を使うのは拡大したプリントだけ。めくりのtransform中も枠の実寸は変わらない。 */
  .a12-main .a12-crop-print{width:var(--a12-crop-width,0px);max-height:none}
  /* 3.34.113：2〜3枚を並べるページ。枠いっぱいに広げ、それぞれの枠（.a12-cell）の中で写真を収める */
  .a12-set{position:absolute;inset:0;width:auto;height:auto}
  .a12-cell{position:relative}
}

/* ==========================================================================
   3.34.111：開いたアルバムを、画面の大きさを生かして大きく見せる（オーナー依頼・決定）
   以前は、部屋の中身の幅に上限（1100px）があり、本の高さも見込みの式（画面の高さ − 230px）で決めていた。
   大きな画面では左右が大きく余り、ノートPC・iPad横では見出しや目印が少しはみ出してスクロールが出た。
   iPad縦は、めくるボタンが本の左右の幅を取り、見開きが小さかった。
   スマホ横は1ページずつで、見出しと目印がスクロールしないと見えなかった。
   1ページずつにするのは、スマホの縦向きだけ（album12.js の narrow() と同じ条件。オーナー決定）。
   ほかは見開き。見開きの縦横比（2:1.34）は変えない。
   ・パソコン・タブレットの横向き：部屋の中を「見出し／本／目印／案内」に分け、
     本は残りの場所（.a12-stage を大きさの基準にする）いっぱいに。
   ・タブレットの縦向き：めくるボタンを本の下に移し、見開きを横幅いっぱいに。全体を上下の真ん中に置く。
   ・スマホの横向き：見開きを画面の高さいっぱいに。見出し・年数・目印・めくるボタン・案内は本の右に並べる。
     （3.34.112 で、本を真ん中に置いて写真優先の紙面にする形へ変えた。下の「スマホの横向き」を参照）
   ・スマホの縦向き（1ページずつ）は変えない。
   めくりの立体感・紙の厚み・影・軽量化の仕組みには触れない（大きさと並べ方だけ）。
   コンテナ単位（cqh）を使えないブラウザ（iOS / iPadOS 15 の Safari）は、横向きの見開きは以前の大きさのまま。
   ========================================================================== */
/* パソコン・タブレットの横向き */
@media (orientation:landscape) and (min-height:521px){
  @supports (container-type:size){
    .a12-room{padding-block:clamp(14px,2.4vh,30px)}
    .a12-inner{flex:1 1 auto;min-height:0;width:min(100%,1600px);margin:0 auto;
      grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(8px,1.6vh,18px)}
    .a12-stage{container-type:size;min-height:0;height:100%}
    /* 上下の余白は、表紙の革（::before）と机の影のぶん。横は表紙の革のぶん */
    .a12-book{padding:12px 2.6% 26px}
    /* 本の高さ ＝ 場所の高さ − 上下の余白38px（表紙の革が下へ3％はみ出すぶんも割る）→ 幅 ＝ 高さ × 2 / 1.34 */
    .a12-cover{width:min(100%,calc((100cqh - 38px) / 1.03 * 2 / 1.34))}
  }
}
/* タブレットの縦向き（縦長で幅701px以上） */
@media (orientation:portrait) and (min-width:701px){
  .a12-room{padding-inline:clamp(12px,2vw,24px)}
  .a12-inner{width:100%}
  .a12-stage{grid-template-columns:1fr 1fr;row-gap:14px}
  .a12-book{grid-column:1/-1;grid-row:1;padding:12px 2.6% 26px}
  .a12-prev{grid-row:2;grid-column:1;justify-self:start}
  .a12-next{grid-row:2;grid-column:2;justify-self:end}
  /* 横幅いっぱい。画面の低い縦長の画面では、見出し・ボタン・目印・案内・余白（約300px）を残して高さに収める */
  .a12-cover{width:min(100%,calc((100vh - 300px) / 1.03 * 2 / 1.34))}
  @supports (height:100dvh){
    .a12-cover{width:min(100%,calc((100dvh - 300px) / 1.03 * 2 / 1.34))}
  }
}
/* スマホの横向き（高さ520px以下の横長の画面）
   3.34.112：写真の鑑賞を最優先にする（オーナー決定・案C＋D）。
   スマホの横向きの画面は約2.7:1と横に長く、見開き（2:1.34）の大きさは画面の高さで決まる。
   3.34.111 の「本は左、見出しや操作は右」でも本は高さの約9割を使っていて、操作の置き場所を変えるだけでは
   ほとんど大きくならない。そこで、
   ・本を画面の高さいっぱいにして真ん中に置く（主役）。見出し・年数・‹ は左、× ・ › ・目印は右の余白へ小さくまとめる。
     写真には何も重ねない。
   ・紙面の余白を細くし（6％→3％）、筆記体の見出し・年号・メモを小さくして、写真の場所を広げる。
   ・案内文（つかんでめくれます）は出さない（‹ › が見えているので、その場所を写真に回す）。
   ・Safari のバーを畳めるよう、後ろのページを止めない（このファイルの先頭の a12-lock）。
   紙の質感・金の縁・表紙の革・めくりの演出・見開きの比率は変えない。
   実機（iPhone 横向き・Safari のバーあり：使える場所 約750×276pt）で、写真1枚 138×188 → 163×222pt（面積1.39倍）。
   バーが畳まれると（約750×390pt）233×319pt（面積2.86倍）。 */
@media (orientation:landscape) and (max-height:520px){
  /* 背景の光や机の効果は少し隠れてもよいので、本を大きくすることを優先する（オーナー確認）。
     上下の余白はなし。部屋の中だけで止めずに、後ろのページへ動きを渡す（バーを畳むため） */
  .a12-room{padding:0 10px;overscroll-behavior-y:auto}
  /* 左の列｜本｜右の列。.a12-stage の中身（‹ 本 ›）を部屋の中身の並びに直接置く */
  .a12-inner{width:100%;height:100%;margin:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:0}
  .a12-stage{display:contents}
  .a12-book{grid-column:2;grid-row:1/-1;align-self:center;padding:5px 0 7px}
  /* 見開きの高さ ＝ 画面の高さ − 本の余白12 − 表紙の革のはみ出し（÷1.03）。
     左右の列に約95pxずつ残す（部屋の余白20・列の間16を含めて226px） */
  .a12-cover{width:min(calc(100vw - 226px),calc((100vh - 16px) / 1.03 * 2 / 1.34))}
  @supports (height:100dvh){
    .a12-cover{width:min(calc(100vw - 226px),calc((100dvh - 16px) / 1.03 * 2 / 1.34))}
  }
  /* 左の列：上に見出しと年数、真ん中に ‹ */
  .a12-head{grid-column:1;grid-row:1;align-self:start;display:block;padding:12px 0 0}
  .a12-head h2{font-size:.72rem;letter-spacing:.05em;line-height:1.6}
  .a12-head h2 span{display:inline-block}   /* 「〇〇様ご家族の／アルバム」の間で折り返す（album12.js が2つに分けて入れる） */
  .a12-count{display:block;margin-top:6px}
  .a12-count b{font-size:.86rem}
  .a12-count b span{display:inline-block}   /* 「5年目・／6年目」の形で折り返す（album12.js が1ページずつ分けて入れる） */
  .a12-prev{grid-column:1;grid-row:2;justify-self:end;width:42px;height:42px}
  /* 右の列：上に ×（位置は画面に固定）、真ん中に ›、下に目印 */
  .a12-next{grid-column:3;grid-row:2;justify-self:start;width:42px;height:42px}
  .a12-dots{grid-column:3;grid-row:3;align-self:end;justify-content:flex-start;gap:0;padding-bottom:6px}
  .a12-dots button{width:14px}
  .a12-close{top:10px;right:10px;width:40px;height:40px}
  .a12-hint{display:none}
  /* 本のまわりの光（上下に14％広い飾り）が、画面の上下からはみ出してスクロールが出ないよう、上下だけ控えめに。
     部屋がスクロールできると、上へなぞる動きを部屋が受け取ってしまい、後ろのページが動かない（バーが畳まれない） */
  .a12-book::before{inset:-1.5% -10%}
  .a12-book::after{bottom:0}
  /* 写真優先の紙面 */
  .a12-page{padding:3% 3% 0}
  .a12-page-script{font-size:.9rem;margin-bottom:2px}
  .a12-cap{margin-top:2px;padding-bottom:3px}
  .a12-cap-year{font-size:.9rem}
  .a12-yr{font-size:.7rem;letter-spacing:.2em}
  .a12-memo{font-size:.66rem;line-height:1.5;margin-top:1px}
}
/* 3.34.111：スマホの縦向き（1ページずつ）だけに出す一言「横向きにすると、見開きでご覧いただけます。」（オーナー指定）
   アルバムの下の案内文のすぐ下に、案内文と同じ控えめな色・大きさで置く（強調しない）。ほかの画面では出さない。
   1行ぶん（約24px）のため、1ページの高さの見込みを 160px → 184px にする（画面の低いスマホでもスクロールを出さない）。 */
.a12-rotate-note{display:none}
@media (max-width:700px) and (orientation:portrait){
  .a12-rotate-note{display:block;margin:-6px 0 0;text-align:center;color:var(--room-muted);font-size:.68rem;letter-spacing:.06em;opacity:.8}
  .a12-room{--a12-ph:max(260px,min(132vw,600px,calc(100vh - 184px)))}
  @supports (height:100dvh){
    .a12-room{--a12-ph:max(260px,min(132vw,600px,calc(100dvh - 184px)))}
  }
}
/* 高さの低い縦長の画面（高さ520px以下）は、以前どおり画面いっぱい（上の (max-height:520px) の指定）から一言のぶんを引く */
@media (max-width:700px) and (orientation:portrait) and (max-height:520px){
  .a12-room{--a12-ph:calc(100vh - 52px)}
  @supports (height:100dvh){
    .a12-room{--a12-ph:calc(100dvh - 52px)}
  }
}