@charset "UTF-8";

/* =========================================
  PC用スペースとスマホ用改行の表示切替
========================================= */
.sp-view {
    display: none;
}
.pc-view {
    display: inline;
}

@media screen and (max-width: 768px) {
    .sp-view {
        display: inline;
    }
    .pc-view {
        display: none;
    }
}

/* =========================================
   Naturamoon 商品トップパーツ（item-top）
========================================= */

/* 最外枠 */
.item-top {
    scroll-margin-top: 80px;
    width: 100%;
    padding: 40px 20px 50px 20px;
    background-color: #ffffff;
    box-sizing: border-box;
}

.item-top .item-top-inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* 1. ヘッダー見出しエリア */
.item-top-header {
    text-align: center;
    margin-bottom: 35px;
}

.item-top-header .item-top-catch {
    font-size: 1.35rem;
    font-weight: bold;
    color: #9e2a5b; /* マゼンタ・ボルドー系 */
    margin: 0 0 12px 0;
    line-height: 1.4;
    letter-spacing: 1px;
}

.item-top-header .item-top-title {
    position:static;
    font-size: 1.15rem;
    font-weight: normal;
    color: #333333;
    margin: 0;
    line-height: 1.5;
    letter-spacing: 1px;
    border-top:#eee 1px solid;
    padding:.5em 0;
}

/* 2. メインレイアウト（PC: 左右2カラム） */
.item-top-body {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* 左カラム：画像エリア */
.item-top-media {
    width: 46%;
    flex-shrink: 0;
}

.item-top-media .main-image-wrap {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 16px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-top-media .main-image {
    width: 100%;
    max-width: 600px;
    max-height: 600px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* サムネイルギャラリー */
.item-top-media .thumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.item-top-media .thumb-btn {
    width: calc((100% - 36px) / 7); /* 1行に7個がぴったり収まる自動計算 */
    aspect-ratio: 1 / 1;             /* 常に綺麗な正方形を維持 */
    height: auto;
    padding: 2px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.item-top-media .thumb-btn:hover {
    border-color: #ff65b0;
}

.item-top-media .thumb-btn.is-active {
    border: 2px solid #ff65b0; /* ピンク色のアクティブ枠 */
    padding: 2px;
}

.item-top-media .thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 右カラム：仕様・購入エリア */
.item-top-info {
    flex: 1;
    min-width: 0;
}

/* ピンク色のタグ */
.item-top-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 0;
    margin: 0 0 25px 0;
    list-style: none;
}

.item-top-tags li {
    background-color: #ff65b0; /* 明るいピンク背景 */
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 6px 14px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* 製品仕様 (dl / dt / dd) */
.item-top-specs {
    margin: 0 0 30px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 0;
}

.item-top-specs .spec-row {
    display: flex;
    margin-bottom: 10px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #333333;
    text-align:left;
}

.item-top-specs .spec-row .spec-note{
    display:block;
    font-size:.6rem;
}

.item-top-specs .spec-row:last-child {
    margin-bottom: 0;
}

.item-top-specs dt {
    width: 110px;
    flex-shrink: 0;
    /*font-weight: bold;*/
    color: #222222;
}

.item-top-specs dd {
    margin: 0;
    flex: 1;
    line-height: 1.6;
}

/* WEB限定タグ */
.item-top-buy .web-limited-tag {
    display: inline-block;
    background-color: #9e2a5b; /* ボルドー系 */
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* 複数アイテムリスト */
.item-top-buy .buy-item-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.item-top-buy .buy-item-row {
    /*display: flex;
    justify-content: space-between;
    align-items: flex-end;*/
    padding-top: 16px;
    border-top: 1px dotted #d0d0d0; /* 複数アイテム時の点線区切り */
}

.item-top-buy .buy-item-row:first-child {
    padding-top: 0;
    border-top: none;
}

/* 左側：限定タグ・商品名 */
.item-top-buy .buy-item-info {
    text-align: left;
    width: 100%;
    padding-right: 15px;
    margin-bottom:.5em;
}

/* 価格 ＆ 購入ボタンエリア */
/* 価格・購入エリアを完全中央揃え */
    .item-top-buy {
        text-align: center;
    }

.item-top-buy .buy-product-name {
font-size: 0.95rem;
    color: #333333;
    margin: 0;
    line-height: 1.5;
    font-weight: 700;
}

.item-top-buy .buy-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    align-items: right;
}

.item-top-buy .price-text {
    font-size: 0.8rem;
    color: #333333;
    margin: 0;
    letter-spacing:0.05em;
    font-feature-settings:"palt";
}

.item-top-buy .price-num {
    font-size: 1.45rem;
    font-weight: bold;
    color: #222222;
    margin: 0 2px;
}

/* 購入ボタン */
.item-top-buy .buy-btn {
    display: inline-block;
    padding: 8px 20px;
    border: 1.5px solid #9e2a5b; /* マゼンタ枠線 */
    border-radius: 4px;
    color: #9e2a5b;
    font-size: 0.875rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.2s;
    background-color: #ffffff;
}

.item-top-buy .buy-btn:hover {
    background-color: #9e2a5b;
    color: #ffffff;
}

/* =========================================
   レスポンシブ (768px以下: スマホ表示)
========================================= */
@media screen and (max-width: 768px) {
    .item-top {
        padding: 30px 15px;
    }

    .item-top-header .item-top-catch {
        font-size: 1.15rem;
    }

    .item-top-header .item-top-title {
        font-size: 1rem;
    }

    .item-top-body {
        flex-direction: column;
        gap: 30px;
    }

    .item-top-media,
    .item-top-info {
        width: 100%;
    }

    .item-top-media .thumb-list {
        justify-content: center;
    }

    .item-top-tags {
        justify-content: center;
    }

    .item-top-buy {
        text-align: center;
    }

    .item-top-buy .buy-action {
        align-items: center;
    }
    
.item-top-buy .buy-item-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .item-top-buy .buy-item-info {
        text-align: center;
        padding-right: 0;
    }    
}

/* =========================================
   Naturamoon 製品詳細パーツ（item-page.css）
========================================= */

/* 1. ウィンドウ幅いっぱいの最外枠 */
.item-detail {
    background-color: #f2f2ff;
    width: 100%;
    padding: 50px 20px;
    box-sizing: border-box;
    text-align:left;
}

/* 2. インナーコンテナ (中央寄せ・幅制限) */
.item-detail .detail-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* 3. DETAIL 見出し */
.item-detail h2 {
    font-size: 1.6rem;
    text-align: center;
    margin: 0 0 35px 0;
    letter-spacing: 0.2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:400;
    color:rgba(0, 0, 0, 0.20);
}

/* 4. コンテンツエリア */
.item-detail .detail-content {}

/* 5. ポイント個別ブロック */
.item-detail-point {
    position: relative;
    padding-top: 24px;
    margin-bottom: 80px;
    color: #333;
    line-height: 1.6;
}
.item-detail-point:last-child {
    margin-bottom: 0;
}

/* 楕円バッジ (Point 1) */
.item-detail-point .point-label {
    position: absolute;
    top: -.8em;
    left: 0;
    background-color: #9e2a5b;
    color: #fff;
    font-family: Georgia, "Times New Roman", "YuMincho", serif;
    font-style: italic;
    font-size: 1.2rem;
    padding: .8em 1em .5em;
    border-radius: 50%;
    line-height: 1.2;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    z-index: 2;
}

/* タイトルテキスト ＋ 下線 */
.item-detail-point .point-title {
    font-size: 1.6rem;
    font-weight: 500;
    color: #9e2a5b;
    margin: 12px 0 20px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #9e2a5b;
    display: block;
    text-align:left;
}

/* コンテンツレイアウト */
.item-detail-point .point-content {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.item-detail-point .point-content .point-text { flex: 6; }
.item-detail-point .point-content .point-image { flex: 4; display: flex; gap: 12px; }

/* 7:3 比率コントロール (.is-ratio-73) */
.item-detail-point .point-content.is-ratio-73 .point-text { flex: 7; }
.item-detail-point .point-content.is-ratio-73 .point-image { flex: 3; }

.item-detail-point .point-text p {
    margin: 0 0 12px 0;
}
.item-detail-point .point-text p:last-child {
    margin-bottom: 0;
}
.item-detail-point .point-image img {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* ワイド画像（上下並び） */
.item-detail-point .point-content.has-wide-image {
    flex-direction: column;
    gap: 20px;
}
.item-detail-point .point-content.has-wide-image .point-text {
    width: 100%;
}
.item-detail-point .point-content.has-wide-image .point-image {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 16px;
}

/* ワイド画像：最大幅クラス (PC表示時) */
.item-detail-point .point-content.has-wide-image.is-size-800 .point-image { max-width: 800px; }
.item-detail-point .point-content.has-wide-image.is-size-600 .point-image { max-width: 600px; }

/* リスト (ul / ol) */
.item-detail-point ul.point-list,
.item-detail-point ol.point-list {
    margin: 12px 0;
    padding-left: 1.4em;
}
.item-detail-point ul.point-list li,
.item-detail-point ol.point-list li {
    margin-bottom: 6px;
    line-height: 1.5;
}
.item-detail-point .point-text ul.point-list,
.item-detail-point .point-text ol.point-list {
    font-size: 0.95rem;
}

/* チェックマーク / ハート型カスタムリスト */
.item-detail-point .point-list.is-style-check,
.item-detail-point .point-list.is-style-heart {
    list-style: none;
    padding-left: 0;
}
.item-detail-point .point-list.is-style-check li,
.item-detail-point .point-list.is-style-heart li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.item-detail-point .point-list.is-style-check li::before {
    font-family: 'Material Symbols Outlined';
    content: 'check_circle';
    font-size: 1.15em;
    color: #5c6b54;
    line-height: 1.3;
    flex-shrink: 0;
}
.item-detail-point .point-list.is-style-heart li::before {
    font-family: 'Material Symbols Outlined';
    content: 'favorite';
    font-size: 1em;
    color: #9e2a5b;
    line-height: 1.4;
    flex-shrink: 0;
}

/* NG・不使用成分タグ (.point-ng-tags) */
.item-detail-point .point-ng-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 0;
    margin: 20px 0 0 0;
    list-style: none;
}
.item-detail-point .point-ng-tags li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #e50012;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: bold;
    padding: 7px 18px 7px 12px;
    border-radius: 24px;
    line-height: 1.2;
    margin: 0;
}
.item-detail-point .point-ng-tags li::before {
    font-family: 'Material Symbols Outlined';
    content: 'block';
    font-size: 1.25rem;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 注釈・補足ブロック (.point-note) */
.item-detail-point .point-note {
    margin-top: 20px;
    padding: 18px 20px;
    background-color: #ffffff;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #444;
    border: 1px solid #e0e0f0;
}
.item-detail-point .point-note .note-title {
    font-weight: bold;
    font-size: 0.95rem;
    color: #222;
    margin-bottom: 8px;
}
.item-detail-point .point-note .note-content {
    display: flex;
    gap: 16px;
    align-items: center;
}
.item-detail-point .point-note .note-body {
    flex: 1;
}
.item-detail-point .point-note .note-body p {
    margin: 0 0 8px 0;
    line-height: 1.5;
}
.item-detail-point .point-note .note-body p:last-child {
    margin-bottom: 0;
}
.item-detail-point .note-body ul.point-list,
.item-detail-point .note-body ol.point-list {
    font-size: 0.8125rem;
    margin: 8px 0;
    color: #555;
}
.item-detail-point .point-note .note-image {
    flex-shrink: 0;
    width: 90px;
}
.item-detail-point .point-note .note-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* キャプション装飾 */
.item-detail-point .point-image figure.image-box {
    flex: 1;
    margin: 0;
    min-width: 0;
}
.item-detail-point .point-image figcaption {
    font-size: 0.8rem;
    color: #666;
    margin-top: 6px;
    text-align: left;
    line-height: 1.4;
}

/* =========================================
   レスポンシブ (768px以下: スマホ表示)
========================================= */
@media screen and (max-width: 768px) {
    .item-detail { padding: 35px 15px; }
    .item-detail-point .point-content { flex-direction: column; gap: 20px; }
    .item-detail-point .point-text { width: 100%; }
    .item-detail-point .point-image { width: 100%; max-width: 100% !important; gap: 8px; }
    .item-detail-point .point-content.has-wide-image .point-image { flex-direction: column; gap: 12px; }
    .item-detail-point .point-note { padding: 14px 16px; }
    .item-detail-point .point-note .note-image { width: 75px; }
    .item-detail-point .point-ng-tags li { font-size: 0.875rem; padding: 6px 14px 6px 10px; }
}

/* =========================================
   スクロールフェードインアニメーション
========================================= */

/* 初期状態：透明 ＆ 少し下に配置 */
.item-detail-point {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* 画面内に入った時：不透明 ＆ 元の位置へ */
.item-detail-point.is-visible {
    opacity: 1;
    transform: translateY(0);
}