@charset "UTF-8";

#header {
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.6s;
}
#header.scrolled {
background-color: rgba(255, 255, 255, 1);
}
#header .drawer__nav__menu li a {
color: #fff;
transition: color 0.6s;
}
#header.scrolled .drawer__nav__menu li a {
color: #313131;
}
#header.scrolled .drawer__nav__menu li:last-child a {
color: #fff;
}

#topHero h2 {
position: absolute;
z-index: 2;
}
#topHero h2 {
width: 90%;
left: 5%;
position: absolute;
z-index: 2;
}
#topHero h2, #topHero h2 span {
font-family: "Gabarito", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
color: #00388A;
font-weight: 900;
line-height: 80%;
}
#topHero h2 span{
display: table;
margin-left: auto;
}

#news {
position: relative;
z-index: 1;
background: #0061B6;
color: #fff;
display: table;
}
#news h5 {
display: table;
font-family: "Gabarito", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
#news a {
color: #fff;
display: table;
}
#news time {
font-size: 0.8em;
}
#news a.more {
font-weight: 200;
}

#message h2 {
right: 0;
}
#aboutInner h3 {
font-weight: bold;
}
#aboutInner p:last-child {
padding-bottom: 0;
}

#works:after {
display: block;
content: "";
background: #EAF6FB;
z-index: -2;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#works h2.head-en {
color: #fff;
}

#recruit h2.head-en {
transform: rotate(90deg) translateY(-100%);
transform-origin:0 0 0;
}
#recruit .box {
position: relative;
}
#recruit ul.slider {
opacity: .5;
}
#recruit ul.slider {
position: absolute;
z-index: -2;
}

@media (max-width: 560px){
#header {
padding-top: 20px;
}

#topHero h1 {
top: 50%;
}
#topHero h1 img {
width: 55%;
}
#topHero h2 {
bottom: 0;
font-size: 12vw;
}
#news {
margin-bottom: 50px;
padding: 10px 5%;
}
#news h5 {
font-size: 6vw;
}
#news a.more {
padding-right: 40px;
background: url(../images/arrow.svg) no-repeat right center;
background-size: 30px auto;
}

#message {
padding-bottom: 60px;
}
#message img {
padding-bottom: 30px;
}
#aboutInner h3 {
font-size: 5vw;
text-align: center;
}
#aboutInner p {
padding-bottom: 10px;
}

#works {
padding: 40px 0;
margin-bottom: 60px;
}
#works div.box {
width: 95%;
margin-left: 5%;
}
#worksInner {
width: 50%;
padding-right: 50%;
background: url(../images/works.webp) no-repeat center right;
background-size: 46% auto;
}

#recruit {
padding-bottom: 30vw;
}
#recruit h2.head-en {
font-size: 27vw;
}
#recruit .box {
width: 100%;
}
#recruitInner {
width: 90%;
margin: 0 auto;
padding-top: 40px;
}
#recruitInner h3 {
display: table;
margin-left: auto;
}
#recruitInner p {
width: 80%;
margin-left: 20%;
}
#recruitInner a.more2 {
margin-left: auto;
}
#recruit ul.slider {
width: 100%;
top: 0;
left: 0;
}
#recruit ul.slider li img {
height: 95vh;
}
}

@media (min-width: 561px){
#topHero h1 {
top: 40%;
transform: translateY(-50%);
}
#topHero h1 img {
width: 50%;
max-width: 700px;
}
#topHero h2 {
bottom: 10px;
}

#news {
margin-top: -10px;
margin-bottom: 100px;
}
#news a.more {
padding-right: 40px;
background: url(../images/arrow.svg) no-repeat right center;
background-size: 26px auto;
}

#message {
padding-bottom: 100px;
}
#aboutInner p {
padding-bottom: 20px;
}

#works {
padding: 60px 0;
margin-bottom: 30px;
}
#works h2.head-en {
top: 60px;
}

#recruit {
padding: 100px 0;
}
#recruit ul.slider {
width: 70%;
top: 0;
right: 0;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}

@media (min-width:561px) and ( max-width:960px) {
#topHero h2 {
font-size: 10vw;
}
#news {
padding: 20px 5%;
}
#news h5 {
font-size: 3rem;
}

#message img {
width: 50%;
}
#aboutInner h3 {
font-size: 3.6vw;
margin-top: -10vw;
text-align: right;
}

#worksInner {
width: 100%;
background: url(../images/works.webp) no-repeat top right;
background-size: 40% auto;
}
#worksInner {
padding: 100px 0 30px;
}
#recruit h2.head-en {
font-size: 15vw;
}
#recruitInner p {
width: 90%;
}
}

@media (max-width: 960px){
body {
position: relative;
}
#header {
position: absolute;
}

#news {
width: 100%;
box-sizing: border-box;
}
#news h5 {
width: 100%;
padding-bottom: 4px;
margin-bottom: 10px;
border-bottom: 1px solid #fff;
}
#news time {
padding-right: 10px;
}
#news a.more {
margin-top: 10px;
margin-left: auto;
}

#message {
padding-top: 10vw;
}
#message img {
display: block;
}
#aboutInner h3 {
padding-bottom: 30px;
}

#works:after {
width: 90%;
}
#worksInner p {
padding-bottom: 50px;
}
#worksInner a.more2 {
margin-right: 40%;
}

#recruitInner p {
padding-bottom: 30px;
}
}

@media (min-width: 961px){
#header {
position: fixed;
}
a.drawer__nav__link {
color: #fff;
}

#news {
padding: 40px 40px 40px 100px;
}
#news > div {
display: flex;
align-items: center;
}
#news h5 {
font-size: 4rem;
padding-right: 20px;
margin-right: 20px;
border-right: 2px solid #fff;
}
#news a {
font-size: 1.8rem;
}
#news time {
padding-right: 16px;
}
#news a.more {
margin-left: 50px;
}

#message {
padding-top: 80px;
}
#message .box {
display: flex;
justify-content: space-between;
}
#message .box img, #message .box div {
width: 48%;
}
#message .box img {
height: 100%;
}
#aboutInner h3 {
font-size: 3rem;
padding-bottom: 40px;
}

#works:after {
width: 60%;
}
#worksInner {
width: 40%;
background: url(../images/works.webp) no-repeat top right;
background-size: 45% auto;
}
#worksInner p {
padding-bottom: 80px;
}

#recruit {
margin-bottom: 80px;
}
#recruitInner {
width: 50%;
}
#recruitInner p {
padding-bottom: 40px;
}
}

@media (min-width:961px) and ( max-width:1280px) {
#topHero h2 {
font-size: 10rem;
}

#worksInner {
padding: 120px 60% 40px 0;
}
#recruit h2.head-en {
font-size: 13rem;
top: 10%;
}
}

@media (min-width: 1281px){
#topHero h2 {
font-size: 15rem;
}

#worksInner {
padding: 250px 60% 100px 0;
}
#recruit h2.head-en {
font-size: 18rem;
}
}