/* --- 基本設定 --- */
    html {
      font-size: 100%;
      line-height: 1.5;
    }

    :root {
      --bg-blue: #F3F8FB;
      --text-brown: #4F453C;
      --blue-link: #007DA5;
      /* ①お買い物のきほん（ピンク） */
      --pink-main: #FBB7C4;
      --pink-bg: #FFF4F6;
      /* ②心ときめく発見（イエロー） */
      --yellow-main: #FBE276;
      --yellow-bg: #FDFAED;
      /* ③オンライン特典（オレンジ ※新規） */
      --orange-main: #FAB3A2;
      --orange-bg: #FFF3F0;
      /* ④お困りごと（ブルー） */
      --blue-main: #89D7CB;
      --blue-bg: #E7F6F4;
    }

    .guide-page-wrapper {
      background-color: var(--bg-blue);
      color: var(--text-brown);
      line-height: 1.6;
      padding-top: 0;
      padding-bottom: 0;
      overflow-x: hidden;
    }

    .guide-page-wrapper * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .u-sp-br {
      display: none;
    }

    /* リンク共通ホバー設定 */
    .anchor-item:hover,
    .c-round-btn:hover,
    .diagnosis-banner-link:hover,
    .faq-btn:hover,
    .line-btn:hover,
    .line-id-link:hover {
      opacity: 0.8;
    }

    @media screen and (max-width: 767px) {
      html {
        font-size: 87.5%;
      }

      .u-sp-br {
        display: block;
      }
    }



    /* --- パンくずリスト --- */
    .breadcrumb-wrap {
      background: #fff;
    }

    .guide-inner-narrow {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .breadcrumb {
      padding: 15px 0;
    }

    .breadcrumb__list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }

    .breadcrumb__list--item {
      position: relative;
      color: var(--text-brown);
      margin-right: 30px;
    }

    .breadcrumb__list--item a {
      color: var(--text-brown);
      text-decoration: none;
      transition: opacity 0.3s;
    }

    .breadcrumb__list--item a:hover {
      opacity: 0.7;
    }

    .breadcrumb__list--item:has(a):after {
      content: "";
      display: inline-block;
      width: 9px;
      height: 9px;
      position: absolute;
      transition: all .3s ease;
      top: 6px;
      right: -17px;
      border-top: solid 1px #b2b4c8;
      border-right: solid 1px #b2b4c8;
      transform: rotate(45deg);
    }

    @media screen and (max-width: 767px) {
      .breadcrumb__list--item {
        font-size: 12px;
      }
    }



    /* --- コンテンツ全体コンテナ --- */
    .guide-inner {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 20px;
    }

    @media screen and (max-width: 767px) {
      .guide-inner {
        padding: 0 15px;
      }
    }



    /* --- 冒頭エリア --- */
    .guide-header {
      text-align: center;
      padding: 40px 0;
    }

    .guide-header h1 {
      max-width: 400px;
      margin: 0 auto 30px;
    }

    .kv-area {
      width: 100%;
      margin-bottom: 40px;
    }

    .kv-area img {
      width: 100%;
      height: auto;
      display: block;
    }

    .header-intro {
      margin-bottom: 40px;
      line-height: 1.8;
    }

    .anchor-nav {
      display: flex;
      justify-content: center;
      gap: 30px;
    }

    .anchor-item {
      text-align: center;
      text-decoration: none;
      color: var(--text-brown);
      transition: opacity 0.3s;
      width: 132px;
    }

    .anchor-item:hover {
      opacity: 0.8;
    }

    .anchor-item .person-img-wrap {
      display: block;
      margin-bottom: 15px;
      transition: transform 0.4s ease;
    }

    .anchor-item:hover .person-img-wrap {
      transform: translateY(-10px);
    }

    .anchor-item img {
      width: 80px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    .anchor-item .anchor-text {
      line-height: 1.4;
      display: block;
    }

    .anchor-item::after {
      content: '';
      display: block;
      width: 24px;
      height: 24px;
      margin: 8px auto 0;
      background: url("../images/guide/icon-arrow-down-black.svg") no-repeat center / contain;
    }

    @media screen and (max-width: 767px) {
      .guide-header {
        padding: 25px 0 35px;
      }

      .guide-header h1 {
        max-width: 270px;
      }

      .kv-area {
        margin-bottom: 15px;
      }

      .anchor-nav {
        gap: 8px;
        justify-content: space-between;
        overflow: visible;
      }

      .anchor-item {
        width: 23%;
      }

      .anchor-item img {
        width: 100%;
        max-width: 60px;
      }

      .anchor-item::after {
        width: 16px;
        height: 16px;
        margin: 4px auto 0;
      }
    }



    /* --- コンテンツエリア共通設定 --- */
    .section-wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding-bottom: 56px;
    }

    .section-box {
      background: #fff;
      border-radius: 60px;
      padding: 40px 45px;
      text-align: center;
      margin-bottom: 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
      width: 100%;
      max-width: 1020px;
      border: 1px solid transparent;
      position: relative;
    }

    .title-bubble {
      display: inline-block;
      padding: 6px 30px;
      border-radius: 50px;
      font-size: 32px;
      margin-bottom: 40px;
      position: relative;
    }

    .title-bubble::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 48%;
      width: 30px;
      height: 20px;
    }

    .flex-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      text-align: left;
    }

    .side-illust {
      flex: 0 0 400px;
      max-width: 400px;
    }

    .side-illust.is-right {
      order: 1;
    }

    .side-illust img {
      width: 100%;
      height: auto;
      display: block;
    }

    .side-content {
      flex: 0 0 500px;
      max-width: 500px;
    }

    .side-content p {
      margin-bottom: 16px;
      text-align: center;
    }

    .btn-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .c-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 21px 22px;
      padding: 16px 10px;
      border-radius: 8px;
      text-decoration: none;
      color: var(--text-brown);
      position: relative;
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .c-btn::after {
      content: '';
      display: inline-block;
      margin-left: 8px;
      width: 12px;
      height: 12px;
      background: url("../images/guide/icon-arrow-right-black.svg") no-repeat center / contain;
      transition: filter 0.3s;
    }

    .c-btn:hover {
      color: #fff;
      background-image: none;
    }

    .c-btn:hover::after {
      filter: brightness(0) invert(1);
    }

    .btn-full {
      grid-column: 1 / span 2;
    }

    @media screen and (min-width: 768px) {
      .section-box:nth-child(odd) {
        margin-left: 0;
        margin-right: auto;
      }

      .section-box:nth-child(even) {
        margin-left: auto;
        margin-right: 0;
      }
    }

    @media screen and (max-width: 1024px) {
      .flex-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
      }

      .side-illust {
        flex: none;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
      }

      .side-illust.is-right {
        order: 0;
      }

      .side-content {
        flex: none;
        width: 100%;
        text-align: left;
      }

      .btn-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .btn-full {
        grid-column: 1 / span 2;
      }

      .c-btn {
        padding: 12px 5px;
        white-space: normal;
      }
    }

    @media screen and (max-width: 767px) {
      .title-bubble {
        font-size: 20px;
        padding: 6px 20px;
        margin-bottom: 25px;
      }

      .title-bubble::after {
        width: 24px;
        height: 16px;
        bottom: -12px;
      }

      .section-wrapper {
        padding-bottom: 0;
      }

      .section-box {
        padding: 44px 15px 88px;
        border-radius: 80px 80px 0 0;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-top: -45px;
        margin-bottom: 0;
        box-shadow: none;
        border: none;
      }

      .section-wrapper .section-box:last-child {
        padding-bottom: 50px;
      }

    }



    /* コンテンツ個別設定 */
    .section-basics,
    .section-benefits {
      background-color: #ffffff;
    }

    .section-discovery {
      background-color: var(--yellow-bg);
      border-color: var(--yellow-main);
    }

    .section-support {
      background-color: var(--blue-bg);
      border-color: var(--blue-main);
    }

    .section-basics .title-bubble {
      background: linear-gradient(90deg, var(--pink-main) 0%, var(--pink-main) 60%, var(--pink-bg) 100%);
    }

    .section-basics .title-bubble::after {
      background: url("../images/guide/title-accent-pink.svg") no-repeat center / contain;
    }

    .section-discovery .title-bubble {
      background: linear-gradient(90deg, var(--yellow-main) 0%, var(--yellow-main) 60%, var(--yellow-bg) 100%);
    }

    .section-discovery .title-bubble::after {
      background: url("../images/guide/title-accent-yellow.svg") no-repeat center / contain;
    }

    .section-benefits .title-bubble {
      background: linear-gradient(90deg, var(--orange-main) 0%, var(--orange-main) 60%, var(--orange-bg) 100%);
    }

    .section-benefits .title-bubble::after {
      background: url("../images/guide/title-accent-orange.svg") no-repeat center / contain;
    }

    .section-support .title-bubble {
      background: linear-gradient(90deg, var(--blue-main) 0%, var(--blue-main) 60%, var(--blue-bg) 100%);
    }

    .section-support .title-bubble::after {
      background: url("../images/guide/title-accent-blue.svg") no-repeat center / contain;
    }

    .section-basics .c-btn {
      background-color: var(--pink-bg);
      border: 1px solid var(--pink-main);
      background-image: url("../images/guide/btn-accent-pink.svg");
    }

    .section-basics .c-btn:hover {
      background-color: var(--pink-main);
      border-color: var(--pink-main);
    }

    .section-discovery .c-btn {
      background-color: #ffffff;
      border: 1px solid var(--yellow-main);
      background-image: url("../images/guide/btn-accent-yellow.svg");
    }

    .section-discovery .c-btn:hover {
      background-color: var(--yellow-main);
      border-color: var(--yellow-main);
    }

    .section-benefits .c-btn {
      background-color: var(--orange-bg);
      border: 1px solid var(--orange-main);
      background-image: url("../images/guide/btn-accent-orange.svg");
    }

    .section-benefits .c-btn:hover {
      background-color: var(--orange-main);
      border-color: var(--orange-main);
    }

    .section-support .c-btn {
      background-color: #ffffff;
      border: 1px solid var(--blue-main);
      background-image: url("../images/guide/btn-accent-blue.svg");
    }

    .section-support .c-btn:hover {
      background-color: var(--blue-main);
      border-color: var(--blue-main);
    }

    /* コンテンツ内ユニークパーツ系 */

    /* 商品探すリンクボタン */
    .c-round-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 68px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: bold;
      color: var(--blue-link);
      border: 2px solid var(--blue-link);
      margin-top: 35px;
    }

    .c-round-btn::before {
      content: '';
      width: 18px;
      height: 18px;
      margin-right: 10px;
      background: url("../images/guide/icon-search.svg") no-repeat center / contain;
    }

    .c-round-btn::after {
      content: '';
      width: 15px;
      height: 15px;
      margin-left: 10px;
      background: url("../images/guide/icon-arrow-down-blue.svg") no-repeat center / contain;
    }

    /* 診断バナー */
    .diagnosis-area {
      margin-top: 25px;
    }

    .diagnosis-title-sub {
      margin-bottom: 5px;
    }

    .diagnosis-title-main {
      margin-bottom: 15px;
      font-size: 20px;
    }

    .diagnosis-banner-link {
      display: block;
      max-width: 620px;
      margin: 0 auto;
      border-radius: 15px;
      border: 1px solid #026C8D;
      overflow: hidden;
      transition: opacity 0.3s;
    }

    .diagnosis-banner-link img {
      width: 100%;
      display: block;
    }

    /* 特典グリッド */
    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 25px;
    }

    .benefit-item {
      border: 1px dashed var(--orange-main);
      border-radius: 10px;
      padding: 15px 10px;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .benefit-item-main {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .benefit-item-main::before {
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      flex-shrink: 0;
    }

    .is-point .benefit-item-main::before {
      background-image: url("../images/guide/icon-point.svg");
    }

    .is-calendar .benefit-item-main::before {
      background-image: url("../images/guide/icon-calendar.svg");
    }

    .is-gift-01 .benefit-item-main::before {
      background-image: url("../images/guide/icon-gift-01.svg");
    }

    .is-gift-02 .benefit-item-main::before {
      background-image: url("../images/guide/icon-gift-02.svg");
      width: 48px;
      height: 32px;
    }

    .benefit-item .title {
      line-height: 1.3;
    }

    .benefit-item .note {
      font-size: 12px;
      color: #a4a4a4;
      text-align: left;
      margin-top: 8px;
      line-height: 1.3;
    }

    /* LINE連携リンク */
    .line-banner {
      background: #e5f7e5;
      border-radius: 0;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin: 40px auto 0;
      width: 100%;
      max-width: 600px;
    }

    .line-bubble-img {
      width: 200px;
      height: auto;
      display: block;
    }

    .line-content-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      text-align: left;
    }

    .line-id-link {
      text-decoration: underline;
      display: inline-block;
      color: var(--text-brown);
    }

    .line-btn {
      width: 100%;
      text-align: center;
      background: #67b557;
      color: #fff;
      padding: 10px 30px;
      border-radius: 40px;
      text-decoration: none;
      transition: opacity 0.3s;
    }

    @media screen and (max-width: 767px) {

      #basics {
        z-index: 1;
        margin-top: 0;
      }

      #discovery {
        z-index: 2;
      }

      #benefits {
        z-index: 3;
      }

      #support {
        z-index: 4;
      }

      .c-round-btn {
        width: 100%;
        padding: 10px;
        margin-top: 20px;
      }

      .diagnosis-title-main {
        font-size: 16px;
      }

      .benefit-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }

      .benefit-item {
        padding: 14px 12px;
      }

      .benefit-item-main::before {
        width: 26px;
        height: 26px;
      }

      .benefit-item .note {
        font-size: 11px;
      }

      .is-gift-02 .benefit-item-main::before {
        width: 36px;
        height: 26px;
      }

      .line-banner {
        flex-direction: column;
        padding: 25px 15px;
      }

      .line-bubble-img {
        width: 140px;
      }

      .line-content-wrap {
        gap: 20px;
      }

    }



    /* 下部エリア */
    .bottom-area {
      background-color: #fff;
    }

    .faq-section-wrap {
      padding: 45px 0 40px;
      position: relative;
      z-index: 5;
    }

    .faq-dotted-box {
      max-width: 500px;
      margin: 0 auto;
      background-color: var(--bg-blue);
      border: 2px dashed #A0CDDB;
      border-radius: 12px;
      padding: 24px;
    }

    .faq-top-flex {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-bottom: 20px;
    }

    .faq-text {
      font-size: 18px;
      text-align: center;
      line-height: 1.4;
      color: var(--text-brown);
    }

    .faq-illust {
      width: 65px;
      height: auto;
      display: block;
    }

    .faq-btn-wrap {
      text-align: center;
    }

    .faq-btn {
      display: inline-block;
      border: 1px solid #333;
      color: var(--text-brown);
      padding: 10px 60px;
      border-radius: 30px;
      text-decoration: none;
      transition: opacity 0.3s;
      background: #fff;
    }

    .search-section-wrap {
      padding-top: 20px;
      padding-bottom: 10px;
    }

    .search-text {
      color: #007DA5;
      font-size: 32px;
      text-align: center;
      margin-bottom: 25px;
    }

    .search-menu__form {
      width: 100%;
      max-width: 500px;
      margin: 0 auto 40px;
    }

    .search-menu__input {
      padding: 14px 16px 14px 48px;
    }

    .campaign-section-wrap .text-center {
      text-align: center;
    }

    .campaign-section-wrap .button-default {
      border: 1px solid #444f56;
      background-color: #fff;
      transition: all .5s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 340px;
      margin: 0 auto;
      padding: 8px;
      text-align: center;
      border-radius: 60px;
      font-weight: 500;
      cursor: pointer;
    }

    .campaign-section-wrap .button-default:after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 12px;
      background-color: #444f56;
      -webkit-mask-image: url("../images/common/icon/arrow.svg");
      mask-image: url("../images/common/icon/arrow.svg");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
      transition: all .5s ease;
      margin-left: 8px;
    }

    @media screen and (max-width: 767px) {

      .faq-dotted-box {
        max-width: 100%;
        padding: 20px;
      }

      .faq-text {
        font-size: 16px;
      }

      .search-text {
        font-size: 22px;
      }
    }