@media screen and (min-width: 1061px) {
/* PC用のスタイル記述 */



html,
body {
  margin: 0;
  height: 100%;
}


.image-crossfader_out{
  overflow: hidden;
  position: relative;
  height: 100%;
}

.image-crossfader_l{

width: 8%;
height: 100%;
float: left;

position: relative;
}

.image-crossfader_r{
width: 92%;
  overflow: hidden;
  position: relative;
  height: 100%;

float: right;

}




/*========= スクロールダウンのためのCSS ===============*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:0px;
    /*全体の高さ*/
	height:50px;

}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-11px;
	top: -45px;
    /*テキストの形状*/
	color: #000000;

    font-family: ryo-gothic-plusn, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;


	letter-spacing: 0.2em;

    
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;    
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background:#000000;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}




.image-crossfader {


  

}
.image-crossfader-inner {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
    transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.image-crossfader-inner.is-visible {
  z-index: 1;
  opacity: 1;
  transform: scale(1.02);
}

.image-crossfader-inner:nth-child(1) {
  background-image:url(../img/top/slide01.jpg);
}
.image-crossfader-inner:nth-child(2) {
  background-image:url(../img/top/slide02.jpg);
}
.image-crossfader-inner:nth-child(3) {
  background-image:url(../img/top/slide03.jpg);
}




.slide_txt_out{
position: absolute;
width: 100%;
height: 100%;
padding-top: 80px;
box-sizing: border-box;


z-index: 60;

  display: flex;
  justify-content: center;
  align-items: center;
}

.slide_txt{
     display: flex;
      justify-content: center;
      align-items: center;
  
    font-size: 44px;
    line-height: 130%;
    color: #FFFFFF;
    text-align: center;
   
   z-index: 9000;
    font-family: heisei-mincho-std, serif;
    font-style: normal;
    font-weight: 700;        
}













}



@media screen and (max-width: 1060px) {
/* タブレット用のスタイル記述 */

html,
body {
  margin: 0;
  height: 100%;
}



.image-crossfader_out{
  overflow: hidden;
  position: relative;
  height: 100%;
}

.image-crossfader_l{

width: 8%;
height: 100%;
float: left;

position: relative;
}

.image-crossfader_r{
width: 92%;
  overflow: hidden;
  position: relative;
  height: 100%;

float: right;

}




/*========= スクロールダウンのためのCSS ===============*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:0px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-11px;
	top: -45px;
    /*テキストの形状*/
	color: #000000;;

    font-family: ryo-gothic-plusn, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;


	letter-spacing: 0.2em;

    
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;    
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background:#000000;;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}


.image-crossfader {
  overflow: hidden;
  position: relative;
  height: 100%;
  
  z-index:2;
  

}
.image-crossfader-inner {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
    transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.image-crossfader-inner.is-visible {
  z-index: 1;
  opacity: 1;
  transform: scale(1.06);
}

.image-crossfader-inner:nth-child(1) {
  background-image:url(../img/top/slide01.jpg);
}
.image-crossfader-inner:nth-child(2) {
  background-image:url(../img/top/slide02.jpg);
}
.image-crossfader-inner:nth-child(3) {
  background-image:url(../img/top/slide03.jpg);
}


.slide_txt_out{
position: absolute;
width: 100%;
height: 100%;
padding-top: 60px;
box-sizing: border-box;
z-index: 60;

  display: flex;
  justify-content: center;
  align-items: center;
}

.slide_txt{
     display: flex;
      justify-content: center;
      align-items: center;
  
    font-size: 36px;
    line-height: 130%;
    color: #FFFFFF;
    text-align: center;
   
   z-index: 9000;
    font-family: heisei-mincho-std, serif;
    font-style: normal;
    font-weight: 700;        
}


}




@media screen and (max-width: 720px) {
/* スマートフォン用のスタイル記述 */

html,
body {
  margin: 0;
  height: 100%;
}


.image-crossfader_out{
  overflow: hidden;
  position: relative;
  height: 100%;
}

.image-crossfader_l{

width: 13%;
height: 100%;
float: left;

position: relative;
}

.image-crossfader_r{
width: 87%;
  overflow: hidden;
  position: relative;
  height: 100%;

float: right;

}




/*========= スクロールダウンのためのCSS ===============*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:0px;
    /*全体の高さ*/
	height:50px;

}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-10px;
	top: -45px;
    /*テキストの形状*/
	color: #000000;;

    font-family: ryo-gothic-plusn, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;


	letter-spacing: 0.25em;

    
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;    
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background:#000000;;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}


.image-crossfader {

  

}
.image-crossfader-inner {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
    transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.image-crossfader-inner.is-visible {
  z-index: 1;
  opacity: 1;
  transform: scale(1.06);
}

.image-crossfader-inner:nth-child(1) {
  background-image:url(../img/top/slide01.jpg);
}
.image-crossfader-inner:nth-child(2) {
  background-image:url(../img/top/slide02.jpg);
}
.image-crossfader-inner:nth-child(3) {
  background-image:url(../img/top/slide03.jpg);
}




.slide_txt_out{
	


}

.slide_txt_out{
position: absolute;
width: 100%;
height: 100%;
padding-top: 60px;
box-sizing: border-box;

z-index: 60;

  display: flex;
  justify-content: center;
  align-items: center;
}

.slide_txt{
     display: flex;
      justify-content: center;
      align-items: center;
  
    font-size: 31px;
    line-height: 130%;
    color: #FFFFFF;
    text-align: center;
   
   z-index: 9000;
    font-family: heisei-mincho-std, serif;
    font-style: normal;
    font-weight: 700;        
}


.slide_txt span::before {
	content: "\A" ;
	white-space: pre ;
}



}