@charset "UTF-8";

@font-face {
    font-family: "ASans";
    src: url("../../font/ASansreg.ttf");
}

/* @font-face {
    font-family: "Pragmatica";
    src: url("../../font/pragmatica.woff");
} */

.pc_only {
    display: none !important;
}

#light_outer {
    font-family: pragmatica, YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    color: #000;
    margin-bottom: calc(180 * (100vw / 750));
  }

#light_outer * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#light_outer a {
    display: inline-block;
}

#light_outer img {
    width: 100%;
    display: block;
}

#light_outer .pragmatica {
    font-family: pragmatica, sans-serif;
    font-weight: 400;
    font-style: normal;
}

#light_outer .gotham{
    font-family: "Gotham";
}

#light_outer .credit {
    font-family: "ASans";
    font-size: calc(26 * (100vw / 750));
    line-height: 1.9;
    text-align: left;
    margin-top: calc(28 * (100vw / 750));
    letter-spacing: 0.2em;
}

#light_outer .credit a {
    text-decoration: underline;
    /* padding-left: 0.4em; */
    padding-right: 0.3em;
    letter-spacing: 0;
}

/* #light_outer .fade_wrap {
    position: relative;
}

#light_outer .fade_wrap .fade {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    animation-name: fadeIn;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
} */

@-webkit-keyframes fadeIn {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

#light_outer .mv {
    width: 100%;
    margin: 0 auto calc(140 * (100vw / 750));
}

#light_outer .mv img{
    margin-bottom: calc(90 * (100vw / 750));
}

#light_outer .sec_01,
#light_outer .sec_02,
#light_outer .sec_03,
#light_outer .sec_04,
#light_outer .sec_05{
    margin-bottom: calc(155 * (100vw / 750));
}

#light_outer .sec_06{
    margin-bottom: calc(160 * (100vw / 750));
}

#light_outer .mv__caption{
    font-size: calc(28 * (100vw / 750));
    line-height: calc(56 * (100vw / 750));
    text-align: center;
    color: #000;
}

#light_outer .sec_01 .block_01{
    width: calc(675 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc(45 * (100vw / 750));
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

#light_outer .sec_01 .block_01 .img01{
    width: calc(525 * (100vw / 750));
}

#light_outer .sec_01 .block_01 .img02{
    position: relative;
    margin-bottom: calc(40 * (100vw / 750));
}

#light_outer .sec_01 .block_01 .img02 p{
    position: absolute;
    top: calc(50 * (100vw / 750));
    right: calc(-30 * (100vw / 750));
    font-size: calc(88 * (100vw / 750));
    font-weight: 500;
    letter-spacing: 0.04em;
    -webkit-writing-mode: tb-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: tb-rl;
            z-index: 10;
            letter-spacing: 0.2rem;
}

#light_outer .sec_01 .credit{
    width: calc(676 * (100vw / 750));
    margin: 0 auto;
}

#light_outer .sec_02 .block_02{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc(45 * (100vw / 750));
    display: flex;
    flex-direction: column-reverse;
}

#light_outer .sec_02 .block_02 .img02{
    position: relative;
    margin-left: auto;
    margin-bottom: calc(45 * (100vw / 750));
}

#light_outer .sec_02 .block_02 .img01 img{
    max-width: calc(675 * (100vw / 750));
}

#light_outer .sec_02 .block_02 .img02 img{
    max-width: calc(600 * (100vw / 750));
}

#light_outer .sec_02 .block_02 .img02 p{
    position: absolute;
    top: 0;
    left: calc(-120 * (100vw / 750));
    font-size: calc(88 * (100vw / 750));
    -webkit-writing-mode: tb-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: tb-rl;
            z-index: 10;
            letter-spacing: 0.2rem;
}

#light_outer .sec_02 .credit{
    width: calc(676 * (100vw / 750));
    margin: 0 auto;
}

#light_outer .sec_03 .block_03{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc(45 * (100vw / 750));
    display: flex;
    flex-direction: column-reverse;
}

#light_outer .sec_03 .block_03 .img02{
    position: relative;
    margin-left: auto;
    margin-bottom: calc(45 * (100vw / 750));
}

#light_outer .sec_03 .block_03 .img01{
    margin: 0 auto;
}

#light_outer .sec_03 .block_03 .img01 img{
    max-width: calc(640 * (100vw / 750));
}

#light_outer .sec_03 .block_03 .img02 img{
    max-width: calc(710 * (100vw / 750));
}

#light_outer .sec_03 .block_03 .img02 p{
    position: absolute;
    top: calc(50 * (100vw / 750));
    left: calc(-35 * (100vw / 750));
    font-size: calc(88 * (100vw / 750));
    -webkit-writing-mode: tb-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: tb-rl;
            z-index: 10;
            letter-spacing: 0.2rem;
}

#light_outer .sec_03 .credit{
    width: calc(676 * (100vw / 750));
    margin: 0 auto;
}

#light_outer .sec_04 .block_04{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc(45 * (100vw / 750));
    display: flex;
    flex-direction: column-reverse;
}

#light_outer .sec_04 .block_04 .img01{
    margin: 0 auto;
}

#light_outer .sec_04 .block_04 .img02{
    position: relative;
    margin: 0 auto;
    margin-bottom: calc(45 * (100vw / 750));
}

#light_outer .sec_04 .block_04 .img01 img{
    max-width: calc(675 * (100vw / 750));
}

#light_outer .sec_04 .block_04 .img02 img{
    max-width: calc(530 * (100vw / 750));
}

#light_outer .sec_04 .block_04 .img02 p{
    position: absolute;
    top: calc(-40 * (100vw / 750));
    right: calc(-40 * (100vw / 750));
    font-size: calc(88 * (100vw / 750));
    -webkit-writing-mode: tb-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: tb-rl;
            z-index: 10;
            letter-spacing: 0.2rem;
}

#light_outer .sec_04 .credit{
    width: calc(676 * (100vw / 750));
    margin: 0 auto;
}

#light_outer .sec_05 .block_05{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc(45 * (100vw / 750));
    display: flex;
    flex-direction: column;
}

#light_outer .sec_05 .block_05 .img01{
    margin-left: auto;
    margin-bottom: calc(45 * (100vw / 750));
}

#light_outer .sec_05 .block_05 .img02{
    position: relative;
    margin: 0 auto;
}

#light_outer .sec_05 .block_05 .img01 img{
    max-width: calc(675 * (100vw / 750));
}

#light_outer .sec_05 .block_05 .img02 img{
    max-width: calc(562 * (100vw / 750));
}

#light_outer .sec_05 .block_05 .img02 p{
    position: absolute;
    margin-bottom: calc(20 * (100vw / 750));
    top: -123%;
    left: calc(-74 * (100vw / 750));
    font-size: calc(88 * (100vw / 750));
    -webkit-writing-mode: tb-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: tb-rl;
            z-index: 10;
            letter-spacing: 0.2rem;
}

#light_outer .sec_05 .credit{
    width: calc(676 * (100vw / 750));
    margin: 0 auto;
}

#light_outer .sec_06 .block_06{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc(45 * (100vw / 750));
    display: flex;
    flex-direction: column-reverse;
}

#light_outer .sec_06 .block_06 .img01{
    margin-left: auto;
}

#light_outer .sec_06 .block_06 .img02{
    position: relative;
    margin-right: auto;
    margin-bottom: calc(45 * (100vw / 750));
}

#light_outer .sec_06 .block_06 .img01 img{
    max-width: calc(600 * (100vw / 750));
}

#light_outer .sec_06 .block_06 .img02 img{
    max-width: calc(675 * (100vw / 750));
}

#light_outer .sec_06 .block_06 .img02 p{
    position: absolute;
    top: calc(50 * (100vw / 750));
    right: calc(-55 * (100vw / 750));
    font-size: calc(88 * (100vw / 750));
    -webkit-writing-mode: tb-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: tb-rl;
            z-index: 10;
            letter-spacing: 0.2rem;
}

#light_outer .sec_06 .credit{
    width: calc(676 * (100vw / 750));
    margin: 0 auto;
}

#light_outer .section_credit{
    width: calc(676 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc(20 * (100vw / 750));
    font-size: calc(26 * (100vw / 750));
    line-height: calc(48 * (100vw / 750));
    text-align: left;
    color: #000000;
    letter-spacing: 0.025em;
}

#light_outer .section_credit span{
    display: block;
    padding-bottom: calc(25 * (100vw / 750));
    font-size: calc(30 * (100vw / 750));
    font-weight: 500;
}

#light_outer .check_btn-wrap .check_btn{
    display: block;
    width: calc(675 * (100vw / 750));
    margin: 0 auto;
    border: 1px solid #000000;
    padding: calc(45 * (100vw / 750)) 0;
    font-size: calc(28 * (100vw / 750));
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.06em;
    text-align: center;
}

#light_outer .gotham-ie {
    display: none;	
}