@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/*framework.css*/
/*====テキスト関連====*/
.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

.t-color_aka {
  color: #f00;
}

/*====余白====*/
/*margin*/
.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 1rem;
}

.m-4 {
  margin: 1.5rem;
}

.m-5 {
  margin: 3rem;
}

.m-auto {
  margin: auto;
}

/*margin上*/
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mt-5 {
  margin-top: 3rem;
}

.mt-auto {
  margin-top: auto;
}

/*margin下*/
.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.mb-6 {
  margin-bottom: 4.5rem;
}

.mb-7 {
  margin-bottom: 5rem;
}

.mb-auto {
  margin-bottom: auto;
}

/*margin左*/
.ms-0 {
  margin-left: 0;
}

.ms-1 {
  margin-left: 0.25rem;
}

.ms-2 {
  margin-left: 0.5rem;
}

.ms-3 {
  margin-left: 1rem;
}

.ms-4 {
  margin-left: 1.5rem;
}

.ms-5 {
  margin-left: 3rem;
}

.ms-auto {
  margin-left: auto;
}

/*margin右*/
.me-0 {
  margin-right: 0;
}

.me-1 {
  margin-right: 0.25rem;
}

.me-2 {
  margin-right: 0.5rem;
}

.me-3 {
  margin-right: 1rem;
}

.me-4 {
  margin-right: 1.5rem;
}

.me-5 {
  margin-right: 3rem;
}

.me-auto {
  margin-right: auto;
}

/*margin左右*/
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-4 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-5 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/*margin上下*/
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/*padding*/
.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 1rem;
}

.p-4 {
  padding: 1.5rem;
}

.p-5 {
  padding: 3rem;
}

.p-auto {
  padding: auto;
}

/*padding上*/
.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 1rem;
}

.pt-4 {
  padding-top: 1.5rem;
}

.pt-5 {
  padding-top: 3rem;
}

.pt-auto {
  padding-top: auto;
}

/*padding下*/
.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 1rem;
}

.pb-4 {
  padding-bottom: 1.5rem;
}

.pb-5 {
  padding-bottom: 3rem;
}

.pb-auto {
  padding-bottom: auto;
}

/*padding左*/
.ps-0 {
  padding-left: 0;
}

.ps-1 {
  padding-left: 0.25rem;
}

.ps-2 {
  padding-left: 0.5rem;
}

.ps-3 {
  padding-left: 1rem;
}

.ps-4 {
  padding-left: 1.5rem;
}

.ps-5 {
  padding-left: 3rem;
}

.ps-auto {
  padding-left: auto;
}

/*padding右*/
.pe-0 {
  padding-right: 0;
}

.pe-1 {
  padding-right: 0.25rem;
}

.pe-2 {
  padding-right: 0.5rem;
}

.pe-3 {
  padding-right: 1rem;
}

.pe-4 {
  padding-right: 1.5rem;
}

.pe-5 {
  padding-right: 3rem;
}

.pe-auto {
  padding-right: auto;
}

/*padding左右*/
.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-4 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-5 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-auto {
  padding-left: auto;
  padding-right: auto;
}

/*padding上下*/
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-auto {
  padding-top: auto;
  padding-bottom: auto;
}

/*応用*/
.pcpx5-sppx0 {
  padding-left: 0;
  padding-right: 0;
}

/*透過*/
.opacity90 {
  opacity: 0.9;
}

.opacity80 {
  opacity: 0.8;
}

/**/
.posi-rel {
  position: relative;
}

/*font*/
.fw-600 {
  font-weight: 600;
}

.fs-1rem {
  font-size: 1rem;
}

.fs-2rem {
  font-size: 2rem;
  line-height: 2.2rem;
}

.fs-3rem {
  font-size: 3rem;
}

/*line-height*/
.d-pc-none {
  display: block;
}

.d-sp-none {
  display: none;
}

.d-tab-none {
  display: none;
}

/**/
.d-flex {
  display: flex;
}

.d-wrap {
  flex-wrap: wrap;
}

.d-lg-flex {
  display: inherit;
}

.d-xl-flex {
  display: inherit;
}

.sm50xs100 {
  width: 100%;
}

.md25sm50xs100 {
  width: 100%;
}

.md25sm100 {
  width: 100%;
}

.md33sm100 {
  width: 100%;
}

.lg25sm100 {
  width: 100%;
}

.lg33sm100 {
  width: 100%;
}

.lg40sm100 {
  width: 100%;
}

.lg50sm100 {
  width: 100%;
}

.lg60sm100 {
  width: 100%;
}

.xl25sm100 {
  width: 100%;
}

.xl40sm100 {
  width: 100%;
}

.xl50sm100 {
  width: 100%;
}

.xl60sm100 {
  width: 100%;
}

.lg33sm50 {
  width: 50%;
}

@media screen and (min-width: 576px) {
  /* 576px以上に適用されるCSS（タブレット用） */
  /*====テキスト関連====*/
  .text-sm-start {
    text-align: start;
  }
  .text-sm-center {
    text-align: center;
  }
  .text-sm-end {
    text-align: end;
  }
}
.sm50xs100 {
  width: 50%;
}

.md25sm50xs100 {
  width: 50%;
}

@media screen and (min-width: 768px) {
  /* 768px以上に適用されるCSS（PC用） */
  /*応用*/
  .pcpx5-sppx0 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  /*====テキスト関連====*/
  .text-md-start {
    text-align: start;
  }
  .text-md-center {
    text-align: center;
  }
  .text-md-end {
    text-align: end;
  }
  .d-pc-none {
    display: none;
  }
  .d-sp-none {
    display: block;
  }
  .d-flex {
    display: flex;
  }
  .d-pc-flex {
    display: flex;
  }
  .md25sm50xs100 {
    width: 25%;
  }
  .md25sm100 {
    width: 25%;
  }
  .md33sm100 {
    width: 33%;
  }
}
@media screen and (min-width: 992px) {
  /* 992px以上に適用されるCSS（タブレット用） */
  .d-tab-none {
    display: block;
  }
  .d-lg-flex {
    display: flex;
  }
  .lg25sm100 {
    width: 25%;
  }
  .lg33sm100 {
    width: 33%;
  }
  .lg40sm100 {
    width: 40%;
  }
  .lg50sm100 {
    width: 50%;
  }
  .lg60sm100 {
    width: 60%;
  }
  .lg33sm50 {
    width: 33%;
  }
  /*====テキスト関連====*/
  .text-lg-start {
    text-align: start;
  }
  .text-lg-center {
    text-align: center;
  }
  .text-lg-end {
    text-align: end;
  }
}
@media screen and (min-width: 1200px) {
  /* 120px以上に適用されるCSS（PC用） */
  .d-xl-flex {
    display: flex;
  }
  .xl25sm100 {
    width: 25%;
  }
  .xl40sm100 {
    width: 40%;
  }
  .xl50sm100 {
    width: 50%;
  }
  .xl60sm100 {
    width: 60%;
  }
  /*テキスト関連*/
  .text-xl-start {
    text-align: start;
  }
  .text-xl-center {
    text-align: center;
  }
  .text-xl-end {
    text-align: end;
  }
}
@media screen and (min-width: 1400px) {
  /* 1400px以上に適用されるCSS（PC用） */
}
/* ==========================
   モバイルスクロール安定化
========================== */
/* 100vhの不安定対策 */
/*html, body {
  height: auto; 
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
*/
/* 背景固定によるズレ防止 */
body {
  margin: 0;
  padding-top: 70px; /* ヘッダー高さ分 */
  background-color: #fff;
}

/* iOSでのスクロール対策 */
@supports (-webkit-touch-callout: none) {
  body {
    height: -webkit-fill-available; /* iOS Safariの100vh対策 */
  }
}
body {
  margin: 0;
  font-family: sans-serif;
}

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

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

a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-size: 1.4rem;
  padding: 5px 0px;
}

h2 {
  font-size: 1.4rem;
  padding: 5px 0;
}

h3 {
  padding: 5px 0;
}

p {
  padding: 5px 0;
  line-height: 1.6;
}

#services p {
  text-align: justify;
}

/*リスト行頭*/
ul.notice-list {
  list-style-position: outside; /* ← マーカーを外側に */
  padding-left: 1.5em; /* ← 左に少し余白を確保 */
}

ul.notice-list li {
  text-indent: -1em; /* ← 折り返し時に※の位置を揃える */
}

/*ENDリスト行頭*/
.header {
  background-color: #333;
  color: #fff;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.site-logo {
  font-size: 24px;
  margin: 0;
}
.site-logo a {
  color: #fff;
}

.frame960 {
  max-width: 960px;
}

.bg_kuro333 {
  background-color: #333;
}

.bg_usumidori {
  background-color: #e7e9e7;
}

.t-color_shiro {
  color: #fff;
}

/*==見出しアイコン==*/
/* ▼ 見出しとアイコン共通スタイル */
.section-title {
  display: flex;
  /*align-items: center;*/
  /* justify-content: center;  */ /* 中央寄せ */
  font-size: 2rem;
  color: #222;
  gap: 0.5rem; /* 文字と画像の間隔 */
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-title-white {
  display: flex;
  /*align-items: center;*/
  justify-content: center; /* 中央寄せ */
  font-size: 2rem;
  color: #fff;
  gap: 0.5rem; /* 文字と画像の間隔 */
  text-align: center;
}

.section-icon {
  width: 36px; /* お好みで調整 */
  height: auto;
  display: inline-block;
}

/* スマホ時はアイコンを少し小さく */
@media screen and (max-width: 768px) {
  .section-icon {
    width: 28px;
  }
  .section-title {
    justify-content: center; /* 中央寄せ */
  }
  .section-title, .section-title-white {
    font-size: 1.6rem;
  }
}
/*==END見出しアイコン==*/
/* =====animation.css===== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====btn.css===== */
.bt-moushikomi {
  margin: 10px;
  padding: 10px;
  border: 1px solid #fff;
  display: block;
}

.bt-moushikomi:hover {
  border: 2px solid rgba(255, 35, 35, 0.4588235294);
  color: #ffebeb;
  background-color: rgba(50, 50, 50, 0.4588235294);
}

/* =====etc.css===== */ /* =====font.css===== */
@media screen and (min-width: 992px) {
  /* 992px以上に適用されるCSS（タブレット用） */
}
/* ============================
   ▼ ヒーローセクション
============================ */
.hero-section {
  position: relative;
  height: calc(100dvh - 36px);
  min-height: 465px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://golfrep24-approach.iwafo.jp/images/image2025_01.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
}

@media screen and (min-width: 769px) {
  .hero-section {
    min-height: 380px;
  }
}
@media screen and (max-width: 768px) {
  .hero-section {
    height: 380px;
    justify-content: inherit;
    align-items: inherit;
  }
  .hero-bg {
    background-attachment: scroll; /* iPhoneなどでfixedが効かない対策 */
  }
}
/* ==============================
   ▼ お問い合わせボタン（全体）
============================== */
.contact-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch; /* ← 高さを揃えるポイント */
  max-width: 960px;
  width: 100%;
  margin: 10px auto 30px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 各ボックス */
.contact-item {
  flex: 1 1 calc(50% - 0.5rem);
  display: flex; /* ← flexにすることで高さ合わせしやすく */
}

/* リンク部分 */
.contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  padding: 0.6rem 0.8rem;
  width: 100%;
  height: 100%; /* ← 高さをそろえるために必須 */
  box-shadow: inset 0 0 0 2px #fff;
  border-radius: 0;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background 0.3s;
}

.contact-link:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 文字部分 */
.contact-text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}

.contact-text p,
.contact-text h2 {
  margin: 0;
  color: #fff;
}

/* 画像部分 */
.contact-image img {
  max-width: 60px;
  height: auto;
  margin-left: 0.5rem;
}

/* ==============================
   ▼ スマホ時の調整
============================== */
@media screen and (max-width: 768px) {
  .contact-item {
    flex: 1 1 100%;
  }
  .contact-link {
    flex-direction: column; /* 文字とQRコードを縦並びに */
    text-align: center;
    padding: 0.5rem;
    height: auto; /* スマホでは自動高さに戻す */
  }
  .contact-image img {
    max-width: 80px;
    margin: 0.3rem 0 0;
  }
}
/* ==============================
   ▼ スマホ時
============================== */
@media screen and (max-width: 768px) {
  .contact-item {
    flex: 1 1 100%;
  }
  /* ★ここを column → row に変更！ */
  .contact-link {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left; /* テキストは左寄せ */
    padding: 0.5rem;
  }
  .contact-text {
    font-size: 0.85rem; /* 文字を少し小さく */
  }
  .contact-image img {
    max-width: 70px; /* QRコードを少し小さく */
    margin-left: 10px;
    margin-top: 0; /* 上の余白を消す */
  }
}
/* ==============================
   ▼ ロゴとテキスト
============================== */
.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* ★中央揃え */
  padding: 0 20px;
}

.hero-logo {
  max-width: 280px;
  width: 80%;
  height: auto;
  margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
  .hero-logo {
    max-width: 200px;
    margin-bottom: 15px;
  }
}
.logo-block h2 {
  font-size: 2.2rem;
  margin: 0.5rem 0;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media screen and (max-width: 600px) {
  .logo-block h2 {
    font-size: 1.6rem;
  }
}
/* ==============================
   ▼ スクロール誘導ボタン
============================== */
.scroll-down {
  position: absolute;
  bottom: 30px; /* ★画面下に固定 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #84a1fa;
  font-size: 0.9rem;
  opacity: 0;
  -webkit-animation: fadeIn 1.5s ease-out 2s forwards;
          animation: fadeIn 1.5s ease-out 2s forwards;
}

.scroll-text {
  display: block;
  font-family: "Arial", sans-serif;
  letter-spacing: 2px;
  opacity: 0.8;
}

.scroll-arrow {
  display: block;
  font-size: 1.5rem;
  margin-top: 5px;
  -webkit-animation: bounce 1.5s infinite;
          animation: bounce 1.5s infinite;
  opacity: 0.9;
}

@media screen and (max-width: 768px) {
  .scroll-down {
    bottom: 20px; /* スマホ時は少し上げる */
  }
}
/* ▼ 矢印アニメーション */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ==============================
   ▼ アニメーション
============================== */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in-top {
  opacity: 0;
  -webkit-animation: fadeInDown 1s ease-out 0.1s forwards;
          animation: fadeInDown 1s ease-out 0.1s forwards;
}

.fade-in-logo {
  opacity: 0;
  -webkit-animation: fadeIn 1.2s ease-out 0.5s forwards;
          animation: fadeIn 1.2s ease-out 0.5s forwards;
}

.fade-in-up {
  opacity: 0;
  -webkit-animation: fadeInUp 1.2s ease-out forwards;
          animation: fadeInUp 1.2s ease-out forwards;
}

.delay-1 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.delay-2 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.global-nav .pc-menu {
  display: none;
}
.global-nav .hamburger-menu {
  display: block;
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 110;
}
.global-nav .hamburger-menu__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}
.global-nav .hamburger-menu__bar:nth-child(1) {
  top: 0;
}
.global-nav .hamburger-menu__bar:nth-child(2) {
  top: 9px;
}
.global-nav .hamburger-menu__bar:nth-child(3) {
  top: 18px;
}
.global-nav .hamburger-menu.is-active .hamburger-menu__bar:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}
.global-nav .hamburger-menu.is-active .hamburger-menu__bar:nth-child(2) {
  opacity: 0;
}
.global-nav .hamburger-menu.is-active .hamburger-menu__bar:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}
.global-nav .sp-menu {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
.global-nav .sp-menu.is-open {
  transform: translateX(0);
}
.global-nav .sp-menu__list {
  padding-top: 80px;
  text-align: center;
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.global-nav .sp-menu__item {
  margin-bottom: 20px;
}
.global-nav .sp-menu__link {
  display: block;
  padding: 15px 0;
  color: #fff;
  font-size: 20px;
}
.global-nav .sp-menu__link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
  .global-nav .pc-menu {
    display: flex;
    flex-wrap: wrap;
  }
  .global-nav .pc-menu .global-nav__item {
    margin-left: 30px;
  }
  .global-nav .pc-menu .global-nav__link {
    display: block;
    padding: 10px 0;
    color: #fff;
    transition: color 0.3s ease;
  }
  .global-nav .pc-menu .global-nav__link:hover {
    color: #ddd;
  }
  .global-nav .hamburger-menu {
    display: none;
  }
  .global-nav .sp-menu {
    display: none;
  }
}

/* ===== side.css ===== */
.widget-area {
  padding: 10px 5px;
}

@media screen and (min-width: 992px) {
  /* 992px以上に適用されるCSS（タブレット用） */
  .widget-area {
    max-width: 960px;
    margin: 0 auto;
  }
}
/* ===== main.css ===== */
main {
  position: relative;
  z-index: 1;
  background: #fff;
}

@media screen and (min-width: 576px) {
  /* 576px以上に適用されるCSS（タブレット用） */
}
@media screen and (min-width: 992px) {
  /* 992px以上に適用されるCSS（タブレット用） */
}
/* ===== footer.css ===== */
.site-info {
  padding: 10px;
}

.site-footer {
  background-color: #fff;
  padding: 10px 5px;
  position: relative;
}

.ft-inner .menu {
  display: flex;
  flex-wrap: wrap;
}
.ft-inner .menuli {
  padding: 2px 5px;
}

.ft-bunkatsu {
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.ft-box {
  width: 100%;
  display: inline-block;
  text-align: center;
  margin: 20px auto;
}

.ft-box-black a {
  margin: 5px;
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.ft-info {
  line-height: 2rem;
}

.copyright {
  text-align: center;
}

@media screen and (min-width: 768px) {
  /* 768px以上に適用されるCSS（PC用） */
  .ft-bunkatsu {
    display: flex;
    justify-content: space-between;
  }
  .ft-box {
    width: 45%;
    display: inline-block;
  }
}
@media screen and (min-width: 992px) {
  /* 992px以上に適用されるCSS（タブレット用） */
  #ft-inner {
    max-width: 1280px;
    margin: 0 auto;
  }
}
/* ===== content ===== */
/*＝＝料金コース＝＝*/
.course-table {
  border: 1px solid #666;
  margin: 0;
  padding: 5px;
  width: 100%;
}
.course-table tr {
  font-size: 0.8rem;
}
.course-table tr th, .course-table tr td {
  border: 1px solid #666;
  background-color: #fff;
  text-align: center;
  padding: 5px;
  vertical-align: middle;
}
.course-table .ryoukin th, .course-table .ryoukin td, .course-table .goukei th, .course-table .goukei td {
  background-color: #a8c0e2;
}

/*=====特徴=====*/
.service-title3 {
  font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
  .service-title3 {
    font-size: 1.2rem;
  }
}
/*＝＝＝＝会員になるには＝＝＝＝*/
/* ▼ ステップ全体 */
.member-step {
  padding: 40px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ▼ ボックスを横並び */
.step-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* ▼ 各ステップボックス */
.step-box {
  background: rgba(0, 0, 0, 0.6); /* ← 半透明黒で背景をしっかり落とす */
  color: #fff; /* ← 文字は白 */
  padding: 20px;
  flex: 1 1 30%;
  min-width: 240px;
  box-sizing: border-box;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px); /* ← ぼかし効果（おしゃれ感UP） */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ▼ ステップタイトル */
.step-box dt {
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); /* 背景と重なっても読みやすい */
}

/* ▼ 内容部分 */
.step-box dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ▼ スマホ対応 */
@media screen and (max-width: 768px) {
  .step-container {
    flex-direction: column;
    gap: 15px;
  }
  .step-box {
    width: 100%;
    flex: 1 1 100%;
  }
  .step-box dt {
    font-size: 1.2rem;
  }
  .step-box dd {
    font-size: 0.95rem;
  }
}
/*＝＝＝＝会員になるには内お問い合わせ蘭＝＝＝＝＝*/
/* ==============================
   ▼ よくある質問（FAQ）セクション
============================== */
.faq-contact {
  background-color: #001f3f; /* 紺色背景 */
  padding: 60px 20px;
  color: #fff;
}

.faq-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  gap: 20px;
}

/* 画像部分 */
.faq-image img {
  max-width: 140px;
  height: auto;
  border: 2px solid #fff;
  border-radius: 4px;
}

/* テキスト部分 */
.faq-text {
  flex: 1 1 60%;
}

.faq-text h3 {
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.faq-text ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}

.faq-text ul li {
  font-size: 1rem;
  line-height: 1.8;
  padding-left: 0.5rem;
}

.faq-text p {
  font-size: 1rem;
  margin-top: 10px;
  line-height: 1.6;
}

/* ▼ スマホ対応 */
@media screen and (max-width: 768px) {
  .faq-container {
    flex-direction: column;
    text-align: center;
  }
  .faq-text {
    flex: 1 1 100%;
  }
  .faq-image img {
    max-width: 120px;
    margin-bottom: 15px;
  }
}
/*＝＝＝＝map＝＝＝＝*/
.map-wrap {
  position: relative;
  padding-bottom: 56.25%; /* アスペクト比 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #eee; /* optional */
}

.map-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (min-width: 576px) {
  /* 576px以上に適用されるCSS（タブレット用） */
}
@media screen and (min-width: 768px) {
  /* 768px以上に適用されるCSS（PC用） */
  .course-table tbody tr {
    font-size: 1rem;
  }
  .course-table tbody tr th {
    width: 220px;
  }
  .course-table tbody tr td {
    min-width: 80px;
  }
}
@media screen and (min-width: 992px) {
  /* 992px以上に適用されるCSS（タブレット用） */
}
@media screen and (min-width: 1200px) {
  /* 120px以上に適用されるCSS（PC用） */
}
/*# sourceMappingURL=style.css.map */