#content_header {
background-image: url(//bondhome.d-grip.com/wp/wp-content/themes/bondhome_theme/img/bg/architect/bg_architect_top.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.content_logo img{
display: block;
margin:auto;
width:100%;
margin-bottom:10px;
padding-top: 315px;
}
.content_logo h1{
color:#000;
font-weight:bold;
text-align: center;
font-size:22px;
}
@media (max-width: 767px) {
#content_header {
padding-top:15px;
height: 380px;
}
.content_logo img{
margin-bottom:20px;
width:80%;
max-width: 500px;
padding-top: 150px;
}
.content_logo p{
font-size:18px;
margin-bottom: 100px;
}
}
#architect_contents {
padding: 120px 0;
}
#architect_contents .inner {
width:1175px;
padding: 0px;
}
#architect_contents h2 {
text-align: center;
font-weight: bold;
font-size:24px;
margin-bottom: 50px;
}
p.catchcopy {
width: 950px;
margin:0 auto 100px;
text-align: center;
color:#FFF;
padding:20px 1em;
font-size:26px;
position: relative;
z-index: 1;
color: #fff;
font-weight: bold;
font-family: serif;
letter-spacing: .2rem
}
p.catchcopy:before {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
transform: skewX(25deg);
background: #000;
margin:auto;
content: "";
}
#architect_contents:after,
.architect_intro:after {
display:block;
clear:both;
content:"";
}
.architect_intro {
margin-bottom: 100px;
}
.architect_intro_img {
width: 500px;
height:470px;
position: relative;
}
.intro01 .architect_intro_img{
background: url(//bondhome.d-grip.com/wp/wp-content/themes/bondhome_theme/img/parts/architect/parts_architect01.jpg);
}
.intro02 .architect_intro_img{
background: url(//bondhome.d-grip.com/wp/wp-content/themes/bondhome_theme/img/parts/architect/parts_architect02.jpg);
}
.intro03 .architect_intro_img{
background: url(//bondhome.d-grip.com/wp/wp-content/themes/bondhome_theme/img/parts/architect/parts_architect03.jpg);
}
.architect_intro_img h3 {
font-family: serif;
font-weight:bold;
font-size:57px;
width:470px;
letter-spacing: .55rem;
color:rgba(255,255,255,.8);
}
.intro01 .architect_intro_img h3,
.intro03 .architect_intro_img h3{
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform-origin:right top;
margin-top:470px;
margin-left: 30px;
padding-left:10px;
padding-right:0px;
padding-top:5px;
}
.intro02 .architect_intro_img h3 {
position: absolute;
bottom:0;
padding-left:10px;
color:rgba(255,255,255,.5);
line-height: 60px;
}
.intro03 .architect_intro_img h3 {
color:#05173F;
}
.architect_intro_text {
width: 580px;
position: relative;
}
.architect_name {
height:260px;
padding:0px 65px 30px;
position: relative;
border-bottom: 2px solid #000;
}
.architect_name_inner {
position: absolute;
bottom:30px;
}
.architect_name h3{
font-weight:bold;
font-size: 25px;
}
.architect_name h4{
font-weight:bold;
margin-top: 10px;
}
.intro_text {
padding:30px 65px 0;
text-align: justify;
letter-spacing: 0.1rem;
line-height: 28px
}
@media (max-width: 1199px) {
#architect_contents .inner {
width:950px;
padding: 0px;
}
p.catchcopy {
width: 800px;
}
.architect_intro_text {
width: 400px;
}
.architect_name {
height:240px;
padding:0px 20px 0px;
}
.intro_text {
padding:20px 20px 0;
}
}
@media (max-width: 991px) {
#architect_contents {
padding: 80px 0;
}
#architect_contents .inner {
width:750px;
}
p.catchcopy {
width:600px;
padding:15px 1em;
font-size:22px;
}
.architect_intro_img {
width: 350px;
height:320px;
position: relative;
}
.architect_intro_img h3 {
font-size:35px;
width:470px;
}
.intro01 .architect_intro_img h3,
.intro03 .architect_intro_img h3{
margin-top:470px;
margin-left: -120px;
}
.intro02 .architect_intro_img h3 {
line-height: 40px
}
.architect_intro_text {
width: 350px;
}
.architect_name {
height:120px;
padding:0px 20px 0px;
}
.intro_text {
font-size:16px;
letter-spacing: 0;
line-height: 25px
}
}
@media (max-width: 767px) {
#architect_contents {
padding: 80px 0;
}
#architect_contents .inner {
width:560px;
}
p.catchcopy {
width:480px;
font-size:16px;
}
.architect_intro {
margin-bottom: 50px;
}
.architect_intro_img {
width: 280px;
height:280px;
}
.architect_intro_img h3 {
font-size:30px;
width:470px;
}
.intro01 .architect_intro_img h3,
.intro03 .architect_intro_img h3{
margin-top:470px;
margin-left: -190px;
}
.intro02 .architect_intro_img h3 {
line-height: 35px;
width:100%;
}
.architect_intro_text {
width: 280px;
padding-top:100px;
}
.architect_name {
height:100px;
padding:0px 20px 0px;
}
.intro_text {
font-size:16px;
letter-spacing: 0;
line-height: 25px
}
}
@media (max-width: 575px) {
#architect_contents h2 {
margin-bottom: 30px;
}
#architect_contents {
padding: 80px 0 30px;
}
#architect_contents .inner {
width:100%;
max-width:300px;
padding:10px;
}
p.catchcopy {
width:280px;
font-size:14px;
margin-bottom: 30px;
}
p.catchcopy:before {
transform: skewX(15deg);
}
.architect_intro {
margin-bottom: 50px;
}
.architect_intro_img {
width: 100%;
height:280px;
}
.architect_intro_img h3 {
font-size:30px;
width:470px;
}
.intro01 .architect_intro_img h3,
.intro03 .architect_intro_img h3{
margin-top:470px;
margin-left: -190px;
}
.intro02 .architect_intro_img h3 {
line-height: 35px;
}
.architect_intro_text {
width: 250px;
padding-top:0px;
float:right;
}
.architect_name {
height:100px;
padding:20px 0px 0px;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
.architect_name_inner {
position: static;
margin:auto;
text-align: center;
}
.intro_text {
font-size:16px;
letter-spacing: 0;
line-height: 25px;
width: 138%;
margin-left: -25%;
}
}