@charset "utf-8";
/* CSS Document */
@import url("https://use.typekit.net/svd5rku.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

* { margin: 0; padding: 0; }
html { height: 100%; }
body { 
   background:url('../img/background.png');
   font-family: 'Noto Serif JP', sans-serif;
   overflow-x:hidden;
}
hr { display: none; }
ul { list-style: none; }
section, nav, article, footer { display: block; }
img { vertical-align: bottom; }
b{
    font-weight:bold;
}

/*フォント設定
----------------------------------------------*/
.font_01{
   font-family: kinuta-maruminold-stdn, serif;
   font-weight: 400;
}
.font_02{
   font-family: kinuta-maruminold-stdn, serif;
   font-weight: 700;
}
.fs1{
    font-size:1vw;
}
.fs1_5{
    font-size:1.5vw;
}
.fs2{
    font-size:2vw;
}
.fs2_5{
    font-size:2.5vw;
}
.fs3{
    font-size:3vw;
}
.fs3_5{
    font-size:3.5vw;
}
.fs4{
    font-size:4vw;
}
.fs4_5{
    font-size:4.5vw;
}
.fs5{
    font-size:5vw;
}
.fs1{
    line-height:1vw;
}
.lh1_5{
    line-height:1.5vw;
}
.lh2{
    line-height:2vw;
}
.lh2_5{
    line-height:2.5vw;
}
.lh3{
    line-height:3vw;
}
.fs3_5{
    line-height:3.5vw;
}
.lh4{
    line-height:4vw;
}
.lh4_5{
    line-height:4.5vw;
}
.lh5{
    line-height:5vw;
}


/*リンク設定
----------------------------------------------*/
a {	color: #FFF; transition: 0.5s; outline: none; }
a:hover { color: #333; }
a img:hover { opacity: 0.5; transition: 0.5s; }
a.goodsLink { color: #F39; }

/*ページ設定
----------------------------------------------*/

header{
    max-width:1366px;
    margin:auto;
    height:2341px;
    background:url('../img/main.jpg');
    background-repeat:no-repeat;
    background-size:100%;
    overflow:hidden;
}
#title{
    max-width:1176px;
    margin:auto;
    height:300px;
    background:url('../img/title.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.imgsp{
    display:none;
}
.btn{
    position:relative;
    top:5px;
}
.tena{
    font-size:60%;
}
@media (max-width: 1366px){
    #title{
        max-width:1176px;
        margin:auto;
        height:33vw;
        background:url('../img/title.png');
        background-repeat:no-repeat;
        background-size:100%;
    }
    header{
        height:170vw;
    }
}
/*メニュー設定
----------------------------------------------*/
.modals{
    display:none;
}
.modals_first{
    position:fixed;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:9999;
}
.modals_first .modal_con{
    margin:auto;
    position: absolute;
      top: 50%;
      left: 40%;
    transform: translate(-35%,-50%);
}
.modals_first .popup_first img{
    width:100%;
}
.modals_first .close{
    position:fixed;
    right:-50px;
    top:-100px;
    width:5vw;
}
.modals_first .close img{
    width:100%;
}
.modal{
    display: flex;
    position:fixed;
    justify-content: center;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:9999;
}
.modal .message_frame{
    position:fixed;
    opacity:1;
    top:20%;
}
.modal .close{
    position:fixed;
    top:8%;
    right:10%;
    width:60px;
}
.modal .close img{
    width:100%;
}
.caution3{
    font-size:15px;
    font-weight: 700;
}
.gototop{
    position:fixed;
    z-index:100;
    bottom:5vw;
    right:5vw;
    width:100px;
}
.gototop img{
    width:100%;
}
#title .menu{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding-top:235px;
}
#title .menu .m01{
    width:250px;
    height:58px;
    background:url('../img/menu/menu_01_off.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m01:hover{
    background:url('../img/menu/menu_01_on.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m02{
    width:100px;
    height:38px;
    background:url('../img/menu/menu_02.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m03{
    width:392px;
    height:57px;
    background:url('../img/menu/menu_03_off.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m03:hover{
    background:url('../img/menu/menu_03_on.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m04{
    width:100px;
    height:38px;
    background:url('../img/menu/menu_04.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m05{
    width:219px;
    height:57px;
    background:url('../img/menu/menu_05_off.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m05:hover{
    background:url('../img/menu/menu_05_on.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m06{
    width:250px;
    height:57px;
    background:url('../img/menu/menu_06_off.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m06:hover{
    background:url('../img/menu/menu_06_on.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m07{
    width:400px;
    height:57px;
    background:url('../img/menu/menu_07_off.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m07:hover{
    background:url('../img/menu/menu_07_on.png');
    background-repeat:no-repeat;
    background-size:100%;
}
#title .menu .m01{
    cursor:pointer;
}
#title .menu .m03{
    cursor:pointer;
}
#title .menu .m05{
    cursor:pointer;
}
#title .menu .m06{
    cursor:pointer;
}
#title .menu .m07{
    cursor:pointer;
}
@media (max-width: 1176px){
    #title .menu{
        padding-top:19.5vw;
    }
    #title .menu .m01{
        width:21vw;
        height:5vw;
    }
    #title .menu .m02{
        width:5vw;
        height:3.5vw;
    }
    #title .menu .m03{
        width:34vw;
        height:5vw;
    }
    #title .menu .m04{
        width:5vw;
        height:3.5vw;
    }
    #title .menu .m05{
        width:19vw;
        height:5vw;
    }
    #title .menu .m06{
        width:21vw;
        height:5vw;
    }
    #title .menu .m07{
        width:34vw;
        height:5vw;
    }

}
/*メッセージ
----------------------------------------------*/
.message_btn{
    position:relative;
    width:400px;
    height:95px;
    background:url('../img/message_btn.png');
    background-repeat:no-repeat;
    background-size:100%;
    top:1600px;
    left:100px;
    z-index:11;
    cursor:pointer;
}
.anim{
      animation-name: move;
      animation-duration: 2s;
      animation-fill-mode: forwards;
}
.anim2{
      animation-name: move2;
      animation-duration: 4s;
      animation-fill-mode: forwards;
}
@keyframes move {
  0% {
    top: 230px; /* 始点（開始位置）を指定 */
  }
  100% {
    top: -10px; /* 終点を指定 */
  }
}
@keyframes move2 {
  0% {
    opacity: 0; /* 始点（開始位置）を指定 */
  }
  100% {
    opacity: 1; /* 終点を指定 */
  }
}
.message_frame{
    opacity:0;
}
.message_area_up{
    max-width:700px;
}
.message_area_up img{
    width:100%;
}
.message_area_down{
    background:url('../img/message_area_down.png');
    background-repeat:no-repeat;
    background-size:100%;
    height:19px;
    max-width:700px;
}
.message_area_down img{
    width:100%;
}
.comment{
    padding:20px;
}
.message_area_back{
    width:1000px;
    height:400px;
    background:url('../img/message_back.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    font-size:30px;
    line-height:55px;
    padding:50px 20px 0 20px;
}
.align_right{
    text-align:right;
}
@media (max-width: 1366px){
    .message_btn{
       top:100vw;
       left:8vw;
    }
    .message_area_up{
        max-width:calc(60vw + 40px);
    }
    .message_area_down{
        max-width:calc(60vw + 40px);
    }
.message_area_back{
    width:70vw;
    height:30vw;
    background:url('../img/message_back.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    font-size:2vw;
    line-height:4vw;
    padding:2vw 20px 0 20px;
}

}
@media (max-width: 1176px){
    .message_area_up{
        max-width:calc(60vw + 20px);
    }
    .message_area_down{
        max-width:calc(60vw + 20px);
    }
}
@media (max-width: 1000px){
    .message_btn{
        max-width:calc(40vw + 20px);
    }
    .message_area{
        position:relative;
        top:75vw;
        left:8vw;
    }

    .anim{
          animation-name: move11;
          animation-duration: 2s;
          animation-fill-mode: forwards;
    }
    .anim2{
          animation-name: move22;
          animation-duration: 4s;
          animation-fill-mode: forwards;
    }
    @keyframes move11 {
      0% {
        top: 22vw; /* 始点（開始位置）を指定 */
      }
      100% {
        top: 1vw; /* 終点を指定 */
      }
    }
    @keyframes move22 {
      0% {
        opacity: 0; /* 始点（開始位置）を指定 */
      }
      100% {
        opacity: 1; /* 終点を指定 */
      }
    }
}
@media (max-width: 499px){
    .message_btn{
       top:100vw;
       left:8vw;
    }
    .message_area{
        position:relative;
        top:55vw;
        left:8vw;
    }
    .message_area_up{
        max-width:calc(45vw + 20px);
    }
    .message_area_down{
        max-width:calc(45vw + 20px);
    }
}
.limit{
    width:100%;
    text-align:center;
    padding:20px 0;
}
.sec1 .cat1{
    margin-bottom:50px;
}
.sec1 .title{
    background:url('../img/sec1_title.png');
    background-repeat:no-repeat;
    background-size:100%;
    max-width:1366px;
    height:140px;
    margin:auto;
}
.sec1 .cat1 .title{
    background:url('../img/sec1_cat1_title.png');
    background-repeat:no-repeat;
    background-size:100%;
    max-width:1366px;
    height:90px;
    margin:auto;
}
.sec1 .cat1 ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.sec1 .cat1 li{
    width:521px;
    height:521px;
    margin:5px;
    text-align:center;
    padding-top:20px;
}
.sec1 .cat1 .item_01{
    background:url('../img/goods/goods_01.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat1 .item_02{
    background:url('../img/goods/goods_02.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat1 li img{
    width:470px;
}
.sec1 .cat1 .btn{
    position:relative;
    top:456px;
}
.sec1 .cat2{
    text-align:center;
}
.sec1 .cat2 .title{
    background:url('../img/sec1_cat2_title.png');
    background-repeat:no-repeat;
    background-size:100%;
    max-width:1366px;
    height:90px;
    margin:auto;
}
.sec1 .cat2 ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin:auto;
}
.sec1 .cat2 .item_01{
    background:url('../img/goods/goods_03.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat2 .item_02{
    background:url('../img/goods/goods_04.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat2 .item_03{
    background:url('../img/goods/goods_05.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat2 .item_04{
    background:url('../img/goods/goods_06.png?0822');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat2 .item_05{
    background:url('../img/goods/goods_07.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat2 .item_06{
    background:url('../img/goods/goods_08.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat2 .item_07{
    background:url('../img/goods/goods_09.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat2 .item_08{
    background:url('../img/goods/goods_10.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat2 li{
    width:300px;
    height:340px;
    margin:5px;
    text-align:center;
    padding-top:20px;
}

.sec1 .cat2 .name .big{
    font-size:24px;
}
.sec1 .cat2 li img{
    width:260px;
}
.sec1 .cat2 .btn{
    position:relative;
    top:255px;
}


.shop{
    width:800px;
    margin:auto;
}
.shop img{
    width:100%;
}

.sec1 .cat3 .title{
    background:url('../img/sec1_cat3_title.png');
    background-repeat:no-repeat;
    background-size:100%;
    max-width:1366px;
    height:100px;
    margin:auto;
}
.sec1 .cat3 ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.sec1 .cat3 .item_01{
    background:url('../img/goods/tokuten.png');
    background-repeat:no-repeat;
    background-size:100%;
}
.sec1 .cat3 li{
    width:800px;
    height:750px;
    margin:20px;
}
.sec1 .cat3 li img{
    width:42vw;
    padding:2vw 3vw 0 3vw;
}
.sec1 .cat3 .name{
    text-align:left;
    color:#595750;
    font-weight:bold;
    font-size:21px;
    line-height:25px;
    margin-top:370px;
    padding:0 50px;
}
.sec1 .cat3 .name_small{
    font-size:21px;
}
.sec1 .cat3 .name_ssmall{
    font-size:12px;
    line-height:13px;
}


@media (max-width: 1350px){
    .shop{
        width:60vw;
            margin:30px auto 0 auto;
    }

}

.bar{
    width:100%;
}
.bar img{
    width:100%;
}
.sec2 .title{
    background:url('../img/sec2_title.png');
    background-repeat:no-repeat;
    background-size:100%;
    max-width:1366px;
    height:140px;
    margin:auto;
}
.sec2 .about{
    background:url('../img/sec2/sec2_back.png');
    background-repeat:no-repeat;
    background-size:100%;
    max-width:1186px;
    height:680px;
    margin:auto;
    font-size:30px;
    line-height:60px;
    color:#595750;
    text-align:center;
    padding-top:100px;
}

.sec3{
    overflow:hidden;
}
.sec3 .title{
    background:url('../img/sec3_title.png');
    background-repeat:no-repeat;
    background-size:100%;
    max-width:1366px;
    height:140px;
    margin:auto;
}
.sec3 ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    max-width:1366px;
    margin:auto;
}
.sec3_2{
    font-size:25px;
    line-height:35px;
    text-align:center;
    color:#595750;
}
.sec3_2 .title{
    background:url('../img/sec3_2_title.png');
    background-repeat:no-repeat;
    background-size:100%;
    max-width:1366px;
    height:140px;
    margin:20px auto;
}
.sec3_2 ul{
    max-width:1366px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    max-width:1366px;
    margin:auto;
    flex-wrap:wrap;
}
.sec3_2 li{
    width:160px;
    margin:33px;
}
.sec3_2 li img{
    width:100%;
}
@media (max-width: 1366px){
    .c1 img{
        width:20.5vw
    }
    .c2 img{
        width:20.2vw
    }
    .c3 img{
        width:19.6vw
    }
    .c4 img{
        width:28vw
    }
    .c5 img{
        width:20.5vw
    }
    .c6 img{
        width:21.4vw
    }
    .c7 img{
        width:24.5vw
    }
    .c8 img{
        width:24.5vw
    }
    .c9 img{
        width:23.5vw
    }
    .c10 img{
        width:33vw
    }
}
.sec4{
    overflow:hidden;
}
.sec4 ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    max-width:1366px;
    margin:auto;
}
.sec4 li{
    margin:3px;
}
.limit_s img{
    width:490px;
}
.sec4 .cafe{
    width:500px;
}
.sec4 .cafe img{
    width:100%;
}

@media (max-width: 1366px){
    .sec4 li{
        margin:3px;
        width:25%;
    }
    .sec4 img{
        margin:3px;
        width:100%;
    }
    .sec4 .cafe{
        width:40vw;
    }
    .sec4 .cafe img{
        width:100%;
    }
}
footer {
    font-size:12px;
     text-align:center;
}
footer .mark{
    width:100%;
    background:#221e47;
    color:#fff;
    padding:3px;
    text-align:center;
    font-size:12px;
}

@media (max-width: 1250px){
    .modal .close{
        position:fixed;
        top:10%;
        right:10vw;
        width:40px;
    }
    .sec2 .about{
        font-size:2.5vw;
        line-height:5vw;
        padding-top:8.5vw;
        margin-top:10px;
        height:60vw;
    }
    .limit img{
        width:61vw;
    }
    .limit_s img{
        width:43vw;
    }
    .sec1 .cat1{
        margin-bottom:5vw;
    }
   .sec1 .cat1 li{
        width:42vw;
        height:42vw;
        margin:5px;
        text-align:center;
        padding-top:20px;
    }
    .sec1 .cat2 li{
        width:24vw;
        height:24vw;
        margin:5px;
        text-align:center;
        padding-top:20px;
    }
    .sec1 .cat1 .btn{
        position:relative;
        top:37vw;
    }
    .sec1 .cat2 .btn{
        position:relative;
        top:20vw;
    }

    .sec1 .cat3 li{
        width:65vw;
        height:59vw;
        margin:20px;
    }
    .sec1 .cat3 .name{
        text-align:left;
        color:#595750;
        font-weight:bold;
        font-size:2vw;
        line-height:2vw;
        margin-top:30vw;
        padding:0 50px;
    }
    .sec1 .cat3 .name_small{
        font-size:1.2vw;
    }
    .sec1 .cat3 .name_ssmall{
        font-size:1vw;
        line-height:1vw;
    }

    .sec1 .cat1 li img{
        width:38vw;
    }
/*     .sec1 .cat1 .btn{
        position:relative;
        bottom:1vw;
        margin-top:-0.5vw;
    } */
    .sec1 .cat2 li img{
        width:21vw;
    }
    .sec1 .cat2 .btn{
        position:relative;
        bottom:1vw;
    }
    .sec1 .cat3 .title{
        background:url('../img/sec1_cat3_title.png');
        background-repeat:no-repeat;
        background-size:100%;
        max-width:1366px;
        height:8vw;
        margin:auto;
    }
    .modal .close{
        position:fixed;
        top:5%;
        right:10vw;
        width:50px;
    }

}
@media (max-width: 1000px){
    .sec1 .cat1 .title{
        background:url('../img/sec1_cat1_title.png');
        background-repeat:no-repeat;
        background-size:100%;
        max-width:1366px;
        height:9vw;
        margin:auto;
    }
    .sec1 .cat2 .title{
        background:url('../img/sec1_cat2_title.png');
        background-repeat:no-repeat;
        background-size:100%;
        max-width:1366px;
        height:9vw;
        margin:auto;
    }
    .sec1 .cat3 .title{
        background:url('../img/sec1_cat3_title.png');
        background-repeat:no-repeat;
        background-size:100%;
        max-width:1366px;
        height:9vw;
        margin:auto;
    }
}
@media (max-width: 920px){
    .sec1 .cat1 li img{
        width:38vw;
    }
    .sec1 .cat1 .btn{
        position:relative;
        bottom:1vw;
        margin-top:-1vw;
    }
    .sec1 .cat2 li img{
        width:21vw;
    }
    .sec1 .cat2 .btn{
        position:relative;
        bottom:1vw;
        margin-top:-1.6vw;
    }
}
/*
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
SP用タグ
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/
@media (max-width: 768px){
    .fs1{
        font-size:2vw;
    }
    .fs1_5{
        font-size:2.5vw;
    }
    .fs2{
        font-size:3vw;
    }
    .fs2_5{
        font-size:3.5vw;
    }
    .fs3{
        font-size:4vw;
    }
    .fs3_5{
        font-size:4.5vw;
    }
    .fs4{
        font-size:5vw;
    }
    .fs4_5{
        font-size:5.5vw;
    }
    .fs5{
        font-size:6vw;
    }
    .fs1{
        line-height:2vw;
    }
    .lh1_5{
        line-height:2.5vw;
    }
    .lh2{
        line-height:3vw;
    }
    .lh2_5{
        line-height:3.5vw;
    }
    .lh3{
        line-height:4vw;
    }
    .fs3_5{
        line-height:4.5vw;
    }
    .lh4{
        line-height:5vw;
    }
    .lh4_5{
        line-height:5.5vw;
    }
    .lh5{
        line-height:6vw;
    }
    .brsp{
        display:none;
    }
    .message_area_up{
        max-width:calc(80vw + 20px);
    }
    .message_area_down{
        max-width:calc(80vw + 20px);
    }
    .tena{
        font-size:2vw;
    }
    .caution3{
        font-size:2vw;
    }
    .message_area_back{
        width:85vw;
        height:30vw;
        background:url('../img/message_back.png');
        background-repeat:no-repeat;
        background-size:100% 100% ;
        font-size:3vw;
        line-height:5vw;
        padding:10vw 20px 20vw 20px
    }
    .message_btn{
       top:100vw;
       left:8vw;
    }
    .modal .message_frame{
        position:fixed;
        opacity:1;
        top:35%;
    }
    .modal .close{
        position:fixed;
        top:28%;
        right:5%;
        width:30px;
    }
    
    
    .modals_first{
        position:fixed;
        justify-content: center;
        align-items: center;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.5);
        z-index:9999;
    }
    .modals_first .modal_con{
        width:100%;
        margin:auto;
        position: absolute;
          top: 50%;
          left: 40%;
        transform: translate(-35%,-50%);
    }
    .modals_first .popup_first {
        width:90%;
    }
    .modals_first .popup_first img{
        width:100%;
    }
    .modals_first .close{
        position:fixed;
        right:7vw;
        top:-9vw;
        width:7vw;
    }
        
    
    .limit img{
        width:80%;
    }
    .limit_s img{
        width:50%;
    }
    .comment{
        padding:5px;
    }
    .imgsp{
        display:block;
    }
    .imgpc{
        display:none;
    }
    .sec1 .cat2 ul{
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        max-width:1366px;
        margin:auto;
    }
    .limit{
        padding:2vw 0;
    }
    .sec1 .title{
        background:url('../img/sec1_title.png');
        background-repeat:no-repeat;
        background-size:100%;
        max-width:1366px;
        height:14vw;
        margin:auto;
    }
    .sec1 .cat1 li{
        width:47%;
        height:50vw;
        margin:0px;
    }
    .sec1 .cat2 li{
        width:47%;
        height:46vw;
        margin:0px;
    }
    .sec1 .cat1 .btn{
        position:relative;
        top:40vw;
    }
    .sec1 .cat2 .btn{
        position:relative;
        top:40vw;
    }
    .sec1 .cat1 li img{
        width:39vw;
    }
    .sec1 .cat2 li img{
        width:39vw;
    }

    .shop{
        width:90%;
        margin:auto;
        margin-top:20px;
    }
    .sec1 .cat3 li{
        width:60vw;
        height:63vw;
        margin:0px;
    }
    .sec1 .cat3 li img{
        width:52vw;
        padding:2vw 3vw 0 3vw;
    }
    
    .sec1 .cat3 .item_01{
        background:url('../img/sec3/sec3_01_back_sp.png');
        background-repeat:no-repeat;
        background-size:100%;
        width:90%;
        height:110vw;
    }
    .sec1 .cat3 .name{
        text-align:left;
        color:#595750;
        font-weight:bold;
        font-size:11px;
        line-height:4vw;
        margin-top:45vw;
        padding:0 10px;
    }
    .sec1 .cat3 .name_small{
        font-size:2vw;
    }
    .sec1 .cat3 .name_ssmall{
        font-size:1.6vw;
        line-height:2vw;
    }
    .sec2{
       height:70vw; 
    }
    .sec2 .about{
        font-size:2.5vw;
        line-height:5vw;
        padding-top:8.5vw;
    }
    .sec2 .title{
        background:url('../img/sec2_title.png');
        background-repeat:no-repeat;
        background-size:100%;
        max-width:1366px;
        height:9vw;
        margin:auto;
    }
    .sec3 .title{
        background:url('../img/sec3_title.png');
        background-repeat:no-repeat;
        background-size:100%;
        max-width:1366px;
        height:9vw;
        margin:auto;
    }
    .sec3_2 .font_01{
        width:80%;
        font-size:4vw;
        line-height:5vw;
        text-align:center;
        color:#595750;
        margin:auto;
    }
    .sec3_2 .title{
        background:url('../img/sec3_2_title.png');
        background-repeat:no-repeat;
        background-size:100%;
        max-width:1366px;
        height:9vw;
        margin:20px auto;
    }
    .sec3_2 ul{
        max-width:1366px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        max-width:1366px;
        margin:auto;
        flex-wrap:wrap;
    }
    .sec3_2 li{
        width:140px;
        margin:10px;
    }
    .sec3_2 li img{
        width:100%;
    }
    .sec3 .u2{
        flex-wrap: wrap;
    }
    .c1 img{
        width:30.5vw
    }
    .c2 img{
        width:30.2vw
    }
    .c3 img{
        width:29.6vw
    }
    .c4 img{
        width:40vw
    }
    .c5 img{
        width:30.5vw
    }
    .c6 img{
        width:31.4vw
    }
    .c7 img{
        width:34.5vw
    }
    .c8 img{
        width:34.5vw
    }
    .c9 img{
        width:33.5vw
    }
    .c10 img{
        width:43vw
    }
    .sec4 li{
        margin:3px;
        width:40%;
    }
    .sec4 img{
        margin:3px;
        width:100%;
    }
    .sec4 .cafe{
        width:60vw;
    }
    .sec4 .cafe img{
        width:100%;
    }

    .anim{
          animation-name: move3;
          animation-duration: 2s;
          animation-fill-mode: forwards;
    }
    .anim2{
          animation-name: move2;
          animation-duration: 4s;
          animation-fill-mode: forwards;
    }
    .gototop{
        position:fixed;
        z-index:100;
        bottom:5vw;
        right:5vw;
        width:15vw;
    }
    .gototop img{
        width:100%;
    }
    footer .mark{
        width:100%;
        background:#221e47;
        color:#fff;
        padding:3px;
        text-align:center;
        font-size:12px;
    }
    footer {
        font-size:7px;
         text-align:center;
    }
    @keyframes move3 {
      0% {
        top: 34vw; /* 始点（開始位置）を指定 */
      }
      100% {
        top: 15vw; /* 終点を指定 */
      }
    }
    #title .menu{
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
}
@media (max-width: 650px){

}
@media (max-width: 570px){

}
@media (max-width: 500px){

}
@media (max-width: 450px){

}
@media (max-width: 380px){

}
@media (max-width: 340px){

}
@media (max-width: 300px){

}