@charset "UTF-8";

.main-area-top {
	position: relative;
	margin-bottom: 8rem
}

@media only screen and (max-width:768px) {
	.main-area-top {
		margin-bottom: 4.8rem
	}
}

.main-area-top .slider-block {
	position: relative;
	padding-bottom: 3em
}

.main-area-top .slider-block .main_copy {
	position: absolute;
	top: 20%;
	left: 5%;
	max-width: 498px;
	z-index: 2
}

@media only screen and (max-width:768px) {
	.main-area-top .slider-block .main_copy {
		top: 10%;
		max-width: 250px
	}
}

.main-area-top .slider-block .swiper-slide {
	aspect-ratio: 16/8 !important;
	object-fit: contain !important
}

.main-area-top .slider-block .swiper-operation {
	position: absolute;
	right: 5%;
	bottom: 0;
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap
}

.main-area-top .slider-block .swiper-operation .swiper-pagination {
	position: relative;
	width: auto;
	text-align: center;
	bottom: 1.5rem
}

.main-area-top .slider-block .swiper-operation .stopbtn-block {
	position: relative;
	width: 4rem
}

.main-area-top .slider-block .swiper-operation .stopbtn-block p .stopbtn {
	bottom: -3.5em
}

.main-area-top .slider-block .swiper-operation .stopbtn-block p .stopbtn02 {
	overflow: hidden;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%)
}

.main-area-top .link-block {
	position: absolute;
	bottom: 0;
	left: 2em;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem
}

@media only screen and (max-width:1100px) {
	.main-area-top .link-block {
		justify-content: center;
		position: relative;
		text-align: center;
		width: 90%;
		left: auto;
		margin: 0 auto
	}
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-instagram {
		width: 100%
	}
}

.main-area-top .link-block .link-instagram a {
	color: #000;
	text-align: left;
	display: inline-block;
	background: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 24px;
	padding: 1.6em 2em 1.6em 110px;
	position: relative;
	transition: 0.3s all
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-instagram a {
		padding: 1em 1em 1em 70px
	}
}

.main-area-top .link-block .link-instagram a:before {
	content: "";
	display: inline-block;
	width: 70px;
	height: 70px;
	position: absolute;
	top: 50%;
	left: 1.5em;
	transform: translateY(-50%);
	background: url(../fonts/ico_instagram.svg) no-repeat center center/cover
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-instagram a:before {
		width: 35px;
		height: 35px
	}
}

.main-area-top .link-block .link-instagram a p {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-instagram a p {
		font-size: 1.6rem
	}
}

.main-area-top .link-block .link-instagram a p.account {
	color: #D20065;
	font-weight: normal
}

.main-area-top .link-block .link-instagram a:hover {
	color: #000;
	transform: translateY(-10px)
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-pv {
		width: 100%
	}
}

.main-area-top .link-block .link-pv a {
	color: #000;
	text-align: left;
	display: block;
	background: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 24px;
	padding: 2.2em 2em 2.2em 110px;
	position: relative;
	transition: 0.3s all
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-pv a {
		padding: 1.5em 1em 1.5em 80px;
		max-width: 328px;
		margin: 0 auto
	}
}

.main-area-top .link-block .link-pv a:before {
	content: "";
	display: inline-block;
	width: 60px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 1.5em;
	transform: translateY(-50%);
	background: url(../fonts/ico_pv.svg) no-repeat center center/cover
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-pv a:before {
		width: 42px;
		height: 35px
	}
}

.main-area-top .link-block .link-pv a p {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-pv a p {
		font-size: 1.6rem
	}
}

@media only screen and (max-width:768px) {
	.main-area-top .link-block .link-pv a p br {
		display: none
	}
}

.main-area-top .link-block .link-pv a:hover {
	color: #000;
	transform: translateY(-10px)
}

.about-area-top {
	padding: 0 0 5em;
	margin-bottom: 8rem;
	position: relative
}

@media only screen and (max-width:768px) {
	.about-area-top {
		padding: 0 0 2em
	}
}

/* .about-area-top:after {
	content: "";
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	right: 0;
	aspect-ratio: 1533/168;
	background: url(../images/bg_about.png) no-repeat center center/cover;
	z-index: -1
} */

.about-area-top .inner-l {
	position: relative
}

.about-area-top .inner-l>div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 5em
}

@media screen and (max-width:1080px) {
	.about-area-top .inner-l>div {
		max-width: 520px;
		margin: 0 auto;
		gap: 1em
	}
}

.about-area-top .inner-l>div .ph-part {
	width: calc(60% - 5em);
	text-align: center;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0 4em
}

@media screen and (max-width:1080px) {
	.about-area-top .inner-l>div .ph-part {
		width: 100%;
		gap: 0 1em
	}
}

.about-area-top .inner-l>div .ph-part .ttl-about {
	width: 30%
}

@media screen and (max-width:1080px) {
	.about-area-top .inner-l>div .ph-part .ttl-about {
		max-height: 480px
	}
}

.about-area-top .inner-l>div .ph-part .ttl-about h2 {
	position: relative;
	writing-mode: vertical-rl;
	display: block;
	text-indent: -300%;
	overflow: hidden;
	min-width: 120px;
	min-height: 740px
}

@media screen and (max-width:1080px) {
	.about-area-top .inner-l>div .ph-part .ttl-about h2 {
		width: 100%;
		height: auto
	}
}

.about-area-top .inner-l>div .ph-part .ttl-about h2:after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, 0);
	aspect-ratio: 239/1482;
	background: url(../images/ttl_about.png) no-repeat center center/contain
}

@media screen and (max-width:1080px) {
	.about-area-top .inner-l>div .ph-part .ttl-about h2:after {
		top: 0;
		transform: translate(-50%, 0);
		height: 60%
	}
}

.about-area-top .inner-l>div .ph-part>img {
	width: 70%
}

.about-area-top .inner-l>div .txt-part {
	width: 38%;
	text-align: center
}

@media screen and (max-width:1080px) {
	.about-area-top .inner-l>div .txt-part {
		width: 100%;
		margin-left: 0
	}
}

.about-area-top .inner-l>div .txt-part p {
	text-align: left;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.8;
	margin-bottom: 3.2rem
}

@media only screen and (max-width:768px) {
	.about-area-top .inner-l>div .txt-part p {
		font-size: 1.6rem
	}
}

.about-area-top .inner-l>div .txt-part p strong {
	font-weight: bolder;
	display: block;
	text-indent: -1em
}

.about-area-top .inner-l>div .txt-part p+p {
	text-indent: 1em
}

.logo-area-top {
	padding: 8em 0;
	margin-bottom: 8rem;
	position: relative
}

@media only screen and (max-width:768px) {
	.logo-area-top {
		padding: 4em 0
	}
}

.logo-area-top:after {
	content: "";
	display: block;
	width: 96%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 80px 0 0 80px;
	background: #F0EFEA;
	z-index: -1
}

@media only screen and (max-width:768px) {
	.logo-area-top:after {
		width: 100%;
		border-radius: 40px 0 0 40px
	}
}

.logo-area-top .inner-l {
	position: relative
}

.logo-area-top .inner-l>div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em
}

.logo-area-top .inner-l>div .txt-part {
	width: calc(57% - 1em);
	margin-left: 6%
}

@media only screen and (max-width:768px) {
	.logo-area-top .inner-l>div .txt-part {
		width: 100%;
		margin-left: 0
	}
}

.logo-area-top .inner-l>div .txt-part .ttl-logo h2 {
	position: relative;
	display: block;
	text-indent: -200%;
	overflow: hidden;
	min-height: 100px;
	margin-bottom: 4rem
}

@media only screen and (max-width:768px) {
	.logo-area-top .inner-l>div .txt-part .ttl-logo h2 {
		margin-bottom: 0.8rem
	}
}

.logo-area-top .inner-l>div .txt-part .ttl-logo h2:after {
	content: "";
	display: inline-block;
	width: auto;
	height: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	aspect-ratio: 640/198;
	background: url(../images/ttl_logo.png) no-repeat center center/contain
}

@media only screen and (max-width:768px) {
	.logo-area-top .inner-l>div .txt-part .ttl-logo h2:after {
		height: 60%
	}
}

.logo-area-top .inner-l>div .txt-part p {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.8
}

@media only screen and (max-width:768px) {
	.logo-area-top .inner-l>div .txt-part p {
		font-size: 1.6rem
	}
}

.logo-area-top .inner-l>div .ph-part {
	width: 37%;
	text-align: center;
	background: #fff;
	border-radius: 10px;
	padding: 2em
}

@media only screen and (max-width:768px) {
	.logo-area-top .inner-l>div .ph-part {
		width: 100%
	}
}

.feature-area-top {
	margin-bottom: 8rem
}

.feature-area-top .inner-l {
	position: relative
}

.feature-area-top .inner-l .ttl-feature h2 {
	position: relative;
	display: block;
	text-indent: -200%;
	overflow: hidden;
	min-height: 122px;
	margin-bottom: 4rem
}

@media only screen and (max-width:768px) {
	.feature-area-top .inner-l .ttl-feature h2 {
		margin-bottom: 0.8rem
	}
}

.feature-area-top .inner-l .ttl-feature h2:after {
	content: "";
	display: inline-block;
	width: auto;
	height: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	aspect-ratio: 706/244;
	background: url(../images/ttl_feature.png) no-repeat center center/contain
}

@media only screen and (max-width:768px) {
	.feature-area-top .inner-l .ttl-feature h2:after {
		height: 60%
	}
}

@media only screen and (max-width:768px) {
	.feature-area-top .inner-l .list-thumb.feature li:nth-child(n+5) {
		display: none
	}
}

.feature-area-top .inner-l .btn-block {
	position: absolute;
	top: 0;
	right: 0
}

@media only screen and (max-width:768px) {
	.feature-area-top .inner-l .btn-block {
		position: relative
	}
}

.bg-area-top {
	margin-bottom: 8rem;
	text-align: center;
	position: relative
}

@media only screen and (max-width:768px) {
	.bg-area-top {
		margin-bottom: 1.6rem
	}
}

.bg-area-top img {
	width: 100%;
	aspect-ratio: 125/42;
	object-fit: cover
}

.area-area-top {
	padding: 6em 0;
	background: #F0EFEA;
	margin-bottom: 8rem
}

@media only screen and (max-width:768px) {
	.area-area-top {
		padding: 2em 0
	}
}

.area-area-top .inner-l {
	position: relative
}

.area-area-top .inner-l .ttl-area h2 {
	position: relative;
	display: block;
	text-indent: -200%;
	overflow: hidden;
	min-height: 107px;
	margin-bottom: 4rem
}

@media only screen and (max-width:768px) {
	.area-area-top .inner-l .ttl-area h2 {
		margin-bottom: 0.8rem
	}
}

.area-area-top .inner-l .ttl-area h2:after {
	content: "";
	display: inline-block;
	width: auto;
	height: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	aspect-ratio: 685/214;
	background: url(../images/ttl_area.png) no-repeat center center/contain
}

@media only screen and (max-width:768px) {
	.area-area-top .inner-l .ttl-area h2:after {
		height: 60%
	}
}

.area-area-top .inner-l .btn-block {
	position: absolute;
	top: 0;
	right: 0
}

@media only screen and (max-width:768px) {
	.area-area-top .inner-l .btn-block {
		position: relative
	}
}

.spotinfo-area-top {
	margin-bottom: 8rem
}

.spotinfo-area-top .inner-l {
	position: relative
}

.spotinfo-area-top .inner-l .ttl-spotinfo h2 {
	position: relative;
	display: block;
	text-indent: -200%;
	overflow: hidden;
	min-height: 157px;
	margin-bottom: 4rem
}

@media only screen and (max-width:768px) {
	.spotinfo-area-top .inner-l .ttl-spotinfo h2 {
		margin-bottom: 0.8rem
	}
}

.spotinfo-area-top .inner-l .ttl-spotinfo h2:after {
	content: "";
	display: inline-block;
	width: auto;
	height: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	aspect-ratio: 785/314;
	background: url(../images/ttl_spotinfo.png) no-repeat center center/contain
}

@media only screen and (max-width:768px) {
	.spotinfo-area-top .inner-l .ttl-spotinfo h2:after {
		height: 60%
	}
}

.spotinfo-area-top .inner-l .link-spotinfo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 4rem
}

@media only screen and (max-width:768px) {
	.spotinfo-area-top .inner-l .link-spotinfo {
		max-width: 640px;
		margin: 0 auto
	}
}

.spotinfo-area-top .inner-l .link-spotinfo li {
	width: 25%;
	text-align: center
}

@media only screen and (max-width:768px) {
	.spotinfo-area-top .inner-l .link-spotinfo li {
		width: 50%
	}
}

.spotinfo-area-top .inner-l .link-spotinfo li a {
	transition: 0.3s all
}

.spotinfo-area-top .inner-l .link-spotinfo li:last-child {
	margin-top: 4em;
	width: 100%
}

@media only screen and (max-width:768px) {
	.spotinfo-area-top .inner-l .link-spotinfo li:last-child {
		margin-top: 2em
	}
}

.spotinfo-area-top .inner-l .btn-block {
	position: absolute;
	top: 0;
	right: 0
}

@media only screen and (max-width:768px) {
	.spotinfo-area-top .inner-l .btn-block {
		position: relative
	}
}

.access-area-top {
	margin-bottom: 8rem
}

.bnr-area-top {
	margin-bottom: 8rem
}

/*# sourceMappingURL=top.css.map */