@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap');


/*****************************************
#loader-bg
*****************************************/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #3f9163;
  z-index: 999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
}

.loader {
  color: #ffffff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}





/*****************************************
common
*****************************************/



.c_key{
color: #1e906b!important;
}
.bg_key{
    background: #1e906b!important;
}
.c_sub {
    color: #fd8282!important;
}

.f_ZenMaru{
font-family: 'Zen Maru Gothic', sans-serif;
}
.f_Poppins{
	font-family: 'Poppins', sans-serif;
}

h2.ttl-icon:before{
	content:"";
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 10%;
    position: relative;
    display: block;
    margin: 0 auto 5px;
}


.catchphrase {
    font-size: 1.5vw;
    line-height: 1.4;
    letter-spacing: 5px!important;
    text-align: left;
    margin: 0 auto;
    display: block;
    z-index: 2;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	padding: 10px;
	white-space: nowrap;
    border-right: 1px #000 solid;
}


.line {
    height: 6px;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 0);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(191, 140, 13, 1) 6px, rgba(191, 140, 13, 1) 16px );
}

.line-box{
    padding-top: 40px;
    position: relative;
}
.line-box:before{
    content: "";
    background-image: url(../images/icon/line01.svg);
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background-size: cover;
}

.line-box.line-tree{
    padding-top: 55px;
    position: relative;
}
.line-box.line-tree:before{
	content: "";
    background-image: url(../images/icon/tree01.svg);
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.txt-box{
    position: relative;
    border-left: 2px #dcdddd solid;
    padding: 15px;
    margin: 10px 5px;
}
.txt-box:before,.txt-box:after{
	content: "";
    position: absolute;
    top: 0;
    left: -6px;
    height: 2px;
    width: 10px;
    background-color: #ddd;
}
.txt-box:after{
    top: auto;
    bottom: 0;
}

.line02{
	display:inline-block;
}
.line02:after{
	content: "";
    background-image: url(../images/icon/line02.svg);
    height: 15px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    position: relative;
    display: block;
    margin: 0 auto;;
}

.new-icon:before{
	content: "";
    background-image: url(../images/icon/new.svg);
	background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    display: block;
    margin: 0;
}


.cat-eng {
	font-size: 4vw;
    color: #c9bc9c;
    position: relative;
    z-index: 1;
}

.cat-eng:before {
    content: "";
}

.img-wide:before {
    content: "";
    width: 100%;
    background: #fff;
	height: 70px;
    display: block;
    position: absolute;
	top: -1px;
    left: 0;
	clip-path: polygon(51% 100%, 0 0, 100% 0);
}


.img-clip{
	position: relative;
}
.img-clip:before,.img-clip:after{
	content: "";
    background-image: url(../images/icon/line01.svg);
    position: absolute;
	top: 8px;
    left: 0;
    height: 5px;
    width: 35%;
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
    display: block;
}
.img-clip:after{
	top: auto;
    left: auto;
	bottom: 8px;
    right: 0;
}
.clip {
	position: relative;
    display: block;
    background: #999;
    -webkit-clip-path: polygon(0 7%,34% 7%,38% 0,100% 0,100% 93%,66% 93%,62% 100%,0 100%);
    clip-path: polygon(0 7%,34% 7%,38% 0,100% 0,100% 93%,66% 93%,62% 100%,0 100%);
}

.img-line{
	position: relative;
}
.img-line:before {
    content: "";
    border: 1px #ddd8d1 solid;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5px;
    left: 5px;
}


.spot-box {
    border: 2px #ec86af solid;
    border-right-width: 0!important;
    border-bottom-width: 0!important;
	padding: 20px!important;
}

.ttl_round{
    position: absolute;
    width: 100px;
    height: 100px;
    background: #000;
    top: -15px;
    right: -15px;
    border-radius: 9999px;
}
.ttl_round p{
    font-family: 'Caveat', cursive;
	font-size: 1.6rem;
    color: #fff;
    line-height: 95px!important;
}

.round-event{
    width: 250px;
    height: 250px;
    background: #000;
    border-radius: 9999px;
    position: relative;
}
.round-event .round-inner{
    font-size: 1.2rem;
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 85%;
    margin: 0 auto;
}
.round-event .round-inner .large{
	font-size:180%;
}
.round-event .round-inner .small{
	font-size:55%;
}

.round-spot{
    width: 150px;
    height: 150px;
    background: #000;
    border-radius: 9999px;
    position: relative;
	margin: 0 auto;
}
.round-spot .round-inner{
    font-size: 1rem;
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 85%;
    margin: 0 auto;
    line-height: 1!important;
}
.round-spot .round-inner .large{
	font-size:250%;
	margin-top: -10px;
    line-height: 1!important;
}
.round-spot .round-inner .small{
	font-size:90%;
}



@media screen and (max-width: 736px) {
	.catchphrase {
		font-size: 2.5vh;
	    writing-mode: horizontal-tb;
	    padding: 0px 0px 10px;
	}
	.catchphrase-sp {
		font-size: 2vh;
	    -ms-writing-mode: tb-rl;
	    -webkit-writing-mode: vertical-rl;
	    -o-writing-mode: vertical-rl;
	    writing-mode: vertical-rl;
	}
	.cat-eng {
	    font-size:6vh;
	}
	.img-wide:before {
	    height: 30px;
	}
	.txt-middle {
	    font-size: 1.2rem!important;
	}
	.txt-small {
	    font-size: 0.95rem!important;
	}
	.txt-xsmall {
	    font-size: 0.85rem!important;
	}
	.round-event {
	    width: 150px;
	    height: 150px;
	}
	.round-event .round-inner{
    font-size: 0.9rem;
	width: 95%;
	top: 55%;
	}
}

.slick-dots {
    position: absolute;
    bottom: -20px;
    right: 170px;
	right: 0;
    left: 0;
    width: auto;
}
.slick-dots li {
    list-style: none;
    display: inline-block;
    margin: 0 2px;
}
.slick-dots li button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    text-indent: -9999px;
    width: 12px;
    height: 12px;
    border-radius: 100px;
    cursor: pointer;
    background: #ddd;
}
.slick-dots li.slick-active button {
    background: #999;
}


.slick-arrow {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  border: none;
  padding: 0;
  display: block;
  width: 32px;
  height: 32px;
  z-index: 100;
  cursor: pointer;
  outline: none;
	background: #fff;
    border: 1px #999 solid;
  border-radius: 50%;
	bottom: -40px;
	top: auto;
	-webkit-transition: background 300ms;
	transition: background 300ms;
}

.slick-prev:before,
.slick-next:before{
	display:none;
}

.slick-arrow:hover {
	background: #999;
}
.slick-arrow.slick-next {
    right: 40px;
    
  }
.slick-arrow.slick-prev {
	right: 80px;
	left: auto
}
.slick-arrow.slick-prev::after {
  right: 7px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.slick-arrow::after {
  border: solid #999;
  border-width: 0 2px 2px 0;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right: 11px;
  top: calc(50% - 4px);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.slick-arrow:hover::after {
  border-color:#fff;
}


@media screen and (max-width: 767px) {
	.slick-arrow.slick-next {
		right: 10px!important;
	}
	.slick-arrow.slick-prev {
		right: 50px!important;
	}
	.slick-arrow {
	}
	.slick-dots {
	    right: 28%!important;
	    right: 0%!important;
	    bottom: -30px;
	}
}


/*****************************************
#kv
*****************************************/
#kv{
}

#kv:before{
	content: "";
}

#kv .base-img {
    padding-top: 45%;
    margin: 5px;
}
.kv01 {
    background-image: url(../images/index/kv/01.jpg);
}
.kv02 {
    background-image: url(../images/index/kv/02.jpg);
}
.kv03 {
    background-image: url(../images/index/kv/03.jpg);
}
.kv04{
    background-image: url(../images/index/kv/04.jpg);
}


#kv .img-box {
    padding-top: 50%;
    width: 100%;
    background-size: 110%;
    background-position: center center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: relative;
}
@media screen and (max-width: 736px) {
	#kv .swiper-slide-active .img-box,
	#kv .swiper-slide-duplicate-active .img-box,
	#kv .swiper-slide-prev .img-box,
	#kv .wiper-slide-duplicate-prev .img-box,
	#kv .swiper-slide-next .img-box .img-box,
	#kv .swiper-slide-duplicate-next .img-box{
	    animation-name: slide;
	    animation-duration: 6s;
	    animation-iteration-count: 1;
	    animation-timing-function: linear;
	}
	@-webkit-keyframes slide {
	    0% { background-position: left center; }
	    100% {background-position: center center; }
	}
}
#kv .swiper-pagination {
    position: absolute;
    text-align: right;
    zoom: 2;
}
#kv .swiper-pagination-bullet {
    opacity: 0.5;
    background: #fff;
}
#kv .swiper-pagination-bullet-active {
    opacity: 1;
    background: #2aa048;
}
.tgt {
	opacity: 0;
    display: inline-block;
    text-align: left;
    color: #fff;
    padding: 0.5rem 1rem;
    position: absolute;
    top: 20%;
    left: 5%;
    font-size: 2.6vw;
	text-shadow: 2px 2px 5px #60b680, -1px -1px 5px #60b680, 0px 1px 5px #60b680, 0px -1px 5px #60b680,2px 2px 5px #60b680, -1px -1px 10px #60b680, 0px 1px 10px #60b680, 0px -1px 10px #60b680;
	transition: all 2s;
z-index: 2;
}
.tgt span{opacity: 0;}


#page-logo {
	z-index: 3;
}

.page_logo_img {
	background-image: url(../images/index/logo.png);
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 60%;
    width: 100%;
	z-index: 3;
}



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

	#kv .img-box {
		padding-top: 70%;
	    background-size: cover;
	    margin: 0px;
	}
	.tgt{
	    font-size: min(1.2rem, 2vh)!important;
		top: 2%;
	    left: 2%;
	}
	#kv .swiper-slide-active .img-box,
	#kv .swiper-slide-duplicate-active .img-box,
	#kv .swiper-slide-prev .img-box,
	#kv .wiper-slide-duplicate-prev .img-box,
	#kv .swiper-slide-next .img-box .img-box,
	#kv .swiper-slide-duplicate-next .img-box{
	    animation-duration: 10s;
	}
}


/*****************************************
#index-navi
*****************************************/

ul.index-navi{
    justify-content: space-between;
	font-size: 1.1rem;
}
ul.index-navi li{
	width:calc(100%/4);
}
ul.index-navi li a{
	display: block;
	border-left: 2px #efe0b6 solid;
    padding: 1.5rem;
}
ul.index-navi li:first-child a{
	border-left:0px #efe0b6 solid;
}
ul.index-navi li a:hover{
	background: #fff9e8;
}

ul.index-navi li a:before{
	content:"";
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 18%;
    position: relative;
    display: block;
    margin: 0 auto 10px;
}
ul.index-navi li.fantasyforest a:before{
    background-image: url(../images/index/icon_fantasyforest.svg);
}
ul.index-navi li.guidemap a:before{
    background-image: url(../images/index/icon_pickup.svg);
}
ul.index-navi li.safety a:before{
    background-image: url(../images/index/icon_safety.svg);
}
ul.index-navi li.faq a:before{
    background-image: url(../images/index/icon_faq.svg);
}
ul.index-navi li span{
    font-weight: 700;
}
ul.index-navi li.fantasyforest span,
.c_fantasyforest{
	color:#27af7e;
}
ul.index-navi li.guidemap span,
.c_guidemap{
	color:#3f9163;
}
ul.index-navi li.safety span,
.c_safety {
	color:#8cc63f;
}
ul.index-navi li.faq span,
.c_faq {
	color:#05d0b4;
}

@media screen and (max-width: 736px) {
	ul.index-navi {
	    font-size: 0.7rem;
	    line-height: 1.2;
	}
	ul.index-navi li a {
	    padding: 1.5rem 0rem;
	}
	ul.index-navi li a:before {
	    padding-top: 45%;
	}

}

/*****************************************
.character
*****************************************/

.character-img{
	width: auto;
    padding-top: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
    position: relative;
    background-color: transparent;
}

.character01{
    background-image: url(../images/index/character/01.png);
	padding-top: 80%;
}
.character02{
    background-image: url(../images/index/character/02.png);
	padding-top: 145%;
}
.character02b:before{
	content:"";
    background-image: url(../images/index/character/02.png);
	padding-top: 145%;
}
.character03{
    background-image: url(../images/index/character/03.png);
	padding-top: 145%;
}
.character04{
    background-image: url(../images/index/character/04.png);
	padding-top: 120%;
}
.character05{
    background-image: url(../images/index/character/05.png);
	padding-top: 120%;
}
.character06{
    background-image: url(../images/index/character/06.png);
	padding-top: 125%;
}
.character07{
    background-image: url(../images/index/character/07.png);
	padding-top: 125%;
}

.character08{
    background-image: url(../images/index/character/04.png);
	padding-top: 42%;
}


/*****************************************

#fantasyforest

*****************************************/

#fantasyforest{
    background-image: url(../images/index/fantasyforest/bg.jpg);
	background-size: cover;
    background-position: center bottom;
}
#fantasyforest:before{
    content: "";
    background-color: #27af7e;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
}

#fantasyforest h2.ttl-icon:before{
    background-image: url(../images/index/icon_fantasyforest_w.svg);
}

.fantasyforest01{
    background-image: url(../images/index/fantasyforest/01.jpg);
	padding-top: 120%;
}

/*****************************************

#guidemap

*****************************************/

#guidemap{
    background-image: url(../images/index/pickup/bg.jpg);
}

.bg_guidemap{
	background-color:#3f9163;
}

#guidemap .c_gray {
    color: #d8d8d8!important;
}

#guidemap h2.ttl-icon:before{
    background-image: url(../images/index/icon_pickup.svg);
}
.point-box {
	position: relative;
    display: inline-block;
    padding: 2rem;
}
.point-box:before{
	content: "";
    background-image: url(../images/index/point-box.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.ttl-point:before{
	content:"";
    background-image: url(../images/index/icon_leaf02.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 15%;
    position: relative;
    display: block;
    margin: 0 auto 0px;
}

.guidemap00{
	background-image: url(../images/index/guidemap/map.png);
    padding-top: 100%;
    background-color: transparent;
}
.guidemap01{
	background-image: url(../images/index/guidemap/01.jpg);
    padding-top: 70%;
    background-color: transparent;
}
.guidemap01-01{
	background-image: url(../images/index/guidemap/01-01.jpg);
    padding-top: 70%;
    background-color: transparent;
}
.guidemap01-02{
	background-image: url(../images/index/guidemap/01-02.jpg);
    padding-top: 70%;
    background-color: transparent;
}
.guidemap01map{
	background-image: url(../images/index/guidemap/map01.png);
    padding-top: 100%;
    background-color: transparent;
}
.guidemap02{
    background-image: url(../images/index/guidemap/02.jpg);
    padding-top: 70%;
    background-color: transparent;
}
.guidemap02map{
	background-image: url(../images/index/guidemap/map02.png);
    padding-top: 100%;
    background-color: transparent;
}
.guidemap03{
	background-image: url(../images/index/guidemap/03.jpg);
    padding-top: 70%;
    background-color: transparent;
}
.guidemap03map{
	background-image: url(../images/index/guidemap/map03.png);
    padding-top: 100%;
    background-color: transparent;
}
.guidemap04{
	background-image: url(../images/index/guidemap/04.jpg);
    padding-top: 70%;
    background-color: transparent;
}
.guidemap04map{
	background-image: url(../images/index/guidemap/map04.png);
    padding-top: 100%;
    background-color: transparent;
}
.guidemap05{
	background-image: url(../images/index/guidemap/05.jpg);
    padding-top: 70%;
    background-color: transparent;
}
.guidemap05map{
	background-image: url(../images/index/guidemap/map05.png);
    padding-top: 100%;
    background-color: transparent;
}



a.mapline{
    display: block;
    position: relative;
}
a.mapline:before{
    content: "";
    width: 440px;
    height: 4px;
    background: #3f9163;
    position: absolute;
    transform: rotate(45deg);
    border: 2px #fff solid;
}
a.mapline:after{
    content: "";
    background: #3f9163;
    position: absolute;
     border: 2px #fff solid;
	border-radius: 99999px;
    width: 15px;
    height: 15px;
}
a.mapline.mapline01:before{
    width: 440px;
    height: 4px;
    right: -348px;
    top: 155px;
    transform: rotate(45deg);
}
a.mapline.mapline01:after{
    right: -285px;
    top: 300px;
}
a.mapline.mapline02:before{
	width: 100px;
    height: 4px;
    left: -50px;
    top: 50px;
    transform: rotate(0deg);
}
a.mapline.mapline02:after{
    left: -50px;
    top: 45px;
}
a.mapline.mapline03:before{
	width: 300px;
    height: 4px;
    left: -150px;
    top: 10px;
    transform: rotate(0deg);
}
a.mapline.mapline03:after{
	left: -160px;
    top: 5px;
}
a.mapline.mapline04:before{
    width: 300px;
    height: 4px;
    right: -150px;
    top: 10px;
    transform: rotate(-20deg);
}
a.mapline.mapline04:after{
    right: -140px;
    top: -43px;
}
a.mapline.mapline05:before{
    width: 170px;
    height: 4px;
    right: -90px;
    top: 70px;
    transform: rotate(-20deg);
}
a.mapline.mapline05:after{
    right: -100px;
    top: 34px;
}

@media screen and (max-width: 736px) {
a.mapline:before,
a.mapline:after{
	display:none;
}
}
/*****************************************

#safety

*****************************************/

#safety{
    background-color:#8cc63f;
}
#safety:before{
    content: "";
}
#safety h2.ttl-icon:before{
    background-image: url(../images/index/icon_safety_w.svg);
}


.ttl-safety:before{
	content:"";
    background-image: url(../images/index/icon_leaf.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 15%;
    position: relative;
    display: block;
    margin: 0 auto 0px;
}


#safety .img-round{
    padding: 2rem 1rem;
}



.safety01{
	background-image: url(../images/index/safety/01.jpg);
	  border-radius: 10px;
}
.safety02{
	background-image: url(../images/index/safety/02.jpg);
  border-radius: 10px;
}
.safety03{
	background-image: url(../images/index/safety/03.jpg);
  border-radius: 10px;
}

/*****************************************

#faq

*****************************************/

#faq{
    background-color:#05d0b4;
}
#faq:before{
    content: "";
}
#faq h2.ttl-icon:before{
    background-image: url(../images/index/icon_faq_w.svg);
}
#faq h4{
    border-left: 5px #fff dotted;
    padding-left: 10px;
    margin: 0.5rem auto;
}

.toggle_contents {
	border: 0px solid #d9d9d9;
}
.toggle_title {
	position: relative;
	padding: 0.5rem;
	cursor: pointer;
	text-align: center;
	background: #019b85;
    margin: 1rem 0 0;
	border-radius: 5px;
}
.toggle_title.selected {
    border-radius: 5px 5px 0 0;
}
.toggle_title p{
}
.toggle_title p span{
    font-size: 40%;
    display: inline-block;
    background: #007192;
    color: #fff;
    border-radius: 99999px;
    padding: 0.2rem 1.5rem;
    vertical-align: middle;
	line-height: 1.2;
	margin-left:5px;
}

.toggle_btn {
	position: absolute;
	top: 50%;
	right: 1%;
	transform: translateY(-50%);
	background: #ffc107;
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
.toggle_btn:before, .toggle_btn:after {
	display: block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
.toggle_contents dd {
	display: none;
	background: #fff;
	padding: 1rem;
	    border-radius: 0 0 5px 5px;
}

.toggle_contents:first-of-type dd{
	display: block;
}


dl.qa {
	font-size: 1.1rem;
    text-align: left;
    position: relative;
    display: block;
    overflow: hidden;
}
.qa  dt,
.qa  dd {
    line-height: 1.6;
    margin: 0px 0 0px 0px;
    list-style: none;
	list-style: none;
	padding: 1rem 2rem 1rem 2rem;
    position: relative;

}
.qa  dt {
    font-weight: 600;
    position: relative;
    z-index: 1;
    color: #fff;
    cursor: pointer;
	background: #05d0b4;
    margin: 0.5rem 0 0;
	border-radius: 5px;
}
.qa  dt.active {
    border-radius: 5px 5px 0 0;
}
.qa  dd {
	padding: 1rem 0.5rem 1rem 2rem;
	background: #fff;
	 border-radius:0 0 5px 5px ;
}

.qa  dt:before {
    content: "Q";
    position: absolute;
    color: #fff;
    top: 50%;
    left:0.5rem;
    transform: translateY(-50%);
font-family: 'Poppins', Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
font-size: 120%;
}
.qa dd:before {
	content: "A";
    font-weight: bold;
    color: #d12020;
    top: 2rem;
    left: 0.5rem;
    transform: translateY(-50%);
    position: absolute;
font-family: 'Poppins', Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
font-size: 120%;
}


.qa  dt:after {
	content: "";
    background: #e1e1e1;
    position: absolute;
	width: 200%;
    height: 100%;
    left: -18px;
    z-index: -1;
    top: 0;
}


.qa dt:after {
	content: "";
    clear: both;
    right: 1%;
    left: auto;
    background: transparent;
    width: auto;
    font-size: 1.5rem;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}
.qa dt.active:after {
	content: "-";
	font-size: 200%;
}

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

	dl.qa {
	    font-size: 0.9rem;
	    text-align: left;
	}
}














#tagline

#tagline:before{
}
#tagline:after{
}

#tagline .ttl{
	display: inline-block;
    position: relative;
}
#tagline .ttl p{
	font-size:120%;	
}
#tagline .ttl:before{
	content: "Early Summer Trip";
    font-family: 'Caveat', cursive;
    color: #c03f71;
    width: 100%;
    text-align: left;
    position: absolute;
    top: -70px;
    left: -60px;
    transform: rotate(-6deg);;
}


@media screen and (max-width: 736px) {
	#tagline .ttl:before {
	    top: -40px;
	    left: 0px;
	}

}



/*****************************************
#flower #ff7bac
*****************************************/


#flower .cat-eng:before {
    background: #ff7bac;
}
.ttl_round {
    background: #ff7bac;
}

#flower  .catchphrase {
    border-right: 1px #ff7bac solid;
}


#flower .main-img{
	padding-top: 70%;
}

.rose-area:before, .rose-area:after {
    content: "";
}
.rose-area:after {
    content: "";
}


.hydrangea-area:before, .hydrangea-area:after {
    content: "";
}

.flower01 {
	background-image: url(../images/index/flower/01.jpg);
}
.flower01-01 {
	background-image: url(../images/index/flower/01-01.jpg);
}
.flower01-02 {
	background-image: url(../images/index/flower/01-02.jpg);
}
.flower02 {
	background-image: url(../images/index/flower/02.jpg);
    padding-top: 130%;
}
.flower03 {
	background-image: url(../images/index/flower/03.jpg);
}
.flower04 {
	background-image: url(../images/index/flower/04.jpg);
}

.flower-passage01{
	background-image: url(../images/index/flower/flower-passage01.jpg);
    padding-top: 60%;
}
.show01 {
	background-image: url(../images/index/show/01.jpg);
    padding-top: 70%;
	border-radius: 10px;
}
.show02 {
	background-image: url(../images/index/show/02.jpg);
    padding-top: 70%;
	border-radius: 10px;
}
.show03 {
	background-image: url(../images/index/show/03.jpg);
    padding-top: 70%;
	border-radius: 10px;
}

.goods01 {
	background-image: url(../images/index/goods/01.jpg)!important;
    padding-top: 70%;
	border-radius: 10px;
}
.gourmet01 {
	background-image: url(../images/index/gourmet/01.jpg);
    padding-top: 70%;
	border-radius: 10px;
}
.gourmet02 {
	background-image: url(../images/index/gourmet/02.jpg);
    padding-top: 70%;
	border-radius: 10px;
}
.gourmet03 {
	background-image: url(../images/index/gourmet/03.jpg);
    padding-top: 70%;
	border-radius: 10px;
}

@media screen and (max-width: 736px) {
#flower .main-img{
	padding-top:65%;
}
}

/*****************************************
#enjoy #36ADA7
*****************************************/


#enjoy:before  {
    content: "";
    background-image: url(../images/index/rose02.svg);
    background-position: center top;
    background-size: 130%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#enjoy:after {
}
#enjoy .main-img{
}

.enjoy-spot{}
.enjoy-spot:before{
    content: "";
    width: 35%;
    padding-top: 35%;
    position: absolute;
    background-color: #e7ea73;
    border-radius: 9999px;
    display: block;
    top: 5%;
    right: -10%;
    left: 0;
    margin: 0 auto;
}
.enjoy-spot.enjoy-spot-r:before{
    right: 10%;
}

hr.rose-line {
    padding-top: 8%;
    width: 100%;
    position: relative;
    display: block;
    border: 0;
    margin: 0;
}
hr.rose-line:before {
	content: "";
    background-image: url(../images/index/rose.svg);
    background-position: center top;
    background-size: 90%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.enjoy01 {
	background-image: url(../images/index/enjoy/01.jpg);
	padding-top:65%;
}
.enjoy01-01 {
	background-image: url(../images/index/enjoy/01-01.png);
	padding-top:65%;
	background-color: transparent;
	background-size: auto 100%;
}
.enjoy02 {
	background-image: url(../images/index/enjoy/02.jpg);
	padding-top:65%;
}
.enjoy03 {
	background-image: url(../images/index/enjoy/03.jpg);
	padding-top:65%;
}
.enjoy04{
	background-image: url(../images/index/enjoy/04.jpg);
	padding-top:65%;
}



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

/*****************************************
#night #2E2B6B!
*****************************************/


#night .cat-eng:before {
    background: #2ebacc;
}
#night .main-img{
}


.night-area:before, .night-area:after {
    content: "";
}
.night-area:after {
    content: "";
}




.night01 {
	background-image: url(../images/index/night/01.jpg);
}
.night02 {
	background-image: url(../images/index/night/02.jpg);
}
.night03 {
	background-image: url(../images/index/night/03.jpg);
}
.night04 {
	background-image: url(../images/index/night/04.jpg);
    padding-top: 70%;
    border-radius: 10px;
}
.night05{
	background-image: url(../images/index/night/05.jpg);
    padding-top: 70%;
    border-radius: 10px;
}
.night06{
	background-image: url(../images/index/night/06.jpg);
    padding-top: 70%;
    border-radius: 10px;
}

.night07{
	background-image: url(../images/index/night/07.jpg);
    padding-top: 70%;
    border-radius: 10px;
}
.night08{
	background-image: url(../images/index/night/08.jpg);
    padding-top: 70%;
    border-radius: 10px;
}


@media screen and (max-width: 736px) {
	#night .main-img{
		padding-top:65%;
	}


}




/*****************************************
#stay #75af41
*****************************************/

#stay{
}
#stay:before{
	content: "";
}

.stay-area:before, .stay-area:after {
    content: "";
}
.stay-area:after {
    content: "";
}


.c_he {
    color: #330505!important;
}
.c_am {
    color: #0e1438!important;
}
.c_fv {
    color: #04351f!important;
}
.c_wm {
    color: #040d5f!important;
}
.c_hh {
    color: #000!important;
}
.stay01 {
	background-image: url(../images/index/stay/01.jpg);
}
.stay02 {
    background-image: url(../images/index/stay/02.jpg);
}
.stay03{
    background-image: url(../images/index/stay/03.jpg);
    padding-top: 50%;
}
.he01 {
    background-image: url(../images/index/stay/he/01.jpg);
}
.he02 {
    background-image: url(../images/index/stay/he/02.jpg);
}
.he03 {
    background-image: url(../images/index/stay/he/03.jpg);
}

.am01 {
    background-image: url(../images/index/stay/am/01.jpg);
}
.am02 {
    background-image: url(../images/index/stay/am/02.jpg);
}


.fv01 {
	background-image: url(../images/index/stay/fv/01.jpg);
}
.hh01 {
    background-image: url(../images/index/stay/hh/01.jpg);
}
.wm01 {
    background-image: url(../images/index/stay/wm/01.jpg);
}


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


	#stay .txt-middle {
	    font-size: 1rem!important;
	}
}



/*****************************************
#index-navi
*****************************************/

#index-navi {
}
#index-navi .flex-box {
    -ms-flex-wrap:nowrap;
    flex-wrap: nowrap;
}


.index-navi-item{
    width: 100%;
    position: relative;
    margin: 0 1%;
}
.index-navi-item:before,
.index-navi-item:after{
	content: "";
    width: 30px;
    height: 30px;
    background-color: #fff;
    position: absolute;
    left: -15px;
    top: -15px;
    z-index: 4;
    border-radius: 99999px;
}
.index-navi-item:after{
    right: -15px;
    left: auto;
}

.index-navi-item a::before{
	content: "";
    padding-top: 100%;
    padding-top: 80%;
    width: 100%;
    position: absolute;
    margin: 0 auto 0px;	
    top: 0;
    left: 0;
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.index-navi-item::after {
    content: "";
}
.index-navi-item a:hover::before {
	opacity: .8;
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.index-navi-item.toppage a::before{
    background-image: url(../images/index-navi/01.svg);
}
.index-navi-item.flower a::before{
	background-image: url(../images/index/flower/01.jpg);
	background-position: left 300%;
    background-size: 130%;
}
.index-navi-item.enjoy a::before{
	background-image: url(../images/index/enjoy/01.jpg);
background-position: center 150%;
    background-size: 140%;
}
.index-navi-item.night a::before{
	background-image: url(../images/index/night/01.jpg);
	background-position: center 150%;
    background-size: 140%;
}
.index-navi-item.stay a::before{
	background-image: url(../images/index/stay/01.jpg);
	background-position: left bottom;
    background-size: cover;
}




.index-navi-item a {
    padding-top: 100%;
    padding-top: 80%;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    display: block;
    z-index: 2;
	overflow: hidden;
}

.index-navi-item a:hover{
	opacity: .8;
}

.index-navi-item-inner {
	position: absolute;
    bottom: 0%;
    left: 0;
    right: 0;
	color: #fff;
}
.index-navi-item-inner p{
	font-size:1.3vw;
	font-size: max(14px, 1vw);
	font-size: max(14px, 1.2vw);
    line-height: 1.1!important;
	margin: 0 auto;
    padding: 0.5rem;
}
.index-navi-item-inner p span{
	font-size: 110%;
    display: block;
    margin: 0 0 2px 0%;
    line-height: 1!important;
    color: #ffffff;
    text-align: center;
}

.index-navi-item-inner p span{
	font-family: 'Viaoda Libre', cursive;
}

.index-navi-item.flower .index-navi-item-inner p{
	 background-color:#EA668C!important;
}

.index-navi-item.enjoy .index-navi-item-inner p{
	 background-color:#36ADA7!important;
}

.index-navi-item.night .index-navi-item-inner p{
	 background-color:#2E2B6B!important;
}

.index-navi-item.stay .index-navi-item-inner p{
	 background-color:#B59948!important;
}


.index-navi-item-inner.index-navi-item-inner-bottom {
	bottom: 5%;
    top: auto;
}


@media screen and (max-width: 736px) {
	#index-navi .flex-box {
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	}
	.index-navi-item {
		width: 47%;
	    margin: 1.5% 1.5%;
	}
	.index-navi-item:first-child {
	}
	.index-navi-item-inner {
	}
	.index-navi-item a {
		padding-top: 90%;
	}

	.index-navi-item:first-child a {
	}
	.index-navi-item:first-child::before {
	}

	.index-navi-item-inner p {
	    font-size: 1.8vh;
	   margin-left:0px;
	}
	.index-navi-item-inner p span {
    display: block;
    margin: 2px 0;
	}
	.index-navi-item-inner p span:nth-child(2){
		 margin: 2px 0;
	}

	.index-navi-item:before, .index-navi-item:after {
	    width: 20px;
	    height: 20px;
	    left: -10px;
	    top: -10px;
	}
	.index-navi-item:after {
	    right: -5px;
	    left: auto;
	}

}