@charset "UTF-8";

/* ===================================================================

	Setting

=================================================================== */
html { color:#000; background:#FFF; line-height:1.6; text-align:left; font-size:65.5%; }
body { font-size:1.6rem; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; overflow-x:hidden; }
img { max-width:100%; height:auto; }
.m { display: none; }
.pc{ display: block;}
/*.wrapper{ display: -webkit-flex; display: flex;}*/
	/* Link set
	------------------------------------------------------------------- */
	a { color: #000; text-decoration:none; transition:0.3s ease-in-out; }
	a img { transition:0.3s ease-in-out; }
	a:hover { color:#666; }
	a:hover { opacity: 0.6;}
	/* Block set
	------------------------------------------------------------------- */
	main { margin:0 auto; }
	main section { margin:0 auto; position:relative; }
	main:after,
	main section:after { content:""; display:block; clear:both; }
	
	/* JS set
	------------------------------------------------------------------- */
	.fadein { opacity:0.1; transform:translate(0, 50px); transition:all 500ms; } 
	.fadein.scrollin { opacity:1; transform:translate(0, 0); }
	ul li.fadein:nth-of-type(2) { transition-delay:300ms; }
	ul li.fadein:nth-of-type(3) { transition-delay:600ms; }
	ul li.fadein:nth-of-type(4) { transition-delay:900ms; }
	ul li.fadein:nth-of-type(5) { transition-delay:1200ms; }
	ul li.fadein:nth-of-type(6) { transition-delay:1500ms; }
	
	/*お問い合わせBAR set
	------------------------------------------------------------------------*/
	/*.fixed { position: fixed; bottom: 0; width: 100%; z-index: 1000;}*/
	
	
	/*clearfix set
	-------------------------------------------------------------------------*/
	.clearfix::after { content : " "; display : block; clear : both;}
	
		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		.m { display:none; }
		@media screen and (max-width:768px) {
			
			body { font-size:1.3rem; }
			.containar { width:100%; }
			.m { display:block; }
			.pc{ display: none;}
		}
		


/* ===================================================================

	Header

=================================================================== */
header h1{ margin: 10px;}


		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
		header h1{ margin: 10px; width: 20%;}
			
		}
	
		


/* ===================================================================

	fv

=================================================================== */
.fv { background-image: url(../img/ap_r2_c1.png);
	  background-repeat: no-repeat;
	  background-position: bottom;    
	  background-color: #fff;
	  text-align: center;
	  height: 900px;}
.fv h1 { padding-top: 70px; }
.fv h2 { width: 752px; background: #675195; padding: 10px 0; color: #fff; font-size: 1.3em; font-weight: 800; margin: 20px auto;}
.fv .flexbox{ width: 818px; display: flex; flex-direction: row; flex-wrap: wrap; background: #fff; margin: 300px auto 0;}
.fv .flexbox img{ margin:0 25px; padding-bottom:30px;}
.fv p{ width: 818px; text-align: center; font-size: 1.3em; font-weight: 600; padding: 20px 0;}



		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
		.fv { background-image: url(../img/spap_r2_c1.png);
			  background-repeat: no-repeat;
			  background-position: center;    
			  background-color: #fff;
			  text-align: center;
			  height: auto;
			  background-size: contain;}
		.fv h1 { padding-top: 31px; width: 84%; margin: 0 auto;}
		.fv h2 { width: 100%; background: #675195; padding: 1em 2em; color: #fff; font-size: 1.2em; font-weight: 400; margin: 25px auto;}
		.fv .flexbox{ width: 100%; display: block; margin: 300px auto 0; padding: 1em 2em;}
		.fv .flexbox img{ margin:0; padding-bottom:30px;}
		.fv p{ width: 100%; text-align: center; font-size: 1.3em; font-weight: 600; padding: 20px 0;}
				}
		


/* ===================================================================

	s1

=================================================================== */
.s1 { padding-top:35px; text-align:center;}
.s1 h2{ width:930px; text-align: center; margin: 70px auto; font-size: 1.2em; font-weight: 600; line-height: 2.0em;}
.s1 .flexbox{ width: 980px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:0 auto;}


		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s1 { padding:1em 2em; text-align:center;}
			.s1 h2{ width:100%; text-align: left; margin: 0; font-size: 1.2em; font-weight: 500; line-height: 1.5em;     padding-bottom: 20px;}
			.s1 .flexbox{ width: 100%; display: block; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:0 auto;}
			
		}
			


/* ===================================================================

	s2

=================================================================== */
.s2 { text-align: center; background: url(../img/ap_r2_c1.jpg) center 200px no-repeat; }
.s2 .flexbox{ width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin:0 auto; padding-top: 100px;}
.s2 .flexbox .flexparts{ width: 400px; padding: 140px 0 0 15px;}
.s2 .flexbox h1{padding-bottom: 60px;}
.s2 .flexbox h3{ font-size: 0.9em; color: #fff; letter-spacing: 0.1em;}
.s2 .flexbox p{ font-size: 1.0em; letter-spacing: 0.1em; text-align:justify; line-height: 2.0em;}
.s2 .flexbox p.omotenasi{ font-size: 0.9em; color: #fff; letter-spacing: 0.5em; padding-top: 20px; text-align:center; padding-left: 50px;}
.s2 h2{ font-size: 2.0em; font-weight: 800;}
.s2 .s2inner{ text-align: left; font-size: 1.0em; font-weight: 600; letter-spacing: 0.15em; margin: 0 auto; line-height: 3.5em; width: 600px; padding: 35px 0;}
.s2 .s2inner p{ background: url(../img/ap_r16_c21.png) no-repeat center left; padding-left: 50px;}
.s2 .imgbar{ padding-bottom: 70px;}
.s2 .Category{ width: 1080px; padding: 45px 0;}
.s2 .Category img{ padding-bottom: 15px;}

		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s2 { text-align: center; background: url(../img/ap_r2_c1.jpg)  center 300px no-repeat; }
			.s2 .flexbox{ width: 100%; display: block; margin: 0; padding: 1em 2em; }
			.s2 .flexbox .flexparts{ width: 100%; padding-top: 25px;}
			.s2 .flexbox h1{padding-bottom: 60px;}
			.s2 .flexbox h3{ font-size: 0.9em; color: #fff; letter-spacing: 0.1em;}
			.s2 .flexbox p{ font-size: 1.0em; letter-spacing: 0.1em; text-align:justify; line-height: 2.0em;}
			.s2 .flexbox p.omotenasi{ font-size: 0.9em; color: #fff; letter-spacing: 0.5em; padding-top: 20px; text-align:center; padding-left: 0;}
			.s2 h2{ font-size: 1.5em; font-weight: 800; padding: 30px 0;}
			.s2 .s2inner{ text-align: left; font-size: 1.0em; font-weight: 600; letter-spacing: 0.15em; margin: 0; line-height: 2.0em; width: 100%; padding: 0 20px 20px 20px;}
			.s2 .s2inner p{ background: url(../img/ap_r16_c21.png) no-repeat center left; padding-left: 30px; background-size:7%;}
			.s2 .imgbar{ padding-bottom: 35px;}
			.s2 .Category{ width: 100%; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
			.s2 .Category img{ padding-bottom: 15px; width:50%}
						
		}



/* ===================================================================

	s3

=================================================================== */
.s3 .flexbox{ width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 auto; padding: 80px 0 51px;}
.s3 .right{ flex-direction: row-reverse;}
.s3 .s3txt{ width: 600px; text-align: left; letter-spacing: 0.15em; color:#fff; margin-left: 70px;}
.s3 .s3txt02{ width: 600px; text-align: left; letter-spacing: 0.15em; color:#fff; margin-right: 70px;}
.s3 h2{ font-size: 1.8em; font-weight: 700; padding: 5px 0 35px 0;}
.s3 p{ font-size: 0.9em; line-height: 2.0em;text-align: justify;}
.s3 .s3inner01{ background: url(../img/ap_r31_c1.png) no-repeat;}
.s3 .s3inner02{ background: url(../img/ap_r32_c1.png) no-repeat;}
.s3 .s3inner03{ background: url(../img/ap_r34_c1.png) no-repeat;}

		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s3 .flexbox{ width: 100%; display: block; flex-direction: row; flex-wrap: wrap; margin: 0 auto; padding: 2em 2em;}
			.s3 .right{ flex-direction: row-reverse;}
			.s3 .s3txt{ width: 100%; text-align: left; letter-spacing: 0; color:#fff; margin-left: 0;  text-align: center;}
			.s3 .s3txt02{ width: 100%; text-align: left; letter-spacing: 0.15em; color:#fff; margin-right: 0; text-align: center;}
			.s3 .s3img{ width: 20%; margin:0 auto; padding: 10px 0;}
			.s3 h2{ font-size: 1.2em; font-weight: 600; padding: 5px 0 10px 0;}
			.s3 p{ font-size: 0.9em; line-height: 2.0em;}
			.s3 .s3inner01{ background: url(../img/ap_r31_c1.png) no-repeat right;}
			.s3 .s3inner02{ background: url(../img/ap_r32_c1.png) no-repeat left;}
			.s3 .s3inner03{ background: url(../img/ap_r34_c1.png) no-repeat right;}
					
		}
		

/* ===================================================================

	s4

=================================================================== */
.s4 { text-align: center; padding-top: 50px;}
.s4 h1{ font-size: 2.0em; font-weight: 800; letter-spacing: 0.1em; padding-bottom: 50px;} 
.s4 ul{ width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; padding-bottom: 100px;}
.s4 ul li{ width: 300px;}
.s4 ul li p{ font-size: 0.9em; letter-spacing: 0.1em; padding-top:25px; text-align:justify; line-height: 1.8em;}

	


		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s4 { text-align: center; padding-top: 30px;}
			.s4 h1{ font-size: 1.5em; font-weight: 800; letter-spacing: 0.1em; padding-bottom: 20px;} 
			.s4 ul{ width: 100%; display: block; margin: 0 auto; padding-bottom: 30px;}
			.s4 ul li{ width: 100%; padding:1em 2em;}
			.s4 ul li p{ font-size: 0.9em; letter-spacing: 0.1em; padding-top:25px; text-align:left; line-height: 1.8em;}
			
		}




/* ===================================================================

	s5

=================================================================== */
.s5 { padding: 50px 0 130px 0; text-align: center;}
.s5 h2{ font-size: 2.0em; font-weight: 600; padding: 30px 0;}
.s5 h3{ font-size: 2.5em; font-weight: 600; padding: 30px 0; color: #fff; letter-spacing: 0.05em;}
.s5 h3 span{ font-size: 1.5em;}
.s5 ul{ width: 1000px; margin: 0 auto;}
.s5 ul li{ padding:10px 0; border-bottom: 1px dashed #333;}
.s5 ul li p{ text-align: left; background: url(../img/ap_r5_c3.jpg) no-repeat; padding-left: 50px; font-size:1.0em; letter-spacing: 0.1em; color: #333; height: 61px;}
.s5 ul li p.www{ padding-top: 20px;}
.s5 ul li p.answer{ background: url(../img/ap_r6_c3.jpg) no-repeat;}
.s5 .bk{ background: url(../img/ap_r8_c1.jpg) center center; margin-top: 50px;}
.s5 .bk p{ font-size: 1.2em; font-weight: 400; letter-spacing: 0.1em; line-height: 2.0em; color: #fff; padding-top: 150px; padding-bottom: 40px;}
.s5 small{ font-size: 0.8em; padding: 10px 0}

		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			
			.s5 { text-align: center; padding: 30px 0 200px 0;}
			.s5 h2{ font-size: 1.5em; font-weight: 600; padding: 20px 0;}
			.s5 h3{ font-size: 1.5em; font-weight: 600; padding: 20px 0; color: #fff; letter-spacing: 0.05em;}
			.s5 h3 span{ font-size: 1.5em;}
			.s5 ul{ width: 100%; margin: 0 auto; padding: 0 2em;}
			.s5 ul li{ padding:10px 0; border-bottom: 1px dashed #333;}
			.s5 ul li p{ text-align: left; background: url(../img/ap_r5_c3.jpg) no-repeat; padding-left: 50px; font-size:0.8em; letter-spacing:0; color: #333; height: 61px;}
			.s5 ul li p.www{ padding-top: 15px;}
			.s5 ul li p.answer{ background: url(../img/ap_r6_c3.jpg) no-repeat;}
			.s5 .bk{ background: url(../img/ap_r8_c1.jpg) center center; margin-top: 30px;}
			.s5 .bk p{ font-size: 0.9em; font-weight: 400; letter-spacing: 0.1em; line-height: 1.8em; color: #fff; padding-top: 100px; padding-bottom: 10px; margin: 0 2em;}
			.s5 small{ font-size: 0.8em; padding: 10px 0}

			
		}

		


/* ===================================================================

	s6

=================================================================== */
.s6{ background: #FCE836; text-align:center; border-top: 2px solid #4B4B4B;  position: fixed; bottom: 0; z-index:100; width:100%}
.s6 p{ color: #4B4B4B; padding: 10px 0;}
.s6 .flexbox{ padding-bottom: 10px; }

			/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		@media screen and (max-width:768px) {
			.s6{ background: #FCE836; text-align:center; border-top: 2px solid #4B4B4B;  position: fixed; bottom: 0; z-index:100; width:100%; padding: 1em 1em;}
			.s6 p{ color: #4B4B4B; padding: 0;}
			.s6 .flexbox{ display: block; padding-bottom: 0; }
			.s6 img{ width:70%; padding-bottom:5px;}
		}

/*.s6 { background:#000; text-align:center; padding:150px 0; color:#FFF; }
.s6 h1 { margin-bottom:80px; }
.s6 > p { margin-bottom:80px; }
.s6 address a { display:block; margin:0 auto 20px; }
.s6 address .mail { width:880px; height:140px; line-height:140px; text-align:center; background:#12F3F3; }
.s6 address .mail:hover { border-radius:20px; height:150px; line-height:150px; }
.s6 address p { font-size:1.3rem; }
.s6 address p:first-of-type { margin-bottom:100px; }*/


		/* ===================================================================
		
		#	Responsive
		
		=================================================================== */
		/*@media screen and (max-width:768px) {
			
			.s6 { background:#000; text-align:center; padding:4em 2em; color:#FFF; }
			.s6 h1 { margin-bottom:3em; text-align:center; }
			.s6 > p { margin-bottom:3em; text-align:left; }
			.s6 address a { display:block; margin:0 auto 20px; }
			.s6 address .mail { width:100%; height:60px; line-height:60px; text-align:center; background:#12F3F3; padding:0 2em; }
			.s6 address .mail:hover { border-radius:20px; height:60px; line-height:60px; }
			.s6 address p { font-size:1.1rem; text-align:left; }
			.s6 address p:first-of-type { margin-bottom:4em; }
			
		}*/