@charset "UTF-8";

/* ==========================================================================
   common
   ========================================================================== */

/* reset
   ========================================================================== */

html { font-size: 62.5%; margin: 0; padding: 0; border: none; outline: none; vertical-align: baseline; }
body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, main, menu, nav, section, summary, button,
time, mark, audio, video { margin: 0; padding: 0; border: none; outline: none; vertical-align: baseline; background: transparent; }
body { height: 100%; color: #383838; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; letter-spacing: .02em; font-feature-settings: 'palt'; line-height: 1; background-color: #f0f0f0; position: relative; }
body, input, textarea, legend { color: #383838; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
input, select, textarea { padding: 0; margin: 0; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section { display: block; }
nav ul { list-style: none; }
li { list-style-position: outside; }
ul li { list-style-type: none; }
ol li { list-style-type: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ''; }
a { margin: 0; padding: 0; vertical-align: baseline; background: transparent; }
a, a img { border: none; }
a:link,
a:visited,
a:hover,
a:active { text-decoration: none; }
a:focus { outline: none; }
a, label { cursor: pointer; }
address, optgroup, cite { font-style: normal; }
abbr { border-bottom: .1em dotted; cursor: help; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th, td { text-align: left; vertical-align: top; border: 1px solid #000; }
caption { text-align: left; }
input, select { vertical-align: middle; border-radius: 0; }
em { font-style: normal; }
pre { overflow-x: auto; }
textarea { width: 99%; overflow: auto; }
iframe { display: block; width: 100%; overflow: hidden; }
sup { font-size: 1rem; vertical-align: baseline; position: relative; bottom: .7em; }
sub { font-size: 1rem; vertical-align: baseline; position: relative; top: .1em; }
img { max-width: 100%; height: auto; vertical-align : middle; }
a img { opacity: 1; transition: opacity .25s ease 0s; }
a:hover img { opacity: .8; }

@media (min-width: 320px) and (max-width: 736px) {
body { font-size: 1rem; }
}
@media (min-width: 737px) {
body { font-size: 1.6rem; }
}



/* container
   ========================================================================== */

body.fixed { height: 100vh; overflow: hidden; }

body.common article { background-color: #fff; box-sizing: border-box; overflow: hidden; }
body.common.constructed article { background-color: transparent; }

@media (min-width: 320px) and (max-width: 736px) {
body.common article { padding: 30px 25px 60px; margin: 30px 20px; }
body.common.constructed article { padding: 0; margin: 0; }
}
@media (min-width: 737px) {
main,
footer { min-width: 1366px; }
body.common article { width: 1000px; padding: 70px 100px 200px; margin: 60px auto 150px; box-sizing: border-box; }
body.common.constructed article { width: 100%; max-width: none; padding: 0; margin: 0; overflow: visible; }
}



/* ==========================================================================
   parts
   ========================================================================== */

/* header
   ========================================================================== */

header { display: block; width: 100%; position: fixed; left: 0; top: 0; z-index: 8; }

header .logo { position: absolute; transition: .5s; }

/* nav */
.hamburger { display: flex; justify-content: center; align-items: center; background-color: #ff521e; position: absolute; right: 0; top: 0; z-index: 1; transition: .5s; }
.hamburger:hover { opacity: .9; }
.hamburger .lines { display: block; width: 30px; height: 19px; position: relative; }
.hamburger .line { display: block; width: 100%; height: 1px; background-color: #fff; position: absolute; transition:transform .5s; }
.hamburger .line.center { top: 9px; }
.hamburger .line.bottom { bottom: 0; }
.hamburger.opened .line.top { top: 8px; transform: rotate(45deg); }
.hamburger.opened .line.center { transform: scaleX(0); }
.hamburger.opened .line.bottom { bottom: 10px; transform: rotate(135deg); }

nav.gnav.main { display: none; width: 100%; height: 100vh; background-color: rgba(255, 82, 30, .8); position: fixed; }
nav.gnav.main ul { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; position: absolute; }
nav.gnav.main li { opacity: 0; }
nav.gnav.main li a { color: #fff; font-weight: 500; letter-spacing: .115em; text-decoration: none; transition: .5s; }
nav.gnav.main li a:hover { opacity: .5; }

@media (min-width: 320px) and (max-width: 736px) {

header { height: 50px; }
header .logo { width: 28px; height: 28px; left: 20px; top: 15px; }
.hamburger.opened ~ .logo::after { background-image: url(../media/common/logo_s.svg); }
body.common header .logo::after { background-image: url(../media/common/logo_s_o.svg); }
body.home header .logo::after,
body.common.constructed header .logo::after { background-image: url(../media/common/logo_s.svg); }

/* nav */
.hamburger { width: 50px; height: 50px; }
.hamburger .text { display: none; }
nav.gnav.main li { margin: 30px 0 30px 100px; }
nav.gnav.main li a { font-size: 2.4rem; }

}
@media (min-width: 737px) {

header { height: 82px; }
header .logo { width: 115px; height: 47px; left: 50px; top: 40px; }
.hamburger.opened ~ .logo::after { background-image: url(../media/common/logo.svg); }
body.common header .logo::after { background-image: url(../media/common/logo_o.svg); }
body.home header .logo::after,
body.common.constructed header .logo::after { background-image: url(../media/common/logo.svg); }

/* nav */
.hamburger { width: 220px; height: 70px; top: 22px; }
.hamburger .text { display: block; width: 88px; height: 19px; color: #fff; font-family: 'Teko', sans-serif; letter-spacing: .2em; font-size: 2.5rem; font-weight: 300; position: relative; }
.hamburger .text span { display: block; position: absolute; transition: .5s; }
.hamburger .text span:last-of-type { opacity: 0; }
.hamburger.opened .text span:first-of-type { opacity: 0; }
.hamburger.opened .text span:last-of-type { opacity: 1; }
nav.gnav.main li { margin: 40px 0 40px 100px; }
nav.gnav.main li a { font-size: 2.8rem; }

}



/* footer
   ========================================================================== */

footer { color: #fff; background-color: #383838; position: relative; z-index: 1; }

footer .logo::after { background-image: url(../media/common/logo.svg); }

footer .contact > span,
footer .contact a { display: flex; justify-content: center; align-items: center; background-color: #8497ac; }
footer .contact > span { font-weight: 500; letter-spacing: .1em; background-color: #8497ac; }
footer .contact a { transition: .25s; }
footer .contact a:hover { background-color: #ff521e; }
footer .contact a span { display: flex; justify-content: flex-end; align-items: center; color: #fff; font-family: 'Teko', sans-serif; letter-spacing: .2em; font-weight: 300; background: url(../media/common/icon_contact.svg) no-repeat left center; }

footer .extras { display: flex; justify-content: space-between; }
footer .extras { letter-spacing: .08em; }
footer .extras .block:last-of-type { display: flex; flex-direction: column; justify-content: space-between; }
footer .extras a { color: #fff; transition: .25s; }
footer .extras a:hover { opacity: .6; }

footer nav.sub a { font-weight: 500; }

footer .logo span:last-of-type { display: block; font-weight: 400; }

footer nav.sns { display: flex; justify-content: space-between; align-items: flex-end; }
footer nav.sns span { font-weight: 400; }
footer nav.sns .twitter::after { background-image: url(../media/common/icon_twitter.svg); }
footer nav.sns .facebook::after { background-image: url(../media/common/icon_facebook.svg); }

footer p { font-weight: 400; line-height: 2; }
footer p.copy { letter-spacing: .04em; line-height: 1; text-align: right; }

@media (min-width: 320px) and (max-width: 736px) {

footer .logo { height: 26px; }

footer .contact > span,
footer .contact a { height: 65px; }
footer .contact a { background-color: #ff521e; }
footer .contact > span { font-size: 1.4rem; }
footer .contact a span { width: 175px; height: 100%; font-size: 2.4rem; background-size: 38px; background-position-y: calc(50% - 2px); margin-bottom: -2px; }

footer .extras { padding: 40px 30px 60px; }
footer .extras .block:first-of-type { width: 60%; }
footer .extras .block:last-of-type { width: 40%; }
footer .extras .block nav.sub a { display: block; font-size: 1rem; padding-bottom: 10px; }
footer .extras .block nav.gnav.sub a { font-size: 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, .25); margin-bottom: 25px; }

footer nav.sub ul { display: block; }

footer .logo span:last-of-type { font-size: .7rem; margin-top: 7px; }

footer nav.sns { width: 120px; }
footer nav.sns span { font-size: 1rem; font-weight: 400; }
footer nav.sns .twitter { width: 26px; height: 21px; }
footer nav.sns .facebook { width: 23px; height: 23px; }

footer p { font-size: 1rem; line-height: 1.8; }
footer p.copy { position: absolute; right: 30px; bottom: 30px; }

footer p,
footer .extras .block:first-of-type nav.sub,
footer nav.sns { margin-top: 43px; }

}
@media (min-width: 737px) {

footer span.logo { width: 128px; height: 52px; }

footer .contact { display: flex; }
footer .contact > span,
footer .contact a { width: 50%; height: 180px; }
footer .contact > span { font-size: 2.2rem; }
footer .contact a span { width: 320px; height: 74px; font-size: 4rem; background-size: 74px; }

footer .extras { padding: 70px 150px 100px; }
footer .extras .block:first-of-type { width: 290px; }
footer .extras .block:last-of-type { width: 700px; }
footer .extras .block nav.sub a { font-size: 1.4rem; }
footer .extras .block nav.gnav.sub a { font-size: 1.6rem; }

footer nav.sub ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
footer nav.sub ul li { margin-bottom: 15px; }
footer .extras .block:first-of-type nav.sub ul li:last-child { margin-bottom: 0; }

footer .logo span:last-of-type { font-size: 1.2rem; margin-top: 10px; }

footer nav.sns { width: 160px; }
footer nav.sns span { font-size: 1.4rem; font-weight: 400; }
footer nav.sns .twitter { width: 35px; height: 28px; }
footer nav.sns .facebook { width: 30px; height: 30px; }

footer p { font-size: 1.2rem; line-height: 2; }

footer p,
footer .extras .block:first-of-type nav.sub,
footer nav.sns { margin-top: 50px; }

}



/* general
   ========================================================================== */

.columned { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.styled.columned > table { margin: 0; }

a.more { display: block; border-bottom: 5px solid rgba(0, 0, 0, .06); padding-bottom: 10px; position: relative; }
a.more::after { content: ''; display: block; width: 20%; height: 5px; background-color: #ff521e; position: absolute; left: 0; bottom: -5px; transition: .25s; transform-origin: left center; }
a.more:hover::after { transform: scaleX(5); }
a.more span { color: #ff521e; font-size: 1.4rem; font-weight: 500; }
.styled a.more { line-height: 1; text-decoration: none; }

/* nav: tab */
nav.tab { display: flex; justify-content: center; }
nav.tab a { display: inline-block; color: #383838; font-weight: 500; text-align: center; border-bottom-style: solid; border-bottom-color: transparent; transition: .25s; }
nav.tab a.selected,
nav.tab a:hover { color: #ff521e; border-bottom-color: #ff521e; }
.page-header nav.tab { box-sizing: border-box; position: absolute; bottom: 0; }

/* index-list */
ul.index-list li { border-bottom: 1px dotted #383838; }
ul.index-list li a span { color: #383838; transition: .25s; }
ul.index-list li a .extras { display: flex; }
ul.index-list li a .date span,
ul.index-list li a .date b { display: inline-block; font-family: 'Teko', sans-serif; font-weight: 300; }
ul.index-list li a .badge { display: flex; justify-content: center; align-items: center; font-family: 'Teko', sans-serif; font-weight: 300; letter-spacing: .22em; background-color: #fff; }
ul.index-list li a .heading { font-weight: 400; line-height: 2; letter-spacing: .02em; }
ul.index-list li a .heading b { font-weight: 400; }

/* index-grid */
ul.index-grid { display: flex; justify-content: center; flex-wrap: wrap; }
ul.index-grid li { background-color: #fff; }
ul.index-grid li > span,
ul.index-grid li a { display: block; width: 100%; }
ul.index-grid li figure { background: url(../media/common/logo.svg) no-repeat center center #383838; position: relative; }
ul.index-grid li figure img { object-fit: cover; }
ul.index-grid li a figure:after { content: ''; display: block; width: 100%; height: 100%; background-color: #383838; position: absolute; left: 0; top: 0; opacity: 0; transition: .25s; }
ul.index-grid li a:hover figure:after { opacity: .4; }
ul.index-grid li a:hover figure img { opacity: 1; }
ul.index-grid li .text { display: block; }
ul.index-grid li .extras { display: flex; color: #383838; font-weight: 400; }
ul.index-grid li .extras .category { color: #ff521e; }
ul.index-grid li .heading { color: #383838; font-weight: 400; line-height: 1.8; letter-spacing: .02em; transition: .25s; }
ul.index-grid li a:hover .heading { color: #ff521e; }

/* pagination */
nav.pagination ul { display: flex; justify-content: center; align-items: center; }
nav.pagination li:last-child { margin-right: 0; }
nav.pagination li > span,
nav.pagination li a { display: inline-flex; justify-content: center; align-items: center; height: 54px; color: #383838; font-weight: 500; letter-spacing: .06em; border: 1px solid #383838; box-sizing: border-box; transition: .25s; }
nav.pagination li.square a { width: 54px; padding: 0; }
nav.pagination li a:hover,
nav.pagination li a.selected { color: #fff; background-color: #383838; }
nav.pagination li > span span,
nav.pagination li a span { display: inline-block; }
nav.pagination li a.next span { background: url(../media/common/icon_next.svg) no-repeat right center; padding-right: 20px; }
nav.pagination li a.next.img,
nav.pagination li a.previous.img { display: flex; justify-content: center; align-items: center; padding: 0; }
nav.pagination li a.next.img span { font-size: 0; background: url(../media/common/icon_next.svg) no-repeat center center; padding-right: 0; }
nav.pagination li a.next:hover span,
nav.pagination li a.next.img:hover span { background-image: url(../media/common/icon_next_w.svg); }
nav.pagination li a.previous span { background: url(../media/common/icon_previous.svg) no-repeat left center; padding-left: 20px; }
nav.pagination li a.previous.img span { font-size: 0; background: url(../media/common/icon_previous.svg) no-repeat center center; padding-left: 0; }
nav.pagination li a.previous:hover span,
nav.pagination li a.previous.img:hover span { background-image: url(../media/common/icon_previous_w.svg); }

@media (min-width: 320px) and (max-width: 736px) {

a.more { border-bottom-width: 3px; padding-bottom: 5px; }
a.more::after { height: 3px; bottom: -3px; }
a.more span { font-size: 1rem; }

/* nav: tab */
nav.tab { width: 100%; padding: 0 20px; }
nav.tab a { width: 167px; font-size: 1.2rem; letter-spacing: .1em; border-bottom-width: 4px; padding-bottom: 15px; }

/* index-list */
ul.index-list li a { display: block; padding: 20px 0 15px; }
ul.index-list li a .extras { display: flex; margin-bottom: 15px; }
ul.index-list li a .date { margin-right: 20px; }
ul.index-list li a .date span,
ul.index-list li a .date b { font-size: 1.1rem; }
ul.index-list li a .date span br { display: none; }
ul.index-list li a .badge { width: 50px; height: 10px; font-size: .9rem; }
ul.index-list li a .heading { font-size: 1rem; }

/* index-grid */
ul.index-grid { margin: 30px 20px 40px; }
ul.index-grid li { width: 100%; margin-bottom: 10px; }
ul.index-grid li figure { width: 100%; height: 100px; background-size: 85px auto; }
ul.index-grid li figure img { width: 100%; height: 100px; }
ul.index-grid li .text { padding: 25px; }
ul.index-grid li .extras { font-size: .8rem; margin-bottom: 15px; }
ul.index-grid li .extras .category { margin-right: 10px; }
ul.index-grid li .heading { font-size: 1rem; }

/* pagination */
nav.pagination { margin-bottom: 40px; }
nav.pagination ul { flex-wrap: wrap; }
nav.pagination li { margin: 0 5px 10px 5px; }
nav.pagination li > span,
nav.pagination li a { height: 38px; font-size: 1.2rem; padding: 0 20px; }
nav.pagination li.square a { width: 38px; }
nav.pagination li a.next span,
nav.pagination li a.next.img span,
nav.pagination li a.previous span,
nav.pagination li a.previous.img span { background-size: 8px 9px; }
nav.pagination li a.next.img span,
nav.pagination li a.previous.img span { width: 8px; height: 9px; }

}
@media (min-width: 737px) {

.styled.columned > table { width: 45%; }

/* nav: tab */
nav.tab { display: flex; justify-content: center; }
nav.tab a { width: 342px; font-size: 1.8rem; letter-spacing: .22em; padding-bottom: 38px; }
nav.tab a.selected,
nav.tab a:hover { color: #ff521e; border-bottom-color: #ff521e; }
.page-header nav.tab { width: 1000px; }

/* index-list */
ul.index-list li a { display: flex; justify-content: center; align-items: flex-start; padding: 35px 0; }
ul.index-list li a .extras { display: flex; justify-content: space-between; flex: 0 0 27.5%; }
ul.index-list li a .date { width: 56%; display: flex; align-items: flex-end; margin-top: 3px; }
ul.index-list li a .date span,
ul.index-list li a .date b { font-size: 2.2rem; }
ul.index-list li a .date span { margin-bottom: 8px; }
ul.index-list li a .date b { font-size: 5.5rem; }
ul.index-list li a .badge { width: 44%; height: 22px; font-size: 1.6rem; margin: 8px 30px 0 0; }
ul.index-list li a .heading { flex: 1 1 72.5%; font-size: 1.6rem; }

/* index-grid */
ul.index-grid { width: 1035px; margin: 60px auto; }
ul.index-grid li { width: 315px; min-height: 480px; margin: 0 15px 30px 15px; }
ul.index-grid li > span,
ul.index-grid li a { width: 100%; height: 100%; }
ul.index-grid li figure { width: 100%; height: 160px; background-size: 130px auto; }
ul.index-grid li figure img { width: 100%; height: 160px; }
ul.index-grid li .text { padding: 35px; }
ul.index-grid li .extras { font-size: 1.4rem; letter-spacing: .08em; margin-bottom: 35px; }
ul.index-grid li .extras .category { margin-right: 15px; }
ul.index-grid li .heading { font-size: 1.6rem; }

/* pagination */
nav.pagination { margin-bottom: 120px; }
nav.pagination li { margin: 0 0 15px 15px; }
nav.pagination li > span,
nav.pagination li a { font-size: 1.6rem; padding: 0 30px; }
nav.pagination li a.next span,
nav.pagination li a.next.img span,
nav.pagination li a.previous span,
nav.pagination li a.previous.img span { background-size: 11px 12px; }
nav.pagination li a.next.img span,
nav.pagination li a.previous.img span { width: 11px; height: 12px; }

}
@media all and (-ms-high-contrast:none) {
.page-header nav.tab { left: calc(50% - 500px); }
}



/* ==========================================================================
   article
   ========================================================================== */

/* page-header */
.page-header { display: flex; justify-content: center; align-items: center; flex-direction: column; border-bottom: 1px solid #c8c8c8; background-color: #fff; position: relative; }
.page-header h1 span { display: block; }
.page-header h1 .text { font-family: 'Teko', sans-serif; font-weight: 300; letter-spacing: .08em; line-height: 1; text-align: center; }

/* page-header: billboard */
.page-header.billboard { display: block; border: none; background-color: #8898a8; }
.page-header.billboard h1 { background-repeat: no-repeat; }
.page-header.billboard h1 .text { color: #fff; text-align: left; }

/* page-header: animation */
.page-header h1 { opacity: 0; transform: translateY(-10px); animation: fadein_page_header 1s ease-out 0s forwards; }
@keyframes fadein_page_header { 100% { opacity: 1; transform: translateY(0); } }

/* section: constructed */
body.common.constructed section,
body.common.constructed section > .block { box-sizing: border-box; position: relative; }
body.common.constructed section .block.main { background-color: #fff; }
body.common.constructed section .block.main .inner { position: relative; z-index: 1; }
body.common.constructed section .nombre { font-family: 'Teko', sans-serif; font-weight: 300; letter-spacing: .2em; line-height: 1; }
body.common.constructed section .shoulder { color: #f0f0f0; font-family: 'Barlow Semi Condensed', sans-serif; line-height: .85; font-weight: 500; writing-mode: vertical-rl; cursor: default; position: absolute; }
body.common.constructed section h2 .heading { display: flex; font-family: 'Teko', sans-serif; font-weight: 300; letter-spacing: .08em; line-height: 1; }
body.common.constructed section h2 .heading::before { content: ''; display: block; background-color: #ff521e; }
body.common.constructed section h2 .sub { display: block; font-family: 'Teko', sans-serif; font-weight: 300; letter-spacing: .2em; }

/* article-header */
.article-header .extras span,
.article-header .author span { display: inline-block; }
.article-header .extras { font-weight: 400; text-align: right; }
.article-header .category { color: #ff521e; margin-right: 1em; }
.article-header .author { font-weight: 500; }

@media (min-width: 320px) and (max-width: 736px) {

/* page-header */
.page-header { height: 190px; }
.page-header h1 { padding: 0 20px; }
.page-header h1 .heading { font-size: 3.8rem; }
.page-header h1 .sub { font-size: 1rem; letter-spacing: .08em; }

/* page-header: billboard */
.page-header.billboard { height: 210px; }
.page-header.billboard h1 { height: 210px; }
.page-header.billboard h1 .text { position: absolute; left: 30px; top: 95px; }

/* section: constructed */
body.common.constructed section > .block { padding: 30px; }
body.common.constructed section .nombre { font-size: 1rem; margin-bottom: 45px; }
body.common.constructed section .nombre b { font-size: 1.4rem; }
body.common.constructed section .shoulder { font-size: 9rem; right: -11px; top: 20px; }
body.common.constructed section h2 { margin: 30px 0; }
body.common.constructed section h2 .heading { font-size: 2.2rem; }
body.common.constructed section h2 .heading::before { width: 3px; height: 16px; margin: 1px 12px 0 0; }
body.common.constructed section h2 .sub { font-size: .8rem; padding-left: 15px; margin-top: 5px; }

/* article-header */
.article-header { margin-bottom: 30px; }
.article-header .extras { font-size: .8rem; }
.article-header .author { font-size: .7rem; }
.article-header .author .heading { font-size: 1rem; }
.article-header .author .heading { margin-left: .5em; }

article .shoulder br { display: none; }
article .shoulder span:nth-child(n+2) { margin-top: .2em; }

}
@media (min-width: 737px) {

/* page-header */
.page-header { height: 430px; }
.page-header h1 .heading { font-size: 9rem; letter-spacing: .08em; }
.page-header h1 .sub { font-size: 2rem; letter-spacing: .1em; margin-top: 5px; }

/* page-header: billboard */
.page-header.billboard { height: 820px; }
.page-header.billboard h1 { height: 820px; }
.page-header.billboard h1 .text { position: absolute; left: 200px; top: 280px; }

/* section: constructed */
body.common.constructed section { margin-top: -140px; }

body.common.constructed section .block.main { display: flex; padding: 235px 0 250px; margin-right: 210px; }
body.common.constructed section .block.main .inner { flex: 1 0 655px; margin-left: 380px; }
body.common.constructed section .block.main::after { content: ''; display: block; flex: 0 1 540px; }
body.common.constructed section .nombre b { font-size: 3rem; }
body.common.constructed section .shoulder { font-size: 23rem; line-height: .85; right: -28px; top: 120px; }
body.common.constructed section h2 { margin-bottom: 90px; }
body.common.constructed section h2 .heading { font-size: 5.5rem; }
body.common.constructed section h2 .heading::before { width: 7px; height: 40px; margin: 3px 33px 0 0; }
body.common.constructed section h2 .sub { font-size: 2rem; padding-left: 40px; margin-top: 20px; }

body.common.constructed section .block.main h3 span { display: block; }
body.common.constructed section .block.main h3 br { display: none; }

/* article-header */
.article-header { margin-bottom: 70px; }
.article-header .extras { font-size: 1.4rem; letter-spacing: .08em; margin-bottom: 40px; }
.article-header .author { font-size: 1.2rem; }
.article-header .author .heading { font-size: 1.8rem; }
.article-header .author .heading { margin-left: 1em; }

}
@media all and (-ms-high-contrast:none) {
body.common.constructed section .shoulder { -ms-writing-mode: tb-rl; }
}



/* home
   ========================================================================== */

/* billboard */
body.home .page-header.billboard { height: 100vh; overflow: hidden; }
body.home .page-header.billboard h1 { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: rgba(0, 0, 0, .3); position: absolute; top: 0; }

body.home .page-header.billboard .scroll { position: absolute; }
body.home .page-header.billboard .scroll span { display: flex; align-items: center; color: #fff; font-family: 'Teko', sans-serif; letter-spacing: .2em; font-weight: 300; writing-mode: vertical-rl; cursor: default; }
body.home .page-header.billboard .scroll span::after { content: ''; display: block; width: 1px; background-color: #fff; }

/* billboard: animation */
body.home .page-header.billboard video { opacity: 0; animation: fadein_billboard_video 4s ease-out 1s forwards; }
@keyframes fadein_billboard_video { 100% { opacity: 1; } }
body.home .page-header.billboard .scroll { opacity: 0; transform: translateY(-20px); animation: fadein_scroll 1s ease-out 4s forwards, pulse 2s ease 6s infinite; }
@keyframes fadein_scroll { 100% { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { transform: translateY(0); } 50% { transform: translateY(10px); } 100% { transform: translateY(0); } }

/* section */
body.home section { position: relative; }
body.home section h2 { font-family: 'Teko', sans-serif; font-weight: 300; }

body.home section.vision > .image,
body.home section.casestudy > .image,
body.home section.recruit > .image { background-repeat: no-repeat; background-color: #8b98a9; position: absolute; }

body.home section h2 > span { display: inline-flex; align-items: center; }
body.home section h2 > span > .sub { letter-spacing: .1em; }
body.home section h2 .heading { display: inline-block; letter-spacing: .12em; border-bottom: 1px solid #383838; }
body.home section.technology h2 .heading,
body.home section.product h2 .heading { border-bottom-color: #fff; }

body.home section h3 { font-weight: 700; }
body.home section p { font-weight: 400; }

/* section: technology */
body.home section.technology { display: flex; flex-direction: column; align-items: center; }
body.home section.technology::before { content: ''; display: block; width: 100%; background-color: #383838; position: absolute; left: 0; top: 0; }
body.home section.technology h2 { color: #fff; text-align: center; position: relative; z-index: 1; }
body.home section.technology .columned { background-color: #fff; position: relative; }
body.home section.technology .block { background-repeat: no-repeat; }
body.home section.technology .block:nth-of-type(1) { background-image: url(../media/home/technology_image_01.svg); }
body.home section.technology .block:nth-of-type(2) { background-image: url(../media/home/technology_image_02.svg); }
body.home section.technology .block:nth-of-type(3) { background-image: url(../media/home/technology_image_03.svg); }

/* section: product */
body.home section.product h3 .heading { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; }
body.home section.product a.more { border-bottom-color: rgba(255, 255, 255, .2); }

/* section: casestudy */
body.home section.casestudy .block { background-color: #fff; }
body.home section.casestudy a { display: inline-block; border-bottom-style: solid; border-bottom-color: #f0f0f0; position: relative; }
body.home section.casestudy a::after { content: ''; display: block; width: 20%; background-color: #ff521e; position: absolute; left: 0; transition: .25s; transform-origin: left center; }
body.home section.casestudy a:hover::after { transform: scaleX(5); }
body.home section.casestudy a > span { color: #383838; font-weight: 700; display: block; line-height: 1.2; }
body.home section.casestudy a .heading { font-size: 3rem; letter-spacing: .08em; margin-bottom: 15px; }
body.home section.casestudy a:last-child .heading { font-size: 2rem; }
body.home section.casestudy a .sub { font-family: 'Teko', sans-serif; font-weight: 300; letter-spacing: .2em; font-size: 1.6rem; }

/* section: newsandblog */
body.home section.newsandblog { display: flex; flex-direction: column; align-items: center; }
body.home section.newsandblog h2 { text-align: center; }

@media (min-width: 320px) and (max-width: 736px) {

/* billboard */
body.home .page-header.billboard video { display: block; width: 100%; height: 100vh; object-fit: cover; }
body.home .page-header.billboard h1 { justify-content: space-around; padding: 0; }
body.home .page-header.billboard h1 .text { padding: 0 10px; position: relative; left: auto; top: auto; }
body.home .page-header h1 .heading { font-size: 5rem; line-height: 1.7; letter-spacing: .1em; }
body.home .page-header h1 .sub { font-size: 2.5rem; letter-spacing: .1em; margin-top: 45px; }
body.home .page-header.billboard .scroll { width: 10px; height: 100px; right: 20px; bottom: 35px; }
body.home .page-header.billboard .scroll span { font-size: .9rem; }
body.home .page-header.billboard .scroll span::after { height: 55px; margin-top: 10px; }

/* section */
body.home section > .text { width: calc(100% - 40px); background-color: #fff; padding: 30px 40px 50px; box-sizing: border-box; margin-bottom: 230px; position: relative; z-index: 1; }

body.home section.vision > .image,
body.home section.casestudy > .image,
body.home section.recruit > .image { width: calc(100% - 30px); height: 335px; background-size: 800px; right: 0; bottom: -200px; }

body.home section h2 { margin-bottom: 20px; }
body.home section h2 > span { height: 20px; }
body.home section h2 > span > .sub { font-size: 2.2rem; margin-right: 5px; }
body.home section h2 .heading { font-size: 1.4rem; padding-bottom: 2px; }
body.home section h2 .heading .sub { font-size: .7rem; margin-right: 5px; }
body.home section.vision h2,
body.home section.recruit h2 { text-align: right; }
body.home section.vision h2 > span,
body.home section.recruit h2 > span { transform-origin: left top; }
body.home section.vision h2 > span { margin-right: -115px; }
body.home section.recruit h2 > span { margin-right: -125px; }
body.home section.vision h2 > span,
body.home section.product h2 > span,
body.home section.recruit h2 > span { transform: rotate(90deg); }

body.home section h3 { font-size: 2.2rem; letter-spacing: .07em; line-height: 1.8; margin-bottom: 20px; }
body.home section p { font-size: 1rem; line-height: 2; margin-top: 15px; }
body.home section a.more { margin-top: 35px; }

/* section: vision */
body.home section.vision { margin-top: -35px; }
body.home section.vision > .image { background-image: url(../media/billboard/about.jpg); background-position: calc(50% - 50px) calc(50% + 130px); background-size: 950px; }

/* section: technology */
body.home section.technology { padding-top: 30px; margin-bottom: 40px; }
body.home section.technology::before { height: 560px; }
body.home section.technology h2 { margin-bottom: 15px; }
body.home section.technology .columned { padding: 0 25px 10px; margin: 0 15px; }
body.home section.technology .block { border-bottom: 1px dotted #383838; background-position: left center; background-size: 112px auto; padding: 25px 0 25px 140px; }
body.home section.technology .columned .block:last-child { border-bottom: none; margin-bottom: 0; }
body.home section.technology h3 { font-size: 1.4rem; letter-spacing: .1em; margin-bottom: 5px; }
body.home section.technology p { font-size: 1rem; margin-top: 0; }

/* section: casestudy */
body.home section.casestudy { z-index: 1; }
body.home section.casestudy > .image { background-image: url(../media/billboard/casestudy.jpg); background-position: calc(50% - 80px) calc(50% + 30px); left: 0; right: auto; }
body.home section.casestudy .text { background-color: transparent; padding: 0; margin: 0 0 200px 40px; }
body.home section h2 { text-align: left; }
body.home section.casestudy .block { padding: 50px 40px; }
body.home section.casestudy a { border-bottom-width: 3px; padding-bottom: 7px; margin-bottom: 20px; }
body.home section.casestudy a::after { height: 3px; bottom: -3px; }
body.home section.casestudy a:last-child { margin-bottom: 0; }
body.home section.casestudy a span { font-size: 1.8rem; letter-spacing: .06em; }
body.home section.casestudy a .heading { font-size: 1.6rem; letter-spacing: .08em; margin-bottom: 5px; }
body.home section.casestudy a:last-child .heading { font-size: 1.2rem; line-height: 1.8; }
body.home section.casestudy a:last-child .heading span { display: none; }
body.home section.casestudy a .sub { font-family: 'Teko', sans-serif; font-weight: 300; letter-spacing: .2em; font-size: .9rem; }

/* section: product */
body.home section.product::before { content: ''; display: block; width: 100%; height: calc(100% + 335px); background-color: #383838; position: absolute; left: 0; bottom: 0; }
body.home section.product { overflow: hidden; }
body.home section.product > .text { width: 100%; color: #fff; background-color: #383838; padding-bottom: 60px; margin-bottom: 60px; }
body.home section.product > .text::before { content: ''; display: block; width: 190px; height: 220px; background: url(../media/home/product_image.png) no-repeat left center; background-size: cover; position: absolute; right: 0; bottom: -50px; }
body.home section.product .inner { padding-right: 130px; position: relative; z-index: 1; }
body.home section.product h2 { color: #fff; text-align: right; margin-bottom: 0; position: relative; right: -10px; top: 70px; z-index: 2; }
body.home section.product h3 .sub { display: block; font-size: .9rem; letter-spacing: .08em; }

/* section: recruit */
body.home section.recruit > .image { background-image: url(../media/billboard/recruit.jpg); background-position: calc(50% - 100px) calc(50% + 50px); }

/* section: newsandblog */
body.home section.newsandblog { padding: 0 30px; }
body.home section.newsandblog h2 { margin: 10px 0 10px; }
body.home section.newsandblog a.more { width: 250px; margin: 30px auto 50px; }

}
@media (max-width: 320px) {
body.home .page-header.billboard h1 { padding: 60px 0; box-sizing: border-box; }
}
@media (min-width: 737px) {

/* billboard */
body.home .page-header.billboard video { display: block; min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
body.home .page-header.billboard h1 .text { width: 1250px; position: relative; left: auto; top: auto; }
body.home .page-header h1 .heading { font-size: 10.2rem; line-height: 1.68; letter-spacing: .52em; }
body.home .page-header h1 .sub { font-size: 5.15rem; letter-spacing: .52em; margin-top: 40px; }
body.home .page-header.billboard .scroll { width: 20px; height: 220px; right: 70px; bottom: 30px; }
body.home .page-header.billboard .scroll span { font-size: 1.4rem; }
body.home .page-header.billboard .scroll span::after { height: 137px; margin-top: 23px; }

/* section */
body.home section.vision { margin-bottom: 180px; }
body.home section.technology { margin-bottom: 170px; }
body.home .wrapper.casestudy.product { margin-bottom: 250px; }
body.home section.casestudy { margin-bottom: 250px; }
body.home section.recruit { margin-bottom: 215px; }
body.home section.newsandblog { margin-bottom: 145px; }

body.home section.vision > .image,
body.home section.casestudy > .image,
body.home section.recruit > .image { width: calc(100% - 210px); height: 930px; left: 210px; top: 0; }

body.home section.vision > .text,
body.home section.casestudy > .text,
body.home section.recruit > .text { display: flex; }
body.home section.vision > .text,
body.home section.casestudy > .text,
body.home section.recruit > .text { position: relative; z-index: 1; }
body.home section.vision > .text::after,
body.home section.recruit > .text::after { content: ''; display: block; flex: 1 1 820px; }
body.home section.vision h2,
body.home section.product h2,
body.home section.recruit h2 { display: flex; justify-content: flex-end; min-width: 210px; flex: 0 0 210px; margin-top: 155px; }
body.home section.vision > .text .inner,
body.home section.recruit > .text .inner { flex: 1 1 410px; display: flex; flex-direction: column; justify-content: center; padding: 0 175px 0 150px; }
body.home section.vision > .text .block,
body.home section.casestudy .block,
body.home section.recruit > .text .block { height: 920px; flex: 1 0 950px; display: flex; justify-content: flex-end; background-color: #fff; margin-top: -70px; z-index: 1; }
body.home section.casestudy .block { justify-content: flex-start; }

body.home section h2 > span { display: inline-flex; align-items: center; height: 30px; }
body.home section h2 > span > .sub { font-size: 4rem; letter-spacing: .1em; margin-right: 10px; }
body.home section h2 .heading { display: inline-block; font-size: 2.5rem; letter-spacing: .12em; border-bottom: 1px solid #383838; padding-bottom: 5px; }
body.home section.technology h2 .heading,
body.home section.product h2 .heading { border-bottom-color: #fff; }
body.home section h2 .heading .sub { font-size: 1.2rem; margin-right: 10px; }

body.home section.vision h2,
body.home section.casestudy h2,
body.home section.product h2,
body.home section.recruit h2 { position: relative; }
body.home section.vision h2 > span,
body.home section.casestudy h2 > span,
body.home section.product h2 > span,
body.home section.recruit h2 > span { position: absolute; transform: rotate(90deg); transform-origin: left bottom; }
body.home section.vision h2 > span,
body.home section.recruit h2 > span { left: 210px; top: -50px; }
body.home section.product h2 > span { left: 0; top: -10px; }
body.home section.casestudy h2 > span { right: -310px; top: 30px; z-index: 2; }

body.home section h3 { font-size: 4rem; letter-spacing: .12em; line-height: 1.8; margin-bottom: 25px; }
body.home section p { font-size: 1.6rem; line-height: 2.6; }
body.home section a.more { margin-top: 70px; }

/* section: vision */
body.home section.vision > .image { background-image: url(../media/billboard/about.jpg); background-position: calc(50% + 190px) calc(50% + 160px); background-size: 3040px auto; animation: crawl-d 30s linear 1s forwards; }
@keyframes crawl-d { 100% { background-position: calc(50% + 90px) calc(50% + 60px); } }

/* section: technology */
body.home section.technology::before { height: 600px; }
body.home section.technology h2 { padding: 70px 0 40px; }
body.home section.technology .block { background-size: 234px auto; }
body.home section.technology .columned { display: block; width: calc(100% - 420px); padding: 90px 175px 60px; box-sizing: border-box; }
body.home section.technology .block { display: flex; align-items: flex-end; flex-direction: column; border-right: none; border-bottom: 1px dotted #383838; background-position: left top; background-size: 254px auto; min-height: 285px; margin-bottom: 65px; box-sizing: border-box; }
body.home section.technology .columned .block:last-child { border: none; margin-bottom: 0; }
body.home section.technology h3,
body.home section.technology p { width: 258px; }
body.home section.technology h3 { font-size: 2.5rem; line-height: 1; letter-spacing: .14em; margin-bottom: 10px; }
body.home section.technology p { font-size: 1.4rem; line-height: 2.3; }

/* section: casestudy */
body.home .wrapper.casestudy.product { position: relative; }
body.home .wrapper.casestudy.product::before { content: ''; display: block; width: 100%; height: 1000px; background-color: #383838; position: absolute; left: 0; bottom: 0; }

body.home section.casestudy > .image { background-image: url(../media/billboard/casestudy.jpg); background-position: calc(50% + 50px) calc(50% - 150px); left: auto; background-size: 2520px auto; transform: scaleX(-1); animation: crawl-v 30s linear 1s forwards; }
@keyframes crawl-v { 100% { background-position: calc(50% + 50px) calc(50% - 50px); } }

body.home section.casestudy h2 { flex: 1 1 960px; }

body.home section.casestudy .block { padding: 165px 210px 165px 250px; box-sizing: border-box; }
body.home section.casestudy .inner { flex: 0 0 490px; }
body.home section.casestudy a { border-bottom-width: 5px; padding-bottom: 12px; margin-bottom: 48px; }
body.home section.casestudy a:last-child { margin-bottom: 0; }
body.home section.casestudy a::after { height: 5px; bottom: -5px; }
body.home section.casestudy a .heading { font-size: 3rem; letter-spacing: .08em; margin-bottom: 10px; }
body.home section.casestudy a .heading br { display: none; }
body.home section.casestudy a .sub { font-family: 'Teko', sans-serif; font-weight: 300; letter-spacing: .2em; font-size: 1.6rem; }
body.home section.casestudy a:last-of-type .heading { font-size: 2rem; }

/* section: product */
body.home section.product > .text { display: flex; align-items: flex-end; padding-left: 210px; }
body.home section.product > .text .inner { flex: 1 0 450px; padding: 0 0 134px 170px; }

body.home section.product h2,
body.home section.product h3,
body.home section.product p { color: #fff; }
body.home section.product h2 { justify-content: flex-start; margin: 0 0 0 210px; top: -40px; }
body.home section.product h3 { letter-spacing: .08em; line-height: 1; margin-bottom: 60px; }
body.home section.product h3 span { display: block; }
body.home section.product h3 .heading { font-size: 5rem; margin-bottom: 20px; }
body.home section.product h3 .sub { font-size: 1.8rem; }
body.home section.product p { margin-top: 0; }
body.home section.product a.more { margin-top: 75px; }

body.home section.product .image { height: 660px; flex: 1 1 1090px; margin-top: -160px; position: relative; }
body.home section.product .image::after { content: ''; display: block; width: 100%; height: 100%; flex: 0 1 1090px; background: url(../media/home/product_image.png) no-repeat; background-position: left top; background-size: 1075px auto; position: absolute; right: 0; bottom: -150px; }

/* section: recruit */
body.home section.recruit > .image { background-image: url(../media/billboard/recruit.jpg); background-position: calc(50% + 45px) calc(50% - 30px); background-size: 2600px auto; animation: crawl-h 30s linear 1s forwards; }
@keyframes crawl-h { 100% { background-position: calc(50% - 55px) calc(50% - 30px); } }

/* section: newsandblog */
body.home section.newsandblog h2,
body.home section.newsandblog ul.index-list { width: calc(100% - 420px); }
body.home section.newsandblog a.more { width: 500px; margin-top: 90px; }
body.home section.newsandblog h2 { text-align: center; margin-bottom: 55px; }

}
@media (min-width: 1366px) and (max-width: 1617px) {
body.home section.casestudy > .image { background-position: 57.5% calc(50% - 150px); transform: scaleX(-1); animation: crawl-v 30s linear 1s forwards; }
@keyframes crawl-v { 100% { background-position: 57.5% calc(50% - 50px); } }
}
@media (min-width: 1618px) {
body.home section.technology .columned { display: flex; padding: 60px 85px; }
body.home section.technology .block { align-items: center; flex: 1 1 254px; border-bottom: none; border-right: 1px dotted #383838; background-position: center top 30px; padding: 290px 42px 25px; margin-bottom: 0; }
body.home section.newsandblog h2,
body.home section.newsandblog ul.index-list { width: 1150px; }
}
@media all and (-ms-high-contrast:none) {
body.home .page-header.billboard .scroll span { -ms-writing-mode: tb-rl; }
body.home section.casestudy .block { max-width: 950px; }
body.home section.casestudy .block .inner { max-width: 530px; }
body.home section.casestudy a { display: inline-block; }
body.home section.vision > .text::after,
body.home section.recruit > .text::after { content: ''; display: block; flex: 1 1 450px; }
body.home section.product > .text { background-position: calc(50% + 700px) bottom; }
body.home section.product .text .block { width: 100%; }
}
@media (min-width: 1920px) and (-ms-high-contrast:none) {
body.home section.casestudy .block { max-width: none; }
body.home section.casestudy h2 > span { position: relative; }
}



/* about
   ========================================================================== */

body.about .page-header.billboard h1 { background-image: url(../media/billboard/about.jpg); }
body.about section.about_01 .block.sub { color: #fff; background-color: #383838; }
body.about section.about_01 .block.sub h4 { font-weight: 500; letter-spacing: .12em; }
body.about section.about_01 .block.sub h4 .text span { display: block; }
body.about section.about_01 .block.sub h4 .text > .heading { display: flex; align-items: flex-end; }
body.about section.about_01 .block.sub h4 a { color: #ff521e; transition: .25s; }
body.about section.about_01 .block.sub h4 a:hover { opacity: .8; }
body.about section.about_02 .map { position: absolute; left: 0; }
body.about section.about_02 .map iframe { filter: grayscale(100%); }

body.about section.about_02 table:first-of-type td a { color: #ff521e; }
body.about section.about_02 table:first-of-type td a:hover { color: #383838; }

@media (min-width: 320px) and (max-width: 736px) {
body.about .page-header.billboard h1 { background-position: center calc(50% - 50px); background-size: 1000px auto; }
body.about section.about_01 .block.main { padding-bottom: 115px; }
body.common.constructed.about section.about_01 > .block.sub { padding: 120px 30px 75px; }
body.about section.about_01 .block.sub::after { content: ''; display: block; width: calc(100% - 30px); height: 140px; background: url(../media/about/ceo.jpg) no-repeat; background-position: center -80px; background-size: 500px auto; position: absolute; right: 0; top: -70px; }
body.about section.about_01 .block.sub .styled p,
body.about section.about_01 .block.sub .styled h5 { font-size: 1rem; line-height: 2; }
body.about section.about_01 .block.sub h4 { display: flex; justify-content: flex-start; align-items: flex-end; margin-bottom: 40px; }
body.about section.about_01 .block.sub h4 .text > .heading { display: block; font-size: 2.2rem; }
body.about section.about_01 .block.sub h4 .text > .heading .sub { display: block; font-size: 1rem; font-weight: 500; margin: 10px 0 30px; }
body.about section.about_01 .block.sub h4 .text > .sub { font-size: 1.3rem; margin-bottom: 20px; }
body.about section.about_01 .block.sub h4 a { font-size: 1rem; margin-left: 40px; }

body.about section.about_01 .block.sub .inner { position: relative; z-index: 2; }
body.about section.about_01 .block.sub .shoulder { color: rgba(0, 0, 0, .4); top: 95px; z-index: 1; }

body.about section.about_02 .block.main { padding-bottom: 274px; }
body.about section.about_02 .map { width: 100%; height: 214px; bottom: 0; }
body.about section.about_02 .map iframe { height: 214px; }
}
@media (min-width: 737px) {

body.about .page-header.billboard h1 { background-position: left 52% top -955px; background-size: 3000px auto; }

body.about section.about_01 { overflow: hidden; }

body.about section.about_01 .block.main .inner { margin-bottom: 120px; }

body.about section.about_01 .block.sub { padding: 415px 210px 325px 380px; box-sizing: border-box; }
body.about section.about_01 .block.sub::before { content: ''; display: block; width: calc(100% - 210px); height: 524px; background: url(../media/about/ceo.jpg) no-repeat #cecdd2; background-position: calc(50% - 1px) calc(50% + 220px); background-size: 1500px auto; position: absolute; left: 210px; top: -254px; }
body.about section.about_01 .block.sub .inner { width: 630px; position: relative; z-index: 1; }
body.about section.about_01 .block.sub .shoulder { color: rgba(0, 0, 0, .4); right: 180px; top: auto; bottom: 490px; }
body.about section.about_01 .block.sub .shoulder span { display: block; }
body.about section.about_01 .block.sub .inner p:last-of-type { margin-bottom: 0; }

body.about section.about_01 .block.sub .styled p { font-size: 1.4rem; line-height: 2.3; margin: 0 0 35px; }
body.about section.about_01 .block.sub .styled h5 { font-size: 1.6rem; margin-bottom: 20px; }
body.about section.about_01 .block.sub h4 { display: flex; align-items: flex-end; margin-bottom: 40px; }
body.about section.about_01 .block.sub h4 .text { display: flex; align-items: flex-end; }
body.about section.about_01 .block.sub h4 .text > .heading { font-size: 4rem; }
body.about section.about_01 .block.sub h4 .text > .sub { font-size: 1.8rem; margin-right: 20px; }
body.about section.about_01 .block.sub h4 a { font-size: 1.4rem; margin-left: 140px; }
body.about section.about_02 { margin-bottom: 500px; }
body.about section.about_02 .block.main { z-index: 1; }
body.about section.about_02 .map { width: 100%; bottom: -500px; }
body.about section.about_02 .map iframe { height: 745px; }

}
@media (min-width: 737px) and (max-width: 1919px) {
body.common.constructed.about section.about_01 .block.sub { display: block; }
}
@media (min-width: 1920px) {
body.about section.about_01 .block.sub .inner { padding-right: 540px; }
}



/* case study
   ========================================================================== */

body.casestudy .page-header.billboard h1 { background-image: url(../media/billboard/casestudy.jpg); }
body.casestudy section .block.sub { color: #fff; background-color: #383838; }

body.casestudy section h3 span { display: block; }
body.casestudy section .styled th { color: #383838; }

/* lnav */
body.casestudy nav.lnav a { display: flex; align-items: center; background-color: #fff; position: relative; transition: .25s; }
body.casestudy nav.lnav a > span { display: flex; justify-content: center; align-items: center; height: 100%; transition: .5s; }
body.casestudy nav.lnav a > .sub { font-weight: 700; letter-spacing: .09em; background-repeat: no-repeat; background-position: left center; background-color: #fff; position: relative; }
body.casestudy nav.lnav a > .sub span { color: rgba(255, 255, 255, 0); z-index: 1; }
body.casestudy nav.lnav a > .sub::before { content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6); position: absolute; left: 0; top: 0; opacity: 0; transition: .5s; }
body.casestudy nav.lnav a.casestudy_01 > .sub { background-image: url(../media/casestudy/casestudy_01.jpg); }
body.casestudy nav.lnav a.casestudy_02 > .sub { background-image: url(../media/casestudy/casestudy_02.jpg); }
body.casestudy nav.lnav a.casestudy_03 > .sub { background-image: url(../media/casestudy/casestudy_03.jpg); }
body.casestudy nav.lnav a.casestudy_04 > .sub { background-image: url(../media/casestudy/casestudy_04.jpg); }
body.casestudy nav.lnav a.casestudy_05 > .sub { background-image: url(../media/casestudy/casestudy_05_01.jpg); }
body.casestudy nav.lnav a > .heading { color: #383838; font-family: 'Teko', sans-serif; font-weight: 300; opacity: .3; }
body.casestudy nav.lnav a > .heading > span { display: flex; align-items: flex-end; }
body.casestudy nav.lnav a > .heading > span span:first-child { letter-spacing: .08em; background: url(../media/casestudy/arrow_bg_lnav.svg) no-repeat right bottom; }
body.casestudy nav.lnav a > .heading > span span:last-child { letter-spacing: .04em; }

body.casestudy nav.lnav a:hover > .sub span { color: #fff; }
body.casestudy nav.lnav a:hover > .sub::before { opacity: 1; }
body.casestudy nav.lnav a:hover > .heading { opacity: 1; }

body.casestudy_01 nav.lnav a.casestudy_01,
body.casestudy_02 nav.lnav a.casestudy_02,
body.casestudy_03 nav.lnav a.casestudy_03,
body.casestudy_04 nav.lnav a.casestudy_04,
body.casestudy_05 nav.lnav a.casestudy_05 { display: none; }

/* casestudy_05 */
body.common.constructed.casestudy_05 section.others_02 .block.main { background-color: #383838; }
body.casestudy_05 section.others_02 h2 .heading,
body.casestudy_05 section.others_02 h2 .sub,
body.casestudy_05 section.others_02 h3,
body.casestudy_05 section.others_02 h5,
body.casestudy_05 section.others_02 p { color: #fff; }
body.casestudy_05 section.others_02 .shoulder { color: rgba(0, 0, 0, .4); }

@media (min-width: 320px) and (max-width: 736px) {

body.casestudy .page-header.billboard h1 { background-position: calc(50% + 30px) calc(50% - 70px); background-size: 800px auto; }
body.casestudy section .block.sub::after { content: ''; display: block; width: calc(100% - 30px); height: 140px; flex: none; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; right: 0; }

body.casestudy_01 section .block.sub::after { background-image: url(../media/casestudy/casestudy_01.jpg); top: -80px; }
body.casestudy_02 section .block.sub::after { background-image: url(../media/casestudy/casestudy_02.jpg); bottom: 50px; }
body.casestudy_03 section .block.sub::after { background-image: url(../media/casestudy/casestudy_03.jpg); bottom: 50px; }
body.casestudy_04 section .block.sub::after { background-image: url(../media/casestudy/casestudy_04_fig.jpg); background-position: left center; background-size: 140px; bottom: 50px; z-index: 1; }

body.common.constructed.casestudy section .block.main { padding-bottom: 95px; }
body.casestudy section .block.sub { min-height: 140px; padding: 0; }
body.casestudy section h3 .sub { font-size: 1.4rem; letter-spacing: .02em; margin-top: 10px; }
body.casestudy section .columned.styled { margin-top: 15px; }
body.casestudy .styled th { color: #383838; font-size: 1.2rem; padding-bottom: 0; }
body.casestudy .styled th,
body.casestudy .styled td { line-height: 2; }
body.casestudy .styled table tr:last-child td:last-child { padding-bottom: 5px; }

/* lnav */
body.casestudy nav.lnav { padding: 40px 0; }
body.casestudy nav.lnav a { width: calc(100% - 30px); height: 65px; background-size: auto 65px; margin: 0 0 15px 30px; }
body.casestudy nav.lnav a:hover { opacity: .8; }
body.casestudy nav.lnav a > .sub { width: 166px; background-size: cover; }
body.casestudy nav.lnav a > .sub span { font-size: 1rem; line-height: 2; }
body.casestudy nav.lnav a > .heading { width: calc(100% - 166px); }
body.casestudy nav.lnav a > .heading > span { width: 115px; height: 25px; margin-top: -5px; }
body.casestudy nav.lnav a > .heading > span span:first-child { font-size: 1.5rem; height: 14px; background-size: auto 8px; padding: 0 15px 0 0; margin-right: 10px; }
body.casestudy nav.lnav a > .heading > span span:last-child { font-size: 3.5rem; height: 25px; }
body.casestudy nav.lnav li.others a > .heading > span span:first-child { width: 100%; font-size: 2.6rem; padding-bottom: 0; }
body.casestudy nav.lnav ul li:last-child a { margin-bottom: 0; }
body.casestudy nav.lnav ul li:last-child a > .heading > span { margin-bottom: -4px; }

/* casestudy_01 */
body.common.constructed.casestudy_01 section .block.main { padding-bottom: 115px; }
body.casestudy_01 section .block.sub { padding: 105px 30px 50px; }
body.casestudy_01 section .block.sub .inner p { font-size: 1rem; line-height: 2; letter-spacing: .02em; margin-bottom: 15px; }
body.casestudy_01 section .block.sub .inner figure { width: 284px; height: 200px; margin: 30px auto 0; }

/* casestudy_04 */
body.casestudy_04 section::after { content: ''; display: block; width: calc(100% - 170px); height: 140px; flex: none; background: url(../media/casestudy/casestudy_04.jpg) no-repeat; background-position: center center; background-size: auto 140px; position: absolute; right: 0; bottom: 50px; }

/* casestudy_05 */
body.casestudy_05 section::after { content: ''; display: block; width: calc(100% - 30px); height: 140px; flex: none; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; right: 0; }
body.common.constructed.casestudy_05 section.others_01 .block.main { padding-bottom: 230px; }
body.casestudy_05 section.others_01::after { background-image: url(../media/casestudy/casestudy_05_01.jpg); bottom: 110px; }
body.casestudy_05 section.others_01 .block.sub { min-height: 60px; }

body.casestudy_05 section.others_02 .block.sub::after { background-image: url(../media/casestudy/casestudy_05_02.jpg); bottom: 50px; }
body.casestudy_05 section.others_02 .block.main { padding-top: 0; padding-bottom: 110px; }
body.casestudy_05 section.others_02 h2 { margin-top: 0; }
body.casestudy_05 section.others_02 .shoulder { top: -40px; }

}
@media (min-width: 737px) {

body.casestudy section .block.sub::before { content: ''; display: block; width: calc(100% - 210px); height: 600px; flex: none; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; right: 0; bottom: 135px; }
body.casestudy_01 section .block.sub::before { background-image: url(../media/casestudy/casestudy_01.jpg); bottom: auto; top: -200px; }
body.casestudy_02 section .block.sub::before { background-image: url(../media/casestudy/casestudy_02.jpg); }
body.casestudy_03 section .block.sub::before { background-image: url(../media/casestudy/casestudy_03.jpg); }
body.casestudy_04 section .block.sub::before { background-image: url(../media/casestudy/casestudy_04_fig.jpg); background-position: left center; background-size: auto 600px; z-index: 1; }
body.casestudy_05 section.others_01 .block.sub::before { background-image: url(../media/casestudy/casestudy_05_01.jpg); z-index: 2; }
body.casestudy_05 section.others_02 .block.sub::before { background-image: url(../media/casestudy/casestudy_05_02.jpg); }

body.casestudy .page-header.billboard h1 { background-position: left 50% top -925px; background-size: 2700px auto; }

body.common.constructed.casestudy section .block.main { padding-bottom: 255px; }
body.casestudy section .block.sub { min-height: 615px; }
body.casestudy section h3 .sub { font-size: 2.2rem; letter-spacing: .08em; margin-top: 10px; }
body.casestudy section p:last-of-type { margin-bottom: 0; }
body.casestudy section .columned.styled { margin-top: 40px; }
body.casestudy section h5 { margin-top: 60px; }

/* lnav */
body.casestudy nav.lnav { padding: 120px 0; overflow: hidden; }
body.casestudy nav.lnav a { width: calc(100% - 210px); height: 180px; margin: 0 0 10px 210px; }
body.casestudy nav.lnav ul li:last-child a { margin-bottom: 0; }
body.casestudy nav.lnav a:hover { transform: translateX(10px); }
body.casestudy nav.lnav a > .sub { width: 530px; background-size: auto 220px; }
body.casestudy nav.lnav a > .sub span { font-size: 2.2rem; line-height: 2.3; }
body.casestudy nav.lnav a > .heading { width: calc(100% - 530px); }
body.casestudy nav.lnav a > .heading > span { width: 380px; margin-top: 20px; }
body.casestudy nav.lnav li.others a > .heading > span { margin-top: 10px; }
body.casestudy nav.lnav a > .heading > span span:first-child { font-size: 4.2rem; line-height: 30px; background-size: auto 23px; padding: 0 70px 5px 0; margin-right: 20px; }
body.casestudy nav.lnav a > .heading > span span:last-child { font-size: 9.7rem; line-height: 45px; }
body.casestudy nav.lnav li.others a > .heading > span span:first-child { width: 100%; font-size: 7.3rem; padding-bottom: 7px; }

/* casestudy_01 */
body.common.constructed.casestudy section .block.main { padding-bottom: 320px; }
body.casestudy_01 section .block.sub { background-color: #383838; padding: 530px 210px 105px 380px; }
body.casestudy_01 section .block.sub .columned { justify-content: normal; }
body.casestudy_01 section .block.sub .columned .text { max-width: 655px; flex: 1 1 100%; margin-bottom: 70px; }
body.casestudy_01 section .block.sub .columned .text p { font-size: 1.6rem; line-height: 2.6; letter-spacing: .02em; }
body.casestudy_01 section .block.sub .columned figure { width: 470px; height: 330px; flex: 0 0 470px; margin: 0 0 70px 45px; }

/* casestudy_04 */
body.casestudy_04 section::before { content: ''; display: block; width: calc(100% - 210px); height: 600px; flex: none; background: url(../media/casestudy/casestudy_04.jpg) no-repeat; background-position: calc(50% + 400px) center; background-size: cover; position: absolute; right: 0; bottom: 135px; z-index: 1; }
body.casestudy_04 h1 br { display: none; }

/* casestudy_05 */
body.common.constructed.casestudy_05 section.others_01 .block.main { padding-bottom: 880px; z-index: 1; }
body.casestudy_05 section.others_01 .block.sub { min-height: auto; }
body.casestudy_05 section.others_01 .block.sub::after { content: ''; display: block; width: 100%; height: 200px; background-color: #383838; position: absolute; bottom: 0; }

body.casestudy_05 section.others_02 { background-color: #383838; margin-top: 0; }
body.common.constructed.casestudy_05 section.others_02 .block.main { padding-bottom: 265px; }
body.casestudy_05 section.others_02 h2 .sub { color: #fff; }

}
@media (min-width: 1367px) {
body.casestudy_01 section .block.sub .columned .text { margin-right: 45px; }
}



/* recruit
   ========================================================================== */

body.recruit .page-header.billboard h1 { background-image: url(../media/billboard/recruit.jpg); }

body.recruit section.recruit_02 { display: flex; background-color: #383838; margin-top: 0; }
body.recruit section.recruit_02 p { color: #fff; font-weight: 400; }
body.recruit section.recruit_02 h2 { color: rgba(0, 0, 0, .4); font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; }

body.recruit article .shoulder br { display: inline; }
body.recruit article .shoulder span:nth-child(n+2) { margin-top: 0; }

section.recruit_02 h2 { display: flex; flex-wrap: wrap; }
section.recruit_03 table b { display: inline-block; margin-bottom: 10px; }

/* lnav */
body.recruit nav.lnav ul { display: flex; }
body.recruit nav.lnav ul li { display: block; }
body.recruit nav.lnav a { display: block; width: 100%; height: 100%; position: relative; }
body.recruit nav.lnav a.recruit_interview_01::after { background-image: url(../media/recruit/recruit_interview_01.jpg); background-position-x: 19%; background-color: #cccbd0; }
body.recruit nav.lnav a.recruit_interview_02::after { background-image: url(../media/recruit/recruit_interview_02.jpg); background-position-x: 21%; background-color: #d6d6d6; }
body.recruit nav.lnav a.recruit_interview_03::after { background-image: url(../media/recruit/recruit_interview_03.jpg); background-position-x: 19%; background-color: #dedede; }
body.recruit nav.lnav a.recruit_interview_04::after { background-image: url(../media/recruit/recruit_interview_04_s.jpg); background-position-x: center; background-color: #cccbd0; }
body.recruit nav.lnav a.recruit_interview_05::after { background-image: url(../media/recruit/recruit_interview_05_s.jpg); background-position-x: center; background-color: #d6d6d6; }

body.recruit nav.lnav a > span { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; color: #fff; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; background-color: rgba(0, 0, 0, .1); box-sizing: border-box; opacity: 0; z-index: 2; transition: .5s; position: absolute; left: 0; top: 0; }
body.recruit nav.lnav a:hover > span { opacity: 1; }
body.recruit nav.lnav a span .sub { display: block; }

/* modal */
.modal-content { display: none; width: 100%; background-color: #383838; position: fixed; left: 0; top: 0; z-index: 10; }
.modal-bg { display: none; width: 100%; height: 100vh; background-color: #383838; position: fixed; left: 0; top: 0; z-index: 9; }

.interview { color: #fff; height: 100vh; background-repeat: no-repeat; position: relative; }
.interview.recruit_interview_01 { background-image: url(../media/recruit/recruit_interview_01.jpg); background-color: #cccbd0; }
.interview.recruit_interview_02 { background-image: url(../media/recruit/recruit_interview_02.jpg); background-color: #d6d6d6; }
.interview.recruit_interview_03 { background-image: url(../media/recruit/recruit_interview_03.jpg); background-color: #dedede; }
.interview.recruit_interview_04 { background-color: #cccbd0; }

/* modal: nav */
.interview > .extras { display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; position: relative; }

nav.nombre li a { color: #ff521e; font-weight: 500; border-bottom-style: solid; border-bottom-color: rgba(255, 255, 255, 0); padding-bottom: 5px; position: relative; transition: .25s; }
nav.nombre li a::after { content: ''; display: block; background-color: #ff521e; position: absolute; left: 0; transition: .25s; }
nav.nombre li:last-child a { margin-bottom: 0; }
nav.nombre li a:hover { color: #fff; }
nav.nombre li a:hover::after { background-color: #fff; }
.interview.recruit_interview_01 nav.nombre li:nth-of-type(1) a,
.interview.recruit_interview_02 nav.nombre li:nth-of-type(2) a,
.interview.recruit_interview_03 nav.nombre li:nth-of-type(3) a,
.interview.recruit_interview_04 nav.nombre li:nth-of-type(4) a { color: #fff; border-bottom-color: #fff; cursor: default; pointer-events: none; }
.interview.recruit_interview_01 nav.nombre li:nth-of-type(1) a span,
.interview.recruit_interview_02 nav.nombre li:nth-of-type(2) a span,
.interview.recruit_interview_03 nav.nombre li:nth-of-type(3) a span,
.interview.recruit_interview_04 nav.nombre li:nth-of-type(4) a span { display: inline-block; }
.interview.recruit_interview_01 nav.nombre li:nth-of-type(1) a::after,
.interview.recruit_interview_02 nav.nombre li:nth-of-type(2) a::after,
.interview.recruit_interview_03 nav.nombre li:nth-of-type(3) a::after,
.interview.recruit_interview_04 nav.nombre li:nth-of-type(4) a::after { content: none; }
nav.nombre > .shoulder { display: block; color: rgba(255, 255, 255, .25); font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; }

.modal-close { display: block; position: relative; }
.modal-close span { font-size: 0; }
.modal-close::before,
.modal-close::after { content: ''; display: block; width: 1px; background-color: #fff; position: absolute; transition: .25s; }
.modal-close::before { transform: rotate(45deg); }
.modal-close::after { transform: rotate(-45deg); }
.modal-close:hover::before,
.modal-close:hover::after { background-color: #ff521e; }

/* modal: content */
.interview > .columned > .block { box-sizing: border-box; }

.interview > .extras::before,
.interview > .columned .block::before { content: ''; display: block; width: 100%; height: 100%; background-color: #383838; position: absolute; left: 0; top: 0; }

.interview > .columned > .block > .inner { position: relative; }
.interview h1 { font-weight: 700; }
.interview h3 { font-weight: 500; letter-spacing: .06em; }
.interview h3:first-child { margin-top: 0; }
.interview p { color: #c8c8c8; font-weight: 400; letter-spacing: .02em; }
.interview p.sub b { color: #fff; font-weight: 500; letter-spacing: 0.12em; line-height: 2.5; }
.interview .shoulder { color: #383838; mix-blend-mode: screen; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; }

@media (min-width: 320px) and (max-width: 736px) {

body.recruit .page-header.billboard h1 { background-position: calc(50% - 30px) center; background-size: 700px auto; }

body.common.constructed.recruit section.recruit_01 .block.main { padding-bottom: 105px; }
body.common.constructed.recruit section.recruit_02 .block { padding: 0 0 60px; }
body.recruit section.recruit_02 p { font-size: 1rem; line-height: 2; padding: 0 30px; }
body.recruit section.recruit_02 h2 { font-size: 9rem; line-height: .9; word-break: break-all; padding: 0 100px 0 30px; margin: -40px 0 20px; position: relative; z-index: 1; }
body.recruit article section.recruit_03 .shoulder br { display: none; }

body.recruit section.recruit_01 .block.main h3 { font-size: 0; }
body.recruit section.recruit_01 .block.main h3 span { font-size: 2.2rem; letter-spacing: .07em; }

body.recruit table:nth-of-type(2) { margin-bottom: 30px; }
body.recruit table:nth-of-type(2) tr:last-child { display: none; }

/* lnav */
body.recruit nav.lnav ul { justify-content: flex-end; flex-wrap: wrap; margin-top: -60px; }
body.recruit nav.lnav ul li { width: 115px; height: 180px; }
body.recruit nav.lnav a::after { background-size: 340px; }
body.recruit nav.lnav a.recruit_interview_04::after,
body.recruit nav.lnav a.recruit_interview_05::after { background-size: 155px; }
body.recruit nav.lnav a > span { font-size: 1.2rem; text-align: left; }
body.recruit nav.lnav a span .sub { display: block; font-size: 1rem; font-weight: 500; }

body.recruit nav.lnav a.recruit_interview_01::after { background-position-y: top; }
body.recruit nav.lnav a.recruit_interview_02::after { background-position-y: 3px; }
body.recruit nav.lnav a.recruit_interview_03::after { background-position-y: 4px; }
body.recruit nav.lnav a.recruit_interview_04::after { background-position-y: top; }
body.recruit nav.lnav a.recruit_interview_05::after { background-position-y: 7px; }

/* modal */
.modal-content { height: 100%; overflow: auto; }

.interview.recruit_interview_04 > .columned > .block,
.interview { background-position: -120px top; background-size: 1000px; }
.interview.recruit_interview_02,
.interview.recruit_interview_03 { background-position-y: 30px; }
@media (orientation: landscape) {
.interview.recruit_interview_01 { background-image: url(../media/recruit/recruit_interview_01.jpg); background-position-x: calc(0 - 10%); }
.interview.recruit_interview_02 { background-image: url(../media/recruit/recruit_interview_02.jpg); background-position-x: calc(0 - 10%); }
.interview.recruit_interview_03 { background-image: url(../media/recruit/recruit_interview_03.jpg); background-position-x: calc(0 - 10%); }
}

/* modal: nav */
.interview > .extras { height: 60px; padding: 0 30px; }
.interview > .extras div.nombre span { color: #fff; font-family: 'Teko', sans-serif; font-size: 2rem; font-weight: 300; letter-spacing: .05em; position: relative; top: 2px; }
.interview > .extras > nav.nombre { display: none; }

.interview > nav.nombre { width: 80px; padding: 60px 0; margin: 0 auto; position: relative; }
.interview > nav.nombre li a { display: block; font-size: 1rem; border-bottom-width: 3px; margin-bottom: 30px; }
.interview > nav.nombre li a::after { width: 100%; height: 3px; bottom: -3px; }

.interview > .columned nav.nombre ul,
.interview > nav.nombre > .shoulder { display: none; }

.interview > .columned nav.nombre > .shoulder { height: 400px; font-size: 4.2rem; line-height: .9; writing-mode: vertical-rl; cursor: default; position: absolute; right: -80px; top: 20px; z-index: 1; }

.modal-close { width: 20px; height: 20px; }
.modal-close::before,
.modal-close::after { height: 20px; left: 10px; top: 0; }

/* modal: content */
.interview > .columned { display: block; }
.interview > .columned > .block { background-repeat: no-repeat; padding: 0 30px; position: relative; }
.interview > .columned > .block:first-of-type { padding: 0 100px 0 30px; margin-top: 200px; }
.interview > .columned > .block:last-of-type { padding-top: 40px; }

.interview h1 { font-size: 2.2rem; letter-spacing: .05em; line-height: 1.8; padding-top: 40px; }
.interview h3 { font-size: 1.4rem; font-weight: 500; line-height: 1.8; border-bottom: 1px dotted #fff; padding-bottom: 15px; margin: 30px 0 20px; }
.interview p { font-size: 1rem; line-height: 2; margin-top: 15px; }
.interview p.sub { font-size: 1rem; }
.interview p.sub b { display: inline-block; font-size: 1.2rem; margin-bottom: 5px; }
.interview .shoulder { height: 400px; color: rgba(0, 0, 0, .4); mix-blend-mode: normal; font-size: 4rem; line-height: .9; writing-mode: vertical-rl; cursor: default; position: absolute; right: -70px; top: 20px; z-index: 1; }
.interview .shoulder span:nth-child(n+2) { margin-top: .3em; }

/* interview 04 */
.interview.recruit_interview_04 > .columned .block::before { top: 200px; }
.interview.recruit_interview_04 > .columned > .block { padding: 200px 30px 40px; }
.interview.recruit_interview_04 > .columned > .block:last-of-type { padding-bottom: 0; }
.interview.recruit_interview_04 > .columned > .block:first-of-type { background-image: url(../media/recruit/recruit_interview_04-05_h.jpg); background-position: -100px -40px; margin-top: 0; } 
.interview.recruit_interview_04 > .columned > .block:last-of-type { background-image: url(../media/recruit/recruit_interview_04-05_h.jpg); background-position: calc(100% + 100px) -50px; } 

.interview.recruit_interview_04 h1,
.interview.recruit_interview_04 p.sub { padding-right: 100px; }
.interview.recruit_interview_04 h1 { font-size: 1.8rem; }
.interview.recruit_interview_04 p.sub { border-bottom: 1px dotted #fff; padding-bottom: 30px; }
.interview.recruit_interview_04 .shoulder { right: 30px; top: 220px; }

}
@media (min-width: 737px) {

body.recruit .page-header.billboard h1 { background-position: left 55% top -850px; background-size: 2700px auto; }

body.common.constructed.recruit section.recruit_01 .block.main { padding-bottom: 310px; }

body.recruit section.recruit_02 { display: flex; background-color: #383838; margin-top: 0; }
body.recruit section.recruit_02::before { content: ''; flex: 0 0 210px; display: block; width: 210px; }
body.recruit section.recruit_02 .block { display: block; flex: 1 1 1710px; padding: 360px 0 260px; }
body.recruit section.recruit_02 p { font-size: 1.6rem; line-height: 2.6; margin-left: 170px; }
body.recruit section.recruit_02 h2 { color: rgba(0, 0, 0, .4); mix-blend-mode: normal; font-size: 23rem; margin: 50px 0; }

body.recruit table a.more { margin-top: 55px; }

/* lnav */
body.recruit nav.lnav ul { width: 100%; background-color: #fff; position: absolute; left: 0; top: -175px; }
body.recruit nav.lnav ul li { flex: 1 1 342px; width: 342px; height: 535px; }
body.recruit nav.lnav a.recruit_interview_01::after,
body.recruit nav.lnav a.recruit_interview_02::after,
body.recruit nav.lnav a.recruit_interview_03::after { background-size: 980px; }
body.recruit nav.lnav a.recruit_interview_04::after,
body.recruit nav.lnav a.recruit_interview_05::after { background-size: 450px; }
body.recruit nav.lnav a > span { font-size: 3.2rem; }
body.recruit nav.lnav a span .sub { font-size: 1.6rem; font-weight: 500; margin-top: 20px; }

body.recruit nav.lnav a.recruit_interview_01::after { background-position-y: top; }
body.recruit nav.lnav a.recruit_interview_02::after { background-position-y: 20px; }
body.recruit nav.lnav a.recruit_interview_03::after { background-position-y: 25px; }
body.recruit nav.lnav a.recruit_interview_04::after { background-position-y: top; }
body.recruit nav.lnav a.recruit_interview_05::after { background-position-y: 35px; }

/* modal */
.modal-content { height: 100vh; }

.interview { background-position: center top; background-size: cover; }
.interview.recruit_interview_02,
.interview.recruit_interview_03 { background-position-y: 50px; }

/* modal: nav */
.interview > .extras { height: 13vh; padding: 0 5%; }
.interview > .extras div.nombre { display: none; }
nav.nombre ul { display: flex; }
nav.nombre li a { display: inline-block; font-size: 1.4rem; border-bottom-width: 5px; padding-bottom: 10px; margin-right: 15px; }
nav.nombre li a::after { width: 100%; height: 5px; bottom: -5px; }
nav.nombre > .sub { font-size: 7rem; margin-top: 40px; }
nav.nombre li a span { display: none; }

.interview > nav.nombre { display: none; }

.modal-close { width: 40px; height: 40px; }
.modal-close::before,
.modal-close::after { width: 1px; height: 40px; left: 20px; top: 0; transition: .25s; }

/* modal: content */
.interview > .columned > .block { position: absolute; bottom: 0; }
.interview > .columned > .block:first-of-type { width: 54%; height: 60vh; padding: 0 0 0 8%; left: 0; }
.interview > .columned > .block:last-of-type { width: 46%; height: 87vh; padding: 0 8% 50px 4.5%; right: 0; }

.interview > .columned > .block .inner { height: 100%; padding-right: 60px; box-sizing: border-box; overflow: auto; }

.interview > .extras::before,
.interview > .columned .block::before { mix-blend-mode: multiply; }
.interview h1 { font-size: 3rem; letter-spacing: .1em; line-height: 1.8; margin: 50px 0 20px; }
.interview h1 > span { display: block; }
.interview h1 br { display: none; }
.interview h3 { font-size: 2.2rem; line-height: 1.6; border-bottom: 1px dotted #fff; padding-bottom: 20px; margin-top: 50px; }
.interview h3 br { display: none; }
.interview p { font-size: 1.6rem; line-height: 2.4; margin-top: 25px; }
.interview p.sub { font-size: 1.4rem; line-height: 2.1; margin: 0 0 40px; }
.interview p.sub b { display: inline-block; font-size: 1.8rem; margin-bottom: 5px; }
.interview .shoulder { font-size: 6.5rem; letter-spacing: .02em; }
.interview .shoulder span:nth-child(n+2) { margin-left: .3em; }

/* interview 04 */
.interview.recruit_interview_04 { background-image: url(../media/recruit/recruit_interview_04-05_h.jpg); }
.interview.recruit_interview_04 > .columned > .block:first-of-type { height: 63vh; padding: 0 8% 50px 5%; }
.interview.recruit_interview_04 > .columned > .block:last-of-type { height: 63vh; padding: 0 7% 50px 0; }
.interview.recruit_interview_04 h1 { font-size: 2.3rem; margin: 40px 0 15px; }
.interview.recruit_interview_04 p { width: 90%; font-size: 1.4rem; line-height: 2.1; margin-top: 10px; }
.interview.recruit_interview_04 p.sub { min-height: 137px; margin: 0; }
.interview.recruit_interview_04 p.sub b { margin-bottom: 0; }
.interview.recruit_interview_04 > .columned > .block .inner { height: 100%; padding-right: 0; overflow: auto; }

.interview.recruit_interview_04 > nav.nombre { display: none; }
.interview.recruit_interview_04 .shoulder { font-size: 4.5rem; writing-mode: vertical-rl; cursor: default; position: absolute; right: 12%; top: 150px; }
.interview.recruit_interview_04 .shoulder span:nth-child(n+2) { margin-top: .3em; }

}
@media (min-width: 737px) and (max-width: 1919px) {
body.recruit nav.lnav a.recruit_interview_01::after { background-position-x: 24%; }
body.recruit nav.lnav a.recruit_interview_02::after,
body.recruit nav.lnav a.recruit_interview_03::after { background-position-x: 25%; }
.interview.recruit_interview_04 > .columned > .block:first-of-type p.sub { width: 70%; }
.interview.recruit_interview_04 > .columned > .block:last-of-type p.sub { width: 90%; }
}
@media (min-width: 1920px) {
.interview > .extras { height: 13.3vh; }
.interview > .columned > .block:first-of-type { width: 50%; height: 49.5vh; }
.interview > .columned > .block:last-of-type { width: 50%; height: 86.7vh; }
.interview.recruit_interview_04 > .columned > .block:first-of-type { height: 53vh; padding: 0 10% 0 11%; }
.interview.recruit_interview_04 > .columned > .block:last-of-type { height: 53vh; padding: 0 16% 0 5%; }
.interview p.sub { width: 76.5%; }
.interview.recruit_interview_04 > .columned > .block:first-of-type p.sub { width: 61%; }
.interview.recruit_interview_04 > .columned > .block:last-of-type p.sub { width: 77%; }
}
@media all and (-ms-high-contrast:none) {
.interview > .extras::before,
.interview > .columned .block::before { background-color: rgba(56, 56, 56, .9); }
.interview > .columned nav.nombre > .shoulder,
.interview.recruit_interview_04 .shoulder { -ms-writing-mode: tb-rl; }
}
@supports (-ms-ime-align:auto) {
.interview > .extras::before,
.interview > .columned .block::before { background-color: rgba(56, 56, 56, .9); }
}
@media (width: 1366px) and (max-height: 767px) {
.interview.recruit_interview_01 { background-image: url(../media/recruit/recruit_interview_01_w.jpg); }
.interview.recruit_interview_02 { background-image: url(../media/recruit/recruit_interview_02_w.jpg); }
.interview.recruit_interview_03 { background-image: url(../media/recruit/recruit_interview_03_w.jpg); }
.interview.recruit_interview_02,
.interview.recruit_interview_03 { background-position-y: top; }
.interview > .extras { height: 100px; position: absolute; z-index: 1; }
.interview > .extras::before { background-color: transparent; }
.interview > .columned > .block { position: relative; left: auto; right: auto; }
.interview > .columned > .block:first-of-type,
.interview > .columned > .block:last-of-type { height: 100vh; }
.interview > .columned > .block:first-of-type { display: flex; justify-content: center; flex-direction: column; width: 740px; padding: 120px 270px 80px 8%; }
.interview > .columned > .block:first-of-type::before { width: 535px; }
.interview > .columned > .block:first-of-type::after { content: ''; display: block; width: 205px; height: 40px; background-color: #383838; mix-blend-mode: multiply; position: absolute; right: 0; bottom: 0; }
.interview > .columned > .block:last-of-type { width: 626px; padding: 90px 8% 40px 4.5%; }
.interview > .columned > .block:first-of-type .inner { height: 375px; padding-right: 0; }
.interview h1 { font-size: 2.8rem; line-height: 1.75; margin: 0 0 15px; }
.interview h1 > span:last-child br { display: inline; }
.interview h3 { font-size: 1.8rem; line-height: 1.8; }
.interview h3 br { display: inline; }
.interview p { font-size: 1.4rem; line-height: 2.3; margin-top: 20px; }
.interview p.sub { font-size: 1.2rem; margin: 0 0 20px; }
.interview p.sub b { font-size: 1.6rem; }
.interview .shoulder { font-size: 3.9rem; }
.interview.recruit_interview_04 { background-image: url(../media/recruit/recruit_interview_04-05_h_w.jpg); background-position-y: 20px; background-size: 1366px auto; }
.interview.recruit_interview_04 > .columned > .block:first-of-type,
.interview.recruit_interview_04 > .columned > .block:last-of-type { display: flex; justify-content: center; flex-direction: column; width: 650px; height: 100%; padding: 100px 210px 55px 70px; }
.interview.recruit_interview_04 > .columned > .block::before { width: 480px; }
.interview.recruit_interview_04 > .columned { justify-content: flex-start; height: 100%; position: relative; }
.interview.recruit_interview_04 > .columned::after,
.interview.recruit_interview_04 > .columned > .block::after { content: ''; display: block; background-color: #383838; mix-blend-mode: multiply; position: absolute; right: 0; bottom: 0; }
.interview.recruit_interview_04 > .columned::after { height: 100%; width: 66px; }
.interview.recruit_interview_04 > .columned > .block::after { width: 170px; height: 40px; }
.interview.recruit_interview_04 > .columned > .block .inner { height: 405px; }
.interview.recruit_interview_04 h1 { font-size: 2rem; line-height: 1.75; margin: 0 0 20px; }
.interview.recruit_interview_04 h1 > span:last-child br { display: none; }
.interview.recruit_interview_04 > .columned > .block:first-of-type h1 > span:last-child br:nth-child(2) { display: inline; }
.interview.recruit_interview_04 > .columned > .block:last-of-type h1 > span:first-child br:nth-child(2) { display: inline; }
.interview.recruit_interview_04 p { width: 100%; font-size: 1.2rem; line-height: 2; }
.interview.recruit_interview_04 p.sub { min-height: auto; }
.interview.recruit_interview_04 > .columned > .block:first-of-type p.sub { width: 90%; }
.interview.recruit_interview_04 > .columned > .block:last-of-type p.sub { width: 100%; }
.interview.recruit_interview_04 .shoulder { font-size: 3.5rem; right: 205px; top: 40px; }
}
@media (max-width: 1366px) and (min-height: 1024px) {
.interview.recruit_interview_01,
.interview.recruit_interview_02,
.interview.recruit_interview_03 { background-position-x: 30%; }
.interview.recruit_interview_04 { background-image: url(../media/recruit/recruit_interview_04-05_v.jpg); }
.interview.recruit_interview_01 .shoulder span,
.interview.recruit_interview_02 .shoulder span,
.interview.recruit_interview_03 .shoulder span { display: block; }
.interview.recruit_interview_01 .shoulder span:nth-child(n+2),
.interview.recruit_interview_02 .shoulder span:nth-child(n+2),
.interview.recruit_interview_03 .shoulder span:nth-child(n+2) { margin: 5px 0 0 0; }
}



/* contact
   ========================================================================== */

body.contact .page-body { background-color: #fff; box-sizing: border-box; }

body.contact .page-body p { font-weight: 400; }
body.contact .page-body p.note { font-weight: 400; }
body.contact .page-body p.note b,
body.contact .page-body p.note a { display: inline-block; color: #ff521e; margin: 0 3px; }
body.contact .page-body p.note a { transition: .25s; }
body.contact .page-body p.note a:hover { color: #383838; }

form.contact .label { display: flex; align-items: center; color: #fff; font-weight: 500; background-color: #383838; box-sizing: border-box; }
form.contact .label .sub { display: inline-block; color: #ff521e; margin-left: 5px; }
form.contact label input.text,
form.contact label textarea { font-weight: 400; border: none; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
form.contact label.textarea,
form.contact label.textarea .label { align-items: flex-start; }

form.contact label input::placeholder,
form.contact label textarea::placeholder { color: #c8c8c8; }

form.contact .button { display: flex; justify-content: center; align-items: center; width: 100%; color: #fff; font-weight: 500; letter-spacing: 1em; background-color: #c8c8c8; padding-left: .5em; transition: .25s; }
form.contact .button:hover { background-color: #383838; }

@media (min-width: 320px) and (max-width: 736px) {

body.contact .page-body { padding: 30px 25px 60px; margin: 30px 20px; }
body.contact .page-body p { font-size: 1.2rem; line-height: 2; }
body.contact .page-body p br { display: none; }
body.contact .page-body p.note { font-size: .8rem; line-height: 1.8; margin-top: 30px; }
body.contact .page-body p.note span { display: block; }
body.contact form { margin: 10px 0 30px; }
form.contact label { display: block; margin-bottom: 15px; }
form.contact .label { height: 20px; font-size: 1rem; letter-spacing: .1em; padding: 5px 15px; }
form.contact label input.text,
form.contact label textarea { width: 100%; height: 40px; font-size: 1rem; border-left: 1px solid #c8c8c8; padding: 5px 15px; }
form.contact label.textarea textarea { padding-top: 20px; height: 140px; }
form.contact .button { height: 40px; font-size: 1.4rem; margin-top: 30px; }

}
@media (min-width: 737px) {

body.contact .page-body { width: 1000px; padding: 90px 100px 150px; margin: 60px auto 150px; }
body.contact .page-body p { font-size: 1.8rem; line-height: 2.5; }
body.contact .page-body p.note { font-size: 1.4rem; line-height: 2; margin-top: 60px; }
body.contact form { margin-top: 30px; }
form.contact label { display: flex; width: 800px; margin-bottom: 30px; }
form.contact .label { width: 230px; height: 80px; font-size: 1.6rem; padding: 20px 40px; box-sizing: border-box; }
form.contact label input.text,
form.contact label textarea { width: 570px; height: 80px; font-size: 1.6rem; border-top: 1px solid #c8c8c8; padding: 20px 40px; box-sizing: border-box; }
form.contact label.textarea .label,
form.contact label.textarea textarea { padding-top: 40px; height: 580px; }
form.contact .button { height: 80px; font-size: 3rem; margin-top: 60px; }

}
@media all and (-ms-high-contrast:none) {
form.contact label input:-ms-input-placeholder,
form.contact label textarea:-ms-input-placeholder { color: #c8c8c8; }
}



/* certification
   ========================================================================== */

body.certification .article-header { display: flex; }
body.certification .article-header h2 { font-size: 0; position: absolute; }
body.certification .article-header h5 { font-weight: 700; }
body.certification .article-header p {font-weight: 400; line-height: 1.8; }
body.certification .article-footer span { display: block; font-weight: 500; }

body.certification article ul li .block { max-height: 2000px; overflow: hidden; position: relative; z-index: 2; opacity: 1; }
body.certification article ul { perspective: 1000px; }
body.certification article ul li { position: relative; }

body.certification article ul li h4 { border-bottom: 1px dotted #383838; }
body.certification article ul li i { position: absolute; }
body.certification article ul li i::before,
body.certification article ul li i::after { content: ''; width: 1px; background-color: #383838; position: absolute; }
body.certification article ul li input[type=checkbox] { width: 100%; height: 100%; cursor: pointer; position: absolute; z-index: 1; opacity: 0; }
body.certification article ul li input[type=checkbox]:checked ~ div { max-height: 0; margin-top: 0; opacity: 0; transform: translate(0, 50%); }
body.certification article ul li .block,
body.certification article ul li i::before,
body.certification article ul li i::after { transition: all .25s ease-in-out; }

@media (min-width: 320px) and (max-width: 736px) {

body.certification .article-header { flex-direction: column; align-items: center; margin-bottom: 40px; }
body.certification .article-header h5 { font-size: 1.4rem; margin-bottom: 15px; }
body.certification .article-header p { font-size: 1rem; }
body.certification .article-header figure img { width: auto; height: 95px; margin-bottom: 30px; }
body.certification .article-body > .styled > p { margin-bottom: 30px; }
body.certification .article-footer { margin-top: 40px; }
body.certification .article-footer span { font-size: .7rem; }
body.certification .article-footer span:first-of-type { margin-bottom: 5px; }

body.certification article ul li h4 { line-height: 1.6; padding: 0 0 10px 30px; margin-bottom: 15px; }
body.certification article ul li > .block { margin-bottom: 15px; }
body.certification article ul li i { left: 9px; top: 9px; }
body.certification article ul li i::before,
body.certification article ul li i::after { height: 12px; }
body.certification article ul li i::before { transform: translate(-4px, 0) rotate(45deg); }
body.certification article ul li i::after { transform: translate(4px, 0) rotate(-45deg); }
body.certification article ul li input[type=checkbox]:checked ~ i::before { transform: translate(4px, 0) rotate(45deg); }
body.certification article ul li input[type=checkbox]:checked ~ i::after { transform: translate(-4px, 0) rotate(-45deg); }
body.certification article ul li .block h5:first-child { margin-top: 10px; }

}
@media (min-width: 737px) {

body.certification .article-header { justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #b4b4b4; padding-bottom: 50px; margin-bottom: 100px; }
body.certification .article-header .text { margin-bottom: 5px; }
body.certification .article-header h5 { font-size: 2rem; margin-bottom: 30px; }
body.certification .article-header p { font-size: 1.4rem; }
body.certification .article-header figure img { width: auto; height: 200px; }
body.certification .article-body > .styled > p { margin-bottom: 60px; }
body.certification .article-footer { display: flex; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid #b4b4b4; padding-top: 25px; margin-top: 100px; }
body.certification .article-footer span { font-size: 1.4rem; margin-bottom: 15px; }

body.certification article ul li { margin-top: 15px; }
body.certification article ul li h4 { padding: 0 0 10px 40px; margin-bottom: 30px; }
body.certification article ul li > .block { margin-bottom: 30px; }
body.certification article ul li i { left: 9px; top: 19px; }
body.certification article ul li i::before,
body.certification article ul li i::after { height: 12px; }
body.certification article ul li i::before { transform: translate(-4px, 0) rotate(45deg); }
body.certification article ul li i::after { transform: translate(4px, 0) rotate(-45deg); }
body.certification article ul li input[type=checkbox]:checked ~ i::before { transform: translate(4px, 0) rotate(45deg); }
body.certification article ul li input[type=checkbox]:checked ~ i::after { transform: translate(-4px, 0) rotate(-45deg); }
body.certification article ul li .block h5:first-child { margin-top: 20px; }

}
@media all and (-ms-high-contrast:none) {
body.certification .article-header h2 { display: none; width: 0; }
}



/* ==========================================================================
   styled
   ========================================================================== */

.styled h2,
.styled h3,
.styled h4,
.styled h5 { font-weight: 700; }

.styled p { font-weight: 400; letter-spacing: .02em; }

.styled a { color: #383838; transition: .25s; }
.styled a:hover { color: #ff521e; }

.styled b,
.styled strong { font-weight: 700; }

.styled pre { overflow: auto; }
.styled code { font-family: monospace; }

.styled figcaption { font-weight: 300; line-height: 1.8; margin-top: 15px; }

.styled li { position: relative; }
.styled li::before { display: inline-block; position: absolute; left: 0; }
.styled ul li::before { content: '・'; }
.styled ol > li:nth-child(1)::before { content: '1.'; }
.styled ol > li:nth-child(2)::before { content: '2.'; }
.styled ol > li:nth-child(3)::before { content: '3.'; }
.styled ol > li:nth-child(4)::before { content: '4.'; }
.styled ol > li:nth-child(5)::before { content: '5.'; }
.styled ol > li:nth-child(6)::before { content: '6.'; }
.styled ol > li:nth-child(7)::before { content: '7.'; }
.styled ol > li:nth-child(8)::before { content: '8.'; }
.styled ol > li:nth-child(9)::before { content: '9.'; }
.styled li ul,
.styled li ol { margin: 0; }

.styled table th,
.styled table td { border: none; }
.styled table th { color: #8497ac; font-weight: 700; border-bottom: 1px dotted #383838; }
.styled table td { font-weight: 400; }
.styled table ul,
.styled table ol { margin: 0; }

.styled .note { color: #ff521e; }
.styled .boxed { background-color: #fafafa; padding: 20px; }

.styled p:last-child,
.styled figure:last-child,
.styled table:last-child,
.styled ul:last-child,
.styled ol:last-child,
.styled .boxed:last-child { margin-bottom: 0; }

@media (min-width: 320px) and (max-width: 736px) {

.styled h2 { font-size: 1.4rem; letter-spacing: .06em; line-height: 2; margin-bottom: 15px; }

.styled h3 { font-size: 2.2rem; letter-spacing: .07em; line-height: 1.8; margin-bottom: 30px; }
.styled p ~ h3 { margin-top: 30px; }

.styled h4 { font-size: 1.4rem; letter-spacing: .06em; line-height: 2; margin-bottom: 15px; }
.styled h5 { margin-bottom: 10px; }

.styled p { font-size: 1rem; line-height: 2; margin-bottom: 15px; }

.styled figure { margin: 30px 0; }
.styled figcaption { font-size: 1rem; line-height: 1.8; }

.styled ul,
.styled ol { margin: 30px 0; }
.styled li { line-height: 2; padding-left: 10px; }
.styled li::before { width: 10px; }

.styled table { margin: 30px 0; }
.styled table ul,
.styled table ol { margin: 0; }

.styled table th,
.styled table td { font-size: 1rem; line-height: 2; }
.styled table th { padding: 8px 0 5px; }
.styled table td { padding: 5px 0; }

.styled table tr:last-child td:last-child { padding-bottom: 20px; }

table.rebuidable tbody { display: flex; flex-wrap: wrap; width: 100%; }
table.rebuidable tr { display: block; width: 100%; box-sizing: border-box; }
table.rebuidable td,
table.rebuidable th { display: block; width: 100%; }
table.rebuidable tr.th { width: 20%; flex: 1 0 20%; padding-right: 15px; }
table.rebuidable tr.td { width: 70%; flex: 1 0 70%; padding-left: 15px; }
table.rebuidable tr.th { border-right: 1px dotted #383838; }
.styled table.rebuidable th { border-bottom: none; padding: 18px 0 0; }
.styled table.rebuidable td { padding: 20px 0 0; }
.styled table.rebuidable tr:first-child th,
.styled table.rebuidable tr:nth-child(2) td { padding: 0; }

.styled .boxed { margin: 30px 0; }

}
@media (min-width: 737px) {

.styled h2 { font-size: 2.5rem; letter-spacing: .02em; line-height: 1.8; margin-bottom: 30px; }

.styled h3 { font-size: 4rem; letter-spacing: .12em; line-height: 1.8; margin-bottom: 30px; }
.styled p ~ h3 { margin-top: 40px; }

.styled h4 { font-size: 2.5rem; letter-spacing: .02em; line-height: 1.8; margin-bottom: 40px; }
.styled h5 { font-size: 1.8rem; margin-bottom: 10px; }

.styled p { font-size: 1.6rem; line-height: 2.6; margin-bottom: 40px; }

.styled figure { margin: 40px 0; }
.styled figcaption { font-size: 1.4rem; line-height: 1.8; }

.styled ul,
.styled ol { margin: 40px 0; }
.styled li { line-height: 2.3; padding-left: 20px; }
.styled li::before { width: 20px; }

.styled table { margin: 60px 0; }
.styled table ul,
.styled table ol { margin: 0; }

.styled table th,
.styled table td { line-height: 2.3; }
.styled table th { padding: 10px 0; }
.styled table td { padding: 15px 0; }
.styled table th { font-size: 1.6rem; }
.styled table td { font-size: 1.4rem; }

.styled .boxed { margin: 40px 0; }

}



/* ==========================================================================
   utilities
   ========================================================================== */

/* clearfix */
.wrapper::after { content: ''; display: block; clear: both; }

/* replace text */
.replace { display: block; color: rgba(0, 0, 0, 0); text-align: center; overflow: hidden; position: relative; }
a.replace:link, a.replace:visited, a.replace:hover, a.replace:active, a.replace:focus { color: rgba(0, 0, 0, 0); }
.replace::after { content: ''; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-color: transparent; background-position: 0 0; background-size: contain; position: absolute; left: 0; top: 0; z-index: 1; }

@media all and (-ms-high-contrast:none) {
.object-fit { font-family: 'object-fit: cover;'; } /* object-fit for ie11 */
}

.left { float: left; }
.right { float: right; }
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.disabled { cursor: default; pointer-events: none; opacity: .25; }
.no-padding { padding: 0; }
.no-margin { margin: 0; }
.no-padding-top { padding-top: 0; }
.no-margin-top { margin-top: 0; }
.no-wrap { white-space: nowrap; }