@charset "utf-8";

/*-----------------------------------------------------*/
/* PC版 基本スタイル
/*-----------------------------------------------------*/

.clearfix {display: block;}
.sp {display:none;}
#container{
    width:100%;
    margin: 0 auto 0;
    text-align:center;
	font-size: 20px;
}

.inner{
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.course_inner {
	width: 100%;
	background-color: #0a3753;
	padding: 2em 0 2em 4%;
	box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}

ul#gnavi.menu6 li{width:15%;}

.attention{
	color:red;
	font-weight:bold;
}

.textmin{
	font-family: "Crimson Text", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.textyuu {
	font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
	font-weight: 600;
}

img {
    -webkit-backface-visibility: hidden;
}


/*-----------------------------------------------------*/
/* パンくずエリアのスタイル
/*-----------------------------------------------------*/

div#breadSns{
  /* max-width:980px; */
  margin:0 auto;
  padding:0;
  height:32px;
}

/*     パンくず
------------------------------------------*/

div#bread{
	float:left;
	margin:6px 0 0 5px;
}

.wrap{display: none;}/*折り返し用*/

/*    IE用　　*/
div#bread{
	margin/*\**/: 0 0 0 5px\9;
}


/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/

.mainvisual{
	padding: 0;
	margin: 0 auto -60px;
	max-width:100%;
	height:100%;
	background-image: url(/images/htmls/wagc/2023/bg_mainvisual.jpg);
	background-position: center;
	background-size:cover;
}
.mainvisual img{
	max-width: 100%;
}

/*-----------------------------------------------------*/
/* h2 スタイル
/*-----------------------------------------------------*/

h2 {
	font-size: 45px;
	margin-bottom: 0.6em;
	line-height: 1.4;
	color:#4dd8ff;
}
h2 span {
	font-size: .5em;
	letter-spacing: 0.1em;
	color: #f5f97b;
	font-weight: lighter;
}
.inner .text {
	font-size: 110%;
	margin: 4em auto 6em;
	line-height: 1.5;
}

/*-----------------------------------------------------*/
/* プランの特徴 エリア*/
/*-----------------------------------------------------*/

.introduction {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	margin-bottom: 4em;
	/* align-items: center; */
}

.introduction div {
	border: 2px solid #0b3582;
	padding: 0.7em 0.3em 0;
	border-radius: 20px;
	-ms-flex:0 1 auto;
}
.introduction div:not(:nth-child(4n+4)) {
    margin-right: 1.2%;
}

  .introduction p {
	  font-size: 17px;
	  margin-bottom: 2%;
	  margin-top: 7%;
  }

.introduction img {
	width: 100%;
}
.new_line950 {
	display: none;
}

/*-----------------------------------------------------*/
/* 対象ゴルフ場 エリア*/
/*-----------------------------------------------------*/
.course_grid {
	display: flex;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;
	justify-content: center; 
}

.course_grid div {
	width: 30%;
	margin-bottom: 0.5em;
}

.course_grid div/*:not(:nth-child(3n+3))*/ {
	margin-right: 1.3%;
  }

.course_grid #final {
	width: 90%;
	margin: 2em 10%;
	display: flex;
}

.course_grid #final img {
	width: 85%;
}

#final p {width: 40%;
		  margin-top: 3em;
		 font-size: 120%;}

.course_grid p {
	line-height: 1.6em;
}

.area {
	background-color: #66ccff;
	color: #0a3753;
	line-height: 2.3em;
	font-size: 120%;
	padding: 0.3em 15px;
	margin-left: -3%;
}

.date {color: #66ccff; 
	  font: 110%;
	  display: inline-block;}

.course_grid img {
	width: 100%;
}
  .course_grid img:hover{
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	transform: translateY(-5px);
	transition-duration: 0.5s;
  }
.course_grid p {
	margin-top: 0.4em;
	color: #fff;
}


#holiday {
	font-size: 110%;
	padding-top: 0.3em;
	width: 100%;
	margin: 2em auto;
}

.holiday_course {
	width: 45%;
	margin: 1em auto;
	display: inline-block;
}

#holiday div {
	width:43%;
}


/*-----------------------------------------------------*/
/* 要素の順番表示 */

.introduction div, .course_grid div {
    opacity: 0;
    transform: translateY(20px);
	transition: opacity .7s, transform .7s;
	color: #000;
	font-size: 18px;
	margin-bottom: 1em;
}

/*スクロールした時に追加されるクラス*/
.introduction div.fadein, .course_grid div.fadein{
    opacity: 1;
	transform: translateY(0); 
}


/*-----------------------------------------------------*/
/* text-area スタイル
/*-----------------------------------------------------*/
.text-area > p{
	line-height: 1.6;
}
p.att-text {
	font-weight: 600;
	color: red;
}

/*-----------------------------------------------------*/
/* ボタン スタイル
/*-----------------------------------------------------*/

ul.btn-area {
	padding-bottom:50px;
	margin: 0 auto;
	width:50%;
}

ul.btn-area a {
	color: #fff;
	text-decoration: none;
	transition:.5s all;
	display: block;
	margin: 2em auto;
	padding: 1em 0;
	position: relative;
}

ul.btn-area li.btn a {
	width: 20em;
	background-color: #d62568;
	border-radius: 20em;
}
ul.btn-area li.btn_bk a {
	width: 10em;
	background-color: #8e8e8e;
	border-radius: 20em;
}
ul.btn-area li.btn a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .7em;
    height: .7em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 1.3em;
}


text-area mt50 {
	font-size: 120%;
}



/*　終了対応　*/
.end_text {
    display: block;
    font-size: 40px;
    background-color: #e2e2e2;
    padding: 0.3em 0;
    margin: 0.2em auto 0.8em;
    text-align: center;
	font-weight: bold;
	font-family: "游ゴシック", "Yu Gothic";
}


/*--------------------------------------------------------------------*/
/* レスポンシブル対応
/*--------------------------------------------------------------------*/

@font-face {
    font-family: 'WebSymbolsgfeditRegular';
    src: url('/css/font/websymbols_gf-edit-webfont.eot');
    src: url('/css/font/websymbols_gf-edit-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/font/websymbols_gf-edit-webfont.woff') format('woff'),
         url('/css/font/websymbols_gf-edit-webfont.ttf') format('truetype'),
         url('/css/font/websymbols_gf-edit-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (max-width:1100px) {
	div#bread p.crumbs{
       line-height:1.4;/*折り返し用*/
    }
	.wrap{display:block;}/*折り返し用*/
	
	#container{
		width: 100%;
		font-size: 17px;
	}
	.inner{
		width: auto;
		margin: 0 10px;
	}
	.course_inner {
		padding: 0.5em 3% 0.5em 1%;
		width:100%;
	}
	h2 {
		font-size: 38px;
		margin: 0.7em 0 0.7em;
	}


	.introduction {
		flex-wrap: wrap;
		justify-content: center;
	}
	.introduction div {
		width: 35%;
	}
	.introduction div:not(:nth-child(4n+4)) {
		margin-right: 0;
	}
	.introduction div:not(:nth-child(2n+2)) {
		margin-right: 2.2%;
	}
	.introduction p {
		font-size: 18px;
	}
	
	.course_grid {
		position: relative;
		left:1.2%;
	}
	
	.course_grid div {
		width: 30%;
	}
	/*.course_grid div:not(:nth-child(3n+3)) {margin-right: 0;}*/
	/* .course_grid div:not(:nth-child(3n+3)) {margin-right: 2%;}*/
		.bp980 {display: block;}

	}

@media screen and (max-width:980px) {
	div#breadSns {width: 100%;}
	
	.mainvisual{margin-bottom: -30px;}
	
	#final .textyuu{ 
		margin: 1em 2em 0 1.5em;
	} 
	
	#final .area{ 
		display:block;
		width:78%;
		text-align: center;
		font-size:120%;
		
	} 
	
	#final P {
		margin-top:0.2em;
	}
	
	.course_grid .area {
		display:block;
		width: 66%;
		text-align:center;
		margin: 0 auto;
		padding: 1px 15px;
} 
	
	.course_grid .date {
		display: block;
		padding: 0;
		margin: 5px 0 -1.5em 0;
	}
	
	.course_grid p {
		margin-top: 0.5em;
	}
	
	.course_grid #final {
		right:13%;
		line-height: 1em;
	}
	
	.course_grid #final img{
		position:relative;
		bottom: 1.5em;
	}
	
	#sunhills .text {
		width:200%;
	}
	
	#sunhills .text .area {
		width:73%;
		position:relative;
		right:12%;
	}
	
	
@media screen and (max-width:950px) {
	.new_line950 {display: block;}
	.introduction div {width: 40%;}
	.introduction p {font-size: 2.4vw;}
	
	#final p {width:60%;
			  fomt-size:110%;}
	
	}
	
@media screen and (max-width:840px) {
	.course_grid .area {
		width: 64%;
		padding: 0.1em 1.8em;
		font-size:93%;
	}

	
	#final P {
		margin-top:-0.8em;
	}
	
	#holiday .area {
		width: 40%;}
}
}	
	
@media screen and (max-width:640px) {
    .sp {display: block;}
    .pc {display: none;}
    #footer {display: none;}
    #breadSns {display: none;}
    header.common .logo {float: left;width: 275px;}
    header.common .navi li {float: right;padding-top: 15px;}

	.top_logo img {
		width: 60%;
	}

	.mainvisual{margin-bottom: 0;}
	
    #container{
        width:100% !important;
        position:relative;
        margin: 0;
		font-size: 3.9vw;
    }

	.inner .text {
	margin: 0.7em auto 4em;
}
	
	.course_grid #final img {
    width: 100%;
	}
	
	.course_grid .text {
    margin: 1em 0 0 0;
	}
	
	.course_grid .date {
		margin-bottom: 0;
	}
	
	h2 {
		font-size: 6.5vw;
		margin: 0.7em auto;
	}
	
	.new_line950 {
		display: none;
	}

	.inner .text {
		font-size: 4vw;
	}
	.introduction p {
		font-size: 5.2vw;
	}		

	.introduction {
		width: 90%;
		margin: 0 auto;
		flex-wrap: wrap;
		margin-bottom: 10%;
	}
	.introduction div {
		width: auto;
		margin-bottom: 5%;
		padding: 0.5em 0.5em 0;
	}
	
	.introduction div:not(:nth-child(3n+3)) {
		margin-right: 0;
	}
	
	.course_grid #final {
    display: inline-block;
	width: 100%;
	left:-2%;
	}
	
	#final p { width: 100%; 
			  margin: -0.5em 0;
	}
	
	#final .textyuu{
	/*margin:0.8em auto 2em;*/
	margin: 0;
}
	
	.course_grid {
		justify-content: space-between;
	}
	
	/*.course_grid div:not(:nth-child(3n+3)) {
		margin-right: 0;
	  }*/

	.course_grid div {
		width: 48%;
	}
	
	.course_grid p{
	margin-top: 0.25em;
}
	
	.course_grid .area{
	text-align:left;
	padding: 1px 10px;
}
	
	.course_grid .date {
	padding: 0 0;
	margin-top: 10px;
	display: block;
}
	
	
	/*#final p {
		margin: -0.8em 0 0.7em 0.7em;
		font-size:100%;
	}*/

	#final .area {
		margin: 0 auto;
		padding: 0.05em 15px;
		width: 58%;
	}
	
	#final .date {
	font-size:105%;
	padding: 0;
	color:#66ccff;
	display: block;
}
	
	#final .textyuu {
		width:120%;
		margin: 0 auto;
		text-align: center;
		position: relative;
		right: 9%;
}
	
	.course_grid .area {
	display:inline-block;
	text-align:center;
	width:90%;
} 
	
	.end_text {
    display: block;
    font-size: 30px;
	}
	
	.course_grid .text {
    /*margin: 15px 0 0 0;*/
	margin: 0;
}
	
	.course_grid p{
	margin-top: 0.3em;
}
	
	#holiday {
		width: 100%;
		margin: 1em auto;		
	}
	
	.holiday_course {
		width: 50%;
		margin: 1em auto;
	}
	
	#holiday .area {
		width:40%;
	}
	
	#holiday div {
		width: 47%;
		display: inline-block;
		margin-bottom: 0.5em;
	}
	
	#holiday p {
		width: 100%;
		line-height: 1.5em;
		margin-bottom: -0.5em;
	}
	
	#kyusyu{
		margin: 0 auto 1.5em;
	}
	
	#kyusyu p {
		width:138%;
	}
	
	#kyusyu .area{
		width: 90%;
	}
	
	ul.btn-area a{
		right:30%;
	}

	@media screen and (max-width:420px) {
		
		.inner .text {
    		margin: 0.7em auto 3em;
		}		
		
		#final p {
			margin: -0.5em 0 0.5em 0;}
		
		.course_grid .area {
			width: 88%;
		}

		.course_grid #final {
			margin: 1em auto 0.5em;
		
		}
		
		#holiday{
			left:3%;
		}
		
}
}
}