@charset "utf-8";

/* common */
body { margin: 0 auto; }

body, body * { 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; }
.serif,
h2,
#index2 h2 span.marker,
.index4-content > p b {
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

img { max-width: 100%; display:block; margin:0 auto;}

a:hover img { opacity: .7; }

h1 { font-size: 0; padding: 0; margin: 0 auto; }
h2 { font-size: 38px; line-height: 1.8; font-weight: normal; letter-spacing: 0; padding: 0; margin: 0 auto 0; }
h3 { font-size: 30px; color: #377cb4; font-weight: bold; margin: 0 auto; text-decoration: underline; }

h5 { font-size: 24px; line-height: 1; font-weight: normal; margin: 23px auto 0; }
p { font-size: 18px; padding: 0; margin: 0 auto; }

.SP { display: none; }

.flex-wrapper { display: flex; }

.clear { clear: both; }
.clearfix:after { content: ""; clear: both; }
.Fleft { float: left; }
.Fright { float: right; }

.breakPC:before { content: "\A"; white-space: pre-wrap; }
.breakSP:before { content: none; white-space: initial; }

.copyright { font-size: 12px; text-align: center; padding: 12px 0; }

.page-top a { display: block; position: fixed; width: 50px; height: 50px; bottom: 0; right: 0; background-color: rgba(0,0,0,.7); transition-duration: 0.2s; transition-timing-function: ease; }
.page-top a:after { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: 18px; left: 13px; border: 2px solid transparent; border-top-color: #fff; border-left-color: #fff; transform: rotate(45deg); }
.page-top a:hover { background-color: #005eae; }

/* index */
#index1 { text-align: center; }
#index2 { margin: 105px auto 0; max-width: 960px; text-align: center; }
#index2 h2 { margin-bottom: 35px; }
#index2 h2 span.marker { position: relative; }
#index2 h2 span.marker:before { content: url(./images/h2_line_2x.png); position: absolute; right: -28px; bottom: -18px; z-index: -1; }
#index2 p { line-height: 2.1; }
#index3 { text-align: center; margin-top: 105px; }
#index3 .ss-wrapper { margin: 20px auto 0; }
#index3 .ss-wrapper .ss-item { padding-top: 56.25%; position: relative; }
#index3 .ss-wrapper iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#index3 .ss-wrapper .slick-prev, #index3 .ss-wrapper .slick-next { position: absolute; width: 50px; height: 50px; top: calc(50% - 37.5px); border: 4px solid transparent; border-top-color: #377cb4; border-right-color: #377cb4; z-index: 2; }
#index3 .ss-wrapper .slick-prev { left: calc(22.5% + 50px); transform: rotate(-135deg); }
#index3 .ss-wrapper .slick-next { right: calc(22.5% + 50px); transform: rotate(45deg); }
#index3 .ss-wrapper .slick-prev:before, #index3 .ss-wrapper .slick-next:before { content: none; }
.index4-content { position: relative; width: 100%; max-width: 960px; margin: 82px auto 0; }
.index4-content h4 { position: relative; }
.index4-content .flex-wrapper { margin: -55px auto 70px; }
.index4-content .flex-content { width: 48.15%; max-width: 502px; }
.index4-content .flex-content:first-child { margin-right: 3.7%; }
.index4-content .flex-content p { font-size: 16px; line-height: 1.3; letter-spacing: -1px; margin-top: 12px; }
.index4-content > p { font-size: 18px; letter-spacing: -1px; line-height: 1.6; margin-bottom: 25px; }
.index4-content > p b { font-size: 38px; font-weight: bold; letter-spacing: 0;}
.index4-content a { font-size: 24px; display: block; width: 100%; max-width: 260px; height: 55px; line-height: 52px; text-align: center; color: #fff; text-decoration: none; background-color: #0068bd; border: 1px solid #0068bd; box-sizing: border-box; transition: .2s; margin-top: 50px; }
.index4-content a:hover { color: #0068bd; background-color: #fff; }
#index4 .interview { width: 100%; margin: 170px auto 0; text-align: center; padding: 57px 0; background-color: #e4e4e4; }
#index4 .interview a { font-size: 32px; display: block; line-height: 1; margin: 0 auto 30px; color: #377cb4;}
#index4 .interview div:nth-child(2) { max-width: 960px; margin: 0 auto; }
#index4 .interview div:nth-child(2) div { padding-top: 56.25%; position: relative; }
#index4 .interview iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#index5 { width: 100%; max-width: 960px; margin: 60px auto 0; }
#index5 h3 { text-align: center; text-decoration: underline; }
#index5 .float-wrapper { margin: 56px auto 0; }
#index5 .Fleft { width: 28%; max-width: 286px; }
#index5 .Fleft img { margin-bottom: 17px; }
#index5 .Fright { width: 67%; margin-left: 5%; }
#index5 h4 { font-size: 24px; font-weight: bold; line-height: 1; margin: 0px auto 0; }
#index5 p { line-height: 1.9; }
#index5 ul { margin: 10px 0 10px 15px; padding-left: 15px; }
#index5 ul li { font-size: 18px; font-weight: bold; margin-bottom: 3px; }
#index5 ul li span { font-weight: normal; }
#index6 { margin: 110px auto 0; background-color: #e4e4e4; }
#index6 .content-wrapper { width: 100%; max-width: 960px; margin: 0 auto; padding: 57px 0 71px; }
#index6 h4 { font-size: 24px; line-height: 1; margin: 0 auto 20px; }
#index6 img { padding-bottom: 8px; margin-bottom: 10px; }
#index6 h5 { margin: 0 auto 12px; line-height: 1.6; }
#index6 h5 span { display: block; font-size: 16px; }
#index6 p { line-height: 1.9; }
#index6 p span { display: block; font-size: 14px; margin: 30px auto 0; }
.banner-line { display: block; background-color: #e4e4e4; text-align: center; padding: 20px 0; margin-top: 100px; }

/* page */
/*interview */
.interview #content2, .interview #content3, .interview #content4 { width: 100%; max-width: 960px; margin: 0 auto; }
.interview #content2 { margin: 80px auto 0; }
.interview #content2 h2 { font-size: 38px; font-weight: bold; line-height: 1.5; }
.interview #content3 { margin: 60px auto 0; border-bottom: 2px solid #000; }
.interview #content3 h3 { font-size: 24px; font-weight: bold; line-height: 1.35; color: #333; text-decoration: none; margin-bottom: 35px; }
.interview #content3 h4 { font-size: 18px; color: #0068B7; position: relative; }
.interview #content3 h4 span { background-color: #fff; padding-right: 20px; }
.interview #content3 h4:before { content: ""; display: block; position: absolute; width: 100%; height: 2px; background-color: #000; top: 50%; z-index: -1; }
.interview #content3 p { font-size: 18px; line-height: 1.7; font-weight: normal; letter-spacing: -1px; margin-bottom: 16px; }
.interview #content3 .Fleft { width: 60%; }
.interview #content3 .Fleft div { padding-bottom: 105px; }
.interview #content3 .Fright { width: 36%; max-width: 374px; margin-top: 100px; }
.interview #content3 .Fright div { margin-bottom: 30px; }
.interview #content4 { padding: 60px 0 100px; }

@media screen and (max-width: 959px) {
	h2 { font-size: 34px; }
	.index4-content { max-width: 90%; margin-left: auto; margin-right: auto; }
	.index4-content > p b { font-size: 32px; }
	#index4 .interview div:nth-child(2) { max-width: 80%; }
	#index5 { max-width: 90%; }
	#index6 .content-wrapper { max-width: 90%; }
	.page #content2, .page #content3, .page #content4 { max-width: 90%; margin-left: auto; margin-right: auto; }
	.interview #content2 h2 { font-size: 36px; }
	.interview #content3 h3 { font-size: 28px; }
	.interview #content3 p { font-size: 20px; }
	.interview #content4 .Fleft, .interview #content4 .Fright { width: 48%; }


	@media screen and (max-width: 767px) {
		h2, .index4-content > p b { font-size: 24px; }
		p, .index4-content > p { font-size: 14px; line-height: 1.75; }
		.SP { display: block; }
		.PC { display: none; }
		.Fleft, .Fright { float: none; width: 100%; }
		#index2, #index3, #index6 { margin-top: 50px; }
		#index2 h2 span.marker:before { zoom: .8; right: -55px;  bottom: -12px;}
		.index4-content .flex-content p { font-size: 14px; }
		.index4-content a { margin: 50px auto 0; transition: 0; }
		#index4 .interview { margin-top: 40px; }
		#index4 .interview a { font-size: 20px; }
		#index5 h4 { text-align: center; margin: 20px auto 15px;  }
		#index5 .Fleft, #index5 .Fright { width: 100%; margin-left: auto; margin-right: auto; }
		#index5 p b { font-size: 20px; }
		#index5 ul { margin-bottom: 30px; }
		#index5 ul li { font-size: 14px; }
		#index6 h4 { text-align: center; }
		#index6 h5 { text-align: center; }
		.interview #content3 .Fleft, .interview #content3 .Fright { width: 100%; }
		.interview #content3 .Fright { margin: 0 auto; }
		.interview #content3 .Fleft div { padding-bottom: 30px; }
		.interview #content3 .Fleft div.SP { text-align: center; padding-bottom: 60px; }
		.interview #content3 .Fleft div.SP:last-child { padding-bottom: 30px; }
		.interview #content4 .Fleft, .interview #content4 .Fright { width: 100%; text-align: center; margin: 0 auto 20px; }

		@media screen and (max-width: 425px) {
			h2 { letter-spacing: 0; }
			.breakSP:before { content: "\A"; white-space: pre-wrap; }
			.breakPC:before { content: none; white-space: initial; }
			#index2 h2 span.marker:before { zoom: .7; right: -40px; }
			#index3 .ss-wrapper .slick-prev, #index3 .ss-wrapper .slick-next { height: 100%; width: 22.5%; top: 0; border: none; transform: rotate(0); background-color: rgba(0,0,0,.3); }
			#index3 .ss-wrapper .slick-prev { left: 0; }
			#index3 .ss-wrapper .slick-next { right: 0;  }
			#index3 .ss-wrapper .slick-prev:before { content: '←'; }
			#index3 .ss-wrapper .slick-next:before { content: '→'; }
			.index4-content { margin-top: 40px; }
			.index4-content .flex-wrapper { margin-bottom: 30px; }
			#index5 ul { margin-left: 6px; }
			#index5 ul li { line-height: 1.75; margin-bottom: 15px; }
			#index6 p span { font-size: 10.5px; margin: 20px auto 0; }
			.interview #content2, .interview #content3 { margin-top: 30px; }
			.interview #content2 h2 { font-size: 22px; }
			.interview #content3 .Fleft div { padding-bottom: 30px; }
			.interview #content3 h3 { font-size: 20px; margin-bottom: 20px; }
			.interview #content3 p { font-size: 18px; }
			.interview #content4 { padding: 30px 0; }

			@media screen and (max-width: 375px) {
				#index2 h2 span.marker:before { zoom: .6; bottom: -10px; }
				#index3 .ss-wrapper .slick-prev, #index3 .ss-wrapper .slick-next { width: 15%; }
				h2, .index4-content > p b { font-size: 20px; }
				#index4 .interview a { font-size: 18px; }

			}
		}
	}
}