@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
@keyframes slide0 {
  0% {opacity: 1; transform: scale(1.05);}
  13% {opacity: 1; transform: scale(1.12);}
  20% {opacity: 1; transform: scale(1.2);}
  30% {opacity: 0; transform: scale(1.3);}
  40% {opacity: 0;}
  50% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 0;}
  80% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide1 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  23% {opacity: 1; transform: scale(1.1);}
  35% {opacity: 1; transform: scale(1.15);}
  45% {opacity: 1; transform: scale(1.2);}
  55% {opacity: 0; transform: scale(1.25);}
  60% {opacity: 0;}
  70% {opacity: 0;}
  80% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide2 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 1; transform: scale(1.1);}
  60% {opacity: 1; transform: scale(1.15);}
  70% {opacity: 1; transform: scale(1.2);}
  80% {opacity: 0; transform: scale(1.25);}
  90% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide3 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 0;}
  80% {opacity: 1; transform: scale(1.1);}
  90% {opacity: 1; transform: scale(1.2);}
  100% {opacity: 0.5; transform: scale(1.3);}
}


/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	position: relative;	/*スクロールしても固定表示させる指定*/
	top: 0px;
	width: 100%;
	height: 400px;
	z-index: -1;
}
/*３枚画像の共通設定*/
.slide0,.slide1,.slide2,.slide3 {
	animation-timing-function: linear;
	animation-duration: 30s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;left:0px;top:0px;width: 100%;height: 400px;
	animation-fill-mode: both;
	animation-delay: 1s;
}
/*土台画像*/
.slide0 {
	background: url(../images/1300_400_003.jpg) no-repeat center center/cover;
	position: relative;width: 100%; 
	animation-name: slide0;
	height: 400px;
}

/*１枚目*/
.slide1 {
	background: url(../images/1300_400_004.jpg) no-repeat center center/cover;
	animation-name: slide1;
	height: 400px;
			/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
	background: url(../images/1300_400_001.jpg) no-repeat center center/cover;
	animation-name: slide2;
	height: 400px;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*３枚目*/
.slide3 {
	background: url(../images/1300_400_002.jpg) no-repeat center center/cover;
	animation-name: slide3;	
	height: 400px;	/*上で設定しているキーフレーム（keyframes）の名前*/
}

/*1400
---------------------------------------------------------------------------*/
@media screen and (max-width:1440px) {
#mainimg {
	position: relative;	/*スクロールしても固定表示させる指定*/
	top: 0px;
	width: 100%;
	height: 320px;
	z-index: -1;
}
	
.slide0,.slide1,.slide2,.slide3 {
	animation-timing-function: linear;
	animation-duration: 30s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;left:0px;top:0px;width: 100%;height: 320px;
	animation-fill-mode: both;
	animation-delay: 1s;
}
/*土台画像*/
.slide0 {
	background: url(../images/1300_400_003.jpg) no-repeat center center/cover;
	position: relative;width: 100%; 
	animation-name: slide0;
	height: 320px;
}

/*１枚目*/
.slide1 {
	background: url(../images/1300_400_004.jpg) no-repeat center center/cover;
	animation-name: slide1;
	height: 320px;
			/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
	background: url(../images/1300_400_001.jpg) no-repeat center center/cover;
	animation-name: slide2;
	height: 320px;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*３枚目*/
.slide3 {
	background: url(../images/1300_400_002.jpg) no-repeat center center/cover;
	animation-name: slide3;	
	height: 320px;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
}

/*1100
---------------------------------------------------------------------------*/
@media screen and (max-width:1100px) {
#mainimg {
	position: relative;	/*スクロールしても固定表示させる指定*/
	top: 0px;
	width: 100%;
	height: 240px;
	z-index: -1;
}
	
.slide0,.slide1,.slide2,.slide3 {
	animation-timing-function: linear;
	animation-duration: 30s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;left:0px;top:0px;width: 100%;height: 240px;
	animation-fill-mode: both;
	animation-delay: 1s;
}
/*土台画像*/
.slide0 {
	background: url(../images/1300_400_003.jpg) no-repeat center center/cover;
	position: relative;width: 100%; 
	animation-name: slide0;
	height: 240px;
}

/*１枚目*/
.slide1 {
	background: url(../images/1300_400_004.jpg) no-repeat center center/cover;
	animation-name: slide1;
	height: 240px;
			/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
	background: url(../images/1300_400_001.jpg) no-repeat center center/cover;
	animation-name: slide2;
	height: 240px;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*３枚目*/
.slide3 {
	background: url(../images/1300_400_002.jpg) no-repeat center center/cover;
	animation-name: slide3;	
	height: 240px;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
}


/*CSSスライドショー設定　テキスト用
---------------------------------------------------------------------------*/
@keyframes slide_txt0 {
  0% {opacity: 0;}
  15% {opacity: 1;}
  20% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0;}
  50% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 0;}
  80% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide_txt1 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0;}
  50% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 0;}
  80% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide_txt2 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 1;}
  40% {opacity: 0;}
  50% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 0;}
  80% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide_txt3 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 1;}
  60% {opacity: 0;}
  70% {opacity: 0;}
  80% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes slide_txt4 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 1;}
  80% {opacity: 1;}
  90% {opacity: 0;}
  100% {opacity: 0;}
}

/*mainimgテキスト用
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg_txt {
	width: 60%;
	height: 240px;
	z-index: 111;
	margin-left: auto;
	margin-right: auto;
	margin-top: 70px;
	text-align: left;
}
/*３枚画像の共通設定*/
.slide_txt0,.slide_txt1,.slide_txt2,.slide_txt3,.slide_txt4 {
	animation-timing-function: linear;
	animation-duration: 30s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-fill-mode: both;
	animation-delay: 1s;
}

.slide_txt0,.slide_txt1,.slide_txt2,.slide_txt3,.slide_txt4 h1 {
   	font-family: "Yu Mincho", "Hiragino Mincho ProN", "serif";
   	font-size: 150%; 
	font-weight: normal;
	color: #fff;
}

h2 {
	font-family: Arial, Helvetica, "sans-serif";
	font-style: italic;
	font-size: 18px; 
	color: #fff;
	opacity: 0.7;
	transform: scale(0.75,1);
	text-align: left;
}

.slide_txt0 {
    position: absolute;
	width: 300px;
	float: left;
	animation-name: slide_txt0;
	text-align: left;
}

.slide_txt0 h2 {
    position: absolute;
	left:-38px;
	top:70px;
	float: left;
}

/*2枚目*/
.slide_txt1 {
    position: relative;
	animation-name: slide_txt1;
	text-align: left;
	width: 40%;
	left: 300px;
	top: 30px;
}

.slide_txt1 h2 {
	position: absolute;
	left: -20px;
	top: 40px;
}

/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 52px;
	text-align: left;
}

.slide_txt2 h2 {
	position: absolute;
	top: 42px;
	left: -55px;
}

/*4枚目*/
.slide_txt3 {
    position: absolute;
	width: 40%;
	animation-name: slide_txt3;	
	top:70px;
	text-align: left;
}

.slide_txt3 h2 {
	position: absolute;
	width: 40%;
	top: 160px;
	left: 50px;
}

/*5枚目*/
.slide_txt4 {
 	position: relative; 
	width: 100%;
	animation-name: slide_txt4;	
}
.slide_txt4 h1 {
	text-align: center;
	margin-top: -90px;
}

/*1440
---------------------------------------------------------------------------*/
@media screen and (max-width:1440px) {
#mainimg_txt {
	position: relative;	
	width: 70%;
	height: 240px;
	z-index: 111;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	text-align: left;
}
/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 42px;
	text-align: left;
}

.slide_txt2 h2 {
	position: absolute;
	top: 46px;
	left: -55px;
}

/*4枚目*/
.slide_txt3 {
    position: absolute;
	width: 40%;
	animation-name: slide_txt3;	
	top:15px;
	text-align: left;
}

.slide_txt3 h2 {
	position: absolute;
	width: 80%;
	top: 160px;
	left: 40px;
}

/*5枚目*/
.slide_txt4 {
    position: relative;
 	width: 100%;
	animation-name: slide_txt4;	
	
}
.slide_txt4 h1 {
    width: 100%;
	position: absolute;
	top:10px;
	text-align: center;
}
}

/*1200
---------------------------------------------------------------------------*/
@media screen and (max-width:1200px) {
#mainimg_txt {
	position: relative;	
	width: 80%;
	height: 200px;
	z-index: 111;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	text-align: left;	
}
.slide_txt0,.slide_txt1,.slide_txt2,.slide_txt3,.slide_txt4 h1 {
   	font-family: "Yu Mincho", "Hiragino Mincho ProN", "serif";
   	font-size: 135%; 
	font-weight: normal;
	color: #fff;
}

h2 {
	font-family: Arial, Helvetica, "sans-serif";
	font-style: italic;
	font-size: 17px; 
	color: #fff;
	opacity: 0.7;
	transform: scale(0.71,1);
	text-align: left;
}
.slide_txt0 {
    position: absolute;
	width: 290px;
	float: left;
	top:-15px;
	animation-name: slide_txt0;
	text-align: left;
}

.slide_txt0 h2 {
    position: absolute;
	left:-40px;
	top:60px;
	float: left;
}

/*2枚目*/
.slide_txt1 {
    position: relative;
	animation-name: slide_txt1;
	text-align: left;
	width: 40%;
	left: 260px;
	top: 11px;
}

.slide_txt1 h2 {
	position: absolute;
	left: -20px;
	top: 35px;
}

/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 10px;
	text-align: left;
}

.slide_txt2 h2 {
	position: absolute;
	top: 35px;
	left: -60px;
}

/*4枚目*/
.slide_txt3 {
    position: absolute;
	width: 70%;
	animation-name: slide_txt3;	
	top:-10px;
	text-align: left;
}

.slide_txt3 h2 {
	position: absolute;
	width: 80%;
	top: 140px;
	left: 40px;
}

/*5枚目*/
.slide_txt4 {
    position: relative;
 	width: 100%;
	animation-name: slide_txt4;	
	
}
.slide_txt4 h1 {
    width: 100%;
	position: absolute;
	top:-15px;
	text-align: center;
}
.slidelogo {
width: 50%;
}
}

/*920
---------------------------------------------------------------------------*/
@media screen and (max-width:920px) {
#mainimg_txt {
	position: relative;	
	width: 80%;
	height: 200px;
	z-index: 111;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;	
	text-align: left;
}
.slide_txt0,.slide_txt1,.slide_txt2,.slide_txt3,.slide_txt4 h1 {
   	font-family: "Yu Mincho", "Hiragino Mincho ProN", "serif";
   	font-size: 110%; 
	font-weight: normal;
	color: #fff;
}

h2 {
	font-family: Arial, Helvetica, "sans-serif";
	font-style: italic;
	font-size: 14px; 
	color: #fff;
	opacity: 0.7;
	transform: scale(0.7,1);
	text-align: left;
}
.slide_txt0 {
    position: absolute;
	width: 260px;
	float: left;
	top: 0px;
	animation-name: slide_txt0;
	text-align: left;
}

.slide_txt0 h2 {
    position: absolute;
	left:3px;
	top:50px;
	float: left;
}

/*2枚目*/
.slide_txt1 {
    position: relative;
	animation-name: slide_txt1;
	text-align: left;
	width: 40%;
	left: 210px;
	top: 22px;
}

.slide_txt1 h2 {
	position: absolute;
	left: 35px;
	top: 28px;
}

/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 30px;
	left: -115px;
	text-align: left;
}

.slide_txt2 h2 {
	top: 30px;
	left: 103px;
}

/*4枚目*/
.slide_txt3 {
    position: absolute;
	width: 40%;
	animation-name: slide_txt3;	
	top: 10px;
	text-align: left;
}


.slide_txt3 h2 {
	position: absolute;
	width: 80%;
	top: 120px;
	left: 40px;
}

/*5枚目*/
.slide_txt4 {
    position: relative;
 	width: 100%;
	animation-name: slide_txt4;	
	
}
.slide_txt4 h1 {
    width: 100%;
	position: absolute;
	top:30px;
	text-align: center;
}
.slidelogo {
width: 65%;
}
}

/*820
---------------------------------------------------------------------------*/
@media screen and (max-width:820px) {

.slide_txt0 {
    position: absolute;
	width: 260px;
	float: left;
	top: 0px;
	animation-name: slide_txt0;
	text-align: left;
}

.slide_txt0 h2 {
    position: absolute;
	left:3px;
	top:50px;
	float: left;
}

/*2枚目*/
.slide_txt1 {
    position: relative;
	animation-name: slide_txt1;
	text-align: left;
	width: 40%;
	left: 210px;
	top: 22px;
}

.slide_txt1 h2 {
	position: absolute;
	left: 19px;
	top: 28px;
}

/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 30px;
	left: -75px;
	text-align: left;
}

.slide_txt2 h2 {
	position: absolute;
	top: 30px;
	left: 62px;
}
}

/*770
---------------------------------------------------------------------------*/
@media screen and (max-width:770px) {
#mainimg_txt {
	position: relative;	
	width: 85%;
	height: 200px;
	z-index: 111;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;	
	text-align: left;
}
/*4枚目*/
.slide_txt3 {
    position: absolute;
	width: 70%;
	animation-name: slide_txt3;	
	top: 10px;
	text-align: left;
}


.slide_txt3 h2 {
	position: absolute;
	width: 80%;
	top: 120px;
	left: 60px;
}
}
/*660
---------------------------------------------------------------------------*/
@media screen and (max-width:660px) {
/*2枚目*/
.slide_txt1 {
    position: relative;
	animation-name: slide_txt1;
	text-align: left;
	width: 40%;
	left: 239px;
	top: 22px;
}

.slide_txt1 h2 {
	position: absolute;
	left: 0px;
	top: 28px;
}

/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 30px;
	left: -25px;
	text-align: left;
}

.slide_txt2 h2 {
	position: absolute;
	top: 30px;
	left: 15px;
}
/*4枚目*/
.slide_txt3 {
    position: absolute;
	width: 60%;
	animation-name: slide_txt3;	
	top: 10px;
	text-align: left;
}


.slide_txt3 h2 {
	position: absolute;
	width: 80%;
	top: 120px;
	left: 60px;
}
}
/*590
---------------------------------------------------------------------------*/
@media screen and (max-width:590px) {
#mainimg_txt {
	position: relative;	
	width: 92%;
	height: 200px;
	z-index: 111;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;	
	text-align: left;
}
/*2枚目*/
.slide_txt1 h2 {
	position: absolute;
	left: -3px;
	top: 28px;
}

/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 30px;
	left: -20px;
	text-align: left;
}

.slide_txt2 h2 {
	position: absolute;
	top: 30px;
	left: 5px;
}
.slidelogo {
width: 72%;
}
}
/*502
---------------------------------------------------------------------------*/
@media screen and (max-width:502px) {
#mainimg_txt {
	position: relative;	
	width: 98%;
	height: 200px;
	z-index: 111;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;	
	text-align: left;
}
}
/*470
---------------------------------------------------------------------------*/
@media screen and (max-width:470px) {
#mainimg_txt {
	position: relative;	
	width: 100%;
	height: 180px;
	z-index: 111;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;	
	text-align: left;
}
.slide_txt0,.slide_txt1,.slide_txt2,.slide_txt3,.slide_txt4 h1 {
   	font-family: "Yu Mincho", "Hiragino Mincho ProN", "serif";
   	font-size: 95%; 
	font-weight: normal;
	color: #fff;
}

h2 {
	font-family: Arial, Helvetica, "sans-serif";
	font-style: italic;
	font-size: 12.5px; 
	color: #fff;
	opacity: 0.7;
	transform: scale(0.7,1);
	text-align: left;
}
.slide_txt0 {
    position: absolute;
	width: 250px;
	float: left;
	top: 10px;
	animation-name: slide_txt0;
	text-align: left;
	left: -15px;
}

.slide_txt0 h2 {
    position: absolute;
	left:13px;
	top:44px;
	float: left;
}

/*2枚目*/
.slide_txt1 {
    position: relative;
	animation-name: slide_txt1;
	text-align: left;
	left: 200px;
	top: 30px;
}

.slide_txt1 h2 {
	position: absolute;
	left: -9px;
	top: 24px;
}

/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 40px;
	left: -3px;
	text-align: left;
}

.slide_txt2 h2 {
	position: absolute;
	top: 27px;
	left: -12px;
}

/*4枚目*/
.slide_txt3 {
    width: 70%;
	animation-name: slide_txt3;	
	top: 20px;
	text-align: left;
}

.slide_txt3 h2 {
	position: absolute;
	top: 100px;
	left: 65px;
}

/*5枚目*/
.slide_txt4 {
	animation-name: slide_txt4;	
	
}
.slide_txt4 h1 {
	position: absolute;
	top:52px;
	text-align: center;
}
.slidelogo {
width: 83%;

}
}

/*395
---------------------------------------------------------------------------*/
@media screen and (max-width:395px) {

.slide_txt0,.slide_txt1,.slide_txt2,.slide_txt3,.slide_txt4 h1 {
   	font-family: "Yu Mincho", "Hiragino Mincho ProN", "serif";
   	font-size: 85%; 
	font-weight: normal;
	color: #fff;
}

h2 {
	font-family: Arial, Helvetica, "sans-serif";
	font-style: italic;
	font-size: 12.5px; 
	color: #fff;
	opacity: 0.7;
	transform: scale(0.65,1);
	text-align: left;
}
.slide_txt0 {
    position: absolute;
	width: 250px;
	float: left;
	top: 15px;
	animation-name: slide_txt0;
	text-align: left;
	left: -22px;
}

.slide_txt0 h2 {
    position: absolute;
	left:11px;
	top:43px;
	float: left;
}

/*2枚目*/
.slide_txt1 {
    position: relative;
	animation-name: slide_txt1;
	text-align: left;
	left: 195px;
	top: 34px;
}

.slide_txt1 h2 {
	position: absolute;
	left: -18px;
	top: 23px;
}

/*3枚目*/
.slide_txt2 {
    position: relative; 
	animation-name: slide_txt2;
	width: 100%;
	top: 45px;
	left: 10px;
	text-align: left;
}

.slide_txt2 h2 {
	position: absolute;
	top: 27px;
	left: -30px;
}


/*5枚目*/
.slide_txt4 {
	animation-name: slide_txt4;	
	
}
.slide_txt4 h1 {
	position: absolute;
	top:70px;
	text-align: center;
}
.slidelogo {
width: 85%;
}
}