/* オンラインショップ(BtoC)ページ専用 */
.page-shop{padding-top:0}
.page-shop .site-header{position:relative}
.hand-title{font-family:vdl-penletter,sans-serif;font-weight:700;color:var(--navy);margin:0}
.s-main{color:var(--navy);overflow:hidden}
.s-main section{position:relative;/*max-width:1200px;*/margin:0 auto}
.s-h2{text-align:center;line-height:1.4;margin-bottom:24px}

/* ようこそ */
.s-hero .inner{position:relative;text-align:center;padding:clamp(50px,1vw,100px) 16px 0;z-index:1;}
.s-hero .section-back{top:0;max-width:1300px;width:95%;}
.s-hero .section-back img{height:unset;}
.s-hero-title{line-height:1.35;color:#fff;}
.s-hero-sub{font-size:var(--fs-md);font-weight:700;margin:10px 0 0;text-shadow: 0px 0px 5px #fff;}
.s-hero-img{max-width:1040px;margin:-4px auto 0}
.s-hero-img img{width:100%;height:auto;display:block}

/* 今日はどんなふうに楽しむ */
.s-enjoy{padding:36px 16px 70px}
.s-enjoy .section-back{height: unset;top: -50%;}
.s-h2-fish{width:100px;vertical-align:middle;margin-left:10px}
.s-enjoy-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:910px;margin:0 auto;list-style:none;padding:0}
.s-enjoy-list li{
	background-image: url(../images/bunka/sec05-back.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: bottom;
	padding-bottom: 0.5em;
}
.s-enjoy-list a{display:block;text-align:center;}
.s-enjoy-list img{display:block;width:100%;}
.s-enjoy-list span{display:block;padding-top:8px;font-weight:700;}

/* おすすめ */
.s-rec{padding:70px 16px 60px}
.s-rec .section-back{height:auto;}
.s-rec-grid{position:relative;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px 16px;align-items:end}
.rec{position:relative;display:block;text-align:center;font-weight:700;font-size:var(--fs-base)}
.rec img{display:block;margin:0 auto;height:auto;max-width:100%}
.rec em{display:block;font-style:normal;text-align:right;font-size:var(--fs-sm);margin-top:8px}
.rec-1{grid-column:1;grid-row:1}
.rec-1 img{width:320px}
.s-rec-grid .rec-2{grid-column:2}.s-rec-grid .rec-3{grid-column:3}.s-rec-grid .rec-4{grid-column:4}
.s-rec-mascot{grid-column:1;grid-row:2;position:relative;padding:60px 0 0 60px}
.s-rec-mascot img{position:absolute;left:0;bottom:-70px;width:100%;max-width: 300px;}
.rec-5{grid-column:2;grid-row:2}.rec-6{grid-column:3;grid-row:2}.rec-7{grid-column:4;grid-row:2}
.rec-2,.rec-3,.rec-4{padding-left:34px}
.rec-5,.rec-6,.rec-7{padding-left:34px}

/* ひとふり */
.s-h2-idea{width:4rem;vertical-align:bottom;margin-left:10px}
.s-idea .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding:60px 16px 70px}
.s-idea .wave-h::before{bottom:-30px;}
.deco-fish{position:absolute;pointer-events:none;width:230px;right:120px;top:-20px}
.s-idea-h{line-height:1.2}
.s-idea-l p{font-size:var(--fs-lg);font-weight:500;line-height:1.9;padding:30px 0 0 0}
.s-idea-t{position:relative;text-align:center;border-bottom:4px solid #e5583e;padding-bottom:10px;margin:0 0 16px}
.s-ideas{list-style:none;padding:0;margin:0;position:relative}
.s-ideas li{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.s-ideas img{flex:none;border-radius:20px 24px 18px 26px}
.s-ideas span{font-size:var(--fs-xl);line-height:1.2}
.s-ideas .i2{justify-content:flex-end;padding-left:20px}

/* 海と、風と */
.s-craft .inner{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:". h" "big p";gap:0 24px;padding:40px 16px 40px;min-height:520px}
.s-craft .wave-h::before{bottom:-30px;}
.s-craft-1{grid-column:1;grid-row:1;width:300px;height:190px;justify-self:end;margin-right:-20px}
.s-craft-h{grid-area:h;line-height:1.2;padding-left:26px;align-self:center}
.s-craft-2{grid-area:big;width:100%;height:auto;aspect-ratio:680/330;margin-top:-10px}
.s-craft-p{grid-area:p;font-size:var(--fs-lg);font-weight:500;line-height:1.9;padding:20px 0 0 26px;margin:0}
.deco-fish--b{right:10px;bottom:-40px;top:auto;width:180px}

/* 今夜のひと皿 */
.s-dish{padding:30px 16px 90px}
.s-dish .section-back-bottom{top:unset;bottom:0;height:unset;}
.s-dish-h{display:flex;justify-content:center;align-items:center;gap:20px}
.s-dish-h span{padding-top:40px;}
.s-h2-dish{width:clamp(50px, 10vw, 100px);vertical-align:middle;margin-left:10px;}
.s-dish-list{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;max-width:940px;margin:0 auto;list-style:none;padding:0;text-shadow:none;}
.s-dish-list li{
	position:relative;text-align:center;padding:0 0 0.75em;
	background-image: url(../images/bunka/sec03-back.png);
    background-size: 100% auto;
    background-position:center bottom;
    background-repeat:no-repeat;
}
.s-dish-list li em{
	font-size:var(--fs-sm);
	position: absolute;
	bottom: -2.5rem;
	color: #fff;
	font-weight:700;
	left: 50%;
	transform: translateX(-50%);
}
.s-dish-list a{position:relative;display:block}
.s-dish-list img{display:block;width:100%;}
.s-dish-list span{display:block;color:#fff;text-align:center;font-weight:500;padding:8px 4px 0 4px;margin-top:-2px}


/* タブレット・スマホ */
@media (max-width:991.98px){
  .page-shop .site-header{position:sticky;top:0}
  .s-hero{padding-top:36px}.s-h2-fish{width:56px}
  .s-enjoy .section-back{height:unset;top:-25%;}
  .s-enjoy-list,.s-rec-grid,.s-dish-list{grid-template-columns:1fr 1fr;width: 70%;}
  .rec-2,.rec-3,.rec-4{padding-left:0}
  .rec-5,.rec-6,.rec-7{padding-left:0}

  /* おすすめ: grid-template-areas で並べ替え(PC用の .s-rec-grid .rec-◯ と同じ詳細度にして上書きする) */
  .s-rec-grid .rec-1{grid-area:r1}
  .s-rec-grid .rec-2{grid-area:r2}
  .s-rec-grid .rec-3{grid-area:r3}
  .s-rec-grid .rec-4{grid-area:r4}
  .s-rec-grid .rec-5{grid-area:r5}
  .s-rec-grid .rec-6{grid-area:r6}
  .s-rec-grid .rec-7{grid-area:r7}
  .s-rec-grid .s-rec-mascot{grid-area:mascot}
  .s-rec-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "r1     r1"
      "r2     r3"
      "mascot r4"
      "r5     r6"
      "r7     r7";
  }
  .rec-1 img, .rec-7 img{width:60%;max-width:320px;}
  .s-rec-mascot{padding:20px 0 60px 0;height:100%;}
  .s-rec-mascot img{width:auto;height:100%;left:unset;bottom:0;}
  .s-ideas{width:70%;;}.s-ideas img {width:50%;height:auto;}
  .s-idea{grid-template-columns:1fr}.s-idea-t{margin-top:20px}.deco-fish{width:120px;right:10px}
  .s-idea .inner{grid-template-columns:unset;}
  .s-idea-l-img{text-align:center;padding:0 !important;}
  .s-idea-l img{width:90%;max-width:500px;}
  .s-craft .inner{grid-template-columns:1fr;grid-template-areas:"big" "h" "p" ".";}
  .s-craft-1{display:none}.s-craft-h{padding:0}
  .s-craft-2{margin-bottom:60px;}
  .s-idea-l p, .s-craft-p{padding:40px 0 0}
  .s-dish-list li em{color:var(--navy);text-shadow:0 0 4px #fff;}
  
}
@media (max-width:767px){
  .s-rec .section-back{top:-2%;height:50%;}
  .s-rec .section-back img{object-fit: cover;}
}
@media (max-width:575.98px){
  .s-rec-grid .rec-7 img{width:50%;}
  .s-ideas{width:100%;}
  .s-ideas img{width:40%;}
  .s-ideas li{gap:unset;}
  .s-enjoy-list,.s-dish-list{grid-template-columns:1fr 1fr;width: 90%;}

}


/* お知らせ(カート機能準備中)。shop.html の先頭に表示 */
.s-main .notice-bar{background:#fff6dc;border-top:3px solid #f0b429;border-bottom:3px solid #f0b429;color:var(--navy)}
.notice-bar .inner{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px}
.notice-bar-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.8em;height:1.8em;border-radius:50%;background:#f0b429;color:#fff;font-weight:700;font-size:var(--fs-base);line-height:1}
.notice-bar p{margin:0;font-size:var(--fs-base);font-weight:500;line-height:1.7}
.notice-bar a{color:var(--blue);font-weight:700;text-decoration:underline}