/* オキバコ（Okibako）LP —— 手書きのCSSはここだけ。他はHTMLの中に直接書いてあります */

@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/zenkaku-400-2c3a3a8e.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/zenkaku-700-2c3a3a8e.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/zenkaku-900-2c3a3a8e.woff2') format('woff2')}

/* ---- 土台 ---- */
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:#faf8f4;color:#1c1a17;
  font-family:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.9}
a{color:oklch(0.45 0.13 250)}
a:hover{color:oklch(0.38 0.13 250)}
p{margin:0}
img{max-width:100%}
summary::-webkit-details-marker{display:none}

/* ---- 日本語の改行 ----
   「出てくるのはただの／HTMLなので」のように語の途中で切れないようにする。
   overflow-wrap:anywhere は使わない（どこでも切ってしまうため）。
   auto-phrase の効かないブラウザでも、禁則処理だけで自然に折り返る。 */
h1,h2,h3,p,li,summary,dt,dd,th,td{
  word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance;margin:0}
p,li{text-wrap:pretty}
/* 原稿どおりの改行。狭い画面では邪魔になるので外す */
@media (max-width:760px){br.b{display:none}}

/* ---- 見出しの文節 ----
   見出しは <span class="ph"> で文節ごとに包んである。
   inline-block にすると文節の「中」では折り返らなくなるので、
   auto-phrase の効かないブラウザ（iPhone の Safari など）でも
   「やめてみませ／んか。」のような中途半端な改行にならない。
   1文節が画面より長いときだけ、中で折り返る。 */
.ph{display:inline-block}

/* ---- 狭い画面 ----
   ヘッダーの項目は、そのままだと「ココナラで見る」が画面からはみ出す。
   行き先は下のフッターにも同じものがあるので、ここでは隠す。 */
/* 元データは style 属性で書かれているので、上書きには !important が要る */
@media (max-width:880px){header nav{display:none!important}}
/* スマホでは「ココナラで見る」を隠す。ヒーローと下の申し込み枠に同じものがある。
   ヘッダーに残すのは「ログイン」だけ。両方置くとブランド名が潰れて縦に伸びる */
@media (max-width:520px){header a.scp1{display:none!important}}
@media (max-width:560px){header a.scp1{font-size:13px!important;padding:9px 15px!important}}
@media (max-width:360px){header a.lgin{font-size:13px!important;padding:8px 14px!important}}

/* ---- ホバー（元データのクラス名をそのまま引き継いでいます） ---- */
.scp0:hover{background:#f1ede6!important}
.scp1:hover{background:oklch(0.45 0.13 250)!important}
.scp2:hover{background:oklch(0.38 0.13 250)!important}
.scp3:hover{background:#1c1a17!important;color:#fff!important}
.scp4:hover{transform:scale(1.03)!important}
.scp5:hover{color:oklch(0.45 0.13 250)!important}
.scp6:hover{background:#faf8f4!important}
.scp7:hover{background:rgba(255,255,255,.12)!important}
.scp1,.scp2,.scp3,.scp6,.scp7{transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.scp1:hover,.scp2:hover,.scp3:hover,.scp6:hover,.scp7:hover{transform:translateY(-2px)}
.scp5{transition:color .2s}
a:focus-visible,summary:focus-visible{outline:3px solid oklch(0.45 0.13 250);outline-offset:3px;border-radius:6px}

/* ---- スクロールで出てくる動き ----
   js クラスは head の中で付ける。JavaScriptが動かない環境では最初から見えたまま。 */
.js [data-rv]{opacity:0;transform:translateY(22px)}
.js [data-rv].in{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.16,.84,.34,1) var(--d,0ms),
             transform .8s cubic-bezier(.16,.84,.34,1) var(--d,0ms)}
/* 画面の顔になる写真は、少し大きく出す */
.js figure[data-rv]{transform:translateY(28px) scale(.985)}
.js figure[data-rv].in{transform:none}

/* ---- 上に貼り付くヘッダー ---- */
header{transition:box-shadow .3s,background .3s}
header.stuck{box-shadow:0 6px 24px -14px rgba(28,26,23,.45)}
header .bar{position:absolute;left:0;bottom:-1px;height:2px;width:var(--p,0%);
  background:oklch(0.45 0.13 250);transition:width .12s linear}
header nav a.on{background:#f1ede6;font-weight:700}

/* ---- 動きを減らす設定にしている人には出さない ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  .scp4:hover{transform:none!important}
  header .bar{display:none}
}

/* ---- 印刷 ---- */
@media print{
  header,.scp1,.scp2,.scp3{display:none!important}
  .js [data-rv]{opacity:1!important;transform:none!important}
  body{background:#fff}
  figure,li,details{break-inside:avoid}
  details>p{display:block!important}
}

/* ---- ログイン（ヘッダーの控えめなボタン） ---- */
.lgin{transition:background .25s,border-color .25s,transform .25s}
.lgin:hover{background:#f1ede6!important;border-color:#1c1a17!important;transform:translateY(-2px)}
@media (max-width:400px){header a.lgin{font-size:13px!important;padding:8px 14px!important}}