.sp {
display: none;
}
.pc {
display: block;
}
.office-section--bgwhite {
background-color: #ffffff;
}
.office-section__main {
padding-top: 70px;
padding-bottom: 70px;
}
.office-section__ttl {
text-align: center;
letter-spacing: 0.3em;
font-family: vdl-v7mincho, sans-serif;
font-size: 21px;
font-weight: normal;
line-height: 1.762;
}
.office-section__txt {
margin-top: 50px;
text-align: justify;
letter-spacing: 0.05em;
font-size: 16px;
line-height: 2.063;
}
.office-section--bggradation {
background-image: linear-gradient(90deg, #DCDDDD, #ffffff);
} .office-section--01 {
margin: 0 auto;
}
.office-section--01 .office-section__main {
position: relative;
padding: 100px 0;
margin: 0 157px;
}
.office-section--01 .office-section__ttl {
position: relative;
}
.office-section--01 .office-section__ttl::before {
position: absolute;
content: "";
top: -83px;
right: -200px;
width: 413px;
height: 477px;
background-image: url(//yamadahomes.jp/kobori/wp/wp-content/themes/koboriarchitectslab/assets/images/office/bg-logo@2x.png);
background-repeat: no-repeat;
background-size: contain;
opacity: 0.72;
}
.office-section--01 .office-section__ttl span {
display: block;
}
.office-section--01 .office-section__txt {
text-align: center;
}
.office-section--01 .office-section__txt:first-of-type {
margin-top: 57px;
}
.office-section--01 p + p {
margin-top: 45px;
} .office-section--02 .office-section__main {
padding: 80px 0 90px;
}
.office-section--02 .office-section__ttl {
margin-bottom: 37px;
}
.office-section--02 .office-section__figure {
width: 720px;
} .office-section--03,
.office-section--04,
.office-section--05,
.office-section--06 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.office-section--03,
.office-section--05 {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.office-section--04,
.office-section--06 {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.office-section--03 .office-section__main,
.office-section--04 .office-section__main,
.office-section--05 .office-section__main,
.office-section--06 .office-section__main {
width: 563px;
align-content: center;
}
.office-section--03 .office-section__main,
.office-section--05 .office-section__main {
padding-left: 110px;
}
.office-section--04 .office-section__main,
.office-section--06 .office-section__main {
padding-right: 110px;
}
.office-section--03 .office-section__ttl,
.office-section--04 .office-section__ttl,
.office-section--05 .office-section__ttl,
.office-section--06 .office-section__ttl {
text-align: left;
}
.office-section--03 .office-section__figure,
.office-section--04 .office-section__figure,
.office-section--05 .office-section__figure,
.office-section--06 .office-section__figure {
background: none;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
min-width: 50%;
overflow: hidden;
}
.office-section__figure img {
width: 100%;
height: 100%;
object-fit: cover; 
} .office-section--07 .office-section__main {
padding: 80px 0 90px;
}
.office-section--07 .office-section__ttl {
margin-bottom: 28px;
}
.office-section__movie {
width: 720px;
margin: 0 auto;
}
.office-section__movie iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
} .office-section__map {
width: 100%;
}
.office-section__map iframe {
width: 100%;
height: 501px;
filter: grayscale(100%); -webkit-filter: grayscale(100%);
} @media screen and (max-width: 768px) { .office-section--03 .office-section__figure,
.office-section--04 .office-section__figure,
.office-section--05 .office-section__figure,
.office-section--06 .office-section__figure {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
min-width: 100%;
}
.sp {
display: block;
}
.pc {
display: none;
}
.office-section__ttl {
font-size: 18px;
line-height: 1.667;
}
.office-section__txt {
font-size: 13px;
line-height: 2;
}
.office-section .c-inner-default-sp {
padding: 0;
}
.office-section--01 .office-section__main {
padding: 75px 0 60px;
margin: 0 20px;
}
.office-section--01 .office-section__ttl::before {
top: -68px;
right: -78px;
width: 264px;
height: 305px;
}
.office-section--01 .office-section__ttl span {
margin-bottom: 31px;
}
.office-section--01 .office-section__ttl span:last-child {
margin-bottom: 0;
}
.office-section--01 .office-section__txt {
text-align: justify;
}
.office-section--01 .office-section__txt:first-of-type {
margin-top: 45px;
}
.office-section--01 p + p {
margin-top: 35px;
}
.office-section--02 .office-section__main {
padding: 50px 0 55px;
}
.office-section--02 .office-section__figure {
margin: 0 auto;
width: 94%;
height: auto;
}
.office-section--03,
.office-section--04,
.office-section--05,
.office-section--06 {
flex-direction: column-reverse;
}
.office-section--03 .office-section__main,
.office-section--04 .office-section__main,
.office-section--05 .office-section__main,
.office-section--06 .office-section__main {
width: 325px;
padding: 50px 0 55px;
margin: 0 auto;
}
.office-section--03 .office-section__ttl,
.office-section--04 .office-section__ttl,
.office-section--05 .office-section__ttl,
.office-section--06 .office-section__ttl {
text-align: center;
margin: 0;
line-height: 1.833;
}
.office-section--03 .office-section__txt,
.office-section--04 .office-section__txt,
.office-section--05 .office-section__txt,
.office-section--06 .office-section__txt {
margin: 35px 20px 0;
line-height: 2.077;
}
.office-section--03 .office-section__figure,
.office-section--04 .office-section__figure,
.office-section--05 .office-section__figure,
.office-section--06 .office-section__figure {
width: 100%;
}
.office-section--07 .office-section__main {
padding: 55px 0 54px;
}
.office-section--07 .office-section__ttl {
margin-bottom: 20px;
}
.office-section__movie {
width: 299px;
}
.office-section__map iframe {
height: 224px;
}
}