@charset "UTF-8";
/* CSS Document */

/*
font-family: "noto-sans", sans-serif;
font-weight: 300,400,500,600,700;

font-family: "playfair-display", serif;
font-weight: 400,700;
*/

body{
	position: relative;
	font-family: "noto-sans", sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.5;
}

img{
	width: 100%;
}

.pc{
	display: none;
}

.sp{
	display: block;
}

.wrap{
  background-image: url('https://n-lightningaile.com/img/fixed-image.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

@media screen and (min-width: 960px) {
	.pc{
		display: block;
	}

	.sp{
		display: none;
	}
}


/* トップページ */

.wrap{
	width: 100%;
}

@media screen and (min-width: 960px) {
	.wrap{
	}
}


/* ヘッダー */

.top__header {
  background: none;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 990;
}

.top__header-in {
  padding: 1.5em;
  position: relative;
}

@media screen and (min-width: 960px) {
	.top__header-in {
	}
}


/* ヘッダーのロゴ部分 */
.header__title {
	width: 150px;
}

.header__title img {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 99;
}


/* ヘッダーの言語選択部分 */
.header__lang{
	color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    font-size: 0.8em;
	position: absolute;
    top: 50%;
    right: 60px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	z-index: 99;
	width: 40px;
	height: 40px;
	text-align: center;
	align-items: center;
}

.header__lang-con{
	width: 40px;
	height: 40px;
	position: relative;
}

.header__lang-con a{
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


/* ハンバーガーメニュークリック後のスタイル */
.header__lang.active {
	color: #000;
    border: 1px solid #000;
}

.cng__lang-color{
	color: #000;
    border: 1px solid #000;
}


/* ヘッダーのナビ部分 */

.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #fff;
  transition: ease .4s;
}


@media screen and (min-width: 960px) {
  .header__nav {
  }
}

.nav__items {
	display: block;
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	width: 90%;
	margin: 0 auto;
}

.nav-item__link {
	text-align: center;
	margin: 5em 0 0;
}

.nav-item__link li{
	width: 60%;
    margin: 1em auto 0;
    text-align: left;
}

.nav-item__link li a{
	padding: 1em 1.5em;
    font-size: 0.9em;
    background: #0054A2;
    border-radius: 50px;
    color: #fff;
    display: block;
	position: relative;
}

.nav-item__link li a::after{
	content: '\f35d';
    font: var(--fa-font-solid);
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


@media screen and (min-width: 960px) {
  .nav__items {
  }
	
  .nav-items {
  }
	
  .nav-items li {
  }
	
  .nav-items li:last-child {
  }
	
	.nav-item__sp {
		display: none;
	}
}

/* ナビのリンク */
.nav-items__item a {
	font-family: "playfair-display", serif;
	font-weight: 400;
	width: fit-content;
	display: block;
	text-align: center;
	font-size: 1.2em;
	margin: 0 auto 0.5em;
	letter-spacing: 0.1em;
	padding: 0.6em 0;
}
.nav-items__item a span {
	font-family: "noto-sans", sans-serif;
	display: block;
	font-size: 0.6em;
	color: #959595;
}

.nav-items__item a:hover {
	color: #0054A2;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

.top__header.cng-back-color {
	background: rgba(255,255,255,0.8);
	transition: 0.3s;
}

.cng-text-color a{
	color: #000;
}

@media screen and (min-width: 960px) {
	
	.nav-item__link li {
		width: 250px;
	}
}

/* アクティブページのメニュー指定 */

.menu__active {
	color: #9B7334 !important;
	pointer-events: none;
}


/* ハンバーガーメニュー */

.header__hamburger {
	width: 25px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);

}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: relative;
  transition: ease .4s;
  display: block;
}

.hamburger.cng-hamburger-color span {
  background-color: #000;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 6px 0;
	width: 80%;
}

.hamburger span:nth-child(3) {
  top: 0;
}


/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
	background: #000;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;

}

.hamburger.active span:nth-child(3) {
  top: -11px;
  transform: rotate(-45deg);
	background: #000;
}

/* ヘッダー（END） */





/* メインイメージ */
.main__fstvs{
	width: 100%;
	height: 100vh;
	background: url('https://n-lightningaile.com/img/main-back.jpg') no-repeat center center / cover;
	position: relative;
}

.main__copy{
	width: 90%;
	color: #fff;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	letter-spacing: 0.1em;
	font-weight: 300;
	text-align: center;
}

.main__copy h2{
	font-size: 1.6em;
	line-height: 1.5em;
	font-weight: 500;
	letter-spacing: 5px;
	margin-bottom: 0.5em;
}

.main__copy h3{
	font-size: 0.8em;
	letter-spacing: 2px;
	font-weight: 400;
}


@media screen and (min-width: 960px) {

	.main__copy h2{
		font-size: 3em;
		line-height: 1.3em;
		letter-spacing: 10px;
		margin-bottom: 0.2em;
	}

	.main__copy h3{
		font-size: 1em;
		letter-spacing: 3px;
		font-weight: 500;
	}
	
}


#page_scroll {
	width: 130px;
    height: auto;
	position: absolute;
    right: -38px;
    bottom: 80px;
    transform: rotate(-90deg);
	color: #fff;
}

#page_scroll div {
    position: relative;
    display: block;
    width: 100%;
    text-align: right;
    font-size: 0.7em;
}

#page_scroll div::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 75px;
    height: 1px;
    background: #fff;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#page_scroll div::after{
    content: '';
    position: absolute;
    top: 5px;
    left: 0px;
    width: 10px;
    height: 1px;
    background: #fff;
    transform: rotate(-35deg);
}

@media screen and (min-width: 960px) {
	#page_scroll {
		right: -5px;
		bottom: 100px;
	}
}



/* メインイメージ（END） */



/* 共通項目 */

.top__ttl{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto 2em;
}

.top__ttl h4{
	font-family: "playfair-display", serif;
	font-weight: 400;
	font-size: 3.5em;
	line-height: 1;
}

.top__ttl h4 span{
	color: #0054A2;
}

.top__ttl h5{
	font-size: 0.8em;
}

.services__ttl{
	width: 100%;
	background: #fff;
	padding: 5em 0 3em;
	text-align: center;
}

.services__ttl h5{
	width: 145px;
	margin: 0 auto;
	font-weight: 500;
}

.services__ttl p{
	width: 90%;
	margin: 1.5em auto 0;
	letter-spacing: 2px;
	font-size: 1.2em;
	line-height: 1.5;
}


@media screen and (min-width: 960px) {
	.services__ttl{
		padding: 8em 0 5em;
	}

	.services__ttl h5{
		width: 180px;
	}

	.services__ttl p{
		font-size: 1.4em;
	}
}

/* 共通項目（END） */



/* Our VISION ビジョン */

.top__vision{
	background: #f7f7f7;
	padding: 5em 0;
}

.top__vision-box{
	width: 90%;
	max-width: 1200px;
	margin: 5em auto 0;
	text-align: justify;
}

.top__vision-txt div{
	font-size: 0.9em;
	line-height: 2em;
	margin: 0 0 1em;
}

.top__vision-txt div:last-child{
	margin: 0;
}

.top__vision-img{
	margin: 3em 0 0;
	display: flex;
	justify-content: space-between;
}

.top__vision-img div{
	width: 48%;
}


@media screen and (min-width: 960px) {
	.top__vision{
		padding: 8em 0;
	}
	
	.top__vision-box{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between
	}

	.top__vision-txt{
		width: 50%;
		font-size: 1.1em;
	}

	.top__vision-img{
		width: 48%;
		margin: 0;
	}
}

/* Our VISION ビジョン（END） */


/* Our VISION poicy */

.top__vision-plc{
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5em 0 5em;
	text-align: justify;
}

.vision-plc-box{
	padding: 0.5em 0 2em;
	border-bottom: 1px solid #aaa;
}

.vision-plc-box:last-child{
	padding: 0.5em 0 0;
	border-bottom: none;
}

.vision-plc-box-ttl{
	display: flex;
	align-items: flex-end;
	line-height: 1;
	margin-bottom: 1.5em;
}

.vision-plc-no{
	font-size: 3.5em;
	font-family: "playfair-display", serif;
	font-weight: 400;
	padding-right: 0.25em;
}

.vision-plc-box-ttl h6{
	font-size: 1.3em;
	font-weight: 300;
	letter-spacing: 0.3px;
}

.vision-plc-box-ttl h6 span{
	font-size: 0.4em;
	font-family: "playfair-display", serif;
	font-weight: 400;
	padding-left: 1em;
}

.vision-plc-box p {
	font-size: 0.8em;
	line-height: 1.8;
}


@media screen and (min-width: 960px) {
	.top__vision-plc{
		padding: 5em 0 8em;
	}

	.vision-plc-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
		padding: 1em 0 3em;
	}

	.vision-plc-no{
		font-size: 5em;
	}

	.vision-plc-box-ttl{
		width: 35%;
		margin-bottom: 0;
	}

	.vision-plc-box-ttl h6{
		font-size: 1.7em;
	}

	.vision-plc-box-ttl h6 span{
		font-size: 0.4em;
	}

	.vision-plc-box p {
		width: 60%;
		text-align: end;
	}
}

/* Our VISION poicy（END） */




/* Our SERVICES サービス */

.top__services{
	width: 100%;
	background: #f7f7f7;
	padding: 0 0 5em;
}
	
.top__services-r{
	width: 100%;
	max-width: 1200px;
}

.top__services-ttl{
	width: 90%;
	margin: 3em auto;
	padding-bottom: 3em;
	border-bottom: 1px solid #aaa;
}

.top__services-box{
	width: 90%;
	margin: 0 auto 2.5em;
	text-align: center;
}

.top__services-no{
	font-size: 0.9em;
    font-family: "playfair-display", serif;
    font-weight: 400;
    border: 1px solid #000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    display: inline-block;
	line-height: 43px;
	margin-bottom: 1em;
}

.top__services-txt{
	font-size: 0.9em;
	letter-spacing: 0.3px;
	line-height: 1.8;
}

.top__services-txt a{
	color: #A27026;
	border-bottom: 1px solid #A27026;
	text-decoration: none;
	margin: 0 0.3em;
	font-weight: 500;
}

@media screen and (min-width: 960px) {
	
	.top__services{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		padding: 0;
	}
	
	.top__services-img{
		width: 50%;
		font-size: 0;
	}
	
	.top__services-r{
		width: 50%;
		padding: 0 5em;
	}
	
	.top__services-box{
		display: flex;
		margin: 0 auto 1em;
	}
	
	.top__services-no{
		font-size: 1.5em;
		width: 60px;
		height: 60px;
		line-height: 50px;
	}
	
	.top__services-txt{
		font-size: 1em;
		text-align: left;
		margin-left: 1.5em;
	}
}

/* Our SERVICES サービス（END） */


/* Our SERVICES BRAND VOX */

.services__bravo{
	width: 100%;
	background: #f7f7f7;
	padding: 0 0 5em;
}

.services__bravo-img{
	font-size: 0;
}

.services__bravo-txt{
	padding: 3em;
	color: #fff;
}

.services__bravo-txt h6{
	font-weight: 500;
	font-size: 1.2em;
	margin-bottom: 1em;
	line-height: 1.8;
}

.services__bravo-txt p{
	font-size: 0.8em;
	line-height: 2;
	text-align: justify;
}

.bravo-bg1{
	background: #897D6A;
}

.bravo-bg2{
	background: #A17126;
}

@media screen and (min-width: 960px) {
	.services__bravo{
		padding: 0 0 8em;
	}

	.services__bravo-box{
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	
	.services__bravo-img{
		width: 50%;
	}
	
	.services__bravo-txt{
		width: 50%;
		position: relative;
	}
	
	.bravo-box-in{
		width: 60%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}

	.services__bravo-txt h6{
		font-size: 2em;
	}

	.services__bravo-txt p{
		font-size: 1em;
	}
	
	.od-item1{
		order: 2;
	}
	
	.od-item2{
		order: 1;
	}
}


.services__bravo-plan{
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 5em 0 0;
}

.bravo-plan-ttl h5{
	color: #A17126;
	text-align: center;
	font-size: 2em;
	font-weight: 600;
	letter-spacing: 4px;
	margin-bottom: 1.5em;
}

.bravo-plan-txt{
	margin-bottom: 2em;
}

.bravo-plan-txt:last-child{
	margin-bottom: 0;
}

.bravo-plan-txt h6{
	font-size: 1.5em;
	font-weight: 600;
	padding-bottom: 0.3em;
	border-bottom: 1px solid #aaa;
	margin-bottom: 0.8em;
	letter-spacing: 2px;
}

.bravo-plan-price{
	font-size: 1em;
	font-weight: 500;
	font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium",sans-serif;
	margin-bottom: 0.5em;
}

.bravo-plan-price span{
	font-size: 0.7em;
	color: #797979;
	padding-left: 0.5em;
}

.bravo-plan-info{
	font-size: 0.8em;
	color: #797979;
	line-height: 1.8;
}

.bravo-plan-att{
	font-size: 0.7em;
	color: #797979;
}

.bravo-plan-btn{
	width: 100%;
}

.bravo-plan-btn a{
	width: 250px;
	margin: 3em auto 0;
	padding: 1em 1.5em;
    font-size: 0.9em;
    background: #A17126;
    border-radius: 50px;
    color: #fff;
    display: block;
    position: relative;
}

.btn-aft a::after{
	content: '\f35d';
    font: var(--fa-font-solid);
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (min-width: 960px) {
	.services__bravo-plan{
		padding: 8em 0 0;
	}

	.bravo-plan-ttl h5{
		margin-bottom: 2em;
	}
	
	.bravo-plan-txt{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 3em;
	}
	
	.bravo-plan-txt h6{
		width: 30%;
		border-bottom: 0;
		text-align: right;
		padding: 0 1.5em 0 0;
		margin: 0;
	}
	
	.bravo-plan-box{
		width: 70%;
		padding: 0 0 0 2em;
		border-left: 1px solid #aaa;
	}
	
	.bravo-plan-info{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.bravo-plan-info li{
		margin-right: 0.5em;
	}
	
	.bravo-plan-info li:last-child{
		margin-right: 0;
	}
	
	.bravo-plan-info li::after{
		content: " ｜ ";
	}
	
	.bravo-plan-info li:last-child::after{
		content: "";
	}
	
	.bravo-plan-att{
		text-align: center;
	}
	
	.bravo-plan-btn a{
		width: 300px;
		margin: 5em auto 0;
	}
}

/* Our SERVICES BRAND VOX（END） */



/* Our SERVICES REGALIA */

.services__regalia{
	width: 100%;
	background: #fff;
	padding: 0 0 5em;
}

.services__regalia-box{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.regalia-img{
	width: 100%;
	margin-bottom: 2em;
}

.regalia-brand{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3em;
}

.regalia-brand div{
	width: 48%;
}

.regalia-btn a{
	width: 250px;
	margin: 3em auto 0;
	padding: 1em 1.5em;
    font-size: 0.9em;
    background: #F8CE40;
    border-radius: 50px;
    color: #fff;
    display: block;
    position: relative;
}

@media screen and (min-width: 960px) {
	.services__regalia{
		padding: 0 0 8em;
	}

	.services__regalia-box{
		max-width: 1200px;
	}
	
	.regalia-brand{
		width: 80%;
		margin: 0 auto;
	}
	
	.regalia-brand div{
		width: 24%;
	}

	.regalia-btn a{
		width: 300px;
	}
}

/* Our SERVICES REGALIA（END） */



/* COMPANY */

.top__company{
	width: 100%;
	padding: 5em 0;
}

.company-ttl{
	text-align: center;
}

.top__company-box{
	width: 90%;
	margin: 3em auto 0;
	border-top: 1px solid #aaa;
}

.top__company-box dl{
	border-bottom: 1px solid #aaa;
	padding: 1.5em 0;
	font-size: 0.8em;
}

.top__company-box dt{
	font-weight: 500;
	margin-bottom: 0.5em;
}

.top__company-value{
	width: 90%;
	max-width: 1200px;
	margin: 5em auto 0;
}

.value-ttl{
	font-size: 1em;
    font-family: "playfair-display", serif;
    font-weight: 400;
	margin-bottom: 1em;
}

.top__company-value h7{
	font-size: 1.1em;
	line-height: 1.8;
}

.value-box{
	margin: 2em 0 0;
}

.value-box-in{
	background: #fff;
	border-radius: 10px;
	padding: 2em;
	margin-bottom: 1em;
}

.value-box-in:last-child{
	margin-bottom: 0;
}

.value-box-no{
	font-size: 1em;
    font-family: "playfair-display", serif;
    font-weight: 400;
}

.value-box-in h6{
	font-weight: 500;
	font-size: 1.2em;
	margin: 0.3em 0 1em;
}

.value-box-in p{
	font-size: 0.8em;
	text-align: justify;
	line-height: 1.8;
	padding-left: 1.5em;
	border-left: 5px solid #0054A2;
}

@media screen and (min-width: 960px) {
	.top__company{
		padding: 8em 0;
	}
	
	.top__company-fl{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 5em;
	}
	
	.company-ttl{
		text-align: left;
	}
	
	.company__ttl h4{
		line-height: 0;
	}
	
	.top__company-box{
		margin: 0;
	}
	
	.top__company-box dl{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 3em 0;
	}
	
	.top__company-box dl dt{
		width: 15%;
		margin: 0;
	}
	
	.top__company-box dl dd{
		width: 80%;
	}

	.top__company-value h7{
		font-size: 1.3em;
	}

	.value-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		margin: 3em 0 0;
	}

	.value-box-in{
		width: 48%;
		padding: 3em;
		margin: 0;
	}
}

/* COMPANY（END） */



/* CONTACT */

.top__contact{
	width: 100%;
	padding: 5em 0;
	background: #fff;
	text-align: center;
}

.top__contact-mail{
	width: 90%;
	margin: 4em auto 0;
}

.contact-mail-icon i{
	font-size: 3em;
	color: #B9B9B9;
}

.contact-mail-address{
	margin-top: 0.5em;
}

.contact-mail-address a{
	font-size: 1.3em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #000;
	letter-spacing: 3px;
}

@media screen and (min-width: 960px) {
	.top__contact{
		padding: 8em 0;
	}

	.top__contact-mail{
		margin: 5em auto 0;
	}
}

/* CONTACT（END） */



/* フッター */

.top__footer{
	width: 100%;
	background: #f7f7f7;
	padding: 5em 2em 2em;
	text-align: center;
}

.top__footer-logo{
	width: 230px;
	margin: 0 auto;
}

.top__footer-menu{
	margin: 3em auto 5em;
	color: #838383;
	font-size: 0.8em;
}

.top__footer-menu li{
	margin-bottom: 0.5em;
}

.top__footer-menu li:last-child{
	margin-bottom: 0;
}

.top__footer address{
	font-size: 0.7em;
}

@media screen and (min-width: 960px) {
	.top__footer{
		padding: 8em 2em;
	}
	
	.top__footer-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 5em;
	}
	
	.top__footer-logo{
		text-align: left;
		margin: 0;
	}
	
	.top__footer-right{
		text-align: right;
	}
	
	.top__footer-menu{
		margin: 0 0 1em;
	}
	
	.top__footer-menu ul{
		display: inline-flex;
	}
	
	.top__footer-menu ul li:first-child{
		margin-bottom: 0;
	}
	
	.top__footer-menu ul li:first-child{
		margin-right: 2em;
	}
}

#page_top {
	width: 150px;
    height: auto;
    position: fixed;
    right: -45px;
    bottom: 90px;
    transform: rotate(90deg);
}

#page_top a {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    text-align: right;
    font-size: 0.7em;
}

#page_top a::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 75px;
    height: 1px;
    background: #000;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#page_top a::after{
    content: '';
    position: absolute;
    top: 5px;
    left: 0px;
    width: 10px;
    height: 1px;
    background: #000;
    transform: rotate(-35deg);
}

@media screen and (min-width: 960px) {
	#page_top {
		right: -15px;
		bottom: 120px;
	}
}


/* フッター（END） */






/* ふわっとフェードイン */

.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/*==================================================
下からふわっ
===================================*/

/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay: 0.4s;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}





/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:100px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

.fadeUpTrigger{
    opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}