@charset "utf-8";
@media screen and (max-width:1200px){
    section.blue.gin.sub01{
        margin-top:500px;
    }
    section.blue.gin.sub01 .fade-box img{
        width:90px;
    }
    section.blue.gin.sub01 .fade-box img:nth-of-type(2){
        margin:50px 8px 0;
    }
}
@media screen and (max-width:1000px){
    header nav{
        display: none;
    }
    a.webshop{
        position: fixed;
        z-index: 9999;
        right:70px;
        top:20px;
        width:30px;
    }
    footer .wrapper01{
        padding:25px 0 60px;
    }        
    footer .box01{
        width:90%;
        justify-content: space-around;
    }
    footer .box02{
        display: none;
    }
    footer small{
        margin-left:0;
        margin:1em auto 0 auto;
    }
    /*blog*/
    body.blog section.b-article{
        position: inherit;
        display: flex;
        flex-flow: column-reverse;
        height:auto;
        margin-bottom:50px;
    }
    section.b-article .box01{
        position: inherit;
        width:100%;
    }
    section.b-article .box01 a.linkbtn01{
        width:100%;
        padding:0;
        margin-top:10px;
    }
    section.b-article .box02{
        position: inherit;
        width:100%;
        height:auto;
        margin-bottom:10px;
    }
    section.b-article .box02 img{
        aspect-ratio:16/9;
        max-height:370px;
    }
    aside.pagination{
        width:80%;
    }
    /*products*/
    section.blue.gin.sub01{
        margin-top:700px;
    }
    section.blue.gin.sub01 .fade-box{
        top:-50px;
    }
}
@media screen and (min-width:499px) and (max-width:1000px){
    section.concept2.top img{
        width:80%;
    }
    .bg-blue{
        width:70%;
    }
    section.concept.top .box02{
        bottom:20%;
        height:40%;
    }
    section.gin.top{
        height:auto;
    }
    section.gin.top .box01{
        width:35%;
    }
    section.gin.top .box02{
        width:60%;
    }
    section.gin.top .box02 p{
        margin:2em 0;
    }
    section.map{
        height:80vh;
    }
    section.map iframe{
        bottom:30%;
        height:45%;
    }
    /*products*/
    .concept-box{
        word-break: keep-all;
    }
    section.gin.sub01 .wrapper01, section.gin.sub01.reverse .wrapper01{
        flex-flow: column;
    }
    section.gin.sub01 .headline02{
        text-align: center;
    }
    section.gin.sub01 .box01{
        width:auto;
        margin-top:inherit;
    }
    section.gin.sub01 .box01 img{
        display: block;
        width:50%;
        margin:auto;
    }
    section.gin.sub01.sakura .box01 img{
        width:45%;
    }
    section.gin.sub01 .box02{
        width:80%;
        min-width:300px;
    }
    section.gin.sub01 .bg-img{
        width:80%;
    }
    section.distiller .box02{
        width:80%;
        background-position: right;
    }
    section.distiller .box02 p{
        bottom:-150px;
    }
    section.manager .box02{
        background-position: left;
    }
    section.manager .box02 h4{
        top:60%;
    }
    section.pt01.manager .box02 p{
        bottom:-260px;
    }
    section.tradition.sp01 {
        margin-top: 100px;
        height: 700px;
        min-height: inherit;
    }
    section.tradition .box02{
        top:50%;
    }
    /*distillery*/
    section.pt03.distillery .box03{
        height:35%;
    }
    /*artwork*/
    .eyecatch.sub01, .eyecatch.sub02{
        background-attachment: inherit;
    }
    section.artwork.pt01 .box02{
        width:80%;
    }
    section.artwork.pt01 .box02 p{
        bottom:-220px;
        width:80%;
    }
    /*contact*/
    section.contact.wrapper02{
        width:100%;
    }
    section.contact .box02 p{
        font-size:16px;
    }
    section.contact table th{
        font-size:16px;
    }
    section.contact .box02{
        width:80%;
        margin:auto;
    }
    /*blog*/
    section.article{
        width:80%;
    }
}
@media screen and (max-width:500px){
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    .page-top{
        right:10vw;
        bottom:30px;
    }
    section{
        height:auto;
        margin:50px 0;
    }
    section.pt01 .box02{
        width:80%;
    }
    section.pt01 .box02 p{
        width:auto;
    }
    section.pt02 .box03{
        width:80%;
    }
    section.pt03 .box02{
        top:inherit;
    }
    section.pt03 .box03{
        top:inherit;
        bottom:5%;
        width:90vw;
    }
    .wrapper01{
        width:95vw;
    }
    .linkbtn01{
        width:150px;
    }
    .linkbtn01 span:nth-of-type(1){
        height:43px;
    }
    .bg-blue{
        width:80%;
        height:150px;
        min-height:0;
    }
    header nav{
        display: none;
    }
    .eyecatch.top span a{
        bottom:10px;
        right:10px;
        padding: 10px;
        font-size:14px;
        background-color: rgb(0,0,0,0.8);
    }
    .eyecatch.sub01, .eyecatch.sub02{
        background-attachment: inherit;
    }
    .eyecatch.sub01{
        height:35vh;
        margin-top:70px;
    }
    .eyecatch.sub02{
        height:25vh;
        margin-top:70px;
    }
    section.concept2.top .box01 p{
        top:0px;
    }
    section.concept.top .box02{
        top:50%;
        width:80%;
        height:200px;
    }
    section.concept.top .box02 .linkbtn01{
        bottom:-60px;
    }
    section.concept2.top img{
        top:10%;
        width:100%;
    }
    section.gin.top{
        display: flex;
        min-height:inherit;
    }
    section.gin.top .wrapper01{
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }
    section.gin.top .box01{
        width:35%;
        margin:0;
    }
    section.gin.top .box01 img{
        width:100%;
        min-width:inherit;
    }
    section.gin.top .box02 .headline02{
        display: flex;
        justify-content: center;
    }
    section.gin.top .box02 p{
        margin:1.6em 0;
    }
    section.gin.top .box02 .cont01{
        margin-left:5%;
    }
    section.blog ul{
        width:90%;
    }
    section.blog ul li{
        margin:10px auto;
    }
    section.blog ul li a{
        display: flex;
        flex-flow: column;
        line-height: 1.3em;
    }
    section.blog ul li a h3::before{
        display: none;
    }
    section.blog ul li a span{
        font-size:12px;
    }
    section.map iframe{
        position: static;
        display: block;
        width:90%;
        height:320px;
        margin:1em auto;
    }
    /*products*/
    .eyecatch.sub01.gin .slide-fade img{
        height:35vh;
    }
    .concept-box{
        width:95%;
        margin:50px auto 75px;
        word-break: keep-all;
    }
    section.gin.sub01{
        margin:0;
        padding:75px 0 50px;
        background-image: radial-gradient(circle at 50% 25%, rgba(242, 242, 248, 1) 10%, rgba(221, 224, 235, 0.8) 30%, rgb(203 214 227 / 80%) 55%, rgb(214 226 240) 100%);
    }
    section.gin.sub01.sakura{
        background-image: radial-gradient(circle at 50% 25%, rgba(251, 237, 240, 1) 10%, rgba(247, 218, 225, 0.8) 30%, rgba(246, 211, 219, 0.8) 55%, rgb(246 211 219 / 80%) 100%);
    }
    section.gin.sub01 .wrapper01, section.gin.sub01.reverse .wrapper01{
        flex-flow: column;
    }
    section.gin.sub01 .headline02{
        text-align: center;
        margin:10px 0 25px;
        font-size:36px;
    }
    section.gin.sub01 .box01{
        width:65%;
        margin:auto;
    }
    section.gin.sub01.sakura .box01{
        width:45%;
    }
    section.gin.sub01 .box02{
        width:95%;
    }
    section.gin.sub01 .bg-img{
        width:90%;
    }
    span.detail{
        font-size:14px;
    }
    section.distiller.sp01{
        height:800px;
    }
    section.distiller.pt01 .box02 p{
        bottom:-260px;
    }
    section.distiller .box02{
        background-position: 90% 50%;
    }
    section.distiller .box03{
        width:80%;
        background-size:cover;
    }
    section.distiller.pt01 .box03 p{
        top:inherit;
        bottom:-280px;
        left:10vw;
        right:auto;
        width:auto;
    }
    section.manager{
        height:1000px;
        margin-top:100px;
        margin-bottom:0px;
    }
    section.manager .box02{
        background-position: 20% 50%;
    }
    section.manager .box02 h4{
        top:320px;
    }
    section.pt01.manager .box02 p{
        bottom:-220px;
    }
    section.botanical{
        height:800px;
    }
    section.botanical.pt02 .box02{
        position: inherit;
        bottom:inherit;
        left:inherit;
        width:85%;
        margin:50px auto 0 auto;
    }
    section.botanical.pt02 .box03{
        height:25vh;
        bottom:50px;
    }
    section.botanical.pt02 .box03 .slide-fade img{
        height:220px;
    }
    section.tradition{
        margin:0;
    }
    section.tradition.sp01{
        margin-top:100px;
        height:400px;
        min-height: inherit;
    }
    section.tradition .box02{
        height:35vh;
        top:55%;
    }
    section.tradition .box03 p{
        top:0;
        width:auto;
    }
    /*artwork*/
    section.artwork.pt01{
        height:800px;
    }
    section.artwork.pt01 .box02{
        display: flex;
        align-items: flex-end;
        height:300px;
        bottom:380px;
    }
    section.artwork.pt01 .box02 p{
        bottom:-250px;
    }
    section.artwork.pt01.sp01{
        height:500px;
        margin-bottom:240px;
    }
    section.artwork .box03{
        bottom:350px;
        background-size:80%;
        background-position: top left;
    }
    section.artwork .box03 ul{
        top:150px;
        width:70%;
    }
    aside.artwork{
        height:200px;
    }
    /*distillery*/
    section.pt03.distillery .box03{
        top:inherit;
        bottom:0;
        height:25vh;
    }
    section.yoshida .box02{
        width:80%;
    }
    section.yoshida .box02 p{
        width:auto;
        height:60%;
        bottom:-150px;
    }
    section.yoshida .box03{
        background-size:cover;
    }
    section.yoshida .box03 p{
        width:auto;
        top:250px;
        left:10vw;
    }
    section.yoshida .box03 .slide-fade{
        width:80%;
    }
    section.yoshida .box03 .slide-fade img{
        height:220px;
    }
    section.botanical.sp02{
        height:auto;
    }
    /*tour*/
    section.tour.sub02 .box03{
        background-size: cover;
    }
    section.tour.pt01 .box03 p{
        top:220px;
        width:70%;
    }
    section.tour.sub02 .box03 .slide-fade{
        width:80%;
    }
    section.tour.sub02 .box03 .slide-fade img{
        height:200px;
    }
    /*festival*/
    section.festival.sub02 .box03{
        background-size:cover;
    }
    /*company*/
    section.company .box02{
        width:80%;
    }
    section.company .box02 li{
        margin:1em 0;
    }
    /*contact*/
    section.contact{
        min-height: inherit;
    }
    section.contact form{
        padding:0;
    }
    form tr{
        width:100%;
        max-width:300px;
        margin:auto;
        flex-flow: column;
    }
    form th, form td{
        display: block;
        width:100%;
        padding:0px;
    }
    section.contact table th{
        width:auto;
        margin:10px 0 0;
        padding:5px 0;
    }
    form td{
        margin-bottom:10px;
    }
    section.contact table td{
        width:auto;
    }
    form input, form textarea{
        padding:5px 0;
    }
    input#name, input#kana, input#jusyo01, input#jusyo02, input#jusyo03, input#jusyo04, input#tel, input#fax, input#Email, form textarea{
        display: block;
        width:98%;
        margin:auto;
    }
    /*blog*/
    nav.blog{
        height:50px;
    }
    nav.blog ul li a{
        font-size:12px;
    }
    .s-box{
        overflow-x: scroll;
    }
    ul.pickup{
        width:800px;
        padding:0 5%;
    }
    ul.pickup li{
        height:220px;
    }
    section.article, aside.pagination{
        width:90vw;
    }
    section.article p{
        font-size:14px;
    }
    section.b-article .box02 img{
        height:auto;
        max-height:278px;
        aspect-ratio:4/3;
    }
    section.b-article span.sub{
        font-size:12px;
    }
    aside.pagination .box01{
        flex-flow: column;
        align-items: center;
    }
    aside.pagination .box01 span{
        max-width:90%;
        margin:10px 0;
    }
    /*privacy*/
    section.privacy .box01{
        height:150px;
    }
    section.privacy.wrapper02{
        font-size:14px;
    }
    .loader img {
        width: 50%;
    }
}