@charset "UTF-8";
/* Scss Document */
#main{
	text-align: center;
	margin: 80px 0px;
}
.main-inner{
	width: 100%;
	margin: 0 auto;
}
#main h1 {
    font-size: 3rem;
}
.design .bl {
    margin: 0px auto 100px;
    width: 85%;
}
.arrangement{
	background: #F2F3F5;
	margin-bottom: 100px;
}
.arrangement-inner{
	background:url("../../../image/features/2027/design/arrangement_bg.webp") no-repeat center bottom;
	background-size: 100% auto;
	width: 100%;
	margin: 0px auto;
	padding: 90px 0px 310px;
}
.arrangement-text{
	margin-left: 70px;
	width: 350px;
}
.arrangement-text .link{margin-top: 50px;}

.cover h2{text-align: center;}
.cover .col2 > * {
    width: calc(50% - 20px);
    margin-right: 40px;
}
.cover div div{
	background: #FBE2DE;
	border-radius: 35px;
	padding: 50px 40px 40px;
	margin-top: 50px;
	text-align: center;
	position: relative;
}
.cover div div img{width: 75%!important;}
.cover div div h3{
	font-size: 1.8rem!important;
	margin-bottom:25px!important;
	text-align: left;
	line-height: 1.8;
}
.cover div div h3 br{display: none;}
.cover div div h3 span{
	width: 19%;
    display: inline-block;
    position: absolute;
    top: -35px;
    left: 25px;
}
.cover div div p{text-align: left;}
.cover div div:nth-child(2){background: #EBE9F4;}
.cover div div:nth-child(3){background: #EDF4F8;margin-top: 90px;}
.cover div div:nth-child(4){background: #FCE9F2;margin-top: 90px;}

.inside h2{text-align: center;}
.inside div h3{
	color: #340505!important;
	font-size: 1.6rem!important;
	padding: 15px 0px;
	font-weight: bold;
}
.design .checkbox{overflow: hidden;}
.design .checkbox .box.pt01 {
    margin-top: 30px;
}
.design .checkbox .box.pt01 .box-inner{float: left;width: 49.3%;}
.design .checkbox .box.pt01 .box-inner:last-child {
    width: 41.5%;
	float: right;
}
.design .checkbox .box.pt01 .box-inner:first-child ul {
    margin-top: 3%;
}
#l-features-inner .design .checkbox .box.pt01 .box-inner ul {
    letter-spacing: -0.4em;
}
.design .checkbox .box.pt01 .box-inner ul li {
    display: inline-block;
    width: 49%;
    letter-spacing: normal;
    vertical-align: top;
}
.design .checkbox .box.pt01 .box-inner ul li p {
    text-align: center;
    font-size: 1rem;
}
.design .checkbox .box.pt01 .box-inner .img {
    margin-top: 15px;
}
.design .checkbox .box.pt01 .box-inner ul li {
    display: inline-block;
    width: 49%;
    letter-spacing: normal;
    vertical-align: top;
}
.design .box .box-inner .answer.riyuu {
    padding: 5px 0px 20px 50px;
    position: relative;
    margin-top: 10px;
}
.design .box .box-inner .answer {
    color: #320506;
    line-height: 1.3;
    font-size: 1.5rem;
    padding: 5px 0px 20px 40px;
    margin-bottom: 0px;
    background: url(../../../image/features/design/a_icon.png) no-repeat 0 0;
    background-size: 30px auto;
    letter-spacing: .08em;
    font-weight: 700;
}
.design .box .box-inner .answer.riyuu span.icon-pink {
    position: absolute;
    left: 0px;
    top: -10px;
    border-radius: 70px;
    display: inline-block;
    background: #ee87b4;
    color: #FFF;
    text-align: center;
    font-size: 1rem;
    width: 42px;
    height: 42px;
    padding-top: 8px;
}
.design .box .box-inner .answer.riyuu span.icon-pink span{
	font-size: 1.6rem;
    font-weight: bold;
    display: inline-block;
    padding-top: 2px;
}

@media (min-width: 1080px) {
#main{
	    width: 100%;
        background: url(../../../image/features/2027/design/main_bg.webp) no-repeat bottom center;
        background-size: 100%;
}
	.main-inner{width: 950px;}
#main h1 {
    font-size: 3.2rem;
}
.arrangement-text{
	margin-left: 155px;
	width: 380px;
}
.cover div div h3 br{display: block;}
#l-features-inner .design .bl{
	width: 950px;
}
.cover div div h3 span{
	width: 17%;
	}
}
@media (min-width: 1250px) {
	.arrangement-inner{width: 1250px;}
}

@media (max-width: 700px) {
.design .bl {
    margin: 0px auto 70px;
}
.arrangement-inner {
    padding: 70px 0px 310px;
}
	.arrangement {
    margin-bottom: 70px;
}
.arrangement-text {
   width: 85%;
    margin: 0px auto;
}
.cover div div{padding-top: 30px;}	
}




@media (max-width: 640px){
.col2 > * {
    width: 100%!important;
    margin-right: 0px!important;
}
.col2 > *:nth-child(2n){margin-top: 30px;}

.col3 > * {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 0px;
}
.design .checkbox .box.pt01 .box-inner {
    float: none!important;
    width: 100%!important;
	margin-top: 40px;
}
.arrangement-inner{
	background:url("../../../image/features/2027/design/arrangement_bg_sp.webp") no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: 165%;
	}
    .cover div div {
        padding-top: 50px;
    }
	.cover div div h3 span {top: -50px;}
	.cover div div:nth-child(2){margin-top: 90px;}
}
@media (max-width: 480px) {
#main {
    margin: 50px 0px;
}
#l-features h1, #l-features h2 {
	margin-bottom: 15px;
    text-align: center;
}
    #l-features h1 {
        font-size: 2.3rem !important;
    }
#l-features .bl {width: 85%;margin-bottom: 50px;}
.design .box.pt04 .box-inner,.design .box.pt04 .box-inner:last-child {
    width: 100%;
    float: none;
}
.lineup .col2 div img{aspect-ratio: 313 / 275!important;}
.design .box.pt04 .box-inner:last-child{margin-top: 20px;}
.design .bl {
	margin: 0px auto 50px;
}
.cover ul li {
    width: 100%;
    padding: 50px 30px 30px;
    margin-right: 0;
    margin-top: 50px;
}
	.cover h2{text-align: left!important;}
	.cover div div {padding: 50px 30px 40px;}
	.cover div div h3 {
    font-size: 1.7rem !important;
    margin-bottom: 15px !important;
	}
	.cover div div h3 span {
        top: -40px;
        width: 25%;
        left: 15px;
    }
    .arrangement {
        margin-bottom: 50px;
    }
  
	.arrangement .link{display: none;}
	.bd{
		border-top: solid #000 1px;
		padding-top: 50px;
	}
	.inside{margin-bottom: 0px!important;}
	.inside ul li {
    width: 100%;
    margin-right: 0;
}
	.inside ul li h3 {
    margin-bottom: 5px!important;
}
	.inside p{margin-bottom: 40px;}
.link {
    width: 85%;
    margin: 0px auto 50px;
}
#l-features .bl.checkbox {width: 100%;margin-top: 0px;}
.design .checkbox .box.pt01 .box-inner,.design .checkbox .box.pt01 .box-inner:last-child {
    float: none;
    width: 100%;
}
.design .checkbox .box.pt01 .box-inner:last-child{margin-top: 50px;}
#l-features .policy-navi section.lightness {
    background: url(../../../image/features/2027/lightness_sp.webp) no-repeat center top!important;
    background-size: 100% auto!important;
	min-height: 460px!important;
}
}