@charset "UTF-8";



/*-------  experiences  -------*/
#experiences{
  padding: 5.5rem 1.5rem;
  background: url(../img/top/bg_experiences01.png);
  background-size: cover;
  position: relative;
}
#experiences .ilust{
  width: 11rem;
  position: absolute;
  top: -0.6rem;
  left: 0;
}
#experiences h2{
  margin-bottom: 3rem;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  position: relative;
}
#experiences h2::after {
  content: '';
  width: 3.5rem;
  height: 1rem;
  position: absolute;
  background: url(../img/top/title_experiences01.png) top center no-repeat;
  background-size: contain;
  top: -2.2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
}
#experiences h2 .ttl-en{
  margin-bottom: -0.25rem;
  color: #ffdf5e;
  font-size: 1rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  display: block;
}
#experiences h2 strong{
  margin-bottom: -.4rem;
  color: #fff2c0;
  font-size: 2.2rem;
  display: inline-block;
}
#experiences h2 .color{
  color: #fff2c0;
}
#experiences .list p{
  margin-bottom: 1.25rem;
}
 /* ボタン */
    .open-btn {
      background: none;
      border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .close-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.6rem;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: transform 0.3s ease;
        color: #505050;
        font-size: .8rem;
    }
    .close-btn .dli-close {
      margin-bottom: .2rem;
      display: inline-block;
      vertical-align: middle;
      color: #333;
      line-height: 1;
      width: 1em;
      height: 0.1em;
      background: currentColor;
      border-radius: 0.1em;
      position: relative;
      transform: rotate(45deg);
    }

    .close-btn .dli-close::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      transform: rotate(90deg);
    }
    .close-btn.bottom{
      margin: 0 auto;
    }
    /* ===== modal ===== */

/* モーダル背景 */
.modal{
  display: none;              /* 初期は完全に消す */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;

  /* 中央寄せ */
  align-items: center;
  justify-content: center;
}

/* 表示状態 */
.modal.active{
  display: flex;
}

/* モーダル本体（枠） */
.modal-content{
  width: 90vw;
  max-width: 500px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  position: relative;

  /* ★枠の高さはここで固定（確実に効く） */
  height: 80vh;

  /* スクロールは中身に任せるのでここでは隠す */
  overflow: hidden;
  padding: 16px;
}

/* 中身（画像など）だけスクロールさせる */
.modal-content p{
  height: 100%;
  margin: 0;
  overflow-y: auto;
}

/* 画像のはみ出し防止 */
.modal-content img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* PC時だけ幅半分 */
@media screen and (min-width: 769px){
  .modal-content{
    width: 50%;
    max-width: 600px;
    height: 65vh;  /* PCは少し低めにしたければ */
  }
}

/* スマホ時：閉じるボタンは上に置く（重なり防止） */
@media screen and (max-width: 767px){
  .close-btn{
    position: static;
    display: block;
    margin-left: auto;
    margin-bottom: 12px;
    font-size: 14px;
  }
}

    /* アニメーション*/
    .modal.active .modal-content {
        animation: fadeInScale 0.4s ease forwards;
    }

    /* 表示用（JSで付与する想定） */
    .modal.is-active {
      display: flex;
    }

    @keyframes fadeInScale {
        0% {
            opacity: 0;
            transform: scale(0.8);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
@media screen and (min-width: 769px) {
    .modal-content {
    width: 50%;
    max-width: 600px; /* 念のため上限（不要なら削除OK） */
    padding: 2rem 0;
  }
    .open-btn:hover{
      opacity: .7;
      transition: opacity 0.3s ease;
    }
    .close-btn {
    margin-top: -.2rem;
  }
  .close-btn.bottom{
      position: static;
  }
}


@media screen and (max-width: 767px) {
  .close-btn {
    position: static;     /* absolute を解除 */
    display: block;
    margin-left: auto;    /* 右寄せ */
    margin-bottom: 12px;  /* 画像との間隔 */
    font-size: 14px;
  }
}


/*-------  list  -------*/
#list{
  padding: 4rem 0 5.5rem;
  position: relative;
  background: #f2eee7;
}
#list::after {
  content: '';
  width: 100%;
  height: 9rem;
  position: absolute;
  background: url(../img/top/bg_list.png) top center no-repeat;
  background-size: contain;
  top: -3rem;
  left: 0;
}
#list .ilust{
  position: absolute;
  z-index: 2;
  top: -4.6rem;
}
#list .list p{
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  #list::after{
    height: 12rem
  }
}


/*-------  introduction  -------*/
#introduction{
  padding-bottom: 3.5rem;
  background: #f8dfbc;
}
#introduction h2{
  width: 100%;
  height: 6rem;
  padding-top: 2rem;
  margin-bottom: 3rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  background: url(../img/top/title_introduction01.png) top center no-repeat;
  background-size: contain;
}
#introduction h2 .ttl-en{
  margin-bottom: -0.25rem;
  color: #fff2c0;
  font-size: 1rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  display: block;
}
#introduction .list{
  padding: 0 .8rem;
}
#introduction .list p:first-child{
  margin-bottom: 1.25rem;
}
#introduction .sit-list{
  width: 82.9%;
  margin: 1.25rem auto 1.25rem;
  padding: 1.25rem;
  background: #f18f01;
  border-radius: 1.25rem;
}
#introduction .sit-list .ttl{
  margin-bottom: .625rem;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
#introduction .sit-list ul{
  display: inline-flex;
}
#introduction .sit-list li:first-child{
  margin-right: .7rem;
}
#introduction .btn{
  width: 90%;
  margin-left: 1.5%;
}
@media screen and (min-width: 769px) {
  #introduction h2{
    height: 7rem;
    padding-top: 2.7rem;
  }
}



/*-------  map  -------*/
#map{
  padding: 0 0 5rem;
  background: #ffffff;
}
#map iframe{
  width: 100%;
  height: 14.4rem;
}
#map .address{
  margin-top: 2rem;
  text-align: center;
}
#map .txt{
  margin: .3rem auto;
  font-size: 1rem;
}
#map .tel a{
  margin: 0 0 0 2rem;
  position: relative;
  color: #505050;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
#map .tel a::after {
  content: '';
  width: 2.1rem;
  height: 2rem;
  position: absolute;
  background: url(../img/common/footer_tel.svg) top center no-repeat;
  background-size: contain;
  display: block;
  top: .6rem;
  left: -2rem;
}
@media screen and (min-width: 769px){
#map iframe{
  height: 18.4rem;
}
}