@charset "utf-8";

/* ===================
common
=================== */
:root {
    --base_blue: #1D3760;
    --base_white: #FFF;
    --accent-yellow: #FFD43B;
    --font-grey: #D7D6D8;
    --font_black: #27210C;
}

html {
    font-size: 62.5%;
}
main {
    overflow: hidden;
}
body {
    font-family:
        "Noto Sans JP",
        sans-serif;
    color: var(--font-black, #27210C);
    font-size: 1.8rem;
    background-color: #fff;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

img {
    max-width: 100%;
    height: auto;
}

video {
    width: 100%;
  display: none;
}
section {
    padding: 120px 8.3%;
    margin-top: -1px;
}

a:hover {
    opacity: 0.5;
}

@media screen and (max-width: 768px){
    body {
        font-size: 1.2rem;
    }
    
    section {
        padding: 60px 8%;
    }
}

/* ===================
header
=================== */
.headerSp, .nav__headerSp, .nav__recruitSp {
    display: none;
}

.header {
    display: flex;
    width: 100vw;
    padding: 15px 1%;
    justify-content: space-between;
    align-items: center;
    background: var(--base_white, #FFF);
    position: fixed;
    top: 0;
    z-index: 1000;
}

.siteTitle a{
    display: flex;
    align-items: center;
    gap: 5px;
}

.siteTitle img {
    width: 80px;
}

.siteTitle span {
    display: inline-block;
    white-space: nowrap;
    font-size: 3.2rem;
    font-weight: 700;
}
.nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav__item {
    letter-spacing: 0.1em;
    white-space: nowrap;
    margin-right: 2vw;
    text-decoration: none;
    position: relative;
}

.nav__list li:last-child {
    margin-right: 0;
}

.nav__item--recruit {
    padding: 3px 25px;
    border-radius: 50px;
    background: var(--accect_yellow, #FFD43B);
    box-shadow: 4px 4px 4px 0px rgba(74, 74, 74, 0.10);
}

.nav__item--recruit:hover {
    opacity: 0.5;
}


/* .header SP */
@media screen and (max-width: 768px){
    .headerSp, .nav__headerSp, .nav__recruitSp {
        display: block;
    }
    .header {
        padding: 0px 0px 0px 20px;
    }
    .siteTitle img {
        width: 40px;
    }
    .siteTitle span {
        font-size:  1.6rem;
    }
    .headerSp {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4%;
    }
    .headerSp__recruit {
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        border-radius: 100%;
        background-color: var(--accent-yellow, #FFD43B);
    }
    .headerSp__recruit img {
        width: 20px;
        height: 20px;
    }
    .headerSp__recruit p {
        color: var(--base_blue, #1D3760);
        text-align: center;
        font-size: 0.7rem;
        line-height: 1.2;
    }
    .navBtn {
        max-width: 60px;
        width: 16vw;
        height: auto;
    }
    .nav {
        background: #FFF;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        transform: translateX( -100%);
        transition: transform 0.4s;
        margin: 0 auto;
    }
    .nav__headerSp {
        display: flex;
        height: 60px;
        padding-left: 20px;
        justify-content: space-between;
        align-items: center;
    }
    .nav__logo a {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }
    .nav__logo img {
        width: 40px;
    }
    .nav__logo span {
        font-size:  1.6rem;
    }
    .closeBtn {
        width: 60px;
        height: 60px;
    }
    .nav__body {
        padding: 60px 50px;
        background: linear-gradient(0deg, rgba(29, 55, 96, 0.90) 0%, rgba(29, 55, 96, 0.90) 100%), url(../images/CD6A0DF4-B0B6-4EF5-B057-D558A31FCC98.JPG);
        background-size: cover;
    }
    .nav__list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        text-shadow: -1.5px 1px 3px rgba(0, 0, 0, 0.5);
    }
    .nav__item {
        width: 100%;
        margin-right: 0;
        color: #FFF;
        text-align: center;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 2;
        border-bottom: 1px solid var(--base_white, #FFF);
    }
    .nav__item--recruit {
        display: none;
    }
    .nav__recruitSp a {
        display: flex;
        padding: 15px 0px;
        margin-top: 40px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        background: var(--accect_yellow, #FFD43B);
        box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.05);
    }
    .nav__recruitSpTitle {
        display: flex;
        align-items: center;
        gap: 3px;
    }
    .nav__recruitSpTitle img:first-child {
        width: 35px;
        height: 35px;
    }
    .nav__recruitSpTitle img:nth-of-type(2) {
        width: 10px;
        height: 34px;
    }
    .nav__recruitSpTitle p {
        font-size: 1.4rem;
        color: var(--base_blue, #1D3760);
    }
    .nav__recruitSpTxt {
        color: var(--base_blue, #1D3760);
        line-height: 2;
    }
    .nav__recruitSpName {
        display: flex;
        padding-top: 10px;
        color: var(--base_blue, #1D3760);
        font-size: 1.6rem;
        font-weight: 700;
        position: relative;
    }
    .nav__recruitSpName::after {
        display: block;
        content: '';
        border-bottom: 1px solid var(--base_white, #FFF);
        border-left: 1px solid var(--base_white, #FFF);
        width: 10px;
        height: 10px;
        rotate: -140deg;
        position: absolute;
        right: -30px;
        top: 18px;
        filter: drop-shadow(-1.5px 1px 1px rgba(29, 55, 96, 0.2));
    }
}

/* .nav.active表示 */
.nav.active {
    transform: translateX(0);
}

.article {
    overflow: hidden;
}

/* ===================
footer
=================== */
.footer {
    display: flex;
    flex-direction: column;
    padding: 120px 0px 60px 0px;
    align-items: center;
}

.footerNav {
    width: 100%;
    margin-bottom: 30px;
}

.footerMenu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.siteTitle--footer img {
    width: 80px;
    background-position: center;
}

.siteTitle--footer p {
    font-size: 3.2rem;
    font-weight: 700;
}

.copy {
    color: var(--font_black, #27210C);
    text-align: center;
    font-size: 1.4rem;
}



/* .footer SP */
@media screen and (max-width: 768px){
    .footer {
        display: flex;
        flex-direction: column;
        padding: 60px 0px 30px 0px;
        align-items: center;
    }
    
    .footerNav {
        margin-bottom: 15px;
    }
    
    .footerMenu {
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-size: 1.2rem;
    }

    .copy {
        font-size: 1rem;
    }
}


/* ===================
btn
=================== */
.yellowBtn {
    display: flex;
    width: 220px;
    padding: 5px 40px;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 3px 0px rgba(255, 252, 240, 0.30);
    background-color: var(--accect_yellow, #FFD43B);
    position: relative;
}
.yellowBtn::after {
    position: absolute;
    content: "";
    top: 50%;
    right: -30px;
    width: 60px;
    height: 1.5px;
    background-color: var(--base_white, #FFF);
    transition: 0.4s ease-in-out;
}
.yellowBtn a {
    color: var(--base_white, #FFF);
    text-align: center;
    text-shadow: 4px 4px 4px rgba(74, 74, 74, 0.10);
    font-size: 2rem;
    font-weight: 700;
}
.yellowBtn:hover {
    opacity: 0.7;
}
.yellowBtn:hover:after {
    right: -20px;
}
.blueBtn {
    display: flex;
    width: 220px;
    padding: 5px 40px;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 3px 0px rgba(255, 252, 240, 0.30);
    background-color: var(--base_blue, #1D3760);
    position: relative;
}
.blueBtn::after {
    position: absolute;
    content: "";
    top: 50%;
    right: -30px;
    width: 60px;
    height: 1.5px;
    background-color: var(--accect_yellow, #FFD43B);
    transition: 0.4s ease-in-out;
}
.blueBtn a {
    color: var(--base_white, #FFF);
    text-align: center;
    text-shadow: 4px 4px 4px rgba(74, 74, 74, 0.10);
    font-size: 2rem;
    font-weight: 700;
}
.blueBtn:hover {
    opacity: 0.7;
}
.blueBtn:hover:after {
    right: -20px;
}

@media screen and (max-width: 768px){
    .yellowBtn, .blueBtn {
        width:  160px;
    }
    .yellowBtn a, .blueBtn a {
        font-size: 1.2rem;
    }
}


/* ===================
table
=================== */
.tableSection {
    background-color: var(--base_blue, #1D3760);
    position: relative;
}
.enTitle {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: auto;
    border-bottom: 1px solid rgba(215, 214, 216, 0.30);
    color: rgba(215, 214, 216, 0.20);
    font-family: "Hiragino Kaku Gothic StdN";
    font-size: 10rem;
    font-weight: 800;
    text-align: right;
    line-height: 1;
    transform: translateY(-50%);
    opacity: 0;
}
.enTitle.animated {
    animation: slideY 1s linear forwards;
}
.overviewTable, .infoTable, .contactTable {
    display: flex;
    padding: 60px 10%;
    flex-direction: column;
    align-items: center;
    background: #FFF;
    position: relative;
}
.sectionTitle {
    color: var(--base_white, #FFF);
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}
@media screen and (max-width: 768px){
    .enTitle {
        font-size: 5rem;
        width: auto;
    }
    .overviewTable, .infoTable, .contactTable {
        padding: 30px 4%;
    }
    .sectionTitle {
        font-size: 1.6rem;
    }
}/* table sp */

/* ===================
animation
=================== */
.animate__animated { 
    opacity: 0; 
}

/* 制御 */
@keyframes slideY {
    to {
      opacity: 1;
      transform: translateY(0);
    }
}
@keyframes slideX {
    to {
      opacity: 1;
      transform: translateX(0);
    }
}