/* =============================================
メインビジュアルのCSSはここから
============================================= */
.main{
  display: block;
  padding-top: 2.5rem;
  padding-bottom: 8rem;
}

.main-visual {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 のアスペクト比 */
}

.main-visual img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================
メインエリアのCSSはここから
============================================= */
.main-area {
  display: block;
  background-color: #90EE90;
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}


.main {
  display: flex;
  padding: 30px 160px 150px 160px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}
.message {
  margin-right: 10px;
  padding-top: 10px;
}

/* タブレット向けスタイル */
@media (max-width: 768px) {
  .main {
    padding: 20px 10px 150px 10px;
  }
}

/* スマートフォン向けスタイル */
@media (max-width: 480px) {
  .main {
    display: block;
    padding: 10px 10px 100px 10px;
  }

  .profile-img  {
    max-width: 60%;
    margin: 0 auto;
    text-align: center;
  }
}

/*==================================================
スライダーのためのcss
===================================*/
.slick{
  display: block;
  padding: 10px 10px 100px 10px;
  background-color: #F5F5DC;
}

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:100px auto 50px;
}

.slider img {
  width: 40vw;/*スライダー内の画像を40vwにしてレスポンシブ化*/
  height:auto;
}

.slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;/*矢印の色*/
  border-right: 2px solid #666;/*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}

 /* もっと詳しく見るの*/
    div.link-more {
      width: 160px;
      margin: 0 auto;
    }
/* タブレット向けスタイル */
@media (max-width: 768px) {
  .slider img {
    width: 50vw;/*スライダー内の画像を50vwにしてレスポンシブ化*/
    height:auto;
  }

/* スマートフォン向けスタイル */
@media (max-width: 480px) {
  .slider img {
    width: 60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
  }
}
}

/* =============================================
送迎エリアのCSSはここから
============================================= */
.main-access {
  padding:0 160px 150px 160px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* タブレット向けスタイル */
@media (max-width: 768px) {
  .main-access {
    padding: 10px 5px 100px 5px;
  }
}

/* スマートフォン向けスタイル */
@media (max-width: 480px) {
  .main-access {
    padding: 0 5px 100px 5px;
  }
}

/* =============================================
アクセスマップのCSSはここから
============================================= */
.access{
  display: block;
  background-color: #90EE90;
}

.map {
  display: block;
  background-color: #F5F5DC;
}

  div.access-map {
    position: relative;
}

  div.access-map::before {
    content: "";
    display: block;
    padding-top: calc(9 / 16 * 100%);
}

  div.access-map iframe{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
  .iframeWrapper {
    display: flex;
    margin: auto;
    aspect-ratio: 16 / 9; /* 縦横比を16:9に設定 */
    height: auto;
    width: 500px;
  }
}
/* =============================================
お問い合わせのCSSはここから
============================================= */
.bottom-tel{
  display: block;
  background-color: #90EE90;
}
.main-tel-b {
  padding: 0 160px 50px 160px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

span.main-tel{
  font-weight: bold;
  font-size: 1.2rem;
}

.bottom-tel-font{
  font-size: 30px;
  font-family: "Yusei Magic", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image:  url('../img/call.svg');
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-size: 20px 20px;
  background-position: left; /* 中央配置 */
  padding-left: 30px;
  color: #006400;
}

/* タブレット向けスタイル */
@media (max-width: 768px) {
  .main-tel-b {
    padding: 0 5px 50px 5px;
  }

  .bottom-tel-font {
    display: none;
  }
}

/* スマートフォン向けスタイル */
@media (max-width: 480px) {
  .main-tel-b {
    padding: 0 5px 50px 5px;
  }
}