@charset "UTF-8";
/* CSS Document */

body{
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:22px;
	line-height:180%;
	color:#454545;
	margin:0;
	padding:0;
	background-color:#fff;
    background: url("../img/bg.png") 0 0/100% auto;
    background-repeat: repeat;
	font-feature-settings: "halt";
}

a{
	color:#06F;
}
a:visited{
	color:#06C;
}
a:hover{
	color:#3399FF;
}

img{
	border:none;
    vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
table{
	width:100%;
    border-collapse: collapse;
}
table th,
table td{
	padding:.5em;
    border: 1px solid #00b3ec;
}
table th{
    background-color: #8dddf7;
    text-align: left;
}

table td iframe {
	width:100%;
	height: 30vw;
	margin-top: 2vw;
}

form input,
form textarea{
	padding:10px; 
	font-size:1.3em; 
	border:solid 1px #ccc;
	border-radius: 3px;
}
form input[type="radio"]{
}
form .form-error,
form .form-error p{
	text-align:center;
}
form .form-error ul{
	padding:0;
	color:#f00;
}
form .form-error ul li{
	display:inline;
}
form .form-error ul li:after{
	content:" / ";
}

.imgtxt{
	text-indent:-9999px;
	overflow:hidden;
}
.img-responsive{
    max-width: 100%;
    height: auto;
}
.clear{
	clear:both;
}
.red{
	color:#f00;
}
.white{
	color:#fff;
}
.no-margin{
	margin:0;
}
.center{
	text-align:center;
}
.right{
	text-align:right;
}
.mawarikomi-l{
	float:left;
	margin:0 12px 12px 0;
}
.mawarikomi-r{
	float:right;
	margin:0 0 12px 12px;
}
.strike{
    text-decoration: line-through;
}
.pc{
	display:inherit;
}
.smp{
	display:none;
}
.pc-center{/* PC時のみセンタリング */
	text-align:center;
}
.smp-center{
	text-align:left;
}
tr.pc{
	display: table-row;
}
figure{
    padding: 0;
    margin: 0;
}
.tategaki{
	writing-mode: vertical-rl;
	margin: 0 auto;
}
.marker-yellow{
    position: relative;
    padding: 0 1em;
}
.marker-yellow:after{
    content: "";
    height: .25em;
    background-color: rgba(0,145,191,1.00);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

.flex{
	margin-bottom:2em;
	display:flex;
	flex-wrap:wrap;
}
.flex .col-2,
.flex .col-3,
.flex .col-4,
.flex .col-5,
.flex .col-6,
.flex .col-7,
.flex .col-8,
.flex .col-9,
.flex .col-10{
	box-sizing:border-box;
	padding:0 0.5em; 
}

.col-6 a {
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.col-6 a:hover {
	opacity: .7;
}

.flex .col-12{
	box-sizing:border-box;
	padding:0 0.5em; 
	margin-bottom:2em;
}

.flex .col-2{/*5分割*/
	width:16.6%;
}
.flex .col-3{/*4分割*/
	width:25%;
}
.flex .col-4{/*3分割*/
	width:33%;
}
.flex .col-5{
	width:41%;
}
.flex .col-6{/*2分割*/
	width:49.9%;
}
.flex .col-7{
	width:59%;
}
.flex .col-8{
	width:67%;
}
.flex .col-9{
	width:75%;
	float:left;
}
.flex .col-10{
	width:83%;
}
.flex .col-12{
	margin-bottom:0;
	width:100%;
}

.flex_space{
    justify-content: space-between;
}

/*img*/

.img-responsive{
	height:auto;
	max-width:100%;
}
.img-full{
	width:100%;
	height:auto;
}


/* 全体レイアウト */

.contents{
/*	width:1100px;*/
	width: 77vw;
	display:block;
	margin:0 auto;
}
header{
	
}
footer{
	
}
nav#global{
    position: fixed;
	z-index: 999;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.9);
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 2em;
    display: none;
}
nav#global ul{
    display: flex;
    flex-direction: column;
    text-align: center;
    list-style-type: none;
    padding: 0;
    height: 100%;
    width:30%;
    margin: 0 auto;
}
nav#global ul li{
    margin: 1.5em 0 0 0;
    padding:0 0 1.5em 0;
    border-bottom: 1px solid #27B3EC;
}
nav#global ul li a{
    background: url("../img/icon_arrow.svg") no-repeat right center/auto 1em;
    padding-right: 2em;
    text-decoration: none;
}

nav.sns ul{
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav.sns ul li{
    margin-left:.75em;
}
nav.sns ul li:first-child{
    color: #fff000;
}
nav.sns ul li img{
    width:60px;
    height: auto;
}
h1.mainvis{
    margin-bottom: 2em;
}

.whitebox{
    background-color: #fff;
    padding: 2em 4em 4em 4em;
}
.yellowbox{
    background-color: #ffffdc;
    padding: 2em 4em 4em 4em;
}
h2.arrow{
    text-align: center;
    margin: 3em 0 1.5em 0;
    font-size: 3em;
    color: #00b3ec;
}
/*h2.arrow::before{

    content: url("../img/icon_arrow.svg");
    margin-right: .5em;
    display: inline-block;
    height:.8em;
    width: .8em;

}*/
.newsitem h2.arrow{
    font-size: 2em;
    line-height: 1.2em;
    margin-bottom: 2em;
}
.newsitem h2 .date{
    font-size: 0.7em;
    font-weight: normal;
}
.newslist>p {
    border-bottom: 1px solid #A2A2A2;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
.newslist>p:before{
    content: "・ ";
}

.newsitem img{
    max-width: 100%;
    height: auto;
}
strong.yellow{
	background-color: #ff0;
	font-size: 1em;
	padding: .5em 1em;
}
.photos img{
    border-radius: 8px;
    border: 3px solid #fff;
}
.what{
    padding: 1.5em;
    margin: 4em auto;
    background: url("../img/bg_map.png") no-repeat center center/contain;
}
.what p{
    font-size: 1.4em;
    font-weight: bold;
    text-shadow: 0 0 3px #fff;
    color: #00b3ec;
}
.steps{
    display: flex;
    flex-wrap: wrap;
    margin: 4em 0;
}
.steps .item{
    width:30%;
    margin-right: 5%;
    margin-bottom: 5%;
    background-repeat: no-repeat;
    background-size: auto 4em;
    background-position: 0 bottom;
}
.steps .item:nth-child(3n){
    margin-right: 0;
}
.steps .item:last-child{
    background-image: none;
}
.steps .item:nth-child(1){
    background-image: url("../img/icon_map.svg");
}
.steps .item:nth-child(2) {
    background-image: url("../img/icon_camera.svg");
}
.steps .item:nth-child(3) {
    background-image: url("../img/icon_goal.svg");
}
.steps .item:nth-child(4){
    background-image: url("../img/icon_checksheet.svg");
}
.steps .item:nth-child(5){
    background-image: url("../img/icon_trophy.svg");
}
.steps .item p.count{
    display: inline;
    background-color: #ff0;
    color: #00b3ec;
    font-size: 0.7em;
    font-weight: bold;
    padding: .25em;
}
.steps .item h3{
    color: #00b3ec;
    margin: 0 0 .5em 0;
    border-bottom: 1px solid #00b3ec;
    padding-bottom: .5em;
    
}
.steps .item h3+p{
    padding: 0 1em 0 2em;
    margin: 0;
    font-size: .9em;
    line-height: 145%;
    margin-bottom: 0;
    background: url("../img/icon_arrow3.png") no-repeat right center;
}
.steps .item:last-child h3+p{
    background-image: none;
}
.formbtns.flex{
	display: flex;
    gap:5%;
	width: 90%;
    margin: 1em auto;
	align-items: flex-start;
}
.formbtns>div{
    width:30%;
    margin-bottom: 1em;
    text-align: center;
}
.formbtns>div figure:first-child{
	background-color: #fff;
	margin-bottom: 1em;
}
.formbtns h3{
	font-size: 1.1rem;
	margin: 0;
}
.formbtns p{
	font-size: .7rem;
	margin: 0;
	text-align: left;
}
.formbtns .col-6 a{
	color: #06F;
}
ul.btns{
    display: flex;
    padding: 0;
    list-style-type: none;
    justify-content: center;
	align-items: center;
    gap:3%;
    flex-wrap: wrap;
    margin: 4em 0;
}
ul.btns li{
    width:30%;
}
ul.btns li a{
    display: block;
    font-size: 1.15em;
    background: #fff000 url("../img/icon_arrow2.svg") no-repeat right .5em center/auto 50%;
    padding: .5em .5em;
    border-bottom: 3px solid #ff9500;
    border-radius: 8px;
}
.youtube{
    text-align: center;
    margin: 4em 0;
}
.youtube p.caption{
    font-size: 1.2em;
    font-weight: bold;
    padding: .5em;
    color: rgba(41,193,240,1.00);
}
.youtube .item{
    display: flex;
    justify-content: center;
}

.sponsers1{
	display: flex;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	padding-left: 0;
	gap:2.5%;
}
.sponsers1 p{
	width: 75%;
	text-align: center;
}
.sponsers{
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	padding-left: 0;
    gap:2.5%
}

.sponsers:nth-child(1) p{
    width:30%;
}
.sponsers:nth-child(2){
    width: 80%;
    margin: auto;
}
.sponsers:nth-child(2) p{
    width:27%;
}
.sponsers:nth-child(3){
    width: 70%;
    margin: auto;
}

.sponsers p{
	width: 18%;
    margin: 0;
}

.yamamori {
	margin-left: 0vw !important;
}

.banana{
	margin-left: -3.5vw !important;
    margin-right: 36.5vw !important;
}

.waka{
	margin-left: -34vw !important;
    margin-right: 30vw !important;
}

.nobu {
	margin-left: -17vw !important;
}




footer.foot1{
    background-color: #fff000;
    padding: 2em 4em 0em 4em;
    position: relative;
}
footer.foot1::before{
    content: url("../img/footer_fig1.svg");
    display: block;
    width: 292px;
    position: absolute;
    right: 0;
    top:calc( -150px );
}
footer.foot1 h2{
    color: #27B3EC;
    font-size: 1em;
    padding: .5em 1em;
    background-color: #fff;
    display: inline;
}
footer.foot1 h3{
    color: #27B3EC;
    margin-bottom: 0;
}
footer.foot1 h3+h4{
    margin: 0 0 3em 0;
}
footer.foot1 .flex .col-6:last-child{
        text-align: right;
}
footer.foot1 nav.sns ul li:first-child{
    color: #29C1F0;
    font-size: 0.9em;
}

nav.sns ul li{
    margin-left:.75em;
}
nav.sns ul li:first-child{
    color: #fff000;
}
nav.sns ul li img{
    width:60px;
    height: auto;
}
footer.foot2{
    color: #fff;
}
footer.foot2 .brackets {
    display: flex;
    width: 90%;
}
footer.foot2 .brackets::before{
    content: "";
    border: 1px solid #fff;
    border-right: none;
    width:1em;
    border-radius: .5em 0 0 .5em;
}
footer.foot2 .brackets::after{
    content: "";
    border: 1px solid #fff;
    border-left: none;
    width:1em;
    border-radius: 0 .5em .5em 0;
}
footer .col-6 a{
    color: #06F;
}
strong {
    font-size: 1.4em;
    color: #e3007f;
}
.border-b{
    border-bottom: 1px solid #454545;
}
.back-b{
    background-color: #454545;
    color: #FFFFFF;
    padding: 0.2em;
}
.m-b1{
    margin-bottom: 4em;
}
.m-b2{
    margin-bottom: 6em;
}
.small{
    font-size: 0.8em;
}
.small2{
    font-size: 0.95em;
}

#qalist h2.catename{
    text-align: center;
    border-bottom: 1px dotted #00C0F0;
    max-width: 80vw;
    margin: 2em auto;
    padding-bottom: 1em;
}
#qalist .qaitem h3{
    cursor: pointer;
    background-color: #FF9500;
    color: #fff;
    padding: .5em;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}
#qalist .qaitem h3:before{
    content: "Q. "
}
#qalist .qaitem h3+div{
    padding: .5em 1em;
    border: 1px solid #A0A0A0;
    border-top: none;
    display: none;
    border-radius:0 0 8px 8px;
}
#qalist .qaitem:last-child{
    margin-bottom: 4em;
}
#qalist .qaitem div.a>p:before{
    content: "A. "
}
/*  ドロワーメニュー */

#smpbtn{
    position: fixed;
    right: 1em;
    top:1em;
    z-index: 9999;
    margin: 0;
}
#smpbtn a {
    background:transparent url(../img/smpbtn.png) no-repeat 0 0;
	text-indent:-9999px;
    display: block;
    width:55px;
    height: 55px;
    position: relative;
    z-index: 1000;
}
#smpbtn.close a {
    background-position: -55px 0;
}
#btns{
    position: fixed;
    top:10vh;
    right: 0;
	z-index: 9999;
}
#btns > p{
    margin-bottom: .5em;
    width:2.5vw;
    min-width: 35px;
}
.place{
	color: #fff;
	padding:0 0 4em 0;
}
.place>.flex{
	display: flex;
	justify-content: center;
	gap:2%;
}

.place h3 span{
	background-color: #fff;
	color: #00B3ED;
	padding: .5em 1em;
}

.alert{
	padding: 1em;
	color: #f00;
	border: 1px solid #f00;
	margin: auto;
	text-align: center;
}
#towntrek{
    width: 60%;
    margin: 4em auto;
    text-align: center;
    background-color: rgba(0,179,236,0.2);
    padding: 2em;
    border-radius: .5em;
}
#towntrek .flex{
    justify-content: center;
    align-items: center;
}
#towntrek p:first-child{
    color: #FF1A40;
    font-weight: 400;
}
#towntrek h2{
    color: #007DA4;
    border-bottom: 1px solid #007DA4;
    padding-bottom: .5em;
}
#towntrek p.left{
    text-align: left;
}
.hotel p.btn,
#towntrek p.btn{
    text-align: center;
    margin: 2em 0;
}
.hotel p.btn a,
#towntrek p.btn a{
    padding: 1em 1em;
    background-color: #fff;
    border-radius: 2em;
    text-align: center;
    border: 1px solid #007DA4;
    text-decoration: none;
}

.towntrek h2{
    font-size: 1.2em;
    text-align: center;
}
.towntrek .townlogos{
    display: flex;
    justify-content:center;
    gap:2em;
    align-items: center;
    margin: 4em 0;
}

section.hotel {
    display: block;
    width: 60%;
    margin: 2em auto;
    padding: 2em;
    border:1px solid #007FFF;
    background-color: rgba(255,208,0,0.36);
    border-radius: .5em;
    color: #ff0;
    text-align: center;
}
.hotel h2{
    color: #00a0e9;
    font-size: 2em;
    letter-spacing: .1em;
    margin-bottom: 4em;
}

.newsitem p{
    border-bottom: 1px solid #ccc;
    padding-bottom: 2em;
    margin-bottom: 2em;
}

@keyframes kaisaimessage{
	0%{
		transform: translate(0,-4rem);
	}
	100%{
		transform: translate(0,0);
	}
}

#kaisaimessage{
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(0,-10rem);
	
	animation-name: kaisaimessage;
	animation-delay: 750ms;
	animation-duration: 750ms;
	animation-fill-mode: forwards;
    
    display: none;
}
#kaisaimessage .mess{
	background-color: rgba(1,93,122,.80);
	text-align: center;
	font-size: 1.2rem;
	width: 100vw;
	padding: .5em;
	font-weight: bold;
	color: #ff0;
	position: relative;
	margin: 0;
}
#kaisaimessage .mess p{
	margin: 0;
}

.yokoku{
	border: 1px solid #FF7400;
	background-color: #fff;
	padding: 0.5em;
	text-align: center;
	margin: 4em 0 8em;
}