@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&display=swap');

/* CSS Document */
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
html {
	font-size: 62.5%;
}

/*-------------------- pankuzu */
#pankuzu ul {
	font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3″, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
	overflow: auto;
	padding: 0 10px;
	_zoom: 1;
}
#pankuzu li {
	float: left;
	list-style: none;
}
#pankuzu li+li:before {
	margin: 0 8px;
	content: '>';
}

/*-------------------- Frame */
#container {
	font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3″, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
	font-size: 1.4rem;
	line-height: 1.7;
	clear: both;
	zoom: 1;
	width: 100%;
	margin: 0 auto !important;
}
.wrapper {
	position: relative;
	clear: both;
	width: 1000px;
	margin: 0 auto;
}

/*-------------------- often used */
a {text-decoration: none !important;}
p,
li,
dt,
dd {
	text-align: inherit;
	text-justify: inherit;
}

/*-------------------- main visual */
#title {
	position: relative;
	background: url(../img/bg_main.jpg) no-repeat center center;
	background-size: cover;
}
h1.title_logo {
	clear: both;
	overflow: hidden;
	height: 600px;
	margin-bottom: 0;
	white-space: nowrap;
	text-indent: 100%;
	background: url(../img/title.png) no-repeat center;
}

/*-------------------- intro */
#intro {
	padding: 3em 0 0;
	background: #cdf5ff;
}
#intro ul.lead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#intro ul.lead li:first-child {
	background: url(../img/accent_01.png) no-repeat bottom;
	width: 562px;
}
#intro ul.lead li:last-child {
	width: auto;
	padding-bottom: 10px;
}
h2.catch {
	font-size: 3rem;
	line-height: 1.5;
	margin-bottom: 1em;
	color: #0056ca;
}
.under_yel {
	background: linear-gradient(transparent 65%, #ff0 0%);
	display: table;
}
#intro p {
	font-size: 1.8rem;
	font-weight: bold;
}

/*-------------------- Call Center */
.callcenter {
	padding: 1.5em 0 1em;
	color: #fff;
	background: #007227;
}
.callcenter ul.phone {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.callcenter ul.phone li:first-child {
	flex-grow: 1;
}
.callcenter h2 {
	font-size: 2.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: left;
}
.callcenter h2 span {
	display: inline-block;
}
.callcenter ul.phone li:nth-child(n+2) {
	width: auto;
	margin-left: 1em;
}
.callcenter ul.phone dt {
	font-size: 1.4rem;
	margin-bottom: .3em;
}
.callcenter ul.phone dt span {
	display: inline-block;
	color: #007227;
	font-weight: bold;
	border-radius: 4px;
	font-size: 1.2rem;
}
.callcenter ul.phone dd {
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.4;
}
.callcenter ul.phone a {
	color: #fff;
}
.callcenter ul.phone dd:nth-child(2):before {
	font-family: FontAwesome;
	padding-right: 7px;
	content: '\f3cd';
}
.callcenter ul.phone dd a {
	letter-spacing: 2px;
}

/*-------------------- recommendPlan */
#recommendPlan {
	padding: 5em 0 6em;
	background: url(../img/bg_golf.jpg) repeat-x top;
}
h2.secttl {
	font-size: 2.4rem;
	margin-bottom: 2em;
	text-align: center;
}
h2.secttl span {
	display: inline-block;
	margin-left: 0.5em;
}
ul.plan {
	display: flex;
	flex-wrap: wrap;
}
ul.plan li {
	position: relative;
	overflow: hidden;
	width: 31%;
	margin: 3em 1% 0;
	background: #fff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
}
ul.plan li:nth-child(-n+2) {
	width: 48%;
	margin: 0 1% 0;
}
p.photo {
	width: 100%;
	height: auto;
	position: relative; 
}
p.photo img {
	width: 100%;
	height: auto;
}
span.copyRight {
	font-size: 1.2rem;
	position: absolute;
	right: 10px;
	bottom: 10px;
	text-align: right;
	color: #fff;
}
ul.plan dl {
	padding: 1em;
}
ul.plan dt {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 1em;
	text-align: left;
}
ul.plan dd.look:before {
	font-family: FontAwesome;
	padding-right: .5em;
	content: '\f35d';
	color: #444;
}
ul.plan dd:last-child {
	font-size: 1.2rem;
	margin-top: 1em;
	text-align: left !important;
}
ul.plan .btn a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	text-indent: -1000px;
}
ul.plan .btn a:hover {
	opacity: .3;
	background: #fff;
}
ul.plan dd p {
	margin-bottom: .8em;
}


/*.destination,*/
.ball,
.schedule{
    font-size: 1.4rem;
    display: block;
}
.ball{
    border-top: 1px dotted #aaa;
    padding-top: .5em;
}
/*.destination:before*/
.ball:before{
    font-family: FontAwesome;
    padding: 0 .7em 0 0;
    /*content: '\f3c5';*/
    content: '\f450';    
    color: #444;
}
.schedule:before{
    font-family: FontAwesome;
    padding: 0 .7em 0 0;
    content: '\f133';
    color: #444;
}




/*-------------------- 2nd */
/*-------------------- bg */
#plan_a {
	position: relative;
	background: url(../img/sapporokokusaicc_00.jpg) no-repeat center center;
	background-size: cover;
	padding: 2em 0;
}
#plan_b {
	position: relative;
	background: url(../img/zuiencc_00.jpg) no-repeat center center;
	background-size: cover;
	padding: 2em 0;
}
#plan_d {
	position: relative;
	background: url(../img/chateraisecc_00.jpg) no-repeat center center;
	background-size: cover;
	padding: 2em 0;
}
#plan_e {
	position: relative;
	background: url("../img/otarucc_00.jpg") no-repeat center center;
	background-size: cover;
	padding: 2em 0;
}
h1.title_small {
	margin: 0 auto 1em;
	text-align: center;
	width: 198px;
}
h1.title_small img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
h2.planName {
	margin: 0 auto;
	text-align: center;
	font-size: 4.6rem;
	color: #FFF;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
}
h2.planName span {
	display: block;
}

/*-------------------- info */
#info {
	padding: 5em 0 4em;
	background: url(../img/bg_golf.jpg) repeat-x top;
}
h3.headline {
	font-size: 2.4rem;
	line-height: 1.4;
	margin-bottom: 1em;
}
h3.headline span {
	display: block;
}

#info ul.planDetail {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 3em;
}
#info ul.planDetail li {
	width: 48%;
}
#info ul.planDetail li span {
	display: inline-block;
}

#info ul.planDetail li p{
	text-indent: 1em;
    margin-bottom: 1em;
	font-size: 1.6rem;    
}
#info p.photo {
	width: 100%;
	text-indent: 0 !important;    
}
#info p.photo img {
	width: 100%;
	height: auto;
}



#info ul.facility {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#info ul.facility li {
	width: 32%;
}
#info ul.facility dt {
	font-weight: bold;
	font-size: 1.6rem;
	margin-bottom: .3em;
}
#info ul.facility dt span{
	display: inline-block;
}
table {
	border-collapse: collapse;
	margin: 1em 0;
	width: 100%;
}
table tr th {
	border: solid 1px #aaa;
	background-color: #DDD;
	padding: 5px;
	font-size: 1.4rem;
	font-weight: bold;
}
table tr th.ppRoom {
    text-align: center !important;
}

table tr td {
	border: solid 1px #aaa;
	padding: 5px;
	font-weight: normal;
	font-size: 1.6rem;
}
table tr td.price {
	font-size: 2rem;
	color: #F00;
    text-align: center;
    white-space: nowrap;
}
table caption {
	text-align: left;
	font-size: 1.4rem;
}

/*-------------------- booking */
#booking {
	padding: 4em 0 6em;
	background: url(../img/bg_scratches.png  ) repeat;
}
#booking ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#booking ul li {
	width: 48%;
}
#booking ul li.max {
	width: 100%;
}
.button a {
	font-size: 2rem;
	font-weight: bold;
	display: block;
	margin-top: 2.5em;
	padding: .8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
.button:active {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none;
}
.type_a {
	border-bottom: solid 4px #800011;
	border-radius: 6px;
	background: #d6001d;
}
h4.cat {
	font-size: 2rem;
	text-align: center;
	margin: 0 auto;
}
#booking ul.other {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 3em;
}
#booking ul.other li a:hover {
	opacity: .5;
}
#booking ul.other li img {
	width: 100%;
	height: auto;
}

/*-------------------- Page-top */
#page-top{
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 20px;
}
#page-top a{
    display: block;
    width: 80px;
    padding: 20px 0;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
    background: #ddd;
}
#page-top a:hover{
    text-decoration: none;
    background: #a5a5a5;
}