@charset "utf-8";

/*-----------------------------------------------------*/
/* PC版 基本スタイル
/*-----------------------------------------------------*/
body {color: #000;}
.clearfix {display: block;}
.sp {display: none;}

#container{
	width:100%!important;
	margin:0 auto;
	text-align:left;
    overflow: hidden;/*追加*/
}
.inner{
	margin: 0 auto;
  box-sizing: border-box;
}

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

/* 改行のスタイル */
.br980_hide {display: block;}
.sp900,.br850,.br770,.br400 {display: none;}


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

div#breadSns{width:980px;margin:5px auto 0;padding:0;height:32px;}
div#bread{float:left;margin:6px 0 0 5px;}
div#bread p.crumbs{font-size:10px;}

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

/*     SNSボタン用
------------------------------------------*/

#snsBox{
/*	width:400px;*/
	float:right;
    margin: 5px 0px 0px 0;
	vertical-align: top;
}
/*    IE用　　*/
#snsBox{margin/*\**/: 0 0 7px 0\9;}
#snsBox ul li{float: left;padding: 0px;display: inline;}
#snsBox ul li.fb{margin: 0px 10px 5px 0px;}
#snsBox ul li.fb div{width:110px!important;}
#snsBox ul li.gg{margin: 0px 10px 5px -10px;}
#snsBox ul li.tw{margin: 0px 10px 5px -10px;}

/*-----------------------------------------------------*/
/* フォント
/*-----------------------------------------------------*/
p.lead{
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
}
/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/
.mainvisual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 100%; /* 適宜調整 */
  overflow: hidden;
}

.main_text {
  position: absolute;
  z-index: 2;
  margin-bottom: 3%; /* 下から少し上げる */
  max-width: 43%;
	left: 3%;
	width: 50%;
	
}

.main_image {
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: 60%;
}

.main_image img , .main_text img{
  width: 100%;
  height: auto;
}



.bg_green {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%; /* テキスト背景部分の幅 */
  height: 100%;
  background-image: url("images/bg_main.jpg");
  z-index: 0;
}

/* EASTテキスト（背景より上） */
.text_east {
  position: absolute;
  top: -8%;
  left: 2%;
  font-size: 13.5vw;
  color: #e6e7b0; /* 薄い色に */
  z-index: 1;
  font-family: "candara", sans-serif;
  font-weight: 700;
  font-style: normal;
  opacity: 0.3;
}

@media screen and (max-width:1800px) {
	
	.main_image{
		width: 60%;
	}
	
	.main_image img{
		width: 100%;
	}

	
	.main_text img{
		width: 100%;
	}
}

@media screen and (max-width:640px) {
	.main_image {
        width: 75%;
    }
	
	 .text_east {
        writing-mode: vertical-rl;
		left: -15%; top: -10px;
		font-size: 38vw;
    }
	
	.main_text{
		max-width: 95%;
		width: 95%;
		top: 75%;
	}
	
	.bg_green {
		width: 100%;
		top: 29%;
	}
	
	.mainvisual {
		position: relative;
		overflow: visible;
	}
}

/*EAST 左からフェードイン*/
.js-fade-left {
  padding: 10px;
  animation: fadeIn 2s ease 1s 1 normal backwards;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 0.3;
    transform: translateX(0);
  }
}

/*-----------------------------------------------------*/
/* リードタイトルとリード
/*-----------------------------------------------------*/

.lead_title {
  margin: 40px 0;
}

p.lead {
  margin: 0 auto;
  font-size: 1.2vw;
	line-height: 1.6;
  max-width: 80%;
  padding-bottom: 50px;
  text-align: left;
  color: #232323;
}

.inner{
	background-image: url("images/bg_main.jpg");
	background-repeat: repeat;
}

h2.lead_title{padding: 0px 10px;}
p.lead{padding: 70px 20px 30px 20px;}

@media screen and (max-width:1260px) {
	p.lead {font-size: 1.5vw; padding: 50px 0px 15px 0px;}
}

@media screen and (max-width:980px) {
	p.lead {font-size: 1.8vw; padding: 40px 70px; max-width: 100%;}
}

@media screen and (max-width:640px) {
	p.lead {font-size: 18px; padding: 65% 30px 1% 30px;}
}

@media screen and (max-width: 400px) {
	.select_ul li {font-size: 27px!important;}
	.select_ul {max-width: 270px!important;}
}
/*-----------------------------------------------------*/
/* ポイント
/*-----------------------------------------------------*/
.select{max-width: 100%; padding: 4% 0px; position: relative; overflow: hidden;}
.select_ul{max-width: 60%; width:97%; margin: 0 auto; display: flex; justify-content: space-around; z-index: 2;}
.select_ul img{width: 2.3vw;}
.select_ul li{font-size: 1.8vw; z-index: 3;}

.select::after {
  content: 'POINT POINT POINT';
  position: absolute;
  top: 50%; /* 垂直方向の中央寄せ */
  left: 50%; /* 水平方向の中央寄せ */
  transform: translate(-50%, -50%); /* 中央に配置 */
  font-size: 12vw; /* 背景テキストのフォントサイズ */
  color: #fff; /* 背景テキストの色（透明度含む） */
  opacity: 0.13;
  z-index: 2; /* 背景として配置 */
  white-space: pre;
}

.select::after , .select_lead {
  font-family: "candara", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.select_lead , .select_ul li{
  color: #474747;
}

.select_lead{
  font-size:  1.6vw;
  padding: 1% 20px 50px 20px;
}

@media screen and (max-width:1600px) {
.select {
  padding: 70px 0px;
}
}

@media screen and (max-width:1260px) {
	.select {padding: 50px 0px;}
	.select_ul{max-width: 900px; margin: 0 auto;}
	.select_ul li{font-size: 2.7vw;}
	.select_ul img{width: 4vw;}
	.select_lead{font-size: 2vw; padding: 0px 20px 30px 20px;}
}

@media screen and (max-width:980px) {
	.select{padding: 0px;}
	.select_ul{max-width: 750px; padding: 30px 0px;}
	.select_lead {padding: 15px 20px 15px 20px;}
}

@media screen and (max-width:850px) {
	.select_ul{max-width: 640px;}
}

@media screen and (max-width:700px) {
	.select_ul{max-width: 530px;}
}

@media screen and (max-width:640px) {
	.select_ul{display: block; text-align: center; max-width: 305px;}
	.select_ul img{width: 40px;}
	.select_ul li{font-size: 30px; text-align: left; display: flex; align-items: center;  margin: 10px 0; position: relative; top: -30px;}
	.select_lead{font-size: 4.5vw; margin: 0!important;}
	.select::after {content: 'POINT'; font-size: 39vw; white-space: pre; top: 30%;} 
	.select {padding-top: 70px;}
	.select_lead{position: relative; top: -15px;padding: 0px 15px;}
	.select_ul {padding: 20px 0px;}
}

@media screen and (max-width:400px) {
	.select_lead {font-size: 5.3vw;}
	.select_ul li {margin: 5px 0;}
}

/* ページ内リンク */
#lesson, #round, #kanto, #kansai, #point, #ball , #beer , #pt{
    padding-top: 170px;
    margin-top: -170px;
    display: inline-block;
}

/*-----------------------------------------------------*/
/* エリアボタン
/*-----------------------------------------------------*/
.area_btn li{font-size: 1.6vw; padding: 1% 3% 1% 1.5%; background-color: #3b523e; color: #fff; font-family: "kozuka-gothic-pr6n", sans-serif; font-weight: 500; font-style: normal; position: relative; box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.1);}
.area_btn li::after{content: '\025bc'; font-size: 1.1vw; padding-left: 3%; position: absolute; display: inline-block; top: 29%; right: 18px;}
.area_btn li:hover{opacity:0.5; transition:0.3s;}

.area_btn ul{max-width: 70%; width: 97%; margin: 0 auto; display: flex; justify-content: space-around;}
li.area_red{background-color: #dd6461;}
.area_btn a{text-decoration: none; color: #fff;}
.area_btn li:hover {opacity: 0.7; }

@media screen and (max-width:2500px){
	.area_btn li::after{top: 29%; right: 14px;}
}

@media screen and (max-width:1920px){
	.area_btn li::after{top: 29%; right: 10px;}
}

@media screen and (max-width:1500px){
	.area_btn li::after{right: 8px;}
}

@media screen and (max-width:980px){
	.area_btn li {font-size: 2vw; padding: 1% 4% 1% 2%;}
	.area_btn ul{width: 85%;}
	.area_btn li::after {font-size: 1.3vw;}
    
}
@media screen and (max-width: 640px) {
	.area_btn li {font-size: 5vw; padding: 2% 8% 1.5% 3%; margin-bottom: 3%;}
	.area_btn ul{flex-wrap: wrap; max-width: 90%; width: 90%;}
	.area_btn li::after {font-size: 3.3vw;}
}


/*-----------------------------------------------------*/
/* エリア別コース一覧
/*-----------------------------------------------------*/
/*タイトル*/
h4{font-family: "kozuka-gothic-pr6n", sans-serif; font-weight: 600; font-style: normal; font-size: 1.5vw; display: inline-block; padding: 3% 0%; display: flex;
    align-items: center; color: #3b523e;}

/*ライン*/
.area_ttl {display: flex; align-items: center; margin-top: 60px; position: relative;}
.area_ttl h4 {position: relative; z-index: 1; margin-left: 0;}
.area_ttl::before,.area_ttl::after {content: ""; height: 5px; background: #3b523e; z-index: 0;}
.area_ttl::before {flex: 0 0 14%; /* 左側のラインは短め */ margin-right: 10px;}
.area_ttl::after {flex: 1; /* 右側は残りのスペース */ margin-left: 10px;}
@media screen and (max-width: 1920px) {
	.area_ttl::before,.area_ttl::after {height: 4px;}
}
@media screen and (max-width: 1260px) {
	.area_ttl::before,.area_ttl::after {height: 3px;}
}
@media screen and (max-width: 980px) {
	.area_ttl h4{font-size: 2vw;}
}
@media screen and (max-width: 640px) {
	.area_ttl {justify-content: center;}
	.area_ttl h4 {font-size: 5vw;　text-align: center;}
	.area_ttl::before,.area_ttl::after {flex: 1;　margin: 0 10px;}
}

/*コース紹介*/

.course_area , .course_text , .course_name span , .info_title , .info_num , .btn_orange , .course_address , .btn_golf_page , .booking_ttl , .bookingBtn a
{font-family: "kozuka-gothic-pr6n", sans-serif; font-weight: 200; font-style: normal;}

.course_area , .course_name , .course_text , .course_address , .btn_golf_page{color:#3b523e;}

.course {width: 85%; margin: 0 auto; padding-bottom: 6%;}

.course_inner {max-width: 90%;  margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; padding: 5% 0%;}

.course_left {background: rgba(255, 255, 255, 0.5); padding: 3% 8% 3% 3%; flex: 0 0 55%; box-sizing: border-box; text-align: left;}

.course_area {font-size: 1.5vw; margin-bottom: 6%;}

h2.course_name_br{display: inline-block; background: #cdd2c8; padding: 2% 4%; line-height: 0.8;}
span.course_span , .course_name_640 span {background: #cdd2c8; font-size: 1.9vw; padding: 2% 4%; font-weight: 600; margin-left: 2%;}
span.course_br{margin: 0; padding: 0; line-height: 1.2;}


.course_text {margin: 5% 0 5% 7%; font-size: 1.2vw; min-height: 6vw;}

.course_info {display: flex; gap: 20px; margin-bottom: 20px; width: 70%; margin: 0 auto;}

.info_box {background: #4f6051; color: #fff; padding: 2% 3%; text-align: center;}

.info_title {font-size: 0.8vw; letter-spacing: 0.1em;}

.info_num{letter-spacing: 0.1em; font-size: 0.8vw;}

.info_num span {font-size: 2.3vw; font-weight: 500; padding-right: 3%;}
span.info {font-size: 1.3vw; font-weight: 500; padding-right: 3%;}

.course_address {font-size: 1vw; margin: 5% 0 5% 7%; line-height: 1.4;}
.course_address a{color:  #3b523e;}
.course_address:visited{color: #3b523e;}
.btn_orange {display: inline-block; background: #ff6c00; color: #fff; font-weight: 500; text-align: center; padding: 3% 10% 3% 6%; text-decoration: none; 
	font-size: 1.5vw; margin-left: 10%; box-shadow:  6px 6px 0px 0px rgba(0, 0, 0, 0.1); position: relative;}
.btn_orange span{font-size: 1vw; position: absolute; top: 32%; right: 8%; font-size: 1vw;}
.btn_golf_page span{font-size: 1vw; position: absolute; top: 34%; right: 7%; font-size: 1vw;}
.btn_orange:visited{color: #fff;}
.btn_orange:hover{color: #fff; opacity:0.5; transition:0.3s;}
.btn_golf_page:visited{color: #3b523e;}
.btn_golf_page:hover{color: #3b523e; opacity:0.8!important; transition:0.3s;}

.compe_sp{display: none;}

.course_right {flex: 0 0 39%; position: relative; right: 5%;}

.course_main_img {width: 100%; position: absolute; top: -5%;}

.course_sub_img {width: 90%; position: absolute; z-index: 5; right: 45%; top: 53%;}

.btn_golf_page {position: absolute; z-index: 10; top: 84.5%; right: -30%; background: rgba(255, 255, 255, 0.5); padding: 3% 11% 3% 25%; font-weight: 500;
  font-size: 1.5vw; text-decoration: none; box-shadow:  6px 6px 0px 0px rgba(0, 0, 0, 0.1); position: relative;}

.booking_ttl{font-size: 1.5vw; color: #3b523e; font-weight: 500; margin: 1%;}
.btnArea_2022 {margin: 0px auto 20px;}

/* SP */

@media screen and (max-width: 640px) {
	.course_inner{display: block;}
	.course {width: 98%;}
	.course_inner {max-width: 100%; display: flex; flex-direction: column-reverse; padding: 5% 0% 0% 0%;}
	.course_left {padding: 5% 5% 5% 4%;}
	.course_right {position: relative; padding-bottom: 70%; right: 0;}
	.course_info {justify-content: center; width: 100%; margin: 0;}
	.info_title , .info_num{font-size: 3vw;}
	.info_num span {font-size: 8vw;}
	.info_num span.info {font-size: 4vw;}
	.btn_orange span {font-size: 3.5vw;}
	.btn_golf_page {top: 71.5%; right: 2%; padding: 3% 8% 3% 18%; font-size: 4.5vw; position: absolute;}
	.btn_golf_page , .btn_orange{box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);}
	.btn_golf_page span {font-size: 3vw; right: 5%;}
	.compe_sp{display: block;}
	.compe_pc{display:none;}
	.course_area {font-size: 5vw; margin-bottom: 6%;}
	.course_name span {font-size: 6vw;}
	.course_text {margin: 5% 0 5% 20px; font-size: 4.5vw;}
	.course_address{font-size: 4vw;}
	.compe_sp {display: block; width: 75%; font-size: 5vw; margin: 0 auto; position: relative;}
	.area_btn li{box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);}
	.course_main_img {width: 75%; position: absolute; right: 0;}
	.course_sub_img {width: 50%; position: absolute; left: 0%; top: 48%; }
	
	.area_ttl {margin: 30px 0;}
	.course_left {margin-bottom: 10%;}	
	
	h2.course_name_br{line-height: 1.2;}
	h2.course_name_640{display: inline-block; background: #cdd2c8; padding: 2% 4%; line-height: 1.2;}
	span.course_640 , .course_name_640 span{margin: 0; padding: 0;}
}

/* 予約ボタン */
.bookingBtna{display: inline-block; width: 40%; background: #ff6c00; font-weight: 500!important; text-align: center; font-size: 1.7vw; box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.1); padding: 1% 2%;text-decoration: none; color: #fff; position: relative;}

.bookingBtn a:hover{opacity:0.8; transition:0.3s;}
.bookingBtna:visited{color: #fff;}
.bookingBtna span{
	font-size: 1.2vw; position: absolute; top: 30%; right: 22%;}

.sp{display: none;}

@media screen and (max-width: 640px) {
	.pc{display: none;}
	.bookingBtn .sp{
    width: 70%;
    font-size: 5.7vw;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
    padding: 2% 3%;
    margin: 0 auto;
}
	.bookingBtna span {
    font-size: 3.2vw;
    top: 33%;
    right: 6%;
}
	.booking_ttl {
    font-size: 5vw;
    margin-bottom: 3%;
}
}
/*-----------------------------------------------------*/
/* ボタンエリアのスタイル
/*-----------------------------------------------------*/

/* ページTOPへ戻るボタン */
#pagetop_btn {width: 100%;box-sizing: border-box;overflow: hidden;}
#pagetop {position: fixed;z-index: 20;opacity: 0;transform: translateX(100px);display: block;cursor: pointer;right: 1%;bottom: 2%;font-size:0.9vw;}
#pagetop a{display: inline-block;transition:all 0.3s;color: #fff;width: 6vw;height:6vw;border-radius:6vw;box-sizing:border-box;text-decoration: none;padding: 3em 0;position:relative;text-align: center;background-color:rgba(33%,33%,33%,0.85);}
#pagetop a span{position: absolute;top: 22%;left: 50%;width: 18%;height: 18%;margin-left: -8%;border-left: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: rotate(135deg);transform: rotate(135deg);-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;opacity: 0;box-sizing: border-box;}
#pagetop a:hover {text-decoration: none;background: #929292;}
/*　左の動き　*/
#pagetop.LeftMove{animation: LeftAnime 0.5s forwards;}
  @keyframes LeftAnime{from {opacity: 0;transform: translateX(130px);}
	to {opacity: 1;transform: translateX(0);}} 
/*　右の動き　*/
#pagetop.RightMove{animation: RightAnime 0.5s forwards;}
  @keyframes RightAnime{from {opacity: 1;transform: translateX(0);}
	to {opacity: 1;transform: translateX(130px);}}
  @-webkit-keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
  @keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
	
/* PCでのhoverアニメーション */
@media (hover: hover) and (pointer: fine) {

	/* ボタンのhoverアニメーション */
	.btnAnimation_2022 a:hover, figure a img:hover {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
	}

	.btnAnimation_2022 a:hover::after {
		animation: arrowyoko infinite .7s ease-in;
	}
}
/* IE11でのアニメーションのカクツキ対応 */
@media (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	.btnAnimation_2022 a:hover {
		box-shadow: 8px 8px 5px 0 rgb(224, 222, 222);
		transform: scale(1.05, 1.05) translate(0, -2px);
	}

	.btnAnimation_2022 a:hover::after {
		animation: arrowyoko infinite .7s ease-in;
	}
}
@keyframes arrowyoko {
	0% {
		right: 25px;
	}
	100% {
		right: 10px;
		opacity: 0;
	}
}

@media screen and (max-width:1920px){
	#pagetop a{width: 100px; height: 100px; border-radius: 100px}
	#pagetop a span {top: 25px; left: 50%; width: 20px; height: 20px;}
	#pagetop {font-size: 16px;}
}

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

@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 (max-width: 1024px) {
    div#breadSns {
        width: 100%;
    }
}


/* max-width:640px */
@media screen and (max-width:40em) {
    .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;}

    .br770 {display: none;}

    #container{
      width:100% !important;
      position:relative;
      margin: 0;
    }	

	.br850{display: none;}

  /* ページ内リンク */
  #lesson, #round, #point, #ball {
      padding-top: 25px;
      margin-top: -25px;
      display: inline-block;
  }
}
	
/* タッチディバイスでのactiveアニメーション */
@media (hover: none) and (pointer: none) {
	.btnAnimation_2022 a:active {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
	}
}