@charset "utf-8";

html {
	font-size: 16px;
}

@media (max-width: 768px) {
	html {
		font-size: 14px;
	}
}
body{
	margin:0;
	padding:0;
	background:#f9f9f6;
	font-family:serif;
	color:#333;
}
ul, li{
	margin:0;
	padding:0;
	list-style:none;
}
h1{
	margin:0;
	padding:0;
}
a{
	color:#333;
}
a img{
  border:0;
}

/* ヘッダー */
header {
  position: fixed;
  top:0;
  width: 100%;
  height: 64px;
  /*background: #fff; */
  z-index: 1000;
}

/* ハンバーガーメニュー：左上固定 */
.hamburger {
  position: fixed;  /* fixedにすると常に画面左上に */
  top: 25px;
  left: 20px;
  width: 30px;
  height: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 3000; /* ナビより前面 */
}
.hamburger span {
  display: block;
  width:100%;
  height: 1px;
  background: #333;
  transition: all 0.3s ease;
  transform-origin: center;
}
/* ハンバーガー開閉アニメーション */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(2px, 2px);
  position: relative;
  top:2.5px;
}
.hamburger.active span:nth-child(2) {
  transform: rotate(-45deg) translate(2px, -2px);
  position: relative;
  top:-2.5px;
}

/* ロゴエリア */
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ロゴ画像自体のサイズ可変対応 */
.logo img {
  width: 33vw;
  max-width: 160px;
  min-width: 100px;
  height: auto;
  display: block;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* サイドメニュー */
.side-menu {
  position: fixed;
  top: 0;
  left: -250px; /* 初期は左外 */
  width: 250px;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  padding-top: 60px;
  transition: left 0.3s ease;
  z-index: 2500; /* ロゴより前面 */
}
.side-menu.open {
  left: 0; /* 開いたら画面内 */
}
.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-menu ul li {
  padding: 15px 20px;
}
.side-menu ul li a {
  text-decoration: none;
  color: #333;
  display: block;
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2400; /* サイドメニューより背面 */
  display: none;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* ------------------------------ トップコンテント画像 ------------------------------ */
.image-wrapper {
  position: relative;
  overflow: hidden;
}
.masked-image {
  width: 100%;
  height: 100%;
  display: block;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f9f9f6;
  transform: translateX(0%);
  transition: transform 0.3s ease-out;
  z-index: 2;
}
.image-wrapper.animate .mask {
  transform: translateX(100%);
}

/* ------------------------------ メインイメージ ------------------------------ */
.slider-container {
	position: relative;
	padding-top:60px;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
@media (max-width: 768px) {
	.slider-container {
		aspect-ratio: 5 / 5;
	}
}
.slider-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
}
.slider-image.active {
	opacity: 1;
	z-index: 1;
}
#mainImage img {
	width:100%;
	height:auto;
}

/* ------------------------------ フィロソフィー ------------------------------ */
#philosophy{
  margin:30px 0 100px;
  text-align:center;
  font-family:serif;
  line-height:180%;
  /*letter-spacing:0.05em;*/
  font-size:0.9rem;
}
#philosophy_title{
  margin-bottom:15px;
  font-size:1.8rem;
}
.line {
  opacity: 0;
  animation: fadeLine 1s ease-out forwards;
}
.line:nth-child(1) { animation-delay: 0.1s; }
.line:nth-child(2) { animation-delay: 1.0s; }
.line:nth-child(3) { animation-delay: 1.5s; }
.line:nth-child(4) { animation-delay: 1.9s; }
.line:nth-child(5) { animation-delay: 2.2s; }
.line:nth-child(6) { animation-delay: 2.5s; }
.line:nth-child(7) { animation-delay: 2.7s; }
.line:nth-child(8) { animation-delay: 2.8s; }
.line:nth-child(9) { animation-delay: 4s; margin-top:15px;}

@keyframes fadeLine {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h2{
  font-size:1.2em;
  font-weight:normal;
}
h2.content_title{
  margin:20px 0;
  font-size:2.0em;
  font-weight:normal;
  text-align:center;
  font-family: 'Gloock', sans-serif;
  /*font-style:italic;*/
}
.content_title_text{
  text-align:center;
}

/* 商品紹介 */
#products{
  margin:100px 5%;
}
ul.image-grid {
  list-style: none;
  padding: 10px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr; /* スマホでは1列 */
  gap: 16px;
}

ul.image-grid li {
  overflow: hidden;
}

ul.image-grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* タブレット以上で2列 */
@media (min-width: 600px) {
  ul.image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* デスクトップ以上で3列 */
@media (min-width: 900px) {
  ul.image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* MOREボタン */
.btn_more{
  display:block;
  margin:20px auto 0;
  padding:15px 30px;
  width:180px;
  text-align:center;
  border:1px solid #333;
  text-decoration:none;
  transition: 0.3s;
}
.btn_more:hover{
  color:#999;
  border:1px solid #999;
}

/* お店について */
#shop_concept{
  margin:0 5%;
}
.top_content_wrapper,
.top_content_wrapper_right{
  display:flex;
}
.top_content_wrapper_right{
  flex-direction: row-reverse;
}
.top_content_text{
  width:50%;
  margin:20px 0 0 50px;
}
.top_content_wrapper_right .top_content_text{
  margin:20px 50px 0 0;
}
.top_content_image{
  width:50%;
}
.top_content_image img{
  width:100%;
  height:auto;
}
@media (max-width: 768px) {
  .top_content_wrapper,
  .top_content_wrapper_right{
    display:block;
  }
  .top_content_image{
    margin-bottom:20px;
    width:100%;
  }
  .top_content_text{
    width:100%;
    margin:0;
  }
  .top_content_wrapper_right .top_content_text,{
    margin:0;
  }
}
.text_title{
  margin-bottom:10px;
}

/* -----------------------------------------------------------
Common
----------------------------------------------------------- */
.base_text{
  line-height:160%;
}
/* インスタグラム */
#instagram{
  margin-top:100px;
  text-align:center;
  font-size:1.1rem;
  font-family:serif;
  line-height:180%;
}
#instagram a{
  text-decoration:none;
  transition: 0.3s;
}
#instagram a:hover{
  opacity: 0.6;
}

/* フッター */
#footer{
  margin-top:30px;
  padding:30px 5%;
  width:100%;
  background:#000;
  background-image:url(../images/back2.jpg);
  color:#dedede;
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:0.8rem;
  letter-spacing:0.05em;
}
#footer a{
  color:#fff;
}
#footer_wrapper{
  display:flex;
}
#map,#shop_info{
  width:50%;
}
#map{
  margin:20px 0 0 0;
}
#map img{
  width:100%;
  border:1px solid #444;
}
#shop_info{
  margin:0 0 0 40px;
}
#shop_info_name{
  margin-bottom:5px;
  font-size:1.1rem;
}
@media (max-width: 768px) {
  #footer_wrapper{
    display:block;
  }
  #map,#shop_info{
    width:100%;
  }
  #shop_info{
    margin:30px 0 0 0;
    padding-left:10px;
  }
}
#copyrights{
  margin-top:30px;
  padding:5px;
  text-align:right;
  font-size:0.7rem;
}

/* -----------------------------------------------------------
Top
----------------------------------------------------------- */
#products .image-grid a:hover img{
  opacity: 0.6;
  transition-duration: 0.5s;
}

/* プライス */
#top_price{
  margin:100px 5%;
}

/* プライス */
#top_backnumber{
  margin:70px 5%;
}

/* -----------------------------------------------------------
Content
----------------------------------------------------------- */
#BodyContent{
  margin:60px 0 0;
}
#ContentWrapper{
  margin:0 5%;
}
#ContentWrapper p{
  line-height:180%;
}
p.small_text{
  font-size:0.9em;
}

/* -----------------------------------------------------------
About Us
----------------------------------------------------------- */
.content_title_image_shop{
  width:100%;
  height:400px;
  background-image:url(../images/top013.jpg);
  background-size:cover;
  background-position:center top;
}
.manager_area{
  margin:80px auto 0;
  max-width:900px;
}
.shop_catch{
  padding:20px 0 10px 0;
  font-size:1.3em;
  font-weight:bold;
}
.shop_title{
  margin:0;
  font-size:1.1em;
  font-weight:bold;
}
.shop_title span{
  font-size:0.9em;
}
#shop_masse{
  margin:5px 0;
  font-size:1.1em;
  font-weight:bold;
}
iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
.yanase{
  margin:0 0 10px 0;
  font-size:1.1em;
  font-weight:bold;
}
.manager_area .image-wrapper{
  margin:20px auto;
  max-width:900px;
}
.manager_area .image-wrapper img{
  width:100%;
  height:auto;
  max-width:900px;
}
.about_content_text{
  margin:10px 0 70px;
  font-size:0.9em;
  line-height:220%;
}
h3.about_subtitle{
  margin:30px 0 10px 0;
  font-size:1.1em;
}
div.image-grid2 {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホでは1列 */
  gap: 16px;
}
div.image-grid2 a {
  overflow: hidden;
}
div.image-grid2 img {
  display: block;
  width: 100%;
  height: auto;
}
/* タブレット以上で2列 */
@media (min-width: 600px) {
  div.image-grid2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* デスクトップ以上で3列 */
@media (min-width: 900px) {
  div.image-grid2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -----------------------------------------------------------
Products
----------------------------------------------------------- */
.content_title_image_products{
  width:100%;
  height:400px;
  background-image:url(../images/top011.jpg);
  background-size:cover;
  background-position:center;
}

/* -----------------------------------------------------------
Price List
----------------------------------------------------------- */
.content_title_image_price{
  width:100%;
  height:400px;
  background-image:url(../images/top009.jpg);
  background-size:cover;
  background-position:center;
}
.catch_text{
  margin:30px 0 20px;
  font-size:1.8em;
}
.price_subtitle{
  margin:50px 0 10px -10px;
  font-size:1.4em;
  font-weight:bold;
}
.price_main_text{
  margin:10px 0;
  font-size:1.1em;
  font-weight:bold;
}
.price_image{
  margin:0 0 20px 0;
}
.price_image img{
  width:100%;
  height:auto;
}
.table-wrap {
  overflow-x: scroll;
}
#price_table_pc{
  min-width: 750px;
  margin:0;
  padding:0;
  border:1px solid #ccc;
  border-collapse:collapse;
}
#price_table_pc th,
#price_table_pc td{
  padding:10px;
  width:100px;
  border:1px solid #999;
  border-collapse:collapse;
  font-size:0.8em;
  font-weight:normal;
  text-align:right;
}
#price_table_pc th{
  text-align:center;
  background:#f3f3ea;
}
#price_table_pc td:first-child{
  width:180px;
  text-align:left;
}
.price_attention{
  margin-top:50px;
  padding:30px;
  background:#f3f3ea;
  font-size:0.9em;
}

/* -----------------------------------------------------------
Back Number
----------------------------------------------------------- */
/* ---------------------- LIST ---------------------- */
#wrapper{
  margin:80px 5% 30px;
}
#wrapper .entry img{
  display:block;
  margin:20px 0;
  max-width:100%;
  height:auto;
}
.hentry{
  padding-top:20px;
  border-top:1px solid #666;
}
.post{
  margin:0 0 70px 0;
}
.post h3{
  margin:5px 0 10px 0;
}
.post h3 a{
  text-decoration:none;
}
.post h3 a:hover{
  opacity: 0.6;
}
.more_post{
  margin:30px 0 0 0;
}
.more_post a{
  padding:11px 15px 10px;
  text-decoration:none;
  border:1px solid #999;
  font-size:0.9em;
}
.more_post a:hover{
  opacity: 0.6;
}
.page_top{
  text-align:right;
}
.page_top a{
  text-decoration:none;
}
.page_top a:hover{
  opacity: 0.6;
}
.navigation{
  padding:30px 0 0 0;
  text-align:center;
  font-size:0.9em;
}
.wp-pagenavi .pages{
  padding:5px 10px;
}
.wp-pagenavi .current{
  margin:0 5px;
  padding:5px 10px;
  border:1px solid #333;
  font-weight:bold;
}
.wp-pagenavi a{
  margin:0 5px;
  padding:5px 10px;
  border:1px solid #999;
  text-decoration:none;
  color:#666;
}
.wp-pagenavi a:hover{
  border:1px solid #333;
  color:#333;
}
/* ---------------------- DETAIL ---------------------- */
.breadcrumb{
  display:none;
}
.single_title{
  margin:10px 0 20px 0;
  font-weight:bold;
  font-size:1.1em;
}
.wp_social_bookmarking_light{
  display:none;
}
.postmetadata{
  display:none;
}
.yarpp{
  display:none;
}
#sidebar{
  display:none;
}
.page_back{
  margin:0 5%;
  text-decoration:none;
}
a.page_back:hover{
  opacity: 0.6;
}

/* -----------------------------------------------------------
Contact
----------------------------------------------------------- */
h2 .page_titles_new{
  margin:20px 0 30px;
  text-align:center;
  font-weight:bold;
}
.contact-text{
  margin:20px 0 30px;
}
.wpcf7-text{
  margin:5px 0 30px 0;
  padding:5px;
  border:1px solid #ccc;
}
.wpcf7-select{
  margin:0 0 30px 0;
}
.wpcf7-textarea{
  margin:5px 0 30px 0;
  padding:5px;
  width:100%;
  max-width:700px;
  border:1px solid #ccc;
}
.wpcf7-submit{
  padding:10px 50px;
  background:#333;
  border:0;
  color:#fff;
  font-size:1.0em;
}
.wpcf7-submit:hover{
  background:#666;
}