/* 基本設定 */
:root{
  --arc-x: 280vw;   /* 横半径：150vw / 2  */
  --arc-y: 145vw;   /* 縦半径： 30vw / 2  */
}
body { 
  font-family: 'Open Sans', sans-serif;
  color: #000; 
  max-width: 1920px;
  letter-spacing: 0.05rem;
}
main{
  margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 { 
  /* 見出し用のフォント */
  font-family: 'Noto Serif JP', serif; 
}
.nav-text-en{
  font-family: 'Noto Serif JP', serif;
}
.s_only{
  display: none;
}
.container {
  width: 90%;
  max-width: 1920px;
  margin: 0 auto;
}
.flex{
    display: flex; 
}
.align-center{
    align-items: center;
}
.btn {
  max-width: 10rem;
  display: inline-block;
  margin-top: 2rem;
  background: #414856;
  color: #fff;
  padding: 1rem 2rem;
  text-align: center;
  text-transform: uppercase;
  /* --- 変更 --- */
  position: relative; /* 疑似要素の基準点として機能させる */
  overflow: hidden;   /* はみ出した疑似要素を隠す */
  z-index: 1;         /* 疑似要素が背面に回るように */
  transition: color 0.4s ease-out; /* 文字色の変化をアニメーション */
  font-family: "Playfair Display", serif;
}
.btn:hover {
  color: #000; /* 文字色のみ変更 */
}
.wpforms-submit-container{
  text-align: center;
}
.wpforms-container .wpforms-recaptcha-container iframe{
  margin: 0 auto;
}

/*
 * スクロール時のフェードインアニメーション
 */
.fade-in-section,
.cutin_left,
.cutin_right {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-section {
  transform: translateY(30px); /* 少し下から移動させる */
}

.cutin_left {
  transform: translateX(-50px); /* 左からスライドイン */
}

.cutin_right {
  transform: translateX(50px); /* 右からスライドイン */
}

.fade-in-section.is-visible,
.cutin_left.is-visible,
.cutin_right.is-visible {
  opacity: 1;
  transform: translate(0, 0); /* 元の位置に戻す */
}

/* 流れる背景用の疑似要素を追加 */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* ホバー時の背景色 */
  transform: translateX(-101%); /* 初期状態では左側に見えないように配置 (+1%で隙間防止) */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 流れるアニメーション */
  z-index: -1; /* テキストの背面に配置 */
}

.btn:hover::before {
  transform: translateX(0); /* ホバー時に疑似要素をスライドインさせる */
}

/* 例：ヘッダー本体のスタイル */
header.site-header{
  position: fixed; top: 0; width: 100%;
  z-index: 1000; padding: 1rem 0;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.2);
}
.site-title{
  font-size: 1.5rem;
}

header .logo{
  width: fit-content;
}

header .logo img { 
  height: 35px; 
}
.logo a{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.menu-toggle { 
  background: none; 
  border: none; 
  font-size: 1.5rem; 
  display: none; 
}
.main-nav{
  margin-left: auto;
  letter-spacing: 0.05rem;
  font-size: 0.9rem;
}
.main-nav ul { 
  display: flex; 
  gap: 2rem; 
}

/* ヘッダーナビゲーションのラベルカスタマイズ */
.main-nav-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em; /* 上下のテキスト間の隙間 */
  line-height: 1.2;
}

.nav-text-en {
  font-size: 0.9rem; /* 英語表記のフォントサイズ */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-text-ja {
  font-size: 0.7rem; /* 日本語表記のフォントサイズ */
}
section { 
  padding: 6rem 0; 
}
h2 { 
  font-size: 2rem; 
  margin-bottom: 1rem; 
}
.news-list li { 
  display: flex; 
  gap: 1rem; 
  margin-bottom: 0.5rem; 
}
.service-items { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); 
  gap: 1rem; 
}

/* TOP/ヒーローセクション */
.hero { 
  position: relative; 
  height: 100vh;
  overflow: hidden;
  padding: 0; 
}
.swiper-container { 
  width: 100%; 
  height: 100%;
  overflow: hidden; 
}
.swiper-slide { 
  position: relative;
  overflow: hidden;
  background-size: contain; 
  background-position: center; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.swiper-button-next, .swiper-button-prev {
  display: none;
}
/* Swiperのページネーション（分数表示）の位置を調整 */
.swiper-pagination{
  color: #FFF;
  font-weight: bold;
  z-index: 11; /* ゲージ(z-index:10)より手前に表示 */
  /* 位置調整 */
  bottom: 40px; /* ゲージコンテナ(bottom:30px)の上になるように調整 */
  right: 30px;  /* ゲージコンテナと右端を合わせる */
  left: auto;   /* leftの指定をリセット */
  width: auto;  /* 幅をコンテンツに合わせる */
  opacity: 0.5;
}

.slide-content {
  position: absolute; /* 背景の上に重なるように */
  z-index: 10;      /* 背景より手前に表示 */
  color: #fff; 
  text-align: left;
  padding: 0 1rem; /* 左右に少し余白を持たせる */
  top: 14rem;
  left: 7rem;
 }
.slide-content h2 { 
  font-size: 3rem;
  line-height: 1.4; /* 行の高さを設定 */
  /* アニメーション中に高さが変わらないように、2行分の高さを確保 */
  min-height: calc(3rem * 1.4 * 2);
  text-shadow: 0 5px 12px rgba(0,0,0,0.5);
  letter-spacing: 0.3rem;
 }

/* タイプライターアニメーション用スタイル */
.typewriter-text {
  position: relative;
  display: inline-block; /* h2をインラインブロック要素にしてカーソルの位置を調整 */
  will-change: opacity, filter; /* アニメーションのパフォーマンスを最適化 */
}

/* アニメーション対象の各文字（span）の初期状態 */
.typewriter-text span {
  opacity: 0;
  transform: translateY(10px); /* 少し下から表示されるように */
  display: inline-block; /* transformを適用するため */
  /* アニメーションを適用 */
  animation-name: fadeIn-char;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards; /* アニメーション後、最後の状態を維持 */
  will-change: opacity, transform; /* アニメーションのパフォーマンスを最適化 */
}

/* 文字がフェードインするアニメーション */
@keyframes fadeIn-char {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* フェードアウト用クラス */
.typewriter-text.fading-out {
  /* JSから渡されるCSS変数(--fade-out-duration)を使ってアニメーション速度を制御します */
  animation: blur-out var(--fade-out-duration, 2s) ease-out forwards;
}

/* にじむようにフェードアウトするアニメーション */
@keyframes blur-out {
  to {
    opacity: 0;
    filter: blur(8px); /* にじみの強さを調整 */
  }
}
.parallax-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: none;
  will-change: transform;
  transform: scale(1.15); /* 初期スケール */
  /* 常にトランジションを適用し、リセット時のカクつきを防ぐ。時間はswiperのspeedと合わせる */
  transition: transform 3.0s ease-out; /* speedの3000ms(3.0s)と合わせる */
}

/* アクティブなスライドの背景にKen Burnsエフェクト（ズームイン）を適用 */
.swiper-slide-active .parallax-bg {
  transform: scale(1); /* Ken Burnsエフェクトの最終スケール */
  transition-duration: 4.9s; /* アクティブ時のズームイン時間（autoplay.delay 1.9s + speed 3.0s） */
}

.timeline-gauge-container {
  position: absolute;
  bottom: 30px; /* 画面下からの位置 */
  right: 30px;  /* 画面右からの位置 */
  width: 150px; /* ゲージの幅 */
  height: 2px;  /* ゲージの高さ */
  background-color: rgba(255, 255, 255, 0.4); /* ゲージの背景色（未完了部分） */
  border-radius: 3px;
  overflow: hidden;
  z-index: 10; /* 他の要素より手前に表示 */
  opacity: 0.5;
}

.timeline-gauge {
  width: 0;
  height: 100%;
  background-color: #fff; /* ゲージ自体の色（進捗部分） */
  border-radius: 3px;
}

/* JavaScriptによってこのクラスが付与されるとアニメーションが開始します */
.timeline-gauge.is-animating {
  animation-name: progress-bar;
  animation-timing-function: linear; /* 一定の速度で進む */
  animation-fill-mode: forwards;     /* アニメーション終了後、最後の状態を維持 */
}

@keyframes progress-bar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* ==========================================================================
   4. 横スクロールテキストセクション
   ========================================================================== */

/* スクロールヒント要素が非表示の時のスタイル */
.js-scrollable.is-hidden {
    opacity: 0;
    pointer-events: none; /* 非表示時はクリックやホバーイベントを無効にする */
}
.x-scroll {
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    padding: 2rem 0;
}

.scrolling-content {
    display: inline-flex;
    align-items: center;
    animation: scroll-left 40s linear infinite;
    gap: 40px;
}

.text-item {
    font-size: 1.5rem;
    color: #000;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.scroll-image {
    height: 4rem;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
}

@keyframes scroll-left {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}


/* TOP/Aboutセクション */
.about {
  z-index: 1;
  display: flex;
  align-items: start; /* 画像の高さに合わせる */
  position: relative;     /* ← 疑似要素を内包するため必須 */
  overflow: hidden;       /* ← はみ出す疑似要素を隠す */
  justify-content: space-between;
}
/* .circleA::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;                          
  transform: translateX(-50%);   
  width: 150vw;
  height: 30vw;                   
  background: #ecebe3;             /
  border-radius: 50%;
  z-index: -1;
} */

/* 左側：画像は上端に */
/* box-shadow：横、縦、ぼかし、広がり、色 */
.about-image{
  width: 50rem;
  height: 30rem;
  z-index: 1;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
.about-image img {
  border-radius: 10px;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 右側：上寄せ＋上部に余白を入れて“段差”を表現 */
.about-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上寄せ */
  align-self: start;           /* グリッドセルの上端 */
  padding: 6rem 10rem 4rem 22rem; /* 上に6remの余白で下げる */
  margin-top: 4rem;
  background: #ecebe3;
  width: 65vw;
  min-height: 50vh;
  margin-left: -14rem;
  border-bottom-left-radius:10px;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
.about-content h2{
  margin: 0;
  line-height: 1.3;
  font-size: 3rem;
  margin-bottom: 0.2rem;
  letter-spacing: 0.15rem;
  border-bottom: 1px solid #9AAFEF;
  padding-bottom: 10px;
}
.about-content span{
  color: #555;
  font-size: clamp(0.75rem, 0.6286rem + 0.5178vw, 1.25rem);
  margin-bottom: 1.5rem;
}
.about-content p{
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.rev_raw{
  flex-direction: row-reverse;
}
.rev_img{
  width: 55vw;
  margin-left: -10rem;
}

.rev_box{
    border-bottom-right-radius: 10px;
}


/* TOP/Newsセクション */
/* ■ ニュース全体を左右グリッドに */
.news-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 2rem;
  align-items: start;
  width: 65%;
}

/* ■ サイドバー */
.news-sidebar h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}
.news-btn {
  display: inline-block;
  background: #414856;
  color: #fff;
  padding: 0.8rem 2rem;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* ■ 投稿リスト */
.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-item {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}
.news-date {
  white-space: nowrap;
  margin-right: 2rem;
  font-size: 0.9rem;
  color: #666;
}
.news-cat {
  display: inline-block;
  background: #d2b37a;   /* ゴールド系ボタン色 */
  color: #fff;
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  margin-right: 2rem;
}
.news-link {
  flex: 1;
  color: #333;
  font-size: 1rem;
  text-decoration: none;
}
.news-link:hover {
  text-decoration: underline;
}

/* News Section - SP More button (Hidden by default on desktop) */
.news-sp-more-wrapper {
    display: none;
}

/* TOP/Serviceセクション */
/* Service 全体 */
.service {
  background-color: #ecebe3;
  padding: 6rem 0;
  text-align: center;
}
.service h2 {
  margin-bottom: 0.5rem;
}
.service .subtitle {
  margin-bottom: 3rem;
  color: #666;
  font-size: 0.9rem;
}

/* Grid レイアウト */
.service-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem 1.5rem;
  margin-bottom: 3rem;
}

/* 各アイテム */
.service-item {
  margin: 0;
}

/* ホバーエフェクト用の画像ラッパー */
.service-item-image-wrapper {
  position: relative; /* 中の画像を絶対配置にするための基準点 */
  border-radius: 10px; /* 角丸をラッパーに設定 */
  overflow: hidden;    /* 角丸からはみ出す画像を隠す */
  line-height: 0;      /* 画像下にできる不要な余白を削除 */
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.4);
}

/* ラッパー内の画像は角丸をリセット */
.service-item-image-wrapper img {
  border-radius: 0;
  /* 画像が切り替わる際のアニメーション */
  transition: opacity 0.4s ease-in-out;
}

/* ホバー用の画像を重ねて、最初は非表示に */
.service-image-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* PC（ホバー可能なデバイス）でのみホバー時に画像を表示 */
@media (hover: hover) {
  .service-item:hover .service-image-hover {
    opacity: 1;
  }
}

.service-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.service-item figcaption {
  margin-top: 1rem;
  font-size: 1rem;
  color: #222;
}

/* MORE ボタン */
.service-more {
  display: inline-block;
  background: #414856;
  color: #fff;
  padding: 0.8rem 2rem;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* 商品検索セクション */
/* Grid 構成 */
/* 商品検索セクションのリンク全体 */
.product-search-link {
  display: block; /* aタグをブロック要素にして領域を広げる */
  text-decoration: none; /* デフォルトの下線を削除 */
  color: inherit; /* 親要素の色を継承 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-search-link:hover {
  transform: translateY(-5px); /* ホバー時に少し上に移動 */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつけて立体感を出す */
}

.product-search-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.4);
}

/* 左カラム：黒背景＋テキスト */
.product-search-content {
  background-color: #000;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.product-search-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.product-search-content .subtitle {
  font-size: 1rem;
  margin-bottom: 2rem;
  opacity: 0.8;
}

.product-search-content .description {
  line-height: 1.8;
  font-size: 0.9rem;
  margin-bottom: 3rem;
}

/* 右カラム：画像を全面にカバー */
.product-search-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-search-content,
.product-search-image {
    height: 20rem;
    width: 50%;
}

/* Recruit セクション全体 */
.recruit {
  position: relative;
  /* 背景画像 */
  background-image: url(../img/top/recruit.webp);
  background-size: 254%;
  background-position: center;
  /* Flex で中身を縦横中央に */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 50rem;
  height: 20rem;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.recruit:hover{
  transform: translateY(-5px); /* ホバー時に少し上に移動 */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつけて立体感を出す */
}

/* 白い枠＋テキストを包むボックス */
.recruit-inner {
  position: relative;
  max-width: 900px;        /* 枠の横幅 */
  width: 90%;
  padding: 3rem 2rem;      /* 枠内余白 */
  box-sizing: border-box;
  border: 2px solid #fff;  /* 白い枠線 */
  text-align: center;
  background: rgba(255,255,255,0); /* 中身は透過 */
  z-index: 1;
  border-radius: 10px;
}

/* 見出し */
.recruit-inner h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #000;
}

/* サブタイトル */
.recruit-inner .subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 1.5rem;
}

/* 説明文 */
.recruit-inner .description {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

/* ===== Contact ===== */
.contact {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 80px 0;
  margin-top: 6rem;
}

.contact-bg {              /* 背景写真 */
  position: absolute;
  inset: 0;
  background: url("../img/top/contact.webp") center/cover no-repeat;
  z-index: -2;
  will-change: transform;
}

.contact::before {         /* 黒のオーバーレイ */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
}

/* 見出し */
.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25em;
}
.section-title small {
  display: block;
  font-size: .95rem;
  font-weight: 400;
  margin-top: .35em;
  letter-spacing: .1em;
}

/* リード文 */
.section-lead {
  font-size: .95rem;
  margin-bottom: 2.5rem;
}

/* カードレイアウト */
.contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.contact-card {
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  width: min(100%, 420px);
  padding: 2rem 2.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  border-radius: 10px;
}

.card-head {               /* 黒帯ラベル */
  background: #000;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  padding: .55rem 0;
  margin: 0 0 1.8rem;
}

.tel-number, .mail-label {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
.tel-prefix { font-size: 1.35rem; font-weight: 400; }

.tel-hours,
.mail-note {
  font-size: .8rem;
  line-height: 1.6;
}

/* accessセクション */
.access{
  padding-bottom: 0;
}
.access .container {
  flex-wrap: wrap;
  width: 100%;
}
.access-main-content {
  display: flex;
  width: 100%;
  gap: 2rem;
  align-items: stretch;
  height: 270px;
}
.flex_wrap{
    display: flex;
    width: 37.5%;
    flex-wrap: wrap;
    height: 250px;
    justify-content: end;
}
.access_left{
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.access_left h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.access_left p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.flex_wrap figure{
  width: 45%;
  height: 100%;
}
.flex_wrap figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.top_map{
  width: 37.5%;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  filter: grayscale(100%);
}
.top_map iframe{
  width: 100%;
  height: 100%;
  border: none;
}

/* ラッパーでスケーリングと高さ調整を行う */
.my-mini-cal {
  display: block;
  transform: scale(0.7);          /* 縮小率：要調整 */
  transform-origin: top left;      /* 左上基点で縮小 */
  max-width: 100%;                 /* 親幅に応じる */
  height: auto;                    /* スケール後の高さを自動計算 */
  font-size: 100%;                 /* 子要素はスケールに任せる */
  margin-bottom: 1rem;             /* カレンダー下の余白 */
}

/* カレンダー全体の横幅を固定（縮小前の基準幅） */
.my-mini-cal .simcal-calendar {
  width: 330px;                    /* 縮小後に 250px 近くに収まる */
  margin: 0 auto;
}

/* セルの余白を少し詰める */
.my-mini-cal .simcal-day {
  padding: 3px;                    /* デフォルトより軽く詰める */
}

/* ヘッダ部分を少し圧縮 */
.my-mini-cal .simcal-nav,
.my-mini-cal .simcal-month {
  font-size: 0.9em;
  line-height: 1.2;
}

/* 日付番号も若干小さめ */
.my-mini-cal .simcal-day-number {
  font-size: 0.85em;
}

/* ❶ いったん以前の色指定をリセット（任意だが安全）*/
.my-mini-cal .simcal-day-label.simcal-day-number{
  background:transparent;
  color:inherit;
}

/* ▼ 週の開始曜日が「月曜」のサイト（Sun が 7 列目） */
.my-mini-cal .simcal-weekday-0   .simcal-day-label.simcal-day-number{ 
  background:#dd3333;
  color:#fff;
}

/* ▼ 新バージョン（v3.5+）の詳細リンク */
.my-mini-cal .simcal-event-bubble-link{ display:none !important; }

/* カレンダー下の営業時間テキスト */
.calendar-notes {
  display: block;
  width: 100%;
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
}

.calendar-notes p {
  margin: 0;
}

.access_tips{
  margin-left: 5em;
  padding: 2em 0;
  font-size: 0.8rem;
}


/* ==========================================================================
   6. フッター
   ========================================================================== */
footer {
  background-color: #333; /* 暗めの背景色 */
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}

.footer-nav {
  margin-bottom: 1.5rem; /* メニューと著作権表示の間のスペース */
}

.footer-menu-list {
  display: flex;
  justify-content: center; /* メニュー項目を中央寄せ */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.5rem; /* メニュー項目間のスペース */
}

.footer-menu-list li a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease; /* ホバー時のアニメーション */
}

.footer-menu-list li a:hover {
  color: #d2b37a; /* ホバー時の色（例: ゴールド系） */
}

.copyright {
  font-size: 0.8rem;
  color: #aaa; /* 著作権表示の文字色 */
}

/* スクロールダウンアイコン */
.scroll {
    position: absolute;
    bottom: 0%; /* 表示位置を調整 */
    left: 7rem;  /* 表示位置を調整 */
    z-index: 100;
    transform: rotateZ(-90deg);
    -webkit-transform: rotateZ(-90deg);
    transform-origin: left top; /* 回転の基点を左上に変更 */
    display: block;
    transition: all 0.1s linear;
    color: #FFF;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

/* スクロールテキスト横の線 */
.scroll span {
  display: inline-block;
  width: 100px;
  height: 1px;
  position: relative;
  margin-left: 1em;
  vertical-align: middle;
  overflow: hidden;
}

/* 線が伸びるアニメーション用の疑似要素 */
.scroll span::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #fff; /* 親要素と同じ色 */
    animation: scroll-line 2s ease-in-out infinite;
}

/* 線が伸びるアニメーション */
@keyframes scroll-line {
    0% {
        transform: translateX(200%);
    }
    50%, 100% {
        transform: translateX(0%);
    }
}

/* ==========================================================================
   7. レスポンシブスタイル
   ========================================================================== */
@media (max-width: 768px) {
    header.site-header{
      height: 4em;
    }
    .scroll{
      left: 3rem;
    }
    .container {
        width: 95%; /* 左右の余白を少し増やす */
    }
    section {
        padding: 3rem 0; /* セクションの上下パディングを減らす */
    }
    h2 {
        font-size: 1.8rem; /* モバイルでの一般的なH2サイズ */
    }

    /* ヒーローセクションのキャッチコピー */
    .slide-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%; /* 画面幅に対して90%の幅 */
        padding: 0;
        text-align: center; /* テキストを中央揃えに */
    }

    .slide-content h2 {
        /* 画面幅に応じてフォントサイズを滑らかに調整 */
        font-size: clamp(1.6rem, 5vw, 2.5rem);
        line-height: 1.5;
        /* 2行分の高さを確保 */
        min-height: calc(clamp(1.8rem, 5vw, 2.5rem) * 1.5 * 2);
        letter-spacing: 0.1rem; /* 文字間を少し詰める */
    }

    .typewriter-text {
        display: block; /* 中央揃えに対応させる */
    }

    /* ヒーローセクション */
    .hero-resize {
        top: 50%; /* 垂直方向中央に配置 */
        left: 50%; /* 水平方向中央に配置 */
        transform: translate(-50%, -50%);
        width: 100%; /* 全画面幅 */
        height: 100%; /* 全画面高 */
        padding: 0; /* パディングを削除 */
        border: none; /* ボーダーを削除 */
        border-top-left-radius: 0; /* 角丸を削除 */
    }

    .hero-slider {
        border: none; /* ボーダーを削除 */
        border-top-left-radius: 0; /* 角丸を削除 */
    }
    .hero-slide {
        border-top-left-radius: 0; /* 角丸を削除 */
    }

    /* 横スクロールテキストセクション */
    .x-scroll {
        padding: 2rem 0; /* パディングを小さく */
    }
    .scrolling-content {
        gap: 20px; /* ギャップを小さく */
    }
    .text-item {
        font-size: 1.2rem; /* フォントサイズを小さく */
    }
    .scroll-image {
        height: 30px; /* 画像の高さを小さく */
    }

    /* Aboutセクション */
    .about {
        flex-direction: column; /* 縦積みに変更 */
        margin-top: 0; /* 負のマージンを削除 */
        padding: 4rem 0; /* パディングを調整 */
    }
    .about-image,
    .rev_img {
        width: 90%; /* 全幅に */
        height: auto; /* 画像の高さは自動 */
        max-height: 300px; /* 画像の最大高さを設定 */
        margin: 0 auto;
    }
    .about-content,
    .rev_box {
        padding: 2rem 1rem; /* パディングを調整 */
        border-bottom-left-radius: 0; /* 特定の角丸を削除 */
        border-bottom-right-radius: 0; /* 特定の角丸を削除 */
        min-height: auto; /* 最小高さを削除 */
        background: #ecebe3; /* 背景色を統一 */
        width: 95%;
        margin: 2rem auto;
        border-radius: 10px;
    }
    .about-content h2,
    .rev_box h2 {
        font-size: 1.8rem; /* 見出しサイズを調整 */
    }
    .about-content span,
    .rev_box span {
        font-size: 1rem; /* サブタイトルサイズを調整 */
    }
    .about-content p,
    .rev_box p {
        font-size: 0.9rem; /* 段落のフォントサイズを調整 */
    }
    .about-content .btn,
    .rev_box .btn {
        margin: 0 auto;
    }
    .circleA::before {
        width: 100vw; /* 幅を小さく */
        height: 20vw; /* 高さを小さく */
        top: -10vw; /* 位置を調整 */
        border-radius: 50%; /* 円形を維持 */
    }

    /* Newsセクション */
    .news-grid {
        grid-template-columns: 1fr; /* 1カラムに */
        row-gap: 2rem; /* 行間のギャップを追加 */
        width: 90%; /* 幅を調整 */
    }
    .news-sidebar {
        text-align: center; /* サイドバーの内容を中央寄せ */
    }
    .news-sidebar h2 {
        font-size: 2rem; /* 見出しサイズを調整 */
        margin-bottom: 1rem; /* マージンを調整 */
    }
    .news-item {
        flex-direction: column; /* 日付、カテゴリ、リンクを縦積みに */
        align-items: flex-start; /* アイテムを左寄せ */
        padding: 0.8rem 0; /* パディングを調整 */
    }
    .news-date {
        margin-right: 0;
        margin-bottom: 0.5rem; /* 日付の下にマージンを追加 */
    }
    .news-cat {
        margin-right: 0;
        margin-bottom: 0.5rem; /* カテゴリの下にマージンを追加 */
    }

    /* Newsセクション - SP用MOREボタン (SPでのみ表示) */
    .news-sp-more-wrapper {
        margin: 3rem 0 0;
        display: block; /* SPで表示 */
        text-align: center; /* ボタンを中央寄せ */
    }

    /* 商品検索セクション */
    .product-search-flex {
        flex-direction: column; /* 縦積みに変更 */
    }
    .product-search-content,
    .product-search-image {
        width: 100%; /* 全幅に */
        min-height: 15rem; /* コンテンツの最小高さを設定 */
    }
    .product-search-image img {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .product-search-content {
        padding: 2rem 0; /* パディングを調整 */
    }
    .product-search-content h2 {
        font-size: 2rem; /* 見出しサイズを調整 */
    }
    .product-search-content .subtitle {
        margin-bottom: 1rem; /* マージンを調整 */
    }
    .product-search-content .description {
        margin-bottom: 2rem; /* マージンを調整 */
    }

    /* Recruitセクション */
    .recruit {
        width: 90%; /* レスポンシブな幅に */
        height: 15rem; /* 高さを小さく */
        background-size: cover; /* 背景画像が全体を覆うように */
    }
    .recruit-inner {
        padding: 2rem 1rem; /* パディングを調整 */
    }
    .recruit-inner h2 {
        font-size: 2rem; /* 見出しサイズを調整 */
    }

    /* Accessセクション */
    .access .container {
        flex-direction: column; /* 縦積みに変更 */
    }
    .flex_wrap,
    .top_map {
        width: 100%; /* 全幅に */
    }
    .flex_wrap {
        flex-direction: column; /* 左側のコンテンツと画像を縦積みに */
        height: auto;
        align-items: center;
    }
    .access_left,
    .flex_wrap figure {
        width: 95%; /* 全幅に */
        margin-bottom: 1rem; /* 間にマージンを追加 */
        align-items: center;
    }
    .access_left h2{
      font-size: 2rem;
    }
    .flex_wrap figure img {
        border-radius: 10px; /* 全ての角に角丸を適用 */
    }
    .top_map {
        margin-top: 2rem; /* マップの上にマージンを追加 */
        width: 95%;
    }
    .top_map iframe {
        height: 200px; /* マップの高さを調整 */
        border-radius: 10px;
    }
    .my-mini-cal{
      transform: scale(1.0);
    }

  /* お問い合わせ情報 (既存のルールをここに統合) */
  .contact-info { flex-direction: column; gap: 1.5rem; }
  .sp-only { display: inline; }     /* 改行制御用 */
  .pc{display: none;}
  .s_only{display: block;}

  /* スクロールヒントアイコン */
  .js-scrollable {
    width: 80px;      /* SP用に幅を縮小 */
    height: 160px;    /* SP用に高さを縮小 */
    left: 2rem;       /* SP用に左からの位置を調整 */
    bottom: 8rem;     /* SP用に下からの位置を調整 */
  }
  .js-scrollable::before {
    width: 75px;      /* アイコンの幅を縮小 */
    height: 150px;    /* アイコンの高さを縮小 */
  }

  /* フッター レスポンシブ */
  .footer-menu-list {
    flex-direction: column; /* スマホでは縦並び */
    gap: 0.5rem;
  }

  .main-nav {
    position: fixed;
    top: 5rem; /* ヘッダーの高さに合わせて調整 */
    right: 0;
    width: 100%;
    height: calc(100vh - 5rem); /* ヘッダーの高さを引いた残りの高さ */
    background-color: rgba(255, 255, 255, 0.95); /* 半透明の白背景 */
    z-index: 999; /* 他のコンテンツの上に表示 */
    overflow-y: auto; /* メニュー内容が多ければスクロール可能に */
    transform: translateX(100%); /* 画面外に配置して非表示 */
    transition: transform 0.3s ease-out; /* スライドアニメーション */
    display: none;
  }
  .site-title{
    font-size: 1rem;
  }
  .menu-toggle { 
    display: block; 
    margin-left: auto;
    position: relative; /* z-indexを有効にするために追加 */
    z-index: 1001;      /* トグルボタンがメニューより手前に来るように */
    right: 2rem;
    /* width, height, position, background, border, cursor, padding, color は共通スタイルから継承 */
    /* font-size: 0; も共通スタイルで設定済み */
  }
  .main-nav.active {
    transform: translateX(0); /* 画面内にスライドイン */
    display: block; /* メニューを可視化 */
  } 

  /* ハンバーガーアイコンの線 */
  .hamburger-icon,
  .hamburger-icon::before,
  .hamburger-icon::after {
    content: '';
    position: absolute;
    width: 2rem; /* Line width relative to .menu-toggle */
    height: 3px; /* Thickness of the lines */
    background-color: currentColor; /* .menu-toggle の色を継承 */
    transition: all 0.3s ease-in-out; /* アニメーションを滑らかに */
    left: 50%; /* 親要素(.menu-toggle)の中央を基準にする */
  }

  /* 中央の線 */
  .hamburger-icon {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* 上の線 */
  .hamburger-icon::before {
    transform: translateX(-50%);
    top: -10px; /* 中央の線からの相対位置 */
  }

  /* 下の線 */
  .hamburger-icon::after {
    transform: translateX(-50%);
    top: 10px; /* 中央の線からの相対位置 */
  }

  .main-nav.active .main-nav-list { /* activeクラスが付与された時のみ適用 */
    flex-direction: column; /* 縦並び */
    padding: 2rem 1rem; /* メニュー内のパディング */
    gap: 1.5rem; /* メニュー項目間のスペース */
    align-items: center; /* メニュー項目を中央寄せ */
    display: flex;
  }

  /* 上の線 */
  .hamburger-icon::before {
    top: -10px; /* 中央の線からの相対位置 */
  }

  /* 下の線 */
  .hamburger-icon::after {
    top: 10px; /* 中央の線からの相対位置 */
  }

  /* メニューが開いている時のアニメーション */
  .main-nav.active + .menu-toggle .hamburger-icon {
    opacity: 1; 
    background-color: transparent; /* 背景色も透明に */
  }

  .main-nav.active + .menu-toggle .hamburger-icon::before {
    transform: translate(-10px, 10px) rotate(45deg); /* 上の線を中央に移動させて回転 */
  }

  .main-nav.active + .menu-toggle .hamburger-icon::after {
    transform: translate(-10px,-10px) rotate(-45deg); /* 下の線を中央に移動させて回転 */
  }
  .access-main-content{
    flex-direction: column;
    height: auto;
    align-items: center;
    margin-bottom: 4rem;
  }
  .access_tips{
  margin: 1em;
}
  .access_tips p{
    margin-bottom: 1em;
  }
}

/* ブレークポイント */
@media (max-width: 1024px) {
  /* 1024px以下で適用したいスタイルがあればここに追加 */
}
@media (max-width: 640px) {
  h2 { 
    font-size: 1.5rem;
   }
  section {
     padding: 4rem 0;
     }
}