@charset "UTF-8";
/*------------------------------------------------------------------------------------------------------------------------------
common
------------------------------------------------------------------------------------------------------------------------------*/
@font-face{
	font-display: swap;
	font-weight: 100 900;
	font-style: normal;
	font-family: 'Inter';
	src: url("../fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2"),
    url("../fonts/Inter-VariableFont_opsz,wght.woff") format("woff"), 
    url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

@font-face{
	font-display: swap;
	font-weight: 100 900;
	font-style: normal;
	font-family: 'RobotoCondensed';
	src: url("../fonts/RobotoCondensed-VariableFont_wght.woff2") format("woff2"),
    url("../fonts/RobotoCondensed-VariableFont_wght.woff") format("woff"), 
    url('../fonts/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-display: swap;
	font-weight: 100 900;
	font-style: normal;
  font-family: 'Noto Sans JP';
  src: url('NotoSansJP-VariableFont_wght.woff2') format('woff2'),
    url('NotoSansJP-VariableFont_wght.woff') format('woff'),
    url('NotoSansJP-VariableFont_wght.ttf') format('truetype');
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  color: #000000;
  line-height: 1.5;
  font-family: "Noto Sans JP", "游ゴシック", sans-serif;
}

html {
  box-sizing: border-box;
  /* overflow-y: scroll; */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  line-height: 1.5;
  color: #000000;
  font-family: "Noto Sans JP", "游ゴシック", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 62.5%;
  scroll-padding-top: 11rem;
  scroll-behavior: smooth; /* JSとは関係ないけど安全策で入れる */
}

body {
  /* overflow: hidden; */
  font-size: 1.6rem;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  /* border: 1px solid #000000; */
}

ruby > rt {
  font-size: 40%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

ol,
ul, li {
  list-style: none;
  font-size: 1.6rem;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
  font-size: 1.6rem;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  -webkit-hyphens: none;
  hyphens: none;
  quotes: none;
}

a {
  text-decoration: none;
  color: #3367c9;
  outline: none;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -webkit-tap-highlight-color: transparent;
  font-size: 1.6rem;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  opacity: 0.7;
}
a:focus {
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

a:hover,
a:active {
  outline: 0;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

a img {
  border: 0;
}

.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden; /* 隙間対応 */
  font-size: 0.1em; /* 隙間対応 */
  line-height: 0; /* 隙間対応 */
}

.both {
  clear: both;
}

.both hr {
  display: none;
}

p, li, a {
  font-size: 1.6rem;
}

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

input[type=submit] {
  border-radius: 0;
  -webkit-appearance: none;
}

.fadeIn {
  transform: translate3d(0, 3rem, 0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

::-moz-selection {
  background-color: #918e8a;
  color: #fff;
}

::selection {
  background-color: #1F8ECD;
  color: #fff;
}

.site {
  container-type: inline-size;
}

.sm_only{
  display: none;
}
.pc_only {
  display: block;
}


/* 初期は非表示（アニメーション用にvisibility＋opacity） */
.floating-banner {
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  /* iOSセーフエリア（ホームバー）を避ける */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 表示状態 */
.floating-banner.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

/* バナー画像 */
.floating-banner__link {
  display: block;
}
.floating-banner__img {
  display: block;
  max-width: 280px;    /* PC基準の最大幅 */
  width: 48vw;         /* 画面に合わせて縮む */
  min-width: 200px;    /* 極端に小さくならないように */
  height: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* 閉じるボタン（右上に重ねる） */
.floating-banner__close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 23px;
  height: 23px;
  border: none;
  padding: 0;
  background: unset;
  border-radius: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.floating-banner__close img { width: 100%; height: auto; }

/*------------------------------------------------------------------------------------------------------------------------------
common end
------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------
header
------------------------------------------------------------------------------------------------------------------------------*/
.noscroll {
  overflow: hidden;
}

.smt_menu_box{
  display: none;
}
.smt_menu{
  display: none;
}

.site-header-main{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 999999;
  width: 100%;
  min-height: 10rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.7rem 3rem 0;
  background: #FFFFFF;
}

.site-branding_logo{
  display: block;
  max-width: 9.2rem;
  width: 100%;
  height: auto;
  aspect-ratio: 92 / 63;
}

.navigation_link{
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: min(2.4rem, calc((100 / 1440) * 24vw)); */
  gap: min(1.6rem, calc((100 / 1440) * 16vw));
}
.navigation_link_item a{
  position: relative;
  /* font-size: 1.5rem; */
  /* font-size: clamp(1rem, calc((100 / 1440) * 14vw), 1.4rem); */
  font-size: calc((100 / 1440) * 14vw);
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
}
.navigation_link_item a::after{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: #1F8ECD;
  position: absolute;
  bottom: -2px;
  left: 0;
  transform: scale(0, 1);
  transition: .3s;
}

.navigation_link_item_contact a{
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 1.16rem; */
  gap: min(1.16rem, calc((100 / 1440) * 11.6vw));
  background: #1F8ECD;
  border-radius: 0.319rem;
  /* min-height: 4.4rem; */
  height: min(4.4rem, calc((100 / 1440) * 44vw));
  aspect-ratio: 190 / 44;
  padding: 0 1rem;
  color: #FFFFFF;
}
.navigation_link_item_contact a::before{
  content: '';
  background: url(../img/ico_mail.svg) no-repeat 50% 50% / contain;
  /* width: 1.679rem; */
  width: min(1.679rem, calc((100 / 1440) * 16.79vw));
  height: auto;
  aspect-ratio: 16.79 / 13.43;
}

.navigation_link_item_demo a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.05rem;
  background: #FFFFFF;
  border-radius: 0.319rem;
  /* min-height: 4.4rem; */
  height: min(4.4rem, calc((100 / 1440) * 44vw));
  padding: 0 1rem;
  aspect-ratio: 190 / 44;
  color: #1F8ECD;
  border: 2px solid #1F8ECD;
}
.navigation_link_item_demo a::before{
  content: '';
  background: url(../img/ico_movie.svg) no-repeat 50% 50% / contain;
  /* width: 1.679rem; */
  width: min(1.679rem, calc((100 / 1440) * 16.79vw));
  height: auto;
  aspect-ratio: 16.79 / 13.43;
}

/*------------------------------------------------------------------------------------------------------------------------------
header end
------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------
footer
------------------------------------------------------------------------------------------------------------------------------*/
.site-footer {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6rem;
  width: 100%;
  background-color: #FFFFFF;
  margin: 0 auto;
  padding: 7rem 2rem 1.5rem;
}
.footer-info{
  max-width: 120rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-footer .site-branding_logo{
  max-width: 21.8rem;
}
.site-map{
  display: flex;
  gap: min(10rem, calc((100 / 1440) * 100vw));
}
.site-map_box{
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.site-map_box a{
  position: relative;
  font-weight: 500;
  font-size: 15px;
  line-height: 100%;
  color: #000000;
  width: fit-content;
}
.site-map_box a::after{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: #1F8ECD;
  position: absolute;
  bottom: -2px;
  left: 0;
  transform: scale(0, 1);
  transition: .3s;
}

.copyright{
  display: block;
  width: fit-content;
  font-weight: 400;
  font-size: 13px;
  line-height: 140%;
  text-align: center;
}
/*------------------------------------------------------------------------------------------------------------------------------
footer end
------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------
front-page_content
------------------------------------------------------------------------------------------------------------------------------*/
/* 共通 */
.site-content{
  padding-top: 10rem;
}
.page-content {
  position: relative;
}

.section {
  position: relative;
}
.section_wrapper {
  position: relative;
  margin: 0 auto;
  padding: 8rem 2rem 7rem;
  max-width: 124rem;
}
.section h2{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: fit-content;
  margin: 0 auto 8.6rem;
  font-weight: 700;
  font-size: 38px;
  line-height: 100%;
  text-align: center;
}
.section h2::after{
  content: '';
  width: 8rem;
  height: 0.5rem;
  background: linear-gradient(90deg, #E7B56A -0.25%, #9C6FA7 34.97%, #258ABC 64.98%, #35AF54 100.1%);
}

/* キービジュアル */
.kv_area{
  position: relative;
  background: #F1FBFF;
  /* min-height: 68.5rem; */
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 685;
}
.kv_bg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: min(99.1rem, calc((100 / 1440) * 991vw)); */
  width: calc((100 / 1440) * 991vw);
  height: auto;
  aspect-ratio: 991 / 511;
  object-fit: contain;
}

.kv{
  /* padding: min(14.5rem, calc((100 / 1440) * 145vw)) 2rem 0; */
  padding: calc((100 / 1440) * 145vw) 2rem 0;
  width: fit-content;
  margin: 0 auto;
}
.kv_copy{
  /* margin: 0 auto min(6.4rem, calc((100 / 1440) * 64vw)); */
  margin: 0 auto calc((100 / 1440) * 64vw);
  width: fit-content;
  font-weight: 700;
  /* font-size: min(53px, calc((100 / 1440) * 53vw)); */
  font-size: calc((100 / 1440) * 53vw);
  line-height: 140%;
  text-align: center;
  /* backdrop-filter: blur(40px);
  border: 7px solid #FFFFFF; */
  text-shadow: 0 0 40px #FFFFFF;
}
.kv_copy span{
  color: #1F8ECD;
}
.kv_subcopy{
  margin: 0 auto;
  width: fit-content;
  font-weight: 500;
  /* font-size: 20px; */
  font-size: calc((100 / 1440) * 20vw);
  line-height: 160%;
  text-align: center;
}
.kv_bg_text{
  position: absolute;
  top: 50%;
  left: calc(50% - ((100 / 1440) * 232vw));
  transform: translate(-50%, -50%);
  font-size: calc((100 / 1440) * 31.34vw);
  line-height: 1;
  font-weight: 700;
  color: #06C755;
  opacity: 0.3;
}
.kv_bg_text02{
  color: #258ABC;
  /* left: unset; */
  /* right: calc(50% - ((100 / 1440) * 202vw)); */
  left: calc(50% + ((100 / 1440) * 232vw));
}

/* SVGアニメ */
.p-svg__path {
  fill: none;
  stroke: #fff!important;
  stroke-opacity: 1!important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 140px!important;
}
.mask-svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: min(99.1rem, calc((100 / 1440) * 991vw)); */
  width: calc((100 / 1440) * 991vw);
  height: auto;
  aspect-ratio: 991 / 511;
  object-fit: contain;
}


/* 導入企業 */
.partner{
  padding: 3rem 2rem 8rem;
  /* max-width: 124rem; */
  margin: 0 auto;
  overflow: hidden;
}
.partner_title{
  width: 100%;
  max-width: 124rem;
  margin: 0 auto 1.6rem;
  font-weight: 600;
  font-size: 20px;
  line-height: 100%;
}
.partner_box_inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  animation: slide 30s linear infinite;
  width: fit-content;
}
.partner_box_inner:hover {
  animation-play-state: paused;
}

.partner_box{
  width: 100vw;
  margin: 0 calc(50% - 50vw);

  /* width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem; */

  overflow: hidden;
}
.partner_box_item {
  /* flex: 0 0 auto; */
  min-height: 17rem;
  aspect-ratio: 290 / 170;
  border: 1px solid #C8C8C8;
  padding: 13px 0 13px 13px;
  border-radius: 0.5rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
.partner_box_text{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.partner_box_text p{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 14px;
  line-height: 160%;
}
.partner_box_text p span{
  display: inline-block;
  text-align: center;
  min-width: 6.6rem;
  background: #70DAFF;
  color: #FFFFFF;
  width: fit-content;
  border-radius: 5px;
  padding: 0 10px;
}
.partner_box_item img{
  width: calc(100% - 2.6rem);
  height: 6.3rem;
  object-fit: contain;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* 導入実績 */
.intro{
  background: #F1FBFF;
}
.intro_wrapper{
  max-width: 124rem;
  margin: 0 auto;
  padding: 7rem 2rem;
  width: 100%;
}
.intro_title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: fit-content;
  margin: 0 auto 3rem;
  font-weight: 700;
  font-size: 38px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #1F8ECD;
}
.intro_title::before{
  content: '';
  display: block;
  width: 2.65rem;
  height: auto;
  aspect-ratio: 26.5 / 46.5;
  background: url(../img/01_choose_img.png) no-repeat 50% 50% / contain;
}
.intro_title::after{
  content: '';
  display: block;
  width: 2.65rem;
  height: auto;
  aspect-ratio: 26.5 / 46.5;
  background: url(../img/01_choose_img.png) no-repeat 50% 50% / contain;
  transform: scaleX(-1);
}
.intro_img{
  max-width: 10rem;
  width: 100%;
  height: auto;
  aspect-ratio: 100 / 62;
  margin: 0 auto 3.3rem;
  object-fit: contain;
}
.intro_text{
  font-weight: 500;
  font-size: 22px;
  line-height: 160%;
  text-align: center;
}
.intro_text .emphasis{
  font-weight: 700;
}

/* 主な機能 */
.section01 .box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4.5rem 1.8rem;
}
.section01 .box_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: calc((100% / 3) - (3.6rem / 3));
  min-height: 40.8rem;
  padding: 3rem 4.4rem 3rem;
  background: #FFFFFF;
  box-shadow: 0px 0px 20px 0px #0000000A;
}
.section01 .box_img{
  width: 7.2rem;
  height: auto;
  aspect-ratio: 1 / 1;
  /* border-radius: 50%;
  background: #1F8ECD; */
}
.section01 .box_img img{
  aspect-ratio: 1 / 1;
}
.section01 .box_text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.section01 .box_text h3{
  width: fit-content;
  margin: 0 auto 0.8rem;
  font-weight: 600;
  font-size: 20px;
  line-height: 100%;
  text-align: center;
}
.section01 .box_text h4{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  width: 100%;
  background: #F1FBFF;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: #1F8ECD;
  text-align: center;
}
.section01 .box_text .explanation{
  margin-bottom: 0.8rem;
  font-weight: 400;
  font-size: 13px;
  line-height: 100%;
  text-align: center;
}

/* ご検討・ご相談 */
.section_consider{
  position: relative;
  background: #4B92BB;
}
.section_consider::before{
  content: '';
  display: block;
  width: calc((100 / 1440) * 369.5vw);
  height: auto;
  aspect-ratio: 369.5 / 245.5;
  position: absolute;
  top: min(14.91rem, calc((100 / 1440) * 149.1vw));
  left: 0;
  transform: translate(0, 0);
  background: url(../img/01consider_bg01.png) no-repeat 50% 50% / contain;
}
.section_consider::after{
  content: '';
  display: block;
  width: calc((100 / 1440) * 681vw);
  height: auto;
  aspect-ratio: 681 / 302;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0, 0);
  background: url(../img/01consider_bg02.png) no-repeat 50% 50% / contain;
}
.section_consider h2{
  color: #FFFFFF;
}
.section_consider h2::after{
  display: none;
}
.section_consider .link_box{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.3rem;
  background: #F1FBFF;
  width: 100%;
  border-radius: 1rem;
  min-height: 21.2rem;
  padding: 5.5rem min(12rem, calc((100 / 1440) * 120vw));
}
.section_consider .link_box_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: calc((100% / 3) - (6.6rem / 3));
}
.section_consider .link_btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  border-radius: 0.5rem;
  width: 100%;
  min-height: 6.5rem;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: #FFFFFF;
}
.section_consider .link_btn.link_btn_trial{
  background: #F83B3B;
}
.section_consider .link_btn.link_btn_contact{
  background: #1F8ECD;
}
.section_consider .link_btn.link_btn_demo{
  background: #FFFFFF;
  border: 3px solid #1F8ECD;
  color: #1F8ECD;
}

.link_btn span{
  color: inherit;
}

.link_title{
  font-weight: 700;
  font-size: 15px;
  line-height: 100%;
  text-align: center;
}

.link_btn img{
  width: 2.1rem;
  height: auto;
}

/* こんなお悩み */
.section02{
  background: #D9D9D9;
}
.section02 .section_wrapper{
  max-width: calc(127rem + 18rem);
  padding-left: min(12rem, calc((100 / 1440) * 120vw));
  padding-right: min(6rem, calc((100 / 1440) * 60vw));
}

.section02 .box {
  min-height: 60rem;
  display: grid;
  grid-template-columns: repeat(14, 1fr); /* ← 12 → 14列に変更 */
  grid-template-rows: repeat(6, auto);
  position: relative;
}

.section02 .box_card {
  background: #F1F1F1;
  border-radius: 0.8rem;
  padding: 2.8rem 2.5rem;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
  width: 100%;
}

/* カード配置 */
.section02 .box_card01 {
  grid-column: 1 / 8; /* 左上 */
  grid-row: 1;
  max-width: 68.4rem;
  padding: 2.8rem 2.2rem 2.8rem 2.4rem;
}
.section02 .box_card02 {
  grid-column: 9 / 15; /* 右上 */
  grid-row: 1;
  max-width: 47.3rem;
}
.section02 .box_card03 {
  grid-column: 1 / 6; /* 左中 */
  grid-row: 3;
  max-width: 38.6rem;
}
.section02 .box_card04 {
  grid-column: 9 / 15; /* 右中 */
  grid-row: 3;
  max-width: 48.2rem;
  padding: 2.4rem 2rem 3.2rem 2rem;
  width: calc(100% - 5.5rem);
  margin-left: 5.5rem;
}
.section02 .box_card05 {
  grid-column: 1 / 8; /* 左下 */
  grid-row: 5;
  max-width: 56.1rem;
  margin-right: 6.3rem;
  width: calc(100% - 6.3rem);
}
.section02 .box_card06 {
  grid-column: 8 / 15; /* 右下 */
  grid-row: 5;
  max-width: 63.7rem;
  padding: 2.8rem 2rem 2.8rem 2.4rem;
}

/* 中央の人物 */
.section02 .box_card07 {
  background: unset;
  box-shadow: unset;
  grid-column: 7 / 9; /* 中央に配置 */
  grid-row: 2 / 5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section02 .box_card07 img {
  max-width: 24.6rem;
  aspect-ratio: 1 / 1;
}

/* タイトルと説明 */
.section02 .box h3 {
  margin-bottom: 0.8rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #1F8ECD;
}
.section02 .box .explanation {
  font-size: 1.5rem;
  line-height: 1.5;
}


.section03{
  position: relative;
  background: url(../img/01_needs_bg.png) no-repeat 50% 50% / cover;
}
.section03::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: block;
  width: 40.6rem;
  height: auto;
  aspect-ratio: 406 / 60.5;
  background: url(../img/01_needs_arrow.png) no-repeat 50% 50% / contain;
}
.section03 .section_wrapper{
  position: relative;
  min-height: 46.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
}
.section03 h2{
  max-width: 65.8rem;
  height: auto;
  margin: 0 auto;
  width: calc((100 / 1440) * 658vw);
}
.section03 h2::after{
  display: none;
}
.section03 .needs_img{
  position: absolute;
  top: 50%;
  /* right: min(18rem, calc((100 / 1440) * 180vw)); */
  right: calc((100 / 1440) * 180vw);
  transform: translate(0, -50%);
  /* width: min(12.5rem, calc((100 / 1440) * 125vw)); */
  width: calc((100 / 1440) * 125vw);
  height: auto;
  aspect-ratio: 125 / 201;
}

/* 解決すること */
.section04{
  background: #F1FBFF;
  counter-reset: number; /* カウンター初期化 */
}
.section04 .section_wrapper > .explanation{
  width: fit-content;
  margin: 0 auto 8rem;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
}
.solution_area{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.5rem;
}
.solution_box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(9.5rem, calc((100 / 1440) * 95vw));
}
.solution_area .solution_box:nth-of-type(2n) .solution_box_img{
  order: -1;
}
.solution_area .solution_box:nth-of-type(1) .solution_box_img{
  max-width: 59.2rem;
}
.solution_area .solution_box:nth-of-type(2) .solution_box_img{
  max-width: 43rem;
}
.solution_area .solution_box:nth-of-type(3) .solution_box_img{
  max-width: 42.7rem;
}
.solution_area .solution_box:nth-of-type(4) .solution_box_img{
  max-width: 47.6rem;
}
.solution_area .solution_box:nth-of-type(5) .solution_box_img{
  max-width: 47.6rem;
}
.solution_box_text{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 50rem;
}
.solution_box_text::before{
  counter-increment: number; /* カウンターを1ずつ増やす */
  content: counter(number, decimal-leading-zero); /* 現在のカウントを表示 */
  width: fit-content;
  background: linear-gradient(
    90deg,
    rgba(231, 181, 106, 0.9) -0.25%,
    rgba(156, 111, 167, 0.9) 34.97%,
    rgba(37, 138, 188, 0.9) 64.98%,
    rgba(53, 175, 84, 0.9) 100.1%
  );
  -webkit-background-clip: text; /* 背景を文字にクリップ */
  -webkit-text-fill-color: transparent; /* 文字の塗りを透明にする */
  background-clip: text;
  color: transparent;
  font-weight: 700;
  font-size: 80px;
  line-height: 100%;
}
.solution_box_text h3{
  padding-left: 1.2rem;
  border-left: 3px solid transparent; /* 太さだけ決める */
  border-image: linear-gradient(
    180deg,
    #E7B56A 0.03%,
    #9C6FA7 35.1%,
    #258ABC 64.99%,
    #35AF54 99.97%
  ) 1;
  font-weight: 700;
  font-size: 24px;
  color: #1F8ECD;
}

/* 登録はかんたん */
.section_try{

}

.section_try{
  position: relative;
  background: #4B92BB;
}
.section_try::before{
  content: '';
  display: block;
  width: calc((100 / 1440) * 369.5vw);
  height: auto;
  aspect-ratio: 369.5 / 245.5;
  position: absolute;
  top: min(14.91rem, calc((100 / 1440) * 149.1vw));
  left: 0;
  transform: translate(0, 0);
  background: url(../img/01consider_bg01.png) no-repeat 50% 50% / contain;
}
.section_try::after{
  content: '';
  display: block;
  width: calc((100 / 1440) * 681vw);
  height: auto;
  aspect-ratio: 681 / 302;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0, 0);
  background: url(../img/01consider_bg02.png) no-repeat 50% 50% / contain;
}
.section_try h2{
  margin-bottom: 0;
  color: #000000;
  font-weight: 700;
  font-size: 16.41px;
  line-height: 100%;
  text-align: center;
}
.section_try h2::after{
  display: none;
}
.section_try .link_title{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 1.2rem;
}
.section_try .link_title::before{
  content: '';
  display: block;
  width: 1.1rem;
  height: auto;
  aspect-ratio: 11 / 17;
  background: url(../img/01_try_img.png) no-repeat 50% 50% / contain;
}
.section_try .link_title::after{
  content: '';
  display: block;
  width: 1.1rem;
  height: auto;
  aspect-ratio: 11 / 17;
  background: url(../img/01_try_img.png) no-repeat 50% 50% / contain;
  transform: scaleX(-1);
}
.section_try .link_box{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.3rem;
  background: #F1FBFF;
  width: 100%;
  max-width: 84.2rem;
  border-radius: 1rem;
  min-height: 18.2rem;
  margin: 0 auto;
  padding: 5.5rem min(12rem, calc((100 / 1440) * 120vw));
}
.section_try .link_box_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 32.8rem;
}
.section_try .link_btn{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  width: 100%;
  min-height: 7.1rem;
  
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  text-align: center;

  color: #FFFFFF;
  box-shadow: 4.38px 4.38px 32.81px 0px #0000000D;
  background: #F83B3B;
}

.section_try .link_box .link_box_item_img01{
  /* position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%); */
  width: 10.1rem;
  height: auto;
  aspect-ratio: 101 / 120;
  order: -1;
}
.section_try .link_box .link_box_item_img02{
  /* position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%); */
  width: 7.2rem;
  height: auto;
  aspect-ratio: 72 / 82;
}

/* サービス導入事例 */
.section05{

}
.section05 .section_wrapper{
  max-width: 136rem;
}
.section05 .section_wrapper > .explanation{
  width: fit-content;
  margin: 0 auto 6rem;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
}
.service_area{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.service_box{
  background: #EEF7FC;
  padding: 8rem 6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
  width: 100%;
}
.service_box_header{
  width: calc((440 / 1200) * 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 3.4rem; */
  gap: 2.5rem;
}
.service_box .thum{
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 33.2rem;
  padding: 2.3rem 1rem 1.5rem;

  color: #FFFFFF;
  font-weight: 500;
  font-size: 24px;
  line-height: 151%;
}
.service_box > h3{
  font-weight: 700;
  font-size: 24px;
  line-height: 175%;
  width: fit-content;
  margin: 0 auto;
}
.service_box .thum img{
  max-width: 18.9rem;
}
.service_box .thum span{
  font-weight: 700;
  font-size: 20px;
  line-height: 160%;
}
.service_box_text{
  background: #FFFFFF;
  padding: 1rem 1.8rem;
  width: 100%;
}
.service_box_text .service_title{
  margin-bottom: 0.4rem;
  color: #1F8ECD;
  font-weight: 700;
  font-size: 17px;
  line-height: 151%;
}
.service_box_text .service_explanation{
  font-weight: 500;
  font-size: 15px;
  line-height: 170%;
}
.service_box_body{
  width: calc((728 / 1200) * 100%);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.service_subtitle{
  background: #F1FBFF;
  padding: 0.2rem 0.7rem 0.3rem 0.9rem;
  width: fit-content;
  margin: 1.2rem 0 0.7rem;

  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}
.service_box_body .service_box_text:nth-of-type(1){
  padding-bottom: 3.4rem;
}
/* .service_box_body h3{

} */
/* .service_box_body h3 span{
  padding: 0 1.8rem;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 20px;
  line-height: 175%;
  background: linear-gradient(transparent 0%, #1F8ECD 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
} */

.service_box:nth-of-type(2) .service_box_body .service_subtitle:nth-of-type(2), 
.service_box:nth-of-type(2) .service_box_body .service_subtitle:nth-of-type(3) {
  background: unset;
  color: #1F8ECD;
}
/* .service_box:nth-of-type(2) .service_box_body .service_box_text .service_explanation + .service_subtitle {
  margin-top: 3rem;
} */

/* お客様の声 */
.section06 .section_wrapper{
  max-width: 114rem;
}
.voice_area{
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}
.voice_card{
  width: calc((100% / 3) - (3.6rem / 2));
  padding: 3rem;
  box-shadow: 0px 0px 20px 0px #0000000A;
}
.voice_card_header{
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 3rem;
}
.voice_img{
  background: #D9D9D9;
  width: 7.6rem;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.voice_area p{
  overflow-wrap: break-word;
}

/* プランについて */
.section07{
  background: url(../img/01_plan_bg.png) no-repeat 50% 50% / cover;
  padding: 8rem min(6.5rem, calc((100 / 1440) * 65vw));
}
.section07 .section_wrapper{
  max-width: 128rem;
  background: #FFFFFF;
}

.plan_box_one,
.plan_box_second {
  display: none;
}
.plan_box_one.active,
.plan_box_second.active {
  display: flex!important;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
}

/* 内タブの表示/非表示（JSはclass切替に寄せる）*/
.plan_inner_box { display: none; }
.plan_inner_box.active { display: block; }

.switch{
  display: flex;
  align-items: center;
  gap: 3.4rem;
  width: fit-content;
  margin-bottom: 3rem;
}
.switch_title{
  /* margin-bottom: 1.4rem; */
  /* color: #1F8ECD;
  font-weight: 500;
  font-size: 18px;
  line-height: 180%;
  */
  font-weight: 500;
  font-size: 31px;
  line-height: 180%;
}
.switch_btn {
  display: flex;
  min-height: 5.4rem;
  width: 100%;
  max-width: 34rem;
  border-radius: 3rem;
  background: #FFFCFC;
  overflow: hidden;
  box-shadow: 0px 0px 30px 0px #1F8ECD26;
  transition: 0.3s;
}

.switch_btn button {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17rem;
}

.switch_btn button.active {
  background: #333;
  color: #fff;
  border-radius: 3rem;
  transition: 0.3s;
}

.switch_toggle {
  position: relative;
  display: inline-block;
  width: 94px;
  height: 54px;
}

.switch_toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: 0.4s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 38px;
  width: 38px;
  left: 9px;
  top: 7px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

.switch_toggle input:checked + .slider {
  background-color: #2c8ed6; /* ON時の色 */
}

.switch_toggle input:checked + .slider::before {
  transform: translateX(38px);
}

.plan_area{
  max-width: 110rem;
  width: 100%;
  margin: 0 auto;
}
.plan_box {
  width: 100%;
  border-collapse: collapse;
}

/* 各行をグリッドに */
.plan_header,
.plan_row {
  display: grid;
  grid-template-columns: 0.677fr repeat(4, 1fr); /* 左のラベルを少し広め */
  text-align: center;
  border-bottom: 1px solid #D0D0D0;
}

/* ヘッダー部分 */
.plan_header {
  min-height: 7.8rem;
  border-right: 1px solid #D0D0D0;
}

.plan_header .item {
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 500;
  font-size: 16px;
  line-height: 180%;
  color: #FFFFFF;

  padding: 1rem;
  border-right: 1px solid #D0D0D0;
  border-top: 1px solid #D0D0D0;
}
.plan_header .item:nth-of-type(1){
  border-top: 0;
}

.plan_header .item:nth-of-type(1), 
.plan_row .label:nth-of-type(1) {
  min-width: 19.1rem;
}

/* プランごとの色（必要なら） */
.plan_header .start {
  background: #E7B56A;
}
.plan_header .plus {
  background: #9C6FA7;
}
.plan_header .pro {
  background: #258ABC;
}
.plan_header .premium {
  background: #35AF54;
}

.plan_row{
  min-height: 8rem;
  border-left: 1px solid #D0D0D0;
  border-right: 1px solid #D0D0D0;
}
.plan_header + .plan_row{
  min-height: 12rem;
}
/* 各行のラベル列 */
.plan_row .label {
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 500;
  font-size: 16px;
  line-height: 180%;
  text-align: center;

  padding: 0.6rem;
  background: #F9F9F9;
  border-right: 1px solid #D0D0D0;
}

/* 値のセル */
.plan_row .val {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  border-right: 1px solid #D0D0D0;

  font-weight: 500;
  font-size: 16px;
  line-height: 180%;
  font-family: 'RobotoCondensed', sans-serif;
}
.plan_header + .plan_row .val{
  font-weight: 600;
  font-size: 50px;
  line-height: 180%;
  font-family: 'RobotoCondensed', sans-serif;
}
.plan_header + .plan_row .val span{
  font-weight: 600;
  font-size: 36px;
  line-height: 180%;
  letter-spacing: 0%;
}
.plan_header + .plan_row .val:last-of-type{
  font-weight: 700;
  font-size: 34px;
  line-height: 180%;
  font-family: "Noto Sans JP", "游ゴシック", sans-serif;
}

/* 最後の列の右線を消す */
.plan_header .item:last-child,
.plan_row .val:last-child {
  border-right: none;
}

.option_box{
  display: flex;
  align-items: center;
  gap: 5.4rem;
  width: 100%;
}
.option_box_add{
  display: flex;
  flex-direction: column;
  width: calc((524 / 1100) * 100%);
}
.option_box_add h3{
  min-height: 4.6rem;
  background: #F9F9F9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D0D0D0;

  font-weight: 500;
  font-size: 16px;
  line-height: 180%;
}
.option_box_add_row{
  display: flex;
  min-height: 4.6rem;
  border: 1px solid #D0D0D0;
  border-top: 0;
}
.option_box_add_label{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc((223 / 524) * 100%);
  padding: 0 3.4rem;
  border-right: 1px solid #D0D0D0;
}
.option_box_add_val{
  display: flex;
  align-items: center;
  /**justify-content: flex-end;**/
  width: calc((300 / 524) * 100%);
  padding: 0 3.4rem;
}

.option_box_right{
  width: calc((522 / 1100) * 100%);
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
}

.option_box_free{
  display: flex;
  flex-direction: column;
}
.option_box_free h3{
  min-height: 4.6rem;
  background: #F9F9F9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D0D0D0;
}
.option_box_free_row{
  display: flex;
  min-height: 8.1rem;
  border: 1px solid #D0D0D0;
  border-top: 0;
}
.option_box_free_label{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc((292 / 522) * 100%);
  padding: 0 3.4rem;
  border-right: 1px solid #D0D0D0;
}
.option_box_free_val{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((229 / 522) * 100%);
  padding: 0 3.4rem;
}


.option_box_misc{
  display: flex;
  flex-direction: column;
}
.option_box_misc h3{
  min-height: 4.6rem;
  background: #F9F9F9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D0D0D0;
}
.option_box_misc_val{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 3.4rem;
  border: 1px solid #D0D0D0;
  border-top: 0;
  min-height: 8.1rem;
}

/* 他社との比較 */
.section08 .section_wrapper{
  max-width: 114rem;
}
/* 共通スタイル */
.hikaku_table {
  /* display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0; */
  display: grid;
  grid-template-columns: 1.6923fr 1fr 1fr 1fr; /* 機能列 + DX-LINE + A社 + B社 */
  gap: 0 1.5rem; /* 列間の余白 */
}

.hikaku_box{
  height: 650px;
  overflow-y: scroll;
  position: relative;
}

.hikaku_row {
  /* display: table-row; */
  display: contents; /* 各セルをgridの直下に流し込む */
}

.hikaku_cell {
  /* display: table-cell; */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.3rem;
  /* padding: 12px; */
  border: 1px solid #B2B2B2;
  border-bottom: 0;
  text-align: center;
  vertical-align: middle;

  font-weight: 400;
  font-size: 16px;
  line-height: 180%;
}
.hikaku_header + .hikaku_row .hikaku_cell{
  min-height: 9.1rem;
}
.hikaku_header + .hikaku_row .hikaku_cell:nth-of-type(2){
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
}
.hikaku_header .hikaku_cell{
  min-height: 7.8rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #FFFFFF;
}
.hikaku_header .hikaku_cell:not(:first-of-type){
  font-weight: 500;
  font-size: 23px;
  line-height: 100%;
}
/* 最終行だけ下線を復活 */
.hikaku_row:last-child .hikaku_cell {
  border-bottom: 1px solid #B2B2B2;
}

/* 縦方向の線（両サイド） */
.hikaku_cell:nth-child(4n + 2) {
  border-left: 5px solid #1F8ECD;
  border-right: 5px solid #1F8ECD;
}

/* DX-LINEの列だけ強調 */
.hikaku_row .hikaku_cell:nth-child(2) {
  border-left: 5px solid #1F8ECD;  /* 青枠 */
  border-right: 5px solid #1F8ECD; /* 青枠 */
}

/* 最初の行のDX-LINEセル（上の角丸） */
.hikaku_row.hikaku_header .hikaku_cell:nth-child(2) {
  border-top: 5px solid #1F8ECD;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* 最後の行のDX-LINEセル（下の角丸） */
.hikaku_row:last-child .hikaku_cell:nth-child(2) {
  border-bottom: 5px solid #1F8ECD;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


.hikaku_cell img{
  max-width: 7.8rem;
  width: 100%;
  height: auto;
  aspect-ratio: 78 / 54;
}
.hikaku_row .hikaku_cell:nth-of-type(1){
  justify-content: flex-start;
  padding: 0 2.5rem;

  font-weight: 500;
  font-size: 16px;
  line-height: 180%;
}


/* ラジオは非表示でOK（ラベルクリックで切替） */
.hikaku_mobile .cmp_radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* タブ見出し（ラベル群） */
.hikaku_mobile .cmp_tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 1rem 0 .75rem;
}
.hikaku_mobile .cmp_tabs label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem .8rem;
  border: 1px solid #ddd;
  border-radius: .6rem;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.hikaku_mobile .cmp_tabs label img { max-height: 18px; display: block; }

/* パネルは基本隠す */
.hikaku_mobile .cmp_panel { display: none; }

/* ラジオ選択に応じて該当パネルだけ表示（兄弟セレクタ） */
#comparison .hikaku_mobile #cmp-0:checked ~ #cmp-panel-0 { display: block; }
#comparison .hikaku_mobile #cmp-1:checked ~ #cmp-panel-1 { display: block; }
#comparison .hikaku_mobile #cmp-2:checked ~ #cmp-panel-2 { display: block; }

/* 選択中のタブラベルをハイライト */
#comparison .hikaku_mobile #cmp-0:checked ~ .cmp_tabs label[for="cmp-0"],
#comparison .hikaku_mobile #cmp-1:checked ~ .cmp_tabs label[for="cmp-1"],
#comparison .hikaku_mobile #cmp-2:checked ~ .cmp_tabs label[for="cmp-2"] {
  outline: 2px solid #333;
}

/* カード体裁 */
.hikaku_card {
  border: 1px solid #eee;
  border-radius: .8rem;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  background: #fff;
}
.hikaku_card .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
  font-weight: 700;
}
.hikaku_card .brand img { max-height: 22px; }
.hikaku_list { margin: 0; padding: 0; list-style: none; }
.hikaku_list li { padding: .6rem 0; border-top: 1px dashed #eee; }
.hikaku_list li:first-child { border-top: none; }
.hikaku_list .feat { display: block; color: #666; font-size: 1.4rem; }
.hikaku_list .val  { display: block; font-size: 1.6rem; margin-top: .2rem; }


/* ご利用までの流れ */
.section09{
  background: #F1FBFF;
}
.section09 .section_wrapper{
  width: calc(100% - 4rem);
}
.flow_area{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.1rem;
  margin: 0 auto;
  max-width: calc(90.6rem + 4.3rem);
}
.flow_box{
  position: relative;
  background: #FFFFFF;
  max-width: 90.6rem;
  margin-left: 4.3rem;
  padding: 2.4rem 2.8rem 2.4rem 7.9rem;
  width: 100%;
}
.flow_number{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8.6rem;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #1F8ECD;
  border-radius: 50%;
}
.flow_number span:nth-of-type(1){
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #FFFFFF;
}
.flow_number span:nth-of-type(2){
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: #FFFFFF;
}
.flow_box_text h3{
  margin-bottom: 1.6rem;
  font-weight: 700;
  font-size: 20px;
  color: #1F8ECD;
}
.flow_box_text .explanation{
  font-weight: 500;
  font-size: 16px;
  line-height: 180%;
}
.flow_box:not(:last-of-type)::after{
  content: '';
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translate(-50%, 0);
  display: block;
  background: url(../img/01_flow_arrow.png) no-repeat 50% 50% / contain;
  width: 4.4rem;
  height: auto;
  aspect-ratio: 44 / 29;
}
/*------------------------------------------------------------------------------------------------------------------------------
page_content end
------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------
404-page_content
------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------
404-page_content end
------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------
hover
------------------------------------------------------------------------------------------------------------------------------*/
@media (any-hover: hover) {
  a:hover {
    opacity: 0.7;
  }
  .navigation_link_item a:hover{
    opacity: 1;
    color: #1F8ECD;
  }
  .navigation_link_item a:hover::after{
    transform: scale(1, 1);
  }

  .site-map_box a:hover{
    opacity: 1;
    color: #1F8ECD;
  }
  .site-map_box a:hover::after{
    transform: scale(1, 1);
  }
  .navigation_link_item_contact a:hover{
    color: #FFFFFF;
    opacity: 0.7;
  }
  .navigation_link_item_contact a:hover::after{
    display: none;
  }
  .navigation_link_item_demo a:hover{
    opacity: 0.7;
  }
}
/*------------------------------------------------------------------------------------------------------------------------------
hover end
------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  /*------------------------------------------------------------------------------------------------------------------------------
  header
  ------------------------------------------------------------------------------------------------------------------------------*/
  .navigation_link{
    display: none;
  }
  .smt_menu{
    position: relative;
    display: block;
    width: 3rem;
    height: 2.5rem;
    z-index: 99999;
    cursor: pointer;
  }
  .smt_menu span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 3rem;
    height: .3rem;
    background: #000000;
    transition: .3s;
  }
  .smt_menu span:nth-of-type(1) {
    top: calc(50% - 1rem);
  }
  .smt_menu span:nth-of-type(3) {
    top: calc(50% + 1rem);
  }

  .smt_menu.open span:nth-of-type(2) {
    opacity: 0;
    transform: translateX(-70%);
  }
  .smt_menu.open span:nth-of-type(1) {
    transform: rotate(45deg) translateX(-50%);
    top: 50%;
    transform-origin: left;
    width: calc(3rem * 1.414);
  }
  .smt_menu.open span:nth-of-type(3) {
    transform: rotate(-45deg) translateX(-50%);
    top: 50%;
    transform-origin: left;
    width: calc(3rem * 1.414);
  }

  .smt_menu_box {
    background: #fff;
    padding: 4.3rem 1.2rem 2rem 0;
    position: fixed;
    top: 10rem;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: scroll;
    z-index: 100;
  }
  .smt_menu_link{
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }
  .smt_menu_link_item{
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .smt_menu_link_item::before{
    content: '';
    display: block;
    width: 3.2rem;
    height: 0.4rem;
    background: #4B4137;
  }
  .smt_menu_link a{
    color: #000000;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 100%;
  }
  .smt_menu_link_item_rec a{
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.1rem 0.4rem 0.2rem;
    background: #0727C8;
    border-radius: 0.6rem;
    min-height: 3.5rem;
    color: #FFFFFF;
  }
  .smt_menu_link_item_rec a::after{
    content: '▶';
    display: block;
    color: #FFFFFF;
    font-size: 1.5rem;
  }
  /*------------------------------------------------------------------------------------------------------------------------------
  header end
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  footer
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  footer end
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  front-page_content
  ------------------------------------------------------------------------------------------------------------------------------*/
  /* .partner_box_item {
    min-height: 6rem;
  }
  .partner_box_item img{
    height: 6rem;
  } */
  .partner_box_inner{
    animation: slide 12s linear infinite;
  }
  /* .partner_box_item{
    min-height: 17rem;
    gap: 0.8rem;
    aspect-ratio: 240 / 170;
  }
  .partner_box_item img{
    height: 4.8rem; 
  }
  .partner_box_text{
    gap: 0.6rem;
  }
  .partner_box_text p{
    flex-direction: column;
  } */

  .section01 .box{

  }
  .section01 .box_item{
    width: calc((100% / 2) - (3.2rem / 2));
  }
  .section_consider .link_box{
    flex-direction: column;
  }
  .section_consider .link_box_item{
    width: 100%;
    max-width: 36rem;
  }

  .section02 .section_wrapper{
    padding-left: calc((100 / 1024) * 60vw);
    padding-right: calc((100 / 1024) * 30vw);
  }
  .section02 .box_card07 img{
    width: calc((100 / 1024) * 246vw);
  }
  .section02 .box h3{
    font-size: calc((100 / 1024) * 20vw);
  }
  .section02 .box .explanation{
    font-size: calc((100 / 1024) * 15vw);
  }
  .section02 .box_card{
    padding: calc((100 / 1024) * 22vw) calc((100 / 1024) * 18vw);
  }
  .section02 .box_card04{
    width: calc(100% - ((100 / 1024) * 55vw));
  }

  .section03 h2{
    width: calc((100 / 1024) * 560vw);
  }
  .section03 .needs_img{
    width: calc((100 / 1024) * 90vw);
    right: calc((100 / 1024) * 90vw);
  }

  .solution_box{
    flex-direction: column; 
  }
  .solution_area .solution_box:nth-of-type(2n) .solution_box_img{
    order: unset;
  }

  .service_box{
    flex-direction: column;
  }
  .service_box_header{
    width: 100%;
  }
  .service_box_body{
    width: 100%;
  }

  .voice_card{
    width: calc((100% / 2) - (1.8rem / 2));
  }


  /* 料金プラン */
  .plan_header, .plan_row{

  }
  .plan_header .item:nth-of-type(1), .plan_row .label:nth-of-type(1){
    min-width: calc((100 / 1024) * 191vw);
  }
  .plan_header{
    min-height: calc((100 / 1024) * 78vw);
  }
  .plan_header .item{
    padding: calc((100 / 1024) * 10vw);
    font-size: calc((100 / 1024) * 16vw);
  }

  .plan_row{
    min-height: calc((100 / 1024) * 80vw);
  }
  .plan_header + .plan_row{
    min-height: calc((100 / 1024) * 120vw);
  }
  .plan_row .label{
    padding: calc((100 / 1024) * 8vw);
    font-size: calc((100 / 1024) * 16vw);
  }

  .plan_row .val{
    padding: calc((100 / 1024) * 8vw);
    font-size: calc((100 / 1024) * 16vw); 
  }

  .plan_header + .plan_row .val{
    font-size: calc((100 / 1024) * 42vw);
  }
  .plan_header + .plan_row .val span{
    font-size: calc((100 / 1024) * 28vw);
  }
  .plan_header + .plan_row .val:last-of-type{
    font-size: calc((100 / 1024) * 26vw);
  }

  .plan_box_one.active, .plan_box_second.active{
    gap: calc((100 / 1024) * 35vw);
  }
  .option_box{
    justify-content: space-between;
    gap: calc((100 / 1024) * 28vw);
    font-size: calc((100 / 1024) * 16vw);
  }
  .option_box_add h3{
    min-height: calc((100 / 1024) * 46vw);
    font-size: calc((100 / 1024) * 16vw);
  }
  .option_box_add_row{
    min-height: calc((100 / 1024) * 46vw);
  }
  .option_box_add_label{
    padding: 0 calc((100 / 1024) * 34vw);
    /* width: calc((100 / 1024) * 322vw); */
  }
  .option_box_add_val{
    padding: 0 calc((100 / 1024) * 34vw);
    /* width: calc((100 / 1024) * 201vw); */
  }

  .option_box_free h3{
    min-height: calc((100 / 1024) * 46vw);
  }
  .option_box_free_row{
    min-height: calc((100 / 1024) * 81vw);
  }
  .option_box_free_label{
    padding: 0 calc((100 / 1024) * 34vw);
    /* width: calc((100 / 1024) * 349vw); */
  }
  .option_box_free_val{
    padding: 0 calc((100 / 1024) * 34vw);
    /* width: calc((100 / 1024) * 172vw); */
  }

  .option_box_misc h3{
    min-height: calc((100 / 1024) * 46vw);
  }
  .option_box_misc_val{
    padding: 0 calc((100 / 1024) * 34vw);
    min-height: calc((100 / 1024) * 81vw);
  }

  .option_box_add{
    /* width: calc((100 / 1024) * 524vw); */
  }
  .option_box_right{
    /* width: calc((100 / 1024) * 522vw); */
  }

  /*------------------------------------------------------------------------------------------------------------------------------
  front-page_content end
  ------------------------------------------------------------------------------------------------------------------------------*/
}
@media screen and (max-width: 768px) {
  .pc_only { display: none !important; }
  .sm_only { display: block !important; }
  .floating-banner__img {
    max-width: 220px;
    width: 70vw;
    min-width: 160px;
  }
  /*------------------------------------------------------------------------------------------------------------------------------
  header
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  header end
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  footer
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  footer end
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  page_content
  ------------------------------------------------------------------------------------------------------------------------------*/
  .section h2{
    margin-bottom: 6rem;
    font-size: 32px;
  }

  .intro_wrapper{
    
  }
  .intro_title{
    font-size: 24px;
  }
  .intro_title::before{
    width: calc(2.65rem * 0.6);
  }
  .intro_title::after{
    width: calc(2.65rem * 0.6);
  }
  .intro_text{
    font-size: 18px;
  }


  .section01 .box{
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    max-width: 48rem;
    margin: 0 auto;
  }
  .section01 .box_item{
    width: 100%;
    min-height: auto;
  }

  .section03::before{
    width: calc(40.6rem * 0.6);
  }
  .section03 .section_wrapper{
    min-height: 32rem;
  }
  .section03 h2{
    margin-bottom: 0;
  }

  .section04 .section_wrapper > .explanation{
    font-size: 18px;
  }

  .solution_box_text::before{
    font-size: 60px;
  }

  .section_try h2{
    margin-bottom: 0;
    font-size: 16.41px;
  }

  .section05 .section_wrapper > .explanation{
    font-size: 18px;
  }

  .service_box_body h3 span br{
    display: none;
  }

  .voice_area{
    flex-direction: column;
    max-width: 36rem;
    margin: 0 auto;
  }
  .voice_card{
    width: 100%;
  }


  .plan_header .item:nth-of-type(1), .plan_row .label:nth-of-type(1){
    min-width: calc((100 / 768) * 191vw);
  }
  .plan_header{
    min-height: calc((100 / 768) * 78vw);
  }
  .plan_header .item{
    padding: calc((100 / 768) * 10vw);
    font-size: calc((100 / 768) * 16vw);
  }

  .plan_row{
    min-height: calc((100 / 768) * 80vw);
  }
  .plan_header + .plan_row{
    min-height: calc((100 / 768) * 120vw);
  }
  .plan_row .label{
    padding: calc((100 / 768) * 8vw);
    font-size: calc((100 / 768) * 15vw);
  }

  .plan_row .val{
    padding: calc((100 / 768) * 8vw);
    font-size: calc((100 / 768) * 15vw); 
  }

  .plan_header + .plan_row .val{
    font-size: calc((100 / 768) * 28vw);
  }
  .plan_header + .plan_row .val span{
    font-size: calc((100 / 768) * 18vw);
  }
  .plan_header + .plan_row .val:last-of-type{
    font-size: calc((100 / 768) * 24vw);
  }

  .plan_box_one.active, .plan_box_second.active{
    gap: calc((100 / 768) * 35vw);
  }
  .option_box{
    justify-content: space-between;
    gap: calc((100 / 768) * 28vw);
    font-size: calc((100 / 768) * 15vw);
  }
  .option_box_add h3{
    min-height: calc((100 / 768) * 46vw);
    font-size: calc((100 / 768) * 16vw);
  }
  .option_box_add_row{
    min-height: calc((100 / 768) * 46vw);
  }
  .option_box_add_label{
    padding: 0 calc((100 / 768) * 17vw);
    /* width: calc((100 / 768) * 322vw); */
    font-size: calc((100 / 768) * 14vw);
  }
  .option_box_add_val{
    padding: 0 calc((100 / 768) * 17vw);
    /* width: calc((100 / 768) * 201vw); */
  }

  .option_box_free h3{
    min-height: calc((100 / 768) * 46vw);
  }
  .option_box_free_row{
    min-height: calc((100 / 768) * 81vw);
  }
  .option_box_free_label{
    padding: 0 calc((100 / 768) * 17vw);
    /* width: calc((100 / 768) * 349vw); */
    font-size: calc((100 / 768) * 14vw);
  }
  .option_box_free_val{
    padding: 0 calc((100 / 768) * 17vw);
    /* width: calc((100 / 768) * 172vw); */
  }

  .option_box_misc h3{
    min-height: calc((100 / 768) * 46vw);
  }
  .option_box_misc_val{
    padding: 0 calc((100 / 768) * 17vw);
    min-height: calc((100 / 768) * 81vw);
  }

  .plan_box_one .sm_only{
    width: 100%;
  }
  .plan_box_second .sm_only{
    width: 100%;
  }
  .sm_only .switch_btn{
    max-width: none;
    margin-bottom: 3rem;
  }
  .sm_only .switch_btn button{
    min-width: auto;
    width: calc(100% / 4);
  }
  .plan_card .tier{
    display: flex;
    flex-direction: column;
    margin-bottom: 0.8rem;
    font-size: 1.5rem;
  }
  .plan_card .price{
    margin-bottom: 2.4rem;
    padding-bottom: 1.6rem;
    font-size: 2.4rem;
    border-bottom: 1px solid #D9D9D9;
  }
  .plan_card dl{
    display: flex;
    flex-direction: column;
    /* gap: 0.8rem; */
  }
  .plan_card dt{
    font-size: 1.4rem;
    color: #1F8ECD;
    /* color: #D9D9D9; */
  }
  .plan_card dd{
    margin-bottom: 1.8rem;
    font-size: 1.8rem;
  }
  .option_box{
    flex-direction: column;
    gap: 3rem;
    font-size: 1.5rem;
  }
  .option_box_add{
    width: 100%;
  }
  .option_box_add_label{
    font-size: 1.4rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .option_box_right{
    width: 100%;
  }
  .option_box_free_label{
    font-size: 1.4rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .option_box_add h3{
    font-size: 1.6rem;
    min-height: 4.2rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .option_box_add_row{
    min-height: 4.2rem;
  }
  .option_box_free h3{
    min-height: 4.2rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .option_box_misc h3{
    min-height: 4.2rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .option_box_free_row{
    min-height: 7.2rem;
  }
  .option_box_misc_val{
    min-height: 7.2rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .hikaku_box{
    height: auto;
  }
  .hikaku_table{
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 0 0.8rem;
  }
  .hikaku_cell{
    font-size: calc((100 / 768) * 14vw);
  }
  .hikaku_header .hikaku_cell{
    min-height: calc((100 / 768) * 78vw);
  }
  .hikaku_header + .hikaku_row .hikaku_cell{
    min-height: calc((100 / 768) * 91vw);
  }
  .hikaku_row .hikaku_cell:nth-of-type(1){
    padding: 0 calc((100 / 768) * 14vw);
    font-size: calc((100 / 768) * 14vw);
  }
  .hikaku_header .hikaku_cell:not(:first-of-type){
    font-size: calc((100 / 768) * 18vw);
  }
  .hikaku_header + .hikaku_row .hikaku_cell:nth-of-type(2){
    font-size: calc((100 / 768) * 18vw);
  }
  .hikaku_cell img{
    width: calc((100 / 768) * 78vw);
  }
  .service_box > h3{
    font-size: 18px;
  }
  /*------------------------------------------------------------------------------------------------------------------------------
  page_content end
  ------------------------------------------------------------------------------------------------------------------------------*/
}
@media screen and (max-width: 599px) {
  .sm_only{
    display: block;
  }
  /*------------------------------------------------------------------------------------------------------------------------------
  header
  ------------------------------------------------------------------------------------------------------------------------------*/
  .site-header-main{
    align-items: center;
    min-height: 6rem;
    padding: 0 2.6rem 0 1rem;
  }
  .site-branding_logo{
    max-width: calc(9.2rem * 0.6);
  }
  .smt_menu_box{
    top: 6rem;
  }
  /*------------------------------------------------------------------------------------------------------------------------------
  header end
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  footer
  ------------------------------------------------------------------------------------------------------------------------------*/
  .footer-info{
    justify-content: center;
  }
  .site-footer .site-branding_logo{
    max-width: calc(21.8rem * 0.6);
  }
  .site-map{
    display: none;
  }
  /*------------------------------------------------------------------------------------------------------------------------------
  footer end
  ------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------------------------------------------------------------------------------------------------------
  page_content
  ------------------------------------------------------------------------------------------------------------------------------*/
  .site-content{
    padding-top: 6rem;
  }

  .kv_area{
    aspect-ratio: 375 / 300;
    /* display: flex;
    align-items: center;
    justify-content: center; */
  }
  .kv_bg{
    width: 100%;
  }
  .kv{
    padding-top: calc((100 / 599) * 135vw);
    
  }
  .kv_copy{
    margin: 0 auto calc((100 / 599) * 64vw);
    font-size: calc((100 / 599) * 26vw);
  }
  .kv_subcopy{
    font-size: calc((100 / 599) * 18vw);
  }

  .kv_bg_text{
    left: calc(50% - ((100 / 599) * 140vw));
    font-size: calc((100 / 599) * 24vw);
  }
  .kv_bg_text02{
    left: calc(50% + ((100 / 599) * 140vw));
  }

  .partner_box{
    flex-wrap: wrap;
    gap: 1.8rem;
  }
  /* .partner_box_item{
    width: calc((100% / 3) - (5.4rem / 3));
  } */
  .intro_title{
    gap: 0.8rem;
    justify-content: center;
    font-size: min(1.8rem, calc((100 / 599) * 24vw));
  }
  .intro_text{
    text-align: left;
    font-size: 16px;
  }

  .section h2{
    font-size: 28px;
  }
  .section01 .box_text .explanation{
    text-align: left;
  }


  .section02 .box{
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    min-height: auto;
  }
  .section02 .box_card{
    padding: 2.2rem 1.8rem;
  }
  .section02 .box h3{
    font-size: 1.8rem;
  }
  .section02 .box .explanation{
    font-size: 1.4rem;
  }

  .section02 .box_card04{
    width: 100%;
    margin: unset;
  }
  .section02 .box_card05{
    width: 100%;
  }
  .section02 .box_card07{
    order: -1;
  }
  .section02 .box_card07 img{
    width: 100%;
    max-width: 20rem;
  }


  .section03 .section_wrapper{
    min-height: 40rem;
  }
  .section03 h2{
    width: 100%;
    margin-bottom: 10rem;
  }
  .section03 .needs_img{
    width: 9rem;
    right: 2rem;
    top: unset;
    bottom: 0;
    transform: translate(-50%, 0);
  }

  .section_try .link_box .link_box_item_img01{
    position: absolute;
    bottom: 2rem;
    left: 2rem;
  }
  .section_try .link_box .link_box_item_img02{
    position: absolute;
    bottom: 2rem;
    right: 2rem;
  }

  .section_try .link_box{
    padding: 3.6rem 2rem 16rem;
  }
  .section_try .link_title{
    font-size: 18px;
  }

  .service_box{
    padding: 4rem 2rem;
  }

  .service_box_text .service_title{
    font-size: 16px;
  }
  .service_box_text .service_explanation{
    font-size: 14px;
  }
  .service_box_body h3 span{
    padding: 0 0.9rem;
    font-size: 18px;
  }
  .service_subtitle{
    font-size: 16px;
  }

  .switch_title{
    font-size: 20px;
  }
  .switch_btn{
    max-width: 32rem;
  }
  .switch_btn button{
    min-width: auto;
    padding: 0 2rem;
  }

  .switch{
    gap: 2.4rem;
  }
  .switch_toggle{
    width: 64px;
    height: 36px;
  }
  .slider::before{
    width: 24px;
    height: 24px;
  }
  .switch_toggle input:checked + .slider::before{
      transform: translateX(24px);
  }

  .plan_header .item:nth-of-type(1), .plan_row .label:nth-of-type(1){
    min-width: calc((100 / 599) * 120vw);
  }


  .flow_area{
    gap: 6.4rem;
  }
  .flow_number{
    top: 0;
  }
  .flow_box{
    padding: 4.8rem 2rem 2.4rem;
  }

  .partner{
    padding-bottom: 6rem;
  }
  /* .partner_box_item {
    min-height: 4rem;
  }
  .partner_box_item img{
    height: 4rem;
  } */
  /*------------------------------------------------------------------------------------------------------------------------------
  page_content end
  ------------------------------------------------------------------------------------------------------------------------------*/
}