@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav.gnav,section,summary,time,mark,audio,video{
margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav.gnav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  Body
 ================================================*/
body {
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
    padding-top:3em;
}
main > section {
  width: 100%;
}
.bg-white {
  background: rgba(255, 255, 255, .75);
  padding: 20px;
  display: inline-block;
}
.hero-layer0,.hero-layer1,.hero-layer2,.hero-layer3,.hero-layer4 {
  width: 100%;
  height: 100vh;
  position: absolute;
  background-position:center;
  background-size: cover;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}
.hero-layer0 {
  background-image: url("../images/27480028.jpg");
  background-size: cover;
  z-index:95;
}
.hero-layer1 {
  background-image: url("../images/20739541.jpg");
  background-size: cover;
  z-index:90;
}
.hero-layer2 {
  background-image: url("../images/27249966.jpg");
  background-size: cover;
  z-index:80;
}
@media screen and (max-width: 479px) {
  .hero-layer2 {
    background-position: 80% 80%;
  }
}
.hero-layer3 {
  background-image: url("../images/28394132.jpg");
  background-size: cover;
  z-index:70;
}
@media screen and (max-width: 479px) {
  .hero-layer3 {
    background-position: 30% 0%;
  }
}
.hero-layer4 {
  background-image: url("../images/35523217.jpg");
  background-size: cover;
  z-index:60;
}

#bg-top {
  height: 100vh;
  min-height: 100vh;
}

#bg-01 {
  background: #eee;
  color:#333
}

#bg-02 {
  background-image: url("../images/48060256.jpg");
  background-size: cover;
  background-attachment: fixed;
}

ul,ol,dl {
	margin: 0;
}
ul li {
	list-style: disc;
}
ol li {
	list-style: decimal;
}
li {
	margin-left: 2em;
}

.hero {
  background-position:center;
  background-size: cover;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  position: relative;

}

#featureAnimation {
  height: 100%;
}
#featureAnimation {
  position:relative;
  visibility:hidden;
}

#featureAnmation {
  transform: translate(30%, 0);
}
.featureTextWhite {
  position:absolute;
}
.featureTextWhite {
  color: white;
  font-size: 10vw;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-top: 5%;
  /*text-align: center;*/
  width: 100%;
  padding: 5px;
}
#firstView {
  color: white;
  font-size: 10vw;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-top: 20%;
  text-align: center;
  width: 100%;
  opacity: 0;
  padding: 5px;
  z-index:120;
}
@media screen and (max-width:767px) {
  #firstView {
    margin-top: 25%;
  }
}

@media screen and (max-width: 479px) {
  #firstView {
    margin-top: 50%;
  }
}

#openFly0, #openFly1, #openFly2 {
  font-weight:bold;
  color:#FFD900;
  margin-top: 15%;
  z-index:95;
}
@media screen and (max-width:767px) {
  #openFly0, #openFly1, #openFly2 {
    margin-top: 20%;
  }
}
@media screen and (max-width:479px) {
  #openFly0, #openFly1, #openFly2 {
  font-size: 10vw;
    margin-top: 50%;
  }
}
#endView {
  font-size: 6vw;
  font-weight:bold;
  color:#FFD900;
  z-index:97;
    margin-top: 15%;
}
@media screen and (max-width:479px) {
  #endView {
  font-size: 9vw;
    margin-top: 50%;
  }
}
.recruit {
/*
    background:#247ABE;
    background-image: linear-gradient(
      -45deg,
      #0077be 25%,
      #1482c5 25%, #1482c5 50%,
      #0077be 50%, #0077be 75%,
      #1482c5 75%, #1482c5
    );
    background-size: 30px 30px;
*/
}
.contact {
	padding:3em;
	line-height: 1.5;
}
@media screen and (max-width:479px) {
.contact {
	/*margin: 0.2em;*/
    padding:5px;
	line-height: 1.2;
}
}
/* ボタン */
.btn a {

	display: inline-block;
	padding: 8px 40px 8px 40px;
	color: #fff !important;
	font-size: 3vw;
	text-align: center;
	text-decoration: none;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
	z-index: 1;
	background: #fc8805;
}
@media screen and (max-width:479px) {
.btn a {
	font-size: 5vw;
}
}
.btn a:hover {
	color: #fff;
	background: #2d91ce;
}

/* 2カラム（スマートフォンでは1カラム) */
.twoCol {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position:relative;
	overflow:hidden;
	margin:0.5em 0 0.5em 0;
    paddind:3em;
/*
    background:#247ABE;
    background-image: linear-gradient(
      -45deg,
      #0077be 25%,
      #1482c5 25%, #1482c5 50%,
      #0077be 50%, #0077be 75%,
      #1482c5 75%, #1482c5
    );
    background-size: 30px 30px;
*/
}
.twoCol .inner {
	position: relative;
	overflow:hidden;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-ms-flex-direction: column-reverse;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: column-reverse;
	flex-direction: column;
	width: calc((400 / 980) *100%);

	height: auto;
	margin:0 2em 10px 2em;

}
.twoCol .inner > a {
	width: 100%;
	height: 100%;
}
.twoCol .inner .image {
	width: 100%;
	min-height: 0%;
}
.twoCol .inner img {
	width:100%;
}
.twoCol .inner .text {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	font-size: 2.4em;
	font-weight: bold;
	color: #FFFF00;
	text-align: center;
    text-shadow: 4px 4px 4px #000;
	vertical-align: middle;
	pointer-events: none;
	line-height: 1.0;
}

.twoCol .inner .text .note {
	font-size: 0.5em;

}
@media screen and (orientation: landscape) and {
   /* 横向きの場合のスタイル */
}
@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
/*
	.twoCol {
		display: block;
	    margin:0.1em
	}
	.twoCol .inner {
		width :100%;
		margin:0 0 20px 0;
	}
*/
}
@media screen and (max-width:767px) {
.twoCol {
	margin:0.2em 0 0.2em 0;
    paddind:0;
}
.twoCol .inner {
	margin:0 10px 10px 10px;
	width :45%;
}
.twoCol .inner .text {
	font-size: 1.8em;
}
.twoCol .inner .text .note {
	font-size: 0.6em;

}
}
@media screen and (max-width:479px) {
	.twoCol {
		display: block;
	    margin:0.1em
	}
	.twoCol .inner {
		width :100%;
		margin:0 0 20px 0;
	}
	.twoCol .inner .text .note {
		font-size: 0.7em;

	}
}

/* 写真ズーム */
.zoom {
	overflow: hidden;
}
.zoom img {
	display: block;
	-moz-transition: -moz-transform 0.8s linear;
	-webkit-transition: -webkit-transform 0.8s linear;
	-o-transition: -o-transform 0.8s linear;
	-ms-transition: -ms-transform 0.8s linear;
	transition: transform 0.8s linear;
	margin-bottom: -50px;
}
.zoom img:hover {
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-o-transform: scale(1.4);
	-ms-transform: scale(1.4);
	transform: scale(1.4);
}
@media screen and (max-width:767px) {
	margin-bottom: -100px;
}
@media screen and (max-width:480px) {
	margin-bottom: -100px;
}
/* オーバーレイ */
.overlay {
	position: relative;
}
.overlay::after{
	background: rgba(0,0,0,0.1);
	content: "　";
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: all .3s ease-out;
	pointer-events: none;
}
.overlay:hover::after {
	background: rgba(0,0,0,0.3);
	transition: all .3s ease-out;
}
.overlay img {
	margin-bottom: 0;
}

.overlayRvs {
	position: relative;
}
.overlayRvs::after{
	background: rgba(0,0,0,0.4);
	content: "　";
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: all .3s ease-out;
	pointer-events: none;
}
.overlayRvs:hover::after {
	background: rgba(0,0,0,0.1);
	transition: all .3s ease-out;
}
.overlayRvs img {
	margin-bottom: 0;
}




/* 背景色 */

  .split {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 400px;
    cursor: pointer;
    z-index:100;
  }
  .split:before {
    color: #777;
    letter-spacing: 1px;
    font-size: 10px;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translate(-50%);
  }
  .split img {
    height: auto;
    width: 100%;
    opacity: 0;
  }
  .split div {
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    transform: rotateY(-50deg) scale(0.5);
    opacity: 0;
    transform-origin: bottom;
    transition: all 0.6s cubic-bezier(0.71, 0.05, 0.09, 0.91);
  }
  .split.active div {
    opacity: 1;
    transform: rotate(0deg) translateY(0);
  }

/* ネオン */
.neon {
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #228DFF,
               0 0 70px  #228DFF,
               0 0 80px  #228DFF,
               0 0 100px #228DFF,
               0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #228DFF,
               0 0 35px #228DFF,
               0 0 40px #228DFF,
               0 0 50px #228DFF,
               0 0 75px #228DFF;
  }
}

.message {
    text-align: center;
    padding-bottom: 10px;
}
.message p {
	padding-left: 0px;
    font-size: 16px;
	color: #000;
	text-align: center;
}
@media screen and (max-width: 767px) {
   /* 横向きの場合のスタイル */
/*
  .message p {
	padding-left: 100px;
     font-size: 0.5em; 
	color: #000;
	text-align: left;
  }
*/
}
@media (orientation: landscape) and (max-width: 767px) {
   /* 横向きの場合のスタイル */
/*
  .message p {
	padding-left: 100px;
    font-size: 0.4em;
	color: #000;
	text-align: left;
  }
*/
}
@media (orientation: portrait) and (max-width:767px) and  {
   /* 縦向きの場合のスタイル */
/*
  .message p {
	padding-left: 100px;
    font-size: 0.6em;
	color: #000;
	text-align: left;
  }
*/
}
@media (orientation: portrait) and (max-width:480px) {
   /* 縦向きの場合のスタイル */
/*
  .message p {
	padding-left: 20px;
    font-size: 0.7em;
	color: #000;
	text-align: left;
  }
*/
}

/*================================================
 *  汎用クラス
 ================================================*/
/* 中央寄せ */
.center {
	text-align: center;
}
a {
	color: #043771;
}
a:hover {
	color: #144d8d;
}
h2 {
	padding: 20px;
	margin-bottom: 0.3em;
    text-align: center;
    font-size: 32px;
	color: #1a0b72;
	line-height: 1.0;
    text-decoration: underline
}

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

h2 {
    font-size: 24px;
}

}

h3 {
	padding-top: 20px;
	margin-bottom: 0.5em;
	font-size: 40px;
	color: yellow;
	font-weight: bold;
	text-align: center;
	line-height: 1.0;
}

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

h3 {
    font-size: 28px;
}
}

.list {
	text-align: center;
	padding: 0 0 0 0.5em;
	font-size: 15px;
}
.list li {
	text-align: center;
	list-style: none;
	background: url(../images/check.png) 0 5px no-repeat;
}
p {
	margin:0 0 1em 0;
	text-align: center;
	padding: 4px;
}
pre {
	padding:3.5em;
	text-align: center;
	font-size: 2em;
}


/**********************************/
* {
  box-sizing: border-box;
}
.rainbow {
  /* フォントサイズなど任意指定 */
  font: bold 5em / 1 Verdana, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  /* 背景グラデーションを指定・幅を 200% にしておく */
  background: linear-gradient(to right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
  /* 背景画像を文字でマスクする */
          background-clip: text;
  -webkit-background-clip: text;
  /* 文字色を透明にできればよく color: transparent でも color: rgba(0, 0, 0, 0) でも可 */
          text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  /* アニメーション指定 */
  animation: rainbow 4s linear infinite;
}

/* 背景の横位置をズラす */
@keyframes rainbow {
  to { background-position-x: 200%; }
}
.gold {
background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
}

.over768_br{
  display: block;
}
.under768_br{
  display: none;
}

@media screen and (max-width:768px) {
  .over768_br{
    display: none;
  }
  .under768_br{
    display: block;
  }
}

.over479_br{
  display: block;
}
.under479_br{
  display: none;
}

@media screen and (max-width:479px) {
  .over479_br{
    display: none;
  }
  .under479_br{
    display: block;
  }
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.tobottom {
	position:fixed;
	bottom:45px;
	right:20px;
	z-index:3000;
}
.tobottom a {
	display:block;
	text-decoration:none;
}
.tobottom img {
	background: #FE9A2E;
}
.tobottom img:hover {
	background:#FFBF00;
}