@charset "utf-8";#ec-header {
    display: none;
}
#wrapper {
    padding-top: 0px;
}
.ec-footer {
    display: none;
}

#wrapper {
    padding-top: 0px;
}
.crumbsList {
    display: none;
}

@charset "utf-8";@font-face {
	font-family: 'HelveticaBold';
}

/* --- 背景色付きのセクション --- */
.color-area {
    background: linear-gradient(to bottom, #FAE6C5, #ffffff);
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding: 20px 20px;
    box-sizing: border-box;
}

.bg-white {
  background-color: #fff;
}
.bg-black {
  background-color: #333;
  color: #fff;
}


/* --- 共通設定（既存） --- */
.image {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
}

.image img { display: block; width: 100%; }
.pc_only { display: block; } .sp_only { display: none; }
@media (max-width: 768px) { .pc_only { display: none; } .sp_only { display: block; } }


/* --- ここから今回の実装用 --- */

/* 1. 奥のレイヤー */
.fixed-layer {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;  
  display: flex;
  align-items: flex-start; 
  justify-content: center;
}

/* 2. スペーサー */
.spacer {
  width: 100%;
  height: auto; 
  aspect-ratio: 16 / 9; 
  position: relative;
  z-index: 0;
  pointer-events: none;
}

/* 3. 手前のレイヤー */
.scroll-layer {
    position: relative;
    z-index: 2;
    margin-top: -2px;
    background-color:#141414;
}

.scroll-layer > div:first-child {
  margin-top: 0 !important;
}

/* --- CSSスライダーの設定 --- */

.css-slider {
  position: relative; 
  overflow: hidden;
}

/* 1枚目（土台） */
.slide-base {
    position: relative;
    width: 100%;
    z-index: 1;
}

/* 2枚目（上に被さる） */
.slide-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  animation: fadeLoop 6s infinite;
}

.slide-top.delay {
  animation-delay: -3s; 
}

/* 画像の共通調整 */
.css-slider img {
  display: block;
  width: 45%;
  height: auto;
  margin:0 auto;
}

/* --- アニメーションの動き --- */
@keyframes fadeLoop {
  /* 0%〜45%：透明（下の画像が見える） */
  0% { opacity: 0; }
  45% { opacity: 0; }
  
  /* 50%：不透明に変化していく（フェードイン） */
  50% { opacity: 1; }
  
  /* 50%〜95%：不透明のまま（上の画像が見える） */
  95% { opacity: 1; }
  
  /* 100%：また透明に戻る（フェードアウト） */
  100% { opacity: 0; }
}

/* --- 配置変更用のコンテナ --- */
.align-box {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  width: 100vw;
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box; 
}

/* --- 配置のバリエーション --- */
.is-left {
  justify-content: flex-start; /* 左寄せ */
}
.is-center {
  justify-content: center;     /* 中央寄せ */
}
.is-right {
  justify-content: flex-end;   /* 右寄せ */
}

/* --- この中の画像のサイズ設定 --- */
.align-box img {
  display: block;
  height: auto;
  width: 50%; 
}

/* ボタンの基本スタイル */
.allbtn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 18px 0;
    background-color: #080838;
    color: #ffffff !important;
    text-align: center;
    text-decoration: none;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 2.0rem;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
    margin-top: 80px;
    margin-bottom: 100px;
}

/* マウスを乗せた時の動き */
.allbtn:hover {
  opacity: 0.8;
}


/* --- スマホ・タブレット用調整（768px以下） --- */
@media (max-width: 768px) {
  
  /* PC/SP画像の切り替え */
  .pc_only { display: none; }
  .sp_only { display: block; }

  /* 1. スペーサー（TOP画像用）の比率修正 */
  .spacer {
    height: auto;
    aspect-ratio: 16 / 9; 
  }

  /* 2. スライダー画像の調整 */
.css-slider img {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto;
}

  /* 3. 配置変更用コンテナ */
  .align-box {
    padding-left: 0;
    padding-right: 0;
  }

 
  .align-box.is-center img {
    width: 100%;
  }

  .align-box.is-left img,
  .align-box.is-right img {
    width: 80%; 
  }
  
}


/* --- スマホ（縦）用調整（430px以下） --- */
@media (max-width: 430px) {
  
  /* TOP画像のスペーサーをスマホ用縦長画像の比率に合わせる */
  .spacer {
    aspect-ratio: 750 / 1080;
  }
  
  /* 念の為の継承（768pxの設定を引き継ぎます） */
  .align-box.is-center img { width: 100%; }
  .align-box.is-left img,
  .align-box.is-right img { width: 80%; }
}

@media (max-width: 320px) {

.allbtn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 12px 0;
    background-color: #080838;
    color: #ffffff !important;
    text-align: center;
    text-decoration: none;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 2.0rem;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
    margin-top: 80px;
    margin-bottom: 100px;
}