@media screen and (max-width:1024px){
    body {
	font-size: -webkit-calc(1.8rem + 2 * (100vw - 320px) / (960 - 320));
	font-size: calc(1.2rem + 2 * (100vw - 320px) / (960 - 320));
}
    img {
	max-width: 100%;
	height: auto !important;
}
    input[type="submit"], input[type="button"], input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="datetime"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], input[type="number"], textarea {
	-webkit-appearance: none;
	border-radius: 0;
}
    input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="datetime"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], input[type="number"], input[type="range"], textarea {
	width: 100%;
	margin: 0;
	padding: 5px;
}

.pc_on{
    display: none;
}
.sp_on{
    display: block;
}

.sp_none {
	display: none!important;
}

/*header*/
    header{
        height: 60px;
        padding: 10px;
        justify-content: center;
        position: relative;
    }
    #hdr{
        padding: 10px 0;
    }
    
    #head_space{
        height: 0;
    }
/*ヘッダーまわりはサイトに合わせて調整してください*/

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
    
    
    /**/
    .cnt{margin:0 10px 40px;}
    .bnr2 ul li, .bnr3 ul li, .bnr4 ul li, .bnr5 ul li{margin-bottom: 10px;}
    .ribbon1,.ribbon2{margin-bottom: 1em;}
    .bnr4 ul li,.bnr5 ul li{width: 32%;}
    .bnr2 .lay2 .right{padding: 0;}
    
    /*lay1*/
    .lay1 .left,.lay1 .right{width: 100%;}
    .lay1 .right{padding: 1em;}
    
    /*lay2*/
    .lay2_wrp .bnr4 ul li,.lay2_wrp .bnr5 ul li{width: 49%;}
    .lay2_wrp .lay2 .left,.lay2_wrp .lay2 .right{width: 100%;}
    .lay2_wrp .lay2 .balloon3{font-size: 1em; border-radius: 10px;}
    .bnr4 .lay2 .right{padding: 0 10px;}
    .lay2_wrp .icon_red{display: block; margin: 0 auto 0; max-width: 100px;}
    
    .lay2_wrp .icon_red{display: block; margin: 0 auto 0; max-width: 100px;}
    .lay2{border: 10px solid #f1f1f1;}
    .ttl{font-size: 1em;}

    .ribbon1 {
        display: inline-block;
        position: relative;
        height: 50px;/*リボンの高さ*/
        line-height: 50px;/*リボンの高さ*/
        text-align: center;
        padding: 0 30px;/*横の大きさ*/
        font-size: 18px;/*文字の大きさ*/
        box-sizing: border-box;
    }

    .ribbon1:before, .ribbon1:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        z-index: 1;
    }

    .ribbon1:before {
        top: 0;
        left: 0;
        border-width: 25px 0px 25px 15px;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
    }

    .ribbon1:after {
        top: 0;
        right: 0;
        border-width: 25px 15px 25px 0px;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
    }

    .ribbon2 {
        display: inline-block;
        position: relative;
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 7px 0;
        font-size: 1em;/*フォントサイズ*/
        box-sizing: border-box;
    }

    .ribbon2 p {
        margin: 0;
        padding: 0 1em;
        border-top: dashed 1px #FFF;/*上の破線*/
        border-bottom: dashed 1px #FFF;/*下の破線*/
        line-height: 25px;
    }

    .ribbon2:before, .ribbon2:after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        z-index: 1;
    }

    .ribbon2:before {
        /*左端の山形*/
        top: 0;
        left: 0;
        border-width: 20px 0px 20px 10px;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
    }

    .ribbon2:after {
        /*右端の山形*/
        top: 0;
        right: 0;
        border-width: 20px 10px 20px 0px;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
    }

/*menu*/
    
    .menu_circle ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .menu_circle ul li{
        width: 20%;
        border-right: 1px #fff solid;
        margin-bottom: 0;
    }
    
    .menu_circle ul li:last-child{
        border-right:none;
    }
    
    .menu_circle{
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 9999;
        top:auto;
        right: auto;
    }
    
    .menu_btn::after{
        display: none;
    }
    
    .menu_btn {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        width: 100%;
        height: auto;
        border-radius: 0;
        text-align: center;
        overflow: hidden;
        transition: .4s!important;
        padding: 5px;
        font-size: 1em;
    }
    
    #page_top{
        display: none!important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .bg_g{
        padding: 1em;
    }

    .bg_g ul li{
        padding: 0.5em;
    }
    
    .content{
        padding: 65px 0 50px;
    }
    
    .slick-dots{
        bottom: -40px!important;
    }
    
    #sns{
        position: absolute;
        top:25%;
        right:10px;
    }
    #slide{
        height: 1000px;
    }
    #slidebox{
        width: 70%;
        height: 350px;
        left: 0;
        right: 0;
        top:0;
        bottom: -50%;
        margin: auto;
    }
    .slick-slide img{
        width: 100%;
        height: auto;
    }
    
    .slider{
        width: 100%;
    }
    
    .slide_img{
        margin: 0!important;
    }
    
    .mypattern .slick-slide:not(.slick-center) {
    opacity: 1;
}
    .main_wrp,.wrp_100{padding: 50px 10px;}
    #hdr_list,#s-form{display: none!important;}
    #logo{height: 30px!important;}
    .item_inr,#news_l,#news_r,.main_wrp,#ftr_inr{width: 100%;}
    #news .item_inr,#news ul,#item_box ul,.tab_panel ol{flex-wrap: wrap;}
    #news ul li{width: 100%;}
    #news_r{height: 150px;}
    #news,.wrp_100{padding: 20px 10px;}
    #item_box ul{justify-content: center;}
    #item_box ul li{
        width: 45%;
        margin: 5px;
        height: auto;
}
    #item_box{padding: 50px 20px;}
    #lineup ul li{width: 33%; /*height: 450px;*/ padding: 10px;}
    #lineup ul li .btn{bottom: 20px;}
    .tab_panel ol li{margin-bottom: 10px;}

    .slick-dots li{margin: 0 8px!important;}
    
/*footer*/
    #info ul li{width: 49%; margin-bottom: 20px;}
    #ftr_inr img{width: 180px; height: auto;}
    footer{margin-top: 50px; padding: 50px 0px;}

}/* @media screen and (max-width:1024px) */

@media screen and (max-width:767px){
    .mrgnb1{margin-bottom: 1em;}
    #bnr ul li{width: 100%;}
    .bnr_small li{width: 48%!important;}
    #lineup ul li{width: 50%; /*height: 420px;*/}
    .tab_panel ol li{width: 49%;}
    #itemlist ul{width: 100%;flex-wrap: wrap;}
    #itemlist ul li{width: 100%;}
    .icon_red{width: 80px;}
    /*.menu_btn{width: 100px; height: 100px;}*/
    .timebox1{flex-wrap: wrap;}
    .timebox1 div{text-align: center;}
    .timebox1 div:last-child{width: 100%;}
    .timebox1 div:first-child{display: block; width: 100%;}
    .bnr3 .lay2 .right{padding: 0 10px;}
    .bnr3 ul li{width: 49%;}
    .price{text-align: center;}


/*itemlist*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #f1f1f1;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

.cssacc:checked + label:before {
    content: '\f078';
}

.accbox label:before {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 8px;
}

.accbox label:hover {
    background :#f1f1f1;
}

    .accwrp{
        width: 100%;
        margin-bottom: 10px;
    }

/*footer*/
    #info ul li{width: 100%;}
    
    
    /*セールページ用*/
    .sale_bnr5 ul li{
        width: 48%;
    }
    
    .kanban{padding-top: 50px;}

}/* @media screen and (max-width:767px) */