@charset "UTF-8";
/************************************
component
************************************/

/* =========================================
   CTAボタン共通
========================================= */
.btn-wrapper {
	position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}
.btn {
    position: relative;
    width: 100%;
    max-width: 500px;
    min-height: 110px;
    padding: 35px 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 72px;
    background: linear-gradient(113deg, #2F5D5A 19.9%, #1B2C45 139.45%);
    box-shadow:
        6px 8px 10px 0 rgba(27, 44, 69, 0.06),
        -3px 4px 5px 0 rgba(225, 231, 236, 0.08) inset,
        1px 3px 7px 0 rgba(0, 0, 0, 0.05) inset,
        2px 3px 8px 0 rgba(0, 0, 0, 0.06);
    transform: translateY(0) translateZ(0);
    transition: transform 0.32s ease, box-shadow 0.32s ease;
    isolation: isolate;
}

.btn:hover,
.btn:focus-visible,
.btn.is-hovering {
    box-shadow:
        7px 10px 12px 0 rgba(27, 44, 69, 0.08),
        -3px 4px 5px 0 rgba(225, 231, 236, 0.1) inset,
        1px 3px 7px 0 rgba(0, 0, 0, 0.05) inset,
        2px 4px 9px 0 rgba(0, 0, 0, 0.07);
}

/* ボタンの後光（ぼかし） */
.btn::before {
    position: absolute;
    inset: 18px -8px -13px;
    z-index: -1;
    content: "";
    border-radius: inherit;
    background: rgba(28, 45, 68, 0.26);
    filter: blur(9px);
    transition: opacity 0.32s ease, transform 0.32s ease, filter 0.32s ease;
}

.btn:hover::before,
.btn:focus-visible::before,
.btn.is-hovering::before {
    opacity: 0.6;
    filter: blur(11px);
    transform: translateY(4px) scale(1.01);
}

.btn-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    z-index: 1;
    min-width: 203px;
    min-height: 38px;
    padding: 8px 20px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    border-radius: 40px;
    background: linear-gradient(93deg, #ea7b48 0%, #fa6000 109.51%);
    box-shadow:
        0 -1px 1px 0 rgba(0, 0, 0, 0.05),
        0 1px 2px 0 rgba(255, 255, 255, 0.45) inset,
        0 0 1px 0 rgba(0, 0, 0, 0.16),
        0 1px 1px 0 rgba(57, 56, 57, 0.05);
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.44px;
    white-space: nowrap;
}

.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transform: translateY(1px);
}

.btn-icon {
    flex: 0 0 32px;
    width: 32px;
    height: auto;
}

.btn-label {
    display: inline-block;
    height: 40px;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;
    overflow: hidden;
    white-space: nowrap;
}

.btn-char {
    display: inline-block;
    backface-visibility: hidden;
    line-height: 40px;
    text-shadow: 0 40px 0 #fff;
    transform: translateY(0) translateZ(0);
    transition: transform 0.32s ease;
    transition-delay: calc(var(--char-index) * 0.024s);
}

.btn:hover .btn-char,
.btn:focus-visible .btn-char,
.btn.is-hovering .btn-char {
    transform: translateY(-40px) translateZ(0);
}

@media (max-width: 768px) {
	.btn {
        min-height: 80px; /* 少しスリムに */
        padding: 24px 20px;
    }

    .btn-content {
        gap: 8px; /* アイコンと文字の隙間を詰める */
    }

    .btn-icon {
        width: 24px;
        flex-basis: 24px;
    }

    .btn-label {
        font-size: clamp(16px, 4.5vw, 20px); /* 枠からはみ出ないサイズに調整 */
        height: 30px;
        line-height: 30px;
    }

    /* 文字がパタパタするアニメーションの高さもサイズに合わせて調整 */
    .btn-char {
        line-height: 30px;
        text-shadow: 0 30px 0 #fff;
    }

    .btn:hover .btn-char,
    .btn:focus-visible .btn-char,
    .btn.is-hovering .btn-char {
        transform: translateY(-30px) translateZ(0);
    }

    .btn-badge {
        top: -17px;
        min-width: 190px;
        min-height: 36px;
        font-size: 15px;
        padding: 8px 16px;
    }
}

/* =========================================
   ボタンスタイル：カラーバリエーション
========================================= */
/* ▼ ティール（緑ベタ塗り） ▼ */
.btn--teal {
    background: #19BDB2;
    box-shadow: 0 4px 12px rgba(25, 189, 178, 0.2);
}
.btn--teal:hover, .btn--teal:focus-visible, .btn--teal.is-hovering {
    box-shadow: 0 6px 16px rgba(25, 189, 178, 0.3);
}
.btn--teal::before {
    background: none;
}

/* ▼ 白背景＋緑枠線 ▼ */
.btn--outline {
    background: #fff;
    border: 2px solid #19BDB2;
    box-shadow: 0 4px 12px rgba(25, 189, 178, 0.1);
    color: #19BDB2;
}
.btn--outline:hover, .btn--outline:focus-visible, .btn--outline.is-hovering {
    box-shadow: 0 6px 16px rgba(25, 189, 178, 0.15);
}
.btn--outline::before {
    background: none;
}
.btn--outline .btn-label {
    color: #19BDB2;
}
.btn--outline .btn-char {
    text-shadow: 0 40px 0 #19BDB2; /* デフォルトサイズのシャドウ色を緑に */
}

/* =========================================
   シンプルな一覧・戻る用ボタン (.btn-simple)
========================================= */
.btn-simple-wrap {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}
.btn-simple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    padding: 12px 24px;
    background-color: #19BDB2;
    color: #fff;
    border: 2px solid #19BDB2;
    border-radius: 40px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    /* 色が変わる瞬間だけ 0.25秒 で滑らかに変化させる（浮き上がる動きは無し） */
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ▼ ホバー時：色がパッと反転する（白背景 × 緑文字） ▼ */
.btn-simple:hover {
    background-color: #fff;
    color: #19BDB2;
    border-color: #19BDB2;
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
    .btn-simple {
        min-height: 54px;
        font-size: 14px;
    }
}

/* =========================================
   ボタンスタイル：サイズバリエーション
========================================= */
/* ▼ 小サイズ（ボトムCTAやSPメニュー用） ▼ */
.btn--sm {
    min-height: 64px;
    padding: 12px 24px;
    border-radius: 40px;
}
.btn-badge--sm {
    top: -14px;
    min-width: auto;
    min-height: auto;
    font-size: 13px;
    padding: 6px 16px;
    letter-spacing: 0.1em;
}
.btn--sm .btn-content {
    gap: 8px;
}
.btn--sm .btn-icon {
    width: 20px;
    flex-basis: 20px;
}
.btn--sm .btn-label {
    font-size: 18px;
    height: 26px;
    line-height: 26px;
}
.btn--sm .btn-char {
    line-height: 26px;
    text-shadow: 0 26px 0 #fff; /* 基本は白シャドウ */
}
/* サイズとカラーの組み合わせ時のシャドウ上書き */
.btn--outline.btn--sm .btn-char {
    text-shadow: 0 26px 0 #19BDB2;
}
.btn--sm:hover .btn-char,
.btn--sm:focus-visible .btn-char,
.btn--sm.is-hovering .btn-char {
    transform: translateY(-26px) translateZ(0);
}

/* スマホ時の小サイズの微調整 */
@media (max-width: 768px) {
    .btn--sm {
        min-height: 60px;
        padding: 12px 16px;
    }
    .btn--sm .btn-label {
        font-size: 16px;
        height: 24px;
        line-height: 24px;
    }
    .btn--sm .btn-char {
        line-height: 24px;
        text-shadow: 0 24px 0 #fff;
    }
    .btn--outline.btn--sm .btn-char {
        text-shadow: 0 24px 0 #19BDB2;
    }
    .btn--sm:hover .btn-char,
    .btn--sm:focus-visible .btn-char,
    .btn--sm.is-hovering .btn-char {
        transform: translateY(-24px) translateZ(0);
    }
}


/* =========================================
   ボトムCTAセクション（#footer_cta）
========================================= */
#footer_cta {
    background-color: #F6FBFF;
    padding: 80px 0;
    text-align: center;
}

#footer_cta .cta__title {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* ▼ ボタンを2つ横並びにするエリア ▼ */
.cta__action-area {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
}

.cta__tel-box,
.cta__btn-box {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ▼ ボタン下の注意書きテキスト ▼ */
.cta__tel-note,
.cta__btn-note {
    font-size: 14px;
    font-weight: bold;
    color: #19BDB2;
    margin-top: 8px;
}

@media (max-width: 768px) {
    #footer_cta {
        padding: 60px 0;
    }

    #footer_cta .cta__title {
        font-size: 20px;
        margin-bottom: 32px;
    }

    .cta__action-area {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .cta__tel-link {
        margin-top: 0;
    }
}



/************************************
index
************************************/
#index {
    overflow: hidden;
}

/* =========================================
   メインビジュアル
========================================= */
.main_vis {
    position: relative;
    width: 100%;
    height: 105vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.main_vis__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.main_vis__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.main_vis__copy {
	margin-bottom: 80px;
}
.main_vis__txt {
  	display: block;
	margin-bottom: 32px;
	width: 45vw;
	max-width: 600px;
    filter: drop-shadow(0 4px 10px rgba(25, 155, 139, 0.4));
}
.main_vis__logo {
  display: block;
  width: 50vw;
  max-width: 660px;
}

.main_vis__cta {
	width: 100%;
	max-width: 450px;
	text-align: center;
}
.main_vis__note {
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.12);
	font-size: 14px;
	font-weight: bold;
	margin-top: 16px;
}

@media (max-width: 768px) {
	.main_vis {
		height: 100vh;
	}
    .main_vis__bg img {
        object-position: right;
    }

    .main_vis .inner {
        margin-top: 200px;
    }

	.main_vis__copy {
		margin-bottom: 60px;
	}

	.main_vis__txt {
		margin-bottom: 24px;
        width: 55vw;
		max-width: 250px;
	}
	.main_vis__logo {
		width: 60vw;
		max-width: 580px;
	}

	.main_vis__cta {
		max-width: 340px;
        width: 90%;
        margin: 0 auto;
	}
	.main_vis__note {
		font-size: 10px;
		margin-top: 16px;
	}
}

@media (max-width: 576px) {
	.main_vis {
		height: 100vh;
	}

}


/* =========================================
   メインビジュアル：波紋アニメーション
========================================= */
.wave-divider {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: calc(clamp(120px, 18vw, 200px) + 10px);
    pointer-events: none;
    z-index: 10;
}

.wave-divider__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wave-base {
    fill: #fff;
}

.ripple-arc {
    fill: none;
    stroke: rgba(25, 189, 178, 0.4);
    stroke-width: 0;
    opacity: 0;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: opacity, stroke-width;
}

.ripple-arc--1 {
    animation-name: ripple-arc-1;
}

.ripple-arc--2 {
    animation-name: ripple-arc-2;
    animation-delay: 1.5s;
}

@keyframes ripple-arc-1 {
    0% { opacity: 0.08; stroke-width: 26; }
    20% { opacity: 1; }
    72% { opacity: 0.7; }
    100% { opacity: 0; stroke-width: 26; }
}

@keyframes ripple-arc-2 {
    0% { opacity: 0.05; stroke-width: 26; }
    20% { opacity: 0.4; }
    72% { opacity: 0.25; }
    100% { opacity: 0; stroke-width: 26; }
}

@media (max-width: 768px) {
    .wave-divider {
        height: 100px;
    }
}


/* =========================================
   トップページ　セクションヘッダー
========================================= */
#index .sec-header {
    text-align: center;
    margin-bottom: 60px;
}
#index .sec-title {
	text-align: center;
    line-height: 1.6;
    margin-bottom: 24px;
}
#index .sec-title span {
    color: #19BDB2;
}
#index .sec-lead {
    font-size: 18px;
	font-weight: bold;
    line-height: 2;
}

/**--- タイトルスクロールアニメーション（.animated-title） ---**/
.animated-title {
    --ink: #333;
    --muted: rgba(165, 184, 201, 0.4);
    --teal: #19BDB2;
    --soft-teal: 163 254 207;
}

.title-line {
    display: block;
    /* white-space: nowrap; */
}

.title-segment {
    --solid: 0%;
    --head: 0%;
    --active-fill: var(--muted);
    display: inline;
    background: linear-gradient(
        90deg,
        var(--active-fill) 0%,
        var(--active-fill) var(--head),
        var(--muted) var(--head),
        var(--muted) 100%
    );
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 強調文字（accent）のアニメーション中のグラデーション */
.title-segment.is-accent.is-active {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent var(--head),
            var(--muted) var(--head),
            var(--muted) 100%
        ),
        linear-gradient(110deg, #19BDB2 19.08%, rgb(var(--teal-soft)) 178.42%);
    background-clip: text;
    -webkit-background-clip: text;
}

/* 強調文字（accent）のアニメーション完了後の状態 */
.title-segment.is-accent.is-settled {
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}


/**--- サブタイトル（吹き出し） ---**/
#index .sec-subtitle {
    /* デフォルトの緑色の変数 */
    --bubble-gradient: linear-gradient(110deg, #19bdb2 19.08%, #a3fecf 178.42%);
    --tail-width: 20px;
    --tail-height: 9px;
    --tail-color: #3dceb9;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 25px 9px;
    border-radius: 40px;
    margin-bottom: 40px;
    white-space: nowrap;
    background: transparent; /* 背景は::beforeで塗るので透明にする */
}
/* 吹き出しの背景（グラデーション） */
#index .sec-subtitle::before {
    content: "";
    position: absolute;
    z-index: -1; /* テキストより後ろにする */
    inset: 0;
    border-radius: inherit;
    background: var(--bubble-gradient);
}
/* 吹き出しのなめらかな「しっぽ」 */
#index .sec-subtitle::after {
    content: "";
    position: absolute;
    z-index: -2; /* 背景よりさらに後ろにする */
    left: 50%;
    bottom: calc((var(--tail-height) - 1px) * -1);
    width: var(--tail-width);
    height: var(--tail-height);
    background: var(--tail-color);
    transform: translateX(-50%);
    /* SVGのパスデータを使って美しい曲線を描画 */
    clip-path: path("M0 0H20C16.5 0 14.1 1.4 12.2 3.9L11.05 5.35Q10 6.65 8.95 5.35L7.8 3.9C5.9 1.4 3.5 0 0 0Z");
}
/* ▼ オレンジ色のバリエーション ▼ */
#index .sec-subtitle.subtitle_ore {
    /* クラスが付いた時だけ変数の色を上書きする */
    --bubble-gradient: linear-gradient(93deg, #ea7b48 0%, #fa6000 109.51%);
    --tail-color: #f26e24;
}

@media (max-width: 768px) {
	#index .sec-header {
		margin-bottom: 40px;
	}
	#index .sec-title {
		margin-bottom: 12px;
	}

	#index .sec-lead {
		font-size: 14px;
	}

	/* サブタイトル（吹き出し） */
	#index .sec-subtitle {
        font-size: 14px;
        padding: 8px 16px;
        margin-bottom: 30px;
    }

}


/* =========================================
   consult
========================================= */
.consult {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    isolation: isolate;
}
/* 背景の薄いグラデーション ▼ */
.consult::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
    opacity: 0.16;
    background: linear-gradient(
        180deg,
        #fff 0%,
        rgba(25, 189, 178, 0.5) 50%,
        rgba(163, 254, 207, 0.5) 75%,
        #fff 100%
    );
}
/* ▼ コンテンツを背景より手前に出す ▼ */
.consult .inner {
    position: relative;
    z-index: 1;
}
/* ▼ ふよふよ動く四角のコンテナ ▼ */
.consult__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none; /* クリックや選択の邪魔にならないように */
}
/* ▼ ふよふよ四角本体 ▼ */
.consult__square {
    --teal: #19BDB2;
    --gray: #C4D1DC;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    aspect-ratio: 1;
    border-radius: var(--radius);
    opacity: var(--alpha);
    background: var(--color);
    filter: blur(var(--blur));
    transform: translate3d(0, 0, 0);
    animation: float-square var(--duration) ease-in-out var(--delay) infinite alternate;
    will-change: transform;
}

.consult__square.front {
    box-shadow: 0 0 18px rgba(25, 189, 178, 0.24);
}

@keyframes float-square {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    45% { transform: translate3d(calc(var(--drift-x) * -0.28), calc(var(--drift-y) * -0.45), 0) rotate(1.5deg); }
    100% { transform: translate3d(calc(var(--drift-x) * 1.25), calc(var(--drift-y) * 1.25), 0) rotate(-2.5deg); }
}

.consult__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
    padding: 0 5%;
    margin: 0 auto 80px;
}

.consult-card {
    position: relative;
    background-color: #fff;
    border-radius: 16px;
    padding: 60px 24px 32px;
    box-shadow: 0 6px 24px rgba(154, 168, 181, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
    /* ▼ ベースの位置（真ん中以外は0） ▼ */
    --base-y: 0px;
    transform: translateY(var(--base-y));

}

@media (min-width: 769px) {
    .consult-card:nth-child(3n+2) {
        --base-y: 40px;
    }
}

/* ▼ ふわふわアニメーション：ベース位置(--base-y)を起点に揺れる ▼ */
.consult-card.is-floating {
    animation: float-card var(--float-duration, 4s) ease-in-out var(--float-delay, 0s) infinite alternate;
}

@keyframes float-card {
    0% {
        transform: translateY(var(--base-y));
    }
    100% {
        transform: translateY(calc(var(--base-y) + var(--float-y, -8px)));
    }
}

.consult-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 0 0 8px 8px;
    white-space: nowrap;
}

.badge-orange {
	background-color: #F59E34;
}
.badge-teal {
	background-color: #19BDB2;
}
.badge-lightgreen {
	background-color: #ACDD4F;
}
.text-orange {
	color: #F59E34;
	/* border-bottom: 1px dashed #F59E34; */
	font-weight: bold;
}
.text-teal {
	color: #19BDB2;
	/* border-bottom: 1px dashed #19BDB2; */
	font-weight: bold;
}
.text-lightgreen {
	color: #ACDD4F;
	/* border-bottom: 1px dashed #ACDD4F; */
	font-weight: bold;
}
.consult-card__img {
    position: relative;
	width: 80px;
	margin: 0 auto 24px;
}
.consult-card__img img {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    filter: blur(5px);
}

.consult-card.is-visible .consult-card__img img {
    animation: revealVisual 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(200ms + var(--delay, 0ms));
}

@keyframes revealVisual {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ▼ 2. 絵文字のフェードイン ▼ */
.consult-card__icon {
    position: absolute;
    right: -12px;
    top: -12px;
    font-size: 28px;
    line-height: 1;
    opacity: 0;
    transform: translateY(6px) scale(0.72);
    filter: blur(4px);
    z-index: 2;
}

.consult-card.is-visible .consult-card__icon {
    animation: revealEmoji 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(450ms + var(--delay, 0ms));
}

@keyframes revealEmoji {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.72);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
.consult-card__text {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}
/* ▼ 3. テキストの点線アンダーラインアニメーション ▼ */
.consult-card__text span {
    display: inline; /* テキストに沿って改行させる */
    border-bottom: none !important;
    /* CSS標準の点線アンダーラインを設定（初期状態は透明にして隠す） */
    text-decoration: underline dotted transparent;
    text-underline-offset: 4px; /* 線と文字の隙間 */
    text-decoration-thickness: 2px; /* 線の太さ */
}

.consult-card.is-visible .consult-card__text span {
    animation: revealDottedUnderline 760ms ease forwards;
    animation-delay: calc(600ms + var(--delay, 0ms));
}

/* 透明だった線を、文字と同じ色（currentColor）にジワッと変化させる */
@keyframes revealDottedUnderline {
    to {
        text-decoration-color: currentColor;
    }
}

.consult__bottom {
    text-align: center;
}

.consult__arrow {
    margin-bottom: 32px;
}
.consult__arrow img {
	width: 48px;
}

.consult__summary {
    position: relative;
    display: inline-block;
    text-align: center;
}
.consult__summary .summary-img {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 24px;
    width: 40px;
}
.summary-text {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.6;
}

.marker-line {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-weight: 700;
    text-decoration: none !important; /* 元の直線のアンダーラインを消す */
}

.marker-line__text {
    position: relative;
    z-index: 1;
}

.marker-line svg {
    position: absolute;
    left: 0;
    top: calc(100% - 0.36em);
    width: 100%;
    height: 0.34em;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-1.6deg);
    transform-origin: left center;
}

.marker-line path {
    fill: transparent;
    stroke: #19BDB2;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* ▼ 初期の見えない状態を作る ▼ */
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

/* スクロールで .is-active が付与されたらアニメーション発火 */
.marker-line.is-active path {
    /* 1.2秒かけて1回だけシュッと引く */
    animation: draw-scribble 1.2s ease-out forwards;
    animation-delay: 0.5s; /* 画面に入ってから一呼吸おいて引く */
}

@keyframes draw-scribble {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 768px) {
	.consult {
		padding: 60px 0;
	}
    .consult__grid {
        grid-template-columns: 1fr;
        gap: 24px;
		margin-bottom: 40px;
    }

	.consult__summary {
		gap: 16px;
	}

    .consult__summary .summary-img {
        position: absolute;
        right: auto;
        left: -2%;
        top: 30%;
        transform: translateY(-50%);
        margin-right: 0;
        width: 30px;
    }


	.summary-text {
		font-size: 18px;
	}



}


/* =========================================
   service
========================================= */
.service {
    background-color: #F6FBFF;
    padding: 100px 0;
}

.service .sec-header {
    position: relative;
}

/* 右に立つ男性のイラスト */
.service__main-img {
    position: absolute;
    right: 0;
    bottom: -80px;
    width: 10%;
    pointer-events: none;
	z-index: 2;
}

.service__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 24px;
}

/* 1行目：1, 2番目のカード（1マス目から3マス分、4マス目から3マス分使う） */
.service-card:nth-child(1) { grid-column: 1 / span 3; }
.service-card:nth-child(2) { grid-column: 4 / span 3; }

/* 2行目：3, 4, 5番目のカード（それぞれ2マス分ずつ使う） */
.service-card:nth-child(3) { grid-column: 1 / span 2; }
.service-card:nth-child(4) { grid-column: 3 / span 2; }
.service-card:nth-child(5) { grid-column: 5 / span 2; }

/* 3行目：6, 7番目のカード */
.service-card:nth-child(6) { grid-column: 1 / span 3; }
.service-card:nth-child(7) { grid-column: 4 / span 3; }

/* ▼ カード本体 ▼ */
.service-card {
    position: relative;
    background-color: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 6px 24px rgba(191, 210, 228, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ▼ 1. バッジのポップアップ（初期状態は透明・縮小） ▼ */
.service-card__badge {
    opacity: 0;
    transform: scale(.6);
}

.service-card.is-visible .service-card__badge {
    animation: label-pop 220ms cubic-bezier(.2, 1.35, .45, 1) both;
    animation-delay: calc(300ms + var(--delay, 0ms));
}

@keyframes label-pop {
    0% { opacity: 0; transform: scale(.6); }
    1% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}

/* ▼ 2. イラストのフェードイン（初期状態は透明・縮小・ぼかし） ▼ */
.service-card__img {
    width: 80px;
    margin-bottom: 24px;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(10px) scale(.96);
}

.service-card.is-visible .service-card__img {
    animation: reveal-service-content 760ms cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: calc(500ms + var(--delay, 0ms));
}

.service-card__img img {
    width: 100%;
    height: auto;
}


/* ▼ 3. テキストのフェードイン（初期状態は透明・縮小・ぼかし） ▼ */
.service-card__title,
.service-card__text {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(10px) scale(.96);
}

.service-card.is-visible .service-card__title,
.service-card.is-visible .service-card__text {
    animation: reveal-service-content 760ms cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: calc(800ms + var(--delay, 0ms));
}

.service-card__title {
    font-size: 20px;
    margin-bottom: 24px;
}

.service-card__text {
    font-size: 14px;
    line-height: 1.8;
}

/* イラストとテキスト共通のアニメーション */
@keyframes reveal-service-content {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(10px) scale(.96);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}


/* ▼ カードのバッジ（吹き出し） ▼ */
.service-card__badge {
    position: relative;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 24px;
    white-space: nowrap;
	margin-bottom: 24px;
}
.service-card__badge::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
}

/* 1, 5, 6番目（緑） */
.service-card:nth-child(1) .service-card__badge,
.service-card:nth-child(5) .service-card__badge,
.service-card:nth-child(6) .service-card__badge {
    background-color: #19BDB2;
}
.service-card:nth-child(1) .service-card__badge::after,
.service-card:nth-child(5) .service-card__badge::after,
.service-card:nth-child(6) .service-card__badge::after {
    border-top-color: #19BDB2;
}

/* 2, 4番目（オレンジ） */
.service-card:nth-child(2) .service-card__badge,
.service-card:nth-child(4) .service-card__badge {
    background-color: #F59E34;
}
.service-card:nth-child(2) .service-card__badge::after,
.service-card:nth-child(4) .service-card__badge::after {
    border-top-color: #F59E34;
}

/* 3, 7番目（黄緑） */
.service-card:nth-child(3) .service-card__badge,
.service-card:nth-child(7) .service-card__badge {
    background-color: #ACDD4F;
}
.service-card:nth-child(3) .service-card__badge::after,
.service-card:nth-child(7) .service-card__badge::after {
    border-top-color: #ACDD4F;
}

@media (max-width: 768px) {

	.service .sec-header .sec-lead {
		padding: 0 10%;
	}
    .service__main-img {
		width: 12%;
		bottom: -50px;
    }

    .service__grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

	.service-card__title {
		font-size: 18px;
	}
	.service-card__text {
		font-size: 12px;
	}

	/* ▼ カードのバッジ（吹き出し） ▼ */
	.service-card__badge {
		font-size: 14px;
	}
}


/* =========================================
   concept
========================================= */
.concept {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0 100px;
}

.concept__intro {
    margin-bottom: 120px;
}
/* ▼ 画像のアニメーション初期状態 ▼ */
.concept__intro-img img {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(-28px);
    transition: opacity 820ms ease, filter 820ms ease, transform 820ms ease;
}
/* ▼ テキストのアニメーション初期状態 ▼ */
.concept__intro-text {
    font-size: 14px;
    line-height: 2;
    width: 45%;
    margin-left: auto;
    margin-top: -22%;
    /* ここからアニメーション追加 */
    opacity: 0;
    filter: blur(6px);
    transform: translateX(-24px);
    transition: opacity 880ms ease 720ms, filter 880ms ease 720ms, transform 880ms ease 720ms;
}
/* ▼ スクロール発火時のアニメーション（画像・テキスト共通） ▼ */
.concept__intro.is-visible .concept__intro-img img,
.concept__intro.is-visible .concept__intro-text {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.concept__values-title {
    text-align: center;
    margin-bottom: 48px;
}
.concept__values-title span {
    color: #19BDB2;
}

.concept__values-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 40px;
}
.value-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: linear-gradient(136.84deg, #C7F4F0 -18.94%, #F6FBFF 74.26%);
    opacity: 0;
    filter: blur(10px);
    will-change: opacity, filter;
}
/* ▼ PC時の重なり（マイナスの左余白） ▼ */
.value-card + .value-card {
    margin-left: clamp(-78px, -4.5vw, -48px);
}
/* ▼ スクロール発火時のアニメーション本体 ▼ */
.value-card.is-visible {
    animation: feature-fade-in 980ms ease-out forwards;
}
/* ▼ 重なり順と遅延 ▼ */
.value-card:nth-child(1) {
    z-index: 1;
    animation-delay: 0ms;
}
.value-card:nth-child(2) {
    z-index: 2;
    animation-delay: 320ms;
}
.value-card:nth-child(3) {
    z-index: 3;
    animation-delay: 640ms;
}

@keyframes feature-fade-in {
    0% { opacity: 0; filter: blur(10px); }
    72% { opacity: 1; filter: blur(1px); }
    100% { opacity: 1; filter: blur(0); }
}

.value-card__img {
	width: 55%;
    margin: 0 auto 32px;
}
.value-card__text {
	text-align: center;
    font-weight: bold;
	line-height: 1.5;
}
.value-card__text .text-teal {
	border-bottom: none;
	font-size: 20px;
}

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

@media (max-width: 768px) {
	.concept__intro {
		margin-bottom: 40px;
	}
    .concept__intro-text {
		width: 90%;
		margin: 24px auto 0;
    }

    .concept__values-grid {
        flex-direction: column;
        align-items: center;
    }

    /* ▼ SP時の重なり（マイナスの上余白） ▼ */
    .value-card + .value-card {
        margin-left: 0;
        margin-top: -48px;
    }

    .value-card__text .text-teal {
        font-size: 18px;
    }
}

/* =========================================
   fee
========================================= */
.fee {
    background-color: #F6FBFF;
    padding: 100px 0;
}

.fee__content {
    position: relative;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 4px 8px 24px rgba(57, 56, 57, 0.12);
    display: flex;
    align-items: center;
    padding: 64px 48px;
    padding-right: 50%;
}

.fee__features {
    width: 100%;
}

.fee__list {
    list-style: none;
    margin-bottom: 24px;
}

.fee__list li {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
	line-height: 1.5;
}

.fee__list li:last-child {
    margin-bottom: 0;
}

.fee__list li img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;
}

.fee__note {
    font-size: 14px;
    line-height: 1.6;
}
.fee__note span {
	font-weight: bold;
    color: #19BDB2;
    text-decoration: underline;
    text-decoration-color: #19BDB2;
    text-underline-offset: 3px;
}

/* ▼ 右側：緑の料金ボックス ▼ */
.fee__box {
    position: absolute;
    top: -32px;
    bottom: -32px;
    right: 5%;
    width: 40%;
    background: #19BDB2;
	border: 12px solid #E4F1F3;
    border-radius: 16px;
    box-shadow: 4px 8px 24px rgba(57, 56, 57, 0.12);
    color: #fff;
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.fee__box-label {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 32px;
}

.fee__box-price {
    font-size: 112px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 48px;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.fee__box-price span {
    font-size: 160px;
    margin-left: 6px;
}

.fee__box-desc {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

/* ▼ はみ出す女性のイラスト ▼ */
.fee__box-img {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 100px;
    z-index: 3;
}

/**---- 料金案内（fee）のアニメーション ----**/
/* ▼ 初期状態（左に42pxずれて透明） ▼ */
.fee__content .reveal {
    opacity: 0;
    transform: translateX(var(--from-x, -42px));
    will-change: transform, opacity;
}
/* ▼ スクロール発火時のアニメーション ▼ */
.fee__content .reveal.is-visible {
    animation: slide-in-fee 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes slide-in-fee {
    from {
        opacity: 0;
        transform: translateX(var(--from-x, -42px));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .fee {
        padding: 64px 0;
    }

    .fee__content {
        flex-direction: column;
        padding: 0 24px 40px;
        margin-top: 150px;
    }

    /* ▼ 右側だった緑の料金ボックス（上にする） ▼ */
    .fee__box {
        order: 1;
        position: relative;
        width: 100%;
        margin-top: -120px;
        padding: 40px 24px;
        /* PC時の絶対配置をリセット */
        top: auto;
        bottom: auto;
        right: auto;
    }

	.fee__box-label {
		font-size: 20px;
		margin-bottom: 32px;
	}

	.fee__box-price {
		font-size: 80px;
		margin-bottom: 32px;
	}

	.fee__box-price span {
		font-size: 120px;
	}

	.fee__box-desc {
		font-size: 12px;
	}

    .fee__features {
        order: 2;
        margin-top: 40px;
        margin-bottom: 0;
    }

    .fee__list li {
        font-size: 16px;
    }

	.fee__note {
		font-size: 12px;
	}


    /* はみ出す女性のイラスト */
    .fee__box-img {
        width: 60px;
        bottom: -20px;
        right: -25px;
    }

}


/* =========================================
   method
========================================= */
.method {
    padding: 120px 0 80px;
}

.method__block {
    margin-bottom: 80px;
}
.method__block:last-child {
    margin-bottom: 0;
}

.method__title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 24px;
}

.method__desc {
    line-height: 2;
    text-align: center;
    margin-bottom: 40px;
}

/**--- 予約から相談までの流れ（ステップ） ---**/
.method__flow {
    position: relative;
    width: 100%;
    height: 271px; /* SVGの高さに合わせる */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 60px;
    isolation: isolate;
}

.flow-step {
    position: relative;
    z-index: calc(4 - var(--step-index));
    height: 271px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 39px;
    background: transparent;

    /* ▼ アニメーション初期状態 ▼ */
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 560ms ease, transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* 奇数・偶数で背景色を変更 */
.flow-step:nth-child(odd) {
    --panel-fill: #F7FDFC;
}
.flow-step:nth-child(even) {
    --panel-fill: #EDFAFA;
}
/* ▼ 背景の矢印SVGの設定 ▼ */
.flow-step__bg {
    position: absolute;
    inset: -16px -45px -24px -16px;
    width: calc(100% + 61px);
    height: calc(100% + 40px);
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}
/* 最後のステップだけ右の余白を詰める */
.flow-step:last-child .flow-step__bg {
    right: -16px;
    width: calc(100% + 32px);
}
.flow-step__path {
    fill: var(--panel-fill);
}

/* ステップの数字バッジ */
.flow-step__num {
    position: relative;
    z-index: 2;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    margin: 0 0 32px;
    background-color: #19BDB2;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border-radius: 0 0 8px 8px;
}

.flow-step__img {
    position: relative;
    z-index: 2;
    height: 60px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

.flow-step__img img {
	width: auto;
    height: 100%;
}

.flow-step p {
    position: relative;
    z-index: 2;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}
/* ▼ アニメーション発火時 ▼ */
.flow-step.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/**--- ご予約・ご相談方法（2カラムカード） ---**/
.method__grid {
    display: flex;
    gap: 32px;
}

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

.method-card__img {
    width: 100%;
    margin-bottom: 40px;
    background-color: #F6FBFF;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.method-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: clip-path, transform;
    transition-delay: 0.3s;
}

/* ▼ 2枚目：1枚目よりさらに遅らせて 0.5秒後 に動き出す ▼ */
.method-card:nth-child(2) .method-card__img img {
    transition-delay: 0.5s; /* ★元々 0.15s だったのを長めに変更 */
}

/* ▼ 3. スクロールで .is-visible が付いたら左から右へ出現 ▼ */
.method-card__img.is-visible img {
    clip-path: inset(0 0 0 0); /* 隠していた右側0%にして全貌を見せる */
}

.method-card__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 32px;
}

.method-card__text {
    margin-bottom: 32px;
}

.method-card__text a {
	color: #A5B8C9;
	border-bottom: 1px dotted;
}

/* 予約用のオレンジボタン */
.method-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(92.79deg, #EA7B48 0%, #FA6000 109.51%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0px 1px 1px 0px rgba(57, 56, 57, 0.08);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.5) inset;
	box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.08);
    transition: opacity 0.3s ease;
    margin-top: auto;
    border: 1px solid #FA6000;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.method-card__link img {
    width: 20px;
    margin-right: 8px;
}
/* ▼ アイコンの出し分け：通常時はデフォルト用を表示 ▼ */
.method-card__link .icon-hover {
    display: none;
}
/* ▼ hover時：背景白、文字オレンジに反転 ▼ */
.method-card__link:hover {
    background: #fff;
    color: #FA6000;
}
/* ▼ hover時：アイコンも切り替え ▼ */
.method-card__link:hover .icon-default {
    display: none;
}
.method-card__link:hover .icon-hover {
    display: inline-block;
}

/**--- LINEバナー ---**/
.method__line-banner {
    width: 100%;
	max-width: 540px;
	margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
/* スクロールでJSから .is-visible が付与されたら発火 */
.method__line-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 768px) {

	.method {
		padding: 64px 0;
	}

	.method__block {
		margin-bottom: 64px;
	}

	.method__title {
		font-size: 18px;
	}

    .method__flow {
        grid-template-columns: 1fr;
        height: auto;
    }

    .flow-step {
        height: auto;
        padding-bottom: 32px;
        background: var(--panel-fill); /* SVGの代わりにCSSで背景を塗る */
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(25, 189, 178, 0.12);
    }

    /* スマホ時は矢印SVGを非表示にする */
    .flow-step__bg {
        display: none;
    }

    /* 2カラムを縦並びに */
    .method__grid {
        flex-direction: column;
        gap: 40px;
    }

	.method-card > img,
	.method-card__img {
		margin-bottom: 24px;
	}

	.method-card__title {
		font-size: 18px;
		margin-bottom: 24px;
	}
	.method-card__text {
		margin-bottom: 24px;
	}


}

/* =========================================
   CTA（中段バナー）セクション（.cta--middle）
========================================= */
.cta--middle {
    margin-bottom: 120px;
}

.cta__content {
    background: linear-gradient(90deg, #65DBD1 0%, rgba(41, 163, 163, 0.96) 100%);
    border-radius: 16px;
    padding: 80px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

/* ▼ 左側：テキストエリア ▼ */
.cta__text-area {
    width: 50%;
}

.cta__title {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 24px;
}
.cta__title span {
    font-size: 34px;
    font-weight: 800;
}

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

.cta__list li {
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    line-height: 1.5;
}

.cta__list li:last-child {
    margin-bottom: 0;
}

/* リストのアイコン */
.cta__list li img {
    width: 16px;
    height: auto;
    margin-right: 8px;
}

/* ▼ 右側：ボタンとイラストのエリア ▼ */
.cta__btn-area {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1; /* ボタンをイラストより前に出すために指定 */
}

.cta__btn-area .btn-wrapper {
    width: 100%;
    max-width: 340px; /* ボタンが大きくなりすぎないように制限*/
}

/* ▼ 中段CTA用のボタン上書きスタイル（文字サイズとアニメーションの高さを連動） ▼ */
.cta__btn-area .btn {
    min-height: 80px; /* メインビジュアルよりスリムに */
    padding: 24px 20px;
}

.cta__btn-area .btn-badge {
    font-size: 14px;
    top: -14px;
    min-width: 160px;
    min-height: 30px;
    padding: 6px 16px;
}

.cta__btn-area .btn-content {
    gap: 8px;
}

.cta__btn-area .btn-icon {
    width: 24px;
    flex-basis: 24px;
}

/* 文字サイズを20pxに設定 */
.cta__btn-area .btn-label {
    font-size: 20px;
    height: 28px;
    line-height: 28px;
}

/* パタパタアニメーションの移動距離も20pxのフォントに合わせて縮小 */
.cta__btn-area .btn-char {
    line-height: 28px;
    text-shadow: 0 28px 0 #fff;
}

.cta__btn-area .btn:hover .btn-char,
.cta__btn-area .btn:focus-visible .btn-char,
.cta__btn-area .btn.is-hovering .btn-char {
    transform: translateY(-28px) translateZ(0);
}

/* 飛び跳ねる人のイラスト */
.cta__logos {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 250px;
    margin-top: -16px;
    z-index: 1;
}

.cta__logos img {
    width: 80px;
}

@media (max-width: 768px) {
    .cta--middle {
        margin-bottom: 64px;
    }
    .cta--middle .inner {
        width: 95%;
    }

    .cta__content {
        flex-direction: column;
        padding: 64px 5%;
    }
    .cta__text-area {
        display: contents;
    }

    .cta__text-area,
    .cta__btn-area {
        width: 100%;
    }

    .cta__title {
        order: 1;
        font-size: 22px;
        text-align: center;
        margin-bottom: 48px;
    }
    .cta__title span {
        font-size: 24px;
    }

    .cta__btn-area {
        order: 2;
        margin-bottom: 48px;
    }

    .cta__list {
        order: 3;
		width: 80%;
		max-width: 410px;
		margin: 0 auto ;
        margin-bottom: 0;
    }

    .cta__list li {
        align-items: flex-start; /* テキストが2行になった時に備えて上揃えに */
    }

    .cta__list li img {
        margin-top: 4px; /* アイコンの位置を1行目のテキストの高さに合わせる微調整 */
    }
}


/* =========================================
   faq
========================================= */
.faq {
    background-color: #F6FBFF;
    padding: 144px 0;
}

.faq .sec-title {
    margin-bottom: 56px;
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq__item {
    background-color: #fff;
    border-radius: 16px;
    transition: .3s;
}
.faq__q {
    display: flex;
    align-items: center;
    padding: 24px 32px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    position: relative;
    /* タップ時のハイライトを消す（スマホ用） */
    -webkit-tap-highlight-color: transparent;
}

/* Safari向けのデフォルト三角形消去 */
.faq__q::-webkit-details-marker {
    display: none;
}

/* 「Q」のアイコン*/
.faq__q::before {
    content: "Q";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #19BDB2;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}

/* 右側の開閉アイコン（∨） */
.faq__q::after {
    content: "";
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #A5B8C9;
    border-right: 2px solid #A5B8C9;
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform 0.3s ease;
}

/* アコーディオンが開いている時の矢印の向き（∧） */
.faq__item[open] .faq__q::after {
    transform: rotate(-135deg);
}

.faq__item:hover {
    box-shadow: 0px 6px 24px rgba(191, 210, 228, 0.16);
}

/* ▼ 回答部分 ▼ */
.faq__a {
    display: flex;
    padding: 0 32px 32px;
}

/* 「A」のアイコン */
.faq__a::before {
    content: "A";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #EA7B48;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    margin-right: 16px;
    flex-shrink: 0;
}

.faq__a p {
    line-height: 1.6;
}


@media (max-width: 768px) {
    .faq {
        padding: 60px 0;
    }

    .faq .sec-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .faq__q {
        padding: 20px 24px;
        line-height: 1.5;
    }

    .faq__q::before {
        margin-right: 8px;
    }
    .faq__q::after {
        flex-shrink: 0;
    }

    .faq__a {
        padding: 0 24px 24px;
    }

    .faq__a::before {
        margin-right: 8px;
    }

}


/* =========================================
   blog
========================================= */
.blog {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0;
}

.blog .sec-title {
    margin-bottom: 56px;
}

/* ▼ スライダー全体 ▼ */
.blog-slider {
    position: relative;
    overflow: visible !important; /* Swiperのデフォルト（hidden）を上書き */
}

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

.blog__item {
    height: auto;
    opacity: 0.3; /* 見えていないスライドを半透明に */
    transition: opacity 0.4s ease;
}

/* PC：アクティブなスライドから3枚を不透明にする */
@media (min-width: 961px) {
    .blog-slider .swiper-slide-active,
    .blog-slider .swiper-slide-active + .swiper-slide,
    .blog-slider .swiper-slide-active + .swiper-slide + .swiper-slide {
        opacity: 1;
    }
}
/* SP：アクティブなスライドだけを不透明にする */
@media (max-width: 960px) {
    .blog-slider .swiper-slide-active {
        opacity: 1;
    }
}

/* ▼ 記事カード ▼ */
.blog__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 4px 4px 20px 0px rgba(27, 51, 69, 0.08);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease;
}

.blog__link:hover {
    box-shadow: 4px 4px 24px 0px rgba(27, 51, 69, 0.16);
}

.blog__img-wrap {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.blog__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blog__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.blog__link:hover .blog__img img {
    transform: scale(1.05);
}

.blog__txt {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px;
}

.blog__time {
    font-size: 12px;
    margin-bottom: 6px;
}

.blog__title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 24px;
    /* 3行で三点リーダー（...）にする */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
}

/* ▼ 記事カードの矢印 ▼ */
.blog__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: #19BDB2;
    color: #fff;
    font-family: serif;
    font-size: 14px;
    border-radius: 4px;
    margin: auto 0 0 auto;
    transition: transform 0.3s ease, background 0.3s ease;
}

.blog__link:hover .blog__arrow {
    transform: translateX(4px);
    background: #1B2C45;
}

/* ▼ スライダーのコントローラー（矢印・ドット・一覧ボタン） ▼ */
.blog__controller-wrap {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 左・中央・右の3等分グリッドを作る */
    align-items: center;
    gap: 24px;
}

.swiper-controller {
    grid-column: 1; /* 左エリアに配置 */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左寄せ */
}

.blog__btn-wrap {
    grid-column: 2;
    display: flex;
    justify-content: center;
}

/* 矢印ボタン */
.blog-slider .swiper-button-prev,
.blog-slider .swiper-button-next {
    position: static !important;
    width: 40px;
    height: 40px;
    margin-top: 0;
    border-radius: 4px;
    background-color: #fff;
    color: #19BDB2;
    box-shadow: 2px 4px 12px 0px rgba(27, 51, 69, 0.16);
    transition: background 0.3s ease, color 0.3s ease;
}

.blog-slider .swiper-button-prev::after,
.blog-slider .swiper-button-next::after {
    font-size: 14px;
    font-weight: bold;
}

.blog-slider .swiper-button-prev:hover,
.blog-slider .swiper-button-next:hover {
    background-color: #19BDB2;
    color: #fff;
}

.blog-slider .swiper-button-prev {
    margin-right: 12px;
}

/* ドット（ページネーション） */
.blog-slider .swiper-pagination {
    position: static !important;
    width: auto !important;
    margin-left: 24px;
}
.blog-slider .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #A5B8C9;
    opacity: 0.5;
    margin: 0 4px !important;
    transition: 0.3s ease;
}
.blog-slider .swiper-pagination-bullet-active {
    background: #19BDB2;
    opacity: 1;
    width: 16px;
    border-radius: 4px;
}


@media (max-width: 768px) {
    .blog {
        padding: 80px 0;
    }

    .blog__controller-wrap {
        display: flex; /* スマホ時はグリッドを解除 */
        flex-direction: column; /* 縦並びに */
        gap: 32px;
    }
    .swiper-controller {
        justify-content: center; /* スマホ時は矢印とドットも中央寄せ */
    }
    .blog__btn-wrap {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }
}


/* =========================================
   news
========================================= */
.news {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0;
}
.news_items {
    margin-bottom: 56px;
}
.news_items li a {
    display: flex;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(196, 209, 220, 0.4);
}
.news__time {
    width: 130px;
}
.news__title {
    width: calc(100% - 130px);
    font-size: 16px;
}

@media (max-width: 768px) {
    .news {
        padding: 80px 0;
    }

    .news_items li a {
        display: block;
        padding: 24px 0;
    }

    .news__time,
    .news__title {
        width: 100%;
    }
    .news__time {
        display: block;
        margin-bottom: 8px;
    }


}

/* =========================================
   下層ページ共通ヘッダー（.page-header）
========================================= */
.page-header {
    position: relative;
    width: 100%;
    height: 480px;
    background-color: #19BDB2;
    color: #fff;
    overflow: hidden;
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    /* 1. SVGノイズ生成 ＋ 2. 線形グラデーション（透過24%） */
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.26' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(101, 219, 209, 0.24) 0%, rgba(41, 163, 163, 0.23) 96%);

    /* ノイズの色味と強さを調整（#D4F0EE の30%） */
    background-color: rgba(212, 240, 238, 0.3);
    background-blend-mode: overlay; /* ノイズとグラデを自然に馴染ませる */
    opacity: 0.6; /* ノイズのザラザラ感の強さ（お好みで微調整してください） */

    /* 3. 背景のぼかし */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* タイトルをエリアの「下側」に配置（ノイズより手前に出す） */
.page-header__inner {
    position: relative;
    z-index: 1; /* ★ ノイズレイヤーより手前に！ */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 100px;
}

.page-header__sub {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
    opacity: 0.9;
}

.page-header__title {
    font-size: 48px;
}

@media (max-width: 768px) {
    .page-header {
        height: 340px;
    }

    .page-header__inner {
        padding-bottom: 80px;
    }

    .page-header__sub {
        font-size: 14px;
    }

    .page-header__title {
        font-size: 32px;
    }
}

/* =========================================
   下層ページ共通
========================================= */
.page-main {
    position: relative;
    background: #fff;
    border-radius: 32px 32px 0 0;
    margin-top: -32px;
    padding-top: 40px;
    z-index: 0;
}
.page-section {
    padding: 80px 0;
}

@media (max-width: 768px) {
    .page-main {
        padding-top: 20px;
    }
    .page-section {
        padding: 40px 0;
    }
}

/* =========================================
   company
========================================= */

#company .section_eyebrow {
    color: #19BDB2;
    font-weight: bold;
    margin-bottom: 16px;
}
#company .section_ttl {
    margin-bottom: 40px;
}

/** about_mission **/
#company .section_lead {
    font-size: 24px;
    font-weight: bold;
}

/** about_value **/
#company .section_desc {
    line-height: 2;
    margin-bottom: 48px;
}
#company .value_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
#company .value_card {
    background-color: #F7FAFD;
    padding: 16px;
    border-radius: 16px;
}
#company .value_card__inner {
    background-color: #fff;
    padding: 48px 32px;
    border-radius: 12px;
    box-shadow: 4px 8px 24px 0px #3938391F;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#company .value_head {
    margin-bottom: 40px;
}
#company .value_letter {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 16px;
}
#company .value_name {
    font-size: 16px;
}
#company .value_name span {
    color: #9AA8B5;
}
#company .value_text {
    font-size: 14px;
    line-height: 1.6;
}

/** about_overview **/
#company .overview_row {
    display: flex;
    align-items: center;
    padding: 32px 0;
    border-bottom: 1px solid rgba(196, 209, 220, 0.4);
}
#company .overview_row:first-of-type {
    border-top: 1px solid rgba(196, 209, 220, 0.4);
}
#company .overview_row dt {
    width: 160px;
    font-weight: bold;
}

#company .overview_row dd {
    width: calc(100% - 160px);
}

#company .overview_row dd a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #717F8B;
    text-decoration: none;
    border-bottom: 1px dashed #717F8B;
    margin-left: 8px;
    transition: opacity 0.3s ease;
}
#company .overview_row:last-of-type dd a {
    margin-left: 0;
}

#company .overview_row dd a:hover {
    opacity: 0.6;
}

/* 外部リンクのアイコンをCSSで生成 */
#company .overview_row dd a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    /* 外部リンクSVGアイコン */
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23708FAA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>') no-repeat center center / contain;
}

/** about_access **/
#company .access_grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 56px;
}
#company .access_map {
    width: 45%;
    height: auto;
    aspect-ratio: 2 / 3;
}
#company .access_map iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

#company .access_info {
    width: 50%;
    display: flex;
    flex-direction: column;
}
#company .access_item {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(196, 209, 220, 0.4);
}
#company .access_item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
#company .access_item-ttl {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}

/* ▼ 予約＆TELボタン ▼ */
#company .access_btns {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

#company .btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 8px;
    background: linear-gradient(103.98deg, #19BDB2 26.53%, #A3FECF 147.46%);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#company .btn-gradient:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}
#company .btn-gradient img {
    width: 16px;
    height: auto;
}

/* 外部リンク（Google Map）の装飾 */
#company .link-external {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #717F8B;
    text-decoration: none;
    border-bottom: 1px dashed #717F8B;
    margin-top: 8px;
    transition: opacity 0.3s ease;
}

#company .link-external:hover {
    opacity: 0.6;
}

#company .link-external::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23708FAA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>') no-repeat center center / contain;
}

#company .access_gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
#company .gallery_item {
    display: flex;
    flex-direction: column;
}
#company .gallery_img {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    aspect-ratio: 4 / 3;
}
#company .gallery_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#company .gallery_txt {
    font-size: 14px;
    text-align: center;
}


/** recruit-banner **/
#company .recruit-banner {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    color: #fff;
}

/* ▼ 背景画像（imgタグへの調整） ▼ */
#company .recruit-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#company .recruit-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#company .recruit-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ▼ 左側：テキスト ▼ */
#company .recruit-banner__content {
    width: 55%;
    text-shadow: 2px 2px 8px rgba(57, 56, 57, 0.16);
}

#company .recruit-banner__sub {
    display: block;
    font-weight: bold;
    margin-bottom: 16px;
}

#company .recruit-banner__title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 24px;
}

#company .recruit-banner__text {
    line-height: 2;

}

/* ▼ 右側：ボタン ▼ */
#company .recruit-banner__btn-wrap {
    width: 40%;
    display: flex;
    justify-content: flex-end;
}

/* 専用の白ボタン */
#company .recruit-banner-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 320px;
    background-color: #fff;
    text-decoration: none;
    padding: 16px 16px 16px 32px;
    border-radius: 16px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 4px 4px 20px rgba(47, 93, 90, 0.3);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 矢印の緑ブロック */
#company .recruit-banner-btn__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 32px;
    background-color: #19BDB2;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

#company .recruit-banner-btn:hover .recruit-banner-btn__arrow {
    transform: translateX(4px);
}

@media (max-width: 960px) {
    /** about_value **/
    #company .value_grid {
        grid-template-columns: repeat(2, 1fr); /* タブレット時は2列に */
        gap: 24px;
    }

    /** about_access **/
    #company .access_grid {
        flex-direction: column;
        gap: 40px;
    }

    #company .access_map {
        aspect-ratio: 3 / 2;
    }
    #company .access_map,
    #company .access_info {
        width: 100%;
    }

    #company .access_btns {
        flex-direction: column;
        gap: 16px;
    }

    /** recruit-banner **/
    #company .recruit-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
    }

    #company .recruit-banner__content {
        width: 100%;
    }

    #company .recruit-banner__btn-wrap {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 768px) {
    #company .section_eyebrow {
        margin-bottom: 8px;
    }
    #company .section_ttl {
        margin-bottom: 32px;
    }

    /** about_mission **/
    #company .section_lead {
        font-size: 16px;
    }

    /** about_value **/
    #company .value_grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #company .value_card__inner {
        padding: 32px 24px;
    }

    /** about_overview **/
    #company .overview_row {
        flex-direction: column;
        padding: 24px 0;
    }

    #company .overview_row dt {
        width: 100%;
        margin-bottom: 12px;
    }

    #company .overview_row dd {
        width: 100%;
    }

    #company .overview_row dd a {
        margin-left: 0;
    }

    /** about_access **/
    #company .access_grid {
        margin-bottom: 56px;
    }

    #company .access_map {
        aspect-ratio: 1;
    }

    #company .access_item {
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    #company .access_gallery {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    #company .gallery_img {
        margin-bottom: 12px;
    }

    /** recruit-banner **/
    #company .recruit-banner {
        padding: 64px 0;
    }

    #company .recruit-banner__content {
        text-align: center;
    }
    #company .recruit-banner__sub {
        font-size: 12px;
    }
    #company .recruit-banner__title {
        font-size: 24px;
        margin-bottom: 16px;
    }
    #company .recruit-banner__text {
        font-size: 12px;
    }

}

/* =========================================
   採用情報 募集職種（careers）
========================================= */
#careers .jobs_content_title {
    font-size: 24px;
    margin-bottom: 48px;
    text-align: center;
}

#careers .jobs_items {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ▼ カード全体 ▼ */
#careers .jobs_item {
    width: 100%;
    border-radius: 12px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
}

/* 左(テキスト)と右(ボタン)の横並び設定 */
#careers .jobs_item_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 56px 48px;
}

/* ▼ 左側：テキストエリア ▼ */
#careers .jobs_item_txt {
    width: 60%;
}

#careers .jobs_item_title {
    font-size: 28px;
    margin: 0 0 16px;
}

/* ▼ 右側：ボタンエリア ▼ */
#careers .jobs_item_btn-wrap {
    width: 260px;
    flex-shrink: 0;
}

/* 専用ボタンスタイル */
#careers .jobs_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #19BDB2;
    color: #fff;
    text-decoration: none;
    padding: 20px 24px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 15px;
    transition: background 0.3s ease;
}

/* 矢印が入っている白い四角 */
#careers .jobs_btn_arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #fff;
    color: #19BDB2;
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

/* ホバーで矢印が右にスッとする動き */
#careers .jobs_btn:hover .jobs_btn_arrow {
    transform: translateX(4px);
}

@media (max-width: 960px) {
    #careers .jobs_item_inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 40px 32px;
    }

    #careers .jobs_item_txt {
        width: 100%;
    }

    #careers .jobs_item_btn-wrap {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    #careers .jobs_content_title {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 32px;
    }

    #careers .jobs_item_inner {
        padding: 80px 10%;
    }

    #careers .jobs_item_title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    #careers .jobs_item_desc {
        font-size: 14px;
    }
}


/* =========================================
   採用情報 募集職種（single_jobs）
========================================= */

#single_jobs .single_jobs_content {
	border: 1px solid rgba(196, 209, 220, 0.4);
	border-radius: 8px;
	padding: 0 40px;
    margin-bottom: 80px;
}
#single_jobs .single_jobs_content dl div {
	padding: 40px 0;
    border-bottom: 1px solid rgba(196, 209, 220, 0.4);
}
#single_jobs .single_jobs_content dl div:last-child {
	border-bottom: none;
}
#single_jobs .single_jobs_content dt {
	font-weight: bold;
	margin-bottom: 15px;
}

@media (max-width: 768px) {
	#single_jobs .single_jobs_content {
		padding: 0 5%;
	}
	#single_jobs .single_jobs_content dl div {
		padding: 30px 0;
	}
}


/* =========================================
   ブログ一覧ページ（.blog-archive-list）
========================================= */
.blog-archive-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 40px 24px;
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
}

/* トップページスライダー用の opacity: 0.3 を打ち消す */
.blog-archive-list .blog__item {
    opacity: 1;
}

/* ▼ タブレット時は2列 ▼ */
@media (max-width: 960px) {
    .blog-archive-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ▼ スマホ時は1列 ▼ */
@media (max-width: 768px) {
    .blog-archive-list {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* =========================================
   ニュース一覧ページ（.news）
========================================= */

#news .news_item {
    border-bottom: 1px solid rgba(196, 209, 220, 0.4);
}
#news .news_item:first-child {
    border-top: 1px solid rgba(196, 209, 220, 0.4);
}
#news .news_item a {
    display: block;
    padding: 40px 0;
}
#news .news_meta {
    margin-bottom: 16px;
    font-size: 14px;
}
#news .news_title {
    font-size: 24px;
    transition: text-decoration 0.3s ease;
}
#news .news_item a:hover .news_title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}


@media (max-width: 768px) {
    #news .news_item a {
        padding: 24px 0;
    }
    #news .news_meta {
        margin-bottom: 12px;
        font-size: 12px;
    }
    #news .news_title {
        font-size: 18px;
    }
}




/* =========================================
   シングルページ（single_news/single_blog）
========================================= */
#single_news .page-header__sub,
#single_blog .page-header__sub {
    font-weight: normal;
    font-size: 16px;
}

#single_news .single_news_item,
#single_blog .single_blog_item {
    margin-bottom: 80px;
}

.single_main_img {
    margin-bottom: 48px;
}
.single_main_img {
    width: 100%;
}

.single_text h2 {
    margin-bottom: 36px;
}
.single_text h3,
.single_text h4 {
    margin-top: 36px;
    margin-bottom: 24px;
}

.single_text p {
    margin-bottom: 12px;
}
.single_text p:last-child {
    margin-bottom: 0;
}

.single_text img {
    width: auto;
    max-width: 100%;
    margin: 24px auto;
}

.single_text a {
    text-decoration: underline;
}



/* =========================================
   プライバシーポリシー（.policy_section）
========================================= */

.policy_lead {
    margin-bottom: 56px;
}

.policy_list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}

.policy_term {
    font-weight: bold;
    margin: 0 0 12px;
}

.policy_desc p {
    margin: 0 0 12px;
}

.policy_desc p:last-child {
    margin-bottom: 0;
}

/* ▼ 箇条書きリスト ▼ */
.policy_bullet {
    list-style: none;
    padding: 0;
    margin: 0;
}

.policy_bullet li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 8px;
}

.policy_bullet li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}


@media (max-width: 768px) {

}


/************************************
form共通
************************************/
#page .form_inner {
    width: 70%;
}
#form {
    padding: 120px 10%;
}
  #form h2 {
	font-size: 24px;
	margin-bottom: 40px;
	text-align: center;
  }

  /** form_value **/
  #form .form_value {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
  }
  #form .form_value div {
	position: relative;
	text-align: center;
	width: 150px;
	padding: 0 5px;
  }
  #form .form_value div::after {
	position: absolute;
	top: 12px;
	left: 97px;
	content: "";
	display: inline-block;
	width: 110px;
	height: 1px;
	background-image : linear-gradient(to right, #C6C6C6, #C6C6C6 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
	background-size: 5px 1px;
	background-position: left bottom;
	background-repeat: repeat-x;
  }
  #form .form_value div:last-child::after {
	content: none;
  }
  #form .form_value .form_value_icon {
	font-family: 'Barlow', sans-serif;
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(27,51,69,0.2);
	color: #fff;
	font-weight: bold;
	margin: 0 auto 5px;
	font-size: 14px;
  }
  #form .form_value .form_value_txt {
	color: rgba(27,51,69,0.2);
	font-size: 12px;
	font-weight: bold;
  }
  #form .form_value div.active .form_value_icon {
	background: #19BDB2;
  }
  #form .form_value div.active .form_value_txt {
	color: #19BDB2;
  }
  #form .form_value div.complete::after {
	background: rgba(27,51,69,0.3);
  }
  #form .form_value div.complete .form_value_icon {
	background: rgba(27,51,69,0.6);
  }
  #form .form_value div.complete .form_value_txt {
	color: rgba(27,51,69,0.6);
  }

  /** form_toptxt **/
  #form .form_toptxt {
	margin-bottom: 80px;
  }

  /** form **/
  #form dl div {
	margin-bottom: 40px;
  }
  #form dl div.select_wrap {
    margin-bottom: 10px;
  }
  #form .form_term {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
  }
  #form .form_step2 .form_term {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
  }
  #form .form_step2 .form_description {
	font-size: 16px;
  }
  #form .req,
  #form .any {
	font-size: 10px;
	width: 32px;
	height: 18px;
	line-height: 18px;
	margin-left: 10px;
	border-radius: 4px;
	text-align: center;
  }
  #form .req {
	font-weight: bold;
	color: #fff;
	background: #EF5151;
  }
  #form .any {
	color: #565E6A;
	background: #E2E1E1;
  }
  #form .ex {
	font-size: 12px;
	color: rgba(27,51,69,0.5);
  }
  #form .caution {
	color: #EF5151;
	font-size: 12px;
	margin-top: 5px;
  }
  #form .form_name .form_description {
	width: 49%;
  }
  #form .form_birthday .form_description {
	width: 32%;
  }
  #form .form_birthday select {
	width: calc(100% - 25px);
  }
  #form .form_birthday span {
	font-size: 12px;
  }
  #form .form_birthday dd div {
	margin-bottom: 0;
  }
  #form .form_sex {
	margin-bottom: 0;
  }
  #form .form_sex label.radio_label_style {
	width: 49%;
	margin-bottom: 0;
  }
  #form .form_description.other_textarea {
	margin-top: 15px;
  }

  #form .privacypolicy {
	max-width: 500px;
	border: 1px solid #E2E1E1;
	border-radius: 4px;
	padding: 30px 5%;
	margin: 0 auto 50px;
  }
  #form .privacypolicy div {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
  }
  #form .privacypolicy p {
	font-size: 12px;
	margin-bottom: 20px;
  }
  #form .privacypolicy p a {
	border-bottom: 1px dotted rgba(27,51,69,0.5);
  }
  #form .privacypolicy label.label_style {
	padding: 0 0 0 25px;
	border: none;
  }
  #form .privacypolicy label.label_style::before {
	left: 0;
  }
  #form .privacypolicy label.label_style::after {
	left: 7px;
  }
  #form .privacypolicy label.label_style:hover {
	background: none!important;
  }

  #form .btn_wrap {
	margin: 0 auto;
  }

  .recapcha-text {
    margin-top: 48px;
    text-align: center;
  }
   .recapcha-text a {
    color: #717F8B;
    border-bottom: 1px dashed #717F8B;
   }



@media (max-width: 768px) {
    #page .form_inner {
        width: 90%;
    }
    #form {
        border: none;
        padding: 0;
    }
	#form .form_value div {
		width: 100px;
	}
	#form .form_value div::after {
		top: 12px;
		left: 70px;
		width: 65px;
	}

	#form .form_name {
		flex-direction: column;
	}
	#form .form_name .form_description {
		width: 100%;
	}

}

/************************************
privacypolicy
************************************/

.policy_content .content_head_txt {
 	 margin-bottom: 50px;
}
.policy_content dl div {
 	 margin-bottom: 50px;
}
.policy_content dl div dt {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}



/* =========================================
   404
========================================= */
#not_found .page-section {
    text-align: center;
}
#not_found .page-section h2 {
    margin-bottom: 24px;
}
#not_found .btn-simple-wrap {
    margin-top: 80px;
}