@charset "utf-8";

@import url("layout/header.css");
@import url("layout/footer.css");
@import url("layout/container.css");
@import url("blocks/breadcrumb.css");
@import url("blocks/button.css");
@import url("blocks/info-modal.css");
@import url("blocks/news.css");
@import url("blocks/faq.css");
@import url("blocks/form.css");
@import url("pages/static.css");
@import url("pages/plan.css");
@import url("pages/error404.css");

/* ----------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  background: #f9f9f9;

  &:has(body.no-scroll) {
    overflow: hidden;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  &.no-scroll {
    overflow: hidden;
  }

  @media (max-width: 1023px) {
    background-position:
      0 -50px,
      100% -40px;
    background-size:
      200px auto,
      208px auto;
  }
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

p,
span,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4 {
  line-height: 1.7em;
  text-align: justify;
  color: #222;
}

a {
  color: #0284c7;
  text-decoration: underline;
  transition: all 0.2s ease;

  * {
    transition: all 0.2s ease;
  }

  @media (hover: hover) {
    &:hover {
      text-decoration: none;
      color: #4aa3d5;
    }
  }

  &[target="_blank"] {
    &:after {
      margin: 0 4px;
      font-family: "Font Awesome 6 Free";
      content: "\f08e";
      font-size: 0.8em;
      font-weight: 900;
    }
  }
}

em {
  font-style: normal;
}

hr {
  margin: 0 auto;
  width: 100%;
  border-width: 1px;
  border-image-source: linear-gradient(
    135deg,
    rgba(252, 233, 82, 1),
    rgba(74, 163, 213, 1)
  );
  border-image-slice: 1;
}

/* ----------------------------------------- */
/* ユーティリティクラス */
/* ----------------------------------------- */
.sp_hide {
  display: block;

  @media (max-width: 1023px) {
    display: none;
  }
}

.pc_hide {
  display: none;

  @media (max-width: 1023px) {
    display: block;
  }
}

/* 角丸 */
.radius-xs {
  border-radius: 4px;
}

.radius-sm {
  border-radius: 6px;
}

.radius-md {
  border-radius: 8px;
}

.radius-lg {
  border-radius: 12px;
}

.radius-full {
  border-radius: 9999px;
}

/* フォントサイズ */
.text-xs {
  font-size: 12px !important;
}

.text-sm {
  font-size: 14px !important;
}

.text-base {
  font-size: 16px !important;
}

.text-lg {
  font-size: 20px !important;
}

/* フォントウェイト */
.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-exbold {
  font-weight: 800 !important;
}

/* color*/
.color-gray {
  color: #888 !important;
}
.color-blue {
  color: #1f83ba !important;
}
.color-pink {
  color: #e65680 !important;
}

/* text-align */
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}

/* フォントファミリー */
.font-zenkaku {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.font-oswald {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
}

/* マージン */
.mt-none {
  margin-top: 0 !important;
}

.mt-xxs {
  margin-top: 4px !important;
}

.mt-xs {
  margin-top: 8px !important;
}

.mt-sm {
  margin-top: 12px !important;
}

.mt-md {
  margin-top: 16px !important;
}

.mt-lg {
  margin-top: 24px !important;
}

.mt-xl {
  margin-top: 40px !important;
}

.mt-2xl {
  margin-top: 64px !important;
}

/* ----------------------------------------- */
/* 見出し */
.heading--xl {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.25em;
  font-family: "Zen Kaku Gothic New", sans-serif;
  & span {
    font-size: 18px;
    line-height: 1em;
    color: #4aa3d5;
  }
  @media (max-width: 1023px) {
    gap: 20px;
    font-size: 28px;
    & span {
      font-size: 15px;
    }
  }
}

.heading--lg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25em;
  font-family: "Zen Kaku Gothic New", sans-serif;
  & span {
    font-size: 16px;
    line-height: 1em;
    color: #4aa3d5;

    &.en {
      padding: 8px 24px;
      border-radius: 9999px;
      color: #fff;
      letter-spacing: 0.33em;
      background: #4aa3d5;
      font-family: "Oswald", sans-serif;
    }
  }
  @media (max-width: 1023px) {
    gap: 12px;
    font-size: 24px;
    & span {
      font-size: 13px;
    }
  }
}

.heading--md {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25em;
  font-family: "Zen Kaku Gothic New", sans-serif;
  & span {
    font-size: 14px;
    line-height: 1em;
    color: #4aa3d5;

    &.en {
      padding: 8px 24px;
      border-radius: 9999px;
      color: #fff;
      letter-spacing: 0.33em;
      background: #4aa3d5;
      font-family: "Oswald", sans-serif;
    }
  }
  @media (max-width: 1023px) {
    gap: 10px;
    font-size: 20px;
  }
}

.title--lg {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 28px;
  line-height: 1.25em;
  font-weight: 600;
  font-family: "Zen Kaku Gothic New", sans-serif;
  @media (max-width: 1023px) {
    gap: 20px;
    font-size: 24px;
  }
}

.title--lg::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 6px;
  align-self: stretch;
  background: linear-gradient(to bottom, #ffdc00 50%, #4aa3d5 50%);
}

.title--md {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 24px;
  line-height: 1.25em;
  font-weight: 600;
  font-family: "Zen Kaku Gothic New", sans-serif;
  @media (max-width: 1023px) {
    gap: 16px;
    font-size: 20px;
  }
}

.title--md::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 4px;
  align-self: stretch;
  background: linear-gradient(to bottom, #ffdc00 50%, #4aa3d5 50%);
}

.subtitle--thunder {
  padding-left: 30px;
  font-size: 18px;
  line-height: 1.4em;
  font-weight: 600;
  background-image: url(../images/common/icon_subtitle--thunder.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  @media (max-width: 1023px) {
    padding-left: 24px;
    font-size: 16px;
    background-size: 16px auto;
  }
}

.subtitle--circle {
  padding-left: 30px;
  font-size: 18px;
  line-height: 1.4em;
  font-weight: 600;
  background-image: url(../images/common/icon_subtitle-circle.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  @media (max-width: 1023px) {
    padding-left: 24px;
    font-size: 16px;
    background-size: 16px auto;
  }
}

/* ----------------------------------------- */
/* コモンクラス */
/* ----------------------------------------- */

.caution {
  padding-left: 1em;
  text-indent: -1em;
}

.caution--with-num {
  padding-left: 1.75em;
  text-indent: -1.75em;
}
.marker {
  font-weight: bold;
  background: #fce952;
}

.frame-border {
  padding: 24px;
  border: 1px solid #d2d2d2;
}

.frame-lightGray {
  padding: 24px;
  background-color: #f7f7f7;
}

.frame-lightPink {
  padding: 24px;
  background-color: #fceaef;
}

.frame-lightBlue {
  padding: 24px;
  background-color: #e1f2fc;
}

.flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}