@charset "utf-8";

/* 共通 */

html {
  height: 100%;
  scroll-behavior: smooth;
  /*ページ戻るsスーッとなる */
}

body {
  margin: 0;
  height: 100%;
  background-color: red;
  display: flex;
  flex-direction: column;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

h1 {
  margin: 0;
  font-size: 0;
}

h2 {
  margin: 16px;
  font-size: 26px;
  text-align: center;
  color: rgb(255, 0, 0);
  border-bottom: 1px solid red;
  font-weight: normal;
}

h3 {
  margin: 12px;
  font-size: 20px;
  font-weight: normal;
}

h4 {
  margin: 0;
  font-size: 18px;
  font-weight: normal;
}

h5 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}

p {
  margin: 0;
  font-size: 16px;
}

.imgtop {
  margin-bottom: 16px;
}

/* 送信ボタン */

button {
  all: unset;
  width: 160px;
  height: 32px;
  border-radius: 12px;
  text-align: center;
  line-height: 32px;
  color: white;
  background: #5876a3;
  cursor: pointer;
  padding: 4px 8px;
}


img {
  vertical-align: bottom;
}

.imgsiyaryo img {
  width: 400px;
  height: 145px;
}

/* スマホサイズサイン会ページ地図 HTMLに直接サイズを記載している */
.info-map {
  /* width: 100%; */
  text-align: center;
  margin-top: 16px;
}

/* header */

header {
  background: rgb(253, 2, 2);
  padding: 12px;
  display: flex;
}

.pc-gmenua {
  display: none;
}

.sp-menu {
  margin-left: auto;
}

.pc-menu {
  display: none;
}

.sp-menu #open {
  /*三本線のスタイル */
  font-size: 32px;
  line-height: 32px;
  cursor: pointer;
}

.sp-menu #open.hide {
  display: none;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
  font-weight: bold;
  z-index: 9999;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay #close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: 32px;
  cursor: pointer;
}

.overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.overlay li {
  font-size: 24px;
  margin-top: 32px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s;
}

.overlay.show li {
  opacity: 1;
  transform: none;
}

.overlay.show li:nth-child(1) {
  transition-delay: .1s;
}

.overlay.show li:nth-child(2) {
  transition-delay: .2s;
}

.overlay.show li:nth-child(3) {
  transition-delay: .3s;
}

.overlay.show li:nth-child(4) {
  transition-delay: .4s;
}

.overlay.show li:nth-child(5) {
  transition-delay: .5s;
}

.overlay.show li:nth-child(6) {
  transition-delay: .6s;
}

.overlay.show li:nth-child(7) {
  transition-delay: .7s;
}

/*三本線のスタイル終り */


/* hero */

.hero {
  background: rgb(255, 255, 255);
  padding: 0 24px 4px;
}

/* top1.php専用：ナビゲーション(ヘッダー)〜スライダー〜ドットナビの上下余白を均一にする */
body.top1-page .hero {
  padding: 18px 24px;
}


.heropri {
  background: rgb(255, 255, 255);
  padding: 4px 8px 4px;
  margin: 0 auto;
  width: 420px;
}

.heroroii {
  display: none;
}

/* sloder */
.slider-a img {
  margin: 0 auto;
  padding-bottom: 32px;
}

/* top1.php専用：スライダー画像の縦横比をPC・タブレット・スマホで統一(12:5)。
   幅は可変(%)、高さはaspect-ratioで固定し、object-fit:coverで綺麗にトリミング表示する */
.slider-a.slider-top img {
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  display: block;
  padding-bottom: 0;
}

/* top1.php専用：bxSliderがJSでdiv.bx-viewportに固定してしまう高さ(インラインstyle)を解除し、
   中身(img)のaspect-ratio:12/5から自然に決まる高さに従わせる */
body.top1-page .bx-viewport {
  height: auto !important;
}

/* top1.php専用：bxSlider付属CSSの.bx-wrapperの下余白(デフォルト60px)を45pxに詰める */
body.top1-page .bx-wrapper {
  margin-bottom: 45px;
}

/* 大枠 メインとサブを囲うDIV */
.container {
  flex: 1;
  margin: 24px auto;
  /* background: #00bfff; */
}


main {
  width: calc(100% - 48px);
  margin: 0 auto;
  background: white;
  padding: 8px;
  box-sizing: border-box;
}


/* sectionの領域 */

.contensu-1 {
  gap: 16px;
  align-items: center;
  padding: 2px 10px;
  text-align: center;
  margin-bottom: 24px;
}

/* 汎用クラス：ページ内の主要セクション(一覧カード＋詳細エリアなど)の横幅・左右余白・下マージンを
   サイト共通で揃えるためのクラス。tenga.phpの「とは／新作情報／カテゴリ／よくある質問」で使っていた
   幅ルールを切り出したもの。ページ専用クラス(.contensu-1 / .sain-list-detail / .kyan-list-detail など)は
   そのまま残し、このクラスを併用(class="○○ content-section")することで幅・余白だけを統一する。
   text-align/gapなど見た目に関わる指定は各ページ専用クラス側に残し、ここでは持たせない。
   セレクタを"section.content-section"にして、後方の.contensu-1(PC幅で650px固定)などページ専用クラスの
   定義順に関わらず確実に上書きできるよう、詳細度を意図的に高くしている */
section.content-section {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 24px;
  padding: 2px 10px;
}

/* お知らせセクション */
.news {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: 8px 10px;
  text-align: left;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-sizing: border-box;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 日付を上、本文を下に配置する2段組みにし、本文が長くて折り返しても崩れないようにする */
.news-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  line-height: 1.6;
}

.news-item:last-child {
  border-bottom: none;
}

.news-date {
  color: #04b3f3;
  font-weight: 700;
  font-size: 12px;
}

.news-text {
  color: #333;
  text-decoration: none;
}

.news-text:hover {
  color: #04b3f3;
  text-decoration: underline;
}

/* 高価買取バナー（スマホ/PC共通で常に表示） */
.kaitori-banner-main {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: 10px;
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-sizing: border-box;
}

.kaitori-banner-main a {
  display: block;
  text-decoration: none;
}

.kaitori-banner-main img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  display: block;
}

.kaitori-banner-caption {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #fd0202;
}

/* サイン会・イベント情報カード（スマホ:縦並び／タブレット・PC:横並び） */
/* サイン会エリア全体を、白背景＋枠線で囲まれた独立したまとまりにする（container-topの外側にあり、既存7ブロックのエリアには影響しない） */
.event-cards {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  background: #ffecec;
  border: 2px solid #f5a9a9;
  border-radius: 12px;
  padding: 16px 10px 20px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.event-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 6px;
}

.event-card {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  text-align: left;
}

/* 写真：横幅は42%のまま、高さは情報エリア(見出し・日時・箇条書き・ボタン)とバランスが取れるよう
   カードの高さいっぱいまでstretchさせ、object-fit:coverで綺麗にトリミングする */
.event-card-img {
  align-self: stretch;
  width: 42%;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* top1.php専用：共通の.event-card-imgはheight:auto + align-self:stretchのため、
   ibent_sain.phpの.sain-card-imgと同じ構造で、本文(note)の行数でカードの高さが変わると
   画像も追従して伸びてしまう。現状は中山ふみか・七沢みあのnote文言がどの幅でもほぼ同じ行数で
   折り返すため症状は表面化していないが、将来文言が変わった際の再発を防ぐため、top1.phpに限り
   画像サイズをnoteの行数に関わらず固定する(375px幅・1行表示時の比率で固定)。
   tenga.phpの.tenga-about-card .event-card-imgは独自にwidth/height/align-selfを
   上書き済みのため、本ルールの影響は受けない */
body.top1-page .event-card-img {
  align-self: flex-start;
  height: auto;
  aspect-ratio: 113 / 130;
}

.event-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* イベント名：赤地・白文字の見出し帯（人物名6文字程度を想定した余白・サイズ／スマホ幅は写真拡大分だけ少しコンパクトに） */
.event-card-title {
  display: inline-block;
  max-width: 100%;
  background: #fd0202;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
  padding: 3px 5px;
  border-radius: 4px;
  margin: 0 8px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.event-card-date {
  font-size: 12px;
  color: #666;
  margin: 0 12px 4px;
}

.event-card-note {
  font-size: 11px;
  color: #333;
  margin: 0 0 8px;
}

.event-card .btn {
  width: 140px;
  margin: 12px auto 0;
  text-align: center;
}

/* top1.php専用：既存7ブロックをアイコン+キャッチコピーのグリッドに（スマホ:2列） */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 auto 24px;
  padding: 0 6px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 8px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}

.feature-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.feature-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: #fd0202;
}

.feature-icon svg {
  width: 100%;
  height: 100%;
}

.feature-label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

/* 現在地ラベル：ファーストビュー(スライダー＋右カードのエリア)最上部に置く、横幅いっぱいの帯。
   top1.php/ibent_sain.php/kyanpen.php/sendai.php/rifu.php/tenga.phpの6ページで共通利用する。
   bodyの背景が赤(background-color:red)のため、bodyの直接の子として置けば、
   特別な指定をしなくても左右に余白なく画面幅いっぱいに表示される */
.hero-location-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  /* 中央(#b40000、最も濃い)を起点に、左右両端(#fd0202、明るめの赤)に向かって薄くなるよう
     3色ストップの線形グラデーションで左右対称にしている */
  background: linear-gradient(90deg, #fd0202 0%, #b40000 50%, #fd0202 100%);
  text-align: center;
}

.hero-location-banner-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: #fff;
}

.hero-location-banner-icon svg {
  width: 100%;
  height: 100%;
}

.hero-location-banner-text {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #fff;
}

@media screen and (min-width: 767px) {
  .hero-location-banner {
    padding: 18px 16px;
    gap: 12px;
  }

  .hero-location-banner-icon {
    width: 30px;
    height: 30px;
  }

  .hero-location-banner-text {
    font-size: 22px;
  }
}

/* PC幅(960px以上)限定でファーストビュー確保のため帯の上下余白だけ詰める。
   ページ専用スコープ(body.○○-page)は使わず、6ページ共通の1ルールとして適用することで、
   帯の見た目(パディング量)が常に全ページで完全に一致するようにしている。
   タブレット幅(767〜959px)・スマホ幅は対象外で、上のmin-width:767pxのルールのまま変更しない */
@media screen and (min-width: 960px) {
  .hero-location-banner {
    padding: 8px 16px;
  }
}

/* top1.php専用：次回キャンペーン未定の間の「準備中」プレースホルダー（非活性カード） */
.feature-card-disabled {
  cursor: default;
  opacity: .55;
}

.feature-card-disabled:hover {
  box-shadow: none;
  transform: none;
}

.feature-card-disabled .feature-icon {
  color: #999;
}

.feature-soon-badge {
  display: inline-block;
  padding: 1px 8px;
  background: #999;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
}


section p {
  margin: 16px 16px 32px;
  text-align: left;
  line-height: 1.6;
}

/* section dlの領域 */

section dl {
  background: #f5f5f5;
  padding: 4px 8px;

}

section dt {
  font-size: 20px;
  margin-top: 4px;
  /* background: #04b3f3; */
}

section dd {
  margin: 8px 0;
  margin-inline-start: 16px;
  text-align: left;
  line-height: 1.7;
}

/* section内注意事項 */
section li {
  /* background: #8a4a4a; */
  margin: 8px 0;
}

/* イベントページのリスト */
.ibul ul {
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.7;
  list-style-type: none;
}

.ibul li {
  position: relative;
  padding-left: 1.4em;
}

.ibul li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

.ibul02 ul {
  text-align: left;
  padding: 8px 8px;
  line-height: 1;
  list-style-type: none;
  list-style-position: outside;
  font-size: 16px;
  font-weight: 600;
}

.ibul2 ul {
  text-align: left;
  padding: 8px 8px;
  line-height: 1.8;
  list-style-type: none;
  list-style-position: outside;
  font-size: 16px;
  font-weight: 600;
}

.ibentopp {
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
}

/* ランキングリスト */
.ranking {
  font-weight: 700;
  text-align: left;
  margin-left: 32px;
  margin-bottom: 32px;
}

/* メインリンクボタン */

.btn {
  all: unset;
  width: 250px;
  border-radius: 12px;
  line-height: 32px;
  color: white;
  background: #04b3f3;
  cursor: pointer;
  /*カーソルマークをだす*/
  padding: 4px 0;
  /*ボタンの中の余伯*/
  display: block;
  margin: 0 auto 48px;
}

.btn:hover {
  background: #77ceee;
}

/* プライバシーポリシー */
.privacy {
  padding: 16px 8px;
}

.tokutei {
  padding: 8px 0 24px;
}

.tokutei-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px auto 24px;
  text-align: left;
  line-height: 1.7;
  border-top: 1px solid #ddd;
}

.tokutei-table th,
.tokutei-table td {
  display: block;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  /* vertical-align: top; */
}

.tokutei-table th {
  background: #f7f7f7;
  color: #333;
  font-weight: 700;
  padding: 10px 12px 6px;
}

.tokutei-table td {
  padding: 8px 12px 16px;
  word-break: break-word;
}


/* サブエリア */

/*スマホサイズのTwitter幅 */

.said {
  padding: 0 24px;
  margin: 0;
  display: flex;
}

.xx {
  background: #00bfff;
  flex: 1;
  max-width: 50%;
  /* border: 1px solid #333; */
  padding: 10px;
}

/* top1.php専用：SNSフォローエリア（X・Instagram）。広告バナーエリアと視覚的に分離するため、白背景＋影の独立カードにする */
.sns-follow {
  width: 100%;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 20px 16px;
  box-sizing: border-box;
  text-align: center;
}

.sns-follow-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fd0202;
  text-transform: uppercase;
}

.sns-follow-sub {
  margin: 4px 0 16px;
  font-size: 12px;
  color: #888;
}

.sns-follow-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.sns-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 230px;
  padding: 10px 12px;
  background: #000;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sns-follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

.sns-follow-btn-x:hover {
  background: #1a1a1a;
}

.sns-follow-btn-insta {
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

.sns-follow-btn-insta:hover {
  background: linear-gradient(135deg, #ffa146, #ec4a94, #9a4bc9, #6c74e6);
}

.sns-follow-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sns-follow-icon svg {
  width: 100%;
  height: 100%;
}

/* top1.php専用：サブエリアを折り返し可能にし、SNSフォローエリアと広告バナーエリアのカードを上下に分ける */
.said.said-top {
  flex-wrap: wrap;
  gap: 20px;
}

/* 960px未満（モバイル/タブレット）のみ縦積みにする。PC幅の固定サイズ指定と競合しないようここで範囲を区切る */
@media screen and (max-width: 959px) {

  .said-top .ad-banner-section {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
  }

}

/* top1.php専用：スマホ幅(767px以下)の各セクション間の余白を20pxに統一 */
@media screen and (max-width: 767px) {

  .hero-news-row {
    margin-bottom: 0;
  }

  .news {
    margin-top: 20px;
    margin-bottom: 0;
  }

  /* top1.php・ibent_sain.php共通：スマホ幅でお知らせの高さを中身(2〜3件)がちょうど収まる分だけに抑え、
     件数が増えた場合はここで内部スクロールする */
  .news-list {
    max-height: 160px;
    overflow-y: auto;
  }

  .kaitori-banner-main {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .event-cards {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .container.container-top {
    margin-top: 20px;
    margin-bottom: 0;
  }

  /* tenga.php/kyanpen.phpはcontainer-top/main-topをPC幅の余白統一のためだけに使っており、
     .said(SNSフォロー＋広告バナー)のサブエリアを持たないため、上のスマホ幅ルール(20px/0、
     said-topとの組み合わせ前提)は適さない。container-top付与前の元の余白(24px auto、
     .containerの基本ルールと同じ)に戻し、スマホ幅の見た目を変えないようにする */
  body.tenga-page .container.container-top,
  body.kyanpen-page .container.container-top,
  body.contact-page .container.container-top {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  /* contact.phpのみ：中身がシンプルなフォームのみのため、margin:auto(横方向)の
     shrink-to-fitサイズ計算で.containerの幅が内容の自然幅(左右中央寄せ)まで
     縮んでしまい、左右の余白バランスが崩れていた。widthを明示し、
     他ページ同様に画面幅いっぱいに広がるようにする */
  body.contact-page .container.container-top {
    width: 100%;
  }

  .said.said-top {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* top1.php専用：サイン会カードの箇条書き(.event-card-note)の先頭を、.event-card-dateの先頭(左端)に揃える */
  .event-card-note {
    margin-left: 12px;
  }

}

/* top1.php専用：広告バナーエリアをSNSフォローエリアとは別の背景色のカードとして独立させる */
.ad-banner-section {
  background: #f7f2f2;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 16px;
  box-sizing: border-box;
}

.ad-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 auto;
  box-sizing: border-box;
}

.ad-banner-slot {
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

/* 内容未確定の枠：feature-card-disabledと同じ「準備中」バッジを中央に表示 */
.ad-banner-slot-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
}

.ad-banner-slot a {
  display: block;
  width: 100%;
  height: 100%;
}

.ad-banner-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* gedan_dvd.webp/siyouzumu_bana.webpは、文字やボタンが画像の端まで余白なく配置されているため、
   他のバナー画像と同じobject-fit:coverで正方形/4:3にトリミングすると文字が見切れてしまう。
   個別にobject-fit:containへ切り替え、画像自体の背景色で余白を埋めることで全体を見せる */
.ad-banner-slot img.ad-banner-img-contain-yellow {
  object-fit: contain;
  background-color: #f9e000;
}

.ad-banner-slot img.ad-banner-img-contain-black {
  object-fit: contain;
  background-color: #000;
}

/* 広告バナー：スマホ幅(767px未満)限定で、正方形専用に作られたsumaho_1〜4.webpに差し替える。
   タブレット幅・PC幅(min-width:767px、既存の4列切り替えと同じ境界)は既存の画像のまま。
   同じ<a>内にPC/タブレット用・スマホ用の2枚を並べておき、表示・非表示をCSSで切り替える方式
   (ヘッダーロゴ.sm-menu/.pc-menuやroyalhoney.phpのヒーロー画像と同じ考え方) */
.ad-banner-slot img.ad-banner-img-mobile {
  display: block;
}

.ad-banner-slot img.ad-banner-img-desktop {
  display: none;
}

@media screen and (min-width: 767px) {
  .ad-banner-slot img.ad-banner-img-mobile {
    display: none;
  }

  .ad-banner-slot img.ad-banner-img-desktop {
    display: block;
  }
}

.ad-banner-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  border: 1px dashed #ddd;
}

.ad-banner-empty-text {
  font-size: 12px;
  color: #999;
}

.xxx {
  display: none;
}

.insuta {
  background: rgb(252, 187, 187);
  flex: 1;
  align-items: center;
}

.kaitoribana {
  display: none;
}


/* ページ上部へ戻るボタン：全ページ共通で_footer.phpに1箇所だけ設置(HTML直書きの重複はすべて削除済み)。
   JSは表示/非表示の切り替え(.is-visible)だけに使い、クリック時のスクロール自体はhref="#"と
   html{scroll-behavior:smooth}(本ファイル7行目、共通ルール)に任せているため、JS無効環境でも
   最上部に戻れる。非表示の間はopacity:0に加えvisibility:hiddenでタブ移動からも除外する。
   z-index:500は、既存の固定要素(.overlay/lightbox:9999、.floating-banner:10000、
   #age-verification:99999〈style.css〉)より十分下、通常コンテンツ(z-index指定なし)より上になるよう設定 */
#page_top {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 50%;
  background: #ff1212;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 500;
  transition: opacity 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease, visibility 0s linear 0.3s;
}

#page_top.is-visible {
  opacity: 0.85;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease, visibility 0s linear 0s;
}

#page_top.is-visible:hover,
#page_top.is-visible:active {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#page_top:focus-visible {
  outline: 3px solid #1a8fd1;
  outline-offset: 2px;
}

#page_top::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 24px;
  color: #fff;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  line-height: 24px;
}

/* OSの「動きを減らす」設定時：フェードを無効化(即座に表示/非表示)。
   html{scroll-behavior:smooth}自体の無効化は、html要素への上書きとしてこの下で行う */
@media (prefers-reduced-motion: reduce) {
  #page_top {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}


/* Footer領域 */
footer {
  padding: 32px 0;
  background: white;
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
}

.footMenu ul {
  margin-bottom: 16px;
  padding: 0;
}

.footMenu li {
  list-style: none;
  display: inline-block;
  width: 10%;
  min-width: 120px;
  font-size: 10px;
}

.footMenu li:not(:last-child) {
  border-right: 2px solid #ddd;
}

.footMenu a {
  text-decoration: none;
  color: #333;
}


.footMenu a:hover {
  color: #8a4a4a;
  border-bottom: 2px solid #c7c3b7;
}


small {
  font-size: 12px;
}

.footer {
  margin-top: 16px;
}

/* 全ページ共通フッターの「高買屋」導線：控えめな文字リンク1行。
   .footMenuの下、コピーライトの上に配置する */
.kaitori-footer-link {
  margin: 0 0 16px;
  font-size: 12px;
}

.kaitori-footer-link a {
  color: #b40000;
  text-decoration: underline;
}

.kaitori-footer-link a:hover {
  color: #fd0202;
}

/* フッターの運営会社リンク：控えめな表示。.kaitori-footer-linkと同じ位置づけで、
   コピーライト表記のすぐ上に配置する */
.footer-company {
  margin: 0 0 12px;
  font-size: 11px;
  color: #777;
}

.footer-company a {
  color: #555;
  text-decoration: underline;
}

.footer-company a:hover {
  color: #333;
}


/*16周年ポップアップ */
.floating-banner {
  width: 100%;
  background: rgba(255, 247, 0, 0.9);
  margin: 0 auto;
  padding: 0;
  padding-top: 4px;
  position: fixed;
  bottom: 0;
  z-index: 10000;
}

.banner {
  width: 100%;
  /*バナーの横幅*/
  padding: 8px 8px;
  color: #fd0202;
  /* バナー内の文字色 */
  font-weight: bold;
  text-align: center;
}

.floating-banner a {
  text-decoration: none;
  /* リンクに下線が入らないように */
}

.copy {
  font-size: 18px;
  margin: 0 auto 4px;
  line-height: 1.6;

}

.cta {
  display: inline-block;
  width: 350px;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  background: rgb(0, 195, 255);
  /* ボタンの背景 */
  border-radius: 25px;
  margin: 0 auto 4px;
}

.floating-bannerpc {
  display: none;
}

/* ※サイン会ページマークの調整 */
.note {
  padding-left: 1em;
  text-indent: -1em;
}

/* 767px以上に適用されるCSS（タブレット用） */
@media screen and (min-width: 767px) {

  /* スライダーサイズ  */
  .slider-a img {
    width: 700px;
    height: 287px;
  }

  .slider-te img {
    width: 700px;
    height: 525px;
  }

  /* スマホメニュー */
  .sp-menu {
    display: block;
  }

  .container {
    width: 600px;
    margin: 32px;
  }

  .contensu-1 {
    display: flex;
  }

  /* top1.php専用：既存7ブロックのアイコングリッドをタブレット幅で3列に */
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .event-card-list {
    flex-direction: row;
  }

  /* タブレット幅以上は写真とのバランスに余裕があるため、日時・箇条書きは少し大きめに戻す。
     見出しは長い名前でも1行に収まるサイズを優先する */
  .event-card-title {
    font-size: 11px;
    padding: 4px 7px;
  }

  .event-card-date {
    font-size: 13px;
  }

  .event-card-note {
    font-size: 12px;
  }

  main {
    background: white;
    width: calc(100% - 32px);
    flex: 1;
  }

  .news {
    width: calc(100% - 32px);
  }

  .kaitori-banner-main {
    width: calc(100% - 32px);
  }

  .event-cards {
    width: calc(100% - 32px);
  }

  th {

    padding: 8px;
  }

  td {
    padding: 8px;
  }


  /* ヘッダーロゴ画像 */
  .sm-menu {
    display: inline;
  }

  .pc-menu {
    display: none;
    padding-top: 2px;
  }

  /* ヒーロートップページ画像 */
  .sm-top {
    display: inline;
  }

  .pc-top {
    display: none;
  }

}

/* 買取強化リスト */
.bonus-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.bonus-table th,
.bonus-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.bonus-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.bonus-table td {
  font-weight: 500;
}


/* 960px以上に適用されるCSS（PC用） */

@media screen and (min-width: 960px) {


  /* スライダーサイズ */
  .slider-a img {
    width: 1000px;
    height: 410px;
  }

  /* top1.php専用：縦横比(12:5)は維持したまま、PC幅では表示幅を80%にしてコンパクトに（サイン会エリア拡大の余地を作る） */
  .slider-a.slider-top img {
    width: 80%;
    margin: 0 auto;
  }

  .heropri {
    width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .privacy h3 {
    text-align: left;
  }

  .tokutei-table {
    max-width: 920px;
  }

  .tokutei-table th,
  .tokutei-table td {
    display: table-cell;
    padding: 16px 18px;
  }

  .tokutei-table th {
    width: 28%;
  }

  /* PC幅ではヘッダーの上下余白を詰めてコンパクトにする（旧top1.php専用調整を全ページ共通化） */
  header {
    background: rgb(255, 255, 255);
    display: flex;
    margin: 0;
    padding: 6px 12px;
  }

  .headersot {
    margin: 0 auto;
    width: 1000px;
  }

  /* ヘッダーロゴ画像：PC幅(960px以上)限定で、元のサイズ(300x57)と縮小しすぎたサイズ(200px)の
     中間程度(250px)に調整。widthのみ指定しheight:autoで縦横比を保つ。
     タブレット幅・スマホ幅で使う.sm-menuは、ここでは変更せず元のサイズ(200x38)のまま */
  .sm-menu {
    display: none;
  }

  .pc-menu {
    display: inline;
    width: 250px;
    height: auto;
  }

  /* ヘッダーロゴ画像 */

  /* スマホメニュー非表示 */
  .sp-menu {
    display: none;
  }

  /* PCグローバルメニュー */
  .pc-gmenua {
    display: inline;
    padding: 0;
    margin: 0;
  }

  /* PC幅ではナビの上下余白を詰めてコンパクトにする（旧top1.php専用調整を全ページ共通化） */
  .pc-gmenua ul {
    display: flex;
    padding: 2px 4px;
    margin: 0 auto;
    max-width: 1000px;
    list-style: none;

  }

  .pc-gmenua ul li {
    background-color: #f30303;
    flex: 1 0 auto;
    /* PCグローバルメニューの各幅 */
    border-left: 1px solid #eee9e9;
    border-right: 1px solid #eee9e9;
  }

  /* ナビ項目の文字を縦中央揃えにする。以前はこのルールより詳細度の高い.pc-gmenua ul li aが
     display:blockを指定しており、下の.pc-gmenua a(display:flex)が実際には効いていなかった。
     さらに.pc-gmenua ul li:nth-child(3)へのpadding-top調整（TENGA SHOP SENDAI用のつもりだったが、
     ナビの並び順が変わり実際は3番目の「仙台店」に効いてしまっていた場当たり的な調整）も、
     根本原因である「文字が2行に折り返すと縦位置がずれる」問題を、liの高さいっぱいに
     flexboxで中央揃えする形にして解消したため、不要になり削除した */
  .pc-gmenua ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    padding: 4px 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }

  .pc-gmenua ul li a:hover {
    background-color: rgb(222, 222, 223);
    color: rgb(248, 40, 51);
  }

  /* PCグローバルメニュー終り*/

  /* ヒーロートップページ画像 */
  .sm-top {
    display: none;
  }

  .pc-top {
    display: inline;
  }


  /* heroエリア */
  .bak {
    background: #ffffff;
    /* padding: 16px 0; */
  }

  /* top1.php専用：ファーストビュー確保のため上下の余白のみ詰める。
     現在地ラベルの帯が増えた分、さらに詰めている */
  body.top1-page .bak {
    padding: 2px 0;
  }

  /* heroエリアTENGA 仙台店 利府店 */
  .bak2 {
    background: #ffffff;
    padding: 16px 0;
  }

  /* heroエリアTENGA 仙台店 利府店のスライダーの大きさ */
  .bak2 img {
    width: 700px;
    height: 525px
  }

  /* ロイヤルハニーイメージの大きさ */
  .bak3 img {
    width: 700px;
    height: 525px
  }

  .royilmiryo {
    width: 700px;
    height: 525px;
  }

  .royilmiryo1 {
    width: 700px;
    height: 860px;
  }

  .royilmiryo2 {
    width: 700px;
    height: 471px;
  }

  .hero {
    margin: auto;
    padding: 16px 0;
  }

  /* top1.php専用：ナビ〜スライダー〜ドットナビの上下余白を均一にする */

  .heroroi {
    display: none;
    margin: 0 auto;
    width: 400px;
  }

  .heroroii {
    display: block;
    margin: 0 auto;
    width: 700px;
  }

  /* container */
  .container {
    display: flex;
    width: 1000px;
    margin: 32px auto;
  }

  main {
    background: white;
    flex: 1;
    text-align: center;
  }

  /* top1.php専用：PC幅でもスマホと同じくmain(上)→said(下)の縦並びにする */
  .container.container-top {
    display: block;
    width: 1000px;
    margin: 4px auto;
  }

  .main-top {
    width: 100%;
    padding-top: 2px;
  }

  .contensu-1 {
    display: inline-block;
    width: 650px;
    /* contensu-1内を縦並び*/
  }

  /* top1.php専用：見出し（赤い帯）の上下の余白を詰める */
  .news h2 {
    margin: 6px 16px;
  }

  /* top1.php専用：スライダーとお知らせ＋DVD買取バナー（右列）をPC幅で横並びに配置（左60%/右40%）。
     現在地ラベルの帯が増えた分、上マージンをさらに詰めている */
  body.top1-page .hero-news-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 1000px;
    margin: 4px auto 0;
  }

  /* スライダー幅を600pxから570pxに詰め、12:5比率を保ったまま高さも約12.5pxコンパクトにする。
     右列(.hero-news-col)をその分380px→410pxに広げ、行全体の幅(1000px)は変えていない */
  body.top1-page .hero-news-row .bak {
    width: 570px;
    flex: 0 0 570px;
  }

  /* 右列：お知らせとDVD買取バナーを縦に並べ、右列全体の高さをスライダーに揃える */
  body.top1-page .hero-news-col {
    width: 410px;
    flex: 0 0 410px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  body.top1-page .hero-news-col .news {
    width: 100%;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
  }

  /* top1.php専用：お知らせの高さを詰めて、その分をサイン会エリア・DVD買取バナーに振り分ける */
  body.top1-page .hero-news-col .news h2 {
    margin: 2px 14px 4px;
    font-size: 17px;
  }

  /* お知らせ1件あたりの余白・文字サイズを詰めて、リストの実質的な高さ（入れ子flexのhypothetical size）を縮める。
     枠(.news / 右列)の高さを変えない範囲での調整はmax-height値ではなく、ここでの項目自体の高さで決まるため注意 */
  body.top1-page .hero-news-col .news .news-item {
    padding: 6px 4px;
    font-size: 12px;
  }

  body.top1-page .hero-news-col .news .news-list {
    flex: 1;
    min-height: 0;
    max-height: 100px;
    overflow-y: auto;
  }

  /* 右列内のDVD買取バナーは、お知らせを詰めた分だけ高さを増やして見やすくする */
  body.top1-page .hero-news-col .kaitori-banner-main {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 6px;
  }

  /* 基本ルールのaspect-ratio:3/1を有効にし、画像比率(約3:1)と一致させて文字欠けを防ぐ */
  body.top1-page .hero-news-col .kaitori-banner-main img {
    height: auto;
  }

  body.top1-page .hero-news-col .kaitori-banner-caption {
    margin-top: 2px;
    font-size: 12px;
  }

  /* top1.php専用：ファーストビュー確保のためサイン会エリアの上下余白を詰める */
  /* main自体の左右パディング(8px)分だけはみ出させ、スライダー＋お知らせ＋DVD買取バナーの行と同じ横幅(1000px)に揃える */
  /* container-topの外側にあるため、hero-news-rowと同じ1000px幅・中央寄せに揃える */
  .event-cards {
    width: 1000px;
    margin: 8px auto 24px;
    padding: 8px 14px 14px;
  }

  .event-card-list {
    gap: 28px;
  }

  .event-cards h2 {
    margin: 2px 16px 8px;
  }

  /* top1.php専用：スライダー・お知らせを詰めた分、サイン会エリアを大きくして目立たせる。
     現在地ラベルの帯が増えた分、余白を少しだけ詰め直している */
  .event-card {
    padding: 14px;
    gap: 16px;
  }

  .event-card-img {
    width: 48%;
  }

  /* PC幅(1280px等)・1行表示時の比率(208×156px≒4:3)で固定 */
  body.top1-page .event-card-img {
    aspect-ratio: 4 / 3;
  }

  .event-card-title {
    font-size: 12px;
    padding: 6px 10px;
    margin: 0 0 8px;
  }

  .event-card-date {
    font-size: 15px;
    margin: 0 8px 4px;
  }

  .event-card-note {
    font-size: 14px;
    margin: 0 2px;
  }

  .event-card .btn {
    width: 170px;
    font-size: 16px;
    padding: 8px 0;
    margin: 8px auto 0;
  }

  /* top1.php専用：既存7ブロックのアイコングリッドをPC幅で4列に */
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .feature-icon {
    width: 40px;
    height: 40px;
  }

  .feature-label {
    font-size: 15px;
  }

  /* TOPぺージのimgスタイル*/
  .imgtop {
    width: 650px;
    height: 236px;
    margin-top: 8px;
  }

  /* ランキング20％ぺージのimgスタイル*/
  .imgtopp {
    width: 650px;
    height: 522px;
    margin-top: 8px;
  }

  /* 新査定のimgスタイル*/
  .imgtoppp {
    width: 650px;
    height: 386px;
    margin-top: 8px;
  }

  .imgtopppp {
    width: 650px;
    height: 267px;
    margin-top: 8px;
  }

  /* 16周年のimgスタイル*/
  .imgtop16 {
    width: 650px;
    height: 571px;
    margin-top: 8px;
  }

  /* PC16周年追随*/
  .floating-banner {
    display: none;
  }


  /* ランキングリスト */
  .ranking {
    font-weight: 700;
    font-size: 20px;
    text-align: left;
    margin-left: 32px;
    margin-bottom: 32px;
  }

  /* サイン会女優TOPの画像 */
  .saintopimg {
    width: 500px;
    height: 750px;
  }

  .saintopimg1 {
    width: 500px;
    height: 759px;
  }

  /* サインページ地図の画像 */
  .info-map1 {
    width: 600px;
    height: 300px;
  }

  /* テンガロゴの画像 */
  .tengarogo {
    width: 450px;
    height: 450px;
  }

  /* キャンペーンTOPロゴの画像 */
  .kyanpenrogo {
    width: 650px;
    height: 267px;
  }

  .kyanpenrogo1 {
    width: 650px;
    height: 571px;
  }

  /* 仙台店ページポイントカードの注意事項 */
  .ibul2 {
    width: 400px;
    margin: 0 auto;
  }

  .ibul02 {
    width: 400px;
    margin: 0 auto;
  }


  /* saidのスタイル*/
  .said {
    display: block;
    width: 280px;
    order: -1;
    padding: 16px;
    background-color: #eee9e9;
  }

  /* top1.php専用：サブエリアをmainより左ではなく下に配置し、横に並べて表示。SNSフォローと広告バナーは別カードなので背景は透過にする */
  .said.said-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    order: 0;
    margin: 24px 0 0;
    padding: 16px;
    box-sizing: border-box;
  }

  .xx {
    display: none;
    /* スマホ用のXの表示*/
  }

  /* top1.php専用：SNSフォローエリアはPC幅でも全幅のカードのまま（広告バナーエリアの上に独立配置） */
  .sns-follow {
    width: 100%;
  }

  /* top1.php専用：広告バナーエリアのカードを、PC幅では4枠横一列の横長グリッドを包む形に。SNSフォローエリアと横幅・左右端を揃える */
  .ad-banner-section {
    width: 100%;
    height: auto;
  }

  .ad-banner-grid {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    height: auto;
  }

  .ad-banner-slot {
    aspect-ratio: 4 / 3;
  }

  th {
    padding: 16px;
  }

  td {
    padding: 16px;
  }


}

/* ==========================================================================
   ibent_sain.php専用（body.ibent-sain-page）
   top1.phpの骨組み（スライダー＋右列カード）を流用。top1-pageスコープは変更しない。
   ========================================================================== */

/* bxSliderがJSでdiv.bx-viewportに固定してしまう高さを解除し、aspect-ratio:12/5に従わせる */
body.ibent-sain-page .bx-viewport {
  height: auto !important;
}

/* bxSlider付属CSSの.bx-wrapperの下余白(デフォルト60px)を詰める */
body.ibent-sain-page .bx-wrapper {
  margin-bottom: 45px;
}

/* 右列（このページ専用のお知らせ欄）：スマホ・タブレット幅ではスライダーの下に通常のブロックとして表示 */
body.ibent-sain-page .sain-hero-col {
  width: calc(100% - 48px);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 767px) {
  body.ibent-sain-page .sain-hero-col {
    width: calc(100% - 32px);
  }
}

/* お知らせ欄（.newsを再利用）：この列の幅いっぱいに広げ、PC幅では左のスライダーとぴったり同じ高さになるよう
   flex:1で.sain-hero-colの高さ(align-items:stretchでスライダー側と揃う)いっぱいに広げる。中身が多い場合は内部スクロール */
body.ibent-sain-page .sain-hero-col .news {
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.ibent-sain-page .sain-hero-col .news .news-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

@media screen and (min-width: 960px) {

  /* ファーストビュー確保のため、他ページで使う基本ルールの.bak{padding:16px 0}より上下の余白を詰める。
     現在地ラベルの帯が増えた分、top1.phpと同様にタイトにしている */
  body.ibent-sain-page .bak {
    padding: 2px 0;
  }

  /* PC幅：スライダー(左)とサイン会カード(右)をtop1.phpと同じ骨組みで横並びに。
     現在地ラベルの帯が増えた分、上マージンをtop1.phpと同じ水準まで詰めている */
  body.ibent-sain-page .sain-hero-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 1000px;
    margin: 4px auto 0;
  }

  /* PC幅：「サイン会イベント情報」見出し上の余白 */
  body.ibent-sain-page main h2 {
    margin-top: 4px;
  }

  /* スライダー幅を600pxから570pxに詰め、12:5比率を保ったまま高さも約12.5pxコンパクトにする。
     右列(.sain-hero-col)をその分380px→410pxに広げ、行全体の幅(1000px)は変えていない */
  body.ibent-sain-page .sain-hero-row .bak {
    width: 570px;
    flex: 0 0 570px;
  }

  body.ibent-sain-page .sain-hero-col {
    width: 410px;
    flex: 0 0 410px;
    margin: 0;
  }

  /* お知らせが増えても枠(スライダーと揃えた高さ)を超えないよう上限を設定し、内部スクロールにする。
     max-heightがないと入れ子flexのhypothetical size計算にリストの内容量がそのまま伝わり、
     行全体(スライダー側含む)を押し広げてしまうため、明示的な上限が必須（スライダー実測高さ約271pxから逆算） */
  body.ibent-sain-page .sain-hero-col .news .news-list {
    max-height: 210px;
  }

  /* サイン会カード(一覧)：ファーストビュー確保のため、PC幅に限り上下の余白を少し詰める。
     タブレット・スマホ幅の.sain-card/.sain-card-listはこの対象外で従来のまま */
  body.ibent-sain-page .sain-card-list {
    gap: 8px;
  }

  body.ibent-sain-page .sain-card {
    padding: 8px;
  }

  body.ibent-sain-page .sain-card-img {
    width: 84px;
    min-height: 84px;
  }

}

/* ==========================================================================
   ibent_sain.php専用：サイン会 一覧カード＋共通詳細タブエリア
   ========================================================================== */

.sain-list-detail {
  margin: 24px 0;
  text-align: left;
}

/* 一覧カード */
.sain-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
}

.sain-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 10px;
  margin: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* 「終了」スタンプ（is-endedクラスが付いたカードにのみ表示、印鑑風の斜め枠線デザイン） */
.sain-card-stamp {
  display: none;
}

.sain-card.is-ended .sain-card-stamp {
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  padding: 4px 10px;
  border: 3px solid #fd0202;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: #fd0202;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.15em;
  line-height: 1.5;
  transform: translateY(-50%) rotate(-14deg);
  pointer-events: none;
  z-index: 1;
}

/* スタンプが名前・日時・箇条書き・ボタンにかぶらないよう、右側にスタンプ分の余白を確保する */
.sain-card.is-ended .sain-card-body {
  padding-right: 76px;
  box-sizing: border-box;
}

.sain-card:hover {
  border-color: #f5a9a9;
}

.sain-card.is-active {
  background: #ffecec;
  border-color: #fd0202;
}

.sain-card-img {
  align-self: stretch;
  width: 96px;
  height: auto;
  min-height: 96px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* サイン会カード画像：共通の.sain-card-imgはheight:auto + align-self:stretchのため、
   本文(note)の行数でカードの高さが変わるたびに画像の縦横比が追従して伸び、人物が拡大されて
   見切れる問題があった（実測：375px幅で1行の七沢みあ=96×96pxに対し、2行の中山ふみかは96×111pxまで
   伸びていた）。tenga.php #tenga-new-items(.sain-card-img、本ファイル内に既存の同種の対処)と同じ考え方で、
   サイン会カードに限り画像を常に正方形(aspect-ratio:1/1)に固定し、本文の行数に関わらず画像サイズが
   変わらないようにする */
body.ibent-sain-page .sain-card-img {
  align-self: flex-start;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.sain-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sain-card-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.sain-card-date {
  font-size: 12px;
  color: #666;
}

.sain-card-note {
  font-size: 12px;
  color: #666;
}

.sain-card-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 12px;
  background: #fd0202;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 999px;
}

.sain-card.is-active .sain-card-btn {
  background: #b40000;
}

/* 共通の詳細エリア */
.sain-detail-area {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* 現在選択中の人物名を示す見出し。既存の赤下線見出しと統一感を持たせる */
.sain-detail-heading {
  margin: 12px 4px 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid #fd0202;
  font-size: 16px;
  font-weight: bold;
  color: #fd0202;
}

.sain-detail-heading::before {
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  font-size: 12px;
}

.sain-detail-panel {
  display: none;
}

.sain-detail-panel.is-active {
  display: block;
}

/* アコーディオン */
.sain-accordion {
  border-bottom: 1px solid #eee;
}

.sain-accordion:last-child {
  border-bottom: none;
}

.sain-accordion-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 4px;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  color: #fd0202;
  text-align: left;
  cursor: pointer;
}

.sain-accordion-arrow {
  display: inline-block;
  font-size: 11px;
  transition: transform 0.2s ease;
}

.sain-accordion.is-open .sain-accordion-arrow {
  transform: rotate(90deg);
}

.sain-accordion-body {
  display: none;
  padding: 0 4px 16px;
  font-size: 13px;
  line-height: 1.8;
  color: #333;
  text-align: left;
}

.sain-accordion.is-open .sain-accordion-body {
  display: block;
}

.sain-accordion-body p {
  margin: 0 0 12px;
  text-align: left;
  line-height: 1.8;
}

.sain-accordion-body p:last-child {
  margin-bottom: 0;
}

.sain-accordion-list {
  margin: 0 0 12px;
  padding-left: 1.3em;
  text-align: left;
}

.sain-accordion-list li {
  margin: 0 0 6px;
}

.sain-accordion-body .info-map {
  margin: 0 0 12px;
}

/* アコーディオン内の小見出し */
.sain-accordion-body h4 {
  margin: 0 0 8px;
  padding-left: 8px;
  border-left: 3px solid #fd0202;
  font-size: 13px;
  font-weight: bold;
  color: #fd0202;
  line-height: 1.4;
}

/* 「ラベル：値」形式の定義リスト
   （section要素直下のdl/dt/ddに対する共通スタイル(背景色・大きな文字サイズ等)を
   .sain-accordion-bodyがsectionタグになったことで意図せず引き継いでしまうため、
   ここで明示的に打ち消して独自スタイルを適用する） */
.sain-accordion-dl {
  margin: 0 0 12px;
  background: none;
  padding: 0;
}

.sain-accordion-dl dt {
  margin-top: 0;
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.sain-accordion-dl dd {
  margin: 0 0 10px;
  color: #333;
}

.sain-accordion-dl dd:last-child {
  margin-bottom: 0;
}

/* 注意事項のテーマ別グループ(見出し+箇条書き) */
.sain-notice-group {
  margin: 0 0 20px;
}

.sain-notice-group:last-child {
  margin-bottom: 0;
}

.sain-notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sain-notice-list li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 1.2em;
}

.sain-notice-list li::before {
  content: "○";
  position: absolute;
  left: 0;
  top: 0;
  color: #fd0202;
}

.sain-notice-list li:last-child {
  margin-bottom: 0;
}

/* アコーディオン内の補足メモ */
p.sain-accordion-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #f9f9f9;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.8;
}

/* 完売表示：チケット等が完売した際の共通パターン。特定ページに限定せず
   サイン会・イベント詳細のどこでも再利用できるよう、スコープなしの
   ユーティリティクラスとして定義している */
.sain-soldout-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: #fd0202;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  white-space: nowrap;
}

.sain-soldout-text {
  text-decoration: line-through;
  color: #999;
}

/* 完売を控えめに伝える簡易表記：バッジ(.sain-soldout-tag)ほど目立たせたくない
   箇所(イベント概要の見出し付近など)で使う、赤文字のみのシンプルな表記 */
.sain-soldout-inline {
  color: #b40000;
  font-weight: bold;
}

/* 「一部は完売だが、対象商品＋通常チケットは引き続き購入可能」であることを
   安心感のある青系トーンで伝える注記。完売バッジ(赤)とはっきり区別できる配色にする */
.sain-available-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #eaf6ff;
  border-left: 4px solid #1a8fd1;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  color: #0a5c8a;
  line-height: 1.8;
}

/* 高買屋(DVD・Blu-ray買取サービス)への導線「控えめな囲み」。
   ibent_sain.php・kyanpen.php(どちらもcontainer-top/main-topの末尾)で共通利用。
   .sain-access-infoと同じ淡いグレー地・角丸の案内トーンに揃えている */
.kaitori-promo-box {
  margin: 20px 0 0;
  padding: 18px;
  background: #f7f6f4;
  border-radius: 10px;
}

.kaitori-promo-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.kaitori-promo-body {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #444;
}

.kaitori-promo-campaign {
  margin: 0 0 14px;
  padding: 8px 12px;
  background: #fff0f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #b40000;
  line-height: 1.6;
}

.kaitori-promo-btn {
  display: inline-block;
  padding: 10px 24px;
  background: #fd0202;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 999px;
  text-decoration: none;
}

.kaitori-promo-btn:hover {
  background: #b40000;
}

.kaitori-promo-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: #777;
  line-height: 1.6;
}

.kaitori-promo-article-link {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #555;
  text-decoration: underline;
}

/* トップページ用の短縮バナー(テキスト＋ボタンのみ、画像なし)。
   既存の.ad-banner-section(広告バナーエリア)の直下に、同じ丸みのトーンで馴染ませている */
.kaitori-top-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: calc(100% - 48px);
  margin: 16px auto 0;
  padding: 16px;
  background: #f7f6f4;
  border-radius: 14px;
  text-align: center;
  box-sizing: border-box;
}

.kaitori-top-banner-text {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
}

.kaitori-top-banner-btn {
  display: inline-block;
  padding: 8px 22px;
  background: #fd0202;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.kaitori-top-banner-btn:hover {
  background: #b40000;
}

@media screen and (min-width: 767px) {
  .kaitori-top-banner {
    width: calc(100% - 32px);
  }
}

@media screen and (min-width: 960px) {
  .kaitori-top-banner {
    flex-direction: row;
    justify-content: center;
  }
}

/* 買取保証券・下取保証券のご案内：sendai.php・rifu.phpで共通利用(_hoshoken.php)。
   店頭ポスターと同じトーン(黄色地・大きな数字・買取=黄色枠/下取=赤枠)で、
   周囲の白背景カード群の中でも一目で見つかるようにしている。
   表(.hoshoken-table)は検索・スクリーンリーダー向けに残すが、主役にはしない */
.hoshoken-poster {
  padding: 20px 16px;
  background: #ffce00;
  border-radius: 14px;
  box-sizing: border-box;
}

.hoshoken-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 14px;
  background: #1a1a1a;
  color: #ffce00;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 999px;
}

.hoshoken-heading {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
  color: #1a1a1a;
}

.hoshoken-catch-main {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 900;
  color: #1a1a1a;
}

.hoshoken-catch-sub {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: bold;
  color: #4a3b00;
}

.hoshoken-lead {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #1a1a1a;
}

/* 3ステップの流れ：矢印でつないで小さく見せる */
.hoshoken-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 18px;
}

.hoshoken-flow-step {
  padding: 5px 12px;
  background: #fff;
  color: #1a1a1a;
  font-size: 12px;
  font-weight: bold;
  border-radius: 999px;
  white-space: nowrap;
}

.hoshoken-flow-arrow {
  color: #1a1a1a;
  font-weight: bold;
  font-size: 13px;
}

/* 主役の2枚のカード：買取＝黄色枠、下取＝赤枠。数字を特大表示 */
.hoshoken-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 18px;
}

@media screen and (min-width: 600px) {
  .hoshoken-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hoshoken-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* サイト共通の"section p { text-align: left; }"(style_a.css内の汎用ルール)が、
   .hoshoken-cardが持つtext-align:centerの継承より優先されてしまう(直接指定は継承に勝る)ため、
   カード内のp要素(ラベル・数字・補足)に明示的にcenterを指定して上書きする */
.hoshoken-card p {
  text-align: center;
}

.hoshoken-card-kaitori {
  border: 5px solid #e0a300;
}

.hoshoken-card-shitadori {
  border: 5px solid #fd0202;
}

.hoshoken-card-label {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: bold;
  color: #1a1a1a;
}

.hoshoken-card-number {
  margin: 0;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
}

.hoshoken-card-kaitori .hoshoken-card-number {
  color: #c98f00;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.hoshoken-card-shitadori .hoshoken-card-number {
  color: #d40000;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.hoshoken-card-unit {
  font-size: 28px;
  font-weight: 800;
}

.hoshoken-card-sub {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

/* 金額比較の棒グラフ：CSSのみ、幅は180:600:750の比率(最大750円を100%として計算) */
.hoshoken-chart {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
  margin: 0 0 16px;
}

.hoshoken-chart-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: bold;
  color: #1a1a1a;
}

/* ラベル・金額を上段、棒を下段(横幅いっぱい)に積む構成。
   ラベルと棒を同じ行に並べると、スマホ幅ではラベル・金額の文字に幅を
   取られて棒がほぼ見えなくなる(点のようになる)ため、全幅で表示する */
.hoshoken-chart-row {
  margin: 0 0 12px;
}

.hoshoken-chart-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
}

.hoshoken-chart-row-label {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.hoshoken-chart-bar-track {
  display: block;
  width: 100%;
  height: 18px;
  background: #f0f0f0;
  border-radius: 999px;
  overflow: hidden;
  box-sizing: border-box;
}

.hoshoken-chart-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.hoshoken-chart-bar-normal {
  background: #bbb;
}

.hoshoken-chart-bar-kaitori {
  background: #e0a300;
}

.hoshoken-chart-bar-shitadori {
  background: #fd0202;
}

.hoshoken-chart-row-value {
  font-size: 12px;
  font-weight: bold;
  color: #1a1a1a;
  white-space: nowrap;
}

.hoshoken-chart-highlight {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 900;
  color: #c40000;
}

/* 発売日が古いほど保証券がお得、という訴求ブロック。
   既存の.hoshoken-chart-bar-track/.hoshoken-chart-barをそのまま再利用し、
   1行につき「通常の買取」「買取保証券」の2本の棒を積む構成にしている */
.hoshoken-age {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
  margin: 0 0 16px;
}

.hoshoken-age-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 900;
  color: #1a1a1a;
}

.hoshoken-age-desc {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #333;
}

.hoshoken-age-sublabel {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: bold;
  color: #555;
}

.hoshoken-age-row {
  padding: 10px 0;
  border-top: 1px dashed #eee;
}

.hoshoken-age-row:first-of-type {
  border-top: none;
}

/* スマホ幅ではラベルと差額(特に強調行の大きい文字)を横並びにすると
   狭い幅で折り返して崩れるため、縦積みにする。PC幅のみ横並びに戻す */
.hoshoken-age-row-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 6px;
}

.hoshoken-age-row-label {
  font-size: 13px;
  font-weight: bold;
  color: #1a1a1a;
}

.hoshoken-age-row-diff {
  font-size: 15px;
  font-weight: 900;
  color: #c40000;
  white-space: nowrap;
}

/* 一番下の行(発売から1年以上)を最も目立たせる */
.hoshoken-age-row-emphasis {
  background: #fff6f6;
  margin: 0 -10px;
  padding: 10px;
  border-top: 1px dashed #eee;
  border-radius: 8px;
}

.hoshoken-age-row-emphasis .hoshoken-age-row-diff {
  font-size: 19px;
}

.hoshoken-age-bar-tag {
  display: block;
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: bold;
  color: #555;
}

.hoshoken-age-row .hoshoken-chart-bar-track {
  height: 14px;
  margin: 0 0 8px;
}

.hoshoken-age-row .hoshoken-chart-bar-track:last-child {
  margin-bottom: 0;
}

.hoshoken-age-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: #777;
}

/* 下取保証券の訴求ボックス：赤枠で、買取保証券(黄色)とはっきり区別する */
.hoshoken-shitadori-box {
  background: #fff;
  border: 3px solid #fd0202;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
  margin: 0 0 16px;
}

.hoshoken-shitadori-box-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 900;
  color: #c40000;
}

.hoshoken-shitadori-box-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
}

.hoshoken-table {
  width: 100%;
  margin: 0 0 8px;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.hoshoken-table th,
.hoshoken-table td {
  padding: 7px 10px;
  border: 1px solid #eee;
  text-align: center;
  box-sizing: border-box;
}

.hoshoken-table thead th {
  background: #f5f5f5;
  color: #555;
  font-weight: bold;
}

.hoshoken-table tbody th {
  background: #fafafa;
  color: #555;
  font-weight: bold;
  text-align: left;
}

.hoshoken-table tbody td {
  background: #fff;
  color: #555;
}

.hoshoken-note {
  margin: 0;
  font-size: 11px;
  color: #555;
}

@media screen and (min-width: 767px) {
  .hoshoken-poster {
    padding: 28px 32px;
  }

  .hoshoken-heading {
    font-size: 26px;
  }

  .hoshoken-catch-main {
    font-size: 24px;
  }

  .hoshoken-catch-sub {
    font-size: 14px;
  }

  .hoshoken-card-number {
    font-size: 88px;
  }

  .hoshoken-card-unit {
    font-size: 42px;
  }

  .hoshoken-chart-highlight {
    font-size: 18px;
  }

  .hoshoken-age-title {
    font-size: 18px;
  }

  .hoshoken-age-row-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .hoshoken-age-row-diff {
    font-size: 18px;
  }

  .hoshoken-age-row-emphasis .hoshoken-age-row-diff {
    font-size: 23px;
  }

  .hoshoken-shitadori-box-title {
    font-size: 18px;
  }
}

/* サイン会一覧の冒頭に出す、来店手段に関する共通案内。
   完売お知らせ(.sain-available-note)とは別物なので専用クラスにする。
   注意喚起の赤ではなく、落ち着いた案内トーン(淡いグレー地＋赤はアクセントのみ) */
.sain-access-info {
  margin: 0 0 14px;
  padding: 16px;
  background: #f7f6f4;
  border-radius: 10px;
}

.sain-access-info-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.sain-access-info-title-icon {
  font-size: 16px;
}

.sain-access-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.sain-access-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.sain-access-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff0f0;
  font-size: 20px;
}

.sain-access-info-item-text {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
}

.sain-access-info-detail {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #ddd;
  font-size: 12.5px;
  font-weight: normal;
  color: #666;
  line-height: 1.8;
}

@media screen and (min-width: 767px) {
  .sain-access-info-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* PC・タブレット幅：カードを横並びに */
@media screen and (min-width: 767px) {

  .sain-card-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sain-card {
    flex: 1 1 calc(50% - 6px);
  }

}

@media screen and (min-width: 960px) {

  .sain-card {
    flex: 1 1 calc(33.333% - 8px);
  }

}

/* スマホ幅：カードが縦積みになり本文の横幅が狭くなるため、
   スタンプとその回避余白を小さくして、タイトルの折り返し行数が
   増えすぎないようにする（カード間の高さの差を抑える） */
@media screen and (max-width: 767px) {

  .sain-card.is-ended .sain-card-stamp {
    padding: 3px 7px;
    border-width: 2px;
    font-size: 12px;
  }

  .sain-card.is-ended .sain-card-body {
    padding-right: 58px;
  }

}

/* ==========================================================================
   kyanpen.php専用（body.kyanpen-page）
   top1.php/ibent_sain.phpの骨組み（スライダー＋右列）を流用。他ページのスコープは変更しない。
   ========================================================================== */

/* bxSliderがJSでdiv.bx-viewportに固定してしまう高さを解除し、aspect-ratio:12/5に従わせる */
body.kyanpen-page .bx-viewport {
  height: auto !important;
}

/* bxSlider付属CSSの.bx-wrapperの下余白(デフォルト60px)を詰める */
body.kyanpen-page .bx-wrapper {
  margin-bottom: 45px;
}

/* キャンペーン紹介スライド：画像(img)の代わりにHTML/CSSで組んだテキストベースのバナー。
   以前の画像バナー(campaign_moodyz.svg等)にあった「淡い背景＋カラータイトルバー＋
   白い期間バッジ＋中央揃えの大きい割引率＋下部の小さい注記」という構成をそのまま再現し、
   中身だけ_campaign_data.phpのデータに差し替えている。
   色は<li>の中の<a style>で渡す--kyan-slide-color/--kyan-slide-bgで切り替える */
body.kyanpen-page .slider-a.slider-top li {
  padding-bottom: 32px;
}

body.kyanpen-page .kyan-hero-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  aspect-ratio: 12 / 5;
  box-sizing: border-box;
  background: var(--kyan-slide-bg, #fdf1f1);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 上部のカラータイトルバー：キャンペーン名を表示。長い名前は2行まで折り返す */
body.kyanpen-page .kyan-hero-slide-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  box-sizing: border-box;
  background: var(--kyan-slide-color, #b40000);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* タイトルバーの下、期間バッジ〜割引率〜注記までをひとまとまりとして、
   残りの縦スペースの中で中央寄せにする。割引率(.kyan-hero-slide-figure)を
   flex:1で直接伸び縮みさせると、文字が大きすぎた場合に下の注記と重なって
   しまうため、このラッパーで「収まる範囲で中央寄せ」だけを担当させている */
body.kyanpen-page .kyan-hero-slide-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* 期間バッジ：白地の角丸ピル */
body.kyanpen-page .kyan-hero-slide-period {
  flex-shrink: 0;
  margin-top: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--kyan-slide-color, #b40000);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

/* 割引率：中央揃えで大きく強調 */
body.kyanpen-page .kyan-hero-slide-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 1px 0;
  color: var(--kyan-slide-color, #b40000);
  line-height: 1;
}

body.kyanpen-page .kyan-hero-slide-number {
  font-size: clamp(38px, 11vw, 80px);
  font-weight: 900;
}

body.kyanpen-page .kyan-hero-slide-unit {
  margin-left: 2px;
  font-size: clamp(20px, 6vw, 44px);
  font-weight: 800;
}

body.kyanpen-page .kyan-hero-slide-off {
  margin-top: 1px;
  font-size: clamp(11px, 2.8vw, 22px);
  font-weight: 800;
}

/* 下部の注記：対象外条件などを小さい文字で。縦スペースが限られるスマホ・タブレット幅では
   1行までの省略表示にし、PC幅では2行まで表示する */
body.kyanpen-page .kyan-hero-slide-note {
  flex-shrink: 0;
  width: 100%;
  padding: 1px 10px 3px;
  box-sizing: border-box;
  font-size: 7px;
  line-height: 1.4;
  color: var(--kyan-slide-color, #b40000);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

@media screen and (min-width: 960px) {
  body.kyanpen-page .kyan-hero-slide-title {
    min-height: 44px;
    padding: 6px 24px;
    font-size: 17px;
  }

  body.kyanpen-page .kyan-hero-slide-period {
    margin-top: 8px;
    padding: 4px 18px;
    font-size: 13px;
  }

  body.kyanpen-page .kyan-hero-slide-number {
    font-size: 92px;
  }

  body.kyanpen-page .kyan-hero-slide-unit {
    font-size: 50px;
  }

  body.kyanpen-page .kyan-hero-slide-off {
    margin-top: 0;
    font-size: 24px;
  }

  body.kyanpen-page .kyan-hero-slide-note {
    padding: 2px 24px 6px;
    font-size: 10px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* 右列（キャッチコピーエリア）：スマホ・タブレット幅ではスライダーの下に通常のブロックとして表示 */
body.kyanpen-page .kyan-catch-col {
  width: calc(100% - 48px);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 767px) {
  body.kyanpen-page .kyan-catch-col {
    width: calc(100% - 32px);
  }
}

/* キャッチコピー本体：情報を詰め込む「お知らせ」枠とは違い、余白を活かしつつ、
   赤の濃淡グラデーション＋影＋斜めの光沢で「セールページらしい」奥行きと訴求力を出す */
body.kyanpen-page .kyan-catch {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px;
  background: linear-gradient(135deg, #6e0000 0%, #b40000 55%, #fd0202 100%);
  border-radius: 14px;
  box-sizing: border-box;
  box-shadow: 0 10px 26px rgba(110, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 装飾①：右上から斜めに差し込む光沢ライン */
body.kyanpen-page .kyan-catch::after {
  content: "";
  position: absolute;
  top: -70%;
  right: -25%;
  width: 55%;
  height: 240%;
  background: linear-gradient(75deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}

/* 「CAMPAIGN」ラベルをバッジ風に。炎アイコン付き */
.kyan-catch-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #ffe27a, #ffc93c);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #7a0000;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

.kyan-catch-eyebrow-icon {
  width: 12px;
  height: 12px;
}

.kyan-catch-main {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-family: "Yu Gothic Bold", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

/* 装飾②：メインコピー下のゴールドのアクセントバー */
.kyan-catch-accent {
  position: relative;
  z-index: 1;
  display: block;
  width: 46px;
  height: 4px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, #ffe27a, #fff2c2);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.kyan-catch-sub {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.03em;
}

@media screen and (min-width: 960px) {

  /* PC幅：スライダー(左)とキャッチコピー(右)をtop1.php/ibent_sain.phpと同じ骨組みで横並びに。
     現在地ラベルの帯が増えた分、上マージンをtop1.php/ibent_sain.phpと同じ水準まで詰めている
     (ファーストビュー確保のため。1つ目のキャンペーンカードの詳細を見るボタンまでが対象) */
  body.kyanpen-page .kyan-hero-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 1000px;
    margin: 4px auto 0;
  }

  body.kyanpen-page main h2 {
    margin-top: 4px;
  }

  /* スライダー幅を600pxから570pxに詰め、12:5比率を保ったまま高さも約12.5pxコンパクトにする。
     右列(.kyan-catch-col)をその分380px→410pxに広げ、行全体の幅(1000px)は変えていない */
  body.kyanpen-page .kyan-hero-row .bak {
    width: 570px;
    flex: 0 0 570px;
  }

  body.kyanpen-page .kyan-catch-col {
    width: 410px;
    flex: 0 0 410px;
    margin: 0;
  }

  body.kyanpen-page .kyan-catch {
    padding: 32px;
  }

  body.kyanpen-page .kyan-catch-main {
    font-size: 34px;
  }

}

/* ==========================================================================
   kyanpen.php専用：キャンペーン 一覧カード＋共通詳細タブエリア
   共通詳細タブエリア側は、サイン会ページ(ibent_sain.php)と同じ
   .sain-detail-area / .sain-accordion 系のクラスをそのまま再利用している（グローバル定義のため再定義不要）。
   一覧カード側だけ、写真中心の.sain-cardとは別に、割引率などの数字を大きく見せる.kyan-cardを新設した。
   ========================================================================== */

.kyan-list-detail {
  margin: 24px 0;
  text-align: left;
}

.kyan-detail-area {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* スマホ幅：Paradise Box Service(.feature-grid)の2列グリッドと横幅の見え方を揃えるため、
   カードも1列の横長カードではなく2列のグリッドにする（767px以上は下の@mediaで横長カードに切り替える） */
.kyan-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 0 20px;
}

.kyan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 30px 8px 12px;
  margin: 0;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.kyan-card:hover {
  border-color: #f5a9a9;
}

.kyan-card.is-active {
  background: #ffecec;
  border-color: #fd0202;
}

/* 店舗バッジ（左上）：仙台店＝青、利府店＝緑、両店＝赤（サイトのメインカラー） */
.kyan-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.05em;
}

.kyan-badge-sendai {
  background: #2f7bd6;
}

.kyan-badge-rifu {
  background: #1a9e6f;
}

.kyan-badge-both {
  background: #fd0202;
}

/* 「終了」スタンプ（右上）。サイン会ページのスタンプと同系デザインだが、カード構造が異なるため角配置にしている */
.kyan-card-stamp {
  display: none;
}

.kyan-card.is-ended .kyan-card-stamp {
  display: block;
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 1px 7px;
  border: 2px solid #fd0202;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  color: #fd0202;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 1;
}

/* 割引率など「お得な数字」を大きく見せるブロック。
   数字と単位のペア(.kyan-card-value)をひとつのまとまりとして正方形の中央(上下左右)に配置し、
   ペアの中では数字と単位のベースラインを揃える。役割を分けることで、
   「数字と単位の位置関係」と「正方形内でのペア全体の中央配置」を干渉させずに両立させている */
.kyan-card-figure {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-height: 58px;
  background: linear-gradient(135deg, #fd0202, #ff6b6b);
  border-radius: 10px;
  color: #fff;
  box-sizing: border-box;
  padding: 4px;
}

/* 数字＋単位のペア：align-items:baselineで文字のベースライン(下端)を揃える */
.kyan-card-value {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.kyan-card-number {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

/* 単位(%・倍・個)：全角の「倍」「個」は同じフォントサイズでも%記号より大きく見えるため、
   数字よりはっきり小さいサイズにすることで、記号・漢字どちらの単位でも見た目のバランスが揃う */
.kyan-card-unit {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.kyan-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.kyan-card-title {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.kyan-card-sub {
  font-size: 10px;
  color: #666;
}

.kyan-card-btn {
  display: inline-block;
  align-self: center;
  margin-top: 2px;
  padding: 3px 10px;
  background: #fd0202;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 999px;
}

.kyan-card.is-active .kyan-card-btn {
  background: #b40000;
}

/* 「開催中のキャンペーン」セクション(sendai.php/rifu.php)の、キャンペーン情報ページへの誘導リンク */
.kyan-more-link {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
}

.kyan-more-link a {
  color: #fd0202;
  font-weight: bold;
  text-decoration: underline;
}

/* タブレット幅：.containerがこの幅帯では600px固定(main.phpの共通レイアウト)で余裕がないため、
   横長カードにはせず、Paradise Box Serviceと同じ3列グリッドのまま、スマホと同じ縦積みカードを維持する */
@media screen and (min-width: 767px) {

  .kyan-card-list {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* PC幅：.containerが1000pxに広がり余裕ができるため、写真代わりの数字ブロックを左、
   テキストを右に並べる横長カードに切り替える（3列。Paradise Box Serviceの4列とは列数が異なるが、
   このカードは中身の情報量が多いため、崩れずに収まる列数を優先している） */
@media screen and (min-width: 960px) {

  .kyan-card-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .kyan-card {
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 34px 14px 14px;
    text-align: left;
  }

  .kyan-card-badge {
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    font-size: 11px;
  }

  .kyan-card.is-ended .kyan-card-stamp {
    top: 8px;
    right: 10px;
    padding: 2px 9px;
    font-size: 11px;
  }

  .kyan-card-figure {
    width: 84px;
    min-height: 76px;
    padding: 6px;
  }

  .kyan-card-number {
    font-size: 30px;
  }

  .kyan-card-unit {
    font-size: 12px;
  }

  .kyan-card-body {
    align-items: flex-start;
    gap: 3px;
  }

  .kyan-card-title {
    font-size: 14px;
  }

  .kyan-card-sub {
    font-size: 12px;
  }

  .kyan-card-btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 12px;
    font-size: 12px;
  }

}

/* ==========================================================================
   tenga.php専用（body.tenga-page）
   top1.php/kyanpen.phpの骨組み（スライダー＋右列）を流用。他ページのスコープは変更しない。
   ========================================================================== */

/* bxSliderがJSでdiv.bx-viewportに固定してしまう高さを解除し、aspect-ratio:12/5に従わせる */
body.tenga-page .bx-viewport {
  height: auto !important;
}

/* bxSlider付属CSSの.bx-wrapperの下余白(デフォルト60px)を詰める */
body.tenga-page .bx-wrapper {
  margin-bottom: 45px;
}

/* タブレット幅(767〜959px)専用の不具合修正：
   共通CSSの.contensu-1が767px以上でdisplay:flex(方向・折り返し指定なし)になっており、
   img/h3/p/divなど複数の子要素が横一列のflexアイテムとして扱われ、
   本文が縦に潰れて多段組みのように見える崩れが発生していた（tenga.php以外にも影響し得る共通クラスのため、
   グローバルなルールは変更せず、tenga.pageに限定してdisplay:blockに戻し、通常の縦積み表示に修正する。
   960px以上ではdisplay:inline-block+text-align:centerで中央寄せする実装のため、ここでは上書きしない） */
@media screen and (min-width: 767px) and (max-width: 959px) {
  body.tenga-page .contensu-1 {
    display: block;
  }
}

/* 右列（新作情報）：スマホ・タブレット幅ではスライダーの下に通常のブロックとして表示 */
body.tenga-page .tenga-hero-col {
  width: calc(100% - 48px);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 767px) {
  body.tenga-page .tenga-hero-col {
    width: calc(100% - 32px);
  }
}

/* お知らせ欄（.newsを再利用）：この列の幅いっぱいに広げ、PC幅では左のスライダーとぴったり同じ高さになるよう
   flex:1で.tenga-hero-colの高さ(align-items:stretchでスライダー側と揃う)いっぱいに広げる。
   中身が多い場合は内部スクロール */
body.tenga-page .tenga-hero-col .news {
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.tenga-page .tenga-hero-col .news .tenga-strengths-list {
  overflow-y: auto;
}

/* 「強み」リスト（アイコン+テキストを縦に並べる。TOPページの.news-listに近い1行リストの見た目） */
.tenga-strengths-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tenga-strengths-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #eee;
}

.tenga-strengths-item:last-child {
  border-bottom: none;
}

.tenga-strengths-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: #fd0202;
}

.tenga-strengths-icon svg {
  width: 100%;
  height: 100%;
}

.tenga-strengths-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

@media screen and (min-width: 960px) {

  /* PC幅：スライダー(左)と新作情報(右)をtop1.php/kyanpen.phpと同じ骨組みで横並びに。
     現在地ラベルの帯が増えた分、上マージンをibent_sain.php/kyanpen.phpと同じ4pxまで詰めている */
  body.tenga-page .tenga-hero-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 1000px;
    margin: 4px auto 0;
  }

  body.tenga-page main h2 {
    margin-top: 4px;
  }

  body.tenga-page .tenga-hero-row .bak {
    width: 600px;
    flex: 0 0 600px;
  }

  body.tenga-page .tenga-hero-col {
    width: 380px;
    flex: 0 0 380px;
    margin: 0;
  }

  /* 中身が増えても枠(左のメインビジュアルカードと揃えた高さ)を超えないよう上限を設定し、内部スクロールにする */
  body.tenga-page .tenga-hero-col .news .tenga-strengths-list {
    max-height: 210px;
  }

}

/* 「TENGA SHOP SENDAIとは」セクションの導入カード（画像+見出し+導入文）：
   タブレット幅以上は画像(左)+説明文(右)の横並び、スマホ幅では画像上・説明文下の縦並びに切り替える。
   このセクション(.tenga-about-section)だけに適用し、他の.contensu-1セクションの見た目は変えない */

/* 見出し・本文の左端をそろえ、.event-card-bodyのgapだけで間隔を作る
   （元の.event-card-title/.event-card-dateの個別margin(左8px/12px/0)がバラついていたのを統一） */
body.tenga-page .tenga-about-card .event-card-body {
  gap: 8px;
}

body.tenga-page .tenga-about-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

body.tenga-page .tenga-about-lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #333;
}

/* 画像:説明文の比率を、本文の分量に合わせて画像側を控えめに（既定の42%/48%だと文章に対して画像が大きすぎるため） */
body.tenga-page .tenga-about-card .event-card-img {
  width: 34%;
}

@media screen and (max-width: 766px) {
  body.tenga-page .tenga-about-card {
    flex-direction: column;
  }

  body.tenga-page .tenga-about-card .event-card-img {
    width: 140px;
    height: 140px;
    align-self: center;
    margin: 0 auto 10px;
  }
}

@media screen and (min-width: 767px) {
  body.tenga-page .tenga-about-title {
    font-size: 15px;
  }

  body.tenga-page .tenga-about-lead {
    font-size: 14px;
  }
}

/* とは／新作情報／カテゴリ／よくある質問の横幅統一は、共通クラス.content-section(style_a.css共通部分)を
   併用することで対応済み（.contensu-1の650px固定を、幅の広い方の.content-sectionが上書きする） */
@media screen and (min-width: 960px) {

  body.tenga-page .tenga-about-card .event-card-img {
    width: 30%;
  }

}

/* 「店内で楽しめるカテゴリ」グループ：上の「強み」グループ(白背景)と視覚的に区別するため、
   薄いピンクの背景＋枠線で囲む。グリッド自体は.feature-gridをそのまま流用している */
body.tenga-page .tenga-category-block {
  background: #fff5f5;
  border: 1px solid #ffd6d6;
  border-radius: 12px;
  padding: 16px 10px 20px;
}

/* 新作情報カードの画像枠：共通の.sain-card-imgは元々height:auto + align-self:stretchのため、
   本文(商品名・価格・注記)の行数でカードの高さが変わるたびに画像の縦横比も不安定に変化していた。
   新作情報(#tenga-new-items)に限り、width:96pxは維持したままaspect-ratio:1/1を指定し、
   align-self:stretchをやめて常に正方形で確定させ、object-fit:cover(共通定義のまま)で
   トリミング表示する。ibent_sain.phpのサイン会カード画像(.sain-card-img)は
   従来通りカードの高さに追従する挙動のまま変更しない */
body.tenga-page #tenga-new-items .sain-card-img {
  align-self: center;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 0;
}

/* ==========================================================================
   sendai.php専用（body.sendai-page）
   tenga.php/kyanpen.phpの骨組み（スライダー＋右列）を流用。他ページのスコープは変更しない。
   ========================================================================== */

/* bxSliderがJSでdiv.bx-viewportに固定してしまう高さを解除し、aspect-ratio:12/5に従わせる */
body.sendai-page .bx-viewport {
  height: auto !important;
}

/* bxSlider付属CSSの.bx-wrapperの下余白(デフォルト60px)を詰める */
body.sendai-page .bx-wrapper {
  margin-bottom: 45px;
}

/* タブレット幅(767〜959px)専用の不具合修正：共通CSSの.contensu-1が767px以上でdisplay:flex
   (方向・折り返し指定なし)になっており、img/h3/p/divなど複数の子要素が横一列のflexアイテムとして
   扱われ、本文が縦に潰れて多段組みのように見える崩れが発生する（tenga.php/kyanpen.phpと同じ既知の不具合）。
   グローバルなルールは変更せず、sendai-pageに限定してdisplay:blockに戻す */
@media screen and (min-width: 767px) and (max-width: 959px) {
  body.sendai-page .contensu-1 {
    display: block;
  }
}

/* 右列（店舗基本情報）：スマホ・タブレット幅ではスライダーの下に通常のブロックとして表示 */
body.sendai-page .sendai-hero-col {
  width: calc(100% - 48px);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 767px) {
  body.sendai-page .sendai-hero-col {
    width: calc(100% - 32px);
  }
}

body.sendai-page .sendai-hero-col .news {
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 「店舗基本情報」リスト（アイコン+ラベル+詳細を縦に並べる。TOPページの.news-listに近い1行リストの見た目） */
.sendai-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sendai-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #eee;
}

.sendai-info-item:last-child {
  border-bottom: none;
}

.sendai-info-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: #fd0202;
  margin-top: 2px;
}

.sendai-info-icon svg {
  width: 100%;
  height: 100%;
}

.sendai-info-text {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}

.sendai-info-text strong {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 2px;
}

/* 「アクセス・地図を見る」ボタン：共通の.btn(幅250px・青色)をこのカード幅に収まるよう調整 */
body.sendai-page .sendai-hero-map-btn {
  width: 100%;
  max-width: 220px;
  margin: 4px auto 0;
  font-size: 14px;
  text-align: center;
}

@media screen and (min-width: 960px) {

  /* PC幅：スライダー(左)と店舗基本情報(右)をtenga.php/kyanpen.phpと同じ骨組みで横並びに。
     現在地ラベルの帯が増えた分、上マージンをibent_sain.php/kyanpen.phpと同じ4pxまで詰めている */
  body.sendai-page .sendai-hero-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 1000px;
    margin: 4px auto 0;
  }

  body.sendai-page main h2 {
    margin-top: 4px;
  }

  body.sendai-page .sendai-hero-row .bak {
    width: 600px;
    flex: 0 0 600px;
  }

  body.sendai-page .sendai-hero-col {
    width: 380px;
    flex: 0 0 380px;
    margin: 0;
  }

  /* 中身が増えても枠(スライダーと揃えた高さ)を超えないよう上限を設定し、内部スクロールにする */
  body.sendai-page .sendai-hero-col .news .sendai-info-list {
    max-height: 210px;
    overflow-y: auto;
  }

}

/* 関連情報リンク：3項目固定のため、タブレット幅以上は.feature-gridの既定4列(PC)/3列(タブレット)ではなく
   常に3列に固定し、余ったセルが左寄せで空いて見えるのを防ぐ */
@media screen and (min-width: 767px) {
  body.sendai-page .sendai-related-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* アクセス・地図セクション：ページ下部に大きめに配置するため、共通の.info-map1(HTML属性300x205、
   PC幅のみ600x300)をこのセクションに限り幅いっぱい・高さも大きめに上書きする */
body.sendai-page .sendai-map-large .info-map1 {
  width: 100%;
  max-width: 100%;
  height: 320px;
}

@media screen and (min-width: 767px) {
  body.sendai-page .sendai-map-large .info-map1 {
    height: 420px;
  }
}

/* 定期イベント：既存の文章・画像は変更せず、白カードのグリッドにまとめてコンパクト化する。
   スマホ幅は1列、タブレット幅以上は2列。 */
body.sendai-page .sendai-event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 12px 0 4px;
}

@media screen and (min-width: 600px) {
  body.sendai-page .sendai-event-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.sendai-page .sendai-event-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  box-sizing: border-box;
  text-align: left;
}

/* カード内の見出し・本文は、共通のh4(18px)/p(16px)より一回り小さくして密度を上げる */
body.sendai-page .sendai-event-card h4 {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 8px;
}

body.sendai-page .sendai-event-card p {
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 8px;
}

body.sendai-page .sendai-event-card p:last-child {
  margin-bottom: 0;
}

/* 共通の.imgtop/.imgtoppppはPC幅で650px固定のため、このカード内に限りカード幅いっぱい・
   高さ自動(元の比率のまま)に上書きして画像を縮小する。共通クラス自体は変更しないため他ページに影響しない */
/* 6項目のバナー画像は元々300x109/300x100/300x123など縦横比がバラバラで、
   height:autoのままだと表示サイズが揃わなかったため、aspect-ratioで統一し、
   object-fit:coverで各画像をこの枠にトリミング表示する */
body.sendai-page .sendai-event-card img {
  width: 100%;
  aspect-ratio: 2.75 / 1;
  height: auto;
  max-width: 100%;
  margin: 0 0 8px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}

/* 33bana.webpのみ、coverだと右端の文字(「%」「OFF」)が見切れてしまうため、
   この画像に限りcontainで全体を収め、余白は画像の背景と馴染む赤で埋める */
body.sendai-page .sendai-event-card img.sendai-event-img-contain {
  object-fit: contain;
  background-color: #c40000;
}

/* anime5pa.webpも同様にcoverだと上端の見出し文字・下端の「毎週月曜定期開催」が見切れるため、
   containで全体を収める。この画像は背景が白系の淡いグラデーションのため、
   カード自体の白背景(#fff)に馴染むよう余白も白にする */
body.sendai-page .sendai-event-card img.sendai-event-img-contain-light {
  object-fit: contain;
  background-color: #fff;
}

/* ranking20_bana.webpも実際の画像比率(2085x855≒2.44:1)が統一枠(2.75:1)と異なり、
   coverだと上端「パラダイスBOX仙台店は」・下端「引きで買える店」が見切れるため、
   containで全体を収める。この画像は黒地に炎のグラデーション背景のため、余白も黒にする */
body.sendai-page .sendai-event-card img.sendai-event-img-contain-dark {
  object-fit: contain;
  background-color: #000;
}

body.sendai-page .sendai-event-card .ibentopp {
  font-size: 12px;
  margin: 0 0 8px;
}

/* ヒーロースライダーの実店舗写真：sendai_7.jpgは商品棚が上半分に集中し、下半分は床の余白のため、
   12:5トリミングで棚が切れて床ばかり写らないよう、object-positionを上寄せにする */
body.sendai-page .sendai-slide-top {
  object-position: center 20%;
}

/* サイン会情報への誘導バナー：定期イベント(白背景カード)の直後に配置し、視覚的に区別できるよう
   サイトの赤系配色を活かしたグラデーションの目立つバナーにする。
   スマホ・タブレット幅は縦積み、PC幅はテキスト+ボタンの横長バナーに切り替える */
body.sendai-page .sendai-sain-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #6e0000, #b40000 55%, #fd0202);
  border-radius: 14px;
  padding: 24px 20px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body.sendai-page .sendai-sain-banner-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

body.sendai-page .sendai-sain-banner-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: #ffe27a;
  flex-shrink: 0;
}

body.sendai-page .sendai-sain-banner-icon svg {
  width: 100%;
  height: 100%;
}

body.sendai-page .sendai-sain-banner-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #ffe9e9;
}

body.sendai-page .sendai-sain-banner-btn {
  display: inline-block;
  flex-shrink: 0;
  padding: 12px 32px;
  background: #fff;
  color: #b40000;
  font-size: 14px;
  font-weight: bold;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.sendai-page .sendai-sain-banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

@media screen and (min-width: 767px) {
  body.sendai-page .sendai-sain-banner {
    flex-direction: row;
    justify-content: space-between;
    padding: 28px 36px;
  }

  body.sendai-page .sendai-sain-banner-text {
    text-align: left;
  }

  body.sendai-page .sendai-sain-banner-heading {
    justify-content: flex-start;
    font-size: 20px;
  }

  body.sendai-page .sendai-sain-banner-body {
    font-size: 14px;
  }
}

/* ヒーロースライダー画像のライトボックス：クリックした画像を画面いっぱいに拡大表示する */
body.sendai-page .sendai-slide-zoomable {
  cursor: zoom-in;
}

body.sendai-page .sendai-lightbox {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.85);
}

body.sendai-page .sendai-lightbox.is-open {
  display: flex;
}

body.sendai-page .sendai-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.sendai-page .sendai-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: background 0.15s ease;
}

body.sendai-page .sendai-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   rifu.php専用（body.rifu-page）
   sendai.phpの骨組み（スライダー＋右列＋定期イベントグリッド＋ライトボックス等）を流用。
   他ページのスコープは変更しない。
   ========================================================================== */

/* bxSliderがJSでdiv.bx-viewportに固定してしまう高さを解除し、aspect-ratio:12/5に従わせる */
body.rifu-page .bx-viewport {
  height: auto !important;
}

/* bxSlider付属CSSの.bx-wrapperの下余白(デフォルト60px)を詰める */
body.rifu-page .bx-wrapper {
  margin-bottom: 45px;
}

/* タブレット幅(767〜959px)専用の不具合修正：sendai.php/tenga.php/kyanpen.phpと同じ既知の不具合。
   グローバルなルールは変更せず、rifu-pageに限定してdisplay:blockに戻す */
@media screen and (min-width: 767px) and (max-width: 959px) {
  body.rifu-page .contensu-1 {
    display: block;
  }
}

/* 右列（店舗基本情報）：スマホ・タブレット幅ではスライダーの下に通常のブロックとして表示 */
body.rifu-page .rifu-hero-col {
  width: calc(100% - 48px);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 767px) {
  body.rifu-page .rifu-hero-col {
    width: calc(100% - 32px);
  }
}

body.rifu-page .rifu-hero-col .news {
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 「店舗基本情報」リスト（アイコン+ラベル+詳細を縦に並べる） */
.rifu-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rifu-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #eee;
}

.rifu-info-item:last-child {
  border-bottom: none;
}

.rifu-info-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: #fd0202;
  margin-top: 2px;
}

.rifu-info-icon svg {
  width: 100%;
  height: 100%;
}

.rifu-info-text {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}

.rifu-info-text strong {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 2px;
}

/* 「アクセス・地図を見る」ボタン：共通の.btn(幅250px・青色)をこのカード幅に収まるよう調整 */
body.rifu-page .rifu-hero-map-btn {
  width: 100%;
  max-width: 220px;
  margin: 4px auto 0;
  font-size: 14px;
  text-align: center;
}

@media screen and (min-width: 960px) {

  /* PC幅：スライダー(左)と店舗基本情報(右)をsendai.phpと同じ骨組みで横並びに。
     現在地ラベルの帯が増えた分、上マージンをibent_sain.php/kyanpen.phpと同じ4pxまで詰めている */
  body.rifu-page .rifu-hero-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 1000px;
    margin: 4px auto 0;
  }

  body.rifu-page main h2 {
    margin-top: 4px;
  }

  body.rifu-page .rifu-hero-row .bak {
    width: 600px;
    flex: 0 0 600px;
  }

  body.rifu-page .rifu-hero-col {
    width: 380px;
    flex: 0 0 380px;
    margin: 0;
  }

  /* 中身が増えても枠(スライダーと揃えた高さ)を超えないよう上限を設定し、内部スクロールにする */
  body.rifu-page .rifu-hero-col .news .rifu-info-list {
    max-height: 210px;
    overflow-y: auto;
  }

}

/* 関連情報リンク：2項目固定のため、タブレット幅以上は.feature-gridの既定4列(PC)/3列(タブレット)ではなく
   常に2列に固定し、余ったセルが左寄せで空いて見えるのを防ぐ */
@media screen and (min-width: 767px) {
  body.rifu-page .rifu-related-links {
    grid-template-columns: repeat(2, 1fr);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* アクセス・地図セクション：ページ下部に大きめに配置するため、共通の.info-map1(HTML属性300x205、
   PC幅のみ600x300)をこのセクションに限り幅いっぱい・高さも大きめに上書きする */
body.rifu-page .rifu-map-large .info-map1 {
  width: 100%;
  max-width: 100%;
  height: 320px;
}

@media screen and (min-width: 767px) {
  body.rifu-page .rifu-map-large .info-map1 {
    height: 420px;
  }
}

/* 定期イベント：既存の文章・画像は変更せず、白カードのグリッドにまとめてコンパクト化する。
   スマホ幅は1列、タブレット幅以上は2列。 */
body.rifu-page .rifu-event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 12px 0 4px;
}

@media screen and (min-width: 600px) {
  body.rifu-page .rifu-event-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.rifu-page .rifu-event-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  box-sizing: border-box;
  text-align: left;
}

/* カード内の見出し・本文は、共通のh4(18px)/p(16px)より一回り小さくして密度を上げる */
body.rifu-page .rifu-event-card h4 {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 8px;
}

body.rifu-page .rifu-event-card p {
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 8px;
}

body.rifu-page .rifu-event-card p:last-child {
  margin-bottom: 0;
}

/* 8項目のバナー画像は縦横比がバラバラなため、sendai.phpと同じくaspect-ratioで統一し、
   object-fit:coverで各画像をこの枠にトリミング表示する */
body.rifu-page .rifu-event-card img {
  width: 100%;
  aspect-ratio: 2.75 / 1;
  height: auto;
  max-width: 100%;
  margin: 0 0 8px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}

/* anime5pa.webpはcoverだと上端の見出し文字・下端の「毎週月曜定期開催」が見切れるため、
   containで全体を収める。この画像は背景が白系の淡いグラデーションのため、余白も白にする
   (sendai.phpと同じ画像・同じ調整) */
body.rifu-page .rifu-event-card img.rifu-event-img-contain-light {
  object-fit: contain;
  background-color: #fff;
}

/* ranking20_bana.webpも実際の画像比率が統一枠(2.75:1)と異なり、coverだと上端・下端の文字が
   見切れるため、containで全体を収める。この画像は黒地に炎のグラデーション背景のため、余白も黒にする
   (sendai.phpと同じ画像・同じ調整) */
body.rifu-page .rifu-event-card img.rifu-event-img-contain-dark {
  object-fit: contain;
  background-color: #000;
}

/* mokuyoutusyo.webp/30honnyuuka.webp/matomeuri.webpは実際の画像比率(709x292≒2.43:1)が
   統一枠(2.75:1)と異なり、いずれも文字・数字がキャンバスいっぱいに配置されたデザインのため、
   coverで上下をわずかにトリミングしただけでも数字や文字が窮屈に見切れて見えてしまう。
   3枚ともcontainに切り替え、全体を余白付きで収める */
body.rifu-page .rifu-event-card img.rifu-event-img-contain-red {
  object-fit: contain;
  background-color: #e2001a;
}

body.rifu-page .rifu-event-card img.rifu-event-img-contain-yellow {
  object-fit: contain;
  background-color: #f9e000;
}

body.rifu-page .rifu-event-card .ibentopp {
  font-size: 12px;
  margin: 0 0 8px;
}

/* フロアガイド：フロア構成が未確定のダミー案であることを示す注記バッジ・注意書き */
body.rifu-page .rifu-dummy-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: #999;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 999px;
  vertical-align: middle;
}

body.rifu-page .rifu-dummy-note {
  background: #f7f7f7;
  border: 1px dashed #ccc;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.8;
  color: #666;
  text-align: left;
  margin: 8px 0 16px;
}

/* ヒーロースライダー画像のライトボックス：クリックした画像を画面いっぱいに拡大表示する */
body.rifu-page .rifu-slide-zoomable {
  cursor: zoom-in;
}

body.rifu-page .rifu-lightbox {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.85);
}

body.rifu-page .rifu-lightbox.is-open {
  display: flex;
}

body.rifu-page .rifu-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.rifu-page .rifu-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: background 0.15s ease;
}

body.rifu-page .rifu-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ヒーロースライダーの実店舗写真：rifu_3.jpgは商品棚が下半分に集中し、上半分は天井・壁の余白のため、
   12:5トリミングで棚が切れて壁ばかり写らないよう、object-positionを下寄せにする */
body.rifu-page .rifu-slide-bottom {
  object-position: center 75%;
}

/* ==========================================================================
   royalhoney.php専用（body.royalhoney-page）
   sendai.php/rifu.phpの「左に画像・右に白カード」のヒーロー骨組みを流用しつつ、
   スライダーではなく単一画像(モバイル用・PC用)をブレークポイントで出し分ける構成にしている。
   ========================================================================== */

/* タブレット幅(767〜959px)専用の不具合修正：sendai.php/rifu.php/tenga.php/kyanpen.phpと同じ既知の不具合。
   グローバルなルールは変更せず、royalhoney-pageに限定してdisplay:blockに戻す */
@media screen and (min-width: 767px) and (max-width: 959px) {
  body.royalhoney-page .contensu-1 {
    display: block;
  }
}

/* 問題提起エリア：ページ最上部の注意喚起バナー */
body.royalhoney-page .royalhoney-problem {
  background: #1a1a1a;
  padding: 28px 16px;
  text-align: center;
}

body.royalhoney-page .royalhoney-problem-inner {
  max-width: 700px;
  margin: 0 auto;
}

body.royalhoney-page .royalhoney-problem h2 {
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 10px;
}

body.royalhoney-page .royalhoney-problem p {
  color: #f5c9c9;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

@media screen and (min-width: 767px) {
  body.royalhoney-page .royalhoney-problem h2 {
    font-size: 26px;
  }

  body.royalhoney-page .royalhoney-problem p {
    font-size: 15px;
  }
}

/* ヒーロー画像：モバイル/PCでの出し分け（旧.heroroi/.heroroiiと同じ考え方を、
   body.royalhoney-page専用クラスとして再実装。他ページに影響しないようスコープしている） */
body.royalhoney-page .royalhoney-hero-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

body.royalhoney-page .royalhoney-hero-img-pc {
  display: none;
}

@media screen and (min-width: 960px) {
  body.royalhoney-page .royalhoney-hero-img-mobile {
    display: none;
  }

  body.royalhoney-page .royalhoney-hero-img-pc {
    display: block;
  }
}

/* 右列（正規販売店の証）：スマホ・タブレット幅では画像の下に通常のブロックとして表示 */
body.royalhoney-page .royalhoney-hero-col {
  width: calc(100% - 48px);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 767px) {
  body.royalhoney-page .royalhoney-hero-col {
    width: calc(100% - 32px);
  }
}

body.royalhoney-page .royalhoney-hero-col .news {
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 「正規販売店の証」リスト（アイコン+ラベルを縦に並べる。rifu.phpの.rifu-info-listと同じ考え方） */
.royalhoney-badge-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.royalhoney-badge-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #eee;
}

.royalhoney-badge-item:last-child {
  border-bottom: none;
}

.royalhoney-badge-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: #fd0202;
  margin-top: 2px;
}

.royalhoney-badge-icon svg {
  width: 100%;
  height: 100%;
}

.royalhoney-badge-text {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}

.royalhoney-badge-text strong {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 2px;
}

@media screen and (min-width: 960px) {

  /* PC幅：ヒーロー画像(左)と正規販売店の証(右)をsendai.php/rifu.phpと同じ骨組みで横並びに。
     上マージンはibent_sain.php/sendai.php/rifu.php/tenga.phpの.xxx-hero-rowと同じ
     margin:4px auto 0(現在地ラベル/直前セクションからの標準的な余白)に統一 */
  body.royalhoney-page .royalhoney-hero-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 1000px;
    margin: 4px auto 0;
  }

  body.royalhoney-page main h2 {
    margin-top: 4px;
  }

  /* royalhoney_topsinpc.webpは実寸4168x3126(縦横比4:3、横長)。
     .bakをalign-items:stretchにし、.heroの高さを固定値ではなく右列(正規販売店の証カード)の
     実際の高さに追従させることで、画像とカードの下端が自然に揃うようにする。
     画像自体はmax-heightで上限(320px)を設け、object-fit:containで
     枠内(カードと同じ高さ)に中央揃えで縮小配置し、見切れを防ぐ */
  body.royalhoney-page .royalhoney-hero-row .bak {
    width: 600px;
    flex: 0 0 600px;
    display: flex;
    align-items: stretch;
  }

  body.royalhoney-page .royalhoney-hero-row .hero {
    margin: 0;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.royalhoney-page .royalhoney-hero-row .hero .royalhoney-hero-img-pc {
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: contain;
  }

  /* PC幅：ファーストビューに収めるため、問題提起エリアの上下余白を詰める
     (タブレット幅・スマホ幅は既存の28px 16pxのまま変更しない) */
  body.royalhoney-page .royalhoney-problem {
    padding: 16px 16px;
  }

  /* PC幅：「正規販売店の証」各項目の余白・行間を少しコンパクトに
     (タブレット幅・スマホ幅は既存のpadding:12px 4px/line-height:1.6のまま変更しない) */
  body.royalhoney-page .royalhoney-badge-item {
    padding: 8px 4px;
  }

  body.royalhoney-page .royalhoney-badge-text {
    line-height: 1.5;
  }

  body.royalhoney-page .royalhoney-hero-col {
    width: 380px;
    flex: 0 0 380px;
    margin: 0;
  }
}

/* 店頭でなら、確実に本物が手に入る：2項目固定のため、タブレット幅以上は.feature-gridの既定4列(PC)/
   3列(タブレット)ではなく常に2列に固定し、余ったセルが左寄せで空いて見えるのを防ぐ */
@media screen and (min-width: 767px) {
  body.royalhoney-page .royalhoney-instore-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 在庫状況・在庫確認エリア：1枚のカードにまとめ、他ページのカード(白背景・角丸・影)と
   統一感を持たせる。中身は「在庫状況」「お問い合わせ導線」の2ブロックを
   区切り線(royalhoney-stock-divider)で視覚的に分けて中央揃えで配置する */
body.royalhoney-page .royalhoney-stock-card {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
  box-sizing: border-box;
}

@media screen and (min-width: 767px) {
  body.royalhoney-page .royalhoney-stock-card {
    padding: 32px 40px;
  }
}

body.royalhoney-page .royalhoney-stock-card-block h3 {
  margin: 0 0 12px;
  text-align: center;
}

body.royalhoney-page .royalhoney-stock-divider {
  margin: 24px 0;
  border: none;
  border-top: 1px solid #eee;
}

/* 現在の在庫状況：シンプルなテキスト表示エリア。店舗側がテキストを書き換えるだけで見た目が整うようにする */
body.royalhoney-page .royalhoney-stock-status {
  display: inline-block;
  margin: 0;
  padding: 8px 24px;
  background: #fff4f4;
  border: 2px solid #fd0202;
  border-radius: 999px;
  color: #fd0202;
  font-size: 16px;
  font-weight: bold;
}

body.royalhoney-page .royalhoney-stock-cta-text {
  margin: 0 0 20px;
  text-align: center;
  color: #333;
  font-size: 14px;
  line-height: 1.7;
}

/* 在庫確認フォーム */
body.royalhoney-page .royalhoney-form-success {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #f0fff4;
  border: 1px solid #8bc79c;
  border-radius: 8px;
  color: #1a6b34;
  font-size: 14px;
  text-align: left;
}

body.royalhoney-page .royalhoney-form-errors {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fff4f4;
  border: 1px solid #f5a9a9;
  border-radius: 8px;
  text-align: left;
}

body.royalhoney-page .royalhoney-form-errors p {
  margin: 0;
  color: #b40000;
  font-size: 13px;
  line-height: 1.6;
}

body.royalhoney-page .royalhoney-form {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

body.royalhoney-page .royalhoney-form-row {
  margin: 0 0 16px;
}

body.royalhoney-page .royalhoney-form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

body.royalhoney-page .royalhoney-form-required {
  margin-left: 4px;
  color: #fd0202;
  font-weight: normal;
  font-size: 12px;
}

body.royalhoney-page .royalhoney-form-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

body.royalhoney-page .royalhoney-form-row input:focus {
  outline: none;
  border-color: #fd0202;
}

body.royalhoney-page .royalhoney-form-submit-area {
  text-align: center;
}

body.royalhoney-page .royalhoney-form-submit {
  all: unset;
  display: inline-block;
  box-sizing: border-box;
  min-width: 200px;
  padding: 12px 32px;
  border-radius: 999px;
  background: #fd0202;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

body.royalhoney-page .royalhoney-form-submit:hover {
  background: #b40000;
}

/* 店舗情報・アクセス：dl(ラベル+値)の見た目を整える */
body.royalhoney-page .royalhoney-info-dl {
  max-width: 480px;
  margin: 0 auto 20px;
  text-align: left;
}

body.royalhoney-page .royalhoney-info-dl dt {
  margin: 14px 0 2px;
  font-size: 13px;
  font-weight: bold;
  color: #fd0202;
}

body.royalhoney-page .royalhoney-info-dl dt:first-child {
  margin-top: 0;
}

body.royalhoney-page .royalhoney-info-dl dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

body.royalhoney-page .royalhoney-info-dl a {
  color: #fd0202;
  font-weight: bold;
}

/* アクセス・地図セクション：ページ下部に大きめに配置するため、共通の.info-map1(HTML属性300x205)を
   このセクションに限り幅いっぱい・高さも大きめに上書きする */
body.royalhoney-page .royalhoney-map-large .info-map1 {
  width: 100%;
  max-width: 100%;
  height: 320px;
}

@media screen and (min-width: 767px) {
  body.royalhoney-page .royalhoney-map-large .info-map1 {
    height: 420px;
  }
}

/* ==============================
   contact.php：専用CSS(otiawase.css)を廃止し、他ページ共通のこのファイルに統合。
   フォーム周りの見た目はroyalhoney.phpの在庫確認フォーム(.royalhoney-form*)と
   同じ考え方(白カード・角丸・赤系アクセント)で統一している
   ============================== */
body.contact-page .contact-section {
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: left;
}

body.contact-page .contact-form-errors {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fff4f4;
  border: 1px solid #f5a9a9;
  border-radius: 8px;
  text-align: left;
}

body.contact-page .contact-form-errors p {
  margin: 0;
  color: #b40000;
  font-size: 13px;
  line-height: 1.6;
}

body.contact-page .contact-form-row {
  margin: 0 0 16px;
}

body.contact-page .contact-form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

body.contact-page .contact-form-required {
  margin-left: 4px;
  color: #fd0202;
  font-weight: normal;
  font-size: 12px;
}

body.contact-page .contact-form-row input,
body.contact-page .contact-form-row select,
body.contact-page .contact-form-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

body.contact-page .contact-form-row textarea {
  resize: vertical;
  min-height: 140px;
}

body.contact-page .contact-form-row input:focus,
body.contact-page .contact-form-row select:focus,
body.contact-page .contact-form-row textarea:focus {
  outline: none;
  border-color: #fd0202;
}

/* ハニーポット：人間には見えない位置に飛ばす（botは見た目に関わらず入力してしまう） */
body.contact-page .contact-form-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

body.contact-page .contact-form-submit-area {
  margin-top: 24px;
  text-align: center;
}

body.contact-page .contact-form-submit-area-double {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.contact-page .contact-form-submit {
  all: unset;
  display: inline-block;
  box-sizing: border-box;
  min-width: 160px;
  padding: 12px 32px;
  border-radius: 999px;
  background: #fd0202;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

body.contact-page .contact-form-submit:hover {
  background: #b40000;
}

body.contact-page .contact-form-submit-secondary {
  background: #999;
}

body.contact-page .contact-form-submit-secondary:hover {
  background: #777;
}

/* 確認画面：お名前・Eメール等をラベル+値の対で表示 */
body.contact-page .contact-confirm-list {
  margin: 0 0 20px;
}

body.contact-page .contact-confirm-list dt {
  margin: 14px 0 2px;
  font-size: 13px;
  font-weight: bold;
  color: #fd0202;
}

body.contact-page .contact-confirm-list dt:first-child {
  margin-top: 0;
}

body.contact-page .contact-confirm-list dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

body.contact-page .contact-confirm-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
}

/* 完了画面 */
body.contact-page .contact-complete-message {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  text-align: center;
}

body.contact-page .contact-complete-details {
  margin: 0 0 8px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.9;
  color: #333;
  text-align: left;
}

body.contact-page .contact-form-submit-link {
  text-decoration: none;
}

@media screen and (min-width: 767px) {
  body.contact-page .contact-section {
    max-width: 480px;
    padding: 32px 40px;
  }
}

/* ==========================================================================
   recruit.php専用（body.recruit-page）
   以前は独自の水色×黄色×赤の配色・独自CSSで完結していたページを、
   他ページ共通の_header.php/_footer.php構成・サイト全体の赤基調トンマナに
   作り直した。フォーム周りはcontact.phpの.contact-form*と同じ考え方
   （白カード・角丸・赤系アクセント）を踏襲している
   ========================================================================== */
body.recruit-page .recruit-badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 20px;
  background: #fd0202;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  border-radius: 999px;
}

body.recruit-page .recruit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

body.recruit-page .recruit-table th {
  background: #fd0202;
  color: #fff;
  padding: 12px 14px;
  width: 30%;
  text-align: left;
  font-weight: bold;
  vertical-align: top;
}

body.recruit-page .recruit-table td {
  background: #fafafa;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  color: #333;
  line-height: 1.7;
}

body.recruit-page .recruit-table tr:last-child td {
  border-bottom: none;
}

/* 「40代・50代・60代も活躍中」の一言：注意喚起の赤枠(.recruit-form-errors)とは
   区別できるよう、塗りつぶしのやわらかいピンク地に赤文字の前向きな見せ方にする */
body.recruit-page .recruit-age-note {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 12px;
  background: #fff0f0;
  color: #b40000;
  font-weight: bold;
  font-size: 13px;
  border-radius: 8px;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  body.recruit-page .recruit-table th,
  body.recruit-page .recruit-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  body.recruit-page .recruit-table th {
    border-bottom: none;
  }
}

body.recruit-page .recruit-job-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

body.recruit-page .recruit-job-list li {
  padding: 12px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 13px;
  color: #333;
  text-align: center;
}

body.recruit-page .recruit-job-list li:last-child {
  grid-column: 1 / -1;
}

/* 募集要項見出し：表であることが伝わるよう、控えめなリストアイコンを添える */
body.recruit-page .recruit-table-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.recruit-page .recruit-table-heading-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: #fd0202;
}

body.recruit-page .recruit-table-heading-icon svg {
  width: 100%;
  height: 100%;
}

/* 1日の流れ見出し：赤塗りのバッジ風にして、表形式の「募集要項」見出しと
   一目で見分けられるようにする */
body.recruit-page .recruit-timeline-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  background: #fd0202;
  color: #fff;
  border-radius: 999px;
  font-size: 18px;
}

body.recruit-page .recruit-timeline-heading-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: #fff;
}

body.recruit-page .recruit-timeline-heading-icon svg {
  width: 100%;
  height: 100%;
}

/* 1日の流れ：テーブル形式の「募集要項」とはっきり区別できるよう、太い縦線と
   大きめの丸マーカー・大きめの時刻フォントでタイムラインらしさを強調する */
/* セクション全体に薄い背景色を敷き、白背景の他セクションと一目で区別できるようにする。
   .content-sectionはbox-sizing:border-boxで.main-topの全幅に広がるため、背景色は
   自然に左右いっぱい(フルブリード)に敷かれる。内側の余白は上下をゆったり確保する */
body.recruit-page .recruit-timeline-section {
  background: #fdf2f2;
  padding: 36px 20px;
}

/* 縦線・マーカー・時刻はページ左端ギリギリではなく、他セクションと同じ読みやすい
   コンテンツ幅に収め、中央寄りにまとめて配置する */
body.recruit-page .recruit-schedule-list {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 4px 0 4px 32px;
  list-style: none;
  border-left: 5px solid #fd0202;
  text-align: left;
}

body.recruit-page .recruit-schedule-list li {
  position: relative;
  margin: 0 0 28px;
}

body.recruit-page .recruit-schedule-list li:last-child {
  margin-bottom: 0;
}

/* 写真付きの項目だけ、時刻・説明文・写真をひとまとめにした白カードとして
   独立させ、タイムラインの主役として目立たせる。縦線・マーカー(::before)は
   li自身のposition:relativeを基準にしたままなので、カード化による影響は受けない。
   写真なし項目(出勤・休憩・閉め作業)は従来通りシンプルな表記のままにして、
   メリハリをつける */
body.recruit-page .recruit-schedule-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

body.recruit-page .recruit-schedule-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

body.recruit-page .recruit-schedule-card .recruit-schedule-time,
body.recruit-page .recruit-schedule-card .recruit-schedule-text {
  display: block;
}

/* 写真付きカードの一言コメント：見出し(.recruit-schedule-text)より小さく、
   下の注記(.recruit-schedule-note)と同じグレーで控えめに添える */
body.recruit-page .recruit-schedule-comment {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #777;
  line-height: 1.6;
}

@media screen and (min-width: 767px) {
  body.recruit-page .recruit-schedule-card {
    flex-direction: row;
    align-items: center;
  }

  body.recruit-page .recruit-schedule-card .recruit-schedule-photo {
    width: 190px;
    height: 143px;
    flex-shrink: 0;
    aspect-ratio: auto;
  }
}

body.recruit-page .recruit-schedule-list li::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 2px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fd0202;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #fd0202;
}

body.recruit-page .recruit-schedule-time {
  display: block;
  margin: 0 0 4px;
  color: #fd0202;
  font-weight: 900;
  font-size: 22px;
}

body.recruit-page .recruit-schedule-text {
  display: block;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

body.recruit-page .recruit-schedule-note {
  max-width: 480px;
  margin: 16px auto 0;
  font-size: 12px;
  color: #777;
  text-align: left;
}

/* 店内の様子：写真+一言キャプションのカード */
body.recruit-page .recruit-photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

body.recruit-page .recruit-photo-item {
  margin: 0;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

body.recruit-page .recruit-photo-item img {
  display: block;
  width: 100%;
  height: auto;
}

body.recruit-page .recruit-photo-item figcaption {
  padding: 10px 12px;
  color: #b40000;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
}

/* スタッフの声：人物写真の代わりに丸いアイコンで代替 */
body.recruit-page .recruit-voice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

body.recruit-page .recruit-voice-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
}

body.recruit-page .recruit-voice-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fd0202;
  color: #fff;
}

body.recruit-page .recruit-voice-icon svg {
  width: 22px;
  height: 22px;
}

body.recruit-page .recruit-voice-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
}

body.recruit-page .recruit-section {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

body.recruit-page .recruit-form-errors {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fff4f4;
  border: 1px solid #f5a9a9;
  border-radius: 8px;
  text-align: left;
}

body.recruit-page .recruit-form-errors p {
  margin: 0;
  color: #b40000;
  font-size: 13px;
  line-height: 1.6;
}

body.recruit-page .recruit-form-row {
  margin: 0 0 16px;
}

body.recruit-page .recruit-form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

body.recruit-page .recruit-form-required {
  margin-left: 4px;
  color: #fd0202;
  font-weight: normal;
  font-size: 12px;
}

body.recruit-page .recruit-form-row input,
body.recruit-page .recruit-form-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

body.recruit-page .recruit-form-row textarea {
  resize: vertical;
  min-height: 120px;
}

body.recruit-page .recruit-form-row input:focus,
body.recruit-page .recruit-form-row textarea:focus {
  outline: none;
  border-color: #fd0202;
}

/* ハニーポット：人間には見えない位置に飛ばす（botは見た目に関わらず入力してしまう）。
   contact.phpの.contact-form-hpと同じ考え方 */
body.recruit-page .recruit-form-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

body.recruit-page .recruit-form-submit-area {
  margin-top: 24px;
  text-align: center;
}

body.recruit-page .recruit-form-submit {
  all: unset;
  box-sizing: border-box;
  display: inline-block;
  min-width: 160px;
  padding: 12px 32px;
  border-radius: 999px;
  background: #fd0202;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

body.recruit-page .recruit-form-submit:hover {
  background: #b40000;
}

body.recruit-page .recruit-form-submit-link {
  text-decoration: none;
}

body.recruit-page .recruit-success-box {
  text-align: center;
}

body.recruit-page .recruit-success-message {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  text-align: center;
}

body.recruit-page .recruit-phone-section {
  text-align: center;
}

/* 不scoped(全ページ共通)の"section p"ルールがmargin/text-align:leftを直接<p>に
   適用してしまい、親のtext-align:centerが打ち消されて左寄せになっていたため、
   ここで明示的に上書きする */
body.recruit-page .recruit-phone-section p {
  margin: 0 0 8px;
  text-align: center;
}

body.recruit-page .recruit-phone-section p:last-child {
  margin-bottom: 0;
}

body.recruit-page .recruit-phone-number {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: bold;
}

body.recruit-page .recruit-phone-number a {
  color: #fd0202;
  text-decoration: none;
}

@media screen and (min-width: 767px) {
  body.recruit-page .recruit-section {
    max-width: 480px;
  }

  body.recruit-page .recruit-job-list {
    grid-template-columns: repeat(3, 1fr);
  }

  body.recruit-page .recruit-job-list li:last-child {
    grid-column: 1 / -1;
  }

  body.recruit-page .recruit-photo-grid,
  body.recruit-page .recruit-voice-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   index.php専用（body.entrance-page）
   サイトの年齢確認前の入口ページ。ロゴ(imag/tenpo_rog.jpg)がもともと黒背景に
   赤・黄のアーチ+白文字のデザインのため、それをそのまま活かした黒基調の
   背景にし、ロゴの赤〜黄のトーンをCTAボタンのグラデーションに引き継いで
   統一感を出している。年齢確認モーダルの構造はtop1.php等と共通(#age-verification/
   js/age-verification.js)だが、見た目だけこのページの黒基調デザインに合わせて
   ここで上書きしている（他ページのモーダルには影響しない）。
   ========================================================================== */
/* 黒の高級感を保ちつつ、サイト全体のメインカラーである赤との一貫性を持たせるため、
   ロゴ付近は黒を保ちつつ、外側にいくほど深い赤みを帯びる背景にしている。
   ロゴボックス・入店ボタンの赤〜オレンジの発光と同系色でなじむよう、
   純粋な赤(#fd0202)よりやや暗めの深紅をベースにした */
body.entrance-page {
  background:
    radial-gradient(ellipse at 50% 32%, #000 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(ellipse at 50% 100%, #4a0000 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #000 0%, #1a0000 55%, #3d0000 100%);
}

body.entrance-page .entrance-screen {
  flex: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 32px 20px;
}

body.entrance-page .entrance-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 320px;
}

body.entrance-page .entrance-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 28px rgba(255, 70, 20, 0.35));
}

body.entrance-page .entrance-enter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fd0202 0%, #ff7a1a 55%, #ffd23f 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 24px rgba(253, 2, 2, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.entrance-page .entrance-enter-btn:hover,
body.entrance-page .entrance-enter-btn:active {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(253, 2, 2, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

/* 年齢確認モーダルの見た目だけをこのページ用に上書き（構造・挙動はstyle.css/js共通のまま） */
body.entrance-page #age-verification {
  background: rgba(0, 0, 0, 0.92);
}

body.entrance-page #age-verification .modal {
  background: linear-gradient(135deg, #0d0d0d 0%, #1c1c1c 100%);
  border: 1px solid rgba(255, 210, 63, 0.25);
}

body.entrance-page #age-verification .modal h2 {
  color: #fff;
  border-bottom: none;
}

body.entrance-page .entrance-age-warning {
  margin: 0 0 16px;
  color: #ff6a5a;
  font-weight: bold;
}

body.entrance-page .entrance-age-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body.entrance-page .entrance-age-btn {
  flex: 1 1 120px;
  margin: 0;
  padding: 12px 16px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

body.entrance-page .entrance-age-btn-yes {
  background: linear-gradient(135deg, #fd0202 0%, #ff7a1a 100%);
  color: #fff;
}

body.entrance-page .entrance-age-btn-no {
  background: #2a2a2a;
  color: #ccc;
}

@media screen and (min-width: 960px) {
  body.entrance-page .entrance-content {
    max-width: 420px;
    gap: 40px;
  }

  body.entrance-page .entrance-enter-btn {
    padding: 18px 24px;
    font-size: 18px;
  }
}

/* ==========================================================================
   ibent_sain.php「MAX特典・MAXカードについて」専用の余白調整
   (body.ibent-sain-page .sain-accordion-max)
   .sain-accordion-body/h4/.sain-accordion-noteはサイト全体のアコーディオンで
   共通利用されているため、このセクションだけに追加した.sain-accordion-max
   クラスでスコープし、他の注意事項・参加条件等のアコーディオンには
   影響しないようにしている。文字サイズ・色・配置は元のまま、余白のみ拡張
   ========================================================================== */
body.ibent-sain-page .sain-accordion-max .sain-accordion-body {
  padding-top: 16px;
  padding-bottom: 32px;
}

body.ibent-sain-page .sain-accordion-max .sain-accordion-body h4 {
  margin-top: 26px;
  margin-bottom: 14px;
}

body.ibent-sain-page .sain-accordion-max .sain-accordion-body h4:first-child {
  margin-top: 0;
}

body.ibent-sain-page .sain-accordion-max .sain-accordion-body > p:first-child {
  margin-bottom: 20px;
}

body.ibent-sain-page .sain-accordion-max p.sain-accordion-note {
  margin: 20px 0;
  padding: 16px 18px;
}