@charset "UTF-8";
/* CSS Document */
html, body{width: 100%; height: 100%; margin: 0; padding: 0; font-size: 62.5%; line-height: 1.5; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";scroll-behavior: smooth;} 

#header{width: 100%; height: 42px; position: fixed; top:0; z-index: 999999; background-color: rgba(255,255,255,0.5)}
#header img{width: auto; height: 100%;}
#header h1 { display: block; position: absolute; top: 34%; left: 2%; height: 32%; max-width: 28%; }
#header h1 strong {display: none;}
#header::after{ display: block; clear: both; }
.head-right { display: block; float: right; position: relative; height: 42px;  }
a.sperogo { display: block; position: absolute; height: 26%; top: 36%; right: 48px;}
a.sperogo img { display: block; height: 100%; width: auto;}
/* NAVI */
#nav{ display: none; position: fixed; top: 0; right: 0; width: 100%; height:100%; opacity: 0; padding-top: 48px; background-color:rgba(0,57,134,0.9); overflow: hidden; transition: 0.5s; }
#nav li{ display: block; width: 90%; margin: 0 auto; font-size: 1.5rem; }
#nav li a{ display: block; position: relative; padding: 10px 20px; color: #fff; border-bottom: 1px solid #ccc; transition: 0.5s;}
#nav li a::after{ content: ''; display: block; position: absolute; top: 40%; right: 5%; width: 5px; height: 5px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg)}
#nav li a:hover{ color:#87abdd; }
.menu-show-sp {display: block;}
.menu-show-sp a{position: relative;}
.menu-show-sp a::before{content: '!'; display: block; position: absolute; top: 8%; left: -2%; width: 20px; height: 20px; box-sizing: border-box;  background-color: #EF0048; border-radius: 20px; color: #fff; font-weight: bold; text-align: center; box-shadow: 2px 2px 2px rgba(0,0,0,0.5);}

/* HITOLINK */
.menu-hitolink {display:none; }

/*SP MENU*/
#menu-open{ display: block; position: fixed; top: 0; right: 0; width: 42px; height: 42px; background-color: #003986; border: none; z-index: 999999;}
#menu-open span{ display: block; position: absolute; top: 12px; right: 25%; width: 50%; height: 3px; background-color: #fff; transition: 0.5s;}
#menu-open span:nth-child(2){ top: 20px;}
#menu-open span:nth-child(3){ top: 28px;}

/* NAVI OPEN */
.close span:nth-child(1){ top: 20px!important; transform: rotate(45deg)}
.close span:nth-child(2){ opacity: 0;}
.close span:nth-child(3){ top: 20px!important; transform: rotate(-45deg)}
.nav-open{ display: block!important; opacity: 1!important; }

.head-right a.top-link { position: absolute; bottom: 2px; right: 5px; border-radius: 15px; display: block; background-color: #003986; color: #fff; height: 18px; line-height: 18px;font-size: 11px; padding: 0 15px 0 12px; letter-spacing: 1px;}
.head-right a.top-link::after{ content: ''; display: block; position: absolute; top: 32%; right: 5%; width: 4px; height: 4px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}

a {text-decoration: none; transition: 0.5s opacity;}
a:hover { opacity: 0.5;}
h2 { color: #fff; font-size: 1.0rem;}
h2 strong{ font-size: 2.0rem; display: block; letter-spacing: -0.5px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif"; }
h3 { color: #1051ab; text-align: center; font-weight: bold; line-height: 1.8; }
p { font-size: 1.3rem; margin-bottom: 1.0rem;}
sup{font-size: 70%; vertical-align: top;}



.more a { display: block; position: relative; padding: 10px; border-radius: 30px; color: #fff; font-size: 1.4rem; background-color: #003986; text-align: center; margin: 10px auto; width: 70%; max-width: 300px;}
.more a::after { content: ''; display: block; position: absolute; top: 35%; right: 5%; width: 10px; height:10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg)}

#main{width: 100%; height: 90%; background: url("../img/main-bg.png") 0 -10px / 200% auto repeat-x #fff ; animation: mainbg 15s linear infinite;overflow-x: hidden}

@keyframes mainbg {
    0% { background-position: 0 -10px; }
    100% { background-position: 200% -10px; }
}
#main .wraper{position: relative; width: 100%; height: 100%;overflow: hidden}
.main-inner {position: absolute; width: 100%; height: 100%; overflow: hidden;}
.main-inner img {position: absolute; width: 150%; height: auto; top: -5%; left: -15%; animation: mainimg 2s 2s ease forwards; opacity: 0;}

@keyframes mainimg {
    0% { opacity: 0; top: 0px; }
    100% { opacity: 1; top: -5%;}
}
.main-sub {position: absolute;height: 45%; width: auto; top: 50px; left: 3%; }
.main-sub img {width: auto; height: 100%;}
.main-copy {position: absolute; width: 94%; bottom: 10%; left: 3%;}
.main-copy span {display: block; margin-bottom: 5px;}
.main-copy span img {display: block; width: 100%; height: auto;opacity: 0;}
.main-copy1 img {animation: maincopy 2s 3s ease forwards;}
.main-copy2 img {animation: maincopy 2s 4s ease forwards;}
.main-copy3 img {animation: maincopy 2s 5s ease forwards;}
.main-copy4 {position: absolute; bottom: 6%; right: 0; width: 62%; height: auto;}
.main-copy4 img {animation: maincopy 2s 6s ease forwards; }

@keyframes maincopy {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.main-icon{display: block; position: absolute; bottom: 2%; left: 7%; width: 86%; text-align: center;}
.icon-movie{position: relative;background: #0088cf; background: linear-gradient( #0088cf 0%, #1f63c2 100%); display: block; color: #fff; font-weight: bold; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";  padding: 10px 15px 8px 35px; font-size: 1.3rem; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.5); animation: mainicon 2s 6s ease infinite;}
.icon-movie::before{ content:''; display: block; width:20px; height: 20px; background-image: url("../img/icon-recruit.png"); background-size: contain; background-repeat: no-repeat; position: absolute; top: 25%; left: 10px;}
@keyframes mainicon {
    0% { text-shadow: 0 0 0 rgba(255,255,255,0.9)}
    50% { text-shadow: 0 0 0 rgba(255,255,255,0.9);transform: translateY(0px)}
    60% { text-shadow: 0 0 15px rgba(255,255,255,0.9);transform: translateY(-5px)}
    70% { text-shadow: 0 0 0 rgba(255,255,255,0.9);transform: translateY(0px)}
    80% { text-shadow: 0 0 15px rgba(255,255,255,0.9);transform: translateY(-5px)}
    100% { text-shadow: 0 0 0 rgba(255,255,255,0.9);transform: translateY(0px)}
}

.main-news{display: block; position: absolute; top: 42px; right: 0; overflow-x: hidden;}
.main-news a {display: flex; width: 94vw; background-color: rgba(0,0,0,0.8); color: #fff; padding: 10px 3vw; text-align: left; font-size: 1.2rem; line-height: 1.2; animation: mainnews 1s 1s ease forwards; opacity: 0; transition: 0.5s;}
.main-news a:hover{background-color: rgba(0,0,0,0.5);}
.main-news strong{display: inline-block; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif"; margin-right: 10px;font-size: 1.2rem; color: #aaa;}
.main-news span{display:inline-block;}
@keyframes mainnews {
    0% { opacity: 0; margin-right: -100vw;}
    100% { opacity: 1; margin-right: 0;}
}

.wrap { width: 86%; margin: 0 auto;}

.movie { width: 100%; margin: 0 auto 50px auto;}
.movie h4 { width: 100%; margin: 0 auto 20px auto; text-align: center; font-size: 1.6rem; font-weight: bold; color: #0f4590; letter-spacing: 3px;}
.movie h4 strong { display: block; font-size: 3.2rem; font-weight: normal;font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif"}
.movie ul { display: block; list-style: none;}
.movie ul li { display: block; width: 100%; text-align: center; font-size: 1.2rem; color: #555; margin-bottom: 20px;}
.movie ul li strong { display: block; font-size: 1.4rem; margin: 10px auto 5px auto; color:#0f4590;}
.movie iframe { width: 100%; height: 50vw; display: block; margin: 0 auto;}

#about{width: 100%; padding: 50px 0; background: url("../img/blue01.png") calc(50% - 180px) 0 / 360px auto no-repeat #f0f0f0 ; position: relative;overflow: hidden;z-index: -999999;}
#about h2{ margin-bottom: 20px;}
#about h2 strong{ color: #111; margin-top: 10px;}
#about h3{ font-size: 1.6rem; margin: 10px 0;}
#about p{ line-height: 1.8; color: #555;}

#factory{width: 100%; padding: 50px 0; background: url("../img/blue02.png") calc(50% - 100px) 260px / 360px auto no-repeat #fff ; position: relative;overflow: hidden;z-index: -999999;}
#factory h2{ color:#1f64c2;}
#factory h2 strong{ color: #111; margin-top: 10px; letter-spacing: 1px;}
.s3 { position: relative; height: 14rem; color:#1f64c2;font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";}
.s3 strong{display: block; position: absolute; top: -5rem; left: 0; font-size: 14.0rem; font-weight: 100;}
.s3 sup{display: block; position: absolute; top: 0; left: 6rem; font-size: 5rem;}
.s3 span{display: block; position: absolute; top: 7rem; left: 7rem; font-size: 2.5rem;}
#factory h3{ font-size: 1.6rem; margin: 10px 0;}
#factory p{ line-height: 2; color: #555;}

.vr { width: 100%; padding: 0 0 1px 0; }
.vr a { padding: 40px 0; background-position: center center; background-size: 100%; background-repeat: no-repeat; transition: 1s;}
.vr a:hover { opacity: 1; background-size: 110%;}
.vr a:nth-child(1) {background-image: url("../img/link-hikone.png"); }
.vr a:nth-child(2) {background-image: url("../img/link-yasu.png"); }
.vr h2{ text-align: center; margin-bottom: 20px; font-size: 1.3rem; letter-spacing: 5px; }
.vr h2 strong{ font-size: 2rem;}
.vr span { width: 60%; max-width: 300px; display: block; position: relative; padding: 10px; border-radius: 30px; color: #fff; font-size: 1.2rem; background-color: #003986; text-align: center; margin: 10px auto; transition: 0.5s;}
.vr span::after { content: ''; display: block; position: absolute; top: 40%; right: 10%; width: 6px; height:6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);transition: 0.5s;}
.vr a:hover span { color: #003986; background-color: #fff;}
.vr a:hover span::after { right: 5%; border-top: 2px solid #003986; border-right: 2px solid #003986;}

.vr2clum::after {content: ''; display: block; clear: both;}
.vr2clum a{ display: block; float: none; width: 100%;}


#product{width: 100%; padding: 50px 0; background: url("../img/blue03.png") calc(50% - 100px) 0 / 480px auto no-repeat #1f63c2 ;}
#product h2{ text-align: center; margin-bottom: 20px; }
#product h2 strong{ font-size: 2.4rem;  letter-spacing: 2px;}
#product ol { color: #fff;}
#product ol li{ list-style: none; position: relative;}
#product ol li h5{ line-height: 1.2; font-size: 2.0rem; }
#product ol li p{ line-height: 1.8; }

#study{width: 100%; padding: 50px 0; background-image: url("../img/study-bg.png"); background-position: top center; background-size: cover; position: relative; overflow: hidden}
#study .wrap{ width: 86%; margin: 0 auto;}
#study h2{  text-align: center; margin-bottom: 120px; color: #1f63c2; }
#study h2 strong{ letter-spacing: -0.5px; }
#study p{ line-height: 1.8; }
.studyanime {position: absolute; top: 15%; left: 0; height: 50%; width: 100%; background-image: url("../img/anime.gif"); background-position: bottom center; background-size: cover; z-index: -999; opacity: 0.85;}
.studyanime::after {content:''; display: block; width: 100%; height: 100%; background: #fff; background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}

#news{width: 100%; padding: 50px 0; background-color: #070e27; }
#news h2{ font-size: 1.0rem; text-align: center; margin-bottom: 40px; color: #fff; }
#news h2 strong{ font-size: 2.0rem; display: block; letter-spacing: -0.5px; }
.sr-top-news-list-block .sr-top-news-list-block-top{display: flex; justify-content: space-between;}
.sr-top-news-list-block .sr-top-news-list-block-top .sr-top-news-list-block-date{  color: rgba(255,255,255,.6); font-size: 1.2rem;}
.sr-top-news-list-block .sr-top-news-list-block-top .sr-top-news-list-block-label{display: block; height: 22px; width: 120px; line-height: 23px; border-width: 1px; border-style: solid; text-align: center; font-size: 1.2rem;}
.sr-top-news-list-block .sr-top-news-list-block-top .sr-top-news-list-block-label.news { border-color: #4568d9; color: #4568d9;}
.sr-top-news-list-block .sr-top-news-list-block-content{margin-top: 5px; margin-bottom: 30px; color: #fff; font-size: 1.2rem;}
.sr-top-news-list-block .sr-top-news-list-block-content a{color: #fff; }

.bana {margin-top: 40px;}
.bana a {display: block; margin-top: 20px;}
.bana a img {display: block; width: 100%;}

.sr-footer {
    padding: 30px 0;
    background: #0b101a;
    color: #a6a6a6;
}
.sr-footer .sr-footer-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1360px;
    margin: auto;
	width: 86%;
}
@media (max-width: 1360px) {
.sr-footer .sr-footer-content {width: 96%;}
}
.sr-footer .sr-footer-copyright {
    font-size: 1rem;
}
.sr-footer .sr-footer-content>* {
    flex: 0;
}
.sr-footer img {
    vertical-align: inherit;
}
.sr-footer .sr-footer-list {
    font-size: 1.1rem;
	line-height: 1.2;
    display: flex;
    float: right;
}
.sr-footer a:active, .sr-footer a:link, .sr-footer a:visited {
    color: #a6a6a6;
    text-decoration: none;
}
.sr-footer .sr-footer-list>li+li {
    margin-left: 15px;
}
.has-text-center {
    text-align: center;
	margin: 20px 0;
}
.show-pc {
    display: none!important;
}


/* Scroll fadein */
.fadeIn { opacity: 0; transition: 2s; }
.fadeIn.is-show { opacity: 1; }

/* SLIDER */
.slick-arrow_prev, .slick-arrow_next {
	display: block; height: 20px; width: 20px; border-radius: 10px; background-color: rgba(0,0,0,0.6); position: absolute; z-index: 999;
}
.slick-arrow_prev img, .slick-arrow_next img {
	width: 100%; height: 100%;
}
.slick-arrow_prev{
	top: 20% ;left: -17px;
}
.slick-arrow_next{
	top: 20% ; right: -17px;
}

/* bg graytext */
.graytext{ position: absolute; top: 2%; right: -4%; height: 50%; max-height: 500px; width: auto; z-index: -888888;}
.graytext img{ width: auto; height: 100%; }

/* MOVIE POPUP */
#movie-box {background: rgba(0,0,0,0.9); display: block; position: fixed; width: 100%; height: 100%; z-index: -999999; top: 0; left: 0; opacity: 0; transition: 2s;}
#movie-box iframe {display: block; margin: 0 auto; margin-top: 35%; width: 90%; height: auto; min-height: 180px; }
#movie-box a {display: block; margin: 0 auto; color: #fff; text-align: center; padding: 15px 20px; font-size: 1.3rem; border: 1px solid #ccc; width: 60%; margin-top: 30px;}
.movie_on {opacity: 1 !important; z-index: 888888!important; ;}



/* ------FOR PC------ */
@media (min-width: 1000px) {
#header{height: 62px;background-color: rgba(255,255,255,0.85); position: fixed;}
#header img{width: auto; height: 34px;}

#header img{width: auto; height: 100%;}
#header h1 { display: block; position: absolute; top: 35%; left: 1.9%; height:38%; max-width: 40%; }
#header h1 img { display: inline-block; margin-right: 2.2vh; vertical-align: bottom;}
#header h1 strong{ display: inline-block; color: #000; font-weight: normal; font-size: 1.3rem; line-height: 1; vertical-align: bottom;  }
.head-right { display: block; top: 0; right: 0; height: 62px; width: 60% ;}
a.sperogo { display: block; position: absolute; height: 22%; top: 15%; right: 160px;}
a.sperogo img { display: block; height: 100%; width: auto;}
	
/* NAVI */
#nav{ display: block; position: absolute; top: 52%; right: 160px; width: auto; height: auto; padding-top: 0; background-color: transparent; opacity: 1; }
#nav li{ display: inline-block; width: auto; margin: 0; font-size: 1.1rem;}
#nav li a{ display: inline-block; position: static; color: #333; padding: 0 0 0 4px; border: none;}
#nav li a::after{ position: static;content: '|'; display: inline-block; margin-left: 4px; color: #ccc; border: none; transform: rotate(0);}
#nav li a:hover{ color:#1f64c2; }
.menu-show-sp {display: none!important;}
	
/* HITOLINK */
.menu-hitolink {display: block; width: 135px; height: 100%; position: absolute; font-size: 1.3rem; font-weight: bold; box-sizing: border-box; padding: 1.6rem 20px 0 15px; top: 0; right: 0; background:linear-gradient( #0088cf 0%, #003986 100%); color: #fff; line-height: 1.1; }
.menu-hitolink::before{content: '!'; display: block; position: absolute; top: -1%; left: -6%; width: 20px; height: 20px; box-sizing: border-box;  background-color: #EF0048; border-radius: 20px; color: #fff; font-weight: bold; padding: 3px; text-align: center; box-shadow: 2px 2px 2px rgba(0,0,0,0.5);}
.menu-hitolink::after{ content: ''; display: block; position: absolute; top: 40%; right: 8%; width: 8px; height:8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);transition: 0.5s;}
.menu-hitolink:hover {opacity: 0.8;}
.menu-hitolink:hover::after {right: 3%;}
	
/*SP MENU*/
#menu-open{ display: none;}

h2 {font-size: 1.5rem;}
h2 strong{ font-size: 3.6rem; margin-top: 10px; }
p {font-size: 1.5rem; line-height: 2.0 ;}

.more a { padding: 20px;}
.more a::after {  top: 40%;}
	

.vr { width: 100%; padding: 0 0 1px 0; }
.vr a { padding: 70px 0; background-position: center center; background-size: 100%; background-repeat: no-repeat; transition: 1s;}
.vr h2{ text-align: center; margin-bottom: 40px; }
.vr h2 strong{ font-size: 3rem;  letter-spacing: 2px;}
.vr span { padding: 20px; font-size: 1.4rem;}
.vr span::after {width: 10px; height:10px;}
.vr2clum a{ float: left; width: 50%;}

	
.main-inner img {width: auto; height: 110%; top: -5%; left:46%;}
.main-sub {height: 45%; width: auto; top: 80px; left: 1.5%; }
.main-copy {width: 50%; bottom: 10%; left: 5%;}
.main-copy span {display: block; margin-bottom: 5px;}
.main-copy span img {display: block; max-width: 100%; height: 100%;}
	
.main-icon{display: none; position: absolute; bottom: 12%; left: auto; right: 2%; width: auto;}
.icon-movie{position: relative; padding: 20px 30px 18px 70px; font-size: 2.0rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.5);}
.icon-movie::before{ content:''; display: block; width:42px; height: 42px; top: 16%; left: 20px;}

.main-news{top: auto; bottom: 0; right: 0; }
.main-news a {display: inline-block; width: 50vw; padding: 10px 20px; font-size: 1.4rem; line-height: 1.4; }
.main-news strong{margin-right: 10px;font-size: 1.8rem;}
	
.wrap { width: 80%; margin: 0 auto;}
	
.movie { width: 80%; margin: 0 auto 50px auto;}
.movie h4 {margin: 0 auto 50px auto}
.movie h4 strong { font-size: 4.2rem;}
.movie h4 strong::before,.movie h4 strong::after {content: ''; display: inline-block; width: 24px; height: 1px; background-color: #0f4590; margin: 0 10px; vertical-align: middle;}
.movie ul { display: flex; justify-content: space-between; }
.movie ul li { width: 48%; }
.movie ul li strong { }
.movie iframe { height: 22vw;}
	
#about{ background: url("../img/blue01.png") calc(20% - 700px) 0 / auto 85% no-repeat #f0f0f0 ; padding: 100px 0;}
#about h2{ margin-bottom: 100px;}
#about h3{ font-size: 2rem; margin: 50px 0 20px 0;}
#about p { max-width: 800px; margin: 0 auto 50px auto;}
	
#factory{background: url("../img/blue02.png") 0 430px / 720px auto no-repeat #fff ; padding: 100px 0 50px 0;}
.s3 {height: 21rem;}
.s3 strong{top: -7.5rem; left: 0; font-size: 21.0rem;}
.s3 sup{top: 0; left: 9rem; font-size: 7.5rem;}
.s3 span{top: 10.5rem; left: 10.5rem; font-size: 3.75rem;}
#factory h3{ font-size: 2rem; margin: 50px 0 20px 0;}
#factory p { max-width: 800px; margin: 0 auto;}
	


#product{background: url("../img/blue03.png") calc(50% - 100px) 0 / 660px auto no-repeat #1f63c2 ; padding: 100px 0;}
#product h2{ margin-bottom: 100px;}
#product h2 strong{ font-size: 3.6rem; margin-bottom: 100px;}
#product ol li { max-width: 800px; margin: 0 auto 50px auto;}
#product ol li h5 {font-size: 3.0rem;  margin: 15px 0 0 0;}
	
#study h2{margin-bottom: 40%; }
#study p { max-width: 800px; margin: 0 auto 50px auto;}
.studyanime {top: 0%; height: 100%;}
	
.sr-top-news-list-block .sr-top-news-list-block-content { font-size: 1.4rem; margin-bottom: 40px;}
.bana{ margin: 60px 0;}
.bana::after{content: ''; display: block; clear: both;}
.bana a { width: 24%; float: left; margin:10px 0 10px 1% ;}

.sr-footer{
    padding: 39px 0 44px;
    height: auto;
}
.sr-footer .sr-footer-content {
    flex-direction: row;
    align-items: flex-end;
}
.sr-footer .sr-footer-content>* {
    flex: 1;
}.sr-footer .sr-footer-list {
    font-size: 1.1rem;
	line-height: 1.2;
    display: flex;
    float: right;
}
.sr-footer a:active, .sr-footer a:link, .sr-footer a:visited {
    color: #a6a6a6;
    text-decoration: none;
}
.sr-footer .sr-footer-list>li+li {
    margin-left: 10px;
}
.has-text-center {
	margin:0;
}
.show-pc.inline-img {
    display: inline!important;
    vertical-align: initial;
}
.show-pc {
    display: block!important;
}
.show-sp {
    display: none!important;
}
	
/* SLIDER */
.slick-arrow_prev, .slick-arrow_next {
	height: 48px; width: 48px; border-radius: 24px; 
}
.slick-arrow_prev{
	top: 30% ;left: 1%;
}
.slick-arrow_next{
	top: 30% ; right: 1%;
}
/* bg graytext */
.graytext{ top: 2%; right: 5%; height: 75%; max-height: 1200px; }

/* MOVIE POPUP */
#movie-box iframe {margin-top: 20%; width: 672px; height: 378px; }
}

/* コンテンツ幅調整 */
@media (min-width: 1200px) {
	.wrap { width: 70%; margin: 0 auto;}
}

/* CRE write 20220623 */
#links {margin: 40px auto 0 auto; width: 98%;}
ol.link_anchor{ text-align: center; width: 100%; margin: 30px auto; }
ol.link_anchor::after{ content: ''; display: block; clear: both; }
ol.link_anchor li {display: block; float: left; width: 33%; margin-right: 0.5%; height: 30vw; }
ol.link_anchor li:nth-child(1) { background: url("../img/anchor01.png") center center / cover no-repeat #fff ;}
ol.link_anchor li:nth-child(2) { background: url("../img/anchor02.png") center center / cover no-repeat #fff ;}
ol.link_anchor li:nth-child(3) { background: url("../img/anchor03.png") center center / cover no-repeat #fff ; margin-right: 0;}
ol.link_anchor li a{display: block; position: relative; color: #fff; font-size: 1.0rem; line-height: 1.2; background-color: rgba(0,58,129,0.7); height: 100%; width: 100%; box-sizing: border-box; padding-top: 20%;  box-shadow: 0 20px 20px rgba(0,0,0,0.2)}
ol.link_anchor li a strong{ display: block; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif"; font-size: 1.7rem; margin-bottom: 1rem; letter-spacing: 1px;}
ol.link_anchor li a::after {content: ''; display: block; position: absolute; bottom: 5%; left: 47%; width: 6px; height: 6px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); transition: 0.5s;}
ol.link_anchor li a:hover::after {bottom: 5%;}

ol.link_anchor li:nth-child(1) { position: relative}
ol.link_anchor li:nth-child(1)::before {content:'NEW'; position: absolute; display: inline-block; background-color: #CF0003; color: #fff; font-size: 1.0rem; padding: 10px 5px; border-radius: 20px; top: -8px; right: -8px; box-shadow: 0 5px 10px rgba(0,0,0,0.3); z-index: 2}

#intro{padding: 50px 0 50px 0;}
#intro h2{ display: block; color:#111; text-align: center; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif"; font-size: 2.25rem !important; margin-bottom: 5rem; line-height: 2;}
#intro h3{ font-size: 2rem; margin: 50px 0 20px 0;}
.image-full {width: 100%; margin: 20px auto;}
.image-full img {width: 100%; }
#intro p{ line-height: 2.0; color: #555;}
.text_small{font-size: 90%; color: #999;}

#intro2{padding: 0 0 10px 0; width: 86%; margin: 0 auto;}
.intro2clum_left, .intro2clum_right { margin-bottom: 40px;}
.intro2clum_left img{ width: 100%;}
.intro2clum_right img{ width: 100%;}
#intro2 h3{ text-align: left; font-size: 1.6rem; margin: 20px 0 10px 0;}
#intro2 p{ color: #555; line-height: 2;}
.intro2clum_left::after, .intro2clum_right::after { content: ''; display: block; clear: both; }

a.bana-guide{display: block; width: 86%; max-width: 1000px; margin: 0 auto 60px auto; box-sizing: border-box; border: 5px solid #e7e7e7; background: url("../img/anime.gif") right -25% center / auto 100% no-repeat #fff ; transition: 0.5s;}
a.bana-guide:hover{border: 5px solid #b4cff4;}
a.bana-guide div{padding: 20px 10px; box-sizing: border-box; background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);}
a.bana-guide h5{font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif"; text-align: left; font-size: 2rem; font-weight: normal; margin: 0; color: #0f4590;}
a.bana-guide h6{text-align: left; font-size: 1.0rem; font-weight: normal; margin: 0 0 10px 0; color: #1f63c2;}
a.bana-guide span{ color: #1f63c2; display: inline-block; border-bottom: 1px solid #1f63c2; font-size: 1.2rem;}

.contact_min { text-align: center;}
.contact_min a{display: block; background: url("../img/recruit-bg.png") top center / 110% auto #1f63c2 no-repeat; box-sizing: border-box; padding: 30px 0; margin-bottom: 2px;}
.contact_min h3{ color: #fff; font-size: 1.6rem; letter-spacing: 2px; margin-bottom: 10px; position: relative;}
.contact_min h3::before{ content:'ー '; color: #fff; font-size: 2rem; font-weight: normal; vertical-align: middle;}
.contact_min h3::after{ content:' ー'; color: #fff; font-size: 2rem; font-weight: normal; vertical-align: middle;}
.contact_min span{ display: inline-block; font-size: 1.3rem; font-weight: bold;margin: 0 auto; color: #1f63c2; padding: 15px 30px; background-color: #fff; border-radius: 30px; position: relative; transition: 0.5s;}
.contact_min span::after{ content: ''; display: block; position: absolute; top: 40%; right: 6%; width: 8px; height:8px; border-top: 2px solid #1f63c2; border-right: 2px solid #1f63c2; transform: rotate(45deg);transition: 0.5s;}
.contact_min a:hover{ opacity: 1;}
.contact_min a:hover span{ color: #92c9e8; box-shadow: 0 0 10px rgb(255,255,255)}
.contact_min a:hover span::after{ right: 3%; border-top: 2px solid #92c9e8; border-right: 2px solid #92c9e8;}

/* キャリア採用　特設コンテンツ　共通部分 */
h2.title-blue {text-align: center;  background-color: #003986; color: rgba(255,255,255,0.50); font-size: 1.2rem; padding: 80px 0 140px 0; font-weight: normal; letter-spacing: 10px;}
h2.title-blue strong {display: block; font-size: 2.4rem; letter-spacing: 2px; margin-bottom: 10px; color: #fff;}

.recruitcontents {margin-top: -80px; position: relative;}
.recruitcontents::before {content: ''; display: block; position: absolute; width: 1px; height: 50px; top: -25px; left: 50%; background-color: #fff;}
.recruitcontents img {width: 100%;}
.recruitcontents h3{ text-align: left; font-size: 1.6rem; margin: 40px 0 10px 0;}
.recruitcontents p{ color:#1f63c1; line-height: 2;}

#work{padding: 0 0 50px 0;}

.point { position: relative;box-sizing: border-box; padding: 60px 15px 30px 15px; background-color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.25); margin: 100px auto 60px auto; }
.point h2 { position: absolute; display: block; font-size: 7rem; color: #94b8ea; top: -50px; left: 15px; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";}
.point ol{ text-align: left; }
.point li{ display: block; font-size: 1.4rem; color: #777; margin: 0 0 30px 0; padding-left: 30px; background: url("../img/checkbox.png") left top / 24px 24px no-repeat #fff ; line-height: 1.6;}
.point li strong{ display: block; font-size: 1.6rem; color: #555; }

.interview h2 {display: block; text-align: center; font-size: 3.0rem; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";  color: #999; margin: 60px auto 40px auto; padding-top: 40px; letter-spacing: 5px;}
.interview ol{}
.interview ol::after{content: ''; display: block; clear: both; }
.interview li{display: block; margin-bottom: 30px; box-sizing: border-box; font-size: 1.5rem;}
.interview li:last-child{margin-right: 0; }
.interview li a{color: #555;}
.interview li a::after{content:'READ MORE >'; display: block; color:#0060b4; font-size: 1.2rem; margin-top: 8px;}
.interview li img{display: block; width: 100%; margin-bottom: 10px;}
.interview li strong{ font-size: 1.3rem; color:#0060b4; display: block; margin-bottom: 5px;}

#aboutus{padding: 0 0 50px 0;}
#aboutus p{ margin-bottom: 40px;}

.contact { text-align: center; display: block; background: url("../img/recruit-bg.png") top center / 110% auto no-repeat #1f63c2 ; box-sizing: border-box; padding: 70px 0; color: #fff;}
.contact div{}
.contact h2{ letter-spacing: 10px; font-size: 1.3rem; }
.contact h3{ color: #fff; font-size: 2.4rem; letter-spacing: 2px; margin-bottom: 10px;}
.contact p{ display: block; margin: 30px auto; line-height: 2; text-align: left;  max-width: 600px;}
.contact p strong{ }
.contact a{ display: inline-block; font-size: 1.5rem; font-weight: bold;margin: 0 auto; color: #1f63c2; padding: 15px 40px; background-color: #fff; border-radius: 30px; position: relative; transition: 0.5s;}
.contact a::after{ content: ''; display: block; position: absolute; top: 40%; right: 6%; width: 8px; height:8px; border-top: 2px solid #1f63c2; border-right: 2px solid #1f63c2; transform: rotate(45deg);transition: 0.5s;}
.contact a:hover{ opacity: 1;}
.contact a:hover{ color: #92c9e8; box-shadow: 0 0 10px rgb(255,255,255)}
.contact a:hover::after{ right: 3%; border-top: 2px solid #92c9e8; border-right: 2px solid #92c9e8;}

/* キャリア採用　特設コンテンツ　下層ページ */
.pagemain{height: 62px!important; background: #fff!important;}
.title-interview {margin-bottom: 40px; padding:85vw 20px 20px 20px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0,0,0,0.25); background-repeat: no-repeat; background-position: right top; background-size: 125% auto; background-color:#0060b4;}
.interview01 {background-image: url("../img/int01_01.png");}
.interview02 {background-image: url("../img/int02_01.png");}
.interview03 {background-image: url("../img/int03_01.png");}
.interview04 {background-image: url("../img/int04_01.png");}
.interview05 {background-image: url("../img/int05_01.png");}
.interview06 {background-image: url("../img/int06_01.png");}
.interview07 {background-image: url("../img/int07_01.png");}
.title-interview span {font-size: 2rem; color: #9dcbf3;}
.title-interview h4 {font-size: 2rem; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";  color: #fff; text-shadow: 0 0 20px #0160b4;}
.title-interview p {font-size: 1.2rem; color: #ccc;}

.text-interview-full, .text-interview-right, .text-interview-left { margin-bottom: 40px;}
.text-interview-full h4 {text-align: left;  color: #1051ab; font-size: 2rem; line-height: 1.6; margin: 3rem 0 3rem 0; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";}
.text-interview-right h5,.text-interview-left h5,.text-interview-full h5 {color: #fff; font-size: 1.8rem; line-height: 1.6; margin: 2rem 0 2rem 0; background-color: #1051ab; display: block; padding: 10px;}
.text-interview-full p,.text-interview-right p,.text-interview-left p {color: #333; font-size: 1.5rem; line-height: 2; margin-bottom: 2rem;}
.text-interview-full small,.text-interview-right small,.text-interview-left small {color: #999; font-size: 80%; line-height: 1.6; display: inline-block;}
.text-interview-right img {width: 100%;}
.text-interview-right span {}
.text-interview-left img {width: 100%;}
.text-interview-left span {}
.text-interview-right::after,.text-interview-left::after{content: ''; display: block; clear: both;}
	
/* TOPセミコンバナー設置 */
#bana{margin: 30px auto 50px auto;}
#bana div{text-align: center;}
#bana div a{ position: relative; display: block; max-width: 90%; margin: 0 auto;}
#bana div a::after{content: 'PICK UP'; display: inline-block; position: absolute; color: #fff; font-size: 1.3rem; font-weight: bold; padding: 6px 10px; border: 3px solid #fff; border-radius: 30px; top:-15px; right: -15px;background-color: rgba(0,24,58,0.8);box-shadow: 0 5px 10px rgba(0,0,0,0.35);}
#bana div a img{box-shadow: 0 10px 20px rgba(0,0,0,0.35); width: 100%;}



/* ------FOR PC------ */
@media (min-width: 1000px) {

#links {margin: 0 auto 0 auto; width: 70%;}
ol.link_anchor li {width: 30%; margin-right: 5%; height: 20vw; }
ol.link_anchor li a{font-size: 1.4rem; padding-top: 35%; letter-spacing: 1px;}
ol.link_anchor li a strong{font-size: 4rem; letter-spacing: 2px;}
ol.link_anchor li a::after {bottom: 10%; left: 47%; width: 20px; height: 20px;}

#intro{padding: 120px 0 70px 0;}
#intro h2{ font-size: 4rem !important; margin-bottom: 10rem; line-height: 2;}

#intro2{padding: 0 0 50px 0; width: 100%;}
.intro2clum_left, .intro2clum_right { margin-bottom: 70px;}
.intro2clum_left img{float: left; width: 50%;}
.intro2clum_left div{float: left; width: 460px; margin-left: 40px;}
.intro2clum_right img{float: right; width: 50%;}
.intro2clum_right div{float: right; width: 460px; margin-right: 40px}
#intro2 h3{ text-align: left; font-size: 2rem; margin: 40px 0 20px 0;}
	
a.bana-guide{ width: 100%; margin: 0 auto 120px auto; background: url("../img/anime.gif") right center / 50% auto no-repeat #fff ; }
a.bana-guide div{padding: 60px 40px; background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 80%);}
a.bana-guide h5{font-size: 4.2rem; margin: 0;}
a.bana-guide h6{font-size: 1.6rem; margin: 0 0 20px 0;}
a.bana-guide span{ color: #1f63c2; display: inline-block; border-bottom: 1px solid #1f63c2; font-size: 1.2rem;}

.contact_min a{background: url("../img/recruit-bg.png") top -30px center / 100% auto #1f63c2 no-repeat; padding: 60px 0;}
.contact_min h3{ font-size: 2.2rem;}
.contact_min h3::before{ font-size: 3rem;}
.contact_min h3::after{ font-size: 3rem;}
.contact_min span{ font-size: 1.5rem; padding: 15px 50px;}


/* キャリア採用　特設コンテンツ　共通部分 */
h2.title-blue {font-size: 1.6rem; padding: 120px 0 180px 0;}
h2.title-blue strong {font-size: 3.6rem; }

.recruitcontents {margin-top: -80px; position: relative;}
.recruitcontents::before {height: 100px; top: -50px;}
.recruitcontents img {}
.recruitcontents h3{ font-size: 2rem; margin: 40px 0 10px 0;}
.recruitcontents p{ }

#work{padding: 0 0 100px 0;}

.point { padding: 80px 30px 30px 30px; margin: 100px auto 60px auto; }
.point h2 { font-size: 9rem; top: -60px; left: 30px;}
.point ol{ }
.point li{ font-size: 1.4rem; margin: 0 0 30px 0; }
.point li strong{ font-size: 2rem; }

.interview h2 {display: block; text-align: center; font-size: 3.0rem; font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";  color: #999; margin: 60px auto 40px auto; border-top: 1px solid #ccc; padding-top: 40px;}
.interview ol{}
.interview ol::after{content: ''; display: block; clear: both; }
.interview li{display: block; float: left; width: 30%; margin-right: 5%; }
.interview li:last-child{margin-right: 0; }

#aboutus{padding: 0 0 100px 0;}
#aboutus p{ margin-bottom: 60px;}
#aboutus .movie {width: 40vw}
	
#factory .movie {width: 40vw}

.contact { background: url("../img/recruit-bg.png") top center / 100% auto no-repeat #1f63c2 ; padding: 100px 0;}
.contact div{}
.contact h2{ }
.contact h3{ font-size: 4rem; }
.contact p{ }
.contact p strong{ }
.contact a{ font-size: 1.8rem;}
.contact a::after{ }

/* キャリア採用　特設コンテンツ　下層ページ */
.pagemain{height: 62px!important; background: #fff!important;}
.title-interview {margin-bottom: 40px; padding:60px 250px 60px 60px; background-repeat: no-repeat; background-position: right center; background-size: contain; background-color:#0060b4;}
.interview01 {background-image: url("../img/int01_01.png");}
.interview02 {background-image: url("../img/int02_01.png");}
.interview03 {background-image: url("../img/int03_01.png");}
.title-interview span {font-size: 4.6rem; color: #9dcbf3;}
.title-interview h4 {font-size: 3.0rem; }
.title-interview p {font-size: 1.4rem;}

.text-interview-full, .text-interview-right, .text-interview-left { margin-bottom: 50px;}
.text-interview-full h4 {text-align: center;  font-size: 3rem; margin: 2rem 0 7rem 0;}
.text-interview-right h5,.text-interview-left h5 {margin: 0 0 3rem 0; }
.text-interview-full p,.text-interview-right p,.text-interview-left p { font-size: 1.6rem;}
.text-interview-full small,.text-interview-right small,.text-interview-left small {}
.text-interview-right img {float: right; margin-left: 5%; width: 45%;}
.text-interview-right span {float: left; width: 50%;}
.text-interview-left img {float: left; margin-right: 5%; width: 45%;}
.text-interview-left span {float: right; width: 50%;}
.text-interview-right::after,.text-interview-left::after{content: ''; display: block; clear: both;}
	
/* TOPセミコンバナー設置 */
#bana{margin: 0 auto 80px auto;}
#bana div{}
#bana div a{max-width: 720px;}
#bana div a::after{padding: 10px 15px;}
#bana div a img{}
}

.int-new {position: relative;}
.int-new::after {content:'NEW'; position: absolute; display: inline-block; background-color: #CF0003; color: #fff; font-size: 1.0rem; padding: 10px 5px; border-radius: 20px; top: -8px; right: -8px; box-shadow: 0 5px 10px rgba(0,0,0,0.3)}