@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Shippori+Mincho:wght@400;700;800&display=swap');
/* =========================================================
   Audio Service - Main Stylesheet
   BEM 設計 / レスポンシブ対応 / 外部CSS 1ファイル
   ========================================================= */


/* ---------------------------------------------------------
   1. RESET & NORMALIZE
   --------------------------------------------------------- */

article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html {
  font-size: 100%;
  overflow-y: scroll;
}

body {
  margin: 0;
}

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 0; padding: 0; list-style: none; }
img, object, embed, video { border: 0; vertical-align: middle; max-width: 100%; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

*, *::before, *::after {
  box-sizing: border-box;
}

/* ヘルパークラス */
.layout--clearfix::before,
.layout--clearfix::after { content: ""; display: table; }
.layout--clearfix::after { clear: both; }

/* 印刷スタイル */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}


/* ---------------------------------------------------------
   2. CSS カスタムプロパティ（デザイントークン）
   --------------------------------------------------------- */

:root {
  /* カラーパレット */
  --color-bg-page:    #333333;
  --color-bg-wrapper: #828282;
  --color-bg-dark:    #121212;
  --color-bg-content: #212121;
  --color-black:      #000000;
  --color-text:       #ffffff;
  --color-text-dim:   #cccccc;
  --color-accent:     #ff0000;
  --color-link:       #00ff00;
  --color-link-hover: #ffff00;

  /* フォントファミリー */
  --font-sans:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-mono:  "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
  --font-serif: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;

  /* フォントサイズ（流動的スケール） */
  --font-size-xs:   clamp(0.75rem,   1.1vw, 0.875rem);    /* 12〜14px */
  --font-size-sm:   clamp(0.875rem,  1.3vw, 1rem);        /* 14〜16px */
  --font-size-base: clamp(1rem,      1.6vw, 1.125rem);    /* 16〜18px */
  --font-size-md:   clamp(1.125rem,  2vw,   1.375rem);    /* 18〜22px */
  --font-size-lg:   clamp(1.3125rem, 2.5vw, 1.75rem);     /* 21〜28px */
  --font-size-xl:   clamp(1.5rem,    3.5vw, 2.25rem);     /* 24〜36px */

  /* 行間 */
  --lh-tight:   1.5;
  --lh-normal:  1.85;
  --lh-relaxed: 2.0;

  /* 字間 */
  --ls-tight:  0.06em;
  --ls-normal: 0.12em;
  --ls-wide:   0.25em;
  --ls-wider:  0.4em;

  /* ボーダー半径 */
  --radius: 5px;
}


/* ---------------------------------------------------------
   3. ベーススタイル
   --------------------------------------------------------- */

html {
  font-family: var(--font-sans);
  color: var(--color-text);
}

body {
  background-color: var(--color-bg-page);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  font-family: var(--font-sans);
}

a { color: var(--color-link); text-decoration: none; }
a:visited { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }


/* ---------------------------------------------------------
   4. LAYOUT ブロック
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   5. SITE-HEADER ブロック
   --------------------------------------------------------- */

.site-header {
  clear: both;
  float: left;
  width: 100%;
  margin: 2% 0;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  border: 1px solid var(--color-black);
  border-bottom: 3px solid var(--color-accent);
  border-radius: var(--radius);
}

/* サイトヘッダー：リスト（ul） */
.site-header__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 3%;
}

/* サイトヘッダー：キャッチコピー上部 */
.site-header__tagline {
  margin: 2% 3% 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text);
  line-height: var(--lh-tight);
  font-family: var(--font-sans);
  font-weight: bold;
}

/* サイトヘッダー：サービス名 */
.site-header__subtitle {
  margin: 0.5% 3% 0 0;
  padding: 0;
  font-size: var(--font-size-base);
  font-family: var(--font-serif);
  font-weight: bold;
  color: var(--color-text);
  line-height: var(--lh-tight);
}

/* サイトヘッダー：メインタイトル h1 */
.site-header__title {
  margin: 0;
  padding: 3% 5% 1% 0;
  font-family: 'Shippori Mincho', "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", serif;
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-accent);
  line-height: var(--lh-tight);
  letter-spacing: 0.1em;
  border-radius: var(--radius);
}

/* サイトヘッダー：説明テキスト */
.site-header__description {
  margin: 0;
  padding: 1% 5% 0 0;
  font-size: var(--font-size-sm);
  font-weight: bold;
  font-family: var(--font-serif);
  color: var(--color-text);
  line-height: var(--lh-tight);
}

/* サイトヘッダー：問い合わせ情報 */
.site-header__contact {
  margin: 1% 3% 5% 0;
  padding-left: 0;
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--color-link);
  line-height: var(--lh-relaxed);
}

.site-header__contact a {
  color: var(--color-link);
  text-decoration: none;
}
.site-header__contact a:hover {
  color: var(--color-link-hover);
}

/* サイトヘッダー：営業時間 */
.site-header__hours {
  margin: 0 3% 0.5% 0;
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--color-text);
  line-height: var(--lh-tight);
}

/* サイトヘッダー：ホームリンク（右寄せ） */
.site-header__home {
  float: right;
  margin: 0;
  padding-right: 7%;
  padding-bottom: 1%;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  display: block;
}

.site-header__home a {
  color: var(--color-text);
  text-decoration: none;
}
.site-header__home a:hover {
  color: var(--color-accent);
}


/* ---------------------------------------------------------
   6. SITE-NAV ブロック（左サイドバーナビゲーション）
   --------------------------------------------------------- */

.site-nav {
  clear: both;
  float: left;
  width: 100%;
  padding: 6% 5%;
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  background-color: var(--color-black);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
}

/* ナビゲーション：見出し */
.site-nav__heading {
  font-size: var(--font-size-md);
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  color: var(--color-text);
  background-color: var(--color-bg-page);
  text-align: center;
  margin-bottom: 1rem;
  line-height: var(--lh-tight);
  letter-spacing: 0.08em;
  border: 1px solid var(--color-accent);
  box-shadow: inset 0 0 0 8px var(--color-bg-dark);
  padding: 1.2rem 0.5rem;
}

.site-nav__heading a {
  color: var(--color-text);
  text-decoration: none;
}
.site-nav__heading a:hover {
  background-color: var(--color-accent);
  color: var(--color-link);
  transition: ease-out 0.3s;
}

/* ナビゲーション：リスト */
.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ナビゲーション：リストアイテム */
.site-nav__item {
  width: 100%;
  min-height: 3.25rem;
  margin-top: 8%;
  padding: 0;
  list-style-type: none;
  font-size: var(--font-size-base);
  letter-spacing: var(--ls-tight);
  font-weight: bold;
  font-family: var(--font-mono);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text);
  background-color: var(--color-accent);
  border-left: var(--color-accent) 0.3em solid;
  border-right: var(--color-accent) 2em solid;
  border-radius: 2px;
}

/* 長テキスト項目：文字間隔を詰める（詳細度 0,2,0 でメディアクエリを上書き） */
.site-nav__item.site-nav__item--anp,
.site-nav__item.site-nav__item--record { letter-spacing: 0; }

/* ナビゲーション：リンク */
.site-nav__link {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 0 0.5rem 7%;
  text-decoration: none;
  background-color: var(--color-bg-page);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: bold;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ナビリンク：英語サブテキスト */
.site-nav__link-en {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: normal;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.site-nav__link:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: bold;
  letter-spacing: 0.04em;
  transition: 0.3s ease-in-out;
}

.site-nav__link:hover .site-nav__link-en {
  color: var(--color-black);
}

/* ナビゲーション：区切り線 */
.site-nav__divider {
  width: 100%;
  margin: 2rem 0;
  height: 30px;
  border: 0;
  box-shadow: 0 30px 30px -30px #ffffff inset;
}

/* ナビゲーション：お知らせテキスト */
.site-nav__notice {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  margin: 0.5rem 0;
}

/* ナビゲーション：説明テキスト */
.site-nav__info {
  margin: 1.25rem 0;
  padding: 0 3%;
  font-size: var(--font-size-sm);
  text-align: justify;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

/* ナビゲーション：画像（モバイルでは非表示） */
.site-nav__image {
  width: 100%;
  margin: 1rem 0;
  display: none;
  border: 2px solid #666666;
}


/* ---------------------------------------------------------
   7. SITE-MAIN ブロック（メインコンテンツエリア）
   --------------------------------------------------------- */

.site-main {
  clear: both;
  float: left;
  width: 100%;
  background-color: #666666;
  border-radius: var(--radius);
}


/* ---------------------------------------------------------
   8. VIDEO-BLOCK ブロック
   --------------------------------------------------------- */

.video-block {
  clear: both;
  float: left;
  width: 100%;
  display: block;
  text-align: center;
  border: 5px solid var(--color-black);
  background-color: var(--color-black);
  border-radius: var(--radius);
  margin-bottom: 5%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-block__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}


/* ---------------------------------------------------------
   9. CONTENT-SECTION ブロック
   --------------------------------------------------------- */

.content-section {
  clear: both;
  float: left;
  width: 100%;
  margin: 0 0 5% 0;
  padding: 0;
  background-color: var(--color-bg-content);
  color: var(--color-text);
  border: 1px solid var(--color-black);
  border-bottom: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

/* モディファイア：受付セクション */
.content-section--reception {
  padding-bottom: 5%;
}

/* モディファイア：下線なし */
.content-section--no-border {
  border-bottom: none;
}

/* コンテンツセクション：大見出し（h3） */
.content-section__title {
  margin: 8% 0 0 5%;
  padding-left: 0.65em;
  font-size: var(--font-size-md);
  font-weight: bold;
  font-family: var(--font-serif);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  color: var(--color-text);
  border-left: 4px solid var(--color-accent);
}

/* コンテンツセクション：見出し内英語サブテキスト */
.content-section__title-en {
  display: block;
  font-size: var(--font-size-xs);
  font-family: var(--font-serif);
  font-weight: bold;
  letter-spacing: var(--ls-normal);
  color: var(--color-accent);
}

/* コンテンツセクション：中見出し（h4） */
.content-section__subtitle {
  margin: 6% 0 0 5%;
  padding-left: 0.65em;
  font-size: var(--font-size-md);
  font-weight: bold;
  font-family: var(--font-serif);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  color: var(--color-text);
  border-left: 4px solid var(--color-accent);
}

/* コンテンツセクション：小見出し（h5） */
.content-section__label {
  margin: 5% 0 0 5%;
  font-size: var(--font-size-base);
  font-weight: bold;
  font-family: var(--font-serif);
  color: var(--color-text);
  line-height: var(--lh-tight);
}

/* 電話・メール強調テキスト */
.content-section__tel {
  color: var(--color-link);
}
.content-section__mail a {
  color: var(--color-link);
  text-decoration: none;
}
.content-section__mail a:hover {
  color: var(--color-link-hover);
}

/* コンテンツセクション：区切り線 */
.content-section__divider {
  display: block;
  width: 90%;
  margin: 6% 0 3% 0;
  height: 0;
  border: 0;
  border-top: 2px solid var(--color-accent);
  padding: 0;
  box-shadow: none;
}

/* コンテンツセクション：本文・箇条書き（クラスベース＋タグフォールバック） */
.content-section p,
.content-section__body {
  margin: 4% 5%;
  text-align: left;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  font-size: var(--font-size-base);
  font-weight: bold;
  font-family: var(--font-serif);
  color: var(--color-text);
  overflow-wrap: break-word;
  word-break: break-word;
}

.content-section a,
.content-section__body a {
  color: var(--color-link);
  text-decoration: none;
  font-size: inherit;
}
.content-section a:hover,
.content-section__body a:hover {
  color: var(--color-link-hover);
}

.content-section ul,
.content-section__list {
  list-style: none;
  margin: 4% 5%;
  padding: 0;
}

.content-section li,
.content-section__list-item {
  padding-bottom: 4%;
  font-size: var(--font-size-base);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-weight: bold;
}

.content-section hr {
  display: block;
  width: 90%;
  margin: 4% 5%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-accent);
}


/* ---------------------------------------------------------
   10. BACK-TO-TOP ブロック
   --------------------------------------------------------- */

.back-to-top {
  clear: both;
  display: inline-block;
  width: auto;
  margin: 2% 0;
  padding: 1% 3%;
  background-color: var(--color-black);
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-text);
  border-radius: 2px;
}

.back-to-top__link {
  color: var(--color-text);
  text-decoration: none;
}
.back-to-top__link:hover {
  color: var(--color-link);
}


/* ---------------------------------------------------------
   11. SITE-FOOTER ブロック
   --------------------------------------------------------- */

.site-footer {
  clear: both;
  float: left;
  width: 100%;
  margin: 5% 0;
  padding: 2% 5.5% 4% 3%;
  background-color: var(--color-bg-dark);
  font-size: var(--font-size-sm);
  text-align: left;
  color: var(--color-text);
  border-radius: var(--radius);
  border-top: 3px solid var(--color-accent);
}

.site-footer__text {
  width: 100%;
  margin: 0;
  display: block;
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-tight);
  font-family: var(--font-mono);
}

.site-footer a {
  color: var(--color-link);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--color-accent);
}


/* =========================================================


   レガシーサポート：サブページ（ID構造）互換セレクター
   html1-audio/*.html および annai/work.html 用
   ========================================================= */

/* ---------------------------------------------------------
   レガシー：レイアウト
   --------------------------------------------------------- */

.gridContainer {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5%;
  padding-right: 0.5%;
  width: 90%;
}

#wrapper {
  clear: both;
  float: left;
  width: 100%;
  background-color: var(--color-black);
  border-radius: var(--radius);
}


/* ---------------------------------------------------------
   レガシー：ヘッダー (#header)
   --------------------------------------------------------- */

#header {
  clear: both;
  float: left;
  width: 100%;
  margin: 2% 0;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  border: 1px solid var(--color-black);
  border-bottom: 3px solid var(--color-accent);
  border-radius: var(--radius);
}

#header .top {
  margin: 2% 3% 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text);
  line-height: var(--lh-tight);
  font-weight: bold;
}

#header ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 3%;
}

#header h1 {
  margin: 0;
  padding: 3% 5% 1% 0;
  font-family: 'Shippori Mincho', "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", serif;
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-accent);
  line-height: var(--lh-normal);
  letter-spacing: 0.06em;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  border-radius: var(--radius);
  background-color: var(--color-bg-dark);
}

#header h1.h1--narrow,
.site-header__title.h1--narrow {
  letter-spacing: 0;
}

#header h2 {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--color-text);
  line-height: var(--lh-tight);
  background-color: transparent;
}

#header li {
  margin: 0.5% 3% 0 0;
  padding: 1% 0 0;
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--color-text);
  line-height: var(--lh-tight);
  background-color: var(--color-bg-dark);
}

#header p {
  margin: 0.5% 3% 0 0;
  padding: 1% 0 0;
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--color-text);
  line-height: var(--lh-tight);
  background-color: var(--color-bg-dark);
}

#header .call {
  color: var(--color-link);
  margin: 1% 3% 5% 0;
  padding-left: 0;
  font-size: var(--font-size-sm);
  font-weight: bold;
  line-height: var(--lh-relaxed);
}

#header .home {
  float: right;
  margin: 0;
  padding-right: 7%;
  padding-bottom: 1%;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  display: block;
}

#header a { color: var(--color-link); text-decoration: none; }
#header a:hover { color: var(--color-link-hover); }
#header .call a { color: var(--color-link); }
#header .call a:hover { color: var(--color-link-hover); }
#header .home a { color: var(--color-text); text-decoration: none; }
#header .home a:hover { color: var(--color-accent); }


/* ---------------------------------------------------------
   レガシー：サイドナビ (#side-left)
   --------------------------------------------------------- */

#side-left {
  clear: both;
  float: left;
  width: 100%;
  padding: 5%;
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  background-color: var(--color-black);
}


#side-left ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#side-left li {
  width: 100%;
  min-height: 3.25rem;
  margin-top: 8%;
  padding: 0;
  list-style-type: none;
  font-size: var(--font-size-base);
  letter-spacing: var(--ls-tight);
  font-weight: bold;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  color: var(--color-text);
  background-color: var(--color-accent);
  border-left: var(--color-accent) 0.3em solid;
  border-right: var(--color-accent) 2em solid;
  border-radius: 2px;
}

/* 長テキスト項目：文字間隔を詰める */
#side-left li.anp,
#side-left li.record { letter-spacing: 0; }

/* 現在ページ表示（アンカーなし）：<a> と同構造のラッパー */
#side-left li > .nav-current {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 0 0.5rem 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  color: var(--color-black);
}

#side-left li > .nav-current .en {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: normal;
  color: var(--color-black);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

#side-left li a {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 0 0.5rem 7%;
  text-decoration: none;
  background-color: var(--color-bg-page);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* レガシーナビ：英語サブテキスト */
#side-left li a .en {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: normal;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

#side-left li a:hover {
  background-color: var(--color-accent);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: bold;
  letter-spacing: 0.04em;
  transition: 0.3s ease-in-out;
}

#side-left li a:hover .en {
  color: var(--color-black);
}

#side-left a {
  color: var(--color-text);
  text-decoration: none;
}
#side-left a:hover { color: var(--color-link); }

#side-left hr {
  width: 100%;
  margin: 2rem 0;
  height: 30px;
  border: 0;
  box-shadow: 0 30px 30px -30px #ffffff inset;
}

#side-left img {
  width: 100%;
  margin: 1rem 0;
  display: none;
  border: 2px solid #666666;
}

#side-left p {
  margin: 1rem 0;
  padding: 0 3%;
  font-size: var(--font-size-sm);
  text-align: justify;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

#side-left > p:first-child {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: var(--font-size-md);
  text-align: center;
  letter-spacing: 0.08em;
  border: 1px solid var(--color-accent);
  padding: 1.2rem 0.5rem;
  margin-bottom: 1rem;
}

#side-left p a {
  color: var(--color-text);
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: bold;
  background-color: var(--color-bg-page);
  padding: 0.4rem;
}
#side-left p a:hover { background-color: var(--color-accent); }


/* ---------------------------------------------------------
   レガシー：スライドショー (#slideshow)
   --------------------------------------------------------- */

#slideshow {
  position: relative;
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  box-sizing: border-box;
  border-radius: var(--radius);
  display: none;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0.0;
  width: 100%;
}

#slideshow img.active {
  z-index: 10;
  opacity: 1.0;
}

#slideshow img.last-active {
  z-index: 9;
}


/* ---------------------------------------------------------
   レガシー：メインコンテンツ (#mainWrap)
   --------------------------------------------------------- */

#mainWrap {
  clear: both;
  float: left;
  width: 100%;
  background-color: #666666;
  border-radius: var(--radius);
}


/* ---------------------------------------------------------
   レガシー：コンテンツセクション ([id^="Contents"])
   --------------------------------------------------------- */

[id^="Contents"] {
  clear: both;
  float: left;
  width: 100%;
  margin: 0 0 5% 0;
  padding: 0;
  background-color: var(--color-bg-content);
  color: var(--color-text);
  border: 1px solid var(--color-black);
  border-bottom: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}


[id^="Contents"] h2,
[id^="Contents"] h3 {
  margin: 8% 0 0 5%;
  padding-left: 0.65em;
  font-size: var(--font-size-md);
  font-weight: bold;
  font-family: var(--font-serif);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  color: var(--color-text);
  border-left: 4px solid var(--color-accent);
}

[id^="Contents"] h4 {
  margin: 6% 0 0 5%;
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  font-weight: bold;
  font-family: var(--font-serif);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

[id^="Contents"] h5 {
  margin: 5% 0 0 5%;
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-text);
  line-height: var(--lh-tight);
}

[id^="Contents"] p {
  margin: 4% 5%;
  text-align: left;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  font-size: var(--font-size-base);
  font-weight: bold;
  font-family: var(--font-serif);
  color: var(--color-text);
}

[id^="Contents"] p a {
  color: var(--color-link);
  text-decoration: none;
  font-size: inherit;
}
[id^="Contents"] p a:hover { color: var(--color-link-hover); }

[id^="Contents"] a { color: var(--color-link); text-decoration: none; }
[id^="Contents"] a:hover { color: var(--color-link-hover); }

[id^="Contents"] ul {
  list-style: none;
  margin: 4% 5%;
  padding: 0;
}

[id^="Contents"] li {
  min-height: 0;
  padding-bottom: 4%;
  font-size: var(--font-size-base);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-weight: bold;
  background-color: transparent;
  border: none;
  display: block;
  margin-top: 0;
}

/* 画像ボックス（サブページ） */
#img-box {
  clear: both;
  float: left;
  margin: 5% 3%;
  width: 94%;
  display: block;
}

#img-box img {
  width: 100%;
  height: auto;
}

#img-box hr {
  margin: 3% 0;
  width: 100%;
  border-top: 1px solid #444;
}

/* 2列グリッド画像（全ページ共通） */
#img-box.img-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3%;
  float: left;
  margin: 5% 3%;
  width: 94%;
  box-sizing: border-box;
}

#img-box.img-grid-2col img {
  width: 100%;
  min-width: 0;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  border: 2px solid #aaaaaa;
  box-sizing: border-box;
}

/* 画像グリッド後のテキスト・区切り線を画像幅に揃える */
#img-box.img-grid-2col ~ p {
  clear: both;
  margin-left: 3%;
  margin-right: 3%;
}

#img-box.img-grid-2col ~ hr {
  clear: both;
  margin-left: 3%;
  margin-right: 3%;
}

/* hrデフォルト */
[id^="Contents"] hr {
  display: block;
  width: 90%;
  margin: 5% 0 3% 0;
  height: 0;
  border: 0;
  border-top: 2px solid var(--color-accent);
  padding: 0;
  box-shadow: none;
}


/* ---------------------------------------------------------
   レガシー：戻るリンク (p.end)
   --------------------------------------------------------- */

.back-links {
  clear: both;
  text-align: left;
  margin: 2% 0;
  padding-left: 0;
}

p.end {
  display: inline-block;
  width: auto;
  min-width: 130px;
  margin: 0.5% 1%;
  padding: 1% 3%;
  background-color: var(--color-black);
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-text);
  border-radius: 2px;
}

p.end a {
  color: var(--color-text);
  text-decoration: none;
}
p.end a:hover { color: var(--color-link); }


/* =========================================================
   レスポンシブ：タブレット（481px 以上）
   ========================================================= */

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


  /* ヘッダー */
  .site-header {
    float: left;
    width: 91.6%;
    margin-left: 4.2%;
    padding-bottom: 2%;
    border-bottom: 0.2vw solid var(--color-accent);
    background-color: var(--color-bg-dark);
  }

  .site-header__tagline {
    line-height: 0.5em;
    margin-bottom: 0;
  }

  .site-header__title {
    background-color: var(--color-bg-dark);
  }

  .site-header__subtitle,
  .site-header__description {
    background-color: var(--color-bg-dark);
    font-size: var(--font-size-sm);
  }

  .site-header__contact {
    margin-bottom: 2%;
  }

  .site-header__home {
    background-color: var(--color-bg-dark);
  }

  /* サイドナビ */
  .site-nav {
    clear: both;
    float: left;
    margin-left: 4.2%;
    padding: 5% 2%;
    width: 24.37%;
    background-color: var(--color-bg-dark);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius);
  }

  .site-nav__heading {
    font-size: var(--font-size-sm);
    margin-bottom: 2.5rem;
  }

  .site-nav__item {
    min-height: max(3rem, 4vw);
    margin-top: 15%;
    border-left: var(--color-accent) solid 1em;
    border-right: var(--color-accent) solid 2.5em;
    font-size: var(--font-size-sm);
    letter-spacing: 0.15vw;
  }

  .site-nav__link {
    min-height: max(3rem, 4vw);
    padding: 3% 0 3% 7%;
    font-size: var(--font-size-sm);
  }

  .site-nav__image {
    display: block;
  }

  .site-nav__info {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0 3%;
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-tight);
  }

  /* サイドナビ内のp */
  .site-nav p {
    width: 100%;
    margin: 1vw 0 5vw 0;
    padding: 0;
    font-size: var(--font-size-sm);
    text-align: justify;
    color: var(--color-text-dim);
    background-color: var(--color-bg-dark);
    display: block;
  }

  .site-nav p a {
    padding: 0;
    color: var(--color-text);
    text-decoration: none;
    font-weight: bold;
    background-color: var(--color-bg-page);
    font-size: var(--font-size-sm);
    display: block;
    text-align: center;
  }

  .site-nav p a:hover {
    background-color: var(--color-accent);
  }

  /* メインコンテンツ */
  .site-main {
    clear: none;
    float: left;
    margin-left: 5%;
    width: 62.18%;
    background-color: #666666;
    border-radius: var(--radius);
  }

  /* 動画 */
  .video-block {
    display: block;
    clear: none;
    float: left;
    width: 100%;
    margin-bottom: 5%;
    border: 5px solid var(--color-black);
  }

  /* コンテンツセクション */
  .content-section {
    clear: both;
    float: left;
    width: 100%;
    margin: 0 0 5% 0;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 2%;
    padding-right: 2%;
  }

  .content-section__title {
    margin: 7% 0 0 3%;
    font-size: var(--font-size-md);
    letter-spacing: var(--ls-wide);
  }

  .content-section__subtitle {
    margin: 5% 0 0 3%;
    font-size: var(--font-size-md);
    letter-spacing: var(--ls-wide);
  }

  .content-section__label {
    margin: 5% 0 0 3%;
    font-size: var(--font-size-base);
  }

  .content-section__body {
    margin: 4% 0 0 3%;
    font-size: var(--font-size-base);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-relaxed);
  }

  .content-section__list {
    margin: 3% 3%;
  }

  .content-section__list-item {
    padding-bottom: 2%;
    font-size: var(--font-size-sm);
  }

  .content-section p {
    margin: 4% 3%;
    font-size: var(--font-size-base);
  }

  .content-section h4 {
    margin: 5% 0 0 3%;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  }

  .content-section h5 {
    margin: 4% 0 0 3%;
    font-size: var(--font-size-base);
  }

  .content-section ul {
    margin: 4% 3%;
  }

  .content-section li {
    font-size: var(--font-size-sm);
    padding-bottom: 2%;
  }

  /* 戻るボタン */
  .back-to-top {
    display: inline-block;
    width: auto;
    margin-left: 33.57%;
  }

  .back-links {
    margin-left: 33.57%;
  }

  /* フッター */
  .site-footer__text {
    width: 100%;
  }

  /* ─── レガシー（サブページ） ─── */

  .gridContainer {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  #wrapper {
    background-color: var(--color-bg-wrapper);
    border-radius: var(--radius);
  }

  #header {
    float: left;
    width: 91.6%;
    margin-left: 4.2%;
    padding-bottom: 2%;
    border-bottom: 0.2vw solid var(--color-accent);
    background-color: var(--color-bg-dark);
  }

  #header h1 {
    font-size: var(--font-size-xl);
    background-color: var(--color-bg-dark);
  }

  #header li,
  #header p {
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-dark);
  }

  #header .call {
    font-size: var(--font-size-sm);
    margin-bottom: 2%;
  }

  #header .home {
    background-color: var(--color-bg-dark);
    font-size: var(--font-size-sm);
  }

  #side-left {
    clear: both;
    float: left;
    margin-left: 4.2%;
    padding: 5% 2%;
    width: 24.37%;
    background-color: var(--color-bg-dark);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius);
  }


  #side-left li {
    min-height: max(3rem, 4vw);
    margin-top: 15%;
    border-left: var(--color-accent) solid 1em;
    border-right: var(--color-accent) solid 2.5em;
    font-size: var(--font-size-sm);
    letter-spacing: 0.15vw;
  }

  #side-left li a,
  #side-left li > .nav-current {
    min-height: max(3rem, 4vw);
    padding: 3% 0 3% 7%;
  }
  #side-left li a { font-size: var(--font-size-sm); }
  #side-left li > .nav-current { font-size: var(--font-size-base); }

  #side-left img {
    display: block;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  #side-left p {
    font-size: var(--font-size-sm);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-tight);
  }

  #slideshow {
    display: block;
    position: relative;
    width: 100%;
    height: 10vw;
    overflow: hidden;
    margin-top: 1.5rem;
  }

  #mainWrap {
    clear: none;
    float: left;
    margin-left: 5%;
    width: 62.18%;
    background-color: #666666;
    border-radius: var(--radius);
  }

  [id^="Contents"] {
    clear: both;
    float: left;
    width: 100%;
    margin: 0 0 5% 0;
    padding: 3% 2%;
  }

  [id^="Contents"] h2,
  [id^="Contents"] h3 {
    margin: 7% 0 0 3%;
    font-size: var(--font-size-md);
    letter-spacing: var(--ls-wide);
  }

  [id^="Contents"] h4 {
    margin: 5% 0 0 3%;
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    letter-spacing: var(--ls-normal);
  }

  [id^="Contents"] h5 {
    margin: 5% 0 0 3%;
    font-size: var(--font-size-base);
  }

  [id^="Contents"] p {
    margin: 4% 0 0 3%;
    font-size: var(--font-size-base);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-relaxed);
  }

  [id^="Contents"] li {
    padding-bottom: 2%;
    font-size: var(--font-size-base);
  }

  p.end {
    min-width: 150px;
    padding: 0.8% 4%;
  }


} /* end: 481px+ */


/* =========================================================
   レスポンシブ：デスクトップ（769px 以上）
   ========================================================= */

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


  /* ヘッダー */
  .site-header__tagline {
    font-size: var(--font-size-xs);
    line-height: 0.5em;
  }

  .site-header__title {
    font-size: var(--font-size-lg);
  }

  .site-header__subtitle,
  .site-header__description {
    font-size: var(--font-size-sm);
    margin-top: 0;
    padding-top: 0;
  }

  .site-header__contact {
    font-size: var(--font-size-sm);
  }

  .site-header__home {
    font-size: var(--font-size-xs);
  }

  /* ナビ */
  .site-nav__heading {
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    margin-bottom: 3.5rem;
  }

  .site-nav__item {
    min-height: max(2.5rem, 2.2vw);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    letter-spacing: 0.2vw;
  }

  .site-nav__link {
    min-height: max(2.5rem, 2.2vw);
    font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
    padding-left: 5%;
  }

  .site-nav p {
    font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
  }

  .site-nav__info {
    font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-tight);
  }

  /* コンテンツセクション */
  .content-section__title {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    letter-spacing: var(--ls-wider);
  }

  .content-section__subtitle {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    letter-spacing: var(--ls-wide);
  }

  .content-section__label {
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  }

  .content-section__body {
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-relaxed);
  }

  .content-section__body a {
    font-size: inherit;
  }

  .content-section__list-item {
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    letter-spacing: var(--ls-normal);
  }

  /* 戻るボタン */
  .back-to-top {
    font-size: var(--font-size-sm);
  }

  /* フッター */
  .site-footer__text {
    width: 100%;
    font-size: clamp(0.875rem, 1.2vw, 1rem);
  }

  /* ─── レガシー（サブページ） ─── */

  .gridContainer {
    width: 89.25%;
    max-width: 1232px;
    padding-left: 0.375%;
    padding-right: 0.375%;
    margin: auto;
  }

  #header h1 {
    font-size: var(--font-size-lg);
  }

  #header li,
  #header p {
    font-size: var(--font-size-sm);
    margin-top: 0;
  }

  #header .top {
    font-size: var(--font-size-xs);
  }

  #header .call {
    font-size: var(--font-size-sm);
  }

  #header .home {
    font-size: var(--font-size-xs);
  }


  #side-left li {
    min-height: max(2.5rem, 2.2vw);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    letter-spacing: 0.2vw;
  }

  #side-left li a,
  #side-left li > .nav-current {
    min-height: max(2.5rem, 2.2vw);
    padding-left: 5%;
  }
  #side-left li a { font-size: clamp(0.875rem, 1.1vw, 0.9375rem); }
  #side-left li > .nav-current { font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); }

  #side-left p {
    font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
  }

  #slideshow {
    height: 12vw;
  }

  [id^="Contents"] h2,
  [id^="Contents"] h3 {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    letter-spacing: var(--ls-wider);
  }

  [id^="Contents"] h4 {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    letter-spacing: var(--ls-wide);
  }

  [id^="Contents"] h5 {
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  }

  [id^="Contents"] p {
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-relaxed);
  }

  [id^="Contents"] li {
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    letter-spacing: var(--ls-normal);
  }

  p.end {
    min-width: 160px;
    font-size: var(--font-size-sm);
  }


} /* end: 769px+ */