@charset "UTF-8";

/*--------------------------------
home
--------------------------------*/

@media screen and (max-width: 767px){
	.home .container:before{
		content: none;
	}
}
.mv-slider-container{
	position: relative;
}

/* MVブロック */
.mv-container{
	position: relative;
	z-index:2;
	background: #1f3243;
}
.mv-copy{
	padding: clamp(25px, 2.78vw, 40px) 0 clamp(30px, 3.47vw, 50px);
	margin: 0 auto;
	max-width: 600px;
  width: 80%;
}
.mv-copy-sub{
	margin-top: clamp(20px, 2.08vw, 30px);
	font-size: clamp(16px, 1.7vw, 24px);
	color: #fff;
	text-align: center;
	line-height: 1.4;
}


/* obi */
.obi-block{
	background-color: #425C75;
	padding: 20px 0;
}
.kodo-text{
	text-align: center;
	font-size: clamp(21.36px, 3.2vw, 32px);
	letter-spacing: .13em;
	color: #fff;
}


/* INFORMATION */
.information-block{
	background: #f1efe9;
}
.information-inner{
	margin: 0 auto;
	padding: clamp(60px, 6vw, 120px) 0;
	max-width: 880px;
}
.information-ttl{
	color: #ae8952;
	text-align: center;
	font-size: clamp(21.36px, 3.2vw, 32px);
	letter-spacing: .13em;
}
.information-lists{
	margin-top: clamp(20px, 2.78vw, 40px);
}
.information-list{
	padding: clamp(14px, 1.42vw, 26px) 0;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #a48956;
}
.information-list + .information-list{
	border-bottom: 1px solid #a48956;
}
.information-date{
	min-width: 120px;
	font-size: clamp(11px, 1.6vw, 16px);
	line-height: 1.6;
}
.information-detail{
	flex: 1;
	font-size: clamp(11px, 1.6vw, 16px);
	line-height: 1.6;
}
@media screen and (max-width: 767px){
	.information-block{
		position: relative;
		z-index: 2;
	}
	.information-inner {
    max-width: 90%;
	}
	.information-date {
    min-width: 74px;
	}
}


/* INFORMATION CNS用 */
.information-block #p_info{
	margin-top: clamp(16px, 1.82vw, 28px);
}
.information-block #p_info .item{
	padding: clamp(14px, 1.42vw, 26px) 0;
	border-top: 1px solid #a48956;
}
.information-block #p_info .item:last-child{
	border-bottom: 1px solid #a48956;
}
.information-block #p_info .date{
	margin-bottom: 3px;
	font-size: clamp(7.92px, 1.152vw, 14px);
	line-height: 1.6;
	color: #ae8952;
	font-weight: 500;
}
.information-block #p_info h4{
	font-size: clamp(13.2px, 1.92vw, 19.2px);
  line-height: 1.6;
	font-weight: 500;
}
.information-block #p_info .body{
	margin-top: 4px;
	font-size: clamp(9.9px, 1.44vw, 14.4px);
  line-height: 1.6;
}

/* MV下バナー */
.bnr-block{
	position: relative;
	z-index:2;
	background: linear-gradient(to bottom, #1f3243 0%, #202d3b 50%, #101722 100%);
}
.bnr-block-inner{
	padding: clamp(25px, 2.78vw, 40px) 0;
}
.bnr-block .bnr-wrap{
	margin: 0 auto;
	max-width: 800px;
	width: calc(100% - 50px);
}
.bnr-block .bnr-wrap a{
	transition: .6s;
}
.bnr-block .bnr-wrap a:hover{
	opacity: .6;
}

/* USP */
.usp-block{
	background: linear-gradient(to bottom, #1f3243 0%, #202d3b 50%, #101722 100%);
}
.usp{
	padding: clamp(36px, 4vw, 90px) 0;
	position: relative;
	z-index:2;
}
.usp-inner{
	margin: 0 auto;
	max-width: 720px;
	width: 80%;
}
.usp-text{
	text-align: center;
	color: #fff;
}
@media screen and (max-width: 767px){
	.usp-block{
		position: relative;
		z-index: 2;
	}
}

/* コンテンツブロック */
.contents-block{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	background: #1f3243;
	align-items: center;
	justify-content: space-between;
}
.contents-block:nth-child(odd) {
    flex-direction: row-reverse; /* 画像が右、テキストが左になる */
}
.contents-block-white{
	background: #fff;
}
.contents-detail{
	margin: 0 auto;
}
.contents-detail-inner{
	text-align: center;
}
.contents-detail-ttl{
	padding-bottom: clamp(14px, 2vw, 20px);
	font-size: clamp(24px, 4vw, 36px);
	line-height: 1.4;
	color: #ae8952;
	text-align: center;
	position: relative;
	display: inline-block;
	letter-spacing: .12em;
}
.contents-block-white .contents-detail-ttl{
	color: #1f3243;
}
.contents-detail-ttl::after{
	content: "";
	display: block;
	width: 160%;;
	height: 1px;
	background: #ae8952;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.contents-detail-text{
	margin-top: clamp(14px, 2vw, 20px);
	font-size: clamp(12px, 2vw, 20px);
	line-height: 2;
	color: #fff;
	text-align: center;
}
.contents-block-white .contents-detail-text{
	color: #1f3243;
}
.contents-btn{
	margin: 32px auto 0;
	max-width: 240px;
	position: relative;
	padding: 14px;
	color: #1f3243;
	background: #f1efe9;
	font-size: 1.6rem;
	letter-spacing: 1em;
	padding-left: 1.7em;
	display: block;
	transition: .6s;
	text-align: center;
	font-family: 'Forum', 'Noto Serif JP', serif;
	border-radius: 50px;
}
.contents-block-access .contents-btn {
	margin-top: 50px;
}
.contents-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 20px;
  height: 20px;
  border: 1px solid #1f3243;
  border-radius: 50%;
  transform: translateY(-50%);
}
.contents-btn::before {
  content: "";
  position: absolute;
	top: 50%;
	right: 23px;
	width: 6px;
	height: 6px;
  border-top: 1px solid #1f3243;
  border-right: 1px solid #1f3243;
  transform: translateY(-50%) rotate(45deg);
}
.contents-btn:hover{
	opacity: .7;
}
/*.contents-block-white .contents-btn{
	color: #fff;
	background: #1f3243;
}
.contents-block-white .contents-btn::after{
	border: 1px solid #fff;
}
.contents-block-white .contents-btn::before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}*/

.contents-btn.contents-btn-soon{
	letter-spacing: .2em;
	pointer-events: none;
	background: #b5b5b5;
	color: #fff;
}
/*
.contents-block-white .contents-btn.contents-btn-soon{
	background: transparent;
	border: 1px solid #a48956;
	color: #a48956;;
}*/
.contents-btn.contents-btn-soon::after{
	content: none;
}
.contents-btn.contents-btn-soon::before {
  content: none;
}
.contents-image{
	width: 60%;
	position: relative;
	z-index:2;
	padding: 60px 0;
}
.contents-comingsoon .contents-image .img-wrapper:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background:rgba(0, 0, 0, 0.5);
}
.contents-comingsoon .contents-image:after{
	content: "coming soon";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	padding: 16px 0;
	background:
		linear-gradient(#fff, #fff) left center / calc(50% - 120px) 1px no-repeat,
		linear-gradient(#fff, #fff) right center / calc(50% - 120px) 1px no-repeat,
		rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: center;
	z-index: 2;
}

@media screen and (max-width: 767px){
	.contents-block {
        flex-direction: column;
		background-color: #fff;
    }
    .contents-block:nth-child(even) {
        flex-direction: column;
    }
    .contents-image {
        width: 100%;
		padding: 0;
    }
    .contents-image .img-wrapper .caption {
		bottom: 32px;
	}
    .contents-block:nth-child(odd) .img-wrapper .caption {
		right: auto;
		left: 10px;
	}
    .contents-detail {
        width: 90%;
		padding: 32px 0;
		background: #1f3243;
		margin-top: -32px;
		margin-right: 0;
		margin-bottom: 32px;
		z-index: 2;
    }
    .contents-block:nth-child(odd) .contents-detail {
		background: #fff;
		margin-right: auto;
		margin-left: 0;
		box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
    }

	.contents-detail-ttl::after{
		width: 118%;
	}
	.contents-btn-wrap{
		bottom: 8%;
		min-width: 60%;
	}
	.contents-btn {
		padding: 8px 10px 8px 18px;
		margin-top: 16px;
		font-size: 1.2rem;
		max-width: 45%;
		letter-spacing: .8em;
	}
	.contents-block-access .contents-btn {
		margin-top: 28px;
	}
	.contents-btn::before {
		right: 16px;
		width: 5px;
		height: 5px;
	}
	.contents-btn:after {
		width: 14px;
		height: 14px;
		right: 10px;
	}
	.contents-comingsoon .contents-image:after{
		padding: 12px 0;
		background:
			linear-gradient(#fff, #fff) left center / calc(50% - 100px) .5px no-repeat,
			linear-gradient(#fff, #fff) right center / calc(50% - 100px) .5px no-repeat,
			rgba(0, 0, 0, 0.4);
		font-size: 12px;
		font-weight: 500;
	}
	.contents-block-plan .caption{
		color: #333;
	}
}

/* アクセスブロック */
.access-detail-text-wrap{
	margin-top: clamp(18px, 2.08vw, 30px);
}
.detail-obi{
	margin-bottom: clamp(18px, 3vw, 28px);
	padding: clamp(6px, 0.69vw, 10px) clamp(30px, 4.17vw, 54px);
	color: #fff;
	background: #a48956;
	display: inline-block;
	font-size: clamp(16px, 1.81vw, 24px);
}
.detail-time{
	font-size: clamp(18px, 2.5vw, 32px);
}
.detail-time + .detail-time{
	margin-top: clamp(20px, 2.4vw, 36px);
}
.detail-time .detail-time-num{
	font-size: clamp(28px, 3.8vw, 46px);
	color: #83372a;
	position: relative;
	bottom: -2px;
}
.detail-time .has-under{
	position: relative;
}
.detail-time .detail-time-under{
	position: absolute;
	left: clamp(10px, 1.25vw, 18px);
	bottom: clamp(-20px, -1.39vw, -10px);
	font-size: clamp(8px, 0.83vw, 10px);
}

.entry-container{
	background: url(../images/home/entry-bg.webp) no-repeat center center;
	background-size: cover;
}
.entry-inner{
	padding: 90px 0;
}
.entry-ttl-en{
	font-size: clamp(1.2rem, 1vw, 1.8rem);
	letter-spacing: 1em;
	color: #432c1c;
}
.entry-ttl{
	margin-top: 30px;
	font-size: clamp(2rem, 2.3vw, 4rem);
}
.entry-btn{
	margin-top: 30px;
	padding: 18px;
	color: #fff;
	background: #432c1c;
	font-size: 2.2rem;
	font-size: clamp(1.6rem, 1.3vw, 2.2rem);
	display: inline-block;
	min-width: 410px;
	transition: .6s;
}
.entry-btn:hover{
	opacity: .7;
}
@media screen and (max-width: 767px){
	.entry-container {
			background: url(../images/home/entry-bg-sp.webp) no-repeat center center;
			background-size: cover;
	}
	.entry-inner {
    padding: 30px 0;
	}
	.entry-ttl {
    margin-top: 14px;
	}
	.entry-btn{
		margin-top: 16px;
    padding: 10px;
		min-width: 66%;
	}
}
.contents-ttl{
	margin-bottom: 40px;
	padding-left: 1em;
	font-size: 1.8rem;
	font-size: clamp(1.4rem, 1.6vw, 2rem);
	letter-spacing: 1em;
	color: #432c1c;
	font-family: 'Forum', 'Noto Serif JP', serif;
}
.contents-note{
	margin: 40px auto 0;
	max-width: 800px;
	font-size: clamp(1.3rem, 1.4vw, 2rem);
	line-height: 2;
}
.contents-about{
	padding: 120px 0;
}
.border-circle{
	padding-top: 60px;
	background: url(../images/home/border-circle.svg) no-repeat top center;
	background-size: contain;
}


.concept-logo{
	margin: 80px auto 20px;
	max-width: 300px;
}
.concept-section .contents-note{
	margin: 40px auto;
}
.concept-image-lineup{
	margin: 100px auto;
	position: relative;
}
.concept-image-lineup01{
	padding-top: 32%;
}
.concept-image-lineup02{
	padding-top: 36%;
}
.concept-image-lineup03{
	padding-top: 29%;
}
.concept-image01{
	position: absolute;
	top: 0;
	left: 8%;
	width: 42%;
}
.concept-image02{
	background: #432c1c;
	position: absolute;
	bottom: 5%;
	right: 12%;
	width: 34%;
}
.concept-image02 .concept-image-padding{
	padding: 6% 6% 6% 20%;
}
.concept-image03{
	position: absolute;
	top: 0;
	right: 15%;
	width: 50%;
	z-index: 3
}
.concept-image04{
	background: #e8e7e6;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 37%;
	z-index: 2;
}
.concept-image04 .concept-image-padding{
	padding: 6% 27% 6% 0;
}
.concept-image05{
	position: absolute;
	top: 0;
	left: 13%;
	width: 35%;
}
.concept-image06{
	background: #432c1c;
	position: absolute;
	bottom: 0;
	right: 9%;
	width: 35%;
}
.concept-image06 .concept-image-padding{
	padding: 6% 13% 6% 13%;
}
.concept-image-lineup .img-wrapper .caption{
	font-size: clamp(.8rem, .8vw, 1.4rem);
}
.concept-image02 .concept-image-padding.img-wrapper .caption{
	bottom: 1%;;
	right: 6%;
}
.concept-image04 .concept-image-padding.img-wrapper .caption{
	bottom: 1%;;
	right: 26%;
}
.concept-image06 .concept-image-padding.img-wrapper .caption{
	bottom: 1%;;
	right: 12%;
}
@media screen and (max-width: 767px){
	.concept-section .contents-note {
    margin: 20px auto;
	}
	.concept-logo{
		margin: 40px auto 10px;
		max-width: 40%;
	}
	.concept-image-lineup{
		margin: 0 auto;
		position: inherit;
	}
	.concept-image-lineup01{
		padding-top: 0;
	}
	.concept-image-lineup02 {
		padding-top: 0;
	}
	.concept-image-lineup03 {
		margin-bottom: 60px;
		padding-top: 0;
	}
	.concept-image01 {
    position: relative;
    width: 84%;
		top: auto;
    left: auto;
	}
	.concept-image01.img-wrapper .caption{
		bottom: -22px;
    left: 8px;
    right: 0;
		text-shadow: none;
		color: #333;
	}
	.concept-image02 {
		margin-top: 60px;
    position: inherit;
    width: 100%;
	}
	.concept-image02 .concept-image-padding {
    padding: 6% 0 6% 20%;
	}
	.concept-image02 .concept-image-padding.img-wrapper .caption {
    bottom: 1%;
    right: 4%;
	}
	.concept-image03 {
		margin-top: 60px;
    position: relative;
    width: 100%;
		top: auto;
    right: auto;
    background: #e8e7e6;
	}
	.concept-image03.img-wrapper .caption {
    bottom: -8%;
    right: 0;
		text-shadow: none;
		color: #333;
	}
	.concept-image03 .concept-image-padding {
    padding: 6% 20% 6% 0;
	}
	.concept-image03 .img-wrapper .caption {
    right: 20%;
		text-shadow: none;
		color: #333;
	}
	.concept-image04 {
		margin-top: 60px;
    position: inherit;
    width: 100%;
	}
	.concept-image04 .concept-image-padding {
    padding: 6% 20% 6% 0;
	}
	.concept-image04 .concept-image-padding.img-wrapper .caption {
    right: 20%;
	}
	.concept-image05 {
		margin-top: 60px;
    position: relative;
    width: 100%;
		top: auto;
    left: auto;
	}
	.concept-image05.img-wrapper .caption{
		bottom: -7%;
		text-shadow: none;
		color: #333;
	}
	.concept-image06 {
		margin-top: 60px;
    position: inherit;
    width: 100%;
	}
	.concept-image-lineup .img-wrapper .caption {
    font-size: .8rem;
		right: 4%;
	}
}
.cross{
	margin: 10px auto;
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
}
.cross::before, .cross::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px; /* 棒の幅（太さ） */
  height: 40px; /* 棒の高さ */
  background: #333;
}
.cross::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.cross::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.potencial-section .contents-about{
	background: url(../images/home/potential-bg.webp) no-repeat center center;
	background-size: cover;
}
.harbor-road-section .contents-about{
	background: url(../images/home/harbor-road-bg.webp) no-repeat center center;
	background-size: cover;
}
.location-section .contents-about{
	background: url(../images/home/location-bg.webp) no-repeat center center;
	background-size: cover;
}
.access-section .contents-about{
	background: url(../images/home/access-bg.webp) no-repeat center center;
	background-size: cover;
}
.plan-section .contents-about{
	background: url(../images/home/plan-bg.webp) no-repeat center center;
	background-size: cover;
}
@media screen and (max-width: 767px){
	.cross::before,
	.cross::after { 
		height: 20px; /* 棒の高さ */
	}
	.cross{
		width: 20px;
		height: 20px;
	}
	.potencial-section .contents-about{
		padding: 60px 0;
	}
}
.access-heading{
	line-height: 1.3;
}
.access-heading .text-large{
	padding: 0 .4%;
	font-size: 140%;
	color: #90815e;
}
.access-heading .text-small{
	font-size: 60%;
}
.text-annotation-wrap{
	position: relative;
}
.text-annotation-wrap .text-annotation{
	position: absolute;
	bottom: -32%;
	right: 10%;
	font-size: 36%;
}
.plan-floor-block{
	padding: 80px 0;
	background: #e7e5e4;
}
.plan-floor-main{
	margin: 0 auto;
	max-width: 400px;
}
.plan-floor-types{
	margin: 100px auto 0;
	max-width: 1200px;
	display: flex;
	justify-content: center;
}
.plan-floor-type{
	position: relative;
	width: 50%;
}
.plan-floor-type:first-child::after{
	position: absolute;
	content: "";
	width: 1px;
	height: 80%;
	background: #90815e;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.plan-floor-type-text{
	writing-mode: vertical-rl;
	font-family: 'Forum', 'Noto Serif JP', serif;
	font-size: 4.8rem;
	position: absolute;
	top: 12%;
  left: 8%;
	color: #90815e;
	letter-spacing: .7em;;
}
.plan-floor-type-img{
	margin: auto;
	max-width: 320px;
}
@media screen and (max-width: 767px){
	.plan-floor-block{
		padding: 50px 0 0;
	}
	.plan-floor-main {
			max-width: 54%;
	}
	.plan-floor-types{
		  margin: 40px auto 0;
			max-width: 100%;
			display: block;
	}
	.plan-floor-type {
		padding: 40px 0;
    width: 100%;
    margin: 0 auto;
	}
	.plan-floor-type:first-child{
		background: #fff;
	}
	.plan-floor-type-img {
    max-width: 54%;
	}
	.plan-floor-type-text {
		font-size: 3.2rem;
		top: 14%;
		left: 8%;
	}
	.plan-floor-type:first-child::after{
		content: none;
	}
}


/* ローディング画面のスタイル */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* ここを白に設定 */
    z-index: 9999; /* 一番手前に表示 */
    transition: opacity 0.6s ease, visibility 0.6s ease; /* フェードアウトの速度 */
}

/* 読み込み完了後に付与するクラス */
#loading-overlay.is-loaded {
    opacity: 0;
    visibility: hidden;
}

/* （オプション）読み込み完了までスクロールを禁止する場合 */
body.is-loading {
    overflow: hidden;
}