/* ============================================================
   TEBANA-SAN — Japanese Poster Design System
   Mustard / Vermilion / Deep Green / Cobalt / Ink
   ============================================================ */
    :root {
      --mustard: #F2A71B;
      --vermilion: #C9301F;
      --green: #254A34;
      --cobalt: #1B3AB8;
      --ink: #121110;
      --paper: #FAF5E9;
      --paper-2: #F2EBD9;

      --display: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
      --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
      --latin: "Anton", "Zen Kaku Gothic New", sans-serif;
      --serif-it: "EB Garamond", serif;
      --hand: "Yusei Magic", "Zen Kaku Gothic New", sans-serif;

      --pad: 22px;
      --bar: 74px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth
    }

    body {
      font-family: var(--gothic);
      font-weight: 500;
      background: var(--mustard);
      color: var(--ink);
      line-height: 1.9;
      letter-spacing: .02em;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto
    }

    a {
      color: inherit;
      text-decoration: none
    }

    h1,
    h2,
    h3,
    h4 {
      font-weight: 900;
      line-height: 1.42;
      letter-spacing: .01em;
      line-break: strict;
      overflow-wrap: anywhere;
    }

    .h-sec,
    .final h2,
    .how__result h3 {
      word-break: keep-all;
      overflow-wrap: normal;
      text-wrap: balance;
    }

    .app {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      background: var(--paper);
      position: relative;
      overflow: hidden;
      padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom));
    }

    .pad {
      padding-left: var(--pad);
      padding-right: var(--pad)
    }

    .sec {
      padding-top: 64px;
      padding-bottom: 64px
    }

    /* ---------- 共通パーツ ---------- */
    .eyebrow {
      font-family: var(--serif-it);
      font-style: italic;
      font-size: 14px;
      letter-spacing: .06em;
      line-height: 1.4;
      display: block;
    }

    .kicker {
      display: inline-block;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .16em;
      padding: 5px 12px 4px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      line-height: 1.6;
    }

    .h-sec {
      font-size: 30px;
      margin-top: 14px
    }

    /* マーカーは文字に重ねず、必ず文字の下に敷く（可読性優先） */
    .h-sec .u {
      border-bottom: 7px solid var(--mustard);
      padding-bottom: 2px;
    }

    .h-sec .r {
      color: var(--vermilion)
    }

    .lead {
      font-size: 15px;
      font-weight: 500;
      line-height: 2.05;
      margin-top: 18px
    }

    .rule {
      height: 5px;
      background: var(--ink);
      width: 64px;
      margin: 22px 0
    }

    .rule--blue {
      background: var(--cobalt)
    }

    .num {
      font-family: var(--latin);
      font-weight: 400;
      letter-spacing: .01em;
      line-height: .86
    }

    /* 画像の共通トーン（仮置き素材をパレットになじませる） */
    .ph {
      position: relative;
      border: 2.5px solid var(--ink);
      background: #fff;
      overflow: hidden
    }

    .ph img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.8) contrast(1.06) sepia(.08)
    }

    .ph--tint::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: var(--mustard);
      mix-blend-mode: multiply;
      opacity: .16;
    }

    .ph__tag {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 2;
      background: var(--ink);
      color: var(--mustard);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      padding: 6px 12px;
      line-height: 1.6;
    }

    /* ボタン */
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-height: 62px;
      padding: 11px 18px;
      text-align: center;
      font-weight: 900;
      font-size: 17px;
      letter-spacing: .04em;
      border: 2.5px solid var(--ink);
      border-radius: 2px;
      box-shadow: 5px 5px 0 var(--ink);
      transition: transform .12s ease, box-shadow .12s ease;
    }

    .btn:active {
      transform: translate(4px, 4px);
      box-shadow: 1px 1px 0 var(--ink)
    }

    .btn--line {
      background: #06C755;
      color: #fff
    }

    .btn--tel {
      background: var(--paper);
      color: var(--ink)
    }

    .btn--ink {
      background: var(--ink);
      color: var(--paper);
      box-shadow: 5px 5px 0 var(--vermilion)
    }

    .btn small {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      opacity: .85
    }

    /* ============================================================ HEADER */
    /* スマホではヘッダーを固定しない（下の追尾バーに集約する） */
    .hd {
      position: relative;
      z-index: 60;
      background: var(--mustard);
      border-bottom: 2px solid var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      height: 56px;
    }

    .hd__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--display);
      font-size: 20px;
      letter-spacing: .02em;
      line-height: 1
    }

    .hd__mark {
      width: 38px;
      height: 38px;
      flex: none;
    }

    .hd__logo i {
      font-family: var(--serif-it);
      font-style: italic;
      font-size: 10px;
      font-weight: 400;
      display: block;
      letter-spacing: .04em;
      margin-top: 3px
    }

    .hd__nav {
      display: none
    }

    .hd__cta {
      display: none
    }

    /* ============================================================ HERO */
    .hero {
      position: relative;
      background: var(--mustard)
    }

    .hero picture {
      display: block
    }

    .hero__img {
      width: 100%;
      display: block
    }


    /* ヒーロー直下の帯：静止した3項目だと弱いので流れるティッカーにする */
    .hero__strip {
      background: var(--ink);
      color: var(--paper);
      border-top: 3px solid var(--vermilion);
      border-bottom: 3px solid var(--mustard);
      overflow: hidden;
      position: relative;
    }

    .hero__strip::before,
    .hero__strip::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 46px;
      z-index: 2;
      pointer-events: none;
    }

    .hero__strip::before {
      left: 0;
      background: linear-gradient(90deg, var(--ink), transparent);
    }

    .hero__strip::after {
      right: 0;
      background: linear-gradient(270deg, var(--ink), transparent);
    }

    .ticker__track {
      display: flex;
      width: max-content;
      animation: tickerRun 26s linear infinite;
    }

    .hero__strip:hover .ticker__track { animation-play-state: paused }

    @keyframes tickerRun {
      from { transform: translateX(0) }
      to   { transform: translateX(-50%) }
    }

    .ticker__row {
      display: flex;
      align-items: center;
      flex: none;
      padding: 14px 0;
    }

    .ticker__row span {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 20px;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .06em;
      white-space: nowrap;
    }

    .ticker__row b {
      font-family: var(--latin);
      font-weight: 400;
      font-size: 22px;
      color: var(--mustard);
      line-height: 1;
    }

    .ticker__row i {
      font-style: normal;
      color: var(--vermilion);
      font-size: 13px;
      line-height: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      .ticker__track { animation: none }
    }

    .hero__cta {
      background: var(--vermilion);
      padding: 26px var(--pad) 30px;
      display: grid;
      gap: 12px
    }

    .hero__cta .note {
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      letter-spacing: .04em;
      line-height: 1.8
    }

    /* ============================================================ ABOUT */
    .about {
      background: var(--green);
      color: var(--paper);
      position: relative;
      overflow: hidden
    }

    /* 緑ベタが広いので、斜めの細線・破線の輪・巨大なアウトライン文字で面を持たせる */
    .deco {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      background: repeating-linear-gradient(45deg,
          rgba(250, 245, 233, .05) 0 1px,
          transparent 1px 13px);
    }

    .deco::before {
      content: "";
      position: absolute;
      right: -110px;
      top: 6%;
      width: 300px;
      height: 300px;
      border: 2px dashed rgba(242, 167, 27, .3);
      border-radius: 50%;
    }

    .deco__word {
      position: absolute;
      left: -10px;
      bottom: -12px;
      font-family: var(--latin);
      font-size: 78px;
      line-height: .78;
      letter-spacing: .01em;
      white-space: nowrap;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(242, 167, 27, .26);
    }

    .about .wrap,
    .step .wrap {
      position: relative;
      z-index: 1;
    }

    .step {
      position: relative;
      overflow: hidden;
    }

    .about .kicker {
      border-color: var(--paper);
      color: var(--paper)
    }

    .about__fig {
      position: relative;
      margin-top: 26px
    }

    .about__fig img {
      width: 76%;
      margin-left: auto;
      margin-right: 0;
      display: block
    }

    /* セリフなので、見出しのゴシックではなく手書き体で話し言葉らしく */
    .bubble {
      position: absolute;
      left: var(--pad);
      bottom: 46%;
      z-index: 2;
      max-width: 66%;
      background: var(--paper);
      color: var(--ink);
      border: 3px solid var(--cobalt);
      border-radius: 20px;
      padding: 16px 18px;
      font-family: var(--hand);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.75;
      letter-spacing: 0;
      box-shadow: 4px 4px 0 rgba(18, 17, 16, .22);
    }

    /* しっぽ：枠線ぶんを重ねて二枚重ねで描く */
    /* しっぽ：スマホでは吹き出しが人物の左隣に来るので右向き
       （PC では頭上に置くため、PC 側で下向きに差し替える） */
    .br-sp { display: inline }

    .bubble::before,
    .bubble::after {
      content: "";
      position: absolute;
      bottom: 22px;
      width: 0;
      height: 0;
      border: 11px solid transparent;
    }

    .bubble::before {
      right: -22px;
      border-left-color: var(--cobalt);
    }

    .bubble::after {
      right: -16px;
      border-left-color: var(--paper);
    }

    .about__body {
      margin-top: -10px;
      position: relative;
      z-index: 3
    }

    .about__note {
      margin-top: 20px;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.9;
      border-left: 3px solid var(--mustard);
      padding-left: 12px;
      opacity: .9;
    }

    /* ============================================================ STATS */
    /* 買取LPにありがちな金＋リボンの記章ではなく、
       ポスター文脈に合う「二重丸のハンコ」で3つの安心材料を打ち出す */
    .stats {
      background: var(--mustard);
      border-top: 3px solid var(--ink);
      border-bottom: 3px solid var(--ink);
      padding: 44px 0 46px;
      position: relative;
      overflow: hidden;
    }

    .stats::before,
    .stats::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 8px;
      background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 20px);
      opacity: .28;
    }

    .stats::before { top: 14px }
    .stats::after  { bottom: 14px }

    .stats__lead {
      position: relative;
      z-index: 1;
      text-align: center;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.75;
      margin-bottom: 26px;
      padding: 0 var(--pad);
    }

    .stats__lead b {
      display: inline-block;
      border-bottom: 6px solid var(--vermilion);
      padding-bottom: 1px;
    }

    .stats__grid {
      position: relative;
      z-index: 1;
      display: grid;
      /* minmax(0,1fr) にしないと中身の最小幅で列がはみ出す */
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      padding: 0 12px;
    }

    .stat {
      text-align: center;
      min-width: 0;
    }

    .seal {
      width: 100%;
      max-width: 118px;
      margin: 0 auto;
      aspect-ratio: 1/1;
      border-radius: 50%;
      background: var(--paper);
      border: 3px solid var(--ink);
      box-shadow:
        inset 0 0 0 4px var(--paper),
        inset 0 0 0 6px var(--ink),
        5px 5px 0 var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .stat:nth-child(1) .seal { transform: rotate(-3deg) }
    .stat:nth-child(2) .seal { transform: rotate(1.5deg) }
    .stat:nth-child(3) .seal { transform: rotate(-1.5deg) }

    .seal__label {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .1em;
      line-height: 1.6;
    }

    .seal__val {
      font-size: 38px;
      color: var(--vermilion);
      margin-top: 3px;
      display: flex;
      align-items: baseline;
      gap: 1px;
    }

    .seal__val small {
      font-size: 14px;
      font-family: var(--gothic);
      font-weight: 900;
    }

    .seal__val .jp {
      font-family: var(--gothic);
      font-weight: 900;
      font-size: 32px;
    }

    .stat__sub {
      margin-top: 12px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.6;
    }

    /* ============================================================ HOW */
    .how {
      background: var(--paper)
    }

    .how__list {
      margin-top: 34px;
      display: grid
    }

    .how__item {
      border: 2.5px solid var(--ink);
      background: #fff;
      overflow: hidden
    }

    .how__item+.how__item {
      border-top: 0
    }

    .how__ph {
      border: 0;
      border-bottom: 2.5px solid var(--ink)
    }

    .how__ph img {
      aspect-ratio: 16/9
    }

    .how__body {
      position: relative;
      padding: 20px 20px 22px 68px
    }

    .how__no {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 48px;
      background: var(--ink);
      color: var(--mustard);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--latin);
      font-size: 26px;
    }

    .how__item h3 {
      font-size: 19px
    }

    .how__item p {
      font-size: 13.5px;
      font-weight: 500;
      line-height: 1.95;
      margin-top: 8px
    }

    .how__arrow {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--vermilion);
      font-weight: 900;
      font-size: 0
    }

    .how__arrow::before {
      content: "▼";
      font-size: 22px
    }

    .how__result {
      margin-top: 14px;
      background: var(--cobalt);
      color: #fff;
      border: 2.5px solid var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
      padding: 20px;
      text-align: center;
    }

    .how__result p {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em
    }

    .how__result h3 {
      font-size: 24px;
      margin-top: 6px
    }

    /* ============================================================ TARGET */
    .target {
      background: var(--vermilion);
      color: #fff
    }

    .target .kicker {
      border-color: #fff
    }

    .target .h-sec .u {
      border-bottom-color: #fff
    }

    .target__fig {
      margin-top: 26px;
      border-color: var(--paper);
      box-shadow: 7px 7px 0 var(--ink)
    }

    .target__fig img {
      aspect-ratio: 5/3;
      object-position: 50% 26%
    }

    .target__list {
      margin-top: 26px;
      display: grid;
      gap: 11px
    }

    .target__list li {
      list-style: none;
      background: var(--paper);
      color: var(--ink);
      border: 2.5px solid var(--ink);
      padding: 15px 16px 15px 50px;
      font-size: 14.5px;
      font-weight: 900;
      line-height: 1.75;
      position: relative;
    }

    .target__list li::before {
      content: "✓";
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--cobalt);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
    }

    /* ============================================================ MERIT */
    .merit {
      background: var(--ink);
      color: var(--paper)
    }

    .merit .kicker {
      border-color: var(--mustard);
      color: var(--mustard)
    }

    .merit .h-sec .u {
      border-bottom-color: var(--vermilion)
    }

    .merit__band {
      margin-top: 28px;
      border-color: var(--mustard)
    }

    .merit__band img {
      aspect-ratio: 2/1
    }

    .merit__grid {
      margin-top: 16px;
      display: grid;
      gap: 14px
    }

    .merit__card {
      background: var(--paper);
      color: var(--ink);
      padding: 20px 20px 22px
    }

    .merit__card .n {
      font-family: var(--latin);
      font-size: 13px;
      letter-spacing: .14em;
      color: var(--vermilion);
      display: block
    }

    .merit__card h3 {
      font-size: 19px;
      margin-top: 4px
    }

    .merit__card p {
      font-size: 13px;
      font-weight: 500;
      line-height: 1.9;
      margin-top: 8px
    }

    .merit__card:nth-child(2n) {
      background: var(--mustard)
    }

    /* ============================================================ ITEMS */
    .items {
      background: var(--paper-2)
    }

    .items__hero {
      margin-top: 26px;
      box-shadow: 6px 6px 0 var(--vermilion)
    }

    .items__hero img {
      aspect-ratio: 1/1
    }

    .items__hero .cap {
      border-top: 2.5px solid var(--ink);
      background: #fff;
      padding: 14px 16px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    .items__hero .cap b {
      font-size: 17px;
      font-weight: 900
    }

    .items__hero .cap span {
      font-family: var(--serif-it);
      font-style: italic;
      font-size: 13px
    }

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

    .items__subs img {
      aspect-ratio: 4/3
    }

    .spec {
      margin-top: 24px;
      border: 2.5px solid var(--ink);
      background: #fff
    }

    .spec dl {
      display: grid;
      grid-template-columns: 88px 1fr
    }

    .spec dt {
      background: var(--ink);
      color: var(--mustard);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em;
      padding: 14px 10px;
      line-height: 1.6;
      display: flex;
      align-items: center;
      border-bottom: 2px solid var(--paper-2);
    }

    .spec dd {
      padding: 14px;
      font-size: 13.5px;
      font-weight: 700;
      line-height: 1.8;
      border-bottom: 2px solid var(--ink)
    }

    .spec dl> :nth-last-child(1),
    .spec dl> :nth-last-child(2) {
      border-bottom: 0
    }

    .items__ok {
      margin-top: 22px;
      display: grid;
      gap: 10px
    }

    .items__ok li {
      list-style: none;
      background: var(--mustard);
      border: 2.5px solid var(--ink);
      padding: 13px 14px 13px 46px;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.7;
      position: relative;
    }

    .items__ok li::before {
      content: "OK";
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--gothic);
      font-weight: 900;
      font-size: 13px;
      color: var(--vermilion);
      letter-spacing: .06em;
    }

    .items__note {
      margin-top: 20px;
      border: 2.5px dashed var(--ink);
      padding: 16px;
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.95
    }

    /* ============================================================ STEP */
    .step {
      background: var(--green);
      color: var(--paper)
    }

    .step .kicker {
      border-color: var(--paper);
      color: var(--paper)
    }

    .step__fig {
      margin-top: 26px;
      border-color: var(--paper);
      box-shadow: 6px 6px 0 var(--mustard)
    }

    .step__fig img {
      aspect-ratio: 3/2;
      object-position: 50% 28%
    }

    .step__list {
      margin-top: 32px;
      counter-reset: s
    }

    .step__item {
      position: relative;
      padding-left: 56px;
      padding-bottom: 34px
    }

    .step__item::before {
      counter-increment: s;
      content: "0" counter(s);
      position: absolute;
      left: 0;
      top: 2px;
      font-family: var(--latin);
      font-size: 34px;
      color: var(--mustard);
    }

    .step__item::after {
      content: "";
      position: absolute;
      left: 17px;
      top: 46px;
      bottom: 6px;
      width: 2px;
      background: rgba(250, 245, 233, .35)
    }

    .step__item:last-child {
      padding-bottom: 0
    }

    .step__item:last-child::after {
      display: none
    }

    .step__ph {
      margin-top: 14px;
      border-color: var(--paper)
    }

    .step__ph img {
      aspect-ratio: 16/9
    }

    .step__item h3 {
      font-size: 19px
    }

    .step__item p {
      font-size: 13.5px;
      font-weight: 500;
      line-height: 1.95;
      margin-top: 14px;
      opacity: .92
    }

    .step__opt {
      margin-top: 12px;
      display: grid;
      gap: 7px
    }

    .step__opt li {
      list-style: none;
      background: rgba(250, 245, 233, .1);
      border: 1.5px solid rgba(250, 245, 233, .45);
      padding: 9px 12px;
      font-size: 13px;
      font-weight: 700;
    }

    /* ============================================================ VOICE */
    .voice {
      background: var(--paper)
    }

    .voice__list {
      margin-top: 30px;
      display: grid;
      gap: 18px
    }

    .voice__card {
      border: 2.5px solid var(--ink);
      background: #fff;
      box-shadow: 6px 6px 0 var(--cobalt);
      overflow: hidden
    }

    .voice__ph {
      border: 0;
      border-bottom: 2.5px solid var(--ink)
    }

    .voice__ph img {
      aspect-ratio: 5/3;
      object-position: 50% 24%
    }

    .voice__body {
      padding: 20px
    }

    .voice__meta {
      display: inline-block;
      background: var(--ink);
      color: var(--mustard);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      padding: 4px 10px;
      line-height: 1.6
    }

    .voice__card h3 {
      font-size: 18px;
      margin-top: 12px;
      color: var(--vermilion)
    }

    .voice__card p {
      font-size: 13.5px;
      font-weight: 500;
      line-height: 2;
      margin-top: 10px
    }

    /* ============================================================ FAQ */
    .faq {
      background: var(--mustard)
    }

    /* 見出しの右が空くので、スマホでも横並びにする（幅が足りないので縦型カード） */
    .faq__top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
    }

    .faq__head { flex: 0 0 auto }

    .faq__intro {
      margin-bottom: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      background: var(--paper);
      border: 2.5px solid var(--ink);
      border-radius: 26px;
      padding: 14px 9px 16px;
      box-shadow: 5px 5px 0 var(--ink);
    }

    .faq__face {
      width: 84px;
      height: 84px;
      flex: none;
      border-radius: 50%;
      overflow: hidden;
      border: 2.5px solid var(--ink)
    }

    .faq__face img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .faq__intro p {
      font-size: 10.5px;
      font-weight: 900;
      line-height: 1.75
    }

    .faq__list {
      margin-top: 28px;
      border-top: 2.5px solid var(--ink)
    }

    .faq details {
      border-bottom: 2.5px solid var(--ink)
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 18px 34px 18px 0;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.7;
      position: relative;
    }

    .faq summary::-webkit-details-marker {
      display: none
    }

    .faq summary .q {
      font-family: var(--gothic);
      font-weight: 900;
      font-size: 21px;
      color: var(--vermilion);
      line-height: 1.45;
      flex: none
    }

    .faq summary::after {
      content: "";
      position: absolute;
      right: 6px;
      top: 26px;
      width: 13px;
      height: 13px;
      border-right: 2.5px solid var(--ink);
      border-bottom: 2.5px solid var(--ink);
      transform: rotate(45deg);
      transition: transform .25s ease;
    }

    .faq details[open] summary::after {
      transform: rotate(225deg);
      top: 30px
    }

    .faq__a {
      display: flex;
      gap: 12px;
      padding: 0 4px 22px 0;
      font-size: 13.5px;
      font-weight: 500;
      line-height: 2
    }

    .faq__a .a {
      font-family: var(--gothic);
      font-weight: 900;
      font-size: 21px;
      color: var(--cobalt);
      line-height: 1.45;
      flex: none
    }

    /* ============================================================ FINAL */
    .final {
      position: relative;
      background: var(--ink);
      color: var(--paper);
      overflow: hidden
    }

    .final__bg {
      position: absolute;
      inset: 0;
      z-index: 0
    }

    .final__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .85;
      object-position: 38% 50%;
      filter: saturate(.9) contrast(1.05)
    }

    .final__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(18, 17, 16, .55) 0%, rgba(18, 17, 16, .42) 38%, rgba(18, 17, 16, .78) 100%)
    }

    .final__inner {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 66px var(--pad) 60px
    }

    .final .eyebrow {
      color: var(--mustard);
      text-shadow: 0 2px 12px rgba(0, 0, 0, .8)
    }

    .final h2 {
      font-size: 32px;
      margin: 14px 0 6px;
      text-shadow: 0 2px 18px rgba(0, 0, 0, .75)
    }

    .final h2 em {
      font-style: normal;
      color: var(--mustard)
    }

    .final__badge {
      width: 104px;
      height: 104px;
      border-radius: 50%;
      border: 2.5px solid var(--mustard);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 26px auto 4px;
      line-height: 1.4;
      background: rgba(18, 17, 16, .55);
      backdrop-filter: blur(2px);
    }

    .final__badge span {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .06em
    }

    .final__badge b {
      font-size: 23px;
      font-weight: 900
    }

    .final__btns {
      margin-top: 26px;
      display: grid;
      gap: 14px;
      text-align: left
    }

    .final .btn {
      border-color: var(--paper);
      box-shadow: 5px 5px 0 var(--vermilion)
    }

    .final .btn--ink {
      background: var(--paper);
      color: var(--ink)
    }

    .final__hours {
      margin-top: 20px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      line-height: 1.9;
      opacity: .92;
      text-shadow: 0 1px 10px rgba(0, 0, 0, .85)
    }

    /* ============================================================ FOOTER */
    .ft {
      background: var(--paper-2);
      padding: 44px var(--pad) 40px;
      border-top: 2.5px solid var(--ink)
    }

    .ft__logo {
      font-family: var(--display);
      font-size: 24px;
      line-height: 1
    }

    .ft__logo i {
      font-family: var(--serif-it);
      font-style: italic;
      font-size: 11px;
      font-weight: 400;
      display: block;
      margin-top: 5px
    }

    .ft__nav {
      margin-top: 26px;
      display: grid;
      gap: 1px;
      background: var(--ink);
      border: 1px solid var(--ink)
    }

    .ft__nav a {
      background: var(--paper-2);
      padding: 13px 14px;
      font-size: 13px;
      font-weight: 700
    }

    .ft__meta {
      margin-top: 24px;
      font-size: 11.5px;
      font-weight: 500;
      line-height: 2;
      opacity: .7
    }

    /* ============================================================ FIXED BAR */
    .bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 90;
      max-width: 480px;
      margin: 0 auto;
      background: var(--ink);
      display: grid;
      grid-template-columns: 88px 1fr;
      padding-bottom: env(safe-area-inset-bottom);
      transform: translateY(110%);
      transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .bar.show {
      transform: none
    }

    .bar a {
      height: var(--bar);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 15px;
      letter-spacing: .03em;
      line-height: 1.35
    }

    .bar .b-line {
      background: #06C755;
      color: #fff
    }

    /* ハンバーガー：下の追尾バーに同居させる */
    .bar .b-menu {
      height: var(--bar);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: var(--mustard);
      color: var(--ink);
      border: 0;
      border-right: 3px solid var(--ink);
      cursor: pointer;
      font: inherit;
    }

    .b-menu__icon {
      display: block;
      width: 24px;
    }

    .b-menu__icon i {
      display: block;
      height: 3px;
      background: var(--ink);
      border-radius: 2px;
    }

    .b-menu__icon i + i {
      margin-top: 5px
    }

    .bar .b-menu small {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      opacity: 1;
    }

    /* ============================================================ SP MENU */
    .menu {
      position: fixed;
      inset: 0;
      z-index: 120;
      background: rgba(18, 17, 16, .55);
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .menu[hidden] {
      display: none
    }

    .menu__panel {
      width: 100%;
      max-width: 480px;
      max-height: 100%;
      overflow-y: auto;
      background: var(--mustard);
      border-bottom: 3px solid var(--ink);
      padding: 18px var(--pad) 30px;
      animation: menuIn .28s cubic-bezier(.2, .8, .2, 1);
    }

    @keyframes menuIn {
      from {
        transform: translateY(-14px);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    .menu__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 3px solid var(--ink);
    }

    .menu__brand {
      font-family: var(--display);
      font-size: 21px;
      line-height: 1;
    }

    .menu__brand i {
      font-family: var(--serif-it);
      font-style: italic;
      font-size: 10px;
      font-weight: 400;
      display: block;
      margin-top: 4px;
      letter-spacing: .04em;
    }

    .menu__close {
      flex: none;
      width: 44px;
      height: 44px;
      border: 2.5px solid var(--ink);
      border-radius: 50%;
      background: var(--paper);
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }

    .menu__nav {
      display: grid;
      gap: 1px;
      background: var(--ink);
      border-bottom: 3px solid var(--ink);
    }

    .menu__nav a {
      background: var(--mustard);
      padding: 16px 4px;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: .03em;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .menu__nav a::after {
      content: "";
      width: 9px;
      height: 9px;
      border-right: 2.5px solid var(--ink);
      border-bottom: 2.5px solid var(--ink);
      transform: rotate(-45deg);
      margin-right: 6px;
    }

    .menu__cta {
      margin-top: 24px;
      display: grid;
      gap: 12px;
    }

    .bar small {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      opacity: .8
    }

    /* ============================================================ REVEAL */
    .rv {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1)
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    .rv.d1 {
      transition-delay: .08s
    }

    .rv.d2 {
      transition-delay: .16s
    }

    .rv.d3 {
      transition-delay: .24s
    }

    @media (prefers-reduced-motion:reduce) {
      .rv {
        opacity: 1;
        transform: none;
        transition: none
      }

      html {
        scroll-behavior: auto
      }
    }

    /* ============================================================
   TABLET（781〜899px）— スマホ版を額装して見せる
   ============================================================ */
    @media (min-width:781px) and (max-width:899px) {
      body {
        background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .028) 0 2px, transparent 2px 9px), var(--mustard)
      }

      .app {
        margin: 34px auto;
        border: 1.5px solid var(--vermilion);
        outline: 9px solid var(--paper);
        box-shadow: 0 26px 60px rgba(0, 0, 0, .3)
      }
    }

    /* ============================================================
   DESKTOP（900px〜）— PC専用レイアウト
   ============================================================ */
    @media (min-width:900px) {
      :root {
        --pad: 56px
      }

      body {
        background: var(--paper)
      }

      .app {
        max-width: 100%;
        padding-bottom: 0;
        overflow: visible
      }

      .sec {
        padding-top: 120px;
        padding-bottom: 120px
      }

      .wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding-left: var(--pad);
        padding-right: var(--pad)
      }

      .pad {
        padding-left: 0;
        padding-right: 0
      }

      .sec.pad>* {
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--pad);
        padding-right: var(--pad)
      }

      .h-sec {
        font-size: 52px;
        margin-top: 20px
      }

      .h-sec .u {
        border-bottom-width: 11px
      }

      .lead {
        font-size: 17px;
        max-width: 38em
      }

      .kicker {
        font-size: 13px;
        padding: 6px 16px 5px
      }

      /* header */
      .hd {
        position: sticky;
        top: 0;
        height: 78px;
        padding: 0 40px
      }

      .hd__logo {
        gap: 14px;
        font-size: 26px
      }

      .hd__mark {
        width: 54px;
        height: 54px;
      }

      .hd__logo i {
        font-size: 11px
      }

      .hd__nav {
        display: flex;
        gap: 28px;
        margin-left: auto;
        margin-right: 26px
      }

      .hd__nav a {
        font-size: 13.5px;
        font-weight: 900;
        letter-spacing: .06em;
        padding: 6px 0;
        border-bottom: 3px solid transparent;
        transition: border-color .25s
      }

      .hd__nav a:hover {
        border-bottom-color: var(--ink)
      }

      .hd__cta {
        display: flex;
        align-items: center;
        margin-left: 14px;
        background: #06C755;
        color: #fff;
        border: 2px solid var(--ink);
        box-shadow: 4px 4px 0 var(--ink);
        padding: 11px 22px;
        font-size: 15px;
        font-weight: 900;
        letter-spacing: .04em;
      }

      /* hero */
      /* PCのヒーローは全画面幅だと圧が強すぎるので80%に収めて中央に置く */
      .hero {
        padding-top: 36px
      }

      .hero__img {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto
      }

      .hero__strip {
        border-top-width: 4px;
        border-bottom-width: 4px;
      }

      .hero__strip::before,
      .hero__strip::after { width: 90px }

      .ticker__row { padding: 20px 0 }

      .ticker__row span {
        padding: 0 34px;
        font-size: 20px;
      }

      .ticker__row b { font-size: 32px }
      .ticker__row i { font-size: 17px }

      /* 電話ボタンを外してCTAが1本になったので、縦に積んで中央に置く */
      .hero__cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 34px var(--pad)
      }

      .hero__cta .btn {
        min-width: 380px;
        min-height: 76px;
        font-size: 20px
      }

      .hero__cta .note {
        text-align: center;
        max-width: none
      }

      /* 背景装飾：PCは面積が広いので大きく */
      .deco::before {
        right: -190px;
        top: 4%;
        width: 660px;
        height: 660px;
        border-width: 3px;
      }

      .deco__word {
        left: -34px;
        bottom: -34px;
        font-size: 210px;
        -webkit-text-stroke-width: 2.5px;
      }

      /* about：2カラム */
      .about .wrap {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 64px;
        align-items: center
      }

      .about__fig {
        margin-top: 0
      }

      .about__fig img {
        width: 100%
      }

      .bubble {
        left: -86px;
        bottom: auto;
        /* 人物の頭頂は図版の約15%地点から。吹き出しはその上の余白に逃がす */
        top: -44px;
        max-width: 440px;
        font-size: 24px;
        line-height: 1.7;
        padding: 22px 26px;
        border-width: 4px;
        border-radius: 26px;
        box-shadow: 6px 6px 0 rgba(18, 17, 16, .22);
      }

      /* PC は頭上に置くので、しっぽを下向きに付け替える */
      .br-sp { display: none }

      .bubble::before,
      .bubble::after {
        right: 44px;
        border-width: 14px;
        border-left-color: transparent;
      }

      .bubble::before {
        bottom: -28px;
        border-top-color: var(--cobalt);
      }

      .bubble::after {
        bottom: -20px;
        border-top-color: var(--paper);
      }

      .about__body {
        margin-top: 0
      }

      .about__body .pad {
        padding: 0
      }

      /* stats */
      .stats {
        padding: 88px 0 92px
      }

      .stats::before { top: 26px }
      .stats::after  { bottom: 26px }

      .stats__lead {
        font-size: 30px;
        margin-bottom: 52px;
        line-height: 1.6;
      }

      .stats__lead b { border-bottom-width: 10px }

      .stats__grid {
        max-width: 1000px;
        margin: 0 auto;
        gap: 40px;
      }

      .seal {
        max-width: 236px;
        border-width: 4px;
        box-shadow:
          inset 0 0 0 7px var(--paper),
          inset 0 0 0 10px var(--ink),
          9px 9px 0 var(--ink);
      }

      .seal__label { font-size: 15px }
      .seal__val { font-size: 78px; margin-top: 8px }
      .seal__val small { font-size: 27px }
      .seal__val .jp { font-size: 66px }
      .stat__sub { margin-top: 20px; font-size: 15px }

      /* how：横3列 */
      .how__list {
        grid-template-columns: 1fr 56px 1fr 56px 1fr;
        align-items: stretch;
        margin-top: 56px
      }

      .how__item+.how__item {
        border-top: 2.5px solid var(--ink)
      }

      .how__arrow {
        height: auto
      }

      .how__arrow::before {
        content: "▶";
        font-size: 26px
      }

      .how__ph img {
        aspect-ratio: 4/3
      }

      .how__body {
        padding: 26px 26px 30px 76px
      }

      .how__item h3 {
        font-size: 23px
      }

      .how__item p {
        font-size: 14.5px
      }

      .how__result {
        margin-top: 34px;
        padding: 38px
      }

      .how__result h3 {
        font-size: 38px
      }

      /* target：写真＋リスト */
      .target .wrap {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 56px;
        align-items: center
      }

      .target__fig {
        margin-top: 30px
      }

      .target__fig img {
        aspect-ratio: 1/1
      }

      .target__list {
        margin-top: 0;
        grid-template-columns: 1fr 1fr;
        gap: 14px
      }

      .target__list li {
        font-size: 16px;
        padding: 26px 22px 26px 58px;
        line-height: 1.8
      }

      /* merit：3列 */
      .merit__band {
        margin-top: 44px
      }

      .merit__band img {
        aspect-ratio: 4/1
      }

      .merit__grid {
        margin-top: 24px;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px
      }

      .merit__card {
        padding: 32px 28px 34px
      }

      .merit__card h3 {
        font-size: 22px
      }

      .merit__card p {
        font-size: 14px
      }

      /* items：写真左・スペック右 */
      .items__cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: start;
        margin-top: 44px
      }

      .items__hero {
        margin-top: 0
      }

      .items__subs {
        margin-top: 16px;
        gap: 16px
      }

      .spec {
        margin-top: 0
      }

      .spec dl {
        grid-template-columns: 120px 1fr
      }

      .spec dt {
        font-size: 14px;
        padding: 20px 16px
      }

      .spec dd {
        font-size: 15.5px;
        padding: 20px
      }

      .items__ok li {
        font-size: 15.5px;
        padding: 17px 18px 17px 54px
      }

      .items__note {
        font-size: 13.5px
      }

      /* step：写真左・ステップ右 */
      .step .wrap {
        display: grid;
        grid-template-columns: .85fr 1.15fr;
        gap: 60px;
        align-items: start
      }

      .step__fig {
        margin-top: 30px
      }

      .step__fig img {
        aspect-ratio: 3/4
      }

      .step__list {
        margin-top: 0
      }

      .step__item {
        padding-left: 74px;
        padding-bottom: 44px
      }

      .step__item::before {
        font-size: 46px;
        top: 4px
      }

      .step__item::after {
        left: 23px;
        top: 62px
      }

      .step__item h3 {
        font-size: 24px
      }

      .step__item p {
        font-size: 15px
      }

      .step__opt {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px
      }

      /* voice：2列 */
      .voice__list {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        margin-top: 52px
      }

      .voice__ph img {
        aspect-ratio: 4/3
      }

      .voice__body {
        padding: 30px
      }

      .voice__card h3 {
        font-size: 22px
      }

      .voice__card p {
        font-size: 15px
      }

      /* faq */
      .faq__top { gap: 48px }

      /* PCは幅に余裕があるので横型・大きめに */
      .faq__intro {
        flex-direction: row;
        align-items: center;
        text-align: left;
        margin: 0 0 12px;
        gap: 26px;
        border: 3px solid var(--ink);
        border-radius: 999px;
        padding: 16px 52px 16px 16px;
        box-shadow: 8px 8px 0 var(--ink);
        transition: transform .15s ease, box-shadow .15s ease;
      }

      .faq__intro:hover {
        transform: translate(4px, 4px);
        box-shadow: 4px 4px 0 var(--ink);
      }

      .faq__face {
        width: 152px;
        height: 152px;
        border-width: 3px;
      }

      .faq__intro p { font-size: 21px; line-height: 1.75 }

      .faq__list {
        max-width: 920px;
        margin-top: 44px
      }

      .faq summary {
        font-size: 18px;
        padding: 24px 44px 24px 0
      }

      .faq summary .q {
        font-size: 25px
      }

      .faq__a {
        font-size: 15px;
        padding-bottom: 28px
      }

      .faq__a .a {
        font-size: 25px
      }

      /* final */
      .final__inner {
        padding: 130px var(--pad) 120px
      }

      .final h2 {
        font-size: 60px
      }

      .final__badge {
        width: 140px;
        height: 140px;
        margin: 36px auto 8px
      }

      .final__badge b {
        font-size: 32px
      }

      .final__badge span {
        font-size: 13px
      }

      .final__btns {
        display: flex;
        justify-content: center;
        gap: 26px;
        margin-top: 40px
      }

      .final .btn {
        min-width: 460px;
        min-height: 88px;
        font-size: 23px
      }

      .final__hours {
        font-size: 14px;
        margin-top: 28px
      }

      /* footer */
      .ft {
        padding: 70px var(--pad) 60px
      }

      .ft__inner {
        max-width: 1180px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 60px;
        align-items: start
      }

      .ft__logo {
        font-size: 34px
      }

      .ft__nav {
        margin-top: 0;
        grid-template-columns: repeat(2, 1fr)
      }

      .ft__nav a {
        font-size: 14px;
        padding: 15px 16px
      }

      .ft__meta {
        grid-column: 1/-1;
        margin-top: 34px;
        font-size: 12.5px
      }

      /* PCはヘッダーCTAがあるので固定バーもハンバーガーも出さない */
      .bar,
      .menu {
        display: none !important
      }
    }

    @media (min-width:1400px) {
      .h-sec {
        font-size: 60px
      }

      .final h2 {
        font-size: 70px
      }
    }









.box_in{
    position: relative;
	width:100%;
	padding: 70px 20px;
    box-sizing: border-box;
	margin: 0px auto;
	text-align: left;
}




/* ---title---*/
.title_text_c{
width: 100%;
padding: 0px 0 0 0;
text-align:center;
position: relative;
}
.title_text_c h2{
    margin:0 auto;
    width:300px;
    font-size:30px;
    padding:20px;
}
@media screen and (max-width: 600px) {
.title_text_c h2{
    margin:0 auto;
    width:auto;
    font-size:20px;
    padding:10px;
}
}
/* ---t_five---*/
.t_five{
width:100%;
max-width:1100px;
padding:20px 0px 0px 0px;
margin:0 auto;
list-style:none;
}
.t_five li{
padding:25px 0px 25px 0px;
}
.t_five li:last-child{
border-bottom:none;
}
.t_five li div{
display:flex;
align-items:center;
padding:15px;
box-sizing: border-box;
}
.t_five li div img{
width: 55px;
margin: 0 20px 0 0;
}

.t_five_title{
padding:0px 0;
border-radius: 20px;
background-color: #fff;
}


.t_five h3{
letter-spacing:1px;
font-size:20px;
line-height:1.5;
color:#754c1c;
text-align:left;
font-weight:600;
}
.t_five p{
letter-spacing:1px;
font-size:18px;
text-align:left;
}




/* ---pp---*/
.pp{
width:100%;
max-width:900px;
	padding:30px 0px 30px 0px;
	margin:0 auto;
	list-style:none;
}
.pp h3{
font-size:18px;
line-height:20px;
font-weight:500;
border-bottom: #99652a 1px solid;
padding:15px 0;
margin:40px 0 20px 0;
}
.pp p{
font-size:14px;
line-height:1.5;
padding:0px 0px 0px 0px ;
}
.title_text_x{
text-align: center;
padding:40px 0px 0px 0px ;
}

.company{
  width:100%;
  margin:0 auto;
}
.company li{
  list-style:none;
  text-align:center;
}