@charset "utf-8";
/* CSS Document */
/*==================================
	header
==================================*/
@media only screen and (min-width: 640px) {
header .hd_nav li.menu__single a.menuli .line { color: #007FD7;}
}


/*==================================
	service common
==================================*/
main .blotit { font-size: 220%; text-align: center;}
main .blotit:after { content: ""; width: 50px; height: 30px; border-bottom: solid 2px #000; display: block; margin: 0 auto 30px auto;}
@media only screen and (max-width: 639px) {
main .blotit { font-size: 140%; text-align: center;}
}


/* -- mv -- */
main .mv { background: url(../img/service/ditbg.gif); position: relative;}
main .mv .bgarea { height: 100%;}
main .mv .pankuzu { position: absolute; right: 0; background: #fff; display: flex;}
main .mv .pankuzu li { color: #666666;}
main .mv .pankuzu li a { color: #666666; text-decoration: none;}
main .mv .pankuzu li:after { content: "＞"; display: inline-block; margin: 0 5px;}
main .mv .pankuzu li:last-child:after { content: "";}
main .mv .titarea { color: #fff;}
@media only screen and (min-width: 640px) {
main .mv { height: 650px;}
main .mv .pankuzu { bottom: 0; padding: 15px 30px 0 30px;}
main .mv .pankuzu li { font-size: 88%;}
main .mv .txtbgarea { position: absolute; top: 200px; left: 0; width: 42%; height: 190px; min-width: 460px;
	background: rgb(7,69,172);
	background: -moz-linear-gradient(left, rgba(7,69,172,1) 35%, rgba(0,122,197,1) 100%);
	background: -webkit-linear-gradient(left, rgba(7,69,172,1) 35%,rgba(0,122,197,1) 100%);
	background: linear-gradient(to right, rgba(7,69,172,1) 35%,rgba(0,122,197,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0745ac', endColorstr='#007ac5',GradientType=1 );}
main .mv .titarea { position: absolute; top: 258px; left: 0; right: 0; margin: 0 auto; width: 1200px;}
main .mv .titarea .tit_en { margin-bottom: 10px;}
main .mv .titarea .tit_jp { font-size: 225%; padding: 0;}
}
@media only screen and (max-width: 639px) {
main .mv { height: 200px;}
main .mv .pankuzu { bottom: -25px; margin-right: 5%;}
main .mv .pankuzu li { font-size: 80%;}
main .mv .titarea { padding: 15px 25px 15px 5%; display: inline-block;
	background: rgb(7,69,172);
	background: -moz-linear-gradient(left, rgba(7,69,172,1) 35%, rgba(0,122,197,1) 100%);
	background: -webkit-linear-gradient(left, rgba(7,69,172,1) 35%,rgba(0,122,197,1) 100%);
	background: linear-gradient(to right, rgba(7,69,172,1) 35%,rgba(0,122,197,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0745ac', endColorstr='#007ac5',GradientType=1 );}
main .mv .titarea .tit_en { font-size: 80%;}
main .mv .titarea .tit_jp { font-size: 160%;}
}

/* -- blo01 -- */
main .blo01 { text-align: center;}
main .blo01 .txt { line-height: 2;}
@media only screen and (min-width: 640px) {
main .blo01 {padding-top: 150px; margin-bottom: 120px;}
main .blo01 .blotit {}
}
@media only screen and (max-width: 639px) {
main .blo01 {padding-top: 100px; margin-bottom: 60px;}
main .blo01 .txt { text-align: left;}
}

/* -- blo02 -- */
main .blo02 { background: url(../img/service/ditbg.gif);}
main .blo02 .txtarea { background: #fff; position: relative;}
main .blo02 .txtarea:after { position: absolute; left: 0; top: 0; height: 3px; background: #007ac5; content: "";}
main .blo02 .txtarea .tit { color: #007ac5;}
main .blo02 .txtarea .txt {line-height: 2;}
@media only screen and (min-width: 640px) {
main .blo02 .bgarea { height: 100%; width: 55%;}
main .blo02 .txtarea { width: 600px;}
main .blo02 .txtarea:after { width: 200px;}
main .blo02 .txtarea .tit { font-size: 150%;}
main .blo02 .txtarea .txt { margin-top: 20px;}
main .blo02 .box01 { padding-top: 80px; position: relative;}
main .blo02 .box01 .bgarea { margin-top: -80px; position: absolute; right: 0;}
main .blo02 .box01 .txtarea { padding: 90px 60px;}
main .blo02 .box02 { padding-bottom: 80px; position: relative;}
main .blo02 .box02 .bgarea { padding-top: 80px; position: absolute; left: 0;}
main .blo02 .box02 .txtarea { padding: 70px 60px; margin-left: 600px;}
main .blo02 .box03 { position: relative;}
main .blo02 .box03 .bgarea { position: absolute; right: 0;}
}
@media only screen and (max-width: 639px) {
main .blo02 { padding: 40px 0;}
main .blo02 .bgarea { display: none;}
main .blo02 .txtarea { padding: 30px 5%;}
main .blo02 .txtarea:after { width: 100px;}
main .blo02 .txtarea .tit { font-size: 120%;}
main .blo02 .txtarea .txt { margin-top: 10px;}
main .blo02 .box01 .inner:before { content: ""; width: 100%; height: 200px; display: block;}
main .blo02 .box02 { margin-top: 30px;}
main .blo02 .box02 .inner:before { content: ""; width: 100%; height: 200px; display: block;}
}

/* -- blo03 -- */
main .blo03 { position: relative; text-align: center; color: #fff;}
main .blo03 .blotit:after {border-bottom: solid 2px #fff;}
main .blo03 .bgarea { position: absolute; top: 0; width: 100%;
	background: rgb(7,69,172);
	background: -moz-linear-gradient(left, rgba(7,69,172,1) 35%, rgba(0,122,197,1) 100%);
	background: -webkit-linear-gradient(left, rgba(7,69,172,1) 35%,rgba(0,122,197,1) 100%);
	background: linear-gradient(to right, rgba(7,69,172,1) 35%,rgba(0,122,197,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0745ac', endColorstr='#007ac5',GradientType=1 );}
main .blo03 .inner { position: relative;}
main .blo03 .txt { line-height: 2;}
main .blo03 .img { text-align: center;}
@media only screen and (min-width: 640px) {
main .blo03 { padding-top: 150px; margin-bottom: 150px;}
main .blo03 .bgarea { height: 680px;}
main .blo03 .blotit {}
main .blo03 .img { margin-top: 50px;}
}
@media only screen and (max-width: 639px) {
main .blo03 { padding-top: 60px; margin-bottom: 60px;}
main .blo03 .bgarea { height: 620px;}
main .blo03 .txt { text-align: left;}
main .blo03 .img { margin-top: 30px;}
main .blo03 .img img { width: 100%;}
}

/* -- blo04 -- */
main .blo04 .list li:last-child { margin-bottom: 0;}
main .blo04 .list li .txtarea .tit { font-size: 500%; color: #cce4f3; line-height: 1;}
main .blo04 .list li .txtarea .subtit { font-size: 175%; color: #007ac5;}
main .blo04 .list li .txtarea .txt { line-height: 2;}
@media only screen and (min-width: 640px) {
main .blo04 { padding-bottom: 100px;}
main .blo04 .blotit {}
main .blo04 .blotit:after { margin: 0 auto 50px auto;}
main .blo04 .list {}
main .blo04 .list li { display: flex; width: 100%; margin-bottom: 60px;}
main .blo04 .list li .img { width: 530px; margin-right: 60px;}
main .blo04 .list li .txtarea { width: 610px;}
main .blo04 .list li .txtarea .tit { font-size: 500%; margin-bottom: 10px;}
main .blo04 .list li .txtarea .subtit { font-size: 175%;}
main .blo04 .list li .txtarea .txt { margin-top: 15px;}
}
@media only screen and (max-width: 639px) {
main .blo04 { padding-bottom: 60px;}
main .blo04 .list li { margin-bottom: 30px;}
main .blo04 .list li .img { margin-bottom: 10px;}
main .blo04 .list li .img img { width: 100%;}
main .blo04 .list li .txtarea .tit { font-size: 250%; margin-bottom: 5px;}
main .blo04 .list li .txtarea .subtit { font-size: 120%;}
main .blo04 .list li .txtarea .txt { margin-top: 5px;}
}

/* -- blo05 -- */
main .blo05 { background: url(../img/service/ditbg.gif);}
main .blo05 .txt { text-align: center; }
main .blo05 dt .tit_jp { background: #fff; font-weight: normal; display: inline-block; line-height: 1;}
main .blo05 dd .list li { position: relative;}
main .blo05 dd .list li a { display: block; text-decoration: none; color: #fff;}
main .blo05 dd .list li .tit { text-align: left; width: 90%; padding: 8px 10px 8px 40px; bottom: -24px; left: 0; position: absolute; color: #fff;}
@media only screen and (min-width: 640px) {
main .blo05 { padding: 90px 0 100px 0;}
main .blo05 .blotit {}
main .blo05 .txt { margin-bottom: 60px;}
main .blo05 dl { display: flex;}
main .blo05 dt { width: 186px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-text-orientation: mixed; text-orientation: mixed;}
main .blo05 dt .tit_jp { font-size: 280%; padding: 30px 15px 20px 15px; margin-left: 25px;}
main .blo05 dt .tit_en { text-align: center; position: relative;}
main .blo05 dt .tit_en:before { top: 0;}
main .blo05 dt .tit_en:after { bottom: 0;}
main .blo05 dt .tit_en:before,
main .blo05 dt .tit_en:after { position: absolute; content: ""; display: inline-block; background: #000; left: 11px; width: 1px; height: 26%;}
main .blo05 dd {}
main .blo05 dd .list { display: flex;}
main .blo05 dd .list li { width: 386px; margin-left: 20px;}
main .blo05 dl.tokyo {}
main .blo05 dl.tokyo dt .tit_jp { height: 150px;}
main .blo05 dl.tokyo dt .tit_en { height: 150px;}
main .blo05 dl.tokyo dt .tit_en:before,
main .blo05 dl.tokyo dt .tit_en:after { height: 22%;}
main .blo05 dl.nagoya { margin-top: 70px;}
main .blo05 dl.nagoya dt .tit_jp { height: 205px;}
main .blo05 dl.nagoya dt .tit_en { height: 205px;}
}
@media only screen and (max-width: 639px) {
main .blo05 { padding: 60px 0 60px 0;}
main .blo05 .txt { margin-bottom: 30px; text-align: left; line-height: 2;}
main .blo05 dt{ text-align: center;}
main .blo05 dt .tit_jp {  font-size: 180%; padding: 5px 40px; margin-bottom: 5px;}
main .blo05 dt .tit_en { margin-bottom: 10px;}
main .blo05 dt .tit_en span { text-align: center; position: relative; padding: 0 50px;}
main .blo05 dt .tit_en span:before { left: 0;}
main .blo05 dt .tit_en span:after { right: 0;}
main .blo05 dt .tit_en span:before,
main .blo05 dt .tit_en span:after { position: absolute; top: 11px; content: ""; display: inline-block; width: 30px; height: 1px; background: #000;}
main .blo05 dd .list li { margin-bottom: 40px;}
main .blo05 dd .list li .img img { width: 100%;}
main .blo05 dl.nagoya { margin-top: 60px;}
}

/* -- blo06 -- */
main .blo06 .txt { text-align: center;}
main .blo06 .list { display: flex; flex-wrap: wrap;}
main .blo06 .list li .tit { text-align: left; margin-top: 5px;}
@media only screen and (min-width: 640px) {
main .blo06 { padding: 90px 0 150px 0;}
main .blo06 .blotit {}
main .blo06 .txt { margin-bottom: 60px;}
main .blo06 .list li { width: 285px; margin-left: 20px;}
main .blo06 .list li:nth-child(4n+1) { margin-left: 0;}
main .blo06 .list li:nth-child(n+5) { margin-top: 30px;}
}
@media only screen and (max-width: 639px) {
main .blo06 { padding: 60px 0 60px 0;}
main .blo06 .txt { margin-bottom: 20px; line-height: 2; text-align: left;}
main .blo06 .list li { width: 48%;}
main .blo06 .list li:nth-child(2n) {margin-left: 4%;}
main .blo06 .list li:nth-child(n+3) { margin-top: 20px;}
main .blo06 .list li .img img { width: 100%;}
main .blo06 .list li .tit { font-size: 90%;}
}




@media only screen and (min-width: 640px) {
main { padding-top: 80px;}
}
@media only screen and (max-width: 639px) {
main { padding-top: 60px;}

}







/*==================================
	mansion
==================================*/
#mansion {}

/* -- mv -- */
#mansion main .mv .bgarea {background: url(../img/service/mansion/mv.jpg) no-repeat right top; background-size: auto 100%;}
@media only screen and (max-width: 639px) {
#mansion main .mv .bgarea { background: url(../img/service/mansion/mv.jpg) no-repeat center top; background-size: auto 100%; padding-top: 60px;}
}

/* -- blo02 -- */
@media only screen and (min-width: 640px) {
#mansion main .blo02 .box01 .bgarea { background: url(../img/service/mansion/blo02_img01.jpg) no-repeat center center; background-size: cover;}
#mansion main .blo02 .box02 .bgarea { background: url(../img/service/mansion/blo02_img02.jpg) no-repeat center center; background-size: cover;}
}
@media only screen and (max-width: 639px) {
#mansion main .blo02 .box01 .inner:before { background: url(../img/service/mansion/blo02_img01.jpg) no-repeat center top; background-size: 100% auto;}
#mansion main .blo02 .box02 .inner:before { background: url(../img/service/mansion/blo02_img02.jpg) no-repeat center top; background-size: 100% auto;}
}

/* -- blo05 -- */
#mansion main .blo05 dd .list li .tit { background: url(../img/service/mansion/blo05_icon.svg) no-repeat 10px 10px #000;}
#mansion main .blo05 dd .list li { width: 318px;}

@media only screen and (min-width: 640px) {
#mansion {}
}
@media only screen and (max-width: 639px) {
#mansion {}
#mansion main .blo05 dd .list li { width: 100%;}
}



/*==================================
	apartment
==================================*/
#apartment {}

/* -- mv -- */
#apartment main .mv .bgarea {background: url(../img/service/apartment/mv.jpg) no-repeat right top; background-size: auto 100%;}
@media only screen and (max-width: 639px) {
#apartment main .mv .bgarea { background: url(../img/service/apartment/mv.jpg) no-repeat center top; background-size: auto 100%; padding-top: 60px;}
}

/* -- blo02 -- */
@media only screen and (min-width: 640px) {
#apartment main .blo02 .box01 .bgarea { background: url(../img/service/apartment/blo02_img01.jpg) no-repeat center center; background-size: cover;}
#apartment main .blo02 .box02 .bgarea { background: url(../img/service/apartment/blo02_img02.jpg) no-repeat center center; background-size: cover;}
}
@media only screen and (max-width: 639px) {
#apartment main .blo02 .box01 .inner:before { background: url(../img/service/apartment/blo02_img01.jpg) no-repeat center top; background-size: 100% auto;}
#apartment main .blo02 .box02 .inner:before { background: url(../img/service/apartment/blo02_img02.jpg) no-repeat center top; background-size: 100% auto;}
}

/* -- blo05 -- */
#apartment main .blo05 dd .list li .tit { background: url(../img/service/apartment/blo05_icon.svg) no-repeat 10px 15px #000;}
#apartment main .blo05 dd { width: 100%;}

@media only screen and (min-width: 640px) {
#apartment {}
#apartment main .blo05 dd .list li:first-child { margin-left: 0;}
}
@media only screen and (max-width: 639px) {
#apartment {}
}

/* -- blo06 -- */
@media only screen and (min-width: 640px) {
#apartment main .blo06 .bnimg { margin-top: 100px;}
}
@media only screen and (max-width: 639px) {
#apartment main .blo06 .bnimg { margin-top: 50px;}
#apartment main .blo06 .bnimg img { width: 100%;}
}


/*==================================
	solution
==================================*/
#solution {}
/* -- mv -- */
#solution main .mv .bgarea {background: url(../img/service/solution/mv.jpg) no-repeat right top; background-size: auto 100%;}
/*
#solution main .blo04 .blotit { margin-top: 150px;}
#solution main .blo04 .txt { margin-bottom: 95px; line-height: 2;}
*/
@media only screen and (min-width: 640px) {
#solution main .blo02 .box01 .bgarea { background: url(../img/service/solution/blo04_img01.jpg) no-repeat center center; background-size: cover;}
#solution main .blo02 .box02 { padding-bottom: 0;}
#solution main .blo02 .box02 .bgarea { background: url(../img/service/solution/blo04_img02.jpg) no-repeat center center; background-size: cover; padding-bottom: 0;}
#solution main .blo02 .box02 .txtarea { padding: 90px 60px; margin-left: 600px;}
#solution main .blo02 .box03 { padding-bottom: 80px;}
#solution main .blo02 .box03 .bgarea { background: url(../img/service/solution/blo04_img03.jpg) no-repeat center center; background-size: cover; padding-bottom: 80px;}
#solution main .blo02 .box03 .txtarea { padding: 90px 60px;}
}

@media only screen and (max-width: 639px) {
#solution {}
#solution main .mv .bgarea { background: url(../img/service/solution/mv.jpg) no-repeat center top; background-size: auto 100%; padding-top: 60px;}
#solution main .blo02 .box01 .inner:before { background: url(../img/service/solution/blo04_img01.jpg) no-repeat center top; background-size: 100% auto;}
#solution main .blo02 .box02 .inner:before { background: url(../img/service/solution/blo04_img02.jpg) no-repeat center top; background-size: 100% auto;}
#solution main .blo02 .box02 { margin-top: 30px;}
#solution main .blo02 .box02 .inner:before { content: ""; width: 100%; height: 200px; display: block;}
#solution main .blo02 .box03 .inner:before { background: url(../img/service/solution/blo04_img03.jpg) no-repeat center top; background-size: 100% auto;}
#solution main .blo02 .box03 { margin-top: 30px;}
#solution main .blo02 .box03 .inner:before { content: ""; width: 100%; height: 200px; display: block;}
}