/* Yoraku サイト全体の試作「コマ割り」（2026-09-17）。トップ案 c-koma-suzu の見た目をそのまま共通化し、下層ページ用の部品を足した。
   白 #FFF・藍 #193C52・金 #BA993E（金は点で）／見出し Zen Maru Gothic・本文 Noto Sans JP。
   幅：スマホ〜767px＝1列の漫画／768px〜＝ページ760px／1026px〜＝ページ1080px */
:root{--ai:#193C52;--gold:#BA993E;--light:#EDF3F6;--soft:#405966;--sub:#536C7C;--line:#E3E6EB}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--soft);font-family:"Noto Sans JP",sans-serif;font-size:15px;line-height:1.8;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--ai);margin:0;letter-spacing:.04em;line-height:1.5;word-break:auto-phrase}
a{color:inherit}

/* ヘッダー：ロゴ・メニュー（スマホはハンバーガーで開閉・768px〜はロゴ横に並べる・2026-09-18） */
/* スマホは画面の上に貼り付けて、スクロールしてもメニューがいつでも押せるようにする（本人 2026-09-18「スマホ版、メニューは常に表示されるように」）。
   地の色を白で敷かないと下の文字が透けて重なる。768px以上は元どおり流れる */
/* スマホはロゴを画面の中央に（本人 2026-09-18）。左にボタンと同じ44pxの空きを作り、右のハンバーガーと釣り合わせる＝ロゴが真ん中に来る */
.top{position:sticky;top:0;z-index:30;background:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:16px 16px 8px;transition:transform .25s ease}   /* スマホはロゴの上下に余白（本人 2026-09-21）＝帯34→42px。2026-09-25 本人「Yorakuの上の空白を少し広げて、若干上より」＝上11→16・下9→8（ヘッダーの下に最初のコマまで約10pxの白があるので、見た目で上16・下18＝ほぼ中央） */
.top .logo{margin:0 auto}
[id]{scroll-margin-top:48px}   /* ページ内リンクの着地点が、貼り付いたヘッダーの下に隠れないように */
.top .logo img{width:104px}   /* 帯の高さは変えずにロゴだけ大きく（本人 2026-09-20）＝高さ29pxで .logo の38pxに収まる */
/* スマホのハンバーガーは廃止（本人 2026-09-20）＝行き先は下のタブバー（.tabbar）に移した。
   メニュー（.gnav）はPCでだけ出る */
.gnav{display:none}
.gnav a{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--ai);text-decoration:none;background:var(--light)}
.gnav a[aria-current="page"]{background:var(--ai);color:#fff}
/* 下へスクロールしたら帯ごと消す（本人 2026-09-20）。上に戻すと戻ってくる */
/* 下へスクロールしたら帯ごと上へ逃がす（本人 2026-09-20「下にスクロールしたら消えるように」）。
   上に戻すと戻ってくる。行き先は下のタブバーにあるので、消えても困らない */
.top.is-slim{transform:translateY(-110%)}

.page{max-width:600px;margin:0 auto;padding:10px 14px 40px}
.ep{display:flex;align-items:center;gap:10px;margin:8px 4px 14px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--sub)}
.ep::after{content:"";flex:1;height:2px;background:var(--ai)}
.grid > .ep{grid-column:span 6;margin:14px 4px 2px}

/* コマ */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.koma{position:relative;grid-column:span 6;border:2.5px solid var(--ai);border-radius:6px;background:#fff;padding:20px 18px;box-shadow:5px 5px 0 var(--ai)}
.koma.s3{grid-column:span 3}.koma.s2{grid-column:span 2}.koma.s4{grid-column:span 4}
.koma.m3{grid-column:span 6}   /* スマホは幅いっぱい・768px〜は半分（文字の多いコマ用） */
@media (min-width:768px){.koma.m3{grid-column:span 3}}
.koma .n{position:absolute;top:-2.5px;left:-2.5px;z-index:3;background:var(--ai);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:11px;padding:2px 9px;border-radius:6px 0 6px 0;letter-spacing:.1em}
.tone{position:relative;overflow:hidden}
.tone::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--gold) 1.3px,transparent 1.4px);background-size:9px 9px;opacity:.14;pointer-events:none} /* 背景のてんてんを半分の濃さに（本人 2026-09-17「後ろのてんてんを薄く」・前は .28） */
.tone > *{position:relative}
.lines{position:absolute;inset:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(25,60,82,.08) 0deg 1.6deg,transparent 1.6deg 12deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 32%,#000 60%);mask:radial-gradient(circle at 50% 50%,transparent 32%,#000 60%)}
.koma.tilt-l{transform:rotate(-1.2deg)}.koma.tilt-r{transform:rotate(1.1deg)}
.koma h2{font-size:22px}
.koma > h2{text-align:center}
.koma h2 small{font-size:.55em;margin-left:2px}
.koma h2 + p{margin:8px 0 0}

/* 下層ページの表紙コマ（集中線＋金のトーン＋英字の小見出し） */
.pcover{text-align:center;padding:46px 20px 42px;overflow:hidden}
.pcover .eyebrow{margin:0 0 6px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--gold)}
.pcover h1{font-size:clamp(26px,7.4vw,38px);font-weight:900;letter-spacing:.08em}
.pcover .lead{margin:12px auto 0;max-width:34em;font-size:14px}

/* 吹き出し・イラスト */
.fuki{position:relative;display:inline-block;background:#fff;border:2px solid var(--ai);border-radius:20px;padding:10px 16px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--ai);font-size:15px;line-height:1.6;text-align:left;max-width:100%;margin:0}
.fuki::after{content:"";position:absolute;left:26px;bottom:-11px;width:14px;height:14px;background:#fff;border-right:2px solid var(--ai);border-bottom:2px solid var(--ai);transform:rotate(45deg)}
.fuki.r::after{left:auto;right:26px}
.fuki.c::after{left:calc(50% - 7px)}
.fuki.ai{background:var(--ai);color:#fff}
.fuki.ai::after{background:var(--ai)}
.fuki.ai a{color:#fff}
/* 吹き出しを会話のように並べる箱（左＝白・.r で右＝藍）。コマの外に直接置けるよう列いっぱいに（2026-09-18 ロゴのページで使用） */
.fukis{grid-column:span 6;display:grid;gap:16px;justify-items:start;margin:0}
.fukis .r{justify-self:end}
.fukis .fuki{margin:0;font-size:14.5px;font-weight:500;line-height:1.85;max-width:min(100%,33em)}
.il .ln{fill:none;stroke:var(--ai);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.il .fw{fill:#fff}.il .fg{fill:var(--gold)}.il .fl{fill:var(--light)}.il .fa{fill:var(--ai)}
.il .q{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:20px;fill:var(--ai);text-anchor:middle}

/* 本文の段落（コマの外・グリッドの幅いっぱい） */
.note{grid-column:span 6;margin:0 4px;font-size:14px}

/* 見積もりへのボタン（白地・藍の枠・金の影） */
.estimate{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:420px;margin:14px auto 0;padding:12px 20px;border:2px solid var(--ai);border-radius:999px;background:#fff;color:var(--ai);text-decoration:none;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;line-height:1.5;box-shadow:3px 3px 0 var(--gold)}
.estimate .tag{font-size:11px;color:var(--gold);margin:0 4px}
.estimate .arw{font-size:18px;line-height:1}
.center{text-align:center}

/* 料金プラン（3枚・おすすめは金の影と札） */
.plan{grid-column:span 6;text-align:center;padding:28px 18px 20px}
.plan .pname{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:20px;color:var(--ai);line-height:1.4}
.ptag{font-size:11px;letter-spacing:.2em;color:var(--sub);font-weight:700}
.plan .pprice{margin:12px 0 4px;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:40px;line-height:1;color:var(--ai);text-shadow:3px 3px 0 var(--light)}
.plan .pprice span{font-size:18px}
.plan .pdesc{margin:10px 0 12px;font-size:13px}
.plan dl{margin:0;text-align:left;border-top:2px dotted var(--line)}
.plan dl div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:8px;padding:8px 0;border-bottom:2px dotted var(--line)}
.plan dt{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12px;color:var(--ai)}
.plan dd{margin:0;font-size:13px;line-height:1.6}
.plan dd small{display:block;font-size:11px;color:var(--sub)}
.plan.feature{box-shadow:5px 5px 0 var(--gold)}
.plan .reco{position:absolute;top:-14px;right:12px;background:var(--gold);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:12px;padding:3px 12px;border-radius:999px;border:2px solid var(--ai);transform:rotate(4deg)}

/* 大きな金額（効果音のように） */
.bigprice{text-align:center}
.bigprice .name{margin-top:4px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16px;color:var(--ai)}
.bigprice .yen{margin:6px 0;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:36px;line-height:1.2;color:var(--ai);text-shadow:3px 3px 0 var(--light)}
.bigprice .yen span{font-size:15px}
.bigprice .feat{max-width:36em;margin:0 auto;font-size:13px;text-align:left}
.bigprice .feat small{display:block;margin-top:6px;font-size:11px;color:var(--sub)}

/* 項目と金額の行（点線で区切る） */
.rows{list-style:none;margin:12px 0 0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;padding:10px 0;border-bottom:2px dotted var(--line)}
.rows b{font-family:"Zen Maru Gothic",sans-serif;font-size:15px;color:var(--ai)}
.rows .detail{grid-column:1;font-size:12px;color:var(--sub);line-height:1.6}
.rows .price{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:17px;color:var(--ai);white-space:nowrap}

/* 流れ（番号つきのコマを並べる） */
.step{grid-column:span 3;padding:28px 14px 16px}
.step.last{grid-column:span 6}
.step h3{font-size:16px;line-height:1.4}
.step .time{display:inline-block;margin:6px 0 8px;font-size:11px;font-weight:700;line-height:1.7;color:#fff;background:var(--gold);border-radius:999px;padding:0 10px}
.step p{margin:0;font-size:13px;line-height:1.7}

/* よくあるご質問＝お客さんの吹き出し（右・白）と Yoraku の答え（左・藍） */
.qa{display:grid;gap:18px;margin-top:18px}
.qa .fuki{max-width:88%;font-size:14px}
.qa .q{justify-self:end}
.qa .a{justify-self:start;font-family:"Noto Sans JP",sans-serif;font-weight:500;line-height:1.8}

/* 実績・料金の部品（トップと同じ） */
.work{padding:0;overflow:hidden}
.work img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.work b{display:block;padding:8px 6px 9px;word-break:keep-all;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12px;line-height:1.4;color:var(--ai);border-top:2.5px solid var(--ai);background:#fff}
.work b small{display:block;margin-top:2px;font-size:11px;font-weight:500;line-height:1.5;color:var(--sub)}
.work b small span{display:inline-block}
.can{display:grid;gap:4px;margin:12px 0 0;padding:0}
.can li{list-style:none;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;border-bottom:2px dotted var(--line);padding:10px 0}
.can .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid var(--ai);background:var(--light)}
.can .ic svg{width:28px;height:28px;fill:none;stroke:var(--ai);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.can .ic .gd{fill:var(--gold);stroke:none}
.can .ic .gs{stroke:var(--gold)}
.can b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:16px;color:var(--ai);line-height:1.4}
.can span{display:block;font-size:12px;color:var(--sub);line-height:1.6}

/* 相談（藍のコマ＝全ページ共通） */
.next{text-align:center;padding:34px 20px 30px;background:var(--ai);color:#fff;border-color:var(--ai);box-shadow:5px 5px 0 var(--gold)}
.next h2{color:#fff;font-size:26px;font-weight:900}
.next p{margin:12px 0 0;color:#E1E8EC;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border-radius:999px;background:#fff;color:var(--ai);text-decoration:none;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;margin-top:20px;box-shadow:3px 3px 0 var(--gold)}
.cc-trio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:520px;margin:20px auto 0}   /* 見積もり・話してみたい を横並び（2026-09-17・「フォームで相談する」は本人の指示で外した） */
.cc-trio .estimate{margin:0;max-width:none;justify-content:center;text-align:center;padding:10px 6px;border-radius:16px;font-size:13px;line-height:1.45}
.cc-trio .estimate .tag{margin:0}
/* 「なんか話してみたい」を押した時：一言を出してカードを光らせる（2026-09-17） */
.cc-ways-hint{margin:18px 0 0!important;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:14px;color:var(--gold)!important}
.cc-ways-hint[hidden]{display:none}
.cc-cards.is-hi .cc-card{animation:cc-hi 1.1s ease 2}
@keyframes cc-hi{0%,100%{border-color:rgba(255,255,255,.45);box-shadow:none}40%{border-color:var(--gold);box-shadow:0 0 0 3px rgba(186,153,62,.55)}}
@media (prefers-reduced-motion:reduce){.cc-cards.is-hi .cc-card{animation:none;border-color:var(--gold)}}
.cc-cards{display:grid;gap:10px;max-width:760px;margin:18px auto 0}
.cc-card{display:grid;justify-items:center;gap:2px;padding:14px 10px;border:2px solid rgba(255,255,255,.45);border-radius:12px;color:#fff;text-decoration:none}
.cc-card:hover{border-color:var(--gold)}
.cc-card.cc-form{grid-column:1/-1}   /* フォームで送る＝電話・メール・インスタの下に横いっぱい（2026-09-25 HP問い合わせ戦略 A1） */
.cc-card svg{width:24px;height:24px;margin-bottom:4px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cc-card .v{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;word-break:break-all;text-align:center}
/* grid-column:auto は必須。ページ全体用の .note{grid-column:span 6} がここにも当たり、カードの中に6列できて
   電話番号とインスタIDが左の細い列に寄っていた（本人 2026-09-18「テキストをセンター揃えに」の正体）。同じクラス名が別の枠で別の役割になる例 */
.cc-card .note{grid-column:auto;font-size:11px;color:#BACBD4;text-align:center}
.next .cc-area{margin:18px auto 0;max-width:34em;font-size:13px;line-height:1.8;color:#E1E8EC}   /* .next p の余白より強く＝左右 auto で中央（2026-09-17 PC で左に寄っていた） */
.cc-area b{display:block;font-family:"Zen Maru Gothic",sans-serif;color:var(--gold);letter-spacing:.12em}
.cc-area span{display:inline-block}

footer{text-align:center;padding:30px 0 0;font-size:12px;color:var(--sub)}
footer a{color:var(--sub);margin-right:1em}

/* 幅 */
@media (min-width:768px){
  .top{position:sticky;top:10px;z-index:30;width:calc(100% - 28px);max-width:732px;margin:10px auto 0}   /* PCも上に貼り付けたまま（本人 2026-09-21「スクロールしても固定で」）＋上に10pxの余白 */   /* 上の空きも初期値（本人 2026-09-21） */   /* 横幅はHERO（本文の列）と同じ＝本人 2026-09-21「メニューの横幅は、HEROの横幅と統一して」 */   /* 貼り付けるのはスマホだけ（メニューが最初から全部見えているPCでは不要） */
  [id]{scroll-margin-top:78px}   /* 貼り付いたヘッダーの下に隠れないように */
  .top .logo{margin:0}
  .gnav{display:flex !important;position:static;inset:auto;flex-direction:row;justify-content:flex-end;gap:6px;margin-left:auto;margin-top:0;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
  .gnav a{padding:5px 12px;font-size:12px;border-radius:999px;text-align:left}
  .top.is-slim{transform:translateY(calc(-100% - 20px))}   /* PCも下スクロールで消え、上スクロールで戻る（本人 2026-09-21）＝上の余白10pxと影5pxぶん余分に逃がす */
  /* P06 コマ風のヘッダー（本人 2026-09-21「P06を試してみて」）＝藍の枠＋右下の影。相談するだけ金 */
  .top{border:2.5px solid var(--ai);border-radius:12px;background:#fff;box-shadow:5px 5px 0 var(--ai);padding:11px 16px}
  .gnav a:last-child{background:var(--gold);color:#fff}
  .gnav a:last-child[aria-current="page"]{background:var(--ai);color:#fff}
  /* メニューの大きさを整える（本人 2026-09-21）＝ロゴの文字22pxに対してピルが32pxで重かった。
     ピル29px・字12.5px・間7px・ロゴ112pxで、帯の中の重さをそろえる */
  .top{padding:12px 18px;gap:8px 12px}
  .top .logo img{width:112px}
  .gnav{gap:7px}
  .gnav a{padding:6px 14px;font-size:12.5px;line-height:1.35}
  .page{max-width:760px}
  .plan{grid-column:span 2}
  .plan.plan-wide{grid-column:span 6}   /* 1枚しかない料金カードは幅いっぱい（本人 2026-09-20） */
  .plan .pprice{font-size:30px}
  .cc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1026px){
  /* 白い面は body に1本の帯として敷く（本人 2026-09-21「背景に隙間がある」）＝
     ヘッダーと本文で別々に白を敷くと、境目に細い線が出るため。帯は画面の中央に1080px */
  body{background:var(--light);background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;
    background-size:1080px 100%;background-position:top center}
  .top::before{display:none}
  .top{width:calc(100% - 64px);max-width:1016px;padding:12px 24px}   /* 帯の高さは元の58px（本人 2026-09-21） */
  .page{max-width:1080px;background:transparent;padding:20px 32px 48px;box-shadow:0 30px 80px rgba(25,60,82,.08)}   /* 白はbodyの帯が敷く。ここで白と1pxの縁を足すと、ヘッダーとの境に線が出る（本人 2026-09-21） */
  .grid{gap:16px}
  .plan .pprice{font-size:40px}
  .step{grid-column:span 2}
  .step.last{grid-column:span 6}
  .koma.work{grid-column:span 1}
  .can{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}

/* 流れを横1列に（本人 2026-09-17「制作の流れ を横1列に」）：続いている番号コマを .steps で包む。
   PC＝1段に全部並べる／スマホ・タブレット＝1段のまま横にすべらせて見る（コマの影が切れないよう右と下に余白） */
.steps{grid-column:span 6;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,70%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 8px 12px 2px;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
/* 進み具合（点と 01/06）＝JSが後から足す。何個あるか・いまどこかを出す（本人 2026-09-20 改3） */
.steps-nav{grid-column:span 6;display:flex;align-items:center;justify-content:center;gap:7px;margin:-6px 0 4px}
.steps-nav i{display:block;width:7px;height:7px;border-radius:50%;background:var(--line);transition:width .2s ease,background .2s ease}
.steps-nav i.on{width:20px;border-radius:999px;background:var(--gold)}
.steps-nav b{margin-left:8px;font-family:"Jost",sans-serif;font-weight:600;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.grid .steps > .koma.step{grid-column:auto;grid-row:auto;scroll-snap-align:start}
@media (min-width:768px){.steps{grid-auto-columns:minmax(220px,46%)}}
@media (min-width:1026px){
  /* PCは横1列（本人 2026-09-20）。2026-09-20 に一度 4列/3列の折り返しにしたが、
     説明の文を17〜25字に短くしたので6つ並べても窮屈でなくなり、1列に戻した */
  .steps{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;
    overflow-x:visible;padding:0 6px 6px 0}
  .steps-nav{display:none}   /* PCは全部見えているので進み具合は出さない */
}

/* 送り（前へ／次へ）の矢印。文字だと字の左右の余白で円の中心からずれるので線で描く（本人 2026-09-20） */
.lb-ar{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* スマホの下のタブバー（本人 2026-09-20・JR東日本の採用サイトを参考に）。
   4ページ＋右端に「相談する」。PCはヘッダーのメニューがあるので出さない。
   全画面メニュー(.gnav z-index:20)より下に置く＝開いている間は隠れる */
.tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:15;
  display:grid;grid-template-columns:repeat(5,1fr) 1.25fr;background:#fff;
  border:2px solid var(--ai);border-radius:20px;overflow:hidden;
  box-shadow:none}   /* 影なし・枠2px＝案S13（本人 2026-09-21「S13にして」）＝浮かせず軽く見せる。角丸 12→20px（本人 2026-09-25「スマホ版のメニューの角をもう少し丸めに」） */
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:56px;padding:7px 2px 8px;text-decoration:none;color:var(--ai)}
.tabbar b{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:10px;line-height:1.2;
  letter-spacing:.01em;white-space:nowrap}
.tb-ic{display:block;height:22px}
.tabbar svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tabbar .gd{fill:var(--gold);stroke:none}
.tabbar .gs{stroke:var(--gold)}
/* いまいるページ＝薄藍の地＋上に金の線 */
.tabbar a[aria-current="page"]{background:var(--light)}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold)}
/* 右端は相談の入口（本人 2026-09-25「T08 白地に金の枠で 吹き出しのなかは … に」＝/ui/soudan の T08＋T14）。
   白い地の中に、金の枠の角丸ボタン。中の吹き出しは「…」で最後の点だけ金＝トップの会話の「入力中…」と同じ形 */
.tabbar .tb-cta{background:#fff;color:var(--ai);padding:5px}
.tb-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:100%;
  border:2px solid var(--gold);border-radius:14px;background:#fff;transition:background .15s ease}
.tabbar .tb-dt{fill:currentColor;stroke:none}
/* お問い合わせのページにいるとき＝ボタンを金で塗る（金の点は藍に）。上の金の線は出さない */
.tabbar .tb-cta[aria-current="page"]{background:#fff}
.tabbar .tb-cta[aria-current="page"]::before{display:none}
.tabbar .tb-cta[aria-current="page"] .tb-pill{background:var(--gold)}
.tabbar .tb-cta[aria-current="page"] .gd{fill:var(--ai)}
/* 押している間（スマホは指を離すまで）。端末ごとの灰色の反転はやめて、自分で色を決める */
.tabbar a{-webkit-tap-highlight-color:transparent}
.tabbar a:active{background:var(--light)}
.tabbar .tb-cta:active{background:#fff}
.tabbar .tb-cta:active .tb-pill{background:rgba(186,153,62,.2)}
body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}   /* バー56px＋枠5px＋浮かせた10px＋下の余白 */
@media (min-width:768px){.tabbar{display:none}body{padding-bottom:0}}

/* ===== parts/about.css ===== */
/* about（Yoraku について）だけの部品。頭は .about- */

/* 章の札（h2 を札の見た目で。about は章が大きいので少し強く） */
.grid > .about-ep{margin:26px 4px 4px;font-size:15px;color:var(--ai);letter-spacing:.1em}

/* 代表あいさつ：写真のコマ＋あいさつのコマ */
.about-ph{grid-column:span 6;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;position:relative}
.about-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%}
/* 趣味は写真の上に白文字で重ねる（本人 2026-09-18「白テキストで写真の上に」）。
   写真の明るさに関係なく読めるよう、下から暗くするぼかしを敷く（文字に影だけだと明るい写真で沈む） */
.about-hobby{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;padding:38px 12px 12px;border-top:0;font-size:12px;line-height:1.5;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);background:linear-gradient(to top,rgba(10,26,36,.72),rgba(10,26,36,.42) 45%,transparent)}
.about-hobby b{font-family:"Zen Maru Gothic",sans-serif;font-size:11px;color:#fff;background:var(--gold);border-radius:999px;padding:0 10px;line-height:1.8;text-shadow:none}
.about-hello{grid-column:span 6;padding:26px 20px 30px}
.about-hello p{margin:0 0 12px;font-family:"Zen Maru Gothic",sans-serif;font-weight:500;line-height:1.95}   /* 書体は吹き出し「ホームページを、作りたい！」と同じ（本人 2026-09-25）。長い文なので太さは500 */
/* あいさつの吹き出し＝写真の中、赤ちゃんの下あたり（趣味の帯の上）。しっぽは上向き（本人 2026-09-28） */
.about-greet{position:absolute;left:50%;bottom:62px;z-index:2;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);margin:0!important;text-align:center}
.about-greet .fuki{font-size:clamp(11.2px,3.2vw,14.4px);padding:10px 16px;box-shadow:0 4px 12px rgba(10,26,36,.28)}   /* さらに20%小さく（本人 2026-09-18・2026-09-28） */
.about-greet .fuki::after{top:-8px;bottom:auto;left:calc(50% - 7px);right:auto;border:0;background:var(--ai)}
.about-say{margin:14px 0 0!important}   /* 結びの一言＝ほかの段落と同じ見た目・左揃え（本人 2026-09-17） */

/* 物語の見出しのコマ */
.about-title{text-align:center;padding:40px 20px 36px;margin-top:26px}
.about-title h2{font-size:clamp(24px,6.4vw,32px);font-weight:900;letter-spacing:.1em}

/* 場面のコマ（番号札＋見出し＋本文） */
.about-scene{padding:34px 20px 22px}
.about-scene h3{font-size:18px;line-height:1.5;margin:0 0 12px}
.about-scene p{margin:0 0 10px;font-size:14px;line-height:1.9}
.about-scene p:last-child{margin-bottom:0}
.about-q{margin-bottom:22px!important}
.about-q .fuki{font-size:17px;padding:10px 18px}
.about-don{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;color:var(--ai);font-size:16px!important;line-height:1.7!important;padding-top:4px}
.about-think{border-left:3px solid var(--gold);padding-left:12px;color:var(--ai);font-weight:500}

/* 写真のコマ（キャプションは下の帯） */
.about-fig{margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.about-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about-fig.tall img{aspect-ratio:auto;max-height:520px;object-fit:contain;background:var(--light)}
.about-fig figcaption{border-top:2.5px solid var(--ai);padding:8px 12px 9px;font-size:12px;line-height:1.6;color:var(--soft)}

/* 幕のコマ（藍の地・金の札） */
.about-act{text-align:center;padding:30px 20px 32px;background:var(--ai);border-color:var(--ai);box-shadow:5px 5px 0 var(--gold);margin:14px 0 4px}
.about-act-label{display:inline-block;margin:0 0 8px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--ai);background:#fff;border-radius:999px;padding:1px 14px}
.about-act h3{color:#fff;font-size:clamp(22px,6vw,28px);font-weight:900;letter-spacing:.1em;line-height:1.5}

/* おわりのコマ */
.about-end{margin-top:20px;padding-top:16px;border-top:2px dotted var(--line)}
.about-sign{margin:0 0 4px!important;text-align:right;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--ai)}
.about-end .estimate{margin:10px 0 0}

/* 屋号の由来（3枚） */
.about-oc{grid-column:span 6;padding:34px 20px 20px;display:flex;flex-direction:column}
.about-oc p{margin:0 0 10px;font-size:14px;line-height:1.9}
.about-oc .about-oc-label{margin:0 0 10px;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:20px;color:var(--ai);letter-spacing:.08em}
.about-oc-icon{margin-top:auto;padding-top:8px;text-align:right;color:var(--ai)}
.about-oc-icon svg{height:34px;width:auto;display:inline-block}
.about-glyphs{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:19px!important;color:var(--ai);letter-spacing:.04em}
.about-glyphs .ac{color:var(--gold)}

/* ロゴ：シンボル＋見出し */
.about-logo{display:grid;justify-items:center;gap:14px;text-align:center;padding:30px 20px 28px;margin-top:26px}
.about-mark{margin:0;cursor:pointer}
.about-mark img{height:120px;width:auto}
.about-logo h2{font-size:clamp(20px,5.6vw,26px)}

/* モチーフの絵のコマ（押すと鳴る） */
.about-motif-fig{margin:0;padding:18px;display:grid;place-items:center;cursor:pointer;background:#fff}
.about-motif-fig img{width:100%;max-width:300px;aspect-ratio:1;object-fit:contain}
.about-motif-fig.photo{padding:0;overflow:hidden}
.about-motif-fig.photo img{max-width:none;height:100%;object-fit:cover}
.about-bell:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.about-bell.is-ringing img{animation:about-ring .7s ease-in-out}
@keyframes about-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}85%{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.about-bell.is-ringing img{animation:none}}

/* 事業情報 */
.about-info{padding:24px 20px 22px}
.about-info dl{margin:0 auto;max-width:640px}
.about-info dl div:last-child{border-bottom:0}   /* 見出しをカードの外に出したので、上と下の点線は外す（2026-09-27） */
.about-info dl div{display:grid;grid-template-columns:6em minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:2px dotted var(--line)}
.about-info dt{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;color:var(--ai)}
.about-info dd{margin:0;font-size:14px;line-height:1.7;word-break:break-all}
.about-info dd a{color:inherit}

@media (min-width:768px){
  .about-ph{grid-column:span 2}
  .about-ph img{aspect-ratio:auto;flex:1 1 0;height:0;min-height:300px}
  .about-hello{grid-column:span 4}
  .about-scene.wide{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:0 28px;align-items:start}
  .about-scene.wide h3{font-size:22px;margin:0}
  .about-fig img{aspect-ratio:auto;flex:1 1 0;height:0;min-height:240px}
  .about-fig.tall img{max-height:none}
  .about-oc{grid-column:span 3}
  .about-oc-wish{grid-column:span 6}
  .about-logo{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:28px;text-align:left}
  .about-mark img{height:86px}   /* 横に並べた時は見出し2行（78px）に合わせる（本人 2026-09-21「左側のシンボルが少し大きい」） */
}
@media (min-width:1026px){
  .about-oc,.about-oc-wish{grid-column:span 2}
  .about-scene h3{font-size:19px}
}

/* 物語の章（2026-09-17）：カード4枚（スマホ・タブレット2列／PC4列）＋押した章の中身をその下に */
.about-chaps{grid-column:span 6;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch;margin-top:4px}
.grid .about-chaps > .koma.about-chap-btn{grid-column:auto}
.about-chap-btn{display:flex;flex-direction:column;align-items:center;width:100%;margin:0;padding:0 8px 16px;overflow:hidden;font:inherit;color:inherit;cursor:pointer;text-align:center}
.about-chap-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.about-chap-btn[aria-expanded="true"]{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--gold);outline:3px solid var(--gold);outline-offset:-3px}
.about-chap-cover{display:block;align-self:stretch;margin:0 -8px 12px;border-bottom:2.5px solid var(--ai)}
.about-chap-cover img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.about-chap-btn .about-act-label{margin-bottom:6px}
.about-chap-btn .about-act-label{display:inline-block}
.about-chap-title{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;color:#fff;line-height:1.5;font-size:clamp(14px,3.8vw,18px);letter-spacing:.04em}
.about-chap-open{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;color:#fff}
.about-chap-open::before{content:"ひらく";border-bottom:2px solid var(--gold)}
.about-chap-open::after{content:"＋";color:var(--gold);font-size:16px}
.about-chap-btn[aria-expanded="true"] .about-chap-open::before{content:"とじる"}
.about-chap-btn[aria-expanded="true"] .about-chap-open::after{content:"−"}
.about-chap-body{grid-column:span 6;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.about-chap-body[hidden]{display:none}
@media (min-width:1026px){
  .about-chaps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .about-chap-body{gap:16px}
}

/* ロゴの3つのモチーフ：画像＋理由を1枚のカード（2026-09-17）。スマホ・タブレットは全幅、PC は3列 */
.koma.about-motif{grid-column:span 6;display:flex;flex-direction:column}
.about-motif .about-motif-fig{margin:-34px -20px 16px;padding:22px 18px 14px;border-bottom:2.5px solid var(--ai);border-radius:4px 4px 0 0;background:var(--light)}
.about-motif .about-motif-fig img{max-width:190px}
.about-motif .about-motif-fig.photo{padding:0;overflow:hidden;background:#fff}
/* 01・02 は画像そのものの地の色に合わせる＝画像が四角く貼られて見えないように（本人 2026-09-20・実測値） */
.about-motif .about-motif-fig.motif-bg-raku{background:#F9F9FA}
.about-motif .about-motif-fig.motif-bg-rei{background:#F7F2EF}
.about-motif .about-motif-fig.photo img{width:100%;max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover}
@media (min-width:768px){.koma.about-motif{grid-column:span 2}}   /* 3列（本人 2026-09-17「カードは3列に」）＝タブレットから。スマホは読める幅を優先して1列 */
/* 3つのモチーフのカードを同じ形に（本人 2026-09-17「カードの構成を統一して　与楽の鐘だけ、写真のカード高さが高い」）＝絵の枠はどれも同じ高さ */
.about-motif .about-motif-fig,.about-motif .about-motif-fig.photo{height:220px;padding:0;overflow:hidden;background:var(--light)}
.about-motif .about-motif-fig{display:block}
.about-motif .about-motif-fig img,.about-motif .about-motif-fig.photo img{display:block;width:100%;max-width:none;height:220px;padding:18px;box-sizing:border-box;aspect-ratio:auto;object-fit:contain}
.about-motif .about-motif-fig.photo img{padding:0;object-fit:cover}

/* モチーフの説明のアコーディオン（2026-09-17）：見出しを押すと開く */
.about-motif-more > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:pointer}
.about-motif-more > summary::-webkit-details-marker{display:none}
.about-motif-more > summary h3{margin:0}
.about-motif-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border:2px solid var(--ai);border-radius:50%}
.about-motif-ic::before{content:"＋";color:var(--ai);font-weight:900;font-size:14px;line-height:1}
.about-motif-more[open] .about-motif-ic::before{content:"−"}
.about-motif-more[open] > summary{margin-bottom:12px;padding-bottom:10px;border-bottom:2px dotted var(--line)}
.about-motif-more > summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* モチーフのカード：説明を開いた時に、同じ段のほかのカードまで縦に伸びないように（2026-09-17） */
.koma.about-motif{align-self:start}

/* 幕の終わりの「つぎは 第◯幕」（2026-09-19）。読み終わった所から、上に戻らず次へ行ける */
.koma.about-next{grid-column:span 6;width:100%;margin:4px 0 0;padding:12px 14px;display:flex;align-items:center;gap:14px;
  text-align:left;font:inherit;color:var(--ai);cursor:pointer;background:#fff;
  transition:transform .2s ease,box-shadow .2s ease}
.koma.about-next:hover,.koma.about-next:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--gold)}
.about-next-pic{flex:none;width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--light)}
.about-next-pic img{width:100%;height:100%;object-fit:cover;display:block}
.about-next-tx{flex:1;min-width:0;display:block}
.about-next-lead{display:block;font-size:11px;letter-spacing:.1em;color:var(--sub)}
.about-next b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em}
.about-next-title{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--soft)}
.about-next-arw{flex:none;font-size:18px;color:var(--gold)}
@media (min-width:768px){
  .about-next{padding:16px 18px;gap:18px}
  .about-next-pic{width:84px;height:84px}
  .about-next b{font-size:17px}
  .about-next-title{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.koma.about-next{transition:none}}

/* 価値観＝絵本のように（本人 2026-09-27 決定）。WHAT → WHY → HOW → VALUES に1枚ずつ絵。PC は絵と文を左右交互 */
.koma.about-phil{grid-column:span 6;display:grid;gap:34px;padding:24px 18px 30px;background:#fff}
.ph-p{display:grid;gap:12px}
.ph-p + .ph-p{padding-top:30px;border-top:1.5px dashed #D8E2E8}
.ph-pic{justify-self:center;width:100%;max-width:460px}
.ph-pic img{display:block;width:auto;max-width:100%;height:auto;max-height:320px;margin:0 auto}
.ph-tx{display:grid;gap:8px;min-width:0}
/* 見出し＝英字と日本語を同じ行・同じ色（藍）に。間は細い金の線 */
/* 見出しと本文は同じ書体・同じ大きさ（丸ゴシック 17px）。見出しだけ太字（本人 2026-09-28「見本2 書体と大きさはそろえ、見出しだけ太字 で」） */
.ph-h{margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:17px;line-height:1.6;letter-spacing:.03em;color:var(--ai)}
.ph-en{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:17px;letter-spacing:.03em}
.ph-ja{padding-left:12px;border-left:1.5px solid var(--gold)}
.ph-tx p{margin:0;font-family:"Zen Maru Gothic",sans-serif;font-weight:500;font-size:17px;line-height:1.6;letter-spacing:.03em;color:var(--ai);overflow-wrap:anywhere}
.ph-tx p + p{margin-top:6px}
.ph-tx .u{display:inline-block}
.ph-tx .ph-sub{margin-top:12px}
.av-vs{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.av-vs details{border-bottom:1.5px dotted var(--line)}.av-vs li:last-child details{border-bottom:0}
.av-vs summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 0}
.av-vs summary::-webkit-details-marker{display:none}
.av-vs summary em{font-style:normal;font-family:"Zen Maru Gothic",sans-serif;font-weight:500;font-size:17px;letter-spacing:.03em;color:var(--gold)}
.av-vs summary b{font-family:"Zen Maru Gothic",sans-serif;font-weight:500;font-size:17px;line-height:1.6;color:var(--ai)}
.av-vs summary::after{content:"＋";margin-left:auto;color:var(--gold);font-weight:700}
.av-vs details[open] summary::after{content:"−"}
.av-vs details p{margin:0;padding:0 8px 10px;font-family:"Zen Maru Gothic",sans-serif;font-weight:500;font-size:17px;line-height:1.6;color:var(--ai)}
@media(min-width:900px){
  .koma.about-phil{padding:34px 44px 40px;gap:40px}
  .ph-p{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
  .ph-rev .ph-pic{order:2}
}

/* 物語のコマ割り（本人 2026-09-27「コマワリも改善して」）。PC は1行＝6マス＝半分＋半分／3分の2＋3分の1／横いっぱい */
@media (min-width:768px){
  .about-chap-body .koma.about-s4{grid-column:span 4}
  .about-chap-body .koma.about-s2{grid-column:span 2}
  .about-chap-body .about-fig.about-s2 img{min-height:0}
}

/* ===== parts/blog.css ===== */
/* ── ブログ（2026-09-20 新設／同日 一覧を案P3に）──
   一覧＝コマ1枚の中に行を並べる。左に88pxのトーンの正方形（鈴＋番号）、右にタイトルと
   「記事の中の最初の見出し」1行。note の「タイトルが主役・1行で密度」を、コマ割りの器に入れた形。
   人が書いた記事は無印。AIが書いたものだけ .by-ai で明示する（本人 2026-09-20） */

/* 固定の束と流れる束が両方あるときだけ出る見出し（片方だけなら出ない） */
.blog-ep{grid-column:span 6;margin:18px 4px 2px}
.blog-ep:first-of-type{margin-top:6px}

/* 一覧＝カードの並び。列はサイトの既存の並び（実績の帯）と同じ＝スマホ2列・768pxから4列 */
.blog-list{grid-column:span 6;min-width:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.post-row{display:block;text-align:left;text-decoration:none;color:inherit;overflow:hidden;
  background:#fff;border:2.5px solid var(--ai);border-radius:10px;box-shadow:5px 5px 0 var(--ai);
  transition:transform .2s ease,box-shadow .2s ease}
.post-row:hover,.post-row:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--gold)}

/* サムネは 16:9（YouTube と同じ）。地はトーン＝漫画のコマが入れ子になっている形 */
.post-th{display:grid;place-items:center;position:relative;width:100%;aspect-ratio:16/9;
  border-bottom:2.5px solid var(--ai);
  background:var(--light) radial-gradient(var(--gold) 1px,transparent 1.2px) 0 0/9px 9px}
.post-th img{display:block;width:26px;height:33px;object-fit:contain;position:relative}
/* 記事の絵があるときは枠いっぱいに敷く（無い記事は鈴のまま） */
.post-th.is-pic{background:#fff}
.post-th.is-pic img{width:100%;height:100%;object-fit:cover}
/* 番号は右下（YouTubeの再生時間と同じ位置） */
.post-th::after{content:attr(data-n);position:absolute;right:5px;bottom:4px;
  padding:0 5px;border-radius:3px;background:rgba(25,60,82,.82);
  font-family:"Jost",sans-serif;font-weight:600;font-size:11px;line-height:1.7;color:#fff}

.post-tx{display:block;padding:11px 12px 12px;min-width:0}
.post-tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13.5px;line-height:1.5;
  color:var(--ai);word-break:keep-all;overflow-wrap:anywhere}
.post-lead{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:6px;font-size:11.5px;line-height:1.6;color:var(--sub)}
.by{display:inline-block;margin-top:7px;padding:0 8px;border-radius:999px;
  font-size:10.5px;letter-spacing:.02em;line-height:1.8}
.by-ai{border:1.5px solid var(--gold);color:var(--gold-deep,#8A6D1E);background:#fff}

/* 記事 */
.post-head h1{word-break:keep-all;overflow-wrap:anywhere}
.post-head .post-meta{margin-top:12px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;
  font-family:"Jost",sans-serif;font-size:12px;letter-spacing:.06em;color:var(--sub)}
.post-meta .by{margin-top:0;font-family:"Noto Sans JP",sans-serif}
.koma.post{grid-column:span 6}
.post-lead,.post .post-lead{}
.post > .post-lead{display:block;-webkit-line-clamp:none;margin:0 0 20px;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:500;font-size:15.5px;line-height:1.95;color:var(--ai)}
/* 見出し＝番号つきの札（2026-09-24 読みやすさの改善）。番号はCSSが数えるので本文に書かない */
.post{counter-reset:h2}
.post h2{position:relative;text-align:left;margin:38px 0 12px;padding:0 0 0 46px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:17px;line-height:1.55;color:var(--ai);border-left:0;
  word-break:keep-all;overflow-wrap:anywhere;counter-increment:h2}
.post h2::before{content:counter(h2,decimal-leading-zero);position:absolute;left:0;top:0;
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--light);border:2px solid var(--ai);
  font-family:"Jost",sans-serif;font-weight:600;font-size:13px;color:var(--ai)}
.post h2 + p{margin-top:0}
.post p{margin:0 0 18px;font-size:15px;line-height:2.0;letter-spacing:.01em;color:#2E4A5A}
.post p:last-child{margin-bottom:0}
.post b{font-weight:700;color:var(--ai)}
/* 関連記事への1行（記事を分けたときの橋） */
.post-next{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.post-next a{color:var(--ai);font-weight:700;text-decoration:none;border-bottom:2px solid var(--gold)}

/* 記事の下の行き先 */
.koma.post-nav{grid-column:span 6;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between}
.post-nav a{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13.5px;
  color:var(--ai);text-decoration:none;border-bottom:2px solid transparent}
.post-nav a:hover,.post-nav a:focus-visible{border-bottom-color:var(--gold)}

@media (min-width:768px){
  .blog-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .post-th img{width:32px;height:40px}
  .post-th.is-pic img{width:100%;height:100%}
  .post-tx{padding:13px 14px 14px}
  .post-tx b{font-size:14.5px}
  .post-lead{font-size:12px}
  .post h2{font-size:18px;margin-top:36px}
  .post p{font-size:15px}
  .post > .post-lead{font-size:17px}
}

/* 記事の部品（2026-09-22「電波はあるのにネットがつながらない原因」で追加）＝ .post の中だけで使う */
.post-sum{margin:22px 0;padding:16px 18px 6px;background:#fff;border:2.5px solid var(--ai);border-radius:10px;box-shadow:4px 4px 0 var(--gold)}
.post .post-sum-t,.post .post-toc-t,.post .post-board-t,.post .post-refs-t{margin:0 0 6px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:14px;color:var(--ai)}
.post-sum ul,.post-ul{margin:0 0 14px;padding-left:1.2em}
.post-sum li,.post-ul li{margin-bottom:8px;font-size:14.5px;line-height:1.85}
.post-toc{margin:0 0 8px;padding:14px 18px;background:var(--light);border-radius:10px}
.post-toc ol{margin:0;padding-left:1.5em;font-size:14px;line-height:1.95}
.post-toc a,.post-refs a{color:var(--ai);text-underline-offset:.2em;text-decoration-color:var(--gold)}
.post h2[id]{scroll-margin-top:90px}
.post-board{margin:14px 0 18px;background:#fff;border:2.5px solid var(--ai);border-radius:10px;overflow:hidden}
.post-board-stripe{height:12px;border-bottom:2.5px solid var(--ai);background:repeating-linear-gradient(-45deg,var(--ai) 0 9px,var(--gold) 9px 18px)}
.post-board-body{padding:14px 16px 12px}
.post .post-board-t{color:var(--sub);font-size:13px}
.post-board ul{list-style:none;margin:0;padding:0}
.post-board li{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:14.5px;color:var(--ai)}
.post-board li:last-child{border-bottom:0}
.post-board li span:last-child{margin-left:auto}
.post-board .is-ok{color:#2E7D5B}
.post-board .is-ng{color:#9A4A0A}
.post .post-board-foot{margin:8px 0 0;padding-top:10px;border-top:2.5px solid var(--ai);font-weight:700;color:var(--ai)}
.post-fig{margin:20px 0 24px}
.post-fig svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;border:1px solid var(--line);border-radius:12px}
.post-fig figcaption{margin-top:8px;font-size:12.5px;line-height:1.7;color:var(--sub);text-align:center}
.post .post-note{margin:20px 0;padding:12px 14px;background:var(--light);border-radius:8px;font-size:13px;line-height:1.8;color:var(--sub)}
.post h3{margin:0 0 4px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;line-height:1.6;color:var(--ai)}
.post-refs{margin-top:28px;padding-top:14px;border-top:1px solid var(--line)}
.post-refs ul{margin:0;padding-left:1.1em}
.post-refs li,.post-refs p{font-size:13px;line-height:1.8;color:var(--sub)}
.post-refs li{margin-bottom:6px}
@media (min-width:768px){
  .post-sum li,.post-ul li,.post-board li{font-size:15px}
  .post h3{font-size:16px}
}

/* 記事の読みやすさ（2026-09-24）＝目次カード・ふりがな・読了目安・読み進みバー */
.post-toc{margin:0 0 10px;padding:16px 18px;background:#fff;border:2px solid var(--ai);border-radius:10px}
.post-toc ol{margin:0;padding-left:1.4em;font-size:14px;line-height:2.0}
.post-toc li{margin-bottom:2px}
.post-toc a{text-decoration:none;border-bottom:1.5px solid var(--line)}
.post-toc a:hover,.post-toc a:focus-visible{border-bottom-color:var(--gold)}
.post ruby rt{font-size:.5em;color:var(--sub);letter-spacing:0}
.post-min{display:inline-flex;align-items:center;gap:4px;padding:0 9px;border-radius:999px;background:var(--light);
  font-family:"Noto Sans JP",sans-serif;font-size:11px;line-height:1.9;letter-spacing:0;color:var(--ai)}
.post b{color:var(--ai)}
.post-ul li b,.post-sum li b{display:block;margin-bottom:1px;font-family:"Zen Maru Gothic",sans-serif;font-size:14px;color:var(--ai)}
.post-bar{position:fixed;left:0;top:0;height:3px;width:0;background:var(--gold);z-index:40;transition:width .1s linear}
@media (prefers-reduced-motion:reduce){.post-bar{transition:none}}
@media (min-width:768px){
  .post h2{font-size:19.5px;margin-top:44px;padding-left:52px}
  .post h2::before{width:38px;height:38px;font-size:14px}
  .post p{font-size:16px;line-height:2.05}
  .post-toc ol{font-size:15px}
  .post-toc{padding:20px 24px}
}

/* 並べ替えとジャンル（本人 2026-09-24「01-04は固定、それ以外は更新順・新しい順・ジャンルごと」） */
.blog-sort,.blog-filter{grid-column:span 6;display:flex;flex-wrap:wrap;gap:6px;margin:0 4px 6px}
.blog-filter{margin-bottom:10px}
.blog-sort button,.blog-filter button{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12px;
  line-height:1.7;padding:3px 12px;border:2px solid var(--ai);border-radius:999px;background:#fff;color:var(--ai);cursor:pointer}
.blog-filter button{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:11.5px;border-width:1.5px;color:var(--sub);border-color:var(--line)}
.blog-sort button.is-on{background:var(--ai);color:#fff}
.blog-filter button.is-on{background:var(--light);color:var(--ai);border-color:var(--ai)}
.blog-sort button:hover,.blog-filter button:hover{border-color:var(--gold)}
.post-genre{display:inline-block;margin-top:7px;margin-right:5px;padding:0 8px;border-radius:999px;
  background:var(--light);font-size:10.5px;line-height:1.8;color:var(--ai)}
.post-row[hidden]{display:none}
@media (min-width:768px){
  .blog-sort button{font-size:13px;padding:4px 14px}
  .blog-filter button{font-size:12.5px}
}

/* 手順の記事の部品（2026-09-24）＝コードの塊・注意書き・比較表 */
.post pre{margin:0 0 18px;padding:14px 16px;border-radius:10px;background:#0E2230;color:#EDF3F6;
  overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:12.5px;line-height:1.85}
.post pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:inherit;background:none;padding:0}
.post :not(pre) > code{padding:1px 6px;border-radius:5px;background:var(--light);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;color:var(--ai);word-break:break-all}
.post-warn{margin:0 0 18px;padding:13px 15px;border-radius:10px;background:#F8F2E3;border-left:4px solid var(--gold)}
.post-warn b{display:block;margin-bottom:4px;font-family:"Zen Maru Gothic",sans-serif;font-size:14px;color:var(--ai)}
.post-warn p{margin:0;font-size:14px;line-height:1.9}
.post-warn p + p{margin-top:8px}
.post-warn pre{margin:10px 0 0}
.post-tablewrap{margin:0 0 18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.post table{border-collapse:collapse;width:100%;min-width:420px;font-size:13.5px}
.post th,.post td{padding:9px 10px;border:1px solid var(--line);text-align:left;line-height:1.75;vertical-align:top}
.post th{background:var(--light);font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--ai);white-space:nowrap}
.post tbody th{white-space:normal}
@media (min-width:768px){
  .post pre{font-size:13.5px}
  .post table{font-size:14.5px}
  .post-warn p{font-size:15px}
}

/* 本文の挿絵（2026-09-24 本人「イラストを要所ごとに加えて」）＝01〜04と同じ線画・文字は入れない */
.post-ill{margin:24px 0 26px;text-align:center}
.post-ill svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.post-ill figcaption{margin-top:6px;font-size:12.5px;line-height:1.7;color:var(--sub)}
@media (min-width:768px){.post-ill svg{max-width:460px}}
/* 見出しごとの挿絵（写真の絵）＝PCは小さめに（本人 2026-09-27「PC版は、記事の中の表紙以外のイラストは小さめに」）。表紙（.post-hero）は大きいまま・スマホは列の幅いっぱい */
.post-ill img{display:block;width:100%;height:auto;margin:0 auto}
@media (min-width:768px){.post-ill img{max-width:400px}}

/* よくある質問＝1問ずつ開け閉め（本人 2026-09-25「コラムのよくある質問は全てアコーディオンに」）。/services/hp のよくある質問と同じ見た目 */
details.post-qa{margin:0 0 10px;border:2.5px solid var(--ai);border-radius:8px;background:#fff}
details.post-qa[open]{box-shadow:3px 3px 0 var(--gold)}
details.post-qa summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
details.post-qa summary::-webkit-details-marker{display:none}
details.post-qa summary::after{content:"+";font:900 22px/1 "Zen Maru Gothic",sans-serif;color:var(--gold)}
details.post-qa[open] summary::after{content:"−"}
.post details.post-qa summary h3{margin:0;padding:0;border:0;font-size:15px;line-height:1.6}
.post details.post-qa summary h3::before{content:none}
.post-qa-a{padding:12px 14px 14px;border-top:2px dotted var(--line)}
.post-qa-a p{margin:0}
@media (hover:hover){details.post-qa summary:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}}
/* 3つの頼み先の比べ（/blog/mobara-hp・2026-09-25）＝項目ごとに3行。細い画面で表の3列目が隠れないように */
.post-cmp{display:grid;gap:10px;margin:0 0 14px}
.post-cmp-row{display:grid;gap:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff}
.post-cmp-row b{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:14px;color:var(--ai)}
.post-cmp-row span{display:block;font-size:13.5px;line-height:1.7}
.post-cmp-row span i{display:inline-block;margin-right:6px;padding:0 7px;border-radius:999px;background:var(--light);font-style:normal;font-size:11.5px;font-weight:700;color:var(--soft)}
.post-cmp-row span.is-me i{background:var(--ai);color:#fff}
@media (min-width:640px){
  .post-cmp-row{grid-template-columns:5em repeat(3,minmax(0,1fr));align-items:start}
  .post-cmp-row span{padding-right:6px}
}

/* 開いた直後を読みやすく（2026-09-27 本人「最初文字ばかりが見えて、読みずらい。読むハードルが高い」）
   ①題名は主題＋小さめの副題 ②記事の絵を最初に ③結論は番号つきのポイント ④目次はたたむ */
.post-head h1 .post-sub{display:block;margin-top:10px;font-size:.6em;line-height:1.6;letter-spacing:.02em}
.post-hero{position:relative;z-index:1;margin:20px auto 0;width:min(100%,360px)}
.post-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ai);border-radius:12px;background:#fff}
/* PC は題名の右に絵（本人 2026-09-27「タイトルの中に入れるなどしてバランスを整えて」） */
@media (min-width:900px){
  .post-head:has(.post-hero){display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:40px;align-items:center;text-align:left;padding:40px 44px}
  .post-head:has(.post-hero) > :not(.lines):not(.post-hero){grid-column:1}
  .post-head:has(.post-hero) .post-hero{grid-column:2;grid-row:1 / span 3;margin:0;width:100%}
  .post-head:has(.post-hero) .post-meta{justify-content:flex-start}
}
.post-sum ul{list-style:none;padding-left:0;counter-reset:pt}
.post-sum li{position:relative;padding-left:36px;counter-increment:pt}
.post-sum li::before{content:counter(pt);position:absolute;left:0;top:2px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;
  background:var(--ai);color:#fff;font-family:"Jost",sans-serif;font-weight:600;font-size:12.5px;line-height:1}
.post-sum li + li{padding-top:10px;border-top:1.5px dotted var(--line)}
.post-sum li + li::before{top:12px}
.post .post-toc{padding:0}
.post .post-toc summary{list-style:none;display:flex;align-items:center;gap:10px;margin:0;padding:13px 18px;cursor:pointer}
.post .post-toc summary::-webkit-details-marker{display:none}
.post .post-toc summary::after{content:"＋";margin-left:auto;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--gold)}
.post .post-toc details[open] summary::after{content:"−"}
.post .post-toc details[open] summary{border-bottom:1.5px dotted var(--line)}
.post-toc-n{font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:12px;color:var(--sub)}
.post .post-toc ol{padding:10px 18px 14px calc(18px + 1.4em)}
@media (hover:hover){.post .post-toc summary:hover::after{transform:scale(1.2)}}
@media (min-width:768px){
  .post .post-toc summary{padding:15px 22px}
  .post .post-toc ol{padding:12px 22px 16px calc(22px + 1.4em)}
}

/* ===== parts/contact.css ===== */
/* お問い合わせ（contact）｜送信フォームのコマ。estimate/hp の最後のフォームもこの .contact-form を使う。
   /js/form-ajax.js が送信後に差し込む .form-done（完了）・.form-err（失敗）の見た目もここ */
.contact-form form.inquiry{max-width:640px;margin:0 auto}
.contact-form .frow{margin:0 0 18px}
.contact-form .frow label{display:block;margin:0 0 6px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:14px;line-height:1.6;color:var(--ai);letter-spacing:.06em}
.contact-form .req{display:inline-block;margin-left:8px;padding:0 9px;border-radius:999px;background:var(--gold);color:#fff;font-size:10.5px;line-height:1.8;letter-spacing:.1em;vertical-align:2px}
.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin:0;padding:11px 14px;font-family:"Noto Sans JP",sans-serif;font-size:16px;line-height:1.6;color:var(--ai);background:#fff;border:2px solid var(--ai);border-radius:6px;box-shadow:3px 3px 0 var(--light)}
.contact-form select{-webkit-appearance:none;appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23193C52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px}
.contact-form textarea{min-height:180px;resize:vertical}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;box-shadow:3px 3px 0 var(--gold)}
.contact-form .hp-field{display:none}
.contact-form .fsubmit{margin-top:26px;text-align:center}
.contact-form .fsubmit button{min-height:54px;padding:0 52px;border:2px solid var(--ai);border-radius:999px;background:var(--ai);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16px;letter-spacing:.14em;cursor:pointer;box-shadow:3px 3px 0 var(--gold)}
.contact-form .fsubmit button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--gold)}
.contact-form .fsubmit button:disabled{opacity:.6;cursor:default;transform:none}
.contact-form .form-done{max-width:640px;margin:0 auto;padding:18px 0 8px;text-align:center}
.contact-form .fd-mark{width:56px;height:56px;margin:0 auto 14px;border:2.5px solid var(--ai);border-radius:50%;background:var(--gold);color:#fff;font-size:26px;line-height:51px;box-shadow:3px 3px 0 var(--ai)}
.contact-form .fd-title{margin:0 0 10px;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:22px;color:var(--ai);letter-spacing:.06em}
.contact-form .fd-msg{margin:0;font-size:14px;line-height:2}

/* /contact の短いフォーム（2026-09-25）＝見出しと一言を中央に */
#form > .estimate-label,#form > h2{text-align:center}
#form .form-lead{max-width:640px;margin:8px auto 24px;text-align:center;font-size:14px;line-height:1.9}

/* ===== parts/estimate.css ===== */
/* 自動見積もり（estimate/hp）｜質問1問＝1コマ（藍の吹き出しで問う）・選択肢の札・結果の大きな金額。
   送信フォームの見た目は parts/contact.css の .contact-form */

/* 1問ずつ表示（ページ内スクリプトが付け外しする） */
.estimate-hidden{display:none}
.estimate-reveal{animation:estimate-in .45s ease both}
@keyframes estimate-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.estimate-reveal{animation:none}}

/* 質問 */
.estimate-q{padding:30px 18px 22px}
.koma > h2.estimate-qt{margin:0 0 26px;font-size:inherit}
.estimate-qt .fuki{font-size:18px;padding:10px 22px;letter-spacing:.06em}
.estimate-opts{display:grid;gap:12px}
@media (min-width:768px){.estimate-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1026px){.estimate-opts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.estimate-opt{position:relative}
.estimate-opt input{position:absolute;opacity:0;pointer-events:none}
.estimate-opt label{position:relative;display:block;height:100%;padding:14px 34px 13px 16px;border:2px solid var(--ai);border-radius:6px;background:#fff;cursor:pointer;line-height:1.6;box-shadow:3px 3px 0 var(--light);transition:background .15s,box-shadow .15s,transform .15s}
.estimate-opt label::after{content:"";position:absolute;top:50%;right:12px;width:14px;height:14px;margin-top:-7px;border:2px solid var(--ai);border-radius:50%;background:#fff}
.estimate-main{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16px;color:var(--ai)}
.estimate-sub{display:block;margin-top:2px;font-size:12px;color:var(--sub)}
.estimate-opt label:hover{box-shadow:3px 3px 0 var(--gold);transform:translate(-1px,-1px)}
/* 選んだカード＝薄い藍のうすがけ＋金の枠と金の丸。濃紺は質問の吹き出しだけの色にする（本人 2026-09-18「質問のカードと色が同じで区別しにくい」） */
.estimate-opt input:checked + label{background:rgba(25,60,82,.10);border-color:var(--gold);box-shadow:3px 3px 0 var(--gold)}
.estimate-opt input:checked + label::after{border-color:var(--gold);background:var(--gold)}
.estimate-opt input:focus-visible + label{outline:2px solid var(--gold);outline-offset:3px}

/* 結果（大きな金額＝ koma.css の .bigprice） */
.estimate-result{padding:28px 18px 26px}
.estimate-rlabel{margin:0 0 18px}
.estimate-rlabel .fuki{font-size:14px;letter-spacing:.2em}
.estimate-result .name{font-size:18px;font-weight:900}
.estimate-result .yen{margin:4px 0 0;font-size:clamp(40px,11.5vw,60px);line-height:1.15;letter-spacing:.01em}
.estimate-result .yen span{font-size:.4em}
.estimate-tax{font-size:12px;color:var(--sub)}
.estimate-break{max-width:440px;margin:16px auto 14px;padding:4px 14px;text-align:left;background:#fff;border:2px solid var(--ai);border-radius:6px}
.estimate-break:empty{display:none}
.estimate-break div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px;line-height:1.6;border-bottom:2px dotted var(--line)}
.estimate-break div:last-child{border-bottom:0}
.estimate-break div > span:first-child{flex:none}
.estimate-break .bv{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;color:var(--ai);text-align:right}   /* nowrap をやめた＝「含むもの」の長い文がカードから飛び出していた（本人 2026-09-18）。金額は途中に空白が無いので、折り返しても数字の途中では切れない */
.estimate-break .estimate-break-solo{justify-content:center;text-align:center;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;color:var(--ai)}   /* 「話し方」の答えはラベルなしで値だけ（本人 2026-09-18「話し方の部分は不要」） */
.estimate-note{max-width:440px;margin:0 auto;font-size:12.5px;line-height:1.9;text-align:left}
.estimate-note-center{text-align:center}   /* 決まっていない・話してみたいの案内（本人 2026-09-17「センター揃えに」） */
.estimate-note a{color:var(--ai);font-weight:700}
.estimate-result .estimate{margin-top:20px}

/* 送信フォームのコマの頭 */
.estimate-label{margin:0 0 4px;text-align:center;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--gold)}
.koma.estimate-form > h2 + p.estimate-lead{margin:10px auto 24px;max-width:34em;text-align:center;font-size:14px}

/* 選択肢の数に合わせた列数（1つだけ次の行にはみ出さないように・2026-09-18）
   -3＝3択など：768px から3列／-2＝4択：2列（2+2）／-4＝8択：768px は2列・1026px から4列（4+4） */
@media (min-width:768px){.estimate-opts.estimate-opts-3{grid-template-columns:repeat(3,minmax(0,1fr))}.estimate-opts.estimate-opts-2,.estimate-opts.estimate-opts-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1026px){.estimate-opts.estimate-opts-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 金額の代わりに「個別にお見積もり」を出すとき（動画のサブスク）：大きな数字の字では折れるので小さく */
.estimate-result .yen.estimate-yen-ask{font-size:clamp(24px,6.6vw,32px);line-height:1.4;margin-top:10px}

/* 「その他」はカード3つ分（横いっぱい）（本人 2026-09-17） */
.estimate-opts .estimate-opt-wide{grid-column:1 / -1}

/* 答えている間だけ下に空きを作る（2026-09-18）。最後の質問がページの終わりに当たって中央まで上がれないのを防ぐ。結果が出たら 0 に畳む */
.estimate-spacer{grid-column:span 6;height:0}
.estimate-spacer.is-on{height:min(46vh,380px)}

/* 複数選べる質問（HPの「どんなページが欲しいですか？」2026-09-18）：印は丸ではなく四角＋チェック＝1つだけ選ぶ質問と見分けられるように */
.estimate-hint{margin:-14px 0 18px;text-align:center;font-size:12.5px;line-height:1.7;color:var(--sub)}
@media (min-width:768px){.estimate-opts.estimate-opts-multi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1026px){.estimate-opts.estimate-opts-multi{grid-template-columns:repeat(4,minmax(0,1fr))}}
.estimate-opts-multi label::after{border-radius:3px}
.estimate-opts-multi input:checked + label::after{content:"✓";display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900;line-height:1}

/* おすすめの選択肢（2026-09-17）：金の枠と札で目立たせる */
.estimate-opt-reco label{border-color:var(--gold);border-width:3px;box-shadow:4px 4px 0 var(--gold)}
.estimate-reco{position:absolute;top:-11px;left:12px;padding:0 10px;border-radius:999px;background:var(--gold);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:11px;line-height:1.9}

/* ===== parts/privacy.css ===== */
/* privacy（プライバシーポリシー）だけの部品。頭は .privacy- ／長文なので読みやすさ優先・コマは1つ */
.privacy-doc{padding:26px 20px 30px;font-size:14px;line-height:1.95}
.privacy-doc > h2{text-align:left;font-size:17px;margin:30px 0 10px;padding:2px 0 2px 12px;border-left:4px solid var(--ai)}
.privacy-doc p{margin:0 0 10px}
.privacy-doc ul{margin:0 0 10px;padding:0 0 0 1.4em}
.privacy-doc li{margin:2px 0}
.privacy-doc li::marker{color:var(--gold)}
.privacy-doc a{color:var(--ai)}
.privacy-doc strong{color:var(--ai)}
.privacy-updated{text-align:right;font-size:12px;color:var(--sub)}
.privacy-intro{padding:0 0 18px;border-bottom:2px dotted var(--line)}
.privacy-box{padding:14px 16px;border:2px dotted var(--ai);border-radius:6px;background:var(--light)}
@media (min-width:768px){
  .privacy-doc{padding:36px 44px 40px;font-size:15px}
  .privacy-doc > h2{font-size:19px}
}
@media (min-width:1026px){
  .privacy-doc > *{max-width:760px;margin-left:auto;margin-right:auto}
  .privacy-doc > h2{margin-top:34px}
}

/* ===== parts/services-ai.css ===== */
/* services/ai：AI研修（ehon・vision と同じ種類の部品は同じ値でそろえる） */

/* 章の札の(税別) */
.ep.svcai-ep small{font-size:.9em;letter-spacing:.04em}

/* 講座（料金プランの部品＋「税別 / 時間」＋説明文） */
.svcai-tax{font-size:11px;color:var(--sub);margin:2px 0 12px}
.svcai-body{margin:0;padding-top:12px;border-top:2px dotted var(--line);text-align:left;font-size:13px;line-height:1.75}
.svcai-body strong{display:inline-block;margin-bottom:4px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:14px;line-height:1.6;color:var(--ai)}

/* 注記（※）のコマ */
.koma.svcai-notes{padding:14px 18px;box-shadow:3px 3px 0 var(--ai)}
.svcai-notes p{margin:0;font-size:12px;line-height:1.9;color:var(--sub)}

/* こんな方に（見出しを吹き出しに。お客さま＝右・白） */

/* 強み：料金の下の吹き出し（2026-09-17） */
.koma.svcai-strong{text-align:center;padding:24px 16px 28px}
.svcai-strong p{margin:0}
.svcai-strong .fuki{font-size:15px;line-height:1.7;max-width:34em}

/* ===== parts/services-ehon.css ===== */
/* services/ehon：絵本制作（vision・ai と同じ種類の部品は同じ値でそろえる） */

/* はじまりのコマ（藍の吹き出し＋開いた絵本の絵）と、その語りのコマ */
.koma.svcehon-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px 18px 18px}
.svcehon-lead{margin:0;text-align:center}
.svcehon-lead .fuki{font-size:clamp(17px,4.6vw,21px);font-weight:900;line-height:1.6;text-align:center;padding:12px 20px}
.svcehon-book{width:160px;height:auto;margin-top:6px}
.koma.svcehon-text{display:flex;align-items:center}
.svcehon-text p{margin:0;font-size:14px;line-height:1.95}

/* 料金プランの「税別 / 制作費」と、強調する項目 */
.svcehon-tax{font-size:11px;color:var(--sub);margin:2px 0 12px}
.plan dd.svcehon-accent{font-weight:700;color:var(--ai)}
.plan dd.svcehon-accent::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 2px 0;border-radius:50%;background:var(--gold);vertical-align:middle}

/* 注記（※）のコマ */
.koma.svcehon-notes{padding:14px 18px;box-shadow:3px 3px 0 var(--ai)}
.svcehon-notes p{margin:0;font-size:12px;line-height:1.9;color:var(--sub)}

/* 仕様詳細（スマホ＝行・768px〜＝3列の小さな升） */
.svcehon-sub{font-size:12px;color:var(--sub)}
.svcehon-spec{margin:14px 0 0;display:grid;border-top:2px dotted var(--line)}
.svcehon-spec div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:8px;align-items:baseline;padding:9px 0;border-bottom:2px dotted var(--line)}
.svcehon-spec dt{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--sub)}
.svcehon-spec dd{margin:0;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;line-height:1.5;color:var(--ai)}
.svcehon-spec dd small{display:block;margin-top:2px;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:11px;line-height:1.6;color:var(--sub)}

/* 理念の体系化への案内 */
.koma.svcehon-upsell > h2{font-size:18px}
.svcehon-upsell p{margin:10px 0 0;font-size:14px}
.svcehon-upsell a{color:var(--ai);font-weight:700;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}

/* 確認ポイント（時間の札がないので見出しの下をあける） */
.svcehon-step h3{margin-bottom:8px}

/* こんな方に・特徴（見出しを吹き出しに。お客さま＝右・白／Yoraku＝左・藍） */
.koma.svcehon-who{padding:22px 18px 18px}
.svcehon-who .fuki{display:block;width:fit-content;max-width:100%;margin:0 0 20px;font-size:15px;letter-spacing:.04em}
.svcehon-who .fuki.r{margin-left:auto}
.svcehon-who p{margin:0;font-size:14px}
.svcehon-aside{display:block;margin-top:8px;padding-top:8px;border-top:2px dotted var(--line);font-size:12px;color:var(--sub)}

@media (min-width:768px){
  .svcehon-spec{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:0}
  .svcehon-spec div{grid-template-columns:1fr;gap:2px;align-content:start;padding:10px 12px;border:2px solid var(--ai);border-radius:6px}
}
@media (min-width:1026px){
  .koma.step.svcehon-half{grid-column:span 3}
}

/* ===== parts/services-goods.css ===== */
/* services/goods：グッズ制作（2026-09-18 新設）。プラン名の上に丸アイコン（services-ic と同じ見た目） */
.pgoods-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border:2px solid var(--ai);border-radius:50%;background:var(--light);color:var(--ai)}
.pgoods-ic svg{width:30px;height:30px}

/* ===== parts/services-hp.css ===== */
/* services/hp だけの部品 */

/* プラン4列（本人 2026-09-17「ホームページ制作　のプランを4列にしてみて」）。スマホ1列・タブレット2列・PC4列 */
.plans-4{grid-column:span 6;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px 14px;padding-top:6px}
.grid .plans-4 > .koma.plan{grid-column:auto;display:flex;flex-direction:column}
.plans-4 .plan dl{flex:1}
@media (min-width:768px){.plans-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1026px){
  .plans-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .plans-4 .plan{padding:26px 12px 18px}
  .plans-4 .plan .pname{font-size:17px}
  .plans-4 .plan .pprice{font-size:30px}
  .plans-4 .plan .pprice span{font-size:14px}
  .plans-4 .plan dl div{grid-template-columns:4.6em minmax(0,1fr);gap:6px}
}

/* よくあるご質問：1問ずつ開く（details） */
.faq{display:grid;gap:10px;margin-top:16px}
.faq-item{border:2.5px solid var(--ai);border-radius:8px;background:#fff}
.faq-item[open]{box-shadow:3px 3px 0 var(--gold)}
.faq-item summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;line-height:1.5;color:var(--ai)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;line-height:1;color:var(--gold);font-weight:900}
.faq-item[open] summary::after{content:"−"}
.faq-q{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ai);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:13px;line-height:1}
.faq-a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0;padding:12px 14px 14px;border-top:2px dotted var(--line);font-size:14px;line-height:1.8}
.faq-a .faq-q{background:var(--gold)}


/* よくあるご質問：中身（制作の流れの横並び）が枠を押し広げないように（2026-09-17 スマホで右にはみ出していた） */
.faq{grid-template-columns:minmax(0,1fr)}
.faq-item{min-width:0}


/* おすすめのスタンダードを目立たせる（本人 2026-09-17）：金の太い枠・淡い金の地・札を大きく */
.plans-4 .plan.feature{border:3px solid var(--gold);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(var(--gold),var(--gold)) border-box;box-shadow:6px 6px 0 var(--ai)}
.plans-4 .plan.feature .pprice{color:var(--ai)}
.plans-4 .plan.feature .reco{font-size:14px;padding:4px 16px;top:-16px}
/* 1026px以上で8px上にずらしていたのをやめた＝ライト・プレミアと高さも位置もそろえる（本人 2026-09-18「スタンダードのカードの高さ、位置をライトとプレミアムと合わせて」）。目立たせるのは金の枠と札だけで足りる */

/* マウスオーバーで持ち上がる（本人 2026-09-25「マウスオーバーでUIが変わるようにしたい」→ 同日「こんな方におすすめ はマウスオーバー不要」＝プランだけ）＝サイト共通の作法（-2px 持ち上げ＋金の影）。
   マウスのある端末だけ（hover:hover）＝スマホのタップで引っかからない */
@media (hover:hover){
  /* 2026-09-25 本人「A 少し大きく」＝1.06倍・影は大きくせず色だけ金（5px のまま）＋下に「このプランで相談する →」 */
  .plans-4 .plan{transition:transform .25s ease,box-shadow .25s ease}
  .plans-4 .plan:hover{transform:scale(1.06);z-index:3;box-shadow:5px 5px 0 var(--gold)}
  .plan-cta{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
  .plans-4 .plan:hover .plan-cta,.plan-cta:focus-visible{opacity:1;transform:none}
}
/* よくあるご質問もマウスオーバーで持ち上がる（本人 2026-09-25「よくあるご質問　はマウスオーバーできるように」）＝押せる所だと分かるように。問いの文に金の下線 */
@media (hover:hover){
  .faq-item{transition:transform .2s ease,box-shadow .2s ease}
  .faq-item:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--gold)}
  .faq-item summary:hover .faq-t{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
}
@media (prefers-reduced-motion:reduce){.plans-4 .plan,.faq-item,.plan-cta{transition:none}}

/* 「このプランで相談する →」（本人 2026-09-25）。マウスのある端末だけ＝乗せると出る。スマホ（乗せる操作がない）では出さない */
.plan-cta{display:none}
@media (hover:hover){
  .plan-cta{display:block;margin:14px 0 0;padding:9px 10px;border-radius:999px;background:var(--gold);color:#fff;text-align:center;text-decoration:none;
    font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;line-height:1.4}
  .plan-cta:hover{background:var(--ai)}
}

/* プランの小さい説明は、言葉のかたまりごとに折る（細い4列で「単体よ／り」のように途中で折れていた・2026-09-25） */
.plans-4 .plan dd small span{display:inline-block}
/* ロゴ・動画の「オプション」の札（本人 2026-09-25「見せ方は統一して」） */
.plans-4 .plan dd small .opt{margin:2px 5px 2px 0;padding:0 7px;border:1.5px solid var(--gold);border-radius:999px;color:var(--ai);font-weight:700;font-size:10px;line-height:1.6}

/* 料金のプラン4枚の高さと行をそろえる（本人 2026-09-27「料金(税別)のカードの高さを整えて」）。
   ロゴ・動画の行を外したあと、説明文が1行／2行でずれ、下に空きが残っていた＝ subgrid で、名前・値段・説明・表の各行を横一列にそろえる。
   カードの中身は 名前・英字・値段・説明・表の3行・相談ボタン の8段（「おすすめ」の札は絶対配置なので段に数えない）。subgrid が効かない古いブラウザは今までどおり */
@media (min-width:768px){
  .grid .plans-4 > .koma.plan{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .plans-4 .plan dl{display:contents}
  .plans-4 .plan dl div:first-child{border-top:2px dotted var(--line)}
  .plans-4 .plan .pdesc{align-self:start}
}

/* よくあるご質問の問いを、言葉のかたまりで折る（2026-09-27 お問い合わせのFAQで「ですか？」の「か？」だけが次の行に落ちた） */
.faq-t .nb{display:inline-block}

/* ===== parts/services-logo.css ===== */
/* services/logo：小見出しと本文のコマ（セット割・注記・特徴） */
.svclogo-box h3{font-size:17px;line-height:1.5}
.svclogo-box p{margin:8px 0 0;font-size:14px}
.svclogo-box > :first-child{margin-top:0}


/* ===== parts/services-movie.css ===== */
/* services/movie：プラン形式（2026-09-17 作り直し → 2026-09-22 AI動画2プラン＋セミナー動画） */
.svcmovie-box h3{font-size:17px;line-height:1.5}
.svcmovie-box p{margin:8px 0 0;font-size:14px}
.svcmovie-box > :first-child{margin-top:0}
.svcmovie-box h3 + .rows{margin-top:6px}
.koma.svcmovie-cta{text-align:center}
.svcmovie-cta p{margin:0 0 14px;font-size:14px}
.svcmovie-cta .estimate{max-width:420px;margin:0 auto}
.koma.svcmovie-work{margin:0;padding:0;overflow:hidden}
.svcmovie-work video{display:block;width:100%;aspect-ratio:16/9;background:#0b1a24;object-fit:cover}
.svcmovie-work figcaption{padding:12px 16px 14px;border-top:2.5px solid var(--ai)}
.svcmovie-work b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:16px;color:var(--ai)}
.svcmovie-work small{display:block;font-size:12px;color:var(--sub)}
.svcmovie-step h3{margin-bottom:6px}
.svcmovie-sns{grid-column:span 6;text-align:center}
@media (min-width:1026px){.koma.svcmovie-work{grid-column:2 / span 4}}

/* ===== parts/services-photo-movie.css ===== */
/* services/photo-movie：写真撮影・動画制作へ進む2枚のコマ（スマホでも2つ並べる） */
.koma.svcphoto-movie-card{grid-column:span 3;display:grid;justify-items:center;align-content:center;gap:8px;padding:28px 10px 22px;text-align:center;text-decoration:none;color:var(--ai);transition:box-shadow .15s}
.koma.svcphoto-movie-card:hover{box-shadow:5px 5px 0 var(--gold)}
.svcphoto-movie-ic{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;border:2.5px solid var(--ai);background:var(--light)}
.svcphoto-movie-ic svg{width:42px;height:42px;fill:none;stroke:var(--ai);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svcphoto-movie-ct{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:19px;line-height:1.4;letter-spacing:.06em}
.svcphoto-movie-go{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--ai);border-bottom:2px dotted var(--gold);padding:0 2px}
@media (min-width:768px){
  .koma.svcphoto-movie-card{padding:40px 16px 30px;gap:10px}
  .svcphoto-movie-ic{width:96px;height:96px}
  .svcphoto-movie-ic svg{width:52px;height:52px}
  .svcphoto-movie-ct{font-size:22px}
}

/* ===== parts/services-photo.css ===== */
/* services/photo：小見出しと本文のコマ（◆の案内・オプションの行・特徴） */
.svcphoto-box h3{font-size:17px;line-height:1.5}
.svcphoto-box h3 + .rows{margin-top:6px}
.svcphoto-box p{margin:8px 0 0;font-size:14px}
.svcphoto-box > :first-child{margin-top:0}

/* ===== parts/services-print.css ===== */
/* services/print：小見出しと本文のコマ（◆の案内・注記・本文） */
.svcprint-box h3{font-size:17px;line-height:1.5}
.svcprint-box p{margin:8px 0 0;font-size:14px}
.svcprint-box > :first-child{margin-top:0}
/* プランの「HPセット時」 */
/* 流れ（時間の札がないので見出しの下をあける） */
.svcprint-step h3{margin-bottom:6px}

/* ===== parts/services-sns.css ===== */
/* services/sns：SNS運用サポート（2026-09-17 新設） */
.svcsns-note{grid-column:span 6;text-align:center}
.svcsns-can h3{margin:0 0 8px;font-size:17px}
.svcsns-can p{margin:0;font-size:14px;line-height:1.85}
/* バズ動画のカード（2026-09-17）：スマホ2列・PC4列の縦長動画＋再生数＋バズの理由 */
.koma.svcsns-video{grid-column:span 3;margin:0;padding:0;overflow:hidden;align-self:start;position:relative;transition:transform .25s ease;transform-origin:center}
.koma.svcsns-video.is-playing{transform:scale(1.15);z-index:5;box-shadow:6px 6px 0 var(--gold)}   /* 再生中は少し大きく（本人 2026-09-18） */
@media (prefers-reduced-motion:reduce){.koma.svcsns-video{transition:none}}
.svcsns-video video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#0b1a24}
.svcsns-video figcaption{padding:10px 12px 12px;border-top:2.5px solid var(--ai);display:flex;flex-direction:column}
.svcsns-video b{display:block;min-height:2.8em;font-family:"Zen Maru Gothic",sans-serif;font-size:14px;line-height:1.4;color:var(--ai)}   /* タイトルは常に2行ぶん確保＝カードの高さ・金ピルの位置を揃える（本人 2026-09-18・-webkit-line-clampはテキストが二重に見える表示バグが出たため使わない） */
.svcsns-num{display:inline-block;align-self:flex-start;margin-top:auto;padding:0 8px;border-radius:999px;background:var(--gold);color:#fff;font-size:11px;font-weight:700;line-height:1.9}
/* 2列固定（本人 2026-09-20「作品ギャラリー は 2列に」）＝PCでも動画を大きく見せる */
.grid > .koma.svcsns-video{grid-column:span 3}
/* /works/sns だけ3列（本人 2026-09-21「実績は3列に」）＝services/sns の2列はそのまま */
.grid > .koma.svcsns-v3{grid-column:span 2}
.svcsns-v3 b{min-height:2.8em;font-size:12.5px}
.svcsns-v3 figcaption{padding:8px 9px 10px}
.svcsns-v3 .svcsns-num{font-size:10px;padding:2px 7px;line-height:1.55;word-break:keep-all;border-radius:10px}   /* 3列は狭いので2行になる＝言葉の途中で折らない */
.svcsns-v3 .svcsns-more{font-size:10px}
@media (min-width:768px){.svcsns-v3 b{font-size:14px}.svcsns-v3 figcaption{padding:10px 12px 12px}.svcsns-v3 .svcsns-num{font-size:11px;padding:0 8px}.svcsns-v3 .svcsns-more{font-size:11px}}
/* 料金の順番（STEP 1 → STEP 2・2026-09-17） */
.svcsns-step{display:inline-block;margin-bottom:8px;padding:0 12px;border-radius:999px;background:var(--ai);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:11px;letter-spacing:.1em;line-height:2}

/* SNS実績の詳細モーダル（2026-09-18・works/logo の意味モーダルと同じ作り） */
.sns-lb-js .koma.svcsns-video{cursor:pointer}
.sns-lb-js .koma.svcsns-video:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.svcsns-more{display:inline-block;margin-top:6px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:11px;color:var(--ai);border-bottom:2px solid var(--gold);align-self:flex-start}
.sns-lb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;overflow:auto}
.sns-lb::backdrop{background:rgba(25,60,82,.6)}
.sns-lb-inner{min-height:100%;display:grid;align-content:center;gap:24px;max-width:1040px;margin:0 auto;padding:72px 20px 96px}
.sns-lb-pic{display:grid;place-items:center;background:#0b1a24;padding:0}
.sns-lb-pic video{width:100%;max-width:320px;aspect-ratio:9/16;object-fit:cover;background:#0b1a24;margin:0 auto;display:block}
.sns-lb-name{margin:2px 0 8px;font-size:clamp(22px,5.6vw,30px);line-height:1.35;color:var(--ai)}
.sns-lb-nums{margin:0 0 16px;font-size:13px;font-weight:700;color:var(--sub)}
.sns-lb-label{display:inline-block;margin:0 0 6px;padding:0 10px;border-radius:999px;background:var(--ai);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:11px;line-height:1.9}
.sns-lb-concept{margin:0 0 18px;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:clamp(17px,4.4vw,21px);line-height:1.65;color:var(--ai)}
.sns-lb-points{list-style:none;margin:0;padding:0;border-top:2px dotted var(--line)}
.sns-lb-points li{padding:12px 0;border-bottom:2px dotted var(--line);font-size:14.5px;line-height:1.85;color:var(--ai)}
.sns-lb-points b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:15px;color:var(--gold)}
.sns-lb button{position:fixed;display:grid;place-items:center;width:48px;height:48px;border:2px solid var(--ai);border-radius:50%;background:#fff;color:var(--ai);font-size:26px;line-height:1;cursor:pointer;z-index:2}
.sns-lb button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sns-lb-close{top:14px;right:14px}
.sns-lb-prev{left:14px;bottom:18px}
.sns-lb-next{right:14px;bottom:18px}
@media (min-width:900px){
  .sns-lb-inner{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;gap:48px;padding:72px 90px}
  .sns-lb-prev,.sns-lb-next{top:50%;bottom:auto;transform:translateY(-50%)}
}

/* ===== parts/services-vision.css ===== */
/* services/vision：理念の体系化（ehon・ai と同じ種類の部品は同じ値でそろえる） */

/* はじまりのコマ（藍の吹き出し＋軸の立った独楽の絵）と、語りのコマ */
.koma.svcvision-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px 18px 18px}
.svcvision-lead{margin:0;text-align:center}
.svcvision-lead .fuki{font-size:clamp(17px,4.6vw,21px);font-weight:900;line-height:1.6;text-align:center;padding:12px 20px}
.svcvision-top{width:120px;height:auto;margin-top:6px}
.svcvision-text p{margin:0;font-size:14px;line-height:1.95}
.svcvision-text strong{color:var(--ai)}
.koma.svcvision-voice{display:flex;align-items:center}
.svcvision-voice .qa{margin:0;width:100%}
.svcvision-voice .fuki{max-width:94%}
@media (min-width:768px){
  .koma.svcvision-intro{flex-direction:row;gap:28px}
}

/* 料金（名前・説明・金額・注記を中央に） */
.svcvision-concept{max-width:24em;margin:8px auto 0;font-size:13px;line-height:1.7}
.svcvision-term{margin:0;font-size:13px;line-height:1.7}
.svcvision-term small{font-size:11px;color:var(--sub)}

/* 行うこと・納品物（金額なしの行） */
.svcvision-sub{font-size:12px;color:var(--sub)}
.svcvision-rows li{grid-template-columns:minmax(0,1fr);gap:2px}

/* 注記（※）のコマ */
.koma.svcvision-notes{padding:14px 18px;box-shadow:3px 3px 0 var(--ai)}
.svcvision-notes p{margin:0;font-size:12px;line-height:1.9;color:var(--sub)}

/* こんな方へ（見出しを吹き出しに。お客さま＝右・白） */

/* 流れ4つ：PC でも 2×2 */
@media (min-width:1026px){
  .koma.step.svcvision-step{grid-column:span 3}
}

/* ===== parts/services.css ===== */
/* 事業内容の一覧（services/index）｜サービス6コマ（どの幅でも2列）・制作の流れ4コマ（PCは2×2） */

/* スマホは2列＝カード幅168px。アイコン52px＋余白だと文字の入る幅が71px（5文字）しかなく、
   「ロゴデザイ／ン」のように語の途中で折れていた（2026-09-18 実測）。
   アイコンと余白を詰めて文字に約97px（7文字）渡す＝「ホームページ／制作」で折れる。600px以上は元の大きさに戻す */
.koma.services-card{grid-column:span 3;display:flex;align-items:center;gap:8px;padding:14px 10px;text-align:left;text-decoration:none;transition:transform .15s,box-shadow .15s}
/* どの幅でも2列（本人 2026-09-17「事業内容を　2列構成にして」・前は 768px〜3列）／アイコン左・テキスト右（本人 2026-09-18） */
.services-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--gold)}
.services-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ai);border-radius:50%;background:var(--light);color:var(--ai)}
.services-ic svg{width:22px;height:22px;stroke-width:1.5}
@media (min-width:600px){
  .koma.services-card{gap:12px;padding:16px 14px}
  .services-ic{width:52px;height:52px}
  .services-ic svg{width:30px;height:30px}
}
/* keep-all をやめた＝「SNS運用サポート」が折り返せず、スマホ(375px)でカードから10px飛び出して横スクロールが出ていた（2026-09-18 実測）。
   auto-phrase は言葉の切れ目で折る（ホームページ／制作）。anywhere は付けない＝付けると語の途中で折れる（ホームペー／ジ制作）。
   2列のままだと1行には収まらない幅なので、折れること自体は前提で、折れる場所だけ整える */
.services-card b{flex:1;min-width:0;font-family:"Zen Maru Gothic",sans-serif;font-size:14px;line-height:1.4;color:var(--ai);word-break:auto-phrase}
.services-card b::after{content:"→";margin-left:6px;color:var(--gold)}

.services-stepic{display:grid;place-items:center;width:38px;height:38px;margin:0 0 8px;border:2px solid var(--ai);border-radius:50%;background:var(--light);color:var(--ai)}
.services-stepic svg{width:21px;height:21px}
.services-step h3{margin:0 0 6px}
@media (min-width:1026px){.koma.step.services-step{grid-column:span 3}}

/* こんな方におすすめ（全サービス共通）。吹き出しの見出し＋本文（2026-09-19 に3ページ分の同じCSSをここへ集約） */
.koma.svc-who,.koma.svcai-who,.koma.svcvision-who,.koma.svcehon-who{padding:22px 18px 18px}
.svc-who .fuki,.svcai-who .fuki,.svcvision-who .fuki,.svcehon-who .fuki{display:block;width:fit-content;max-width:100%;margin:0 0 20px;font-size:15px;letter-spacing:.04em}
.svc-who .fuki.r,.svcai-who .fuki.r,.svcvision-who .fuki.r,.svcehon-who .fuki.r{margin-left:auto}
.svc-who p,.svcai-who p,.svcvision-who p,.svcehon-who p{margin:0;font-size:14px}

/* こんな方におすすめ：カードごとの線画（本人 2026-09-25「アイコンというより、イラストに、でイラストのサイズはもう少し大きく。
   イラストの雰囲気はコラムの01-04を参考に」）＝コラムのサムネと同じ作法（白地・藍の線・金は一点だけ・文字なし）。2026-09-25 本人「イラストを改善して」でSVGの手描きから生成画像に */
.svc-who-ill{display:block;width:100%;max-width:228px;height:auto;aspect-ratio:3/2;object-fit:contain;margin:0 auto 2px}   /* 300→228px（本人 2026-09-25「イラストのサイズを少し小さく、カードの高さを少し低く」）／生成した線画（gpt_image_2_5・3:2・/media/services/hp-who-*.webp）＝4枚とも同じ枠＝吹き出しの高さがそろう */
/* 並び（本人 2026-09-25「吹き出しの位置やテキストの位置、カードの大きさなどを整えて」）：
   絵 → 吹き出し（しっぽは上＝絵の人が言っている） → 本文。吹き出しは中央 */
.koma.svc-who:has(.svc-who-ill){display:flex;flex-direction:column;align-items:center;padding:12px 20px 18px}
.svc-who:has(.svc-who-ill) .fuki,.svc-who:has(.svc-who-ill) .fuki.r{margin:4px auto 12px;text-align:center}
.svc-who:has(.svc-who-ill) .fuki::after{top:-9px;bottom:auto;left:calc(50% - 7px);right:auto;border:0;border-left:2px solid var(--ai);border-top:2px solid var(--ai)}
.svc-who:has(.svc-who-ill) p{align-self:stretch}

/* ===== parts/starter.css ===== */
/* お問い合わせページに置く「Yoraku が初めての方へ」の 01〜04。トップと同じ見た目（本人 2026-09-20）。
   トップの c-koma-suzu.html から写した。片方だけ直すとズレるので、直すときは両方 */
.fuki{position:relative;display:inline-block;background:#fff;border:2px solid var(--ai);border-radius:20px;padding:10px 16px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--ai);font-size:15px;line-height:1.6;text-align:left;max-width:100%}
.fuki::after{content:"";position:absolute;left:26px;bottom:-11px;width:14px;height:14px;background:#fff;border-right:2px solid var(--ai);border-bottom:2px solid var(--ai);transform:rotate(45deg)}
.fuki.r::after{left:auto;right:26px}
.fuki.ai{background:var(--ai);color:#fff}
.fuki.ai::after{background:var(--ai)}
.fukis{display:grid;gap:10px;justify-items:start}   /* 上下の間隔を少し詰めた（本人 2026-09-18） */
.fukis .r{justify-self:end}
.want{padding:22px 14px 100px}
.want .who{position:absolute;left:6px;bottom:0;width:96px;height:96px}
.want .fuki{margin:0;font-size:13px;padding:8px 12px;border-radius:16px}
.il .ln{fill:none;stroke:var(--ai);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.il .fw{fill:#fff}.il .fg{fill:var(--gold)}.il .fl{fill:var(--light)}.il .fa{fill:var(--ai)}
.il .q{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:20px;fill:var(--ai);text-anchor:middle}
.worry{background:var(--light);padding:22px 14px 100px}
.worry .who{position:absolute;right:6px;bottom:0;width:96px;height:96px}
.worry .fuki{margin:0;font-size:13px;padding:8px 12px;border-radius:16px}
.koma.tilt-l{transform:rotate(-1.2deg)}.koma.tilt-r{transform:rotate(1.1deg)}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
/* 04：どちらの方も、の一言。番号の札とぶつからないよう上を少し空ける */
.both-foot{text-align:center;margin-top:16px;padding-top:14px;border-top:2px dotted var(--line)}
.both-h{margin:0;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:17px;
  line-height:1.5;color:var(--ai)}
.path{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;border:2px solid var(--line);border-radius:10px;padding:12px;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
/* 押せる入口（2026-09-18 リンク化）：乗せると金の枠と影 */
.path:hover,.path:focus-visible{border-color:var(--gold);box-shadow:3px 3px 0 var(--gold);transform:translate(-1px,-1px);outline:none}
.path.p2{background:var(--light);border-color:var(--light)}
.path .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:2px solid var(--ai);background:var(--light)}
.path.p2 .ic{background:#fff}
.path .ic svg{width:44px;height:44px}
.koma > h2{text-align:center}
.path b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:13px;line-height:1.4;color:var(--ai)}
.path .tx span{display:block;margin-top:4px;font-size:12px;line-height:1.7;word-break:auto-phrase;text-wrap:pretty}
@media (min-width:768px){.both-h{font-size:20px}}
@media (max-width:767px){.paths{grid-template-columns:1fr}}

/* ===== parts/thanks.css ===== */
/* thanks（送信完了）だけの部品。頭は .thanks- */
.thanks-mark{width:auto;height:84px;margin:0 auto 14px}
.thanks-body{text-align:center;padding:30px 18px 30px}
.thanks-say{margin:0 0 26px}
.thanks-say .fuki{font-size:15px;line-height:1.8}
.thanks-small{margin:0;font-size:13px;color:var(--sub)}
.thanks-small a{color:var(--ai);font-weight:700;white-space:nowrap}
.thanks-body .estimate{max-width:300px;margin-top:22px}

/* ===== parts/works.css ===== */
/* 制作実績（works/index・art・logo・photo・sns の5ページで共用） */

/* はじめのコマ：本番の lead をせりふ風の大きな一言に、説明は下に */
.works-intro{padding:26px 20px 22px}
.works-catch{margin:0 0 14px;text-align:center;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:clamp(20px,5.6vw,26px);line-height:1.6;letter-spacing:.06em;color:var(--ai);text-shadow:3px 3px 0 var(--light)}
.works-catch span{display:inline-block}
/* コマの外に直に置くキャッチ（導入を吹き出しにしたページ＝ロゴ・写真。本人 2026-09-18） */
.works-catch-solo{grid-column:span 6;margin:6px 4px 16px}
.works-intro p:not(.works-catch){max-width:36em;margin:8px auto 0;font-size:14px}

/* 一覧のカード（写真・ロゴ・アート）：.work を正方形に・PC でも3枚並び */

/* 写真・アート：1枚ずつコマ。大きいコマ1つ＋小さいコマ2つを1組に（正方形がぴったり組む） */
.works-shot{grid-column:span 2;margin:0;padding:0;overflow:hidden;aspect-ratio:1/1}
.works-shot.big{grid-column:span 4;grid-row:span 2}
.works-shot img,.works-shot a{display:block;width:100%;height:100%}
.works-shot img{object-fit:cover}

/* works/photo：正方形の枠にはめず、元の写真の比率・大きさのまま並べる（本人 2026-09-18「もとの比率のままランダムに並べて」→「元の比率の大きさで並べて。比率が揃わず空白が生まれてもいい」）。
   高さを揃えて幅は写真ごとの比率のまま＝端で余白が出るのは想定どおり。.works-shot の基本ルールより後ろに書いて、.works-gallery の中だけ上書きする */
.works-gallery{grid-column:span 6;display:flex;flex-wrap:wrap;gap:12px}
.works-gallery .works-shot{display:block;grid-column:auto;flex:0 0 auto;height:240px;margin:0;aspect-ratio:auto}
.works-gallery .works-shot img,.works-gallery .works-shot a{height:100%;width:auto;display:block}
.works-gallery .works-shot img{object-fit:initial}
@media (min-width:768px){.works-gallery .works-shot{height:320px}}
@media (min-width:1026px){.works-gallery .works-shot{height:380px}}

/* ロゴ：絵＋名前・種類・紹介文（本番のライトボックスの中身を出したもの） */
.works-logo{margin:0;padding:0;overflow:hidden;display:grid;grid-template-columns:40% minmax(0,1fr)}
.works-logo .works-pic{display:grid;place-items:center;align-self:stretch;min-width:0;padding:6px;background:#fff;border-right:2.5px solid var(--ai)}
.works-logo .works-pic img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.works-logo figcaption{padding:12px 14px 14px;align-self:center}
.works-logo figcaption b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16px;line-height:1.4;color:var(--ai)}
.works-logo figcaption small{display:block;margin-top:2px;font-size:11px;font-weight:700;line-height:1.5;color:var(--gold)}
.works-logo figcaption p{margin:8px 0 0;font-size:13px;line-height:1.7}

/* 準備中のコマ（SNS動画） */
.works-soon{display:grid;place-items:center;aspect-ratio:1/1;padding:8px}
.works-soon .fuki{font-size:14px;padding:8px 14px}

/* Instagram へのコマ */
.works-ig{text-align:center;padding:24px 18px 26px}
.works-ig p{margin:0;font-size:14px}
.works-ig .estimate{margin-top:14px;justify-content:center}

@media (min-width:768px){
  .works-logo{grid-column:span 3;grid-template-columns:minmax(0,1fr)}
  .works-logo .works-pic{border-right:0;border-bottom:2.5px solid var(--ai);padding:12px}
  .works-logo figcaption{align-self:start;padding:14px 16px 18px}
}
@media (min-width:1026px){
  .works-logo{grid-column:span 2}
  .works-soon .fuki{font-size:16px}
}

/* ===== 分類を増やした一覧（2026-09-17 本人「制作実績に、ホームページ、ロゴデザイン、写真、SNS動画 などを加えて」） ===== */

/* ホームページの実績（works/hp）：パソコンの画面にスマホの画面を重ねたコマ＋名前・作ったもの・サイトへのリンク */
.works-site{padding:0;overflow:hidden;display:flex;flex-direction:column;position:relative}
.works-screens{position:relative;display:flex;align-items:flex-end;padding:18px 18px 0;background:var(--light);border-bottom:2.5px solid var(--ai)}
.works-screens .works-pc{width:80%;aspect-ratio:1440/900;object-fit:cover;object-position:top;border:2px solid var(--ai);border-bottom:0;border-radius:6px 6px 0 0;background:#fff}
.works-screens .works-sp{position:absolute;right:16px;bottom:10px;height:78%;width:auto;aspect-ratio:780/1688;object-fit:cover;object-position:top;border:2px solid var(--ai);border-radius:10px;background:#fff;box-shadow:3px 3px 0 var(--gold)}
.works-meta{display:grid;gap:4px;padding:12px 16px 16px}
.works-meta b{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16px;line-height:1.4;color:var(--ai);word-break:keep-all}
.works-meta .wk-area{display:block;margin-bottom:1px;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:11.5px;line-height:1.4;letter-spacing:.04em;color:var(--sub)}
.works-meta .wk-area::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.18em;vertical-align:-.16em;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6a7.4 7.4 0 0 0-7.4 7.4c0 5.5 7.4 13.4 7.4 13.4s7.4-7.9 7.4-13.4A7.4 7.4 0 0 0 12 1.6zm0 10.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%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'%3E%3Cpath d='M12 1.6a7.4 7.4 0 0 0-7.4 7.4c0 5.5 7.4 13.4 7.4 13.4s7.4-7.9 7.4-13.4A7.4 7.4 0 0 0 12 1.6zm0 10.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.works-meta small{font-size:12px;line-height:1.6;color:var(--sub)}
.works-meta small span{display:inline-block}
.works-visit{justify-self:start;margin-top:6px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;color:var(--ai);text-decoration:none;border-bottom:2px solid var(--gold)}
.works-visit::after{content:"";position:absolute;inset:0}   /* カードのどこにマウスを乗せても押せるように（本人 2026-09-18）＝リンクの上に重ねたのはこの疑似要素だけ */
.works-site:has(.works-visit):hover{box-shadow:5px 5px 0 var(--gold)}

/* ===== 一覧＝ひと目で ホームページ制作・動画・写真・ロゴ（2026-09-17 本人「トップページを参考に　一眼で、HP制作、動画、写真、ロゴ　の実績があるのがわかるように」） ===== */
/* 分類の札：4つを横に並べ、アイコンと名前だけ（数は出さない＝本人 2026-09-17）。押すとその章へ */
.works-jump{grid-column:span 6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}   /* 6つ（アートを足した 2026-09-25）＝スマホ3列×2段・768px〜6列 */
@media (min-width:768px){.works-jump{grid-template-columns:repeat(6,minmax(0,1fr))}}   /* 5つ＝ホームページ・ロゴ・写真・SNS・動画（2026-09-22 動画を追加） */
.works-jump a{display:grid;justify-items:center;align-content:center;gap:6px;padding:10px 1px 8px;border:2.5px solid var(--ai);border-radius:6px;background:#fff;box-shadow:3px 3px 0 var(--ai);color:var(--ai);text-decoration:none;text-align:center}   /* 影は紺（本人 2026-09-26「他のカードたちと合わせて紺色に」） */
/* 文字（本人 2026-09-27「フォントを改善して」）＝サイトの見出しと同じ丸ゴシック。スマホは3列になったので 10px → 12〜14.5px（幅に合わせる・「ホームページ」が1行に収まる）。
   2026-09-26 に上の行のコメントを閉じ忘れ、この指定がまるごと無効になって本文の書体（Noto Sans 15px）で出ていた */
.works-jump b{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:clamp(12px,3.7vw,14.5px);line-height:1.35;letter-spacing:.04em;white-space:nowrap}
.works-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--ai);background:var(--light)}
.works-ic svg{width:22px;height:22px;fill:none;stroke:var(--ai);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.works-ic .gd{fill:var(--gold);stroke:none}
.works-jump a:hover{box-shadow:5px 5px 0 var(--gold);transform:translate(-1px,-1px)}
[id^="works-"]{scroll-margin-top:12px}

/* ホームページ：トップページと同じ見せ方に（本人 2026-09-20）＝縦長に切って画面の上（HERO）を見せ、
   会社名は画像の上に白文字＋下の暗いグラデーション。スマホ3列・PC6列 */
.koma.works-hp{grid-column:span 2;text-decoration:none;position:relative}
.works-hp img{aspect-ratio:9/16;object-position:top}
.koma.works-hp b{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 9px;border-top:0;
  background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%);
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 1px 8px rgba(0,0,0,.5);text-align:center;font-size:11px}
.koma.works-hp .wk-area{display:block;margin-bottom:1px;font-family:"Noto Sans JP",sans-serif;font-size:10px;font-weight:400;letter-spacing:.04em;opacity:.88}
.koma.works-hp .wk-area::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.18em;vertical-align:-.16em;background:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6a7.4 7.4 0 0 0-7.4 7.4c0 5.5 7.4 13.4 7.4 13.4s7.4-7.9 7.4-13.4A7.4 7.4 0 0 0 12 1.6zm0 10.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%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'%3E%3Cpath d='M12 1.6a7.4 7.4 0 0 0-7.4 7.4c0 5.5 7.4 13.4 7.4 13.4s7.4-7.9 7.4-13.4A7.4 7.4 0 0 0 12 1.6zm0 10.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.koma.works-hp b small{font-size:10px;color:#fff;opacity:.9}

/* 動画：サムネイル＋再生の印。横長（YouTube）は2マス・縦長（Instagram）は1マス＝PC で1段・スマホは横長が全幅・縦長が半分 */







/* 写真・ロゴ・アート：正方形の絵だけのコマ。スマホ3列・PC6列 */


/* ロゴは画像の中で見た目の大きさをそろえてある（-v2・2026-09-19「サイズが小さい／見え方のサイズは整えて」）ので、CSSの余白は最小限 */



/* 章の最後の「見る →」 */
.works-more{grid-column:span 6;justify-self:end;margin:0 4px 6px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;color:var(--ai);text-decoration:none;border-bottom:2px solid var(--gold)}

@media (min-width:768px){
  .works-jump b{font-size:15px;letter-spacing:.06em}
  .works-ic{width:50px;height:50px}
  .works-ic svg{width:27px;height:27px}
}
@media (min-width:1026px){
  .koma.works-hp{grid-column:span 1}
  
  .koma.works-hp b{font-size:12px}
  .koma.works-hp b small{font-size:11px}
}

/* 写真は横長（本人 2026-09-17「写真 PHOTO の比率は基本横長に」）＝スマホ1段2枚・PC 1段3枚 */


/* ロゴは1段4つ（本人 2026-09-17「ロゴ は一列4こに」）＝.works-logos の中だけ4列 */




/* アートは3列（本人 2026-09-17「アート ART は 3れつ表示で」）＝スマホも PC も1段3枚 */
/* アート＝作品のカバー（16:9）。スマホは1枚ずつ全幅・768px〜3列 */





/* 写真を押すと大きく表示（works/photo・2026-09-17） */
.works-shot[role="button"]{cursor:zoom-in}
.works-shot[role="button"]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.works-lb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.works-lb[open]{display:grid;place-items:center}
.works-lb::backdrop{background:rgba(25,60,82,.9)}
.works-lb img{max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:4px}   /* 枠と金の影はなし（本人 2026-09-17） */
.works-lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:2px solid #fff;border-radius:50%;background:var(--ai);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.works-lb button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.works-lb-close{top:14px;right:14px}
.works-lb-prev{left:14px;bottom:18px}
.works-lb-next{right:14px;bottom:18px}
@media (min-width:768px){.works-lb-prev,.works-lb-next{top:50%;bottom:auto;transform:translateY(-50%)}.works-lb img{max-height:calc(100vh - 60px);max-width:calc(100vw - 160px)}}

/* 公開準備中の札（長生村観光協会さま・2026-09-17） */
.works-meta small .prep,.works-hp b small .prep{display:block;width:fit-content;margin-top:3px;padding:0 8px;border-radius:999px;background:var(--gold);color:#fff;font-size:10px;line-height:1.8}

/* 一覧のカード：乗せると少し大きく（トップと同じ・本人 2026-09-17）。ホームページ・ロゴ・写真・アートは押すとそれぞれの実績ページへ */
.koma.works-hp{transition:transform .2s ease,box-shadow .2s ease}
.koma.works-hp:hover,.koma.works-hp:focus-visible{transform:scale(1.05);z-index:2;box-shadow:6px 6px 0 var(--gold)}
@media (prefers-reduced-motion:reduce){.koma.works-hp{transition:none}}


/* ロゴのカード：押すと画面いっぱいに意味（2026-09-17）。カードは 名前・種類・「意味を見る」だけ（短い紹介文は開いた画面に出す） */
.logo-lb-js .works-logo{cursor:pointer;align-self:start;transition:transform .2s ease,box-shadow .2s ease}
.logo-lb-js .works-logo:hover,.logo-lb-js .works-logo:focus-visible{transform:scale(1.03);z-index:2;box-shadow:7px 7px 0 var(--gold)}
.logo-lb-js .works-logo:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.logo-lb-js .works-logo figcaption p{display:none}
.works-logo-more{display:none}
.logo-lb-js .works-logo-more{display:inline-block;margin-top:8px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12px;color:var(--ai);border-bottom:2px solid var(--gold)}
.logo-lb-js .works-logo-more::after{content:" →"}
.logo-lb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;overflow:auto}
.logo-lb::backdrop{background:rgba(25,60,82,.6)}
.logo-lb-inner{min-height:100%;display:grid;align-content:center;gap:24px;max-width:1040px;margin:0 auto;padding:72px 20px 96px}
.logo-lb-pic{display:grid;place-items:center;background:#fff;padding:28px}   /* 枠と金の影はなし（本人 2026-09-17） */
.logo-lb-pic img{width:100%;max-width:420px;aspect-ratio:1/1;object-fit:contain}
.logo-lb-kind{margin:0;font-size:12px;font-weight:700;color:var(--gold)}
.logo-lb-name{margin:2px 0 16px;font-size:clamp(24px,6vw,34px);line-height:1.35;color:var(--ai)}
.logo-lb-label{display:inline-block;margin:0 0 6px;padding:0 10px;border-radius:999px;background:var(--ai);color:#fff;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:11px;line-height:1.9}
.logo-lb-concept{margin:0 0 18px;font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:clamp(17px,4.4vw,21px);line-height:1.65;color:var(--ai)}
.logo-lb-points{list-style:none;margin:0 0 18px;padding:0;border-top:2px dotted var(--line)}
.logo-lb-points li{padding:12px 0;border-bottom:2px dotted var(--line);font-size:14.5px;line-height:1.85;color:var(--ai)}
.logo-lb-points b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:15px;color:var(--gold)}
.logo-lb-sum{margin:0;font-size:14px;line-height:1.9;color:var(--sub)}
.logo-lb button{position:fixed;display:grid;place-items:center;width:48px;height:48px;border:2px solid var(--ai);border-radius:50%;background:#fff;color:var(--ai);font-size:26px;line-height:1;cursor:pointer;z-index:2}
.logo-lb button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.logo-lb-close{top:14px;right:14px}
.logo-lb-prev{left:14px;bottom:18px}
.logo-lb-next{right:14px;bottom:18px}
@media (min-width:900px){
  .logo-lb-inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:48px;padding:72px 90px}
  .logo-lb-prev,.logo-lb-next{top:50%;bottom:auto;transform:translateY(-50%)}
}

/* ロゴの追加資料（例：西ノ島町観光協会のカラーバリエーション・色のもとになった写真。2026-09-17「他の色や、実際の風景の写真があることも特徴なのでそれもわかるように」） */
.logo-lb-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.logo-lb-extra[hidden]{display:none}
.logo-lb-extra figure{margin:0}
.logo-lb-extra img{display:block;width:100%;height:auto;min-height:120px;background:var(--light);border:2px solid var(--line);border-radius:6px}   /* 読み込み前も高さを確保（本人 2026-09-18） */
.logo-lb-extra figcaption{margin-top:6px;font-size:12px;line-height:1.7;color:var(--sub)}
@media (min-width:900px){.logo-lb-extra{grid-column:1 / -1}}

/* アートの動画（2026-09-17）：スマホは全幅・PC は横長で2段 */
/* アート作品のカード：表紙＋題名＋「くわしく見る →」。与楽の鈴のカードと同じ見た目でそろえる（2026-09-18） */
.koma.works-art-card{grid-column:span 6;margin:0;padding:0;overflow:hidden;display:block;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.works-art-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b1a24}
.koma.works-art-card:hover,.koma.works-art-card:focus-visible{transform:scale(1.03);z-index:2;box-shadow:6px 6px 0 var(--gold)}
@media (min-width:1026px){.koma.works-art-card{grid-column:span 3}}
@media (prefers-reduced-motion:reduce){.koma.works-art-card{transition:none}}
/* 作品ページの動画：コマいっぱいに1本 */
.koma.works-art-solo{grid-column:span 6;margin:0;padding:0;overflow:hidden}
.works-art-solo video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b1a24}
/* 作品ページの「楽しみ方」「クレジット」 */
.koma.works-art-how p,.koma.works-art-credit p{margin:0 0 10px}
.koma.works-art-how p:last-child,.koma.works-art-credit p:last-child{margin-bottom:0}
.koma.works-art-credit{font-size:13px;color:var(--sub);border-color:var(--line);box-shadow:none}
.koma.works-art-credit b{font-family:"Zen Maru Gothic",sans-serif;color:var(--ai);font-size:12px;letter-spacing:.08em}

/* 与楽の鈴（画像のみ・2026-09-18）：動画カードと揃えた枠に、トップページと同じ「線」の背景で静止画を見せる */
.works-art-bell-frame{position:relative;aspect-ratio:16/9;background:#fff;display:grid;place-items:center;padding:16px}
.works-art-bell-cap{padding:10px 14px 12px;border-top:2.5px solid var(--ai);display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;color:var(--ai)}
.works-art-bell-link{font-size:12px;color:var(--ai);text-decoration:none;border-bottom:2px solid var(--gold);white-space:nowrap}

/* 与楽の鈴：単体ページ（2026-09-18） */
.koma.works-art-bell-solo{margin:0;padding:0;overflow:hidden}
/* 静止画から、触れる鈴（/js/bell-embed.js）へ。枠いっぱいに描くのでトップと同じ16:9・余白なし（本人 2026-09-18「ちゃんと触れるようにして」） */
.koma.works-art-bell-solo .works-art-bell-frame{aspect-ratio:1/1.4142;padding:0}  /* スマホは白銀比の縦長＝鈴は丸いので16:9だと高さが足りず潰れる（本人 2026-09-25） */
@media (min-width:768px){.koma.works-art-bell-solo .works-art-bell-frame{aspect-ratio:16/9}}
.koma.works-art-bell-solo #bell-stage{position:absolute;inset:0;z-index:1}
.koma.works-art-bell-solo #bell-stage canvas{display:block}
/* 遊び方の案内（.bell-hint）は bell-embed.js が自分で位置も見た目も付ける＝ここでは何も足さない */
/* 鈴の下の「与楽の鈴が広がった数」（本人 2026-09-18）。藍の文字＋金の数字＝トップにあった時と同じ扱い */
.works-art-bell-count{padding:12px 14px 14px;border-top:2.5px solid var(--ai)}
.works-art-bell-count .bell-count{display:flex;align-items:baseline;justify-content:center;gap:10px;white-space:nowrap}
.works-art-bell-count .bc-label{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--ai)}
.works-art-bell-count .bc-num{font-family:"Jost","Zen Maru Gothic",sans-serif;font-weight:700;font-size:20px;letter-spacing:.04em;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.koma.works-art-bell-back{display:block;text-align:center;text-decoration:none;font-size:13px;color:var(--sub);border-color:var(--line);box-shadow:none}

/* SNS運用の欄（2026-09-17）：縦長の動画カードをスマホ2列・768px から4列。乗せると少し大きく */






/* URL の #id から来た時、そのカードを光らせる（2026-09-17） */
.works-site.is-target,.works-logo.is-target,.works-shot.is-target{outline:3px solid var(--gold);outline-offset:3px;box-shadow:7px 7px 0 var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .works-site.is-target,.works-logo.is-target,.works-shot.is-target{transition:outline-color .3s ease,box-shadow .3s ease}
}

/* ページの表紙：写真いっぱいに、白文字のひとこと（2026-09-19）。トップの HERO と同じ考え方 */
.koma.works-cover{grid-column:span 6;position:relative;margin:0;padding:0;overflow:hidden}
.works-cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--light)}
.works-cover-catch{position:absolute;left:0;right:0;bottom:0;margin:0;padding:52px 16px 14px;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:900;font-size:19px;letter-spacing:.06em;line-height:1.4;
  color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.6);
  background:linear-gradient(to top,rgba(10,26,36,.62),rgba(10,26,36,.24) 48%,transparent)}
@media (min-width:768px){.works-cover-catch{padding:88px 26px 22px;font-size:30px}}

/* ロゴの意味：色の由来（西ノ島町）。写真 → 色の帯 → その色のロゴ を1枚のカードに（2026-09-19） */
.logo-lb-palette{margin-top:8px}
.logo-lb-palette[hidden]{display:none}
.logo-lb-palette-lead{margin:0 0 14px;font-size:13.5px;line-height:1.8;color:var(--sub)}
.logo-lb-palette-lead b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:14px;letter-spacing:.1em;color:var(--ai)}
.logo-lb-palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.logo-lb-swatch{margin:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.logo-lb-swatch-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.logo-lb-swatch-band{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0;padding:7px 10px;color:#193C52}
.logo-lb-swatch-band.is-dark{color:#fff}
.logo-lb-swatch-band b{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.04em}
.logo-lb-swatch-band span{font-family:"Jost","Zen Maru Gothic",sans-serif;font-size:10.5px;letter-spacing:.06em;opacity:.8}
.logo-lb-swatch-logo{display:block;width:100%;aspect-ratio:900/420;object-fit:contain;padding:10px 12px;box-sizing:border-box}
@media (min-width:640px){.logo-lb-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:900px){.logo-lb-palette{grid-column:1 / -1}.logo-lb-palette-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ロゴの先の仕事（SAKANA の商品プロデュースなど） */
.logo-lb-story{display:grid;gap:14px;margin-top:4px}
.logo-lb-story[hidden]{display:none}
.logo-lb-story-item b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:13px;letter-spacing:.08em;color:var(--gold-deep,var(--gold))}
.logo-lb-story-item p{margin:4px 0 0;font-size:14px;line-height:1.85}
@media (min-width:900px){.logo-lb-story{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}

/* ふりがな（宝珠鈴など・2026-09-20）。行の高さを崩さないよう小さく */
.works-intro ruby rt{font-size:.5em;font-weight:400;color:var(--sub);letter-spacing:.04em}

/* ロゴが地図になっている時の図（西ノ島町＝隠岐島前の3島）。2026-09-20 */
.logo-lb-map{margin-top:22px}
.logo-map-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:10px}
.logo-map-svg{width:220px;height:auto;flex:none}
.logo-map-dot{fill:var(--gold);stroke:#fff;stroke-width:2.5}
.logo-map-num{font-family:"Jost",sans-serif;font-weight:600;font-size:14px;fill:#fff}
.logo-map-arrow{stroke:var(--gold);stroke-width:2.5;stroke-dasharray:6 5;fill:none}
.logo-map-head{fill:var(--gold)}
.logo-map-east,.logo-map-east2{fill:var(--sub);font-size:15px}
.logo-map-east2{font-weight:700;fill:var(--ai)}
.logo-map-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--ai)}
.logo-map-list li{display:flex;align-items:center;gap:9px;line-height:1.35}
.logo-map-list i{flex:none;width:23px;height:23px;border-radius:50%;background:var(--gold);color:#fff;
  font-family:"Jost",sans-serif;font-style:normal;font-weight:600;font-size:13px;display:grid;place-items:center}
.logo-map-list span{display:flex;flex-direction:column}
.logo-map-list b{font-size:15px;font-weight:700}
.logo-map-list small{font-size:12px;color:var(--sub)}
.logo-map-note{margin:14px 0 0;font-size:13.5px;line-height:1.85;color:var(--sub)}
@media (min-width:768px){.logo-map-svg{width:258px}.logo-map-list b{font-size:16px}.logo-map-list small{font-size:12.5px}}

/* 動画の実績ページ /works/movie（本人 2026-09-22）＝横長16:9の動画を大きく1本ずつ。説明は動画の下（PC は右）
   ※ .works-visit はカード全体を押せる疑似要素つきで動画の操作をふさぐので、ここでは .wmovie-link を使う */
.koma.wmovie{grid-column:span 6;margin:0;padding:0;overflow:hidden;display:grid}
.wmovie video{display:block;width:100%;aspect-ratio:16/9;background:#0b1a24;object-fit:cover}
.wmovie figcaption{display:grid;gap:6px;padding:14px 16px 16px;border-top:2.5px solid var(--ai)}
.wmovie figcaption > b{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:17px;line-height:1.4;color:var(--ai)}
.wmovie .wk-area{display:block;margin-bottom:1px;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:11.5px;line-height:1.4;letter-spacing:.04em;color:var(--sub)}
.wmovie .wk-area::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.18em;vertical-align:-.16em;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6a7.4 7.4 0 0 0-7.4 7.4c0 5.5 7.4 13.4 7.4 13.4s7.4-7.9 7.4-13.4A7.4 7.4 0 0 0 12 1.6zm0 10.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%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'%3E%3Cpath d='M12 1.6a7.4 7.4 0 0 0-7.4 7.4c0 5.5 7.4 13.4 7.4 13.4s7.4-7.9 7.4-13.4A7.4 7.4 0 0 0 12 1.6zm0 10.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.wmovie small{display:flex;flex-wrap:wrap;gap:4px 6px}
.wmovie small span{padding:1px 9px;border-radius:999px;background:var(--light);color:var(--ai);font-size:11.5px;line-height:1.7}
.wmovie-aim{margin:6px 0 2px;font-size:14px;line-height:1.8;color:var(--ai);font-weight:700}
.wmovie-pts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wmovie-pts li{position:relative;padding-left:14px;font-size:13px;line-height:1.75;color:var(--soft)}
.wmovie-pts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.wmovie-pts b{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13.5px;color:var(--ai)}
.wmovie-link{justify-self:start;margin-top:6px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;color:var(--ai);text-decoration:none;border-bottom:2px solid var(--gold)}
/* PC も縦並び（動画の比率は変えない＝本人の方針）。説明は2列＝左に名前・種類・狙い、右に要点 */
@media (min-width:1026px){
  .wmovie figcaption{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:32px;padding:18px 24px 22px;align-items:start}
  .wmovie figcaption > :not(.wmovie-pts){grid-column:1}
  .wmovie-pts{grid-column:2;grid-row:1 / span 5}
}

/* 一覧 /works の動画の欄＝16:9 のサムネイル。スマホ1枚ずつ全幅・768px〜2列 */








/* Listen to Colors の説明（本人 2026-09-22「noeffortのページにあった説明の画像はすべて使って」）＝旧サイトの画像＋横の説明。スマホは縦に積む・768px〜 左に画像・右に文 */
.koma.listen-fig{grid-column:span 6;margin:0;padding:0;overflow:hidden;background:#fff}
.listen-fig img{display:block;width:100%;height:auto}
.listen-fig figcaption{padding:10px 14px 12px;border-top:2.5px solid var(--ai);font-size:13px;line-height:1.7;color:var(--sub)}
.listen-pair{grid-column:span 6;min-width:0;display:grid;gap:12px}
.grid .listen-pair > .koma{grid-column:auto}
.listen-portrait img{max-height:420px;object-fit:cover;object-position:top}
.listen-chart{padding:10px}
.listen-text h3{margin:0 0 8px;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:16px;color:var(--ai)}
.listen-text p{margin:0 0 10px;font-size:14px;line-height:1.9}
.listen-text p:last-child{margin-bottom:0}
@media (min-width:768px){
  .listen-pair{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:center}
  .listen-portrait img{max-height:none}
  .listen-text h3{font-size:18px}
  .listen-text p{font-size:15px}
}
.listen-media{margin:6px 0 0;padding-left:1.1em}
.listen-media li{margin-bottom:8px;font-size:13.5px;line-height:1.75}
.listen-media a{color:var(--ai);text-underline-offset:.2em;text-decoration-color:var(--gold)}
.listen-media small{display:block;font-size:12px;color:var(--sub)}

/* ===== トップと同じ実績の行（本人 2026-09-25「/works の実績のカードの大きさや見せ方をトップと統一して」）=====
   トップ index.html の <style> から写した（.wcat 見出し／.wrow 横スライド／.wnav 下の線／.wmore 行き先カード／.whps .wlogos .wphotos .wsns .wmovies .warts）。
   トップの同じ所を変えたら、ここも同じに直す（トップは build_site.py の外＝自動ではそろわない） */
.work-link{display:block;color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.work-link:hover,.work-link:focus-visible{transform:scale(1.05);z-index:2;box-shadow:6px 6px 0 var(--gold)}
.work-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .work-link{transition:none}
}
.wcat{grid-column:span 6;margin:0 4px -4px;padding-left:10px;border-left:3px solid var(--gold);font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:13px;line-height:1.7;color:var(--ai)}
.wrow{grid-column:span 6;min-width:0;display:grid;grid-auto-flow:column;gap:10px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:6px 10px 6px 4px;scrollbar-width:none;
  overscroll-behavior-x:contain}
.wrow::-webkit-scrollbar{display:none}
.wrow > *{scroll-snap-align:start}
.whps,.wlogos,.wsns{grid-auto-columns:minmax(110px,31%)}
.wphotos,.wmovies,.warts{grid-auto-columns:calc((100vw - 76px) / 2)}
.wrow .wmore{display:grid;place-items:center;align-content:center;gap:5px;padding:8px;background:var(--light);
  text-align:center;color:var(--ai);text-decoration:none;min-height:0}
.wmore-ic svg{display:block;width:27.6px;height:27.6px;fill:none;stroke:var(--ai);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.wmore-ic .gd{fill:var(--gold);stroke:none}
.wnav{grid-column:span 6;display:flex;align-items:center;justify-content:center;gap:5px;margin:-2px 0 0}
.wnav i{width:34px;height:3px;border-radius:2px;background:var(--line);transition:background .2s ease}
.wnav i.on{background:var(--gold)}
.wmore-t{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:11.5px;line-height:1.65}
@media (min-width:768px){
  .wrow{display:flex;gap:12px;padding:6px 10px 8px 4px}
  .wcat{margin-top:0}
  .wrow > *{flex:0 0 calc((100% - 36px) / 4)}
  .wphotos > *,.wmovies > *,.warts > *{flex:0 0 calc((100% - 62px) / 3)}
  .wmore-t{font-size:13.8px}
  .wmore-ic svg{width:33.4px;height:33.4px}
}
.grid .wrow>.koma{grid-column:auto}
.whps .work img{aspect-ratio:9/19.5;object-position:top}
.wrow .work-link:hover,.wrow .work-link:focus-visible{transform:translateY(-4px);
  box-shadow:6px 6px 0 var(--gold)}
.whps .work{position:relative}
.whps .work:not(.wmore){border-radius:16px;border-width:1.5px;padding:2px;background:var(--ai);overflow:hidden;box-shadow:4px 4px 0 var(--ai)}
.wrow .work,.wrow .wthumb,.wrow .wmore{border-radius:16px}
.wrow .wphoto{overflow:hidden}
.whps .work:not(.wmore) img{border-radius:14px}
.whps .work b{position:absolute;left:2px;right:2px;bottom:2px;padding:22px 10px 10px;border-radius:0 0 14px 14px;border-top:0;background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,0) 100%);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 1px 8px rgba(0,0,0,.5);text-align:center}
.wthumb{padding:0;overflow:hidden}
.wthumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.wlogo img{object-fit:contain;padding:10%;background:#fff;transform:scale(1.3)}
.wphoto img{aspect-ratio:auto}
.wphotos{align-items:start}
.wphotos .wmore{align-self:stretch;gap:4px;padding:6px}
.wmvw img,.wart img{aspect-ratio:16/9;object-fit:cover}
.wmovies,.warts{align-items:start}
.wmovies .wmore,.warts .wmore{align-self:stretch;gap:4px;padding:6px}
.koma.wmvw{position:relative}
.koma.wmv{position:relative}
.wmv img{aspect-ratio:9/19.5;object-fit:cover;object-position:center}
.wmv::after{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border:2px solid #fff;border-radius:50%;background:rgba(25,60,82,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat;pointer-events:none}
.wmvw::after{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border:2px solid #fff;border-radius:50%;background:rgba(25,60,82,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat;pointer-events:none}
.work .wk-area{display:block;margin-bottom:1px;font-family:"Noto Sans JP",sans-serif;font-size:10px;font-weight:400;letter-spacing:.04em;opacity:.88}
.work .wk-area::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.18em;vertical-align:-.16em;background:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6a7.4 7.4 0 0 0-7.4 7.4c0 5.5 7.4 13.4 7.4 13.4s7.4-7.9 7.4-13.4A7.4 7.4 0 0 0 12 1.6zm0 10.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%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'%3E%3Cpath d='M12 1.6a7.4 7.4 0 0 0-7.4 7.4c0 5.5 7.4 13.4 7.4 13.4s7.4-7.9 7.4-13.4A7.4 7.4 0 0 0 12 1.6zm0 10.2a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.wcat{scroll-margin-top:90px}   /* 上のジャンプから飛んだ時、貼り付いたメニューに見出しが隠れないように */

/* 実績のページの下の「○○について詳しくみる」（本人 2026-09-25・/works/hp）＝/works/movie の .svcmovie-cta と同じ見た目 */
.koma.works-svc-cta{text-align:center}
.works-svc-cta p{margin:0 0 14px;font-size:14px}
.works-svc-cta .estimate{max-width:420px;margin:0 auto}
.works-svc-ic{display:flex;justify-content:center;margin:2px 0 8px}
.works-svc-ic svg{width:40px;height:40px}   /* トップのカード（27.6px）より大きく＝横に広い欄なので */