/* ======================================================================
   整理版 CSS : landing-base.cleaned.css
   生成日: 2025-09-06
   方針:
     - 重複/競合する宣言の整理
     - セレクタの誤記疑いのコメントアウト
     - メニュー/フッター周りの定義を簡素化（機能は同等）
   備考:
     - 本ファイルは元の landing-base.css をベースに、可読性向上を目的に調整しています。
     - 機能差異が出た場合は該当箇所のコメントを参照し、元ファイルの値に戻してください。
   ====================================================================== */

@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Yomogi&display=swap');

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url('slide.css');
@import url('inview.css');

/*btm　ボタンのスタイル
---------------------------------------------------------------------------*/
/* 重複のため無効化（v6読込あり）: $0 */

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
  --primary-color: #593100; /* 元は#827C75テンプレートのメインまたはアクセントカラー*/
  --primary-inverse-color: #fff; /*上のprimary-colorの対となる色*/

  --space-large: 8vw; /*主に余白の一括管理用。画面幅100%＝100vwです。*/
  --space-small: 2vw; /*主に余白の一括管理用。画面幅100%＝100vwです。*/
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}

html,
body {
  font-size: 13px; /*基準となるフォントサイズ*/
  height: 100%;
}

/*画面幅1200px以上の追加指定*/
@media screen and (min-width: 1200px) {
  html,
  body {
    font-size: 14px;
  }
} /*追加指定ここまで*/

/*画面幅1600px以上の追加指定*/
@media screen and (min-width: 1600px) {
  html,
  body {
    font-size: 1vw;
  }
} /*追加指定ここまで*/

body {
  margin: 0;
  padding: 0;
  font-family:
    'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック',
    'MS PGothic', sans-serif; /*フォント種類*/
  -webkit-text-size-adjust: none;
  background: #fff; /*背景色*/
  color: var(--primary-color); /*文字色。冒頭で指定しているprimary-colorを読み込みます。*/
  line-height: 2; /*行間*/
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
  overflow-x: visible;
  overflow-y: visible;
}

.main,
.wrapper,
.container {
  overflow: visible;
}

/*リセット他*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}
nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}
section li {
  margin-left: 0.5rem;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*input*/
input {
  font-size: 1rem;
}

/*section*/
section {
  overflow-x: hidden;
  padding: var(--space-large);
}

.section-table {
  overflow-x: hidden;
  padding-left: var(--space-small);
  padding-right: var(--space-small);
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
  text-decoration: none; /*下線を消す*/
  opacity: 0.9; /*色を90%だけ出す*/
}

/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap; /* 画面が狭くなったときに折り返しを防ぐ */
  gap: 2rem;
  min-height: 120px;
}

/* 疑義あり：セレクタ誤りの可能性（header 内に header?）。
body.home header:not(.home) header {
  margin-bottom: var(--space-large);
}
*/

/* ───────────────────────────────
   マジックギャラリーのロゴ画像
   ─────────────────────────────── */
.logo {
  position: relative;
  top: 10px;
  left: 50px;
  z-index: 10;
  max-height: 100px;
  height: auto;
  margin-bottom: 0.5rem;
  margin-right: auto;
  flex-shrink: 0;
}

.logo img {
  max-width: 100%;
  height: auto;
  width: clamp(200px, 40vw, 700px); /* 画面サイズに応じてロゴを縮小 */
}

/* ───────────────────────────────
   画面幅500px以下の追加指定
   ─────────────────────────────── */
@media screen and (max-width: 500px) {
  /* ギャラリーロゴを小さく・上揃え */
  .logo {
    top: 0;
    width: 60px;
  }
}

/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  /* ↑ 重複していた display / justify-content / gap を整理 */
}

header nav li {
  position: relative;
  flex: 0 1 auto;
  text-align: left;
}

header nav li a {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  white-space: nowrap; /* 折り返し防止 */
}

nav {
  margin-left: auto;
  padding-right: 2vw;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*メニューブロック全体の設定*/
  header > nav > ul {
    display: flex; /*横並びにする*/
  }

  /*メニュー１個あたりの設定*/
  header nav li a {
    display: block;
    text-decoration: none;
    font-size: 0.9rem; /*文字サイズ90%*/
    padding: 0.5rem 1rem; /*メニュー内の余白。上下、左右へ。*/
  }

  /*ドロップダウンメニュー冒頭の矢印アイコン*/
  header nav i {
    padding-right: 0.5rem; /*右に空ける余白*/
  }
} /*追加設定ここまで*/

/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
  animation: opa1 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}

/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
  position: absolute;
  z-index: 100;
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
  background: rgba(255, 255, 255, 0.8); /*背景色。255,255,255は白のことで0.8は色が80%出た状態。*/
  padding: 0.3em 1em; /*上下、左右へのメニュー内の余白*/
  margin-top: 4px; /*上に空けるスペース。ドロップダウン同士の隙間。*/
  border: 1px solid var(--primary-color); /*枠線の幅、線種、varは色の指定で冒頭のparimary-colorを読み込みます。*/
}

/*ヘッダーのカウンタ*/
/* トップページかつPCサイズのときだけ表示 */
body.top .visitor-counter {
  display: block;
}

.site-header {
  display: flex;
  justify-content: space-between; /* 左にロゴ、中央にナビ、右にカウンタ */
  align-items: flex-end; /* 全アイテムを下端揃え */
  padding: 1rem 2rem;
  position: relative;
}

/* ナビを中央寄せしたければ flex:1 を与えてもOK */
.site-header nav {
  flex: 1; /* ナビ領域を残りスペースいっぱいに */
  margin: 0 1rem; /* ロゴ／カウンタとの余白 */
}

/* カウンタは右寄せ、下端に */
.visitor-counter {
  align-self: flex-end; /* 下端揃えはそのまま */
  margin-left: auto; /* これで右端まで要素を押し出す */
  margin-bottom: 13px; /* 下の余白だけ 13px */
  /* margin-top や margin-right は必要に応じて */
}

/* アイコンと数字要素は inline-block でも OK */
.visitor-counter i,
.visitor-counter span {
  display: inline-block;
}

/* デフォルトでは非表示にする */
.visitor-counter {
  display: none;
}

/* カウンタはモバイルでは非表示に */
@media screen and (max-width: 767px) {
  .visitor-counter {
    display: none;
  }
}

/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {
  display: none;
}
#menubar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menubar a {
  display: block;
  text-decoration: none;
}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {
  display: block;
}
.small-screen #menubar.display-block {
  display: block;
}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {
  display: none;
}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {
  display: none;
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
  font-family: 'Font Awesome 6 Free'; /*Font Awesomeを使う指示*/
  content: '\f078'; /*使いたいアイコン名（Font Awesome）をここで指定*/
  font-weight: bold; /*この手の設定がないとアイコンが出ない場合があります*/
  margin-right: 0.5em; /*アイコンとテキストとの間に空けるスペース*/
}

/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
  0% {
    right: -100vw;
  }
  100% {
    right: 0px;
  }
}

/*メニューブロック設定 共通スタイル（ベース） */
.small-screen #menubar.display-block {
  position: fixed;
  overflow: auto;
  z-index: 100;
  right: 0;
  top: 0;
  max-width: 800px;
  height: 100%;
  padding: 90px 10vw 50px;
  background: var(--primary-color);
  color: var(--primary-inverse-color);
  animation: animation1 0.2s both;
}

/* ともの会NEO専用背景色 */
.page-neo.small-screen #menubar.display-block {
  background: #0c6e90;
}

/*子メニューの設定*/
.small-screen #menubar ul ul {
  margin: 1rem;
  width: calc(100% - 2rem); /* 幅を「親の100% - 左右のmargin(計2rem)」に自動計算 */
  box-sizing: border-box;
}

/*メニュー１個あたりの設定*/
.small-screen #menubar nav ul li {
  border: 1px solid #fff; /*枠線の幅、線種、色。*/
  margin: 1rem 0; /*メニューの外側に空けるスペース。上下、左右への順番。*/
  border-radius: 5px; /*角を丸くする指定*/
}

.small-screen #menubar nav > ul {
  display: flex;
  flex-direction: column; /* この指定で項目を縦に並べます */
  padding-left: 0; /* ulが元々持っている左の余白をリセット */
  list-style: none; /* ulが元々持っている行頭の黒丸をリセット */
}

.small-screen #menubar a {
  color: inherit;
  padding: 1rem 2rem; /*メニュー内の余白。上下、左右へ。*/
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/

#menubar_hdr {
  display: inline-flex; /* ← ここが大事：gapを有効化 */
  flex-direction: column; /* ラベルを“下”に出すなら column。横並びにしたいなら row に変更 */
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 29px;
  right: 50px;
  padding: 10px 12px;
  background: #fff;
  color: #250d00;
  border: 1px solid #250d00;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 1000;
  user-select: none;
}

/* 三本線：縦に3本並べる */
#menubar_hdr .hambars {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 棒同士の間隔 */
}
#menubar_hdr .hambars i {
  display: block;
  width: 40px;
  height: 3px;
  background: #583822;
}

/* ラベル */
#menubar_hdr .label {
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ゆうきともオンライン：茶系（赤みのあるブラウン） */
body.home.page-yuki #menubar_hdr {
  background-color: #ffffff;
  color: #74325c;
  border: 1px solid #814811;
}

body.home.page-yuki #menubar_hdr .hambars i {
  background: #814811;
  color: #814811;
}

body.home.page-yuki #menubar_hdr .label {
  color: #74325c;
  padding: 4px 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ともの会NEO：濃いブルー系 */
body.home.page-neo #menubar_hdr {
  background-color: #ffffff;
  color: #007199;
  border: 1px solid #007199;
}

body.home.page-neo #menubar_hdr .hambars i {
  background: #007199;
  color: #007199;
}

body.home.page-neo #menubar_hdr .label {
  color: #007199;
  padding: 4px 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ========== Mobile Menu ========== */
#menubar-s {
  display: none;
  background: linear-gradient(#250d00, #543f32);
}
#menubar-s.is-open {
  display: block;
}
#menubar-s ul {
  padding: 6px 0;
}
#menubar-s li a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
#menubar-s li a span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}

/* ========== Responsive Tweaks ========== */

/* 800–1000px：ボタン位置を少し上げる＆ややコンパクトに */
@media (min-width: 800px) and (max-width: 1000px) {
  #menubar_hdr {
    top: clamp(14px, 1.6vw, 22px);
    right: calc(env(safe-area-inset-right, 0px) + clamp(16px, 5vw, 36px));
    padding: 8px 10px;
    transform: translateY(-4px);
  }
}

@media (max-width: 799.98px) {
  #menubar_hdr {
    top: clamp(6px, 1.6vw, 10px);
    right: clamp(16px, 5vw, 36px);
    padding: clamp(8px, 1.8vw, 10px) clamp(10px, 2.4vw, 12px);
    font-size: clamp(13px, 3.2vw, 14px);
  }
}

@media (min-width: 465px) and (max-width: 600px) {
  #menubar_hdr {
    padding: 5px 8px; /* 値を調整してください */
  }
}

@media (max-width: 465px) {
  #menubar_hdr {
    padding: 6px 8px;
  }
  #menubar_hdr .label {
    font-size: clamp(12px, 3.2vw, 13px);
    /* margin-left: 4px;  ← gapで十分なので削除 */
  }
}

/* 画面1280以上で三本線を隠す */
@media (min-width: 1280px) {
  #menubar_hdr {
    display: none;
  }
}

/*画面右側の側面にある縦長ボタン（ご予約）
---------------------------------------------------------------------------*/
#btn-special {
  padding: 0;
  margin: 0;
}
#btn-special a {
  display: block;
  text-decoration: none;
  position: fixed;
  z-index: 100;
  right: 0px; /*右からの配置場所*/
  top: 20vw; /*上からの配置場所*/
  writing-mode: vertical-rl;
  text-orientation: upright;
  /*background: linear-gradient(#906f53, #6b5038);背景グラデーション*/
  background: linear-gradient(#ec9347, #d36b12);
  color: #f6ebd2; /*文字色*/
  padding: 2rem 1rem; /*上下、左右へのボタン内の余白*/
  border-radius: 3px 0px 0px 3px; /*角を丸くする指示。左上、右上、右下、左下への順番。*/
  letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
}

/*アイコンの下の余白*/
#btn-special i {
  padding-bottom: 1rem;
}

/*パンくずリスト
---------------------------------------------------------------------------*/
/* パンくずリストの基本スタイル */

/* ===== Breadcrumb（パンくず）レスポンシブ最適化 ===== */
/* コンテナ：左右余白は本文と同等。背景は必要ならON */
nav[aria-label='breadcrumb'] {
  /* 本文の左右余白に合わせる（なければ clamp を使用） */
  padding-inline: var(--content-pad, clamp(12px, 4vw, 24px));
  margin: clamp(8px, 2vw, 16px) 0;
  background: transparent; /* ← 以前の #fff は不要なら外す */
  border-radius: 0; /* 背景を使うなら 5px に戻してOK */
  color: #666;
  font-size: clamp(12px, 2.8vw, 14px);
}

/* リスト本体：1行横スクロール（スマホでスワイプ可能） */
nav[aria-label='breadcrumb'] ol {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding-left: 2rem;
  margin: 0;
  white-space: nowrap; /* 1行維持 */
  overflow-x: auto; /* はみ出したら横スクロール */
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

/* 区切りは “後ろ” ではなく “前” に付ける（最後の処理が要らない） */
nav[aria-label='breadcrumb'] li + li::before {
  content: '›';
  color: #bbb;
  margin-inline: 0.5rem;
}

/* リンク／現在地 */
nav[aria-label='breadcrumb'] a {
  text-decoration: none;
  color: #74325c;
  font-weight: 600; /* 太字を少し控えめに */
}
nav[aria-label='breadcrumb'] a:hover {
  color: #541532;
  text-decoration: underline;
}
nav[aria-label='breadcrumb'] a:focus-visible {
  outline: 2px solid #3fb4ce;
  outline-offset: 2px;
  border-radius: 3px;
}

/* 現在地（リンクにしない or aria-current="page" の要素） */
nav[aria-label='breadcrumb'] [aria-current='page'] {
  color: #999;
}

/* スマホ表示（〜800px）：背景ボックスをOLに付与、サイズ微調整 */
@media (max-width: 800px) {
  nav[aria-label='breadcrumb'] ol {
    font-size: 12px;
    padding: 6px 8px;
    background: #f8f8f8;
    border-radius: 5px;
  }
}

/* 極小（〜400px）：中間を省略して “HOME › … › 現在地” に簡略化（任意） */
@media (max-width: 400px) {
  nav[aria-label='breadcrumb'] ol li:not(:first-child):not(:last-child) {
    display: none;
  }
  nav[aria-label='breadcrumb'] ol li:first-child::after {
    content: '…';
    color: #bbb;
    margin-inline: 0.5rem;
  }
}

/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
main {
  flex: 1 0 auto;
  overflow-x: hidden;
  padding-top: clamp(0px, 12vw, 250px);
}

/*h2見出し（共通）*/
main h2 {
  margin: 0;
  padding: 0 0 50px 0;
  font-size: 2rem; /*文字サイズ。240%。*/
  font-weight: normal; /*h要素のデフォルトの太字を標準に*/
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

main h2.c {
  align-items: center; /*見出しをセンタリングする場合*/
}

main h2.c > span {
  display: inline-block;
}

main h2.c .pink {
  color: #ff5f94;
}

/* 2段で若干小さな上のh2 */
main h2.d {
  align-items: center; /*見出しをセンタリングする場合*/
  font-size: 1.8rem; /* 文字サイズを小さく */
  padding: 0;
}

/*h2見出しのサブテキスト（sub-text）*/
main h2 span.sub-text {
  display: inline-block;
  border-top: 1px solid var(--primary-color); /*上の線の幅、線種、varは色のことで冒頭のprimary-colorを読み込みます。*/
  font-size: 0.9rem; /*文字サイズ80%*/
  opacity: 0.6; /*透明度。色が60%出た状態。*/
  letter-spacing: 0.1rem; /*文字間隔を少しだけ広く*/
  padding-top: 2rem; /*上に空ける余白。ラインとの間の余白調整です。お好みで。*/
}

/*見出し上のラインを消すスタイル*/
main h2.no-line span.sub-text {
  border: none;
  padding-top: 0;
}

/*h3見出し（共通）*/
/* 共通 */
main h3 {
  font-weight: 600;
  color: #b76619;
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  line-height: 1.55;
  text-wrap: balance;
  line-break: strict;
  max-inline-size: 32ch;
  margin: 20px auto;
}

/* balance 非対応ブラウザ用のフォールバック */
@supports not (text-wrap: balance) {
  main h3 {
    max-inline-size: 32ch;
  }
}

/* 割りたくない語句用ユーティリティ */
.nb {
  white-space: nowrap;
  word-break: normal;
}

/* 個別スタイル（.a クラス） */
main h3.a {
  padding: 0;
  margin: 0 auto 20px auto; /* ← 中央寄せに修正 */
}

@media (max-width: 600px) {
  main h2 {
    padding: 0 0 20px 0; /*小さい画面では間を狭める*/
  }
}

@media (max-width: 375px) {
  main h2 {
    font-size: 1.8rem;
  }

  main h2.d {
    font-size: 1.6rem;
  }
}

/*フッター設定
---------------------------------------------------------------------------*/
/* フッターを固定表示 */

/* 固定フッター本体 */
/* フッターは常に表示。ボタンは期間中だけ見せる */
.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #814811;
  color: #fff;
  z-index: 1000;
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column; /* ボタンの下に注意書きが来る */
  align-items: center;
  gap: 6px;
}

.apply-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ボタンのスタイル */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.btn,
a.btn,
button.btn {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.4rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn-wrap {
  margin: 10px 0 5px;
}

a.btn-c {
  font-size: 1.2rem;
  position: relative;
  padding: 0rem 1.5rem 0.4rem 2rem;
  color: #fff;
  background: #3fb4ce;
  box-shadow: 0 5px 0 #01749e;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
}

/* ボタンのラッパーを中央配置 */
.btn-wrap {
  display: flex;
  justify-content: center;
}

a.btn-c span {
  font-size: 0.7rem;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  padding: 0.2rem 0;
  color: #023061;
  border: 2px solid #01749e;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  text-shadow: none;
}

a.btn-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #fff;
  background: #69dffa;
  box-shadow: 0 2px 0 #01749e;
}

a.btn-c:hover:before {
  left: 2rem;
}

/*h4見出し（CompanyとFollow Usのテキスト部分*/
footer h4 {
  font-weight: 200; /*太さを細くする*/
  font-size: 1.2rem; /*文字サイズを120%*/
}

/* モバイルでは縦並び＋ボタンを横幅いっぱいに */
@media (max-width: 600px) {
  .fixed-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  #footer-apply-btn {
    width: 75%;
  }

  a.btn-c {
    padding: 0rem 0.5rem 0.4rem 0.5rem;
  }
  .apply-period {
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
  }
}

@media (max-width: 400px) {
  a.btn-c {
    font-size: 1rem;
  }
}

/* オンライン用フッター設定　ボタンは初期は隠す → 期間中にだけ表示 */
/* 統合: 初期は非表示、show-apply で flex 表示（下方の定義を使用） */

/* ボタンのリンクが見やすく・押しやすくなるように */
.fixed-footer a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

/*フッターの申込期間注意書き*/
.fixed-footer .apply-period {
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  padding: 0;
}

.fixed-footer {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* 期間外の見た目（薄く・クリック不可・下線なし・フォーカスも無効風） */
#menubar a.is-disabled,
#menubar-s a.is-disabled,
nav a.is-disabled,
nav ul li a.is-disabled,
nav li a.is-disabled,
a.is-disabled:link,
a.is-disabled:visited,
a.is-disabled:hover,
a.is-disabled:active,
a.is-disabled:focus,
a.is-disabled:focus-visible,
a[aria-disabled='true'] {
  pointer-events: none;
  padding-top: 15px;
  cursor: default;
  text-decoration: none;
  outline: none; /* フォーカス枠を消したい場合 */
  color: #999;
}
/* 常に中央に来るよう、親はフレックスを強制 */
.fixed-footer .btn-wrap {
  display: none;
  justify-content: center;
  width: 100%;
}

/* 期間中だけ表示 */
.fixed-footer.show-apply .btn-wrap {
  display: flex;
}

/* アンカーはブロック化＋autoマージンで自己完結型の中央寄せ */
#footer-apply-btn {
  display: block !important; /* ← inline-block を上書き */
  margin-inline: auto !important; /* 親がflexでなくても中央寄せできる保険 */
}

/* スマホ時の幅指定はそのまま活かしつつ、中央寄せを確実に */
@media (max-width: 600px) {
  #footer-apply-btn {
    width: 75%;
    /* 幅を端末に合わせて可変にしたいなら ↓ でもOK
       width: clamp(240px, 75vw, 520px);
    */
  }
}

/* NEOページでは常にボタン表示＆色変更 */
.neo-footer {
  background: #01204d;
  color: #fff;
}

.neo-footer .btn-wrap {
  display: flex !important; /* ← 常に表示 */
}

.neo-footer .apply-period {
  display: none; /* ← 注意書きが不要なら非表示に */
}

/*（コンテンツの紹介「box1はオンライン」「box2はNEO」）
---------------------------------------------------------------------------*/

/* box1 ボックス全体 */
.box1 {
  overflow: visible;
  position: relative;
  background: #f5f4ec;
  text-align: center;
  z-index: 1;
  margin-top: clamp(60px, 10vw, 200px);
  padding: clamp(12px, 4vw, 30px) 0;
}

/* box2 ボックス全体 */
.box2 {
  overflow: visible;
  position: relative;
  background: #f5f4ec;
  text-align: center;
  z-index: 1;
  margin-top: clamp(60px, 10vw, 200px);
  padding: clamp(60px, 13vw, 216px) var(--space-large);
}

/* ボックス上部の大きな装飾テキスト */
.box1 .deco-text,
.box2 .deco-text {
  position: absolute;
  right: 100px;
  top: -8vw;
  color: #008000;
  font-size: 3vw;
  line-height: 1.5;
}

/* テキストボックス */
.box1 .text,
.box2 .text {
  margin-bottom: 3rem;
}

.box1 p,
.box2 p {
  font-size: clamp(1.2rem, 2.2vw, 1.3rem);
  line-height: 2;
  padding: 0 clamp(0.1rem, 12vw, 250px);
  text-align: left;
}

@media screen and (max-width: 600px) {
  .box1 p,
  .box2 p {
    padding: 0 1rem;
  }
}

/* オンライン用の追加指定 */
.box1 .content-container,
.box2 .content-container {
  display: flex;
  flex-direction: row;
}

.box1 > *,
.box2 > * {
  flex: 1;
}

/* 画面幅600px以上の追加指定 */
@media screen and (min-width: 600px) {
  .box1,
  .box2 {
    display: block;
    gap: 2rem;
    border-radius: 20vw 0 20vw 0;
  }

  .box1 .text,
  .box2 .text {
    margin-bottom: 3rem;
  }

  .box1 .image img,
  .box2 .image img {
    max-width: 80%;
  }

  .box1 > *,
  .box2 > * {
    flex: 1;
  }
}

/* 画像を囲むブロック */
.box1 .image,
.box2 .image {
  margin-bottom: 2rem;
}

.box1 .description,
.box2 .description {
  max-width: 90%;
  text-align: left;
}

/* 画像の角を少し丸くする指定 */
.box1 .image img,
.box2 .image img {
  border-radius: 10px;
  max-width: 500px;
  height: auto;
}

/* 画像ブロック内の1枚目の写真 */
.box1 .image img:nth-of-type(1),
.box2 .image img:nth-of-type(1) {
  width: 95%;
}

/* 画像ブロック内の2枚目の写真 */
.box1 .image img:nth-of-type(2),
.box2 .image img:nth-of-type(2) {
  width: 40%;
  position: absolute;
  right: 0;
  top: 15vw;
}

/* アンカー位置調整 */
h4[id]::before {
  content: '';
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}

/*文字装飾
---------------------------------------------------------------------------*/
/* 水色アンダーライン */
.underline {
  background: linear-gradient(transparent 70%, #cff2ff 60%);
}

/* 文字を大きくする */
.big {
  font-size: clamp(1.5rem, 5vw, 2.2rem); /* スマホでは1.5rem、PCでは最大2.2remに */
  font-weight: bold;
  line-height: 1.4;
}

/*点線アンダーライン*/
.dottedline {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: #6594e0;
  text-decoration-thickness: 3px; /* 太さ。4px だとドットが潰れやすいので3px推奨 */
  text-underline-offset: 0.4em; /* 文字からの距離 */
  text-decoration-skip-ink: auto; /* j や g の“はね”を綺麗に処理 */
  line-break: strict;
  word-break: keep-all;
}

/* 折返し制御（必要なら） */
.nowrap {
  white-space: nowrap;
}

/* ピンク色を優先させるために以下を追加 */
.dottedline .pink {
  color: #ff5f94 !important; /* !importantで強制的にピンク色を適用 */
  position: relative;
  z-index: 1;
}

.colorful-underline {
  background: linear-gradient(90deg, #3cc79c54 0%, #77aae954 100%);
  padding-inline: 5px;
  margin-inline: 3px;
  font-weight: 650;
}

/*続きをよむボタンの設定
---------------------------------------------------------------------------*/
.rm_box1 {
  position: relative;
}
.rm_box1 input {
  display: none;
}
.rm_box1 label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: 50px;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%);
}
.rm_box1 input:checked + label {
  background: none;
}
.rm_box1 .rm_container {
  overflow: hidden;
  height: 150px; /* 適切な高さに調整してください */
  transition: all 0.5s;
}
.rm_box1 label:after {
  content: '続きを読む';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  background: #f0f0f0;
  padding: 5px 10px;
  border-radius: 5px;
}
.rm_box1 input:checked + label:after {
  content: '閉じる';
}
.rm_box1 input:checked ~ .rm_container {
  height: auto;
}

/*NEWアイコン
---------------------------------------------------------------------------*/
.newicon {
  text-shadow: none;
  background: #f00; /*背景色*/
  color: #fff; /*文字色*/
  font-size: 80%;
  line-height: 1.5;
  padding: 1px 4px;
  border-radius: 2px;
  margin: 0px 5px;
  vertical-align: text-top;
}

/*ボタン
---------------------------------------------------------------------------*/
/*btn1、btn2共通*/
.btn1 a,
.btn2 a {
  display: block;
  text-decoration: none;
  padding: 0.8rem 2rem; /*上下、左右へのボタン内の余白*/
  margin-top: 2rem; /*ボタンの上に2文字分のスペースを空ける*/
  text-align: center; /*テキストをセンタリング*/
  letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); /*ボタンの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.1は色が10%出た状態*/
}
/*マウスオン時（btn1、btn2共通）*/
.btn1 a:hover,
.btn2 a:hover {
  letter-spacing: 0.2rem; /*文字間隔を少し広げる*/
  box-shadow: none; /*ボタンの影を消す*/
}

/*btn1への追加設定*/
.btn1 a {
  color: var(--primary-color); /*文字色。冒頭のprimary-colorを読み込みます。*/
  background: var(--primary-inverse-color); /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*btn2への追加設定*/
.btn2 a {
  color: #fff; /*文字色*/
  border: 1px solid #fff; /*枠線の幅、線種、色*/
}

/*btn3*/
.btn3 {
  text-align: right; /*テキストを右寄せ*/
  letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
}
.btn3 a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding-right: 5rem; /*矢印のアイコンと重ならないように余白をとる*/
}

/*btn3の矢印のアイコン設定*/
.btn3 a::after {
  content: '';
  background: url('../images/arrow1.svg') no-repeat right center / 100px; /*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
  display: block;
  position: absolute;
  right: 0px;
  bottom: -1rem; /*下からの配置場所*/
  width: 50px; /*アイコンの幅。ここを変更する場合は、上と下にあるbackgroundの100pxの数値も調整します。*/
  height: 50px; /*アイコンの高さ*/
  border-radius: 50%; /*円形にする指定。この１行を削除すれば正方形になります。*/
  text-align: center;
  transition: 0.3s; /*hover時に切り替えをなめらかにする*/
  border: 1px solid var(--primary-color); /*枠線の幅、線種、色*/
}

/*btn3の矢印のマウスオン時*/
.btn3 a:hover::after {
  background-color: var(--primary-color); /*背景色を冒頭のprimary-colorにする*/
  background-position: left center; /*矢印画像の入れ替え。画像の左側を読み込みます。*/
}

/*背景色が暗い所で使う場合*/
.btn3.white {
  color: #fff; /*文字色*/
}
.btn3.white a::after {
  background: url('../images/arrow1_white.svg') no-repeat right center / 100px; /*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
  border: 1px solid #fff; /*枠線の幅、線種、色*/
}
.btn3.white a:hover::after {
  background-color: #fff; /*背景色を白に*/
  background-position: left center; /*矢印画像の入れ替え。画像の左側を読み込みます。*/
}

/* ページトップ設定
---------------------------------------------------------------------------*/
/* アニメーションのキーフレーム設定（変更不要） */
@keyframes scroll {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* デフォルトでは非表示に */
body .nav-fix-pos-pagetop a {
  display: none;
}

/* ボタンの設定 */
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 1001;
  position: fixed;
  width: 50px; /* 幅 */
  height: 70px; /* 高さ */
  bottom: 50px; /* 下から50pxの場所に配置 */
  right: 10%; /* 右から10%の場所に配置 */
  background: #fff; /* 背景色（古いブラウザ用） */
  color: #666; /* 文字色。 */
  border: 2px solid #666; /* 枠線の幅、線種、色 */
  animation-name: scroll; /* 上のアニメーションで指定しているkeyframesの名前（scroll） */
  animation-duration: 1s; /* アニメーションの実行時間 */
  animation-fill-mode: forwards; /* アニメーションの完了後、最後のキーフレームを維持する */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 子要素を下部に揃える */
  align-items: center; /* 中央揃え */
}

/* マウスオン時 */
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
  color: #74325c; /* 文字色 */
  border: 2px solid #74325c; /* 枠線: 太さ2px、色#74325c */
}

/* 「TOP」テキストとスペードの配置調整 */
body.is-fixed-pagetop .nav-fix-pos-pagetop a .spade {
  font-size: 32px; /* スペードのマークの大きさ */
  line-height: 32px; /* 間隔を詰めるために */
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a .top {
  font-size: 12px; /* 「TOP」の文字サイズ */
  margin-top: -3px; /* スペードのマークのすぐ下に配置 */
}

/*調整用スタイル
---------------------------------------------------------------------------*/
/*並べ替え*/
.order1 {
  order: 1; /*orderは数字の小さな順番に並びます。デフォルトは0なので、それより後ろに表示させたいブロックに使います。（※flex内で使用）*/
}

.padding0 {
  padding: 0 !important;
}
.padding-bottom0 {
  padding-bottom: 0 !important;
}
.padding-lr0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/*左右の余白*/
.space-small {
  padding-left: var(--space-small);
  padding-right: var(--space-small);
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.color-check,
.color-check a {
  color: #ff0000 !important;
}
.l {
  text-align: left !important;
}
.c {
  text-align: center !important;
}
.r {
  text-align: right !important;
}
.ws {
  width: 95%;
  display: block;
}
.wl {
  width: 95%;
  display: block;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.look {
  line-height: 1.5 !important;
  display: inline-block;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  margin: 5px 0;
  word-break: break-all;
}
.small {
  font-size: 0.75em;
}
.large {
  font-size: 2em;
  letter-spacing: 0.1em;
}
.pc {
  display: none;
}
.dn {
  display: none !important;
}
.block {
  display: block !important;
}
.bg1 {
  background: #f0f0f0;
}
.bg2 {
  background: #fffcd6;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/*レスポンシブ
---------------------------------------------------------------------------*/

@media screen and (max-width: 1280px) {
  header nav ul {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .logo img {
    width: clamp(200px, 40vw, 500px);
    height: auto;
  }

  header {
    padding: 0.5rem;
  }
}

@media (min-width: 1025px) and (max-width: 1150px) {
  .logo img {
    /* 例：通常 52vw 相当なら 58vw に寄せるなど */
    width: clamp(620px, 58vw, 720px);
  }
}

@media screen and (max-width: 1024px) {
  header {
    padding: 1rem 2vw; /* 上下の余白を少し詰める */
    min-height: auto; /* 高さをコンテンツに合わせて自動調整 */
    align-items: center;
    gap: 0.5rem;
  }

  .logo img {
    width: clamp(250px, 50vw, 600px); /* ロゴを少し大きめに表示 */
    height: auto;
  }

  nav ul {
    justify-content: center;
    gap: 0.5rem;
  }
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  .ws {
    width: 48%;
    display: inline;
  }
  .sh {
    display: none;
  }
  .pc {
    display: block;
  }
} /*追加指定ここまで*/

@media screen and (max-width: 768px) {
  header {
    align-items: center;
    height: auto;
    padding: 1rem 0 1rem 0;
  }

  .logo {
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
  }

  .logo img {
    max-width: 90%;
    height: auto;
    margin-left: 20px;
  }

  .visitor-counter {
    display: none;
  }
}

.menu-button {
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu-button .label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}
.menu-button .chip-inline {
  font-size: 10px;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  color: var(--chip-fg, #fff);
  background: var(--chip-bg, #666);
}
@media (max-width: 360px) {
  .menu-button .chip-inline {
    display: none;
  }
}