@charset "UTF-8";

body::before {
  content: "";
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(/img/top/mv1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.5;
}
/* top */
.top_wrapper {
  display: grid;
  gap: var(--spacing-2xl);
}
@media screen and (max-width: 768px) {
  .top_wrapper {
    gap: var(--spacing-lg);
  }
}

.top_wrapper,
.reserve,
.top-reason,
.top-price,
.top-video,
.top-voice,
.top-news,
.reserve-description,
.banner1,
.banners
{
  margin-bottom: var(--spacing-2xl) !important;
}
@media screen and (max-width: 768px) {
  .top_wrapper,
  .reserve,
  .top-reason,
  .top-price,
  .top-video,
  .top-voice,
  .top-news,
  .reserve-description,
  .banner1,
  .banners {
    margin-bottom: var(--spacing-lg) !important;
  }
}

.slider-2 .slick-slide img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.small {
  font-size: var(--text-sm);
}
.top-reason {
}
.top-reason__wrapper {
  padding: var(--spacing-xl) 0 var(--spacing-xl) var(--spacing-xl);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 180px 0px 0px 0px;
}
@media screen and (max-width: 1024px) {
  .top-reason__wrapper {
    border-radius: 216px 0px 0px 0px;
  }

}
@media screen and (max-width: 768px) {
  .top-reason__wrapper {
    border-radius: 0px 0px 0px 0px;
  }
}
.top-reason__title {
  font-size: var(--text-2xl);
  font-weight: bold;
  padding-block-end: var(--spacing-xs);
  border-bottom: 4px solid #fff;
}
@media screen and (max-width: 768px) {
  .top-reason__title {
    font-size: var(--text-lg);
  }
}
.top-reason__title-wrapper {
  background-color: #023f99;
  color: #fff;
  padding-block: var(--spacing-xl);
  padding-inline-start: var(--spacing-2xl);
  border-radius: 200px 0px 0px 0px;
  margin-bottom: var(--spacing-xl);
}
@media screen and (max-width: 768px) {
  .top-reason__title-wrapper {
    padding-block: var(--spacing-md);
    padding-inline-start: var(--spacing-lg);
  }
}

@media screen and (max-width: 768px) {
  .top-reason__title-wrapper {
    border-radius: 0px 0px 0px 0px;
  }
}

.slider02 {
  margin-block: var(--spacing-xl);
}
@media screen and (max-width: 768px) {
  .slider02 {
    margin-block: var(--spacing-lg);
  }
}
.top-reason__item {
  display: grid;
  padding: var(--spacing-md);
  background-color: #fff;
}

.top-reason__item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.top-reason__description {
  padding-block: var(--spacing-md);
}
.top-reason-item__title {
  font-size: var(--text-lg);
  font-weight: 900;
}
.top-reason-item__text {
  font-size: var(--text-sm);
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .top-reason__button {
    transform: translateX(-16px);
  }
}

.top-price__wrapper {
  display: grid;
  max-width: 980px;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
  background-color: #fff;
  border-radius: 20px;
  margin-inline: auto;
}
@media screen and (max-width: 1024px) {
  .top-price__wrapper {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
    gap: var(--spacing-lg);
  }
}
.top-price__title {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-template-columns: 48px 1fr;
  gap: var(--spacing-xs);
  padding-bottom: var(--spacing-sm);
  color: #023f99;
}
.top-price__title img {
  width: auto;
  height: 100%;
}
.top-price__item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.top-price__title h2 {
  font-size: var(--text-3xl);
  text-align: center;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .top-price__title h2 {
    font-size: var(--text-2xl);
  }
}
.top-price__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: var(--spacing-lg);
  column-gap: var(--spacing-md);
}
@media screen and (max-width: 768px) {
  .top-price__items {
      row-gap: var(--spacing-md);
  column-gap: var(--spacing-sm);
  }
}
.top-price__item {
  display: grid;
  gap: var(--spacing-md);
}
.top-price__info {
  display: grid;
  grid-template-rows: auto 1fr auto;
  text-align: center;
  gap: var(--spacing-sm);
  align-items: center;
}
@media screen and (min-width: 769px) {
  .top-price__info img{
    width: 80%;
    margin-inline: auto;
  }
}

.top-price__classification {
  display: grid;
  font-size: var(--text-2xl);
  font-weight: 900;
  height: 2lh;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .top-price__classification {
    font-size: var(--text-xl);
  }
}
@media screen and (max-width: 420px) {
  .top-price__classification {
    font-size: var(--text-lg);
  }
}
.top-price__classification span {
  font-size: var(--text-md);
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .top-price__classification span {
    font-size: var(--text-sm);
  }
}
.top-price__amount {
  display: flex;
  justify-content: center;
  align-items: end;
  font-size: var(--text-3xl);
  font-weight: 900;
  padding: 0 0.4em 0.8em;
  background-color: #fff;
  height: 100%;
  gap: var(--spacing-xs);
  border-radius: 10px;
  color: #EA5513;
}
@media screen and (max-width: 768px) {
  .top-price__amount {
    font-size: var(--text-xl);
  }
}
@media screen and (max-width: 420px) {
  .top-price__amount {
    font-size: var(--text-lg);
  }
}
.top-price__amount-yen {
  font-size: var(--text-md);
  font-weight: 900;
  margin-bottom: 4px;
}

.top-price__banner--sp {
  display: none;
}
.top-price__banner--pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .top-price__banner--sp {
    display: block;
  }
  .top-price__banner--pc {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .top-price__amount-yen {
    font-size: var(--text-sm);
  }
}
@media screen and (max-width: 420px) {
  .top-price__amount-yen {
    font-size: var(--text-xs);
  }
}

.top-video__wrapper {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0px 180px 0px 0px;
}
@media screen and (max-width: 768px) {
  .top-video__wrapper {
    border-radius: 0px 0px 0px 0px;
  }
}
.top-video__title {
  font-size: var(--text-2xl);
  font-weight: bold;
  padding-inline-start: var(--spacing-md);
  margin-inline-end: 1.75em;
  padding-block-end: var(--spacing-xs);
  border-bottom: 4px solid #fff;
}
@media screen and (max-width: 768px) {
  .top-video__title {
    font-size: var(--text-lg);
  }
}

.top-video__title-wrapper {
  background-color: #023f99;
  color: #fff;
  padding-block: var(--spacing-xl);
  border-radius: 0px 200px 0px 0px;
}
@media screen and (max-width: 768px) {
  .top-video__title-wrapper {
    padding-block: var(--spacing-lg);

    border-radius: 0px 0px 0px 0px;
  }
}
.top-video__contents {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--spacing-md);
  padding-block: var(--spacing-2xl);
}
@media screen and (max-width: 768px) {
  .top-video__contents {
    padding-block: var(--spacing-lg);
  }
}
.top-video__video {
  aspect-ratio: 560 / 315;
  width: 100%;
}

.top-voice__wrapper {
  display: grid;
  background-color: #fff;
  border-radius: 8px;
  padding: var(--spacing-xl);
}

@media screen and (max-width: 768px) {
  .top-voice__wrapper {
    padding: var(--spacing-lg);
  }
}

.top-voice__title {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 4px solid #66c164;
}
.top-voice__title img {
  width: 40px;
}
.top-voice__title h2 {
  font-size: var(--text-xl);
  font-weight: bold;
  color: #66c164;
}

.top-voice__items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid #d1d1d1;
}
@media screen and (max-width: 1024px) {
  .top-voice__items {
    grid-template-columns: 1fr;
  }
}
.top-voice__item {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: #a0e16d;
  border-radius: 8px;
}
.top-voice__item-heading {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: var(--spacing-md);
}
.top-voice__item-heading p {
  width: fit-content;
  font-weight: bold;
}
.top-voice__item-heading p::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: #fff 6px solid;
  margin-top: -4px;
}
.top-voice__item-contents {
  padding: var(--spacing-lg);
  background-color: #fff;
  border-radius: 8px;
}
.top-voice__item-contents p {
  font-size: var(--text-sm);
  line-height: 1.7;
}

a.top-voice__item:hover { color: inherit; }

.top-news {
  width: 100%;
}

.top-news__wrapper {
  display: grid;
  background-color: #fff;
  border-radius: 8px;
  padding: var(--spacing-xl);
}

.top-news__wrapper .scrollBox {
  max-height: 220px;
  padding: 10px;
  overflow-y: auto;
}
.top-news__wrapper .scrollBox p {
  padding: 15px;
  border-bottom: 1px solid #e8e8e8;
}

@media screen and (max-width: 768px) {
  .top-news__wrapper {
    padding: var(--spacing-lg);
  }
}

.top-news__title {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 4px solid #023f99;
}
.top-news__title img {
  width: 40px;
}
.top-news__title h2 {
  font-size: var(--text-xl);
  font-weight: bold;
  color: #023f99;
}

@media screen and (max-width: 768px) {
}

.top-reason__item {
  background-color: #fff;
  padding: var(--spacing-md);
  border: 2px solid #023f99;
}

.top-reason__item-description {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
}

.top-reason__item-text {
  font-size: var(--text-sm);
  font-weight: 400;
}
.top-reason__item-title {
  font-size: var(--text-lg);
  font-weight: 900;
}
/* 矢印画像の高さと幅 */
.swiper-button-prev,
.swiper-button-next {
  background-color: #fff; /* ボタンの背景色 */
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  border: 1px solid #023f99;
  opacity: 0.7;
}
.swiper-button-next {
  right: 0; /* ボタンを右端にくっつける */
}
.swiper-button-prev {
  left: 0; /* ボタンを左端にくっつける */
}
.swiper-button-next::after {
  content: url(/img/icons/icon-right.svg);
  display: block;
  color: #023f99;
  display: grid;
  place-items: center;
  font-weight: bold;
  line-height: 0;
}
.swiper-button-prev::after {
  content: url(/img/icons/icon-left.svg);
  display: block;
  color: #023f99;
  display: grid;
  place-items: center;
  font-weight: bold;
  line-height: 0;
}
.swiper-contents {
  display: grid;
  gap: var(--spacing);

  width: 100%;
  color: #333;
  padding: 8px 8px 32px 8px;
  border: 1px solid #023f99;
  background-color: #fff;
}

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

.banners {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2em;
  max-width: 980px;
}

@media screen and (max-width: 768px) {
  .banners {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}

/* 営業カレンダー */

.top-calendar{
  padding: var(--spacing-xl);
  border-radius: 8px;
}
@media screen and (max-width: 768px) {
  .top-calendar{
    padding: var(--spacing-lg);
  }
}
.top-calendar__title{
    display: grid;
    grid-template-columns: 48px auto;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border-bottom: 4px solid #e60012;
}
.top-calendar__title h2{
  font-size: var(--text-xl);
  font-weight: bold;
  color:#e60012;
  text-align: start;}

.top-calendar__title img{
  width: 40px;
}
.top-calendar__closed-days{
  margin-bottom: var(--spacing-md)
}
#fcal { background:#fff; overflow:hidden; }
/* #fcal h2 { width:100%; margin-bottom:30px; text-align:center; } */
#fcal p > span.close { color:#e60012; }

#fcal .data { position:relative; margin-bottom:15px; width:48%; border: 3px solid #e60012; }
@media screen and (max-width: 599px) {
  #fcal .data { width:100%; }
}
#fcal .ym { margin:0; text-align:center; color: #fff; background:#e60012; }
#fcal .ym .year { margin-top:0; font-size:1.4em; }
#fcal .ym .month { font-size:1.8em; margin-left:10px; }

#fcal .data .saturday { color:#0d75ce; }
#fcal .data .holiday { color:#e60012; }
#fcal .data table { margin: 5%; width:90%; }
#fcal .data td { padding:2px; font-weight:bold; text-align:center; }
#fcal .data td span { display:block; width:28px; margin:auto; padding-bottom:2px; line-height:26px; border-radius:50%; }

#fcal .calList { margin-bottom:1em; column-gap: 25px; }
#fcal .calList li { position:relative; padding-left:20px; font-weight:bold; }
#fcal .calList li::before { content:""; position:absolute; width:15px; height:15px; top:7px; left:0; border-radius:50%; }

#fcal .data td.close span { color:#FFF; background-color:#e60012; }
#fcal .calList li.close::before { background:#e60012; }

.banner { 
  width: 100%;
}