@charset "utf-8";
/* common--------------------------
------------------------------------------------*/
#xauto{
	 background-image: linear-gradient(90deg, rgba(249, 247, 242, 1), rgba(244, 246, 249, 1));
}
#xauto .mel25-contents-width__1400 { max-width: 100%;}
.unified-footer .mel25-Unified-Footer_GoTop__layout,
.unified-simple-footer .mel25-Unified-Footer_GoTop__layout{
	max-width: initial;
}
/* --------------------------------------------

汎用の設定

------------------------------------------------*/
#page__xauto *{box-sizing: border-box;}
#page__xauto li {
    color: #2F4661;
    font-size: 1rem;
}
#page__xauto .button.cmp-button--text-black .cmp-button__text{
	color: #2F4661;
}



/* ボタン--------------------------
------------------------------------------------*/
#page__xauto .button .cmp-button{	transition: 0.3s all;}
/* 背景ネイビー */
#page__xauto .button.cmp-button--bg-black .cmp-button{	background: #2F4661;
border: 2px solid #2F4661;
transition: 0.3s all;}
#page__xauto .button.cmp-button--bg-black .cmp-button .cmp-button__text{	font-weight: 600;}
#page__xauto .button.cmp-button--bg-black .cmp-button:hover{	background: #fff;}
#page__xauto .button.cmp-button--bg-black .cmp-button:hover .cmp-button__text{	color: #2F4661;}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black .cmp-button{		border: 2px solid #2F4661;}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black .cmp-button:hover{	background: #2F4661;}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black .cmp-button .cmp-button__text{
	font-weight: 600;
	color: #2F4661;
}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black .cmp-button:hover .cmp-button__text{	color: #fff;}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black #page__xauto .cmp-button .cmp-button__text{color: #2F4661; font-weight: 600;}
/*  */
#page__xauto .cmp-container .cmp-button--underline .cmp-button{		border-bottom: 2px solid #2F4661;}
#page__xauto .cmp-container .cmp-button--underline .cmp-button .cmp-button__text{
	color: #2F4661;
	font-weight: 600;
}

/*hover*/
#page__xauto .button.cmp-button--text-white.cmp-button--bg-black.cmp-button--border-black  .cmp-button:hover{
	background: #4E6279;
	border-color: #4E6279;
}
#page__xauto .button.cmp-button--text-white.cmp-button--bg-black.cmp-button--border-black  .cmp-button:hover .cmp-button__text{
	color: #fff;
}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black  .cmp-button:hover{
	background: rgba(47,70,97,0.1);
}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black  .cmp-button:hover .cmp-button__text{
	color: #2F4661;
}#page__xauto .button.cmp-button--text-white.cmp-button--bg-black.cmp-button--border-black  .cmp-button:hover{
	background: #4E6279;
	border-color: #4E6279;
}
#page__xauto .button.cmp-button--text-white.cmp-button--bg-black.cmp-button--border-black  .cmp-button:hover .cmp-button__text{
	color: #fff;
}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black  .cmp-button:hover{
	background: rgba(47,70,97,0.1);
}
#page__xauto .button.cmp-button--text-black.cmp-button--border-black  .cmp-button:hover .cmp-button__text{
	color: #2F4661;
}

#page__xauto .cmp-container .cmp-button--link-arrow-prev .cmp-button:after { background: url("../img/LinkPrev-B.svg") no-repeat 50% / contain;}
/* 枠→ボタン */
#page__xauto .button.cmp-button--text-black.cmp-button--border-black.cmp-button--icon-arrow .cmp-button__text{
	font-weight: 600;
	
}
/* <___ボタン */
#page__xauto .button.cmp-button--underline.cmp-button--link-arrow-prev .cmp-button:hover{
	 opacity: 0.65;
}







/* ＞ボタン */
#page__xauto .button.cmp-button--link-arrow-next .cmp-button__text{
	color: #2F4661;
	font-weight: 600;
}
#page__xauto .cmp-container .cmp-button--link-arrow-next .cmp-button:after {
	background: url("../img/LinkNext-B.svg") no-repeat 50% / contain;
	content: "";
	display: block;
	height: 26px;
	-webkit-transform: translateY(1px);
	transform: translateY(1px);
	width: 26px;
}

#page__xauto .button.cmp-button--link-arrow-next .cmp-button:hover{ opacity: 0.65;}
/* 外部リンク */
#page__xauto .cmp-container .cmp-button[target=_blank]:after{
	background: url("../img/External-B.svg") no-repeat 50% / contain;
	content: "";
	display: block;
	height: 26px;
	transform: translateY(1px);
	width: 26px;
}




/*ページタイトル */
.pagetitle .gs21-PageTitleUnit__TitleCol .gs21-PageTitle{	font-weight: 500;}


/*タイトル */
#page__xauto .cmp-title__text{	color: #2F4661;}
#page__xauto .text.cmp-text--under-line p {
	text-decoration: none;
	color: #B5B091;
	font-weight: 600;
	margin-top: 0;
}
#page__xauto h2.cmp-title__text{	font-size: 2rem;	font-weight: 500;}
#page__xauto h3.cmp-title__text {    font-weight: 500;font-size: 1.8rem;}

/* テキスト */
#page__xauto .text p{
	color: #2F4661;
	line-height: 1.8rem;
}
#page__xauto .text ul li{
	color: #2F4661;
	font-size: 1rem;
}

/* pagetitle__no-image */
.pagetitle__no-image{
	background: #2F4661;
	color: #fff;
}


/* 画像 */
#page__xauto .cmp-container div.image{	margin-top: 0;}



/* --------------------------------------------

TOP

------------------------------------------------*/

/* mv--------------------------
------------------------------------------------*/
#mv{
	background: url("../img/mv__back.png") top center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	max-width: 2000px;
	margin: 0 auto;
}
#mv::before{
	content: "";
	padding-top: 56.25%;
	display: block;
}
#mv .image {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 50%;
}
#mv .title {text-indent: -9999px;}


/* about-top--------------------------
------------------------------------------------*/
#about-top {
    margin-bottom: 130px;
    gap: 80px;
}
#about-top .image {
    width: calc(40% - 40px);
}
#about-top .container {
    width: calc(60% - 40px);
}
#about-top .container.cmp-container--2col{
	width: 100%;
}

#about-top .button.cmp-button--icon-arrow .cmp-button:after{
	background: url("../img/ArrowNext-B.svg") no-repeat 50% / contain;
}
#about-top .button.cmp-button--icon-arrow .cmp-button:hover:after{
	background: url("../img/ArrowNext-B.svg") no-repeat 50% / contain;
}






#about-top__button .button {
	width: auto;
}
/* value */
#value {
		gap: 60px;
	}
	#value > div{
		width: calc(50% - 30px);
	}
#value div:nth-of-type(1){order: 1;	}
#value div:nth-of-type(2){order: 2;	}
#value div:nth-of-type(3){order: 4;	}
#value div:nth-of-type(4){order: 3;	}
#value div:nth-of-type(5){order: 5;	}
#value div:nth-of-type(6){order: 6;	}


/* コンテンツ幅 TOP--------------------------
------------------------------------------------*/
.gs21-MainContents:not(:has(.gs21-PageTitleUnit)) {		padding-top: 0px!important;}
.gs21-MainContents {
    padding: 0;
    max-width: 100%;
}
#back-gradation__inner,
#back-navy__inner,
#back-gradation02__inner,
#back-white__inner,
#back-gradation03__inner{
	max-width: 1380px;
	width: 90%;
	margin: 0 auto;
	padding: 120px 0;
}







/* --------------------------------------------

コンテンツ幅 2nd

------------------------------------------------*/
#back-wide__inner,
#back-system__inner,
#back-utilization__inner{
	max-width: 1380px;
	width: 90%;
	margin: 0 auto;
	padding: 80px 0;
}
#back-utilization__inner{
	padding: 0;
}
#back-narrow__inner{
	max-width: 900px;
	width: 90%;
	margin: 0 auto;
	padding: 80px 0;
}

/* contact--------------------------
------------------------------------------------*/
#contact,
#use-case{
	margin: 30px auto 100px auto;
	background: url("../img/contact.jpg") center center no-repeat;
	background-size: cover;
	max-width: 1380px;
	width: 100%;
	padding: 100px 30px;
	text-align: center;
	border-radius: 50px;
}
#use-case{
	background: url("../img/case-study.jpg") center center no-repeat;
	background-size: cover;
}
#contact .title .cmp-title__text,
#use-case .title .cmp-title__text{
	color: #fff;
}
#back-narrow__inner #contact{
    margin: 30px auto 0 auto;
}
#back-utilization__inner #contact {
    margin: 80px auto 0 auto;
}
#contact-area {    margin-top: 100px;}
#contact-area .title{
	text-align: center;
}

#contact .button.cmp-button--text-white.cmp-button--border-white.cmp-button--icon-arrow-w .cmp-button:after,
#use-case .button.cmp-button--text-white.cmp-button--border-white.cmp-button--icon-arrow-w .cmp-button:after{
    background: url(../img/ArrowNext-W.svg) no-repeat 50% / contain;
    content: "";
    display: block;
    height: 25px;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    width: 35px;
}
#contact .button.cmp-button--text-white.cmp-button--border-white.cmp-button--icon-arrow-w .cmp-button:hover,
#use-case .button.cmp-button--text-white.cmp-button--border-white.cmp-button--icon-arrow-w .cmp-button:hover{
	background: rgba(255,255,255,0.1);
	border-color: #fff;
}
#contact .button.cmp-button--text-white.cmp-button--border-white.cmp-button--icon-arrow-w .cmp-button:hover .cmp-button__text,
#use-case .button.cmp-button--text-white.cmp-button--border-white.cmp-button--icon-arrow-w .cmp-button:hover .cmp-button__text{
	color: #fff;
}



/* back-gradation --------------------------
------------------------------------------------*/
#back-gradation__inner{
	padding: 0 0 120px 0;
}


/* back-navy--------------------------
------------------------------------------------*/
#back-navy{	background-image: linear-gradient(90deg, rgba(28, 51, 77, 1), rgba(15, 55, 99, 1));	color: #fff;}
/*ボタン */
#page__xauto #back-navy .button.cmp-button--bg-black .cmp-button{	background: #ffffff;}
/*タイトル */
#page__xauto #back-navy .cmp-title__text{	color: #ffffff;}
/* テキスト */
#page__xauto #back-navy .text:not(.cmp-text--under-line) p{	color: #ffffff;}
#back-navy .cmp-text ul li{	color: #ffffff;}


#back-navy .cmp-container--2col .image{
	position: relative;
}
#back-navy .cmp-container--2col .image .cmp-image__title{
	position: absolute;
}

/* #back-gradation02--------------------------
------------------------------------------------*/
#back-gradation02 .gs21-TileItem{
	flex-direction: column;
}






/* back-white--------------------------
------------------------------------------------*/
#back-white{	background: rgba(255,255,255,0.5);}
#back-white .container {margin-top: 0;}
#back-white__inner{
	position: relative;
	padding-bottom: 200px;
}
#back-white__inner .image {
    position: absolute;
    width: 50%;
    top: -100px;
    right: 0;
}
#back-white__inner #back-white__text-area{
	width: 50%;
}

/* #back-gradation03--------------------------
------------------------------------------------*/
/* en */
html:lang(en) #back-gradation03__inner{
	padding: 120px 0 30px 0;
}
html:lang(en) #back-gradation03__inner #contact{
	margin: 30px auto 30px auto;
}

#back-gradation03 .cmp-container--3col{
	margin-bottom: 100px;
}

#back-gradation03 .cmp-container--3col .title h3.cmp-title__text{
	font-weight: 600;
	margin-top: 20px;
	font-size: 1rem;
}

#back-gradation03 .cmp-container--3col .text.cmp-text--strong p,
#back-narrow__inner .title + .text.cmp-text--strong p{
	font-size: 0.8rem;
	border: 1px solid #2F4661;
	display: inline-block;
	margin: 0;
	padding: 4px 5px 2px 5px;
	line-height: 1;
	font-weight: 600;
}


/* embed */
.embed {
	max-width: 900px;
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 100px auto 0 auto;
}
.embed::before{
	content: "";
	padding-top: 56.25%;
	display: block;
}
.embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* faq */
#faq{	margin: 0 auto 100px auto;}
#faq .title{	margin-bottom: 50px;}
#faq .cmp-accordion__title {
	color: #2F4661;
	text-indent: -2.1em;
	margin-left: 2.1em;
}
#faq .cmp-accordion__panel {
    padding: 0 30px 35px;
    border-top: 1px solid #DBDBDB;
}

/* contact */



/* #service01--------------------------
------------------------------------------------*/
#service01{
	max-width: 880px;
	display: block;
	margin: 0 auto;
}



/* #back-system--------------------------
------------------------------------------------*/
#back-system{	background: rgba(255,255,255,0.5);}

#back-system .title{
	text-align: center;
	margin-bottom: 100px;
}
#system01 {
	max-width: 670px;
	display: block;
	margin: 0 auto 130px auto;
}
#back-system .tile .gs21-CUS-Tile{
	gap: 30px;
}
#back-system .tile .gs21-CUS-Tile .gs21-u-Size1of3 {
    flex: none;
    width: calc(33.333% - 20px);
    margin-bottom: 30px;
}
#back-system .tile .gs21-TileItem__Media{
	order: 2;
}
#back-system .tile .gs21-TileItem__Head{
	order: 1;
	padding: 0;
}
#back-system .tile .gs21-TileItem__Head h3{
	color: #BFB0A3;
	font-weight: 600;
	font-size: 1.1rem;
	text-align: left;
}
#back-system .tile .gs21-TileItem__Body{
	order: 3;
	padding: 20px 0 0 0;
}
#back-system .tile .gs21-TileItem__Body p{color: #2F4661;font-weight: 400;}


/* #back-utilization--------------------------
------------------------------------------------*/
#back-utilization .title h2{
	text-align: center;
}
#utilization__image{
	margin-bottom: 100px;
}
#utilization__image .title h3{
	font-size: 1.6rem;
}

/* #strengths--------------------------
------------------------------------------------*/
#strengths .title h2 {
	margin: 0 0 80px 0;
}
#strengths .title h3{
	font-size: 1.6rem;
}

#strengths .cmp-container--2col{
	margin-bottom: 80px;
}

/* #use-image--------------------------
------------------------------------------------*/
#use-image{
	margin-top: 100px;
}
#use-image .title{text-align: center;}
#use-image .tile .gs21-CUS-Tile {	gap: 30px;}
#use-image .tile .gs21-CUS-Tile .gs21-u-Size1of4 {	width: calc(25% - 23px);	flex: none;}
#use-image .tile .gs21-TileItem__Head{
	padding: 0;
}
#use-image .tile .gs21-TileItem__Head h3{
	margin-bottom: 10px;
	color: #2F4661;
	font-weight: 500;
	margin-top: 20px;
}
#use-image .tile .gs21-TileItem__Media{
}
#use-image .tile .gs21-TileItem__Body{
	padding: 0;
}
#use-image .tile .gs21-TileItem__Body .gs21-Text{	color: #2F4661; line-height: 1.8rem;font-weight: 300;}

/* #example--------------------------
------------------------------------------------*/
#back-example__inner .cmp-container--2col{
	margin-top: 0;
}
#example__2col {
  background: #fff;
	justify-content: space-between;
}
#example__2col > * {
    max-width: 1380px;
}

#example__2col > .container{
	align-self: center;
}
#example__2col > *:nth-child(1){	order: 1;}
#example__2col > *:nth-child(2){	order: 2;padding: 0 10% 0 0;}
#example__2col > *:nth-child(3){	order: 4;}
#example__2col > *:nth-child(4){	order: 3;padding: 0 0 0 10%;}
#example__2col > *:nth-child(5){	order: 5;}
#example__2col > *:nth-child(6){	order: 6;padding: 0 10% 0 0;}
#example__2col > *:nth-child(7){	order: 8;}
#example__2col > *:nth-child(8){	order: 7;padding: 0 0 0 10%;}


#example__2col > .container .image .cmp-image__image {
	max-width: 84px;
	padding: 0 0 20px 0;
	max-height: 84px;
}

#strengths .cmp-container--3col{
	margin-bottom: 80px;
}


/* #flow--------------------------
------------------------------------------------*/
#flow {
    padding: 30px 0 0 0;
}
#flow .title h2 {
    margin: 0;
}
#flow > .title:not(.u-mt-100) {
    padding: 0 0 50px 0;
}
#flow__2col {    margin-bottom: 0;}
#flow__2col > .container:nth-of-type(1) {
	width: calc(33% - 15px);
}
#flow__2col > .container:nth-of-type(2) {
	width: calc(67% - 15px);
	margin-top: 0;
}
#flow__image .image .cmp-image__image{
	border-radius: 20px;
	margin-bottom: 50px;
}
#flow__right > .image{
	width: calc(15% - 15px);
	align-self: center;
	margin-bottom: 30px;
}
#flow__right > .image .cmp-image__image{
	padding: 0 20px;
}
#flow__right > .container{
	width: calc(85% - 15px);
	margin-bottom: 30px;
}

#flow__right > .container .title .cmp-title__text {
	font-size: 1.2rem;
}
#flow__right > .container .text p{
	margin-top: 0
}
#flow > .container > .text {
    margin-bottom: 100px;
}












@media screen and (max-width: 1440px) {
}/*1440px*/

/*ページタイトルカスタマイズ*/
@media screen and (max-width: 980px) {


#page__xauto h2.cmp-title__text { font-size: 1.3rem;}
#page__xauto h3.cmp-title__text {
    font-size: 1.1rem;
}

/* コンテンツ幅 980px--------------------------
------------------------------------------------*/
#back-gradation__inner, 
#back-navy__inner,
#back-gradation02__inner,
#back-white__inner,
#back-gradation03__inner,
#back-narrow__inner,
#back-system__inner,
#back-utilization__inner{
    padding: 80px 0 80px 0;
}
#back-utilization__inner{
    padding: 0;
}
	
	
	
/* back-navy 980px--------------------------
------------------------------------------------*/	
#back-navy .cmp-text ul li {
    font-size: 1rem;
}
	
/* back-white 980px--------------------------
------------------------------------------------*/
#back-white__inner #back-white__text-area {
    width: 100%;
}
#back-white__inner .image {
	position: static;
	width: calc(50% - 15px);
	display: block;
	margin: auto;
}

/* gradation03 980px--------------------------
------------------------------------------------*/
#faq .cmp-accordion__title {
	font-size: 1rem;
}

	
}/*980px*/

@media screen and (max-width: 767px) {

	
/* mv 767px--------------------------
------------------------------------------------*/	
.pagetitle .gs21-PageTitleUnit .gs21-PageTitleUnit__Inner .gs21-PageTitleUnit__BgImage__Picture { overflow: hidden; width: 100%;}
.pagetitle .gs21-PageTitleUnit .gs21-PageTitleUnit__Inner .gs21-PageTitleUnit__BgImage__Picture img {height: 100%;}


/* mv 767px--------------------------
------------------------------------------------*/
#mv {
	overflow: visible;
	background-position: 110% 22px;
}
#mv .image {
	top: auto;
	width: 90%;
	bottom: -49%;
}
#mv .image img {
	max-height: 100px;
	width: auto;
}
	
/* back-gradation 767px--------------------------
------------------------------------------------*/
#about-top {
    margin-bottom: 50px;
}
#about-top .container {
	width: 100%;
}
#about-top .image {
	order: 2;
	width: 100%;
}
#about-top .image .cmp-image__image{
		width: 70%;
		margin: auto;
		display: block;
}
#about-top__button {
    gap: 10px;
}
/* value */
	#value > div{
		width: 100%;
	}
#value div:nth-of-type(1){order: 2;	}
#value div:nth-of-type(2){order: 1;	}
#value div:nth-of-type(3){order: 4;	}
#value div:nth-of-type(4){order: 3;	}
#value div:nth-of-type(5){order: 6;	}
#value div:nth-of-type(6){order: 5;	}

#back-white__inner .image {
		width: 80%;
}


	
/* back-gradation03 767px--------------------------
------------------------------------------------*/
html:lang(en) #back-gradation03__inner {
    padding: 80px 0 0px 0;
}
	
	
	
	
	
/* #use-image 767px--------------------------
------------------------------------------------*/
#use-image .tile .gs21-CUS-Tile .gs21-u-Size1of4 {	width: 100%;}

	
/* #example 767px--------------------------
------------------------------------------------*/
#back-example__inner{
	width: 100%;
	margin: auto
}
#example__2col {
	padding: 80px 5% 80px 5%;
}
	
#example__2col > *:nth-child(1){	order: 2;}
#example__2col > *:nth-child(2){	order: 1;padding: 0 0 0 0;}
#example__2col > *:nth-child(3){	order: 4;}
#example__2col > *:nth-child(4){	order: 3;padding: 0 0 0 0;}
#example__2col > *:nth-child(5){	order: 6;}
#example__2col > *:nth-child(6){	order: 5;padding: 0 0 0 0;}
#example__2col > *:nth-child(7){	order: 8;}
#example__2col > *:nth-child(8){	order: 7;padding: 0 0 0 0;}
#example__2col > .container .image .cmp-image__image {
	max-width: 60px;
	max-height: 60px;
}


/* system01 767px--------------------------
------------------------------------------------*/
#system01 {
    margin: 0 auto 0 auto;
}

/* back-system 767px--------------------------
------------------------------------------------*/
#back-system .tile .gs21-CUS-Tile .gs21-u-Size1of3 {    width: 100%;}
#back-system .title {    margin-bottom: 50px;}



/* strengths 767px--------------------------
------------------------------------------------*/
#strengths .title {
    margin-bottom: 50px;
}

/* flow__2col 767px--------------------------
------------------------------------------------*/
#flow {padding:  0;}
#flow > .title:not(.u-mt-100) {	padding: 0 0 30px 0;}
	#flow__2col{
		margin-bottom: 30px;
		flex-direction: column-reverse;
	}
#flow__2col > .container:nth-of-type(1),
#flow__2col > .container:nth-of-type(2){
	width: 100%;
}
#flow__right {
    flex-direction: row;
}

#flow__right > .image .cmp-image__image {
    width: 50px;
    height: auto;
	  padding: 0;
}






}/*767px*/




