@charset "UTF-8";
/* Top page */

/*--------------------------------------------------------------
# Main Image
--------------------------------------------------------------*/
.main-image{
	margin-top: 40px;
	margin-bottom: 50px;
	position: relative;
}
.main-image .main-message{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.main-image .img-fluid{
	display: block;
	border-radius: 50px;
	width: calc(100vw - 40px);
	height: 500px;
	object-fit: cover;
	margin-left: auto;
	margin-right: auto;
}
/*画像の位置調整*/
.main-image .img-fluid[src*="main-image-01.jpg"],
.main-image .img-fluid[src*="main-image-03.jpg"]{
	object-position: 45% 0;
}

@media (min-width: 768px) {
	.main-image .main-message{
		text-align: right;
		padding-right: 50px;
	}
	/*画像の位置調整*/
	.main-image .img-fluid[src*="main-image-01.jpg"],
	.main-image .img-fluid[src*="main-image-03.jpg"]{
		object-position: 0 0;
	}
}

@media (min-width: 992px) {
	.main-image .main-message{
		max-width: 840px;
		margin-left: auto;
		margin-right: auto;
	}
	.main-image-slider{
		width: 2670px;
		left: calc((100vw - 2670px) / 2);
	}
	.main-image .img-fluid{
		width: 840px;
		height: auto;
	}
}

.main-image .swiper-pagination{
	margin-top: 20px;
	position: relative;
}
.main-image .swiper-pagination .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	background-color: #FFF;
	opacity: 1;
	border: 1px solid #3B3B3B;
}
.main-image .swiper-pagination .swiper-pagination-bullet-active{
	background-color: #3B3B3B;
}

/*--------------------------------------------------------------
# Banner Area
--------------------------------------------------------------*/
.banner-area .container{
	width: 100%;
	max-width: 880px;
}
.banner-area .text-center{
	font-weight: 700;
}
.banner-area .main-logo{
	width: 132px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
.banner-area a{
	display: block;
	overflow:hidden;
	position: relative;
}
.banner-area a::after{
	content: "";
	width: 100%;
	height: 35%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(0, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}
.banner-area a img{
	width: 100%;
	height: auto;
}
.banner-area .row > div{
	position: relative;
	margin-bottom: 40px;
}
.banner-text{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	text-align: center;
	font-weight: 700;
	color: #FFF;
	z-index: 2;
}

@media (min-width: 992px) {
	.banner-area{
		margin-bottom: 50px;
	}
}

@media (min-width: 992px) {
	.banner-area a img{
		transition: 1.5s all;
	}
	.banner-area a:hover img{
		transform: scale(1.1, 1.1);
	}
}

/*--------------------------------------------------------------
# Event Area
--------------------------------------------------------------*/
.event-area{
	background: url("../images/top/event-bg.png") no-repeat top center;
	background-size: 220% auto;
	overflow: hidden;
	padding-bottom: 50px;
}

@media (min-width: 1200px) {
	.event-area{
		background-size: 1920px auto;
	}
}

.event-area .carousel{
	padding-top: 30px;
	margin-bottom: 80px;
}
.event-ttl{
	position: absolute;
	top: 0;
	z-index: 2;
}
.event-area .container .carousel:nth-of-type(odd) .event-ttl{
	right: 0;
}
.event-area .container .carousel:nth-of-type(even) .event-ttl{
	left: 0;
}
.event-ttl img{
	width: 85px;
	height: auto;
}
.event-area .carousel-inner{
	border-radius: 20px;	
}
.event-area .carousel-inner .carousel-item{
	transition-property: opacity;
	background-position: center top;
	aspect-ratio: 3 / 2;
}
.event-area .carousel-container{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
}
.event-area .carousel-container img{
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.event-area .carousel{
		padding-top: 60px;
	}
	.event-ttl img{
		width: 140px;
	}
	.event-area .carousel-inner .carousel-item{
		height: auto;
	}
}

@media (min-width: 992px) {
	.event-area .carousel{
		padding-top: 80px;
		margin-bottom: 30px;
	}
	.event-ttl img{
		width: 190px;
	}
	.event-area .carousel-inner{
		max-width: 740px;
	}
	.event-area .container .carousel:nth-of-type(odd) .carousel-inner{
		margin-left: auto;
		margin-right: 0;
	}
}

@media (min-width: 1200px) and (min-width: 1400px){
	.event{
		background-size: 100% auto;
		margin-bottom: 100px;
	}
	.event-area .container{
		max-width: 1040px;
	}
}

.event-area .carousel-inner .carousel-item,
.event-area .carousel-inner .active.carousel-item-start,
.event-area .carousel-inner .active.carousel-item-end{
	opacity: 0;
}
.event-area .carousel-inner .active,
.event-area .carousel-inner .carousel-item-next.carousel-item-start,
.event-area .carousel-inner .carousel-item-prev.carousel-item-end{
	opacity: 1;
	transition: 1.5s;
}
.event-area .carousel-indicators button{
	list-style-type: none;
	cursor: pointer;
	border: 1px solid #3B3B3B;
	overflow: hidden;
	width: 12px;
	height: 12px;
	border-radius: 12px;
}
.event-area .carousel-indicators button.active{
	background-color: #3B3B3B;
}
.event-area .carousel-indicators [data-bs-target]{
	margin-left: 15px;
	margin-right: 15px;
}
.event-btn{
	position: absolute;
	bottom: -65px;
	width: 100%;
	z-index: 2;
}
.event-btn a{
	background-color: rgba(255,255,255,.8);
	transition: .5s all;
}

@media (min-width: 992px) {
	.event-area .carousel-indicators{
		max-width: 740px;
	}
	.event-area .container .carousel:nth-of-type(odd) .carousel-indicators{
		margin-left: auto;
		margin-right: 0
	}
	.event-area .container .carousel:nth-of-type(even) .carousel-indicators{
		margin-left: 0;
		margin-right: auto;
	}
	.event-area .carousel-indicators button{
		margin-bottom: 25px;
	}
	.event-area .event-btn{
		max-width: 840px;
		bottom: 50px;
	}
	.event-area .container .carousel:nth-of-type(odd) .event-btn{
		right: 0;
	}
	.event-area .container .carousel:nth-of-type(odd) .event-btn a{
		margin-left: 0;
	}
	.event-area .container .carousel:nth-of-type(even) .event-btn a{
		margin-right: 0;
	}
	.event-btn a:hover{
		background-color: rgba(255,255,255,1);
	}
}

.event-area .carousel-inner.fadeIn{
	position: relative;
	top: 30px;
	opacity: 0;
}
.event-area .carousel-inner.is-scrollIn{
	animation: carousel-fadeIn 1.5s forwards;
}

@keyframes carousel-fadeIn{
	from{
		top: 30px;
		opacity: 0;
	}
	to{
		top: 0;
		opacity: 1;
	}
}

.event-area .carousel-inner.fadeIn .carousel-item:first-child img{
	transform: scale(1.1, 1.1);
}
.event-area .carousel-inner.is-scrollIn .carousel-item:first-child img{
	animation: carousel-img-fadeIn 3s forwards;
}

@keyframes carousel-img-fadeIn{
	from{
		transform: scale(1.1, 1.1);
	}
	to{
		transform: scale(1, 1);
	}
}


/*--------------------------------------------------------------
# Recommend Area
--------------------------------------------------------------*/
.recommend-area{
	background: #E6C6BF;
	overflow: hidden;
}
.recommend-area .ttl-outer.d-flex{
	justify-content: space-between;
}
.scroll-mark{
	margin-top: 50px;
	margin-bottom: 30px;
	font-size: 12px;
	border: #3B3B3B 1px solid;
	border-radius: 20px;
	padding: 2px 20px 4px;
}
.arrow-left{
	position: relative;
	display: inline-block;
	width: 20px;
	height: 1px;
	background-color: #3B3B3B;
	margin: 0 8px 2px 0;
}
.arrow-left::before{
	content: "";
	position: absolute;
	top: calc(50% - 0.5px);
	left: 0;
	width: 5px;
	height: 1px;
	background-color: #3B3B3B;
	transform: rotate(-45deg);
	transform-origin: .5px 50%;
}
h2.plan-ttl{
	margin-top: 50px;
	margin-bottom: 20px;
}
h3.plan-ttl{
	margin-bottom: 20px;	
}
.plan-ttl--line{
	padding-left: 30px;
	position: relative;
}
.plan-ttl--line::before{
	content: "";
	width: 25px;
	height: 1px;
	background: #3B3B3B;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.plan-item{
	margin-bottom: 50px;
}
.plan-list-image{
	display: block;
	overflow: hidden;	
}
.plan-list-image img{
	width: 100%;
	height: auto;
}
.plan-list-body{
	position: relative;
	background: #fff;
	padding: 20px;
	margin: -20px -20px 0 20px;
    box-shadow: 0 15px 20px -15px rgba(0, 0, 0,.5);
}
.plan-list-ttl{
	font-size: 16px;
	font-weight: 700;	
}
.plan-list-text{
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.plan-list-body{
		padding: 25px;
	}
}

@media (min-width: 992px) {
	.plan-list-text{
		min-height: 6em;
		/*display: -webkit-box;（以下…を出す場合の設定）
		-webkit-line-clamp: 4; 行数を4行に制限
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: justify;*/
	}
}

@media (min-width: 992px) {
	.plan-list-image img{
		transition: 1.5s all;
	}
	.plan-list-image img:hover{
		transform: scale(1.1, 1.1);
	}
}

@media (min-width: 1200px) {
	.recommend-area{
		padding: 20px 0;
	}
	.recommend-area .ttl-outer.d-flex{
		justify-content: center;
	}
	.scroll-mark{
		display: none;
	}
	.plan-container{
		max-width: 1040px;
		margin-left: auto;
		margin-right: auto;
	}
	.plan-slider{
		padding-right: 40px;
	}
}

.swiper-nav-wrap{
	visibility: hidden;
}

@media (min-width: 1200px) {
	.swiper-nav-wrap{
		/*visibility: visible; コンテンツが増えるまで非表示*/
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
		bottom: 70%;
	}
	.swiper-button-prev,
	.swiper-button-next{
		width: 36px;
		height: 36px;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: rgba(255,255,255,.8);
		border-radius: 50%;
		color: #3B3B3B;
	}
	.swiper-button-next{
		right: 50px;
	}
	.swiper-button-prev::after,
	.swiper-button-next::after{
		font-size: 12px;
	}
}

.home-kagayuzen-area{
	margin-top: 50px;
	margin-bottom: 50px;
}
.home-kagayuzen-image{
	padding: 0;
}
.home-kagayuzen-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-kagayuzen-dtl{
	background: #fff;
	overflow: hidden;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}
.home-kagayuzen-dtl-inner{
	padding: 0 20px;
}
.home-kagayuzen-dtl h2{
	margin-top: 20px;
	margin-bottom: 30px;
}
.home-kagayuzen-dtl-text{
	text-align: left;
	max-width: 375px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 20px;
}
.home-kagayuzen-dtl .tag-list{
	display: block;
}

@media (min-width: 768px) {
	.home-kagayuzen-dtl-text{
		text-align: center;
	}
	.home-kagayuzen-dtl .tag-list{
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 992px) {
	.home-kagayuzen-image img{
		max-height: 475px;
	}
	.home-kagayuzen-dtl-inner{
		max-width: 640px;
		margin-right: auto;
	}
}

/*--------------------------------------------------------------
# Promise Area
--------------------------------------------------------------*/
.cloud-bg{
	background: #E7EBE2 url("../images/top/cloud-bg.png") no-repeat top center;
	background-size: 220% auto;
	overflow: hidden;
}

@media (min-width: 1200px) {
	.cloud-bg{
		background-size: 1920px auto;
	}
}

.promise-area{
	padding-top: 50px;
}
.promise-area h2{
	margin-top: 20px;
	margin-bottom: 50px;
	text-align: center;
}
.promise-dtl{
	text-align: center;
	margin-bottom: 50px;
}
.promise-text{
	white-space: nowrap;
	line-height: 40px;
}
.promise-images{
	padding: 0 20px;
}
.promise-images-inner{
	position: relative;
	height: calc(100vw * 1.35);
}
.promise-images img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: #FFF 6px solid;
	box-shadow: 0 0 10px -5px rgba(0, 0, 0, .5);
}
.promise-image-01,
.promise-image-02,
.promise-image-03{
	position: absolute;
	width: 60vw;
	aspect-ratio: 3 / 2;
}
.promise-image-01{
	top: 0;
	right: 20px;
}
.promise-image-02{
	top: calc(100vw * .325);
	left: 0;
}
.promise-image-03{
	top: calc(100vw * .75);
	right: 0;
}
.promise-image-04{
	margin-bottom: 30px;
}
.promise-message{
	width: 100%;
	background: #FAE9EA;
	padding: 40px 20px;
	box-shadow: 0 0 10px -5px rgba(0, 0, 0, .5);
}
.promise-message p{
	line-height: 40px;
	text-align: center;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.promise-image-04{
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
	.promise-message{
		max-width: 388px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 992px) {
	.promise-images-inner{
		height: auto;
	}
	.promise-images{
		padding: 0;
	}
	.promise-image-01,
	.promise-image-02,
	.promise-image-03{
		max-width: 310px;
	}
	.promise-image-02{
		top: 175px;
	}
	.promise-image-03{
		top: 400px;
	}
	.promise-image-04{
		margin-left: 0;
		margin-bottom: 0;
	}
	.promise-message-inner{
		position: relative;
	}
	.promise-message-position{
		position: absolute;
		top: 50px;
		right: 0;
	}
}

@media (min-width: 1200px) and  (min-width: 1400px){
	.promise-area.container{
		max-width: 1040px;
	}
}

/*--------------------------------------------------------------
# Voc Area
--------------------------------------------------------------*/
.home-voc-area{
	padding-top: 50px;
	padding-bottom: 50px;
}
.home-voc-area h2{
	margin-top: 20px;
	margin-bottom: 50px;
	text-align: center;
}

.home-voc-area .more-btn a{
	width: 280px;
}

@media (min-width: 768px) {
	.home-voc-area h2{
		margin-top: 50px;
	}
}

@media (min-width: 1200px) and (min-width: 1400px){
	.home-voc-area.container{
		max-width: 1040px;
	}
}