/*----------------------------------------
  Foundation
----------------------------------------*/
:root {
  /* ベースカラー */
  --background: #fff;
  --on-background: #000;
  /* アクセントカラー */
  --primary: hsl(130, 47%, 54%);
  --secondary: hsl(350, 63%, 50%);
  --on-primary: #fff;
  --on-secondary: var(--on-primary);
  /* ニュートラルカラー */
  --neutral: hsl(130, 20%, 60%);
  --gray-light: hsl(130, 20%, 90%);
  --gray-dark: hsl(130, 20%, 10%);
  /* エラーカラー・その他用途カラー */
  --strong: hsl(0, 50%, 40%);
  --on-strong: hsl(0, 50%, 90%);
  --error: var(--strong);
  --nav-separator: rgba(255, 255, 255, 0.2);

  /* 基準となるフォントサイズを先に指定 */
  font-size: 1rem;
  /* サイズ系 */
  --line-height: 1.5;
  --width: min(1080px, 100%);

  /* フォントファミリ */
  --font-famiry: sans-serif;
  --headding-font-family: 'BIZ UDPGothic', sans-serif;
  --input-font-family: 'BIZ UDPGothic', sans-serif;

  accent-color: var(--gray-dark);
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-famiry);
  scroll-behavior: smooth;
}

a {
  color: var(--text);
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
div,
section,
header,
footer,
nav,
address,
label,
input,
span,
img,
a,
table,
tr,
th,
td {
  box-sizing: border-box;
  font-weight: normal;
  letter-spacing: 0.8px;
  line-height: var(--line-height);
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: baseline;
  word-wrap: break-word;
}

header,
footer {
  background: var(--primary);
  color: var(--on-primary);
}

img {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
}

label {
  display: block;
  max-width: 100%;
}

input,
button {
  color: var(--gray-dark);
  font-family: var(--input-font-family);
  font-size: 1rem;
  height: 3em;
  max-width: 100%;
  outline: none;
  padding: 1px 1em;
  text-align: left;
  transition: border 0.1s ease-out;
  width: 100%;
}

input {
  background: var(--background);
  border: solid 1px var(--neutral);
  border-radius: 0.5em;
}

input:-webkit-autofill {
  box-shadow: 0 0 0 999px var(--background) inset;
}

button {
  background: var(--primary);
  border: none;
  border-radius: 1em;
  color: #fff;
  cursor: pointer;
  text-align: center;
}

button:active {
  background: var(--gray-dark);
}

/*----------------------------------------
  Layout
----------------------------------------*/
.l-header {
  width: var(--width);
}

.l-header__nav {
  align-items: center;
  display: flex;
  gap: 2em;
  justify-content: end;
}

.l-header__nav :-webkit-any-link {
  text-decoration: none;
  line-height: 1;
}

.l-header__nav :-moz-any-link {
  text-decoration: none;
  line-height: 1;
}

.l-header__nav :any-link {
  text-decoration: none;
  line-height: 1;
}

.l-header__nav :-webkit-any-link:hover {
  text-decoration: underline;
}

.l-header__nav :-moz-any-link:hover {
  text-decoration: underline;
}

.l-header__nav :any-link:hover {
  text-decoration: underline;
}

.l-header__nav__content {
  -moz-text-align-last: justify;
  text-align-last: justify;
  width: 3em;
}

.l-header__nav__logo {
  display: none;
}

.l-header__icon {
  display: none;
}

@media (max-width :480px) {
  .l-header__nav {
    gap: 0;
  }

  .l-header__nav--contents {
    align-items: center;
    background: var(--primary);
    flex-flow: column nowrap;
    height: 100%;
    justify-content: revert;
    left: 0;
    padding: 1rem;
    position: fixed;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    width: 100%;
    z-index: 10;
  }

  .l-header__nav__content {
    border-bottom: solid 1px var(--nav-separator);
    margin: 1em 0 0 0;
    padding: 1em 1em 2em 1em;
    -moz-text-align-last: unset;
    text-align-last: unset;
    width: 100%;
  }

  .l-header__nav--active {
    transform: translateX(0);
  }

  .l-header__icon {
    display: flex;
    justify-content: end;
    width: 100%;
  }

  .l-header__nav__logo {
    border-bottom: none;
    display: inline;
  }
}

.l-header__logo {
  margin: 2em auto;
  max-width: 100%;
  width: 960px;
}

@media (max-width :480px) {
  .l-header__logo {
    margin: 1em auto;
  }
}

.l-contents {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  width: var(--width);
}

.l-contents__top {
  width: 100%;
  max-width: 768px;
}

.l-footer {
  gap: 1em;
  width: var(--width);
}

.l-footer__contacts {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: 2em;
  justify-content: center;
}

.l-footer__contacts__logo {
  flex: 0 1 auto;
  max-width: 100%;
}

.l-footer__contacts__address {
  flex: 0 0 auto;
  font-style: normal;
  max-width: 100%;
}

.l-footer__contacts__address__number {
  display: flex;
  gap: 1em;
}

.l-footer__rights {
  text-align: center;
}

/*----------------------------------------
  Object
----------------------------------------*/

/* card-box */

:root {
  --card-box-padding: 0.5em;
}

.card-box {
  --card-color: var(--primary);
  --on-card-color: var(--on-primary);
  --card-color-checked: var(--on-primary);
  --on-card-color-checked: var(--primary);
}

.card-box--p1 {
  --card-box-padding: 1em;
}

.card-box--inversion {
  --card-color: var(--on-primary);
  --on-card-color: var(--primary);
  --card-color-checked: var(--primary);
  --on-card-color-checked: var(--on-primary);
}

.card-box--secondary {
  --card-color: var(--secondary);
  --on-card-color: var(--on-secondary);
  --card-color-checked: var(--on-secondary);
  --on-card-color-checked: var(--secondary);
}

.card-box--gray {
  --card-color: var(--gray-light);
  --on-card-color: var(--on-background);
  --card-color-checked: var(--neutral);
  --on-card-color-checked: var(--on-background);
}

.card-box--strong {
  --card-color: var(--strong);
  --on-card-color: var(--on-strong);
}

.card-box {
  background: var(--card-color);
  border: none;
  border-radius: 0.5em;
  color: var(--on-card-color);
  display: inline-block;
  letter-spacing: normal;
  padding: var(--card-box-padding, 0.5em);
  text-decoration: none;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.card-box--circle {
  border-radius: 2em;
}

/* カードボックスがリンクかチェックボックス用クラスがある場合 */
button.card-box,
.card-box--checked,
.card-box--checked ~ .card-box {
  cursor: pointer;
}

/* チェックボックス用クラスは浮かしてカードに含める */
.card-box--checked {
  border: none;
  left: var(--card-box-padding, 0.5em);
  height: 1.5rem;
  position: absolute;
  top: var(--card-box-padding, 0.5em);
  width: 1.5rem;
  z-index: 1;
}

.card-box--checked ~ .card-box {
  align-items: center;
  display: flex;
  gap: 0.5em;
}

.card-box--checked ~ .card-box::before {
  content: '';
  display: block;
  flex: 0 0 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
}

/* ↑のホバー時 */
button.card-box:hover {
  opacity: 0.8;
}

.card-box--checked:checked ~ .card-box {
  background: var(--card-color-checked);
  color: var(--on-card-color-checked);
}

/* headding-box */

.headding-box {
  background: var(--gray-light);
  color: var(--gray-dark);
  font-family: var(--headding-font-family);
  padding: 1rem 1rem 1rem calc(1rem - 4px);
  border-left: 4px solid var(--primary);
  width: 100%;
}

/* table-box */

.table-box {
  border-collapse: collapse;
  display: table;
  width: 100%;
}

.table-box__column {
  text-align: center;
  border: solid 1px var(--gray-light);
  padding: 0.75em 0.25em;
  vertical-align: middle;
  word-break: keep-all;
}

.table-box__column--primary {
  background: var(--gray-light);
  color: var(--gray-dark);
}

.table-box__column--header {
  background: var(--primary);
  color: var(--on-primary);
  font-size: large;
  font-weight: bold;
}

/* text-box */

.text-box {
  position: relative;
  width: 100%;
}

.text-box__label {
  color: var(--neutral);
  display: block;
  font-size: 1em;
  left: 0;
  margin: 0;
  padding: 0 1em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.text-box .text-box__input:not(:-moz-placeholder-shown) ~ .text-box__label {
  opacity: 0;
}

.text-box .text-box__input:not(:placeholder-shown) ~ .text-box__label {
  opacity: 0;
}

.text-box__input {
  padding: 1px 1em 1px 1em;
}

.text-box__required ~ .text-box__input,
.text-box__required ~ .text-box__label {
  padding: 0 4em 0 1em;
}

.text-box__required {
  pointer-events: none;
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 2;
}

/* flex-box */

.flex-box {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5em;
  position: relative;
  width: 100%;
}

.flex-box--column {
  flex-direction: column;
}

.flex-box__item {
  flex: 0 0 auto;
}

@media (max-width :480px) {
  .flex-box {
    flex-flow: column nowrap;
  }

  .flex-box__item {
    width: 100%;
  }
}

/*----------------------------------------
  Utility
----------------------------------------*/
/* material-icons */
.u-material-icons {
  color: var(--on-primary);
  direction: ltr;
  display: inline-block;
  font-family: 'Material Symbols Outlined';
  font-size: 1em;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
}

.u-material-icons--bold {
  font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 48;
}

/* font-size : xs,sm,md,lg,xl,2x : bold */
.u-fs-lg {
  font-size: 1.25rem;
}

.u-fs-2x {
  font-size: 2rem;
}

.u-bold {
  font-weight: bold;
}

/* text-align */
.u-al-center {
  text-align: center;
}

/* margin */
.u-m0auto {
  margin: 0 auto;
}

.u-mlr-025 {
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.u-mtb-1 {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.u-mb-1 {
  margin-bottom: 1rem;
}

/* padding */
.u-p-1 {
  padding: 1rem;
}

.u-plr-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.u-ptb-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.u-ptb-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Scroll Lock */
.u-scroll-lock {
  overflow: hidden;
}

/*----------------------------------------
  Mailform Pro
----------------------------------------*/

.mfp_err {
  position: absolute;
}

.mfp_err[style]::before,
#mfp_warning[style]::before {
  color: var(--error);
  content: '\e000';
  direction: ltr;
  display: inline-block;
  font-family: 'Material Symbols Outlined';
  font-size: 1.5em;
  line-height: 1;
  font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 48;
  letter-spacing: normal;
  vertical-align: bottom;
}

div#mfp_hidden {
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0px;
  margin: 0px;
}

/* mailformproの確認画面にテーブルボックスを移植（手動） */
#mfp_confirm_table {
  border-collapse: collapse;
  display: table;
  margin: 2rem 0;
  width: 100%;
}

#mfp_confirm_table .mfp_achroma {
  background: var(--gray-light);
}

#mfp_confirm_table .mfp_colored {
  background: var(--background);
}

#mfp_confirm_table [class*="th-"],
#mfp_confirm_table [class*="td-"] {
  text-align: center;
  border: solid 1px var(--gray-light);
  padding: 0.75em 0.25em;
  vertical-align: middle;
  word-break: keep-all;
}

#mfp_confirm_table [class*="th-"] {
  font-size: large;
  font-weight: bold;
}

/* mailformproの確認画面ボタンにカードボックスを移植（手動） */
.mfp_buttons .mfp_element_button {
  --card-color: var(--secondary);
  --on-card-color: var(--on-secondary);

  background: var(--card-color);
  border: none;
  border-radius: 2em;
  color: var(--on-card-color);
  cursor: pointer;
  display: inline-block;
  letter-spacing: normal;
  padding: var(--card-box-padding, 0.5em);
  text-align: center;
  text-decoration: none;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.mfp_buttons .mfp_element_button:hover {
  opacity: 0.8;
}

/* サンクスページ */
.mfp_thanks {
  text-align: center;
}

.mfp_thanks p,
.mfp_thanks div {
  line-height: 2;
}

.mfp_thanks a {
  width: 100%;
  max-width: 200px;
}