/* ho- コンポーネント（ハーブピーリングOEM／ブランディングパック共通）
   page-templates/herb-peeling-oem.php のインラインCSSと同一内容。他ページでブランディングパックを表示する際に読み込む */

/* ══════════════════════════════════════════════
   herb-peeling-oem.php 専用 CSS（ho-）— herbcell.php（hc-）トークン準拠
   ══════════════════════════════════════════════ */
:root{--ho-blk:#0A0A0A;--ho-off:#F8F8F8;--ho-bd:#E5E5E5;--ho-green:#5C7A4A;--ho-green-lt:#EFF3EB;}
.ho-in{max-width:1080px;margin:0 auto;padding:0 64px;}
.ho-in--sm{max-width:800px;margin:0 auto;padding:0 64px;}
.ho-sec{padding:80px 0;}
.ho-head{text-align:center;margin-bottom:40px;}
.ho-tag{font-family:'Cormorant Garamond',Georgia,serif;font-size:.68rem;letter-spacing:.26em;color:#999;text-transform:uppercase;display:block;margin-bottom:8px;}
.ho-h2{font-family:'Cormorant Garamond','Yu Mincho',Georgia,serif;font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:400;color:var(--ho-blk);letter-spacing:.05em;line-height:1.25;margin:0;}
.ho-div{width:32px;height:2px;background:var(--ho-blk);margin:14px auto 20px;}
.ho-lead{font-size:.9rem;color:#666;line-height:1.95;max-width:640px;margin:0 auto;}
.ho-h3{font-family:'Yu Mincho','游明朝',YuMincho,serif;font-size:1rem;font-weight:500;color:var(--ho-blk);margin:0 0 8px;}
.ho-txt{font-size:.84rem;color:#666;line-height:1.85;margin:0;}
.ho-brand-bar{background:var(--ho-blk);padding:11px 0;text-align:center;}
.ho-brand-bar p{font-family:'Cormorant Garamond',Georgia,serif;font-size:.68rem;letter-spacing:.24em;color:rgba(255,255,255,.65);text-transform:uppercase;margin:0;}
/* 数値 */
.ho-num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ho-bd);border:1px solid var(--ho-bd);}
.ho-num{background:#fff;padding:22px 16px;text-align:center;}
.ho-num-val{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.3rem;color:var(--ho-green);line-height:1;}
.ho-num-val small{font-size:1rem;}
.ho-num-label{font-size:.78rem;color:#666;margin-top:8px;line-height:1.5;}
/* 汎用グリッド */
.ho-grid{display:grid;gap:1px;background:var(--ho-bd);border:1px solid var(--ho-bd);}
.ho-grid--2{grid-template-columns:repeat(2,1fr);}
.ho-grid--3{grid-template-columns:repeat(3,1fr);}
.ho-grid--4{grid-template-columns:repeat(4,1fr);}
.ho-card{background:#fff;padding:26px 22px;}
.ho-card--dark{background:var(--ho-blk);}
.ho-card--dark .ho-h3{color:#fff;}
.ho-card--dark .ho-txt{color:rgba(255,255,255,.75);}
.ho-badge{display:inline-block;padding:3px 10px;font-size:.64rem;letter-spacing:.06em;color:#fff;background:var(--ho-green);margin-bottom:10px;}
.ho-badge--blk{background:var(--ho-blk);}
.ho-card--dark .ho-badge--blk{background:#fff;color:var(--ho-blk);}
.ho-card-en{font-family:'Cormorant Garamond',Georgia,serif;font-size:.62rem;letter-spacing:.18em;color:#999;text-transform:uppercase;display:block;margin-bottom:6px;}
.ho-no{font-family:'Cormorant Garamond',Georgia,serif;font-size:2rem;color:var(--ho-bd);line-height:1;margin-bottom:10px;}
/* お悩み */
.ho-pain{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ho-bd);border:1px solid var(--ho-bd);}
.ho-pain li{background:#fff;padding:14px 18px;list-style:none;display:flex;gap:10px;font-size:.88rem;color:#333;line-height:1.6;}
.ho-pain li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ho-green);flex-shrink:0;margin-top:7px;}
/* 費用 */
.ho-price{border:1px solid var(--ho-bd);background:#fff;}
.ho-price-row{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--ho-bd);}
.ho-price-row:last-child{border-bottom:none;}
.ho-price-row dt{background:var(--ho-off);padding:14px 18px;font-size:.8rem;color:#666;}
.ho-price-row dd{margin:0;padding:14px 18px;font-size:.9rem;color:#333;line-height:1.7;}
.ho-price-big{font-family:'Cormorant Garamond',Georgia,serif;font-size:2rem;color:var(--ho-green);line-height:1.1;}
.ho-note{font-size:.76rem;color:#999;line-height:1.8;margin-top:14px;text-align:center;}
/* ステップ（HERBCELL→OEM） */
.ho-path{display:grid;grid-template-columns:1fr 40px 1fr;align-items:stretch;}
.ho-path-arrow{display:flex;align-items:center;justify-content:center;color:#BBB;font-size:1.4rem;}
.ho-path .ho-card{border:1px solid var(--ho-bd);}
.ho-link{display:inline-block;margin-top:14px;font-size:.8rem;color:var(--ho-blk);border-bottom:1px solid currentColor;padding-bottom:2px;}
.ho-card--dark .ho-link{color:#fff;}
.ho-list{list-style:none;margin:10px 0 0;padding:0;}
.ho-list li{font-size:.82rem;color:#555;padding:5px 0 5px 14px;position:relative;line-height:1.6;}
.ho-list li::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;background:var(--ho-green);}
.ho-card--dark .ho-list li{color:rgba(255,255,255,.8);}
/* フロー */
.ho-flow{display:grid;grid-template-columns:repeat(5,1fr);position:relative;}
.ho-flow::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:1px;background:var(--ho-bd);}
.ho-flow-step{text-align:center;position:relative;padding:0 6px;}
.ho-flow-num{width:56px;height:56px;border-radius:50%;background:var(--ho-green);color:#fff;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.1rem;}
.ho-flow-title{font-size:.86rem;font-weight:500;color:var(--ho-blk);margin-bottom:6px;}
.ho-flow-desc{font-size:.74rem;color:#666;line-height:1.7;}
/* FAQ */
.ho-faq-item{border-bottom:1px solid var(--ho-bd);}
.ho-faq-q{padding:17px 44px 17px 0;font-size:.93rem;font-weight:500;cursor:pointer;list-style:none;position:relative;display:flex;gap:12px;align-items:flex-start;color:var(--ho-blk);font-family:'Yu Mincho','游明朝',YuMincho,serif;}
.ho-faq-q::before{content:'Q';font-family:'Cormorant Garamond',Georgia,serif;color:var(--ho-green);flex-shrink:0;}
.ho-faq-q::-webkit-details-marker,.ho-faq-q::marker{display:none;}
.ho-faq-q::after{content:'';position:absolute;right:8px;top:50%;width:8px;height:8px;border-right:1.5px solid #CCC;border-bottom:1.5px solid #CCC;transform:translateY(-65%) rotate(45deg);transition:transform .3s;}
details[open]>.ho-faq-q::after{transform:translateY(-35%) rotate(-135deg);}
.ho-faq-a{padding:4px 0 18px 28px;font-size:.88rem;line-height:2;color:#666;}
/* CTA */
.ho-cta-bar{background:var(--ho-off);padding:18px 64px;border-top:1px solid var(--ho-bd);border-bottom:1px solid var(--ho-bd);}
.ho-cta-bar-in{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.84rem;color:#555;}
.ho-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;}
.ho-final{background:var(--ho-blk);padding:80px 64px;text-align:center;}
.ho-final .ho-tag{color:rgba(255,255,255,.6);}
.ho-final h2{font-family:'Cormorant Garamond','Yu Mincho',Georgia,serif;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:400;color:#fff;letter-spacing:.06em;margin:0 0 10px;}
.ho-final p{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.9;margin:0 auto 30px;max-width:540px;}
.ante-page .ho-btn-white{background:#fff;color:#0A0A0A;border:1.5px solid #fff;}
.ho-related{background:var(--ho-off);padding:52px 0;border-top:1px solid var(--ho-bd);}
.ho-related a{display:block;background:#fff;padding:20px 22px;}
.ho-related a:hover{background:#FCFCFC;}
/* 比較表 */
.ho-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ho-bd);}
.ho-tbl{width:100%;min-width:620px;border-collapse:collapse;background:#fff;font-size:.84rem;}
.ho-tbl th,.ho-tbl td{padding:13px 14px;border-bottom:1px solid var(--ho-bd);text-align:left;vertical-align:top;line-height:1.7;color:#444;}
.ho-tbl thead th{background:var(--ho-blk);color:#fff;font-weight:500;font-size:.8rem;}
.ho-tbl tbody th{background:var(--ho-off);color:#666;font-weight:400;width:120px;font-size:.78rem;}
.ho-tbl tr:last-child th,.ho-tbl tr:last-child td{border-bottom:none;}
/* チェックリスト */
.ho-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ho-bd);border:1px solid var(--ho-bd);}
.ho-check li{background:#fff;padding:16px 18px;font-size:.86rem;color:#333;line-height:1.6;display:flex;gap:12px;}
.ho-check li b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:var(--ho-green);font-size:1.1rem;line-height:1.3;flex-shrink:0;}
.ho-check li span small{display:block;color:#888;font-size:.76rem;margin-top:2px;}
/* 会社情報 */
.ho-co{display:grid;grid-template-columns:140px 1fr;border:1px solid var(--ho-bd);background:#fff;font-size:.84rem;}
.ho-co dt{background:var(--ho-off);padding:12px 16px;color:#666;border-bottom:1px solid var(--ho-bd);}
.ho-co dd{margin:0;padding:12px 16px;color:#333;border-bottom:1px solid var(--ho-bd);line-height:1.7;}
@media(max-width:768px){.ho-check{grid-template-columns:1fr;}.ho-co{grid-template-columns:100px 1fr;}}
/* ブランディング */
.ho-vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ho-bd);border:1px solid var(--ho-bd);margin-bottom:32px;}
.ho-vs-col{background:#fff;padding:26px 24px;}
.ho-vs-col--ok{background:var(--ho-blk);}
.ho-vs-col--ok .ho-h3{color:#fff;}
.ho-vs-list{list-style:none;margin:12px 0 0;padding:0;}
.ho-vs-list li{font-size:.86rem;line-height:1.7;padding:7px 0 7px 26px;position:relative;border-bottom:1px solid #F0F0F0;color:#555;}
.ho-vs-list li:last-child{border-bottom:none;}
.ho-vs-list--ng li::before{content:'×';position:absolute;left:2px;top:7px;color:#B0B0B0;}
.ho-vs-list--ok li{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.1);}
.ho-vs-list--ok li::before{content:'✓';position:absolute;left:2px;top:7px;color:#9CB58A;}
.ho-consult{margin:0 0 32px;}
.ho-consult-head{background:#fff;border:1px solid var(--ho-bd);border-bottom:none;padding:24px 24px 18px;}
.ho-consult .ho-grid{border-top:none;}
.ho-pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.ho-pack{background:#fff;border:1px solid var(--ho-bd);}
.ho-pack--featured{border:2px solid var(--ho-blk);}
.ho-pack-head{padding:26px 24px 22px;border-bottom:1px solid var(--ho-bd);}
.ho-pack--featured .ho-pack-head{background:var(--ho-blk);}
.ho-pack-name{font-family:'Yu Mincho','游明朝',YuMincho,serif;font-size:1.2rem;font-weight:500;color:var(--ho-blk);margin:0 0 6px;}
.ho-pack--featured .ho-pack-name{color:#fff;}
.ho-pack-for{font-size:.8rem;color:#666;line-height:1.7;margin:0 0 14px;}
.ho-pack--featured .ho-pack-for{color:rgba(255,255,255,.7);}
.ho-pack-sum{font-size:.78rem;color:#999;margin:0;}
.ho-pack-sum s{margin-left:6px;}
.ho-pack-price{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.4rem;color:var(--ho-green);line-height:1.1;margin:2px 0 4px;}
.ho-pack--featured .ho-pack-price{color:#9CB58A;}
.ho-pack-price small{font-family:'Yu Gothic',sans-serif;font-size:.72rem;color:#999;margin-left:4px;}
.ho-pack-run{font-size:.76rem;color:#777;margin:0;}
.ho-pack--featured .ho-pack-run,.ho-pack--featured .ho-pack-sum{color:rgba(255,255,255,.6);}
.ho-pack-list{list-style:none;margin:0;padding:10px 24px 18px;}
.ho-pack-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #F3F3F3;font-size:.86rem;color:#333;}
.ho-pack-list li:last-child{border-bottom:none;}
.ho-pack-list li::before{content:'✓';color:var(--ho-green);margin-right:8px;}
.ho-pack-list li span{flex:1;}
.ho-pack-list li em{display:block;font-style:normal;font-size:.72rem;color:#999;}
.ho-pack-list li b{font-weight:400;font-size:.76rem;color:#AAA;white-space:nowrap;}
.ho-tbl--menu{min-width:0;}
.ho-tbl--menu td small{display:block;font-size:.72rem;color:#999;}
.ho-tbl--menu td:last-child{white-space:nowrap;text-align:right;font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;color:var(--ho-blk);}
.ho-perk{margin-top:18px;background:var(--ho-green-lt);border-left:3px solid var(--ho-green);padding:16px 20px;}
.ho-perk p{font-size:.86rem;color:#333;line-height:1.8;margin:6px 0 0;}
@media(max-width:768px){
  .ho-vs,.ho-pack-grid{grid-template-columns:1fr;}
  .ho-tbl--menu td{font-size:.8rem;}
}
/* SP固定バー */
.ho-page .sp-cta-bar{display:none!important;}
.ho-sp-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#fff;border-top:1px solid #E5E5E5;}
.ho-sp-bar a{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 4px;font-size:.78rem;color:#fff;letter-spacing:.04em;}
.ho-sp-bar .is-line{background:#06C755;}
.ho-sp-bar .is-form{background:var(--ho-blk);}
@media(max-width:1024px){
  .ho-grid--4,.ho-num-grid{grid-template-columns:repeat(2,1fr);}
  .ho-grid--3{grid-template-columns:repeat(2,1fr);}
  .ho-flow{grid-template-columns:1fr;gap:18px;}
  .ho-flow::before{display:none;}
  .ho-flow-step{display:grid;grid-template-columns:56px 1fr;gap:14px;text-align:left;align-items:center;}
  .ho-flow-num{margin:0;}
}
@media(max-width:768px){
  .ho-in,.ho-in--sm{padding:0 20px;}
  .ho-sec{padding:52px 0;}
  .ho-grid--2,.ho-grid--3,.ho-grid--4,.ho-pain{grid-template-columns:1fr;}
  .ho-path{grid-template-columns:1fr;}
  .ho-path-arrow{transform:rotate(90deg);padding:6px 0;}
  .ho-price-row{grid-template-columns:1fr;}
  .ho-cta-bar{padding:16px 20px;}
  .ho-cta-bar-in{flex-direction:column;text-align:center;}
  .ho-final{padding:52px 20px;}
  .ho-final h2{font-size:1.5rem;}
  .ho-final h2 br{display:none;}
  .ho-sp-bar{display:flex;}
  body.ante-page{padding-bottom:50px;}
}

/* ══ v39.6 写真・レイアウト追加 ══ */
/* 写真枠：画像が未アップロードでも崩れない（淡いグリーンの面＋アイコン） */
.ho-ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#F3F5F0 0%,#E6ECE0 100%);aspect-ratio:4/3;}
.ho-ph::after{content:'';position:absolute;left:50%;top:50%;width:36px;height:36px;transform:translate(-50%,-50%);opacity:.35;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A4A' stroke-width='1.2'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");}
.ho-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.ho-ph--wide{aspect-ratio:16/10;}
.ho-ph--tall{aspect-ratio:4/5;}
.ho-ph--sq{aspect-ratio:1/1;}
.ho-cap{font-size:.76rem;color:#777;margin-top:8px;line-height:1.6;}
/* 概要：左文字＋右写真 */
.ho-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.ho-split--rev{grid-template-columns:.9fr 1.1fr;}
.ho-split .ho-head{text-align:left;margin-bottom:24px;}
.ho-split .ho-div{margin-left:0;}
.ho-split .ho-lead{margin:0;}
.ho-split .ho-h2{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.4;}
.ho-split .ho-btns{justify-content:flex-start;margin-top:24px;}
/* タイプカード（写真付き） */
.ho-type{background:#fff;display:flex;flex-direction:column;}
.ho-type .ho-ph{aspect-ratio:16/10;}
.ho-type-body{padding:22px 22px 24px;}
.ho-type--dark{background:var(--ho-blk);}
.ho-type--dark .ho-h3{color:#fff;}
.ho-type--dark .ho-txt{color:rgba(255,255,255,.75);}
.ho-type--dark .ho-card-en{color:rgba(255,255,255,.5);}
.ho-type--dark .ho-badge--blk{background:#fff;color:var(--ho-blk);}
/* 容器ストリップ */
.ho-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--ho-bd);border:1px solid var(--ho-bd);margin:28px 0 32px;}
.ho-strip figure{margin:0;background:#fff;}
.ho-strip figcaption{padding:10px 8px 12px;text-align:center;font-size:.78rem;color:#333;line-height:1.5;}
.ho-strip figcaption small{display:block;font-size:.68rem;color:#999;}
/* ギャラリー */
.ho-gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto;gap:12px;}
.ho-gallery figure{margin:0;}
.ho-gallery figure:first-child{grid-row:1 / span 2;}
.ho-gallery figure:first-child .ho-ph{aspect-ratio:auto;height:100%;min-height:360px;}
/* ブランディング：コンサル見出しに写真 */
.ho-consult-head--img{display:grid;grid-template-columns:1fr 280px;gap:28px;align-items:center;}
/* 単品メニューの開閉 */
.ho-menu-toggle{border:1px solid var(--ho-bd);background:#fff;margin-top:8px;}
.ho-menu-toggle>summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--ho-blk);font-family:'Yu Mincho','游明朝',YuMincho,serif;}
.ho-menu-toggle>summary::-webkit-details-marker{display:none;}
.ho-menu-toggle>summary::after{content:'＋';color:var(--ho-green);font-size:1rem;}
.ho-menu-toggle[open]>summary::after{content:'－';}
.ho-menu-toggle .ho-tbl-wrap{border:none;border-top:1px solid var(--ho-bd);}
/* その他OEM */
.ho-other{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ho-bd);border:1px solid var(--ho-bd);}
.ho-other-item{background:#fff;padding:22px 20px;display:flex;gap:14px;align-items:flex-start;}
.ho-other-ico{width:42px;height:42px;border:1px solid var(--ho-bd);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ho-green);flex-shrink:0;}
.ho-other-item .ho-h3{font-size:.95rem;margin-bottom:4px;}
/* 流れ内のチェックリスト */
.ho-flow-check{margin-top:40px;}
.ho-flow-check-title{font-family:'Yu Mincho','游明朝',YuMincho,serif;font-size:1rem;color:var(--ho-blk);text-align:center;margin:0 0 6px;}
.ho-flow-check-sub{font-size:.8rem;color:#888;text-align:center;margin:0 0 18px;}
@media(max-width:1024px){
  .ho-strip{grid-template-columns:repeat(3,1fr);}
  .ho-other{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .ho-split,.ho-split--rev{grid-template-columns:1fr;gap:28px;}
  .ho-split--rev .ho-ph{order:-1;}
  .ho-split .ho-head{text-align:center;}
  .ho-split .ho-div{margin-left:auto;}
  .ho-split .ho-btns{justify-content:center;}
  .ho-strip{grid-template-columns:repeat(2,1fr);}
  .ho-gallery{grid-template-columns:1fr 1fr;}
  .ho-gallery figure:first-child{grid-column:1 / span 2;grid-row:auto;}
  .ho-gallery figure:first-child .ho-ph{min-height:0;aspect-ratio:16/10;}
  .ho-consult-head--img{grid-template-columns:1fr;}
  .ho-other{grid-template-columns:1fr;}
}