@charset "utf-8";
/* =========================================================
   KAKERU Inc. — common stylesheet
   アクセント色を変えたい時は :root の --accent 系だけ触ればOK
   （赤に戻すなら --accent:#FE373F; 朱なら --accent:#CE3E27; --accent-ink:#FFFDF8;）
   ========================================================= */

:root{
  /* --- color --- */
  --paper:      #EFEBE3;   /* 生成り（背景） */
  --gofun:      #FFFDF8;   /* 胡粉（カード面） */
  --ink:        #14110F;   /* 墨（罫・文字） */
  --ink-60:     #5F5952;   /* 補助文字 */
  --accent:     #FF0064;   /* ブランドピンク（メインビジュアルから採色） */
  --accent-ink: #FFFFFF;   /* ピンクの上に乗るUI文字。小さい字は白のほうが読める */
  --x:          #FFFF00;   /* ブランドの黄色。大きい文字・記号にだけ使う */
  --ai:         #1C3B5A;   /* 藍（北斎の波より） */
  --kin:        #A98A4B;   /* 金泥（招福の金より） */
  /* 背景のにじみ。商品の色を彩度を落として使う */
  --glow-ai:    rgba(28,59,90,.30);
  --glow-pink:  rgba(255,0,100,.17);
  --glow-kin:   rgba(169,138,75,.30);
  --glow-mizu:  rgba(126,155,184,.34);
  --line:       var(--ink);

  /* --- type --- */
  --mincho: "Shippori Mincho B1","Shippori Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN","Noto Serif JP",serif;
  --gothic: "Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;

  /* --- layout --- */
  --radius:    14px;      /* カードなど大きい箱 */
  --radius-sm: 10px;      /* 見出しボックス・入力欄 */
  --pad: clamp(16px, 4vw, 48px);
  --maxw: 1280px;
  --hdr-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 16px); }

body{
  margin:0;
  background-color:var(--paper);
  /* 和紙のような微細ノイズ */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--gothic);
  font-size:15px;
  line-height:1.9;
  letter-spacing:.02em;
}

/* 背景：北斎の藍・cappiiiのピンク・招福の金をぼかして敷く */
body::before{
  content:""; position:fixed; inset:-12%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(36% 40% at 16% 20%, var(--glow-ai), transparent 62%),
    radial-gradient(34% 36% at 74% 14%, var(--glow-pink), transparent 64%),
    radial-gradient(44% 44% at 56% 72%, var(--glow-kin), transparent 66%),
    radial-gradient(30% 34% at 90% 58%, var(--glow-mizu), transparent 60%);
  filter:blur(48px);
  animation:drift 42s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-3%,2%,0) scale(1.08); }
}
@media (prefers-reduced-motion:reduce){ body::before{ animation:none; } }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

/* フォーカスは必ず見えるように */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.skip{
  position:absolute; left:8px; top:-60px; z-index:200;
  background:var(--ink); color:var(--gofun);
  padding:10px 16px; text-decoration:none;
  transition:top .2s;
}
.skip:focus{ top:8px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.only-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* =========================================================
   header
   ========================================================= */
.hdr{
  position:sticky; top:0; z-index:100;
  background:var(--gofun);
  border-bottom:1px solid var(--line);
}
.hdr__in{
  display:flex; align-items:stretch;
  min-height:var(--hdr-h);
  max-width:1600px; margin-inline:auto;
}
.hdr__logo{
  display:flex; flex-direction:column; justify-content:center;
  padding:8px clamp(14px,2.5vw,32px);
  text-decoration:none;
  border-right:1px solid var(--line);
  flex:0 0 auto;
}
.hdr__logo img{ height:26px; width:auto; }
@media (max-width:640px){ .hdr__logo img{ height:22px; } }
.hdr__nav{ display:flex; flex:1 1 auto; }
.hdr__nav a{
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(12px,1.6vw,26px);
  border-right:1px solid var(--line);
  text-decoration:none; font-size:14px; letter-spacing:.06em;
  white-space:nowrap;
  transition:background .18s, color .18s;
}
.hdr__nav a:hover{ background:var(--ink); color:var(--gofun); }
.hdr__nav a[aria-current="page"]{ box-shadow:inset 0 -4px 0 var(--accent); }
.hdr__cta{ display:flex; align-items:center; padding:0 16px; gap:8px; flex:0 0 auto; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--line); border-radius:999px;
  padding:9px 20px; font-size:13px; letter-spacing:.08em;
  text-decoration:none; white-space:nowrap;
  transition:background .18s, color .18s;
}
.pill:hover{ background:var(--ink); }
.hdr__lang{
  display:flex; align-items:center; flex:0 0 auto;
  padding:0 clamp(12px,1.4vw,20px); border-left:1px solid var(--line);
  text-decoration:none; font-size:12px; letter-spacing:.14em; white-space:nowrap;
  transition:background .18s, color .18s;
}
.hdr__lang:hover{ background:var(--ink); color:var(--gofun); }

.hdr__burger{
  display:none; align-items:center; gap:8px;
  background:none; border:none; border-left:1px solid var(--line);
  padding:0 18px; cursor:pointer; font-size:11px; letter-spacing:.14em;
}
.hdr__burger span{ display:block; width:22px; height:1px; background:var(--ink); position:relative; }
.hdr__burger span::before,.hdr__burger span::after{
  content:""; position:absolute; left:0; width:22px; height:1px; background:var(--ink);
}
.hdr__burger span::before{ top:-7px; }
.hdr__burger span::after{ top:7px; }

@media (max-width:960px){
  .hdr__nav, .hdr__cta{ display:none; }
  .hdr__lang{ margin-left:auto; border-left:0; }
  .hdr__lang{
  display:flex; align-items:center; flex:0 0 auto;
  padding:0 clamp(12px,1.4vw,20px); border-left:1px solid var(--line);
  text-decoration:none; font-size:12px; letter-spacing:.14em; white-space:nowrap;
  transition:background .18s, color .18s;
}
.hdr__lang:hover{ background:var(--ink); color:var(--gofun); }

.hdr__burger{ display:flex; margin-left:auto; }
  .hdr.is-open .hdr__nav{
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:var(--gofun); border-bottom:1px solid var(--line);
  }
  .hdr.is-open .hdr__nav a{
    justify-content:flex-start; border-right:0;
    border-top:1px solid var(--line); padding:14px 20px;
  }
  .hdr.is-open .hdr__cta{
    display:flex; position:absolute; top:100%; left:0; right:0;
    transform:translateY(100%);
  }
}

/* =========================================================
   section heading  ［日本語］｜［ENGLISH］
   ========================================================= */
.mark{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
  background:var(--accent); color:var(--accent-ink);
  margin:0 0 clamp(28px,4vw,48px);
}
.mark__ja{
  font-family:var(--gothic); font-weight:500;
  font-size:clamp(23px,3.2vw,37px); letter-spacing:.18em;
  padding:.28em .1em .28em .5em; line-height:1.25;
}
.mark__en{
  display:flex; align-items:center;
  border-left:1px solid var(--accent-ink);
  font-family:var(--gothic); font-weight:500; font-size:clamp(11px,1.3vw,15px);
  letter-spacing:.26em; padding:0 1.2em;
}
.sec{ padding-block:clamp(56px,8vw,110px); }
.sec--tight{ padding-block:clamp(40px,5vw,72px); }

/* 見出し配下のリード文 */
.lead{
  font-family:var(--gothic); font-weight:500; font-size:clamp(16px,1.9vw,21px);
  line-height:2; letter-spacing:.06em; max-width:44em;
  margin:0 0 clamp(28px,4vw,44px);
}

/* =========================================================
   signature: 掛け算の「×」
   ========================================================= */
.kake{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mincho); letter-spacing:.1em;
}
.kake i{
  font-style:normal; color:var(--accent);
  font-size:.8em; transform:translateY(-.04em);
}

/* =========================================================
   hero
   ========================================================= */
.hero{ border-bottom:1px solid var(--line); }
.hero__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(64px,12vw,150px) var(--pad) clamp(48px,8vw,110px);
  min-height:64vh; display:flex; flex-direction:column; justify-content:center;
}
.hero__in .bar{ max-width:520px; }

.hero__terms{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35em;
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(30px,6.2vw,64px); line-height:1.2; letter-spacing:.06em;
  margin:0 0 .5em;
}
.hero__terms .t{ background:var(--gofun); border:1px solid var(--line); padding:.06em .3em; }
.hero__terms .x{ color:var(--accent); font-size:.72em; padding:0 .08em; }
.hero__copy{
  font-family:var(--mincho); font-size:clamp(15px,1.7vw,19px);
  line-height:2.2; letter-spacing:.08em; max-width:34em; margin:0 0 28px;
}
.scroll{
  display:inline-flex; flex-direction:column; align-items:center; gap:12px;
  margin-top:clamp(12px,2vw,24px);
}
.scroll span{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--gothic); font-size:11px; letter-spacing:.3em; color:var(--ink-60);
}
.scroll i{
  display:block; width:1px; height:76px; position:relative; overflow:hidden;
  background:linear-gradient(to bottom, var(--ink) 0%, rgba(20,17,15,.12) 100%);
}
.scroll i::after{
  content:""; position:absolute; left:0; top:0;
  width:1px; height:34%; background:var(--accent);
  animation:scrolldot 2.4s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes scrolldot{
  0%{ transform:translateY(-110%); }
  100%{ transform:translateY(310%); }
}
@media (prefers-reduced-motion:reduce){ .scroll i::after{ animation:none; top:20%; } }

.hero__eyebrow{
  font-family:var(--gothic); font-size:clamp(12px,1.4vw,15px);
  letter-spacing:.22em; margin:0 0 clamp(24px,4vw,40px);
}
.hero__eyebrow i{ font-style:normal; color:var(--accent); padding:0 .2em; }
.hero__lead{ margin:0 0 clamp(28px,4vw,44px); }
.hero__lead .ja{
  display:block; font-family:var(--mincho); font-weight:600;
  font-size:clamp(29px,5.6vw,62px); line-height:1.4; letter-spacing:.04em;
}
.hero__lead .en{
  display:block; margin-top:.28em;
  font-family:var(--gothic); font-weight:500;
  font-size:clamp(17px,3.5vw,39px); line-height:1.3; letter-spacing:.12em;
}
.hero__lead .en em{ font-style:normal; color:var(--accent); }
.hero__art{
  border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius);
  aspect-ratio:4/5; overflow:hidden; position:relative;
}
.hero__art img{ width:100%; height:100%; object-fit:cover; }
.hero__art figcaption{
  position:absolute; left:0; bottom:0;
  background:var(--ink); color:var(--gofun);
  font-size:11px; letter-spacing:.16em; padding:8px 14px;
}

/* 流れるロゴ帯 */
.marquee{
  border-block:1px solid var(--line);
  background:var(--ink); color:var(--gofun);
  overflow:hidden; padding:10px 0;
}
.marquee__row{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.marquee span{
  font-family:var(--mincho); font-size:13px; letter-spacing:.5em;
  padding-right:2.5em; white-space:nowrap;
}
.marquee span i{ font-style:normal; color:var(--x); }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee__row{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   card grid（ニュース / サービス共通）
   ========================================================= */
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){
  .grid--3,.grid--2{ grid-template-columns:1fr; }
}

.card{
  display:flex; flex-direction:column;
  background:var(--gofun); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  text-decoration:none; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--accent); }
.card__thumb{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); }
.card__thumb img{ width:100%; height:100%; object-fit:cover; }
.card__head{ display:flex; border-bottom:1px solid var(--line); flex:0 0 auto; }
.card__date{
  writing-mode:vertical-rl; text-orientation:mixed;
  background:var(--ink); color:var(--gofun);
  font-size:11px; letter-spacing:.14em;
  padding:12px 6px; flex:0 0 auto; text-align:center;
}
.card__title{
  font-family:var(--gothic); font-weight:500;
  font-size:clamp(15px,1.5vw,18px); line-height:1.6; letter-spacing:.04em;
  padding:13px 16px 12px; margin:0; flex:1 1 auto;
}
.card__tags{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:11px 16px; border-bottom:1px solid var(--line);
}
.tag{
  border:1px solid var(--line); border-radius:999px;
  font-size:11px; letter-spacing:.06em; padding:2px 12px;
  background:transparent; color:var(--ink);
}
.card__text{
  padding:15px 16px 18px; margin:0;
  font-size:13.5px; line-height:1.8; color:var(--ink-60);
  flex:1 1 auto;
}
.card__pick{
  writing-mode:vertical-rl; background:var(--accent); color:var(--accent-ink);
  font-size:10px; letter-spacing:.2em; padding:12px 6px; text-align:center;
  flex:0 0 auto;
}

/* ニュース一覧（行タイプ） */
.rows{ border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius); overflow:hidden; }
.row{
  display:grid; grid-template-columns:auto 1fr; align-items:stretch;
  border-bottom:1px solid var(--line); text-decoration:none;
  transition:background .18s;
}
.row:last-child{ border-bottom:0; }
.row:hover{ background:#F6F1E8; }
.row__date{
  writing-mode:vertical-rl; background:var(--ink); color:var(--gofun);
  font-size:11px; letter-spacing:.14em; padding:14px 7px; text-align:center;
}
.row__body{ padding:14px 18px; }
.badge{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--line); border-radius:999px; font-size:11px; letter-spacing:.08em;
  padding:1px 12px; margin-bottom:6px;
}
.badge--ai{ background:var(--ai); }
.badge--kin{ background:var(--kin); }
.row__title{
  font-family:var(--gothic); font-weight:500; font-size:clamp(14px,1.4vw,17px);
  line-height:1.75; letter-spacing:.04em; margin:0;
}

/* 絞り込み */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.filters button{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:5px 18px; font-size:12.5px; letter-spacing:.06em; cursor:pointer;
  transition:background .18s,color .18s;
}
.filters button:hover{ background:var(--ink); color:var(--gofun); }
.filters button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); }

/* CTAバー（右端に丸ボタン） */
.bar{
  display:flex; align-items:center; justify-content:center; gap:16px;
  position:relative; width:100%;
  border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius);
  padding:22px 64px; margin-top:clamp(24px,3vw,40px);
  font-family:var(--mincho); font-size:clamp(15px,1.6vw,18px);
  letter-spacing:.14em; text-decoration:none;
  transition:background .18s,color .18s;
}
.bar:hover{ background:var(--ink); color:var(--gofun); }
.bar::after{
  content:"→"; position:absolute; right:18px; top:50%; translate:0 -50%;
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-size:14px;
}

.more{
  display:block; margin:32px auto 0;
  border:1px solid var(--line); background:var(--gofun); border-radius:999px;
  padding:12px 44px; font-family:var(--mincho); letter-spacing:.16em;
  cursor:pointer; transition:background .18s,color .18s;
}
.more:hover{ background:var(--ink); color:var(--gofun); }
.more[hidden]{ display:none; }

.empty{
  border:1px dashed var(--line); border-radius:var(--radius); padding:40px 20px; text-align:center;
  color:var(--ink-60); font-size:14px;
}

/* =========================================================
   下層ページ共通のページヘッダ
   ========================================================= */
.phead{
  border-bottom:1px solid var(--line);
  background:var(--gofun);
}
.phead__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(32px,5vw,64px) var(--pad);
}
.crumb{ font-size:12px; letter-spacing:.08em; color:var(--ink-60); margin-bottom:18px; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }

/* =========================================================
   企業情報
   ========================================================= */
.anchors{
  display:flex; flex-wrap:wrap; border:1px solid var(--line);
  background:var(--gofun); border-radius:var(--radius); overflow:hidden;
  margin-bottom:clamp(40px,6vw,72px);
}
.anchors a{
  flex:1 1 200px; text-align:center; padding:16px 12px;
  border-right:1px solid var(--line); text-decoration:none;
  font-family:var(--mincho); letter-spacing:.14em;
  transition:background .18s,color .18s;
}
.anchors a:last-child{ border-right:0; }
.anchors a:hover{ background:var(--accent); color:var(--accent-ink); }

.table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); background:var(--gofun);
  border-radius:var(--radius); overflow:hidden;
}
.table th,.table td{
  border-bottom:1px solid var(--line); padding:16px 20px;
  text-align:left; vertical-align:top; font-size:14px;
}
.table th{
  width:220px; font-family:var(--mincho); font-weight:600; letter-spacing:.12em;
  border-right:1px solid var(--line); background:#F7F2EA;
}
.table tr:last-child th,.table tr:last-child td{ border-bottom:0; }
@media (max-width:640px){
  .table,.table tbody,.table tr,.table th,.table td{ display:block; width:auto; }
  .table th{ border-right:0; }
}

.claim{
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(26px,4.4vw,48px); line-height:1.5; letter-spacing:.06em;
  margin:0 0 clamp(20px,3vw,32px);
}
.concept__item .voice{
  font-family:var(--mincho); font-size:clamp(15px,1.7vw,18px);
  line-height:1.8; letter-spacing:.06em; color:var(--accent);
  margin:0 0 14px;
}
.closing{
  border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius);
  padding:clamp(28px,4vw,48px); margin-top:clamp(32px,4vw,56px);
}
.closing .terms{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3em;
  font-family:var(--gothic); font-weight:500;
  font-size:clamp(18px,3vw,34px); letter-spacing:.1em; margin:0 0 20px;
}
.closing .terms i{ font-style:normal; color:var(--accent); }
.closing p{ margin:0 0 14px; font-size:15px; line-height:2.1; }
.closing p:last-child{ margin-bottom:0; }
.concept{
  display:grid; gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:820px){ .claim{
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(26px,4.4vw,48px); line-height:1.5; letter-spacing:.06em;
  margin:0 0 clamp(20px,3vw,32px);
}
.concept__item .voice{
  font-family:var(--mincho); font-size:clamp(15px,1.7vw,18px);
  line-height:1.8; letter-spacing:.06em; color:var(--accent);
  margin:0 0 14px;
}
.closing{
  border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius);
  padding:clamp(28px,4vw,48px); margin-top:clamp(32px,4vw,56px);
}
.closing .terms{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3em;
  font-family:var(--gothic); font-weight:500;
  font-size:clamp(18px,3vw,34px); letter-spacing:.1em; margin:0 0 20px;
}
.closing .terms i{ font-style:normal; color:var(--accent); }
.closing p{ margin:0 0 14px; font-size:15px; line-height:2.1; }
.closing p:last-child{ margin-bottom:0; }
.concept{ grid-template-columns:1fr; } }
.concept__item{
  border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius);
  padding:clamp(22px,3vw,34px);
  position:relative;
}
.concept__no{
  font-family:var(--mincho); color:var(--accent);
  font-size:34px; line-height:1; letter-spacing:0;
}
.concept__item h3{
  font-family:var(--mincho); font-size:clamp(18px,2.2vw,24px);
  letter-spacing:.12em; margin:14px 0 12px; font-weight:600;
}
.concept__item p{ margin:0; font-size:14px; color:var(--ink-60); }

.msg{
  display:grid; gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  align-items:start;
}
@media (max-width:820px){ .msg{ grid-template-columns:1fr; } }
.msg__fig{ border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius); overflow:hidden; }
.msg__fig img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.msg__fig figcaption{ border-top:1px solid var(--line); padding:14px 16px; font-size:13px; }
.msg__fig figcaption b{ font-family:var(--mincho); font-size:17px; letter-spacing:.1em; display:block; }
.msg__body p{ font-size:15px; line-height:2.2; letter-spacing:.05em; }
.msg__sign{
  margin-top:36px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--gothic); font-weight:500; font-size:17px; letter-spacing:.1em;
}
.msg__sign span{
  display:block; font-size:12.5px; letter-spacing:.14em;
  color:var(--ink-60); margin-top:4px;
}
.msg__body .q{
  font-family:var(--mincho); font-size:clamp(20px,2.6vw,30px);
  line-height:1.9; letter-spacing:.1em; margin:0 0 28px;
  border-left:4px solid var(--accent); padding-left:20px;
}

/* =========================================================
   詳細ページ本文
   ========================================================= */
.article{ max-width:820px; }
.article__meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.article__date{ font-size:13px; letter-spacing:.1em; color:var(--ink-60); }
.article h1{
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(24px,3.4vw,38px); line-height:1.6; letter-spacing:.06em;
  margin:0 0 24px;
}
.article__hero{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:32px; }
.article__fig{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--gofun); margin:32px 0;
}
.article__fig img{ width:100%; display:block; }
.article__fig figcaption{
  border-top:1px solid var(--line); padding:11px 15px;
  font-size:12.5px; letter-spacing:.04em; color:var(--ink-60);
}
.article__fig--tall{ max-width:380px; }
.article__gallery{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:32px 0;
}
.article__gallery .article__fig{ margin:0; }
.article__gallery .article__fig img{ aspect-ratio:4/3; object-fit:cover; }
.article__gallery--portrait .article__fig img{ aspect-ratio:3/4; }
.article__gallery--wide .article__fig img{ aspect-ratio:3/2; }
@media (max-width:600px){ .article__gallery{ grid-template-columns:1fr; } }

.article__body h2{
  font-family:var(--mincho); font-size:clamp(18px,2.2vw,24px);
  letter-spacing:.1em; margin:44px 0 16px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.article__body p{ margin:0 0 20px; }
.article__body ul{ padding-left:1.2em; margin:0 0 20px; }
.article__body li{ margin-bottom:8px; }

/* =========================================================
   contact
   ========================================================= */
.form{
  border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius);
  padding:clamp(24px,4vw,48px);
}
.field{ margin-bottom:26px; }
.field label{
  display:block; font-family:var(--mincho); letter-spacing:.12em;
  margin-bottom:8px; font-size:15px;
}
.req{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  font-family:var(--gothic); font-size:10px; letter-spacing:.1em; border-radius:999px;
  padding:1px 8px; margin-left:8px; vertical-align:2px;
}
.opt{
  display:inline-block; border:1px solid var(--line); border-radius:999px;
  font-family:var(--gothic); font-size:10px; letter-spacing:.1em;
  padding:0 8px; margin-left:8px; vertical-align:2px; color:var(--ink-60);
}
.field input,.field textarea,.field select{
  width:100%; border:1px solid var(--line); background:var(--paper);
  padding:12px 14px; font-family:var(--gothic); font-size:15px;
  border-radius:var(--radius-sm);
}
.field textarea{ min-height:180px; resize:vertical; }
.field .hint{ font-size:12.5px; color:var(--ink-60); margin:6px 0 0; }
.field.is-error input,.field.is-error textarea,.field.is-error select{ border-color:var(--accent); border-width:2px; }
.error{ color:var(--accent); font-size:12.5px; margin:6px 0 0; }
.error[hidden]{ display:none; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; }
.check input{ width:auto; margin-top:5px; }
.submit{
  display:block; width:100%; cursor:pointer;
  border:1px solid var(--line); background:var(--accent); color:var(--accent-ink);
  border-radius:999px;
  padding:18px; font-family:var(--mincho); font-size:17px; letter-spacing:.2em;
  transition:background .18s;
}
.submit:hover{ background:var(--ink); }
.done{
  border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius);
  padding:clamp(28px,5vw,56px); text-align:center;
}
.done h2{ font-family:var(--mincho); font-size:clamp(20px,2.6vw,28px); letter-spacing:.12em; margin:0 0 14px; }
.done[hidden]{ display:none; }

.contact-routes{
  display:grid; gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:clamp(36px,5vw,60px);
}
@media (max-width:820px){ .contact-routes{ grid-template-columns:1fr; } }
.route{ border:1px solid var(--line); background:var(--gofun); border-radius:var(--radius); padding:24px; }
.route h3{ font-family:var(--mincho); font-size:18px; letter-spacing:.1em; margin:0 0 10px; }
.route p{ margin:0; font-size:13.5px; color:var(--ink-60); }

/* =========================================================
   footer
   ========================================================= */
.ftr{ border-top:1px solid var(--line); background:var(--gofun); }
.ftr__in{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(40px,5vw,64px) var(--pad);
  display:grid; gap:32px; grid-template-columns:minmax(0,.8fr) minmax(0,2.6fr);
}
@media (max-width:820px){ .ftr__in{ grid-template-columns:1fr; } }
.ftr__logo{ height:38px; width:auto; }
.ftr__brand p{ font-size:13px; color:var(--ink-60); margin:10px 0 0; }
/* 4列。パートナー企業の欄を含む */
.ftr__nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
@media (max-width:900px){ .ftr__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .ftr__nav{ grid-template-columns:1fr; } }

/* パートナー企業のロゴ */
.partners{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.partners li{ margin:0; }
.partners a{ display:block; }
.partners img{
  width:100%; height:44px; object-fit:contain; object-position:left center;
  transition:opacity .2s;
}
.partners a:hover img{ opacity:.7; }
@media (max-width:560px){ .partners{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ftr__nav h4{
  font-family:var(--mincho); font-size:13px; letter-spacing:.16em;
  margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.ftr__nav ul{ list-style:none; margin:0; padding:0; }
.ftr__nav li{ margin-bottom:6px; }
.ftr__nav a{ font-size:13px; text-decoration:none; }
.ftr__nav a:hover{ text-decoration:underline; }
.ftr__base{
  border-top:1px solid var(--line);
  padding:16px var(--pad); font-size:11.5px; letter-spacing:.08em; color:var(--ink-60);
  max-width:var(--maxw); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
}