@charset "utf-8";
  #newBuildLead {
margin-bottom: 50px;
}
#newBuildLead h2 {
font-size: 130%;
font-weight: 500;
margin-bottom: 15px;
}
#newBuildLead p {
line-height: 1.9;
}
#newBuildLead .sign {
text-align: right;
margin-top: 15px;
} #newBuildList {
margin-bottom: 60px;
}
#newBuildList .photoBox {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
#newBuildList .photoBox article {
flex-basis: 31%;
max-width: 31%;
margin: 0 1% 2%;
}
#newBuildList .imgBox {
display: block;
position: relative;
overflow: hidden;
transition: all .4s;
height: 206px;
background: #eee;
}
#newBuildList .imgBox img {
width: 100%;
height: 206px;
object-fit: cover;
vertical-align: bottom;
font-family: 'object-fit: cover;';
}
#newBuildList .imgBox:hover {
opacity: .7;
}
#newBuildList .ttl {
margin-top: 8px;
padding: 0 8px;
font-size: 90%;
line-height: 1.5;
text-align: center;
} #newBuildDetail {
margin-bottom: 50px;
}
#newBuildDetail .mainPhoto {
width: 100%;
text-align: center;
margin-bottom: 15px;
}
#newBuildDetail .mainPhoto img {
max-width: 100%;
max-height: 540px;
}
#newBuildDetail .mainCaption {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
line-height: 1.9;
color: #555;
font-size: 95%;
} #newBuildGallery {
margin-bottom: 60px;
}
#newBuildGallery .galleryRow {
margin-bottom: 50px;
} #newBuildGallery .galleryRow--landscape .galleryPhoto {
max-width: 1100px;
margin: 0 auto;
}
#newBuildGallery .galleryRow--landscape .galleryPhoto img {
width: 100%;
max-height: 520px;
object-fit: cover;
vertical-align: bottom;
}
#newBuildGallery .galleryRow--landscape .galleryComment {
max-width: 1100px;
margin: 14px auto 0;
padding: 0 20px;
line-height: 1.9;
} #newBuildGallery .galleryRow--portrait {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 40px;
max-width: 1100px;
margin: 0 auto 50px;
}
#newBuildGallery .galleryRow--portrait .galleryPhoto {
flex: 0 0 38%;
max-width: 38%;
}
#newBuildGallery .galleryRow--portrait .galleryPhoto img {
width: 100%;
vertical-align: bottom;
}
#newBuildGallery .galleryRow--portrait .galleryComment {
flex: 1;
padding: 6px 10px 0;
line-height: 1.9;
} #newBuildChoicePoint {
margin-bottom: 60px;
}
#newBuildChoicePoint .choiceMain {
display: flex;
flex-direction: row-reverse; align-items: center;
gap: 24px;
}
#newBuildChoicePoint .photo {
flex-basis: 40%;
max-width: 460px;
margin: 0;
}
#newBuildChoicePoint .spComment {
flex: 1;
}
#newBuildChoicePoint p,
#newBuildChoicePoint .spComment {
line-height: 1.9;
} #newBuildStaff {
margin-bottom: 60px;
}
#newBuildStaff .staffMain {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 20px;
}
#newBuildStaff .staffMainCol {
flex-basis: 40%;
max-width: 40%;
}
#newBuildStaff .staffMainImage img {
width: 100%;
}
#newBuildStaff .staffText {
flex: 1;
line-height: 1.9;
}
#newBuildStaff #staffMainView {
width: 100%;
}
#newBuildStaff .staffThumbs {
display: flex;
gap: 2%;
margin-top: 10px;
}
#newBuildStaff .staffThumbs li {
flex-basis: 32%;
max-width: 32%;
height: 80px;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: opacity .3s;
}
#newBuildStaff .staffThumbs li img {
width: 100%;
height: 100%;
object-fit: cover;
}
#newBuildStaff .staffThumbs li:hover {
opacity: .7;
}
#newBuildStaff .staffThumbs li.active {
opacity: .5;
}
#newBuildStaff .staffName {
margin-top: 12px;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
} #newBuildStaff .staffName:empty {
display: none;
} #moreLink {
text-align: center;
margin-bottom: 50px;
}
#moreLink .bt02 {
margin: 0 10px;
} #pagenation {
text-align: center;
margin: 30px 0 60px;
}
#pagenation li {
display: inline-block;
margin: 0 0.1em;
}
#pagenation li.active {
padding: 0.2em 0.7em;
color: #333;
}
#pagenation li a {
font-weight: 400;
padding: 0.2em 0.7em;
background: #ddd;
color: #fff;
transition: all .4s;
border-radius: 3px;
}
#pagenation li a:hover {
background: #eee;
color: #ff7500;
text-decoration: none;
}
#pagenation li.prev a,
#pagenation li.next a {
color: #ff7500;
background: inherit;
font-weight: 800;
}
#pagenation li.prev a:hover,
#pagenation li.next a:hover {
background: transparent;
opacity: 0.6;
} @media screen and (max-width: 760px) {
#newBuildList .photoBox article {
flex-basis: 47%;
max-width: 47%;
margin: 0 1.5% 3%;
}
#newBuildGallery .galleryRow--portrait {
flex-direction: column;
align-items: center;
gap: 15px;
}
#newBuildGallery .galleryRow--portrait .galleryPhoto,
#newBuildGallery .galleryRow--landscape .galleryPhoto {
flex-basis: auto;
max-width: 100%;
width: 100%;
}
#newBuildGallery .galleryRow--portrait .galleryComment {
flex: none;
width: 100%;
}
#newBuildStaff .staffMain {
flex-direction: column;
gap: 10px;
}
#newBuildStaff .staffMainCol {
flex-basis: auto;
max-width: 100%;
width: 100%;
}
#newBuildChoicePoint .choiceMain {
flex-direction: column;
gap: 10px;
}
#newBuildChoicePoint .photo {
flex-basis: auto;
width: 100%;
max-width: 100%;
}
} @media screen and (max-width: 600px) {
#newBuildList .photoBox article {
flex-basis: 48%;
max-width: 48%;
margin: 0 1% 4%;
}
#newBuildList .imgBox,
#newBuildList .imgBox img {
height: calc(30vw + 6px);
}
#newBuildStaff .staffThumbs {
flex-wrap: wrap;
gap: 2%;
}
}