@charset "utf-8";
/* ==========================================================================
   案B「文具」フルページ — 紙の手帳・伝票・値札の世界観（販売版 2026-10-05）
   色は _shared/ds/colors.css の変数のみ（実HEXは書かない。半透明重ねのみrgba）
   枠・影・角丸はデザイン正本 §2.5 の予算表の値だけを使う
   ========================================================================== */

:root{
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","BIZ UDPGothic","Yu Gothic UI",Meiryo,sans-serif;
  --hand:"Zen Kurenaido","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;

  /* ページ共通の骨格 */
  --wrap:1120px;
  --pad-x:clamp(20px,4vw,40px);
  --sec-y:clamp(72px,8.5vw,112px);

  /* 縦リズム（spacingトークンに揃える） */
  --gap-xs:var(--space-2);   /* 8  */
  --gap-sm:var(--space-4);   /* 16 */
  --gap-md:var(--space-6);   /* 24 */
  --gap-lg:var(--space-8);   /* 32 */
  --gap-xl:var(--space-12);  /* 48 */

  --rule:rgba(35,33,27,.045);
  /* カード面（生成りワッシュ。§3.5） */
  --washi:linear-gradient(rgba(246,238,221,.55),rgba(246,238,221,.55)),var(--paper-0);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;max-width:100%;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper-200);
  color:var(--ink-800);
  font-family:var(--gothic);
  font-size:18px;
  line-height:1.85;
  font-weight:400;
}

img{max-width:100%;height:auto;display:block}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--gothic);line-height:1.3;color:var(--clover-900)}
[hidden]{display:none !important}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad-x);
}

.hand{font-family:var(--hand);color:var(--clover-800)}
.nowrap{white-space:nowrap}

/* 出現演出（控えめなフェード） */
.js [data-rise]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard);
}
.js [data-rise].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-rise]{opacity:1;transform:none;transition:none}
}

.topbar{
  height:6px;
  border-radius:2px;
  background:var(--clover-600);
}

/* --------------------------------------------------------------------------
   2状態切替（予告モード preview / 販売モード release）
   モードは <html data-mode="preview|release">。JSがhead内で確定させる。
   -------------------------------------------------------------------------- */
[data-mode="preview"] .only-release,
[data-mode="release"] .only-preview{display:none !important}

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */

/* 節見出し（全節で同一） */
.shead{margin-bottom:clamp(30px,3.6vw,44px)}
.shead__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.2em;
  line-height:1.4;
  color:var(--clover-700);
}
.shead__eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:26px;
  height:3px;
  border-radius:2px;
  background:var(--clover-500);
}
.shead__title{
  margin-top:var(--gap-sm);
  font-size:clamp(27px,3.4vw,37px);
  font-weight:700;
  letter-spacing:-.01em;
}
.shead__note{
  margin-top:var(--gap-xs);
  max-width:42em;
  font-size:17px;
  color:var(--ink-600);
}

/* CTAボタン */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:0 clamp(28px,4vw,44px);
  border:0;
  border-radius:12px;
  background:var(--clover-700);
  color:var(--paper-0);
  font-family:var(--gothic);
  font-size:21px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 3px 0 var(--clover-900);
  transition:background-color var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.btn:hover{background:var(--clover-800);color:var(--paper-0);text-decoration:none}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:3px solid var(--clover-900);outline-offset:3px}
/* 押せない間（準備中フォームと同じ紙地＋墨の不活性） */
.btn:disabled,
.btn[disabled]{
  border:2px solid var(--ink-300);
  background:var(--paper-300);
  color:var(--ink-600);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}

.btn--light{
  background:var(--paper-0);
  color:var(--clover-900);
  box-shadow:0 3px 0 var(--clover-600);
}
.btn--light:hover{background:var(--clover-50);color:var(--clover-900)}
.btn--light:focus-visible{outline:3px solid var(--paper-0);outline-offset:3px}

/* 予告モードの案内（申込ボタンの代わり。押せない札） */
.soon{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:10px 24px;
  border:2px solid var(--ink-300);
  border-radius:12px;
  background:var(--paper-300);
  color:var(--ink-600);
  font-size:18px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
}

/* 選択肢ボタン（診断の はい/いいえ・申込のラジオ） */
.choice{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  min-width:128px;
  padding:8px 24px;
  border:2px solid var(--clover-700);
  border-radius:12px;
  background:var(--paper-50);
  color:var(--clover-900);
  font-family:var(--gothic);
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.choice:hover{background:var(--clover-50)}
.choice:focus-visible{outline:none;border-color:var(--clover-800);box-shadow:0 0 0 2px var(--clover-200)}

/* ==========================================================================
   1. ファーストビュー
   ========================================================================== */
.hero{
  padding:clamp(64px,7.5vw,104px) 0 clamp(72px,8.5vw,116px);
  border-radius:2px;
  background-color:var(--paper-100);
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px);
}

.brand{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--gap-sm);
  margin-bottom:clamp(40px,5vw,56px);
}
.brand__mark{width:56px;height:56px}
.brand__name{
  font-size:27px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--clover-800);
}
.brand__note{
  font-size:15px;
  font-weight:500;
  color:var(--ink-600);
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(36px,4.4vw,64px);
  align-items:start;
}

.hero__title{
  font-size:clamp(32px,4.4vw,50px);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.34;
}
.hero__lead{
  margin-top:var(--gap-md);
  max-width:35em;
  font-size:clamp(18px,1.6vw,20px);
  line-height:1.9;
}
.cta{margin-top:var(--gap-lg)}
.cta__note{
  margin-top:var(--gap-sm);
  font-size:15px;
  color:var(--ink-600);
}

/* 値札（深緑プレート型・2026-08-22 案B採用。傾け・紐・穴なし） */
.pt--b{
  padding:clamp(26px,3.2vw,34px) clamp(24px,3vw,32px) clamp(28px,3.4vw,36px);
  border-radius:12px;
  background:var(--clover-800);
  box-shadow:0 12px 32px rgba(35,33,27,.16);
}
.pt__label{
  font-size:14px;
  font-weight:700;
  letter-spacing:.26em;
  line-height:1.5;
  color:var(--clover-200);
}
.pt__price{
  margin-top:6px;
  font-size:clamp(60px,7vw,86px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--paper-0);
}
.pt__yen{
  margin-left:4px;
  font-size:.42em;
  letter-spacing:0;
}
.pt__tax{
  display:inline-block;
  font-size:16px;
  font-weight:500;
  letter-spacing:0;
  color:var(--clover-100);
}
.pt__rule{
  display:block;
  height:1px;
  margin:clamp(18px,2.2vw,26px) 0 var(--gap-sm);
  border-radius:2px;
  background:rgba(255,255,255,.24);
}
.pt__when{
  font-size:16px;
  font-weight:500;
  line-height:1.8;
  color:var(--clover-100);
}

/* ==========================================================================
   2. 約束（手帳の余白の書き込み）
   ========================================================================== */
.promise{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--paper-50);
}

.memo{
  max-width:42em;
  padding:clamp(22px,3vw,34px) clamp(20px,3vw,36px);
  border-left:6px solid var(--clover-300);
  border-radius:2px 10px 10px 2px;
  background:var(--paper-100);
}
.memo__body p{font-size:18px;line-height:1.95}
.memo__body p + p{margin-top:var(--gap-md)}
.memo__sign{
  margin-top:var(--gap-md);
  font-size:15px;
  line-height:1.8;
  color:var(--ink-600);
}

/* ==========================================================================
   3. 中身を見てください
   ========================================================================== */
.album{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--paper-200);
}

.shots{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,32px);
}
.shot{display:flex}
.shot figure{
  display:flex;
  flex-direction:column;
  width:100%;
  margin:0;
  padding:12px 12px 4px;
  border-radius:10px;
  background:var(--washi);
  border:1px solid var(--ink-200);
}
.shot__frame{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  border-radius:6px;
  overflow:hidden;
  background:var(--paper-200);
}
.shot__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
}
.shot__cap{
  display:flex;
  align-items:center;
  min-height:3.4em;
  padding:var(--gap-xs) 4px;
  font-family:var(--hand);
  font-size:16px;
  line-height:1.65;
  color:var(--ink-800);
}

/* 名刺（3人とも同じ型） */
.crew{margin-top:clamp(40px,5vw,64px)}
.crew__label{
  margin-bottom:var(--gap-sm);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.22em;
  line-height:1.5;
  color:var(--ink-600);
}
.crew__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px);
}
.card{
  display:flex;
  flex-direction:column;
  padding:var(--gap-md) var(--gap-sm);
  border:1px solid var(--ink-200);
  border-radius:10px;
  background:var(--washi);
}
.card__face{
  width:64px;
  height:64px;
  margin-bottom:var(--gap-sm);
  border-radius:50%;
  background:var(--paper-100);
  object-fit:cover;
}
.card__role{
  align-self:flex-start;
  padding-bottom:7px;
  border-bottom:2px solid var(--clover-700);
  font-size:20px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.4;
  color:var(--ink-800);
}
.card__name{
  margin-top:8px;
  font-size:14px;
  color:var(--ink-600);
  line-height:1.5;
}
.card__job{
  margin-top:var(--gap-xs);
  font-size:16px;
  line-height:1.75;
}

/* ==========================================================================
   4. 同梱物（フォルダウィンドウ）
   ========================================================================== */
.bundle{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--paper-100);
}

.fdr{
  max-width:860px;
  border:2px solid var(--ink-300);
  border-radius:6px;
  background:var(--washi);
  overflow:hidden;
}
.fdr__bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  background:var(--paper-200);
  border-bottom:2px solid var(--ink-300);
}
.fdr__barIcon{width:20px;height:16px;color:var(--clover-700)}
.fdr__barName{font-weight:700;font-size:16px;color:var(--ink-800);letter-spacing:.04em}
.fdr__list{list-style:none;margin:0;padding:0}
.fdr__row{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:15px 20px;
  border-top:1px solid var(--ink-200);
}
.fdr__row:first-child{border-top:0}
.fdr__name{flex:0 0 13.5em;font-weight:700;font-size:17px;line-height:1.6;color:var(--ink-800)}
.fdr__desc{font-size:15px;color:var(--ink-600)}

.bundle__caveat{
  margin-top:clamp(24px,3vw,36px);
  font-size:clamp(19px,2.2vw,22px);
  color:var(--clover-900);
  line-height:1.8;
}

/* ==========================================================================
   5. 向いている人・向いていない人
   ========================================================================== */
.fit{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--leaf-100);
}
.fit__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,28px);
  align-items:start;
}
.fit__box{
  padding:clamp(20px,2.6vw,28px) clamp(20px,2.6vw,28px);
  border-radius:10px;
  background:var(--washi);
}
.fit__box--yes{
  border-left:6px solid var(--leaf-400);
  border-radius:2px 10px 10px 2px;
}
.fit__box--no{border:1px solid var(--ink-200)}
.fit__label{
  font-size:15px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.5;
  color:var(--leaf-700);
}
.fit__box--no .fit__label{color:var(--ink-600)}
.fit__list{margin-top:var(--gap-sm)}
.fit__list li{
  position:relative;
  padding-left:18px;
  font-size:17px;
  line-height:1.8;
}
.fit__list li + li{margin-top:var(--gap-xs)}
.fit__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--leaf-400);
}
.fit__box--no .fit__list li::before{background:var(--ink-300)}
.fit__close{
  margin-top:clamp(24px,3vw,36px);
  max-width:42em;
  font-size:clamp(18px,2vw,20px);
  font-weight:700;
  line-height:1.8;
  color:var(--clover-900);
}

/* ==========================================================================
   6. 30秒診断
   ========================================================================== */
.diag{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--paper-200);
}
.quiz{
  max-width:760px;
  padding:clamp(24px,3.4vw,40px);
  border:1px solid var(--ink-200);
  border-radius:10px;
  background:var(--washi);
}
.quiz__q + .quiz__q{margin-top:var(--gap-xl)}
.js .quiz__q + .quiz__q{margin-top:0}
.quiz__no{
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.5;
  color:var(--clover-700);
}
.quiz__text{
  margin-top:var(--gap-xs);
  font-size:clamp(20px,2.2vw,23px);
  font-weight:700;
  line-height:1.6;
}
.quiz__text:focus,
.quiz__title:focus{outline:none}
.quiz__text:focus-visible,
.quiz__title:focus-visible{outline:3px solid var(--clover-900);outline-offset:3px;border-radius:2px}
.quiz__ans{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:var(--gap-md);
}
.quiz__title{
  font-size:clamp(22px,2.6vw,27px);
  font-weight:700;
  line-height:1.5;
}
.quiz__body{
  margin-top:var(--gap-sm);
  font-size:17.5px;
  line-height:1.85;
}
.quiz__reasons{margin-top:var(--gap-sm)}
.quiz__reasons li{
  position:relative;
  padding-left:18px;
  font-size:17px;
  line-height:1.8;
}
.quiz__reasons li + li{margin-top:var(--gap-xs)}
.quiz__reasons li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--clover-300);
}
.quiz__go{margin-top:var(--gap-md)}
.quiz__again{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:var(--gap-md);
  padding:0 4px;
  border:0;
  background:transparent;
  color:var(--clover-800);
  font-family:var(--gothic);
  font-size:16px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.quiz__again:focus-visible{outline:3px solid var(--clover-900);outline-offset:3px}

/* ==========================================================================
   7. 買い方（4ステップ）
   ========================================================================== */
.howto{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--amber-100);
}
.steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--ink-200);
  border-radius:12px;
  overflow:hidden;
  background:var(--washi);
}
.step{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:28px 24px;
}
.step + .step{border-left:1px dashed var(--ink-300)}
.step__no{
  font-size:56px;
  font-weight:700;
  line-height:1;
  color:var(--clover-600);
}
.step__name{
  margin-top:10px;
  font-size:19px;
  font-weight:700;
  line-height:1.5;
  color:var(--clover-900);
}
.step__text{
  font-size:15px;
  line-height:1.8;
}

/* ==========================================================================
   8. 価格と条件（申込直前）
   ========================================================================== */
.price{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--paper-100);
}
.cond{
  max-width:860px;
  border:1px solid var(--ink-200);
  border-radius:10px;
  background:var(--washi);
  overflow:hidden;
}
.cond__row{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:16px 22px;
  border-top:1px solid var(--ink-200);
}
.cond__row:first-child{border-top:0}
.cond__name{flex:0 0 15em;font-size:17px;font-weight:700;line-height:1.6;color:var(--ink-800)}
.cond__desc{font-size:15.5px;line-height:1.8}
.price__go{margin-top:var(--gap-lg);max-width:560px}

/* ==========================================================================
   9. よくある質問（問い合わせ票）
   ========================================================================== */
.faq{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--paper-50);
}

.qa{display:grid;gap:clamp(14px,1.8vw,20px)}
.qa__item{
  padding:clamp(18px,2.4vw,26px);
  border-radius:10px;
  background:var(--washi);
}
.qa__q,
.qa__a{
  display:flex;
  align-items:flex-start;
  gap:var(--gap-sm);
}
.qa__a{
  margin-top:var(--gap-sm);
  padding-top:var(--gap-sm);
  border-top:1px solid var(--ink-200);
}
.qa__mark{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:6px;
  font-size:16px;
  font-weight:700;
  line-height:1;
}
.qa__mark--q{background:var(--clover-700);color:var(--paper-0)}
.qa__mark--a{background:var(--paper-300);color:var(--clover-800)}
.qa__q .qa__text{
  padding-top:3px;
  font-size:19px;
  font-weight:700;
  line-height:1.65;
  color:var(--clover-900);
}
.qa__a .qa__text{
  padding-top:3px;
  font-size:17.5px;
  line-height:1.85;
}

/* ==========================================================================
   クロージングバンド ＋ フッター
   ========================================================================== */
.closing{
  padding:clamp(72px,9vw,96px) 0;
  border-radius:2px;
  background:var(--clover-900);
}
.closing__inner{text-align:center}
.closing__lead{
  font-size:clamp(22px,2.8vw,28px);
  font-weight:400;
  line-height:1.6;
  color:var(--clover-100);
}
.closing__body{
  max-width:36em;
  margin:var(--gap-lg) auto 0;
  text-align:left;
}
.closing__body p{
  font-size:17px;
  line-height:1.95;
  color:var(--clover-100);
}
.closing__body p + p{margin-top:var(--gap-md)}
.closing .btn{margin-top:var(--gap-xl)}

.foot{
  border-radius:2px;
  background:var(--paper-100);
  border-top:1px solid var(--ink-200);
}
.foot__inner{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--gap-xs) var(--gap-md);
  padding-top:var(--gap-md);
  padding-bottom:var(--gap-md);
}
.foot__brand{
  display:flex;
  align-items:center;
  gap:var(--gap-sm);
  margin-right:auto;
}
.foot__mark{width:28px;height:28px}
.foot__text{
  font-size:15px;
  line-height:1.6;
  color:var(--ink-600);
}
.foot__links{
  display:flex;
  flex-wrap:wrap;
  gap:0 var(--gap-md);
}
.foot__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-600);
  text-decoration:underline;
  text-underline-offset:3px;
}
.foot__link:hover{color:var(--clover-800)}
.foot__link:focus-visible{outline:3px solid var(--clover-900);outline-offset:3px}

/* ==========================================================================
   下層ページ（申込・法務・転送）
   ========================================================================== */
.rpage__head{padding-top:clamp(28px,4vw,44px)}
.rpage__head .brand{margin-bottom:0}
.brand__home{display:inline-flex;align-items:center;gap:var(--gap-sm);min-height:44px;text-decoration:none}
.brand__home:focus-visible{outline:3px solid var(--clover-900);outline-offset:3px}
.rpage{padding:clamp(36px,5vw,60px) 0 var(--sec-y)}
.rpage__lead{max-width:680px;font-size:17px;line-height:1.9;color:var(--ink-800)}
.rpage__note{margin-top:var(--gap-sm);max-width:680px;font-size:15px;line-height:1.8;color:var(--ink-600)}
.rpage__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--clover-800);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.rpage__link:focus-visible{outline:3px solid var(--clover-900);outline-offset:3px}
.rpage .btn{margin-top:var(--gap-lg)}

/* 申込フォーム（apply.html） */
.rform{margin-top:clamp(28px,3.6vw,40px);max-width:680px}
.rform__field{margin:var(--gap-lg) 0 0;padding:0;border:0;min-width:0}
.rform__label{
  display:block;
  margin-bottom:8px;
  padding:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-800);
}
.rform__req{
  margin-left:8px;
  font-size:14px;
  font-weight:700;
  color:var(--clover-700);
}
.rform__input{
  display:block;
  width:100%;
  min-height:64px;
  padding:0 18px;
  border:2px solid var(--clover-700);
  border-radius:12px;
  background:var(--paper-50);
  color:var(--ink-800);
  font-family:var(--gothic);
  font-size:17px;
}
.rform__input::placeholder{color:var(--ink-400)}
.rform__input:focus-visible{outline:none;border-color:var(--clover-800);box-shadow:0 0 0 2px var(--clover-200)}
.rform__textarea{min-height:168px;padding:16px 18px;line-height:1.8;resize:vertical}
.rform__hint{margin-top:8px;font-size:14px;line-height:1.7;color:var(--ink-600)}
.rform__count{margin-top:6px;font-size:14px;font-weight:700;line-height:1.7;color:var(--clover-800)}

/* ラジオを選択肢ボタンの型で */
.rform__choices{display:flex;flex-wrap:wrap;gap:10px}
.pick{position:relative;display:inline-flex}
.pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pick span{
  display:inline-flex;
  align-items:center;
  min-height:52px;
  padding:6px 18px;
  border:2px solid var(--clover-700);
  border-radius:12px;
  background:var(--paper-50);
  color:var(--ink-800);
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  cursor:pointer;
}
.pick input:checked + span{background:var(--clover-700);color:var(--paper-0);font-weight:700}
.pick input:focus-visible + span{border-color:var(--clover-800);box-shadow:0 0 0 2px var(--clover-200)}

/* 確認のチェック */
.check{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:44px;
  padding:14px 16px;
  border:1px solid var(--ink-200);
  border-radius:10px;
  background:var(--washi);
  font-size:16px;
  line-height:1.75;
  cursor:pointer;
}
/* 本物のチェックは枠いっぱいに透明で敷き、見た目は .check__box が受け持つ（押せる面＝カード全体） */
.check input{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.check__box{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin-top:2px;
  border:2px solid var(--clover-700);
  border-radius:6px;
  background:var(--paper-50);
}
.check__box::after{
  content:"\2713";
  font-size:16px;
  font-weight:700;
  line-height:1;
  color:var(--paper-0);
  opacity:0;
}
.check input:checked + .check__box{background:var(--clover-700)}
.check input:checked + .check__box::after{opacity:1}
.check input:focus-visible + .check__box{box-shadow:0 0 0 2px var(--clover-200)}
.check a{position:relative;z-index:1;color:var(--clover-800);text-underline-offset:3px}
.check a:focus-visible{outline:3px solid var(--clover-900);outline-offset:2px}
.rform__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rform__btn{display:flex;width:100%;margin-top:var(--gap-lg)}
.rform__soon{margin-top:var(--gap-sm)}
.rform__stat{margin-top:var(--gap-sm);font-size:15px;font-weight:700;line-height:1.7;color:var(--clover-800)}

/* 申込の結果 */
.result{
  max-width:680px;
  margin-top:clamp(28px,3.6vw,40px);
  padding:clamp(22px,3vw,32px);
  border:1px solid var(--ink-200);
  border-radius:10px;
  background:var(--washi);
}
.result__title{font-size:clamp(22px,2.6vw,27px);font-weight:700;line-height:1.5}
.result__title:focus{outline:none}
.result__body{margin-top:var(--gap-sm);font-size:17px;line-height:1.9}
.result__list{margin-top:var(--gap-sm)}
.result__list li{position:relative;padding-left:18px;font-size:16.5px;line-height:1.8}
.result__list li + li{margin-top:var(--gap-xs)}
.result__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--clover-300);
}

/* 法務ページの表 */
.legal{max-width:860px;border-top:1px solid var(--ink-200)}
.legal__row{
  display:grid;
  grid-template-columns:13em minmax(0,1fr);
  gap:6px 24px;
  padding:16px 2px;
  border-bottom:1px solid var(--ink-200);
}
.legal__row dt{font-size:16px;font-weight:700;line-height:1.7;color:var(--ink-800)}
.legal__row dd{font-size:16px;line-height:1.85}
.legal__row dd a{color:var(--clover-800);text-underline-offset:3px}
.legal__list li{position:relative;padding-left:16px}
.legal__list li + li{margin-top:4px}
.legal__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--clover-300);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,56px)}
  .pt{max-width:460px}
  .shots{grid-template-columns:minmax(0,1fr)}
  .shot__cap{min-height:0}
  .fit__grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{padding:22px 20px}
  .step + .step{border-left:0;border-top:1px dashed var(--ink-300)}
}

@media (max-width:720px){
  .fdr__row,
  .cond__row{flex-direction:column;gap:4px;align-items:flex-start}
  .fdr__name,
  .cond__name{flex:none}
  .crew__list{grid-template-columns:minmax(0,1fr)}
  .legal__row{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:560px){
  body{font-size:17px}
  .brand{gap:12px}
  .brand__mark{width:48px;height:48px}
  .brand__name{font-size:24px}
  .brand__note{width:100%}
  .hero__lead{font-size:18px}
  .btn{display:flex;width:100%;padding:0 18px;font-size:19px}
  .memo{padding-left:var(--gap-sm);padding-right:var(--gap-sm)}
  .quiz{padding:22px 18px}
  .choice{flex:1 1 0}
  .qa__q .qa__text{font-size:18px}
  .foot__inner{align-items:flex-start}
  .br-pc{display:none}
}
.rform__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin-top:6px;font-size:15px;color:var(--ink-600)}
.hero__date{
  margin-bottom:var(--gap-sm);
  font-size:17px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.5;
  color:var(--clover-800);
}
.legal__plain{max-width:760px}
.legal__plain li{font-size:16.5px;line-height:1.9}
.legal__plain li + li{margin-top:var(--gap-sm)}

/* 副導線ボタン（診断で「購入はできるが、おすすめはしない」時の申込・2026-10-05） */
.btn--ghost{
  min-height:56px;
  border:2px solid var(--clover-400);
  background:transparent;
  color:var(--clover-800);
  font-size:19px;
  box-shadow:none;
}
.btn--ghost:hover{background:var(--clover-50);color:var(--clover-900)}
/* 診断後に主CTAの位置へ出る「申し込みは〜から」の札 */
.cta .soon{max-width:560px}
.closing .soon{max-width:560px;margin:var(--gap-xl) auto 0}

/* ==========================================================================
   5. カスタマイズの実例（名刺・shot の型を流用）
   ========================================================================== */
.examples{
  padding:var(--sec-y) 0;
  border-radius:2px;
  background:var(--paper-200);
}
.shot .ex{padding:12px 12px 20px}
.ex__frame{aspect-ratio:1200 / 670}
.ex__frame img{object-position:center}
.ex__body{display:flex;flex-direction:column;gap:6px;padding:var(--gap-sm) 6px 0}
.ex__title{font-size:20px;font-weight:700;line-height:1.5;color:var(--clover-900)}
.ex__text{font-size:16px;line-height:1.75}
.ex__ask{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:var(--gap-xs);
  padding:12px 14px;
  border-radius:6px;
  background:var(--paper-200);
}
.ex__askLabel{font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.6;color:var(--ink-600)}
.ex__askText{font-size:15.5px;line-height:1.75;color:var(--ink-800)}
.exs__note{margin-top:var(--gap-sm);font-size:15px;line-height:1.8;color:var(--ink-600)}
.exs__more{margin-top:var(--gap-xs)}

/* 実例集（examples.html） */
.exd{margin-top:clamp(40px,5vw,56px)}
.exd + .exd{margin-top:clamp(56px,7vw,80px)}
.exd__title{font-size:clamp(22px,2.6vw,27px);font-weight:700;line-height:1.5}
.exd__fig{
  max-width:960px;
  margin:var(--gap-sm) 0 0;
  padding:12px;
  border:1px solid var(--ink-200);
  border-radius:10px;
  background:var(--washi);
}
.exd__fig img{width:100%;border-radius:6px}
.exd .legal{max-width:960px;margin-top:var(--gap-md)}
.exd__note{margin-top:clamp(40px,5vw,56px)}
.exd__go{max-width:560px}
.exd__go .soon{margin-top:var(--gap-lg)}

/* 診断の結果: 1文字だけの行末の落ちを防ぐ（2026-10-05） */
.quiz__title, .quiz p, .quiz li { text-wrap: pretty; }