/* CSS Document */
*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

img{
max-width: 100%;
width: 100%;/*画像サイズ以上になれる*/
height: auto;
vertical-align: middle;
transition: 0.5s ease-in-out; /* なめらかに変化 */
}

h2{
text-align: center;
font-size: 42px;
font-weight: bold;
margin: 100px 0 50px;
padding: 50px 0;
}

/*サイト幅*/
.container{
width: 90%;/*可変レイアウト*/
max-width: 1080px;/*上限*/
margin: 0 auto;
}

/*ヘッダーコンテナ*/
.header-container{
display: flex;
justify-content: space-between; /* 両端に配置 */
padding: 5px 0;
max-width: 1080px;
}

h1{
width: 320px;
margin: 0 0 0 20px;
}

/*グローバルナビ*/
.global-nav ul{
width: 430px;
display: flex;
justify-content: space-between;
}

.global-nav li{
width: 300px;
font-size: 14px;
font-weight: bold;
align-items: baseline;
background-color: #fdfff8;
}

.global-nav a{
display: block;
text-decoration: none;
color: #4ba049;
padding: 12px 1px 0 5px;
white-space: nowrap;/*絶対に文字を改行しない！*/
}

.global-nav a:hover{
text-decoration: underline;
}

/*ハンバーガーボタン*/
.ham_btn{
/*リセット*/
border: none;
outline: none;
/*ボタン*/
display: none;/*PCで非表示*/
width: 50px;
height: 50px;
background-color: #fff;
cursor: pointer;
/*配置位置*/
position: fixed;
top: 0;
right: 0;
z-index: 9999;
transition: 200ms;
}


/*上の大カテゴリ*/
.menu img{
border-radius: 50%;
width: 200px;
height: auto;
}

.menu_grid{
align-items: center;
min-width: 750px;
margin-bottom: 150px;
padding: 0 0 80px;
}

.menu_item{
font-size: 36px;
font-weight: bold;
width: 200px;
height: auto;
}

.menu_item>h3{
margin: 0;
padding: 0;
background: none;
}

/*小カテゴリ*/
h3{
background-color: #979625;
background-image: url("../images/reaf.gif");
background-size: 15px;
background-repeat: repeat;
font-size: 28px;
margin: 0 auto;
margin-bottom: 50px;
}

/*商品ページ*/
.card-container{
width: 100%;
display: flex;
flex-wrap: wrap;/*画面サイズに応じて折り返し*/
justify-content: space-between;
margin: 0 auto;
margin-bottom: 50px;
}
.menu__img{
max-width: 240px;
width: 100%;
}
.menu__txt{
width: 100%;
max-width: 240px;
height: 180px;
margin-bottom: 5px;
}
.menu-card{
width: 30%;/*３つ横並び*/
max-width: 240px;
margin: 0 20px;
}
h4{
font-size: 20px;
font-weight: bold;
}
.drinks p{
font-size: 14px;
line-height: 0.8;
}
.menu_price{
font-size: 16px;
font-weight: bold;
text-align: right;
display: block;
align-items: flex-end;
margin-bottom: 30px;
}

/*アクセス*/
.access h2{
background-color: #ebffee;
background-image: url(../images/reaf.gif);
background-size: 15px;
background-repeat: repeat;
}
.access_card{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 50px;
}

.access_txt{
display: block;
text-align: left;
margin-left: 30px;
}
.access_txt h3{
margin-bottom: 5px;
}
.access_txt p{
margin-bottom: 30px;
}


/*お問い合わせ*/
.contact h2{
background-color: #ebffee;
background-image: url(../images/reaf.gif);
background-size: 15px;
background-repeat: repeat;
}
.contact_form{
width: 400px;
height: auto;
margin: 0 auto;
margin-bottom: 50px;
}
.contact_form p{
margin-bottom: 20px;
}
.required{
color: #DA0003;
}
input{
width: 100%;
padding: 5px 10px;
}
select{
width: 100%;
padding: 7px 15px;
margin-bottom: 20px;
}
textarea{
display: block;
width: 100%;
height: 250px;
margin: 20px auto;
}
/*送信ボタン*/
[type="submit"]{
cursor: pointer;
display: block;
margin: 0 auto;
width: 100px;
padding: 10px 0;
font-size: 16px;
background-color: #d8e6d1;
border: 1px #888 solid;
border-radius: 10px;
}
[type="submit"]:hover{
background-color: #E7E6A2;
}
/* フォーカスしているとき */
input:focus,textarea:focus{
background-color: #D2EDD5;
outline: 2px solid green;
outline-offset: 3px;
}

/*footer上ライン*/
.bottom_line{
display: block;
padding-right: 100vw;
height: 50px;
background-color: #979625;
background-image: url("../images/reaf.gif");
background-size: 15px;
background-repeat: repeat;
margin: 0 auto;
}

footer{
margin-top: 35px;
}

/*トップ戻るボタン*/
.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 30px;
bottom: 30px;
background: rgba(255,255,255,0.5);
border: solid 2px #4ba049;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}


.pagetop__arrow {
height: 10px;
width: 10px;
border-top: 3px solid #4ba049;
border-right: 3px solid #4ba049;
transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #C5492B;
    }
}

@media (max-width:1024px){
    .menu-card{
    margin: 0 65px;
    }
}

@media (max-width:767px){
    /*ヘッダーコンテナ*/
    .header-container{
    padding: 0;
    }
    .logo {
    width: 200px;
    min-width: 150px;
    margin: 6px 0;
    }
    
    /*ハンバーガーボタン*/
    .ham_btn{
	display: block;/*SPで表示*/
	}
    /*三本線*/
    .ham_btn span,
    .ham_btn::before,
    .ham_btn::after{
    content: "";
    width: 30px;
    height: 2px;
    background-color: #4ba049;
    position: absolute;
    left: 10px;
    transform: translateY(-50%);
    transition: 200ms;
    }
    .ham_btn::before{
    top: 30%;
    }
    .ham_btn span{
    top: 50%;
    }
    .ham_btn::after{
    top: 70%;
    }
    /*ナビゲーション展開時*/
    .ham_btn.is_open{
    background-color: #4ba049;
    }
    .ham_btn.is_open span{
    opacity: 0;/*真ん中の１本を見えなくする*/
    }
    .ham_btn.is_open::before{
    top: 50%;
    transform:rotate(45deg);
    background-color: #fff;
    }
    .ham_btn.is_open::after{
    top: 50%;
    transform:rotate(-45deg);
    background-color: #fff;
    }
    /*navの中身*/
    .global-nav{
    height: 50px;
    }
    .global-nav>ul{
    width: 100vw;
    flex-wrap: wrap;
    }
	.global-nav li{
	font-size: 14px;
	text-align: left;
    width: 100%;
    height: 50px;
    border-bottom: #4ba049 dotted 3px;
    align-items: center;
	}  
    .global-nav a{
    padding: 10px 16px 0;
    white-space: normal;
    }
    .global-nav a:hover{
    text-decoration: none;
    color: #A09849;
    }
   	.g_nav{
	display: block;/*たてならべ*/
	width: 100%;/*画面いっぱい*/
	background-color: #fff;
	position: fixed;/*固定配置*/
	top: 0;
	left: 100%;/*右の画面外に追い出す*/
	transition: left 200ms;
    z-index: 999;
	}

	/*くっつけて書く*/
	.g_nav.is_open{/*この２つを同時に持っている要素の意味*/
	left: 0;
	}
    /*大枠メニュー*/
    h2{
    margin: 5px auto;
    font-size: 32px;
    padding: 15px 0;
    }
    .menu_item img{
    width: 135px;
    }
    .menu h3 {
    padding-top: 0;
    }    
    .menu_item>h3{
    margin: 0;
    font-size: 22px;
    }
    .menu_item h4{
    font-size: 20px;
    }
    .menu_item p{
    width: 130px;
    font-size: 14px;
    margin: 0 auto;
    }
    .menu_item .sp-hide{
    display: none;
    }
    .menu_grid{
    padding: 0;
    min-width: 285px;
    flex-wrap: nowrap;
    margin-bottom: 50px;
    }
    .menu_item{
    width: 135px;
    }
    .menu li:not(:last-child) {
    margin-right: 5px;
    }
    
    /*メニューカード
    小カテゴリ*/
    .card-container {
    display: block;
    }
    .menu-card{
	width: 75%;/*縦並び*/
    margin: 0 auto;
    margin-bottom　: 5px;
    }
    .menu__txt{
    line-height: 1.2;
    height: auto;
    margin-bottom: 0;
    }
    .menu__txt>p{
    margin-bottom: 10px;
    font-size: 18px;
    }
    h4{
    margin-bottom: 0;
    margin: 5px 0;
    font-size: 26px;
    }
    .menu_price{
    font-size: 16px;
    text-align: right;
    align-items: flex-end;
    } 


    /*アクセス*/
    .access h2{
    margin-bottom: 20px;
    }
    .access_card{
    display: block;
    }
    .access_txt{
    display: block;
    text-align: center;
    margin-left: 0;
    }
    .access_txt p{
    margin-bottom: 20px;
    }
    .iframe-wrapper{
    width: 100%;
    position: relative;
    padding-top: 56.25%;
    margin: 0 0 20px;
    }
    .iframe-wrapper iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }
    
    
    /*お問い合わせ*/
    .contact_form{
    width: 280px;
    }
    [type="submit"] {
    font-size: 14px;
    }
    .contact h2 {
    font-size: 26px;
    margin-bottom: 50px;
    }
    textarea {
    height: 150px;
    }
}