/* ==========================================================================
   EC Assist Lab LP
   Digital Agency Design System 準拠
   - 8px グリッド / Noto Sans JP / WCAG 2.1 AA / スマホファースト
   ========================================================================== */

:root{
  /* Color ------------------------------------------------------------- */
  --c-primary:        #001C75;
  --c-primary-dark:   #001047;
  --c-primary-light:  #E5EBF2;
  --c-secondary:      #1C51CD;
  --c-secondary-light:#ECF2FF;
  --c-accent:         #D9381E;
  --c-accent-dark:    #A82A16;
  --c-text:           #1A1A1A;
  --c-text-sub:       #595959;
  --c-bg:             #FFFFFF;
  --c-bg-sub:         #F5F7FA;
  --c-border:         #DCDFE6;
  --c-success:        #2D8C3C;
  --c-error:          #D9381E;   /* semantic.error（アクセントレッドと同値） */

  /* Typography -------------------------------------------------------- */
  --font-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ls: 0.03em;
  --lh-body: 1.7;
  --lh-heading: 1.4;

  /* Spacing (8px grid) ------------------------------------------------ */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;

  /* Shape ------------------------------------------------------------- */
  --r-button: 4px;
  --r-card: 6px;
  --border-1: 1px solid var(--c-border);

  /* Layout ------------------------------------------------------------ */
  --container: 1200px;
  --section-y: 48px;   /* mobile */
  --tap: 44px;
}

@media (min-width: 768px){
  :root{ --section-y: 80px; }
}

/* Reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--lh-body);
  letter-spacing: var(--ls);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
img{ max-width: 100%; height: auto; display: block; }
table{ border-collapse: collapse; border-spacing: 0; }
a{ color: var(--c-secondary); }

h1,h2,h3,h4{ line-height: var(--lh-heading); font-weight: 700; }

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; }
}

/* Focus -------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline: 3px solid var(--c-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link ---------------------------------------------------------- */
.skip-link{
  position: absolute;
  top: -200px;
  left: var(--s-2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s-1) var(--s-2);
  background: var(--c-primary);
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-button);
}
.skip-link:focus{ top: var(--s-1); }

/* Layout ------------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-2);
}
@media (min-width: 768px){
  .container{ padding-inline: var(--s-3); }
}

.section{ padding-block: var(--section-y); }
.section--sub{ background: var(--c-bg-sub); }
.section--line{ border-top: var(--border-1); }

.section-head{ margin-bottom: var(--s-4); }
@media (min-width: 768px){
  .section-head{ margin-bottom: var(--s-6); }
}
.section-label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-secondary);
  margin-bottom: var(--s-1);
}
.section-title{
  font-size: 22px;
  color: var(--c-primary);
}
@media (min-width: 768px){
  .section-title{ font-size: 28px; }
}
.section-lead{
  margin-top: var(--s-2);
  color: var(--c-text-sub);
  font-size: 15px;
}
@media (min-width: 768px){
  .section-lead{ font-size: 16px; }
}

/* Buttons ------------------------------------------------------------ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--s-1) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-button);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--ls);
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s linear, border-color .15s linear, color .15s linear;
}
.btn--primary{
  background: var(--c-accent);
  color: #FFFFFF;
  min-height: 54px;
  padding-inline: var(--s-4);
  font-size: 16px;
}
.btn--primary:hover{ background: var(--c-accent-dark); }

.btn--outline{
  background: #FFFFFF;
  color: var(--c-primary);
  border-color: var(--c-primary);
  min-height: 54px;
  padding-inline: var(--s-4);
  font-size: 16px;
}
.btn--outline:hover{ background: var(--c-primary-light); }

.btn--sm{
  min-height: var(--tap);
  font-size: 14px;
  padding-inline: var(--s-2);
}
/* .btn--sm は --primary / --outline の大サイズ指定を上書きする */
.btn--sm.btn--primary,
.btn--sm.btn--outline{
  min-height: var(--tap);
  font-size: 14px;
  padding-inline: var(--s-2);
}
.btn--fill{ width: 100%; }

/* 視覚的に隠す（スクリーンリーダーには読ませる） */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Badge -------------------------------------------------------------- */
.badge{
  display: inline-block;
  padding: 6px var(--s-2);
  background: var(--c-primary-light);
  color: var(--c-primary);
  border-radius: var(--r-button);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.badge--new{
  background: var(--c-accent);
  color: #FFFFFF;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: var(--border-1);
}
.header__inner{
  display: flex;
  flex-direction: column;
}
.header__bar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2);
  min-height: 56px;
}
.logo{
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  color: var(--c-primary);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.logo__mark{
  width: 24px;
  height: 24px;
  flex: none;
  background: var(--c-primary);
  border-radius: 2px;
  position: relative;
}
.logo__mark::after{
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  background: #FFFFFF;
}
.header__cta{ display: none; }

.gnav{
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  border-top: var(--border-1);
  scrollbar-width: none;
}
.gnav::-webkit-scrollbar{ display: none; }
.gnav a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.gnav a:hover{
  color: var(--c-secondary);
  border-bottom-color: var(--c-secondary);
}

@media (min-width: 900px){
  .header__inner{ flex-direction: row; align-items: center; justify-content: space-between; }
  .header__bar{ min-height: 72px; }
  .gnav{ border-top: 0; gap: var(--s-4); }
  .header__cta{ display: inline-flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background: var(--c-bg);
  border-bottom: var(--border-1);
  padding-block: var(--s-6) var(--s-6);
}
@media (min-width: 768px){
  .hero{ padding-block: var(--s-8) var(--s-10); }
}
.hero__grid{
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 900px){
  .hero__grid{
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
    gap: var(--s-8);
    align-items: center;
  }
}
.hero__title{
  margin-top: var(--s-3);
  font-size: 28px;
  color: var(--c-primary);
}
@media (min-width: 768px){
  .hero__title{ font-size: 44px; }
}
.hero__lead{
  margin-top: var(--s-3);
  font-size: 15px;
  color: var(--c-text-sub);
}
@media (min-width: 768px){
  .hero__lead{ margin-top: var(--s-4); font-size: 17px; }
}
.hero__actions{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
@media (min-width: 480px){
  .hero__actions{ flex-direction: row; }
}
.hero__notes{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--c-text-sub);
}
.hero__notes li{ position: relative; padding-left: 14px; }
.hero__notes li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--c-primary);
  border-radius: 50%;
}

/* Hero figure（4製品の役割分担を示す図解） --------------------------- */
.figure{
  border: var(--border-1);
  border-radius: var(--r-card);
  background: #FFFFFF;
  overflow: hidden;
}
.figure__head{
  padding: var(--s-2) var(--s-3);
  background: var(--c-primary);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}
.figure__body{ padding: var(--s-3); background: var(--c-bg-sub); }
.figure__list{ display: grid; gap: var(--s-1); }
.figure__row{
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  background: #FFFFFF;
  border: var(--border-1);
  border-radius: var(--r-card);
}
.figure__freq{
  font-size: 12px;
  font-weight: 700;
  color: var(--c-primary);
  text-align: center;
  padding: 4px 0;
  background: var(--c-primary-light);
  border-radius: var(--r-button);
  line-height: 1.4;
}
.figure__name{ display: block; font-size: 14px; font-weight: 700; line-height: 1.4; }
.figure__role{ display: block; margin-top: 4px; font-size: 12px; color: var(--c-text-sub); line-height: 1.6; }
.figure__foot{
  padding: var(--s-2) var(--s-3);
  border-top: var(--border-1);
  background: #FFFFFF;
  font-size: 12px;
  color: var(--c-text-sub);
}

/* ==========================================================================
   Why
   ========================================================================== */
.why__title{ font-size: 20px; color: var(--c-primary); }
@media (min-width: 768px){ .why__title{ font-size: 24px; } }

.problems{
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
@media (min-width: 768px){
  .problems{ grid-template-columns: repeat(3,1fr); gap: var(--s-3); margin-top: var(--s-6); }
}
.problem{
  padding: var(--s-3);
  background: #FFFFFF;
  border: var(--border-1);
  border-radius: var(--r-card);
}
.problem__num{
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-secondary);
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.problem__title{
  margin-top: var(--s-1);
  font-size: 16px;
}
.problem__text{
  margin-top: var(--s-1);
  font-size: 14px;
  color: var(--c-text-sub);
}

/* ==========================================================================
   Products
   ========================================================================== */
.products{
  display: grid;
  gap: var(--s-2);
}
@media (min-width: 900px){
  .products{ grid-template-columns: repeat(2,1fr); gap: var(--s-3); }
}
.card{
  display: flex;
  flex-direction: column;
  padding: var(--s-3);
  background: #FFFFFF;
  border: var(--border-1);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.card__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
}
.card__title{
  margin-top: var(--s-2);
  font-size: 20px;
  color: var(--c-primary);
}
.card__text{
  margin-top: var(--s-1);
  font-size: 14px;
  color: var(--c-text-sub);
}
.features{
  margin-top: var(--s-2);
  display: grid;
  gap: var(--s-1);
}
.features li{
  position: relative;
  padding-left: var(--s-3);
  font-size: 14px;
  line-height: 1.7;
}
.features li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-primary);
  font-weight: 700;
}
.price{
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: var(--border-1);
  font-size: 14px;
}
.price__free{ font-weight: 700; color: var(--c-primary); }
.price__paid{ color: var(--c-text-sub); }
.card__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-2);
}
.card__actions .btn{ flex: 1 1 160px; }

/* ==========================================================================
   Compare table
   ========================================================================== */
.table-scroll{
  overflow-x: auto;
  border: var(--border-1);
  border-radius: var(--r-card);
  -webkit-overflow-scrolling: touch;
}
.table-hint{
  margin-top: var(--s-1);
  font-size: 13px;
  color: var(--c-text-sub);
}
@media (min-width: 900px){ .table-hint{ display: none; } }

.compare{
  width: 100%;
  min-width: 760px;
  font-size: 14px;
  background: #FFFFFF;
}
.compare th,
.compare td{
  padding: var(--s-2);
  border-bottom: var(--border-1);
  border-right: var(--border-1);
  vertical-align: top;
  line-height: 1.7;
}
.compare th:last-child,
.compare td:last-child{ border-right: 0; }
.compare thead th{
  background: var(--c-primary);
  color: #FFFFFF;
  font-weight: 700;
  text-align: center;
  border-right-color: rgba(255,255,255,0.24);
  border-bottom: 0;
  white-space: nowrap;
}
.compare thead th:first-child{ text-align: left; }
.compare tbody tr:nth-child(odd) td,
.compare tbody tr:nth-child(odd) th{ background: #FFFFFF; }
.compare tbody tr:nth-child(even) td,
.compare tbody tr:nth-child(even) th{ background: var(--c-bg-sub); }
.compare tbody tr:last-child td,
.compare tbody tr:last-child th{ border-bottom: 0; }
.compare tbody th{
  text-align: left;
  font-weight: 700;
  color: var(--c-primary);
  white-space: nowrap;
}
.compare td{ text-align: center; }
.compare .col-solve{ text-align: left; min-width: 200px; }
.compare .num{ font-weight: 700; white-space: nowrap; }
.table-note{
  margin-top: var(--s-2);
  font-size: 13px;
  color: var(--c-text-sub);
}

/* ==========================================================================
   Where to start
   ========================================================================== */
.starts{
  display: grid;
  gap: var(--s-2);
}
@media (min-width: 900px){
  .starts{ grid-template-columns: repeat(3,1fr); gap: var(--s-3); }
}
.start{
  display: flex;
  flex-direction: column;
  padding: var(--s-3);
  background: #FFFFFF;
  border: var(--border-1);
  border-radius: var(--r-card);
}
.start__q{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}
.start__answer{
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: var(--border-1);
}
.start__label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-sub);
}
.start__name{
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.4;
}
.start__text{
  margin-top: var(--s-1);
  font-size: 14px;
  color: var(--c-text-sub);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  border: var(--border-1);
  border-radius: var(--r-card);
  background: #FFFFFF;
  overflow: hidden;
}
.faq__item{ border-bottom: var(--border-1); }
.faq__item:last-child{ border-bottom: 0; }
.faq__q{
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
  transition: background-color .15s linear;
}
.faq__q::-webkit-details-marker{ display: none; }
.faq__q:hover{ background: var(--c-secondary-light); }
.faq__q::before{
  content: "Q.";
  flex: none;
  color: var(--c-primary);
  font-weight: 700;
}
.faq__q::after{
  content: "";
  flex: none;
  margin-left: auto;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-right: 2px solid var(--c-text-sub);
  border-bottom: 2px solid var(--c-text-sub);
  transform: rotate(45deg);
}
.faq__item[open] .faq__q::after{ transform: rotate(-135deg); margin-top: 12px; }
.faq__a{
  position: relative;
  padding: 0 var(--s-3) var(--s-3) calc(var(--s-3) + var(--s-4));
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.7;
}
.faq__a a{
  /* 本文中のリンクも、行送りを崩さずタップ領域44pxを確保 */
  padding-block: 11px;
  color: var(--c-secondary);
  text-underline-offset: 3px;
}
.faq__a::before{
  content: "A.";
  position: absolute;
  left: var(--s-3);
  top: 0;
  font-weight: 700;
  color: var(--c-text);
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.closing{
  background: var(--c-primary);
  color: #FFFFFF;
}
.closing__inner{ max-width: 800px; margin-inline: auto; text-align: center; }
.closing__title{ font-size: 20px; }
@media (min-width: 768px){ .closing__title{ font-size: 26px; } }
.closing__text{
  margin-top: var(--s-3);
  font-size: 15px;
  color: #E5EBF2;
  text-align: left;
}
@media (min-width: 768px){ .closing__text{ text-align: center; } }
.closing .btn--primary{ margin-top: var(--s-4); }
.closing__notes{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-3);
  font-size: 13px;
  color: #E5EBF2;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background: var(--c-bg-sub);
  border-top: var(--border-1);
  padding-block: var(--s-6);
  color: var(--c-text-sub);
  font-size: 14px;
}
.footer__grid{
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 768px){
  .footer__grid{ grid-template-columns: repeat(3,1fr); gap: var(--s-6); }
}
.footer__title{
  font-size: 14px;
  color: var(--c-primary);
  margin-bottom: var(--s-1);
}
.footer__list li a,
.footer a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__list li a:hover,
.footer a:hover{ color: var(--c-secondary); }
.footer__brand{
  display: flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-primary);
  font-weight: 700;
  font-size: 16px;
}
.footer__desc{ margin-top: var(--s-1); font-size: 13px; }
.footer__bottom{
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--border-1);
  font-size: 13px;
}

/* ==========================================================================
   Legal pages（特定商取引法に基づく表記 / プライバシーポリシー / 利用規約）
   ※ 既存の class 名（legal-back-link / legal-title / legal-note /
     legal-section-content）は ?from= によるJS書き換えが依存しているため変更しない
   ========================================================================== */
.legal-page{
  background: var(--c-bg-sub);
  padding-block: var(--s-4) var(--s-8);
}
@media (min-width: 768px){
  .legal-page{ padding-block: var(--s-6) var(--s-10); }
}

.legal-header{ margin-bottom: var(--s-3); }

.legal-back-link{
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  color: var(--c-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.legal-back-link:hover{ text-decoration: underline; text-underline-offset: 3px; }

.legal-content{
  max-width: 800px;
  margin-inline: auto;
  padding: var(--s-3);
  background: var(--c-bg);
  border: var(--border-1);
  border-radius: var(--r-card);
}
@media (min-width: 768px){
  .legal-content{ padding: var(--s-6); }
}

.legal-title{
  font-size: 24px;
  color: var(--c-primary);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: var(--s-4);
}
@media (min-width: 768px){
  .legal-title{ font-size: 32px; margin-bottom: var(--s-6); }
}

.legal-section{ margin-bottom: var(--s-4); }
.legal-section:last-child{ margin-bottom: 0; }
@media (min-width: 768px){
  .legal-section{ margin-bottom: var(--s-6); }
}

.legal-section-title{
  font-size: 17px;
  color: var(--c-primary);
  padding-bottom: var(--s-1);
  margin-bottom: var(--s-2);
  border-bottom: var(--border-1);
}
@media (min-width: 768px){
  .legal-section-title{ font-size: 19px; }
}

.legal-section-content{
  font-size: 15px;
  color: var(--c-text);
  line-height: var(--lh-body);
}
.legal-section-content p{ margin-bottom: var(--s-2); }
.legal-section-content p:last-child{ margin-bottom: 0; }
.legal-section-content strong{ font-weight: 700; }

/* 箇条書き（法務ページ本文用。アイコンは使わず罫点のみ） */
.legal-section-content ul{
  margin-block: 0 var(--s-2);
  display: grid;
  gap: var(--s-1);
}
.legal-section-content ul:last-child{ margin-bottom: 0; }
.legal-section-content li{
  position: relative;
  padding-left: var(--s-2);
}
.legal-section-content li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;   /* line-height 1.7 の半分 = 1行目の中央 */
  width: 6px;
  height: 1px;
  background: var(--c-text-sub);
}

.legal-section-content a{
  color: var(--c-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: 14px;   /* 行送りを崩さずタップ領域44pxを確保 */
}
.legal-section-content a:hover{ color: var(--c-primary); }

/* 補足ボックス */
.legal-note{
  margin-top: var(--s-2);
  padding: var(--s-2);
  background: var(--c-bg-sub);
  border: var(--border-1);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-button);
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: var(--lh-body);
}
.legal-note strong{ color: var(--c-text); }
.legal-note a{ color: var(--c-secondary); }

.legal-updated{
  margin-top: var(--s-4);
  padding-top: var(--s-2);
  border-top: var(--border-1);
  font-size: 13px;
  color: var(--c-text-sub);
  text-align: right;
}

/* 法務ページ用の簡易フッター */
.legal-footer{
  background: var(--c-bg-sub);
  border-top: var(--border-1);
  padding-block: var(--s-4);
  font-size: 13px;
  color: var(--c-text-sub);
  text-align: center;
}
.legal-footer__links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--s-3);
  margin-bottom: var(--s-1);
}
.legal-footer a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-footer a:hover{ color: var(--c-secondary); }

/* ==========================================================================
   FAQ 一覧ページ（faq.html）
   ※ 既存の class 名は変更しない。Q./A. は色ではなくウェイトと余白のみで区別する
   ========================================================================== */
.faq-category{
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-1);
  font-size: 17px;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
}
@media (min-width: 768px){
  .faq-category{ font-size: 19px; margin-top: var(--s-8); }
}
.faq-category:first-of-type{ margin-top: 0; }

.faq-item{
  padding: var(--s-2) 0;
  border-bottom: var(--border-1);
}
.faq-item:last-child{ border-bottom: 0; }

.faq-question,
.faq-answer{
  position: relative;
  padding-left: var(--s-4);
  line-height: var(--lh-body);
}
.faq-question{
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
}
.faq-question::before{
  content: "Q.";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--c-primary);
}
.faq-answer{
  margin-top: var(--s-1);
  font-size: 14px;
  color: var(--c-text-sub);
}
.faq-answer::before{
  content: "A.";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--c-text);
}
.faq-answer a{
  color: var(--c-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: 14px;
}