@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- manual :ページ共通枠（ヘッダーの逃げ／コンテンツ幅）
- manual_head :パンくず・ページタイトルの余白（h1本体は common.scss の .page_ttl）
- manual_nav :カテゴリ内リンク（ページ内アンカー）
- manual_note :注意書き
- manual_section :商品カテゴリ見出し
- manual_list :商品一覧（ダウンロード行／アコーディオン行）
- manual_dl :PDFアイコン＋ダウンロードボタン
-------------------------*/
/* ---- 取扱説明書ページ用 変数 ---- */
/* 見出し */
/* 注意書き本文 */
/* 矢印・閉じるボタン */
/* 注意書きの地／カテゴリ内リンクの地 */
/* 一覧の奇数行 */
/* 一覧の偶数行 */
/* アコーディオン内の区切り線 */
/* ダウンロードボタン */
/* パンくず・見出しの幅（Figma 1440 − 左右80） */
/* 本文コンテンツ幅（Figma 1440 − 左右189） */
/* 左右の逃げ（Figma SP 375 − 左右20 = 335） */
/* 一覧の角丸 */
/* 既存PCヘッダー高さ（common.scss $hd_pc_h） */
/* 既存SPヘッダー高さ（common.scss $hd_sp_h） */
/* FigmaのTEXT枠は「1行目のキャップ上端〜最終行のベースライン」で、CSSの行ボックスより
   上下が狭い。差分（上 = 行送り ÷ 2 − 文字サイズ × 0.297）を打ち消すと、
   Figmaの余白値をそのままCSSへ書ける */
/*=======================================
　manual
=======================================*/
/* 既存ヘッダーは position:absolute のため、ページ側で開始位置を確保する */
.manual {
  padding-top: 105px;
  /* ヘッダーがハンバーガーへ切り替わる幅（xl）で高さも切り替わる */
}
@media screen and (max-width: 1024px) {
  .manual {
    padding-top: 60px;
  }
}
.manual .manual__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  /* 本文コンテンツはパンくずより内側（Figma x189〜1251） */
}
.manual .manual__inner--content {
  max-width: 1102px;
}

/* PC/SPで改行位置が異なる箇所の制御 */
.manual-br--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .manual-br--sp {
    display: inline;
  }
}

/*=======================================
　manual_head
=======================================*/
/* Figma PC : Frame 530（パンくず53）→ Frame 590（ttl 42 ＋ padding-bottom 30）
   Figma SP : contents-header（パンくず40 → gap 30 → ttl 69 → padding-bottom 30） */
/* 共通パーツ（common.scss の .page_breadcrumb / .page_ttl）は、CSSの行ボックスが
   Figmaのテキスト枠より高いぶんだけ文字が下がる。common.scss は既存ページと共用のため
   変更せず、このページ内だけで位置を補正する */
.manual .page_breadcrumb {
  padding: 18.6px 0 19.4px;
}
@media screen and (max-width: 768px) {
  .manual .page_breadcrumb {
    padding: 13.6px 0 15.6px;
  }
}

.manual__head {
  padding-bottom: 30.6px;
}
@media screen and (max-width: 768px) {
  .manual__head {
    padding-bottom: 20.5px;
  }
}
.manual__head .page_ttl {
  margin-top: -0.6px;
}
@media screen and (max-width: 768px) {
  .manual__head .page_ttl {
    margin-top: 15.3px;
    line-height: 46px;
  }
}

/*=======================================
　manual_nav
=======================================*/
/* Figma PC : Frame 626（1440 × 60 / 3項目 gap 49 / 中央寄せ）
   Figma SP : contents-navi-sp（375 × 71.575 / 3項目 gap 14 / テキスト下に矢印） */
.manual-nav {
  background: #F6F6F8;
}
.manual-nav .manual-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  gap: 49px;
}
@media screen and (max-width: 768px) {
  .manual-nav .manual-nav__list {
    align-items: flex-start;
    height: auto;
    padding: 15px 0;
    gap: 14px;
  }
}
.manual-nav .manual-nav__link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .manual-nav .manual-nav__link {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .manual-nav .manual-nav__link:hover {
    opacity: 0.6;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .manual-nav .manual-nav__link:hover {
    opacity: 0.6;
  }
}
.manual-nav .manual-nav__txt {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .manual-nav .manual-nav__txt {
    font-size: 12px;
    line-height: 14px;
  }
}
.manual-nav .manual-nav__caret {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 11.293px;
  height: 5.575px;
}
.manual-nav .manual-nav__caret::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-right: 1px solid #909090;
  border-bottom: 1px solid #909090;
  transform: rotate(45deg);
}

/*=======================================
　manual_note
=======================================*/
/* Figma PC : Frame 657（1062 × padding 60 34 / #F6F6F8）
   Figma SP : 335 × padding 35 20 */
.manual-note {
  /* Figma カテゴリ内リンク → 注意書き gap 60 */
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .manual-note {
    margin-top: 30px;
  }
}
.manual-note .manual-note__box {
  padding: 60px 34px;
  background: #F6F6F8;
}
@media screen and (max-width: 768px) {
  .manual-note .manual-note__box {
    padding: 35px 20px;
  }
}
.manual-note .manual-note__lead {
  margin-top: -3.7px; /* 18 ÷ 2 − 18 × 0.297 */
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .manual-note .manual-note__lead {
    margin-top: -7.2px; /* 24 ÷ 2 − 16 × 0.297 */
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }
}
.manual-note .manual-note__txt {
  margin-top: 12.8px; /* 21.6 ÷ 2 − 12 × 0.297 */
  margin-bottom: -5.6px; /* 21.6 − 7.2 − 12 × 0.7357 */
  font-weight: 400;
  font-size: 12px;
  line-height: 21.6px;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .manual-note .manual-note__txt {
    /* リード文の行送り下余白（24 − 7.2 − 16 × 0.7357 ≒ 5）が増えるぶんを引く */
    margin-top: 7.8px;
  }
}

/*=======================================
　manual_section
=======================================*/
/* Figma PC : 見出し29 ＋ gap 40 ＋ 一覧 ／ ブロック間 gap 60 ／ 最後に padding-bottom 100
   Figma SP : 見出し50 ＋ gap 30 ／ ブロック間 gap 60 ／ 最後に padding-bottom 60 */
.manual-section {
  margin-top: 60px;
  /* ページ内リンクで移動したとき、見出しの上にはみ出すアイコン画像（PC 10.5）が切れないよう余白を空ける。
     スクロール位置だけに効き、通常表示のセクション間隔は変わらない */
  scroll-margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .manual-section {
    margin-top: 60px;
    scroll-margin-top: 20px;
  }
}
.manual-section:last-of-type {
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .manual-section:last-of-type {
    padding-bottom: 60px;
  }
}
.manual-section .manual-section__ttl {
  display: flex;
  align-items: center;
}
.manual-section .manual-section__icon {
  position: relative;
  overflow: hidden;
  flex: 0 0 70px;
  width: 70px;
  height: 50px;
  margin: -10.5px 11px -10.5px 0; /* Figma テキスト開始位置 x81 − アイコン幅70 */
}
@media screen and (max-width: 768px) {
  .manual-section .manual-section__icon {
    margin: 0 11px 0 0;
  }
}
.manual-section .manual-section__img {
  position: absolute;
  max-width: none;
}
.manual-section .manual-section__icon--chair .manual-section__img {
  width: 61.586%;
  height: 106%;
  left: 24.921%;
  top: -3%;
}
.manual-section .manual-section__icon--bed .manual-section__img {
  width: 112.34%;
  height: 112.321%;
  left: -10.721%;
  top: -3.321%;
}
.manual-section .manual-section__icon--desk .manual-section__img {
  width: 73.633%;
  height: 166.849%;
  left: 13.183%;
  top: -41.138%;
}
.manual-section .manual-section__txt {
  margin: -6px 0 -2px; /* 30 ÷ 2 − 30 × 0.297 ／ 30 − 6 − 30 × 0.7357 */
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .manual-section .manual-section__txt {
    /* 20px / 行送り30px の行ボックス上下余白を打ち消し、
       2行になってもアイコン（50px）より高くならないようにする */
    margin: -9.1px 0 -6.2px;
    font-size: 20px;
    line-height: 30px;
  }
}

/*=======================================
　manual_list
=======================================*/
/* Figma PC : 角丸20の箱に行を積む。行は #F8F3EA / #F3EADC の交互
   Figma SP : 同じ構造で余白と並びだけ変える */
.manual-list {
  overflow: hidden;
  margin-top: 40px;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .manual-list {
    margin-top: 30px;
  }
}
.manual-list .manual-row {
  background: #F8F3EA;
}
.manual-list .manual-row:nth-child(even) {
  background: #F3EADC;
}
.manual-list .manual-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 40px;
  padding: 10px 40px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .manual-list .manual-row__head {
    flex-direction: column;
    align-items: flex-end;
    min-height: 0;
    padding: 18px 20px;
    gap: 15px;
  }
}
.manual-list .manual-row__name {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .manual-list .manual-row__name {
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
    /* 18px / 行送り22px の行ボックス上下余白を打ち消す */
    margin-top: -5.7px;
    margin-bottom: -3.1px;
  }
}
.manual-list .manual-row__ttl {
  margin: -4px 0;
  text-wrap: pretty; /* 折り返したときに最後の行が1文字だけにならないようにする（1440px・375pxの通常表示の改行は変わらない） */
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .manual-list .manual-row__ttl {
    min-width: 156px;
    margin: 0;
    font-size: 18px;
    line-height: 22px;
  }
}
.manual-list .manual-row__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 90px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .manual-list .manual-row__badge {
    /* Figmaでは行の高さに影響しないため、マージンボックスを商品名の行送り22に揃えて行を広げない */
    margin: -1px 0;
  }
}

/* Figma SP : 商品名が20pxで2行になる行（パタンⅡ／フラルWオープン／リビングコット）。
   行送り約24（2行の文字枠39）→ gap 10 → ボタン。ラベルは商品名の最後の行に続けて置き、
   収まらなければ次の行の先頭へ（リビングコット）。PCは他の行と同じ */
@media screen and (max-width: 768px) {
  .manual-row--large .manual-row__head {
    gap: 10px;
  }
}
@media screen and (max-width: 768px) {
  .manual-row--large .manual-row__name {
    display: block;
    /* 20px / 行送り24 の行ボックス上下余白を打ち消す（上 = (24 − 20 × 1.448) ÷ 2 + 20 × 0.427） */
    margin-top: -6.1px;
    margin-bottom: -3.3px;
  }
}
@media screen and (max-width: 768px) {
  .manual-row--large .manual-row__ttl {
    min-width: 0;
    font-size: 20px;
    line-height: 24px;
  }
}
@media screen and (max-width: 768px) {
  .manual-row--large .manual-row__ttl::after {
    content: " ";
    letter-spacing: 7.5px;
  }
}
@media screen and (max-width: 768px) {
  .manual-row--large .manual-row__badge {
    margin: 0;
    vertical-align: top; /* 行送り24と同じ高さで行の中に収める */
  }
}

/*=======================================
　manual_row_acc
=======================================*/
/* アコーディオンの見出しは開閉で余白を変えず、高さと文字位置を保つ。
   SP : 行 padding 30 20 ／ 商品名とボタンは横並び */
.manual-row--acc .manual-row__btn {
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .manual-row--acc .manual-row__btn {
    flex-direction: row;
    align-items: center;
    padding: 30px 20px;
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .manual-row--acc .manual-row__name {
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.manual-row--acc.is-open {
  padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .manual-row--acc.is-open {
    padding-bottom: 30px;
  }
}
.manual-row--acc .manual-row__toggle {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #CFAD75;
}
@media screen and (max-width: 768px) {
  .manual-row--acc .manual-row__toggle {
    width: 30px;
    height: 30px;
  }
}
.manual-row--acc .manual-row__toggle::before, .manual-row--acc .manual-row__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .manual-row--acc .manual-row__toggle::before, .manual-row--acc .manual-row__toggle::after {
    width: 14.25px;
  }
}
.manual-row--acc .manual-row__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.manual-row--acc.is-open .manual-row__toggle {
  background: #909090;
}
.manual-row--acc.is-open .manual-row__toggle::before {
  width: 19px;
  transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (max-width: 768px) {
  .manual-row--acc.is-open .manual-row__toggle::before {
    width: 14.25px;
  }
}
.manual-row--acc.is-open .manual-row__toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.manual-row--acc .manual-row__panel {
  padding: 0 40px 0 100px;
}
@media screen and (max-width: 768px) {
  .manual-row--acc .manual-row__panel {
    padding: 0 20px 0 min(55px, 100% - 20px - 223px);
  }
}
.manual-row--acc .manual-row__panel[hidden] {
  display: none;
}

/*=======================================
　manual_child
=======================================*/
/* Figma PC : 区切り線＋上下10の余白で1件 ／ SP : 上下15 */
.manual-child-list {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .manual-child-list {
    margin-top: 15px;
  }
}
.manual-child-list .manual-child {
  border-top: 1px solid #EADBC2;
}
.manual-child-list .manual-child:last-child .manual-child__link {
  padding-bottom: 0;
}
.manual-child-list .manual-child__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* 下は区切り線の1px分を差し引く（Figmaの線は高さを持たない） */
  padding: 10px 0 9px;
}
@media screen and (max-width: 768px) {
  .manual-child-list .manual-child__link {
    flex-direction: column;
    align-items: flex-end;
    padding: 15px 0 14px;
    gap: 15px;
  }
}
.manual-child-list .manual-child__name {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .manual-child-list .manual-child__name {
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
    /* 16px / 行送り22px の行ボックス上下余白を打ち消す */
    margin-top: -6.3px;
    margin-bottom: -4px;
  }
}
.manual-child-list .manual-child__ttl {
  margin: -4px 0;
  text-wrap: pretty;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .manual-child-list .manual-child__ttl {
    min-width: 156px;
    margin: 0;
    line-height: 22px;
  }
}

/*=======================================
　manual_dl
=======================================*/
/* PDFアイコン（16.915 × 19.029）＋ gap 16 ＋ ボタン（190 × 40 / radius 999 / #CFAD75） */
.manual-dl {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
}
.manual-dl .manual-dl__pdf {
  display: block;
  flex-shrink: 0;
  width: 16.915px;
  height: 19.029px;
}
.manual-dl .manual-dl__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 5px;
  width: 190px;
  height: 40px;
  border-radius: 999px;
  background: #CFAD75;
}
.manual-dl .manual-dl__txt {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
.manual-dl .manual-dl__icon {
  display: block;
  flex-shrink: 0;
  width: 10.769px;
  height: 12.246px;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .manual-row__head:hover,
  .manual-child__link:hover {
    opacity: 1;
  }
  .manual-row__head:hover .manual-dl__btn,
  .manual-child__link:hover .manual-dl__btn {
    opacity: 0.75;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .manual-row__head:hover,
  .manual-child__link:hover {
    opacity: 1;
  }
  .manual-row__head:hover .manual-dl__btn,
  .manual-child__link:hover .manual-dl__btn {
    opacity: 0.75;
  }
}

/* referenceでInter指定の商品名のみ（Noto Sans指定の2項目は対象外） */
.manual-child__ttl--inter {
  font-family: "Inter", "Noto Sans JP", sans-serif;
}