@charset "UTF-8";

/*!
Theme Name: グッドワンライフ
Description: Cocoon専用の子テーマ
Theme URI: https://devotion-co.jp/
Author: 株式会社デボーション
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.orange{
	font-size: 20px;
	color: #fd7e00;
}

.bar{
	position: fixed;
	top: 50px;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 1200px;
	width: 80%;
	background-color: rgb(255 255 255 / 75%);
	border-radius: 1em;
	height: 50px;
	color: #000;
	padding-top: 0.8em;
	z-index: 1000;
}

.tel{
	display: none;
}

.bar img{
    width: 130px;
    position: fixed;
    margin-left: 1%;
    margin-top: -5px
}

.bar a{
	color: #000;
	font-weight: bold;
	font-size: small;
}
.bar a:nth-child(2){
	position: absolute;
	right: 51%;
}
.bar a:nth-child(3){
	position: absolute;
	right: 41%;
}
.bar a:nth-child(4){
	position: absolute;
	right: 29%;
}
.bar a:nth-child(5){
	position: absolute;
	right: 19%;
}
.bar a:nth-child(6){
	position: absolute;
	right: 5%;
}

input[type=submit]{
	background: #be9a5c;
	color: #fff;
	font-size: x-large;
	width: 50%;
	margin: 0 auto;
	display: block;
}

#map{
	width: 100%;
	height: 350px;
	margin:50px 0;
}

.g_map{
	width: 100%;
	height: 400px;
	margin-top: 15px;
}

#form{
    background-image: url('img/common/form_bk.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    padding-bottom: 50px;
	overflow:hidden;
	color: #fff;
	font-family: serif;
	text-align: justify;
}

#form .req{
	color: #019de7;
	font-size: small;
	font-weight: bold;
}

.wpcf7{
	padding: 25px 10%;
}

.inner{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	display: block;
	position: relative;
}

.list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: unset;
	margin-bottom: 25px;
	position: relative;
}
.list .item{
	width: 50%;
}

.title{
	color: #000;
	font-weight: bold;
	font-size: xx-large;
	text-align: center;
	margin: 50px auto 0;
	font-family: serif;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #11a5e7 0%, #cccccc 100%);
    border-image-slice: 1;
	max-width: fit-content;
}

.sub_title{
	color: #11a5e7;
	font-weight: bold;
	font-size: large;
	text-align: center;
	padding-bottom: 25px;
}

.sec_title{
	color: #fff;
	font-weight: bold;
	font-size: xx-large;
	text-align: center;
	margin: 50px auto 0;
	font-family: serif;
}

.ver_title{
	color: #000;
	font-weight: bold;
	font-size: xx-large;
	writing-mode: vertical-rl;
	font-family: serif;
	position: absolute;
	line-height: 1em;
}

#services .list .item{
	width: 30%;
}


#services .list .item:nth-child(2){
	margin: 0 5%;
}

#about{
    background-image: url('img/top/about_bk.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
	padding-bottom: 50px;
	overflow:hidden;
}

#about .inner{
	padding: 50px 30px;
	margin: 50px auto;
	background-color: rgb(255 255 255 / 75%);
}

#about table{
	margin-left: 15%;
	width: 80%;
}

#about table tr{
	border-bottom: 1px dotted #aaa;
}

#about table th{
	font-weight: bold;
}

.about_footer{
	position: relative;
}
.about_footer .hc{
	width: calc(100% - 441px);
	height: 439px;
	object-fit: cover;
}

.about_footer a img{
	position: absolute;
	right: 0;
	top: 0;
}

#greeting{
    background-image: url('img/top/greeting_bk.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    height: 700px;
	overflow:hidden;
	color: #fff;
	font-family: serif;
	text-align: justify;
}

#greeting .list .item{
	width: 45%;
	font-size: xx-large;
	margin-top: 200px;

}

.greeting_new_pc,
.greeting_new_sp{
	width: 100%;
}

.greeting_new_sp{
	display: none;
}

#greeting .list .item:nth-child(2){
	font-size: large;
	margin-top: 150px;
	margin-left: 5%;
}

#greeting .list .item .right{
	text-align: right;
}

#news{
	margin: 100px 0;
}

#news .news_filed{
	margin-left: 10%;
}

#privacy{
	background: #ededed;
	padding: 50px 0;
}

#propertylist,
#property{
	background: #2e3441;
	color: #fff;
}

#propertylist .list .item{
	width: 20%;
	margin: 50px 2.5%;
}


#property .list .item{
	width: 30%;
	margin: 25px 1%;
	text-align: center;
}

#propertylist .list .item img{
	width: 100%;
	height: 200px;
	object-fit: scale-down;
}

.property_title{
	height: 60px;
}

.property_silde{
	position: relative;
}
.property_catch{
	position: absolute;
	left: 5%;
	top: 25px;
	z-index: 100;
	font-weight: bold;
	font-size: xx-large;
	-webkit-text-stroke: 1px black;
	font-family: serif;
}

#propertylist_fv,
#property_fv,
#landutilization_fv,
#sellsupport_fv{
	background-image: url('img/property-list/fv.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
	background-size: cover;
	overflow:hidden;
	height: 500px;
	color: #fff;
	font-family: serif;
	text-align: center;
	position: relative;
}

.property_sv{
	background-image: url('img/property/charm_bk.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
	background-size: cover;
	overflow:hidden;
	height: 200px;
	color: #fff;
	font-family: serif;
	text-align: center;
	position: relative;
}


#property_fv{
	background-image: url('img/property/fv.jpg');
}

#charm ul{
	border: 1px solid #be9a5c;
	margin: 25px auto;
	padding: 1% 15px;
	display: flex;
	flex-wrap: wrap;
	height: 280px;
	position: relative;
}

#charm li:nth-child(2){
	margin-bottom: -100px;
	width: 60%;
}
#charm li:nth-child(4){
	width: 60%;
}

#charm li:nth-child(3){
	width: 35%;
	position: absolute;
	right: 1%;
}

#charm .charm_title{
	color: #fff;
	font-size: xx-large;
	font-family: serif;
	border-bottom: 1px solid #fff;
}

#charm .detail{
	
}

.charm_mark{
	position: absolute;
	top: -20px;
	left: 1%;
}

#landutilization_fv{
	background-image: url('img/landutilization/fv.jpg');
}
#sellsupport_fv{
	background-image: url('img/sellsupport/fv.jpg');
	color: #000;
}

#sellsupport_fv .fv_text{
	color: #000;
	top: 200px;
	left: 35%;
	text-align: justify;
}
#sellsupport_fv .fv_subtext{
	position: absolute;
	color: #000;
	top: 300px;
	left: 14.5%;
	font-size: large;
	text-align: justify;
}
	



#worries,
#intro,
#worries_sell{
	background-image: url('img/landutilization/worries.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
	background-size: cover;
	height: 400px;
	color: #fff;
	font-family: serif;
	position: relative;
}
#worries{
		font-size: xx-large;
}
#intro{
	z-index: 10;
	background-image: url('img/landutilization/intro_bk.jpg');
	font-family: serif;	
    background-size: cover;
}
#worries_sell{
	background-image: url('img/sellsupport/worries.jpg');
	font-size: xx-large;
	color: #000;
	font-weight: bold;
	
}

#basis{
	position: relative;
	background-image: url('img/landutilization/basis_bk.jpg');
    background-repeat: repeat;	
}

#intro .maeda1{
	position: absolute;
	right: 0;
	top: -25px;
	width: 25%;
}

#intro .heading{
	padding: 100px 1em 50px 0;
	font-size: x-large;
	font-weight: bold;
}

#intro .detail{
	padding-left: 1em;
}

.maeda2{
	position: absolute;
	left: 0;
	top: -25px;
	width: 25%;
}
.maeda3{
	position: absolute;
	left: 0;
	top: -25px;
	width: 25%;
}

#worries div,
#worries_sell div{
	padding: 10px 0;
}

#basis .inner .point{
	font-size: xx-large;
	padding: 10px 0;	
}

.reason{
	text-align: center;
	font-size: xx-large;
	position: relative;
	z-index: 30;
	background-color: #203142;
}

#worries .inner div:nth-child(1),
#worries_sell .inner div:nth-child(1){
	padding-top: 50px;
	margin-left: 35%;
}


#basis .inner .point div:nth-child(1){
	margin-top: 50px;
	margin-left: 35%;
	border-bottom: 1px dashed #ccc;
	padding-bottom: 15px;
}

#basis .inner .point div:nth-child(1)::before,
#basis .inner .point div:nth-child(2)::before,
#basis .inner .point div:nth-child(3)::before{
 	content: '';
 	display: inline-block;
 	width: 115px;
 	height: 78px;
	margin-right: 15px;
	vertical-align: middle;
	background-image: url('img/landutilization/point1.png');
    background-position: center;
    background-size: contain;
}
#basis .inner .point div:nth-child(2)::before{
	background-image: url('img/landutilization/point2.png');
}
#basis .inner .point div:nth-child(3)::before{
	background-image: url('img/landutilization/point3.png');
}

#worries div:nth-child(2),
#worries_sell div:nth-child(2){
	margin-left: 40%;
	border-top: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
}
#worries div:nth-child(3),
#worries_sell div:nth-child(3){
	margin-left: 45%;
}

#basis .inner .point div:nth-child(2){
	margin-left: 40%;
	border-bottom: 1px dashed #ccc;
	padding: 20px 0 15px 0;
}

#basis .inner .point div:nth-child(3){
	margin-left: 45%;
	padding-top: 20px;
}

#case .inner{
	background-color: #242934;
}

#case li{
	width: 50%;
}

#case .plan{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
#case .plan li{
	width: 33%;
	text-align: center;
	font-size: xx-large;
}

#case .plan li:nth-child(1){
	background-color: #fff;
	color: #000;
}

#case .plan li:nth-child(1) span{
	background-color: #a0a0a0;
	font-size: x-large;
	color: #fff;
	padding: 2px;
}

#case .plan li:nth-child(2){
	color: #fff;
	font-weight: bold;
	font-family: 'circular';
}

#case .plan li:nth-child(3){
	background-color: #fff;
	color: #009fe4;
}

#case .plan li:nth-child(3) span{
	background-color: #9e866d;
	font-size: x-large;
	color: #fff;
	padding: 2px;
}


#case .result{
	font-size: xxx-large;
	text-align: center;
}	

#flow{
	background-color: #2a394b;
}


.fv_text{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-size: xxx-large;
	font-family: serif;
}
#propertylist .list .item a{
	text-align: center;
	color: #fff;
}

.state{
	width: 65%;
	border-spacing: 0 10px;
	border-collapse: separate;
}

#propertylist .state{
	width: 100%;
	border-top: 1px solid #fff;
}

.state tr{
	margin: 1px 0;
}
.state th{
	width: 20%;
	text-align: center;
	background-color: #6f7e98 !important;
	height: 60px;
}

#propertylist .state th{
	width: 30%;
	font-size: small;
}

#propertylist .state td{
	font-size: small;
}

.room_title{
	font-family: serif;
	font-size: xx-large;
	border-left: 3px solid #019de7;
	margin: 1em 0 1em 5%;
	padding-left: 5%;
}
.room_map{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 35%;
}

.interview{
	position: relative;
	background-color: #dbd4ce;
	color: #3d2e1b;
	padding: 25px 2.5%;
	height: 407px;
}

.interview .qa_q{
	font-size: large;
	font-weight: bold;
}

#question .qa_q,
#question .qa_a{
    padding: 20px 0;
	background-color: #495160;
}

#question .aa_a{
    padding: 10px 1%;
	background-color: #495160;	
}

#question .aa_q:nth-child(odd){
	background-color: #5e6269;
}

#question .qa_a{
    border-top: 1px solid #aaa;
}

#question .qa_q:nth-child(3),
#question .qa_a:nth-child(4){
	background-color: #5e6269;
}


.qa_q::before,
.qa_a::before{
    content: 'Q';
    display: inline-block;
    width: 50px;
    height: 50px;
    color: #019de7;
    font-size: xx-large;
    margin-right: 15px;
    vertical-align: middle;
    background-position: center;
    background-size: contain;
    text-align: center;
    font-weight: bold;
    font-family: serif;
    position: relative;
}

.interview .qa_q::before,
.interview .qa_a::before{
    background-color: #fff;
}

.interview .qa_a{
	font-size: large;
	padding: 10px 0;
}

.qa_a::before,
.interview .qa_a::before{
    content: 'A';
    color: #9c876b;
}

.interview img{
	position: absolute;
	right: 0;
	top: 0;
}

#propertylist .list .item a .link{
	border: 1px solid;
}

#please_contact{
	background-color: #2a394b;
}


#please_contact  .list{
	margin-bottom: 0;
}
#flow .list{
	height: 250px;
}

#flow .list li{
	position: absolute;
}

#flow .list li:nth-child(1){
	top: 0;
	left: 0;
	border-radius: 1em;
	background: #816848;
	color: #fff;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	text-align: center;
	padding-top: 2em;
}

#flow .list li:nth-child(2){
	top: 0;
	right: 0;
}
#flow .list li:nth-child(2) img{
	border-radius: 1em;
}

#flow .list li:nth-child(3){
	top: 0;
	left: 15%;
	border-radius: 1em;
	color: #816848;
	font-size: x-large;
	font-weight: bold;
	font-family: serif;
}

#flow .list li:nth-child(4){
	top: 50px;
	left: 15%;
	border-radius: 1em;
	max-width: 50%;
}

.sp_only{
	display: none;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	.sp_only{
		display: initial;
	}	
	
	.body{
		font-size: 3.5vw;
		margin: 0 auto;
	}
	
	.tel{
		display: block;
		position: fixed;
		width: 10%;
		right: 10%;
		top: 50px;
		z-index: 1000;
	}
	.list .item{
		width: 100%;
	}
	.title{
		font-size: 5.5vw;
		margin: 25px auto 0;
	}
	.sub_title{
		font-size: 3vw;
	}
	
	.sec_title{
		font-size: 6vw;
	}
	.ver_title{
		font-size: 5vw;
	}
	
	#form{
		height: auto;
	}
	
	#services .list .item{
		width: 90%;
		margin: 10px auto;
	}
	
	#services .list .item:nth-child(2){
		/* margin: 10px 0;*/
	}	
	
	#greeting{
		background-image: url('img/top/greeting_bk_sp.jpg');
	}


	.greeting_new_pc{
		display: none;
	}

	.greeting_new_sp{
		display: initial;
	}
	
	#greeting .list .item{
		width: 90%;
		margin: 50px auto 25px;
		font-size: 6vw;
	}
	#greeting .list .item:nth-child(2){
		width: 80%;
		font-size: 4vw;
		margin: 0 auto;
	}
	#about{
		background-size: initial;
	}
	
	#news{
		margin: 0 auto;
	}
	
	#propertylist_fv,
	#property_fv{
		background-image: url('img/property-list/fv_sp.jpg');
		height: calc(100vw * 750 / 739);
	}
	#property_fv{
		background-image: url('img/property/fv_sp.jpg');		
	}
	#landutilization_fv{
		background-image: url('img/landutilization/fv_sp.jpg');
	}
	#sellsupport_fv{
		background-image: url('img/sellsupport/fv_sp.jpg');
	}
	
	#sellsupport_fv .fv_text{
		color: #fff;
		text-align: center;
		left: 50%;
	}
	#sellsupport_fv .fv_subtext{
		color: #fff;
        bottom: 50px;
        font-size: 4.5vw;
		text-align: center;
		left: 10%;
		width: 80%;
	}
	
	
	#worries,
	#worries_sell{
		background-image: url('img/landutilization/worries_sp.jpg');
		font-size: 4vw;
		height: auto;
	}
	#worries_sell{
		background-image: url('img/sellsupport/worries_sp.jpg');
	}
	#worries .inner div:nth-child(1),
	#worries_sell .inner div:nth-child(1){
		margin-top: 10px;
		margin-left: 20%;
	}
	#worries div:nth-child(2),
	#worries_sell div:nth-child(2){
		margin-left: 25%;
	}
	#worries div:nth-child(3),
	#worries_sell div:nth-child(3){
		margin-left: 30%;
}
	
	.fv_text{
		font-size: 9vw;
	}
	#propertylist .list .item{
		/*width: 45%;*/
		width: 90%;
	}
	#propertylist .list .item img{
		/*height: 200px;*/
		height: 220px;		
	}
	
	#property .list .item{
		width: 100%;
	}

	#charm ul{
		height: auto;
	}	
	
	#charm li:nth-child(2),
	#charm li:nth-child(3),
	#charm li:nth-child(4){
		width: 100%;
	}

	#charm li:nth-child(2){
		margin: 10px auto 0;
	}	
	
	#charm li:nth-child(3){
		position: static;
        width: 90%;
        margin: 15px auto;
	}

	#charm .charm_title{
		color: #fff;
		font-size: xx-large;
		font-family: serif;
		border-bottom: 1px solid #fff;
	}	


	.state{
		width: 100%;
		border-spacing: 0 10px;
		border-collapse: separate;
	}
	.state tr{
		margin: 1px 0;
	}
	.state th{
		width: 20%;
		background-color: #6f7e98 !important;
	}
	.room_title{
		margin: 1em 0;
		font-size: 6vw;
	}
	.room_map{
		position: relative;
		width: 100%;
	}
	
	#case .list{
		margin-bottom: 0;
	}
	
	#case li{
		width: 100%;
	}

	#case .result{
		font-size: 8vw;
	}	

	#case .plan li{
		width: 100%;
		font-size: 5vw;
	}
	
	#case .plan li span:nth-child(1),
	#case .plan li span:nth-child(3){
		font-size: 4vw;
	}
	
	#case .plan li span:nth-child(2){
		font-size: 6vw;
	}
	
	.interview{
		height: auto;
		padding: initial;
	}
	
	.interview img{
		position: static;
		margin-bottom: 25px;
	}
	
	.interview .qa_q,
	.interview .qa_a{
		font-size: 3vw;
	}
		
	.interview .qa_q::before,
	.interview .qa_a::before{
		width: 10vw;
		height: 10vw;
		font-size: 6vw;
		margin-right: 1%;
		margin-left: 2.5%;
	}
	
	#intro{
		height: 300px;
	}
	
	#intro .heading{
		font-size: 6vw;
		width: 70%;
		padding: 50px 1em 25px 0;
	}
	
	#intro .detail{
		padding-left: 0;
		font-size: 2.5vw;
		width: 80%;
	}
	
	#intro .maeda1{
		width: 50%;
		top: 0;
		z-index: -1;
	}
	
	.reason{
		font-size: 6vw;
		margin-left: 50%;
		text-align: center;
		padding: 50px 0;
	}
	
	.maeda2{
		font-size: 6vw;
		z-index: -1;
		left: -100%;
		width: 100%;
	}
		
	
	#please_contact  .inner,
	#please_contact  .list .item{
		width: 100%;
	}

	#worries div:nth-child(2){
		border-top: initial;
		border-bottom: initial;
	}
	
	#basis{
		z-index: 100;
	}
	
	#basis .inner .point{
		font-size: 5vw;
	}
	
	#basis .inner .point div:nth-child(1),
	#basis .inner .point div:nth-child(2),
	#basis .inner .point div:nth-child(3){
		margin-left: 0;
	}	
	
	#basis .inner .point div:nth-child(1)::before,
	#basis .inner .point div:nth-child(2)::before,
	#basis .inner .point div:nth-child(3)::before{
		width: 77px;
		height: 52px;
		margin-right: 15px;
	}
	
	#flow .list{
		height: auto;
	}	
	
	#flow .list li{
		position: static;
	}

	#flow .list li:nth-child(1){
		top: 0;
		left: 0;
		background: #816848;
		color: #fff;
		width: 75px;
		height: 75px;
		position: absolute;
	}

	#flow .list li:nth-child(2){
		margin: 25px auto 10px;
	}

	#flow .list li:nth-child(3){
		border-radius: 1em;
		font-size: x-large;
	}

	#flow .list li:nth-child(4){
		border-radius: 1em;
		max-width: initial;
		padding-bottom: 50px;
	}
	
	#propertylist .list .item .property_title{
		font-size: 5vw;
		height: 35px;
	}
	
	.fv_text{
		width: 75%;
	}
	
	.pc_only,
	.bar{
		display: none;
	}	
	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}