@charset "utf-8";

/* ===== フォント読み込み ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Noto+Sans+JP:wght@300;400&display=swap');

/* ===== 全体設定 ===== */
body { margin:0; padding:0; background:#fff; font-family:sans-serif; overflow-x:hidden; position:relative; }

/* ===== 白背景オーバーレイ（ページロード用） ===== */
#intro-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:2000; transition: opacity 1s ease; }
#intro-overlay.fade-out { opacity:0; }

/* ===== サンタアニメーション ===== */
#santa-container { position:fixed; width:100%; height:100%; pointer-events:none; z-index:3000; }
#santa { position:absolute; width:260px; transform:translate(-50%,-50%); }
.walk-to-center { animation: walkCenter 3s ease forwards, trot 0.35s infinite alternate; }
@keyframes walkCenter { 0% { left:-200px; top:80%; } 100% { left:50%; top:50%; } }
@keyframes trot { 0% { transform:translate(-50%,-50%) translateY(0); } 50% { transform:translate(-50%,-50%) translateY(-10px); } 100% { transform:translate(-50%,-50%) translateY(0); } }
.move-right-up { animation: rightUp 1.5s ease forwards; }
@keyframes rightUp { 0% { left:50%; top:50%; opacity:1; transform:translate(-50%,-50%); } 100% { left:90%; top:10%; opacity:0; transform:translate(-50%,-50%); } }

/* ===== 雪（背景アニメーション） ===== */
.snow { position:fixed; top:-10px; background:#fff; border-radius:50%; box-shadow:0 0 6px rgba(0,0,0,0.45); pointer-events:none; animation:snowfall linear infinite; z-index:50; }
.snow.hidden { display:none; }
@keyframes snowfall { 0% { transform: translateY(0) translateX(0); } 50% { transform: translateY(50vh) translateX(var(--swing)); } 100% { transform: translateY(100vh) translateX(calc(var(--swing)*-1)); } }

/* ===== メインコンテンツ ===== */
.head-content { padding:50px 0 0 0; }
#main-content { opacity:0; transition: opacity 2s ease; text-align:center; padding:50px 20px; z-index:10; position:relative; }
#main-content.fade-in { opacity:1; }

/* ===== ヘッダー画像 ===== */
.header-image { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 18px rgba(0,0,0,0.2); margin-bottom: 40px; line-height: 0; }
.header-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
#head { width:100%; text-align:center; position:fixed; z-index:9999995; background-color:#85978c; top:0; } 
#head img { width:500px; max-width: 100%; } 
#head2 { display:block; width:100%; height:auto; text-align:center; position:fixed; top:0; left:0; z-index:9999995; background-color:#fff; } 
#head2 img { width:100%; max-width:500px; } 
#head.UpMove { animation:UpAnime 0.5s forwards; } 
@keyframes UpAnime { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-100px); } } 
#head.DownMove { animation:DownAnime 0.5s forwards; } 
@keyframes DownAnime { from { opacity:0; transform:translateY(-100px); } to { opacity:1; transform:translateY(0); } }

/* ===== ストーリーカード（商品紹介やストーリー） ===== */
.story-card { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1400px; margin:0 auto 100px auto; opacity:0; transform:translateY(30px) scale(0.95); flex-wrap:wrap; transition: all 0.8s ease; }
.story-card.left-img { flex-direction: row; }
.story-card.right-img { flex-direction: row-reverse; }
.story-card .story-img { flex:0 0 55%; max-width:52%; height:auto; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.25); margin:0 20px; }
.story-card .story-text { flex:0 0 35%; max-width:38%; padding:20px; }
.story-card .story-text h3 { margin-top:0; font-size:2em; color: #333333; }
.story-card .story-text p { margin:20px 0 40px 0; font-size:1.2em; color: #333333; }
.story-text .item-desc { font-size: 1rem; line-height: 1.8; text-align: left; color: #333333; margin: 5px 0; }
@keyframes pulse { 0%,100% { transform: scale(1); box-shadow:0 4px 8px rgba(233,78,119,0.3); } 50% { transform: scale(1.05); box-shadow:0 6px 12px rgba(233,78,119,0.5); } }
.story-subimage img { width:100%; max-width:350px; display:block; margin:10px auto; border-radius:8px; }
.limited-badge-outline { display:inline-block; margin-top:8px; padding:4px 12px; border:2px solid #e94e77; color:#e94e77; font-weight:600; border-radius:12px; background:#fff; animation:pulse 2s infinite ease-in-out; }
.story-text .price { position:relative; display:inline-block; padding-bottom:10px; font-weight:600; }
.story-text .price:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:linear-gradient(to right,#d4af37,#f3e9b5); border-radius:3px; }
.allergy-tag { display: flex;
  gap: 10px;
  margin-top: -25px;
}
.allergy-tag span {
  position: relative;
  padding: 2px 8px;
  font-size: 0.8rem;
  color: #8b5e3c;
  border-left: 1px solid #d4bfae;
}
.allergy-tag span:first-child {
  border-left: none;
}

/* ===== ストーリーカード表示アニメーション ===== */
.story-card.left-img { transform: translateX(-50px); }
.story-card.right-img { transform: translateX(50px); }
.story-card.visible { opacity:1; transform:translateX(0) scale(1); transition: all 0.8s ease; }

/* ===== ギャラリーセクション ===== */
.gallery-section { width:100%; padding:60px 0; background:#fff; text-align:center; }
.gallery-title-wrap { text-align:center; opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s ease; max-width:90%; margin:0 auto; }
.gallery-title-wrap.visible { opacity:1; transform:translateY(0); }
.gallery-title { font-family:'Cormorant Garamond', serif; font-size:2.6rem; font-weight:500; letter-spacing:2px; display:inline-block; padding:12px 25px 10px; color:#6b4a3b; position:relative; margin:0 auto; }
.gallery-title-line-bottom { height:2px; width:0; background:linear-gradient(to right,#e9d7b9,#c5a97d,#e9d7b9); border-radius:2px; margin:12px auto 0; display:block; transition: width 1s ease; }
.gallery-title-wrap.visible .gallery-title-line-bottom { width:150px; }
.gallery-catchcopy { font-family:'Noto Sans JP',sans-serif; font-weight:300; font-size:1.1rem; line-height:1.8; color:#6b4a3b; margin-top:18px; margin-bottom:35px; opacity:0; transform:translateY(10px); transition:opacity 1.2s ease 0.3s, transform 1.2s ease 0.3s; }
.gallery-title-wrap.visible .gallery-catchcopy { opacity:1; transform:translateY(0); }
.gallery-scroll { display:flex; justify-content:center; overflow-x:auto; gap:25px; padding:10px 50px 30px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin:0 auto; }
.gallery-scroll::-webkit-scrollbar { display:none; }
.gallery-item { min-width:180px; flex:0 0 auto; scroll-snap-align:center; text-align:center; }
.gallery-item img { width:180px; height:180px; object-fit:cover; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:transform 0.3s ease; }
.gallery-item img:hover { transform:scale(1.07); }
.gallery-item p { font-size:1rem; margin-top:10px; color:#333; }
.gallery-link { position:relative; display:inline-block; }
.gallery-overlay { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-family:'Cormorant Garamond', serif; font-size:1.4rem; letter-spacing:1px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.4); background:rgba(0,0,0,0.15); opacity:0; transition:opacity 0.35s ease; border-radius:14px; }
.gallery-link:hover .gallery-overlay { opacity:1; }

/* ===== プロモーション画像 ===== */
.promo-image-section { width:100%; margin:0; padding:0; position:relative; background:#fff; }
.promo-image-wrap { position:relative; width:100%; overflow:hidden; }
.promo-image-wrap:hover img { transform:scale(1.05); }
.promo-img { width:100%; height:auto; display:none; object-fit:cover; filter:brightness(0.8); transition:transform 0.5s ease; }
.pc-img { display:block; }
.promo-text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; text-align:center; z-index:2; opacity:0; transition:all 1s ease; }
.promo-text h2 { font-family:'Cormorant Garamond', serif; font-size:3rem; margin:0 0 15px 0; text-shadow:2px 3px 12px rgba(0,0,0,0.6); }
.promo-text p { font-family:'Noto Sans JP', sans-serif; font-size:1.2rem; margin:0; text-shadow:1px 2px 8px rgba(0,0,0,0.5); }
.promo-image-wrap.visible .promo-text { opacity:1; transform:translate(-50%, -50%); }

/* ===== 1商品紹介セクション ===== */
.single-item-section { width:100%; margin:0; padding:40px 0 80px; background:#fdf7f0; text-align:center; }
.single-item-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.single-item-slider { width:90%; max-width:800px; margin:0 auto 30px; }
.swiper-slide img { width:100%; height:auto; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.swiper-button-next,.swiper-button-prev { color:#fff; }
.swiper-pagination-bullet { background:#fff; }
.swiper-pagination-bullet-active { background:#fff; }
.ellipse-shadow { box-shadow:0 15px 40px rgba(0,0,0,0.15); transition:transform 0.5s ease, box-shadow 0.5s ease; }
.ellipse-shadow:hover { transform:translateY(-8px); box-shadow:0 25px 60px rgba(0,0,0,0.18); }
.item-title { font-family:'Cormorant Garamond', serif; font-size:2.0rem; margin-bottom:10px; color:#4b3f36; }
.item-sub { max-width:600px; font-family:'Noto Sans JP', sans-serif; font-size:1.1rem; color:#6a6157; margin-bottom:25px; display:inline-block; text-align:left; margin:15px auto 0 auto; }
.item-btn { display:inline-block; padding:12px 40px; border:1px solid #4b3f36; color:#4b3f36; font-size:1rem; text-decoration:none; border-radius:30px; transition:all 0.3s ease; }
.item-btn:hover { background:#4b3f36; color:#fff; }

/* ===== ボックス・スケジュール ===== */
.box { background:#fffdf5; border:1px solid #ddd; padding:20px; margin-bottom:0; border-radius:6px; }
.box h3 { border-left:6px solid #dfeed5; padding-left:10px; margin-bottom:15px; font-size:1.5rem; }
.red { color:#d9534f; font-weight:bold; }
.schedule { width:100%; border-collapse:collapse; }
.schedule th,.schedule td { border-bottom:1px solid #ddd; padding:10px; vertical-align:top; }
.schedule tr:first-child th,.schedule tr:first-child td { border-top:2px solid #888; }
.schedule tr:last-child { border-bottom:2px solid #888; }
.schedule th { background:#dfeed5; width:30%; font-weight:bold; }
.note { color:#d9534f; font-size:0.9em; }
.notes { font-size:0.9em; margin-top:15px; padding-left:1.2em; }
.notes li { margin-bottom:6px; list-style:none; }

/* ===== フッター ===== */
.footer { color:#808080; background:#e5e5e5; text-align:center; padding:30px; } 
.footer a { color:#808080; text-decoration:none; } 
.footer a:hover { text-decoration:underline; } 
.footer .footermenu { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:center; } 
.footer .footermenu li { margin:0; padding:0 20px; } 
.footer .copyright { margin:0; padding:20px 0 0 0; font-size:13px; }

/* ===== PC専用表示 ===== */
@media (min-width:1024px){ .openbtn,#g-nav{ display:none; } }

/* ===== レスポンシブ（スマホ） ===== */
@media(max-width:768px){
body { overflow-x:hidden; }
/* ヘッダー画像・ロゴ調整 */
#head2 { display:block; }
#head2 img { width:100%; max-width:100%; }
/* メニュー開閉 */
#g-nav{ position:fixed; z-index:999; top:0; left:-105%; width:100%; height:100vh; background:#000; opacity:0.6; transition:all 0.3s; }
#g-nav.panelactive{ left:0; }
#g-nav.panelactive #g-nav-list{ position:fixed; z-index:999; width:100%; height:100vh; overflow:auto; -webkit-overflow-scrolling:touch; }
#g-nav ul{ position:absolute; z-index:999; top:0%; left:50%; transform:translate(-50%,-50%); }
#g-nav li{ list-style:none; text-align:left; }
#g-nav li a{ color:#fff; text-decoration:none; padding:7px 0; display:block; text-transform:lowercase; letter-spacing:0.1em; font-size:20px; font-style:italic; font-family:'PT Serif', serif; }
.openbtn{ position:fixed; z-index:9999999999999999999999999; top:60px; left:10px; cursor:pointer; width:50px; height:50px; background:#fff; border-radius:3px; }
.openbtn span{ display:inline-block; transition:all .4s; position:absolute; left:14px; height:3px; border-radius:2px; background-color:#666; width:45%; }
.openbtn span:nth-of-type(1){ top:15px; }
.openbtn span:nth-of-type(2){ top:23px; }
.openbtn span:nth-of-type(3){ top:31px; }
.openbtn.active span:nth-of-type(1){ top:18px; left:18px; transform:translateY(6px) rotate(-45deg); width:30%; }
.openbtn.active span:nth-of-type(2){ opacity:0; }
.openbtn.active span:nth-of-type(3){ top:30px; left:18px; transform:translateY(-6px) rotate(45deg); width:30%; }

/* ヘッダー縦長調整 */
.head-content { padding: 0 !important; margin: 0 !important; padding-top: 80px;}
.header-image { aspect-ratio: unset; height: auto; }
.header-image img { height: auto; width: 100vw !important; padding-top: 80px; }

/* ストーリーカード縦並び化 */
.story-card{ flex-direction:column !important; margin:0 auto 20px auto; max-width:100%; } 
.story-card .story-img{ flex: 0 0 auto; width: 100%; height: auto; max-width:100%; margin:10px 0; } 
.story-card .story-text{ flex:0 0 100%; max-width:100%; margin:10px 0; } 
.story-card .story-text h3{ margin-top:0; font-size:1.5em; color:#333; text-align:center;} 
.story-card .story-text p{ margin:20px 0 40px 0; font-size:1em; color:#333; }

/* ギャラリー文字調整 */
.gallery-section { width:100%; padding:10px 0; background:#fff; text-align:center; }
.gallery-title{ font-size:2.2rem; }
.gallery-catchcopy{ font-size:0.7rem; line-height:1.7; padding:0 10px; }
.gallery-scroll { padding:10px 10px 30px; }

/* プロモーション文字調整 */
.promo-text h2{ font-size:1.3rem; }
.promo-text p{ font-size:0.7rem; }
.promo-image-section{ margin:0; margin-top:-40px; }
.pc-img{ display:none; }
.sp-img{ display:block; }

/* 1商品紹介縦幅調整 */
.single-item-section{ padding:40px 0 0 0; }
.single-item-img{ width:280px; height:320px; }
.single-item-text .item-title { font-family:'Cormorant Garamond', serif; font-size:1.6rem; margin-bottom:10px; color:#4b3f36; }
.single-item-text .item-sub{ font-size:0.9rem; padding:0 20px 20px 20px; }
.item-btn{ padding:10px 30px; }

/* 情報ボックス縦並び化 */
.info-wrap.two-columns{ flex-direction:column; gap:20px; }
.info-box{ flex:0 0 100%; }
.info-wrap.schedule{ padding:15px; }
.schedule-note{ font-size:0.95rem; }

/* スケジュール縦並び化 */
.schedule th,.schedule td{ display:block; width:100%; }
.schedule th{ border-bottom:none; margin-top:10px; }
.schedule tr:first-child th,.schedule tr:first-child td{ border-top:0; }
.schedule tr:last-child{ border-bottom:0; }
.ellipse-shadow { box-shadow:0 15px 40px rgba(0,0,0,0.15); transition:transform 0.5s ease, box-shadow 0.5s ease; } 
.ellipse-shadow:hover { transform:translateY(-8px); box-shadow:0 25px 60px rgba(0,0,0,0.18); } 
.item-title { font-family:'Cormorant Garamond', serif; font-size:2.4rem; margin-bottom:10px; color:#4b3f36; } 
.item-sub { max-width:600px; font-family:'Noto Sans JP', sans-serif; font-size:1.1rem; color:#6a6157; margin-bottom:25px; display:inline-block; text-align:left; margin:15px auto 0 auto; } 
.item-btn { display:inline-block; padding:12px 40px; border:1px solid #4b3f36; color:#4b3f36; font-size:1rem; text-decoration:none; border-radius:30px; transition:all 0.3s ease; } .item-btn:hover { background:#4b3f36; color:#fff; } 

/* ===== ボックス・スケジュール ===== */ 
.schedule th,
  .schedule td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .schedule th {
    background:#dfeed5;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    border-bottom: none;
  }

  .schedule td {
    padding: 10px 12px;
    border-bottom:1px solid #ddd;
  }

.schedule {
    width: 100%;
    table-layout: fixed;
  }

  .box {
    padding: 10px;
  }

  .box h3 {
    margin: 10px 0 15px;
  }

 }