@charset "utf-8";
/*メイン画像エリア*/
#main_area {
	position:relative;
	height:600px;
	width:100%;
	background-image: url("../images/home/main.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#main_area .copy{
	position: absolute;
	top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
	max-width: 287px;
	width:20vw;
	height: auto;
}
#main_area .mainR{
	position: absolute;
	bottom:0%;
	right:3%;
	max-width: 500px;
	width:35vw;
	height: auto;
}
/*特長*/
.imgboxL,.imgboxR400,.imgboxR420{display:flex;justify-content: space-between;align-items: flex-start;}
.imgboxR400 img{order:2; max-width:400px; width:35%; height: auto;border-radius: 10px;}
.imgboxR420 img{order:2; max-width:420px; width:35%; height: auto;border-radius: 10px;}
.imgboxR400 div,.imgboxR420 div{order:1; padding: 0 20px 0 0;width:calc(100% - 35%);}
.imgboxL img{order:1; max-width:420px; width:35%; height: auto;border-radius: 10px;}
.imgboxL div{order:2; padding:0 0 0 20px;width:calc(100% - 35%);}
#feature{counter-reset: section;}
#feature div::before{counter-increment: section;content:"特長" counter(section);display: block;width:7em;background:#de5115;color:#FFF;font-weight: normal;text-align: center;border-radius: 5px 5px 0 0 ;padding:5px 0;}
#feature h3{background:#f4f0e7;margin:0;padding:12px; font-weight: normal;border-radius: 0 10px 10px 10px;}

/*ご案内*/
.content{position: relative; display: flex;}
.leftimg{position: absolute; top:0px; left:0;width:20vw;border-radius: 0 0 15px 0;}
.rightimg{position: absolute; bottom:0px; right:0;width:20vw; border-radius: 15px 0 0 0;}
#info{width:54vw;margin: auto;}
#info ul{padding-left:0;}
#info ul li{border:1px solid #ccc;border-radius: 10px;padding:20px;}
#info ul li:not(:last-child){margin-bottom: 20px;}
#info ul li img{width:7vw;height: auto; max-width: 90px;}
#info ul li p{width:calc(100% - 170px);}
#info ul li p span{display:block;font-size:22px;}
#info ul li a{width:100%;color:inherit;text-decoration: none;align-items: center;}
#info ul li a:after{content:url("../images/home/arrow.webp");width:19px; height: 21px; background-repeat: no-repeat;}

/*お知らせ*/
.news-wrap{background:#f4f0e7;border-radius: 100px 100px 0 0 ;margin-top: 80px;}
.btn{display:block;background: #de5115; color:#FFF !important;width:85%;margin:auto;padding:15px;border-radius: 5px;text-align: center;text-decoration: none;}
.news{width:calc(100% - 450px);}
.news a{color:inherit;text-decoration: none;}
.news a:hover{color:#de5115;}
.news li{border-bottom: 1px solid #b3b3b3;margin-bottom: 20px;padding:0 15px;}
.news li p{padding:15px 0; margin:0;}

/* レスポンシブ
------------------------------------------------------------*/
/* 1320px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1320px){
	body {min-width: 1280px!important;}
	/*ご案内*/
	#info{width:60vw;margin: auto;}
}

/* 960px以下から
------------------------------------------------------------*/
@media only screen and (max-width:960px){
	body {min-width: 910px!important;}
	#main_area{height: 370px;background-image: url("../images/home/main_tab.webp");}
	.inner-box,.content{padding:30px 0;}
	/*特長*/
	.content{flex-wrap: wrap;width:95%;margin:auto;}
	.leftimg{position: static; order:2; width:50%;border-radius: 15px 0 0 15px;}
	.rightimg{position: static; order:3; width:50%;border-radius: 0 15px 15px 0;}

	/*ご案内*/
	#info{order:1;	width:100%;}
	#info ul li img{width:10vw;height: auto; max-width: 90px;}
	#info ul li p{width:calc(100% - 100px);}
	#info ul li p span{font-size:20px;}
	
	/*お知らせ*/
	.news-wrap{border-radius: 50px 50px 0 0 ;margin-top: 30px;}
	.btn{display:block;background: #de5115; color:#FFF;width:85%;margin:auto;padding:15px;border-radius: 5px;text-align: center;text-decoration: none;}
	.news{width:calc(100% - 300px);}
	.news li{margin-bottom: 10px;padding:0 10px;}
	.news li p{padding:10px 0;}
}


/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:769px){
	body {min-width: 718px!important;}
	#main_area .copy{
		max-width: 180px;
		width:inherit;
	}
	#main_area .mainR{
		max-width: 280px;
		width:inherit;
	}
	/*お知らせ*/
	.newstitle{width:100%;}
	.newstitle h2{margin-bottom:40px;}
	.newstitle .btn{max-width:250px;}
	.news{width:100%;}
	.news li{margin-bottom: 10px;padding:0 10px;}
	.news li p{padding:10px 0;}
}

/* 430px以下から
------------------------------------------------------------*/
@media only screen and (max-width:431px){
    body {min-width: inherit!important;width: 100%;}
	#main_area{height: 500px;background-image: url("../images/home/main_sp.webp");}
	#main_area .copy{
		top:3%;
		left:3%;
		transform:none;
		max-width: 200px;
	}
	#main_area .mainR{
		max-width: 280px;
		width:inherit;
	}
	/*特長*/
	.imgboxL,.imgboxR400,.imgboxR420{flex-wrap:wrap;}
	.imgboxL img,.imgboxR400 img,.imgboxR420 img{max-width:400px;width:100%; margin:0 auto 20px;}
	.imgboxR400 img,.imgboxR420 img{order:1;}
	.imgboxL div,.imgboxR400 div,.imgboxR420 div{padding:0;width:100%;}

	/*ご案内*/
	#info ul li a{flex-wrap: wrap;}
	#info ul li img{width:70px;margin:auto;}
	#info ul li p{width:100%;}
	#info ul li p span{display:block;text-align: center;font-size:18px;}
	#info ul li a:after{display:block;width:21px;height: auto; text-align: center;transform: rotate(90deg);margin:auto;}
}