@charset "UTF-8";
/* CSS Document */

#design{
	height: 100%;
	display: flex;
	flex-direction: column;	
}
/* for IE */
@media screen and (max-width: 768px){
_:-ms-lang(x)::-ms-backdrop, #design{
		display: block; } }
/* END for IE */

#design .main_design{
	flex-grow: 1;
	color: #fff;
	padding-bottom: 30%;
}
#design .design_main_ttl_box{
	height: 150px;
	text-align: center;
	color: #fff;
	background:url("../../imgs/design/design_img.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#design .design_main_ttl{
	font-size: 20px;
	width: 100%;
	margin: 0 auto;
	position:absolute;
	bottom:1.25em;
}

#design_tab_container {
  padding-top: 100px; }
  #design_tab_container h2 {
    color: #fff;
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px; }
		@media screen and (max-width: 768px){
			#design_tab_container h2{
			    font-size: 110%; } }

/* for IE*/
_:-ms-lang(x)::-ms-backdrop, .design #design_tab_container{
	margin-bottom: 30px;
}
/* END for IE*/
  #design_tab_container .group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 20px; }
    #design_tab_container .group li {
      width: calc(50% - 20px);
      max-width: 470px;
      height: 60px;
      color: #2780ba;
      margin-bottom: 20px;
      background-image: url(../imgs/parts/btn_arrow_01.png);
      background-position: top 50% right 20px;
      background-repeat: no-repeat;
      background-color: #fff;
      box-sizing: border-box; }
      @media (max-width: 970px) {
        #design_tab_container .group li {
          margin: 10px; } }
      @media (max-width: 768px) {
        #design_tab_container .group li {
          width: 100%;
          margin: 10px auto; } }
      #design_tab_container .group li a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        box-sizing: border-box; }
        #design_tab_container .group li a:hover {
          background: #ffff64;
          background-image: url(../imgs/parts/btn_arrow_01.png);
          background-position: top 50% right 19px;
          background-repeat: no-repeat;
          box-sizing: border-box; }


#design_tab_container .shadow{
	filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
	transition:all 0.3s ease 0s;
}
#design_tab_container a.hover_item:hover .shadow{
	filter:drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
	transition:all 0.3s ease 0s;
	transform: translateY(-0.1875em);
}
#design_tab_container .border-tb{
	border-top:1px solid;
	border-bottom:1px solid;
	border-color:#fff;
	pading:1em auto;
}
/*////////////////design tab////////////////////////*/
#design_tab_container ul.tab-group{
	display: flex;
	justify-content: center;
	text-align: center;
	margin-block-end: 0;
}
#design_tab_container ul.tab-group li.tab{
	cursor: pointer;
	padding: 0.5em;
}
/*for IE*/
_:-ms-lang(x)::-ms-backdrop, #design_tab_container ul.tab-group li.tab{
	padding-top: 1em;
}
/* End for IE*/
#design_tab_container .tab-group li{
	border: solid 1px #fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 20%;
	color: #fff;
	margin-bottom: -1px;
}
		@media screen and (max-width: 768px){
			#design_tab_container .tab-group li{
				width: 100%;
				font-size: 13px;
			}
		}
#design_tab_container .tab-active{
	background-color: #ffff64;
}
#design_tab_container .tab-group li.tab-active{
	color: #2780ba;
}
#design_tab_container .tab_hr{
	margin-top: 0;
	margin-bottom: 30px;
}
#design_tab_container .panel{
	display: none;
}
#design_tab_container .panel-active{
	transition: all 0.2s ease-out;
	display: block;
}

.flex_container{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
} 

.flex_container img{
	width: 100%;
}

/*/////////////////////// landscape ////////////////////////////////*/
#design_tab_container .landscape .txt_box{
	margin: 2em auto;
}

#design_tab_container .landscape .content-box01{
	width: 100%;
	margin: 50px auto;
}
#design_tab_container .landscape .content-box02{
	width: 100%;
	margin: 100px auto 50px;
}
#design_tab_container .landscape .content-box03{
	width: 100%;
	margin: 150px auto 50px;
}

#design_tab_container .landscape .content-box01 .img_box{
	width: 100%;
}
		@media screen and (max-width: 768px){
			#design_tab_container .landscape .content-box01 .img_box{
			width: 100%;}}

#design_tab_container .landscape .content-box01 .img_box img{
	width: 100%;
}
#design_tab_container .landscape .img_box_center{
	width: 100%;
	margin: 50px auto 25px;
	text-align: center;
}
#design_tab_container .landscape .img_box_center img{
	width: 75%;
}
#design_tab_container .landscape .img_box_right{
	width: 100%;
	margin: 50px auto 25px;
	text-align: right;
}
#design_tab_container .landscape .img_box_left{
	width: 100%;
	margin: 50px auto 25px;
	text-align: left;
}
		@media screen and (max-width:768px){
			#design_tab_container .landscape .img_box_right,
			#design_tab_container .landscape .img_box_left{
				text-align: center;}}

#design_tab_container .landscape .content_item{
	width: 100%;
}
#design_tab_container .landscape .content_item_ttl{
	width: 100%;
	background:#fff;
	color:#2780ba;
	text-align: center;
	margin-top: 25px;
}
/*for IE*/
_:-ms-lang(x)::-ms-backdrop, #design_tab_container.landscape .content_item_ttl{
	padding-top: 0.5em;
}
/*END for IE*/

#design_tab_container .landscape .ttl_center{
	width: 100%;
	text-align: center;
	margin: 0 auto;
}


.landscape .flex_container .caption{
	margin-top: 0.5em;
}
.landscape .flex_container .left_box64{
	width: 60%;
}
.landscape .flex_container .right_box64{
	width: 37%;
}
		@media screen and (max-width:768px){
			.landscape .flex_container .left_box64,
			.landscape .flex_container .right_box64{
				width: 100%;
				margin-bottom: 1em;
			}}

.landscape .flex_container .right_box64 .right_inner_contetn01,
.landscape .flex_container .right_box64 .right_inner_contetn02{
	padding-bottom: .8em;
}


.landscape .flex_container02{
	margin-top: 1em;
}
		@media screen and (max-width:768px){
			.landscape .flex_container02{
				margin-top: 0em;
			}}

.landscape .flex_container .left_box55,
.landscape .flex_container .right_box55{
	width: 48.5%;
}
		@media screen and (max-width:768px){
			.landscape .flex_container .left_box55,
			.landscape .flex_container .right_box55{
				width: 100%;
				margin-bottom: 1em;
			}}

.landscape .flex_container03{
	margin-top: 1em;
}
.landscape .flex_container .left_box33,
.landscape .flex_container .center_box33,
.landscape .flex_container .right_box33{
	width: 32%;
}
		@media screen and (max-width:768px){
			.landscape .flex_container .left_box33,
			.landscape .flex_container .center_box33,
			.landscape .flex_container .right_box33{
				width: 100%;
				margin-bottom: 1em;
			}}

.landscape .flex_container .right_box33{
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
	transition: all 0.3s ease 0s;	
}
.landscape .flex_container .right_box33:hover{
	filter: drop-shadow(2px 4px 4px rgba(0,0,0,.3));
	transition: all 0.3s ease 0s;
	opacity: 0.8;
	cursor: pointer;
	transform:translateY(-0.1875em);}






/*///////////////////////   architecture ////////////////////////////////*/

.architecture .img_box_center{
	margin-bottom: 1.5em;
}
.architecture .flex_container{
	margin-bottom: 1.5em;
}
.architecture .flex_container img{
	width: 100%;
}
.architecture .content-box01{
	margin: 50px auto;
}
.architecture .content-box01 .img_box{
	width: 100%;
}

.architecture .txt_box{
	margin: 2em auto;
}

.architecture .flex_container .right_box55,
.architecture .flex_container .left_box55{
	width: 48.5%;	
}
		@media screen and (max-width:768px){
				.architecture .flex_container .right_box55,
				.architecture .flex_container .left_box55{
					width: 100%;}
			.architecture .flex_container .left_box55{
				margin-bottom: 1.5em;}}



.architecture .flex_container .right_box64{
	width: 30.9%;	
}
.architecture .flex_container .left_box64{
	width: 66%;	
}
		@media screen and (max-width:768px){
				.architecture .flex_container .right_box64,
				.architecture .flex_container .left_box64{
					width: 100%;}
			.architecture .flex_container .left_box64{
				margin-bottom: 1.5em;}}

/*///////////////////////  community ////////////////////////////////*/

.community .img_box_center{
	margin-bottom: 1.5em;
}
.community .flex_container{
	margin-bottom: 1.5em;
}
.community .flex_container .caption{
	margin-top: 0.5em;
}
.community .flex_container img{
	width: 100%;
}
.community .content-box01{
	margin: 50px auto;
}
.community .content-box01 .img_box{
	width: 100%;
}
.community .txt_box{
	margin: 2em auto;
}

.community .flex_container .right_box55,
.community .flex_container .left_box55{
	width: 48.5%;	
}
.community .flex_container .right_box55{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
		@media screen and (max-width:768px){
				.community .flex_container .right_box55,
				.community .flex_container .left_box55{
					width: 100%;}
			.community .flex_container .left_box55{
				margin-bottom: 1.5em;}
			.community .flex_container .right_box55{
				display: block;}}



.community .flex_container .flex_innerbox_right{
	display: flex;
	flex-direction: row;
}
@media screen and (max-width:768px){
	.community .flex_container .flex_innerbox_right{
		margin-top: 1.5em;}}