*,
::before,
::after{
  box-sizing:border-box;
  border-style:solid;
  border-width:0;
  margin:0;
}

body{
  font-family: "Mochiy Pop P One", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
}

ul{
  padding:0;
  list-style:none;
}

a,p,h1,h2{
  background:transparent;
  text-decoration:none;
  color:#4e4e4e;
}

/* 見出しの装飾 */
.headline{
  display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
}
.headline::before,
.headline::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #8b4513;
}
.headline::before {
	margin-right: 20px;
}
.headline::after {
	margin-left: 20px;
}

/* ヘッダー */
header.menu_header{
  padding:1rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding:1rem;
}

/* ロゴ部分 */
.logo{
  width:180px;
  height:90px;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* メニュー */
.nav{
  margin:0;
}
.nav ul{
  display:flex;
  align-items:center;
}
.nav li{
  padding:0.5rem;
  display:flex;
  align-items:center;
}
.nav a{
  padding-left:1rem;
  font-size:18px;
}

/* パンアイコン */
.nav img{
  position:relative;
  width:25px;
  height:25px;
  left:0.5rem;
}

/* ホバーアニメーション */
.nav ul li a:hover {
  color:#8b4513;
  font-weight: bold;
}

/* インフォメーション */
.info{
  width:100%;
  padding: 0.75rem 0;
  border-bottom: solid 2px #CCCCCC;
}
.info-data a{
  color:#4e4e4e;
}

/* 営業時間 */
.nav p.open{
  text-align:right;
}

/* トップ画 */
.top_container{
  margin:0;
}
.top_container img{
  width: 100%;
  max-height:840px;
  margin:0;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 780px){
    .pc { display: none !important; }
    .sp { display: block !important; }
    .top_container img{
      width: 100%;
      max-height:700px;
      margin:0;
    }
}

/* コンテンツ */
.container {
  margin-top:5rem;
  margin-bottom:5rem;
  display:block;
}
.container h1{
  margin-top:2rem;
  text-align:center;
  margin-bottom:0;
  padding:0;
}

.con1 {
  padding-top:1%;
  padding-bottom:5%;
  padding-left:15%;
  padding-right:15%;
  display:flex;
  margin-top:1rem;
}
.con1 img{
  margin:1rem;
  width:250px;
  height:auto;
  padding:0;
  background-image:linear-gradient(135deg,transparent 1%,rgba(255, 255, 255, 0.5)100%);
  background-color:#DFCFBF;
  border-radius:10px;
  border:1px solid #ffefd5;
  /* ぼかし */
  backdrop-filter:blur(30px);
  box-shadow:0 5px 20px rgb(201, 201, 201);
  display:flex;
  flex-direction:column;
}
.con1.box{
  display:block;
}
.con1 p{
  margin-top:1rem;
}


/* 商品紹介 */
.con2 {
  padding-top:1%;
  padding-bottom:5%;
  display:block;
  flex-direction: row;
  justify-content: space-between;
  margin-top:1rem;
  padding-left:15%;
  padding-right:15%;
}

.con2 ul{
  width: 100%;
  height:100%;
  padding:1rem;
  list-style:none;
  display:flex;
  justify-content:left;
  margin:auto;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.con2 li{
  width:120px;
  min-height:50px;
  margin-right:2rem;
  background-color:#ffefd5;
  border-radius:30px;
  border:2px solid #8b4513;
  /* ぼかし */
  backdrop-filter:blur(30px);
  box-shadow:0 5px 20px rgb(201, 201, 201);
  display:flex;
  flex-direction:column;
}

.con2 div.image{
  width:150px;
  margin:0;
}
.con2 div.image img{
  width:80px;
  height:80px;
  margin-left:1rem;
  margin-top:1rem;
}
.con2 h2.title{
  text-align:center;
  font-size:16px;
  margin-bottom:1rem;
}

/* Access用 */
.con3 {
  padding-top:1%;
  padding-bottom:5%;
  padding-left:15%;
  padding-right:15%;
  display:block;
  margin-top:1rem;
}

/* フッター */
.menu_footer{
  padding:2rem;
  margin:0;
}
.bar{
  background:radial-gradient(circle 7px, currentColor 90%, transparent) bottom var(--d, -6px) left 50%/12px 16px repeat-x;
  padding:0.3rem;
  color:#8b4513
}
.nav_f{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0.3rem;
  background:#ffefd5;
}
.nav_f ul{
  display:flex;
}
.nav_f ul li{
  padding:1rem;
}
p.copyright{
  text-align:center;
  padding:20px;
  background:#ffefd5;
}

/* 電話・HBメニュー非表示 */
#menu-btn,.nav-hidden,.contact-btn,.tel,.logo-h{
  display:none;
}

/* スマホ用 */
@media (max-width: 780px){
/* パンアイコン */
.nav li img{
  position:relative;
  left:0.5rem;
  width:25px;
  height:25px;
}
  #menu-btn{
    display:block;
    width:30px;
    height:20px;
    position:fixed;
    top:1.2rem;
    right:1rem;
    z-index:3;
  }
  #menu-btn span,
  #menu-btn span::before,
  #menu-btn span::after{
    content:"";
    height:4px;
    width:100%;
    border-radius:3px;
    background:#ff6600;
    position:absolute;
    transition: 0.2s;
  }
  #menu-btn span{
    top:0;
  }
  #menu-btn span::before{
    top:8px;
  }
  #menu-btn span::after{
    top:16px;
  }
  #nav-input:checked ~ #menu-btn span{
    top:8px;
    transform:rotate(45deg);
    background:#ff6600;
  }
  #nav-input:checked ~ #menu-btn span::before{
    opacity:0;
  }
  #nav-input:checked ~ #menu-btn span::after{
    top:0;
    transform:rotate(-90deg);
    background:#ff6600;
  }
  header.menu_header{
    padding:1px;
  }
  .contact-btn{
    display:inline-block;
  }
  .logo{
    width:120px;
    height:60px;
  }

  input[type="checkbox"] {
    opacity: 0;
    visibility: hidden;
    position: absolute;
  }
  
  .nav{
    width:100%;
    height:100vh;
    position:fixed;
    top:0px;
    right:0;
    z-index:2;
    visibility: hidden;
    background:#D4B18F;
    transition:0.5s;
    opacity: 0;
  }
  .nav ul{
    display:grid;
    padding-top:4rem;
    grid-template-columns: repeat(2, auto);
  }
  .nav ul li{
    padding:0;
    margin:1.5rem;
    background: #f8ecda;
    border-radius: 30px;
  }

  #nav-input:checked ~ .nav{
    opacity:0.99;
    visibility:visible;
  }
  .nav p.open{
    text-align:center;
    margin-bottom:1rem;
  }
  .nav a{
    padding:1rem;
    display:block;
    width:100%;
    }

  .tel {
    display:block;
    text-align:center;
    margin-left:1rem;
    margin-right:1rem;
    margin-bottom:1rem;
  }
  .tel img{
    width:350px;
    height:70px;
  }
  .logo-h {
    display:block;
    text-align:center;
    background:#fff;
  }
  .logo-h img{
    width:250px;
    height:125px;
  }


  /* 電話アイコン */
  .contact-btn a{
    position:absolute;
    top:1rem;
    right:5rem;
  }
  .contact-btn img{
    width: 30px;
    height:30px;
  }
  #nav-input:checked ~ nav.nav{
    opacity:1;
  }
  /* フッターのスマホデザイン */
  .nav_f{
    justify-content:center;
    align-items:center;
  }
  .nav_f ul{
    justify-content:center;
    align-items:center;
  }
  .nav_f ul li{
    padding:0.5rem;
    font-size:15px;
  }
  /* 横並びを縦並びに変更 */
  .con1 {
    padding-top:1%;
    padding-bottom:5%;
    padding-left:15%;
    padding-right:15%;
    background:#FFF;
    display:block;
    flex-direction: row;
    justify-content: space-between;
    margin-top:1rem;
  }
  .con1 img{
    margin-left:2.5rem;
  }
} /* メディアクエリここまで */