/*
█████████████████████████████████████████████████████████████
  基本設定
█████████████████████████████████████████████████████████████
*/
/* Base Typography */
:root {
    --font-size-base: 16px;
    --line-height-base: 1.6875;
    --font-family-mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Hiragino Mincho",
        "Yu Mincho", YuMincho, "MS PMincho", "Times New Roman", Times, serif;

    /* Theme Colors */
    --color-primary: #2b3f6b;
    --color-secondary: #ff8c42;
    --color-tertiary: #d4a574;
    --color-accent: #ac9e7f; /* for Service headings */
    --color-text: #222222;
}

html {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-mincho);
    font-feature-settings: "palt";
    font-size: 1rem;
    letter-spacing: 0.125em;
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: #fff;
}

/*
█████████████████████████████████████████████████████████████
  基本の要素スタイル
█████████████████████████████████████████████████████████████
*/
/* Typographic rhythm */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 0.6em;
}

p {
    margin: 0 0 1em;
}

small {
    font-size: 0.875em;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Links */
a {
    color: inherit;
    text-decoration: underline;
}
a:focus {
    outline: 2px solid #94c1ff;
    outline-offset: 2px;
}

/*
█████████████████████████████████████████████████████████████
  ユーティリティクラス
█████████████████████████████████████████████████████████████
*/
.text-center {
    text-align: center;
}

.font-bold {
    font-weight: bold;
}

/*
█████████████████████████████████████████████████████████████
  ヘッダー
█████████████████████████████████████████████████████████████
*/
/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 24px 32px;
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header--visible {
    transform: translateY(0);
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.header__logo {
    color: var(--color-primary);
    text-decoration: none;
}

.header__hamburger {
    display: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 101;
}

.header__hamburger-bar {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-primary);
    margin: 6px 0;
    transition: all 0.3s;
}

.header__nav {
    /* Styles for PC */
}

.header__navList {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__navLink {
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.header__navLink:hover {
    color: var(--color-primary);
}

.header__navLink--button {
    background-color: var(--color-secondary);
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
}

/* SP Styles */
@media (max-width: 899px) {
    .header__hamburger {
        display: block;
    }

    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        z-index: 100;
    }

    .header__nav.is-open {
        opacity: 1;
        visibility: visible;
    }

    .header__navList {
        flex-direction: column;
        gap: 32px;
    }

    .header__navLink {
        font-size: 20px;
    }

    .header.is-open .header__hamburger-bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .header.is-open .header__hamburger-bar:nth-child(2) {
        opacity: 0;
    }
    .header.is-open .header__hamburger-bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/*
█████████████████████████████████████████████████████████████
  アクセシビリティ
█████████████████████████████████████████████████████████████
*/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-to-content {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-100%);
    background-color: var(--color-secondary);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    transition: transform 0.3s;
}

.skip-to-content:focus {
    transform: translateY(0);
}

/*
█████████████████████████████████████████████████████████████
  ヒーローセクション
█████████████████████████████████████████████████████████████
*/
/* Hero Section */
.hero {
    background-image: url(../images/main-bg.jpg);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 200px 16px;
    text-align: center;
}

.hero__lead {
    font-size: 50px;
    line-height: 1.75;
    font-weight: 700;
}

@media (max-width: 768px) {
    /* 768px以下のスタイルをここに記述 */
    .hero__lead {
        font-size: 24px;
    }
}

/*
█████████████████████████████████████████████████████████████
  リードセクション
█████████████████████████████████████████████████████████████
*/
/* Lead Section */
.lead {
    padding: 96px 16px 80px;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

.lead__text {
    margin-bottom: 16px;
    font-size: 21px;
    line-height: 2;
}

.lead__text br {
    display: none;
}

.lead__last {
    margin-top: 48px;
    font-size: 21px;
    line-height: 2;
}

.lead__cta {
    margin-top: 48px;
    line-height: 2;
}

.lead__ctaLink {
    display: inline-block;
    max-width: 514px;
    width: 100%;
    background-color: var(--color-secondary);
    color: #ffffff;
    padding: 16px 64px;
    border-radius: 16px;
    text-decoration: none;
    font-size: 21px;
    line-height: 1.8;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.lead__ctaLink:hover {
    background-color: #e67a2e;
}

@media (max-width: 768px) {
    /* 768px以下のスタイルをここに記述 */
    .lead {
        padding: 48px 16px 48px;
    }
    .lead__text,
    .lead__last {
        font-size: 18px;
        line-height: 2;
    }

    .lead__text br {
        display: block;
    }
}

/*
█████████████████████████████████████████████████████████████
  メッセージセクション
█████████████████████████████████████████████████████████████
*/
/* Message Section */
.message {
    padding: 96px 16px 80px;
    background-color: var(--color-primary);
    color: #fff;
}

.message__container {
    max-width: 1086px;
    margin: 84px auto 0;
}

.message__lead {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 24px;
}

.message__subLead {
    font-size: 18px;
    text-align: center;
    line-height: 1.8;
    margin-bottom: 80px;
}

.message__row {
    display: flex;
    align-items: flex-start;
    gap: 96px;
}

.message__row:not(:last-child) {
    margin-bottom: 96px;
}

.message__row--reverse {
    flex-direction: row-reverse;
}

.message__img {
    flex: 1;
    max-width: 50%;
}

.message__img img {
    width: 100%;
    height: auto;
}

.message__content {
    flex: 1;
}

.message__title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.75;
    margin: 48px 0;
}

.message__text {
    font-size: 16px;
    line-height: 2;
}

.message__text--left {
    text-align: left;
}

.message__summary {
    max-width: 720px;
    margin: 80px auto 0;
    text-align: center;
}

@media (max-width: 768px) {
    .message__lead {
        font-size: 22px;
    }

    .message__row,
    .message__row--reverse {
        flex-direction: column;
        gap: 32px;
    }

    .message__img {
        max-width: 100%;
    }

    .message__title {
        margin: 24px 0 24px;
    }

    .message__title br {
        display: none;
    }

    .message__text {
        font-size: 16px;
        text-align: justify;
    }

    .message__row:not(:last-child) {
        margin-bottom: 48px;
    }

    .message__summary {
        margin-top: 24px;
        margin-bottom: 40px;
    }
}

/*
█████████████████████████████████████████████████████████████
  プロフィールセクション
█████████████████████████████████████████████████████████████
*/
/* Profile Section */
.profile {
    max-width: 1086px;
    margin: 0 auto 0;
    padding: 144px 16px; /* top/bottom 144px */
}

.profile__row {
    display: flex;
    gap: 120px;
    justify-content: center;
    align-items: center;
    margin-top: 108px;
}

.profile__img {
    flex: 1 0 375px;
    max-width: 420px;
    text-align: center;
}

.profile__img img {
    width: 100%;
    height: auto;
}

.profile__body {
    padding-top: 24px;
    flex: 1;
    font-size: 16px;
    line-height: 2;
}

.profile__name {
    font-size: 32px;
    line-height: 1;
    margin: 0 0 48px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .profile {
        padding: 48px 16px;
    }
    .profile__row {
        flex-direction: column;
        gap: 32px;
        margin-top: 48px;
    }
}
/*
█████████████████████████████████████████████████████████████
  セクション共通ヘッダー
█████████████████████████████████████████████████████████████
*/
/* Section Header */
.section-header {
    text-align: center;
    margin: 0 0 2.5rem;
}

.section-header__title {
    /* Japanese text */
    font-size: 16px;
    line-height: var(--line-height-base);
    margin: 0 0 26px; /* top & bottom 26px */
    font-weight: 700;
}

.section-header__title--white {
    color: #fff;
}

.section-header__title::before {
    /* English text from data-en attribute */
    content: attr(data-en);
    display: block;
    font-size: 64px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.section-header::after {
    content: "";
    display: block;
    width: 80px;
    border-bottom: 2px solid var(--color-primary);
    margin: 0 auto;
}

@media (max-width: 900px) {
    .section-header__title::before {
        font-size: 40px;
    }
}

/*
█████████████████████████████████████████████████████████████
  サービスセクション
█████████████████████████████████████████████████████████████
*/
/* Service Section */
.service {
    padding: 120px 16px 96px;
    max-width: 1260px; /* wrapper width per spec */
    margin: 0 auto;
    background-color: #fcfcfc;
}

.service__items {
    list-style: none;
    counter-reset: service-index;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns by default */
    gap: 80px 108px; /* row-gap 108, column-gap 160 */
    padding: 0;
    margin: 0;
    justify-items: center; /* center items in grid */
}

.service__item {
    text-align: center;
}

.service__item::before {
    counter-increment: service-index;
    content: counter(service-index, decimal-leading-zero);
    display: block;
    font-size: 64px; /* number size */
    line-height: 1.1;
    font-weight: 800;
    color: rgba(172, 158, 127, 0.35); /* pale accent */
    margin-bottom: 32px; /* space between number and heading */
}

/* Service typography */
.service__title {
    font-size: 32px; /* heading */
    line-height: 1.3;
    color: var(--color-accent);
    margin: 0 0 32px; /* space to text */
}

.service__text {
    font-size: 18px; /* text */
    line-height: 1.8; /* per spec */
    margin: 0;
    word-break: keep-all;
}

.service__list {
    margin-top: 80px;
}

/* Service note */
.service__note {
    margin-top: 80px;
    background: #faf8f3;
    padding: 56px 72px;
    border-radius: 8px;
    max-width: 868px;
    margin-left: auto;
    margin-right: auto;
}

.service__noteTitle {
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 24px;
    font-weight: 700;
    color: var(--color-accent);
    text-align: center;
}

.service__noteTitle span {
    font-size: 18px;
}

.service__noteText {
    font-size: 18px;
    line-height: 32px; /* 32px equivalent */
    margin: 0;
}

@media (max-width: 1200px) {
    .service__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 80px 64px;
    }
}
@media (max-width: 900px) {
    .service {
        padding: 48px 16px 48px;
    }

    .service__items {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .service__item::before {
        margin-bottom: 24px;
        font-size: 48px; /* number size */
    }

    .service__list {
        margin-top: 56px;
    }

    .service__title {
        font-size: 25px; /* heading */
        line-height: 1.3;
        color: var(--color-accent);
        margin: 0 0 24px; /* space to text */
    }

    .service__text {
        word-break: break-all;
        font-size: 16px;
        text-align: justify;
    }

    .service__text br {
        display: none;
    }

    /* Service note */
    .service__note {
        margin-top: 40px;
        padding: 32px 24px;
    }

    .service__noteTitle {
        font-size: 21px;
    }
    .service__noteTitle span {
        display: block;
    }

    .service__noteText {
        font-size: 16px;
    }
}

/*
█████████████████████████████████████████████████████████████
  プロフィールセクション（補足）
█████████████████████████████████████████████████████████████
*/
/* Profile text paragraphs */
.profile__text {
    margin: 2em 0 0;
}

/*
█████████████████████████████████████████████████████████████
  レイアウトユーティリティ
█████████████████████████████████████████████████████████████
*/
/* Layout Utilities */
.container {
    max-width: 1086px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    /* 768px以下のスタイルをここに記述 */
    .profile__text {
        text-align: justify;
    }
}

/*
█████████████████████████████████████████████████████████████
  おすすめセクション
█████████████████████████████████████████████████████████████
*/
.recommend {
    background-color: var(--color-primary);
    padding: 144px 16px 80px;
}

.recommend .section-header__title {
    color: #fff;
}

.recommend .section-header::after {
    border-bottom-color: #fff;
}

.recommend__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    max-width: 1086px;
    margin: 64px auto 0;
}

.recommend__item {
    background: #f6f4ee;
    border-radius: 8px;
    overflow: hidden; /* 画像の角を丸めるため */
}

.recommend__img {
    width: 100%;
    height: auto;
}
.recommend__content {
    padding: 24px 20px;
}

.recommend__title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 20px;
    color: var(--color-primary);
}

.recommend__list {
    list-style: none;
    padding: 0 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
}

.recommend__list-item {
    position: relative;
    padding-left: 2em; /* アイコン分のスペース */
}

.recommend__list-item:not(:last-child) {
    margin-bottom: 1em;
}

.recommend__list-item::before {
    content: "";
    background-image: url(../images/icon-check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 6px;
}

@media (max-width: 1000px) {
    .recommend {
        padding: 48px 16px 80px;
    }
    .recommend__body {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 32px;
    }
}

/*
█████████████████████████████████████████████████████████████
  お客様の声セクション
█████████████████████████████████████████████████████████████
*/
/* Voice Section */
.voice {
    padding: 80px 16px 112px;
    background-color: #ffffff;
}

.voice__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 80px;
    max-width: 968px;
    margin: 56px auto 0;
}

.voice__card {
    background: #faf8f3;
    border-radius: 8px;
    padding: 32px 20px;
}

.voice__cardHead {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: solid 1px #222;
}

.voice__quote {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 24px;
    text-align: center;
}

.voice__author {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0;
    font-weight: 500;
}

.voice__text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin: 0;
    padding: 0 20px;
    text-align: justify;
}

@media (max-width: 900px) {
    .voice {
        padding: 48px 16px 56px;
    }
    .voice__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .voice__text {
        padding: 0;
    }
}

/*
█████████████████████████████████████████████████████████████
  FAQセクション
█████████████████████████████████████████████████████████████
*/
/* FAQ Section */
.faq {
    padding: 112px 16px 80px;
    background-color: #ffffff;
}

.faq__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 80px;
    max-width: 1140px;
    margin: 112px auto 0;
}

.faq__item {
    border: 1px solid #faf8f3;
    border-radius: 8px;
    overflow: hidden;
}

.faq__q {
    position: relative;
    padding: 24px 24px 24px 56px;
    background: #faf8f3;
    cursor: pointer;
    list-style: none; /* Safariのマーカーを消す */
}

.faq__q::before {
    content: "Q.";
    position: absolute;
    left: 24px;
    top: 38px;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: bold;
    color: var(--color-accent);
}

.faq__q::-webkit-details-marker {
    display: none; /* Chrome/Edgeのマーカーを消す */
}

.faq__q::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: var(--color-accent);
}

.faq__item[open] > .faq__q::after {
    content: "-";
}

.faq__a {
    position: relative;
    padding: 24px 24px 24px 56px;
    background: #ffffff;
}

.faq__a::before {
    content: "A.";
    position: absolute;
    left: 24px;
    top: 21px;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-primary);
}

.faq__a p {
    text-align: justify;
}

@media (max-width: 900px) {
    .faq {
        padding: 64px 16px 64px;
        background-color: #ffffff;
    }
    .faq__list {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 24px;
    }
    .faq__q {
        padding: 24px 32px 24px 56px;
    }
    .faq__q::before {
        top: 36px;
    }

    .faq__q::after {
        right: 12px;
    }

    .faq__a p:last-of-type {
        margin-bottom: 0;
    }
}

/*
█████████████████████████████████████████████████████████████
  お問い合わせセクション
█████████████████████████████████████████████████████████████
*/
/* Contact Section */
.contact {
    padding: 88px 16px 144px;
    background-color: #faf8f3;
}

.contact__intro {
    text-align: center;
    margin: 48px 0 64px;
}

.contact__lead {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 24px;
}

.contact__leadSub {
    font-size: 18px;
    color: #666;
    margin: 0;
}

.contact__formWrap {
    max-width: 696px;
    margin: 40px auto 0;
}

.contact__form {
    display: flex;
    flex-direction: column;
}

.contact__field {
    display: flex;
    flex-direction: row;
    align-items: center; /* デフォルトは中央揃え */
    margin-top: 32px;
}

.contact__field:last-of-type {
    margin-top: 0;
}

.contact__field--align-top {
    align-items: flex-start; /* 修飾子で上揃え */
    margin-top: 48px;
}

.contact__label {
    flex: 0 0 200px;
    text-align: left; /* 左寄せ */
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

/* 枠線の原因だったfieldsetのスタイル指定を削除 */

.contact__input,
.contact__textarea {
    width: 100%;
    padding: 11px 16px; /* paddingを調整 */
    border: 1px solid #eaeaea; /* 枠線を柔らかく */
    background-color: #ffffff; /* 背景色を明示 */
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.contact__input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.contact__checkboxLabel {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--color-text);
    cursor: pointer;
}

.contact__radioGroup {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.contact__radio-label {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 16px;
    color: var(--color-text);
    cursor: pointer;
}

.contact__radio-input {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
}

.contact__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.contact__checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
}

.contact__actions {
    margin-top: 72px;
    text-align: center;
}

.contact__submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: var(--color-secondary);
    color: #ffffff;
    max-width: 512px;
    width: 100%;
    border: none;
    padding: 24px 48px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact__submit:hover {
    background: #e67a2e;
}

.contact__control {
    flex: 1 1 auto;
}
.contact__privacy {
    margin-top: 32px;
    text-align: center;
}

/*
█████████████████████████████████████████████████████████████
  フォームパーツ（ラジオボタン）
█████████████████████████████████████████████████████████████
*/
/* Radio Group Block */
.radio-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radio-group:not(:last-child) {
    margin-bottom: 24px; /* ラジオボタン間の余白を調整 */
}

.radio-group__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-group__label {
    position: relative;
    padding-left: 36px;
    cursor: pointer;
    line-height: 1.5;
}

.radio-group__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.2s;
}

.radio-group__input:checked + .radio-group__label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.radio-group__input:checked + .radio-group__label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
}

@media (max-width: 900px) {
    .contact {
        padding: 48px 16px 60px;
    }
    .contact__actions {
        margin-top: 40px;
    }
    .contact__field {
        display: block;
    }

    .contact__intro {
        margin: 24px 0 24px;
    }

    .contact__formWrap {
        margin-top: 24px;
    }

    .contact__control {
        margin-top: 16px;
    }
    .radio-group {
        margin-bottom: 12px;
    }

    .radio-group:not(:last-child) {
        margin-bottom: 16px; /* ラジオボタン間の余白を調整 */
    }
}

/*
█████████████████████████████████████████████████████████████
  料金プランセクション
█████████████████████████████████████████████████████████████
*/
/* Plan Section */
.plan {
    padding: 80px 16px 72px;
    background-color: var(--color-primary);
}

.plan__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 96px;
    max-width: 1080px;
    margin: 96px auto 0;
}

.plan__card {
    background: #ffffff;
    border-radius: 12px;
    padding: 56px 32px 48px;
}
.plan__heading {
    text-align: center;
}
.plan__title {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: var(--color-tertiary);
    padding: 16px 20px;
    border-radius: 999px;
    margin-bottom: 32px;
}

.plan__price {
    margin-bottom: 32px;
    color: var(--color-text);
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.plan__price span {
    font-size: 20px;
    font-weight: 600;
}

.plan__note {
    font-size: 14px;
    color: #b6b6b6;
    text-align: center;
    margin-bottom: 32px;
}

.plan__features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    flex-grow: 1;
}

.plan__feature {
    font-size: 16px;
    color: var(--color-text);
    padding-left: 52px;
    position: relative;
    margin: 0;
}

.plan__feature:not(:last-of-type) {
    margin-bottom: 32px;
}

.plan__feature::before {
    content: "";
    background-image: url(../images/icon-check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 900px) {
    .plan__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 16px;
    }

    .plan__price span:first-of-type {
        display: inline-block;
        margin-bottom: 16px;
    }

    .plan__feature::before {
        top: 4px;
        width: 20px;
        height: 20px;
    }
    .plan__feature {
        padding-left: 40px;
    }
    .plan__title {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .plan__feature:not(:last-of-type) {
        margin-bottom: 16px;
    }
}

/*
█████████████████████████████████████████████████████████████
  フッター
█████████████████████████████████████████████████████████████
*/
.footer {
    padding: 48px 0 40px;
    background-color: var(--color-primary);
    color: #fff;
    text-align: center;
}

.footer__nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.footer__navLink {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.footer__navLink:hover {
    text-decoration: underline;
}

.footer__copy {
    margin: 0;
}

@media (max-width: 768px) {
    .footer__nav {
        flex-direction: column;
        gap: 16px;
    }
    /* 768px以下のスタイルをここに記述 */
}

.section-header--inverted::after {
    border-bottom-color: #ffffff;
}

/*
█████████████████████████████████████████████████████████████
  お問い合わせセクション（補足）
█████████████████████████████████████████████████████████████
*/

/*
█████████████████████████████████████████████████████████████
  フォームパーツ（チェックボックス）
█████████████████████████████████████████████████████████████
*/
/* Checkbox Block */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox__label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 1.5;
}

.checkbox__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s;
}

.checkbox__input:checked + .checkbox__label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox__input:checked + .checkbox__label::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(45deg);
}

/*
█████████████████████████████████████████████████████████████
  下層ページ用スタイル
█████████████████████████████████████████████████████████████
*/
.container--sm {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}

.page-section {
    padding: 96px 0;
}

.page-content {
    margin-top: 64px;
}

.page-content h2 {
    font-size: 24px;
    margin: 48px 0 24px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
}

.page-content ol,
.page-content ul {
    padding-left: 2em;
    margin-bottom: 1em;
}

.page-content li {
    margin-bottom: 0.5em;
}

@media (max-width: 768px) {
    .page-section {
        padding: 48px 0;
    }
    .page-content h2 {
        font-size: 20px;
    }
}