@charset "utf-8";

:root {
    --width: 100vw;
    --height: 100vh;
    --ratio: 1.242666666;
    --key-color: #7e6b5a;
}
@media only screen and (max-width: 769px) {
    :root {
        --width: 375;
    }
}


/*----------------------------------------------------------------
* reset
----------------------------------------------------------------*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;box-sizing:border-box;}ul,ol,li{list-style:none;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary{display:block;}


/*----------------------------------------------------------------
* setting
----------------------------------------------------------------*/
body {
    line-height: 1.5;
    color: #000;
    font-family: fot-cezanne-pron, sans-serif;
    font-size: calc(14 * var(--ratio));
    font-weight: 500;
    font-feature-settings: 'palt' 1;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background: #f1f1f1;
}
@media only screen and (max-width: 769px) {
    body {
        font-size: calc(14 / var(--width) * 100vw);
        background: #fff;
    }
}

h1, h2, h3, h4 {
    font-weight: 500;
}

a {
    color: #000;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
}
/*
@media only screen and (min-width: 770px) {
    a {
        transition: opacity .3s ease;
    }

    a:hover {
        opacity: .6;
    }
}
*/

.trigger {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    image-rendering: -webkit-optimize-contrast;
}

.cf::after {
    clear: both;
    content: '';
    display: block;
    height: 0;
}

@media only screen and (min-width: 770px) {
    .sp {
        display: none !important;
    }
}

@media only screen and (max-width: 769px) {
    .pc {
        display: none !important;
    }
}


/*----------------------------------------------------------------
* fade
----------------------------------------------------------------*/
.fadeIn {
    opacity: 0;
}

.fadeIn-black {
    position: relative;
}

.fadeIn-black::after {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
    mix-blend-mode: color;
    opacity: .72;
}

.fadeIn.show,
.show > .fadeIn {
    transition: .8s ease;
    transition-property: opacity;
    opacity: 1;
}

.fadeIn-black.show::after,
.show > .fadeIn-black::after{
    transition: .8s ease 1s;
    opacity: 0;
}


/*----------------------------------------------------------------
* typing
----------------------------------------------------------------*/
.typing span {
    opacity: 0;
}

.topMain.show .typing span,
.mainArea .ph li.show span,
.typing.show span {
    transition: opacity 0s linear .5s;
    opacity: 1;
}


/*----------------------------------------------------------------
* container
----------------------------------------------------------------*/
.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
@media only screen and (max-width: 769px) {
    .container {
        display: block;
    }
}


/* main
-------------------------------------*/
.container_main {
    width: 466px;
    min-height: var(--height);
    background: #fff;
    border: 1px solid var(--key-color);
    overflow: hidden;
    order: 2;
}
@media only screen and (max-width: 769px) {
    .container_main {
        width: auto;
        border: none;
    }
}


/* left & right
-------------------------------------*/
.container_left,
.container_right {
    position: sticky;
    flex: 1 0;
    height: var(--height);
    top: 0;
}


/* left
-------------------------------------*/
.container_left {
    font-family: forma-djr-deck, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .07em;
    order: 1;
}

.container_left .box {
    position: absolute;
    border-left: 13px solid var(--key-color);
    top: 34px;
    left: 32px;
    padding: 28px 0 27px 26px;
    transition: opacity .3s ease;
}
@media only screen and (max-width: 1080px) {
    .container_left .box {
        opacity: 0;
    }
}

.container_left .title {
    font-weight: 700;
    white-space: nowrap;
}

.container_left .vol {
    color: var(--key-color);
    margin-top: 23px;
}

.container_left .vol .new {
    display: block;
    line-height: 1;
    font-family: good-times, sans-serif;
    font-size: 15px;
    font-weight: 500;
    transform-origin: left top;
    transform: scaleX(.8);
    margin-bottom: 2px;
    animation: flash 1.5s linear infinite;
}

@keyframes flash {
    0%, 10%, 90%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.container_left .arrow {
    width: 70.5px;
    margin-top: 10px;
}


/* right
-------------------------------------*/
.container_right {
    order: 3;
}

.container_right .scroll {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    color: var(--key-color);
    top: 262px;
    left: 150px;
    transition: opacity .3s ease;
}
@media only screen and (max-width: 1080px) {
    .container_right .scroll {
        opacity: 0;
    }
}

.container_right .scroll .line {
    position: relative;
    width: 1px;
    height: 275px;
    background: var(--key-color);
    margin: 0 auto 20px;
}

.container_right .scroll .line .bar {
    position: absolute;
    width: 3.5px;
    height: 50px;
    background: var(--key-color);
    left: -1.5px;
}

.container_right .scroll p {
    font-family: good-times, sans-serif;
    font-size: 15px;
    letter-spacing: .13em;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform-origin: left top;
    transform: scaleY(.8);
}


/*----------------------------------------------------------------
* item
----------------------------------------------------------------*/
.item {
}

.item li {
    line-height: calc(21px * var(--ratio));
    font-family: good-times, sans-serif;
    font-size: calc(13px * var(--ratio));
    letter-spacing: .12em;
    transform-origin: left top;
    transform: scaleX(.8);
    white-space: nowrap;
}
@media only screen and (max-width: 769px) {
    .item li {
        line-height: calc(21 / var(--width) * 100vw);
        font-size: calc(13 / var(--width) * 100vw);
    }
}

.item li p {
    transform-origin: left top;
    transform: scaleX(.8);
}

.item li span {
    display: inline-block;
    margin: 0 .4em 0 .25em;
}

.item li a {
    text-decoration: underline;
}

.item li .coming {
    pointer-events: none;
    font-size: calc(11px * var(--ratio));
    text-decoration: none;
}
@media only screen and (max-width: 769px) {
    .item li .coming {
        font-size: calc(11 / var(--width) * 100vw);
    }
}


/*----------------------------------------------------------------
* topMain
----------------------------------------------------------------*/
.topMain {
    position: relative;
    line-height: calc(15px * var(--ratio));
    font-family: forma-djr-deck, sans-serif;
    text-align: center;
    padding: calc(27px * var(--ratio)) 0 0;
}
@media only screen and (max-width: 769px) {
    .topMain {
        line-height: calc(15 / var(--width) * 100vw);
        padding: calc(27 / var(--width) * 100vw) 0 0;
    }
}


/* title
-------------------------------------*/
.topMain .title {
    color: var(--key-color);
    font-size: calc(14px * var(--ratio));
    font-weight: 600;
    letter-spacing: .07em;
}
@media only screen and (max-width: 769px) {
    .topMain .title {
        font-size: calc(14 / var(--width) * 100vw);
    }
}

.topMain .title span {
    display: inline-block;
    width: calc(125px * var(--ratio));
    color: #fff;
    background: var(--key-color);
}
@media only screen and (max-width: 769px) {
    .topMain .title span {
        width: calc(125 / var(--width) * 100vw);
    }
}


/* subTitle
-------------------------------------*/
.topMain .subTitle {
    color: var(--key-color);
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: -.04em;
    margin-top: calc(4px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topMain .subTitle {
        font-size: calc(10 / var(--width) * 100vw);
        margin-top: calc(4 / var(--width) * 100vw);
    }
}

.topMain .subTitle span {
    display: inline-block;
    margin-left: calc(6px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topMain .subTitle span {
        margin-left: calc(6 / var(--width) * 100vw);
    }
}


/* vol
-------------------------------------*/
.topMain .vol {
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: -.04em;
    margin-top: calc(23px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topMain .vol {
        font-size: calc(10 / var(--width) * 100vw);
        margin-top: calc(23 / var(--width) * 100vw);
    }
}


/* volTitle
-------------------------------------*/
.topMain .volTitle {
    font-size: calc(28px * var(--ratio));
    letter-spacing: .07em;
    margin-top: calc(11px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topMain .volTitle {
        font-size: calc(28 / var(--width) * 100vw);
        margin-top: calc(11 / var(--width) * 100vw);
    }
}


/* links
-------------------------------------*/
.topMain .links {
    margin-top: calc(28px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topMain .links {
        margin-top: calc(28 / var(--width) * 100vw);
    }
}

.topMain .links a {
    display: block;
    position: relative;
    height: calc(337px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topMain .links a {
        height: calc(337 / var(--width) * 100vw);
    }
}


/* category */
.topMain .links .category {
    position: absolute;
    width: calc(350px * var(--ratio));
    color: #fff;
    bottom: calc(19px * var(--ratio));
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .topMain .links .category {
        width: calc(350 / var(--width) * 100vw);
        bottom: calc(19 / var(--width) * 100vw);
    }
}

.topMain .links .category .name {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: calc(20px * var(--ratio));
    font-weight: 700;
    vertical-align: bottom;
}
@media only screen and (max-width: 769px) {
    .topMain .links .category .name {
        font-size: calc(20 / var(--width) * 100vw);
    }
}

.topMain .links .category .name span:first-of-type,
.topMain .links .category .name span:last-of-type {
    margin-top: calc(-3px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topMain .links .category .name span:first-of-type,
    .topMain .links .category .name span:last-of-type {
        margin-top: calc(-3 / var(--width) * 100vw);
    }
}

.topMain .links .category .enter {
    display: inline-block;
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: .13em;
    background: url(../img/vol06/top_enter_icon.png) left center / calc(15.5px * var(--ratio)) auto no-repeat;
    margin-top: calc(4px * var(--ratio));
    padding-left: calc(21.5px * var(--ratio));
    animation: flash 1.5s linear infinite;
}
@media only screen and (max-width: 769px) {
    .topMain .links .category .enter {
        font-size: calc(10 / var(--width) * 100vw);
        background: url(../img/vol06/top_enter_icon.png) left center / calc(15.5 / var(--width) * 100vw) auto no-repeat;
        margin-top: calc(4 / var(--width) * 100vw);
        padding-left: calc(21.5 / var(--width) * 100vw);
    }
}

@keyframes enter {
    0%, 20%, 80%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}


/* ph */
.topMain .links .ph,
.topMain .links .ph img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.topMain .links .ph {
    overflow: hidden;
}

.topMain .links .ph img {
    object-fit: cover;
}
@media only screen and (min-width: 770px) {
    .topMain .links a img {
        transition: transform .5s ease;
        transform: scale3d(1, 1, 1);
    }

    .topMain .links a:hover img {
        transform: scale3d(1.05, 1.05, 1);
    }
}


/* newPost */
.topMain .newPost {
    font-family: good-times, sans-serif;
    font-size: calc(15px * var(--ratio));
    text-align: right;
    letter-spacing: .13em;
    margin: calc(10px * var(--ratio)) calc(10px * var(--ratio)) 0 0;
    transform-origin: right top;
    transform: scaleX(.8);
}
@media only screen and (max-width: 769px) {
    .topMain .newPost {
        font-size: calc(15 / var(--width) * 100vw);
        margin: calc(10 / var(--width) * 100vw) calc(10 / var(--width) * 100vw) 0 0;
    }
}


/* first
-------------------------------------*/
.topMain .first {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 0;
    left: 0;
    z-index: 10;
}

.topMain .first::before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--key-color);
    top: 0;
    left: 0;
    z-index: -1;
}

.topMain .first p {
    font-size: calc(24px * var(--ratio));
    letter-spacing: .07em;
    margin-bottom: calc(26px * var(--ratio));;
}
@media only screen and (max-width: 769px) {
    .topMain .first p {
        font-size: calc(24 / var(--width) * 100vw);
        margin-bottom: calc(26 / var(--width) * 100vw);;
    }
}


/* animation
-------------------------------------*/
.topMain .first p {
    opacity: 0;
}

.topMain.show .first p {
    transition: opacity .5s ease, visibility 0s cubic-bezier(0.19, 1, 0.22, 1) 1.8s;
    opacity: 1;
    visibility: hidden;
}

.topMain.show .first {
    transition: visibility 0s cubic-bezier(0.19, 1, 0.22, 1) 2.2s;
    visibility: hidden;
}

.topMain.show .first::before {
    transition: height .5s 1.7s, transform 1s 0.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    height: 0;
}


/*----------------------------------------------------------------
* topBack
----------------------------------------------------------------*/
.topBack {
    position: relative;
    font-family: forma-djr-deck, sans-serif;
    margin-top: calc(74px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topBack {
        margin-top: calc(74 / var(--width) * 100vw);
    }
}


/* title
-------------------------------------*/
.topBack .title {
    width: calc(350px * var(--ratio));
    font-family: good-times, sans-serif;
    font-size: calc(15px * var(--ratio));
    border-top: 1px solid #000;
    margin: 0 auto;
    padding: calc(6px * var(--ratio)) 0 0 calc(9px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topBack .title {
        width: calc(350 / var(--width) * 100vw);
        font-size: calc(15 / var(--width) * 100vw);
        padding: calc(6 / var(--width) * 100vw) 0 0 calc(9 / var(--width) * 100vw);
    }
}

.topBack .title span {
    display: inline-block;
    letter-spacing: .13em;
    transform-origin: left top;
    transform: scaleX(.8);
}


/* links
-------------------------------------*/
.topBack .links {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(331px * var(--ratio));
    line-height: calc(15px * var(--ratio));
    margin: calc(79px * var(--ratio)) auto 0;
}
@media only screen and (max-width: 769px) {
    .topBack .links {
        width: calc(331 / var(--width) * 100vw);
        line-height: calc(15 / var(--width) * 100vw);
        margin-top: calc(79 / var(--width) * 100vw);
    }
}

.topBack .links:nth-of-type(n+2) {
    margin: calc(40px * var(--ratio)) auto 0;
}
@media only screen and (max-width: 769px) {
    .topBack .links:nth-of-type(n+2) {
        margin: calc(32px * var(--ratio)) auto 0;
    }
}

.topBack .links li {
    width: 50%;
}

.topBack .links li.wide {
    width: 1000%;
}

.topBack .links a {
    display: block;
    position: relative;
    height: calc(297px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topBack .links a {
        height: calc(297 / var(--width) * 100vw);
    }
}


/* category */
.topBack .links .category {
    position: absolute;
    width: calc(145.5px * var(--ratio));
    color: #fff;
    text-align: center;
    bottom: calc(11px * var(--ratio));
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .topBack .links .category {
        width: calc(145.5 / var(--width) * 100vw);
        bottom: calc(11 / var(--width) * 100vw);
    }
}

.topBack .links .wide .category {
    width: calc(262px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topBack .links .wide .category {
        width: calc(310 / var(--width) * 100vw);
    }
}

.topBack .links .category .name {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: calc(17px * var(--ratio));
    font-weight: 700;
    vertical-align: bottom;
}
@media only screen and (max-width: 769px) {
    .topBack .links .category .name {
        font-size: calc(17 / var(--width) * 100vw);
    }
}

.topBack .links .category .name span:first-of-type,
.topBack .links .category .name span:last-of-type {
    margin-top: calc(-3px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topBack .links .category .name span:first-of-type,
    .topBack .links .category .name span:last-of-type {
        margin-top: calc(-3 / var(--width) * 100vw);
    }
}

.topBack .links .category .enter {
    display: inline-block;
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: .13em;
    background: url(../img/vol06/top_enter_icon.png) left center / calc(15.5px * var(--ratio)) auto no-repeat;
    margin-top: calc(3px * var(--ratio));
    padding-left: calc(21.5px * var(--ratio));
    animation: flash 1.5s linear infinite;
}
@media only screen and (max-width: 769px) {
    .topBack .links .category .enter {
        font-size: calc(10 / var(--width) * 100vw);
        background: url(../img/vol06/top_enter_icon.png) left center / calc(15.5 / var(--width) * 100vw) auto no-repeat;
        margin-top: calc(3 / var(--width) * 100vw);
        padding-left: calc(21.5 / var(--width) * 100vw);
    }
}


/* ph */
.topBack .links .ph,
.topBack .links .ph img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.topBack .links .ph {
    overflow: hidden;
}

.topBack .links .ph img {
    object-fit: cover;
}
@media only screen and (min-width: 770px) {
    .topBack .links a img {
        transition: transform .5s ease;
        transform: scale3d(1, 1, 1);
    }

    .topBack .links a:hover img {
        transform: scale3d(1.05, 1.05, 1);
    }
}


/* linkIndex
-------------------------------------*/
.topBack .linkIndex {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(331px * var(--ratio));
    height: calc(46.5px * var(--ratio));
    color: #315b4a;
    font-size: calc(14px * var(--ratio));
    font-weight: 700;
    letter-spacing: .07em;
    background: #f1f1f1;
    margin: 0 auto;
}
@media only screen and (max-width: 769px) {
    .topBack .linkIndex {
        width: calc(331 / var(--width) * 100vw);
        height: calc(46.5 / var(--width) * 100vw);
        font-size: calc(14 / var(--width) * 100vw);
    }
}

.topBack .vol1 + .linkIndex { color: #315b4a; }
.topBack .vol2 + .linkIndex { color: #02869b; }
.topBack .vol3 + .linkIndex { color: #0071ce; }
.topBack .vol4 + .linkIndex { color: #1d2088; }
.topBack .vol5 + .linkIndex { color: #818181; }


/*----------------------------------------------------------------
* mainArea
----------------------------------------------------------------*/
.mainArea {
    position: relative;
}


/* subTitle
-------------------------------------*/
.mainArea .subTitle {
    width: calc(164px * var(--ratio));
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: .13em;
    margin-left: calc(10px * var(--ratio));
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .mainArea .subTitle {
        width: calc(164 / var(--width) * 100vw);
        font-size: calc(10 / var(--width) * 100vw);
        margin-left: calc(10 / var(--width) * 100vw);
    }
}

.mainArea .subTitle p {
    display: inline-block;
}

.mainArea .subTitle p.move {
    animation: subtitle 3s linear infinite;
    transform-origin: left top;
}

@keyframes subtitle {
    0% {
        transform: translateX(0%) scaleX(.8);
    }
    100% {
        transform: translateX(-39%) scaleX(.8);
    }
}

.mainArea .subTitle span {
    display: inline-block;
    margin-right: calc(9px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .mainArea .subTitle span {
        margin-right: calc(9 / var(--width) * 100vw);
    }
}


/* ph
-------------------------------------*/
.mainArea .ph {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.mainArea .ph::before {
    content: '';
    display: block;
    padding-top: 129.333333%;
}

.mainArea .ph li {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: opacity .3s ease-in;
    opacity: 0;
}

.mainArea .ph li.show {
    transition: opacity .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    z-index: 1;
}

.mainArea .ph li img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top;
    transform: scale(1.05);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.mainArea .ph li.show img {
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.mainArea .ph img {
    width: 100%;
}

.mainArea .ph .txt {
    position: absolute;
    color: #fff;
    line-height: 1.230769;
    font-size: calc(26px * var(--ratio));
    font-family: good-times, sans-serif;
    text-align: center;
    letter-spacing: .07em;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: calc(1px * var(--ratio));
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .mainArea .ph .txt {
        font-size: calc(26 / var(--width) * 100vw);
        margin-top: calc(1 / var(--width) * 100vw);
    }
}

.mainArea .ph .ph3 .txt.t1 {
    top: 25%;
}
.mainArea .ph .ph3 .txt.t2 {
    top: 75%;
}


/* lead
-------------------------------------*/
.mainArea .lead {
    width: calc(280px * var(--ratio));
    line-height: calc(20px * var(--ratio));
    font-size: calc(12px * var(--ratio));
    letter-spacing: .10em;
    margin: calc(43px * var(--ratio)) calc(16px * var(--ratio)) 0 auto;
    padding-bottom: calc(79px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .mainArea .lead {
        width: calc(280 / var(--width) * 100vw);
        line-height: calc(20 / var(--width) * 100vw);
        font-size: calc(12 / var(--width) * 100vw);
        margin: calc(40 / var(--width) * 100vw) calc(16 / var(--width) * 100vw) 0 auto;
        padding-bottom: calc(81 / var(--width) * 100vw);
    }
}


/* no
-------------------------------------*/
.mainArea .no {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    color: #fff;
    line-height: 1;
    font-family: forma-djr-deck, sans-serif;
    font-size: calc(38.5px * var(--ratio));
    top: calc(428px * var(--ratio));
    left: calc(25px * var(--ratio));
    z-index: 10;
}
@media only screen and (max-width: 769px) {
    .mainArea .no {
        font-size: calc(38.5 / var(--width) * 100vw);
        top: calc(428 / var(--width) * 100vw);
        left: calc(25 / var(--width) * 100vw);
    }
}

.mainArea .no .line {
    position: relative;
    display: block;
    width: 1px;
    height: calc(187px * var(--ratio));
    margin-top: calc(42px * var(--ratio));
    margin-left: calc(-4px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .mainArea .no .line {
        height: calc(187 / var(--width) * 100vw);
        margin-top: calc(42 / var(--width) * 100vw);
        margin-left: calc(-4 / var(--width) * 100vw);
    }
}

.mainArea .no .line::before {
    content: '';
    position: absolute;
    width: 1px;
    background: var(--key-color);
    animation: line 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}

@keyframes line {
    0% {
        top: 0;
        bottom: 100%;
    }
    50% {
        top: 0;
        bottom: 0;
    }
    100% {
        top: 100%;
        bottom: 0;
    }
}


/* anim
-------------------------------------*/
.mainArea .no,
.mainArea .lead,
.mainArea .subTitle {
    opacity: 0;
}

.mainArea.show .no,
.mainArea.show .lead,
.mainArea.show .subTitle {
    transition: opacity .5s cubic-bezier(0.5, 0, 0.75, 0);
    opacity: 1;
}


/*----------------------------------------------------------------
* sample
----------------------------------------------------------------*/
.sample {
    position: relative;
}

.sample img {
    display: block;
}


/* lead
-------------------------------------*/
.sample .lead {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    color: var(--key-color);
    font-size: calc(14px * var(--ratio));
    font-feature-settings: normal;
    letter-spacing: .12em;
    white-space: nowrap;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
/*    text-orientation: upright;*/
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .sample .lead {
        font-size: calc(14 / var(--width) * 100vw);
    }
}

.sample .lead span {
    position: relative;
    display: block;
    padding-right: calc(6px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample .lead span {
        padding-right: calc(6 / var(--width) * 100vw);
    }
}

.sample .lead span:nth-of-type(n+2) {
    margin-right: calc(7px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample .lead span:nth-of-type(n+2) {
        margin-right: calc(7 / var(--width) * 100vw);
    }
}

.sample .lead span::before {
    position: absolute;
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: var(--key-color);
    top: 0;
    right: 0;
}


/* slider
-------------------------------------*/
.sample .slider {
    position: relative;
}

.sample .slick-dots {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    bottom: calc(-15px * var(--ratio));
    left: 0;
}
@media only screen and (max-width: 769px) {
    .sample .slick-dots {
        bottom: calc(-15 / var(--width) * 100vw);
    }
}

.sample .slick-dots button {
    width: calc(8.5px * var(--ratio));
    height: calc(8.5px * var(--ratio));
    font-size: 0;
    text-indent: -9999px;
    background: #e0e0e0;
    border: none;
    margin-right: calc(4px * var(--ratio));
    padding: 0;
}
@media only screen and (max-width: 769px) {
    .sample .slick-dots button {
        width: calc(8.5 / var(--width) * 100vw);
        height: calc(8.5 / var(--width) * 100vw);
        margin-right: calc(4 / var(--width) * 100vw);
    }
}

.sample .slick-dots .slick-active button {
    background: var(--key-color);
}


/*----------------------------------------------------------------
* sample1
----------------------------------------------------------------*/
.sample1 {
    padding-top: calc(60px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample1 {
        padding-top: calc(60 / var(--width) * 100vw);
    }
}

.sample1 .ph1 {
    width: calc(340px * var(--ratio));
    margin: 0 auto
}
@media only screen and (max-width: 769px) {
    .sample1 .ph1 {
        width: calc(340 / var(--width) * 100vw);
    }
}

.sample1 .ph2 {
    position: relative;
    margin-top: calc(33px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample1 .ph2 {
        margin-top: calc(33 / var(--width) * 100vw);
    }
}

.sample1 .ph2 img {
    width: calc(136.5px * var(--ratio));
    margin: 0 calc(40px * var(--ratio)) 0 auto;
}
@media only screen and (max-width: 769px) {
    .sample1 .ph2 img {
        width: calc(136.5 / var(--width) * 100vw);
        margin: 0 calc(40 / var(--width) * 100vw) 0 auto;
    }
}

.sample1 .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(17px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample1 .wrap {
        margin-top: calc(17 / var(--width) * 100vw);
    }
}

.sample1 .ph3 {
    width: calc(168px * var(--ratio));
    margin: 0 auto
}
@media only screen and (max-width: 769px) {
    .sample1 .ph3 {
        width: calc(168 / var(--width) * 100vw);
    }
}

.sample1 .lead {
    top: 0;
    left: calc(59px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample1 .lead {
        top: 0;
        left: calc(59 / var(--width) * 100vw);
    }
}

.sample1 .item {
    flex: 1 0;
    margin-left: calc(22px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample1 .item {
        margin-left: calc(22 / var(--width) * 100vw);
    }
}


/*----------------------------------------------------------------
* sample2
----------------------------------------------------------------*/
.sample2 {
    margin-top: calc(80px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample2 {
        margin-top: calc(80 / var(--width) * 100vw);
    }
}

.sample2 .ph1 {
    width: calc(250px * var(--ratio));
    margin: 0 auto;
}
@media only screen and (max-width: 769px) {
    .sample2 .ph1 {
        width: calc(250 / var(--width) * 100vw);
    }
}

.sample2 .ph2 {
    position: relative;
    width: calc(248.5px * var(--ratio));
    margin: calc(66px * var(--ratio)) 0 0 auto;
}
@media only screen and (max-width: 769px) {
    .sample2 .ph2 {
        width: calc(248.5 / var(--width) * 100vw);
        margin: calc(66 / var(--width) * 100vw) 0 0 auto;
    }
}

.sample2 .lead {
    top: 0;
    left: calc(-78px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample2 .lead {
        left: calc(-78 / var(--width) * 100vw);
    }
}

.sample2 .item {
    margin-top: calc(30px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample2 .item {
        margin-top: calc(30 / var(--width) * 100vw);
    }
}


/*----------------------------------------------------------------
* sample3
----------------------------------------------------------------*/
.sample3 {
    margin-top: calc(53px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample3 {
        margin-top: calc(53 / var(--width) * 100vw);
    }
}

.sample3 .ph1 {
    position: relative;
}

.sample3 .wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(41px * var(--ratio));
    z-index: 2;
}
@media only screen and (max-width: 769px) {
    .sample3 .wrap {
        margin-top: calc(41 / var(--width) * 100vw);
    }
}

.sample3 .ph2 {
    width: calc(300px * var(--ratio));
    margin: calc(53px * var(--ratio)) 0 0 auto;
}
@media only screen and (max-width: 769px) {
    .sample3 .ph2 {
        width: calc(300 / var(--width) * 100vw);
        margin-top: calc(53 / var(--width) * 100vw);
    }
}

.sample3 .lead {
    top: calc(50px * var(--ratio));
    left: calc(33px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample3 .lead {
        top: calc(50 / var(--width) * 100vw);
        left: calc(33 / var(--width) * 100vw);
    }
}

.sample3 .lead span:nth-child(2) {
    margin-top: calc(110px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample3 .lead span:nth-child(2) {
        margin-top: calc(110 / var(--width) * 100vw);
    }
}

.sample3 .item {
    margin: calc(-42px * var(--ratio)) 0 0 calc(-44px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample3 .item {
        margin: calc(-42 / var(--width) * 100vw) 0 0 calc(-44 / var(--width) * 100vw);
    }
}


/*----------------------------------------------------------------
* sample4
----------------------------------------------------------------*/
.sample4 {
    margin-top: calc(74px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample4 {
        margin-top: calc(74 / var(--width) * 100vw);
    }
}

.sample4 .ph1 {
    position: relative;
    z-index: 1;
}

.sample4 .ph1 img {
    width: calc(303px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample4 .ph1 img {
        width: calc(303 / var(--width) * 100vw);
    }
}

.sample4 .ph2 {
    position: relative;
    width: calc(238.5px * var(--ratio));
    margin: calc(47px * var(--ratio)) 0 0 auto;
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .sample4 .ph2 {
        width: calc(238.5 / var(--width) * 100vw);
        margin: calc(45 / var(--width) * 100vw) 0 0 auto;
    }
}

.sample4 .ph2_2 {
    transition-delay: .5s
}

.sample4 .ph2_2::after {
    transition-delay: 1.5s
}

.sample4 .lead {
    top: calc(1px * var(--ratio));
    right: calc(22px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample4 .lead {
        top: calc(1 / var(--width) * 100vw);
        right: calc(22 / var(--width) * 100vw);
    }
}

.sample4 .lead2 {
    position: absolute;
    line-height: calc(17px * var(--ratio));
    font-family: forma-djr-deck, sans-serif;
    font-size: calc(10px * var(--ratio));
    font-weight: 600;
    letter-spacing: .08em;
    white-space: nowrap;
    bottom: calc(-6px * var(--ratio));
    left: calc(60px * var(--ratio));
    transform: rotate(90deg);
    transform-origin: left;
    z-index: -1;
}
@media only screen and (max-width: 769px) {
    .sample4 .lead2 {
        line-height: calc(17 / var(--width) * 100vw);
        font-size: calc(10 / var(--width) * 100vw);
        bottom: calc(-6 / var(--width) * 100vw);
        left: calc(60 / var(--width) * 100vw);
    }
}

.sample4 .lead2 span {
    display: inline-block;
    margin: 0 .35em;
}

.sample4 .item {
    margin-top: calc(29px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample4 .item {
        margin-top: calc(29 / var(--width) * 100vw);
    }
}


/*----------------------------------------------------------------
* sample5
----------------------------------------------------------------*/
.sample5 {
    margin-top: calc(75px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample5 {
        margin-top: calc(75 / var(--width) * 100vw);
    }
}

.sample5 .ph1 {
    width: calc(308px * var(--ratio));
    margin: 0 auto;
}
@media only screen and (max-width: 769px) {
    .sample5 .ph1 {
        width: calc(308 / var(--width) * 100vw);
    }
}

.sample5 .ph2 {
    position: relative;
    margin-top: calc(45px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample5 .ph2 {
        margin-top: calc(45 / var(--width) * 100vw);
    }
}

.sample5 .ph2 img {
    width: calc(243px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample5 .ph2 img {
        width: calc(243 / var(--width) * 100vw);
    }
}

.sample5 .lead {
    top: calc(42px * var(--ratio));
    right: calc(33px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample5 .lead {
        top: calc(42 / var(--width) * 100vw);
        right: calc(33 / var(--width) * 100vw);
    }
}

.sample5 .lead span:nth-child(2) {
    margin-top: calc(102px * var(--ratio));
    margin-right: calc(17px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample5 .lead span:nth-child(2) {
        margin-top: calc(102 / var(--width) * 100vw);
        margin-right: calc(17 / var(--width) * 100vw);
    }
}

.sample5 .item {
    margin: calc(32px * var(--ratio)) 0 0 calc(26px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample5 .item {
        margin: calc(32 / var(--width) * 100vw) 0 0 calc(26 / var(--width) * 100vw);
    }
}


/*----------------------------------------------------------------
* sample6
----------------------------------------------------------------*/
.sample6 {
    margin-top: calc(76px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample6 {
        margin-top: calc(76 / var(--width) * 100vw);
    }
}

.sample6 .ph1 {
    width: calc(308px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample6 .ph1 {
        width: calc(308 / var(--width) * 100vw);
    }
}

.sample6 .ph2 {
    position: relative;
}

.sample6 .ph2 img {
    width: calc(182px * var(--ratio));
    margin: calc(40px * var(--ratio)) calc(24px * var(--ratio)) 0 auto;
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .sample6 .ph2 img {
        width: calc(182 / var(--width) * 100vw);
        margin: calc(40 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 auto;
    }
}

.sample6 .lead {
    top: calc(40px * var(--ratio));
    left: calc(43px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample6 .lead {
        top: calc(40 / var(--width) * 100vw);
        left: calc(43 / var(--width) * 100vw);
    }
}

.sample6 .lead span:nth-child(2) {
    margin-right: calc(15px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample6 .lead:nth-child(2) {
        margin-right: calc(15 / var(--width) * 100vw);
    }
}

.sample6 .item {
    margin-top: calc(40px * var(--ratio));
    margin-left: calc(32px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample6 .item {
        margin-top: calc(40 / var(--width) * 100vw);
        margin-left: calc(32 / var(--width) * 100vw);
    }
}


/*----------------------------------------------------------------
* sample7
----------------------------------------------------------------*/
.sample7 {
    margin-top: calc(77px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample7 {
        margin-top: calc(77 / var(--width) * 100vw);
    }
}

.sample7 .ph2 {
    position: relative;
    margin-top: calc(66px * var(--ratio));
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .sample7 .ph2 {
        margin-top: calc(66 / var(--width) * 100vw);
    }
}

.sample7 .ph2 img {
    width: calc(221px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample7 .ph2 img {
        width: calc(221 / var(--width) * 100vw);
    }
}

.sample7 .ph3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(54px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample7 .ph3 {
        margin-top: calc(52 / var(--width) * 100vw);
    }
}

.sample7 .ph3 img {
    width: calc(146px * var(--ratio));
    margin-right: calc(16px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample7 .ph3 img {
        width: calc(146 / var(--width) * 100vw);
        margin-right: calc(17 / var(--width) * 100vw);
    }
}

.sample7 .lead {
    top: calc(11px * var(--ratio));
    right: calc(44px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample7 .lead {
        top: calc(11 / var(--width) * 100vw);
        right: calc(44 / var(--width) * 100vw);
    }
}

.sample7 .lead span:nth-of-type(2) {
    margin-top: calc(79px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample7 .lead span:nth-of-type(2) {
        margin-top: calc(79 / var(--width) * 100vw);
    }
}

.sample7 .item {
    width: calc(241.5px * var(--ratio));
    margin-left: calc(28px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample7 .item {
        width: calc(241.5 / var(--width) * 100vw);
        margin-left: calc(28 / var(--width) * 100vw);
    }
}


/*----------------------------------------------------------------
* footer
----------------------------------------------------------------*/
.footer {
    position: relative;
    color: var(--key-color);
    font-family: forma-djr-deck, sans-serif;
    text-align: center;
    background: #f1f1f1;
    margin-top: calc(58px * var(--ratio));
    padding: calc(56px * var(--ratio)) 0 calc(27px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer {
        margin-top: calc(58 / var(--width) * 100vw);
        padding: calc(56 / var(--width) * 100vw) 0 calc(27 / var(--width) * 100vw);
    }
}


/* next
-------------------------------------*/
.footer .next {
    position: absolute;
    display: block;
    width: calc(86.5px * var(--ratio));
    height: calc(86.5px * var(--ratio));
    color: #fff;
    text-align: center;
    background: var(--key-color);
    top: calc(-71px * var(--ratio));
    left: calc(18px * var(--ratio));
    padding-top: calc(13px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .next {
        width: calc(86.5 / var(--width) * 100vw);
        height: calc(86.5 / var(--width) * 100vw);
        top: calc(-71 / var(--width) * 100vw);
        left: calc(18 / var(--width) * 100vw);
        padding-top: calc(13 / var(--width) * 100vw);
    }
}

.footer .next span {
    display: inline-block;
    width: 100%;
    line-height: 1;
    font-family: good-times, sans-serif;
    font-size: calc(12px * var(--ratio));
    letter-spacing: .07em;
    transform: scaleX(.8);
}
@media only screen and (max-width: 769px) {
    .footer .next span {
        font-size: calc(12 / var(--width) * 100vw);
    }
}

.footer .next span .for {
    display: block;
    font-size: calc(10px * var(--ratio));
    margin-bottom: calc(5px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .next span .for {
        font-size: calc(10 / var(--width) * 100vw);
        margin-bottom: calc(5 / var(--width) * 100vw);
    }
}

.footer .next img {
    width: calc(22.5px * var(--ratio));
    margin-top: calc(2px * var(--ratio));
/*    animation: enter 1s steps(1, start) infinite;*/
    animation: flash 1.5s linear infinite;
}
@media only screen and (max-width: 769px) {
    .footer .next img {
        width: calc(22.5 / var(--width) * 100vw);
        margin-top: calc(2 / var(--width) * 100vw);
    }
}


/* brand
-------------------------------------*/
.footer .brand {
    font-size: calc(14px * var(--ratio));
    letter-spacing: .07em;
}
@media only screen and (max-width: 769px) {
    .footer .brand {
        font-size: calc(14 / var(--width) * 100vw);
    }
}

.footer .brand span {
    position: relative;
    line-height: calc(14px * var(--ratio));
    display: inline-block;
    color: #fff;
    margin-left: calc(1px * var(--ratio));
    padding: 0 calc(3px * var(--ratio));
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .footer .brand span {
        line-height: calc(14 / var(--width) * 100vw);
        margin-left: calc(1 / var(--width) * 100vw);
        padding: 0 calc(3 / var(--width) * 100vw);
    }
}

.footer .brand span::before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    background: var(--key-color);
    top: -1px;
    bottom: -.2px;
    left: 0;
    z-index: -1;
}
@media only screen and (max-width: 769px) {
    .footer .brand span::before {
        top: calc(-2 / var(--width) * 100vw);
        bottom: calc(-.2 / var(--width) * 100vw);
    }
}


/* brandLink
-------------------------------------*/
.footer .brandLink {
    display: inline-block;
    line-height: 1;
    font-size: calc(28px * var(--ratio));
    font-weight: 600;
    letter-spacing: .14em;
    border-bottom: calc(2px * var(--ratio)) solid #fff;
    margin-top: calc(22px * var(--ratio));
    padding: 0 calc(4px * var(--ratio)) calc(1px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .brandLink {
        font-size: calc(28 / var(--width) * 100vw);
        border-bottom: calc(2 / var(--width) * 100vw) solid #fff;
        margin-top: calc(22 / var(--width) * 100vw);
        padding: 0 calc(4 / var(--width) * 100vw) calc(1 / var(--width) * 100vw);
    }
}


/* topLink
-------------------------------------*/
.footer .topLink {
    position: relative;
    display: inline-block;
    color: var(--key-color);
    line-height: 1;
    font-size: calc(51px * var(--ratio));
    font-weight: 400;
    letter-spacing: .04em;
    margin-top: calc(18px * var(--ratio));
    padding: 0 calc(2px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .topLink {
        font-size: calc(51 / var(--width) * 100vw);
        margin-top: calc(18 / var(--width) * 100vw);
        padding: 0 calc(2 / var(--width) * 100vw);
    }
}

.footer .topLink::after {
    position: absolute;
    content: '';
    display: block;
    height: calc(2px * var(--ratio));
    background: var(--key-color);
    left: 0;
    bottom: calc(2px * var(--ratio));
    animation: toplink_line 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@media only screen and (max-width: 769px) {
    .footer .topLink::after {
        height: calc(2 / var(--width) * 100vw);
        bottom: calc(2 / var(--width) * 100vw);
    }
}

@keyframes toplink_line {
    0% {
        left: 0;
        right: 100%;
    }
    50% {
        left: 0;
        right: 0;
    }
    100% {
        left: 100%;
        right: 0;
    }
}


/* sns
-------------------------------------*/
.footer .sns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(60px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .sns {
        margin-top: calc(60 / var(--width) * 100vw);
    }
}

.footer .sns li {
    margin: 0 calc(25px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .sns li {
        margin: 0 calc(25 / var(--width) * 100vw);
    }
}

.footer .sns .twitter {
    width: calc(24.5px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .sns .twitter {
        width: calc(24.5 / var(--width) * 100vw);
    }
}

.footer .sns .insta {
    width: calc(24.5px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .sns .insta {
        width: calc(24.5 / var(--width) * 100vw);
    }
}

.footer .sns .line {
    width: calc(23px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .sns .line {
        width: calc(23 / var(--width) * 100vw);
    }
}


/* credit
-------------------------------------*/
.footer .credit {
    line-height: 2.5;
    font-size: calc(10px * var(--ratio));
    font-family: good-times, sans-serif;
    font-weight: 400;
    letter-spacing: .07em;
    transform: scaleX(.8);
    margin-top: calc(58px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .credit {
        font-size: calc(10 / var(--width) * 100vw);
        margin-top: calc(58 / var(--width) * 100vw);
    }
}


/* copy
-------------------------------------*/
.footer .copy {
    font-size: calc(10px * var(--ratio));
    font-family: good-times, sans-serif;
    font-weight: 400;
    letter-spacing: .07em;
    transform: scaleX(.7);
    white-space: nowrap;
    margin-top: calc(57px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .copy {
        font-size: calc(10 / var(--width) * 100vw);
        margin-top: calc(57 / var(--width) * 100vw);
    }
}


/* topFooter
-------------------------------------*/
.topFooter {
    color: #fff;
    background: var(--key-color);
    margin-top: calc(51px * var(--ratio));
    padding: calc(68px * var(--ratio)) 0 calc(27px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topFooter {
        margin-top: calc(51 / var(--width) * 100vw);
        padding: calc(68 / var(--width) * 100vw) 0 calc(27 / var(--width) * 100vw);
    }
}

.topFooter a {
    color: #fff;
}

.topFooter .brand {
    font-weight: 600;
    letter-spacing: .15em;
}

.topFooter .sns {
    margin-top: calc(63px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topFooter .sns {
        margin-top: calc(63 / var(--width) * 100vw);
    }
}

.topFooter .copy {
    margin-top: calc(60px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topFooter .copy {
        margin-top: calc(60 / var(--width) * 100vw);
    }
}