/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white:#ffffff;
@black:#191919;
@l_black:#333333;
@gray:#c6c6c6;
@l_gray:#eeeeee;
@d_gray:#afafaf;
@dd_gray:#777777;
@red:#c21f32;
@d_red:#871623;
/* @yellow:#c99111; */
@yellow:#e5a82e;
@l_yellow:#ffe6b5;
@d_yellow:#bb8210;
@blue:#00539b;
@green:#269b47;
@d_green:#1b6c32;
@violet:#8243c4;
@sky:#00add9;
@l_sky:#d8eef1;
@brown:#926834;
@gold:#a58d4c;
@pink:#d980a1;


/*----------------------------------------------*/
/*-------------------- font --------------------*/
/*----------------------------------------------*/
@font-face{
	font-family:'oswald_medium';
	src:url('/fonts/Oswald-Medium.ttf');
}
@font-face{
	font-family:'oswald_bold';
	src:url('/fonts/Oswald-Bold.ttf');
}
@font-face{
	font-family:'Recoleta';
	src:url('/fonts/Recoleta-Regular.otf');
}
@font-face{
	font-family:'OtomanopeeOne-Regular';
	src:url('/fonts/OtomanopeeOne-Regular.ttf');
}
@font-face{
	font-family:'MochiyPopOne-Regular';
	src:url('/fonts/MochiyPopOne-Regular.ttf');
}

.link_blue{
	font-weight:bold;
	background-color:@blue;
	color:#FFF;
	padding:3px 5px;
	border-radius:5px;
}

.t_red{
	color:@red;
	font-weight:bold;
}

/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0;
	font-family:YuGothic, 'Yu Gothic', sans-serif;
	font-size:14px;
	color:@black;
	letter-spacing:0.5px;
	box-sizing:border-box;
}
h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
a{
	font-size:14px;
	color:@black;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
img{
	vertical-align:bottom;
}
ul{
	margin:0;
	padding:0;

	li{
		list-style:none
	}
}
dl{
	margin:0;

	dd{
		margin:0;
	}
}

/*---------- デフォルトスタイルのリセット ----------*/
input[type="text"], input[type="email"], input[type="password"], textarea{
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
select{
	border:none;
	border-radius:0;
	cursor:pointer;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding:10px 20px 10px 10px;
	background-image:url('/images/select_cursor.png');
	background-position:center right 10px;
	background-repeat:no-repeat;
	background-size:10px;
}
button{
	position:relative;
	border:none;
	border-radius:0;
	cursor:pointer;
	overflow:hidden;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
button:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:@black;
	opacity:0;
	transition:0.3s;
}
button:hover:before{
	opacity:0.3;
}
button:disabled:before{
	content:none;
}

/*---------- disabled ----------*/
input:disabled, textarea:disabled, select:disabled{
	background-color:@gray;
}

/*---------- placeholder ----------*/
::placeholder{
	color:@d_gray;
}

/*---------- scrollbar ----------*/
::-webkit-scrollbar{
	width:10px;
	height:10px;
}
::-webkit-scrollbar-track{
	background:@gray;
}
::-webkit-scrollbar-thumb{
	background:@dd_gray;
	box-shadow:inset 0 0 0 1px @gray;
}

/*---------- error ----------*/
.error{
	background-color:@pink !important;
}

/*---------- loading ----------*/
.loading{
	display:none;
}
.loading.active{
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.5);
	z-index:9999;

	span{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		width:100%;
		text-align:center;

		i{
			font-size:50px;
			color:@white;
		}
	}
}

/*---------- responsive ----------*/
@media(max-width:768px){
	.pc{
		display:none !important;
	}
}
@media(min-width:769px){
	.sp{
		display:none !important;
	}
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
header{
	position:relative;
	border-bottom:1px solid @gray;
}

/*---------- header->logo ----------*/
.header_logo{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	padding:10px 20px;
	text-align:center;
	box-sizing:border-box;
	z-index:100;

	a{
		display:inline-block;

		img{
			height:100px;
			width:auto;
		}
	}
}

/*---------- header->nav ----------*/
.header_nav{
	max-width:1200px;
	margin:0 auto;
	padding:10px;
	box-sizing:border-box;

	ul{
		display:table;
		margin:0 auto;

		li{
			display:table-cell;
			padding:10px 15px;

			a{
				display:inline-block;
				position:relative;
				font-size:13px;
				white-space:nowrap;
			}
			a:before{
				content:'';
				position:absolute;
				right:50%;
				bottom:0;
				left:50%;
				border-bottom:3px solid;
				transition:0.3s;
			}
			/*---------- nav-color ----------*/
			a.red:before{
				border-bottom-color:@red;
			}
			a.yellow:before{
				border-bottom-color:@yellow;
			}
			a.blue:before{
				border-bottom-color:@blue;
			}
			a.green:before{
				border-bottom-color:@green;
			}
			a.violet:before{
				border-bottom-color:@violet;
			}
			a.gray:before{
				border-bottom-color:@d_gray;
			}
			a.sky:before{
				border-bottom-color:@sky;
			}
			a.brown:before{
				border-bottom-color:@brown;
			}
			a.pink:before{
				border-bottom-color:@pink;
			}
			/*---------- hover-animation ----------*/
			a:hover:before{
				right:0;
				left:0;
			}
		}
	}
}

/*---------- header->hambueger ----------*/
.head_hamburger{
	display:none;
}

/*---------- header->sp_nav ----------*/
.head_sp_nav{
	display:none;
}


/*------------------------------------------------*/
/*-------------------- footer --------------------*/
/*------------------------------------------------*/
footer{
	background-color:@blue;
}
.footer_area{
	max-width:1200px;
	margin:0 auto;
	padding:20px 0;
}

/*---------- footer->logo ----------*/
.footer_logo{
	margin-bottom:20px;
	text-align:center;

	img{
		height:80px;
		width: auto;
	}
}
/*---------- footer->copyright ----------*/
.footer_copy{
	font-family:Canela,PF Regal Display Pro,Times New Roman,serif;
	font-size:12px;
	color:@white;
	text-align:center;
}

/*---------- footer->nav ----------*/
.footer_nav{
	padding:30px;

	li{
		display:block;
		margin-bottom:5px;

		a{
			color:@white;

			span{
				font-size:12px;
			}
			span:before{
				content:'-';
				margin-right:5px;
			}
		}
	}
	li:last-child{
		margin:0;
	}
}

/*---------- footer->topへ戻る ----------*/
.footer_return{
	position:fixed;
	right:30px;
	bottom:30px;
	width:40px;
	height:40px;
	background-color:@d_gray;
	border-radius:50%;
	cursor:pointer;
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:200;

	span{
		position:absolute;
		top:0px;
		right:4px;
		width:17px;
		height:3px;
		background-color:@white;
		transition:0.3s;
	}
	.t_left{
		transform:translateX(-13px) translateY(17px) rotate(315deg);
	}
	.t_right{
		transform:translateX(-3px) translateY(17px) rotate(225deg);
	}
	.b_left{
		transform:translateX(-13px) translateY(17px) rotate(315deg);
	}
	.b_right{
		transform:translateX(-3px) translateY(17px) rotate(225deg);
	}
}
.footer_return.active{
	opacity:1;
	visibility:visible;
}
.footer_return:hover{
	.t_left{
		transform:translateX(-13px) translateY(12px) rotate(315deg);
	}
	.t_right{
		transform:translateX(-3px) translateY(12px) rotate(225deg);
	}
	.b_left{
		transform:translateX(-13px) translateY(22px) rotate(315deg);
	}
	.b_right{
		transform:translateX(-3px) translateY(22px) rotate(225deg);
	}
}


/*-----------------------------------------------------*/
/*-------------------- grid-system --------------------*/
/*-----------------------------------------------------*/
.grid_container{
	display:flex;
	flex-wrap:wrap;
	margin:-15px;
}
.grid_container:after{
	content:'';
	display:block;
	clear:both;
}
.grid_column{
	float:left;
	padding:15px;
	box-sizing:border-box;

	img{
		width:100%;
	}
}
/*---------- sm-ver ----------*/
.grid_container.sm{
	margin:-5px;
}
.grid_container.sm .grid_column{
	padding:5px;
}

/*---------- column-size ----------*/
.grid_column.col1{width:8.333%;}
.grid_column.col2{width:16.666%;}
.grid_column.col3{width:25%;}
.grid_column.col4{width:33.333%;}
.grid_column.col5{width:41.665%;}
.grid_column.col6{width:50%;}
.grid_column.col7{width:58.335%;}
.grid_column.col8{width:66.667%;}
.grid_column.col9{width:75%;}
.grid_column.col10{width:83.334%;}
.grid_column.col11{width:91.667%;}
.grid_column.col12{width:100%;}
.grid_column.col2-6{width:16.666%;}
.grid_column.col2-12{width:16.666%;}
.grid_column.col3-12{width:25%;}


/*---------------------------------------------------*/
/*-------------------- container --------------------*/
/*---------------------------------------------------*/
.main_container{
	display:block;
	position:relative;
	background-color:@l_gray;
	z-index:10;
}

.sub_section{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	padding:100px 30px;
	background-color:@white;
	box-sizing:border-box;
}
.sub_section.blog{
	padding-top:0;
}
.sub_section.blog_article{
	padding:0px 30px;
	background:repeating-linear-gradient(135deg, @white, @white 3px, transparent 3px, transparent 6px);
}
.sub_section.golf{
	padding:0 0 100px;
}

/*---------- fadein-animation ----------*/
.sub_fadein{
	animation-duration:1.2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:sub_fadein;
}
@keyframes sub_fadein{
	0%{
		transform:translateY(0);
		opacity:0;
	}
	50%{
		transform:translateY(50px);
		opacity:0;
	}
	100%{
		transform:translateY(0);
		opacity:1;
	}
}


/*-----------------------------------------------*/
/*-------------------- modal --------------------*/
/*-----------------------------------------------*/
.modal_area{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:20px;
	background-color:rgba(0, 0, 0, 0.7);
	opacity:0;
	visibility:hidden;
	box-sizing:border-box;
	transition:0.3s;
	z-index:2000;
}
.modal_area.active{
	opacity:1;
	visibility:visible;
}
.modal_window{
	height:100%;
	margin:0 auto;
	backface-visibility:hidden;
}
/*---------- modal-size ----------*/
.modal_window.lg{
	max-width:1200px;
}
.modal_window.md{
	max-width:900px;
}
.modal_window.sm{
	max-width:500px;
}
.modal_container{
	height:100%;
	overflow:auto;
}
/*---------- modal > header ----------*/
.modal_header{
	display:grid;
	grid-template-columns:1fr 50px;
	align-items:center;
	background-color:@gray;

	.title{
		padding:10px 20px;
		font-size:18px;
		font-weight:bold;

		span{
			font-weight:bold;
			color:@red;
		}
	}
}
.modal_close{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	font-size:18px;
	color:@white;
	background-color:@dd_gray;
	text-align:center;
	cursor:pointer;
	transition:0.3s;
}
/*---------- modal > body ----------*/
.modal_body{
	padding:20px;
	background-color:@white;
}
.modal_box{
	margin-bottom:20px;

	&:last-child{
		margin:0;
	}
	.title{
		margin-bottom:10px;
		padding:5px 10px;
		font-size:16px;
		font-weight:bold;
		border-left:5px solid @blue;
		border-bottom:1px solid @gray;
	}
}
/*---------- modal > スケジュール情報 ----------*/
.modal_attend_info{
	padding:10px;
	background-color:@l_gray;
	border:1px solid @gray;

	dl{
		display:grid;
		grid-template-columns:80px 1fr;

		dt, dd{
			font-size:15px;
			font-weight:bold;
		}
	}
}
/*---------- modal > 入力フォーム ----------*/
.modal_form{
	background-color:@l_gray;
	border:1px solid @gray;

	dl{
		display:grid;
		grid-template-columns:100px 1fr;
		align-items:center;
		padding:10px;
		border-bottom:1px solid @gray;

		&:last-child{
			border:none;
		}
		dd{
			input, select{
				width:100%;
				padding:10px;
				font-size:15px;
				color:@black;
				background-color:@white;
				border:1px solid @gray;
				border-radius:5px;
				height:45px;
			}
			/*---------- 出欠ボタン ----------*/
			.attend_chk{
				display:grid;
				grid-template-columns:repeat(2, 1fr);
				gap:10px;

				button{
					padding:10px;
					font-size:14px;
					color:@white;
					background-color:@dd_gray;
					border-radius:5px;

					&.red{
						&.active{
							background-color:@red;
						}
					}
					&.green{
						&.active{
							background-color:@green;
						}
					}
				}
			}
		}

		/*--- フォーム > 注記 ----*/
		.note_font{
			grid-column:~'1/3';
			display:block;
			margin-top:10px;
			font-weight:bold;
			color:@red;
			font-size:12px;
		}
	}
}
/*---------- modal > footer ----------*/
.modal_footer{
	display:flex;
	justify-content:center;
	align-items:center;
	grid-gap:20px;
	padding:10px 20px;
	background-color:@gray;
	border-top:1px solid @gray;

	button{
		width:50%;
		padding:10px 0;
		font-size:16px;
		border-radius:5px;
	}
	button.modal_return{
		color:@white;
		background-color:@dd_gray;
	}
	button.modal_save{
		color:@white;
		background-color:@green;
	}
	button.modal_copy{
		color:@white;
		background-color:@yellow;
	}
}


/*----------------------------------------------------*/
/*-------------------- slider-pro --------------------*/
/*----------------------------------------------------*/
.sp-fade-arrows{
	opacity:1;
	z-index:2;
}
.sp-horizontal .sp-arrows{
	transform:translateY(-50%) !important;
	margin:0 !important;
}
.sp-arrow.sp-previous-arrow, .sp-arrow.sp-next-arrow{
	width:50px;
	height:50px;
	color:@white;
	background-color:@d_gray;
	box-sizing:border-box;
}
.sp-horizontal .sp-previous-arrow{
	left:0 !important;
}
.sp-horizontal .sp-next-arrow, .sp-horizontal.sp-rtl .sp-previous-arrow{
	right:0 !important;
}
.sp-next-arrow:after, .sp-next-arrow:before, .sp-previous-arrow:after, .sp-previous-arrow:before{
	width:8px !important;
	height:15px !important;
}
.sp-arrow:before{
	top:10px !important;
	left:40% !important;
}
.sp-arrow:after{
	bottom:10px !important;
	left:40% !important;
}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before{
	border-bottom:5px solid @d_gray !important;
}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{
	top:3px !important;
	margin-left:-5px !important;
	border-bottom:10px solid @d_gray !important;
	border-left:5px solid transparent !important;
	border-right:5px solid transparent !important;
}
.sp-button{
	width:10px !important;
	height:10px !important;
	margin:0 4px !important;
	background-color:transparent !important;
	border:1px solid @white !important;
}
.sp-button.sp-selected-button{
	background-color:@white !important;
}


/*--------------------------------------------------*/
/*-------------------- paginate --------------------*/
/*--------------------------------------------------*/
.pagination{
	display:flex;
	justify-content:center;
	grid-gap:5px;
	margin:30px 0 0;
	text-align:center;

	li{
		span{
			display:block;
			padding:5px 15px;
			font-size:16px;
			color:@black;
			border:1px solid @gray;
			border-radius:0;
		}
		a{
			display:block;
			padding:5px 15px;
			font-size:16px;
			color:@black;
			border:1px solid @gray;
			border-radius:0;
			transition:0.3s;
		}
		a:hover{
			background-color:@gray;
		}
	}
	li.disabled{
		/* background-color:@gray; */
	}
	li.active{
		span{
			color:@white !important;
			background-color:@blue !important;
			border:1px solid @blue !important;
			border-radius:0;
		}
	}
	li:first-child{
		a, span{
			border-radius:0;
		}
	}
	li:last-child{
		margin-right:0;

		a, span{
			border-radius:0;
		}
	}
}


/*------------------------------------------------------*/
/*---------------------- alertify ----------------------*/
/*------------------------------------------------------*/
.alertify-logs{
	bottom:10px !important;
	right:10px !important;
	left:10px !important;
	width:auto !important;
	min-width:200px !important;

	article{
		padding:10px 10px !important;
		font-size:14px !important;
		border-radius:5px !important;
		text-shadow:none !important;
		line-height:20px !important;
	}
	.alertify-log-success{
		background-color:@d_green !important;
	}
	.alertify-log-error{
		background-color:@d_red !important;
	}
}

/*---------- modal-window ----------*/
.alertify{
	top:10% !important;
	border:5px solid @d_gray !important;
	border-radius:0 !important;
}
.alertify-inner{
	p{
		margin:0 0 15px !important;
	}
}
/*---------- modal-back ----------*/
.alertify-cover{
	background-color:@black !important;
	opacity:0.5 !important;
}

/*---------- confirm-btn ----------*/
.alertify-button{
	background-image:none !important;
	border:none !important;
	border-radius:0 !important;
	text-shadow:none !important;
	box-shadow:none !important;
}
.alertify-button-cancel, .alertify-button-cancel:hover, .alertify-button-cancel:focus{
	background-color:@red !important;
}
.alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus{
	background-color:@green !important;
}


/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------- ここからカスタマイズ ----------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/


/*---------------------------------------------------*/
/*-------------------- top-start --------------------*/
/*---------------------------------------------------*/

/*---------- main_visual ----------*/
.mv_area{
	position:relative;
	max-width:1200px;
	margin:0 auto;
}

/*---------- main_visual->animation ----------*/
.mv_cover{
	position:absolute;
	top:0;
	left:0;
	width:33.333%;
	height:100%;
	background:rgba(0, 0, 0, 0.5);
	overflow:hidden;
	z-index:30;
	animation-duration:0.6s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_cover;
}
.mv_cover:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:repeating-linear-gradient(135deg, @black, @black 3px, transparent 3px, transparent 6px);
	opacity:0.2;
	z-index:1;
}
@keyframes mv_cover{
	0%{
		width:0;
		opacity:0;
	}
	100%{
		width:33.333%;
		opacity:1;
	}
}

.mv_cover_contents{
	position:absolute;
	top:50%;
	right:30px;
	left:30px;
	transform:translateY(-50%);
	padding-bottom:20px;
	white-space:nowrap;
	animation-duration:1.2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_cover_contents;
	z-index:2;

	> span{
		font-size:18px;
		color:@white;
	}
	h1{
		margin-top:15px;
		font-family:Canela,PF Regal Display Pro,Times New Roman,serif;
		/*font-family:'Recoleta';*/
		font-size:0;
		font-weight:300;
		color:@white;
		line-height:1;

		span{
			display:inline-block;
			font-size:40px;
		}
		span:nth-child(1){
			margin-right:15px;
		}
		span:nth-child(2){
			margin-right:15px;
		}
	}
}
.mv_cover_contents:before{
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	border-bottom:2px solid @white;
}
.mv_cover_contents:after{
	content:'';
	position:absolute;
	right:-3px;
	bottom:11px;
	width:30px;
	border-bottom:2px solid @white;
	transform:rotate(45deg);
}
@keyframes mv_cover_contents{
	0%{
		right:100%;
		left:-100%;
		opacity:0;
	}
	50%{
		right:100%;
		left:-100%;
		opacity:0;
	}
	100%{
		right:30px;
		left:30px;
		opacity:1;
	}
}

/*---------- main_visual->back_img ----------*/
.mv_back{
	position:relative;
	/*width:87.5%;*/
	width:100%;
	height:450px;
	/* background-image:url('/images/main_visual.jpg'); */
	background-image:url('/images/main_visual_v2.webp');
	background-position:center;
	background-size:cover;
	z-index:20;
}

/*---------- main_visual->side_text ----------*/
/*
.mv_side{
	position:absolute;
	top:0;
	right:0;
	width:20%;
	height:100%;
	background-color:@l_black;
	overflow:hidden;
	z-index:10;
}
.mv_side_title{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) rotate(270deg);
	font-family:'oswald_bold';
	font-size:110px;
	color:@white;
	line-height:1;
	white-space:nowrap;
	animation-duration:1.2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:mv_side_title;
}
@keyframes mv_side_title{
	0%{
		left:0;
		opacity:0;
	}
	50%{
		left:0;
		opacity:0;
	}
	100%{
		left:50%;
		opacity:1;
	}
}
*/

/*---------- box ----------*/
.box_area{
	max-width:1200px;
	margin:0 auto;
	padding-bottom:100px;
}
/* .box_area:after{
	content:'';
	display:block;
	clear:both;
} */

.box_contents{
	display:grid;
	grid-template-columns:400px 1fr;
	position:relative;
	transition:0.3s;

	&:before{
		content:'';
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:rgba(0, 0, 0, 0.3);
		opacity:0;
		transition:0.3s;
	}
	&:hover{
		&:before{
			opacity:1;
		}
		.box_link:after{
			border-top:10px solid transparent;
			border-right:10px solid @white;
		}
	}
	/*---------- box-reverse ----------*/
	&.reverse{
		grid-template-columns:1fr 400px;

		.box_link{
			order:2;
		}
		.box_img{
			order:1;
		}
	}
	/*---------- box-color ----------*/
	&.red{
		background-color:@red;
	}
	&.yellow{
		background-color:@yellow;
	}
	&.blue{
		background-color:@blue;
	}
	&.green{
		background-color:@green;
	}
	&.violet{
		background-color:@violet;
	}
	&.gray{
		background-color:@d_gray;
	}
	&.brown{
		background-color:@brown;
	}
	&.gold{
		background-color:@gold;
	}
	&.sky{
		background-color:@sky;
	}
}

/*---------- boxの中身 ----------*/
.box_link{
	position:relative;
	height:300px;
	padding:30px;
	color:@white;
	box-sizing:border-box;

	&:after{
		content:'';
		position:absolute;
		right:10px;
		bottom:10px;
		border-top:20px solid transparent;
		border-right:20px solid @white;
		transition:0.3s;
	}
	h2{
		margin-bottom:10px;
		font-family:Canela,PF Regal Display Pro,Times New Roman,serif;
		font-weight:300;
		font-size:40px;
		line-height:1;
	}
	span{
		font-size:18px
	}
	p{
		position:relative;
		margin-top:50px;
		font-size:14px;

		&:before{
			content:'';
			position:absolute;
			top:-25px;
			left:0;
			width:40px;
			border-top:2px solid @white;
		}
	}
}

.box_flex{
	/*float:left;*/
}
.box_flex.col4{
	width:33.333%;
}
.box_flex.col8{
	width:66.667%;
}

.box_img{
	position:relative;
	margin-top:30px;
	width:100%;
	height:270px;
	overflow:hidden;

	img{
		width:100%;
		height:100%;
		object-fit:cover;
	}
}
/* .box_img.sv1{
	background-image:url('/images/sub_visual_1.jpg');
}
.box_img.sv2{
	background-image:url('/images/sub_visual_2.jpg');
}
.box_img.sv3{
	background-image:url('/images/sub_visual_3.jpg');
}
.box_img.sv4{
	background-image:url('/images/sub_visual_4.jpg');
}
.box_img.sv5{
	background-image:url('/images/anniversary/anv_sv.png');
}
.box_img.sv6{
	background-image:url('/images/junior-golf/golf-banner.png');
} */
.box_img:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
}
/*-------------------------------------------------*/
/*-------------------- top-end --------------------*/
/*-------------------------------------------------*/


/*--------------------------------------------------------*/
/*-------------------- sub-page-start --------------------*/
/*--------------------------------------------------------*/

/*---------- sub_visual-color ----------*/
sv_area.red{
	background-color:@red;

	.sv_cover:before{
		background-color:@red;
	}
}
.sv_area.yellow{
	background-color:@yellow;

	.sv_cover:before{
		background-color:@yellow;
	}
}
.sv_area.blue{
	background-color:@blue;

	.sv_cover:before{
		background-color:@blue;
	}
}
.sv_area.green{
	background-color:@green;

	.sv_cover:before{
		background-color:@green;
	}
}
.sv_area.violet{
	background-color:@violet;

	.sv_cover:before{
		background-color:@violet;
	}
}
.sv_area.gray{
	background-color:@d_gray;

	.sv_cover:before{
		background-color:@d_gray;
	}
}
.sv_area.sky{
	background-color:@sky;

	.sv_cover:before{
		background-color:@sky;
	}
}
.sv_area.brown{
	background-color:@brown;

	.sv_cover:before{
		background-color:@brown;
	}
}
.sv_area.gold{
	background-color:@gold;

	.sv_cover:before{
		background-color:@gold;
	}
}
.sv_area.pink{
	background-color:@pink;

	.sv_cover:before{
		background-color:@pink;
	}
}

.sv_back{
	position:relative;
	width:100%;
	max-width:1200px;
	height:300px;
	margin:0 auto;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.sv_back.about{
	background-image:url('/images/sub_visual_1.webp');
}
.sv_back.activites{
	background-image:url('/images/sub_visual_2.webp');
}
.sv_back.admission{
	background-image:url('/images/sub_visual_3.webp');
}
.sv_back.blog{
	background-image:url('/images/sub_visual_4.webp');
}
.sv_back.anv{
	background-image:url('/images/anniversary/anv_sv.webp');
}

.sv_cover{
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	color:@white;
	animation-duration:0.6s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:sv_cover;
}
.sv_cover:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0.6;
	z-index:1;
}
.sv_cover:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:repeating-linear-gradient(135deg, @gray, @gray 3px, transparent 3px, transparent 6px);
	opacity:0.15;
	z-index:2;
}
@keyframes sv_cover{
	0%{
		width:0;
		opacity:0;
	}
	100%{
		width:50%;
		opacity:1;
	}
}

.sv_cover_contents{
	position:absolute;
	top:50%;
	left:30px;
	transform:translateY(-50%);
	animation-duration:1.2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:sv_cover_contents;
	z-index:3;

	h1{
		margin-bottom:10px;
		font-family:Canela,PF Regal Display Pro,Times New Roman,serif;
		/*font-family:'Recoleta';*/
		font-size:54px;
		color:@white;
		line-height:1;
	}
	span{
		font-size:26px;
	}
}
@keyframes sv_cover_contents{
	0%{
		opacity:0;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

/*---------- コンテンツ内メニュー ----------*/
.page_tag{
	display:flex;
	justify-content:left;
	align-items:center;
	margin-bottom:50px;

	li{
		width:16.666%;
		margin-right:5px;

		a{
			display:block;
			position:relative;
			padding:15px;
			background-color:@gray;
			transition:0.3s;
		}
		a:before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background:rgba(0, 0, 0, 0.2);
			opacity:0;
			transition:0.3s;
		}
		a.red{
			color:@white;
			background-color:@red;
		}
		a.yellow{
			color:@white;
			background-color:@yellow;
		}
		a.blue{
			color:@white;
			background-color:@blue;
		}
		a.green{
			color:@white;
			background-color:@green;
		}
		a.violet{
			color:@white;
			background-color:@violet;
		}
		a.gray{
			color:@white;
			background-color:@d_gray;
		}
		a.sky{
			color:@white;
			background-color:@sky;
		}
		a.gold{
			color:@white;
			background-color:@gold;
		}
		a:hover:before{
			opacity:1;
		}
	}
	li:last-child{
		margin:0;
	}
}

.sub_contents{
	margin-bottom:100px;
}
.sub_contents:last-child{
	margin-bottom:0;
}
.sub_contents{
	p{
		text-align:center;
	}

	.sub_contents_option{
		max-width:500px;
		margin:40px auto 0;

		button{
			background-color:@blue;
			color:@white;
			width:100%;
    		padding:10px;
		}
	}
}
/*---------- コンテンツ用ヘッダー ----------*/
.sub_header{
	display:flex;
	justify-content:left;
	align-items:center;
	margin-bottom:30px;
	padding:15px 0 15px 10px;
	border-bottom:1px solid @gray;
	border-left:10px solid;

	h2{
		margin-right:15px;
		font-family:Canela,PF Regal Display Pro,Times New Roman,serif;
		/*font-family:'Recoleta';*/
		font-size:40px;
		line-height:1;
	}
	span{
		font-size:16px;
	}


}
.sub_header.red{
	border-left-color:@red;

	h2{
		color:@red;
	}
}
.sub_header.yellow{
	border-left-color:@yellow;

	h2{
		color:@yellow;
	}
}
.sub_header.blue{
	border-left-color:@blue;

	h2{
		color:@blue;
	}
}
.sub_header.green{
	border-left-color:@green;

	h2{
		color:@green;
	}
}
.sub_header.violet{
	border-left-color:@violet;

	h2{
		color:@violet;
	}
}
.sub_header.gray{
	border-left-color:@d_gray;

	h2{
		color:@d_gray;
	}
}
.sub_header.sky{
	border-left-color:@sky;

	h2{
		color:@sky;
	}
}
.sub_header.brown{
	border-left-color:@brown;

	h2{
		color:@brown;
	}
}
.sub_header.gold{
	border-left-color:@gold;

	h2{
		color:@gold;
	}
}
.sub_header.pink{
	border-left-color:@pink;

	h2{
		color:@pink;
	}
}



.sub_date_lists{
	dl{
		display:flex;
		justify-content:left;
		align-items:center;
		gap:10px;
		margin:0;
		padding:15px 0;
		border-top:1px solid @gray;

		dt{
			width:25%;
		}
		dd{
			margin:0;

			a{
				color:@blue;
				text-decoration:underline;
			}
		}
	}
	dl:last-child{
		border-bottom:1px solid @gray;
	}
}

.sub_date_table{
	table{
		width:50%;
		border-collapse:collapse;

		tr{
			border:1px solid @gray;

			td{
				padding:5px 10px;
			}
		}
		tr:nth-child(even){
			background-color:@l_gray;
		}
		tr:first-child{
			color:@white;
			background-color:@blue;
		}
	}
}


/*-------------------- クラブについて --------------------*/
/*---------- about->slogan ----------*/
.about_message_slogan{
	position:relative;
	margin-bottom:50px;
	padding:30px;
	background-color:@blue;

	.title{
		position:relative;
		margin:0 0 30px;
		font-family:Canela,PF Regal Display Pro,Times New Roman,serif;
		font-size:28px;
		font-weight:bold;
		color:@white;
		z-index:2;
	}
	.back{
		position:absolute;
		top:30px;
		right:50px;
		z-index:1;

		li{
			position:relative;
			margin-top:10px;
			font-family:Canela,PF Regal Display Pro,Times New Roman,serif;
			font-size:90px;
			color:@d_gray;
			line-height:1;
			opacity:0.7;
		}
		li:nth-child(1){
			margin-top:0;
		}
		li:nth-child(2){
			margin-left:50px;
		}
		li:nth-child(3){
			margin-left:100px;
		}
		li:nth-child(4){
			margin-left:150px;
		}
		li:nth-child(5){
			margin-left:200px;
		}
		li:before{
			content:'';
			position:absolute;
			bottom:-3px;
			left:0;
			width:80px;
			border-bottom:3px solid @yellow;
		}
	}
	.text{
		position:relative;
		margin-right:30%;
		padding:20px;
		font-size:16px;
		color:@white;
		background:rgba(0, 0, 0, 0.6);
		box-sizing:border-box;
		z-index:3;
	}
}
.about_message_slogan:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:repeating-linear-gradient(135deg, @black, @black 3px, transparent 3px, transparent 6px);
	opacity:0.2;
	z-index:1;
}

/*---------- about->会長挨拶 ----------*/
.about_message_lists{
	li{
		display:flex;
		justify-content:flex-start;
		align-items:start;
		margin-bottom:30px;
		padding:20px;
		background-color:@l_gray;

		.img{
			img{
				width:150px;
			}
			p{
				margin-top:5px;
				text-align:center;
			}
		}
		.text{
			padding-left:20px;
			font-size:14px;
			line-height:24px;
			box-sizing:border-box;
		}
	}
	li:last-child{
		margin:0;
	}
}

/*---------- about->組織表 ----------*/
.org_headline{
	margin-bottom:20px;
	padding:10px;
	font-size:16px;
	font-weight:bold;
	border-left:5px solid @blue;
	border-bottom:1px solid @gray;
}

/*---------- about->委員会組織表 ----------*/
.org_com_lists{
	margin-top:30px;
}
.org_com_container{
	display:grid;
	gap:20px;
}
.org_com_column{
	background-color:@l_gray;
	border:1px solid @blue;
	border-radius:5px;
}
.org_com_chief{
	padding:10px;

	dl{
		display:flex;
		align-items:center;
		gap:10px;

		dt{
			padding:5px 10px;
			font-size:14px;
			text-align:center;
			color:@white;
			background-color:@blue;
			border-radius:5px;
		}
		dd{
			font-size:13px;
		}
	}
}
.org_com_box_container{
	display:grid;
	gap:5px;
	padding:10px;
	border-top:1px solid @gray;
}
.org_com_box_column{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:10px;
	padding:10px;
	background-color:@l_yellow;
	border:1px solid @yellow;
	border-radius:5px;

	dl{
		display:grid;
		grid-template-columns:60px 1fr;
		align-items:center;
		gap:5px;

		dt{
			padding:2px 6px;
			font-size:12px;
			text-align:center;
			color:@white;
			background-color:@yellow;
			border-radius:5px;
		}
		dd{
			font-size:13px;
		}
	}
}

/*---------- 備考欄がある場合 ----------*/
.notes{
	display:grid;
	grid-template-columns:20px 1fr;
	align-items:center;
	gap:5px;
	position:relative;
	line-height:1.3;

	button{
		width:100%;
		height:20px;
		padding:0;
		font-size:12px;
		color:@white;
		background-color:@blue;
		border-radius:50%;
	}
}
.notes_modal_area{
	display:none;
	position:absolute;
	top:100%;
	left:-10px;
	margin-top:8px;
	padding:8px 12px;
	font-size:14px;
	line-height:1.3;
	background-color:@white;
	border:1px solid @blue;
	border-radius:5px;
	z-index:1;

	&:before{
		content:'';
		position:absolute;
		top:-8px;
		left:10px;
		border-right:8px solid transparent;
		border-bottom:8px solid @blue;
		border-left:8px solid transparent;
		z-index:2;
	}
	&.active{
		display:block;
	}
}


/*-------------------- クラブの活動 --------------------*/
.activites_area{

}
.activites_contents{
	margin-bottom:50px;
	padding:20px;
	background-color:@l_gray;

	h3{
		display:inline-block;
		position:relative;
		margin-bottom:20px;
		font-size:20px;
	}
	h3:after{
		content:'';
		position:absolute;
		bottom:-3px;
		left:0;
		width:50%;
		border-bottom:3px solid @yellow;
	}
	p{
		font-size:14px;
	}
	a{
		display:inline-block;
		margin-top:20px;
		color:@blue;

		i{
			margin-left:3px;
		}
	}
	.img{
		margin-top:30px;

		ul{
			margin:-5px;

			li{
				float:left;
				width:50%;
				padding:5px;
				box-sizing:border-box;

				img{
					width:100%;
				}
			}
			li.sm{
				width:33.333%;
			}
		}
		ul:after{
			content:'';
			display:block;
			clear:both;
		}
	}
}
.activites_contents:last-child{
	margin:0;
}


/*-------------------- 入会のご案内 --------------------*/
.admission_area{
	margin-bottom:50px;

	p{
		font-size:14px;
	}
}


/*-------------------- ブログ一覧 --------------------*/
.blog_lists_box{
	display:block;
	position:relative;
	overflow:hidden;

	.img{
		width:100%;
		height:300px;
		background-position:center;
		background-repeat:no-repeat;
		background-size:cover;
		transition:0.7s;
	}
	.contents{
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		padding:10px;
		background:rgba(0, 0, 0, 0.6);
		box-sizing:border-box;

		time{
			font-size:12px;
			color:@white;

			i{
				margin-right:5px;
			}
		}
		h3{
			font-size:16px;
			color:@white;
		}
	}
}
.blog_lists_box:hover{
	.img{
		transform:scale(1.1);
	}
}

/*---------- ブログ一覧->タグ ----------*/
.tag_section{
	margin-bottom:50px;
	border-bottom:1px solid @gray;
}
.tag_header{
	display:flex;
	justify-content:left;
	align-items:center;
	padding:15px 0;

	h2{
		margin-right:20px;
		padding-right:20px;
		font-size:20px;
		font-weight:bold;
		border-right:1px solid @gray;
	}
	h2:before{
		content:'#';
		padding-right:2px;
		font-size:18px;
		font-weight:bold;
		vertical-align:middle;
	}
	ul{
		li{
			display:inline-block;
			position:relative;
			margin-right:15px;

			a{
				font-size:14px;
				/*font-weight:bold;*/
			}
		}
		li:last-child{
			margin:0;
		}
		li:before{
			content:'#';
			padding-right:2px;
			font-size:14px;
			font-weight:bold;
			color:@red;
			vertical-align:middle;
		}
		li:after{
			content:'';
			position:absolute;
			bottom:0;
			left:0;
			width:0;
			border-bottom:2px solid @red;
			transition:0.3s;
		}
		li:hover:after{
			width:100%;
		}
	}
}


/*-------------------- ブログ記事 --------------------*/
.blog_article_area{
	max-width:800px;
	margin:0 auto;
	padding:50px 30px;
	background-color:@white;
	box-sizing:border-box;

	.header{
		margin-bottom:30px;

		time{
			font-size:14px;
			color:@dd_gray;

			i{
				margin-right:5px;
			}
		}
		h2{
			font-size:30px;
		}
		ul{
			display:flex;
			justify-content:flex-start;
			align-items:center;
			margin-top:10px;

			li{
				margin-right:15px;

				a{
					display:inline-block;
					position:relative;
					font-size:14px;
				}
				a:before{
					content:'#';
					padding-right:2px;
					font-size:12px;
					font-weight:bold;
					color:@red;
				}
				a:after{
					content:'';
					position:absolute;
					bottom:0;
					left:0;
					width:0;
					border-bottom:2px solid @red;
					transition:0.3s;
				}
				a:hover:after{
					width:100%;
				}
			}
			li:last-child{
				margin:0;
			}
		}
	}
	.thumbnail{
		margin-bottom:100px;
		text-align:center;

		img{
			width:100%;
			max-width:100%;
		}
	}
	.contents{
		margin-bottom:50px;

		p{
			margin-bottom:50px;

			img{
				width:100%;
			}
			iframe{
				width:100%;
				height:400px;
			}
		}
		p:last-child{
			margin:0;
		}
		a{
			text-decoration: underline;
			color:#d85656;
			font-weight: bold;
		}
	}
	.footer{
		max-width:300px;
		margin:0 auto;

		a{
			display:block;
			position:relative;
			padding:10px;
			border:1px solid @gray;
			text-align:center;

			span{
				position:relative;
				z-index:2;
				transition:0.4s;
			}
		}
		a:before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:0;
			height:100%;
			background-color:@blue;
			opacity:0;
			transition:0.4s;
		}
		a:hover{
			span{
				color:@white;
			}
		}
		a:hover:before{
			width:100%;
			opacity:1;
			z-index:1;

			/*
			animation-duration:0.7s;
			animation-iteration-count:1;
			animation-timing-function:ease-out;
			animation-name:article_link;
			*/
		}
		/*
		@keyframes article_link{
			0%{
				width:0;
			}
			50%{

			}
			100%{
				width:100%;
			}
		}
		*/
	}
}


/*-------------------- アクセス --------------------*/
.access_area{
	iframe{
		width:100%;
		height:300px;
		border:none;
	}
	a{
		display: inline-block;

		img{
			width: 100%;
			height: 300px;
			object-fit: cover;
		}
	}
}
.contact_area{
	a{
		color:@blue;
		text-decoration:underline;
	}
}


/*-------------------- 60周年記念 --------------------*/
.anv_s1_column{
	display:grid;
	grid-template-columns:200px 1fr;
	align-items:flex-start;
	grid-gap:50px;
	margin-bottom:30px;
	padding-bottom:30px;
	border-bottom:1px solid @gray;

	.img{
		img{
			width:100%;
		}
		.position{
			margin-top:10px;
			font-size:12px;
			line-height:16px;
			text-align:center;
		}
		.name{
			font-size:16px;
			line-height:24px;
			text-align:center;
		}
	}
	.text{
		font-size:14px;
		line-height:24px;
	}
}
.anv_s1_column:last-child{
	margin:0;
}

.anv_s2_headline{
	padding:5px 0;
	font-size:16px;
	text-align:center;
	color:@white;
	background-color:@gold;
	border-bottom:1px solid @gray;
}
.anv_s2_list{
	display:grid;
	align-items:center;
	padding:10px 0;
	border-bottom:1px solid @gray;
}
.anv_s2_list.col2{
	grid-template-columns:repeat(2, 1fr);
}
.anv_s2_list.col3{
	grid-template-columns:repeat(3, 1fr);
}
.anv_s2_list.col4{
	grid-template-columns:repeat(4, 1fr);
}
.anv_s2_grid{
	display:grid;
	align-items:flex-start;
}
.anv_s2_grid.col2{
	grid-template-columns:repeat(2, 1fr);
}
.anv_s2_grid.col4{
	grid-template-columns:repeat(4, 1fr);
}

.anv_s3{
	margin-bottom:50px;
}
.anv_s3:last-child{
	margin:0;
}
.anv_s3_headline{
	padding:5px 0;
	font-size:16px;
	text-align:center;
	color:@white;
	background-color:@gold;
}
.anv_s3_grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	align-items:center;
	grid-gap:10px;

	.column{
		height:100%;
		overflow:hidden;

		img{
			width:100%;
			height:100%;
			object-fit:cover;
		}
	}
}
.anv_s3_grid.col3{
	grid-template-columns:66.666% 1fr;

	.column:nth-child(1){
		grid-row:~'1/3';
	}
	.column:nth-child(2){
		grid-row:~'1/2';
	}
	.column:nth-child(3){
		grid-row:~'2/2';
	}
}


.anv_s4_grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	align-items:center;
	grid-gap:10px;

	.column{
		height:100%;
		overflow:hidden;

		img{
			width:100%;
			height:100%;
			object-fit:cover;
		}
	}
}


/*-------------------- 入会申込書 --------------------*/
.form_container{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	grid-gap:20px;
	margin-bottom:30px;
	padding:20px;
	background-color:@l_gray;
}
.form_title{
	grid-column:~'1/3';
	padding-bottom:5px;
	font-size:24px;
	font-weight:bold;
	border-bottom:1px solid @gray;
}
.form_box.full{
	grid-column:~'1/3';
}
.form_box{
	.headline{
		margin-bottom:10px;
		font-size:16px;
	}
	dl{
		margin:0 0 20px;

		dt{
			margin-bottom:3px;
			font-size:16px;
			font-weight:bold;
		}
		dd{
			margin:0;

			input[type="text"], input[type="tel"]{
				width:100%;
				padding:15px;
				border:1px solid @gray;
				border-radius:5px;
				box-sizing:border-box;
			}
		}
		/*---------- photo ----------*/
		.photo{
			max-width:300px;
			background-color:@white;
			overflow:hidden;

			img{
				width:100%;
				height:100%;
				object-fit:contain;
			}
			button{
				width:100%;
				padding:10px;
				font-size:14px;
				color:@white;
				background-color:@green;
				border-radius:5px;
			}
		}
		/*---------- address ----------*/
		.address{
			display:grid;
			grid-template-columns:repeat(2, 1fr);
			grid-gap:5px 10px;

			li{
				font-size:14px;
			}
			li:last-child{
				grid-column:~'1/3';
			}
		}
		/*---------- date ----------*/
		.date{
			display:grid;
			grid-template-columns:1fr 40px;
			grid-gap:10px;

			button{
				height:100%;
				padding:5px;
				font-size:14px;
				color:@white;
				background-color:@red;
				border-radius:5px;
			}
		}
		/*---------- family ----------*/
		.family{
			ul{
				li{
					display:grid;
					grid-template-columns:repeat(3, 1fr) 40px;
					align-items:center;
					grid-gap:10px;
					margin-bottom:15px;

					button{
						height:100%;
						padding:5px;
						font-size:14px;
						color:@white;
						background-color:@red;
						border-radius:5px;
					}
				}
			}
			> button{
				display:block;
				width:100%;
				max-width:300px;
				margin:0 auto;
				padding:10px;
				font-size:14px;
				color:@white;
				background-color:@green;
				border-radius:5px;
			}
		}
	}
	dl:last-child{
		margin:0;
	}
}
.form_save{
	max-width:50%;
	margin:0 auto;

	button{
		width:100%;
		padding:10px;
		font-size:18px;
		color:@white;
		background-color:@blue;
		border-radius:5px;
	}
}

/*---------- jSignature ----------*/
.jSignature_area{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	grid-gap:10px;

	.canvas{
		grid-column:~'1/3';
		background-color:@l_sky;
		border:1px solid @gray;
		border-radius:5px;
		overflow:hidden;
	}
	button{
		padding:10px;
		color:@white;
		border-radius:5px;
	}
	button.clear{
		background-color:@d_gray;
	}
	button.save{
		background-color:@green;
	}
	button.active{
		background-color:@red;
	}
	button:disabled{
		background-color:@d_gray;
	}
	.view{
		grid-column:~'1/3';

		img{
			background-color:@white;
			border:1px solid @gray;
			border-radius:5px;
		}
	}
}

/*-------------------- password --------------------*/
.pass_area{
	max-width:600px;
	margin:0 auto;
	text-align:center;

	p{
		margin-bottom:10px;
		font-size:16px;
	}
	.form{
		display:grid;
		grid-template-columns:1fr 100px;
		align-items:center;

		input{
			width:100%;
			padding:20px;
			font-size:16px;
			border:1px solid @gray;
			box-sizing:border-box;
			outline:none;
		}
		button{
			height:100%;
			color:@white;
			background-color:@blue;
		}
	}

	/*member_detail用passwordページ*/
	.form---member_pass{
		grid-template-columns:repeat(2, 1fr);
		gap:20px;

		dl{
			display:flex;
			flex-direction:column;
			gap:5px;

			dt{
				text-align:left;
			}
		}

		dl:last-child{
			grid-column:~"1/3";
		}
	}

	.member_pass{
		color:@white;
		background-color:@blue;
		padding:20px;
		width:100%;
		margin-top:20px;
	}
}

/*-------------------- 例会報 --------------------*/
.news_area{
	max-width:700px;
	margin:0 auto;

	.title{
		display:flex;
		justify-content:center;
		/* align-items:center; */
		flex-direction:column;
		gap:5px;
		margin-bottom:20px;
		font-size:24px;

		span{
			font-size:16px;
		}
	}
	.link{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		align-items:center;
		gap:10px;

		a{
			display:block;
			padding:15px;
			font-size:20px;
			text-align:center;
			color:@white;
			background-color:@blue;
			transition:0.3s;
		}
		a:hover{
			opacity:0.7;
		}
	}
}

/*-------------------- クラブメンバー --------------------*/
.member_sort{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:15px;

	select{
		padding:10px 30px 10px 10px;
		border:1px solid @gray;
	}
}

.search_option{
	display:flex;
    gap:20px;

	.member_sort{
		display:flex;
		align-items:center;
		gap:10px;
		margin-bottom:15px;

		select{
			padding:10px 30px 10px 10px;
			border:1px solid @gray;
		}
	}
	.member_search{
		margin-bottom:15px;
		display:flex;
    	align-items:center;

		input{
			border:1px solid @gray;
			height:100%;
			width:210px;
		}
		button{
			color:@white;
			background:@blue;
			height:100%;
    		width:45px;
		}
		.reset{
			background:@red;
			width:100px;
			margin-left:10px;
		}
	}


}

.member_container{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:15px;
}
.member_column{
	display:grid;
	grid-template-columns:80px 1fr;
	align-items:center;
	gap:0 15px;
	padding:10px;
	border:1px solid @gray;

	.img{
		width:100%;
		height:80px;
		border-radius:50%;
		overflow:hidden;

		img{
			width:100%;
			height:100%;
			object-fit:cover;
		}
	}
	dl{
		display:grid;
		grid-template-columns:60px 1fr;
		align-items:center;
		gap:10px;
		height:100%;
	}
}


.member_column_detail{
	display: flex;
    flex-direction: column;
    align-items: stretch;
	padding:0;

	a{
		text-decoration: underline;
	}

	.member_column_top{
		display:grid;
    	grid-template-columns:80px 1fr;
		align-items:center;
		gap:0 15px;
		padding:10px;

		.img{
			height:80px;
		}

		.f9{
			font-size:9px;
		}
		.f17{
			font-size:17px;
		}

		dl{
			height:unset;
		}
	}

	.profile_detail{
		border-top: 1px solid #ccc;
		padding:10px;
		background: #f8f8f8;
		display:flex;
		flex-direction:column;
		gap:10px;
		height:100%;

		dl{
			grid-template-columns: 90px 1fr;
			height:unset;
		}

		p{
			font-weight:bold;
			font-size: 15px;
		}
	}
	.form_detail:nth-child(2){
		border-top:1px solid @gray;
    	padding-top:10px;
	}
}

/*-------------------- スケジュール --------------------*/
.schedule_lists{
	.toggle_class{
		margin-bottom:10px;
		text-align:right;
		button{
			background-color:@blue;
			color:@white;
			padding:10px;
			font-size:15px;
			touch-action:manipulation;
			border-radius:5px;
		}
	}
	table{
		width:100%;
		border-collapse:collapse;

		tr{
			border:1px solid @gray;

			&:nth-child(even){
				background-color:@l_gray;
			}
			td{
				padding:10px;

				button{
					padding:10px 20px;
					color:@white;
					background-color:@green;
					border-radius:5px;
					transition:0.3s;
				}
				button.gray{
					background-color:@gray;
				}

				.attend_circle{
					height:28px;
					display:flex;
					justify-content:center;
					align-items:center;
					padding:5px;
					border-radius:5px;
					font-weight:bold;
					background:@white;
				}
				.attend_circle.gray{
					border:1px solid #777272;
    				color:#777272;
				}

				.attend_circle.green{
					border: 1px solid @green;
					color:@green;
				}

				.attend_circle.red{
					border: 1px solid @red;
					color:@red;
				}
			}


		}

		tr.past.active{
			display:none;
		}

	}
}

/*---------- 出欠の名前オートコンプリート ----------*/
.ac_form{
	position:relative;
}
.ac_modal_container{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	max-height:100px;
	background-color:@l_gray;
	border:1px solid @gray;
	overflow:auto;
	box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);
	z-index:10;
}
.ac_modal_column{
	padding:5px 10px;
	border-bottom:1px solid @gray;
	cursor:pointer;
	transition:0.3s;

	&:last-child{
		border:none;
	}
	&:hover{
		background-color:@gray;
	}
}


/*-----------------------------------------------------*/
/*-------------------- junior-golf --------------------*/
/*-----------------------------------------------------*/

/*---------- junior_golf > mv ----------*/
.jg_area{
	padding:50px 0;
	background-image:url('../images/junior-golf/backgroung.png');
	background-repeat:no-repeat;
	background-size:cover;
}
.jg_mv{
	position:relative;
	height:800px;
	margin:0 auto;
	max-width:100%;
	text-align:center;
	overflow:hidden;
	z-index:1;
}
.jg_mv .title{
	position:absolute;
	top:20%;
	left:50%;
	transform:translateX(-50%);
	font-family:'OtomanopeeOne-Regular';
	font-size:110px;
	font-weight:bold;
	line-height:130px;
	text-align:center;
	z-index:3;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:jg_mv_text;
}
@keyframes jg_mv_text{
	0%, 66%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
.jg_mv .title span{
	-webkit-text-stroke:1px #ffffff;
	text-stroke:1px #ffffff;
}
.jg_mv .title span:nth-child(1){
	display:block;
}
.jg_mv .title span:nth-child(2){
	display:inline-block;
	color:#4285f4;
}
.jg_mv .title span:nth-child(3){
	display:inline-block;
	color:#ea4335;
}
.jg_mv .title span:nth-child(4){
	display:inline-block;
	color:#fbbc05;
}
.jg_mv .title span:nth-child(5){
	display:inline-block;
	color:#34a853;
}
.jg_mv .title span:nth-child(6){
	display:inline-block;
	color:#ce3cce;
}
.jg_mv .text{
	position:absolute;
	top:55%;
	left:50%;
	transform:translateX(-50%);
	padding:20px 30px;
	font-size:36px;
	font-family:'MochiyPopOne-Regular';
	font-weight:normal;
	line-height:48px;
	color:#444444;
	background-color:#ededec;
	border:2px #444444 solid;
	border-radius:45px;
	overflow:hidden;
	z-index:3;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:jg_mv_text;
}
@keyframes jg_mv_text{
	0%, 66%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
.boru_image{
	position:absolute;
	top:8%;
	left:50%;
	transform:translateX(-50%);
	width:60%;
	z-index:2;
	animation-duration:2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:boru_image;
}
@keyframes boru_image{
	0%, 50%{
		top:83%;
		left:20%;
		width:5%;
		opacity:0;
	}
	100%{
		top:8%;
		left:50%;
		transform:translateX(-50%);
		opacity:1;
	}
}
.effect_image{
	position:absolute;
	bottom:8%;
	left:16%;
	width:32%;
	z-index:1;
	animation-duration:2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:effect_image;
}
@keyframes effect_image{
	0%, 50%{
		width:0%;
		opacity:0;
	}
	100%{
		width:32%;
		opacity:1;
	}
}
.rich_kid1{
	position:absolute;
	bottom:1%;
	left:0%;
	width:22%;
	z-index:1;
	animation-duration:1s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:rich_kid1;
}
@keyframes rich_kid1{
	0%, 50%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
.rich_kid2{
	position:absolute;
	top:2%;
	left:62%;
	transform:rotate(60deg);
	width:21%;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:rich_kid2;
}
@keyframes rich_kid2{
	0%, 66%{
		top:15%;
		left:48%;
		opacity:0;
	}
	100%{
		top:2%;
		left:62%;
		opacity:1;
	}
}
.rich_kid3{
	position:absolute;
	right:1%;
	bottom:1%;
	width:22%;
	z-index:4;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:rich_kid3;
}
@keyframes rich_kid3{
	0%, 66%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
.rich_kid4{
	position:absolute;
	top:9%;
	left:12%;
	transform:rotate(-55deg);
	width:22%;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:rich_kid4;
}
@keyframes rich_kid4{
	0%, 66%{
		top:23%;
		left:25%;
		opacity:0;
	}
	100%{
		top:9%;
		left:12%;
		opacity:1;
	}
}
.rich_kid5{
	position:absolute;
	top:3%;
	left:27%;
	transform:rotate(-35deg);
	width:11%;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:rich_kid5;
}
@keyframes rich_kid5{
	0%, 66%{
		top:17%;
		left:35%;
		opacity:0;
	}
	100%{
		top:3%;
		left:27%;
		opacity:1;
	}
}

/*---------- junior_golf > container ----------*/
.jg_container{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
}
.jg_column{
	padding:0 30px;
}
.jg_box{
	margin-bottom:30px;
	padding:15px;
	background:rgba(255, 255, 255, 0.9);

	dl{
		margin:0 0 20px;

		dt{
			font-size:16px;
			font-weight:bold;
		}
		dd{
			margin:0;
			padding-left:6px;
			font-size:16px;
			font-weight:bold;
			line-height:24px;

			a{
				font-size:inherit;
			}
			.lg{
				display:block;
				margin-top:5px;
				padding:5px 10px;
				font-size:18px;
				font-weight:bold;
				color:@white;
				background-color:@red;
				border-radius:10px;
			}
		}
	}
	dl:last-child{
		margin:0;
	}
	img{
		max-width:100%;
	}
	p{
		margin-top:15px;
		font-size:16px;
		font-weight:bold;

		a{
			font-size:16px !important;
			text-decoration: underline;
			color:#00539b;
		}
	}
}
.jg_box:last-child{
	margin:0;
}

/*---------- junior_golf > bottom ----------*/
.jg_bottom_image{
	display:flex;
	justify-content:flex-end;
	position:relative;
	margin-top:30px;
}
.jg_bottom_image img:first-child{
	position:absolute;
	bottom:10%;
	right:45%;
	transform:rotate(20deg);
	width:25%;
}
.jg_bottom_image img:last-child{
	width:45%;
}
@media(max-width:1200px){
	.jg_mv{
		height:66.667vw;
	}
	.jg_mv .title{
		font-size:9.167vw;
		line-height:10.833vw;
	}
	.jg_mv .text{
		padding:1.667vw 2.5vw;
		font-size:3vw;
		line-height:4vw;
		border-radius:3.75vw;
	}
}

/*---------- junior_golf > contact ----------*/
.jg_contact{
	display:flex;
	justify-content:center;
	align-items:center;
	grid-gap:30px;
	margin-top:50px;
	padding:0 30px;

	a{
		display:block;
		padding:15px 30px;
		font-size:24px;
		color:@white;
		border-radius:100px;
		transition:0.3s;
	}
	a:hover{
		opacity:0.7;
	}
	a:first-child{
		background-color:@green;
	}
	a:last-child{
		background-color:@yellow;
	}
}

.jg_sub_area{
	margin-top:50px;
	padding:0 30px;
}
.jg_sub_contents{
	h3{
		margin-bottom:10px;
		font-size:18px;
	}
	ol{
		margin:0;
		padding-left:20px;

		li{
			margin-bottom:5px;
			font-size:14px;
		}
		li:last-child{
			margin:0;
		}
	}
	p{
		font-size:14px;

		a{
			color:#00539b;
			text-decoration: underline;
		}
	}
}
/*---------- junior_golf > Q&A ----------*/
.jg_qa_lists{
	display:grid;
	grid-gap:20px;
}
.jg_qa_box{
	overflow:hidden;

	dl{
		display:flex;
		justify-content:flex-start;
		align-items:center;
		grid-gap:20px;
		margin:0;
		padding:10px 40px 10px 20px;
		z-index:2;

		dt{
			font-size:28px;
			font-weight:bold;
		}
		dt.blue{
			color:@blue;
		}
		dt.red{
			color:@red;
		}
		dd{
			margin:0;
			font-size:14px;

			a{
				color:#c21f32;
				font-weight: bold;
				text-decoration: underline;
			}
		}
	}
	.jg_q{
		position:relative;
		background-color:@l_gray;
		cursor:pointer;
		transition:0.3s;
	}
	.jg_q:hover{
		background-color:@gray;
	}
	.jg_q:before{
		content:'';
		position:absolute;
		top:calc(50% - 5px);
		right:20px;
		width:10px;
		height:10px;
		border-right:2px solid @dd_gray;
		border-bottom:2px solid @dd_gray;
		transform:translateY(-50%) rotate(45deg);
	}
	.jg_q.active:before{
		top:calc(50% + 5px);
		transform:translateY(-50%) rotate(-135deg);
	}
	.jg_a{
		display:none;
		background-color:@l_gray;
		border-top:1px solid @gray;
	}
}


/*-------------------------------------------------*/
/*-------------------- contact --------------------*/
/*-------------------------------------------------*/
.contact_headline{
	margin-bottom:30px;
	padding:20px;
	background-color:@l_gray;
	border:1px solid @gray;

	h2{
		margin-bottom:20px;
		padding-bottom:15px;
		font-size:24px;
		line-height:34px;
		text-align:center;
		border-bottom:2px solid @blue;
	}
	p{
		font-size:16px;
		text-align:center;
	}
	.return a{
		display:block;
		max-width:300px;
		margin:20px auto 0;
		padding:20px 0;
		font-size:24px;
		font-weight:bold;
		text-align:center;
		text-decoration:none;
		color:@white;
		background-color:@blue;
		border-radius:100px;
		cursor:pointer;
		transition:0.3s;
	}
	.return a:hover{
		opacity:0.7;
	}
}
.contact_container{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	align-items:flex-start;
	grid-gap:20px;

	dl{
		margin:0 0 10px;

		dt{
			font-size:14px;
		}
		dd{
			margin:0;
			font-size:14px;
		}
	}
	dl:last-child{
		margin:0;
	}
}

/*---------- contact > form ----------*/
.contact_form{
	padding:20px;
	background-color:@l_gray;
	border:1px solid @gray;

	dl{
		display:grid;
		grid-template-columns:210px 1fr;
		grid-gap:20px;
		align-items:center;
		margin:0 0 20px;

		dt{
			.title{
				font-size:14px;
			}
			.label{
				display:inline-block;
				padding:5px 15px;
				font-size:12px;
				line-height:1;
				color:#ffffff;
				background-color:#d80c18;
				border-radius:100px;
			}
		}
		dd{
			margin:0;

			input[type="text"], input[type="email"], textarea, select{
				width:100%;
				padding:20px;
				font-family:auto;
				font-size:14px;
				vertical-align:bottom;
				color:@black;
				background-color:@white;
				border:1px solid @gray;
				border-radius:0;
				box-sizing:border-box;
				outline:none;
				resize:vertical;
			}
			input:disabled{
				background-color:@gray;
			}
			select{
				background-image:url('../images/select_cursor.png');
				background-position:center right 10px;
				background-repeat:no-repeat;
				background-size:12px;
			}
			/*---------- sa ----------*/
			.sa{
				display:flex;
				flex-wrap:wrap;
				justify-content:flex-start;
				align-items:center;
				grid-gap:10px;
				padding:10px 0;
			}
			/*---------- contact > confirm ----------*/
			.confirm{
				padding:20px;
				font-family:auto;
				font-size:14px;
				background-color:@white;
				border:1px solid @gray;

				span{
					display:block;
				}
			}
			.confirm.textarea{
				min-height:200px;
			}
		}
	}
	dl.flex_start{
		align-items:flex-start;

		dt{
			padding-top:10px;
		}
	}
}
.contact_birthday{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	align-items:center;
	grid-gap:20px;

	li{
		display:flex;
		align-items:center;
		grid-gap:5px;
	}
}
.contact_address{
	display:grid;
	grid-template-columns:20% 20% 1fr;
	align-items:center;
	grid-gap:20px;

	li{
		display:flex;
		align-items:center;
		grid-gap:5px;
	}
}
/*---------- contact > submit ----------*/
.contact_submit{
	display:flex;
	justify-content:center;
	align-items:center;
	grid-gap:20px;

	input{
		width:100%;
		max-width:300px;
		padding:20px 0;
		font-size:24px;
		font-weight:bold;
		text-align:center;
		border-radius:100px;
		cursor:pointer;
		transition:0.3s;
	}
	input:hover{
		opacity:0.7;
	}
	input.yellow{
		color:#ffffff;
		background-color:@yellow;
		border:1px solid @yellow;
	}
	input.gray{
		color:#ffffff;
		background-color:@dd_gray;
		border:1px solid @dd_gray;
	}
	input.green{
		color:#ffffff;
		background-color:@green;
		border:1px solid @green;
	}
}
/*---------- contact > return ----------*/
.contact_return{
	max-width:380px;
	margin:0 auto;

	a{
		display:block;
		padding:30px 0;
		font-size:24px;
		font-weight:bold;
		text-align:center;
		color:#ffffff;
		background-color:#d80c18;
		border:1px solid #d80c18;
		border-radius:100px;
		cursor:pointer;
		transition:0.3s;
	}
	a:hover{
		color:#d80c18;
		background-color:#ffffff;
	}
}


/*---------- junior-golf > schedule ----------*/
.schedule_area{
	dl{
		display:grid;
		grid-template-columns:100px 1fr;
		grid-gap:10px;
		margin:0;
		padding:10px 0;
		border-top:1px solid @gray;

		dt{
			margin:0;
		}
		dd{
			margin:0;
		}
	}
	.memo{
		padding-top:10px;
		border-top:1px solid @gray;
	}
}

/*------------------------------------------------------*/
/*-------------------- sub-page-end --------------------*/
/*------------------------------------------------------*/