/* STREAMING_CHUNK:基本スタイルの設定... */
body {
    font-family: 'Zen Kaku Gothic New','Noto Sans JP', sans-serif;
    font-weight: 400; /* ★追加：ベースを細字にして華奢さを演出 */
    color: #333;
    background-color: #fdfdfd;
}
#fs_CustomPage #mainarea {
    width: 100%;
    max-width: unset;
    padding: 0;
}
.font-serif-en {
    font-family: 'Jost', sans-serif; /* ★変更：Playfair DisplayからJostへ */
    letter-spacing: 0.08em; /* ★追加：Jostの美しさを引き立たせる文字間隔 */
    text-transform: uppercase; /* ★追加：ABOUTページに合わせた大文字化（不要なら削除可） */
}

/* STREAMING_CHUNK:ブランドカラーの設定... */
.text-brand { color: #a395c5; }
.text-gray { color: #6d6d6d; }
.bg-brand { background-color: #B8ABD8; }
.border-brand { border-color: #B8ABD8; }
.hover-bg-brand:hover { background-color: #B8ABD8; }

/* STREAMING_CHUNK:ヒーローセクションとスクロール設定... */
.hero-bg {
background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('https://cloche.itembox.cloud/item/farfalle/fitting/ff_tryfitting_1200.jpg');
background-size: cover;
background-position: center;
}

html {
scroll-behavior: smooth;
}

h2, h3, h4, .font-bold {
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* STREAMING_CHUNK:アコーディオン（FAQ）用アニメーション... */
.accordion-content {
transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
max-height: 0;
opacity: 0;
overflow: hidden;
}
/* 画像を含むためmax-heightを余裕を持たせて拡張 */
.accordion-content.open {
max-height: 800px;
opacity: 1;
padding-top: 1rem;
padding-bottom: 1rem;
}
.accordion-icon {
transition: transform 0.3s ease;
}
.accordion-button.open .accordion-icon {
transform: rotate(180deg);
}

/* STREAMING_CHUNK:セクション背景の装飾文字... */
.bg-text {
position: absolute;
font-size: 18vw; /* スマホで少し見やすく調整 */
color: #f7f7f7;
z-index: 0; /* -1 から 0 に変更 */
top: 2%; /* マイナスからプラスにして少し下げる */
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-weight: 700;
letter-spacing: 0.05em;
pointer-events: none; /* テキストが選択・クリックされるのを防ぐ */
overflow: hidden;
}
@media (min-width: 768px) {
.bg-text {
font-size: 8vw;
top: -5%;
}
}

/* --- PC用ナビゲーション矢印のスタイリング --- */
.swiper-button-prev,
.swiper-button-next {
    color: #444 !important; /* 落ち着いたダークグレー */
    background-color: rgba(255, 255, 255, 0.95); /* 背景を白にして見やすく */
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 軽やかな影で浮き上がらせる */
    transition: all 0.3s ease;
}

/* ホバー（マウスオーバー）時のアクション */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: #B8ABD8 !important; /* ホバーでファルファーレのブランドカラーに */
    transform: scale(1.05); /* 少しだけフワッと大きくする */
}

/* 矢印のアイコン自体を細く上品に調整 */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 16px !important;
    font-weight: bold;
}

/* 矢印の位置調整（カードの外側に配置） */
.swiper-button-prev { left: 0px !important; }
.swiper-button-next { right: 0px !important; }

/* STREAMING_CHUNK:モーダルとSwiperの調整... */
.modal-fade {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-fade.active {
opacity: 1;
pointer-events: auto;
}
.step-swiper .swiper-pagination {
position: relative !important;
margin-top: 2rem !important;
bottom: auto !important;
}.title {
    color: green;
}