@charset "UTF-8";
/*スクロールバーの有無によるレイアウトの横ズレ防止
（モーダル表示時の overflow:hidden 対策）
*/
html {
	scrollbar-gutter: stable;
}
h1,
h2,
h3,
h4{
	all: unset;
	display: block;
}
h1::before,
h2::before,
h3::before,
h1::after,
h2::after,
h3::after {
	content: none;
}
body{
	background:#fff;
}@media (max-width: 479px) {
	body{
		font-size:smaller;
	}
}

#college00 {

	/* =========================
	カラー設定
	========================= */

	/* ベース */
	--college-white: #ffffff;
	--college-text: #444444;


	/* メインカラー */
	--college-green: #6AB572;
	--college-green-dark: #005726;

	/* サブカラー */
	--college-green-light: #C5E1C2;
	--college-yellow: #EFC627;

	/* 背景カラー */
	--college-bg-gray: #EEEEEE;
	--college-bg-cream: #F4F2CC;

}
/* =========================
color
========================= */
.color-inherit{
	color:inherit;
}

.color-white{
	color: var(--college-white);
}

.color-gray{
	color: var(--college-gray);
}

.color-cream{
	color: var(--college-cream);
}

.color-green-light{
	color: var(--college-green-light);
}

.color-green{
	color: var(--college-green);
}

.color-green-dark{
	color: var(--college-green-dark);
}

.color-yellow{
	color: var(--college-yellow);
}
/* =========================
background-color
========================= */

.bg-white{
	background: var(--college-white);
}

.bg-gray{
	background: var(--college-gray);
}

.bg-cream{
	background: var(--college-cream);
}

.bg-green-light{
	background: var(--college-green-light);
}

.bg-green{
	background: var(--college-green);
}

.bg-green-dark{
	background: var(--college-green-dark);
}

.bg-yellow{
	background: var(--college-yellow);
}
/* =========================
border-bottom
========================= */

.border-white{
	border-bottom: 2px solid var(--college-white);
}

.border-gray{
	border-bottom: 2px solid var(--college-gray);
}

.border-cream{
	border-bottom: 2px solid var(--college-cream);
}

.border-green-light{
	border-bottom: 2px solid var(--college-green-light);
}

.border-green{
	border-bottom: 2px solid var(--college-green);
}

.border-green-dark{
	border-bottom: 2px solid var(--college-green-dark);
}

.border-yellow{
	border-bottom: 1px solid var(--college-yellow);
}

.boundary-line{
	width:100%;
	height:50px;
	position:relative;
	overflow: visible;
	z-index: 10;
}
#college00 #content{
	padding:0;

}

/*----------------
* h2
-------------------*/
.h2-box{
	width:100%;
	display:grid;
	place-items:center;
	margin:1.5rem 0 1.5rem;
	font-weight:bold;
	font-size:larger;
}@media (max-width: 479px) {
	.h2-box{
		font-size:smaller;		
		margin:0;
	}
}
.top_title_head_college {
	font-size:xx-large;
	font-weight:bold;
	display: inline-block;
	padding:0 1rem 10px;
	margin-bottom:30px;
	background-image: url("/img/college/wave-line-b.svg");
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: auto 8px;
	position:relative;
}@media screen and (max-width: 767px){
	.top_title_head_college {
		font-size:x-large;
	}
}@media (max-width: 479px) {
	.top_title_head_college {
		font-size:large;
	}
}
.top_title_head_college::before{
	content:"";
	position:absolute;

	top: 20px;
	right: -45px;
	transform: translateY(-50%);

	width:40px;
	height:40px;

	background-image:url("/img/college/pencil.svg");
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

.p-large{
	font-size:large;
}
.p-larger{
	font-size:larger;
}
.p-xlarge{
	font-size:x-large;
}
.p-xxlarge{
	font-size:xx-large;
}
.p-small{
	font-size:small;
}
.p-smaller{
	font-size:smaller;
}
.p-xsmall{
	font-size:x-small;
}
.p-2rem{
	font-size:2rem;
}
.p-bold{
	font-weight:bold;	
}
.p-center{
	text-align:center;
}
.p-left{
	text-align:left;
}

.p-word-break{
	word-break: auto-phrase;
}@media (max-width: 767px) {
	.p-word-break{
		word-break: normal; 
	}
}
article .wrap{
/* 	width:min(90%, 940px)!important; */
	width:min(98%, 940px)!important;

	margin-inline:auto;
}
@media (max-width: 479px) {
	.wrap{
		padding:1rem 0;
	}
}

.wave-custom{
	display: inline-block;
	padding-bottom: 10px;
	background-image: url("/img/college/wave-line-g.svg");
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: auto 8px;
}

/* 黄色いマーカー*/
.marker{
	background:linear-gradient(transparent 60%, #ff6 20%);
}
.br-pc{
	display:block;	
}@media screen and (max-width: 767px) {
	.br-pc{
		display:none;	
	}
}
.br-sp{
	display:none;	
}@media screen and (max-width: 479px) {
	.br-sp{
		display:block;	
	}
}
/* モーダルの中 */
.confirm-dialog{
	display:grid;
	grid-template-rows:2rem 150px;

	place-items:center;
	gap:1rem;
	padding:100px 0;
}@media (max-width: 479px) {
	.confirm-dialog{
		grid-template-rows:2rem 250px;
		place-items:center;
		gap:0;
		padding:0;
		
	}
}
.confirm-dialog__text {
	font-size: larger;
}

.confirm-dialog__buttons {
	width: 100%; 
	display: flex;
	justify-content: center;
	font-size:larger;
	gap:2rem;
}@media (max-width: 479px) {
	.confirm-dialog__buttons {
		flex-direction:column;
		align-items:center;
		gap:1rem;
	}
}
.confirm-dialog__buttons btn{
	padding:10px 0;
}
/* ボタン */
.btn-yes {
	background: #69B160;
	color: #fff;
}

.btn-no {
	background: #66cccc;
}

.box-center{
	display:grid;
	place-items:center;
}

/*  buttonー*/
/* button初期化 */
button {
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
}
/*主な共通部分は省略*/
.btn,
a.btn,
button.btn {
	width:100%;
	font-weight: 700;
	line-height: 1;
	position: relative;
	display: grid;
	place-items:center;
	padding:2rem;

	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
}
.btn--modal.btn--cubic {
	box-shadow: 2px 2px 4px gray;
	transition: transform 0.1s, box-shadow 0.1s;
}

.btn--modal.btn--cubic:hover {
	transform: translateY(3px);
	box-shadow: none;
	color:linen;
}

.btn--radius {
	border-radius: 100vh;
}

.fa-position-right {
	position: absolute;
	top: calc(50% - .5em);
	right: 1rem;
}



/* =========================
top　main 画面
========================= */
/* --------------------------------------------------------------------------- */

#college00{
	display:grid;
	
	gap:10px;
}@media screen and (max-width: 767px){
	#college00{
		gap:0px;
	}
}
/* --------------------------------------------------------------------------- */

/* top　main 画面 　*/
#college00 #top{	
	position: relative;
	width: 100%;

	overflow: hidden;	
/* 	min-height: 80svh; */
	min-height: 50svh;

	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* PC */
	padding: 80px 0 110px;

}
/* Tablet */
@media screen and (max-width: 1439px){
	#college00 #top{
		padding: 100px 0 60px;
	}
}
/* SP */
@media screen and (max-width: 767px){
	#college00 #top{

		min-height: auto;
		padding: 50px 0 150px;
	}
}


/* --------------------------------------------------------------------------- */

/* PC */
.bg-left-top{
	width: 100%;
	position: absolute;
	z-index: 0;
/* 	top: 28px; */
	top: 0px;
	left: 0;
	max-width: 600px;
}

.bg-right-top{
	width: 100%;
	position: absolute;
	z-index: 0;
/* 	top: 28px; */
	top: 0px;
	right: 0;
	max-width: 500px;
}

.bg-left-bottom{
	width: 100%;
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 0;
	max-width: 300px;
}

.bg-right-bottom{
	position: absolute;
	z-index: 0;
	bottom: 50px;
	right: 0;

	width: 32vw;
	max-width: 200px;
}
.bg-right-img{
	position: absolute;
	bottom:20px;
	right:18%;
	width: 35vw;
	max-width: 230px;
}
.bg-left-img{
	position: absolute;
	bottom: 0;
/* 	bottom: -20px; */
	left: 18%;
	width: 35vw;
	max-width: 250px;	
}
.bg-bottom{
	display:block;
	position: absolute;
	bottom:50px;
	left: 50%;
/* 	transform: translate(-50%, -50%); */
	transform: translate(-40%, -50%);	
	max-width: 250px;
}
.bg-bottom-text{
	display:block;
	position: absolute;
	bottom:90px;
	left: 50%;
	transform: translate(-50%, -50%);
}


.bg-right-pattern{	
	display:none;
}
.bg-left-pattern{	
	display:none;
}
/* ノートPC以上 */
@media screen and (min-width: 1440px) {

	.bg-right-pattern{
		display:block;
		position: absolute;
		top:50%;
		left: 15%;
		transform: scaleX(-1);;
		max-width: 150px;

	}
	.bg-left-pattern{
		display:block;
		position: absolute;
		top:50%;
		right: 15%;
		transform: translate(-30%, -10%);
		max-width:150px;
	}
}
/* Tablet */
@media screen and (max-width: 1439px){
	.bg-bottom,.bg-bottom-text{
		display:none;
	}
	.bg-left-top{
		max-width: 420px;
/* 		top: 10px; */
		top: 0px;
	}
	.bg-right-top{
		max-width: 360px;
/* 		top: 10px; */
		top: 0px;
	}
	.bg-left-bottom{
		max-width: 220px;
	}
	.bg-right-bottom{
		width: 26vw;
		max-width: 140px;
		bottom: 20px;
	}
	.bg-right-img{
		right:15%;
		max-width: 200px;
	}
	.bg-left-img{
		left:15%;
		max-width: 200px;
	}
}
/* SP */
/* @media screen and (max-width: 767px){ */
@media screen and (max-width: 768px){
	.bg-left-top{
		max-width: 220px;
		top: 0;
	}

	.bg-right-top{
		max-width: 180px;
		top: 0;
	}

	.bg-left-bottom{
		max-width: 140px;
	}

	.bg-right-bottom{
		width: 24vw;
		max-width: 90px;
		bottom: 10px;
	}

	.bg-right-img{
		right:1.5rem;
		bottom: 0;
		width: 35vw;
		max-width: 150px;
	}
	.bg-left-img{
		left:1.5rem;
		bottom: 0;
		width: 35vw;
		max-width: 150px;
	}


}@media screen and (max-width:479px){
	.bg-right-img{
		right:28%;
	}
	.bg-left-img{
		display:none;
	}
}
/* --------------------------------------------------------------------------- */

.top-inner{	
	display:grid;
	grid-template-rows:1fr;
	align-items:center;
	justify-content:center;
	text-align:center;
	position: relative;
	gap: clamp(2.3rem, 3vw, 3.5rem);
	width: min(90%, 1080px);
	z-index: 1;
	position:relative;
	padding: 50px 0 100px;
}
@media screen and (max-width: 1339px){
	.top-inner{	padding: 80px 0 100px;}
}
@media screen and (max-width: 767px){
	.top-inner{	padding: 80px 0 0}
}
/* --------------------------------------------------------------------------- */
.bg-inner-left{
	position: absolute;
	z-index:0;
	left: 200px;	
	top: 80px;
	width: clamp(120px, 32vw, 400px);
	max-width: 80px;
}
.bg-inner-right{
	position: absolute;
	z-index:0;	
	top: 80px;
	right: 200px;	
	width: clamp(120px, 32vw, 400px);
	max-width: 80px;
}

@media screen and (min-width: 1439px) {
	.bg-inner-left{
		left: 200px;
	}

	.bg-inner-right{
		right: 200px;
	}
}
@media screen and (max-width: 1137px){

	.bg-inner-left{
		display:none !important;
	}

	.bg-inner-right{
		display:none !important;
	}

}
/* --------------------------------------------------------------------------- */

.term-list{
	display:flex;
	justify-content:center;
	gap:2rem;

}@media screen and (max-width: 767px){
	.term-list{
		flex-direction:column;
	}
}
/* --------------------------------------------------------------------------- */
.term-item{
	display:flex;
	align-items:center;
	justify-content:left;
	font-size:larger;
	font-weight:bold;
	gap:1rem;
}
.term-item .border-green-light{
	border-bottom: 10px solid var(--college-green-light);
}
.term-item .border-yellow{
	border-bottom: 10px solid var(--college-yellow);
}
.term-item p{
	padding-bottom:5px;
}@media (max-width: 767px){
	.term-item p{
		width:80%;
	}
}
.circle{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	font-weight: bold;
	line-height: 1;
}
@media (max-width: 767px){
	.term-item{
		font-size: 1rem;
	}
	.circle{
		width: 56px;
		height: 56px;
	}
}
/* --------------------------------------------------------------------------- */

.phone-number {
	font-size: xx-large;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
/* --------------------------------------------------------------------------- */

/* =========================
top　悩み問いかけ
========================= */
/* top　main 画面 　*/
#top-bottom{	
	position: relative;
	width: 100%;
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	gap:80px;
	min-height:300px;
}@media (max-width: 767px) {
	#top-bottom{
		padding-top: 50px;
	}
}
/* --------------------------------------------------------------------------- */

.bg-bottom-left{
	width: 100%;
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 0;
	max-width: 330px;
}/* ノートPC以上 */
@media screen and (min-width: 1439px) {
	.bg-bottom-left{
		width: 100%;
		position: absolute;
		z-index: 0;
		bottom: 0;
		left: 0;
		max-width: 430px;
	}
}@media screen and (max-width: 767px) {
	.bg-bottom-left{
		display:none;
	}
}
/* --------------------------------------------------------------------------- */

.bg-bottom-right{
	width: 100%;
	position: absolute;
	bottom:0px;
	right: 0;
	z-index: 0;
	max-width: 500px;
}@media screen and (max-width: 767px) {
	.bg-bottom-right{
		display:none;
		/* 		max-width: 400px;
		opacity:0.9; */
	}
}
/* --------------------------------------------------------------------------- */

.bg-bottom-center{
	width: 100%;
	position: absolute;
	top: -160px;
	left: 50%;
	transform: translateX(-50%);
	width: 24vw;
	max-width: 200px;
	z-index:1;
}@media (max-width: 767px){
	.bg-bottom-center{
		top: auto;
		bottom:50px;
	}
}
/* --------------------------------------------------------------------------- */

#top-bottom .top-bottom-list{
	width:50%;
	display:flex;
	flex-direction:column;
	gap:2rem;
	justify-content:center;
	align-items:center;
	position:relative;	
	margin-bottom:220px;
}@media (max-width: 767px){
	#top-bottom .top-bottom-list{
		width:80%;		
		margin-bottom:120px;
	}
}
/* --------------------------------------------------------------------------- */


#top-bottom .top-bottom-list-left{
	position: absolute;
	bottom:0;
	left: 0;
	width: 22vw;
	max-width: 180px;
}
#top-bottom .top-bottom-list-right{
	position: absolute;
	bottom:0;
	right: 0;
	width: 22vw;
	max-width: 180px;	
}@media screen and (max-width: 1439px){
	#top-bottom .top-bottom-list-left{
/* 		left: -25%; */
		left: -30%;		
	}
	#top-bottom .top-bottom-list-right{
		right: -30%;
	}
}@media (max-width: 767px){
	#top-bottom .top-bottom-list-left{
		width: 18vw;
		top: 50%;
		left: -10%;
	}
	#top-bottom .top-bottom-list-right{
		width: 18vw;
		top: 50%;
		right: -10%;
	}
}
/* --------------------------------------------------------------------------- */

/* =========================
class-list　講座一覧
========================= */
#class-list{
	display:grid;
	gap:1.5rem;
}
/* --------------------------------------------------------------------------- */

.brochure{
	display:flex;
	gap:10px;
}@media screen and (max-width:767px){
	.brochure{flex-direction:column;gap:30px;}
}
/* --------------------------------------------------------------------------- */

.brochure-item{
	width:100%;
	display:flex;
	gap:20px;
	justify-content:space-around;
	margin:0 auto;
	border:5px double #ccc;
	padding:2rem .5rem;
	position:relative;
}@media screen and (max-width: 537px) {
	.brochure-item{
		gap:10px;
	}
}
/* --------------------------------------------------------------------------- */

.brochure-item p{
	position:absolute;
	background:#fff;
	top:-1.5rem;
	left: 50%;
	transform: translateX(-50%);
	padding:0 1rem;
}




/* college 検索用*/
.instructor-card_box{
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	gap:1.5rem;
}
.instructor-card_box .instructor-card {
	text-align: left;
	width:calc(100% / 3 - 1rem);
	padding:1rem;
	display:grid;
	align-items:flex-start;
	gap:0.5rem;
	position: relative; 
	background:#EEEEEE;
	border-radius:10px;
	box-shadow: 5px 5px 6px rgba(238, 238, 238, 0.6);
}
.instructor-card .instructor-card__title {
	font-weight:bold;
	min-height:100px;
	padding:10px 0;
}
.instructor-card .instructor-card a:hover{
	opacity:0.8;
}
.instructor-card .instructor-card__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	display: inline-block;
	font-size: 12px;
	background: #fff;
	border-radius: 10px;
	padding: 4px 8px;
	margin: 4px;
}
.pagination_wrap{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

@media (max-width: 1024px){

	.instructor-card_box .instructor-card{
		width:calc(100% / 2 - 0.75rem);
	}

}

@media (max-width: 767px){

	.instructor-card_box{
		gap:2rem;
		justify-content:center;
	}

	.instructor-card_box .instructor-card{
		width:70%;
		padding:0.8rem;
	}

	.instructor-card .instructor-card__title{
		min-height:auto;
		font-size:14px;
		line-height:1.6;
	}

	.pagination_wrap{
		flex-direction:column;
		gap:1rem;
		align-items:center;
	}

}




/* --------------------------------------------------------------------------- */

/* =========================
注目！
======================== */
#attention-college{
	position: relative;
	width: 100%;
	overflow: hidden; 
}
/* --------------------------------------------------------------------------- */

.bg-attention-left{
	position:absolute;
	top:0;
	left:0;
	max-width: 250px;
}

.bg-attention-right{
	position:absolute;
	top:0;
	right:0;
	max-width: 250px;
}
/* --------------------------------------------------------------------------- */

.attention-college-list{
	display:flex;
}


/* --------------------------------------------------------------------------- */

/* #attention-college .instructor-card_box{
} */
/* --------------------------------------------------------------------------- */


/* =========================
collegeの魅力
======================== */
/* --------------------------------------------------------------------------- */

#charm section,#usage-flow section{
	background:var(--college-white);
	border-radius:30px;
	padding:2rem 1rem;	
	position:relative;
	z-index:10;
}@media screen and (max-width:767px){
	#charm section,#usage-flow section{
		padding:2rem 0;
		margin-bottom: 2rem;
	}
}
#charm .wrap{
	display:grid;
	gap:50px;
}


.howtouse{
	display:grid;
	grid-template-columns: repeat(2, minmax(0, 350px));
	gap:2rem;
}@media screen and (max-width:767px){
	.howtouse{
/* 		grid-template-columns: minmax(0, 350px); */
		padding:0 .5rem;
	}
}@media screen and (max-width:479px){
	.howtouse{
		grid-template-columns: minmax(0, 300px);
	}
}

.howtouse__card{
	position:relative;
	padding:1rem 1rem 2rem;
	background:#fff;
	border-radius:20px;
	margin-top:3rem;
}@media screen and (max-width:767px){
	.howtouse__card{
		padding:1rem .5rem 2rem;
	}
}
.howtouse__card_border-green-light{
	border: 2px solid var(--college-green-light);
}

.howtouse__card_border-green{
	border: 2px solid var(--college-green);
}
.howtouse__title{
	position:relative;
	display:grid;
	grid-template-columns:20px 100px;
	align-items:center;
	justify-content:center;
	gap:.5rem;
	width:fit-content;
	margin:-2.5rem auto 1rem;
	padding:.2rem 1.5rem;
	border-radius:999px;
}

.howtouse__lead{
	margin-bottom:1rem;
	font-size:.95rem;
	line-height:1.8;

}

.howtouse__label{
	display:inline-block;
	margin-bottom:.75rem;
	padding:.3rem 1rem;

	border-radius:999px;
	font-size:.875rem;
	font-weight:700;
}
.howtouse__label_border-green-light{
	border-top:2px solid var(--college-green-light);
	border-bottom:2px solid var(--college-green-light);
}
.howtouse__label_border-green{
	border-top:2px solid var(--college-green);
	border-bottom:2px solid var(--college-green);
}
.howtouse__sub{
	display:inline-block;
	margin:1.5rem 0 .75rem;
	padding-bottom:.25rem;
	font-size:1rem;
	font-weight:700;
}

.howtouse__list{
	margin:0;
	padding:0;
	list-style:none;
}

.howtouse__list li{
	position:relative;
	padding-left:1.75rem;
	margin-bottom:.5rem;
	line-height:1.7;
	font-weight:700;
}

.howtouse__list li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:.15rem;
	display:flex;
	align-items:center;
	justify-content:center;
	width:1.2rem;
	height:1.2rem;
	border-radius:50%;
	background:#7ac36a;
	color:#fff;
	font-size:.75rem;
	font-weight:700;
}

.howtouse__image{
	margin-top:1.5rem;
}

/* --------------------------------------------------------------------------- */

.bg-decoration{	
	position:relative;
	padding:3rem 0 5rem;
}@media screen and (max-width:767px){
	.bg-decoration{	
		padding:1rem 0 0;
	}
}
/* --------------------------------------------------------------------------- */

.bg-charm-left-top{
	position: absolute;
	top:0;
	left: 0;
	width: 22vw;
	max-width: 180px;
}
/* --------------------------------------------------------------------------- */

.bg-charm-right-top{
	position: absolute;
	top:0;
	right: 0;
	width: 22vw;
	max-width: 180px;
	transform: scaleY(-1);
}
/* --------------------------------------------------------------------------- */

.bg-charm-left-bottom{
	position: absolute;
	left:0;
	bottom: 0;
	width: 22vw;
	max-width: 180px;
	transform: scale(-1);
}
/* --------------------------------------------------------------------------- */

.bg-charm-right-bottom{
	position: absolute;
	bottom:0;
	right: 0;
	width: 22vw;
	max-width: 180px;
	transform: scaleX(-1);
}
/* --------------------------------------------------------------------------- */

.charm-h2{
	background:var(--college-yellow);
	padding:0.5rem 1rem;
	position:relative;
	border-radius:20px;
	font-size:x-large;
}@media screen and (max-width:767px){
	.charm-h2{
		font-size:large;
	}
}
.charm-h2::before{
	content:"";
	position:absolute;
	top: 0;
	left:0;
	width:40px;
	height:40px;
	transform: translateX(-50px);
	background-image:url("/img/college/slash-left.svg");
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}
.charm-h2::after{
	content:"";
	position:absolute;
	top: 0;
	right:0;
	transform: translateX(50px);
	width:40px;
	height:40px;
	background-image:url("/img/college/slash-right.svg");
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}
/* --------------------------------------------------------------------------- */

.charm-item{
	display:grid;
	gap:1rem;
	place-items:center;
}@media screen and (max-width:767px){
	.charm-item{gap:2rem;margin-top: 1rem;}
}
.charm-item-list{
	width:90%;
	display:grid;
	grid-template-rows:100px auto;
	gap:0.5rem;
	padding-right: 3rem;
	position:relative;
}@media screen and (max-width:767px){
	.charm-item-list{
		grid-template-rows:50px auto;
		padding-right: 0;
	}
}
.charm-item-list-deco{
	content:"";
	position:absolute;
	width:70px;
	bottom:0;
	right:-1rem;
	z-index:1;
	pointer-events:none;
}@media screen and (max-width:767px){
	.charm-item-list-deco{
		display:none;
	}
}
.charm-item-list dt{
	width: 100%;
	display:flex;
	gap:30px;
	align-items: center;
	color:var(--college-green-dark);
	font-weight:bold;
	letter-spacing: 0.1rem;
	font-size:xx-large;
}@media screen and (max-width:767px){
	.charm-item-list dt{font-size:x-large;gap:10px;}
}@media screen and (max-width:479px){
	.charm-item-list dt{font-size:larger;}
}
.charm-item-list .item-cat{
	background:var(--college-bg-cream);
	width:80px;
	height:80px;
	font-weight:bold;
	border-radius:50%;
	display: grid;
	place-items: center;
	letter-spacing:3px;
}@media screen and (max-width:767px){
	.charm-item-list .item-cat{
		width:50px;
		height:50px;
	}
}
.charm-item-list-text{
	margin-left:100px;
	display:grid;
	gap:1rem;
}@media screen and (max-width:767px){
	.charm-item-list-text{	margin-left:0;}
}

.charm-item-list-text .learning-list{
	display:grid;
	grid-template-columns:230px 1fr 1fr;
	align-items:stretch;
	gap:0;
	border-left:1px solid var(--college-green);
	border-bottom:1px solid var(--college-green);
	border-right: 1px solid var(--college-green);
}@media screen and (max-width:767px){
	.charm-item-list-text .learning-list{grid-template-columns:1fr;}
}
.charm-item-list-text .learning-list li{
	display: grid;
	align-items: center;
	list-style:none;
	padding:1rem;
	border-top:1px solid var(--college-green);
	border-right:1px dotted var(--college-green);
}
/* 3列目だけ右線なし */
.charm-item-list-text  .learning-list li:nth-child(3n){
	border-right:none;
}

/* learning行 */
.charm-item-list-text  .learning-list .learning-list-item{
	font-size:larger;
	font-weight:bold;
	background:#f7fbf8;
}

.classification-list{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:60px 60px 70px;
	place-items:center;
	border:1px solid var(--college-green);
	border-radius:20px;
	position:relative;

}


.classification-list li{
	width:100%;
	height: 100%;
	display:grid;
	place-items:center;
	text-align:center;
	border-right:1px solid var(--college-green);
}
/* 3列目だけ線を消す */
.classification-list li:nth-child(3n){
	border-right:none;
}
.classification-list-item{
	background:var(--college-green);
	color:var(--college-white);
	border-radius:10px;
	padding:0.2rem 1rem;
	text-shadow: 1px 1px 1px rgb(61 70 70);
	font-size:larger;
}

/* =========================
活用事例
======================== */
#example-college{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.wave-wrap{
	position:relative;
	width:100%;
}

/* 波 */
.wave-svg{
	width:100%;
	height:100px;
	display:block;
	position:relative;
	z-index:1;
}
.wave-wrap .bg-left-top,.wave-wrap .bg-right-top{
	top:0;
}
.example-item{
	padding:100px 0 0;
	display:flex;
	gap:2rem;
	z-index:10;
}@media screen and (max-width:767px){
	.example-item{
		padding:50px 0 0;
		flex-direction:column;
	}
}
.example-item-list{
	width:100%;	
	background:var(--college-white);
	border:8px double var(--college-green-light);
	padding:2rem .8rem;
	display:flex;
	flex-direction:column;
	text-align:left;
	gap:1rem;
	position:relative;
	z-index:10;
}@media screen and (max-width:767px){
	.example-item-list{
		padding:1rem .5rem;
	}
}

.example-item-list:before{
	content:"";
	position:absolute;
	top:-210px;
	left:0;
	width:260px;
	height:300px;
	background-image:url("/img/college/example-title.webp");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	z-index:1;
}
.example-item-list:last-child::before {
    display: none;
}
@media screen and (max-width:767px){
	.example-item-list:before{
		top:-113px;
		width:150px;
		height:150px;
	}
	.example-item-list_before:before{display:none;}
}
.marker-box{
	display: inline-block;
	background:var(--college-yellow);
	padding:0.5rem 1rem;
	position:relative;
	border-radius:20px;
	font-size:x-large;
}@media screen and (max-width:767px){
	.marker-box{
		font-size:large;
	}
}
.example-item-list .title{
	display:grid;
	grid-template-columns:1fr 120px;
	align-items:center;
	font-weight:bold;
	font-size:x-large;
}@media screen and (max-width:767px){
	.example-item-list .title{
		font-size:medium;
	}
}



/* =========================
ご利用の流れ
======================== */
#usage-flow .flow{
	display:flex;
	flex-direction:column;
	gap:3rem;
	align-items:center;
}

#usage-flow .flow-step{
	width:80%;
	display:flex;
	flex-direction:column;
	gap:2rem;
}

#usage-flow .flow-head{
	background:var(--college-green-light);
	border-radius:999px;
	padding:1rem 2rem;
	display:grid;
	grid-template-columns:auto 1fr 50px;
	align-items:center;
	gap:1rem;
}

#usage-flow .step-label{
	background:var(--college-green-dark);
	color:var(--college-white);
	font-weight:bold;
	font-size:larger;
	padding:.5rem 2rem;
	clip-path:polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 6% 50%);
	line-height:1;
}

#usage-flow .flow-head h3{
	font-size:x-large;
	font-weight:bold;
	text-align:center;
	margin:0;
}

#usage-flow .step-decoration{
	color:var(--college-green);
	font-size:2rem;
	letter-spacing:.3rem;
}

#usage-flow .flow-body{
	width:100%;
	/* 	display:flex; */
	display:grid;
	grid-template-columns:100px 1fr;
	padding: 0 3rem;
	align-items:center;
	justify-content:center;
	gap:3rem;
}@media screen and (max-width:767px){
	#usage-flow .flow-body{
		grid-template-columns:70px 1fr;
		padding: 0 1.3rem;
		text-align:left;
		gap:1rem;
	}

}

#usage-flow .flow-body img{
	width:100px;
	height:auto;
	flex-shrink:0;
}
#usage-flow .flow-body .btn{
	font-size: large;
}


@media screen and (max-width:767px){
	#usage-flow .flow-step{
		width:96%;
		gap: 1rem;
	}
	#usage-flow .flow-head{
		border-radius:1rem;
		margin:0 1rem;
		padding: .5rem 2rem;
		grid-template-columns:1fr;
		text-align:center;
		gap:0;
	}
	#usage-flow .flow-head img{
		display:none;
	}
	#usage-flow .step-label{
		margin:auto;
		padding:.2rem 2rem;
		font-size:1rem;
	}

	#usage-flow .flow-head h3{
		font-size:1rem;
	}

	#usage-flow .flow-body p{
		font-size:inherit;
	}
	#usage-flow .flow-body .btn{
		padding: 1rem .5rem;
		font-size: medium;
	}

}
/* =========================
料金
======================== */
.ticket-price-frame{
	display:flex;
	flex-direction:column;
	gap:2rem;
}@media screen and (max-width:767px){
	#ticket-price table .p-larger{
		font-size:medium;
	}
}

.ticket-price-table p {
	font-weight: bold;
	text-align: center;
}
.ticket-price-table tbody{
	display:flex;
}@media screen and (max-width:767px){
	.ticket-price-table tbody{
		flex-direction:column;
	}
}
.ticket-price-table tr {
	flex:1;
	display:flex;
	flex-direction:column;
}@media screen and (max-width:767px){
	.ticket-price-table tr {
		display:grid;
		grid-template-columns:1fr 1fr;
	}
}
.ticket-price-table th {
	text-align: center;
	font-weight: bold;
	background: var(--college-green);
	border: solid 1px var(--college-bg-gray);
	color: #fff;
	padding: 10px;
}
.ticket-price-table th,.ticket-price-table td {
	flex:1;
	border: solid 1px var(--college-bg-gray);
}
.intent_down {
	text-indent: -3em;
	padding-left: 2.5em;
}
.intent_text {
	text-indent: -1em;
	padding-left: 1em;
}
/* =========================
ご利用にあたっての注意事項
======================== */
#usage-notes .boundary-line{
	height:150px;
	padding-top: 20px;
}@media screen and (max-width:767px){
	#usage-notes .boundary-line{
/* 		height:130px; */
		height:100px;
		
	}
}

#usage-notes .boundary-line::before{
	content:"";
	position:absolute;
	top:-117px;
	top:-127px;	
	right:25%;
	width:120px;
	height:150px;
	background-image:url("/img/college/woman3.webp");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	z-index:1;
}@media screen and (max-width:1439px){
	#usage-notes .boundary-line::before{
				right:350px;
	}
}
/* @media screen and (max-width:767px){
	#usage-notes .boundary-line::before{
		width:100px;
		top: -119px;
	}
} */
/* ノートPC以上 */
@media screen and (max-width:768px){
	#usage-notes .boundary-line::before{
		display:none;
	}
}
#usage-notes .contents-box{
	display:flex;
	flex-direction:column;
	gap:30px;
}
#usage-notes .usage-notes-wrap{
	display:flex;
	flex-direction:column;
	gap:50px;
	padding-top:50px;
	text-align:left;
}


/* ---------------- */
/* アコーディオン */
/* ---------------- */
/* 共通リセット */
#usage-notes .ac1-ex-dl,
#usage-notes .ac1-ex-dt,
#usage-notes .ac1-ex-dd {
	margin: 0;
	padding: 0;
}

/* dl同士の間隔 */
#usage-notes .ac1-ex-dl + .ac1-ex-dl {
	margin-top: 1rem;
}

/* dt, ddパディング */
#usage-notes .ac1-ex-dt {
	padding: 10px;
}
#usage-notes .ac1-ex-dd {
	padding: 30px 15px;
}

/* dlの基本 */
#usage-notes .ac1-ex-dl {
	position: relative;
	overflow: hidden;
}

/* input非表示 */
#usage-notes .ac1-ex-dl > input {
	display: none;
}

/* dtの見た目 */
#usage-notes .ac1-ex-dt {
	position: relative;
	z-index: 1;
	padding-right: 50px;
	cursor: pointer;
	background:var(--college-white);
	border: 2px solid var(--college-green); 
	transition: 0.4s;
	display: flex;
	align-items: baseline;
	font-size:larger;
}

/* デフォルト（閉じているとき） */
#usage-notes .ac1 .ac1-ex-dd {
	position: absolute;
	visibility: hidden;
	transform: translateY(-100%);
	background-color: transparent; /* 背景を透明にする */
	border: none; /* 枠も消す */
	transition: .4s;
}

/* 開いたとき */
#usage-notes .ac1 .ac1-ex-dl > input:checked + label + .ac1-ex-dd {
	position: relative;
	visibility: visible;
	transform: translateY(0);
	background-color: color: var(--college-white) ; 
	border: 2px solid var(--inf-main); /* 必要なら枠を戻す */
	border-top:none;
}

/* 開閉 */

/* 矢印 */
#usage-notes .ac1-ex-dt::before,
#usage-notes .ac1-ex-dt::after {
	content: none;
}

#usage-notes .ac1-ex-dt::after {
	content: "▼";
	position: absolute;
	top: 50%;
	right: 12px;

	width: 28px;
	height: 28px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--college-green-dark); 
	border-radius: 50%;

	font-size: 12px;
	line-height: 1;
	color: var(--college-white) ; 

	transform: translateY(-50%);
	transition: transform 0.4s;
}

#usage-notes .ac1-ex-dl > input:checked ~ label > .ac1-ex-dt::after {
	transform: translateY(-50%) rotate(180deg);
}
#usage-notes　.ac1-ex-dt:hover::after {
	background: #fff;
}

/* 内側 dl 装飾 */
#usage-notes .ac1-ex-dd dl {
	padding: 30px 0;
}

#usage-notes .ac1-ex-dd dt {
	background:var(--college-green-light);
	padding-bottom: 3px;
}

#usage-notes .ac1-ex-dd dd {
	padding-bottom: 50px;
	padding-left: 1.5em;
}

#usage-notes .ac1-ex-dd dd:last-of-type {
	padding-bottom: 0;
}

#usage-notes .ac1-ex-dd ul {
	padding-top: 5px;
}

#usage-notes .ac1-ex-dd ul li {
	padding-bottom: 10px;
	text-indent: -1em;
}









/*----------------
* comment
-------------------*/

/* ----------------------
* ページメインタイトル
------------------------ */
.kizi_ichiran {
	justify-content: flex-start;
}
.kizi_ichiran_box {
	padding:0;
}
@media screen and (max-width: 767px) {
	.kizi_ichiran .kizi_ichiran_item {
		grid-template-rows: minmax(50px, 200px) auto auto;
		width:45%;	  
	}
	.kizi_ichiran .kizi_ichiran_item .title{
		display:none;
	}
}
@media screen and (max-width: 429px) {
	.kizi_ichiran .kizi_ichiran_item {
		width:90%;	  
	}
}
.college-new{
	position:relative;
}
.college-new::before{
	content: "";
	position: absolute;
	top: -1px;   /* 好みで微調整 */
	left: -8px;  /* 好みで微調整 */
	width: 60px;   /* 画像の幅に合わせて調整 */
	height: 60px;
	background: url('https://www.j-union.net/wp-content/uploads/new.png') no-repeat center/contain;
	z-index: 10;
	pointer-events: none; /* クリック邪魔しない */
}


/* ********************
高度な検索ここから
******************** */
.select-start_place option{
	padding:1%;
} 
.reserch-box{
	background:#C5E1C2;
	padding:20px 3%;
	border-radius:10px;
}

.course-search-form {
	display: flex;
	flex-direction:column;
	gap: 16px;
	align-items: stretch;
}

/* 左側（入力エリア） */
.search-fields {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* フリーワード */
.search-fields input[name="s"] {
	width: 100%;
	padding: 10px 12px;
	font-size: 16px;
}

/* セレクト群 */
.search-selects {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	gap: .8rem;
}@media (max-width: 767px) {
	.search-selects {gap:1rem;}
}

.search-selects select {
	width: 100%;
	max-width: 150px; 
	padding: 8px 10px;
	border:none;
}@media (max-width: 767px) {
	.search-selects select {
		max-width: none; 
	}
}
.search-selects .select-weekday {
	min-width: 70px;
}
.select-weekday option {
	text-align: center;
}
/* 検索ボタン（右固定） */
.search-button {
	width:100%;
	cursor: pointer;
	height: 50%;
	align-self: flex-end; /* 下寄せ */
	border-radius:10px;
	background:#68B15F;
	color:#fff;
}
.term-select {
	color: #999; /* 未選択時はグレー */
}
.term-select option:first-child {
	background: #777;
	color:#fff;
}
.term-select option {
	color: #000; /* ドロップダウン内は通常色 */
}

/* 値が選ばれたら色を戻す */
.term-select:valid {
	color: #000;
}
/* スマホ */
@media (max-width: 767px) {
	.course-search-form {
		flex-direction: column;
	}

	.search-button {
		width: 100%;
	}
}

.spin-stop{
	animation: spinStop 3.5s cubic-bezier(.19,1,.22,1) forwards;
}

@keyframes spinStop{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(720deg);
	}
}

/* モーダルの高さは初期化に */
.modal-content{height: initial;}

/* footerのナビゲーション装飾 */
.pagetop_college{
	width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	flex-wrap: wrap;
	position: fixed;
    right: 50px;	
    bottom: 0;	
    background: #6AB572;
    color: #fff;
    z-index: 10000;
}
.pagetop_college-nav{	
    right: 0;
}
.pagetop.show {
	opacity:1;
}
.catetop_link_college_footer_pc{
	display: flex;
	max-width: min(98%, 940px);
	justify-content: space-around;
	gap: 2rem;	
	padding:0 2rem;
	text-align:center;
	font-weight:bold;
}
@media (max-width: 767px) {
	.catetop_link_college_footer_pc{justify-content:flex-end;gap:.5rem;padding:0 .5rem;}
}

.catetop_link_college_footer_pc .item a{
	color:var(--college-white);
}

/* パンくずリスト */
.mt-breadcrumb{
	margin-top:40px;
}
.breadcrumb{
	margin:0;
}