/* 全てのタグのデフォルト余白を強制リセット */
h1, h2, h3, h4, p, ul, li {
  margin: 0;
  padding: 0;
}/* ==========================================
   ★基本リセット★
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  overflow-x: hidden;
  background-color: #ffffff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  padding-top: 100px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important; /* 横の余計な隙間を隠す */
}

/* ==========================================
   ★ヘッダーのスタイル★
   ========================================== */
.site-header {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95); 
  position: fixed; 
  top: 0;
  left: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
  z-index: 9999; 
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 15px 20px; 
  display: flex;
  justify-content: space-between; 
  align-items: flex-end; 
}

.header-logo-area {
  display: flex;
  flex-direction: column;
  gap: 8px; 
  flex-shrink: 0; 
}

.header-catch {
  font-size: 0.7rem; 
  font-weight: bold;
  color: #000000;
  letter-spacing: 0.05em;
  white-space: nowrap; 
}

.header-logo img {
  height: 42px; 
  width: auto;
  display: block;
}

.header-nav-area {
  display: flex;
  align-items: center;
  gap: 35px; 
}

.header-nav ul {
  display: flex;
  list-style: none;
  gap: 40px; 
  align-items: flex-end; 
}

.header-nav ul li a {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s;
}

.header-nav ul li a:hover {
  opacity: 0.7; 
}

.header-nav ul li a img {
  height: 28px; 
  width: auto;
  display: block;
}

.header-btn a {
  display: inline-block;
  background-color: #421c11; 
  color: #ffffff; 
  text-decoration: none;
  font-size: 1.05rem; 
  font-weight: bold;
  padding: 14px 40px; 
  border-radius: 8px; 
  transition: background-color 0.3s;
  white-space: nowrap; 
}

.header-btn a:hover {
  background-color: #5a291b; 
}

@media (max-width: 1024px) {
  body {
    padding-top: 140px;
  }
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .header-nav-area {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
}


/* ==========================================
   ★メインビジュアル★
   ========================================== */
.main-visual {
  width: 100%;
  overflow: hidden;
  position: relative; 
  z-index: 1;
}

.mv-slider {
  width: 100%;
  height: auto;
}

.main-visual .swiper-slide {
  width: 100% !important;
  position: relative; 
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 💡 メイン画像を大きくしたい場合は、ここの height (現在はなりゆき) の指定を変更してください */
.main-visual .swiper-slide img {
  width: 100%;
  height: auto; 
  display: block;
  object-fit: cover;
}

.mv-caption {
  position: absolute;   
  top: 50%;             
  left: 50%;            
  transform: translate(-50%, -50%); 
  text-align: center;   
  width: 90%;           
  z-index: 5;
}

.caption-title {
  font-size: 4.5rem;      
  font-weight: 800;       
  letter-spacing: 0.02em;
  margin-bottom: 50px;
  color: #421c11;         
  
  text-shadow: 
    3px  3px 0px #ffffff,
   -3px  3px 0px #ffffff,
    3px -3px 0px #ffffff,
   -3px -3px 0px #ffffff,
    0px  3px 0px #ffffff,
    0px -3px 0px #ffffff,
    3px  0px 0px #ffffff,
   -3px  0px 0px #ffffff,
    4px  4px 8px rgba(0, 0, 0, 0.3);
}

.caption-title span {
  display: inline-block;
  color: #ffffff;         
  position: relative;     
  padding: 0 2px;         
  
  text-shadow: 
    3px  3px 0px #421c11,
   -3px  3px 0px #421c11,
    3px -3px 0px #421c11,
   -3px -3px 0px #421c11,
    0px  3px 0px #421c11,
    0px -3px 0px #421c11,
    3px  0px 0px #421c11,
   -3px  0px 0px #421c11,
    4px  4px 8px rgba(0, 0, 0, 0.4);
}

.caption-title span::before {
  content: "";            
  position: absolute;
  top: 13px;              
  left: -2px;             
  width: 1.5px;           
  height: 10px;           
  background-color: #421c11; 
  filter: drop-shadow(1.5px 0px 0px #ffffff) drop-shadow(-1.5px 0px 0px #ffffff) drop-shadow(0px 1.5px 0px #ffffff) drop-shadow(0px -1.5px 0px #ffffff);
  transform: rotate(-35deg); 
}

.caption-title span::after {
  content: "";            
  position: absolute;
  top: 11px;              
  left: 3px;              
  width: 1.5px;           
  height: 10px;           
  background-color: #421c11; 
  filter: drop-shadow(1.5px 0px 0px #ffffff) drop-shadow(-1.5px 0px 0px #ffffff) drop-shadow(0px 1.5px 0px #ffffff) drop-shadow(0px -1.5px 0px #ffffff);
  transform: rotate(-25deg); 
}

.caption-sub {
  font-size: 1.6rem;    
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #421c11;       
  text-shadow: 
    2px  2px 0px #ffffff,
   -2px  2px 0px #ffffff,
    2px -2px 0px #ffffff,
   -2px -2px 0px #ffffff,
    0px  2px 0px #ffffff,
    0px -2px 0px #ffffff,
    2px  0px 0px #ffffff,
   -2px  0px 0px #ffffff,
    3px  3px 6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .caption-title { font-size: 2.4rem; }
  .caption-title span::before { width: 1px; height: 6px; top: 6px; left: -1px; }
  .caption-title span::after { width: 1px; height: 6px; top: 5px; left: 2px; }
  .caption-sub { font-size: 1rem; }
}

.mv-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}

.mv-wave img {
  width: 100%;
  height: auto;
  display: block;
}

.main-visual .swiper-pagination {
  z-index: 11 !important;
  bottom: 40px !important;
}

.main-visual .swiper-pagination-bullet-active {
  background: #421c11 !important;
  width: 12px;
  height: 12px;
}


/* ==========================================
   ★取扱ブランド★
   ========================================== */
.partner-brand-section {
  width: 100%;
  max-width: 1200px; 
  margin: 0px auto 50px; 
  padding: 0 20px;
}
.brand-title-area { text-align: center; margin-bottom: 0px; }
.brand-title-img { height: 105px; width: auto; display: inline-block; }
.brand-slider-container { position: relative; width: 100%; padding: 0 50px; }
.brand-slider { width: 100%; overflow: hidden; }
.brand-slider .swiper-slide {
  display: flex !important; justify-content: center; align-items: center;
  height: auto; background: transparent; 
}
.brand-slider .swiper-slide a { display: block; width: 100%; text-align: center; transition: opacity 0.3s; }
.brand-slider .swiper-slide a:hover { opacity: 0.75; }
.brand-slider .swiper-slide img {
  max-width: 100%; max-height: 300px; width: auto; height: auto;
  display: inline-block; object-fit: contain;
}
.partner-brand-section .swiper-button-next,
.partner-brand-section .swiper-button-prev {
  color: #c4a699 !important; width: 30px; height: 30px; top: 50%; transform: translateY(-50%);
}
.partner-brand-section .swiper-button-next::after,
.partner-brand-section .swiper-button-prev::after {
  font-size: 2rem !important; font-weight: 300;
}
.partner-brand-section .brand-prev { left: 0px !important; }
.partner-brand-section .brand-next { right: 0px !important; }
/* ここでブランドの記述は終了！ */


/* ==========================================
   ★ローディング画面★
   ========================================== */
#loading-screen {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fff; z-index: 9999;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  transition: opacity 0.8s ease;
}
.fade-out { opacity: 0; pointer-events: none; }

.loader-dots { margin-top: 30px; }
.loader-dots span {
  display: inline-block; width: 10px; height: 10px;
  background-color: #333; border-radius: 50%;
  margin: 0 5px; animation: bounce 1.4s infinite ease-in-out both;
}
.loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.loader-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ==========================================
   ★私たちの想い（MIND SECTION）★
   ========================================== */
.mind-section {
  width: 100%;
  background-color: #ffffff;
  padding: 20px 0 0 0; 
  overflow: hidden;
}

.mind-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center; 
  padding-left: 40px;  
}

.mind-content-area {
  width: 55%;
  text-align: center;  
  padding-right: 20px;
}

.mind-title-img-wrap {
  margin-bottom: 0px;
}

/* index.html で menu6 を表示している箇所のスタイルを以下に書き換えてください */

.mind-title-img {
  height: 105px !important; /* 絶対にこの高さを守る */
  width: auto !important;   /* 縦に合わせて横幅を自動決定 */
  display: block;           /* インラインブロックだと余計な余白が入るためブロックに */
  max-width: none !important; /* 親要素の幅制限を無視する */
  min-width: 0 !important;    /* 圧縮を防ぐ */
  object-fit: contain;      /* 比率を守る */
}

.mind-sub-text {
  font-size: 1.1rem;
  color: #333333;
  line-height: 2.1;
  letter-spacing: 0.05em;
  margin-bottom: 45px;
}

.mind-sub-text p {
  margin-bottom: 10px;
}

.mind-btn-wrap {
  text-align: center;
}

.mind-more-btn {
  display: inline-block;
  background-color: #f7e600; 
  color: #000000;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 15px 65px;
  border-radius: 50px;       
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, background-color 0.3s;
}

.mind-more-btn:hover {
  background-color: #e6d500;
  transform: translateY(-2px);
}

.mind-image-area {
  width: 45%; /* 少し広げました */
  position: absolute; /* 親に対して絶対配置 */
  right: 0; /* 右端に密着 */
  top: 0;
  height: 100%;
  display: flex;
  align-items: flex-end; /* 画像を下に揃える */
}

.mind-right-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 900px) {
  .mind-inner {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  .mind-content-area {
    flex: 1;
    text-align: center !important; /* 強制中央寄せ */
  }

  .mind-image-area {
    width: 40%;
    flex-shrink: 0;
  }

  .mind-right-img {
    width: 100%;
    display: block !important;
    object-fit: cover;
    margin-right: 0 !important;
    margin-left: auto !important; /* 右寄せ */
  }
} /* ← これが足りていなかったので追加しました */

@media (max-width: 900px) {
  .mind-inner {
    display: flex !important;
    flex-direction: column !important; /* スマホでは縦並び */
    align-items: center !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  .mind-content-area {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 子要素（テキスト・ボタン）を中央に */
  }

  .mind-image-area {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important; /* 画像を右へ */
  }

  .mind-right-img {
    width: auto !important; /* 画像幅を固定せず本来の比率に */
    max-width: 100% !important;
    display: block !important;
  }
}

/* 確実に適用させるために、より具体的な指定にします */
.mind-section .mind-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  padding-left: 0 !important;
}

.mind-section .mind-content-area {
  width: 100% !important;
  text-align: center !important;
  order: 1; /* テキストを先に配置 */
}

.mind-section .mind-image-area {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 42% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  pointer-events: none; /* テキストクリックの邪魔にならないように */
}

.mind-section .mind-right-img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* 1. テキストエリアに「画像が被らないための右側の余白」を作る */
.mind-section .mind-content-area {
  width: 58% !important; /* テキストエリアの幅を少し狭める */
  margin-right: auto !important;
  margin-left: 0 !important;
  text-align: center !important;
  z-index: 2;
}

/* 2. 画像エリアを画面端ギリギリまで広げる */
.mind-section .mind-image-area {
  position: absolute !important;
  right: 0 !important; /* 画面右端に密着 */
  top: 0 !important;
  width: 42% !important; /* 画面の右42%を使って画像を表示 */
  height: 100% !important;
  z-index: 1; /* テキストの下に配置 */
  pointer-events: none;
}

/* 3. 画像自体を右端に寄せる */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important; /* 画像の右端を基準にする */
}
/* 1. テキストエリアの設定を修正（中央寄せを維持） */
.mind-section .mind-content-area {
  width: 58% !important; 
  margin: 0 auto !important; /* これでテキストボックス自体が真ん中になります */
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* 中身のテキスト・ボタンも中央へ */
  z-index: 2;
}

/* 2. 画像エリアの設定を微調整 */
.mind-section .mind-image-area {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 42% !important;
  height: 100% !important;
  z-index: 1;
  display: flex !important;
  justify-content: flex-end !important; /* 画像をエリア内で右寄せ */
  pointer-events: none;
}
/* 1. コンテナ自体の制限を画像エリアだけ無視させる */
.mind-section .mind-inner {
  position: relative !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
}

/* 2. 画像エリアを画面の「右端」に強制固定する */
.mind-section .mind-image-area {
  position: absolute !important;
  right: 0 !important; /* 画面右端から0px */
  top: 0 !important;
  width: 42% !important; 
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  overflow: hidden; /* はみ出した分を切り取る */
}

/* 3. 画像をコンテナの右端に張り付かせる */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important; /* 画像の右側を基準に表示 */
}

/* 4. テキストエリアの邪魔をしないようにする */
.mind-section .mind-content-area {
  width: 50% !important;
  margin: 0 auto !important; /* これでテキストは常に画面中央 */
  text-align: center !important;
  z-index: 2;
  position: relative;
}
/* 1. セクション全体の背景を確実に伸ばす */
.mind-section {
  width: 100% !important;
  position: relative !important;
  background-color: #ffffff !important; /* もし背景色があるならここを指定 */
}

/* 2. 画像の親エリアを画面幅全体に拡張 */
.mind-section .mind-image-area {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 45% !important; /* 画像の占有幅を少し広げる */
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  background-color: #ffffff; /* 白い隙間が出るなら背景色を揃える */
}

/* 3. 画像を右端へ押し込む */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 100% 50% !important; /* 最右端を基準にする */
}

/* 4. 画面全体の「はみ出し」を防ぐ（重要） */
body {
  overflow-x: hidden !important;
}
/* 1. コンテナの制限を無視して、セクション全体を基準にする */
.mind-section {
  position: relative !important;
  overflow: hidden !important; /* 画像がはみ出た分をカット */
}

/* 2. 画像エリアを絶対配置で右端に強制固定 */
.mind-section .mind-image-area {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 42% !important; /* 画面の右42%幅 */
  height: 100% !important;
  z-index: 1;
}

/* 3. 画像をエリアいっぱいに表示 */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4. テキストエリアを中央に配置 */
.mind-section .mind-content-area {
  position: relative !important;
  z-index: 2; /* テキストを画像より上に */
  width: 100% !important;
  max-width: 1400px !important; /* コンテナの幅制限はここで守る */
  margin: 0 auto !important;
  padding: 40px 20px !important;
  text-align: center !important;
}
/* 確実に右端へ配置するための最終手段 */
.mind-section {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.mind-section .mind-image-area {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important; /* ここで強制的に右端に */
  width: 42% !important;
  height: 100% !important;
  z-index: 1;
}

.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mind-section .mind-inner {
  position: relative !important;
  z-index: 2;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important; /* テキストを真ん中に */
}

.mind-section .mind-content-area {
  width: 100% !important;
  text-align: center !important;
  padding: 40px 20px !important;
}
/* これでダメならキャッシュの問題か、HTMLクラスの記述ミスです */
.mind-right-img {
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  width: 42% !important;
  height: 100vh !important;
  object-fit: cover !important;
  z-index: 9999 !important;
}
/* 画像の背景化を解除し、正しく表示させる */
.mind-section .mind-right-img {
  position: static !important; /* 絶対配置を解除 */
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important; /* 背景として引き伸ばされるのを防ぐ */
}

/* 画像エリアの背景設定を強制リセット */
.mind-section .mind-image-area {
  position: relative !important;
  background-image: none !important; /* もし背景画像なら消す */
  background-color: transparent !important;
  width: 40% !important;
  margin-left: auto !important; /* これで右に寄せる */
}
/* セクション全体をFlexにする */
.mind-section {
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
}

/* 内側のコンテナを中央固定 */
.mind-section .mind-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  position: relative !important;
}
/* 新しい名前の方だけ左寄せにする */
.contact-icon-only {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* テキストエリアを中央に */
.mind-section .mind-content-area {
  flex: 1 !important;
  text-align: center !important;
  z-index: 2;
}

/* 画像エリアを右端へ固定 */
.mind-section .mind-image-area {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 40% !important;
  height: 100% !important;
  z-index: 1;
  display: flex !important;
  justify-content: flex-end !important;
}

/* 画像そのものを右端に揃える */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
}
/* 1. コンテンツの幅制限を無視して、画面端まで広げる */
.mind-section {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important; /* 画面からはみ出た分をカット */
}

/* 2. 画像エリアを「コンテンツの枠」の外へ出す */
.mind-section .mind-image-area {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important; /* 画面の右端ピッタリ */
  width: 45% !important; /* 右側に配置する幅 */
  height: 100% !important;
  z-index: 1;
}

/* 3. 画像をエリアの右端に張り付かせる */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important; /* 画像の右側を基準に表示 */
}

/* 4. テキストエリアは枠の中央に留める */
.mind-section .mind-content-area {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  max-width: 1400px !important; /* ここでヘッダーと幅を揃える */
  margin: 0 auto !important;
  text-align: center !important;
  padding: 40px 0 !important;
}
/* 1. セクションを画面幅いっぱいに広げ、内側の余白を強制解除 */
.mind-section {
  position: relative !important;
  width: 100vw !important; /* 画面の横幅100% */
  left: 50% !important;
  margin-left: -50vw !important; /* 画面中央から左に半画面分ズラすことで強制的に画面幅に */
  overflow: hidden !important;
}

/* 2. 画像エリアを画面右端に固定 */
.mind-section .mind-image-area {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 50% !important; /* お好みで調整 */
  height: 100% !important;
  z-index: 1;
}

/* 3. 画像をエリアの右端に張り付かせる */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
}

/* 4. テキストエリアを中央に配置 */
.mind-section .mind-inner {
  position: relative !important;
  z-index: 2;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
/* 確実に右端に配置する設定 */
.mind-section {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.mind-image-area {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important; /* ここが効くはずです */
  width: 40% !important; 
  height: 100% !important;
  z-index: 10;
  pointer-events: none; /* テキストをクリックできるようにする */
}

.mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
}
/* 1. コンテナ自体を位置基準にする */
.mind-section {
  position: relative !important;
  overflow: hidden !important; /* はみ出し防止 */
  width: 100% !important;
}

/* 2. 画像エリアをコンテンツの枠から外に出して右端に固定 */
.mind-section .mind-image-area {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 45% !important; /* 画面右側の占有幅 */
  height: 100% !important;
  z-index: 1; /* テキストの後ろに配置 */
}

/* 3. 画像をエリアの右端に寄せて引き伸ばす */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important; /* 画像の右端を基準に */
  display: block !important;
}

/* 4. テキストエリアを中央に保つ */
.mind-section .mind-content-area {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  max-width: 1400px !important; /* これによりヘッダーの幅と揃います */
  margin: 0 auto !important;
  text-align: center !important;
  padding: 40px 20px !important;
}
/* セクション全体を安定させる */
.mind-section {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* 画像エリアをセクションの右端に固定 */
.mind-section .mind-image-area {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 35% !important; /* 幅はお好みで調整 */
  height: 100% !important;
  z-index: 0; /* テキストや他の要素の下へ */
}

/* 画像をエリアいっぱいに広げる */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  display: block !important;
}

/* テキストエリアの配置 */
.mind-section .mind-inner {
  position: relative !important;
  z-index: 1; /* 画像より上に配置 */
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  display: flex !important;
  justify-content: flex-start !important; /* テキストの寄せ方を調整可能 */
}
/* セクション全体を安定させる */
.mind-section {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* 画像エリアをセクションの右端に固定 */
.mind-section .mind-image-area {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 30% !important; /* 幅はお好みで調整 */
  height: 100% !important;
  z-index: 0; /* テキストや他の要素の下へ */
}

/* 画像をエリアいっぱいに広げる */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  display: block !important;
}

/* テキストエリアの配置 */
.mind-section .mind-inner {
  position: relative !important;
  z-index: 1; /* 画像より上に配置 */
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0px 20px !important;
  display: flex !important;
  justify-content: flex-start !important; /* テキストの寄せ方を調整可能 */
}
/* 画像自体の表示ルールを変更 */
.mind-section .mind-right-img {
  width: 100% !important;
  height: 100% !important;
  /* cover を contain に変更 */
  object-fit: contain !important; 
  /* 画像が右端に張り付くようにする */
  object-position: right center !important; 
}


/* 本文を大きくする */
.mind-section .mind-sub-text p {
  font-size: 18px !important; /* お好みのサイズに調整してください */
  line-height: 1.8 !important; /* 行間を広げると読みやすくなります */
  margin-bottom: 10px !important;
}


/* 本文の色も必要であればブラウンに合わせる */
.mind-section .mind-sub-text p {
  font-size: 18px !important;
  color: #5D4037 !important; /* 少し落ち着いたブラウン */
  line-height: 2.0 !important;
}


/* 本文の色も黒に合わせる */
.mind-section .mind-sub-text p {
  font-size: 18px !important;
  color: #000000 !important; /* 黒に戻しました */
  line-height: 2.0 !important;
}
/* 「もっと」を囲む親要素を相対配置にする */
.highlight-motto {
  position: relative !important;
  display: inline-block !important;
}

/* 「もっと」の真上にドットを配置 */
.highlight-motto::before {
  content: "・" !important;
  position: absolute !important;
  top: -20px !important; /* 上への距離を調整 */
  left: 50% !important;
  transform: translateX(-50%) !important; /* 中央に合わせる */
  color: #8B4513 !important; /* ブラウン */
  font-size: 24px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}
/* 文字を強調するためのベース設定 */
.highlight-motto {
  position: relative !important;
  display: inline-block !important; /* これがないと位置計算がズレます */
}

/* 「もっと」の真上にドットを配置 */
.highlight-motto::before {
  content: "・・・" !important;
  position: absolute !important;
  top: -25px !important; /* ここで上下位置を調整 */
  left: 50% !important;
  transform: translateX(-50%) !important; /* これで「もっと」の幅の中央に揃う */
  color: #8B4513 !important;
  font-size: 20px !important; /* ドットの大きさ */
  line-height: 1 !important;
  white-space: nowrap !important; /* ドットが改行されるのを防ぐ */
}


/* 「もっと」の上にあるドットだけを残す */
.highlight-motto {
  position: relative !important;
  display: inline-block !important;
}

.highlight-motto::before {
  content: "・・・" !important;
  position: absolute !important;
  top: -25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #8B4513 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* 「もっと」の上のドットをさらに大きく強調 */
.highlight-motto::before {
  content: "・・・" !important;
  position: absolute !important;
  top: -12px !important;    /* ドットを少し上に移動 */
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #8B4513 !important;
  font-size: 30px !important; /* ここを大きくしました（元は20px） */
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* ブランドスライダーセクションの下の余白を詰める */
.partner-brand-section {
  margin-bottom: 0px !important; /* スライダー直下の余白をゼロに */
  padding-bottom: 20px !important; /* 必要に応じて調整 */
}

/* もしくは、その下のセクション（mind-section）の上の余白を詰める */
.mind-section {
  margin-top: -100px !important; /* 上のセクションに少し被せることで詰める */
  padding-top: 40px !important; /* ここで調整 */
}
/* --- ページ内スクロールの設定 --- */

/* 1. クリックした時にヌルッと移動させる */
html {
  scroll-behavior: smooth;
}

/* 2. リンク先がヘッダーの下に隠れないように隙間を作る */
/* 100pxの部分は、もしリンク先がズレるようなら「80px」や「120px」に変えて調整してください */
section {
  scroll-margin-top: 100px; 
}
/* メニューとボタンの間の余白を調整 */
.header-nav-area {
  gap: 10px !important; /* 現在は35pxですが、ここを小さくするとボタンが左に寄ります */
}
/* 1. 全体を左寄せにして隙間をなくす */
.header-inner {
  justify-content: flex-start !important; /* 両端寄せを解除 */
  gap: 50px !important; /* ここでロゴとメニューの間の距離を調整 */
}

/* 2. メニューとボタンをセットで左側に寄せる */
.header-nav-area {
  gap: 20px !important; /* メニューとボタンの間の距離 */
}
.mind-section {
  padding-top: 100px;
}

/* タイトルを上に配置 */
.mind-title-area {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* コンテナを横並びにする */
.mind-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden; /* 画像がはみ出た時の制御 */
}

/* テキストエリア（左側） */
.mind-text-area {
  width: 50%;
  padding-left: 20px;
}

/* 画像を右いっぱいに寄せる */
.mind-image-area {
  width: 45%;
}

.mind-image-area img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-left-radius: 20px; /* お好みで角を丸くしても綺麗です */
  border-bottom-left-radius: 20px;
}
/* mind.html用：2カラムレイアウト */
.page-mind .mind-container {
  display: flex;
  align-items: center; /* 上下中央揃え */
  gap: 40px;           /* テキストと画像の間の隙間 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
}

.page-mind .mind-text-area {
  flex: 1; /* 残りのスペースを埋める */
}

.page-mind .mind-image-area {
  flex: 0 0 40%; /* 画像の幅を40%に固定（大きすぎないサイズに） */
}

.page-mind .mind-image-area img {
  width: 100%;
  border-radius: 10px; /* 少し角を丸くすると綺麗です */
}

/* タイトル画像のサイズ調整 */
.page-mind .mind-title-img {
  max-width: 300px; /* ここでサイズを小さく調整できます */
  margin-bottom: 20px;
}
/* ページ全体でヘッダー分だけ上部に余白を作る */
.mind-section {
      padding: 80px 20px;
    }

    .mind-container {
      display: flex !important;
      align-items: center; /* 中央揃え */
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .mind-text-area {
      flex: 1;
      text-align: center; /* タイトルとテキストを中央に */
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .mind-image-area {
      flex: 0 0 35%; /* 画像の幅を少し小さめに */
    }
    
    .mind-image-area img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 10px;
    }
    
    .mind-title-img {
      max-width: 150px; /* タイトル画像を小さく */
      margin-top: 50px;
      margin-bottom: 50px;
    }
    
    .mind-main-copy {
      font-size: 1.6rem;
      margin-bottom: 20px;
    }
    /* mind.html専用の調整 */
.page-mind .mind-section {
  padding-top: 200px !important; /* ヘッダーが被らないように上に余白を作る */
}

/* 念のため、画像エリアが中央にしっかりくるように設定 */
.page-mind .mind-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

/* タイトル画像のサイズをindexと同じ105pxで固定 */
.page-mind .mind-title-img {
  height: 105px !important;
  width: auto !important;
  display: block;
  margin: 0 auto 30px auto; /* 下に少し余白をあける */
}
.greeting-text {
  /* ゴシック体を優先的に指定する設定 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.8;
  color: #ffffff; /* 画像に合わせて白文字にする場合 */
}
.greeting-title {
  font-size: 1rem;       /* 基本のサイズ（調整可能） */
  margin-right: 15px;    /* 役職と名前の間の隙間 */
  font-weight: normal;   /* 通常の太さ */
}

.greeting-name {
  font-size: 1.9rem;     /* 名前を大きく強調 */
  font-weight: bold;     /* 太字で強調 */
}
/* CSS：!important を付けて強制的に反映させる */
.greeting-title {
  font-size: 1rem !important;
  margin-right: 15px !important;
}

.greeting-name {
  font-size: 1.5rem !important; /* ここを1.9にしました */
  font-weight: bold !important;
}
/* 名前を右寄せにするためのコンテナ設定 */
.greeting-signature-container {
  text-align: right;    /* これで中の要素を右寄せにします */
  margin-top: 30px;
}

.greeting-title {
  font-size: 1rem !important;
  margin-right: 15px !important;
  font-weight: normal !important; /* 太字を解除 */
}

.greeting-name {
  font-size: 1.5rem !important;
  font-weight: normal !important; /* 太字を解除 */
}
/* ロゴのリンク周りの余白や枠線をリセットする設定 */
.header-logo a {
  display: inline-block; /* 配置を崩さないようにする */
  text-decoration: none; /* リンクの下線を消す */
}

.header-logo img {
  display: block; /* imgの下の隙間を消す */
}
/* ロゴのリンク周りのレイアウト固定 */
.logo-link {
  display: block;        /* aタグをブロックにして範囲を画像と一致させる */
  line-height: 0;        /* リンクによる余計な隙間を排除 */
  text-decoration: none;
}

.logo-link img {
  display: block;        /* 画像下の隙間を消す */
  width: 100%;           /* 元の画像の幅を維持 */
  height: auto;          /* 比率を維持 */
  border: none;          /* リンクの青い枠線などを防ぐ */
}

/* もしヘッダー内で画像が大きすぎたり配置がずれる場合 */
.header-logo {
  display: flex;
  align-items: center;
}
/* ロゴのリンク周りのレイアウト固定 */
.logo-link {
  display: block;        /* aタグをブロックにして範囲を画像と一致させる */
  line-height: 0;        /* リンクによる余計な隙間を排除 */
  text-decoration: none;
}

.logo-link img {
  display: block;        /* 画像下の隙間を消す */
  width: 100%;           /* 元の画像の幅を維持 */
  height: auto;          /* 比率を維持 */
  border: none;          /* リンクの青い枠線などを防ぐ */
}

/* もしヘッダー内で画像が大きすぎたり配置がずれる場合 */
.header-logo {
  display: flex;
  align-items: center;
}
/* 親要素から指定して、確実に効かせる */
.header-inner .header-logo a img {
  width: 200px !important; /* ちょうどいいサイズまで数値をいじってみてください */
  height: auto !important;
  display: block;
}
/* ヘッダー全体の設定 */
.header-inner {
  display: flex;
  align-items: center;      /* 縦方向の真ん中に揃える */
  justify-content: space-between; /* 両端に寄せる（ロゴ左、メニュー右） */
  padding: 10px 40px;       /* 適度な余白 */
  flex-wrap: wrap;          /* 幅が狭くなった時に折り返す設定 */
}

/* ロゴエリアの設定 */
.header-logo-area {
  flex: 0 0 auto;           /* ロゴのサイズは固定 */
}

.header-logo img {
  width: 250px !important;  /* ロゴの大きさをここで決める */
  height: auto;
  display: block;
}

/* メニューエリアの設定 */
.header-nav {
  margin-left: auto;        /* これが重要！メニューを右側に押しやる */
}

.header-nav ul {
  display: flex;
  align-items: center;
  gap: 30px;                /* メニュー同士の間隔 */
  list-style: none;
}
.header-inner {
  max-width: 1200px; /* ここが狭すぎるとメニューがロゴに寄ります */
  margin: 0 auto;    /* 中央寄せ */
}
.header-inner {
  display: flex;
  align-items: center;
  padding: 10px 40px;
}

/* ロゴエリアは左端に固定 */
.header-logo-area {
  flex: 0 0 auto; /* 幅を固定して動かさない */
}

/* メニューエリアを右端まで飛ばす */
.header-nav {
  margin-left: auto; /* これだけでロゴとの間にスペースが生まれ、右に寄る */
}

/* お問合せボタン（もしあれば）をさらに右に */
.header-btn {
  margin-left: 30px; /* メニューとボタンの間の隙間 */
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* これで「ロゴ」と「右側のグループ」が左右に離れます */
  padding: 10px 40px;
}

.header-right-group {
  display: flex;       /* メニューとボタンを横並びにする */
  align-items: center;
  gap: 30px;           /* メニューとボタンの間の余白 */
  margin-left: auto;   /* これでグループごと右端に寄る */
}

/* お問い合わせセクション全体の設定 */
.contact-inner {
  display: flex;
  align-items: center;
  max-width: 1400px;
  /* margin: 0 auto; を削除（これで中央寄せが解除されます） */
  margin: 0;           /* 左端に寄せます */
  width: 100%;
}

/* 画像エリア：比率はそのまま */
.contact-img {
  width: 60%;
  flex-shrink: 0;
}

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

/* コンテンツエリア：中央寄せを解除して「左寄り」にする */
.contact-content {
  width: 40%;
  text-align: left;    /* 【重要】ここを center から left に変更 */
  padding-left: 40px;  /* 画像との間に少し隙間を空ける */
}

/* タイトルとボタンを左寄せに */
.contact-title {
  width: 170px;
  margin: 0 0 20px 0;  /* 左右を左寄せに */
  display: block;
}

.contact-btn {
  display: block;
  width: 320px;
  margin: 15px 0;      /* 左右のmarginをautoから0へ */
  padding: 15px 0;
  background-color: #ffeb3b;
  color: #333;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;  /* ボタンの中の文字だけは中央のまま */
}
/* コンテンツエリア：左端基準から少しだけ右へずらす */
.contact-content {
  width: 40%;
  text-align: left;
  padding-left: 0px;
  margin-left: -60px; /* 【重要】ここを調整！マイナスにすると画像側に食い込みます */
  z-index: 2;         /* 画像より手前に表示 */
  position: relative; /* これを入れないとz-indexが効かない場合があります */
}
.contact-btn {
  display: block;
  width: 320px;
  /* margin-left で調整します */
  margin-left: 50px; /* この数字を大きくすると、さらに右に寄ります */
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 15px 0;
  background-color: #ffeb3b;
  color: #333;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
}
/* Web/メール、TELの項目全体を動かす */
.contact-item {
  margin-bottom: 30px; /* 項目同士の間隔 */
  margin-left: 50px;   /* ここを調整！数字を大きくすれば、中身ごと右へ移動します */
}

/* ボタンの調整：左寄せにする */
.contact-btn {
  display: block;
  width: 320px;
  margin: 10px 0;      /* 左端からの余白は contact-item で制御するので 0 に */
  padding: 15px 0;
  background-color: #ffeb3b;
  color: #333;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
}
/* 注意書き（※原則3日以内... / 受付時間...）の設定 */
.contact-note {
  font-size: 0.75rem; /* 文字を少し小さく */
  color: #888;        /* 少し薄いグレーで見やすく */
  margin-top: 8px;    /* ボタンとの隙間を少し開ける */
  margin-left: 5px;   /* テキストをボタンの左端に合わせる微調整 */
}

/* 項目ごとのまとまり */
.contact-item {
  margin-bottom: 30px;
  margin-left: 270px;  /* これで全体が右に寄ります */
}
/* インスタエリアの調整 */
.insta-area {
  margin-top: 30px; /* ボタンとの間隔 */
  text-align: center; /* 念のため真ん中寄せ */
}

/* アイコン画像（menu9）のサイズ */
.insta-icon {
  width: 170px;    /* 他のタイトル画像と同じ幅に合わせました */
  height: auto;
  display: block;
  margin: 0 auto;  /* これでエリア内で真ん中に入ります */
  transition: opacity 0.3s;
}

.insta-icon:hover {
  opacity: 0.8;    /* マウスを乗せた時に少し薄くしてリンクっぽく */
}
/* インスタエリア：お問い合わせのコンテンツ内で真ん中に */
.insta-area {
  margin-top: 40px; 
  text-align: center; /* 左右中央に */
}

.insta-icon {
  width: 100px; /* menu8と同じサイズ */
  height: auto;
  display: block;
  margin: 0 auto; /* アイコンを真ん中に配置 */
}
.insta-section {
  padding: 50px 0;
  text-align: center;
}

.insta-title-area {
  margin-bottom: 30px;
}

.insta-grid-container {
  margin: 0 auto 30px auto;
  max-width: 1000px; /* 全体の幅を調整 */
  padding: 0 20px;
}

.insta-link-area {
  margin-top: 20px;
}
/* インスタセクション全体 */
.insta-section {
  padding: 50px 0;
  background-color: #fff; /* お知らせセクションと合わせる */
}

/* 3列のグリッドを作る */
.insta-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 20px; /* 隙間 */
  margin: 0 auto 30px auto;
  max-width: 1000px; /* 全体の幅を調整 */
  padding: 0 20px;
}

/* 1つの投稿の枠 */
.insta-item {
  width: 100%;
}

/* ★ここが重要：Instagramの埋め込み自体を小さくする */
.insta-item .instagram-media {
  min-width: 100% !important; /* 親要素の幅に合わせる */
  max-width: 100% !important; /* 親要素の幅に合わせる */
  margin: 0 !important; /* 余計な余白を消す */
  height: 350px !important; /* ★高さを固定して、でかさを抑える */
  object-fit: cover; /* ★画像が歪まないように調整 */
}
/* インスタのiframe枠をスッキリさせる */
.snapwidget-widget {
  display: block;
  margin-bottom: 0 !important; /* 下の隙間を消す */
}

/* インスタのエリア全体の設定 */
.insta-section {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 中央揃え */
}

/* menu9の画像が勝手に下に逃げないようにする */
.insta-link-area {
  margin-top: 0 !important; /* 隙間を詰める */
}
.insta-grid-container {
  max-width: 1000px;
  margin: 0 auto !important; /* 強制的に左右中央へ */
  display: flex;
  justify-content: center; /* 中身を真ん中に寄せる */
}

.snapwidget-widget {
  margin: 0 auto !important; /* iframe自体を真ん中に */
  display: block !important;
}
/* インスタリンクにマウスを乗せたときの動き */
.insta-link-area a {
  transition: opacity 0.3s ease;
}
.insta-link-area a:hover {
  opacity: 0.7; /* 少し透けて反応がわかる */
}
/* 全てのスライド画像を同じ高さに強制固定する */
.mv-slider .swiper-slide img {
  width: 100%;
  height: 1000px; /* ここで全ての画像の高さを揃えます */
  object-fit: cover; /* 画像が歪まず、きれいに切り抜かれます */
}

/* 波をスライダーの直下に固定する */
.main-visual {
  position: relative;
}

.mv-wave {
  position: absolute;
  bottom: -1px; /* スライダーの底にピッタリ合わせる */
  left: 0;
  width: 100%;
  z-index: 10;
}
.mv-wave img {
  width: 100%;
  display: block;
}
html {
  scroll-behavior: smooth;
}
/* フッター内のリンクすべてに同じデザインを適用 */
.footer-link {
  color: #fff;
  text-decoration: none;
  font-family: sans-serif; /* 好きなフォントに変更可能 */
  font-weight: normal;    /* 太さを指定 (boldにすれば全リンク太字) */
  display: block;
}
#menu11 {
  scroll-margin-top: 350px; /* ここを調整して高さを変えてください */
}
/* mind-containerを横並びの土台にする */
.mind-container {
  display: flex;         /* 横並びにする */
  align-items: center;   /* 垂直方向の中央揃え */
  justify-content: space-between; /* 左右に隙間を確保 */
  flex-wrap: wrap;       /* 幅が狭くなったら折り返す */
  gap: 40px;             /* テキストと画像の間の隙間 */
  max-width: 1200px;     /* 必要に応じて調整してください */
  margin: 0 auto;
}

/* コンテナ全体を中央寄せして、幅に余裕を持たせる */
.mind-container {
  max-width: 900px;    /* 全体の幅を広げて窮屈さを解消 */
  margin: 0 auto;      /* 画面の中央に配置 */
  padding: 40px 20px;
  text-align: center;  /* 中の要素を中央に寄せる */
}

/* テキストエリアの幅を広げて、きゅっとなるのを防ぐ */
.mind-text-area {
  margin: 0 auto 40px auto; /* 下に隙間を作り、左右中央寄せ */
  max-width: 800px;         /* テキストが広がりすぎない最大幅 */
  text-align: left;         /* 文章自体は読みやすく左寄せ */
}

/* 画像エリアの調整 */
.mind-image-area {
  display: flex;
  justify-content: center; /* 画像を中央に配置 */
}

.mind-image-area img {
  width: auto;             /* 画像の本来のサイズを維持 */
  max-width: 100%;         /* ただしスマホでははみ出さないように */
}
  #loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #fff; z-index: 9999;
    display: flex; flex-direction: column; /* 縦並びにする */
    justify-content: center; align-items: center;
    transition: opacity 0.8s ease;
  }
  .fade-out { opacity: 0; pointer-events: none; }
  
  /* ドットアニメーション */
  .loader-dots { margin-top: 30px; }
  .loader-dots span {
    display: inline-block; width: 10px; height: 10px;
    background-color: #333; border-radius: 50%;
    margin: 0 5px; animation: bounce 1.4s infinite ease-in-out both;
  }
  .loader-dots span:nth-child(1) { animation-delay: -0.32s; }
  .loader-dots span:nth-child(2) { animation-delay: -0.16s; }

 /* --- 1. ローディング画面設定 --- */
#loading-screen {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fff; z-index: 9999;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  transition: opacity 0.8s ease;
  overflow: hidden;
}
.fade-out { opacity: 0; pointer-events: none; }
.loader-logo { width: 300px; max-width: 80vw; height: auto; object-fit: contain; }
.loader-dots { margin-top: 30px; }
.loader-dots span {
  display: inline-block; width: 10px; height: 10px;
  background-color: #333; border-radius: 50%;
  margin: 0 5px; animation: bounce 1.4s infinite ease-in-out both;
}
.loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.loader-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* --- 2. 基本レイアウト --- */
.site-header { height: 60px !important; position: relative !important; width: 100% !important; background-color: #fff !important; }
.header-inner { display: flex !important; justify-content: space-between !important; align-items: center !important; height: 60px !important; padding: 0 15px !important; }
.header-logo-area img { height: 40px !important; width: auto !important; }
.main-visual { position: relative; overflow: hidden; line-height: 0; }
.mv-wave { position: absolute; bottom: -2px; left: 0; width: 100%; z-index: 10; }
.contact-content { text-align: center !important; }
.contact-item { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.contact-btn { display: inline-block !important; margin: 10px auto !important; text-align: center; }
.accent-s::before, .accent-s::after { display: none !important; content: none !important; }

/* --- 3. スマホ専用設定 (768px以下) --- */
@media screen and (max-width: 768px) {
  .menu-btn { display: flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 30px !important; height: 30px !important; cursor: pointer; z-index: 9999 !important; }
  .menu-btn span { display: block; width: 25px; height: 3px; background-color: #333; border-radius: 2px; }
  
  /* メニューの突き抜け防止 */
  #header-nav-group { display: none !important; }
  #header-nav-group.is-open { 
    display: block !important; position: fixed !important; top: 60px !important; left: 0 !important; 
    width: 100vw !important; height: calc(100vh - 60px) !important; 
    background-color: #fff !important; z-index: 9999 !important; 
    padding: 40px 20px !important; text-align: center !important; 
    box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; 
  }
  #header-nav-group.is-open ul { display: flex !important; flex-direction: column !important; gap: 30px !important; padding: 0 !important; margin: 0 !important; }
  .header-btn a { display: inline-block !important; padding: 15px 40px !important; background-color: #333 !important; color: #fff !important; border-radius: 50px !important; }

  /* 画像・セクション調整 */
  .mind-section { padding: 40px 20px !important; }
  .mind-right-img { width: 90% !important; margin: 0 auto 20px !important; display: block !important; height: auto !important; }
  .main-visual { height: 250px !important; }
  .mv-slider img { height: 250px !important; object-fit: cover; }
  .contact-inner { flex-direction: column !important; }
}
/* ページ全体のはみ出しを強制禁止 */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 全ての要素に「はみ出さない計算」を適用 */
* {
  box-sizing: border-box !important;
}
@media screen and (max-width: 768px) {
  /* 1. ブランドロゴのサイズを小さくする */
  .brand-slider .swiper-slide img {
    width: 80% !important;     /* ロゴを少し縮小 */
    margin: 0 auto !important;
    display: block !important;
  }

  /* 2. セクション間の余白（隙間）を狭める */
  section {
    padding: 20px 0 !important; /* 上下の余白をガツンと削る */
  }

  /* 3. ブランドエリアの余白調整 */
  .partner-brand-section {
    padding: 20px 10px !important;
  }
  .brand-slider-container {
    padding: 10px 0 !important;
  }

  /* 4. タイトル画像の巨大化を防ぐ */
  .brand-title-img {
    max-width: 200px !important; /* タイトルを少し小さく */
    height: auto !important;
    margin-bottom: 10px !important;
  }
}
@media screen and (max-width: 768px) {
  /* 想いと問い合わせのタイトル画像をスマホで縮小 */
  .mind-title-img,
  .contact-title {
    max-width: 250px !important; /* 最大幅を小さく制限 */
    width: 80% !important;        /* スマホ画面幅に合わせる */
    height: auto !important;
    display: block !important;
    margin: 0 auto 20px !important; /* 中央寄せ */
  }
}
@media screen and (max-width: 768px) {
  .brand-slider .swiper-slide img,
  .mind-title-img,
  .contact-title {
    width: 80% !important;           /* 幅を基準にする */
    max-width: 250px !important;     /* 最大幅を制限 */
    height: auto !important;         /* 高さ固定を解除（これでぼやけない！） */
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 20px !important;
  }
}
@media screen and (max-width: 768px) {
  /* ブランドセクションの底の余白を詰める */
  .partner-brand-section {
    padding-bottom: 10px !important;
  }

  /* 想いセクションの上の余白を詰める */
  .mind-section {
    padding-top: 10px !important;
  }
}
@media screen and (max-width: 768px) {
  /* 女性の画像を上に引き上げる */
  .mind-image-area {
    margin-top: -100px !important;  /* この数字を大きくするともっと上に上がる */
    margin-bottom: 0 !important;
  }
  
  /* 画像自体の無駄な余白も消す */
  .mind-right-img {
    margin: 0 auto !important;
  }
}
@media screen and (max-width: 768px) {
  /* 既存の .menu-btn 設定があれば上書きします */
  .menu-btn { 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    gap: 5px !important; 
    width: 30px !important; 
    height: 30px !important; 
    cursor: pointer !important; 
    z-index: 9999 !important; 
  }
  .menu-btn span { 
    display: block !important; 
    width: 25px !important; 
    height: 3px !important; 
    background-color: #333 !important; 
    border-radius: 2px !important; 
  }
  
  /* メニューの中身を隠す */
  .header-right-group { display: none !important; }
  
  /* 開いた時に表示する */
  .header-right-group.is-open { 
    display: block !important; 
    position: fixed !important; 
    top: 60px !important; 
    left: 0 !important; 
    width: 100vw !important; 
    height: 100vh !important; 
    background: #fff !important; 
    z-index: 9999 !important; 
    padding: 50px !important; 
  }
}
@media screen and (max-width: 768px) {
  /* PC用メニューを隠す */
  .header-right-group { display: none; }
  
  /* ボタンを表示する */
  .menu-btn { display: block; cursor: pointer; }
  .menu-btn span { display: block; width: 25px; height: 3px; background: #333; margin: 5px; }

  /* メニューが開いた時だけ表示 */
  .header-right-group.is-open { 
    display: block !important; 
    position: fixed; top: 60px; left: 0; width: 100%; background: #fff; 
  }
}
/* --- スマホ用メニューの統合修正 --- */
@media screen and (max-width: 768px) {
  /* 1. ボタンを確実に表示させる */
  .menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    z-index: 10000 !important; /* ヘッダーより上に */
  }
  
  .menu-btn span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background-color: #333 !important;
    margin: 2px 0 !important;
    transition: 0.3s !important;
  }

  /* 2. メニュー本体（デフォルトは非表示） */
  .header-right-group {
    display: none !important; /* 常に非表示にしておく */
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    background-color: #fff !important;
    z-index: 9999 !important;
    padding: 40px 20px !important;
    text-align: center !important;
    overflow-y: auto !important;
  }

  /* 3. クラスが付与された時だけ表示する（最優先） */
  .header-right-group.is-open {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}
/* これをCSSの最後に追加するのではなく、既存の「古いメニュー設定」をこれに書き換える */
@media screen and (max-width: 768px) {
  .menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    z-index: 10000 !important;
  }
  .header-right-group {
    display: none !important;
  }
  .header-right-group.is-open {
    display: block !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    background: #fff !important;
    z-index: 9999 !important;
    padding: 40px 20px !important;
  }
}
@media screen and (max-width: 768px) {
  /* フッター全体のコンテナを縦並びに */
  footer > div {
    flex-direction: column !important;
    gap: 30px !important;
    text-align: center !important;
  }
  
  /* ブランドリストをスマホでは2列にする */
  footer .brand-list-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  /* 各要素の配置を中央揃えに */
  footer .flex-col {
    align-items: center !important;
    border-right: none !important; /* 縦並びなら右線は不要 */
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  /* スマホ版だけ、画像が親要素に対して80%の幅になるようにする */
  .privacy-main-img {
    width: 80% !important;
    max-width: 100% !important;
  }
}
/* 画面幅が 767px 以下（スマホ）の時だけ、この画像を非表示にする */
@media screen and (max-width: 767px) {
  .contact-icon-only {
    display: none !important;
  }
}
.contact-inner {
  position: relative !important; /* 絶対配置の基準にする */
}
.contact-icon-only {
  position: absolute !important; /* 親の左上に固定 */
  left: 0 !important;            /* 左端にぴったり合わせる */
  top: 50% !important;           /* 縦位置を中央に */
  transform: translateY(-50%) !important; /* 中央位置のズレを修正 */
  margin-right: 0 !important;    /* 以前の余白をリセット */
  margin-left: 0 !important;
}
/* CONTACTセクションの余計な余白を消す */
section#contact {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* もし内部のinnerにも余白があるなら */
.contact-inner {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* 1. 親枠自体の左余白をゼロにして左端へ固定 */
div.contact-inner {
  margin-left: 0 !important;
  padding-left: 0 !important;
  left: 0 !important;
}

/* 2. 人物画像（image7.png）の位置とサイズを調整 */
div.contact-inner > img.contact-img {
  left: 0 !important;
  margin-left: 0 !important;
  width: 50% !important;        /* 必要に応じて 55% や 60% に広げてください */
  max-width: 650px !important;   /* 画像自体のサイズ制限を緩める */
}

/* 3. 右側コンテンツの位置調整（必要に応じて） */
div.contact-inner > div.contact-content {
  margin-left: 60% !important;  /* 画像の幅に合わせて調整 */
}
/* 画面幅が短いスマホ表示時（768px以下）の調整 */
@media screen and (max-width: 768px) {

  /* 1. 親枠のリセット */
  div.contact-inner {
    position: static !important;
    min-height: auto !important;
    width: 100% !important;
    padding: 20px 15px !important; /* 上下の余白と左右のパディング */
    box-sizing: border-box !important;
  }

  /* 2. 人物画像：スマホでは非表示にする */
  div.contact-inner > img.contact-img {
    display: none !important; /* ★ここを非表示に設定 */
  }

  /* 3. お問い合わせエリア：右ズレを解除して中央揃えに */
  div.contact-inner > div.contact-content {
    position: static !important;
    width: 100% !important;
    margin-left: 0 !important; /* PC用の右ズレ（50%指定など）を完全にゼロにする */
    margin-right: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
}
/* ====================================================
 * 【1】PC用の安定化設定（画面幅が769px以上のとき）
 * ==================================================== */
/* ====================================================
 * 【1】PC用の設定（オレンジの巨大余白をリセット）
 * ==================================================== */
@media screen and (min-width: 769px) {

  /* 親枠：オレンジの余白（margin-left）を消して親要素いっぱいに広げる */
  div.contact-inner {
    position: relative !important;
    width: 100% !important;
    max-width: 1100px !important;
    min-height: 480px !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    margin-left: 0 !important;      /* ★ここ！オレンジの左余白を強制ゼロに */
    margin-right: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* 左側：人物画像 */
  div.contact-inner > img.contact-img {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 60% !important;
    max-width: 550px !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 1 !important;
  }

  /* 右側：問い合わせエリア全体（画像と重ならない50%〜の位置へ） */
  div.contact-inner > div.contact-content {
    position: relative !important;
    width: 50% !important;
    margin-left: 60% !important;    /* 画像の右側に配置 */
    padding: 20px 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  /* 内部のテキストやボタンを中央揃え */
  div.contact-inner > div.contact-content * {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
}
/* PC用：黄色いボタンの横幅を強制的にゆったりさせる */
@media screen and (min-width: 769px) {

  /* 黄色いボタン（Aタグ、SPANタグ、DIVタグすべてを対象） */
  div.contact-content a,
  div.contact-content span,
  div.contact-content div,
  div.contact-content p {
    /* 背景色がついている要素（ボタン）だけに効かせる指定 */
    box-sizing: border-box !important;
  }

  /* CONTACT US内のリンク・ボタン要素の余白を強制的に広げる */
  div.contact-content a,
  div.contact-content [class*="form"],
  div.contact-content [class*="tel"] {
    display: inline-block !important;
    padding-left: 40px !important;  /* ★左側に40pxの余裕 */
    padding-right: 40px !important; /* ★右側に40pxの余裕 */
    min-width: 220px !important;    /* ★ボタンの最小横幅を220pxに強制固定 */
    height: auto !important;
    line-height: 2.2 !important;     /* 上下のゆとり */
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

}

/* ====================================================
 * 【2】スマホ用の設定（画面幅が768px以下のとき）
 * ==================================================== */
@media screen and (max-width: 768px) {
  /* 親枠：PC用の絶対配置や高さを解除 */
  div.contact-inner {
    position: static !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 30px 15px !important; /* 上下の余白と左右のパディング */
    display: block !important;
    box-sizing: border-box !important;
  }

  /* 人物画像：スマホでは非表示にする */
  div.contact-inner > img.contact-img {
    display: none !important; /* 画像を消す */
  }

  /* お問い合わせエリア：PC用の右ズレを完全に解除して中央揃え */
  div.contact-inner > div.contact-content {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;   /* PC用のmargin-left: 50%をリセット */
    padding: 0 !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  
  /* ボタンやテキストがはみ出ないように念のため */
  div.contact-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}