/*
 * 【サイズガイド】 v1.3.0
 * Scope root: .cm-sg-body
 * 表示制御は .is-active と hidden のみ
 */

/* --- Fonts (Yu Gothic 固定) ------------------------------- */
html[data-cm]{
  --cm-font-sans: YuGothic, "Yu Gothic M", "Yu Gothic Medium",
                  "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
                  sans-serif;
}
html[data-cm] body,
html[data-cm] button,
html[data-cm] input,
html[data-cm] select,
html[data-cm] textarea{
  font-family: var(--cm-font-sans);
}
html[data-cm] :where(h3){
  font-family: "YuGothicHeadingAdjusted", var(--cm-font-sans);
  font-weight: 700;
}

/* --- Base ------------------------------------------------ */
.cm-sg-panel{ font-size:16px; line-height:1.75; }
.cm-sg-panel ul{ padding-inline-start:20px; }
.cm-sg-panel ul>li:not(:last-child){ padding-bottom:.5rem; }

.cm-sg-container{ padding-left:15px; padding-right:15px; }
@media (min-width:768px){ .cm-sg-container{ padding-left:30px; padding-right:30px; } }

.cm-sg-section{ max-width:680px; margin-left:auto; margin-right:auto; }
.cm-sg-img{ display:block; max-width:100%; height:auto; }

figure { margin-inline: 0; text-align: center; }
figcaption { padding-top: .875rem; font-size: 13px; }

/* パネル上下余白 - simple v1.0.0 */
html[data-cm]{
  /* 好みで1行だけ調整すればOK */
  --cm-panel-gap: clamp(32px, 5vw, 72px);
}

html[data-cm] .cm-sg-panel{
  margin-block: var(--cm-panel-gap);
}

/* --- Heading ------------------------------------------------ */
.cm-sg-header h1{ text-align:center; font-size:14px; }
/* h2 をSEO有効のまま視覚非表示 */
.cm-sg-header h1, .cm-sg-panel > h2{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.cm-sg-content h3{ margin-top:2.625rem; margin-bottom:.875rem; line-height:1.5; }

/* 本文リンクのスタイルは panel 内だけに限定 */
.cm-sg-panel a{
  color:inherit;
  text-decoration:underline;
	text-underline-offset: 5px;
  transition:color .2s linear;
}
.cm-sg-panel a:visited{ color:inherit; }
.cm-sg-panel a:hover,
.cm-sg-panel a:focus{ color:#0275d8; }

/* Tabs 2行 */
.cm-sg-tabs{
  position:relative; display:flex; flex-wrap:wrap; gap:0; margin-bottom:1.75rem;
  --bar:3px; --base-w:min(1024px,100vw);
}
.cm-sg-tabs::before, .cm-sg-tabs::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:var(--base-w); height:1px; background:#e8e8e8; pointer-events:none; z-index:0;
}
.cm-sg-tabs::before{ top:50%; }
.cm-sg-tabs::after { bottom:0; }

.cm-sg-tab{ flex:1 0 50%; }
.cm-sg-tab a{
  display:flex; justify-content:center; align-items:center;
  height:54px; padding:0; font-weight:700; font-size:14px; line-height:1;
  color:#7d7d7d; position:relative; text-decoration:none; z-index:1;
}
.cm-sg-tabs a.is-active{ color:inherit; }

/* ブレスレット二行ラベル */
.cm-sg-tab--bracelet .cm-sg-l1, .cm-sg-tab--bracelet .cm-sg-l2{ display:block; }
.cm-sg-tab--bracelet .cm-sg-l1{ margin-bottom:.25em; }
.cm-sg-tab--bracelet .cm-sg-sep{ display:none; }
.cm-sg-tab--bracelet a{ flex-direction:column; }
@media (min-width:480px){
  .cm-sg-tab--bracelet .cm-sg-l1, .cm-sg-tab--bracelet .cm-sg-l2{ display:inline; margin:0; }
  .cm-sg-tab--bracelet .cm-sg-sep{ display:inline; }
  .cm-sg-tab--bracelet .cm-sg-sep::after{ content:"/"; display:inline-block; }
  .cm-sg-tab--bracelet a{ flex-direction:row; }
}

/* Active bar */
.cm-sg-activebar{
  position:absolute; height:var(--bar); background:#111; border-radius:2px;
  z-index:2; left:0; top:0; width:0; pointer-events:none;
  transition:left .25s ease, width .25s ease, top .25s ease;
}

/* Panels: is-active と hidden でのみ制御 */
.cm-sg-panels > .cm-sg-panel{ display:none; }
.cm-sg-panels > .cm-sg-panel.is-active{ display:block; }
.cm-sg-panel[hidden]{ display:none !important; }

/* JS無効時は最初の面だけ見せる */
.cm-sg-panels.no-js > .cm-sg-panel:first-child{ display:block; }

/* --- Tables 13px 1.4 ------------------------------------ */
.cm-sg-table{ width:100%; border-collapse:collapse; font-size:13px; line-height:1.4; }
.cm-sg-table th, .cm-sg-table td{
  padding:12px; border-bottom:1px solid #eee; text-align:center; vertical-align:middle; white-space: nowrap; }
.cm-sg-table thead tr{ background:#f5f5f5; }
.cm-sg-table caption{ caption-side:top; text-align:left; margin-bottom:.5rem; color:#000; }

.cm-sg-tablewrap{ position:relative; margin-bottom:1rem; }
.cm-sg-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.cm-sg-nowrap{ white-space:nowrap; }


/* 【楽天用サイズガイド】 Fade overlays v1.0.0 */
html[data-cm] .cm-sg-tablewrap{
  position: relative;
  /* フェードの基準色。背景が白以外なら上書きしてください */
  --cm-fade-bg: var(--cm-bg, #fff);
}

html[data-cm] .cm-sg-table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 0; /* フェードを上に載せるための土台 */
}

/* 左右フェード本体 */
html[data-cm] .cm-sg-fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(16px, 8vw, 48px);
  pointer-events: none; /* スクロールを邪魔しない */
  z-index: 3;
  opacity: 1;
  transition: opacity .18s linear;
}

/* 左フェード */
html[data-cm] .cm-sg-fade--left{
  left: 0;
  background: linear-gradient(to right, var(--cm-fade-bg, #fff) 0%, transparent 100%);
}

/* 右フェード */
html[data-cm] .cm-sg-fade--right{
  right: 0;
  background: linear-gradient(to left, var(--cm-fade-bg, #fff) 0%, transparent 100%);
}

/* JSで非表示にする時 */
html[data-cm] .cm-sg-fade[hidden]{
  display: none;
}



/* --- Ordered list 丸数字バッジ --------------------------- */
.cm-sg-ol{ counter-reset:cm-sg-counter; list-style:none; margin-top: .875rem; padding-left:36px; margin-left:0; }
.cm-sg-ol > li{ position:relative; }
.cm-sg-ol > li:not(:last-child){ padding-bottom:.5rem; }
.cm-sg-ol > li::before{
  content:counter(cm-sg-counter); counter-increment:cm-sg-counter;
  background:#939da3; color:#fff; display:block; font-size:13px; line-height:22px;
  text-align:center; height:22px; width:22px; border-radius:50%;
  position:absolute; left:-36px; top:2px;
}
@media (min-width:768px){
  .cm-sg-ol > li::before{ top:5px; }
}

/* 小見出しユーティリティ */
.cm-sg-h4{ font-size:1rem; font-weight:700; }
.cm-sg-note{ display:block; font-size:.8125rem; color:#555; line-height: 1.4; }


/* Underline utility */
.cm-sg-underline{
  background-image:linear-gradient(120deg,#68b1ff 0%,#68b1ff 100%);
  background-repeat:no-repeat; background-size:100% .24em; background-position:0 88%;
  transition:background-size .25s ease-in;
}
.cm-sg-underline:hover{ background-size:100% 60%; }





/* ===== Size Guide - embed overrides (modal iframe only) v1.0.0 ===== */


/* UA既定余白と横スクロール抑止 */
html.cm-sg-in-modal, html.cm-sg-in-modal body{
  margin: 0; padding: 0;
  overflow-x: clip;         /* 非対応なら hidden でOK */
  overflow-clip-margin: 0;
  scrollbar-gutter: stable; /* 横幅ブレ低減 */
}

/* コンテナ・セクションは全幅に */
html.cm-sg-in-modal .cm-sg-container,
html.cm-sg-in-modal .cm-sg-section{
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 画像・図のはみ出し防止 */
html.cm-sg-in-modal img,
html.cm-sg-in-modal svg,
html.cm-sg-in-modal canvas,
html.cm-sg-in-modal video{
  display: block;
  max-width: 100%;
  height: auto;
}

/* タブの薄グレー線をはみ出さないように */
html.cm-sg-in-modal .cm-sg-tabs{ position: relative; }
html.cm-sg-in-modal .cm-sg-tabs::before,
html.cm-sg-in-modal .cm-sg-tabs::after{
  left: 0; right: 0;
  width: auto;         /* 100%でも可 */
  transform: none;
}

/* 表は横スクロール方針 */
html.cm-sg-in-modal .cm-sg-tablewrap{ position: relative; }
html.cm-sg-in-modal .cm-sg-table-scroll{
  overflow-x: auto;                   /* ← ここを visible から auto に */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* 表自体は中身の幅で広がる。狭い時は100%で埋める */
html.cm-sg-in-modal .cm-sg-table{
  width: max-content;                 /* 100% を撤回 */
  min-width: 100%;
  table-layout: auto;                 /* fixed を撤回 */
}

/* 折り返さず横へ逃がす */
html.cm-sg-in-modal .cm-sg-table th,
html.cm-sg-in-modal .cm-sg-table td{
  white-space: nowrap;                /* 必要なら付与 */
  word-break: normal;                 /* break-word を撤回 */
}