@charset "UTF-8";

/* =========================================
   0. Import Fonts
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;700&family=Shippori+Mincho+B1:wght@400;500;700&display=swap');

/* =========================================
   1. Reset (Architectural CSS Reset)
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin-block-end: 0;
    margin: 0;
}

ul[role='list'], ol[role='list'], ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    text-wrap: balance;
}

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

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

textarea:not([rows]) {
    min-height: 10em;
}

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

a:hover {
    opacity: 0.7;
}

/* =========================================
   2. Root Font Size Settings (Fluid Typography)
   ※remを使ってPC/タブレット/SPを自動スケールさせる設定
   ========================================= */

/* PC大画面（1441px以上）：常に 1rem = 10px */
@media screen and (min-width: 1441px) {
  html { font-size: 10px; }
}

/* PC標準（1025px 〜 1440px）：1440px基準で 1rem = 10px になるよう縮小 */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  html { font-size: 0.69444vw; }
}

/* タブレット・SP（1024px以下）：375px基準で 1rem = 10px になるよう拡大・縮小
   ※これにより、CSSで「2.4rem(24px相当)」と指定するだけで、
     SPではそのまま24px、タブレットでは比率を保って大きく表示されます。 */
@media screen and (max-width: 1024px) {
  html { font-size: 2.66666vw; }
}

/* =========================================
   3. Variables (CELEVI Design)
   ========================================= */
:root {
  /* Colors */
  --color-base-dark: #202020;
  --color-base-dark-2: #262626;
  --color-base-light: #EFEFEF;
  --color-base-light-2: #E9EAEA;
  --color-text-main: #3E3D35;
  --color-white: #FFFFFF;
  --color-gold: #D5B767;
  --color-error: #FF0000;
  --color-placeholder: #A8A8A8;

  /* Fonts */
  --font-ja: 'Shippori Mincho B1', serif;
  --font-en: 'Aboreto', display;
  --font-sub-sans: 'Noto Sans JP', sans-serif;
  --font-sub-serif: 'Noto Serif JP', serif;
}

/* =========================================
   4. Base Settings
   ========================================= */
body {
  font-family: var(--font-ja);
  color: var(--color-text-main);
  background-color: var(--color-white);
  font-size: 1.6rem; /* 基本 16px相当 */
  line-height: 1.6;
}

/* =========================================
   5. Layout Utilities
   ========================================= */
/* コンテンツのインナー幅 */
.l-inner {
  max-width: 144rem;
  margin: 0 auto;
  width: 100%;
}

/* PC/SP 表示切り替えユーティリティ */
.sp-only { display: none !important; }
.pc-only { display: block !important; }

@media (max-width: 1024px) {
  .sp-only { display: block !important; }
  .pc-only { display: none !important; }
}

/* =========================================
   6. Typography Utilities
   ========================================= */
/* 英語セクションタイトル共通 */
.c-title-en {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: 400;
  font-size: 4.2rem;
}
@media (max-width: 1024px) {
  .c-title-en { font-size: 2.4rem; }
}

/* 日本語セクションタイトル共通 */
.c-title-ja {
  font-family: var(--font-ja);
  font-weight: 700;
  text-align: center;
}

/* =========================================
   7. Components & Decorations
   ========================================= */
/* ダーク系グラデーション背景 */
.c-bg-grad-dark {
  background: linear-gradient(180deg, #666666 0%, #000000 50%, #000000 100%);
}

/* ゴールド背景のラベル・強調ボックス */
.c-label-gold {
  background-color: var(--color-gold);
  color: var(--color-text-main);
  text-align: center;
}

/* ゴールドの下線マーカー */
.c-marker-gold {
  background: linear-gradient(transparent 60%, var(--color-gold) 60%);
}

/* 括弧付き強調テキスト（例: [所有権]） */
.c-highlight-bracket {
  color: var(--color-gold);
  background-color: var(--color-text-main);
  padding: 0 0.2rem;
}

/* 画像CTAボタンのラッパー */
.c-btn-cta {
  display: block;
  margin: 0 auto;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.c-btn-cta:hover {
  opacity: 0.8;
}

/* =========================================
   8. Form Utilities
   ========================================= */
.c-input, .c-textarea {
  background-color: var(--color-white);
  border: none;
  font-family: var(--font-ja);
  width: 100%;
  padding: 0.8rem;
}
.c-input::placeholder, .c-textarea::placeholder {
  color: var(--color-placeholder);
  font-family: var(--font-sub-serif);
  font-size: 1.4rem;
}
.c-required {
  color: var(--color-error);
  font-family: var(--font-sub-serif);
  font-size: 1.6rem;
}

/* =========================================
   9. Generic Animations (Fade-in Up)
   ========================================= */
:root {
  --anime-duration: 1.0s;
  --anime-easing: cubic-bezier(0.25, 1, 0.5, 1);
}

/* 汎用のフェードアップアニメーション */
.js-anime-fadein-up {
  opacity: 0;
  transform: translateY(3rem);
  transition: transform var(--anime-duration) var(--anime-easing),
              opacity var(--anime-duration) var(--anime-easing);
  will-change: transform, opacity;
}

.js-anime-fadein-up.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延用ユーティリティ */
.u-delay-100 { transition-delay: 0.1s; }
.u-delay-200 { transition-delay: 0.2s; }
.u-delay-300 { transition-delay: 0.3s; }

/* スムーススクロールを有効化 */
html {
  scroll-behavior: smooth;
}