:root{--bg:#fff;--ink:#442b1e;--muted:#442b1e;--brand:#6688bb;--brand-ink:#fff;--alt:#faf7f5;--line:#e5e7eb;--radius:16px;--shadow:0 4px 16px rgba(0,0,0,.06);}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family: 'Futura','Arial','Helvetica','ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic',sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;}
img{max-width:100%;display:block}
.container{width:min(1520px,95%);margin-inline:auto}
.mt-s{margin-top:1rem}
.center{text-align:center}
.muted{color:var(--muted)}
.price{font-weight:700;margin-top:auto;}



/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem 1rem;border-radius:8px}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;background:url(../images/logo.png)no-repeat left center/85px;margin-top: 10px;}
.logo{font-weight:900;letter-spacing:.02em;text-decoration:none;color:var(--ink);display:flex;align-items:center;display: inline-block;margin-left: 85px;}
h1{font-size:30px;}

/* Nav */
.menu-btn{display:none}
/* .menu-icon{display:flex;flex-direction:column;gap:4px;cursor:pointer}
.menu-icon span{width:26px;height:2px;background:var(--ink);display:block} */
.site-nav{position:fixed;inset:56px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .2s ease;box-shadow:var(--shadow)}
.site-nav ul{list-style:none;margin:0;padding:.75rem .75rem;display:grid;gap:.25rem}
.gMenu a{display:block;padding:.75rem 1rem;border-radius:10px;text-decoration:none;color:var(--ink)}
.gMenu a:hover{background:var(--alt)}
/* .menu-btn:checked ~ .site-nav{transform:translateY(0)} */
.menu{display:flex;cursor:pointer;z-index: 9999;}


/* Desktop nav */
@media (min-width: 960px){
  /* .menu-icon{display:none} */
  .site-nav{all:unset}
  .site-nav{display:block}
  .site-nav ul{display:flex;gap:1rem;align-items:center}
  .site-nav a{padding:.5rem .75rem}
  /* .menu-btn{display:none} */

}
/* Buttons */
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:999px;border:1px solid var(--line);text-decoration:none;width:40%;margin:0 auto;}
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);text-align: center;}
.btn.ghost{background:#fff;color:var(--ink)}
.btn:hover{filter:brightness(.95)}

/* Sections */
.section{padding:3.25rem 0}
.section-alt{background:var(--alt)}
.section-title{font-size:1.6rem;margin:0 auto 2rem;text-align: center;letter-spacing: .2em;font-weight:bolder;}
.section-lead{margin:-.4rem 0 1.2rem;color:var(--muted)}
.link-arrow{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.link-arrow:hover{border-color:var(--ink)}

/* News */
.news-list{list-style:none;padding:0;margin:0 0 .5rem;display:grid;gap:.5rem}
.news-list li{display:flex;gap:.75rem;align-items:baseline;border-bottom:1px solid #442b1e;}
.news-list time{font-variant-numeric:tabular-nums;color:var(--muted);min-width:7ch}
.news-list li a:hover{text-decoration: 1px underline solid var(--brand);color:var(--brand)}
.news-list .more {display:block;border-bottom:none;text-align: right; margin-top: 8px;}
@media (max-width:768px){
  .news-list li{font-size: 14px;}
    .header-inner h1{font-size:25px;}
}


/* Product cards */
.card-scroller{display:grid;grid-template-columns:18%18%18%18%18%;gap:1% 2.5%;padding-bottom: .5rem;}
.card{text-align: center;width:100%;}
.card .muted:hover {text-decoration:underline 1px solid #442b1e;}
.card-title{margin:.5rem 0 .25rem;font-size:1.15rem;font-weight: 600;}
.card-ph{border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;color:#777;overflow: hidden;box-shadow:1px 2px 3px#cccccc;}
#products .mt-s,#stores .mt-s,#contact .mt-s{margin-top:3rem}
@media (max-width:768px){
  .card-scroller{grid-template-columns:48%48%;}
}
@media (max-width:390px){
  .card-scroller{grid-template-columns:100%;gap:1rem}
}
.card a {display: block;} 



/* Stores */
.store-bg{background:var(--bg)}
.stores-grid{display:grid;gap:1rem}
.store-card{display:grid;grid-template-columns:120px 1fr;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.map-ph{width:100%;height:100%;min-height:100px;border-radius:12px;background:#e5e7eb;display:flex;align-items:center;justify-content:center;color:#777}
.store-card .map-ph .mapImg{height:100%;object-fit:cover;object-position: 30% center;}

@media (min-width:960px){
  .stores-grid{grid-template-columns:repeat(2,1fr)}
}

/* Voices */
.voice-grid{display:grid;gap:1rem}
.voice{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow); }
.voice cite{display:block;margin-top:.5rem;color:var(--muted);font-style:normal;text-align: right;font-size: 14px;}
@media (min-width:960px){
  .voice-grid{grid-template-columns:repeat(3,1fr)}
}

/* Contact */
.contact-bg{background:var(--alt)}
.contact-form{display:grid;gap:1rem;}
.form-row{display:grid;gap:.4rem}
input,textarea{font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
input:focus,textarea:focus{outline:2px solid rgba(231,111,81,.35);border-color:var(--brand)}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#ebe0d8;color:#442b1e;}
.footer-inner{padding:0.8rem 0;display:grid;gap:.25rem}
.footer-nav{list-style:none;margin:0;padding:0;}
.footer-nav li a:hover{text-decoration: underline solid #442b1e;}
.brand{font-weight:800; font-size:26px;}
.copy{color:var(--muted);text-align: center;margin-top: 10px;}
.nav-wrap{display: flex;justify-content: space-around;}
.nav-wrap .footerLogo{width:85px;margin-top: 4px;opacity: .8;}
.nav-wrap .Logomin{list-style:none;display:flex;margin:0;padding:0;opacity: .8;}
.nav-wrap .Logomin a{display:block;margin:1px;padding:1px;}
.nav-wrap .Logomin img{width:40px;}
@media (max-width:680px){
.footer-nav li{font-size: 12px;}
}
.nav-wrap h4 {font-weight: bold;}

/* Generic placeholders */
.ph{user-select:none}

/* Utilities */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap}


/* スライダー */
.wrapper {position: relative;}
.bx-wrapper {
  box-shadow: none;
  border: none;
}
  .bx-viewport img{
  height: 680px;
  width:100%;
  object-fit:cover;
}
.bx-wrapper .bx-controls-direction a{
  z-index: 1;
}
@media screen and (max-width: 396px) {
 .bx-viewport img{
    height: 500px;}
}



/* キャッチコピー */
.slider-copy {
  position: absolute;
  top: 80%;
  left: 0%;
  transform: translate(0%, -50%);
  z-index: 2;
  text-align: center;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.4); /* 半透明の背景で読みやすく */
  font-size: 22px;
  font-weight:lighter;
  /* font-family: Arial, Helvetica, sans-serif; */
  letter-spacing: .5em;
  color:var(--bg);
}
@media screen and (max-width: 780px) {
.slider-copy {
  font-size: 20px;}
}



 /* 右下に画像バナーを配置 */
.floating-banner1 {
  position: fixed;
  bottom: -20px; /* 画面下から20pxの距離 */
  left: -7px;  /* 画面右から20pxの距離 */
  width: 125px;  /* バナーの幅を指定 */
  height: auto;  /* 高さを自動調整 */
  z-index: 9999;  /* 他の要素よりも前面に表示 */
}
.floating-banner1 img {
  width: 100%;  /* バナー内で画像の幅を100%にする */
  height: auto; /* 画像の比率を保ちながら自動調整 */
}
@media screen and (max-width: 780px) {
  .floating-banner1 {
      width: 95px;
  }
}

/***追従するトップへ戻るボタン***/
.page-top {
    position: fixed;
    right: 5px;
    bottom: 40px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 100%;
    line-height: 1.5rem;
    color: #442b1e;
    padding: 0 0 0 35px;
    border-top: solid 1px;
    z-index: 9999;
}
.page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}


/***トップへ戻るボタンここまで***/

/* ハンバーガーメニュー */
/* メニューを画面上部に固定表示しています */

@media screen and (max-width: 960px) {
  .menu{display:block;}
.gMenu {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 99;
}
/* メニューアイコンを画面右上に固定しています */
.gMenu .menu-icon {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 12px;
  padding-top: 5px;
  height: 12px;
}
/* メニューアイコン（三本線）の真ん中の線です */
.gMenu .menu-icon .navicon {
  background: #ffc107; /* 色は自由に変更可能です */
  display: block;
  height: 2px; /* 太さ */
  width: 31px; /* 長さ */
  position: relative;
  transition: background .4s ease-out; /* 形が変わる時のアニメーション */
}
/* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
.gMenu .menu-icon .navicon::before,
.gMenu .menu-icon .navicon::after {
  background: #ffc107; /* 色は自由に変更可能です */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .4s ease-out; /* 形が変わる時のアニメーション */
  width: 100%;
}
.gMenu .menu-icon .navicon::before {top: 10px;} /* 位置を上にずらしています */
.gMenu .menu-icon .navicon::after {top: -10px;} /* 位置を下にずらしています */
/* 表示されるメニューです */
.gMenu .menu {
  background-color: rgba(255,255,255,0.9);
  overflow: hidden;
  max-height: 0; /* ★最初は高さを0にして非表示状態に */
  transition: max-height .6s; /* 表示されるときのアニメーション */
  text-align: center;
}
/* メニュー部分のデザインです */
.gMenu .menu li:first-of-type {
  padding-top: 25px;
  padding-top: 50px;
}
.gMenu .menu li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  text-transform: uppercase;
}
.gMenu .menu li a:hover {
  background-color: #ebe0d8;
}
/* チェックボックスは常に非表示です */
.gMenu .menu-btn {
  display: none;
}
/* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
.gMenu .menu-btn:checked ~ .menu {
  max-height: 388px; /* ★チェックボックスがオンの時高さを338pxにして表示させます */
  transition: max-height .6s;
}
/* メニューボタンの中央の線を非表示に */
.gMenu .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}

/* メニューボタンの上下の線を45度傾けて✕印を作ります */
.gMenu .menu-btn:checked ~ .menu-icon .navicon::before {transform: rotate(-45deg);top: 0;}
.gMenu .menu-btn:checked ~ .menu-icon .navicon::after {transform: rotate(45deg);top: 0;}
/* サイトに合わせてオリジナルカスタマイズ */
.gMenu .menu-icon {
  top: 26px;
}
.gMenu .menu-icon .navicon,
.gMenu .menu-icon .navicon::before,
.gMenu .menu-icon .navicon::after {
  background: #442b1e;
}
}

/* 商品一覧 */
.itembox{
  display: flex;
  width:100%;
  margin:0 auto 80px;
  height:100%;
}
.itembox .media-ph{padding:0 10px;}
.product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCで4列 */
  gap: 1.5rem;
}
.product-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.product-item h3 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.1rem;
  color: #442b1e;
  text-align: center;
}

.product-item p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
}




/* スマホ・タブレット対応 */
@media (max-width: 1024px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }
}

/* こだわり */

.about-item {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin:20px auto 4rem;
  align-items: stretch;
}

.about-item:nth-child(even) {
  flex-direction: row-reverse; /* 交互に左右を切り替え */
}

.about-image {
  flex: 1 1 45%;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.about-text {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* テキストを中央寄せにする */

}

.about-text h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #442b1e;
  font-weight: 800;
font-size:1.2rem;
}

.about-text p {
  line-height: 2.0;
}

/* スマホ用 */
@media (max-width: 768px) {
  .about-item {
    flex-direction: column !important;

  }
}
.about-image,
.about-text {
  min-height: 100%;
}



/* 店舗案内 */
.access-info {
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 56.25%; /* 16:9比率を確保 */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  margin-bottom: 10px;
}

.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.card-ph img{
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.card-ph:hover img{
     transform: scale(1.1);
}