@charset "utf-8";

:root {
  --color-key: #000;
  --color-key-lt: #333;
  --color-key-bg: #F7F7F5;
  --color-accent: #47763B;
  --color-accent-bg: #FFF5F6;
  --body-bg: #F2F1EB;
  --blue: #4F8ECC;
  --red: #E8441D;
  --brown: #C3641D;
  --orange: #E4B62D;
  --yellow: #F6CE34;
  --font-sans-serif: 'Zen Kaku Gothic New', sans-serif;
  --font-serif: 'Zen Old Mincho', serif;
  --font-en: 'EB Garamond', serif;
  --font-size-base: 2.4rem;
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --z-index-header: 100;
  --z-index-modal: 200;
  --height-header: 7.29166vw;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

h1,
h2,
h3,
h4,
h5,
p {
  font-size: inherit;
  margin: 0;
}

img {
  height: auto;
  vertical-align: bottom;
  width: 100%;
}

input,
button,
textarea,
select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  line-height: initial;
  outline: none;
  font-size: inherit;
  font-family: inherit;
  width: 100%;
}

form,
label {
  margin-bottom: 0;
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

dd {
  margin-bottom: 1rem;
}

a,
button {
  color: var(--color-key);
  cursor: pointer;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.6;
}

th {
  font-weight: var(--font-weight-base);
  text-align: left;
}

th,
td {
  padding: .3em 0;
}

html {
  font-size: .52083vw;
  -webkit-text-size-adjust: 100%;
}

body {
  animation: fadeIn .8s ease-in 0s 1 normal;
  background-color: var(--body-bg);
  margin: 0;
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: 1.9;
  color: #000;
  word-break: normal;
  overflow-wrap: break-word;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

/* --------------------------------
  header
-------------------------------- */
.header {
  line-height: 1;
  padding: 2.604vw;
}

.header__right {
  opacity: 1;
  position: fixed;
  right: 2.604vw;
  top: 2.604vw;
  transform: translateY(0%);
  transition: opacity 1s, transform 1s;
  will-change: transform, opacity;
  z-index: var(--z-index-header);
}

.header__right.is-scroll-up  {
  opacity: 0;
  transform: translateY(-70%);
}

.header__tel {
  background-color: var(--body-bg); 
  border: 1px solid;
  display: block;
  height: 4.688vw;
  line-height: 1.3;
  padding: 0.6em 1em;
  text-align: center;
  transition: opacity .3s;
}

.header__tel:hover {
  opacity: .7;
}

.header__tel-text {
  display: block;
  font-size: 1.7rem;
}

.header__tel-num {
  font-size: 3rem;
}

.header__tel-num::before {
  background: url(../img/icon/tel.svg) center/ 100% no-repeat;
  content: "";
  display: inline-block;
  height: .7em;
  margin-right: .1em;
  width: .7em;
}


/* --------------------------------
  ロゴ
-------------------------------- */
.logo {
  display: inline-block;
  line-height: 1;
}

.logo__img {
  height: 4.688vw;
  width: auto;
}

.logo.is-scroll-down  {
  animation: DownAnime 1s forwards;
}

/* --------------------------------
  footer
-------------------------------- */
.footer {
  background: url(../img/footer-bg.jpg) left top / 18.75vw repeat #333;
  color: #fff;
  margin-top: 7.292vw;
}

.footer__copy {
  font-size: 1.6rem;
  line-height: 1;
  padding: 2em 0;
  text-align: center;
}

/* --------------------------------
  ファーストビュー
-------------------------------- */
.hero {
  padding-left: 12.5vw;
}

.hero__slider-wrap {
  height: 49.479vw;
  position: relative;
}

.hero__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s linear, visibility .1s 2s
}

.hero__slider.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 2.5s linear, visibility .1s
}

.hero__slider img {
  height: 100%;
  object-fit: cover;
}

.hero__slider.is-animation img {
  animation: kvAnim 9s linear both
}

.hero__slider-inner {
  height: 100%;
  position: relative;
  overflow: hidden
}

.hero__slider-inner-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 110%;
  height: 100%;
}

@keyframes kvAnim {
  0% {
    transform: none
  }
  100% {
    transform: translateX(-9%)
  }
}

/* --------------------------------
  ボタン
-------------------------------- */
.button-wrap {
  font-size: 2.2rem;
  margin-top: 1em;
}

.button {
  border: 1px solid;
  display: inline-block;
  line-height: 1;
  padding: .5em 2em .7em .6em;
  position: relative;
  transition: opacity .3s;
}

.button::after {
  background: url(../img/icon/arrow-right.svg) center / 100% no-repeat;
  content: "";
  height: 1.7em;
  margin-top: -.85em;
  position: absolute;
  right: -1em;
  top: 50%;
  width: 1.7em;
}

/* --------------------------------
  ABOUT
-------------------------------- */
.about {
  margin-top: 10.938vw;
}

.about__inner {
  padding: 0 12.5vw 0 16.667vw;
  position: relative;
}

.about__head {
  text-align: center;
}

.about__body {
  margin-top: 2.60416vw;
}

.about__title {
  font-size: 4.8rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}

.about__text {
  margin-top: 2em;
}

.about__text-wrap {
  flex: 1;
}

.about__text {
  text-align: justify;
}

.about__bg {
  padding-left: 12.5vw;
}

/* --------------------------------
  コンテンツ
-------------------------------- */
.content {
  margin-top: 14.583vw;
}

.content__head {
  text-align: center;
}

.content__head-title {
  display: inline-block;
  font-size: 5.6rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}

.content__head-title::after {
  border-top: 2px solid;
  content: "";
  display: block;
  margin: .8em auto 0;
  width: 3.5em;
}

.content__body {
  margin-top: 7.292vw;
}

.content--lodging .content__body,
.content--lodging .content__foot {
  margin-top: 2em;
}

.content--lodging .table-price {
  table-layout: fixed;
}

.content--meal .content__body {
  margin-top: 3em;
}

.content--meal-img {
  position: relative;
  margin-top: 1.5em;
}

.content--meal__name {
  background-color: var(--body-bg);
  bottom: 0;
  font-weight: var(--font-weight-medium);
  left: 3.385vw;
  line-height: 1;
  padding: .7em .5em;
  position: absolute;
}

/* --------------------------------
  スライドショー
-------------------------------- */
.slider {
  font-size: 2rem; 
}

.slider__img {
  position: relative;
}

.slider__img-num {
  background-color: var(--body-bg);
  line-height: 1;
  padding: .5em 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  font-weight: bold;
  color:#ffffff;
  background-color:#000000;
}

.slider__text {
  margin-top: 1em;
}

.swiper-pagination-bullet {
  background-color: var(--color-key); 
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 0.521vw;
  margin: 0 0.521vw;
  opacity: .4;
  width: 0.521vw;
}

.swiper-pagination-bullet-active {
  cursor: default;
  opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
  background: url(../img/icon/arrow-slider.svg) center / 100% no-repeat;
  display: inline-block;
  height: 2.083vw;
  margin: 0 0.781vw;
  width: 2.083vw;
  cursor: pointer;
}

.swiper-button-next {
  transform: scale(-1, 1);
}

/* --------------------------------
  タイトル
-------------------------------- */
.title-border {
  font-size: 3rem;
  font-weight: var(--font-weight-medium);
  margin: 1.5em 0 .5em;
  text-align: center;
}

.title-border__inner {
  border: 1px solid;
  display: inline-block;
  line-height: 1.6;
  margin: .3em 0;
  min-width: 18em;
  outline-offset: .15em;
  outline: solid 1px;
  padding: .6em .5em .7em;
  position: relative;
}

.title-rhombus {
  font-size: 3.2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  margin: .5em 0;
}

.title-rhombus::before {
  border: 1px solid;
  content: "";
  display: inline-block;
  height: .75em;
  margin-right: .6em;
  transform: rotate(45deg);
  width: .75em;
}

/* --------------------------------
  テーブル
-------------------------------- */
.table-price {
  margin:1.2em 0 0 0;
  line-height: 1.4;
}

.table-price thead th {
  border: 1px solid rgba(0,0,0, .3);
  font-size: 2.6rem;
  font-weight: var(--font-weight-medium);
  padding: 1em 0;
  letter-spacing: -.05em;
  text-align: center;
}

.table-price thead th:first-child {
  background-color: #fff; 
}

.table-price tbody th,
.table-price tbody td {
  background-color: #fff; 
  border: 1px solid rgba(0,0,0, .3);
  text-align: center;
  padding: .7em .5em;
}

/* --------------------------------
  aリンク
-------------------------------- */
.link {
  color: var(--color-accent);
  text-decoration: underline;
}

.link:hover {
  text-decoration: none;
}

.link--accent {
  color: var(--color-accent);
}

.link--yellow {
  color: var(--yellow);
}

/* --------------------------------
  ユーティリティー
-------------------------------- */
.font-weight-bold {
  font-weight: var(--font-weight-bold);
}

.writing-vertical {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
}

.border {
  border: 1px solid;
  display: inline-block;
  line-height: 1.1;
  padding: 0 0.2em 0.1em;
}

.small {
  font-size: .75em;
  letter-spacing: -.05em;
}

.sp-block {
  display: none;
}

.text-indent {
  line-height: 1.45;
  margin-bottom: .8em;
  padding-left: 1em;
  text-indent: -1em;
}

/* --------------------------------
  スクロールアニメーションプラグイン aos
-------------------------------- */
[data-aos=fade-up] {
  transform: translate3d(0, 1.5625vw ,0);
}

[data-aos=fade-right] {
    transform: translate3d(-1.5625vw,0,0);
}

[data-aos=fade-left] {
    transform: translate3d(1.5625vw,0,0);
}

/* ================================================================
  PC版のみレイアウト
================================================================ */
@media screen and (min-width: 821px) {

  /* --------------------------------
    logo
  -------------------------------- */
  .logo {
    transition: opacity .2s ease-out;
  }

  .logo:hover {
    opacity: .8;
  }

  /* --------------------------------
    ボタン
  -------------------------------- */
  .button::after {
    transition: transform .3s;
  }

  .button:hover {
    opacity: .8; 
  }

  .button:hover::after {
    transform: translateX(.20833vw);
  }

  /* --------------------------------
    ABOUT
  -------------------------------- */
  .about__inner {
    align-items: center;
    display: flex;
  }

  .about--01 .about__inner {
    align-items: flex-start;
  }

  .about--01 .about__text-wrap {
    margin-left: 14.583vw;
  }

  .about--01 .about__text {
    margin-top: 0;
  }

  .about--02__img {
    width: 22.917vw;
    margin-left: 9.375vw;
  }

  .about--03 .about__inner {
    padding: 0 0 0 12.5vw;
  }

  .about--03__img {
    width: 41.146vw;
    margin-left: 9.375vw;
  }

  .about--04 .about__inner {
    padding: 0 0 0 12.5vw;
  }

  .about--04__img {
    width: 41.146vw;
    margin-left: 5.72916vw;
  }

  /* --------------------------------
    コンテンツ
  -------------------------------- */
  .content__inner {
    margin: 0 auto;
    width: 71.354vw;
  }

  .content__body-text {
    font-size: 2.8rem;
  }

  .content--institution .content__inner {
    width: 75vw;
  }

  .content--lodging .content__inner {
    width: 60.41666vw;
  }

  .content--lodging .content__body {
    text-align: center;
  }

  .content--lodging .table-price {
    margin: 5.72916vw auto 0;
    width: 46.354vw;
  }

  .content--meal__imgs {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -3.385vw;
  }

  .content--meal-img {
    padding: 0 3.385vw;
    width: 50%;
  }

  /* --------------------------------
    スライドショー
  -------------------------------- */
  .slider__text {
    padding-right: 18.229vw;
  }

  .slider__paginations {
    background-color: var(--body-bg);
    display: flex;
    position: absolute;
    right: -0.781vw;
    top: 44.531vw;
    z-index: 1;
  }

  .swiper-pagination {
    margin-right: 0.781vw;
  }

}

/* ================================================================
  スマホ版レイアウト
================================================================ */
@media screen and (max-width: 820px) {
  :root {
    --font-size-base: 1.4rem;
    --z-index-sp-nav: 101;
    --height-header: 16vw;
  }

  html {
    font-size: 2.66667vw;
  }

  .sp-none {
    display: none;
  }

  /* --------------------------------
    header
  -------------------------------- */
  .header {
    padding: 6.667vw;
  }

  .header__right {
    right: 6.667vw;
    top: 6.667vw;
  }

  .header__tel {
    height: 11.2vw;
    padding: 0.2em 1em;
  }

  .header__tel-text {
    font-size: 1rem;
  }

  .header__tel-num {
    font-size: 1.6rem;
  }

  .logo__img {
    height: 11.2vw;
  }

  /* --------------------------------
    footer
  -------------------------------- */
  .footer {
    background-size: 50%;
    margin-top: 26.667vw;
  }

  .footer__copy {
    font-size: 1.2rem;
  }

  /* --------------------------------
    ファーストビュー
  -------------------------------- */
  .hero {
    padding-left: 6.667vw;
  }

  .hero__slider-wrap {
    height: 112vw;
  }

  .hero__slider-inner-item {
    width: 120%;
  }

  @keyframes kvAnim {
    0% {
      transform: none
    }
    100% {
      transform: translateX(-18%)
    }
  }

  /* --------------------------------
    ボタン
  -------------------------------- */
  .button-wrap {
    font-size: 1.2rem;
  }

  /* --------------------------------
    ABOUT
  -------------------------------- */
  .about {
    margin-top: 13.333vw;
  }

  .about__inner {
    padding: 0 13.333vw;
  }

  .about__body {
    margin-top: 10.667vw;
  }

  .about__title {
    font-size: 2.4rem;
  }

  .about__text {
    margin-top: 1.5em;
  }

  .about__bg {
    padding-left: 6.667vw;
  }

  .about--01 .about__inner {
    padding-right: 8vw;
  }

  .about--02__img {
    margin: 2em -6.667vw 0;
  }

  .about--03__img {
    margin-top: 21.333vw;
  }

  .about--04__img {
    margin-top: 13.333vw;
  }

  /* --------------------------------
    コンテンツ
  -------------------------------- */
  .content {
    margin-top: 21.33333vw;
  }

  .content__inner {
    padding: 0 6.667vw;
  }

  .content__body {
    margin-top: 10.667vw;
  }

  .content__head-title {
    font-size: 2.4rem;
  }

  .content--lodging .table-price {
    margin-top: 8vw;
  }

  .content--meal__name {
    left: 0;
  }

  /* --------------------------------
    スライドショー
  -------------------------------- */
  .slider {
    font-size: 1.2rem; 
  }

  .swiper-pagination {
    display: none;
  }

  .slider__buttons {
    margin-top: 4vw;
    text-align: center;
  }

  .swiper-button-prev,
  .swiper-button-next {
    height: 5.867vw;
    margin: 0 2.667vw;
    width: 5.867vw;
  }

  /* --------------------------------
    タイトル
  -------------------------------- */
  .title-border {
    font-size: 1.6rem;
  }

  .title-rhombus {
    font-size: 1.6rem;
  }

  /* --------------------------------
    テーブル
  -------------------------------- */
  .table-price {
    width: 100%;
  }

  .table-price thead th {
    font-size: 1.1rem;
  }

  .table-price tbody th,
  .table-price tbody td {
    font-size: 1.1rem;
  }

  /* --------------------------------
    ユーティリティ
  -------------------------------- */
  .text-indent {
    margin-bottom: 1em;
  }

  .sp-block {
    display: block;
  }

  /* --------------------------------
    スクロールアニメーションプラグイン aos
  -------------------------------- */
  /*スマホ時は発火までの秒数の無くす*/
  .sp-aos-none {
    transition-delay: 0s!important;
  }

}