@charset "utf-8";

:root {
    --width: 100vw;
    --height: 100vh;
    --ratio: 1.242666666;
    --key-color: #1d2088;
}
@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.show {
    transition: .8s ease;
    transition-property: opacity;
    opacity: 1;
}


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

.show .typing 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 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: calc(28px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .topMain .links {
        margin-top: calc(28 / var(--width) * 100vw);
    }
}

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

.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(165px * var(--ratio));
    color: #fff;
    bottom: calc(15px * var(--ratio));
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .topMain .links .category {
        width: calc(165 / var(--width) * 100vw);
        bottom: calc(15 / 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/vol04/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) {
    .topMain .links .category .enter {
        font-size: calc(10 / var(--width) * 100vw);
        background: url(../img/vol04/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);
    }
}

@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(69px * 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(69 / 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 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 .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/vol04/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/vol04/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;
}


/*----------------------------------------------------------------
* mainArea
----------------------------------------------------------------*/
.mainArea {
    position: relative;
    min-height: calc(619px * var(--ratio));
    padding: calc(68px * var(--ratio)) 0 calc(30px * var(--ratio));
    opacity: 0;
}
@media only screen and (max-width: 769px) {
    .mainArea {
        min-height: calc(619 / var(--width) * 100vw);
        padding: calc(68 / var(--width) * 100vw) 0 calc(30 / var(--width) * 100vw);
    }
}

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


/* title
-------------------------------------*/
.mainArea .title {
    position: absolute;
    line-height: calc(17px * var(--ratio));
    font-family: forma-djr-deck, sans-serif;
    font-size: calc(14px * var(--ratio));
    font-weight: 600;
    letter-spacing: .07em;
    top: calc(22px * var(--ratio));
    right: calc(9px * var(--ratio));
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .mainArea .title {
        line-height: calc(17 / var(--width) * 100vw);
        font-size: calc(14 / var(--width) * 100vw);
        top: calc(22 / var(--width) * 100vw);
        right: calc(9 / var(--width) * 100vw);
    }
}

.mainArea .title span {
    position: relative;
    display: inline-block;
    color: #fff;
}

.mainArea .title span::after {
    position: absolute;
    content: '';
    display: block;
    background: var(--key-color);
    top: calc(1px * var(--ratio));
    bottom: calc(1px * var(--ratio));
    left: calc(-1px * var(--ratio));
    right: calc(-1px * var(--ratio));
    z-index: -1;
}
@media only screen and (max-width: 769px) {
    .mainArea .title span::after {
        top: calc(1 / var(--width) * 100vw);
        bottom: calc(1 / var(--width) * 100vw);
        left: calc(-1 / var(--width) * 100vw);
        right: calc(-1 / var(--width) * 100vw);
    }
}


/* title
-------------------------------------*/
.mainArea .subTitle {
    position: absolute;
    height: calc(172px * var(--ratio));
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: .13em;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    top: calc(23px * var(--ratio));
    left: calc(23px * var(--ratio));
    overflow: hidden;
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .mainArea .subTitle {
        height: calc(172 / var(--width) * 100vw);
        font-size: calc(10 / var(--width) * 100vw);
        top: calc(23 / var(--width) * 100vw);
        left: calc(23 / var(--width) * 100vw);
    }
}

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

@keyframes subtitle {
    0% {
        transform: translateY(-104.7%) scaleY(.8);
    }
    100% {
        transform: translateY(0%) scaleY(.8);
    }
}

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


/* title
-------------------------------------*/
.mainArea .ph {
    position: relative;
    width: calc(252px * var(--ratio));
    margin: 0 auto;
}
@media only screen and (max-width: 769px) {
    .mainArea .ph {
        width: calc(252 / var(--width) * 100vw);
    }
}

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


/* category
-------------------------------------*/
.mainArea .category {
    position: absolute;
    color: var(--key-color);
    line-height: 1;
    font-family: forma-djr-deck, sans-serif;
    font-size: calc(27px * var(--ratio));
    letter-spacing: .06em;
    background: #fff;
    top: calc(310px * var(--ratio));
    left: calc(24px * var(--ratio));
    padding: calc(8px * var(--ratio)) calc(16px * var(--ratio)) calc(8px * var(--ratio)) 0;
    z-index: 1;
}
@media only screen and (max-width: 769px) {
    .mainArea .category {
        font-size: calc(27 / var(--width) * 100vw);
        top: calc(310 / var(--width) * 100vw);
        left: calc(26 / var(--width) * 100vw);
        padding: calc(8 / var(--width) * 100vw) calc(16 / var(--width) * 100vw) calc(8 / var(--width) * 100vw) 0;
    }
}

.mainArea .category strong {
    display: block;
    color: #000;
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: .13em;
    transform-origin: left top;
    transform: scaleX(.8);
    margin-bottom: calc(7px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .mainArea .category strong {
        font-size: calc(10 / var(--width) * 100vw);
        margin-bottom: calc(7 / var(--width) * 100vw);
    }
}


/* 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(24px * var(--ratio)) calc(16px * var(--ratio)) 0 auto;
}
@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(24 / var(--width) * 100vw) calc(16 / var(--width) * 100vw) 0 auto;
    }
}


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

.mainArea .no .line {
    position: relative;
    flex: 1 0;
    display: block;
    width: 1px;
    margin-top: calc(9px * var(--ratio));
    margin-left: calc(3px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .mainArea .no .line {
        margin-top: calc(9 / var(--width) * 100vw);
        margin-left: calc(3 / 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;
    }
}


/*----------------------------------------------------------------
* keyItem
----------------------------------------------------------------*/
.keyItem {
    position: relative;
    background: #f1f1f1;
    margin-top: calc(17px * var(--ratio));
    padding: calc(31px * var(--ratio)) 0 calc(34px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem {
        margin-top: calc(17 / var(--width) * 100vw);
        padding: calc(31 / var(--width) * 100vw) 0 calc(34 / var(--width) * 100vw);
    }
}


/* title
-------------------------------------*/
.keyItem .title {
    position: relative;
    color: var(--key-color);
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: .09em;
    border-bottom: 1px solid var(--key-color);
    padding-left: calc(10px * var(--ratio));
    padding-bottom: calc(1px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .title {
        font-size: calc(10 / var(--width) * 100vw);
        padding-left: calc(12 / var(--width) * 100vw);
        padding-bottom: calc(1 / var(--width) * 100vw);
    }
}

.keyItem .title span {
    display: inline-block;
    transform-origin: left top;
    transform: scaleX(.8);
}

.keyItem .title > span:nth-child(2) {
    margin-left: calc(-14px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .title > span:nth-child(2) {
        margin-left: calc(-14 / var(--width) * 100vw);
    }
}


/* subTitle
-------------------------------------*/
.keyItem .subTitle {
    position: absolute;
    display: block;
    width: calc(104px * var(--ratio));
    height: calc(24px * var(--ratio));
    color: #fff;
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: .09em;
    text-align: center;
    letter-spacing: .13em;
    background: var(--key-color);
    top: calc(25px * var(--ratio));
    right: calc(17px * var(--ratio));
    padding: calc(5px * var(--ratio)) calc(8px * var(--ratio)) 0;
    transform: rotate(-11deg);
}
@media only screen and (max-width: 769px) {
    .keyItem .subTitle {
        width: calc(104 / var(--width) * 100vw);
        height: calc(24 / var(--width) * 100vw);
        font-size: calc(10 / var(--width) * 100vw);
        top: calc(25 / var(--width) * 100vw);
        right: calc(17 / var(--width) * 100vw);
        padding: calc(5 / var(--width) * 100vw) calc(8 / var(--width) * 100vw) 0;
    }
}

.keyItem .subTitle .wrap {
    overflow: hidden;
}

.keyItem .subTitle span {
    display: inline-block;
    transform-origin: center center;
    animation: keyitem 4s linear infinite;
}

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


/* ph
-------------------------------------*/
.keyItem .ph {
    position: relative;
    width: calc(349px * var(--ratio));
    border: 1px solid #000;
    margin: calc(40px * var(--ratio)) auto 0;
}
@media only screen and (max-width: 769px) {
    .keyItem .ph {
        width: calc(349 / var(--width) * 100vw);
        margin: calc(40 / var(--width) * 100vw) auto 0;
    }
}

.keyItem .ph .profileBtn {
    position: absolute;
    width: calc(91px * var(--ratio));
    height: calc(91px * var(--ratio));
    color: #fff;
    font-family: good-times, sans-serif;
    font-size: calc(11px * var(--ratio));
    font-weight: 500;
    text-align: center;
    letter-spacing: -.02em;
    background: var(--key-color);
    border-radius: 100%;
    left: calc(-20px * var(--ratio));
    bottom: calc(-45px * var(--ratio));
    padding-top: calc(20px * var(--ratio));
}
@media only screen and (min-width: 770px) {
    .keyItem .ph .profileBtn {
        transition: opacity .5s ease;
    }
    
    .keyItem .ph .profileBtn:hover {
        opacity: .7;
    }
}
@media only screen and (max-width: 769px) {
    .keyItem .ph .profileBtn {
        width: calc(91 / var(--width) * 100vw);
        height: calc(91 / var(--width) * 100vw);
        font-size: calc(11 / var(--width) * 100vw);
        left: calc(-20 / var(--width) * 100vw);
        bottom: calc(-46 / var(--width) * 100vw);
        padding-top: calc(20 / var(--width) * 100vw);
    }
}

.keyItem.is-profile .profileBtn {
    pointer-events: none;
}

.keyItem .ph .profileBtn span {
    display: block;
    line-height: 1;
}

.keyItem .ph .profileBtn .t1 {
    font-size: calc(9px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .ph .profileBtn .t1 {
        font-size: calc(9 / var(--width) * 100vw);
    }
}

.keyItem .ph .profileBtn .t2 {
    margin-top: calc(3px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .ph .profileBtn .t2 {
        margin-top: calc(3 / var(--width) * 100vw);
    }
}

.keyItem .ph .profileBtn .t3 {
    background: url(../img/vol04/mulga-tab-arrow.png) center bottom / calc(17px * var(--ratio)) auto no-repeat;
    margin-top: calc(11px * var(--ratio));
    padding-bottom: calc(13px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .ph .profileBtn .t3 {
        background: url(../img/vol04/mulga-tab-arrow.png) center bottom / calc(17 / var(--width) * 100vw) auto no-repeat;
        margin-top: calc(11 / var(--width) * 100vw);
        padding-bottom: calc(13 / var(--width) * 100vw);
    }
}


/* item
-------------------------------------*/
.keyItem .item {
    text-align: center;
    margin-top: calc(10px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .item {
        margin-top: calc(10 / var(--width) * 100vw);
    }
}

.keyItem .item li {
    transform-origin: center center;
}


/* point
-------------------------------------*/
.keyItem .point {
    color: var(--key-color);
    border-top: 1px solid var(--key-color);
    margin-top: calc(23px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .point {
        margin-top: calc(23 / var(--width) * 100vw);
    }
}

.keyItem .point li {
    position: relative;
    font-size: calc(14px * var(--ratio));
    letter-spacing: .12em;
    border-bottom: 1px solid var(--key-color);
    padding: calc(8px * var(--ratio)) 0 calc(11px * var(--ratio)) calc(84px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .point li {
        font-size: calc(14 / var(--width) * 100vw);
        padding: calc(8 / var(--width) * 100vw) 0 calc(11 / var(--width) * 100vw) calc(84 / var(--width) * 100vw);
    }
}

.keyItem .point li::before {
    position: absolute;
    content: '';
    display: block;
    width: calc(12.5px * var(--ratio));
    height: calc(12.5px * var(--ratio));
    background: #fff;
    top: calc(13px * var(--ratio));
    left: calc(43px * var(--ratio));
    animation: point 3s steps(1, start) infinite;
}
@media only screen and (max-width: 769px) {
    .keyItem .point li::before {
        width: calc(12.5 / var(--width) * 100vw);
        height: calc(12.5 / var(--width) * 100vw);
        top: calc(13 / var(--width) * 100vw);
        left: calc(43 / var(--width) * 100vw);
    }
}

.keyItem .point.show li::before {
    transition: background 1s cubic-bezier(0.33, 1, 0.68, 1) .1s;
    background: var(--key-color);
}

.keyItem .point li:nth-child(2)::before { transition-delay: 1.1s; }
.keyItem .point li:nth-child(3)::before { transition-delay: 2.1s; }

.keyItem .pointTail {
    color: var(--key-color);
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    letter-spacing: .09em;
    text-align: right;
    transform-origin: right top;
    transform: scaleX(.8);
    padding-top: calc(2px * var(--ratio));
    padding-right: calc(17px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .keyItem .pointTail {
        font-size: calc(10 / var(--width) * 100vw);
        margin-top: calc(2 / var(--width) * 100vw);
        padding-right: calc(17 / var(--width) * 100vw);
    }
}


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

.sample img {
    display: block;
}


/* title
-------------------------------------*/
.sample .title {
    position: absolute;
    width: calc(104px * var(--ratio));
    height: calc(24px * var(--ratio));
    color: #fff;
    font-family: good-times, sans-serif;
    font-size: calc(10px * var(--ratio));
    text-align: center;
    letter-spacing: .09em;
    white-space: nowrap;
    background: var(--key-color);
    top: 0;
    left: calc(32px * var(--ratio));
    padding: calc(5px * var(--ratio)) calc(8px * var(--ratio)) 0;
    transform: rotate(10.87deg);
}
@media only screen and (max-width: 769px) {
    .sample .title {
        width: calc(104 / var(--width) * 100vw);
        height: calc(24 / var(--width) * 100vw);
        font-size: calc(10 / var(--width) * 100vw);
        top: calc(-2 / var(--width) * 100vw);
        left: calc(32 / var(--width) * 100vw);
        padding: calc(5 / var(--width) * 100vw) calc(8 / var(--width) * 100vw) 0;
    }
}

.sample .title .wrap {
    display: block;
    overflow: hidden;
}

.sample .title .txt {
    display: inline-block;
    text-align: center;
    transform: scaleX(.8);
    animation: sample_title 4s linear infinite;
}

@keyframes sample_title {
    0% {
        transform: translateX(-90%) scaleX(.8);
    }
    100% {
        transform: translateX(74%) scaleX(.8);
    }
}


/* no
-------------------------------------*/
.sample .no {
    display: block;
    color: var(--key-color);
    font-family: forma-djr-deck, sans-serif;
    font-size: calc(38px * var(--ratio));
    font-weight: 400;
    text-align: center;
    letter-spacing: .07em;
}
@media only screen and (max-width: 769px) {
    .sample .no {
        font-size: calc(38 / var(--width) * 100vw);
    }
}


/* 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 {
    display: block;
    border-right: 1px solid var(--key-color);
    padding-right: calc(4px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .sample .lead span {
        padding-right: calc(4 / var(--width) * 100vw);
    }
}

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


/* 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(6.215px * var(--ratio));
    height: calc(6.215px * 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(6.215 / var(--width) * 100vw);
        height: calc(6.215 / var(--width) * 100vw);
        margin-right: calc(4 / var(--width) * 100vw);
    }
}

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


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

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

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

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

.men .sample1 .lead {
    top: calc(12px * var(--ratio));
    right: calc(40px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .men .sample1 .lead {
        top: calc(12 / var(--width) * 100vw);
        right: calc(40 / var(--width) * 100vw);
    }
}

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

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


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

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

.men .sample2 .wrap {
    position: relative;
    margin-top: calc(42px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .men .sample2 .wrap {
        margin-top: calc(46 / var(--width) * 100vw);
    }
}

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

.men .sample2 .ph2-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.men .sample2 .ph2.show .ph2-1 {
    transition: opacity .8s ease 1s;
    opacity: 0;
}

.men .sample2 .lead {
    position: static;
}

.men .sample2 .lead span {
    position: absolute;
}

.men .sample2 .lead span:nth-child(1) {
    top: calc(2px * var(--ratio));
    right: calc(30px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .men .sample2 .lead span:nth-child(1) {
        top: calc(2 / var(--width) * 100vw);
        right: calc(30 / var(--width) * 100vw);
    }
}

.men .sample2 .lead span:nth-child(2) {
    bottom: calc(-10px * var(--ratio));
    left: calc(23px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .men .sample2 .lead span:nth-child(2) {
        bottom: calc(-10 / var(--width) * 100vw);
        left: calc(23 / var(--width) * 100vw);
    }
}

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


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

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

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

.men .sample3 .ph2 img {
    width: calc(156px * var(--ratio));
    margin-left: calc(60px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .men .sample3 .ph2 img {
        width: calc(156 / var(--width) * 100vw);
        margin-left: calc(60 / var(--width) * 100vw);
    }
}

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

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

.men .sample3 .lead2 {
    position: absolute;
    color: var(--key-color);
    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;
    top: calc(108px * var(--ratio));
    left: calc(28px * var(--ratio));
    transform-origin: left bottom;
    transform: rotate(90deg);
    z-index: -1;
}
@media only screen and (max-width: 769px) {
    .men .sample3 .lead2 {
        line-height: calc(17 / var(--width) * 100vw);
        font-size: calc(10 / var(--width) * 100vw);
        top: calc(108 / var(--width) * 100vw);
        left: calc(28 / var(--width) * 100vw);
    }
}

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

.men .sample3 .lead2 span.ls2 {
    letter-spacing: .15em;
    margin: 0;
}

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


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

.men .sample4 .ph1 {
    position: relative;
    width: calc(308.5px * var(--ratio));
    margin: calc(16px * var(--ratio)) 0 0 auto;
}
@media only screen and (max-width: 769px) {
    .men .sample4 .ph1 {
        width: calc(308.5 / var(--width) * 100vw);
        margin: calc(16 / var(--width) * 100vw) 0 0 auto;
    }
}

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

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

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

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

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


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

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

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

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

.men .sample5 .lead {
    top: calc(44px * var(--ratio));
    left: calc(36px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .men .sample5 .lead {
        top: calc(44 / var(--width) * 100vw);
        left: calc(36 / var(--width) * 100vw);
    }
}

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

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


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

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

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

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

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

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

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


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

.women .sample2 .ph1 {
    position: relative;
    width: calc(324.5px * var(--ratio));
    margin-top: calc(12px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .women .sample2 .ph1 {
        width: calc(324.5 / var(--width) * 100vw);
        margin-top: calc(12 / var(--width) * 100vw);
    }
}

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

.women .sample2 .ph2 img {
    width: calc(145px * var(--ratio));
    margin-left: calc(26px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .women .sample2 .ph2 img {
        width: calc(145 / var(--width) * 100vw);
        margin-left: calc(26 / var(--width) * 100vw);
    }
}

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

.women .sample2 .ph3 img {
    width: calc(135.5px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .women .sample2 .ph3 img {
        width: calc(135.5 / var(--width) * 100vw);
    }
}

.women .sample2 .lead {
    top: calc(20px * var(--ratio));
    right: calc(75px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .women .sample2 .lead {
        top: calc(20 / var(--width) * 100vw);
        right: calc(75 / var(--width) * 100vw);
    }
}

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


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

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

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

.women .sample3 .ph2 img {
    width: calc(211.5px * var(--ratio));
    margin-left: auto;
}
@media only screen and (max-width: 769px) {
    .women .sample3 .ph2 img {
        width: calc(211.5 / var(--width) * 100vw);
    }
}

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

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

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


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

.women .sample4 .ph1 {
    position: relative;
    margin-top: calc(10px * var(--ratio));
    z-index: 2;
}
@media only screen and (max-width: 769px) {
    .women .sample4 .ph1 {
        margin-top: calc(10 / var(--width) * 100vw);
    }
}

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

.women .sample4 .ph2 {
    position: relative;
    width: calc(251px * var(--ratio));
    margin: calc(50px * var(--ratio)) calc(44px * var(--ratio)) 0 auto;
}
@media only screen and (max-width: 769px) {
    .women .sample4 .ph2 {
        width: calc(251 / var(--width) * 100vw);
        margin: calc(50 / var(--width) * 100vw) calc(44 / var(--width) * 100vw) 0 auto;
    }
}

.women .sample4 .ph2-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.women .sample4 .ph2.show .ph2-1 {
    transition: opacity .8s ease 1s;
    opacity: 0;
}

.women .sample4 .ph3 {
    position: relative;
    margin-top: calc(46px * var(--ratio));
    z-index: 2;
}
@media only screen and (max-width: 769px) {
    .women .sample4 .ph3 {
        margin-top: calc(52 / var(--width) * 100vw);
    }
}

.women .sample4 .ph3 img {
    width: calc(142.5px * var(--ratio));
    margin-left: calc(26px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .women .sample4 .ph3 img {
        width: calc(142.5 / var(--width) * 100vw);
        margin-left: calc(26 / var(--width) * 100vw);
    }
}

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

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

.women .sample4 .lead2 {
    position: absolute;
    color: var(--key-color);
    line-height: calc(17px * var(--ratio));
    font-family: forma-djr-deck, sans-serif;
    font-size: calc(10px * var(--ratio));
    font-weight: 600;
    letter-spacing: .114em;
    white-space: nowrap;
    top: calc(81px * var(--ratio));
    left: calc(151px * var(--ratio));
    z-index: -1;
}
@media only screen and (max-width: 769px) {
    .women .sample4 .lead2 {
        line-height: calc(17 / var(--width) * 100vw);
        font-size: calc(10 / var(--width) * 100vw);
        top: calc(81 / var(--width) * 100vw);
        left: calc(151 / var(--width) * 100vw);
    }
}

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

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


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

.women .sample5 .ph1 {
    position: relative;
    width: calc(331px * var(--ratio));
    margin-top: calc(12px * var(--ratio));
    margin-left: auto;
}
@media only screen and (max-width: 769px) {
    .women .sample5 .ph1 {
        width: calc(331 / var(--width) * 100vw);
        margin-top: calc(12 / var(--width) * 100vw);
    }
}

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

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

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

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

.women .sample5 .item {
    margin: calc(28px * var(--ratio)) 0 0 calc(95px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .women .sample5 .item {
        margin: calc(28 / var(--width) * 100vw) 0 0 calc(95 / 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(119px * var(--ratio));
    padding: calc(60px * var(--ratio)) 0 calc(27px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer {
        margin-top: calc(119 / var(--width) * 100vw);
        padding: calc(60 / 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(22px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .copy {
        font-size: calc(10 / var(--width) * 100vw);
        margin-top: calc(22 / var(--width) * 100vw);
    }
}

.footer .copy-sub {
    margin-top: calc(18px * var(--ratio));
}
@media only screen and (max-width: 769px) {
    .footer .copy-sub {
        margin-top: calc(18 / 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);
    }
}