@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');



/* =================== */
/*       pubulic       */
/* =================== */
html {
	overflow-x:hidden;
	scroll-padding-top:150px !important;
}
html,body {
  /*font-size:clamp(10px, 10.35vw, 22px); clamp(10px, 1.33vw, 20px)*/
  font-size:clamp(10px, 1.11vw, 20px); /* w1440 16px */
  font-family: "Noto Sans JP", sans-serif;
  font-weight:400;
	position:relative;
  /*-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;*/
  overflow-x:hidden;
  background:#eceaf0 !important;
  line-height:1;
  letter-spacing:.05em;
}


.en-font {
	font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}



img {
  width:100%;
  height:auto;
}
.sp-on { display:none; }
a { transition:0.3s ease all; }


.flex-box {
  display:-webkit-box;
  display:flex;
  -webkit-box-pack:justify;
  justify-content:space-between;
  align-items:center;
}


.inner-box {
	/*width:55.5rem;*/
	width:60rem;
	margin:0 auto;
	position:relative;
}

.fadein {
	opacity:0;
	transform:translate(0, 15%);
	transition:1s;
}
.fadein.is-show {
	transform:translate(0, 0);
	opacity:1;
}
.blur {
	filter:blur(10px);
	transition:1.5s;
}
.blur.is-show {
	filter:blur(0);
	opacity:1;
}






/* =================== */
/*       #header       */
/* =================== */
#header {
	background:#38306e;
	color:#fff;
	position:fixed;
	width:100%;
	z-index:1000;
	height:5rem;
}
#header .inner-box { height:100%; }
#header #site-logo { width:10rem; }

#header .headernavi-container1 {
    position: fixed;
    right: 0;
    top: 20%;
    z-index:10;
}
#header .primary-button11-container {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
#header .primary-button11-container1 {
    display: flex;
    align-self: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
#header .MediumLabel{
  display: block;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin: 0 0 10px 0;
  border-radius: 0;
  background: #9c308d;
  color: #fff;
  border: none;
  padding: 1rem;
  font-size: .8rem;
  text-decoration: none;
  line-height:1;
}
#header .MediumLabel span{ font-weight:600; }
#header .MediumLabel:hover{ opacity:.5; }

#header .head-nav ul { justify-content:flex-end; }
#header .head-nav ul li {
	margin-left:2rem;
	font-weight:800;
  color:#fff;
  font-size:.7rem;
}
#header .head-nav ul li a { color:#fff; }
#header .head-nav ul li svg {
	width:.7rem;
	height:.7rem;
	fill:#fff;
	margin-left:.2rem;
	vertical-align:bottom;
}
#header a:hover { opacity:.5; }
#header #hamburger { display:none; }

.breadcrumbs-box {
	margin-top:5rem;
	background:#7b5686;
	font-size:.75rem;
	color:#fff;
}
.breadcrumbs-box a,
.breadcrumbs-box a:visited { color:#fff; }
.breadcrumbs-box a:hover { text-decoration:underline; }
.breadcrumbs-box .breadcrumbs {
	display:flex;
}
.breadcrumbs-box .breadcrumbs > span {
	display:flex;
	align-items:center;
	overflow:hidden;
	padding-right:.5rem;
	margin-right:1rem;
}
.breadcrumbs-box .breadcrumbs > span::after {
	content:"";
	width:2rem;
  height:2rem;
  border-top:1px solid #fff;
  border-right:1px solid #fff;
  transform:rotate(45deg);
  display:block;
  margin-left:-.5rem;
}
.breadcrumbs-box .breadcrumbs span.current-item { margin-bottom:0; }
.breadcrumbs-box .breadcrumbs span.post {
	width:25em;
	white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
 	display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
}



/* =================== */
/*       #footer       */
/* =================== */
#footer {
	margin-top:6rem;
	padding-bottom:2.5rem;
	position:relative;
}
#footer::before {
	content:"";
	width:100%;
	height:0;
	padding-top:35.52%;
	background:url(../img/foot_bk.png) no-repeat;
	background-size:cover;
	display:block;
	position:absolute;
	bottom:8.5rem;
	left:0;
}
#footer .foot-logo { width:5rem; margin:0 auto 1.5rem; }
#footer ul.foot-nav {
	justify-content:center;
	margin:0;
}
#footer ul.foot-nav li {
	font-size:.8rem;
	margin-right:2rem;
	font-weight:600;
}
#footer ul.foot-nav li a { color:#18191f; }
#footer ul.foot-nav li:last-child { margin-right:0; }
#footer ul.foot-nav li svg {
	width:1rem;
  vertical-align:text-bottom;
  margin-left:.2rem;
}
#footer .box2 { margin-top:4rem; }
#footer .box2 small {
	font-size:1rem;
}
#footer .box2 ul.sub-nav li { margin-left:1rem }
#footer .box2 ul.sub-nav li a {
	background:#18191f;
	display:block;
	padding:.5rem;
	border-radius:100vmax;
	width:2rem;
	height:2rem;
	line-height:1;
	box-sizing:border-box;
}
#footer .box2 ul.sub-nav li a svg {
	width:1rem;
	height:1rem;
	fill:#fff;
}
#footer li a:hover { opacity:.5; }






/* =================== */
/*       body.index       */
/* =================== */
main {
	position:relative;
	margin-top:5rem;
}

body.index main .h2-size { text-align:center; }
body.index main .h2-size span {
	font-size:1.75rem;
	font-weight:800;
	line-height:1.28;
	color:#372d72;
}
body.index main .h2-size.wht span { color:#fff; }
body.index main .h2-size.line { position:relative; }
body.index main .h2-size.line::before {
	content:"";
	width:100%;
	height:5px;
	background:#372d72;
	display:block;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	margin:auto 0;
}
body.index main .h2-size.line span {
	background:#eceaf0;
	padding:0 1.5rem;
	position:relative;
}

.dflt-link-cont-box {
	align-items:initial;
	margin:6rem auto;
	position:relative;
	z-index:1;
}
.dflt-link-cont-box .link-box {
	width:calc((100% - 3rem) / 3);
	background:rgba(255,255,255,.7);
	padding:2.5rem 2rem;
}
.dflt-link-cont-box .link-box .txt {
	font-size:.75rem;
	text-align:center;
	line-height:1.83;
	margin:.8rem 0 1rem;
}
.dflt-link-cont-box .link-box .ttl {
	text-align:center;
	font-size:1rem;
}
.dflt-link-cont-box .link-box .ttl span {
	font-weight:bold;
	vertical-align:middle;
	display:inline-block;
}
.dflt-link-cont-box .link-box.box1 .ttl::before {
	content:"";
	width:1.45rem;
	height:1.85rem;
	background:url(../img/link_icon1.png) no-repeat;
	background-size:cover;
	display:inline-block;
	vertical-align:middle;
	margin-right:.7rem;
	margin-bottom:.2rem;
}
.dflt-link-cont-box .link-box.box2 .ttl::before {
	content:"";
	width:1.9rem;
	height:1.8rem;
	background:url(../img/link_icon2.png) no-repeat;
	background-size:cover;
	display:inline-block;
	vertical-align:middle;
	margin-right:.7rem;
	margin-top:.2rem;
}
.dflt-link-cont-box .link-box.box3 .ttl::before {
	content:"";
	width:1.45rem;
	height:1.95rem;
	background:url(../img/link_icon3.png) no-repeat;
	background-size:cover;
	display:inline-block;
	vertical-align:middle;
	margin-right:.7rem;
	margin-bottom:.2rem;
}
.dflt-link-cont-box .link-box .btn a {
	line-height:2rem;
	border-radius:.5rem;
	text-align:center;
	color:#fff;
	font-size:.825rem;
	font-weight:800;
	width:100%;
	display:block;
}
.dflt-link-cont-box .link-box.box1 .btn a { background:#72a244; }
.dflt-link-cont-box .link-box.box2 .btn a { background:#372d72; }
.dflt-link-cont-box .link-box.box3 .btn a { background:#903a89; }
.dflt-link-cont-box .link-box .btn a:hover { opacity:.5; }

.nml-btn a {
	font-size:.825rem;
	text-align:center;
	font-weight:bold;
	line-height:2rem;
	background:#372d72;
	color:#fff;
	border-radius:.5rem;
	width:15.75rem;
	display:block;
	margin:0 auto;
}
.nml-btn a:hover { opacity:.5; }


body.index #mv-box {
	padding:5rem 0;
	position:relative;
	background:url(../img/mv_bk.png) no-repeat bottom;
	background-size:cover;
}
body.index #mv-box .pic-box { width:28rem; }
body.index #mv-box .copy {
	font-size:2.25rem;
	font-weight:800;
	color:#372d72;
	line-height:1.27;
}
body.index #mv-box .copy .clr { color:#72a244; font-weight:800; }
body.index #mv-box .txt {
	font-size:.875rem;
	line-height:2;
	margin:1.5rem 0;
}
body.index #mv-box .btn-box { justify-content:flex-start; }
body.index #mv-box .btn-box .btn1 { margin-right:1rem; }
body.index #mv-box .btn-box .btn1 a {
	background:#72a244;
	line-height:3.75rem;
	border-radius:.5rem;
	color:#fff;
	text-align:center;
	width:13.25rem;
	display:block;
	font-weight:bold;
	font-size:.825rem;
}
body.index #mv-box .btn-box .btn2 a {
	background:#903a89;
	line-height:3.75rem;
	border-radius:.5rem;
	color:#fff;
	text-align:center;
	width:9.25rem;
	display:block;
	font-weight:bold;
	font-size:.825rem;
}
body.index #mv-box .btn-box .btn a:hover { opacity:.5; }

body.index #point-sec {
	background:url(../img/point_bk.jpg) no-repeat;
	background-size:cover;
	padding:1rem 0 3rem;
}
body.index #point-sec .h2-size { margin-bottom:1.5rem; }
body.index #point-sec .h2-size span {
	display:inline-block;
	padding-bottom:1rem;
	vertical-align:bottom;
	margin-left:.5rem;
}
body.index #point-sec .h2-size::before {
	content:"";
	width:2.5rem;
	height:4.75rem;
	background:url(../img/point_illust.png) no-repeat;
	background-size:cover;
	display:inline-block;
	vertical-align:bottom;
}
body.index #point-sec ol > li {
	background:#fff;
	padding:1.5rem 1.5rem 2rem;
	width:calc((100% - 3rem) / 3);
}
body.index #point-sec ol > li .num { text-align:center; }
body.index #point-sec ol > li .num .waku {
	font-size:.85rem;
	color:#382d72;
	text-align:center;
	font-weight:800;
	display:inline-block;
	padding:.1rem 1.5rem;
	border:1px solid #382d72;
}
body.index #point-sec ol > li .num .big {
	font-size:147%;
	font-weight:800;
}
body.index #point-sec ol > li h3 {
	font-size:1.85rem;
	font-weight:800;
	text-align:center;
	color:#72a244;
	margin:.8rem 0;
}
body.index #point-sec ol > li .copy {
	line-height:1.375;
	text-align:center;
	font-weight:800;
	font-size:1rem;
	color:#372d72;
	margin-bottom:.8rem;
}
body.index #point-sec ol > li li {
	font-size:.75rem;
	line-height:1.5;
	color:#372d72;
	margin-bottom:.5rem;
	text-indent:-1.5em;
	padding-left:1.5em;
}
body.index #point-sec ol > li li::before {
	content:"●";
	font-size:75%;
	margin-right:1em;
}

body.index #usecase-sec { padding:3rem 0 0; }
body.index #usecase-sec .fig { margin:2rem auto 0; }

body.index #why-sec {
	position:relative;
	padding:10rem 0;
	background:#fff;
}
body.index #why-sec .illust {
	width:34rem;
	position:absolute;
	left:0;
	bottom:0;
}
body.index #why-sec .txt-box {
	width:35rem;
	margin-left:calc(100% - 35rem);
}
body.index #why-sec .txt-box .h2-size { text-align:left; }
body.index #why-sec .txt-box .txt {
	font-size:1rem;
	line-height:2;
	margin-top:2rem;
}
body.index #why-sec .txt-box .txt span {
	font-weight:bold;
	color:#903a89;
}

body.index #commitment-sec { margin:6rem auto 3rem; }
body.index #commitment-sec ul {
	align-items:initial;
	margin-top:2rem;
}
body.index #commitment-sec ul li {
	width:calc((100% - 3rem) / 3);
	background:rgba(255,255,255,.7);
	padding:1rem 2rem 1.5rem;
}
body.index #commitment-sec li .icon {
	width:2.825rem;
	margin:0 auto;
}
body.index #commitment-sec li h3 {
	font-size:1rem;
	font-weight:bold;
	text-align:center;
	color:#372d72;
	margin:1rem 0;
}
body.index #commitment-sec li .txt {
	line-height:1.83;
	font-size:.75rem;
}

body.index #function-sec { margin-bottom:3rem; }
body.index #function-sec ul {
	flex-wrap:wrap;
	align-items:initial;
	margin-top:2rem;
	margin-bottom:1rem;
}
body.index #function-sec ul li {
	width:calc((100% - 1.5rem) / 2);
	background:rgba(255,255,255,.7);
	text-align:center;
	padding:1.5rem 0;
	margin-bottom:1.5rem;
}
body.index #function-sec ul li .name {
	font-size:1rem;
	font-weight:bold;
	color:#372d72;
}
body.index #function-sec ul li .name i {
	margin-right:.5rem;
	font-size:115%;
}

body.index #linkage-sec .pic { margin-top:2rem; }
body.index #linkage-sec .txt {
	line-height:1.83;
	font-size:.75rem;
	text-align:center;
	margin:1.5rem 0 2rem;
}

body.index #case-sec {
	margin:5rem 0;
	padding:3rem 0;
	background:url(../img/case_bk.jpg) no-repeat;
	background-size:cover;
}
body.index #case-sec ul {
	flex-wrap:wrap;
	align-items:initial;
	margin-top:3rem;
	margin-bottom:2rem;
}
body.index #case-sec ul li {
	width:calc((100% - 1.5rem) / 2);
	background:#fff;
	padding:2rem 0 1.5rem;
}
body.index #case-sec ul li .pic { width:13.5rem; }
body.index #case-sec ul li .txt-box {
	width:calc(100% - 13.5rem - 1.5rem);
}
body.index #case-sec ul li h3 {
	font-size:1rem;
	font-weight:bold;
	text-align:center;
	color:#372d72;
	margin-bottom:2rem;
}
body.index #case-sec ul li .txt {
	line-height:1.83;
	font-size:.75rem;
	color:#372d72;
}
body.index #case-sec ul li .link-txt a {
	line-height:1.83;
	font-size:.75rem;
	color:#372d72;
	padding-bottom:.3rem;
	border-bottom:1px solid #372d72;
}
body.index #case-sec ul li .link-txt a:hover { opacity:.5; }
body.index #case-sec .nml-btn a {
	background:#fff;
	color:#372d72;
}

body.index #faq-sec { position:relative; z-index:1; }
body.index #faq-sec dl {
	margin-top:2rem;
	margin-bottom:2rem;
}
body.index #faq-sec dl .line {
	background:rgba(255,255,255,.7);
	padding:1.5rem 2rem;
	margin-bottom:1rem;
}
body.index #faq-sec dl .line dt {
	position:relative;
	display:flex;
	align-items:center;
	font-size:.95rem;
	font-weight:bold;
	color:#372d72;
	cursor:pointer;
}
body.index #faq-sec dl .line dt span {
	font-size:145%;
	font-weight:bold;
	margin-right:1.5rem;
}
body.index #faq-sec dl .line dt::before {
	content:"＋";
	display:block;
	font-size:1rem;
	height:1em;
	font-weight:bold;
	color:#000;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	margin:auto 0;
}
body.index #faq-sec dl .line dt.open::before { content:"ー"; }
body.index #faq-sec dl .line dd { display:none; }
body.index #faq-sec dl .line dd .box {
	position:relative;
	display:flex;
	align-items:baseline;
	font-size:.95rem;
	font-weight:bold;
	color:#372d72;
	margin-top:1.5rem;
}
body.index #faq-sec dl .line dd span {
	font-size:145%;
	font-weight:bold;
	margin-right:1.5rem;
	margin-left:.1rem;
}
body.index #faq-sec dl .line dd .txt {
	line-height:1.83;
	font-size:.75rem;
}











@media screen and (max-width: 960px) {
	.inner-box { width:95%; max-width:750px; }
	body.index #mv-box .inner-box { width:60rem; }
}

@media screen and (max-width: 750px) {
	html { scroll-padding-top:80px !important; }
	.pc-on { display:none; }
	.sp-on { display:initial; }

	body.open { height:100svh; overflow:hidden; }

	.inner-box { width:86.6%; }

	#header .headernavi-container1 { display:none; }
	#header #hamburger {
		display:block;
		width:40px;
		height:40px;
		cursor:pointer;
		z-index:10000;
		position:fixed;
		right:15px;
		top:5px;
	}
	#header #hamburger .inner_line {
		display:block;
		margin:0 auto;
		width:40px;
		height:1.5px;
		transition:1s;
		background:#fff;
		position:absolute;
		left:0;
	}
	#header #hamburger .inner_line span { transition:all .4s; }
	#header #hamburger #line1 { top:11px; }
	#header #hamburger #line2 { top:19px; }
	#header #hamburger #line3 { top:27px; width:30px; }
	#header #hamburger.open #line1 { transform:translateY(9px) rotate(-45deg); }
	#header #hamburger.open #line2 { transform:translateY(1px) rotate(45deg); }
	#header #hamburger.open #line3 { display:none; }
	#header .head-nav { display:none; }
	#header.open .head-nav { display:block; position:fixed; top:0; left:0; width:100%; background:#38306e; padding:80px 0 50px; text-align:center; }
	#header #site-logo { width:130px; margin-bottom:0; margin-left:15px; }
	#header .inner-box { width:100%; }
	#header.open .head-nav ul { display:block; margin:0; }
	#header.open .head-nav ul li { font-size:15px; margin-bottom:25px; margin-left:0; display:block; }
	#header .head-nav ul li svg { width:12px; height:auto; }

	#footer .foot-logo { width:80px; margin-bottom:35px; }
	#footer ul.foot-nav { display:block; }
	#footer ul.foot-nav li { font-size:15px; margin:0 0 25px; text-align:center; }
	#footer ul.foot-nav li svg { width:12px; vertical-align:baseline; }
	#footer .box2 { flex-wrap:wrap; }
	#footer .box2 small { order:2; width:100%; display:block; margin-bottom:30px; text-align:center; }
	#footer .box2 .sub-nav { order:1; justify-content:center; margin:0 auto 30px; }
	#footer .box2 ul.sub-nav li a { width:30px; height:30px; padding:8px; }
	#footer .box2 ul.sub-nav li a svg { width:14px; height:14px; }

	.breadcrumbs-box { font-size:13px; position:relative; z-index:1; padding:10px 0; }
	.breadcrumbs-box .breadcrumbs { flex-wrap:wrap; }
	.breadcrumbs-box .breadcrumbs > span::after { width:15px; height:15px; }
	.breadcrumbs-box .breadcrumbs > span { margin-bottom:7px; margin-right:5px; }
	.breadcrumbs-box .breadcrumbs span.post { width:13em; }

	body.index #mv-box .inner-box { width:86.6%; display:block; }
	body.index #mv-box .copy { font-size:28px; }
	body.index #mv-box .txt { font-size:15px; }
	body.index #mv-box .btn-box { margin-bottom:40px; }
	body.index #mv-box .btn-box .btn1 { width:60%; }
	body.index #mv-box .btn-box .btn2 { width:calc(40% - 1rem); }
	body.index #mv-box .btn-box .btn1 a { width:100%; font-size:15px; line-height:45px; }
	body.index #mv-box .btn-box .btn2 a { width:100%; font-size:15px; line-height:45px; }
	body.index #mv-box .pic-box { margin:0 auto; width:100%; }

	body.index main .h2-size span { font-size:25px; }
	body.index main .h2-size.line span { display:inline-block; }
	.dflt-link-cont-box { display:block; }
	.dflt-link-cont-box .link-box { width:100%; margin-bottom:10px; }
	.dflt-link-cont-box .link-box .ttl { font-size:17px; }
	.dflt-link-cont-box .link-box .txt { font-size:14px; }
	.dflt-link-cont-box .link-box .btn a { font-size:15px; line-height:35px; }
	.nml-btn a { width:80%; font-size:15px; line-height:35px; }

	body.index #point-sec { padding:30px 0 45px; }
	body.index #point-sec .h2-size::before { width:3.75rem; height:7.125rem; }
	body.index #point-sec ol { display:block; }
	body.index #point-sec ol > li { width:100%; margin-bottom:15px; padding:20px 30px; }
	body.index #point-sec ol > li .num .waku { font-size:15px; }
	body.index #point-sec ol > li h3 { font-size:23px; margin:13px 0; }
	body.index #point-sec ol > li .copy { font-size:17px; margin-bottom:10px; }
	body.index #point-sec ol > li li { font-size:14px; }

	body.index #usecase-sec { padding-top:50px; }

	body.index #why-sec { padding:50px 0 0; }
	body.index #why-sec > .flex-box { display:block; }
	body.index #why-sec .illust { position:initial; width:100%; margin-top:30px; }
	body.index #why-sec .txt-box { width:100%; margin-left:auto; }
	body.index #why-sec .txt-box .txt { font-size:15px; }

	body.index #commitment-sec { margin-bottom:40px; }
	body.index #commitment-sec ul { display:block; }
	body.index #commitment-sec ul li { width:100%; margin-bottom:15px; padding:20px 30px; }
	body.index #commitment-sec li .icon { width:50px; }
	body.index #commitment-sec li h3 { font-size:17px; margin:15px 0; }
	body.index #commitment-sec li .txt { font-size:14px; }

	body.index #function-sec { margin-bottom:40px; }
	body.index #function-sec ul li { width:100%; padding:20px 0; margin-bottom:10px; }
	body.index #function-sec ul li .name { font-size:17px; }

	body.index #linkage-sec .txt { font-size:14px; text-align:left; }

	body.index #case-sec ul { display:block; }
	body.index #case-sec ul li { width:100%; margin-bottom:15px; }
	body.index #case-sec ul li h3 { font-size:17px; }
	body.index #case-sec ul li .txt { font-size:14px; line-height:1.6; }
	body.index #case-sec ul li .link-txt a { font-size:14px; line-height:1.6; }

	body.index #faq-sec dl .line { padding:20px; }
	body.index #faq-sec dl .line dt { font-size:16px; line-height:1.4; padding-right:20px; }
	body.index #faq-sec dl .line dt::before { font-size:16px; }
	body.index #faq-sec dl .line dd .box { font-size:14px; }
	body.index #faq-sec dl .line dd .txt { font-size:14px; line-height:1.6; }
}