/*
Theme Name: Myouri Original
Theme URI: https://myouri.local
Author: 妙理の里キャンプ場
Description: 妙理の里(みょうりのさと)キャンプ場のオリジナルテーマ。山と川辺のキャンプ場をイメージしたパステルカラーのデザイン。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myouri
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  /* 山（マウンテングリーン） */
  --color-mountain: #a9cdb0;
  --color-mountain-soft: #dcebe0;
  --color-mountain-deep: #4f7358;

  /* 川（リバーブルー） */
  --color-river: #b7dde6;
  --color-river-soft: #e3f3f6;
  --color-river-deep: #3e7480;

  /* 焚き火・木（サンド／テラコッタ） */
  --color-sand: #f1dfc0;
  --color-sand-soft: #faf3e5;
  --color-sand-deep: #c08c4d;
  --color-ember: #e3a56f;
  --color-ember-deep: #b3673a;

  /* ベース */
  --color-bg: #fbf8f2;
  --color-bg-alt: #f3ede2;
  --color-surface: #ffffff;
  --color-text: #3a3a32;
  --color-text-soft: #6b6a5f;
  --color-border: #e6ddca;

  --font-heading: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;

  --shadow-soft: 0 10px 30px rgba(79, 115, 88, 0.12);
  --shadow-card: 0 6px 18px rgba(79, 115, 88, 0.1);

  --container-w: 1120px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding-top: 78px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-river-deep);
  text-decoration: none;
}

a:hover {
  color: var(--color-ember-deep);
}

ul,
ol {
  padding-left: 1.4em;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   Base typography
   ========================================================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--color-mountain-deep);
  line-height: 1.5;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(1.9rem, 2.4vw + 1rem, 2.8rem);
}

h2 {
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1.2em;
}

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-mountain-deep);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-s);
  z-index: 1000;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

.tel-num {
  white-space: nowrap;
}