@charset "UTF-8";

:root {
    --primary-blue: #3E5D8A;
    --primary-bluetxt: #284B7D;
    --primary-yellow: #FFFCE6;
    --primary-yellow-deco: #FFF59E;
    --primary-black: #5c5c5c;
    --primary-white: #ffffff;
    --primary-whitetxt: #f5f5f5;
}

html {
    font-size: 62.5%;
}

body {
    font-family: "Zen Kaku Gothic New", serif, Arial;
    font-weight: 400;
    font-style: normal;
    color: var(--primary-black);
    background-color: var(--primary-white);
    line-height: 1.5;
}

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

.br-pc {
    display: none;
}

/* ==========================
pc
============================= */
@media screen and (min-width:769px) {
    .br-sp {
        display: none;
    }

    .br-pc {
        display: block;
    }
}

/* ==========================
nav
============================= */
.nav_list {
    margin-top: calc(30 * (100vw/375));
    padding: 0 calc(17 * (100vw/375)) calc(30 * (100vw/375)) calc(17 * (100vw/375));
}

.nav_item {
    color: var(--primary-bluetxt);
    font-size: calc(18 * (100vw/375));
    line-height: normal;
    letter-spacing: calc(1.44 * (100vw/375));
    margin-top: calc(24 * (100vw/375));
}

.nav_item:first-child {
    margin-top: 0;
}

.nav.active {
    transform: translateX(0%);
}

.nav {
    background-color: var(--primary-white);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: 0.4s;
    transform: translateX(-100%);
}

.header_container_pc {
    display: none;
}

/* ==========================
pc
============================= */

@media screen and (min-width:769px) {
    .nav {
        display: none;
    }

    .header_container {
        display: none !important;
    }

    .header_container_pc {
        display: flex;
        justify-content: center;
    }


    .header_container_items {
        display: flex;
        gap: calc(48 * (100vw/1440));
        align-items: center;
    }

    .header_container_item {
        color: var(--primary-bluetxt);
        font-size: calc(20 * (100vw/1440));
        font-weight: 500;
        line-height: normal;
    }

    .nav_item {
        margin-top: 0;
    }

    .nav_logo {
        margin: 0 55px;
        width: calc(86 * (100vw/1440)) !important;
        height: calc(104 * (100vw/1440)) !important;
    }

    .nav_logo a img{
        width: 100%;
    }

}

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

.nav_logo {
    width: calc(54 * (100vw/375));
    height: calc(62 * (100vw/375));
}

.nav_menu {
    width: calc(27 * (100vw/375));
    height: calc(13 * (100vw/375));
}

.nav_close {
    width: calc(27 * (100vw/375));
    height: calc(27 * (100vw/375));
}

.nav_container,
.header_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(6 * (100vw/375)) calc(17 * (100vw/375));
}

.maintxt {
    background-color: var(--primary-white);
    width: 64vw;
    color: var(--primary-black);
    font-size: calc(24 * (100vw/375));
    font-weight: 700;
    line-height: normal;
    letter-spacing: calc(2 * (100vw/375));
    border-radius: calc(40 * (100vw/375));
    padding: calc(24 * (100vw/375)) calc(29 * (100vw/375));
    text-align: center;
    border: 1px solid var(--primary-black);
    white-space: nowrap;
}

.mainvisual_txt {
    display: flex;
    justify-content: center;
    padding: calc(180 * (100vw/375)) 18%;
}

/* ==========================
pc
============================= */

@media screen and (min-width:769px) {

    .mainvisual_pc {
        display: block;
        position: relative;
    }

    .maintxt1,
    .maintxt3 {
        font-size: calc(36 * (100vw/1440));
        letter-spacing: calc(3.6 * (100vw/1440));
        width: calc(182 * (100vw/1440));
    }

    .maintxt2 {
        font-size: calc(60 * (100vw/1440));
        width: calc(399 * (100vw/1440));
    }

    .maintxt2,
    .maintxt3 {
        margin-top: calc(8 * (100vw/1440));
    }

    .maintxt1 {
        bottom: calc(344 * (100vw/1440));
        position: relative;
    }

    .maintxt2 {
        bottom: calc(258 * (100vw/1440));
        left: 15%;
        position: relative;
    }

    .maintxt3 {
        bottom: calc(258 * (100vw/1440));
        left: calc(78 * (100vw/1440));
        position: relative;
    }

    .maintxt{
        padding: calc(37 * (100vw/1440)) 0;
    }

    .mainvisual_txt_pc {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translateY(calc(190 * (100vw/1440)));
    }
}


/* ==========================
btn
============================= */

.btn {
    display: inline-block;
    background-color: var(--primary-bluetxt);
    color: var(--primary-whitetxt);
    position: relative;
    color: #F5F5F5;
    font-family: "Zen Kaku Gothic New";
    font-size: calc(16 * (100vw/375));
    font-weight: 700;
    line-height: normal;
    letter-spacing: calc(0.96 * (100vw/375));
    border-radius: calc(20 * (100vw/375));
    text-align: center;
    padding: calc(12 * (100vw/375)) calc(45 * (100vw/375)) calc(12 * (100vw/375)) calc(20 * (100vw/375));
    margin-top: calc(24 * (100vw/375));
}

.btn::after {
    content: "";
    background-image: url(../images/btn_deco.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(35 * (100vw/375));
    height: calc(35 * (100vw/375));
    position: absolute;
    right: calc(10 * (100vw/375));
    top: 50%;
    transform: translateY(-50%);
}

.btn_jump {
    text-align: center;
}

.btn:hover {
    opacity: 0.5;
    transition: 0.4s;
}

@media screen and (min-width:769px) {
    .btn{
        border-radius: calc(20 * (100vw/1440));
        letter-spacing: calc(1.2 * (100vw/1440));
    }
}

/* ==========================
footer
============================= */
.footer{
    background-color: var(--primary-blue);
}

.footer_container {
    padding-top: calc(67 * (100vw/375));
}

.footer_icon {
    width: calc(62 * (100vw/375));
    height: calc(62 * (100vw/375));
}

.footer_top {
    margin: 0 auto;
    padding: calc(10 * (100vw/375)) calc(17 * (100vw/375)) calc(20 * (100vw/375)) calc(17 * (100vw/375));
}

.footer_group {
    text-align: center;
}

.footer_logo {
    width: calc(50 * (100vw/375));
    height: calc(50 * (100vw/375));
}

.footer_topic {
    color: var(--primary-whitetxt);
    font-size: calc(22 * (100vw/375));
    font-weight: 700;
    line-height: normal;
    margin: calc(24 * (100vw/375)) 0;
}

.footer_logoContainer {
    display: flex;
    gap: calc(30 * (100vw/375));
    justify-content: center;
}

.footer_list:first-child {
    margin-top: 0;
}

.footer_item {
    color: var(--primary-whitetxt);
    font-size: calc(15 * (100vw/375));
    line-height: normal;
    margin-top: calc(10 * (100vw/375));
}

.footer_item1 {
    color: var(--primary-whitetxt);
    font-size: calc(15 * (100vw/375));
    line-height: normal;
}

.footer_list {
    margin-top: calc(36 * (100vw/375));
    position: relative;
}

.footer_list::after {
    position: absolute;
    background-image: url(../images/fotter_decoration_animated.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: calc(121 * (100vw/375));
    height: calc(72 * (100vw/375));
    top: calc(62 * (100vw/375));
    right: 0;
}

.footer_list::before {
    position: absolute;
    content: "";
    background-image: url(../images/fotter_truck.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(139 * (100vw/375));
    height: calc(69 * (100vw/375));
    bottom: calc(-32 * (100vw/375));
    right: calc(21 * (100vw/375));
}

.copy {
    background-color: var(--primary-blue);
    color: #F5F5F5;
    font-size: calc(11 * (100vw/375));
    line-height: normal;
    letter-spacing: calc(0.88 * (100vw/375));
    padding: calc(20 * (100vw/375)) calc(17 * (100vw/375));
}


/* ==========================
pc
============================= */
@media screen and (min-width:769px) {

    .footer_container {
        padding-top: calc(140 * (100vw/1440));
        position: relative;
    }

    .footer_container::before{
        content: "";
        background-image: url(../images/fotter_truck.svg);
        background-repeat: no-repeat;
        background-size: contain;
        bottom: -14%;
        right: 4%;
        position: absolute;
        width: calc(400 * (100vw/1440));
        height: calc(197 * (100vw/1440));
    }

    .footer_container::after{
        /* content: ""; */
        background-image: url(../images/fotter_decoration_pc_animated.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: calc(345 * (100vw/1440));
        height: calc(197 * (100vw/1440));
        position: absolute;
        bottom: 33%;
        right: 2%;
    }
    
    .footer_icon {
        width: calc(103 * (100vw/1440));
        height: calc(103 * (100vw/1440));
    }

    .footer_group {
        text-align: left;
        padding-left: calc(52 * (100vw/1440));
    }

    .footer_topic {
        font-size: calc(30 * (100vw/1440));
        margin: 10% 0 14%;
    }

    .footer_logoContainer {
        justify-content: center;
        gap: calc(48 * (100vw/1440));
    }

    .footer_logo {
        width: calc(70 * (100vw/1440));
        height: calc(70 * (100vw/1440));
    }

    .footer_top {
        display: flex;
        gap: calc(96 * (100vw/1440));
        padding: calc(80 * (100vw/1440)) 0;
    }

    .footer_item1 {
        font-size: calc(20 * (100vw/1440));
    }

    .footer_item {
        font-size: calc(20 * (100vw/1440));
        margin-top: calc(18 * (100vw/1440));
        position: relative;
        z-index: 1;
    }

    .footer_list {
        margin-top: calc(150 * (100vw/1440));
    }

    .footer_list::before{
        background-image: none;
    }

    .footer_list::after{
        background-image: none;
    }


    .copy {
        font-size: calc(12 * (100vw/1440));
        padding: 0;
        padding: calc(44 * (100vw/1440)) 0 calc(110 * (100vw/1440)) calc(45 * (100vw/1440));
    }
}

/* ==========================
fadeIn
============================= */
.fadeIn{
    transform: translate(0, calc(80 * (100vw/375)));
    opacity: 0;
    transition: 1s;
}

.fadeIn.animated{
    transform: translate(0,0);
    opacity: 1;
}

/* ==========================
js-animated
============================= */
.js-animated.active::before{
    content: "";
}

.js-animated.active::after{
    content: "";
}