/* ══ 金継ぎ追補スタイル — 自家焙煎珈琲UNIVERSE（超高視認性2倍・文字かぶり完全解消・SNS統一版） ══ */

:root {
  --color-bg: #FFFDF8;
  --color-main: #2E1B12; /* 極深煎り珈琲色（コントラスト比 12.8:1・超高視認性） */
  --color-accent: #7A5A3A;
  --color-muted: #4A3326; /* 補足文字も濃く視認性強化（コントラスト比 8.5:1） */
  --font-base: "Yu Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
}

/* 1. 破れ防止・全体ベースフォント（超高視認性 28px・太さ 700） */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--color-bg) !important;
  color: var(--color-main) !important;
  font-family: var(--font-base) !important;
  font-size: 28px !important; /* 文字サイズを約2倍に拡大 */
  font-weight: 700 !important; /* 游明朝のかすれを完全解消・力強い太字 */
  line-height: 2.2 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.sp-gnav-btn img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 2. ヘッダーナビゲーション（26px・太字） */
.header .gnav .gnav-list {
  gap: 20px !important;
}

.header .gnav .gnav-list li a {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--color-main) !important;
  letter-spacing: 0.08em;
  padding: 8px 18px !important;
  transition: color 0.2s ease;
}

.header .gnav .gnav-list li a:hover {
  color: var(--color-accent) !important;
}

/* 3. SNSアイコン（Facebook / Instagram）のサイズ・外観の完全整流化（38px×38px・角丸6px・深煎り珈琲色） */
.header .sns-link,
.footer .footer-wrap .footer-left .footer-sns-block {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.header .sns-link .facebook,
.header .sns-link .instagram,
.footer .footer-wrap .footer-left .footer-sns-block .facebook,
.footer .footer-wrap .footer-left .footer-sns-block .instagram {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
}

.header .sns-link .facebook a,
.header .sns-link .instagram a,
.footer .footer-wrap .footer-left .footer-sns-block .facebook a,
.footer .footer-wrap .footer-left .footer-sns-block .instagram a {
  background-color: var(--color-main) !important;
  color: var(--color-bg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 6px !important; /* FacebookとInstagramで角丸を完全一致 */
  font-size: 22px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.header .sns-link .facebook a i,
.header .sns-link .instagram a i,
.footer .footer-wrap .footer-left .footer-sns-block .facebook a i,
.footer .footer-wrap .footer-left .footer-sns-block .instagram a i {
  color: #FFFDF8 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.header .sns-link .instagram a:hover,
.footer .footer-wrap .footer-left .footer-sns-block .instagram a:hover,
.header .sns-link .facebook a:hover,
.footer .footer-wrap .footer-left .footer-sns-block .facebook a:hover {
  opacity: 0.8 !important;
  transform: translateY(-1px) !important;
}

.main .menu-area,
.main .menu-area > div,
.main .commitment-area,
.main .about-area,
.main .news-area,
.main .access-area {
  background-color: var(--color-bg) !important;
}

.main .menu-area a,
.main .menu-area > div > a {
  color: var(--color-accent) !important;
  font-weight: 800 !important;
}

/* 4. セクション大見出し（44px・極太 800） */
.main .news-area h2 span,
.main .menu-area h2 span,
.main .access-area h2 span {
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  color: var(--color-main) !important;
  display: inline-block;
  padding: 8px 0 !important;
}

/* 4-1. 「ユニバース珈琲について」（コーヒーカップイラストと文字のかぶり完全解消） */
.main .about-area h2 {
  text-align: center !important;
  margin-bottom: 36px !important;
}

.main .about-area h2 span {
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  color: var(--color-main) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 36px 18px 36px !important;
  border-bottom: 2px solid var(--color-main) !important;
  background-image: none !important; /* 背景の文字めり込みを完全解消 */
}

.main .about-area h2 span::before {
  content: "";
  display: block;
  width: 58px;
  height: 48px;
  background-image: url(https://universe-cafe-yuki.netlify.app/assets/img/coffee.svg), url(assets/img/coffee.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  margin-bottom: 14px;
}

/* 4-2. 「こだわり」（珈琲豆イラストと文字のかぶり完全解消） */
.main .commitment-area h2 {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.main .commitment-area h2 span {
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  color: var(--color-main) !important;
  display: inline-block !important;
  padding: 0 70px 16px 70px !important; /* 左右に十分な余白を確保し、豆イラストのかぶりを完全解消 */
  border-bottom: 2px solid var(--color-main) !important;
  background-image: url(https://universe-cafe-yuki.netlify.app/assets/img/coffee-beans.svg), url(https://universe-cafe-yuki.netlify.app/assets/img/coffee-beans.svg) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left 0 bottom 14px, right 0 bottom 14px !important;
  background-size: 42px, 42px !important;
}

/* 5. サイト全体の本文・文章段落（28px・太さ 700・私たちは...も他と合わせて太く） */
.main .commitment-content,
.main .about-content,
.main .news-content,
.main .access-content {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto 60px auto !important;
}

.main .commitment-content p,
.main .about-content p,
.main .news-content p,
.main .access-content p {
  font-size: 28px !important; /* 2倍の大きさに拡大 */
  font-weight: 700 !important; /* 「私たちは...」含むすべての本文を他と合わせ力強く太く統一 */
  line-height: 2.2 !important;
  letter-spacing: 0.06em;
  color: var(--color-main) !important;
  margin-bottom: 28px !important;
  text-align: center;
}

.main .news-content p strong {
  font-size: 28px !important;
  font-weight: 800 !important;
}

/* 6. メニュー一覧（品名・価格の視認性強化と4段集約） */
.main .menu-area .drink-list > li > span,
.main .menu-area .food-list > li > span,
.main .menu-area .beans-list > li > span,
.main .menu-area .coffee-list > li.headding {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--color-main) !important;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-top: 24px;
  margin-bottom: 12px;
}

.main .menu-area .drink-list > li > ul > li,
.main .menu-area .food-list > li > ul > li,
.main .menu-area .beans-list > li > ul > li {
  font-size: 28px !important;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px dotted rgba(46, 27, 18, 0.45);
  padding: 16px 0 !important;
  margin-bottom: 8px;
}

.main .menu-area .drink-list .name,
.main .menu-area .food-list .name,
.main .menu-area .beans-list .name,
.main .menu-area .coffee-list .name,
div.name {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--color-main) !important;
  word-break: auto-phrase;
  letter-spacing: 0.04em;
}

.main .menu-area .food-menu .food-list > li > ul.morning-list > li .detail {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.8;
  color: var(--color-muted) !important;
  margin-top: 8px;
}

.main .menu-area span.small {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--color-muted) !important;
}

/* 値段表記：34px・極太文字 900 */
.main .menu-area .price,
div.price,
.main .menu-area .price span,
div.price span {
  font-size: 34px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  color: var(--color-main) !important;
  letter-spacing: 0.05em;
}

/* 7. オファー案内枠（26px/30px） */
.beans-offer {
  font-size: 26px !important;
  font-weight: 700 !important;
  padding: 24px 28px !important;
  line-height: 2.0 !important;
  color: var(--color-main) !important;
}

.beans-offer strong {
  font-size: 30px !important;
  font-weight: 800 !important;
}

.beans-offer span {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--color-muted) !important;
}

/* 8. フッター・アクセス情報（26px/22px） */
.footer .business-hour {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--color-main) !important;
  margin-bottom: 12px;
}

.footer .footer-wrap .cafe-address address,
.main .access-area .info dd {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.8;
  color: var(--color-main) !important;
}

.main .access-area .info dd a {
  color: var(--color-accent) !important;
  font-weight: 800 !important;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.main .access-area .info dd a:hover {
  color: var(--color-main) !important;
}

.footer .footer-wrap .cafe-address .postal-code {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--color-muted) !important;
}

.footer .footer-credit {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-muted) !important;
  margin-top: 20px;
}

/* 9. 電話番号リンク（30px・太字） */
.footer .tel-number,
.main .access-area .tel-number {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  margin: 16px 0 !important;
}

.footer .tel-number a,
.tel-number a {
  color: var(--color-main) !important;
  text-decoration: none;
  border-bottom: 3px solid var(--color-main) !important;
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer .tel-number a:hover,
.tel-number a:hover {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}