/* =========================== */
/* 共通設定 */
/* =========================== */
:root {
    --main-width: 100vw;
    --device-width: 750;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(90 / var(--device-width)* var(--main-width));
}

body {
    background-image: url(../images/bg01_pc.jpg);
    background-size: 100%;
    background-repeat: repeat;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.8;
    color: #000;
    min-width: initial;
}

main {
    background-color: #fff;
    margin: auto;
}

a {
    color: #000;
    outline: none;
    text-decoration: none;
}

a:hover,
a:hover img
div.js_switchSlideTrigger:hover {
    opacity: 0.7;
    transition: 0.3s;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
dt,
th {
    font-weight: bold;
}

button {
    color: #000;
}

.pcbr {
    display: block !important;
}

.spbr {
    display: none !important;
}

@media screen and (min-width: 900px) {
    html {
        scroll-behavior: smooth;
    }

    :root {
        --main-width: 100vw;
        --device-width: 1280;
    }

    .wrap {
        position: relative;
        display: flex;
        background-image: url(../images/bg_pc.jpg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: 100vh;
        overflow: scroll;
    }

    main {
        position: absolute;
        right: 13%;
        width: calc(412 / var(--device-width)* var(--main-width));
    }

    .pcbr {
        display: none !important;
    }

    .spbr {
        display: block !important;
    }
}

/* =========================== */
/*  header  */
/* =========================== */
header {
    position: sticky;
    top: 0;
    left: 0;
    background: #FFF;
    height: calc(90 / var(--device-width)* var(--main-width));
    z-index: 10000;
}

nav {
    position: fixed;
    top: calc(90 / var(--device-width)* var(--main-width));
    width: 100%;
    background-color: #fff;
    z-index: 10;
}

header .logo {
    position: absolute;
    top: calc(20 / var(--device-width)* var(--main-width));
    left: calc(25 / var(--device-width)* var(--main-width));
    width: calc(259 / var(--device-width)* var(--main-width));
}

header ul {
    /*最初はナビゲーションボタンは非表示*/
    display: none;
    list-style: none;
}

header li:not(:last-of-type) {
    padding-bottom: calc(10 / var(--device-width)* var(--main-width))
}

header li a {
    display: block;
    text-align: center;
    text-decoration: none;
}

.hamburger {
    position: absolute;
    top: calc(32 / var(--device-width)* var(--main-width));
    right: calc(32 / var(--device-width)* var(--main-width));
    cursor: pointer;
    width: calc(60 / var(--device-width)* var(--main-width));
    height: calc(40 / var(--device-width)* var(--main-width));
    z-index: 10;
}

.hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: calc(6 / var(--device-width)* var(--main-width));
    background-color: #5CBFAE;
    width: 100%;
    z-index: 10;
}

.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 0;
}

.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: calc(12 / var(--device-width)* var(--main-width));
}

.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: calc(25 / var(--device-width)* var(--main-width));
}

.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: calc(10 / var(--device-width)* var(--main-width));
    transform: translateY(calc(6 / var(--device-width)* var(--main-width))) rotate(-33deg);
}

.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}

.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: calc(22 / var(--device-width)* var(--main-width));
    transform: translateY(calc(-6 / var(--device-width)* var(--main-width))) rotate(33deg);
}

.app_pc {
    display: none;
}

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

    header {
        position: fixed;
        top: 0;
        left: 0;
        background: transparent;
        height: auto;
        z-index: 10000;
    }

    nav {
        position: relative;
        top: 0;
        width: 100%;
        background: transparent;
        z-index: 10;
    }

    header .logo {
        position: absolute;
        top: calc(30 / var(--device-width)* var(--main-width));
        left: calc(35 / var(--device-width)* var(--main-width));
        width: calc(193 / var(--device-width)* var(--main-width));
    }

    header ul {
        /*最初はナビゲーションボタンは非表示*/
        display: flex;
        flex-direction: column;
        gap: 58px;
        list-style: none;
        position: absolute;
        top: calc(100 / var(--device-width)* var(--main-width));
        left: calc(240 / var(--device-width)* var(--main-width));
        width: calc(225 / var(--device-width)* var(--main-width));
    }

    header ul li {
        position: relative;
    }

    header ul li:not(:last-of-type)::after {
        position: absolute;
        bottom: calc(-30 / var(--device-width)* var(--main-width));
        ;
        left: 0;
        right: 0;
        display: block;
        content: "";
        margin: auto;
        background-image: url(../images/line.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: calc(47 / var(--device-width)* var(--main-width));
        height: calc(6 / var(--device-width)* var(--main-width));
    }


    header ul li:first-of-type {
        width: calc(191 / var(--device-width)* var(--main-width));
        margin: auto;
    }

    header ul li:nth-of-type(2) {
        width: calc(99 / var(--device-width)* var(--main-width));
        margin: auto;
    }

    header ul li:nth-of-type(3) {
        width: calc(151 / var(--device-width)* var(--main-width));
        margin: auto;
    }

    header ul li:nth-of-type(4) {
        width: calc(96 / var(--device-width)* var(--main-width));
        margin: auto;
    }

    header ul li:nth-of-type(5) {
        width: calc(195 / var(--device-width)* var(--main-width));
        margin: auto;
    }

    header li a {
        display: block;
        text-align: center;
        text-decoration: none;
    }

    .hamburger {
        display: none;
    }

    .app_pc {
        display: flex
;
        gap: 5%;
        width: 160%;
        margin: 0 auto 0 -28%;
    }

}

/* =========================== */
/*  fv */
/* =========================== */
.bg01 {
    background-image: url(../images/bg_01.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 16%;
}

#fv {
    width: 96%;
    margin: 0 auto 10% 3%;
    padding-top: 3%;

}

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

/* =========================== */
/*  content01*/
/* =========================== */
#content01 h2 {
    width: 45%;
    margin: 0 auto 3%;
}

.youtube {
    width: 85%;
    aspect-ratio: 16 / 9;
    margin: 0 auto 10%;
}

.youtube iframe {
    width: 100%;
    height: 100%;
}

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

/* =========================== */
/*  content02*/
/* =========================== */
#content02 div {
    width: 96%;
}

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

/* =========================== */
/*  content03*/
/* =========================== */
.bg02 {
    background-image: url(../images/bg_02.jpg);
    background-size: 100%;
    background-repeat: repeat;
    background-position: top center;
}

#content03 {
    padding-top: 18%;
}

#content03 .h2 {
    width: 87%;
    margin: 0 auto 10%;
}

#content03 .aero h2 {
    width: 52%;
    margin: 0 auto 4%;
}

#content03 .flex {
    display: flex;
    flex-wrap: wrap;
    width: 74%;
    gap: 9%;
    margin: auto;
}

#content03 .aero .flex {
    margin: 0 auto 8.5%;
}

#content03 .flex div {
    width: 45%;
}

#content03 .engineering h2 {
    width: 33%;
    margin: 0 auto 5%;
}

#content03 .engineering .flex {
    gap: calc(50 / var(--device-width)* var(--main-width)) 9%;
    margin: 0 auto 16%;
}


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

}

/* =========================== */
/*  content04*/
/* =========================== */
#content04 {
    position: relative;
    padding-bottom: 15%;
}

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


/* =========================== */
/* .swiper */
/* =========================== */
.swiper,
.swiper02 {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
    padding-bottom: 13%;
}

.swiper--wrapper {
    /* wrapperのサイズを調整 */
    width: 100%;
    height: auto;
}

.swiper-slide {
    /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

.swiper-slide a {
    position: absolute;
    display: block;
    width: 60%;
    margin: 0 auto 0 19%;
    left: 0;
    right: 0;
}

.swiper-slide:first-of-type img {
    width: 91%;
    margin: 0 auto 0 7.7%;
}

.swiper-slide:first-of-type a {
    bottom: 23.3%;
}

.swiper-slide:nth-of-type(2) img {
    width: 86%;
    margin: 0 auto 0 9%;
}

.swiper-slide:nth-of-type(2) a {
    bottom: 24.3%;
}

.swiper-slide:nth-of-type(3) img {
    width: 94%;
    margin: 0 auto 0 7%;
}

.swiper-slide:nth-of-type(3) a {
    bottom: 22.3%;
}

.swiper-slide:nth-of-type(4) img {
    width: 91%;
    margin: 0 auto 0 7%;
}

.swiper-slide:nth-of-type(4) a {
    bottom: 20.3%;
}

.swiper-slide:nth-of-type(5) img {
    width: 94.5%;
    margin: 0 auto 0 7%;
}

.swiper-slide:nth-of-type(5) a {
    bottom: 21.3%;
}

.swiper-slide:nth-of-type(6) img {
    width: 90%;
    margin: 0 auto 0 7%;
}

.swiper-slide:nth-of-type(6) a {
    bottom: 21.5%;
}

.swiper02 .swiper-slide:first-of-type img {
    width: 87.5%;
    margin: 0 auto;
}

.swiper02 .swiper-slide:first-of-type a {
    bottom: 8.3%;
}

.swiper02 .swiper-slide:nth-of-type(2) img {
    width: 87.5%;
    margin: 0 auto;
}

.swiper02 .swiper-slide:nth-of-type(2) a {
    bottom: 7.3%;
}

.swiper-button-next, .swiper-button-prev {
    color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    top: 47%;
    width: calc(88 / var(--device-width)* var(--main-width));
    height: calc(158 / var(--device-width)* var(--main-width));
}

.swiper-button-next {
    background-image: url("../images/icon_right.png");
    right: 0;

}

.swiper-button-prev {
    background-image: url(../images/icon_left.png);
    left: 0;
}

.swiper-button-next.swiper-button-next02 {
    background-image: url("../images/icon02_right.png");
    right: 0;
}

.swiper-button-prev.swiper-button-prev02 {
    background-image: url(../images/icon02_left.png);
    left: 0;
}

.swiper-pagination-bullet {
    width: calc(50 / var(--device-width)* var(--main-width));
    height: calc(50 / var(--device-width)* var(--main-width));
    border: solid 1px #000;
    background: #fff;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #5CBFAE;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, calc(20 / var(--device-width)* var(--main-width)));
}

@media screen and (min-width: 900px) {
    .swiper-button-next, .swiper-button-prev {
        width: calc(48 / var(--device-width)* var(--main-width));
        height: calc(88 / var(--device-width)* var(--main-width));
    }

    .swiper-pagination-bullet {
        width: calc(30 / var(--device-width)* var(--main-width));
        height: calc(30 / var(--device-width)* var(--main-width));
        border: solid 1px #000;
        background: #fff;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        opacity: var(--swiper-pagination-bullet-opacity, 1);
        background: #5CBFAE;
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, calc(10 / var(--device-width)* var(--main-width)));
    }

}

/* =========================== */
/* content05 */
/* =========================== */
#content05>div {
    width: 80%;
    margin: auto;
}

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

/* =========================== */
/* content06 */
/* =========================== */
#content06 {
    margin-top: -5%;

}

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

/* =========================== */
/* content07 */
/* =========================== */
#content07 {
    position: relative;
    background-image: url(../images/bg03.png);
    background-repeat: repeat;
    background-position: top center;
    background-size: 100%;
    padding-top: 10%;
    padding-bottom: 230%;
}

#content07 h2 {
    width: 87%;
    margin: auto;
}

#content07 .swiper02 {
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
}

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

/* =========================== */
/* content08 */
/* =========================== */
.bg03 {
    background-image: url(../images/bg04.jpg);
    background-size: 100%;
    background-repeat: repeat;
    background-position: top center;
}

#content08 {
    padding-top: 10%;
    position: relative;
    margin-bottom: 10%;
}

#content08 .tab {
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    margin: auto;

}

.tab {
    margin: 0 auto;
}

.tab-buttons {
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto 5%;
}

.tab-buttons div {
    width: 49.5%;
    cursor: pointer;
}

.tab-buttons button:hover {}

.tab-buttons button.active {}

.tab-contents {
    width: 88%;
    margin: auto;
}

.tab-contents .content {
    position: relative;
    display: none;
    animation: fadeIn 0.3s ease-in-out;
    border: solid 2px #000
}

.tab-contents .content::after {
    content: "";
    position: absolute;
    top: -4%;
    right: 1%;
    background-image: url(../images/icon_clip.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 10%;
    height: 10%;
}

.tab-contents .content.tab01 a {
    width: 80%;
    margin: auto;
    position: absolute;
    bottom: 4%;
    left: 0;
    right: 0;
}

.tab-contents .content.tab02 a {
    width: 80%;
    margin: auto;
    position: absolute;
    bottom: 4%;
    left: 0;
    right: 0;
}

.tab-contents .content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

/* =========================== */
/*  footer*/
/* =========================== */
.footer {
    position: relative;
    padding-top: 29%;
    margin-bottom: 29%;
}

.footer::after {
    content: "";
    position: absolute;
    bottom: calc(70 / var(--device-width)* var(--main-width));
    left: calc(140 / var(--device-width)* var(--main-width));
    background-image: url(../images/img_footer.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(450 / var(--device-width)* var(--main-width));
    height: calc(190 / var(--device-width)* var(--main-width));
}

@media screen and (min-width: 900px) {
    .footer::after {
        content: "";
        position: absolute;
        bottom: calc(38 / var(--device-width)* var(--main-width));
        left: calc(78 / var(--device-width)* var(--main-width));
        background-image: url(../images/img_footer.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: calc(270 / var(--device-width)* var(--main-width));
        height: calc(110 / var(--device-width)* var(--main-width));
    }

    .footer {
        margin-bottom: 0%;
    }
}


/* =========================== */
/*  下部固定申し込みボタン*/
/* =========================== */
#app {
    display: flex
;
    justify-content: space-between;
    gap: 3%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(../images/bg_02.jpg);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 3% 11% 3% 11%;
    z-index: 10000;
}

@media screen and (min-width: 900px) {
    #app {
        display: none;
    }
}