@charset "utf-8";

html{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Yu Gothic",YuGothic,Arial,Meiryo ;
}

svg{
    fill:#fff;
}

.main{
    width: 1280px;
    margin: auto;
}
a{
    text-decoration: none;
    color: #000;
}
p{
    font-size: 16px;
    padding-bottom: 30px;
    line-height: 27px;
}
.clear{
    clear: both;
}
.hero{
/*    background: url("../images/slideshow_img_7e62fa.webp"); */
    width: 1280px;
    aspect-ratio: 1280 / 430;
    background-size: cover;
    position: relative;
}

.hero-img{
    position: absolute;
    width: 1280px;
    z-index: 1;
}
.hero-img img{
    width: 100%;
}

.brand{
    background:#F5F5F5;
    width: 1280px;
}

.header-nav{
    width: 1280px;
    height: 96px;
    background: rgba(255, 255, 255, 1);
}

.header-h1{
    background: #fff;
    width: 96px;
    height: 96px;
    padding-left: 80px;
    box-sizing: border-box;
    float: left;
}

.header-h1 img{
    width: 96px;
}

.header-nav-li{
    float: right;
    width: 1000px;
    list-style: none;
    color: #333;
    font-weight: bold;
    margin-top: 36px;
    font-size: 16px;
}
.header-nav-li a{
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.header-nav-li>li{
    float: left;
    margin-right: 30px;
}

.header-nav-li>li>ul{
    display: none;
}
.root{
    position: relative;
}
.header-nav-li>li.root:hover>ul{
    display: block;
    position: absolute;
    list-style: none;
    width: 200px;
    background:#fd9626;
    z-index: 1001;
}

.header-nav-li>li.root:hover>ul>li{
    padding: 10px;
}

.header-nav-li>li.root:hover>ul>li>a{
    color: #fff;
}
.info-inner{
    margin: auto;
    width: 960px;
}
.info-inner-img img{
    width: 200px;
}
.info h2{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 40px;
}
.info-inner-p{
    width: 960px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-inner-p-time{
    font-weight: bold;
    padding-right: 20px;
}

.info-inner-p-p{
    flex-grow: 1;
}
.brandStory{
    width: 1280px;
    padding-bottom: 60px;
}

.brandStory h2{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.brandStory  p{
    margin: auto;
    width: 960px;
}

.hero_img{
    width: 960px;
    margin: 0 auto;
}

.btn{
    font-size: 16px !important;
    display: block;
    background: #fd9626;
    color: #FFF;
    width:180px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    text-decoration: none;
    font-weight: bold;
}

.brandStory p .btn{
    margin: auto;
}
.grey{
    background: #F7F7F7;
}
.typeSelection{

    width: 1280px;
    padding-bottom: 60px;
}
.typeSelection h2{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.item_list{
    list-style: none;
    width: 1160px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.item_list li{
    width: 250px;
    text-align: center;
}

.item_list li h3,.detailList li h3{
    font-size: 20px;
    margin: 10px 0;
    text-align: left;
}
.detail{
    width: 1280px;
    padding-bottom: 60px;

}

.detail h2{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.detail p{
    margin: auto;
    width: 960px;
}
.detailList{
    list-style: none;
    width: 960px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.detailList2{
    list-style: none;
    width: 960px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.detailList2 li{
    width: 320px;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.detailList2 h3{
    font-size: 14px;
    width: 240px;
    padding-right:20px ;
    box-sizing: border-box;
    font-weight: normal !important;
}

.detailList2 p{
    display: flex;
    justify-content: center;
    align-items: center;
}


.detailList li,.detailList p{
    width: 250px;
    text-align: center;
}

.env_li li{
    width: 450px;
}

.detailList .detailList-img{
    width: 100%;
}

.detailList2 .detailList-img{
    width: 100px;
    margin: auto;
}

.detailList-img img{
    width: 100%;
}

.footer{
    padding-top: 60px;
    background: #fd9626;
    width: 1280px;
    height: 320px;
    box-sizing: border-box;
}

.footer p{
text-align: center;
}

.footer a{
    color: #FFF;
}
.footerLi{
    list-style: none;
    width: 500px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.heroInner{
    width: 1280px;
    height: 430px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .15);
    color: #FFF;
    position: absolute;
    z-index: 2;
    bottom: 0;
    display: flex;
    align-items: flex-end;
}

.heroInnerFlex{
    width: 1280px;
}

.heroInner p{
    font-size: 32px;
    text-align: center;
    font-weight: bold;
}
.heroInner p .btn{
    margin: auto;
}
.heroInner p.large{
    font-size: 70px;
    font-weight: bold;
}


.brandInner p.large{
    text-align: center;
    margin-top: 170px;
    font-size: 70px;
    font-weight: bold;
}
.barnd_img{
    margin-top: 30px;
    text-align: center;
}

.lists{
    width:100%;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
}

.lists li{
    width: 33.3%;
    padding: 1px;
    box-sizing: border-box;
}

.list_mini li{
    width: 25%;
}

.lists li img{
    width: 100%;
}

.youtube{
    width: 960px;
    margin:0 auto;
    aspect-ratio: 16/9;
}
.youtube iframe{
    width: 100%;
    height: 100%;
}

.page-free-container{
    width: 960px;
    margin: auto;
}

.page-free-title{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.page-free-container ul{
    list-style: none;
    background-color: #fd9626;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.page-free-container ul li{
    color: #fff;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    flex-grow: 1;
}

.page-free-p{
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}
.page-free-p .free-p{
    padding-left: 20px;
    box-sizing: border-box;
    width: 720px;
}
.page-free-p .free-img{
    width: 240px;
}
.free-img img{
    width: 100%;
}

.page-free-p span{
    display: block;
}

.container{
    width: 960px;
    margin: auto;
}

.shoplist {
    margin-bottom: 20px;
}

.shop li {
    margin-bottom: 10px;
}

.areaBox ul {
    list-style: none;
}

.shopname a{
    color: #fd9626;
    font-weight: bold;
}

.shopname a:hover{
    text-decoration: underline;
}

.shoppref {
    background: #fd9626;
    border-radius: 5px;
    padding: 7px;
    color: #fff;
    display: inline;
    font-size: 13px;
}


.shopaddress {
    margin-top: 10px;
}
.shoptel a{
    color: #8a8787;
}

.bnr{
    width: 100%;
    margin: 30px auto;
}
.bnr img{
    width: 100%;
}


@media screen and (max-width: 767px) {
    body,.main,.hero,.hero-img,.header-nav,.heroInner,.heroInnerFlex,.brandStory,.detail,.brandStory p,.footer,.info-inner,.info-inner-p{
        width: 100%;
    }
    p{
        font-size: 12px;
        padding-bottom: 6px;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .heroInner p{
        font-size: 12px;
    }
    .heroInner p.large{
        font-size: 20px;
    }
    .btn{
        height: 40px;
        line-height: 40px;
        font-size: 12px;
    }
    .brandStory h2,.info h2,.detail h2,.item_list li h3, .detailList li h3{
        font-size: 14px;
        padding-top: 24px;
    padding-bottom: 12px;
    }
    .detailList{
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    .detailList li, .detailList p{
        margin: auto;
    }
    .info-inner-p{
        display: block;
    }
    .footerLi{
        display: block;
        width: 100%;
    }
    .info-inner-p-time,.info-inner-p-p{
        text-align: center;
    }
    .info-inner-p-a .btn{
        margin: auto;
    }
    .detail p{
        text-align: center;
        width: 100%;
    }
    .lists{
        /*display: block;*/
    }
    .lists li{
        width: 50%;
    }
    .header-nav-li{
        width: 100%;
    }
    .header-nav-li{
        font-size: 12px;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
    }
    .header-nav-li>li{
        float: none;
        margin: 0;
        width: 50%;
        box-sizing: border-box;
        text-align: center;
        padding: 4px;
    }
    .heroInner{
        display: none;
    }
    .header-h1{
        width: 100%;
        padding-left: 0;
        float: none;
        text-align: center;
    }
    .detailList2{
        width: 100%;
    }
    .detailList2 li{
        width: 50%;
        display: block;
        padding: 10px;
        box-sizing: border-box;
    }
    .detailList2 h3{
        padding-right: 0;
        width: 100%;
    }
    .youtube{
        width: 100%;
    }
    .page-free-container{
        width: 100%;
    }

    .container{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
}