@charset "utf-8";
html{height:100%; }
body {width:100%;height:100%; margin:0; padding:0;}

/* header */
header{width:100%; height:110px;padding-top:10px; background-color: #fff; /*background: url(../img/header_bg_repeat.gif) repeat-x bottom;*/}
#header-inner{width:95%;height:110px; margin:0 auto; background-color: #fff;  /*background: url(../img/header_bg.png)  no-repeat; background-size:100% 100% ;*/}

/* navigation */
nav{width:100%; height:auto;background:#fff;}
#nav-inner{width:100%;height:64px; margin:0 auto;}
#nav-inner ul{margin:0; padding:0; list-style:none;text-align:center;}
#nav-inner ul li{width:25%;height:64px;float:left; font-size:14px;line-height:120%;display: table;}

/* 
#nav-inner ul li:nth-child(1){width:22.00%;line-height:120%;}
#nav-inner ul li:nth-child(4){width:24.00%;line-height:120%;}
*/

#nav-inner ul li a{height:64px; color:#000; background:#fff;display: table-cell;vertical-align: middle;}
#nav-inner ul li a:hover{color:#fff; background:#226630;}
#nav-inner ul li .active{color:#e6c200;background:#226630;}
#nav-inner ul li .active:hover{color:#e6c200;background:#226630;}

#logo{width:33.333333%; height:34px; float:left;}
/* footer */
footer{width:100%; height:auto; background:#226630;margin-top:10%;}
#footer-inner{width:95%;height:auto; margin:0 auto; background:#226630;}
#footer-inner nav{background:none;}
#footer-inner nav{width:100%;font-size:20px; margin:0px auto 0px auto;}
#footer-inner nav ul{margin:0; padding:0;}
#footer-inner nav ul li{width:100%;height:64px;padding:0 0px;float:none; text-align:center;display: table;}
#footer-inner nav ul li a{height:24px; color:#fff;;display: table-cell;vertical-align: middle;}

.content-wrap{width:100%; height:auto;}
.content-wrap section:last-child{margin-bottom:60px;}
.content-inner{width:94%; height:auto; margin:0 auto;}

/* display */
.sp-only{display:none;}
.pc-only{display:inherit;}

/*background*/
.top-bg{ background:url(../img/top_bg.gif) repeat;}
.second-bg{ background:url(../img/second_bg.gif) repeat;}

/*================================ category ================================*/
.category{}
.category ul{margin:0;padding:0;list-style:none;}
.category ul li{margin:20px 0px 0px 0px; background: url(../../img/category_bg.png) no-repeat 0px 0px; -moz-background-size:100% 100%;-ms-background-size:100% 100%;-webkit-background-size:100% 100%;}

/*================================ page up button ================================*/
#btn-pagetop{width:48px; height:48px;}
#btn-pagetop a{width:48px; height:48px; display:block; background: url(../img/btn_top.png) no-repeat 0px 0px; text-indent:-9999px;}
#btn-pagetop a:hover{background:url(../img/btn_top.png) no-repeat 0px -48px;}

/*================================ lawson ================================*/

#logo-lawson {float: left; 
    width: 160px;
    margin-left: 10px;
    margin-top: 10px;
}
@media only screen and (max-width: 959px) {
    #logo-lawson {
        width: 110px;
        margin-top: 6px;
    }
}    
.intro {
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media only screen and (max-width: 959px) {
    .intro {
        flex-wrap: wrap; 
        justify-content: center;
    }
}    

@media only screen and (max-width: 959px) {
    .intro {
        width: 100%;;
    }
}    
@media only screen and (max-width: 959px) {
    .intro  p {
        margin-top: 40px;
        font-size: 16px;
    }
}    
.intro_title {
    font-size: 38px;
    padding: 10px;
    width: 60%;
    color: #B39501;
}
@media only screen and (max-width: 959px) {
    .catch_title {
        font-size: 32px;
    }
}    

.catch {
    margin-top: 20px;
    color: #fff;
}

.catch_title {
    font-size: 42px;
    margin-top: 50px;;
    margin-bottom: 30px;
    color: #ff9d49;
    background: #fff;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    font-weight: bold;
}
.catch_title i {
    color: #B39501;
}
@media only screen and (max-width: 959px) {
    .catch_title {
        font-size: 32px;
    }
}    

.catch_discription {
    font-size: 20px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 959px) {
    .catch_discription {
        font-size: 16px;
    }
}    


/* mobile */
@media only screen and (max-width: 599px) {
header{padding-top:10px;background:#226630;}
header{ height:70px;position:fixed;z-index:10000;}
#header-inner{width:95%;height:70px;padding:0 2.5%; margin:0 auto;/* background: url(../img/header_bg.png)  no-repeat; background-size:100% 100%;*/}

#logo{width:20%; height:auto;margin:0 auto;float:none; text-align:center;}
#logo img{width:100%; height:auto;}
#logo-sp{width:120px; height:auto;float:left; text-align:left;margin-top:1.5%;margin-right:5%;}
#logo-sp img{width:100%; height:auto;}
#header-title{width:auto; height:auto;margin:1.5% auto 0 auto;float:left; /*display: table;*/ font-size: 24px; color: #226630;}
#header-title img{width:100%; height:auto;display: table-cell;vertical-align: middle;}

#footer-inner nav ul li {border-bottom:2px solid #fff;}
#footer-logo{width:100%; height:auto;margin:24px auto;float:none; text-align:center;}
#address{width:100%; height:auto;margin:20px auto;float:none;font-size:18px;line-height:120%;color:#fff; text-align:center;}
#copyright{width:100%;height:auto;font-size:16px;line-height:140%; text-align:center; color:#fff; padding-bottom:20px;}

.sp-only{display:inherit;}
.pc-only{display:none;}

/*================================ category ================================*/
.category ul li{width:100%;height:auto;padding:0px;float:none;}
.category ul li:nth-child(3){margin-right:0px;float:none;}
.category ul li:nth-child(6){margin-right:0px;float:none;}
.category ul li img{width:100%;height:auto;}

/*================================ page up button ================================*/
#btn-pagetop{margin:10% 2.5% 0 0; float:right;}

}
/* pc & tablet */
@media only screen and (min-width: 600px) and (max-width: 959px) {
header{ height:70px;position:fixed;z-index:10000;}
#header-inner{width:95%;height:70px;padding:0 2.5%; margin:0 auto;}
#logo{width:20%; height:auto; float:left; text-align:left;margin-top:1.5%;margin-right:1.5%;}
#logo img{width:100%; height:auto;}
#logo-sp{width:5%; height:auto;float:left; text-align:center;margin-top:1.5%;margin-right:1.5%;}
#logo-sp img{width:100%; height:auto;}
#header-title{width:50%; height:auto; margin-top:0%; float:left;}
#header-title img{width:100%; height:auto;}	

#footer-inner nav ul li {border-bottom:2px solid #fff;}
#footer-logo{width:100%; height:auto;margin:24px auto;float:none; text-align:center;}
#address{width:100%; height:auto;margin:20px auto;float:none;font-size:18px;line-height:120%;color:#fff; text-align:center;}
#copyright{width:100%;height:auto;font-size:16px;line-height:140%; text-align:center; color:#fff; padding-bottom:20px;}

.sp-only{display:inherit;}
.pc-only{display:none;}

/*================================ category ================================*/
.category ul li{width:30.95%;height:auto;padding:1%;margin-right:0.5%;float:left;}
.category ul li:nth-child(3){margin-right:0px;float:left;}
.category ul li:nth-child(6){margin-right:0px;float:left;}

/*================================ page up button ================================*/
#btn-pagetop{margin:10% 2.5% 0 0; float:right;}

}
/* pc & tablet landscape */
@media only screen and (min-width: 960px) {
#logo{width:185px; height:34px; float:left;margin-top:16px;}
#logo img{width:185px; height:34px;}
#header-title{/*width:424px; height:54px; margin-top:8px; margin-left:40px;*/ float:left; font-size: 52px; color: #226630;}
#header-nav{width:100%;height:20px;float:left;}
#header-nav ul{margin:5px 0 0 0;padding:0;list-style:none; float:right;}
#header-nav ul li{width:220px;font-size:14px; line-height:20px; padding-left:20px; float:left; background:url(../img/icon_right_arrow.png) no-repeat 0px 4px;}
#header-nav ul li a{color:#fff; display:block;}
#header-nav ul li:nth-child(2){width:auto;}



footer{margin-top:60px;padding-top:20px;}
#footer-inner{height:170px;}
#footer-inner nav{width:788px;font-size:14px; margin:20px auto 40px auto;}
#footer-inner nav ul{margin:0; padding:0;}
#footer-inner nav ul li{height:20px;padding:0 0px;float:left; border-left:1px solid #fff; text-align:center;display: table;}
#footer-inner nav ul li:nth-child(1){width:84px; border-left:none;}
#footer-inner nav ul li:nth-child(2){width:98px;}
#footer-inner nav ul li:nth-child(3){width:238px;}
#footer-inner nav ul li:nth-child(4){width:168px;}
#footer-inner nav ul li:nth-child(5){width:196px;}
#footer-inner nav ul li a{height:24px; color:#fff;;display: table-cell;vertical-align: middle;}
#address-wrap{width:640px; margin:0 auto 40px auto;}
#footer-logo{float:left;height:34px;}
#address{height:34px;float:right;font-size:14px;line-height:34px;color:#fff;}
#copyright{width:100%;font-size:12px;line-height:12px; text-align:center; color:#fff;}
.content-inner{width:94%; height:auto;max-width:940px;}

/*================================ category ================================*/
.category ul li{width:30.95%;height:auto;padding:1%;margin-right:0.5%;float:left;}
.category ul li:nth-child(3){margin-right:0px;float:left;}
.category ul li:nth-child(6){margin-right:0px;float:left;}
.category ul li:nth-child(9){margin-right:0px;float:left;}

/*================================ page up button ================================*/
#btn-pagetop{width:48px; height:48px; position: fixed; right:20px; bottom:60px;}
#btn-pagetop a{width:48px; height:48px; display:block; background: url(../img/btn_top.png) no-repeat 0px 0px; text-indent:-9999px;}
#btn-pagetop a:hover{background:url(../img/btn_top.png) no-repeat 0px -48px;}

}
/* pc & tablet landscape */
@media only screen and (min-width: 960px) and (max-width: 1280px) {
#header-inner{width:900px;}
#footer-inner{width:900px;}
#nav-inner{width:900px;}

}
/*pc only*/
@media only screen and (min-width: 1281px){
#header-inner{width:1000px;}
#footer-inner{width:1000px;}
#nav-inner{width:1000px;}

/*================================ category ================================*/
.category ul li{width:290px;height:auto;padding:10px;margin-right:5px;float:left;}
.category ul li:nth-child(3){margin-right:0px;float:left;}
.category ul li:nth-child(6){margin-right:0px;float:left;}

}




/* wrap */