/* ==========================================
   Pelcare LP - Stylesheet
   ========================================== */

/* CSS Variables */
:root {
    /* Colors */
    --color-primary: #AB6E55;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-white: #FFFFFF;
    --color-bg-cream: #F5F0E8;
    --color-bg-beige: #EDE6DA;
    --color-border-brown: #AB6E55;
    --color-cta: #B8860B;
    
    /* Fonts */
    --font-mincho: 'Shippori Mincho', serif;
    --font-garamond: 'EB Garamond', serif;
    --font-gothic: '游ゴシック', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-gothic);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--color-white);
    position: relative;
    width: 100%;
}

img {
    max-width: none;
    height: auto;
    vertical-align: bottom;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ==========================================
   Header
   ========================================== */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    z-index: 1000;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.header.is-fixed {
    position: fixed;
    top: 0;
}

.header.is-hidden {
    transform: translateY(-100%);
}

.header.is-scrolled {
    position: fixed;
    background-color: var(--color-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: headerFadeIn 0.4s ease forwards;
}

@keyframes headerFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PC版でハンバーガーメニューとSPナビを非表示 */
.hamburger {
    display: none;
}

.sp-nav {
    display: none;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 40px;
}

.header-logo {
    position: relative;
    top: 4px;
}

.header-logo img {
    width: 125px;
    height: 54px;
}

.header-nav {
    position: absolute;
    right: 267px;
}

.header-nav ul {
    display: flex;
    gap: 27px;
}

.header-nav a {
    font-size: 16px;
    line-height: 42px;
    font-family: var(--font-gothic);
    color: var(--color-text);
    transition: opacity 0.3s ease;
}

.header-nav a:hover {
    opacity: 0.7;
}

.header-cta {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 227px;
    height: 75px;
    background-color: #A48C50;
    color: var(--color-white);
    font-size: 16px;
    line-height: 1.5;
    font-family: var(--font-gothic);
    transition: opacity 0.3s ease;
}

.header-cta:hover {
    opacity: 0.8;
}

/* ==========================================
   First View
   ========================================== */
.fv {
    position: relative;
    width: 100%;
    min-width: 1440px;
    height: 830px;
    overflow: hidden;
    z-index: 20;
    background-color: #fff;
}

/* Background - ウィンドウ幅いっぱいに広がる */
.fv-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900px;
    z-index: 1;
}

.fv-bg-image {
    width: 100%;
    height: 900px;
    object-fit: cover;
    object-position: center;
    transform-origin: center center;
}

/* FV Inner - 1440px固定のコンテンツエリア */
.fv-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 900px;
}

/* Woman Image - 1920px幅、中央配置 */
.fv-woman {
    position: absolute;
    top: -45px;
    left: 50%;
    margin-left: calc(-960px - 10px);
    width: 1920px;
    height: 900px;
    z-index: 2;
}

.fv-woman img {
    width: 1920px;
    height: 900px;
    object-fit: cover;
}

/* SP用グラデーションオーバーレイ - PC版では非表示 */
.fv-gradient-overlay-sp {
    display: none;
}

/* Petals - 左端基準で配置 */
.fv-petals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900px;
    z-index: 5;
    pointer-events: none;
}

.petal {
    position: absolute;
    will-change: transform;
}

/* SP Petals - PC版では非表示 */
.fv-petals-sp {
    display: none;
}

.petal-sp {
    position: absolute;
}

/* Product (Chair) - x:893, y:247, w:469, h:550 */
.fv-product {
    position: absolute;
    left: 50%;
    top: 187px;
    margin-left: calc(-720px + 893px - 10px);
    width: 469px;
    height: 550px;
    z-index: 7;
    transform: scale(0.95);
    transform-origin: center center;
}

.fv-product img {
    width: 469px;
    height: 550px;
    object-fit: contain;
}

/* FV Main Content - 左側コンテンツエリア */
/* 1440pxの時にleft:144px = 10%の比率を維持 */
.fv-main-content {
    position: absolute;
    left: 10%;
    top: 122.25px;
    width: 600px;
    z-index: 10;
}

/* Pelcare Logo (New) */
.fv-logo {
    position: relative;
    width: 507.72px;
    height: 199.43px;
    margin-bottom: 0;
}

.fv-logo img {
    width: 507.72px;
    height: 199.43px;
    object-fit: contain;
}

.fv-logo-sub {
    font-family: var(--font-mincho);
    font-size: 22px;
    color: #C4A98C;
    margin-top: -10px;
    margin-left: 80px;
}

/* さらに */
.fv-sarani {
    font-family: var(--font-mincho);
    font-weight: 400;
    font-size: 25.05px;
    color: var(--color-text);
    position: absolute;
    left: 0.31px;
    top: 212.34px;
}

/* Catchcopy */
.fv-catchcopy {
    font-family: var(--font-mincho);
    font-weight: 400;
    font-size: 62.62px;
    letter-spacing: 0.14em;
    line-height: 1.2;
    color: var(--color-text);
    position: absolute;
    left: 0.31px;
    top: 240.32px;
    white-space: nowrap;
}

/* PC版ではSP用改行を非表示 */
.sp-only {
    display: none;
}

/* PC版ではPC用改行を表示 */
.pc-only {
    display: inline;
}

/* Subcopy */
.fv-subcopy {
    font-family: var(--font-mincho);
    font-weight: 400;
    font-size: 21.39px;
    letter-spacing: 0.14em;
    color: var(--color-text);
    position: absolute;
    left: 6.16px;
    top: 351.72px;
}

/* Vertical Text - 左端固定 */
.fv-vertical-text {
    position: absolute;
    left: 23px;
    top: 230px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-garamond);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    z-index: 10;
}

/* Campaign Banner - 赤い帯 */
.fv-campaign-banner {
    position: absolute;
    bottom: 156px;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(90deg, #641016 0%, #BC1318 50%, #641016 100%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fv-campaign-banner-inner {
    position: relative;
    width: 1440px;
    height: 100%;
    display: flex;
    align-items: center;
}

.fv-campaign-text {
    font-family: var(--font-gothic);
    font-weight: 700;
    font-size: 24px;
    color: #FFFFFF;
    letter-spacing: 0.1em;
    margin-left: 88px;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* Bottom Badges Area - 画面幅いっぱいに広がる */
.fv-badges {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 156px;
    background-color: rgba(208, 185, 152, 0.8);
    z-index: 6;
}

/* Badge Inner - 1440px固定で中央配置 */
.fv-badges-inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 156px;
}

/* Badge - 2つの枠が重なる構造 */
.fv-badge {
    position: absolute;
    width: 224.35px;
    height: 107.06px;
}

/* 白い塗りのオブジェクト（後ろ・右下に5pxズレ） */
.fv-badge::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 224.35px;
    height: 107.06px;
    border: none;
    border-radius: 11px;
    background-color: rgba(255, 255, 255, 0.5);
}

/* 罫線の枠（最前面・左上） */
.fv-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 224.35px;
    height: 107.06px;
    border: 1px solid #AB6E55;
    border-radius: 11px;
    background-color: transparent;
}

.fv-badge span {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 20px;
    line-height: 25px;
    text-align: center;
    color: var(--color-text);
}

.fv-badge-01 {
    left: 88px;
    top: 24px;
}

/* Badge - 現役医師監修 */
.fv-badge-02 {
    left: 332.35px;
    top: 24px;
}

/* Badge - 大阪万博にも出展 */
.fv-badge-03 {
    left: 576.7px;
    top: 24px;
}

/* Femtech Logo - x:992, y:28.04, w:391, h:117.3 */
.fv-femtech-logo {
    position: absolute;
    left: 992px;
    top: 28.04px;
    width: 391px;
    height: 117.3px;
}

.fv-femtech-logo img {
    width: 391px;
    height: 117.3px;
    object-fit: contain;
}

/* SP用フェムテックロゴ - PC版では非表示 */
.fv-femtech-logo-sp {
    display: none;
}

/* ==========================================
   Section 1: 悩みセクション
   ========================================== */
.section-nayami {
    position: relative;
    width: 100%;
    height: 650px;
    background-color: #F4EBE1;
    z-index: 20;
    overflow: hidden;
}

.section-nayami-inner {
    position: relative;
    width: 1440px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 105px;
}

.nayami-header {
    position: relative;
    display: block;
    text-align: center;
}

.jitsuha-label {
    position: absolute;
    width: 77.43px;
    height: 72px;
    left: 50%;
    margin-left: -393px;
    top: -27px;
}

.nayami-title {
    font-family: var(--font-mincho);
    font-weight: 400;
    font-size: 48px;
    line-height: 65px;
    color: #0D0D0D;
    text-align: center;
    display: inline-block;
}

.nayami-subtitle {
    text-align: center;
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 20px;
    line-height: 32.5px;
    color: var(--color-text);
    margin-top: 30px;
}

.nayami-boxes {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-top: 50px;
}

.nayami-box {
    width: 264px;
    height: 170px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    padding-bottom: 25px;
    opacity: 0;
    transform: translateY(30px);
}

.nayami-icon {
    margin-bottom: auto;
    margin-top: 20px;
}

.nayami-icon-01 {
    width: 84.34px;
    height: 82.97px;
}

.nayami-icon-02 {
    width: 88.7px;
    height: 88.7px;
}

.nayami-icon-03 {
    width: 101.63px;
    height: 87.4px;
}

.nayami-icon-04 {
    width: 93.27px;
    height: 74px;
}

.nayami-box-text {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 21px;
    color: #AB6E55;
    text-align: center;
}

/* Section 1 Animation Initial State */
.jitsuha-label {
    opacity: 0;
    transform: translateY(20px);
}

.nayami-title {
    opacity: 0;
    transform: translateY(20px);
}

.nayami-subtitle {
    opacity: 0;
    transform: translateY(20px);
}

/* ==========================================
   Komorebi Wrapper & Background
   ========================================== */
.komorebi-wrapper {
    position: relative;
    width: 100%;
    background-image: url('images/komorebi.webp');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.komorebi-bg {
    display: none;
}

@keyframes komorebiSway {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    20% {
        transform: translate(15px, -10px) scale(1.02);
    }
    40% {
        transform: translate(-10px, 15px) scale(1);
    }
    60% {
        transform: translate(-15px, -8px) scale(1.02);
    }
    80% {
        transform: translate(10px, 12px) scale(1);
    }
}

/* ==========================================
   Section 2: 社長メッセージ
   ========================================== */
.section-president {
    position: relative;
    width: 100%;
    height: 900px;
    background-color: transparent;
    z-index: 1;
    overflow: hidden;
}

.section-president-inner {
    position: relative;
    width: 1440px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 150px;
}

.president-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 65px;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 80px;
}

.president-content {
    position: static;
    padding: 0 205px;
}

.president-text-area {
    width: 655px;
}

.president-text {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.president-signature {
    display: flex;
    align-items: flex-end;
    margin-top: 40px;
}

.rebody-logo {
    width: 302px;
    height: 128px;
    object-fit: contain;
}

.mika-sign {
    width: 206px;
    height: 50px;
    object-fit: contain;
    margin-left: 20px;
}

.president-image {
    position: absolute;
    right: 144px;
    bottom: 0;
    width: 433px;
    height: 655px;
}

.president-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}

/* ==========================================
   Section 3: 大阪万博
   ========================================== */
.section-expo {
    position: relative;
    width: 100%;
    height: 1165px;
    background-color: rgba(223, 152, 64, 0.15);
    z-index: 1;
    overflow: hidden;
}

.section-expo-inner {
    position: relative;
    width: 1440px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 100px 205px;
}

.expo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.expo-header-left {
    flex: 1;
}

.expo-label {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 25px;
    line-height: 50px;
    color: #AB6E55;
}

.expo-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 40px;
    line-height: 61.5px;
    color: var(--color-text);
    margin-top: 10px;
}

.expo-subtitle {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: var(--color-text);
    margin-top: 20px;
}

.expo-logo {
    width: 184.98px;
    height: 228px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    flex-shrink: 0;
}

.expo-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.expo-content {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-top: 70px;
}

.expo-images {
    display: flex;
    gap: 25px;
    flex-shrink: 0;
}

.expo-img {
    width: 321px;
    height: 191px;
    border-radius: 10px;
    object-fit: cover;
}

.expo-text-area {
    flex: 1;
}

.expo-caption {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: var(--color-text);
}

/* 連携実績エリア */
/* 仕様: w:1024, h:448, 角の丸み:10px, color:FFFFFF, 不透明度:60% */
/* 上の2枚の写真から60px離す */
.renkei-area {
    position: relative;
    margin: 60px auto 0;
    width: 1024px;
    height: 448px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 40px 56px;
}

/* タイトル: Shippori Mincho, medium, 28px, 文字間隔:0.9px */
.renkei-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0.9px;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 30px;
}

.renkei-boxes {
    display: flex;
    justify-content: center;
    gap: 27px;  /* 横の画像とのアキ:27px */
}

/* 各ボックス: w:288 */
.renkei-box {
    width: 288px;
}

/* 画像: w:288, h:169, 角の丸み:10px */
.renkei-img {
    width: 288px;
    height: 169px;
    border-radius: 10px;
    object-fit: cover;
}

/* タイトル: yugothic, medium, 21px, w:288, h:30 */
.renkei-box-title {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 21px;
    width: 288px;
    height: 30px;
    line-height: 30px;
    color: var(--color-text);
    text-align: center;
    margin-top: 15px;
}

/* 本文: yugothic, medium, 15px, w:288, h:64 */
.renkei-box-text {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 15px;
    width: 288px;
    height: 64px;
    line-height: 1.6;
    color: var(--color-text);
    margin-top: 8px;
}

/* ==========================================
   Section 4: 製品紹介
   ========================================== */
.section-product {
    position: relative;
    width: 100%;
    min-width: 1440px;
    height: 1812px;
    background-color: transparent;
    z-index: 1;
    overflow: hidden;
}

.section-product-inner {
    position: relative;
    width: 1440px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/* 上部エリア */
.product-top {
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 95px;
}

.product-left {
    position: relative;
    padding-left: 120px;
    width: 949px;
    text-align: center;
}

.product-logo {
    width: 482.32px;
    height: 209.93px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.product-title {
    font-family: var(--font-mincho);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.3;
    color: var(--color-text);
    margin-top: 20px;
    text-align: center;
}

.product-catch {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 18px;
    color: var(--color-text);
    margin-top: 20px;
    text-align: center;
    white-space: nowrap;
}

.product-right {
    position: absolute;
    right: 250px;
    top: 50px;
}

.product-image {
    width: 400px;
    height: 480px;
    object-fit: contain;
}

/* グラフセクション */
.product-graph-section {
    position: relative;
    width: 100%;
    margin-top: 150px;
}

.product-graph-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 40.8px;
    color: var(--color-text);
    text-align: center;
    white-space: nowrap;
}

.product-graph-title .sp-kakko {
    display: none;
}

.product-graph-boxes {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.product-graph-box {
    width: 562px;
    height: auto;
    background-color: #F4EBE1;
    border-radius: 10px;
    overflow: hidden;
}

.product-graph-box-header {
    width: 562px;
    height: 58px;
    background-color: #CCB088;
    font-family: var(--font-mincho);
    font-weight: 400;
    font-size: 25px;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-graph-box-content {
    padding: 45px 24px 50px;
    display: flex;
    justify-content: center;
}

.product-graph-img {
    width: 473px;
    height: auto;
    object-fit: contain;
    display: block;
}

.product-graph-note {
    font-family: var(--font-gothic);
    font-size: 14px;
    color: var(--color-text);
    text-align: right;
    padding: 0 24px 15px;
    margin: -35px 0 0 0;
}

/* 3つのバッジエリア */
.product-badges-area {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 100px;
}

.product-badges {
    width: 958px;
    height: 353px;
    object-fit: contain;
}

/* PC版ではSP用要素を非表示 */
.product-badges-sp,
.product-badges-sp-img,
.product-feature-box,
.product-image-bottom {
    display: none;
}

/* ==========================================
   Animations - Initial State
   ========================================== */
.fv-background,
.fv-woman,
.fv-product {
    opacity: 0;
    transform: scale(1.15);
}

.fv-logo {
    opacity: 0;
    transform: translateY(20px);
}

.fv-catchcopy,
.fv-subcopy {
    opacity: 0;
    transform: translateY(40px);
}

.header {
    opacity: 0;
    transform: translateY(-50px);
}

.fv-badges {
    opacity: 0;
    transform: translateY(50px);
}

.fv-campaign-banner {
    opacity: 0;
    transform: translateY(50px);
}

.fv-vertical-text {
    opacity: 0;
}

.petal {
    opacity: 0;
    transform: scale(1.15);
}

/* ==========================================
   Section 2: President Animation Initial State
   ========================================== */
.president-title {
    opacity: 0;
    transform: translateY(20px);
}

.president-text {
    opacity: 0;
    transform: translateY(20px);
}

.president-signature {
    opacity: 0;
    transform: translateY(20px);
}

.president-image {
    opacity: 0;
    transform: translateY(30px);
}

/* ==========================================
   Section 3: Expo Animation Initial State
   ========================================== */
.expo-label {
    opacity: 0;
    transform: translateY(20px);
}

.expo-title {
    opacity: 0;
    transform: translateY(20px);
}

.expo-subtitle {
    opacity: 0;
    transform: translateY(20px);
}

.expo-logo {
    opacity: 0;
    transform: translateY(20px);
}

.expo-img {
    opacity: 0;
    transform: translateY(30px);
}

.expo-caption {
    opacity: 0;
    transform: translateY(20px);
}

.renkei-area {
    opacity: 0;
    transform: translateY(30px);
}

/* ==========================================
   Section 4: Product Animation Initial State
   ========================================== */
.product-logo {
    opacity: 0;
    transform: translateY(20px);
}

.product-title {
    opacity: 0;
    transform: translateY(20px);
}

.product-catch {
    opacity: 0;
    transform: translateY(20px);
}

.product-badges {
    opacity: 0;
    transform: translateY(30px);
}

.product-image {
    opacity: 0;
    transform: translateY(30px);
}

/* ==========================================
   CTA Section
   ========================================== */
.section-cta {
    position: relative;
    width: 100%;
    height: 349px;
    background: linear-gradient(90deg, #F2E9C9 7%, #DBCB93 96%);
    z-index: 1;
    overflow: hidden;
}

.section-cta-inner {
    position: relative;
    width: 1440px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cta-text {
    font-family: var(--font-gothic);
    font-weight: 700;
    font-size: 20px;
    line-height: 31px;
    color: #1A1A1A;
    text-align: center;
}

.cta-highlight {
    font-size: 28px;
    background: linear-gradient(transparent 70%, rgba(255, 108, 62, 0.6) 70%);
    padding: 0 5px;
}

.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 622px;
    height: 120px;
    background-color: #FF6C3E;
    border-radius: 10px;
    margin-top: 30px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 108, 62, 0.3);
}

.cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 108, 62, 0.5);
    background-color: #FF7F55;
}

.cta-button:hover .cta-button-arrow {
    transform: translateY(-50%) translateX(5px);
}

.cta-button-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #FFFFFF;
}

.cta-button-arrow {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.cta-button-arrow img {
    display: none;
}

.cta-button-arrow::after {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 3px solid #FF6C3E;
    border-right: 3px solid #FF6C3E;
    transform: rotate(45deg);
    margin-left: -4px;
}

/* CTA Animation Initial State */
.cta-text {
    opacity: 0;
    transform: translateY(20px);
}

.cta-button {
    opacity: 0;
    transform: translateY(20px);
}

/* ==========================================
   Section: 30分約3万回の筋肉運動
   ========================================== */
.section-muscle {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 1;
    overflow: hidden;
    padding: 120px 0 90px;
}

.section-muscle-inner {
    position: relative;
    width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 143px;
}

.muscle-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 65px;
    color: var(--color-text);
    text-align: center;
}

.muscle-subtitle {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: var(--color-text);
    text-align: center;
    margin-top: 15px;
}

/* 2つのボックスの下に入れる枠 */
.muscle-row {
    display: flex;
    align-items: center;
    background-color: #F4EBE1;
    width: 1154px;
    height: 235px;
    margin: 0 auto;
    padding: 0 60px;
}

.muscle-row:first-of-type {
    margin-top: 55px;
}

.muscle-row:nth-of-type(2) {
    margin-top: 25px;
}

.muscle-row-label {
    width: 319px;
    height: 129px;
    display: flex;
    align-items: center;
}

.muscle-row-label p {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 25px;
    line-height: 40px;
    color: var(--color-text);
}

.muscle-boxes {
    display: flex;
    gap: 15px;
    margin-left: auto;
}

/* 白いボックス画像: w:230, h:170 */
.muscle-box-img {
    width: 230px;
    height: 170px;
    object-fit: contain;
}

/* コイル比較セクション */
.coil-section {
    display: flex;
    align-items: flex-start;
    width: 1152px;
    height: 328px;
    margin: 65px auto 0;
    border: 2px solid #A48C50;
    border-radius: 8px;
    padding: 18px;
    padding-left: 40px;
    position: relative;
    box-sizing: border-box;
}

.coil-text-area {
    width: 468px;
    flex-shrink: 0;
    padding-top: 22px;
}

.coil-title {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 24px;
    line-height: 35px;
    color: #A48C50;
}

.coil-description {
    font-family: var(--font-gothic);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text);
    margin-top: 15px;
}

.coil-image {
    width: 509px;
    height: 289px;
    margin-left: auto;
}

.coil-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Muscle Section Animation Initial State */
.muscle-title {
    opacity: 0;
    transform: translateY(20px);
}

.muscle-subtitle {
    opacity: 0;
    transform: translateY(20px);
}

.muscle-row {
    opacity: 0;
    transform: translateY(30px);
}

.coil-section {
    opacity: 0;
    transform: translateY(30px);
}

/* ==========================================
   Section: 医師と共同開発
   ========================================== */
.section-doctor {
    position: relative;
    width: 100%;
    height: 900px;
    z-index: 1;
    overflow: hidden;
}

/* PC版ではSP用コンテンツを非表示 */
.doctor-content-sp {
    display: none;
}

.section-doctor-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 1440px;
    height: 900px;
    z-index: 1;
}

.section-doctor-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.section-doctor-inner {
    position: relative;
    width: 1440px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.doctor-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    letter-spacing: 0.98px;
    line-height: 63px;
    color: var(--color-text);
    text-align: center;
    padding-top: 120px;
}

/* 白枠コンテンツエリア: w:1128, h:568, タイトルから60px下 */
.doctor-content {
    position: relative;
    margin: 60px auto 0;
    width: 1128px;
    height: 568px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

/* 女性医師画像: 右に138px移動、コメント囲みの下端に合わせる */
.doctor-image-female {
    position: absolute;
    left: 67px;
    bottom: 62.5px;
    width: 264px;
    height: 404px;
    z-index: 1;
}

.doctor-image-female img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* 男性医師画像: 冨院長のコメント枠の上端に合わせる */
.doctor-image-male {
    position: absolute;
    right: 23px;
    top: 62.5px;
    width: 264px;
    height: 404px;
    z-index: 1;
}

.doctor-image-male img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* プロフィールカード */
.doctor-cards {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 483px;
    height: 100%;
    z-index: 2;
}

/* 女性プロフィール（上のカード） */
.doctor-card {
    position: absolute;
    width: 483px;
    height: 223px;
    background: linear-gradient(90deg, #C4A77D 0%, rgba(204, 176, 136, 0.5) 77%);
    border-radius: 8px;
    padding: 25px 30px;
    box-sizing: border-box;
}

.doctor-card-top {
    left: 0;
    top: 37.5px;
    height: 248px;
}

/* 男性プロフィール（下のカード）: 60px右に移動 */
.doctor-card-bottom {
    left: 60px;
    top: 305px;
}

.doctor-card-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 15px;
    line-height: 40px;
    color: var(--color-text);
}

/* PC版では clinic と name を1行で表示 */
.doctor-card-clinic {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 15px;
    line-height: 40px;
    color: var(--color-text);
    display: inline;
}

.doctor-card-name {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 20px;
    line-height: 40px;
    color: var(--color-text);
    display: inline;
    margin-left: 10px;
}

.doctor-name {
    font-size: 20px;
}

.doctor-card-text {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 15px;
    line-height: 26px;
    color: var(--color-text);
    margin-top: 0;
}

/* Doctor Section Animation Initial State */
.doctor-title {
    opacity: 0;
    transform: translateY(20px);
}

.doctor-content {
    opacity: 0;
    transform: translateY(30px);
}

/* ==========================================
   CTA Section Bottom - アニメーション用クラス追加
   ========================================== */
.section-cta-bottom .cta-text {
    opacity: 0;
    transform: translateY(20px);
}

.section-cta-bottom .cta-button {
    opacity: 0;
    transform: translateY(20px);
}

/* ==========================================
   Section: Pelcare 3つのメリット
   ========================================== */
.section-merit {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    padding: 80px 0 100px;
}

.section-merit-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/komorebi.webp');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.section-merit-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(223, 152, 64, 0.15);
}

.section-merit-inner {
    position: relative;
    width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 143px;
    z-index: 1;
}

.merit-title {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: center;
    height: auto;
    padding-top: 20px;
}

.merit-title-logo {
    width: 245px;
    height: 111px;
    object-fit: contain;
    margin-bottom: -25px;
}

.merit-title-logo-text {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 48px;
    color: #C4A77D;
    margin-right: 10px;
}

.merit-title-text {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 48px;
    color: var(--color-text);
}

.merit-title-pelcare {
    font-family: var(--font-garamond);
    font-style: italic;
    font-size: 56px;
    color: #C4A77D;
}

.merit-points {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}

.merit-point {
    text-align: center;
    position: relative;
    padding-top: 50px;
}

.merit-point-label {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.merit-point-label img {
    height: 70px;
    width: auto;
}

.merit-point-box {
    width: 368px;
    height: 219px;
    background-color: #C4A77D;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: 30px;
    position: relative;
    z-index: 1;
}

.merit-point-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 30px;
    line-height: 40.6px;
    color: #FFFFFF;
    text-align: center;
}

.merit-point-text {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    color: #000000;
    text-align: center;
    margin-top: 15px;
}

.merit-modes {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 2px solid #C4A77D;
    border-radius: 10px;
    margin-top: 50px;
    padding: 8px 40px 26px 40px;
    justify-content: space-between;
}

.merit-modes-text {
    width: 320px;
    flex-shrink: 0;
}

.merit-modes-title {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 22px;
    line-height: 1.5;
    color: #A48C50;
}

.merit-modes-desc {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text);
    margin-top: 15px;
}

.merit-modes-icons {
    display: flex;
    gap: 0;
}

/* PC版ではSP用アイコン画像を非表示 */
.merit-modes-icons-sp {
    display: none;
}

.merit-mode-icon {
    text-align: center;
    margin-left: -9px;
}

.merit-mode-icon:first-child {
    margin-left: 0;
}

.merit-mode-icon-img {
    width: 151px;
    height: 151px;
    border-radius: 50%;
}

.merit-mode-icon-text {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    color: var(--color-text);
    margin-top: 10px;
}

/* ==========================================
   Section: 売って終わり？
   ========================================== */
.section-support {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    padding: 80px 0 100px;
}

.section-support-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/komorebi.webp');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.section-support-inner {
    position: relative;
    width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 143px;
    z-index: 1;
}

.support-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 65px;
    color: var(--color-text);
    text-align: center;
}

.support-subtitle {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    color: var(--color-text);
    text-align: center;
    margin-top: 20px;
}

.support-items {
    margin-top: 50px;
}

.support-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 1152px;
    height: 139px;
    background-color: transparent;
    border: 2px solid #C4A77D;
    border-radius: 70px 8px 8px 70px;
    margin-bottom: 20px;
}

.support-item-icon {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 131px;
    height: 131px;
    flex-shrink: 0;
}

.support-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.support-item-label {
    width: 80px;
    height: 80px;
    background-color: #A48C50;
    border-radius: 8px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-item-label span {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 1.3;
}

.support-item-content {
    margin-left: 155px;
}

.support-item-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 28px;
    color: var(--color-text);
}

.support-item-title-sub {
    font-size: 16px;
    color: #888;
}

.support-item-text {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 15px;
    color: var(--color-text);
    margin-top: 8px;
}

.support-item-text-list {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 15px;
    color: #A48C50;
    margin-top: 8px;
}

.support-seminars {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
    width: 1152px;
    margin-left: auto;
    margin-right: auto;
}

.support-seminar {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
}

.support-seminar-label {
    height: 58px;
    background-color: #CCB088;
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-seminar-body {
    background-color: #F4EBE1;
    padding: 10px;
}

.support-seminar-img {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
}

.support-seminar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Merit & Support Animation Initial State */
.merit-title {
    opacity: 0;
    transform: translateY(20px);
}

.merit-points {
    opacity: 0;
    transform: translateY(30px);
}

.merit-modes {
    opacity: 0;
    transform: translateY(30px);
}

.support-title {
    opacity: 0;
    transform: translateY(20px);
}

.support-subtitle {
    opacity: 0;
    transform: translateY(20px);
}

.support-item {
    opacity: 0;
    transform: translateY(20px);
}

.support-seminars {
    opacity: 0;
    transform: translateY(30px);
}

/* CTA Bottom 2 Animation */
.section-cta-bottom2 .cta-text {
    opacity: 0;
    transform: translateY(20px);
}

.section-cta-bottom2 .cta-button {
    opacity: 0;
    transform: translateY(20px);
}

/* ==========================================
   Section: 導入された店舗様の声
   ========================================== */
.section-voice {
    position: relative;
    width: 100%;
    min-height: 600px;
    background-color: rgba(223, 152, 64, 0.15);
    z-index: 1;
    overflow: hidden;
    padding: 80px 0;
}

.section-voice-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/komorebi.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
}

.section-voice-inner {
    position: relative;
    width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.voice-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 65px;
    color: var(--color-text);
    text-align: center;
}

.voice-subtitle {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-text);
    text-align: center;
    margin-top: 15px;
}

.voice-slider-wrapper {
    margin-top: 50px;
    overflow: hidden;
    cursor: grab;
}

.voice-slider-wrapper:active {
    cursor: grabbing;
}

/* スライダー矢印ボタン */
.voice-slider-prev,
.voice-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 65px;
    height: 65px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: all 0.3s ease;
    z-index: 10;
}

.voice-slider-prev svg,
.voice-slider-next svg {
    width: 62px;
    height: 62px;
}

.voice-slider-prev:hover,
.voice-slider-next:hover {
    color: #C4A77D;
}

.voice-slider-prev {
    left: 10px;
}

.voice-slider-next {
    right: 10px;
}

.section-voice-inner {
    position: relative;
}

.voice-slider-wrapper {
    position: relative;
}

/* スライダー左右のグラデーションオーバーレイ */
.voice-slider-wrapper::before,
.voice-slider-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 280px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.voice-slider-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(244, 235, 225, 0.95) 0%, rgba(244, 235, 225, 0.6) 30%, rgba(244, 235, 225, 0) 100%);
}

.voice-slider-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(244, 235, 225, 0.95) 0%, rgba(244, 235, 225, 0.6) 30%, rgba(244, 235, 225, 0) 100%);
}

.voice-slider {
    display: flex;
    gap: 30px;
    transition: transform 0.3s ease;
}

.voice-card {
    flex-shrink: 0;
    width: 280px;
    height: 411px;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 25px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.voice-card-photo {
    width: 165px;
    height: 165px;
    background-color: #f0f0f0;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 15px;
    overflow: hidden;
}

.voice-card-photo img {
    width: 110%;
    height: 110%;
    object-fit: cover;
    object-position: center;
    margin: -5%;
}

.voice-card-shop {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.4;
    text-align: center;
    margin-bottom: 10px;
}

.voice-card-tag {
    display: inline-block;
    font-family: var(--font-gothic);
    font-size: 11px;
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 15px;
}

.tag-esthetic {
    background-color: #C4A77D;
}

.tag-clinic {
    background-color: #7DA7C4;
}

.tag-dental {
    background-color: #A7C47D;
}

.tag-pain {
    background-color: #7D8FC4;
}

.tag-internal {
    background-color: #C4A07D;
}

.tag-gym {
    background-color: #C47D9E;
}

.voice-card-text {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text);
    text-align: left;
}

/* ==========================================
   Section: 導入実績
   ========================================== */
.section-results {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    padding: 80px 0;
}

.section-results-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/komorebi.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

.section-results-inner {
    position: relative;
    width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 143px;
    z-index: 2;
}

.results-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 65px;
    color: var(--color-text);
    text-align: center;
}

.results-subtitle {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-text);
    text-align: center;
    margin-top: 15px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.results-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.results-item-img {
    width: 100%;
    height: 200px;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.results-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.results-item-tags {
    position: absolute;
    top: 10px;
    left: 10px;
}

.results-tag {
    display: inline-block;
    font-family: var(--font-gothic);
    font-size: 11px;
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.6);
    padding: 4px 10px;
    border-radius: 3px;
}

.results-item-name {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 16px;
    color: var(--color-text);
    padding: 15px;
    background-color: #FFFFFF;
}

/* 導入店舗をもっと見るボタン */
.results-more-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    padding-bottom: 80px;
}

.results-more-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 340px;
    height: 54px;
    padding: 0 20px 0 30px;
    background-color: transparent;
    border: 1px solid #A48C50;
    border-radius: 27px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.results-more-btn:hover {
    background-color: rgba(164, 140, 80, 0.1);
}

.results-more-btn-text {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 16px;
    color: #A48C50;
    letter-spacing: 0.05em;
}

.results-more-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #A48C50;
    border-radius: 50%;
}

.results-more-btn-arrow svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

/* ==========================================
   Section: 製品紹介
   ========================================== */
.section-spec {
    position: relative;
    width: 100%;
    background-color: rgba(223, 152, 64, 0.15);
    z-index: 1;
    overflow: hidden;
    padding: 80px 0;
}

.section-spec-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/komorebi.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
}

.section-spec-inner {
    position: relative;
    width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 143px;
    z-index: 2;
}

.spec-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 65px;
    color: var(--color-text);
    text-align: center;
}

.spec-content {
    display: flex;
    gap: 40px;
    margin-top: 50px;
}

.spec-table-wrapper {
    flex: 1;
    height: 432px;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
}

.spec-table-title {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 18px;
    color: var(--color-text);
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-text);
}

.spec-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.spec-table th,
.spec-table td {
    font-family: var(--font-gothic);
    font-size: 14px;
    color: var(--color-text);
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.spec-table th {
    width: 100px;
    font-weight: 500;
}

.spec-set-wrapper {
    flex: 1;
    height: 432px;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.spec-set-title {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 18px;
    color: var(--color-text);
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-text);
}

.spec-set-content {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex: 1;
}

.spec-set-list {
    flex: 1;
}

.spec-set-list li {
    font-family: var(--font-gothic);
    font-size: 14px;
    color: var(--color-text);
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
}

.spec-set-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: #C4A77D;
}

.spec-set-img {
    width: 200px;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.spec-set-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================
   Section: よくある質問
   ========================================== */
.section-faq {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    padding: 80px 0;
}

.section-faq-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/komorebi.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

.section-faq-inner {
    position: relative;
    width: 1440px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 200px;
    z-index: 2;
}

.faq-title {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 48px;
    line-height: 65px;
    color: var(--color-text);
    text-align: center;
}

.faq-list {
    margin-top: 50px;
}

.faq-item {
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #fafafa;
}

.faq-q-icon {
    width: 40px;
    height: 40px;
    background-color: #C4A77D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.faq-q-text {
    font-family: var(--font-gothic);
    font-weight: bold;
    font-size: 18px;
    color: var(--color-text);
    margin-left: 20px;
    flex: 1;
}

.faq-toggle {
    font-size: 24px;
    color: #888;
    width: 30px;
    text-align: center;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 30px 25px 90px;
}

.faq-a-text {
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text);
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}

.faq-item.active .faq-a-text {
    opacity: 1;
}

/* ==========================================
   CTA Bottom 3 Animation
   ========================================== */
.section-cta-bottom3 .cta-text {
    opacity: 0;
    transform: translateY(20px);
}

.section-cta-bottom3 .cta-button {
    opacity: 0;
    transform: translateY(20px);
}

/* ==========================================
   Footer
   ========================================== */
.footer {
    background-color: #333;
    padding: 40px 0;
}

.footer-inner {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo-sub {
    display: none;
}

.footer-logo img {
    height: 40px;
    filter: brightness(0) invert(1);
}

.footer-nav {
    display: flex;
    gap: 30px;
}

.footer-nav a {
    font-family: var(--font-gothic);
    font-size: 14px;
    color: #FFFFFF;
    transition: opacity 0.3s ease;
}

.footer-nav a:hover {
    opacity: 0.7;
}

.footer-copyright {
    font-family: var(--font-gothic);
    font-size: 12px;
    color: #999;
}

/* Animation Initial States */
.voice-title, .voice-subtitle {
    opacity: 0;
    transform: translateY(20px);
}

.voice-slider-wrapper {
    opacity: 0;
    transform: translateY(30px);
}

.results-title, .results-subtitle {
    opacity: 0;
    transform: translateY(20px);
}

.results-grid {
    opacity: 0;
    transform: translateY(30px);
}

.spec-title {
    opacity: 0;
    transform: translateY(20px);
}

.spec-content {
    opacity: 0;
    transform: translateY(30px);
}

.faq-title {
    opacity: 0;
    transform: translateY(20px);
}

.faq-list {
    opacity: 0;
    transform: translateY(30px);
}

/* ==========================================
   Back to Top Button
   ========================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 54px;
    height: 54px;
    background-color: #A48C50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.back-to-top:hover {
    background-color: #8A7642;
    transform: translateY(-3px);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-arrow {
    width: 13px;
    height: 13px;
    border-left: 2.5px solid #FFFFFF;
    border-top: 2.5px solid #FFFFFF;
    transform: rotate(45deg);
    margin-top: 4px;
}

/* SP版固定フッター - PC版では非表示 */
.sp-fixed-footer {
    display: none;
}

/* ==========================================
   PC版 中間サイズ対応 (769px〜1439px)
   指示されたセクションのみ
   ========================================== */
/* 1440px以上でも flower_06 を非表示 */
.fv-petals img:nth-child(6) {
    display: none;
}

@media screen and (min-width: 769px) and (max-width: 1439px) {

    /* FVセクション - ウィンドウ幅に追従 */
    .fv {
        min-width: 1200px;
    }

    /* 1200px時に追加で花びらを非表示 */
    /* flower_05(5), flower_08(7), flower_10(9), flower_11(10) */
    .fv-petals img:nth-child(5),
    .fv-petals img:nth-child(7),
    .fv-petals img:nth-child(9),
    .fv-petals img:nth-child(10) {
        display: none;
    }

    /* 2) FVメインコンテンツ - 20px右に移動、25px下に移動、90%縮小 */
    .fv-main-content {
        left: calc(5% + 20px);
        top: calc(122.25px + 25px);
        transform: scale(0.9);
        transform-origin: left top;
    }

    /* 3) FV縦テキスト - 背景画像の上下中央に配置 */
    .fv-vertical-text {
        top: 230px;
    }

    /* FV商品画像（椅子） - もっと右寄りに配置、90%縮小 */
    .fv-product {
        left: auto;
        right: 40px;
        margin-left: 0;
        transform: scale(0.9);
        transform-origin: right center;
    }

    /* FV女性画像 - 元スタイルと同じ位置を維持 */
    .fv-woman {
        left: calc(50% - 970px);
        right: auto;
        margin-left: 0;
    }

    /* FVバッジエリア - 全体を縮小して収める */
    .fv-badges-inner {
        width: 1440px;
        left: 50%;
        transform: translateX(-50%) scale(0.83);
        transform-origin: center center;
    }

    /* 製品紹介セクション - ロゴと製品画像の重なり防止 */
    .section-product {
        min-width: 1200px;
    }

    /* 3つのバッジ - 右切れ防止 */
    .product-badges {
        width: calc(100vw - 240px);
        max-width: 958px;
    }

    /* グラフボックス - 右切れ防止 */
    .product-graph-boxes {
        width: calc(100vw - 240px);
        max-width: 1154px;
        margin-left: auto;
        margin-right: auto;
    }

    .product-graph-box {
        width: calc(50% - 15px);
        max-width: 562px;
    }
}

/* ==========================================
   タブレット版 (769px〜1199px)
   1200pxレイアウトを縮小表示
   ========================================== */
@media screen and (min-width: 744px) and (max-width: 1199px) {
    html {
        overflow-x: hidden;
    }

    body {
        min-width: 1200px;
        transform: scale(calc(100vw / 1200));
        transform-origin: top left;
        width: 1200px;
    }
}

/* ==========================================
   SP版 レスポンシブ対応 (743px以下)
   ========================================== */
@media screen and (max-width: 743px) {

    /* SP版固定フッターを表示 */
    .sp-fixed-footer {
        display: block;
    }
    
    /* ==========================================
       Header SP
       ========================================== */
    .header {
        height: 60px;
    }
    
    .header-inner {
        padding: 0 15px;
    }
    
    .header-logo {
        top: 0;
    }
    
    .header-logo img {
        width: 90px;
        height: auto;
    }
    
    .header-nav {
        display: none;
    }
    
    .header-cta {
        display: none;
    }
    
    /* Hamburger Menu */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
        gap: 6px;
        align-items: flex-end;
    }
    
    .hamburger-line {
        display: block;
        height: 2px;
        background-color: var(--color-text);
        transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    }
    
    .hamburger-line:nth-child(1) {
        width: 32px;
    }
    
    .hamburger-line:nth-child(2) {
        width: 24px;
    }
    
    .hamburger-line:nth-child(3) {
        width: 16px;
    }
    
    .hamburger.is-active .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .hamburger.is-active .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.is-active .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        width: 32px;
    }
    
    .header.is-scrolled .hamburger-line {
        background-color: var(--color-text);
    }
    
    /* SP Navigation */
    .sp-nav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .sp-nav.is-open {
        display: block;
    }

    /* ハンバーガーメニューが開いた時、ヘッダー背景を白に */
    .header.menu-open {
        background-color: var(--color-white);
    }

    .sp-nav ul {
        display: flex;
        flex-direction: column;
    }

    .sp-nav li {
        border-bottom: 1px solid #eee;
    }

    .sp-nav li:last-child {
        border-bottom: none;
    }
    
    .sp-nav a {
        display: block;
        padding: 15px 20px;
        font-size: 14px;
        color: var(--color-text);
    }
    
    .sp-nav-cta {
        background-color: #A48C50;
        color: #fff !important;
        text-align: center;
    }
    
    /* ==========================================
       First View SP
       ========================================== */
    .fv {
        min-width: 100%;
        height: 660px;
        min-height: auto;
        padding-bottom: 0;
        overflow: hidden;
    }
    
    .fv-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .fv-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .fv-inner {
        position: relative;
        width: 375px;
        height: 660px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 auto;
        overflow: hidden;
    }
    
    .fv-petals {
        display: none;
    }
    
    /* SP版花びらを表示 */
    .fv-petals-sp {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        pointer-events: none;
    }
    
    .petal-sp {
        position: absolute;
    }
    
    .fv-woman {
        position: absolute;
        left: calc(-439px + 7px);
        top: 261px;
        margin-left: 0;
        width: 977.35px;
        height: 753.25px;
        z-index: 2;
    }

    .fv-woman img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left top;
    }

    /* SP用グラデーションオーバーレイ - 女性画像の上、商品とロゴの下 */
    .fv-gradient-overlay-sp {
        display: block;
        position: absolute;
        left: 0;
        top: 415px;
        width: 100%;
        height: 250px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 1) 100%);
        z-index: 3;
        pointer-events: none;
    }

    .fv-product {
        display: block;
        position: absolute;
        left: 47%;
        top: 313px;
        margin-left: 0;
        width: 55%;
        max-width: 206.64px;
        height: auto;
        z-index: 10;
        transform: scale(1.05);
        transform-origin: center center;
    }

    .fv-product img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    
    .fv-main-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 0;
        text-align: left;
        z-index: 5;
    }

    .fv-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 53px;
        width: 218.73px;
        height: 95.2px;
        margin: 0;
    }

    .fv-logo img {
        width: 218.73px;
        height: 95.2px;
        object-fit: contain;
    }

    .fv-logo-sub {
        display: none;
    }

    .fv-sarani {
        position: absolute;
        left: 10%;
        top: 136.28px;
        font-size: calc(14px + 1.8vw);
        margin: 0;
    }

    .fv-catchcopy {
        position: absolute;
        left: 9%;
        top: 163px;
        width: auto;
        height: auto;
        font-size: calc(28px + 4.2vw);
        font-weight: 400;
        letter-spacing: 0.14em;
        line-height: 1.3;
        white-space: normal;
        margin: 0;
        text-align: left;
        transform-origin: left top;
    }

    .fv-subcopy {
        position: absolute;
        left: 10%;
        top: 293.31px;
        font-size: calc(10px + 1.3vw);
        font-weight: 400;
        letter-spacing: 0.14em;
        line-height: 1.44;
        margin: 0;
        text-align: left;
        transform-origin: left top;
    }
    
    /* SP版で改行を有効にする */
    .sp-only {
        display: inline;
    }
    
    /* SP版でPC用改行を非表示 */
    .pc-only {
        display: none;
    }
    
    .fv-vertical-text {
        display: none;
    }
    
    /* SP用フェムテックロゴ */
    .fv-femtech-logo-sp {
        display: block;
        position: absolute;
        left: 1%;
        top: 470px;
        width: 57%;
        max-width: 215.05px;
        height: auto;
        margin: 0;
        z-index: 12;
    }
    
    .fv-femtech-logo-sp img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    /* SP版 Campaign Banner */
    .fv-campaign-banner {
        position: absolute;
        bottom: 95px;
        left: 0;
        width: 100%;
        height: 35px;
        z-index: 6;
        justify-content: flex-start;
        padding-left: 20px;
        background: linear-gradient(90deg, #641016 0%, #BC1318 50%, #641016 100%);
    }

    .fv-campaign-banner-inner {
        width: 100%;
        justify-content: flex-start;
    }

    .fv-campaign-text {
        font-size: 15px;
        margin-left: 0;
        letter-spacing: 0.05em;
    }

    .fv-badges {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 15px 20px;
        display: block;
    }

    .fv-badges-inner {
        position: relative;
        width: 100%;
        height: auto;
        left: 0;
        transform: none;
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    
    .fv-badge {
        position: relative;
        width: 110px;
        height: 65px;
        margin: 0;
        left: auto !important;
        top: auto !important;
        flex-shrink: 0;
    }
    
    .fv-badge::before {
        top: 3px;
        left: 3px;
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
    
    .fv-badge::after {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }
    
    .fv-badge span {
        font-size: 12px;
        line-height: 1.3;
    }
    
    /* PC用フェムテックロゴを非表示 */
    .fv-femtech-logo {
        display: none;
    }
    
    /* ==========================================
       Section 悩み SP
       ========================================== */
    .section-nayami {
        min-width: 100%;
        height: auto;
        padding: 50px 0 60px;
    }
    
    .section-nayami-inner {
        width: 100%;
        padding: 0 25px;
    }
    
    .nayami-header {
        position: relative;
        display: block;
        text-align: center;
        padding-left: 30px;
    }
    
    .jitsuha-label {
        position: absolute;
        left: 25px;
        top: -5px;
        width: 55px;
        height: 51px;
        margin: 0;
    }
    
    .nayami-title {
        font-size: 31px;
        line-height: 45px;
        text-align: center;
        display: inline-block;
    }
    
    .nayami-subtitle {
        font-size: 16px;
        font-weight: 500;
        line-height: 25px;
        margin-top: 25px;
        text-align: center;
    }
    
    .nayami-boxes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 30px;
    }
    
    .nayami-box {
        width: 100%;
        max-width: none;
        height: 130px;
        padding: 15px 10px;
        border-radius: 10px;
    }
    
    .nayami-icon {
        margin-top: 10px;
        margin-bottom: auto;
    }
    
    .nayami-icon-01,
    .nayami-icon-02,
    .nayami-icon-03,
    .nayami-icon-04 {
        width: 55px;
        height: 55px;
    }
    
    .nayami-box-text {
        font-size: 14px;
        margin-top: auto;
    }
    
    /* ==========================================
       Komorebi Wrapper SP
       ========================================== */
    .komorebi-wrapper {
        min-width: 100%;
        background-attachment: scroll;
    }
    
    /* ==========================================
       Section 社長メッセージ SP
       ========================================== */
    .section-president {
        min-width: 100%;
        height: auto;
        padding: 50px 0 0;
        background-image: url('images/komorebi.webp');
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }
    
    .section-president-inner {
        position: relative;
        width: 100%;
        min-height: 850px;
        margin: 0 auto;
        padding: 0 20px;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .president-title {
        font-size: 27px;
        font-weight: 500;
        line-height: 43px;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .president-content {
        padding: 0;
        display: block;
        position: static;
    }
    
    .president-text-area {
        width: 100%;
        max-width: 335px;
        margin: 0 auto;
    }
    
    .president-text {
        font-size: 18px;
        font-weight: 500;
        line-height: 30px;
        text-align: left;
    }
    
    .president-signature {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 40px;
        position: relative;
        z-index: 2;
        width: auto;
    }
    
    .rebody-logo {
        width: 180px;
        height: auto;
    }
    
    .mika-sign {
        width: 120px;
        height: auto;
        margin-left: 0;
        margin-top: 10px;
    }
    
    .president-image {
        position: absolute;
        left: 167px;
        top: 533px;
        width: auto;
        height: auto;
        margin: 0;
        z-index: 1;
    }
    
    .president-image img {
        width: 223px;
        height: auto;
        object-fit: contain;
    }
    
    /* ==========================================
       Section 大阪万博 SP
       ========================================== */
    .section-expo {
        min-width: 100%;
        height: auto;
        padding: 50px 0 60px;
        background-color: rgba(223, 152, 64, 0.15);
        background-image: none;
    }
    
    .section-expo-inner {
        width: 100%;
        padding: 0 25px;
    }
    
    .expo-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .expo-header-left {
        text-align: left;
        width: 100%;
    }
    
    .expo-label {
        font-family: var(--font-gothic);
        font-weight: bold;
        font-size: 17px;
        line-height: 35px;
        letter-spacing: 0.63px;
        text-align: left;
    }
    
    .expo-title {
        font-family: var(--font-mincho);
        font-weight: 500;
        font-size: 27px;
        line-height: 43px;
        letter-spacing: 0.65px;
        text-align: left;
        margin-top: 5px;
    }
    
    .expo-subtitle {
        font-size: 16px;
        line-height: 1.5;
        text-align: left;
        margin-top: 15px;
    }
    
    .expo-logo {
        position: relative;
        width: 142px;
        height: 175px;
        margin: 30px auto 0;
        padding: 15px;
    }
    
    .expo-content {
        flex-direction: column;
        margin-top: 30px;
    }
    
    .expo-images {
        flex-direction: column;
        gap: 15px;
    }
    
    .expo-img {
        width: 100%;
        height: auto;
    }
    
    .expo-caption {
        font-family: var(--font-gothic);
        font-weight: 500;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0;
        text-align: left;
        margin-top: 20px;
    }
    
    .renkei-area {
        width: 100%;
        height: auto;
        padding: 30px 25px;
        margin-top: 40px;
    }
    
    .renkei-title {
        font-family: var(--font-mincho);
        font-weight: 500;
        font-size: 25px;
        line-height: 36px;
        letter-spacing: 0.9px;
        text-align: left;
    }
    
    .renkei-boxes {
        flex-direction: column;
        gap: 30px;
        margin-top: 25px;
    }
    
    .renkei-box {
        width: 100%;
        text-align: left;
    }
    
    .renkei-img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        display: block;
    }
    
    .renkei-box-title {
        width: 100%;
        font-family: var(--font-gothic);
        font-weight: 500;
        font-size: 24px;
        color: #AB6E55;
        letter-spacing: 1px;
        text-align: left !important;
        height: auto;
        line-height: 1.4;
        margin-top: 15px;
    }
    
    .renkei-box-text {
        width: 100%;
        height: auto;
        font-family: var(--font-gothic);
        font-weight: 500;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0;
        text-align: left !important;
        margin-top: 10px;
    }

    /* ==========================================
       Section 製品紹介 SP
       ========================================== */
    .section-product {
        min-width: 100%;
        height: auto;
        padding: 40px 0 0;
        background-image: url('images/komorebi.webp');
        background-size: 200% auto;
        background-position: center top;
        background-repeat: repeat;
        background-attachment: fixed;
    }
    
    .section-product-inner {
        position: relative;
        width: 100%;
        min-height: auto;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    
    .product-left {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        padding: 0;
        text-align: center;
        margin: 0 auto;
    }
    
    .product-logo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 300px;
        height: auto;
        margin: 0 auto !important;
        display: block;
    }
    
    .product-title {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
        top: 0;
        font-size: 27.6px;
        line-height: 1.4;
        white-space: nowrap;
        text-align: center;
        width: 100%;
        margin-top: 20px !important;
    }
    
    .product-catch {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
        top: 0;
        font-size: 17.25px;
        line-height: 1.6;
        text-align: center;
        width: 100%;
        margin-top: 20px !important;
    }
    
    .product-badges {
        display: none;
    }
    
    .product-right {
        display: none;
    }
    
    .product-image {
        display: none;
    }
    
    /* SP用 製品画像（上部に表示） */
    .product-image-bottom {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 298.83px;
        height: 358px;
        margin: 30px auto 0;
        display: block;
        order: 1;
    }
    
    /* SP用 3つのバッジ画像（グラフの下に移動） */
    .product-badges-sp-img {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 320px;
        height: auto;
        display: block;
        margin: 40px auto 40px;
        order: 4;
    }
    
    /* SP用 製品バッジエリア（非表示） */
    .product-badges-sp {
        display: none;
    }
    
    .product-badge-circle,
    .product-badge-box,
    .product-feature-box,
    .product-feature-label,
    .product-feature-text,
    .product-feature-plus {
        display: none;
    }
    
    /* SP版 product-top */
    .product-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
    }
    
    /* SP版 グラフセクション */
    .product-graph-section {
        margin-top: 40px;
        order: 2;
        width: 100%;
    }
    
    .product-graph-title {
        font-size: 24px;
        padding: 0 20px;
        text-align: center;
    }
    
    .product-graph-title .sp-kakko {
        display: inline;
    }
    
    .product-graph-boxes {
        flex-direction: column;
        gap: 20px;
        padding: 0;
        align-items: center;
    }
    
    .product-graph-box {
        width: calc(100% - 40px);
        max-width: 335px;
        height: auto;
        margin: 0 auto;
    }
    
    .product-graph-box-header {
        width: 100%;
        height: 45px;
        font-size: 18px;
    }
    
    .product-graph-box-content {
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .product-graph-img {
        width: 90%;
        height: auto;
    }

    .product-graph-note {
        font-size: 12px;
        padding: 0 15px 10px;
        margin: -10px 0 0 0;
    }

    /* SP版 バッジエリア */
    .product-badges-area {
        margin-top: 0;
        order: 3;
    }
    
    /* ==========================================
       Section CTA SP
       ========================================== */
    .section-cta {
        min-width: 100%;
        height: auto;
        padding: 30px 20px;
    }
    
    .section-cta-inner {
        position: relative;
        width: 335px;
        height: auto;
        margin: 0 auto;
        left: auto;
        transform: none;
    }
    
    .section-cta .cta-text {
        width: 332px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }

    .cta-highlight {
        font-size: 25px;
    }

    .section-cta .cta-button {
        width: 335px;
        height: 66px;
        margin-top: 20px;
        border-radius: 8px;
    }
    
    .section-cta .cta-button-text {
        font-family: var(--font-gothic);
        font-weight: bold;
        font-size: 23px;
        letter-spacing: 0.03em;
    }
    
    .section-cta .cta-button-arrow {
        right: 15px;
        width: 30px;
        height: 30px;
    }
    
    .section-cta .cta-button-arrow img {
        width: 30px;
        height: 30px;
    }
    
    .section-cta-bottom,
    .section-cta-bottom2,
    .section-cta-bottom3 {
        min-width: 100%;
        padding: 30px 20px;
    }
    
    .section-cta-bottom-inner,
    .section-cta-bottom2-inner,
    .section-cta-bottom3-inner {
        width: 335px;
        margin: 0 auto;
    }
    
    .section-cta-bottom .cta-text,
    .section-cta-bottom2 .cta-text,
    .section-cta-bottom3 .cta-text {
        width: 332px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }
    
    .section-cta-bottom .cta-button,
    .section-cta-bottom2 .cta-button,
    .section-cta-bottom3 .cta-button {
        width: 335px;
        height: 66px;
        margin-top: 20px;
        border-radius: 8px;
    }
    
    .section-cta-bottom .cta-button-text,
    .section-cta-bottom2 .cta-button-text,
    .section-cta-bottom3 .cta-button-text {
        font-family: var(--font-gothic);
        font-weight: bold;
        font-size: 23px;
        letter-spacing: 0.03em;
    }
    
    .cta-button-arrow {
        right: 15px;
        width: 30px;
        height: 30px;
    }
    
    .cta-button-arrow img {
        width: 30px;
        height: 30px;
    }
    
    /* ==========================================
       Section 30分3万回の筋肉運動 SP
       ========================================== */
    .section-muscle {
        min-width: 100%;
        height: auto;
        padding: 60px 0 100px;
    }
    
    .section-muscle-inner {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .muscle-title {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        font-family: var(--font-mincho);
        font-weight: 500;
        font-size: 33px;
        line-height: 46px;
        text-align: center;
        margin: 0;
    }
    
    .muscle-subtitle {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        font-family: var(--font-mincho);
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        margin: 0;
        margin-top: 15px;
    }
    
    .muscle-row {
        width: 335px;
        max-width: none;
        height: auto;
        min-height: 600px;
        background-color: #F4EBE1;
        margin: 30px auto 0;
        padding: 60px 15px 30px;
        flex-direction: column;
        align-items: center;
    }
    
    .muscle-row:first-of-type {
        margin-top: 40px;
    }
    
    .muscle-row:nth-of-type(2) {
        margin-top: 30px;
    }
    
    .muscle-row-label {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
        display: flex;
        justify-content: center;
    }
    
    .muscle-row-label p {
        font-size: 19.8px;
        line-height: 30.8px;
        text-align: center;
    }
    
    .muscle-boxes {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-left: 0;
        align-items: center;
    }
    
    .muscle-box-img {
        width: 230px;
        height: 170px;
        object-fit: contain;
    }
    
    /* コイル比較セクション SP */
    .coil-section {
        width: 335px;
        height: auto !important;
        margin: 40px auto 0;
        margin-bottom: 0;
        flex-direction: column;
        padding: 20px;
        padding-bottom: 20px;
    }
    
    .coil-text-area {
        width: 100%;
        padding: 0;
        padding-top: 0 !important;
    }
    
    .coil-title {
        font-family: var(--font-gothic);
        font-weight: bold;
        font-size: 24px;
        line-height: 35px;
    }
    
    .coil-description {
        font-size: 17px;
        line-height: 1.6;
        margin-top: 15px;
    }

    .coil-image {
        width: 100% !important;
        height: auto !important;
        margin-top: 20px;
        margin-bottom: 0;
        margin-left: 0 !important;
    }
    
    .coil-image img {
        width: 100%;
        height: auto !important;
        display: block;
    }
    
    /* ==========================================
       Section 骨盤底筋 SP
       ========================================== */
    .section-kotsuban {
        min-width: 100%;
        height: auto;
        padding: 60px 0;
    }
    
    .section-kotsuban-inner {
        width: 100%;
        padding: 0 20px;
    }
    
    .kotsuban-title {
        font-size: 24px;
        line-height: 1.4;
    }
    
    .kotsuban-content {
        flex-direction: column;
        gap: 30px;
        margin-top: 40px;
    }
    
    .kotsuban-image {
        width: 100%;
        height: auto;
    }
    
    .kotsuban-text-area {
        width: 100%;
    }
    
    .kotsuban-text {
        font-size: 14px;
        line-height: 1.8;
    }
    
    /* ==========================================
       Section 骨盤底筋の役割 SP
       ========================================== */
    .section-yakuwari {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-yakuwari-inner {
        width: 100%;
        padding: 0 20px;
    }
    
    .yakuwari-title {
        font-size: 22px;
    }
    
    .yakuwari-boxes {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 30px;
    }
    
    .yakuwari-box {
        padding: 20px 10px;
    }
    
    .yakuwari-icon {
        width: 50px;
        height: 50px;
    }
    
    .yakuwari-box-title {
        font-size: 14px;
    }
    
    /* ==========================================
       Section メリット SP
       ========================================== */
    .section-merit {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-merit-inner {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* SP版でも背景を表示（PC版と同じ） */
    .section-merit-bg {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('images/komorebi.webp');
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        z-index: 0;
    }
    
    .section-merit-bg::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(223, 152, 64, 0.15);
    }
    
    /* タイトル部分 */
    .merit-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: auto !important;
        padding: 0 !important;
    }
    
    .merit-title-logo {
        width: 200px !important;
        height: auto !important;
        margin: 0 auto !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
    }

    .merit-title-logo-text {
        font-family: var(--font-mincho);
        font-weight: 500;
        font-size: 31px !important;
        line-height: 1.2;
        color: #C4A77D;
        margin: 0 auto !important;
    }

    .merit-title-text {
        font-size: 31px !important;
        margin-top: 10px !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
    }
    
    /* ポイント部分 - タイトルとの間隔を77px詰める */
    .merit-points {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: -47px;
    }
    
    .merit-point {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        margin-top: -50px;
    }
    
    .merit-point:first-child {
        margin-top: 0;
    }
    
    /* Point画像 - ボックスに少しだけかぶる */
    .merit-point-label {
        text-align: center;
        margin-bottom: -20px;
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: none;
        display: flex;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Point01, 02, 03すべて同じサイズに統一 */
    .merit-point-label img {
        height: 70px;
        width: auto;
    }
    
    .merit-point-box {
        width: calc(100% - 40px);
        max-width: 335px;
        background: linear-gradient(180deg, #C4A77D 0%, rgba(204, 176, 136, 0.7) 100%);
        border-radius: 0;
        padding: 30px 20px 30px;
        margin-bottom: 0;
        position: relative;
        z-index: 1;
        margin-left: auto;
        margin-right: auto;
    }
    
    .merit-point-title {
        font-size: 24px !important;
        text-align: center;
    }
    
    .merit-point-text {
        font-size: 18px !important;
        line-height: 26px !important;
        text-align: center;
        margin-top: 15px;
    }
    
    /* 4モード部分 - 囲み罫線付き */
    .merit-modes {
        margin-top: 40px;
        border: 2px solid #C4A77D !important;
        border-radius: 10px !important;
        flex-direction: column;
        padding: 30px 20px !important;
        background-color: rgba(255, 255, 255, 0.8) !important;
        width: calc(100% - 40px);
        max-width: 335px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .merit-modes-text {
        width: 100% !important;
        text-align: left;
    }
    
    .merit-modes-title {
        font-size: 20px !important;
        line-height: 1.5;
    }
    
    .merit-modes-desc {
        font-size: 14px !important;
        line-height: 1.8;
        margin-top: 10px;
    }
    
    /* PC用アイコンを非表示 */
    .merit-modes-icons-pc {
        display: none !important;
    }
    
    /* SP用アイコン画像を表示 */
    .merit-modes-icons-sp {
        display: block !important;
        text-align: center;
        margin-top: 20px;
    }
    
    .merit-modes-icons-sp-img {
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    
    /* ==========================================
       Section ドクター SP
       ========================================== */
    .section-doctor {
        min-width: 100% !important;
        height: auto !important;
        padding: 40px 0 60px !important;
        overflow: visible !important;
    }
    
    .section-doctor-inner {
        width: 375px;
        height: auto !important;
        margin: 0 auto;
        padding: 0 20px;
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }
    
    .section-doctor-bg {
        display: none !important;
    }
    
    .doctor-title {
        font-family: var(--font-mincho);
        font-weight: 500;
        font-size: 31px;
        line-height: 45px;
        letter-spacing: 0.99px;
        text-align: center;
        margin: 0 auto;
        padding-top: 0 !important;
    }
    
    /* PC用コンテンツを非表示 */
    .doctor-content-pc {
        display: none !important;
    }
    
    /* SP用コンテンツを表示 */
    .doctor-content-sp {
        display: block !important;
        margin-top: 30px;
    }
    
    /* 医師ブロック（写真＋カード） */
    .doctor-block {
        position: relative;
        width: 335px;
        margin: 0 auto 40px;
    }
    
    .doctor-block:last-child {
        margin-bottom: 0;
    }
    
    /* 医師写真 - カードより狭く、中央揃え */
    .doctor-block-image {
        width: 264px;
        height: 403.52px;
        overflow: hidden;
        margin: 0 auto;
    }
    
    .doctor-block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }
    
    /* コメントカード - PC版と同じグラデーション */
    .doctor-block-card {
        position: relative;
        width: 335px;
        margin-top: -60px;
        padding: 20px;
        background: linear-gradient(90deg, #C4A77D 0%, rgba(204, 176, 136, 0.5) 77%);
        border-radius: 0;
    }
    
    .doctor-block-clinic {
        font-family: var(--font-mincho);
        font-weight: 500;
        font-size: 15px;
        line-height: 1.4;
        color: var(--color-text);
        margin-bottom: 5px;
    }
    
    .doctor-block-name {
        font-family: var(--font-mincho);
        font-weight: 500;
        font-size: 20px;
        line-height: 1.4;
        color: var(--color-text);
        margin-bottom: 15px;
    }
    
    .doctor-block-name .doctor-name {
        font-size: 20px;
    }
    
    .doctor-block-text {
        font-family: var(--font-gothic);
        font-weight: 500;
        font-size: 16px;
        line-height: 23px;
        color: var(--color-text);
    }
    
    /* 旧クラス非表示 */
    .doctor-content {
        display: none !important;
    }
    
    .doctor-cards,
    .doctor-card,
    .doctor-image,
    .doctor-image-female,
    .doctor-image-male {
        display: none !important;
    }
    
    /* ==========================================
       Section サポート SP
       ========================================== */
    .section-support {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-support-inner {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .support-title {
        font-size: 31px !important;
        line-height: 45px !important;
        text-align: center !important;
    }
    
    .support-subtitle {
        font-size: 20px !important;
        line-height: 30px !important;
        text-align: center !important;
        margin-top: 15px;
    }
    
    .support-items {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        margin-top: 30px;
        align-items: center;
    }
    
    .support-item {
        position: static !important;
        display: block !important;
        width: 335px !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 auto;
        border-radius: 8px !important;
        padding: 0 !important;
        border: 2px solid #C4A77D !important;
        overflow: hidden !important;
        background-color: #fff !important;
    }
    
    /* SP版では丸いアイコンを非表示 */
    .support-item-icon {
        display: none !important;
    }
    
    /* SP版用ラベル（故障時も安心！など）- 高さ40px */
    .support-item-label {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: 40px !important;
        line-height: 40px !important;
        background-color: #C4A77D !important;
        color: #fff !important;
        font-family: var(--font-gothic);
        font-weight: bold;
        font-size: 16px !important;
        text-align: center !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    
    .support-item-content {
        position: static !important;
        margin-left: 0 !important;
        padding: 15px 20px 20px !important;
    }
    
    .support-item-title {
        font-size: 20px !important;
        font-weight: bold !important;
        color: #C4A77D !important;
        line-height: 1.4 !important;
    }
    
    .support-item-title-sub {
        font-size: 14px !important;
        font-weight: normal !important;
        color: #888 !important;
        display: inline !important;
    }
    
    .support-item-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-top: 10px !important;
        color: var(--color-text) !important;
    }
    
    .support-item-text-list {
        font-size: 14px !important;
        color: #C4A77D !important;
        margin-top: 10px !important;
        line-height: 1.6 !important;
    }
    
    /* SP版セミナー - 縦並び */
    .support-seminars {
        flex-direction: column !important;
        gap: 20px !important;
        width: 335px !important;
        margin: 30px auto 0 !important;
    }
    
    .support-seminar {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
    }
    
    .support-seminar-label {
        height: 40px;
        font-family: var(--font-mincho);
        font-size: 17.6px;
        line-height: 40px;
        display: block;
    }
    
    .support-seminar-body {
        padding: 10px;
    }

    .support-seminar-img {
        height: auto;
    }
    
    .support-seminar-img img {
        height: auto;
    }
    
    /* ==========================================
       Section セミナー SP
       ========================================== */
    .section-seminar {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-seminar-inner {
        width: 100%;
        padding: 0 20px;
    }
    
    .seminar-title {
        font-size: 20px;
    }
    
    .seminar-boxes {
        flex-direction: column;
        gap: 20px;
        margin-top: 30px;
    }
    
    .seminar-box {
        width: 100%;
    }
    
    .seminar-box-title {
        font-size: 16px;
    }
    
    .seminar-box-text {
        font-size: 14px;
    }
    
    /* ==========================================
       Section 使用者の声 SP
       ========================================== */
    .section-voice {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-voice-inner {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
        box-sizing: border-box;
    }
    
    .voice-slider-wrapper {
        margin-top: 30px;
        overflow: hidden !important;
        width: 260px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    
    /* SP版では矢印を表示（section-voice-inner基準） */
    .voice-slider-prev,
    .voice-slider-next {
        display: flex !important;
        position: absolute !important;
        width: 40px;
        height: 40px;
        top: 60%;
        transform: translateY(-50%);
        z-index: 20;
        background-color: transparent;
        border: none;
        color: #999;
        align-items: center;
        justify-content: center;
    }
    
    .voice-slider-prev svg,
    .voice-slider-next svg {
        width: 39px;
        height: 39px;
    }
    
    .voice-slider-prev {
        left: 10px;
    }
    
    .voice-slider-next {
        right: 10px;
    }
    
    /* SP版グラデーションを無効化 */
    .voice-slider-wrapper::before,
    .voice-slider-wrapper::after {
        display: none;
    }
    
    .voice-title {
        font-size: 33px !important;
        line-height: 46px !important;
        text-align: center !important;
    }
    
    .voice-subtitle {
        font-size: 20px !important;
        line-height: 30px !important;
        text-align: center !important;
        margin-top: 10px;
    }
    
    .voice-slider-wrapper {
        margin-top: 30px;
        overflow: hidden !important;
        width: 260px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    
    .voice-slider {
        gap: 30px;
        padding-bottom: 20px;
        display: flex !important;
    }

    .voice-card {
        width: 260px !important;
        height: auto !important;
        min-height: 380px !important;
        flex-shrink: 0;
        padding: 25px 20px !important;
        margin: 0 !important;
    }
    
    .voice-card-photo {
        width: 140px !important;
        height: 140px !important;
    }
    
    .voice-card-shop {
        font-size: 15px !important;
        margin-top: 15px;
    }
    
    .voice-card-tag {
        margin-top: 10px;
    }
    
    .voice-card-text {
        font-size: 14px !important;
        line-height: 1.6;
        margin-top: 15px;
    }
    
    /* ==========================================
       Section 導入実績 SP
       ========================================== */
    .section-results {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-results-inner {
        width: 100%;
        padding: 0 20px;
    }
    
    .results-title {
        font-size: 31px !important;
    }
    
    .results-subtitle {
        font-size: 20px !important;
    }
    
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .results-item-img {
        height: 120px;
    }
    
    .results-item-name {
        font-size: 12px;
        padding: 8px;
    }
    
    .results-tag {
        font-size: 10px;
    }

    /* SP版 導入店舗をもっと見るボタン */
    .results-more-btn-wrap {
        margin-top: 30px;
        padding-bottom: 50px;
    }

    .results-more-btn {
        width: 100%;
        max-width: 300px;
        height: 50px;
        padding: 0 15px 0 25px;
    }

    .results-more-btn-text {
        font-size: 15px;
    }

    .results-more-btn-arrow {
        width: 26px;
        height: 26px;
    }

    .results-more-btn-arrow svg {
        width: 12px;
        height: 12px;
    }
    
    /* ==========================================
       Section 製品仕様 SP
       ========================================== */
    .section-spec {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-spec-inner {
        width: 100%;
        padding: 0 20px;
    }
    
    .spec-title {
        font-size: 31px !important;
    }
    
    .spec-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .spec-table-wrapper,
    .spec-set-wrapper {
        height: auto;
        padding: 20px;
    }
    
    .spec-table-title,
    .spec-set-title {
        font-size: 16px;
    }
    
    .spec-table th,
    .spec-table td {
        font-size: 13px;
        display: block;
        padding: 8px 0;
    }
    
    .spec-table th {
        width: 100%;
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .spec-table td {
        padding-top: 0;
    }
    
    .spec-set-content {
        flex-direction: column;
    }
    
    .spec-set-img {
        width: 100%;
        height: auto;
        margin-top: 20px;
    }
    
    /* ==========================================
       Section FAQ SP
       ========================================== */
    .section-faq {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-faq-inner {
        width: 100%;
        padding: 0 20px;
    }
    
    .faq-title {
        font-size: 31px !important;
    }
    
    .faq-list {
        margin-top: 30px;
    }
    
    .faq-item {
        margin-bottom: 15px;
    }
    
    .faq-question {
        padding: 15px;
    }
    
    .faq-q-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
        margin-right: 12px;
        flex-shrink: 0;
    }
    
    .faq-q-text {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .faq-toggle {
        font-size: 20px;
        width: 25px;
        flex-shrink: 0;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 15px 20px 62px;
    }
    
    .faq-a-text {
        font-size: 13px;
    }
    
    /* ==========================================
       Section Contact SP
       ========================================== */
    .section-contact {
        min-width: 100%;
        padding: 60px 0;
    }
    
    .section-contact-inner {
        width: 100%;
        padding: 0 20px;
    }
    
    .contact-title {
        font-size: 24px;
    }
    
    /* ==========================================
       Footer SP
       ========================================== */
    .footer {
        min-width: 100%;
        padding: 60px 20px 50px;
    }
    
    .footer-inner {
        width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .footer-logo-sub {
        display: block !important;
        font-family: var(--font-gothic);
        font-size: 12px;
        color: #fff;
        letter-spacing: 0.1em;
        margin-bottom: 5px;
    }
    
    .footer-logo img {
        width: 180px;
        height: auto;
    }
    
    .footer-nav {
        flex-direction: column;
        gap: 20px;
        margin-top: 40px;
    }
    
    .footer-nav a {
        font-size: 15px;
    }
    
    .footer-copyright {
        margin-top: 50px;
        font-size: 12px;
    }
    
    /* ==========================================
       Back to Top SP
       ========================================== */
    .back-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 15px;
    }
    
    .back-to-top-arrow {
        width: 10px;
        height: 10px;
    }
    
    /* ==========================================
       SP版 固定フッター（資料請求ボタン）
       ========================================== */
    .sp-fixed-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transform: translateY(100%);
        transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    }
    
    .sp-fixed-footer.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .sp-fixed-footer-bg {
        background-color: rgba(255, 255, 255, 0.7);
        padding: 10px 15px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    
    .sp-fixed-footer-inner {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .sp-fixed-footer-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        height: 52px;
        padding: 0 15px 0 20px;
        background-color: #FF6C3E;
        border-radius: 8px;
        color: #fff;
        font-family: var(--font-gothic);
        font-weight: 700;
        font-size: 18.7px; /* 17px × 110% */
        letter-spacing: 0.05em;
        text-decoration: none;
        transition: opacity 0.3s ease;
    }
    
    .sp-fixed-footer-btn:hover,
    .sp-fixed-footer-btn:active {
        opacity: 0.9;
    }
    
    .sp-fixed-footer-text {
        flex: 1;
    }
    
    .sp-fixed-footer-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    .sp-fixed-footer-arrow svg {
        width: 11.5px; /* 10px × 115% */
        height: 11.5px; /* 10px × 115% */
        fill: none;
        stroke: #fff;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    
    .sp-fixed-footer-top {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        background-color: transparent;
        border: 1px solid #A48C50;
        border-radius: 8px;
        flex-shrink: 0;
        transition: opacity 0.3s ease;
    }
    
    .sp-fixed-footer-top:hover,
    .sp-fixed-footer-top:active {
        opacity: 0.9;
    }
    
    .sp-fixed-footer-top svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #A48C50;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    
    /* SP版では従来のBack to Topボタンを非表示 */
    .back-to-top {
        display: none;
    }
}

/* ==========================================
   SP 375px専用スタイル
   ========================================== */
@media screen and (max-width: 400px) {
    .fv-product {
        left: calc(47% - 15px);
        transform: scale(0.9);
    }
}