@charset "utf-8";
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
/*  background: #F1DFBB;*/
}
/* ここから下がハンバーガーメニューに関するCSS */
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #F1DFBB;
  transition: 0.5s;
  position: absolute;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
} 
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #ECE4D4;
  transition: .5s;
}
/*不透明度*/
.nav_content{opacity:0.96; }

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/*--------------------------------------*/

/*ナビゲーション*/
.nav_content ul {
 /*ナビゲーション天地中央揃え*/
 position: absolute;
 z-index: 999;
 top: 30%;
 left: 40%;
 transform: translate(-10%, -50%);
}

.nav_content li {
 list-style: none;
 text-align: right;
}
.nav_content li a {
 font-family: 'Shippori Mincho', serif;
 color: #612B21;
 text-decoration: none;
 padding: 10px;
 display: block;
 text-transform: uppercase;
 /*letter-spacing: 0.1em;*/
 font-weight: bold;
 font-size: 1.4rem;
 line-height: 2rem;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
/*@media only screen and (max-width: 376px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}*/
/*-------------------------------*/
img{
  max-width: 100%; /* 最大幅画像の原寸 */
  height: auto;/* 縦横比維持 */
}

.coffee{
position: relative;
right: -35%;
margin-top: 5%;
margin-bottom:15%;
}

.coffee2{
margin:10% 0 5% 10%;
width:25%;
opacity: 0.6;
}

.coffee3{
margin:-20% 0 5% 20%;
width:25%;
opacity: 0.6;
}

.coffee4{
display: block;
margin:30px auto;
padding: 20px 0 ;
width:400px;
height: auto;
opacity: 0.8;
}


.top-txt{
font-size: 25px;
margin-top: -90px;
font-family: 'Kaisei Decol', serif;
text-align: center;
/*display: block;
margin: 0 auto;
width: 100%;*/
}





.logo2{
width: 50%;	
display: block;
margin: 0 auto;
}

body{
/*background-image: url("../img/wood.jpg");*/
width: 100vw;
height: auto;
color:#F1DFBB ;	
font-family: 'Shippori Mincho', serif;
position: relative;
  background-image: url('../img/wood.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;		
/*background-repeat: no-repeat;*/  /* pcのみ*/
}

main{
 /* position: relative;*/
  max-width:3840px;
 /* margin-left: auto;*/
  margin-right: auto;
  box-sizing: border-box;
  /* 余白も含めて幅max3840px */
}

.sp{
width: 375px;	
}



.con1{
font-family: 'Kaisei Decol', serif;
color: #E2694A;
text-align: center;
font-size: 29px;
margin: 50px 0 40px 0;
}

span {
color: #F1DFBB;
font-size: 18px;	
}	
/*.con2{
font-family: 'Kaisei Decol', serif;
text-align: center;
font-size: 18px;
padding: 0 0 40px 0;
line-height: 25px;
}*/

.con3{
margin: 40px 25px 25px 25px;	
}

.con4{
margin: 0 25px;
}

.con5{
margin:12px 25px 40px 25px;
}

.shop{
display:block;
margin: 0 auto;
width: 80%;
}



h2{
font-family: 'Kaisei Decol', serif;
text-align: center;
font-size: 32px;	
padding-top: 60px;	
padding-bottom: 40px;
}

h3{
padding-top: 20px;
font-size: 20px;
border-bottom: 1px solid #F1DFBB;
padding:20px 0;

}

p{
font-size: 13px;
text-align: center;
line-height: 25px;
}

a{
margin:10px ;
padding: 10px 15px;
}


.sub{
text-align: left;
font-size: 14px;
margin-top: 15px;	
}

.sub2{
text-align: left;
border-bottom: 1px solid #F1DFBB; 
padding-bottom: 15px;	
}


.food1,.food2{
display: block;

width: 375px;
height: 203px;
position: relative;

object-fit: cover;
}

.food1{
background-image: url("../img/menu-img.png");
margin: 35px auto;
margin-bottom: 0;
}

.food2{
background-image: url("../img/menu-img2.png");	
margin: 35px auto;
margin-bottom: 0;
}

.more-button{/*もっと見る*/
background:#F1DFBB; 
color:#612B21;
text-align: center;
margin:0 auto;
display: block;
width: 157px;}
.more-button:hover{
  background-color: #E2694A;
  color: #F1DFBB;
}

.menu-button{/*メニュー*/
background:#F1DFBB; 
color:#612B21;
display: block;
width: 157px;
text-align: center;	
position: absolute;
right: 15px;
bottom: 5px;
}
.menu-button:hover{
  background-color: #E2694A;
  color: #F1DFBB;
}

iframe{
 max-width: 100%; /* 最大幅画像の原寸 */
 height: auto;/* 縦横比維持 */
 margin: 0 auto;
display: block;
}


.INFO{
padding-left: 25px;
padding-right: 25px;	
}



.small{
color: #612B21;
}

footer{
background:#F1DFBB;	
color: #612B21;
text-align: center;
margin-top: 50px;
padding-top: 20px;
}

/*--------------------*/

.about1{
width: 70%;
height: auto;
margin-top: 15%;
padding-bottom: 10px;	
}

.about2{
width: 50%;
height: auto;
/*margin-top: -10%;*/
position: absolute;
top: 20%;
right:0;
}

.about3{
padding-top: 60px;	
}


h4{
margin-top:40px;
font-size: 20px;
text-align: center;	
}




.abo1{
padding:30px 0 15px 0;	
}

.abo2{
padding:30px 0 15px 0;		
}

.abo3{
padding-bottom:40px;	
}

/*-----------------------------*/

.tab-002 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    max-width: 500px;
	padding: 50px 10px;
}

.tab-002 > label {
    flex: 1 1;
    order: -1;
    opacity: .5;
    min-width: 70px;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    background-color: #F1DFBB;
    color: #612B21;
    font-size: .9em;
    text-align: center;
    cursor: pointer;

}

.tab-002 > label:hover {
    opacity: .8;
}

.tab-002 input {
    display: none;
}

.tab-002 > .menu {
    display: none;
    width: 100%;
/*    padding: 10px;*/
    background-color: #F1DFBB;
}

.tab-002 label:has(:checked) {
    opacity: 1;
}

.tab-002 label:has(:checked) + .menu {
    display: flex;
}


/*-----------------------*/

.menu{
display: flex;
flex-wrap: wrap;
padding:15px;
padding-bottom: 60px;
box-sizing: border-box;
}

.item{
width: 50%;
box-sizing: border-box;
padding: 35px 9px 0px;
margin: 0;
}

.itm img{
width: 100%;
height: auto;
padding-top: 60px;
}

.item p{
text-align: center;
padding:10px 0 0 0;
color: #612B21;
}

.btn-icon1{
width:15px;
height: auto;
margin: 0 auto;
padding-top: 5px;
}

.btn-icon2{
width:20px;
height: auto;
margin: 0 auto;
padding-top:9px;	
}


/*↓1200px以上 pcデザイン*/
@media screen and (min-width:820px){

body{
  background-image: url('../img/wood-pc.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
	
.inner{
padding:0 10%;
position: relative;
	}	

.coffee{
width: 30%;
height: auto;
display: block;	
margin: 0 auto;
/*position: relative;
right: -35%;
margin-top: -10%;
margin-bottom:15%;*/
	}	
	
.coffee2{
margin:50px 0 0 30%;
width:9%;
opacity: 0.6;
}	

.coffee3{
/*margin:50px 0 20px 30%;*/
width:9%;
opacity: 0.6;
padding-top: -50%;
display: block;
left: 50%;
}		
	
img {
  margin: auto;
  display: block;
}		
	
.logo2{
width: 20%;	
display: block;
margin: 0 auto;	
	}	
	
	
.con1{
font-family: 'Kaisei Decol', serif;
color: #E2694A;
text-align: center;
font-size:40px;
margin: 10% 0 40px 0;
line-height: 100%;
}

span {
color: #F1DFBB;
font-size: 60%;	
}	
	
.shop{
display: block;
margin: 0 auto;
width:40%;
height: auto;
/*padding-top: 30%;*/
	
}	

	
.con3,.con4,.con5 {
text-align: center;
word-break: break-all; 
text-justify: inter-ideograph;
font-size: 120%;	
margin-left: 20%; 
margin-right: 20%; 
line-height:150%;
	}
	
.about1{
width: 584px;
height: auto;
margin-top: 10%;
padding-bottom: 10px;	
}
	
.about2{
width: 330px;
height: auto;
margin-top: 15%;
padding-bottom: 10px;	
position: absolute;
top: 18%;
right:25%;
}	
/*margin-top: -10%;*/
.about3{
width: 584px;
height: auto;
margin-top: 5%;
padding-bottom: 10px;	
}

.menu-img{
display: flex;	

}
	
	
	
.food1{
margin-right:2%;

}	

.food2{
margin-left:2%;	
}
	

h3{
text-align: center;
}	
	
.sub,.sub2{
text-align: center;
}	
	
	
	
	
}