/* ダルマちゃんめだか 共通スタイル */

:root {
  --bg: #FAFAF8;
  --header-bg: #FFFFFF;
  --ink: #222222;
  --radius: 4px;
  --gutter: 20px;
  --max-width: 1000px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.9;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* ヘッダー（サイト名の帯） */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--ink);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.site-title {
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.site-title a {
  text-decoration: none;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.site-nav a {
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--ink);
}

/* メイン */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px var(--gutter);
}

/* ボタン：主要は黒塗り、それ以外は黒枠 */
.btn {
  display: inline-block;
  min-width: 160px;
  padding: 12px 28px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--ink);
  color: var(--header-bg);
}

.btn:hover {
  opacity: 0.8;
}

.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ホーム */
/* 画面の横幅いっぱいの黒い帯。色は写真の背景（容器の黒）になじむ色 */
.hero {
  position: relative;
  margin: 0;
  padding: 28px var(--gutter);
  background: #1a1a18;
}

/* キャッチコピー。スマホなど狭い画面では、写真のすぐ下に横書きで1行で表示する */
.hero__copy {
  margin: 16px 0 0;
  color: #FFFFFF;
  font-family: "Klee One", "Yuji Syuku", serif; /* スマホの横書きは Klee One */
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* 文字間の余白が末尾に付く分、中央からずれないように */
  text-align: center;
  white-space: nowrap;
}

.hero__copy br {
  display: none;
}

/* 広い画面では、帯の左の余白に縦書き（写真と重ならない幅のときだけ） */
@media (min-width: 960px) {
  .hero__copy {
    position: absolute;
    top: 50%;
    left: max(32px, calc((100% - var(--max-width)) / 2 + var(--gutter)));
    margin: 0;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: "Yuji Syuku", "Shippori Mincho", serif; /* パソコンの縦書きは Yuji Syuku */
    font-size: 1.5rem;
    line-height: 1.7;
    letter-spacing: 0.3em;
    text-indent: 0;
    text-align: start;
  }

  .hero__copy br {
    display: inline;
  }
}

/* 写真スライド。2枚とも同じ縦横比(6:5)で切り抜いてあり、同じ大きさの枠に重ねて、
   不透明度を変えて切り替える（前の写真が消えてから、次の写真が出てくる）。高さは最大500px（幅600px）、
   スマホでは画面幅に合わせて縮む。切り替えは js/slider.js が is-active を付け替える。 */
.hero__slides {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 6 / 5;
  margin: 0 auto;
  touch-action: pan-y; /* 縦のスクロールはそのまま。横にすべらせる動きは slider.js が受け取る */
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 動画など、縦横比の違うスライドを足しても枠いっぱいに収める */
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* 消えるとき：0.5秒 */
  /* ふちを黒い帯になじませるぼかしは、写真そのものに焼き込んである（img/web/*-hero.jpg）。
     CSSのマスクでぼかすと、四隅が丸く欠けて見えるため。元の（ぼかし前の）写真は img/web/src/ */
}

/* 出てくるとき：前の写真が消え終わる0.5秒後から、0.5秒かけて出てくる */
.hero__slide.is-active {
  opacity: 1;
  transition-delay: 0.5s;
}

/* 矢印を押したときは、動きなしですぐに切り替える（js/slider.js が一瞬だけ付ける） */
.hero__slides.is-instant .hero__slide,
.hero__slides.is-instant .hero__slide.is-active {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__slide.is-active {
    transition: none;
  }
}

/* 写真の下の「‹　1 / 2　›」（左右の矢印で前後の写真へ、真ん中は今何枚目か）。
   js/slider.js が作る。白い細い文字。矢印のボタンは、スマホでも押しやすい48px四方 */
.hero__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  color: #FFFFFF;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  line-height: 1;
}

.hero__arrow {
  width: 44px;
  height: 48px;
  margin: 0 -6px; /* 数字との間をつめる（押せる範囲は44×48pxのまま） */
  padding: 0 0 8px; /* 矢印の記号は文字の中で下に寄るので、数字と高さがそろうよう少し上げる */
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.hero__arrow:hover {
  opacity: 0.7;
}

.hero__arrow:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -2px;
}

.hero__count {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.intro {
  text-align: center;
}

.intro p {
  margin: 0 auto 28px;
  max-width: 37em;
}

/* 紹介文は、文節の途中で折り返さない（狭い画面では文節の切れ目で折り返す） */
.phrase {
  display: inline-block;
}

.intro__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ホーム：フッターの線の上の文章（あいさつ文と同じ大きさ） */
.charm {
  padding-top: 0;
  text-align: center;
}

/* あいさつ文・ボタン・見出しの間は28px、見出しと紹介文の間はそれより少し狭い20px */
.intro {
  padding-bottom: 28px;
}

.charm .page-title {
  margin-bottom: 20px;
}

.charm p {
  margin: 0 auto;
  max-width: 37em;
}

/* 品種紹介ページ */
.page-title {
  margin: 0 0 20px;
  font-family: "Shippori Mincho", serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}

.page-intro {
  margin: 0;
  text-align: center;
}

/* 品種のカード：スマホは1列、タブレットは2列、パソコンは3列 */
.variety-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .variety-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .variety-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 写真は、縦横比6:5に切りそろえてあり、ふちのぼかしは弱めに焼き込んである（img/web/*-card-soft.jpg）。
   角を少し丸くして、うすい影をつける */
.variety__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
}

.variety__name {
  margin: 16px 0 4px;
  font-family: "Shippori Mincho", serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: #A0522D;
}

.variety__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  text-align: center;
}

.page-note {
  margin: 56px 0 0;
  font-size: 0.95rem;
  text-align: center;
}

/* フッター */
.site-footer {
  border-top: 1px solid var(--ink);
  color: #666666;
  font-size: 0.85rem;
}

/* メニューは左端、コピーライトは右端（ヘッダーと同じ位置） */
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

/* フッターのメニュー：コピーライトと同じ大きさ・細い文字・下線なし */
.site-footer .site-nav a {
  font-size: inherit;
  font-weight: 400;
  border-bottom: 0;
}

.site-footer p {
  margin: 0;
}

/* ショップ：白背景・黒文字、見出しは画面の上半分に配置 */
.page-shop {
  background: #FFFFFF;
  color: #000000;
}

.text-link {
  color: inherit;
  text-decoration: underline;
}