@charset "utf-8";

:root {
--color-primary:#143372;
--color-secondary: #ab9155;
--color-accent: #a54545;

/* テキストカラー */
--text-primary: #222;
--text-secondary: #ab9155;

/* 境界・背景カラー */
--border-color: #c3c3c3;
--bg-beige:#f1eee7;
--bg-lightgrey:#f4f4f4;

/* フォントファミリー */
--font-primary:"Noto Sans JP", sans-serif; /* 400 */
--font-secondary:"Zen Old Mincho", serif; /* 700 */
--font-number:"EB Garamond", serif; /* 400 700 */
--font-english:"EB Garamond", serif; /* 400 700 */

/* フォントサイズ */
--font-size-body: clamp(1.5rem, 1.5vw + 0.5rem, 1.6rem);
--font-size-accent: clamp(1.7rem, 1.5vw + 0.5rem, 2rem);
--font-size-heading: clamp(2.4rem, 3vw + 0.8rem, 3.6rem);
--font-size-subheading: clamp(1.8rem, 2vw + 0.6rem, 2.4rem);
--font-size-caption: clamp(1.2rem, 1vw + 0.4rem, 1.4rem);

/* 行間 */
--line-height-base: 1.8;
--line-height-heading: 1.3;
--line-height-caption: 1.4;

/* 装飾 */
--shadow-primary: 2px 2px 10px rgba(38, 34, 30, 0.3);
}

/* Body
========================================== */
html{}
html, body {
	width: 100%;
	font-size: 62.5%;
	overflow-x: clip; /*sticky用*/
}
body {
	line-height: var(--line-height-base);
	background-color: #fff;
	font-size: var(--font-size-body);
	font-family: var(--font-primary);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--text-primary);
}
@media screen and (max-width: 599px) {
	body {word-wrap: break-word;font-size: 1.5rem;}
}

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

/* header
========================================== */
.headerArea {
	z-index: 1200;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	filter: drop-shadow(var(--shadow-primary));
	transition: transform 0.3s ease-in-out; 
}
.headerArea.is-hide {
    transform: translateY(-100%); 
}
.headerArea .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 70px;
	padding: 10px 20px;
	background:url(assets/img/header_bg.png) right top/cover no-repeat;
}

.headerLogo a{display: block;}
.headerLink{
	display: flex;
	align-items: center;
	height: 70px;
}
.headerLink a{display: block;}
.headerLogo a:hover,
.headerLink a:hover{opacity: 0.7;transition: 0.3s;}

.headerNaviWrap {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    margin-left: auto;
    width: fit-content;
    padding: 10px 15px 10px 80px;
    position: relative;
    background-color: transparent;
}
.headerNaviWrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50px 100%);
    z-index: -1;
}
.headerNavi{}
.headerNavi > ul{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3em;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 45px;
}
.headerNavi > ul > li{
	position: relative;
}
.headerNavi > ul > li > a {
	line-height: 1.3;
	display: block;
	padding: 10px 0;
	color:var(--text-primary);
	font-weight: 500;
	text-decoration: none;
	text-align: center;
}
.headerNavi > ul > li > a:hover{text-decoration: underline;}

.headerNavi .subMenu .hasLink{
	display: flex;
	align-items: center;
	gap: 10px;
}
.subMenuBox{
	position: absolute;
	top: 100%;
	left: 50%;
	width: fit-content;
	transform: translateX(-50%);
	max-width: 90vw;
	opacity: 0;
	visibility: hidden;
	box-sizing: border-box;
	transition: all 0.3s ease;
	z-index: 3000;
	padding: 1.2em 1.5em;
	background-color:var(--color-primary);
}
.headerNavi > ul .subMenu:hover .subMenuBox {
    opacity: 1;
    visibility: visible;
}

.subMenuList{
	display: flex;
	flex-direction: column;
	gap:0.4em 0;
}
.subMenuList > li{
	position: relative;
	padding-left: 20px;
}
.subMenuList > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1em;
	width: 10px;
	height: 1px;
    background-color:#fff;
    transition: 0.3s;
}
.subMenuList > li a{
	display: inline-block;
	white-space: nowrap;
	width: 100%;
	color: #fff;
	text-decoration: none;
	transition: 0.3s;
}
.subMenuList > li a:hover{
	text-decoration: underline;
}

select.gt_selector option[value=""] {
    display: none !important;
}
.headerLang{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.headerLang select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 5px 32px 5px 10px;
	color: #333;
	font-size:1.4rem;
	box-sizing: border-box;
	cursor: pointer;
}
.headerLang::after {
	content:"▼";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #666;
	pointer-events: none;
}

.spMenuWrap{display: none;}
@media screen and (max-width: 1024px) {
	.headerNavi ul{
		gap: 2em;
		font-size: 1.5rem;
	}
}
@media screen and (max-width: 960px) {
	.headerNavi ul{
		gap: 1.5em;
		font-size: 1.4rem;
	}
}

@media screen and (max-width:840px){
	.headerArea{}
	.headerArea .inner{
		padding: 0 10px;
		height: 50px;
	}
	.headerLogo{padding:0;}
	.headerLogo img{width: 200px;height: auto;}
	.headerNaviWrap,
	.headerLang,
	.headerLink{display: none;}

	.spMenuWrap{display: block;}
	.spBtn{
		opacity: 1;
		pointer-events: auto;
		position:fixed;
		top:0;
		right:0;
		display: inline-block;
		width: 50px;
		height:50px;
		padding: 12px 13px 20px;
		background-color:#0d224c;
		cursor: pointer;
		z-index: 2000;

		/*線を消す*/
		outline: none;
        border: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
	}
	.spBtn::after{
		position: absolute;
		left: 0;
		bottom: 3px;
		content: "MENU";
		text-align: center;
		width: 50px;
		font-size: 9px;
		color: #fff;
	}
	.spBtn.active::after{content: "CLOSE";}
	.spBtn div {position: relative;}
	.spBtn span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background:#fff;
		left: 0;
		transition: .3s ease;
	}
	.spBtn span:nth-child(1) {top: 0;}
	.spBtn span:nth-child(2) {top: 8px;}
	.spBtn span:nth-child(3) {top: 16px;}
	.spBtn.active span:nth-child(1) {
		top: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.spBtn.active span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.spBtn.active span:nth-child(3) {
		top: 8px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

    .spMenu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: fixed;
        top: 0; right: 0;
        width: 90%;
        height: 100%;
        z-index: 1000;
        transition: transform 0.3s ease;
        padding: 80px 2em 50px;
		background-image: linear-gradient(180deg, #0d224c, #143372 30%, #10295c);
        transform: translateX(100%);
    }
    .spMenu.active {
        transform: translateX(0);
    }
	.spMenu::-webkit-scrollbar{width: 10px;}
	.spMenu::-webkit-scrollbar-track{background: transparent;}
	.spMenu::-webkit-scrollbar-thumb {background: transparent;}

	.overlay {
		z-index: 1000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}
	.overlay.active {
		opacity: 1;
		pointer-events: auto;
	}

	.spLang{
		position: relative;
		margin: 0 auto;
		width: fit-content;
	}
	.spLang select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background-color: #fff;
		border: 1px solid #ccc;
		padding: 5px 32px 5px 10px;
		color: #333;
		font-size:1.2rem;
		box-sizing: border-box;
		cursor: pointer;
		text-align: left;
	}
	.spLang::after {
		content:"▼";
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 10px;
		color: #666;
		pointer-events: none;
	}

	.spNavi{
		margin: 30px 0 50px;
		border-top: 1px solid rgba(255,255,255,0.3);
	}
	.spNavi > ul > li{
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	.spNavi > ul > li > a{
		position: relative;
		display: block;
		padding:15px 20px;
		font-optical-sizing: auto;
		font-size: 1.5rem;
		font-weight: 500;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}
	.spNavi > ul > li .course{
		display: flex;
		flex-wrap: wrap;
		margin-left: 2em;
		margin-bottom: 20px;
		gap:.6em 1.5em;
	}
	.spNavi > ul > li .course li a{
		font-size: 1.5rem;
		font-weight: 500;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}
	.spNavi > ul > li.externalLink a{
		position: relative;
		padding-right:25px;
	}
	.spNavi > ul > li.externalLink a::after{
		position: absolute;
		content: "";
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width:20px;
		height:20px;
		mask-image: url(assets/img/arrow-square-out.svg);
		-webkit-mask-image: url(assets/img/arrow-square-out.svg);
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: contain;
		-webkit-mask-size: contain;
		background-color:#fff;
	}
	.spNavi li a:hover,
	.spNavi > ul > li .course li a:hover{text-decoration: underline;}

	.spInfo{
		display: flex;
		flex-direction: column;
		gap: 20px;
		text-align: center;
		color: #fff;
	}
	.spInfo .spLogo{}
	.spInfo .spLogo img{max-width: 80%;height: auto;}
	.spInfo .spLogo a{display: block;}
	.spInfo .spName{
		font-family: var(--font-secondary);
		font-size: var(--font-size-accent);
		font-weight: 900;
	}
	.spInfo .spTel{
		font-family: var(--font-number);}
	.spInfo .spTel a{
		line-height: 1.2;
		width: fit-content;
		margin: 0 auto;
		padding-left: 10px;
		text-decoration: none;
		font-size:3rem;
		color: #fff;
	}
	.spInfo .spTel .hours{
		display: block;
	}
	.spInfo .spFax{
		font-family: var(--font-number);
	}
	.spInfo .spFax span{
		line-height: 1.2;
		width: fit-content;
		margin: 0 auto;
		padding-left: 10px;
		text-decoration: none;
		font-size:3rem;
		color: #fff;
	}
	.spLink{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 20px;
		margin-top: 40px;
	}
}

/* contents
========================================== */
/*.wrap{overflow: hidden;}*/
.contents {
	margin: 0 auto;
	width: 100%;
}
.contents p+p {margin-top: 1.5em;}
.contentsInner {
	margin: 0 auto;
	padding: 30px 0 60px;
	width: 1200px;
}

@media screen and (max-width:1200px) {
	.contentsInner {
		width: 100%;
		padding: 30px 30px 60px;
	}
}

@media screen and (max-width:599px) {
	.contentsInner {
		padding: 50px 20px;
	}
}

/* mv
========================================== */
.mvArea {
	width: 100%;
}
.mvArea .mvSlider img{
	width: 100%;
	height: auto;
}

/* 新着情報
========================================== */
.newsArea{
	margin: 0 auto;
	padding: 80px 0;
	background: url(assets/img/news_bg.png)left top/cover no-repeat;
}
.newsArea .contentsInner{
	background-color: #fff;
	padding:60px;
}

.newsWrap{
	display: flex;
}
.newsWrap .tabs{
	display: flex;
	flex-direction: column;
	gap: 1em;
	border-right: 1px solid var(--border-color);
	padding:30px 60px 30px 0;
}

.newsWrap .tabs li a{
	position: relative;
	display:block;
	padding: .6em 1em .6em 30px;
	color: #929292;
	font-family: var(--font-secondary);
	text-decoration: none;
	transition: 0.3s;
}
.newsWrap .tabs li a::before{
	content: "";
	position: absolute;
	top: 1.2em;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background-color:#929292;
}
.newsWrap .tabs li a:hover,
.newsWrap .tabs li a.active{
	color: var(--font-primary);
}
.newsWrap .tabs li a:hover::before,
.newsWrap .tabs li a.active::before{
	background-color: var(--color-primary);
}

.newsWrap .panels{
	flex: 1;
	padding-left: 60px;
}
.newsWrap .panels > .panel{display: none;}
.newsWrap .panels > .panel.active{
	display: block;
}

.newsWrap .panels > .panel .btnLink{text-align: right;margin-top: 30px;}

@media screen and (max-width:840px){
	.newsArea .contentsInner{
		padding:60px 30px;
	}

}
@media screen and (max-width:599px){
	.newsArea{
		padding:0;
	}
	.newsWrap{
		flex-direction: column;
	}
	.newsWrap .tabs{
		flex-direction: row;
		flex-wrap: wrap;
		gap:0 1em;
		border-right:none;
		padding:0;
		width: 100%;
	}
	.newsWrap .panels{
		margin-top: 30px;
		width: 100%;
		padding-left:0;
	}
	.newsWrap .panels > .panel .btnLink{text-align: center;}
}

@media screen and (max-width:380px){

}

.newsList > li{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em 1.5em;
	padding: 1em 1em 1em 55px;
	border-bottom: 1px solid var(--border-color);
}
.newsList > li.pin::before{
	content: "";
	position: absolute;
	top: 20px;
	left: 10px;
	background: url(assets/img/icon_pin.svg) left top/contain no-repeat;
	width: 20px;
	height: 20px;
}
.newsList > li .date{
	font-family: var(--font-number);
	color: #929292;
}
.newsList > li .category{
	display: flex;
	align-items: center;
	gap:.6em 1em;
	line-height: 1;}

.newsList > li .category li{
	position: relative;
	font-family: var(--font-number);
	font-size: var(--font-size-caption);
	color: #ab9155;
}
.newsList > li .category li::before{
	content: "#";
	display: inline-block;
}
.newsList > li .category li a{
	text-decoration: none;
	color: #ab9155;
}
.newsList > li .category li a:hover{text-decoration: underline;}
.newsList > li .new{
	line-height: 1;
	display: inline-block;
	padding: 0.3em .4em;
	background-color: var(--color-accent);
	font-family: var(--font-number);
	font-size: var(--font-size-caption);
	color: #fff;
}
.newsList > li .title{width:100%;}
.newsList > li .title a{text-decoration: none;}
.newsList > li .title a:hover{text-decoration: underline;color: var(--color-primary);}


@media screen and (max-width:1200px) {

}
@media screen and (max-width:840px) {

}
@media screen and (max-width:599px) {

}


/* 特集
========================================== */
.topicsArea{padding:30px 0;}

.topicsPdfLink{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 1080px;
	margin: 0 auto 30px;
}
.topicsPdfLink .item{
	width: calc((100% - 20px * 2)/3);
}
.topicsPdfLink .item a{
    position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6em;
    padding: 1em .5em;
    line-height: var(--line-height-heading);
    box-sizing: border-box;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    text-align: center;
    text-decoration: none;
    font-family: var(--font-secondary);
    font-weight: 900;
    color: #fff;
    transition: .3s;
}
.topicsPdfLink .item a:hover{
	background-color: #fff;
	color: var(--color-primary);
}

.topicsList{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 30px;
	max-width: 800px;
	margin: 0 auto;
}
.topicsList .item{}
.topicsList .item a{
	display: block;
	text-align: center;
}
.topicsList .item a img{
	max-width: 100%;
	height: auto;
}
.topicsList .item a:hover img{
	opacity: .7;
	transition: .3s;
}


@media screen and (max-width:599px) {
	.topicsArea{padding:0;}
	.topicsPdfLink{gap: 10px;}
	.topicsPdfLink .item{
		width: calc((100% - 10px)/2);
	}
	.topicsPdfLink .item a{
		padding: 1.5em .5em;
		font-size: 1.4rem;}
	.topicsList{
		gap: 20px;
	}
	.topicsList .item{
		width: calc((100% - 20px)/2);
	}
}
@media screen and (max-width:320px) {
	.topicsPdfLink .item{
		width:100%;
	}
	.topicsPdfLink .item a{
		min-height: auto;
	}
}

/* 予約について
========================================== */
.reserveArea{padding:30px 0 80px;}
.reserveArea .contentsInner{
	padding: 60px 5%;
	background-color: var(--bg-beige);}

.reserveWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 60px 30px;
	margin-top: 80px;
	margin-bottom: 60px;
}
.reserveWrap .item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc((100% - 30px * 2) / 3);
	padding: 40px 20px 30px;
	background-color: #fff;
	box-sizing: border-box;
}
.reserveWrap .item .icon{
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.reserveWrap .item .title {
	margin: 0 0 10px 0;
	text-align: center;
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 16px;
}
.reserveWrap .item .tel{
	line-height: var(--line-height-heading);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	font-family: var(--font-number);
}
.reserveWrap .item .tel a {
    text-decoration: none;
    font-size: var(--font-size-heading);
    color:#e10000;;
}
.reserveWrap .item .tel .hours {
    color:var(--color-accent);
	font-size:var(--font-size-accent)
}
.reserveWrap .item .btnLink {
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
}
.reserveWrap .item .btnLink a{
	width: 100%;
	min-width: 100%;
}
.reserveWrap .item .btnLink.red a{
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}
.reserveWrap .item .btnLink.green a{
	background-color: #485a36;
	border-color: #485a36;
	color: #fff;
}
.reserveWrap .item .btnLink.yellow a{
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
}

.reserveWrap .item .btnLink.red a::after,
.reserveWrap .item .btnLink.green a::after,
.reserveWrap .item .btnLink.yellow a::after{background-color: #fff;}

.reserveWrap .item .btnLink.red a:hover,
.reserveWrap .item .btnLink.green a:hover,
.reserveWrap .item .btnLink.yellow a:hover{
	color: var(--text-primary);
	background-color: #fff;
}
.reserveWrap .item .btnLink.red a:hover::after{background-color: var(--color-accent);}
.reserveWrap .item .btnLink.green a:hover::after{background-color:#485a36;}
.reserveWrap .item .btnLink.yellow a:hover::after{background-color: var(--color-secondary);}


.reserveAddress{
	display:flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap:20px 40px;
}
.reserveAddress .address{
	font-size: var(--font-size-accent);
}

.reserveAddress .map{text-align: center;}
.reserveAddress .map a{
	position: relative;
	display: inline-block;
	padding: 1.2em 60px 1.2em 70px;
	line-height: var(--line-height-heading);
	box-sizing: border-box;
	border: 1px solid var(--color-primary);
	background-color: #fff;
	text-align: center;
	text-decoration: none;
	font-family: var(--font-secondary);
	font-weight: 900;
	color: var(--color-primary);
	transition: .3s;
}
.reserveAddress .map a::before{
	content:"";
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	width:20px;
	height:25px;
	background: url(assets/img/icon_map.svg) left top/contain no-repeat;
	transition: .3s;
}
.reserveAddress .map a::after{
	content:"";
	display:block;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 6px;
	height:6px;
	background-color:var(--color-primary);
	border-radius: 9999px;
	transition: .3s;
}
.reserveAddress .map a:hover{
	background-color: var(--color-primary);
	color: #fff;
}
.reserveAddress .map a:hover::before{
	background-image: url(assets/img/icon_map_white.svg);
}
.reserveAddress .map a:hover::after{background-color: #fff;}

.reserveArea .access{
	margin: 20px auto 0;
	width: fit-content;
	font-size: var(--font-size-accent);
}
.reserveArea .access strong{
	color:#e10000;
	font-weight: 900;
	font-size: 120%;
}

@media screen and (max-width:1200px) {
}

@media screen and (max-width:840px) {
	.reserveWrap {
		gap: 40px 20px;
		margin-top: 60px;
	}
	.reserveWrap .item {
		width: calc((100% - 30px) / 2);
	}
}
@media screen and (max-width:599px) {
	.reserveArea{padding:0;}
	.reserveWrap{
		margin-top: 0;
		gap: 0;
		background-color: #fff;
	}
	.reserveWrap .item {
		width:100%;
		padding:25px 20px;
		border-bottom: 1px solid var(--border-color);
	}
	.reserveWrap .item .icon{display: none;}
	.reserveWrap .item .btnLink a{
		width: 80%;
		min-width: 80%;
	}
}
@media screen and (max-width:380px) {
	.reserveWrap .item .btnLink a{
		width: 100%;
		min-width: 100%;
	}
}

/* メッセージ
========================================== */
.aboutArea{
	padding: 80px 0;
	background:url(assets/img/about_bg.jpg) left bottom/cover no-repeat;
}
.aboutTitle{
	margin-bottom: 2em;
	font-family: var(--font-secondary);
	font-size:  clamp(2.2rem, 2vw + 0.6rem, 2.8rem);
	font-weight: 900;
	text-align: center;
	color:#fff;
}
.aboutTitle span{
	display: inline-block;
}
.aboutText{
	line-height: 2.5;
	text-align: center;
	color:#fff;
}

@media screen and (max-width:840px) {
	.aboutArea{
		padding-right:1em;
		padding-left:1em;
		background-image:url(assets/img/about_bg_sp.png) ;
	}
	.aboutText{
		text-align: left;
	}
	.aboutText .sp-no{display: none;}
}
@media screen and (max-width:599px) {

}

/* コース
========================================== */
.courseArea{
	padding: 80px 0;
	background:url(assets/img/course_bg.jpg) right top/cover no-repeat;
}

.courseArea .courseTitle .ttlMain{
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 80px 50px 50px;
}
.courseArea .courseTitle .ttlMain::after{
	z-index: -1;
	content: "";
	position: absolute;
	top: 0;
	right:0;
	background-color: var(--bg-beige);
	width: 100vw;
	height: 100%;
}

.courseMenuList{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:0 auto 80px;
	width: 100%;
}
.courseMenuList .item{
	width: calc(100% /3);
	opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.courseMenuList .item:nth-child(1),
.courseMenuList .item:nth-child(3){
	padding-top: 60px;
}
.courseMenuList.active .item {
    opacity: 1;
    transform: translateY(0);
}
.courseMenuList.active .item-center {transition-delay: 0.2s;}
.courseMenuList.active .item-left {transition-delay: 0.4s;}
.courseMenuList.active .item-right {transition-delay: 0.6s;}

.courseMenuList img{
	width: 100%;
	height: auto;
}

@media screen and (max-width:840px) {
	.courseArea{
		padding:60px 0 0;
	}
}
@media screen and (max-width:599px) {
	.courseArea{
		padding:0;
	}
	.courseArea .courseTitle .ttlMain{
		position: relative;
		z-index: 2;
		margin: 0;
		padding: 40px 30px 20px;
	}
	.courseMenuList .item{
		width: calc(100% /2);
	}
	.courseMenuList .item:nth-child(1),
	.courseMenuList .item:nth-child(3){padding-top: 0;}

}
@media screen and (max-width:380px) {
	.courseMenuList .item{width:100%;}

}

/* クラブハウス
========================================== */
.clubhouseArea{
	padding: 80px 0;
	background-color: var(--bg-beige);
}
.clubhouseArea .lead{
	margin:3em auto 2em;
	line-height: var(--line-height-heading);
	font-family: var(--font-secondary);
	font-size: var(--font-size-subheading);
	font-weight: 900;
	text-align: center;
}

.clubhouseArea .text{
	line-height:2.2;
	text-align: center;
	word-break: keep-all;
    overflow-wrap: break-word;
}

.clubhouseImage {
	width: 100vw;
	max-width: 100vw;
	margin: 60px calc(50% - 50vw);
	overflow: hidden;
}
.clubhouseImage .inner {
	display: flex;
}
.clubhouseImage .inner .image {
    width: 50%;
}
.clubhouseImage .inner .image img {
    width: 100%;
	height: auto;
}
@media screen and (max-width: 840px) {
	.clubhouseArea{
		padding:0;
	}
}
@media screen and (max-width: 599px) {
	.clubhouseImage {
		margin:30px calc(50% - 50vw);
	}
	.clubhouseArea .text{
		text-align: left;
		word-break:normal;
	}
}

/* ボーダーボックス */
.courseBorderBox{
	display: flex;
	gap: 30px 5%;
	padding: 40px;
	margin: 60px auto;
	max-width: 1080px;
	box-sizing: border-box;
	border: 1px solid var(--color-primary);
	border-radius: 0 40px 0 40px;
	background-color: #fff;
}
.courseBorderBox .textBlock{
	flex: 1;
}
.courseBorderBox .textBlock .lead{
	margin: 0 0 1em;
	line-height: var(--line-height-heading);
	font-family: var(--font-secondary);
	font-size: var(--font-size-subheading);
	font-weight: 900;
}
.courseClubhouse{
	display: flex;
	gap:30px 5%;
	margin-bottom: 80px;
}

.courseClubhouse .imageBlock{
	width: 45%;
	text-align: center;
}
.courseClubhouse .imageBlock img{
	max-width: 100%;
	height: auto;
}
.courseClubhouse .textBlock{
	width: 55%;
}
.courseClubhouse .textBlock .lead{
	margin: 0 0 1em;
	line-height: var(--line-height-heading);
	font-family: var(--font-secondary);
	font-size: var(--font-size-subheading);
	font-weight: 900;
}
@media screen and (max-width: 599px) {
	.courseBorderBox{
		flex-direction: column;
		align-items: center;
		padding: 30px;
		margin: 0 auto;
		border-radius: 0 20px 0 20px;
	}
	.courseClubhouse{
		display: flex;
		flex-direction: column;
		margin-bottom: 60px;
	}
	.courseClubhouse .imageBlock,
	.courseClubhouse .textBlock{
		width: 100%;
	}
}

/* レストラン
========================================== */
.restaurantArea{
	padding: 10px 0;
	background-color: var(--bg-beige);
}
.restaurantInner{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap:20px 5%;
}
.restaurantInner .textBlock{
	flex: 1;
	padding-left: calc((100vw - 1200px)/2);
	padding-top: 30px;
	padding-bottom: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.restaurantInner .textBlock p{
	line-height: 2;
	margin-bottom: 2.5em;
	text-align: center;
}
.restaurantInner .imageBlock{
	width: 50%;
}
.restaurantInner .imageBlock img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width:1200px) {
	.restaurantInner .textBlock{
		padding: 30px 0 30px clamp(20px, 5vw, 30px);
	}
}

@media screen and (max-width:840px) {
	.restaurantArea{padding:0;}
	.restaurantInner{
		flex-direction: column;
	}
	.restaurantInner .textBlock{
		padding:30px clamp(20px, 5vw, 30px);
	}
	.restaurantInner .imageBlock{
		width: 100%;
	}
	.restaurantInner .imageBlock img{
		height: auto;
		aspect-ratio: 2/1;
	}
}
@media screen and (max-width:599px) {
	.restaurantInner .textBlock p{
		text-align: left;
	}
	.restaurantInner .textBlock p .sp-no{
		display: none;
	}
}


/* 施設紹介
========================================== */
.facilityArea{
	padding: 10px 0;
	background-color: var(--bg-beige);
}
.facilityInner{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: stretch;
	gap:20px 5%;
}
.facilityInner .textBlock{
	flex: 1;
    padding-right: calc((100vw - 1200px)/2);
	padding-top: 30px;
	padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.facilityInner .textBlock p{
	line-height: 2;
	margin-bottom: 2.5em;
	text-align: center;
}
.facilityInner .imageBlock{
	width: 50%;
}
.facilityInner .imageBlock img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.facilityMenuLink{
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(2,1fr);
}
.facilityMenuLink .btnLink a{
	width: 100%;
	min-width: 100%;
}

@media screen and (max-width:1200px) {
	.facilityInner .textBlock{
		padding:30px clamp(20px, 5vw, 30px) 30px 0 ;
	}
}

@media screen and (max-width:840px) {
	.facilityArea{padding:0;}
	.facilityInner{
		flex-direction: column;
	}
	.facilityInner .textBlock{
		padding:30px clamp(20px, 5vw, 30px);
	}
	.facilityInner .imageBlock{
		width: 100%;
	}
	.facilityInner .imageBlock img{
		height: auto;
		aspect-ratio: 2/1;
	}
}

@media screen and (max-width:599px) {
	.facilityInner .textBlock p{
		text-align: left;
	}
	.facilityInner .textBlock p .sp-no{
		display: none;
	}
}


/* よくあるご質問
========================================== */
.faqArea{padding: 80px 0;}
.faqList{
	margin-bottom: 60px;
}
.faqItem{
	margin-bottom: 30px;
	font-family: var(--font-secondary);
	font-weight: 900;
}
.faqToggle{
	position: relative;
	width: 100%;
	text-align: left;
	padding:1.5em 4em 1.5em 6em;
	border-bottom:1px solid var(--border-color);
	cursor: pointer;
	font-weight: 600;
}
.faqToggle::before{
	position: absolute;
	top: 0;
	left: 1em;
	content: "Q.";
	font-size:clamp(3rem, 3vw + 0.8rem, 4rem);;
	font-family: var(--font-english);
	font-weight: 400;
	color: var(--text-secondary);
}
.faqToggle::after {
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	content: "＋";
	font-size: 2.5rem;
	font-weight: 600;
	color: var(--color-primary);
	transition: transform 0.3s;
}
.faqToggle.active{}
.faqToggle.active::after {content: "－";}
.faqContent {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s ease;
	margin-left: 80px;
}
.faqContent .box{
	position: relative;
	padding:1.5em 1em 1.5em 5em;
	border-bottom:1px solid var(--border-color);
	box-sizing: border-box;
}
.faqContent .box::before{
	position: absolute;
	top: 0;
	left: .5em;
	content: "A.";
	font-size:clamp(3rem, 3vw + 0.8rem, 4rem);
	font-family: var(--font-english);
	font-weight: 400;
	color: var(--text-secondary);
}



@media screen and (max-width: 1200px) {
	.faqToggle{
		padding-left:5em;
	}
	.faqToggle::before{
		left: .5em;
	}
	.faqContent{margin-left: 0;}
}
@media screen and (max-width: 599px) {
	.faqArea{padding:0;}
	.faqToggle,
	.faqContent .box{padding: 1.2em 1em 1.2em 4em;}
	.faqToggle::after {
		right: .8em;
		font-size: 2rem;
	}
}

/* 会社案内
========================================== */
.companyArea{
	padding: 80px 0;
	background:url(assets/img/company_bg.jpg) right top/cover no-repeat;
}

.companyBox{
	background-color: rgba(255,255,255,0.8);
	width: 50%;
	padding:40px;
	filter: drop-shadow(var(--shadow-primary));
}
.companyBox p{
	margin-bottom: 2.5em;
}
.companyMenuLink{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.companyMenuLink .btnLink a{
	min-width: 200px;
}

@media screen and (max-width: 840px) {
	.companyBox{
		width: 100%;
		padding:30px;
	}
}
@media screen and (max-width: 599px) {
	.companyArea{padding:0;}
	.companyMenuLink .btnLink {}
	.companyMenuLink .btnLink a{
		min-width:260px;
	}
}

/* リンク
========================================== */
.linkArea{
	margin: 0 auto;
	padding: 100px 0 60px;
}
.linkWrap{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:30px 3.75%;
}
.linkWrap .item{
	width: calc((100% - 3.75% * 2)/3);
}
.linkWrap .item a{
	display: block;
	text-decoration: none;
	text-align: center;
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: var(--font-size-accent);
}
.linkWrap .item a img{width: 100%;height: auto;margin-bottom: 20px;}
.linkWrap .item a:hover img{opacity: .7;transition: .3s;}

@media screen and (max-width:1200px) {
	.linkArea{padding: 80px 0;}
}

@media screen and (max-width:599px) {
	.linkArea{padding:0;}
	.linkWrap .item{
		width: calc((100% - 3.75%)/2);
	}
}


/* footer
========================================== */
footer {
	padding-top: 100px;
	width: 100%;
	background-color: var(--color-primary);
}
.footerWrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto 60px;
	gap: 30px;
	max-width: 1200px;
}
.footerInfo{
	width: fit-content;
	font-size: var(--font-size-caption);
	color: #fff;
}
.footerInfo a:hover img{
	opacity: 0.7;
	transition: .3s;
}
.footerLogo {margin-bottom: 10px;}
.footerLogo a{display: block;}
.footerLogo img{
	max-width: 100%;
	height: auto;
}
.footerName{
	margin-top: 20px;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body);
}

.footerAddress{
	position: relative;
	margin-bottom: 1em;
}
.footerTel,
.footerFax{
	margin:0 0 1em;
	font-family: var(--font-secondary);
}
.footerTel a{
	line-height: 1.3;
	display:inline-block;
	margin: 0 auto;
	text-decoration: none;
	color:#fff;
}
.footerTel .hours{
	padding-left: 1em;
	font-size: var(--font-size-caption);
}

.footerLink{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin:0 0 30px;
}
.footerLink .btnLink{
	text-align: left;
}
.footerLink .btnLink a{
	min-width: 220px;
}
.footerLink .btnLink a:hover{
	border-color:rgba(255,255,255,0.4);
}

.footerSns{
	display: flex;
	align-items: center;
	gap:1em;
	margin: 1.5em 0;
}
.footerSns li{
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1;}
.footerSns li .text{
	line-height: 1.3;
	word-wrap: nowrap;
	font-size: 1.2rem;
}
.footerSns li img{
	max-width: 50px;
	height: auto;
}
.footerSnsMessage{
	font-size: 1.2rem;
	color: #fff;
}


.footerNaviWrap{
	flex: 1;
	display: flex;
	justify-content: flex-end;
	gap:1em 2em;
}
.footerNaviWrap .group{
	display: flex;
	gap:1em 3em;
}
.footerNavi > li + li{margin-top: 1em;}
.footerNavi li a{
	line-height: 1.3;
	display: inline-block;
	text-decoration: none;
	color: #fff;
	font-size: var(--font-size-caption);
}
.footerNavi li a:hover{
	text-decoration: underline;
}
.footerNavi li ul{margin-top: .6em;margin-left: 5px;}
.footerNavi li ul li{
	position: relative;
	padding-left: 30px;
}
.footerNavi li ul li + li{margin-top: .5em;}

.footerNavi li ul li::before{
	content: "";
	position: absolute;
	top: 1em;
	left: 0;
	width: 12px;
	height: 1px;
	background-color:rgba(255,255,255,.6);
}
.footerNavi li ul li a{}

.footerNavi li.externalLink a{
	position: relative;
	padding-right:25px;
}
.footerNavi li.externalLink a::after{
	position: absolute;
	content: "";
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width:20px;
	height:20px;
	mask-image: url(assets/img/arrow-square-out.svg);
	-webkit-mask-image: url(assets/img/arrow-square-out.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color:#fff;
}

.copyright {
	margin: 0 auto;
	padding:1.5em 1em;
	text-align: center;
	font-family: var(--font-english);
	font-size: 1.2rem;
	color: #fff;
}

@media screen and (max-width: 1200px) {
	footer {
		padding-right:clamp(20px, 5vw, 30px);
		padding-left:clamp(20px, 5vw, 30px);
	}
	.footerWrap{
		flex-direction: column;
	}
	.footerInfo{
		display: flex;
		align-items: center;
		gap:30px 60px;
	}
	.footerLink{
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 840px) {
	footer{padding-top: 60px;}
	.footerInfo{
		flex-direction: column;
	}

}

@media screen and (max-width: 599px) {
	.footerLink{
		justify-content: center;
	}
	.footerWrap{margin-bottom: 30px;}
	.footerNaviWrap{
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
		gap:1em 2em;
	}
	.footerNaviWrap .group{
		flex-direction: column;
		width: calc((100% - 2em)/2);
	}

}


/* pageTop
========================================== */
#pageTop{
	position:fixed;
	line-height: 1;
	right:20px;
	bottom:20px;
	z-index: 100;}
#pageTop a{
	display: block;
	position:relative;
	padding:20px;
	background-color:var(--color-primary);
	box-sizing: border-box;
	color:#fff;
	font-size: 1.2rem;
	text-decoration: none;
	transition: all .3s;
}
#pageTop a::before{
	position:absolute;
	content: "";
	top:17px;
	left:50%;
	margin-left: -4px;
	width: 8px;
	height: 8px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition: all .3s;
	}
#pageTop:hover a{background-color: var(--color-secondary);}
#pageTop:hover a::before{top:13px;}
@media screen and (max-width: 1200px) {
	#pageTop{
		right:0;}
}

@media screen and (max-width: 840px) {
	#pageTop{display: none!important}
}