@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');

/*全端末（PC・タブレット・スマホ）共通設定
----------------------------------------------------------------------------*/
/* ========== 00: Variables & Base ========== */
:root {
  --container-max: 1200px; /* サイトの max-width に合わせて */
  --content-pad: clamp(12px, 2vw, 24px); /* コンテンツ内側の余白（調整用） */
  --icon-gap: clamp(8px, 2.2vw, 16px); /* アイコン同士の間隔（調整つまみ） */
}

/*全体の設定
---------------------------------------------------------------------------*/
body {
  margin: 0px;
  padding: 0px;
  color: #666; /*全体の文字色*/
  font-family:
    'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック',
    'MS PGothic', sans-serif; /*フォント種類*/
  font-size: 18px; /*文字サイズ*/
  line-height: 2; /*行間*/
  background: #fff; /*背景色*/
  -webkit-text-size-adjust: none;
}
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd,
form,
figure,
textarea,
input {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style-type: none;
}
ol {
  padding-left: 40px;
  padding-bottom: 15px;
}
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
table {
  border-collapse: collapse;
  font-size: 100%;
  border-spacing: 0;
}
iframe {
  width: 100%;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
/* 通常のリンクスタイル */
a {
  color: #74325c; /* 通常時のリンク色 */
  font-weight: normal; /* 太字を解除 */
  text-decoration: none; /* 下線を削除 */
  transition:
    color 0.3s,
    text-decoration 0.3s; /* 色と下線のスムーズな変化 */
}

/* ホバリング時のスタイル */
a:hover {
  color: #74325c; /* ホバー時のリンク色 */
  text-decoration: underline; /* 下線を表示 */
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  body {
    font-size: 16px; /*文字サイズ*/
    line-height: 1.8; /*行間*/
  }
}

/* ========== 10: Layout helpers (container/grid/util) ========== */

/*container（全体を囲むブロック）*/

#container {
  max-width: 1400px; /*サイトの最大幅*/
  margin: 0 auto;
  padding: 0 min(2%, 20px); /*上下、左右へのブロック内の余白*/
}

/*コンテンツ（左右ブロックとフッターを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
  clear: both;
  overflow: hidden;
  border: 1px solid #dcdcdc; /*枠線の幅、線種、色*/
  border-top: none; /*上の線だけ消す*/
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); /*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.2が透明度20%の事。*/
  border-radius: 10px 10px 0px 0px; /*角丸のサイズ。左上、右上、右下、左下への順番。*/
}

/*画面右側の側面にある縦長ボタン（オンラインショップ）
---------------------------------------------------------------------------*/
#btn-special {
  padding: 0;
  margin: 0;
}
#btn-special a {
  display: block;
  text-decoration: none;
  position: fixed;
  z-index: 100;
  right: 0px; /*右からの配置場所*/
  top: 32vw; /*上からの配置場所*/
  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;
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
  overflow: hidden;
  padding: 40px 0 0 2%; /*上、右、下、左側へのボックス内の余白*/
  width: 95%; /*幅*/
  margin-bottom: 30px;
}
/*メインコンテンツのh2タグの設定*/
#main h2 {
  clear: both;
  font-size: 18px; /*文字サイズ*/
  line-height: 1.4; /*行間*/
  color: #432f2f;
  font-weight: 550;
  margin-bottom: 20px;
  padding: 12px 20px; /*上下、左右への余白*/
  background: #cca6bf; /*h2バーの色*/
  border-bottom: 1px solid #dcdcdc; /*メニュー下の線の幅、線種、色*/
  border-top: 4px solid #541532; /*メニュー上の線の幅、線種、色*/
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); /*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.15は透明度15%の事。*/
  text-shadow: 1px 1px #fff; /*テキストの影。右へ、下へ、色。*/
}

/*h2タグ内の文字を目立たせるため追加*/
.highlight {
  font-size: 40px; /* 文字を大きく */
  color: #432f2f; /* 色 */
  font-weight: bold; /* 太字 */
  text-shadow: 2px 2px 5px #fff; /* 影を追加 */
}

/*メインコンテンツのh3タグの設定*/
#main h3 {
  clear: both;
  font-size: 18px; /*文字サイズ*/
  margin-bottom: 20px;
  padding: 2px 20px; /*上下、左右への余白*/
  border: 1px solid #dcdcdc; /*線の幅、線種、色*/
  background: linear-gradient(#fff, #eee); /*グラデーション*/
}
/*メインコンテンツの段落タグ設定*/
#main p {
  padding: 0px 20px 15px; /*上、左右、下への余白*/
}
#main h2 + p,
#main h3 + p {
  margin-top: -10px;
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
  #contents {
    border-top: 1px solid #dcdcdc; /*枠線の幅、線種、色*/
    border-radius: 0px 0px 0px 0px; /*角丸のサイズ。左上、右上、右下、左下への順番。*/
  }

  /*main,subコンテンツ
---------------------------------------------------------------------------*/
  #main,
  #sub {
    float: none;
    width: auto;
    padding: 2% 2% 0; /*上、左右、下へのボックス内の余白*/
  }

  /*subコンテンツ内のメニュー
---------------------------------------------------------------------------*/
  /*メニュー１個ごとの設定*/
  #sub ul.submenu li {
    width: 50%; /*半分の幅にする*/
    float: left; /*左に回り込み*/
  }
  /*偶数番目のメニューの左のラインを消す設定*/
  #sub ul.submenu li:nth-child(even) a {
    border-left: none;
  }

  /*その他
---------------------------------------------------------------------------*/
  body.s-n #sub {
    display: none;
  }
  .fl-half {
    float: left;
    width: 45%;
    margin-left: 3%;
  }
  .sh {
    display: block;
  }
  .pc {
    display: none;
  }
}

/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 700px) {
  #btn-special a {
    padding: 10px 5px; /*上下、左右へのボタン内の余白*/
  }

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

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  /*メインコンテンツのh2とh3タグ
---------------------------------------------------------------------------*/
  #main h2,
  #main h3 {
    font-size: 18px;
    padding: 5px 10px;
  }
  /*メインコンテンツの段落タグ設定*/
  #main p {
    padding: 0px 10px 15px; /*上、左右、下への余白*/
  }

  /*subコンテンツ内のメニュー
---------------------------------------------------------------------------*/
  /*メニュー１個ごとの設定*/
  #sub ul.submenu li {
    width: auto;
    float: none;
  }
  /*偶数番目のメニューの左のラインを戻す設定*/
  #sub ul.submenu li:nth-child(even) a {
    border-left: 1px solid #dcdcdc;
  }

  /*subコンテンツ内のメニュー
---------------------------------------------------------------------------*/
  #sub ul.submenu li a {
    padding: 10px; /*メニュー内の余白*/
  }
}

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

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

/* カウンタはPCのみ表示 */

.visitor-counter {
  display: block;
}

@media screen and (max-width: 1024px) {
  .visitor-counter {
    display: none;
  }
}

/* ========== 15: 文字装飾　Typography / Text Utilities ========== */

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

/* 文字を大きくする */
.big {
  font-size: 2.2rem; /* 通常より大きめのサイズ */
  font-weight: bold;
}

/*点線アンダーライン*/
.dottedline {
  border-bottom: dashed 4px #6594e0; /*線の種類（点線）4px 線色*/
}

/* ========== Header Layout & Base Styles ========== */
header {
  padding: 0;
  margin: 0;
  text-align: left;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: clamp(8px, 2vw, 16px);
  padding: clamp(8px, 1.8vw, 14px) clamp(12px, 2vw, 20px);
  min-height: clamp(56px, 8vw, 84px);
}

.site-header > * {
  min-width: 0;
} /* 長文保険 */

/* ========== Logo ========== */
.site-header #logo {
  flex: 0 1 auto;
  margin: 0;
  min-width: 0;
}

.site-header #logo img {
  display: block;
  height: auto;
  width: clamp(200px, 58vw, 380px);
}

/* ========== Hamburger Button and Mobile Menu ========== */
@media screen and (min-width: 801px) {
  #menubar {
    display: block;
  }
  #menubar-s-wrapper,
  #menubar_hdr {
    display: none !important;
  }
}

/* スマホ用メニュー（800px以下） */
@media screen and (max-width: 800px) {
  #menubar {
    display: none;
  }

  /* ハンバーガーボタンのスタイル（元のスタイルを維持） */
  #menubar_hdr {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 10px 12px;
    background: #fff;
    color: #250d00;
    border: 1px solid #250d00;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 1001;
    user-select: none;
  }

  #menubar_hdr .hambars {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #menubar_hdr .hambars i {
    display: block;
    width: 26px;
    height: 3px;
    background: #583822;
  }

  #menubar_hdr .label {
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  #menubar_hdr.ham {
    background: #f0f0f0; /* クリック時のフィードバック */
  }

  /* スマホ用メニューのコンテナ */
  #menubar-s-wrapper {
    display: block !important;
    visibility: visible;
    opacity: 1;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 80%;
    max-width: 800px;
    background: linear-gradient(#250d00, #543f32) !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    overflow: auto;
  }

  #menubar-s-wrapper.is-open {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
  }

  #menubar-s {
    display: block !important;
    padding: 90px 10vw 50px; /* ボーダーが見切れないよう十分なパディング */
  }

  #menubar-s ul {
    padding: 0;
    list-style: none;
    margin: 0 10px; /* ボーダーが見切れないようマージン追加 */
  }

  /* デフォルト：全ページ（online-list以外） */
  #menubar-s li {
    margin: 10px 0; /* 項目間に間隔 */
    border: 1px solid #fff; /* 全辺に白いボーダー（ゆうきともオンライン風） */
    border-radius: 5px; /* 角丸（ゆうきともオンラインを参考） */
  }

  #menubar-s li a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
    color: #fff !important;
    /* border-bottomとborder-leftはliに移動したため削除 */
  }

  #menubar-s li a span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  /* スクロール禁止用 */
  body.no-scroll {
    overflow: hidden;
    height: 100%;
  }
}

/* ========== PC Menu ========== */
#menubar {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 801px) {
  #menubar {
    display: block;
    clear: both;
    overflow: hidden;
    background: linear-gradient(#250d00, #543f32);
    padding: 2px 0 5px 0.8%;
    font-size: 18px;
  }

  #menubar ul {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
  }

  #menubar li {
    flex: 1 1 0;
    min-width: 0;
  }

  #menubar li a {
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
    padding: 7px 0;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    text-shadow: 0 -1px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #menubar li:first-child a {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }

  #menubar li a span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
  }

  #menubar_hdr,
  #menubar-s-wrapper {
    display: none !important;
  }
}
/* ========== Responsive Tweaks ========== */
@media (max-width: 799.98px) {
  .site-header {
    padding-right: clamp(48px, 12vw, 80px);
  }

  #menubar_hdr {
    top: clamp(6px, 1.6vw, 10px);
    right: clamp(8px, 2vw, 12px);
    padding: clamp(8px, 1.8vw, 10px) clamp(10px, 2.4vw, 12px);
    font-size: clamp(13px, 3.2vw, 14px);
  }
}

@media (max-width: 465px) {
  .site-header {
    padding-right: clamp(40px, 12vw, 64px);
  }

  .site-header #logo img {
    width: clamp(180px, 68vw, 320px);
  }

  #menubar_hdr {
    padding: 6px 8px;
  }

  #menubar_hdr .label {
    font-size: clamp(12px, 3.2vw, 13px);
    margin-left: 4px;
  }
}

@media (min-width: 1200px) {
  .site-header #logo img {
    width: 700px;
  }

  .container,
  #container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ========== Accessibility & Interaction ========== */
#menubar_hdr:focus-visible,
#menubar a:focus-visible,
#menubar-s a:focus-visible {
  outline: 2px solid #4b9cff;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-contrast: more) {
  #menubar_hdr:focus-visible,
  #menubar a:focus-visible,
  #menubar-s a:focus-visible {
    outline-width: 3px;
  }
}

@media (hover: hover) {
  #menubar li a:hover,
  #menubar-s li a:hover {
    background: #a99e93;
    color: #0d0015;
    text-shadow: none;
  }

  #menubar li a:hover span {
    color: #0d0015;
  }
}

/* ========== 25: パンくずリスト　Breadcrumbs ========== */

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

/* パンくずリストの余白を調整 */
nav[aria-label='breadcrumb'] {
  padding: 5px 15px; /* 左右の余白 */
  background-color: #fff; /* 背景色を薄くして視認性アップ */
  border-radius: 5px; /* 角丸 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
}

nav[aria-label='breadcrumb'] ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* スマホで折り返し表示 */
  font-size: 14px;
  margin: 10px 0;
  min-width: max-content;
}

nav[aria-label='breadcrumb'] li {
  margin-right: 5px;
  white-space: nowrap; /* テキストの折り返し防止 */
  overflow: visible;
}

nav[aria-label='breadcrumb'] li::after {
  content: '›'; /* 区切りの矢印 */
  margin: 0 5px;
  color: #aaa;
}

nav[aria-label='breadcrumb'] li:last-child::after {
  content: ''; /* 最後の項目には区切りを表示しない */
}

nav[aria-label='breadcrumb'] a {
  text-decoration: none;
  color: #74325c;
  font-weight: bold;
}

nav[aria-label='breadcrumb'] a:hover {
  color: #541532; /* ホバー時の色を濃く */
  text-decoration: underline;
}

nav[aria-label='breadcrumb'] li:last-child {
  font-weight: bold;
  color: #555;
}

/* スマホ表示の最適化（800px以下） */
@media screen and (max-width: 800px) {
  nav[aria-label='breadcrumb'] ol {
    font-size: 12px; /* フォントを少し小さく */
    padding: 5px;
    background: #f8f8f8; /* 背景色を追加 */
    border-radius: 5px; /* 角を丸く */
    overflow-x: auto; /* 横スクロール対応 */
    white-space: nowrap; /* 横並び維持 */
  }

  nav[aria-label='breadcrumb'] li {
    margin-right: 3px; /* 間隔を狭く */
  }

  nav[aria-label='breadcrumb'] a {
    color: #333; /* 落ち着いた色合い */
    font-weight: normal; /* 太字を通常に戻す */
  }
}

/* ========== 30: トップ画像（日替わりカード含む） ========== */

.main-image {
  width: 100%;
  height: auto;
  display: block;
}

.main-image-container {
  position: relative;
  --base-pad: clamp(8px, 2vw, 24px); /* コンテナ左の安全余白 */
  --card-w: clamp(40px, 12vw, 100px); /* カードのサイズ（最小40〜最大100px） */
  --offset: clamp(
    11px,
    calc(10.5vw - 22px),
    83px
  ); /* 左オフセット：幅400px付近で≈20px、1000px以上で≈83pxになる直線式をclamp */
}

.main-image-container .card {
  position: absolute;
  bottom: clamp(8px, 2vw, 16px);
  left: calc(var(--base-pad) + var(--offset)); /* これだけで“徐々に右へ”を再現 */
  width: var(--card-w);
  transform: rotate(-20deg);
  transform-origin: 20% 80%;
  z-index: 10;
}

/* 極小幅の保険（超狭い端末でさらに左寄せしたい場合だけ） */
@media (max-width: 340px) {
  .main-image-container {
    --offset: clamp(8px, calc(8vw - 10px), 20px);
  }
}

/* 1000px以下：カードを少し小さく & わずかに左へ */
@media (max-width: 1000px) {
  .main-image-container {
    /* サイズ：12vw→10vw、上限 100→90 で“少し小さく” */
    --card-w: clamp(38px, 10vw, 90px);

    /* 位置：オフセット式を少し弱めて“ちょい左寄せ” */
    /* 例）1000px時：10vw-25px = 75px（元は ≈83px） */
    --offset: clamp(9px, calc(10vw - 25px), 78px);
  }
}

/* ========== 40: 更新情報 (#new #newinfo) ========== */
/* ベース → 600↑ → 400↓/360↓ の順に1セットに統合 */

/* 更新情報ブロックの横幅を狭く＆中央寄せ（PC/タブレット）。100%にしたい場合は下記とスマホの設定を削除 */
#new #newinfo {
  max-width: 820px;
  margin-inline: auto;
}

/* スマホは従来どおり全幅でOK（必要なら） */
@media (max-width: 800px) {
  #new {
    max-width: none;
  }
}

/* 更新情報ブロック：基本スタイル（ベース） */
#new #newinfo {
  --gap: 4px; /* ← ここで“列間”の基準値を定義 */
  --sep: 1px solid #eee; /* ← 下線のスタイル */

  display: grid;
  grid-template-columns: minmax(8ch, max-content) 1fr;
  column-gap: var(--gap);
  row-gap: 8px;
  align-items: stretch; /* 下線を行高いっぱいで揃える */
  padding: 0 6px 0 8px;

  height: 200px; /* 常にスクロール領域にするなら固定でOK */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

/* 日付・本文：共通 */
#new #newinfo dt,
#new #newinfo dd {
  margin: 0;
  float: none;
  position: static;
  width: auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 18px;
}

/* 下線処理（行全体に一本線） */
#new #newinfo dt {
  grid-column: 1;
  position: relative;
  padding-bottom: 8px;
  color: #541532;
}
#new #newinfo dt::after {
  content: '';
  position: absolute;
  left: 0;
  right: calc(-1 * var(--gap)); /* ← 列間ぶん右に延長 */
  bottom: 0;
  border-bottom: var(--sep);
}
#new #newinfo dd {
  grid-column: 2;
  border-bottom: var(--sep);
  padding-bottom: 8px;
}
/* 最終行は下線を消す */
#new #newinfo dt:last-of-type::after,
#new #newinfo dd:last-of-type {
  content: '';
  border-bottom: none;
}

/* 細い帯で下のセクションと区切る */
#new + .section-block::before {
  content: '';
  display: block;
  width: 100%;
  height: clamp(6px, 1.2vw, 10px);
  margin: clamp(14px, 3vw, 24px) 0;
  background: linear-gradient(180deg, #faf8f6, #ffffff);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* 見出し（new-info） */
#main h2.new-info {
  margin-bottom: 5px;
}

/* 600px以上：列幅とギャップを少し広げるだけ（高さは固定のまま） */
@media (min-width: 600px) {
  #new #newinfo {
    grid-template-columns: max-content 1fr;
    --gap: clamp(12px, 1.6vw, 22px);
  }
}

/* 800px以下：フォントを少し小さく */
@media (max-width: 800px) {
  #new #newinfo dt {
    font-size: 16px;
  }
  #new #newinfo dd {
    font-size: 16px;
  }
}

/* 600px以下：フォントをさらに小さく */
@media (max-width: 600px) {
  #new #newinfo dt {
    font-size: 14px;
  }
  #new #newinfo dd {
    font-size: 14px;
  }
}

/* 400px以下：ギャップだけ詰め、文字サイズを控えめに */
@media (max-width: 400px) {
  #new #newinfo {
    --gap: 4px;
    padding-left: 4px;
  }
  #new #newinfo dt {
    font-size: 10px;
    letter-spacing: 0.03em;
    line-height: 1.2;
    padding-top: 2px; /* 上端のズレ微調整 */
    /* color はベースにあるので再指定不要 */
  }
  #new #newinfo dd {
    font-size: 12px;
    line-height: 1.4;
  }
}

/* 360px以下：さらにギャップを少しだけ詰める */
@media (max-width: 360px) {
  #new #newinfo {
    --gap: 3px;
  }
  #new #newinfo dt {
    font-size: 9.5px;
    letter-spacing: 0.02em;
  }
}

/* ========== 44: Components / Q&A (Accordion) ========== */

/*Q&A
---------------------------------------------------------------------------*/
.cp_qa *,
.cp_qa *::after,
.cp_qa *::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.cp_qa .cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 1em 0;
  color: #250d00;
}
.cp_qa .cp_actab input {
  position: absolute;
  visibility: hidden;
  height: 0;
  opacity: 0;
  pointer-events: none; /* クリックなどの操作を無効化 */
  clip: rect(0 0 0 0); /* 古いブラウザ向けの視覚的非表示 */
  clip-path: inset(100%); /* モダンブラウザ向けの視覚的非表示 */
  overflow: hidden;
}

/* 質問 */
.cp_qa .cp_actab label {
  font-weight: bold;
  line-height: 1.6em;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 1em 2em 1em 2.5em;
  cursor: pointer;
  text-indent: 1em;
  border-radius: 0.5em;
  background: rgba(27, 37, 56, 0.1);
}
.cp_qa .cp_actab label::before {
  font-family: serif;
  font-size: 1.5em;
  margin-left: -2em;
  padding-right: 0.5em;
  content: 'Q';
}
.cp_qa .cp_actab label:hover {
  transition: all 0.3s;
  color: #541532;
}

/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
  font-size: 1.7em;
  font-weight: bold;
  line-height: 2em;
  position: absolute;
  top: 0;
  right: 0;
  content: '＋';
  display: inline-block;
  width: 2em;
  height: 2em;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0 2.5em;
  -webkit-transition: max-height 0.2s;
  transition: max-height 0.2s;
  border-radius: 0 0 0.5em 0.5em;
}
.cp_qa .cp_actab .cp_actab-content::before {
  font-family: serif;
  font-size: 1.5em;
  position: absolute;
  margin: 0.4em 0 0 -1em;
  padding: 0;
  content: 'A';
}
.cp_qa .cp_actab .cp_actab-content p {
  margin: 1em 1em 1em 0;
}

/* 質問を開いた時の仕様 */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
  border: 10px solid rgba(27, 37, 56, 0.1);
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {
  color: #541532;
  border-radius: 0.5em 0.5em 0 0;
}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type='checkbox']:checked ~ label::after {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

/* 画面幅480px以下のQ&Aボタン調整 */
@media screen and (max-width: 480px) {
  .cp_button11 {
    margin: 0.8em 6em 1.2em; /* 文字をセンタリング */
    padding: 10px;
    font-size: 16px;
  }
}

/* 375px以下ではさらに詰める */
@media screen and (max-width: 375px) {
  .cp_button11 {
    margin: 0.8em 3em 1.2em; /* より狭い端末で中央寄せ */
    padding: 0.7em;
    font-size: 15px; /* ← ここで少しだけサイズ調整しても◎ */
  }
}

/* ========== 45: 続きを読むボタン（Read more） ========== */

.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: -10px;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}

/* 開いた時にグラデーションを消す */
.rm_box1 input:checked + label {
  background: inherit;
  display: flex;
}

.rm_box1 .rm_container {
  overflow: hidden;
  height: 300px; /* 開く前に見えている部分の高さ */
  transition: height 0.5s ease;
}

/*続きをよむボタン*/
.rm_box1 label::before {
  position: absolute;
  line-height: 2.5rem;
}

.rm_box1 label:after {
  content: '続きをよむ';
  position: absolute;
  bottom: 20px;
  z-index: 2;
  display: inline-block;
  padding: 0.4em 1em;
  max-width: 100%;
  color: #ffffff;
  background: #cca6bf;
  border-radius: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm_box1 label::before {
  position: absolute;
  bottom: 38px;
  left: calc(50% - 3.5em);
  z-index: 3;
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/*閉じるボタン*/
.rm_box1 input:checked + label:after {
  content: '閉じる';
}

.rm_box1 input:checked + label:before {
  left: calc(50% - 2.5em);
  transform: scale(1, -1);
}

.rm_box1 input:checked ~ .rm_container {
  height: auto;
  padding-bottom: clamp(40px, 10vw, 80px);
  transition: all 0.5s;
}

/* ========== 46: ページトップ / PageTop ========== */

/* ページトップ設定
---------------------------------------------------------------------------*/
/* アニメーションのキーフレーム設定（変更不要） */
@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: flex;
  text-decoration: none;
  text-align: center;
  z-index: 100;
  position: fixed;
  width: 50px; /* 幅 */
  height: 70px; /* 高さ */
  bottom: 50px; /* 下から50pxの場所に配置 */
  right: 10%; /* 右から10%の場所に配置。末尾で clamp() によって上書きされます */
  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; /* スペードのマークのすぐ下に配置 */
}

/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 700px) {
  /* ボタンの設定 */
  body.is-fixed-pagetop .nav-fix-pos-pagetop a {
    right: 2%; /* 右から2%の場所に配置。末尾の clamp() によって上書きされます*/
  }
}

/* ==== ページトップボタン：レスポンシブ微調整（末尾パッチ） ==== */
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
  /* サイズは“画面に応じて”最小〜最大の範囲で可変 */
  --btn-w: clamp(44px, 12vw, 56px);
  --btn-h: clamp(56px, 18vw, 76px);
  width: var(--btn-w);
  height: var(--btn-h);

  /* 位置も流体化＋iPhone等の安全領域を考慮 */
  right: clamp(8px, 3.5vw, 24px); /*大画面では var(--content-pad) に上書きされます*/
  bottom: calc(max(clamp(8px, 3.5vw, 24px), env(safe-area-inset-bottom)) + 4px);

  /* 既存の見た目は踏襲（枠線/背景/レイアウトはそのまま） */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

/* アイコンとテキストのサイズも可変に */
body.is-fixed-pagetop .nav-fix-pos-pagetop a .spade {
  font-size: clamp(22px, 7vw, 30px);
  line-height: 1;
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a .top {
  font-size: clamp(10px, 3.2vw, 13px);
  margin-top: 2px; /* アイコンとの間を微調整 */
  letter-spacing: 0.06em;
}

/* ユーザーが“動きを減らす”設定のときはアニメ停止 */
@media (prefers-reduced-motion: reduce) {
  body.is-fixed-pagetop .nav-fix-pos-pagetop a {
    animation: none;
  }
}

/* 大画面で“コンテンツ内”に揃える */
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
  right: var(--content-pad); /*1200px以上では calc(...) に上書きされます*/
  /* bottom は今の指定のままでOK（safe-area 対応のまま） */
}

/* 大画面（コンテナ中央寄せ時）：コンテナ右端から content-pad だけ内側 */
@media (min-width: 1200px) {
  body.is-fixed-pagetop .nav-fix-pos-pagetop a {
    right: calc((100vw - var(--container-max)) / 2 + var(--content-pad));
  }
}

/* ========== 47: Components / Badges (NEW) ========== */

/*トップページの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;
}

/* ========== 50: Eyecatch グリッド（2列＆等比トリミング） ========== */

/* セクション共通設定 */
.section-block {
  padding-top: 1px; /* margin-collapsing防止 */
  margin-bottom: clamp(28px, 7vw, 60px);
  scroll-margin-top: clamp(56px, 10vw, 96px); /* アンカー用 */
}

/* 見出し（center-title） */
#main h2.center-title {
  text-align: center;
  border: 0;
  background: none;
  box-shadow: none;
  color: #432f2f;
  font-weight: 700;
  text-wrap: balance; /* 対応ブラウザで綺麗に折り返し */
  margin: clamp(16px, 4vw, 28px) 0;
  font-size: clamp(22px, 4.2vw, 32px);
  line-height: 1.25;
}

#main h2.center-title .highlight {
  font-size: clamp(1.2em, 4vw, 1.8em);
  font-weight: 800;
  color: #c0392b;
}

/* 極小幅の微調整 */
@media (max-width: 400px) {
  #main h2.center-title {
    font-size: clamp(18px, 6vw, 27px);
    margin: clamp(10px, 3.5vw, 20px) 0;
    letter-spacing: 0.02em;
  }
}
@media (max-width: 360px) {
  #main h2.center-title {
    font-size: clamp(16px, 6.5vw, 23px);
  }
}

/* Eyecatchグリッド（2列） */
.section-block .eyecatch-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 3vw, 20px);
  --card-max: 400px;
  max-width: calc((var(--card-max) * 2) + clamp(10px, 3vw, 20px));
  margin-inline: auto;
  align-items: stretch;
  justify-items: stretch;
}

/* カード項目 */
.section-block .eyecatch-list__item {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.section-block .eyecatch-list__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 白いベール（ホバー時） */
.section-block .eyecatch-list__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
  pointer-events: none;
}
.section-block .eyecatch-list__item:hover::after {
  opacity: 0.2;
}

/* カード内リンク */
.section-block .eyecatch-list__item > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* 画像メディア（20:9比率） */
.section-block .eyecatch-list__media {
  position: relative;
  display: block;
  aspect-ratio: 20 / 9;
  overflow: hidden;
  line-height: 0;
  width: 100%;
}
.section-block .eyecatch-list__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 件数テキスト（span） */
.section-block .eyecatch-list span {
  font-size: 28px;
  color: #a17ccc;
}

/* ========== list2：2列ボックス（観たい！習いたい！買いたい！） ========== */

/* セクションブロック共通 */
.section-block {
  padding-top: 1px;
  margin-bottom: clamp(28px, 7vw, 60px);
  scroll-margin-top: clamp(56px, 10vw, 96px);
}

/* list2：2列レイアウト */
.section-block .list2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 5vw, 40px);
  max-width: 900px;
  margin-inline: auto;
  padding: 0;
}

/* list2の各項目 */
.section-block .list2 li {
  list-style: none;
  max-width: 400px;
}

/* ulの余白リセット（list2以外にも適用されるなら共通化） */
.section-block ul {
  margin: 0;
  padding: 0;
}

/* 件数テキスト（span） */
.section-block .list2 span {
  font-size: 28px;
  color: #a17ccc;
}

/* ボックス内の画像（imgタグに class="img" を付けた場合） */
.section-block .list2 .img {
  height: 100%;
  float: right;
}

/* ホバー時のカード効果（任意で追加） */
.section-block .list2 li {
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.section-block .list2 li:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ========== list-half：画像とテキストの横並びスタイル ========== */

/* 全体ブロック（縦並び → 横並びに切り替え） */
.list-half .list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* 画像ブロック共通（左右配置に対応） */
.list-half .image-l,
.list-half .image-r {
  margin-inline: 1rem;
  position: relative;
}

/* 画像スタイル */
.list-half .image-l img,
.list-half .image-r img {
  border-radius: 50px;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
  display: block;
}

/* テキストブロック */
.list-half .text {
  margin-inline: 1rem;
}

/* ========== 画面幅900px以上：横並びに切り替え ========== */
@media screen and (min-width: 900px) {
  .list-half .list {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .list-half .image-l,
  .list-half .image-r,
  .list-half .text {
    width: 50%;
  }

  /* 画像右配置 */
  .list-half .image-r {
    margin-left: 2rem;
  }

  /* 画像左配置（順序入れ替え） */
  .list-half .image-l {
    order: -1;
    margin-right: 2rem;
  }
}

/* ========== 60: Profile中央揃えの画像とテキスト（center-title / bio-list / icons） ========== */

/* コンテナ：画像とテキストを中央揃え */
.centered-image-container {
  display: grid;
  place-items: center;
  text-align: center;
  margin: clamp(8px, 4vw, 24px) auto;
  padding-inline: clamp(8px, 4vw, 16px);
  margin-bottom: 40px;
}

/* 画像スタイル（スマホ基準） */
.centered-image {
  display: block;
  width: clamp(160px, 60vw, 260px); /* ← fluidで最大300pxまで */
  height: auto;
}

/* メディアクエリ：なだらかに拡大 */
@media (min-width: 400px) {
  .centered-image {
    width: clamp(160px, 54vw, 260px);
  }
}
@media (min-width: 600px) {
  .centered-image {
    width: clamp(160px, 42vw, 300px);
  }
}
@media (min-width: 900px) {
  .centered-image {
    width: clamp(160px, 36vw, 360px);
  }
}

/* ========== Profile Lists：丸型・星型リスト & タイトル ========== */

/* タイトル */
.bio-list-title {
  font-weight: bold;
  text-align: left;
  color: #333;
  font-size: clamp(16px, 4vw, 22px);
  line-height: 1.4;
  margin: 60px 0 20px;
}

/* 丸型リスト */
.bio-list {
  list-style-type: disc;
  padding-left: 1.5em;
}

/* 星型リスト */
.bio-star-list {
  list-style: none;
  padding-left: 1.5em;
}

.bio-star-list li {
  position: relative;
}
.bio-star-list li::before {
  content: '★';
  position: absolute;
  left: clamp(-1.5em, -4vw, -1.05em);
  color: #666;
}

/* 共通：リスト項目 */
.bio-list li,
.bio-star-list li {
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.01em;
  margin-bottom: clamp(10px, 2vw, 20px);
}

/* ベース：大画面では左右20%の余白 */
.bio-list-title,
.bio-list,
.bio-star-list,
.icons {
  margin-inline: 20%;
}

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

/* タブレット〜中画面：左右10%に縮める */
@media (max-width: 1024px) {
  .bio-list-title,
  .bio-list,
  .bio-star-list,
  .icons {
    margin-inline: 10%;
  }
}

/* スマホ：左右5%に */
@media (max-width: 768px) {
  .bio-list-title,
  .bio-list,
  .bio-star-list,
  .icons {
    margin-inline: 5%;
  }
}

/* 極小端末：余白なし or 最小限に */
@media (max-width: 480px) {
  .bio-list-title,
  .bio-list,
  .bio-star-list,
  .icons {
    margin-inline: clamp(8px, 4vw, 24px);
  }
}

@media (max-width: 400px) {
  .bio-list-title {
    font-size: clamp(15px, 5vw, 17px);
    margin: 32px clamp(8px, 4vw, 24px) 12px;
  }

  .bio-list,
  .bio-star-list {
    margin-inline: clamp(8px, 4vw, 24px);
    padding-left: 1.1em;
  }

  .bio-list li,
  .bio-star-list li {
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 20px;
  }
}

/* ========== Social Icons：Facebook / X / YouTube ========== */

/* アイコンリスト全体 */
.icons {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 2.2vw, 16px);
  justify-content: flex-start;
  margin-bottom: clamp(32px, 6vw, 48px);
}

/* 各アイコン項目（伸び縮み防止） */
.icons > li {
  flex: 0 0 auto;
}

/* 共通アイコンスタイル */
.icons i {
  font-size: 50px;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

/* ホバー時の拡大 */
.icons i:hover {
  transform: scale(1.2);
}

/* Facebook */
.icons .fa-square-facebook,
.icons .fa-facebook-f,
.icons .fa-facebook {
  color: #1877f2;
}
.icons .fa-square-facebook:hover,
.icons .fa-facebook-f:hover,
.icons .fa-facebook:hover {
  color: #155db2;
}

/* X（旧Twitter） */
.icons .fa-x-twitter {
  color: #000;
}
.icons .fa-x-twitter:hover {
  color: #333;
}

/* YouTube */
.icons .fa-youtube {
  color: #e60012;
}
.icons .fa-youtube:hover {
  color: #cc0000;
}

/* ========== 70: フッター　Footer（#footermenu など） ========== */

/* ========== Footer：全体スタイル ========== */
footer {
  clear: both;
  background: #541532;
  color: #fff;
  font-size: 0.75rem;
  padding-top: 30px;
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* ========== Footer Menu ========== */
#footermenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: clamp(12px, 2.4vw, 24px);
  padding: 0 clamp(10px, 4vw, 24px);
  margin-bottom: 15px;
  align-items: stretch;
}

/* メニューグループ（列） */
.footer-menu-group {
  flex: 1 1 220px;
  min-width: 200px;
  text-align: left;
}
.footer-menu-group h3 {
  position: relative;
  font-size: 110%;
  color: #fff;
  margin: 0 0 10px;
  padding-bottom: 6px;
  text-align: left;
  background: none;
  border: none;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 180px 1px;
}

.footer-menu-group h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 165px;
  background: rgba(255, 255, 255, 0.3);
}
.footer-menu-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.footer-menu-group ul li {
  margin-bottom: 8px;
}
.footer-menu-group li i {
  margin-right: 0.45em;
  vertical-align: -0.05em;
}

/* ========== コピーライト　Copyright ========== */
#copyright {
  clear: both;
  text-align: center;
  background: #250d00;
  padding: 1rem 0;
  color: #c8c2be;
  font-size: 0.75rem;
}
#copyright a,
#copyright .copyright-note,
#copyright .copyright {
  color: #c8c2be;
  font-size: 0.75rem;
  text-decoration: none;
}

/* ========== レスポンシブ調整 ========== */
@media (max-width: 768px) {
  .footer-menu-group {
    flex-basis: 190px;
    min-width: 180px;
  }
}
@media (max-width: 600px) {
  footer {
    padding-top: 20px;
  }

  #footermenu {
    gap: 12px;
    padding: 0 10px;
    margin-bottom: 10px;
    justify-content: flex-start;
  }

  .footer-menu-group {
    flex-basis: 140px;
    min-width: 130px;
    text-align: left;
    align-items: flex-start;
  }

  .footer-menu-group ul {
    text-align: left;
  }

  .footer-menu-group h3 {
    text-align: left;
    background-position: left bottom;
  }

  .footer-menu-group h3::after {
    left: 0;
    transform: none;
  }

  #copyright {
    padding: 0.5rem 0;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .footer-menu-group {
    flex-basis: 130px;
    min-width: 120px;
  }

  .footer-menu-group h3 {
    background-size: 140px 1px;
  }

  .footer-menu-group h3::after {
    width: 140px;
  }
}

@media (min-width: 1024px) {
  footer .footer-menu-group h3 {
    background-size: 220px 1px;
  }

  .footer-menu-group h3::after {
    width: 220px;
  }
}

@media (prefers-contrast: more) {
  .footer-menu-group h3::after {
    background: rgba(255, 255, 255, 0.5);
  }
}

/* ========== 99: Utilities / Overrides（最小限） ========== */

/* ======= Breakpoints（空のフェンス。必要な時だけ中に書く） ======= */
@media (max-width: 400px) {
  /* 小端末 */
}
@media (min-width: 600px) {
  /* タブレット～ */
}
@media (min-width: 800px) {
  /* PCブレーク */
}
@media (min-width: 1000px) {
  /* ワイドPC */
}
@media (min-width: 1200px) {
  /* 最大幅域 */
}

/* built 8/21 7:37 */