/* ====================================================================
   retro.css
   /retro/（レトロ玩具買取ページ）専用スタイル

   ・ガチャガチャ買取ページ用CSS（capsule-toys系）を土台に、
     クラス名・ID・画像パスを retro 用に置き換えています。
   ・「こんなアイテムを買取しています」セクションは、いただいたアコーディオン用
     バナー画像（708×202、17ジャンル分）を見出しに使った<details>/<summary>アコーディオン
     （.retro-accordion）にしています。列数はビューポート
     基準のメディアクエリではなく、CSS Gridのauto-fit（コンテナ自体の実幅で判定）で
     制御しています（サイドバー付きテンプレートでメイン幅が固定される問題への対応）。
     展開順は「紹介テキスト→写真→対象/メーカー→リンクボタン」。name属性による排他制御
     （他ジャンルを開くと自動的に閉じる）とPC/スマホでの初期開閉状態のみ、最小限のJSを
     使っています（詳細はセクション内のコメント参照）。
   ・[要確認] #retro-qa 等、ページスラッグ依存のID装飾は末尾のコメント参照。
==================================================================== */


/* テーマ調整
----------------------------------------------- */
/* #breadcrumb {
  background: #FFF url(/img/retro/bg-v2.png) center bottom;
} */


/* トップバナー
----------------------------------------------- */
.retro .top-bn img {
  display: block;
  max-width: 100%;
}


/* CTAゾーン（電話・フォーム・LINE の帯） roof / message で上下を装飾
----------------------------------------------- */
.cta-zone {
  background: radial-gradient(circle, #DBB886 0%, #C55204 100%);
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
}
.cta-zone .retro-top-roof,
.cta-zone .retro-top-message {
  display: block;
  max-width: 100%;
}
/* 中心#CB6E28→外側#C55204 の放射状グラデーション（デザイン画像から実測して反映） */


/* ボタン
----------------------------------------------- */
#content .retro {
  padding-top: 0;
}
/* #content .retro .app-btn li {
  width: 48%;
} */


/* 買取れるアイテム（買取強化中アイテム／[pickup-kyouka-items]）
----------------------------------------------- */
#content .taishou .kannrenn {
  font-weight: bold;
}
#content .taishou ul.item {
  background-image:
    url(../img/retro/cabinet-parts1.jpg),
    url(../img/retro/cabinet-parts2.jpg),
    url(../img/retro/cabinet-parts2.jpg);
  background-position:
    center top,
    left center,
    right center;
  background-repeat:
    repeat-x,
    repeat-y,
    repeat-y;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 13px 14px 0;
}
#content .taishou ul.item li {
  background-image:
    url(../img/retro/cabinet-parts1.jpg),
    url(../img/retro/cabinet-parts3.jpg);
  background-position:
    center bottom,
    left center;
  background-repeat: repeat-x;
  background-size:
    auto,
    auto 100%;
  text-align: center;
  margin: 0;
  padding: 10px 10px 13px;
  width: calc( 100% / 2 );
}
#content .taishou ul.item li img {
  margin: 0;
}
#content .taishou ul.item li:nth-child(2n+2) {
  background-position:
    center bottom,
    50% center;
}

#content .taishou ul.item li .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-transition: -webkit-transform 0.3s linear;
  -o-transition: -o-transform 0.3s linear;
  transition: -webkit-transform 0.3s linear;
  -o-transition: transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
#content .taishou ul.item li .wrapper:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#content .taishou ul.item li .wrapper:hover img {
  opacity: 1;
}
#content .taishou ul.item li a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#content .taishou .image {
  max-width: 180px;
  margin: 0 auto;
}
#content .taishou ul.item li a span {
  background: #FFF;
  border-right: 1px #333 solid;
  border-left: 1px #333 solid;
  border-bottom: 1px #333 solid;
  color: #0044b4;
  font-weight: bold;
  display: block;
  padding: 2px 10px;
  position: relative;
}
#content .taishou ul.item li a span:after {
  background: #FFF;
  background: -webkit-gradient(linear, left top, right top, from(#333333),color-stop(30%, #ffffff),color-stop(70%, #ffffff),to(#333333));
  background: -o-linear-gradient(left, #333333 0%,#ffffff 30%,#ffffff 70%,#333333 100%);
  background: linear-gradient(to right, #333333 0%,#ffffff 30%,#ffffff 70%,#333333 100%);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
}
#content .taishou ul.item li .txt {
  border-right: 1px #333 solid;
  border-left: 1px #333 solid;
  border-bottom: 1px #333 solid;
  background: #FFF;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: left;
  padding: 2px 10px;
}


/* アイテムブロック（取扱いメーカー：categorise） ※ガチャガチャ買取ページと同じスタイル
----------------------------------------------- */
.categorise {
  padding: 0.5em;
  padding: 10px 10px 10px 10px;
}
.categorise ul {
background-color: #dbecfb;
clear: both;
display: flex;
flex-wrap: wrap;
margin: 0 auto  !important;
padding: 2em 1em;
overflow: auto !important;
border-radius: 5px;
gap: 1em;
}
.categorise  ul li {
float: none !important;
width: calc(33.33% - 30px) !important;
text-align: center;
box-sizing: border-box;
padding: 0;
background-color: #C0D1DF;
}
.categorise ul.with-link li:hover {
background: #CEE1FF;
}
.categorise ul li:hover {
background: #C0D1DF;
}
.categorise ul li a {
color: #333;
display: block;
}
.categorise ul li a:after {
clear: both;
content: "";
display: block;
}
.categorise ul li span {
color: #000;
display: block;
padding: 1em;
margin-bottom: 0 !important;
text-align: left;
line-height: 1.2em;
}
.categorise ul li  .img-box {
background-color: #FFF;
padding: 1em;
}
.categorise ul li img {
float: none;
width: 100% !important;
background-color: #FFF;
}

/* CTA（電話・フォーム・LINE）
----------------------------------------------- */
.retro-toys-cta li p {
  font-family: "Hiragino Maru Gothic Pro", "M PLUS Rounded 1c", "Rounded Mplus 1c", sans-serif;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  margin: 4px 0 0;
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
}

/* TEL */
.retro-toys-cta li:nth-child(1) p {
  color: #264B92;
}

/* フォーム（問い合わせ） */
.retro-toys-cta li:nth-child(2) p {
  color: #B84C27;
}

/* LINE */
.retro-toys-cta li:nth-child(3) p {
  color: #00B700;
}

@media screen and (min-width: 690px) {
  .retro-toys-cta {
    display: flex;
    gap: 50px;
    margin: 0 auto !important;
    width: 85% !important;
  }
}

@media screen and (max-width: 689px) {
  .retro-toys-cta {
  display: flex;
  gap: 8px;
  margin: 0 auto !important;
  width: 95% !important;
  }
}

.retro-toys-cta li {
  flex: 1 1 0;       /* 3つを均等幅に（liの幅を明確に確定させる） */
  min-width: 0;      /* flexアイテムの最小幅を画像サイズ基準から解放 */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.retro-toys-cta img {
  width: 100% !important;   /* liの幅が確定したので、その幅に追従する */
  max-width: 200px;         /* PCで大きくなりすぎないよう上限（任意調整可） */
  display: block;
  margin: 0 auto;
}

/* レトロホビーの買取について
----------------------------------------------- */
.retro-about-body {
  background-color: #F0F0F0;
  padding: 1.2em;
  border-radius: 5px;
  margin-bottom: 1em;
}
.retro-about h3 {
  margin: 1.4em 0 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 3px solid #d9622b;
  font-size: 1.1em;
  color: #333;
}

.retro-about .imagebox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 1.4em;
}

.retro-about .imagebox > div {
  flex: 0 0 calc((100% - 0.8rem) / 2);
}

.retro-about .imagebox.single {
  justify-content: center;
}
.retro-about .imagebox.single > div {
  flex: 0 0 100%;
  max-width: 500px;
}

.retro-about .imagebox img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}


/* MOREボタン
----------------------------------------------- */
#content .box .more {
  text-align: center;
}
#content .box .more a {
  background: linear-gradient(to bottom, #13ad2c, #2E9B28);
  border: 1px solid #4fb94d;
  border-radius: 5px;
  box-shadow: 1px 2px 2px rgba(11, 3, 6, .5), inset 0 0 0 1px rgba(255, 255, 255, .5);
  color: #fff;
  display: block;
  text-align: center;
  font-weight: bold;
  line-height: 1.4em;
  margin: 0 auto 1em;
  min-width: 137px;
  padding: 0.5em 1em;
  width: 100%;
}
#content .box .more a:hover {
  opacity: 0.8;
}

.responsive-image img {
  max-width: 100%;
}

/* block.css の #content .box picture img { width:100%; max-width:690px; } が
   ネイティブサイズ以上に引き伸ばしてしまうため、明示的に上書き
   （retro_staff_005/011/001 は400×182が実寸） */
#content .box picture img {
  width: auto !important;
  max-width: 100% !important;
  display: block;
  margin: 0 auto;
}


/* ３つの買取案内ブロック
----------------------------------------------- */
@media (max-width: 600px) {
    #content .houhou .decorative-image {
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }
}


/* こんなアイテムを買取しています（.retro-accordion） ※本ページ専用の新規スタイル
   17ジャンルをアコーディオン化。見出しはジャンル別バナー画像（708×202、
   /img/retro/ 以下）をクリック／タップで開閉するsummaryとして使用。
   <details>/<summary>のネイティブ挙動を利用しているためJSは不要です。
   バナー画像自体に装飾（赤枠等）が入っているため、外側の余計な装飾は付けていません。
----------------------------------------------- */
/* レトロ玩具アコーディオン */
.retro-accordion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0 0 10px;
  list-style: none;
}

.retro-accordion > li {
  box-sizing: border-box;
  min-width: 0;
}

/* クリックする見出し */
.retro-accordion .item-cat-head {
  display: block;
  cursor: pointer;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
}

/* 見出し画像 */
.retro-accordion .item-cat-head img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 開閉する本文 */
.retro-accordion .item-cat-inner {
  display: none;
}

/* .genre-body：details標準の「display:none」でのカクッと開閉ではなく、
   grid-template-rows を 0fr → 1fr にアニメーションさせるCSSのみのテクニックで
   滑らかに開閉させています（JS不要）。border-colorはジャンル別クラス
   （li.sofubi 等）ごとに下記で指定しています（Excel指定の枠色）。 */
.genre-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  background: #FFF;
  border: 3px solid #999; /* 各ジャンルの色指定が無い場合のフォールバック */
  width: 100%;
  max-width: 96%; /* PC */
  margin-top: -0.3rem;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 689px) {
  .genre-body {
    max-width: 94%; /* SP */
  }
}
details[open] > .genre-body {
  grid-template-rows: 1fr;
}

/* ジャンル別 枠線色（Excel指定の色） */
.retro-accordion li.sofubi        .genre-body { border-color: #f94664; }
.retro-accordion li.gokin         .genre-body { border-color: #f2d64b; }
.retro-accordion li.buriki        .genre-body { border-color: #484848; }
.retro-accordion li.minicar       .genre-body { border-color: #5f151c; }
.retro-accordion li.plamo         .genre-body { border-color: #1d4938; }
.retro-accordion li.rc            .genre-body { border-color: #484848; }
.retro-accordion li.sentai        .genre-body { border-color: #fe0000; }
.retro-accordion li.rider         .genre-body { border-color: #18918f; }
.retro-accordion li.ultraman      .genre-body { border-color: #ac171e; }
.retro-accordion li.action-figure .genre-body { border-color: #496078; }
.retro-accordion li.henkei-robot  .genre-body { border-color: #01aff1; }
.retro-accordion li.dollhouse     .genre-body { border-color: #fe6500; }
.retro-accordion li.gacha         .genre-body { border-color: #fe6500; }
.retro-accordion li.shokugan      .genre-body { border-color: #422811; }
.retro-accordion li.denshi-game   .genre-body { border-color: #01aff1; }
.retro-accordion li.godzilla      .genre-body { border-color: #1d2749; }
.retro-accordion li.atom          .genre-body { border-color: #491d1d; }

/* grid-template-rows: 0fr の間、中身を隠して高さ0にするための内側ラッパー */
.genre-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 1.2em 1.4em;
}

/* 紹介テキスト */
.genre-body-inner > p.small {
  margin: 0 0 1em;
  font-size: 0.95em;
  line-height: 1.8;
  color: #333;
}

/* 写真ギャラリー */
.genre-photos {
  display: flex;
  gap: 6px;
  margin-bottom: 1em;
}
.genre-photos img {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  min-width: 0;
  height: auto;
  display: block;
}

/* 対象アイテム／取り扱いメーカー（■見出し＋本文） */
.genre-tags h4 {
  margin: 0 0 0.3em;
  font-size: 0.95em;
  color: #333;
}
.genre-tags p {
  margin: 0 0 1em;
  font-size: 0.9em;
  line-height: 1.6;
  color: #333;
}

/* リンクボタン（矢印つきの緑ボタン） */
.genre-body-inner p.more {
  margin: 1em 0 0;
  text-align: center;
}
.genre-body-inner p.more a {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.7em 1em;
  background: #2e9b28;
  color: #FFF;
  border-radius: 6px;
  font-weight: bold;
}
.genre-body-inner p.more a::before {
  content: "› ";
}
.genre-body-inner p.more a:hover {
  opacity: 0.8;
}

/* [要確認]
   ・バナー画像は 708×202 のwidth/height属性を付与しています。実ファイルと相違があれば修正してください。
   ・開閉アニメーションは grid-template-rows: 0fr ⇔ 1fr のCSSのみの手法です（JS不要）。
     details要素の標準UAスタイル（display:none）を.genre-bodyのdisplay:grid指定で上書きすることで
     実現しています。Safariは15.4以降、主要ブラウザは概ね対応していますが、対応外の古いブラウザでは
     アニメーションせずカクッと開閉します（表示自体は問題ありません）。
   ・展開順は「紹介テキスト→写真→対象/メーカー→リンクボタン」にしています。
   ・枠線色はHTML側の style="border-color:#xxxxxx" で、Excel指定のジャンル色を仮設定しています。
     正式なテキスト・色が来たら差し替えてください。
*/

/* ボタン
----------------------------------------------- */
#content .app-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 1em;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  /* 黄色い枠線と背景を追加 */
  background-color: #fff8d9;
  border: 5px solid #f5d66e;
  box-sizing: border-box;
}

#content .app-btn li {
  list-style: none;
  margin: 0 1%;
  /* padding-bottom: 10px; */
  width: 23%;
}

#content .app-btn li img {
  list-style: none;
  /* margin: 0 1%;
  padding-bottom: 10px; */
  width: 100%;
}

#content .hobby {
  padding-top: 0;
}
/* ポイントブロック
----------------------------------------------- */
/* PC：文章左・画像右 */
.retro-point {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 30px;
}

.retro-point > p {
  margin: 0;
  min-width: 0;
}

.retro-point-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* スマホ：1カラム */
@media screen and (max-width: 689px) {
  .retro-point {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
}

.retro-point-image {
  display: flex;
  gap: 10px;
}

.retro-point-image img {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  object-fit: contain;
}

/* mobile （w690px 未満）
----------------------------------------------- */
@media (max-width:689px){

  /* スマホで非表示 */
    #content .pc-on {
      display: none;
    }
  /* ボタン */
    #content .app-btn li {
    width: 48%;
    }

  /* アイテムブロック（取扱いメーカー） */
  .categorise ul li {
      flex-direction: column;
      text-align: center;
      flex: 0 1 calc(50% - 8px);
  }
  .categorise ul li img {
      float: none;
      margin-bottom: 0.5em;
      margin-right: 0;
      width: 180px !important;
  }
  #content .taishou .image {
    max-width: unset;
  }
  #content h2.heading {
    padding-left: 0.5em;
  }
    /* お客様の声 */
    #content [id*="-review"] h2.heading {
      font-size: 24px;
      padding: 0.5em 1em 0.5em 1em;
      margin: 0 auto;
      width: 60%;
      color: #1e527e;
      text-align: center;
      background-color: rgba(255,255,255,0.6);
      border: none;
      background-image: none;
      text-shadow: none;
      font-weight: bold;
      text-shadow: 2px 2px 2px 	#C0D1DF,
                  4px 4px 5px  #c9c9c9;
      margin-bottom: 1rem;
    }
    #content [id*="-review"] {
      border: 9px solid #1e527e;
      padding: 1em 0.5em 1em;
      margin-top: 5em;
      border-radius: 5px;
      background:repeating-linear-gradient(
      -45deg,
    #DAE4EC,
    #DAE4EC 5px,
    #F9FBFC 5px,
    #F9FBFC 10px);
    }
    #content [id*="-review"] .total_rating {
      border: none;
      background:rgba(255,255,255,0.6);
    }
    .box[id*="review"] h2:after {
      content: unset;
  }

} /* max689 */




/* PC （w690px 以上）
----------------------------------------------- */
@media only screen and (min-width: 690px){

  /* PCで非表示 */
    #content .sp-on {
      display: none;
    }

  /* 見出し */
    #content .retro h1 span {
        font-size: 2em;
        font-weight: bold;
    }

  /* 買取れるアイテム */
  #content .taishou .kannrenn {
    font-size: 1.5em;
  }
  #content .taishou ul.item li,
  #content .taishou ul.item li:last-child {
    padding-right: 10px;
    padding-left: 10px;
    width: calc( 100% / 3 );
  }
  #content .taishou ul.item li:nth-child(3n+1) {
    background-position:
      center bottom,
      left center;
  }
  #content .taishou ul.item li:nth-child(3n+2) {
    background-position:
      center bottom,
      calc( 100% / 3 ) center;
  }
  #content .taishou ul.item li:nth-child(3n+3) {
    background-position:
      center bottom,
      right center;
  }

  /* 専門スタッフからのご案内 */


    /* h2見出し装飾 よくある質問（旧omakase用アイコンを流用）*/
  /* #content #retro-qa h2.heading::after {
    position: absolute;
    content: "";
    background-image: url(/img/retro/retro_70x55_001.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    top: 50%;
    left: -2%;
    border-top: none;
    width: 128px;
    height: calc(10vw);
    max-height: 50px;
    transform: translateY(-50%);
    } */

  /* h2見出し装飾 こんなアイテムを買取しています*/
  /* #content #retro-kaitori h2.heading::after,
  #content .toiawase h2.heading::after {
    position: absolute;
    content: "";
    background-image: url(/img/retro/retro_70x55_002.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    top: 50%;
    left: -2%;
    border-top: none;
    width: 128px;
    height: calc(10vw);
    max-height: 50px;
    transform: translateY(-50%);
    } */

  /* h2見出し装飾 メーカーはこちら */
  /* #content #retro-capsule-many h2.heading::after,
  #content #retro-about h2.heading::after {
    position: absolute;
    content: "";
    background-image: url(/img/retro/retro_70x55_003.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    top: 50%;
    left: -2%;
    border-top: none;
    width: 128px;
    height: calc(10vw);
    max-height: 50px;
    transform: translateY(-50%);
  } */

  /* h2見出し装飾 買取強化中アイテム */
  /* #content #retro-taishou h2.heading::after,
  #content #item-categories h2.heading::after {
    position: absolute;
    content: "";
    background-image: url(/img/retro/retro_70x55_004.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    top: 50%;
    left: -2%;
    border-top: none;
    width: 128px;
    height: calc(10vw);
    max-height: 50px;
    transform: translateY(-50%);
  } */

  /* h2見出し装飾 買取のポイント */
  /* #content #retro-point h2.heading::after {
    position: absolute;
    content: "";
    background-image: url(/img/retro/retro_70x55_005.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    top: 50%;
    left: -2%;
    border-top: none;
    width: 128px;
    height: calc(10vw);
    max-height: 50px;
    transform: translateY(-50%);
  } */

  /* h2見出し装飾  買取実績*/
  /* #content #retro-result h2.heading::after {
    position: absolute;
    content: "";
    background-image: url(/img/retro/retro_70x55_006.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    top: 50%;
    left: -2%;
    border-top: none;
    width: 128px;
    height: calc(10vw);
    max-height: 50px;
    transform: translateY(-50%);
  } */
  /*買取実績 リンクボタン*/
  /* #content .box[id*="result"] .more a{
    width: 50%;
  } */

  /* h2見出し装飾  お客様の声*/
  /* #content .box[id*="review"] h2:after {
      width: 10%;
      left: 10px;
  } */

  /* h2見出し装飾  全国から手数料無料で買取受付中！*/
  /* #content #retro-area h2.heading::after {
    position: absolute;
    content: "";
    background-image: url(/img/retro/retro_70x55_007.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    top: 50%;
    left: -2%;
    border-top: none;
    width: 128px;
    height: calc(10vw);
    max-height: 50px;
    transform: translateY(-50%);
  } */
  /* h2見出し装飾  ３つの買取方法のご案内*/
  /* #content #method-flow-image h2.heading::after {
    position: absolute;
    content: "";
    background-image: url(/img/retro/retro_70x55_008.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    top: 50%;
    left: -2%;
    border-top: none;
    width: 128px;
    height: calc(10vw);
    max-height: 50px;
    transform: translateY(-50%);
  } */
  /* h2見出し装飾  買取価格表＆アイテム一覧*/
  /* #content .clearfix h2.heading::after {
    position: absolute;
    top: 50%;
    left: -2%;
    width: 128px;
    height: calc(10vw);
    max-height: 34px;
    content: "";
    background-image: url(/img/retro/retro_bar_10.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%);
  }
    #content .box[id*="review"] h2 {
      padding-left: 3.8em;
    } */

}/* Eo min690 */



/* layout用（w1000px 以上）
----------------------------------------------- */
@media only screen and (min-width: 1000px){

  /* 買取れるアイテム */
    #content .taishou ul.item li a span,
    #content .taishou ul.item li .txt {
      max-width: 180px;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
    }

}/* Eo min1000 */


/* block.css 対策：max-width:999px で #content .box img { width:96%; } が
   グローバルCSSにより指定されており、アコーディオンのバナー・写真にも
   width:96%が効いてしまい隙間ができるため、100%に上書き
----------------------------------------------- */
@media only screen and (max-width: 999px) {
  #content .box .retro-accordion img,
  #content .box .retro-items img {
    max-width: 100% !important;
    height: auto;
  }
}


/* 買取のポイント（.retro-point-list）：番号付き見出し＋オレンジ罫線＋
   「【なぜそうすべきなのか？】」小見出しで前半/後半を分割
----------------------------------------------- */
.retro-point-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.retro-point-list > li {
  margin-bottom: 1.5em;
}
.retro-point-list h3 {
  margin: 0 0 0.6em;
  padding-bottom: 0.5em;
  font-size: 1.1em;
  border-bottom: 3px solid #d9622b;
  color: #333;
}
.retro-point-list p.small {
  margin: 0 0 0.8em;
  line-height: 1.8;
  color: #333;
}
.retro-point-list p.point-why {
  margin: 0.8em 0 0.5em;
  font-weight: bold;
  color: #333;
}


/* トップ紹介文（.retro-lead）：PCはテキスト＋写真の2カラム、スマホは縦積み
----------------------------------------------- */
/* h1はもう.retro-leadの外（.retro直下）にあるため、
   .box span { font-weight:normal; } に負けないよう!importantで太字を確保 */
#content .retro h1 span {
  font-weight: bold;
}
.retro-lead {
  display: flex;
  align-items: center;
  gap: 32px;
}
.retro-lead .image-text {
  flex: 1;
}
.retro-lead .decorative-image {
  flex: 0 0 auto;
  text-align: center;
}
.retro-lead .decorative-image img {
  display: block;
  width: auto;
  max-width: 100%;
}
/* block.css の #content .box img { width:96%; } (max-width:999px) が
   .retro-lead .decorative-image の画像にも効いてしまい、ガチャページの
   .capsule-lead .decorative-image と挙動が揃わないため、明示的に上書き */
#content .box .retro-lead .decorative-image img {
  width: auto !important;
  max-width: 100% !important;
  display: block;
  margin: 0 auto;
}
/* ガチャガチャページ（capsule-toys.css）と同じ、スマホでの写真サイズ指定 */
@media (max-width: 768px) {
  .retro-lead .decorative-image img {
    width: min(40vw, 200px) !important;
  }
}

@media (max-width: 689px) {
  .retro-lead {
    flex-direction: column;
    gap: 1rem;
  }
}