/*--------------------------
	style-index.css
--------------------------*/

/* LAYOUT ///////////////////////////////////////////////////////*/
#message, #company, #buy-land, #sell-replace, #inquiry{padding:6vw 0;}
#staff{padding-bottom:6vw;}
@media screen and (max-width: 767px){
	#message,
	#company,
	#staff,
	#buy-land,
	#sell-replace,
	#fees,
	#inquiry
	{padding:6vw 6.4vw;}
}

/* FIRST VIEW //////////////////////////////////////////////////////// */
#firstView .fvCopy img{width:auto;}
@media screen and (max-width: 767px){
	#firstView h2{font-size:80%;}
	#firstView .fvCopy img{height:7em;}
}
@media screen and (min-width: 768px){
	#firstView h2{font-size:400%;}
	#firstView .fvCopy{display:flex;transform: translateX(15%);}
	#firstView .fvCopy img{height:2.4em;}
}
.video-background{position:relative;width:100%;height:100vh;overflow:hidden;/*font-family:"M PLUS 1p";*/}
.video-background video {
	position: absolute;z-index:-1;
	top:50%;left:50%;
	min-width:100%;min-height:100%;
	width:auto;height:auto;
	transform:translate(-50%, -50%);
	object-fit:cover;
}
.video-background .content {
	position:relative;
	z-index:1;
	color:white;
	text-align:center;
	transform:translateY(0%);
}
@media screen and (max-width: 767px){.video-background .content {top:42%;}}
@media screen and (min-width: 768px){.video-background .content {top:49%;}}

/* MESSAGE //////////////////////////////////////////////////////////////////////////////////////// MESSAGE */
#message div article p + p{margin-top:1em;}
#message > div > article:nth-child(1) hr{margin:0.8em 0;}
#message .scrivenerWrap{display:flex;margin-bottom:0.6em;}
#message .scrivenerWrap > div:nth-child(1){width:32%;}
#message .scrivenerWrap > div:nth-child(2) > h4{padding-top:1.6em;vertical-align:bottom;}
#message .scrivenerWrap > div:nth-child(2) > h4 > span{font-size:72%;padding-right:1em;}
#message .scrivenerWrap > div:nth-child(2) > p{display:flex;}
#message .scrivenerWrap > div:nth-child(2) > p > span:nth-child(1){width:6em;font-weight:bold;padding-right:1em;}

@media screen and (max-width: 767px){
	#message > div > article:nth-child(2){padding-top: 1.6em;transition:all 0.4s;}
	#message .scrivenerWrap{gap:1em;}
	#message .scrivenerWrap > div:nth-child(2) > h4{font-size:100%;}
	#message .scrivenerWrap > div:nth-child(2) > p > span{font-size:72%;}
}
@media screen and (min-width: 768px){
	#message{position:relative;}
	#message .mainTitle{padding-top:4vw;}
	#message > div{display:flex;}
	#message div article:nth-child(1){width:47vw;padding-left:14vw;}
	#message .scrivenerWrap{gap:1.6em;}
	#message .scrivenerWrap > div:nth-child(2){width:auto;}
	#message .scrivenerWrap > div:nth-child(2) > h4{font-size:140%;}
	#message .tagline > h4{font-size:130%;}
	
	#message > div > article:nth-child(2){
		display:block;
		width:36vw;
		position:absolute;
		top:18vw;
		right:12vw;
		transition:all 0.4s;
	}
}

/* STAFF //////////////////////////////////////////////////////////////////////////////////////// COMPANY */
#staff > div{display:flex;flex-wrap:wrap;}
@media screen and (max-width: 767px){
	#staff{padding-top:8vw;}
	#staff > div{gap:4vw 6%;}
	#staff > div > div{flex-direction:column;font-size:70%;}
	#staff ul li span:nth-child(1){width:16%;}
	#staff ul li span:nth-child(2){width:76%;}
}
@media screen and (min-width: 768px){
	#staff > div{gap:4vw 6%;width:72%;margin-left:14%;}
	#staff .staff-pics{width:12vw;}
	#staff ul li span:nth-child(1){width:2.4em;}
	#staff ul li span:nth-child(2){width:18vw;}
}
#staff > div > div{display:flex;gap:1.6vw;width:47%;}
#staff h4{font-size:140%;margin-bottom:0.2em;}
#staff ul li{display:flex;gap:0.4em;}
#staff ul li span:nth-child(1){font-weight:bold;}

/* COMPANY //////////////////////////////////////////////////////////////////////////////////////// COMPANY */
#company{background:var(--Surface-F2);}
@media screen and (max-width: 767px){
	#company div article:nth-child(1){width:87.2vw;transition:all 0.4s;}
	.video-clip {width:100%;transition:all 0.4s;}
	#company div article:nth-child(2){margin-top:2.4vw;}
	#company div article:nth-child(2) ul{font-size:80%;}
}
@media screen and (min-width: 768px){
	#company{position:relative;}
	#company h2.mainTitle {position:absolute;top:3vw;left:38.6vw;}
	#company div{display:flex;}
	#company div article:nth-child(1){padding-left:6.8vw;}
	#company div article:nth-child(2){padding-top:7.6vw;width:32vw;}
	.video-clip {max-width:46vw;clip-path:inset(0% 16% 0% 16%);transition:all 0.4s;}
	#company div article:nth-child(2){margin-top:0;}
}

#company div article:nth-child(2) ul{line-height:140%;}
#company div article:nth-child(2) ul a:link,
#company div article:nth-child(2) ul a:visited,
#company div article:nth-child(2) ul a:active
{color:var(--Black);}

#company div article:nth-child(2) ul > li{display:flex;line-height:154%;}
#company div article:nth-child(2) ul > li > span{display:inline-block;}
#company div article:nth-child(2) ul > li > span:nth-child(1){width:24%;}

#company .googleMap{margin-top:2.4em;}

@media screen and (max-width: 767px){
	#company .googleMap iframe{width:100%;}
}
@media screen and (min-width: 768px){
	#company .googleMap iframe{width:72vw;height:16vw;margin-left:14vw;}
}

/* Strengths ///////////////////////////////////////////////////////*/
.strengthsList{position:relative;}
.strengthsList ul > li > img{width:1em;margin-right:0.2em;vertical-align:-0.2em;}
.strengthsList ul > li span{font-weight:bold;color:var(--Accent);}
@media screen and (max-width: 767px){
	.strengthsList ul{padding-bottom:1.4em;font-size:90%;}
	.strengthsWrap{display:flex;}
	.strengthsImg{width:33%;}
}
@media screen and (min-width: 768px){
	.strengthsList{margin:0 14vw;}
	.strengthsList ul{font-size:140%;padding-bottom:5em;}
	.strengthsList ul > li{line-height:240%;}

	.strengthsImg{position:absolute;display:block;width:20vw;}
	#strengths1{z-index:3;top:-3.2vw;right:6vw;}
	#strengths2{z-index:2;transform:translateY(-192%);right:0;}
	#strengths3{z-index:1;right:6vw;bottom:0;}
	#strengths4{z-index:3;top:-3.2vw;right:6vw;}
	#strengths5{z-index:2;transform:translateY(-192%);right:0;}
	#strengths6{z-index:1;right:6vw;bottom:0;}
}

/* BUY-LAND ///////////////////////////////////////////////////////*/
@media screen and (max-width: 767px){
	#points > div{padding:0.8em 0.8em 0.4em;}
}
@media screen and (min-width: 768px){
	.land-process{width:72%;margin-left:14vw;}
	#points > div{width:72%;margin-left:14%;padding:1.6em 2.4em 0.8em;	}
}
#points > div{
	background:url(../images/contents/points-bg.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
}
/* SELL-REPLACE ///////////////////////////////////////////////////////*/
#sell-replace{padding-bottom:6vw;background:var(--Surface-F2);}

/* BOTTOM-CONTENT ///////////////////////////////////////////////////////*/
.bottomCont{text-align:center;}
.bottomCont-Arrow{
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 80% 70%, 50% 100%, 20% 70%);
    clip-path: polygon(20% 0%, 80% 0%, 80% 70%, 50% 100%, 20% 70%);
	background: linear-gradient(to bottom, #F2F2F2, rgba(0, 172, 157, 0.6));
	position:relative;
	box-sizing:border-box;
}
.bottomCont > p{
	padding:0.4em 0;
	font-weight:bold;
	color:var(--Primary02);
	background:#FDFCF8;
	border:1px solid var(--Accent);
	letter-spacing:.1em;
}
@media screen and (max-width: 767px){
	.bottomCont{margin:0.4em 0 0;}
	.bottomCont-Arrow{width:24vw;height:8vw;margin-left:32vw;}
	.bottomCont > p{font-size:80%;border-radius:1.8vw;}
}
@media screen and (min-width: 768px){
	.bottomCont{width:72%;margin:2vw 0 0 14%;}
	.bottomCont-Arrow{width:16vw;height:6vw;margin-left:28vw;}
	.bottomCont > p{line-height:160%;font-size:180%;border-radius:0.8vw;}
}
/* == TTL COPY == */
.ttlCopy{border:1px solid var(--Gray-999);border-radius:0.8em;}
@media screen and (max-width: 767px){
	.ttlCopy{padding:0.8em 1em;font-size:80%;}
}
@media screen and (min-width: 768px){
	.ttlCopy{margin:0 14%;padding:1.6em;font-size:140%;line-height:180%;}
}
/* == Options == */
#options{width:100%;}
#options ul{display:flex;}
#options ul > h6{
	display:flex;
	align-items:center;
	justify-content:center;
	width:10%;
	text-align:center;
	color:var(--White);
	background:var(--Primary02);
	background:var(--Gray-AAA);
	letter-spacing:0.1em;
}
#options ul:nth-child(2) > h6,
#options ul:nth-child(3) > h6,
#options ul:nth-child(4) > h6
{border-bottom:1px solid var(--White);}
#options ul > li{
	width:45%;
	background:var(--White);
	border-right:1px solid var(--Gray-AAA);
	border-bottom:1px solid var(--Gray-AAA);
}
#options ul > li img{width:80%;}
#options ul:nth-child(1){align-items:stretch;background:var(--Gray-DDD);}
#options ul:nth-child(1) > h6{width:45%;padding:0.8em 0;background:var(--Primary02);}
#options ul:nth-child(1) > h6:nth-child(1){margin-left:10%;}
#options ul:nth-child(2){align-items:stretch;}
#options ul:nth-child(2) > li{display:flex;align-items:center;justify-content:center;}
@media screen and (max-width: 767px){
	#options ul > h6{font-size:70%;}
	#options ul > li{padding:0.4em;font-size:60%;}
	#options ul:nth-child(1) > h6{font-size:70%;padding:0.2em 0;}
	#options ul:nth-child(4) > li > p{padding-left:1em;text-indent:-1em;}
}
@media screen and (min-width: 768px){
	#options{padding:0 14%;}
	#options ul > h6{font-size:160%;}
	#options ul > li{padding:0.8em;}
}

/* FEES ///////////////////////////////////////////////////////*/
#fees{background:var(--Surface-F2);}
#fees > h3 {margin:0;}
#fees > div > section{width:50%;}

#fees > section{
	padding:0.8em 4% 1.2em;
	line-height:160%;
	background:var(--White);
}
#fees > section > h4{
	display:block;
	color:var(--sub-Color);
	text-align:center;
	font-weight:normal;
	font-size:120%;
	letter-spacing:0.08em;
	border:1px solid  var(--sub-Color);
	border-radius:0.4vw;
}
@media screen and (max-width: 767px){
	#fees{padding:0 6vw 6vw;}
	#fees > div > article > h4 {margin:0.4em 0 0.8em;font-size:80%;}
	#fees > section{font-size:60%;border-radius:1.8vw;}
	#fees > section > h4{width:14vw;margin-left:34vw;}
}
@media screen and (min-width: 768px){
	#fees{padding:0 12% 6vw;}
	#fees > div{display:flex;gap:4%;padding:0;}
	#fees > div > article > h4 {margin-bottom:0.8em;}
	#fees > section{margin-top:2.4em;font-size:120%;border-radius:0.8vw;}
	#fees > section > h4{width:8vw;margin:0 0 0.32em 30vw;}
}
#fees > section > p span{font-weight:bold;color:var(--sub-Color);}

/* INQUIRY ///////////////////////////////////////////////////////*/
.pref-list h6{margin-bottom:0}
.pref-list > section{display:flex;padding:1.6em 0;border-bottom:1px solid var(--Gray-AAA);}
.pref-list > section:nth-child(1){border-top:1px solid var(--Gray-AAA);}
@media screen and (max-width: 767px){
	.pref-list{font-size:70%;}
	.pref-list > section{flex-wrap:wrap;}
	.pref-list > section > div:nth-child(2){padding-left:0.8em;}
	.pref-list > section > div:nth-child(3){width:100%;padding-top:0.4em;}
	.pref-list > section > div.inputArea{width:100%;}
	.pref-list > section.btnArea{gap:1.6em;padding:1.6em 1.6em 0;}
	.btnArea > button{width:47%;padding:0.8em 0;}
}
@media screen and (min-width: 768px){
	.pref-list{width:72%;margin-left:14vw;}
	.pref-list > section > div:nth-child(1){width:17%;}
	.pref-list > section > div:nth-child(2){width:8%;}
	.pref-list > section > div:nth-child(3){width:75%;}
	.pref-list > section > div.inputArea{width:auto;}
	/* お名前欄の入力コンテナはメール欄と同じ75%幅に揃える */
	.pref-list > section.inq-Name > div.inputArea{width:75%;}
	.pref-list > section.btnArea{justify-content:flex-end;gap:1em;padding-right:1.6em;}
	.btnArea > button{width:12vw;padding:0.8em 0;}
}
.pref-list > section.btnArea{border-bottom:0;}
.btnArea > button.resetBtn{background:var(--Gray-CCC);}
.btnArea > button.submitBtn{color:var(--White);background:var(--Primary02);}
.btnArea > button:hover{opacity:0.6;}

/* 必須項目 */
#inquiry .mustAny{font-size:80%;border-radius:0.2vw;padding:0 0.2em;}
#inquiry .mustAny.must{color:#F65B5B;border:1px solid #F65B5B;}
#inquiry .mustAny.arbitrary{color:#5B8FF6;border:1px solid #5B8FF6;}
/**/
.inq-Description > div:nth-child(3) > div > label{display:flex;align-items:center;gap:0.4em;}
.inq-Description > div:nth-child(3) > div > label > input[type=checkbox]{
	width:max(1.1em, 16px);
	height:max(1.1em, 16px);
	min-width:max(1.1em, 16px);
	margin:0;
	flex-shrink:0;
}
.inq-Name{}
.inq-Email{}
.inq-Address{}
.inq-PhoneNum{}
.inq-Detail{}
.inq-Recaptcha{}
.inq-recaptcha-block{
	font-size:16px !important;
	line-height:1.5;
}
.inq-recaptcha-block > section.inq-recaptcha-row{
	display:flex;
	flex-wrap:wrap;
	padding:1.6em 0;
	border-bottom:1px solid var(--Gray-AAA);
	font-size:16px;
	width:100%;
	box-sizing:border-box;
}
.inq-recaptcha-block > section.inq-recaptcha-row > div:nth-child(2){
	padding-left:0.8em;
}
.inq-recaptcha-block > section.inq-recaptcha-row > div:nth-child(3){
	width:100%;
	padding-top:0.4em;
	flex-shrink:0;
}
.inq-recaptcha-block .inq-recaptcha-widget{
	width:304px;
	min-width:304px;
	max-width:304px;
	font-size:16px;
	flex-shrink:0;
}
.inq-recaptcha-block #recaptcha-container,
.inq-recaptcha-block #recaptcha-container > div,
.inq-recaptcha-block iframe{
	width:304px !important;
	min-width:304px !important;
	max-width:none !important;
	height:78px !important;
	transform:none !important;
	transform-origin:0 0 !important;
}
.pref-list.pref-list-actions > section.btnArea{
	border-top:0;
}
@media screen and (min-width: 768px){
	.inq-recaptcha-block{
		width:72%;
		margin-left:14vw;
	}
	.inq-recaptcha-block > section.inq-recaptcha-row > div:nth-child(3){
		padding-left:25%;
		box-sizing:border-box;
	}
	.pref-list.pref-list-actions{
		width:72%;
		margin-left:14vw;
	}
}
#inquiry #inquiry-form{position:relative;}
.inq-hp{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
	white-space:nowrap;
}

.inq-Name input{width:50%;}
.inq-Email input{width:50%;}
.inq-Detail textarea{height:10em;}

/* メールアドレス入力の背景色を常に白に（オートフィル含む） */
.inq-Email input[type="email"]{background:#fff;}
.inq-Email input[type="email"]:-webkit-autofill,
.inq-Email input[type="email"]:-webkit-autofill:hover,
.inq-Email input[type="email"]:-webkit-autofill:focus{
	-webkit-box-shadow:0 0 0px 1000px #fff inset !important;
	box-shadow:0 0 0px 1000px #fff inset !important;
	-webkit-text-fill-color:var(--Black);
}
@media screen and (max-width: 767px){
	.inq-Detail textarea{width:100%;}
	.inq-Address > div:nth-child(3) > p:nth-child(2){padding-bottom: 0.8em;}
	.inq-Address > div:nth-child(3) > #address{margin-top:0.4em;width: 80%;}
}
@media screen and (min-width: 768px){
	.inq-Detail textarea{width:80%;}
	.inq-Address > div:nth-child(3) > p:nth-child(2){margin-bottom: 0.8em;}
}
/* バリデーション */
.valiError .inputArea > div:nth-child(1),
.valiError input[type="text"],
.valiError input[type="email"],
.valiError input[type="tel"],
.valiError textarea
{border:2px solid var(--Warning);}

.valiText{display:none;color:var(--Warning);}

/* 表示時 */
.valiError .valiText {
	display:inline-block;
	max-width: 26rem;
	padding:0.8em 0.4em 0.4em;
	color:var(--Warning);
	line-height: 1.4;
	word-break: break-word; /* 長文対応 */
}

/* 問い合わせ確認モーダル：本文の改行を反映 */
#inquiryConf-Modal #m_message{white-space:pre-wrap;}

/* FLASH（送信完了等）を見出しカラムに制限せず全幅で1行表示 */
.pref-list > section.inq-Flash{display:block;}
.pref-list > section.inq-Flash > .flash{width:100%;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pref-list > section.inq-Flash > .flash.success{color:var(--Primary02);}
.pref-list > section.inq-Flash > .flash.error{color:#F65B5B;}

/* 氏名（inq-Name）はエラー文言を入力ボックスの下に配置 */
.inq-Name.valiError .inputArea{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}
.inq-Name.valiError .valiText{
	display:block;
	margin-top:0.4em;
}