@charset "utf-8";
/* ---------------------------------------------------
   リセット
--------------------------------------------------- */
*{margin:0;padding:0;}
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
html,body{margin:0;padding:0;width:100%;height:100%;vertical-align:baseline;background:transparent;}
body{word-wrap: break-word;}
img{border: 0;vertical-align: top;margin:0;padding:0;}
ul{list-style:none;margin:0;padding:0;}
li{list-style:none;margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
@font-face {
  font-family: "font-corpmaru-v2";
  src: url("../fonts/Corporate-Logo-Rounded.woff") format("woff2"),
  url("../fonts/Corporate-Logo-Rounded.woff") format("woff");
}
:root{
  --maincolor: #fff1d9;
  --subcolor: #fff6e6;
  --green01: #1aaaa7;
  --green02: #2b5e37;
  --green03: #92c21f;
  --pink01: #ea5283;
  --pink02: #e9537d;
  --orange01: #ee781d;
  --blue01: #5ab5ed;
  --blue02: #5a99ed;
  --yellow01: #fac237;
  --hc-rem: 10.66667px;
  --Meirio: 'Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
  --Corpmaru: "font-corpmaru-v2", sans-serif;
}
body{
  color: #000;
  font-family: var(--Meirio);
  font-size: 14px;
}
section + section{
  margin-top: 30px;
}
.h2{
  text-align: center;
  margin-bottom: 16px;
}
.p_lead{
  font-size: 18px;
  line-height: 1.388;
  margin-bottom: 13px;
}
.illus{
  margin-bottom: 34px;
  width: 100%;
  height: auto;
}
.align_c{
  text-align: center;
}
.align_r{
  text-align: right;
}
.align_l{
  text-align: left;
}
a{
  color: #000;
  font-family: var(--Meirio);
  font-size: 14px;
  text-decoration:none;
  outline:none;
  line-height: 1;
  & :hover{
    opacity: 0.8;
  }
}
.ttl01{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.bg_wh{
  background: #fff;
}
.hc_inner{
  padding: 0 15px;
}
.sp{
  display: block;
  @media screen and (min-width: 768px){
    display: none;
  }
}
.pc{
  display: none;
  @media screen and (min-width: 768px){
    display: block;
  }
}
.morikkopark_lp{
  background: var(--maincolor);
}
.l-side_hc{
  position: relative;
}
.l-side_hc-left{
@media screen and (max-width: 767px){
  display: none;
}
& .l-side_hc-inner{
  &::after{
    content: '';
    background: url(../images/side_illust_l.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
}
.l-side_hc-inner {
    align-items: center;
    display: flex;
    height: 100dvh;
    justify-content: center;
    left: 0;
    position: sticky;
    top: 0;
    width: 100%;
}
.l-contents_hc{
  background: #fff6e6;
}
.l-side_hc-right{
  padding: 0 2vw;
  & .l-side_hc-inner{
  &::after{
    content: '';
    background: url(../images/side_illust_r.svg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: 0;
    @media screen and (max-width: 1279px) {
    content: none;
  }}
  }
}
.container_hc{
position: relative;
width: 100%;
@media screen and (min-width: 768px){
    display: grid;
    grid-template-columns: 1fr 430px 1fr;
}
@media screen and (min-width: 768px) and (max-width: 1279px){
  grid-template-columns: 1fr calc(var(--hc-rem)*46.875);
}
}
.bg-container{
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
}
.bg_hc-left{
  & img{
    position: absolute;
  }
  & .illus_a{
    bottom: 70px;
    left: 100px;
    width: 80px;
  }
  & .illus_b{
    bottom: 20px;
    left: 0;
    width: 100px;
    height: auto;
  }
  & .illus_c{
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    &.anim-box{
    display: inline-block;
    opacity: 0;
    }
  }
}
.bg_hc-right{
  & img{
    position: absolute;
  }
  & .illus_a{
    bottom: 50px;
    right: 68px;
  }
  & .illus_c{
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    &.anim-box{
    display: inline-block;
    opacity: 0;
    }
  }
  @media screen and (max-width: 1279px) {
    display: none;
  }
}
.anim-box.float {
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.anim-box.poyoyon3.is-animated {
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}

@keyframes poyoyon3 {
  0%, 40% { transform: skew(0deg, 0deg); }
  5% { transform: skew(5deg, 5deg); }
  10% { transform: skew(-4deg, -4deg); }
  15% { transform: skew(3deg, 3deg); }
  20% { transform: skew(-2deg, -2deg); }
  25% { transform: skew(1deg, 1deg); }
  30% { transform: skew(-0.6deg, -0.6deg); }
  35% { transform: skew(0.3deg, 0.3deg); }
}
/* cta */
.btn_cta{
  background: var(--blue01);
  border-radius: 20px;
  color: #fff;
  display: block;
  font-size: 16px;
  font-family: var(--Corpmaru);
  padding: 18px 0;
  position: relative;
  width: 298px;
  text-align: center;
  transition: .4s;
  &::after{
    position: absolute;
    content: "";
    top: 50%;
    right: 20px;
    height: 12px;
    width: 10px;
    background: #fff;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  &:hover{
    color: var(--blue01);
    background: #fff;
    transition: .4s;
  &::after{
    background: var(--blue01);
  }
  }
}
.btn_cta.bg_y{
  background: var(--yellow01);
  &:hover{
    background: #fff;
    color: var(--yellow01);
  &::after{
    background: var(--yellow01);
  }
  }
}
.btn_cta.bg_p{
  background: var(--pink01);
  &:hover{
    background: #fff;
    color: var(--pink01);
  &::after{
    background: var(--pink01);
  }
  }
}
.btn_cta.bg_gre{
  background: #6A9762;
  &:hover{
    background: #fff;
    color: #6A9762;
  }
}
.lower_cta_btn{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100vw;
  max-width: 430px;
  z-index: 8;
  & .btn_cta{
    padding: 11px 0px;
    width: 100%;
  &::after{
    content: none;
  }
  @media screen and (max-width: 1279px){
  }
  @media screen and (min-width: 768px){
  display: none;
  }
}}
/* nav */
.con_nav{
  & .nav{
  margin-bottom: 40px;
  }
  & nav a{
    color: var(--green02);
    display: block;
    font-size: 30px;
    font-family: var(--Corpmaru);
    margin-bottom: 30px;
    padding-left: 25px;
    position: relative;
    &::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--green02);
    transform: scale(0,1);
    transform-origin: right top;
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
    }
    &:hover::after{
      transform: scale(1, 1);
      transform-origin: left top;
    }
  }
  @media screen and (min-width: 1280px){
      z-index: 3;
    }
}
.nav a > span.arrow{
  &::before{
    content: "";
    position: absolute;
    top: calc(50% - 2.5px);
    left: 0;
    width: 13.8px;
    height: 5px;
    border-radius: 9999px;
    background-color: #2b5e37;
    transform-origin: calc(100% - 2.5px) 50%;
    transform: rotate(47.3deg);
  }
  &::after{
    content: "";
    position: absolute;
    top: calc(50% - 2.5px);
    left: 0;
    width: 13.8px;
    height: 5px;
    border-radius: 9999px;
    background-color: #2b5e37;
    transform-origin: calc(100% - 2.5px) 50%;
    transform: rotate(-47.3deg);
  }
}
.header_sp{
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    max-width: 500px;
    padding: 10px 20px;
    z-index: 10;
  @media screen and (min-width: 1280px){
      display: none;
    }
  @media screen and (max-width: 767px){
    max-width: unset;
    }
}
.hmb{
  position: relative;
  width: 48px;
  height: 48px;
  & .btn_hmb{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  }
}
.btn_hmb img.hmb_open,
.btn_hmb img.hmb_close {
    display: none;
}
.btn_hmb img.hmb_open.on,
.btn_hmb img.hmb_close.on {
    display: block;
}
.l-side_hc-right{
  @media screen and (max-width: 1279px){
  opacity: 0;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  min-height: 100vh;
  visibility: visible;
  transition: .2s;
  overflow: scroll;
  position: fixed;
  z-index: 9;
}
}
.l-side_hc-right.on{
  background: var(--maincolor);
  opacity: 1;
  top: 0;
}
.side_cta_btn{
  @media screen and (max-width: 1279px){
  display: none;
  }
  & .btn_cta + .btn_cta{
  margin-top: 30px;
}}
/* mv */
.img_mv{
  width: 100%;
}
/* slideshow */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 428px;
  height: 316px;
  overflow: hidden;
  z-index: 3;
}
.slideimg {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  animation: slideAnime 18s infinite;
  height: 258px;
  clip-path: ellipse(49% 50% at 50% 50%);
}
.slidecap{
  position: relative;
  width: 100%;
  height: 100%;
& .cap{
  opacity: 0;
  animation: slideAnime 18s infinite;
  color: var(--green02);
  font-family: var(--Corpmaru);
  font-size: 35px;
  text-align: center;
  height: fit-content;
  position: absolute;
  bottom: -30px;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}}
/* スライドアニメーション */
@keyframes slideAnime {
  0%, 30%, 100% { opacity: 0; }
  10%, 20% { opacity: 1; }
}

/* 各スライドの画像とアニメーション開始タイミング */
.slideimg:nth-of-type(1) {
  background-image: url('../images/img_side_01.webp');
  animation-delay: 0s;
}
.cap:nth-of-type(1){
  animation-delay: 0s; 
}
.slideimg:nth-of-type(2) {
  background-image: url('../images/img_side_02.webp');
  animation-delay: 3s; 
}
.cap:nth-of-type(2){
  animation-delay: 3s; 
}
.slideimg:nth-of-type(3) {
  background-image: url('../images/img_side_03.webp');
  animation-delay: 6s; 
}
.cap:nth-of-type(3){
  animation-delay: 6s; 
}
.slideimg:nth-of-type(4) {
  background-image: url('../images/img_side_04.webp');
  animation-delay: 9s; 
}
.cap:nth-of-type(4){
  animation-delay: 9s;
}
.slideimg:nth-of-type(5) {
  background-image: url('../images/img_side_05.webp');
  animation-delay: 12s; 
}
.cap:nth-of-type(5){
  animation-delay: 12s; 
}
.slideimg:nth-of-type(6) {
  background-image: url('/tennoji/dish/images/img_slider_dinner02.webp');
  animation-delay: 15s; 
}
.cap:nth-of-type(6){
  animation-delay: 15s; 
}

/* animation */
/* morikko */
section.morikko{
  position: relative;
  margin-top: 50px;
  &::before{
  content: '';
  background: url(../images/bg_illust_01.webp) no-repeat;
  background-size: contain;
  width: 100vw;
  height: 468px;
  position: absolute;
  top: 0;
  left: 0;
  @media screen and (min-width: 768px) and (max-width: 1279px) {
  width: calc(var(--hc-rem) * 46.875);
  }
  @media screen and (min-width: 1280px){
    width: 430px;
  }
  }
  & .hc_inner{
    position: relative;
  }
}
.morikko .desc{
  & + .desc{
    margin-top: 1em;
  }
  font-size: 20px;
  line-height: 1.25;
}

/* lead_hc */
.lead_hc{
  .p_lead{
    color: var(--green02);
    font-family: var(--Corpmaru);
    font-size: 20px;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 5px;
  }
}
.wrap_point{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 58px;
}
.wrap_point .point{
    font-family: var(--Corpmaru);
    font-size: 20px;
    line-height: 1.25;
    text-align: center;
    position: relative;
    &::after{
      content: '';
      width: calc(100vw / 2);
      max-width: 210px;
      height: auto;
      aspect-ratio: 210 / 54;
      position: absolute;
      bottom: -33px;
      left: 50%;
      transform: translateX(-50%);
    }
    &.point1{
      & span{
    color: var(--green01);
    font-size: 30px;
    }
    &::after{
      background: url(../images/point_01.webp) no-repeat center/contain;
    }
    }
    &.point2{
      & span{
    color: var(--pink01);
    font-size: 30px;
    }
    &::after{
      background: url(../images/point_02.webp) no-repeat center/contain;
    }}
    &.point3{
      & span{
    color: #92c21f;
    }
    &::after{
      background: url(../images/point_03.webp) no-repeat center/contain;
    }}
    &.point4{
      & span{
    color: #ee781e;
    }
    &::after{
      background: url(../images/point_04.webp) no-repeat center/contain;
    }}
}
/* intro */
section.intro{
padding: 96px 0 50px;
position: relative;
margin-top: 50px;
&::before{
  content: '';
  background: url(../images/bg_illust_02.webp) no-repeat center/contain;
  width: 100vw;
  height: 328px;
  position: absolute;
  top: 0;
  left: 0;
  @media screen and (min-width: 768px) and (max-width: 1279px) {
            width: calc(var(--hc-rem) * 46.875);
  }
  @media screen and (min-width: 1280px){
    width: 430px;
  }
  }
&::after{
  content: '';
  background: url(../images/illust_fence.webp) no-repeat center/contain;
  width: 100vw;
  max-width: 430px;
  height: auto;
  aspect-ratio: 430 / 50;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  }
}
.intro .box_ttl{
  position: relative;
  & .cap{
    font-size: 20px;
    font-family: var(--Corpmaru);
    line-height: 2.4;
    text-align: center;
  }
}
.wrap_intro{

}
.box_intro{
  + .box_intro{
    margin-top: 33px;
  }
  display: grid;
  gap: 17px 13px;
  align-items: end;
  grid-template-columns: 215px 1fr;
  align-items: end;
  position: relative;
  & .img_intro{
    border-radius: 25px;
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
    height: auto;
  }
  & .p_item{
    font-size: 24px;
    font-family: var(--Corpmaru);
    line-height: 1.25;
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .desc{
    grid-column: 1/3;
    grid-row: 2/3;
    text-align: right;
  }
  &::before{
      content: '';
      background: url(../images/flag_01.gif) no-repeat;
      background-size: contain;
      width: 132px;
      height: auto;
      aspect-ratio: 554 / 275;
      position: absolute;
      top: 0;
      right: 0;
    }
  @media screen and (max-width: 429px){
  &::before{top: -10px;}
  }
  @media screen and (max-width: 767px){
      grid-template-columns: 50% 1fr;
    }
}
.box_intro:nth-child(even){
  grid-template-columns: 1fr 215px;
  & .img_intro{
    grid-column: 2/3;
    grid-row: 1/2;
  }
  & .p_item{
    grid-column: 1/2;
    grid-row: 1/2;
    text-align: right;
  }
  & .desc{
    text-align: left;
  }
  @media screen and (max-width: 767px){
      grid-template-columns: 1fr 50%;
    }
  &::before{
    transform: scale(-1, 1);
    right: unset;
    left: 0;
  }
}
/* guide */
.guide .h2{
  position: relative;
  & img{
    position: sticky;
  }
  &::before{
    content: '';
    background: url(../images/ribon_01.webp) no-repeat;
    background-size: contain;
    width: 100%;
    height: auto;
    aspect-ratio: 430 / 86;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
}
.dl_floor{
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: end;
    padding-bottom: 60px;
    position: relative;
    margin-top: 40px;
    font-size: 18px;
    line-height: 1.666;
  & + .dl_floor{
    margin-top: 30px;
  }
  &::after{
    content: '';
    background: url(../images/floor.webp) no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    aspect-ratio: 199 / 38;
    bottom: 0;
    left: 0;
    position: absolute;
  }
  @media screen and (min-width: 1280px){
    padding-bottom: 46px;
  }
}
.name_floor{
    text-align: center;
    font-size: 18px;
    background-image: repeating-linear-gradient(90deg, #ee781e, #ee781e 6px, transparent 6px, transparent 9px);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 100% 3px;
    width: 123px;
    margin: 0 auto 14px;
}
#guide_gallery {
  background: #c3e2be;
  padding-bottom: 23px;
  position: relative;
  &::before{
    content: '';
    background: url(../images/bg_arch.webp) no-repeat;
    background-size: cover;
    position: absolute;
    width: 100vw;
    height: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    @media screen and (min-width: 768px) and (max-width: 1279px){
    width: calc(var(--hc-rem) * 46.875);
    }
    @media screen and (min-width: 1280px){
    width: 430px;
    }
  }
}
.bg_arch_02{
  &::before{
    content: '';
    background: url(../images/bg_arch_02.webp) no-repeat;
    background-size: contain;
    position: absolute;
    width: 100vw;
    height: calc(100vw * .2948);;
    bottom: 0;
    left: 0;
    @media screen and (min-width: 768px) and (max-width: 1279px){
    width: calc(var(--hc-rem) * 46.875);
    height: calc(var(--hc-rem) * 46.875 * .2948);
    }
    @media screen and (min-width: 1280px){
    width: 430px;
    height: 127px;
    }
  }
}
.box_floor{
  & + .box_floor{
    margin-top: 20px;
  }
  & + .name_floor{
    margin-top: 16px;
  }
  display: grid;
  justify-content: space-around;
  gap: 20px 10px;
  grid-template-columns: repeat(2, 1fr);
  &.right{
  justify-content: right;
  grid-template-columns: calc(50% - 5px);
  }
  @media screen and (max-width: 429px){
  }
  @media screen and (min-width: 768px) and (max-width: 1279px){
    grid-template-columns: repeat(2, 210px);
    padding: 0 50px;
  }
}
.name_floor.bg_arch{
  position: sticky;
}
.unit{
  position: relative;
  padding: 14px 8px 0;
  width: auto;
  height: 274px;
  & .img_unit{
    border-radius: 17px;
    display: block;
    object-fit: cover;
    position: sticky;
    margin-bottom: 2px;
  }
  & p{
    font-size: 12px;
    position: sticky;
  }
  & .title{
    font-size: 18px;
    text-align: center;
    line-height: 1.66;
    margin-bottom: 7px;
  }
  &::before{
    content: '';
    background: url(../images/img_box.webp) no-repeat;
    background-size: contain;
    width: auto;
    height: 274px;
    aspect-ratio: 210 / 274;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  @media screen and (max-width: 429px){
    width: 100%;
    height: 230px;
    & .img_unit{
      width: 100%;
      height: 80px;
    }
    & p {
      font-size: 12px;
    }
    & .title{
      font-size: 16px;
    }
  &::before{
    height: 230px;
    }
  }
}
.anim-illus-01{
  position: relative;
  & .character-01{
    position: absolute;
    top: 60px;
    right: 60px;
    animation: wiggleHorizontal 0.8s ease-in-out infinite;
  }
  & .stars{
    position: absolute;
    bottom: 17px;
    right: 35px;
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: nowrap;
  }
  @media screen and (max-width: 429px){
    & .character-01{
    top: 30px;
    right: 30px;
    }
    & .stars{
    right: 14px;
    }
  }
}
@keyframes wiggleHorizontal {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
.stars{
& .star:nth-child(1) { animation: scaleUp 0.6s infinite; animation-delay: 0s; }
& .star:nth-child(2) { animation: scaleUp 0.6s infinite; animation-delay: 0.15s; }
& .star:nth-child(3) { animation: scaleUp 0.6s infinite; animation-delay: 0.3s; }
& .star:nth-child(4) { animation: scaleUp 0.6s infinite; animation-delay: 0.45s; }
}
@keyframes scaleUp {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.anim-illus-02{
  position: relative;
  & .dinos{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    & .dino03{
    position: absolute;
    top: 60px;
    left: 0;
    &.car-image{
    animation: slideIn01 1.0s ease-out forwards; 
    }
    }
    & .dino04{
    position: absolute;
    top: 117px;
    left: 0;
    &.car-image{
    animation: slideIn02 1.2s ease-out forwards; 
    }
    }
  }
  @media screen and (max-width: 429px){
  & .img_trees{
    width: 180px;
    height: auto;
  }
  }
}
@keyframes slideIn01 {
 0% { left: 0; opacity: 0; } 
60% { opacity: 1; } 
100% { left: 85%; transform: translateX(-85%); opacity: 1;
 } 
} 
@keyframes slideIn02 {
 0% { left: 0; opacity: 0; } 
60% { opacity: 1; } 
100% { left: 5%; transform: translateX(-5%); opacity: 1;
 } 
} 
.anim-illus-03{
  position: relative;
  & .anim-meal{
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  & .fork{
    position: absolute;
    top: 0;
    right: 108px;
    animation: wiggle 1s ease-in-out infinite;
  }
  & .spoon{
    position: absolute;
    top: 0;
    right: 20px;
    animation: wiggle 1s ease-in-out infinite;
    width: 100px;
    height: 148px;
  }
  & .paprika{
    position: absolute;
    bottom: 0;
    right: 138px;
    animation: wiggle 1s ease-in-out infinite;
  }
  & .tomato{
    position: absolute;
    bottom: 0;
    right: 68px;
    animation: wiggle 1s ease-in-out infinite;
  }
  }
  @media screen and (max-width: 429px){
    & .anim-meal{
      & .paprika{
      right: 100px;
    }
    & .tomato{
      right: 30px;
    }
  }}
}
@keyframes clinkLeft {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-15deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes clinkRight {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-5deg); }
  50%  { transform: rotate(5deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* price */
.price_hc .wrap_plan{
  & + .wrap_plan{
    margin-top: 18px;
  }
  & .wrap_name{
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: relative;
    top: .4px;
    padding: 42px 0 10px;
  & .name_plan{
    color: #fff;
    font-size: 20px;
    position: relative;
    top: 17px;
    & span{
      font-size: 16px;
    }
  }}
}
.box_tbl{
  background: #fff;
  padding: 30px 1px 0;
}
.blue{
  & .wrap_name{
  background: var(--blue01);
  }
  & .box_tbl{
  border-style: solid;
  border-color: var(--blue01);
  border-width: 20px 13px;
  }}
.pink{
  & .wrap_name{
  background: var(--pink01);
  }
  & .box_tbl{
  border-style: solid;
  border-color: var(--pink01);
  border-width: 20px 13px;
}}
.yellow{
  & .wrap_name{
  background: var(--yellow01);
  }
  & .box_tbl{
  border-style: solid;
  border-color: var(--yellow01);
  border-width: 20px 13px;
}}
/* usage */
section.usage{
  background: #FFE0DF;
  padding: 20px 0 60px;
  position: relative;
  &::before{
  position: absolute;
  content: '';
  background: url(../images/bg_wave.webp) no-repeat;
  background-size: contain;
  width: 100vw;
  height: calc(100vw * .3);
  top: 0;
  left: 0;
  @media screen and (min-width: 768px) and (max-width: 1279px){
    width: calc(calc(var(--hc-rem) * 46.875));
  }
  @media screen and (min-width: 1280px){
      width: 430px;
  }
  }
  &::after{
  position: absolute;
  content: '';
  background: url(../images/bg_wave02.webp) no-repeat;
  background-size: cover;
  width: 100vw;
  height: 49px;
  bottom: 0;
  left: 0;
  @media screen and (min-width: 768px) and (max-width: 1279px){
    width: calc(calc(var(--hc-rem) * 46.875));
  }
  @media screen and (min-width: 1280px){
      width: 430px;
  }
  }
  & .hc_inner{
    position: relative;
    z-index: 1;
  }
}
.list_usage{
  & li + li{
    margin-top: 14px;
  }
  & .step{
    background: #fff;
    border-left: 10px solid var(--blue01);
    border-radius: 15px;
    display: grid;
    grid-template-columns: 53px;
    align-items: center;
    column-gap: 7px;
    padding-left: 3px;
  & .num{
    background: #FFE0DF;
    border-radius: 50px;
    color: var(--blue01);
    display: flex;
    font-size: 40px;
    font-family: var(--Corpmaru);
    width: 53px;
    height: 53px;
    justify-content: center;
    align-items: center;
    grid-row: 1/3;
    grid-column: 1/2;
  }
  & .text{
    font-size: 30px;
    font-family: var(--Corpmaru);
    color: var(--blue01);
    grid-row: 1/2;
    grid-column: 2/3;
  }
  & .desc{
    grid-row: 2/3;
    grid-column: 2/3;
  }}
  & .fade-up{
  opacity: 0;
  animation-name: fadeinup;
  animation-duration: 1.6s;
  animation-delay: .4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up:nth-child(1) { animation: fadeInUp 0.6s ease-out forwards; animation-delay: 0s; }
.fade-up:nth-child(2) { animation: fadeInUp 0.6s ease-out forwards; animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation: fadeInUp 0.6s ease-out forwards; animation-delay: 0.4s; }
.fade-up:nth-child(4) { animation: fadeInUp 0.6s ease-out forwards; animation-delay: 0.6s; }
.fade-up:nth-child(5) { animation: fadeInUp 0.6s ease-out forwards; animation-delay: 0.8s; }

/* directions */
.wrap_btn_nav{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px 27px;
  margin-bottom: 34px;
  padding: 0 20px;
  @media screen and (max-width: 429px){
    gap: 10px 10px;
  }
}
.btn_nav {
  align-items: center;
  background: #cea78e;
  border-radius: 50px;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  justify-content: flex-start;
  gap: 4px;
  width: 96px;
  height: 96px;
  position: relative;
  text-align: center;
  padding-top: 8px;
  & .ico_btn{
    object-fit: contain;
  }
  &::before{
  content: "";
  position: absolute;
  bottom: 7px;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 17px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: 50% calc(100% - 1.5px);
  transform: rotate(67.4deg);
  }
  &::after{
  content: "";
  position: absolute;
  bottom: 7px;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 17px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: 50% calc(100% - 1.5px);
  transform: rotate(-67.4deg);
  }
  @media screen and (max-width: 429px){
  }
}
.box_trn{
  & + .box_trn{
    margin-top: 50px;
  }
}
.box_trn.plane,
.box_trn.bus{
  padding: 0 45px;
}
.ttl_direction{
  background: #CEA78E;
  border-radius: 10px;
  border-left: 6px solid #B98362;
  border-right: 6px solid #B98362;color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 0;
  position: relative;
  text-align: center;
  width: 266px;
  margin: 0 auto 30px;
}
.car .ttl_direction{
  &::before{
    position: absolute;
    content: '';
    background: url(../images/ico_car_01.webp) no-repeat;
    background-size: contain;
    width: 28px;
    height: 24px;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}
.taxi .ttl_direction{
  &::before{
    position: absolute;
    content: '';
    background: url(../images/ico_car_02.webp) no-repeat;
    background-size: contain;
    width: 28px;
    height: 24px;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}
.plane .ttl_direction{
  margin-bottom: 20px;
  &::before{
    position: absolute;
    content: '';
    background: url(../images/ico_plane.webp) no-repeat;
    background-size: contain;
    width: 28px;
    height: 24px;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}
.bus .ttl_direction{
    text-align: right;
  padding-right: 16px;
  &::before{
    position: absolute;
    content: '';
    background: url(../images/ico_bus.webp) no-repeat;
    background-size: contain;
    width: 28px;
    height: 16px;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}
.train .ttl_direction{
  &::before{
    position: absolute;
    content: '';
    background: url(../images/ico_train.webp) no-repeat;
    background-size: contain;
    width: 28px;
    height: 24px;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}
.directions .desc{
  font-size: 14px;
  margin-bottom: 17px;
  line-height: 1.78;
}
.directions .btn_cta{
  margin: 0 auto 24px;
}
.box_route_taxi{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.route_taxi{
  & dt{
    font-size: 14px;
    line-height: 1.78;
    background: #D9D9D9;
    text-align: center;
    margin-bottom: 7px;
  }
  & dd{
    padding: 16px 0;
    text-align: center;
    border: 1px solid #cea78e;
    font-size: 14px;
    & .num{
    font-size: 18px;
    }
  }
}
.route_plane{
  border: 1px solid #B98362;
  padding: 20px 0;
  & + .route_plane{
    margin-top: 15px;
  }
  & dl{
    padding-left: 50px;
    position: relative;
    &::before{
    position: absolute;
    content: '';
    background: #B98362;
    width: 1px;
    height: 100%;
    top: 5px;
    left: 23px;
    }
  }
  & dl.walk{
    &::before{
    position: absolute;
    content: '';
    background: unset;
    background-image: linear-gradient(to top, #B98362 80%, transparent 80%);
    background-size: 4px 8px;
    background-repeat: repeat-y;
    }
  }
  & dl.end{
    &::before{
    content: none;
    }
  }
  & dt{
    font-weight: 600;
    position: relative;
    line-height: 1.8;
    &::before{
      position: absolute;
      content: '';
      background: #B98362 no-repeat;
      width: 21px;
      height: 21px;
      border-radius: 50px;
      top: 4px;
      left: -37px;
    }
  }
  & .start{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
  }
  & dd{
    padding: 20px 0;
  }
}
.route_bus{
  & + .route_bus{
    margin-top: 25px;
  }
  & .ttl_01{
    width: 100%;
    & span{
      font-size: 11px;
    }
  }
}
.bus .dl_access{
  & dt{
    display: flex;
    justify-content: center;
    font-weight: 600;
    padding: 10px 0;
    width: 100%;
    border: 1px solid #b98362;
  &.start{
    background-image: repeating-linear-gradient(90deg, #b98362, #b98362 6px, transparent 6px, transparent 10px), repeating-linear-gradient(180deg, #b98362, #b98362 6px, transparent 6px, transparent 10px), repeating-linear-gradient(90deg, #b98362, #b98362 6px, transparent 6px, transparent 10px), repeating-linear-gradient(180deg, #b98362, #b98362 6px, transparent 6px, transparent 10px);
    background-position: left top, right top, left bottom, left top;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    border: unset;
    font-weight: 500;
    padding: 30px 0;
  }
  &.exit{
    background: #b98362;
    color: #fff;
    width: fit-content;
    text-align: center;
    padding: 10px 28px;
    margin: 0 auto;
    font-weight: 500;
  }
  }
  & .route_line{
    height: 50px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    & span{
    height: 100%;
    width: 50%;
    border-left: 1px solid #B98362;
    padding-left: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    }
    &.walk{
      & span{
    background-image: linear-gradient(to top, #B98362 80%, transparent 80%);
    background-size: 1px 6px;
    background-repeat: repeat-y;
    border: unset;
    }}
  }
}
.route_box{
  & + .route_box{
    margin-top: 30px;
  }
  & .ttl_01{
    margin: 0;
    width: 100%;
  }
  & .grid{
    display: grid;
    gap: 34px 10px;
    grid-template-columns: 1fr 1fr;
    padding: 8px 6px;
    border: 1px solid #B98362;
}}
.route_box dt img{
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.iframe.map{
  margin-bottom: 34px;
  & iframe{
    width: 100%;
  }
}
.name_loc{
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
  & span{
    font-size: 16px;
  }
}
.bax_car{
  padding: 0 67px;
  text-align: center;
  & + .bax_car{
    margin-top: 24px;
  }
  &:last-of-type{
    margin-bottom: 30px;
  }
}
.dl_access{
  & .exit{
    padding: 30px 0;
    width: 100%;
    border: 1px solid #b98362;
  }
  & .times{
    height: 50px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    & span{
    height: 100%;
    width: 50%;
    border-left: 1px solid #B98362;
    padding-left: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    }
  }
  & dd img{
    width: 100%;
    height: auto;
  }
}
.ttl_desc{
  text-align: center;
  font-size: 20px;
}
.ttl_desc + .desc{
  font-size: 14px;
  line-height: 1.78;
  margin-bottom: 26px;
}
.ttl_01{
  text-align: center;
  font-size: 14px;
  line-height: 1.78;
  background: #D9D9D9;
  width: 330px;
  margin: 0 auto 12px;
}
.img_map{
  margin-bottom: 18px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* faq */
#faq .h2{
position: relative;
&::before{
  content: '';
  background: url(../images/illus_dino_01.webp) no-repeat;
  background-size: contain;
  width: 38px;
  height: auto;
  aspect-ratio: 61/69;
  position: absolute;
  top: 70px;
  left: -5px;
}
&::after{
  content: '';
  background: url(../images/illus_dino_02.webp) no-repeat;
  background-size: contain;
  width: 38px;
  height: auto;
  aspect-ratio: 61/69;
  position: absolute;
  top: 70px;
  right: -5px;
}
@media screen and (min-width: 768px){
  &::before{
  width: 61px;
  top: 45px;
  }
  &::after{
  width: 61px;
  top: 45px;
  }
}
}
.name_plan{
  font-size: 28px;
  text-align: center;
  color: var(--blue02);
  & span{
    font-size: 18px;
    font-weight: 500;
    display: block;
  }
}
.faq{
.wrap_plan.plan-2{
  .name_plan{
    color: #F58F87;
  }
}
.wrap_plan.plan-3{
  .name_plan{
    color: var(--yellow01);
  }
}}
.wrap_plan{
  & .desc{
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
  }
  & .btn_cta{
    margin: 32px auto;
  }
}
.tbl_price {
  border-collapse: separate;
  border-radius: 30px;
  border-spacing: unset;
  width: 100%;
  & tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  & th,td{
    background: #fff;
  }
  & + .tbl_price{
    margin-top: 32px;
  }
  & thead{
    & tr{
      color: #fff;
      & th{
        font-size: 16px;
        padding: 14px 0;
        text-align: center;
      }
    }
  }
  & tbody{
    & tr{
      & th{
        font-weight: 500;
        font-size: 16px;
        padding: 14px 0 14px 14px;
        text-align: left;
      }
      & td{
        text-align: center;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        & .tax{
          font-size: 10px;
        }
      }
    }
  }
  & .separate{
    position: relative;
    bottom: -8px;
  }
  & caption{
    caption-side: bottom;
    text-align: right;
  }
  @media screen and (min-width: 768px){
    & tbody{
      & tr{
        & td{
          & .tax{ font-size: 14px; }
        }
      }
  }}
}
.radi-top-l{
  border-top-left-radius: 30px;
}
.radi-top-r{
  border-top-right-radius: 30px;
}
.radi-bottom-l{
  border-bottom-left-radius: 30px;
}
.radi-bottom-r{
  border-bottom-right-radius: 30px;
}
.tbl_price.blue{
  & th{
    border-left: 1px solid var(--blue01);
    border-bottom: 1px solid var(--blue01);
  }
  & td{
    border-right: 1px solid var(--blue01);
    border-bottom: 1px solid var(--blue01);
  }
  & th + td{
    border-left: 1px solid var(--blue01);
  }
  & thead{
    & th{
        background: var(--blue02);
        border-top: 1px solid var(--blue01);
        &:last-of-type{
        border-right: 1px solid var(--blue01);
        }
      }
    & tr.bg_b02 th{
        background: #034D70;
    }
  }
  & .separate{
    & th,td{
      border-top: 1px solid var(--blue01);
    }
  }
}
.tbl_price.pink{
  & th{
    border-left: 1px solid var(--pink02);
    border-bottom: 1px solid var(--pink02);
  }
  & td{
    border-right: 1px solid var(--pink02);
    border-bottom: 1px solid var(--pink02);
  }
  & th + td{
    border-left: 1px solid var(--pink02);
  }
  & thead{
    & th{
        background: #F58F87;
        border-top: 1px solid var(--pink02);
        &:last-of-type{
        border-right: 1px solid var(--pink02);
        }
      }
  }
  & .separate{
    & th,td{
      border-top: 1px solid var(--pink02);
    }
  }
}
.faq{
  & .ttl01{
    letter-spacing: 0.1em;
    line-height: 2.4;
  }
}
.f_bax{
  margin-bottom: 2em;

  & dt,dd{
    line-height: 2.14;
    letter-spacing: 0.1em;
  }
  & dd{
  }
}
.faq .list{
  padding-left: 1em;
  margin-bottom: 60px;
  & li{
    line-height: 2.14;
    letter-spacing: 0.1em;
    position: relative;
    &::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 12px;
    left: -10px;
    width: 4px;
    height: 4px;
    background-color: #000;
    border-radius: 5px;
    }
  }
}
.box_dial{
  border: 1px solid #B98362;
  padding: 6px 0;
  text-align: center;
  & .tel{
    position: relative;
    width: fit-content;
    margin: auto;
    margin-top: 5px;
    &::before{
    background: url(../images/ico_freedial.webp) no-repeat;
    background-size: contain;
    content: '';
    width: 30px;
    height: 24px;
    position: absolute;
    top: 0;
    left: -36px;
    }
    a{
      font-size: 24px;
    }
  }
}

@media (min-width: 768px) {
  .box_dial .tel a[href^="tel:"] {
    pointer-events: none;
  }
}

/* footer */
#footer{

}
.stripe {
  background-image: repeating-linear-gradient(90deg, #7fd6f1, #7fd6f1 25px, #a6e3f5 25px, #a6e3f5 50px);
}
.wrap_footer{
  display: flex;
  justify-content: flex-start;
}
.nav_left{
  width: calc(100% / 3);
}
.box_footer_nav{
  background: #fff;
  padding: 21px 8px;
  width: 40%;
  @media screen and (min-width: 768px){
  padding: 21px;
  width: 183px;
  }
}
.list_footer_nav{
  & li{
    margin-bottom: 10px;
  }
  & a{
    color: var(--green02);
    font-family: var(--Corpmaru);
    font-weight: 700;
    font-size: 12px;
    position: relative;
    text-decoration: none;
  & .arrow{
    padding-left: 12px;
  &::before {
    content: "";
    position: absolute;
    top: calc(50% - 3.8px);
    left: 0;
    width: 6px;
    height: 2px;
    border-radius: 9999px;
    background-color: #2b5e37;
    transform-origin: calc(100% - 2.5px) 50%;
    transform: rotate(47.3deg);
  }
  &::after {
    content: "";
    position: absolute;
    top: calc(50% - 1.2px);
    left: 0;
    width: 6px;
    height: 2px;
    border-radius: 9999px;
    background-color: #2b5e37;
    transform-origin: calc(100% - 2.5px) 50%;
    transform: rotate(-47.3deg);
    }}
  }
}
.list_links{
  & a{
    display: inline-block;
    line-height: 1;
    font-size: 10px;
    position: relative;
  }
  & a[target="_blank"]{
    &::after{
    background: url(../images/ico_blank.svg) no-repeat;
    background-size: contain;
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    }
  }
}