@charset "UTF-8";
/* Shopify運営サポートLP — 脱・楽天LPとトーン統一 / サービス色 #004c3f */
:root{

  /* --- brand tokens: 脱・楽天LP style.css と同値 --- */
  --brand:#ca0004;
  --brand-deep:#b60003;
  --mv-red:#a30003;   /* 脱楽天LPのMV色（参考） */
  /* サービス色：大きな色面（01・05・10）に使用。赤は会社の差し色として残す */
  --svc:#004c3f;
  /* 差し色（アイコン・ボタン文字・ラベル等）もサービス色に統一。赤はロゴのみ */
  --accent:#004c3f;
  --accent-deep:#003a30;
  --ink:#171717;
  --ink-logo:#1a1a1a;
  --heading:#222222;
  --muted:#6f6f6f;
  --line:#d9d9d9;
  --grey:#f5f5f5;
  --grey-card:#e9e9e9;
  --white:#ffffff;

  --radius:10px;
  --radius-btn:4px;
  --gap-card:15px;
  --sec-pad-y:clamp(72px, 8.333vw, 128px);
  --sec-pad-x:clamp(20px, 5.556vw, 80px);
  --pad-card:clamp(24px, 2.778vw, 40px);
  --pad-card-s:clamp(18px, 1.667vw, 24px);
  --ease:cubic-bezier(.22,.61,.36,1);

  --font:"Noto Sans JP","Noto Sans CJK JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --fs-label:13px;
  --fs-title:clamp(30px, 4.167vw, 60px);
  --fs-lead:17px;
  --fs-sub:clamp(19px, 1.944vw, 28px);
  --fs-card:clamp(17px, 1.389vw, 20px);
  --fs-body:15.5px;
}

*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);line-height:1.8;-webkit-font-smoothing:antialiased;}
.mono{font-family:"JetBrains Mono",monospace;letter-spacing:0.02em;}
a{color:inherit;text-decoration:none;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ================= page (brand: fixed light) ================= */
.wf-page{background:var(--white);color:var(--ink);font-family:var(--font);font-feature-settings:"palt";}
.wf-page h1,.wf-page h2,.wf-page h3,.wf-page h4,.wf-page p{margin:0;}
.wf-page ul,.wf-page ol{list-style:none;margin:0;padding:0;}

/* ---- header (脱楽天LPと同じ構成・ロゴ) ---- */
.header{background:var(--white);border-bottom:1px solid var(--line);}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--sec-pad-x);}
.logo{display:inline-flex;color:var(--ink-logo);flex:none;}
.logo__svg{width:clamp(128px,12.78vw,184px);aspect-ratio:184/56;height:auto;display:block;}
.gnav__list{display:flex;gap:clamp(14px,1.8vw,24px);}
.gnav__list a{font-size:15px;font-weight:600;color:var(--heading);white-space:nowrap;}
.gnav__list a:hover{color:var(--accent);}
@media (max-width:1100px){.gnav{display:none;}}
.dlBtn{display:inline-flex;align-items:center;gap:14px;height:48px;padding:0 22px;flex:none;background:var(--heading);color:var(--white);border-radius:var(--radius-btn);transition:background .25s var(--ease);}
.dlBtn__label{font-size:14px;font-weight:600;line-height:1;}
.dlBtn svg{width:10px;height:10px;fill:currentColor;transition:transform .25s var(--ease);}
.dlBtn:hover{background:var(--accent);}
.dlBtn:hover svg{transform:translate(2px,-2px);}

/* ---- section frame ---- */
.sec{padding:var(--sec-pad-y) var(--sec-pad-x);display:flex;flex-direction:column;gap:48px;}
.sec--grey{background:var(--grey);}
.sec--red{background:var(--svc);color:var(--white);}
.sec__inner{width:100%;max-width:960px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(40px,4.444vw,64px);}
.sec__inner--wide{max-width:1200px;}

/* ---- section head ---- */
.head{display:flex;flex-direction:column;gap:clamp(20px,2.222vw,32px);}
.head--center{align-items:center;text-align:center;}
.head__label{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:700;line-height:1;color:var(--accent);letter-spacing:.02em;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
.head__title{font-size:var(--fs-title);font-weight:800;line-height:1.42;letter-spacing:-.01em;color:var(--heading);/*text-wrap:balance;*/}
.head__lead{font-size:var(--fs-lead);line-height:1.8;color:var(--heading);}
.sec--red .head__label,.sec--red .head__title{color:var(--white);}
.sec--red .dot{background:var(--white);}

.prose{display:flex;flex-direction:column;gap:18px;font-size:var(--fs-lead);line-height:1.95;color:var(--heading);}
.prose p{/*max-width:62ch;*/}
.sec--red .prose{color:rgba(255,255,255,.92);}
.prose--center{align-items:center;text-align:center;}

/* ---- icon box 48 / r10 ---- */
.icon{flex:none;width:56px;height:56px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-card);font-weight:700;line-height:1;color:var(--white);}
.icon--brand{background:var(--accent);}
.icon--ink{background:var(--ink);}
.icon svg{width:30px;height:30px;fill:currentColor;}
.icon__x{font-size:40px;font-weight:700;line-height:1;transform:translateY(-1px);}

/* ---- buttons ---- */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;}
.cta-row--center{justify-content:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:300px;padding:22px 34px;background:var(--accent);color:var(--white);border-radius:var(--radius-btn);font-size:17px;font-weight:600;line-height:1.4;transition:background .25s var(--ease),transform .25s var(--ease);}
.btn svg{width:10px;height:10px;fill:currentColor;transition:transform .25s var(--ease);}
.btn:hover{background:var(--accent-deep);transform:translateY(-2px);}
.btn:hover svg{transform:translate(2px,-2px);}
.btn--onBrand{background:var(--white);color:var(--accent);}
.btn--onBrand:hover{background:var(--grey);}
.sublink{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--heading);border-bottom:1px solid currentColor;padding-bottom:2px;}
.sublink svg{width:9px;height:9px;fill:currentColor;}
.sublink--invert{color:var(--white);}

/* ---- cards / rows ---- */
.cards{display:grid;gap:var(--gap-card);}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:860px){.cards--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.cards--2,.cards--3{grid-template-columns:1fr;}}
.card{display:flex;flex-direction:column;gap:16px;padding:var(--pad-card);background:var(--grey);border-radius:var(--radius);}
.card--light{background:var(--white);}
.card--center{align-items:center;text-align:center;}
.card--center .card__title{/*text-wrap:balance;*/}
.card__title{font-size:var(--fs-card);font-weight:700;line-height:1.5;color:var(--ink);}
.card__body{font-size:var(--fs-body);line-height:1.8;color:var(--ink);}

.rows{display:flex;flex-direction:column;gap:var(--gap-card);}
.row{display:flex;flex-direction:column;gap:12px;padding:var(--pad-card-s);background:var(--grey);border-radius:var(--radius);}
.row--light{background:var(--white);}
.row__head{display:flex;align-items:center;gap:16px;}
.row__title{font-size:var(--fs-card);font-weight:700;line-height:1.5;color:var(--ink);}
.row__body{font-size:var(--fs-body);line-height:1.8;color:var(--ink);}
.row--inline{flex-direction:row;align-items:center;gap:16px;}
.row--inline .row__title{font-weight:600;}

/* ---- band ---- */
.band{display:flex;flex-direction:column;align-items:center;gap:16px;padding:var(--pad-card) clamp(24px,5.556vw,80px);background:var(--ink);color:var(--white);border-radius:var(--radius);text-align:center;}
.band__title{font-size:var(--fs-sub);font-weight:700;line-height:1.6;text-wrap:balance;}

/* ---- note ---- */
.note{display:flex;flex-direction:column;gap:10px;padding:var(--pad-card-s) var(--pad-card);background:var(--grey);border-radius:var(--radius);font-size:14.5px;line-height:1.85;color:var(--heading);}
.note--light{background:var(--white);}
.note__label{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:700;color:var(--accent);line-height:1;}

/* ---- image placeholder (r10) ---- */
.img-ph{border:1.5px dashed rgba(0,76,63,.45);background:repeating-linear-gradient(135deg,var(--grey) 0 10px,transparent 10px 20px);background-color:var(--white);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--muted);text-align:center;width:100%;}
.img-ph .label{font-size:11px;font-weight:700;letter-spacing:.04em;}
.img-ph .ph-sub{font-size:10.5px;}
.img-ph--16x9{aspect-ratio:16/9;}
.img-ph--hero{aspect-ratio:16/7.5;}
.img-ph--onRed{border-color:rgba(255,255,255,.55);background-color:rgba(255,255,255,.06);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px);color:rgba(255,255,255,.8);}

/* ================= 01 MV ================= */
/* 脱楽天LPと同じ構成：ベタ色 ＋ サムネ壁を不透明度10% ＋ 右下に人物。ベタ色だけサービス色(緑)に */
.sec--mv{position:relative;isolation:isolate;overflow:hidden;background:var(--svc);color:var(--white);padding-top:clamp(56px,6vw,88px);padding-bottom:0;}
.mv__wall{position:absolute;inset:0;z-index:-1;opacity:.10;pointer-events:none;}
.mv__wall img{width:100%;height:100%;object-fit:cover;display:block;}
.mv__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:end;}
.mv__text{display:flex;flex-direction:column;gap:clamp(24px,2.5vw,36px);padding-bottom:var(--sec-pad-y);}
/* 右側ビジュアル：Shopify画面のスクリーンショットをブラウザ枠に入れて重ねる */
.mv__screens{position:relative;align-self:center;aspect-ratio:1/1.02;margin-right:calc(var(--sec-pad-x) * -1);margin-bottom:var(--sec-pad-y);}
.win{position:absolute;display:flex;flex-direction:column;background:var(--white);border-radius:8px;overflow:hidden;box-shadow:0 24px 48px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.2);}
.win__bar{flex:none;display:flex;align-items:center;gap:5px;height:22px;padding:0 10px;background:#ececec;border-bottom:1px solid #dcdcdc;}
.win__bar i{width:7px;height:7px;border-radius:50%;background:#c9c9c9;}
.win__url{flex:1;height:10px;margin-left:10px;max-width:55%;border-radius:5px;background:#fff;}
.win__body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:#8a8a8a;background:repeating-linear-gradient(135deg,#f3f3f3 0 10px,#fafafa 10px 20px);}
.win__body img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;}
.win__body .label{font-size:11px;font-weight:700;letter-spacing:.04em;}
.win__body .ph-sub{font-size:10px;line-height:1.5;}
.win--a{top:0;left:14%;width:100%;aspect-ratio:16/10.5;}
.win--b{top:44%;left:0;width:64%;aspect-ratio:4/3;}
.win--phone{top:50%;right:calc(var(--sec-pad-x) + 2%);width:24%;aspect-ratio:9/18.5;border-radius:16px;border:5px solid #1b1b1b;}
/* Shopify Plus Partner バッジ：公式素材を無加工で使用（色・比率変更不可）。周囲に余白を確保 */
.partner-badge{display:block;width:220px;height:auto;}
.partner-badge--mv{width:170px;margin-top:4px;}
.partner-card{display:flex;align-items:center;justify-content:center;padding:28px;background:var(--white);border-radius:var(--radius);}
.temp-tag{position:absolute;right:calc(var(--sec-pad-x) + 8px);top:8px;padding:3px 8px;background:rgba(0,0,0,.45);color:#fff;font-size:10px;border-radius:3px;}
@media (max-width:860px){
  .mv__grid{grid-template-columns:1fr;gap:0;}
  .mv__text{padding-bottom:40px;}
  .mv__screens{width:min(100%,420px);justify-self:center;margin-right:0;margin-bottom:48px;}
  .win--a{left:8%;width:92%;}
  .win--phone{right:2%;}
}
.badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:10px 20px;background:var(--white);color:var(--accent);border-radius:999px;font-size:15px;font-weight:700;line-height:1.2;}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);}
.mv__heading{font-size:clamp(31px,4.167vw,62px);font-weight:900;line-height:1.35;letter-spacing:-.01em;color:var(--white);}
.mv__body{display:flex;flex-direction:column;gap:16px;font-size:var(--fs-lead);line-height:1.9;color:rgba(255,255,255,.92);}
.mv__body p{max-width:60ch;}
.mv__body strong{color:var(--white);font-weight:700;}

/* ================= 03 role ================= */
.role{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:16px;}
@media (max-width:640px){.role{grid-template-columns:1fr;}}
.role__box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:var(--pad-card);background:var(--white);border-radius:var(--radius);text-align:center;}
.role__tag{font-size:var(--fs-label);font-weight:700;color:var(--accent);letter-spacing:.06em;}
.role__text{font-size:var(--fs-sub);font-weight:700;line-height:1.5;color:var(--ink);}
.role__plus{align-self:center;justify-self:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;line-height:1;}

/* ================= 05 cases ================= */
.sec--red .card--light .card__title{color:var(--ink);}
.sec--red .card--light .card__body{color:var(--ink);}
.sec--red .card--light .row__head{flex-direction:column;align-items:flex-start;gap:16px;}

/* ================= 06 quotes ================= */
.quotes{display:flex;flex-direction:column;gap:10px;}
.quote{display:flex;align-items:center;gap:14px;padding:20px 24px;background:var(--grey);border-radius:var(--radius);font-size:var(--fs-card);font-weight:700;line-height:1.5;color:var(--ink);}

/* ================= 08 price ================= */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card);align-items:stretch;}
@media (max-width:860px){.price-grid{grid-template-columns:1fr;}}
.price-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:var(--pad-card) var(--pad-card-s);background:var(--white);border:2px solid transparent;border-radius:var(--radius);}
.price-card--featured{border-color:var(--accent);}
.price-card__flag{position:absolute;top:-13px;left:var(--pad-card-s);padding:5px 12px;background:var(--accent);color:var(--white);border-radius:var(--radius-btn);font-size:11px;font-weight:700;line-height:1.2;}
.price-card__amount{display:flex;align-items:baseline;gap:6px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.price-card__amount .pre{font-size:16px;font-weight:600;color:var(--heading);}
.price-card__amount .num{font-size:clamp(40px,4.167vw,60px);letter-spacing:-.02em;line-height:1.1;color:var(--accent);}
.price-card__amount .unit{font-size:19px;}
.price-card__sub{font-size:var(--fs-body);font-weight:700;line-height:1.6;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line);}
.tag{display:inline-flex;align-self:flex-start;padding:6px 12px;border-radius:var(--radius-btn);font-size:13.5px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;}
.tag--brand{background:var(--accent);color:var(--white);}
.tag--ink{background:var(--ink);color:var(--white);}
.price-card__desc{font-size:15px;line-height:1.85;color:var(--ink);}

/* ================= 09 FAQ ================= */
.faq{display:flex;flex-direction:column;gap:var(--gap-card);}
.faq__item{padding:var(--pad-card-s);background:var(--grey);border-radius:var(--radius);}
.faq__q{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;}
.faq__q::-webkit-details-marker{display:none;}
.faq__qText{flex:1;font-size:var(--fs-card);font-weight:700;line-height:1.5;color:var(--ink);}
.faq__chev{flex:none;width:24px;height:24px;color:var(--accent);transition:transform .3s var(--ease);}
.faq__chev svg{width:100%;height:100%;fill:currentColor;display:block;}
.faq__item[open] .faq__chev{transform:rotate(180deg);}
.faq__a{display:flex;align-items:flex-start;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.faq__aText{flex:1;font-size:var(--fs-body);line-height:1.8;color:var(--ink);padding-top:12px;}
.faq .icon{width:44px;height:44px;font-size:18px;}
summary {padding: 0!important;}
summary::before,
summary::after {display: none!important;}

/* ================= 10 last ================= */
.sec--last .img-ph{max-width:480px;align-self:center;}
.rep-photo{margin:0;align-self:center;width:min(100%,420px);aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--accent-deep);}
.rep-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;}
.small-print{font-size:14px;color:rgba(255,255,255,.8);text-align:center;}

/* ---- sticky header + SP menu（script.js で開閉） ---- */
html{scroll-behavior:smooth;scroll-padding-top:88px;}
.burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;background:transparent;border:1px solid var(--line);border-radius:var(--radius-btn);cursor:pointer;}
.burger__box{position:relative;display:block;width:18px;height:12px;}
.burger__box i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s var(--ease),top .3s var(--ease);}
.burger__box i:nth-child(1){top:0;}
.burger__box i:nth-child(2){top:5px;}
.burger__box i:nth-child(3){top:10px;}
.burger[aria-expanded="true"] .burger__box i:nth-child(1){top:5px;transform:rotate(45deg);}
.burger[aria-expanded="true"] .burger__box i:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] .burger__box i:nth-child(3){top:5px;transform:rotate(-45deg);}
@media (max-width:1100px){.burger{display:inline-flex;}}

/* 日本語の改行を文節単位に（対応ブラウザのみ。非対応でも従来どおり） */
.mv__heading,.head__title,.band__title,.card__title,.row__title,.role__text,.price-card__sub,.faq__qText,.quote{word-break:auto-phrase;}

@media (max-width: 860px) {
	#s02 .cards--2,
	#s02 .cards--3 {
		display: flex;
		flex-direction: column;
	}
	#s02 .cards--2 .card--center,
	#s02 .cards--3 .card--center {
		flex-direction: row;
	}
}
/* 募集終了後（data-phase="normal"）はモニター専用の要素を落とす */
main[data-phase="normal"] .is-monitor{ display:none !important; }
main[data-phase="monitor"] .is-normal{ display:none !important; }