@charset "UTF-8";

#vanta-bg {
  position: fixed; /* 背景として固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1000; /* コンテンツより下 */
}
img {
  max-width: 100%;
  height: auto;
  image-rendering: auto;
}
.contact-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}
@media (max-width: 768px) {
  .second-right-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px;
    align-items: stretch;
  }

  .pallax-container,
  .pallax-container1 {
    width: 100%;
    height: 220px; /* ← 商品カードっぽいサイズに統一 */
    top: 0;
    right: auto;
  }
}
/*
    -------------------------------------------
    フェードインアニメーションのCSS
    -------------------------------------------
    このセクションでは、ウェブサイトの要素を滑らかに表示するためのアニメーションを定義します。
    要素が下からフェードインしてくる効果を作成します。
*/

/* アニメーションのキーフレームを定義 */
@keyframes fadeInSlideUp {
  from {
      opacity: 0;           /* 開始時は透明 */
      transform: translateY(20px); /* 開始時は下に20pxずらす */
  }
  to {
      opacity: 1;           /* 終了時は不透明 */
      transform: translateY(0);    /* 終了時は元の位置に戻す */
  }
}

.fade-text {
  opacity: 0; /* 最初は透明 */
  transform: translateY(-20px); /* 少し下にずらしておく */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの設定 */
}

/* 文字がビューポートに入った時の状態 */
.fade-text.is-visible {
  opacity: 1; /* 不透明にして表示 */
  transform: translateY(0); /* 元の位置に戻す */
}



/* fade-in-element クラスにアニメーションを適用 */
.fade-in-element {
  opacity: 0;                         /* デフォルトは非表示 */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* アニメーションを滑らかにするためのトランジション */
}

/* アニメーションが適用されたときの状態 */
.fade-in-element.is-visible {
  opacity: 1;                         /* 表示状態 */
  transform: translateY(0);           /* 元の位置 */
  animation: fadeInSlideUp 2s forwards; /* アニメーションを適用し、終了状態を保持 */
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* 横スクロール防止 */
}

html {
  font-size: 62.5%;
}

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

header.header {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  position: relative;
  z-index: 1;
}

/* 全体のリセットと基本的な設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Garamond", "Palatino Linotype", "Times New Roman", serif;
  line-height: 1.6;
  margin: 0; /* デフォルトのbodyマージンを削除 */
  padding: 0; /* デフォルトのbodyパディングを削除 */
  overflow-x: hidden;
}
body {
  margin: 0; /* デフォルトのbodyマージンを削除 */
  padding: 0; /* デフォルトのbodyパディングを削除 */
}

/* 全体のレイアウト */
/* 一般的なベストプラクティス */
* {
  box-sizing: border-box; /* パディングとボーダーが要素の合計幅/高さに含まれるようにする */
}

/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/* NAV-Menu*/
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
 

/* Contact Section Specific Styles */
 .contact-hero {
  padding: 80px 20px;
  text-align: center;
  
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .contact-grid {
      grid-template-columns: 1fr;
  }
}

.form-input {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

.submit-btn {
  background-color: #333;
  color: white;
  padding: 15px 40px;
  border-radius: 9999px;
  font-weight: bold;
  transition: all 0.3s;
  margin-top: 20px;
}

.submit-btn:hover {
  background-color: #555;
  transform: translateY(-2px);
}

.contact-info-card {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.map-container {
  width: 100%;
  height: 400px;
  background: #eee;
  border-radius: 8px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

footer {
  background: #fff;
  padding: 60px 20px;
  border-top: 1px solid #eee;
  text-align: center;
}
.book-icon-container {
  width: 20px;
  border-radius: 12px;
  text-align: right;
  margin-left: 50px;
}
/* SVGアイコンのスタイル */
.book-icon {
  position: fixed;
  margin-top: -40px;
  text-decoration: none;
  color: #ffffff;
  font-size: 0.4em;
  right: 84px;
  top: 0px;
  border-radius: 5px;
  display: flex; /* アイコンとテキストを横並びにするため */
  align-items: right;
  gap: 8px; /* アイコンとテキストの間隔 */
  width: 35px;
  cursor: pointer; /* ホバーでポインター表示 */
  display: block;
  /* SVG内部の線の色を設定 (currentColorを使用しないため、直接指定) */
  stroke: #000000; /* 線の色（SVG内のstroke属性を上書き）*/
  transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out,
    transform 0.3s ease-in-out;
  margin-top: 40px;
  opacity: 1000;
}
.icon-label {
  position: fixed;
  font-size: 0.8em;
  color: #000000;
  font-weight: 400;

  top: 79px;
  right: 89px;
}

.main-header {
  /* 既存のスタイルを維持しつつ、メニューパネルの基準にする */
  position: absolute;
  top: 20px;
  right: 42px;

  /* main-navを基準にするため、ここをrelativeに設定しない */
}

.main-nav {
  position: relative; /* nav-menu-panel の絶対配置の基準 */
  display: flex; /* menu-button と menu-panel の配置用 */
  flex-direction: column; /* 縦に並べる */
  align-items: flex-end; /* 右寄せ */
}

.menu-button {
  position: fixed;
  margin-top: -60px;
  text-decoration: none;
  padding: 1vw 1.5vw; /* パディングにビューポート単位を使用 */
  border-radius: 5px;
  display: block;
  opacity: 0.4;
  margin-right: 100px;
  display: flex; /* アイコンとテキストを横並びにするため */
  align-items: center;
  gap: 8px; /* アイコンとテキストの間隔 */
  cursor: pointer; /* ホバーでポインター表示 */
}

.menu-icon {
  /* ハンバーガーアイコンの代わりにシンプルな四角形を例示 */
  width: 20px;
  height: 20px;
  background-color: #333; /* アイコンの色 */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>')
    no-repeat center;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>')
    no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
}

/* ナビゲーションメニューパネルのスタイル */
.nav-menu-panel {
  position: fixed;
  top: -100%; /* menu-button と同じ高さに開始 */
  right: 0;
  width: 200px; /* メニューパネルの幅 */

  height: 60vh;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transform: translateY(0%); /* 初期状態では右に完全に隠す */
  visibility: hidden; /* 初期状態では要素自体を非表示 */
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s; /* スムーズなアニメーション */
  pointer-events: none; /* 非表示時はマウスイベントを無効化 */
  flex-direction: column;
  justify-content: space-between; /* 項目とSNSアイコンを上下に配置 */
  display: flex;

  padding-top: 165px;
}

/* メニューパネルが表示された時のスタイル */
.nav-menu-panel.is-open {
  transform: translateY(100vh); /* 完全に表示 */
  opacity: 1; /* 不透明 */
  visibility: visible; /* 表示 */
  pointer-events: auto; /* 表示時はマウスイベントを有効化 */
}

/* ... 既存の.nav-menu-panel のCSSはそのまま残す contact... */


.nav-menu-panel ul {
  list-style: none;
  padding: 0; /* paddingをリセットして位置のズレを防ぐ */
  margin: 0; /* marginもリセット */
  flex-grow: 1;
  flex-direction: column;
  justify-content: center; /* 項目を垂直方向の中央に寄せる */
  height: 100%; /* 親要素の高さいっぱいに広げる */
}

.nav-menu-panel ul li {
  margin-bottom: 10px;
  text-align: center;
}

.nav-menu-panel ul li a:hover {
  border-radius: 4px; /* ★追加: ホバー時の背景に丸み */
}
.nav-menu-panel ul li a {
  text-decoration: none;
  color: #333;
  font-size: 1.1em;
  padding: 8px 15px;
  display: block;
  transition: background-color 0.2s ease, color 0.2s ease;
  z-index: 100;
  position: relative; /* ★重要: 疑似要素の基準点とする */
  overflow: hidden; /* ★重要: 初期状態の線がはみ出さないように */
}

.nav-menu-panel ul li a:hover {
  border-radius: 4px; /* ホバー時の背景に丸み */
}

/* ★メニューリストのリンクにホバー時の線のアニメーション★ */
.nav-menu-panel ul li a::before {
  content: "";
  position: absolute;
  top: 50%; /* 垂直方向の中央に配置 */
  left: 30%; /* 左端から開始 */
  width: 0%; /* 初期状態では幅0 */
  height: 0.5px; /* 線の太さ */
  background-color: #333; /* 線の色 */
  transform: translateY(-50%, -50%); /* 自身のY軸中央を基準に配置 */
  transition: width 0.3s ease-out; /* 幅のアニメーション */
}

.nav-menu-panel ul li a:hover::before {
  width: 40%; /* ホバー時に幅を100%にする */
}

.social-icons a {
  display: inline-block; /* 横並びにして、幅や高さを設定できるようにする */
  margin: 0 1px; /* 左右に8pxのマージンを設定して、アイコン間にスペースを作る */
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out; /* ホバー時のアニメーションを滑らかにする */
}

/* マウスホバー時にアイコンを少し大きくし、色を変える */
.social-icons a:hover i {
  transform: scale(1.1); /* 1.1倍に拡大 */
  color: #888888; /* 例：ホバー時に青色にする */
}

/* 特定のアイコンの色をカスタマイズしたい場合（例：InstagramとTwitterのブランドカラー） */
.social-icons .fa-instagram {
  color: #888888; /* Instagramのブランドカラー */
}
.social-icons .fa-twitter {
  color: #888888; /* Twitterのブランドカラー */
}

.social-icons a:hover .fa-instagram {
  color: #888888; /* ホバー時のInstagramカラーを少し濃くする */
}
.social-icons a:hover .fa-twitter {
  color: #888888; /* ホバー時のTwitterカラーを少し濃くする */
}
.social-icons {
  display: flex;
  justify-content: flex-end; /* ★変更: 右寄せにする（写真のメニューの見た目に近い） */
  gap: 15px;
  padding-right: 15px; /* ★追加: リンクの右パディングに合わせて余白を追加 */
  justify-content: center;
  padding-bottom: 40px;
}

.social-icons img {
  width: 24px; /* アイコンのサイズ */
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.social-icons i {
  font-size: 20px; /* アイコンのサイズを設定 */
  color: #333; /* アイコンの色を設定（例：濃いグレー） */
  vertical-align: middle;
  margin-left: 15px;

  /* テキストなどと並んだときに中央揃えにする */
}
.social-icons img:hover {
  opacity: 1;
}

/***********/ /***********ginger-illustration/***********/ /***********/
/***********/
***********/***********/***********/***********/***********

.ginger-illustration {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 120px;
  height: auto;
  z-index: 10;

  opacity: 0.3;
}
.ginger-illustration {
  transition: transform 0.2s ease-out;
}

.ginger-illustration:hover {
  transform: translateY(-7px);
}

.ginger-icon-container {
  position: fixed;
  bottom: 20px;
  left: 0px;
  width: 120px;
  height: auto;
  z-index: 10;
}

.ginger-icon {
  width: 50px;
  height: auto;
  display: block;
  margin: 0 auto 15px auto;

  fill: #000000;
  stroke: #000000;

  transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

.ginger-icon-container:hover .ginger-icon {
  fill: #c78d2b;
  stroke: #c78d2b;
  transform: scale(1.05);
}
.ginger-icon-container:hover .icon-label {
  color: #c78d2b;
}
@keyframes wobble {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-5px) rotate(-3deg);
  }
  75% {
    transform: translateX(5px) rotate(3deg);
  }
}
.ginger-icon {
  animation: wobble 10s infinite;
}

/***********/ /***********brand-info/***********/ /***********/
/***********/
***********/***********/***********/***********/***********




 .category-info {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0;
  color: #000000;
  gap: 10px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.brand-info,
.category-info,
.category-info1 {
  position: fixed;
  bottom: 50px;
  right: 60px;
  z-index: 1000;
}
.category {
  font-size: 1.5rem;
  color: #888888;
}

.brand-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: auto;
  text-align: right;
}

.category-info .category-title {
  font-family: serif;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 5px;
  color: #000000;
}

/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/* side-bar/
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/




/* セクションのスタイル設定 */
.section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  text-align: center;
  color: #333;
  position: relative; /* サイドバーの配置のために必要 */
}

.section:nth-child(even) {
  background-color: #e9e9e9;
}

/* アニメーションさせたい文字の初期状態 */
.fade-text {
  opacity: 0; /* 最初は透明 */
  transform: translateY(20px); /* 少し下にずらしておく */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* アニメーションの設定 */
}

/* 文字がビューポートに入った時の状態 */
.fade-text.is-visible {
  opacity: 1; /* 不透明にして表示 */
  transform: translateY(0); /* 元の位置に戻す */
}

.vertical-text {
  position: absolute;
  left: 40%;
  top: 40%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.3em;
  color: #555;
  letter-spacing: 0.2em;
}

/* 左側のサイドバーのスタイル */
.sidebar-left {
  position: absolute;
  left: 70px;
  top: 180px;
  transform: translateY(-50%);
  width: 50px;
 
}



/* 新しい.vertical-textのスタイル */
.sidebar-left .vertical-text {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.6em;
  color: #555;
  letter-spacing: 0.2em;
}

/* 以前の.vertical-textのスタイルを上書き */
.sidebar-left .vertical-text {
  font-size: 1.3rem;
  text-orientation: upright;
  color: #333;
  font-weight: 500;
}
.vertical-text::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -37%;
  transform: translateX(-50%);
  width: 0.8px;
  height: 85px;
  background: linear-gradient(to bottom, #bbb9b9 80%, #9e9e9e 30%, #000000 30%);
}

.vertical-text {
  writing-mode: vertical-rl; /* 縦書き */
  text-orientation: mixed; /* 文字の向きを維持 */
  font-size: 1rem;
  color: #555;
  padding: 10px;
}











/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/* メインコンテンツラッパー */

/* ベーススタイル */
.main-content-wrapper {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  width: 100%;
  padding: 0; /* ← 外枠の余白をなくす */
  gap: 0; /* ← パネル間の余白をなくす */
}

.left-panel {
  flex: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向中央寄せ */
  align-items: flex-start; /* 横方向は左寄せ */
  box-sizing: border-box;
  text-align: left;
  padding-top: 800px; /* 中央より少し下にずらす */
  padding-left: 200px; /* 左余白少し */
  height: 100vh; /* 画面全体の高さ */
}

.left-panel h1 {
  font-size: clamp(2.5em, 4vw, 3.5em);
  margin: 0 0 24px 0; /* 上0、下24px */
  font-weight: 300;
  word-spacing: 10px;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: -100;
  padding-bottom: 50px;
}

.description-line1,
.description-line2,
.description-line3 {
  font-size: clamp(1.8em, 2vw, 1.8em);
  line-height: 1.8;
  word-spacing: 0.5vw;
  margin-bottom: 30x; /* ← px で固定 */
  text-align: left;
}

.description-line1,
.description-line2,
.description-line3 {
  max-width: 500px; /* ← 適度な幅で固定 */
  text-align: left;
  padding-bottom: 80px;
}

.right-panel {
  flex: 1.8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* ← 左寄せ */
  margin: 0;
  padding-left: 2vw; /* ← 左にちょっと余裕を出したい場合だけ */
  z-index: -100;
}

/* カルーセル */
.carousel-container {
  position: relative;
  width: 100%; /* パネル幅に応じて広がる */
  height: 100%;
  max-width: 400px; /* ← 最大幅を制御（ここで「適度な大きさ」を調整） */
  aspect-ratio: 1 / 2;
  border-radius: 15px;
  overflow: hidden;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px; /* ← 画像とドットの間に余白をつける */
}
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.carousel-track {
  display: flex;
  transition: transform 0.8s ease-in-out;
  width: 100%; /* JSでtranslateXする */
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bbb;
  cursor: pointer;
  transition: background 0.3s;
}

.carousel-image {
  transition: transform 1s ease-in-out;
  min-width: 100%; /* ← 画像1枚ごとに幅を固定 */
  height: auto;
  object-fit: cover;
  position: relative; /* ← ドットをabsoluteで置くため */
}

.dot.active {
  background: #333;
  animation: fillDot 5s linear forwards;
}

@keyframes fillDot {
  from {
    background: #bbb;
  }
  to {
    background: #333;
  }
}

/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/* secondメインコンテンツラッパー */

/* ベーススタイル */
.second-content-wrapper {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  width: 100%;
  padding: 0; /* ← 外枠の余白をなくす */
  gap: 0; /* ← パネル間の余白をなくす */
}

.second-left-panel {
  flex: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向中央寄せ */
  align-items: flex-start; /* 横方向は左寄せ */
  box-sizing: border-box;
  text-align: left;
  padding-top: 950px; /* 中央より少し下にずらす */
  padding-left: 30px; /* 左余白少し */
  height: 100vh; /* 画面全体の高さ */
}

.second-left-panel h1 {
  font-size: clamp(2.5em, 4vw, 3.5em);
  margin: 0 0 24px 0; /* 上0、下24px */
  font-weight: 300;
  word-spacing: 10px;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
 
  padding-top: 33px;
}

.description-line1,
.description-line2,
.description-line3,
.description-line4 {
  font-size: clamp(1.8em, 2vw, 1.8em);
  line-height: 1.8;
  word-spacing: 0.5vw;
  margin-bottom: 20x; /* ← px で固定 */
  text-align: left;
}

.description-line1,
.description-line2,
.description-line3,
.description-line4 {
  max-width: 500px; /* ← 適度な幅で固定 */
  text-align: left;
  padding-top: 30px;
}

/* second-right-panelのスタイル */
.second-right-panel {
  flex: 1.8;
  display: flex; /* これにより、子要素が横並びになります */
  flex-direction: row;
  justify-content: center;
  align-items: center; /* 垂直方向の中央寄せに変更 */
  margin: 0;
  padding-left: 0;
  padding-top: 560px; /* 必要に応じて調整 */
  
  gap: 20px; /* コンテナ間の余白を設定 */
}

/* 各pallax-containerのスタイル */
.pallax-container {
  flex: 1;
  position: relative;
  aspect-ratio: 1 / 2;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: 100%;
  height: 470px;
  top: 0; 
}



.pallax-track {
  width: 100%;
}

.pallax-image {
  width: 100%; /* 親コンテナの幅いっぱいに広げる */
  height: auto;
  object-fit: cover;
  position: relative;
}
.pallax-container1 {
  flex: 1; /* 親要素の幅を均等に分け合います */
  position: relative;
  aspect-ratio: 1 / 2;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  right: 50px;
  z-index: 1;
  width: 50%;
  height: 400px;
  top: 90px;
}

.pallax-track1 {
  width: 100%;
}



/*::::::::::::::::::::::::::::::::::::::::  third-main-content  *******************/
/*::::::::::::::::::::::::::::::::::::::::  third-main-content  *******************/
/*::::::::::::::::::::::::::::::::::::::::  third-main-content  *******************/

.third-content-wrapper {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  width: 100%;
  padding: 0; /* ← 外枠の余白をなくす */
  gap: 0; /* ← パネル間の余白をなくす */
  padding-top: 400px;
}

.third-left-panel {
  flex: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向中央寄せ */
  align-items: flex-start; /* 横方向は左寄せ */
  box-sizing: border-box;
  text-align: left;
  padding-top: -800px;
  padding-left: 190px;
  padding-right: 10px;
  height: 100vh; /* 画面全体の高さ */
}

.third-left-panel h3 {
  font-size: clamp(2.5em, 4vw, 3.5em);
  margin: 0 0 24px 0; /* 上0、下24px */
  font-weight: 300;
  word-spacing: 10px;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: -100;
  padding-bottom: 50px;
}

.third-right-panel {
  flex: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向中央寄せ */
  align-items: flex-start; /* 横方向は左寄せ */
  box-sizing: border-box;
  text-align: left;
  /* 中央より少し下にずらす */
  padding-right: 190px;
  padding-left:10px;
  padding-top: 150px;
  height: 100vh; /* 画面全体の高さ */
}
.third-right-panel h1 {
  font-size: clamp(2.5em, 4vw, 3.5em);
  margin: 0 0 0px 0; /* 上0、下24px */
  font-weight: 300;
  word-spacing: 10px;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: -100;
  
}
.description-line1,
.description-line2,
.description-line3 {
  font-size: clamp(1.8em, 2vw, 1.8em);
  line-height: 1.8;
  word-spacing: 0.5vw;
  margin-bottom: 30x; /* ← px で固定 */
  text-align: left;
}

.description-line1,
.description-line2,
.description-line3 {
  max-width: 500px; /* ← 適度な幅で固定 */
  text-align: left;
  padding-bottom: 80px;
}

/*::::::::::::::::::::::::::::::::::::::::
/* Inspired by this pen by Pieter Biesemans https://codepen.io/pieter-biesemans/pen/BQBWXX and My Mother Before Me project http://mymotherbeforeme.com/ */

/*::::::::::::::::::::::::::::::::::::::::
/*::::::::::::::::::::::::::::::::::::::::



/* hide scrollbar */
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}
.external {
  height: 100vh;
  margin-top: -100px;
}

.horizontal-scroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vh;
  transform: rotate(-90deg) translate3d(0, -100vh, 0);
  transform-origin: right top;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  height: 100vw;
  perspective: 1px;
  transform-style: preserve-3d;
}
.img-wrapper {
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  transform-origin: 50% 50%;
  transform: rotate(90deg) translateZ(0.1px) scale(0.9) translateX(0px)
    translateY(-3vh);
  transition: 1s;
}

.img-wrapper:hover {
  min-height: 65vh;
}

.slower {
  transform: rotate(90deg) translateZ(-0.2px) scale(1.1) translateX(0%)
    translateY(-10vh);
}
.slower1 {
  transform: rotate(90deg) translateZ(-0.25px) scale(1.05) translateX(0%)
    translateY(8vh);
}
.slower2 {
  transform: rotate(90deg) translateZ(-0.3px) scale(1.3) translateX(0%)
    translateY(2vh);
}
.slower-down {
  transform: rotate(90deg) translateZ(-0.2px) scale(1.1) translateX(0%)
    translateY(16vh);
}
.faster {
  transform: rotate(90deg) translateZ(0.15px) scale(0.8) translateX(0%)
    translateY(14vh);
}
.faster1 {
  transform: rotate(90deg) translateZ(0.05px) scale(0.8) translateX(0%)
    translateY(10vh);
}
.fastest {
  transform: rotate(90deg) translateZ(0.22px) scale(0.7) translateX(-10vh)
    translateY(-15vh);
}
.vertical {
  transform: rotate(90deg) translateZ(-0.15px) scale(1.15) translateX(0%)
    translateY(0%);
}
.last {
  transform: rotate(90deg) translateZ(-0.2px) scale(1.1) translateX(25vh)
    translateY(-8vh);
}

.img-wrapper a {
  overflow: hidden;
  display: block;
  padding: 1vh;
  color: none;
  border-radius: 10px;
}
.common-style-img {
  max-width: 45vh;
  max-height: 50vh;
  transition: 0.5s;
  vertical-align: top;
  border-radius: 10px;
}

a:hover img {
  filter: none;
}
p {
  margin: 0;
  font-size: clamp(1.8em, 2vw, 1.8em);
}
.scroll-info {
  display: flex;
  justify-content: left; /* 横中央寄せ */
  align-items: left; /* 縦中央寄せ */
  flex-direction: column; /* 狭い画面では縦並びに */
  text-align: left;
  position: relative;
  top: 15%;
  left: 9%;
}
.icon svg {
  width: 50px;
  fill: currentcolor;
}
/*::::::::::::::::::::::::::::::::::::::::  company-profile-wrapper  *******************/
/*::::::::::::::::::::::::::::::::::::::::    *******************/
/*::::::::::::::::::::::::::::::::::::::::   *******************/

.company-profile-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  margin-top: -60px;

  /* 既存のスタイルがあれば残す */
  width: 100%; /* これで横幅いっぱいに広がる */
  max-width: none; /* ★ これが重要！もし設定されていれば削除または none にする */
  /* 必要であれば、このラッパー内部のコンテンツに左右のパディングを設定する */
  /* padding: 0 50px; などの設定 */
  z-index: -10;
}

.company-profile-section {
  width: 90%;
  max-width: 900px;
  padding: 40px 60px;
  position: relative;
  text-align: left;
  z-index: -10;
}
.company-profile-section h1 {
  font-size: clamp(2.5em, 4vw, 3.5em);
  margin: 0 0 24px 0; /* 上0、下24px */
  font-weight: 300;
  word-spacing: 10px;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: -100;
  padding-top: 33px;
  z-index: -10;
}

.company-info-grid {
  display: grid;
  grid-template-columns: 150px 1fr; /* Label width and value width */
  gap: 25px 30px;
  margin-top: 100px;

  z-index: -10;
}

.info-label {
  font-weight: 700;
  color: #555;
  font-size: 1.1em;
  padding-top: 5px; /* Align with multi-line content */
  white-space: nowrap; /* Prevent label wrapping */
  text-align: center;
  z-index: -10;
}

.info-value {
  color: #333;
  font-size: 1.1em;
  line-height: 1.5;
  text-align: center;
  z-index: -10;
}
.info-label {
  font-weight: 700;
  color: #555;
  font-size: 1.1em;
  padding-top: 5px; /* Align with multi-line content */
  white-space: nowrap; /* Prevent label wrapping */
  text-align: center;
  z-index: -10;
}

.info-value {
  color: #333;
  font-size: 1.1em;
  line-height: 1.5;
  text-align: center;
  z-index: -10;
}
.info-row {
  display: contents;
  font-size: 1.5em;
  line-height: 2;
  word-spacing: 10px;
  margin-top: 50px;
  color: #555;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  z-index: -10;
}

.info-row > .info-label,
.info-row > .info-value {
  border-bottom: 1px solid #000000; /* 区切り線を追加 */
  padding-bottom: 20px; /* 線と次の行の間に余白 */
  margin-bottom: 5px; /* 線と次の行の間のマージン */
  z-index: -10;
}

/* 最後の行の区切り線を削除（オプション） */
.company-info-grid .info-row:last-of-type > .info-label,
.company-info-grid .info-row:last-of-type > .info-value {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  z-index: -10;
}

/* 既存の .company-info-grid も少し調整すると良いかもしれません */
.company-info-grid {
  display: grid;
  grid-template-columns: 150px 1fr; /* Label width and value width */
  gap: 25px 30px; /* 行間の縦方向のgapは必要なくなる可能性もあるので調整 */
  margin-bottom: 50px;
  z-index: -10;
}

/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/*contact
  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/* Basic styling for the contact section */
.contact-section {
  width: 100%;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  z-index: -999; /* 正の値に設定 */
  border-radius: 60px;
  background-color: rgba(255, 255, 255, 0.504);

}

.contact-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.504);
  z-index: -999; /* コンテンツの下に配置 */
  border-radius: 60px;
}

/* Container for text and images */
.contact-content-wrapper {
  max-width: 1200px;
  margin: 0 auto; /* Center the content */
  display: flex; /* Use flexbox for side-by-side layout */
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
  align-items: center; /* Vertically center items */
  gap: 2rem; /* Spacing between the text area and image panel */
 z-index: 10;
 border-radius: 60px;
 background-color: rgba(255, 255, 255, 0.504);
}

/* Styling for the text area */
.contact-text-area {
  flex: 1; /* Allows it to grow and take up available space */
  min-width: 300px; /* Prevents it from getting too small */
  padding: 0 2rem;
 font-size: 2rem;
}

.contact-mark {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #f0e6d2; /* A subtle background for the label */
  border-radius: 25px;
  margin-bottom: 1.5rem;
}

.mark-text {
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #a37f48;
  font-size: 2rem;
}

h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 3.5rem;
  line-height: 1.2;
  color: #333;
  margin: 0;
}

/* Styling for the parallax image panel */
.contact-panel {
  flex: 1; /* Allows it to grow and take up remaining space */
  min-width: 300px;
  /* Additional styling for layout */
}

.contact-panel {
  display: flex;
  flex-direction: column; /* Stacks images vertically */
  gap: 1.5rem;
}

/* Parallax image containers */
.contact-container {
  position: relative;
  aspect-ratio: 1 / 2;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
  width: 40%;
  height: 300px;
  top: 30px;
  right:20px;
  
}
 .contact-container1 {
  position: relative;
  aspect-ratio: 1 / 2;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  left: 220px;
  z-index: 1;
  width: 40%;
  height: 300px;
  top: -99px;
}

.contact-image {
  width: 100%; /* 親コンテナの幅いっぱいに広げる */
  height: auto;
  object-fit: cover;
  position: relative;
}
 .contact-image1 {
  width: 100%; /* 親コンテナの幅いっぱいに広げる */
  height: auto;
  object-fit: cover;
  position: relative;
}

.circle-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;         /* 丸の大きさ */
  height: 100px;
  background: black;   /* 黒丸 */
  color: white;        /* 文字色 */
  border-radius: 50%;
  display: none;       /* JSで切り替え */
  align-items: center; /* flexで文字を中央に */
  justify-content: center;
  font-size: 12px;     /* 文字サイズ */
  pointer-events: none; /* 邪魔しない */
  transform: translate(-50%, -50%);
  z-index: 1;
  
}


.contact-section {
  cursor: none; /* デフォルトカーソルを非表示 */
}


/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
/*footer-section
  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/


  .footer-section {
    position: relative;
    width: 100%;
    padding: 0;  /* ★ここを0に変更 */
    min-height: 100vh; /* ★高さを確保 */
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 9999;
   
  }
  
  .footer-content {
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 2000px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 40px; /* ★上下左右の余白をここで設定 */
    box-sizing: border-box;
  }
  
  .footer-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/26554996_l.jpg');
   
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.9;
  }
  


.footer-nav {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  margin-bottom: auto;
}

.footer-nav a {
  color: #000000; /* ★重要: 文字色を純粋な黒に変更 */
  text-decoration: none;
  font-size: 1.8rem;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: #555555; /* ★ホバー時の色を少し薄い黒に調整 */
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: auto;
}

.footer-brand .brand-name {
  font-family: serif;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 5px;
  color: #000000; /* ★重要: 文字色を純粋な黒に変更 */
}

.footer-brand  {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: #000000; /* ★重要: 文字色を純粋な黒に変更 */
}

.brand-tagline{text-align: right;
  font-size: 1.5rem;
  color: #888888;
  margin: 0;}

.footer-social {
  margin-top: 15px;
}

.footer-social a {
  color: #000000; /* ★重要: アイコンの色を純粋な黒に変更 */
  font-size: 2.5rem;
  margin-left: 10px;
  margin-right: 10px;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #555555; /* ★ホバー時の色を少し薄い黒に調整 */
}

.footer-info {
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.6;
  margin-top: auto;
}

.footer-info p {
  margin: 0;
  color: #000000; /* ★重要: 文字色を純粋な黒に変更 */

}

.contact-grid {
  font-size: 1.4rem;
}

.contact-grid label {
  font-size: 1.4rem;
}

.contact-grid input,
.contact-grid textarea,
.contact-grid select {
  font-size: 1.3rem;
}

.contact-grid p,
.contact-grid a {
  font-size: 1.4rem;
}

.privacy-section {
  font-size: 1.4rem;
}

.privacy-section h1 {
  font-size: 3.6rem;
}

.privacy-section h2 {
  font-size: 1.6rem;
}

.privacy-section h3 {
  font-size: 1.4rem;
}
/* モバイルメニューの基本スタイル */

/* リンククリック時に .open が外れることで、自動的に transform: translateX(100%); に戻り、メニューが隠れます。*/
 /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* cart*/
  /***********/ /***********/ /***********/




    
    
@media (min-width: 768px) {
    header {
        padding: 4rem 4rem;
    }
}

.header-logo h1 {
    font-size: 3rem; /* 3xl */
    font-weight: 800; /* extra-bold */
    letter-spacing: -0.05em; /* tracking-tight */
    color: var(--text-color);
    margin: 0;
}

@media (min-width: 768px) {
    .header-logo h1 {
        font-size: 4rem; /* 5xl */
    }
}

/* デスクトップ用ナビゲーション */
.desktop-nav {
    display: none;
    align-items: center;
    list-style: none; /* リストの点を非表示 */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
    font-size: 1.35rem;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex;
        gap: 3rem; /* space-x-8 */
    }
}

.desktop-nav a {
    color: var(--text-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
    
}

.desktop-nav a:hover {
    color: var(--hover-color);
    text-decoration: underline; /* ホバー時に下線を表示 */
}

/* アイコンとボタンのコンテナ */
.icon-and-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
}

@media (min-width: 768px) {
    .icon-and-buttons {
        gap: 1rem; /* space-x-4 */
    }
}

.icon-and-buttons button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem; /* パディングを追加してクリック/タップしやすく */
    transition: color var(--transition-speed) ease;
}

.icon-and-buttons button:hover {
    color: var(--hover-color);
}

.icon-and-buttons svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
}

@media (min-width: 768px) {
    .icon-and-buttons svg {
        width: 1.5rem; /* w-6 */
        height: 1.5rem; /* h-6 */
    }
}

.language-btn span {
    display: inline;
}
@media (min-width: 768px) {
    .language-btn span {
        display: inline;
    }
}

 


/* モバイル用ハンバーガーメニューボタン */
.mobile-menu-button {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}
@media (min-width: 1024px) {
    .mobile-menu-button {
        display: none;
    }


/* --- 修正・統合されたモバイルメニューのCSS --- */
.mobile-nav {
  /* 共通設定 */
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh; /* 画面全体の高さ */
  z-index: 999; /* 他の要素より手前に表示 */
  background-color: white; /* 適切な背景色を設定してください */
  
  /* レイアウト */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* 初期状態: 画面外に隠す */
  transform: translateX(100%);
  /* トランジション設定（スムーズな開閉のため） */
  transition: transform 0.3s ease-in-out; 
}

/* メニューを開くときのスタイル（JavaScriptがこのクラスをトグルします） */
.mobile-nav.open {
  /* 画面内にスライドインさせる */
  transform: translateX(0) !important;; 
}

/* .mobile-nav.active の定義は、JavaScriptで .open クラスを使用しているため不要です。*/


/* --- メニューリンクのスタイル --- */
.mobile-nav a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.25rem; /* text-xl */
  font-weight: 500;
  margin: 1rem 0; /* my-4 */
}

.mobile-nav a:hover {
color: var(--hover-color);
text-decoration: underline;
}

/* --- 閉じるボタンのスタイル --- */
.close-menu-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.close-menu-button svg {
  width: 1.5rem;
  height: 1.5rem;
}
/* カートのスタイル */
.cart-section {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding: 1.5rem;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}



/* デモンストレーション用のコンテンツスタイル */
main.container {
    max-width: 64rem; /* mx-auto */
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}
}
@media (min-width: 768px) {
    main.container {
        padding: 2rem;
    }
}
.main-content {
    background-color: #E5E7EB; /* gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 2rem;
    text-align: center;
    color: #6B7280; /* gray-600 */
}
@media (max-width: 1024px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
  }

  .footer-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
  }
  .brand-tagline{text-align: center;
    font-size: 1.5rem;
    color: #888888;
    margin: 0;}

  .footer-right {
    align-items: center;
    margin-bottom: 20px;
  }

  .footer-brand .brand-name {
    font-size: 2rem;
  }

  .footer-info {
    font-size: 1.2rem;
    text-align: center;
    margin-top: 20px;
  }
}


@media (max-width: 1000px) {
  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* NAV-Menu*/
  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/

  .main-header {
    position: fixed; /* 画面固定 */
    top: 25px;
    left: 42px; /* 左上に配置 */
    right: auto; /* 元のright指定をリセット */
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    gap: 30px;
  }
  .menu-icon-svg {
    z-index: 10;
  }

  .book-icon {
    right: auto;
    left: 77px;
    top: 8px;
    z-index: 10;
  }
  .icon-label {
    right: auto;
    left: 84px;
    z-index: 10;
  }
  .menu-button {
    margin-right: auto; /* 元の右マージンをリセット */
    margin-left: 100px; /* 左側にマージンを設定 */
    z-index: 10;
  }
  .nav-menu-panel {
    top: -100%; /* menu-button と同じ高さに開始 */
    left: 0;
    width: 200px; /* メニューパネルの幅 */
    height: 90vh;
    transform: translateY(0%); /* 初期状態では右に完全に隠す */
    background-color: #ffffff;
    padding-top: 250px;
  }

  .menu-button::before,
  .menu-button::after,
  .menu-icon-svg::before,
  .menu-icon-svg::after {
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* メニューパネルが表示された時のスタイル */
  .nav-menu-panel.is-open {
    transform: translateY(100%); /* 完全に表示 */
    opacity: 1; /* 不透明 */
    visibility: visible; /* 表示 */
    pointer-events: auto; /* 表示時はマウスイベントを有効化 */
  }

  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* brand-info*/
  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/


  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* side-bar/
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  .vertical-text::before {
    display: none;
  }
  /* 左側のサイドバーのスタイル */
.sidebar-left {
  position: absolute;
  left: 15px;
  top: 270px;
  transform: translateY(-50%);
  width: 50px;
 
}


  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* /main-content-wrapper
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* Step 1: Reverse the layout to put the image on top */
  .main-content-wrapper {
    flex-direction: column-reverse;
    display: flex;

    width: 100%;
  }

  /* Step 2: Make the right panel take up the full width */
  .right-panel {
    width: 100%;
    flex: none !important;
    padding-left: 0; /* Remove left padding */
    align-items: center; /* Center the carousel in the middle of the screen */
    justify-content: center;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 150px;
  }

  /* Make the carousel container fill the width */
  .carousel-container {
    width: 100%;
    max-width: none; /* Remove the maximum width constraint */
    aspect-ratio: 16 / 9; /* Adjust aspect ratio for a wider look on mobile */
    border-radius: 10px; /* Remove rounded corners */
    height: 500px;
  }

  /* Make the image itself fill the entire width of the viewport */
  .carousel-image {
    width: 100vw;
    height: 100%;
    min-width: 100%; /* Ensure the image fills the carousel track */
    object-fit: cover; /* Maintain aspect ratio and cover the container */
  }

  /* Adjustments for the left panel for better mobile view */

  .left-panel {
    order: 0;
    width: 100%; /* 横幅いっぱい */
    flex: none; /* ← flex:1.6 をリセット */
    height: auto; /* 高さは内容に合わせる */
    padding-left: 5%; /* 左余白をリセット */
    padding-right: 50px; /* 右にも余白なし */
    padding-top: 40px; /* ← 上の余白だけ少し */
    box-sizing: border-box;
    display: block; /* ← flex解除で自然に100%幅に */
    text-align: center; /* ← 横幅いっぱいに文章を中央表示したいなら */
  }

  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /*second-content-wrapper
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  .second-content-wrapper {
    flex-direction: column;
    display: flex;

    width: 100%;
  }

  .second-right-panel {
    order: -1; /* 上に移動 */
    width: 100%;
    padding: 20px;
  }

  .second-left-panel {
    order: 0;
    width: 100%; /* 横幅いっぱい */
    flex: none; /* ← flex:1.6 をリセット */
    height: auto; /* 高さは内容に合わせる */
    padding-left: 50px; /* 左余白をリセット */
    padding-right: 50px; /* 右にも余白なし */
    padding-top: 40px; /* ← 上の余白だけ少し */
    box-sizing: border-box;
    display: block; /* ← flex解除で自然に100%幅に */
    text-align: center; /* ← 横幅いっぱいに文章を中央表示したいなら */
  }

  .pallax-container {
    width: 100%;
    height: 500px;
    top: 0; /* モバイルではずらさない */
  }

  .pallax-container1 {
    width: 100%;
    height: 300px;
    top: 90px; /* モバイルではずらさない */
  }

  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* /third-content-wrapper
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/

  .third-content-wrapper {
    flex-direction: column; /* パネルを縦並びに変更 */
    align-items: left;
    padding-top: 70px;
  }
  .third-left-panel {
    order: 0;
    width: 100%; /* 横幅いっぱい */
    flex: none; /* ← flex:1.6 をリセット */
    height: auto; /* 高さは内容に合わせる */
    padding-left: 50px; /* 左余白をリセット */
    padding-right: 50px; /* 右にも余白なし */
    padding-top: 0px; /* ← 上の余白だけ少し */
    box-sizing: border-box;
    display: block; /* ← flex解除で自然に100%幅に */
    text-align: center; /* ← 横幅いっぱいに文章を中央表示したいなら */
  }

  .third-right-panel {
    order: 0;
    width: 100%; /* 横幅いっぱい */
    flex: none; /* ← flex:1.6 をリセット */
    height: auto; /* 高さは内容に合わせる */
    padding-left: 50px; /* 左余白をリセット */
    padding-right: 50px; /* 右にも余白なし */
    box-sizing: border-box;
    margin-top: -230px;
    display: block; /* ← flex解除で自然に100%幅に */
    text-align: center; /* ← 横幅いっぱいに文章を中央表示したいなら */
  }
  .company-profile-section h4 .left-panel h1,
  .second-left-panel h1,
  .third-left-panel h3,
  .third-right-panel h1,
  .description-line1,
  .description-line2,
  .description-line3,
  .description-line4 {
    text-align: left;
    max-width: 90%; /* 幅を画面に合わせる */
    margin: 0 auto 30px auto;
    padding-bottom: 30px;
    justify-content: center;
    align-items: center;
  }

  /* 誤記修正 */
  .description-line1,
  .description-line2,
  .description-line3 {
    margin-bottom: 30px; /* px を正しく修正 */
  }

  .scroll-info {
    display: flex;
    justify-content: left; /* 横中央寄せ */
    align-items: left; /* 縦中央寄せ */
    flex-direction: column; /* 狭い画面では縦並びに */
    text-align: left;
    position: relative;
    top: 15%;
    left: 9%;
  }

  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  .company-profile-wrapper
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/

.company-profile-wrapper {
    padding-top: 35rem;
    align-items: flex-start;
    margin-top: -50px;
  }

  .company-profile-section {
    padding: 2.5rem 2rem;
  }

  .company-profile-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-top: 3rem;
    text-align: left;
  }

  .company-info-grid {
    grid-template-columns: 1fr; /* 1カラム表示にする */
    gap: 3rem;
    margin-top: 9rem;
  }

  .info-label,
  .info-label {
    text-align: left;
    border-top: 1px black;
    padding-bottom: 2rem; /* ラベルの下のパディングを調整 */
  }

  .info-value,
  .info-value {
    font-size: 1.4rem;
    text-align: left;
    padding-bottom: 2rem; /* 値の下のパディングを調整 */
  }

  .info-row > .info-label {
    border-top: 1px black;
    padding-bottom: 10px; /* 線と次の行の間に余白 */
    margin-bottom: 10px; /* 線と次の行の間のマージン */
    border-bottom: 0px;
  }
 
}
@media (max-width: 769px) {

  
  .nav-menu-panel {
    /* 画面の中心に固定 */

    transform: translateY(0%); /* 初期状態では右に完全に隠す */
    /* 以下は既存のスタイルを維持 */
    width: auto;
    height: 90vh;
    /* コンテンツに合わせて高さを自動調整 */
    margin-top: 50px;
  }

  /* メニューパネルが表示された時のスタイル */
  .nav-menu-panel.is-open {
    transform: translateY(100%); /* 完全に表示 */
    opacity: 1; /* 不透明 */
    visibility: visible; /* 表示 */
    pointer-events: auto; /* 表示時はマウスイベントを有効化 */
  }
  .social-icons {
    display: flex;
    justify-content: center;
    gap: 15px; /* アイコン間のスペース */
    padding-bottom: 40px;
  }

  .social-icons img {
    width: 24px; /* アイコンのサイズ */
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }
  .social-icons i {
    font-size: 20px; /* アイコンのサイズを設定 */
    color: #333; /* アイコンの色を設定（例：濃いグレー） */
    vertical-align: middle;
    margin-left: 15px;

    /* テキストなどと並んだときに中央揃えにする */
  }
  .nav-menu-panel ul li a:hover::before {
    width: 23%; /* ホバー時に幅を100%にする */
  }

  .nav-menu-panel ul li a::before {
    left: 38%; /* 左端から開始 */
    width: 0%; /* 初期状態では幅0 */
    height: 0.5px; /* 線の太さ */
    background-color: #333; /* 線の色 */
    transform: translateY(-50%, -50%); /* 自身のY軸中央を基準に配置 */
    transition: width 0.3s ease-out; /* 幅のアニメーション */
  }

  .menu-icon-svg::before,
  .menu-icon-svg::after {
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* sie
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/

.sidebar-left {
  position: absolute;
  left: 15px;
  top: 318px;
  transform: translateY(-50%);
  width: 50px;
 
}
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /* /main-content-wrapper
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  .right-panel {
    width: 100%;
    flex: none; /* Reset the flex-grow to prevent scaling */
    padding-left: 0; /* Remove left padding */
    align-items: center; /* Center the carousel in the middle of the screen */
    justify-content: center;
    padding-left: 130px;
    padding-right: 0px;
    padding-top: 200px;
  }

  /* Make the carousel container fill the width */
  .carousel-container {
    width: 400px;
    max-width: none; /* Remove the maximum width constraint */
    aspect-ratio: 16 / 9; /* Adjust aspect ratio for a wider look on mobile */
    border-radius: 10px; /* Remove rounded corners */
    height: 500px;
  }

  /* Make the image itself fill the entire width of the viewport */
  .carousel-image {
    width: 100vw;
    height: 100%;
    min-width: 100%; /* Ensure the image fills the carousel track */
    object-fit: cover; /* Maintain aspect ratio and cover the container */
  }

  /* Adjustments for the left panel for better mobile view */
  .left-panel {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px; /* Adjust padding for better spacing */
    height: auto; /* Allow the panel to take up only as much space as it needs */
    justify-content: flex-start; /* Align content to the top */
    align-items: left; /* Center the text content */
  }

  .left-panel h1,
  .description-line1,
  .description-line2,
  .description-line3 {
    text-align: left; /* Center the text for a better mobile layout */
    max-width: 100%; /* Allow text to span the full width */
  }

  /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /*second-content-wrapper
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/

  .second-right-panel {
    width: 100%;
    flex: none; /* Reset the flex-grow to prevent scaling */
    padding-left: 0; /* Remove left padding */
    align-items: center; /* Center the carousel in the middle of the screen */
    justify-content: center;
    padding-left: 120px;
    padding-right: 120px;
    padding-top: 150px;
  }

  /* Adjustments for the left panel for better mobile view */
  .second-left-panel {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 100px; /* Adjust padding for better spacing */
    height: auto; /* Allow the panel to take up only as much space as it needs */
    justify-content: flex-start; /* Align content to the top */
    align-items: left; /* Center the text content */
  }
  .third-left-panel h3,
  .second-left-panel h1,
  .description-line1,
  .description-line2,
  .description-line3 {
    text-align: left; /* Center the text for a better mobile layout */
    max-width: 100%; /* Allow text to span the full width */
  }
  .second-right-panel {
    display: flex; /* これにより、子要素が横並びになります */
    flex-direction: row;
    justify-content: center;
    align-items: center; /* 垂直方向の中央寄せに変更 */
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 40px; /* 必要に応じて調整 */
    z-index: -100;
    gap: 20px; /* コンテナ間の余白を設定 */
  }

  .pallax-container {
    width: 100%;
    height: 500px;
    top: 0; /* モバイルではずらさない */
  }

  .pallax-container1 {
    width: 100%;
    height: 300px;
    top: 90px; /* モバイルではずらさない */
  }

  .scroll-info {
    display: flex;
    justify-content: left; /* 横中央寄せ */
    align-items: left; /* 縦中央寄せ */
    flex-direction: column; /* 狭い画面では縦並びに */
    text-align: left;
    position: relative;
    top: 15%;
    left: 9%;
  }
 /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/
  /*second-content-wrapper
/***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/ /***********/

  .footer-section {
    padding: 150px 0;
  }

  .footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .footer-nav a {
    font-size: 1.5rem;
  }

  .footer-brand .brand-name {
    font-size: 1.8rem;
  }

  .footer-brand {
    font-size: 2.5rem;
    text-align: right;
  }

  .brand-tagline{ font-size: 1.5rem;
    color: #888888;
    text-align: center}



  .footer-social {
    margin-top: 10px;
    display: flex;
    justify-content: center;
   
    margin-left: 5px;
    margin-right: 5px;
   
  }

  .footer-info {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 20px;
    text-align: center;
  }

  .brand-info,
  .category-info,
  .category-info1 {
    position: fixed;
    top: 65px;
    right: 20px;
}
}
@media (max-width: 480px){
  .brand-info,
  .category-info,
  .category-info1 {
    position: fixed;
    top: 65px;
    right: 20px;
  }
}


/* =========================
   MOBILE SHOP GRID FIX
========================= */

@media (max-width: 768px) {

  /* セクション全体の余白調整 */
  #shop-page {
    padding: 40px 16px !important;
  }

  /* タイトル調整 */
  #shop-page h2 {
    font-size: 1.8rem !important;
    line-height: 1.3;
    margin-bottom: 24px;
  }

  /* 商品グリッド（2列固定） */
  #product-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* 商品カード */
  #product-list > div {
    padding: 12px !important;
    border-radius: 12px;
  }

  /* 商品画像 */
  #product-list img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
  }

  /* 商品名 */
  #product-list h2 {
    font-size: 1rem !important;
    margin-top: 8px;
    margin-bottom: 6px;
  }

  /* 説明文 */
  #product-list p {
    font-size: 0.85rem !important;
    line-height: 1.4;
  }

  /* 値段 */
  #product-list .price,
  #product-list p.text-3xl {
    font-size: 1.1rem !important;
  }

  /* ボタン */
  #product-list button {
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
    border-radius: 999px;
  }
}

/* =========================
   PURCHASE PAGE MOBILE FIX
========================= */

@media (max-width: 768px) {

  /* セクション余白調整 */
  #purchase-page {
    padding: 20px 12px !important;
  }

  /* メインカード */
  #purchase-page .container {
    padding: 16px !important;
    border-radius: 16px;
  }

  /* タイトル */
  #purchase-page h2 {
    font-size: 1.6rem !important;
    margin-bottom: 20px;
  }

  /* サブタイトル */
  #purchase-page h3 {
    font-size: 1.2rem !important;
  }

  /* =========================
     TABLE → 横スクロール化
  ========================= */

  #purchase-page table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  #purchase-page thead,
  #purchase-page tbody,
  #purchase-page tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }

  /* セルの余白をコンパクト化 */
  #purchase-page th,
  #purchase-page td {
    padding: 10px 8px !important;
    font-size: 0.85rem !important;
  }

  /* 商品名 */
  #purchase-page td.font-medium {
    font-size: 0.9rem !important;
  }

  /* 価格 */
  #purchase-page .price,
  #purchase-page .subtotal {
    font-size: 0.9rem !important;
  }

  /* 数量入力 */
  #purchase-page input.quantity-input {
    width: 50px !important;
    font-size: 0.9rem !important;
  }

  /* 合計エリア */
  #purchase-page .flex.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #purchase-cart-total {
    font-size: 1.8rem !important;
  }

  /* 支払いボックス */
  #purchase-page .border {
    padding: 12px !important;
  }

  #purchase-page .border p {
    font-size: 0.9rem !important;
  }

  /* ボタン */
  #place-order-btn {
    font-size: 1rem !important;
    padding: 14px !important;
  }
}

@media (max-width: 768px) {

  .second-right-panel {
    flex-direction: column;
    padding: 10px;
    gap: 12px;
    align-items: center;
  }

  /* 画像コンテナ統一（ここが重要） */
  .pallax-container {
    width: 100%;
    height: 140px;   /* ← 小さくするポイント */
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
  }
 
  /* 2枚目は非表示 */
  .pallax-container1 {
    display: none !important;
  }

  /* パララックス無効化 */
  .pallax-track {
    transform: none !important;
  }

  /* 画像：全体表示 */
  .contact-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
  }
}
@media (max-width: 768px) {

  .contact-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* 共通化（超重要） */
  .contact-container
  {
    width: 90%;
    max-width: 300px;
    height: 180px;

    position: relative;
    top: auto;
    left: auto;
    right: auto;

    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }

  /* 画像 */
  .contact-image
 {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* ← これが一番自然 */
    display: block;
  }

  /* 無駄なズレ完全削除 */
  .contact-container1 {
    transform: none !important;
  }
}

@media (max-width: 768px) {

  /* 2枚目は完全に消す */
  .contact-container1 {
    display: none !important;
  }

  /* 全体配置 */
  .contact-panel {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 1枚目の箱 */
  .contact-container {
    width: 85%;
    max-width: 320px;

    /* 高さを小さくしつつ全体表示できる比率に */
    aspect-ratio: 4 / 3;

    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);

    /* 位置リセット（超重要） */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  /* 画像 */
  .contact-image {
    width: 100%;
    height: 100%;

    object-fit: contain; /* ← 全体を見せる */
    background: #fff;    /* 余白が出ても自然に見せる */

    display: block;
  }
}