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

/*共通*/
.aroma .wrapper{
    max-width: 1200px;
    margin: 5% auto 0;
	padding: 10px;
}
.aroma h2{
	border-top:1px solid #d4a152;
	border-bottom:1px solid #d4a152;
    text-align: right;
    margin-left: auto;
    margin-bottom: 2%;
    padding: 1% 0;
    font-size: 2.5rem;
    font-family: "fot-tsukubrdgothic-std",sans-serif;
    font-weight: normal;
}
.aroma h2 span{
	font-size: 1.5rem;
	font-family: "good-kitty",sans-serif;
	letter-spacing: 2px;
}
.aroma p,.aroma li{
    color: #000;
}

/*メディアクエリ*/
@media screen and (max-width: 812px) {
    .aroma .wrapper{
        width: 96%;
    }
}

/*sec1*/
.aroma .sec1{
    margin: 0 0 10%;
}
.aroma .sec1 h2{
    width: 300px;
}
.aroma .sec1 .box,
.aroma .sec1 p:last-child{
    width: 1100px;
    margin: 0 auto;
}
.aroma .sec1 .box .text{
    width: 45%;
    float: left;
}
.aroma .sec1 .box .text ul{
    width: 47%;
    float: left;
    margin-top: 5%;
    border-right: 1px solid #d4a152;
    padding-right: 2%;
    margin-right: 2%;
}
.aroma .sec1 .box .text ul:last-child{
    border-right-style: none;
    padding-right: 0;
    margin-right: 0;
}

.aroma .sec1 .box .text li{
    line-height: 1.9;
    background: url(../img/icon.png) no-repeat left 3%;
    background-size: 9%;
    padding-left: 12%;
    margin-bottom: 4%;
}
.aroma .sec1 .box figure{
    width: 53%;
    float: right;
}
.aroma .sec1 p:last-child{
    margin-top: 3%;
}

/*sec2*/
.aroma .sec2{
    margin: 5% 0 10%;
}
.aroma .sec2 h2{
    width: 496px;
}
.aroma .sec2 .box{
    width: 1100px;
    margin: 0 auto;
}
.aroma .sec2 dl{
    color: #000;
    line-height: 1.2;
    background: #ffefd2;
    padding: 2% 3%;
}
.aroma .sec2 dt{
    width: 20%;
    float: left;
    background: url(../img/icon.png) no-repeat;
    background-size: contain;
    padding-left: 4%;
}
.aroma .sec2 dt,.aroma .sec2 dd{
    margin-bottom: 2%;
}
.aroma .sec2 dt:last-child,.aroma .sec2 dd:last-child{
    margin-bottom: 0;
}

/*sec3*/
.aroma .sec3{
    margin: 5% 0 10%;
}
.aroma .sec3 h2{
    width: 280px;
}
.aroma .sec3 figure{
    width: 810px;
    margin: 0 auto 2%;
}
.aroma .sec3 p{
    width: 1100px;
    margin: 0 auto 2%;
}
.aroma .sec3 p span{
    color: #d4a152;
    font-weight: bold;
}
.aroma .sec3 ul.box_1{
    width: 1100px;
    margin: 5% auto;
}
.aroma .sec3 ul.box_1 li{
    width: 480px;
    float: left;
}
.aroma .sec3 ul.box_1 li:last-child{
    float: right;
}
.aroma .sec3 h3{
    color: #d4a152;
    font-size: 2.4rem;
    font-family: "fot-tsukubrdgothic-std",sans-serif;
    text-align: center;
    margin-bottom: 4%;
}
.aroma .sec3 ul li p{
    width: 100%;
}

.aroma .sec3 .box_2{
    background: #ffefd2;
    padding: 2% 5%;
}
.aroma .sec3 .box_2 ul{
    width: 48%;
    float: left;
}
.aroma .sec3 .box_2 ul:last-child{
    float: right;
}
.aroma .sec3 .box_2 li{
    background: url(../img/icon.png) no-repeat;
    background-size: 4%; 
    line-height: 1.7;
    padding-left: 5%;
    margin-bottom: 3%;
}
.aroma .sec3 .box_2 li span.name{
    color: #d4a152;
    font-weight: bold;
}
.aroma .sec3 .box_2 li span.cap{
    font-size: 1.3rem;
}
/*メディアクエリ*/
@media screen and (max-width: 812px) {
    /*sec1*/
    .aroma .sec1{
        margin: 5% auto;
    }
    .aroma .sec1 h2{
        margin-top: 12%;
        margin-bottom: 8%;
    }
    .aroma .sec1 .box, .aroma .sec1 p:last-child{
        width: 96%;
        margin: 0 auto;
    }
    .aroma .sec1 .box figure{
        width: 100%;
        float: none;
    }
    .aroma .sec1 .box figure img{
        width: 100%;
    }
    .aroma .sec1 .box .text{
        width: 100%;
        float: none;
        margin: 0 auto;
    }
    .aroma .sec1 .box .text ul{
        width: 96%;
        border-right-style: none;
        margin: 5% auto 2%;
    }
    .aroma .sec1 .box .text ul:last-child{
        margin: 0 auto 2%;
    }
    .aroma .sec1 .box .text li{
        background-size: contain;
    }
    .aroma .sec1 p:last-child{
        margin: 0;
    }
    
    /*sec2*/
    .aroma .sec2 h2{
        width: 296px;
        margin-top: 12%;
        margin-bottom: 8%;
    }
    
    .aroma .sec2 .box{
        width: 100%;
        clear: both;
    }
    .aroma .sec2 dl{
        padding: 6% 3%;
        margin-top: 5%;
    }
    .aroma .sec2 dt{
        float: none;
        padding-left: 8%;
    }
    .aroma .sec2 dd{
        padding-left: 8%;
        margin-bottom: 5%;
    }
    
    /*sec3*/
    .aroma .sec3 h2{
        margin-top: 12%;
        margin-bottom: 8%;
    }
    .aroma .sec3 figure{
        width: 100%;
        margin-bottom: 4%;
    }
    .aroma .sec3 p{
        width: 100%;
        margin-bottom: 4%;
    }
    .aroma .sec3 ul.box_1{
        width: 100%;
        margin: 7% auto;
    }
    .aroma .sec3 ul.box_1 li{
        width: 100%;
        margin-bottom: 5%;
    }
    .aroma .sec3 .box_1 li figure{
        width: 68%;
        margin: 0 auto;
    }

    
    .aroma .sec3 .box_2{
        padding: 6% 5%;
    }
    .aroma .sec3 .box_2 ul,
    .aroma .sec3 .box_2 ul:last-child{
        width: 96%;
        float: none;
    }
    .aroma .sec3 .box_2 li{
        background-size: 6%;
        margin-bottom: 6%;
        padding-left: 7%;
    }
    .aroma .sec3 .box_2 ul li:last-child{
        float: none;
    }
}
@media screen and (max-width: 580px) {
    .aroma .sec1 .box .text li{
        background-size: 9%;
    }
}