@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:40px auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

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

.slick img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slick .slick-slide {
    margin:0 10px;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  max-height: 315px;
}
.youtube p {
  /*display: flex;*/
  min-height: 59px;
  padding-bottom: 0;
}

@media screen and (max-width: 640px) {
  .youtube p {
    min-height: unset;
    margin-top: 35px;
  }
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 60%;
    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 li button:before {
    font-size: 40px;
}
.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}
*/

/*========= レイアウトのためのCSS ===============*/
/*
body{
  background:#eee;
}

h2,p {
    text-align:center;
    padding:20px;
}

ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #333;
}

a:hover,
a:active{
  text-decoration: none;
}
*/

/* ==================================================
   予約ログイン案内モーダル（ネット予約クリック時）
   ※ 競合回避のため一部 !important を使用
================================================== */
.reserve-login-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  padding: 24px 12px;
}
.reserve-login-modal.is-open{ display:flex; }

.reserve-login-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.reserve-login-modal__panel{
  position:relative;
  width: min(420px, 100%);
  background:#eef6ff;
  border-radius: 14px;
  padding: 38px 22px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.reserve-login-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:2px solid #2f7cff;
  background:transparent;
  cursor:pointer;
}
.reserve-login-modal__close::before,
.reserve-login-modal__close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  background:#2f7cff;
  transform-origin:center;
}
.reserve-login-modal__close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.reserve-login-modal__close::after { transform: translate(-50%,-50%) rotate(-45deg); }

.reserve-login-modal__title{
  margin: 0 0 18px;
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:#1b1b1b;
}

.reserve-login-modal__btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  border-radius:999px;
  padding: 14px 18px;
  text-decoration:none;
  font-weight:700;
  line-height:1;
  box-sizing:border-box;
}

.reserve-login-modal__btn--primary{
  background:#1e6bff;
  color:#fff;
}
.reserve-login-modal__btn--primary span{
  display:inline-block;
  margin: 0 auto;
}
.reserve-login-modal__btn--primary:hover{
  background:#1e6bff;
  color:#fff;
  opacity:.75;
}

.reserve-login-modal__btn--outline{
  background:#fff;
  border:2px solid #1e6bff;
  color:#1e6bff;
}
.reserve-login-modal__btn--outline span{
  display:inline-block;
  margin: 0 auto;
}
.reserve-login-modal__btn--outline:hover{
  background:#fff;
  border:2px solid #1e6bff;
  color:#1e6bff;
  opacity:.75;
}

.reserve-login-modal__arrow{
  width:10px;
  height:10px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform: rotate(45deg);
  flex:0 0 auto;
}

.reserve-login-modal__note{
  margin: 14px 0 6px;
  text-align:center;
  font-size:13px;
  color:#4a4a4a;
  padding-bottom:0;
  font-weight:600;
}

body.is-modal-open{
  overflow:hidden;
}

/* 強制（他CSSに潰された時の保険） */
#reserveLoginModal.reserve-login-modal{
  position: fixed !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:2147483647 !important;
}
#reserveLoginModal.reserve-login-modal.is-open{
  display:flex !important;
}
#reserveLoginModal .reserve-login-modal__backdrop{
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  z-index:0 !important;
}
#reserveLoginModal .reserve-login-modal__panel{
  z-index:1 !important;
}



/* ===== 予約システム変更のお知らせ（トップ） ===== */
.otn-notice-wrap{ margin-bottom:50px; }

.otn-notice{
  border: 1px solid #e6a3a1;
  background:#fff;
  overflow:hidden;
  font-size:13px;          /* 本文（長文）はこのサイズのまま */
  line-height:1.65;
}

.otn-notice__bar{
  background:#d85a55;
  color:#fff;
  text-align:center;
  font-weight:700;
  padding:10px 14px;
  letter-spacing:.02em;
  font-size:15px;          /* 他の文章は少し大きく */
}

.otn-notice__inner{ padding:18px 42px 16px; }

.otn-notice__meta{
  margin:0 0 10px;
  text-align:center;
  font-weight:700;
  color:#1e62b6;
  font-size:16px;          /* 他の文章は少し大きく */
}

.otn-notice__text{
  margin:0 0 12px;
  color:#333;
  font-weight:600;
  /* font-size は .otn-notice の 13px を継承（＝指定文のサイズを維持） */
}

.otn-notice__row{
  display:flex;
  gap:24px;
  align-items:center;
}

/* 3項目（左）＋ボタン（右）を“左右中央寄せ” */
.otn-notice__row--points{
  justify-content:center;
  text-align:center;       /* ブロック（左/右）を中央寄せ */
}

.otn-notice__row--points .otn-notice__list{
  flex:0 1 640px;          /* 左を伸ばしすぎない */
  display:inline-block;    /* ブロックとして中央寄せ */
  text-align:left;         /* 文字は左揃えのまま */
}

.otn-notice__cta{
  flex:0 0 auto;
  white-space:nowrap;
  text-align:center;
}

/* 箇条書き（画像の「・」っぽく） */
.otn-notice__list{
  margin:0;
  padding:0;
  list-style:none;
}

.otn-notice__list li{
  position:relative;
  padding-left:1.2em;
  margin:4px 0;
  font-size:16px;          /* 他の文章は少し大きく */
  font-weight:600;
}

.otn-notice__list li:before{
  content:"・";
  position:absolute;
  left:0;
  top:0;
  color:#333;
}

/* ボタン（赤い枠＋丸） */
.otn-notice__btn{
  display:inline-block;
  border:1px solid #d85a55;
  color:#d85a55;
  text-decoration:none;
  font-weight:700;
  padding:12px 20px;
  border-radius:999px;
  line-height:1;
  background:#fff;
  font-size:16px;          /* 他の文章は少し大きく */
}

.otn-notice__btn:hover{
  text-decoration:none;
  border:1px solid #c72c26;
  color:#c72c26;
}

/* SP：縦積み＆中央 */
@media (max-width: 767px){
  .otn-notice__inner{ padding:14px 12px 14px; }

  .otn-notice__row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .otn-notice__row--points{
    text-align:left;
  }

  .otn-notice__row--points .otn-notice__list{
    display:block;
    text-align:left;
    flex:1 1 auto;
  }

  .otn-notice__cta{
    text-align:center;
    white-space:normal;
  }

  .otn-notice__btn{
    width:auto;
    display:inline-block;
  }
}