.p-kodawari { margin: 50px 0 } .p-kodawari__header { background-position: left 30% center; background-size: cover } .p-kodawari__header--products1 { background-image: url(../../products/kodawari/img/bg1.jpg) } .p-kodawari__header--products2 { background-image: url(../../products/kodawari/img/bg2_re.jpg) } .p-kodawari__header--products3 { background-image: url(../../products/kodawari/img/bg3.jpg) } .p-kodawari__header--furniture1 { background-image: url(../../furniture/kodawari/img/bg1.jpg) } .p-kodawari__header--furniture2 { background-image: url(../../furniture/kodawari/img/bg2.jpg) } .p-kodawari__header--furniture3 { background-image: url(../../furniture/kodawari/img/bg3.jpg) } .p-kodawari-header { z-index: 1; position: relative; height: 250px } .p-kodawari-header__heading { display: flex; position: absolute; top: 0; bottom: 0; left: 0; align-items: start; justify-content: center; width: 65px; padding: 0 5px; background: #251e1c } .p-kodawari-header__heading img { width: 100%; height: auto } .p-kodawari-title { position: relative; width: 55px; padding-bottom: 15px } .p-kodawari-title:before { position: absolute; top: 0; right: 0; bottom: 0; border-right: 1px solid #251e1c; content: "" } .p-kodawari__body { z-index: 0; position: relative; padding: 20px 15px } .p-kodawari__body:before { z-index: -1; position: absolute; top: 0; right: 15%; bottom: 0; width: 100vw; background: #f7f6e7; content: "" } .building-design .p-kodawari__body:before { background: #f0f0f0 } .p-kodawari__line { margin: 30px 0; border-top: 1px solid } [data-direction=reverse] .p-kodawari__header { background-position: left 80% center } [data-direction=reverse] .p-kodawari-header__heading { right: 0; left: auto } [data-direction=reverse] .p-kodawari__body:before { right: auto; left: 15% } [data-direction=reverse] .p-kodawari-title { margin-left: auto } [data-direction=reverse] .p-kodawari-title:before { right: auto; left: 0 } [data-direction=reverse] .p-kodawari-title > * { right: auto; left: 100% } .p-paint { width: 70%; max-width: 320px; margin: 0 auto; font-size: 1.4rem; text-align: center } .p-paint__col { margin-bottom: 15px } .p-paint__col img { margin-bottom: 10px } .p-paint__col--one { max-width: 50%; margin: 0 auto 15px } .p-technique { margin-bottom: 20px } .p-technique dl { margin-bottom: 0 } .p-technique dt { margin-bottom: 5px; font-weight: 700 } .p-technique dd { margin-left: 20px; font-size: 1.4rem } .p-technique__image { width: 200px; margin-bottom: 10px } .p-item-block { margin-bottom: 25px } .p-item-block__image { margin-bottom: 10px; overflow: hidden } .p-item-block__image img { width: 100% } .p-item-block__image a img { -webkit-backface-visibility: hidden; transform: scale(1); backface-visibility: hidden; transition: all .3s ease } .p-item-block__image a:hover img { transform: scale(1.1) } .p-item-block__name { margin-bottom: 5px; font-weight: 700 } .p-item-block__desc { margin-bottom: 20px; font-size: 1.4rem } .p-item-block__link { max-width: 150px; margin-top: 15px } .p-item-block__link .c-btn2 { max-width: 100%; margin-top: 10px } .p-item-block__subimage { display: flex } .p-item-block__subimage img { width: 110px; margin-right: 20px } .p-building-block { margin-bottom: 40px } .p-building-block__image { margin-bottom: 20px } .p-building-block__content .c-h2 { margin-bottom: .5em } .p-building-block__content > :last-child { margin-bottom: 0 } .p-item-block__content1 { max-width: 100%; margin: 10px 0 0; padding-bottom: 30px; } @media (min-width:45.001em) { .p-paint { display: flex; width: 100%; max-width: none; margin-right: -14px; margin-left: -14px } .p-paint__col { flex: 1 0 38%; max-width: 38%; padding: 0 14px } .p-paint__col--one { flex: 1 0 20%; max-width: 20%; margin: 0 } .p-technique { display: flex } .p-technique dd { margin-left: 0 } .p-technique__image { flex: 1 0 25%; max-width: 25%; margin-bottom: 0 } .p-technique__content { flex: 1 0 72%; max-width: 72%; margin-top: -.4em; margin-left: auto } .p-item-block { display: flex } .p-item-block__image { flex: 1 0 29.65%; max-width: 300px; margin-bottom: 0 } .p-item-block__content { display: flex; flex: 1; flex-direction: column; max-width: 100%; margin-top: -.4em; padding-left: 20px } .p-item-block__sub { display: flex; align-items: flex-end; margin-top: auto } .p-item-block__link { margin-left: auto } .p-building-block { display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; margin-bottom: 60px } .p-building-block__image { flex: 1 0 50%; max-width: 50%; margin-bottom: 0 } .p-building-block__image > img { display: block; width: 100% } .p-building-block__content { flex: 1 0 46%; max-width: 46% } .p-building-block[data-direction=reverse] { flex-direction: row } .p-building-block[data-direction=reverse] .p-building-block__image { direction: rtl } } @media (min-width:60.001em) { .p-kodawari { margin: 80px 0 } .p-kodawari-header { width: 85%; max-width: 920px; height: 430px; margin: 0 auto } .p-kodawari-header__heading { position: absolute; right: 100%; left: auto; width: 100px; padding: 0 } .p-kodawari-header__heading:before { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; width: calc((100vw - 860px) / 2); background: #251e1c; content: "" } .p-kodawari-title { width: 85%; max-width: 920px; height: 120px; margin: 0 auto } .p-kodawari-title:before { right: auto; left: 0 } .p-kodawari-title > * { position: absolute; right: 100%; width: 100px } .p-kodawari__body { width: 85%; max-width: 920px; margin: auto; padding: 30px } .p-kodawari__body:before { right: 11.8% } .p-kodawari__body:after { z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid; content: "" } .p-kodawari__line:before { position: absolute; left: 0; width: 100vw; margin-top: -1px; border-top: 1px solid; content: "" } [data-direction=reverse] .p-kodawari-header__heading { right: auto; left: 100% } [data-direction=reverse] .p-kodawari-header__heading:before { right: auto; left: 0 } [data-direction=reverse] .p-kodawari-title:before { right: 0; left: auto } [data-direction=reverse] .p-kodawari-title > * { right: auto; left: 100% } [data-direction=reverse] .p-kodawari__body:before { left: 11.8% } [data-direction=reverse] .p-kodawari__body:after, [data-direction=reverse] .p-kodawari__line:before { right: 0; left: auto } .p-kodawari__body .p-building-block:first-child { margin-top: -120px } .p-building-block__image > img { z-index: 1; position: relative; width: 132%; max-width: none } }