@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	40% {}
	50% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	65% {}
	75% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}
/*3枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	80% {opacity: 1;}
	90% {opacity: 0;}
	100% {opacity: 0;}
}
/*4枚目*/
@keyframes slide4 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	80% {opacity: 1;}
	90% {opacity: 0;}
	100% {opacity: 0;}
}
/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
  position: fixed;	/*スクロールしても固定表示させる指定*/
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  z-index: 0;
  background-size: cover;
}
/*4枚画像の共通設定*/
.slide0,.slide1,.slide2,.slide3,.slide4 {
  background-attachment: fixed;
  background-image: url("slide0,slide1,slide2,slide3,slide4");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  z-index: 0;
}
/*1枚目*/
.slide0 {
	background: url(../images/26.jpg) no-repeat center center/cover;
	animation-name: slide0;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*2枚目*/
.slide1 {
	background: url(../images/11.jpg) no-repeat center center/cover;
	animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*3枚目*/
.slide2 {
	background: url(../images/9.jpg) no-repeat center center/cover;
	animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*4枚目*/
.slide3 {
	background: url(../images/25.jpg) no-repeat center center/cover;
	animation-name: slide3;
}
/*スライドショー下の曲線グラデーション画像*/
#kazari {
	position: absolute;
	bottom: 250px;	/*飾りがメニューの上に配置されるよう、ここはメニューブロックの高さを指定しておく。*/
	z-index: 2;
	left: 40%;	/*左から40%の場所に配置*/
	top: 32%;	/*上から35%の場所に配置*/
	width: 20%;	/*画像の幅*/
}


/* Caption */


.titan-caption {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.caption-content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	
}
.titan-title-size-1 {
	letter-spacing: 4px;
	font-size: 15px;
	color: rgb(255,255,255);
}

.titan-title-size-2 {
	letter-spacing: 8px;
	font-weight: 400;
	font-size: 21px;
	color: rgb(255,255,255);
}

.titan-title-size-3 {
  letter-spacing: 16px;
  font-size: 38px;
  color: rgb(255,255,255);
}

.titan-title-size-4 {
	letter-spacing: 18px;
	font-weight: 400;
	font-size: 48px;
	color: rgb(255,255,255);
}

.titan-title-size-5 {
  letter-spacing: 16px;
  font-size: 38px;
  color: rgb(255,255,255);
}

#mainimg li a:hover,
#mainimg li.current a {
	color: #333;	/*上下、左右へのボックス内の余白*/
	background-color: rgb(255,255,255);
	font-size: 12px;
	padding-top: 5px;
	padding-right: 12px;
	padding-bottom: 5px;
	padding-left: 12px;
	text-align: center;
	
}

.section-scroll.btn.btn-border-w.btn-round {
	color: #FFF;	/*上下、左右へのボックス内の余白*/
	background-color: transparent;
	border: thin solid rgb(255,255,255);
	font-size: 12px;
	padding-top: 5px;
	padding-right: 12px;
	padding-bottom: 5px;
	padding-left: 12px;
	text-align: center;
	text-decoration: none;
		
}



@media screen and (max-width:600px){

#kazari {
	position: absolute;
	bottom: 250px;	/*飾りがメニューの上に配置されるよう、ここはメニューブロックの高さを指定しておく。*/
	z-index: 2;
	left: 28%;	/*左から40%の場所に配置*/
	top: 36%;	/*上から35%の場所に配置*/
	width: 50%;	/*画像の幅*/
}


.titan-caption {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.caption-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.titan-title-size-4 {
	letter-spacing: 10px;
	font-size: 28px;
	color: rgb(255,255,255);
}
.titan-title-size-1 {
	letter-spacing: 4px;
	font-size: 12px;
	color: rgb(255,255,255);
}
.titan-title-size-2 {
  letter-spacing: 4px;
  font-size: 15px;
	color: rgb(255,255,255);
}
.titan-title-size-3 {
  letter-spacing: 8px;
  font-size: 20px;
  color: rgb(255,255,255);
}
.titan-title-size-5 {
  letter-spacing: 6px;
  font-size: 17px;
  color: rgb(255,255,255);
}


}