@charset "utf-8";

/*------------------------------------------------------------
LP
------------------------------------------------------------*/

/*パンくずリスト*/
.bread-crumbs .bread-crumbs-inner{
	display: none;
}
main{
	width: 100%;
	/*font-family: "linotype-sabon","Times New Roman", Times,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
	font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
	margin: 0 auto;
	color: #404040;
}
main h2{
		font-size: 27px;
		/*font-style: italic;*/
		font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
		display: block;
		color: #333333;
		text-align: center;
		margin: 0 auto;
		padding: 100px 0 50px;
	}


/*! pc & tb 
------------------------------------------*/
@media screen and (min-width: 641px) {
	
.spView{
	display: none;
}


main{
	/*max-width: 1240px;*/
}


/*スライダー swiper
---------------------*/
.main_slider{
/*	position: absolute;
	bottom: calc(50/1030*100%);
	right: 0;
  left: 0;*/
  margin: 0 auto;
}

.swiper, .swiper2, .swiper3{
	overflow: hidden;
  width: 100%;
	max-width: 3000px!important;
	margin-bottom: 10px;
}

/*スライドの動きをスムーズにする・自動で流れ続ける無限ループスライダー*/
main .swiper-wrapper{
	transition-timing-function: linear;
}
.swiper-slide{
	/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
	/*margin-left: 30px;*/
/*  color: #ffffff;
  width: 270px;
  height: 100%;
  text-align: center;
  line-height: 270px;*/
}




/*menu
---------------------*/
.menu_wrap{
	padding: 140px 0 100px;
}
.menu_ttl{
	text-align: center;
	font-size: 27px;
	color: #404040;
	margin: 0 auto;
	padding: 0 0 90px
}

.menu_box{
	width: 100%;
	max-width: 766px;
	display: flex;
	flex-wrap: nowrap;/*改行許可せず*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	width: calc(100/100*100%);
	margin: 0 auto;
	position: relative;
}

.menu_btn{
	width: 154px;
	height: 154px;
	position: relative;
	font-size: 14px;
	text-align: center;
	color: #666666;
	border-radius: 50%;
}
.menu_btn:hover{
	color: #777777;
}

.menu_number{
	position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
	font-size: 25px;
	font-family: "futura-pt", sans-serif;
	font-weight: 400;
	font-style: normal;
	width: 35px;
	background-color: #ffffff;
	}
.menu_txt{
	width: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
	font-size: 22px;
}
.menu_txt .txt_jp{
	font-size: 12px;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #747474;
}


/*section 共通
---------------------*/
.sec_wrap{
	width: 94%;
	max-width: 1240px;
	margin: 0 auto;
}

/*sectionタイトル
------------*/
.sec_ttl{
	text-align: center;
	font-size: 27px;
	padding-bottom: 70px;
}

.ttl_number{
	font-size: 34px;
	font-family: "futura-pt", sans-serif;
	font-weight: 500;
	line-height: 1;
	margin: 0 0 10px;
	letter-spacing: 2px;
}
	
.ttl_txt{
	text-align: center;
	margin: 10px 0 0;
}
.ttl_txt .txt_jp{
	font-size: 13px;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #666666;
}

.sec_ttl_s{
	text-align: center;
	font-size: 25px;
	padding-bottom: 70px;
	line-height: 1;
}


/*sectionアイテム横4列
------------*/
.item_wrap{
	display: flex;
	flex-wrap: nowrap;/*改行許可せず*/
	justify-content: space-between;/*両端配置*/
	align-items: flex-start;/*上揃え*/
	width: calc(100/100*100%);
	margin: 0 auto;
	position: relative;
}
.item_box{
	width: calc(286/1240*100%);
}
.item_ttl{
	font-size: 21px;
	text-align: center;
	line-height: 1;
	padding-bottom: 30px;
}
.item_img{
	padding-bottom: 25px;
}



/*sec1
---------------------*/
#sec1{
	padding-top: 75px;
}
#sec1 .item_wrap{
	padding-bottom: 130px;
}
.sec1_box{
	width: 100%;
	max-width: 930px;
	margin: 0 auto;
	padding-bottom: 120px;
}
.box_last{
	padding-bottom: 75px;
}
.sec1_img_box{
	display: flex;
	flex-wrap: nowrap;/*改行許可せず*/
	justify-content: space-between;/*両端配置*/
	align-items: flex-end;/*下揃え*/
	width: calc(100/100*100%);
	margin: 0 auto;
	position: relative;
}

.sec1_img_model{
	width: calc(500/930*100%);
}
.sec1_img_detail{
	width: calc(400/930*100%);
}
.sec1_txt_box{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	font-size: 14px;
	text-align: left;
	padding: 40px 0 0;
	line-height: 2.2;
}



/*sec2
---------------------*/
#sec2{
	padding-top: 75px;
}
#sec2 .item_wrap{
	padding-bottom: 75px;
}



/*sec3
---------------------*/
#sec3{
	padding-top: 75px;
}

.color_wrap{
	max-width: 620px;
	display: flex;
	flex-wrap: nowrap;/*改行許可せず*/
	justify-content: space-between;/*両端配置*/
	align-items: flex-end;/*下揃え*/
	width: calc(100/100*100%);
	margin: 0 auto;
	position: relative;
	padding-bottom: 120px;
}
.color_tip{
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
.color_box{
	width: 70px;
}
.color1{
	background-color: #ffffff;
	border: 1px solid #9d9d9d;
}
.color2{
	background-color: #535353;
}
.color3{
	background-color: #b08a8c;
}
.color4{
	background-color: #cd6a65;
}
.color5{
	background-color: #91aac4;
}
.color6{
	background-color: #a5cda4;
}
.color_wrap .txt_jp{
	font-size: 13px;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #666666;
	text-align: center;
	padding-top: 15px;
}
#sec3 .sec_ttl_s{
	text-align: center;
	font-size: 25px;
	padding-bottom: 40px;
	line-height: 1;
}
#sec3 .item_img{
	padding-bottom: 0;
}
#sec3 .item_wrap{
	padding-bottom: 40px;
}

.item_container1{
	padding-bottom: 120px;
}
.item_container2{
	padding-bottom: 75px;
}



/*sec4
---------------------*/
#sec4{
	padding-top: 75px;
}
#sec4 .sec_ttl_s .font_small{
	font-size: 15px;
}

.sec4_inner1, .sec4_inner2, .sec4_inner1-2610{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	max-width: 930px;
}
.sec4_inner1:before {
	content: "";
	display: block;
	padding-top: 209.677%;/* sec4_innerの高さ1950px÷sec4_innerの横幅930px×100*/
}
.sec4_inner1-2610:before {
	content: "";
	display: block;
	padding-top: 206.451%;/* sec4_innerの高さ1920px÷sec4_innerの横幅930px×100*/
}


.sec4_limited1_img1{
	width: calc(500/930*100%);
	position: absolute;
	top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.sec4_limited1_img2{
	width: calc(400/930*100%);
	position: absolute;
	top: calc(710/1950*100%);
  right: calc(0/930*100%);
}
.sec4_limited1_img3{
	width: calc(400/930*100%);
	position: absolute;
	top: calc(810/1950*100%);
  left: calc(90/930*100%);
}
.sec4_limited1_img4{
	width: calc(550/930*100%);
	position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}


.sec4_inner1-2610 .sec4_limited1_img1{
	width: calc(500/930*100%);
	position: absolute;
	top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.sec4_inner1-2610 .sec4_limited1_img2{
	width: calc(400/930*100%);
	position: absolute;
	top: calc(710/1920*100%);
  right: calc(0/930*100%);
}
.sec4_inner1-2610 .sec4_limited1_img3{
	width: calc(400/930*100%);
	position: absolute;
	top: calc(810/1920*100%);
  left: calc(90/830*100%);
}

.sec4_inner1-2610 .sec4_limited1_img4{
	width: calc(500/930*100%);
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
}


.sec4_container{
	padding: 120px 0 75px;
}
.sec4_inner2:before {
	content: "";
	display: block;
	padding-top: 83.870%;/* sec4_innerの高さ780px÷sec4_innerの横幅930px×100*/
}
.sec4_limited2_img1{
	width: calc(500/930*100%);
	position: absolute;
	top: 0;
  right: 0;
}
.sec4_limited2_img2{
	width: calc(400/930*100%);
	position: absolute;
	bottom: 0;
  left: 0;
}

.sec4_txt_box{
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	font-size: 14px;
	text-align: left;
	padding: 40px 0 40px;
	line-height: 2.2;
}


/*sec5
---------------------*/
#sec5{
	padding-top: 75px;
}
.sec5_img{
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}
.sec5_txt_box{
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	font-size: 14px;
	text-align: left;
	padding: 40px 0 0;
	line-height: 2.2;
}


/*View Moreボタン
---------------------*/
	.view_btn_wrap a{
		width: 120px;
		height: 30px;
		display: block;
		margin: 0 auto;
	}
	.view_btn{
		background-color: #a7a7a7;
		border-radius: 50px;
		font-size: 14px;
		line-height: 30px;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.8px;
	}

/*sectionボタン
---------------------*/
.sec_btn_box a{
	display: block;
	width: 320px;
	height: 30px;
	margin: 0 auto;
	}
.sec_btn{
	background-color: #a7a7a7;
	border-radius: 30px;
	line-height: 30px;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
}
.font_jp{
		font-size: 13px;
		letter-spacing: -0.7px;
}


/*footerボタン
---------------------*/
	.footer_btn_wrap{
		/*border-top: 1px solid #dadada;*/
		margin: 100px auto 60px;
	}

	.footer_btn_wrap a{
		width: 350px;
		height: 30px;
		display: block;
		margin: 0 auto 30px;
	}
	.footer_btn{
		background-color: #a7a7a7;
		border-radius: 5px;
		font-size: 14px;
		line-height: 40px;
		height: 40px;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.8px;
	}














}/*! //pc & tb */


/*! tb 
------------------------------------------*/
@media screen and (max-width: 1000px) {


.menu_wrap{
	margin: 0 auto;
}
.menu_box{
	width: calc(90/100*100%);
	display: flex;
	flex-wrap: nowrap;/*改行許可せず*/
	justify-content: center;/*中央配置*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	position: relative;
}

/*tb sectionアイテム横4列
------------*/
.item_wrap{
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: space-between;/*両端配置*/
	align-items: flex-start;/*上揃え*/
	width: calc(84/100*100%);
	margin: 0 auto;
	position: relative;
}
.item_box{
	width: 46%;
}

.item_box{
	padding-bottom: 50px;
	
}
}/*tab*/









/*! sp 
------------------------------------------*/
@media screen and (max-width: 640px) {
.pcView{
	display: none;
}

main .contents{
	margin: 0 0 0;
}

/*sp スライダー swiper
---------------------*/
.main_slider{
/*	position: absolute;
	bottom: calc(50/1030*100vw);
	right: 0;
  left: 0;*/
	width: 100%;
  margin: 3vw auto 0;
}

.swiper, .swiper2, .swiper3{
  width: 100%;
	margin-bottom: 10px;
}
/*スライドの動きをスムーズにする・自動で流れ続ける無限ループスライダー*/
main .swiper-wrapper{
	transition-timing-function: linear;
}
.swiper-slide{
	/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
	/*margin-left: 30px;*/
/*  color: #ffffff;
  width: 270px;
  height: 100%;
  text-align: center;
  line-height: 270px;*/
}

main h2{
	font-size: 5.625vw;
	/*font-style: italic;*/
	display: block;
	color: #333333;
	text-align: center;
	margin: 0 auto;
	padding: 12vw 0 8vw;
	line-height: 1.5
}



/*sp menu
---------------------*/
.menu_wrap{
	padding: 0;
}
.menu_ttl{
	text-align: center;
	color: #404040;
	font-size: 5.625vw;
	font-size: 5vw;
	margin: 0 auto;
	padding: 10vw 0 10vw
}

.menu_box{
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: space-between;
	align-items: flex-start;/*上揃え*/
	width: calc(75/100*100vw);
	width: 280px;
	position: relative;
/*	background-color: aqua;*/
	margin: 0 auto;
}
.menu_btn_box{
	margin-bottom: 25px;
}
.menu_btn{
	width: 130px;
	height: 130px;
	position: relative;
	font-size: 14px;
	text-align: center;
	color: #666666;
	border-radius: 50%;
}
.menu_btn:hover{
	color: #777777;
}

.menu_number{
	position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
	font-size: 22px;
	font-family: "futura-pt", sans-serif;
	font-weight: 400;
	font-style: normal;
	width: 35px;
	background-color: #ffffff;
	}
.menu_txt{
	width: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
	font-size: 18px;
}
.menu_txt .txt_jp{
	font-size: 11px;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #747474;
}



/*sp sectionタイトル
------------*/
.sec_ttl{
	text-align: center;
	font-size: 5vw;
	padding-bottom: 15vw;
}

.ttl_number{
	font-size: 7vw;
	font-family: "futura-pt", sans-serif;
	font-weight: 500;
	line-height: 1;
	margin: 0 0 1.5vw;
	letter-spacing: 0.5vw;
}
	
.ttl_txt{
	text-align: center;
	margin: 1.5vw 0 0;
}
.ttl_txt .txt_jp{
	font-size: 3vw;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #666666;
	padding-top: 1vw;
}

.sec_ttl_s{
	text-align: center;
	font-size: 5vw;
	padding-bottom: 8vw;
	line-height: 1;
}


/*sp sectionアイテム横4列
------------*/
.item_wrap{
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: space-between;/*両端配置*/
	align-items: flex-start;/*上揃え*/
	width: calc(80/100*100vw);
	margin: 0 auto;
	position: relative;
}
.item_box{
	width: calc(35/75*100%);
	padding-bottom: 6vw;
}
.item_ttl{
	font-size: 4vw;
	text-align: center;
	line-height: 1;
	padding-bottom: 3vw;
}
.item_img{
	padding-bottom: 3vw;
}



/*sp sec1
---------------------*/
#sec1{
	padding-top: 24vw;
}
#sec1 .item_wrap{
	padding-bottom: 15vw;
}


.sec1_box{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 15vw;
}
.box_last{
	padding-bottom: 0;
}
.sec1_img_box{
	display: flex;
	flex-wrap: nowrap;/*改行許可せず*/
	justify-content: space-between;/*両端配置*/
	align-items: flex-end;/*下揃え*/
	width: calc(100/100*100%);
	margin: 0 auto;
	position: relative;
}

.sec1_img_model{
	width: calc(500/930*100%);
}
.sec1_img_detail{
	width: calc(400/930*100%);
}
.sec1_txt_box{
	width: 75vw;
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
	padding: 5vw 0 0;
	line-height: 2;
}

/*sp sec2
---------------------*/
#sec2{
	padding-top: 24vw;
}
#sec2 .item_wrap{
	padding-bottom: 0vw;
}

/*sp sec3
---------------------*/
#sec3{
	padding-top: 24vw;
}

.color_wrap{
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: space-between;/*両端配置*/
	align-items: flex-end;/*下揃え*/
	width: calc(60/100*100vw);
	max-width: 620px;
	margin: 0 auto;
	position: relative;
	padding-bottom: 15vw;
}
.color_tip{
	width: calc(14/100*100vw);
	height: calc(14/100*100vw);
	border-radius: 50%;
	margin: 0 auto;
}
.color_box{
	width: calc(16/100*100vw);
	padding-bottom: 3.5vw;
}
.color1{
	background-color: #ffffff;
	border: 1px solid #9d9d9d;
}
.color2{
	background-color: #535353;
}
.color3{
	background-color: #b08a8c;
}
.color4{
	background-color: #cd6a65;
}
.color5{
	background-color: #91aac4;
}
.color6{
	background-color: #a5cda4;
}
.color_wrap .txt_jp{
	font-size: 3vw;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #666666;
	text-align: center;
	padding-top: 1.5vw;
}

#sec3 .item_img{
	padding-bottom: 0;
}
#sec3 .sec_ttl_s{
	padding-bottom: 6vw;
}

.item_container1{
	padding-bottom: 15vw;
}
.item_container2{
	padding-bottom: 0;
}


/*sp sec4
---------------------*/
#sec4{
	padding-top: 24vw;
}
#sec4	.sec_ttl_s .font_small{
	font-size: 3vw;
}

.sec4_inner1, .sec4_inner2, .sec4_inner1-2610{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
.sec4_inner1:before {
	content: "";
	display: block;
	padding-top: 209.677%;/* sec4_innerの高さ1950px÷sec4_innerの横幅930px×100*/
}
.sec4_inner1-2610:before {
	content: "";
	display: block;
	padding-top: 206.451%;/* sec4_innerの高さ1920px÷sec4_innerの横幅830px×100*/
}


.sec4_limited1_img1{
	width: calc(500/930*100%);
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.sec4_limited1_img2{
	width: calc(400/930*100%);
	position: absolute;
	top: calc(710/1950*100%);
  right: calc(0/930*100%);
}
.sec4_limited1_img3{
	width: calc(400/930*100%);
	position: absolute;
	top: calc(810/1950*100%);
  left: calc(90/930*100%);
}
.sec4_limited1_img4{
	width: calc(550/930*100%);
	position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}


.sec4_inner1-2610 .sec4_limited1_img1{
	width: calc(500/930*100%);
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.sec4_inner1-2610 .sec4_limited1_img2{
	width: calc(400/930*100%);
	position: absolute;
	top: calc(710/1920*100%);
	right: calc(0/830*100%);
}
.sec4_inner1-2610 .sec4_limited1_img3{
	width: calc(400/930*100%);
	position: absolute;
	top: calc(810/1920*100%);
  left: calc(90/930*100%);
}
.sec4_inner1-2610 .sec4_limited1_img4{
	width: calc(500/930*100%);
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
}

.sec4_container{
	padding: 15vw 0 0;
}
.sec4_inner2:before {
	content: "";
	display: block;
	padding-top: 83.870%;/* sec4_innerの高さ780px÷sec4_innerの横幅930px×100*/
}
.sec4_limited2_img1{
	width: calc(500/930*100%);
	position: absolute;
	top: 0;
  right: 0;
}
.sec4_limited2_img2{
	width: calc(400/930*100%);
	position: absolute;
	bottom: 0;
  left: 0;
}

.sec4_txt_box{
	width: 75vw;
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
	padding: 5vw 0 4vw;
	line-height: 2;
}



/*sp sec5
---------------------*/
#sec5{
	padding-top: 24vw;
}
#sec5 .sec_ttl{
		padding-bottom: 8vw;
	}
.sec5_img{
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}
.sec5_txt_box{
	width: 75vw;
	margin: 0 auto;
	text-align: left;
	padding: 5vw 0 0;
	line-height: 2;
}




/*sp View Moreボタン
---------------------*/
	.view_btn_wrap a{
		display: block;
		margin: 0 auto;
	}
	.view_btn_wrap a{
		width: 22vw;
		background-color: #a7a7a7;
		border-radius: 2.8125vw;
		font-size: 2.8125vw;
		height: 5.625vw;
		line-height: 5.625vw;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.1vw;
	}

/*sp sectionボタン
---------------------*/
.sec_btn_box a{
	display: block;
	width: 55vw;
	margin: 0 auto;
	background-color: #a7a7a7;
	border-radius: 3.2vw;
	line-height: 6.4vw;
	height: 6.4vw;
	font-size: 3.2vw;
	text-align: center;
	color: #ffffff;
	}

.sec_btn{
	letter-spacing: 0.1vw;
}

/*sp footerボタン
---------------------*/
.font_jp{
	font-size: 3.2vw;
	letter-spacing: -0.5vw;
}

.footer_btn_wrap{
	margin: 15vw 0 15vw;
		
}
.footer_btn_wrap a{
	width: 75vw;
	height: 5.625vw;
	display: block;
	margin: 0 auto 6vw;
}
.footer_btn{
	text-align: center;
	letter-spacing: 0.8px;
	background-color: #a7a7a7;
	border-radius: 1vw;
	font-size: 2.8125vw;
	line-height: 5.625vw;
	line-height: 8vw;
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.1vw;
}






}/*! //sp */










/*@media screen and (max-width: 1200px) and (min-width: 768px) and (orientation: portrait) {
}
*/














/*   縦線アニメーション start
=========================*/
.line_box{
	width: 100%;
	max-width: 10px;
	height: 32px;
	margin: 0 auto;
	position: relative;
}
/*for SP*/
@media screen and (max-width: 640px) {
	.line_box{
	height: 6vw;
	}
}/*for SP*/
.line_box .itemAnmTrigger{

}
/* スクロールダウンの位置 */
.line_box .itemAnmActive{
  position: absolute;
  right: 50%;
  top:0;
  writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.line_box .itemAnmActive::before {
  animation: scroll 2s;
	animation-delay: 0.5s;
	animation-fill-mode:forwards;/*アニメーションを最後の状態で止める*/
  background-color: #a1a1a1;
  bottom: -32px;
  content: "";
  height: 32px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
	opacity: 0;
}
/*for SP*/
@media screen and (max-width: 640px) {
	.line_box .itemAnmActive::before {
  bottom: -6vw;
  content: "";
  height: 6vw;
	}
}


/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
		opacity: 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
		opacity: 1;
  }
}






/*   ふわっと表示：時差で下から上へ start
=========================*/
/* ----- effects ----- */
  .effFIU1, .effFIU2, .effFIU3, .effFIU4, .effFIU5, .effFIU6 { opacity:0; }
  .effFIU1.effanm { animation:effFIU1 1.5s both; }
  .effFIU2.effanm { animation:effFIU2 1.5s both; animation-delay: 0.4s; }
  .effFIU3.effanm { animation:effFIU3 1.5s both; animation-delay: 0.8s;}
  .effFIU4.effanm { animation:effFIU4 1.5s both; animation-delay: 1.2s;}
  .effFIU5.effanm { animation:effFIU5 1.5s both; animation-delay: 1.6s;}
  .effFIU6.effanm { animation:effFIU6 1.5s both; animation-delay: 2.0s;}

/*for SP*/
@media screen and (max-width: 640px) {
	 .effFIU2.effanm { animation:effFIU2 1.5s both; animation-delay: 0.3s; }
  .effFIU3.effanm { animation:effFIU3 1.5s both; animation-delay: 0.6s;}
  .effFIU4.effanm { animation:effFIU4 1.5s both; animation-delay: 0.8s;}
  .effFIU5.effanm { animation:effFIU5 1.5s both; animation-delay: 1.1s;}
  .effFIU6.effanm { animation:effFIU6 1.5s both; animation-delay: 1.4s;}
}

/*下から上へフェードイン*/
  @-webkit-keyframes effFIU1 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU1 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

  @-webkit-keyframes effFIU2 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU2 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

  @-webkit-keyframes effFIU3 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU3 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}


  @-webkit-keyframes effFIU4 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU4 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

  @-webkit-keyframes effFIU5 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU5 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

  @-webkit-keyframes effFIU6 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU6 {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}


/*   ふわっと表示 end
=========================*/

/*   ふわっと表示 start
=========================*/
/* ----- effects ----- */
  .effFI, .effFIU, .effFID, .effFIR, .effFIL { opacity:0; }
  .effFI.effanm { -webkit-animation:effFI 2.5s both; animation:effFI 2.5s both; }
  .effFIU.effanm { -webkit-animation:effFIU 1.5s both; animation:effFIU 1.5s both; }
  .effFID.effanm { -webkit-animation:effFID 1.5s both; animation:effFID 1.5s both; }
  .effFIR.effanm { -webkit-animation:effFIR 1.5s both; animation:effFIR 1.5s both; }
  .effFIL.effanm { -webkit-animation:effFIL 1.5s both; animation:effFIL 1.5s both; }

/*その場でフェードイン*/
  @-webkit-keyframes effFI {0%{opacity:0}100%{opacity:1}}
  @keyframes effFI {0%{opacity:0}100%{opacity:1}}

/*下から上へフェードイン*/
  @-webkit-keyframes effFIU {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*上から下へフェードイン*/
  @-webkit-keyframes effFID {0%{opacity:0;-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFID {0%{opacity:0;-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*右から左へフェードイン*/
  @-webkit-keyframes effFIR {0%{opacity:0;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIR {0%{opacity:0;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*右から左へフェードイン*/
  @-webkit-keyframes effFIL {0%{opacity:0;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIL {0%{opacity:0;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
/*   ふわっと表示 end
=========================*/








