@charset "UTF-8";
/* 
*****************************************************************/
/* mixin
*********************************************************************/
/* カラー */
/* media query */
/* SP縦から */
/* SP横から */
/* タブレット縦から */
/* 1280 */
/* フルワイド */
/* フルワイド */
.area_visual .pagettl svg {
  width: 100%;
  height: auto;
  max-width: 28vw;
  min-width: 160px;
}
.area_visual .block_main_s {
  width: 100%;
  height: calc(100vh - 120px);
  line-height: 0em;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  .area_visual .block_main_s {
    height: auto;
    aspect-ratio: 6/5;
  }
}
.area_visual .block_main_s .main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.area_visual .block_main_s .main img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.area_visual .block_main_s .illust {
  position: absolute;
  right: 0px;
  bottom: 0px;
  line-height: 0em;
  width: 46%;
  max-height: calc(100vh - 140px);
  overflow: hidden;
}
.area_visual .block_main_s .illust img {
  width: 100%;
  height: auto;
}

.area__about_ovt {
  padding: 4vw 8vw;
  box-sizing: border-box;
  width: 100vw;
}
@media all and (max-width: 480px) {
  .area__about_ovt {
    padding: 20px;
  }
}

.area__about_ovt--ttl {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.mark_welcome {
  max-width: 230px;
  width: 40%;
  margin: auto;
}

.ttl_ovt {
  margin-top: -10px;
}
@media all and (max-width: 480px) {
  .ttl_ovt {
    margin-top: 10px;
  }
}

.area__about_ovt--copy {
  text-align: center;
  font-size: clamp(1.5rem, 1.0416vw, 2rem);
  line-height: 1.8em;
  max-width: 600px;
  margin: auto;
}
@media all and (max-width: 480px) {
  .area__about_ovt--copy {
    margin-top: 10px;
  }
}

.area__about_ovt--column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5625vw;
  padding: 4vw 0 0;
}
@media all and (max-width: 480px) {
  .area__about_ovt--column {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}

.column__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}

.column__item--img img {
  width: 100%;
  height: auto;
}

.point_number {
  width: 12.5vw;
  padding: 10px 0 0;
  min-width: 120px;
}

.ttl_column {
  font-size: clamp(1.8rem, 1.5625vw, 3rem);
  line-height: 1.3em;
  padding: 5px 0 0;
}

.txt_column {
  padding: 5px 0 0;
  font-size: 1.4rem;
  line-height: 2em;
  text-align: justify;
}

.area__image_ovt {
  width: 100vw;
}
.area__image_ovt img {
  width: 100%;
  height: auto;
}

.area__image_ovt--large {
  position: relative;
  width: 100vw;
}

.img_large {
  position: relative;
  width: 100vw;
  line-height: 0em;
}

.wave {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
}
.wave img {
  width: 100vw;
  height: auto;
}

.copy_vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.vertical {
  writing-mode: vertical-rl;
  color: #FFF;
  line-height: 1.4em;
  font-size: clamp(1.3rem, 1.5625vw, 3rem);
  font-weight: 400;
  display: inline-block;
  text-align: left;
}

.copy_en {
  color: #FFF;
  font-family: "Roboto", serif;
  font-weight: 800;
  font-size: clamp(2rem, 2.8125vw, 5.4rem);
  width: 100%;
  text-align: center;
  position: absolute;
  top: -1.46vw;
}

.area__image_ovt--double {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}
.area__image_ovt--double .item {
  line-height: 0em;
}

.area__omotenashi {
  padding: 0 8vw 8vw;
}
@media all and (max-width: 480px) {
  .area__omotenashi {
    padding: 0 20px 20px;
  }
}

.yasashii {
  background-color: #D6EEFB;
}
.yasashii .iro, .yasashii .hd_card {
  color: #2FA5D2;
}

.genki {
  background-color: #FCEDF4;
}
.genki .iro, .genki .hd_card {
  color: #EC759E;
}

.block__omotenashi {
  margin: 8vw 0 0;
  border-radius: 20px;
  padding: 4vw;
  position: relative;
}

.hd_check {
  width: 12.5vw;
  min-width: 70px;
  margin: -8vw auto 0;
}

.elem01 {
  position: absolute;
  top: -2vw;
  left: 8vw;
  width: 9vw;
  min-width: 50px;
}

.elem02 {
  position: absolute;
  top: 3vw;
  right: 5vw;
  width: 7vw;
  min-width: 40px;
}

.hd_omotenashi {
  text-align: center;
  font-size: clamp(2rem, 2.8125vw, 5.4rem);
  line-height: 1.3em;
  font-weight: 200;
  padding: 10px 0 0;
}

.list_omotenashi {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.083vw;
  padding: 2.083vw 0 0;
}
@media all and (max-width: 480px) {
  .list_omotenashi {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
  }
}

.item_omotenashi {
  text-align: center;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}

.img_omotenashi {
  line-height: 0em;
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 20px;
}
.img_omotenashi img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.hd_card {
  font-size: clamp(1.4rem, 1.5625vw, 3rem);
  font-weight: 200;
  line-height: 1.2em;
  padding: 8px 0 0;
}
@media all and (max-width: 896px) {
  .hd_card {
    display: grid;
    place-content: center;
  }
}

.txt_card {
  font-size: clamp(1.3rem, 1.302vw, 2.5rem);
  font-weight: 200;
  line-height: 1.3em;
  padding: 5px 0 0;
}

.tsume {
  letter-spacing: -0.05em;
}

.btn_reserve {
  text-align: center;
  padding: 30px 0 0;
  font-size: 1.6rem;
  line-height: 1.4em;
}
.btn_reserve img {
  margin-top: 8px;
}

/***************************************************
 * Generated by SVG Artista on 6/19/2023, 1:30:29 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1021.5531616211px;
    stroke-dasharray: 1021.5531616211px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1021.5531616211px;
  }
}
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1021.5531616211px;
    stroke-dasharray: 1021.5531616211px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1021.5531616211px;
  }
}
@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both, animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
  animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both, animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 308.1819458008px;
    stroke-dasharray: 308.1819458008px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 308.1819458008px;
  }
}
@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 308.1819458008px;
    stroke-dasharray: 308.1819458008px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 308.1819458008px;
  }
}
@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s both, animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s both;
  animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s both, animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 364.5446472168px;
    stroke-dasharray: 364.5446472168px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 364.5446472168px;
  }
}
@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 364.5446472168px;
    stroke-dasharray: 364.5446472168px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 364.5446472168px;
  }
}
@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.24s both, animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
  animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.24s both, animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 195.1575775146px;
    stroke-dasharray: 195.1575775146px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 195.1575775146px;
  }
}
@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 195.1575775146px;
    stroke-dasharray: 195.1575775146px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 195.1575775146px;
  }
}
@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.36s both, animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
  animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.36s both, animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 571.5936279297px;
    stroke-dasharray: 571.5936279297px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 571.5936279297px;
  }
}
@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 571.5936279297px;
    stroke-dasharray: 571.5936279297px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 571.5936279297px;
  }
}
@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.48s both, animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
  animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.48s both, animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 195.1552124023px;
    stroke-dasharray: 195.1552124023px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 195.1552124023px;
  }
}
@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 195.1552124023px;
    stroke-dasharray: 195.1552124023px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 195.1552124023px;
  }
}
@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both, animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
  animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both, animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 898.5425415039px;
    stroke-dasharray: 898.5425415039px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 898.5425415039px;
  }
}
@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 898.5425415039px;
    stroke-dasharray: 898.5425415039px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 898.5425415039px;
  }
}
@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.72s both, animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s both;
  animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.72s both, animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 485.8416748047px;
    stroke-dasharray: 485.8416748047px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 485.8416748047px;
  }
}
@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 485.8416748047px;
    stroke-dasharray: 485.8416748047px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 485.8416748047px;
  }
}
@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.84s both, animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
  animation: animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.84s both, animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
}