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

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

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

  /* base font size */
  --fs-form: clamp(1.6rem, 1rem + .8vw, 2.4rem);

}

@media (min-width: 1200px) {
  :root {
    
  }
}
@media (max-width: 959px) {
  :root {
    --section-gap: 80px;
  }  
}


/* ========================================
  Base Reset
======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: var(--base-font-size);
  scrollbar-gutter: stable;
}
body {
  color: var(--color-main);
  font-size: 1.6rem;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    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 {
  display: block;
  height: auto ;
}

/* フォームリセット */
input,
textarea,
select,
button {
  font-size: var(--fs-form);
  width: 100%;
  padding: 12px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  border: 1px solid #aaa;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  line-height: 1.5;
  transition: border-color .2s ease;
}

/* textareaだけリサイズ許可 */
textarea {
  resize: vertical;
}

/* select */
select {
  padding-right: 40px;
}

/* 短いselect */
.wpcf7-form-control-wrap:has(.select-short) {
  width: 320px;
  max-width: 100%;
}
.select-short {
  width: 100%;
}

/* ラッパー */
.wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

/* selectの矢印 */
.wpcf7-form-control-wrap:has(select)::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  pointer-events: none;
}

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

/* ボタン */
button,
input[type="submit"] {
  cursor: pointer;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  padding: 12px 24px;
}

/* 隠しテキスト */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ========================================
  Utility（構造用）
  ※ レイアウトの骨組みのみを扱う
  ※ 見た目（色・余白・寄せ）は持たせない
======================================== */

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

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

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

/*
  フル幅表示用のラッパー
  - 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;
}
.l-section.has-bg {
  padding-block: var(--section-gap)
}


/*
  ページが短いときの調整
*/
.l-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.l-main > .l-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.l-main > .l-container > .l-section:only-child {
  flex: 1;
}