// mediaqueries
@mixin pc-layout($width: 1024px) {
    @media only screen and (min-width: $width) {
        @content;
    }
}
@mixin tab-layout($width: 1023px) {
    @media only screen and (max-width: $width) {
        @content;
    }
}
@mixin sp-layout($width: 767px) {
    @media only screen and (max-width: $width) {
        @content;
    }
}

body {
    color: #859396;
    font-size: 15px;
    letter-spacing: 0.12em;
    line-height: 1.86666667;
    font-feature-settings: "palt";
    @include sp-layout() {
        font-size: 13px;
        line-height: 1.84615385;
    }
}

.container {
    max-width: 1090px;
    padding: 0 15px;
    margin: 0 auto;
}

.sec-thought {
    background: url(../../images/thought/bg_thought.jpg) no-repeat center / cover !important;
    padding: 60px 0 !important;
    text-align: center;
    @include sp-layout() {
        padding: 40px 0;
    }

    &__ttl {
        width: 198px !important;
        margin: 0 auto;
        @include sp-layout() {
            width: 90px;
        }
    }

    &__subttl {
        display: block;
        color: #fff;
        font-size: 28px;
        letter-spacing: 0.3em;
        background-color: #073d5d;
        max-width: 926px;
        padding: 12px 0;
        margin: 28px auto 0;
        @include sp-layout() {
            background: transparent;
            padding: 0;
            font-size: 15px;
            letter-spacing: 0.2em;
            margin-top: 20px;
        }
        span {
            @include sp-layout() {
                background-color: #073d5d;
                padding: 7px 25px 8px;
                display: inline-block;
            }

            &:last-of-type {
                @include sp-layout() {
                    margin-top: 7px;
                }
            }
        }
    }
    &__txt {
        margin-top: 35px;
        font-size: 12px;
        line-height: 1.75;
        @include sp-layout() {
            margin-top: 20px;
            width: 294px;
            margin: 20px auto 0;
        }
    }

    &__btn {
        margin-top: 35px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 210px;
        color: #073d5d;
        border: 1px solid #073d5d;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s;
        height: 47px;
        position: relative;
        font-size: 19px;
        @include sp-layout() {
            margin-top: 25px;
            font-size: 13px;
            width: 113px;
            height: 35px;
        }
        &::before {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            width: 42px;
            background-color: #073d5d;
            height: 1px;
            content: "";
            @include sp-layout() {
                width: 14px;
            }
        }
        &:hover {
            border: 1px solid #fff;
            transition: 0.3s;
        }
    }
}
.l-mv {
    background: url(../../images/thought/bg_mv.jpg) no-repeat center bottom/ 100%;
    min-height: 850px;
    padding-top: 80px;
    @include sp-layout() {
        background: url(../../images/thought/bg_mv_sp.jpg) no-repeat center bottom/ 100%;
        min-height: auto;
        padding-bottom: 200px;
        padding-top: 40px;
        padding-left: 25px;
    }
    .container {
        position: relative;
        &::before {
            position: absolute;
            content: "THOUGHT";
            writing-mode: vertical-lr;
            font-size: 14px;
            font-weight: bold;
            left: -110px;
            top: 15px;
            color: #073d5d;
            transform: rotate(180deg);
            display: block;
            @include sp-layout() {
                position: static;
                writing-mode: horizontal-tb;
                transform: rotate(0);
            }
        }

        &::after {
            position: absolute;
            content: "";
            display: block;
            width: 1px;
            height: 230px;
            background-color: #073d5d;
            left: -98px;
            top: 115px;
        }
    }

    &__ttl {
        color: #073d5d;
        font-size: 40px;
        line-height: 1.75;
        letter-spacing: 0.3em;
        @include tab-layout() {
            font-size: 30px;
        }
        @include sp-layout() {
            font-size: 26px;
            margin-top: 40px;
            letter-spacing: 0.2em;
            line-height: 1.69230769;
        }
    }
    &__txt {
        letter-spacing: 0.2em;
        margin-top: 40px;
        font-size: 20px;
        line-height: 2.25;
        color: #073d5d;
        @include tab-layout() {
            font-size: 18px;
        }
        @include sp-layout() {
            font-size: 14px;
            line-height: 2.07142857;
            letter-spacing: 0.1em;
        }
    }
}

.sec01 {
    max-width: 1690px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: -80px;
    @include sp-layout() {
        background-color: #073d5d;
        display: block;
        margin-top: 0;
        padding-top: 60px;
        padding-right: 45px;
        padding-bottom: 160px;
    }
    .img {
        width: 59%;
        @include tab-layout() {
            width: 50%;
        }
        @include sp-layout() {
            width: 100%;
        }
    }
    .box {
        padding: 90px 15px 70px 80px;
        width: 41%;
        background-color: #073d5d;
        color: #fff;
        @include tab-layout() {
            width: 50%;
            padding: 50px 20px;
        }
        @include sp-layout() {
            padding: 0;
            padding-left: 40px;
            margin-top: 50px;
            width: 100%;
        }
    }
}

.box {
    .inner {
        max-width: 420px;
    }
    h3 {
        font-size: 24px;
        line-height: 1.75;
        @include tab-layout() {
            font-size: 22px;
        }
        @include sp-layout() {
            font-size: 20px;
            line-height: 1.75;
            letter-spacing: 0em;
        }
    }
    p {
        margin-top: 40px;
        text-align: justify;
        text-justify: inter-ideograph;
        text-align-last: left;
        letter-spacing: 0.12em;
        line-height: 1.86666667;
        @include tab-layout() {
            margin-top: 34px;
        }
        @include sp-layout() {
            letter-spacing: 0;
            margin-top: 30px;
        }
    }
}

.sec02 {
    max-width: 1690px;
    margin: 0 auto;
    position: relative;
    @include sp-layout() {
        margin-top: -115px;
    }

    .img {
        width: 36.78%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        @include tab-layout() {
            width: 50%;
        }
        @include sp-layout() {
            width: 100%;
            position: static;
            transform: translate(0);
            padding-left: 90px;
        }
    }
    .box {
        padding-top: 170px;
        padding-bottom: 190px;
        padding-left: 115px;
        width: 49.28%;
        background-color: #f9fafa;
        margin-left: 150px;
        @include tab-layout() {
            padding: 50px 40px 50px 20px;
            margin-left: 15px;
        }
        @include sp-layout() {
            width: 100%;
            margin-left: 0;
            padding: 0;
            margin-top: 50px;
            padding-left: 40px;
            padding-right: 40px;
            background: transparent;
        }
        h3 {
            color: #073d5d;
        }

        .inner {
            max-width: 405px;
            p{
                letter-spacing: 0;
            }
        }
    }
}

.sec03 {
    position: relative;
    max-width: 1690px;
    margin: 0 auto;

    @include sp-layout() {
        background-color: #073d5d;
        margin-top: 60px;
    }
    &::before {
        position: absolute;
        width: 100%;
        height: 530px;
        background-color: #f9fafa;
        content: "";
        z-index: -1;
        top: 195px;
        left: 0;
        @include sp-layout() {
            display: none;
        }
    }
    .img {
        width: 68.2%;
        @include tab-layout() {
            width: 50%;
        }
        @include sp-layout() {
            width: 100%;
        }
    }
    .box {
        padding: 70px 15px 70px 90px;
        width: 41%;
        background-color: #073d5d;
        color: #fff;
        position: absolute;
        z-index: 9;
        left: 42.5%;
        margin-top: -40px;
        @include tab-layout() {
            width: 55%;
            left: auto;
            right: 0;
            padding: 50px 15px;
        }
        @include sp-layout() {
            position: relative;
            padding: 50px 40px;
            left: 0;
            margin-top: 0;
            margin-top: -1px;
            width: 100%;
        }
        .inner {
            max-width: 405px;
            p{
                letter-spacing: 0;
            }
        }
    }
}

.sec04 {
    position: relative;
    max-width: 1690px;
    margin: 0 auto;
    margin-top: 355px;
    @include sp-layout() {
        margin-top: 45px;
    }
    .wrap {
        max-width: 1268px;
        border-bottom: 5px solid #073d5d;
        margin-left: auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        @include sp-layout() {
            flex-direction: column-reverse;
            border: none;
            align-items: flex-start;
        }
    }

    .img {
        width: 53.4%;
        @include sp-layout() {
            padding-left: 95px;
            width: 100%;
            position: relative;
            z-index: 9;
        }
    }
    .box {
        width: 56.6%;
        padding: 80px 15px 80px 90px;
        background-color: #f9fafa;
        @include tab-layout() {
            padding: 50px 40px 50px 20px;
        }
        @include sp-layout() {
            width: 100%;
            margin-top: -110px;
            padding-top: 160px;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 150px;
        }
        h3 {
            color: #073d5d;
            @include sp-layout() {
                letter-spacing: 0;
                white-space: nowrap;
            }
        }
        .inner {
            max-width: 405px;
            p{
                letter-spacing: 0;
            }
        }
    }
}

.sec05 {
    max-width: 1690px;
    margin: 0 auto;
    margin-top: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    @include sp-layout() {
        margin-top: -110px;
        z-index: 9;
        position: relative;
        display: block;
    }

    .img {
        width: 43.2%;
        @include tab-layout() {
            width: 50%;
        }
        @include sp-layout() {
            padding-right: 53px;
            width: 100%;
        }
    }
    .box {
        padding-left: 100px;
        @include tab-layout() {
            width: 50%;
            padding: 50px 20px;
        }
        @include sp-layout() {
            width: 100%;
            padding-left: 40px;
            padding-right: 40px;
            padding-top: 50px;
        }
        h3 {
            color: #073d5d;
        }
        .inner {
            max-width: 405px;
            p{
                letter-spacing: 0;
            }
        }
    }
}
.sec06 {
    max-width: 1690px;
    margin: 0 auto;
    position: relative;
    margin-top: 165px;
    @include sp-layout() {
        margin-top: 60px;
    }
    &::before {
        position: absolute;
        width: 100%;
        height: 871px;
        background-color: #f9fafa;
        content: "";
        z-index: -1;
        bottom: -80px;
        left: 0;
        @include tab-layout() {
            display: none;
        }
    }

    .img {
        margin-left: auto;

        width: 50%;
        position: relative;
        z-index: 9;
        @include tab-layout() {
            width: 50%;
        }
        @include sp-layout() {
            width: 100%;
        }
    }
    .box {
        position: absolute;
        left: 200px;
        background-color: #073d5d;
        color: #fff;
        padding: 70px 15px;
        width: 38.4%;
        top: 245px;
        @include tab-layout() {
            width: 55%;
            left: 0px;
            padding: 50px 20px;
            top: 100px;
        }
        @include sp-layout() {
            width: 100%;
            position: static;
            padding: 50px 40px;
        }
        .inner {
            margin: 0 auto;
        }
        .inner {
            max-width: 405px;
            p{
                letter-spacing: 0;
            }
        }
    }
}

.sec07 {
    margin-top: 360px;
    color: #073d5d;
    text-align: center;
    @include sp-layout() {
        margin-top: 70px;
    }
    &__ttl {
        font-size: 40px;
        letter-spacing: 0.2em;
        @include tab-layout() {
            font-size: 30px;
        }
        @include sp-layout() {
            font-size: 26px;
            line-height: 1.75;
        }
    }
    &__txt {
        font-size: 20px;
        line-height: 2.25;
        margin-top: 50px;
        @include tab-layout() {
            font-size: 16px;
        }
        @include sp-layout() {
            margin-top: 40px;
            font-size: 15px;
            line-height: 2.26666667;
        }
    }

    .img {
        margin-top: 160px;
        @include tab-layout() {
            margin-top: 100px;
        }
        @include sp-layout() {
            margin-top: 60px;
        }
        img {
            width: 100%;
        }
    }
}