@charset 'UTF-8';


#wrap {
background: url(../image/index_contents_bg_04.png) center repeat;
}

/*===========================================
mv
===========================================*/
.mv{
min-height: 380px;
padding: 0 20px;
background: url(../image/index_mv_01.jpg) top center no-repeat #fff;
background-size: auto;
}
.mv .mv_wrap{
max-width: 1000px;
margin: auto;
}
.mv .mv_inner{
padding: 12% 0 5% 0;
}
.mv .ttl > *{
font-size: 4rem;
line-height: 1.2;
text-align: center;
font-weight: bold;
}
.mv .ttl span{
font-size: 2.4rem;
font-weight: normal;
}
.mv .txtBlock{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 4%;
}
.mv .txtBlock .img{
flex-basis: 25.8%;
margin-left: 10px;
}
.mv .txtBlock .btn{
flex-basis: 65.6%;
}
.mv .txtBlock .btn a{
display: block;
position: relative;
margin-top: 1.5em;
border-radius: 8px;
padding: 1em 0;
font-size: 2rem;
color: #fff;
text-align: center;
font-weight: bold;
background-color: #eb579e;
background-image: linear-gradient(90deg, #f88ea7 0%, #eb579e 100%);
}
.mv .txtBlock .btn a:after{
transform: rotate(45deg);
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
width: 8px;
height: 8px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.mv .txtBlock .btn span{
display: inline-block;
position: relative;
padding-left: 65px;
}
.mv .txtBlock .btn span:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 56px;
height: 51px;
margin: auto;
background: url(../image/index_mv_icon_01.svg) center no-repeat;
background-size: contain;
}
@media screen and (max-width: 1024px){
.mv {
background-size: 184%;
}
}
@media screen and (max-width:767px){
.mv{
background-image: url(../image/index_mv_01_sp.jpg);
/*background-size: contain;*/
background-size: 100%;
height: 100vw;
}
.mv .mv_inner{
padding: 31% 0 18% 0;
}
.mv .ttl > * {
font-size: 3rem;
font-weight: normal;
}
.mv .ttl span{
font-size: 2rem;
}
.mv .txtBlock .img{
flex-basis: 100%;
margin: 0;
}
.mv .txtBlock .img img{
width: 46.5%;
margin: auto;
}
.mv .txtBlock .btn{
flex-basis: 100%;
margin-top: 2em;
}
.mv .txtBlock .btn p{
font-size: 1.5rem;
}
.mv .txtBlock .btn a{
margin-top: 15%;
font-size: 1.6rem;
font-weight: normal;
}
.mv .txtBlock .btn a:after{
right: 15px;
}
.mv .txtBlock .btn span{
padding: 55px 0 0 0;
}
.mv .txtBlock .btn span:before{
bottom: auto;
left: 0;
right: 0;
width: 50px;
height: 45px;
}
}

/*===========================================
moredeli_news
===========================================*/
.moredeli_news{
padding: 0 20px;
background: #f5f5f5;
}
.moredeli_news .moredeli_news_wrap{
max-width: 1000px;
margin: auto;
}
.moredeli_news .moredeli_news_inner{
position: relative;
padding: 5% 0;
}
.moredeli_news .moredeli_news_inner:after{
content: "";
display: block;
position: absolute;
top: -20px;
right: -30px;
width: 21%;
padding-top: 22.9%;
background: url(../image/index_news_bg_01.png) center no-repeat;
background-size: contain;
}
.moredeli_news .ttl p{
font-size: 2rem;
font-weight: bold;
}
.moredeli_news .list{
position: relative;
margin-top: 1em;
z-index: 1;
}
.moredeli_news .list li + li > *{
padding-top: 1.5em;
}
.moredeli_news .date{
color: #888;
white-space: nowrap;
}
.moredeli_news .icon span{
display: block;
min-width: 7em;
padding: 2px 1em 1px 1em;
font-size: 1.2rem;
color: #fff;
text-align: center;
}
.moredeli_news .pickup{
background: #B4CC3D;
}
.moredeli_news .new{
background: #EC7992;
}

@media screen and (max-width:767px){
.moredeli_news .moredeli_news_inner{
padding: 12% 0;
}
.moredeli_news .moredeli_news_inner:after{
width: 51.34%;
padding-top: 36.12%;
right: 0;
background-image: url(../image/index_news_bg_01_sp.png);
}
.moredeli_news .ttl p{
font-weight: normal;
}
.moredeli_news .list{
margin: 0;
}
.moredeli_news .list li{
display: flex;
flex-wrap: wrap;
margin-top: 2em;
}
.moredeli_news .list .txt{
flex-basis: 100%;
padding: 0;
}
.moredeli_news .list .icon{
padding-left: 2em;
}
.moredeli_news .list > * > * > *{
display: block;
}
.moredeli_news .list > *{
flex-basis: calc(100% / 3);
}
.moredeli_news .list li p{
padding: 0;
}
.moredeli_news .list a{
padding: 0;
padding-bottom: 1.25em;
font-size: 1.5rem;
text-align: center;
}
.moredeli_news .list a:after{
transform: rotate(135deg);
top: auto;
bottom: 10px;
left: 0;
right: 0;
}
}

/*===========================================
moredeli_news
===========================================*/
.moredeli_contents{
padding-top: 7.5%;
}
.moredeli_contents .moredeli_ttl{
display: flex;
justify-content: center;
}
.moredeli_contents .moredeli_ttl img{
width: 184px;
backface-visibility: hidden;
}
.moredeli_contents .flex{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 4%;
}
.moredeli_contents .flex > *{
border-radius: 10px;
}
.moredeli_contents .improvement{
flex-basis: calc((100% - 32px) / 2);
background-color: #FCEAEE;
background-image: linear-gradient(90deg, #FCEAEE 0%, #FCF6EE 100%);
}
.moredeli_contents .manzoku{
flex-basis: calc((100% - 32px) / 2);
background-color: #FEF9DB;
background-image: linear-gradient(90deg, #FEF9DB 0%, #FCFEE8 100%);
}
.moredeli_contents .monitor{
/*flex-basis: 100%;
margin-top: 3%;*/
flex-basis: calc((100% - 32px) / 2);
background-color: #DCF0F7;
background-image: linear-gradient(90deg, #DCF0F7 0%, #EFFFFA 100%);
}
.moredeli_contents .box{
padding: 7% 10.3%;
}
.moredeli_contents .ttl > *{
font-size: 2.4rem;
font-weight: bold;
text-align: center;
}
.moredeli_contents .ttl{
padding-top: 42px;
background: top center no-repeat;
background-size: 62px;
}
.moredeli_contents .ttl:after{
content: "";
display: block;
width: 80px;
height: 80px;
margin: 10px auto 0 auto;
border-radius: 80px;
background: center no-repeat #FFF;
background-size: 54px;
}
.moredeli_contents .txt{
display: flex;
justify-content: center;
margin-top: 1.5em;
}
.moredeli_contents .btn{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 1.5em;
}
.moredeli_contents .btn > *{
flex-grow: 1;
}
.moredeli_contents .btn a{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 90px;
border-radius: 8px;
padding: 0 1.5em;
font-size: 2rem;
line-height: 1.6;
color: #fff;
font-weight: bold;
text-align: center;
text-decoration: none;
background: #E30934;
}
.moredeli_contents .btn a:after {
transform: rotate(45deg);
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 15px;
width: 8px;
height: 8px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.moredeli_contents .btn small{
display: block;
font-size: 1.4rem;
}
.moredeli_contents .improvement .ttl{
background-image: url(../image/index_contents_bg_01.png);
}
.moredeli_contents .improvement .ttl:after{
background-image: url(../image/index_contents_icon_01.svg);
}
.moredeli_contents .improvement .btn a{
background: #EC7992;
}
.moredeli_contents .improvement .btn a.fs{
font-size: 1.5rem;
}
.moredeli_contents .manzoku .ttl{
background-image: url(../image/index_contents_bg_02.png);
}
.moredeli_contents .manzoku .ttl:after{
background-image: url(../image/index_contents_icon_02.svg);
}
.moredeli_contents .manzoku .btn a{
background: #F1B131;
}
.moredeli_contents .monitor .ttl{
background-image: url(../image/index_contents_bg_03.png);
}
.moredeli_contents .monitor .ttl:after{
background-image: url(../image/index_contents_icon_03.svg);
}
.moredeli_contents .monitor .box{
padding: 7% 10.3%;
}
.moredeli_contents .monitor .btn > *{
flex-grow: 0;
/*flex-basis: calc((100% - 32px) / 2);*/
flex-basis: 100%;
}
.moredeli_contents .monitor .btn a{
background: #59BEE2;
}

@media screen and (max-width:767px){
.moredeli_contents .moredeli_ttl img{
width: 157px;
}
.moredeli_contents .box{
padding: 35px 20px;
}
.moredeli_contents .ttl > *{
font-size: 2.4rem;
font-weight: normal;
}
.moredeli_contents .txt{
margin: 1em 0 0 0;
}
.moredeli_contents .txt p{
font-size: 1.5rem;
}
.moredeli_contents .improvement{
flex-basis: 100%;
margin-top: 20px;
}
.moredeli_contents .manzoku{
flex-basis: 100%;
margin-top: 20px;
}
.moredeli_contents .monitor{
flex-basis: 100%;
margin-top: 20px;
}
.moredeli_contents .monitor .box{
padding: 35px 20px;
}
.moredeli_contents .monitor .btn > *{
flex-basis: 100%;
}
.moredeli_contents .monitor .btn > * + *{
margin-top: 20px;
}
.moredeli_contents .btn a{
height: auto;
padding: 0.75em 1.5em;
font-weight: normal;
}
.moredeli_contents .btn small{
font-size: 1.2rem;
}
}
.sp{
display: none;
}
@media screen and (max-width:767px){
.sp{
display: block;
}}