@charset "UTF-8";
/* ========================================
  CSS Variables
======================================== */
:root {
  /* layout */
  --content-width: 768px;
  --content-padding: 20px;
  --section-gap: 80px;

  /* typography */
  --base-font-size: 62.5%;
  --base-line-height: 1;

  /* color */
  --color-main: #000;

  /* base font size */

}

@media (min-width: 1200px) {
  :root {
    --content-padding: 40px;
  }
}
@media (max-width: 768px) {
  :root {
    --section-gap: 60px;
  }  
}


/* ========================================
  Base Reset
======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: var(--base-font-size);
  scrollbar-gutter: stable;
}
body {
  color: var(--color-text);
  font-size: 1.6rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 500;
  background-color: var(--color-bg);
  line-height: var(--base-line-height);
  margin: 0;
  padding: 0;
  overflow-x: hidden;/* フル幅レイアウトのはみ出し防止用。sticky が効かない／横スクロールが必要な場合はコメントアウトする。*/  
}
button { font-family: inherit; }
input, textarea { font-family: inherit; }

h1 ,h2, h3, p, figure, dl, dt, dd {
  margin: 0;
  padding: 0;
}

ul, li, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  vertical-align: bottom;
  display: block;
  height: auto ;
}

/* フォームリセット */
input,
textarea,
select,
button {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  border: none;
  background: none;
  outline: none;
}

/* input系の基本見た目 */
input,
textarea {
  width: 100%;
  font-size: var(--fs-form);
  padding: 12px;
  border: 1px solid #ccc;
  background-color: #fff;
}

/* フォーカス時 */
input:focus,
textarea:focus {
  border-color: #000;
}

/* ボタン */
button,
input[type="submit"] {
  cursor: pointer;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  padding: 12px 24px;
}
/* ========================================
  Utility（構造用）
  ※ レイアウトの骨組みのみを扱う
  ※ 見た目（色・余白・寄せ）は持たせない
======================================== */

/*
  ヘッダー専用コンテナ
  - header内の横幅・左右余白を管理
  - main用の l-container とは分けて扱う
*/
.l-header-container {
  width: 100%;
  max-width: 100%;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
  margin-left: auto;
  margin-right: auto;
}

/* 
  中央寄せの基本コンテナ
  - max-width + content-padding を管理
  - 通常ページの基準となる箱
*/
.l-container {
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  background: var(--color-bg);
}

/*
  セクションが連続した場合の間隔調整
  - l-section 同士が続くときのみ適用
*/
.l-section + .l-section {
  margin-top: var(--section-gap);
}

/*
  フル幅表示用のラッパー
  - l-container の幅制限を一時的に解除する
  - 背景やビジュアルを画面いっぱいに広げたい場合に使用
  - 中身を中央寄せしたい場合は、内側に l-container を入れる
  - .l-fullは要素全体幅を広げ、.l-full-bgは背景のみ広げる
*/
.l-full { 
  margin-left: calc(50% - 50vw); 
  margin-right: calc(50% - 50vw); 
}
.l-full-bg {
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/*
  全幅要素内の中身用コンテナ
  - 中央寄せ + max-width + content-padding
  - 入れ子OK
  - 実際の幅や余白はレイアウトに依存する
*/
.l-inner {
  max-width: var(--content-width);
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
  margin-left: auto;
  margin-right: auto;
}

/*
  フレックスレイアウト用の箱
  - PC: 横並び（row）
  - SP: 縦並び（column）
  - 並び方向のみを制御し、gap / align / justify は扱わない
*/
.l-flex {
  display: flex;
}

@media (max-width: 768px) {
  .l-flex {
    flex-direction: column;
  }
}



/* ========================================
  WordPress Base
======================================== */
img {
  max-width: 100%;
  height: auto;
}

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

a:hover {
  
}