@charset "utf-8";
/*
1.common setting
2.main
3.footer
99.media queries
*/

/* ---------------------------------------------------------
1.common setting
---------------------------------------------------------*/
html {font-size:62.5%;/*10px*/}
body {background-color:#ffffff; font-family:YakuHanMP, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'MS PGothic', arial, helvetica, sans-serif; color:#111111; font-weight:500; font-size:16px; font-size:1.6em; line-height:1.5;}
html, body {height:100%;}
* {min-height:0vw;/* Safari clamp関数対策 */}
body * {-webkit-box-sizing:border-box; box-sizing:border-box;}
#wrapper {position:relative; overflow:hidden; width:100%;}
img {max-width:100%; height:auto; image-rendering:-webkit-optimize-contrast;}
/* link */
a {text-decoration:none; -webkit-transition:color .3s; transition:color .3s;}
a:link {color:#0065b3;}
a:visited {color:#0065b3;}
a:hover {color:#007edf; text-decoration:none;}
a:focus {color:#007edf; text-decoration:none;}
a:active {color:#007edf;}
/*----------------------------------------------------------*/

/*--------------------------------------------------
2.main
--------------------------------------------------*/
main {display:block; position:relative; margin-bottom:150px;}
section {position:relative; padding-bottom:48px;}
section::before {position:absolute; top:0; bottom:0; left:0; right:0; border-style:solid; border-width:0 0 48px 100vw; border-color:transparent transparent #f6f6f6 transparent; content:'';}
section:nth-child(even) {background-color:#f6f6f6;}
section:nth-child(even)::before {border-width:0 100vw 48px 0; border-color:transparent transparent #ffffff transparent;}
.inner {width:90%; padding:18% 0; margin:0 auto;}

h2 {position:relative; z-index:2; padding:0; border:none; color:#002b4d; font-weight:900; font-size:3.6rem; letter-spacing:.05em; text-align:center;}
.sub-title_en {position:relative; top:-32px; color:#dfdfdf; font-weight:normal; font-size:4.5rem; font-family:'Pinyon Script', cursive; letter-spacing:.05em; text-align:center;}
section:nth-child(even) .sub-title_en {color:#dadada;}
.sub-title_en + * {margin-top:12px;}
p:not(.sub-title_en) {font-size:1.8rem;}
.brsp {display:block;}
.brpc {display:none;}

.flex-column {-js-display:flex; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
.flex-column:not(.sub-title_en + *) {margin-top:56px;}
.flex-column .flex-text {-webkit-box-ordinal-group:1; -ms-flex-order:1; order:1; margin-top:16px;}
.flex-column .flex-text p + p {margin-top:12px;}

.mainVisual {position:relative; width:100%; background-image:url(../img/mainVisual_sp.png); background-image:-webkit-image-set(url(../img/mainVisual_sp.png) 1x, url(../img/mainVisual_sp@2x.png) 2x); background-image:image-set(url(../img/mainVisual_sp.png) 1x, url(../img/mainVisual_sp@2x.png) 2x); background-position:center center; background-repeat:no-repeat; background-size:cover;}
.mainVisual::before {display:block; padding-top:130.77%; content:'';}
.mainVisualIn {position:absolute; top:6%; left:50%; width:90%; height:83%; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
.mainVisualItem {-js-display:flex; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; height:100%;}
.mv_point {-js-display:flex; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; width:95%; margin-top:auto; list-style:none;}
.mv_point li {width:30.4%; line-height:0;}

.mainVisualTitle {position:relative; color:#002b4d; font-weight:900; font-size:clamp(1.6rem, 0.145rem + 7.27vw, 5.6rem); line-height:1; text-shadow:#ffffff 1px 1px;}
.mainVisualTitle span:not(.title-fade) {display:inline-block; font-size:clamp(2.1rem, 0.536rem + 7.82vw, 6.4rem); line-height:1; text-shadow:none; -webkit-font-feature-settings:"palt"; font-feature-settings:"palt";}
.title-ma {margin-top:16px;}
.title-bg {padding:4px 10px 8px; background-color:#002b4d; color:#ffffff;}
.title-fade {opacity:0; -webkit-animation:titleFadeIn 2s ease .5s forwards; animation:titleFadeIn 2s ease .5s forwards;}
@-webkit-keyframes titleFadeIn {0% {opacity:0;} 100% {opacity:1;}}
@keyframes titleFadeIn {0% {opacity:0;} 100% {opacity:1;}}
.bgextend {position:relative; opacity:0; overflow:hidden; margin-bottom:4px; -webkit-animation:bgextendAnimeBase 1s ease forwards; animation:bgextendAnimeBase 1s ease forwards;}
@-webkit-keyframes bgextendAnimeBase {0% {opacity:0;} 100% {opacity:1;}}
@keyframes bgextendAnimeBase {0% {opacity:0;} 100% {opacity:1;}}
.bglr-extend::before {position:absolute; left:-100%; width:100%; height:100%; overflow:hidden; background-color:#002b4d; content:''; -webkit-animation:bgLRextendAnime 1s cubic-bezier(0.45, 0, 0.55, 1) forwards; animation:bgLRextendAnime 1s cubic-bezier(0.45, 0, 0.55, 1) forwards;}
@-webkit-keyframes bgLRextendAnime {0% {left:-100%; -webkit-transform-origin:left; transform-origin:left;} 50% {left:0%; -webkit-transform-origin:left; transform-origin:left;} 50.001% {-webkit-transform-origin:right; transform-origin:right;} 100% {left:100%; -webkit-transform-origin:right; transform-origin:right;}}
@keyframes bgLRextendAnime {0% {left:-100%; -webkit-transform-origin:left; transform-origin:left;} 50% {left:0%; -webkit-transform-origin:left; transform-origin:left;} 50.001% {-webkit-transform-origin:right; transform-origin:right;} 100% {left:100%; -webkit-transform-origin:right; transform-origin:right;}}
.bgappear {opacity:0; -webkit-animation:bgextendAnimeSecond 1s ease .6s forwards; animation:bgextendAnimeSecond 1s ease .6s forwards;}
@-webkit-keyframes bgextendAnimeSecond {0% {opacity:0;} 100% {opacity:1;}}
@keyframes bgextendAnimeSecond {0% {opacity:0;} 100% {opacity:1;}}
.bgappear-trigger, .bgextend-trigger {opacity:0;}

.job-role .inner {padding-left:2.5%; padding-right:2.5%;}
.job-role .flex-text {font-size:1.8rem;}

.balloon {display:inline-block; position:relative; margin-bottom:12px; padding:8px 10% 12px; background-color:#0065b3; color:#ffffff; font-size:1.8rem; line-height:1;}
.balloon::before {position:absolute; bottom:-12px; left:calc(50% - 7px); z-index:5; border-style:solid; border-width:14px 8px 0 8px; border-color:#0065b3 transparent transparent transparent; content:'';}

.flow {list-style:none; text-align:center;}
.flow li:not(:first-child) {margin-top:72px;}
.flow li figure {width:70%; margin:0 auto; line-height:0;}
.flow li p {margin-top:8px; font-size:1.7rem;}
.flow li p br {display:none;}
.flow .balloon {top:-16px;}

.job-description::before {border-bottom-color:#f6f6f6 !important;}
.job-description .inner {padding-bottom:5%;}
.job-description p:not(.sub-title_en) + p {margin-top:16px;}

.dl_border-bottom {overflow:hidden; font-size:1.6rem;}
.dl_border-bottom dt {padding:18px 0 0; font-weight:700;}
.dl_border-bottom dd {padding:10px 0 16px; border-bottom:2px solid #bdbdbd;}

ul.list li {position:relative; padding-left:1.2em; list-style:none;}
ul.list li::before {position:absolute; left:0; top:0; content:'・';}
ul.list li:not(:last-child) {padding-bottom:4px;}

/* Scrolling animation */
.fadein {opacity:0; -webkit-transition:1s; transition:1s;}
.fadein.show {opacity:1; -webkit-transform:translate(0, 0); transform:translate(0, 0);}
.fade-top {-webkit-transform:translateY(-80px); transform:translateY(-80px);}
.fade-right {-webkit-transform:translateX(80px); transform:translateX(80px);}
.fade-bottom {-webkit-transform:translateY(80px); transform:translateY(80px);}
.fade-left {-webkit-transform:translateX(-80px); transform:translateX(-80px);}

/* ---------------------------------------------------------
3.footer
---------------------------------------------------------*/
footer {padding-bottom:48px; background-color:#f6f6f6;}
p.copyright {color:#555555; font-size:1.4rem; letter-spacing:.05em; text-align:center;}

.btn_form {position:fixed; bottom:0; z-index:50; width:100%; padding:32px 8px; -webkit-box-shadow:0 -1px 15px 0 rgba(0, 0, 0, .08); box-shadow:0 -1px 15px 0 rgba(0, 0, 0, .08); background:rgba(255, 255, 255, .8); text-align:center;}
.btn {display:block; position:relative; width:90%; margin:0 auto; padding:16px; border-radius:8px; -webkit-box-shadow:0 4px 0 #00487f; box-shadow:0 4px 0 #00487f; background-color:#0065b3; color:#ffffff !important; font-size:1.8rem; -webkit-transition:.2s; transition:.2s;}
.btn::before {position:absolute; top:calc(50% - 8px); right:20px; width:16px; height:16px; border-top:4px solid #ffffff; border-right:4px solid #ffffff; color:#ffffff !important; text-align:center; content:''; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.btn:hover, .btn:focus {-webkit-box-shadow:none; box-shadow:none; -webkit-transform:translateY(4px); transform:translateY(4px);}

#pageTop {opacity:.8; position:fixed; bottom:130px; right:10px; z-index:99; cursor:pointer; -webkit-transition:.3s; transition:.3s;}
#pageTop:hover, #pageTop:focus {opacity:.5;}


/* ---------------------------------------------------------
99.media queries
---------------------------------------------------------*/
/* 520x以上
----------------------------------------------------------*/
@media screen and (min-width: 520px) {
	.sub-title_en + * {margin-top:48px;}

	.title-ma {margin-top:32px;}
	.title-bg {padding:3px 10px 11px;}

	.flex-column:not(.sub-title_en + *) {margin-top:96px;}
	.flex-column .flex-text {margin-top:24px;}

	.balloon {padding:8px 16px 12px;}

	.flow {display:-webkit-box;display:-ms-flexbox;display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;}
	.flow li {width:45%; margin:0 2.4%;}
	.flow li:not(:first-child) {margin-top:0;}
	.flow li:nth-child(n+3) {margin-top:96px;}

	.btn {width:80%; max-width:480px; font-weight:700;}

	#pageTop {bottom:10px;}
}

/* 960px以上
----------------------------------------------------------*/
@media screen and (min-width: 960px) {
	.inner {padding:11% 0;}
	h2 {font-size:4.2rem;}
	.sub-title_en {top:-4.25rem; font-size:6rem;}
	.sub-title_en + * {margin-top:48px;}
	p:not(.sub-title_en) {font-size:2.2rem;}
	.brpc {display:block;}
	.brsp {display:none;}

	.flex-column {-webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
	.flex-column:not(.sub-title_en + *) {margin-top:64px;}
	.flex-column figure {-ms-flex-preferred-size:49.28%; flex-basis:49.28%;}
	.flex-column .flex-text {-webkit-box-flex:0; -ms-flex:0 2 45.62%; flex:0 2 45.62%; -webkit-box-ordinal-group:0; -ms-flex-order:0; order:0; margin-top:0;}
	.flex-column .flex-text p + p {margin-top:16px;}

	.mainVisual {background-image:url(../img/mainVisual_tab.png); background-image:-webkit-image-set(url(../img/mainVisual_tab.png) 1x, url(../img/mainVisual_tab@2x.png) 2x); background-image:image-set(url(../img/mainVisual_tab.png) 1x, url(../img/mainVisual_tab@2x.png) 2x);}
	.mainVisual::before {padding-top:70.83%;}
	.mainVisualIn {top:8%; height:81.47%;}
	.mv_point {width:60%;}
	.mv_point li {width:30.73%;}

	.title-ma {margin-top:26px;}
	.title-fade:not(:last-child) {display:inline-block; -webkit-transform:translateY(-22px); transform:translateY(-22px);}
	.bgextend {margin-right:8px; margin-bottom:9px;}

	.job-role .flex-text {font-size:2.1rem;}

	.flow li {width:28%; margin:0 2.5%;}
	.flow li:nth-child(n+3) {margin-top:0;}
	.flow li:nth-child(n+4) {margin-top:104px;}
	.flow li figure {width:86%;}
	.flow li p {font-size:1.9rem;}
	.flow .balloon {top:-24px;}

	.dl_border-bottom {-js-display:flex; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:nowrap; flex-wrap:wrap; font-size:1.7rem;}
	.dl_border-bottom dt {-js-display:flex; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex-align:center; -webkit-box-align:center; align-items:center; width:25%; padding:12px 0; border-bottom:2px solid #0065b3;}
	.dl_border-bottom dd {width:75%; padding:20px 24px 12px;}

	.btn {font-size:2rem;}
	.btn:hover, .btn:focus {background-color:#006fc4;}
}

/* 1200px以上
----------------------------------------------------------*/
@media screen and (min-width: 1200px) {
	main {margin-bottom:164px;}
	section {padding-bottom:120px;}
	section::before {border-width:0 100vw 120px 0;}
	section:nth-child(odd)::before {border-width:0 0 120px 100vw;}
	.inner {max-width:1200px; padding:113px 0;}

	h2 {font-size:4.8rem;}
	.sub-title_en {top:-4.25rem; font-size:7.2rem;}
	p:not(.sub-title_en) {font-size:2.5rem;}

	.flex-column .flex-text p + p {margin-top:26px;}

	.mainVisual {background-image:url(../img/mainVisual_pc.png); background-image:-webkit-image-set(url(../img/mainVisual_pc.png) 1x, url(../img/mainVisual_pc@2x.png) 2x); background-image:image-set(url(../img/mainVisual_pc.png) 1x, url(../img/mainVisual_pc@2x.png) 2x);}
	.mainVisual::before {padding-top:710px;}
	.mainVisualIn {top:56px; max-width:1200px; height:580px;}
	.mv_point {width:588px;}
	.mv_point li {width:180px;}

	.job-role .flex-text {font-size:2.5rem;}

	.balloon {padding:10px 16px 14px; font-size:2.4rem;}

	.flow li p {margin-top:12px; font-size:2.3rem;}
	.flow li p br {display:block;}

	.job-description .inner {padding-bottom:56px;}
	.job-description p:not(.sub-title_en) + p {margin-top:24px;}

	.dl_border-bottom {font-size:1.8rem;}
	.dl_border-bottom dt {padding:16px 0;}
	.dl_border-bottom dd {padding:24px 40px 16px;}

	ul.list li:not(:last-child) {padding-bottom:8px;}

	footer {padding-bottom:64px;}
	p.copyright {font-size:1.6rem;}

	.btn_form {padding:48px 16px;}
	.btn {font-size:2.4rem;}
}

/* IE Only */
@media all and (min-width: 1200px), (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.mainVisualTitle {font-size:5.6rem;}
	.mainVisualTitle span {font-size:6.4rem;}
}