@charset "utf-8";
/*----------------------------------共通--------------------------------------*/
.gradient-ttl.center{ text-align: center; }
.gradient-ttl-en {display: block; line-height: 1.8; font-family: poppins, sans-serif;font-weight: 500;}
.gradient-ttl-ja { display: inline-block; font-size: 48px; font-weight: 600; background: linear-gradient(94deg,rgba(30, 58, 138, 1) 0%, rgba(71, 187, 168, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: poppins, sans-serif; letter-spacing: 0.05; line-height: 1.5; }

#navlink .link_bt{ margin-right: 5%; }
#navlink h2 span{ display: block; padding: 20px 0 0; font-size: 20px; color: #fff; font-weight: 500;}
#navlink h2{padding: 0 0 10px;}
#navlink h2 span.title{font-weight: 600; font-size: 72px;}

/*----------------------------------#about--------------------------------------*/
#about { padding: 79px 0 111px; }
#about .flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; }

#about .left-content { width: 40%; }

#about .right-content { width: 1060px; margin: 0 auto; }
#about .right-content h4 { font-size: 34px; margin-bottom: 24px; line-height: 1.8; color: #2952A7; border-bottom: 1px solid #2952A7; padding: 0 18px 17px;}
#about .right-content p { line-height: 2.19; padding: 0 18px; font-size: 24px; letter-spacing: 0.05em; }


/*----------------------------------#features--------------------------------------*/
#features{ padding: 0 0 80px; }
#features .features-ttl { font-size: 30px; color: #2952A7; margin: 40px 0 60px;font-family: 'Noto-Sans-JP-Medium'; }

.radious-bg{ background: #f4f8fc; border-radius: 30px; padding: 100px 6%; }
.radious-bg .gradient-ttl{ padding: 0 0 20px; border-bottom: 1px solid #2855B2; }

.flex-list { display: flex; flex-direction: column; gap: 80px; }
.flex-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.flex-list li:nth-child(even) { flex-direction: row-reverse; }

.flex-list .text-content { width: 48%; margin: 40px 0 0; }
.flex-list .text-content .flex-list-ttl { position: relative; z-index: 1; }
.flex-list .text-content .flex-list-ttl .flex-list-title{ font-size: 24px; line-height: 1.5;font-family: 'Noto-Sans-JP-Medium'; }
.flex-list .text-content .flex-list-ttl .flex-list-number { display: block; font-size: 130px; font-weight: 600; color: #DDE4F0; position: absolute; top: -40px; left: 0; z-index: -1; font-family: poppins, sans-serif; line-height: 1; }
.flex-list .text-content p { margin: 60px 0 0; line-height: 2;  }

.flex-list .picture { width: 46%; }
.flex-list .picture img { width: 100%; height: auto; border-radius: 15px; }


/*----------------------------------#point--------------------------------------*/
#point{ padding: 0 0 80px; }

.point{ display: flex; align-items: flex-start; justify-content: space-between; margin: 50px 0 0; }
.point .left-content{ width: 40%; }
.point .left-content h4{ font-size: 30px; line-height: 2; font-family: 'Noto-Sans-JP-Medium';}

.point .right-content{ width: 54%; }
.point .right-content p{ line-height: 2; }


/*----------------------------------.comparison--------------------------------------*/
.comparison{ padding: 0 0 80px; }
.comparison-table { display: grid; grid-template-columns: 25% 40% 35%; border-collapse: collapse; width: 100%; margin: 50px auto 0; }

.col-title { background-color: #e5e8ee; border-radius: 10px 0 0 10px; overflow: hidden; }
.col-elstat { outline: 4px solid #2855B2; outline-offset: -4px; }
.col-other{ border-radius: 0 10px 10px 0; overflow: hidden; }

.cell { display: flex; align-items: center; justify-content: flex-start; height: 80px; padding: 10px 10px 10px 40px; font-size: 18px; line-height: 1.5; }
.cell:last-of-type{ border: none; }
.cell strong{ font-size: 30px; font-weight: 500; }

.head-cell,
.gray-cell{ justify-content: center; height: 90px; padding: 10px; font-weight: bold; text-align: center; font-size: 18px; }
.head-cell { background-color: #2855B2!important; color: #fff!important; }
.gray-cell { background-color: #D4D4D4!important; }
.col-elstat .head-cell { position: relative; }

.col-title .cell{ background-color: #E8EDF6; }
.col-title .cell:nth-of-type(odd){ background-color: #ECF1F7; }

.col-elstat .cell,
.col-other .cell { background-color: #fff; }
.col-elstat .cell:nth-of-type(odd),
.col-other .cell:nth-of-type(odd) { background-color: #F7F9FB; }

.col-elstat .cell{ color: #2855B2; }

.circle{ padding-left: 90px; background: url(../image/icn_circle.svg) 40px center/30px no-repeat; }
.triangle{ padding-left: 90px; background: #000 url(../image/icn_triangle.svg) 40px center/30px no-repeat; }



/*----------------------------------#flow--------------------------------------*/
#flow{ padding: 0 0 80px; }

.arrow-list { display: flex; flex-direction: column; gap: 60px; padding: 80px 0 0; }
.arrow-list li { display: flex; align-items: center; position: relative; }
.arrow-list li::after { content: ''; position: absolute; left: 50%; bottom: -37px; transform: translateX(-50%); width: 50px; height: 20px; background: url('../image/arrow_down.svg') no-repeat center center; background-size: contain; }
.arrow-list li:last-child::after { display: none; }

.arrow-list-num { display: flex; justify-content: space-between; align-items: center; flex-direction: column; width: 20%; min-width: 80px; text-align: center; color: #2952A7; font-weight: bold; }
.arrow-list-num small { font-size: 18px; margin-bottom: 8px; }
.arrow-list-num p { font-size: 48px; font-weight: 500; font-family: poppins, sans-serif; }

.arrow-list-content { display: flex; justify-content: space-between; align-items: flex-start; width: 80%; padding: 40px 50px; background: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05); border-radius: 15px; }

.arrow-list-text { width: 53%; }
.arrow-list-text h4{ margin-bottom: 30px; }
.arrow-list-text h4 .title { font-size: 24px; color: #2952A7; line-height: 1.5;font-family: 'Noto-Sans-JP-Medium'; }
.arrow-list-text h4 .titleterm { padding-left: 30px; font-size: 14px; color: #5F5F5F; }
.arrow-list-text p { line-height: 1.8; }

.arrow-list .picture { width: 40%; }
.arrow-list .picture img { width: 100%; height: auto; border-radius: 8px; }


/*----------------------------------#faq--------------------------------------*/
#faq{ padding: 0 0 80px; }
.faq-list { display: flex; flex-direction: column; gap: 30px; background: #f4f8fc; padding: 60px 0 0; }
.faq { cursor: pointer; background: #fff; border-radius: 40px; padding: 40px 5%; position: relative; }

.faq dt { position: relative; padding-left: 60px; font-size: 24px; color: #0043b5;font-family: 'Noto-Sans-JP-Medium'; }
.faq dt span.clos_btn{position: absolute; top: 50%; transform: translateY(-50%); right: 0px; width: 24px; height: 24px; }
.faq dt span.clos_btn:before{content: ""; display: block; width: 2px; height: 24px; transform: translate(-50%,-50%); top: 50%; left: 50%; background: #0043b5; position: absolute; transition: 0.5s;}
.faq dt.active span.clos_btn:before{transform: translate(-50%,-50%) rotateZ(90deg); transition: 0.5s;}
.faq dt span.clos_btn:after{content: ""; display: block; width: 2px; height: 24px; transform: translate(-50%,-50%) rotateZ(90deg); top: 50%; left: 50%; background: #0043b5;position: absolute; transition: 0.5s;}
.faq  .accordion-content { display: none;}

.faq dd { position: relative; padding-top: 30px; margin: 30px 0 0; border-top: 1px solid #2855B2; }
.faq dd p { position: relative; padding-left: 60px; line-height: 2; }

.faq dt::before,
.faq dd p::before { position: absolute; left: 0; top: 50%; transform: translate(0,-50%); font-size: 48px; font-weight: 600; color: #2952A7; font-family: poppins, sans-serif; line-height: 1; }
.faq dt::before { content: "Q"; }
.faq dd p::before { content: "A"; }


/* FAQの開閉アニメーション（0.5秒） */
.faq-enter-active, .faq-leave-active {
  transition: all 0.5s ease;
  overflow: hidden;
}
.faq-enter, .faq-leave-to {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.faq-enter-to, .faq-leave {
  max-height: 200px; /* 内容に応じて大きめに */
  opacity: 1;
}






@media only screen and (max-width: 768px) {
#navlink .link_bt{ margin-right: 0%; }

/*----------------------------------共通--------------------------------------*/
	#navlink h2 span{ font-size: 12px; }
	#navlink h2{ display: inline-block; padding: 0 0 5px;}
	#navlink h2 span.title{font-size: 40px;}
	
	.gradient-ttl-ja{ font-size: 27px; }
	.gradient-ttl-en{ font-size: 11px; }


/*----------------------------------#about--------------------------------------*/
	#about { padding: 40px 0 50px; }
	#about .flex { flex-direction: column; gap: 15px; }
	#about .left-content { width: 100%; }
	#about .right-content { width: 100%; }
	#about .right-content h4 { font-size: 24px; line-height: 1.6; margin-bottom: 25px; padding: 0 9px 10px;}
	#about .right-content p { font-size: 16px; line-height: 2; padding: 0 9px;}
 

/*----------------------------------#features--------------------------------------*/
	#features { padding: 0 0 30px; }
	#features .features-ttl { font-size: 20px; margin: 30px 0 40px; line-height: 1.5; }

	.radious-bg { padding: 25px 5%; border-radius: 20px; }
	.radious-bg .gradient-ttl { padding: 0 0 15px; line-height: 1.5; }

	.flex-list { gap: 60px; }
	.flex-list li { flex-direction: column !important; gap: 20px; }
	.flex-list .text-content { width: 100%; margin: 0; }
	.flex-list .text-content .flex-list-ttl{ margin: 0 0 30px; }
	.flex-list .text-content .flex-list-ttl .flex-list-title{ font-size: 18px; line-height: 1.5; }
	.flex-list .text-content .flex-list-ttl .flex-list-number { font-size: 64px; top: -12px; }
	.flex-list .text-content p { margin: 15px 0 0; font-size: 12px; line-height: 2; }

	.flex-list .picture { width: 100%; }
	.flex-list .picture img { border-radius: 10px; }


/*----------------------------------#point--------------------------------------*/
	#point { padding: 0 0 30px; }
	
	.point { flex-direction: column; gap: 25px; margin: 30px 0 0; }
	.point .left-content { width: 100%; text-align: center; }
	.point .left-content h4 { font-size: 20px; line-height: 1.6; }
	.point .right-content { width: 100%; }
	.point .right-content p { font-size: 12px; line-height: 2; }
	

/*----------------------------------.comparison--------------------------------------*/
	.comparison{ padding: 0 0 30px; }
	.comparison-table{ margin: 30px auto 0; grid-template-columns: 24% 41% 35%; }
	
	.cell{ height: 70px; justify-content: center; padding: 5px; font-size: 11px; text-align: center; }
	.cell p{ line-height: 1.3; }
	
	.circle,
	.triangle{ padding-top: 27px; }
	.circle{ background: url(../image/icn_circle.svg) center 10px/20px no-repeat; }
	.triangle{ background: #000 url(../image/icn_triangle.svg) center 10px/20px no-repeat; }

	.cell strong{ font-size: 20px; }
	
	.col-elstat{ border-width: 2px; }


/*----------------------------------#flow--------------------------------------*/
	#flow { padding: 0 0 30px; }
	.arrow-list { gap: 50px; padding: 30px 0 0; }
	.arrow-list li { flex-direction: column; align-items: flex-start; gap: 10px; }
	.arrow-list-num { width: 100%; }
	.arrow-list-num small { font-size: 10px; }
	.arrow-list-num p { font-size: 31px; }
	.arrow-list-content { flex-direction: column; padding: 24px 20px; width: 100%; }
	.arrow-list-text { width: 100%; }
	.arrow-list-text h4{ margin-bottom: 15px; }
	.arrow-list-text h4 .title { font-size: 18px; line-height: 1.5; }
	.arrow-list-text h4 .titleterm{ padding-left: 15px; font-size: 11px; }
	.arrow-list-text p { font-size: 12px; line-height: 1.7; }
	.arrow-list .picture { width: 100%; margin-top: 20px; }
	.arrow-list li::after { bottom: -32px; width: 31px; height: 15px; }


/*----------------------------------#faq--------------------------------------*/
	#faq { padding: 0 0 30px; }
	
	.faq-list { padding: 40px 0 0; gap: 20px; }
	.faq { padding: 20px 10px; border-radius: 20px; }
	.faq dt { line-height: 1.5; font-size: 18px; padding: 0 22px 0 40px; }
	.faq dd { padding-top: 20px; margin-top: 20px; }
	.faq dd p { font-size: 14px; padding-left: 40px; line-height: 2; }
	.faq dt::before, .faq dd p::before { font-size: 32px; }

	.faq dt span.clos_btn{width: 18px; height: 18px; }
	.faq dt span.clos_btn:before{width: 2px; height: 18px; }
	.faq dt span.clos_btn:after{ width: 2px; height: 18px; }
}