*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

@font-face {
  font-family: 'ZenMaruGothic-Bold';
  font-style: normal;
  font-weight: normal;
  src: local('ZenMaruGothic-Bold'), url('../font/ZenMaruGothic-Bold.woff') format('woff');
}
body,a,p,h1,h2,h3,h4{
  color: #000;
  text-decoration: none;
  line-height: 2;
}
body{
  position: relative;
}
ul{
  padding: 0;
}
li{
  list-style: none;
}
a{
  cursor: pointer;
}
h2{
  margin-bottom: 10px;
}
h3{
  text-align: center;
  font-size: clamp(18px, 1.5vw, 55px);
  font-family: ZenMaruGothic-Bold, sans-serif;
  letter-spacing: 0.3rem;
}
h4{
  color: #18bdcc;
  text-align: left;
  font-size: clamp(17px, 1.2vw, 36px);
  font-family: ZenMaruGothic-Bold, sans-serif;
  letter-spacing: 0.1rem;
}
p{
  font-size: clamp(13px, 0.9vw, 33px);
  font-family: fot-rodin-pron, sans-serif;
  letter-spacing: 0.1rem;
}
.flex-box{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.is-hidden{
visibility: hidden;
opacity: 0;
}

.pc{
  display: block;
}
.sp{
  display: none;
}

/* アニメーション */
.fade{
  animation-name: fade;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.slideup{
  animation-name: slideup;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideup{
  0%{
    opacity: 0;
    transform: translateY(60px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

.swing{
   animation: swing 1.4s ease-in-out infinite alternate;
}
.slideup:nth-child(odd) .swing{
  animation-delay: 0.8s;
}
@keyframes swing{
  0%{
    transform:translateY(-1vh);
  }
  100%{
    transform:translateY(0);
  }
}
.swingX{
   animation: swingX 1s ease-out infinite alternate;
}
@keyframes swingX{
  0%{
    transform:translateX(-3vw);
  }
  100%{
    transform:translateX(0);
  }
}

.upballoon{
  opacity: 0;
}
.upballoon.active{
  animation-name: upballoon;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes upballoon{
  0%{
    opacity: 0;
    transform: translateY(100%);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeup{
  opacity: 0;
}
.fadeup.active{
  animation-name: fadeup;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fadeup{
  0%{
    opacity: 0;
    transform: translateY(60px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
.fadein{
  opacity: 0;
}
.fadein.active{
  animation: fadein;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fadein{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

/*body*/

.lower {
    min-height: 100vh;
}
.lowerWrapper {
    min-height: 100vh;
    background: #3f3f3f;
}

/* header */
header{
  position: relative;
  width: 100%;
  height: 100vh;
  min-height:100vh;
}
header .logo{
  position: fixed;
  top: 3vh;
  left: calc(3vw + 60px);
  width: 6vw;
  min-width: 100px;
  z-index: 3;
}
header .mv01{
  position: relative;
  width: 100%;
  height: 100vh;
  min-height:100vh;
  object-fit: cover;
  z-index: 1;
}
header .mv02{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 100vh;
  min-height:100vh;
  object-fit: cover;
  z-index: 2;
}
header .mv03{
  position: absolute;
  bottom: 0;
  left: 30%;
  transform: translateX(-30%);
  width: 70%;
  object-fit: cover;
  object-position: bottom;
  z-index: 2;
}
header .mv02.fade, header .mv03.fade{
  animation-duration: 1.4s;
  animation-delay: 1s;
}

header .hBtn.fade {
  animation-duration: 1.4s;
  animation-delay: 2s;
}

header .slideup img{
  filter: drop-shadow(-10px 10px 10px rgba(128,128,128,0.6));
}
header .comment01{
  position: absolute;
  top: 58vh;
  left: 14.5vw;
  width: 110px;
  z-index: 3;
}
header .comment01.slideup{
  animation-delay: 1.6s;
}
header .comment02{
  position: absolute;
  bottom: 4vw;
  left: 25vw;
  width: 110px;
  z-index: 3;
}
header .comment02.slideup{
  animation-delay: 1.8s;
}
header .comment03{
  position: absolute;
  bottom: 24.5vh;
  right: 33vw;
  width: 100px;
  z-index: 3;
}
header .comment03.slideup{
  animation-delay: 1.6s;
}
header .comment04{
  position: absolute;
  top: -100px;
  left: 100px;
  width: 110px;
  z-index: 3;
}
header .comment04.slideup{
  animation-delay: 2s;
}
/*
header .comment04{
  position: absolute;
  bottom: 22vh;
  left: 35vw;
  width: 7.5vw;
  z-index: 3;
}
header .comment04.slideup{
  animation-delay: 2s;
}
*/

.lowerHeader {
    padding: 3vh 3vw;
    background: url(../img/mv01.jpg) center center;
    background-size: cover;
    position: relative;
}

.lowerHeader a img {
    width: 6vw;
    height: auto;
    min-width: 100px;
    margin-left: 60px;
}

.lowerHeader h1 {
    position: absolute;
    top: 0;
    right: 60px;
}

.lowerHeader h1 img {
    width: auto;
    height: 10vw;
    min-height: 100px;
}

.back {
    text-align: center;
    margin-top: 30px;
}

.back a {
    border-bottom: 3px solid #ffffa8;
    font-weight: bold;
    font-size: 16px;
}

.hBtn {
    /*background:rgba(255, 255, 255, 0.9);*/
    background: #fff;
    position: absolute;
    z-index: 3;
    border-radius: 1000px;
    padding: 8px;
    text-align: center;
    bottom: 5.5vh;
    right: 2vw;
    border: 3px solid #18bdcc;
}

.hBtn a {
    display: inline-block;
    border-radius: 1000px;
    background: #f5e644;
    padding: 20px 50px;
    color: #000;
    font-family: ZenMaruGothic-Bold, sans-serif;
}

.hBtn a:hover {
    opacity: 0.7;
}

.hBtn .btn01 {
    display: block;
    line-height: 1;
    margin-bottom: 10px;
    font-size: 16px;
}

.hBtn .btn02 {
    display: block;
    font-size: 20px;
    line-height: 1;
    color: #18bdcc;
}

.hBtn .btn02:before {
    content: "";
    display: inline-block;
    background: url(../img/mail.svg) center center no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    margin: 0 5px -5px 0;
}

/* sidebar */
.sidebar{
  position: fixed;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 60px;
  min-height:100vh;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10;
}
.sidebar.fade{
  animation-delay: 1.3s;
}
.sidebar .menu-area,
.sidebar .pamphlet,
.sidebar .instagram{
  transition: 0.3s ease-in-out;
}
.sidebar .menu-area:hover,
.sidebar .pamphlet:hover,
.sidebar .instagram:hover{
  background: #ffffa8;
  transition: 0.3s ease-in-out;
}
.sidebar .menu-area:active,
.sidebar .pamphlet:active,
.sidebar .instagram:active,
.sidebar .menu-area:visited,
.sidebar .pamphlet:visited,
.sidebar .instagram:visited{
  background: none;
}
.sidebar .menu-area{
  width: 60px;
  height: 8vh;
  padding-bottom: 2vh;
  background: none;
}
.sidebar .text{
  width: 60px;
  padding-top: 10vh;
  line-height: 60px;
  text-align: center;
  color: #00b7b7;
  font-size: clamp(14px, 1rem,18px);
  font-family: fot-rodin-pron, sans-serif;
  font-weight: bold;
  letter-spacing: 0.5rem;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.sidebar .pamphlet{
  height: 46vh;
  border-bottom: 1px solid #00b7b7;
}
.sidebar .pamphlet a,
.sidebar .instagram a{
  display: inline-block;
  height: 46vh;
}
.sidebar .pamphlet img{
  width: 1.6vw;
  min-width: 28px;
  margin: 1vh auto 2vh;
}
.sidebar .instagram{
  width: 60px;
  height: 46vh;
}
.sidebar .instagram img{
  width: 1.4vw;
  min-width: 24px;
  margin: 1.5vh auto 2vh;
}
/* ハンバーバーメニュー */
.g-nav{
  position: fixed;
  top: 0;
  left: 60px;
  display: none;
  width: 100%;
  height: 100vh;
  min-height:100vh;
  border-left: 1px solid #18bdcc;
  background: #D8F1F5;
  z-index: 1;
}
.menu{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  height: 90vh;
  margin: auto;
  padding-top: 8vh;
}
.menu li{
  height: 12vh;
}
.menu a{
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-left: 5.5rem;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
  font-size: 2vw;
  font-family: ZenMaruGothic-Bold, sans-serif;
  letter-spacing: 0.1rem;
  transition-duration:0.6s;
}
.menu a span{
  padding-left: 0.5em;
  font-size: 1.4vw;
}
.menu a:hover, .menu a:active{
  color: #18bdcc;
  border-bottom: 6px solid #ffee39;
  transition-duration:0.6s;
}
.sp-menu{
  z-index: 12;
}
.sp-menu .menu-trigger,
.sp-menu .menu-trigger span{
  display: block;
  transition: all .4s;
  box-sizing: border-box;
}
.sp-menu .menu-trigger{
  width: 60px;
  height: 8vh;
  margin-top: 2vh;
  z-index: 2;
}
.sp-menu .menu-trigger span{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 1.4vw;
  min-width: 30px;
  height: 2px;
  background-color: #009fb0;
  border-radius: 5px;
}
.sp-menu .menu-trigger span:nth-of-type(1){
  top: calc(2vh + 8px);
}
.sp-menu .menu-trigger span:nth-of-type(2){
  top: calc(2vh + 16.5px);
}
.sp-menu .menu-trigger span:nth-of-type(3){
  top: calc(2vh + 25px);
}
.sp-menu .menu-trigger.active span:nth-of-type(1){
  -webkit-transform: translateY(7px) rotate(-45deg);
  transform: translateY(7px) rotate(-45deg);
}
.sp-menu .menu-trigger.active span:nth-of-type(2){
  opacity: 0;
}
.sp-menu .menu-trigger.active span:nth-of-type(3){
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}
/* 共通 */
.comment{
  filter: drop-shadow(-10px 10px 10px rgba(128,128,128,0.6));
}
.btn-area{
  position: relative;
  margin-left: 40px;
}
.btn-area .btn{
  position: relative;
  display: inline-block;
  z-index: 2;
}
.btn-area .btn-bgi{
  position: absolute;
  top: 9.5%;
  left: 51.5%;
  transform: translateX(-51.5%);
  display: inline-block;
  min-width: 320px;
  z-index: 1;
}
.btn-area .btn a{
  min-width: 320px;
  padding: 0.75em 2em;
  border: 2px solid #808080;
  border-radius: 20px;
  background: #fff;
  position: relative;
  font-size: clamp(16px, 1.3vw, 35px);
  font-family: ZenMaruGothic-Bold, sans-serif;
  transition: 0.3s ease-in-out;
}
.btn-area .btn-bgi a{
  padding: 0.75em 2em;
  border: none;
  border-radius: 20px;
  background: #cacaca;
  color: #cacaca;
  font-size: clamp(16px, 1.3vw, 24px);
  font-family: ZenMaruGothic-Bold, sans-serif;
  white-space: nowrap;
}
.btn-area .btn a span{
  color: #18bdcc;
}
.btn-area .btn a:hover{
  background: #ffee39;
  transition: 0.3s ease-in-out;
}
/* happily */
#happily{
  position: relative;
  background: #18bdcc;
  padding: 0 60px;
  overflow: hidden;
}

.youtubeBox {
     width: 55%;
     margin: 5% auto 0;
}

.youtubeBox .inner {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
}
 
.youtubeBox .inner iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

#happily h2, #happily h3, #happily p{
  color: #fff;
}
#happily h2{
  width: 80%;
  margin-bottom: 3%;
}
#happily h3{
  width: 60%;
  margin-bottom: 6%;
}
#happily .text{
  position: relative;
  margin-right: 3%;
  font-family: fot-rodin-pron, sans-serif;
  white-space: nowrap;
  z-index: 6;
}
#happily .photo-area{
  position: relative;
}
#happily .box01{
  justify-content: space-between;
  width: 80%;
  margin: auto;
  padding-top: 12%;
}
#happily .box01 .text-area{
  position: relative;
  margin-top: -3%;
  z-index: 5;
}
#happily .balloon{
  position: absolute;
  top: 5%;
  right: -1%;
  width: 14vw;
  z-index: 3;
}
#happily .box01 .photo-area{
  width: 40%;
}
#happily .box01 .comment{
  position: absolute;
  top: -7vw;
  right: -11%;
  width: 46%;
  min-width: 160px;
}
#happily .box02{
  margin-top: -14%;
  margin-bottom: 8%;
  padding-top: 10%;
}
#happily .box02 .photo-area{
  width: 42%;
  margin: -8% 2% 0 0;
}
#happily .box02 .title{
  width: 3vw;
  margin: -10% 4% 0;
}
#happily .box02 .comment{
  position: absolute;
  top: -20%;
  left: 30%;
  width: 36%;
  min-width: 160px;
}
#happily .box02 .icon{
  width: 20%;
  margin: 8% auto 0 8%;
}
#happily .box03{
  justify-content: flex-end;
  align-items: center;
  width: 90%;
  padding-left: 10%;
}
#happily .box03 .comment{
  position: absolute;
  top: -20%;
  right: 10%;
  width: 54%;
  min-width: 180px;
}
#happily .box03 .text-area01{
  width: 26%;
}
#happily .box03 .text-area01 .icon{
  width: 60%;
  margin-left: 12%;
}
#happily .box03 .text-area01 .text{
  width: 60%;
  margin: 0 auto 24% 12%;
}
#happily .box03 .photo-area{
  width: 44%;
  padding-right: 10%;
}
#happily .box03 .text-area02{
  width: 30%;
}
#happily .box03 .text-area02 .text{
  width: 46%;
  margin: 12% auto 12%;
}
/* スクロール */
#happily .scroll{
  position: absolute;
  bottom: 0;
  left: calc(60px + 8vw);
}
#happily .scroll p{
  display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 6vw;
  overflow: hidden;
  color: #fff;
  font-size: clamp(12px, 0.8vw, 33px);
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}
#happily .scroll p::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 5.5vw;
  background: #fff;
  animation: scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
#happily .scroll p::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 5.5vw;
  background: rgba(255, 255, 255, .4);
}
#happily .scroll p::after {
  animation: scroll 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes scroll{
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
/* free */
#free{
  align-items: center;
  margin-left: 60px;
  border-left: 1px solid #18bdcc;
  position: relative;
  
}
#free h2 {
  position: relative;
}
#free h2 img{
  width: 80%;
  margin: auto;
}
#free .comment {
    position: absolute;
    width: 280px;
    top: -110px;
    left: 50%;
    margin-left: -100px;
    z-index: 2000;
}
#free h4{
  color: #18bdcc;
  text-align: left;
  font-size: clamp(12px, 2.2vw, 59px);
  font-family: ZenMaruGothic-Bold, sans-serif;
  letter-spacing: 0.2rem;
  line-height: 1;
  white-space: nowrap;
}

#free .text-area{
  width: 46%;
  padding: 7% 3% 0 6%;
  text-align: center;
}
#free .subtitle{
  position: relative;
}
#free .line{
  content: "";
  display: block;
  width: 100%;
  height: 9px;
  margin-bottom: 3%;
  background: #ffee39;
}
#free .text{
  margin-bottom: 12%;
  text-align: center;
  white-space: nowrap;
}
#free .free-item{
  margin-bottom: 6%;
}
#free .free-item.active{
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
}
#free .free-item .number{
  width: 40px;
  margin-right: 6%;
  margin-top: 10px;
}
#free .caution {
    font-size: 12px;
    line-height: 1.3;
    text-align: left;
    margin-bottom: 60px;
    position: relative;
}

#free .caution li:before {
    content: "※";
}

.free-item-outside {
    text-align: left;
}

.free-item-outside div {
    border-radius: 10px;
    margin-bottom: 40px;
    background: #ffffa8;
    white-space: nowrap;
    padding: 15px 20px 20px;
    border-radius: 10px;
    display: inline-block;
}

.free-item-outside h5 {
    font-size: 1.2vw;
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 0;
    font-family: ZenMaruGothic-Bold, sans-serif;
    letter-spacing: 1px;
    line-height: 1.3!important;
}

.free-item-outside h5 span {
    color: #18bdcc;
    font-size: 2.4vw;
}

.free-item-outside h5 em {
    color: #18bdcc;
    font-size: 3vw;
    font-style: normal;
}

@media screen and (max-width: 900px){
    .free-item-outside h5 {
        font-size: clamp(16px, 1.05vw, 36px);
    }

    .free-item-outside h5 span {
        font-size: 6.5vw;
    }

    .free-item-outside h5 em {
        font-size: 11vw;
    }
}
@media screen and (max-width: 700px){
  #happily .balloon{
      display: none;
  }
}

@media screen and (min-width: 481px){
     .free-item-outside h5 br {
        display: none;    
    }   
}
@media screen and (max-width: 480px){
    .free-item-outside div {
        display: block;
        padding: 20px 20px 20px;
    }
}

.free-item-outside ul {
    text-align: left;
    margin: 0!important;
    font-size: 13px!important;
}

.free-item-outside ul li {
    font-size: 13px!important;
    line-height: 1.5;
}

.free-item-outside li:before {
    content: "※";
}

#free .free-item .text{
  margin-top: -0.2em;
  margin-bottom: 0;
  text-align: left;
  font-family: ZenMaruGothic-Bold, sans-serif;
  white-space: nowrap;
}
#free .photo-area{
  position: relative;
  width: 54%;
  margin-left: 3%;
}
#free .photo-area .comment{
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  min-width: 180px;
}
/* supportlist */
#supportlist{
  padding: 5% 5% 5% calc(60px + 5%);
  background: #18bdcc;
  text-align: center;
}
#supportlist .tableWrap p, #supportlist .tableWrap th, #supportlist .tableWrap td{
  color: #fff;
}
#supportlist .title{
  position: relative;
  display: inline-block;
  margin: 0 auto 3%;
  padding-left: 1.25em;
  font-size: clamp(22px, 1.7vw, 62px);
  font-family: ZenMaruGothic-Bold, sans-serif;
  font-weight: bold;
  letter-spacing: 0.4rem;
  color: #fff;
}
#supportlist .title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 0.85em;
  background: #fff;
}
#supportlist .tableWrap table,#supportlist .tableWrap th, #supportlist .tableWrap td{
  border-collapse: collapse;
  border: 2px solid #fff;
  font-family: ZenMaruGothic-Bold, sans-serif;
  font-weight: bold;
}

#supportlist .tableWrap th, #supportlist td{
  padding: 0.2em;
  }

#supportlist .tableWrap {
  overflow: auto;
}

#supportlist .tableWrap table{
  width: 70%;
  margin: 0 auto 0.5%;
  font-size: clamp(18px, 1.4vw, 62px);
  line-height: 1.6;
  border-collapse:separate;
  border-spacing:0;

    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}
#supportlist .tableWrap table span{
  display: block;
  font-size: clamp(12px, 0.9vw, 52px);
}
#supportlist .tableWrap table td{
  position: relative;
  width: 11.35%;
  white-space:nowrap
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

#supportlist .tableWrap table th {
    position: sticky; 
    z-index: 10;
    top: 0;
    left: 0;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    background: #18bdcc;
}



#supportlist .tableWrap table th.list-line{
  background-image: linear-gradient(to left top, #18bdcc calc(50% - 0.5px), #fff 50%, #fff calc(50% + 0.5px), #18bdcc calc(50% + 1px))
}
#supportlist .tableWrap table .asterisk::before{
  content: "※";
	position: absolute;
	top: 0.25em;
	left: 0.5em;
  font-size: clamp(12px, 0.8vw, 30px);
}
#supportlist .tableWrap table .circle{
  border-radius: 50%;
  border: 3px solid #fff;
  width: 1.8vw;
  height: 1.8vw;
  padding: 0.2vw;
  box-sizing: border-box;
  margin: auto;
}
#supportlist .tableWrap table .circle>div{
  border-radius: 50%;
  border: 3px solid #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
#supportlist .asterisk-text{
  margin: 0 15% 3% auto;
  text-align: right;
  font-size: clamp(12px, 0.8vw, 30px);
}
#supportlist .download{
  position: relative;
  width: 92%;
  height: 8vw;
  margin: auto;
  background-image: url(../img/supportlist-arrow.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#supportlist .text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #000;
  font-size: clamp(22px, 1.7vw, 62px);
  font-family: ZenMaruGothic-Bold, sans-serif;
}
#supportlist .text span{
  color: #009fb0;
}
/* spot */
#spot{
  width: 100%;
  background: #ffffa8;
  text-align: center;
}
#spot h2 img{
  width: 60%;
  margin: auto;
}
#spot .line{
  content: "";
  display: block;
  width: 100%;
  height: 9px;
  margin-bottom: 3%;
  background: #ffee39;
}
#spot .comment-area{
  width: 46%;
  max-width: 360px;
  min-width: 300px;
  padding: 1em;
  border-radius: 30px;
  background: #fff;
  text-align: justify;
}
#spot .comment-area .text{
  font-size: clamp(12px, 0.8vw, 18px);
  line-height: 1.6;
}
#spot .box1{
  align-items: center;
  width: calc(100% - 60px);
  margin-left: 60px;
}
#spot .box1 > div{
  width: 50%;
}
#spot .box1 .text-area{
  padding: 0 5%;
}
#spot .box1 .plaza{
  display: inline-block;
  margin: 3% auto 6%;
  padding: 0.2em 3%;
  border-radius: 50px;
  background: #3e3a39;
  color: #fff;
  font-size: clamp(16px, 1.1vw, 24px);
  font-family: ZenMaruGothic-Bold, sans-serif;
}
#spot .box1 .text-area h4{
  margin: 0 auto 0 10%;
}
#spot .box1 .text-area .text{
  width: 80%;
  margin: 0 auto 8%;
  text-align: justify;
}
#spot .box1 .btn-area.fadeup{
  opacity: 1;
  animation-duration: 0s;
  animation-delay: 0s;
}
#spot .box1 .photo-area{
  position: relative;
}
#spot .box1 .photo-area .comment-area{
  position: absolute;
  top: 11%;
  left: -7%;
  border: 6px solid #a7d6d6;
}
#spot .box1 .photo-area .comment-area h4{
  font-size: clamp(16px, 1vw,20px);
}
#spot .box2{
  position: relative;
}
#spot .box2 .photo-area{
  display: grid;
  grid-template-columns: repeat(3,auto);
  width: calc(100% - 60px);
  margin-left: 60px;
}
#spot .box2 .comment-area{
  position: absolute;
  top: 5%;
  left: 21%;
  border: 6px solid #ffee39;
}
/* support */
#support{
  position: relative;
  padding: 4% 0 6% 0;
  background: #18bdcc;
  text-align: center;
}
#support h2 img{
  width: 32%;
  margin: auto;
}
#support h3{
  margin-bottom: 1%;
  color: #fff;
}
#support h3 + .text{
  margin-bottom: 3%;
  margin-left: 60px;
}
#support .flex-box{
  justify-content: space-between;
  width: 70%;
  margin: 0 auto 6%;
  padding-left: 60px;
}
#support .flex-box > div{
  width: 22%;
}
#support .flex-box p{
  text-align: justify;
  color: #fff;
}
#support .box1.active{
  animation-duration: 0.8s;
  animation-delay: 0.6s;
}
#support .box2.active{
  animation-duration: 0.8s;
  animation-delay: 1s;
}
#support .box3.active{
  animation-duration: 0.8s;
  animation-delay: 1.8s;
}
#support .box4.active{
  animation-duration: 0.8s;
  animation-delay: 1.4s;
}
#support .box1 .title{
  width: 100%;
}
#support .box2 .title{
  width: 94%;
  margin-bottom: 10%;
}
#support .box3 .title{
  width: 60%;
  margin: 0 0 5% auto;
}
#support .box4 .title{
  width: 60%;
  margin: 0 4% 3% auto;
}
#support .box4 .title1{
  width: 60%;
  margin-bottom: 3%;
}
#support .box .price{
  margin: 0 auto 6%;
}
#support .box1 .price{
  width: 100%;
}
#support .box2 .price{
  width: 80%;
}
#support .box3 .price{
  width: 66%;
  margin-bottom: 3%;
}
#support .box4 .price1{
  width: 91%;
  margin: 9% auto 0;
}
#support .box4 .price2{
  margin: 6% auto 0;
}
#support .box .text-area{
  /*border-left: 3px solid #fff;*/
}
#support .box4 .text-area{
  border: none;
}
#support .box .text-area p{
  text-align: justify;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
}
#support .box .text-area .title{
  width: 100%;
  margin: 0 auto 0 0;
  padding: 0 0 1% 4%;
  border-bottom: 1px solid #fff;
  font-size: clamp(15px, 1.05vw, 48px);
  font-weight: bold;
  white-space: nowrap;
}
#support .box .text-area .text{
  padding: 4% 2% 2% 4%;
}
#support .btn-area .btn-bgi{
  left: 50.2%;
  transform: translateX(-50.2%);
}
#support .bgi{
  position: absolute;
  bottom: 18%;
  right: 20%;
  width: 8%;
}
/* kankomavi */
#kankonavi{
  padding: 4% 0 6% 0;
  background: #ffffa8;
  text-align: center;
}
#kankonavi h2 img{
  width: 36%;
  margin: auto;
}
#kankonavi h3{
  margin-bottom: 1%;
}
#kankonavi .text{
  margin-bottom: 5%;
  margin-left: 60px;
}
#kankonavi .photo-area{
  flex-wrap: wrap;
  justify-content: space-between;
  width: 70%;
  margin: 0 auto 3%;
}
#kankonavi .photo-area h4{
  text-align: center;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  color: #3e3a39;
}
#kankonavi .photo-area .box{
  width: 22%;
  margin-bottom: 3%;
}
#kankonavi .photo-area .box:nth-child(1),
#kankonavi .photo-area .box:nth-child(5){
  animation-duration: 1.2s;
  animation-delay: 0.8s;
}
#kankonavi .photo-area .box:nth-child(2),
#kankonavi .photo-area .box:nth-child(6){
  animation-duration: 1.2s;
  animation-delay: 1.2s;
}
#kankonavi .photo-area .box:nth-child(3),
#kankonavi .photo-area .box:nth-child(7){
  animation-duration: 1.2s;
  animation-delay: 1.5s;
}
#kankonavi .photo-area .box:nth-child(4),
#kankonavi .photo-area .box:nth-child(8){
  animation-duration: 1.2s;
  animation-delay: 2s;
}
#kankonavi .photo-area .box img{
  margin: 0 auto 1%;
}
#kankonavi .btn-area .btn-bgi{
  top: 10%;
  left: 50.5%;
  transform: translateX(-50.5%);
}
/* instagram */
#instagram{
  margin-bottom: 3%;
  padding: 3% 0;
  text-align: center;
}
#instagram h2 img{
  width: 24%;
  margin: auto;
}
#instagram h3{
  margin-bottom: 3%;
  color: #18bdcc;
}
#instagram .flex-box{
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 46%;
  margin: 0 auto 3%;
}
#instagram .flex-box li{
  position: relative;
  width: 28%;
  height: 0;
  margin-bottom: 6%;
  padding-bottom: 28%;
}
#instagram li:nth-child(1),
#instagram li:nth-child(4)
{
  animation-duration: 1.2s;
  animation-delay: 0.8s;
}
#instagram li:nth-child(2),
#instagram li:nth-child(5){
  animation-duration: 1.2s;
  animation-delay: 1.2s;
}
#instagram li:nth-child(3),
#instagram li:nth-child(6){
  animation-duration: 1.2s;
  animation-delay: 1.5s;
}
#instagram .flex-box li img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}
#instagram .btn-area .btn-bgi{
  left: 50.5%;
  transform: translateX(-50.5%);
}
/* form */

.errorMessage {
	text-align: center;
	display: block;
	border: 1px solid #c00;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 40px;
}

.errorMessage ul {
	text-align: left;
	display: inline-block;
	list-style: disc;
	color: #c00;
}

#form{
  padding: 7% 0;
  text-align: center;
  background: #fff;
}
#form h2 img{
  width: 24%;
  margin: auto;
}
#form h3{
  margin-bottom: 3%;
  color: #000;
}

#form .inner {
    border: 3px solid #18bdcc;
    padding: 75px;
    width: 70%;
    max-width: 768px;
    margin: 0 auto;
    border-radius: 20px;
}

#form .thanks h4 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

#form .thanks p {
    text-align: left;
    font-size: 16px;
}

#form table {
    width: 100%;
    border-collapse: collapse;
}

#form table th {
    font-weight: bold;
    padding:  0 0 10px;
    text-align: left;
    vertical-align: middle;
    line-height: 1;
}

#form table td {
    text-align: left;
    padding:  0 0 30px;
    vertical-align: middle;
}

#form input[type="text"] {
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 10px;
}

#name {
    width: 70%;
    box-sizing: border-box;
}

#mail {
    width: 100%;
    box-sizing: border-box;
}

#tel {
    width: 50%;
    box-sizing: border-box;
}

#content {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 10px;
}

#send {
    text-align: center;
}

#send input {
    border-radius: 100px;
    border: none;
    display: inline-block;
    padding: 10px 75px;
    background: #18bdcc;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

#send input:hover {
    opacity: 0.7;
}

#send input:disabled {
    background: #ccc;
}

#send input:disabled:hover {
    opacity: 1;
    cursor: default;
}

.ctn {
    display: inline-block;
    background: #c00;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    border-radius: 5px;
    padding: 5px 10px;
    margin-right: 10px;
}

.opt {
    display: inline-block;
    background: #ccc;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    border-radius: 5px;
    padding: 5px 10px;
    margin-right: 10px;
}

/* access */
#access{
  padding: 6% 0;
  background-image: url(../img/access-bgi.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}
#access h2 img{
  width: 70%;
  margin-bottom: 4%;
}
#access h3{
  margin-bottom: 3%;
}
#access p, #access h3{
  color: #fff;
  text-align: justify;
}
#access p{
  font-size: clamp(14px, 1.05vw, 36px);
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
  padding-right: 30px;
}
#access .title{
  font-size: clamp(15px, 1.2vw, 36px);
  margin-bottom: 3%;
  padding-left: 0.5em;
  margin-left: -1em;
}
#access > div{
  width: 70%;
  margin: auto;
}
#access .text-area, #access .map-area{
  width: 50%;
}
#access .map-area img{
  width: 70%;
  margin-top: -10%;
  margin-bottom: 6%;
}
#access .flex-box{
  justify-content: space-between;
  align-items: stretch;
}
#access .pattern > div{
  width: 28%;
}
#access .pattern .title{
  position: relative;
  margin-bottom: 3%;
  padding-left: 2em;
  text-align: center;
  font-size: clamp(12px, 1.3vw, 47px);
  line-height: 1.6;
}
#access .pattern .car .title::before{
  content: url(../img/car.svg);
  display:inline-block;
  position: absolute;
  left: 0.45em;
  top: 60%;
  transform: translateY(-40%);
  width: 1.8em;
}
#access .pattern .train .title::before{
  content: url(../img/train.svg);
  display:inline-block;
  position: absolute;
  left: 0.45em;
  top: 60%;
  transform: translateY(-40%);
  width: 1.3em;
}
#access .pattern .bus .title::before{
  content: url(../img/bus.svg);
  display:inline-block;
  position: absolute;
  left: 0.45em;
  top: 60%;
  transform: translateY(-40%);
  width: 1.35em;
}
#access .car.active{
  animation-duration: 0.8s;
  animation-delay: 0.6s;
}
#access .train.active{
  animation-duration: 0.8s;
  animation-delay: 1s;
}
#access .bus.active{
  animation-duration: 0.8s;
  animation-delay: 1.4s;
}
/* top-btn */
#top-btn{
  position: fixed;
  bottom: 2vw;
  right: 2vw;
  width: 3.5vw;
  padding-top: 10px;
  border-radius: 15px;
  background: #fff;
  text-align: center;
}
#top-btn img{
  width: 60%;
  margin: auto;
}
#top-btn a{
  color: #3ea4af;
  font-size: clamp(10px, 0.9vw, 36px);
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
/* footer */
footer{
  padding: 3% 0;
  background: #3f3f3f;
  text-align: center;
}
footer img{
  width: 6%;
  margin: 0 auto 1%;
}
footer p{
  color: #fff;
}
footer .name{
  font-size: clamp(16px, 1.4vw,22px);
}
footer .tel{
  margin-bottom: 1%;
}
footer .copyright{
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

@media screen and (min-width: 1220px){
  .btn-area .btn, .btn-area .btn-bgi{
    min-width: 400px;
  }
}
@media screen and (min-width: 1041px) and (max-width: 1220px){
  #free .text-area {
    padding-top: 7%;
  }
  #happily .box01{
    width: 94%;
  }
  #happily .box01 .balloon{
    top: -4rem;
    right: -10vw
  }
  #supportlist .tableWrap table{
    width: 100%;
    margin: auto;
  }
  #supportlist .tableWrap table .circle{
    width: 2.5vw;
    height: 2.5vw;
    padding: 0.3vw;
  }
  #supportlist .asterisk-text{
    margin-right: 0;
  }
  #spot .box1{
    min-height: 48vw;
  }
  #spot .box1 .photo-area .comment-area{
    top: 0;
  }
  #support .flex-box{
    width: 86%;
  }
  #support .bgi{
    bottom: 12%;
    right: 8%;
    width: 10%;
  }
}
@media screen and (min-width: 900px) and (max-width:1040px){
  #free .text-area {
    padding-top: 10%;
  }
  #happily .box01{
    width: 98%;
    padding-left: 2%;
  }
  #happily .box01 .balloon{
    top: -5rem;
    right: -11vw
  }
  #happily .box02{
    margin-top: -4vw;
    margin-bottom: 12%;
  }
  #happily .box02 .icon{
    width: 24%;
    margin: 2vw auto 0 11vw;
  }
  #happily .box03{
    width: 100%;
  }
  #free{
    min-height: 65vw;
  }
  #free .free-item{
    align-items: flex-end;
  }
  #free .photo-area{
    margin-left: 10%;
  }
  #free .photo-area .comment{
    top: -5%;
  }
  #supportlist{
    padding: 2.5% 2.5% 2.5% calc(60px + 2.5%)
  }
  #supportlist .tableWrap table{
    width: 100%;
    margin: auto;
  }
  #supportlist .tableWrap table .circle{
    width: 2.8vw;
    height: 2.8vw;
    padding: 0.4vw;
  }
  #supportlist .asterisk-text{
    margin-right: 0;
  }
  #spot .box1{
    min-height: 58vw;
  }
  #spot .box1 .photo-area .comment-area{
    top: -10%;
  }
  #spot .box1 .text-area{
    padding: 0 2%;
  }
  #spot .box2{
    padding-top: 8%;
  }
  #support .flex-box{
    width: 90%;
  }
  #support h3 + .text{
    margin-bottom: 6%;
  }
  #support h3 + .text span{
    display: block;
  }
  #support .bgi{
    bottom: 12%;
    right: 8%;
    width: 10%;
  }
  #kankonavi .text span{
    display: block;
  }
}

@media screen and (max-width:899px){
  body {
    overflow-x: hidden!important;   
  }
  .supportBtnSp a {
      display: block;
      margin: 0 30px!important;
      width: calc(100% - 60px)!important;
      box-sizing: border-box!important;
      min-width: auto!important;
    }
  h2{
    margin-bottom: 1%;
  }
  h3{
    margin-bottom: 6%;
  }
  p{
    font-size: clamp(14px, 1.05vw, 36px);
  }
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .flex-box{
    flex-direction: column;
  }
  /* アニメーション */
  .sidebar.fade{
    animation-duration: 0.8s;
    animation-delay: 0.2s;
  }
  .fadeup.active,
  .fadein.active,
  #support .box1.active,
  #support .box2.active,
  #support .box3.active,
  #support .box4.active,
  .upballoon.active,
  #free .free-item.active{
    animation-delay: 0s;
  }
  #kankonavi .photo-area .box:nth-child(odd){
    animation-delay: 0s;
  }
  #kankonavi .photo-area .box:nth-child(even){
    animation-delay: 0.2s;
  }
  #instagram li:nth-child(1),
  #instagram li:nth-child(3),
  #instagram li:nth-child(5){
    animation-duration: 1.2s;
    animation-delay: 0s;
  }
  #instagram li:nth-child(2),
  #instagram li:nth-child(4),
  #instagram li:nth-child(6){
    animation-duration: 1.2s;
    animation-delay: 0.2s;
  }
  #spot .box1 .btn-area.fadeup{
    opacity: 0;
    animation-duration: 1.2s;
    animation-delay: 0s;
  }
  /* header */
  header{
    overflow: hidden;
    height: 90vh;
    min-height: inherit;
  }
  header .logo{
    min-width: 80px;
    left: 3vw;
  }
  header .mv01{
    height: 90vh;
    min-height: inherit;
  }
  header .mv02{
    height: 60vh;
    min-height: inherit;
    margin-left: 0;
    width: 100%;
  }
  header .comment01{
    width: 90px;
    left: 5vw;
    top: auto;
    bottom: calc(35% + 85px);
  }
  header .comment02{
    width: 90px;
    left: 6vw;
    right: auto;
    bottom: calc(5% + 85px);
  }
  header .comment03{
    width: 90px;
    left: 22vw;
    right: auto;
    bottom: calc(22% + 85px);
  }
  /*
  header .comment04{
    width: 18.5vw;
    left: 16vw;
    right: auto;
    bottom: calc(21% + 85px);
  }
  */
  
  header .comment04{
    position: absolute;
    left: auto;
    bottom: auto;
    top: -80px;
    right: 40px;
    width: 90px;
    z-index: 3;
  }
  header .comment04.slideup{
    animation-delay: 2s;
  }  

  
  .hBtn {
    /*background:rgba(255, 255, 255, 0.9);*/
    background: #fff;
    position: absolute;
    z-index: 3;
    border-radius: 1000px;
    padding: 8px;
    text-align: center;
    bottom: 2vh;
    width: calc(100% - 40px);
    margin: 0 20px;
    box-sizing: border-box;
    right: auto;
    left: auto;
    border: 3px solid #18bdcc;
  }

  .hBtn a {
    display: inline-block;
    border-radius: 1000px;
    background: #f5e644;
    padding: 10px 15px;
    color: #000;
    width: 100%;
    box-sizing: border-box;
    font-family: ZenMaruGothic-Bold, sans-serif;
  }

  .hBtn a:hover {
    opacity: 0.7;
  }

  .hBtn .btn01 {
    font-size: 12px;
    letter-spacing: 0;
 }

  .hBtn .btn02 {
    font-size: 20px;
  }
  
  .lowerHeader {
    padding: 3vh 0;
    background: url(../img/mv01.jpg) center center;
    background-size: cover;
    position: relative;
  }

  .lowerHeader a img {
    min-width: 80px;
    margin-left:   3vw;
  }

  .lowerHeader h1 {
    position: absolute;
    top: 0;
    right: 20px;
  }

  .back {
    margin-top: 20px;
  }

  .back a {
    font-size: 14px;
  }
  
  /* sidenav */
  .sidebar{
    background: transparent;
  }
  .sidebar .menu-area:hover{
    background: none;
  }
  /* ハンバーガー */
  .sp-menu{
    position: fixed;
    top: 0;
    right: 2vw;
  }
  .sp-menu .menu-trigger{
    width: 10vw;
    height: 10vw;
  }
  .g-nav{
    left: 0;
    border: none;
    z-index: 10;
  }
  .menu{
    width: 100%;
    height: 100vh;
    padding: 10vh 10vw;
  }
  .menu a{
    height: 4vh;
    line-height: 4vh;
    margin-left: 0;
    padding: 3vw;
    font-size: 6vw;
  }
  .menu a span{
    display: block;
    font-size: 3.4vw;
    transition-duration: 0.3s;
  }
  /* 共通 */
  .btn-bgi, .btn-area .btn-bgi{
    display: none;
  }
  .btn-area{
    margin: 0 auto 6%;
  }
  /* happily */
  #happily{
    padding: 10% 0;
  }
  #happily h2{
    width: 78%;
  }
  #happily h3{
    width: 50%;
  }
  #happily .text{
    margin: 0 auto 18%;
    white-space: normal;
  }
  #happily .box01{
    width: 90%;
    margin: auto;
    padding: 0;
  }
  #happily .box01 .photo-area{
    width: 86%;
    margin: 0 auto 6% 0;
  }
  #happily .box01 .comment{
    top: -14vw;
  }
  
  .youtubeBox {
     width: 100%;
     box-sizing: border-box;
     max-width: 400px;
     margin: 0% auto 10%;
     padding: 0 20px;
  }

  #happily .balloon{
  top: 2%;
  right: 2%;
    width: 20vw;
  }
  #happily .box02{
    margin: 0 auto;
  }
  #happily .box02 .photo-area {
    width: 80%;
    margin: 0 0 0 auto;
    padding-top: 10%;
  }
  #happily .box02 .title{
    width: 7vw;
    margin: -37% auto 0 7%;
  }
  #happily .box02 .icon {
    width: 42%;
    margin: -7% 6% -4% auto;
  }
  #happily .box03{
    width: 100%;
    margin: auto;
    padding: 0;
    flex-direction: column-reverse;
  }
  #happily .box03 .text-area01, #happily .box03 .photo-area{
    width: 100%;
    padding: 0;
  }
  #happily .box03 .photo-area{
    margin-bottom: 6%;
  }
  #happily .box03 .text-area02{
    width: 50%;
    margin: 0 auto 12% 0;
  }
  #happily .box03 .text-area02 .text{
    width: 67%;
    margin: 12% auto 12% 16%;
  }
  #happily .box03 .comment{
    top: -23%;
    right: 8%;
  }
  #happily .box03 .text-area01 .icon{
    width: 30%;
    margin: 6% 9% 0 auto;
  }
  #happily .box03 .text-area01 .text{
    width: 40%;
    margin: 0 auto 0 18%;
  }
  #happily .scroll p{
    padding: 10px 10px 16vw;
  }
  #happily .scroll p::before,
  #happily .scroll p::after{
    height: 14vw;
  }
  /* free */
  #free{
    margin: auto;
    padding: 12% 0 0 0;
    border: none;
  }
  #free h3{
    margin-bottom: 0;
  }
  #free h4{
    font-size: 5vw;
  }
  #free .text, #free .free-item .text{
    white-space: normal;
  }
  #free .text-area{
    width: 94%;
    margin: 0 auto 6%;
    padding: 10% 0 0;
  }
  #free .free-item{
    flex-direction: row;
    align-items: center;
    margin-bottom: 6%;
  }
  
  #free .comment {
      width: 220px;
        top: -95px;
        left: 50%;
        margin-left: -110px;
  }
  
  #free h4 {
    white-space: normal!important;
  }
  
.free-item-outside h5 {
    line-height: 1.3;
    margin-bottom: 0px;
    white-space: normal
}

.free-item-outside ul {
    font-size: 12px!important;
}

.free-item-outside ul li {
    font-size: 12px!important;
}  

#free .caution {
    margin-bottom: 25%;
}
  
  #free .free-item .number{
    width: 40px;
  }
  #free .free-item .text{
    margin: 0 auto 3%;
    line-height: 1.4;
  }
  #free .photo-area{
    width: 100%;
    margin: auto;
  }
  #free .photo-area .comment{
    top: -2%;
  }
  /* supportlist */
  #supportlist{
    padding: 12% 0;
  }
  #supportlist .tableWrap {
      
    }
  #supportlist .tableWrap table{
    display: block;
    width: 84%;
    /*border: 2px solid #18bdcc;*/
    border:none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #supportlist .tableWrap table .circle{
    width: 5vw;
    height: 5vw;
    padding: 0.6vw;
    border: 2px solid #fff;
  }
  #supportlist .tableWrap table .circle>div{
    border: 2px solid #fff;
  }
  #supportlist .tableWrap table, #supportlist .tableWrap th, #supportlist .tableWrap td{
    font-size: 4.2vw;
  }
  #supportlist .tableWrap table span{
    font-size: 3.4vw;
  }
  #supportlist .tableWrap th{
    width: 140px;
    min-width: 140px;
  }
  #supportlist .tableWrap td{
    width: 6em;
    min-width: 6em;
  }
  #supportlist .asterisk-text{
    margin-right: 7%;
    line-height: 1.4;
  }
  /* spot */
  #spot{
    margin-bottom: 0;
    padding: 12% 0;
  }
  #spot h3{
    margin-bottom: 0;
  }
  #spot h4, #spot .box1 .photo-area .comment-area h4{
    width: 90%;
    font-size: min(18px, 3.8vw);
  }
  #spot .box1 .text-area h4{
    margin: 0 auto 6%;
    font-size: min(20px, 4vw);
    line-height: 1.4;
  }
  #spot .box1{
    width: 90%;
    margin: 0 auto 6%;
  }
  #spot .box1 > div{
    width: 100%;
    padding: 0;
  }
  #spot .box1 .text-area .text{
    width: 90%;
    margin: 0 auto 12%;
  }
  #spot .btn{
    margin-bottom: 12%;
  }
  #spot .box1 .photo-area .comment-area{
    position: static;
    width: 100%;
    margin: -8% auto 6%;
  }
  #spot .box1 .plaza{
    letter-spacing: 0.02rem;
  }
  #spot .box2 .photo-area{
    display: block;
    width: 100%;
    margin: auto;
  }
  #spot .box2 .photo-area img{
    width: 90%;
    margin: 0 auto;
  }
  #spot .box2 .comment-area{
    position: static;
    width: 90%;
    margin: -8% auto 0;
  }
  /* support */
  #support{
    padding: 12% 0;
  }
  #support h2 img{
    width: 70%;
  }
  #support h3{
    margin-bottom: 6%;
  }
  #support h3 + .text{
    width: 80%;
    margin: 0 auto 12%;
  }
  #support .flex-box{
    width: 80%;
    margin: auto;
    padding: 0;
  }
  #support .flex-box > div{
    width: 100%;
  }
  #support .box1{
    margin-bottom: 20%;
  }
  #support .box2{
    margin-bottom: 16%;
  }
  #support .box3{
    margin-bottom: 20%;
  }
  #support .box4{
    margin-bottom: 16%;
  }
  #support .box1 .title{
    width: 70%;
  }
  #support .box2 .title{
    width: 70%;
    margin-bottom: 3%;
  }
  #support .box3 .title{
    width: 48%;
    margin: 0 0 0 auto;
  }
  #support .box4 .title{
    width: 48%;
    margin: 0 0 0 auto;
  }
  #support .box1 .price{
    width: 70%;
    margin: 0 auto 6%;
  }
  #support .box2 .price{
    width: 60%;
    margin: 0 auto 6%;
  }
  #support .box3 .price{
    width: 56%;
    margin: 0 auto 6%;
  }
  #support .box4 .price{
    margin-bottom: 3%;
  }
  #support .box4 .price1{
    width: 86%;
    margin-top: 3%;
  }
  #support .box4 .price2{
    width: 90%;
  }
  #support .box .text-area,
  #support .box .text-area .title{
    padding: 0;
    border: none;
  }
  #support .box .text-area{
    width: 100%;
    margin: auto;
  }
  #support .box .text-area .text{
    padding: 0;
    font-weight: normal;
  }
  #support .box4 .text-area .text1{
    margin-bottom: 12%;
  }
  #support .btn-area .btn, #support .btn-area .btn-bgi{
    min-width: 98vw;
  }
  #support .btn-area .btn a, #support .btn-area .btn-bgi a{
    padding: 0.75em 0.5em;
  }
  #support .bgi{
    display: none;
  }
  /* kankonavi */
  #kankonavi{
    padding: 12% 0;
  }
  #kankonavi h2 img{
    width: 80%;
  }
  #kankonavi h3{
    margin-bottom: 4%;
  }
  #kankonavi h4{
    font-size: 3.4vw;
  }
  #kankonavi .text{
    margin: 0 auto 12%;
  }
  #kankonavi .photo-area{
    flex-direction: row;
    width: 80%;
  }
  #kankonavi .photo-area .box{
    width: 44%;
    margin-bottom: 12%
  }
  #kankonavi .btn-area .btn-bgi{
    display: none;
  }
  /* instagaram */
  #instagram{
    padding: 12% 0;
  }
  #instagram h2 img{
    width: 60%;
  }
  #instagram h3{
    margin-bottom: 12%;
  }
  #instagram .flex-box{
    width: 60%;
    margin-bottom: 6%;
  }
  #instagram .flex-box li{
    width: 44%;
    margin-bottom: 12%;
    padding-bottom: 44%;
  }
  /* access */
  #access{
    padding: 12% 0;
  }
  #access h2 img{
    width: 78%;
  }
  #access p.text{
    font-weight: normal;
  }
  #access > div{
    width: 80%;
  }
  #access .text-area, #access .map-area{
    width: 100%;
  }
  #access .map-area img{
    width: 80%;
    margin: 3% 5% 6% auto;
  }
  #access .flex-box{
    flex-direction: row;
    flex-wrap: wrap;
  }
  #access .pattern{
    width: 90%;
  }
  #access .pattern > div{
    width: 48%;
  }
  #access .pattern > div:not(:last-child){
    margin-bottom: 12%;
  }
  #access .pattern .title{
    font-weight: bold;
  }
  #access .pattern .car .title::before{
    width: 1.7em;
    left: auto;
    top: auto;
    position :relative!important;
    display: block;
    margin: 0 auto -5px;
  }
  #access .pattern .train .title::before{
    width: 1.2em;
    left: auto;
    top: auto;
    position :relative!important;
    display: block;
    margin: 0 auto -5px;
  }
  #access .pattern .bus .title::before{
    width: 1.25em;
    left: auto;
    top: auto;
    position :relative!important;
    display: block;
    margin: 0 auto -5px;
  }
  #access p{
    padding-right: 0;    
  }




  /* form */
  .errorMessage {
	  padding: 10px;
	  margin-bottom: 30px;
  	  font-size: 12px;
  }
  
  .errorMessage ul {
    margin: 0;    
  }

  #form{
    padding: 7% 3% 8%;
  }

#form .inner {
    border: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
    border-radius: none;
    box-sizing: border-box;
}

#form .thanks {
    border: 3px solid #18bdcc;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}

#form .thanks h4 {
    font-size: 18px;
    margin-bottom: 15px;
}

#form .thanks p {
    font-size: 14px;
}

#form table {
    width: 100%;
    border-collapse: collapse;
}

#form table th {
    padding:  0 0 10px;
    font-size: 14px;
}

#form table td {
    padding:  0 0 20px;
}

#form input[type="text"] {
    font-size: 14px;
    padding: 3px 7px;
}

#name {
    width: 100%;
    box-sizing: border-box;
}

#mail {
    width: 100%;
    box-sizing: border-box;
}

#tel {
    width: 100%;
    box-sizing: border-box;
}

#content {
    width: 100%;
    height: 150px;
    font-size: 14px;
    padding: 3px 7px;
}

#send input {
    padding: 7px 15px;
    font-size: 14px;
}

.ctn {
    font-size: 11px;
    padding: 3px 7px;
}

.opt {
    font-size: 11px;
    padding: 3px 7px;
}

  
  /* bottomnav */
  #bottomnav{
    flex-direction: row;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1vh 0 0;
    border-top: 1px solid #18bdcc;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
  }
  #bottomnav p{
    color: #18bdcc;
    font-size: 3.4vw;
    font-family: fot-rodin-pron, sans-serif;
    font-weight: bold;
    letter-spacing: 0rem;
  }
  #bottomnav .pamphlet{
    width: 35%;
    border-right: 1px solid #18bdcc;
    text-align: center;
  }
  #bottomnav a{
    /*flex-direction: row;*/
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #bottomnav .instagram{
    width: 65%;
    text-align: center;
  }
  #bottomnav .pamphlet img{
    width: auto;
    height: 2.4vh;
    margin-left: 0.25em;
  }
  #bottomnav .instagram img{
    height: 2vh;
    margin-left: 0.25em;
  }
  /* top-btn */
  #top-btn{
    bottom: 8vh;
    width: 8vw;
    border-radius: 10px;
  }
  /* footer */
  footer{
    padding: 8% 0;
  }
  footer img{
    width: 12%;
    margin-bottom: 3%;
  }
}


/* 2024.06.05*/

/*動画*/
.movieBox {
    display: flex;
    width: 80%;
    margin: 5% auto 0;
}
.videoBox {
    width: 48%;
    margin: 0;
    margin-right: 2%;
}
.videoBox .inner {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.videoBox video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.youtubeBox:nth-child(1) {
    width: 48%;
    margin-right: 2%;
}

.youtubeBox:nth-child(2) {
    width: 48%;
    margin-left: 2%;
}

@media screen and (max-width: 899px) {
    .movieBox {
        display: block;
        width: 90%;
        margin: 15px auto 0;
    }
    .videoBox {
        width: 100%;
        max-width: 350px;
        margin: 0 auto 15px;   
    }
    .youtubeBox:nth-child(1),   
    .youtubeBox:nth-child(2),      
    .youtubeBox {
        width: 100%;
        max-width: 350px;
        margin: 0 auto 15%;  
        padding: 0!important; 
    }
    #happily {
        padding-top: 20px;
    }
}

/*FV*/
.catchCopy {
    position: absolute;
    bottom: 200px;
    right: 50px;
    z-index: 2;
    display: table;
    width: 300px;
    height: 300px;
    border-radius: 1000px;
    padding: 3px;
    background: #fff;
    filter: drop-shadow(-10px 10px 10px rgba(128,128,128,0.6));
}
.catchCopy p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 3px solid #f091b3;
    border-radius: 1000px;
    font-family: ZenMaruGothic-Bold, sans-serif;
    /*background: #ffffa8;*/
    line-height: 1.1;
}
.y00 {
    font-size: 2.4rem;
    color: #f091b3;
}
.y01 {
    font-size: 6rem;
    color: #f091b3;
}
.y02 {
    font-size: 2rem;
    color: #f091b3;
}
.y03 {
    font-size: 2rem;
	color: #444;
}
.marker01 {
    font-size: 1.3rem;
	letter-spacing: 0;
	color: #444;
	display: block;
	margin: 0 auto -15px;
}
.marker02 {
    background: linear-gradient(transparent 50%, #f5e644 50%);
}



@media screen and (min-width: 900px) {
    .ySp {
        display: none;
    }
}

@media screen and (max-width: 899px) {
	.catchCopy {
		position: absolute;
		bottom: auto;
		auto: 55vh;
		bottom: 120px;
		right: 20px;
		width: 180px;
		height: 180px;
	}
	.catchCopy p {
		line-height: 1.2;
	}
	.y00 {
		font-size: 1.4rem;
	}
	.y01 {
		font-size: 3rem;
	}
	.y02 {
		font-size: 1.4rem;
	}
	.y03 {
		font-size: 1.3rem;
	}
	.marker01 {
		font-size: 0.8rem;
	}

}

/*支援*/

.shienTableWrap {
}

.about250 {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 3
}

.about250 img {
    width: 300px;
    height: auto;
}

.shienTable {
    border-collapse: collapse;
    padding: 0;
    margin: 0 auto 30px;
    width: 100%;
    max-width: 800px;
    position: relative;
    font-family: fot-rodin-pron, sans-serif;
}
.shienTable td {
    vertical-align: middle;
    text-align: center;
    padding: 10px;
    width: 20%;
    box-sizing: border-box;
    border: 2px solid #18bdcc;
    line-height: 1.3;
}
.shienTable .box {
    border-radius: 10px;
    height: 100px;
}
.shienTable .box span {
    font-size: 0.8em;
    font-size: min(1.4vw, 0.8rem);
    display: block;
}
.shienTable .box strong {
    font-size: 1.6rem;
    font-size: min(3.8vw, 2rem);
    display: block;
}
.shienTable .box em {
    font-size: 2vw;
    font-size: min(2vw, 1.2rem);
    font-style: normal;
    display: block;
    font-weight: bold;
    height: auto;
}

.grn {
    background: #e7f0da;
    color: #89ab50;
}

.ylw {
    background: #faf3cf;
    color: #ebc436;
}

.gry {
    background: #d8dce4;
    color: #8b96af;
    height: auto!important;
}

.org {
    background: #f3e6d7;
    color: #ce863f;
}

.ble {
    background: #dde2f2;
    color: #596fc0;
    height: auto!important;
}

.shienTable tfoot {
}

.shienTable tfoot th {
    position: relative;
    vertical-align: middle;
    height: 41px;
    color: #fff;
    font-size: min(2vw, 1rem);
}

.shienTable tfoot th:after {
    content: "";
    position: absolute;
    right: -39px;
    top: 0;
    border-left: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    z-index: 2;
}

.n1 { background: #3e3a39!important; border-radius: 5px 0 0 5px; }
.shienTable tfoot th.n1:after { border-left: 20px solid #3e3a39; }
.n2 { background: #54504f!important; }
.shienTable tfoot th.n2:after { border-left: 20px solid #54504f; }
.n3 { background: #6b6664!important; }
.shienTable tfoot th.n3:after { border-left: 20px solid #6b6664; }
.n4 { background: #7f7876!important; }
.shienTable tfoot th.n4:after { border-left: 20px solid #7f7876; }
.n5 { background: #938b88!important; border-radius: 0 5px 5px 0; }
.shienTable tfoot th.n5:after { display: none!important; }

.shienText {
    color: #fff;
    text-align: center;
    margin: 0 0 30px;
    font-weight: bold;
    font-size: 1.2rem;
}

.ico {
    vertical-align: bottom!important;
    text-align: center;
    padding: 10px;
}

.ico img {
    width: 45%;
    margin: 0 auto;
}

.ico05 {
    font-weight: bold;
}

.ico05 p {
    color: #fff!important;
    font-size: min(2vw, 1.4rem);
    letter-spacing: 0;
}

.ico05 img {
    width: auto;
    height: auto;
}

@media screen and (max-width: 899px) {
    .shienTableWrap {
        padding: 0 20px;
    }
    .box {
        line-height: 1;
    }
    .shienText {
        margin-bottom: 0;   
        font-size: 0.8rem;
    }
    .about250 {
        right: 0;
    }

    .about250 img {
        width: 35vw;
        height: auto;
    }
}

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

    #supportlist .title.tight {
        letter-spacing: 1px!important;
    }

    .shienTable .box span {
        font-size: 0.5rem;
        font-weight: bold;
    }   

    .shienTable tfoot th {
        padding-left: 5vw;   
        font-size: 0.6rem;
    }
    .shienTable tfoot th.n1 {
        padding-left: 10px;
    }
    .ble strong {
        letter-spacing: -1px;
    }
    .shienTable .box {
        height: auto!important;
    }
}