@charset "UTF-8";
/* CSS Document */

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
body { 
	font-size:13px;
	line-height:1.5;
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 0.1em;
	font-weight: 300;
	color: #0C0C0C;
	margin: 0;
}

li{ list-style:none;}
/**img{ max-width:100%; height:auto;}**/

a {text-decoration:none; transition:0.2s;}
a:hover { opacity:0.5;}
.clearfix { clear: both;}
.mr0 { margin-right: 0px;}
.blue { color: #0938AB;}
.opa1:hover { opacity: 1;}


body { background-color: #F8F9FD;}

header {   position: fixed;  top: 0;  left: 0;  width: 100%;  height: 90px;
 	background-color: rgba(248, 249, 253, 0.8);
	z-index: 1000; /* コンテンツより前面に出す */box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 影（お好み） */}
header #hd_inner { width: 1200px; height: 90px; margin: 0 auto;}
header #hd_inner h1 { float: left; }
header #hd_inner ul { float: right; margin-top: 50px; }
header #hd_inner li { font-size: 16px; font-weight: 600; float: left; margin-left: 30px;}
header #hd_inner h1 img{ width: 225px;}

.hd_btn { display: inline-block; margin-top: -30px; padding: 16px 28px;
  border: none;  border-radius: 9999px; /* 丸みを調整：12pxでもOK */  background-color: #fff; /* 青色 */  color: #0938AB;
  font-size: 18px;  font-weight: 600;  cursor: pointer;
  box-shadow: 0 6px 20px rgba(9, 56, 171, 0.5), 0 2px 6px rgba(9, 56, 171, 0.5);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.hd_btn:hover {opacity: 1;  background-color: #0938AB; color: #fff; transform: translateY(-5px) ;}

#top { width: 1171px; height: 1717px; margin: 100px auto;
	background-image: url("../img/01_top.png"); background-size: 1171px auto; background-repeat: no-repeat; background-position: center;}
#top #trial_btn { position: absolute; top: 550px; left: 830px; width: 534px; height: auto;}
#top #trial_btn img { width: 534px; height: auto;}
#problem h2 { width: 100%; height: auto; align-items: center;}
#problem h2 img { width: 100%;}

#problem { width: 100%; height: 975px; margin: 100px auto;
	background-image: url("../img/02_problem.png"); background-size: 1177px auto; background-repeat: no-repeat; background-position: center 160px;}
#about { width: 1225px; height: 1821px; margin: 100px auto;
	background-image: url("../img/03_about.png"); background-size: 1225px auto; background-repeat: no-repeat; background-position: center;}
#plan { width: 1243px; height: 1404px; margin: 200px auto;
	background-image: url("../img/04_plan.png"); background-size: 1243px auto; background-repeat: no-repeat; background-position: center;}
#qa { width: 1189px; height: 825px; margin: 100px auto;
	background-image: url("../img/05_qa.png"); background-size: 1189px auto; background-repeat: no-repeat; background-position: center;}
#cv h2 { width: 100%; height: auto; align-items: center;}
#cv h2 img { width: 100%;}
#cv { width: 100%; height: auto; margin: 200px auto 120px;}
#cv .box { width: 1170px; height: 506px; margin: 0 auto;
	background-image: url("../img/06_cv.png"); background-size: 1170px auto; background-repeat: no-repeat; background-position: center 0;}
#cv p {width: 668px; margin: 0 auto; padding-top: 250px;}
#cv p img { width: 668px; height: auto;}

#sp_cv1 { display: none;}
#sp_cv2 { display: none;}
#sp_cv3 { display: none;}
#sp_footer { display: none;}

footer { width: 100%; height: 160px; background-color: #0938AB;}
footer p { text-align: center; padding-top: 10px; letter-spacing: 0.2em;}
footer p a {color: #fff; font-weight: 400; text-decoration: underline;}

#contact { width: 1200px; height: auto; margin: 100px auto;}
#contact h2 { padding: 50px 0;}
#contact h2 img { width: 449px;}
#contact h3 {font-size: 32px; text-align: center;}
#contact h4 {font-size: 20px; font-weight: 400; line-height: 180%; letter-spacing: 0.2em; text-align: center; margin-bottom: 50px;}

#company { width: 1200px; height: auto; margin: 100px auto;}
#company h2 { padding: 50px 0;}
#company h2 img { width: 465px;}
#company table { margin-bottom: 100px; margin-left: 100px;}
#company th { width: 150px; font-weight: 300; padding: 10px; border-bottom: 1px solid #C6C6C6;}
#company td { width: auto; font-weight: 300; padding: 10px 50px 10px 25px; border-bottom: 1px solid #C6C6C6; border-left: 1px solid #c6c6c6;}
#company h3 { font-size: 20px; margin-left: 100px;}
#company p { width: 800px; margin-bottom: 100px; margin-left: 100px;}

#case { width: 100%; }
#case h2 { font-size: 30px; letter-spacing: 0.2em; text-align: center; margin-bottom: 50px;}
#case .caselist { width: 1210px; margin: 0 auto 100px;}
#case .caselist li { display: inline-block; float: left; width: 400px; height: 200px; margin-right: 3px;}
#case .caselist p { margin-top: -2px; font-size: 10px; color: #9B9B9B; margin-bottom: 5px;}
#case .video-wrap {
  position: relative;
  max-width: 100%;
aspect-ratio: 21 / 9;
  overflow: hidden;
}

#case .video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#trial { width: 1200px; height: 3539px; margin: 50px auto; background-image: url("../img/trial_pc.png"); background-size: 1198px auto; background-repeat: no-repeat;
	background-position: center 100px; }
#trial p { padding-top: 3260px; text-align: center;}
#trial p img { width: 569px; height: auto;}


@media screen and (max-width: 599px) {
	
	html, body, main {
	  height: 100%;
		width: 100%;
	  margin: 0;
	}
	
	header {   position: fixed;  top: 0;  left: 0;  width: 100%;  height: 8%; 	background-color: rgba(248, 249, 253, 0.5);
	z-index: 1000; /* コンテンツより前面に出す */box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 影（お好み） */}
	header #hd_inner { width: 100%; height: 100%; margin: 0 auto; position: relative;}
	header #hd_inner h1 { float: left; width: 30%; margin-top: 2%;}
	header #hd_inner ul { width: 40%; float: right; margin-top: 10%; margin-right: 5%; text-align: center;}
	header #hd_inner li { font-size: 1.2em; font-weight: 600; float: left; margin-left: 0; letter-spacing: 0;}
	header #hd_inner h1 img{ width: 100%; margin-left: 5%;}
	header #hd_inner .blue { display: none;}

	.hd_btn { display: inline-block; position: relative; width: 100%; padding: 4% 2%; letter-spacing: 0;
	  border: none;  border-radius: 9999px; /* 丸みを調整：12pxでもOK */  background-color: #fff; /* 青色 */  color: #0938AB;
	  font-size: 1.2em;  font-weight: 600;  cursor: pointer;
	  box-shadow: 0 6px 20px rgba(9, 56, 171, 0.5), 0 2px 6px rgba(9, 56, 171, 0.5);
	  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	}
	.hd_btn:hover {opacity: 1;  background-color: #0938AB; color: #fff; transform: translateY(0) ;}

	#top { width: 100%; height: 140%; margin: 0 auto 10%;
		background-image: url("../img/01_top_sp.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}
	#top #trial_btn { position: absolute; top: 19%; left: 48%; width: 100%; height: auto;}
	#top #trial_btn img { width: 50%; height: auto;}
	#problem h2 { display: none;}
	#problem h2 img { display: none;}

	#problem { width: 100%; height: 60%; margin: 10% auto 0;
		background-image: url("../img/02_problem_sp.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}
	#about { width: 98%; height: 175%; margin: 0 auto;
		background-image: url("../img/03_about_sp.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}
	#plan { width: 100%; height: 210%; margin: 5% auto;
		background-image: url("../img/04_plan_sp.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}
	#qa { width: 96%; height: 130%; margin: 10% auto;
		background-image: url("../img/05_qa_sp.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}
	#cv h2 { display: none;}
	#cv h2 img { display: none;}
	#cv { width: 100%; height: 54%; margin: 0 auto 10%;}
	#cv .box { width: 100%; height: 100%; margin: 0 auto;
		background-image: url("../img/06_cv_sp.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: top;}
	#cv p {width: 90%; margin: 0 auto; padding-top: 3%;}
	#cv p img { width: 100%; height: auto;}
	
	#sp_cv1 { display: block; text-align: center; padding-top: 20%; font-size: 1.2em; font-weight: 600; letter-spacing: 0;}
	#sp_cv2 { display: block; text-align: center; padding-top: 2%; font-size: 1em; font-weight: 600; letter-spacing: 0; color: #0938AB;}
	#sp_cv3 { display: block; text-align: left; padding: 4% 8%; font-size: 1em; font-weight: 600; letter-spacing: 0; color: #0938AB;}
	#sp_footer { display: block; width: 100%; height: 20%; background-color: #0938AB;}
	#sp_footer p { text-align: center; padding-top: 10px; letter-spacing: 0.2em; font-size: 0.8em;}
	#sp_footer p a {color: #fff; font-weight: 400; text-decoration: underline;}

	

	footer { display: none; width: 100%; height: 10%; background-color: #0938AB; font-size: 0.8em;}

	#contact { width: 100%; height: auto; margin: 10% auto;}
	#contact h2 { padding: 10% 2%;}
	#contact h2 img { width: 50%;}
	#contact h3 {font-size: 1.5em; text-align: center;}
	#contact h4 {font-size: 1em; font-weight: 400; line-height: 180%; letter-spacing: 0em; text-align: center; margin-bottom: 5%;}
	#contact #form { width: 98%; height: auto;}
	
	#company { width: 100%; height: auto; margin: 10% auto; font-size: 0.8em;}
	#company h2 { padding: 10% 2%;}
	#company h2 img { width: 50%;}
	#company table { margin-bottom: 10%; margin-left: 2%;}
	#company th { width: 20%; font-weight: 300; padding: 2% 1%; border-bottom: 1px solid #C6C6C6;}
	#company td { width: auto; font-weight: 300; padding: 2% 10% 2% 5%; border-bottom: 1px solid #C6C6C6; border-left: 1px solid #c6c6c6;}
	#company h3 { font-size: 1.4em; margin-left: 2%;}
	#company p { width: 90%; margin-bottom: 10%; margin-left: 5%;}
	
	
	#case { width: 100%; margin: 0; }
	#case h2 { font-size: 1.5em; letter-spacing: 0; text-align: center; margin-bottom: 5%;}
	#case .caselist { width: 100%; margin: 0 auto 10% -10%;}
	#case .caselist li { display: inline-block; float: left; width: 99%; height: auto; margin-right: 0.5%;}
	#case .caselist p { margin-top: -0.5%; font-size: 0.7em; letter-spacing: 0; color: #9B9B9B; margin-bottom: 2%;}

	#trial { width: 100%; height: 380%; margin: 12% auto 0;
		background-image: url("../img/trial_sp.png"); background-size: 96% auto; background-repeat: no-repeat; background-position: top;}
	#trial p { padding-top: 550%; text-align: center;}
	#trial p img { width: 70%; height: auto;}
}