/* _kampo_product_detail.html.liquid | haricchi_theme_20261020 | 2026-10-24 */

#kampo-product-detail{margin-top:100px;color:#3d3935;font-family:"Noto Sans JP",sans-serif;font-size:15px;line-height:1.9;letter-spacing:.04em}
#kampo-product-detail *{box-sizing:border-box}
#kampo-product-detail .kanpo-detail h2,#kampo-product-detail .kanpo-trouble h2,#kampo-product-detail .kanpo-howto h2,#kampo-product-detail .kanpo-howto h3{font-family:"Noto Sans JP",sans-serif;color:inherit}
#kampo-product-detail img{max-width:100%;height:auto;display:block}
#kampo-product-detail .kanpo-detail,#kampo-product-detail .kanpo-trouble,#kampo-product-detail .kanpo-howto,#kampo-product-detail .kanpo-information{width:100%;max-width:1200px;margin:0 auto}
#kampo-product-detail .kanpo-detail>h2,#kampo-product-detail .kanpo-trouble>h2,#kampo-product-detail .kanpo-howto>h2{margin:0;font-family:"Brandon Grotesque",Jost,"Noto Sans JP",sans-serif;font-size:24px;font-weight:500;line-height:1.5;letter-spacing:.04em}
#kampo-product-detail .kanpo-detail{text-align:center}
#kampo-product-detail .kanpo-detail>h2{display:flex;align-items:center;gap:24px;text-align:left;font-size:16px;letter-spacing:.12em}#kampo-product-detail .kanpo-detail>h2:after{content:"";flex:1;border-top:1px solid #bcbcbc}
#kampo-product-detail .kanpo-detail__lead{margin:70px 0 24px;font-size:22px;font-weight:500;line-height:1.75}
#kampo-product-detail .kanpo-detail>p:not(.kanpo-detail__lead){margin:0 0 70px}
#kampo-product-detail .kanpo-detail>img,#kampo-product-detail .kanpo-detail>picture{width:100vw;max-width:none;position:relative;left:50%;transform:translateX(-50%);display:block}
#kampo-product-detail .kanpo-detail>picture img{width:100%}
#kampo-product-detail .kampo-product-detail__trouble{background:#ededed;box-shadow:0 0 0 100vmax #ededed;clip-path:inset(0 -100vmax);padding:80px 0}
#kampo-product-detail .kanpo-trouble>p{margin:0 0 48px;padding:0 0 18px;border-bottom:1px solid #bcbcbc;font-weight:500}
#kampo-product-detail .kanpo-trouble__items{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:38px}
#kampo-product-detail .kanpo-trouble__item>img{width:188px;height:188px;object-fit:contain;margin:0 auto 20px}
#kampo-product-detail .kanpo-trouble ul{list-style:none;padding:0;width:fit-content;max-width:100%;margin:0 auto;text-align:left}
#kampo-product-detail .kanpo-trouble li{position:relative;padding-left:24px;margin:0 0 12px;line-height:1.7}
#kampo-product-detail .kanpo-trouble li:before{content:"✓";position:absolute;left:0;top:4px;width:16px;height:16px;border:1px solid #21364e;border-radius:50%;font-size:11px;line-height:14px;text-align:center;color:#21364e}
#kampo-product-detail .kampo-product-detail__howto{padding:80px 0}
#kampo-product-detail .kanpo-howto{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);grid-template-rows:auto auto max-content 1fr;column-gap:56px;align-items:start}
#kampo-product-detail .kanpo-howto>h2,#kampo-product-detail .kanpo-howto>h3{grid-column:1/-1}
#kampo-product-detail .kanpo-howto>h3{font-size:15px;font-weight:500;border-bottom:1px solid #bcbcbc;padding:0 0 18px;margin:0 0 44px}
#kampo-product-detail .kanpo-howto>img,#kampo-product-detail .kanpo-howto>picture{grid-column:1;grid-row:3/5;width:100%}
#kampo-product-detail .kanpo-howto>p{grid-column:2;margin:0 0 20px}
#kampo-product-detail .kanpo-howto>p:first-of-type{font-size:22px;font-weight:500}
@media(min-width:720px){
/* PC: Figmaの写真480×261pxと本文開始位置に合わせ、画像による先頭行の伸長を防ぐ。 */
#kampo-product-detail .kanpo-howto>p:first-of-type{line-height:32px;margin-bottom:14px}
}
#kampo-product-detail .kampo-product-detail__information{padding:40px 0 80px;background:#ededed;box-shadow:0 0 0 100vmax #ededed;clip-path:inset(0 -100vmax)}
#kampo-product-detail .kanpo-information details{border-top:1px solid #bcbcbc;padding:0}
#kampo-product-detail .kanpo-information details:last-child{border-bottom:1px solid #bcbcbc}
#kampo-product-detail .kanpo-information summary{position:relative;cursor:pointer;list-style:none;padding:22px 36px 22px 0;font-size:18px;font-weight:500}
#kampo-product-detail .kanpo-information summary::-webkit-details-marker{display:none}
#kampo-product-detail .kanpo-information summary:after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400}
#kampo-product-detail .kanpo-information details[open]>summary:after{content:"−"}
#kampo-product-detail .kanpo-information details>p{margin:0 0 24px}
#kampo-product-detail .kanpo-information a{text-decoration:underline;color:inherit}
#kampo-product-detail .kampo-product-detail__brand-image{width:100vw;position:relative;left:50%;transform:translateX(-50%)}
#kampo-product-detail .kampo-product-detail__brand-image img{width:100%}

#kampo-product-detail .kanpo-detail>h2,#kampo-product-detail .kanpo-trouble>h2{font-weight:400}
#kampo-product-detail .kanpo-howto>h2{font-family:Jost,"Noto Sans JP",sans-serif;font-weight:500}

/* 2026-10-24: Figma SP375。漢方商品詳細内だけに適用する。 */
.kampo-copy-sp-break{display:none}
@media(max-width:719px){
#kampo-product-detail{margin-top:128px;font-size:14px;line-height:24px;letter-spacing:.04em}
#kampo-product-detail .kanpo-detail,#kampo-product-detail .kanpo-trouble,#kampo-product-detail .kanpo-howto,#kampo-product-detail .kanpo-information{width:calc(100% - 30px);max-width:none}
#kampo-product-detail .kanpo-detail>h2{font-family:"brandon-grotesque","Brandon Grotesque",Jost,sans-serif;font-size:14px;line-height:20px;letter-spacing:.12em;gap:24px}
#kampo-product-detail .kanpo-detail__lead{max-width:none;font-size:22px;font-weight:500;line-height:38px;margin:40px 0 16px}
#kampo-product-detail .kanpo-detail>p:not(.kanpo-detail__lead){font-size:14px;line-height:30px;margin:0 0 64px}
#kampo-product-detail .kanpo-detail>p br.kampo-copy-pc-break{display:none}
#kampo-product-detail .kanpo-detail>p br.kampo-copy-sp-break{display:block}
#kampo-product-detail .kanpo-detail>p:not(.kanpo-detail__lead) br.kampo-copy-pc-break{display:block}
#kampo-product-detail .kanpo-detail>picture{display:block;width:calc(100% + 30px);left:-15px;transform:none}
#kampo-product-detail .kanpo-detail>picture img{aspect-ratio:375/210;object-fit:cover}
#kampo-product-detail .kampo-product-detail__trouble{padding:64px 0}
#kampo-product-detail .kanpo-trouble>h2,#kampo-product-detail .kanpo-howto>h2{font-family:"brandon-grotesque","Brandon Grotesque",Jost,sans-serif;font-size:24px;line-height:34px;font-weight:400;letter-spacing:.04em}
#kampo-product-detail .kanpo-trouble>p{font-size:14px;font-weight:500;line-height:24px;padding:0 0 14px;margin:0 0 16px;border-bottom-width:.5px}
#kampo-product-detail .kanpo-trouble__items{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:18.2px 15px}
#kampo-product-detail .kanpo-trouble__item>img{width:112.8px;height:112.8px;margin:0 auto 16px}
#kampo-product-detail .kanpo-trouble li{font-size:14px;font-weight:500;line-height:24px;padding-left:26px;margin:0 0 10px}
#kampo-product-detail .kanpo-trouble li:last-child{margin-bottom:0}
#kampo-product-detail .kanpo-trouble li:before{top:0;width:18px;height:18px;line-height:16px;font-size:12px}
#kampo-product-detail .kampo-product-detail__howto{padding:64px 0}
#kampo-product-detail .kanpo-howto{display:block}
#kampo-product-detail .kanpo-howto>h3{font-size:14px;line-height:24px;padding:0 0 14px;margin:0 0 40px;border-bottom-width:.5px}
#kampo-product-detail .kanpo-howto>picture{display:block;width:100%;margin:0 0 24px}
#kampo-product-detail .kanpo-howto>picture img{width:100%;aspect-ratio:345/187.5;object-fit:cover}
#kampo-product-detail .kanpo-howto>p:first-of-type{font-size:20px;line-height:32px;font-weight:500;margin:0 0 12px}
#kampo-product-detail .kanpo-howto>p:not(:first-of-type){font-size:14px;line-height:24px;margin:0}
#kampo-product-detail .kampo-product-detail__information{padding:40px 0}
#kampo-product-detail .kanpo-information details{border:0}
#kampo-product-detail .kanpo-information summary{font-size:18px;line-height:30px;padding:16px 36px 10px 0;margin:0 0 24px;border-bottom:.5px solid #bcbcbc}
#kampo-product-detail .kanpo-information details>p{font-size:14px;line-height:24px;margin:0 0 24px}
#kampo-product-detail .kanpo-information details:last-child>p:last-child{margin-bottom:0}
#kampo-product-detail .kanpo-information summary:after{font-size:24px;line-height:30px}
#kampo-product-detail .kampo-product-detail__brand-image{width:100%;left:0;transform:none}
#kampo-product-detail .kampo-product-detail__brand-image img{aspect-ratio:375/316;object-fit:cover}
/* 共通パーシャルの二重コンテナによる幅縮小を解除。PC・カテゴリーには適用しない。 */
#kampo-product-detail>.kampo-common{width:100%;max-width:none;margin:0}
#kampo-product-detail>.kampo-common>.kampo-common{width:calc(100% - 30px);max-width:none;margin:0 auto}
#kampo-product-detail>.kampo-common>.kampo-common:has(.kampo-concept-section){width:calc(100% - 40px)}
#kampo-product-detail .kampo-concept-section{padding:64px 0;font-size:14px;line-height:24px;letter-spacing:.02em}
#kampo-product-detail .kampo-concept-section h2{font-size:22px;line-height:34.5px;margin:0 0 16px}
#kampo-product-detail .kampo-concept__category-sp-break,#kampo-product-detail .kampo-concept__desktop-break{display:block}
#kampo-product-detail .kampo-concept-section .kampo-concept__paragraph+p{margin-top:24px}
#kampo-product-detail .kampo-concept-section .kampo-concept__closing{font-size:22px;line-height:36px;margin-top:20px}
#kampo-product-detail .kampo-features-section{padding:64px 0 64px}
#kampo-product-detail .kampo-features-section header{padding-bottom:14px;margin-bottom:40px;border-bottom-width:.5px}
#kampo-product-detail .kampo-features-section h2{font-family:"brandon-grotesque","Brandon Grotesque",Jost,sans-serif;font-size:24px;font-weight:400;line-height:34px;margin:0}
#kampo-product-detail .kampo-features-section header p{font-size:14px;line-height:24px}
#kampo-product-detail .kampo-features-section__grid{grid-template-columns:1fr;gap:40px}
#kampo-product-detail .kampo-features-section article img{aspect-ratio:345/230;object-fit:cover}
#kampo-product-detail .kampo-features-section h4{font-size:18px;line-height:30px;min-height:0;margin:16px 0 12px}
#kampo-product-detail .kampo-features-section article p{font-size:14px;line-height:24px}
}