@charset "utf-8";
/**
 *
 *  ページ用CSS
 *  concept
 */
/*--------------------------------------------------------------------------
  Overwright
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
  Content
---------------------------------------------------------------------------*/
/* kv
-----------------------------------------------------------------*/
.kv {
	position: relative;
	min-height: 638px;
	background: url(../images/mv.jpg) no-repeat center center;
	background-size: cover;
}
.kv h1 {
	position: absolute;
	left: 0;
	top: 40%;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 5rem;
	letter-spacing: .08em;
	font-weight: normal;
	line-height: 1;
	color: #FFFFFF;
	font-family: "EB Garamond", serif;
	text-shadow: 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4), 0px 0px 8px rgba(0, 0, 0, .4);
}
.kv .caption {
	position: absolute;
	right: 10px;
	bottom: 5px;
	font-size: 1.2rem;
	color: #fff;
	text-shadow: 0 0 5px #000, 0 0 5px #000;
}

/* .pic_list
======================= */
.pic_list {
	margin-top: clamp(120px, 3.8vw, 180px);
}
.pic_list ul {
	display: flex;
}
.pic_list ul li {
	position: relative;
}
.pic_list ul li .cap {
	position: absolute;
	bottom: 1em;
	right: 1em;
	font-size: clamp(1rem, 1.1vw, 1.2rem);
	line-height: 1;
	text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 1px #000;
}
.pic_list ul li img {
	display: block;
	width: 100%;
}
/* ======== pic_list > responsive ======== */
@media screen and (max-width: 1024px) {
	.pic_list ul {
		flex-wrap: wrap;
	}
	.pic_list ul li {
		width:50%;
	}
}
/*--------------------------------------------------------------------------
  mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	/* kv
-----------------------------------------------------------------*/
	.kv {
		height: 50vw;
		min-height: inherit;
	}
	.kv h1 {
		top: 43%;
		font-size: 2.8rem;
	}
	.kv .caption {
		right: 5px;
		bottom: 2px;
		font-size: 1rem;
	}

}


/* ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
▼ここからロケーションページ用cssベタ貼り*/
/**
 *
 *  ページ用CSS
 *  location
 *
 */
/*--------------------------------------------------------------------------
	Overwright
---------------------------------------------------------------------------*/
.page-ttl{
	height: 100%;
}
.page-ttl h1{
	color: #fff;
	top: 50%;
	transform: translateY(-50%);
	text-shadow: none;
	text-shadow: 0px 0px 8px rgba(0,0,0,.4), 0px 0px 8px rgba(0,0,0,.4), 0px 0px 8px rgba(0,0,0,.4), 0px 0px 8px rgba(0,0,0,.4), 0px 0px 8px rgba(0,0,0,.4), 0px 0px 8px rgba(0,0,0,.4);
	z-index: 2;
}
.txt {
	letter-spacing: .02em;
}
.txt.lead {
	font-size: clamp(2rem, 1.8vw, 3rem) !important;
	letter-spacing: 0.095em;
}
.pict {
	position: relative;
	line-height: 1;
}
.pict>.cap {
	position: absolute;
	right: .75em;
	bottom: .75em;
	color: #fff;
	font-size: 1.2rem;
	text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 1px #000;
}
.pict>img {
	width: 100%;
}
/*--------------------------------------------------------------------------
	Content
---------------------------------------------------------------------------*/
main{
	position: relative;
	background-color: #030000;
	background-image: url('../images/bg_parts_r.png'), url('../images/bg_parts_l.png');
	background-repeat: no-repeat, no-repeat;
	background-position: top right, top 19% left;
	background-size: 25vw, 25vw;
}
main > .caption{
	position: absolute;
	right: 10px;
	top: 5px;
	font-size: 1.2rem;
	color: #223c14;
}
section h2.additions{
	width: fit-content;
	margin: 0 auto 45px auto;
	font-size: 4.2rem;
	font-size: clamp(2.6rem, 2.5vw, 4.2rem);
	letter-spacing: .15em;
	font-weight: normal;
}

section h2.additions + .txt{
	line-height: 2.5;
}

/* intro
-----------------------------------------------------------------*/
.intro._01{
	position: relative;
	padding: 170px 0 140px;
}


/*--------------------------------------------------------------------------
	Media Queries
---------------------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
	main{
		background-size: 35vw, 35vw;
		background-position: top right, top 17% left;
	}
	.intro._01 {
		padding: 120px 0 75px;
	}
	.txt.lead {
		line-height: 2.4;
	}
}
/*--------------------------------------------------------------------------
	mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	main {
		background: #030000 url('../images/bg_parts_r.png') no-repeat top right / 35vw;
	}
	.txt:not(.lead) {
		font-size: 1.4rem;
	}
	.intro._01 {
		padding: 80px 0 25px;
	}

}
@media screen and (max-width: 440px) {
	br.sp440 {
		display: none;
	}
}

#Header .util-nav li a {
    color: #fff;
}
.gnav a {
    color: #fff;
}


.design{
	background-image: url(../images/bg.jpg);
	background-position: left top;
	background-size: cover;
	color: #fff;
	padding: 8% 0 6%;
}
.design_inner {
    max-width: 1600px;
    padding: 0 20px;
    margin: 0 auto;
}
.design_img_wrap{
	display: flex;
	justify-content: flex-start;
}
.design_img{
	flex-basis: 70%;
}
.design_ttl{
	flex-basis: 17% ;
	writing-mode: vertical-rl;
	letter-spacing: 4px;
	font-size: 3.2rem;
	line-height: 1.6;
	font-weight: 300;
	text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 1px #000;
}
.design_ttl span{
	padding-top: 200px;
	display: block;
}

.design_txt_wrap{
	margin-top: 4%;
}
.design_txt_wrap .en{
	font-family: "EB Garamond", serif;
	font-weight: normal;
	color: #9b9054;
	font-size: 2.4rem;
	letter-spacing: 1px;
}
.design_txt_wrap h3{
	font-size: 3rem;
	line-height: 1.6;
	letter-spacing: .1em;
	font-weight: 300;
}
.design_txt_wrap h3 + p{
	font-size: 1.4rem;
	letter-spacing: .1em;
	line-height: 2;
	margin-top: 20px;
}
.ent{
	position: relative;
}
.ent_txt_area{
	background-image: url(../images/bg2.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
}
.ent .ent_txt{
	color: #fff;
	/* max-width: 300px; */
	padding: 8% 0 6%;
	margin: auto;
	/* writing-mode: vertical-rl; */
    letter-spacing: 4px;
    font-size: 3.2rem;
	text-align: center;
    line-height: 1.6;
    font-weight: 300;
    text-shadow: 0px 0px 7px #000, 0px 0px 7px #000;
}
.img_ttl{
	text-align: center;
	font-family: "EB Garamond", serif;
    font-weight: normal;
    color: #9b9054;
    font-size: 3.0rem;
	padding-bottom: 8px;
    letter-spacing: 20px;
	text-shadow: 0px 0px 7px #000, 0px 0px 7px #000;
}
.extetior{
	position: relative;
    min-height: 720px;
    background: url(../images/extetior_bg.jpg) no-repeat center center;
    background-size: cover;
	color: #fff;
}

.extetior_txt{
	font-size: 2.6rem;
	padding-top: 16%;
}
.extetior h3{
	color: #d6c88a;
	font-weight: 300;
	font-size: 4rem;
	line-height: 1.3;
	margin-top: 3%;
}
.extetior h3 span{
	display: block;
	font-size: 40%;
	letter-spacing: 3px;
}

.moreLink{
	max-width: 300px;
}

.moreLinkText {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
	font-size: 2rem;
	letter-spacing: 3px;
	display: inline-block;
	margin-top: 8%
  }
  /*ホバーしたときに下線矢印も同時に色を変える*/
  /* .moreLinkText:hover .lineArrow  {
	  border-bottom: 1px solid #d6c88a;
	  border-right: 1px solid #d6c88a;
  }
  .moreLinkText:hover {
	  color: #d6c88a;
  } */

  .lineArrow {
	width: 140%;
	height: 15px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	 /*傾きを調節*/
	transform: skew(38deg);
	/*下線矢印をテキストに合わせてうまい具合にはめる*/
	margin: -10px 0 0 -15px;
  }

@media screen and (max-width: 768px) {
	.design{
		background-image: url(../images/bg3_sp.jpg);
		background-position: left top;
		background-size: cover;
		color: #fff;
		padding: 12% 0 12%;
	}
	.design_img_wrap{
		display: flex;
		justify-content: flex-start;
		flex-direction: column-reverse;
	}
	.design_img{
		flex-basis: 100%;
	}
	.design_ttl{
		flex-basis: 100%;
		max-width: 300px;
		margin: auto;
		font-size: 2rem;
		max-height: 260px;
	}
	.design_ttl span{
		padding-top: 70px;
		display: block;
	}
	
	.design_txt_wrap{
		margin-top: 12%;
	}
	.design_txt_wrap .en{
		font-size: 1.6rem;
	}
	.design_txt_wrap h3{
		font-size: 2rem;
		line-height: 1.6;
		margin-top: 8px;
	}
	.design_txt_wrap h3 + p{
		font-size: 1.4rem;
		letter-spacing: 2px;
		line-height: 2;
		margin-top: 16px;
	}

	.ent{
		position: relative;
	}
	.ent_txt_area{
		background-image: url(../images/bg2_sp.jpg);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: cover;
	}
	.ent .ent_txt{
		font-size: 2rem;
		padding-top: 16%;
		padding-bottom: 16%;
	}
	.img_ttl{
		font-size: 1.8rem;
		padding-bottom: 8px;
		letter-spacing: 6px;
		text-shadow: 0px 0px 7px #000, 0px 0px 7px #000;
	}
	.extetior{
		position: relative;
		min-height: 460px;
	}
	
	.extetior_txt{
		font-size: 1.8rem;
		padding-top: 24%;
	}
	.extetior h3{
		color: #d6c88a;
		font-weight: 300;
		font-size: 3.0rem;
		line-height: 1.3;
		margin-top: 8%;
	}
	
	.moreLinkText {
		font-size: 1.6rem;
	  }
}

/* 外観パース追加分 */

.gaikan_wrap{
	background-image: url(../images/gaikan_bg.jpg);
	background-size: cover;
	background-position: bottom center;
	padding-top: 160px;
	position: relative;
}
.gaikan_txt{
	position: absolute;
	right: 3.6svw;
	top: 22%;
	color: #111111;
	z-index: 1;
}
.gaikan_txt .inner{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.gaikan_txt h2{
	writing-mode: vertical-rl;
    letter-spacing: 4px;
    font-size: clamp(1.3rem, calc(1.25vw + 1.5rem), 3.0rem);
    line-height: 2;
    font-weight: 300;
}
.gaikan_txt p{
	max-width: 420px;
	width: 24svw;
	font-size: clamp(1.1rem, calc(0.25vw + 1.3rem), 1.6rem);
	line-height: 2;
	margin-top: 5svw;
	font-weight: 500;
	text-align: justify;
}

.scale{
	max-width: 1200px;
	margin: 0 auto 8%;
}
.scale .inner{
	display: flex;
	justify-content: space-between;
}
.scale_img{
	flex-basis: 50%;
}
.scale_txt{
	flex-basis: 46%;
	margin-top: 24px;
}
.scale_txt h4{
	font-size: 3rem;
    line-height: 1.6;
    letter-spacing: .1em;
    font-weight: 300;
}
.scale_txt p{
	font-size: 1.4rem;
    letter-spacing: .1em;
    line-height: 2;
    margin-top: 20px;
}

@media screen and (max-width: 768px) {
	.gaikan_wrap{
		padding-top: 480px;
		position: relative;
		background-position: top right;
	}
	.gaikan_txt{
		top: 6%;
    	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	}
	.gaikan_txt h2{
		max-width: 90svw;
		width: 90svw;
		writing-mode: inherit;
		letter-spacing: 4px;
		font-size: clamp(1.3rem, calc(1.25vw + 1.5rem), 3.0rem);
		line-height: 2;
		font-weight: 300;
		text-shadow: 0px 0px 8px #fff;
	}
	.gaikan_txt p{
		max-width: 90svw;
		width: 90svw;
		font-size: clamp(1.1rem, calc(0.25vw + 1.3rem), 1.6rem);
		margin-top: 8svw;
	}
	
	.scale{
		margin: 0 auto 54px;
	}
	.scale .inner{
		display: block;
		justify-content: space-between;
	}
	.scale_txt{
		flex-basis: 46%;
		margin-top: 24px;
	}
	.scale_txt h4{
		font-size: 2rem;
        line-height: 1.6;
        margin-top: 8px;
	}
	.scale_txt p{
		font-size: 1.4rem;
        letter-spacing: 2px;
        line-height: 2;
        margin-top: 16px;
	}
}