/*******************************/
/*** root     ***/
/*******************************/
:root {
  /* ----------------------------
    フォントサイズ (clamp使用)
    最小: 画面幅が小さい時
    最大: 画面幅が広い時
----------------------------- */
  --font-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* 小さめテキスト */
  --font-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); /* 標準テキスト */
  --font-smmd: clamp(0.95rem, 0.875rem + 0.35vw, 1.125rem);
  --font-smd: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); /* sm と md の中間 */
  --font-md: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); /* 少し大きめ */
  --font-lg: clamp(1.75rem, 1.4rem + 0.9vw, 2.5rem); /* タイトル向け */
  --font-ll: clamp(2.5rem, 2rem + 1.5vw, 4rem); /* 特大タイトル・ヒーロー用 */
  --font-xl: clamp(3.5rem, 3rem + 2vw, 6rem); /* ヒーローセクションなどに最適 */
  --font-xxl: clamp(
    5rem,
    4.5rem + 3vw,
    8rem
  ); /* 超特大：キャッチコピー・トップヒーロー */

  /* ----------------------------
    カラー設定（ベースカラー）
----------------------------- */
  /* 通常色 */
  --color-primary: #f6d9d8; /* メインカラー（例：ブランドカラー） */
  --color-secondary: #f0edce; /* セカンダリー（例：ボタンなどの補助色） */
  --color-tertiary: #b18247; /* ターシャリー */
  --color-warning: #e67e22; /* 注意・警告系カラー */
  --color-danger: #e74c3c; /* エラー・重要警告などに使用 */

  /* テキストカラー */
  --color-text-main: #333;
  --color-text-sub: #666;
  --color-text-light: #999;
  --color-text-inverse: #f2f2f2;

  /* 背景色 */
  --color-bg-main: #fff;
  --color-bg-sub: #feffff;
  --color-bg-accent: #e0f7fa;
  --color-bg-dark: #353535;
  --color-bg-darkgray: #353535;
  --color-bg-darkgray-rgb: 53, 53, 53;

  /* アクセントカラー（主にリンクやボタン） */
  --color-accent: #007acc;
  --color-accent-hover: #005fa3;
  --color-accent-light: #e6f3fc;
  --color-accent-text: #ffffff;

  /* ----------------------------
    フォントカラー（文字色）
----------------------------- */
  --font-color-main: #333333; /* メインテキスト：標準の濃いグレー */
  --font-color-sub: #666666; /* サブテキスト：やや薄め */
  --font-color-light: #999999; /* 説明文などの補足用 */
  --font-color-white: #ffffff; /* 白：暗い背景用 */
  --font-color-pink: #ffc1be;
  --font-color-blue: #6a6ba6;
  --font-color-black: #000000;
  --font-color-yellow: #b18247;
  --font-color-footer: #171c61;
}

/*******************************/
/*** フォント指定  ***/
/*******************************/
@font-face {
  font-family: "KTEGAKI";
  src: url("../fonts/KTEGAKI.ttf") format("truetype");
}

@font-face {
  font-family: "Black Bones";
  src: url("../fonts/Black Bones.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/ZenMaruGothic-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/ZenMaruGothic-Bold.ttf") format("truetype");
  font-weight: bold; /* Boldの指定 */
  font-style: normal;
}

@font-face {
  font-family: "Irohamaru";
  src: url("../fonts/irohamaru-Light.ttf") format("truetype");
  font-weight: 300; /* Light */
}

@font-face {
  font-family: "Irohamaru";
  src: url("../fonts/irohamaru-Regular.ttf") format("truetype");
  font-weight: 400; /* Regular */
}

@font-face {
  font-family: "Irohamaru";
  src: url("../fonts/irohamaru-Medium.ttf") format("truetype");
  font-weight: 500; /* Medium */
}

/*******************************/
/*** 画面からはみ出さないための処理  ***/
/*******************************/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  margin: 0; /* ページのデフォルトの余白をなくす */
  overflow-x: hidden; /* 横方向のオーバーフローを隠す */
}

/* 親要素にオーバーフローを隠す */
.parent-container {
  position: relative;
  overflow: hidden; /* はみ出した部分を隠す */
}

/* 絶対配置された要素の位置を調整 */
.absolute-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 幅を親要素に合わせる */
  height: auto; /* 高さを調整 */
}

body {
  max-width: 100vw; /* ビューポート幅を超えないように */
  overflow-x: hidden; /* 横スクロールを隠す */
}

section {
  border: none; /* ボーダーを削除 */
}

h1 {
  letter-spacing: 0.2rem;
}

/*******************************/
/*** 動画  ***/
/*******************************/
video {
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
  outline: none;
  border: none;
}

/*******************************/
/*** クラス指定  ***/
/*******************************/
/*******************/
/* color */
/*******************/
.color-primary {
  color: var(--color-primary);
}
.color-secondary {
  color: var(--color-secondary);
}
.color-warning {
  color: var(--color-warning);
}
.color-danger {
  color: var(--color-danger);
}

/* 背景指定 */
.wave-pink {
  position: relative;
  width: 100%;
  padding-top: 8.95%; /* アスペクト比：高さ ÷ 横幅 × 100（例：172 ÷ 1920 ≒ 8.95%） */
  background-image: url("../images/background/wave-pink.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 横にも縦にもフィット */
  background-position: center;
}

.wave-pink-yellow {
  position: relative;
  width: 100%;
  padding-top: 8.95%; /* アスペクト比：高さ ÷ 横幅 × 100（例：172 ÷ 1920 ≒ 8.95%） */
  background-image: url("../images/background/wave-pink-yellow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 横にも縦にもフィット */
  background-position: center;
}

.wave-yellow-brown {
  position: relative;
  width: 100%;
  padding-top: 8.95%; /* アスペクト比：高さ ÷ 横幅 × 100（例：172 ÷ 1920 ≒ 8.95%） */
  background-image: url("../images/background/wave-yellow-brown.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 横にも縦にもフィット */
  background-position: center;
}

.wave-pink-white {
  position: relative;
  width: 100%;
  padding-top: 8.95%; /* アスペクト比：高さ ÷ 横幅 × 100（例：172 ÷ 1920 ≒ 8.95%） */
  background-image: url("../images/background/wave-pink-white.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 横にも縦にもフィット */
  background-position: center;
}

.wave-white-brown {
  position: relative;
  width: 100%;
  padding-top: 8.95%; /* アスペクト比：高さ ÷ 横幅 × 100（例：172 ÷ 1920 ≒ 8.95%） */
  background-image: url("../images/background/wave-white-brown.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 横にも縦にもフィット */
  background-position: center;
}

.wave-white-yellow {
  position: relative;
  width: 100%;
  padding-top: 8.95%; /* アスペクト比：高さ ÷ 横幅 × 100（例：172 ÷ 1920 ≒ 8.95%） */
  background-image: url("../images/background/wave-white-yellow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 横にも縦にもフィット */
  background-position: center;
}

.wave-yellow-brown2 {
  position: relative;
  width: 100%;
  padding-top: 8.95%; /* アスペクト比：高さ ÷ 横幅 × 100（例：172 ÷ 1920 ≒ 8.95%） */
  background-image: url("../images/background/wave-yellow-brown2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 横にも縦にもフィット */
  background-position: center;
}

.bg-lightpink {
  background-color: var(--color-bg-sub);
  height: auto;
}

.bg-pink {
  background-color: var(--color-primary);
}

.bg-yellow {
  background-color: var(--color-secondary);
}

.section-bg {
  position: relative;
  height: 2px;
  background-color: var(--color-secondary);
}
.section-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px; /* 必要に応じて調整 */
  background-color: var(--color-secondary);
  z-index: 2;
}

.bg-brown {
  background-color: var(--color-tertiary);
}

.bg-white {
  background-color: var(--color-bg-main);
}

.bg-darkgray {
  background-color: rgba(var(--color-bg-darkgray-rgb), 0.6);
}

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

.yellow-brown-line {
  height: 2px;
  border-top: 1px solid var(--color-secondary);
  border-bottom: 1px solid var(--color-tertiary);
}

.section-bottom {
  margin-top: -3px; /* ← 上の部分に10pxだけ重ねる */
  position: relative;
  z-index: 0;
}

/* 背景カラー */
.bg-primary {
  background-color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.bg-warning {
  background-color: var(--color-warning);
}
.bg-danger {
  background-color: var(--color-danger);
}
.bg-main {
  background-color: var(--color-bg-main);
}
.bg-sub {
  background-color: var(--color-bg-sub);
}
.bg-accent {
  background-color: var(--color-bg-accent);
}
.bg-dark {
  background-color: var(--color-bg-dark);
}

/* テキストカラー */
.text-main {
  color: var(--color-text-main);
}
.text-white {
  color: var(--color-text-inverse);
}
.text-pink {
  color: var(--font-color-pink);
}
.text-blue {
  color: var(--font-color-blue);
}
.text-black {
  color: var(--font-color-black);
}
.text-yellow {
  color: var(--font-color-yellow);
}
.text-footer {
  color: var(--font-color-footer);
}

/* アクセントカラー系 */
.text-accent {
  color: var(--color-accent);
}
.bg-accent-hover {
  background-color: var(--color-accent-hover);
}
.bg-accent-light {
  background-color: var(--color-accent-light);
}

/* フォントサイズ */
.text-xs {
  font-size: var(--font-xs);
}
.text-sm {
  font-size: var(--font-sm);
}
.text-sm2 {
  font-size: var(--font-sm);
}

.text-smmd {
  font-size: var(--font-smmd);
}
.text-smd {
  font-size: var(--font-smd);
}
.text-md {
  font-size: var(--font-md);
}
.text-lg {
  font-size: var(--font-lg);
}
.text-ll {
  font-size: var(--font-ll);
}
.text-xl {
  font-size: var(--font-xl);
}
.text-xxl {
  font-size: var(--font-xxl);
}

.text-bold {
  font-weight: bold;
}

.copyright p {
  font-size: var(--font-smd);
}

/* 配置 */
/* margin */
.margin-top-0 {
  margin-top: 0px !important;
}

.margin-top-5 {
  margin-top: 5px !important;
}

.margin-top-10 {
  margin-top: 10px !important;
}

.margin-top-15 {
  margin-top: 15px !important;
}
.margin-top-20 {
  margin-top: 20px !important;
}
.margin-top-25 {
  margin-top: 25px !important;
}
.margin-top-50 {
  margin-top: 50px !important;
}
.margin-top-100 {
  margin-top: 100px !important;
}
.margin-btm-0 {
  margin-bottom: 0px !important;
}
.margin-btm-3 {
  margin-bottom: 3px !important;
}
.margin-btm-5 {
  margin-bottom: 5px !important;
}
.margin-btm-10 {
  margin-bottom: 10px !important;
}

.margin-btm-15 {
  margin-bottom: 15px !important;
}

.margin-btm-20 {
  margin-bottom: 20px !important;
}
.margin-btm-30 {
  margin-bottom: 30px !important;
}
.margin-btm-50 {
  margin-bottom: 50px !important;
}
.margin-btm-100 {
  margin-bottom: 100px !important;
}
.margin-left-20 {
  margin-left: 20px !important;
}
.margin-right-0 {
  margin-right: 0;
  width: 100%;
}
.margin-right-10 {
  margin-right: 10px;
}

/* padding */
.padding-top-50 {
  padding-top: 50px !important;
}

.padding-left-20 {
  padding-left: 20px !important;
}

.padding-left-50 {
  padding-left: 50px !important;
}

/* PCとスマフォ別々の設定 */
.pc-pd-top-100-0 {
  padding-top: 60px;
}

/* line-height-1 */
.line-height-1 {
  line-height: 1;
}

/* flex */
.flex-x {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flex-y {
  display: flex;
  flex-direction: row;
}

.flex-between {
  justify-content: start;
  line-height: 1;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.flex-left {
  justify-content: start;
}

.text-inline {
  display: flex;
  gap: 0.5em; /* 要素間のスペース */
  align-items: start; /* 高さをそろえる */
  line-height: 1;
}

.text-inline2 {
  display: flex;
  gap: 0.5em; /* 要素間のスペース */
  align-items: center; /* 高さをそろえる */
  line-height: 1;
}

.vertical-text-center {
  height: 1em;
  vertical-align: middle;
}

.uniform-text {
  line-height: 1.6; /* ← 高さを揃える */
  margin: 0; /* ← 上下マージンをリセット */
  padding: 0; /* ← 不要な余白もリセット */
}

.fixed-line {
  height: 40px; /* ← 高さを揃える */
  display: flex; /* フレックスで中央揃えに */
  align-items: center; /* 中央寄せ */
  overflow: hidden; /* はみ出し防止（任意） */
  flex-wrap: wrap;
}

.text-space005 {
  letter-spacing: 0.05rem;
}

.text-space06 {
  letter-spacing: 0.6rem;
}

/* 折り返さない */
.no-wrap {
  white-space: nowrap;
}

.inline-no-wrap {
  display: inline-block;
  white-space: nowrap;
}

.gap-20 {
  gap: 20px !important;
}

.gap-50 {
  gap: 50px !important;
}

/* 回転 */
.rotated-10 {
  transform: rotate(-10deg);
}

.vertical {
  writing-mode: vertical-rl; /* 縦書き */
  line-height: 1.1;
}
.vertical-bottom-up {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
}

/* 非表示 */
.no-display {
  display: none;
}

/* フォント */
.ktegaki {
  font-family: "KTEGAKI", sans-serif; /* 優先順でkawaiiフォントを指定 */
}

.black-bones {
  font-family: "Black Bones", sans-serif;
}

.frederika {
  font-family: "Fredericka the Great", cursive;
}

.yugo {
  font-family: "YuGothic", "Yu Gothic", "游ゴシック", "Yugo", sans-serif;
}

.yugo-bold {
  font-family: "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
}

.zen-maru {
  font-family: "Zen Maru Gothic", sans-serif;
}

.irohamaru-light {
  font-family: "Irohamaru", sans-serif;
  font-weight: 300; /* → Light.ttf が使われる */
}

.irohamaru-regular {
  font-family: "Irohamaru", sans-serif;
  font-weight: 400; /* → Regular.ttf が使われる */
}

.irohamaru-medium {
  font-family: "Irohamaru", sans-serif;
  font-weight: 500; /* → Medium.ttf が使われる */
}

/* シャドウ */
.text-shadow {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.box-shadow {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.text-shadow-white {
  text-shadow: 2px 2px 0 #fff; /* 右下にずらした白文字影 */
}
.text-shadow-white::after {
  content: attr(data-text);
  position: absolute;
  top: 2px;
  left: 2px;
  color: white;
  z-index: -1;
  pointer-events: none;
}
.text-shadow-white {
  position: relative;
}

/* 改行指定 デフォルトでは非表示 */
.br-sp {
  display: none;
}

.br-sp-1280 {
  display: none;
}

/* ✅ 文字用：白い光の影 */
.text-shadow-white2 {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* ✅ ボックス用：白いふわっと光る影 */
.box-shadow-white {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

/* ✅ ホバー時に光るボタン風影 */
.box-shadow-white-hover {
  transition: box-shadow 0.3s ease;
}

.box-shadow-white-hover:hover {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

/* ✅ おしゃれな例（カード風の影） */
.card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 20px;
  background-color: white;
}

/* ✅ 応用例：画像に影をつける */
.img-shadow {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

/* width */
.width-150 {
  width: 150px;
}

.container {
  max-width: 1400px;
  width: 100%;
  padding: 0 15px; /* 右と左のパディング */
  margin: 0 auto;
  box-sizing: border-box; /* paddingとborderが含まれるようにする */
}

.container-s {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  padding: 0 5px;
}

.even2-section {
  padding-bottom: 10px;
}

.box-99 {
  padding-top: 20px;
}

/* 基本 */
body {
  color: var(--color-text-main);
  background-color: transparent;
  font-size: var(--font-smd);
  font-family: "Irohamaru", sans-serif;
  font-weight: 400; /* → Regular.ttf が使われる */
}

h2 {
  text-align: center;
  margin: 30px auto 10px auto;
}

h3 {
  margin-bottom: 0px;
  text-align: center;
}

footer {
  padding-bottom: 50px;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 戻るボタンのスタイル */
.back-to-home {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    #e5e7eb,
    #d1d5db
  ); /* 薄グレーで白背景対応 */
  border-radius: 50%; /* 円形 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 白背景で映える影 */
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 1000; /* 最前面 */
}

/* ホバー時のアニメーション */
.back-to-home:hover {
  transform: scale(1.1); /* 軽く拡大 */
  background: linear-gradient(135deg, #f3e8d6, #e2d4b7); /* 薄ゴールドで調和 */
}

/* ホームアイコンのスタイル */
.back-to-home .home-icon {
  width: 24px;
  height: 24px;
  fill: #4b5563; /* 濃いグレーで視認性確保 */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* HOMEテキストのスタイル */
.back-to-home .home-text {
  position: absolute;
  font-size: 10px;
  color: #4b5563; /* アイコンと同色 */
  font-family: Arial, sans-serif;
  font-weight: bold;
  opacity: 0;
  transform: translateY(10px); /* 下からスライドイン */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ホバー時のアニメーション効果 */
.back-to-home:hover .home-icon {
  opacity: 0;
  transform: translateY(-10px); /* アイコンが上にフェードアウト */
}

.back-to-home:hover .home-text {
  opacity: 1;
  transform: translateY(0); /* テキストがスライドイン */
}

/* ホバー時のスタイル */
/* リンクの基本スタイル */
.a-hover {
  text-decoration: none; /* 下線を削除 */
  color: #111; /* 初期文字色 */
  position: relative; /* 擬似要素を配置するため */
  display: inline-block; /* インラインブロック要素 */
  padding: 5px 0; /* 余白調整 */
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* ホバー時のスタイル */
.a-hover:hover {
  color: #999; /* ホバー時の文字色（白） */
  border-bottom: 2px solid #007bff; /* ホバー時の青いボーダー */
}

/* ボーダーアニメーション */
.a-hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff; /* ボーダー色 */
  transform: scaleX(0); /* 初期状態で非表示 */
  transform-origin: bottom right;
  transition: transform 0.3s ease-in-out; /* アニメーション */
}

.a-hover:hover::after {
  transform: scaleX(1); /* ボーダーをスライドイン */
  transform-origin: bottom left; /* スライドインする方向 */
}

/* swiper-slide */
.swiper-container {
  position: relative;
  margin: 0 auto;
}
.swiper {
  width: 450px; /* スライダーの幅を調整 */
  height: 350px; /* 必要に応じて高さを設定 */
  border-radius: 50px;
}
.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.swiper-slide img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: cover; /* 画像が枠内に収まるように調整 */
  transition: transform 0.5s ease, object-position 0.5s ease;
}

.swiper-pagination {
  display: flex; /* Flexboxで配置 */
  flex-direction: row; /* 水平方向に並べる */
  justify-content: center; /* 中央揃え */
  align-items: center; /* 垂直方向の中央揃え（必要に応じて） */
  margin-top: 10px; /* 画像との間隔を空ける */
  bottom: -30px !important;
  position: absolute;
  flex-wrap: wrap;
}
.swiper-pagination-bullet {
  width: 25px;
  height: 10px;
  display: inline-block;
  border-radius: 999px;
  background: #ddd;
  opacity: 0.8;
  margin: 0 5px; /* 左右のマージンで間隔を作る */
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  background: #333;
  opacity: 1;
}

.harbor-logo {
  width: 80%;
  min-width: 200px;
  height: auto;
}

.harbor-logo img {
  width: 100%;
}

/**************************/
/*** 共通で 使用 ***/
/**************************/
.shop-title .irohamaru-medium {
  margin-bottom: 10px;
}

.spot-info {
  display: flex;
  flex-direction: row;
  align-items: center; /* 高さをそろえる */
  line-height: 1;
  gap: 10px;
  margin-right: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.spot-info2 {
  display: flex;
  flex-direction: row;
  align-items: center; /* 高さをそろえる */
  line-height: 1;
  gap: 10px;
  margin-right: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.shop-info {
  display: flex;
  align-items: center; /* 高さをそろえる */
  line-height: 1;
  gap: 0.2rem;
  margin-right: 5px;
  flex-wrap: wrap;
}

.shop-link {
  display: flex;
  align-items: center; /* 高さをそろえる */
  line-height: 1;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.shop-link img {
  margin-bottom: 10px;
}

.shop-link .text-sm {
  margin-bottom: 5px;
}

.z-index-10 {
  position: relative; /* ← これが必須！ */
  z-index: 1000;
}

.left-aligned {
  justify-self: start; /* このアイテムだけ左寄せ */
}

.grid-layout .item-a {
  justify-self: start !important; /* このアイテムだけ左寄せ */
}
/**************************/
/*** footerで 使用 ***/
/**************************/
.footer_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px 10px 30px;
  flex-wrap: wrap;
}

.footer_container div {
  width: 40%;
  margin-bottom: 20px;
}

.footer_container div img {
  width: 80%;
}

.footer_container div ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.base {
  position: relative;
}

.footer-title {
  position: absolute;
  top: -20px;
  z-index: 10;
}

/*****************************
/*** 急遽修正のための変更
/*****************************
/* レスポンジに表示の順番を変更 */
.title-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  grid-template-rows: auto auto; /* 2行 */
  gap: 10px 50px;
}

.grid-layout2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  grid-template-rows: auto auto; /* 2行 */
  gap: 0px 50px;
}

.grid-layout3 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  grid-template-rows: auto auto; /* 2行 */
  gap: 0px 50px;
}

/* 各アイテムの配置を指定 */
.grid-layout .item-a {
  grid-column: 1 / 2; /* 左列 */
  grid-row: 1 / 2; /* 1行目 */
}

.grid-layout .item-b {
  grid-column: 1 / 2; /* 左列 */
  grid-row: 2 / 3; /* 2行目 */
}

.grid-layout .item-c {
  grid-column: 2 / 3; /* 右列 */
  grid-row: 1 / 3; /* 1行目から2行目にまたがる */
}

/* 各アイテムの配置を指定 */
.grid-layout2 .item-a {
  grid-column: 1 / 2; /* 左列 */
  grid-row: 1 / 2; /* 1行目 */
}

.grid-layout2 .item-b {
  grid-column: 1 / 2; /* 左列 */
  grid-row: 2 / 3; /* 2行目 */
}

.grid-layout2 .item-c {
  grid-column: 2 / 3; /* 右列 */
  grid-row: 1 / 3; /* 1行目から2行目にまたがる */
}

/* 各アイテムの配置を指定 */
.grid-layout3 .item-a {
  grid-column: 1 / 3; /* 左列 */
  grid-row: 1 / 2; /* 1行目 */
}

.grid-layout3 .item-b {
  grid-column: 1 / 2; /* 左列 */
  grid-row: 2 / 3; /* 2行目 */
  margin-top: 30px;
}

.grid-layout3 .item-c {
  grid-column: 2 / 3; /* 右列 */
  grid-row: 2 / 3; /* 1行目から2行目にまたがる */
}

.pc-none {
  display: none;
}

.footer-pc-none {
  display: none;
}

.footer-sp-none {
  display: inherit;
}

.footer-section {
  padding-top: 50px !important;
}

/* 通常時のレイアウト（PCやタブレットなど） */
.reco-grid {
  display: grid;
  grid-template-columns: 1fr; /* 通常時は1列 */
  gap: 0px; /* アイテム間のスペース */
  text-align: left;
  justify-content: left !important;
}

.reco-grid .grid-a {
  order: 2; /* 通常時、Aを最初 */
}

.reco-grid .grid-b {
  order: 1; /* 通常時、Bを2番目 */
}

/* 通常時（デフォルト） */
.grid-3x2-positioned {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
}

.grid-3x2 {
  display: grid;
  grid-template-columns: 1fr 1fr clamp(300px, 0%, 0);
}

.grid-item {
  text-align: left;
}

.grid-item ul li {
  margin-bottom: 10px;
}

.back-none {
  height: 200px;
}

.hr-type1 {
  padding-top: 150px;
}

.hr-type1 hr {
  border: 1px solid black;
  z-index: 5;
}

.hr-type2 {
  margin: 0px 0 30px 0;
  padding: 0;
  display: none;
}

.hr-type2 hr {
  border: 0.5px solid black;
  z-index: 5;
}

/*  背景余白対策  */
.bg-pink2 {
  width: 100%;
  height: 3px;
  position: relative;
}

.wave-top {
  position: absolute;
  z-index: 10; /* 前面に重ねる */
  width: 100%;
  top: -1px;
  height: 5px;
}

.wave-bottom {
  position: absolute;
  z-index: 10; /* 前面に重ねる */
  width: 100%;
  bottom: -1px;
  height: 5px;
}

.wave {
  position: absolute;
  z-index: 10; /* 前面に重ねる */
  width: 100%;
  bottom: -1px;
}

@media screen and (max-width: 768px) {
  .copyright p {
    font-size: var(--font-sm);
  }
}
@media screen and (max-width: 468px) {
  .copyright p {
    font-size: var(--font-xs);
  }
}