@charset "UTF-8";
/* ==========================================================================
   guide.scss - guide.html 専用スタイル
   ========================================================================== */
/* ==========================================================================
   変数定義 - Variables
   ========================================================================== */
/* ----- 色 : ベース ----- */
/* ----- 色 : ゴールド系 ----- */
/* ----- 色 : ブラウン系 ----- */
/* ----- 色 : クリーム系 ----- */
/* ----- 色 : グラデーション (左→右 #704816 → #d7a43b) ----- */
/* ----- 色 : 赤 (キャンペーン帯) ----- */
/* ----- 色 : フッター ----- */
/* ----- 色 : その他 ----- */
/* ----- フォント ----- */
/* ----- レイアウト ----- */
/* ----- ブレイクポイント ----- */
/* ==========================================================================
   Mixin
   ========================================================================== */
/* ----- メディアクエリ ----- */
/* ----- インナーラッパー ----- */
/* ----- ゴールドのグラデーション文字 (左→右) ----- */
/* ----- ゴールド左→右の背景 (タグなど) ----- */
/* ----- 2重線バー (heading-line, sub-title などの装飾) ----- */
/* ----- カード共通の影 ----- */
/* ----- ピル型ボタン ----- */
/* ==========================================================================
   page-head (下層ページ共通)
   ========================================================================== */
.page-head {
  position: relative;
  width: 100%;
  height: 36rem;
  display: block;
  overflow: hidden;
  background: #fff;
  /* ----- 下部 2重ウェーブ ----- */ }
  @media (max-width: 767px) {
    .page-head {
      height: 24rem; } }
  .page-head__bg {
    position: absolute;
    inset: 0; }
    .page-head__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.3; }
    .page-head__bg .ph {
      height: 100%;
      width: 100%; }
      .page-head__bg .ph span {
        min-height: 34rem; }
  .page-head__heading {
    position: absolute;
    left: 8%;
    top: 20rem;
    z-index: 2;
    text-align: left;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
    @media (max-width: 767px) {
      .page-head__heading {
        left: 0;
        width: 100%;
        top: 10rem;
        align-items: center; } }
    .page-head__heading .jp {
      font-size: 4.8rem;
      font-weight: 500;
      line-height: 1.1; }
      @media (max-width: 767px) {
        .page-head__heading .jp {
          font-size: 3.2rem; } }
    .page-head__heading .en {
      font-family: bodoni-std, sans-serif;
      font-size: 2.2rem;
      margin-top: .4rem;
      margin-left: .7rem;
      line-height: 1;
      background: linear-gradient(to right, #704816 0%, #d7a43b 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent; }
      @media (max-width: 767px) {
        .page-head__heading .en {
          font-size: 1.6rem;
          margin-left: 0; } }
  .page-head__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 9rem;
    z-index: 2;
    pointer-events: none; }
  .page-head__wave-gold {
    position: absolute;
    bottom: 0.6rem;
    left: 0;
    width: 100%;
    height: 6rem;
    background: rgba(197, 160, 74, 0.55);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,38 Q360,8 720,28 T1440,38 L1440,60 L0,60 Z' fill='black'/></svg>") no-repeat center/100% 100%;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,38 Q360,8 720,28 T1440,38 L1440,60 L0,60 Z' fill='black'/></svg>") no-repeat center/100% 100%; }
  .page-head__wave-white {
    position: absolute;
    bottom: -0.1rem;
    left: 0;
    width: 100%;
    height: 6rem;
    background: #ffffff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,42 Q360,0 720,28 T1440,42 L1440,60 L0,60 Z' fill='black'/></svg>") no-repeat center/100% 100%;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,42 Q360,0 720,28 T1440,42 L1440,60 L0,60 Z' fill='black'/></svg>") no-repeat center/100% 100%; }

/* ==========================================================================
   ご利用案内 (Guide)
   ========================================================================== */
.guide {
  /* ----- 料金 ----- */
  /* ----- 特典 ----- */
  /* ----- お支払い (フロー) ----- */
  /* ----- カレンダー + キャンセル ----- */ }
  .guide__price {
    padding: 8rem 0;
    background: #ffffff; }
    @media (max-width: 767px) {
      .guide__price {
        padding: 5rem 0; } }
    .guide__price .price-table {
      width: 92%;
      max-width: 90rem;
      margin: 0 auto;
      border-collapse: collapse;
      border-top: 0.1rem solid rgba(214, 163, 58, 0.5); }
      .guide__price .price-table th, .guide__price .price-table td {
        border-bottom: 0.1rem solid rgba(214, 163, 58, 0.5);
        padding: 2.4rem 1rem;
        text-align: center;
        font-size: 1.6rem; }
        @media (max-width: 767px) {
          .guide__price .price-table th, .guide__price .price-table td {
            font-size: 1.2rem;
            line-height: 1.1; } }
      @media (max-width: 767px) {
        .guide__price .price-table thead tr {
          width: 100%;
          justify-content: space-between; } }
      .guide__price .price-table thead th {
        font-weight: 500;
        line-height: 1.4;
        background: #fbf6ea; }
        @media (max-width: 767px) {
          .guide__price .price-table thead th {
            width: 100%;
            vertical-align: middle;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; }
            .guide__price .price-table thead th:nth-of-type(1) {
              display: none; } }
        .guide__price .price-table thead th small {
          display: block;
          font-size: 1.2rem; }
          @media (max-width: 767px) {
            .guide__price .price-table thead th small {
              font-size: 1rem; } }
      @media (max-width: 767px) {
        .guide__price .price-table tr {
          display: flex; } }
      @media (max-width: 767px) {
        .guide__price .price-table tbody tr {
          flex-wrap: wrap; } }
      .guide__price .price-table tbody th {
        background: transparent;
        font-weight: 500;
        width: 18%; }
        @media (max-width: 767px) {
          .guide__price .price-table tbody th {
            width: 100%;
            padding: 1rem;
            background: rgba(251, 246, 234, 0.5); } }
      @media (max-width: 767px) {
        .guide__price .price-table tbody td {
          width: calc(100% / 3); } }
      .guide__price .price-table tbody td small {
        font-size: 1.2rem;
        margin-left: 0.4rem; }
        @media (max-width: 767px) {
          .guide__price .price-table tbody td small {
            font-size: 1rem;
            display: block; } }
    .guide__price .rental-table {
      width: 92%;
      max-width: 90rem;
      margin: 6rem auto 0;
      border-collapse: collapse;
      border-top: 0.1rem solid rgba(214, 163, 58, 0.5); }
      @media (max-width: 767px) {
        .guide__price .rental-table {
          margin-top: 2.5rem; } }
      .guide__price .rental-table th, .guide__price .rental-table td {
        border-bottom: 0.1rem solid rgba(214, 163, 58, 0.5);
        padding: 2.4rem 1rem;
        font-size: 1.6rem; }
        @media (max-width: 767px) {
          .guide__price .rental-table th, .guide__price .rental-table td {
            font-size: 1.2rem;
            line-height: 1.3; } }
      @media (max-width: 767px) {
        .guide__price .rental-table tr {
          width: 100%;
          display: flex;
          align-items: stretch;
          flex-wrap: wrap; } }
  @media (max-width: 767px) and (max-width: 767px) {
    .guide__price .rental-table tr td:nth-of-type(1) {
      width: 52%; }
    .guide__price .rental-table tr td:nth-of-type(2) {
      width: 48%; } }

      .guide__price .rental-table tr:nth-of-type(1) td {
        border-bottom-color: rgba(214, 163, 58, 0.25); }
      .guide__price .rental-table th {
        background: #fbf6ea;
        width: 22%;
        text-align: center;
        font-weight: 500;
        font-size: 1.8rem; }
        @media (max-width: 767px) {
          .guide__price .rental-table th {
            width: 100%;
            font-size: 1.2rem;
            padding: 1rem; } }
      .guide__price .rental-table td {
        padding-left: 3rem;
        text-align: left; }
        @media (max-width: 767px) {
          .guide__price .rental-table td {
            padding: 1rem; } }
      .guide__price .rental-table td.price {
        width: 28%;
        text-align: right;
        padding-right: 3rem; }
        .guide__price .rental-table td.price small {
          font-size: 1.2rem;
          margin-left: 0.4rem; }
          @media (max-width: 767px) {
            .guide__price .rental-table td.price small {
              font-size: 1rem;
              margin-left: 0; } }
  .guide__feature {
    padding: 3rem 0 8rem; }
    @media (max-width: 767px) {
      .guide__feature {
        padding: 2rem 0 5rem; } }
    .guide__feature .feature-box {
      width: 92%;
      max-width: 90rem;
      margin: 0 auto;
      background: rgba(249, 234, 195, 0.3);
      border-radius: 0.4rem;
      padding: 8rem 2rem;
      display: grid;
      grid-template-columns: 30rem 1fr;
      align-items: center;
      gap: 3rem;
      position: relative; }
      .guide__feature .feature-box:before {
        content: "";
        width: 100%;
        height: 100%;
        z-index: -1;
        background: rgba(249, 234, 195, 0.3);
        position: absolute;
        left: -.6rem;
        top: -.6rem; }
      @media (max-width: 767px) {
        .guide__feature .feature-box {
          grid-template-columns: 1fr;
          padding: 3rem 2.5rem 4rem;
          text-align: center;
          gap: 1.5rem; } }
    .guide__feature .feature-head {
      text-align: center;
      font-weight: 700; }
      .guide__feature .feature-head .small {
        font-size: 1.6rem;
        line-height: 1.2; }
        @media (max-width: 767px) {
          .guide__feature .feature-head .small {
            font-size: 1.4rem; } }
      .guide__feature .feature-head .title {
        font-size: 4rem;
        margin: 0;
        line-height: 1.1; }
        @media (max-width: 767px) {
          .guide__feature .feature-head .title {
            font-size: 2.8rem; } }
      .guide__feature .feature-head .en {
        font-family: bodoni-std, sans-serif;
        font-size: 1.8rem;
        color: #c5a04a;
        line-height: 1.1; }
        @media (max-width: 767px) {
          .guide__feature .feature-head .en {
            font-size: 1.6rem; } }
    .guide__feature .feature-list {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 4.5rem; }
      @media (max-width: 767px) {
        .guide__feature .feature-list {
          gap: 2.5rem; } }
      .guide__feature .feature-list li {
        position: relative;
        padding-left: 4rem;
        font-size: 1.6rem;
        line-height: 1.3; }
        @media (max-width: 767px) {
          .guide__feature .feature-list li {
            font-size: 1.4rem;
            padding-left: 3rem;
            text-align: left; } }
        .guide__feature .feature-list li::before {
          content: "check";
          font-family: "Material Symbols Outlined";
          position: absolute;
          left: 0;
          top: 0;
          width: 2.3rem;
          height: 2.3rem;
          background: #ffffff;
          color: #d6a33a;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.6rem; }
  .guide__payment {
    padding: 8rem 0;
    background: #ffffff;
    text-align: center; }
    @media (max-width: 767px) {
      .guide__payment {
        padding: 5rem 0 2rem; } }
    .guide__payment .flow {
      width: 92%;
      max-width: 90rem;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem; }
      @media (max-width: 767px) {
        .guide__payment .flow {
          grid-template-columns: 1fr;
          gap: 4rem; } }
    @media (max-width: 767px) {
      .guide__payment .flow-row {
        position: relative; }
        .guide__payment .flow-row::after {
          content: "arrow_right_alt";
          font-family: "Material Symbols Outlined";
          position: absolute;
          color: #d9b96a;
          transform: translateY(-50%);
          opacity: 0.5;
          top: auto;
          right: auto;
          left: 50%;
          font-size: 2.5rem;
          bottom: -4.2rem;
          transform: translateX(-50%) rotate(90deg); }
        .guide__payment .flow-row:nth-last-child(1)::after {
          display: none; } }
    .guide__payment .flow-row + .flow-row {
      margin-top: 4rem; }
    .guide__payment .flow-step {
      position: relative; }
      .guide__payment .flow-step .step-icon {
        width: 10rem;
        height: 10rem;
        margin: 0 auto 1.4rem;
        border-radius: 50%;
        background: #f9eac3;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        color: #c5a04a; }
        @media (max-width: 767px) {
          .guide__payment .flow-step .step-icon {
            width: 8rem;
            height: 8rem;
            font-size: 3rem;
            margin-bottom: .4rem; } }
      .guide__payment .flow-step .num {
        font-family: bodoni-std, sans-serif;
        font-size: 1.8rem;
        line-height: 1.2;
        color: #c5a04a; }
        @media (max-width: 767px) {
          .guide__payment .flow-step .num {
            font-size: 1.6rem; } }
      .guide__payment .flow-step .title {
        font-size: 2rem;
        font-weight: 700;
        color: #4a2d08;
        margin: 0.4rem 0 0.6rem; }
        @media (max-width: 767px) {
          .guide__payment .flow-step .title {
            font-size: 1.7rem;
            margin-top: 0; } }
      .guide__payment .flow-step .desc {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 1.4rem;
        line-height: 1.6; }
        @media (max-width: 767px) {
          .guide__payment .flow-step .desc {
            font-size: 1.2rem; } }
      .guide__payment .flow-step:not(:last-child)::after {
        content: "arrow_right_alt";
        font-family: "Material Symbols Outlined";
        position: absolute;
        top: 5rem;
        right: -2.5rem;
        font-size: 3rem;
        color: #d9b96a;
        transform: translateY(-50%);
        opacity: 0.5; }
        @media (max-width: 767px) {
          .guide__payment .flow-step:not(:last-child)::after {
            top: auto;
            right: auto;
            left: 50%;
            font-size: 2.5rem;
            bottom: -4.2rem;
            transform: translateX(-50%) rotate(90deg); } }
  .guide__calendar {
    background: rgba(249, 234, 195, 0.2);
    padding: 6rem 0 10rem; }
    @media (max-width: 767px) {
      .guide__calendar {
        padding: 4rem 0 6rem; } }
    .guide__calendar .grid {
      width: 92%;
      max-width: 100rem;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: flex-end; }
      @media (max-width: 767px) {
        .guide__calendar .grid {
          grid-template-columns: 1fr;
          gap: 2rem; } }
    .guide__calendar .cal-mock iframe {
      max-width: 100%; }
      @media (max-width: 767px) {
        .guide__calendar .cal-mock iframe {
          height: 100vw; } }
    .guide__calendar .calendar__cta {
      text-align: center;
      position: relative;
      width: 92%;
      max-width: 56rem;
      margin: 5rem auto 0 auto; }
      .guide__calendar .calendar__cta .badge {
        position: absolute;
        top: -1rem;
        left: 3rem;
        z-index: 3;
        width: 5rem;
        height: 4.5rem;
        background: linear-gradient(180deg, #f83600 0%, #8a1d1d 100%);
        color: #ffffff;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
        font-size: 1.4rem;
        line-height: 1;
        font-weight: 600;
        padding-bottom: .8rem;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.18);
        /* リボン右端 V字 */ }
        @media (max-width: 767px) {
          .guide__calendar .calendar__cta .badge {
            font-size: 1.1rem;
            width: 40px;
            height: 4rem;
            left: 1.5rem; } }
        .guide__calendar .calendar__cta .badge::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -1rem;
          width: 0;
          height: 0;
          border-right: 2.5rem solid #8a1d1d;
          border-left: 2.5rem solid #8a1d1d;
          border-bottom: 1rem solid transparent; }
          @media (max-width: 767px) {
            .guide__calendar .calendar__cta .badge::after {
              bottom: -10px;
              border-right-width: 20px;
              border-left-width: 20px; } }
      .guide__calendar .calendar__cta .pill {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-width: 44rem;
        padding: 1.8rem 6rem 1.8rem 9rem;
        background: linear-gradient(to right, #d7a43b 0%, #eec969 50%, #d7a43b 100%);
        color: #4a2d08;
        outline: 0.5rem solid #ffffff;
        border-radius: 99.9rem;
        border: 1px solid #c5a04a;
        font-size: 2rem;
        text-decoration: none;
        box-shadow: 0 0 2rem rgba(120, 90, 40, 0.3);
        transition: opacity .25s ease; }
        .guide__calendar .calendar__cta .pill:hover {
          opacity: .92; }
        @media (max-width: 767px) {
          .guide__calendar .calendar__cta .pill {
            min-width: 0;
            width: 100%;
            font-size: 1.5rem;
            padding: 1.4rem 3rem; } }
      .guide__calendar .calendar__cta .arrow-circle {
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 50%;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0; }
        .guide__calendar .calendar__cta .arrow-circle .icon {
          color: #6e4a23;
          font-size: 1.6rem; }
    .guide__calendar .cancel {
      background: rgba(110, 74, 35, 0.05);
      padding: 2rem; }
      .guide__calendar .cancel .title {
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.6rem; }
        @media (max-width: 767px) {
          .guide__calendar .cancel .title {
            font-size: 1.7rem; } }
      .guide__calendar .cancel .alert {
        text-align: center;
        font-size: 1.6rem;
        margin-bottom: 1.4rem;
        font-family: "Zen Kaku Gothic New", sans-serif; }
        @media (max-width: 767px) {
          .guide__calendar .cancel .alert {
            font-size: 1.4rem; } }
        .guide__calendar .cancel .alert strong {
          color: #eb6100; }
      .guide__calendar .cancel .table {
        width: 100%;
        border-collapse: collapse;
        font-size: 1.4rem;
        background: #fff;
        font-family: "Zen Kaku Gothic New", sans-serif; }
        @media (max-width: 767px) {
          .guide__calendar .cancel .table {
            font-size: 1.2rem;
            position: relative; } }
        .guide__calendar .cancel .table th {
          background: transparent;
          text-align: left;
          padding: 0.8rem 1rem;
          font-weight: 700;
          text-align: center;
          white-space: nowrap; }
          @media (max-width: 767px) {
            .guide__calendar .cancel .table th {
              width: 100% !important;
              background: rgba(110, 74, 35, 0.02);
              border-bottom: 1px solid rgba(110, 74, 35, 0.3); } }
        .guide__calendar .cancel .table td {
          padding: 0.8rem 1.5rem;
          font-weight: 500;
          border-bottom: 1px solid rgba(110, 74, 35, 0.15); }
          .guide__calendar .cancel .table td:nth-of-type(2) {
            text-align: right; }
        @media (max-width: 767px) {
          .guide__calendar .cancel .table tr {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap; }
            .guide__calendar .cancel .table tr td {
              width: 50%; }
              .guide__calendar .cancel .table tr td:nth-of-type(1) {
                font-weight: 700; } }
        .guide__calendar .cancel .table tr:nth-last-of-type(1) td {
          border-bottom: none; }