@charset "UTF-8";
/* ============================================================
   商材ページ共通スタイル（gaikan / naikan / walkt / web_vr）
   20260731：4ページの <style> に重複していた内容を統合し、
             HTML の style="" 直書きもここへ移設
   main.css の後に読み込むこと（:root の共通変数を参照するため）
   ※ .font_16 は main.css に同一定義があるため持たない
   ============================================================ */

HR {
  border: 1px dotted var(--border_color);
}

/* メイン画像（gaikan / naikan で使用） */
.image-box {
  margin-top: 0;
  text-align: center;
}

.image-box img {
  height: 554px;
  width: 784px;
}

/* ページ内の横並びブロック（walkt / web_vr）
   外枠の .flex-box は main.css の .contents-frame > .flex-box で打ち消し済み */
.flex-box {
  display: flex;
  gap: 0 20px;
  margin-top: 30px;
}

/* 他ページへの導線ボタン */
.otherButton {
  background: var(--accent_pink);
  border-radius: 5px;
  color: var(--base_white);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  min-width: 120px;
}

.otherButton:hover {
  opacity: .7;
}

.otherButton--fixed {
  background-color: var(--accent_yellow);
}

/* 画像の表示調整 */
.img-fill {
  object-fit: fill;
}

.img-cover {
  object-fit: cover;
}

.img-full {
  width: 100%;
}

/* walkt：制作フロー図 */
.img-flow {
  display: block;
  margin-inline: auto;
  margin-top: 30px;
  width: 90%;
}

/* 見出し・汎用 */
.font_23 {
  font-size: 23px;
}

.mt-20 {
  margin-top: 20px;
}

/* walkt：サンプル画像上の見出し。
   main.css の .s_img_w .alpha a .text（30px／詳細度0,3,1）と
   .s_img_w .alpha a .text .middle（18px／0,4,1）に負けるため詳細度を上げる */
.s_img_w .alpha a .text.font_23 {
  font-size: 23px;
}

.s_img_w .alpha a .text .middle.font_16 {
  font-size: 16px;
}