@charset "utf-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse; width:100%;}
fieldset,img{border:0; vertical-align:top;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
del,ins{text-decoration:none;}
section{display:block;}
figure,figcaption{margin:0; padding:0;}
main {display:block;padding:0;margin:0;
}
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0.1em;}
.cf	{display:inline-block;zoom:1;}
ul.col {
    display: flex;
    justify-content: space-between;
}
ul.col li {
    background-color: #475f28;
    border-radius: 10px;
    width: calc(49% - 20px);
    padding: 40px;
    box-sizing: border-box;
}
/* \*/
* html .cf	{height:1%;}
.cf	{display:block;}
/* */
a:link,a:visited {
    backface-visibility:hidden;
-webkit-backface-visibility: hidden;  
	
	text-decoration:none;
	color:#272638;
    transition:ease-in-out .3s;
-moz-transition:ease-in-out .3s;
-webkit-transition:ease-in-out .3s;
-o-transition:ease-in-out .3s;

    
}
a:hover {
    outline:none;
}
a:focus, *:focus { outline:none; }
img {
	max-width: 100%;
    height: auto;
    width /***/: auto;
	backface-visibility:hidden;
-webkit-backface-visibility: hidden;  
}
br.sp-only {
    display: none;
}
body {
	font-family: 'Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-size: 15px;
	line-height: 32px;
	letter-spacing: 0.02em;
	color: #000;
	word-wrap: break-word;
    font-weight: 400;
}
.en {
  font-family: 'Oswald', sans-serif;
}


br.sp-only {
    display: none;
}
@-webkit-keyframes bgloop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: 22px 0;
    }
}
@keyframes bgloop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 22px 0;
    }
}
@-webkit-keyframes bgloop2 {
    from {
        background-position: 22px  0;
    }
    to {
        background-position: 0px 0;
    }
}
@keyframes bgloop2 {
    from {
        background-position: 22px 0;
    }
    to {
        background-position: 0px 0;
    }
}

.w880 {
    max-width: 880px;
    width: 86%;
    margin: auto;
}
#head #sp-btn {
    position: fixed;
    z-index: 99;
    right: 40px;
    top: 45px;
}
#head nav {
    position: fixed;
    z-index: 10;
    right: 0;
    top: 0;
    bottom: 0;
    width: 350px;
    background-color: rgba(255,255,255,0.90);
    text-align: center;
    padding-top: 100px;
    -moz-transform: translate3d(110%, 0, 0);
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
    transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
    -moz-transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
    -webkit-transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
    -o-transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
    -ms-transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
    
}
#head nav.active {
    -moz-transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(0%, 0, 0);
    
}
.header-menu.-show {
    
}
#head nav li {
    margin-bottom: 10px;
}
#head nav li a {
    font-weight: bold;
    position: relative;
    
}
#head nav li a:after {
    position: absolute;
    background-color: #272638;
    height: 1px;
    left: 0;
    bottom: -3px;
    content: "";
    width: 0%;
    z-index: 1;
    transition: .3s cubic-bezier(0.76, 0, 0.24, 1);
    -moz-transition: .3s cubic-bezier(0.76, 0, 0.24, 1);
    -webkit-transition: .3s cubic-bezier(0.76, 0, 0.24, 1);
    -o-transition:.3s cubic-bezier(0.76, 0, 0.24, 1);
    -ms-transition: .3s cubic-bezier(0.76, 0, 0.24, 1);
}
#head nav li a:hover:after {
    width: 100%;
    
}
#head #sp-btn .menu-trigger,
#head #sp-btn .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
#head #sp-btn .menu-trigger {
	position: relative;
	width: 42px;
	height: 22px;
}

#head #sp-btn .menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #272638;
}
#head #sp-btn.bar-white .menu-trigger span {
	background-color: #fff;
}
#head #sp-btn.active .menu-trigger span {
	background-color: #272638;
}
#head #sp-btn .menu-trigger span:nth-of-type(1) {
	top: 0;
}
#head #sp-btn .menu-trigger span:nth-of-type(2) {
	top: 10px;
}
#head #sp-btn .menu-trigger span:nth-of-type(3) {
	bottom: 0;
}


#head #sp-btn.active .menu-trigger span:nth-of-type(1) {
	-webkit-transform: translateY(14px) rotate(-45deg);
	transform: translateY(14px) rotate(-45deg);
}
#head #sp-btn.active .menu-trigger span:nth-of-type(2) {
	opacity: 0;
}
#head #sp-btn.active .menu-trigger span:nth-of-type(3) {
	-webkit-transform: translateY(-14px) rotate(45deg);
	transform: translateY(-14px) rotate(45deg);
}
.only-pc{
	display:block;
}
.only-sp{
	display:none;
}

@media screen and (max-width:860px){
#head #sp-btn {
    right: 30px;
    top: 35px;
}


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




@media screen and (max-width:480px){
#head #sp-btn {
    right: 20px;
    top: 30px;
}
#head nav li {
    margin-bottom: 15px;
}
#head nav li a {
    font-size: 19px;
}
#head nav {
    background-color: rgba(255,255,255,0.90);
    width: 100%;
}
#head #sp-btn .menu-trigger {
    width: 30px;
    height: 26px;
}
#head #sp-btn .menu-trigger span:nth-of-type(2) {
	top: 12px;
}
#head #sp-btn.active .menu-trigger span:nth-of-type(1) {
	-webkit-transform: translateY(12px) rotate(-45deg);
	transform: translateY(12px) rotate(-45deg);
}
#head #sp-btn.active .menu-trigger span:nth-of-type(3) {
	-webkit-transform: translateY(-12px) rotate(45deg);
	transform: translateY(-12px) rotate(45deg);
}
}



@media screen and (max-width:1024px){
	.hero-mv {
    height: 40vh;
}
}

/*---------------------------------------------------------*/

  body {
font-family: dnp-shuei-mgothic-std, sans-serif;
font-weight: 600;
font-style: normal;
background: url("../images/bg.png")no-repeat;
    background-size: cover;
  }
  
   body{
     opacity: 0;
    animation: mainopen .6s ease .4s forwards;
}

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

@-webkit-keyframes mainopen {
    0% {opacity: 0}
    100% {opacity: 1}
}
  
  
  
.hotel-logo {
    position: absolute;
    top: 3.5%;
    left: 2.5%;
    width: 15%;
}
#hero {
    height: 100vh;
    background: url(../images/hero-bg2.png?02) top center no-repeat;
    background-size: cover;
    position: relative;
}
.page-id {
    width: 33%;
    margin: 0 auto 0;
    position: absolute;
    left: 13%;
    right: auto;
    top: 12%;
    z-index: 3;
}
  .page-id.balloon1 {
    width: 36%;
    margin: 0 auto 0;
    position: absolute;
    left: auto;
    right: 9%;
    top: 30%;
    z-index: 3;
}
.page-id img {
    width: 100%;
}
.hero-bg {
    position: absolute;
    top: 0;
    z-index: -1;
}
  .hero-item01,.hero-item02,.hero-item03,.hero-item04,.hero-item05,.hero-item06,.hero-item07,.hero-item08,.hero-item09,.hero-item10,.hero-item11,.hero-item12 {
    position: absolute;
}
  .hero-item01{
top: 38%;
    left: 8%;
    width: 10%;
  }
  .hero-item02{
    top: 58%;
    left: 10%;
    width: 3%;
  }
  .hero-item03{
    top: 52%;
    left: 14%;
    width: 5%;
  }
  .hero-item04{
    top: 28%;
    left: 18%;
    width: 10%;
  }
   .hero-item05{
    top: 44%;
    left: 21%;
    width: 17%;
  }

   .hero-item06{
    top: 31%;
    left: 33%;
    width: 8%;
  }
   .hero-item07{
    top: 14%;
    left: 42%;
    width: 10%;
  }
   .hero-item08{
    top: 35%;
    left: 38%;
    width: 18%;
  }
   .hero-item09{
     top: 50%;
    left: 53%;
    width: 7%;
  }
   .hero-item10{
    top: 12%;
    left: 50%;
    width: 17%;
  }
   .hero-item11{
    top: 30%;
    left: 66%;
    width: 12%;
  }
   .hero-item12{
top: 28%;
    left: 79%;
    width: 7%;
  }
  /* guide */
#quize-guide {
    text-align: center;
    padding-top: 120px;
}
.quize-guide-kids {
    width: 150px;
    position: absolute;
    top: -70px;
    left: 40px;
}
 #quize-map {
     position: relative;
}


  #quize-map .quize-guide-kids {
  left: 410px;
    top: -78px;
}
  .sec-hgroup{
    width: 600px;
    margin: 0 auto;
    position: relative;
    text-align: center;
  }
.sec-title {
text-align: center;
    font-size: 36px;
    letter-spacing: 0.08em;
    color: #3075da;
    border-top: #3075da solid 2px;
    border-bottom: #3075da solid 2px;
    padding: 22px 65px;
    display: inline-block;
    margin: 0 auto;
}
  .quize-guide-copy {
    font-size: 48px;
    width: 100%;
    margin: 120px auto 60px;
    letter-spacing: -0.03em;
    color: #3075da;
  }
  .quize-guide-detail {
    width: 60%;
    margin: 0 auto 200px;
    display: flex;
    justify-content: space-between;
}
.guide-item {
    position: relative;
    width: calc(50% - 3%);
}
 .fukidashi01 {
    width: 30%;
    position: absolute;
    top: 18%;
    left: -15%;
}
   .fukidashi02 {
    width: 70%;
    position: absolute;
    right: -40%;
    top: -40%;
}
  .guide-item-txt {
    font-size: 22px;
    padding-top: 1em;
    color: #3075da;
}
.guide-item-tmb img {
    border-radius: 10px;
  width: 100%;
}

/* MAP */

 
  .map {
    width: 100%;
margin-top: 100px;
}
 .map-ico {
       width: 120px;
   position: absolute;
   transition: .4s;
}
   .map-ico:hover {
    width: 130px;
  transform-origin:50% 50% 0;
   transition: .4s;
}
  .ico01{
    top: 25%;
    left: 50%;
  }
.ico02 {
    top: 54%;
    right: 20%;
}
  .ico03{
    top: 35%;
    left: 12%;
  }
.ico04 {
    top: 70%;
    left: 42%;
}
  .ico05 {
    top: 57%;
    left: 53%;
}
  .ico06 {
top: 62%;
    left: 20%;
}
  .ico07 {
    top: 13%;
    left: 18%;
}
   .comp #q-ico-svg {
    display: none;
}
  .comp .map-ico {
    width: 120px;
    height: 120px;
    background: #333;
    border-radius: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-weight: 600;
}
    .comp a{
pointer-events: none;
}
  .q-clear{
    display: none;
  }
  .comp .q-clear{
    display: block;
    width: 120px;
  }
  
  
.pop-up {
  display: none;
}
.q-content {
    height: 100%;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 150px 0 80px;
  z-index: 3;
}
  
  .q-content-inner{
    height: 100%;
    width: 100%;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0px 0px 20px -6px rgb(0 0 0 / 10%);
    z-index: 3;
    padding: 70px 70px 40px;
}
  
  
.modaal-inner-wrapper {
  padding: 0;
}

.q-content .txt .close {
  text-align: center;
  line-height: 1;
  cursor: pointer;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  background-image: url("../images/close_icon.png");
  background-repeat: no-repeat;
  background-position: left center;
  margin-top: 70px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-size: 15px;
  padding-left: 30px;
}
  .modaal-wrapper {
    overflow-x: hidden;
}
.modaal-wrapper .modaal-close {
  display: none !important;
}
.modaal-overlay {
  background-color:#f3eece !important;
      opacity: 0.6!important;
}

  
.modaal-content-container {
  padding: 0px !important;
}
.modaal-container {
  position: relative;
  display: inline-block;
  max-width: 100% !important;
  width: 100%;
  height: 100vh;
  margin: auto;
  text-align: left;
  color: #363232;
  border-radius: 0;
  background-color: #7c783800 !important;
  box-shadow: none !important;
  cursor: auto;
}
.comp.ico01 a {
  color: #ED070A;
}
.bg-close {
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
}
.bg-close2 {
    width: 100vw;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background: #0c4787;
    opacity: .8;
}
.q-no {
    width: 100px;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.q-content-before {
    padding-top: 40px;
  transition: .4s;
}

 .q-img05 {
    width: 80px;
    position: absolute;
    top: 180px;
    left: 50px;
}
.q-img06 {
position: absolute;
    top: 150px;
    left: 50px;
    width: 180px;
}
.q-img04 {
    width: 90px;
    position: absolute;
    right: 150px;
    top: 180px;
}
.q-img02 {
    width: 170px;
    position: absolute;
    top: 200px;
    left: 60px;
}
 .n01 .q-content-before, .n02 .q-content-before, .n03 .q-content-before, .n04 .q-content-before, .n05 .q-content-before, .n06 .q-content-before, .n07 .q-content-before {
  opacity: 0;
  transition: .4s;
   display: none;
}
  
.n01 .q-content-after,.n02 .q-content-after,.n03 .q-content-after,.n04 .q-content-after,.n05 .q-content-after,.n06 .q-content-after,.n07 .q-content-after {
  opacity: 1;
   display: block;
}
  
.q-content-after {
  opacity: 0;
  display: none;
}
.q-content-after .q-txt {
    padding-top: 24px;
    font-size: 30px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.05em;
}
  
  

  
  
  
.q-ico .st0{fill:#f7a848;}
.q-ico .st1{fill:#FFFFFF;}
.q-txt {
    font-size: 37px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.05em;
}
.q-kids {
    position: absolute;
    top: 20px;
    width: 140px;
    left: 54%;
    z-index: -1;
}
#q02 .q-kids {
    left: 25%;
}
#q03 .q-kids {
    left: 30%;
}
 #q05 .q-kids {
    left: 24%;
} 
   #q06 .q-kids {
    left: 24%;
} 
.modaal-wrapper ruby {
    position: relative;
}
.modaal-wrapper rt {
    font-size: 0.22em;
    text-indent: 0.4em;
    visibility: visible;
    position: absolute;
    text-align: center;
    width: 100%;
    left: 0;
    right: 0;
    top: 0em;
    letter-spacing: 0em;
}
  .ans-btn-wrap {
    display: flex;
    justify-content: space-between;
      margin: 26px 0;
}

.label {
    display: inline-block;
    padding: 0.8rem 0rem;
    border-radius: 40px;
    transition: all .2s;
    background: #ff682e;
    color: #fff;
    width: calc(50% - 6px);
    text-align: center;
    font-size: 22px;
      cursor: pointer;
}

.ans-en {
    width: 220px;
    height: 220px;
    position: absolute;
    border: #f7a848 solid 40px;
    border-radius: 110px;
    top: 250px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
}
.ans-detail {
  opacity: 0;
}
  .close {
    opacity: 0;
  }
  .ans .ans-detail {
 animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
    animation-delay:1s;
}
.ans .close {
 animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
    animation-delay:1s;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
  .ans .ans-en {
     animation-name:fadeUpAnime2;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
    animation-delay:1.4s;
    transform: scale(0.5, 0.5);
}
  @keyframes fadeUpAnime2{
  from {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  to {
    opacity: 0.2;
    transform: scale(1, 1);
  }
}
#q01 .label {  
background: rgb(248,129,43);
background: linear-gradient(0deg, rgb(247 168 72) 0%, rgb(247 168 72) 45%, rgb(250 185 105) 50%, rgb(250 185 105) 100%);
    border: #f7a848 solid 3px;
}
#q01 .label.select,#q02 .label.select,#q03 .label.select,#q04 .label.select,#q05 .label.select,#q06 .label.select,#q07 .label.select {  
background: rgb(255,0,14);
background: linear-gradient(0deg, rgba(255,0,14,1) 0%, rgba(255,0,14,1) 45%, rgba(255,33,46,1) 50%, rgba(255,33,46,1) 100%);
border: #f10000 solid 3px;
}
#q01 .q-ico .st0{fill:#f7a848;}
  
#q02 .label {  
background: rgb(55,187,222);
    background: linear-gradient(0deg, rgb(82 193 219) 0%, rgb(82 193 219) 45%, rgb(115 214 237) 50%, rgb(108 212 237) 100%);
    border: #52c1db solid 3px;
}
#q02 .q-ico .st0{fill:#52c1db;} 
.ico02 .q-ico .st0{fill:#52c1db;} 
#q02 .ans-detail span {color: #52c1db;}
#q02 .ans-en {border: #52c1db solid 40px;}
#q02 .close {background:#52c1db;}
#q03 .label {  
background: rgb(255,129,156);
background: linear-gradient(0deg, rgba(255,129,156,1) 0%, rgba(255,129,156,1) 45%, rgba(255,149,172,1) 50%, rgba(255,149,172,1) 100%);
border: #ff809c solid 3px;
}
#q03 .q-ico .st0{fill:#ff809c;} 
.ico03 .q-ico .st0{fill:#ff809c;} 
#q03 .ans-detail span {color: #ff809c;}
#q03 .ans-detail span {color: #ff809c;font-size: 56px;letter-spacing: -0.08em;}
#q03 .ans-en {border: #ff809c solid 40px;}
#q03 .close {background:#ff809c;}

#q04 .label {  
background: rgb(139,109,198);
    background: linear-gradient(0deg, rgb(158 125 211) 0%, rgb(158 125 211) 45%, rgb(178 149 224) 50%, rgb(171 141 220) 100%);
    border: #9e7dd3 solid 3px;}  
#q04 .q-ico .st0{fill:#9e7dd3;}
.ico04 .q-ico .st0{fill:#9e7dd3;} 
#q04 .ans-detail span {color: #9e7dd3;}
#q04 .ans-en {border: #9e7dd3 solid 40px;}
#q04 .close {background:#9e7dd3;}
  
#q05 .label {  
background: rgb(164,127,80);
    background: linear-gradient(0deg, rgb(175 157 117) 0%, rgb(175 157 117) 45%, rgb(204 187 148) 50%, rgb(203 184 144) 100%);
    border: #af9d75 solid 3px;
      font-size: 20px;
}
#q05 .label .sup {
    font-size: 13px;
}
#q05 .ans-detail span .sup {
    font-size: 40%;
display: block;
}


#q05 .q-ico .st0{fill:#af9d75;}
.ico05 .q-ico .st0{fill:#af9d75;} 
#q05 .ans-detail span {color: #af9d75;}
#q05 .ans-en {border: #af9d75 solid 40px;}
#q05 .close {background:#af9d75;}
  
#q06 .label {  
background: rgb(0,136,90);
background: linear-gradient(0deg, rgb(53 168 165) 0%, rgb(53 168 165) 45%, rgb(77 177 174) 50%, rgb(57 171 154) 100%);
    border: #35a8a5 solid 3px;}
#q06 .q-ico .st0{fill:#35a8a5;}
.ico06 .q-ico .st0{fill:#35a8a5;} 
#q06 .ans-detail span {color: #35a8a5;}
#q06 .ans-en {border: #35a8a5 solid 40px;}
#q06 .close {background:#35a8a5;}

#q07 .label {  
    background: linear-gradient(0deg, rgb(83 211 159) 0%, rgb(83 211 159) 45%, rgb(96 223 171) 50%, rgb(92 214 164) 100%);
    border: #53d39f solid 3px;}
#q07 .q-ico .st0{fill:#53d39f;}
.ico07 .q-ico .st0{fill:#53d39f;} 
#q07 .ans-detail span {color: #53d39f;}
#q07 .ans-en {border: #53d39f solid 40px;}
#q07 .close {background:#53d39f;}
  
  
.q-img03{
      position: absolute;
    z-index: 3;
    width: 150px;
    top: 100px;
    left: 50px;
}
  
  #q01 .q-img01{
    position: absolute;
    width: 200px;
    top: 170px;
    right: 80px;

}
  
  .lastans.close {
    display: none;
  }
   .close {
    transition: .3s;
  }
  #q01 .close:hover {
    background: rgb(59 53 47);
    transition: .3s;
  }
  #q02 .close:hover {
    background: rgb(59 53 47);
    transition: .3s;
  }
  #q03 .close:hover {
    background: rgb(59 53 47);
    transition: .3s;
  }
  #q04 .close:hover {
    background: rgb(59 53 47);
    transition: .3s;
  }
  #q05 .close:hover {
    background: rgb(59 53 47);
    transition: .3s;
  }
  #q06 .close:hover {
    background: rgb(59 53 47);
    transition: .3s;
  }
  #q07 .close:hover {
    background: rgb(59 53 47);
    transition: .3s;
  }

.q-img07 {
    position: absolute;
    width: 150px;
    right: 100px;
      top: 200px;
}





  .aikotoba{
    display: none;
    opacity: 0;
  }
  .lastans .aikotoba {
    width: 600px;
    padding: 70px 60px 0;
    background: #fff;
    position: absolute;
    display: block;
    z-index: 5;
    margin: 100px auto;
    left: 0;
    right: 0;
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
         animation-name:fadeUpAnime3;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
    animation-delay:1s;
    transform: scale(0.9, 0.9);
}


  

  @keyframes fadeUpAnime3{
  from {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }

  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}
  
  
  
.aikotoba .ill {
    position: absolute;
    top: -110px;
    width: 350px;
    left: -20px;
  /*transform: rotate(10deg);
 animation: animation .3s infinite alternate;*/
}
  

@keyframes animation{
  0%{
 transform: rotate(10deg);
  }
  100%{
  transform: rotate(20deg);
  }
}
  
  
  
  
  #q03 .ans-detail, #q05 .ans-detail,#q06 .ans-detail,#q07 .ans-detail {
    padding-top: 30px;
}
 .ans-btn-next {
     width: 98%;
    text-align: center;
    background: #094;
    border-radius: 8px;
    font-size: 20px;
    padding: 16px 0 13px;
    color: #fff;
    cursor: pointer;
    margin: 0 auto;
   border-bottom: 5px solid #00662d;
   transition: .4s;
   pointer-events: auto;
}

.ans-btn-next.distable {
    width: 98%;
    text-align: center;
    background: #ddd;
    border-radius: 8px;
    font-size: 20px;
    padding: 16px 0 13px;
    color: #959595;
   border-bottom: 5px solid #d0d0d0;
    pointer-events: none;
}
   .ans-btn-next.distable:hover {
    background: #ddd;
     transition: .4s;
  }
  .ans-btn-next:hover {
    background: #017635;
     transition: .4s;
  }
  
.tips {
    position: relative;
    text-align: center;
}
.tips a {
       padding: 6px 20px 8px 20px;
    position: relative;
    text-decoration: none;
    background: #fafbf4;
    display: flex;
    border-radius: 60px;
    font-size: 19px;
        margin: 10px auto 10px;
        width: 230px;
    justify-content: flex-start;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}
.tooltip {
opacity: 0;
  transform: .4s;
}
.select .tooltip {
opacity: 1;
  transform: .4s;
}
.tooltip p {
    padding-bottom: 20px;
    color: #f00;
    line-height: 1.4;
}

  .tips-ico {
       width: 27px;
    margin-right: 10px;
  }

  
  .ans .q-txt {
 padding-top: 24px;
    font-size: 30px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.05em;
}
   .ans-detail {
    text-align: center;
    padding-top: 60px;
}
  
 .ans-detail span {
    font-size: 60px;
    color: #f7a848;
   letter-spacing: -0.04em;
}
 .ans-detail p{
    text-align: left;
    padding-top: 50px;
    font-size: 18px;
}
.close {
    width: 160px;
    margin: 40px auto 10px;
    text-align: center;
    color: #fff;
background: rgb(255,122,0);
    border-radius: 40px;
    padding: 10px 0;
    cursor: pointer;
  transition: .4s;
}
 .close:hover {

transition: .4s;
} 
  .btn-otona a {
    font-size: 28px;
    padding: 18px 90px 18px 70px;
    background: #fff;
    display: inline-block;
    color: #3075da;
    border-radius: 6px;
    position: relative;
    font-style: italic;
    transition: .4s;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
 .btn-otona a:after {content:"+";
  position: absolute;
    top: 16px;
    right: 20px;
    font-size: 36px;
    color: #3075da;
           font-style: normal;
  }
  .btn-otona a:hover {
   
    background: #3075da;
   
    color: #ffffff;

}
  .btn-otona a:hover:after {content:"+";
  color: #ffffff;
  }
  .btn-otona a .otona-tag {
    width: 120px;
    position: absolute;
    top: -15px;
    left: 20px;
    transform: rotate(-12deg);
 animation: animation .8s infinite alternate;
}

@keyframes animation{
  0%{
 transform: rotate(-12deg);
  }
  100%{
  transform: rotate(-20deg);
  }
}
  
 #otona-guide {
background: url("../images/otona-bg.png");
    padding: 120px 0;
    text-align: center;
  background-size: cover;
}
 /* #otona{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -10;
    opacity: 0;
    transition: .4s;
    display: none;
  }
 #otona.active{
    z-index: 5;
    opacity: 1;
   transition: .4s;
   display: block;
  }*/
 .otona-content{
    width: 80%;
    margin: 0 auto;
    background: #fff;
    margin-top: 80px;
    border-radius: 10px;
   position: relative;
   z-index: 2;
       padding-bottom: 80px;
}
 .btn-close-tabiiku {
    width: 200px;
    border: #295e93 solid 2px;
    text-align: center;
    margin-bottom: 60px;
    display: block;
    border-radius: 50px;
    font-size: 18px;
    padding: 8px;
    margin: 0 auto 80px;
    color: #295e93;
   cursor: pointer;
}
  .btn-close-tabiiku:hover {
   background: #295e93;
    color: #fff;
}
  
  
  
.otona-hero {
    position: relative;
}
.otona-hero-title {
    position: absolute;
    bottom: 0;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    background: #3a7cbfe6;
    color: #fff;
  z-index: 2;
}
.otona-logo {
    width: 32%;
}
.otona-lead {
    width: 64%;
    font-size: 18px;
}
.otona-prof {
    width: 86%;
    margin: 80px auto;
    display: flex;
    justify-content: space-between;
}
.otona-prof-pic {
    width: 170px;
}
.otona-prof-txt {
    width: calc(100% - 200px);
}
.otona-prof-name {
    font-size: 24px;
    padding-bottom: 15px;
}
   .otona-prof-job {
   font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体", YuGothic, "メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.9;
    padding-bottom: 16px;
   
}
 .otona-prof-txt p {
   font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体", YuGothic, "メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.9;
    padding-bottom: 16px;
   font-feature-settings: "palt";
    letter-spacing: 0.1em;
   
}
  .otona-detail-item .txt p {
   font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体", YuGothic, "メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    font-weight: 400;
}
  
  
.otona-detail {
    width: 86%;
    margin: 0 auto;
    border-top: #dbdbdb solid 1px;
    padding-top: 60px;
}
.otona-detail-title {
    font-size: 30px;
    text-align: center;
    padding-bottom: 60px;
}
.otona-movie .otona-detail-title {
    padding-top: 60px;
    padding-bottom: 0px;
}


  .otona-hero-bg img {
    width: 100%;
        border-radius: 10px 10px 0 0;
  }
.otona-detail-item {
    padding: 40px;
    background: #e9e6dd;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
 .item-title {
    font-size: 24px;
    padding-bottom: 20px;
} 
  .otona-detail-item .txt {
    width: calc(60% - 16px);
}
.otona-detail-item .pic {
    width: calc(40% - 16px);
}
  
  .balloon0 {
    animation-name: balloon0;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
  
  @keyframes balloon0 {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-25px)
    }
}
  .balloon1 {
    animation-name: balloon1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.8s;
}
  
  @keyframes balloon1 {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-28px)
    }
}
  .balloon {
    animation-name: balloon;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
  
  @keyframes balloon {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}
    .balloon2 {
    animation-name: balloon2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
  
  @keyframes balloon2 {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-18px)
    }
}
      .balloon3 {
    animation-name: balloon3;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.6s;
}
  
  @keyframes balloon3 {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-12px)
    }
}
  
   .balloon.comp,.balloon2.comp, .balloon3.comp {
    animation-name:none;
  }
  .is-hidden.qmodal{
    display: none;
  }
  
div.vid_contents {
    width: 80%;
    text-align: center;
    margin: auto;
    padding: 5%;
}
video.vid_main {
width: 100%;

}
  
  
.tabiiku {
    position: relative;
    padding-right: 12px;
}
.tabiiku sup {
font-size: 60%;
    position: absolute;
    top: -4px;
    right: 2px;
}
  .otona-detail-title .tabiiku {
    position: relative;
    padding-right: 18px;
}
 .otona-detail-title .tabiiku sup {
    top: 0px;
}
.otona-prof-txt a {
    text-decoration: underline;
}

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



@media screen and (max-width:900px){
#hero {
    height: 70vh;
}
.quize-guide-detail {
    width: 66%;
}
.quize-guide-copy {
    margin: 0 auto 30px;
    font-size: 30px;
    padding-top: 60px;
}
  .guide-item-txt {
    font-size: 20px;
}
  .map-ico:hover {
    width: 11%;
}
  .comp .q-clear {
    width: 100%;
}
  .lastans .aikotoba {
    width: 60%;
  }
  .otona-content {
    width: 96%;
    margin-top: 20px;
  }
}
@media screen and (max-width:800px){
  
  
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  
  .fukidashi02 {
    width: 60%;
    position: absolute;
    right: -30%;
    top: -20%;
}
  .guide-item-txt {
    font-size: 18px;
}
  #quize-map {
    margin-top: 120px;
}
 .sec-title {
    font-size: 24px;
} 
  .map {
    width: 100%;
    margin-top: 30px;
}.ico01 {

}.ico02 {

}
  .ico03 {

}
  .ico04 {

}
  .ico05 {

}
  .ico06 {

}
  .ico07 {

}.map-ico {
    width: 80px;
    position: absolute;
    transition: .4s;
}
  .q-content {
    height: 100%;
    max-width: 640px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    padding: 150px 0 80px;
    z-index: 3;
}
  .q-content-inner {
    height: 100%;
    width: 100%;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0px 0px 20px -6px rgb(0 0 0 / 10%);
    z-index: 3;
    padding: 40px 40px 20px;
}
  .q-txt {
    font-size: 32px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.05em;
}.ans-detail span {
    font-size: 50px;

}
  .otona-content {
    width: 100%;
    margin-top: 0;
}
  .otona-hero-title {
    padding: 40px;
}
  .otona-logo {
    width: 44%;
    margin: 0 auto 24px;
}
  .otona-lead {
    width: 100%;
    font-size: 13px;
    line-height: 1.7;
}
  .otona-prof {
    width: 86%;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
}
  .otona-prof-pic {
    width: 100px;
}
  .otona-prof-txt {
    width: calc(100% - 130px);
}.otona-hero-title {
    padding: 40px;
    display: block;
}
  .otona-prof-name {
    font-size: 20px;
    padding-bottom: 15px;
}
  .otona-prof-txt p {
    font-size: 13px;
}.otona-detail-item {
    padding: 40px;
    background: #e9e6dd;
    border-radius: 8px;
    display: block;
    justify-content: space-between;
    margin-bottom: 30px;
}.otona-detail-item .txt {
    width: 100%;
    margin-bottom: 36px;
}
  .item-title {
    font-size: 18px;
    padding-bottom: 20px;
    text-align: center;
}
  .otona-detail-item .txt p {
    font-size: 14px;
    line-height: 2;
}
  .otona-detail-item .pic {
    width: 100%;
}
  div.vid_contents {
    width: 86%;
    text-align: center;
    margin: auto;
    padding: 5% 0 8%;
}
  .hotel-logo {
    width: 20%;
}
  .otona-hero-title {
    z-index: 2;
}
}
@media screen and (max-width:640px){
#hero {
    height: 50vh;
}

  .hotel-logo {
    width: 30%;
}
  .sec-hgroup {
        width: 70%;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
  #quize-guide {
    text-align: center;
}
  .quize-guide-kids {
    width: 90px;
    position: absolute;
    top: -25px;
    left: 6%;
}
  .sec-title {
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.08em;
    color: #3075da;
    border-top: #3075da solid 2px;
    border-bottom: #3075da solid 2px;
    padding: 13px 60px;
    display: inline-block;
    margin: 0 auto 30px;
}
.quize-guide-detail {
    width: 56%;
    display: block;
}
  .quize-guide-copy {
    width: 80%;
    margin: 0 auto 30px;
}.guide-item {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}
  #quize-map .quize-guide-kids {
    left: auto;
    right: 6%;
}

 
  #otona-guide {
    padding: 80px 0;
    text-align: center;
}
  .btn-otona a {
    font-size: 22px;
}
  .q-content {
    height: 100%;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 100px 0 80px;
    z-index: 3;
}
  .q-kids {
    position: absolute;
    top: 0px;
    width: 100px;
    left: 54%;
    z-index: -1;
}
  .q-no {
    width: 80px;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

  .q-txt {
    font-size: 26px;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.05em;
}
  .label {
    padding: 0.6rem 0rem;
    font-size: 19px;
}
 .q-content-inner {
    padding: 30px 30px 20px;
} 
  .ans .q-txt {

    font-size: 26px;
}
  .ans-en {
    width: 180px;
    height: 180px;
    top: 180px;
}.ans-detail span {
    font-size: 40px;
}.ans-detail p {
    text-align: left;
    padding-top: 50px;
    font-size: 15px;
}
  .close {
    margin: 20px auto 10px;
  }
  .ans-detail p {
    line-height: 1.7;
}

  .aikotoba .ill {
    position: absolute;
    top: -110px;
    width: 250px;
    left: -10px;
}
  .lastans .aikotoba {
    width: 75%;
}
  .btn-otona a:hover {
    font-size: 22px;
  }
  .btn-otona a:after {
    font-size: 28px;
}
  .otona-logo {
    width: 64%;
    margin: 0 auto 24px;
}
  .otona-prof {
    width: 80%;
    margin: 30px auto;
    display: block;
    justify-content: space-between;
}.otona-prof-pic {
    width: 100px;
    margin: 0 auto 20px;
}
  .otona-prof-txt {
    width: 100%;
}.otona-prof-job {
    font-size: 12px;
    padding-bottom: 0;
    text-align: center;
}.otona-prof-name {
    font-size: 20px;
    padding-bottom: 15px;
    text-align: center;
}
  .otona-prof-txt p {
    font-size: 12px;
}
  .otona-detail-title {
    font-size: 22px;
}
  .otona-detail-item {
    padding: 40px 24px 24px;
    margin-bottom: 24px;
}
  .btn-close-tabiiku {
    width: 200px;
    border: #2a5e92 solid 2px;
    text-align: center;
    margin-bottom: 60px;
    display: block;
    border-radius: 50px;
    font-size: 16px;
    padding: 8px;
    margin: 0 auto 0px;
    color: #2a5e92;
    cursor: pointer;
}
   .fukidashi01 {
    z-index: 2;
}
  .fukidashi02 {
    z-index: 2;
}
  .map-ico {
    width: 70px;
    position: absolute;
    transition: .4s;
}
  .ico01 {
    top: 30%;
    left: 50%;
}
  .ico07 {
    top: 18%;
    left: 18%;
}
  .ico03 {
    top: 40%;
    left: 12%;
}
.ico06 {
    top: 67%;
    left: 20%;
}  
  .ico04 {
    top: 75%;
    left: 42%;
}
  .ico05 {
    top: 62%;
    left: 53%;
}.ico02 {
    top: 59%;
    right: 20%;
}
  #q01 .q-img01 {
    position: absolute;
    width: 160px;
}
  .q-img06 {
    width: 150px;
}
  .q-img04 {
    width: 70px;
}
  .q-img03 {
    width: 120px;
}
  .q-content {
    width: 90%;
  }
}
@media screen and (max-width:450px){
  #hero {
    height: 40vh;
}
  .sec-hgroup {
    width: 80%;
}
  .quize-guide-kids {
    width: 90px;
    position: absolute;
    top: -25px;
    left: 0;
}.quize-guide-detail {
    width: 70%;
    display: block;
}
  .fukidashi02 {
    width: 50%;
    position: absolute;
    right: -15%;
    top: -20%;
}
  #quize-map .quize-guide-kids {
    left: auto;
    right: 0;
}

  .btn-otona a .otona-tag {
    width: 90px;
  }
  .btn-otona a {
    font-size: 22px;
    padding: 14px 50px 14px 30px;
}
  .btn-otona a:after {
    content: "+";
    top: 14px;
    right: 15px;
    font-size: 22px;
}
  .btn-otona a:hover {
    font-size: 22px;
}.tooltip p {
    padding-top: 10px;
    color: #f00;
    font-size: 13px;
}.label {
    padding: 0.4rem 0rem;
    font-size: 15px;
}
#q03 .label {
    font-size: 14px;
    letter-spacing: -0.05em;
}
  #q05 .label {
    font-size: 15px;
}
  .ans-btn-wrap {
    margin: 20px 0;
}
  .ans-btn-next {
   font-size: 18px;
    padding: 12px 0 7px;
}
  .ans-btn-next.distable {
    font-size: 18px;
    padding: 12px 0 7px;
}
  
  .ans-detail p {
    font-size: 14px;
}
  #q03 .q-kids {
    left: 20%;
}#q02 .q-kids {
    left: 15%;
}.q-content-before {
    padding-top: 30px;
    transition: .4s;
}
  .q-txt {
    font-size: 20px;

}
  .ans-detail span {
    font-size: 30px;
    letter-spacing: -0.02em;
}
  #q03 .ans-detail span {
    font-size: 28px;
}
  
  
  .lastans .aikotoba {
    padding: 20px 20px 0;
  }
  .aikotoba .ill {
    position: absolute;
    top: -110px;
    width: 200px;
    left: -10px;
}
  .item-title {
    line-height: 1.5;
}
  .modaal-inner-wrapper {
    padding: 40px 14px;
}
  .otona-hero-title {
    padding: 30px 20px;
    display: block;
}.map-ico {
    width: 50px;
    position: absolute;
    transition: .4s;
}.page-id {
    width: 36%;
    margin: 0 auto 0;
    position: absolute;
    left: 12%;
    right: auto;
    top: 28%;
    z-index: 3;
}.page-id.balloon1 {
    width: 56%;
    margin: 0 auto 0;
    position: absolute;
    left: auto;
    right: 5%;
    top: 50%;
    z-index: 3;
}.quize-guide-copy {
    margin: 0 auto 30px;
    font-size: 24px;
    padding-top: 60px;
}.quize-guide-kids {
    width: 90px;
    position: absolute;
    top: -28px;
    left: 20px;
}#quize-map .quize-guide-kids {
    left: auto;
    right: 20px;
    top: -36px;
}
  #quize-map .inner {
    padding-bottom: 0;
}
  .ico07 {
    top: 25%;
    left: 18%;
}
  .ico03 {
    top: 44%;
    left: 8%;
}
  .ico01 {
    top: 38%;
    left: 60%;
}.ico02 {
    top: 59%;
    right: 10%;
}.ico05 {
    top: 60%;
    left: 58%;
}.ico06 {
  top: 63%;}
    .ico04 {
    top: 70%;
    left: 42%;
}
  .q-content-inner {
    border-radius: 20px;
  }
  .q-img03 {
    position: absolute;
    z-index: 3;
    width: 90px;
    top: 80px;
    left: 30px;
}
  .btn-otona a {
    font-size: 18px;
}
  #hero {
    background: url(/tabiiku/assets/images/hero-bg2-sp.png?02) top center no-repeat;
    background-size: 100%;
    position: relative;
}#hero {
    height: 60vh;
}.page-id.balloon1 {
    width: 60%;
    margin: 0 auto 0;
    position: absolute;
    left: auto;
    right: 5%;
    top: 60%;
    z-index: 3;
}
  .q-content {
    width: 100%;
  }
  
  .tips a {
    font-size: 15px;
  }
  #q01 .q-img01 {
    position: absolute;
    width: 140px;
    top: 170px;
    right: 20px;
}
  .q-img02 {
    width: 120px;
    position: absolute;
    top: 180px;
    left: 20px;
}
  .q-img07 {
    position: absolute;
    width: 120px;
    right: 40px;
    top: 150px;
}
  .q-img06 {
    position: absolute;
    top: 110px;
    left: 30px;
    width: 110px;
}
  .q-img04 {
    width: 60px;
    position: absolute;
    right: 80px;
    top: 130px;
}
  .q-img05 {
    width: 80px;
    position: absolute;
    top: 140px;
    left: 30px;
}
  .page-id.balloon1 {
    width: 55%;
    margin: 0 auto 0;
    position: absolute;
    left: auto;
    right: 5%;
    top: 50%;
    z-index: 3;
}
  .page-id {
    width: 44%;
    margin: 0 auto 0;
    position: absolute;
    left: 6%;
    right: auto;
    top: 28%;
    z-index: 3;
}
  #quize-guide {
    padding-top: 0;
}
}

@media screen and (max-width:390px){
  .map-ico {
    width: 40px;
    position: absolute;
    transition: .4s;
}
  .sec-title {
    font-size: 18px;

}.quize-guide-copy {
    margin: 0 auto 30px;
    font-size: 20px;
    padding-top: 60px;
}
 .guide-item-txt {
    font-size: 15px;
} 

  .label {
    width: calc(50% - 3px);
  }
  .q-content-inner {
    padding: 30px 20px;
}.q-txt {
    font-size: 19px;
}
#q06 .q-kids {
    left: 14%;
}.otona-detail-title {
    font-size: 20px;
}.otona-detail-item {
    padding: 30px 20px 20px;
    margin-bottom: 20px;
}.otona-detail-item .txt p {
    font-size: 13px;
    line-height: 1.8;
}.quize-guide-kids {
    top: -26px;
    left: -20px;
    width: 80px;
}#quize-map .quize-guide-kids {
    left: auto;
    right: 0;
    top: -31px;
    width: 80px;
}
  .quize-guide-kids {
    top: -20px;
    left: 0;
    width: 80px;
}
  
  #quize-map .quize-guide-kids {
    left: auto;
    right: 10px;
    top: -25px;
    width: 80px;
}
  .q-img05 {
    width: 70px;
    position: absolute;
    top: 130px;
    left: 30px;
}
  
  
  
}

@media screen and (max-width:350px){
  .quize-guide-kids {
    width: 70px;
    position: absolute;
    top: -15px;
    left: 0;
}
 
  .btn-otona a {
    font-size: 18px;
    padding: 14px 50px 14px 30px;
}.otona-detail-title {
    font-size: 18px;
}.item-title {
    font-size: 16px;
    padding-bottom: 20px;
    text-align: center;
}
  
}