/* 問い合わせのメール・電話リンク用（画像の文字に近い細身の太字） */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");

* {
 box-sizing: border-box;
}
html,
body {
 margin: 0;
 padding: 0;
 background: #111;
}
body {
 overflow-x: hidden;
 font-family: Arial, Helvetica, sans-serif;
}
/* 言語別フォント（<html lang> で切り替え） */
html[lang="ja"] body {
 font-family:
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo,
  sans-serif;
}
html[lang="th"] body {
 font-family: "Noto Sans Thai", Tahoma, sans-serif;
}
img {
 display: block;
}
a {
 color: inherit;
}

/*
  元LPのPC幅 1500px を基準に固定レイアウトし、JSで画面幅に合わせて等比縮小します。
  これにより支給画像と各テキストの位置関係を崩さず、参考画像の縦長LPを再現します。
  商品一覧から下（商品・動画・フッター・コピーライト）は通常の流れで並べているので、
  商品数が増えるとその分だけ下が押し下げられ、ページ全体の高さも自動で伸びます。
*/
.viewport-stage {
 position: relative;
 width: 100%;
 overflow: hidden;
}
.lp {
 position: absolute;
 top: 0;
 left: 50%;
 width: 1500px;
 height: auto; /* 中身に合わせて伸びる（JSで実際の高さを測って縮小） */
 margin-left: -750px;
 transform-origin: top center;
 background: #b90000;
}

/* header */
.site-header {
 position: absolute;
 left: 0;
 top: 0;
 width: 1500px;
 height: 100px;
 overflow: hidden;
}
.header-bg {
 position: absolute;
 inset: 0;
 width: 1500px;
 height: 100px;
}
.header-logo {
 position: absolute;
 left: 536px;
 top: 19px;
 width: 427px;
 height: 61px;
 object-fit: contain;
}

/* 言語切り替え：PCはヘッダー右側に重ねる */
.lang-switch {
 position: absolute;
 right: 24px;
 top: 50px;
 transform: translateY(-50%);
 z-index: 10;
 display: flex;
 gap: 8px;
}
.lang-switch a {
 padding: 6px 12px;
 border-radius: 4px;
 background: rgba(0, 0, 0, 0.4);
 color: #fff;
 font-size: 20px;
 font-weight: 700;
 line-height: 1.3;
 text-decoration: none;
}
.lang-switch a:hover {
 background: rgba(0, 0, 0, 0.65);
}
.lang-switch a[aria-current="page"] {
 background: #fff;
 color: #b90000;
}
/* 個別の言語のフォント（他言語ページでも正しく表示） */
.lang-switch a[lang="ja"] {
 font-family:
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo,
  sans-serif;
}
.lang-switch a[lang="th"] {
 font-family: "Noto Sans Thai", Tahoma, sans-serif;
}

/* タイ語は上下に声調記号が付くので行間を広めに */
html[lang="th"] .editable-copy {
 line-height: 1.45;
}

/* slider
   高さ 789px の中に「余白 + スライド + 余白」を収める。
   スライド 1枚 = 幅350px + 右マージン16px = 366px、4枚で1セット 1464px。 */
.hero-slider {
 --pad-y: 18px; /* スライド上下の余白 */
 --slide-w: 350px;
 --slide-gap: 16px; /* スライド間の隙間 */
 --set-w: 1464px; /* (slide-w + slide-gap) × 4 */
 --speed: 60s; /* 1セット流れる時間。小さいほど速い */

 position: absolute;
 left: 0;
 top: 100px;
 width: 1500px;
 height: 789px;
 overflow: hidden;
 background: #222;
}

.slider-viewport {
 position: absolute;
 left: 0;
 top: var(--pad-y);
 bottom: var(--pad-y);
 width: 100%;
 overflow: hidden;
}
.slider-track {
 display: flex;
 height: 100%;
 width: max-content;
 animation: slider-loop var(--speed) linear infinite;
 will-change: transform;
}

.slide {
 position: relative;
 flex: 0 0 var(--slide-w);
 width: var(--slide-w);
 height: 100%;
 margin-right: var(--slide-gap);
 overflow: hidden;
}
.slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
}

@keyframes slider-loop {
 from {
  transform: translateX(0);
 }
 to {
  transform: translateX(calc(var(--set-w) * -1));
 }
}

@media (prefers-reduced-motion: reduce) {
 .slider-track {
  animation: none;
 }
}

/* main canvas */
.main-canvas {
 position: relative;
 margin-top: 889px; /* ヘッダー100px + スライダー789px */
 width: 1500px;
 overflow: hidden;
}
/* 背景は main-canvas の高さに合わせて縦に伸ばす */
.main-background {
 position: absolute;
 inset: 0;
 width: 1500px;
 height: 100%;
 object-fit: fill;
}
.abs {
 position: absolute;
}
.intro-subtitle {
 left: 404px;
 top: 95px;
 width: 692px;
 height: 99px;
 object-fit: contain;
}

.noodle {
 position: absolute;
 left: 0;
 width: 1500px;
}
.noodle img {
 width: 1500px;
 height: auto;
}
.noodle-somen {
 top: 203px;
 height: 1311px;
}
.noodle-soba {
 top: 1506px;
 height: 1099px;
}
.noodle-udon {
 top: 2622px;
 height: 1065px;
}
.noodle-ramen {
 top: 3739px;
 height: 1106px;
}

.editable-copy {
 position: absolute;
 margin: 0;
 color: #fff;
 text-align: center;
 font-size: 22px;
 line-height: 1.22;
 font-weight: 700;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
 z-index: 5;
}
.copy-somen {
 left: 145px;
 top: 1360px;
 width: 1210px;
}
.copy-soba {
 left: 150px;
 top: 2446px;
 width: 1200px;
 line-height: 1.18;
}
.copy-udon {
 left: 145px;
 top: 3552px;
 width: 1210px;

 line-height: 1.18;
}
.copy-ramen {
 left: 145px;
 top: 4662px;
 width: 1210px;
 line-height: 1.17;
}

/* culture */
.culture-title {
 position: absolute;
 left: 153px;
 top: 4885px;
 width: 1194px;
 height: 115px;
 object-fit: contain;
}
.culture-collage {
 position: absolute;
 left: 0;
 top: 5042px;
 width: 1500px;
 height: 895px;
 object-fit: contain;
}
.culture-copy {
 left: 150px;
 top: 5936px;
 width: 1200px;

 line-height: 1.22;
}

/* products：エリア全体を1つの箱にして、中は上から順に並べる */
.products {
 position: relative;
 margin: 6130px 0 0 150px; /* main-canvas の上端から 6130px */
 width: 1200px;
 z-index: 6;
 display: flex;
 flex-direction: column;
 gap: 36px; /* 段と段の間隔 */
}
.product-group h2 {
 margin: 0 0 14px; /* 見出しと商品画像の間隔 */
 color: #fff;
 font-size: 30px;
 font-weight: 700;
 line-height: 1;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* 6列で折り返し、商品が増えたら下に段が増える */
.product-row {
 display: grid;
 grid-template-columns: repeat(6, 180px);
 gap: 24px;
}
.product-row img {
 width: 180px;
 height: 180px;
 object-fit: cover;
}

/* short videos */
.short-videos {
 position: relative;
 margin-top: 56px; /* 商品一覧との間隔 */
 width: 1500px;
 z-index: 6;
}
.short-videos h2 {
 margin: 0 0 34px;
 color: #fff;
 font-weight: 700;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
 font-size: 31px;
 line-height: 1.1;
}
.video-row {
 margin-left: 150px;
 width: 1200px;
 display: flex;
 justify-content: space-between;
}
.video-card {
 width: 250px;
 height: 445px;
 overflow: hidden;
 background: #fff;
 border: 0;
 text-decoration: none;
}
.video-card img {
 width: 250px;
 height: 445px;
 object-fit: cover;
 object-position: center center;
}

/* footer */
.contact-footer {
 position: relative;
 width: 1500px;
 padding: 137px 0 35px; /* 動画との間隔 / 下の余白 */
 z-index: 5;
}
/* 問い合わせ画像 + その上に重ねるメール・電話リンク */
.contact-art-wrap {
 position: relative;
 margin-left: 145px;
 width: 1210px;
 container-type: inline-size; /* 文字サイズを画像の幅に連動させる（cqw） */
}
.contact-art {
 width: 100%;
 height: auto;
}
.contact-links {
 position: absolute;
 left: 0;
 right: 0;
 top: 83%; /* 「Banshu region, HYOGO」の下。上下位置はここで調整 */
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1.6cqw;
 font-family: "Oswald", "Arial Narrow", Impact, sans-serif;
 font-weight: 600;
 font-size: 5.5cqw; /* PCで約53px。画像の幅に合わせて自動で縮む */
 line-height: 1.2;
}
.contact-links a {
 color: #fff;
 text-decoration: none;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.contact-links a:hover,
.contact-links a:focus-visible {
 text-decoration: underline;
 text-underline-offset: 0.12em;
}
.footer-logo {
 margin: 113px auto 0;
 width: 427px;
 height: 61px;
 object-fit: contain;
}

.copyright {
 position: relative;
 width: 1500px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #000;
 color: #fff;
 font-size: 19px;
 letter-spacing: 0.02em;
}

/* ==========================================================
   スマホ版（767px以下）
   PC版は1500px固定の絶対配置を縮小しているが、スマホでは文字が小さくなりすぎるため
   通常の縦積みレイアウトに切り替える。HTMLの並び順そのままで上から表示。
   PC版のクラス指定より優先させるため、頭に .lp を付けている。
   ========================================================== */
@media (max-width: 767px) {
 .lp {
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
 }

 /* header */
 .lp .site-header {
  position: relative;
  width: 100%;
  height: 56px;
 }
 .lp .header-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .lp .header-logo {
  left: 50%;
  top: 50%;
  width: 64%;
  max-width: 280px;
  height: auto;
  transform: translate(-50%, -50%);
 }

 /* 言語切り替え：スマホはヘッダー下に帯で表示 */
 .lp .lang-switch {
  position: static;
  transform: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: #000;
 }
 .lp .lang-switch a {
  padding: 4px 10px;
  font-size: 13px;
 }
 html[lang="th"] .lp .editable-copy {
  line-height: 1.9;
 }

 /* slider：1枚 255px + 隙間 10px = 265px、4枚で 1060px */
 .lp .hero-slider {
  --pad-y: 12px;
  --slide-w: 255px;
  --slide-gap: 10px;
  --set-w: 1060px; /* (slide-w + slide-gap) × 4 */
  --speed: 40s;
  position: relative;
  top: auto;
  width: 100%;
  height: 510px;
 }

 /* main canvas：main-bg.png を背景に敷き、縦の長さに合わせて拡大（左右ははみ出た分カット） */
 .lp .main-canvas {
  position: static;
  margin-top: 0;
  width: 100%;
  height: auto;
  padding-bottom: 8px;
  background: #b90000 url(../img/main-bg.png) center top / cover no-repeat;
 }
 .lp .main-background {
  display: none;
 }
 .lp .abs {
  position: static;
 }
 .lp .intro-subtitle {
  width: 90%;
  height: auto;
  margin: 28px auto 8px;
 }

 /* 麺の紹介 */
 .lp .noodle {
  position: static;
  width: 100%;
  height: auto;
  margin-top: 24px;
 }
 .lp .noodle img {
  width: 100%;
 }

 /* 本文：<br> は消して画面幅で自然に折り返す */
 .lp .editable-copy {
  position: static;
  width: auto;
  padding: 12px 20px 0;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
 }
 .lp .editable-copy br {
  display: none;
 }

 /* culture */
 .lp .culture-title {
  position: static;
  width: 92%;
  height: auto;
  margin: 48px auto 16px;
 }
 .lp .culture-collage {
  position: static;
  width: 100%;
  height: auto;
 }

 /* products：見出し + 3列で折り返し */
 .lp .products,
 .lp .short-videos {
  position: static;
  width: 100%;
  height: auto;
 }
 .lp .products h2,
 .lp .short-videos h2 {
  position: static;
  width: auto;
  margin: 48px 16px 16px;
  font-size: 22px;
  line-height: 1.35;
 }
 .lp .products {
  gap: 0;
  margin: 0;
 }
 .lp .short-videos {
  margin-top: 0;
 }
 .lp .product-group h2 {
  margin: 40px 16px 12px;
  font-size: 22px;
  line-height: 1.35;
 }
 .lp .product-row {
  position: static;
  width: auto;
  height: auto;
  margin: 0 16px 8px;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
 }
 .lp .product-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
 }

 /* short videos：2列 × 2段 */
 .lp .video-row {
  position: static;
  width: auto;
  height: auto;
  margin: 0 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
 }
 .lp .video-card {
  width: auto;
  height: auto;
  aspect-ratio: 250 / 445;
 }
 .lp .video-card img {
  width: 100%;
  height: 100%;
 }

 /* footer */
 .lp .contact-footer {
  position: static;
  width: 100%;
  height: auto;
  padding: 48px 16px 24px;
 }
 .lp .contact-art-wrap {
  margin-left: 0;
  width: 100%;
 }
 .lp .contact-art {
  position: static;
  width: 100%;
  height: auto;
 }
 .lp .footer-logo {
  position: static;
  width: 70%;
  max-width: 300px;
  height: auto;
  margin: 32px auto 0;
 }

 .lp .copyright {
  position: static;
  width: 100%;
  height: auto;
  padding: 12px 16px;
  font-size: 12px;
  text-align: center;
 }
}
.video-card {
 position: relative;
 display: block;
}
.video-card::after {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 width: 64px;
 height: 64px;
 margin: -32px 0 0 -32px;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.55)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
  55% center / 30px no-repeat;
 pointer-events: none;
}

/* ==========================================================
   商品画像のポップアップ（ライトボックス）
   ========================================================== */
.product-row img {
 cursor: zoom-in;
 transition:
  transform 0.2s,
  box-shadow 0.2s;
}
.product-row img:hover,
.product-row img:focus-visible {
 transform: scale(1.04);
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
 outline: none;
}

.lightbox {
 width: 100%;
 height: 100%;
 max-width: none;
 max-height: none;
 margin: 0;
 padding: 0;
 border: 0;
 background: transparent;
 color: #fff;
}
.lightbox[open] {
 display: flex;
 align-items: center;
 justify-content: center;
 animation: lb-fade 0.2s ease-out;
}
.lightbox::backdrop {
 background: rgba(0, 0, 0, 0.85);
}
@keyframes lb-fade {
 from {
  opacity: 0;
  transform: scale(0.97);
 }
 to {
  opacity: 1;
  transform: none;
 }
}
.lightbox-figure {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 72px 40px 40px;
 box-sizing: border-box;
}
.lightbox-img {
 max-width: min(100%, 900px);
 max-height: calc(100% - 50px);
 object-fit: contain;
 background: #fff;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.lightbox-caption {
 margin-top: 14px;
 font-size: 16px;
 font-weight: 700;
 text-align: center;
}
.lightbox-btn {
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 56px;
 height: 56px;
 padding: 0 0 4px;
 border: 0;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
 font-size: 40px;
 line-height: 1;
 cursor: pointer;
}
.lightbox-btn:hover,
.lightbox-btn:focus-visible {
 background: rgba(255, 255, 255, 0.35);
 outline: none;
}
.lightbox-close {
 top: 16px;
 right: 16px;
 font-size: 36px;
}
@media (max-width: 767px) {
 .lightbox-figure {
  padding: 64px 12px 32px;
 }
 .lightbox-caption {
  font-size: 13px;
 }
 .lightbox-btn {
  width: 44px;
  height: 44px;
  font-size: 32px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .lightbox[open] {
  animation: none;
 }
 .product-row img {
  transition: none;
 }
}