@charset "utf-8";
/* CSS Document */



.brand-box{
background-color: #EFE9DD;
padding: 120px 4%;
}

.brand-box img{
display: block;
margin: 0 auto;
max-width: 200px;
}



.kushu-box{
background-color: #C9CACA;
}

.kushu-content{
    padding: 40px 6% 120px;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.main-box{
    margin: 0 0 60px;
    text-align: center;
    font-size: 24px;
}

.main-box img{
    display: block;
    margin: 0 auto;
    max-width: 480px;
    width: 40%;
}

.intro-box{
    margin: 0 0 60px;
}

.intro-content{
    display: flex;
    flex-wrap: wrap;
}

.intro-left{
    width: 50%;
}

.intro-left img{
    display: block;
    width: 70%;
    max-width: 320px;
    margin: 0 auto;
}

.intro-right{
    width: 50%;
}

.intro-theme{
    font-weight: 600;
    font-size: 20px;
}



.setsumei-box{
    margin: 0 0 60px;
}

.setsumei-box img{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
}




.outline-content{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 60px;
}

.outline-left{
    width: 50%;
    box-sizing: border-box;
    padding: 0 2%;
}

.outline-table{
    width: 100%;
    margin: 0 0 12px;
}

.outline-table th{
    font-weight: normal;
    text-align: left;
}

.outline-ul{
    margin: 0 0 12px;
}

.outline-ul li{
    list-style: decimal;
    margin: 0 0 0 28px;
}

.outline-theme{
    font-weight: 600;
}

.outline-right{
    width: 50%;
    box-sizing: border-box;
    padding: 0 2%;
}

.outline-right img{
    display: block;
    width: 100%;
    margin:  0 auto;
    max-width: 800px;
}







.item-wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 0 30px;
}

.item-img{
width: 45%;
text-align: center;
box-sizing: border-box;
padding: 20px 2%;
}

.item-img img{
max-width: 100%;
max-height: 300px;
}

.item-text{width: 55%;}

.item-name{
font-size: 22px;
font-weight: bold;
border-bottom: 1px solid #888888;
margin: 0 0 10px;
padding: 0 0 6px;
}



.seibun-box{margin: 20px 0 0;}
.seibun-box p{font-size: 12px;}





.concept-box{
background-color: #FFB2B3;
color: #FFFFFF;
font-weight: bold;
text-align: center;
font-size: 18px;
line-height: 2;
margin: 0 0 30px;
padding: 10px 4% 12px;
}



.point-box{
margin: 0 0 30px;
}

.point-wrap{
display: flex;
flex-wrap: wrap;
}

.point-block{
width: 31.33%;
margin: 0 1%;
box-sizing: border-box;
padding: 18px 3% 20px;
background-color: #F1F1F1;
}

.point-theme{
border-bottom: 1px solid #CCCCCC;
margin: 0 0 6px;
padding: 0 0 4px;
font-weight: bold;
}

.point-strong{
font-weight: bold;
text-align: center;
margin: 10px 0 0;
}







.target-box{
margin: 0 0 40px;
padding: 0 2%;
}

.target-block{
margin: 0 0 20px;
padding: 4px 0 4px 12px;
border-left: 3px solid #DB6597;
}

.target-theme{
font-weight: bold;
}


.tokuchou-box{
display: flex;
flex-wrap: wrap;
margin: 0 0 30px;
}

.tokuchou-block{
width: 47%;
box-sizing: border-box;
border: 1px solid #FFB2B3;
margin: 0 1.5% 30px;
padding: 0 0 15px;
}

.tokuchou-theme{
background-color: #FFB2B3;
color: #FFFFFF;
padding: 8px 6%;
margin: 0 0 10px;
font-weight: bold;
font-size: 17px;
}

.tokuchou-block p{
padding: 0 6%;
}

.tokuchou-line{
border-bottom: 1px solid #CCCCCC;
margin: 6px 6%;
}





.youto-box{
margin: 0 0 30px;
display: flex;
flex-wrap: wrap;
}

.youto-block{
width: 46%;
margin: 0 2% 30px;
box-sizing: border-box;
border-left: 2px solid #DB6597;
border-bottom: 2px solid #DB6597;
padding: 0 0 16px 16px;
}

.youto-theme{
font-weight: bold;
color: #DA5154;
text-align: center;
font-size: 17px;
}

.youto-theme::after{
display: block;
content: "|";
text-align: center;
color: #CCCCCC;
}


.flow-box{padding: 20px 2%;}

.flow-title{
text-align: center;
margin: 0 0 25px;
line-height: 1.3;
}

.flow-title span{
display: block;
font-size: 40px;
}

.flow-block{
position: relative;
border: 1px solid #CCCCCC;
padding: 0 0 20px;
border-radius: 8px;
}

.flow-num{
position: absolute;
top: -15px;
left: 2%;
font-size: 26px;
}

.flow-theme{
font-weight: bold;
font-size: 18px;
background-color: #FFEDED;
padding: 6px 6%;
margin: 0 0 12px;
border-radius: 8px 8px 0 0;
}

.flow-subtheme{
font-weight: bold;
}

.flow-block p{margin: 0 6%;}

.flow-allow{
text-align: center;
margin: 4px 0;
font-size: 20px;
}

.flow-line{
border-bottom: 1px solid #EEEEEE;
margin: 4px 6%;
}

.flow-answer-use{
color: #DA5154;
font-weight: bold;
}



#product-back{
display: block;
border: 1px solid #888888;
margin: 80px auto 0;
text-align: center;
max-width: 150px;
font-size: 13px;
padding: 8px 10px;
box-sizing: border-box;
}

#product-back:hover{
border: 1px solid #333333;
background-color: #333333;
color: #FFFFFF;
}





/*       PC       */
@media(min-width: 991px){








}

/*     TABLET     */
@media(min-width: 768px) and (max-width: 990px){



.lineup-block img{height: 200px;}



}

/*  SMART-PHONE  */
@media(max-width: 767px){


.main-box {
    margin: 0 0 40px;
    font-size: 20px;
}

.main-box img {
    margin: 0 auto 6px;
    width: 60%;
}

.intro-box {
    margin: 0 0 40px;
}

.intro-left {
    width: 100%;
}

.intro-left img {
    width: 50%;
    max-width: 320px;
    margin: 0 auto 16px;
}

.intro-right {
    width: 100%;
}

.intro-theme {
    font-size: 18px;
}


.setsumei-box {
    margin: 0 0 40px;
}

.outline-left {
    width: 100%;
    padding: 0;
}

.outline-right {
    width: 100%;
    padding: 0;
}








.brand-box{padding: 80px 4%;}
.brand-box img{max-width: 120px;}

.lineup-block{
width: 100%;
margin: 0 0 30px;
}

.lineup-block img{height: 150px;}

.lineup-name{
padding: 8px 4%;
font-size: 14px;
}









.item-img{
width: 100%;
padding: 10px 6%;
}

.item-img img{max-height: 160px;}
.item-text{width: 100%;}

.item-name{
font-size: 17px;
text-align: center;
}

.seibun-box{margin: 10px 0 0;}
.seibun-box p{font-size: 11px;}


.concept-box{
font-size: 14px;
margin: 0 0 30px;
padding: 10px 6%;
}



.point-block{
width: 100%;
margin: 0 0 20px;
padding: 10px 6%;
}

.point-strong{
font-weight: bold;
text-align: center;
margin: 4px 0 0;
}







.tokuchou-block{
width: 100%;
margin: 0 0 20px;
padding: 0 0 15px;
}

.tokuchou-theme{
padding: 4px 8%;
font-size: 16px;
}

.tokuchou-block p{padding: 0 8%;}



.youto-box{
margin: 0;
}

.youto-block{
width: 100%;
margin: 0 0 25px;
padding: 0 0 16px 16px;
}

.youto-theme{
font-size: 14px;
}








.flow-title{margin: 0 0 20px;}
.flow-title span{font-size: 32px;}

.flow-block{padding: 0 0 16px;}

.flow-num{
top: -15px;
left: 3%;
font-size: 22px;
}

.flow-theme{
font-weight: bold;
font-size: 15px;
background-color: #FFEDED;
padding: 4px 8%;
margin: 0 0 10px;
}


.flow-block p{margin: 0 8%;}

.flow-allow{
margin: 2px 0;
font-size: 14px;
}





}