@charset "UTF-8";
/*================
qs-garden.css
================*/

/* garden_lead ================*/
#garden_lead{padding: 0 0 30px;}
.garden_lead_wrap{max-width: 1400px; margin: 0 auto; padding: 0 15px; text-align: center;}
.garden_lead_wrap h2{font-family: var(--font_serif); font-size: 2.8rem; letter-spacing: 2px; margin-bottom: 40px;}

.garden_lead_logo{max-width: 1000px; margin: 0 auto 40px;
    justify-content: center; align-items: center;}
.garden_lead_logo figure{width: 20%; text-align: center; padding: 0 15px;}
.garden_lead_logoText{width: 80%; text-align: left; border-left: 1px solid #231815; padding-left: 40px;}
.garden_lead_logoText p{font-size: 1.5rem; line-height: 2;}

.garden_development{text-align: center; margin-top: 80px; padding: 30px 0 15px;
    border-top: 1px solid #231815; border-bottom: 1px solid #231815;}
.garden_development h3{font-family: var(--font_serif); font-size: 3.4rem; letter-spacing: 3px; margin-bottom: 20px; color: #4a723c;}
.garden_development p{font-size: 1.2rem; line-height: 2.2; margin-bottom: 20px;}

.garden_development_bnr{max-width: 500px; width: 100%; margin: 40px auto 0;}
.garden_development_bnr a{display: block;}
.garden_development_bnr a span{display: block; text-align: center; margin-top: 10px; font-size: 1.6rem; color: #000; text-decoration: underline;}

@media screen and (max-width: 640px){
    .garden_lead_wrap h2{font-size: 2.0rem; letter-spacing: 0; margin-bottom: 20px;}

    .garden_lead_logo figure{width: 100%; margin-bottom: 15px;}
    .garden_lead_logoText{width: 100%; border-left: none; padding-left: 0;}

    .garden_development{margin-top: 40px; padding: 20px 0;}
    .garden_development h3{font-size: 2.5rem; margin-bottom: 15px;}
    .garden_development p{font-size: 1.4rem; text-align: left;}

    .garden_development_bnr{margin: 20px auto 0;}
    .garden_development_bnr p{font-size: 1.4rem;}
}

/* garden_facility ================*/
#garden_facility{padding: 40px 0;}
#garden_facility .anno{font-size: 1.2rem;}

.g_facility_lead{background: #978d6a; padding: 30px; text-align: center; margin-bottom: 20px;}
.g_facility_lead_top{border-bottom: 1px solid #fff;
    padding-bottom: 20px; margin-bottom: 20px;}
.g_facility_lead_top h3{font-family: var(--font_serif); color: #fff; font-size: 3.5rem; letter-spacing: 4px; margin-bottom: 25px;}
.g_facility_lead_top p{color: #fff; font-size: 1.8rem;}

.g_facility_lead_bottom{text-align: left; justify-content: space-between;}
.g_facility_lead_left{width: 55%; padding-right: 20px;}
.g_facility_lead_right{width: 45%; padding-left: 20px; border-left: 1px solid #fff;}
.g_facility_lead_bottom h4{color: #fff; font-size: 1.8rem; letter-spacing: 2px; margin-bottom: 15px;}
.g_facility_lead_right p{color: #fff; font-size: 1.4rem; margin-bottom: 20px;}

.g_facility_ictWrap{justify-content: space-between; align-items: center;}
.g_facility_ictImg{width: 44%;}
.g_facility_ictText{width: 52%;}
.g_facility_ictText li{background: #fff; color: #978d6a; font-size: 1.5rem; text-align: center; padding: 13px;}
.g_facility_ictText li + li{margin-top: 10px;}

.g_facility_wrap{margin-top: 60px; justify-content: space-between;}
.g_facility_box{width: 31.5%; margin-bottom: 40px;}
.g_facility_box h3{margin: 10px 0; font-size: 2.2rem;}
.g_facility_box h3 small{display: block; font-size: 1.8rem;}
.g_facility_box p{font-size: 1.5rem; line-height: 1.8;}

@media screen and (max-width: 960px){
    .g_facility_lead_left{width: 100%; padding-right: 0; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #fff;}
    .g_facility_lead_right{width: 100%; padding-left: 0; border-left: none;}
}
@media screen and (max-width: 640px){
    #garden_facility{padding: 40px 0 10px;}
    .g_facility_lead{padding: 15px;}
    .g_facility_lead_top h3{font-size: 2.4rem; letter-spacing: 1px; margin-bottom: 15px;}
    .g_facility_lead_top p{font-size: 1.4rem; text-align: left;}
    
    .g_facility_lead_bottom h4{font-size: 1.5rem;}
    .g_facility_ictImg{width: 100%; margin-bottom: 10px;}
    .g_facility_ictText{width: 100%;}

    .g_facility_wrap{margin-top: 40px;}
    .g_facility_box{width: 100%;}
    .g_facility_box h3{font-size: 2rem;}
    .g_facility_box h3 small{font-size: 1.6rem;}
    .g_facility_box p{font-size: 1.4rem;}
}

/* garden_qsgarden ================*/
#garden_qsgarden{background: #f1f3ec; padding: 80px 0 100px;}

.qsgarden_image{margin-bottom: 100px; text-align: center;}
.qsgarden_copy{margin-bottom: 70px; text-align: center;}
.qsgarden_figure{margin-bottom: 180px; text-align: center;}
.qsgarden_figure h3{color: #4a723c; font-size: 3.2rem; margin-top: 60px;}

.factor_wrap{border: 5px solid #ccc; background: #fff; position: relative;}
.factor_wrap + .factor_wrap{margin-top: 70px;}
.factor_icon{background: #ccc; color: #fff; font-family: 'Noto Sans JP';
    width: 120px; height: 120px; border-radius: 60px;
    position: absolute; top: 0; left: 0; transform: translate(-50%,-50%);
    display: flex; justify-content: center; align-items: center; flex-direction: column;}
.factor_icon small{font-size: 2rem; font-weight: bold; line-height: 1; display: block;}
.factor_icon b{font-size: 6rem; line-height: 1; display: block;}
.factor_box{justify-content: space-between;}
.factor_illustration{width: 20%; padding: 15px; display: flex; justify-content: center; align-items: center;}
.factor_text{width: 50%; padding: 30px;}
.factor_img{width: 30%; padding: 30px 30px 30px 0; display: flex; justify-content: center; align-items: center;}
.factor_text h4{font-family: 'Noto Sans JP'; font-size: 3.5rem; margin-bottom: 10px;}
.factor_text p{font-size: 1.6rem;}
.factor_img ul{justify-content: space-between;}
.factor_img ul li{width: 48%;}

.factor_wrap.factor_wrap01{border-color: #7ac9cd;}
.factor_wrap01 .factor_icon{background: #7ac9cd;}
.factor_wrap01 .factor_illustration{background: #7ac9cd;}
.factor_wrap.factor_wrap02{border-color: #7fc054;}
.factor_wrap02 .factor_icon{background: #7fc054;}
.factor_wrap02 .factor_illustration{background: #7fc054;}
.factor_wrap.factor_wrap03{border-color: #b9d431;}
.factor_wrap03 .factor_icon{background: #b9d431;}
.factor_wrap03 .factor_illustration{background: #b9d431;}

@media screen and (max-width: 960px){
    .qsgarden_figure{margin-bottom: 80px;}
    .factor_text h4{font-size: 2.5rem; margin-bottom: 15px;}
    .factor_text p{font-size: 1.4rem;}
}
@media screen and (max-width: 640px){
    #garden_qsgarden{padding: 40px 0 50px;}
    .qsgarden_image,
    .qsgarden_copy{margin-bottom: 40px}
    .qsgarden_figure{margin-bottom: 50px;}
    .qsgarden_figure h3{font-size: 2.2rem; line-height: 1.8; margin-top: 20px;}

    .factor_wrap{}
    .factor_wrap + .factor_wrap{margin-top: 40px;}
    .factor_icon{width: 80px; height: 80px;}
    .factor_icon small{font-size: 1.4rem;}
    .factor_icon b{font-size: 4rem;}
    .factor_illustration{width: 100%; margin-bottom: 15px;}
    .factor_text{width: 100%; padding: 0 15px; margin-bottom: 15px;}
    .factor_img{width: 100%; padding: 0 15px 15px;}
}



/* concept_movie_area ========================*/
#concept_movie_area{background: url(../../img/pages/top/concept_movie_bk.jpg); background-size: cover; padding: 70px 0;}
#concept_movie_area .inner{max-width: 1360px;}

#concept_movie_area h2{font-family: var(--font_serif); text-align: center; color: #fff; font-size: 3.1rem; font-weight: 400; margin-bottom: 30px;}
#concept_movie_area h2 span:nth-child(1){font-size: 3.6rem; letter-spacing: 2px; padding-right: 90px; position: relative;}
#concept_movie_area h2 span:nth-child(1)::before,
#concept_movie_area h2 span:nth-child(1)::after{content: ""; background: #fff;}
#concept_movie_area h2 span:nth-child(1)::before{width: 70px; height: 1px; display: block; position: absolute; right: 10px; top: 25px; transform: rotate(45deg);}
#concept_movie_area h2 span:nth-child(1)::after{width: 1px; height: 70px; display: block; position: absolute; right: 50px; top: -10px; transform: rotate(45deg);}
#concept_movie_area h2 span:nth-child(2){font-size: 3.6rem; letter-spacing: 2px; padding-right: 80px;}

.concept_movie_wrap{flex-direction: row-reverse; justify-content: space-between; align-items: center;}
.concept_movie_text{width: calc(100% - 760px); display: flex; flex-direction: column; align-items: center;}
.concept_movie_text p{color: #fff; font-size: 2.0rem; line-height: 2.5;}
.concept_movie_img{width: 760px; text-align: center; padding-right: 30px;}
.concept_movie_img .concept_movie_iframe{display: inline-block; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}


@media screen and (max-width: 1360px){
	#concept_movie_area h2{font-size: 3rem;}
	#concept_movie_area h2 span:nth-child(1){font-size: 3.4rem;}
	#concept_movie_area h2 span:nth-child(2){font-size: 3.4rem; padding-right: 40px;}
}
@media screen and (max-width: 1300px){
	#concept_movie_area h2{font-size: 2.5rem;}
	#concept_movie_area h2 span:nth-child(1){font-size: 2.8rem;}
	#concept_movie_area h2 span:nth-child(2){font-size: 2.8rem;}

	.concept_movie_text{width: calc(100% - 660px);}
	.concept_movie_img{width: 660px;}
}
@media screen and (max-width: 1100px){
	#concept_movie_area h2{font-size: 2rem;}
	#concept_movie_area h2 span:nth-child(1){font-size: 2.3rem;}
	#concept_movie_area h2 span:nth-child(2){font-size: 2.3rem;}
	
	.concept_movie_text{width: calc(100% - 560px);}
	.concept_movie_img{width: 560px;}
}
@media screen and (max-width: 960px){
	#concept_movie_area{padding: 70px 0 75px;}
	#concept_movie_area h2{font-size: 2.4rem;}
	#concept_movie_area h2 span:nth-child(1){font-size: 3rem; display: block; margin-bottom: 10px; padding: 0 0 30px;}
	#concept_movie_area h2 span:nth-child(2){font-size: 3rem; display: block; margin-bottom: 10px; padding-right: 0;}
	#concept_movie_area h2 span:nth-child(1)::before{width: 25px; height: 1px; top: auto; bottom: 12px; right: 0; left: 0; margin: auto;}
	#concept_movie_area h2 span:nth-child(1)::after{width: 1px; height: 25px; top: auto; bottom: 0; right: 0; left: 0; margin: auto;}

	.concept_movie_wrap{flex-direction: column-reverse;}
	.concept_movie_text{width: 100%; text-align: center; margin: 30px 0;}
	.concept_movie_img{width: 100%; padding: 0;}
}
@media screen and (max-width: 640px){
    #concept_movie_area{padding: 40px 0;}
	#concept_movie_area h2{margin-bottom: 25px; line-height: 1.2;}
	#concept_movie_area h2 span:nth-child(1),
	#concept_movie_area h2 span:nth-child(2){font-size: 2.1rem; letter-spacing:0;}
	/*#concept_movie_area h2 span:nth-child(1){padding-bottom: 0;}
	#concept_movie_area h2 span:nth-child(2){padding-left: 12px;}
	#concept_movie_area h2 span:nth-child(1)::before{
		width: 35px; height: 1px; top: auto; bottom: -24px; right: auto; left: 0; margin: auto;}
	#concept_movie_area h2 span:nth-child(1)::after{
		width: 1px; height: 35px; top: auto; bottom: -42px; right: auto; left: 16px; margin: auto;}*/
	.concept_movie_text{margin: 20px 0 0;}
	.concept_movie_text p{font-size: 1.4rem; line-height: 2.2;}
}