@charset "euc-jp";
#toppage .cont {margin: auto; width: 98%; max-width: 1000px;}
#toppage  h2 { margin-bottom: 60px; text-align: center;}
#toppage  h2 b,
#toppage  h2 small { display: block;}
#toppage  h2 b {
	font-family: 'Noto Serif JP', serif;
	font-size:212%;
    font-weight: 500;;
}
@media only screen and (max-width:800px){
    #toppage  h2 { margin-bottom: 30px !important; padding:0 0 30px !important;  background-size: 120px auto !important;}
    #toppage  h2 b {font-size:137%;}
}


/* INFORMATION */
#toppage .information { padding-top:50px; background:linear-gradient(#fff,#d0e2ec);}
#toppage .information h2 { padding:50px; background: url("../../img/tit_info.png") no-repeat center bottom;}
#toppage .information .info_list { background: url("../img/wave_w.png") no-repeat center bottom;}
#toppage .information ul {overflow: hidden;}
#toppage .information ul li { margin: 0 25px !important;}
#toppage .information ul li a {
	display: block;
	color: #444;
	text-decoration: none;
}
#toppage .information .photo { position: relative; width:100%;}
#toppage .information .photo:before{
	display: block; content: ""; padding-top: 100%;
}
#toppage .information .photo img{
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	margin: auto; width: 100%; height: 100%; object-fit: cover;
	border-radius: 250px;
}
#toppage .information .mid {
	margin: 20px 10px 0;
	font-size: 112.5%;
	text-align: center;
}
#toppage .information .come {
	margin: 0 10px;
	padding: 10px 10px 20px;
	font-size: 87.5%;
}
#toppage .information .day {
	border-top:1px solid #ddd;
	margin: 0 10px;
	padding: 10px 0;
	font-size: 87.5%;
	text-align: center;
	color:#444;
}
#toppage .information .btn { 
	clear: both; margin: auto; padding:100px 0 !important; 
	max-width: 580px; overflow: hidden;
}
#toppage .information .btn p { float: left; width: 49%;}
#toppage .information .btn p + p { margin-left: 2%;}
#toppage .information .btn p a {
	display: block; padding: 10px;
	color: #fff; text-decoration: none; text-align: center;
	background: #074F83 url("../img/arrow.png") no-repeat 97% center;
	border-radius: 50px;
}
@media only screen and (max-width:800px){
    #toppage .information { padding:20% 0 5%;}
    #toppage .information .info_list { background: none;}
    #toppage .information ul li { margin: 0 10px !important;}
    #toppage .information .btn { 
         padding:10% 0 !important; 
    }
    #toppage .information .btn p { float:none; margin:10px auto !important; width: 80%;}
}



/* TOPICS */
#toppage .topics {
    position: relative;
    padding:150px 0 400px; 
    overflow: hidden;
    background: url("../../img/topics_bg.jpg") no-repeat center bottom;
    background-size: 100% auto;
}
#toppage .topics::before { 
    display: block; content:""; clear: both;
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 31px;
    background: url("../img/wave_b.png") no-repeat center bottom;
    background-size: 100% 31px;
    z-index: 1;
}
#toppage .topics .box { margin: auto; padding:30px 0; width:100%; max-width: 1300px;}
#toppage .topics .box + .box { margin-top:80px;}

#toppage .topics .box::after { display:block; clear:both; content:"";}
#toppage .topics .photo { position: relative; width: 50%;}
#toppage .topics .photo img { width: 100%; height: auto;}
#toppage .topics .photo::before {
	position: absolute; left:0; bottom: 0;
	width: 100%; height: 24px;
	display: block; clear: both; content:"";
	background:url("../img/wave_photo.png") no-repeat;
	background-size: 100% 24px;
	z-index:9999;
}
#toppage .topics .box:nth-child(odd) .photo { float:left;}
#toppage .topics .box:nth-child(odd) .photo img { border-top-right-radius:100px;}
#toppage .topics .box:nth-child(even) .photo { float:right;}
#toppage .topics .box:nth-child(even) .photo img { border-top-left-radius:100px;}
#toppage .topics .naiyou {  position: relative; top: -50px; float: right; width: 50%;}
#toppage .topics h3 { margin: auto; width: 285px;}
#toppage .topics .come { padding: 40px 0; font-size: 112.5%; text-align: center;}
#toppage .topics ul { margin: auto; width: 80%; max-width:450px; overflow: hidden;}
#toppage .topics ul li { float: left; width: 50%; padding: 5px;}
#toppage .topics ul li a { padding-left: 25px; color: #222; text-decoration: none;}
#toppage .topics .cate_food ul li a {background: url("../img/list_arrow1.png") no-repeat left center;}
#toppage .topics .cate_souvenirs ul li a {background: url("../img/list_arrow2.png") no-repeat left center;}
#toppage .topics .cate_activity ul li a {background: url("../img/list_arrow3.png") no-repeat left center;}
#toppage .topics .cate_event ul li a {background: url("../img/list_arrow4.png") no-repeat left center;}
#toppage .topics .cate_stay ul li a {background: url("../img/list_arrow5.png") no-repeat left center;}

#toppage .topics .photo::after,
#toppage .topics .naiyou::before,
#toppage .topics .naiyou::after {
    display:block; clear:both; content:"";
    position: absolute; z-index:9999;
	background-size: 100% auto !important;
}
#toppage .topics .box:nth-child(odd) .photo:after { right:-50px;}
#toppage .topics .box:nth-child(even) .photo:after{ left:-50px;}
#toppage .topics .cate_food .photo::after {
    bottom:-70px; right:0;
	width:278px; height:239px;
	background:url("../../img/kazar01.png") no-repeat;
}
#toppage .topics .cate_food .naiyou::before {
    top:-50px; right:-70px;
	width:244px; height:212px;
	background:url("../../img/kazar02.png") no-repeat;
}
#toppage .topics .cate_food .naiyou::after {
    bottom:-250px; right:150px;
	width:252px; height:253px;
	background:url("../../img/kazar03.png") no-repeat;
}
#toppage .topics .cate_souvenirs .naiyou::before {
    top:0; right:0;
	width:151px; height:164px;
	background:url("../../img/kazar04.png") no-repeat;
}
#toppage .topics .cate_souvenirs .naiyou::after {
    top:130px; left:30px;
	width:154px; height:203px;
	background:url("../../img/kazar05.png") no-repeat;
}
#toppage .topics .cate_souvenirs .photo::after {
    bottom:-70px; right:0;
	width:230px; height:132px;
	background:url("../../img/kazar06.png") no-repeat;
}
#toppage .topics .cate_activity .naiyou::before {
    top:-80px; left:-150px;
	width:190px; height:112px;
	background:url("../../img/kazar07.png") no-repeat;
}
#toppage .topics .cate_activity .naiyou::after {
    top:80px; right:-30px;
	width:204px; height:132px;
	background:url("../../img/kazar08.png") no-repeat;
}
#toppage .topics .cate_activity .photo::after {
    bottom:-30px; right:0;
	width:220px; height:145px;
	background:url("../../img/kazar09.png") no-repeat;
}
#toppage .topics .cate_event .naiyou::before {
    top:-100px; left:-50px;
	width:199px; height:235px;
	background:url("../../img/kazar10.png") no-repeat;
}
#toppage .topics .cate_event .photo::after {
    bottom:-50px; left:-100px;
	width:119px; height:310px;
	background:url("../../img/kazar11.png") no-repeat;
}
#toppage .topics .cate_stay .naiyou::before {
    top:0; left:-100px;
	width:150px; height:auto; aspect-ratio: 257 / 157;
	background:url("../../img/kazari16.png") no-repeat;
}
#toppage .topics .cate_stay .photo::after {
    bottom:-100px; left:-20px;
	width:180px; height:auto; aspect-ratio: 420 / 324;
	background:url("../../img/kazari17.png") no-repeat;
}

@media only screen and (max-width:800px){
	#toppage .topics { padding:0 0 7%;}
	#toppage .topics .box { padding:0;}
	#toppage .topics .box::after { display: none;}
	#toppage .topics .photo { float: none !important; width: 100%;}
	#toppage .topics .photo img { border-radius: 0 !important;}
	#toppage .topics .naiyou {float: none; top:0; padding:10% 5%; width: 100%;}
	#toppage .topics h3 {margin: auto; width: 200px;}
	#toppage .topics ul { margin: auto; width: 96%; max-width:450px;}
	#toppage .topics ul li { float:none; width:100%; padding: 5px;}
	#toppage .topics .cate_food .photo::after {
		bottom:-50px; right:inherit; left:7%;
		width:100px; height:90px;
	}
	#toppage .topics .cate_food .naiyou::before {
		top:150px; right:3%;
		width:150px; height:130px;
	}
	#toppage .topics .cate_food .naiyou::after {
		bottom:-100px; right:inherit; left:7%;
		width:130px; height:140px;
	}
	#toppage .topics .cate_souvenirs .naiyou::before {
		top:0; right:5%;
		width:100px; height:110px;
	}
	#toppage .topics .cate_souvenirs .naiyou::after {
		top:130px; left:30px;
		width:100px; height:140px;
	}
	#toppage .topics .cate_souvenirs .photo::after {
		bottom:-70px; left:5%!important;
		width:160px; height:132px;
	}
	#toppage .topics .cate_activity .naiyou::before { display: none;}
	#toppage .topics .cate_activity .naiyou::after {
		top:50px; right:inherit ; left:3%;
		width:120px; height:100px;
	}
	#toppage .topics .cate_activity .photo::after {
		bottom:inherit; top:-70px; right:5%!important;
		width:180px; height:130px;
	}
	#toppage .topics .cate_event .naiyou::before {
		top:50px; right:5%; left:inherit ; 
		width:100px; height:130px;
	}
	#toppage .topics .cate_event .photo::after {
		bottom:-50px; left:7% !important;
		width:70px; height:180px;
	}
	#toppage .topics .cate_stay .naiyou::before {
		top:150px; right:5%; left:inherit ; 
		width:90px;
	}
	#toppage .topics .cate_stay .photo::after {
		bottom:-50px; left:7% !important;
		width:120px;
	}

}



/* EVENT SCHEDULE */
#toppage .schedule {
	padding: 75px 0 0;
	background: #f1ebdf url("../../img/bg.jpg") no-repeat center top;
	overflow: hidden;
}
#toppage .schedule h2 { padding:50px; background: url("../../img/tit_event.png") no-repeat center bottom;}
#toppage .calendar { margin: 0 auto; width: 98%; max-width: 1000px; background:#fff; border-radius: 15px; overflow: hidden;}
#toppage .calendar ul.month { margin:40px auto; width: 400px; text-align: center; overflow: hidden;}
#toppage .calendar ul.month li { float: left;  font-weight:500; }
#toppage .calendar ul.month li a { color: #222; text-decoration: none;}
#toppage .calendar ul.month li.now { margin-right:20px; color: #227c8f; font-size: 175%; font-weight:700; }
#toppage .calendar ul.month li.today { margin: 0 20px; }
#toppage .calendar ul.month li.prev a { padding-left: 25px; background: url("../../img/calendar_arrow1.png") no-repeat center left;}
#toppage .calendar ul.month li.next a { padding-right: 25px; background: url("../../img/calendar_arrow2.png") no-repeat center right;}
#toppage .calendar ul.month li a:hover { color: #227c8f;}

/* week */
#toppage .calendar ul.week { clear:both; margin:0 4%; border-bottom:1px solid #ddd; overflow: hidden;}
#toppage .calendar ul.week li { float:left; width:13.2%; margin:0 0.5% 20px; text-align:center; font-size:75%;}

/* day */
#toppage .calendar ul.day { margin:0 4%; }
#toppage .calendar ul.day li {
	position: relative;
	float:left;
	margin:0.5%;
	padding:10px;
	width:13.2%;
	min-height:100px;
	background: #FFF;
	font-weight:bold;
	box-sizing: border-box;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}
#toppage .calendar ul.day li span { opacity: 0.5; font-family: 'Roboto', sans-serif;}
#toppage .calendar ul.day li:nth-child(1) span,
#toppage .calendar ul.day li:nth-child(7n+1) span { color: #ef6d74;}
#toppage .calendar ul.day li span.on { opacity:1.0;}
#toppage .calendar ul.day li span.on a { color: #222; text-decoration: underline;}
#toppage .calendar ul.day li a:hover { opacity: 0.7;}
#toppage .calendar ul.day li p+p { margin-top:5px;}
#toppage .calendar ul.day li p.day_1 { width: 97%;}
#toppage .calendar ul.day li p.day_2 { width: 222%;}
#toppage .calendar ul.day li p.day_3 { width: 350%;}
#toppage .calendar ul.day li p.day_4 { width: 470%;}
#toppage .calendar ul.day li p.day_5 { width: 600%;}
#toppage .calendar ul.day li p.day_6 { width: 720%;}
#toppage .calendar ul.day li p.day_7 { width: 850%;}
#toppage .calendar ul.day li p a { 
	position:relative;
	display: block;
	padding: 0 10px;
	color: #fff;
    font-size:87.5%;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
	background: rgba(0,171,232,0.85);
	border-radius: 50px; /* CSS3 */
	-webkit-border-radius: 50px; /* Safari,Google Chrome */
	-moz-border-radius: 50px;/* Firefox */
	z-index: 999;
	overflow: hidden;
}
#toppage .calendar ul.day li p.dayevent_1 a { background-color:#65a680;}
#toppage .calendar ul.day li p.dayevent_2 a { background-color:#227c8f;}
#toppage .calendar ul.day li p.dayevent_3 a { background-color:#eda751;}
@media only screen and (max-width:800px){
    #toppage .schedule { padding:10% 5%;}
    #toppage .calendar ul.month { margin:30px auto 20px; width: 200px;}
    #toppage .calendar ul.month li { float: left;  font-weight:500; }
    #toppage .calendar ul.month li a { color: #222; text-decoration: none;}
    #toppage .calendar ul.month li.now { float: none; margin:0 auto 10px; }
    #toppage .calendar ul.week li { margin:0 0.5% 10px;}
    #toppage .calendar ul.day { padding-bottom: 4%; overflow: hidden;}
    #toppage .calendar ul.day li { padding:0; width:13.2%; text-align: center; min-height:inherit; }    
    #toppage .calendar ul.day li span { display: block; padding: 10px;}
    #toppage .calendar ul.day li span.on { padding:0;}
    #toppage .calendar ul.day li span.on a { display: block; padding: 10px;}
    #toppage .calendar ul.day li p { display: none;}
}



/* OTHER */
#toppage .other { padding:75px 0; background: #f1ebdf; overflow: hidden;}
#toppage .other .map { float: left; width: 50%; height:400px;}
#toppage .other .sns { float: right; width: 48%;}
#toppage .other .map,
#toppage .other .sns_fb,
#toppage .other .sns_in { background:#fff; border: 1px solid #ddd; border-radius: 10px; overflow: hidden;}
#toppage .other .map iframe { width: 100%; height:400px;}
#toppage .other .sns_fb {}
#toppage .other .sns_in { margin-top: 20px;}
#toppage .other .sns_in img { width: 100%; height: auto;}
@media only screen and (max-width:800px){
	#toppage .other { padding:10% 5%;}
	#toppage .other .map,
	#toppage .other .sns { float:none; width:100%;}
	#toppage .other .sns { margin-top: 20px;}
}


/* BANNER */
#toppage .banner { padding:75px 0; background: #d8dde0; overflow: hidden;}
#toppage .banner ul {overflow:hidden;}
#toppage .banner ul li { float: left; width:23%; margin:1%;}
#toppage .banner ul li img { width: 100%; height: auto;}
@media only screen and (max-width:800px){
    #toppage .banner { padding:10% 5%;}
    #toppage .banner ul li { width:48%;}
}



/*====================================================================================================
  CALENDAR
====================================================================================================*/