@charset "UTF-8";

/* -----------------------------------------------
FileName: base.css
----------------------------------------------- */

/* ===== CSS Variables ===== */
:root {
  /* Brand Colors */
  --primary-main: #D46F7D;
  --primary-accent: #A45661;
  --primary-supplementary: #E5AAA6;

  --secondary-main: #6F514B;
  --secondary-accent: #563F3A;
  --secondary-supplementary: #C89E92;

  --background: #F3E8E2;

  --text-main: #4F4541;
  --text-accent: #2F2A28;
  --text-sub: #7A6761;

  --border: #6F514B;

  /* Font Families */
  --font-mincho: "游明朝体", "Yu Mincho", "游明朝", YuMincho, "Noto Serif JP", serif;
  --font-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック ProN W3", Meiryo, sans-serif;
  --font-en-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-en-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-number: "Futura", "Century Gothic", "Trebuchet MS", Georgia, sans-serif;

  /* Spacing Scale */
  --space-xs:  clamp(6px,  1.5vw,  8px);
  --space-sm:  clamp(10px, 3vw,   16px);
  --space-md:  clamp(16px, 4vw,   24px);
  --space-lg:  clamp(24px, 5.5vw, 40px);
  --space-xl:  clamp(32px, 8vw,   60px);
  --space-xxl: clamp(48px, 10vw,  80px);

  /* Layout */
  --side-padding: clamp(20px, 5.5vw, 32px);
  --content-max: 768px;

  /* Section padding (top/bottom) */
  --section-pt: clamp(40px, 10vw, 80px);
  --section-pb: clamp(40px, 10vw, 80px);

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xlg:  64px;
  --radius-full: 9999px;
}

/* ===== Base Overrides ===== */
html {
  box-sizing: border-box;
  font-size: 16px;
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-gothic);
  color: var(--text-main);
  background-color: var(--background);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

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

h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
  font-weight: normal;
}
/* 全体の背景 */
body {
  background-image: url('../../images/BG/roma-lp-bg.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
}

/* コンテンツ列を中央配置・最大幅 768px */
main,
.footer {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

main {
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.25);
  background-color: var(--background);
}