@charset "UTF-8";

@font-face {
  font-family: "Cormorant Garamond Local";
  src: url("../../fonts/Cormorant_Garamond/CormorantGaramond-latin-variable-subset.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* Zen Old Minchoは結局容量が大きくなってしまうため使用しない */
/* @font-face {
  font-family: "Zen Old Mincho Local";
  src: url("../../fonts/Zen_Old_Mincho/ZenOldMincho-regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
} */

/* @font-face {
  font-family: "Zen Old Mincho Local";
  src: url("../../fonts/Zen_Old_Mincho/ZenOldMincho-medium-subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
} */

/* @font-face {
  font-family: "Zen Old Mincho Local";
  src: url("../../fonts/Zen_Old_Mincho/ZenOldMincho-semibold-subset.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
} */

/* @font-face {
  font-family: "Zen Old Mincho Local";
  src: url("../../fonts/Zen_Old_Mincho/ZenOldMincho-bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
} */

/* ============================================================
   Foundation
   - Base: リセット・基本スタイル
   - Variables: カスタムプロパティ
   ============================================================ */

/* Base
 **********************/
html {
  scroll-behavior: smooth;
}

:root {
  /* 文字サイズ */
  --swl-fz--content: 3.73vw;
  --swl-fz--root: 3.3vw;
  /* フォント */
  --ff-gothic: "Noto Sans JP", sans-serif;
  --ff-mincho: "Zen Old Mincho Local", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-en: "Cormorant Garamond Local", "Times New Roman", serif;
  /* 色 */
  --color-main: #b52625;
  --color-light: #ffffff;
  --color-font: #373737;
  --color-bg: #fdfdfd;
  /* セクション間余白 */
  --sec-pad-sm: 5rem;
  --sec-pad-md: 6rem;
  /* コンテナー余白 */
  --contents-pad-sm: max(calc((100vw - var(--container_size)) / 2), var(--swl-box_padding));
  --contents-pad-md: max(calc((100vw - var(--article_size)) / 2), var(--swl-box_padding));
}

@media screen and (min-width: 600px) {
  :root {
    /* 文字サイズ */
    --swl-fz--content: medium;
    --swl-fz--root: medium;
  }
}

@media screen and (min-width: 960px) {
  :root {
    /* セクション間余白 */
    --sec-pad-sm: 5rem;
    --sec-pad-md: 8rem;
  }
}

body :is(p, ul, ol, li, a) {
  line-height: 1.75;
}

body.has-reason-modal-open {
  overflow: hidden;
}

/* インタラクション共通 */
a,
button {
  transition: opacity 0.3s;

  &:focus-visible {
    opacity: 0.5;
  }
  @media (any-hover) {
    &:hover {
      opacity: 0.5;
    }
  }
}

/* ============================================================
   SWELL デフォルトスタイルのキャンセル
   - 見出し・コンテナー・ページャーなどのSWELL標準スタイルを上書き
   ============================================================ */

/* SWELL Cancel
 **********************/
:where(#body_wrap):not(.single) {
  /* SWELLデフォルトの見出しスタイルをキャンセル */
  .post_content :is(h2, h3, h4):where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
    /* 詳細度 0, 1, 1 */
    padding: 0;
    background-color: transparent;
    background-image: initial;
    color: inherit;
    border: initial;
  }
  .post_content :is(h2, h3, h4):where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
    /* 詳細度 0, 1, 2 */
    content: none;
    position: static;
    inset: initial;
    display: initial;
    border: none;
    width: initial;
    height: initial;
    background-color: transparent;
  }

  /* セクション用見出しのキャンセル */
  .post_content h2.wp-block-heading::first-letter {
    /* 詳細度 0, 2, 2 */
    border: none;
    color: inherit;
    font-size: inherit;
    padding: 0;
  }
  .post_content h2.is-style-section_ttl {
    /* 詳細度 0, 2, 1 */
    padding: 0;
  }
  .post_content h2.is-style-section_ttl::before,
  .post_content h2.is-style-section_ttl::after {
    /* 詳細度 0, 2, 2 */
    content: none;
    position: static;
    display: initial;
    inset: initial;
    width: initial;
    height: initial;
    background-color: transparent;
  }

  /* コンテナーのパディング */
  .l-container {
    padding-block: 0;
  }

  /* ページャーのマージン */
  .c-pagination {
    .page-numbers {
      margin: 4px !important;
    }
  }
}

/* ============================================================
   Component
   - 再利用可能なUI部品（タイトル・ボタン・カード・モーダルなど）
   ============================================================ */

/* Component
 **********************/
#body_wrap {
  /* ----- タイトル ----- */
  .c-title {
    margin-block-end: 2.5em !important;
    font-size: 1.9rem;
    font-family: var(--ff-mincho);
    font-weight: 500;

    .mininote {
      display: block;
      margin-top: 0.6em;
      font-size: 0.625em;
      font-family: var(--ff-en);
      font-weight: 600;
    }
    @media screen and (min-width: 960px) {
      margin-block-end: 3em !important;
      font-size: 2rem;
    }
  }

  /* ----- ボタン（共通） ----- */
  .swell-block-button {
    font-family: var(--ff-gothic);

    .swell-block-button__link {
      padding: 1.5em 3.2em;
      font-weight: 400;

      .__icon {
        transition: transform 0.3s;
      }
      &:focus-visible {
        .__icon {
          transform: translatex(0.5em);
        }
      }
      @media (any-hover) {
        &:hover {
          .__icon {
            transform: translatex(0.5em);
          }
        }
      }
    }
  }

  /* ボタン：ノーマルスタイル */
  .swell-block-button.is-style-btn_normal {
    .swell-block-button__link {
      border: 1px solid var(--the-btn-bg);
      transition:
        background-color 0.3s,
        color 0.3s;
      &:focus-visible {
        color: var(--the-btn-bg);
        background-color: var(--color-light);
        opacity: 1;
      }
      @media (any-hover) {
        &:hover {
          color: var(--the-btn-bg);
          background-color: var(--color-light);
          opacity: 1;
        }
      }
    }
  }

  /* ボタン：ラインスタイル */
  .swell-block-button.is-style-btn_line a {
    background-color: var(--color-light);

    &:focus-visible {
      background-color: var(--color-main);
    }
    @media (any-hover) {
      &:hover {
        background-color: var(--color-main);
      }
    }
  }

  /* CTA ボタン上テキスト */
  .c-cta-btnText {
    &::before {
      display: block;
      content: "＼無料講座説明会開催中！／";
      color: var(--color-main);
    }
  }

  /* ----- フッターバナー ----- */
  .c-footer-banner {
    margin-inline: auto;
    max-width: 650px;
    width: 90%;
  }

  /* ----- コンテンツ２カラム ----- */
  .c-contents {
    justify-content: space-between;

    .c-contents__title {
      writing-mode: vertical-rl;
      transform: translatex(1rem);
    }
    .c-contents__body {
      max-width: 700px;
    }
  }

  /* ----- 合格者実績カード ----- */
  .c-achievement-card {
    aspect-ratio: 16 / 9;

    .c-achievement-card__thumb {
      width: 100%;
      height: 100%;
      .c-achievement-card__media-inner {
        width: 100%;
        height: 100%;
      }
      iframe,
      img,
      button {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
.c-achievement-card__video-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.c-achievement-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -50%);
}

.c-achievement-card__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
  transform: translate(-35%, -50%);
}

.c-achievement-card__video-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
/* ----- モーダル ----- */
/* JSで生成される要素なので、#body_wrapからは外す */
.c-reason-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.c-reason-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.c-reason-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.c-reason-modal__dialog {
  position: relative;
  width: min(1024px, 100%);
  max-height: 85vh;
  overflow: auto;
  background: #fff;
  padding: 4rem 5.5rem 3rem;
  border-radius: 0.625rem;
  z-index: 1;
}
.c-reason-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.875rem;
  border: 0;
  background: transparent;
  color: #634746;
  font-size: 2rem;
  font-weight: 100;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   Layout
   - ページ全体の骨格（ヘッダー・グロナビ・コンテンツ・フッター・サイドバー）
   ============================================================ */

/* Layout
 **********************/

/* ----- ヘッダー ----- */
.l-header {
  .l-header__inner {
    padding-inline: 3vw 0;
    max-width: 100%;
  }
  .l-header__logo {
    order: -2;
    padding: 0;
  }
  .l-header__menuBtn {
    color: var(--color-main);
  }
  .l-header__customBtn {
    display: none;
  }
}
.w-header {
  display: block !important;
  order: -1;

  a {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 1em;
    font-family: var(--ff-mincho);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    background-color: var(--color-main);
    color: var(--color-light);

    &::after {
      content: ">";
      display: inline-block;
      padding-left: 0.5em;
      font-size: 0.8em;
    }
  }

  @media screen and (min-width: 960px) {
    display: none !important;
  }
}
/* SPメニュー */
.p-spMenu {
  .p-spMenu__inner {
    &::before {
      background-color: #f1ede3;
    }
  }
  .p-spMenu__closeBtn {
    color: var(--color-main);
  }
  .p-spMenu__body {
    font-family: var(--ff-mincho);

    .c-widget__title {
      display: none;
    }
    .p-spMenu__nav {
      padding-block: 1rem;
    }
    .menu-item {
      a {
        min-width: 200px;
        max-width: 50%;
        padding: 1em 0.5em;
        border: none;
      }
    }
    /* 最後のメニュー項目（CTAボタン扱い） */
    .menu-item:last-of-type a {
      position: relative;
      margin-top: 1em;
      padding: 1em 2em;
      background-color: var(--color-main);
      color: var(--color-light);

      &::after {
        position: absolute;
        top: 0;
        right: 2em;
        bottom: 0;
        content: ">";
        display: flex;
        justify-content: center;
        align-items: center;
        margin-block: auto;
        width: 1em;
        height: 1em;
        font-size: 0.8em;
      }
    }
  }
}

/* ----- 固定ヘッダー ----- */
.l-fixHeader {
  .l-fixHeader__inner {
    padding-inline: 3vw 0;
    max-width: 100%;
  }
  .l-fixHeader__logo {
    padding: 0;
  }
}

/* ----- グローバルナビ ----- */
.c-gnav {
  font-family: var(--ff-mincho);
  font-weight: 400;

  /* CTAエリア（右端の斜め帯） */
  .global__cta {
    clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);

    a {
      padding-inline: 3vw;
      background-color: var(--color-main);
      color: var(--color-light);
      transition: opacity 0.3s;

      span.ttl {
        display: flex;
        align-items: center;
      }
      span.ttl::after {
        content: ">";
        display: inline-block;
        margin-left: 1em;
        font-size: 0.8em;
        color: white;
        scale: 0.6 1;
        transition: transform 0.3s;
      }
    }
    a:focus-visible {
      opacity: 0.5;
      span.ttl::after {
        transform: translateX(0.5em);
      }
    }
    @media (any-hover) {
      a:hover {
        opacity: 0.5;
        span.ttl::after {
          transform: translateX(0.5em);
        }
      }
    }
  }
}

/* ----- コンテンツエリア ----- */

/* コンテナーの余分なマージンをリセット */
.l-content {
  margin-block: 0;
}

/* fullWideブロックのセクション間余白
 * - 背景色なし → margin で余白
 * - 背景色あり（[style]） → padding で余白、margin は 0
 * - 先頭要素は上余白を small に
 */
.swell-block-fullWide {
  margin-block: var(--sec-pad-md) !important;
  padding-block: 0 !important;
}
.swell-block-fullWide:first-child {
  margin-block: var(--sec-pad-sm) var(--sec-pad-md) !important;
  padding-block: 0 !important;
}
.swell-block-fullWide[style] {
  margin-block: 0 !important;
  padding-block: var(--sec-pad-sm) !important;
}
.swell-block-fullWide[style]:first-child {
  margin-block: 0 !important;
  padding-block: var(--sec-pad-sm) !important;
}

/* ----- フッター ----- */
.w-beforeFooter {
  margin: 0;
}

/* フッター直前のブログパーツ（ID:145）の余白 */
.p-blogParts[data-partsid="145"] {
  margin-block: var(--sec-pad-md);
}

.l-footer {
  font-family: var(--ff-en);
  font-size: 1rem;

  /* フッターウィジェットエリア */
  .l-footer__widgetArea {
    font-family: var(--ff-mincho);
    background-color: var(--color-bg);

    .w-footer {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      margin-bottom: 1em;
      width: 95%;
      max-width: 1200px;
      border-top: 1px solid var(--color-main);
    }
    .w-footer__box {
      margin: 0;
    }
    .widget_media_image {
      display: flex;
      flex-direction: column;
      margin-bottom: 1.25em;

      .c-widget__title {
        margin: 0;
        padding: 0;
        font-size: 1.125em;
        font-weight: 500;
        &::before,
        &::after {
          content: none;
        }
      }
      a {
        order: -1;
        width: 6em;
      }
    }
    .widget_text {
      margin-block: 0 1.25em;
      font-weight: 500;
    }
    .menu {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .menu-item a {
        border: 0;
      }
    }
    #menu-footer-sub {
      font-size: 0.875em;
    }
  }
}

@media screen and (min-width: 960px) {
  .l-footer {
    /* フッターウィジェット：横並び */
    .l-footer__widgetArea {
      .w-footer {
        align-items: center;
        flex-direction: row;
      }
      .menu {
        justify-content: flex-end;
      }
    }
  }
}

/* ----- サイドバー ----- */
.l-sidebar {
  font-size: 1rem;

  /* カテゴリー・タグ共通（見出しの装飾ライン） */
  .sidebar-categories,
  .sidebar-tags {
    margin-bottom: 4em !important;

    h3 {
      position: relative;
      display: block;
      margin-bottom: 2em;
      text-align: center;
      font-family: var(--ff-mincho);
      font-weight: 500;

      &::before,
      &::after {
        position: absolute;
        inset: initial;
        top: 0;
        bottom: 0;
        content: "";
        display: block;
        margin-block: auto;
        width: 10%;
        height: 1px;
        background-color: currentcolor;
      }
      &::before {
        left: 0;
      }
      &::after {
        right: 0;
      }
    }
  }

  /* カテゴリーリスト */
  .sidebar-categories {
    li {
      font-family: var(--ff-mincho);
      font-size: 0.875em;
      font-weight: 500;
      border-bottom: 1px solid #d9d9d9;

      a {
        display: block;
        padding: 0.75em 1em;
        color: var(--color-font);
        &::before {
          content: none;
        }
      }
    }
  }

  /* タグリスト */
  .sidebar-tags {
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5em;
    }
    li {
      a {
        display: inline-block;
        padding: 0.625em 1em !important;
        font-family: var(--ff-mincho);
        font-size: 0.875em;
        font-weight: 500;
        color: var(--color-font);
        background-color: #f1ede3;
        border-radius: 5em;
      }
    }
  }

  /* サイドバー内バナー画像 */
  .c-widget.widget_media_image {
    margin-top: 6em !important;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

/* ----- パンくずリスト ----- */
.p-breadcrumb {
  text-transform: uppercase;
}

/* ----- ヒーロー（ページタイトルエリア） ----- */
.l-topTitleArea {
  /* サムネイル画像は非表示 */
  img {
    display: none;
  }

  .c-pageTitle {
    display: flex;
    flex-direction: column;
    color: var(--color-font);
    font-family: var(--ff-en);
    font-size: 1.25rem;
    font-weight: 600;
    text-shadow: none;
    text-transform: uppercase;

    .c-pageTitle__subTitle {
      display: block;
      margin: 0;
      font-family: var(--ff-mincho);
      font-size: 1.6em;
      font-weight: 500;
      font-style: normal;
      opacity: 1;
    }
  }
}

/* フィルターレイヤーの疑似要素をキャンセル */
.l-topTitleArea.c-filterLayer {
  &::before {
    content: none;
  }
  &::after {
    content: none;
  }
}

/* ============================================================
   Project
   - ページ・機能単位のスタイル
   ============================================================ */

/* ----- 投稿リスト（共通） ----- */
#body_wrap {
  .p-postList {
    .p-postList__title {
      font-weight: 400;
      line-height: 1.75;
    }
    .p-postList__times {
      time::before {
        display: none;
      }
    }
    .c-postThumb__cat {
      padding: 0.4em 2em;
      font-size: 0.675rem;
      background-image: none;
      line-height: 1.75;
    }
    .icon-folder {
      &::before {
        content: none;
      }
    }
  }
}

/* ============================================================
   Project / Page: トップページ
   ============================================================ */

/* ----- FV（メインビジュアル） ----- */
.p-mainVisual {
  .p-mainVisual__imgLayer {
    left: 2vw;
    right: 0;
    width: 100%;

    img {
      transform: translatey(-17.5%);
      object-fit: contain;
      object-position: right bottom;
    }
  }
  .p-mainVisual__textLayer {
    font-size: 3.73vw;
    justify-content: stretch;
    max-width: initial;
    left: 0;
    letter-spacing: 0.03em;
    transform: translateX(0);
  }
  .p-blogParts {
    height: 100%;
  }
  .p-mv__title {
    font-size: 2.285em;
    font-weight: 600;
    text-shadow: none;
  }
  .p-mv__title--img {
    width: 78.9vw;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .p-mv__subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1em;
    font-size: 1.357em;
    font-weight: 600;
    text-shadow: none;
    line-height: 2.25;

    img {
      padding-inline: 0.5em;
      height: 2em;
      width: auto !important;
    }
  }
  .p-mv__subtitle--img {
    width: 100%;

    img {
      padding: 0;
      width: 100% !important;
      height: 100%;
      object-fit: contain;
    }
  }
  .p-mv__text {
    font-size: 1em;
    line-height: 2;
    text-shadow: none;
  }
  .p-mv__button {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center !important;
    font-size: 1em;

    .swell-block-button__link {
      padding: 1.5em 2em !important;
      width: 95%;
    }
  }
  .p-mv__decor {
    position: absolute;
    top: 53%;
    right: -0.5em;
    font-size: 10.1vw;
    writing-mode: vertical-rl;
    text-shadow: none;
    line-height: 1;
    opacity: 0.3;
  }

  @media screen and (min-width: 600px) {
    .p-mainVisual__inner {
      max-height: 133vw;
    }
    .p-mainVisual__textLayer {
      font-size: 2.2vw;
    }
    .p-mv__decor {
      top: 34.5%;
    }
  }

  @media screen and (min-width: 960px) {
    .p-mainVisual__inner {
      max-height: initial;
    }
    .p-mainVisual__imgLayer {
      padding-top: 4.16vw;
      right: 0;
      left: initial;
      width: 67%;

      img {
        transform: translatey(0);
        object-position: right top;
      }
    }
    .p-mainVisual__textLayer {
      justify-content: flex-end;
      font-size: 1.111vw;
    }
    .p-blogParts {
      height: auto;
    }
    .p-mv__title {
      font-size: 4em;
    }
    .p-mv__title--img {
      width: 41.1vw;
    }
    .p-mv__subtitle {
      margin-bottom: 2em;
      width: 56vw;
      font-size: 2em;
    }
    .p-mv__subtitle--img {
      width: 53.1vw;
    }
    .p-mv__button {
      position: initial;
      text-align: left !important;
      font-size: 1.25em;

      .swell-block-button__link {
        width: 23em;
      }
    }
    .p-mv__decor {
      top: -1.1em;
      right: -0.5em;
      font-size: 8vw;
    }
  }
}

/* ----- ニュース（トップ） ----- */
.p-top-news {
  .p-postList {
    border: none;
  }
  .p-postList__link {
    border-bottom: 1px solid var(--color-main);
  }
  .p-postList__body {
    display: flex;
    align-items: center;
    font-family: "Zen old mincho";
  }
  .p-postList__meta {
    margin: 0;
    padding-right: 5vw;
    font-size: 1em;
  }
}

/* ----- お悩みセクション（トップ） ----- */
.p-top-worry {
  .swl-inline-color {
    text-decoration: underline;
    text-underline-offset: 0.5em;
  }
  .p-top-worry__strong {
    margin-block-end: 2.5em;
  }
  .p-top-worry__solution {
    position: relative;

    .swell-block-column:has(.wp-block-image) {
      margin: 0;
    }
    .wp-block-image {
      position: relative;
      width: 100vw;
      z-index: -1;

      img {
        display: block;
        margin-left: auto;
        width: 95%;
        max-width: 700px;
      }
    }
  }

  @media screen and (min-width: 960px) {
    .p-top-worry__strong {
      margin-block-end: 5em;
    }

    .p-top-worry__solution {
      .wp-block-image {
        position: absolute;
        top: -3rem;
        right: 50%;
        transform: translateX(50%);
      }
    }
  }
}

/* ----- 特徴セクション（トップ） ----- */
.p-top-feature {
  .wp-block-media-text {
    margin-block: 4.5rem;
  }

  .wp-block-media-text__content {
    padding-bottom: 0;
    padding-inline: 0;
  }
  @media screen and (min-width: 960px) {
    .wp-block-media-text {
      margin-block: 6rem;
    }
  }
}

/* ----- 講師セクション（トップ） ----- */
.p-top-instructor {
  .p-top-instructor__box {
    --image-h-half: calc(100% / 16 * 9 / 2 + 2rem);
    position: relative;
    margin-top: calc(var(--image-h-half) + 4rem) !important;
    padding-top: var(--image-h-half);
    padding-left: var(--contents-pad-md);

    img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin-inline: auto;
      width: calc(100% - var(--swl-box_padding) * 2);
      transform: translateY(-50%);
    }
    .swell-block-column {
      h3 {
        z-index: 1;
      }
      div {
        position: relative;
        z-index: 1;
      }
    }
  }
  .p-top-instructor__box-decor {
    position: absolute;
    top: 25%;
    left: 0;
    writing-mode: vertical-rl;
    z-index: 0;
  }

  @media screen and (min-width: 960px) {
    .p-top-instructor__box {
      margin-top: 10rem !important;
      margin-right: var(--contents-pad-sm);
      padding-top: 2em;

      img {
        position: initial;
        transform: translateY(-30%);
      }
    }
  }
}

/* ----- 合格実績スライダー（トップ） ----- */
.p-top-achievements {
  .p-achievement-slider__pagination {
    position: initial;
    margin-top: 1rem;
  }
  .wp-block-group:has(.swell-block-button) {
    padding-bottom: 4rem;
  }
}

/* ----- 選ばれる理由セクション（トップ） ----- */
.p-top-reason {
  /* システム */
  .p-top-reason__system {
    padding-block: var(--sec-pad-sm);

    h3 {
      text-decoration: underline;
      text-decoration-color: var(--color-main);
      text-underline-offset: 0.3em;
      line-height: 1.75;
    }
  }
  .p-top-reason__system-item {
    position: relative;

    .wp-block-group {
      border-radius: 0.625rem;
      box-shadow: 2px 2px 9px 0px rgb(43 10 10 / 0.16);

      strong {
        font-weight: 400;
        text-decoration: underline;
      }
    }
    h4 .swl-format-2 {
      opacity: 0.7;
    }
  }
  .p-top-reason__system-pickup {
    margin-inline: auto;
    max-width: 848px;

    p {
      border-radius: 0.25rem;
      text-align: left;
    }
    strong {
      text-decoration: underline;
    }
  }

  /* ポイント */
  .p-top-reason__point-list {
    padding-top: 2rem;

    .swell-block-columns__inner {
      align-items: stretch;
    }
  }
  .p-top-reason__point-item {
    position: relative;

    .wp-block-columns {
      height: 100%;
      border-radius: 0.625rem;
    }
    .p-top-reason__point-item-head {
      p {
        display: flex;
        grid-auto-columns: center;
        align-items: center;
      }
      h3 {
        position: relative;
        padding-left: 1em;

        &::before {
          position: absolute;
          top: 0;
          left: 0.5em;
          bottom: 0;
          content: "";
          display: block;
          margin-block: auto;
          width: 1px;
          height: 2.5em;
          background-color: currentcolor;
        }
      }
    }
  }
  /* ポイント：タップ誘導アイテム（保証バッジ付き） */
  .p-top-reason__point-item--tap {
    position: relative;
    margin-top: 2rem;

    &::before {
      position: absolute;
      top: -5rem;
      right: 0rem;
      content: "";
      width: 8rem;
      height: 8rem;
      background-image: url("http://otopmesa.com/wp-content/uploads/2026/04/img-guarantee.webp");
      background-size: contain;
    }
  }
  .p-top-reason__point-pickup {
    position: relative;
    margin-inline: auto;
    padding-top: 6rem;
    max-width: 848px;
    border-radius: 0.625rem;
  }
  .p-top-reason__point-pickup-label {
    position: absolute;
    top: 1rem;
    left: 0;

    span.swl-bg-color {
      padding-block: 0.2em;
      padding-inline: 1em 2em;
      clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
    }
  }

  @media screen and (min-width: 960px) {
    /* システム：アイテム間の矢印（PC） */
    .p-top-reason__system-item:not(:last-of-type) {
      &::before,
      &::after {
        position: absolute;
        top: 50%;
        left: calc(100% + 0.75rem);
        content: "";
        display: block;
        width: 3rem;
        height: 3px;
        background-color: #b2a4a4;
        transform-origin: center;
      }
      &::before {
        rotate: 45deg;
      }
      &::after {
        rotate: -45deg;
      }
    }
    .p-top-reason__system-pickup {
      p {
        text-align: center;
      }
    }

    /* ポイント（PC） */
    .p-top-reason__point-list {
      padding-top: 0;
    }
    .p-top-reason__point-item--tap {
      margin-top: 0;

      &::before {
        top: -3rem;
        right: 1rem;
      }
    }
  }
}

/* ----- 概要テーブルセクション（トップ） ----- */
.p-top-summary {
  @media screen and (min-width: 600px) {
    /* タブレット以上でスクロールヒントを非表示 */
    .c-scrollHint {
      display: none;
    }
  }
}

/* ============================================================
   Project / Page: スクール紹介ページ（about）
   ============================================================ */

/* ----- リード（講師紹介・メッセージ） ----- */
.p-about__lead {
  /* 共通 */
  .p-about__lead-contents {
    position: relative;
    margin-bottom: 5rem;
  }
  .p-about__lead-media {
    order: 1;

    /* 背景の帯 */
    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      bottom: 5%;
      content: "";
      display: block;
      width: 100vw;
      background-color: #f5e7e6;
      z-index: -1;
      transform: translatex(-50%);
    }
  }

  /* 自己紹介ブロック */
  .p-about__lead-contents--me {
    .p-about__lead-media::before {
      top: 280px;
    }
  }

  /* メッセージブロック */
  .p-about__lead-contents--msg {
    .p-about__lead-media::before {
      top: 280px;
    }
  }

  /* メディア掲載ブロック */
  .p-about__lead-contents--media {
    margin-inline: auto;
    max-width: 800px;
  }

  @media screen and (min-width: 960px) {
    /* 共通（PC） */
    .p-about__lead-contents {
      margin-bottom: 15rem;
    }
    .p-about__lead-media {
      order: initial;

      &::before {
        top: 2rem;
        left: initial;
        bottom: -3rem;
        width: 65vw;
        transform: translateX(0);
      }
    }

    /* 自己紹介（PC） */
    .p-about__lead-contents--me {
      .p-about__lead-media figure {
        position: absolute;
        top: 0;
        right: 0;
        width: 480px;
      }
      .p-about__lead-media::before {
        top: -3rem;
        right: min(calc((100vw - 1200px) / 2 * -1), calc(var(--swl-pad_container, 0px)) * -1);
      }
    }

    /* メッセージ（PC） */
    .p-about__lead-contents--msg {
      .p-about__lead-media figure {
        position: absolute;
        top: -60px;
        left: 0;
        width: 420px;
      }
      .p-about__lead-media::before {
        top: -3rem;
        left: min(calc((100vw - 1200px) / 2 * -1), calc(var(--swl-pad_container, 0px)) * -1);
      }
    }
  }
}

/* ----- 講師紹介 ----- */
.p-about__instructor {
  .p-about__instructor-item {
    padding-inline: max(calc((100% - 1000px) / 2), 0px);

    /* 左ボーダーアクセント付き見出し */
    h3 {
      position: relative;
      padding-left: 1em;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        content: "";
        display: inline-block;
        width: 4px;
        background-color: var(--color-main);
      }
    }
  }
  /* 2件目以降の区切り線 */
  .p-about__instructor-item + .p-about__instructor-item {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px dashed #373737;
  }

  @media screen and (min-width: 600px) {
    .p-about__instructor-item {
      img {
        display: block;
        margin-left: auto;
      }
    }
  }
}

/* ----- サポート体制 ----- */
.p-about__support {
  .p-about__support-item {
    .p-about__support-head {
      position: relative;
      align-self: flex-start;
      padding-left: 1.4em;

      /* 左ボーダーアクセント */
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        content: "";
        display: block;
        width: 4px;
        background-color: var(--color-main);
      }
      .wp-block-group {
        padding-top: 0.2em;
        gap: 0;

        p {
          line-height: 1.4;
        }
      }
    }
  }
}

/* ----- ミッション（フルワイド・背景画像） ----- */
.p-about__mission {
  background-color: white !important;
  background-size: 220% !important;
  background-position: center bottom !important;

  /* オーバーレイ */
  &::before {
    background-color: #b52625cc !important;
  }

  @media screen and (min-width: 600px) {
    background-size: cover !important;
    background-position: 50% 50% !important;
  }
}

/* ----- バナー ----- */
.p-about__banner {
  margin-block: 8rem !important;
}

/* ----- 会社概要テーブル ----- */
.p-about__company {
  .swell-block-dl {
    --swl-dt-width: 9em !important;
    margin-inline: auto;
    max-width: 725px;
  }
  .swell-block-dl__dt {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 1em;
    border-bottom: 1px solid #c1c1c1;

    /* SWELLデフォルトのコロンを非表示 */
    &::after {
      display: none;
    }
  }
  .swell-block-dl__dd {
    padding: 2em 1em;
    border-bottom: 1px solid #c1c1c1;
  }

  @media screen and (min-width: 600px) {
    .swell-block-dl {
      --swl-dt-width: 12em !important;
    }
  }
  @media screen and (min-width: 960px) {
    .swell-block-dl {
      --swl-dt-width: 14.5em !important;
    }
  }
}

/* ============================================================
   Project / Page: 合格実績アーカイブ・詳細
   ============================================================ */

/* ----- 合格実績一覧 ----- */
.p-achievements__list {
  font-size: 1rem;

  /* グリッドレイアウト */
  .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
    column-gap: 9em;
    row-gap: 5em;
    container-type: initial;
  }
  summary {
    padding: 1em;
    font-family: var(--ff-mincho);
    font-size: 1em;
    text-align: center;
  }
  /* アコーディオン内スタイル */
  .swell-block-accordion {
    .swell-block-accordion__body {
      padding-inline: 0;
      border: none;
    }
    .wp-block-group {
      margin: 0;
    }
    h3 {
      font-size: 1.125em;
    }
    ul {
      padding: 0;
      font-size: 0.875em;
      list-style: none;
      text-align: center;
    }
    hr {
      margin-block: 1.5em !important;
    }
  }
}

/* ----- 合格実績詳細（シングル） ----- */
.single-achievements {
  font-family: var(--ff-mincho);

  .c-postTitle__ttl {
    font-weight: 500;
  }
  h2 {
    font-weight: 500;
  }
  .p-toc__ttl {
    font-family: var(--ff-gothic);
  }
  .c-categoryList {
  }
  .c-taxList {
    &::before {
      color: var(--color-main);
    }
  }
  .c-taxList__link {
    color: var(--color-light);
    background-color: var(--color-main);
  }
  /* 投稿日は非表示 */
  .c-postTitle__date {
    display: none;
  }
  .p-articleMetas__times {
    display: none;
  }
}

/* ============================================================
   Project / Page: お問い合わせ
   ============================================================ */

/* ----- リードテキスト ----- */
.p-contact__lead {
  font-size: 1rem;
  font-family: var(--ff-mincho);
  line-height: 1.75;
}

/* ----- お問い合わせフォーム（Contact Form 7） ----- */
.p-contact__form {
  font-size: 1rem;

  .wpcf7 {
    max-width: 600px;
    margin: 0 auto;
  }
  .cf7-field-group {
    margin-bottom: 1.25em;
  }
  /* 2カラムレイアウト */
  .cf7-field-2col {
    display: flex;
    flex-direction: column;

    @media screen and (min-width: 600px) {
      flex-direction: row;
      gap: 2em;
    }
    @media screen and (min-width: 600px) {
      gap: 4em;
    }
  }
  .cf7-label {
    display: block;
    margin-bottom: 0.5em;
  }
  /* 必須ラベル */
  .cf7-required {
    display: inline-block;
    background-color: var(--color-main);
    color: var(--color-light);
    font-size: 0.75em;
    padding: 0.1em 0.4em;
    border-radius: 0.2em;
    margin-left: 0.4em;
  }
  /* テキスト・メール入力 */
  .cf7-form-wrap .wpcf7-form-control.wpcf7-text,
  .cf7-form-wrap .wpcf7-form-control.wpcf7-email {
    width: 100%;
    padding: 0.5em 0.8em;
    border: 1px solid #b6b6b6;
    background-color: transparent;
    font-size: 0.875em;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
  }
  .cf7-form-wrap .wpcf7-form-control.wpcf7-text:focus,
  .cf7-form-wrap .wpcf7-form-control.wpcf7-email:focus {
    border-color: var(--color-main);
  }
  /* テキストエリア */
  .cf7-form-wrap .wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #b6b6b6;
    background-color: transparent;
    font-size: 0.875em;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
  }
  .cf7-form-wrap .wpcf7-form-control.wpcf7-textarea:focus {
    border-color: var(--color-main);
  }
  /* ラジオボタン */
  .cf7-radio-group .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .cf7-radio-group .wpcf7-list-item {
    margin: 0;
  }
  .cf7-radio-group .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
  }
  .cf7-radio-group input[type="radio"] {
    accent-color: var(--color-main);
    width: 1em;
    height: 1em;
    cursor: pointer;
  }
  /* チェックボックス（同意） */
  .cf7-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.75em;

    .wpcf7-list-item {
      margin: 0;
    }
    .wpcf7-form-control-wrap {
      vertical-align: middle;
    }
  }
  .cf7-checkbox-group .wpcf7-acceptance {
    display: inline-block;
  }
  .cf7-checkbox-group input[type="checkbox"] {
    accent-color: var(--color-main);
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
  }
  /* 送信ボタン */
  .cf7-submit-wrap {
    text-align: center;
    margin-top: 3em;
  }
  .cf7-form-wrap .wpcf7-submit {
    background-color: var(--color-main);
    color: #fff;
    border: 1px solid var(--color-main);
    padding: 0.625em 6em;
    font-family: var(--ff-mincho);
    font-weight: 500;
    border-radius: 0.3em;
    cursor: pointer;
    transition:
      background-color 0.3s,
      color 0.3s;
  }
  .cf7-form-wrap .wpcf7-submit:hover {
    color: var(--color-main);
    background-color: var(--color-light);
  }
  .cf7-form-wrap .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  /* バリデーションエラー */
  .cf7-form-wrap .wpcf7-not-valid-tip {
    color: var(--color-main);
    font-size: 0.75em;
    margin-top: 0.25em;
  }
  .cf7-form-wrap .wpcf7-response-output {
    margin-top: 1.25em;
    padding: 0.75em 1em;
    border-radius: 0.2em;
    font-size: 0.875em;
    text-align: center;
  }
  /* スピナー */
  .wpcf7-spinner {
    display: block;
  }
}

/* ----- FAQ（タブ＋アコーディオン） ----- */
.p-contact__faq {
  font-size: 1rem;

  .swell-block-tab {
    margin-inline: auto;
    max-width: 800px;
    width: 100%;

    /* タブボタン */
    .c-tabList {
      .c-tabList__button {
        font-size: 1em;
        font-family: var(--ff-mincho);
        font-weight: 500;
        background-color: transparent;
        border: 1px solid var(--color-main);
        color: var(--color-main);
        opacity: 1;
      }
      .c-tabList__button[aria-selected="true"] {
        color: var(--color-light);
        background-color: var(--color-main);
      }
    }

    /* タブコンテンツ（Q&Aアコーディオン） */
    .c-tabBody {
      margin: 4em 0;
      padding: 0;
      font-size: 1em;
      border: none;

      .swell-block-accordion__item {
        border: none;
      }
      .swell-block-accordion__title {
        margin-top: 2.25em;
        padding: 0 2em 1.5em;
        font-family: var(--ff-mincho);
        font-weight: 500;
        border-bottom: 1px solid currentcolor;

        /* "Q." プレフィックス */
        &::before {
          align-self: start;
          content: "Q.";
          margin-right: 0.2em;
          font-family: var(--ff-gothic);
          font-size: 1.5em;
          font-weight: 400;
          color: var(--color-main);
          line-height: 1;
        }
        .c-switchIconBtn {
          color: var(--color-main);
        }
      }
      .swell-block-accordion__body {
        margin: 0;
        padding: 1.5em 4em 0;
        border: none;
      }
    }
  }
}

/* ============================================================
   Project / Page: アーカイブ共通
   ============================================================ */

.archive {
  /* タームタイトル */
  .c-pageTitle__term {
    margin-top: 1em;
    font-family: var(--ff-mincho);
    color: var(--color-font);
    opacity: 0.75;
  }
  /* タームの説明文エリア */
  .p-termContent {
    padding-block: var(--sec-pad-sm);
  }
}

/* ============================================================
   Utility
   - 汎用クラス
   ============================================================ */

/* モーダル展開元要素を非表示にする */
.u-hidden-modal-source {
  display: none !important;
}