@charset "UTF-8";

/* =====================================================
                        共通の設定 
========================================================*/
*{
    box-sizing: border-box;/* widthとheightの中に、paddingとborderが押し込まれるような形になります */
}
body{
    /*背景カラー #fff */
    margin: 0;
    padding: 0;
}
img{
    width: 100%;/* 親ボックスに対して100% */
}
.wrapper{
   /*  border: 1px solid#000; */
}
.inner{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    
}
.row{
    display: flex;/* 横並び */
    /* border: 1px solid #0f0; */
    padding: 3px;
}
@media screen and ( max-width:639px ) {
    /* 639以下（最大369まで）なら　{}内のcssを読み込む */
    body{
        /* background: #ff0; */
    }
    .row{
        display: block;
    }
       /*  display: block または、flex-direction: columnにする */
        /* flex-direction: column;  */
    
    }

    .content-inner{
        width: 90%;
        margin: 0 auto;
    }

/* ーーーーーーーーーーボタンーーーーーーー */
.btn{
    display: block;
    width: 12em;
    font-size: 20px;
    line-height: 1;
    background: #71AF5F;
    color: #fff;
    padding: .5em 1em;
    margin: 2em auto;
    border-radius: .5em;
    text-align: center;
    text-decoration: none;
}

.btn-arrow::after{
    content:"＞";
    margin-left: .5em;
    
}
.cta-btn{
    position: fixed;/* ブラウザ画面に対して固定する */
    bottom: 16px;/* 下から */
    right: 18px;/* 左から */
    opacity: 0.8;/* 半透明 */
    border-radius: 0;/* 縦書き */
    background: #56e;
    width: 3em;
}
.gotoTop{
    font-size: 16px;
    line-height: 1;
    display: block;
    width: 3em;
    padding: 1em 0;
    background: #000;
    color: #fff;
    border: 1px solid #f00;
    text-align: center;
    text-decoration: none;
    border-radius: 1.5em;/* widthの半分の値 */
    position: fixed;
    right: 80px;
    bottom: 225px;
    opacity: .5;
}

.text-right{
    text-align: right;
}
/* 必須項目 */
.require{
    color: #fff;
    font-weight: bold;
}

/* 表組み */
table{
    border-collapse: collapse;
}
th, td{
    border-top: 1px solid #FD8D2D;
    padding: .5em 1em;
    color: #fff;
}
th{
    width: 25%;
    /* font-weight: bold; */
    background: #FD8D2D;
}
/* trにパッディングはつかない・うまくいかない*/
table tr:last-child th,
table tr:last-child td{   
    border-bottom: 1px solid #FD8D2D;
}

/* 以下のスマホ用の設定 */
@media screen and ( max-width:639px ) {
    th{
        width: 35%;
    }
}

/* ヘッダーの設定 */
.header{
    background:rgba(255,255,255,0.5);
    padding: 5px;
    /* border: 1px solid #f00; */
    border-top: 5px solid #FD8D2D;
    /* opacity: 0.8; */
    position: fixed; /*** ← fixedで固定 ***/
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
.nav-outer{
    /* border: 1px solid #f00; */
    padding: 5px;
    display: flex;    /* 子要素を横並びにする */
    justify-content: space-between/* 子要素を左右に寄せる */;
    
}
.logo-outer{
    width: 180px;
    /* border: 1px solid #0f0; */
    padding: 5px;
}

.icons-outer{
    /* border: 1px solid #00f; */
    width: 300px;
    padding: 5px;
    display: flex;
    justify-content: flex-end;
}
.icon{
    display: block;/* imgタグ･aタグは、displayプロパティのデフォルト値が、「inline」になっているので注意。
    inlineとblock、どちらのモードで使うかよく考えてから設定すること。
     */
    text-decoration: none;/* 文字に装飾を加えるためのプロパティ */
    padding: 0 10px;
    text-align: center;/* text-alignとはテキストの水平方向への配置を指定するプロパティ */
    margin: 3px;
    border-right: 1px solid #9B6000;
}
.icon:last-child{
    border: none;
}
.icon p{
    font-size: 12px;
    color:#9B6000;
    margin: 0;
}

/* フッダーの設定 */
.footer{
    /* 背景カラー#BB412C */
    background: #FD8D2D;
    padding: 42px 1em;
}
.footer a{
    text-decoration: none;/* 文字の装飾のリセット */
    color: #fff8f8;
}

.footer ul{
    list-style: none;
    padding-left: 0%;
    text-align: center;/* 文字の中央揃え */
    padding: 0 0 26px;
    font-size: 0;
}
.footer li{
    display: inline-block;/* 文字の横並び */
    /* border: 1px solid#f00;/* 仮置き */ 
    font-size: 16px;
    
}
.footer li::after{
    content: "｜";
    color: #fff8f8;
}
.footer li:last-child::after{
    content: "";
}

.footer .copy{
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #fff8f8;
    margin: 0;
}
/* 以下のスマホ用の設定 */
@media screen and ( max-width:639px ) {
    
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　全ページのメインの設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.wrapper{
    background-image: url(../images/backimg.svg);
    width: 100%;
    padding-top: 108px;
    margin-top: -108px;
}
.main{
    margin-bottom: 60px;
   /* 仮置き */
}
/* h1{
    display: none;
} */
.content-header{
    /* border: 3px solid #f00; */
    margin-bottom: 60px;
    top: 100px;
    margin-top: 113px;
}
.content-header h1{
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
    padding: 0;         
    line-height: 1;
    color: #204A14;
    /* 　見出しや　一行の場合はこれを入れるとパディングを考える時に楽になる */
}
.content-header .key-visual{
    
    
}
.content-header .key-visual img{
    border-radius: 20px;
    object-fit: cover;
    
}
.content{
    border: 3px solid #F3AE3D;
    border-radius: 15px;/* 角丸 */
    background-color: #FFFEEE;
    margin-bottom: 3em;
}
.content-shop{
    border: 3px solid #F3AE3D;
    border-radius: 15px;/* 角丸 */
    background-color: #fff;
    margin-bottom: 3em;
}

.content h2{
    width: 90%;
    background-color: #71AF5F;
    border-radius: 20px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    color: #fff8f8;
    padding: 16px;
    margin: 26px auto 37px;
}
.content-shop h2{
    width: 90%;
    background-color: #71AF5F;
    border-radius: 20px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    color: #fff8f8;
    padding: 16px;
    margin: 26px auto 37px;
}

/* .item-img{ *//* ﾀﾞﾌﾞｯﾃﾙ */
/*     width: 430px;
    height: 430px; */
    /* background: #000;
    border: 1px solid #F3AE3D; */
    /* border-radius: 20px; *//* 角丸 */
    /* margin: 0 auto 38px; */
/* } */
.item-img img{
    border-radius: 20px;/* 角丸 */
}
/* 以下のスマホ用の設定 */
@media screen and ( max-width:639px ) {
    
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　各ページごとのメイン設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*  ------------------------------------------- 
    home用 index.html
-------------------------------------------  */
.home .new-list{
    width: 90%;
    margin: 0 auto 2em;
    /* border: 2px solid #000; */
}
.home p .new{
    line-height: 1.5;
    margin: 0 0 1em;
}
/* .home .maker{
    display: inline-block;
    background: #aaf;
    border-radius: .2em;
    padding: 3em;
    line-height: 1;
    width: 1.5em;
    text-align: center;
    margin-right: .5em;
} */
.home .btn::after{
    content: ">";
    margin-left: 0.5em;
}
.home .cta-btn::after{
    content: "";
    margin-left: 0em;
}

.home .item{
    width: 30%;
}
.home .recommend .row{
    justify-content: space-evenly;
}
.new-list a{
    text-decoration:underline wavy #71AF5F;
    color: #000;
}
.row .item p a{
    text-decoration: none;
    color: #000;
}
/* 以下のスマホ用の設定 */
@media screen and ( max-width:639px ) {
    .home .item{
        width: 80%;
        margin: 0 auto 3rem;/* 上　左右　下　（ショートハンドプロパティ）*/
    }
}
/*  ------------------------------------------- 
    商品一覧 products.html
------------------------------------------- */
.products .category{/* .productsにしか効かないようになる */
    /* border: 1px solid #000;
    margin: 1em; */
}
.products h3{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
.products .row{
    margin-bottom: 50px;
    column-gap: 0%;/* 真ん中の空き　パーセントにすると親ボックスに合わせてレスポンスする */
    justify-content: center;
}
.products .item{
    width: 30%;
}


.products .name {
    font-size: 16px;
}
.products .name a{
    color: #000;
    text-decoration: none;
}
/* 以下スマホ用の設定 */
@media screen and ( max-width:639px ) {
    .products .item{
        width: 70%;
        margin: 0 auto;
    }
}
/*   ------------------------------------------- 
    商品詳細用 itemXX.html
------------------------------------------ */

.content .item{
    text-align: center;
}
.content .item .item-img{/* ﾀﾞﾌﾞｯﾃﾙ */
    /* width: 430px;　pxだと絶対その数値となってしまう
    height: 430px; */
    /* background: #fff;
    border: 1px solid #F3AE3D;
    border-radius: 20px;/* 角丸 */ 
    margin: 40px auto 38px;
    display: block;/* aタグのdisplayプロパティのデフォルト*/
    margin-bottom: 20px;
}
.content .item p{
    margin: 0;/* 一旦 */
}

.content .item .num{/* 商品コード */
    margin-bottom: 16px;
    font-size: 13px;
}
.content .item .catch{/* ｷｬｯﾁｺﾋﾟｰ */
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.content .item .price{/* 金額 */
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}
.content .item .note{/* 備考 */
    font-size: 8px;
    margin-bottom: 50px;
}


/*  ------------------------------------------- 
    店舗案内 shop.html
------------------------------------------- */
.shoplist .shop{
    margin-bottom: 50px;
}

.shoplist h3{
    font-size: 24px;
    text-align: center;
}
.shoplist .row{
    justify-content: space-between;
}
.shoplist .shop-img{
    width: 45%;
}
.shoplist .shop-data{
    width: 50%;
}
.shoplist .shop-data th{
    background: none;
    color: #BB412C;
    font-weight: normal;
}
.shoplist .shop-data tr:first-child th,
.shoplist .shop-data tr:first-child td{
    border-top: none;
}
.shoplist .shop-data tr:last-child th,
.shoplist .shop-data tr:last-child td{
    border-bottom: none;
}

@media screen and ( max-width:639px ) {
    .shoplist .shop-img{
        width: 100%;
    }
    .shoplist .shop-data{
        width: 100%;
    }
}

/*   ------------------------------------------- 
    お問い合わせ contact.html
-------------------------------------------  */

.content input[type="text"],
.content textarea{
    width: 100%;
    padding: .5em;
    border: 1px solid #F3AE3D;
}
.content select{
    width: 4em;
    padding: .5em;
    border: 1px solid #F3AE3D;
}
.content textarea{
    height: 6em;
}
.content .btn{
    border: none;
}
.content-inner td{
    color: #FD8D2D;
}
/*  ------------------------------------------- 
    個人情報の取り扱いについて privacy.html
-------------------------------------------  */
/* -------------------------------------------
　404エラーページ e404.html
----------------------------------------------- */
.e404 p{
    text-align: center;
}
.e404 a{
    text-decoration: none;
}

.e404 .content{
    padding: 40px 2em 10px;
}
/* -------------------------------------------
　プライバシーポリシー privacy.html
----------------------------------------------- */
.privacy .content {
    margin: 2rem;
}
.privacy .content .content-inner{
    /* margin: 2rem; */
}
.privacy .content .content-inner table{
    margin-bottom: 20px;
}

.privacy .content  tr,.privacy .content  td{
    border-left: 1px solid #FD8D2D;
}

/* -------------------------------------------
　商品詳細 item00.html
----------------------------------------------- */
.width{
    width: 50%;
}
.width-1{
    width: 80%;
}

/* 以下のスマホ用の設定 */
@media screen and ( max-width:639px ) {
    
}
/* 以下のPC用の設定 */
@media screen and ( min-width:640px ) {
    
}

/* ************************************
    jQueryプラグインの設定
************************************ */
/* slickSliderの設定 */
.slick-prev{
    left: 25px;
    z-index: 1;
}
.slick-next{
    right: 25px;
}
/* .icons-outer{
    display: none;
} */
/* Drawer.jsの設定 */
/* ************************************
    PC/スマホ版の切り替え
************************************ */
.sp-nav{
    display: none;
}
.pc-nav{
    display: flex;
}

/* 以下のスマホ用の設定 */
@media screen and ( max-width:639px ) {
    .sp-nav{
        display: block;
    }
    .pc-nav{
        display: none;
    }
}