@charset "UTF-8";

/* =========================================================
   トップページだけの見た目

   共通の色・書体・ヘッダー・フッター・ボタンは
   css/mahora.css にあります。こちらは先に読み込んでください。

   ▼ 構成
   01 入口（五十音表から屋号を拾う）
   02 帯を引く動き
   03 本編のセクション
   04 できること
   05 ご依頼の流れ
   06 プロフィール
   07 お問い合わせ
   08 動きを減らす設定

   ▼ 入口の考え方
   写植の文字盤は、黒いガラスに文字が白く抜けた板でした。
   しかも文字は鏡像で並んでいます。レンズを通すと左右が返って、
   紙の上に正しい向きで焼きつくからです。五十音表もその通りに置いています。

   選んだ一字にだけ光が当たり、ショッキングピンクに変わる。
   拾われた字はレンズを通って左右が返り、正像になります。
   文字盤が引くと、正転に戻って屋号が現れます。

   ネガ（文字盤）→ 露光（選択）→ ポジ（印字）。写植の工程そのままの順序です。
   ========================================================= */

:root{
  --gap:  clamp(76px, 11vw, 150px);   /* セクションの間 */

  /* 文字盤のマス */
  --cell: clamp(28px, 5.4vw, 54px);
  --cgap: clamp(2px, .5vw, 5px);

  /* 拾った文字の枠。最後にロゴの大きさまで育ちます */
  --slot: clamp(32px, 6.6vw, 66px);
  --sgap: clamp(3px, .7vw, 8px);
}

body{overflow-x:hidden}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}


/* =========================================================
   01 入口

   gap は使わず、子に margin を持たせています。
   文字盤が引くときに margin ごと畳んで、
   残った屋号が画面の中央にそろうようにするためです。
   ========================================================= */
.hero{position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(54px,8vh,92px) var(--pad) clamp(56px,9vh,88px);
  overflow:hidden;cursor:default}
.hero.running{cursor:pointer}

/* ----- 文字盤ごと畳む入れもの ----- */
.plate-wrap{overflow:hidden;
  margin-bottom:clamp(22px,3.6vh,48px);
  transition:height .72s cubic-bezier(.3,.8,.3,1),
             margin-bottom .72s cubic-bezier(.3,.8,.3,1),
             opacity .5s ease,
             transform .6s cubic-bezier(.3,.8,.3,1)}
.plate-wrap.gone{opacity:0;margin-bottom:0;transform:translateY(-12px)}

.kind{height:20px;margin-bottom:clamp(10px,1.6vh,18px);text-align:center;
  font-family:var(--en);font-size:11px;letter-spacing:.28em;
  color:var(--ink-sub);opacity:0;transition:opacity .4s ease}
.kind.in{opacity:1}

/* ----- 五十音表。黒いガラスに、文字が白く抜けている状態 ----- */
.charts{position:relative;display:grid;place-items:center;
  padding:clamp(10px,1.8vw,20px);background:var(--ink)}

.chart{grid-area:1/1;display:grid;
  grid-template-columns:repeat(10, var(--cell));
  grid-auto-rows:var(--cell);
  gap:var(--cgap);
  direction:rtl;                      /* あ行を右端にする */
  opacity:0;transition:opacity .5s ease}
.chart.in{opacity:1}

.cell{display:grid;place-items:center;
  font-family:var(--min);font-weight:500;
  font-size:calc(var(--cell) * .62);line-height:1;
  color:var(--paper);direction:ltr;       /* 文字盤なので白抜き */
  /* 実際の写植の文字盤は、レンズを通して反転させるため
     文字そのものが鏡像で並んでいます。それを再現しています */
  transform:scaleX(-1);
  transition:color .25s ease, opacity .5s ease}

/* 拾い終えた表は、選んだ文字以外を沈める */
.chart[data-dim="true"] .cell:not(.on){opacity:.3}

/* 光が当たった一字 */
.cell.on{color:#fff;position:relative;z-index:1}
.cell.on::before{content:"";position:absolute;inset:0;background:var(--pink);z-index:-1;
  animation:expose .3s cubic-bezier(.3,.7,.3,1) both}
@keyframes expose{
  from{clip-path:inset(0 100% 0 0)}
  to  {clip-path:inset(0)}
}

/* 送りの枠（レンズ） */
.lens{grid-area:1/1;pointer-events:none;position:relative;z-index:2;
  width:var(--cell);height:var(--cell);
  border:1px solid var(--pink);opacity:0;
  transition:opacity .25s ease}
.lens::before,.lens::after{content:"";position:absolute;background:var(--pink)}
.lens::before{left:-7px;right:-7px;top:50%;height:1px}
.lens::after{top:-7px;bottom:-7px;left:50%;width:1px}
.lens.on{opacity:1}

/* ----- 拾った文字 ----- */
.tray{display:flex;align-items:center;justify-content:center;gap:var(--sgap)}

.slot{position:relative;display:grid;place-items:center;
  width:var(--slot);height:var(--slot);
  font-family:var(--min);font-weight:500;
  font-size:calc(var(--slot) * .64);line-height:1;
  color:#fff;
  /* 文字盤では鏡像。レンズを通る動きで正像に返ります */
  opacity:0;transform:translateY(-14px) scaleX(-1);
  transition:opacity .34s ease,
             transform .52s cubic-bezier(.3,.8,.3,1),
             color .5s ease,
             width .55s cubic-bezier(.3,.8,.3,1),
             height .55s cubic-bezier(.3,.8,.3,1),
             font-size .55s cubic-bezier(.3,.8,.3,1)}
.slot::before{content:"";position:absolute;inset:0;background:var(--pink);z-index:-1;
  transition:opacity .55s ease}
.slot.in{opacity:1;transform:none}

/* 正転に戻す。ピンクの地が抜けて、墨の文字になります */
.tray.positive .slot{color:var(--ink)}
.tray.positive .slot::before{opacity:0}

/* ロゴの大きさまで育つ */
.tray.final{--slot:clamp(44px,10vw,108px);--sgap:clamp(2px,.7vw,8px)}

/* 濁点が降りてくる。デ と ザ は五十音表にないため、
   実際の写植と同じく、別の字として後から重ねます */
.daku{position:absolute;top:-50%;right:-2%;
  font-family:var(--min);font-size:calc(var(--slot) * .44);
  color:var(--pink);opacity:0}
.daku.drop{animation:drop .46s cubic-bezier(.3,.9,.4,1) forwards}
@keyframes drop{
  0%  {opacity:0;transform:translateY(-28px)}
  50% {opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(0) scale(.6)}
}

.latin{margin-top:clamp(18px,2.8vh,32px);
  font-family:var(--en);font-weight:300;
  font-size:clamp(13px,2.2vw,22px);letter-spacing:.44em;text-indent:.44em;
  color:var(--ink-sub);
  opacity:0;transform:translateY(8px);
  transition:opacity .7s ease, transform .7s ease}
.latin.in{opacity:1;transform:none}

/* ----- 下の操作 ----- */
.tools{position:absolute;left:0;right:0;bottom:clamp(16px,3vh,28px);
  display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:var(--en);font-size:10.5px;letter-spacing:.2em;color:var(--ink-sub)}

.skip-btn{padding:8px 14px;border:1px solid var(--ink-20);
  transition:border-color .25s ease}
.skip-btn:hover{border-color:var(--ink-sub)}
.skip-btn[hidden]{display:none}

.replay{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border:1px solid var(--ink-20);opacity:0;
  transition:opacity .5s ease,border-color .25s ease,color .25s ease}
.replay.in{opacity:1}
.replay:hover{border-color:var(--pink);color:var(--pink-text)}

.down{display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;transition:opacity .5s ease}
.down.in{opacity:1}
.down i{display:block;width:1px;height:22px;background:var(--ink-20);
  position:relative;overflow:hidden}
.down i::after{content:"";position:absolute;inset:0;background:var(--pink);
  animation:drip 2s ease-in-out infinite}
@keyframes drip{
  0%{transform:translateY(-100%)}
  60%{transform:translateY(100%)}
  100%{transform:translateY(100%)}
}


/* =========================================================
   02 帯を引く動き

   mahora.css の帯は、はじめから引かれた状態です。
   JavaScript が動くときだけ「0%から引く」に切り替えます。
   こうしておくと、JavaScript が止まっていても
   帯が消えたままにはなりません。
   ========================================================= */
.js .mark{background-size:0% 100%;
  transition:background-size .85s cubic-bezier(.3,.8,.3,1),
             background-image .25s ease}
.js .mark.on{background-size:100% 100%}


/* =========================================================
   03 本編のセクション
   ========================================================= */
.sec{padding-block:var(--gap)}
.sec__t{font-family:var(--min);font-weight:500;
  font-size:clamp(19px,1.5rem,25px);letter-spacing:.1em;line-height:1.9}
.sec__lead{margin-top:14px;font-size:14.5px;line-height:2;
  color:var(--ink-sub);max-width:34em}

.memo{margin-top:clamp(36px,5vw,56px);padding:18px 20px;
  border:1px dashed var(--ink-20);
  font-size:13px;line-height:1.95;color:var(--ink-sub)}


/* =========================================================
   04 できること

   1列 → 2列 → 3列。名刺の6項目がちょうど
   2段に収まる並びを基本にしています。
   ========================================================= */
.svcs{display:grid;gap:clamp(28px,4vw,44px);margin-top:clamp(36px,5vw,56px)}
@media(min-width:620px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.svcs{grid-template-columns:repeat(3,1fr)}}
.svc__n{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--pink-text)}
.svc__t{margin-top:9px;font-family:var(--min);font-weight:500;
  font-size:15.5px;line-height:1.85;letter-spacing:.03em}
.svc__d{margin-top:11px;font-size:13.5px;line-height:1.95;color:var(--ink-sub)}


/* =========================================================
   05 ご依頼の流れ
   ========================================================= */
.flow{display:grid;gap:22px;margin-top:clamp(32px,4.5vw,50px)}
@media(min-width:860px){.flow{grid-template-columns:repeat(5,1fr);gap:16px}}
.step{padding-top:22px;border-top:1px solid var(--ink-20)}
.step__n{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--pink-text)}
.step__t{margin-top:6px;font-family:var(--min);font-weight:500;
  font-size:15px;line-height:1.85}
.step__d{margin-top:8px;font-size:13px;line-height:1.95;color:var(--ink-sub)}


/* =========================================================
   06 プロフィール
   ========================================================= */
.about{margin-top:clamp(32px,4.5vw,50px);display:grid;
  gap:clamp(30px,4vw,54px)}
@media(min-width:820px){.about{grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px)}}
.about__body p{font-size:14.5px;line-height:2.2}
.about__body p+p{margin-top:1.4em}

.about__meta{margin:0;display:grid;gap:0;align-content:start;
  border-top:1px solid var(--ink-10)}
.about__row{display:grid;grid-template-columns:5.5em 1fr;gap:0 16px;
  padding-block:14px;border-bottom:1px solid var(--ink-10)}
.about__row dt{font-size:12.5px;letter-spacing:.1em;color:var(--pink-text)}
.about__row dd{margin:0;font-size:13.5px;line-height:1.95}


/* =========================================================
   07 お問い合わせ
   ========================================================= */
.contact{text-align:center}
.contact .sec__lead{margin-inline:auto}

/* 大きく見せるメールアドレス。共通の .mail に足す形です */
.mail--big{display:inline-block;margin-top:22px;
  font-family:var(--en);font-size:clamp(19px,2.4vw,30px);letter-spacing:.06em;
  border-bottom:1px solid var(--ink);padding-bottom:6px}

.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:clamp(32px,4.5vw,48px)}
.btns .btn{min-width:min(260px,100%);min-height:56px}


/* =========================================================
   08 動きを減らす設定 ── 演出を飛ばして結果だけ見せます
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .plate-wrap{display:none}
  .tools{position:static;margin-top:20px}
  .js .mark{background-size:100% 100%}
}