/* Hima Cafe product styling — 2026-10-08. Replace hmcf_product.css. */
/* Product accordion. Load after existing CSS. Preserve layout and empty-item handling. */
body.fs-body-product .fs-accordion {
  margin-top: 32px;
  border-top: 1px solid #E2E2E2;
}
body.fs-body-product .fs-accordion > details.js-accordion-item {
  margin: 0;
  border-bottom: 1px solid #E2E2E2;
  border-radius: 0;
  box-shadow: none;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > summary {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 60px;
  padding: 18px 48px 18px 12px;
  color: #353634;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::-webkit-details-marker { display: none; }
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::marker { content: ''; }
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::before,
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 17px;
  width: 14px;
  height: 2px;
  background: #666666;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity .15s ease;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > summary::after { transform: translateY(-50%) rotate(90deg); }
body.fs-body-product .fs-accordion > details.js-accordion-item[open] > summary { background: #F3F3F3; }
body.fs-body-product .fs-accordion > details.js-accordion-item[open] > summary::after { opacity: 0; }
body.fs-body-product .fs-accordion > details.js-accordion-item > summary:focus-visible { outline: 2px solid #666666; outline-offset: -2px; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content {
  padding: 20px 0 24px;
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  word-break: normal;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > .content > :first-child { margin-top: 0; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content > :last-child { margin-bottom: 0; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content img { max-width: 100%; height: auto; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content iframe { max-width: 100%; }
@media (hover: hover) {
  body.fs-body-product .fs-accordion > details.js-accordion-item > summary:hover { background: #F3F3F3; }
}
@media (max-width: 768px) {
  body.fs-body-product .fs-accordion { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  body.fs-body-product .fs-accordion > details.js-accordion-item > summary,
  body.fs-body-product .fs-accordion > details.js-accordion-item > summary::before,
  body.fs-body-product .fs-accordion > details.js-accordion-item > summary::after { transition: none; }
}

/* Hima Cafe product content: common CSS */
.hmcf-pd { color: #353634; font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.hmcf-pd, .hmcf-pd * { box-sizing: border-box; }
.hmcf-pd > :first-child { margin-top: 0; }
.hmcf-pd > :last-child { margin-bottom: 0; }
.hmcf-pd p { margin: 0 0 1em; }
.hmcf-pd h2 { margin: 0 0 20px; padding: 0 0 12px; border-bottom: 1px solid #E2E2E2; color: #353634; font-size: 22px; line-height: 1.5; background: none; }
.hmcf-pd h3 { margin: 28px 0 12px; color: #353634; font-size: 18px; line-height: 1.6; background: none; border: 0; padding: 0; }
.hmcf-pd ul { margin: 0 0 1em; padding-left: 1.4em; list-style: disc; }
.hmcf-pd li { margin-bottom: .4em; }
.hmcf-pd img { display: block; max-width: 100%; height: auto; margin: 20px auto; border: 1px solid #E2E2E2; border-radius: 12px; }
.hmcf-pd a { color: #715323; text-decoration: underline; text-underline-offset: .2em; }
.hmcf-pd a:focus-visible { outline: 2px solid #715323; outline-offset: 4px; }
.hmcf-pd .hmcf-pd__label { margin: 0 0 6px; font-weight: 700; }
.hmcf-pd .hmcf-pd__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.hmcf-pd .hmcf-pd__table th, .hmcf-pd .hmcf-pd__table td { border: 1px solid #E2E2E2; padding: 12px 14px; text-align: left; vertical-align: top; color: #353634; }
.hmcf-pd .hmcf-pd__table th { width: 28%; background: #F7F7F7; font-weight: 600; }
.hmcf-pd .hmcf-pd__table td { background: #fff; }
.hmcf-pd .hmcf-pd__scroll { overflow-x: auto; }
.hmcf-pd .hmcf-pd__scroll:focus-visible { outline: 2px solid #715323; outline-offset: 2px; }
.hmcf-pd .hmcf-pd__size { min-width: 420px; }
.hmcf-pd .hmcf-pd__size th { width: auto; }
.hmcf-pd .hmcf-pd__note { margin-top: 12px; font-size: 14px; }
@media (max-width: 600px) {
  .hmcf-pd h2 { font-size: 20px; }
  .hmcf-pd h3 { font-size: 17px; }
  .hmcf-pd .hmcf-pd__table th, .hmcf-pd .hmcf-pd__table td { padding: 10px; }
  .hmcf-pd .hmcf-pd__table th { width: 30%; }
  .hmcf-pd .hmcf-pd__size th { width: auto; }
}
/* Sales notice: use inside product description (small). */
body.fs-body-product .hmcf-pd.hmcf-pd--notice {
  box-sizing: border-box;
  margin: 20px 0;
  padding: 16px 18px;
  border: 0;
  border-left: 4px solid #D98B9B;
  border-radius: 0 8px 8px 0;
  background: #FFF1F3;
  color: #353634;
  font-size: 15px;
  line-height: 1.8;
}
body.fs-body-product .hmcf-pd--notice .hmcf-pd__label { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
body.fs-body-product .hmcf-product-size { margin-top: 28px; }
body.fs-body-product .hmcf-product-size[hidden],
body.fs-body-product .hmcf-product-specs[hidden] { display: none; }

body.fs-body-product .fs-accordion > details.js-accordion-item > .content table { width: 100%; border-collapse: collapse; }

/* Heading hierarchy inside both legacy and new accordion content. */
body.fs-body-product .fs-accordion > details.js-accordion-item > .content :is(h2, h3, h4) {
  margin: 24px 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #353634;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > .content :is(h2, h3, h4) :is(span, strong) {
  font-size: inherit;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > .content .hmcf-pd { font-size: 15px; }
/* Tables in legacy content also use neutral gray. */
body.fs-body-product .fs-accordion > details.js-accordion-item > .content table :is(th, td) {
  color: #353634;
  border-color: #E2E2E2;
}
body.fs-body-product .fs-accordion > details.js-accordion-item > .content table th { background: #F7F7F7; }
body.fs-body-product .fs-accordion > details.js-accordion-item > .content table td { background: #FFFFFF; }


/* Shared table types for the migrated product layout. */
.hmcf-pd .hmcf-pd__table--pair { min-width: 0; width: 100%; table-layout: fixed; }
.hmcf-pd .hmcf-pd__table--pair th { width: 28%; white-space: normal; overflow-wrap: anywhere; }
.hmcf-pd .hmcf-pd__table--pair td { width: auto; white-space: normal; overflow-wrap: anywhere; }
.hmcf-pd .hmcf-pd__scroll { max-width: 100%; overflow-x: auto; }
.hmcf-pd .hmcf-pd__table--wide { width: 100%; min-width: 540px; table-layout: fixed; }
.hmcf-pd .hmcf-pd__table--wide th { width: auto; }
.hmcf-pd .hmcf-pd__table--wide[data-columns="6"] { min-width: 660px; }
.hmcf-pd .hmcf-pd__table--wide[data-columns="7"] { min-width: 770px; }
.hmcf-pd .hmcf-pd__table--wide[data-columns="8"] { min-width: 880px; }
.hmcf-pd .hmcf-pd__video { position: relative; aspect-ratio: 16 / 9; }
.hmcf-pd .hmcf-pd__video iframe { width: 100%; height: 100%; max-width: 100%; border: 0; }
.hmcf-pd h4 { margin: 24px 0 10px; padding: 0; border: 0; background: none; font-size: 16px; line-height: 1.6; }

/* Explicit lists: retain bullets and step numbers under theme resets. */
.hmcf-pd ul { margin: 0 0 1em; padding-left: 1.4em; list-style: disc outside; }
.hmcf-pd ol { margin: 0 0 1em; padding-left: 1.8em; list-style: decimal outside; }
.hmcf-pd ul > li { display: list-item; list-style-type: disc; }
.hmcf-pd ol > li { display: list-item; list-style-type: decimal; }

/* Product description (small): use the existing futureshop wrapper. */
body.fs-body-product .fs-p-productDescription--short > .hmcf-pd:not(:empty) {
  box-sizing: border-box;
  padding: 16px;
  background: #ffe8e8;
}


/* 項目選択肢部分の調整 */
/* 商品の選択・確認欄 */
body.fs-body-product .fs-c-productSelection:has(> .fs-c-productSelection__name) {
  box-sizing: border-box;
  margin: 24px 0;
  padding: 16px;
  border: 1px solid #dedbd2;
  border-radius: 8px;
  background: #faf7ec;
}

/* 項目名 */
body.fs-body-product .fs-c-productSelection__name {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}

body.fs-body-product .fs-c-productSelection__label {
  font-size: inherit;
}

body.fs-body-product .fs-c-productSelection__name ~ .fs-c-productSelection__name {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #dedbd2;
}

body.fs-body-product .fs-c-productSelection__selection {
  margin: 0;
}

/* 必須：既存のアスタリスク表示を文字ラベルへ */
body.fs-body-product .fs-c-productSelection .fs-c-requiredMark {
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 6px;
  padding: 1px 6px;
  overflow: visible;
  text-indent: 0;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.5;
  color: #9d4055;
  background: #fff1f3;
  border-radius: 3px;
}

body.fs-body-product .fs-c-productSelection .fs-c-requiredMark::before {
  content: none;
}

/* ラジオ・チェックの選択肢 */
body.fs-body-product .fs-c-productSelection :is(.fs-c-radio__label, .fs-c-checkbox__label) {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #cbc8be;
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  line-height: 1.6;
  cursor: pointer;
}

body.fs-body-product .fs-c-productSelection input:checked + :is(.fs-c-radio__label, .fs-c-checkbox__label) {
  border-color: #8a9c7c;
  background: #eff4eb;
}

body.fs-body-product .fs-c-productSelection input:focus-visible + :is(.fs-c-radio__label, .fs-c-checkbox__label) {
  outline: 2px solid #715323;
  outline-offset: 3px;
}

/* プルダウン・文字入力 */
body.fs-body-product .fs-c-productSelection :is(select, input[type="text"], textarea) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  font-size: 16px;
}

/* 項目選択肢：ラジオボタンと文字の間隔 */
body.fs-body-product .fs-c-productSelection .fs-c-radio__label {
  column-gap: 8px;
}

body.fs-body-product .fs-c-productSelection .fs-c-radio__radioMark {
  flex-shrink: 0;
}