@charset "UTF-8";

body{
    font-family: "メイリオ","Hiragino Kaku Gothic Pro",sans-serif;
    color: #000;
    background-color: #fbfaf5;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;

}

 @keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

/* フッター */
footer{
    display: block;
    text-align: center;
    padding: 100px 0 100px 0;
    clear: both;

}

.copyright p{
    font-size: 12px;
}



/* index-タイトル */
.main-catch{
    position: relative;
    margin-bottom: 5%;

}


.main-catch img{
    filter: brightness(0.8);
    border-radius: 25px;
    width: 100%;

}

.main-catch1{
    display: block;
    position: absolute;
    top: 40%;
    right: 65%;

}

.main-catch1 h1{
    font-size: 200%;
    color: #fff;
    margin: 0;

}

.main-catch1 p{
    font-size: 120%;
    color: #fff;
    margin: 0;

}

/* index-お知らせ */
.news{
    margin-bottom: 10%;

}

.news ul{
    margin: 0;
    padding: 0;
    list-style: none;

}

.news li a{
    display: block;
    padding: 5px;
    border-bottom: dotted 2px #ddd;
    color: #000;
    text-decoration: none;

}

.news li a:hover{
    background-color: #eee;

}

.news time{
    margin-right: 10px;
    color: #888;
    font-weight: bold;

}


/* information */
.info{
    margin-bottom: 20%;

}

.info ul{
    margin: 0;
    padding: 0;
    list-style: none;

}

.info li a{
    display: block;
    padding: 10%;
    border-bottom: dotted 2px #ddd;
    color: #000;
    font-size: 20px;
    text-decoration: none;

}

.info li a:hover{
    background-color: #eee;

}

.info time{
    font-size: 15px;
    margin-right: 10px;
    color: #888;
    font-weight: bold;

}

/* index-今月のピックアップ */
.pickup img{
    border-radius: 25px;
    width: 100%;

}

.pickup-boxA,.pickup-boxB{
    font-size: 15px;
    display: flex;
    justify-content: space-between;

}

.pickup-boxA a,.pickup-boxB a{
    color: #000;
    text-decoration: none;

}

.pickup-boxA a:hover,.pickup-boxB a:hover{
    opacity: 0.8;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}

.pickup-box1,.pickup-box2,.pickup-box3,.pickup-box4,.pickup-box5,.pickup-box6{
    width: 32%;
    margin-bottom: 20px;

}

/* store */
.store img{
    border-radius: 25px;
    width: 100%;

}

.store-boxA,.store-boxB{
    display: flex;
    justify-content: space-between;

}

.store-boxA a,.store-boxB a{
    color: #000;
    text-decoration: none;

}

.store-boxA a:hover,.store-boxB a:hover{
    opacity: 0.8;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}

.store-box1,.store-box2,.store-box3,.store-box4,.store-box5,.store-box6{
    width: 32%;
    margin-bottom: 20px;

}

/* store-各ページ */
.store-each h1{
    font-size: 25px;

}

.store-each h2{
    display: block;
    font-size: 18px;
    border-bottom: 1px solid #333;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;

}

.store-each img{
    border-radius: 25px;
    margin-bottom: 20px;

}

.store-image{
    text-align: center;
    width: 100%;
    object-fit: cover;

}

.store-image img{
    width: 100%;

}

.store-info{
    margin: 0;
    padding: 0;

}

.store-info table{
    text-align: left;
    margin-top: 40px;
    margin-bottom: 20px;

}

.store-info th{
    padding: 0 10px 30px 10px;

}

.store-info td{
    padding: 0 0 30px 10px;

}

.store-image-1 img{
    border-radius: 25px;
    width: 40%;
    float: right;

}

.store-pickup{
    float: right;
    width:58%;
    word-wrap:break-word;

}

.store-pickup:after{
    clear: both;

}

.store-pickupA img{
    width: 40%;

}

/* contact */
.contact-title{
    text-align: center;

}

.contact-title p{
    padding: 0 20px 0 0;

}

.contact-form{
    text-align: center;
}

.contact-form p{
    margin-top: 50px;
    padding: 0;

}

.contact-form span{
    color: red;

}

input{
    width: 600px;
    height: 30px;

}

textarea{
    width: 600px;
    height: 120px;

}

.sendbtn {
    font-size: 14px;
    width: 100px;
    padding: ;
    background: #000;
    color: #fff;
    border-radius: 25px;
    border: none;
    cursor: pointer;

}

/* access */
iframe{
    display: block;
    margin-left: auto;
    margin-right: auto;

}


/* ----------------------レスポンシブ---------------------- */

/* -----------1190px以上----------- */
@media(min-width: 1190px){
    body{
        width: 1140px;
        margin: 0 auto;

    }

}


/* -----------960px〜1189px----------- */
@media(min-width: 960px)and
(max-width: 1189px){
    body{
        width: 960px;
        margin: 0 auto;

    }

}

/* -----------959px〜768px以下----------- */
@media(min-width: 768px)and
(max-width: 959px){
    body{
        width: 768px;
        margin: 0 auto;
    }

    /* store-各ページ */
    .store-each h1{
        font-size: 25px;

    }

    .store-each h2{
        display: block;
        font-size: 18px;
        border-bottom: 1px solid #333;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;

    }

    .store-each img{
        border-radius: 25px;
        margin-bottom: 20px;

    }

    .store-image{
        text-align: center;
        width: 100%;
        object-fit: cover;

    }

    .store-image img{
        width: 100%;

    }

    .store-info{
        margin: 0;
        padding: 0;

    }

    .store-info table{
        text-align: left;
        margin-top: 40px;
        margin-bottom: 20px;

    }

    .store-info th{
        padding: 0 10px 30px 10px;

    }

    .store-info td{
        padding: 0 0 30px 10px;

    }

    .store-image-1 img{
        border-radius: 25px;
        width: 40%;
        float: right;

    }

    .store-pickup{
        float: right;
        width:58%;
        word-wrap:break-word;
    }

    .store-pickup:after{
        clear: both;

    }

    .store-pickupA img{
        width: 40%;

    }

}


/* -----------600〜767px----------- */
@media(min-width: 600px)and
(max-width: 767px){
    body{
        width: 580px;
        margin: 0 auto;
    }


    /* index-今月のピックアップ */
    .pickup-boxA,.pickup-boxB{
        display: block;

    }

    .pickup-box1,.pickup-box2,.pickup-box3,.pickup-box4,.pickup-box5,.pickup-box6{
        margin: 0 auto 20px auto;
        width: 80%;

    }

    /* store */
    .store-boxA,.store-boxB{
        display: block;

    }

    .store-box1,.store-box2,.store-box3,.store-box4,.store-box5,.store-box6{
        width: 80%;
        margin: 20px auto;

    }

}


/* -----------599px以下----------- */
@media(max-width: 599px){
    body{
        width: 320px;
        margin: 0 auto;

    }


    .main-catch1 h1{
        font-size: 100%;

    }

    .main-catch1 p{
        font-size: 70%;

    }


    /* index-今月のピックアップ */
    .pickup-boxA,.pickup-boxB{
        display: block;

    }

    .pickup-box1,.pickup-box2,.pickup-box3,.pickup-box4,.pickup-box5,.pickup-box6{
        margin-bottom: 20px;
        width: 100%;

    }

    /* store */
    .store-boxA,.store-boxB{
        display: block;

    }

    .store-box1,.store-box2,.store-box3,.store-box4,.store-box5,.store-box6{
        width: 100%;

    }

    /* store-各ページ */
    .store-image-1 img{
      float: none;
      width: 100%;

    }

    .store-info table{
      margin-top: 20px;
      font-size: 12px;

    }

    .store-pickupA img{
      width: 100%;

    }

    .store-pickup{
      float: none;
      width: 100%;
      font-size: 12px;

    }

    input{
      width: 320px;
      height: 30px;

    }

    textarea{
      width: 320px;
      height: 120px;

    }

    iframe{
      width: 320px;
      height: 320px;

    }
}

/* -----------960px以上----------- */
@media(min-width: 960px){
   .boxa{
        width: 260px;
        height: 100%;
        display: block;
        position: fixed;
        z-index: 9999;
        text-align: center;

    }

    .boxb{
        margin: 20px 5px 20px 0;

    }

    .boxb, .boxc{
        margin-left: auto;
        margin-right: auto;
        padding-left: 260px;

    }


    /* トグルボタン */
    #menubtn{
        display: none;
    }

    /* ナビゲーション */
    #menu{
        display: block !important;

    }

    .menu ul{
        margin: 0;
        padding: 0;
        list-style: none;

    }

    .menu li a{
        display: inline-block;
        position: relative;
        color: #000;
        font-size: 15px;
        text-decoration: none;
        margin-bottom: 20px;

    }

    .menu li a::after{
        position: absolute;
        bottom: -8px;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #333;
        opacity: 0;
        visibility: hidden;
        transition: .3s;

    }

    .menu li a:hover::after{
        bottom: -4px;
        opacity: 1;
        visibility: visible;

    }

    .subnav-2{
    display: none;
    }

    /* snsシェアボタン */
    .share{

    }

    .share ul{
        margin: 0 0 0 23px;
        padding: 0;
        list-style: none;

    }

    .share li a{
        display: block;
        padding: 10px 5px;
        color: #000;
        font-size: 35px;
        text-decoration: none;

    }

    .share li a:hover{
        opacity: 0.5;

    }

    .share li::after{
        content: "";
        display: block;
        clear: both;

    }

    .share li{
        float: left;
        margin-left: 20px;

    }

    /* サブナビゲーション */
    .subnav ul{
        margin: 0;
        padding: 0;
        list-style: none;

    }

    .subnav li a{
        display: block;
        padding: 5px;
        margin-left: 15px;
        color: #000;
        font-size: 14px;
        text-decoration: none;

    }

    .subnav li a:hover{
        opacity: 0.5;

    }

    .subnav ul:after{
        content: "";
        display: block;
        clear: both;

    }

    .subnav li{
        float: right;
        width: auto;

    }

    /* store-各ページ */
    .store-each h1{
        font-size: 25px;

    }

    .store-each h2{
        display: block;
        font-size: 18px;
        border-bottom: 1px solid #333;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;

    }

    .store-each img{
        border-radius: 25px;
        margin-bottom: 20px;

    }

    .store-image{
        text-align: center;
        width: 100%;
        object-fit: cover;

    }

    .store-image img{
        width: 100%;

    }

    .store-info{
        margin: 0;
        padding: 0;

    }

    .store-info table{
        text-align: left;
        margin-top: 40px;
        margin-bottom: 20px;

    }

    .store-info th{
        padding: 0 10px 30px 10px;

    }

    .store-info td{
        padding: 0 0 30px 10px;

    }

    .store-image-1 img{
        border-radius: 25px;
        width: 40%;
        float: right;

    }

    .store-pickup{
        float: right;
        width:58%;
        word-wrap:break-word;
    }

    .store-pickup:after{
        clear: both;

    }

    .store-pickupA img{
        width: 40%;

    }


}

/* -----------959px以下----------- */
@media(max-width: 959px){
    .boxa{
        text-align: center;

    }

    /* ナビゲーション */
    #menu{
        display: none;
        position: fixed;
        z-index: 10001;
        width: 100%;
        height: 100%;
        background-color: rgba(251,250,245,0.9);
        top: 0;
        left: 0;

    }

    .menu ul{
        margin: 0;
        padding: 0;
        list-style: none;

    }

    .menu li a{
        display: inline-block;
        position: relative;
        color: #000;
        font-size: 15px;
        text-decoration: none;
        margin-bottom: 20px;

    }

    .menu li a::after{
        position: absolute;
        bottom: -8px;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #333;
        opacity: 0;
        visibility: hidden;
        transition: .3s;

    }

    .menu li a:hover::after{
        bottom: -4px;
        opacity: 1;
        visibility: visible;

    }

    /* トグルボタン */
    #menubtn{
        top: 1%;
        right: 1%;
        background-color: #c0c0c0;
        position: fixed;
        border-style: none;
        padding: 20px;
        z-index: 10002;
        outline: none;
        border-radius: 10%;
        cursor: pointer;;
    }

    #menubtn:hover{
        background-color: #dcdcdc;
        transition: .5s;

    }

    #menubtn i{
        color: #fff;
        font-size: 18px;

    }

    #menubtn span{
        display: inline-block;
        text-indent: -9999px;

    }


    /* snsシェアボタン */
    .share{
        display: none;

    }

    .share ul{
        margin: 0 0 0 40px;
        padding: 0;
        list-style: none;

    }

    .share li a{
        display: block;
        padding: 10px 5px;
        color: #000;
        font-size: 25px;
        text-decoration: none;

    }

    .share li a:hover{
        opacity: 0.5;

    }

    .share li::after{
        content: "";
        display: block;
        clear: both;

    }

    .share li{
        float: left;
        margin-left: 20px;

    }

    .subnav{
    display: none;

    }

}