@charset "UTF-8";
/* こうきとりな。公式リンク  assets/css/style.css
   色は下の :root の値を変えると、サイト全体に反映される。
   画面の幅で3つの形に切り替わる：スマホ（〜599px）／タブレット（600〜1099px）／パソコン（1100px〜。左に表紙、右を下へ読む） */
:root {
  --ink:     #1b1b1f;  /* 文字・黒いボタン */
  --sub:     #66666e;  /* 補助の文字 */
  --bg:      #f6f4f1;  /* 地（ベージュ） */
  --card:    #fff;     /* カード */
  --accent:  #c93d32;  /* 差し色（PR タグ・だれの） */
  --rakuten: #BF0000;  /* 楽天ROOMで見る */
  --yt:      #FF0033;  /* YouTube の再生マーク */

  --round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;  /* 名前・見出し */
  --ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  color-scheme: light;
  color-scheme: only light;       /* ダークモード・強制ダークに追従しない */
}

/* ---------- 土台 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--bg);color:var(--ink);font-family:var(--ja);line-height:1.5;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
img{display:block;max-width:100%}
a,button{color:inherit}
button{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* 見た目には出さず、読み上げ・見出しの移動にだけ使う文字 */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 「本文へ移動」の飛び先。押したあと、次の Tab が本文の最初のリンクへ進むように focus を受ける（枠は出さない） */
main:focus{outline:none}
/* 本文へ移動：ふだんは見えず、キーボードの Tab で止まったときだけ表紙の上に出る。
   左の位置は「表紙の左端＋8px」（器 .page は中央寄せなので、画面の幅から .page の最大幅を引いた半分）。.page の max-width を変えたら、ここの数も合わせる */
.skip{position:absolute;top:8px;top:calc(8px + env(safe-area-inset-top, 0px));left:8px;left:calc(max(env(safe-area-inset-left, 0px), (100% - 480px) / 2) + 8px);z-index:95;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;line-height:1.45;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.skip:not(:focus){width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;box-shadow:none}

/* URL が空のリンクは出さない。:has を知らないブラウザでも a は消えるよう2行に分ける
   （html を付けて、.sns a などの「見せる」指定より強くしている） */
html a[href=""]{display:none}
li:has(> a[href=""]){display:none}

/* ---------- 器（スマホは1列・最大480px） ---------- */
.page{max-width:480px;margin:0 auto}

/* ---------- 表紙 ---------- */
/* 写真が読み込まれるまでは濃い地（白い文字が読めるように）。写真は上に重なる */
.cover{position:relative;height:100vh;height:100svh;min-height:560px;max-height:900px;overflow:hidden;color:#fff;background:var(--ink)}
.cover__ph,.cover__ph .ph__box{position:absolute;top:0;left:0;width:100%;height:100%;background:none}
/* 下側を暗くして、写真を差し替えても白い名前・ひとことが読めるようにする */
.cover::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 42%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.82) 100%)}
/* PR のピルの位置は見本と同じ（上から 10px＋文字1つ分）。iPhone の切り欠きがある画面では、その分だけ下げる。
   名前・アイコンの塊（.cv）も、画面の下のバーの分だけ上げる（index.html の viewport-fit=cover と組み）。
   env() を知らないブラウザ用に、先に素の値を書いている */
.prpill{position:absolute;z-index:2;top:calc(10px + 1em);top:calc(10px + 1em + env(safe-area-inset-top, 0px));left:10px;right:10px;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;line-height:1.4;text-align:center}
.prpill .pr{margin-right:6px;padding:0 5px;border-radius:3px;background:var(--accent);font-weight:700}
.cv{position:absolute;z-index:2;left:0;right:0;bottom:22px;bottom:calc(22px + env(safe-area-inset-bottom, 0px));padding:0 16px;text-align:center}
.cv h1{font-family:var(--round);font-weight:800;font-size:36px;line-height:1.48;letter-spacing:.03em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.tagline{margin:4px 0 16px;font-size:13px;line-height:1.45;letter-spacing:.06em;opacity:.92}
.tagline:empty{display:none}
/* SNS のアイコン：タイルの下に小さな白い名前。幅の狭い画面では、5つが1行に収まるよう少し小さく */
.sns{--tile:min(54px,calc((100vw - 80px)/5));display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sns a{display:flex;flex-direction:column;align-items:center;width:var(--tile);text-decoration:none;color:#fff}
.sns__ic{display:block;width:var(--tile);height:var(--tile);border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.sns__l{margin-top:5px;font-size:10px;line-height:1.3;font-weight:700;letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.inapp{max-width:24em;margin:12px auto 0;padding:6px 12px;border-radius:12px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11px;line-height:1.5}
.cue{margin-top:14px;font-size:11px;line-height:1.45;letter-spacing:.1em;opacity:.85}
/* 写真の切る位置（data-crop）。表紙の "top" は、顔が上にある二人の写真に合わせた位置 */
.ph__box{position:relative;display:block;min-width:0;overflow:hidden}
.ph__box img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
[data-crop="top"] img{object-position:50% 15%}
[data-crop="bottom"] img{object-position:50% 85%}
.cover__ph[data-crop="top"] img{object-position:50% 25%}
.is-empty img{display:none}
/* 写真を押すと拡大表示（main.js が写真の上に透明のボタンを置く） */
.ph__zoom{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:zoom-in}
.ph__zoom:focus-visible{outline-offset:-3px}
.is-empty .ph__zoom{display:none}
/* 表紙の写真が無いとき（公開先）：濃い地に名前とアイコンだけの、短い表紙にする */
.no-cover .cover__ph,.no-cover .cover::after{display:none}
.no-cover .cover{height:auto;min-height:0;max-height:none;padding:56px 0 40px}
.no-cover .cv{position:static}

/* ---------- 下のシート（表紙に少し重なる） ---------- */
.sheet{position:relative;z-index:3;margin-top:-18px;padding:26px 0 10px;border-radius:22px 22px 0 0;background:var(--bg)}
h2{margin:0 16px 4px;font-family:var(--round);font-weight:800;font-size:20px;line-height:1.48}
h2 small{margin-left:6px;font-family:var(--ja);font-weight:700;font-size:11px;color:var(--sub)}
h2 .tag{margin-left:6px;padding:1px 5px;border-radius:3px;background:var(--accent);color:#fff;font-size:10px;vertical-align:3px}
.lead{margin:0 16px 12px;font-size:12px;line-height:1.45;color:var(--sub)}
.sec{margin-top:30px}

/* ---------- ふたりの愛用品 ---------- */
.shelf__pr{margin:-6px 16px 12px;font-size:12px;line-height:1.6;color:var(--sub)}
.items{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 10px;padding:0 14px}
.items>li{display:flex;min-width:0}
.card{display:block;flex:1;min-width:0;overflow:hidden;border-radius:16px;background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.06);color:inherit;text-decoration:none}
/* 写真は正方形に切る。読み込むまでは灰色にせず、カードの白のまま */
.item__ph{aspect-ratio:1/1;background:none}
.item__ph.is-empty{display:none}
.item__b{display:flex;flex-direction:column;align-items:stretch;padding:10px 12px 12px}
.item__who{font-size:10px;line-height:1.6;font-weight:700;color:var(--accent)}
.item__name{margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:1.4;font-weight:700}
.item__note{margin-top:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:11.5px;line-height:1.55;color:var(--sub)}
.item__pr{margin-top:4px;font-size:10.5px;line-height:1.5;color:var(--sub)}
.item__go{display:block;margin-top:8px;padding:7px 0;border-radius:999px;background:var(--rakuten);color:#fff;font-size:12px;line-height:1.45;font-weight:700;text-align:center}
.item__who:empty,.item__name:empty,.item__note:empty,.item__pr:empty{display:none}
.more{display:flex;align-items:center;justify-content:center;min-height:44px;margin:16px 14px 0;padding:13px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;line-height:1.45;font-weight:700;text-decoration:none;text-align:center}

/* ---------- ふたりの写真（互い違いに詰める並べ方） ---------- */
.mosaic{columns:2;column-gap:8px;padding:0 12px}
.mosaic .ph__box{margin:0 0 8px;border-radius:14px;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;container-type:inline-size}
/* 3:4 より縦に長い写真（photo-10 など）は、並びの中では 3:4 に切って列の長さをそろえる（押すと元の形で見られる） */
.mosaic .ph__box img{height:auto;max-height:133.4cqw;object-fit:cover}

/* ---------- 最新の動画 ---------- */
.yt,.movie.is-ready{position:relative;display:block;margin:0 16px;overflow:hidden;border-radius:16px}
.yt{background:var(--card);color:inherit;text-decoration:none}
.yt__ph{position:relative;display:block;aspect-ratio:16/9}
.yt__ph img{width:100%;height:100%;object-fit:cover}
.yt__ph.is-empty{display:none}
.yt__icon,.movie__icon{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:62px;height:44px;border-radius:12px;background:var(--yt);transform:translate(-50%,-50%)}
.yt__icon::after,.movie__icon::after{content:"";margin-left:4px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt__go{display:flex;align-items:center;min-height:44px;padding:10px 14px;font-size:13px;line-height:1.45;font-weight:700}
/* 動画ID が入ったとき：YouTube の小さな画像を出し、押してから再生 */
.movie.is-ready{aspect-ratio:16/9;background:#000}
.movie iframe,.movie__play,.movie__demo{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.movie__play{display:block;padding:0;background:#000;cursor:pointer}
.movie__play img,.movie__demo img{width:100%;height:100%;object-fit:cover}
.movie__play:focus-visible{outline-offset:-3px}

/* ---------- ひとりずつ ---------- */
.each{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:0 16px}
.each>li{display:flex;min-width:0}
.each__a{display:flex;flex:1;align-items:center;gap:10px;min-width:0;padding:12px;border-radius:16px;background:var(--card);color:inherit;text-decoration:none}
.each__a>span:last-child{min-width:0}
/* 丸い顔写真：photo-05 を寄せて切る（寄せる位置と倍率は index.html の --fx・--fy・--zoom） */
.face{position:relative;flex:none;width:42px;height:42px;overflow:hidden;border-radius:50%}
.face img{width:100%;height:100%;object-fit:cover;transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,50%)}
.face.is-empty{display:none}
.each b{display:block;font-family:var(--round);font-weight:800;font-size:16px;line-height:1.45}
.each small{display:block;overflow:hidden;font-size:11px;line-height:1.45;color:var(--sub);white-space:nowrap;text-overflow:ellipsis}

/* ---------- お仕事のご相談 ---------- */
.work{margin:30px 16px 0;font-size:12px;line-height:1.45;color:var(--sub);text-align:center}
/* 文字は小さいまま、押せる範囲だけ上下に広げる（44px） */
.work a{display:inline-block;margin:-14px 0;padding:14px 1px;color:var(--ink);font-weight:700}
/* フォームのURLが入ったら、DM の案内は引っこむ */
.cta-form:not([href=""])~.cta-dm{display:none}
.work__more{display:none;margin-top:6px}
/* #contact で来たとき：白いカードにして、説明の一文も出す */
.work.is-open,.work:target{padding:14px 16px;border-radius:16px;background:var(--card)}
.work.is-open .work__more,.work:target .work__more{display:block}

/* ---------- フッター ---------- */
.foot{padding:24px 16px 34px;font-size:10.5px;line-height:1.7;color:var(--sub);text-align:center}
.foot__ad b{font-weight:700;color:var(--ink)}
.foot__pp{margin-top:6px}
.foot__pp summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.foot__pp summary::-webkit-details-marker{display:none}
.foot__pp summary{list-style:none}
.foot__ppbody{margin:0 auto 8px;max-width:36em;text-align:left}
.foot__ppbody li{position:relative;padding-left:1em}
.foot__ppbody li+li{margin-top:4px}
.foot__ppbody li::before{content:"・";position:absolute;left:0}
.foot__ppbody p{margin-top:6px}
.foot__end{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px}
.totop{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;text-decoration:none}

/* ---------- 表示のモード（公開先では空のものを出さない） ---------- */
/* JS が動くときは、写真があるか確かめ終わるまで「ふたりの写真」と「動画」の区画を出さない（無い写真の枠を一瞬も見せない） */
html.js:not(.mode-check):not(.snap-timeout) .gal-sec:not(.is-ready),
html.js:not(.mode-check):not(.snap-timeout) .movie-sec:not(.is-ready){visibility:hidden}
html:not(.mode-check) .shelf-sec:not(:has(.item:not([href=""]))){display:none}
/* 確認表示：空のカードも出し、空の枠には置くべきファイル名 */
.mode-check .items>li{display:flex}
.mode-check .item[href=""]{display:block}
.mode-check:not(.mode-demo) .item.is-blank{outline:1px dashed rgba(27,27,31,.35);outline-offset:-4px}
.mode-check .is-empty{display:block;background:repeating-linear-gradient(135deg,transparent 0,transparent 8px,rgba(27,27,31,.05) 8px,rgba(27,27,31,.05) 16px),var(--card);box-shadow:inset 0 0 0 1px rgba(27,27,31,.3)}
.mode-check .mosaic .is-empty{aspect-ratio:3/4}
.mode-check .face.is-empty,.yt__ph.is-empty .yt__icon{display:none}
.ph__file{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;text-align:center;font-size:11px;line-height:1.5;font-weight:700;color:var(--sub);word-break:break-all}
.ph__file::before{content:"ここに置く";font-size:10px;letter-spacing:.08em;color:var(--accent)}
.cover .ph__file{justify-content:flex-start;padding-top:90px}
/* 「足りないもの」パネル（確認表示だけ）。閉じている間は見出し行だけの小さな札、見本表示では見出しに DEMO */
.panel{position:fixed;right:12px;bottom:12px;z-index:90;width:min(320px,calc(100vw - 24px));overflow:hidden;border-radius:14px;background:var(--card);box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:12px;line-height:1.6;color:var(--ink)}
.panel:not(.is-open){width:auto}
.panel__tog{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:8px 12px;border:0;background:var(--ink);color:#fff;font-weight:700;text-align:left;cursor:pointer}
.panel__tog b{min-width:26px;padding:2px 6px;border-radius:999px;background:var(--accent);text-align:center}
.panel__demo{margin-right:auto;padding:2px 6px;border-radius:3px;background:#fff;color:var(--ink);font-size:10px;line-height:1.2;letter-spacing:.06em}
.panel__body{max-height:min(56vh,440px);overflow:auto;padding:4px 12px 10px}
.panel li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;padding:7px 0;border-bottom:1px solid rgba(27,27,31,.1)}
.panel li::before{content:"要";grid-row:1/span 2;align-self:start;padding:1px 0;border-radius:3px;text-align:center;background:var(--rakuten);color:#fff;font-size:10px;font-weight:700}
.panel li.ok::before{content:"OK";background:#1F6F4A}
.panel li small{grid-column:2;font-size:11px;color:var(--sub)}
.panel__note{margin-top:8px;font-size:11px;color:var(--sub)}

/* ---------- 拡大表示 ---------- */
.is-locked,.is-locked body{overflow:hidden}
.lb{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(27,27,31,.97);color:#fff;overscroll-behavior:contain;animation:lb-in .2s ease-out}
@keyframes lb-in{from{opacity:0}}
/* 閉じる・前後のボタンは画面の端に寄るので、iPhone の切り欠き・角・下のバーの分だけ内側へ（横向きのときの左右も） */
.lb__bar,.lb__nav{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
.lb__bar{padding-top:max(8px,env(safe-area-inset-top));padding-left:18px;padding-left:max(18px,env(safe-area-inset-left))}
.lb__nav{padding-bottom:max(10px,env(safe-area-inset-bottom))}
.lb__count{font-size:13px;line-height:1;font-weight:700;letter-spacing:.1em}
.lb__stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 10px;touch-action:pan-y pinch-zoom}
.lb__img{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.lb__btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.lb__btn svg{width:22px;height:22px}
.lb__btn:active{background:rgba(255,255,255,.18)}
.lb__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (hover:hover){.lb__btn:hover{background:rgba(255,255,255,.18)}}

/* ---------- タブレット（600px〜）：1列のまま少し広く。愛用品と写真は3列 ---------- */
@media (min-width:600px){
  .page{max-width:760px}
  .skip{left:calc(max(env(safe-area-inset-left, 0px), (100% - 760px) / 2) + 8px)}
  .cover{height:78vh;height:78svh;max-height:820px}
  .cv h1{font-size:42px}
  .sns{--tile:60px;gap:14px}
  h2,.lead,.shelf__pr{margin-left:24px;margin-right:24px}
  .items{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 14px;padding:0 24px}
  .more{max-width:360px;margin:20px auto 0}
  .mosaic{columns:3;column-gap:10px;padding:0 24px}
  .mosaic .ph__box{margin-bottom:10px}
  .yt,.movie.is-ready,.each{margin-left:24px;margin-right:24px}
  .each{padding:0}
}

/* ---------- パソコン（1100px〜）：左に二人の写真（スクロールしても動かない）、右を下へ読む ---------- */
@media (min-width:1100px){
  .page{display:grid;grid-template-columns:minmax(380px,42%) minmax(0,1fr);align-items:start;max-width:1440px}
  .skip{left:calc(max(env(safe-area-inset-left, 0px), (100% - 1440px) / 2) + 8px)}
  .cover{position:sticky;top:0;height:100vh;height:100svh;min-height:0;max-height:none}
  .cover__ph[data-crop="top"] img{object-position:50% 30%}
  .prpill{top:calc(18px + 1em);top:calc(18px + 1em + env(safe-area-inset-top, 0px));left:20px;right:auto;padding:6px 14px}
  .cv{bottom:44px;bottom:calc(44px + env(safe-area-inset-bottom, 0px));padding:0 32px}
  .cv h1{font-size:48px}
  .tagline{margin-bottom:20px;font-size:14px}
  .sns{--tile:62px}
  .sns__ic{transition:transform .15s}
  .sns__l{font-size:11px}
  .cue{display:none}
  .no-cover .cover{height:100vh;height:100svh;padding:0}
  .no-cover .cv{position:absolute}
  .sheet{min-height:100vh;margin-top:0;padding:64px 0 24px;border-radius:0}
  .sheet>main,.sheet>footer{max-width:860px;margin-left:56px;margin-right:56px}
  h2{margin:0 0 6px;font-size:26px}
  h2 small{font-size:12px}
  .lead{margin:0 0 18px;font-size:13px}
  .shelf__pr{margin:-12px 0 18px}
  .sec{margin-top:64px}
  .items{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;padding:0}
  .card{transition:transform .2s,box-shadow .2s}
  .item__note{font-size:12.5px}
  .more{max-width:320px;margin:26px 0 0}
  .mosaic{columns:3;column-gap:14px;padding:0}
  .mosaic .ph__box{margin-bottom:14px}
  .yt,.movie.is-ready{max-width:720px;margin:0}
  .each{max-width:560px;margin:0;padding:0}
  .work{margin:64px 0 0;font-size:13px;text-align:left}
  .foot{padding:28px 0 48px;text-align:left}
  .foot__ppbody{margin-left:0}
  .foot__end{justify-content:flex-start}
}
@media (min-width:1100px) and (hover:hover){
  .sns a:hover .sns__ic{transform:translateY(-3px)}
  .card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
}

/* ---------- 英語の見出し・弧の名前（2026-10-15）。書体は Bodoni Moda（index.html で読む） ----------
   オーナーの見本に合わせて、かすれのない白い文字＋右下にずらした濃い影（前は Rye ＋かすれ） */
:root{--en:"Bodoni Moda","Didot","Bodoni 72","Times New Roman",serif}
h2 .en{font-family:var(--en);font-weight:600;letter-spacing:.04em}
h2 small{display:block;margin:2px 0 0;letter-spacing:.08em}
main>section:first-of-type{margin-top:0}
.arc{position:relative;margin:0 auto 6px;height:56px;pointer-events:none}
.arc__row{position:absolute;left:0;right:0;top:0;height:0}
.arc .ch{position:absolute;left:50%;top:0;display:block;font-family:var(--en);font-weight:600;font-optical-sizing:none;font-variation-settings:"opsz" 6;line-height:1;text-align:center;white-space:pre;color:#fff;text-shadow:.07em .08em 0 #2a2a2a}
/* ↑ "opsz" 6：大きく出しても線を細くしない（見本のように、どっしりした形のまま） */
.arc .ch i{display:inline-block;font-style:normal}
.arc .g{color:transparent;-webkit-text-stroke:1.5px rgba(235,235,235,.8);text-shadow:none}
.arc .g i{opacity:0}

/* ---------- 開いたときの画面（html.intro の1回だけ。送ってもらった動画の出方に寄せた） ----------
   ① 黒から、表紙の写真が画面いっぱいにふわっと出る ② 白い細い枠の線が伸びる ③ 名前が1文字ずつ、大きめの影の文字を残して弧に出る
   ④ 写真が小さくなりながら消えて、下のサイトがふわっと出る。押すと④へ飛ぶ */
.splash{display:none}
html.intro .splash{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden;background:#000;cursor:pointer}
html.intro{overflow:hidden}                       /* 開いている間は、下のサイトを動かさない */
html.intro .splash__ph{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;animation:kr-fadein .9s ease-out .05s both}
html.intro .splash::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;  /* 表紙（.cover::after）と同じ影。重ねたときに継ぎ目が出ないように */
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 42%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.82) 100%)}
.splash__frame,.arc--splash{transition:opacity .25s}
.splash.is-moving .splash__frame,.splash.is-moving .arc--splash{opacity:0}
.splash__frame{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}
.splash__frame i{position:absolute;background:rgba(255,255,255,.85)}
.splash__frame i:nth-child(1){left:0;right:0;top:5%;height:1.5px;transform-origin:0 50%}
.splash__frame i:nth-child(2){left:0;right:0;bottom:5%;height:1.5px;transform-origin:100% 50%}
.splash__frame i:nth-child(3){top:0;bottom:0;left:6%;width:1.5px;transform-origin:50% 0}
.splash__frame i:nth-child(4){top:0;bottom:0;right:6%;width:1.5px;transform-origin:50% 100%}
html.intro .splash__frame i:nth-child(-n+2){animation:kr-lineX .8s cubic-bezier(.2,.7,.2,1) .15s both}
html.intro .splash__frame i:nth-child(n+3){animation:kr-lineY .8s cubic-bezier(.2,.7,.2,1) .25s both}
/* 名前はどの画面でも、写真の上のほう（ふたりの頭の上）。開いたときの画面と表紙で同じ位置にそろえる（2026-10-15 オーナーの指示） */
.arc--splash,.arc--top{position:absolute;z-index:3;left:6%;right:6%;top:calc(8% + env(safe-area-inset-top, 0px));margin:0}
@media (min-aspect-ratio:1/1){.arc--splash{left:24%;right:24%}}   /* 横長の画面では大きくなりすぎないよう、幅を絞る */
html.intro .arc--splash .ch:not(.g) i{animation:kr-pop .45s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i) * .05s) both}
html.intro .arc--splash .g i{animation:kr-ghost 1.1s ease-out calc(.15s + var(--i) * .05s) both}
/* 写真が表紙に重なったら、名前・アイコンと、下（PC は右）のサイトがふわっと出る（intro.js が html に intro-done を付ける） */
html.intro .cv,html.intro .sheet,html.intro .arc--top{opacity:0}
html.intro-done .cv,html.intro-done .sheet,html.intro-done .arc--top{opacity:1;transition:opacity .6s ease-out}
@keyframes kr-fadein{0%{opacity:0;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes kr-lineX{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes kr-lineY{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes kr-pop{0%{opacity:0;transform:scale(1.9);filter:blur(3px)}55%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@keyframes kr-ghost{0%{opacity:0;transform:scale(1.35)}22%{opacity:.55}70%{opacity:.35}100%{opacity:.3;transform:scale(1)}}

/* 動きを減らす設定の人には、動きなし */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}