/*------------------------------------------------------------
	コンテンツ全体
------------------------------------------------------------*/
main{
	display: grid;
}
.top-hd{
	width: 100%;
	text-align: center;
}
.top-hd span {
    display: block;
    max-width: 90px;
    margin: auto;
}

/*------------------------------------------------------------
	横スライド共通処理
------------------------------------------------------------*/
.js-slider-wrap{
	position: relative;
	overflow: clip;
}
ul.js-slider-list {
	width: 100%;
	margin: 2rem 0rem;
	padding-left: 5rem;
	padding-right: 5rem; 
	scroll-padding-left: 5rem;
	scroll-padding-right: 5rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(225px, calc((100% - 4rem) / 2.3));
	gap: 2rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
ul.js-slider-list li {
	display: flex;
	scroll-snap-align: start;
	min-width: 0;
}

ul.js-slider-list li a {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 2rem;
	overflow: clip;
}

.slider-arrow {
	position: absolute;
	z-index: 50;
    cursor: pointer;
    opacity: 0.8;
    background: var(--color-wh);
    color: var(--color-mid);
    width: 6rem;
    height: 12rem;
    top: 50%;
    transform: translateY(-50%);
	display: flex;
    justify-content: center;
    align-items: center;
}
.slider-arrow:after{
    font-size: 3em;
}

.slider-arrow-prev{
	left: 0;
    border-radius: 0 6em 6em 0;
	padding-right: 1em;
}
.slider-arrow-prev::after{
	content: '\f104';
}
.slider-arrow-next{
	right: 0;
    border-radius: 6em 0 0 6em;
	padding-left: 1em;
}
.slider-arrow-next::after{
	content: '\f105';
}
@media all and (max-width:960px){
	.slider-arrow{
		width: 3rem;
		height: 6rem;
	}
	.slider-arrow:after{
		font-size: 2em;
	}
}

/*------------------------------------------------------------
	メインビジュアル（mv）
------------------------------------------------------------*/

#mv{
	position: relative;
	margin-bottom: calc(var(--search-h-mv, 0px) / 2);
}
#mv .mv-ttl{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 90%;
	width: 100%;
}
#mv .mv-ttl h1{
	color: var(--color-wh);
	text-align: center;
}
#slider {
    width: 100%;
	min-height: 960px;
    height: 80dvh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.mv-search-box{
	background: var(--color-wh);
	position: absolute;
	bottom: calc(var(--search-h, 0px) / 2 * -1);
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 1rem var(--color-sdw);
	border-radius: 2rem;
	padding: 2rem 3rem;
	z-index: 97;
}
.mv-search-box h6{
	text-align: center;
}

.mv-search-area{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
.mv-search-box .selectBox,
.mv-search-box .pulldown,
.mv-search-box input{
	font-size: clamp(14px, 1vw, 20px);
}
.mv-search-box .search-block {
	position: relative;
	min-width: 13em;
	width: calc(100% / 3 - 1rem);
}

.mv-search-box .selectBox {
	position: relative;
}
.mv-search-box .selectBox:after{
	content:'\f078';
	position: absolute;
	display: inline-block;
	color:var(--color-bk);
	width:0;
	z-index:0;
	top:50%;
	right:3rem;
	transform:translateY(-50%);
}

.mv-search-box .search-keyword-block{
	position: relative;
}

.mv-search-box .selectBox select,
.mv-search-box .search-keyword-block input{
	width: 100%;
	font-weight: bold;
	border-radius: 2em;
    padding: 0.5rem 1.5rem;
	border: 1px var(--color-gry) solid;
}
.mv-search-box .search-keyword-block input{
	padding-left: 4rem;
}
.mv-search-box .search-keyword-block::before{
	content: var(--icon-search);
	position: absolute;
	top: 50%;
	left: 1.5rem;
	transform: translateY(-50%);
}
.mv-search-box .search-btn-block{
	width: 100%;
	margin-top: 1.5rem;
	text-align: center;
}
.mv-search-box .search-btn-block input{
	min-width: 13em;
	width: 50%;
	text-align: center;
	font-weight: bold;
	border-radius: 2em;
    padding: 0.5rem 1.5rem;
	background: var(--color-pale);
	border: none;
	transition: 0.3s;
}
.mv-search-box .search-btn-block input:hover{
	background: var(--color-dark);
}


@media all and (max-width:960px){
	#slider {
		height: 100dvh;
	}
	#mv .mv-ttl{
		display: flex;
		flex-direction: column;
		align-items: center;
        top: 5%;
		transform: translate(-50%, 0%);
		gap: 2rem;
	}
	#mv .mv-ttl h1{
		-ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
		text-align: left;
		display: flex;
        align-items: center;
	}
	#mv .mv-ttl img.logo-svg-jcs-3line.switch-sp{
		max-width: 250px;
		width: 60vw;
	}
	
	
		.mv-search-btn a{
			position: fixed;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			bottom: 3%;
			right: 0;
			z-index: 75;
			background: var(--color-pale);
			padding: 2rem 1rem;
			border-radius: 1rem 0 0 1rem;
			transition: transform 0.4s ease;
		}
		.mv-search-btn a span::before{
			content: var(--icon-search);
		}
		/* フッターに到達したら右にフレームアウト */
		.mv-search-btn.is-hidden a{
			transform: translateX(100%);
		}
}

/*------------------------------------------------------------
	リンク（link）
------------------------------------------------------------*/
#link{
	padding: var(--content-padding);
}
.link-wrap{
	max-width: var(--content-max-width);
	margin: 0 auto;
	display: grid;
	gap: 2rem;
}
.link-wrap a:hover{
	opacity: 0.7;
}
.link-wrap a p{
	height: 100%;
	font-size: clamp(14px, 1.5vw, 22px);
	line-height: 1.25em;
}
.link-icon,
.link-banner{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*justify-content: space-between;*/
	gap: 2rem;
}
.link-icon li{
	width: calc(100% / 4 - 2rem);
}
.link-icon li a{
	display: flex;
	justify-content: center;
    align-items: center;
	width: 100%;
	gap: 2rem;
	padding: 1rem;
	text-align: center;
	border: 5px var(--color-dark) solid;
	border-radius: 1rem;
}
.link-icon li a:hover{
	opacity: 0.7;
}
.link-icon li:first-child a,
.link-icon li:last-child a{
	border: 5px var(--color-mid) solid;
}
.link-icon li a img{
	width: 40%;
}

.link-banner li{
	width: calc(100% / 2 - 2rem);
}
.link-banner li a{
	display: flex;
	position: relative;
	overflow: clip;
	border-radius: 1rem;
}
.link-banner li a p{
	position: absolute;
	top: 50%;
	right: 15%;
	transform: translateY(-50%);
	text-align: center;
	font-weight: 800;
	line-height: 1.3em;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.link-banner li a p span{
	display: block;
	font-size: 0.8em;
}

@media all and (max-width:960px){
	.link-icon, .link-banner{
		gap: 1rem;
	}
	.link-icon li{
		width: calc(100% / 2 - 0.5rem);
	}
	.link-icon li a{
		gap: 1rem;
		padding: 1rem 0.5rem;
	}
	.link-icon li a img{
		width: 30%;
	}
	.link-banner li{
		width: 100%;
	}
}


/*------------------------------------------------------------
	新着講座（new-courses）
------------------------------------------------------------*/
#new-courses{
	background: var(--color-dark);
	padding: var(--content-padding-tb);
}

.new-courses-wrap{
	display: grid;
    justify-content: center;
    align-content: start;
    justify-items: center;
}
ul.new-courses-list li a {
	padding: 2.5rem;
	background: var(--color-wh);
}
ul.new-courses-list li a:hover .new-courses-img{
	opacity: 0.7;
}
ul.new-courses-list li a .new-courses-txt p{
	font-size: 1.4rem;
}
ul.new-courses-list li a:hover p{
	color: var(--color-dark);
}


@media all and (max-width:960px){
	ul.js-slider-list{
		padding-left: 2rem;
		padding-right: 2rem;
		scroll-padding-left: 2rem;
		scroll-padding-right: 2rem;
		grid-auto-columns: min(200px, calc((100% - 4rem) / 1.3));
	}
}

/*------------------------------------------------------------
	ジョイフルカルチャースクールの特徴（features）
------------------------------------------------------------*/
#features{
	padding: var(--content-padding);
}
.features-wrap{
	max-width: var(--content-max-width);
	margin: 0 auto;
}
.features-list{
	margin: 2rem 0rem;
	display: flex;
	gap: min(5vw, 10rem);
}
.features-list li{
	width: calc(100% / 3)
}
.features-list li:nth-child(1) {
	margin-top: 0;
}
.features-list li:nth-child(2) {
	margin-top: min(5vw, 10rem);
}
.features-list li:nth-child(3) {
	margin-top: min(10vw, 20rem);
}

:root {
	/*--features-span: clamp(4rem, 5vw, 8rem);*/
	--features-span: 8rem;
}
.features-list li .features-img-wrap{
	padding-top: calc(var(--features-span) / 2);
	position: relative;
}
.features-list li .features-img-wrap .features-img{
	overflow: clip;
	border-radius: 3rem;
}
.features-list li .features-img-wrap span{
	font-size: var(--features-span);
	line-height: 1em;
	position: absolute;
	top: 0;
	left: 1rem;
	color: var(--color-pale);
}
.features-list li .features-txt{
	margin-top: 2rem;
}
.features-list li .features-txt p{
	/*font-size: clamp(1.4rem, 1vw, 2.0rem);*/
	font-weight: 400;
}


@media all and (max-width:960px){
	.features-list{
		flex-direction: column;
		width: 90%;
		margin: 2rem auto;
	}
	.features-list li {
		width: 100%;
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: 1fr;
        gap: 1rem;
	}
	.features-list li .features-txt{
		margin-top: 0;
	}
}



/*------------------------------------------------------------
	受講生インタビュー（voices）
------------------------------------------------------------*/
#voices{
	background: var(--color-light);
	padding: var(--content-padding);
}
.voices-wrap{
	max-width: var(--content-max-width);
	margin: 0 auto;
}
ul.voices-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 5rem 10rem;
	margin: 2rem 0;
}
ul.voices-list li{
	width: calc(100% / 2 - 10rem);
	display: grid;
    align-content: start;
    gap: 2rem;
}
ul.voices-list li .voices-hd{
	display: flex;
    align-items: center;
    gap: 2rem;
}
ul.voices-list li .voices-hd .voices-img {
    width: 25%;
	overflow: clip;
	border-radius: 3rem;
}
ul.voices-list li .voices-hd .voices-name {
    font-size: 1.1em;
}


@media all and (max-width:960px){
	ul.voices-list{
		flex-direction: column;
	}
	ul.voices-list li{
		width: 100%;
		gap: 1rem;
		position: relative;
	}
	ul.voices-list li::after{
		content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: -2rem;
        left: 0;
        background: var(--color-bk);
	}
	ul.voices-list li .voices-hd{
		justify-content: center;
	}
}

/*------------------------------------------------------------
	ご入会までの流れ（flow）
------------------------------------------------------------*/
#flow{
	padding: var(--content-padding);
}
.flow-wrap{
	max-width: var(--content-max-width);
	margin: 0 auto;
	display: grid;
    justify-content: center;
    align-content: start;
    justify-items: center;
}

:root {
	--flow-arrow: 10rem;
}
ul.flow-list{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--flow-arrow);
	margin: 2rem auto;
}
ul.flow-list li{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	position: relative;
	width: calc((100% - var(--flow-arrow) * 3) / 4);
}
ul.flow-list li:not(:last-child)::after {
	font-family: 'Font Awesome 5 Free';
	content: '\f04b';
	font-size: calc(var(--flow-arrow) * 0.3);
	font-weight: 900;
	width: var(--flow-arrow);	
    text-align: center;
	position: absolute;
	right: calc(var(--flow-arrow) * 1.5 * -1);
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-bk);
}
ul.flow-list li .flow-hd{
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: clamp(1.6rem, 1.5vw, 2.0rem);
    line-height: 1.15em;
}
ul.flow-list li .flow-hd span{
	color: var(--color-pale);
	font-size: 3em;
	line-height: 1em;
}
ul.flow-list li .flow-img{
	overflow: clip;
	border-radius: 3rem;
}


@media all and (max-width:960px){
	.flow-wrap{
		justify-content: stretch;
	}
	.flow-list-wrap{
		width: 100%;
	}
	ul.flow-list{
		flex-direction: column;
	}
	ul.flow-list li{
		width: 100%;
		flex-direction: column;
	}
	ul.flow-list li:not(:last-child)::after{
		content: '\f0d7';
		font-size: calc(var(--flow-arrow) * 0.6);
		width: 100%;
		height: var(--flow-arrow);
		right: 50%;
		top: auto;
		bottom: calc(var(--flow-arrow) * -1);
		transform: translate(50%, 0%);
	}
	ul.flow-list li .flow-hd{
		width: 50%;
		/*flex-direction: column;*/
		text-align: center;
		justify-content: center;
	}
	ul.flow-list li .flow-txt{
		font-size: clamp(2.0rem, 1vw, 2.8rem);
		line-height: 1.4em;
	}
	ul.flow-list li .flow-img{
		width: 50%;
	}
}


/*------------------------------------------------------------
	近くの講座を探す（shop）
------------------------------------------------------------*/
#shop{
	background: var(--color-dark);
	padding: var(--content-padding);
}
.shop-wrap{
	max-width: var(--content-max-width);
	margin: 0 auto;
}

.shop-block{
	display: flex;
	flex-wrap: wrap;
	margin-top: 2rem;
	gap: 3rem 10rem;
}
.shop-block > *{
	width: calc(50% - 5rem);
}
.shop-list-wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 5rem;
}
.shop-list-block{
	width: calc(50% - 2.5rem);
}
.shop-list-block{
	font-size: clamp(1.4rem, 1.5vw, 2.2rem);
}
.shop-list-block h7.shop-list-hd{
	display: block;
	border-bottom: 2px var(--color-bk) solid;
	margin-bottom: 1rem;
}

.shop-list-block ul.shop-list{
	display: grid;
	gap: 0.5em;
}
.shop-list-block ul.shop-list li a{
	background: var(--color-wh);
	border-radius: 0.5rem;
	display: inline-block;
	padding: 0.25rem 1.0em;
}
.shop-list-block ul.shop-list li a:hover{
	color: var(--color-mid);
}


@media all and (max-width:960px){
	.shop-block{
		flex-direction: column;
		align-items: center;
	}
	.shop-block > *{
		width: 100%;
	}
	.shop-img{
		width: 70%;
	}
	.shop-list-wrap{
		gap: 2rem;
	}
	.shop-list-block{
		width: calc(50% - 1rem);
	}
}



/*------------------------------------------------------------
	講師・会員の作品（showcase）
------------------------------------------------------------*/
#showcase{
	padding: var(--content-padding-tb);
}
.showcase-wrap{
	display: grid;
    justify-content: center;
    align-content: start;
    justify-items: center;
}
.showcase-wrap h5.top-hd span{
	display: block;
    max-width: 125px;
    margin: 0 auto;
}
ul.showcase-list{
	padding-top: 1rem;
	padding-bottom: 1rem;
}
ul.showcase-list li a{
	border: 1px var(--color-mid) solid;
	box-shadow: 3px 3px 0 0 var(--color-mid);
	/*transition: 0.1s;*/
}
ul.showcase-list li a:hover{
	border: 3px var(--color-mid) solid;
	transform: rotate(-3deg);
}
ul.showcase-list li:nth-child(odd) a:hover{
	transform: rotate(-3deg);
}
ul.showcase-list li:nth-child(even) a:hover{
	transform: rotate(3deg);
}

@media all and (max-width:960px){
	
}

/*------------------------------------------------------------
	お知らせ（news）
------------------------------------------------------------*/
#news{
	padding: var(--content-padding);
	background: var(--color-light);
	border-radius: 100vw 100vw 0 0;
}

.news-wrap{
	display: grid;
    justify-content: center;
    align-content: start;
    justify-items: center;
}

ul.news-list {
    display: grid;
    align-content: start;
	justify-content: center;
	margin: 2rem 0;
}
ul.news-list li{
	padding: 1rem;
}
ul.news-list li:not(:last-child){
	border-bottom: 1.5px var(--color-bk) dashed;
}
ul.news-list li a{
	display: flex;
	align-items: center;
}
ul.news-list li a span.news-date{
	width: 10em;
}
ul.news-list li a .news-ttl{
	width: calc(100% - 10em);
}
ul.news-list li a p{
	transition: 0.3s;
}
ul.news-list li a:hover p{
	color: var(--color-mid);
}

@media all and (max-width:960px){
	ul.news-list li{
		padding: 1rem 0;
	}
	ul.news-list li a{
		flex-direction: column;
		text-align: center;
	}
	ul.news-list li a .news-ttl{
		width: 100%;
	}
}