@charset "UTF-8";
/* CSS Document */
/* 基本-モバイルファースト ======================================================================================================== */
#main h2{
display: none;
}



#introduction{
text-align: center;
}
#introduction .title{
display: inline-block;
font-weight: bold;
line-height: 1.6;
position: relative;
}
#introduction .title::before,
#introduction .title::after{
content: "";
display: block;
width: 2px;
height: 100%;
background-color: #111;
position: absolute;
top: 50%;
margin: auto 0;
}
#introduction .title::before{
transform: translateY(-50%) rotate(-10deg);
-webkit-transform: translateY(-50%) rotate(-10deg);
left: -3vw;
}
#introduction .title::after{
transform: translateY(-50%) rotate(10deg);
-webkit-transform: translateY(-50%) rotate(10deg);
right: -3vw;
}
#introduction .title em{
display: block;
margin-bottom: 10px;
}
#introduction .title h3{
font-size: 5vw;
color: #b3203a;
font-weight: bold;
}

#introduction ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 4%;
}
#introduction ul li{
width: 48%;
margin-top: 4%;
background-color: #eee;
padding: 3vw 0;
font-size: 3vw;
}
#introduction ul li .icon{
width: 15vw;
aspect-ratio: 1/1;
margin: 0 auto 3vw;
display: grid;
place-content: center;
}



#introduction .inner{
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
}
#introduction .copy{
flex: 1;
margin-left: 20px;
text-align: left;
font-size: 16px;
}
#introduction .photo{
width: 30%;
}



#reason{
background-color: #eff7fa;
padding-top: 60px;
padding-bottom: 60px;
}
#reason .title{
margin-bottom: 20px;
}
#reason .title{
font-weight: bold;
display: inline-block;
position: relative;
height: 120px;
text-align: center;
padding: 0 30px;/*横の大きさ*/
background: #bddae6;/*塗りつぶし色*/
box-sizing: border-box;
}
#reason .title::before,
#reason .title::after {
position: absolute;
content: '';
width: 0px;
height: 0px;
z-index: 1;
}
#reason .title::before {
top: 0;
left: 0;
border-width: 60px 0px 60px 15px;
border-color: transparent transparent transparent #eff7fa;
border-style: solid;
}
#reason .title::after {
top: 0;
right: 0;
border-width: 60px 15px 60px 0px;
border-color: transparent #eff7fa transparent transparent;
border-style: solid;
}
#reason .title .inner{
margin-top: 5px;
}
#reason .title em{
font-size: 12px;
}
#reason .title h3{
font-size: 30px;
line-height: 1.1;
font-weight: bold;
}
#reason .title h3 span{
font-size: 50px;
color: #5eaccd;
}

#reason article{
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border: solid 1px #eeeeee;
position: relative;
}
#reason article:last-child{
margin-bottom: 0px;
}
#reason article .text{
margin-bottom: 20px;
}
#reason article .text h4{
font-size: 18px;
font-weight: bold;
line-height: .7;
margin-bottom: 20px;
}
#reason article .text h4 span{
font-size: 40px;
margin-right: 10px;
}
#reason article .text h4::first-letter{
font-size: 100px;
color: #b3203a;
display: block;
}
#reason article .text p{
}
#reason article .photo{
}



#point article{
color: #fff;
padding: 40px 20px;
text-align: left;
background-color: #b3203a;
border-bottom: solid 5px #fff;
}
#point article.point01{
padding: 40px 0;
}
#point article:last-child{
border-bottom: none;
}
#point article .title{
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
margin-bottom: 20px;
}
#point article .title .n{
width: 60px;
height: 60px;
border-radius: 50%;
line-height: 1.1;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
}
#point article .title .n p{
font-size: 10px;
color: #111;
}
#point article .title .n em{
font-size: 20px;
color: #b3203a;
}
#point article .title h3{
font-size: 20px;
font-weight: bold;
flex: 1;
margin-left: .5em;
}
#point article .photo{
margin: 0 auto 10px;
}
#point article .common_btn a{
color: #b3203a;
border-color: #fff;
background-color: #fff;
}


#point article.point01 li{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: solid 1px #fff;
}
#point article.point01 li:last-child{
margin-bottom: 0px;
padding-bottom: 0px;
border-bottom: none;
}
#point article.point01 li h4{
font-size: 18px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
#point article.point01 li span{
display: block;
font-size: 14px;
font-weight: bold;
text-align: center;
}
#point article.point01 li .photo{
width: 240px;
}



#jirei{
background-color: #eff7fa;
padding-top: 60px;
padding-bottom: 60px;
position: relative;
}
#jirei::before{
content: "";
display: block;
background-image: url(images/jirei_title_img.png);
background-image: -webkit-image-set(url(images/jirei_title_img.png) 1x, url(images/jirei_title_img@2x.png) 2x);
background-repeat: no-repeat;
background-position: right top;
background-size: 100%;
width: 120px;
aspect-ratio: 191/110;
position: absolute;
right: 10vw;
top: -10px;
}
#jirei .sub_title::after{
background-color: #5eaccd;
}

#jirei article{
margin-bottom: 40px;
}
#jirei article:last-child{
margin-bottom: 0px;
}
#jirei article .photo{
margin-bottom: 10px;
}
#jirei article .name{
display: inline-block;
vertical-align: middle;
}
#jirei article .shop{
color: #fff;
background-color: #999;
font-size: 12px;
line-height: 1;
padding: 3px 5px;
width: auto;
float: none;
margin-left: 0.5em;
display: inline-block;
vertical-align: middle;
}
#jirei article .shop.honten{ background-color: #b3203a;}
#jirei article .shop.suginami{ background-color: #e6a490;}
#jirei article .shop.nerima{ background-color: #82babb;}
#jirei article .shop.akabane{ background-color: #e88d9e;}
#jirei article .shop.kawaguchi{ background-color: #98bb73;}
#jirei article .shop.yonohonmachi{ background-color: #b08ecd;}
#jirei article .shop.asakadaishiki{ background-color: #b5b86f;}
#jirei article .shop.kawagoe{ background-color: #8899ca;}

#jirei article h4{
font-size: 18px;
font-weight: bold;
}
#jirei .common_btn a{
background-color: #fff;
}


#qa a{
display: flex;
flex-direction: column-reverse;
background-color: #eee;
}
#qa .text{
text-align: center;
padding: 5vw;
}


/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){

#introduction{
position: relative;
padding-left: 230px;
}
#introduction .title::before,
#introduction .title::after{
width: 3px;
}
#introduction .title em{
font-size: 20px;
letter-spacing: .25em;
}
#introduction .title h3{
font-size: 30px;
letter-spacing: .25em;
}

#introduction ul li{
width: 23%;
margin-top: 40px;
padding: 40px 0;
font-size: 14px;
}
#introduction ul li .icon{
width: 90px;
margin: 0 auto 20px;
}

#introduction .copy{
margin-left: 0px;
font-size: 20px;
text-align: center;
}
#introduction .photo{
width: auto;
position: absolute;
top: 0;
left: 0;
}


#reason{
padding-top: 120px;
padding-bottom: 120px;
}
#reason .title{
height: 180px;
padding: 0 60px;
margin-bottom: 40px;
}
#reason .title::before {
border-width: 90px 0px 90px 30px;
}
#reason .title::after {
border-width: 90px 30px 90px 0px;
}
#reason .title .inner{
margin-top: 20px;
}
#reason .title em{
font-size: 16px;
}
#reason .title h3{
font-size: 60px;
line-height: .9;
}
#reason .title h3 span{
font-size: 120px;
}

#reason article{
padding: 50px;
margin-bottom: 40px;
display: flex;
}
#reason article .text{
flex: 1;
margin-right: 50px;
}
#reason article .text h4{
font-size: 2.5vw;
margin-bottom: 2.5vw;
}
#reason article .text h4 span{
font-size: 4.5vw;
}
#reason article .text h4::first-letter{
font-size: 22vw;
float: left;
margin-right: .5vw;
}
#reason article .text p{
}
#reason article .photo{
}



#point{
display: flex;
flex-wrap: wrap;
}
#point article{
width: 33.33%;
padding: 3vw;
border-bottom: none;
border-right: solid 5px #fff;
}
#point article:last-child{
border-right: none;
}
#point article.point01{
width: 100%;
padding: 3vw 0px;
border-right: none;
border-bottom: solid 5px #fff;
}
#point article .title .n{
width: 100px;
height: 100px;
}
#point article .title .n p{
font-size: 14px;
}
#point article .title .n em{
font-size: 40px;
}
#point article .title h3{
font-size: 30px;
font-size: min(1.7vw,30px);
flex: inherit;
letter-spacing: .25em;
}
#point article .common_btn a{
margin-top: 20px;
}
#point article .common_btn a:hover{
color: #fff;
background-color: rgba(255, 255, 255, .3);
}

#point article.point01 .title{
justify-content: center;
}
#point article.point01 ul{
display: flex;
justify-content: space-between;
}
#point article.point01 li{
margin-bottom: 0px;
padding-bottom: 0px;
border-bottom: none;
padding-right: 2.5%;
box-sizing: content-box;
border-right: solid 1px #fff;
width: 30%;
}
#point article.point01 li:last-child{
padding-right: 0;
border-right: none;
}
#point article.point01 li h4{
font-size: 24px;
margin-bottom: 20px;
}
#point article.point01 li .photo{
width: auto;
text-align: center;
}


#jirei{
padding-top: 120px;
padding-bottom: 120px;
}
#jirei::before{
background-size: 191px 110px;
width: 541px;
height: 110px;
aspect-ratio: inherit;
right: inherit;
left: 50%;
top: 50px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
margin: auto;
}

#jirei_inner{
display: flex;
justify-content: space-between;
}
#jirei article{
width: 46%;
}
#jirei article h4{
font-size: 20px;
}
#jirei .common_btn a:hover{
background-color: #b3203a;
}



#qa a{
flex-direction: row;
}
#qa a:hover{
background-color: #ddd;
}
#qa .text{
flex: 1;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}



}