@charset "utf-8";

/* ---------------------------------------- 
 - mainVisual 
---------------------------------------- */
#mainVisual #mainVisualCol {
	padding:50px 0 65px;
	position:relative;	
}
#mainVisual #mainVisualCol .ttlBox {
	width:100%;
	max-width:1500px;
	position:relative;
	margin:0 auto;
}
#mainVisual #mainVisualCol .ttlBox h2 {
	width:75%;
	max-width:564px;
	position:absolute;
	top:0;
	left:5%;
	z-index: 2;
}

#mainVisual #mainVisualCol .leadBox {
	width:90%;
	height:440px;
	position:relative;
	margin: 25px 0 0 auto;
}
#mainVisual #mainVisualCol .leadBox .txtBox {
	position:absolute;
	top:0;
	left:0;
	padding:120px 4% 0;
	text-align:left;
	z-index: 1;
	-webkit-transform: translate3d(0, 10px, 0);
	transform: translate3d(0, 10px, 0);
	height: 100%;
	box-sizing:border-box;
}
#mainVisual #mainVisualCol .leadBox .txtBox.slidein {
	-webkit-transition-duration: 0.7s;
	transition-duration: 0.7s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}
#mainVisual #mainVisualCol .leadBox .txtBox h3 {
	width:315px;
	padding:0 0 15px;
}
#mainVisual #mainVisualCol .leadBox .txtBox .txt {
	font-size:15px;
	line-height:2.0;
}
#mainVisual #mainVisualCol .leadBox .txtBox .txt span {
	font-size:17px;
	font-weight:bold;
	padding:0.5em 0 0;
	line-height:2.2;
}
#mainVisual #mainVisualCol .leadBox .txtBox .bg {
	position:absolute;
	bottom:0;
	left:35px;
	z-index: -1;
}
#mainVisual #mainVisualCol .leadBox .bgBox {
	width:100%;
	background:#fff;
	overflow:hidden;
	height:440px;
	-webkit-transform: translate3d(100.1%, 0, 0);
	transform: translate3d(100.1%, 0, 0);
}
#mainVisual #mainVisualCol .leadBox .bgBox.slidein {
	-webkit-transition-duration: 1.2s;
	transition-duration: 1.2s;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
#mainVisual #mainVisualCol .leadBox .bgBox .pht {
	position:relative;
	float:right;	
	width:600px;
}
#mainVisual #mainVisualCol .leadBox .bgBox .pht .bg {
	position:absolute;
	top:0;
	left:0;
}
#mainVisual #mainVisualCol .leadBox .bgBox .pht .slider {
	width:100%;
}
#mainVisual #mainVisualCol .scrollBtn {
	display:none;
	position:absolute;
	bottom:4%;
	width:100%;
	margin:0 auto;
	font-size:10px;
}
#mainVisual #mainVisualCol .scrollBtn a {
	display:inline-block;
	margin-left:12%;
	color:#003280;
}
#mainVisual #mainVisualCol .scrollBtn a span {
	display:inline-block;
	position: absolute;
    bottom: 0;
    left: 50%;
    width: 12px;
    margin-left: -7px;
}
#mainVisual #mainVisualCol .scrollBtn.fadein a span {
    -webkit-animation: scroll 2.0s infinite;
    animation: scroll 2.0s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  70% {
    -webkit-transform: translate(0, 15px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 15px);
    opacity: 0;
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  70% {
    -webkit-transform: translate(0, 15px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 15px);
    opacity: 0;
  }
}
.fadein{
  animation-name:fade-in;
  animation-duration:1.5s;
  animation-timing-function: ease-in;
  /*animation-delay:1s; 
  animation-iteration-count:1;*/
  animation-direction:normal;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  0% {opacity: 0}
  100% {opacity: 1}
}
@media screen and (min-width: 1200px) {
#mainVisual #mainVisualCol .leadBox {
    width: 80%;
    max-width: 1200px;
	margin: 25px auto 0;
}
#mainVisual #mainVisualCol .leadBox .bgBox {
	-webkit-transform: translate3d(0, 10px, 0);
	transform: translate3d(0, 10px, 0);
	opacity:0;
}
#mainVisual #mainVisualCol .leadBox .bgBox.slidein {
	-webkit-transition-duration: 0.7s;
	transition-duration: 0.7s;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	opacity:1.0;
}
#mainVisual #mainVisualCol .leadBox .bgBox .pht .bg {
	left:-70px;
}
}
@media screen and (max-width: 767px) {
#mainVisual #mainVisualCol {
	padding:7% 0 3.5em;
	margin-bottom:1.0em;
	
}
#mainVisual #mainVisualCol .ttlBox {
	width:100%;
}
#mainVisual #mainVisualCol .ttlBox h2 {
	width:85%;
	max-width:662px;
	left:4%;
}
#mainVisual #mainVisualCol .leadBox {
	width:90%;
	height:auto;
	margin: 5% 0 0 auto;
}
#mainVisual #mainVisualCol .leadBox .txtBox {
	padding:50% 6% 0;
}
#mainVisual #mainVisualCol .leadBox .txtBox h3 {
	width:75%;
	max-width:305px;
	padding:0 0 1.5em;
}
#mainVisual #mainVisualCol .leadBox .txtBox .txt {
	font-size:17px;
}
#mainVisual #mainVisualCol .leadBox .txtBox .txt span {
	font-size:19px;
}
#mainVisual #mainVisualCol .leadBox .bgBox {
	background:none;
	height:auto;
}
#mainVisual #mainVisualCol .leadBox .bgBox .pht {
	display:none;
}
#mainVisual #mainVisualCol .scrollBtn {
	display:block;
}
}
@media screen and (max-width: 480px) {
#mainVisual #mainVisualCol .ttlBox h2 {
	width:88%;
	max-width:662px;
}
#mainVisual #mainVisualCol .leadBox .txtBox {
	padding:48% 6% 0;
}
#mainVisual #mainVisualCol .leadBox .txtBox h3 {
	width:55%;
	max-width:305px;
	padding:0 0 1.0em;
}
#mainVisual #mainVisualCol .leadBox .txtBox .txt {
	font-size:13px;
	line-height:1.7;
}
#mainVisual #mainVisualCol .leadBox .txtBox .txt span {
	font-size:15px;
}
}

/* ---------------------------------------- 
 - global 
---------------------------------------- */
#global #globalCol {
	width:80%;
	max-width:800px;
	padding:0 0 70px;
	margin:0 auto;
}
#global #globalCol > h3 {
	width:57%;
	max-width:195px;
	padding:0 0 30px;
}
#global #globalCol .globalBox {
	width:100%;
	position:relative;
	margin-bottom: 80px;
}
#global #globalCol .globalBox:last-child {
	margin-bottom: 0;
}
#global #globalCol .globalBox .pht {
	width:56.25%;
	max-width:450px;
	position:absolute;
	top:-40px;
	left:0;
	z-index: 1;
}
#global #globalCol .globalBox .txtBox {
	width:95%;
	max-width:760px;
	background:#fff;
	margin-left:5%;
	margin-top:40px;
	padding:45px 4% 25px 57%;
	box-shadow: 0 0 9px 0 rgba(0,0,0,0.5);
	box-sizing:border-box;
}
#global #globalCol .globalBox .txtBox .number {
	width:20%;
	max-width:30px;
	padding:0 0 22px;
}
#global #globalCol .globalBox .txtBox h4 { /* global_01 */
	width:60%;
	max-width:160px;
	padding:0 0 17px;
}
#global #globalCol #global_02.globalBox .txtBox h4 { /* global_02 */
	width:51%;
	max-width:130px;
	padding:0 0 17px;
}
#global #globalCol #global_03.globalBox .txtBox h4 { /* global_03 */
	width:51%;
	max-width:130px;
	padding:0 0 17px;
}
#global #globalCol .globalBox .txtBox .txt {
	font-size:12px;
	text-align:left;
	padding:0 0 20px;
}
#global #globalCol .globalBox .txtBox .btn {
	width:55%;
	max-width:150px;	
	margin:0 0 0 auto;
}
#global #globalCol .globalBox .txtBox .btn a {
	display:block;
	padding:10px;
	width:100%;
	box-sizing:border-box;
	line-height:0;
	background: linear-gradient(#7e97bf, #124089);
	border-radius:5px;
}
#global #globalCol .globalBox .txtBox .btn a img {
	max-width:90px;
}
@media screen and (max-width: 767px) {
#global #globalCol {
	width:100%;
	padding:0 0 4.0em;
}
#global #globalCol > h3 {
	width:57%;
	max-width:430px;
	padding:0 0 30px;
}
#global #globalCol .globalBox .pht {
	width:100%;
	max-width:100%;
	position:static;
}
#global #globalCol .globalBox .txtBox {
	width:75%;
	max-width:560px;
	margin:-8% auto 0;
	padding:2.5em 4% 2.0em;
	display: inline-block;
	text-align:center;
}
#global #globalCol .globalBox .txtBox .number {
	width:10%;
	max-width:45px;
	padding:0 0 1.0em;
	margin:0 auto;
}
#global #globalCol .globalBox .txtBox h4 { /* global_01 */
	width:55%;
	max-width:295px;
	padding:0 0 1.0em;
	margin:0 auto;
}
#global #globalCol .globalBox .txtBox .txt {
	font-size:14px;
	text-align:center;
	padding:0 0 0.7em;
	margin:0 auto;
	width:75%;
	max-width:390px;
}
#global #globalCol .globalBox .txtBox .btn {
	width:75%;
	max-width:390px;	
	margin:0 auto;
}
#global #globalCol .globalBox .txtBox .btn a {
	display:block;
	padding:0.5em 25%;
	width:100%;
}
#global #globalCol .globalBox .txtBox .btn a img {
	max-width:183px;
}
}

/* ---------------------------------------- 
 - coming 
---------------------------------------- */
#coming #comingCol {
	width:80%;
	max-width:800px;
	padding:0 0 85px;
	margin:0 auto;
}
#coming #comingCol > h3 {
	width:57%;
	max-width:195px;
	padding:0 0 30px;
}
#coming #comingCol .comingBox {
	width:100%;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
#coming #comingCol .comingBox .txtBox {
	width:45%;
	max-width:240px;
	background:#fff;
	padding:22px 3% 30px;
	box-shadow: 0 0 9px 0 rgba(0,0,0,0.5);
	box-sizing:border-box;
}
#coming #comingCol .comingBox .txtBox .number {
	width:20%;
	max-width:30px;
	padding:0 0 15px;
	margin:0 auto 0 0;
}
#coming #comingCol .comingBox .txtBox h4 {
	width:60%;
	max-width:113px;
}
@media screen and (max-width: 767px) {
#coming #comingCol {
	width:75%;
	max-width:800px;
	padding:0 0 3.0em;
	margin:0 auto;
}
#coming #comingCol > h3 {
	width:60%;
	max-width:335px;
	padding:0 0 2.0em;
	margin:0 auto;
}
#coming #comingCol .comingBox {
	width:100%;
	display: block;
}
#coming #comingCol .comingBox .txtBox {
	width:100%;
	max-width:100%;
	padding:2.0em 4% 2.5em;
	margin:0 auto 2.0em;
}
#coming #comingCol .comingBox .txtBox .number {
	width:10%;
	max-width:45px;
	margin:0 auto;
	padding:0 0 1.2em;
}
#coming #comingCol .comingBox .txtBox h4 {
	width:44.5%;
	max-width:295px;
	padding:0 0 0;
	margin:0 auto;
}
}