/* =====================
  CSS Variables & Design System
====================== */
:root {
    /* Colors */
    --color-primary: #0072bc;
    --color-primary-dark: #005b9f;
    --color-primary-light: #006ab1;
    --color-secondary: #40B22A;
    --color-secondary-dark: #0AA5AE;
    --color-accent: #ffe082;
    --color-text-primary: #2e3e48;
    --color-text-secondary: #222;
    --color-text-muted: #555;
    --color-background: #fff;
    --color-background-light: #f5f5f5;
    --color-background-gray: #e9ecef;
    --color-background-blue: #f7fafd;
    --color-background-yellow: #FFF9EA;
    --color-border: #a9acae;
    --color-card-blue: #5c7fa6;
    /* Typography */
    --font-family-primary: 'Noto Sans JP', 'Segoe UI', Arial, sans-serif;
    --font-family-numbers: 'DIN2014-Demi', 'Noto Sans JP', sans-serif;
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    /* Layout */
    --container-max-width: 1100px;
    --border-radius: 1.6rem;
    --border-radius-large: 2.4rem;
    --border-radius-round: 50%;
    /* Shadows */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 24px rgba(0, 0, 0, 0.08);
    /* Text stroke for white text on colored backgrounds */
    --text-stroke: 0px 0px 1px #fff,
        -1px -1px 1px #fff,
        1px -1px 1px #fff,
        -1px 1px 1px #fff,
        1px 1px 1px #fff,
        -2px 0px 1px #fff,
        2px 0px 1px #fff,
        0px -2px 1px #fff,
        0px 2px 1px #fff,
        -2px -2px 1px #fff,
        2px -2px 1px #fff,
        -2px 2px 1px #fff,
        2px 2px 1px #fff;
    /* Responsive breakpoints */
    --breakpoint-sm: 620px;
    --breakpoint-md: 730px;
    --breakpoint-lg: 900px;
}

/* =====================
  Reset & Base Styles
====================== */
* {
    box-sizing: border-box;
}

html {
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-primary);
    font-weight: 500;
    background: var(--color-background);
    color: var(--color-text-primary);
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* =====================
  Utility Classes
====================== */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    overflow: hidden;
}

.expand-bg { margin: 0 calc(var(--spacing-lg) * -1); }

.d-none { display: none !important; }

.d-block { display: block !important; }

.flex { display: flex !important; }

.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-column { flex-direction: column !important; }

.flex-row { flex-direction: row !important; }

.text-center { text-align: center; }

.text-highlight { color: var(--color-primary-light); }

.text-vertical {
    writing-mode: vertical-rl;
    font-size: 2.6rem;
}

.text-number { font-family: var(--font-family-numbers); }

.underbar { position: relative; }

.underbar::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3rem;
    background-color: var(--color-border);
    transform: skewX(150deg);
    z-index: -1;
}

.w-100 { width: 100%; }

/* =====================
  Header
====================== */

.header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 7.5rem;
}

.header__logo {
    height: 3.3rem;
    width: auto;
}

.header__description {
    font-size: 2rem;
    font-weight: normal;
    color: #191919;
}

/* =====================
  Hero Section
====================== */
.hero {
    text-align: center;
    margin: 0 -2.5rem;
    margin-bottom: 16rem;
}

.hero__top {
    position: relative;
    aspect-ratio: 15/18;
    padding-top: 6.8rem;
}

.hero__top::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #e5f0f2;
    z-index: -1;
}

.hero__subtitle {
    font-size: 5.4rem;
    margin-bottom: 3rem;
    font-weight: bold;
}

.hero__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
}

.hero__caption {
    position: relative;
    font-size: 4.1rem;
    letter-spacing: 0;
    line-height: 4.1rem;
    color: var(--color-text-primary);
    transform: rotateZ(351deg);
    width: 9.5rem;
    height: fit-content;
}

.hero__caption::before,
.hero__caption::after {
    content: '';
    width: 100%;
    position: absolute;
    border: 0.3rem solid var(--color-primary-light);
}

.hero__caption::before {
    left: 35%;
    transform: rotate(28deg);
    top: -30%;
}

.hero__caption::after {
    left: 10%;
    transform: rotate(335deg);
    bottom: -30%;
}

.hero__caption-text {
    writing-mode: vertical-rl;
    text-shadow: var(--text-stroke);
}

.hero__caption-text--primary {
    color: var(--color-primary-light);
    transform: translateY(30%);
}

.hero__caption-text--secondary {
    transform: translateY(-10%);
}

.hero__caption-dots::before,
.hero__caption-dots::after {
    position: absolute;
    content: '';
    width: 1rem;
    height: 1rem;
    top: 5%;
    right: -20%;
    background: var(--color-primary-light);
    border-radius: var(--border-radius-round);
}

.hero__caption-dots::after {
    top: 35%;
}

.hero__title {
    text-align: start;
    font-size: 11rem;
    letter-spacing: 1px;
    line-height: 12rem;
    margin: 0 0 0 1rem;
    text-shadow: var(--text-stroke);
    white-space: nowrap;
}

.hero__title-small {
    font-size: 9.4rem;
}

.hero__title-highlight {
    position: relative;
    font-size: 13.2rem;
    letter-spacing: -1rem;
    color: var(--color-primary-light);
}

.hero__title-mark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(21deg);
    margin-left: -4rem;
    font-size: 16rem;
}

.hero__visual {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 185%;
    z-index: -1;
}

.hero__visual::after {
    content: "";
    position: absolute;
    height: 5rem;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, transparent 20%, #e5f0f2);
}

.hero__bottom {
    position: relative;
    padding: var(--spacing-xxl) 0;
}

.hero__bottom::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%, -85%);
    width: 100%;
    background: url('assets/building.png');
    background-size: cover;
    aspect-ratio: 750/235;
}

.hero__bottom::after {
    content: '';
    position: absolute;
    inset: 0;
    height: 185%;
    background: linear-gradient(180deg, #267bb3 20%, #053e80 100%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
    z-index: -1;
}

/* =====================
  Feature Cards Component (Reusable)
====================== */
.feature-grid {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
    width: 100%;
}

.feature-card {
    position: relative;
    width: 30%;
    aspect-ratio: 1;
    background: linear-gradient(180deg, #88bbf9, #3cfec8);
    border-radius: var(--border-radius-round);
    box-shadow: var(--shadow-light);
    text-align: center;
}

.feature-card__inner {
    content: '';
    position: absolute;
    inset: 3%;
    background: var(--color-background);
    border-radius: var(--border-radius-round);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: bold;
}

.feature-card__inner .text-number {
    line-height: 0.85;
    height: 0.72em;
}

.feature-card__inner.arrow-down::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 3rem;
    height: 3rem;
    background: var(--color-primary-light);
    clip-path: polygon(50% 50%, 0 0, 100% 0);
}

.feature-card>* {
    z-index: 1;
    line-height: 1.2;
}

.feature-card__number {
    position: absolute;
    font-size: 3rem;
    inset: 0;
    height: 22%;
    background: var(--color-primary-light);
    color: var(--color-background);
    font-family: var(--font-family-numbers);
    align-content: center;
}

/* =====================
  Info Section (custom)
====================== */
.info-section {
    position: relative;
    margin-bottom: 9rem;
}

.info-section .feature-grid::before {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: url('assets/building.png');
    background-size: cover;
    aspect-ratio: 750/235;
    opacity: 0.3;
    z-index: -2;
}

.info-section .feature-grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(180deg, #c1d7e8 0%, #ffffff 100%);
    z-index: -1;
}

.info-section__bg {
    padding: 6rem 0 7rem;
}

.info-section__bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50rem;
    background: linear-gradient(180deg, #3386c7 0%, #1a5d99 100%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
    z-index: -1;
}

.info-section__maintext {
    color: #fff;
    font-size: 4.3rem;
    text-align: center;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 7.5rem;
    letter-spacing: 0.2rem;
}

.info-section__box {
    position: relative;
    background: var(--color-background);
    opacity: 0.812;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 5rem 2rem;
    margin: 0 auto;
    width: 85%;
    max-width: 70rem;
    min-height: 12rem;
    text-align: center;
    font-size: 4.8rem;
    font-weight: bold;
    z-index: 1;
}

.info-section__box-text {
    position: relative;
    z-index: 2;
}

.info-section__box-corner {
    position: absolute;
    width: 3.2rem;
    height: 3.2rem;
    border: none;
    z-index: 3;
}

.info-section__box-corner--tl,
.info-section__box-corner--br {
    background: url("assets/conner-icon.svg");
    background-size: contain;
}

.info-section__box-corner--tl {
    top: 1rem;
    left: 1rem;
}

.info-section__box-corner--br {
    transform: rotate(180deg);
    bottom: 1rem;
    right: 1rem;
}

/* =====================
  Info Section Detail Block
====================== */
.info-detail {
    padding-top: 9rem;
    text-align: center;
    position: relative;
}

.info-detail__header {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #0072bc 60%, #3cfec8 100%);
    border-radius: 0 5rem 5rem 0;
    color: #fff;
    padding: 0.8rem 2.5rem;
    margin-bottom: 6.5rem;
    width: 95%;
    height: 7.3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.info-detail__number {
    font-size: 5rem;
    font-family: var(--font-family-numbers);
    line-height: 1;
    height: 0.8em;
    margin-right: 1.2rem;
}

.info-detail__title {
    font-size: 4rem;
    letter-spacing: 0.1rem;
    white-space: nowrap;
}

.info-detail__desc {
    font-size: 3.4rem;
    margin-top: 1.5rem;
    padding: 0 var(--spacing-lg);
}

.info-detail__desc img {
    width: 100%;
    margin: 7.5rem 0 8rem;
}

/* =====================
  Info Reasons List
====================== */
.info-reasons {
    margin: 3.5rem auto 0 auto;
    max-width: 900px;
    text-align: left;
    padding: 0 var(--spacing-lg);
}

.info-reasons__title {
    font-size: 3.2rem;
    margin-bottom: 2.2rem;
    margin-left: 0.5rem;
}

.info-reasons__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-reasons__item {
    display: flex;
    align-items: center;
    background: #e3f0fa;
    font-size: 2.8rem;
    color: #6a7a8c;
    margin-bottom: 1.5rem;
    padding: 2.2rem 2.5rem 2.2rem 2.5rem;
    min-height: 5.5rem;
    height: 10.7rem;
}

.info-reasons__icon {
    content: url('assets/check-icon.png');
    width: 4.1rem;
    margin-right: 2.2rem;
}

/* =====================
  Contact Section
====================== */
.contact {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-xxl) 0;
    font-weight: bold;
}

.contact__card {
    position: relative;
    background: var(--color-background);
    border: 0.3rem solid var(--color-secondary-dark);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    padding: 4rem 3rem;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.contact__image {
    background: url('assets/lady.png') no-repeat center center;
    background-size: cover;
    background-position-x: 0;
    width: 18.5rem;
    height: 28.7rem;
    position: absolute;
    right: 0;
    top: -10%;
}

.contact__image::after {
    content: '';
    background: linear-gradient(0deg, var(--color-background) 50%, transparent);
    height: 3rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.contact__title {
    font-size: 4rem;
    margin-bottom: 2.5rem;
}

.contact__buttons {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact__button {
    background: var(--color-secondary);
    color: var(--color-background);
    width: 100%;
    height: 13.5rem;
    border-radius: 9rem;
    font-size: 3.8rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.contact__button--form::before {
    content: '';
    background: url('assets/form-icon.svg') no-repeat center center;
    background-size: contain;
    width: 5.4rem;
    aspect-ratio: 54/59;
    margin-right: 1.2rem;
}

.contact__button--phone::before {
    content: '';
    background: url('assets/freecall-icon-w.svg') no-repeat center center;
    background-size: contain;
    width: 7rem;
    aspect-ratio: 70/41;
    margin-right: 1.2rem;
}

.contact__phone-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 3rem;
    line-height: 1.2;
}

.contact__phone-label {
    font-size: 3rem;
}

.contact__phone-hours {
    font-size: 2.4rem;
}

.contact__phone-number {
    font-family: var(--font-family-numbers);
    font-size: 6.5rem;
}

/* =====================
  Problems Section
====================== */
.problems {
    background: linear-gradient(to bottom, var(--color-background) 0%, #b7c7d6 100%);
    padding: 4rem 0 10rem 0;
}

.problems__header {
    text-align: center;
    font-size: 5rem;
    margin-bottom: 2.4rem;
    line-height: 1.5;
}

.problems__highlight {
    font-size: 5.7rem;
    z-index: 1;
}

.problems__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.male .problems__image {
    height: 29.3rem;
    margin: 1.6rem 0 -6rem 3rem;
}

.female .problems__image {
    height: 35.5rem;
    margin: 0 0 -10rem 9rem;
}

.problems__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.problems__intro {
    color: var(--color-background);
    font-size: 3rem;
    border-radius: 100%;
    align-content: center;
    text-align: center;
    width: 43.9rem;
    height: 18.7rem;
}

.male .problems__intro {
    background: #6594b2;
    margin: 0 -9rem -0.5rem;
}

.female .problems__intro {
    background: #8b8375;
    margin: 5rem -10rem 2rem 0;
}

.problems__intro-large {
    font-size: 4rem;
}

.problems__list {
    display: flex;

}

.problems__right {
    margin-left: -2rem;
    margin-top: 3rem;
}

.problems__item {
    position: relative;
    background: url('assets/cloud.png') no-repeat center center;
    background-size: contain;
    font-size: 4rem;
    font-weight: bold;
    padding: 5rem 3.2rem;
    min-width: 18rem;
    width: 36.1rem;
    height: 15.9rem;
    text-align: center;
    -webkit-mask-image: url('assets/cloud.png');
    mask-image: url('assets/cloud.png');
    -webkit-mask-size: cover;
    mask-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.male .problems__item {
    box-shadow: inset 0 0 5rem #44647b;
}

.female .problems__item {
    box-shadow: inset 0 0 5rem #6e6658;
}

/* =====================
  Strengths Section
====================== */
.strengths {
    padding-bottom: 15rem;
}

.strengths__header {
    text-align: center;
    margin-bottom: 4rem;
}

.strengths__title {
    --bg-color: #457ca1;
    background: var(--bg-color);
    color: var(--color-background);
    font-size: 5.5rem;
    line-height: 6.8rem;
    font-weight: bold;
    padding: 3rem 0;
    position: relative;
    margin-bottom: 6rem;
}

.strengths__title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 6.4rem;
    height: 3.2rem;
    background: var(--bg-color);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.strengths__subtitle {
    width: fit-content;
    font-size: 5rem;
    font-weight: bold;
    margin: auto;
    position: relative;
    margin-bottom: 10rem;
    z-index: 1;
}

.strengths__highlight.underbar::before {
    background-color: var(--color-accent);
}

.strengths__highlight--bold {
    font-size: 7.5rem;
}

.strengths__description {
    position: relative;
    font-size: 3.8rem;
    width: fit-content;
    margin: auto;
}

.strengths__description::before,
.strengths__description::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 0.3rem;
    background: var(--color-primary-light);
}

.strengths__description::before {
    left: 0;
    transform: translateX(-3.5rem) rotateZ(-25deg);
}

.strengths__description::after {
    right: 0;
    transform: translateX(3.5rem) rotateZ(25deg);
}

.strengths__main-title {
    font-size: 5.4rem;
    font-weight: bold;
    color: var(--color-primary-light);
}

.strengths__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
    max-width: 90rem;
    margin: 0 auto;
}

.strength-card {
    background: var(--color-background-yellow);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    border: 0.4rem solid var(--color-primary-light);
    aspect-ratio: 335/441.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.strength-card__title {
    width: 100%;
    height: 35%;
    padding-top: 5%;
    font-size: 3rem;
    color: var(--color-background);
    background: var(--color-primary-light);
    margin-bottom: 1.2rem;
    line-height: 1.4;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);
}

.strength-card__title--bold {
    font-size: 4.2rem;
    font-weight: bold;
}

.strength-card__icon {
    margin-bottom: 1.2rem;
}

.strength-card__icon .text-number {
    font-size: 6.7rem;
    color: #1a9fb3;
    font-weight: bold;
    text-shadow: var(--text-stroke);
    margin-left: -5rem;
}

.strength-card__icon .manager-price {
    font-family: var(--font-family-numbers);
    line-height: 1;
    margin-left: -17rem;
    margin-bottom: -10rem;
    font-size: 7.6rem;
    background: #fff9e9;
    text-shadow: none;
}

.strength-card__description {
    font-size: 2.6rem;
    margin-top: auto;
    text-align: start;
    padding: 0 2.5rem 3rem;
}

/* =====================
  Trust Section (安心の実績)
====================== */
.trust-section {
    background: #1957a4;
    padding: 9rem 0 8.5rem 0;
    text-align: center;
}

.trust-section__inner {
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.trust-section__title {
    color: #fff;
    font-size: 4.3rem;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: 10rem;
}

.trust-section__title-main {
    display: block;
    font-size: 6.5rem;
    margin-top: 0.5rem;
}

.trust-section__card {
    background: #fff;
    border-radius: 2.2rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 2rem 5rem 3rem;
    margin: 0 auto;
    position: relative;
    text-align: center;
    z-index: 1;
}

.trust-section__card::before {
    content: '';
    position: absolute;
    top: -7%;
    left: 50%;
    transform: translateX(-50%);
    width: 23.2rem;
    height: 23.2rem;
    background: white;
    border-radius: 50%;
    z-index: -1;
}

.trust-section__icon {
    margin-bottom: 2.5rem;
}

.trust-section__maintext {
    color: var(--color-primary-light);
    font-size: 4.4rem;
    font-weight: bold;
    margin-bottom: 4.4rem;
    letter-spacing: 0.05em;
}

.trust-section__subtext {
    font-size: 2.8rem;
    margin-top: 1.2rem;
    line-height: 1.4;
    text-align: start;
}

.trust-section__card+.trust-section__card {
    margin-top: 4.8rem;
}

/* =====================
  Flow Section
====================== */
.flow-section {
    background: #fff;
    padding: 3rem 0 7rem 0;
    text-align: center;
}

.flow-section__label {
    display: inline-block;
    background: url('assets/flow-label-bg.png') no-repeat center center;
    background-size: contain;
    font-size: 2.6rem;
    padding-top: 1.5rem;
    font-weight: bold;
    height: 8rem;
    aspect-ratio: 248/80;
}

.flow-section__title {
    font-size: 4.3rem;
    font-weight: bold;
    margin-bottom: 1.2rem;
    line-height: 1.4;
}

.flow-section__title-main {
    display: block;
    font-size: 6.5rem;
    margin-top: 0.5rem;
}

.flow-section__steps {
    margin: 0 auto;
    margin-top: 3.5rem;
}

.flow-step {
    height: 10.4rem;
    border-radius: 1.7rem;
    background-color: #fff9ea;
    border: 0.6rem solid #384750;
    font-size: 3.2rem;
    font-weight: bold;
    padding: 2.2rem 1.5rem;
    margin-bottom: 0;
    position: relative;
}

.flow-step:has(.flow-step__icon) {
    display: flex;
    justify-content: center;
    margin: 3rem 0 4.5rem;
    width: calc(100% + 16rem);
    transform: translateX(-8rem);
}

.flow-step--sub {
    height: auto;
    border-radius: 1.7rem;
    background-color: #D4E6F7;
    border: none;
    font-size: 2.7rem;
    margin-bottom: 0;
    padding: 1.5rem 1rem;
    font-weight: 500;
}

.flow-step__icon {
    display: inline-block;
    background: url('assets/flow-step-pickle.png') no-repeat center center;
    background-size: contain;
    width: 5.35rem;
    height: 5.05rem;
    margin-left: 0.5rem;
    margin-right: 1.5rem;
}

.flow-arrow {
    background: url('assets/flow-down-arrow.png') no-repeat center center;
    background-size: contain;
    width: 6.2rem;
    height: 5rem;
    margin: 0 auto;
}

.flow-arrow--small {
    background: #80A3C3;
    clip-path: polygon(50% 90%, 0 0, 100% 0);
    width: 2.36rem;
    height: 1.56rem;
}

.flow-step-group {
    border: 0.5rem dashed #91abca;
    border-radius: 1.7rem;
    padding: 5rem 5.5rem;
    margin: 0 2rem;
}

.flow-step-group__title {
    font-size: 3.5rem;
    color: #347ab9;
    margin-bottom: 5rem;
}

/* ===================== FAQ Section ===================== */
.faq-section {
    background: #dbe7f1;
    padding: 6rem 0 8rem 0;
}

.faq-section__title {
    text-align: center;
    font-size: 5.5rem;
    margin-bottom: 6.5rem;
    letter-spacing: 0.05em;
}

.faq-section__list {
    padding: 0 var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    padding: 0 2rem;
    border-top: 2px solid var(--color-text-primary);
    background: transparent;
}

.faq-item:last-child {
    border-bottom: 2px solid var(--color-text-primary);
    background: transparent;
}

.faq-item__question {
    width: 100%;
    background: none;
    color: var(--color-text-primary);
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 2.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

.faq-item__q {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    text-align: start;
    font-weight: bold;
}

.faq-item__q-label {
    font-size: 4rem;
    line-height: 1;
    margin-right: 1.2rem;
    font-family: var(--font-family-numbers);
}

.faq-item__icon {
    font-size: 8rem;
    width: 3.2rem;
    text-align: center;
    transition: color 0.2s, transform 0.2s;
    font-family: var(--font-family-numbers);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    background: var(--color-background);
    font-size: 2.7rem;
    line-height: 3.7rem;
    padding: 0 2.5rem;
    border-radius: 1rem;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s;
}

.faq-item--active .faq-item__answer {
    max-height: 500px;
    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
    margin-bottom: 2rem;
}

/* =====================
  Voice Section (オーナーさまの声)
====================== */
.voice-section {
    position: relative;
    padding: 8rem 0;
    text-align: center;
}

.voice-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75.8rem;
    background: linear-gradient(180deg, #3386c7 0%, #1a5d99 100%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
    z-index: -1;
}

.voice-section__header {
    font-weight: bold;
    margin-bottom: 4.5rem;
    color: var(--color-background);
}

.voice-section__subtitle {
    font-size: 4.3rem;
    letter-spacing: 0.1em;
}

.voice-section__title {
    font-size: 6.5rem;
    letter-spacing: 0.1em;
}

.voice-section__list {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 3rem;
    padding: 0 3.5rem 4rem;
    overflow-x: scroll;
}

.voice-card {
    display: flex;
    align-items: flex-start;
    width: 76vw;
    max-width: 100rem;
    border-radius: 1.7rem;
    padding: 3.5rem 2.5rem;
    text-align: left;
    gap: 2.5rem;
    box-shadow: 4.114px 5.663px 10.5px rgba(0, 31, 59, 0.32);
    background: rgba(235, 242, 247, 0.902);
}

.voice-card__avatar {
    width: 15.5rem;
    height: 15.5rem;
}

.voice-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.voice-card__content {
    flex: 1;
}

.voice-card__meta {
    font-size: 2.6rem;
    margin-bottom: 1.2rem;
}

.voice-card__headline {
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 1.2rem;
}

.voice-card__text {
    font-size: 2.7rem;
    line-height: 1.7;
}

/* ===================== Contact Form Section ===================== */
.contact-form-section {
    margin-bottom: 18rem;
    text-align: center;
}

.contact-form-section__top {
    position: relative;
}

.contact-form-section__promo-bg,
.contact-form-section__promo-foreground img {
    width: 100%;
}

.contact-form-section__promo-foreground {
    position: relative;
    margin-top: -18%;
    margin-bottom: 10rem;
    padding: 0 var(--spacing-lg);
}

.contact-form-section__promo-box {
    position: absolute;
    top: 22%;
    width: 50%;
    height: 30%;
}

.contact-form-section__promo-sign {
    display: block;
    transform: rotate(345deg);
    color: var(--color-background);
    font-size: 3.5rem;
}

.contact-form-section__promo-sign .underbar::before {
    background-color: #1095a6;
}

.contact-form-section__inner {
    margin: 0 auto;
    padding: 7rem 2.5rem 14.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #DDEBF8;
}

.contact-form-section__lead {
    width: 100%;
}

.contact-form-section__catch {
    font-size: 4.6rem;
    margin-bottom: 10rem;
    line-height: 1.5;
    font-weight: bold;
}

.contact-form-section__arrows {
    margin-bottom: 10rem;
}

.left-right__arrow::before,
.left-right__arrow::after {
    content: "";
    display: inline-block;
    background: url('assets/contact-down-arrow.svg') center no-repeat;
    background-size: contain;
    width: 4.8rem;
    height: 3.8rem;
    margin: 0 1rem;
}

.contact-form-section__arrow-label {
    font-size: 3.8rem;
    color: var(--color-primary-light);
    margin-bottom: 10rem;
    font-weight: bold;
}

.contact-form-section__desc {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 5rem;
}

.contact-form-section__hotline {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: start;
    border-radius: 1.2rem;
    border: 1.5px solid var(--color-primary-light);
    padding: 5rem 0;
    margin-bottom: 9rem;
    box-shadow: 0 2px 8px 0 rgba(51, 134, 199, 0.08);
}

.contact-form-section__hotline-icon {
    display: inline-block;
    background: url('assets/freecall-icon.png') center no-repeat;
    background-size: contain;
    width: 8.4rem;
    height: 4.9rem;
}

.contact-form-section__hotline-number {
    font-size: 7.8rem;
    letter-spacing: 0.1em;
    font-family: var(--font-family-numbers);
    color: var(--color-text-primary);
    white-space: nowrap;
    text-decoration: none;
}

.contact-form-section__hotline-hours {
    font-size: 2.6rem;
    margin-top: 0.2rem;
}

.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
    text-align: start;
    padding: 0 5rem;
}

.contact-form__group {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-form__label {
    font-size: 2.8rem;
    margin-bottom: 0.2rem;
    font-weight: bold;
}

.contact-form__required {
    color: #0ccae1;
    font-size: 2rem;
    margin-left: 0.2rem;
}

.contact-form__input,
.contact-form__textarea {
    width: 100%;
    font-size: 2.8rem;
    padding: 2.8rem;
    border: .2rem solid #cecece;
    border-radius: 0.5rem;
    font-family: inherit;
    outline: none;
    transition: border 0.2s;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    border: 1.5px solid #3386c7;
}

.contact-form__textarea {
    min-height: 7rem;
    resize: vertical;
}

.contact-form__checkboxes {
    flex-direction: column;
}

.contact-form__checkboxes,
.contact-form__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin-bottom: 0.7rem;
}

.contact-form__checkbox-label,
.contact-form__radio-label {
    font-size: 2.8rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
}

.contact-form__checkbox,
.contact-form__radio {
    accent-color: #3386c7;
    width: 4rem;
    height: 4rem;
    margin: 0;
}

.contact-form__group--privacy {
    align-items: flex-start;
    gap: 0.5rem;
}

.contact-form__privacy-note {
    font-size: 2.5rem;
    font-weight: normal;
    margin-left: 4.7rem;
}

.contact-form__privacy-note a {
    color: var(--color-text-primary);
}

.contact-form__submit {
    background: var(--color-secondary);
    color: var(--color-background);
    font-size: 3.8rem;
    border: none;
    width: 62.1rem;
    border-radius: 6.8rem;
    padding: 5rem 0;
    margin: auto;
    margin-top: 1.2rem;
    cursor: pointer;
    box-shadow: 0 2px 8px 0 rgba(62, 209, 111, 0.10);
    transition: background 0.2s, box-shadow 0.2s;
}

/* ===================== Custom Checkbox & Radio ===================== */
.contact-form__checkbox,
.contact-form__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.contact-form__checkbox-label,
.contact-form__radio-label {
    position: relative;
    padding-left: 5.2rem;
    cursor: pointer;
    user-select: none;
    min-height: 4.2rem;
    display: flex;
    align-items: center;
}

/* Custom Checkbox */
.contact-form__checkbox-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;
    height: 4rem;
    border: 2px solid var(--color-primary-light);
    border-radius: 0.7rem;
    background: #fff;
    box-sizing: border-box;
}

.contact-form__checkbox:checked+.contact-form__checkbox-label::before {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.contact-form__checkbox:checked+.contact-form__checkbox-label::after {
    content: '';
    position: absolute;
    left: 1.2rem;
    top: 1.1rem;
    width: 1.5rem;
    height: 2.5rem;
    border: solid #fff;
    border-width: 0 0.5rem 0.5rem 0;
    transform: rotate(45deg);
    opacity: 1;
}

.contact-form__checkbox-label::after {
    content: '';
    position: absolute;
    left: 1.2rem;
    top: 1.1rem;
    width: 1.5rem;
    height: 2.5rem;
    border: solid #fff;
    border-width: 0 0.5rem 0.5rem 0;
    transform: rotate(45deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Custom Radio */
.contact-form__radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;
    height: 4rem;
    border: 2px solid var(--color-primary-light);
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
}

.contact-form__radio:checked+.contact-form__radio-label::before {
    border-color: var(--color-primary-light);
    background: #fff;
}

.contact-form__radio:checked+.contact-form__radio-label::after {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    width: 1.8rem;
    height: 1.8rem;
    background: var(--color-primary-light);
    border-radius: 50%;
    opacity: 1;
}

.contact-form__radio-label::after {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    width: 1.8rem;
    height: 1.8rem;
    background: var(--color-primary-light);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ===================== Footer CTA ===================== */
.footer-cta {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, #EBEFC7 0%, #F7EFDB 100%);
    z-index: 9999;
}

.footer-cta__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    font-size: 2.2rem;
    padding: 1.2rem 0;
}

.footer-cta__arrow {
    font-size: 2.5rem;
    color: #3386c7;
}

.footer-cta__label {
    display: flex;
    font-size: 2.8rem;
}

.footer-cta__actions {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100%;
}

.footer-cta__action {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    font-size: 2.1rem;
    padding: 2.2rem 0 2.2rem 0;
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s, box-shadow 0.2s;
}

.footer-cta__action--form {
    background: var(--color-secondary);
}

.footer-cta__action--phone {
    background: #0186AD;
}

.footer-cta__icon {
    background-size: contain;
    display: block;
}

.footer-cta__icon.email {
    background-image: url("assets/contact-mail-icon.svg");
    width: 4.7rem;
    height: 3.3rem;
}

.footer-cta__icon.phone {
    background-image: url("assets/contact-phone-icon.svg");
    width: 4.2rem;
    height: 6rem;
}

.footer-cta__text {
    text-align: start;
    font-size: 2.8rem;
    line-height: 1.3;
    display: block;
}

.footer-cta__sub {
    font-size: 2.3rem;
    color: #eaf3fa;
    display: block;
}

/* ===================== Footer Main ===================== */
.footer-main {
    text-align: center;
    padding-bottom: 18rem;
}

.footer-main__logo img {
    height: 4.5rem;
    margin-bottom: 6rem;
}

.footer-main__info {
    font-size: 2.8rem;
    margin-bottom: 9rem;
    line-height: 1.7;
    padding: 0 var(--spacing-lg);
}

.footer-main__info .addr {
    width: fit-content;
    font-size: 2.6rem;
    font-weight: normal;
    text-align: start;
    margin: 2rem auto 5rem;
}

.footer-main__links {
    font-weight: normal;
    margin-bottom: 2.2rem;
}

.footer-main__link {
    color: #3386c7;
    font-size: 2.6rem;
    text-decoration: none;
    transition: color 0.2s;
    padding: 0 2rem;
}

.footer-main__link:not(:last-child) {
    border-right: 1px solid;
}

.footer-main__link:hover {
    color: #1a5d99;
}

.footer-main__copyright {
    background: var(--color-text-primary);
    color: var(--color-background);
    font-size: 2.2rem;
    padding: 1.5rem;
    text-align: start;
    font-weight: normal;
}

/* =====================
  Responsive Design
====================== */
@media screen and (max-width: 730px) {
    html {
        font-size: 8px;
    }
}

@media screen and (max-width: 620px) {
    html {
        font-size: 6px;
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 5px;
    }
}

/* =====================
  Custom Checkbox & Radio
====================== */
.contact-form__checkbox,
.contact-form__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.contact-form__checkbox-label,
.contact-form__radio-label {
    position: relative;
    padding-left: 5.2rem;
    cursor: pointer;
    user-select: none;
    min-height: 4.2rem;
    display: flex;
    align-items: center;
    font-weight: normal;
}

/* Custom Checkbox */
.contact-form__checkbox-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;
    height: 4rem;
    border: 2px solid #cecece;
    border-radius: 0.7rem;
    background: #fff;
    box-sizing: border-box;
}

.contact-form__checkbox:checked+.contact-form__checkbox-label::before {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.contact-form__checkbox:checked+.contact-form__checkbox-label::after {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0rem;
    width: 1.5rem;
    height: 2.5rem;
    border: solid #fff;
    border-width: 0 0.5rem 0.5rem 0;
    transform: rotate(45deg);
    opacity: 1;
}

.contact-form__checkbox-label::after {
    content: '';
    position: absolute;
    left: 1.2rem;
    top: 1.1rem;
    width: 1.5rem;
    height: 2.5rem;
    border: solid #fff;
    border-width: 0 0.5rem 0.5rem 0;
    transform: rotate(45deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Custom Radio */
.contact-form__radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;
    height: 4rem;
    border: 2px solid #cecece;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
}

.contact-form__radio:checked+.contact-form__radio-label::before {
    border-color: var(--color-primary-light);
    background: #fff;
}

.contact-form__radio:checked+.contact-form__radio-label::after {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    width: 1.8rem;
    height: 1.8rem;
    background: var(--color-primary-light);
    border-radius: 50%;
    opacity: 1;
}

.contact-form__radio-label::after {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    width: 1.8rem;
    height: 1.8rem;
    background: var(--color-primary-light);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}