@charset "utf-8";

/**
 *
 *  ページ用CSS
 *  index
 */

/*--------------------------------------------------------------------------
	 Overwright
---------------------------------------------------------------------------*/
#Header h1 a {
	color: #fff;
}

#Header .util-nav li a {
	color: #fff;
	/* text-shadow: none;
	font-weight: normal; */
}

#Header .util-nav li a::before {
	background: #fff;
}

.gnav a {
	color: #fff;
	/* text-shadow: none;
	font-weight: normal; */
}

.gnav a span::after {
	background: #fff;
}


/*--------------------------------------------------------------------------
	 Mv
---------------------------------------------------------------------------*/
#Mv {
	position: relative;
	margin-bottom: 0;/* MV下部余白消す　*/
	padding-bottom: 0;/* MV下部余白消す　*/
}

#Mv h1 {
	position: absolute;
	right: 2vw;
	bottom: 1.5vw;
	z-index: 100;
}


#Mv h1.mv-logo01{
	position: absolute;
	left: 2vw;
	bottom: 1.5vw;
	z-index: 100;
}

#Mv .pic-mv {
	line-height: 0;
	overflow: hidden;
}

#Mv .pic-mv img {
	max-width: none;
	width: 100%;
	height: 80dvh /*100vh*/;
	object-position: right bottom;
	object-fit: cover;
	transform: scale(1.1, 1.1);
	transition: 1.2s ease-in;
}

#Mv .pic-mv img.mv {
	transform: scale(1, 1);
}

#Mv .caption {
	position: absolute;
	right: 10px;
	bottom: 5px;
	z-index: 100;
	font-size: 1.2rem;
	color: #fff;
	text-shadow: 0 0 5px #000,0 0 5px #000;
}

#Mv .pic-mv .sp-pic {
	display: none;
}

.mv_slider {
    margin: 0;
    padding: 0;
    list-style: none; /* 余計なスタイルを防ぐために追加 */
}

/*--------------------------------------------------------------------------
	 Content
---------------------------------------------------------------------------*/

/* obi
-----------------------------------------------------------------*/
.obi {
	padding: 20px 0;
	background: url(../images/bg_obi_pat.png) no-repeat center center #054b49;
	background-size: cover;
	text-align: center;
	color: #C9BB89;
	margin-top: -8px;/* obi 余白消す*/
}
.obi + .obi{
	margin-top: -1px;
}
.obi p {
	font-size: 6.6rem;
	line-height: 1;
	letter-spacing: .15em;
}
.obi p small {
	font-size: 2.2rem;
	letter-spacing: .1em;
}
.obi a + small{
	display: block;
	margin-top: 10px;
}
.obi p strong {
	font-size: 5rem;
	line-height: 1.3;
	font-weight: normal;
	margin-top: 5px;
	display: block;
	padding-bottom: 10px; /*字行間調整*/
}
.obi .frm{
	width: 100%;
	padding: 30px 10px;
	background-image: url(../images/bg_obi_l.png),url(../images/bg_obi_r.png);
	background-position: left bottom, right top;
	background-repeat: no-repeat;
	background-size: 175px auto,200px auto;
}
.obi.nvy{
	position: relative;
	background: linear-gradient(120deg, rgba(29,42,84,1) 0%, rgba(18,28,59,1) 100%);
	padding: 0;
}
.obi.nvy::before,
.obi.nvy::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	left: 0;
	background: #C9BB89;
}
.obi.nvy::before{
	top: 8px;
}
.obi.nvy::after{
	bottom: 8px;
}
.obi.nvy p{
	text-align: center;
	line-height: 1.5;
	background: linear-gradient(128deg, rgba(222,212,128,1) 0%, rgba(250,242,174,1) 20%, rgba(227,237,186,1) 60%, rgba(201,187,137,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.obi.red{
	position: relative;
	/* background: #76161B; */
	background: linear-gradient(180deg, rgba(118, 22, 27, 1) 0%, rgba(77, 2, 4, 1) 100%);
	padding: 0;
}
.obi.red::before,
.obi.red::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	left: 0;
	background: #C9BB89;
}
.obi.red::before{
	top: 8px;
}
.obi.red::after{
	bottom: 8px;
}
.obi.red p{
	text-align: center;
	line-height: 1.5;
	background: linear-gradient(128deg, rgba(222,212,128,1) 0%, rgba(250,242,174,1) 20%, rgba(227,237,186,1) 60%, rgba(201,187,137,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/*行動提起のPC画像サイズ*/
.obi.nvy p img{
    max-width: 900px;
}


.obi a.rsv_btn span{
/*	font-size: 2.0rem;*/
	font-size: 2.4rem;
	background: #caaa42;
	display: inline-block;
/*	padding: 10px 15px;*/
	padding: 15px 60px;
	vertical-align: top;
	margin: 4px 15px;
	color: #fff;
	letter-spacing: .1rem;
	transition: .5s;
}

.obi a.rsv_btn span:hover{
	background: #fff;
	color:#caaa42;
	}





/* intro
-----------------------------------------------------------------*/
.intro {
	padding: 80px 0 145px;
	background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(../images/bg_intro.png) no-repeat center bottom;
	background-size: cover;
	color: #fff;
}

.intro h2 {
	margin-bottom: 70px;
	text-align: center;
	font-size: 3.8rem;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: .12em;
}

.intro h2 sup {
	display: inline-block;
	margin-right: -.5em;
	transform: translate(-.5em, -1.5em);
	font-size: 1.4rem;
}

.intro h2 .en {
	padding-right: 7px;
	font-size: 6rem;
	/* color: #90874f; */
	color: #caaa42;
	font-weight: normal;
	letter-spacing: 0;
}

.intro .point-list {
	display: flex;
	justify-content: space-between;
}

.intro .point-list li {
	max-width: 390px;
	width: calc((100% - 20px)/3);
}



/* information
-----------------------------------------------------------------*/
.information {
	padding: 100px 0;
	background: #040C0C;
}

.information .layout-box {
	align-items: center;
	max-width: 1040px;
	margin: 0 auto 120px;
}

.information h2 {
	flex-shrink: 0;
	margin-right: 20px;
	font-weight: normal;
	color: #FFF;
}

.information h2 .ja {
	display: block;
	margin-bottom: 13px;
	font-size: 4rem;
	letter-spacing: .15em;
	line-height: 1;
}

.information h2 .en {
	display: block;
	text-transform: uppercase;
	font-size: 1.4rem;
	letter-spacing: .2em;
	color: #FFF;
}

.information .info-list {
	width: 66%;
	border-top: 1px solid #FFF;
}

.information .info-list li {
	padding: 40px 0;
	display: flex;
	border-bottom: 1px solid #FFF;
	letter-spacing: .04em;
	color: #FFF;
}

.information .info-list li a {
	color: #FFF;
	text-decoration: underline;
}

.information .info-list li a:hover {
	text-decoration: none;
}

.information .info-list .date {
	flex-shrink: 0;
	margin-right: 20px;
}

.information .cv-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 75px 8%;
	background: #fff;
}

.information .cv-box h3 {
	font-size: 4.8rem;
	line-height: 1;
	letter-spacing: .15em;
	font-weight: normal;
}

.information .cv-box .btn-cv {
	flex-shrink: 0;
	width: 330px;
	margin-left: 20px;
}

.information .cv-box .btn-cv a {
	height: 100px;
	font-size: 2.4rem;
}


/* features
-----------------------------------------------------------------*/
.ft-cont {
	display: flex;
}

.ft-cont.location,
.ft-cont.plan {
	flex-direction: row-reverse;
	background: #111612;
	color: #fff;
}

.ft-cont .pic {
	position: relative;
	width: 63.2%;
}

.ft-cont .txt-area {
	position: relative;
	width: 36.8%;
	padding: 7.4vw 20px;
}

.ft-cont.concept .txt-area,
.ft-cont.access .txt-area,
.ft-cont.brand .txt-area {
	background: #111612;
	color: #fff;
}

.ft-cont .txt-box {
	max-width: 30vw;
	margin: 0 auto;
}

.ft-cont h3 {
	margin-bottom: 3.2vw;
	font-size: 2.16vw;
	font-weight: normal;
	letter-spacing: .15em;
}

.ft-cont .txt {
	font-size: 1.06vw;
	line-height: 2.2;
}

.ft-cont .btn-more {
	position: absolute;
	left: 0;
	bottom: 5.8vw;
	width: 100%;
	padding-right: 6.85vw;
	text-align: right;
}

.ft-cont .btn-more a {
	position: relative;
	display: block;
	padding: 15px 25px;
	text-transform: uppercase;
	font-size: 2vw;
	letter-spacing: .15em;
	line-height: 1;
	transition: .3s;
}

.ft-cont .btn-more a:hover {
	opacity: .7;
}

.ft-cont .btn-more a::before {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	content: "";
	width: 0;
	height: 1px;
	background: #fff;
	transition: .5s;
}

.ft-cont .btn-more.mv a::before {
	width: 100%;
}

.ft-cont .btn-more a::after {
	position: absolute;
	right: 0;
	bottom: 1px;
	display: block;
	content: "";
	width: 1px;
	height: 20px;
	background: #fff;
	transform-origin: right bottom;
	transform: rotate(-60deg);
	transition-duration: .3s;
	transition-delay: .5s;
	opacity: 0;
}

.ft-cont .btn-more.mv a::after {
	opacity: 1;
}

.ft-cont.concept .btn-more a,
.ft-cont.access .btn-more a,
.ft-cont.brand .btn-more a {
	color: #fff;
}

.ft-cont.location .btn-more a,
.ft-cont.plan .btn-more a {
	color: #FFF;
	border-color: #FFF;
}

.ft-cont.location .btn-more a::before,
.ft-cont.plan .btn-more a::before,
.ft-cont.location .btn-more a::after,
.ft-cont.plan .btn-more a::after {
	background: #FFF;
}


/* concept */
.ft-cont.concept .txt-box {
	max-width: 24vw;
}

.ft-cont.concept .txt-box h3 {
	max-width: 22.2vw;
	margin: 0 auto 15px;
}

.ft-cont.concept .txt sup {
	display: inline-block;
	transform: translateY(-.8em);
	font-size: 1rem;
}

.ft-cont.concept .pic .caption {
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 1.4rem;
	letter-spacing: .05em;
	line-height: 1.2;
	color: #fff;
}
.ft-cont.access .pic .caption {
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 1.4rem;
	letter-spacing: .05em;
	line-height: 1.2;
	color: #000;
	-moz-text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
	-webkit-text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
	-ms-text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
	text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
}

/* access */
.ft-cont.access h3 {
	position: relative;
/*	line-height: 1;*/
}

.ft-cont.access h3 small {
	position: absolute;
	left: 0;
	top: 1.5vw;
	font-size: 1.06vw;
}

.ft-cont.access h3 .distance {
	display: block;
	margin-top: -2vw;
	text-indent: -.5em;
	font-size: 2.74vw;
}

.ft-cont.access h3 .walk {
	display: inline-block;
	padding: 0 3px;
	transform: translateY(25%);
	writing-mode: vertical-rl;
	font-size: 1.58vw;
}

.ft-cont.access h3 strong {
	font-size: 7.21vw;
	font-weight: normal;
}





/*--------------------------------------------------------------------------
	 laptop
---------------------------------------------------------------------------*/

@media screen and (min-width: 769px) and (max-height: 859px) {
	#Mv h1 {
		width: 320px;
	}
}

/*--------------------------------------------------------------------------
	 mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {



	/*--------------------------------------------------------------------------
	 Mv
---------------------------------------------------------------------------*/
	#Mv h1 {
		left: auto;
		/* right: 2vw; */
		bottom: auto;
		/* top: 4vw;
		width: 50vw; */
		width: 44vw;
		top: 1.5vw;
		right: 1.5vw;
	}

	#Mv .pic-mv img {
		max-width: none;
		width: 100%;
		height: 100vw;
		object-fit: cover;
		object-position: 95% center;
	}

	#Mv .pic-mv .sp-pic {
		display: block;
	}

	#Mv .pic-mv .pc-pic {
		display: none;
	}

	/*--------------------------------------------------------------------------
	 Content
---------------------------------------------------------------------------*/

	/* obi
-----------------------------------------------------------------*/
	.obi {
		padding: 15px 0;
	}
	.obi .inner{
		padding: 0 5px;
	}
	.obi p {
		font-size: 4.0rem;
		letter-spacing: .12em;
	}
	.obi p small {
		font-size: 1.2rem;
		display: inherit;
	}
	.obi p strong {
		font-size: 2.8rem;
	}
	.obi .frm{
		padding: 20px 5px;
		background-image: url(../images/bg_obi_l.png),url(../images/bg_obi_r.png);
		background-position: left bottom, right top;
		background-repeat: no-repeat;
		background-size: 75px auto,100px auto;
	}
	
	.obi a.rsv_btn span{
/*	font-size: 1.4rem;*/
	font-size: 1.8rem;
	display: block;
/*	padding: 5px 10px;*/
	padding: 15px 30px;
	vertical-align: top;
/*	margin: 10px auto;*/
	margin: 10px auto 15px;
	width:60%;

}



	/* intro
-----------------------------------------------------------------*/
	.intro {
		padding: 40px 0 60px;
	}

	.intro h2 {
		margin-bottom: 30px;
		font-size: 2.2rem;
		letter-spacing: .12em;
	}

	.intro h2 sup {
		transform: translate(-.5em, -1em);
		font-size: 1rem;
	}

	.intro h2 .en {
		padding-right: 5px;
		font-size: 3rem;
	}

	.intro .point-list {
		display: block;
	}

	.intro .point-list li {
		width: 100%;
		margin: 0 auto;
	}

	.intro .point-list li:nth-child(n+2) {
		margin-top: 15px;
	}


	/* information
-----------------------------------------------------------------*/
	.information {
		padding: 50px 0;
	}

	.information .layout-box {
		display: block;
		margin: 0 auto 40px;
	}

	.information h2 {
		margin: 0 0 20px;
	}

	.information h2 .ja {
		margin-bottom: 10px;
		font-size: 2.6rem;
	}

	.information h2 .en {
		font-size: 1.2rem;
	}

	.information .info-list {
		width: 100%;
		font-size: 1.3rem;
	}

	.information .info-list li {
		padding: 20px 0;
	}

	.information .info-list li a:hover {
		text-decoration: underline;
	}

	.information .info-list .date {
		margin-right: 15px;
	}

	.information .cv-box {
		display: block;
		padding: 30px 20px;
	}

	.information .cv-box h3 {
		margin-bottom: 25px;
		font-size: 2rem;
		text-align: center;
	}

	.information .cv-box .btn-cv {
		max-width: 330px;
		width: 100%;
		margin: 0 auto;
	}

	.information .cv-box .btn-cv a {
		height: 60px;
		font-size: 1.6rem;
	}


	/* features
-----------------------------------------------------------------*/
	.ft-cont {
		display: block;
	}

	.ft-cont .pic {
		width: 100%;
	}

	.ft-cont .txt-area {
		width: 100%;
		padding: 30px 20px 70px;
	}

	.ft-cont .txt-box {
		max-width: none;
		width: 100%;
		padding: 0 10px;
	}

	.ft-cont h3 {
		margin-bottom: 10px;
		font-size: 2rem;
	}

	.ft-cont .txt {
		font-size: 1.4rem;
		line-height: 2;
	}

	.ft-cont .btn-more {
		bottom: 20px;
		width: 100%;
		padding-right: 20px;
	}

	.ft-cont .btn-more a {
		font-size: 1.3rem;
	}

	.ft-cont .btn-more a:hover {
		opacity: 1;
	}


	/* concept */
	.ft-cont.concept .txt-box {
		max-width: none;
	}

	.ft-cont.concept .txt-box h3 {
		max-width: none;
		width: 200px;
		margin: 0 auto 10px;
	}

	.ft-cont.concept .txt sup {
		display: inline-block;
		transform: translateY(-.4em);
		font-size: 1rem;
	}

	/* access */
	.ft-cont.access h3 {
		padding-top: 5px;
	}

	.ft-cont.access h3 small {
		position: absolute;
		top: 0;
		font-size: 1.3rem;
	}

	.ft-cont.access h3 .distance {
		display: block;
		margin-top: -2vw;
		font-size: 2.5rem;
	}

	.ft-cont.access h3 .walk {
		transform: translateY(30%);
		font-size: 1.2rem;
	}

	.ft-cont.access h3 strong {
		font-size: 6rem;
	}

	/* パソコンで見たときは"pc"のclassがついた画像が表示される */
	.pc {
		display: block !important;
	}

	.sp {
		display: none !important;
	}

	/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
	@media only screen and (max-width: 750px) {
		.pc {
			display: none !important;
		}

		.sp {
			display: block !important;
		}
	}

}

/* 休業日 */

.close_info{
	border: 1px solid #fff;
	text-align: center;
	padding: 3%;
	color: #fff;
	max-width: 800px;
	margin: 0 auto 6%;
}
.close_info p:nth-of-type(1){
	font-size: 1.8rem;
	margin-bottom: 16px;
}
.close_info p:nth-of-type(2){
	font-size: 1.6rem;
	line-height: 1.6;
}
@media only screen and (max-width: 750px) {
	.close_info{
		padding: 8% 3%;
		margin: 0 auto 12%;
	}
	.close_info p:nth-of-type(1){
		font-size: 1.6rem;
		margin-bottom: 12px;
	}
	.close_info p:nth-of-type(2){
		font-size: 1.3rem;
		line-height: 1.6;
	}
}




/* 帯内の吹き出し */
.bubble {
    background-color: #A99046;
    font-size: 16px !important; /* フォントサイズを強制的に上書き */
    padding: 10px;
    border-radius: 10px;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
	 max-width: 100%; /* レスポンシブ対応 */
    box-sizing: border-box; /* パディングやボーダーが全体のサイズに影響しないように */
}

.bubble::after {
    content: '';
    position: absolute;
    bottom: -20px; /* 吹き出しの下部に三角形を配置 */
    left: 50%; /* 左から50%の位置に配置 */
    transform: translateX(-50%); /* 吹き出しの中央に位置合わせ */
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #A99046 transparent transparent transparent;
}

/* スマートフォン表示用の帯内の吹き出フォントサイズ調整 */
@media screen and (max-width: 600px) {
    .bubble {
        font-size: 12px !important; /* スマートフォンでは12pxに変更 */
    }
}

.bnr{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}