@charset "UTF-8";

.common-sub-head {
    font-size: min(calc(16vw / 1366 * 100), 16px);
    text-align: center;
}

.common-head {
    display: flex;
    justify-content: center;
    font-family: "adobe-caslon-pro", serif;
    margin-top: min(calc(10vw / 1366 * 100), 10px);
    font-size: min(calc(30vw / 1366 * 100), 30px);
    text-align: center;
    line-height: 1;
}

.common-head::before,
.common-head::after {
    content: "";
    display: block;
    background-color: #101010;
    width: min(calc(35vw / 1366 * 100), 35px);
    height: 0.5px;
    margin: min(calc(10vw / 1366 * 100), 10px) min(calc(20vw / 1366 * 100), 20px);
}

.btn-effects {
    transition: background-color 0.5s, color 0.5s;
}

.btn-effects:hover {
    color: #1F549B;
    background-color: #fff;
}

.btn-effects a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.btn-effects a:hover {
    text-decoration: none;
}

@media (max-width: 750px) {
    .common-sub-head {
        font-size: calc(32vw / 750 * 100);
    }

    .common-head {
        margin-top: calc(10vw / 750 * 100);
        font-size: calc(62vw / 750 * 100);
    }

    .common-head::before,
    .common-head::after {
        width: calc(70vw / 750 * 100);
        margin: calc(23vw / 750 * 100) calc(20vw / 750 * 100);
    }
}

/* animation */
.fade-in-bottom {
    opacity: 0;
}

.fade-in-bottom.scroll-anime-start {
    animation: fade-in-bottom 0.5s 0.5s forwards;
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-loop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* side-menu */
@media (max-width: 750px) {
    .side-menu {
        position: fixed;
        top: calc(130vw / 750 * 100);
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(../img/pc/header_bg.jpg);
        width: 100%;
        height: calc(100vh - calc(130vw / 750 * 100));
        color: #fff;
        border-top: calc(2vw / 750 * 100) solid #fff;
        text-align: center;
        z-index: 20;
    }

    .side-menu-language-list {
        display: flex;
        justify-content: space-around;
        margin-bottom: calc(100vw / 750 * 100);
    }

    .side-menu-language-item {
        position: relative;
        font-size: calc(28vw / 750 * 100);
    }

    .side-menu-language-item.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-top: calc(2vw / 750 * 100) solid #4967D8;
    }

    .side-menu-link-nav-item {
        font-size: calc(36vw / 750 * 100);
        margin-bottom: calc(25vw / 750 * 100);
    }

    .side-menu-link-external-area {
        margin-top: calc(90vw / 750 * 100);
    }

    .side-menu-link-external-item {
        width: calc(420vw / 750 * 100);
        height: calc(68vw / 750 * 100);
        margin: calc(30vw / 750 * 100) auto;
        border: calc(1vw / 750 * 100) solid #fff;
        border-radius: calc(50vw / 750 * 100);
        line-height: 1;
    }

    .side-menu-link-external-ig {
        width: calc(88vw / 750 * 100);
        margin: calc(90vw / 750 * 100) auto;
    }
}

/* fixed-bnr */
.fixed-bnr {
    position: fixed;
    bottom: min(calc(20vw / 1366 * 100), 20px);
    right: min(calc(20vw / 1366 * 100), 20px);
    margin: 0 auto;
    width: min(calc(150vw / 1366 * 100), 150px);
    z-index: 10;
    opacity: 0;
}

.scroll-anime-start.fixed-bnr {
    animation: fade-in-bottom 0.5s 0.5s forwards;
}

@media (max-width: 750px) {
    .fixed-bnr {
        bottom: calc(20vw / 750 * 100);
        right: calc(20w / 750 * 100);
        width: calc(180vw / 750 * 100);
    }
}

/* story */
.story {
    padding: min(calc(270vw / 1366 * 100), 270px) 0 min(calc(45vw / 1366 * 100), 45px);
    overflow-x: hidden;
}

.story-bg {
    position: relative;
    width: min(100%, min(100%, 1366px));
    margin: 0 auto;
}

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

.story-img-area {
    position: relative;
}

.story-main-img {
    width: min(calc(169vw / 1366 * 100), 169px);
    margin: min(calc(115vw / 1366 * 100), 115px) auto 0 min(calc(51vw / 1366 * 100), 51px);
}

.story-img-map {
    position: absolute;
    top: -282px;
    left: -563px;
    width: 944px;
    z-index: -1;
}

.story-details {
    width: min(calc(620vw / 1366 * 100), 620px);
}

.story-details-head {
    position: relative;
    font-size: min(calc(26vw / 1366 * 100), 26px);
    margin-bottom: min(calc(35vw / 1366 * 100), 35px);
    line-height: 1.4;
}

.story-details-head::after {
    content: "";
    position: absolute;
    top: min(calc(-36vw / 1366 * 100), -36px);
    left: 0;
    display: block;
    background-image: url(../img/pc/story_header_bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: min(calc(852vw / 1366 * 100), 852px);
    height: min(calc(54vw / 1366 * 100), 54px);
}

.story-details-txt {
    font-size: min(calc(17vw / 1366 * 100), 17px);
    margin-bottom: min(calc(25vw / 1366 * 100), 25px);
    line-height: 1.4;
}

.story-img-list-area {
    display: flex;
    margin-top: min(calc(93vw / 1366 * 100), 93px);
}

.story-img-list {
    display: flex;
    animation: slide-loop 25s infinite linear 0.5s both;
}

.story-img-item {
    width: min(calc(300vw / 1366 * 100), 300px);
    margin-right: min(calc(15vw / 1366 * 100), 15px);
}

@media (max-width: 1366px) {
    .story-img-map {
        top: max(calc(-282vw / 1366 * 100), -282px);
        left: 0;
        width: min(calc(386vw / 1366 * 100), 386px);
    }
}

@media (max-width: 750px) {
    .story {
        padding: calc(195vw / 750 * 100) 0 calc(160vw / 750 * 100);
    }

    .story-bg {
        width: 100%;
    }

    .story .inner {
        display: block;
    }

    .story-main-img {
        position: absolute;
        top: calc(461vw / 750 * 100);
        right: calc(9vw / 750 * 100);
        width: calc(214vw / 750 * 100);
        margin: 0 auto;
    }

    .story-img-map {
        top: calc(-105vw / 750 * 100);
        left: 0;
        width: calc(627vw / 750 * 100);
    }

    .story-details {
        width: calc(620vw / 750 * 100);
    }

    .story-details-head {
        font-size: calc(41vw / 750 * 100);
        margin-bottom: calc(915vw / 750 * 100);
    }

    .story-details-head::after {
        background-size: contain;
        top: calc(-62vw / 750 * 100);
        left: calc(4vw / 750 * 100);
        width: calc(1470vw / 750 * 100);
        height: calc(132vw / 750 * 100);
    }

    .story-details-txt {
        font-size: calc(29vw / 750 * 100);
        margin-bottom: calc(40vw / 750 * 100);
        line-height: 1.5;
    }

    .story-img-list-area {
        margin-top: calc(93vw / 750 * 100);
    }

    .story-img-item {
        width: calc(400vw / 750 * 100);
        margin-right: calc(15vw / 750 * 100);
    }
}

/* lineup */
.lineup {
    position: relative;
    background-image: url(../img/pc/lineup_bg.jpg);
    background-size: cover;
    padding: min(calc(150vw / 1366 * 100), 150px) 0 min(calc(100vw / 1366 * 100), 100px);
    color: #fff;
}

.lineup .common-head::before,
.lineup .common-head::after {
    background-color: #fff;
}

.lineup .inner {
    width: min(calc(680vw / 1366 * 100), 680px);
}

.lineup-list {
    margin-top: min(calc(85vw / 1366 * 100), 85px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.lineup-box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: min(calc(290vw / 1366 * 100), 290px);
    margin-bottom: min(calc(100vw / 1366 * 100), 100px);
    text-align: center;
}

.lineup-box-img {
    width: min(calc(178vw / 1366 * 100), 178px);
    margin: 0 auto;
}

.lineup-box-desc {
    font-size: min(calc(16vw / 1366 * 100), 16px);
    color: #FFE795;
    margin-top: min(calc(20vw / 1366 * 100), 20px);
}

.lineup-box-head {
    font-size: min(calc(22vw / 1366 * 100), 22px);
    margin-top: min(calc(15vw / 1366 * 100), 15px);
}

.lineup-box-txt {
    font-size: min(calc(16vw / 1366 * 100), 16px);
    margin-top: min(calc(10vw / 1366 * 100), 10px);
    line-height: 1.4;
}

.lineup-box-btn {
    position: relative;
    width: min(calc(161vw / 1366 * 100), 161px);
    height: min(calc(35vw / 1366 * 100), 35px);
    margin: min(calc(35vw / 1366 * 100), 35px) auto 0;
    border: 0.5px solid #fff;
}

@media (max-width: 750px) {
    .lineup {
        padding: calc(190vw / 750 * 100) 0 calc(160vw / 750 * 100);
    }

    .lineup .inner {
        width: calc(660vw / 750 * 100);
    }

    .lineup-list {
        margin-top: calc(85vw / 750 * 100);
    }

    .lineup-box {
        width: calc(290vw / 750 * 100);
        margin-bottom: 0;
    }

    .tns-horizontal.tns-subpixel>.tns-item.lineup-box {
        display: flex;
    }

    .lineup-box-img {
        width: calc(356vw / 750 * 100);
    }

    .lineup-box-desc {
        font-size: calc(32vw / 750 * 100);
        margin-top: calc(40vw / 750 * 100);
    }

    .lineup-box-head {
        font-size: calc(42vw / 750 * 100);
        margin-top: calc(25vw / 750 * 100);
    }

    .lineup-box-txt {
        font-size: calc(32vw / 750 * 100);
        margin-top: calc(32vw / 750 * 100);
    }

    .lineup-box-btn {
        width: calc(321vw / 750 * 100);
        height: calc(70vw / 750 * 100);
        margin: calc(70vw / 750 * 100) auto 0;
        font-size: calc(28vw / 750 * 100);
    }

    .lineup-icon-swipe {
        width: calc(108vw / 750 * 100);
        margin: calc(50vw / 750 * 100) 0 0 auto;
    }
}

/* middle_cv */
.middle_cv .inner {
    background-image: url(../img/pc/middle_cv_bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: min(calc(470vw / 1366 * 100), 470px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.middle_cv-btn {
    position: relative;
    width: min(calc(277vw / 1366 * 100), 277px);
    height: min(calc(55vw / 1366 * 100), 55px);
    margin: 0 auto;
    border: 1px solid #fff;
    font-size: min(calc(26vw / 1366 * 100), 26px);
    color: #fff;
}

@media (max-width: 750px) {
    .middle_cv .inner {
        background-image: url(../img/sp/middle_cv_bg.jpg);
        height: calc(884vw / 750 * 100);
    }

    .middle_cv-btn {
        width: calc(500vw / 750 * 100);
        height: calc(103vw / 750 * 100);
        font-size: calc(42vw / 750 * 100);
        border: calc(2vw / 750 * 100) solid #fff;
    }
}

/* intro */
.intro {
    padding: min(calc(190vw / 1366 * 100), 190px) 0 min(calc(170vw / 1366 * 100), 170px);
}

.intro-top {
    text-align: center;
}

.intro-top-head {
    position: relative;
    font-size: min(calc(33vw / 1366 * 100), 33px);
    margin-bottom: min(calc(50vw / 1366 * 100), 50px);
    line-height: 1.3;
}

.intro-top-head::before {
    content: "";
    display: block;
    background-image: url(../img/pc/intro_head_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: max(calc(-145vw / 1366 * 100), -145px);
    left: min(calc(20vw / 1366 * 100), 20px);
    width: min(calc(362vw / 1366 * 100), 362px);
    height: min(calc(185vw / 1366 * 100), 185px);
    margin-bottom: min(calc(40vw / 1366 * 100), 40px);
}

.intro-top-txt {
    font-size: min(calc(17vw / 1366 * 100), 17px);
    margin-top: min(calc(40vw / 1366 * 100), 40px);
    line-height: 1.7;
}

.intro-details-list {
    margin-top: min(calc(78vw / 1366 * 100), 78px);
}

.intro-details-box {
    display: flex;
    justify-content: space-between;
}

.intro-details-box:nth-child(even) {
    flex-direction: row-reverse;
}

.intro-details-box+.intro-details-box {
    margin-top: min(calc(55vw / 1366 * 100), 55px);
}

.intro-details-box-txt-area {
    width: min(calc(511vw / 1366 * 100), 511px);
}

.intro-details-box-head {
    font-size: min(calc(28vw / 1366 * 100), 28px);
    margin-bottom: min(calc(20vw / 1366 * 100), 20px);
    border-bottom: 1px solid;
}

.intro-details-box-sub-head {
    font-size: min(calc(22vw / 1366 * 100), 22px);
    margin-top: min(calc(10vw / 1366 * 100), 10px);
    line-height: 1.5;
}

.intro-details-box-note {
    font-size: min(calc(28vw / 1366 * 100), 28px);
    margin-top: min(calc(30vw / 1366 * 100), 30px);
}

.intro-details-box-txt {
    font-size: min(calc(24vw / 1366 * 100), 24px);
    margin-top: min(calc(30vw / 1366 * 100), 30px);
}

.intro-details-box-note+.intro-details-box-txt {
    margin-top: min(calc(10vw / 1366 * 100), 10px);
}

.intro-details-box-img-list {
    width: min(calc(300vw / 1366 * 100), 300px);
}

.intro-details-box:nth-child(2) .intro-details-box-img-list {
    width: min(calc(340vw / 1366 * 100), 340px);
}

.intro-details-box-img {
    margin-top: min(calc(15vw / 1366 * 100), 15px);
}

@media (max-width: 750px) {
    .intro {
        padding: calc(265vw / 750 * 100) 0 calc(155vw / 750 * 100);
    }

    .intro-top-head {
        font-size: calc(48vw / 750 * 100);
        margin-bottom: calc(60vw / 750 * 100);
    }

    .intro-top-head::before {
        background-image: url(../img/sp/intro_head_bg.png);
        top: calc(-230vw / 750 * 100);
        left: calc(-30vw / 750 * 100);
        width: calc(696vw / 750 * 100);
        height: calc(308vw / 750 * 100);
        margin-bottom: calc(40vw / 750 * 100);
    }

    .intro-top-txt {
        font-size: calc(28vw / 750 * 100);
        margin-top: calc(40vw / 750 * 100);
        line-height: 1.6;
    }

    .intro-details-list {
        margin-top: calc(130vw / 750 * 100);
    }

    .intro-details-box+.intro-details-box {
        margin-top: calc(95vw / 750 * 100);
    }

    .intro-details-box {
        display: block;
    }

    .intro-details-box-txt-area {
        width: 100%;
    }

    .intro-details-box-head {
        font-size: calc(46vw / 750 * 100);
        margin-bottom: calc(30vw / 750 * 100);
        border-bottom: calc(2vw / 750 * 100) solid;
        padding-bottom: calc(5vw / 750 * 100);
    }

    .intro-details-box-sub-head {
        font-size: calc(40vw / 750 * 100);
        margin-top: calc(15vw / 750 * 100);
    }

    .intro-details-box-note {
        font-size: calc(44vw / 750 * 100);
        margin-top: calc(70vw / 750 * 100);
    }

    .intro-details-box-txt {
        font-size: calc(30vw / 750 * 100);
        margin-top: calc(30vw / 750 * 100);
        line-height: 1.5;
    }

    .intro-details-box-note+.intro-details-box-txt {
        margin-top: calc(10vw / 750 * 100);
    }

    .intro-details-box-img-list {
        width: 100%;
        margin-top: calc(55vw / 750 * 100);
        display: flex;
        justify-content: space-between;
    }

    .intro-details-box:nth-child(2) .intro-details-box-img-list {
        width: 100%;
    }

    .intro-details-box-img {
        width: calc(324vw / 750 * 100);
        margin-top: 0;
    }

    .intro-details-box:nth-child(2) .intro-details-box-img {
        width: 100%;
    }
}

/* media */
.media {
    background-image: url(../img/pc/media_bg.jpg);
    background-size: cover;
    padding: min(calc(120vw / 1366 * 100), 120px) 0 min(calc(270vw / 1366 * 100), 270px);
}

.media-head {
    font-size: min(calc(30vw / 1366 * 100), 30px);
    color: #FFDE6F;
    margin: max(calc(-15vw / 1366 * 100), -15px) auto min(calc(25vw / 1366 * 100), 25px);
    text-align: center;
}

.media-txt {
    font-size: min(calc(22vw / 1366 * 100), 22px);
    color: #fff;
    margin-top: min(calc(20vw / 1366 * 100), 20px);
    text-align: center;
    line-height: 1.5;
}

.media-img {
    width: 100%;
    margin-top: min(calc(50vw / 1366 * 100), 50px);
}

@media (max-width: 750px) {
    .media {
        padding: calc(90vw / 750 * 100) 0 calc(270vw / 750 * 100);
    }

    .media-head {
        font-size: calc(50vw / 750 * 100);
        margin: calc(65vw / 750 * 100) auto calc(25vw / 750 * 100);
    }

    .media-txt {
        font-size: calc(36vw / 750 * 100);
        margin-top: calc(30vw / 750 * 100);
        line-height: 1.6;
    }

    .media-img {
        margin-top: calc(40vw / 750 * 100);
    }
}

.bg-gradation {
    background: linear-gradient(#152b7a 0%, #0b163d 100%);
    clip-path: polygon(0 min(calc(150vw / 1366 * 100), 150px), 100% 0, 100% 100%, 0 calc(100% - min(calc(150vw / 1366 * 100), 150px)));
}

@media (max-width: 750px) {
    .bg-gradation {
        clip-path: polygon(0 calc(170vw / 750 * 100), 100% 0, 100% 100%, 0 calc(100% - calc(170vw / 750 * 100)));
    }
}

/* uv */
.uv {
    padding: min(calc(150vw / 1366 * 100), 150px) 0 min(calc(50vw / 1366 * 100), 50px);
    margin-top: max(calc(-150vw / 1366 * 100), -150px);
}

.uv .inner {
    padding: min(calc(100vw / 1366 * 100), 100px) 0 min(calc(145vw / 1366 * 100), 145px);
    color: #fff;
}

.uv-head {
    font-size: min(calc(34vw / 1366 * 100), 34px);
    text-align: center;
}

.uv-box-list {
    margin-top: min(calc(95vw / 1366 * 100), 95px);
}

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

.uv-box:nth-child(even) {
    flex-direction: row-reverse;
}

.uv-box+.uv-box {
    margin-top: min(calc(130vw / 1366 * 100), 130px);
}

.uv-box-txt-area {
    width: min(calc(520vw / 1366 * 100), 520px);
}

.uv-box-head {
    font-size: min(calc(22vw / 1366 * 100), 22px);
    line-height: 1.6;
}

.uv-box-post {
    font-size: min(calc(20vw / 1366 * 100), 20px);
    margin-top: min(calc(25vw / 1366 * 100), 25px);
    line-height: 1;
}

.uv-box-name {
    font-size: min(calc(27vw / 1366 * 100), 27px);
    margin-bottom: min(calc(40vw / 1366 * 100), 40px);
}

.uv-box-txt {
    font-size: min(calc(16vw / 1366 * 100), 16px);
    margin-top: min(calc(15vw / 1366 * 100), 15px);
}

.uv-box-img-list {
    position: relative;
    width: min(calc(340vw / 1366 * 100), 340px);
}

.uv-box-img+.uv-box-img {
    margin-top: min(calc(70vw / 1366 * 100), 70px);
}

.uv-box-map {
    position: absolute;
    top: min(calc(363vw / 1366 * 100), 363px);
    right: max(calc(-172vw / 1366 * 100), -172px);
    width: min(calc(235vw / 1366 * 100), 235px);
}

@media (max-width: 750px) {
    .uv {
        padding: calc(200vw / 750 * 100) 0 calc(50vw / 750 * 100);
        margin-top: calc(-190vw / 750 * 100);
    }

    .uv .inner {
        padding: calc(95vw / 750 * 100) 0 calc(74vw / 750 * 100);
    }

    .uv-head {
        font-size: calc(51vw / 750 * 100);
    }

    .uv-box-list {
        margin-top: calc(125vw / 750 * 100);
    }

    .uv-box {
        position: relative;
        flex-direction: column-reverse;
        padding-bottom: calc(570vw / 750 * 100);
    }

    .uv-box:nth-child(even) {
        flex-direction: column-reverse;
    }

    .uv-box+.uv-box {
        margin-top: calc(160vw / 750 * 100);
    }

    .uv-box-txt-area {
        width: 100%;
        margin-top: calc(35vw / 750 * 100);
    }

    .uv-box-head {
        font-size: calc(37vw / 750 * 100);
        line-height: 1.2;
    }

    .uv-box-post {
        font-size: calc(31vw / 750 * 100);
        margin-top: calc(40vw / 750 * 100);
    }

    .uv-box-name {
        font-size: calc(44vw / 750 * 100);
        line-height: 1.2;
        margin-bottom: calc(80vw / 750 * 100);
    }

    .uv-box-txt {
        font-size: calc(32vw / 750 * 100);
        margin-top: calc(30vw / 750 * 100);
        line-height: 1.6;
    }

    .uv-box-img-list {
        position: static;
        width: 100%;
    }

    .uv-box-img+.uv-box-img {
        margin-top: 0;
    }

    .uv-box:nth-child(1) .uv-box-img:nth-child(2) {
        position: absolute;
        bottom: calc(55vw / 750 * 100);
        left: calc(45vw / 750 * 100);
        width: calc(200vw / 750 * 100);
    }

    .uv-box:nth-child(2) .uv-box-img:nth-child(2) {
        position: absolute;
        bottom: calc(55vw / 750 * 100);
        left: calc(177vw / 750 * 100);
        width: calc(440vw / 750 * 100);
    }

    .uv-box-map {
        top: auto;
        bottom: 0;
        right: calc(-2vw / 750 * 100);
        width: calc(380vw / 750 * 100);
    }
}

/* howto */
.howto {
    padding: min(calc(30vw / 1366 * 100), 30px) 0 min(calc(245vw / 1366 * 100), 245px);
    color: #fff;
    margin-top: -1px;
}

.howto .inner {
    padding-top: min(calc(100vw / 1366 * 100), 100px);
}

.howto .inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    width: 50%;
    border-top: 0.7px solid #fff;
    margin: 0 auto;
}

.howto-head {
    font-size: min(calc(34vw / 1366 * 100), 34px);
    text-align: center;
    line-height: 1.2;
}

.howto-box-list {
    margin-top: min(calc(50vw / 1366 * 100), 50px);
}

.howto-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.howto-box+.howto-box {
    margin-top: min(calc(40vw / 1366 * 100), 40px);
}

.howto-box-head {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(calc(130vw / 1366 * 100), 130px);
    height: min(calc(130vw / 1366 * 100), 130px);
    border-radius: 50%;
    border: 1px solid #fff;
    text-align: center;
}

.howto-box-head::after {
    content: "";
    display: block;
    position: absolute;
    bottom: max(calc(-23vw / 1366 * 100), -23px);
    right: max(calc(-17vw / 1366 * 100), -17px);
    width: min(calc(66vw / 1366 * 100), 66px);
    border-bottom: 1px solid #fff;
    transform: rotate(60deg);
}

.howto-box:nth-child(even) .howto-box-head::after {
    left: max(calc(-17vw / 1366 * 100), -17px);
    transform: rotate(120deg);
}

.howto-box:last-child .howto-box-head::after {
    content: none;
}

.howto-box-txt {
    width: min(calc(700vw / 1366 * 100), 700px);
    margin-left: min(calc(30vw / 1366 * 100), 30px);
}

.howto-box:nth-child(even) .howto-box-txt {
    width: min(calc(600vw / 1366 * 100), 600px);
    margin-left: min(calc(30vw / 1366 * 100), 30px);
}

.howto-bg-img {
    position: absolute;
    top: min(calc(366vw / 1366 * 100), 366px);
    right: max(calc(-359vw / 1366 * 100), -359px);
    width: min(calc(271vw / 1366 * 100), 271px);
}

@media (max-width: 750px) {
    .howto {
        padding: calc(20vw / 750 * 100) 0 calc(285vw / 750 * 100);
        margin-top: calc(-1vw / 750 * 100);
    }

    .howto .inner {
        padding-top: calc(100vw / 750 * 100);
    }

    .howto-head {
        font-size: calc(48vw / 750 * 100);
        line-height: 1.4;
    }

    .howto-box-list {
        margin-top: calc(100vw / 750 * 100);
    }

    .howto-box {
        align-items: flex-start;
        height: calc(350vw / 750 * 100);
    }

    .howto-box+.howto-box {
        margin-top: calc(50vw / 750 * 100);
    }

    .howto-box-head {
        width: calc(200vw / 750 * 100);
        height: calc(200vw / 750 * 100);
        border: calc(1vw / 750 * 100) solid #fff;
        font-size: calc(28vw / 750 * 100);
    }

    .howto-box-head::after {
        bottom: calc(-200vw / 750 * 100);
        right: 0;
        left: 0;
        width: 0;
        height: calc(200vw / 750 * 100);
        margin: 0 auto;
        border-bottom: none;
        border-left: calc(1vw / 750 * 100) solid #fff;
        transform: none;
    }

    .howto-box:nth-child(even) .howto-box-head::after {
        left: 0;
        transform: none;
    }

    .howto-box-txt {
        width: calc(420vw / 750 * 100);
        margin-left: calc(30vw / 750 * 100);
        font-size: calc(30vw / 750 * 100);
        line-height: 1.4;
    }

    .howto-box:nth-child(even) .howto-box-txt {
        width: calc(420vw / 750 * 100);
        margin-left: calc(30vw / 750 * 100);
    }

    .howto-bg-img {
        display: none;
    }
}

/* about */
.about {
    padding-top: min(calc(170vw / 1366 * 100), 170px);
    background-image: url(../img/pc/about_bg.png);
    background-position: center min(calc(140vw / 1366 * 100), 140px);
    background-repeat: no-repeat;
}

.about-head {
    font-size: min(calc(33vw / 1366 * 100), 33px);
    margin-bottom: min(calc(30vw / 1366 * 100), 30px);
}

.about-main-txt {
    font-size: min(calc(27vw / 1366 * 100), 27px);
    margin-top: min(calc(20vw / 1366 * 100), 20px);
    line-height: 1.4;
}

.about-txt {
    font-size: min(calc(20vw / 1366 * 100), 20px);
    margin-top: min(calc(55vw / 1366 * 100), 55px);
}

.about-img-list-area {
    display: flex;
    margin-top: min(calc(95vw / 1366 * 100), 95px);
    overflow-x: hidden;
}

.about-img-list {
    display: flex;
    animation: slide-loop 25s infinite linear 0.5s both;
}

.about-img-item {
    width: min(calc(341vw / 1366 * 100), 341px);
}

@media (max-width: 1366px) {
    .about {
        background-size: contain;
    }
}

@media (max-width: 750px) {
    .about {
        padding-top: calc(50vw / 750 * 100);
        background-image: url(../img/sp/about_bg.png);
        background-position: center 0;
    }

    .about-head {
        font-size: calc(49vw / 750 * 100);
        margin-bottom: calc(60vw / 750 * 100);
    }

    .about-main-txt {
        font-size: calc(42vw / 750 * 100);
        margin-top: calc(30vw / 750 * 100);
    }

    .about-txt {
        font-size: calc(30vw / 750 * 100);
        margin-top: calc(85vw / 750 * 100);
        line-height: 2;
    }

    .about-img-list-area {
        margin-top: calc(95vw / 750 * 100);
    }

    .about-img-item {
        width: calc(330vw / 750 * 100);
    }
}

/* history */
.history {
    padding: min(calc(215vw / 1366 * 100), 215px) 0 min(calc(190vw / 1366 * 100), 190px);
}

.history-head {
    font-size: min(calc(32vw / 1366 * 100), 32px);
}

.history-img-box {
    width: 100%;
    padding: min(calc(30vw / 1366 * 100), 30px) calc((100% - min(calc(900vw / 1366 * 100), 900px))/2);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}

.history-img-box:active {
    cursor: grabbing;
}

.history-img-box::-webkit-scrollbar {
    display: none;
}

.history-img {
    display: none;
    width: min(calc(2736vw / 1366 * 100), 2736px);
}

@media (max-width: 750px) {
    .history {
        padding: calc(185vw / 750 * 100) 0 calc(115vw / 750 * 100);
    }

    .history-icon-swipe {
        width: calc(108vw / 750 * 100);
        margin: calc(-30vw / 750 * 100) 0 0 auto;
    }

    .history-head {
        font-size: calc(44vw / 750 * 100);
    }

    .history-img-box {
        padding: calc(25vw / 750 * 100) calc((100% - calc(660vw / 750 * 100))/2);
    }

    .history-img {
        width: calc(5240vw / 750 * 100);
    }
}

/* contact */
.contact {
    background-color: #B99659;
    padding: min(calc(85vw / 1366 * 100), 85px) 0;
    color: #fff;
}

.contact .common-head::before,
.contact .common-head::after {
    background-color: #fff;
}

.contact-txt {
    font-size: min(calc(18vw / 1366 * 100), 18px);
    margin-top: min(calc(30vw / 1366 * 100), 30px);
    text-align: center;
}

.contact-btn {
    position: relative;
    width: min(calc(280vw / 1366 * 100), 280px);
    height: min(calc(60vw / 1366 * 100), 60px);
    margin: min(calc(30vw / 1366 * 100), 30px) auto 0;
    border: min(calc(1vw / 1366 * 100), 1px) solid #fff;
    font-size: min(calc(16vw / 1366 * 100), 16px);
}

.contact-btn.btn-effects:hover {
    color: #B99659;
}

@media (max-width: 750px) {
    .contact {
        padding: calc(85vw / 750 * 100) 0;
    }

    .contact-txt {
        font-size: calc(32vw / 750 * 100);
        margin-top: calc(30vw / 750 * 100);
    }

    .contact-btn {
        width: calc(280vw / 750 * 100);
        height: calc(60vw / 750 * 100);
        margin: calc(30vw / 750 * 100) auto 0;
        border: calc(1vw / 750 * 100) solid #fff;
        font-size: calc(26vw / 750 * 100);
    }
}

/* footer */
.footer {
    background-image: url(../img/pc/mottled_bg.jpg);
    background-repeat: repeat;
    color: #fff;
}

.footer .inner {
    display: flex;
    justify-content: space-between;
    padding: min(calc(80vw / 1366 * 100), 80px) 0;
}

.footer-logo {
    width: min(calc(245vw / 1366 * 100), 245px);
}

.footer-link-area {
    display: flex;
    justify-content: space-between;
    width: min(calc(364vw / 1366 * 100), 364px);
    font-size: min(calc(16vw / 1366 * 100), 16px);
}

.footer-link-nav-item+.footer-link-nav-item {
    margin-top: min(calc(15vw / 1366 * 100), 15px);
}

.footer-link-external-item {
    width: min(calc(185vw / 1366 * 100), 185px);
    font-size: min(calc(14vw / 1366 * 100), 14px);
    border: min(calc(1vw / 1366 * 100), 1px) solid #fff;
    padding: min(calc(5vw / 1366 * 100), 5px) 0;
}

.footer-link-external-item+.footer-link-external-item {
    margin-top: min(calc(15vw / 1366 * 100), 15px);
}

.footer-link-external-ig {
    width: min(calc(20vw / 1366 * 100), 20px);
    margin: min(calc(15vw / 1366 * 100), 15px) 0 0 auto;
}

.footer-bottom {
    background-color: #070C22;
    text-align: center;
    padding: min(calc(20vw / 1366 * 100), 20px) 0;
}

@media (max-width: 750px) {
    .footer .inner {
        display: block;
        padding: calc(145vw / 750 * 100) 0;
    }

    .footer-logo {
        width: calc(400vw / 750 * 100);
        margin: 0 auto;
    }

    .footer-link-area {
        display: block;
        width: 100%;
        margin-top: calc(70vw / 750 * 100);
        font-size: calc(28vw / 750 * 100);
    }

    .footer-link-nav-item {
        text-align: center;
    }

    .footer-link-nav-item+.footer-link-nav-item {
        margin-top: calc(10vw / 750 * 100);
    }

    .footer-link-external-area {
        margin-top: calc(80vw / 750 * 100);
    }

    .footer-link-external-list {
        display: flex;
        justify-content: space-around;
    }

    .footer-link-external-item {
        width: calc(290vw / 750 * 100);
        font-size: calc(24vw / 750 * 100);
        border: calc(2vw / 750 * 100) solid #fff;
        padding: calc(5vw / 750 * 100) 0;
    }

    .footer-link-external-item+.footer-link-external-item {
        margin-top: 0;
    }

    .footer-link-external-ig {
        width: calc(40vw / 750 * 100);
        margin: calc(75vw / 750 * 100) auto 0;
    }

    .footer-bottom {
        padding: calc(30vw / 750 * 100) 0;
        font-size: calc(26vw / 750 * 100);
    }

    .footer-bottom-copyright {
        margin-top: calc(20vw / 750 * 100);
    }
}