@charset "UTF-8";
/*-----------------------------------------

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/* 変数の定義
--------------------------------------------------*/
/*-----------------------------------------

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/*-----------------------------------------

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/* 色の定義
--------------------------------------------------*/
/* フォントの定義
--------------------------------------------------*/
html,
body,
ul,
ol,
dl,
li,
dt,
dd,
a,
p,
div,
img,
svg,
table,
tr,
th,
td,
figure {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #1D1D1D;
  font-feature-settings: "halt";
}

body,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
img,
svg,
a,
table,
tr,
th,
td,
figure {
  font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-weight: 900;
}

.en {
  font-family: "Chakra Petch", sans-serif;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1;
  font-weight: 700;
}

/* CSS変数の定義
--------------------------------------------------*/
:root {
  --icon-logo: url("data:image/svg+xml,%3Csvg width='23' height='16' viewBox='0 0 23 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5732 0.5L0 8.06064C0 8.06064 11.4268 15.4526 11.5 15.4998C11.5732 15.547 23 8.06064 23 8.06064L11.5732 0.5ZM8.80801 4.02895L11.5426 2.27087L12.5132 2.93642L8.80801 4.87701V4.02945V4.02895ZM7.36113 11.0997L2.73407 8.06015L7.36113 4.97047V11.0997ZM9.16806 12.293L8.78984 12.0608V7.77189C8.78984 7.77189 10.2611 8.5191 11.3293 8.75767C12.3975 8.99625 13.4781 9.54276 13.4781 9.54276C13.4781 9.54276 14.0581 9.74986 13.4781 10.2147C12.8981 10.6796 11.3417 11.1631 11.3417 11.1631C11.3417 11.1631 9.12598 12.2242 9.16854 12.2935L9.16806 12.293ZM14.2221 12.0982L11.5732 13.8848L10.4806 13.1598L14.2226 11.2949V12.0987L14.2221 12.0982ZM14.2221 8.22986C13.7827 7.9534 12.1589 7.40099 11.9638 7.36951C11.7682 7.33803 10.0287 6.79201 9.60174 6.52785C9.17475 6.2637 9.60174 5.96904 9.60174 5.96904C9.60174 5.96904 13.8807 3.9596 14.0514 3.9532C14.2221 3.94681 14.2221 4.10372 14.2221 4.10372V8.22936V8.22986ZM15.6384 4.97047L20.3142 8.06015L15.6384 11.0997V4.97096V4.97047Z' fill='%23000'/%3E%3C/svg%3E");
  --corners: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0C8.9543 0 0 8.9543 0 20V0H20Z' fill='%23000'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg width='13' height='14' viewBox='0 0 13 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5101 7.65H0V6.35H10.5101L5.57332 1.41325L6.5 0.5L13 7L6.5 13.5L5.57332 12.5868L10.5101 7.65Z' fill='%23000'/%3E%3C/svg%3E");
  --icon-map: url("data:image/svg+xml,%3Csvg width='10' height='13' viewBox='0 0 10 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0C2.23858 0 0 2.23893 0 5C0 7.76107 3.92981 12.1426 5 12.1426C6.06981 12.1426 10 7.76107 10 5C10 2.23893 7.76145 0 5 0ZM5 7.2949C3.73231 7.2949 2.7051 6.26734 2.7051 5C2.7051 3.73231 3.73231 2.7051 5 2.7051C6.26734 2.7051 7.2949 3.73231 7.2949 5C7.2949 6.26734 6.26734 7.2949 5 7.2949Z' fill='%23000'/%3E%3C/svg%3E");
}

/* 共通
--------------------------------------------------*/
html, body {
  background-color: #F5F5F5;
}

body {
  word-break: break-word;
}

/* 404
--------------------------------------------------*/
/* 自動で改行
--------------------------------------------------*/
span.br_word {
  display: inline-block;
}

/* CTA
--------------------------------------------------*/
.cta {
  background-color: #EA5414;
  margin-inline: auto;
  margin: 0 1vw;
  border-radius: 5px;
  position: relative;
}
@media screen and (max-width: 999px) {
  .cta {
    margin: 0;
  }
}
.cta .bg_img {
  opacity: 0.1;
  z-index: 0;
}
.cta .bg_img img {
  width: 77.42vw;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .cta .bg_img img {
    width: 100%;
  }
}
.cta .bg_img img:first-child {
  left: 0;
  top: 0;
}
.cta .bg_img img:last-child {
  right: 0;
  bottom: 0;
}
.cta .cta_inner {
  padding: 80px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .cta .cta_inner {
    padding: 50px 20px;
  }
}
.cta .cta_inner .sub_txt {
  font-size: clamp(2.4rem, 2.4vw, 3rem);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .cta .cta_inner .sub_txt {
    font-size: clamp(1.6rem, 5.33vw, 2rem);
  }
}
.cta .cta_inner .main_txt {
  font-size: clamp(4.2rem, 4.2vw, 5.2rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .cta .cta_inner .main_txt {
    font-size: clamp(2.6rem, 8.66vw, 3.6rem);
  }
}
.cta .cta_inner .btn_list {
  display: flex;
  justify-content: center;
  gap: 15px;
}
@media screen and (max-width: 999px) {
  .cta .cta_inner .btn_list {
    flex-wrap: wrap;
  }
}
.cta .cta_inner .btn_list .trial_btn_wrap {
  max-width: 400px;
  position: relative;
}
@media screen and (max-width: 999px) {
  .cta .cta_inner .btn_list .trial_btn_wrap {
    width: 100%;
  }
}
.cta .cta_inner .btn_list .trial_btn_wrap .fukidashi {
  position: absolute;
  left: 50%;
  top: -17px;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 100vh;
  padding: 6px 45px;
  white-space: nowrap;
  z-index: 2;
}
.cta .cta_inner .btn_list .trial_btn_wrap .fukidashi::after {
  content: "";
  position: absolute;
  bottom: -4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.1px 3.5px 0 3.5px;
  border-color: #FFFFFF transparent transparent transparent;
}
.cta .cta_inner .btn_list .trial_btn_wrap .fukidashi .blue_txt {
  line-height: 1;
}
@media screen and (max-width: 999px) {
  .cta .cta_inner .btn_list .trial_btn_wrap .fukidashi .blue_txt {
    font-size: clamp(1.2rem, 4vw, 1.4rem);
  }
}
.cta .cta_inner .btn_list .btn::after {
  width: 16px;
  height: 10px;
}
@media screen and (max-width: 999px) {
  .cta .cta_inner .btn_list .btn::after {
    width: 11px;
    height: 7px;
  }
}

/*-----------------------------------------

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/* ヘッダー
--------------------------------------------------*/
.header {
  position: fixed;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 30px rgba(131, 131, 131, 0.1);
  z-index: 10000;
}
@media screen and (max-width: 999px) {
  .header {
    height: 64px;
  }
}
.header .header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 2.85vw;
}
@media screen and (max-width: 999px) {
  .header .header_inner {
    padding-left: 20px;
  }
}
.header .header_inner .a_logo {
  width: auto;
  height: clamp(32px, 3.2vw, 42px);
}
.header .header_inner .a_logo .logo {
  display: flex;
  width: auto;
  height: 100%;
}
.header .header_inner .a_logo .logo img {
  width: auto;
  height: 100%;
}
.header .header_inner #nav_head,
.header .header_inner .nav_list,
.header .header_inner .btn_list {
  display: flex;
  align-items: center;
}
.header .header_inner #nav_head {
  gap: clamp(15px, 2.4vw, 24px);
}
@media screen and (max-width: 999px) {
  .header .header_inner #nav_head {
    position: fixed;
    top: 64px;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    background-color: #F5F5F5;
    flex-direction: column;
    gap: 30px;
    padding: 60px 20px 80px;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
    overflow-y: auto;
  }
}
.header .header_inner #nav_head.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.header .header_inner #nav_head .nav_list li a,
.header .header_inner #nav_head .btn_list li a {
  font-size: clamp(1.3rem, 1.3vw, 1.5rem);
}
@media screen and (max-width: 999px) {
  .header .header_inner #nav_head .nav_list li a,
  .header .header_inner #nav_head .btn_list li a {
    font-size: 1.8rem;
  }
}
.header .header_inner #nav_head .nav_list {
  gap: clamp(15px, 1.5vw, 24px);
}
@media screen and (max-width: 999px) {
  .header .header_inner #nav_head .nav_list {
    flex-direction: column;
    width: 100%;
    gap: 20px;
  }
}
.header .header_inner #nav_head .nav_list li a {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .header .header_inner #nav_head .nav_list li a:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 999px) {
  .header .header_inner #nav_head .btn_list {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
}
@media screen and (max-width: 999px) {
  .header .header_inner #nav_head .btn_list li {
    width: 100%;
    max-width: 400px;
  }
}
.header .header_inner #nav_head .btn_list .trial_btn,
.header .header_inner #nav_head .btn_list .contact_btn {
  height: 80px;
  width: clamp(120px, 12vw, 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 999px) {
  .header .header_inner #nav_head .btn_list .trial_btn,
  .header .header_inner #nav_head .btn_list .contact_btn {
    width: 100%;
    height: 70px;
    padding: 10px 40px;
    border-radius: 100vh;
    position: relative;
  }
  .header .header_inner #nav_head .btn_list .trial_btn::after,
  .header .header_inner #nav_head .btn_list .contact_btn::after {
    content: "";
    position: absolute;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M11.25 3.4641L0 6.9282L0 0L11.25 3.4641Z'/%3E%3C/svg%3E") no-repeat center/contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M11.25 3.4641L0 6.9282L0 0L11.25 3.4641Z'/%3E%3C/svg%3E") no-repeat center/contain;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 11px;
    height: 7px;
  }
}
@media (hover: hover) {
  .header .header_inner #nav_head .btn_list .trial_btn:hover,
  .header .header_inner #nav_head .btn_list .contact_btn:hover {
    opacity: 0.8;
  }
}
@media screen and (max-width: 999px) {
  .header .header_inner #nav_head .btn_list .trial_btn {
    flex-direction: row;
  }
}
.header .header_inner #nav_head .btn_list .contact_btn {
  background-color: #00B1DD;
}

body.nav-open {
  overflow: hidden;
}

.hamburger_btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.hamburger_btn {
  position: relative;
  width: 64px;
  height: 64px;
  display: none;
  z-index: 11000;
  background-color: #0C3780;
}
@media screen and (max-width: 999px) {
  .hamburger_btn {
    display: block;
  }
}
.hamburger_btn span {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
}
.hamburger_btn span:nth-child(1) {
  top: calc(50% - 12px);
}
.hamburger_btn span:nth-child(2) {
  top: 50%;
}
.hamburger_btn span:nth-child(3) {
  top: calc(50% + 12px);
}
.hamburger_btn.active span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger_btn.active span:nth-child(2) {
  opacity: 0;
}
.hamburger_btn.active span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/*-----------------------------------------

※このスタイルシートはSCSSで生成されています。
cssへの直記入はなさらないようにしてください。

-----------------------------------------*/
/* フッター
--------------------------------------------------*/
.footer {
  background-color: #fff;
  padding: 60px 0 30px;
  margin-top: 20px;
}
.footer .footer_inner {
  width: 90%;
  margin-inline: auto;
}
.footer .footer_inner .top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
.footer .footer_inner .top .left {
  height: -moz-fit-content;
  height: fit-content;
  display: grid;
  gap: 20px;
}
@media screen and (max-width: 449px) {
  .footer .footer_inner .top .left {
    width: 60%;
  }
}
.footer .footer_inner .top .left .logo {
  height: 40px;
  display: flex;
}
@media screen and (max-width: 449px) {
  .footer .footer_inner .top .left .logo {
    width: 100%;
    height: auto;
  }
}
.footer .footer_inner .top .left .logo img {
  width: auto;
  height: 100%;
}
@media screen and (max-width: 449px) {
  .footer .footer_inner .top .left .logo img {
    width: 100%;
    height: auto;
  }
}
.footer .footer_inner .top .left .logo.corp_logo {
  height: 34px;
}
@media screen and (max-width: 449px) {
  .footer .footer_inner .top .left .logo.corp_logo {
    height: auto;
  }
}
.footer .footer_inner .top .right .footer_nav_list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(15px, 2.4vw, 24px);
}
.footer .footer_inner .top .right .footer_nav_list li a {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .footer .footer_inner .top .right .footer_nav_list li a:hover {
    opacity: 0.7;
  }
}
.footer .footer_inner .bottom {
  margin-top: 120px;
  text-align: center;
}
@media screen and (max-width: 449px) {
  .footer .footer_inner .bottom {
    margin-top: 80px;
  }
}
.footer .footer_inner .bottom .copy {
  font-size: 1.2rem;
  font-weight: 500;
}

/* 流用パーツ
--------------------------------------------------*/
.pc-view {
  display: none !important;
}
@media screen and (min-width: 769px) {
  .pc-view {
    display: block !important;
  }
}

.sp-view {
  display: block;
}
@media screen and (min-width: 769px) {
  .sp-view {
    display: none;
  }
}

.lg-view {
  display: block;
}
@media screen and (min-width: 1000px) {
  .lg-view {
    display: none !important;
  }
}

.lg-none {
  display: block;
}
@media screen and (max-width: 999px) {
  .lg-none {
    display: none !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
  br.tab {
    display: none;
  }
}
br.pc-view {
  display: none;
}
@media screen and (min-width: 769px) {
  br.pc-view {
    display: block;
  }
}
@media screen and (min-width: 768px) and (max-width: 850px) {
  br.pc-view.blank {
    display: none;
  }
}
br.xl-view {
  display: block;
}
@media screen and (min-width: 1200px) {
  br.xl-view {
    display: none;
  }
}
br.lg-view {
  display: block;
}
@media screen and (min-width: 1000px) {
  br.lg-view {
    display: none;
  }
}
br.sp-view {
  display: block;
}
@media screen and (min-width: 769px) {
  br.sp-view {
    display: none;
  }
}
br.sm-view {
  display: none;
}
@media screen and (max-width: 449px) {
  br.sm-view {
    display: block;
  }
}

span {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.x50 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 50%;
}

.x60 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 60%;
}

.x66 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 66.66%;
}

.x70 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 70%;
}

.x80 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 80%;
}

.x90 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 90%;
}

.x40 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 40%;
}

.x120 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 120%;
}

.x130 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 130%;
}

.x140 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 140%;
}

.x150 {
  text-align: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: 150%;
}

.mb0 {
  margin-bottom: 0;
}

.mt50 {
  margin-top: 50px;
}

.mt100 {
  margin-top: 100px;
}

.pt100 {
  padding-top: 100px;
}

.w90p {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 999px) {
  .w90p {
    width: 90%;
  }
}

.w1000 {
  width: 75%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 999px) {
  .w1000 {
    width: 90%;
  }
}

.w1200 {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 999px) {
  .w1200 {
    width: 90%;
  }
}

.w1400 {
  width: 90%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 999px) {
  .w1400 {
    width: 90%;
  }
}

/* 共通パーツ
--------------------------------------------------*/
.trial_btn {
  background-color: #0C3780;
}
.trial_btn .dot {
  position: relative;
}
.trial_btn .dot::before {
  content: "・";
  position: absolute;
  color: #fff;
  font-size: 0.5em;
  line-height: 1;
  top: -0.5em;
  left: 50%;
  transform: translateX(-50%);
}

.download_btn {
  background-color: #fff;
}

.btn {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  max-width: 400px;
  height: 94px;
  border-radius: 100vh;
  font-size: 2.4rem;
  position: relative;
  transition: transform 0.3s ease;
}
@media screen and (max-width: 999px) {
  .btn {
    width: 100%;
    height: 84px;
    font-size: clamp(1.6rem, 5.33vw, 2rem);
  }
}
@media screen and (max-width: 449px) {
  .btn {
    height: 74px;
  }
}
.btn::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M11.25 3.4641L0 6.9282L0 0L11.25 3.4641Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M11.25 3.4641L0 6.9282L0 0L11.25 3.4641Z'/%3E%3C/svg%3E") no-repeat center/contain;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 11px;
  height: 7px;
}
@media (hover: hover) {
  .btn:hover {
    transform: scale(1.05);
  }
}

.sec_title {
  margin-bottom: 50px;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (max-width: 999px) {
  .sec_title {
    margin-bottom: 30px;
  }
}
.sec_title h3 {
  font-size: clamp(3.6rem, 3.6vw, 4.2rem);
}
@media screen and (max-width: 999px) {
  .sec_title h3 {
    font-size: clamp(2.4rem, 5.33vw, 3.2rem);
  }
}

.blue_txt {
  color: #0C3780;
}

.orange_txt {
  color: #EA5414;
}

.gray_txt {
  color: #8D9097;
}

.marker {
  background: linear-gradient(transparent 70%, #FFF111 70%);
}

.shadow {
  box-shadow: 0 0 30px rgba(131, 131, 131, 0.1);
}