@charset "utf-8";

html {scroll-behavior: smooth; min-width: 320px;}
body { position: relative; line-height: 1.8; font-size: clamp(14px, 1.6vw, 18px); background-color: #ffffff; color: #333333; letter-spacing: 0.03em; font-family: 'Noto Sans JP', sans-serif; overflow-x:hidden; }

h1,h2,h3,h4,h5,h6 {line-height: 1.5;}
h5,h6 {font-size: inherit;}
img {max-width: 100%; height: auto; vertical-align: middle;}
a {color: #0066cc; border-bottom: none; }
a:hover { transition: all .2s;}
i, em {font-style: normal;}
em {font-weight: bold;}
ul {list-style: none;}
ul, li dl, dt, dd {margin: 0; padding: 0;}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child,
p:first-child,
ul:first-child {margin-top: 0;}
p:last-child,
ul:last-child,
ul.btn:last-child {margin-bottom: 0;}

.inner_wrap {max-width: 1130px; margin: 0 auto; box-sizing: border-box; padding: 30px 0;}
._center {display: flex; justify-content: center;}



.wrap_a {max-width: 1200px; margin-left: auto; margin-right: auto;}
.img_wrap {margin: 2em auto; max-width: 1000px;}
@media (min-width: 1024px) {
	[class*="bgr_"] .inner_wrap {padding-top: 80px; padding-bottom: 80px;}
}

[class*="bgr_"] {position: relative;}
.bgr_a {background-color: #ffffff;}
.bgr_b {background-color: #e8f0f4;}
[class*="bgr_"]::after {content: ""; position: absolute; top: 0; width: 100%; height: 100%; z-index: -1;}
.bgr_a::after {background-color: #e3eaf1; right: 0;}
.bgr_b::after {background-color: #ffffff; left: 0;}

[class*="bgr_"]._tl {border-top-left-radius: 40px; transition: .5s;}
[class*="bgr_"]._tr {border-top-right-radius: 40px; transition: .5s;}
[class*="bgr_"]._bl {border-bottom-left-radius: 40px; transition: .5s;}
[class*="bgr_"]._br {border-bottom-right-radius: 40px; transition: .5s;}

@media (min-width: 1024px) {
[class*="bgr_"]._tl {border-top-left-radius: 100px; transition: .5s;}
[class*="bgr_"]._tr {border-top-right-radius: 100px; transition: .5s;}
[class*="bgr_"]._bl {border-bottom-left-radius: 100px; transition: .5s;}
[class*="bgr_"]._br {border-bottom-right-radius: 100px; transition: .5s;}
}

header .inner_wrap {min-height: 60px; max-width: 1680px; padding: 0 clamp(15px, 4vw, 50px);; display: flex; align-items: center;}
header p {width: 180px;}
@media (min-width: 768px) {
	header .inner_wrap {min-height: 80px;}
	header p {width: 188px;}
}
@media (min-width: 1130px) {
	header .inner_wrap {min-height: 130px;}
}

footer {border-top: solid 5px #006db7; margin-top: 50px; padding-bottom: 80px;}
footer .sec_corpinfo {color: #002542; background-color: #f2f4f4;}
footer .sec_corpinfo .logo {width: 50%; margin: 0; max-width: 260px; min-width: 205px;}
footer .sec_corpinfo .inner_wrap ul {padding: 2em 1em;}
footer .sec_corpinfo ._detail {padding: 2em 1em 1em; border-top: solid 1px #ccc; font-weight: bold;}
footer .sec_corpinfo ._detail br {display: none;}
footer p.copy {font-size: smaller; padding: 0 clamp(15px, 4vw, 40px); text-align: center;}
@media (min-width: 1024px) {
footer .sec_corpinfo .logo {width: initial; max-width: 320px;}
footer .sec_corpinfo ._detail br {display: inline;}
footer .sec_corpinfo .inner_wrap {display: flex; gap: 30px; justify-content: space-around;}
footer .sec_corpinfo .inner_wrap ul {padding-left: 2em; padding-bottom: 0;}
footer .sec_corpinfo ._detail {padding: 0; border: none;}
footer .sec_corpinfo .inner_wrap {padding-top: 80px; padding-bottom: 100px;}
footer {flex-direction: row; justify-content: space-between; align-items: flex-end;}
footer p.copy { text-align:left; }
}


/* page top */
#totop {position: fixed; bottom: 100px; left:calc(100% - 4.5em) ; display: flex; justify-content: flex-end; z-index: 600; width: 3.5em; height: 3.5em;}
#totop a {text-indent: 100%; line-height: 1; white-space: nowrap; overflow: hidden; position: relative; border-radius: .6em; background-color: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.4);}
#totop a::before {top: .8em; left: calc(50% - 1px); display: block; width: 0; height: 1.8em; border-left: solid 2px #fff; content:""; position: absolute;}
#totop a::after {width: 1.4em; height: 1.4em; border: solid #fff; border-width: 2px 2px 0 0; content:""; position: absolute; left: 50%; top: 50%; margin-top: -0.7em; margin-left: -0.7em; transform: rotate(-45deg);}


/* btn */
ul.btn {margin: 1em 0; display: flex; justify-content: center; padding: 0;}
ul.btn li {width: 100%; max-width: 20em;}
ul.btn a {display: flex; color: #0072bc; background-color: #ffffff; min-height: 3em; justify-content: center; align-items: center; width: 100%; border-radius: 3em; text-decoration: none; }
ul.btn._contact {font-size: clamp(15px, 13px + 0.63vw, 20px);}
ul.btn._contact a { padding: 0 1.5em; background-color: #fff; font-weight: bold; }
ul.btn._contact a:hover,
ul.btn._contact a:focus { opacity: 0.8; transition: all 0.5s;}

.sec_contact { margin: clamp(30px, -17.664px + 14.02vw, 90px) 20px 0; color: #ffffff; }
.sec_contact .inner_wrap { position: relative; padding: 15px 10px; max-width: 1580px; height: clamp(200px, 136px + 18.73vw, 348px); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;  background: url(../assets/images/bg_contact.png) no-repeat left top; background-size: cover; border-radius: 20px;}
.sec_contact .inner_wrap > * {margin: 0;}
.sec_contact ._center { flex-direction: column; font-size:clamp(21px, 13.68px + 2.15vw, 38px); font-weight:600; text-align:center; line-height:1.2; }
.sec_contact .ico_free { position:absolute; top: -50px; right: clamp(18px, -52.5px + 18.43vw, 263px); width:clamp(90px, 3.688rem + 9.11vw, 162px) }



#contact {position: fixed; left: 0; bottom: 0; z-index: 500; width: 100%;}
#contact.fixed .sec_contact { margin: 0; background-color: rgba(0, 114, 188, 0.85); border-top: solid 1px #fff; z-index: 10;}
#contact.fixed .sec_contact .inner_wrap {height: 5rem; min-height: auto; padding-top: 0; padding-bottom: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5%; background-image: none;}
#contact.fixed .sec_contact .inner_wrap > p {display: none;}
#contact.fixed .sec_contact ul.btn._contact { position: relative; margin: 0; font-size: 16px; width: 100%; letter-spacing: 0;}
#contact.fixed .sec_contact ul.btn._contact li {max-width: 25em;}
#contact.fixed .sec_contact ul.btn._contact a {min-height: 3em; border: none;}
#contact.fixed .sec_contact ul.btn._contact .ico_free02 { width: 60px; position:absolute; top:-25px; right:calc(50% - 30px - 9em); }
@media (min-width: 768px) {
#contact.fixed .sec_contact .inner_wrap {height: 5em;}
#contact.fixed .sec_contact .inner_wrap > ul {width: 50%; max-width: 20em;}
#contact.fixed .sec_contact .inner_wrap > p {display: inherit; margin: 0;}
#contact.fixed .sec_contact ul.btn._contact .ico_free02 { width: 70px; top:-35px; right:-35px; }
}


/* 見出し */
h2 { font-size:clamp(24px, 18px + 1.77vw, 38px); font-weight:700; line-height:1.3; }
h3 { font-size: clamp(20px, 16.56px + 1.01vw, 28px); font-weight:700; line-height:1.3 }
.tag { font-size:clamp(14px, 12.3px + 0.51vw, 18px); font-weight:700; color:#277198; font-family:"Montserrat", serif; }
.sec_contact .tag { margin-bottom: 10px; color:#fff; }


/* mv */
.mv_wrap {position: relative; margin: 0 clamp(15px, 4vw, 50px); }
.mv_wrap::before {content: ""; width: 100%; height: 626px; max-height: 626px; position: absolute; border-radius: 10px; background-color: #e8f0f4; background-image: url(../assets/images/bg_mv_01.png); background-repeat: no-repeat; background-position: right calc(50vw - 180px) top -29px; }
.mv_wrap::after { content:""; display: inline-block; width:673px; height:691px; background:url(../assets/images/img_mv_02.png) no-repeat left bottom; position:absolute; bottom: 0; left:calc(50vw + 69px); z-index:100; }
.mv_wrap .inner_wrap {position: relative; height:626px; padding: 86px 20px 40px; z-index:200 }

.mv_wrap .mv_tit { position: relative; display: inline-block;}
.mv_wrap .mv_tit h1 { display:inline-block; margin: 0; font-size: clamp(30px, 17.7px + 3.61vw, 60px); letter-spacing: 0;}
.mv_wrap .mv_tit h1 strong { color:#277198; }
.mv_wrap .ico_satisfaction { position:absolute; margin-top: 0 !important; right:0; bottom:-25px; z-index:300; width:clamp(100px, 69px + 9.16vw, 176px); }
.mv_wrap .mv_tit p { line-height: 1.54; margin-top: 4%; font-size: clamp(14px, 9px + 1.458vw, 26px); font-weight: bold;}
.mv_wrap .btn {margin-top: 24px; position: relative; z-index: 1;}
.mv_wrap .mv_tit h1,
.mv_wrap .mv_tit p,
.c-buttonContact__anchor--v {
filter: blur(10px);
opacity: 0;
animation-name: blur;
animation-delay: .5s;
animation-duration: 1s;
animation-fill-mode:forwards;
}
.mv_wrap .mv_tit p {animation-delay: 1.5s;}
@keyframes blur {
0% {opacity: 0; filter: blur(15)}
100% {opacity: 1; filter: blur(0)}
}

.mv_wrap .btn { justify-content: flex-start;}
.mv_wrap .btn._contact a {
	background-color: #0072bc;
	color: #fff;
}

@media (max-width: 1130px){
	.mv_wrap { margin:0; overflow: hidden;}
	.mv_wrap::after { background-size:96% auto; }
}
@media (max-width: 767px) {
	.mv_wrap::before { background-size:257% auto; }
	.mv_wrap::after { width: 84vw; height: 93%; background-size:auto 100%; left:21vw; }
	.mv_wrap .inner_wrap { padding-top:20px; }
	.mv_wrap .ico_satisfaction { right:auto; bottom:auto; left: clamp(4px, -7.12px + 3.27vw, 18px); top:110%; }
	.mv_wrap .btn { position:absolute; bottom:80px; }
}



/* summary */
#summary { position: relative; margin:-40px 20px 0; z-index:100; }
#summary .inner_wrap {
	padding:40px 20px 58px; display: grid; justify-content: stretch; align-items: flex-end; background-color: #277198; border-radius: 10px; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.25);
}
#summary .inner_wrap dl { color:#fff; border-right:solid 1px #fff; text-align:center; }
#summary .inner_wrap .cont01 { grid-row: 1 / 1; grid-column: 1 / 1; }
#summary .inner_wrap .cont02 { grid-row: 1 / 1; grid-column: 2 / 3;}
#summary .inner_wrap .cont03 { grid-row: 1 / 1; grid-column: 3 / 4 }
#summary .inner_wrap dl.cont03 { border-right:none; }
#summary .inner_wrap dt { font-size:clamp(17px, 11.26px + 0.75vw, 20px); font-weight:700; }
#summary .inner_wrap dd { font-size:20px; font-weight:500 }
#summary .inner_wrap em { font-size:40px; }
#summary .f_small { font-size:16px; }
@media (max-width: 767px) {
	#summary .inner_wrap { padding: 20px; }
	#summary .inner_wrap .cont02 { border-right:none; }
	#summary .inner_wrap .cont03 { margin-top: 15px; grid-row: 2 / 3; grid-column: 1 / 3; padding-top: clamp(2%, 3.9%, 5.8%); border-top: solid 1px #fff; }
	#summary .inner_wrap dt { font-size:clamp(15px, 11px + 1.17vw, 20px); }
	#summary .inner_wrap dd { font-size:clamp(14px, 9.232px + 1.4vw, 20px); }
	#summary .inner_wrap em { font-size:clamp(30px, 22px + 2.34vw, 40px); }
}


/* service */
#service { margin:42px 20px 77px 20px; }
#service figure { margin-top:65px; }
#service .other { margin-top: 69px; display: flex; justify-content:space-between; align-items:stretch; }
#service .other dl { width:48%; padding: 32px 4%; background-color:#e8f0f4; border-radius:8px; }
#service .other dt { font-size:clamp(20px, 18.34px + 0.48vw, 24px); font-weight:700; color:#277198; }
#service .other dd { line-height:1.6; }
@media (max-width: 767px) {
	#service { margin:0 10px; }
	#service figure { margin-top:6vw; }
	#service .other { display:block; margin-top:5vw; }
	#service .other dl { margin-top:20px; width:100%; }
}

/* worry */
#worry { background-color:#eeeeee; padding:0 20px; }
#worry .inner_wrap { position: relative; padding-bottom:0; }
#worry .inner_wrap:after { content:""; display:inline-block; width:0; height:0; border-style:solid; border-width: 73px 122px 0 122px; border-color: #eeeeee transparent transparent transparent; position:absolute; top: 100%; left:calc(50% - 122px); }
#worry ul { display:grid; justify-content:space-between; align-items:stretch; grid-template-columns:repeat(3, 31%); }
#worry li { position: relative; padding: 30px 10px; font-size:clamp(12px, 7.9px + 1.2vw, 22px); font-weight:700; color:#777777; line-height: 1.45; text-align: center; background-color:#fff; border-radius:28px; }
#worry .txt01 { grid-row: 1/1; grid-column: 1/2; }
#worry .txt02 { grid-row: 1/1; grid-column: 2/3; }
#worry .txt03 { grid-row: 1/1; grid-column: 3/4; }
#worry .img_worries { grid-row:2/3; grid-column: 1/4; margin-top: 57px; padding: 0; background-color:unset; }
#worry .txt01:after,
#worry .txt02:after,
#worry .txt03:after { content:""; display:inline-block; width:0; height:0; border-style:solid; position:absolute; top: 100%; left:calc(50% - 21px); }
#worry .txt01:after { border-width: 19px 21px 19px 21px; border-color: #fff #fff transparent transparent; }
#worry .txt02:after { border-width: 38px 21px 0 21px; border-color: #fff transparent transparent transparent; }
#worry .txt03:after { border-width: 19px 21px 19px 21px; border-color: #fff transparent transparent #fff; }
#worry .suggestion { padding: clamp(51px, 22.7px + 8.31vw, 120px) 15px clamp(150px, 133.6px + 4.82vw, 190px); margin: 0 -20px; font-size: clamp(22px, 20.37px + 0.48vw, 26px); font-weight: 600; color: #fff; line-height: 1.65; text-align: center; background-color:#277198; }
@media (max-width: 767px) {
	#worry .inner_wrap:after { border-width:9.73vw 16.26vw 0 16.26vw; left:calc(50% - 16.26vw); }
	#worry li { border-radius:3.73vw; }
}

/* structure */
#structure { margin:0 20px; }
#structure .inner_wrap.beginning { margin-top: -123px; padding: 30px 5.3%; background-color:#fff; border-radius: 10px 10px 0 0; box-shadow:0 -36px 50px rgba(0, 0, 0, 0.25); }
#structure .inner_wrap.step { max-width:1680px; padding-top:0; }
#structure .step .flexBox { margin-top: 78px; display: grid; justify-content:center; align-items: center; grid-template-columns:50% 50%; }
#structure .step .flexBox .text { display: flex; justify-content: flex-end; padding:0 40px  }
#structure .step .flexBox .text_inner { max-width:525px }
#structure .step .flexBox .illust { padding: 4%; background-color:#e8f0f4; border-radius:10px; text-align:center; }
#structure .step .flexBox .illust figcaption span { margin-top: 5px; padding: 0 10px; display: inline-block; font-size:clamp(12px, 9.456px + 0.75vw, 22px); font-weight:700; color: #fff; line-height:1.81; background-color:#324b58; }
#structure .step .flexBox.reverse .text { grid-column: 2/3; grid-row: 1/1; justify-content:flex-start; }
#structure .step .flexBox.reverse .illust { grid-column: 1/2; grid-row: 1/1; }
@media (max-width: 767px) {
	#structure .step .flexBox { margin-top: 5vw; grid-template-columns:100%; }
	#structure .step .flexBox .text { display:block; padding:0; }
	#structure .step .flexBox .text_inner { max-width:100%; }
	#structure .step .flexBox .illust { margin-top:3vw; }
	#structure .step .flexBox.reverse .text { grid-column: 1/1; grid-row: 1/1; }
	#structure .step .flexBox.reverse .illust { grid-column: 1/1; grid-row: 2/3; }
}

/* use_case */
#use_case { margin-top:100px; padding: 0 20px 70px; background-color:#e8f0f4; }
#use_case .task { margin-top: 40px; display: grid; grid-template-columns: 1fr 33.2%; background-color: #fff;  border-radius:18px; box-sizing: border-box; }
#use_case .task dl { padding: clamp(20px, -39.28px + 6.58vw, 40px); }
#use_case .task dt { padding: 15px 20px 20px; font-size:clamp(12px, 0.144px + 1.32vw, 16px); line-height: 1.2; background-color:#e8f0f4; border-radius:10px; }
#use_case .task dt strong { display: inline-block; margin-bottom: 3px; color:#277198; font-weight:600; }
#use_case .task .solution { margin-top: 12px; font-size:clamp(20px, 8.14px + 1.32vw, 24px); font-weight:800; color:#277198; line-height:1.6; }
#use_case .task .category { margin-top: 12px; font-size:clamp(12px, 0.144px + 1.32vw, 16px); color:#888888; }
#use_case .task .hashtag { color:#277198; }
#use_case .task .description { margin-top: 15px; letter-spacing:0; }
@media (max-width: 900px) {
	#use_case { margin-top:8vw; padding-bottom:4vw; }
	#use_case .task { display:block; }
}

/* faq */
#faq { margin:0 20px; }
#faq .faq_box { margin-top:40px; padding: 3.54% 4.42% 3.54% clamp(50px, 37.7px + 3.61vw, 80px); background-color:#e8f0f4; border-radius:10px; }
#faq .faq_box dt { font-size:clamp(20px, 19.2px + 0.24vw, 22px); font-weight:800; color:#277198; line-height:1.4; }
#faq .faq_box dt:before { margin-left: -39px; padding-right: 17px; content:"Q"; font-size: 24px; }
#faq .faq_box dd { margin-top:10px; }

/* c-buttonContact__anchor--download */
.c-buttonContact--v {
  /*visibility: hidden;
  opacity: 0;*/
  position: fixed;
  z-index: 300;
  -webkit-transition: opacity 0.2s ease-out, visibility 0s ease-out 0.2s;
  transition: opacity 0.2s ease-out, visibility 0s ease-out 0.2s;
}
/*
.c-buttonContact--v.is-active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-out, visibility 0s ease-out;
  transition: opacity 0.2s ease-out, visibility 0s ease-out;
}*/

.c-buttonContact__anchor {
  display: inline-block;
  text-decoration: none;
  background: var(--Semantic-token-Text-color-Accent, #FFD91A);
  -webkit-box-shadow: 0 2px 10px 0 rgba(173, 165, 0, 0.5);
  box-shadow: 0 2px 10px 0 rgba(173, 165, 0, 0.5);
  color: var(--Semantic-token-Text-color-Body, #002542);
  font-weight: 700;
  text-align: center;
  position: relative;
}
.c-buttonContact__anchor--download {
  background: #66cc00;
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 91, 0, 0.5) !important;
  box-shadow: 0 2px 10px 0 rgba(0, 91, 0, 0.5) !important;
}
.c-buttonContactArrow__wrapper {
  position: absolute;
  background: var(--Semantic-token-Background-Primary, #FFF);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
}

@media print, screen and (min-width: 768px) {
	.c-buttonContact__anchor {
	    border-radius: 1000px;
	    padding: var(--spaceUnite-2, 16px) var(--spaceUnite-8, 64px);
	    line-height: 1;
	    letter-spacing: 0.64px;
	    -webkit-transition: background-color 0.4s ease-out !important;
	    transition: background-color 0.4s ease-out !important;
  	}
  	.c-buttonContact__anchor:hover {
	    opacity: 1 !important;
	    background: var(--Global-token-Yellow-Yellow-500, #FFE97E);
	}
  	.c-buttonContact__anchor--download:hover {
	    opacity: 1 !important;
	    background: #99ff33;
	}
  	.c-buttonContact__anchor:hover .c-buttonContact__arrow {
	   	-webkit-animation: 400ms ease-in-out 0s 1 normal forwards running overarrow;
	    animation: 400ms ease-in-out 0s 1 normal forwards running overarrow;
	}
  	.c-buttonContactArrow__wrapper {
	    border-radius: 1000px;
	    width: 26px;
	    height: 26px;
	    right: 10px;
	}
  	.c-buttonContact--v {
	    right: 16px;
	    top: 50%;
	    bottom: 0;
	    margin: auto;
	    width: 48px;
	    transform: translateY(-50%);
	}
  	.c-buttonContact__anchor--v {
	    -webkit-writing-mode: vertical-rl;
	    -ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
	    padding: 13px 16px 42px 16px;
	}
  	.c-buttonContactArrow__wrapper--v {
	    top: unset;
	    right: 0;
	    bottom: 10px;
	    left: 0;
	}
}
@media print, screen and (max-width: 767px) {
	.c-buttonContact--v {
	  width: 17vw;
	  height: 17vw;
	  right: 12px;
	  left: unset;
	  bottom: calc(120px + 3.5em);
	  opacity: 0.8;
	  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.16));
	}
}

/* module */
.fs_sm {font-size: smaller !important;}
.fs_lg {font-size: larger !important;}
@media (min-width: 1024px) {
	.pc_fs_lg {font-size: larger !important;}
}

.fw_b {font-weight: bold;}
.fw_n {font-weight: normal;}
.d_ib {display: inline-block !important;}
.ta_c {text-align: center !important;}
.lh_n {line-height: normal;}

.m_0  {margin: 0 !important;}
.mt_0 {margin-top: 0 !important;}
.mb_0 {margin-bottom: 0 !important;}

.pc-only { display: block; }
.sp-only { display: none; }
br.pc {display: none !important;}
br.sp {display: inline !important;}

@media (min-width: 640px) {
	.tb_d_ib {display: inline-block !important;}
}
@media (max-width: 639px) {
	.sp_d_ib {display: inline-block !important;}
}

@media (max-width: 767px) {
	.pc-only { display: none; }
	.sp-only { display: block; }
}

@media (min-width: 1024px) {
	.pc_ta_c {text-align: center !important;}
	br.pc {display: inline !important;}
	br.sp {display: none !important;}
}