@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP&display=swap");

/* ===========================
header
============================*/
.f_Oswald {font-family: 'Oswald', sans-serif;}
nav a { text-decoration: none; color: #000000; transition: 0.2s; }
nav a:hover { -webkit-filter: opacity(0.8); filter: opacity(0.8); color: #89a30a; }

@media screen and (min-width:651px){
.bttn_icon{margin-left:10px;z-index:100; float: right; display: inline-block; font-size: 90%;}
.bttn_icon a{text-decoration:none;padding:7px 2px 7px 7px;text-align:center;display:block;border-radius:50%;line-height:15px;background: #89a30a; color: #FFFFFF;transition:0.3s; font-size: 60%;}
.bttn_icon a:hover{text-decoration:none;background: #fff; color: #89a30a; }
}

@media screen and (max-width:650px){
.bttn_icon{display:none;}.bttn_icon a{display:none;}
}

/*fixed_nav*/
@media screen and (min-width:1250px){
	.fixed_nav{position:fixed;top:0;left:0;z-index:2;width:100%;transition:.5s;transform:translateY(-100%);}
	.is-show{transform:translateY(0);}
}

@media screen and (min-width: 1301px) {
.above_the_fold nav { display: flex; top: 0; z-index: 10; height: 70px; }
.above_the_fold .logo img { max-width:340px; width: 100%; }
	nav.topnavi dl { display: flex; display: -webkit-flex; justify-content:flex-end; align-items: center; -webkit-align-items: center; flex-wrap: nowrap; -webkit-flex-wrap: nowrap; width: 100%; margin-top: 0px;}
    
    nav.topnavi dl dd {margin:0; text-align: center;white-space: nowrap;}
   .reserve_box{ padding-left: 20px; display: block;}
	nav.topnavi ul { display: flex; display: -webkit-flex; justify-content: flex-end; align-items: center; }
	nav.topnavi ul li { margin: 0 3%; text-align: center;letter-spacing: 0.1em;}
    nav.topnavi ul li a {color: #000000; display: inline-block;  text-decoration:none;  position: relative;  transition: .3s; }
    nav.topnavi ul li a::after{  position: absolute;  bottom: -5px;  left: 0;  content: '';  width: 0;  height: 2px;  background-color: #89a30a;  transition: .3s;}
    nav.topnavi ul li a:hover::after{  width: 100%;}
    .h_navi {margin-left: 20px; display: flex;align-items: center;}
	.h_navi div { margin-right: 0px; text-align: center;}
	 a.btn_online {padding: 15px 15px 0px; letter-spacing: 0.1em;background: #89a30a; color: #ffffff; font-size: 110%;display: block; height: 55px;}
	 a.btn_online:hover {background: #ffffff; color: #89a30a; }
	
	.fixed_nav { position: fixed; top: 0; left: 0; z-index:9999; transition: .5s;background: #f2ece7; display: flex; z-index: 10; }
    
.fixed_nav .logo img { max-width:340px; width: 100%; }
.is-show { transform: translateY(0); }
.nav-check,.nav-btn{display:none;}
.nav-menu li.navi_none,.nav-menu li p.navi_none{display:none;}
.nav-menu li.logo img{display:none;}
.nav-menu li.reserve{display:none;}
}

@media screen and (max-width: 1300px) {
.above_the_fold nav { display: flex; top: 0; z-index: 10; height: 50px; }
.above_the_fold .logo img { max-width:200px; width: 100%; }
/*nav{position:absolute;top:0;width:100%;}*/
.h_navi, .reserve_box {display:none;}
    .nav-menu li span.navi_none{display:none;}
    .nav-menu li.navi_none{display:block;}
    .h_top {display: none;}
.topnavi{height: 50px;}
	nav{width:100%;z-index:10;}
	.topnavi.logo{vertical-align: middle; display: block; height: 50px; }
    .topnavi.logo img {width: 100%; max-width:100px;}
    .nav-menu li.logo img {width: 100%; max-width:170px;}
	.fixed_nav{display:none;}
	.nav-menu{position:fixed;top:0;right:0;transform:perspective(500px) rotateY(-90deg);opacity:0;}
	.nav-check{display:none;}
	.nav-btn{position:fixed;display:block;top:15px;right:20px;display:block;width:40px;height:40px;font-size:10px;text-align:center;cursor:pointer;z-index:15;}
	.nav-bar{position:absolute;top:0;left:0;display:block;width:40px;height:3px;background:#89a30a;transition:all .1s;transform-origin:left top;}
	.nav-bar.middle{top:11px;opacity:1;}
	.nav-bar.bottom{top:23px;transform-origin:left bottom;}
    
    .nav-menu{background:rgba(242,236,231,0.95);box-sizing:border-box;width:250px;height:100%;padding:0px 0;transition-property:all;transition-duration:.1s;transition-delay:0s;transform-origin:right center;overflow: auto;}
	.nav-menu li a{display:block;padding:10px 20px;transition:all .1s;text-decoration:none;font-size:90%; border-bottom: 1px dotted #666; color:#000000;}
    
.nav-menu li a.reserve{background:#89a30a;color:#fff;}
    
	.nav-menu  li a:hover,.nav-menu ul li a:hover font{color:#000;background:rgba(222,211,201,0.80);}
	.nav-btn:hover .nav-bar{background:#fff;}
	.nav-close{position:fixed;top:0;right:250px;width:100%;height:100vh;background:rgba(0,0,0,0);cursor:auto;transition-property:all;transition-duration:.1s;transition-delay:0s;visibility:hidden;opacity:0;}
	.nav-check:checked ~ .nav-menu{transition-delay:.1s;transform:none;opacity:1;z-index:2;}
	.nav-check:checked ~ .nav-btn .nav-bar.top{width:45px;transform:rotate(45deg);}
	.nav-check:checked ~ .nav-btn .nav-bar.middle{opacity:0;}
	.nav-check:checked ~ .nav-btn .nav-bar.bottom{width:45px;top:31px;transform:rotate(-45deg);}
	.nav-check:checked ~ .nav-close{transition-duration:1s;transition-delay:.1s;background:rgba(0,0,0,.5);visibility:visible;opacity:1;z-index:3;}
}


/* ------------------------
footer
------------------------*/

#footer {margin: 20px auto 0; width: 100%; height: 600px;}
#footer .content {display:flex; justify-content: center; margin: auto; flex-wrap: wrap; align-items: center;}
#footer .content  dt { width: 45%;position: relative; background: url(../../images/common/bg_footer.jpg)no-repeat; background-size: cover;color: #FFFFFF; height: 600px; }
#footer .content  dd { width: 55%; }
#footer .content  dt .f_info {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); width: 95%;}
.catch { font-size: 230%; margin-bottom: 50px; text-align: center; line-height: 200%;}
.c_name { font-size: 170%; margin-bottom: 20px; text-align: center;}
.f_link a{color:#ffffff; padding: 3px;}.f_link a:hover{color:#000000; background: #FFF; padding: 3px;}
.copyright { text-align: center; letter-spacing: 1px; font-size: 70%; clear: both; margin: 50px auto 0;}

@media screen and (max-width: 920px) {
#footer {height: 500px;}
#footer .content  dt { width: 100%; font-size: 80%; height: 400px;order: 2; }
#footer .content  dd { width: 100%;order: 1; }
.copyright { margin: 30px auto 0;}
}

/*page top*/
@media screen and (min-width:651px){
.pagetop01{position:fixed;bottom:10px;right:10px;}
.pagetop01 a{background:#89a30a;text-decoration:none;color:#ffffff;padding:10px;text-align:center;display:block;border-radius:50%;font-size:1.2rem;}
.pagetop01 a:hover{text-decoration:none;background:#332c1d;color:#c6a86f;}
}

@media screen and (max-width:650px){
#pagetop{display:none;}
#pagetop a{display:none;}}


/* ------------------------
google map
------------------------*/
.f_gmap { height: 600px;position: relative;}
.f_gmap iframe {	position: absolute;	left: 0;	top: 0;	height: 100%;	width: 100%;}
@media screen and (max-width:920px){
.f_gmap {	height: 0;	overflow: hidden;padding-bottom: 67%;position: relative;}}

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

/* ------------------------
common parts
------------------------*/
.subtitle { text-align: center; font-size: 1.15em; font-family:'Merriweather', serif; letter-spacing: 2px; }
.ff_merri { font-family: 'Merriweather', serif; letter-spacing: 2px; }
.ff_noto { font-family: 'Noto Sans JP', sans-serif; }
.eng_sm {font-variant: small-caps; font-family: 'EB Garamond', serif; letter-spacing: .1em;}

.title {	font-size: 180%;padding: 8px; margin: 0 auto 50px; text-align: center;}
.title .jpn {	font-size: 80%;	color: #89a30a;}
.title .eng {	font-size: 200%; letter-spacing: 0em; margin-bottom: 0px;font-variant: small-caps;}

.stitle {font-size: 200%; border-bottom: 2px solid #000000;	padding-bottom: 3px;margin-bottom: 20px;text-align: left;	clear: both;color: #000000;font-variant: small-caps;}
.stitle_jp {font-size: 160%; border-bottom: 2px solid #000000;	padding-bottom: 3px;margin-bottom: 20px;text-align: left; color: #000000;font-variant: small-caps;}
.c_caption { border-top: 3px #000000 double; border-bottom: 3px #000000 double; padding-top: 8px; padding-bottom: 8px; color: #000000; font-size: 1.2em; margin-bottom: 15px; }

@media screen and (min-width: 651px) {
.pr_text { letter-spacing: 1.5px; line-height: 170%; }
.sub_caption { font-size: 1.3em; }
}

@media screen and (max-width: 650px) {
.title .eng {font-size: 140%; letter-spacing: 0em; margin-bottom: 15px;font-variant: small-caps;line-height: 130%;}
.stitle {font-size: 160%;}
.pr_text { letter-spacing: 1px; }
.sub_caption { font-size: 1.2em; }
}

/* ------------------------
box
------------------------*/
/* basebox */
@media screen and (min-width: 1000px) {
	.container { min-width: 900px; }
	.limit_box { max-width: 1400px; padding: 30px; margin: 10px auto 50px auto; }
	.limit_box_sm { max-width: 1200px; padding: 0 30px; margin: 0px auto 70px auto; background: rgba(255,255,255,0.9); }
	.wide_box { margin: 0px auto 300px ; clear: both; position: static;}
	.sm_box { max-width: 1000px; padding: 0px; margin: 0px auto 0px auto; }
}

@media screen and (max-width: 999px) {
	.container {  }
	.limit_box { margin: 20px 3%; }
	.limit_box_member { margin: 20px 3%; }
	.wide_box { margin: 30px auto; }
}

/* ------------------------
content
------------------------*/
/*top*/
.main_visual_wrapper {position: relative; width: 100%;}
.bg_slider{height:800px;width: 100%;margin:0px auto 20px;}
.bg_slider .pr_copy {font-size:260%; text-align: center; font-weight: 500; color:#FFFFFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); width: 90%;text-shadow:0px 3px 3px #333333;}
.bg_slider .pr_copy div{margin-bottom:15px;}

.m_images {width: 100%; margin:0px auto 25px; } 
.m_images img {width: 100%;}

@media screen and (min-width: 701px)and (max-width:1249px){
.bg_slider{height:600px;width: 100%; max-width: 1299px; margin:0px auto 20px;}
.bg_slider .pr_copy {font-size:200%; line-height: 180%; }
    
.m_images {width: 100%; margin:0px auto 20px;} 
}
@media screen and (max-width:700px){
.bg_slider{height:300px;width: 100%; max-width: 650px; margin:0px auto 20px;}
.bg_slider .pr_copy {font-size:120%;line-height: 180%;  }
    
.m_images {width: 100%; margin:0px auto 20px;} 
}

.comp_sche{display:flex; justify-content: space-between; flex-wrap: wrap;}
.comp_sche li {width: 40%;text-align: right;}

.comp_sche01{display:flex; justify-content: space-between; flex-wrap: wrap;}
.comp_sche01 li {width: 45%;text-align: left;}

/* news */
.news_box {display: flex; flex-wrap: nowrap; justify-content: space-around; flex-wrap: wrap;}
.news_box dt {width:40%;} .news_box dd {width:55%;}
.news li { padding: 5px 5px 15px 5px; margin: 5px 0px 15px 0px;}
.news a{ color: #000; text-decoration: none; }
.news a:hover { color: #666; transition: 0.3s; }
.news .date { color: #BC0606; margin-right: 15px; }
.new_ico {	font-size:80%;	background-color: #BC0606;	color:#fff;	font-weight:bold;	padding:0.3em 0.5em;	line-height: 100%;	border-radius: 5px;}
.new_info{display:flex; flex-wrap: wrap;}.new_info li{width:32%;}
.tmbl_new_icon{color:#ffffff; margin-right: 5px; background:#BC0606; border-radius: 3px; padding: 0 3px; font-size: 90%;}

@media screen and (min-width: 651px) {
	.news ul li { margin: 0 5px; }
}

@media screen and (max-width: 650px) {
.news ul li { margin: 0 10px; }
.news_box dt, .news_box dd {width:100%; margin-bottom: 15px;}
.new_info li{width:48%;}
}

/* course_box */
.course_box { width:100%; margin: 0 auto 100px;position: relative; background: url(../../images/top/bg_course.jpg)no-repeat; background-size: cover;height: 900px;}
.course_box .content { position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); background: rgba(0,0,0,0.5); padding: 2%; display: flex; justify-content: space-between; align-items: center; flex-wrap:wrap;}
.course_box .content dt {width: 40%;}.course_box .content dd {width: 55%;}
.course_box .content .title_eng {font-size: 500%; color: #99ff66; margin-top:0px;font-variant: small-caps;}
.course_box .content .copy{ color: #FFFFFF; font-size: 150%; line-height: 200%;}
.course_box .content .txt{ color: #FFFFFF;line-height: 200%; font-size: 130%;}

/* onsen_box */
.onsen_box { width:85%; margin: 0 auto 100px; max-width: 1800px;}
.onsen_box .content {max-width:1400px; margin: 30px auto; display: flex; justify-content:center; flex-wrap: wrap;}
.onsen_box .content dt {margin-right: 3%;}.onsen_box .content dd {margin-top: 30px;}
.onsen_box .content .title_eng {font-size: 500%; color: #999999; margin-top:0px;font-variant: small-caps;}
.onsen_box .content .copy{ font-size: 150%; line-height: 200%; color: #999999;}
.onsen_box .content .txt{ line-height: 200%; font-size: 130%;}

/* restaurant_box */
.restaurant_box { width:100%; margin: 0 auto 100px;}
.restaurant_box .content {width:100%; margin: 30px auto; display: flex; justify-content:flex-start; align-items: center; flex-wrap: wrap;}
.restaurant_box .content dt {margin-right: 5%;width: 65%;}
.restaurant_box .content dt img {width: 100%;}
.restaurant_box .content dd {width: 25%;}
.restaurant_box .content .title_eng {font-size: 500%; color: #cc3333; margin-bottom:20px;font-variant: small-caps;}
.restaurant_box .content .copy{ font-size: 150%; line-height: 200%; color: #999999;}
.restaurant_box .content .txt{ line-height: 200%; font-size: 130%;}

@media screen and (min-width: 1500px){
.course_box .content { width:70%;}
.course_btn{display: none;}
}
@media screen and (min-width: 870px)and (max-width:1499px){
.course_box .content { width:90%;}
.restaurant_box .content { width:100%;font-size: 80%; }
.restaurant_box .content dt {margin-bottom: 5%;width: 100%;margin-right: 0%;}
.restaurant_box .content dt img {width: 100%;}
.restaurant_box .content dd {width: 90%; margin: 0 5%;}
.onsen_box .content { width:94%;padding: 30px 3%; font-size: 90%; }
.course_btn{display: none;}
}
@media screen and (max-width:869px) {
.course_box {height: 600px;}
.course_box .content { width:90%;padding: 30px 3%; font-size: 90%; }
.course_box .content dt {width: 100%;}.course_box .content dd {width: 100%;}
.course_box .content .title_eng,.restaurant_box .content .title_eng,.onsen_box .content .title_eng {font-size: 500%; text-align: center; margin-bottom:30px;line-height: 120%;}
.course_box .content .copy{font-size: 130%; line-height: 200%; margin-bottom: 20px;}
.course_box .content .txt{line-height: 170%; font-size: 100%;}

.onsen_box { width:100%; margin: 0 auto 100px; max-width: 1800px;}
.onsen_box .content { width:95%;font-size: 80%; }
.onsen_box .content dt {width: 100%;margin-right: 0%;}
.onsen_box .content dd {margin-top: 30px;width: 100%;}
.onsen_box .content .copy{ font-size: 150%; line-height: 200%; color: #999999; margin-top: 10px; text-align: center;}
    
.restaurant_box .content { width:100%;font-size: 80%; }
.restaurant_box .content dt {margin-bottom: 5%;width: 100%;margin-right: 0%;}
.restaurant_box .content dt img {width: 100%;}
.restaurant_box .content dd {width: 90%;padding: 30px 3%;}
    
.course_btn_sm{display: none;}
}


/* course */
.course_table{width:65%;}
@media screen and (max-width: 650px) {
.course_table{width:100%;}}
.course_title {border: 5px double #CCCCCC; padding: 0px 20px 20px 20px; margin: 30px 0px ; width: 300px; text-align: center;}
.course_title .hole_number { font-size: 200%; border-bottom: 2px solid #CCCCCC; margin-bottom: 10px;}

.fac_nav { 	display: flex;	display: -webkit-flex;	justify-content:flex-start;flex-wrap: wrap;	-webkit-flex-wrap: wrap;align-items: flex-end; margin-bottom: 50px; }
.fac_nav li{ width: 30%; text-align: center;margin-right: .5%; }
.fac_nav li a{ display: block; background: #ffffff; padding: 13px 5px; text-decoration: none; color: #072a4a; border-radius: 10px 10px 0 0;}
.fac_nav li a.select { background:#89a30a; color: #ffffff; padding: 20px 10px; font-size: 120%;}
.fac_nav li a:hover { background: #555; color: #FFF; }

/* hole_box */
.hole_box .hole_nav { display: flex; display: -webkit-flex; align-items: baseline; border-bottom: 2px solid #CCCCCC;  padding-bottom: 5px; margin-bottom:25px; }
.hole_box .hole_nav li { text-align: center; margin-right: 1%; width: 30%; }
.hole_box .hole_nav li a { display: block; background: #ffffff; padding: 10px 20px; text-decoration: none; color: #89a30a; border-radius: 5px 5px 0px; }
.hole_box .hole_nav li a.select { background: #89a30a; color: #ffffff; border-radius: 10px 10px 0 0;padding: 15px 20px; font-size: 140%; }
.hole_box .hole_nav li a:hover { background: #555; color: #FFF; }
.hole_title { font-family: 'Neuton', serif; }
.hole_box .swiper-container { background: rgba(255,255,255,1);}
.point{background: #005e39; color: #FFFFFF; padding: 5px 10px; margin-right: 10px; border-radius: 5px; white-space: nowrap; text-align: center; } 

@media screen and (min-width: 651px) {
.course_title {border: 5px double #CCCCCC; padding: 0px 20px 20px 20px; margin: 30px 0px ; width: 300px; text-align: center;}
.course_title .hole_number { font-size: 200%; border-bottom: 2px solid #CCCCCC; margin-bottom: 10px;}	
.hole_box { max-width: 1200px; margin: 0px auto; }
.hole_box .hole_nav li { font-size: 110%; }
.hole_box .layout_img { margin-top: 0%; }
.hole_box .swiper-slide {}
.hole_box .swiper-slide dl dt { width: 48%; }
.hole_box .swiper-slide dl dd { width: 48%; }
.hole_box .swiper-container .slide-inner { padding: 20px; }  
}

@media screen and (max-width: 650px) {
.course_title {border: 5px double #CCCCCC; padding: 0px 20px 20px 20px; margin: 30px 0px ; width: 80%; text-align: center;}
.course_title .hole_number { font-size: 200%; border-bottom: 2px solid #CCCCCC; margin-bottom: 10px;}	
.hole_box { margin: 50px 2%; padding-top: 50px; }
.hole_box .hole_nav li a { padding: 10px 10px; }
.hole_box .layout_img { margin-top: 20px; }
.hole_box .swiper-slide dl { display: block; }
.hole_box .swiper-container li .slide-inner { padding: 15px; }

}

.access_detail{flex-wrap: wrap;}
.access_detail dd{ width: 100%; margin: 0 3%;margin-bottom: 20px;}
@media screen and (max-width: 650px) {
.access_detail dd{ width: 44%; margin: 0 3%; margin-bottom: 20px;}}