@charset "utf-8";
body{
	font-size: 18px;
    line-height: 1.5em;
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
    overflow-wrap: break-word;
	word-break: normal;
	color: #333;
	font-feature-settings: "palt";
}
::selection {
	background: #222751;
	color: #fff;
}

img{width:auto;
	height: auto;
	max-width:100%;
}p{line-height: 1.7em;
	margin-bottom: 1.5em;
}p:last-child{margin-bottom: 0;}

.s{font-family: 'Noto Serif JP', serif;}
.big{font-size: 1.2em;}
.small{font-size: .8em;}
.b{font-weight: 700;}
.l{text-decoration: underline;}
.u{background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fff46c 50%) repeat scroll 0 0;}
.red{color: #B62121;}
.ye{color: #FFE922;}

.sp{display: none!important;}

.right{
	width: 300px;
	display: block;
    float: right;
	padding: 0 1%;
}
.img_b{
	text-align: center;
	margin: 0 auto 1.5em auto;
	display: block;
}
.c_text{
	text-align: center;
	font-size: 1.3em;
	font-weight: 600;
	margin-bottom: .7em;
}

/*追従*/
.cont{
    width: 170px;
    height: auto;
    position:fixed;
    bottom :10px;
    right: 10px;
	z-index: 1000;
}

/*header*/
.top_head{text-align: center;}
header{
	background: url(../img/head_bg.png)center/cover;
	text-align: center;
	padding: 2% 0;
}
header img{vertical-align: bottom;}

/*main*/
.bg2{background: #F3F2EF;}
.bg_arrow{
	padding-bottom: calc(8vw + 10px);
	position: relative;
	overflow: hidden;
	background: #F3F2EF;
}
.bg_arrow::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom: 10vw solid #fff;  /* 三角を白に */
	border-left: 100vw solid transparent;
}
.bg_arrow::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom: 10vw solid #fff;   /* 三角を白に */
	border-right: 100vw solid transparent;
}

.wrap{
	max-width: 800px;
	margin: 0 auto;
	padding: 3% 2%;
}

/**/
h2{
	font-family: 'Shippori Mincho B1', serif;
	text-align: center;
	font-size: 1.8em;
	font-weight: 800;
	line-height: 1.4em;
	position: relative;
	margin: 5% auto;
	color: #222751;
}
h2:first-child{margin-top: 0;}
h2 span:not([class]) {
	color: #fff;
	background: #222751;
	padding: 0 8px;
	font-size: 1.1em;
	line-height: 1.7em;
}
.bg h2{color: #fff;}

h3{
	font-size: 1.2em;
	font-weight: 600;
	margin-bottom: 3%;
}h3:first-letter{
	font-size: 1.5em;
	color: #222751;
}

h4{
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	margin: 3% auto;
	line-height: 1.4em;
	padding-bottom: 3%;
    border-bottom: solid 1px #222751;
}
.bg h4{border-bottom: solid 1px #fff;}

h5{
	font-size: 1em;
	font-weight: 600;
	margin: 0 auto .3em auto;
	color: #222751;
}
h5 span{
	color: #AA8738;
	padding-right: 3%;
	font-size: 1.5em;
}

/**/
.intro{
	background: #a3752a;
	padding: 2%;
	text-align: center;
}

/*動画*/
.movie{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: -1% 0 5% 0;
}
.movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


/**/
.box{
    padding: 5%;
    box-sizing: border-box;
    margin: 0 auto 3% auto;
    background: #fff;
	border: solid 2px #C3B7A0;
}
.box:last-child{margin-bottom: 0;}

.box_2{
	background: url(../img/r_img01.png)center right;
	background-repeat: no-repeat;
}
.box_2 p{filter: drop-shadow(1px 1px 0 #fff);}

/**/
.tktn {
	background: url(../img/tktn_bg.png)center/cover;
	background-attachment: fixed;
}
.tktn_box{
	background: rgba(255, 255, 255, 0.7);
	border: none;
	border-radius: 10px;
	padding: 5%;
}

/**/
.vision {
	background: url(../img/vision_bg.png)center/cover;
	background-attachment: fixed;
	text-align: center;
	color: #fff;
	font-size: 1.2em;
	font-weight: 600;
}

/**/
.btn{
	margin: 5% auto 2% auto;
	text-align: center;
}
a img{transition: all .5s;}
a img:hover{
	transform: translateY(-10px);
	opacity: 0.8 ;
}

.note{
	background: #F3F2EF;
	padding: 3%;
	font-size: .9em;
	margin-bottom: 3%;
}

/**/
.arrow {
	display: block;
	margin: 0 auto 7% auto;
	animation: arrow 2s infinite;
	text-align: center;
}
@-webkit-keyframes arrow {
	0% {-webkit-transform: translate(0, 0);
		opacity: 0;}
	50% {opacity: 1;}
	100% {-webkit-transform: translate(0, 25px);
		opacity: 0;}
}





/*フォーム*/
.form_off{display: none;}
.form_on{display: block;}
.form {
    margin: 0 auto 5% auto;
    padding: 5%;
    max-width: 800px;
	background: #F3F2EF;
	border: solid 3px #B79C60;
	box-sizing: border-box;
}
.form-item {
    padding-bottom: 2%;
    width: 80%;
	margin: 0 auto;
    display: flex;
    align-items: center;
}
.label {
    width: 100%;
    max-width: 120px;
    letter-spacing: 0.05em;
	margin-bottom: 0;
}
.input {
    border: 2px solid #ddd;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 530px;
	font-size: 1em;
}
.form_btn{
	display: block;
	margin: 3% auto 0 auto;
	-webkit-animation: anime_pulse 1.5s infinite;
	animation: anime_pulse 1.5s infinite;
	border-radius: 5px;
}
/*アニメーション*/
@-webkit-keyframes anime_pulse {
	0% { -webkit-transform: scale(0.95);
	transform: scale(0.95); }
	70% { -webkit-transform: scale(1);
	transform: scale(1) }
	100% { -webkit-transform: scale(0.95);
	transform: scale(0.95);}
}

.rule {
    background: #fff;
    padding: 3%;
    overflow-y: scroll;
    height: 100px;
    margin-top: 3%;
    font-size: .8em;
    color: #333;
}
.rule a { color: #B62121;}

/**/
dl{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	gap : 10px;
}
dl dt {
	border: solid 1px;
	width: 35%;
	padding: 1.3% 2.5%;
	font-size: 1.1em;
	text-align: center;
	margin-bottom: 0;
    box-sizing: border-box;
}
dl dd {
    font-size: 1em;
    width: 62%;
    font-weight: 600;
	margin-bottom: 0;
}








/**/
ul {
	list-style: url(../img/li.png) inside;
	font-family: 'Noto Serif JP', serif;
	font-weight: 800;
}
ul li {
	padding: 0 0 1em 1.5em;
    text-indent: -1.5em;
    font-size: 1.1em;
}
ul li:last-child{padding-bottom: 0;}

/**/
.list_bg{
	background: url(../img/list_bg.png)center right,#E7E7E7;
	background-repeat: no-repeat;
	background-size: contain;
	padding-bottom: 3%;
}
.li_arrow{
	margin: -8% auto 1.5em auto;
	text-align: center;
	display: block;
}

.list_bg2{
	background: url(../img/list_bg2.png)center right/cover;
	background-repeat: no-repeat;
}

/**/
.list_r{
	display: inline-block;
	width: 35%;
	height: 300px;
    object-fit: cover;
	margin-bottom: 3%;
}
.list_l{
	display: inline-block;
	width: 65%;
	background: #F3F2EF;
	margin-left: -15px;
	margin-bottom: 3%;
	padding: 3%;
    box-sizing: border-box;
}

/**/
.img_in{
	display: inline-block;
	width: 48%;
	margin: 0 1% 3% 1%;
}

/**/
.lesson{
    box-sizing: border-box;
    margin: 0 auto 3% auto;
    background: #fff;
	padding: 3%;
}
.lesson img{
	display: inline-block;
	width: 40%;
	vertical-align: top;
}
.lesson .lesson_box{
	display: inline-block;
	width: 60%;
	box-sizing: border-box;
	padding-left: 2%;
	vertical-align: top;
}

.lesson p{
	font-weight: 600;
	border-bottom: solid 1px #222751;
	padding-bottom: 2%;
	margin-bottom: 3%;
}

.lesson ul{font-family: 'Noto Sans JP', sans-serif;}
.lesson ul li{
	font-size: 1em;
	padding-bottom: .3em;
	font-weight: normal;
}

/**/
.name{
	text-align: right;
	font-family: 'Shippori Mincho B1', serif;
	font-size: 1.2em;
	font-weight: 800;
}

/**/
.step p{
	margin-bottom: .3em;
	font-family: 'Shippori Mincho B1', serif;
	font-size: 1.1em;
	font-weight: 800;
}
.step p span{
	background: #222751;
	color: #fff;
	margin-right: 1%;
	padding: 0 10px;
	border-radius: 30px;
}

.step_li{
	background: #F3F2EF;
	color: #222751;
	padding: 0 2% 2% 2%;
	display: inline-block;
	box-sizing: border-box;
	width: 31.3%;
	margin: 0 1%;
	position: relative;
	min-height: 300px;
	vertical-align: middle;
}
.step_li h5{
	top: -20px;
	margin-bottom: -15px;
	position: relative;
    text-align: center;
    line-height: 1;
	color: #222751;
	font-size: 1.1em;
	background: #F3F2EF;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	align-items: center;
    justify-content: center;
	display: flex;
	flex-direction: column;
}
.step_li h5 span{
	color: #222751;
	font-size: 1.7em;
}

/**/
.prof_img{margin-bottom: 3%;}

/**/
.message{
	background-image: url(../img/message.png);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 5% 2%;
}
.message .wrap{
	border: solid 1px #fff;
	background: rgba(255, 255, 255, 0.7);
}
.message h2{color: #997A3C;}
.message h2 span:not([class]){background: #997A3C;}

.message .box{border: none;}

/*footer*/
footer{
	background: #222751;
	color: #fff;
	padding: 30px 2%;
	text-align:center;
	font-size:14px;
}
footer p,footer a{
    line-height: 1em;
	color:#fff;
}
footer a {
    font-size: 13px;
    margin: 0 .5%;
}

@media screen and (max-width: 768px) {
   /*--- 表示領域が768px以下の場合に適用するスタイル ---*/

}/*///media*/

@media screen and (max-width: 640px) {
   /*--- 表示領域が640px以下の場合に適用するスタイル ---*/
	.sp{display: block!important;}
	.pc{display: none!important;}

	.text p br{display: none;}

	.right{
		float: none;
		width: 90%;
		margin: 0 auto 5%;
	}

	.c_text{font-size: 1.1em;}

	/*追従*/
	.cont{width: 120px;}

	/*header*/
	header{padding: 0;}

	/*main*/
	/**/
	h2{
		font-size: 1.4em;
		margin-bottom: 5%;
	}
	h2.h2_top{padding-top: 10%;}
	h4{
		font-size: 1.3em;
		line-height: 1.3em;
		width: 100%;
		box-sizing: border-box;
	}

	
	/*フォーム*/
	.form-item { width: 100%;}
	.label {display: none;}
	.input{margin-left: 0;}
	.form_btn{width: 100%;}


	/**/
	.list_bg{
		background-color:rgba(231,231,231,0.7);
		background-blend-mode:lighten;
		background-size: cover;
	}

	/**/
	.list_r{
		display: block;
		width: 100%;
		height: 220px;
		margin-bottom: 3%;
	}
	.list_l{
		display: block;
		width: 90%;
		margin: -35px auto 3% auto;
		z-index: 1000;
		position: relative;
	}

	/**/
	.img_in{
		display: block;
		width: 100%;
		margin: 0 1% 3% 1%;
	}



	/**/
	.lesson img{
		display: block;
		width: 100%;
		margin-bottom: 3%;
	}
	.lesson .lesson_box{
		display: block;
		width: 100%;
		padding-left: 0;
	}

	.lesson p{
		font-weight: 600;
		border-bottom: solid 1px #222751;
		padding-bottom: 2%;
		margin-bottom: 3%;
	}

	/**/
	.step p span:not(.tktn .step p span){
		display: block;
		width: fit-content;
		padding: 0 20px;
	}

	.step_li{
		padding: 0 3% 5% 3%;
		display: block;
		width: 100%;
		margin: 3% auto 0 auto;
		position: relative;
		min-height: fit-content;
		text-align: center;
		filter: drop-shadow(0 0 5px #222751);
	}
	.step_li:first-child{margin-top: 5%;}
	.step_li h5{
		font-size: 1em;
		width: 80px;
		height: 80px;
		top: -15px;
	}

}/*///media*/