@charset "UTF-8";

/*BASE*/
*{
	margin: 0;
	padding: 0;
}
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}
html{
	font-size: 18px;
	color: #333;
}

body{
	line-height: 2em;
	font-family: a-otf-ryumin-pr6n,serif;
	font-weight: 300;
	font-style: normal;
}
#wrap{
	overflow: hidden;
	width: 100%;
}
main{
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	display: block;/* IE対策 */
}
/* BASEここまで */


/*aリンク*/
a{
	text-decoration: none;
	color: #333;
}
a:hover{
	color: #333;
}
/* aタグのtarget属性が_blankの場合 .noexは除外 */
a[target=_blank]:not(.notex)::after {
  content:"";
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-left: 5px;
  background:url(img/linkicon.png) no-repeat scroll left center transparent;
}
/* aリンクここまで */


/*画像*/
img{
	border: 0;
	vertical-align: bottom;
}
/*画像ここまで*/


/*リスト*/
ul{
	list-style: none;
}
/* リストここまで */


/* 見出し */
h1{
	font-size: 2.5em;
}
h2{
	font-size: 1.5em;
	line-height: 2em;
}
/* 見出しここまで */


/*span装飾*/
.bold{
	font-weight: bold;
}
.min{
	font-size: 0.7em;
}
.red{
	color: #EC3131;
}
.blue{
	color: #2A71D4;
}
/*span装飾ここまで*/


/* nav */
#menu{
	position: fixed;
	top: 40px;
	left: 40px;
	z-index: 999;
}
#menu img{
	width: 50px;
	object-fit: cover;
}
#nav{
	position: fixed;
	top: 0;
	left: 0;
	width: 350px;
	height: 100vh;
	margin-left: -350px;
	background: #003366;
	text-align: center;
	z-index: 9999;
	transition-property: all;
	transition-duration: 300ms;
}
#nav > a{
	display: block;
	margin-top: 100px;
	margin-bottom: 100px;
}
#nav img{
	height: 35px;
	object-fit: cover;
}
#nav ul li{
	border-bottom: 1px solid #fff;
	font-size: 1.2em;
}
#nav ul li:first-child{
	border-top: 1px solid #fff;
}
#nav ul li a{
	display: block;
	width: 100%;
	line-height: 80px;
	color: #fff;
}
#nav ul li a:hover{
	background: #fff;
	color: #003366;
}

/* Menu class */
.open{
	margin-left: 0!important;
	transition-property: all!important;
	transition-duration: 300ms!important;
}

/* navここまで */


/* footer */
#footer{
	width: 100%;
	height: 240px;
	margin-top: 100px;
	background-color: #003366;
	text-align: center;
}
#footer img{
	height: 40px;
	margin-top: 35px;
	margin-bottom: 15px;
	object-fit: cover;
}
#footer ul div{
	display: block;
	margin-bottom: 15px;
}
#footer ul div li{
	display: inline-block;
	margin-right: 40px;
}
#footer ul div li:last-child{
	margin-right: 0;
}
#footer a{
	color: #fff;
}
#footer .copyright{
	font-size: 0.6em;
	color: #fff;
}
/* footerここまで */

/* effect */
.effect-fade {
	opacity : 0;
	transform : translate(0, 100px);
	transition : all 700ms;
}
	
.effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}

/*ヘルパー*/
.mt20{
	margin-top: 20px;
}
.mt30{
	margin-top: 30px;
}
.mt50{
	margin-top: 50px;
}
.mt70{
	margin-top: 70px;
}
.mt100{
	margin-top: 100px;
}
.mb20{
	margin-bottom: 20px;
}
.mb30{
	margin-bottom: 30px;
}
.mb50{
	margin-bottom: 50px;
}
.mb70{
	margin-bottom: 70px;
}
.mb100{
	margin-bottom: 100px;
}
.sp{
	display: none;
}

/*IE対策*/
.ofi-cover {
	object-fit: cover;
	font-family: "object-fit:cover;";
}
.ofi-contain {
	object-fit: contain;
	font-family: "object-fit:contain;";
}
/* 要素が浮き上がるエフェクト */
.cls-1{
 fill:none;
 stroke:#fff;
 stroke-linecap:round;
 stroke-miterlimit:10;
	stroke-width:17px;
	stroke-dasharray: 1500; /* この行を追加 */
 stroke-dashoffset:1500; /* この行を追加 */
	}
	
	/* lottie */
	#lottie{
		width: 100%;
		max-width: 1980px;
		height: 100%;
		max-height: 1080px;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}