:root{
  --bg:#e2defa;
  --panel: rgba(255,255,255,.86);
  --panel2: rgba(255,255,255,.72);
  --border: rgba(83,19,195,.18);
  --border2: rgba(83,19,195,.12);
  --text:#141428;
  --muted: rgba(20,20,40,.70);
  --accent:#5313C3; /* RGB(83,23,195) */
  --shadow: 0 14px 40px rgba(20,20,40,.18);
  --r: 16px;
  --fs-title: clamp(40px, 4.6vw, 56px);
  --fs-large: clamp(18px, 2.6vw, 24px);
  --fs-body: clamp(14px, 1.9vw, 16px);
  --fs-note: clamp(12px, 1.6vw, 13px);
  --indent-1: 0ch;
  --indent-2: 1ch;
  --indent-3: 2ch;
  --indent-4: 3ch;
}

*{ box-sizing:border-box; }
html,body{
  font-family: "Yu Gothic","游ゴシック体",YuGothic,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Meiryo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--text);
  background: #e2defa;
  line-height:1.6;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
a.ref-billing-flow{
  color: var(--accent) !important;
  text-decoration: underline !important;
}
a.ref-billing-flow:hover{
  text-decoration: underline !important;
}
#billing-flow{ scroll-margin-top: 1.5rem; }
.billing-flow img{
  width: 70%;
  height: auto;
  display: block;
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

.hero{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  position: relative;
  overflow:hidden;
}

/* タイトル帯：白枠なし（/p/・特商法・プライバシー） */
body[data-site-nav="p"] .hero,
body[data-site-nav="tokushoho"] .hero.tokushohoHero,
body[data-site-nav="privacy"] .hero.tokushohoHero {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.title{
letter-spacing: .02em;
  margin: 0 0 6px;
  font-weight: 850;
}
.subtitle{
  margin: 0 0 12px;
    color: #000;
max-width: 760px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 10px 0 14px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--border2);
  background: rgba(255,255,255,.78);
  color: rgba(20,20,40,.88);
  font-size: 13px;
  white-space:nowrap;
}

.ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.26);
  background: var(--accent);
  color:#fff;
  box-shadow: 0 14px 34px rgba(20,20,40,.24);
  font-weight: 850;
  font-size: 15px;
  min-width: 230px;
  cursor:pointer;
  user-select:none;
}
.btn.primary{
  border-color: rgba(83,19,195,.55);
  background: linear-gradient(180deg, rgba(83,19,195,.92), rgba(83,19,195,.82));
  color:#fff;
}
.btn:hover{
  filter: brightness(1.02);
  text-decoration:none;
}

.note{
  margin: 10px 0 0;
  color: rgba(20,20,40,.62);
  font-size: 12.5px;
}

.section{
  margin-top: 14px;
  border:1px solid var(--border);
  background: var(--panel2);
  border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(20,20,40,.12);
  padding: 14px 16px;
}
.section h2{
  margin: 0 0 10px;
font-weight: 850;
  letter-spacing:.02em;
  color: var(--accent) !important;
}
.section ul{
  margin: 0;
  padding-left: calc(var(--indent-3) * 2);
  color: rgba(20,20,40,.90);
  list-style-position: inside;
}
.section li{ margin: 6px 0; }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 920px){
  .hero{ padding: 18px 22px 16px; }
}

.signalList{ margin:0; padding-left: calc(var(--indent-3) * 2); }

.footer{
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(20,20,40,.55);
  font-size: 12px;
}
.footerLeft{ margin-right: auto; }
.footerRight{ color: var(--accent); text-decoration: none; }
.footerRight:hover{ text-decoration: underline; }

.tokushohoHero .tokushohoTitle{ font-size: var(--fs-large); font-weight: 850; letter-spacing: .02em; color: var(--accent) !important; margin: 0; }
.tokushohoSection{ padding: 0 16px 24px; }
.tokushohoTable{ width: 100%; border-collapse: collapse; font-size: 14px; }
.tokushohoTable th{ text-align: left; padding: 10px 12px 8px 0; vertical-align: top; width: 12em; color: var(--accent); font-weight: 600; }
.tokushohoTable td{ padding: 10px 0 8px; border-bottom: 1px solid rgba(83,19,195,.12); color: rgba(20,20,40,.9); }
.tokushohoTable a{ color: var(--accent); text-decoration: none; }
.tokushohoTable a:hover{ text-decoration: underline; }
.tokushohoTable .emailImg{ width: auto; height: auto; max-width: none; vertical-align: middle; image-rendering: auto; }

/* プライバシーポリシー */
.privacySection { padding: 18px 16px 24px; }
.privacySection .privacyIntro { margin: 0 0 20px; padding-left: 1em; color: rgba(20,20,40,.9); line-height: 1.7; }
.privacyArticle { margin-bottom: 22px; }
.privacyArticle:last-of-type { margin-bottom: 0; }
.privacyH2 { margin: 0 0 10px; font-size: var(--fs-body); font-weight: 850; letter-spacing: .02em; color: var(--accent) !important; padding-left: 0; }
.privacySection .privacyArticle p { margin: 0 0 8px; padding-left: 1em; color: rgba(20,20,40,.9); }
.privacySection .privacyArticle ul { margin: 0 0 8px 2em; padding-left: 0; list-style: none; }
.privacyArticle li { margin: 6px 0; }
.privacyUpdate { margin: 20px 0 0; font-size: var(--fs-note); color: rgba(20,20,40,.55); padding-left: 0; }
.footerRight a { color: var(--accent) !important; text-decoration: none; }
.footerRight a:hover { text-decoration: underline; }
.footerSep { margin: 0 8px; color: rgba(20,20,40,.45); }

.footerP {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.footerP .footerLinks {
  align-self: flex-end;
  text-align: right;
}
.footerP .footerLinks a {
  color: var(--accent, #5313C3) !important;
  text-decoration: none;
}
.footerP .footerLinks a:hover { text-decoration: underline; }
.footerP .footerMeta {
  align-self: center;
  text-align: center;
  color: rgba(20, 20, 40, .55);
  font-size: 12px;
  line-height: 1.5;
}

.thinSep{
  height:1px;
  background: rgba(83,19,195,.14);
  margin: 12px 0;
}

.heroIllustImg{
  width: 100%;
  height: auto;
  display: block;
}

.kicker{
  margin: 12px 0 10px;
  font-weight: 950;
  color: var(--accent);
  letter-spacing: .02em;
}

.typoBase{
  font-size: var(--fs-body);
  line-height: 1.7;
}

body{
  font-size: var(--fs-body);
  line-height: 1.7;
}

.title{
  font-size: var(--fs-title);
  line-height: 1.12;
}

.kicker{
  font-size: var(--fs-large);
  line-height: 1.25;
}

h2{
  font-size: var(--fs-large);
  line-height: 1.25;
}

.subtitle,
.section p,
.section li,
.heroBullets,
.heroBullets li,
.shopBullets,
.shopBullets li,
.badge{
  font-size: var(--fs-body);
}

.note,
.noteText{
  font-size: var(--fs-note);
}

.section > div[style]:not(.illustration):not(.thinSep){
  padding-left: var(--indent-3);
}



.title{
  padding-left: calc(var(--indent-1) * 2);
}

.kicker,
h2{
  padding-left: calc(var(--indent-2) * 2);
}

.subtitle{
  padding-left: calc(var(--indent-3) * 2);
}

.section p{
  padding-left: calc(var(--indent-3) * 2);
}

.exampleText{ margin: 0; }
.exampleNote{ display: block; margin-top: 6px; }
.badges,
.heroBullets,
.shopBullets,
.signalSamples{
  margin-left: var(--indent-3);
}

.section ul,
.section ol{
  margin: 0;
  padding-left: calc(var(--indent-3) * 2);
  list-style-position: inside;
}

.section ol li::marker{ color:#000 !important; }

.note,
.noteText{
  padding-left: var(--indent-4);
}




.signalSamples{
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 12px;
  row-gap: 10px;
  align-items: stretch;
  width: max-content;
  margin: 10px 0 12px;
  margin-left: var(--indent-3);
}
.sPair{
  display: contents;
}
.sRow{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.92);
}

.signalSamples .sRow.sBlue,
.signalSamples .sRow.sYellow,
.signalSamples .sRow.sRed{
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
}
.sRow .dot{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  flex: 0 0 auto;
}

.sRow .label{
  font-weight: 900;
  min-width: 2.2em;
}

.sRow .msg{
  color: rgba(20,20,40,.84);
  font-weight: 800;
  letter-spacing: .01em;
}
.sRow.sYellow + .sRow .msg,
.sRow.sRed + .sRow .msg{
  opacity: .35;
}

.sBlue .dot{ background:#2ad659; box-shadow: 0 0 18px rgba(42,214,89,.55), 0 0 6px rgba(42,214,89,.85); }
.sYellow .dot{ background: transparent; border: 4px solid #f0c419; box-shadow: none; }
.sRed .dot{ background: transparent; border: 4px solid #e74c3c; box-shadow: none; }


.heroBullets{
  margin: 10px 0 10px;
  padding-left: 20px;
  color: rgba(20,20,40,.86);
  font-weight: 600;
  line-height: 1.6;
}
.heroBullets li{
  margin: 2px 0;
}
.heroBullets li::marker{
  font-size: .9em;
}

.noteText.noteTextLarge{
  font-size: var(--fs-body);
}

/* TEXT COLOR: default black. Keep only 2 exceptions: .kicker and .btn */
.wrap, .wrap * { color: #000 !important; }
.kicker, .section .privacyH2, .tokushohoHero .tokushohoTitle { color: var(--accent) !important; }
.btn, .btn * { color: #fff !important; }
/* release note (top-right on main title) */
.title{ position: relative; }
.releaseNote{
  position: absolute;
  top: 0;
  right: 0;
  color: #e60000 !important;
  font-weight: 800;
  font-size: 0.62em; /* between title and subtitle */
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}


/* spacing between main title and sub title (double) */
.hero .title{ margin-bottom: 0; }
.hero .kicker:first-child { margin-top: 0; }
.hero .title + .kicker { margin-top: 24px; }


.releaseTop{
  width:100%;
  text-align:right;
  color:#e60000 !important;
  -webkit-text-fill-color:#e60000 !important;
  font-weight:800;
  font-size: clamp(14px, 2.8vw, 18px);
  line-height:1.25;
  margin: 0 0 6px;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, "MS Gothic", "Osaka-Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}
.textLines{
  padding-left: calc(var(--indent-3) * 2);
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin: 0;
}
.textLines > div{
margin:0;
  line-height:1.7;
  padding-left:1em;
  text-indent:-1em;
}
.textLines.steps > div{
  line-height:1.7;
}
.termsBox {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  border: 1px solid var(--border2);
}
.termsBox h3 {
  margin: 14px 0 8px;
  font-size: var(--fs-body);
  font-weight: 850;
  color: var(--accent) !important;
}
.termsBox h3:first-child { margin-top: 0; }
.termsBox .termsText { margin-bottom: 4px; }
/* 各条：見出しで改行、各項は全角1文字インデント、条間は各項より広く */
.termsArticle {
  margin-bottom: 1.35em;
}
.termsArticle:last-child {
  margin-bottom: 0;
}
.termsArticleHead {
  font-weight: 850;
  display: block;
  margin: 0 0 0.25em 0;
}
.termsArticleBody {
  padding-left: 1em;
  line-height: 1.7;
}
/* 各項の2行目以降を1行目より全角1文字右にぶら下げ */
.termsArticleBody > div {
  margin: 0 0 0.35em 0;
  padding-left: 1em;
  text-indent: -1em;
}
.termsArticleBody > div:last-child {
  margin-bottom: 0;
}
.lineNote{
  opacity:.85;
}

  /* /a で必要な入力欄だけ最小限（LPのテイストを崩さない範囲）・常に縦並び・表示幅に応じて伸縮 */
  .applyForm {
    margin-top: 12px;
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }
  .applyRow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .applyField {
    display: grid;
    gap: 6px;
    min-width: 0;
  }
  .applyLabel {
    font-weight: 850;
    letter-spacing: .02em;
  }
  .applyLabel .applyReq {
    color: #d00 !important;
  }
  .applyInput, .applyTextarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.22);
    background: rgba(255,255,255,.92);
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
  }
  .applyTextarea {
    min-height: 120px;
    resize: vertical;
  }
  .applyAgree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
  }
  .applyAgree input{
    -webkit-appearance:none;
    appearance:none;
    width:18px;
    height:18px;
    margin-top:2px;
    border:2px solid #d00;
    border-radius:4px;
    background:#fff;
    display:grid;
    place-content:center;
  }
  .applyAgree input::before{
    content:"";
    width:10px;
    height:10px;
    transform:scale(0);
    transition:120ms transform ease-in-out;
    background:#d00;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  }
  .applyAgree input:checked::before{ transform:scale(1); }
  .applyAgree input:focus{ outline:2px solid rgba(208,0,0,.28); outline-offset:2px; }
.applySubmit {
    margin-top: 10px;
    display:flex;
    justify-content:center;
  }
  .applySubmit button {
    border: 0;
  }
  .applyBtn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 850;
    background: rgba(83,19,195,.12);
    border: 1px solid rgba(83,19,195,.35);
    box-shadow: 0 12px 26px rgba(20,20,40,.14);
    min-width: 260px;
    cursor: not-allowed;
    opacity: .60;
  }
  
  /* apply button disabled */
  .applySubmit .btn[disabled]{
    opacity:1;
    cursor:not-allowed;
    filter:none;
  }

/* ===== 申込フォーム 案B：暖色コントラスト（紫の中にアンバー） ===== */
#apply{
  background: linear-gradient(168deg, #fdf8ef 0%, #faf3e2 100%);
  border: 1px solid #e8dcc4;
  box-shadow: 0 2px 12px rgba(180,140,60,.08);
}
#apply h2{ color: #7a5c1e !important; }
#apply > .textLines > div{ color: #6b5d3e !important; }
#apply .applyLabel .applyReq{ color: #c0392b !important; }
#apply .applyLabel .applyOpt{ color: #9a8e6e !important; }
#apply .applyInput{
  background: #fff;
  border: 1px solid #ddd2b8;
  transition: border-color .15s;
}
#apply .applyInput:focus{ border-color: #c6a24e; }
#apply .applySubmit .btn{
  border-color: #c08a10;
  background: linear-gradient(135deg, #d4a017, #c08a10);
  box-shadow: 0 4px 14px rgba(200,150,30,.25);
}