@charset "UTF-8";:root {
    --pallet-white: #ffffff;
    --pallet-white--rgb: 255,255,255;
    --color-transp: rgba(0,0,0,0);
    --color-main: #0ba29a;
    --color-link: var( --color-main );
    --color-hover: #f3b686;
    --color-bg: #ffffff;
    --color-bg2: #fdfbef;
    --color-bg3: #fefdf7;
    --color-bg4: #faf8ed;
    --color-txt: #493c33;
    --color-txt2: #f5a96e;
    --color-txt3: #ffffff;
    --color-txt4: #202020;
    --color-hr: #e7e7e7;
    --color-hr2: rgba(73, 60, 51, 0.2);
    --color-hr3: rgba(11, 162, 154, 0.15);
    --color-button-bg: var( --color-main );
    --color-button-bg--hover: #5a4f48;
    --color-button-txt: #ffffff;
    --color-form-bg: #fcfaf2;
    --color-form-bg-focus: #ffffff;
    --color-form-border: var( --color-form-bg );
    --color-form-border-focus: var( --color-main );
    --color-form-placeholder: rgba(73, 60, 51, 0.3);
    --color-form-accent: var( --color-main );
    --color-error: var( --color-main )
}

.theme-main {
    --theme-color: var( --color-main )
}

:root {
    --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
    --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
    --easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95 );
    --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53 );
    --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94 );
    --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19 );
    --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22 );
    --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
    --easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06 );
    --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
    --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
    --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
    --easeInOutExpo: cubic-bezier(1, 0, 0, 1);
    --easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
    --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86 );
    --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55 )
}

:root {
    --font-gothic: "Noto Sans JP","Noto Sans CJK",sans-serif;
    --font-mincho: kinuta-maruminyoshino-stdn,serif
}

:root {
    --font-size11: 11px;
    --font-size12: max(1.2rem,11px);
    --font-size13: max(1.3rem,12px);
    --font-size14: max(1.4rem,12px);
    --font-size15: max(1.5rem,13px);
    --font-size16: max(1.6rem,14px);
    --font-size17: max(1.7rem,15px);
    --font-size18: max(1.8rem,16px);
    --font-size20: max(2.0rem,18px);
    --font-size21: max(2.1rem,18px);
    --font-size23: max(2.3rem,20px);
    --font-size25: max(2.5rem,21px);
    --font-size26: max(2.6rem,22px);
    --font-size27: max(2.7rem,22px);
    --font-size28: max(2.8rem,24px);
    --font-size29: max(2.9rem,25px);
    --font-size30: max(3.0rem,26px);
    --font-size34: max(3.4rem,29px);
    --font-size40: 4.0rem;
    --font-size50: 5.0rem
}

:root {
    --radius-medium: 0.5rem
}

@media screen and (max-width: 560px) {
    :root {
        --radius-medium:0.25rem
    }
}

:root {
    --ww: calc( var( --vw ) * 100 );
    --wh: calc( var( --vh ) * 100 );
    --vw: calc( 100vw / 100 );
    --vh: calc( 100vh / 100 );
    --scrollbar-width: 0px;
    --contents-pct: calc( ( 0.9 ) * 100%);
    --contents-outside: calc( 40 / 800 * 100vw)
}

:root {
    --header-height: 260
}

:root {
    --obi-height: 2rem
}

:root {
    --ease-level1: ease;
    --ease-level2: var( --easeOutCubic );
    --ease-heavy1: var( --easeInOutQuart );
    --ease-heavy2: var( --easeInOutQuint );
    --ease-heavy3: var( --easeInOutBack );
    --transition-hover: 420ms var( --ease-level1 );
    --transition-hover-slow: 1000ms var( --ease-level1 );
    --transition-hover-arrow: 600ms var( --ease-heavy3 );
    --transition-handwritten: 800ms var( --ease-heavy1 );
    --animation-handwritten2: 1480ms var( --ease-heavy1 );
    --transition-transition-in: 400ms var( --ease-level1 );
    --transition-transition-out: 600ms var( --ease-level1 );
    --transition-sticky: 400ms var( --ease-level1 );
    --transition-modal: 650ms var( --ease-level1 );
    --transition-flip: 2000ms var( --ease-heavy2 );
    --transition-slider: 1200ms var( --ease-level1 );
    --transition-loading-op1: 4500ms var( --ease-heavy1 );
    --transition-loading-op2: 1000ms var( --ease-level1 );
    --transition-loading-op3: 900ms var( --ease-level1 );
    --transition-loading-op4: 1600ms var( --ease-level1 );
    --transition-loading-op5: 2000ms var( --ease-level1 );
    --transition-fade: 1300ms var( --ease-level1 );
    --transition-fadeup: 750ms var( --ease-level2 );
    --transition-fadeup-slow: 1300ms var( --ease-level1 );
    --transition-blur: 1000ms var( --ease-level1 );
    --transition-blurs: 1500ms var( --ease-level1 );
    --animation-bg-position: 12000ms linear;
    --animation-bg-position2: 28000ms linear;
    --animation-icon: 2300ms steps(1);
    --animation-steps: 8000ms steps(1)
}

@media screen and (max-width: 1023px) {
    :root {
        --transition-flip:800ms ease
    }
}

:root {
    --z-index-: -1;
    --z-index-l-main: 0;
    --z-index-l-footer: 10;
    --z-index-l-header: 100;
    --z-index-l-header__nav: 1000;
    --z-index-l-header__button: 10000;
    --z-index-l-loading: 100000
}

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,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,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
    /*margin: 0;
    padding: 0;*/
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: 0 0
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
    display: block
}

body {
    line-height: 1
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: 400
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote::after,blockquote::before,q::after,q::before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

img,picture {
    max-width: 100%
}

picture {
    display: block
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    padding: 0
}

a img {
    border: none
}

a {
    background: 0 0;
    vertical-align: baseline;
    font-size: 100%;
    text-decoration: none;
    cursor: pointer
}

a:hover,a:hover img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

a,button,small,span,time {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit
}

template {
    display: none
}

button,input,select,textarea {
    margin: 0;
    padding: 0;
    background: 0 0;
    border: none;
    border-radius: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer
}

textarea {
    resize: vertical;
    overflow: auto
}

[type=file] {
    line-height: 1!important
}

select::-ms-expand {
    display: none
}

select::-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #fff
}

input:-webkit-autofill,option:-webkit-autofill,select:-webkit-autofill {
    -webkit-text-fill-color: #000!important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset
}

*,::after,::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media screen and (min-width: 1024px) {
    body,html {
        -ms-scroll-chaining:none;
        overscroll-behavior: none
    }
}

html {
    height: 100vh;
    font-size: 62.5%
}

@media screen and (max-width: 1280px) and (min-width:1024px) {
    html {
        font-size:.78125vw
    }
}

@media screen and (max-width: 767px) and (min-width:561px) {
    html {
        font-size:1.30378vw
    }
}

@media screen and (max-width: 400px) {
    html {
        font-size:2.5vw
    }
}

body {
    width: 100%;
    background-color: var(--color-bg);
    color: var(--color-txt);
    /*font-family: var(--font-mincho);*/
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: calc(100 / 1000 * 1em);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-rendering: geometricPrecision;
    text-decoration-thickness: 1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,.2);
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: scroll
}

a,budoux-ja,small,span,time {
    letter-spacing: inherit
}

h1,h2,h3,h4,h5,h6 {
    /* font-weight:500; */
    /* letter-spacing:calc(100 / 1000 * 1em); */
}

address,dd,dt,li,td,th {
    font-size: inherit;
    line-height: inherit
}

ol,ul {
    list-style-position: inside
}

a,button,input,select,textarea {
    transition: all var(--transition-hover)
}

button,input,select,textarea {
    font-family: inherit
}

svg {
    fill: currentColor;
    transition: fill var(--transition-hover)
}

body.ua-chrome img {
    image-rendering: -webkit-optimize-contrast
}

canvas {
    width: 100%
}

[id^=area-] {
    margin-top: -8rem;
    padding-top: 8rem
}

@-webkit-keyframes abuku-cell {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        -webkit-transform: translate3d(0,-110vh,0);
        transform: translate3d(0,-110vh,0)
    }
}

@keyframes abuku-cell {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        -webkit-transform: translate3d(0,-110vh,0);
        transform: translate3d(0,-110vh,0)
    }
}

@-webkit-keyframes bg-position-mask-illust {
    0% {
        background-position: 0 100%
    }

    100% {
        background-position: -74.4rem 100%
    }
}

@keyframes bg-position-mask-illust {
    0% {
        background-position: 0 100%
    }

    100% {
        background-position: -74.4rem 100%
    }
}

@-webkit-keyframes bg-position-abuku {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -113.9rem 0
    }
}

@keyframes bg-position-abuku {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -113.9rem 0
    }
}

@-webkit-keyframes hover-icon {
    0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    50% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg)
    }

    100% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }
}

@keyframes hover-icon {
    0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }

    50% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg)
    }

    100% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }
}

@-webkit-keyframes hover-InOut-span {
    0% {
        width: 100%;
        left: auto;
        right: 0
    }

    50% {
        width: 0;
        left: auto;
        right: 0
    }

    50.0001% {
        left: 0;
        right: auto
    }

    100% {
        width: 100%;
        left: 0;
        right: auto
    }
}

@keyframes hover-InOut-span {
    0% {
        width: 100%;
        left: auto;
        right: 0
    }

    50% {
        width: 0;
        left: auto;
        right: 0
    }

    50.0001% {
        left: 0;
        right: auto
    }

    100% {
        width: 100%;
        left: 0;
        right: auto
    }
}

@-webkit-keyframes hover-InOut-svg {
    0%,50% {
        left: auto;
        right: 0
    }

    100%,50.0001% {
        left: 0;
        right: auto
    }
}

@keyframes hover-InOut-svg {
    0%,50% {
        left: auto;
        right: 0
    }

    100%,50.0001% {
        left: 0;
        right: auto
    }
}

@-webkit-keyframes loading_illust {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        -webkit-transform: translate3d(-105vw,0,0);
        transform: translate3d(-105vw,0,0)
    }
}

@keyframes loading_illust {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        -webkit-transform: translate3d(-105vw,0,0);
        transform: translate3d(-105vw,0,0)
    }
}

@-webkit-keyframes steps-fluffy {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    25% {
        -webkit-transform: translate3d(-10%,-4%,0);
        transform: translate3d(-10%,-4%,0)
    }

    50% {
        -webkit-transform: translate3d(-4%,4%,0);
        transform: translate3d(-4%,4%,0)
    }

    75% {
        -webkit-transform: translate3d(12%,2%,0);
        transform: translate3d(12%,2%,0)
    }

    100% {
        -webkit-transform: translate3d(5%,-4%,0);
        transform: translate3d(5%,-4%,0)
    }
}

@keyframes steps-fluffy {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    25% {
        -webkit-transform: translate3d(-10%,-4%,0);
        transform: translate3d(-10%,-4%,0)
    }

    50% {
        -webkit-transform: translate3d(-4%,4%,0);
        transform: translate3d(-4%,4%,0)
    }

    75% {
        -webkit-transform: translate3d(12%,2%,0);
        transform: translate3d(12%,2%,0)
    }

    100% {
        -webkit-transform: translate3d(5%,-4%,0);
        transform: translate3d(5%,-4%,0)
    }
}

@-webkit-keyframes steps-fluffy2 {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    25% {
        -webkit-transform: translate3d(-5%,-5%,0);
        transform: translate3d(-5%,-5%,0)
    }

    50% {
        -webkit-transform: translate3d(-10%,2%,0);
        transform: translate3d(-10%,2%,0)
    }

    75% {
        -webkit-transform: translate3d(0,-3%,0);
        transform: translate3d(0,-3%,0)
    }

    100% {
        -webkit-transform: translate3d(10%,4%,0);
        transform: translate3d(10%,4%,0)
    }
}

@keyframes steps-fluffy2 {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    25% {
        -webkit-transform: translate3d(-5%,-5%,0);
        transform: translate3d(-5%,-5%,0)
    }

    50% {
        -webkit-transform: translate3d(-10%,2%,0);
        transform: translate3d(-10%,2%,0)
    }

    75% {
        -webkit-transform: translate3d(0,-3%,0);
        transform: translate3d(0,-3%,0)
    }

    100% {
        -webkit-transform: translate3d(10%,4%,0);
        transform: translate3d(10%,4%,0)
    }
}

@-webkit-keyframes step-vertical {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    33.333% {
        -webkit-transform: translate3d(0,10%,0);
        transform: translate3d(0,10%,0)
    }

    66.666% {
        -webkit-transform: translate3d(0,-10%,0);
        transform: translate3d(0,-10%,0)
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

@keyframes step-vertical {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    33.333% {
        -webkit-transform: translate3d(0,10%,0);
        transform: translate3d(0,10%,0)
    }

    66.666% {
        -webkit-transform: translate3d(0,-10%,0);
        transform: translate3d(0,-10%,0)
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

@-webkit-keyframes step-side {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    25% {
        -webkit-transform: translate3d(-5%,0,0);
        transform: translate3d(-5%,0,0)
    }

    50% {
        -webkit-transform: translate3d(-10%,0,0);
        transform: translate3d(-10%,0,0)
    }

    75% {
        -webkit-transform: translate3d(-15%,0,0);
        transform: translate3d(-15%,0,0)
    }

    100% {
        -webkit-transform: translate3d(-20%,0,0);
        transform: translate3d(-20%,0,0)
    }
}

@keyframes step-side {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    25% {
        -webkit-transform: translate3d(-5%,0,0);
        transform: translate3d(-5%,0,0)
    }

    50% {
        -webkit-transform: translate3d(-10%,0,0);
        transform: translate3d(-10%,0,0)
    }

    75% {
        -webkit-transform: translate3d(-15%,0,0);
        transform: translate3d(-15%,0,0)
    }

    100% {
        -webkit-transform: translate3d(-20%,0,0);
        transform: translate3d(-20%,0,0)
    }
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-slider:not(.slick-initialized) {
    height: 0;
    overflow: hidden
}

.slick-list {
    position: relative;
    display: block;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,.slick-slider .slick-track {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: flex-start
}

[dir=rtl] {
    flex-direction: row-reverse
}

.slick-track:after,.slick-track:before {
    display: table;
    content: ''
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    min-height: 1px
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.c-abuku {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    overflow: hidden
}

.c-abuku.-type2 .c-abuku__left,.c-abuku.-type2 .c-abuku__right {
    max-width: 50%;
    min-width: 50%;
    width: 50%
}

.c-abuku__left,.c-abuku__right {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 40rem
}

@media screen and (min-width: 1024px) {
    .c-abuku__left,.c-abuku__right {
        width:calc((300 / 1500) * 100%)
    }
}

@media screen and (max-width: 1023px) {
    .c-abuku__left,.c-abuku__right {
        width:calc((280 / 800) * 100%)
    }
}

.c-abuku__left {
    left: 0
}

.c-abuku__right {
    right: 0
}

.c-abuku__cell {
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    -webkit-animation: abuku-cell linear forwards;
    animation: abuku-cell linear forwards
}

@media screen and (min-width: 1024px) {
    .c-abuku__cell {
        width:var(--width)
    }
}

@media screen and (max-width: 1023px) {
    .c-abuku__cell {
        width:calc(var(--width) * .04rem)
    }
}

@media screen and (max-width: 560px) {
    .c-abuku__cell {
        width:calc(var(--width) * .02rem)
    }
}

.c-abuku__cell img {
    width: 100%
}

.c-abuku__cell.-size1 {
    --width: 105
}

.c-abuku__cell.-size2 {
    --width: 117
}

.c-abuku__cell.-size3 {
    --width: 169
}

.c-abuku__cell.-size4 {
    --width: 77
}

.c-abuku__cell.-size5 {
    --width: 127
}

.c-abuku__cell.-size6 {
    --width: 145
}

.c-abuku__cell.-size7 {
    --width: 178
}

.c-abuku__cell.-size8 {
    --width: 190
}

.c-abuku__cell.-size9 {
    --width: 242
}

.c-abuku__cell.-size10 {
    --width: 150
}

.c-abuku__cell.-size11 {
    --width: 200
}

.c-abuku__cell.-size12 {
    --width: 218
}

.c-abuku__cell.-size13 {
    --width: 178
}

.c-abuku__cell.-size14 {
    --width: 190
}

.c-abuku__cell.-size15 {
    --width: 242
}

.c-abuku__cell.-size16 {
    --width: 150
}

.c-abuku__cell.-size17 {
    --width: 200
}

.c-abuku__cell.-size18 {
    --width: 218
}

.c-anime-fluffy {
    -webkit-animation: steps-fluffy var(--animation-steps) infinite;
    animation: steps-fluffy var(--animation-steps) infinite
}

.c-anime-fluffy2 {
    -webkit-animation: steps-fluffy2 var(--animation-steps) infinite;
    animation: steps-fluffy2 var(--animation-steps) infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.c-anime-side {
    -webkit-animation: step-side var(--animation-steps) infinite;
    animation: step-side var(--animation-steps) infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.c-aspect {
    position: relative
}

.c-aspect::after {
    content: '';
    display: block
}

.c-aspect.-square::after {
    padding-top: 100%
}

.c-aspect.-square2::after {
    padding-top: calc((510 / 540) * 100%)
}

.c-column {
    display: -ms-grid;
    display: grid
}

@media screen and (min-width: 1024px) {
    [class*=c-column].-col-3-lg-sm {
        -ms-grid-columns:(1fr)[3];
        grid-template-columns: repeat(3,1fr)
    }
}

@media screen and (max-width: 1023px) and (min-width:561px) {
    [class*=c-column].-col-3-lg-sm {
        -ms-grid-columns:(1fr)[2];
        grid-template-columns: repeat(2,1fr)
    }
}

@media screen and (max-width: 560px) {
    [class*=c-column].-col-3-lg-sm {
        -ms-grid-columns:(1fr)[1];
        grid-template-columns: repeat(1,1fr)
    }
}

@media screen and (min-width: 1024px) {
    [class*=c-column].-gap-c-50 {
        -webkit-column-gap:5rem;
        -moz-column-gap: 5rem;
        column-gap: 5rem
    }
}

@media screen and (max-width: 1023px) {
    [class*=c-column].-gap-c-50 {
        -webkit-column-gap:4rem;
        -moz-column-gap: 4rem;
        column-gap: 4rem
    }
}

@media screen and (min-width: 1024px) {
    [class*=c-column].-gap-c-60 {
        -webkit-column-gap:6rem;
        -moz-column-gap: 6rem;
        column-gap: 6rem
    }
}

@media screen and (max-width: 1023px) {
    [class*=c-column].-gap-c-60 {
        -webkit-column-gap:4rem;
        -moz-column-gap: 4rem;
        column-gap: 4rem
    }
}

@media screen and (min-width: 1024px) {
    [class*=c-column].-gap-c-70 {
        -webkit-column-gap:7rem;
        -moz-column-gap: 7rem;
        column-gap: 7rem
    }
}

@media screen and (max-width: 1023px) {
    [class*=c-column].-gap-c-70 {
        -webkit-column-gap:4rem;
        -moz-column-gap: 4rem;
        column-gap: 4rem
    }
}

@media screen and (min-width: 1024px) {
    [class*=c-column].-gap-r-70 {
        row-gap:7rem
    }
}

@media screen and (max-width: 1023px) {
    [class*=c-column].-gap-r-70 {
        row-gap:8.5rem
    }
}

@media screen and (min-width: 1024px) {
    [class*=c-column].-gap-r-77 {
        row-gap:7.7rem
    }
}

@media screen and (max-width: 1023px) {
    [class*=c-column].-gap-r-77 {
        row-gap:7.5rem
    }
}

@media screen and (min-width: 1024px) {
    [class*=c-column].-gap-r-100 {
        row-gap:10rem
    }
}

@media screen and (max-width: 1023px) {
    [class*=c-column].-gap-r-100 {
        row-gap:5rem
    }
}

@media screen and (min-width: 1024px) {
    [class*=c-column].-gap-r-100-2 {
        row-gap:10rem
    }
}

@media screen and (max-width: 1023px) {
    [class*=c-column].-gap-r-100-2 {
        row-gap:8rem
    }
}

@media screen and (min-width: 1024px) {
    .c-flex {
        display:flex;
        flex-direction: row-reverse;
        justify-content: space-between
    }
}

@media screen and (max-width: 1023px) {
    .c-flex__side {
        display:flex;
        justify-content: flex-end;
        padding-right: var(--contents-outside)
    }
}

@media screen and (min-width: 1024px) {
    .c-flex__main {
        width:calc((910 / 1200) * 100%)
    }
}

@media screen and (min-width: 1024px) {
    .c-flex__main.-type1 {
        margin-top:9.5rem
    }
}

@media screen and (max-width: 1023px) {
    .c-flex__main.-type1 {
        margin-top:16.7rem
    }
}

@media screen and (min-width: 1024px) {
    .c-flex__main.-type2 {
        margin-top:8.5rem
    }
}

@media screen and (max-width: 1023px) {
    .c-flex__main.-type2 {
        margin-top:16.3rem
    }
}

@media screen and (min-width: 1024px) {
    .c-flex2 {
        display:flex;
        justify-content: space-between
    }
}

@media screen and (min-width: 1024px) {
    .c-flex2__side {
        width:calc((210 / 1200) * 100%)
    }
}

@media screen and (min-width: 1024px) {
    .c-flex2__main {
        width:calc((880 / 1200) * 100%)
    }
}

@media screen and (max-width: 1023px) {
    .c-flex2__main {
        margin-top:10rem
    }
}

.c-flip {
    position: relative;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media screen and (min-width: 1024px) {
    .c-flip.is-change .c-flip__cell:nth-of-type(1) {
        -webkit-transform:rotateY(-180deg);
        transform: rotateY(-180deg)
    }

    .c-flip.is-change .c-flip__cell:nth-of-type(2) {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
}

@media screen and (max-width: 1023px) {
    .c-flip.is-change .c-flip__cell:nth-of-type(1) {
        position:absolute;
        opacity: 0;
        visibility: hidden
    }

    .c-flip.is-change .c-flip__cell:nth-of-type(2) {
        position: relative;
        opacity: 1;
        visibility: visible
    }
}

.c-flip__cell {
    width: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: var(--transition-flip);
    transition-property: opacity,visibility,-webkit-transform;
    transition-property: transform,opacity,visibility;
    transition-property: transform,opacity,visibility,-webkit-transform
}

body:not(.ua-safari) .c-flip__cell {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.c-flip__cell:nth-of-type(1) {
    position: relative
}

@media screen and (min-width: 1024px) {
    .c-flip__cell:nth-of-type(1) {
        -webkit-transform:rotateY(0);
        transform: rotateY(0)
    }
}

.c-flip__cell:nth-of-type(2) {
    position: absolute
}

@media screen and (min-width: 1024px) {
    .c-flip__cell:nth-of-type(2) {
        -webkit-transform:rotateY(180deg);
        transform: rotateY(180deg)
    }
}

@media screen and (max-width: 1023px) {
    .c-flip__cell:nth-of-type(2) {
        opacity:0;
        visibility: hidden
    }
}

.c-flip-button {
    display: block;
    color: var(--color-txt2);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.c-flip-button.-color2 {
    color: var(--color-txt3)
}

@media (hover: hover) {
    .c-flip-button.-color2 button:hover {
        color:var(--color-txt2)
    }
}

.c-flip-button.-color3 {
    color: var(--color-main)
}

@media (hover: hover) {
    .c-flip-button.-color3 button:hover {
        color:var(--color-txt2)
    }
}

.c-flip-button button {
    position: absolute;
    transition: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media (hover: hover) {
    .c-flip-button button:hover {
        color:var(--color-main)
    }

    .c-flip-button button:hover .c-flip-button__arrow {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }

    .c-flip-button button:hover .c-flip-button__arrow2 {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
}

.c-flip-button svg {
    display: block;
    position: absolute;
    transition: color var(--transition-hover),opacity 0s 1s linear
}

.c-flip-button__arrow,.c-flip-button__arrow2 {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    transition: color var(--transition-hover),opacity 0s 1s linear,-webkit-transform var(--transition-hover-arrow)!important;
    transition: transform var(--transition-hover-arrow),color var(--transition-hover),opacity 0s 1s linear!important;
    transition: transform var(--transition-hover-arrow),color var(--transition-hover),opacity 0s 1s linear,-webkit-transform var(--transition-hover-arrow)!important
}

@media screen and (max-width: 1023px) {
    .c-inner-outside {
        padding:0 var(--contents-outside)
    }
}

@media screen and (max-width: 1023px) {
    .c-inner-outside2 {
        padding:0 calc(var(--contents-outside) * 2)
    }
}

.c-inner-large,.c-inner-medium,.c-inner-small {
    width: var(--contents-pct);
    margin: 0 auto
}

.c-inner-small {
    max-width: 110rem
}

.c-inner-medium {
    max-width: 120rem
}

.c-inner-large {
    max-width: 130rem
}

@media screen and (min-width: 1024px) {
    .c-inner-vertical {
        height:calc(100% - var(--header-height) * .1rem);
        margin-top: calc(var(--header-height) * .1rem);
        /*padding-bottom: calc(var(--padding-bottom)/ 1100 * 100vh);*/
        padding-bottom: calc(var(--padding-bottom)/ 1390 * 100vh);
        display: flex;
        flex-direction: column;
        justify-content: center
    }
}

.c-inner-full {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto
}

.c-lazy {
    content-visibility: auto
}

.c-line {
    position: relative;
    display: block;
    width: var(--icon-width);
    height: var(--icon-height);
    --icon-width: 10rem;
    --icon-height: 0.2rem
}

.c-line span {
    display: block;
    position: absolute;
    right: 0;
    left: auto;
    width: 100%;
    height: 100%;
    transition: width var(--transition-handwritten);
    overflow: hidden
}

.c-line svg {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    width: var(--icon-width);
    height: var(--icon-height)
}

.c-line.-small {
    --icon-height: 0.2rem
}

@media screen and (min-width: 1024px) {
    .c-line.-small {
        --icon-width:8.5rem
    }
}

@media screen and (max-width: 1023px) {
    .c-line.-small {
        --icon-width:5.5rem
    }
}

.c-line.-medium {
    --icon-height: 0.2rem
}

@media screen and (min-width: 1024px) {
    .c-line.-medium {
        --icon-width:9.2rem
    }
}

.c-line.-hoverIn span {
    width: 0
}

@media (hover: hover) {
    a:hover .c-line.-hoverIn span {
        width:100%;
        left: 0;
        right: auto
    }

    a:hover .c-line.-hoverIn svg {
        left: 0;
        right: auto
    }
}

@media (hover: hover) {
    a:hover .c-line.-hoverInOut span {
        -webkit-animation:hover-InOut-span var(--animation-handwritten2) forwards;
        animation: hover-InOut-span var(--animation-handwritten2) forwards
    }

    a:hover .c-line.-hoverInOut svg {
        -webkit-animation: hover-InOut-svg var(--animation-handwritten2) forwards;
        animation: hover-InOut-svg var(--animation-handwritten2) forwards
    }
}

.c-list-slash li {
    display: inline-flex;
    align-items: baseline
}

.c-list-slash li:not(:last-of-type)::after {
    content: ' / ';
    white-space: pre-wrap
}

@media screen and (min-width: 1024px) {
    .c-list-slash-mqUp-lg li {
        display:inline-flex;
        align-items: baseline
    }

    .c-list-slash-mqUp-lg li:not(:last-of-type)::after {
        content: ' / ';
        white-space: pre-wrap
    }
}

.c-logo a {
    display: block
}

.c-logo span {
    display: block
}

.c-logo img {
    width: 100%
}

@media screen and (max-width: 1023px) {
    .c-logo.-type2 .c-logo__main {
        width:14rem
    }

    .c-logo.-type2 .c-logo__sub {
        display: none
    }
}

@media screen and (min-width: 1024px) {
    .c-logo__main {
        width:9rem;
        margin-left: .2rem
    }
}

@media screen and (max-width: 1023px) {
    .c-logo__main {
        width:6.3rem;
        margin-left: .1rem
    }
}

@media screen and (min-width: 1024px) {
    .c-logo__sub {
        width:9rem;
        margin-top: 3rem
    }
}

@media screen and (max-width: 1023px) {
    .c-logo__sub {
        width:6.4rem;
        margin-top: 2.1rem
    }
}

.c-objectfit.-cover {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0
}

.c-objectfit.-contain {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0
}

.c-objectfit-video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0
}

.ua-edge video.c-objectfit-video,.ua-ie video.c-objectfit-video {
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(.00001deg);
    transform: translate(-50%,-50%) rotate(.00001deg);
    z-index: 0;
    pointer-events: none
}

.c-object {
    position: absolute;
    pointer-events: none
}

.c-object img {
    width: 100%
}

@media screen and (min-width: 1024px) {
    .c-object2,.c-object4 {
        --parent-width:1620;
        --parent-height: 1100
    }
}

@media screen and (max-width: 1023px) {
    .c-object2,.c-object4 {
        --parent-width:400;
        --parent-height: 650
    }
}

.c-object2 img,.c-object4 img {
    width: 100%
}

.c-object2 {
    max-width: calc(var(--width) * .1rem);
    width: calc(var(--width)/ var(--parent-width) * 100%);
    position: absolute;
    top: calc((var(--top) + var(--height)/ 2)/ var(--parent-height) * 100%);
    left: calc((var(--left) + var(--width)/ 2)/ var(--parent-width) * 100%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 10;
    pointer-events: none
}

.c-object3 {
    max-width: calc(var(--width) * .1rem);
    width: calc(var(--width)/ var(--parent-width) * 100%);
    position: absolute;
    top: auto;
    left: calc((var(--left) + var(--width)/ 2)/ var(--parent-width) * 100%);
    bottom: calc((var(--top) + var(--height) - var(--parent-height))/ var(--parent-height) * 100%);
    -webkit-transform: translate(-50%,50%);
    transform: translate(-50%,50%);
    z-index: 10;
    pointer-events: none
}

.c-object4 {
    max-width: calc(var(--width) * .1rem);
    width: calc(var(--width)/ var(--parent-width) * 100%);
    position: absolute;
    left: calc((var(--left) + var(--width)/ 2)/ var(--parent-width) * 100%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none
}

@media screen and (max-width: 1023px) {
    .c-online {
        width:10rem;
        height: 3.7rem
    }
}

.c-online a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--color-link)
}

@media (hover: hover) {
    .c-online a:hover {
        color:var(--color-hover)
    }

    .c-online a:hover .c-online__icon {
        -webkit-animation: hover-icon var(--animation-icon) infinite;
        animation: hover-icon var(--animation-icon) infinite
    }
}

@media screen and (max-width: 1023px) {
    .c-online a {
        justify-content:center;
        border-radius: var(--radius-medium);
        border: solid 1px currentColor
    }
}

.c-online__icon {
    position: relative
}

@media screen and (min-width: 1024px) {
    .c-online__icon::after {
        content:'';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        background-image: url(../img/common/icon/bag_inner.svg);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat
    }
}

.c-online__icon__bag {
    position: relative;
    z-index: 1
}

@media screen and (min-width: 1024px) {
    .c-online__icon__bag {
        width:2.4rem;
        height: 2.9rem
    }
}

@media screen and (max-width: 1023px) {
    .c-online__icon__bag {
        width:1.5rem;
        height: 1.7rem
    }
}

.c-online__txt {
    display: block;
    font-family: var(--font-gothic);
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-online__txt {
        border-bottom:solid 1px;
        font-size: var(--font-size15);
        padding-bottom: .7rem;
        margin-left: 3rem
    }
}

@media screen and (max-width: 1023px) {
    .c-online__txt {
        font-size:var(--font-size11);
        margin-left: .7rem;
        padding-bottom: .3rem
    }
}

.c-radius {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--radius-medium)
}

.c-sticky {
    top: 0
}

.c-sticky.is-sticky {
    position: sticky
}

body.ua-pc .c-sticky-pc {
    position: sticky!important
}

body:not(.ua-pc) .c-sticky-pc {
    position: fixed
}

.c-youtube {
    position: relative
}

.c-youtube::after {
    content: '';
    display: block;
    padding-top: 56.25%
}

.c-youtube>iframe {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.c-icon {
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0;
    line-height: 0
}

.c-button {
    width: 100%;
    margin: 0 auto
}

@media screen and (min-width: 1024px) {
    .c-button {
        height:8rem
    }
}

@media screen and (max-width: 1023px) {
    .c-button {
        height:5.5rem
    }
}

.c-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-medium);
    background-color: var(--color-button-bg);
    color: var(--color-button-txt);
    font-size: var(--font-size16)
}

@media (hover: hover) {
    .c-button a:hover {
        background-color:var(--color-button-bg--hover)
    }
}

@media screen and (min-width: 1024px) {
    .c-button [src*=submit] {
        width:7rem
    }
}

@media screen and (max-width: 1023px) {
    .c-button [src*=submit] {
        width:5.9rem
    }
}

.c-button [src*=topback] {
    width: 13.2rem
}

.c-button2 {
    max-width: 30.2rem;
    width: 100%;
    margin: 0 auto
}

.c-button2.-type2 {
    max-width: 32.2rem
}

.c-button2 a {
    display: block;
    border-radius: var(--radius-medium);
    border: solid 1px var(--color-main);
    background-color: rgba(var(--pallet-white--rgb),.3);
    color: var(--color-main);
    text-align: center;
    font-family: var(--font-gothic);
    font-size: var(--font-size13);
    letter-spacing: calc(150 / 1000 * 1em);
    padding: 1.4rem 0
}

.c-crop {
    line-height: calc(var(--line-height) * 1em);
    padding-top: .01px;
    padding-bottom: .01px
}

.c-crop::after,.c-crop::before {
    content: '';
    display: block;
    width: 0;
    height: 0
}

.c-crop::before {
    margin-top: calc((1 - var(--line-height)) * .5em)
}

.c-crop::after {
    margin-bottom: calc((1 - var(--line-height)) * .5em)
}

@media screen and (min-width: 1024px) {
    .c-crop-mqUp-lg {
        line-height:calc(var(--line-height) * 1em);
        padding-top: .01px;
        padding-bottom: .01px
    }

    .c-crop-mqUp-lg::after,.c-crop-mqUp-lg::before {
        content: '';
        display: block;
        width: 0;
        height: 0
    }

    .c-crop-mqUp-lg::before {
        margin-top: calc((1 - var(--line-height)) * .5em)
    }

    .c-crop-mqUp-lg::after {
        margin-bottom: calc((1 - var(--line-height)) * .5em)
    }
}

@media screen and (max-width: 1023px) {
    .c-crop-mqDown-lg {
        line-height:calc(var(--line-height) * 1em);
        padding-top: .01px;
        padding-bottom: .01px
    }

    .c-crop-mqDown-lg::after,.c-crop-mqDown-lg::before {
        content: '';
        display: block;
        width: 0;
        height: 0
    }

    .c-crop-mqDown-lg::before {
        margin-top: calc((1 - var(--line-height)) * .5em)
    }

    .c-crop-mqDown-lg::after {
        margin-bottom: calc((1 - var(--line-height)) * .5em)
    }
}

.c-crop-vertical {
    line-height: calc(var(--line-height) * 1em);
    padding-right: .01px;
    padding-left: .01px
}

.c-crop-vertical::after,.c-crop-vertical::before {
    content: '';
    display: block;
    width: 0;
    height: 0
}

.c-crop-vertical::before {
    margin-right: calc((1 - var(--line-height)) * .5em)
}

.c-crop-vertical::after {
    margin-left: calc((1 - var(--line-height)) * .5em)
}

.c-crop-lg {
    line-height: calc(var(--line-height) * 1em)
}

@media screen and (min-width: 1024px) {
    .c-crop-lg {
        padding-top:.01px;
        padding-bottom: .01px
    }

    .c-crop-lg::after,.c-crop-lg::before {
        content: '';
        display: block;
        width: 0;
        height: 0
    }

    .c-crop-lg::before {
        margin-top: calc((1 - var(--line-height)) * .5em)
    }

    .c-crop-lg::after {
        margin-bottom: calc((1 - var(--line-height)) * .5em)
    }
}

@media screen and (max-width: 1023px) {
    .c-crop-lg {
        padding-right:.01px;
        padding-left: .01px
    }

    .c-crop-lg::after,.c-crop-lg::before {
        content: '';
        display: block;
        width: 0;
        height: 0
    }

    .c-crop-lg::before {
        margin-right: calc((1 - var(--line-height)) * .5em)
    }

    .c-crop-lg::after {
        margin-left: calc((1 - var(--line-height)) * .5em)
    }
}

.c-crop-lg2 {
    line-height: calc(var(--line-height) * 1em)
}

@media screen and (min-width: 1024px) {
    .c-crop-lg2 {
        padding-right:.01px;
        padding-left: .01px
    }

    .c-crop-lg2::after,.c-crop-lg2::before {
        content: '';
        display: block;
        width: 0;
        height: 0
    }

    .c-crop-lg2::before {
        margin-right: calc((1 - var(--line-height)) * .5em)
    }

    .c-crop-lg2::after {
        margin-left: calc((1 - var(--line-height)) * .5em)
    }
}

@media screen and (max-width: 1023px) {
    .c-crop-lg2 {
        padding-top:.01px;
        padding-bottom: .01px
    }

    .c-crop-lg2::after,.c-crop-lg2::before {
        content: '';
        display: block;
        width: 0;
        height: 0
    }

    .c-crop-lg2::before {
        margin-top: calc((1 - var(--line-height)) * .5em)
    }

    .c-crop-lg2::after {
        margin-bottom: calc((1 - var(--line-height)) * .5em)
    }
}

.c-title {
    display: flex;
    flex-direction: row-reverse;
    white-space: nowrap;
    color: var(--color-main)
}

@media screen and (max-width: 1023px) {
    .c-title {
        justify-content:center
    }
}

.c-title__sub {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-title__sub {
        font-size:var(--font-size16);
        --line-height: calc( 50 / 16 )
    }
}

@media screen and (max-width: 1023px) {
    .c-title__sub {
        font-size:var(--font-size12);
        --line-height: calc( 72 / 24 )
    }
}

.c-title__main {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright
}

@media screen and (min-width: 1024px) {
    .c-title__main {
        font-size:var(--font-size40);
        --line-height: calc( 84 / 40 );
        margin-right: 6rem
    }
}

@media screen and (max-width: 1023px) {
    .c-title__main {
        font-size:var(--font-size29);
        --line-height: calc( 120 / 58 );
        margin-right: 3rem
    }
}

.c-txt-not {
    white-space: nowrap
}

.c-txts>:not(:last-child)::after {
    content: '\A\A';
    display: inline;
    white-space: pre
}

.c-txt-xsmall {
    letter-spacing: calc(80 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-xsmall {
        font-size:var(--font-size12);
        --line-height: calc( 28 / 12 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xsmall {
        font-size:var(--font-size13);
        --line-height: calc( 50 / 26 )
    }
}

@media screen and (min-width: 1024px) {
    .c-txt-xsmall2 {
        font-size:var(--font-size12);
        --line-height: calc( 24 / 12 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xsmall2 {
        font-size:var(--font-size13);
        --line-height: calc( 50 / 26 )
    }
}

.c-txt-xsmall3 {
    font-size: var(--font-size12)
}

@media screen and (min-width: 1024px) {
    .c-txt-xsmall3 {
        --line-height:calc( 32 / 12 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xsmall3 {
        --line-height:calc( 46 / 25 )
    }
}

.c-txt-xsmall4 {
    font-size: var(--font-size12)
}

@media screen and (min-width: 1024px) {
    .c-txt-xsmall4 {
        --line-height:calc( 30 / 12 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xsmall4 {
        --line-height:calc( 46 / 25 )
    }
}

@media screen and (min-width: 1024px) {
    .c-txt-xsmall5 {
        font-size:var(--font-size12);
        --line-height: calc( 30 / 12 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xsmall5 {
        font-size:var(--font-size13);
        --line-height: calc( 60 / 27 )
    }
}

@media screen and (min-width: 1024px) {
    .c-txt-xsmall6 {
        font-size:var(--font-size12);
        --line-height: calc( 22 / 12 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xsmall6 {
        font-size:var(--font-size13);
        --line-height: calc( 50 / 26 )
    }
}

.c-txt-medium {
    font-size: var(--font-size14)
}

@media screen and (min-width: 1024px) {
    .c-txt-medium {
        --line-height:calc( 34 / 14 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-medium {
        --line-height:calc( 50 / 28 )
    }
}

.c-txt-medium2 {
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-medium2 {
        font-size:var(--font-size14);
        --line-height: calc( 32 / 14 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-medium2 {
        font-size:var(--font-size13);
        --line-height: calc( 50 / 26 )
    }
}

.c-txt-medium3 {
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-medium3 {
        font-size:var(--font-size14);
        --line-height: calc( 30 / 14 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-medium3 {
        font-size:var(--font-size13);
        --line-height: calc( 46 / 26 )
    }
}

@media screen and (min-width: 1024px) {
    .c-txt-medium4 {
        font-size:var(--font-size14);
        --line-height: calc( 30 / 14 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-medium4 {
        font-size:var(--font-size13);
        --line-height: calc( 50 / 26 )
    }
}

.c-txt-large {
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-large {
        font-size:var(--font-size15);
        --line-height: calc( 38 / 15 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-large {
        font-size:var(--font-size14);
        --line-height: calc( 60 / 28 )
    }
}

.c-txt-xlarge {
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-xlarge {
        font-size:var(--font-size16);
        --line-height: calc( 40 / 16 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xlarge {
        font-size:var(--font-size13);
        --line-height: calc( 60 / 26 )
    }
}

.c-txt-xlarge2 {
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-xlarge2 {
        font-size:var(--font-size16);
        --line-height: calc( 50 / 16 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xlarge2 {
        font-size:var(--font-size12);
        --line-height: calc( 72 / 24 )
    }
}

.c-txt-xlarge3 {
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-xlarge3 {
        font-size:var(--font-size16);
        --line-height: calc( 40 / 16 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xlarge3 {
        font-size:var(--font-size14);
        --line-height: calc( 60 / 28 )
    }
}

.c-txt-xxlarge {
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-xxlarge {
        font-size:var(--font-size18);
        --line-height: calc( 46 / 18 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xxlarge {
        font-size:var(--font-size13);
        --line-height: calc( 60 / 26 )
    }
}

.c-txt-xxlarge2 {
    letter-spacing: calc(100 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .c-txt-xxlarge2 {
        font-size:var(--font-size18);
        --line-height: calc( 50 / 18 )
    }
}

@media screen and (max-width: 1023px) {
    .c-txt-xxlarge2 {
        font-size:var(--font-size15);
        --line-height: calc( 70 / 30 )
    }
}

.js-delay-1 {
    transition-delay: .1s!important
}

.js-delay-2 {
    transition-delay: .2s!important
}

.js-delay-3 {
    transition-delay: .3s!important
}

.js-delay-4 {
    transition-delay: .4s!important
}

.js-delay-5 {
    transition-delay: .5s!important
}

.js-delay-6 {
    transition-delay: .6s!important
}

.js-delay-7 {
    transition-delay: .7s!important
}

.js-delay-8 {
    transition-delay: .8s!important
}

.js-delay-9 {
    transition-delay: .9s!important
}

.js-delay-10 {
    transition-delay: 1s!important
}

.js-lazyload {
    opacity: 0
}

.js-lazyload.is-set {
    opacity: 1;
    transition: opacity .2s linear
}

img.js-svg {
    opacity: 0
}

.js-blur {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    transition: var(--transition-blur);
    transition-property: opacity,-webkit-filter;
    transition-property: opacity,filter;
    transition-property: opacity,filter,-webkit-filter;
    transition-delay: var(--transition-delay,200ms)
}

.is-shown .js-blur,.js-blur.is-shown {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0)
}

.js-blurs>* {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    transition: var(--transition-blurs);
    transition-property: opacity,-webkit-filter;
    transition-property: opacity,filter;
    transition-property: opacity,filter,-webkit-filter
}

.js-blurs>:nth-child(1) {
    transition-delay: calc(var(--transition-delay ,200ms) + 400ms)
}

.js-blurs>:nth-child(2) {
    transition-delay: calc(var(--transition-delay ,200ms) + 800ms)
}

.js-blurs>:nth-child(3) {
    transition-delay: calc(var(--transition-delay ,200ms) + 1200ms)
}

.is-shown .js-blurs>*,.js-blurs.is-shown>* {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0)
}

.js-fade {
    opacity: 0;
    transition: var(--transition-fadeup);
    transition-property: opacity
}

.is-shown .js-fade,.js-fade.is-shown {
    opacity: 1
}

.js-fadeup {
    opacity: 0;
    -webkit-transform: translate3d(0,1rem,0) rotate(.001deg);
    transform: translate3d(0,1rem,0) rotate(.001deg);
    transition: var(--transition-fadeup);
    transition-property: opacity,-webkit-transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
    transition-delay: var(--transition-delay,200ms)
}

.is-shown .js-fadeup,.js-fadeup.is-shown {
    opacity: 1!important;
    -webkit-transform: translate3d(0,0,0) rotate(.001deg)!important;
    transform: translate3d(0,0,0) rotate(.001deg)!important
}

.js-fadeup.-slow {
    -webkit-transform: translate3d(0,2.5rem,0) rotate(.001deg);
    transform: translate3d(0,2.5rem,0) rotate(.001deg);
    transition: var(--transition-fadeup-slow)
}

.js-fadeups>* {
    opacity: 0;
    -webkit-transform: translate3d(0,1rem,0) rotate(.001deg);
    transform: translate3d(0,1rem,0) rotate(.001deg);
    transition: var(--transition-fadeup);
    transition-property: opacity,-webkit-transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform
}

.js-fadeups>:nth-child(1) {
    transition-delay: calc(var(--transition-delay ,0ms) + 200ms)
}

.js-fadeups>:nth-child(2) {
    transition-delay: calc(var(--transition-delay ,0ms) + 400ms)
}

.js-fadeups>:nth-child(3) {
    transition-delay: calc(var(--transition-delay ,0ms) + 600ms)
}

.js-fadeups>:nth-child(4) {
    transition-delay: calc(var(--transition-delay ,0ms) + 800ms)
}

.js-fadeups>:nth-child(5) {
    transition-delay: calc(var(--transition-delay ,0ms) + 1000ms)
}

.js-fadeups>:nth-child(6) {
    transition-delay: calc(var(--transition-delay ,0ms) + 1200ms)
}

.js-fadeups>:nth-child(7) {
    transition-delay: calc(var(--transition-delay ,0ms) + 1400ms)
}

.js-fadeups>:nth-child(8) {
    transition-delay: calc(var(--transition-delay ,0ms) + 1600ms)
}

.js-fadeups>:nth-child(9) {
    transition-delay: calc(var(--transition-delay ,0ms) + 1800ms)
}

.js-fadeups>:nth-child(10) {
    transition-delay: calc(var(--transition-delay ,0ms) + 2000ms)
}

.js-fadeups>:nth-child(11) {
    transition-delay: calc(var(--transition-delay ,0ms) + 2200ms)
}

.js-fadeups>:nth-child(12) {
    transition-delay: calc(var(--transition-delay ,0ms) + 2400ms)
}

.js-fadeups>:nth-child(13) {
    transition-delay: calc(var(--transition-delay ,0ms) + 2600ms)
}

.js-fadeups>:nth-child(14) {
    transition-delay: calc(var(--transition-delay ,0ms) + 2800ms)
}

.js-fadeups>:nth-child(15) {
    transition-delay: calc(var(--transition-delay ,0ms) + 3000ms)
}

.js-fadeups>:nth-child(16) {
    transition-delay: calc(var(--transition-delay ,0ms) + 3200ms)
}

.js-fadeups>:nth-child(17) {
    transition-delay: calc(var(--transition-delay ,0ms) + 3400ms)
}

.js-fadeups>:nth-child(18) {
    transition-delay: calc(var(--transition-delay ,0ms) + 3600ms)
}

.js-fadeups>:nth-child(19) {
    transition-delay: calc(var(--transition-delay ,0ms) + 3800ms)
}

.js-fadeups>:nth-child(20) {
    transition-delay: calc(var(--transition-delay ,0ms) + 4000ms)
}

.is-shown .js-fadeups>*,.js-fadeups.is-shown>* {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) rotate(.001deg);
    transform: translate3d(0,0,0) rotate(.001deg)
}

.js-parallax-img {
    position: relative;
    overflow: hidden
}

.js-parallax-img picture {
    width: 100%;
    height: 120%;
    height: calc(100% + 6vh);
    position: absolute;
    top: 0;
    left: 0
}

body.ua-windows .js-parallax-img picture {
    transition: -webkit-transform .4s var(--easeOutCubic);
    transition: transform .4s var(--easeOutCubic);
    transition: transform .4s var(--easeOutCubic), -webkit-transform .4s var(--easeOutCubic)
}

.js-parallax-img img {
    -webkit-transform: rotate(.0001deg) translate3d(0,0,0);
    transform: rotate(.0001deg) translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media screen and (min-width: 1024px) {
    .js-horizontalScroll__inner {
        display:flex;
        height: var(--wh)
    }

    .js-horizontalScroll__inner>* {
        white-space: normal
    }

    .js-horizontalScroll__flex {
        position: relative;
        display: flex;
        white-space: normal
    }
}

.js-scroll body.ua-pc {
    overflow: hidden
}

.js-slider {
    position: relative
}

.js-slider__content {
    background-color: var(--color-bg);
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden
}

.js-slider__content li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-slider);
    transition-property: opacity,visibility
}

.js-slider__content li.is-active {
    opacity: 1;
    visibility: visible
}

.p-article {
    position: relative
}

@media screen and (min-width: 1024px) {
    .p-article {
        padding-top:24rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article {
        padding-top:19.5rem
    }
}

@media screen and (min-width: 1024px) {
    .p-article__inner {
        display:flex;
        flex-direction: row-reverse;
        justify-content: space-between
    }
}

@media screen and (min-width: 1024px) {
    .p-article__illust {
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: calc(24rem + var(--height));
        overflow: hidden;
        pointer-events: none
    }
}

@media screen and (max-width: 1023px) {
    .p-article__illust {
        display:none
    }
}

@media screen and (min-width: 1024px) {
    .p-article__illust__inner {
        position:relative
    }
}

.p-article__illust__inner div {
    z-index: -1
}

.p-article__illust-1 {
    width: 18.1rem;
    top: -26.8rem;
    right: -14.3rem
}

.p-article__illust-2 {
    width: 18.1rem;
    top: -2.6rem;
    left: -17rem
}

.p-article__illust-3 {
    width: 14.9rem;
    top: 14.8rem;
    right: 16.1rem
}

.p-article__illust-4 {
    width: 14.9rem;
    top: 37.4rem;
    left: 20.9rem
}

.p-article__header {
    color: var(--theme-color)
}

@media screen and (min-width: 1024px) {
    .p-article__header {
        width:28rem;
        width: calc((280 / 1300) * 100%)
    }
}

@media screen and (min-width: 1024px) {
    .p-article__header__inner {
        padding-top:10.2rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__header__inner {
        padding:0 var(--contents-outside)
    }
}

.p-article__header__en {
    text-align: center
}

.p-article__header__en img {
    display: block;
    margin: 0 auto
}

@media screen and (min-width: 1024px) {
    .p-article__header__en [src*=works] {
        width:6.5rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__header__en [src*=works] {
        width:4.3rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__header__en [src*=blog] {
        width:4.3rem
    }
}

.p-article__header__en .c-line {
    display: block;
    margin: 0 auto;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg)
}

@media screen and (min-width: 1024px) {
    .p-article__header__en .c-line {
        margin-top:2rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__header__en .c-line {
        margin-top:1.3rem
    }
}

.p-article__header__main {
    display: flex;
    align-items: flex-start;
    justify-content: center
}

@media screen and (min-width: 1024px) {
    .p-article__header__main {
        margin-top:12rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__header__main {
        margin-top:3rem
    }
}

@media screen and (min-width: 1024px) {
    .p-article__header__title {
        max-height:68rem;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: var(--font-size30);
        --line-height: calc( 56 / 30 )
    }
}

@media screen and (max-width: 1023px) {
    .p-article__header__title {
        text-align:center;
        --line-height: calc( 68 / 42 )
    }
}

@media screen and (max-width: 1023px) and (min-width:561px) {
    .p-article__header__title {
        font-size:var(--font-size25)
    }
}

@media screen and (max-width: 560px) {
    .p-article__header__title {
        font-size:var(--font-size21)
    }
}

.p-article__header__time {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl
}

@media screen and (min-width: 1024px) {
    .p-article__header__time {
        font-size:var(--font-size14);
        margin-left: 3.4rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__header__time {
        display:none
    }
}

@media screen and (min-width: 1024px) {
    .p-article__body {
        width:calc((850 / 1300) * 100%);
        margin-left: calc((100 / 1300) * 100%)
    }
}

@media screen and (max-width: 1023px) {
    .p-article__body {
        margin-top:9.9rem
    }
}

.p-article__figure {
    position: relative
}

@media screen and (max-width: 1023px) {
    .p-article__figure {
        width:100vw;
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.p-article__figure div {
    position: relative;
    --outside: calc( (100vw - var( --scrollbar-width ) - 100%) / 2 )
}

@media screen and (min-width: 1024px) {
    .p-article__figure div {
        width:calc(100% + var(--outside));
        max-height: calc(100vh - 300px);
        min-height: 57rem;
        margin-left: calc(var(--outside) * -1)
    }
}

.p-article__figure div::after {
    content: '';
    display: block
}

@media screen and (min-width: 1024px) {
    .p-article__figure div::after {
        padding-top:calc((750 / 1175) * 100%)
    }
}

@media screen and (max-width: 1023px) {
    .p-article__figure div::after {
        padding-top:calc((570 / 800) * 100%)
    }
}

@media screen and (min-width: 1024px) {
    .p-article__contents {
        margin-top:20rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__contents {
        margin-top:8rem;
        padding: 0 var(--contents-outside)
    }
}

@media screen and (min-width: 1024px) {
    .p-article__credit {
        margin-top:12rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__credit {
        margin-top:8rem;
        padding: 0 var(--contents-outside)
    }
}

.p-article__credit__title {
    display: flex;
    align-items: center
}

.p-article__credit__title::after {
    content: '';
    display: block;
    flex: 1;
    height: 1px;
    background-color: var(--color-hr)
}

@media screen and (min-width: 1024px) {
    .p-article__credit__title::after {
        margin-left:9.3rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__credit__title::after {
        margin-left:2.3rem
    }
}

@media screen and (min-width: 1024px) {
    .p-article__credit__title img {
        width:10.7rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__credit__title img {
        width:9.6rem
    }
}

.p-article__credit__list {
    font-family: var(--font-gothic);
    font-size: var(--font-size12);
    letter-spacing: calc(150 / 1000 * 1em);
    --line-height: calc( 20 / 12 );
    margin-top: 5rem
}

@media screen and (min-width: 1024px) {
    .p-article__credit__list li+li {
        margin-top:1.2rem
    }
}

@media screen and (max-width: 1023px) {
    .p-article__credit__list li+li {
        margin-top:.7rem
    }
}

@media screen and (min-width: 1024px) {
    .p-cards .p-card {
        width:calc((870 / 910) * 100%)
    }

    .p-cards .p-card:nth-of-type(2n) {
        margin-left: calc((80 / 910) * 100%)
    }
}

@media screen and (min-width: 1024px) {
    .p-cards2 .p-card {
        width:91rem
    }

    .p-cards2 .p-card:nth-of-type(2n) {
        margin-left: 17rem
    }
}

@media screen and (max-width: 1023px) {
    .p-cards2 .p-card:nth-of-type(2n) .p-card__figure-outer {
        position:relative;
        flex-direction: row-reverse
    }

    .p-cards2 .p-card:nth-of-type(2n) .p-card__figure-outer::before {
        content: '';
        display: block;
        width: 12.6rem;
        height: 6.4rem;
        background-image: url(../img/common/illust/apng-cat2.png);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: -6rem;
        right: -1.7rem;
        z-index: 1
    }

    body.ua-ios .p-cards2 .p-card:nth-of-type(2n) .p-card__figure-outer::before,body.ua-ipados .p-cards2 .p-card:nth-of-type(2n) .p-card__figure-outer::before,body.ua-safari .p-cards2 .p-card:nth-of-type(2n) .p-card__figure-outer::before {
        background-image: url(../img/common/illust/apng-cat2-noanime.png)
    }
}

.p-card {
    position: relative
}

.p-card:nth-of-type(5)::before {
    content: '';
    display: block;
    background-image: url(../img/common/illust/apng-cat2.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
    -webkit-transform: scale(-1,1);
    transform: scale(-1,1)
}

body.ua-ios .p-card:nth-of-type(5)::before,body.ua-ipados .p-card:nth-of-type(5)::before,body.ua-safari .p-card:nth-of-type(5)::before {
    background-image: url(../img/common/illust/apng-cat2-noanime.png)
}

@media screen and (min-width: 1024px) {
    .p-card:nth-of-type(5)::before {
        width:15.1rem;
        height: 7.7rem;
        top: -5.7rem;
        left: -4rem
    }
}

@media screen and (min-width: 561px) {
    .p-card a {
        display:flex;
        align-items: flex-start;
        justify-content: space-between
    }
}

@media screen and (max-width: 560px) {
    .p-card a {
        display:block
    }
}

@media (hover: hover) {
    .p-card a:hover {
        color:var(--color-hover)
    }

    .p-card a:hover .p-card__figure img {
        -webkit-filter: blur(2px);
        filter: blur(2px)
    }
}

.p-card__figure-outer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

@media screen and (min-width: 561px) {
    .p-card__figure-outer {
        width:calc((262 / 870) * 100%)
    }
}

.p-card__figure {
    position: relative;
    z-index: 0;
    overflow: hidden
}

@media screen and (min-width: 561px) {
    .p-card__figure {
        width:calc((200 / 260) * 100%)
    }
}

@media screen and (max-width: 560px) {
    .p-card__figure {
        width:calc((550 / 640) * 100%)
    }
}

.p-card__figure img {
    -webkit-filter: blur(0);
    filter: blur(0);
    transition: opacity .2s linear,-webkit-filter var(--transition-hover)!important;
    transition: filter var(--transition-hover),opacity .2s linear!important;
    transition: filter var(--transition-hover),opacity .2s linear,-webkit-filter var(--transition-hover)!important
}

.p-card__time {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl
}

@media screen and (min-width: 1024px) {
    .p-card__time {
        font-size:var(--font-size13)
    }
}

@media screen and (max-width: 1023px) {
    .p-card__time {
        font-size:var(--font-size12);
        margin: 0 .3rem
    }
}

@media screen and (min-width: 561px) {
    .p-card__contents {
        width:calc((560 / 870) * 100%)
    }
}

@media screen and (max-width: 560px) {
    .p-card__contents {
        margin-top:5rem
    }
}

@media screen and (min-width: 1024px) {
    .p-card__title {
        font-size:var(--font-size16);
        --line-height: calc( 28 / 16 )
    }
}

@media screen and (max-width: 1023px) {
    .p-card__title {
        font-size:var(--font-size17);
        --line-height: calc( 56 / 34 )
    }
}

@media screen and (min-width: 1024px) {
    .p-card__txt {
        margin-top:4rem
    }
}

@media screen and (max-width: 1023px) {
    .p-card__txt {
        margin-top:2.9rem
    }
}

.p-card__txt span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5
}

.p-card2 a {
    display: block;
    font-family: var(--font-gothic);
    color: var(--color-link)
}

@media (hover: hover) {
    .p-card2 a:hover {
        color:var(--color-hover)
    }

    .p-card2 a:hover .p-card2__figure img {
        opacity: .2
    }

    .p-card2 a:hover .p-more {
        opacity: 1
    }
}

.p-card2.-type2 a {
    color: var(--color-txt)
}

@media (hover: hover) {
    .p-card2.-type2 a:hover {
        color:var(--color-hover)
    }
}

@media screen and (max-width: 560px) {
    .p-card2.-type2 .p-card2__contents {
        display:block;
        padding: 0
    }

    .p-card2.-type2 .p-card2__title {
        display: block;
        width: 100%;
        max-height: none;
        text-align: center;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        text-decoration: underline;
        text-decoration-thickness: .1rem;
        text-underline-offset: .9rem
    }
}

@media screen and (min-width: 1024px) {
    .p-card2.-type3 {
        width:37rem
    }
}

@media screen and (max-width: 1023px) and (min-width:561px) {
    .p-card2.-type3:nth-of-type(3) {
        display:none
    }
}

.p-card2__figure {
    position: relative;
    background-color: var(--color-bg)
}

.p-card2__figure img {
    transition: opacity var(--transition-hover)
}

.p-card2__figure .p-more {
    color: var(--color-hover);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(.00001deg);
    transform: translate(-50%,-50%) rotate(.00001deg);
    opacity: 0
}

@media screen and (min-width: 561px) {
    .p-card2__contents {
        margin-top:4.4rem
    }
}

@media screen and (max-width: 1023px) and (min-width:561px) {
    .p-card2__contents {
        padding:0 2rem
    }
}

@media screen and (max-width: 560px) {
    .p-card2__contents {
        display:flex;
        justify-content: space-between;
        padding: 0 var(--contents-outside);
        margin-top: 5rem
    }
}

@media screen and (min-width: 561px) {
    .p-card2__title {
        text-decoration:underline;
        text-decoration-thickness: .1rem;
        text-underline-offset: .7rem;
        font-size: var(--font-size14);
        --line-height: calc( 30 / 14 )
    }
}

@media screen and (max-width: 560px) {
    .p-card2__title {
        width:calc((180 / 640) * 100%);
        max-height: 20rem;
        display: flex;
        align-items: center;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: var(--font-size17);
        --line-height: calc( 60 / 34 )
    }
}

@media screen and (min-width: 561px) {
    .p-card2__credit {
        font-size:var(--font-size11);
        --line-height: calc( 20 / 11 );
        margin-top: 3.6rem
    }
}

@media screen and (max-width: 560px) {
    .p-card2__credit {
        width:calc((402 / 640) * 100%);
        font-size: var(--font-size12);
        --line-height: calc( 50 / 24 )
    }
}

@media screen and (min-width: 561px) {
    .p-card2__txt {
        margin-top:4.3rem
    }
}

@media screen and (max-width: 560px) {
    .p-card2__txt {
        margin-top:4.8rem
    }
}

@media screen and (min-width: 561px) {
    .p-card2__button {
        display:none
    }
}

@media screen and (max-width: 560px) {
    .p-card2__button {
        max-width:32rem;
        width: 100%;
        margin: 4.8rem auto 0;
        border-radius: var(--radius-medium);
        border: solid 1px currentColor;
        text-align: center;
        font-size: var(--font-size13);
        letter-spacing: calc(150 / 1000 * 1em);
        padding: 1.4rem 0
    }
}

.p-contact__description {
    font-family: var(--font-gothic)
}

@media screen and (min-width: 1024px) {
    .p-contact__description {
        display:flex;
        align-items: center;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        text-orientation: upright
    }
}

@media screen and (max-width: 1023px) {
    .p-contact__description {
        padding:0 var(--contents-outside)
    }
}

.p-contact__description2 {
    text-align: center
}

@media screen and (min-width: 1024px) {
    .p-contact__description2 {
        margin-top:-12.4rem;
        padding-left: 1rem
    }
}

@media screen and (max-width: 1023px) {
    .p-contact__description2 {
        margin-top:10rem
    }
}

@media screen and (min-width: 1024px) {
    .p-contact__back {
        display:none
    }
}

@media screen and (max-width: 1023px) {
    .p-contact__back {
        width:calc(100% - var(--contents-outside) * 2);
        margin-top: 5rem
    }
}

.p-form {
    position: relative
}

@media screen and (min-width: 1024px) {
    .p-form {
        --dt-width:21.8rem;
        --txtbox-minheight: 7rem
    }
}

@media screen and (max-width: 1023px) {
    .p-form {
        --dt-width:18rem;
        --txtbox-minheight: 5.5rem
    }
}

.p-form__txtbox {
    position: relative;
    width: 100%;
    min-height: var(--txtbox-minheight);
    border-radius: var(--radius-medium);
    border: solid 1px var(--color-form-border);
    background-color: var(--color-form-bg);
    color: var(--color-txt);
    font-family: var(--font-gothic);
    letter-spacing: calc(150 / 1000 * 1em);
    word-break: break-all;
    overflow: hidden
}

@media screen and (min-width: 1024px) {
    .p-form__txtbox {
        font-size:var(--font-size14);
        line-height: calc(26 / 14 * 1em);
        padding: 2rem 3rem
    }
}

@media screen and (max-width: 1023px) {
    .p-form__txtbox {
        font-size:var(--font-size13);
        line-height: calc(44 / 26 * 1em);
        padding: 1rem 2.5rem
    }
}

.p-form__txtbox:-moz-placeholder-shown {
    color: var(--color-form-placeholder)
}

.p-form__txtbox:-ms-input-placeholder {
    color: var(--color-form-placeholder)
}

.p-form__txtbox:placeholder-shown {
    color: var(--color-form-placeholder)
}

.p-form__txtbox:placeholder {
    color: var(--color-form-placeholder)
}

.p-form__txtbox::-webkit-input-placeholder {
    color: var(--color-form-placeholder)
}

.p-form__txtbox:-moz-placeholder {
    opacity: 1;
    color: var(--color-form-placeholder)
}

.p-form__txtbox::-moz-placeholder {
    opacity: 1;
    color: var(--color-form-placeholder)
}

.p-form__txtbox:-ms-input-placeholder {
    color: var(--color-form-placeholder)
}

.p-form__txtbox:focus {
    background-color: var(--color-form-bg-focus)!important;
    border-color: var(--color-form-border-focus)!important
}

.p-form__txtbox--dummy,textarea.p-form__txtbox {
    max-height: 68rem
}

@media screen and (min-width: 1024px) {
    .p-form__txtbox--dummy,textarea.p-form__txtbox {
        height:38rem;
        padding: 2.4rem 3rem
    }
}

@media screen and (max-width: 1023px) {
    .p-form__txtbox--dummy,textarea.p-form__txtbox {
        height:30rem;
        padding: 1.8rem 2.5rem
    }
}

input:-webkit-autofill,option:-webkit-autofill,select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-txt)!important;
    -webkit-box-shadow: 0 0 0 1000px var(--color-form-bg) inset
}

.p-form__txtbox--dummy {
    border-color: var(--color-transp);
    background: var(--color-transp);
    color: var(--color-form-placeholder);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.p-form__txtbox--dummy.is-hidden {
    opacity: 0
}

@media screen and (min-width: 768px) {
    .p-form__illust {
        display:none
    }
}

@media screen and (max-width: 1023px) {
    .p-form__illust {
        width:12.2rem;
        top: -1.8rem;
        right: calc((-14 / 800) * 100%);
        z-index: 1
    }
}

.p-form__table__cell {
    position: relative
}

@media screen and (min-width: 768px) {
    .p-form__table__cell {
        display:flex;
        align-items: flex-start;
        justify-content: space-between
    }
}

@media screen and (min-width: 1024px) {
    .p-form__table__cell+.p-form__table__cell {
        margin-top:5rem
    }
}

@media screen and (max-width: 1023px) {
    .p-form__table__cell+.p-form__table__cell {
        margin-top:2.8rem
    }
}

.p-form__table__cell>dd,.p-form__table__cell>dt {
    line-height: 1
}

@media screen and (min-width: 768px) {
    .p-form__table__cell>dd,.p-form__table__cell>dt {
        min-height:var(--txtbox-minheight)
    }
}

.p-form__table__cell>dt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--dt-width);
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .p-form__table__cell>dt {
        font-size:var(--font-size15)
    }
}

@media screen and (max-width: 1023px) {
    .p-form__table__cell>dt {
        font-size:var(--font-size14)
    }
}

@media screen and (max-width: 767px) {
    .p-form__table__cell>dt {
        margin-bottom:2.5rem;
        margin-left: .8rem
    }
}

.p-form__table__cell>dd {
    flex: 1
}

.p-form__error {
    text-align: right;
    color: var(--color-error);
    font-family: var(--font-gothic);
    font-size: var(--font-size11)
}

@media screen and (min-width: 1024px) {
    .p-form__error {
        position:absolute;
        width: 100%;
        left: 0;
        top: calc(100% + 1.8rem)
    }
}

@media screen and (max-width: 1023px) {
    .p-form__error {
        margin-top:1rem
    }
}

@media screen and (min-width: 768px) {
    .p-form__agree {
        margin-left:var(--dt-width)
    }
}

@media screen and (min-width: 1024px) {
    .p-form__agree {
        margin-top:6rem
    }
}

@media screen and (max-width: 1023px) {
    .p-form__agree {
        margin-top:7.1rem
    }
}

.p-form__agree small {
    display: block;
    color: var(--color-main);
    font-family: var(--font-gothic);
    font-size: var(--font-size12);
    --line-height: calc( 44 / 24 );
    letter-spacing: calc(50 / 1000 * 1em)
}

@media screen and (max-width: 767px) {
    .p-form__agree small {
        text-align:center
    }
}

.p-form__button {
    position: relative
}

@media screen and (min-width: 768px) {
    .p-form__button {
        margin-left:var(--dt-width)
    }
}

@media screen and (min-width: 1024px) {
    .p-form__button {
        margin-top:5.4rem
    }
}

@media screen and (max-width: 1023px) {
    .p-form__button {
        margin-top:4rem
    }
}

.p-form__button.is-disabled a {
    cursor: not-allowed;
    opacity: .3;
    pointer-events: none
}

.p-form__check {
    max-width: 80rem
}

@media screen and (max-width: 767px) {
    .p-form__check {
        width:calc(100% - var(--contents-outside) * 2)
    }
}

.p-hero {
    position: relative
}

.p-hero__inner {
    display: flex;
    justify-content: flex-end
}

@media screen and (max-width: 1023px) {
    .p-hero__inner {
        padding-right:var(--contents-outside)
    }
}

.p-hero__title {
    position: relative;
    text-align: center
}

@media screen and (min-width: 1024px) {
    .p-hero__title {
        width:18rem
    }
}

@media screen and (max-width: 1023px) {
    .p-hero__title {
        width:10rem;
        width: 11.6rem
    }
}

.p-hero__title.-type2::before {
    content: '';
    display: block;
    background-image: url(../img/common/illust/apng-cat2.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1
}

body.ua-ios .p-hero__title.-type2::before,body.ua-ipados .p-hero__title.-type2::before,body.ua-safari .p-hero__title.-type2::before {
    background-image: url(../img/common/illust/apng-cat2-noanime.png)
}

@media screen and (min-width: 1024px) {
    .p-hero__title.-type2::before {
        width:14.8rem;
        height: 7.5rem;
        top: -6.7rem;
        left: 3.5rem
    }
}

@media screen and (max-width: 1023px) {
    .p-hero__title.-type2::before {
        width:10.2rem;
        height: 5.2rem;
        top: -4.6rem;
        left: 2.1rem
    }
}

@media screen and (min-width: 1024px) {
    .p-hero__title [src*=about] {
        width:9rem
    }
}

@media screen and (max-width: 1023px) {
    .p-hero__title [src*=about] {
        width:6.4rem
    }
}

@media screen and (min-width: 1024px) {
    .p-hero__title [src*=works] {
        width:8.1rem
    }
}

@media screen and (max-width: 1023px) {
    .p-hero__title [src*=works] {
        width:6.4rem
    }
}

@media screen and (min-width: 1024px) {
    .p-hero__title [src*=blog] {
        width:7.9rem
    }
}

@media screen and (max-width: 1023px) {
    .p-hero__title [src*=blog] {
        width:6rem
    }
}

@media screen and (min-width: 1024px) {
    .p-hero__title [src*=contact] {
        width:7.9rem
    }
}

@media screen and (max-width: 1023px) {
    .p-hero__title [src*=contact] {
        width:5.6rem
    }
}

.p-more {
    position: relative;
    display: block;
    transition: opacity var(--transition-hover)
}

.p-more svg {
    display: block
}

.p-more .c-line {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.p-more.-type1 {
    --txt-width: 8.8rem;
    --txt-height: 1.5rem;
    padding-bottom: 1.7rem
}

@media screen and (min-width: 1024px) {
    .p-more.-type2 {
        --txt-width:8.3rem;
        --txt-height: 1.4rem;
        padding-bottom: 1.7rem
    }
}

@media screen and (max-width: 1023px) {
    .p-more.-type2 {
        --txt-width:9rem;
        --txt-height: 1.5rem;
        padding-bottom: 1.9rem
    }
}

.p-more.-type3 {
    --txt-width: 12.5rem;
    --txt-height: 1.5rem;
    padding-bottom: 1.8rem
}

.p-more.-type4 {
    --txt-width: 8.8rem;
    --txt-height: 1.5rem;
    padding-bottom: 1.8rem
}

.p-more__txt {
    width: var(--txt-width);
    height: var(--txt-height);
    margin: 0 auto
}

.p-more-circle {
    width: var(--circle-size);
    height: var(--circle-size)
}

@media screen and (min-width: 1024px) {
    .p-more-circle {
        --circle-size:16rem
    }
}

@media screen and (max-width: 1023px) {
    .p-more-circle {
        --circle-size:20rem
    }
}

.p-more-circle.-type2 a {
    background-color: rgba(var(--pallet-white--rgb),.9)
}

@media screen and (min-width: 1024px) {
    .p-more-circle.-large {
        --circle-size:22.2rem
    }
}

@media screen and (max-width: 1023px) {
    .p-more-circle.-large {
        --circle-size:20rem
    }
}

.p-more-circle a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: solid 1px currentColor;
    background-color: var(--pallet-white);
    color: var(--color-link)
}

@media (hover: hover) {
    .p-more-circle a:hover {
        color:var(--color-hover)
    }
}

@media screen and (min-width: 1024px) {
    .p-pagination {
        margin-top:9.8rem
    }
}

@media screen and (max-width: 1023px) {
    .p-pagination {
        margin-top:8.8rem
    }
}

.p-pagination__list {
    display: flex;
    align-items: center
}

@media screen and (max-width: 1023px) {
    .p-pagination__list {
        justify-content:center
    }
}

@media screen and (min-width: 1024px) {
    .p-pagination__list li+li {
        margin-left:1rem
    }
}

@media screen and (max-width: 1023px) {
    .p-pagination__list li+li {
        margin-left:1.5rem
    }
}

.p-pagination__list li.-next a,.p-pagination__list li.-prev a {
    letter-spacing: calc(-100 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .p-pagination__list li.-prev {
        margin-left:-2rem
    }
}

@media screen and (max-width: 767px) {
    .p-pagination__list li.-prev {
        margin-right:auto
    }
}

@media screen and (max-width: 767px) {
    .p-pagination__list li.-next {
        margin-left:auto
    }
}

.p-pagination__list a {
    display: block;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

@media screen and (min-width: 561px) {
    .p-pagination__list a {
        font-size:var(--font-size16)
    }
}

@media screen and (min-width: 1024px) {
    .p-pagination__list a {
        min-width:5rem;
        min-height: 4rem
    }
}

@media screen and (max-width: 1023px) {
    .p-pagination__list a {
        min-width:4.5rem;
        min-height: 3.5rem
    }
}

@media screen and (max-width: 560px) {
    .p-pagination__list a {
        font-size:var(--font-size15)
    }
}

.p-pagination__list a.is-current {
    pointer-events: none;
    background-image: url(../img/common/handwritten/circle.svg);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat
}

@media (hover: hover) {
    .p-pagination__list a:hover {
        color:var(--color-hover)
    }
}

.p-pagination__ellipsis {
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (min-width: 1024px) {
    .p-pagination__ellipsis {
        padding:1rem
    }
}

@media screen and (max-width: 1023px) {
    .p-pagination__ellipsis {
        margin-left:0!important;
        margin-right: -1.5rem!important
    }
}

@media screen and (min-width: 1024px) {
    .p-pagination2 {
        margin-top:28.4rem
    }
}

@media screen and (max-width: 1023px) {
    .p-pagination2 {
        margin-top:17.3rem
    }
}

.p-pagination2__inner {
    position: relative
}

@media screen and (min-width: 1024px) {
    .p-pagination2__inner {
        padding:0 calc((100 / 1300) * 100%) 20rem
    }
}

@media screen and (max-width: 1023px) {
    .p-pagination2__inner {
        padding-bottom:13.6rem
    }
}

.p-pagination2__index {
    position: relative;
    z-index: 10
}

@media screen and (max-width: 1023px) {
    .p-pagination2__index {
        text-align:center
    }
}

.p-pagination2__index a {
    display: inline-block;
    background-color: var(--color-bg);
    text-decoration: underline;
    text-decoration-thickness: .1rem;
    text-underline-offset: .3rem;
    letter-spacing: calc(150 / 1000 * 1em);
    padding: 1rem 0;
    margin: -1rem 0
}

@media screen and (min-width: 1024px) {
    .p-pagination2__index a {
        font-size:var(--font-size16)
    }
}

@media screen and (max-width: 1023px) {
    .p-pagination2__index a {
        font-size:var(--font-size15)
    }
}

@media (hover: hover) {
    .p-pagination2__index a:hover {
        color:var(--color-hover)
    }
}

.p-pagination2__illust {
    z-index: 1
}

@media screen and (min-width: 1024px) {
    .p-pagination2__illust {
        width:45.1rem;
        left: -10.7rem;
        bottom: -1.4rem;
        -webkit-transform: scale(-1,1);
        transform: scale(-1,1)
    }
}

@media screen and (max-width: 1023px) {
    .p-pagination2__illust {
        width:32.6rem;
        bottom: -1.2rem;
        left: 54.5%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.s-editor {
    font-family: var(--font-gothic);
    word-break: break-all;
    word-wrap: break-word;
    line-height: calc(var(--line-height) * 1em)
}

@media screen and (min-width: 561px) {
    .s-editor {
        font-size:var(--font-size14);
        --line-height: calc( 30 / 14 )
    }
}

@media screen and (max-width: 560px) {
    .s-editor {
        font-size:var(--font-size13);
        --line-height: calc( 50 / 26 )
    }
}

.s-editor :first-child {
    margin-top: 0
}

@media screen and (min-width: 1024px) {
    .s-editor *+ol,.s-editor *+p,.s-editor *+table,.s-editor *+ul {
        margin-top:5rem
    }
}

@media screen and (max-width: 1023px) {
    .s-editor *+ol,.s-editor *+p,.s-editor *+table,.s-editor *+ul {
        margin-top:4rem
    }
}

@media screen and (min-width: 1024px) {
    .s-editor *+blockquote {
        margin-top:6rem
    }
}

@media screen and (max-width: 1023px) {
    .s-editor *+blockquote {
        margin-top:4rem
    }
}

.s-editor h2,.s-editor h3 {
    line-height: calc(var(--line-height) * 1em);
    padding-top: .01px;
    padding-bottom: .01px
}

.s-editor h2::after,.s-editor h2::before,.s-editor h3::after,.s-editor h3::before {
    content: '';
    display: block;
    width: 0;
    height: 0
}

.s-editor h2::before,.s-editor h3::before {
    margin-top: calc((1 - var(--line-height)) * .5em)
}

.s-editor h2::after,.s-editor h3::after {
    margin-bottom: calc((1 - var(--line-height)) * .5em)
}

@media screen and (min-width: 1024px) {
    .s-editor h2,.s-editor h3 {
        --line-height:calc( 38 / 20 );
        margin-top: 12rem
    }
}

@media screen and (max-width: 1023px) {
    .s-editor h2,.s-editor h3 {
        --line-height:calc( 58 / 34 );
        margin-top: 8rem
    }
}

@media screen and (min-width: 1024px) {
    .s-editor h2 {
        font-size:var(--font-size20)
    }
}

@media screen and (max-width: 1023px) {
    .s-editor h2 {
        font-size:var(--font-size17)
    }
}

.s-editor h3 {
    border-left: solid 2px;
    padding-left: 2rem;
    padding-bottom: .2rem
}

@media screen and (min-width: 1024px) {
    .s-editor h3 {
        font-size:var(--font-size16)
    }
}

@media screen and (max-width: 1023px) {
    .s-editor h3 {
        font-size:var(--font-size14)
    }
}

.s-editor ol,.s-editor p,.s-editor ul {
    line-height: calc(var(--line-height) * 1em);
    padding-top: .01px;
    padding-bottom: .01px
}

.s-editor ol::after,.s-editor ol::before,.s-editor p::after,.s-editor p::before,.s-editor ul::after,.s-editor ul::before {
    content: '';
    display: block;
    width: 0;
    height: 0
}

.s-editor ol::before,.s-editor p::before,.s-editor ul::before {
    margin-top: calc((1 - var(--line-height)) * .5em)
}

.s-editor ol::after,.s-editor p::after,.s-editor ul::after {
    margin-bottom: calc((1 - var(--line-height)) * .5em)
}

.s-editor a {
    text-decoration: underline;
    text-decoration-thickness: .1rem;
    text-underline-offset: .7rem;
    color: var(--color-link)
}

@media (hover: hover) {
    .s-editor a:hover {
        text-decoration:none;
        color: var(--color-hover)
    }

    .s-editor a:hover img {
        opacity: .6
    }
}

.s-editor b,.s-editor strong {
    font-weight: 700
}

.s-editor em {
    font-style: italic
}

.s-editor i {
    font-style: italic
}

.s-editor iframe,.s-editor img {
    max-width: 100%
}

@media screen and (min-width: 1024px) {
    .s-editor figure {
        margin-top:11.8rem
    }
}

@media screen and (max-width: 1023px) {
    .s-editor figure {
        margin-top:8rem;
        text-align: center
    }
}

@media screen and (min-width: 1024px) {
    .s-editor figure+figure {
        margin-top:3rem
    }
}

@media screen and (max-width: 1023px) {
    .s-editor figure+figure {
        margin-top:2rem
    }
}

.s-editor .s-editor__caption {
    --line-height: calc( 20 / 12 );
    line-height: calc(var(--line-height) * 1em);
    padding-top: .01px;
    padding-bottom: .01px
}

.s-editor .s-editor__caption::after,.s-editor .s-editor__caption::before {
    content: '';
    display: block;
    width: 0;
    height: 0
}

.s-editor .s-editor__caption::before {
    margin-top: calc((1 - var(--line-height)) * .5em)
}

.s-editor .s-editor__caption::after {
    margin-bottom: calc((1 - var(--line-height)) * .5em)
}

@media screen and (min-width: 1024px) {
    .s-editor .s-editor__caption {
        font-size:var(--font-size12);
        margin-top: 4rem
    }
}

@media screen and (max-width: 1023px) {
    .s-editor .s-editor__caption {
        font-size:var(--font-size11);
        margin-top: 3rem
    }
}

.s-editor ul {
    list-style-type: disc
}

.s-editor ol {
    list-style-type: decimal
}

.s-editor blockquote {
    border-radius: var(--radius-medium);
    background-color: var(--color-bg2);
    font-size: var(--font-size12);
    --line-height: calc( 24 / 12 );
    line-height: calc(var(--line-height) * 1em);
    padding-top: .01px;
    padding-bottom: .01px
}

.s-editor blockquote::after,.s-editor blockquote::before {
    content: '';
    display: block;
    width: 0;
    height: 0
}

.s-editor blockquote::before {
    margin-top: calc((1 - var(--line-height)) * .5em)
}

.s-editor blockquote::after {
    margin-bottom: calc((1 - var(--line-height)) * .5em)
}

@media screen and (min-width: 1024px) {
    .s-editor blockquote {
        padding:4rem
    }
}

@media screen and (max-width: 1023px) {
    .s-editor blockquote {
        padding:3rem 2.5rem
    }
}

.l-blur {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    background-color: var(--color-bg2);
    overflow: hidden
}

@media screen and (min-width: 1024px) {
    .l-blur {
        height:82.4rem
    }
}

@media screen and (max-width: 1023px) {
    .l-blur {
        height:50rem
    }
}

.l-blur::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat
}

@media screen and (min-width: 1024px) {
    .l-blur::before {
        background-image:url(../img/common/blur_gradation-pc.png)
    }
}

@media screen and (max-width: 1023px) {
    .l-blur::before {
        background-image:url(../img/common/blur_gradation-sp.png)
    }
}

.l-blur__inner {
    width: 100%;
    height: 100%;
    background-image: url(../img/common/blur_txt.png);
    background-position: 50% 0;
    background-repeat: repeat;
    opacity: .9
}

@media screen and (min-width: 1024px) {
    .l-blur__inner {
        background-size:164.3rem 101rem
    }
}

@media screen and (max-width: 1023px) {
    .l-blur__inner {
        background-size:82.15rem 50.5rem
    }
}

.l-footer {
    position: relative;
    background-color: var(--color-bg2);
    overflow: hidden
}

@media screen and (min-width: 1024px) {
    .l-footer {
        padding:19.8rem 0 14.6rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer {
        padding:0 0 10rem
    }
}

@media screen and (max-width: 1023px) and (min-width:561px) {
    .l-footer {
        padding-top:10rem
    }
}

.l-footer.-type2 .l-footer__blur {
    display: none
}

@media screen and (min-width: 1024px) {
    .l-footer.-type2 {
        --jutting:6rem;
        width: 170rem;
        min-width: 170rem;
        width: calc(100vw + var(--jutting));
        padding: 0 9.5rem 0 30rem;
        --padding-bottom: 10
    }

    .l-footer.-type2::before {
        content: '';
        display: block;
        width: var(--jutting);
        height: 100%;
        z-index: 0;
        background-color: var(--color-bg);
        position: absolute;
        top: 0;
        left: 0
    }

    .l-footer.-type2 .l-footer__inner {
        max-width: 100%;
        width: 100%
    }

    .l-footer.-type2 .l-footer__contents {
        padding-top: 2.2rem
    }

    .l-footer.-type2 .l-footer__figure2 {
        left: -30rem;
        bottom: 2.9rem
    }

    .l-footer.-type2 .l-footer__illust-1 {
        -webkit-transform: none;
        transform: none;
        left: 28rem;
        bottom: 1.1rem
    }

    .l-footer.-type2 .l-footer__illust-2 {
        display: none
    }

    .l-footer.-type2 .l-footer__sns {
        top: 1.8rem;
        right: 11rem
    }

    .l-footer.-type2 .l-footer__copyright {
        margin-top: 13.5rem
    }
}

@media screen and (min-width: 1024px) {
    .l-footer__blur {
        position:absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__blur {
        display:none
    }
}

.l-footer__blur::before {
    content: '';
    display: block;
    width: 100%;
    height: 73.3rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-image: url(../img/common/blur_gradation2.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat
}

.l-footer__blur__left,.l-footer__blur__right {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute
}

.l-footer__blur__left {
    width: 49.8rem;
    height: 53.6rem;
    background-image: url(../img/common/blur_txt2.png);
    top: 0;
    left: 0
}

.l-footer__blur__left::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/common/blur_gradation3.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1
}

.l-footer__blur__right {
    width: 50.2rem;
    height: 30.6rem;
    background-image: url(../img/common/blur_txt3.png);
    right: -.1rem;
    bottom: -14.1rem
}

.l-footer__inner {
    position: relative
}

.l-footer__flex {
    position: relative
}

@media screen and (min-width: 1024px) {
    .l-footer__flex {
        display:flex;
        align-items: flex-start;
        justify-content: space-between
    }
}

@media screen and (min-width: 561px) {
    .l-footer__figure {
        height:38rem
    }
}

@media screen and (min-width: 1024px) {
    .l-footer__figure {
        width:calc((600 / 1300) * 100%)
    }
}

@media screen and (max-width: 1023px) and (min-width:561px) {
    .l-footer__figure {
        margin:0 var(--contents-outside)
    }
}

@media screen and (max-width: 560px) {
    .l-footer__figure {
        width:100vw;
        height: 50rem;
        margin-left: calc(var(--contents-outside) * -1);
        border-radius: 0
    }
}

.l-footer__figure::after {
    content: '';
    display: block
}

@media screen and (min-width: 561px) {
    .l-footer__figure::after {
        padding-top:calc((380 / 600) * 100%)
    }
}

@media screen and (max-width: 560px) {
    .l-footer__figure::after {
        padding-top:calc((500 / 400) * 100%)
    }
}

@media screen and (min-width: 1024px) {
    .l-footer__contents {
        width:calc((610 / 1300) * 100%);
        padding-top: 5.2rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__contents {
        margin-top:10rem
    }

    .l-footer__contents::after::after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        line-height: 0;
        visibility: hidden
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__contents__inner {
        margin-top:3.5rem;
        clear: left
    }
}

@media screen and (min-width: 1024px) {
    .l-footer__name-ja {
        width:9.2rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__name-ja {
        width:10.2rem
    }
}

.l-footer__name-ja img {
    width: 100%
}

@media screen and (min-width: 1024px) {
    .l-footer__name-en {
        display:none
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__name-en {
        font-size:var(--font-size13);
        letter-spacing: calc(80 / 1000 * 1em);
        margin-top: 1.8rem
    }
}

.l-footer__txt {
    white-space: normal
}

@media screen and (min-width: 1024px) {
    .l-footer__txt {
        margin-top:7rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__txt {
        margin-top:5.1rem
    }
}

@media screen and (min-width: 1024px) {
    .l-footer__figure2 {
        width:38rem;
        position: absolute;
        left: -25rem;
        bottom: -.5rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__figure2 {
        display:none
    }
}

@media screen and (min-width: 561px) {
    .l-footer__figures {
        display:none
    }
}

@media screen and (max-width: 560px) {
    .l-footer__figures {
        display:flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100vw;
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        margin-top: 8.5rem
    }

    .l-footer__figures figure:nth-of-type(1) {
        width: calc((460 / 800) * 100%)
    }

    .l-footer__figures figure:nth-of-type(2) {
        width: calc((310 / 800) * 100%);
        margin-top: calc((108 / 800) * 100%)
    }
}

.l-footer__sns {
    display: flex;
    justify-content: center
}

@media screen and (min-width: 1024px) {
    .l-footer__sns {
        position:absolute;
        top: 5rem;
        right: 0
    }
}

@media screen and (min-width: 1350px) {
    .l-footer__sns {
        right:10.4rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__sns {
        margin-top:7.5rem
    }
}

.l-footer__sns li.-instagram {
    --icon-width: 1.8rem;
    --icon-height: 1.8rem
}

.l-footer__sns li.-twitter {
    --icon-width: 1.8rem;
    --icon-height: 1.4rem
}

.l-footer__sns li.-facebook {
    --icon-width: 0.7rem;
    --icon-height: 1.7rem
}

@media screen and (min-width: 1024px) {
    .l-footer__sns li+li {
        margin-left:2.8rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__sns li+li {
        margin-left:2rem
    }
}

.l-footer__sns a {
    display: flex;
    align-items: center
}

@media (hover: hover) {
    .l-footer__sns a:hover {
        color:var(--color-hover)
    }

    .l-footer__sns a:hover .l-footer__sns__icon {
        -webkit-animation: hover-icon var(--animation-icon) infinite;
        animation: hover-icon var(--animation-icon) infinite
    }
}

.l-footer__sns svg {
    width: var(--icon-width);
    height: var(--icon-height)
}

.l-footer__sns__txt {
    border-bottom: solid 1px currentColor;
    font-family: var(--font-gothic);
    font-size: var(--font-size11);
    letter-spacing: calc(50 / 1000 * 1em);
    margin-left: .9rem;
    padding: .5rem .1rem
}

.l-footer__copyright {
    width: 24.7rem;
    margin: 0 auto
}

@media screen and (min-width: 1024px) {
    .l-footer__copyright {
        margin-top:12.2rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__copyright {
        margin-top:4.1rem
    }
}

.l-footer__illust-1 {
    z-index: 10
}

@media screen and (min-width: 561px) {
    .l-footer__illust-1 {
        left:calc(50% - 61.8rem);
        bottom: 0
    }
}

@media screen and (min-width: 1024px) {
    .l-footer__illust-1 {
        width:19.8rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__illust-1 {
        width:12.4rem
    }
}

@media screen and (max-width: 1023px) and (min-width:561px) {
    .l-footer__illust-1 {
        display:none
    }
}

@media screen and (max-width: 560px) {
    .l-footer__illust-1 {
        float:right;
        margin-top: -3.5rem;
        margin-right: .6rem;
        margin-left: 2.7rem;
        margin-bottom: 5rem
    }
}

.l-footer__illust-2 {
    z-index: 10
}

@media screen and (min-width: 1024px) {
    .l-footer__illust-2 {
        width:25.3rem;
        left: calc(50% + 40rem);
        bottom: 0
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__illust-2 {
        display:none
    }
}

@media screen and (min-width: 1024px) {
    .l-footer__figure3 {
        width:38rem;
        position: absolute;
        right: 0;
        bottom: 2rem
    }

    .l-footer__figure3 img {
        border-radius: var(--radius-medium) 0 0 0
    }

    .l-footer__figure3::before {
        content: '';
        display: block;
        width: 15.1rem;
        height: 7.8rem;
        background-image: url(../img/common/illust/apng-cat2.png);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: -7.2rem;
        left: 2rem
    }

    body.ua-ios .l-footer__figure3::before,body.ua-ipados .l-footer__figure3::before,body.ua-safari .l-footer__figure3::before {
        background-image: url(../img/common/illust/apng-cat2-noanime.png)
    }
}

@media screen and (max-width: 1023px) {
    .l-footer__figure3 {
        display:none
    }
}

.l-footer2 {
    background-color: var(--color-bg)
}

@media screen and (min-width: 1024px) {
    .l-footer2 {
        padding:15rem 0 18rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer2 {
        padding:10.8rem 0 11.5rem
    }
}

.l-footer2__nav ul {
    display: flex;
    align-items: center;
    justify-content: center
}

.l-footer2__nav li {
    --txt-height: 1.5rem
}

@media screen and (min-width: 1024px) {
    .l-footer2__nav li+li {
        margin-left:4rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer2__nav li+li {
        margin-left:3rem
    }
}

.l-footer2__nav li.-about {
    --txt-width: 1.5rem
}

.l-footer2__nav li.-abuku {
    --txt-width: 1.5rem
}

.l-footer2__nav li.-works {
    --txt-width: 3.3rem
}

.l-footer2__nav li.-blog {
    --txt-width: 2.9rem
}

.l-footer2__nav li.-contact {
    --txt-width: 1.3rem
}

.l-footer2__nav a {
    display: block
}

@media (hover: hover) {
    .l-footer2__nav a:hover {
        color:var(--color-hover)
    }
}

.l-footer2__nav svg {
    width: var(--txt-width);
    height: var(--txt-height)
}

.l-footer2__copyright {
    margin: 0 auto
}

@media screen and (min-width: 1024px) {
    .l-footer2__copyright {
        width:28.4rem;
        margin-top: 5rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer2__copyright {
        width:26.6rem;
        margin-top: 3rem
    }
}

.l-footer2__copyright img {
    width: 100%
}

.l-footer3 {
    position: relative;
    background-color: var(--color-bg2)
}

@media screen and (min-width: 1024px) {
    .l-footer3 {
        height:22rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer3 {
        height:20rem
    }
}

.l-footer3__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

@media screen and (min-width: 1024px) {
    .l-footer3__inner {
        padding-top:2rem
    }
}

.l-footer3__illust {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media screen and (min-width: 1024px) {
    .l-footer3__illust {
        width:35.7rem;
        top: -16rem
    }
}

@media screen and (max-width: 1023px) {
    .l-footer3__illust {
        width:26.3rem;
        top: -12.2rem
    }
}

@media screen and (min-width: 1024px) {
    .l-footer3__illust img {
        -webkit-transform:translateX(.4rem);
        transform: translateX(.4rem)
    }
}

@media screen and (max-width: 1023px) {
    .l-footer3__illust img {
        -webkit-transform:translateX(.2rem);
        transform: translateX(.2rem)
    }
}

.l-footer3__copyright {
    max-width: 24.6rem;
    width: 100%;
    margin: 0 auto
}

.l-footer3__copyright img {
    width: 100%
}

.l-header {
    position: absolute;
    z-index: var(--z-index-l-header);
    width: 100%
}

@media screen and (min-width: 1024px) {
    .l-header.-type2 .l-header__inner {
        position:fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: var(--z-index-l-header);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-sticky);
        transition-property: opacity,visibility;
        pointer-events: none
    }

    body.is-header-sticky .l-header.-type2 .l-header__inner {
        opacity: 1;
        visibility: visible
    }

    .l-header.-type2 .l-header__nav {
        display: none
    }

    .l-header.-type2 .c-logo,.l-header.-type2 .c-online {
        pointer-events: auto
    }
}

@media screen and (max-width: 1023px) {
    .l-header.-type2 .l-header__inner .c-logo {
        display:none
    }

    .l-header.-type2 .l-header__inner .c-online {
        position: fixed;
        top: 3rem;
        left: calc(var(--contents-outside) * 2);
        margin-top: 0
    }

    .l-header.-type2 .l-header__button,.l-header.-type2 .l-header__inner .c-online {
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-sticky);
        transition-property: opacity,visibility
    }

    body.is-header-sticky .l-header.-type2 .l-header__button,body.is-header-sticky .l-header.-type2 .l-header__inner .c-online {
        opacity: 1;
        visibility: visible
    }
}

@media screen and (min-width: 1024px) {
    .l-header.-type3 {
        position:sticky;
        top: 0;
        left: 0;
        width: 100vw;
        will-change: transform
    }

    .l-header.-type3 * {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }
}

@media screen and (max-width: 1023px) {
    .l-header.-type3 .l-header__inner .c-logo,.l-header.-type3 .l-header__inner .c-online {
        display:none
    }

    .l-header.-type3 .l-header__button {
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-sticky);
        transition-property: opacity,visibility
    }

    body.is-header-sticky .l-header.-type3 .l-header__button {
        opacity: 1;
        visibility: visible
    }
}

@media screen and (min-width: 1024px) {
    .l-header .c-online {
        margin-top:.6rem
    }
}

@media screen and (max-width: 1023px) {
    .l-header .c-online {
        margin-top:3.8rem
    }
}

.l-header__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

@media screen and (min-width: 1024px) {
    .l-header__inner {
        padding:10rem 10rem 0
    }
}

@media screen and (max-width: 1023px) {
    .l-header__inner {
        padding:4rem calc(var(--contents-outside) * 2) 0
    }
}

@media screen and (max-width: 1023px) {
    .l-header__inner .c-logo {
        margin-left:-.1rem
    }
}

@media screen and (min-width: 1024px) {
    .l-header__nav {
        width:100%;
        position: absolute;
        top: 11.2rem;
        left: 0;
        pointer-events: none
    }
}

@media screen and (max-width: 1023px) {
    .l-header__nav {
        position:fixed;
        top: 0;
        right: 0;
        z-index: var(--z-index-l-header__nav);
        width: 100%;
        height: 100%;
        background-color: var(--color-bg3);
        overflow: auto;
        padding-bottom: 10rem;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-modal);
        transition-property: opacity,visibility
    }

    .l-header__nav.is-open {
        opacity: 1;
        visibility: visible
    }
}

@media screen and (min-width: 1024px) {
    .l-header__nav__header {
        display:none
    }
}

@media screen and (max-width: 1023px) {
    .l-header__nav__header {
        display:flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 4rem calc(var(--contents-outside) * 2) 0
    }
}

@media screen and (min-width: 1024px) {
    .l-header__nav__illust {
        display:none
    }
}

@media screen and (max-width: 1023px) {
    .l-header__nav__illust {
        width:12.1rem;
        position: absolute;
        z-index: 1;
        top: 16.4rem;
        right: calc((26 / 800) * 100%)
    }
}

@media screen and (min-width: 1024px) {
    .l-header__nav__main {
        display:flex;
        align-items: center;
        justify-content: center
    }
}

@media screen and (max-width: 1023px) {
    .l-header__nav__main {
        position:relative;
        margin-top: 6.7rem
    }

    .l-header__nav__main::after,.l-header__nav__main::before {
        content: '';
        display: block;
        width: 1rem;
        height: 1px;
        background-color: var(--color-bg3);
        position: absolute;
        z-index: 1
    }

    .l-header__nav__main::before {
        top: 0;
        left: calc((110 / 800) * 100%)
    }

    .l-header__nav__main::after {
        right: calc((110 / 800) * 100%);
        bottom: 6.9rem
    }
}

@media screen and (min-width: 1024px) {
    .l-header__nav__main li+li {
        margin-left:6rem
    }
}

@media screen and (max-width: 1023px) {
    .l-header__nav__main li:nth-of-type(2n-1) a::before {
        right:0
    }

    .l-header__nav__main li:nth-of-type(2n) a::before {
        left: 0
    }

    .l-header__nav__main li:first-of-type a::before,.l-header__nav__main li:last-of-type a::before {
        width: calc((640 / 800) * 100%);
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.l-header__nav__main a {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-link);
    pointer-events: auto
}

@media (hover: hover) {
    .l-header__nav__main a:hover {
        color:var(--color-hover)
    }
}

@media screen and (min-width: 1024px) {
    .l-header__nav__main a {
        margin-top:-2.3rem;
        padding: 2.3rem 0
    }
}

@media screen and (max-width: 1023px) {
    .l-header__nav__main a {
        justify-content:space-between;
        height: 7rem;
        padding: 0 calc((130 / 800) * 100%) 0 calc((120 / 800) * 100%)
    }

    .l-header__nav__main a::before {
        content: '';
        width: calc((700 / 800) * 100%);
        height: 1px;
        background-color: currentColor;
        position: absolute;
        top: 0
    }
}

.l-header__nav__main .c-line {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.l-header__nav__main__ja.-watachi {
    --txt-width: 2.1rem;
    --txt-height: 2rem
}

.l-header__nav__main__ja.-abuku {
    --txt-width: 2.1rem;
    --txt-height: 2rem
}

.l-header__nav__main__ja.-shigoto {
    --txt-width: 4.6rem;
    --txt-height: 2rem
}

.l-header__nav__main__ja.-nikki {
    --txt-width: 4rem;
    --txt-height: 2rem
}

.l-header__nav__main__ja.-toi {
    --txt-width: 1.8rem;
    --txt-height: 2rem
}

.l-header__nav__main__ja svg {
    --txt-ratio: calc(19 / 21)
}

@media screen and (min-width: 1024px) {
    .l-header__nav__main__ja svg {
        width:var(--txt-width);
        height: var(--txt-height)
    }
}

@media screen and (max-width: 1023px) {
    .l-header__nav__main__ja svg {
        width:calc(var(--txt-width) * var(--txt-ratio));
        height: calc(var(--txt-height) * var(--txt-ratio))
    }
}

.l-header__nav__main__en {
    font-family: var(--font-gothic);
    font-size: var(--font-size10);
    letter-spacing: calc(150 / 1000 * 1em)
}

@media screen and (min-width: 1024px) {
    .l-header__nav__main__en {
        margin-left:2.9rem
    }
}

@media screen and (min-width: 1024px) {
    .l-header__nav__footer {
        display:none
    }
}

.l-header__nav__copyright {
    margin-top: 5rem
}

.l-header__nav__copyright svg {
    display: block;
    width: 24.6rem;
    height: 1.4rem;
    margin: 0 auto;
    color: var(--color-main)
}

@media screen and (min-width: 1024px) {
    .l-header__button {
        display:none
    }
}

@media screen and (max-width: 1023px) {
    .l-header__button {
        width:10rem;
        position: fixed;
        top: 4rem;
        right: calc(var(--contents-outside) * 2);
        z-index: var(--z-index-l-header__button);
        padding: 1rem 0;
        margin: -1rem 0
    }
}

.l-header__button.is-open {
    opacity: 1!important;
    visibility: visible!important
}

.l-header__visible-position {
    pointer-events: none;
    position: absolute;
    left: 0
}

@media screen and (min-width: 1024px) {
    .l-header__visible-position {
        top:113rem
    }
}

@media screen and (max-width: 1023px) {
    .l-header__visible-position {
        top:62rem
    }
}

body:not(.is-scroll) {
    overflow: hidden!important;
    height: 100vh!important
}

.l-loading {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-bg);
    z-index: var(--z-index-l-loading)
}

.l-loading.is-hidden {
    opacity: 0;
    pointer-events: none
}

body.is-transition .l-loading {
    opacity: 1!important;
    pointer-events: auto!important;
    transition: opacity var(--transition-transition-out)!important
}

body.is-load .l-loading {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-transition-in)
}

.u-ib {
    display: inline-block
}

.u-inline {
    display: inline
}

.u-block {
    display: block
}

.u-n {
    display: none
}

.u-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10000000000000
}

@media screen and (min-width: 1281px) {
    .u-n-mqUp-xl {
        display:none!important
    }
}

@media screen and (min-width: 1024px) {
    .u-n-mqUp-lg {
        display:none!important
    }
}

@media screen and (min-width: 768px) {
    .u-n-mqUp-md {
        display:none!important
    }
}

@media screen and (min-width: 561px) {
    .u-n-mqUp-sm {
        display:none!important
    }
}

@media screen and (min-width: 415px) {
    .u-n-mqUp-xs {
        display:none!important
    }
}

@media screen and (min-width: 401px) {
    .u-n-mqUp-xxs {
        display:none!important
    }
}

@media screen and (max-width: 1280px) {
    .u-n-mqDown-xl {
        display:none!important
    }
}

@media screen and (max-width: 1023px) {
    .u-n-mqDown-lg {
        display:none!important
    }
}

@media screen and (max-width: 767px) {
    .u-n-mqDown-md {
        display:none!important
    }
}

@media screen and (max-width: 560px) {
    .u-n-mqDown-sm {
        display:none!important
    }
}

@media screen and (max-width: 414px) {
    .u-n-mqDown-xs {
        display:none!important
    }
}

@media screen and (max-width: 400px) {
    .u-n-mqDown-xxs {
        display:none!important
    }
}

.u-opacity0 {
    opacity: 0
}

.u-pointerevent-none {
    pointer-events: none
}

.u-reverse {
    -webkit-transform: scale(-1,1);
    transform: scale(-1,1)
}

/*# sourceMappingURL=sourcemaps/common.min.css.map */