/* =================================================
   single-shop.css（クリーンLP版・完全整理）
================================================= */

/* =========================
   ベース
========================= */

body{
    font-family:"Noto Sans JP",sans-serif;
}
.hero-title h1,
.section-title h2,
.menu-info h3,
.shop-cta h2{
    font-family:"Noto Serif JP",serif;
}

/* 全体コンテナ */
.shop-single {
  max-width: 100%;
  margin: 0 auto;
}



/* =========================
   セクション共通（LP芯）
========================= */
.shop-lp section {
	width: min(1100px, calc(100% - 40px));
	margin: 50px auto;
}
/* 見出し */
.shop-single h2 {
  font-size: 2.2rem;
  margin: 0 0 50px;
  text-align: center;
  color: #6f4e37;
  position: relative;
}

.shop-single h2::after {
  content: "";
  width: 60px;
  height: 3px;
  background: #c89f6a;
  display: block;
  margin: 12px auto 0;
}

/* =========================
   SECTION TITLE
========================= */
.section-title span {
	display: inline-block;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #b8860b;
	text-transform: uppercase;
}
.section-title span::before {
	content: "";
	width: 20px;
	height: 20px;
	background: url("../images/icon-information.svg") no-repeat center;
	background-size: contain;
}
/* =========================
   画像共通
========================= */

.shop-single img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
   HERO（フルブリード）
========================= */
.shop-hero {
	position: relative;
	width: 100%;
	height: 80vh;
	max-width: 1200px;
	overflow: hidden;
	border-radius:20px;
}

/* 背景画像 */
.shop-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
 filter: brightness(0.6) contrast(1.05);
}

/* =========================================
   ショップLP 共通
   ========================================= */

.shop-lp section {
    width: min(1100px, calc(100% - 40px));
    margin: 60px auto;
}


/* =========================================
   HERO
   ========================================= */

.shop-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    max-width: 1200px;
    overflow: hidden;
    border-radius: 20px;
    margin: 60px auto;
    padding: 0 !important;
}


/* HERO画像 */
.shop-hero .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.shop-hero .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}


/* オーバーレイ */
.shop-hero .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* HERO文字 */
.shop-hero .hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* =========================================
   タブレット
========================================= */

@media screen and (max-width: 991px) {

    .shop-lp section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .shop-hero {
        width: calc(100% - 24px);
        height: 420px;
        min-height: 0;
        margin: 40px auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 16px;
    }

}


/* =========================================
   スマホ
========================================= */

@media screen and (max-width: 767px) {

    .shop-hero {
        width: calc(100% - 20px);
        height: 300px;
        min-height: 0;
        margin: 30px auto;
        border-radius: 14px;
    }

    .shop-hero .hero-image img {
        object-position: center center;
    }

}


/* =========================================
   小さいスマホ
========================================= */

@media screen and (max-width: 480px) {

    .shop-hero {
        width: calc(100% - 16px);
        height: 260px;
        min-height: 0;
        border-radius: 12px;
    }

}


/* =========================
   中央タイトルカード
========================= */

.hero-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* メインタイトル */
.hero-title h1 {
	font-size: 3rem;
	font-weight: 700;
	color: #ffffff;
	margin: 10px 0;
	text-shadow: 2px 2px 0 #8b6f3d;
	padding: 5px 10px;
	line-height: 1.2em;
}

/* サブテキスト */
.hero-title p {
  margin-top: 12px;
  font-size: 16px;

  color: #2f5d2a;
  background: rgba(255,255,255,0.75);

  padding: 6px 20px;
  border-radius: 999px;
}


/* =========================
   コンセプト
========================= */
.shop-concept {
	background: #f4f9f1;
	padding: 60px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
	width: 100%;
	max-width: 1200px;
}

/* =========================
   メニュー
========================= */
.shop-menu {
/*	background: #fff7e6;*/
	background:#fffdf7 url("../images/bg-washi.jpg") repeat;
	border-radius: 20px;
	padding: 50px;
	width: 100%;
	max-width: 1200px;
}

.menu-cat {
	display: inline-block;
	background: #ff8f00;
	color: #fff;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.menu-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.menu-photo img {
	height: auto;
	object-fit: cover;
}

.menu-info {
  background: #fff;
  padding: 40px;
}

.menu-info h3 {
  font-size: 24px;
  margin-bottom: 12px;
  color: #6f4e37;
}

/* =========================
   メニュー（スマホ）
========================= */
@media (max-width: 767px) {

  .menu-wrap {
    display: block !important;
  }

  .menu-photo,
  .menu-info {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    margin: 0;
  }

  .menu-photo img {
    width: 100%;
    height: auto;
  }

}

/* =========================
   ギャラリー
========================= */

.shop-gallery{
    max-width:1200px;
    margin:100px auto;
    padding:0 20px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.shop-gallery .gallery-item {
    position: relative;
    overflow: hidden;
}

/* 画像 */
.shop-gallery .gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

/* hoverズーム */
.shop-gallery .gallery-item:hover img {
    transform: scale(1.05);
}

/* コメント（初期非表示） */
.shop-gallery .gallery-comment {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 14px;
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.65);
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
}

/* hover表示 */
.shop-gallery .gallery-item:hover .gallery-comment {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 768px) {
    .gallery-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .shop-gallery .gallery-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        transform: none !important;
    }
}

/* =========================
 おいしさの秘密＆お店のこだわり
========================= */
.shop-commitment {
	background: #f4f9f1;
	border-radius: 20px;
	padding: 40px;
}
.commitment-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.commitment-text {
	flex: 1;
	line-height: 2;
	font-size: 17px;
}

.owner-photo{
    width:240px;
    height:240px;
    border-radius:50%;
    overflow:hidden;
    border:4px solid #16354d;
    background:#fff;
    flex-shrink:0;
}

.owner-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media (max-width:768px){
    .commitment-wrap{
        flex-direction:column-reverse;
        gap:30px;
        padding:25px;
    }

    .owner-photo{
        width:180px;
        height:180px;
    }

    .commitment-text{
        font-size:15px;
    }
}

/* =========================
   店舗情報
========================= */
.shop-info {
	background: #fff;
	padding: 50px;
	box-shadow: 0 15px 40px rgba(0,0,0,0.05);
	max-width: 1200px;
	width: 100%;
	border-radius: 20px;
}

.shop-info table {
  width: 100%;
  border-collapse: collapse;
}

.shop-info th {
  width: 160px;
  text-align: left;
  padding: 16px;
  background: #f3efe8;
}

.shop-info td {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.shop-info a {
  color: #6f4e37;
  text-decoration: none;
}

/* =========================
   CTA
========================= */

.shop-cta {
	background: linear-gradient(135deg, #ff6000, #ffba60);
	color: #fff;
	text-align: center;
	padding: 70px 20px;
	border-radius: 20px;
	margin: 60px 20px;
	max-width: 1200px;
	width: 100%;
}
.shop-cta h2 {
  border: none;
  color: #fff;
  margin-bottom: 15px;
}

.shop-cta p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}
.cta-btn {
	display: inline-block;
	margin-top: 20px;
	padding: 16px 40px;
	background: #fff;
	color: #ff6000;
	border-radius: 999px;
	font-weight: bold;
	text-decoration: none;
	transition: 300ms;
}
.cta-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

  .shop-hero {
    height: 60vh;
  }
  .menu-wrap {
    grid-template-columns: 1fr;
  }

  .hero-title h1 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {

  .shop-single section {
    padding: 60px 15px;
  }

  .shop-gallery img {
    height: 220px;
  }

  .shop-info th,
  .shop-info td {
    display: block;
    width: 100%;
  }
}

/* =========================================
   スマホ表示調整
   ========================================= */
@media screen and (max-width: 991px) {

    /* ページ全体 */
    .shop-lp {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* =========================================
       各セクション
       左右の余白を縮小
       ========================================= */

    .shop-lp section {
        padding-left: 12px;
        padding-right: 12px;
    }


    /* =========================================
       セクションタイトル
       ========================================= */

    .shop-lp .section-title {
		padding-left: 0;
		padding-right: 0;
		text-align: center;
		margin-bottom: 20px;
	}

    .shop-lp .section-title h2 {
        font-size: 22px;
        line-height: 1.5;
        word-break: normal;
        overflow-wrap: break-word;
    }


    /* =========================================
       コンセプト
       ========================================= */

    .shop-lp .concept-box {
        width: 100%;
       	padding: 20px;
        box-sizing: border-box;
    }

    .shop-lp .concept-text {
        width: 100%;
        font-size: 16px;
        line-height: 1.8;
    }


    /* =========================================
       看板メニュー
       ========================================= */

    .shop-lp .menu-wrap {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
	.shop-lp .menu-info {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
	}
    .shop-lp .menu-info h3 {
        font-size: 22px;
        line-height: 1.5;
    }

    .shop-lp .menu-info p {
        font-size: 16px;
        line-height: 1.8;
    }


    /* =========================================
       ギャラリー
       ========================================= */

    .shop-lp .gallery-grid {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .shop-lp .gallery-item {
        width: 100%;
    }


    /* =========================================
       お店のこだわり
       ========================================= */

    .shop-lp .commitment-wrap {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

	.shop-lp .commitment-text {
		width: 100%;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 1.8;
		background: none;
		padding: 20px;
	}
	
    /* =========================================
       店舗情報
       ========================================= */

    .shop-lp .shop-info table {
        width: 100%;
        box-sizing: border-box;
    }

	.shop-lp .shop-info th {
		width: 100%;
		padding: 10px 20px;
		white-space: nowrap;
	}

	.shop-lp .shop-info td {
		width: 100%;
		padding: 10px 15px;
		word-break: break-word;
		line-height: 1.7;
	}

    /* =========================================
       CTA
       ========================================= */

    .shop-lp .shop-cta {
        padding-left: 16px;
        padding-right: 16px;
    }

    .shop-lp .shop-cta h2 {
        font-size: 21px;
        line-height: 1.5;
    }

    .shop-lp .shop-cta p {
        font-size: 15px;
        line-height: 1.7;
    }

}


/* =========================================
   さらに狭いスマホ
   ========================================= */
@media screen and (max-width: 480px) {

    .shop-lp section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .shop-lp .section-title h2 {
        font-size: 20px;
    }

    .shop-lp .concept-box {
        padding: 18px 14px;
    }

    .shop-lp .concept-text,
    .shop-lp .menu-info p,
    .shop-lp .commitment-text {
        font-size: 15px;
        line-height: 1.8;
    }

    .shop-lp .shop-info th {
         width: 100%;
        padding: 10px 6px;
        font-size: 14px;
    }

    .shop-lp .shop-info td {
        width: 100%;
        padding: 10px 6px;
        font-size: 14px;
    }

}
/* =========================
   Gallery Lightbox
========================= */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.88);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

/* 表示 */
.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}

/* 拡大画像 */
.gallery-lightbox img {
    display: block;

    max-width: 95vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    transform: scale(0.8);
    opacity: 0;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* ヒョコっと拡大 */
.gallery-lightbox.active img {
    transform: scale(1);
    opacity: 1;
}

/* 閉じるボタン */
.gallery-lightbox-close {
    position: absolute;

    top: 15px;
    right: 20px;

    width: 45px;
    height: 45px;

    border: none;
    background: transparent;

    color: #fff;

    font-size: 42px;
    line-height: 1;

    cursor: pointer;

    z-index: 2;
}

/* 元画像 */
.gallery-lightbox-trigger {
    cursor: pointer;
}

/* =========================================
   HERO スマホ最終調整
========================================= */

@media screen and (max-width: 767px) {

    .shop-hero {
        width: calc(100% - 20px) !important;
        height: 280px !important;
        min-height: 0 !important;
        margin: 30px auto;
        border-radius: 14px;
    }

    .shop-hero .hero-image {
        width: 100%;
        height: 100%;
    }

    .shop-hero .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

}


@media screen and (max-width: 480px) {

    .shop-hero {
        width: calc(100% - 16px) !important;
        height: 240px !important;
        min-height: 0 !important;
        border-radius: 12px;
    }

}