/* ================================
   /guide ご利用ガイド
================================ */

/* --------------------------------
   2カラムレイアウト（two-col-layout を継承）
-------------------------------- */
.guide-page {
   margin-bottom: 80px;
}

.guide-page-empty {
   max-width: 1350px;
   margin: 60px auto 120px;
   padding: 0 35px;
   font-size: 16px;
   color: var(--color-text-muted);
}

/* --------------------------------
   カテゴリーセクション
-------------------------------- */
.guide-page-section {
   scroll-margin-top: calc(var(--header-top) + var(--header-height));
   border-bottom: 2px solid var(--color-border);
   padding: 0 0 80px;
   margin-bottom: 80px;
}

.guide-page-cat-heading {
   font-size: 32px;
   font-weight: 500;
   color: var(--color-green-dark);
   line-height: 130%;
   margin-bottom: 60px;
   display: flex;
   align-items: flex-start;
}

.guide-page-cat-bullet {
   color: var(--color-green-dark);
}

.guide-page-cat-description {
   font-size: 16px;
   line-height: 175%;
   margin-bottom: 60px;
}

/* --------------------------------
   ガイドアイテム（投稿単位）
-------------------------------- */
.guide-list {
   display: flex;
   flex-direction: column;
   gap: 48px;
}

.guide-item {
   scroll-margin-top: calc(var(--header-top) + var(--header-height) + 40px);
   border-top: 1px solid var(--color-border);
   padding-top: 40px;
}

.guide-item:first-child {
   border-top: none;
   padding-top: 0;
}

.guide-item-title {
   font-size: 20px;
   font-weight: 500;
   color: var(--color-green-dark);
   line-height: 150%;
   margin-bottom: 24px;
}

/* --------------------------------
   guide_contents フィールド
-------------------------------- */
.guide-item-contents-text {
   font-size: 16px;
   line-height: 175%;
}

.guide-item-contents-caption {
   font-size: 13px;
   color: var(--color-gray);
   font-weight: 400;
   line-height: 175%;
   margin-top: 16px;
}

.guide-item-contents-box {
   background: var(--color-bg-box);
   padding: 40px;
}

.guide-item-contents-box-title {
   font-size: 20px;
   font-weight: 500;
   line-height: 150%;
   margin-bottom: 32px;
}

.guide-item-contents-box-text {
   font-size: 16px;
   line-height: 175%;
}

/* --------------------------------
   繰り返しフィールド行
-------------------------------- */
.guide-item-body {
   display: flex;
   flex-direction: column;
   gap: 48px;
   margin-top: 48px;
}

.guide-row {
   scroll-margin-top: calc(var(--header-top) + var(--header-height) + 40px);
   display: flex;
   gap: 30px;
   align-items: flex-start;
}

.guide-row-media-wrap {
   flex: 0 0 37.2%;
   max-width: 37.2%;
}

.guide-row-content {
   flex: 1;
   min-width: 0;
}

/* メディアなし：テキスト100%幅 */
.guide-row:not(.guide-row--has-media) .guide-row-content {
   flex: 0 0 100%;
   max-width: 100%;
}

.guide-row-heading {
   font-size: 20px;
   font-weight: 500;
   color: var(--color-green-dark);
   line-height: 150%;
   margin-bottom: 24px;
   display: flex;
   gap: 10px;
}

.guide-row-text {
   font-size: 16px;
   line-height: 175%;
}

.guide-row-text p {
   margin-bottom: 12px;
}

.guide-row-text p:last-child {
   margin-bottom: 0;
}

.guide-row-text a {
   color: var(--color-green);
   text-decoration: underline;
}

/* --------------------------------
   メディア（画像・動画）
-------------------------------- */
.guide-row-image {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 8px;
}

.guide-row-video-link-wrap {
   display: block;
}

.guide-row-video {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 8px;
}

.guide-row-video-embed {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   border-radius: 8px;
   overflow: hidden;
}

.guide-row-video-embed iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: none;
}

.guide-row-caption {
   font-size: 13px;
   color: var(--color-text-muted);
   line-height: 150%;
   margin-top: 16px;
}

/* --------------------------------
   お問い合わせセクション
-------------------------------- */
.guide-contact-wrap {
   max-width: 926px;
   margin: 0 auto;
   padding: 0 40px 80px;
}

.guide-contact-wrap .page-contact-block {
   border: none;
   padding-top: 0;
   margin-top: 0;
}

/* --------------------------------
   Responsive: SP（< 768px）
-------------------------------- */
@media (max-width: 767px) {
   .guide-page {
      margin-bottom: 60px;
   }

   .guide-page-section {
      margin-bottom: 45px;
      padding-bottom: 45px;
   }

   .guide-page-cat-heading {
      font-size: 26px;
      margin-bottom: 18px;
   }

   .guide-page-cat-description {
      margin-bottom: 18px;
   }

   .guide-list {
      gap: 25px;
   }

   .guide-item {
      padding-top: 32px;
   }

   .guide-item-contents-caption {
      font-size: 14px;
      margin-top: 20px;
   }

   .guide-item-title {
      font-size: 21px;
      margin-bottom: 20px;
   }

   .guide-item-body {
      gap: 20px;
      margin-top: 25px;
   }

   .guide-row {
      flex-direction: column;
      gap: 16px;
   }

   .guide-row-heading {
      font-size: 18px;
      gap: 5px;
      margin-bottom: 20px;
   }

   .guide-row-caption {
      font-size: 14px;
      margin-top: 20px;
   }

   .guide-row-media-wrap {
      flex: 0 0 auto;
      max-width: 100%;
      width: 100%;
   }

   .guide-item-contents-box {
      padding: 20px;
   }

   .guide-item-contents-box-title {
      font-size: 16px;
      margin-bottom: 16px;
   }

   .guide-page-empty {
      margin: 40px auto 80px;
      padding: 0 15px;
   }

   .guide-contact-wrap {
      padding: 0 15px 50px;
   }
}