@charset "UTF-8";
img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  img {
    width: auto;
  }
}

.tel a {
  text-decoration: none;
}

:root {
  --wrapPadding: 4.8vw;
}

.fw-exl {
  font-weight: 200;
}

.fw-l {
  font-weight: 300;
}

.fw-r {
  font-weight: 400;
}

.fw-m {
  font-weight: 500;
}

.fw-sm {
  font-weight: 600;
}

.fw-b {
  font-weight: 700;
}

.fw-exb {
  font-weight: 800;
}

.fw-bl {
  font-weight: 900;
}

.fs-italic {
  font-style: italic;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
  .remodal-sp {
    display: block !important;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
/*=============================================
 * body
 *=============================================*/
body {
  font-size: 15px;
  line-height: 2.5;
  letter-spacing: 0.2em;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  background: url("../img/shared/bg.webp?v=20260915b") repeat-y top center;
  min-width: inherit;
  min-height: inherit;
  max-height: 100%;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

.txt {
  text-align: justify;
}

.wrap {
  width: 1000px;
  max-width: calc(100% - 60px);
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .wrap {
    padding: 0 var(--wrapPadding);
    max-width: 100%;
    box-sizing: border-box;
  }
}

/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/
.fnt-mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.fnt-meiryo {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fnt-gothic {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fnt-serif {
  font-family: "Noto Serif JP", serif;
}

.fnt-notosan {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.fnt-zen {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.fnt-amiri {
  font-family: "Amiri", serif;
}

.fnt-play {
  font-family: "Playfair Display", serif;
}

/*=============================================
 * <main>
 *=============================================*/
.slick-arrow:hover {
  opacity: 0.8;
}

@media screen and (min-width: 768px) {
  [class*=heightLine-sp] {
    height: auto !important;
  }
}
@media screen and (max-width: 767px) {
  [class*=heightLine-pc] {
    height: auto !important;
  }
}
.nav-fixed {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;
}

.nav-fixed.fixed {
  opacity: 1;
  visibility: visible;
}

#pagetop {
  bottom: 20px;
  right: 20px;
}

@media screen and (max-width: 767px) {
  #pagetop {
    width: 53px;
    bottom: 110px;
    right: 10px;
  }
}
/*=============================================
 * <menu>
 *=============================================*/
.menu-toggle {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100% !important;
  top: 0px;
  bottom: 0;
  right: 0;
  overflow-y: auto;
  height: 100%;
  color: #000;
  z-index: -10;
  padding: 75px 0 150px;
  background: #fff;
  box-sizing: border-box;
  transition: all 0.5s ease 0s;
  -webkit-overflow-scrolling: touch;
}

.navOpen #menu-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
  z-index: 999;
}

.hamburger {
  position: fixed;
  top: 0;
  z-index: 100;
  right: 0;
  border-radius: 0;
  text-align: center;
  z-index: 9999;
  width: 60px;
  padding: 8px 8px 8px 8px;
  padding: 0;
}
.hamburger:after {
  font-size: 7.5px;
  content: "MENU";
  display: block;
  text-align: center;
  line-height: 1;
  margin: 7px 0 0;
  color: #fff;
  letter-spacing: 0.12em;
}
.hamburger .off {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  opacity: 0;
}

.has-nav .hamburger {
  opacity: 1;
  visibility: visible;
}

.navOpen .hamburger {
}
.navOpen .hamburger .off {
  opacity: 1 !important;
}
.navOpen .hamburger .on {
  opacity: 0;
}
.navOpen .hamburger:after {
  content: "CLOSE";
}

.navOpen .hamburger-inner::before,
.navOpen .hamburger-inner::after,
.navOpen .hamburger-inner {
  border-radius: 0;
}

body.navOpen,
body.navOpen *,
body.navOpen *:hover,
body.navOpen *:focus,
body.navOpen *:active {
  touch-action: none !important;
  pointer-events: none !important;
}

body.navOpen .hamburger,
body.navOpen .fixed-nav,
body.navOpen .fixed-nav *,
body.navOpen #menu-toggle,
body.navOpen #menu-toggle *,
body.navOpen #ft-fixed,
body.navOpen #ft-fixed * {
  touch-action: auto !important;
  pointer-events: visible !important;
}

.navOpen {
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: none !important;
  pointer-events: none !important;
}

button {
  border: none;
  cursor: pointer;
  background: transparent;
}

/*=============================================
 * <slick>
 *=============================================*/
.slick-arrow {
  font-size: 0;
  width: 166px;
  height: 17px;
  line-height: 0;
  position: absolute;
  z-index: 7;
  top: 24vw;
  background: transparent;
  color: #548b2e;
  outline: none;
}

.slick-arrow.slick-prev {
  left: -25px;
}

.slick-arrow.slick-next {
  right: -25px;
}

@media screen and (max-width: 480px) {
  .slick-arrow {
    width: 15px;
    height: 33px;
  }
}
.slick-dots {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  z-index: 5;
  position: absolute;
  right: 37px;
  bottom: 90px;
}
.slick-dots li {
  width: 15px;
  height: 15px;
  background: #a0a0a0;
  margin: 0 7px;
  display: flex;
  border-radius: 50%;
  cursor: pointer;
}
.slick-dots li.slick-active {
  background: #4e3825;
}
@media (hover: hover) {
  .slick-dots li:hover {
    background: #4e3825;
  }
}
.slick-dots li button {
  width: 0;
  height: 0;
  font-size: 0;
}

/*=============================================
 * <txt-vertical responsive>
 *=============================================*/
@media only screen and (min-width: 768px) {
  .txt-vertical-pc {
    cursor: vertical-text;
    writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    word-wrap: break-word;
  }
  .txt-vertical-pc .int {
    writing-mode: lr-tb;
    -o-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    -moz-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    line-height: 1;
  }
  .txt-vertical-pc .txt-latin {
    cursor: vertical-text;
    direction: rtl;
    writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: sideways-right;
    -o-text-orientation: sideways-right;
    -ms-text-orientation: upright;
    -ms-text-orientation: sideways-right;
    -moz-text-orientation: sideways-right;
    -webkit-text-orientation: sideways-right;
    letter-spacing: 0.25em;
  }
  .txt-vertical-pc .txt-dot {
    cursor: vertical-text;
    direction: ltr;
    writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    -moz-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    text-orientation: sideways-right;
    -o-text-orientation: sideways-right;
    -ms-text-orientation: upright;
    -ms-text-orientation: sideways-right;
    -moz-text-orientation: sideways-right;
    -webkit-text-orientation: sideways-right;
    line-height: 0.4;
    display: inline-block;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 768px) {
  .txt-vertical-sp {
    cursor: vertical-text;
    writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    word-wrap: break-word;
  }
  .txt-vertical-sp .int {
    writing-mode: lr-tb;
    -o-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    -moz-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    line-height: 1;
  }
  .txt-vertical-sp .txt-latin {
    cursor: vertical-text;
    direction: rtl;
    writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: sideways-right;
    -o-text-orientation: sideways-right;
    -ms-text-orientation: upright;
    -ms-text-orientation: sideways-right;
    -moz-text-orientation: sideways-right;
    -webkit-text-orientation: sideways-right;
    letter-spacing: 0.25em;
  }
  .txt-vertical-sp .txt-dot {
    cursor: vertical-text;
    direction: ltr;
    writing-mode: vertical-lr;
    -o-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    -moz-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    text-orientation: sideways-right;
    -o-text-orientation: sideways-right;
    -ms-text-orientation: upright;
    -ms-text-orientation: sideways-right;
    -moz-text-orientation: sideways-right;
    -webkit-text-orientation: sideways-right;
    line-height: 0.4;
    display: inline-block;
    margin: 0 auto;
  }
}
/*=============================================
 * <parallax responsive>
 *=============================================*/
.bg-parallax {
  position: relative;
  z-index: 0;
}
.bg-parallax .img-parallax {
  clip: rect(0, auto, auto, 0);
  margin-bottom: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.bg-parallax .img-parallax img {
  width: 100% !important;
  height: 100vh !important;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  transform: translateZ(0);
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .bg-parallax .img-parallax img {
    height: auto !important;
    -o-object-fit: unset;
       object-fit: unset;
    top: 50%;
    transform: translateY(-50%) !important;
  }
}

@media screen and (min-width: 768px) {
  .bg-parallax-pc {
    position: relative;
    z-index: 0;
  }
  .bg-parallax-pc .img-parallax-pc {
    clip: rect(0, auto, auto, 0);
    margin-bottom: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .bg-parallax-pc .img-parallax-pc img {
    width: 100% !important;
    height: 100vh !important;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 1;
    transform: translateZ(0);
  }
}
@media screen and (min-width: 768px) and (-ms-high-contrast: active), screen and (min-width: 768px) and (-ms-high-contrast: none) {
  .bg-parallax-pc .img-parallax-pc img {
    height: auto;
    -o-object-fit: unset;
       object-fit: unset;
    top: 50%;
    transform: translateY(-50%) !important;
  }
}
@media screen and (max-width: 767px) {
  .bg-parallax-sp {
    position: relative;
    z-index: 0;
  }
  .bg-parallax-sp .img-parallax-sp {
    clip: rect(0, auto, auto, 0);
    margin-bottom: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .bg-parallax-sp .img-parallax-sp img {
    width: 100% !important;
    height: 100vh !important;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 1;
    transform: translateZ(0);
  }
}
@media screen and (max-width: 767px) and (-ms-high-contrast: active), screen and (max-width: 767px) and (-ms-high-contrast: none) {
  .bg-parallax-sp .img-parallax-sp img {
    height: auto;
    -o-object-fit: unset;
       object-fit: unset;
    top: 50%;
    transform: translateY(-50%) !important;
  }
}
/*=============================================
 * <ft-fixed>
 *=============================================*/
#ft-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../img/shared/bg.webp?v=20260915b");
  z-index: 99;
}

@media screen and (max-width: 767px) {
  #ft-fixed {
    padding-bottom: calc(env(safe-area-inset-bottom) - 0px);
  }
}
.navOpen #ft-fixed {
  /* z-index: 0; */
}

/*=============================================
 * <toggle responsive>
 *=============================================*/
.toggle-sp .toggle-link:after {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  line-height: 20px;
  content: "\f13a";
  font-size: 13px;
  display: block;
  margin-top: 10px;
}
.toggle-sp .toggle-main {
  display: none;
}
.toggle-sp.active .toggle-link:after {
  content: "\f139";
}
.toggle-sp.active .toggle-main {
  display: block;
}

@media screen and (min-width: 768px) {
  .toggle-sp .toggle-link {
    cursor: auto;
  }
  .toggle-sp .toggle-link:after {
    display: none;
  }
  .toggle-sp .toggle-main {
    display: block !important;
    height: auto !important;
  }
}
/*=============================================
 * <image object-fit responsive>
 *=============================================*/
.img-ob {
  position: relative;
}
.img-ob img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (min-width: 768px) {
  .img-ob-pc {
    position: relative;
  }
  .img-ob-pc img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media screen and (max-width: 767px) {
  .img-ob-sp {
    position: relative;
  }
  .img-ob-sp img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
/*=============================================
 * loopslider
 *=============================================*/
.loopslider {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.loopslider ul {
  animation: flowing 120s linear infinite;
  transform: translateX(100%);
  display: flex;
}
.loopslider.ltr {
  flex-direction: row-reverse;
}
.loopslider.ltr ul {
  flex-direction: row-reverse;
  animation: flowing-ltr 120s linear infinite;
  transform: translateX(100%);
}

@keyframes flowing {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes flowing-ltr {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
.loopslider-vertical {
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.loopslider-vertical ul {
  animation: flowing-y 120s linear infinite;
  transform: translateY(100%);
}

@keyframes flowing-y {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
/*=============================================
 * <tab responsive>
 *=============================================*/
@media screen and (max-width: 767px) {
  .tabs-switch-pc .tab-content > div {
    display: block !important;
  }
}
/*=============================================
* <animation wow>
*=============================================*/
@keyframes fadeIn {
  0% {
    opacity: 0;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInUp {
  0% {
    -webkit-transform: translate3d(0, 10px, 0);
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.wow {
  animation-duration: 1s;
  animation-fill-mode: both;
}


/* 追加 */
.txt_m {
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  margin-top: 20px;
}

/* ================================================================
   写真の上に白文字が乗る箇所の可読性確保（うっすいマスク）
   2026-08-09 追加：明るい写真に差し替えたことで文字が沈むため
   ================================================================ */

/* トップの誘導バナー（日本酒 / コース） */
.section-bnr a { position: relative; }
.section-bnr .img::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  /* SPは上下、PCは左から。テキスト側だけを濃くして写真は殺さない */
  background: linear-gradient(180deg, rgba(14,11,9,.30) 0%, rgba(14,11,9,.72) 100%);
}
.section-bnr .group-content { position: relative; z-index: 2; }
.section-bnr .group-content .tit,
.section-bnr .group-content .title,
.section-bnr .group-content .txt { text-shadow: 0 2px 14px rgba(0,0,0,.75); }
/* 明るい写真は落ち着かせる（写真は見せたまま白文字を立たせる） */
.section-bnr .img img { filter: brightness(.66) saturate(1.06); }
@media screen and (min-width: 768px) {
  .section-bnr .img::after {
    background: linear-gradient(100deg,
      rgba(14,11,9,.86) 0%,
      rgba(14,11,9,.68) 30%,
      rgba(14,11,9,.28) 62%,
      rgba(14,11,9,.06) 100%);
  }
}

/* 帯バナー（こだわり / コース）のマスクを少し強める */
.banner a::before { background: rgba(0,0,0,.52) !important; }
.banner a span { text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.banner a img { filter: brightness(.82); }

/* お品書き・日本酒の帯バナー */
#banner .brn a { position: relative; display: block; }
#banner .brn a .img::after,
#banner .brn a .sec6-img::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,11,9,.46) 0%, rgba(14,11,9,.72) 100%);
}
#banner .brn a .img,
#banner .brn a .sec6-img { position: relative; }
#banner .brn a h2 { position: relative; z-index: 2; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
#banner .brn a .img img,
#banner .brn a .sec6-img img { filter: brightness(.72) saturate(1.04); }

/* 下層ページのキービジュアル上の見出し */
#key .img::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16,12,10,.34) 0%, rgba(16,12,10,.20) 45%, rgba(16,12,10,.50) 100%);
}
#key .img { position: relative; }
#key h2, #key h1, #key .group-ttl { position: relative; z-index: 2; }

/* ヘッダー（KV上のロゴ・電話・予約ボタン）が写真に沈まないように */
header .inner::before, #header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16,12,10,.55) 0%, rgba(16,12,10,0) 100%);
}


/* ---- コントラスト実測(2026-08-09)で低かった箇所の補正 ---- */

/* トップ「二大名物」の説明文・FLOORラベルは写真の上に乗る */
#reco .set2 .txt,
#reco .set2 h4 { text-shadow: 0 2px 12px rgba(0,0,0,.72); }
#floor .group-ttl .tit-en,
#floor .group-ttl h2 { text-shadow: 0 2px 12px rgba(0,0,0,.72); }

/* WEB予約ボタンの文字を少し太く */
.btn-web a { font-weight: 600 !important; }

/* 日本酒ページの手順番号 */
#howto .sec4-bg .sec4-num { text-shadow: 0 2px 10px rgba(0,0,0,.5); }


/* 写真の上に見出しが重なるセクション（FLOOR / お席のご案内 など） */
#floor .row1 .img,
#floor .row2 .img,
#floor .row2 .img2 { position: relative; }
#floor .row1 .img::after {
  content: "";
  position: absolute; top:0; left:0; right:0; bottom:0;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(14,11,9,0) 40%, rgba(14,11,9,.55) 78%, rgba(14,11,9,.80) 100%);
}
#floor .group-ttl { position: relative; z-index: 3; }
#floor .group-ttl .tit-en,
#floor .group-ttl h2,
#floor .group-ttl h2 small { text-shadow: 0 2px 14px rgba(0,0,0,.85); }
#floor .row1 .img img { filter: brightness(.82); }


/* KVに重なる縦組みh1は背景写真によって沈むため輪郭を付ける */
#key h1, #header h1, .header h1,
h1.txt-vertical-pc, h1.txt-vertical {
  color: rgba(255,255,255,.82) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.6);
}
/* FLOORラベルをもう一段はっきりと */
#floor .group-ttl .tit-en { text-shadow: 0 2px 16px rgba(0,0,0,.9); }


/* ================================================================
   日本語の改行を読みやすくする（2026-08-09）
   ・句読点や閉じ括弧が行頭に来ないよう禁則を厳格化
   ・.nb を付けた語は途中で改行しない（店名などの固有名詞）
   ================================================================ */
body,
p, h1, h2, h3, h4, h5, h6,
dt, dd, li, small, address, span, a, th, td {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}

/* 途中で折り返したくない語 */
.nb { white-space: nowrap; }

/* 本文の読みやすさ（SP） */
@media screen and (max-width: 767px) {
  #lead .txt,
  .sec1-txt,
  .lp-block .txt,
  #reco .set2 .txt,
  #faq dl dd {
    line-height: 2.05;
    letter-spacing: 0.04em;
  }
}


/* SPの狭い幅では両端揃えだと字間が伸びて読みにくいので左揃えにする */
@media screen and (max-width: 767px) {
  #lead .txt, .sec1-txt, .lp-block .txt, #reco .set2 .txt,
  #faq dl dd, .sec2-txt3, .sec3-txt2, .sec4-txt2, .sec4-txt4,
  .txt, .sake-desc {
    text-align: left;
  }
}


/* 最終行に1〜2文字だけ残る「取り残し」を自動で回避（対応ブラウザのみ効く・非対応でも無害） */
p, h1, h2, h3, h4, h5, h6, dd, dt, li, address, figcaption {
  text-wrap: pretty;
}

/* ================================================================
   パンくずリスト
   ================================================================ */
#breadcrumb {
  padding: 4.6vw 6.4vw 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#breadcrumb::-webkit-scrollbar { display: none; }
#breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
#breadcrumb li {
  margin: 0;
  font-size: 3vw;
  letter-spacing: .04em;
  line-height: 1.6;
}
#breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin: 0 1.1em;
  border-top: 1px solid rgba(255,255,255,.42);
  border-right: 1px solid rgba(255,255,255,.42);
  transform: rotate(45deg) translateY(-.1em);
  vertical-align: middle;
}
#breadcrumb a {
  color: #b7ad9f;
  text-decoration: none;
  transition: color .3s ease;
}
#breadcrumb li:last-child span { color: #c9a24a; }

@media screen and (min-width: 768px) {
  #breadcrumb { padding: 26px 30px 0; }
  #breadcrumb ol { max-width: 1180px; margin: 0 auto; }   /* 本文ブロックの左端に合わせる */
  #breadcrumb li { font-size: 12px; }
  #breadcrumb a:hover { color: #e8cf9a; }
}


/* パンくずは項目ごとに折り返さない（記事名が長いと「ホー/ム」と割れるため）。
   全体は #breadcrumb の overflow-x:auto で横スクロールする */
#breadcrumb li,
#breadcrumb a,
#breadcrumb span { white-space: nowrap; }
#breadcrumb li:last-child span {
  white-space: normal;        /* 現在地（記事タイトル）だけは折り返してよい */
  display: inline-block;
  max-width: 62vw;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  #breadcrumb li:last-child span { max-width: 640px; }
}