@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');

/* ==================================================
   1. Base Settings (基本設定)
   ================================================== */

#fs_CustomPage #mainarea {
    width: 100%;
    max-width: unset;
    padding: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Hiragino Mincho ProN", serif;
    line-height: 1.8;
    color: #333;
    background-color: #fff;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container, 
.inner-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}


/* ==================================================
   2. Components (共通パーツ)
   ================================================== */

/* --- 背景色のバリエーション --- */
.bg-light-beige {
    background-color: #F5F3F0;
}

.bg-beige {
    background-color: #efe7de;
}

.sp-br {
    display: none;
}

.text-spacer {
    display: block;    /* これで1行分を占有します */
    height: 1.5em;     /* 空けたい高さを自由に調整 */
    content: "";       /* 念のため */
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.label-en {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    color: #999;
    text-transform: uppercase;
}

.title-jp {
    display: block;
    font-size: 1.5rem;
    margin-top: 10px;
    font-weight: normal;
}

.btn-center {
    text-align: center;
    margin-top: 40px;
}

.btn-online {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 18px 60px;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    transition: 0.3s;
}

.btn-online:hover {
    opacity: 0.7;
}

/* 最初は透明で、少し下に下げておく */
.fade-in-up {
    opacity: 1;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* 1.2秒かけて動く */
}

/* 画面に入った時にこのクラスが自動で付与され、表示される */
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* セクション内の見出し（h3）を共通で美しくする */
.story-text h3, 
.color-card-text h3 {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;       /* 500（ミディアム）が一番上品に見えます */
    font-size: 1.5rem;      /* 大きさはお好みで */
    letter-spacing: 0.15em; /* 適度な余白 */
    margin-bottom: 15px;
    color: #333;
    line-height: 1.4;
}

/* ==================================================
   3. Hero Section (TOPバナー)
   ================================================== */
.hero {
    width: 100%;
    margin-bottom: 100px;
    text-align: center;
}

.hero-image {
    width: 100%;
    margin-bottom: 60px;
}

.hero-text {
    width: 100%;
    padding: 0 20px;
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.main-copy {
    font-size: 2.2rem;
    margin-top: 40px;
    font-weight: normal;
    line-height: 1.6;
}


/* ==================================================
   4. Product Main (商品Swiper)
   ================================================== */
.product-main {
    padding: 80px 0;
    background: #f9f9f9;
    
}

.product-flex-layout {
    display: flex;
    align-items: center;
    gap: 50px;
}

.product-info {
    flex: 0 1 350px; /* 広がりすぎず、最大400pxに制限 */
    text-align: right; /* 中身を右（画像側）に寄せる */
    margin-top: 180px; /* ★この数字を大きくするほど下に下がります */
}

.product-visual {
    flex: 1; /* 残りのスペースを全部使って、画像を大きく見せる */
    min-width: 0; /* Swiper用のお守り */
}

.brand-title {
    font-size: 3.5rem;
    font-weight: normal;
}

/*.price {
    font-size: 1.4rem;
    margin-bottom: 30px;
}*/

.price {
    font-size: 1.6rem;      /* 金額全体を少しだけ大きく */
    font-weight: 500;       /* 数字を少し際立たせる */
    letter-spacing: 0.05em;
    margin-bottom: 30px;
    color: #333;
}

.price .tax {
    font-size: 0.8rem;      /* (tax in)をガッツリ小さく */
    font-weight: normal;    /* 補足情報なので細く戻す */
    margin-left: 4px;       /* 金額との間に少し隙間を */
}

/* PCスライダーの最低高さを確保 */
.product-swiper {
    width: 100%;
    min-height: 400px; 
}

/* ==================================================
   5. Story Section (こだわり素材)
   ================================================== */
.story {
    padding: 100px 0;
}

.story-item {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}

.story-item.reverse {
    flex-direction: row-reverse;
}

.story-visual {
    flex: 1;
    padding: 0 20px; /* 余白を入れると画像が少し小さくなります */
}

.story-visual, 
.story-text {
    flex: 1;
}

/* ==================================================
   6. Styling Section (構成に合わせた最終版)
   ================================================== */

/* ★ここに追加：システム(shopcommon.css)の margin:0 をねじ伏せる最強設定 */
#fs_CustomPage .styling-story-text p,
#fs_CustomPage .styling-item .styling-text-inner {
    margin-bottom: 2.5rem !important; /* これで強制的に隙間を作ります */
    line-height: 2.2 !important;
    display: block !important;
    letter-spacing: 0.05em;
}

/* 最後の段落だけ余白を消す設定（これも最強名義で） */
#fs_CustomPage .styling-story-text p:last-child,
#fs_CustomPage .styling-item .styling-text-inner:last-child {
    margin-bottom: 0 !important;
}


/* --- 共通：中央寄せとテキストの基本 --- */
.styling-visual-section,
.styling-content-section {
    text-align: center;
    padding-bottom: 20px;
}

/* --- 導入部分（全幅画像がある方） --- */
.styling-full-width-image {
    width: 100%;
    margin-bottom: 60px;
}
.styling-full-width-image img {
    width: 100%;
    height: auto;
    display: block;
}

.styling-copy-title {
    font-size: 1.8rem;
    margin-bottom: 40px;
    font-weight: normal;
}

 .styling-story-text {
    margin-bottom: 80px;
} 

.styling-story-text p {
    margin-bottom: 2.2rem !important;  /* ★ここを変えるだけで、まとまりごとの空きを調整できる*/ 
    line-height: 2.2;      /* 1行ごとの行間 */
    letter-spacing: 0.05em;
    display: block !important;
}

/* 最後の一文は余白がいらないので、0にするのがプロの書き方 */
.styling-story-text p:last-child {
    margin-bottom: 0 !important;
}

.styling-main-visual {
    margin-bottom: 100px; /* 次のセクションとの間隔 */
}
.styling-main-visual img {
    max-width: 100%;
    height: auto;
}

/* --- 詳細部分（2枚並ぶ方） --- */
.styling-content-section {
    padding: 100px 0;
}

/* 1列に並べるための設定 */
.styling-content {
    max-width: 800px; /* PCで見やすい幅に制限 */
    margin: 0 auto;   /* 中央に配置 */
}

.styling-item {
    margin-bottom: 50px; /* アイテムごとの間隔 */
    width: 100%;
}

.styling-item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 45px; /* 画像を中央に + 下のテキストとの隙間 */
}

.styling-item .styling-text-inner {
    font-size: 1rem;
    line-height: 2;         /* 行間も少しゆったりさせると綺麗です */
    color: #333;
    text-align: center;
    margin-bottom: 2.5rem;  /* 段落ごとの隙間*/ 
}

.styling-item .styling-text-inner:last-child {
    margin-bottom: 0;
}

/*.styling-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    text-align: center;
}*/
/* ==================================================
   7. Color Section
   ================================================== */
.color-section {
    padding: 100px 0;
}

.color-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
}

.color-card {
    display: flex;
    align-items: center;
    gap: 60px;
}

.color-card:nth-child(2) {
    flex-direction: row-reverse;
}

.color-card:nth-child(2) .color-card-text {
    text-align: right;
}

/* ==================================================
   8. Product Details
   ================================================== */
.details {
    padding: 100px 0;
    background: #f9f9f9;
}

.details-visual {
    width: 100%;
    margin-bottom: 50px; /* リストとの間隔をあける */
    /* もしリンク<a>やpictureが邪魔してたら、念のためこれらも制御 */
    display: block;
}

.details-visual img {
    width: 65%;      /* 元の幅の80%にする */
    height: auto;     /* 高さは自動調整（これがないと画像が歪みます） */
    margin: 0 auto;   /* 中央配置の念押し */
    display: block;   /* ブロック要素にしてマージンを効かせる */
}

.details-list div {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    justify-content: flex-start; /* 中身は左揃えのまま全体を中央へ */
}

.details-list {
    max-width: 600px;    /* 画像の幅感に合わせて制限 */
    margin: 0 auto;      /* これで中央寄せ */
    padding: 0;
}

.details-list dt {
    width: 120px;
    font-weight: bold;
    color: #333;
}

.details-list dd {
    margin: 0;
    flex: 1; /* 残りの幅をすべて使う */
}

.details-list dd .tax {
    font-size: 0.75rem;     /* かなり小さめにして数字を際立たせる */
    font-weight: normal;    /* 数字が太くてもここは細く */
    margin-left: 3px;
}

/* ==================================================
   9. Responsive (モバイル対応)
   ================================================== */
@media (max-width: 768px) {
    .hero { margin-bottom: 60px; }
    .hero-image { margin-bottom: 40px; }
    
    .hero-text p {
        font-size: 0.95rem;
}
    
    .main-copy { font-size: 1.6rem; }
    .sp-br {
        display: block;
        content: ""; /* 改行として機能させるため */
        margin-top: 0; /* 必要に応じて微調整 */
    }
    
    .text-spacer {
        height: 1.2em;
    }
    
    .title-jp {
        font-size: 1.25rem; /* スマホでは少しだけ小さく */
        letter-spacing: 0.1em; /* 詰まりすぎないように少しゆとりを */
        line-height: 1.4;
    }
    
    .story-text h3,
    .color-card-text h3 {
        font-size: 1.3rem;
    }
    
    /* 商品セクション：画像を上、テキストを下へ */
    .product-flex-layout {
        flex-direction: column;
        text-align: center;
    }

    .product-visual {
        order: 1; 
        width: 100%;
        margin-bottom: 30px;
    }

   .product-info {
        order: 2;
        width: 100%;
        text-align: center;
        /* 下げるための調整 */
        padding-top: 20px; /* ★画像から少し離して下に配置する */
        margin-top: -70px; /* ★もし上に上げすぎていたら、このマイナスを減らす */
        margin-bottom: -120px;
    }
    
    .brand-title {
        font-size: 2.2rem;   /* ★3.5から2.2くらいに落とす */
        letter-spacing: 0.1em; /* 少し間隔をあけると品が出ます */
        margin-bottom: 10px;
    }
    
    .price {
        font-size: 1.4rem;
    }
    .price .tax {
        font-size: 0.75rem;
    }
    
    .product-swiper {
        min-height: 300px;
    }

    /* その他全ての要素を縦1列に統一 */
    .story-item, 
    .story-item.reverse, 
    .color-card, 
    .color-card:nth-child(2) {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .styling-story-text p {
       margin-bottom: 1.5rem !important; /* PC版の 2.5rem をこれで上書き */
       font-size: 0.95rem;
    }
    
    .styling-item .styling-text-inner {
        margin-bottom: 1.5rem !important; /* こちらも念のため */
        font-size: 0.95rem;
    }

    .color-card:nth-child(2) .color-card-text {
        text-align: center;
    }

    .details-visual img {
    width: 100%;
}
    
    .details-list dt {
        width: 100px;
    }
} /* ← この閉じタグが抜けていたのが最大のバグ原因です */