@charset "utf-8";

/* ── menu.css — モニター募集ページ専用 ── */

/* メインビジュアルセクション */
.monitors-hero {
  position: relative;
  text-align: center;
}
.monitors-hero img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
}
.monitors-hero-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-xxl);
  margin: 0 0 8px;
}
.monitors-hero-sub {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  margin: 0;
}

/* 内容セクション */
.monitors-content {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
  text-align: left;
}
.monitors-content p {
  margin-bottom: 24px;
}
.monitors-label {
  font-weight: bold;
}
.monitors-note {
  margin-top: 32px;
}
.monitors-note strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-catch);
}
.monitors-note ul {
  list-style: disc;
  margin: 0;
}
.monitors-note li {
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
}

/* 画像セクション */
.monitors-images {
  display: flex;
  gap: 16px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}
.monitors-images img {
  flex: 1;
  width: calc(50% - 8px);
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .monitors-images {
    flex-direction: column;
  }
  .monitors-images img {
    width: 100%;
  }
}

/* ボタンセクション */
.consult-text {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  margin: 40px 0 16px;
}
.monitors-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 80px;
}
.btn-price,
.btn-contact {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  text-decoration: none;
  border-radius: 4px;
}
.btn-price {
  background-color: var(--color-bg-dark);
  color: #fff;
}
.btn-contact {
  background-color: var(--color-bg-deep-key);
  color: #fff;
}

/*歯科施術メニューページ*/
/* ── menu.css — menuフォルダ内ページ共通 ── */

/* ヒーローセクション */
.menu-hero {
  position: relative;
  margin-top: 60px; /* 固定ヘッダー分の余白 */
}
.menu-hero-bg {
  display: block;
  width: 100%;
  height: auto;
}
.menu-hero-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 20px;
  box-sizing: border-box;
}
.menu-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-xxl);
  color: var(--color-bg-dark);
  margin: 0;
}

/* ボタン群 */
.menu-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.menu-btn {
  display: inline-block;
  background-color: #fff;
  padding: 12px 24px;
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  color: var(--color-bg-dark);
  text-decoration: none;
  transition: background-color 0.3s;
}
.menu-btn:hover {
  background-color: var(--color-bg-mid);
}

/* モバイル：背景画像を消して縦はみ出しを回避 */
@media (max-width: 767px) {
  .menu-hero-bg {
    display: none;
  }
  .menu-hero-inner {
    position: static;
  }
  .menu-buttons{
    gap:10px;
  }
  .menu-btn{
    background-color: var(--color-bg-base);
  }
}

/* ── 料金を見るボタン（汎用） ── */
.btn-wrap{
  text-align: center;
}
.btn-price {
  display: inline-block;
  font-family: var(--font-catch);
  font-size: var(--font-size-md);
  text-decoration: none;
  padding: 12px 32px;
  border-radius: 24px;
  transition: opacity 0.3s;
}
.btn-price:hover {
  opacity: 0.8;
}

/* 歯科用（緑） */
.btn-price--dental {
  background-color: var(--color-bg-mid);
  color: #000;
}

/* 医科用（ピンク） */
.btn-price--medical {
  background-color: var(--color-bg-deep-key);
  color: #000;
}

/* 料金ボタン（黒） */
.btn-price--black {
  background-color: #000;
  color: #fff;
}

/* =========================
   gross（グロスべニア）ページ
   ========================= */
#gross .wrapper{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ヒーロー */
.gross-hero{
  position: relative;
  margin-top: 60px; /* 固定ヘッダー分 */
}
.gross-hero__img{
  display: block;
  width: 100%;
  height: auto;
}

/* 見出し */
#gross .section-heading_dental{
  text-align: center;
  margin: 40px 0 24px;
}

/* フレックス（左画像 / 右テキスト） */
.gross-flex{
  display: flex;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;          /* モバイルで縦積み */
  margin-top: 8px;
}
.gross-img{
  width: 100%;
  max-width: 360px;
  object-fit: cover;
}
.gross-text{
  flex: 1 1 320px;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--lh-loose);
}

/* モバイル最適化 */
@media (max-width: 767px){
  #gross .section-heading_dental{
    text-align: center;
  }
  .gross-flex{
    gap: 24px;
    justify-content: center;
  }
  .gross-img{
    max-width: 320px;
  }
}

/* ── グロスべニア：メリット ── */
#gross-merits {
  padding: 60px 20px;
  background: #fff; /* セクション自体は白、カードがピンク */
}
#gross-merits .wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

#gross-merits .title-jp {
  text-align: center;
  margin-bottom: 24px;
}

#gross-merits .merit-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: var(--color-bg-light-key);
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 16px;
}

#gross-merits .merit-icon img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

#gross-merits .merit-text {
  flex: 1;
}

#gross-merits .merit-title {
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  margin: 0 0 8px;
}

#gross-merits .merit-list {
  margin: 0;
  padding-left: 1.2em;
}
#gross-merits .merit-list li {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--lh-loose);
  list-style: "・ ";
  margin-bottom: 4px;
}

/* モバイル */
@media (max-width: 767px) {
  #gross-merits .merit-card {
    flex-direction: column;
    gap: 12px;
  }
  #gross-merits .merit-icon img {
    width: 64px;
    height: 64px;
  }
}

/* ── ラミネートべニア ── */
#laminate {
  background: #fff;
  padding: 60px 20px;
}
#laminate .wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* 上部の右寄せバッジ */
#laminate .laminate-badge {
  text-align: right;
  margin-bottom: 16px;
}
#laminate .laminate-badge img {
  width: 220px;
  height: auto;
}

/* 左画像 × 右テキスト */
#laminate .laminate-flex {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 24px;
  flex-wrap: wrap; /* 画像が大きい場合の崩れ防止 */
}
#laminate .laminate-photo img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}
#laminate .laminate-text {
  flex: 1 1 340px;
}

#laminate .laminate-h3 {
  font-family: var(--font-catch);
  font-size: var(--font-size-lg);
  margin: 0 0 8px;
}

/* モバイル */
@media (max-width: 767px) {
  #laminate .laminate-badge img {
    width: 180px;
  }
  #laminate .laminate-flex {
    flex-direction: column;
    gap: 16px;
  }
  #laminate .laminate-photo img {
    max-width: 100%;
  }
}