/*
Theme Name: sotsusei
Description: 卒業制作のwordpress化テーマ
Version: Yuki Hayakawa
Author: 1.0.0
*/

: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) {

    .header_container_pc {
        display: flex;
        justify-content: center;
        padding: calc(8 * (100vw/1440)) 0;
    }

    .nav {
        display: none;
    }

    .header_container {
        display: none !important;
    }


    .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 calc(55 * (100vw/1440));
        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));
}

.mainvisual_sp {
    position: relative;
    margin: calc(10 * (100vw/375)) calc(17 * (100vw/375)) 0;
    margin-top: calc(8 * (100vw/375));
}

.maintxt1,
.maintxt3 {
    background-color: var(--primary-white);
    width: calc(95 * (100vw/375));
    color: var(--primary-bluetxt);
    text-align: center;
    font-size: calc(24 * (100vw/375));
    font-weight: 500;
    line-height: normal;
    letter-spacing: calc(2.4 * (100vw/375));
}


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

.maintxt1 {
    position: relative ;
    bottom: calc(129 * (100vw/375));
    left: 0% ;
}

.maintxt2 {
    background-color: var(--primary-white);
    width: calc(245 * (100vw/375));
    color: var(--primary-bluetxt);
    font-size: calc(40 * (100vw/375));
    font-family: "Zen Kurenaido";
    text-shadow: 1px 0 var(--primary-bluetxt);
    position: relative;
    bottom: calc(128 * (100vw/375));
    left: 12%;
    text-align: center;
}

.maintxt3 {
    position: relative;
    bottom: calc(127 * (100vw/375));
    left: 84%;
}

.mainvisual_txt {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(calc(90 * (100vw/375)));
}

.mainvisual_pc {
    display: none;
}

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

    .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));
        bottom: calc(344 * (100vw/1440));
        left: 15%;
        position: relative;
    }

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

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

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

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



/* ==========================
vision
============================= */

.vision_container {
    padding: calc(80 * (100vw/375)) calc(17 * (100vw/375));
}

.topic_eng {
    color: var(--primary-bluetxt);
    font-size: calc(17 * (100vw/375));
    line-height: normal;
}

.topic_txt {
    color: var(--primary-bluetxt);
    font-size: calc(22 * (100vw/375));
    font-weight: 700;
    line-height: normal;
    letter-spacing: calc(1.76 * (100vw/375));
    position: relative;
}

.vision_container .topic_txt::after {
    content: "";
    background-image: url(../images/top_decoration1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
    position: absolute;
    width: calc(71 * (100vw/375));
    height: calc(142 * (100vw/375));
    right: calc(6 * (100vw/375));
    bottom: calc(24 * (100vw/375));
}

.topic_txts {
    font-size: calc(15 * (100vw/375));
    line-height: calc(28 * (100vw/375));
    margin-top: calc(15 * (100vw/375));
}

.topic_txts:first-of-type {
    margin-top: calc(24 * (100vw/375));
}

.topic_txts_group {
    position: relative;
}

.topic_txts_group::before {
    position: absolute;
    /* content: ""; */
    background-image: url(../images/top_ashirai_animated.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: calc(167 * (100vw/375));
    height: calc(60 * (100vw/375));
    bottom: calc(-45 * (100vw/375));
    left: calc(-20 * (100vw/375));
}

.topic_txts_group::after {
    position: absolute;
    content: "";
    background-image: url(../images/iwateken.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: calc(135 * (100vw/375));
    height: calc(201 * (100vw/375));
    opacity: 0.25;
    transform: translate(159%, -88%);
    z-index: -1;
}

/* ==========================
pc
============================= */
@media screen and (min-width:769px) {
    .topic_eng {
        font-size: calc(18 * (100vw/1440));
    }

    .topic_txt {
        font-size: calc(40 * (100vw/1440));
        letter-spacing: calc(3.2 * (100vw/1440));
    }

    .topic_txts:first-of-type {
        margin-top: calc(48 * (100vw/1440));
    }

    .topic_txts{
        line-height: calc(36 * (100vw/1440));
        margin-top: calc(16 * (100vw/1440));
    }

    .vision_container {
        padding: 6% 6% 12% 19%;
    }

    .vision_container .topic_txt::after {
        content: "";
        background-repeat: no-repeat;
        width: calc(115 * (110vw/1440));
        height: calc(232 * (110vw/1440));
        right: 108%;
        bottom: -11%;
    }

    .topic_txts_group::after {
        width: calc(331 * (100vw/1440));
        height: calc(524 * (100vw/1440));
        top: calc(268 * (100vw/1440));
        right: 50%;
    }

    .topic_txts_group::before {
        background-image: url(../images/top_ashirai_pc_animated.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: calc(559*(100vw/1440));
        height: calc(227*(100vw/1440));
        position: absolute;
        bottom: calc(-135 * (100vw/1440));
        left: calc(-329 * (100vw/1440));
    }

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

}

/* ==========================
business
============================= */

.business {
    padding: calc(80 * (100vw/375)) calc(18 * (100vw/375)) calc(110 * (100vw/375));
    position: relative;
    /* max-width: 375px; */
    margin: 0 auto;
}

.business_top {
    display: flex;
    justify-content: space-between;
}

.btn_group {
    display: inline-flex;
    gap: calc(30 * (100vw/375));
    margin-left: calc(48 * (100vw/375));
    align-items: end;
}

.btn_scroll,
.btn_scroll2 {
    display: inline-flex;
    width: calc(40 * (100vw/375));
    height: calc(40 * (100vw/375));
    border: 2px solid var(--primary-bluetxt);
    border-radius: 50px;
}

.btn_scroll::after {
    content: "";
    background-image: url(../images/arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: calc(20 * (100vw/375));
}

.btn_scroll2::after {
    content: "";
    background-image: url(../images/arrow.svg);
    transform: rotate(180deg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: calc(20 * (100vw/375));
}

.btn_business,
.btn_business2 {
    width: calc(10 * (100vw/375));
}

.slider .btn_jump{
    display: flex !important;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: calc(300 * (100vw/375));
    margin-top: calc(24 * (100vw/375));
    align-items: flex-end;
    padding-bottom: calc(32 * (100vw/375));
    justify-content: center;

}

.slider .btn_jump1 {
    background-image: url(../images/top_business1_sp.png);
}

.slider .btn_jump2 {
    background-image: url(../images/top_business2_sp.png);
}

.slider .btn_jump3 {
    background-image: url(../images/top_business3_sp.png);
}

.slider .btn_jump4 {
    background-image: url(../images/top_business4_sp.png);
}

.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: 20px;
    text-align: center;
    padding: calc(12 * (100vw/375)) calc(45 * (100vw/375)) calc(12 * (100vw/375)) calc(20 * (100vw/375));
    width: calc(207 * (100vw/375));
    margin-top: calc(20 * (100vw/375));
}

.slider .btn_jump .btn {
    margin-top: 0;
}

.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%);
}

.slider .btn_jump {
    text-align: center;
}

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

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

    .business {
        padding:calc(80 * (100vw/1440)) calc(52 * (100vw/1440)) calc(175 * (100vw/1440));
        /* max-width: 1440px; */
        margin: 0 auto;
    }

    .slider .btn_jump {
        margin-top: calc(52 * (100vw/1440));
        height: calc(500* (100vw/1440));
        width: 100%;
        margin: 0 calc(10 * (100vw/1440));
        padding-bottom: calc(42 * (100vw/1440));
        box-sizing: border-box; 
        /* 追加 */
    }

    .btn {
        display: flex;
        width: calc(248 * (100vw/1440));
        height: calc(60 * (100vw/1440));
        padding: calc(18 * (100vw/1440)) calc(70 * (100vw/1440)) calc(18 * (100vw/1440)) calc(20 * (100vw/1440));
        align-items: center;
        border: var(--primary-white) 2px solid;
        font-size: calc(20 * (100vw/1440));
        letter-spacing: calc(1.6 * (100vw/1440));
        margin-top: calc(48 * (100vw/1440));
    }

    .btn::after {
        right: calc(20 * (100vw/1440));
        width: calc(40 * (100vw/1440));
        height: calc(40 * (100vw/1440));
    }

    .btn_jump2 a {
        display: flex;
        width: calc(182 * (100vw/1440));
        height: calc(60 * (100vw/1440));
        padding: 0px calc(20 * (100vw/1440));
        align-items: center;
    }

    .btn_jump3 a,
    .btn_jump4 a {
        display: flex;
        width: calc(225 * (100vw/1440));
        height: calc(60 * (100vw/1440));
        padding: 0px calc(20 * (100vw/1440));
        align-items: center;
        padding: calc(15 * (100vw/1440)) calc(70 * (100vw/1440)) calc(15 * (100vw/1440)) calc(20 * (100vw/1440));
    }

    .slider .btnjump1, .slider .btnjump2, .slider .btnjump3, .slider .btnjump4 {
        width: 100%;
        height: calc(675 * (100vw/1440));
        background-size: cover;
        max-width: none;
    }

}


/* ======================
slick
========================= */
.slick-next::before {
    content: "←";
    width: calc(40 * (100vw/375));
    height: calc(40 * (100vw/375));
    display: flex;
    position: absolute;
    bottom: 0;
    top: calc(-29 * (100vw/375));
    right: calc(100 * (100vw/375));
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--primary-bluetxt);
    border: var(--primary-bluetxt) 2px solid;
}

.slick-next {
    right: calc(-15 * (100vw/375));
}

.slick-prev::before {
    content: "→";
    width: calc(40 * (100vw/375));
    height: calc(40 * (100vw/375));
    display: flex;
    align-items: center;
    position: absolute;
    top: calc(-29 * (100vw/375));
    right: calc(-340 * (100vw/375));
    justify-content: center;
    border-radius: 50%;
    color: var(--primary-bluetxt);
    border: var(--primary-bluetxt) 2px solid;
    padding: calc(1 * (100vw/375)) calc(9 * (100vw/375));
}

.slick-prev,
.slick-next {
    top: 0;
}

/* ==========================
pc
============================= */
@media screen and (min-width:769px) {
    .slick-next::before {
        width: calc(80 * (100vw/1440));
        height: calc(80 * (100vw/1440));
        top: calc(-69 * (100vw/1440));
        right: calc(356 * (100vw/1440));
    }

    .slick-prev::before {
        width: calc(80 * (100vw/1440));
        height: calc(80 * (100vw/1440));
        top: calc(-67 * (100vw/1440));
        left: calc(1180 * (100vw/1440));
        right: 0;
    }

    .slick-track{
        margin-top: calc(52 * (100vw/1440));
    }
}


/* ==========================
mission
============================= */
.mission,
.company,
.recruit {
    background-color: var(--primary-yellow);
}

.mission {
    position: relative;
}

.recruit {
    position: relative;
}

.mission_img,
.company_img,
.recruit_img {
    width: 74vw;
    margin: 0 10% 0 15%;
    position: relative;
}

.mission_img img,
.company_img img,
.recruit_img img {
    border-radius: 40px;
    position: relative;
    z-index: 1;
    width: 100%;
}

.mission_img::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background-color: var(--primary-yellow-deco);
    position: absolute;
    top: calc(12 * (100vw/375));
    right: calc(19 * (100vw/375));
}

.company_img::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background-color: var(--primary-yellow-deco);
    position: absolute;
    top: calc(12 * (100vw/375));
    left: calc(19 * (100vw/375));
}

.recruit_img::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background-color: var(--primary-yellow-deco);
    position: absolute;
    top: calc(12 * (100vw/375));
    right: calc(19 * (100vw/375));
}

.mission_container .topic {
    margin-top: calc(20 * (100vw/375));
}

.mission_group,
.company_group,
.recruit_group {
    padding: calc(30 * (100vw/375)) calc(17 * (100vw/375));
    background-color: var(--primary-white);
    border-radius: 40px;
    margin-top: calc(31 * (100vw/375));
    position: relative;
}

.mission_group::before {
    position: absolute;
    content: "";
    background-image: url(../images/top_decoration2.svg);
    width: calc(51 * (100vw/375));
    height: calc(111 * (100vw/375));
    background-repeat: no-repeat;
    background-size: contain;
    top: calc(4 * (100vw/375));
    right: calc(38 * (100vw/375));
}

.company_group::before {
    position: absolute;
    content: "";
    background-image: url(../images/top_decoration3.png);
    width: calc(54 * (100vw/375));
    height: calc(102 * (100vw/375));
    background-repeat: no-repeat;
    background-size: contain;
    top: calc(13 * (100vw/375));
    right: calc(38 * (100vw/375));
}

.recruit_group::before {
    position: absolute;
    content: "";
    background-image: url(../images/top_decoration4.png);
    width: calc(97 * (100vw/375));
    height: calc(98 * (100vw/375));
    background-repeat: no-repeat;
    background-size: contain;
    top: calc(3 * (100vw/375));
    right: calc(27 * (100vw/375));
}


.mission_container {
    margin-top: 28%;
    position: relative;
    margin: calc(31*(100vw/375)) auto 0;
}

.company_container,
.recruit_container {
    padding-top: calc(30 * (100vw/375));
    margin: 0 auto;
}

.recruit_container {
    padding-bottom: calc(17 * (100vw/375));
    position: relative;
}

.mission::before {
    content: "";
    background-image: url(../images/Vector_upper_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: block;
    width: 100%;
    height: calc(80 * (100vw/375));
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
}

.recruit::after {
    content: "";
    background-image: url(../images/Vector_under_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: calc(80 * (100vw/375));
    position: absolute;
    left: 0;
    bottom: calc(1*(100vw/375));
    transform: translateY(100%);
}

.mission_txts,
.company_txts,
.recruit_txts {
    margin-top: calc(24 * (100vw/375));
    font-size: calc(15 * (100vw/375));
    line-height: calc(28 * (100vw/375));
}

/* ==========================
pc
============================= */
@media screen and (min-width:769px) {
    .mission::before {
        content: "";
        background-image: url(../images/vector_upper_pc.png);
        display: block;
        width: 100%;
        height: calc(150 * (100vw/1440));
        position: absolute;
    }

    .mission_container {
        margin-top: 11%;
        display: flex;
        flex-direction: row-reverse;
        gap: calc(139 * (100vw/1440));
        padding: 0 calc(52 * (100vw/1440)) calc(30 * (100vw/1440));
        align-items: center;
        max-width: none;
        justify-content: center;
    }

    .mission_container .topic{
        margin-top: calc(20 * (100vw/1440));
    }

    .company_container {
        display: flex;
        padding: calc(80*(100vw/1440)) calc(52 * (100vw/1440)) 11%;
        align-items: center;
        justify-content: center;
        gap: calc(139 * (100vw/1440));
        max-width: none;
    }

    .recruit_container {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding: 0 calc(52 * (100vw/1440)) calc(30 * (100vw/1440));
        gap: calc(139 * (100vw/1440));
        justify-content: center;
        max-width: none;
    }

    .mission_group,
    .recruit_group {
        padding: calc(20 * (100vw/1440)) calc(20 * (100vw/1440))  calc(40 * (100vw/1440));
        width: calc(634 * (100vw/1440));
        margin-top: calc(100 * (100vw/1440));
    }

    .recruit_group .topic{
        margin-top: calc(20 * (100vw/1440));
    }

    .company_group {
        width: calc(634 * (100vw/1440));
        margin-top: calc(100 * (100vw/1440));
        padding: calc(40 * (100vw/1440));
    }

    .mission_img img {
        width: calc(563*(100vw / 1440));
        height: auto;
    }

    .company_img img {
        width: calc(563 * (100vw/1440));
        height: auto;
    }

    .recruit_img img {
        height: auto;
        width: calc(563 * (100vw/1440));
    }

    .recruit_img::before {
        width: 100%;
        height: 100%;
        top: calc(28 * (100vw/1440));
        right: 9%;
    }

    .mission_img::before {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 40px;
        background-color: var(--primary-yellow-deco);
        position: absolute;
        top: calc(28 * (100vw/1440));
        right: 9%;
    }

    .mission_txts,
    .company_txts,
    .recruit_txts {
        margin-top: calc(48 * (100vw/1440));
        font-size: calc(16 * (100vw/1440));
        line-height: calc(36 * (100vw/1440));
        height: auto;
    }

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

    .mission_img,
    .recruit_img {
        margin: 0;
        width: calc(563*(100vw / 1440));
    }

    .recruit::after {
        content: "";
        background-image: url(../images/vector_under_pc.png);
        bottom: 0;
        height: calc(150 * (100vw/1440));
    }

    
    .mission_group::before {
        width: calc(96 * (100vw/1440));
        height: calc(210 *(100vw/1440));
        top: calc(20 * (100vw/1440));
        right: 3%;
    }
    
    .company_group::before {
        width: calc(132 * (100vw/1440));
        height: calc(250 * (100vw/1440));
        top: calc(40 * (100vw/1440));
        right: 2%;
    }

    .recruit_group::before {
        width: calc(170 * (100vw/1440));
        height: calc(172 * (100vw/1440));
        top: calc(-46 * (100vw/1440));
        right: 12%;
    }

    .company_img::before {
        width: 100%;
        height: 100%;
        left: 9%;
        top: calc(28 * (100vw/1440));
    }

    .company_img {
        margin: 0;
        width: auto;
    }
}

/* ======================
slide animation
========================= */

.slide_container {
    position: relative;
    width: calc(327 * (100vw/375));
    height: calc(442 * (100vw/375));
    overflow: hidden;
    margin: auto;
}

.slide_img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-size: cover;
    animation: slideAnime 9s infinite;
}

@keyframes slideAnime {

    0%,
    63%,
    100% {
        opacity: 0;
    }

    /* スライドの非表示タイミング */

    20%,
    33% {
        opacity: 1;
    }

    /* スライドの表示タイミング */
}

.slide_img:nth-of-type(1) {
    background-image: url(../images/mainvisual1_sp.png);
    animation-delay: 0s;
    background-position: center;
    border-radius: calc(40 * (100vw/375));
}

.slide_img:nth-of-type(2) {
    background-image: url(../images/mainvisual2_sp.png);
    animation-delay: 3s;
    background-position: center;
    border-radius: calc(40 * (100vw/375));
}

.slide_img:nth-of-type(3) {
    background-image: url(../images/mainvisual3_sp.png);
    animation-delay: 6s;
    background-position: center;
    border-radius: calc(40 * (100vw/375));
}

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

@media screen and (min-width:769px) {
    .slide_container {
        position: relative;
        width: 88vw;
        height: calc(500 * (100vw/1440));
        overflow: hidden;
        margin: auto;
    }

    .slide_img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        background-size: cover;
        animation: slideAnime 9s infinite;
    }

    .slide_img:nth-of-type(1) {
        background-image: url(../images/mainvisual1.jpg);
        border-radius: calc(40 * (100vw/1440));
    }

    .slide_img:nth-of-type(2) {
        background-image: url(../images/mainvisual2.jpg);
        animation-delay: 3s;
        background-position: center;
        border-radius: calc(40 * (100vw/1440));
    }

    .slide_img:nth-of-type(3) {
        background-image: url(../images/mainvisual3.jpg);
        animation-delay: 6s;
        background-position: center;
        border-radius: calc(40 * (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: "";
}