@charset "UTF-8";

a{text-decoration: none;}
#top{margin-top:10px;}

.slider{
	width:100%;
}
.slider .slick-list{
	overflow:hidden;
}
.slider .slider-item{
	width:1100px;
	padding:30px 15px;
	box-sizing:border-box;
}
.slider .slider-item img{
	width:100%;
	height:auto;
	display:block;
}

/*******************************************************
	ranking
********************************************************/

.rank{
	background:#f6eee6;
	padding: 90px 0 80px;
	position: relative;
}

.rank-inner{
	width: min(1100px,90%);
	margin:0 auto;
}

.rank-box{
	position:relative;
	border-radius:18px;
	padding: 145px 0px 0px;
	overflow:hidden;
}

.rank-scroll-bg{
	top: 9px;
	left:0;
	right: 0;
	margin: auto;
	width: 1280px;
	height: 294px;
	background:url("/index/images/rank-scroll-bg.png") center calc(100% - 0px) / cover no-repeat;
	z-index:0;
	position: absolute;
}

.rank-hd{
	position:relative;
	z-index:2;
	margin-bottom:28px;
}

.rank-ttl{
	display:flex;
	align-items:center;
	gap: 10px;
	font-size:26px;
	font-weight:800;
	margin: 0 auto;
	color: #fff;
	position: relative;
	top: 105px;
	width: 1100px;
}
.rank-ttl-txt{margin-left:66px;}

#rank .rank-mark{
	width: 60px;
	height: 30px;
	background:url("/index/images/mark-white.png") center/contain no-repeat;
	display:inline-block;
	position: absolute;
}

.rank-bg{
	position:absolute;
	top:18px;
	right:30px;
	font-size:86px;
	font-weight:900;
	letter-spacing:.08em;
	color:#f3d8c2;
	margin:0;
	line-height:1;
	pointer-events:none;
	z-index:1;
}

.rank-grid{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:26px;
	padding: 0 0 5px;
}

.rank-card{
	background:#fff;
	border-radius:12px;
	padding:45px 30px 40px;
	display:grid;
	justify-items:center;
	gap:10px;
	position:relative;
	box-shadow: 0 8px 24px rgba(255, 78, 0, 0.18);
}

.rank-crown{
	position:absolute;
	top: 25px;
	left:50%;
	transform:translateX(-50%);
	width: 100%;
	height: 40px;
	background:center/contain no-repeat;
}

.rank-card.is-1 .rank-crown{
	background-image:url("/index/images/crown_2.jpg");
}

.rank-card.is-2 .rank-crown{
	background-image:url("/index/images/crown_1.jpg");
}

.rank-card.is-3 .rank-crown{
	background-image:url("/index/images/crown_3.jpg");
}

.rank-img{
	width:100%;
	display:flex;
	justify-content:center;
	margin-top: 30px;
}

.rank-img img{
	width:220px;
	height:auto;
	display:block;
}

.rank-name{
	font-size:18px;
	font-weight:700;
	margin:0;
	text-align:center;
}

.atama{
	color:#E60016;
	border:2px solid #E60016;
	border-radius:20px;
	padding: 3px 10px;
	margin-right: 10px;
	font-size: 13px;
}
.atama span{
	font-size:20px;
	margin:0 3px;
	position: relative;
	top: 2px;
	font-family: "Roboto", sans-serif;
}

.rank-price{
	margin:0;
	font-size: 16px;
	text-align:center;
	font-weight: 700;
}

.rank-yen{
	font-size: 28px;
	font-weight:900;
	color:#e60012;
	padding:0 2px;
	font-family: "Roboto", sans-serif;
}

.rank-tax{font-weight: normal;font-size: 12px;}

.rank-note{
	margin:0;
	text-align:center;
	background: #F0F0F0;
	padding: 2px 18px;
	border-radius: 20px;
}

.rank-btn{
	width:210px;
	text-decoration:none;
	margin-top:6px;
	display:inline-flex;
	justify-content:center;
}

.rank-btn-in{
	width:100%;
	padding:12px 0;
	background:#e60012;
	color:#fff;
	border:2px solid #e60012;
	border-radius:999px;
	font-size:13px;
	font-weight:800;
	letter-spacing:.05em;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	transition:background .2s,color .2s;
}

.rank-btn-ic{
	width:22px;
	height:22px;
	background:#fff;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:background .2s,color .2s;
	color: #e60012;
}

.rank-btn-ic img{
	width:12px;
	height:auto;
	display:block;
}

.rank-btn:hover .rank-btn-in{
	background:#fff;
	color:#e60012;
}

.rank-btn:hover .rank-btn-ic{
	background:#e60012;
	color:#fff;
}

.rank-btn:hover .rank-btn-ic img{
	filter:brightness(0) invert(1);
}

#rank .scroll-infinity{
	top: 50px;
	z-index:1;
	position: absolute;
	width: 1280px;
	right: 0;
	left: 0;
	margin: 0 auto;
	margin: auto;
}

#rank .scroll-infinity__list{
	animation:infinity-scroll-left 40s linear infinite;
}

#rank .scroll-infinity__item{
	color:#fcdab864;
	/* padding-right:clamp(24px,7vw,350px); */
}



/*******************************************************
	reason
********************************************************/

.reason{
	position:relative;
	padding: clamp(80px,12vw,100px) 0;
}

.reason-bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url("/index/images/reason-bg.jpg") center calc(100% - 0px) / cover no-repeat;
	z-index:0;
}

.reason-inner{
	position:relative;
	z-index:1;
	width:min(1260px,90%);
	margin:0 auto;
}

.reason-box{
	background:#fff;
	border-radius:24px;
	position:relative;
	/* overflow:hidden; */
	width: 1260px;
}

.reason-head{
	position:relative;
	z-index:2;
	margin-bottom:26px;
	padding: 90px 0 0;
}

.reason-ttl{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:clamp(22px,3vw,30px);
	font-weight:800;
	margin:0;
	justify-content:center;
}

#reason .reason-mark{
	width: clamp(22px,4vw,60px);
	height:30px;
	background:url("/index/images/mark.png") center/contain no-repeat;
	display:inline-block;
	flex:0 0 auto;
}

#reason .scroll-infinity{
	top: 41px;
	z-index:1;
}

#reason .scroll-infinity__list{
	animation:infinity-scroll-left 40s linear infinite;
}

#reason .scroll-infinity__item{
	color:#FFE8D1;
}

.reason-content{
	position:relative;
	z-index:2;
	display:grid;
	gap: clamp(44px,7vw,90px);
	padding: 80px 90px 110px;
}

.reason-row{
	display:grid;
	grid-template-columns:400px 1fr;
	gap:60px;
	align-items:center;
	text-decoration:none;
	color:inherit;
	position:relative;
}

#reason-mask1{
	position: absolute;
    width: 266px !important;
    top: 70px;
    left: -90px;
}
#reason-mask2{
	position: absolute;
	width: 266px !important;
	top: 70px;
	right: 270px;
}
#reason-mask3{
	position: absolute;
	width: 266px !important;
	top: 90px;
	right: -90px;
}

.reason-row.reverse{
	direction:rtl;
}

.reason-row.reverse > *{
	direction:ltr;
}

.reason-photo{
	border-radius:18px;
	overflow:hidden;
	width: 400px;
}

.reason-photo img{
	width:100%;
	height:auto;
	display:block;
}

.reason-body{
	/* max-width: 550px; */
	position: relative;
}

.reason-title{
	font-size: 22px;
	font-weight:800;
	margin:0 0 16px;
	line-height:1.5;
	color: #151515;
}

.reason-text{
	margin:0 0 24px;
	line-height:1.8;
	color: #151515;
	font-size: 16px;
}

.reason-btn{
	display:inline-flex;
}

.reason-btn-in{
	width:220px;
	padding:12px 0;
	background:#e60012;
	color:#fff;
	border:2px solid #e60012;
	border-radius:999px;
	font-size:14px;
	font-weight:800;
	letter-spacing:.05em;
	text-decoration:none;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	transition:background .2s,color .2s;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.reason-btn-ic{
	width:22px;
	height:22px;
	background:#fff;
	color:#e60012;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:14px;
	font-weight:800;
	transition:background .2s,color .2s;
}

.reason-btn:hover .reason-btn-in{
	background:#fff;
	color:#e60012;
}

.reason-btn:hover .reason-btn-ic{
	background:#e60012;
	color:#fff;
}

.relative{position:relative;}

/*******************************************************
        lease
********************************************************/

.flat7{
	padding: 130px 0 50px;
	width: 1160px;
	margin: auto;
}

.flat7-inner{
	/* width: 1100px; */
	margin:0 auto;
}

.flat7-box{
	position:relative;
	/* overflow:hidden; */
}

.flat7-head{
	position:relative;
	z-index:2;
	margin-bottom:26px;
}

.flat7-ttl{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:30px;
	font-weight:800;
	margin:0;
	justify-content: center;
}

#flat7 .flat7-mark{
	width: 60px;
	height:30px;
	background:url("/index/images/mark.png") center/contain no-repeat;
	display:inline-block;
}

#flat7 .scroll-infinity{
	top: -54px;
	z-index:1;
}

#flat7 .scroll-infinity__list{
	animation:infinity-scroll-left 40s linear infinite;
}

#flat7 .scroll-infinity__item{
	color:#FFE8D1;
	/* padding-right:clamp(24px,7vw,350px); */
}

#flat7 img{
	display:block;
	width: 100%;
	/* max-width: 1100px; */
	height:auto;
	margin: 70px auto 0;
	border-radius:18px;
}

.flat7-cta{
	margin-top: 50px;
	display:flex;
	justify-content:center;
	position:relative;
	z-index:2;
}

.flat7-btn{
	width:260px;
	padding:14px 0;
	background:#e60012;
	color:#fff;
	border:2px solid #e60012;
	border-radius:999px;
	font-size:16px;
	font-weight:800;
	letter-spacing:.05em;
	text-decoration:none;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:background .2s,color .2s;
}

.flat7-btn-in{
	display:flex;
	align-items:center;
	gap:12px;
}

.flat7-btn-ic{
	width:26px;
	height:26px;
	background:#fff;
	color:#e60012;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:16px;
	font-weight:800;
	transition:background .2s,color .2s;
}

.flat7-btn:hover{
	background:#fff;
	color:#e60012;
}

.flat7-btn:hover .flat7-btn-ic{
	background:#e60012;
	color:#fff;
}


/*******************************************************
        news
********************************************************/
#news{
	position:relative;
}

#news .top-bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 230px;
	overflow:hidden;
	z-index:0;
}

#news .top-bg img{
	width: 100%;
	height: 100;
	object-fit:contain;
	object-position: 50% 100%;
	display:block;
}

.news{
	background: #fff;
	padding: 20px 0;
}

.news-inner{
	width: min(1240px,90%);
	margin:0 auto;
}

.news-box{
	padding: 71px 38px 60px;
	position:relative;
	overflow:hidden;
}

.news-head{
	position:relative;
	z-index: 2;
	margin-bottom:26px;
}

.news-ttl{
	display:flex;
	align-items:center;
	gap:10px;
	font-size: 30px;
	font-weight:800;
	margin:0;
}

#news .news-mark{
	width: 60px;
	height: 30px;
	background:url("/index/images/mark.png") center/contain no-repeat;
	display:inline-block;
}

.news-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap: 50px 44px;
	position:relative;
	z-index:1;
	padding: 60px 0 50px;
}

.news-item{
	display:flex;
	gap:18px;
	align-items:flex-start;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.news-img{
	width:190px;
	flex:0 0 190px;
	border-radius:10px;
	overflow:hidden;
	display:block;
	overflow: hidden;
	/*padding:10px;*/
}

.news-img img{
	width:100%;
	height: 150px;
	object-fit:cover;
	display:block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}

.news-item:hover .news-img img{
	transform: scale(1.1);
}

.news-body{
	min-width:0;
	padding-top:6px;
}

.news-tag{
	display:inline-block;
	font-size:12px;
	font-weight:800;
	color:#e60012;
	border:1px solid #e60012;
	border-radius:999px;
	padding: 3px 14px;
	margin:0 0 10px;
	font-weight: 400;
}

.news-text{
	line-height:1.8;
	margin:0;
	font-size: 16px;
	font-weight: bold;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.news-date{
	font-size: 17px;
	text-align:right;
	margin:10px 0 0;
	font-family: "Roboto", sans-serif;
}

.news-cta{
	margin-top: 24px;
	display:flex;
	justify-content:center;
	position:relative;
	z-index:1;
}

.news-btn{
	width:260px;
	padding:14px 0;
	background:#e60012;
	color:#fff;
	border:2px solid #e60012;
	border-radius:999px;
	font-size:16px;
	font-weight:800;
	letter-spacing:.05em;
	text-decoration:none;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:background .2s,color .2s;
}

.news-btn-in{
	display:flex;
	align-items:center;
	gap:12px;
}

.news-btn-ic{
	width:26px;
	height:26px;
	background:#fff;
	color:#e60012;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:16px;
	font-weight:800;
	transition:background .2s,color .2s;
}

.news-btn:hover{
	background:#fff;
	color:#e60012;
}

.news-btn:hover .news-btn-ic{
	background:#e60012;
	color:#fff;
}

#news .scroll-infinity__list{animation:infinity-scroll-left 40s linear infinite;}
#news .scroll-infinity {top: 26px;}
#news .scroll-infinity__item {padding-right: clamp(24px, 2vw, 350px);}



/*******************************************************
        ceremony
********************************************************/

#ceremony{
	position:relative;
	padding: 100px 20px 100px;
	background-image: url("/index/images/ceremony-bg.jpg");
	overflow:hidden;
	background-position: 100% 60%;
	background-color: #FFFDF4;
	background-repeat: no-repeat;
}

#ceremony::before{
	content:"";
	position:absolute;
	inset:0;
}

#ceremony .ceremony-inner{
	max-width:1100px;
	margin:0 auto;
	position:relative;
}

#ceremony .ceremony-head{
	margin-bottom:18px;
	position:relative;
	z-index:2;
	padding-bottom:60px;
	max-width: 1100px;
	margin-inline: auto;
}

#ceremony .ceremony-tag{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0;
	font-size: 30px;
	font-weight:800;
}

#ceremony .ceremony-mark{
	width: 60px;
	height: 30px;
	background:url("/index/images/mark.png") center/contain no-repeat;
	display:inline-block;
}

#ceremony .ceremony-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
	position:relative;
	z-index:2;
	max-width: 1100px;
	margin-inline: auto;
}

#ceremony .ceremony-card{
	background:#fff;
	border-radius:10px;
	overflow:hidden;
	box-shadow: 0 8px 24px rgba(255, 78, 0, 0.18);
}

.ceremony-photo{
	overflow: hidden;
}
.ceremony-photo img{
	width:100%;
	height: auto;
	transition: transform 0.4s ease;
}
.ceremony-card:hover .ceremony-photo img {
	transform: scale(1.1);
}

#ceremony .ceremony-body{
	padding:12px 14px 14px;
}

#ceremony .ceremony-name{
	margin:0 0 8px;
	font-weight:800;
	line-height:1.45;
}

#ceremony .ceremony-text{
	margin:0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

#ceremony .ceremony-cta{
	margin-top: 60px;
	display:flex;
	justify-content:center;
	position:relative;
	z-index:2;
}

#ceremony .btn{
	width: 200px;
	padding:14px 0;
	background:#fff;
	color:#e60012;
	border:2px solid #e60012;
	border-radius:999px;
	font-size:16px;
	font-weight:800;
	letter-spacing:.05em;
	text-decoration:none;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:background .2s,color .2s;
}

#ceremony .btn-inner{
	display:flex;
	align-items:center;
	gap:12px;
}

#ceremony .btn-icon{
	width:26px;
	height:26px;
	background:#e60012;
	color:#fff;
	border-radius:50%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:16px;
	font-weight:800;
	transition:background .2s,color .2s;
}

#ceremony .btn:hover{
	background:#e60012;
	color:#fff;
}

#ceremony .btn:hover .btn-icon{
	background:#fff;
	color:#e60012;
}

#ceremony .scroll-infinity__list{animation:infinity-scroll-left 40s linear infinite;}
#ceremony .scroll-infinity {top:-50px;}
#ceremony .scroll-infinity__item {/* padding-right: clamp(24px, 7vw, 350px); */}

.line-banner{
	width: 800px;
    margin: 80px auto;
}
.line-banner img{
	width:100%;
}



/* =====================
   responsive 
===================== */
@media screen and (max-width:768px){

	/* slider */
	.slick-list {overflow: hidden;}
	.slick-slide-item {width: 100%;}
	.slider .slider-item {padding:0;}
	.slider .slider-item img{padding:0;}

	.rank{padding: 70px 0 35px;}
	.rank-box{padding: 70px 0 10px;}
	.rank-scroll-bg{width:100%;height:240px;}
	.rank-ttl{width:100%;top: 54px;font-size:22px;padding:0 16px;box-sizing:border-box;}
	.rank-ttl-txt{margin-left: 45px;}
	#rank .rank-mark{left: 16px;}
	.rank-bg{font-size:58px;right:16px;top:14px;}
	.rank-grid{grid-template-columns:1fr;gap:18px;padding:0 16px;box-sizing:border-box;}
	.rank-card{padding: 42px 10px 34px;}
	#rank .scroll-infinity{width:100%;top:42px;}
	.rank-ttl {font-size: 22px;}
	#rank .rank-mark {width:36px;}
	.rank-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:20px;padding:0 16px 20px;}
	.rank-card{flex: 0 0 91%;scroll-snap-align:center;}
	.rank-sp-bar{position:relative;height:4px;background:#d9d9d9;margin:0 16px 40px;border-radius:2px;overflow:hidden;}
	.rank-sp-progress{position:absolute;top:0;left:0;height:100%;width:33.333%;background:#e60012;border-radius:2px;transition:transform .3s ease;}
	.rank-card{order:10;}
	.rank-card.is-1{order:2;}
	.rank-card.is-2{order:1;}
	.rank-card.is-3{ order:3;}
	.atama {font-size: 10px;margin-right: 3px;padding: 3px 5px;}
	.reason-text {margin:0;font-size: 14px;}
	.reason-btn {width:100%;}


	.reason-inner{width:min(1100px,90%);}
	.reason-box{width:100%;}
	.reason-content{padding: 0px 18px 25px;gap: 10px;}
	.reason-row{grid-template-columns:1fr;gap:18px;}
	.reason-photo{width:100%;}
	.reason-ttl{padding:0 16px;box-sizing:border-box;}
	.reason-body{position:relative;}
	.reason-btn-in {position: relative;left:0;right:0;margin: 20px auto 5px;bottom: 0;}
	.reason-row {margin-top:20px;}
	.reason-ttl {font-size: 24px;justify-content: center;}
	#reason .reason-mark {width:36px;}
	.reason-head {top: 0;margin-bottom: 0;padding: 37px 0 0;}
	.reason-title {font-size: 18px;}
	.reason-bg{}
	#reason-mask1 {width: 70%!important;top: 10px;left: 70%;}
	#reason-mask2 {top: -130px;right: 45%;}

	#reason .scroll-infinity {top: 25px;}

	.flat7{padding: 90px 0 50px; width:100%;}
	.flat7-ttl{font-size:24px;padding:0 16px;box-sizing:border-box;}
	#flat7 img{margin-top: 0;border-radius:14px;padding: 0 5%;box-sizing:border-box;}
	.flat7-cta{margin-top:34px;}
	.flat7-ttl {font-size: 24px;justify-content: left;}
	#flat7 .flat7-mark {width:36px;}
	.flat7-head {top: -43px;margin-bottom: 0;}

	.news{padding: 8px 0 70px;}
	.news-box{padding: 28px 0% 0;}
	.news-grid{grid-template-columns:1fr;gap:18px;padding:40px 0 34px;}
	.news-img{width: 90px;flex: 0 0 90px;}
	.news-img img{height: 60px;}
	.news-ttl {font-size: 23px;}
	#news .news-mark {width:40px;}
	.news-head {top: 10px;}
	.news-item {border-bottom: 2px solid #D3D3D3;padding-bottom: 15px;margin-bottom: 10px;}
	.news-text {font-weight:normal;}
	

	#ceremony{padding: 60px 5% 70px;}
	#ceremony .ceremony-head{padding-bottom:0px;}
	#ceremony .ceremony-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
	.ceremony-ttl {justify-content: left;}
	#ceremony .ceremony-tag {font-size: 24px;justify-content: center;}
	#ceremony .ceremony-mark {width:36px;}
	.ceremony-head {top: -38px;margin-bottom: 0;}
	#ceremony .ceremony-name {text-align:center;}



	.cta{align-items:center;padding: 0;box-sizing:border-box;margin: 24px 0 14px;}
	.cta-btn{flex:1;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size: 16px;letter-spacing:.02em;text-decoration:none;box-sizing:border-box;width: 48%;float: left;height: 50px;}
	.cta-btn.is-web{background:#e60012;color:#fff;border:2px solid #e60012;font-size: 14px;}
	.cta-btn.is-tel{background:#fff;color:#e60012;border:2px solid #e60012;font-family: "Roboto", sans-serif;margin-left: 4%;}
	.cta-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex: 0;}
	.cta-ic img{width:18px;display:block;}
	.o1{order:2;}
	.o2{order:1;}

	.line-banner{width:90%; margin:40px auto;}

}
