@charset "utf-8";
/*下層共通メインエリア*/
#main_area2 {
	position: relative;
	height: 280px;
	background-color:#f4f0e7;
	overflow: hidden;
}
#main_area2::before{
	position: absolute;
	bottom:-20%;
	left:-5%;
	content:url("../images/flare.webp");
	width:300px;
	height:250px;
}
#main_area2::after{
	position: absolute;
	top:-75%;
	right:-5%;
	content:url("../images/flare.webp");
}
#main_area2 p{
	position: absolute;
	top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
	font-size:36px;
	margin: 0;
	text-align: center;
}
#main_area2 p::before{
	display: block;
	content:url("../images/icon_title.webp");
	text-align: center;
	margin: 0;
}
#main_area2 p::after{
	display: block;
	content: "";
	background: radial-gradient(circle farthest-side, #de5115, #de5115 60%, transparent 60%, transparent);
	background-size:10px;
	width:260px;
	height: 10px;
	margin:10px auto 0;
}

/*ご利用について*/
.content{position: relative;height: 900px;}
.bg{margin-top:150px;padding:80px 0;height: 600px;}
.usage{position: absolute;width:50vw; left:10%;background: #FFF;padding:30px; border-radius: 15px;z-index:3;}
.content img{position: absolute;bottom:0;right:0;width:1000px;height: auto;z-index:2;border-radius: 80px 0 0 0 ;}

/*ご利用いただける方・料金*/
.flexbox > img{width:38%; max-width: 450px;height: auto; border-radius: 15px;}
.flexbox picture{width:38%; max-width:450px;}
.flexbox picture img{width:100%;height: auto; border-radius: 15px;}
.leftco{width:60%;}
.list li{text-indent: -1rem; margin-left:1rem;}
.list li:not(:last-child){margin-bottom:10px;}
.list li::before,.list2 li::before{display: inline-block; content: ""; width:12px; height: 12px; background:#de5115;border-radius: 10px;margin-right:0.5rem;}
table{width:100%;text-align: center;margin-top:1em;}
table th{background:#f4f0e7;}

/*1日の流れ*/
.timetable{max-width:900px;margin: auto;background:#f4f0e7;padding:50px;border-radius: 20px;}
.timetable li{display: flex;justify-content: space-between;}
.timetable li p{margin:0;}
.timetable li .date{
	width: 170px;
    position: relative;
    padding-bottom: 48px;
}
.timetable li:last-child .date{padding-bottom:0;} 
.timetable .date span{
    background: #FDFCFA;
    border: 1px solid #C7C4C1;
    border-radius: 0.85em;
    width: 100%;
    position: relative;
    z-index: 1;
    display: inline-block;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}
.timetable li:not(:last-child) .date::before{
	content: "";
    display: block;
    background: #C7C4C1;
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.timetable .cont{
	padding:8px 0 20px;
	font-size: 20px;
	width: calc(100% - 220px);
}
.w900{max-width:900px;margin: auto;}
.w900 h4{font-size:22px;}
.w900 h4::before{
    content: "";
	display: inline-block;
    width: 6px;
    height:30px;
    border-radius: 3px;
    background-color: #de5115;
	margin-right: 10px;
	vertical-align: middle;
}
/* レスポンシブ
------------------------------------------------------------*/
/* 1320px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1320px){
	body {min-width: 1280px!important;}

	/*ご利用について*/
	.content{height: 750px;}
	.bg{margin-top:100px;padding:80px 0;height: 500px;}
	.usage{width:60vw; left:3%;background: #FFF;padding:20px;}
	.content img{width:800px;border-radius: 60px 0 0 0 ;}
}
/* 960px以下から
------------------------------------------------------------*/
@media only screen and (max-width:960px){
	body {min-width: 910px!important;}
	.inner-box{padding:30px 0;}
	#main_area2 p{font-size:28px;}
	#main_area2::before{
		bottom:-20%;
		left:-20%;
		width:200px;
		height:200px;
	}
	#main_area2::after{
		top:-70%;
		right:-25%;
	}
	/*ご利用について*/
	.content{height: 800px;}
	.bg{margin-top:100px;padding:80px 0;height: 500px;}
	.usage{width:90%; left:50%; transform: translateX(-50%);bottom:10px;padding:20px;}
	.content img{width:100%;border-radius: 0 0 0 0 ;object-fit: cover;}
	/*ご利用いただける方・料金*/
	.flexbox {align-items: center;}
}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:769px){
	body {min-width: 718px!important;}
	#main_area2 {height: 200px;}
	#main_area2::after{
		position: absolute;
		top:-140%;
		right:0%;
		width:200px;
		height: 200px;
	}
	/*ご利用について*/
	.content{position: static; height:auto;}
	.bg{margin-top:0px;padding:20px;height: auto;}
	.usage{position: static;width:100%;transform: none;padding:15px; border-radius: 10px;z-index:3;}
	.content img{position: static;}
	/*ご利用いただける方・料金*/
	.flexbox {display:block;}
	.flexbox div{width:100%;}
	.flexbox img{display: block; width:100%;max-width: 450px; margin:auto;border-radius:10px;}
	.flexbox picture img{display: block;width:100%;max-width: 450px; margin: auto;border-radius: 10px;}
	/*1日の流れ*/
	.timetable{padding:15px;}
	.timetable li .date{width: 120px;}
	.timetable li .date span{font-size: 20px;}
	.timetable .cont{
		padding:4px 0 20px;
		font-size: 18px;
		width: calc(100% - 140px);
	}
	.w900 h4{font-size:20px;}
}

/* 430px以下から
------------------------------------------------------------*/
@media only screen and (max-width:431px){
    body {min-width: inherit!important;width: 100%;}
	#main_area2 p{font-size:24px;}
	#main_area2::before{
		bottom: 0;
		left:-70%;
	}
	#main_area2::after{
		position: absolute;
		top:-150%;
		right:-20%;
	}
	/*1日の流れ*/
	.timetable li .date{width: 100px;}
	.timetable li .date span{font-size: 18px;}
	.timetable .cont{
		padding:3px 0 20px;
		font-size: 16px;
		width: calc(100% - 120px);
	}
	.w900 h4{font-size:18px;}
}