@charset "utf-8";
/* R.skip コーポレートサイト 共通スタイル
   値の根拠はすべて デザイン定義書.md にある。ここで新しい値を足すときは、先に定義書に書く。 */
:root{
  /* 2-1 ブランドカラー */
  --kon:#17225E;
  --konzumi:#17103C;
  --jimi:#0B1233;        /* 資料の地色。額縁（ヘッダーの帯とフッター）だけに使う */
  --kami:#FFFFFF;
  --sumi:#1A1315;        /* 本文。薄めずにそのまま使う */

  /* 2-1 文字と罫線の段階（半透明は使わない） */
  --hosoku:#686365;      /* 白地の補足：注記・パンくず（白に対して 5.9） */
  --sen:#D6D5D5;         /* 白地の飾りの罫線 */
  --sub:#D1D3DF;         /* 紺の面の本文・補足（紺に対して 9.9） */
  --rule:#616992;        /* 紺の面の飾りの罫線（白32%相当） */
  --waku-d:#8B90AE;      /* 紺の面のフォームの枠（紺に対して 4.7） */

  /* 2-1 差し色：リンク・番号・小さな印・ボタンの縁だけ */
  --ac:#007B85;          /* 白地の上（白 5.0／ページ頭の淡い地 4.6。これより明るくしない） */
  --ac-on:#5FD3D6;       /* 紺の面の上 */

  /* 2-2 書体 */
  --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --en:"Noto Sans",var(--jp);                      /* 英字の小さなラベル */
  --serif:"Libre Baskerville",Georgia,serif;      /* 英字の見出し */

  /* 2-2 文字サイズの段階（スマホ → PC） */
  --fs-hero:clamp(40px,7.5vw,96px);
  --fs-1:clamp(36px,5vw,64px);      /* ページの見出し（英字） */
  --fs-1j:clamp(32px,3.75vw,48px);  /* ページの見出し（和文） */
  --fs-2:clamp(26px,2.8vw,36px);    /* 面の見出し */
  --fs-3:clamp(20px,1.9vw,24px);    /* 小見出し */
  --fs-lead:clamp(17px,1.4vw,18px); /* リード・読ませる段落 */
  --fs-body:16px;
  --fs-s:14px;                      /* 補足・ラベル。これより小さくしない */

  /* 2-4 余白（8の倍数で5段階） */
  --s1:8px;                         /* ひとかたまり */
  --s2:16px;                        /* 同じ話 */
  --s3:32px;                        /* 同じ面の中 */
  --s4:64px;                        /* 同じ面の別の段 */
  --s5:clamp(64px,8.75vw,112px);    /* 面と面のあいだ */

  /* 2-3 レイアウト */
  --pad:clamp(24px,6vw,80px);
  --maxw:1120px;
  --gut:clamp(16px,2.5vw,32px);     /* 列のあいだ */
  --no-w:48px;                      /* 通し罫に刺す番号の幅 */

  /* 2-11 動き */
  --t:.25s ease;
}
@media (min-width:768px){ :root{ --no-w:64px; } }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--kami);
  color:var(--sumi);
  font-family:var(--jp);
  font-size:var(--fs-body);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* 2-12 キーボードで選んだときの印。デジタル庁と同じ「黒と黄の2重」 */
:focus-visible{
  outline:4px solid #000;
  outline-offset:2px;
  box-shadow:0 0 0 2px #FFD43D;
}

.inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* ── 見出しの共通の頭 ─────────────────── */
.en{
  font-family:var(--en);
  font-size:var(--fs-s);
  letter-spacing:.2em;
  font-weight:700;
  line-height:1.7;
  color:var(--kon);
  margin:0 0 var(--s1);
}
h2{
  font-weight:700;
  font-size:var(--fs-2);
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--kon);
  margin:0;
}
/* 背骨②：見出しの下には必ず線を置く（型カタログ 2節） */
h2::after{
  content:"";display:block;
  width:64px;height:1px;
  background:currentColor;
  margin-top:var(--s2);
}
h3{
  font-weight:700;
  font-size:var(--fs-3);
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--kon);
  margin:0;
}
/* 英字の見出しだけセリフ体（HOW TO など） */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:0;}

/* 見出しのすぐ下は「同じ面の中」の余白 */
.inner > h2 + *{margin-top:var(--s3);}

/* ── ヘッダー ─────────────────────────── */
header{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);
  padding:var(--s2) var(--pad);
  transition:background var(--t);
}
/* 影ではなく罫線で区切る（2-6） */
header.stuck{background:var(--jimi);}
header.stuck::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#282E4C;}
header .logo{height:clamp(24px,2.4vw,32px);width:auto;}
/* 表紙が白地なので、上では紺のロゴ。紺の帯になったら白のロゴに入れ替える */
header .logo-shiro{display:none;}
header.stuck .logo-kon{display:none;}
header.stuck .logo-shiro{display:block;}
nav{display:flex;gap:var(--s3);}
nav a{
  color:var(--kon);text-decoration:none;
  font-size:var(--fs-s);letter-spacing:.14em;font-weight:700;
  white-space:nowrap;
  text-underline-offset:.5em;
}
nav a:hover{text-decoration:underline;}
header.stuck nav a{color:#fff;}
/* 今いるページ（site.js が aria-current を付ける） */
nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;}

/* スマホのメニュー（三本線 → 全面のメニュー）。ボタンは site.js が差し込む */
.menu-btn{display:none;}
@media (max-width:767px){
  .menu-btn{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:48px;height:48px;padding:12px;margin-right:-12px;
    background:none;border:0;cursor:pointer;position:relative;z-index:2;
  }
  .menu-btn span{display:block;height:2px;background:var(--kon);transition:transform var(--t),opacity var(--t);}
  header.stuck .menu-btn span, header.open .menu-btn span{background:#fff;}
  header.open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  header.open .menu-btn span:nth-child(2){opacity:0;}
  header.open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  /* JSが動かないときは、お問い合わせだけ出しておく（前のまま） */
  nav a{display:none;}
  nav a:last-child{display:inline-block;}
  /* JSが動くとき（header.has-menu）は、三本線で開く全面のメニューにする */
  header.has-menu nav a{display:block;}
  header.has-menu nav{
    position:fixed;inset:0;z-index:1;
    background:var(--jimi);
    flex-direction:column;justify-content:center;gap:var(--s3);
    padding:0 var(--pad);
    visibility:hidden;opacity:0;
  }
  /* 開閉の動きは、準備ができてから付ける（読み込んだ瞬間に紺の面がちらつかないように） */
  header.menu-ready nav{transition:opacity var(--t),visibility var(--t);}
  header.open nav{visibility:visible;opacity:1;}
  header.has-menu nav a{color:#fff;font-size:var(--fs-3);letter-spacing:.08em;}
  header.open .logo-kon{display:none;}
  header.open .logo-shiro{display:block;position:relative;z-index:2;}
}

/* ── 表紙 ─────────────────────────────── */
/* 表紙は白地。ジャンルを持たない会社なので、写真ではなくイラストで受ける */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  overflow:hidden;
  background:linear-gradient(170deg,#FFFFFF 0%,#F2F5FB 52%,#E7ECF7 100%);
}
.hero .inner{position:relative;width:100%;padding-top:16vh;padding-bottom:13vh;}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s3);align-items:center;}
@media (min-width:768px){
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:var(--s4);}
}
.hero-zu{width:100%;height:auto;max-width:460px;justify-self:center;}
.hero h1.h1-en{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-hero);
  letter-spacing:-.015em;
  line-height:1.05;
  color:var(--kon);
  margin:0;
}
.hero .hr{width:64px;height:1px;background:var(--kon);margin:var(--s3) 0;}
.hero .lead{
  margin:0;
  font-size:var(--fs-lead);
  letter-spacing:.05em;line-height:1.9;
  max-width:32em;
}

.scroll{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  font-family:var(--en);
  font-size:var(--fs-s);letter-spacing:.3em;color:var(--hosoku);
  display:flex;flex-direction:column;align-items:center;gap:var(--s1);
}
.scroll::after{content:"";width:1px;height:48px;background:linear-gradient(var(--hosoku),rgba(104,99,101,0));}

/* 画面が低いとき（横持ち・小さいノート）は、飾りを消して本文を優先する */
@media (max-height:640px){
  .hero .inner{padding-top:96px;padding-bottom:48px;}
  .scroll{display:none;}
}

/* ── 面の共通 ─────────────────────────── */
section{padding:var(--s5) 0;}
section[id]{scroll-margin-top:88px;}
/* 紺の面は「定義」と「お問い合わせ」だけ（1-2） */
.dark{background:var(--kon);color:#fff;}
.dark .en{color:var(--sub);}
.dark h2, .dark h3{color:#fff;}

/* ── 読ませる段落 ─────────────────────── */
.lead-tx{
  max-width:34em;
  margin:0;
  font-size:var(--fs-lead);
  line-height:1.9;
  letter-spacing:.03em;
}
.lead-tx + .lead-tx{margin-top:var(--s3);}
.lead-tx strong{font-weight:700;color:var(--kon);}
.dark .lead-tx{color:var(--sub);}
.dark .lead-tx strong{color:#fff;}
/* 見出しの下に置くふつうの本文 */
.body-tx{max-width:44em;margin:0;}

/* ── 定義（このサイトの心臓） ──────────── */
.nots{
  display:grid;grid-template-columns:1fr;gap:var(--s2);
}
@media (min-width:768px){ .nots{grid-template-columns:repeat(3,minmax(0,1fr));} }
.not{
  border:1px solid var(--rule);
  padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s1);
}
.not .mk{
  font-family:var(--en);
  font-size:var(--fs-s);letter-spacing:.2em;font-weight:700;
  color:var(--sub);
}
.not .t{font-weight:700;font-size:var(--fs-3);letter-spacing:.04em;line-height:1.5;}
/* 定義の面だけの小さな絵（白い細線。アイコン一式は持たない＝2-7 の例外） */
.not{position:relative;}
.not .ic{position:absolute;right:var(--s3);bottom:var(--s3);width:48px;height:48px;color:var(--sub);}
.idea-ar{display:flex;justify-content:center;margin:var(--s3) 0;color:var(--sub);}
.idea-ar svg{width:24px;height:auto;}
.idea-t{
  margin:0;text-align:center;
  font-weight:700;color:var(--kon);
  font-size:var(--fs-2);letter-spacing:.05em;line-height:1.5;
}
.idea-s{
  margin:var(--s2) 0 0;text-align:center;
  color:var(--hosoku);font-size:var(--fs-lead);letter-spacing:.04em;
}
.dark .idea-t{color:#fff;}
.dark .idea-s{color:var(--sub);}

/* ── 事業 ─────────────────────────────── */
/* 型カタログ B-7：番号を縦の通し罫に刺す */
.biz{position:relative;display:flex;flex-direction:column;gap:var(--s4);}
.biz::before{
  content:"";position:absolute;
  left:calc(var(--no-w) / 2);
  top:.6em;bottom:.6em;width:1px;background:var(--sen);
}
.biz-item{
  display:grid;grid-template-columns:var(--no-w) 1fr;
  column-gap:var(--s3);align-items:start;
}
/* 番号は差し色（2-1） */
.biz-item .no, .step .no{
  font-family:var(--serif);
  font-size:var(--fs-3);line-height:1;
  color:var(--ac);margin:0;text-align:center;
  background:var(--kami);padding:var(--s1) 0;
}
.biz-item .stage{
  display:block;
  font-family:var(--en);
  font-size:var(--fs-s);letter-spacing:.2em;font-weight:700;line-height:1.7;
  color:var(--kon);margin:0 0 var(--s1);
}
@media (max-width:767px){
  .biz::before{display:none;}
  .biz-item{grid-template-columns:1fr;row-gap:var(--s1);}
  .biz-item .no{text-align:left;padding:0;background:none;}
}
.biz-rule{width:64px;height:1px;background:var(--kon);margin:var(--s2) 0 0;}
.biz-item .head-tx > p{margin:var(--s3) 0 0;max-width:44em;}

/* 見出し・導入文の右にイラストを置く */
.biz-item .head{display:grid;grid-template-columns:1fr;gap:var(--s3);}
@media (min-width:768px){
  .biz-item .head{grid-template-columns:1fr 224px;gap:var(--s4);align-items:start;}
}
.biz-item .zu{width:100%;height:auto;max-width:224px;justify-self:center;}
@media (min-width:768px){ .biz-item .zu{justify-self:end;} }

/* 事業の仕事の流れ。紺の丸に白い線の絵＋番号＋名前を、矢印でつなぐ
   （LuaaZ の工程アイコンを参考に、色は紺1色・順番は矢印で見せる＝原則5） */
.parts{
  margin-top:var(--s4);
  display:flex;flex-direction:column;gap:var(--s3);
}
.part{
  position:relative;
  display:grid;grid-template-columns:64px 1fr;column-gap:var(--s2);align-items:center;
}
.part .mk{
  grid-row:1 / span 2;
  width:64px;height:64px;border-radius:50%;
  background:var(--kon);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.part .pic{width:34px;height:34px;}
.part .no{font-family:var(--serif);font-size:var(--fs-s);line-height:1.4;color:var(--ac);align-self:end;}
.part .t{font-weight:700;line-height:1.5;align-self:start;}
/* 次の工程への矢印（スマホは丸の下に下向き） */
.part:not(:last-child)::after{
  content:"↓";position:absolute;left:32px;bottom:calc(-1 * var(--s3));
  transform:translateX(-50%);
  font-weight:700;color:var(--ac);line-height:var(--s3);
}
@media (min-width:768px){
  .parts{flex-direction:row;align-items:flex-start;}
  .part{flex:1 1 0;min-width:0;grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:var(--s1);}
  .part .mk{grid-row:auto;width:88px;height:88px;}
  .part .pic{width:44px;height:44px;}
  .part .no, .part .t{align-self:auto;}
  /* PCは丸と丸のあいだに横向きの矢印 */
  .part:not(:last-child)::after{
    content:"→";left:auto;right:calc(-1 * var(--s3) / 2);bottom:auto;top:44px;
    transform:translate(50%,-50%);
  }
}


/* 矢印リンク（2-10）：青緑の文字＋矢印 */
.more{margin:var(--s3) 0 0;}
.more a{
  display:inline-flex;align-items:center;gap:var(--s1);
  color:var(--ac);text-decoration:none;font-weight:700;
  letter-spacing:.06em;
}
.more .ar{transition:transform var(--t);}
.more a:hover .ar{transform:translateX(4px);}

/* いま動いているもの */
.nowon{
  margin-top:var(--s3);
  display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--sen);padding:var(--s2) var(--s3);
}
.nowon .lbl{
  font-family:var(--en);
  font-size:var(--fs-s);letter-spacing:.2em;font-weight:700;
  color:var(--kon);white-space:nowrap;
}
.nowon .tx{font-weight:700;font-size:var(--fs-lead);letter-spacing:.04em;}
@media (max-width:767px){ .nowon{flex-direction:column;align-items:flex-start;gap:var(--s1);} }

/* ── 手順（縦の通し罫。型カタログ B-7） ── */
.steps{
  position:relative;margin-top:var(--s4);
  display:flex;flex-direction:column;gap:var(--s4);
}
.steps::before{
  content:"";position:absolute;left:calc(var(--no-w) / 2);
  top:.6em;bottom:.6em;width:1px;background:var(--sen);
}
.step{display:grid;grid-template-columns:var(--no-w) 1fr;column-gap:var(--s3);align-items:start;}
.step .rule{width:64px;height:1px;background:var(--kon);margin:var(--s2) 0 0;}
.step p{margin:var(--s2) 0 0;max-width:44em;}
.steps + .lead-tx{margin-top:var(--s4);}

/* ── 見るもの（KPI） ──────────────────── */
.kpi{margin-top:var(--s4);display:grid;grid-template-columns:1fr;gap:var(--s2);}
@media (min-width:768px){ .kpi{grid-template-columns:repeat(3,minmax(0,1fr));} }
.kpi .k{
  border:1px solid var(--sen);padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s1);
}
.kpi .k .mk{font-family:var(--serif);font-size:var(--fs-3);line-height:1;color:var(--ac);}
.kpi .k .t{font-weight:700;font-size:var(--fs-3);line-height:1.5;color:var(--kon);}
.kpi .k .s{line-height:1.9;}
.note-small{margin:var(--s3) 0 0;font-size:var(--fs-s);line-height:1.7;color:var(--hosoku);}

/* ── メンバー ─────────────────────────── */
/* ワンメディア型：写真を左に小さく、名前と実績を右に。1人1行の一覧（2026-09-28）
   写真の雰囲気がそろっていないので、写真は「顔を添える」大きさにとどめ、実績を主役にする */
.members{display:flex;flex-direction:column;border-top:1px solid var(--kon);}
.mem{
  display:flex;flex-direction:column;
  padding:var(--s3) 0;border-bottom:1px solid var(--sen);
}
.mem .shop{width:160px;height:auto;margin-bottom:var(--s2);mix-blend-mode:multiply;}
/* 写真に細い枠：白背景の写真もグレーや黒の写真も、同じ「四角いタイル」に見えるようにそろえる */
.mem .shop, .ceo-ph{border:1px solid var(--sen);}
.mem .nm{
  font-weight:700;font-size:var(--fs-3);letter-spacing:.04em;line-height:1.5;color:var(--kon);margin-bottom:var(--s1);
}
@media (min-width:768px){
  .mem{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:var(--s4);align-items:start;}
  .mem > *{grid-column:2;}
  .mem > .shop{grid-column:1;grid-row:1 / span 10;margin:0;}
}
/* クリエイターとしての実績（一言） */
.mem .wk{line-height:1.7;max-width:40em;}
.mem .wk.top{font-weight:700;}                 /* いちばん大きい実績 */
.mem .wk.sub{margin-top:var(--s1);font-size:var(--fs-s);color:var(--hosoku);}

/* 代表メッセージ（代表だけ本名で、メンバーとは別枠） */
.ceo{max-width:40em;}
/* 代表写真：スマホはメッセージの上、PCは左上（メンバーの一覧と同じく写真を左に） */
.ceo-ph{display:block;width:160px;height:auto;margin-bottom:var(--s3);}  /* メンバーの写真と同じ160px */
@media (min-width:1024px){
  .ceo{max-width:none;display:grid;grid-template-columns:160px minmax(0,40em);column-gap:var(--s4);align-items:start;}
  .ceo > *{grid-column:2;}
  .ceo > .ceo-ph{grid-column:1;grid-row:1 / span 20;margin:0;}
}
.ceo .lead-tx{max-width:none;}
/* メッセージの題（他社も一文の題を立てている：GROVE・ワンメディア） */
.ceo-t{margin:0 0 var(--s3);font-weight:700;font-size:var(--fs-3);line-height:1.5;color:var(--kon);}
/* 署名：肩書きと名前 */
.sign{
  margin:var(--s4) 0 0;max-width:34em;
  display:flex;flex-direction:column;
  border-top:1px solid var(--kon);padding-top:var(--s2);
}
.sign .ro{font-size:var(--fs-s);letter-spacing:.14em;font-weight:700;line-height:1.7;color:var(--hosoku);}
.sign .nm{font-weight:700;font-size:var(--fs-3);letter-spacing:.08em;line-height:1.5;color:var(--kon);margin-bottom:var(--s1);}

/* ── 会社概要（型カタログ B-11） ───────── */
.company-body{display:grid;grid-template-columns:1fr;gap:var(--s3);}
@media (min-width:768px){
  .company-body{grid-template-columns:200px 1fr;gap:var(--s4);align-items:start;}
}
.company-logo img{width:160px;height:auto;}
.dl{margin:0;border-top:1px solid var(--sen);}
.dl .row{
  display:grid;grid-template-columns:1fr;gap:var(--s1);
  padding:var(--s3) 0;border-bottom:1px solid var(--sen);
}
@media (min-width:768px){
  .dl .row{grid-template-columns:160px 1fr;gap:var(--s3);align-items:baseline;}
  .dl dt{text-align:right;}
}
.dl dt{font-size:var(--fs-s);letter-spacing:.14em;font-weight:700;color:var(--kon);margin:0;}
.dl dd{margin:0;}

/* ── お問い合わせフォーム（紺の面） ────── */
.contact{text-align:center;}
.form{max-width:704px;margin:0 auto;text-align:left;}
/* フォームのすぐ上の一文（他社もフォームの前に一文置いている：LuaaZ・GROVE） */
.form-lead{max-width:704px;margin:0 auto var(--s3);color:var(--sub);font-size:var(--fs-lead);}
.field{margin-bottom:var(--s3);}
.field > label{
  display:block;margin-bottom:var(--s1);
  font-size:var(--fs-s);letter-spacing:.12em;font-weight:700;
  color:var(--sub);
}
.field .req{
  margin-left:var(--s1);padding:0 var(--s1);
  border:1px solid var(--waku-d);
  font-size:var(--fs-s);letter-spacing:.1em;font-weight:400;color:#fff;
}
.form input,.form select,.form textarea{
  width:100%;
  background:#252F68;
  border:1px solid var(--waku-d);border-radius:0;
  color:#fff;font-family:inherit;
  font-size:var(--fs-body);line-height:1.7;
  padding:var(--s2);
  transition:border-color var(--t);
}
.form textarea{min-height:9.5em;resize:vertical;}
.form select{appearance:none;}
.form select option{color:var(--sumi);}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#fff;}
.form input::placeholder,.form textarea::placeholder{color:#A2A7BF;}
/* 迷惑メール対策の隠し欄。人には見えない */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ── ボタン（紺の面の上。白地に紺の文字、縁に差し色） ── */
.cta .btn, .form .submit{
  display:inline-block;
  background:#fff;color:var(--kon);
  border:0;border-bottom:3px solid var(--ac-on);border-radius:0;
  font-family:inherit;font-weight:700;
  font-size:var(--fs-body);letter-spacing:.16em;line-height:1.7;
  text-decoration:none;cursor:pointer;
  transition:background var(--t);
}
.cta .btn:hover, .form .submit:hover{background:var(--sub);}
.cta .btn{margin-top:var(--s3);padding:var(--s2) var(--s4);}
.form .submit{width:100%;padding:var(--s2);}
.form .privacy{
  margin-top:var(--s3);font-size:var(--fs-s);line-height:1.7;
  color:var(--sub);text-align:center;
}

/* ── ページの締め（問い合わせへ） ──────── */
.cta{text-align:center;}
.cta h2::after{margin-left:auto;margin-right:auto;}
.cta .note{margin:var(--s3) 0 0;color:var(--sub);}
.form .privacy a{color:var(--ac-on);text-decoration:underline;text-underline-offset:.3em;}

/* ── 足 ───────────────────────────────── */
footer{background:var(--jimi);color:var(--sub);padding:var(--s4) 0;}
footer .inner{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;}
footer img{height:24px;width:auto;}
footer small{font-family:var(--en);font-size:var(--fs-s);letter-spacing:.14em;}
footer .f-link{margin-left:auto;color:var(--sub);font-size:var(--fs-s);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;}
footer .f-link:hover{text-decoration:none;}

/* ── プライバシーポリシー（読む文書なので、見出しは小さく、段落はふつうの本文） ── */
.policy{max-width:44em;}
.policy h2{font-size:var(--fs-3);margin:var(--s4) 0 0;}
.policy h2::after{display:none;}
.policy p, .policy ul{margin:var(--s2) 0 0;}
.policy ul{padding-left:1.4em;}
.policy-dl{margin:var(--s2) 0 0;border-top:1px solid var(--sen);}
.policy-dl dt{font-weight:700;color:var(--kon);padding-top:var(--s2);}
.policy-dl dd{margin:0;padding:var(--s1) 0 var(--s2);border-bottom:1px solid var(--sen);}
.policy a{color:var(--ac);text-decoration:underline;text-underline-offset:.3em;}
.policy-date{margin-top:var(--s4);color:var(--hosoku);font-size:var(--fs-s);}

/* ── 出てくる動き（2-11） ─────────────── */
.rise{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease;}
.rise.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rise{opacity:1;transform:none;transition:none;}
  *{transition-duration:0s !important;}
}

/* ══════════════════════════════════════
   下層ページ
   ══════════════════════════════════════ */
.page-head{
  background:linear-gradient(170deg,#FFFFFF 0%,#F2F5FB 60%,#E7ECF7 100%);
  padding:clamp(128px,16vh,192px) 0 var(--s4);
}
.page-head h1{
  font-weight:700;
  font-size:var(--fs-1j);letter-spacing:.04em;line-height:1.5;
  margin:0;color:var(--kon);
}
.page-head h1.serif{font-size:var(--fs-1);line-height:1.1;}
.page-head h1::after{
  content:"";display:block;width:64px;height:1px;
  background:currentColor;margin-top:var(--s3);
}
.page-head .lead{
  margin:var(--s3) 0 0;max-width:40em;
  font-size:var(--fs-lead);line-height:1.9;
}
/* パンくず：補足の色。リンクは文中リンク（青緑＋下線） */
.crumb{
  margin:0 0 var(--s3);
  font-size:var(--fs-s);letter-spacing:.1em;line-height:1.7;
  color:var(--hosoku);
}
.crumb a{color:var(--ac);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;}
.crumb a:hover{text-decoration:none;}

/* イラストは白背景のPNG。明るい地の上では白が四角く浮くので、
   乗算で背景になじませる（白は透明に、紺はそのまま残る） */
.hero-zu, .biz-item .zu, .step-zu{ mix-blend-mode:multiply; }

/* HOW TO の3段の絵。高さをそろえて置くので、店が増えるほど絵が横に伸びる（＝連なりが見える） */
.step-zu{display:block;height:120px;width:auto;max-width:100%;object-fit:contain;object-position:left;margin-top:var(--s3);}
@media (min-width:768px){ .step-zu{height:176px;} }

/* ══════════════════════════════════════
   トップの入口カード
   ══════════════════════════════════════ */
.cards{
  margin-top:var(--s4);
  display:grid;grid-template-columns:1fr;gap:var(--gut);
}
@media (min-width:768px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* 影で浮かせない。罫線が紺になり、矢印が動く（2-6・2-11） */
.card{
  display:flex;flex-direction:column;
  border:1px solid var(--sen);
  padding:var(--s3);
  text-decoration:none;color:inherit;background:#fff;
  transition:border-color var(--t);
}
.card:hover{border-color:var(--kon);}
.card h2{font-size:var(--fs-2);}
.card p{margin:var(--s3) 0 0;flex:1;}
.card .go{
  margin-top:var(--s3);
  display:inline-flex;align-items:center;gap:var(--s1);
  font-weight:700;letter-spacing:.06em;
  color:var(--ac);
}
.card .go .ar{transition:transform var(--t);}
.card:hover .go .ar{transform:translateX(4px);}

/* 下層ページの「次へ」：独立した面にせず、本文の終わりに1本の帯で置く（Codexレビュー 2026-09-24） */
#next{padding:0 0 var(--s5);}
.next-nav a{
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--s3);
  border-top:1px solid var(--kon);border-bottom:1px solid var(--sen);
  padding:var(--s3) 0;
  text-decoration:none;color:inherit;
}
.next-nav .lb{
  grid-column:1;
  font-family:var(--en);
  font-size:var(--fs-s);letter-spacing:.2em;font-weight:700;line-height:1.7;
  color:var(--kon);
}
.next-nav .tx{grid-column:1;margin-top:var(--s1);color:var(--hosoku);line-height:1.7;}
.next-nav .nm{
  grid-column:1;
  font-weight:700;font-size:var(--fs-2);line-height:1.5;color:var(--kon);
}
/* 矢印は右端に大きく。押せることが一目で分かるように */
.next-nav a::after{
  content:"→";grid-column:2;grid-row:1 / span 3;
  font-weight:700;font-size:var(--fs-2);color:var(--ac);
  transition:transform var(--t);
}
.next-nav a:hover::after{transform:translateX(8px);}
.next-nav a:hover .nm{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;}