@charset "utf-8";
.container{
	position : relative;
	display : flex;
	justify-content : space-between;
	align-items : flex-start;
	width : 100%;
	height : auto;
}
header{
	position : fixed;
	display : block;
	width : 335px;
	height : 100vh;
	background-color : #FDE4BD;
	top : 0;
	z-index : 100;
}
.main-content{
	position : relative;
	display : block;
	width : calc(100% - clamp(200px, (335 / 1366) * 100vw, 335px));
	height : auto;
	margin-left : clamp(280px, (335 / 1366) * 100vw, 335px);
}
.content{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content .wrap{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### h2.headline
# ================================================================= */
h2.headline{
	position : absolute;
	display : flex;
	justify-content : center;
	align-items : center;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	margin : auto auto;
	width : 410px;
	line-height : 1;
}
h2.headline span{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 0 50px 0 50px;
	background-color : #FFFFFFCC;
	text-align : center;
	color : #F25700;
	font-size : 26px;
	font-weight : bold;
	padding : 30px 0;
}
/* # =================================================================
#### h3.icon-header
# ================================================================= */
.icon-header{
	position : relative;
	display : block;
	width : auto;
	height : auto;
}
.icon-header h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	line-height : 1;
	font-size : 25px;
	font-weight : 500;
	padding-left : 1.5em;
	padding-bottom : 10px;
	margin-bottom : 20px;
}
.icon-header h3::before{
	content : "";
	position : absolute;
	display : block;
	width : 25px;
	height : 25px;
	left : 0;
	top : 2px;
}
.icon-header h3 span{
	position : relative;
	display : inline-block;
	color : var(--font-color);
	font-size : 18px;
	margin-left : 10px;
}
.icon-header h3.blue{
	color : #4199B5;
	border-bottom : 1px solid #4199B5;
}
.icon-header h3.blue::before{
	background : url(../../images/common/handle_B.png)center / contain no-repeat;
}
.icon-header h3.orange{
	color : #F25700;
	border-bottom : 1px solid #F25700;
}
.icon-header h3.orange::before{
	background : url(../../images/common/handle_O.png)center / contain no-repeat;
}
.icon-header h3.brown{
	color : #992200;
	border-bottom : 2px solid #992200;
}
.icon-header h3.brown::before{
	background : url(../../images/common/handle_R.png)center / contain no-repeat;
}
/* # =================================================================
#### view more
# ================================================================= */
.view-more{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.view-more a{
	position : relative;
	display : block;
	width : 200px;
	height : auto;
	border-radius : 50px;
	border : 1px solid #4199B5;
	background-color : #FFF;
	line-height : 1;
	text-align : center;
	color : #4199B5;
	font-size : 16px;
	padding : 12px;
}
.view-more a:hover{
	background-color : #4199B5;
	color : #FFF;
}
.view-more a::after{
	content : "";
	position : absolute;
	display : block;
	top : 0;
	right : 17px;
	bottom : 0;
	left : auto;
	margin : auto auto;
	background : url(../../images/button/arrow_b.png)center / contain no-repeat;
	width : 12px;
	height : auto;
	aspect-ratio : 13 / 16;
}
.view-more a:hover::after{
	background : url(../../images/button/arrow_w.png)center / contain no-repeat;
}
/* # =================================================================
#### image-button
# ================================================================= */
.image-button{
	position : relative;
	display : block;
	width : 300px;
	height : 60px;
}
.image-button a{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	text-indent : 100%;
	white-space : nowrap;
	overflow : hidden;
}
.image-button a::after{
	content : "\2192";
	position : absolute;
	display : flex;
	align-items : center;
	font-size : 22px;
	top : 0;
	right : 19px;
	bottom : 0;
	left : auto;
	margin : auto auto;
	text-indent : 0;
	transition : all 0.3s ease;
}
.image-button a:hover::after{
	transform : translateX(3px);
}
/* # =================================================================
#### image-button 車種別料金一覧表
# ================================================================= */
.image-button.fees-button a{
	background : url(../../images/button/price.png)center / contain no-repeat;
}
.image-button.fees-button a::after{
	color : #4199B5;
}
/* # =================================================================
#### image-button 送迎バスについて
# ================================================================= */
.image-button.bus-button a{
	background : url(../../images/button/bus.png)center / contain no-repeat;
}
.image-button.bus-button a::after{
	color : #1D8A48;
}
/* # =================================================================
#### image-button 入校予約
# ================================================================= */
.image-button.reservation-button a{
	background : url(../../images/button/school.png)center / contain no-repeat;
}
.image-button.reservation-button a::after{
	color : #992200;
}
/* # =================================================================
#### image-button 入校予約申し込み
# ================================================================= */
.image-button.guide01-button a{
	background : url(../../images/button/enrollment.png)center / contain no-repeat;
}
.image-button.guide01-button a::after{
	color : #1D8A48;
}
/* # =================================================================
#### image-button 本申し込み
# ================================================================= */
.image-button.guide02-button a{
	background : url(../../images/button/application.png)center / contain no-repeat;
}
.image-button.guide02-button a::after{
	color : #0E6FB8;
}
/* # =================================================================
#### image-button 入校に必要なものはこちらから
# ================================================================= */
.image-button.guide03-button{
	width : 500px;
	height : 80px;
	margin : 30px 0;
}
.image-button.guide03-button a{
	background : url(../../images/button/need.png)center / contain no-repeat;
}
.image-button.guide03-button a::after{
	font-size : 30px;
	right : 25px;
	color : #992200;
}








/* # =================================================================
#### image-button about
# ================================================================= */
.about-point .image-button{
	position : relative;
	display : block;
	width : 250px;
	height : 45px;
	margin : 0 0 0 auto;
}
.about-point ul li.point03 .image-button a{
	background : url(../../images/button/point3.png)center / contain no-repeat;
}
.about-point ul li.point05 .image-button a{
	background : url(../../images/button/point5.png)center / contain no-repeat;
}
.about-point ul li.point03 .image-button a::after{
	color : #E5025E;
	font-size : 16px;
	right : 14px;
}
.about-point ul li.point05 .image-button a::after{
	color : #F25700;
	font-size : 16px;
	right : 14px;
}
/***  ****/
.image-button.point-button{
	width : 210px;
	height : 40px;
	margin : 30px 0 0 auto;
}
.image-button.point-button a{
	background : url(../../images/button/point.png)center / contain no-repeat;
}
.image-button.point-button a::after{
	color : #FFF;
	font-size : 16px;
	right : 12px;
}
/* # =================================================================
#### post-list
# ================================================================= */
.post-list{
	
}
.post-list dl{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
	border-top : 2px solid #333;
	border-bottom : 2px solid #333;

}
.post-list dl dt{
	position : relative;
	display : block;
	width : 130px;
	height : auto;
	line-height : 1.9;
	font-size : 14px;
	border-bottom : 1px solid #333;
	padding : 10px 0 10px 30px
}
.post-list dl dd{
	position : relative;
	display : block;
	width : calc(100% - 130px);
	height : auto;
	border-bottom : 1px solid #333;
	padding : 10px 30px 10px 0;
}
.post-list dl dt:last-of-type,
.post-list dl dd:last-of-type{
	border-bottom : none;
}
.post-list dl dd .post-categories{
	

}
.post-categories{
	
}
.post-categories.pc{
	display : block;
}
.post-categories.sp{
	display : none;
}
.post-list dl .post-categories a{
	position : relative;
	display: inline-block;
	color : #4199B5;
	font-size : 14px;
	background-image: linear-gradient(#4199B5, #4199B5);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 0.3s ease-in-out;
	margin-left : 10px;
}
.post-list dl .post-categories a:first-child{
	margin-left : 0;
}
.post-list dl .post-categories a:hover{
	background-size: 100% 1px;
}
.post-list .post-title{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.post-list .post-title h2{
	
}
.post-list .post-title a{
	display : -webkit-box;
	-webkit-line-clamp : 3;
	-webkit-box-orient : vertical;
	overflow : hidden;
	font-size : 16px;
	font-weight : 500;
}
.post-list .post-title a:hover{
	
}
/* # =================================================================
#### swiper about-point
# ================================================================= */
.about-point .swiper-wrapper{
	display : flex !important;
	flex-direction : row;
}
.about-point .swiper-slide{
	width : 100%;
	height : auto;
	flex-shrink : 0; /* 潰れないように固定 */
}
.about-point .swiper-slide figure img{
	width : 100%;
	height : auto;
	display : block;
	aspect-ratio : 13 / 9;
	object-fit : cover;
}
.front-about .swiper-button-next{
	position : absolute;
	display : flex;
	align-items : center;
	top : 0;
	right : -90px;
	bottom : 0;
	left : auto;
	margin : auto auto;
	width : 80px;
	height : 80px;
	background : url(../../images/button/point_aroow.png)center / contain no-repeat;
}
.front-about .swiper-button-next::after{
	content : none;
}
/* # =================================================================
#### about-point
# ================================================================= */
.about-point{
	position : relative;
	display : block;
	width : 550px;
	height : auto;
}
.about-point ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.about-point ul li{
	position : relative;
	display : flex;
	flex-direction : column;
	width : 100%;
	height : auto;
}
.about-point ul li figure{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.about-point ul li figure img{
	width : 100%;
	height : auto;
	display : block;
	aspect-ratio : 13 / 9;
	object-fit : cover;
	border-radius : 25px 25px 0 0;
}
.about-point ul li .point{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	flex : 1;
	border-radius : 0 0 25px 25px;
	background-color : #FFF;
	padding : 30px 50px;
	box-sizing : border-box;
}
.about-point ul li .point h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : 30px;
	font-weight : 600;
	margin-bottom : 20px;
}
.about-point ul li .point h4 span{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	padding-bottom : 10px;
	margin : 0 auto;
}
/**** icon ****/
.about-point ul li .point h4 span::before{
	content : "";
	position : absolute;
	display : block;
	width : 78px;
	height : 78px;
	top : -65px;
	right : auto;
	bottom : auto;
	left : -75px;
	margin : auto auto;
}
.about-point ul li.point01 .point h4 span::before{
	background : url(../../images/common/point_1.png)center / contain no-repeat;
}
.about-point ul li.point02 .point h4 span::before{
	background : url(../../images/common/point_2.png)center / contain no-repeat;
}
.about-point ul li.point03 .point h4 span::before{
	background : url(../../images/common/point_3.png)center / contain no-repeat;
}
.about-point ul li.point04 .point h4 span::before{
	background : url(../../images/common/point_4.png)center / contain no-repeat;
}
.about-point ul li.point05 .point h4 span::before{
	background : url(../../images/common/point_5.png)center / contain no-repeat;
}
/**** under ****/
.about-point ul li .point h4 span::after{
	content : "";
	position : absolute;
	display : block;
	width : 105%;
	height : auto;
	top : auto;
	right : 0;
	bottom : 0;
	left : -2.5%;
	margin : auto auto;
}
.about-point ul li.point01 .point h4 span::after{
	border-bottom : 1px solid #E50113;
}
.about-point ul li.point02 .point h4 span::after{
	border-bottom : 1px solid #0E6FB8;
}
.about-point ul li.point03 .point h4 span::after{
	border-bottom : 1px solid #E5025E;
}
.about-point ul li.point04 .point h4 span::after{
	border-bottom : 1px solid #1D8A48;
}
.about-point ul li.point05 .point h4 span::after{
	border-bottom : 1px solid #F25700;
}
.about-point ul li p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
	font-size : 18px;
	margin-bottom : 30px;
}
.about-point ul li p:last-child{
	margin-bottom : 0;
}
/* # =================================================================
#### cocoiro-slider
# ================================================================= */
.c-slider{
	width : 100%;
	overflow : hidden;
	position : relative;
	-webkit-mask-image : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="none"><path d="M0,70 C150,70 150,30 300,30 C450,30 450,70 600,70 L600,370 C450,370 450,330 300,330 C150,330 150,370 0,370 Z" fill="black"/></svg>');
	mask-image : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="none"><path d="M0,70 C150,70 150,30 300,30 C450,30 450,70 600,70 L600,370 C450,370 450,330 300,330 C150,330 150,370 0,370 Z" fill="black"/></svg>');
	-webkit-mask-size : 600px 100%;
	mask-size : 600px 100%;
	-webkit-mask-repeat : repeat-x;
	mask-repeat : repeat-x;
	padding : 0;
/*  急
	width : 100%;
	overflow : hidden;
	position : relative;
	padding : 35px 0;
	-webkit-mask-image : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="none"><path d="M0,20 C150,20 150,80 300,80 C450,80 450,20 600,20 L600,320 C450,320 450,380 300,380 C150,380 150,320 0,320 Z" fill="black"/></svg>');
	mask-image : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="none"><path d="M0,20 C150,20 150,80 300,80 C450,80 450,20 600,20 L600,320 C450,320 450,380 300,380 C150,380 150,320 0,320 Z" fill="black"/></svg>');
	-webkit-mask-size : 600px 100%;
	mask-size : 600px 100%;
	-webkit-mask-repeat : repeat-x;
	mask-repeat : repeat-x;
	padding : 0;
*/
}
.c-slider__cell{
	width : 600px;
	border-radius : 0;
	border : none;
	margin-right : 0;
}
.c-slider__cell:hover {
	transform : translateY(0);
	box-shadow : none;
}
.c-slider__cell a{
	pointer-events : none;
}
.ratio-4-3 .c-slider__thumb{
	aspect-ratio : 4 / 4;
}
.c-slider__content{
	display : none;
}


/* # =================================================================
#### closing-area エフェクト
# ================================================================= */
.closing-area .flex h2{
	transition : all 0.8s ease-out .1s;
}
.closing-area .flex h3{
	transition : all 0.8s ease-out .2s;
}
.btn div:nth-child(1){
	transition : all 0.8s ease-out .3s;
}
.btn div:nth-child(2){
	transition : all 0.8s ease-out .4s;
}
.closing-area .right-box img{
	transition : all 0.8s ease-out .5s;
}
.content03 .image-button.point-button{
	transition : all 0.8s ease-out .6s;
}



/* # =================================================================
#### closing-area
# ================================================================= */
.closing-area{
	position : relative;
	display : block;
	width : 1000px;
	height : auto;
	margin : 0 auto 0;
	border-radius : 25px;
	background : url(../../images/common/back-item.jpg)center / cover no-repeat;
	margin-top : 110px;
}
.closing-area .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
/*****  *****/
.closing-area .left-box{
	position : relative;
	display : block;
	width : calc(100% - 275px);
	height : auto;
}
.closing-area .box h2{
	position : relative;
	display : block;
	width : 337px;
	height : auto;
	margin-top : -35px;
	margin-bottom : 25px;
	left : -5px;
}
.closing-area .box h2 img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.closing-area .box h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : #F25700;
	font-size : 35px;
	font-weight : 500;
	padding-left : 105px;
}
.closing-area .box h3 br{
	display : none;
}
/*****  *****/
.closing-area .right-box{
	position : relative;
	display : block;
	width : 275px;
	height : auto;
	margin-top : -110px;
}
.closing-area .right-box img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	right : -16px;
}
/* # =================================================================
#### btn 入校予約 お問い合わせ
# ================================================================= */
.btn{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	padding-left : 105px;
	margin-top : 30px;
}
.btn a{
	position : relative;
	display : block;
	width : 300px;
	height : auto;
	border-radius : 50px;
	text-align : center;
	line-height : 1;
	color : #FFF;
	font-size : 25px;
	font-weight : 500;
	padding : 22px 0;
}
.btn div:nth-child(1) a{
	border : 1px solid #992200;
	background-color : #992200;
}
.btn div:nth-child(2) a{
	border : 1px solid #4199B5;
	background-color : #4199B5;
}
.btn div:hover:nth-child(1) a{
	background-color : #FFF;
	color : #992200
}
.btn div:hover:nth-child(2) a{
	background-color : #FFF;
	color : #4199B5
}
.btn a::before{
	content : "";
	position : absolute;
	display : block;
	width : 60px;
	height : 60px;
	border-radius : 50%;
	top : 0;
	right : auto;
	bottom : 0;
	left : 5px;
	margin : auto auto;
}
.btn div:nth-child(1) a::before{
	border : 1px solid #992200;
	background : #FFF url(../../images/common/car_R.png)center / 55px no-repeat;

}
.btn div:nth-child(2) a::before{
	border : 1px solid #4199B5;
	background : #FFF url(../../images/common/mail.png)center / 45px no-repeat;
}

/* # =================================================================
#### フッター手前で止まるページトップボタン
# ================================================================= */
#page-top{
	position : fixed;
	right : 20px;
	bottom : 30px;
	width : 50px;
	height : 50px;
	background : #333;
	border-radius : 50%;
	display : flex;
	align-items : center;
	justify-content : center;
	cursor : pointer;
	opacity : 0;            /* ← 初期非表示 */
	pointer-events : none;  /* ← 初期クリック無効 */
	transition : opacity 0.4s ease;
	z-index : 500;
}
/* 通常の表示 */
#page-top.is-visible{
	opacity : 1;
	pointer-events : auto;
}
/* フッター手前で非表示に戻す */
#page-top.is-footer-stop{
	opacity : 0;
	pointer-events : none;
}
#page-top a{
	color : #FFF;
	text-decoration : none;
	font-size : 14px;
}
/* ============================================================
#### フェードイン演出（方向付き）
============================================================ */
/* --- はみ出しを防ぐためのカバー --- */
.js-fadein-wrapper {
	display: block;
	contain: paint; /* 中身がはみ出してもスクロール領域を広げない */
	width: auto;
}
/* --- エフェクト用クラス名 --- */
.js-fadein,
.js-fadein-up,
.js-fadein-down,
.js-fadein-left,
.js-fadein-right {
	opacity : 0;
	transition : all 0.8s ease-out;
}

/* --- 各方向別 初期位置 --- */
.js-fadein-up    { transform : translateY(30px); }
.js-fadein-down  { transform : translateY(-30px); }
.js-fadein-left  { transform : translateX(30px); }
.js-fadein-right { transform : translateX(-30px); }

/* --- 表示時 --- */
.js-fadein.is-visible,
.js-fadein-up.is-visible,
.js-fadein-down.is-visible,
.js-fadein-left.is-visible,
.js-fadein-right.is-visible {
	opacity : 1;
	transform : translate(0, 0);
}



/* # =================================================================
#### responsive
# ================================================================= */

/* # =================================================================
#### 1600px
# ================================================================= */
@media screen and (max-width: 1600px){



}/*** 1600px ***/
/* # =================================================================
#### 1400px
# ================================================================= */
@media screen and (max-width: 1400px){
.main-content{
	width : calc(100% - 300px);
	margin-left : 300px;
}
/* # =================================================================
#### h2.headline
# ================================================================= */
h2.headline{
	width : 330px;
}
h2.headline span{
	font-size : 22px;
	padding : 25px 0;
}
/* # =================================================================
#### h3.icon-header
# ================================================================= */
.icon-header h3{
	font-size : 22px;
}
.icon-header h3::before{
	width : 22px;
	height : 22px;
}
.icon-header h3 span{
	font-size : 17px;
}
/* # =================================================================
#### image-button
# ================================================================= */
.image-button{
	width : 250px;
}
.image-button a::after{
	right : 15px;
}
/* # =================================================================
#### cocoiro-slider
# ================================================================= */
.c-slider{
	-webkit-mask-size : 500px 100%;
	mask-size : 500px 100%;

}
.c-slider__cell{
	width : 500px;
}




/* # =================================================================
#### about-point
# ================================================================= */
.about-point ul li .point h4{
	font-size : 22px;
}
/* # =================================================================
#### closing-area
# ================================================================= */
.closing-area{
	width : 80%;
}
.closing-area .box h2{
	width : 300px;
}
.closing-area .box h3{
	font-size : 26px;
	padding-left : 95px;
}

.closing-area .left-box{
	width : calc(100% - 240px);
}
.closing-area .right-box{
	width : 240px;
}




/* # =================================================================
#### btn
# ================================================================= */
.btn{
	padding-left : 95px;
}
.btn div {
	width : 48%;
}
.btn a{
	width : 100%;
}
.btn a{
	font-size : 18px;
	padding : 15px 0;
}
.btn div:nth-child(2) span{
	padding-left : 20px;
}
.btn a::before{
	width : 40px;
	height : 40px;
}
.btn div:nth-child(1) a::before {
	background : #FFF url(../../images/common/car_R.png) center / 38px no-repeat;
}
.btn div:nth-child(2) a::before {
	background : #FFF url(../../images/common/mail.png) center / 30px no-repeat;
}
/* # =================================================================
#### image-button 入校に必要なものはこちらから
# ================================================================= */
.image-button.guide03-button{
	width : 340px;
	height : 55px;
	margin : 30px 0;
}
.image-button.guide03-button a::after{
	font-size : 20px;
	right : 19px;
}










}/*** 1400px ***/
/* # =================================================================
#### 1240px
# ================================================================= */
@media screen and (max-width: 1240px){
.container{
	display : block;
}
.main-content{
	width : 100%;
	margin-left : 0;
	padding-top : 112.5px;
}

h2.headline{
	width : auto;
}
h2.headline span{
	border-radius : 0 50px 50px 0;
	font-size : 20px;
	padding : 20px 30px 20px 30px;
}








}/*** 1240px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){
/* # =================================================================
#### btn
# ================================================================= */
.btn a:nth-child(1){
	padding-left : 10px;
}
.btn a:nth-child(2){
	padding-left : 15px;
}
}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
/**** icon ****/
/* # =================================================================
#### content03
# ================================================================= */
.front-about .flex .text-box{
	width : 100%;
	margin-bottom : 50px;
}
.front-about .flex .text-box h4{
	width : 500px;
	margin-bottom : 30px;
}
.front-about .flex .text-box p{
	position : relative;
	text-align : left;
	padding-left : 50px;
}
.front-about .flex .text-box p br:nth-child(1),
.front-about .flex .text-box p br:nth-child(3){
	display : none;
}
.about-point .swiper-slide figure img{

}
.front-about .swiper-button-next {
	right : 120px;
	top : 430px;
}
.about-point ul li .point h4 span::before{
	content : none;
}
.about-point ul li::before{
	content : "";
	position : absolute;
	display : block;
	width : 78px;
	height : 78px;
	top : -35px;
	right : auto;
	bottom : auto;
	left : 15px;
	margin : auto auto;
	z-index : 1;
}
.about-point ul li.point01::before{
	background : url(../../images/common/point_1.png)center / contain no-repeat;
}
.about-point ul li.point02::before{
	background : url(../../images/common/point_2.png)center / contain no-repeat;
}
.about-point ul li.point03::before{
	background : url(../../images/common/point_3.png)center / contain no-repeat;
}
.about-point ul li.point04::before{
	background : url(../../images/common/point_4.png)center / contain no-repeat;
}
.about-point ul li.point05::before{
	background : url(../../images/common/point_5.png)center / contain no-repeat;
}
.about-point .swiper-slide figure img{
	border-radius : 50px 50px 0 0;
}
.about-point ul li .point{

}
.about-point ul li .point{
	padding : 15px 30px;
}
.about-point ul li .point h4{
	font-size : 26px;
}
.about-point ul li p{
	font-size : 16px;
}

/* # =================================================================
#### closing-area
# ================================================================= */
.closing-area{
	overflow : hidden;
	margin-top : 0;
}
.closing-area .left-box{
	width : calc(100% - 188px);
	padding : 10px;
}
.closing-area .box h2{
	width : 300px;
	margin-top : 0;
	margin-bottom : 15px;
	left : 0;
}
.closing-area .box h3{
	font-size : 26px;
	padding-left : 45px;
}

.closing-area .right-box{
	width : 188px;
	height : 100%;
	margin-top : 0;
}
.closing-area .right-box img{
	width : auto;
	height : auto;
	right : 35px;
}
/* # =================================================================
#### btn
# ================================================================= */
.btn{
	display : block;
	padding-left : 45px;
	margin-top : 15px;
}
.btn a{
	width : 245px;
	padding : 15px 0;
}
.btn a:first-child{
	margin-bottom : 15px;
}
.btn a::before{
	width : 40px;
	height : 40px;
}
.btn div:nth-child(1) a::before{
	background : #FFF url(../../images/common/car_R.png) center / 35px no-repeat;
	padding-left : 10px;
}
.btn div:nth-child(2) a::before{
	background : #FFF url(../../images/common/mail.png) center / 25px no-repeat;
}




}/*** 896px ***/
/* # =================================================================
#### 700px
# ================================================================= */
@media screen and (max-width: 700px){
/* # =================================================================
#### closing-area
# ================================================================= */
.closing-area .left-box {
	width: calc(100% - 140px);
}
.closing-area .box h2{
	width : 200px;
	margin-bottom : 10px;
}
.closing-area .box h3{
	font-size : 20px;
	padding-left : 10px;
}

.closing-area .right-box{
	width : 140px;
}
.closing-area .right-box img{
	right : 0;
	bottom : -6px;
}
/* # =================================================================
#### btn
# ================================================================= */
.btn{
	padding-left : 10px;
	margin-top : 10px;
}
.btn a{
	width : 200px;
	font-size : 16px;
	padding : 10px 0;
}
.btn a:first-child{
	margin-bottom : 10px;
}
.btn a::before{
	width : 30px;
	height : 30px;
}
.btn div:nth-child(1) a::before {
	background : #FFF url(../../images/common/car_R.png) center / 25px no-repeat;
	padding-left : 10px;
}
.btn div:nth-child(2) a::before {
	background : #FFF url(../../images/common/mail.png) center / 20px no-repeat;
}




}/*** 700px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
	.main-content{
	padding-top : 92.08px;
}
/* # =================================================================
#### icon-header
# ================================================================= */
.icon-header h3{
	font-size : 22px;
	padding-left : 1.3em;
}
.icon-header h3::before{
	width : 22px;
	height : 22px;
}
.icon-header h3 span{
	font-size : 17px;
}
/* # =================================================================
#### post-list
# ================================================================= */
.post-categories.pc{
	display : none;
}
.post-categories.sp{
	display : block;
}
/* # =================================================================
#### closing-area
# ================================================================= */
.closing-area .left-box{
	width : 100%;
	padding : 10px 5px;
}
.closing-area .right-box{
	position : absolute;
	display : block;
	top : auto;
	right : 0;
	bottom : 0;
	left : auto;
	margin : auto auto;
}
.closing-area .right-box img{
	position : absolute;
	bottom : 0;
	right : 0;
}
/* # =================================================================
#### cocoiro-slider
# ================================================================= */
.c-slider{
	mask-size : 400px 100%;
}
.c-slider__cell{
	width : 400px;
}

/* # =================================================================
#### about-point
# ================================================================= */
.about-point ul li .point h4{
	font-size : 24px
}
/* # =================================================================
#### cocoiro-slider
# ================================================================= */
.c-slider{
	-webkit-mask-size : 400px 100%;
	mask-size : 400px 100%;

}
.c-slider__cell{
	width : 400px;
}
}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){
.main-content{
	padding-top : 71.66px
}
h2.headline span{
	font-size : 18px;
	padding : 15px 10px 15px 20px;
}
/* # =================================================================
#### icon-header
# ================================================================= */
.icon-header h3{
	font-size : 20px;
	padding-left : 1.3em;
}
.icon-header h3::before{
	width : 20px;
	height : 20px;
}
.icon-header h3 span{
	font-size : 16px;
}
/* # =================================================================
#### closing-area
# ================================================================= */
.closing-area .box h3{
	font-size : 18px;
}
.closing-area .box h3 br{
	display : block;
}

.closing-area .right-box img{
	right : -10px;
}
/* # =================================================================
#### btn
# ================================================================= */
.btn a{
	width : 165px;
	font-size : 14px;
}
.btn a::before{
	width : 25px;
	height : 25px;
}
/* # =================================================================
#### about-point
# ================================================================= */
.about-point ul li .point h4{
	font-size : 20px
}
.about-point ul li .point{
	padding : 15px 15px;
}
.about-point .image-button{
	width : 200px;
}
.about-point ul li.point03 .image-button a::after{
	right : 11px;
}
.about-point ul li.point05 .image-button a::after{
	right : 11px;
}
/* # =================================================================
#### cocoiro-slider
# ================================================================= */
.c-slider{
	-webkit-mask-size : 300px 100%;
	mask-size : 300px 100%;

}
.c-slider__cell{
	width : 300px;
}






}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/