:root,
body.light {
  --primary: #04328B;
  --on-primary: #ffffff;
  --primary-container: #0D6BCE;
  --on-primary-container: #22005d;
  --secondary: #0F8BFF;
  --on-secondary: #ffffff;
  --secondary-container: #e8def8;
  --on-secondary-container: #1e192b;
  --tertiary: #566ECB;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffd9e3;
  --on-tertiary-container: #31101d;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fffbff;
  --on-background: #1c1b1e;
  --surface: #fdf8fd;
  --on-surface: #1c1b1e;
  --surface-variant: #e7e0eb;
  --on-surface-variant: #49454e;
  --outline: #7a757f;
  --outline-variant: #cac4cf;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #313033;
  --inverse-on-surface: #f4eff4;
  --inverse-primary: #cfbcff;
  --surface-dim: #ddd8dd;
  --surface-bright: #fdf8fd;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f7f2f7;
  --surface-container: #f2ecf1;
  --surface-container-high: #ece7eb;
  --surface-container-highest: #e6e1e6;
}


:root {
  
  /* To use your custom font */
  --font: "Noto Sans JP", sans-serif;

  /* To remove default icons */
  --font-icon: none;

  /* To use default outlined icons */
  --font-icon: "Material Symbols Outlined";

  /* To use default rounded icons */
  --font-icon: "Material Symbols Rounded";

  /* To use default sharp icons */
  --font-icon: "Material Symbols Sharp";

  /* To only use minimal subset of icons required in checkbox, radio and switch */
  --font-icon: "Material Symbols Subset";
}





/* base */

@media screen and (width < 768px) {
  .pc-cont {
    display: none !important;
  }
}
@media screen and (width >= 768px) {
  .sp-cont {
    display: none !important;
  }
}


[class*=round] {
  --_round: 0.5rem;
}

.medium {
  font-weight: 500;
}
.bold {
  font-weight: 700;
}

.freight-light {
  font-family: "freight-text-pro", serif;
  font-weight: 300;
  font-style: normal;
}

.freight-italic {
  font-family: "freight-text-pro", serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body {
  background-color: #F6F6F6;
  font-size: 1rem;
  font-weight: 400;
	line-height: 1.75;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: #454545;
}

.fc-primary {
	color: var(--color-primary);
}

.fc-secondary {
	color: var(--color-secondary);
}

.fc-tertiary {
	color: var(--color-tertiary);
}

.fc-gray {
	color: #6D6D6D;
}
.block {
  display: block;
}

.round {
  border-radius: 0.5rem;
}


.bg-secondary {
  background-color: var(--secondary);
  color: #fff;
}

.button[disabled] {
  background-color: #D1D1D1;
  opacity: 1;
}

.back-to-list {
  margin-top: 2rem;
}

.fz18 {
  font-size: clamp(1rem, 0.943rem + 0.24vw, 1.125rem);
}

i {
  font-size: 1em;
}

.external-link {
  display: inline-flex;
  align-items: center;
  
  /* &::after {
    content: "";
    background: url(../img/common/external-link.svg) no-repeat center center;
    background-size: contain;
    display: block;
    width: 24px;
    height: 24px;
  } */
  & + .fa-arrow-right {
    rotate: -45deg;
  }
}

.circle.c-secondary {
  background-color: var(--secondary);
  color: #fff;
}

.bg-white {
  background-color: #fff;
}

article {
  background-color: #fff;
}

.button-text-arrow {
  margin-top: 10px;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    @media screen and (width < 768px) {
      width: 32px;
      height: 32px;
      i {
        font-size: 20px;
      }
    }
  }
  &.separator {
    width: 100%;
    margin-inline: 0;
    justify-content: space-between;
  }
  &.small {
    font-size: 0.8125rem;
  }
  &.large {
    font-size: 1.25rem;
  }
  @media screen and (width < 768px) {
    align-items: flex-end;
    > div {
      
      width: calc(100% - 40px);
    }
  }
}
i {
  transition: all 0.1s ease-in-out;
}
.pagetop {
  position: sticky;
  bottom: 10px;
  right: 32px;
  z-index: 100;
  /* margin-top: 1rem; */
  margin-inline-start: auto;
  width: 55px;
  height: 55px;
  span {
    width: 0;
  }
  @media screen and (width < 768px) {
    right: 10px;
  }
  a {
    margin-inline-start: auto;
    span {
      font-size: 0;
    }
    &::before {
      content: "";
      background: url(../img/common/icon-pagetop.svg) no-repeat center center;
      background-size: contain;
      display: block;
      width: 55px;
      height: 55px;
    }
  }
}

main {
  padding: 4rem 0;
  overflow: visible;
  &:has(.page-copy) {
    padding-top: 0 !important;
  }
  p {
    @media screen and (width < 768px) {
      font-size: 0.9375rem;
    }
    a {
      color: var(--secondary);
      text-decoration: underline;
    }
  }
  
}

.inner {
  max-width: calc(1200px + 2rem);
  padding-inline: 1rem;
  width: 100%;
  margin-inline: auto;
}


.inner-narrow {
  max-width: calc(920px + 2rem);
  padding-inline: 1rem;
  width: 100%;
  margin-inline: auto;
}

.bg-white {
  background-color: #fff;
}

.bottom-shadow {
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.37) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

.round-box {
  background-color: #fff;
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  @media screen and (width < 768px) {
    padding: 2rem 1rem;
    .inner-narrow {
      padding-inline: 0;

    }
  }
  /* &.large-padding {
    padding: 4rem 3rem;
  } */
}

nav.tabbed {
  background-color: #F6F6F6;
  max-width: 590px;
  margin-inline: auto;
  a {
    color: var(--primary-container);
    &:hover {
      background-color: #D8F0FF;
    }
    &.active {
      background-color: var(--primary-container) !important;
      color: #fff !important;
    }
  }
}

img {
  max-width: 100%;
  vertical-align: middle;
}


.cols-2 {
  display: flex;
  gap: 1rem;
  @media screen and (width < 768px) {
    flex-direction: column;
  }
  &.--half {
    .col {
      flex: 1;
    }
  }
  &.pc-reverse {
    @media screen and (width >= 768px) {
      flex-direction: row-reverse;
    }
  }
}

.list-nostyle {
  list-style-type: none;
  padding-left: 0;
}


i {
  &.--secondary {
    background-color: var(--secondary);
    color: #fff;
  }
}

.en {
  font-family: "Lato", sans-serif;
}

body.page {
    --_transform: translate(0, 0);
    opacity: 1;
    position: relative;
    display: block;
}


.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-not-valid-tip {
  font-size: 0.75rem !important;
}
.wpcf7-submit {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}
.btn-agree label {
  justify-content: center;
  &::after {
    content: none !important;
  }
  
}

.form-item {
  height: 100%;
  br {
    display: none;
  }
}
.radio-field {
  .wpcf7-form-control {
    position: absolute !important;
  }
  .wpcf7-form-control-wrap {
    display: flex;
    gap: 1rem;
    @media screen and (width < 768px) {
      flex-direction: column;
    }
  }
}

.field {
  margin-block-end: 0;
}

.field.label>label {
  color: #D1D1D1;
}


.fadeUp {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.5s ease, translate 0.5s ease;
  &.is-show {
    opacity: 1;
    translate: 0 0;
  }
}

.wp-block-button__link {
  background-color: var(--secondary) !important;
  font-weight: 700;

  &:hover {
    opacity: 0.8;
  }
}
.wp-block-button.disabled {
  .wp-block-button__link {
    background-color: #D1D1D1 !important;
  }
}

@media screen and (width < 768px) {
  .sp-wide {
    margin-inline: calc(50% - 50vw) !important;
    width: 100vw;
    border-radius: 0;
  }
}




.wpcf7-list-item-label {
  white-space: normal;
  text-align: left;
}

a {
  &:hover {
    .button-text-arrow {
      i {
        translate: 3px 0;
      }
    }
  }
}

.field.label.border:not(.fill)>label:after {
  border-color: #D1D1D1;
}

input[readonly] {
  border: none;
  font-size: clamp(1.125rem, 1.011rem + 0.48vw, 1.375rem);
  font-weight: 500;
}