@charset "UTF-8";
#benefits #mv {
background:url("../img/media/bg_main_pc.jpg") top left no-repeat;
background-size: cover;
padding-top: 65px;
padding-bottom: 65px;
}
.sp{display: none;}
.benefits_menu{}
.benefits_menu li{
color: #000;
background: url("../img/content/icon01.png") left 8px no-repeat;
padding-left: 38px;
font-size: 22px;
margin-bottom: 1em;
}
.benefits_menu li a{color: #000;}
.benefits_menu li a:hover{
color: #0ab7b7;
}
.benefits_branch{
margin-top:5px;
display: flex;
flex-wrap: wrap;
}
.benefits_branch li{
background: none;
font-size: 16px;
padding: 0;
width: calc(100% / 6);
margin-bottom: 7px;
}
.benefits_branch li a{color: #000;}
.benefits_branch li a span {
padding-right: 0.3em;
color: #ddd;
}
.benefits_branch li a:hover span {color: #0ab7b7;}
.benefits_branch li.branch_ac span{color: #0ab7b7;}

.branch_menu_wrap{
background: #F6F6F6;
padding: 0.3em 2em;
margin: 0 2em 2em;
}
.branch_menu_wrap p{
font-size: 16px;
font-weight: bold;
margin: 0.3em 0 0.8em;
border-bottom: 1px solid #0AB7B7;
}
.branch_menu_wrap .benefits_branch{}

#benefits h3.h3_benefits {
color: #fff;
font-size: 22px;
position: relative;
padding: 7px 20px;
background: #20b7b6;
margin-bottom: 0.7em;
}
#benefits h3.h3_benefits:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 9px solid transparent;
border-top: 10px solid #20b7b6;
width: 0;
height: 0;
}
.mb20{margin-bottom: 20px;}
.font_l{font-size: 1.2em;}

.benefits_wrap{
display: flex;
flex-wrap: wrap;
margin-bottom: 3em;
}
.benefits_wrap img{
width: calc(100% / 3 - 10px);
margin: 0px 5px 10px;
}
#benefits p.benefits-lead {
margin-bottom:20px;
width: 100%;
padding: 0 1em;
}
#benefits dl.benefits-lead{
display: flex;
margin: 1.3em 0.5em 1em;
}
dl.benefits-lead dt{
background: #42423F;
color: #fff;
padding: 0.2em 1em;
margin-right: 0.7em;
font-size: 16px;
font-weight: bold;
width: 210px;
}
dl.benefits-lead dd{
font-size: 16px;
font-weight: bold;
padding: 0.2em 0;
width: 815px;
}
.wip_note{
font-size: 2em;
margin: 3em 0 1em;
color: #21b7b6;
font-weight: bold;
text-align: center;
}
.wip_note2{font-size: 1.2em;text-align: center;}

/*空間デザインイベント----------------------------*/
.benefits_flexbox{
display: flex;
align-items: center;
margin-bottom: 4em;}
.vote_btn{
width: 30%;
margin: 0 auto;
text-align: center;
font-weight: bold;
}
.vote_btn a{
color: #fff;
font-size: 2em;
background: #20b7b6;
padding: 0.8em 4em;
}
.vote_btn a:hover{opacity: 0.7;}
.vote_btn_box{margin: 6em 0 1em;}
.vote_btn_box2{
margin: 6em 0 1em;
text-align: center;
}
.vote_btn2{
width: 30%;
margin: 0 auto;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 1.6em;
background: #999;
padding: 0.8em 2em;
}
.vote_btn_box2 p{margin-top: 1em;}
.design_grand-prix{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
/*margin: 15px 0 60px;*/
width: 50%;
}
.design_grand-prix tr{
color: #676767;
line-height: 1.6em;
}
.design_grand-prix th{
background-color: #e0e0e0;
text-align: center;
}
.design_grand-prix td,.design_grand-prix th{
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
vertical-align: middle;
padding: 10px;
}
.design_grand-prix td:first-of-type{
text-align: right;
font-weight: bold;
background-color: #F6F6F6;
}
.design_grand-prix td:nth-of-type(n+2){
text-align: center;
}

@media screen and (max-width: 768px){
#benefits #mv {padding-top: 6.25%;padding-bottom: 6.25%;}
#benefits .pagenav {display: none;}
#benefits .last {margin-bottom: 10px;}
.sp{display: block;}
.benefits_menu{margin-bottom: 5em;}
.benefits_menu li{margin-bottom: 0.5em;}
.benefits_branch li{width: calc(100% / 2);}
.benefits_branch li a span {padding-right: 0.1em;}
.branch_menu_wrap{margin: 0 0.5em 2em;padding: 0.3em 0.5em;}
.branch_menu_wrap p{font-size: 14px;}
.branch_menu_wrap .benefits_branch li{font-size: 14px;width: calc(100% / 3);}

#benefits h3.h3_benefits {font-size: 16px;font-weight: normal;padding: 9px 10px;}
#benefits h3.h3_benefits:after {
left: 10px;
border: 7px solid transparent;
border-top: 8px solid #20b7b6;
}
.benefits_wrap{margin-bottom: 3em;}
.benefits_wrap img{width: calc(100% / 2 - 4px);margin: 0px 2px 4px;}
.benefits_wrap.branch img{width: calc(100% / 2 - 2px);margin: 0 1px 2px;}
#benefits dl.benefits-lead{
flex-wrap: wrap;
margin: 1.3em 0em 1em;
}
dl.benefits-lead dt{
width: 100%;
margin: 0 0 0.3em;
}
dl.benefits-lead dd{
padding: 0 0.5em;
font-size: 14px;
font-weight: normal;
width: 100%;
}
.wip_note{font-size: 20px;margin: 2em 0 1em;}
.wip_note2{margin-bottom: 4em;}

/*空間デザインイベント----------------------------*/
.design_grand-prix{width: 100%;font-size: 14px;}
.design_grand-prix td{padding: 5px 7px;}
.benefits_flexbox{margin-bottom: 6em;flex-direction: column;}
.vote_btn{width: 90%;margin: 3em auto 0;}
.vote_btn a{font-size: 1.4em;}
.vote_btn_box{margin: 3em 0 6em;}
.vote_btn_box2{margin: 3em 0 6em;text-align: center;}
.vote_btn2{
width: 90%;
margin: 3em auto 0;
font-size: 1.2em;
padding: 0.8em 1em;
}
.vote_btn_box2 p{margin-top: 1em;}

}



.w50 p{ font-size: 116%; }
.mt-2 { margin-top: 2em; }
.mt-6 { margin-top: 6em; }
img{width: 100%;}
p {font-size: 116%;}
.rr_info {
    font-size: 116%;
    padding: 1em;
    margin: -2em auto 2em;
    background: #fff1ec;
}

.col4{width: calc(100% / 2 - 2%); margin:1%;}
.flex_wrap{/*必要に応じて折り返す*/
display: flex;
flex-wrap: wrap;
font-size: 100%;
}

/* PCだけ */
@media (min-width: 768px){
.w45 { width: 45%; }
.w50 { width: 50%; }
.col4{width: calc(100% / 4 - 2%); margin:1%;}
.flex-between{/* 端まで均等間隔で配置 */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}