/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
  /* Colors - Brand  ※TODO: たかしま農場のブランドカラーに差し替え */
  --color-brand: #3f7d3a;
  --color-brand-dark: #2f5f2b;

  /* Colors - Text */
  --color-text: #262626;
  --color-text-sub: #525252;
  --color-text-inverse: #fff;
  --color-text-brand: #1f3d1c;

  /* Colors - Surface */
  --color-surface-body: #fff;
  --color-surface-default: #fff;
  --color-surface-section: #f5f5f0;

  /* Colors - Border */
  --color-border: #d4d4d4;

  /* Typography */
  --font-sans: "Zen Kaku Gothic Antique", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Outfit", sans-serif;

  /* Layout */
  --container-max: 1760px;
  --container-padding: 12rem;
  --content-width: 120rem;
  --content-narrow: 80rem;
}

/* ========================================
   Reset
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* 1440px のアートボードを基準に rem をスケール。
     1440px 以上では 10px で固定し、シート（コンテンツ）を中央寄せ、左右は背景色だけになる（新聞風）。 */
  font-size: min(calc(100vw / 144), 10px);
}

html {
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--color-text);
  background-color: var(--color-surface-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}


@media (max-width: 743px) {
  /* 新聞風シートは常にビューポート幅にフィットさせる（1440 基準のまま縮小）。
     html の font-size は上の min(100vw/144, 10px) をそのまま使用する。 */
  :root {
    --container-padding: 2.5rem;
  }
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ========================================
   Utility
   ======================================== */
.l-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

.l-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.l-section__inner {
  max-width: var(--container-max);
  padding: 8rem var(--container-padding);
  width: 100%;
}

.inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 1.6rem;
}

/* Header offset for fixed header */
main {
  padding-top: 8.9rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ========================================
   Visibility Utilities
   ======================================== */
@media screen and (min-width: 744px), print { ._sp { display: none !important; } }
@media screen and (max-width: 743px) { ._pc { display: none !important; } }

/* <br> 専用: PCのみ改行 / SPのみ改行 */
@media screen and (min-width: 744px), print { .spOnly { display: none !important; } }
@media screen and (max-width: 743px) { .pcOnly { display: none !important; } }