@charset "UTF-8";
/* CSS Document */

.topimage-slider {
	aspect-ratio: 1200 / 400;
	display: block;
	margin: 0;
	max-height: 400px;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100%;
}
.topimage-track {
	display: flex;
	height: 100%;
	left: 0;
	position: relative;
	transform: translateX(0);
	transition: transform 800ms ease;
	width: 100%;
}
.topimage-item {
	flex: 0 0 min(1200px, calc(100% - 160px));
	height: 100%;
	opacity: .35;
	pointer-events: none;
	transition: opacity 800ms ease;
}
.topimage-item.is-active {
	opacity: 1;
	pointer-events: auto;
}
.topimage-slide {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.topimage-slider img {
	display: block;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: 100%;
}
.topimage-arrow {
	background: rgba(0, 0, 0, .55);
	border: 0;
	cursor: pointer;
	height: 72px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	z-index: 5;
}
.topimage-arrow::before {
	border-color: #fff;
	border-style: solid;
	content: "";
	display: block;
	height: 14px;
	position: absolute;
	top: 50%;
	width: 14px;
}
.topimage-arrow-prev {
	border-radius: 6px 0 0 6px;
	left: max(0px, calc((100% - min(1200px, calc(100% - 160px))) / 2 - 40px));
}
.topimage-arrow-prev::before {
	border-width: 0 0 2px 2px;
	left: 15px;
	transform: translateY(-50%) rotate(45deg);
}
.topimage-arrow-next {
	border-radius: 0 6px 6px 0;
	right: max(0px, calc((100% - min(1200px, calc(100% - 160px))) / 2 - 40px));
}
.topimage-arrow-next::before {
	border-width: 2px 2px 0 0;
	right: 15px;
	transform: translateY(-50%) rotate(45deg);
}
.topimage-dots {
	bottom: 16px;
	display: flex;
	gap: 8px;
	justify-content: center;
	left: 50%;
	margin: 0;
	padding: 0;
	position: absolute;
	transform: translateX(-50%);
	z-index: 6;
}
.topimage-dot {
	background: rgba(255, 255, 255, .65);
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 50%;
	cursor: pointer;
	display: block;
	height: 10px;
	margin: 0;
	padding: 0;
	width: 10px;
}
.topimage-dot.is-active {
	background: #c23a1f;
	border-color: #c23a1f;
}
/*#topimage {
	visibility: hidden;
	display: none;
}*/
#topimage h1 {
	background: url("../img/top/topimage2026_bg.png") center center no-repeat;
	background-size: auto 100%;
	display: block;
	text-align: center;
}
#topimage img {
	width: auto;
	height: 360px;
}
#topimage_ad a {
	width: 100%;
	display: block;
}
#topimage_ad img {
	width: 100%;
}
.sold img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}

/*共通
-------------------------------------------------------*/
section.bc {
  display: none;
}
.slideWrap, .slideWrap * {
  position: relative;
}
.slideWrap {
  margin-bottom: 30px;
}
.slideWrap .slide > * {
  width: 100%;
  margin: 0;
  /*padding: 0;*/
	display: flex;
  position: relative;
	/*flex-direction: column;*/
  align-items: center;
}
.slideWrap .slide > *:not(.rainbow) {
  height: 100%;
}
.slideWrap .slideCont {
  width: 100%;
}

@keyframes fadeOut {
  0% {
  }
  90% {
    display: block;
    visibility: visible;
    opacity: 1;
  }
  100% {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    display: block;
  }
  100% {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}
.slideWrap .slide > *:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  animation: fadeOut 5s ease-out 0s 1 forwards;
}
/*
.slideWrap .slide > *:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  animation: fadeOut 5s ease-out 5s 1 forwards;
}
.slideWrap .slide > *:nth-child(3) {
  z-index: 1;
}
*/
.slideWrap .slide > *:nth-child(2) {
  z-index: 1;
}
.slideWrap .slide .corona {
  background: #ffffff;
  background: #9be1fe;
  width: 100%;
  height: 100%;
  /*
  position: absolute;
  left: 0px;
  top: 5%;
  top: 0%;
  z-index: 10;
  animation: fadeOut 6s ease-out 0s 1 forwards;
  */
}
.slideWrap .slide .corona::before {
  content: "";
  background: #ffffff;
  width: 100%;
  height: 50%;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
}
.slideWrap .slide .corona > * {
  z-index: 1;
}
.slideWrap .slide .corona video {
  object-fit: cover;
  /*
  max-width: 660px;
  height: auto;
  */
  max-width: 100%;
  max-height: 100%;
}
.slideWrap .slide .rainbow {
  /*font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";*/
  font-family: 'M PLUS Rounded 1c', sans-serif;
  border-color: #82d8ff;
  padding: 0;
  padding-bottom: 38px;
  align-items: flex-start;
}
.slideWrap .slide .rainbow figure {
  background: #82d8ff;
}
.slideWrap .slide .rainbow figure img {
  height: 240px;
  width: auto;
}


/*pc
-------------------------------------------------------*/
@media screen and (min-width: 740px) {

	#topimage_ad {
		width: 1260px;
		margin:	0 auto;
	}
	#topimage_ad a {
		width: 1200px;
		margin:	0 auto;
	}
  .ad.pc {
    margin-bottom: 30px;
  }
  .slideWrap.pc {
    display: block;
  }
  /*.content .recommend {
    margin-top: 30px;
  }*/
  .side .recommend {
    display: none;
  }

}


/*sphone
-------------------------------------------------------*/
@media screen and (min-width: 0px) and (max-width: 739px) {

	.topimage-item {
		/*flex-basis: 86%;*/
		flex-basis: 100%;
	}
	.topimage-arrow {
		display: none;
	}
	.topimage-dots {
		bottom: 8px;
	}
	.topimage-dot {
		height: 8px;
		width: 8px;
	}
	#topimage_ad {
		overflow: hidden;
	}
  .side {
    margin-top: 0;
  }
  .side, .content .recommend {
    order: -1;
  }
  .side .slideWrap, .side .ad, .side .fb, .side .pr, .side .handbook/*, .side .archive*/ {
		display: block;
  }

  .slideWrap {
    margin-bottom: 20px;
  }
  .slideWrap.sp {
    display: block;
  }
  .slideWrap .slide .rainbow {
    padding: 18px;
    padding-top: 0px;
  }
  .slideWrap .slide .rainbow figure {
    margin: 0 -20px;
    overflow: hidden;
  }
  .slideWrap .slide .rainbow figure img {
    width: 100%;
    height: 160px;
    object-fit: cover;
  }
  .slideWrap .slide .rainbow p {
    text-align: justify;
  }
  /*.slideWrap .slide .rainbow p:last-child {
    text-align: center;
  }*/


}