@charset "UTF-8";

/**
 * 和幸 ／ assets/css/style.css
 * 更新日   2026-08-01（共通エンジン v1.3 対応）
 * 役割     このサイトのスタイル。サイトごとに内容が異なる。
 */

  :root{
    --ai:#22343D;
    --ai-deep:#182831;
    --sumi:#2B2724;
    --kinari:#F6F3EC;
    --kinari-deep:#EDE6D6;
    --shu:#A6362B;
    --sake:#6E7C5B;
    --line:rgba(43,39,36,0.14);
    --serif:'Shippori Mincho', serif;
    --sans:'Zen Kaku Gothic New', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    color:var(--sumi);
    background:var(--kinari);
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}

  .washi-bg{
    background-image:
      radial-gradient(circle at 20% 30%, rgba(43,39,36,0.03) 0%, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(43,39,36,0.03) 0%, transparent 45%);
  }

  /* ===== ヘッダー ===== */
  header{
    position:sticky;top:0;z-index:100;
    background:rgba(246,241,231,0.97);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:1180px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;
  }
  .header-right{
    display:flex;align-items:center;gap:24px;
  }
  .logo{
    font-family:var(--serif);
    font-size:24px;font-weight:700;
    letter-spacing:0.12em;
    color:var(--ai);
    display:flex;align-items:center;gap:10px;
  }
  .logo .seal{
    width:26px;height:26px;border-radius:50%;
    border:1.5px solid var(--shu);
    color:var(--shu);
    font-size:12px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);
  }
	.logo-img {
	  height: 32px;
	  width: auto;
	  display: block;
	  flex: 0 0 auto;
	}
	.logo-tag {
	  font-size: 11px;
	  line-height: 1.4;
	  color: rgba(43,39,36,0.6);
	  letter-spacing: .04em;
	  padding-left: 12px;
	  border-left: 1px solid var(--line);
	}
  nav ul{display:flex;gap:38px;list-style:none;}
  nav a{
    font-size:14px;letter-spacing:0.08em;
    position:relative;padding-bottom:4px;
  }
  nav a::after{
    content:"";position:absolute;left:0;bottom:0;
    width:0;height:1px;background:var(--shu);
    transition:width .3s ease;
  }
  nav a:hover::after{width:100%;}
  .menu-btn{display:none;background:none;border:none;font-size:24px;color:var(--ai);cursor:pointer;}

  /* ===== ヒーロー ===== */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex;align-items:center;
    background:var(--ai-deep);
    overflow:hidden;
  }
  .hero-photo-single{
    position:absolute;inset:0;z-index:0;
  }
  .hero-photo-single img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(15%) brightness(0.78);
  }
  .hero::before{
    content:"";
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(100deg,
      rgba(24,40,49,0.45) 0%,
      rgba(24,40,49,0.72) 55%,
      rgba(24,40,49,0.92) 100%);
  }
  .hero-inner{
    position:relative;z-index:2;
    max-width:1180px;margin:0 auto;
    width:100%;
    padding:0 28px;
    display:flex;justify-content:flex-end;
    align-items:center;
  }
  .hero-logo{
    width: clamp(120px, 16vw, 200px);
    height: auto;
    display: block;
    padding-left:24px;
    border-left:1px solid rgba(246,241,231,0.4);
  }
  .hero-sub{
    writing-mode:vertical-rl;
    font-family:var(--sans);
    font-size:15px;
    color:rgba(246,241,231,0.75);
    letter-spacing:0.3em;
    margin-left:18px;
    padding:40px 0;
    align-self:center;
  }
  .hero-tel{
    position:absolute;
    left:50%;bottom:56px;
    transform:translateX(-50%);
    z-index:3;
    display:flex;align-items:center;gap:14px;
    background:#7E2B21;
    color:var(--kinari);
    padding:16px 30px;
    border-radius:44px;
    box-shadow:0 10px 28px rgba(0,0,0,0.3);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .hero-tel:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.35);}
  .hero-tel svg{width:26px;height:26px;flex-shrink:0;}
  .hero-tel-text{display:flex;flex-direction:column;line-height:1.3;color:inherit;}
  .hero-tel-label{font-family:var(--sans);font-size:12px;letter-spacing:0.08em;opacity:0.9;color:inherit;white-space:nowrap;}
  .hero-tel-number{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:0.02em;color:inherit;white-space:nowrap;}

  /* ===== 共通セクション ===== */
  section{padding:110px 28px;position:relative;}
  .section-inner{max-width:1180px;margin:0 auto;}
  .section-head{
    display:flex;align-items:flex-start;gap:24px;margin-bottom:56px;
  }
  .section-head .vlabel{
    writing-mode:vertical-rl;
    font-family:var(--serif);
    font-size:13px;
    letter-spacing:0.4em;
    color:var(--sake);
    padding-right:6px;
    border-right:1px solid var(--line);
    height:90px;
  }
  .section-head .htext h2{
    font-family:var(--serif);
    font-size:clamp(26px,3.2vw,38px);
    font-weight:700;
    color:var(--ai);
    display:flex;align-items:center;gap:12px;
  }
  .section-head .htext h2 .seal-small{
    width:22px;height:22px;border-radius:50%;
    border:1.2px solid var(--shu);color:var(--shu);
    font-size:10px;display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);
  }
  .section-head .htext p{
    margin-top:10px;font-size:14px;color:rgba(43,39,36,0.65);
    letter-spacing:0.05em;
  }

  /* ===== 店の想い ===== */
  .about{background:var(--kinari);}
  .about-grid{
    display:grid;grid-template-columns:1.1fr 0.9fr;gap:70px;align-items:center;
  }
  .about-grid--reverse{
    margin-top:60px;
  }
  .about-grid--reverse .about-photo{order:2;}
  .about-grid--reverse .about-text{order:1;}
  .about-photo{
    background:linear-gradient(160deg,#D9CFB8,#C7BB9D);
    border-radius:2px;
    position:relative;
    overflow:hidden;
  }
  .about-photo:empty{
    aspect-ratio:4/5; /* 画像がまだ無い場合のプレースホルダー比率 */
  }
  .about-photo img{
    width:100%;height:auto;display:block; /* 画像本来の縦横比のまま幅いっぱいに表示 */
  }
  .about-photo:empty::after{
    content:"店内写真";
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:rgba(43,39,36,0.35);font-size:13px;letter-spacing:0.2em;
  }
  .about-text p{font-size:15.5px;color:var(--sumi);margin-bottom:18px;}
  .about-text .lead{
    font-family:var(--serif);font-size:22px;color:var(--ai);
    line-height:1.8;margin-bottom:28px;
  }
  .course-info{
    margin-top:24px;
    padding:22px 24px;
    border:1px solid var(--line);
    border-radius:2px;
    background:var(--kinari-deep);
  }
  .course-title{
    font-family:var(--serif);font-size:15px;color:var(--ai);margin-bottom:8px;
  }
  .course-price{
    font-family:var(--serif);font-size:20px;color:var(--shu);margin-bottom:10px;
  }
  .course-note{
    font-size:13.5px;color:var(--sumi);margin-bottom:6px;
  }
  .course-nomihoudai{
    font-size:13.5px;color:var(--sake);
  }

  /* ===== 店内のご案内（平面図） ===== */
  .floorplan{background:var(--kinari-deep);}
  .floorplan-image{
    width:100%;
    border-radius:2px;overflow:hidden;
  }
  .floorplan-image img{
    width:80%;height:auto;display:block;margin:0 auto;
  }

  /* ===== お知らせ ===== */
  .news{background:var(--kinari-deep);}
  .news-list{border-top:1px solid var(--line);}
  .news-item{
    display:grid;grid-template-columns:120px 1fr auto;
    gap:24px;align-items:center;
    padding:26px 0;border-bottom:1px solid var(--line);
    transition:padding-left .25s ease;
  }
  .news-item--with-thumb{
    grid-template-columns:72px 110px 1fr auto;
  }
  .news-thumb{
    width:72px;height:54px;object-fit:cover;border-radius:3px;
  }
  .news-item:hover{padding-left:8px;}
  .news-date{
    font-family:var(--serif);font-size:14px;color:var(--sake);letter-spacing:0.05em;
  }
  .news-tag{
    display:inline-block;font-size:11px;letter-spacing:0.1em;
    border:1px solid var(--shu);color:var(--shu);
    padding:3px 10px;border-radius:12px;margin-right:14px;
  }
  .news-title{font-size:15px;}
  .news-more{font-size:13px;color:var(--ai);white-space:nowrap;}
  .news-empty{padding:26px 0;color:rgba(43,39,36,0.5);font-size:14px;}
  .more-link{
    display:inline-block;margin-top:40px;font-size:13px;letter-spacing:0.15em;
    border-bottom:1px solid var(--sumi);padding-bottom:4px;
  }

  /* ===== 日本酒 ===== */
  .sake-section{
    background:var(--ai);
    color:var(--kinari);
  }
  .sake-section .section-head .vlabel{color:var(--kinari-deep);border-right-color:rgba(246,241,231,0.25);}
  .sake-section .section-head .htext h2{color:var(--kinari);}
  .sake-section .section-head .htext p{color:rgba(246,241,231,0.6);}
  .sake-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  }
  .sake-card{
    background:rgba(246,241,231,0.04);
    border:1px solid rgba(246,241,231,0.14);
    padding:0 0 28px;
  }
.sake-bottle{
    aspect-ratio:3/4;
    background:linear-gradient(160deg, rgba(110,124,91,0.35), rgba(110,124,91,0.12));
    margin-bottom:22px;position:relative;overflow:hidden;
  }
  .sake-bottle img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .sake-bottle:empty::after{
    content:"瓶写真";position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    color:rgba(246,241,231,0.4);font-size:12px;letter-spacing:0.2em;
  }
  .sake-card .body{padding:0 24px;}
  .sake-name{font-family:var(--serif);font-size:19px;margin-bottom:6px;}
  .sake-origin{font-size:12px;color:var(--sake-light,#B9C4A9);letter-spacing:0.08em;margin-bottom:14px;}
  .sake-desc{font-size:13.5px;color:rgba(246,241,231,0.78);}

  /* ===== 店舗案内 ===== */
  .store{background:var(--kinari);}
  .store-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:70px;
  }
  .store-table{border-top:1px solid var(--line);}
  .store-row{
    display:grid;grid-template-columns:110px 1fr;
    padding:18px 0;border-bottom:1px solid var(--line);font-size:14.5px;
  }
  .store-row dt{font-family:var(--serif);color:var(--ai);}
  .store-row dd a{border-bottom:1px solid var(--sumi);}
  .store-map{
    background:linear-gradient(160deg,#D9CFB8,#C7BB9D);
    aspect-ratio:4/3;position:relative;overflow:hidden;
  }

  /* ===== ご法要ページ（houyoh.php） ===== */
  .houyoh-hero img{
    width:100%;height:auto;max-height:70vh;object-fit:cover;display:block;
  }
  .houyoh-lead{
    padding:70px 28px 20px;text-align:center;
  }
  .houyoh-lead .lead{
    font-family:var(--serif);font-size:clamp(18px, 2.4vw, 24px);
    color:var(--ai);line-height:2;
  }
  .houyoh-info{background:var(--kinari);}

  /* ===== フッター ===== */
  footer{
    background:var(--ai-deep);color:rgba(246,241,231,0.75);
    padding:60px 28px 30px;
  }
  .footer-inner{
    max-width:1180px;margin:0 auto;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;
    border-bottom:1px solid rgba(246,241,231,0.15);
    padding-bottom:40px;margin-bottom:24px;
  }
  .footer-logo{font-family:var(--serif);font-size:20px;color:var(--kinari);letter-spacing:0.1em;}
  .footer-nav{display:flex;gap:28px;list-style:none;font-size:13px;flex-wrap:wrap;}
  .footer-copy{font-size:12px;color:rgba(246,241,231,0.4);text-align:center;}

  /* ===== フッター：寺町セクション ===== */
  .footer-tera{
    background:var(--kinari-deep);
    padding:50px 28px;
  }
  .footer-tera-inner{
    max-width:900px;margin:0 auto;text-align:center;
  }
  .footer-tera-title{
    font-family:var(--serif);font-size:18px;color:var(--ai);margin-bottom:8px;
  }
  .footer-tera-text{
    font-size:13.5px;color:rgba(43,39,36,0.7);margin-bottom:24px;
  }
  .footer-tera-img{
    width:100%;max-width:800px;height:auto;display:block;margin:0 auto;
  }

  /* ===== レスポンシブ ===== */
  @media (max-width:900px){
    .about-grid, .store-grid{grid-template-columns:1fr;gap:40px;}
    .about-grid--reverse .about-photo,
    .about-grid--reverse .about-text{order:initial;}
    .sake-grid{grid-template-columns:repeat(2,1fr);}
    .floorplan-image img{width:100%;}
  }
  @media (max-width:768px){
    nav{
      position:fixed;top:0;right:0;bottom:0;width:78%;max-width:320px;
      background:var(--kinari);
      transform:translateX(100%);transition:transform .3s ease;
      padding:100px 32px 32px;z-index:99;
      box-shadow:-8px 0 24px rgba(0,0,0,0.08);
    }
    nav.open{transform:translateX(0);}
    nav ul{flex-direction:column;gap:26px;}
    .menu-btn{display:block;}
    section{padding:70px 20px;}
    .hero{min-height:80vh;}
    .hero::before{
      background:linear-gradient(180deg,
        rgba(24,40,49,0.3) 0%,
        rgba(24,40,49,0.55) 50%,
        rgba(24,40,49,0.8) 100%);
    }
    .hero-logo{width:clamp(100px, 26vw, 160px);}
    .hero-tel{
      bottom:36px;padding:14px 22px;gap:10px;
      max-width:calc(100% - 40px);
    }
    .hero-tel svg{width:24px;height:24px;}
    .hero-tel-number{font-size:22px;}
    .hero-tel-label{font-size:11px;}
    .sake-grid{grid-template-columns:1fr;}
    .section-head{gap:14px;}
    .section-head .vlabel{height:70px;font-size:11px;}
    .news-item, .news-item--with-thumb{grid-template-columns:1fr;gap:6px;}
    .news-thumb{width:100%;height:160px;order:-1;}
    .news-list.thumb-small-mobile .news-item--with-thumb{
      grid-template-columns:64px 1fr;grid-template-rows:auto auto;
      column-gap:14px;row-gap:2px;align-items:center;
    }
    .news-list.thumb-small-mobile .news-thumb{
      width:64px;height:48px;order:0;grid-row:1 / span 2;
    }
    .news-list.thumb-small-mobile .news-date{grid-column:2;}
    .news-list.thumb-small-mobile .news-title{grid-column:2;}
    .news-more{display:none;}
    .footer-inner{flex-direction:column;}
    .footer-tera{padding:40px 20px;}
  }
  @media (max-width:380px){
    .logo{font-size:20px;}
  }

/* ============================================================
   下層ページ（news-list.php / news.php）
   body に page-sub が付いたときだけ効きます。
   トップページの見た目には影響しません。
   ============================================================ */

.page-sub main{max-width:900px;margin:0 auto;padding:70px 28px 100px;}
.page-news main{max-width:760px;}

.page-sub .breadcrumb{font-size:12.5px;color:rgba(43,39,36,0.5);margin-bottom:28px;}
.page-sub .breadcrumb a{border-bottom:1px solid rgba(43,39,36,0.3);}

.page-news-list h1{
  font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);color:var(--ai);
  margin-bottom:48px;display:flex;align-items:center;gap:12px;
}
.page-sub h1 .seal-small{
  width:22px;height:22px;border-radius:50%;border:1.2px solid var(--shu);
  color:var(--shu);font-size:10px;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);flex:0 0 22px;
}

.page-sub .news-list{border-top:1px solid var(--line);}
.page-sub .empty{padding:40px 0;color:rgba(43,39,36,0.5);}

/* ---- ページャー（お知らせ一覧） ---- */
.pager{
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:48px;flex-wrap:wrap;
}
.pager-list{
  display:flex;gap:6px;list-style:none;margin:0;padding:0;
}
.pager-num{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  font-family:var(--serif);font-size:14px;color:var(--sumi);
  border:1px solid var(--line);border-radius:50%;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
a.pager-num:hover{border-color:var(--shu);color:var(--shu);}
.pager-num.is-current{
  background:var(--ai);border-color:var(--ai);color:var(--kinari);
}
.pager-side{
  font-size:13px;letter-spacing:0.08em;color:var(--ai);
  border-bottom:1px solid var(--sumi);padding-bottom:2px;
}
.pager-side.is-disabled{
  color:rgba(43,39,36,0.3);border-bottom-color:transparent;
}
@media (max-width:480px){
  .pager{gap:14px;}
  .pager-num{width:32px;height:32px;font-size:13px;}
}

/* ---- 詳細ページ ---- */

.page-news .cat-badge{
  display:inline-block;font-size:11px;letter-spacing:0.1em;
  border:1px solid var(--shu);color:var(--shu);
  padding:3px 12px;border-radius:12px;margin-bottom:16px;
}
.page-news h1{
  font-family:var(--serif);font-size:clamp(22px,3vw,30px);color:var(--ai);
  line-height:1.6;margin-bottom:14px;
}
.page-news time{
  display:block;font-family:var(--serif);font-size:13px;color:var(--sake);
  letter-spacing:0.05em;margin-bottom:36px;padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.page-news img.main{width:100%;border-radius:2px;margin-bottom:32px;}
.page-news .content{font-size:15.5px;}
.page-news .content a{color:var(--shu);text-decoration:underline;}

.page-news .gallery{margin-top:40px;display:grid;gap:20px;}
.page-news .gallery img{width:100%;border-radius:2px;}

.page-news .links{margin-top:48px;border-top:1px solid var(--line);padding-top:26px;}
.page-news .links-label{
  font-family:var(--serif);font-size:13px;letter-spacing:0.14em;
  color:var(--sake);margin-bottom:10px;
}
.page-news .links ul{list-style:none;padding:0;margin:0;}
.page-news .links li{border-bottom:1px solid var(--line);}
.page-news .links a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 2px;font-size:14.5px;
  transition:padding-left .25s ease,color .25s ease;
}
.page-news .links a:hover{padding-left:8px;color:var(--shu);}
.page-news .links .arrow{color:var(--shu);font-size:13px;}

.page-sub .back{
  display:inline-block;margin-top:56px;font-size:13px;letter-spacing:0.1em;
  border-bottom:1px solid var(--sumi);padding-bottom:4px;
}
.page-news .not-found{padding:60px 0;text-align:center;color:rgba(43,39,36,0.5);}

.page-sub footer{margin-top:60px;}

/* ============================================================
   フッターのSNSアイコン
   ============================================================ */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.footer-sns{display:flex;gap:12px;list-style:none;margin:0;padding:0;align-items:center;}
.footer-sns a{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(246,241,231,0.28);border-radius:50%;
  color:rgba(246,241,231,0.85);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.footer-sns a:hover{background:var(--shu);border-color:var(--shu);color:var(--kinari);}
@media (max-width:768px){
  .footer-sns{flex-wrap:wrap;}
}