@charset "UTF-8";
/* ============================================================
   株式会社ハトミ コーポレートサイト｜共通スタイル
   デザイン: A-Light「FLOW」
   - 地は白。ブランドグラデーション（マゼンタ #E51373 → 濃紺 #182987）は
     "光"ではなく"線と面"として使う
   - 署名要素: 5分割のブロック（TOPのキービジュアル＝動画の短冊、
     下層ページ＝ページヘッダーの縦帯）と、見出しの一部に掛かるグラデーション
   ============================================================ */

:root{
  --paper:    #F5F6FA;
  --paper-2:  #FFFFFF;
  --ink:      #101227;
  --ink-2:    #565A76;
  --ink-3:    #676C90;
  --line-3:   #8B8FA8;   /* 装飾の罫線のみ。文字には使わない */
  --line:     #DCDFEA;
  --line-2:   #EAECF3;
  --navy:     #182987;
  --violet:   #5C2180;
  --magenta:  #E51373;
  --grad:     linear-gradient(100deg, #DE1370 0%, #7A1E7D 42%, #2F2684 72%, #182987 100%);
  --ok:       #1B7F5A;
  --alert:    #C4143F;
  --gap:      10px;
  --pad:      clamp(20px, 5vw, 80px);
  --maxw:     1560px;
  --readw:    920px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight:400; line-height:1.85; letter-spacing:.02em;
  overflow-x:hidden;
  line-break:strict;   /* 長音符・小書き仮名の行頭を禁じる */
}
img,svg,video,canvas{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--magenta); outline-offset:4px; border-radius:2px}
::selection{background:rgba(229,19,115,.16)}

/* キーボード操作でヘッダーを読み飛ばすためのリンク。フォーカス時だけ現れる */
.skip{
  position:fixed; left:16px; top:-100px; z-index:100;
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  padding:.7em 1.2em; font-size:.9rem; font-weight:700; box-shadow:0 10px 30px rgba(16,18,39,.16);
  transition:top .2s;
}
.skip:focus{top:16px}

/* 背景の流線（全ページ共通の通奏低音） */
#flow{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5}

/* ---------- 汎用 ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2}
.read{max-width:var(--readw)}
section{position:relative; z-index:2}
.bg-white{background:var(--paper-2)}
.bd-top{border-top:1px solid var(--line)}

.eyebrow{
  font-family:"Bricolage Grotesque", sans-serif;
  font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:.7em; margin:0;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--grad); flex:none}
.eyebrow{flex-wrap:wrap}
.gtext{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.sec-title{font-size:clamp(1.9rem, 4.4vw, 3.1rem); font-weight:900; line-height:1.24; letter-spacing:.01em; margin:.5em 0 0}
@media(max-width:420px){ .sec-title{font-size:clamp(1.6rem, 4.4vw, 3.1rem)} }
.sub-title{font-size:clamp(1.25rem,2.4vw,1.7rem); font-weight:900; line-height:1.4; margin:0}
.lead{color:var(--ink-2); font-size:clamp(.94rem,1.35vw,1.06rem); max-width:56ch}
.note{font-size:.78rem; color:var(--ink-3)}
.mono{font-family:"Bricolage Grotesque",sans-serif; letter-spacing:.04em}
.nw{white-space:nowrap}   /* 住所・電話番号など、途中で折ってはいけない塊 */

/* 部分グラデーションの見出し（範囲はJSが塗り分ける） */
.split .ch{display:inline-block; will-change:transform,opacity}
/* 1文字ずつ inline-block に割ると禁則処理が効かなくなるため、
   行頭に来てはいけない文字はJSがこの塊に入れて折り返しを禁じる */
.split .chg{white-space:nowrap}
.split .ch.g{
  color:transparent; background-image:var(--grad); background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; padding:.85em 1.5em; border-radius:999px;
  font-family:inherit; font-weight:700; font-size:.86rem; letter-spacing:.04em;
  background:var(--grad); color:#fff; border:0; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(122,30,125,.3)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn.ghost:hover{border-color:transparent; background:var(--grad); color:#fff; box-shadow:0 12px 34px rgba(90,33,128,.28)}
.btn.lg{padding:1.05em 2.1em; font-size:.94rem}
.btn .arw{transition:transform .3s}
.btn:hover .arw{transform:translateX(4px)}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* ---------- ヘッダー ---------- */
header.site{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--pad);
  transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
header.site.stuck{background:rgba(245,246,250,.86); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
body:not(.has-kv) header.site{background:rgba(245,246,250,.86); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.logo{width:clamp(132px,13vw,178px); height:auto; color:var(--ink)}
header.site nav{display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
header.site nav a{font-size:.84rem; font-weight:500; color:#3B3F60; position:relative; padding:6px 0}
header.site nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--grad); transition:right .35s cubic-bezier(.2,.8,.2,1)}
header.site nav a:hover::after, header.site nav a[aria-current]::after{right:0}
header.site nav a[aria-current]{color:var(--ink); font-weight:700}
.hd-right{display:flex; align-items:center; gap:14px}
.tel{font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:.9rem; letter-spacing:.04em}
header.site .btn{padding:.7em 1.25em}
.menu-btn{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  background:var(--paper-2); color:var(--ink); cursor:pointer; place-items:center; padding:0;
}
.menu-btn span{display:block; width:18px; height:1px; background:currentColor; transition:.3s}
.menu-btn span + span{margin-top:5px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
#mnav{
  position:fixed; inset:0; z-index:55; background:rgba(245,246,250,.97); backdrop-filter:blur(10px);
  display:grid; align-content:center; gap:.2em; padding:0 var(--pad);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; overflow-y:auto;
}
#mnav.open{opacity:1; visibility:visible}
#mnav a{font-size:1.35rem; font-weight:700; padding:.42em 0; border-bottom:1px solid var(--line)}
#mnav .mn-sub{font-size:.95rem; font-weight:500; color:var(--ink-2); padding-left:1.2em}
@media(max-width:1080px){
  header.site nav, header.site .tel{display:none}
  .menu-btn{display:grid}
}

/* ---------- 下層ページのヘッダー ---------- */
.page-hero{
  position:relative; padding:clamp(120px,17vh,190px) 0 clamp(36px,5vw,64px);
  overflow:hidden; background:var(--paper-2); border-bottom:1px solid var(--line);
}
/* TOPのキービジュアル（5分割）の名残としての縦帯 */
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(220,223,234,.9) 0 1px, transparent 1px calc(20% - 0px));
}
.page-hero::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:min(34vw,420px); pointer-events:none;
  background:linear-gradient(100deg, rgba(229,19,115,.09), rgba(24,41,135,.1)); opacity:.7;
  clip-path:polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{
  font-size:clamp(2rem,5.2vw,4rem); font-weight:900; line-height:1.16; letter-spacing:.005em; margin:.34em 0 0;
}
.page-hero .lead{margin-top:1.2em}
@media(max-width:420px){ .page-hero h1{font-size:clamp(1.6rem, 5.2vw, 4rem)} }
.crumbs{
  display:flex; flex-wrap:wrap; gap:.5em; align-items:center; margin:1.8em 0 0;
  font-size:.74rem; color:var(--ink-3); font-family:"Bricolage Grotesque",sans-serif; letter-spacing:.06em;
}
.crumbs a:hover{color:var(--magenta)}
.crumbs span{opacity:.5}

/* ---------- セクション ---------- */
.sec{padding:clamp(56px,9vh,120px) 0}
.sec-sm{padding:clamp(40px,6vh,80px) 0}
.sec-head{margin-bottom:clamp(26px,3.6vw,48px)}

/* ---------- カード類 ---------- */
.cards{display:grid; gap:var(--gap)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){ .cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:760px){ .cols-4,.cols-3,.cols-2{grid-template-columns:1fr} }

.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .4s;
}
a.card:hover{transform:translateY(-8px); border-color:rgba(229,19,115,.4); box-shadow:0 22px 46px rgba(16,18,39,.12)}
.card .ph{position:relative; aspect-ratio:4/3; overflow:hidden; background:#E7EAF3}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
a.card:hover .ph img{transform:scale(1.06)}
.card .tx{padding:clamp(16px,1.8vw,24px); display:flex; flex-direction:column; gap:.45em; flex:1}
.card h3{margin:0; font-size:clamp(1rem,1.5vw,1.2rem); font-weight:700}
.card p{margin:0; font-size:.85rem; color:var(--ink-2); flex:1}
.card .go{font-family:"Bricolage Grotesque",sans-serif; font-size:.72rem; letter-spacing:.14em; color:var(--navy); display:flex; align-items:center; gap:.5em}
a.card:hover .go{color:var(--magenta)}
.card .go i{font-style:normal; transition:transform .3s}
a.card:hover .go i{transform:translateX(4px)}
/* 取扱品目カードは図版（4:3）に合わせる */
.card.item .ph{aspect-ratio:4/3; background:#EEF0F7}
.card.item .ph img{object-fit:contain}
a.card.item:hover .ph img{transform:scale(1.04)}

/* 制作実績カードはスクリーンショットに合わせて横長に */
.card.work .ph{aspect-ratio:16/10}
.card.work .ph img{object-position:top center}
.card .idx{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:"Bricolage Grotesque",sans-serif; font-size:.66rem; letter-spacing:.18em; color:var(--ink-2);
  background:rgba(255,255,255,.92); padding:3px 8px; border-radius:2px;
}

/* ---------- ダミー表示 ---------- */
.dummy{
  position:relative;
  background:
    radial-gradient(110% 80% at 22% 8%, rgba(229,19,115,.16), transparent 60%),
    radial-gradient(100% 90% at 88% 96%, rgba(24,41,135,.2), transparent 62%),
    #EDEFF7;
}
.dummy::after{
  content:attr(data-label); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:"Bricolage Grotesque",sans-serif; font-size:.64rem; letter-spacing:.16em; color:#767A9B;
  border:1px dashed #B9BDD2; padding:5px 10px; border-radius:2px; white-space:nowrap; background:rgba(255,255,255,.6);
}
.dummy-note{
  display:inline-flex; align-items:center; gap:.5em; font-size:.72rem; color:#767A9B;
  border:1px dashed #B9BDD2; border-radius:2px; padding:4px 10px; background:rgba(255,255,255,.6);
}

/* ---------- 定義リスト（会社概要・店舗情報など） ---------- */
.dl{display:grid; grid-template-columns:minmax(120px,190px) 1fr; border-top:1px solid var(--line)}
.dl > dt, .dl > dd{padding:clamp(14px,1.8vw,20px) 0; border-bottom:1px solid var(--line); margin:0}
.dl > dt{font-size:.84rem; color:var(--ink-2); font-weight:700; padding-right:16px}
.dl > dd{font-size:.92rem}
@media(max-width:620px){
  .dl{grid-template-columns:1fr}
  .dl > dt{padding-bottom:0; border-bottom:0}
  .dl > dd{padding-top:.3em}
}

/* ---------- 表 ---------- */
.table{width:100%; border-collapse:collapse; font-size:.9rem; background:var(--paper-2)}
.table th, .table td{border:1px solid var(--line); padding:clamp(10px,1.4vw,16px); text-align:left; vertical-align:top}
.table th{background:#F1F3F9; font-weight:700; font-size:.84rem; white-space:nowrap}
.table td:first-child, .table td:nth-child(2){white-space:nowrap}
@media(max-width:760px){ .table{min-width:600px} }
.table-scroll{overflow-x:auto; border-radius:4px; -webkit-overflow-scrolling:touch}
.table-note{font-size:.78rem; color:var(--ink-2); margin:0 0 .7em; display:none}
@media(max-width:760px){ .table-note{display:block} }

/* ---------- ステップ（制作の流れ） ---------- */
.steps{counter-reset:step; display:grid; gap:var(--gap)}
.step{
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px;
  padding:clamp(20px,2.4vw,32px); display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2.4vw,32px);
}
.step .n{
  counter-increment:step; font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:clamp(1.6rem,3vw,2.4rem); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step .n::before{content:"0" counter(step)}
.step h3{margin:0 0 .4em; font-size:clamp(1.05rem,1.8vw,1.3rem); font-weight:900}
.step p{margin:0; font-size:.88rem; color:var(--ink-2)}
.step .dur{
  display:inline-block; margin-top:.8em; font-family:"Bricolage Grotesque",sans-serif;
  font-size:.7rem; letter-spacing:.12em; color:var(--ink-3); border:1px solid var(--line);
  border-radius:999px; padding:2px 10px;
}
@media(max-width:620px){ .step{grid-template-columns:1fr} }

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:clamp(16px,2vw,24px) 44px clamp(16px,2vw,24px) 0;
  position:relative; font-weight:700; font-size:clamp(.95rem,1.4vw,1.08rem); transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:12px; top:50%; width:12px; height:12px; margin-top:-6px;
  border-right:1px solid var(--ink-2); border-bottom:1px solid var(--ink-2);
  transform:rotate(45deg); transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{padding-left:10px}
.faq .a{padding:0 44px clamp(20px,2.4vw,28px) 0; color:var(--ink-2); font-size:.9rem; margin:0}

/* ---------- 沿革 ---------- */
.hist{border-top:1px solid var(--line)}
.hist .row{
  display:grid; grid-template-columns:minmax(90px,140px) 1fr; gap:clamp(14px,3vw,40px);
  padding:clamp(16px,2vw,24px) 0; border-bottom:1px solid var(--line); position:relative;
}
.hist .y{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1.05rem,1.8vw,1.35rem)}
.hist .row:first-child .y, .hist .row:last-child .y{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hist .t{font-size:.92rem; color:var(--ink-2)}

/* ---------- フォーム ---------- */
.form{display:grid; gap:clamp(18px,2.4vw,28px); max-width:var(--readw)}
.field{display:grid; gap:.5em}
.field > label{font-size:.85rem; font-weight:700; display:flex; align-items:center; gap:.6em}
.req, .opt{
  font-family:"Bricolage Grotesque",sans-serif; font-size:.6rem; letter-spacing:.1em;
  border-radius:2px; padding:2px 7px; font-weight:600;
}
.req{background:var(--grad); color:#fff}
.opt{background:var(--line-2); color:var(--ink-2)}
.field .hint{font-size:.76rem; color:var(--ink-3)}
input[type=text], input[type=email], input[type=tel], input[type=url], select, textarea{
  font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:3px; padding:.85em 1em; width:100%;
  transition:border-color .25s, box-shadow .25s;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{
  outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(92,33,128,.12);
}
.radios label:has(input:focus-visible){outline:2px solid var(--magenta); outline-offset:2px}
.consent:has(input:focus-visible){outline:2px solid var(--magenta); outline-offset:2px}
textarea{min-height:170px; resize:vertical; line-height:1.8}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat}
.radios{display:flex; flex-wrap:wrap; gap:8px}
.radios label{
  display:inline-flex; align-items:center; gap:.5em; border:1px solid var(--line); background:var(--paper-2);
  border-radius:999px; padding:.6em 1.1em; font-size:.85rem; cursor:pointer; transition:.25s;
}
.radios label:hover{border-color:var(--line-3)}
.radios input{accent-color:var(--violet)}
.radios label:has(input:checked){border-color:transparent; background:var(--grad); color:#fff}
.consent{display:flex; align-items:flex-start; gap:.7em; font-size:.86rem; background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:clamp(14px,2vw,20px)}
.consent input{margin-top:.35em; accent-color:var(--violet)}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
/* 機械的な送信を弾くための項目。人には見せない。
   display:none だと埋めてくるbotがいるので、位置で画面外へ出す */
.hp{position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden}
.err{color:var(--alert); font-size:.78rem; display:none}
.field.invalid .err{display:block}
.field.invalid input, .field.invalid textarea, .field.invalid select{border-color:var(--alert)}

/* ---------- 記事 ---------- */
.article{max-width:var(--readw)}
.article h2{font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:900; margin:2.4em 0 .8em; line-height:1.5}
.article h3{font-size:clamp(1.05rem,1.7vw,1.25rem); font-weight:700; margin:2em 0 .6em}
.article p{margin:0 0 1.6em; font-size:.96rem}
.article ul, .article ol{margin:0 0 1.6em; padding-left:1.4em; font-size:.96rem}
.article li{margin-bottom:.5em}
.article img{border-radius:4px; margin:2em 0}
.article a{text-decoration:underline; text-underline-offset:3px; color:var(--navy)}
.article a:hover{color:var(--magenta)}

/* ---------- お知らせ一覧 ---------- */
.news-list{border-top:1px solid var(--line)}
.news-item{
  display:grid; grid-template-columns:auto auto 1fr auto; gap:clamp(14px,2.4vw,32px); align-items:center;
  padding:clamp(18px,2.2vw,26px) 0; border-bottom:1px solid var(--line); transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.news-item:hover{padding-left:14px}
.news-item time{font-family:"Bricolage Grotesque",sans-serif; font-size:.82rem; color:var(--ink-3); letter-spacing:.06em}
.tag{font-size:.68rem; letter-spacing:.12em; border:1px solid var(--line); padding:3px 9px; border-radius:999px; color:var(--ink-2); white-space:nowrap}
.news-item p{margin:0; font-size:.95rem}
.news-item .arw{color:var(--ink-3); transition:.3s}
.news-item:hover .arw{color:var(--magenta); transform:translateX(5px)}
@media(max-width:700px){
  .news-item{grid-template-columns:auto 1fr}
  .news-item p{grid-column:1/-1}
  .news-item .arw{display:none}
}
.pager{display:flex; gap:6px; justify-content:center; margin-top:clamp(30px,4vw,50px)}
.pager a, .pager span{
  min-width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:3px; font-family:"Bricolage Grotesque",sans-serif; font-size:.82rem; background:var(--paper-2);
}
.pager a:hover{border-color:var(--line-3)}
.pager [aria-current]{background:var(--grad); border-color:transparent; color:#fff}

/* ---------- ページ下部の共通CTA ---------- */
.cta-band{padding:clamp(56px,9vh,120px) 0}
.cta-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); margin-top:clamp(26px,3.4vw,44px)}
.cta-card{
  position:relative; overflow:hidden; border-radius:4px; padding:clamp(26px,3.4vw,48px);
  border:1px solid var(--line); background:var(--paper-2);
  display:flex; flex-direction:column; gap:1em; min-height:220px; justify-content:space-between; transition:.45s;
}
.cta-card::before{content:""; position:absolute; inset:0; background:var(--grad); opacity:0; transition:opacity .45s; z-index:0}
.cta-card:hover::before{opacity:1}
.cta-card:hover{border-color:transparent; transform:translateY(-6px); color:#fff; box-shadow:0 24px 50px rgba(122,30,125,.24)}
.cta-card > *{position:relative; z-index:1}
.cta-card h3{margin:0; font-size:clamp(1.1rem,2.1vw,1.5rem); font-weight:900}
.cta-card p{margin:0; font-size:.86rem; color:var(--ink-2)}
.cta-card:hover p{color:#fff}
.cta-card .go{font-family:"Bricolage Grotesque",sans-serif; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:.6em}
.cta-tel{
  margin-top:var(--gap); border:1px solid var(--line); border-radius:4px; background:var(--paper-2);
  padding:clamp(20px,2.4vw,30px) clamp(24px,3vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.cta-tel b{font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:700; letter-spacing:-.01em}
.cta-tel span{font-size:.8rem; color:var(--ink-3)}
@media(max-width:760px){ .cta-grid{grid-template-columns:1fr} }

/* ---------- フッター ---------- */
footer.site{border-top:1px solid var(--line); background:var(--paper-2); padding:clamp(50px,7vw,80px) 0 40px; position:relative; z-index:2}
.foot-top{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.7fr)); gap:clamp(24px,4vw,50px)}
.foot-top h2{margin:0 0 1em; font-family:"Bricolage Grotesque",sans-serif; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.foot-top ul{list-style:none; margin:0; padding:0; display:grid; gap:.6em; font-size:.86rem}
.foot-top a:hover{color:var(--magenta)}
.foot-addr{font-size:.84rem; color:var(--ink-2); margin:1.4em 0 0; line-height:2}
.foot-bottom{margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.74rem; color:var(--ink-3)}
/* 1fr は minmax(auto,1fr) と同じで、住所の min-content 幅に左カラムが引っ張られる。
   その分だけ右カラムが潰れてリンクが「ホームペー／ジ制作」のように折れるため、
   minmax(0,1fr) で必ず等幅にする。 */
@media(max-width:860px){ .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))} }


/* ---------- モバイルでの可読性とタップ領域 ---------- */
/* ロゴリンクは高さが足りずタップしづらいので下限を設ける */
header.site > a{display:inline-flex; align-items:center; min-height:44px}
footer.site .foot-top a, #mnav a{display:inline-block; min-height:24px}

@media(max-width:600px){
  /* ヘッダー：ボタンが折り返してロゴを圧迫していたので詰める */
  header.site{gap:10px; padding:12px var(--pad)}
  .logo{width:114px}
  header.site .btn{padding:.62em .95em; font-size:.78rem; white-space:nowrap}
  header.site .btn .arw{display:none}
  /* 英字ラベルに日本語が混ざる箇所があり、10px台前半だと読みにくい */
  .eyebrow{font-size:.78rem; letter-spacing:.14em}
  #hero .eyebrow{font-size:.8rem}
  .tag{font-size:.76rem; padding:4px 10px}
  .req, .opt{font-size:.76rem; padding:4px 10px}
  .card .idx{font-size:.74rem}
  .card .go, .cta-card .go{font-size:.8rem}
  .step .dur{font-size:.78rem}
  .crumbs{font-size:.78rem}
  .news-item time{font-size:.86rem}
  .foot-top h2{font-size:.76rem}
  /* 2カラムだと1カラム約128px（320px幅の端末）しかなく、
     「プライバシーポリシー」が3行に折れる。この幅では1カラムに切り替える。 */
  .foot-top{grid-template-columns:minmax(0,1fr); gap:clamp(26px,7vw,34px)}
  .foot-addr{margin-top:1.1em}
  .note{font-size:.82rem}
  .dummy-note{font-size:.78rem}
  /* サイドバーのリンクはタップ領域を確保する */
  .field .hint{font-size:.8rem}
}

/* 電話番号のリンクは見た目を変えない（tel: はスマホでの発信用） */
.tel a, .foot-addr a, .cta-tel a, .tel-b a, .direct a{color:inherit; text-decoration:none}
.tel a:hover, .foot-addr a:hover, .cta-tel a:hover, .tel-b a:hover{text-decoration:underline}

/* ---------- モーション ---------- */
.js .rv{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}

#cur{
  position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%; z-index:99;
  border:1px solid rgba(16,18,39,.42); pointer-events:none; mix-blend-mode:multiply;
  transform:translate(-50%,-50%); transition:width .3s, height .3s, background .3s, border-color .3s;
}
#cur.big{width:76px; height:76px; background:rgba(16,18,39,.12); border-color:transparent}
@media(hover:none){ #cur{display:none} }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto; scroll-padding-top:96px}
  .rv{opacity:1; transform:none}
}

/* ============================================================
   TOPページ専用
   ============================================================ */
#hero{height:100svh; min-height:620px; position:relative; overflow:hidden; z-index:2}
#slats{position:absolute; inset:0; width:100%; height:100%}
/* 動画の実体。短冊モードでは canvas の描画元にするだけなので、画面外に逃がす。
   以前はインライン style で持たせていたが、モバイルで背景動画として出す必要が
   できたためCSSに移し、クラスで切り替えられるようにした。 */
#kv{position:absolute; left:0; top:0; width:2px; height:2px; opacity:.01; pointer-events:none}
/* モバイル：短冊にせず、そのまま全面の背景動画にする */
#hero.kv-plain #slats{display:none}
#hero.kv-plain{background:var(--paper-2) center/cover no-repeat}
#hero.kv-plain #kv{width:100%; height:100%; object-fit:cover; opacity:1}
#hero .veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(245,246,250,.9) 0%, rgba(245,246,250,.12) 24%, rgba(245,246,250,.5) 48%, rgba(245,246,250,.95) 68%, var(--paper) 94%),
    radial-gradient(76% 54% at 16% 90%, rgba(255,255,255,.96), transparent 68%);
}
#hero .grain{
  position:absolute; inset:0; opacity:.09; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}
.hero-inner{
  position:absolute; inset:auto 0 0; padding:0 var(--pad) clamp(40px,7vh,72px);
  display:grid; gap:clamp(18px,2.4vw,30px); max-width:var(--maxw); margin-inline:auto; left:0; right:0;
}
#hero .eyebrow{color:var(--ink); font-weight:700}
h1.hero-h{margin:0; font-weight:900; line-height:1.02; letter-spacing:-.01em; font-size:clamp(2.9rem, 8.9vw, 8.4rem)}
.hero-sub{max-width:46ch; color:#3E4260; font-size:clamp(.95rem,1.4vw,1.12rem); margin:0}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-meta{
  position:absolute; top:clamp(90px,13vh,130px); right:var(--pad); writing-mode:vertical-rl;
  font-family:"Bricolage Grotesque",sans-serif; font-size:.66rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(16,18,39,.42);
}
.scroll-hint{position:absolute; bottom:0; left:var(--pad); width:1px; height:clamp(40px,7vh,72px); background:linear-gradient(180deg, transparent, var(--magenta))}
@media(max-width:900px){ .hero-meta{display:none} }

#ticker{border-block:1px solid var(--line); background:rgba(255,255,255,.72); backdrop-filter:blur(6px); padding:22px 0; overflow:hidden; position:relative; z-index:3}
.tick-track{display:flex; width:max-content; animation:tick 44s linear infinite}
@keyframes tick{ to{ transform:translateX(-50%) } }
#ticker:hover .tick-track{animation-play-state:paused}
.tick-item{display:flex; align-items:baseline; gap:.8em; padding-inline:clamp(26px,4vw,58px); border-right:1px solid var(--line); white-space:nowrap}
.tick-item b{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1.5rem,3vw,2.35rem); letter-spacing:-.02em; line-height:1}
.tick-item span{font-size:.78rem; color:var(--ink-3); letter-spacing:.1em}

.biz-list{margin-top:clamp(36px,5vw,64px); border-top:1px solid var(--line)}
.biz-row{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto; gap:clamp(16px,3vw,44px);
  align-items:center; padding:clamp(26px,3.6vw,46px) 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .5s cubic-bezier(.2,.8,.2,1);
}
.biz-row:hover{padding-left:clamp(10px,1.6vw,26px)}
.biz-row h3{margin:0; font-size:clamp(1.35rem,3vw,2.3rem); font-weight:900; line-height:1.3; display:flex; align-items:center; gap:.6em; flex-wrap:wrap}
.biz-row h3 em{font-family:"Bricolage Grotesque",sans-serif; font-style:normal; font-weight:500; font-size:.42em; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.biz-row p{margin:0; color:var(--ink-2); font-size:.93rem}
.biz-go{width:52px; height:52px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; flex:none; transition:.35s; color:var(--ink); background:var(--paper-2)}
.biz-row:hover .biz-go{background:var(--grad); border-color:transparent; color:#fff; transform:rotate(-45deg)}
.biz-bg{
  position:fixed; z-index:1; top:50%; right:6vw; width:min(34vw,460px); aspect-ratio:4/3;
  transform:translate(0,-50%) scale(.94); opacity:0; pointer-events:none; border-radius:6px; overflow:hidden;
  transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); box-shadow:0 40px 80px rgba(16,18,39,.22);
}
.biz-bg img{width:100%; height:100%; object-fit:cover}
.biz-bg.on{opacity:1; transform:translate(0,-50%) scale(1)}
@media(max-width:900px){
  .biz-row{grid-template-columns:1fr auto}
  .biz-row p{grid-column:1 / -1}
  .biz-bg{display:none}
}

.web-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(30px,5vw,80px); align-items:center}
.web-visual{position:relative}
.web-visual img{width:100%; filter:drop-shadow(0 30px 50px rgba(16,18,39,.16))}
.web-visual::before{content:""; position:absolute; inset:-10% -6%; border-radius:50%; background:radial-gradient(circle, rgba(229,19,115,.16), transparent 66%); filter:blur(50px)}
@media(max-width:900px){ .web-top{grid-template-columns:1fr} }

.plan-card{
  border:1px solid var(--line); border-radius:4px; padding:clamp(20px,2.2vw,30px); background:var(--paper-2);
  display:flex; flex-direction:column; gap:.5em; transition:.4s;
}
.plan-card:hover{border-color:rgba(229,19,115,.4); transform:translateY(-6px); box-shadow:0 20px 40px rgba(16,18,39,.1)}
.plan-card h3{margin:0; font-family:"Bricolage Grotesque",sans-serif; letter-spacing:.14em; font-size:.76rem; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.plan-card .price{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.02em}
.plan-card .price i{font-style:normal; font-size:.44em; color:var(--ink-2); margin-left:.3em; letter-spacing:0}
.plan-card p{margin:0; font-size:.83rem; color:var(--ink-2)}
.plan-card ul{margin:.4em 0 0; padding-left:1.2em; font-size:.8rem; color:var(--ink-2)}
.plan-card li{margin-bottom:.3em}

.store-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper-2)}
.store-card .pic{position:relative; min-height:300px}
.store-card .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.store-card .txt{padding:clamp(26px,3.6vw,52px); display:flex; flex-direction:column; gap:1em; justify-content:center}
.store-card dl{display:grid; grid-template-columns:auto 1fr; gap:.4em 1.4em; margin:0; font-size:.84rem}
.store-card dt{color:var(--ink-3); letter-spacing:.08em}
.store-card dd{margin:0}
@media(max-width:860px){ .store-card{grid-template-columns:1fr} }

/* ---------- モバイル：TOP専用スタイルより後ろに置く必要がある指定 ---------- */
@media(max-width:600px){
  /* 「い。」だけが2行目に落ちるため、1行に収まる下限にする */
  h1.hero-h{font-size:clamp(2.2rem, 8.9vw, 8.4rem)}
}