@charset "utf-8";


/*メイン画像
---------------------------------------------------------------------------*/
#mainimg {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

/*３枚の画像の共通設定*/
.slide {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。*/
}

/*１枚目画像*/
.slide1 {
	background: url('../images/1-yoko.jpg') no-repeat center center / cover;	/*１枚目の背景画像の読み込み*/
}

/*２枚目画像*/
.slide2 {
	background: url('../images/2-yoko.jpg') no-repeat center center / cover;	/*２枚目の背景画像の読み込み*/
}

/*３枚目画像*/
.slide3 {
	background: url('../images/3-yoko.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
}
.slide4 {
	background: url('../images/10.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
}
.slide5 {
	background: url('../images/20.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
}
.slide6 {
	background: url('../images/21.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
}
.slide7 {
	background: url('../images/27.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
}
.slide8 {
	background: url('../images/34.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
}
.slide9 {
	background: url('../images/35.jpg') no-repeat center center / cover;	/*３枚目の背景画像の読み込み*/
}

	/*端末を縦向きにした際に、読み込む画像を変更したい場合はここで指定します*/
	@media (orientation: portrait) {
	
	/*１枚目画像*/
	.slide1 {
		background-image: url('../images/1-tate.jpg');	/*縦向き専用の画像をここで設定します*/
	}

	/*2枚目画像*/
	.slide2 {
		background-image: url('../images/2-tate.jpg');	/*縦向き専用の画像をここで設定します*/
	}

	/*3枚目画像*/
	.slide3 {
		background-image: url('../images/3-tate.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide4 {
		background-image: url('../images/10-a.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide5 {
		background-image: url('../images/20-a.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide6 {
		background-image: url('../images/21-a.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide7 {
		background-image: url('../images/27-a.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide8 {
		background-image: url('../images/34-a.jpg');	/*縦向き専用の画像をここで設定します*/
	}
	.slide8 {
		background-image: url('../images/35-a.jpg');	/*縦向き専用の画像をここで設定します*/
	}


	}/*追加指定ここまで*/
.ta3 caption {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #eee;		/*背景色*/
	color: #666;			/*文字色*/
	padding: 10px;			/*ボックス内の余白*/
}
.ta3 {
	table-layout: fixed;
	width: 80%;
	margin: 0 auto 20px;
	background: ivory;	/*背景色*/
	color: #666;		/*文字色*/
}
	@media screen and (max-width:600px) {
.ta3 {
	width: 100%;
}
}
.ta3, .ta3 td, .ta3 th {
	word-break: break-all;
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta3の左側ボックス*/
.ta3 th {
	width: 20rem;		/*幅*/
	text-align: center;	/*センタリング*/
}
	@media screen and (max-width:600px) {
.ta3 th {
	width: 35%;
  line-height: auto;
}
.ta3 td {
	width: auto;
  line-height: 2vh;
}
}

.ta3 td {
	text-align: center;	/*センタリング*/
}
.ta3 td.lf {
	text-align: left;	/*センタリング*/
}

/*labelタグを２列表示にする（CMS用）*/
.ta3.cms td label {
	display: block;
	float: left;
	width: 50%;
}
.ta3 select {
  color: #666;
}
.ta3 input[type="text"] { 
    color: #666;
    font-size: 14px;
    height: 25px;
    padding-left: 10px;
}
.ta3 input[type="checkbox"] {
    float: left;
    position: relative;
    top: 8px;
    margin-right: 8px;
}
.ta3 textarea {
  color: #666;
  font-size: 14px;
  padding-left: 10px;
  padding-top: 10px;
}

.icon {
	display: inline-block;
  position: relative;
  bottom: 2px;
	font-size: 14px;		/*文字サイズ*/
	border-radius: 4px;		/*角丸のサイズ*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: #eee;		/*背景色*/
}
.icon.color1 {
	border: 1px solid red;	/*枠線の幅、線種、色*/
	background: red;		/*背景色*/
	color: #fff;				/*文字色*/
}