@charset "Shift_JIS";

/*------------------------------------------------------------------------------------------------
   features 共通
-------------------------------------------------------------------------------------------------*/
.features_wrapper * { box-sizing:border-box;}
.features_wrapper img, .mod_title_header img { max-width:100%;}
.mod_title_header {max-width:1180px; margin: 0 auto;}

.content_hide {display: none;}

.features_content_area  a { text-decoration:none;}
.features_content_area  a:hover { text-decoration:underline; }

/* main_visual */
.features_wrapper .main_area h1 {margin-bottom:20px;}
.features_wrapper .main_visual, .ttl_area { margin-right:auto; margin-left:auto;}
.ttl_area .bodytxt {margin-bottom:20px; }
.ttl_area .button {max-width: 480px;}

/* features_content_area */
.features_content_area {
	width:1180px;
	margin:30px auto;}
	
.features_wrapper .infobnr {max-width:480px; margin: 30px auto; text-align: center;}
.credit {margin-top: 140px;}
.credit li {margin-top: 0.7em; font-size: 13px; line-height: 1;}

/* typography */
.features_wrapper { font-size:14px; line-height:1.75;
 letter-spacing:0.55px;}
.features_wrapper strong {font-weight:bold;}	
.ttl_area h2 {font-size: 36px; line-height: 1.2;}
 .h_dotline {margin-bottom:40px; padding:10px 0; 
font-size:20px; line-height:1; font-family:"gill-sans-nova",sans-serif; font-weight:100; 
text-align:center; letter-spacing:2px;
border-top:1px dotted #ddd; border-bottom:1px dotted #ddd; }

 .h_wborder { 
		margin-bottom: 40px;	padding: 14px;
		border-top: 2px solid #000;	border-bottom: 1px solid #666;
		font-size: 25px;	line-height: 1;	text-align:center; letter-spacing:3px; font-weight:100; }
 .h_wborder span { display:inline-block; padding-left:1.6em; font-size:50%; letter-spacing:1.5px;}

 .h_wborder_thin {margin-bottom: 30px;	padding: 10px;
		border-top: 1px solid #aaa;	border-bottom: 1px solid #aaa;
		font-size: 18px;	line-height: 1;	text-align:center; letter-spacing:1.8px; font-weight:100;}
 .h_wborder_thin span {display:inline-block; padding-left:1.2em; font-size:50%; letter-spacing:1px;}

.bodytxt { line-height: 1.7; margin-bottom:1em;}
.features_wrapper .notes,
.features_wrapper .caption { font-size:12px; line-height:1.6;}
.question { margin-bottom: 14px; 
font-weight: 400; text-indent: 0.5em;
font-family: "Helvetica Neue", Arial, a-otf-midashi-go-mb31-pr6n, sans-serif;
}
.question::before {
    content: ""; display: block;
    border-top: 1px solid #999;
    width: 20px; margin-top: 0.8em;
    float: left;
}

#exhibition { width:100%; padding-bottom:40px;  background:url(/images/lifeinart/common/exh_bg.png)}
#exhibition .inner { width:1060px; margin:0 auto; overflow:hidden; zoom:1; }
#exhibition h4{ margin:40px auto 28px; }
#exhibition .exh_header {padding: 20px 0;
border-top:1px solid rgba(0, 0, 0, 0.6);border-bottom:1px solid rgba(0, 0, 0, 0.6);
font-family: adobe-garamond-pro,ten-mincho-text, serif; font-variant-numeric: oldstyle-nums;
font-size: 24px; font-weight: normal; line-height: 1.3; letter-spacing: 2px;
}
#exhibition .exh_header .sub {display: block; margin-bottom: 8px; font-size: 14px;}
#exhibition .exh_header .term {display: block; font-size: 18px;}

#exhibition .description { float:left; width:660px; margin-right:50px; text-align:center;}
#exhibition .description h5 { margin-bottom:10px; font-size:12px; line-height:1.6; font-weight:bold;}
#exhibition .img_dm {float:left; width:350px;  margin-top:40px;}
#exhibition a { color:#000;}
#exhibition.finished { filter: alpha(opacity=50);  opacity: 0.5;}
#exhibition.finished .inner { position:relative;}
#exhibition.finished .icon_fin { position:absolute; top:150px;}
#exhibition.finished .icon_fin img {width:240px; height:40px;}

/* link */
.features_wrapper .button {font-size: 16px;}

.features_wrapper a:hover img {
opacity: 0.9;
filter: alpha(opacity=90);
		}

/* section */
.features_content_area .section {
	clear:both;
	margin:80px auto 180px;}
	.features_content_area .section:last-of-type {margin-bottom: 100px;}
/*.features_content_area .section:first-of-type {margin-top: 80px;} */
.features_content_area .itemList {}
.features_content_area .itemList li {}
.features_content_area .itemList  a { text-decoration:none; color:#111;}

.features_content_area .itemName, 
.features_content_area .item_name {
	margin-top:10px;
	font-size:13px;
	line-height:1.4;}
	  
.itemList.flex { display: flex; flex-wrap: wrap;  justify-content: flex-start; }		
.itemList.flex > li {margin: 30px 1.5% 0;}
.flex.col2 > li {width:47%;}	
.flex.col3 > li {width:30%;}		
.flex.col4 > li {width:22%;}		
.flex.col5 > li {width:17%;}		
.flex.col6 > li {width:13.6%;}		
.flex.col7 > li {width:12.5%;}	

.spec .icon {display: inline-block; padding: 2px 5px 3px; margin:2px 8px 0 0;
    border: 1px solid #ccc; border-radius: 3px;
    line-height: 1; font-size: 11px;}


/*itemList*/
.itemList .slider-wrap {margin-top: 0;}
.slider-wrap .thumb .slick-track {width:100%; margin: 0 auto; padding: 0 10px;
display: flex; justify-content: center; 
transform: unset !important; }
.slider-wrap .thumb img{
 border-radius: 50%;
 border: 2px solid #fff;
}
.slider-wrap .thumb .slick-slide {
float: none;
margin: 6px;
border-radius: 50%;
border: 1px solid #ccc;
}
.slider-wrap .thumb .slick-slide:focus {outline: none;}
.slider-wrap .thumb .slick-slide.slick-current {border: 1px solid #222;}


/*aside*/
.features_wrapper .aside { border:1px solid #eee; padding:20px;}

/* New Arrival */
#newArrival .newWrap {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
#newArrival .newWrap .scene {width:57%;}
#newArrival .newWrap .description {width:40%;}
.releaseInfo .shoulder {margin-bottom: 8px; 
font-size: 14px; font-family: gill-sans-nova, a-otf-midashi-go-mb31-pr6n, sans-serif;
line-height: 1; letter-spacing: 1.6px; font-weight: 700;}
.releaseInfo .newAr_title {margin-bottom: 15px;
font-family: gill-sans-nova, a-otf-midashi-go-mb31-pr6n, sans-serif;
font-size: 20px; font-weight: 600; letter-spacing: 1.8px;
line-height: 1.3;}
.releaseInfo .newAr_title .newAr_price {margin-left: 20px; font-size: 85%; font-weight: normal;}
.releaseInfo .releaseDate {margin-top: 1.5em; font-size: 13px; font-weight: bold; line-height: 1;}
.releaseInfo .notes {margin-top: 1.2em; font-size: 12px;}

.rmWrap {position: relative; overflow: hidden;
padding-bottom: 40px;
transition:all .5s ease-out;}
.rmWrap .rmBtn {position: absolute;
right: 0; bottom: 0; left:0;
margin: auto;
display: inline-block;
width: 100%;
max-width: 320px;
padding: 1.7em 0 1em;
cursor: pointer;
line-height: 1;
color: #333;
border: 1px solid #999;
text-align: center;
z-index: 2;}
.rmWrap .rmBtn::before {position: absolute; 
top:1em; left:0;
width:100%;
content: '続きを読む'}
.rmWrap .readMoreBlock {position: relative;
  overflow: hidden;
  height: 0px; /*隠した状態の高さ*/
  transition:all .5s ease-out;

}
  
.rmWrap .readMoreBlock::before {
  height: 0px; 
   display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
 background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.rmWrap .rmTrigger {
  display: none; 
  transition:all .5s ease-out;
}
.rmWrap .rmTrigger:checked ~ .rmBtn::before {
  content: "閉じる";
  bottom:-2em;
  transition:all .5s ease-out;
}
.rmWrap .rmTrigger:checked ~ .readMoreBlock {
  height: auto; 
  transition:all .5s ease-out;
  padding-bottom: 70px;
}
.rmWrap .rmTrigger:checked ~ .readMoreBlock::before {
  display: none; 
  transition:all .5s ease-out;
}


/* 左ナビ付き 2カラムレイアウト*/	
.tmpl_2col .floating-widget { 
	float:left;
	width:260px;}
.tmpl_2col .content_area {
	float: right;
	width: 860px;}	
	

/*追随ナビゲーション*/
.floating-widget.floating {
	position:fixed;
	top:0px;}

.floating-widget.pinned-bottom {
	position:absolute;
	bottom:0;}

.floating-widget .txt_menu li {font-size:11px; border-bottom: 1px solid #f5f5f5;
    letter-spacing: 0.1px;
    line-height: 1.4;
    background: url(/common/mod_icon_arrow_black.png) no-repeat left center;}
.floating-widget .txt_menu li:hover { background-color:#fcfaf5;}				
.floating-widget .txt_menu li a { display: block;
    padding: 13px 10px 13px 13px;
    text-decoration: none;
    color: #000;}				
.floating-widget .txt_menu li .en { display:block; font-size:1.2em; font-weight:bold;}



/*MENU*/
.mod_menu h6 {margin-bottom: 1em; font-size: 16px; text-align: center;}
.mod_menu ul { text-align:center;}
.mod_menu li { display:inline; margin: 0 28px; font-size: 1.1em;}
.mod_menu li a { display:inline-block; padding:0.5em; text-decoration: none; color: #555;}
.mod_menu li:before {
    /*padding: 0 8px 0 0;*/
    font-family: FontAwesome;
    font-size: 11px;
    content: "\f103";
}
.mod_menu li a:hover {color: #000;}
.mod_menu li i { margin-right:0.5em; font-size:0.8em;}

/*　ほかにも参考にしたい特集バナー　*/

#related_banner { clear:both; position: relative; 
max-width: 1180px; margin: 0 auto;}
#related_banner ul {
	background-color: #F7F6F4;
	overflow: hidden;
	padding: 20px 0 20px 20px;}
#related_banner h3 { margin:0 0 0 6px; text-align:left; line-height: 0;}
#related_banner h3 img {width:212px;}
#related_banner ul li {
	float: left;
	width:368px;
	margin-right: 18px;}
#related_banner ul li:last-child { margin-right:0 !important;}
#related_banner #btn_index {position: absolute; right: 20px; top: 0; width:96px;}
.bnr_signUp { max-width: 1180px; margin:30px auto 30px;}

/*pagetop*/
.features_wrapper .goto_top { clear:both; margin-top:10px; text-align:right;}
	
#archive { margin-bottom: 100px;}
#archive .flex { max-width:100%; justify-content: flex-start; flex-direction: row; flex-wrap: wrap;}
#archive .flex li {margin: 30px 1% 0;}
#archive .col4 li { width:23%; }
#archive .col5 li { width:18%; }
#archive .archive_tit { margin-top: 0.9em; line-height: 1.4;}

.life_in_art #pankuzu { margin-bottom: 0;}
.life_in_art .mod_title_header { width:1180px; margin: 0 auto;}


/*----------------------------------------------------------------
fabric campaign
----------------------------------------------------------------*/
.fabcpn { margin-top:-20px; margin-bottom:10px;}
.features_wrapper .fabcpn a:hover img { opacity: 0.75; filter: alpha(opacity=75); }
.fabcpn h2 {float:left; width:580px;}
.fabcpn dl {float:right; width:600px; 
padding:20px 20px; box-sizing:border-box;}
.fabcpn dt { text-align:center;}
.fabcpn dd ul { display:flex; flex-wrap:wrap; justify-content:space-between;}
.fabcpn dd li {width:180px; margin-top:5px;}



/*fade animation*/

@-webkit-keyframes fade {
  0% {  opacity: 0; }
  100% {  opacity: 1; }
}

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



/*==================================================
fade animation
===================================*/

/* その場でfade */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:.1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

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

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

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

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-40px);
  }

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

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-40px);
  }

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

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(40px);
  }

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
	animation-name:rotateXAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
	from{
		transform: rotateX(0);
		opacity: 0;
		}
	to{
		transform: rotateX(-360deg);
		opacity: 1;
		}
}

/*　Y軸（横へ） */
.rotateY{
	animation-name:rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		opacity: 0;
		}
	to{
		transform: rotateY(-360deg);
		opacity: 1;
		}
}

/* Z 軸（左へ） */
.rotateLeftZ{
	animation-name:rotateLeftZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(-360deg);
		opacity: 1;
		}
}

/*　Z 軸（右へ） */
.rotateRightZ{
	animation-name:rotateRightZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(360deg);
		opacity: 1;
		}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
	animation-name:zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  　transform-origin: left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
	top:0;
	left:0;
}

.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
	top:0;
	right:0;
}

.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
	bottom:0;
	right:0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
	bottom:0;
	left:0;
}

.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/	
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
背景色が伸びて出現
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*右から*/
.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

/*下から*/
.bgDUextend::before{
	animation-name:bgDUextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*上から*/
.bgUDextend::before{
	animation-name:bgUDextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
	animation-iteration-count: infinite;/*無限ループ*/
}

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

.delay-time05{  
	animation-delay: 0.5s;
}

.delay-time1{  
	animation-delay: 1s;
}

.delay-time15{  
	animation-delay: 1.5s;
}

.delay-time2{  
	animation-delay: 2s;
}

.delay-time25{  
	animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
	animation-duration: 0.5s;
}

.change-time1{  
	animation-duration: 1s;
}

.change-time15{  
	animation-duration: 1.5s;
}

.change-time2{  
	animation-duration: 2s;
}

.change-time25{  
	animation-duration: 2.5s;
}