@charset "UTF-8";
body{
    width: 100vw;
    background-color: #202121;
    /* background-color: rgb(46, 46, 46); */
    font-family: 'Noto Serif JP', serif;
    color: #ffffff;
    text-orientation: upright;
    min-width: 300px;
    overflow-x: hidden;
}

a{
    color: white;
    text-decoration: none;
    letter-spacing: 0.3rem;
}

.variable{
    font-size: clamp(0.75rem, calc(0.25vw + 0.8rem), 1.3rem);
}
p{
    font-size: 0.85rem;
    line-height: 2.0rem;
    letter-spacing: 0.3rem;
}
h2{
    letter-spacing: 0.3rem;
}
img{
    max-width: 100%;
}
/* 縦書き-------------------------------------------------- */
.vertical{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}


/* 横並び */
.flex_sb{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
/* ボタン----------------------------------------------------- */
.button{
    width: 227px;
    height: 47px;
    text-align: center;
    display:block;
    font-size: 0.75rem;
    background-image: url(../img/button.png);
    background-position:top left;
    background-repeat:no-repeat;
    padding-top: 14px;
    margin: 20px;
}



/*==================================================
スライダーのためのcss
===================================*/
/* FVスライダー */
    /* スライダー大きさ調整 */
    .FV-slider-wrapper{
        width: 100%;
        /* padding-bottom: 50px; */
    
    }
    .PCFV-slider {
        position:relative;
        z-index: 1;
        /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    }
    /*　背景画像設定　*/
    
    .slider-item01 {
        background:url(../img/index-fv-pc.png);
    }
    
    .slider-item02 {
        background:url(../img/index-fv-slider1-pc.png);
    }
    
    .slider-item03 {
        background:url(../img/index-fv-slider2-pc.png);
    }
    
    .slider-item04 {
        background:url(../img/index-fv-slider4-pc.png);
    }

    .slider-item05 {
        background:url(../img/index-fv-slider5-pc.jpg);
    }


    .slider-item {
        width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
        /* height:100vh;各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする */
        background-repeat: no-repeat;/*背景画像をリピートしない*/
        background-position: center;/*背景画像の位置を中央に*/
        background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
    }


    .FV-slider{
        width:100%;
        margin:0 auto;
    }
    /* 画像サイズ調整 */
    .FV-slider img{
        width:100vw;
    }
    /* スライダー高さ調整 */
    .FV-slider .slick-slide{
        height:auto!important;
    }
    /* やじるし関連 */
    .FV-slider .slick-arrow{
        z-index:2!important;
    }
    .FV-slider .slick-next{
        right:0!important;
    }
    .FV-slider .slick-prev{
        left:0!important;
    }



    
/* スライダー ---------------------------------------------------------------------*/
    .slider-wrapper{
        width: 100%;
        padding-top: 50px;
        padding-bottom: 25px;
        background-color: #000;
        margin-bottom: 100px;
    }
    /* スライダー大きさ調整 */
    .slider{
        width:100%;
        margin:0 auto;
    }
    /* 画像サイズ調整 */
    .slider img{
        width:100%;
        padding: 0 20px 0 20px;
    }
    /* スライダー高さ調整 */
    .slider .slick-slide{
        height:auto!important;
    }
    /* やじるし関連 */
    .slider .slick-arrow{
        z-index:2!important;
    }
    .slider .slick-next{
        right:23%!important;
    }
    .slider .slick-prev{
        left:23%!important;
    }


    .slick-slide{
        margin-right: 0!important;
        margin-left: 0!important;
    }
    /* やじるしを消す */
    .slick-arrow:before{
    content:""!important;
    }
    /* 矢印を変える */
    .slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
    }

    .slick-next:before{
        background: url(../img/slider_right.png)!important;
        background-size: contain!important;
        
    }

    .slick-prev:before{
        background: url(../img/slider_left.png)!important;
        background-size: contain!important;
    }

    .slick-arrow{
    z-index:2!important;
    width:45px!important;
    height:45px!important;
    }

    .slick-next{
        right: 150px!important;
    }

    .slick-prev{
        left:150px!important;
    }



    .slick-arrow:before{
        opacity:1!important;
    }

    .slick-dots li button:before{
        font-family: 'slick';
        font-size: 10px;
        line-height: 25px;

        position: absolute;
        top: 0;
        left: 0;

        width: 20px;
        height: 20px;

        text-align: center;

        opacity: 0.5;
        color: #647800;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .slick-dots li.slick-active button:before
    {
        opacity: .1 ;
        color: #454f25;

    }

    

/* モーダルウィンドウ -------------------------------------------------------*/
    /*全て共通：hideエリアをはじめは非表示*/
    /* .hide-area{
        display: none;
    } */

    /*全て共通：モーダルのボタンの色を変更したい場合*/
    .modaal-close:after, 
    .modaal-close:before{
        background:#ccc;	
    }

    .modaal-close:focus:after,
    .modaal-close:focus:before,
    .modaal-close:hover:after,
    .modaal-close:hover:before{
        background:#666;
    }

    /*確認を促すモーダル：タイトルの色を変更したい場合*/
    #modaal-title{
        font-size:1.2rem;
        text-align: center;
        margin: 0 0 20px 0;
    }

    /*動画表示のモーダル：余白を変更したい場合*/
    .modaal-video .modaal-inner-wrapper{
        padding:0;
    }

/* ボタンホバー時------------------------------------ */
.button:hover{
    width: 227px;
    height: 47px;
    background-image: url(../img/button-hover.png);
}
/* header------------------------------------------------------------- */
header{
    background-color: #6a771c;
}
.page-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
h1 img{
    max-width: 200px;
    margin: 10px 0 10px 40px;
}

.main-nav{
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    font-size: 1.0rem;
    list-style: none;
    margin-right: 30px;
    gap: 10px;
}
.main-nav li{
    margin: 10px;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
	position: relative;
    list-style: none;
}
/*ナビゲーションのリンク設定*/
nav ul li a{
	display: block;
	text-decoration: none;
	/* padding:20px 35px; */
	transition:all .3s;
}
/* nav ul li li a{
	padding:10px 35px;
} */

nav ul li a:hover{
	color:#202121;	
}
/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
	content:'';
	position: absolute;
	left:86px;
	top:9px;
	width:6px;
	height:6px;
	border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(135deg);
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
    .main-nav .has-child ul{
        /*絶対配置で位置を指定*/
        position: absolute;
        left:0;
        top:52px;
        z-index: 4;
        /*形状を指定*/
        background:#454f25;
        width:120px;
        /*はじめは非表示*/
        visibility: hidden;
        opacity: 0;
        /*アニメーション設定*/
        transition: all .3s;
    }
 /*hoverしたら表示*/
    nav  .has-child:hover > ul,
    nav  .has-child ul li:hover > ul,
    nav  .has-child:active > ul,
    nav  .has-child ul li:active > ul{
     visibility: visible;
     opacity: 1;
    }
   
    /*ナビゲーションaタグの形状*/
    nav li.has-child ul li a{
        color: #fff;
        border-bottom:solid 1px rgba(255,255,255,0.6);
    }

    nav li.has-child ul li:last-child a{
        border-bottom:none;
    }

    nav li.has-child ul li a:hover,
    nav li.has-child ul li a:active{
        background:#647800;
    }




/* TOPに戻る--------------------------------------- */

html {
    scroll-behavior: smooth;
}
.pagetop {
    position: fixed;
    right: 25px;
    bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
/*　上に上がる動き　*/

.pagetop.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

.pagetop.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}

/*検証のためのCSS*/
section{
padding: 500px 0;
}


.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}
/* footer--------------------------------------- */
.footer-wrapper{
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 30px;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    border-top: 2px solid #6a771c;
}

.footer-wrapper a{
    font-size: 0.8rem;
}

.footer-logo{
    max-width: 150px;
    margin-bottom: 20px;
}

.footer-link{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link ul{
    text-align: center;
    font-size: 0.75rem;
    margin-top: 40px;
    list-style: none;
    margin: 0 auto;
}

.footer-link li{
    display: inline;
    padding: 0 10px 0 10px;
    margin: 5px 0;
}

.footer-link li+li{
    border-left: 1px solid #ffffff;
}


.Gothicfont{
    font-family: 'Noto Serif JP', serif;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

.bold{
    margin-left: 10px;
    font-size: 1.75rem;
    font-weight: bolder;
}

.footer-info{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    color: white;
    /* margin: 15px;     */
    /* font-family: 'Noto Serif JP', serif;
    font-family: 'Zen Kaku Gothic New', sans-serif; */
    list-style: none;

}
.footer-info img{
    max-width: 250px;
}

.footer-info li{
    /* text-align: center; */

    margin: 10px;
}
.footer-contact{
    border: 1px solid #ffffff;
    padding: 6px;
}
.footer-tel{
    text-align: start;
}

.tel{
    display: flex;    align-items: center;

    /* padding: 3px; */
}
.tel a{
    margin-left: 10px;
    font-size: 1.75rem;
    font-weight: bolder;
    letter-spacing: 0.1rem;
}
.telattention{
    font-size:0.75rem;
    font-weight: normal;
    letter-spacing: 0.1rem;
}
.footer-shop{
    text-align: start;
    font-size: 0.75rem;

}

.copy{
    width: 100vw;
    height: 70px;
    background-color: #647800;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* あしらい */
.treat{
    width: 100vw;
    display: flex;
    justify-content: center;
    margin: 20px 0 20px 0;
    overflow: hidden;
}
/*  ここから上いじらないでください */






/* Topページ --------------------------------------------------------------------------------------------------------------*/
.PC-FV img{
    width: 100vw;
}

/* キャッチコピー -------------------------------------------------*/

.top-rojiura{
    margin: 50px auto;
    position: relative;
    background-image: url(../img/index-deco1.png);
    background-position: center;
    background-size: cover;
    aspect-ratio: 767 / 329;

}

.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;    
}

.content h2{
    font-size: 2.5rem;
    letter-spacing: 0.75rem;
    color: #647800;
    margin: 20px;
    
}
.content p{
    text-align: center;
    margin: 0 auto;
    font-size: 1rem;
    padding-top: 50px;
    padding-bottom: 50px;
    line-height: 2.5rem;
}
.content img{
    width: 100%;
}

/* 格子の動き */
    .koushi{
        position: absolute;
        top: 0px;
        left: 1920px;
    }
    .animetion{
        width: 100%;
        overflow: hidden;
        position: absolute;
        animation: anime 4s ;
    }
    @keyframes anime{
        0%{
            left: 1920px;
        }
        35%{
            left: 0px;
        }
        100%{
            left: -1920px;
        }
    }
    .hidden{
        display: none;
    }
    /* 店内こだわり ------------------------------------------------*/
    .top-shop{
        margin-top: 100px;
    }

    .top-shop img{
        width: 100%;
    }


/* 大人の空間 --------------------------------------------*/
    .top-kakurega{
        margin-top: 100px;

    }
    .top-kakurega img{
        width: 100%;
    }

    .top-kakuregap p{
        width: 70%;
        margin: 0 auto;
    }
    .attention{
        width: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #454f25;
        padding: 20px;
        gap: 20px;
        margin: 0px auto;
        margin-bottom: 100px;
    }


/* リンク ------------------------------------------------*/

.top-link{
    width: 80%;
    margin: 30px auto;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1401/541;
}

.top-link p{
    /* max-width: 70%; */
    text-align: center;
    padding-bottom: 20px;
}

.top-linkbanner{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.top-linkbanner-menu{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(../img/index-menu2-pc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    aspect-ratio: 1401/541;
}

.top-linkbanner img .top-linkbanner-menu img{
    max-width: 197px;
}


/* メニュー（リンク）ページ */
/* #menu-link{
    display: flex;
    align-items: center;  
    width: 100%;
    aspect-ratio: 1823 / 750;
    margin: 50px  0;
} */

/* 各リンクボタンあるところ */
.menu-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 700px;
    margin: 0 auto;
}
.menu-wrapper-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:30%;
    margin: 0 auto 0 20px;
}

.menu-wrapper-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:30%;
    margin: 0 20px 0 auto;
}
.link-cuisine{
    background-image: url(../img/menu-cuisine-pc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.link-sweetness{
    background-image: url(../img/menu-sweetness-pc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.link-drink{
    background-image: url(../img/menu-drink-pc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.link-takeout{
    background-image: url(../img/menu-takeout-pc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* メニュー（お食事）ページ -----------------------------------------------------------------------------------------------------*/
/* メニューページコンテンツタイトル */
    .menu-h{
        margin: 150px 0 50px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .menu-h p{
        padding-top: 5px;
    }

/* ランチメニュー値段等詳細 */
    .lunch-attention{
        max-width:80%;
        margin: 0 auto;
        margin-bottom: 100px;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
        }

    .lunch-attention p{
        margin: 0 auto;
        width: fit-content;
        font-size: small;
        }

    .lunch-attention h4{
        font-size: 1.2rem;
        padding-bottom: 0.8rem;
    }

    .lunch-attention2{
        border: 1px solid #fff;
        width: 65%;
        margin: 0 auto;
        margin-bottom: 1rem;
    }

/* メニューの背景ありトピックスの設定 */
    /* サイズとアスペクト比 */
    .topic{
        width: 80%;
        margin: 0 auto;
        margin-top: 80px;
        margin-bottom: 35px;
        display: flex;
        flex-direction: column;
        aspect-ratio: 1440 / 730;
    }

    .topic h3{
        margin:  15px auto;
        font-size: 1.5rem;
    }
    /* 右　文字 */
    .topic-right{
        width: 30%;
        height: 100%;
        margin: 0 0 0 auto;
        padding-right: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 左　文字 */
    .topic-left{
        width: 35%;
        margin: 0 auto 0 0;
        padding-left: 30px;
    }

/* ランチのトピックスの背景設定------------------------- */
.hamburg-attention{
    margin: 10px auto;
    /* padding: 5px; */
    text-align: left;
    border: 1px solid #fff;
    font-size: 0.7rem;
    padding-left: 1rem
}

.lunch-under2{
    padding: 1rem 0 0.8rem 0;
    font-size: 1.1rem;
}

.lunch-attention2 ul{
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    font-size: 0.85rem;
    line-height: 2.0rem;
    letter-spacing: 0.3rem;
}


/* ランチメニュー基本系 */
.lunch-menu{
    list-style: none;
    text-align: center;
}
/* ランチメニュー最後の行だけ線なし */
.lunch-menu li:last-child{
    border: none;
}

.menu-text{
    width: 60%;
    margin: 0 auto;
    /* padding-top: 20px;
    padding-bottom: 20px; */
    padding: 65px 0;
    border-bottom:  1px solid #454f25;
}
.menu-text p{
    padding-top: 10px;
    font-size: small;
}

.lunch-sweets{
    width: 60%;
    padding: 20px;
    margin: 0 auto;
    margin-top: 35px;
    margin-bottom: 150px;
    text-align: center;
    background-color: #454f25;
}

.lunch-under{
    text-align: center;
    padding-bottom: 10px;
}


.lunch-sweets ul{
    width: fit-content;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.85rem;
    line-height: 2.0rem;
    letter-spacing: 0.3rem;
}

/* 甘味ページ------------------------- */
.lunch-attention3{
    width: 65%;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.lunch-attention3 ul{
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.85rem;
    line-height: 2.0rem;
    letter-spacing: 0.3rem;
    border-top: 1px solid #fff;
    margin-top: 0.5rem;
}

.sweets-menu{
    margin-bottom: 65px;
}

.topic-right2{
    width: 30%;
    margin: 0 0 0 auto;
    padding-right: 30px;
}

.lunch-under3{
    font-size: 1.1rem;
}

.sweets-txt1{
    margin-top: 30%;
}

.price-right{
    text-align: right;
    padding-top: 1rem;
}

.l-txt p{
    text-align: left;
}

.pancake-txt p{
    line-height: 1.3rem;
}

.small p{
    font-size: 0.7rem;
}

.pancake{
    padding-bottom: 1rem;
}

.pancake-s{
    padding-top: 1rem;
}

.content{
    margin-top: 100px;
    margin-bottom: 100px;
}






/* <!-- お飲み物ページ ------------------------------------------> */
.menu-a{
    margin: 80px 0 100px 0;
}
.flex{
    display: flex;
}

li{
    list-style: none;
}

.menu-h-coffee{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-a h2{
    margin-top: 100px;
    text-align: center;
}

.drink-menu{
    width: 75%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 85px;
}

.coffee-menu{
    width: 75%;
    margin: 0 auto;
    margin-top: 65px;
    margin-bottom: 35px;
}

.drink-menu .menu-text,.coffee-menu .menu-text,.drink-menu .menu-text{
    padding: 60px 0;
}

.drink-img img{
    width: 100%;
}

.lunch-sweets2{
    width: 50%;
    padding: 20px;
    margin: 0 auto;
    margin-top: 35px;
    margin-bottom: 150px;
    text-align: center;
    background-color: #454f25;
}

.menu-text div{
    justify-content: space-between;
}

.drink-menu li:last-child,.coffee-menu li:last-child{
    border: none;
}

.price{
    text-align: center;
    margin-bottom: 125px;
}

.small p{
    font-size: 0.7rem;
}

h4{
    font-size: 1.1rem;
    line-height: 2.0rem;
    letter-spacing: 0.3rem;
}


/* <!-- テイクアウトページ ------------------------------------------> */
.menu-a h2{
    margin: 50px;
}

.menchikatsu-take{
    column-gap: 5%;
}

.sweets-take{
    width: 65%;
    margin: 0 auto;
    column-gap: 5%;
}

.between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.takeout-img{
    width: 40%; 
}

.takeout-img img{
    width: 100%;
}

.takeout-text{
    width: 50%;
}

.border-white{
    border-bottom:  1px solid #ffffff;
}

.mark img{
    width: 100px;
}

.big{
    font-size: 1.4rem;
}

.border-green{
    border-bottom:  1px solid #647800;
}

.top{
    padding: 45px 0 30px;
}

.middle{
    padding: 30px 0;
}

.bottom{
    padding: 30px 0 45px;
}

.take-box{
    width: 65%;
    margin: 0 auto;
}

.left-s{
    justify-content: flex-start;
    margin-top: 1rem;
}

.left-s .small{
    padding-left: 2rem;
}

.box{
    border: 1px solid #fff;
    margin-right: 1rem;
    text-align: center;
}

.number{
    align-items: center;
}

.takeout-text .box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8em;
}


.how-to{
    width: 65%;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 150px;
    justify-content: center;
	border: 1px solid #6a771c;
}


.how-to-box{
    background-color: #6a771c;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 1.5rem;
}

.how-to-box2{
    justify-content: center;
}

.how-to .box{
    aspect-ratio: 1;
    width: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}

.how-to1{
    width: 45%;
}

.how-to-img{
    display: flex;
    justify-content: center;
}

.how-to-img img{ 
    width: 70%;
    padding: 30px;
}

.WW{
    width: 70%;
    margin: 0 auto;
}

.yazirusi{
    display: flex;
    align-items: center;
}

.yazirusi img{
    width: 50%;
}

.how-to-box2{
    padding: 30px;
}

.toaster-txt{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.how-to-box3{
    border-top: 1px solid #ffffff;
    text-align: center;
    margin: 30px;
    padding: 20px;
}

.white .bold{
    margin-left: 0;
}

.sweets-take{
    width: 65%;
    margin-bottom: 125px;
}

.border-white .small{
    padding: 1em 0;
}


/* <!-- アクセスページ ------------------------------------------> */
h3{
    line-height: 2.0rem;
    letter-spacing: 0.3rem;
}

.store-pc{
    background-image: url(../img/cafe-image-pc.png);
    background-size: cover;
    background-position: center top;
    aspect-ratio: 1401/656;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 150px;
}

.store-pc-wrapper{
    justify-content: space-between;
}

.store-img{
    width: 60%;
}

.store-txt{
    width: 40%;
}

.store-txt img{
    width: 80%;
}

.store-wrapper{
    padding-top: 3.5rem;
}

.store-wrapper-last{
    padding: 3rem 0;
}

.access{
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.access img{
    width: 70%;
}

.access-top{
    margin-bottom: 45px;
}

.access-top2{
    margin: 150px 0 45px 0;
}

.access-near{
    width: 70%;
    margin: 0 auto;
    margin-bottom: 150px;
    text-align: left;
    background-color: #31363e;
    border: 1px solid #a5984b;
}

.access-box{
    width: 90%;
    margin: 0 auto;
}

.access-txt-box{
    padding: 45px 0;
    border-bottom: 1px solid #a5984b;
    column-gap: 3rem;
}

.access-txt-box h4{
    padding-bottom: 1rem;
}

.access-txt{
    width: 60%;
}

.access-img{
    width: 40%;
}

.access-img img{
    width: 100%;
}

.access-txt:last-child{
    border: none;
}

.access-bottom{
    margin: 45px 0 150px 0;
}

iframe {
    width: 70%;
    height: auto;
    aspect-ratio: 2/1.5;
    margin-bottom: 125px;
}

.SP_{
    display: none;
}


/* <!-- レスポンシブ ------------------------------------------> */











/* ここからしたレスポンシブ--------------------------------------------------------------------------------------------------- */

@media(max-width:1000px){
    .PC_{
        display: none;
    }

    .SP_{
        display: block;
    }

    /* <!-- お飲み物ページ ------------------------------------------> */
    .menu-a h2{
        margin: 100px 0 50px 0;
    }

    .coffee-menu div{
        display: block;
    }

    .drink-menu,.coffee-menu{
        width: 90%;
        margin-top: 35px;
        margin-bottom: 55px;
    }

    .drink-menu .menu-text,.coffee-menu .menu-text,.drink-menu .menu-text{
        padding: 35px 0;
    }

    .lunch-sweets2{
        width: 80%;
    }

    .menu-text{
        width: 100%;
    }

    /* <!-- テイクアウト ------------------------------------------> */

    .menchikatsu-take,.how-to-box2,.sweets-take{
        display: block;
    }

    .take-box,.sweets-take,.how-to{
        width: 85%;
    }

    .takeout-img,.takeout-text{
        width: 100%; 
    }

    .left-s{
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .left-s .small{
        padding-left: 0;
    }

    .takeout-img{
        margin-bottom: 2rem;
    }

    .how-to1{
        width: 100%;
    }

    .flexsp{
        display: flex;
    }

    .how-to{
        margin-top: 50px;
        margin-bottom: 100px;
    }

    .how-to-img{
        width: 100%;
    }

    .how-to-img img{
        padding: 2rem 0;
    }

    .yazirusi{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2rem 0;
    }
    
    .yazirusi img{
        width: 10%;
        transform: rotate(90deg);
    }

    .top2{
        align-items: flex-start;
    }

    .top2 .number{
        padding-top: 0.5rem;
    }

    .how-to-box3{
        width: 90%;
        margin: 0 auto;
    }

    .how-to-box3 p{
        text-align: left;
    }

    .sweets-take{
        margin-bottom: 80px;
    }

    .price{
        margin-bottom: 100px;
    }

    /* <!-- アクセスページ ------------------------------------------> */
    .store-sp{
        background-image: url(../img/cafe-image-sp.png);
        background-size: cover;
        background-position: center top;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 100px;
    }

    .store-img-sp{
        aspect-ratio: 1
    }

    .store-txt-sp{
        width: fit-content;
        padding: 0 0 3rem 3rem;
    }

    .store-txt-sp img{
        width: 50%;
        margin: 0 auto;
    }

    .store-wrapper-sp{
        padding-bottom: 2rem;
    }

    .access{
        width: 100%;
    }

    .access-top2{
        margin-top: 100px;
    }

    .access-near,.access-bottom{
        margin-bottom: 100px;
    }
    
    .access-txt-box{
        display: block;
    }

    .access-txt{
        width: 80%;
        margin: 0 auto;
    }

    .access-txt h4{
        margin-top: 0.5rem;
    }

    .access-img{
        width: 80%;
        margin: 0 auto;
        /* display: flex;
        justify-content: center; */
    }

    .store-txt{
        width: 100%;
    }

    .access-img img{
        width: 100%;
        min-width: 200px;
    }

    iframe {
        aspect-ratio: 2/1;
        margin-bottom: 100px;
    }

        /* menuページリンク----------------------------------------------- */
       /* #menu-link{
        display: flex;
        justify-content: center; 
        align-items: center;     
        width: 80%;
        aspect-ratio: 640 / 1070;
        margin: 50px  auto;
    } */
    /* .menu-link{
        display: flex;
        justify-content: center; 
        align-items: center;     
        width: 80%;
        aspect-ratio: 640 / 1070;
        margin: 50px  auto;
    } */
    .menu-wrapper-right{
        display: flex;
        flex-direction: column;
        align-items: center;
        width:100%;
        margin: auto 10px 30px 10px;
    }
    .menu-wrapper-left{
        display: flex;
        flex-direction: column;
        align-items: center;
        width:100%;
        margin: auto 10px 30px 10px;
    }
    .link-cuisine{
        background-image: url(../img/menu-cuisine-sp.png);

    }
    .link-sweetness{
        background-image: url(../img/menu-sweetness-sp.png);

    }
    .link-drink{
        background-image: url(../img/menu-drink-sp.png);

    }
    .link-takeout{
        background-image: url(../img/menu-takeout-sp.png);
    }

    .topic{
        display: flex;
        justify-content: center; 
        align-items: center;     
        width: 80%;
        margin: 0px  auto;
        background-image: none;
    }

    .topic h3{
        margin: 0;
    }

    /* 右　文字 */
    .topic-right,.topic-left{
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .vertical-box{
        width: 100%;
        background-color: #6a771c;
    }

    .topic h3{
        display: flex;
        justify-content: center;
        align-items: center;
        writing-mode: horizontal-tb;
        padding: 10px 0 10px 0;
    }

    .Tablet-pic{
        width: 100%;
    }

    .topic p{
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    .under{
        border-top: 1px solid #fff;
        padding-top: 0.5rem;
    }

    .meal-txt1,.meal-txt2{
        margin-bottom: 50px;
    }

    .hamburg-attention{
        padding: 1rem 0;
    }
    
    .kaigyou{
        display: none;
    }

    .lunch-pic{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }

    .hamburg-attention{
        max-width: 100%;
        margin: 10px auto 40px auto;
        text-align: center;
        padding: 0.8rem;
        border: 1px solid #fff;
    }

    .menu-text{
        width: 80%;
        padding: 45px 0;
    }

    .menu-h{
        margin: 100px 0 50px 0;
    }

    .lunch-attention{
        margin-bottom: 50px;
    }

    .lunch-attention2{
        width: 90%;
    }

    .meal-txt1,.meal-txt2,.meal-txt3{
        width: 100%;
        margin-top: 0;
    }

    .lunch-sweets{
        width: 80%;
        margin-bottom: 100px;
    }

    .lunch-sweets ul{
        width: 90%;
    }

    .content{
        margin: 45px 0 100px 0;
    }

     /* 甘味ページ----------------------------------------------- */
       .topic-right2{
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .lunch-attention3{
        width: 90%;
    }

    .vertical-box2,.vertical-box3{
        width: 100%;
        background-color: #6a771c;
        margin-top: 20px;
    }

    .sweets-txt1{
        margin-top: 0;
    }

    .topic p{
        width: fit-content;
        text-align: left;
    }

    .lunch-under-sp{
        border-bottom: 1px solid #fff;
        padding-top: 1rem;
        font-size: 1.1rem;
        justify-content: space-between;
    }

    .big2{
        font-size: 1.1rem;
    }

    .st-wrapper{
        padding-top: 0.8rem;
    }
    
    .price-right{
        text-align: right;
    }

    .lunch-sweets ul{
        text-align: center;

    }

}

@media(min-width:751px){
    .openbtn{
        display: none;
    }
    #g-nav{
        display: none;
    }
    .SP{
        display: none;
    }
    .SP-FV{
        display: none;
    }
}
/* mobile(750以下) */
@media(max-width:750px){
    .PC{
        display: none;
    }
    .PC-FV{
        display: none ;
    }

    h1 img{
        max-width: 125px;
        margin: 10px 0 10px 20px;
    }

    header{
        background-color: rgb(0, 0, 0);
    }

    /* やじるしを消す */
    .slick-arrow:before{
        display: none;
    }

    #splash{
        display: none;
    }
    #g-nav{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top:-120%;
        left:0;
        width:100%;
        height: 100vh;/*ナビの高さ*/
        background-color: #647800;
        background-image: url(../img/g-nav-bg.png);
        background-size: contain;
        background-position: right;
        /*動き*/
        transition: all 0.6s;
        text-align: center;
        padding: 50px 0 100px 0;
        overflow-y: auto;
    }
    
    /*アクティブクラスがついたら位置を0に*/
    #g-nav.panelactive{
        top: 0;
    }
    
    /*ナビゲーションの縦スクロール*/
    #g-nav.panelactive #g-nav-list{
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /*ナビゲーション*/
    .g-nav{
        /*ナビゲーション天地中央揃え*/
        display: block;
        width: 60%;
        margin: 0 auto;
    }

    .g-nav ul{
        margin-bottom: 50px;
    }
    
    .g-nav p {
        /*ナビゲーション天地中央揃え*/
        text-align: left;
        font-size: small;
        margin-bottom: 30px;
    }
    .g-nav-tel a{
        font-size: large;
    }
    .g-nav-tel{
        border-bottom:1px solid #fff;
        width:fit-content;
    }
    .g-nav h4{
        width:fit-content;
        border: #fff 1px solid;
        padding: 4px;
        text-align: left;
        margin-bottom: 10px;

    }
    /*リストのレイアウト設定*/
    
    .g-nav li{
        list-style: none;
        text-align: center; 
    }
    
    .g-nav li a{
        color: #fff;
        font-size: large;
        padding:10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: normal;
        border-bottom:1px solid #fff;
        text-align: left;
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .g-nav-logo{
        height: 200px;
    }
    .g-nav-attention{
        width: 100%;
    }

    nav{
		padding: 0;
	}
	
	nav ul{
		display: block;
	}
	
	nav ul ul li
	nav li .has-child ul{
        position: relative;
        left:0;
        top:0;
        width:100%;
        visibility:visible;/*JSで制御するため一旦表示*/
        opacity:1;/*JSで制御するため一旦表示*/
        display: none;/*JSのslidetoggleで表示させるため非表示に*/
        transition:none;/*JSで制御するためCSSのアニメーションを切る*/
    }

    .has-child ul{
        margin-bottom: 0px;
        margin-left: 20px;
    }



    /*矢印の位置と向き*/

    nav ul li.has-child::before{
        left:100px;	
        top: 30px;
    }

    nav ul ul li.has-child::before{
        transform: rotate(135deg);
        left:20px;
    }
        
    nav ul li.has-child.active::before{
        transform: rotate(-45deg);
    }
    .has-child ul{
        border-bottom:1px solid rgba(255,255,255,0.6);;
        
    }

    .has-child li a:hover{
        color:#202121;	
    }

    /* TOPに戻る--------------------------------------- */
    .pagetop {
        right: 5px;
        bottom: 15px;
        /* z-index: 2; */
    }
    .pagetop img {
        width: 70%;
    }


    /*========= ボタンのためのCSS ===============*/
    .openbtn{
        position:fixed;
        z-index: 9999;/*ボタンを最前面に*/
        top:10px;
        right: 10px;
        cursor: pointer;
        width: 50px;
        height:50px;
    }
        
    /*×に変化*/	
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #fff;
          width: 45%;
      }
    
    .openbtn span:nth-of-type(1) {
        top:15px;	
    }
    
    .openbtn span:nth-of-type(2) {
        top:23px;
    }
    
    .openbtn span:nth-of-type(3) {
        top:31px;
    }
    
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }

    /* TOPに戻る */


    /* TOPページ----------------------------------------------------- */
   /* スマホ版FV設定 */
    .SP-FV{
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        /* height: 100vh; */
        margin: auto 0;
        background-color: #000;
    }

    /* .SP-FV img{
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    } */

    /* スマホ版FV上部 */
    .TOP-SPFV{
        width: 90vw;
        /* aspect-ratio: 749 / 541; */
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        background-image: url(../img/SP-topFvbg.png);
        background-position: center;
        background-size: cover;
    }
    .TOP-SPFV h3{
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
    }
    .blur{
        animation-name:blurAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
    }
    /* 文字をふわっと出す */
    @keyframes blurAnime{
      from {
        filter: blur(10px);
        transform: scale(1.02);
        opacity: 0;
      }
    
      to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
      }
    }
     
    .blurTrigger{
        opacity: 0;
    }


    /* スマホ版FV下部 */
    .TOP-SP{
        width: 80%;
        margin: 0 auto;
        margin-bottom: 50px;
        text-align: center;
    }

    .SP-FV img{
        width: 100vw;
    }

    .content{
        text-align: start;
    }

    .content p{
        text-align: justify;

    }
    .attention{
        display: flex;
        flex-wrap: wrap;
    }

    .slider img{
        aspect-ratio: 1/1.5;
        width: 100%;
        object-fit: cover;
        padding: 0 10px 0 10px;
    }
    .top-shop{
        margin-top: 0px;
    }
    .top-shopSP{
        width: 90vw;
        aspect-ratio: 1534/658;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px;
        /* margin-top: 0px; */
        background-image: url(../img/bg01.png);
        background-position: right;
        background-size: cover;
    }
    .top-shopSP h3{
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
    }
    .top-shop p{
        /* font-size: 0.7rem; */
        margin: 50px;
    }

    .top-link p{
        max-width: 85%;
        font-size: 0.75rem;
        line-height: 1.2rem;
        letter-spacing: 0.25rem;
        margin: auto 0 0 0;
        padding-bottom: 20px;

    }

    .top-kakurega{
        margin-top: 0px;

    }



    /* mobile(550以下) */
    @media(max-width:550px){

        .top-link p{
            max-width: 80%;
            bottom: 75px;
            padding-bottom: 20px;
            
        }

        .top-link a{
            margin-top: 90px;
        }
    }

}
@media(min-width:501px){
    .sp{
        display: none;
    }
}
@media(max-width:500px){
    p{
        font-size: 0.8rem;
        line-height: 1.5rem;
        letter-spacing: 0.2rem;
    }

    /* お食事ページ----------------------------------------------- */
    .menu-h{
        margin: 30px 0;
    }



    .lunch-attention h4 {
        font-size: 1rem;
    }

    .lunch-attention p{
        margin: 0;
    }

    .lunch-attention2 p{
        padding: 0.3rem;
    }

    .lunch-attention ul{
        gap: 0px;
        padding: 10px;
    }

    .meal-txt1,.meal-txt2{
        margin-bottom: 30px;
    }

    .k-d{
        padding-left: 1rem;
    }

    .vertical-box.vertical-box2{
        margin-top: 0;
    }

    .menu-text{
        padding: 30px 0;
    }

    .lunch-sweets{
        margin-bottom: 50px;
    }

    .lunch-sweets ul{
        line-height: 1rem;
    }
    
    .menu-text p{
        text-align: left;
    }

    .menu-text h4{
        font-size: 1rem;
        text-align: left;
    }

    .content{
        margin: 0;
    }

 /* 甘味ページ----------------------------------------------- */
    .menu-h{
        display: block;
        text-align: center;
        margin: 30px 0;
    }

    .lunch-attention{
        width: 100%;
    }
    
    .lunch-attention p{
        text-align: left;
    }

    .topic h3{
        font-size: 1.1rem;
        padding: 0;
    }

    .flex_sb{
        display: block;
        text-align: left;
    }

    .lunch-attention3{
        margin: 0;
    }

    .lunch-attention3 ul{
        gap: 0;
        padding: 10px 0;
    }

    .vertical-box2,.vertical-box3{
        margin-top: 10px;
    }

    .pancake-txt{
        margin-bottom: 10px;
    }

    .sweets-menu{
        margin-bottom: 50px;
    }

    .lunch-sweets{
        width: 85%;
        margin-top: 10px;
    }

    .lunch-sweets ul{
        gap: 10px;
    }


    
    /* <!-- お飲み物ページ ------------------------------------------> */
    .menu-a{
        margin: 0;
    }

    .menu-txt-sp{
        display: block;
    }

    .drink-menu .menu-text{
        padding: 30px 0;
    }

    .coffee-menu .menu-text{
        padding: 30px 0;
    }

    .drink-menu,.coffee-menu{
        margin-bottom: 0;
    }

    .lunch-sweets2{
        margin-bottom: 50px;
    }

    .menu-h h3{
        margin: 40px 0 30px 0;
    }


    .price{
        margin: 30px 0 50px 0;
    }

    /* <!-- テイクアウトページ------------------------------------------> */
    .menu-h h2{
        font-size: 1.2rem;
        margin: 50px 0 ;
    }
    .c-menu h2{
        margin: 0;
    }
    .big{
        font-size: 1rem;
    }

    .how-to-box{
        font-size: 1rem;
        margin-bottom: 0;
    }

    .mark img {
        width: 120px;
    }

    .border-white{
        padding-bottom: 0.8rem;
    }

    .left-s .small{
        padding-top: 0.5rem;
    }

    .how-to {
        margin-bottom: 80px;        
    }

    .top {
        padding: 30px 0 20px;
    }

    .bottom {
        padding: 20px 0 30px;
    }

    .WW{
        width: 100%;
    }

    .how-to-box2 {
        padding: 20px 10px;
    }

    .yazirusi{
        margin: 0;
    }

    .toaster-txt{
        width: 95%;
        margin: 0 auto;
    }

    .how-to-box3{
        margin: 0 auto;
        padding: 1rem 0 2rem 0;
    }

    .sweets-take {
        margin-bottom: 0;
    }

    .middle {
        padding: 20px 0;
    }
    
    /* <!-- アクセスページ　------------------------------------------> */
    .store-sp{
        width: 85%;
        margin-bottom: 80px;
    }

    .store-img-sp {
        aspect-ratio: 1/1.5;
    }

    .store-txt-sp{
        width: fit-content;
        height: 20%;
        padding: 0 1rem 1rem 1rem;
    }

    .store-wrapper-sp{
        padding-bottom: 1rem;
    }

    .store-wrapper-sp p{
        padding-bottom: 0.5rem;
    }

    .store-wrapper-last-sp img{
        width: 100%;
    }

    .access-top,.access-top2 {
        margin-bottom: 20px;
    }

    .access-top2{
        margin-top: 30px;
    }

    .access-txt{
        width: 80%;
        margin: 0 auto;
    }

    .access img{
        width: 80%;
    }

    .access-near{
        width: 80%;
        margin-bottom: 50px;
    }

    .access-txt-box{
        display: block;
    }

    .access-img{
        width: 80%;
        margin: 0 auto;
    }

    .access-img img{
        width: 100%;
    }

    .access-txt{
        width: 80%;
    }

    .access-txt-box{
        padding: 30px 0;
    }

    .access-txt-box h4 {
        padding-top: 1rem;
    }

    .access-bottom {
        margin: 20px 0 50px 0;
    }

    iframe {
        aspect-ratio: 1;
        width: 85%;
        margin-bottom: 50px;
    }


}