@charset "utf-8";
/*------------------------------------------------------------
	書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.taLeft { text-align: left !important; }
.taCenter { text-align: center !important; }
.taRight { text-align: right !important; }

/* フォントの大きさ（プラス） */
.fsP1 { font-size: 1.08em !important; }
.fsP2 { font-size: 1.16em !important; }
.fsP3 { font-size: 1.24em !important; }
.fsP4 { font-size: 1.32em !important; }
.fsP5 { font-size: 1.4em !important; }

/* フォントの大きさ（マイナス） */
.fsM1 { font-size: 0.92em !important; }
.fsM2 { font-size: 0.84em !important; }
.fsM3 { font-size: 0.76em !important; }
.fsM4 { font-size: 0.68em !important; }
.fsM5 { font-size: 0.6em !important; }

/* フォントの太さ */
.fwNormal { font-weight: normal !important; }
.fwBold { font-weight: bold !important; }

/*------------------------------------------------------------
	微調整用クラス（※多用しないこと）
------------------------------------------------------------*/
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
	* html .clearfix {
		zoom: 1;
	}

	*+html .clearfix {
		zoom: 1;
	}

.clearfix:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

/*------------------------------------------------------------
	mainImg
------------------------------------------------------------*/
#main .mainImg {
	height: 560px;
	background: url(../../img/index/bg01.jpg) no-repeat center center;
	background-size: cover !important;
	box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	#main .mainImg {
		height: 551px;
		position: relative;
		background: url(../../img/index/sp_bg01.jpg) no-repeat center bottom;
	}
	
	#main .mainImg .spSlide {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 72px;
		text-align: center;
		font-size: 8px;
		font-weight: 700;
		z-index: 2;
	}
	
	#main .mainImg .spSlide a {
		display: inline-block;
		color: #1c2088;
	}
	
	#main .mainImg .spSlide img {
		width: 20px;
		margin: 0 auto;
		display: block;
	}
	
}

/*------------------------------------------------------------
	mainBox
------------------------------------------------------------*/
#main .mainBox {
	width: 960px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	#main .mainBox {
		width: auto !important;
		margin: 0 20px;
	}
	
}

/*------------------------------------------------------------
	comTxtBox
------------------------------------------------------------*/
#main .comTxtBox {
	margin-bottom: 80px;
	padding: 112px 0 79px;
	text-align: center;
}

#main .comTxtBox h2 {
	margin-bottom: 46px;
	font-size: 20px;
	font-weight: 700;
}

#main .comTxtBox h2 span {
	margin-bottom: 3px;
	display: block;
	font-size: 28px;
	letter-spacing: 3px;
}

#main .comTxtBox p {
	line-height: 2;
	font-weight: 200;
}

@media screen and (max-width: 767px) {
	#main .comTxtBox {
		margin-bottom: 53px;
		padding: 150px 5px 88px;
	}

	#main .comTxtBox h2 {
		margin-bottom: 29px;
		font-size: 12px;
	}

	#main .comTxtBox h2 span {
		margin-bottom: 2px;
		font-size: 18px;
		letter-spacing: 2px;
	}

}

/*------------------------------------------------------------
	comTtl
------------------------------------------------------------*/
#main .comTtl {
	margin: 0 0 25px -4px;
}

#main .comTtl span {
	padding: 6px 10px 6px 7px;
	display: inline-block;
	position: relative;
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	background-color: #1E2188;
}

#main .comTtl span:before {
	width: 44px;
	background: url(../../img/common/icon03.png) no-repeat left top;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -44px;

	content: ""; 
}

#main .comTtl span:after {
	width: 44px;
	background: url(../../img/common/icon04.png) no-repeat left top;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -44px;

	content: ""; 
}

@media screen and (max-width: 767px) {
	#main .comTtl {
		margin: 0 0 -14px !important;
		position: relative;
		z-index: 2;
	}

	#main .comTtl span {
		padding: 2px 3px 3px;
		font-size: 18px;
	}

	#main .comTtl span:before {
		width: 22px;
		left: -22px;
	}

	#main .comTtl span:after {
		width: 22px;
		right: -22px;
	}
	
}

/*------------------------------------------------------------
	animation
------------------------------------------------------------*/
.animation .fadeInUp,
.animation .fadeIn,
.animation .fadeInLeft,
.animation .fadeInRight {
	opacity: 0;
	-webkit-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
}

.animation.show .fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	visibility: visible !important;
}

.animation.show .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.animation.show .fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

.animation.show .fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

.delay01 {
	animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
}

.delay02 {
	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
}

.delay03 {
	animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
}

.delay04 {
	animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s;
}

/*------------------------------------------------------------
	fadeInUp
------------------------------------------------------------*/
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
		-ms-transform: translateY(30px);
		transform: translateY(30px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}

/*------------------------------------------------------------
	fadeIn
------------------------------------------------------------*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*------------------------------------------------------------
	fadeInLeft
------------------------------------------------------------*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*------------------------------------------------------------
	fadeInRight
------------------------------------------------------------*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}