/*
 * グローバルスタイル
 * ページ全体のベースとなる設定です。背景色やフォント、余白を整えます。
 */


/* ==================================================================== */
/* Hero section: split text/image slider (AI1)                         */
/* ==================================================================== */

/* コンテナ設定：上下に余白を設け、左右はパーセンテージで余白を確保 */
.slider-container {
  width: 100%;
  margin: 0 auto;
  padding:0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: border-box;
  background: #FEFDF6;

}

/* 左側のスライダー：幅50%、右側と同じ高さになるよう stretch させます */
.left-slider {
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
  padding-right: 0px;
  box-sizing: border-box;
}

/* 左スライドのカードデザイン */
.left-slide {
  height: 100%;
  box-sizing: border-box;
}

/* テキストスタイル */


/* 右側のスライダー：画像用エリア */
.right-slider {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
}

.right-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右スライダーではナビゲーションを非表示にする */
.right-slider .slick-prev,
.right-slider .slick-next,
.right-slider .slick-dots {
  display: none !important;
}

/* 左スライダーの矢印スタイル */
.left-slider .slick-prev,
.left-slider .slick-next {
  position: absolute;
  bottom: 25px;
  z-index: 2;
  width: 35px;
  height: 35px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  overflow: hidden;
}

.left-slider .slick-prev {
  left: 30%;
  background-image: none; /* ← 背景画像は使わない */
}

/* ▼ prev フェード切替 */
.left-slider .slick-prev::before,
.left-slider .slick-prev::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.6s ease;
}

.left-slider .slick-prev::before {
  background-image: url('../img/icon_prev.png');   /* 通常 */
  opacity: 1;
}

.left-slider .slick-prev::after {
  background-image: url('../img/icon_prev_no.png'); /* ホバー時 */
  opacity: 0;
}

.left-slider .slick-prev:hover::before { opacity: 0; }
.left-slider .slick-prev:hover::after  { opacity: 1; }



.left-slider .slick-prev:hover,
.left-slider .slick-next:hover {
  background-color: transparent;
}

.left-slider .slick-prev:before,
.left-slider .slick-next:before {
  content: '';
}
.left-slider .slick-next {
  right: 30%;
  background: none;   /* 背景画像は使わない */
  overflow: hidden;   /* 念のため */
}

.left-slider .slick-next::before,
.left-slider .slick-next::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.6s ease;  /* ← これがフェードを担う */
}

.left-slider .slick-next::before {  /* 通常 */
  background-image: url('../img/icon_link.png');
  opacity: 1;
}
.left-slider .slick-next::after {   /* hover時 */
  background-image: url('../img/icon_link_no.png');
  opacity: 0;
}

.left-slider .slick-next:hover::before { opacity: 0; }
.left-slider .slick-next:hover::after  { opacity: 1; }
/* ドットナビゲーション（左スライダー用） */
.left-slider .slick-dots {
  position: absolute;
  bottom: 35px;
  left: 48%;
  display: flex !important;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.left-slider .slick-dots li {
  margin-right: 8px;
}

.left-slider .slick-dots button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #000000;
  font-size: 0;
  cursor: pointer;
}

.left-slider .slick-dots .slick-active button {
  width: 12px;
  height: 12px;
  background-color: #000000;
  border: none;
}

/* レスポンシブ：768px以下では縦並びに変更 */
@media (max-width: 768px) {
  .slider-container {
    flex-direction: column;
    padding: 0 0 40px 0;
  }
  .left-slider,
  .right-slider {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .right-slider {
    order: -1;
    margin-top: 0;
  }
  .left-slider {
    order: 0;
    margin-top: -20px;
  }
  .left-slider .slick-prev {
    left: 20%;
    bottom: -30px;
  }
  .left-slider .slick-next {
    right: 20%;
    bottom: -30px;
  }
  .left-slider .slick-dots {
    left: 45%;
    bottom: -20px;
  }
}

/* ==================================================================== */
/* Gallery section: multi-item slider (AI2)                             */
/* ==================================================================== */

.gallery-container {
  border-top:1px solid #000;
  background: #FEFDF6;
  width: 100%;
  margin: 0 auto;
  padding-bottom:100px;
  box-sizing: border-box;
}

.gallery-slider {
  position: relative;
}

.gallery-item {
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .gallery-item {
    width:100%;
  }
}
.gallery-item:nth-child(even) {
  box-sizing: border-box;
  border-right:1px solid #000;
  border-left:1px solid #000;
}
@media (max-width: 768px) {
  .gallery-item:nth-child(even) {
    box-sizing: border-box;
    border:none;
  }
}


.gallery-card {
  display: block;
  color:#000;
  text-decoration: none;
}

.gallery-card__img {
  overflow: hidden;
}

.gallery-card__img img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-card__img img {
  transform: scale(1.1);
}

.caption {
}

/* ギャラリーの矢印 */
.gallery-slider .slick-prev,
.gallery-slider .slick-next {
  position: absolute;
  top: auto;
  bottom: -70px;
  transform: none;
  z-index: 2;
  width: 35px;
  height: 35px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  transition: 1s;
}

.gallery-slider .slick-prev {
  left: 40%;
}
.gallery-slider .slick-prev {
  left: 40%;
  background-image: none; /* ← 背景画像は使わない */
}

@media screen and (max-width: 768px) {
  .gallery-slider .slick-prev { left: 20%; }
}

/* ▼ gallery prev フェード切替 */
.gallery-slider .slick-prev::before,
.gallery-slider .slick-prev::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.6s ease;
}

.gallery-slider .slick-prev::before {
  background-image: url('../img/icon_prev.png');   /* 通常 */
  opacity: 1;
}

.gallery-slider .slick-prev::after {
  background-image: url('../img/icon_prev_no.png'); /* ホバー時 */
  opacity: 0;
}

.gallery-slider .slick-prev:hover::before { opacity: 0; }
.gallery-slider .slick-prev:hover::after  { opacity: 1; }
  @media screen and (max-width: 768px) {
    .gallery-slider .slick-prev {
      left: 20%;
    }
  }



/* 基本ボタンは背景画像を使わない */
.gallery-slider .slick-next {
  right: 40%;
  background: none;
  overflow: hidden; /* はみ出し防止 */
}
@media screen and (max-width: 768px) {
  .gallery-slider .slick-next {
    right: 20%;
  }
}

/* 通常/ホバーの2枚レイヤーを重ねる */
.gallery-slider .slick-next::before,
.gallery-slider .slick-next::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.6s ease; /* ← 行きも帰りも同じ時間でフェード */
}

/* 通常アイコン */
.gallery-slider .slick-next::before {
  background-image: url('../img/icon_link.png');
  opacity: 1;
}

/* ホバーアイコン */
.gallery-slider .slick-next::after {
  background-image: url('../img/icon_link_no.png');
  opacity: 0;
}

/* hoverで入れ替え */
.gallery-slider .slick-next:hover::before { opacity: 0; }
.gallery-slider .slick-next:hover::after  { opacity: 1; }
.gallery-slider .slick-prev:before,
.gallery-slider .slick-next:before {
  content: '';
}

/* ドット表示 */
.gallery-slider .slick-dots {
  position: absolute;
  bottom: -60px;
  left: 0;
  width: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-slider .slick-dots li {
  margin: 0 4px;
}

.gallery-slider .slick-dots button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #000000;
  font-size: 0;
  cursor: pointer;
}

.gallery-slider .slick-dots .slick-active button {
  width: 12px;
  height: 12px;
  background-color: #000000;
  border: none;
}

@media (max-width: 768px) {
  .gallery-item img {
    height: auto;
  }
}

/* ==================================================================== */
/* Tabs section                                                         */
/* ==================================================================== */

/* タブメニュー */
.tab-menu {

  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  background-color: #fff;
}

/* 個々のタブ */
.tab-item {
  flex: 0 0 25%;
  max-width: 25%;
  text-align: center;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  color: #333333;
  border-right: 1px solid #e0e0e0;
  position: relative;
  transition: background-color 0.3s ease;
}

/* 最後のタブは境界線を無しにする */
.tab-item:last-child {
  border-right: none;
}

/* アクティブ状態 */
.tab-item.active {
  background-color: #000000;
  color: #ffffff;
}

/* アクティブ状態の下向き矢印 */
.tab-item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #000000;
}

/* タブ内容 */
.tab-contents {
  background: #FEFDF6;
  width: 100%;
  overflow: hidden;
}

.tab-content {
  display: none;
  width: 100%;
  padding: 40px 0 80px 0;
  box-sizing: border-box;
  text-align: center;
}

.tab-content.active {
  display: block;
}

.tab-content img {
  width:95%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ==================================================================== */
/* FAQ section                                                         */
/* ==================================================================== */

/* FAQセクション全体のラッパー */
.faq-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* FAQコンテナ本体 */
.faq-section {
  display: flex;
  width: 100%;
  margin: 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .faq-section {
    flex-wrap: wrap;
  }
}

/* 左列（黒背景） */
.faq-header {
  background-color: #000000;
  color: #ffffff;
  /* flex: 0 0 20%; */
  padding: 5px 20px 40px 20px;
  font-weight: bold;
  /* display: flex; */
  align-items: stretch;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .faq-header {
    display: block;
    width:100%;
    padding:20px 10px;
    flex:none;
    box-sizing: border-box;
    text-align: center;
  }
}

/* 右列（質問リスト） */
.faq-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}
@media screen and (max-width: 768px) {
  .faq-list {
    flex: none;
    width: 100%;
  }
}

.faq-item {
  border-bottom: 1px solid #dddddd;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
  outline: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.faq-question:focus,
.faq-question:active {
  background: transparent;
  color: inherit;
}

.faq-question .question-text {
  flex: 1;
  color: #000000;
  font-weight: bold;
  font-size:20px;
  line-height: 30px;
}
@media screen and (max-width: 768px) {
.faq-question .question-text {
  font-size:16px;
  line-height: 22px;
  padding-right:35px;
}
}

.faq-question .icon {
  font-size: 27px;
  color:#000;
  transition: transform 0.2s ease;
}

.faq-answer {
  display: none;
  padding: 0 80px 20px 20px;
  font-size: 14px;
  line-height: 26px;
}

.faq-item.active .question-text {
  color: #FF4848;
  font-weight: bold;
}
.faq-item .question-text:hover{
  color: #FF4848;
  font-weight: bold;
}

.faq-item.active .icon {
  content: '−';
  font-size: 27px;
  padding-right:5px;
}

/* ==================================================================== */
/* Scroll indicator                                                    */
/* ==================================================================== */

/* 右下に表示されるスクロール案内。90度回転し、背景と対比するようにブレンドモードを利用 */
.scroll-indicator {
  position: fixed;
  right: -200px;
  bottom: 45%;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  line-height: 1;
  transform: rotate(90deg) translate(-50%, 0);
  transform-origin: 0 0;
  mix-blend-mode: difference;
  z-index: 100;
  color: #ffffff;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-indicator .text {
  letter-spacing: 0.1em;
}

.scroll-indicator::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 1px;
  width: 184px;
  background: currentColor;
  animation: scroll-line 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite both;
  transform: translateY(-5px);
}

@keyframes scroll-line {
  0% {
    clip-path: inset(0 0 0 0);
  }
  50% {
    clip-path: inset(0 0 0 100%);
  }
  50.1% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@media screen and (max-width: 767px) {
  .scroll-indicator {
    display: none;
  }
}