@charset "UTF-8";

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

sm: 520px
md: 768px
lg: 960px
xl: 1280px
2xl: 1536px

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

/*--------------------------------------
Setting-PC
--------------------------------------*/
@media screen and (min-width: 961px) {
.spOnly {
    display: none;
    visibility: hidden;
}

/* Setting-font
=======================*/

.contact_box div.tel_box ul li span.pcOnly {
		font-size: 0.8em;
	}	
.contact_box div.tel_box ul li{
	font-size: 1.3em;
}
.contact_box div.tel_box ul li a{
	font-size: 1.6em;
}
#sec_member{
	padding-bottom: 200px;
	}	
#sec_address .tel{
text-indent: 4.2em;
}
.m_sns > a {
  width: 5.6rem;
  height: 5.6rem;
  line-height: 5.6rem;
	}
.m_sns > a > i {
		font-size: 5.4rem;
	}
	
/*=======================*/
	
.inner {
    max-width: 1080px;
}
	

footer .cr {
    margin: 1em;
}

/*h1.catchphrase img{
	width: 70%;
}
h1.catchphrase::before {
    top: 20px;
	}*/
#sec_info .date { 
  width: 10%;
}
#sec_info .title { 
	width: 90%;
}
#sec_info .bloglist {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
}
	
	

/* Setting-#固定背景の設定
=======================*/

#sec_colum.cd-fixed-bg{
    position: relative;
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
}

#sec_colum.cd-fixed-bg {
    height: 900px;
    padding: 5%;
}	
#sec_colum.cd-fixed-bg.cd-bg-1  {
  /*background-image: url('../images/bg_colum.png');
*/
	}	

.colum_text p > span {
	color: #fff;
	}
.colum_text p > span::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -2px;
  top: -2px;
  right: -2px;
  background-color: #163a02;
  z-index: -1;
}
	
/* Setting-#固定背景の設定
=======================*/
#sec_design .cd-fixed-bg{
    position: relative;
    /*min-height: 10vh;*/
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
}
#sec_design .cd-fixed-bg.cd-bg-1  {
  /*background-image: url('../images/bg_point04.jpg');
	background-size: contain;*/
}
	
#sec_design .cd-fixed-bg {
    height: 300px;
}

.hover .hover-text {
	padding: 30px 20px 0;
	}
/*#sec_address #iconArea {
	padding-top: 50px;
}*/
}


/*--------------------------------------
Setting-lg
--------------------------------------*/
@media screen and (max-width: 960px) {
	
.pcOnly {
    display: none !important;
    visibility: hidden;
}
html, body {
    min-width: 0;
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust : 100%;
}
	
body {
    font-size: 1.4rem;
    line-height: 1.6;
}

/* Setting-font
=======================*/
	
/*.contact_box div.tel_box ul li{
	font-size: 1.3em;
}*/
.contact_box div.tel_box ul li a{
	font-size: 1.3em;
}
	
	#sec_colum h3 img {
		background:rgba(4,61,21,0.6);
		background: rgb(4, 61, 21);
padding: 4px 2px 1px 4px;
	}
	

}

/*--------------------------------------
Setting-mid
--------------------------------------*/

@media screen and (min-width:769px) {
.switchSm {
		display: none;
		visibility: hidden;
}	
#sec_colum h3{
	width: 80%;
}
}
@media screen and (max-width:768px) {
	.switchPc {
		display: none;
		visibility: hidden;
	}
table.switchSm {width: 100% !important; font-size: 0.9em; margin: 10px 0 0;}
table.switchSm th{ width: 33%; padding: 8px;}	
table.switchSm td{ padding: 8px;}	
	

/* Setting-font
=======================*/


h4{
  font-size: 2em;
  font-size: 1.5em;
}
h5 span{
	display: block;
}	
h6,.f20 {
  font-size: 1.4em;
  font-size: 1.2em;
}

.ttlBig{
	font-size: 3em;
	font-size: 2em;
}
/*.ttl span{
	font-size: 12px;
}
.f20 {font-size: 20px;}	*/


/*=======================*/
	
/*.cd-fixed-bg {
    background-size: cover;
    background-attachment: scroll;
}
.cd-fixed-bg.cd-bg-1 {
    background-image: url('images/bg_sp.jpg');
}
.cd-fixed-bg.cd-bg-1 h1 {
    padding: 0 0 100px;
}
h1 img.h1_logo {
    width: 86%;
}
h1 span.wrap {
    width: 72%;
    font-size: 1.4em;
}

.pb0 {
    padding-bottom: 0 !important;
}*/

.col2 {
    width: 100%;
    float: none;
    padding: 0px 10px;
}
/*h1 {
    padding: 30px 0;
}*/
	
	
/*table {
    width: 720px;
}*/
.scroll-table {
    overflow: auto;
    white-space: nowrap;
    padding-bottom: 30px;
}
td.left {
    text-align: left;
}
/*#global-nav .inner {
    width: 100%;
}
.navi {
    padding: 10px 3px;
}
.navi .logo {
    display: block;
    margin: 0 auto;
}
.logo img {
    width: 200px;
    margin: 0 auto 10px;
}
nav {
    font-size: 0.9em;
    margin: 0 auto;
}
.infoBox .date {
    display: block;
    margin-bottom: 10px;
}
.opening {
}
.opening dl dt {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 20px;
}
#reserve ul#btn li {
    width: 80%;
}
	

#access .inner {
    width: 100%;
}
.spWrap {
    display: block;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
}
#access #ad {
    width: 100%;
}
#access #map {
    width: 100%;
    padding: 0;
}*/
footer .cr {
    border-top: 1px solid #c9c0ae;
    padding-top: 10px;
    width: 100%;
    margin: 1em 0 0;
}
.footer-navi ul {
    display: block;
	overflow: hidden;
}
.footer-navi ul li {
    margin: 3px 0;
    float: left;
}
	
#reserve .account dl dt {
    border-bottom: 3px solid #405F92;
}
#reserve .account dl dt, #reserve .account dl dd {
    width: 100%;
}
table#law {
    width: 100%;
}
table#law th, table#law td {
    border-bottom: none;
    width: 100%;
    display: list-item;
    list-style-type: none;
    padding: 10px;
}
table#law td {
    padding: 10px 20px;
}

	
	
/*--------------------------------------
Setting-#home
--------------------------------------*/
	.d-demo__item {
		margin: 0 1em 6em;
	}
	#sec_concept .flex_wrap div {
		width: 100%;
	}	
	
	#sec_concept .left h2 {
    position: absolute;
    top: 140px;
    left: 10px;
    vertical-align: top;
    width: 110px;
}
	.contact_box {width: 92% !important;}
	#contact2.contact_box {width: 100% !important;}
	.contact_box .flex_wrap div{
    width: 50%;
}
	.contact_box .flex_wrap div.btn_reserve,
	#contact2.contact_box .flex_wrap div.btn_reserve{
		border:none;
	}
		.contact_box .flex_wrap div.tel_box,
	#contact2.contact_box .flex_wrap div.tel_box{
    width: 100%;
			border-top: 2px solid #fff;
			padding: 1em;
	}
	#contact2.contact_box .flex_wrap div.tel_box{
			border-top: 2px solid #f3f1e9;
	}
	.contact_box div.btn_box a{
	font-size: 1em;
}
	.contact_box div.btn_box span {
		padding-bottom: 2em;
	}
	
	.contact_box .flex_wrap div.tel_box ul {
		float: left;
		width: 50%;
	}
	
	.contact_box div.tel_box ul li{
	font-size: 1.1em;
}
.contact_box div.tel_box ul li a{
	font-size: 1.3em;
}
		.contact_box .flex_wrap div.tel_box ul li span{
			display: block;
			padding-top: 5px;
	}
	#sec_colum {
		position: relative;
	}
	#sec_colum .spOnly{
		position: absolute;
		bottom: 0;
	}
	#sec_colum .flex_wrap {
		display: block;
	}
	#sec_colum.cd-fixed-bg {
		background-position: left center;
		background-size: contain;
	}
	#sec_colum .inner {
		padding-top: 360px;
		padding-bottom: 180px;
	}
	
	.colum_text {
		margin: 2em auto 4em;
	}
	#sec_colum h3{
		max-width: 440px;}
	
	/*.point01 {
		background: url(../images/bg_text_swing.png) bottom right no-repeat;
		    background-size: 45% auto;
	}
	.point03 {
    background: url(../images/bg_text_shortgame.png) bottom right no-repeat;
		    background-size: 45% auto;
	}*/
	
	.point_text {
    width: 100%;
    padding: 0 2em 6em;
		margin-top: -2em;
}
	
	.point01 .ttl-img,
	.point03 .ttl-img{
		display: block;
    text-align: right;
}
	.point02 .point_text {
    padding: 0 2em 2em;}
	.point02 .point02-photo {
	margin: 0 auto 4em;
}
	#sec_design .img-container:after {
  bottom: 0;
  width: 50%;
  height: 3em;
}
	
	#sec_target .hover {
		width: 48%;
	}
	.hover .hover-text .text1 {
		font-size: 1em;
	}
	.hover .hover-text .text2 {
		font-size: 0.9em;
	}
	#sec_member .price {
		width: 80%;
	}
	#sec_member .benefit {
		width: 100%;
	}
	#sec_qa {
		font-size: 0.9em;
	}
	
	
	#sec_reservation .register {
		padding: 20px 10px 5em;
	}
	#sec_reservation .flex_wrap .left {
		width: 100%;
	}
	#sec_reservation .flex_wrap .right {
		display: none;
		visibility: hidden;
	}
	ul#tab li {
	height: 60px;
	margin: 0 10px;
	background: #f3f1e9;
	width: 45%;
	font-size: 1em;
	padding: .7em 0 0;
}
	ul#tab li span {
		font-size: 10px;
	}
	.howto_photo {
		width: 50%;
		margin: 0 auto 20px;
		float: none;
	}
	.howto_text {
		width: 100%;
	}
	
	/*#sec_address p span {
		display: block;
	}
	#sec_address p span.text-small {
		display: inline-block;
	}*/
	#sec_address img {
		width: 90%;
		max-width: 340px;
		height: auto;
	}
}

/*--------------------------------------
Setting-sm
--------------------------------------*/

@media screen and (max-width: 520px) {
section {
    padding: 60px 0;
}
	#slider {
	background: url("../images/slide01_sp.jpg") center no-repeat;
	background-size: cover;
    height: 84vh;
	}
	header ul {
		right: 70px;
	}
	header ul li a {
	width: 130px;
	padding: 10px 10px;
}
	
	#home .logo_top{
		width: 100%;
		left: 0;
		right: 0;
		bottom: 0;
	}
	#home .logo_top img{
		width: 80%;
		
	}
	h1.catchphrase {
		left: 0;
		right: 0;
		top: 14vh;
		width: 100%;
	}
	h1.catchphrase img {
		width: 80%;
	}
	#sec_info .titleWrap {
		margin: 1em 0;
	}
	#sec_info .date,
	#sec_info .title { 
		float: none;
  width: 100%;
	}
	
	/*.contact_box .flex_wrap div.tel_box ul {
		float: none;
	}*/
	#sec_reservation .register {
		display: block;
	}
}

/*--------------------------------------
Setting-sm2
--------------------------------------*/

@media screen and (max-width: 390px) {
	h1.catchphrase::before {
    bottom: -4px;
	height: 76px;
}
	.contact_box .flex_wrap,
	footer .flex{
		display: block;
	}
	#contact1.contact_box {
		position: relative;
  width: 80% !important;
  width: 100% !important;
	  padding: 20px 0 0;
}
	#contact1.contact_box .flex_wrap {
  width: 92% !important;
		margin: 0 auto;
		
	}
	.contact_box .flex_wrap div,
	#contact2.contact_box .flex_wrap div{
		width: 100%;
		margin: 0 auto;
		border-right: none;
	}
	.contact_box .flex_wrap div.tel_box ul {
		float: none;
		width: 100%;
	}
	#sec_colum .inner {
		padding-top: 100px;
	}
	#sec_target .hover {
		width: 80%;
		margin: 0 auto 20px;
	}
.hover .hover-text {
	padding: 25px 5px 0;
	}	

}