@charset "utf-8";

html{
	overflow-y: scroll;
}

a {
	text-decoration: none;
	cursor: pointer;
}




/* ------header-------------------------------------------------------------------------------------------------------------------------------------------- */

header {
    background-image: url('../images/mainVisual.webp');
	background-size: cover;
}

.wrapper1 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
}

h1 {
	padding: 40px 3% 0 3%;
	margin-bottom: 30px;
}

.lead {
	padding: 0 5%;
	font-weight: 900;
	color: #26125b;
	text-shadow: 0 0 20px #fff;
}

h2 {
	font-size: 2.8rem;
	line-height: 1.2em;
	margin-bottom: 30px;
}

h2 span {
	background: yellow;
	padding: 1px;
}

.leadRed {
	font-size: 2rem;
	color: #bb2e2e;
	margin-bottom: 0.3em;
}

.leadRed span {
	background: yellow;
	padding: 1px;
}

.leadMini1 {
	margin-bottom: 25px;
}

.lead2 {
	font-size: 2rem;
	line-height: 1.2em;
	padding-top: 20px;
	margin-bottom: 40px;
}

.leadMini2 {
	margin-bottom: 50px;
}

.reportSearch {
	text-align: center;
}

.btn--orange,
a.btn--orange {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 900;
	text-align: center;
	color: #fff;
	background-color: #f7931e;
	padding: 25px 5%;
	border-radius: 15px;
	margin-bottom: 60px;
}
.btn--orange:hover,
a.btn--orange:hover {
	color: #fff;
	background: #f56500;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------merit-------------------------------------------------------------------------------------------------------------------------------------------- */

#merit {
    background-color: #fff;
	background-size: cover;
}

.wrapper2 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
    background-color: #fff;
}

h3 {
	font-size: 2rem;
	color: #0071bc;
	margin: 60px 3% 30px 3%;
	text-align: center;
}

h3 span {
	background: yellow;
}

.flexbox6 {
	display: flex;
	text-align: center;
	margin: 0 3% 60px 3%;
}
.meritContents {
	width: 34%;
	display:inline-block;
	color: #fff;
	background: #0071bc;
	margin: 0 0 0 1%;
	border-radius: 20px;
}

.meritIcon {
	padding-top: 30px;
}

.merittext {
	padding: 20px 7%;
	line-height: 1.5em;
}

.merittext dt {
	font-weight: 900;
	margin-bottom: 20px;
}

.merittext dd {
	text-align: left;
}

.merittext span1 {
	color: #000;
	font-weight: 900;
	background: yellow;
}

.merittext span2 {
	color: #f7931e;
	font-weight: 900;
}


/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------excelSheet-------------------------------------------------------------------------------------------------------------------------------------------- */

#excelSheet {
    background-color: #e6e6e6;
	background-size: cover;
}

.wrapper3 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
}

h4 {
	font-size: 2.3rem;
	color: #0071bc;
	font-weight: 900;
	padding: 60px 0 20px 0;
	text-align: center;
	margin: 0 17% 0 17%;
}

.reportTextCenter {
	text-align: center;
	font-weight: 900;
	color: #0071bc;
	line-height: 1.5em;
	margin: 0 17% 60px 17%;
}

.reportTextCenter span {
	background: yellow;
}

.reportbox {
	display: flex;
	text-align: center;
	margin: 0 17% 20px 17%;
}

.report1 {
	margin-right: 3%;
}

.reportImage1 img {
	width: 100%;
	height: auto;

}

.reportImage2 img {
	width: 100%;
	height: auto;

}



.reportImage1 img {
	cursor: pointer;
  }

  .reportImage1:hover {
	opacity: 0.5 ;
}

.reportImage2 img {
	cursor: pointer;
  }

  .reportImage2:hover {
	opacity: 0.5 ;
}

  #modal-window-image {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	cursor: pointer;
	z-index: 100;
  }
  #modal-window-image img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 60%;
	height: auto;
  }

  #modal-window-image2 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	cursor: pointer;
	z-index: 100;
  }
  #modal-window-image2 img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 90%;
	height: auto;
  }



.reportTitle {
	background:#0071bc;
	color: #fff;
	text-align: center;
	padding: 1.5rem 5% 0.3rem 5%;
	height: 50px;
}

.reportTitle span {
	text-align: center;
	font-size: 0.8rem;
}

.reportbox2 {
	margin: 0 17% 50px 17%;
}

.reportTextLeft {
	color: #0071bc;
	padding-bottom: 20px;	
	line-height: 1.5em;
	margin: 0 17% 0 17%;
}

.flexbox2 {
	display:flex;
	text-align: center;
	margin: 0 15% 0 15%;
}

.reportContents  {
	width: 30%;
	margin: 0 2% 0 2%;
}

.reportContents dt {
	margin-bottom: 20px;
}

.reportContents dd {
	color: #0071bc;
	font-weight: 900;
	margin-bottom: 20px;
	line-height: 1.5em;
}

.reportContents span {
	background: yellow;
}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------4step-------------------------------------------------------------------------------------------------------------------------------------------- */

#step {
    background-color: #0071bc;
	background-size: cover;
}

.wrapper4 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
	padding-bottom: 100px;
}

.megatrendUse {
	text-align: center;
}

h5 {
	display: inline-block;
	font-size: 2.3rem;
	color: #fff;
	font-weight: 900;
	padding: 100px 0 10px 0;
	margin: 0 10% 0 10%;
	border-bottom: 1px solid #fff;
}

.use {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 900;
	margin: 15px 10% 0 10%;
}

.stepContents {
	width: 80%;
	color: #0071bc;
	background: #fff;
	border-radius: 15px;
	margin: 40px 5% 0 5%;
	padding: 40px 5%;
	max-width: 1040px;
}

.stepNomber {
	float: left;
	margin-right: 5%;
}

.stepTitle1 {
	font-size: 2.3rem;
	font-weight: 900;
	padding: 30px 0 0 25%;
	border-bottom: 1px solid #0071bc;
}

.stepBold {
	clear:both;
	font-weight: 900;
	line-height: 1.5em;
	margin: 40px 0 20px 0;
}

.stepImage {
	text-align: center;
	margin: 20px 0 40px 0;
}

.stepImage img {
	width: 60%;
	height: auto;
}

.stepMid {
	margin-bottom: 20px;
}

.stepBullet {
	margin-bottom: 20px;
	font-weight: 900;
	line-height: 1.5em;
}

.stepIcon {
	display: block;
	margin-top: 40px;
	text-align: center;
}

.stepSmall {
	font-size: 0.8rem;
	margin-bottom: 20px;
}

.stepMid2 {
	margin: 40px 0 20px;
}
.stepMid2 span {
	font-weight: 900;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------attention-------------------------------------------------------------------------------------------------------------------------------------------- */

#attention {
    background-color: #e6e6e6;
	background-size: cover;
}

.wrapper5 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
	padding: 0 3% 80px 3%;
}

h6 {
	font-size: 2.3rem;
	color: #0071bc;
	font-weight: 900;
	padding: 100px 0 40px 0;
	text-align: center;
}

.attentionImage {
	text-align: center;
}

.attentionContents {
	display: inline-block;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);;
	margin: 0 0 20px 4%;
}

.attentionContentsPC {
	display: inline-block;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);;
	margin: 0 0 20px 4%;
}

.attentionContentsSP {
	display: none
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------company-------------------------------------------------------------------------------------------------------------------------------------------- */
#company {
    background-image: url('../images/companyImage.webp');
	background-color: #333;
	background-size: cover;
	color: #fff;
}

.wrapper7 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
}

h7 {
	display: block;
	font-size: 2rem;
	padding: 100px 5% 60px 5%;
	font-weight: 900;
	text-align: center;
}

#slide {
	position:relative;
	overflow: hidden;
	height: 200px;
	padding-bottom: 100px;
}

#slide ul {
	position: absolute;
	width: 3000px;
}

#slide li {
	float: left;
	width: 11%;
	list-style-type: none;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------faq-------------------------------------------------------------------------------------------------------------------------------------------- */

#faq {
    background-color: #fff;
	background-size: cover;
	color: #0071bc;
}

.wrapper8 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
	padding-bottom: 70px;
}

h8 {
	display: block;
	font-size: 2.3rem;
	padding: 100px 5% 60px 5%;
	font-weight: 900;
	text-align: center;
	margin: 0 17% 0 17%;
}

.questionContents {
	border-bottom: 1px solid #0071bc;
	margin: 0 17% 25px 17%;
}

.flexbox5 {
	display: flex;
	margin-bottom: 1rem;
}

.question {
	height: 30px;
	width: 30px;
	min-width: 30px;
	border-radius: 50%;
	line-height: 30px;
	text-align: center;
	background: #26125b;
	color: #fff;
	margin-right: 1em;
	font-weight: 900;
}

.qText {
	line-height: 30px;
	font-weight: 900;
}

.answer {
	height: 30px;
	width: 30px;
	min-width: 30px;
	border-radius: 50%;
	line-height: 30px;
	text-align: center;
	background: #c71937;
	color: #fff;
	margin-right: 1em;
	font-weight: 900;
}

.aText1 {
	padding-top: 3px;
	line-height: 1.5rem;
}

.aText2 {
	line-height: 30px;
}

.faqBullet {
	margin: -10px 0 15px 0;
	padding-left: 50px;
	font-weight: 900;
	line-height: 1.5em;
}

.faqSmall {
	font-size: 0.8rem;
	padding-left: 50px;
	margin-bottom: 1rem;
}

.questionContents2 {
	margin: 0 17% 0px 17%;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------contact-------------------------------------------------------------------------------------------------------------------------------------------- */

#contact {
    background-color: #0071bc;
	background-size: cover;
	color: #fff;
}

.wrapper9 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
	padding-bottom: 100px;
}

h9 {
	display: block;
	font-size: 2rem;
	padding: 100px 0 60px 0;
	margin: 0 5% 0 5%;
	font-weight: 900;
	text-align: center;
}

.infomation {
	color: #fff;
	margin: 0 5% 60px 5%;
	text-align: center;
}

.note2 {
	color: #fff;
	padding: 1px;
}

.questForm {
	padding: 0 1% 0 1%;
	text-align: center;
	margin: 0 20% 0 20%;
	}
	
.flexAria {
	display: flex;
}


.required{
	padding: 2px 0.5rem;
	font-size: 14px;
	margin: 0 1rem 10px 15%;
	font-weight: 900;
	border-radius: 5px;
	background-color: #f7931e;
}

.formText {
	height: 1.8rem;
	width: 80%;
	border: none;
	box-shadow: 0 0 0 1px #fff; inset;
    background-color: #0071bc;
	color: #ddd;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0 0 30px 10%;
}

.formText:focus {
    outline: 0;
	box-shadow: 0 0 0 2px #fff inset;
	background-color: #006aa5;
}

.commentText {
	height: 8rem;
	width: 80%;
	border: none;
	box-shadow: 0 0 0 1px #fff inset;
	background-color: #0071bc;
	color: #ddd;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 4px 0 30px 10%;
}

.commentText:focus {
	outline: 0;
	box-shadow: 0 0 0 2px #fff inset;
	background-color: #006aa5;
}

.submitButton {
	display: inline-block;
	font-size: 1rem;
	font-weight: 900;
	width: 39%;
	border: none;
	background-color: #f7931e;
	color: #fff;
	appearance: none;
	border-radius: 15px;
	padding: 25px 0;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	margin: 0 1% 60px 10%;
}

.submitButton:hover {
	background-color: #f56500;
	color: #fff;
}

.submitButton:focus {
	outline: 0;
	background-color: #fff;
}

.resetButton {
	display: inline-block;
	font-size: 1rem;
	font-weight: 900;
	width: 39%;
	border: none;
	background-color: #555;
	color: #999;
	appearance: none;
	border-radius: 15px;
	padding: 25px 0;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	margin: 0 0 60px 0;
}

.resetButton:hover {
	background-color: #26125b;
	color: #fff;
}

.use2 {
	text-align: center;
	line-height: 1em;
	margin: 0 5% 0 5%;
}

.useTitile {
	font-size: 1rem;
}

.useText {
	font-size: 0.8rem;
	font-weight: 500;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ------footer-------------------------------------------------------------------------------------------------------------------------------------------- */

.wrapper10 {
	max-width: 1300px;
	min-width: 320px;
	margin: auto;
}

h10 {
	display: block;
	text-align: center;
	margin: 100px 0 1.5rem 0;
	border-bottom: 1px solid #000;
	padding-bottom: 1.5rem;
}

.copyRight{
	font-size: 85%;
	text-align: center;
	padding-bottom: 100px;
}




/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */





@media screen and (max-width: 800px){


/* ------header------------------------------------------ */	

.btn--orange,
a.btn--orange {
	margin-bottom: 50px;
}

/* ------merit------------------------------------------ */	

	h3 {
		font-size: 1.8rem;
		margin: 50px 5% 40px 5%;
	}

	.flexbox6 {
		display: block;
		text-align: center;
		margin: 0 5% 40px 5%;
	}
	.meritContents {
		width: 90%;
		display:inline-block;
		color: #fff;
		background: #0071bc;
		margin: 0 0 10px 0;
		border-radius: 20px;
	}

	/* ------excelSheet------------------------------------------ */
	
	
	h4 {
		font-size: 2rem;
		padding: 50px 0 20px 0;
		margin: 0 5% 0 5%;
	}
	
	.reportTextCenter {
		margin: 0 5% 40px 5%;
	}
	
	.reportSmall {
		text-align: center;
		color: #0071bc;
		font-size: 0.8rem;
		margin: 0 5% 20px 5%;
	
	}

	.reportbox {
		display: block;
		text-align: center;
		margin: 0 5% 0px 5%;
	}

	.reportbox2 {
		margin: 0 5% 40px 5%;
	}

	.report1 {
		margin-right: 0;
		margin-bottom: 20px;
	}

	.report2 {
		margin-right: 0;
		margin-bottom: 20px;
	}

	.reportTextLeft {
		padding-bottom: 20px;	
		margin: 0 5% 0 5%;
	}

	.flexbox2 {
		display:block;
		text-align: center;
		margin-top: 20px;
		padding-bottom: 20px;
	}
	
	.reportContents {
		text-align: center;
		width: 100%;
	}
	#modal-window-image img {
		width: 80%;
		height: auto;
	  }

	#modal-window-image2 img {
		width: 100%;
		height: auto;
	  }

	/* ------4step------------------------------------------ */	

	.wrapper4 {
		padding-bottom: 60px;
	}
	
	h5 {
		font-size: 2rem;
		padding: 60px 0 10px 0;
	}

	.use {
		font-size: 1.3rem;
	}

	.stepContents {
		margin: 30px 5% 0 5%;
		padding: 20px 5%;
	}

	.stepImage img {
		width: 100%;
		height: auto;
	}
	


	/* ------attention------------------------------------------ */	

	.wrapper5 {
		padding: 0 0 40px 0;
	}
	
	h6 {
		font-size: 2rem;
		padding: 60px 4% 30px 4%;
	}

	.attentionContents {
		margin: 0 1% 20px 1%;
	}
	.attentionContentsPC {
		display: none;
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);;
		margin: 0 0 20px 0%;
	}
	
	.attentionContentsSP {
		display: inline-block;
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);;
		margin: 0 0 20px 0%;
	}


	/* ------company------------------------------------------ */	


	h7 {
		font-size: 1.7rem;
		padding: 60px 5% 30px 5%;
	}
	
	#slide {
		padding-bottom: 60px;
	}


	/* ------faq------------------------------------------ */	



	.wrapper8 {
		padding-bottom: 30px;
	}
	
	h8 {
		font-size: 1.8rem;
		padding: 60px 5% 40px 5%;
		margin: 0 17% 0 17%;
	}
	
	.questionContents {
		margin: 0 5% 25px 5%;
	}

	.questionContents2 {
		margin: 0 5% 0 5%;
	}


	/* ------contact----------------------------------------- */	

	.wrapper9 {
		padding-bottom: 60px;
	}
	
	h9 {
		font-size: 1.7rem;
		padding: 60px 0 20px 0;
		margin: 0 5% 0 5%;
	}

	.questForm {
		padding: 0 7% 0 0%;
		text-align: center;
		margin: 0;
	}


	/* ------footer----------------------------------------- */	



h10 {
	display: block;
	text-align: center;
	margin: 60px 0 1.5rem 0;
	border-bottom: 1px solid #000;
	padding-bottom: 1.5rem;
}

.copyRight{
	font-size: 85%;
	text-align: center;
	padding-bottom: 60px;
}

}



/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */



@media screen and (max-width: 550px){


	/* ------header------------------------------------------ */	


	.lead {
		padding: 0 3%;
	}

	h1 {
		margin-bottom: 30px;
		padding: 30px 2% 0 2%;
	}

	h2 {
		font-size: 2rem;
		margin-bottom: 20px;
	}

	.leadRed {
		font-size: 1.5rem;
	}

	.leadMini1 {
		margin-bottom: 15px;
	}

	.lead2 {
		font-size: 1.5rem;
		padding-top: 0px;
		margin-bottom: 15px;
	}

	.leadMini2 {
		margin-bottom: 30px;
	}

	.btn--orange,
	a.btn--orange {
		margin-bottom: 40px;
	}


	/* ------merit------------------------------------------ */


	h3 {
		font-size: 1.5rem;
		margin: 45px 2% 30px 2%;
	}

	.flexbox6 {
		margin: 0 1% 30px 1%;
	}
	.meritContents {
		margin: 0 0 10px 0;
		border-radius: 20px;
	}


	/* ------excelSheet------------------------------------------ */

	h4 {
		font-size: 1.6rem;
		padding: 40px 0 20px 0;

	}

	.flexbox2 {
		margin-top: 0px;
	}



	/* ------4step------------------------------------------ */	

	
	.stepNomber img {
		width: 35%;
		height: auto;
	}

	.stepTitle1 {
		font-size: 1.5rem;
	}

	.stepContents {
		margin: 20px 5% 0 5%;
	}

	.stepIcon img {
		width: 35%;
		height: auto;
	}



	/* ------attention------------------------------------------ */	


		
		h6 {
			font-size: 1.7rem;
			padding: 60px 2% 30px 2%;
		}
		.attentionContents {
			margin: 0 0% 20px 0%;
		}
	
		.attentionContentsPC {
			display: none;
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);;
			margin: 0 0 20px 0%;
		}
		
		.attentionContentsSP {
			display: inline-block;
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);;
			margin: 0 0 20px 0%;
		}

		

	/* ------company------------------------------------------ */	


	h7 {
		font-size: 1.5rem;
	}








}