@charset "utf-8";
/* page setting
--------------------------------------------------------- */
/* カルーセル全体 */
.carousel {
  /* 水平方向中央寄せ */
  display: flex;
  justify-content: center;
}
/* カルーセル内容 */
.contains {
  /* サイズは自由に変更してください。*/
  /* 下の.slideも同じサイズにしてください。 */
  width: 100%;
  height: 640px;
  overflow: clip;
  position: relative;
  padding: 0;
  list-style: none;
}
/* スライド切り換え用ラジオボタンは常に非表示 */
.slide_select {
  display: none;
}
/* 各スライド */
.slide {
  /* サイズは自由に変更してください。*/
  /* 上の.containsも同じサイズにしてください。 */
  width: 100%;
  height: 640px;
  position: absolute;
  /* スライドの初期値は選択されていないので透明にしておく */
  opacity: 0;
	text-align: center;
}

.slide img {
	height: 100%;
}

.slide .img-01, .img-02, .img-03, .img-04{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}

.slide .img-01{
   background-image: url('../img/top/001.jpg');
   background-position: center;
}

.slide .img-02{
   background-image: url('../img/top/002.jpg');
   background-position: center;
}

.slide .img-03{
   background-image: url('../img/top/001.jpg');
   background-position: center;
}

.slide .img-04{
   background-image: url('../img/top/002.jpg');
   background-position: center;
}

/* 前へ次へボタン */
.scroll_button {
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  /* 縦中央から20px上の位置 */
  top: 50%;
  margin-top: -20px;
/* 上辺と右辺のみ幅5pxの枠線 */
  border-width: 5px 5px 0 0;
  border-style: solid;
  border-color: #fdfdfd;
  cursor: pointer;
  /* 普段はボタンはやや薄くする */
  opacity: 0.5;
  /* スライドよりも前面にする */
  z-index: 3;
}
/* ホバー時にボタンを強調 */
.scroll_button:hover {
  opacity: 1;
}
/* 前へボタン */
.scroll_prev {
  left: 15px;
  /* 上辺と右辺の枠線を回転して"＜"にする */
  transform: rotate(-135deg);
}
/* 次へボタン */
.scroll_next {
  right: 15px;
  /* 上辺と右辺の枠線を回転して"＞"にする */
  transform: rotate(45deg);
}
/* スライド移動ボタンエリア */
.move_controler {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
/* スライド移動の各ボタン */
.button_move {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  border-radius: 100%;
  cursor: pointer;
  /* 普段はやや薄くする */
  opacity: 0.5;
  /* スライドより前面にする */
  z-index: 2;
}
/* ホバー時はやや明るくする */
.button_move:hover {
  opacity: 0.75;
}
/* スライド移動ボタンの色 */
.button_move {
  background-color: #fdfdfd;
}
/* 1番目のスライド選択時 */
/* 1番目のスライドの透明度を0にして表示する */
.slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
  opacity: 1;
}
/* 1番目のスライドの前へ次へボタンの領域を */
.slide_select:nth-of-type(1):checked
  ~ .move_controler
  .button_move:nth-of-type(1) {
  opacity: 1;
}
.slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
  opacity: 1;
}
.slide_select:nth-of-type(2):checked
  ~ .move_controler
  .button_move:nth-of-type(2) {
  opacity: 1;
}
.slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
  opacity: 1;
}
.slide_select:nth-of-type(3):checked
  ~ .move_controler
  .button_move:nth-of-type(3) {
  opacity: 1;
}
.slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
  opacity: 1;
}
.slide_select:nth-of-type(4):checked
  ~ .move_controler
  .button_move:nth-of-type(4) {
  opacity: 1;
}



/*　文字装飾　*/


@media screen and (min-width: 601px) {

	.msg{
		/*font-size: 20px;*/
		font-size: 4vmin;
		color: #3A3A3A;
		position: absolute;
		top: -50%;
		left: -50%;
		transform: translate(-50% , -50%);
		white-space: nowrap;
	}

	.msg2{
		display: none;
	}

	.msg-01,.msg-04{
		z-index:1;
		display: inline-block;
		padding: 10px 20px;
		background:rgba(255,255,255,0.8);
		position: absolute;
		top: 15%;
		left: 40%;
		letter-spacing: 0.22em;
		font-weight: bold;
	}

	.msg-02,.msg-05{
		z-index:1;
		display: inline-block;
		padding: 10px 35px;
		background:rgba(255,255,255,0.8);
		position: absolute;
		top: 32%;
		left: 50%;
		letter-spacing: 0.22em;
		font-weight: bold;
	}

	.msg-03,.msg-06{
		z-index:1;
		display: inline-block;
		padding: 10px 20px;
		background:rgba(255,255,255,0.8);
		position: absolute;
		top: 49%;
		left: 60%;
		letter-spacing: 0.22em;
		font-weight: bold;
	}

	.msg-01-sp,.msg-02-sp,.msg-03-sp,.msg-04-sp,.msg-05-sp,.msg-06-sp,{
		display: none;
	}

}

@media screen and (max-width: 600px) {
	.msg{
		display: none;
	}

	.msg2{
		/*font-size: 20px;*/
		font-size: 4.5vmin;
		color: #3A3A3A;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50% , -50%);
		white-space: nowrap;
	}
	.msg-01,.msg-02,.msg-03,.msg-04,.msg-05,.msg-06,{
		display: none;
	}

	.msg-01-sp,.msg-04-sp{
		z-index:1;
		display: inline-block;
		padding: 15px 20px;
		background:rgba(255,255,255,0.8);
		position: absolute;
		top: 5%;
		left: 5%;
		letter-spacing: 0.22em;
		font-weight: bold;
	}

	.msg-02-sp{
		z-index:1;
		display: inline-block;
		padding: 15px 30px;
		background:rgba(255,255,255,0.8);
		position: absolute;
		top: 17.5%;
		left: 7%;
		letter-spacing: 0.22em;
		font-weight: bold;
	}

	.msg-03-sp,.msg-06-sp{
		z-index:1;
		display: inline-block;
		padding: 15px 20px;
		background:rgba(255,255,255,0.8);
		position: absolute;
		top: 30%;
		left: 10%;
		letter-spacing: 0.22em;
		font-weight: bold;
	}

	.msg-05-sp{
		z-index:1;
		display: inline-block;
		padding: 15px 21px;
		background:rgba(255,255,255,0.8);
		position: absolute;
		top: 17.5%;
		left: 7%;
		letter-spacing: 0.22em;
		font-weight: bold;
	}



	.msg-07{
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		left: 0;
	}

}