@charset "UTF-8";

#wrapper #mainv {
	width: 100%;
	height: calc(100vh - 120px);
	position: relative;
}

#wrapper #mainv .ban1 {
	position: absolute;
	top: 246px;
	right: 3%;
}


/*
#wrapper #mainv #logo20th {
	width: 180px;
	position: absolute;
	top: 36px;
	left: 36px;
}
#wrapper #mainv #logo20th img {
	width: 100%;
}

#wrapper #mainv #harmony {
	width: 521px;
	height: 50px;
	background: #FFF;
	position: absolute;
	bottom: 0;
	right: 0;
}
*/
#wrapper #mainv .zoom-fade {
	width: 100%;
	height: calc(100vh - 120px);
	margin: 0 auto;
}
#wrapper #mainv .zoom-fade__item {
}
#wrapper #mainv .item {
	width: 100%;
	height: calc(100vh - 120px);
	overflow: hidden;
	position: relative;
}
#wrapper #mainv .item img {
	width: 100%;
	height: calc(100vh - 120px);
	object-fit: cover;
	object-position: center center;
	transform-origin: center center;
	display: block;
}

#wrapper #mainv .item p.text {
	color: #fff;
	width: 100%;
	text-align: right;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	padding: 30px 20px 10px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10000;
}
#wrapper #mainv a:hover {
	opacity: 1;
}

.add-animation {
	animation: zoom-fade 8s both;
}

@keyframes zoom-fade {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.1);
	}
}

/* #wrapper #mainv #logo {
	width: 238px;
	position: absolute;
	top: calc(50vh - 75px);
	left: 50%;
	transform: translateX(-50%);
}
#wrapper #mainv #logo img {
	width: 100%;
}
#wrapper #mainv #logo20th {
	width: 180px;
	position: absolute;
	top: 36px;
	left: 36px;
}
#wrapper #mainv #logo20th img {
	width: 100%;
}
#wrapper #mainv #harmony {
	width: 521px;
	height: 50px;
	background: #FFF;
	position: absolute;
	bottom: 2px;
	right: 0;
} */

#wrapper #sec201 .sec1 {
	width: 565px;
	margin: 0 auto;
	padding: 0 0 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#wrapper #sec201 .sec2 {
	border-bottom: none;
	padding: 60px 0 40px;
}


#wrapper .contents {
	background: #FFF;
	padding: 60px 0 0;
}

#wrapper #bans {
	border-bottom: none;
	padding-top: 0;
	padding-bottom: 0;
}
#wrapper #bans ul {
	display: flex;
	justify-content: center;
}
#wrapper #bans ul li {
	margin: 0 15px;
}

#wrapper .contents #topics {
	border-bottom: none;
	padding-bottom: 0;
}
#wrapper .contents #topics h2 {
	margin-bottom: 40px;
}
#wrapper .contents #topics .topicsInner {
	text-align: left;
	background: #f5f5f5;
	padding-bottom: 60px;
}
#wrapper .contents #topics .column3 {
	display: flex;
	flex-wrap: wrap;
}
#wrapper .contents #topics .column3 li {
	width: calc(100% / 3);
	margin: 0 0 20px;
}

#wrapper .contents #topics .item {
	position: relative;
}
#wrapper .contents #topics .item .image img {
	width: 100%;
}
#wrapper .contents #topics .column1.item .box {
	background: #FFF;
	position: absolute;
	top: 50%;
	right: 3.7vw;
	transform: translateY(-50%);
}
#wrapper .contents #topics .column3 .item .box {
	width: 320px;
	background: #FFF;
/*	margin: -60px auto 0;*/
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

#wrapper .contents #topics .item .box .inner {
	width: 320px;
	padding: 40px 40px 60px;
	position: relative;
}
#wrapper .contents #topics .item .box::after {
	content: " ";
	width: 50px;
	height: 7px;
	background: url(../images/common/s_arrow_common.png) no-repeat;
	background-size: 50px auto;
	position: absolute;
	bottom: 30px;
	left: 40px;
}
#wrapper .contents #topics .item .box .category {
	font-size: .857rem;
	font-weight: bold;
	position: relative;
}
#wrapper .contents #topics .item .box .category::after {
	content: " ";
	width: 38px;
	height: 38px;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	top: -10px;
	right: -10px;
}
#wrapper .contents #topics .item .box .category.osusume-all::after { background-image: url(../images/common/s_all.png); }
#wrapper .contents #topics .item .box .category.osusume-stay::after { background-image: url(../images/common/s_stay.png); }
#wrapper .contents #topics .item .box .category.osusume-restaurant::after { background-image: url(../images/common/s_restaurant.png); }
#wrapper .contents #topics .item .box .category.osusume-hall::after { background-image: url(../images/common/s_hall.png); }
#wrapper .contents #topics .item .box .category.osusume-wedding::after { background-image: url(../images/common/s_bridal.png); }
#wrapper .contents #topics .item .box .category.osusume-sweets::after { background-image: url(../images/common/s_sweets.png); }
#wrapper .contents #topics .item .box .category.osusume-others::after { background-image: url(../images/common/s_others.png); }

#wrapper .contents #topics .item .box h3 {
	font-size: 1.143rem;
	font-weight: bold;
	margin: 30px 0 15px;
}
#wrapper .contents #topics .item .box .honbun {
	color: #646464;
}


/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:899px) {

	#wrapper #mainv {
		width: 100vw;
		height: 125vw;
		position: relative;
		overflow: hidden;
	}
	#wrapper #mainv .ban1 {
		width: 50vw;
		top: auto;
		bottom: 12vw;
		right: 3vw;
	}

/*
	#wrapper #mainv #logo20th {
		width: 36vw;
		position: absolute;
		top: 6vw;
		left: 4vw;
	}

	#wrapper #mainv #harmony {
		width: 73vw;
		height: auto;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	#wrapper #mainv #scroll {
		width: 16px;
		position: absolute;
		bottom: 6.5vw;
		left: 5vw;
	}
*/
	#wrapper #mainv .zoom-fade {
		height: 125vw;
	}
	#wrapper #mainv .item {
		height: 125vw;
	}
	#wrapper #mainv .item img {
		width: 100%;
		height: 125vw;
	}
	#wrapper #mainv .item p.text {
		top: auto;
		bottom: 0;
	}

	/* #wrapper #mainv #logo {
		width: 64vw;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#wrapper #mainv #logo20th {
		width: 36vw;
		position: absolute;
		top: 6vw;
		left: 4vw;
	}
	#wrapper #mainv #harmony {
		width: 73vw;
		height: auto;
		position: absolute;
		bottom: 2px;
		right: 0;
	}
	#wrapper #mainv #scroll {
		width: 16px;
		position: absolute;
		bottom: 6.5vw;
		left: 5vw;
	} */


	#wrapper #sec201 .sec1 {
		width: 90vw;
		margin: 0 auto;
		padding: 0 0 5vw;
	}
	#wrapper #sec201 .sec1 .logo {
		width: 28vw;
	}
	#wrapper #sec201 .sec1 .midashi {
		width: 57vw;
		font-size: 3.6vw;
		line-height: 1.5;
	}
	#wrapper #sec201 .sec2 {
		padding: 10vw 0;
	}

	#wrapper .contents {
		padding: 0;
	}

	#wrapper #bans {
		padding-top: 30px;
	}
	#wrapper #bans ul {
	}
	#wrapper #bans ul li {
		width: 25vw;
		margin: 0 2vw;
	}

	#wrapper .contents #topics {
	}
	#wrapper .contents #topics h2 {
		margin-bottom: 20px;
	}
	#wrapper .contents #topics .topicsInner {
		padding-bottom: 40px;
	}
	#wrapper .contents #topics .column3 {
		display: block;
	}
	#wrapper .contents #topics .column3 li {
		width: 100%;
	}

	#wrapper .contents #topics .item {
		position: static;
	}
	#wrapper .contents #topics .item .image img {
		width: 100%;
	}
	#wrapper .contents #topics .item.column1 .image {
		width: 100vw;
		overflow: hidden;
	}
	#wrapper .contents #topics .item.column1 .image img {
		width: 160vw;
		margin: 0 -30vw;
	}
	#wrapper .contents #topics .column1.item .box {
		width: 90vw;
		background: #FFF;
		position: relative;
		top: -60px;
		right: 5vw;
		left: 5vw;
		transform: none;
	}
	#wrapper .contents #topics .column3 .item .box {
		width: 90vw;
		background: #FFF;
/*		margin: -30px auto 25px;*/
		margin: 0 auto 25px;
		position: relative;
		z-index: 2;
	}
	#wrapper .contents #topics .item .box .inner {
		width: auto;
		padding: 10vw 10vw 20vw;
		position: relative;
	}
	#wrapper .contents #topics .item .box::after {
		content: " ";
		width: 50px;
		height: 8px;
		background: url(../images/common/s_arrow_common.png) no-repeat;
		background-size: 50px auto;
		position: absolute;
		bottom: 10vw;
		left: 10vw;
	}


	#wrapper .contents #topics .item .box .category {
	}
	#wrapper .contents #topics .item .box .category::after {
		content: " ";
		width: 38px;
		height: 38px;
		background-size: 100% auto;
		top: -10px;
		right: -10px;
	}

	#wrapper .contents #topics .item .box h3 {
		margin: 20px 0 15px;
	}
	#wrapper .contents #topics .item .box .honbun {
	}
	#wrapper .contents #topics .moreBtn {
		width: 90vw;
	}
}

/* ------------- 202201追加 -------- */
#wrapper #carousels {
	padding: 60px 0;
}
#wrapper #carousels2 {
	padding: 20px 0;
}
#wrapper #carousels .slick .slide,
#wrapper #carousels2 .slick .slide {
	margin: 0 15px;
}
#wrapper #carousels .slick .slide img,
#wrapper #carousels2 .slick .slide img {
	width: 320px;
}
#wrapper #carousels .slick a:hover img,
#wrapper #carousels2 .slick a:hover img {
	opacity: .7;
}
.slick-prev, .slick-next {
	top: 50%!important;
	transform: translateY(-50%);
}

@media screen and (max-width:899px) {
	#wrapper #carousels,
	#wrapper #carousels2 {
			padding: 6vw 10vw;
	}
	#wrapper #carousels .slick .slide,
	#wrapper #carousels2 .slick .slide {
		width: 100%;
		margin: 0;
	}
	#wrapper #carousels .slick .slide img,
	#wrapper #carousels2 .slick .slide img {
		max-width: initial;
		width: 80vw;
	}
	.slick-prev, .slick-next {
		width: 6vw!important;
		height: 6vw!important;
		background-size: 100% auto!important;
		opacity: .9;
	}
	.slick-prev {
		left: -8vw!important;
	}
	.slick-next {
		right: -8vw!important;
	}

}