@charset "UTF-8";
/* CSS Document */


figure {
	margin: 0;
	padding: 0;
}

/* =============================================
   商品説明エリア全体 (.item-description) の基本設定
   ============================================= */
   /* ====202603更新====*/
.mainVisual2 {
    width: 100%;
    max-width: 1200px; /* 画像の本来の幅 */
    margin: 0 auto 40px; /* 下に余白を持たせてコンテンツへ繋ぐ */
    overflow: hidden;
    background-color: #f9f9f9; /* 読み込み前の下地色 */
}


.mainVisual2 picture {
    display: block;
    width: 100%;
}

.mainVisual2 img.main {
    width: 100% !important;
    height: auto !important;
    display: block;
    
    /* シズル感を出すための設定 */
    aspect-ratio: 1200 / 675; /* 元の画像比率を維持 */
    object-fit: cover;
    
    /* プレミアムな質感：微細なシャドウ */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    
    /* フェードインアニメーション（任意） */
    animation: imgFadeIn 1.2s ease-out forwards;
}

/* 画像がふわっと表示される演出 */
@keyframes imgFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mainContents {
	padding: 0px !important;
}


/* --- item-descriptionの調整 --- */
.item-description {
    max-width: 900px;
    padding: 5px;    
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 16px;
    text-align: left;
    line-height: 1.8;     
    color: #333;
    word-wrap: break-word;
}


/* --- 出荷エリア (.shipment) の調整 --- */
.item-description .shipment {
    line-height: 1.4;
}
.item-description .shipment p {
    margin: 0.2rem 0;
    font-size: 1.5rem;
}
.item-description .shipment .time {
    font-weight: bold;
}
.item-description .shipment .time_s {
    font-size: 0.85rem;
    color: #333;
}



/* --- 見出し共通 (H2, H3, .box-title, 商品名) 
   太字の明朝体と、程よい文字間設定 --- */
/* h1はcommon内 */
.item-description h2,
.item-description h3,
.item-description .info-box .box-title,
.item-description .itemSpec h3 {
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W6", "游明朝", "YuMincho", "serif";
    margin-left: 0 !important;
    margin-right: auto !important;
    font-weight: bold !important; 
    letter-spacing: 0.07em; /* 0.12emから0.07emに少し狭めて密度をアップ */
}

/* --- 中見出し (H2) --- */
.item-description h2 {
    display: table; /* blockから変更：幅を文字量に合わせる */
    width: auto;    /* 100%から変更 */
    margin: 10px 0 10px 0;/* 枠の大きさ */
    padding: 5px 5px 10px 10px; /* 枠内の文字周り */
    border-left: 7px solid #7cb342; 
    border-bottom: 2px solid #7cb342; 
    color: #222;
    font-size: 1.5rem;
    line-height: 1.5;
}

/* --- 小見出し (H3) --- */
.item-description h3 {
    display: inline-block;
    margin: 0 5px 0 13px !important;
    padding: 5px 0 0 5px;
    color: #558b2f;
    font-size: 1.3rem; 
    border-bottom: 1px dashed #7cb342; 
}

/* --- 本文テキスト (P) --- */
.item-description p {
    margin: 1rem;
    font-size: 1.1em;
    color: #222;

}

/* --- 強調文字 (STRONG)---  */
.item-description p strong {
    color: #222;          
    font-weight: 800;        
    padding: 0 2px;
    background: linear-gradient(transparent 70%, #eef9bf 70%); 
}

/* --- 写真キャプション (.caption) --- */
.item-description .caption {
    margin-top: -0.5em;      
    margin-bottom: 2em;     
    font-size: 0.85rem;     
    line-height: 1.5;       
    color: #444;                   
    display: block;
}
/* =============================================
    汎用ボックス (.info-box) 
   ============================================= */
.item-description .info-box {
    width: 90%;  /* box幅 */
    max-width: 700px; /* 2カラム全体幅750pxに対し */
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 18px;
    background-color: #fdfaf5; 
    border: 1px solid #e8e2d8; 
    border-radius: 8px;
    position: relative;
}

/* ボックス内のタイトル*/
.item-description .info-box .box-title {
    display: block;
    color: #6D5527; 
    font-size: 1.25rem; 
    margin-bottom: 12px;
    border-bottom: 1px solid #6D5527;
    padding-bottom: 8px;
}

/* ボックス内テキスト */
.item-description .info-box p {
    margin: 0.5rem 0;  
    font-size: 0.95rem;       
    line-height: 1.7;
    color: #222;
}
/* =============================================
    アコーディオンメニュー
   ============================================= */

   /* --- 注意事項アコーディオン内テキスト --- */
.item-description ul {
    margin-bottom: 30px;
    padding-left: 0;
    list-style: none;
}

.item-description ul li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 12px;
    line-height: 1.7;
    color: #222;
}

.item-description ul li::before {
    content: '■';
    position: absolute;
    left: 0;
    top: 0.1em;
    color: #6D5527;     
    font-size: 0.85em;
    display: inline-block;
}

/* --- アコーディオン外観 (DETAILS/SUMMARY) --- */
/*.item-description {
    margin: 20px 0 40px 0;
}*/

.item-description details {
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
}

.item-description summary {
    display: block;
    padding: 15px 40px 15px 15px;
    cursor: pointer;
    font-weight: bold;
    color: #558b2f;
    font-size: 1.1rem;
    position: relative;
    list-style: none;
}

.item-description summary::-webkit-details-marker {
    display: none;
}

.item-description summary::after {
    content: '＋';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #7cb342;
    font-size: 1.2rem;
    transition: 0.3s;
}

.item-description details[open] summary {
    background-color: #f1f8e9;
    border-bottom: 1px dashed #7cb342;
}

.item-description details[open] summary::after {
    content: 'ー';
    transform: translateY(-50%) rotate(180deg);
}

.item-description .details-content {
    padding: 20px 15px 10px 15px;
    animation: imgFadeIn 0.5s ease-out forwards;
}

/* --- アコーディオン (DETAILS/SUMMARY)設定 --- */

.accordion-container {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    border: 1px solid #7cb342; /* 緑の枠線で統一 */
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

/* 内部のタイトル（ボタン） */
.accordion-title {
    background-color: #7cb342;
    color: #fff;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}

.accordion-title:hover {
    background-color: #689f38;
}

/* =============================================
    商品詳細
   ============================================= */

.ItemDetails {
    margin-top: 36px;
    text-align: left;
}

.ItemDetails dl dt {
	background-color: #dceda4;
	padding: 0.25rem 1em;
	margin: 0.75em 0 0 0;
}

.ItemDetails dl dd {
	padding: 0.25em 0.25em 0.25em 1em;
}

.ItemDetails dl dd.ten {
	padding: 0.25em 0.25em 0.25em 1em;
    margin-left: 1.5em;
	text-indent: -5.5em;
}
.ItemDetails dl dd.ten:before{
	content: "・";
    margin-right: 0.5em;
	margin-left: 4em;
}

.ItemDetails dl dd.kome {
	padding: 0.25em 0.25em 0.25em 1em;
    margin-left: 1.5em;
	text-indent: -5.5em;
}
.ItemDetails dl dd.kome:before{
	content: "※";
    margin-right: 0.5em;
	margin-left: 4em;
}

/* =============================================
    表示領域が750px以下の場合に適用するスタイル
   ============================================= */

@media screen and (max-width: 750px) {
 .mainVisual2 {
        margin-bottom: 25px;
        padding: 0; 
    }
    
    .mainVisual2 img.main {
        aspect-ratio: 16 / 9; 
    }

   /* スマホ版 item-description 調整 */


    .item-description .shipment p {
        font-size: 1.1rem;
    }
    
    .item-description .shipment .time_s {
        font-size: 0.85rem;
        text-align: left;
    }
 
    .item-description h2,
    .item-description h3,
    .item-description .info-box .box-title {
        letter-spacing: 0.02em;
    }
    .item-description h2 {
        font-size: 1.25rem;
        margin: 20px 0 20px 0;
        padding: 5px 8px;
    }
    .item-description h3,
    .item-description .info-box .box-title   {
        font-size: 1.1rem;
        padding: 5px 8px;
    }

    .item-description p {
        margin: 0.5rem;
    }
   /* スマホ版 caption 調整 */
    .item-description .caption {
        margin-top: -0.2em;
        margin-bottom: 1em;    
    }

   /* スマホ版 info-box 調整 */
    .item-description .info-box {
        width: 95%;
    }


}