@charset "UTF-8";
/*
Theme Name: musicformusic.jp
Description: musicformusic.jp
Version: 2026.08
Author: YH
*/
/* ------------------------------------------
   Reset
------------------------------------------ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline;
}
* {
    outline: none;
}
body {
    line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1.5em;
}
ol, ul {
    list-style: none;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th {
    text-align: left;
}
a:focus {
    outline: none;
}
a img {
    border: none;
}
input, button, select, textarea {
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
button {
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 0;
}
/* Style
-------------------------------------------------------------- */
body {
    height: 100%;
    font-size: 16px;
    line-height: 1.8em;
    background: #242424;
    color: #000;
    font-family: "JetBrains Mono", "游ゴシック", "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
    font-weight: 400;
    transition: opacity 0.6s ease;
    -webkit-print-color-adjust: exact;
    -webkit-text-size-adjust: none;
    /* font-feature-settings: "palt"; */
    opacity: 0;
}
body.show {
    opacity: 1;
}
body p {
    color: inherit;
    font-size: inherit;
    line-height: 1.8em;
    letter-spacing: 0;
}
a, a img, button {
    text-decoration: none;
    font-weight: 400;
    color: #000;
    transition: all 0.3s ease;
    font-weight: 400;
}
.pc_view a:hover, .pc_view button:hover {
    opacity: 0.75;
}
span {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
pictuire, img {
    display: block;
    max-width: 100%;
    height: auto;
}
h1, h2, h3, h4, h5, h6 {
    /* line-height: inherit; */
}
*[data-view=pc] {
    display: block !important;
}
*[data-view=sp] {
    display: none !important;
}
.f_en {}
/* =============================
  Common
============================= */
.outline {
    position: relative;
    overflow: hidden;
    min-width: 1200px;
}
.main {
    background: #000;
    transition: background 0.6s ease;
}
.language_jp .en,
.language_en .jp {
    display: none !important;
}
.scrollactive.fadein {
    position: relative;
    top: 20px;
    transition: all ease 1s;
    opacity: 0;
}
.scrollactive.fadein.active {
    opacity: 1;
    top: 0;
}
.linetext {
    position: relative;
    display: block;
    overflow: hidden;
    color: transparent;
    /* 初期状態で文字を非表示 */
}
/* テキスト部分を白帯でマスクする */
.linetext>span {
    display: block;
    position: relative;
    color: #fff;
    clip-path: inset(0 100% 0 0);
    /* 初期状態：左から全部隠す */
    transition: clip-path 0.3s ease +0.3s;
    /* 遅延付きで表示 */
    z-index: 4;
    padding: 0 3px;
}
/* 白帯 */
.linetext::before {
    content: "";
    position: absolute;
    top: 15%;
    left: 0;
    width: 0%;
    height: 70%;
    background: white;
    z-index: 3;
    /* テキストより上に被せる */
    transition: width 0.3s ease, left 0.3s ease +0.3s;
}
.linetext[data-delay="100"]>span {
    transition: clip-path 0.3s ease +0.4s;
}
.linetext[data-delay="200"]>span {
    transition: clip-path 0.3s ease +0.5s;
}
.linetext[data-delay="300"]>span {
    transition: clip-path 0.3s ease +0.6s;
}
.linetext[data-delay="400"]>span {
    transition: clip-path 0.3s ease +0.7s;
}
.linetext[data-delay="500"]>span {
    transition: clip-path 0.3s ease +0.8s;
}
.linetext[data-delay="600"]>span {
    transition: clip-path 0.3s ease +0.9s;
}
.linetext[data-delay="700"]>span {
    transition: clip-path 0.3s ease +1.0s;
}
.linetext[data-delay="800"]>span {
    transition: clip-path 0.3s ease +1.1s;
}
.linetext[data-delay="900"]>span {
    transition: clip-path 0.3s ease +1.2s;
}
.linetext[data-delay="1000"]>span {
    transition: clip-path 0.3s ease +1.3s;
}
.linetext[data-delay="100"]::before {
    transition: width 0.3s ease +0.1s, left 0.3s ease +0.4s;
}
.linetext[data-delay="200"]::before {
    transition: width 0.3s ease +0.2s, left 0.3s ease +0.5s;
}
.linetext[data-delay="300"]::before {
    transition: width 0.3s ease +0.3s, left 0.3s ease +0.6s;
}
.linetext[data-delay="400"]::before {
    transition: width 0.3s ease +0.4s, left 0.3s ease +0.7s;
}
.linetext[data-delay="500"]::before {
    transition: width 0.3s ease +0.5s, left 0.3s ease +0.8s;
}
.linetext[data-delay="600"]::before {
    transition: width 0.3s ease +0.6s, left 0.3s ease +0.9s;
}
.linetext[data-delay="700"]::before {
    transition: width 0.3s ease +0.7s, left 0.3s ease +1.1s;
}
.linetext[data-delay="800"]::before {
    transition: width 0.3s ease +0.8s, left 0.3s ease +1.2s;
}
.linetext[data-delay="900"]::before {
    transition: width 0.3s ease +0.9s, left 0.3s ease +1.3s;
}
.linetext[data-delay="1000"]::before {
    transition: width 0.3s ease +1.0s, left 0.3s ease +1.4s;
}
/* active時に白帯が通過して、テキストがマスク解除される */
.linetextwrap.active .linetext::before {
    width: 100%;
    left: 100%;
}
.linetextwrap.active .linetext>span {
    clip-path: inset(0 0 0 0);
    /* 全表示 */
}
.linetextwrap.active.delay a .linetext::before {
    transition: left 0.3s ease;
}
.linetextwrap.active.delay a .linetext>span {
    transition: color 0.3s ease +0.1s;
}
.pc_view .linetextwrap.active.delay a:hover {
    opacity: 1;
}
.pc_view .linetextwrap.active.delay a:hover .linetext::before {
    left: 0%;
}
.pc_view .linetextwrap.active.delay a:hover .linetext>span {
    color: #000;
}
.scrolltextwrap {
    width: 100%;
    overflow: hidden;
}
.scrolltext {
    display: flex;
    width: max-content;
    will-change: transform;
}
.scrolltext p {
    flex: none;
    margin: 0;
    white-space: nowrap;
    font-size: 118px;
    line-height: 1em;
    color: #fff;
}
.showup {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.6s linear(0,
            0.0012 5%,
            0.0052 10%,
            0.0127 15%,
            0.0245 20%,
            0.0421 25%,
            0.0676 30%,
            0.1051 35%,
            0.163 40%,
            0.2644 45%,
            0.5 50%,
            0.72 55%,
            0.82 60%,
            0.875 65%,
            0.91 70%,
            0.935 75%,
            0.955 80%,
            0.971 85%,
            0.983 90%,
            0.992 94%,
            0.997 97%,
            1),
       color 0.5s +0.5s ease;
}
.showdown {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.6s linear(0,
            0.0012 5%,
            0.0052 10%,
            0.0127 15%,
            0.0245 20%,
            0.0421 25%,
            0.0676 30%,
            0.1051 35%,
            0.163 40%,
            0.2644 45%,
            0.5 50%,
            0.72 55%,
            0.82 60%,
            0.875 65%,
            0.91 70%,
            0.935 75%,
            0.955 80%,
            0.971 85%,
            0.983 90%,
            0.992 94%,
            0.997 97%,
            1),
       color 0.5s +0.5s ease;
}
.showleft {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.6s linear(0,
            0.0012 5%,
            0.0052 10%,
            0.0127 15%,
            0.0245 20%,
            0.0421 25%,
            0.0676 30%,
            0.1051 35%,
            0.163 40%,
            0.2644 45%,
            0.5 50%,
            0.72 55%,
            0.82 60%,
            0.875 65%,
            0.91 70%,
            0.935 75%,
            0.955 80%,
            0.971 85%,
            0.983 90%,
            0.992 94%,
            0.997 97%,
            1),
       color 0.5s +0.5s ease;
}
.showright {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.6s linear(0,
            0.0012 5%,
            0.0052 10%,
            0.0127 15%,
            0.0245 20%,
            0.0421 25%,
            0.0676 30%,
            0.1051 35%,
            0.163 40%,
            0.2644 45%,
            0.5 50%,
            0.72 55%,
            0.82 60%,
            0.875 65%,
            0.91 70%,
            0.935 75%,
            0.955 80%,
            0.971 85%,
            0.983 90%,
            0.992 94%,
            0.997 97%,
            1),
       color 0.5s +0.5s ease;
}
.showup.active,
.active>.showup,
.showdown.active,
.active>.showdown,
.showleft.active,
.active>.showleft,
.showright.active,
.active>.showright {
    clip-path: inset(0 0 0 0);
    color: #fff;
}
.showup span,
.showdown span,
.showleft span,
.showright span {
    display: block;
}
.btstyle {
    --size: 106px;
    --circle: #000;
    --text: #fff;
    --text-hover: #000;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    text-decoration: none;
}
.pc_view a.btstyle:hover {
    opacity: 1;
}
.btstyle svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}
.btstyle circle {
    fill: none;
    stroke: var(--circle);
    stroke-dasharray: 101;
    stroke-dashoffset: 0;
}
.btstyle .fill {
    r: 25;
    stroke-width: 52;
    stroke-linecap: butt;
    transition: stroke-dashoffset 0.3s cubic-bezier(.76, 0, .24, 1);
}
.btstyle .line {
    stroke-width: 1;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s cubic-bezier(.76, 0, .24, 1);
}
.btstyle span {
    position: relative;
    z-index: 1;
    color: var(--text);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.1em;
    transition: color 0.15s +0.3s ease;
}
.btstyle.active span {
    transition: color 0.15s +0.15s ease;
}
.btstyle.active .fill {
    stroke-dashoffset: -101;
}
.btstyle.active .line {
    stroke-dashoffset: -101;
    transition-delay: 0.2s;
}
.btstyle.active span {
    color: var(--text-hover);
}
.btstyle:not(.active) .fill {
    transition-delay: 0.2s;
}
.btstyle:not(.active) .line {
    transition-delay: 0s;
}
.btstyle.light {
    --circle: #fff;
    --text: #000;
    --text-hover: #fff;
}
.hstyle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 100;
}
.hstyle>span {
    display: flex;
    position: absolute;
    left: calc(50% - 160px);
    font-size: 350px;
    font-weight: 500;
    line-height: 1em;
}
.hstyle>span:nth-child(2) {
    left: auto;
    right: calc(50% + 190px);
    top: 410px;
}
.hstyle>span span {
    font-feature-settings: "palt";
    display: block;
    color: black;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 100%);
    -webkit-mask-size: 0% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-image: linear-gradient(to right, black 0%, black 100%);
    mask-size: 0% 100%;
    mask-repeat: no-repeat;
    mask-position: left;
    transition: -webkit-mask-size 1.5s linear(0,
            0.0012 5%,
            0.0052 10%,
            0.0127 15%,
            0.0245 20%,
            0.0421 25%,
            0.0676 30%,
            0.1051 35%,
            0.163 40%,
            0.2644 45%,
            0.5 50%,
            0.72 55%,
            0.82 60%,
            0.875 65%,
            0.91 70%,
            0.935 75%,
            0.955 80%,
            0.971 85%,
            0.983 90%,
            0.992 94%,
            0.997 97%,
            1),
        mask-size 1.5s linear(0,
            0.0012 5%,
            0.0052 10%,
            0.0127 15%,
            0.0245 20%,
            0.0421 25%,
            0.0676 30%,
            0.1051 35%,
            0.163 40%,
            0.2644 45%,
            0.5 50%,
            0.72 55%,
            0.82 60%,
            0.875 65%,
            0.91 70%,
            0.935 75%,
            0.955 80%,
            0.971 85%,
            0.983 90%,
            0.992 94%,
            0.997 97%,
            1),
        transform 1.5s linear(0,
            0.0012 5%,
            0.0052 10%,
            0.0127 15%,
            0.0245 20%,
            0.0421 25%,
            0.0676 30%,
            0.1051 35%,
            0.163 40%,
            0.2644 45%,
            0.5 50%,
            0.72 55%,
            0.82 60%,
            0.875 65%,
            0.91 70%,
            0.935 75%,
            0.955 80%,
            0.971 85%,
            0.983 90%,
            0.992 94%,
            0.997 97%,
            1);
    transform: translate(50px, 0);
}
/* アクティブ時：マスクサイズを100%に → 全体表示 */
.active>.inner>.hstyle>span>span,
.active>.hstyle>span>span,
.hstyle.active>span>span {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: translate(0, 0);
}
.hstyle.relative {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
}
.hstyle.relative>span {
    left: auto;
    font-size: 200px;
    top: auto;
    position: relative;
}
.hstyle.relative.small>span {
    font-size: 162px;
}
.hstyle.relative.small2>span {
    font-size: 54px;
}
.remodal-overlay {
    background: #2b2b2b;
    z-index: 1000000;
    mix-blend-mode: multiply;
}
.remodal-overlay.keep-overlay {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.remodal-wrapper {
    z-index: 1000001;
    padding: 0;
    overflow: hidden;
}
.remodal {
    padding: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    background: no-repeat;
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.remodal-close {
    right: 30px;
    left: auto;
    top: 30px;
    width: 54px;
    height: 54px;
    border-radius: 120px;
    z-index: 1000;
}
.remodal-close::before {
    display: none;
}
.remodal-close::before,
.remodal-close::after {
    display: block;
    position: absolute;
    content: "";
    width: 54px;
    height: 1.5px;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0) rotate(-45deg);
}
.remodal-close::after {
    transform: translate(-50%, 0) rotate(45deg);
}
.remodal>.inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 200px);
    width: calc(100% - 200px);
    max-width: 1200px;
}
.remodal .img {
    width: 100%;
    height: 100%;
}
.remodal .img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.remodal .bt {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    opacity: 0;
    cursor: none;
}
.remodal .bt.next {
    left: auto;
    right: 0;
}
.cursor {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 2000000;
    width: 50px;
    height: 50px;
}
.cursor::before {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    transform: translate(-15%, -50%) rotate(-135deg);
    position: absolute;
    left: 50%;
    top: 50%;
}
.cursor.next::before {
    transform: translate(-85%, -50%) rotate(45deg);
}
/*============================
header
============================*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20000;
}
header>.inner {
    max-width: 1200px;
    width: 94%;
    margin: 0 auto;
    height: 0;
    display: flex;
    justify-content: space-between;
}
header .logo {
    margin-top: 35px;
}
header .logo a {
    display: block;
    width: 164px;
    position: relative;
}
header .logo a img.dark {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all ease 0.3s;
}
header.dark .logo a img.dark {
    opacity: 1;
}
header .gmenu {
    margin-top: 54px;
    opacity: 0;
    transition: 0.3s ease all;
    pointer-events: none;
}
.pc_view header .gmenu2 {
    display: none !important;
}
header .gmenu.show,
#inner header .gmenu {
    opacity: 1;
    pointer-events: auto;
}
header.dark .gmenu ul li a {
    color: #000;
}
header.dark .linetext>span {
    color: #000;
}
header.dark .linetext::before {
    background: #000;
}
.pc_view header.dark .linetextwrap.active.delay a:hover .linetext>span {
    color: #fff;
}
.gmenu ul li.icon a div {
    position: relative;
}
.gmenu ul li.icon a div img.dark {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all ease 0.3s;
}
header.dark .gmenu ul li.icon a div img.dark {
    opacity: 1;
}
.gmenu ul {
    display: flex;
    gap: 26px;
    align-items: center;
}
.gmenu ul li {}
.gmenu ul li a {
    color: #fff;
    display: block;
    font-size: 13px;
}
.pc_view .gmenu ul li a>span {}
.pc_view .gmenu ul li.lang {
    display: flex !important;
}
.gmenu ul li.lang {
    margin-right: 26px;
}
.gmenu ul li.lang a {
    display: block;
    padding: 0 2px;
    position: relative;
    margin: 0 3px;
}
.gmenu ul li.lang a.active {
    pointer-events: none;
}
.gmenu ul li.lang a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0%;
    width: 0%;
    height: 1px;
    background: #fff;
    bottom: 0;
    transition: all ease 0.3s +0.6s;
}
.gmenu ul li.lang a.active::after {}
.gmenu ul.active li.lang a.active::after {
    width: 100%;
}
.gmenu ul.active.delay li.lang a::after {
    transition: all ease 0.3s;
}
header.dark .gmenu ul li.lang a.active::after {
    background: #000;
}
.gmenu ul li.icon {
    margin-left: -26px;
}
.gmenu ul li.icon {
}
.gmenu ul li.icon a {
    display: block;
    line-height: 1em;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    position: relative;
}
.gmenu ul li.icon a::before {
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    left: 50%;
    top: 50%;
    content: "";
    border-radius: 100px;
    transform: translate(-50%, -50%);
    transition: all ease 0.3s;
}
.gmenu ul li.icon a img {
    width: 35px;
}
.pc_view .gmenu ul li.icon a:hover::before {
    opacity: 1;
    background: #fff;
    width: 46px;
    height: 46px;
}
.pc_view .gmenu ul li.icon a:hover img.dark {
    opacity: 1;
}
.pc_view header.dark .gmenu ul li.icon a:hover::before {
    opacity: 1;
    background: #000;
    width: 46px;
    height: 46px;
}
.pc_view header.dark .gmenu ul li.icon a:hover img {
    opacity: 1;
}
.pc_view header.dark .gmenu ul li.icon a:hover img.dark {
    opacity: 0;
}
footer {
    background: #242424;
    position: relative;
}
footer>.inner {
    overflow: hidden;
}
footer .logo {
    margin: -5.2vw 0 -0.1vw 0;
    transform: none !important;
}
footer .logo a {
    pointer-events: none;
}
.contactform {}
.contactform .screen-reader-response {
    margin-bottom: 20px;
}
.contactform .screen-reader-response p {
    color: #d11818;
}
.contactform .screen-reader-response ul {
    display: none;
}
.contactform form {}
.contactform form dl {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
}
.contactform form dl dt {
    font-size: 13px;
    padding: 14px 0 0 15px;
    width: 120px;
    display: flex;
    min-height: 50px;
    box-sizing: border-box;
    background: #212121;
    margin-top: 10px;
}
.contactform form dl dt:nth-child(1),
.contactform form dl dt:nth-child(1) + dd {
    margin-top: 0;
}
.contactform form dl dd {
    width: calc(100% - 120px);
    background: #212121;
    margin-top: 10px;
}
.contactform form dl dd span {
    display: block;
}
.contactform form dl dd .wpcf7-not-valid-tip {
    font-size: 13px;
    box-sizing: border-box;
    padding: 0px 10px 11px 10px;
    line-height: 1.5em;
    color: #f24e4e;
}
.contactform form dl dd input {
    display: block;
    border: none;
    padding: 13px 10px;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    line-height: 1.5em;
    background: no-repeat;
    color: #fff;
    font-weight: normal;
}
.contactform form dl dd textarea {
    padding: 13px 10px;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    line-height: 1.5em;
    border: none;
    display: block;
    background: no-repeat;
    height: 170px;
    color: #fff;
}
.contactform form .submitbox {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.contactform form .submitbox .btstyle_wrap {
    position: relative;
}
.contactform form .submitbox .btstyle_wrap > p {
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translate(-50%, 0);
    z-index: 100;
    opacity: 0;
}
.contactform form .submitbox input {
    display: block;
    width: 108px;
    height: 108px;
    border: none;
    border-radius: 100px;
    text-indent: -9999px;
    overflow: hidden;
}
.contactform form .submitbox .wpcf7-spinner {
    display: none;
}
.contactform .wpcf7 form .wpcf7-response-output {
    padding: 40px;
    margin-top: 40px;
    display: none;
}
.contactform .wpcf7 form.init .wpcf7-response-output,
.contactform .wpcf7 form.resetting .wpcf7-response-output,
.contactform .wpcf7 form.submitting .wpcf7-response-output {
    display: none;
}
.contactform .wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    /* Green */
}
.contactform .wpcf7 form.failed .wpcf7-response-output,
.contactform .wpcf7 form.aborted .wpcf7-response-output {
    border-color: #dc3232;
    /* Red */
}
.contactform .wpcf7 form.spam .wpcf7-response-output {
    border-color: #dc3232;
    /* Orange */
}
.contactform .wpcf7 form.invalid .wpcf7-response-output,
.contactform .wpcf7 form.unaccepted .wpcf7-response-output,
.contactform .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #dc3232;
    /* Yellow */
}
/**********************************************************/
/* Index */
/**********************************************************/
#index {}
#index.busy {
    overflow: hidden;
}
#index .loading {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(./images/img_logo_b.webp) no-repeat center center / 160px auto;
    background-color: #fff;
    z-index: 100000;
    transition: opacity 1s ease +1s;
}
#index .loading.hide {
    opacity: 0;
    pointer-events: none;
}
#index .main.bg1 {
    background: #ededed;
}
#index .main.bg2 {
    background: #28281f;
}
#index .main.bg3 {
    background: #ededed;
}
#index .visual {
    height: 100vh;
    height: 100dvh;
    position: relative;
}
#index .visual .bg {
    height: 100%;
    width: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: width 0.6s ease;
    overflow: hidden;
}
#index .visual .bg.active {
    width: calc(50vw + 270px);
}
#index .visual .bg img {
    position: absolute;
    top: 0;
    right: -100px;
    width: calc(50vw + 270px + 100px);
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0;
    transition:
        right 10s ease-out,
        opacity 1s ease;
    pointer-events: none;
}
#index .visual .bg img.active {
    right: 0;
    opacity: 1;
    z-index: 2;
}
#index .visual>.inner {
    height: 100%;
    display: flex;
    align-items: start;
    max-width: 1200px;
    width: 94%;
    color: #fff;
    position: relative;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    z-index: 100;
}
#index .visual .copy {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 40px 0;
    position: absolute;
    top: 45%;
    transform: translate(0, -50%);
}
#index.pc_view .visual .copy[data-view=pc] {
    display: flex !important;
}
#index .visual .copy>span {
    font-size: 80px;
    display: block;
    line-height: 1em;
}
#index .visual .gmenu {
    position: absolute;
    bottom: 140px;
}
#index .visual .scroll {
    writing-mode: vertical-rl;
    position: absolute;
    right: 0;
    bottom: 220px;
    font-size: 13px;
    line-height: 1em;
    padding-right: 25px;
    opacity: 0;
    transition: all ease 0.3s;
}
#index .visual .scroll.active {
    opacity: 1;
}
#index .visual .scroll span {
    display: block;
    width: 17px;
    height: 120px;
    background: url(./images/index/img_scroll.webp) repeat-y center center / 17px auto;
    right: 0;
    position: absolute;
    top: 0;
    -webkit-mask-image: linear-gradient(to bottom,
            black 0%,
            black 100%);
    -webkit-mask-size: 100% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0 -100%;
    mask-image: linear-gradient(to bottom,
            black 0%,
            black 100%);
    mask-size: 100% 50%;
    mask-repeat: no-repeat;
    mask-position: 0 -100%;
    animation: maskScrollDown 1.5s linear infinite +0.5s;
}
@keyframes maskScrollDown {
    0% {
        -webkit-mask-position: 0 -100%;
        mask-position: 0 -100%;
    }
    100% {
        -webkit-mask-position: 0 300%;
        mask-position: 0 300%;
    }
}
#index .content {}
#index .sec {
    position: relative;
    /* overflow: hidden; */
}
#index .sec.studio {
    min-height: 1580px;
}
#index .sec.studio h2 {
    top: -80px;
}
#index .sec.studio .imgbox {
    position: absolute;
    left: calc(50% + 160px);
    height: 1200px;
    top: 0;
    pointer-events: none;
}
#index .sec.studio .imgbox .img {
    position: absolute;
}
#index .sec.studio .imgbox .img1 {
    width: 662px;
    top: 250px;
    right: 0;
}
#index .sec.studio .imgbox .img2 {
    top: 0;
    width: 374px;
    right: 288px;
}
#index .sec.studio .imgbox .img3 {
    width: 253px;
    right: 662px;
    top: 990px;
}
#index .sec.studio .imgbox .img4 {
    width: 420px;
    right: 0;
    top: 990px;
}
#index .sec.studio .info {
    position: absolute;
    left: calc(50% + 160px);
    top: 430px;
    display: flex;
    flex-direction: column;
    align-items: start;
}
#index .sec.studio .info .bt {
    font-size: 45px;
    display: block;
    line-height: 1em;
    position: relative;
    left: -150px;
    align-items: start;
}
#index .sec.studio .info .bt_daikanyama {
    margin-top: 120px;
}
#index .sec.studio .info .bt .linetext::before {
    height: 94%;
    top: 3%;
}
#index .sec.studio .info .bt .linetext span {
    padding: 0 3px;
}
#index.pc_view .sec.studio .info .bt:hover .linetext span {
    color: #fff;
}
#index .sec.studio .info .bt .linetext::before {
    background: #000;
}
#index .sec.studio.shibuya .info .bt_shibuya .linetext::before,
#index .sec.studio.daikanyama .info .bt_daikanyama .linetext::before {
    left: 0%;
}
#index .sec.studio .info .label {
    font-size: 13px;
    margin: 250px 0 0 60px;
    line-height: 1.7em;
    letter-spacing: 0.05em;
}
#index .sec.studio.shibuya .info .label_daikanyama,
#index .sec.studio.daikanyama .info .label_shibuya {
    display: none;
}
#index .sec.studio .info .btstyle {
    position: absolute;
    left: 310px;
    top: 400px;
}
#index .sec.works {
    background: #282828;
}
#index .sec.works h2 {
    top: -150px;
}
#index .sec.works h2>span {
    left: calc(50% + 440px);
}
#index .sec.works h2>span:nth-child(2) {
    left: auto;
    right: calc(50% + 20px);
    top: 310px;
}
#index .sec.works h2>span:nth-child(2) span {
    color: #fff;
}
#index .sec.works .workbg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#index .sec.works .workbg .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all ease 0.3s;
    opacity: 0;
}
#index .sec.works .workbg .img.active {
    opacity: 0.5;
}
#index .sec.works .workbg .img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: blur(30px);
}
#index .sec.works>.inner {
    height: 1130px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    overflow: hidden;
}
#index .sec.works .btstyle {
    position: absolute;
    right: 1px;
    top: 780px;
}
#index .sec.works .worklistwrap {
    height: 100%;
    order: 1;
    overflow: hidden;
    transform: translate(0%, -100%);
    transition: 0.6s ease all;
}
#index .sec.works.active .worklistwrap {
    transform: translate(0%, 0%);
}
#index .sec.works .worklist {
    display: flex;
    flex-wrap: wrap;
    gap: 55px;
    width: 655px;
    position: relative;
}
#index .sec.works.active .worklist {
    transform: translateY(0px);
}
#index .sec.works .worklist .box {}
#index .sec.works .worklist .box a {
    display: flex;
    background: #141410;
    width: 300px;
    height: 300px;
    justify-content: center;
    align-items: center;
    position: relative;
}
#index.pc_view .sec.works .worklist .box a:hover {
    opacity: 1;
}
#index .sec.works .worklist .box .img {
    width: 65%;
    opacity: 0.5;
    transition: all ease 0.3s;
}
#index .sec.works .worklist .box.active .img {
    opacity: 1;
}
#index .sec.works .worklist .box .info {
    position: absolute;
    left: 0;
    bottom: -30px;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: all ease 0.3s;
    text-shadow: 0 0 3px #000;
}
#index .sec.works .worklist .box.active .info {
    opacity: 1;
}
#index .sec.works .worklist .box .info .year {}
#index .sec.works .worklist .box .info .artist {
    margin-top: 20px;
}
#index .sec.works .worklist .box .info .name {
    margin-top: 4px;
}
#index .sec.works .worklist .box .info .creator {
    margin-top: 20px;
}
#index .sec.works .worklist .box .info .creator .title {
    font-size: 11px;
    color: #a8a8a8;
}
#index .sec.works .worklist .box .info .creator span {
    display: block;
    line-height: 1.5em;
    margin-top: 4px;
}

#index .sec.works .worknamelist {
    display: grid;
    grid-template-columns: max-content max-content;
    row-gap: 10px;
    width: fit-content;
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1.5em;
    order: 2;
    margin-top: 270px;
}

#index .sec.works .worknamelist a {
    color: #fff;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    position: relative;
    /* overflow: hidden; */
}

#index.pc_view .sec.works .worknamelist a:hover {
    opacity: 1;
}

#index .sec.works .worknamelist a::before {
    background: #000;
    content: "";
    height: 100%;
    width: 0%;
    display: block;
    position: absolute;
    transition: all ease 0.3s;
    top: 0;
    left: -5px;
}

#index .sec.works .worknamelist a.active::before {
    width: calc(100% + 10px);
}

#index .sec.works .worknamelist a .artist {
    grid-column: 1;
    position: relative;
    padding-right: 30px;
    transition: all ease 0.3s;
}

#index .sec.works .worknamelist a .name {
    grid-column: 2;
    color: #a6a6a6;
    position: relative;
    transition: all ease 0.3s;
    padding-right: 6px;
}

#index .sec.works .worknamelist a.active .artist,
#index .sec.works .worknamelist a.active .name {
    color: #fff;
}
#index .sec.about {
    position: relative;
    padding: 410px 0 180px 0;
}
#index .sec.about h2>span {
    left: calc(50% + 50px);
    font-size: 200px;
    top: 150px;
}
#index .sec.about>.inner {
    width: 1200px;
    margin: 0 auto;
}
#index .sec.about .link {
    position: relative;
    display: block;
    overflow: hidden;
}
#index.pc_view .sec.about .link:hover {
    opacity: 1;
}
#index .sec.about .link .img {
}
#index .sec.about .link .img img {
    transition: 0.6s ease clip-path, 0.3s ease opacity, 0.3s ease transform;
}
#index .sec.about .link .img .img1_2 {
    position: absolute;
    left: 0;
    top: 0;
}
#index.pc_view .sec.about .link:hover .img img {
    transform: scale(1.05);
}
#index .sec.about .link .btstyle {
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    background: #fff;
}
#index .sec.about .logo {
    width: 173px;
    margin-top: 32px;
}
#index .sec.about .imgbox {
    position: absolute;
    left: 50%;
    height: 1200px;
    top: 0;
    pointer-events: none;
}
#index .sec.about .imgbox .img {
    position: absolute;
}
#index .sec.about .imgbox .img2 {
    width: 472px;
    top: 0;
    left: -750px;
}
#index .sec.about .imgbox .img3 {
    top: 0;
    width: 236px;
    left: -278px;
}
#index .sec.about .imgbox .img4 {
    width: 217px;
    left: -495px;
    top: 315px;
}
#index .sec.about .imgbox .img5 {
    width: 325px;
    left: 425px;
    top: 1255px;
}
#index .sec.creator {
    padding: 440px 0 0px 0;
}
#index .sec.creator h2>span {
    left: calc(50% - 1180px);
}
#index .sec.creator h2>span:nth-child(2) {
    left: auto;
    right: calc(50% - 1480px);
    top: 303px;
}
#index .sec.creator h2>span:nth-child(2) span {}
#index .sec.creator>.inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
    display: flex;
    justify-content: space-between;
    align-items: start;
}
#index .sec.creator .btstyle {
    position: absolute;
    left: 0;
    top: 544px;
}
#index .sec.creator .creatorlistwrap {
    position: relative;
    width: 940px;
    overflow: hidden;
    left: 70px;
}
#index .sec.creator .creatorlist {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    will-change: transform;
}
#index .sec.creator .creatorlist .box {
    width: 460px;
    margin-right: 50px;
}
#index .sec.creator .creatorlist .box a {
    display: block;
}
#index.pc_view .sec.creator .creatorlist .box a:hover {
    opacity: 1;
}
#index .sec.creator .creatorlist .box .img {
    overflow: hidden;
}
#index .sec.creator .creatorlist .box .img img {
    filter: grayscale(100);
    transition: 0.3s ease filter, 0.3s ease transform, 0.6s ease clip-path;
}
#index .sec.creator .creatorlist .box.active .img img {
    filter: grayscale(0);
    transform: scale(1.05);
}
#index .sec.creator .creatorlist .box .info {
    margin-top: 15px;
    font-size: 13px;
    opacity: 0;
    transition: 0.3s ease all;
}
#index .sec.creator .creatorlist .box.active a .info {
    opacity: 1;
}
#index .sec.creator .creatorlist .box .info .creator {
    line-height: 1.5em;
}
#index .sec.creator .creatorlist .box .info .detail {
    margin-top: 18px;
}
#index .sec.creator .creatorlist .box .info .detail span {
    display: block;
    line-height: 1.5em;
}
#index .sec.creator .creatornamelist {
    font-size: 13px;
    line-height: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#index .sec.creator .creatornamelist a {
    display: block;
    position: relative;
}
#index.pc_view .sec.creator .creatornamelist a:hover {
    opacity: 1;
}
#index .sec.creator .creatornamelist a .creator {
    position: relative;
    transition: all ease 0.3s;
    display: inline-block;
}
#index.pc_view .sec.creator .creatornamelist a:hover .creator {
    color: #fff;
}
#index .sec.creator .creatornamelist a .creator::before {
    background: #000;
    content: "";
    height: 100%;
    width: 0%;
    display: block;
    position: absolute;
    transition: all ease 0.3s;
    top: 0;
    left: -5px;
}
#index .sec.creator .creatornamelist a.active .creator::before {
    width: calc(100% + 10px);
}
#index .sec.creator .creatornamelist a .creator span {
    position: relative;
    display: inline-block;
}
#index .sec.creator .creatornamelist a .detail {
    position: absolute;
    left: calc(100% + 40px);
    top: 0;
    display: none;
    width: 500px;
    pointer-events: none;
}
#index.pc_view .sec.creator .creatornamelist a:hover .detail {
    display: block;
}
#index .sec.creator .creatornamelist a .detail span {
    display: block;
}
#index .sec.news,
#index .sec.contact {
    /* min-height: 600px; */
    padding: 100px 0;
}
#index .sec.news>.inner,
#index .sec.contact>.inner {
    max-width: 1200px;
    width: 96%;
    margin: 0 auto;
    position: relative;
}
#index .sec.news .btstyle {
    position: absolute;
    right: 0;
    top: 69px;
}
.newslist {
    display: flex;
    gap: 80px 60px;
    margin-top: 50px;
    flex-wrap: wrap;
}
.newslist .box {
    width: calc((100% - 180px) / 4);
}
.newslist .box a {
  display: block;
}
.newslist .box a.nolink {
    pointer-events: none;
}
.newslist .box a .img {
    overflow: hidden;
}
.newslist .box a .img img {
    transition: clip-path 0.6s linear(0,
            0.0012 5%,
            0.0052 10%,
            0.0127 15%,
            0.0245 20%,
            0.0421 25%,
            0.0676 30%,
            0.1051 35%,
            0.163 40%,
            0.2644 45%,
            0.5 50%,
            0.72 55%,
            0.82 60%,
            0.875 65%,
            0.91 70%,
            0.935 75%,
            0.955 80%,
            0.971 85%,
            0.983 90%,
            0.992 94%,
            0.997 97%,
            1),
        transform 0.3s ease;
}
.pc_view .newslist .box a:hover {
    opacity: 1;
}
.pc_view .newslist .box a:hover .img img {
    transform: scale(1.05);
}
.newslist .box a .info {
    margin-top: 19px;
}
.newslist .box a .info .date {
    font-size: 11px;
}
.newslist .box a .info .title {
    font-size: 13px;
    line-height: 1.6em;
}
#index .sec.contact {
    padding-bottom: 150px;
}
#index .sec.contact .contactform {
    margin-top: 80px;
}

/**********************************************************/
/* Inner */
/**********************************************************/
#inner .innervisual {
    position: relative;
    z-index: 100;
    pointer-events: none;
}
#inner .innervisual h1,
#inner .innervisual .label {
    font-size: 350px;
    font-weight: 500;
    line-height: 1em;
    position: absolute;
    left: calc(50% + 22px);
    color: #fff;
    top: -46px;
    transition: 1.5s all linear(0,
	0.0012 5%,
	0.0052 10%,
	0.0127 15%,
	0.0245 20%,
	0.0421 25%,
	0.0676 30%,
	0.1051 35%,
	0.163 40%,
	0.2644 45%,
	0.5 50%,
	0.72 55%,
	0.82 60%,
	0.875 65%,
	0.91 70%,
	0.935 75%,
	0.955 80%,
	0.971 85%,
	0.983 90%,
	0.992 94%,
	0.997 97%,
	1);
    transform: translate(1000px, 0);
}
#inner .innervisual .label {
    left: calc(50% - 1294px);
    top: 270px;
    transform: translate(-1000px, 0);
}
#inner .innervisual.active h1,
#inner .innervisual.active .label {
    transform: translate(0, 0);
}
/***************************************/
/* about */
/***************************************/
#inner.about .main {
    background: #ededed;
}
#inner.about .content {
    padding: 215px 0 200px 0;
}
#inner.about .intro {}
#inner.about .intro>.inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
}
#inner.about .intro .img {}
#inner.about .intro .scrolltextwrap {
    margin-top: -100px;
}
#inner.about .service {
    margin-top: 150px;
}
#inner.about .service>.inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
}
#inner.about .service .fbox {
    display: flex;
    gap: 110px;
    margin-top: -80px;
}
#inner.about .service .fbox .box {
    width: 100%;
}
#inner.about .service .fbox .box .text {
    font-size: 13px;
    margin-top: 21px;
}
#inner.about .company {
    margin-top: 200px;
}
#inner.about .company>.inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
}
#inner.about .company dl.list1 {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.5em;
    gap: 8px 0;
    margin-top: 85px;
}
#inner.about .company dl.list1 dt {
    width: 100px;
}
#inner.about .company dl.list1 dd {
    width: calc(100% - 100px);
}
#inner.about .company dl.list1.en dt {
    width: 230px;
}
#inner.about .company dl.list1.en dd {
    width: calc(100% - 230px);
}
#inner.about .company .award {
    margin-top: 110px;
}
#inner.about .company .award h3 {
    font-size: 25px;
    letter-spacing: 0.05em;
}
#inner.about .company dl.list2 {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.5em;
    gap: 8px 0;
    margin-top: 24px;
}
#inner.about .company dl.list2 dt {
    width: 53px;
}
#inner.about .company dl.list2 dt.hidden {
    opacity: 0;
}
#inner.about .company dl.list2 dd {
    width: calc(100% - 53px);
    display: flex;
}
#inner.about .company dl.list2 dd .month {
    display: block;
    width: 44px;
    line-height: 1.5em;
}
#inner.about .company dl.list2 dd .text {
    width: calc(100% - 44px);
    line-height: 1.5em;
}
/***************************************/
/* studio */
/***************************************/
#inner.studio .main {
    background: #ededed;
}
#inner.studio .innervisual h1 {
    left: calc(50% + 190px);
}
#inner.studio .innervisual .label {
    left: calc(50% - 1278px);
}
#inner.studio .content {
    padding: 215px 0 200px 0;
}
#inner.studio .sec {}
#inner.studio .sec>.inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
}
#inner.studio .sec .mainimg {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    transition: all ease 0.6s;
}
#inner.studio .sec .hstyle {
    margin-top: 86px;
}
#inner.studio .sec .detail {
    display: flex;
    justify-content: space-between;
    margin-top: 110px;
}
#inner.studio .sec .detail .floor {
    width: 415px;
}
#inner.studio .sec .detail .info {
    width: 407px;
}
#inner.studio .sec .detail dl.spec {
    display: flex;
    font-size: 13px;
    flex-wrap: wrap;
    letter-spacing: 0.05em;
    gap: 3px 0;
}
#inner.studio .sec .detail dl.spec dt {
    width: 90px;
}
#inner.studio .sec .detail dl.spec dd {
    width: calc(100% - 90px);
}
#inner.studio .sec .bt_link {
    display: flex;
    width: 184px;
    height: 44px;
    border: 1.5px solid #000;
    margin-top: 33px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
#inner.studio.pc_view .sec .bt_link:hover {
    background: #000;
    opacity: 1;
    color: #fff;
}
#inner.studio .sec .bt_link::after {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background: url(./images/icon_link_b.webp) no-repeat center center / contain;
    margin: 0 -7px 0 7px;
    transition: 0.3s ease all;
}
#inner.studio.pc_view .sec .bt_link:hover::after {
    background-image: url(./images/icon_link.webp);
}
#inner.studio .sec .morebox {
    margin: 209px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#inner.studio .sec .morebox .text {
    font-size: 13px;
    line-height: 2.4em;
}
#inner.studio .sec .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 150px;
}
#inner.studio .sec .gallery button {
    width: calc((100% - 150px) / 4);
    overflow: hidden;
}
#inner.studio.pc_view .sec .gallery button:hover {
    opacity: 1;
}
#inner.studio .sec .gallery button img {
    transition: all ease 0.3s;
}
#inner.studio.pc_view .sec .gallery button:hover img {
    transform: scale(1.05);
}
#inner.studio .sec.daikanyama {
    margin-top: 300px;
}
#inner.studio .sec.daikanyama .mainimg {
    width: 100vw;
}
#inner.studio .sec.daikanyama .mainimg img {
    object-fit: cover;
    width: 100%;
    height: 455px;
    transition: all ease 0.6s;
}
#inner.studio .sec.daikanyama .hstyle {
    margin: -260px 0 350px 0;
    transition: all ease 0.6s;
}
#inner.studio .sec.daikanyama .hstyle span span {
    color: #fff;
    transition: all ease 0.6s;
}
#inner.studio .sec.daikanyama.show .mainimg {
    width: 100%;
}
#inner.studio .sec.daikanyama.show .mainimg img {
    object-fit: cover;
    width: 100%;
    height: 765px;
}
#inner.studio .sec.daikanyama.show .hstyle {
    margin: 86px 0 0 0;
}
#inner.studio .sec.daikanyama.show .hstyle span span {
    color: #000;
}
#inner.studio .sec.daikanyama .detail .floor {
    width: 618px;
}
/***************************************/
/* news */
/***************************************/
#inner.page.news .main {
    background: #ededed;
}
#inner.page.news .innervisual h1 {
    left: calc(50% + 190px);
}
#inner.page.news .innervisual .label {
    left: calc(50% - 1278px);
}
#inner.page.news .content {
    padding: 425px 0 200px 0;
}
#inner.page.news .content .newslist {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1000;
    width: 96%;
}
/***************************************/
/* creator */
/***************************************/
#inner.page.creator .main {
    background: #ededed;
}
#inner.page.creator .innervisual h1 {
    left: calc(50% + 190px);
}
#inner.page.creator .innervisual .label {
    left: calc(50% - 1278px);
}
#inner.page.creator .content {
    padding: 425px 0 200px 0;
}
#inner.page.creator .insec {
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
}
#inner.page.creator .insec+.insec {
    margin-top: 150px;
}
#inner.page.creator .insec h2 {
    margin-bottom: 30px;
    font-size: 20px;
    position: relative;
    z-index: 1000;
}
#inner.page.creator .creatorlist {
    display: flex;
    gap: 75px 50px;
    flex-wrap: wrap;
}
#inner.page.creator .creatorlist .box {
    width: calc((100% - 100px) / 3);
}
#inner.page.creator .creatorlist .box a {
    display: block;
}
#inner.page.creator.pc_view  .creatorlist .box a:hover {
    opacity: 1;
}
#inner.page.creator .creatorlist .box .img {
    overflow: hidden;
}
#inner.page.creator .creatorlist .box .img img {
    filter: grayscale(100);
    transition: 0.3s ease filter, 0.3s ease transform, 0.6s ease clip-path;
}
#inner.page.creator.pc_view  .creatorlist .box:hover .img img {
    filter: grayscale(0);
    transform: scale(1.05);
}
#inner.page.creator .creatorlist .box .info {
    margin-top: 15px;
    font-size: 13px;
    transition: 0.3s ease all;
}
#inner.page.creator .creatorlist .box.active a .info {
    opacity: 1;
}
#inner.page.creator .creatorlist .box .info .creator {
    line-height: 1.5em;
}
#inner.page.creator .creatorlist .box .info .detail {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
}
#inner.page.creator .creatorlist .box .info .detail span {
    display: block;
    line-height: 1.5em;
}
#inner.page.creator .creatorlist .box .info .detail span::after {
    content: "/ ";
    margin-right: 0.6em;
}
#inner.page.creator .creatorlist .box .info .detail span:last-child::after {
    display: none
}
/***************************************/
/* work */
/***************************************/
#inner.page.work,
#inner.page.work .main {
    background: #1e1e1e;
}
#inner.page.work .workbg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#inner.page.work .workbg .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all ease 0.3s;
    opacity: 0;
}
#inner.page.work .workbg .img.active {
    opacity: 0.5;
}
#inner.page.work .workbg .img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: blur(30px);
}
#inner.page.work .innervisual h1 {
    left: calc(50% + 190px);
    color: #000;
}
#inner.page.work .innervisual .label {
    left: calc(50% - 1278px);
    color: #000;
}
#inner.page.work .content {
    padding: 245px 0 200px 0;
    position: relative;
    z-index: 1000;
}
#inner.page.work .worklist {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 90px 70px;
    width: 96%;
}
#inner.page.work .worklist .box {
    width: calc((100% - 140px) / 3);
}
#inner.page.work .worklist .box.hidden {
    display: none;
}
#inner.page.work .worklist .box a {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    aspect-ratio: 1 / 1;
}
#inner.page.work .worklist .box a::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: #141410;
}
#inner.page.work .worklist .box.active a::before {
    transition: 0.6s ease all;
    width: 100%;
}
#inner.page.work.pc_view  .worklist .box a:hover {
    opacity: 1;
}
#inner.page.work .worklist .box .img {
    width: 68%;
    aspect-ratio: 1/ 1;
    overflow: hidden;
    opacity: 0;
}
#inner.page.work .worklist .box.active .img {
    transition: all ease 0.6s +0.2s;
    opacity: 1;
}
#inner.page.work .worklist .box .img img {
    width: 100%;
    object-fit: contain;
    opacity: 0.5;
    transition: all ease 0.3s;
}
#inner.page.work.pc_view  .worklist .box:hover .img img {
    opacity: 1;
    transform: scale(1.05);
}
#inner.page.work .worklist .box .info {
    position: absolute;
    left: 0;
    bottom: -30px;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: all ease 0.3s;
    text-shadow: 0 0 3px #000;
}
#inner.page.work.pc_view .worklist .box:hover .info {
    opacity: 1;
}
#inner.page.work .worklist .box .info .year {}
#inner.page.work .worklist .box .info .artist {
    margin-top: 20px;
}
#inner.page.work .worklist .box .info .name {
    margin-top: 4px;
}
#inner.page.work .worklist .box .info .creator {
    margin-top: 20px;
}
#inner.page.work .worklist .box .info .creator .title {
    font-size: 11px;
    color: #a8a8a8;
}
#inner.page.work .worklist .box .info .creator span {
    display: block;
    line-height: 1.5em;
    margin-top: 4px;
}
/** works filter *************/
.filter {
    display: flex;
    gap: 80px;
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto 95px auto;
    width: 96%;
}
.filter>.box {
    position: relative;
    color: #fff;
}
.filter .label {
    margin: 0;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: 0.08em;
}
.filter .buttons {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    color: #fff;
    width: 200px;
    padding: 5px 0 0 0;
}
/* ホバー時と選択中は開いたまま */
.filter>.box.hover .buttons,
.filter>.box.active .buttons {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.filter button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
    font-size: 15px;
}
.pc_view .filter button:hover {
    opacity: 1;
}
.filter .box.active:not(.hover) .buttons button:not(.active) {
    display: none;
}
.pc_view .filter button:hover,
.filter button.active {
    background: #00ffff;
    color: #000;
}
/* CREATORボタン */
.filter .creator button {
    font-size: 13px;
}
.filter .creator button .jp {
    display: block;
}
/***************************************/
/* creator single */
/***************************************/
#inner.single.creator .main {
    background: #ededed;
}
#inner.single.creator .innervisual h1 {
    left: calc(50% + 190px);
}
#inner.single.creator .innervisual .label {
    left: calc(50% - 1278px);
}
#inner.single.creator .content {
    padding: 150px 0 200px 0;
}
#inner.single.creator article {}
#inner.single.creator article .visual {
    position: relative;
    height: 820px;
}
#inner.single.creator article .visual .bg {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
#inner.single.creator article .visual .bg img {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%;
}
#inner.single.creator article .visual>.inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
    height: 100%;
}
#inner.single.creator article .visual .info {
    color: #fff;
    padding: 170px 0 0 0;
    text-shadow: 0 0 3px #000;
}
#inner.single.creator article .visual .info h1 {
    font-size: 15px;
    line-height: 1.6em;
    letter-spacing: 0.05em;
}
#inner.single.creator article .visual .info .role {
    font-size: 13px;
    line-height: 1.7em;
    margin-top: 25px;
    letter-spacing: 0.05em;
}
#inner.single.creator article .visual .scrolltextwrap {
    z-index: 100;
    position: absolute;
    bottom: -57px;
    left: 0;
}
#inner.single.creator article .visual .scrolltextwrap.fixed {
    position: fixed;
    bottom: -30px;
}
#inner.single.creator article .visual .scrolltextwrap .scrolltext p {
    color: #000;
    font-size: 210px;
}
#inner.single.creator article .body {
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
    padding: 170px 0 0 0;
}
#inner.single.creator article .body .fbox {
    display: flex;
}
#inner.single.creator article .body .fbox .info {
    width: 50%;
}
#inner.single.creator article .body .fbox .info .name {
    font-size: 15px;
    line-height: 1.6em;
    letter-spacing: 0.05em;
}
#inner.single.creator article .body .fbox .info .role {
    font-size: 13px;
    line-height: 1.7em;
    margin-top: 25px;
    letter-spacing: 0.05em;
}
#inner.single.creator article .body .fbox .comment {
    width: 50%;
}
#inner.single.creator article .body .fbox .comment p {
    font-size: 13px;
    width: 70%;
    line-height: 2em;
}
#inner.single.creator article .body .insec {
    margin-top: 100px;
}
#inner.single.creator article .body .insec h2 {
    font-size: 11px;
    color: #666666;
    margin-bottom: 25px;
}
#inner.single.creator article .body .insec .list {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}
#inner.single.creator article .body .insec .list .box {
    width: calc((100% - 150px) / 4);
}
#inner.single.creator article .body .insec .list .box a {
    display: block;
}

#inner.single.creator article .body .insec .list .box a .imgbox {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    aspect-ratio: 1 / 1;
}
#inner.single.creator article .body .insec .list .box a .imgbox::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: #141410;
}
#inner.single.creator article .body .insec .list .box.active a .imgbox::before {
    transition: 0.6s ease all;
    width: 100%;
}
#inner.single.creator.pc_view article .body .insec .list .box a:hover {
    opacity: 1;
}
#inner.single.creator article .body .insec .list .box a .imgbox .img {
    width: 68%;
    aspect-ratio: 1/ 1;
    overflow: hidden;
    opacity: 0;
}
#inner.single.creator article .body .insec .list .box.active a .imgbox .img {
    transition: all ease 0.6s +0.2s;
    opacity: 1;
}
#inner.single.creator article .body .insec .list .box a .imgbox .img img {
    width: 100%;
    object-fit: contain;
    opacity: 0.9999999;
    transition: all ease 0.3s;
}
#inner.single.creator.pc_view article .body .insec .list .box a:hover .imgbox .img img {
    opacity: 1;
    transform: scale(1.05);
}
/*
#inner.single.creator article .body .insec .list .box .img {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #797979;
}
#inner.single.creator article .body .insec .list .box .img img {
    width: 64%;
}
*/
#inner.single.creator article .body .insec .list .box .info {
    margin-top: 13px;
}
#inner.single.creator article .body .insec .list .box .info .artist {}
#inner.single.creator article .body .insec .list .box .info .artist span {
    display: block;
    font-size: 11px;
    line-height: 1.5em;
}
#inner.single.creator article .body .insec .list .box .info .name {
    margin-top: 3px;
}
#inner.single.creator article .body .insec .list .box .info .name span {
    display: block;
    font-size: 11px;
    line-height: 1.5em;
}
#inner.single.creator article .body .insec .list .box .info .creator {
    margin-top: 15px;
}
#inner.single.creator article .body .insec .list .box .info .creator .title {
    font-size: 10px;
    color: #a8a8a8;
    margin-bottom: 8px;
}
#inner.single.creator article .body .insec .list .box .info .creator span {
    display: block;
    line-height: 1.5em;
    margin-top: 0;
    font-size: 11px;
}
#inner.single.creator article .body .insec .link {
    display: flex;
    gap: 14px;
}
#inner.single.creator article .body .insec .link a {
    display: block;
    line-height: 1em;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    position: relative;
    background: #fff;
}
#inner.single.creator article .body .insec .link a::before {
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    left: 50%;
    top: 50%;
    content: "";
    border-radius: 100px;
    transform: translate(-50%, -50%);
    transition: all ease 0.3s;
    background: #000;
}
#inner.single.creator article .body .insec .link a img {
    width: 35px;
    position: relative;
}
#inner.single.creator article .body .insec .link a img.dark {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 1;
    transition: all ease 0.3s;
    transform: translate(-50%, -50%);
}
#inner.single.creator.pc_view article .body .insec .link a:hover::before {
    opacity: 1;
    background: #000;
    width: 46px;
    height: 46px;
}
#inner.single.creator.pc_view article .body .insec .link a:hover {
    opacity: 1;
}
#inner.single.creator.pc_view article .body .insec .link a:hover img {
    opacity: 1;
}
#inner.single.creator.pc_view article .body .insec .link a:hover img.dark {
    opacity: 0;
}
#inner.single.creator article .body .fbox2 {
    display: flex;
}
#inner.single.creator article .body .fbox2 .box1 {
    width: 50%;
}
#inner.single.creator article .body .fbox2 .box1 .discography .text {
    width: 80%;
    font-size: 13px;
}
#inner.single.creator article .body .fbox2 .box2 {
    width: 50%;
}
#inner.single.creator article .body .fbox2 .box2 .embed {}
#inner.single.creator article .body .fbox2 .box2 .embed iframe {
    display: block;
    height: 500px;
    width: 70%;
}
#inner.single.creator article .body .fashion_work {}
#inner.single.creator article .body .fashion_work .gallery {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}
#inner.single.creator article .body .fashion_work .gallery .box {
    width: calc((100% - 150px) / 4);
}
#inner.single.creator article .body .fashion_work .gallery .box button {
    display: block;
    overflow: hidden;
}
#inner.single.creator article .body .fashion_work .gallery .box button img {
    transition: all ease 0.3s;
}
#inner.single.creator article .body .fashion_work .gallery .box button:hover {
    opacity: 1;
}
#inner.single.creator.pc_view article .body .fashion_work .gallery .box button:hover img {
    transform: scale(1.05);
}
#inner.single.creator article .body .other {}
#inner.single.creator article .body .other .fbox {
    display: flex;
    gap: 20px;
}
#inner.single.creator article .body .other .fbox .box {
    width: calc((100% - 80px) / 5);
}
#inner.single.creator article .body .other .fbox .box a {
    display: block;
}
#inner.single.creator.pc_view  article .body .other .fbox .box a:hover {
    opacity: 1;
}
#inner.single.creator article .body .other .fbox .box a .img {
    overflow: hidden;
}
#inner.single.creator article .body .other .fbox .box a .img img {
    aspect-ratio: 1000 / 1400;
    object-fit: cover;
    filter: grayscale(100);
    transition: 0.3s ease filter, 0.3s ease transform, 0.6s ease clip-path;
}
#inner.single.creator.pc_view  article .body .other .fbox .box a:hover .img img {
    filter: grayscale(0);
    transform: scale(1.05);
}
#inner.single.creator article .body .other .fbox .box a .name {
    font-size: 13px;
    margin-top: 8px;
}

/***************************************/
/* work single */
/***************************************/
#inner.single.work {
    background: #1e1e1e;
}
#inner.single.work .main {
    background: none;
}
#inner.single.work .innervisual h1 {
    left: calc(50% + 440px);
    color: #000;
}
#inner.single.work .innervisual .label {
    left: calc(50% - 1043px);
    color: #000;
}
#inner.single.work .scrollwrap {
    position: relative;
}
#inner.single.work .scrollwrap .visual {
    position: fixed;
    right: 0;
    top: 0;
    width: 50vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#inner.single.work .scrollwrap.fixedend .visual {
    position: absolute;
    bottom: 0;
    top: auto;
}
#inner.single.work .scrollwrap.nofixed .visual {
    position: absolute;
    bottom: auto;
    top: 0;
    height: 100%;
}
#inner.single.work .scrollwrap .visual .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}
#inner.single.work .scrollwrap .visual .bg img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: blur(30px);
    transform: scale(1.2);
    opacity: 0.5;
}
#inner.single.work .scrollwrap .visual .img {
    position: relative;
    width: 462px;
}
#inner.single.work .scrollwrap .visual .img img {
    position: relative;
}
#inner.single.work .scrollwrap .info {
    max-width: 1200px;
    width: 96%;
    margin: 0 auto;
    padding-top: 180px;
    position: relative;
    z-index: 1000;
}
#inner.single.work .scrollwrap .info .insec {
    width: calc(50% - 100px);
    margin-top: 60px;
}
#inner.single.work .insec {
    color: #fff;
    font-size: 13px;
    margin-top: 100px;
}
#inner.single.work .insec .title,
#inner.single.work .insec h2 {
    color: #a8a8a8;
    margin-bottom: 20px;
}
#inner.single.work .insec .text {}
#inner.single.work .insec .text span {}
#inner.single.work .insec h1 {}
#inner.single.work .insec h1 span {
    line-height: 2em;
    display: block;
}
#inner.single.work .insec.flex {
    display: flex;
}
#inner.single.work .insec.flex .title,
#inner.single.work .insec.flex h2 {
    width: 90px;
    margin: 0;
}
#inner.single.work .insec.flex h1, #inner.single.work .insec.flex .text {width: calc(100% - 90px);}
#inner.single.work .insec.creator .text {
    display: flex;
    flex-direction: column;
    align-items: start;
}
#inner.single.work .insec.creator .text a {
    color: #fff;
}
#inner.single.work .insec.spotify iframe {
    display: block;
    height: 500px;
}    
#inner.single.work .insec .link {
    display: flex;
    gap: 14px;
}#inner.single.work .insec .link a {
    display: block;
    line-height: 1em;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    position: relative;
    background: #fff;
}
#inner.single.work .insec .link a::before {
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    left: 50%;
    top: 50%;
    content: "";
    border-radius: 100px;
    transform: translate(-50%, -50%);
    transition: all ease 0.3s;
    background: #000;
}
#inner.single.work .insec .link a img {
    width: 35px;
    position: relative;
}
#inner.single.work .insec .link a img.dark {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 1;
    transition: all ease 0.3s;
    transform: translate(-50%, -50%);
}
#inner.single.work.pc_view .insec .link a:hover::before {
    opacity: 1;
    background: #000;
    width: 46px;
    height: 46px;
}
#inner.single.work.pc_view .insec .link a:hover {
    opacity: 1;
}
#inner.single.work.pc_view .insec .link a:hover img {
    opacity: 1;
}
#inner.single.work.pc_view .insec .link a:hover img.dark {
    opacity: 0;
}
#inner.single.work .body {
    max-width: 1200px;
    margin: 0 auto;
    width: 96%;
    padding: 0px 0 200px 0;
}
#inner.single.work .insec.musicvideo {}
#inner.single.work .insec.musicvideo iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
#inner.single.work .insec.other .fbox {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 90px 70px;
}
#inner.single.work .insec.other .fbox .box {
    width: calc((100% - 140px) / 3);
}
#inner.single.work .insec.other .fbox .box.hidden {
    display: none;
}
#inner.single.work .insec.other .fbox .box a {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    aspect-ratio: 1 / 1;
}
#inner.single.work .insec.other .fbox .box a::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: #141410;
}
#inner.single.work .insec.other .fbox .box.active a::before {
    transition: 0.6s ease all;
    width: 100%;
}
#inner.single.work.pc_view  .insec.other .fbox .box a:hover {
    opacity: 1;
}
#inner.single.work .insec.other .fbox .box .img {
    width: 68%;
    aspect-ratio: 1/ 1;
    overflow: hidden;
    opacity: 0;
}
#inner.single.work .insec.other .fbox .box.active .img {
    transition: all ease 0.6s +0.2s;
    opacity: 1;
}
#inner.single.work .insec.other .fbox .box .img img {
    width: 100%;
    object-fit: contain;
    opacity: 0.5;
    transition: all ease 0.3s;
}
#inner.single.work.pc_view  .insec.other .fbox .box:hover .img img {
    opacity: 1;
    transform: scale(1.05);
}
#inner.single.work .insec.other .fbox .box .info {
    position: absolute;
    left: 0;
    bottom: -30px;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: all ease 0.3s;
}
#inner.single.work.pc_view  .insec.other .fbox .box:hover .info {
    opacity: 1;
}
#inner.single.work .insec.other .fbox .box .info .year {}
#inner.single.work .insec.other .fbox .box .info .artist {
    margin-top: 20px;
}
#inner.single.work .insec.other .fbox .box .info .name {
    margin-top: 4px;
}
#inner.single.work .insec.other .fbox .box .info .creator {
    margin-top: 20px;
}
#inner.single.work .insec.other .fbox .box .info .creator .title {
    font-size: 11px;
    color: #a8a8a8;
}
#inner.single.work .insec.other .fbox .box .info .creator span {
    display: block;
    line-height: 1.5em;
    margin-top: 4px;
}
/**********************************************************/
/* 404 */
/**********************************************************/
#error {
    text-align: center;
}
#error .content {
    text-align: center;
    padding: 150px 0;
}
#error h2 {
    font-size: 20px;
    margin-bottom: 50px;
    color: #000;
}
#error .bt_more {
    margin: 30px auto 0 auto;
}
/**************************************************************/
/** SP ********************************************************/
/**************************************************************/
@media screen and (max-width: 767px) {
    /* style
	-------------------------------------------------------------- */
    body {
        min-width: 320px;
        overflow: visible !important;
    }
    body p {
        color: inherit;
        font-size: 10px;
        line-height: 1.8em;
    }
    a:hover {
        opacity: 1;
    }
    *[data-view=pc] {
        display: none !important;
    }
    *[data-view=sp] {
        display: block !important;
    }
    /* ===========================================================================================

		Common

	=========================================================================================== */
    .outline {
        position: relative;
        min-width: 320px;
        padding-bottom: 0;
    }
    .main {
        padding: 180px 0 100px 0;
        padding: 180px 0 100px 0;
        box-sizing: border-box;
        background: url(./images/bg_top.webp) repeat-x left 40px / 778px auto, url(./images/bg_bottom.webp) repeat-x left bottom / 778px auto;
    }
    .linetext {
        position: relative;
        display: block;
        overflow: hidden;
        color: transparent;
        /* 初期状態で文字を非表示 */
    }
    /* テキスト部分を白帯でマスクする */
    .linetext>span {
        display: block;
        position: relative;
        color: #fff;
        clip-path: inset(0 100% 0 0);
        /* 初期状態：左から全部隠す */
        transition: clip-path 0.3s ease +0.3s;
        /* 遅延付きで表示 */
        z-index: 4;
        padding: 0 2px;
    }
    /* 白帯 */
    .linetext::before {
        content: "";
        position: absolute;
        top: 15%;
        left: 0;
        width: 0%;
        height: 70%;
        background: white;
        z-index: 3;
        /* テキストより上に被せる */
        transition: width 0.3s ease, left 0.3s ease +0.3s;
    }
    .linetext[data-delay="100"]>span {
        transition: clip-path 0.3s ease +0.4s;
    }
    .linetext[data-delay="200"]>span {
        transition: clip-path 0.3s ease +0.5s;
    }
    .linetext[data-delay="300"]>span {
        transition: clip-path 0.3s ease +0.6s;
    }
    .linetext[data-delay="400"]>span {
        transition: clip-path 0.3s ease +0.7s;
    }
    .linetext[data-delay="500"]>span {
        transition: clip-path 0.3s ease +0.8s;
    }
    .linetext[data-delay="600"]>span {
        transition: clip-path 0.3s ease +0.9s;
    }
    .linetext[data-delay="700"]>span {
        transition: clip-path 0.3s ease +1.0s;
    }
    .linetext[data-delay="800"]>span {
        transition: clip-path 0.3s ease +1.1s;
    }
    .linetext[data-delay="900"]>span {
        transition: clip-path 0.3s ease +1.2s;
    }
    .linetext[data-delay="1000"]>span {
        transition: clip-path 0.3s ease +1.3s;
    }
    .linetext[data-delay="100"]::before {
        transition: width 0.3s ease +0.1s, left 0.3s ease +0.4s;
    }
    .linetext[data-delay="200"]::before {
        transition: width 0.3s ease +0.2s, left 0.3s ease +0.5s;
    }
    .linetext[data-delay="300"]::before {
        transition: width 0.3s ease +0.3s, left 0.3s ease +0.6s;
    }
    .linetext[data-delay="400"]::before {
        transition: width 0.3s ease +0.4s, left 0.3s ease +0.7s;
    }
    .linetext[data-delay="500"]::before {
        transition: width 0.3s ease +0.5s, left 0.3s ease +0.8s;
    }
    .linetext[data-delay="600"]::before {
        transition: width 0.3s ease +0.6s, left 0.3s ease +0.9s;
    }
    .linetext[data-delay="700"]::before {
        transition: width 0.3s ease +0.7s, left 0.3s ease +1.1s;
    }
    .linetext[data-delay="800"]::before {
        transition: width 0.3s ease +0.8s, left 0.3s ease +1.2s;
    }
    .linetext[data-delay="900"]::before {
        transition: width 0.3s ease +0.9s, left 0.3s ease +1.3s;
    }
    .linetext[data-delay="1000"]::before {
        transition: width 0.3s ease +1.0s, left 0.3s ease +1.4s;
    }
    /* active時に白帯が通過して、テキストがマスク解除される */
    .linetextwrap.active .linetext::before {
        width: 100%;
        left: 100%;
    }
    .linetextwrap.active .linetext>span {
        clip-path: inset(0 0 0 0);
        /* 全表示 */
    }
    .linetextwrap.active.delay a .linetext::before {
        transition: left 0.3s ease;
    }
    .linetextwrap.active.delay a .linetext>span {
        transition: color 0.3s ease +0.1s;
    }
    .scrolltextwrap {
        width: 100%;
        overflow: hidden;
    }
    .scrolltext {
        display: flex;
        width: max-content;
        will-change: transform;
    }
    .scrolltext p {
        flex: none;
        margin: 0;
        white-space: nowrap;
        font-size: 56px;
        line-height: 1em;
        color: #fff;
    }
    .showup {
        clip-path: inset(100% 0 0 0);
    }
    .showdown {
        clip-path: inset(0 0 100% 0);
    }
    .showleft {
        clip-path: inset(0 0 0 100%);
    }
    .showright {
        clip-path: inset(0 100% 0 0);
    }
    .showup.active,
    .active>.showup,
    .showdown.active,
    .active>.showdown,
    .showleft.active,
    .active>.showleft,
    .showright.active,
    .active>.showright {
        clip-path: inset(0 0 0 0);
        color: #fff;
    }
    .showup span,
    .showdown span,
    .showleft span,
    .showright span {
        display: block;
    }
    .btstyle {
        --size: 78px;
        --circle: #000;
        --text: #fff;
        --text-hover: #000;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        text-decoration: none;
    }
    .btstyle svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        transform: rotate(-90deg);
    }
    .btstyle circle {
        fill: none;
        stroke: var(--circle);
        stroke-dasharray: 101;
        stroke-dashoffset: 0;
    }
    .btstyle .fill {
        r: 25;
        stroke-width: 52;
        stroke-linecap: butt;
        transition: stroke-dashoffset 0.3s cubic-bezier(.76, 0, .24, 1);
    }
    .btstyle .line {
        stroke-width: 1;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.3s cubic-bezier(.76, 0, .24, 1);
    }
    .btstyle span {
        position: relative;
        z-index: 1;
        color: var(--text);
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0.1em;
        transition: color 0.15s +0.3s ease;
    }
    .btstyle.active span {
        transition: color 0.15s +0.15s ease;
    }
    .btstyle.active .fill {
        stroke-dashoffset: -101;
    }
    .btstyle.active .line {
        stroke-dashoffset: -101;
        transition-delay: 0.2s;
    }
    .btstyle.active span {
        color: var(--text-hover);
    }
    .btstyle:not(.active) .fill {
        transition-delay: 0.2s;
    }
    .btstyle:not(.active) .line {
        transition-delay: 0s;
    }
    .btstyle.light {
        --circle: #fff;
        --text: #000;
        --text-hover: #fff;
    }
    .hstyle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        pointer-events: none;
        z-index: 100;
    }
    .hstyle>span {
        display: flex;
        position: absolute;
        left: calc(50% - 59px);
        font-size: 124px;
        font-weight: 500;
        line-height: 1em;
    }
    .hstyle>span:nth-child(2) {
        left: auto;
        right: calc(50% - 73px);
        top: 126px;
    }
    .hstyle>span span {
        font-feature-settings: "palt";
        display: block;
        color: black;
        -webkit-mask-image: linear-gradient(to right, black 0%, black 100%);
        -webkit-mask-size: 0% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: left;
        mask-image: linear-gradient(to right, black 0%, black 100%);
        mask-size: 0% 100%;
        mask-repeat: no-repeat;
        mask-position: left;
        transition: -webkit-mask-size 1.5s linear(0,
                0.0012 5%,
                0.0052 10%,
                0.0127 15%,
                0.0245 20%,
                0.0421 25%,
                0.0676 30%,
                0.1051 35%,
                0.163 40%,
                0.2644 45%,
                0.5 50%,
                0.72 55%,
                0.82 60%,
                0.875 65%,
                0.91 70%,
                0.935 75%,
                0.955 80%,
                0.971 85%,
                0.983 90%,
                0.992 94%,
                0.997 97%,
                1),
            mask-size 1.5s linear(0,
                0.0012 5%,
                0.0052 10%,
                0.0127 15%,
                0.0245 20%,
                0.0421 25%,
                0.0676 30%,
                0.1051 35%,
                0.163 40%,
                0.2644 45%,
                0.5 50%,
                0.72 55%,
                0.82 60%,
                0.875 65%,
                0.91 70%,
                0.935 75%,
                0.955 80%,
                0.971 85%,
                0.983 90%,
                0.992 94%,
                0.997 97%,
                1),
            transform 1.5s linear(0,
                0.0012 5%,
                0.0052 10%,
                0.0127 15%,
                0.0245 20%,
                0.0421 25%,
                0.0676 30%,
                0.1051 35%,
                0.163 40%,
                0.2644 45%,
                0.5 50%,
                0.72 55%,
                0.82 60%,
                0.875 65%,
                0.91 70%,
                0.935 75%,
                0.955 80%,
                0.971 85%,
                0.983 90%,
                0.992 94%,
                0.997 97%,
                1);
        transform: translate(50px, 0);
    }
    /* アクティブ時：マスクサイズを100%に → 全体表示 */
    .active>.inner>.hstyle>span>span,
    .active>.hstyle>span>span,
    .hstyle.active>span>span {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        transform: translate(0, 0);
    }
    .hstyle.relative {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
    }
    .hstyle.relative>span {
        left: auto;
        font-size: 81px;
        top: auto;
        position: relative;
    }
    .hstyle.relative.small>span {
        font-size: 81px;
    }
    .hstyle.relative.small2>span {
        font-size: 48px;
    }
    .remodal-overlay {
        background: #2b2b2b;
        z-index: 1000000;
        mix-blend-mode: multiply;
    }
    .remodal-overlay.keep-overlay {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .remodal-wrapper {
        z-index: 1000001;
        padding: 0;
        overflow: hidden;
    }
    .remodal {
        padding: 0;
        width: 100%;
        max-width: 100%;
        position: relative;
        background: no-repeat;
        margin: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .remodal-close {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 18px;
        width: 54px;
        height: 54px;
        border-radius: 120px;
        z-index: 1000;
        transform: translate(-50%, 0);
    }
    .remodal-close::before {
        display: none;
    }
    .remodal-close::before,
    .remodal-close::after {
        display: block;
        position: absolute;
        content: "";
        width: 34px;
        height: 1px;
        background: #fff;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 0) rotate(-45deg);
    }
    .remodal-close::after {
        transform: translate(-50%, 0) rotate(45deg);
    }
    .remodal>.inner {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100% - 170px);
        width: 92%;
        max-width: 1200px;
    }
    .remodal .img {
        width: 100%;
        height: 100%;
    }
    .remodal .img img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
    .remodal .bt {
        position: absolute;
        left: 10px;
        top: auto;
        bottom: 17px;
        opacity: 1;
        cursor: none;
        width: 54px;
        height: 54px;
    }
    .remodal .bt::after {
        content: "";
        display: block;
        width: 26px;
        height: 26px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: translate(-15%, -50%) rotate(-135deg);
        position: absolute;
        left: 50%;
        top: 50%;
    }
    .remodal .bt.next::after {
        transform: translate(-85%, -50%) rotate(45deg);
    }
    .remodal .bt.next {
        left: auto;
        right: 10px;
    }
    .cursor {
        display: none !important;
        position: fixed;
        left: 0;
        top: 0;
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 2000000;
        width: 50px;
        height: 50px;
    }
    .cursor::before {
        content: "";
        display: block;
        width: 46px;
        height: 46px;
        border-top: 1.5px solid #fff;
        border-right: 1.5px solid #fff;
        transform: translate(-15%, -50%) rotate(-135deg);
        position: absolute;
        left: 50%;
        top: 50%;
    }
    .cursor.next::before {
        transform: translate(-85%, -50%) rotate(45deg);
    }
    /*============================
	header
	============================*/
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 20000;
    }
    header>.inner {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        height: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 0 0 4%;
        box-sizing: border-box;
    }
    header .logo {
        margin-top: 18px;
    }
    header .logo a {
        display: block;
        width: 80px;
        position: relative;
    }
    header .logo a img.dark {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all ease 0.3s;
    }
    header.dark .logo a img.dark {
        opacity: 1;
    }
    header .gmenu1 {
        margin: 20px 0 0 auto;
        opacity: 1;
        transition: 0.3s ease all;
        pointer-events: auto;
        position: relative;
        z-index: 120;
    }
    header .gmenu.show,
    #inner header .gmenu {
        opacity: 1;
        pointer-events: auto;
    }
    header .gmenu1 ul {
        display: flex;
        gap: 0;
        align-items: center;
        flex-direction: row;
    }
    header .gmenu2 {
    position: absolute;
    right: 0;
    z-index: 100;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    top: 0;
    transition: none;
    background: #000;
    padding: 116px 0 50px 25px;
    box-sizing: border-box;
    width: 142px;
    }
    header .gmenu ul li {
    }
    header.dark .gmenu ul li a {
        color: #000;
    }
    header.dark .linetext>span {
        color: #000;
    }
    header.dark .linetext::before {
        background: #000;
    }
    header.dark.open .gmenu2 .linetext>span {
        color: #fff;
    }
    header .gmenu ul li.icon a div {
        position: relative;
    }
    header .gmenu ul li.icon a div img.dark {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all ease 0.3s;
    }
    header.dark .gmenu ul li.icon a div img.dark {
        opacity: 1;
    }
    header.open.dark .gmenu ul li.icon a div img.dark {
        opacity: 0;
    }
    .bt_menu {
    	display: block;
    	width: 30px;
    	height: 30px;
    	box-sizing: border-box;
    	z-index: 1000;
    	overflow: hidden;
    	position: relative;
    	margin: 20px 0px 0 15px;
    	text-indent: -9999px;
    	z-index: 110;
    }
    
    .bt_menu::before,
    .bt_menu::after {
    	display: block;
    	position: absolute;
    	content: "";
    	width: 30px;
    	height: 1px;
    	background: #fff;
    	top: 50%;
    	left: 0;
    	transition: all 0.3s ease;
    	margin-top: 5px;
    	z-index: 100;
    }
    
    .bt_menu::after {
    	margin-top: -6px;
    }
    header.dark .bt_menu::before,
    header.dark .bt_menu::after {
        background: #000;
    }
    header.dark.open .bt_menu::before,
    header.dark.open .bt_menu::after {
        background: #fff;
    }
    .bt_menu.open {}
    
    .bt_menu.open::before {
    	margin-top: -1px;
    	transform: rotate(-150deg);
    	transform-origin: 50% 50%;
    	top: 50%;
    }
    
    .bt_menu.open::after {
    	margin-top: -1px;
    	transform: rotate(150deg);
    	transform-origin: 50% 50%;
    	top: 50%;
    }
    
    .bt_menu.open span::before {
    	opacity: 0;
    }
    .gmenu ul {
        display: flex;
        flex-direction: column;
        gap: 12px 0;
        align-items: start;
    }
    .gmenu ul li {}
    .gmenu ul li a {
        color: #fff;
        display: block;
        font-size: 12px;
        line-height: 2em;
    }
    .gmenu ul li a>span {}
    .gmenu ul li.lang {
        display: flex;
        font-size: 12px;
        line-height: 2em;
        margin-right: 9px;
    }
    .gmenu ul li.lang a {
        display: block;
        padding: 0 2px;
        position: relative;
        margin: 0 3px;
    }
    .gmenu ul li.lang a.active {
        pointer-events: none;
    }
    .gmenu ul li.lang a::after {
        content: "";
        display: block;
        position: absolute;
        left: 0%;
        width: 0%;
        height: 1px;
        background: #fff;
        bottom: 0;
        transition: all ease 0.3s +0.6s;
    }
    .gmenu ul li.lang a.active::after {}
    .gmenu ul.active li.lang a.active::after {
        width: 100%;
    }
    .gmenu ul.active.delay li.lang a::after {
        transition: all ease 0.3s;
    }
    header.dark .gmenu ul li.lang a.active::after {
        background: #000;
    }
    .gmenu ul li.icon {
  margin: 0 2px;
}
    .gmenu ul li.icon.x {
        
    }
    .gmenu ul li.icon a {
        display: block;
        width: 30px;
        height: 30px;
        line-height: 1em;
    }
    footer {
        background: #242424;
        position: relative;
    }
    footer>.inner {
        overflow: hidden;
    }
    footer .logo {
        margin: -5.2vw 0 -0.1vw 0;
        transform: none !important;
    }
    footer .logo a {
        pointer-events: none;
    }
    .contactform {}
    .contactform .screen-reader-response {
        margin-bottom: 14px;
    }
    .contactform .screen-reader-response p {
        color: #d11818;
        font-size: 13px;
    }
    .contactform .screen-reader-response ul {
        display: none;
    }
    .contactform form {}
    .contactform form dl {
        display: flex;
        flex-wrap: wrap;
        color: #fff;
    }
    .contactform form dl dt {
        font-size: 10px;
        padding: 13px 0 0 15px;
        width: 90px;
        display: flex;
        min-height: 40px;
        box-sizing: border-box;
        background: #212121;
        margin-top: 20px;
    }
    .contactform form dl dd {
        width: calc(100% - 90px);
        background: #212121;
        margin-top: 20px;
    }
    .contactform form dl dd span {
        display: block;
    }
    .contactform form dl dd .wpcf7-not-valid-tip {
        font-size: 10px;
        box-sizing: border-box;
        padding: 0px 10px 11px 10px;
        line-height: 1.5em;
    }
    .contactform form dl dd input {
        display: block;
        border: none;
        padding: 10px 10px;
        font-size: 16px;
        box-sizing: border-box;
        width: 100%;
        line-height: 1.5em;
        background: no-repeat;
        color: #fff;
        font-weight: normal;
    }
    .contactform form dl dd textarea {
        padding: 13px 10px;
        font-size: 16px;
        box-sizing: border-box;
        width: 100%;
        line-height: 1.5em;
        border: none;
        display: block;
        background: no-repeat;
        height: 170px;
        color: #fff;
    }
    .contactform form .submitbox {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
    .contactform form .submitbox .btstyle_wrap {
        position: relative;
    }
    .contactform form .submitbox .btstyle_wrap > p {
        position: absolute;
        left: 50%;
        top: -1px;
        transform: translate(-50%, 0);
        z-index: 100;
        opacity: 0;
    }
    .contactform form .submitbox input {
        display: block;
        width: 108px;
        height: 108px;
        border: none;
        border-radius: 100px;
        text-indent: -9999px;
        overflow: hidden;
    }
    .contactform form .submitbox .wpcf7-spinner {
        display: none;
    }
    .contactform .wpcf7 form .wpcf7-response-output {
        padding: 40px;
        margin-top: 40px;
    }
    .contactform .wpcf7 form.init .wpcf7-response-output,
    .contactform .wpcf7 form.resetting .wpcf7-response-output,
    .contactform .wpcf7 form.submitting .wpcf7-response-output {
        display: none;
    }
    .contactform .wpcf7 form.sent .wpcf7-response-output {
        border-color: #46b450;
        /* Green */
    }
    .contactform .wpcf7 form.failed .wpcf7-response-output,
    .contactform .wpcf7 form.aborted .wpcf7-response-output {
        border-color: #dc3232;
        /* Red */
    }
    .contactform .wpcf7 form.spam .wpcf7-response-output {
        border-color: #dc3232;
        /* Orange */
    }
    .contactform .wpcf7 form.invalid .wpcf7-response-output,
    .contactform .wpcf7 form.unaccepted .wpcf7-response-output,
    .contactform .wpcf7 form.payment-required .wpcf7-response-output {
        border-color: #dc3232;
        /* Yellow */
    }
    /**********************************************************/
    /* Index */
    /**********************************************************/
    #index {}
    #index.busy {
        overflow: hidden;
    }
    #index .loading {
        position: fixed;
        width: 100%;
        height: 100%;
        background: url(./images/img_logo_b.webp) no-repeat center center / 120px auto;
        background-color: #fff;
        z-index: 100000;
        transition: opacity 1s ease +1s;
    }
    #index .loading.hide {
        opacity: 0;
        pointer-events: none;
    }
    #index .main.bg1 {
        background: #ededed;
    }
    #index .main.bg2 {
        background: #28281f;
    }
    #index .main.bg3 {
        background: #ededed;
    }
    #index .visual {
        height: calc(100vh - 180px);
        height: calc(100dvh - 180px);
        position: relative;
    }
    #index .visual .bg {
        height: 100%;
        width: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: width 0.6s ease;
        overflow: hidden;
    }
    #index .visual .bg.active {
        width: calc(50vw + 270px);
    }
    #index .visual .bg img {
        position: absolute;
        top: 0;
        right: -100px;
        width: calc(50vw + 270px + 100px);
        height: 100%;
        max-width: none;
        object-fit: cover;
        opacity: 0;
        transition:
            right 10s ease-out,
            opacity 1s ease;
        pointer-events: none;
    }
    #index .visual .bg img.active {
        right: 0;
        opacity: 1;
        z-index: 2;
    }
    #index .visual>.inner {
        height: 100%;
        display: flex;
        align-items: start;
        max-width: 1200px;
        width: 92%;
        color: #fff;
        position: relative;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        z-index: 100;
    }
    #index .visual .copy[data-view="sp"] {
        display: flex !important;
        flex-direction: column;
        align-items: start;
        gap: 13px 0;
        position: absolute;
        top: -27px;
        transform: none;
    }
    #index .visual .copy>span {
        font-size: 52px;
        display: block;
        line-height: 1em;
    }
    #index .visual .gmenu {
        position: absolute;
        bottom: auto;
        top: -64px;
        right: 40px;
    }
    #index .visual .scroll {
        writing-mode: vertical-rl;
        position: absolute;
        right: 0;
        bottom: 98px;
        font-size: 10px;
        line-height: 1em;
        padding-right: 25px;
        opacity: 0;
        transition: all ease 0.3s;
    }
    #index .visual .scroll.active {
        opacity: 1;
    }
    #index .visual .scroll span {
        display: block;
        width: 17px;
        height: 112px;
        background: url(./images/index/img_scroll.webp) repeat-y center center / 14px auto;
        right: 0;
        position: absolute;
        top: 0;
        -webkit-mask-image: linear-gradient(to bottom,
                black 0%,
                black 100%);
        -webkit-mask-size: 100% 50%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: 0 -100%;
        mask-image: linear-gradient(to bottom,
                black 0%,
                black 100%);
        mask-size: 100% 50%;
        mask-repeat: no-repeat;
        mask-position: 0 -100%;
        animation: maskScrollDown 1.5s linear infinite +0.5s;
    }
    @keyframes maskScrollDown {
        0% {
            -webkit-mask-position: 0 -100%;
            mask-position: 0 -100%;
        }
        100% {
            -webkit-mask-position: 0 300%;
            mask-position: 0 300%;
        }
    }
    #index .content {}
    #index .sec {
        position: relative;
        /* overflow: hidden; */
    }
    #index .sec.studio {
        min-height: 950px;
    }
    #index .sec.studio h2 {
        top: -33px;
    }
    #index .sec.studio .imgbox {
        position: absolute;
        left: 0;
        width: 100%;
        height: 820px;
        top: 0;
        pointer-events: none;
    }
    #index .sec.studio .imgbox .img {
        position: absolute;
    }
    #index .sec.studio .imgbox .img img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    #index .sec.studio .imgbox .img1 {
        width: 310px;
        height: 350px;
        top: 127px;
        right: auto;
        left: 4%;
    }
    #index .sec.studio .imgbox .img2 {
        top: 0;
        width: 174px;
        height: 127px;
        right: 0;
    }
    #index .sec.studio .imgbox .img3 {
        width: 117px;
        height: 83px;
        right: auto;
        top: 477px;
        left: 0;
    }
    #index .sec.studio .imgbox .img4 {
        width: 195px;
        height: 131px;
        right: 0;
        top: 689px;
    }
    #index .sec.studio .info {
        position: absolute;
        left: auto;
        right: 4%;
        top: 548px;
        display: flex;
        flex-direction: column;
        align-items: start;
    }
    #index .sec.studio .info .bt {
        font-size: 27px;
        display: block;
        line-height: 1em;
        position: relative;
        left: auto;
        align-items: start;
    }
    #index .sec.studio .info .bt_daikanyama {
        margin-top: 15px;
    }
    #index .sec.studio .info .bt .linetext::before {
        height: 94%;
        top: 3%;
    }
    #index .sec.studio .info .bt .linetext span {
        padding: 0 3px;
    }
    #index .sec.studio .info .bt .linetext::before {
        background: #000;
    }
    #index .sec.studio.shibuya .info .bt_shibuya .linetext::before,
    #index .sec.studio.daikanyama .info .bt_daikanyama .linetext::before {
        left: 0%;
    }
    #index .sec.studio .info .label {
        font-size: 12px;
        margin: 39px 0 0 0;
        line-height: 1.5em;
        letter-spacing: 0.05em;
    }
    #index .sec.studio.shibuya .info .label_daikanyama,
    #index .sec.studio.daikanyama .info .label_shibuya {
        display: none;
    }
    #index .sec.studio .info .btstyle {
        position: absolute;
        left: 0;
        top: 195px;
    }
    #index .sec.works {
        background: #282828;
    }
    #index .sec.works h2 {
        top: -56px;
    }
    #index .sec.works h2>span {
        left: calc(50% - 58px);
    }
    #index .sec.works h2>span:nth-child(2) {
        left: auto;
        right: calc(50% + 76px);
        top: 129px;
    }
    #index .sec.works h2>span:nth-child(2) span {
        color: #fff;
    }
    #index .sec.works .workbg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    #index .sec.works .workbg .img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all ease 0.3s;
        opacity: 0;
    }
    #index .sec.works .workbg .img.active {
        opacity: 0.5;
    }
    #index .sec.works .workbg .img img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        filter: blur(30px);
    }
    #index .sec.works>.inner {
        height: 880px;
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        width: 92%;
        display: flex;
        justify-content: space-between;
        align-items: start;
        overflow: hidden;
    }
    #index .sec.works .btstyle {
        position: absolute;
        right: 1px;
        top: auto;
        left: auto;
        bottom: 50px;
    }
    #index .sec.works .worklistwrap {
        height: 100%;
        order: 1;
        overflow: hidden;
        transform: translate(0%, -100%);
        transition: 0.6s ease all;
    }
    #index .sec.works.active .worklistwrap {
        transform: translate(0%, 0%);
    }
    #index .sec.works .worklist {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        width: 150px;
        position: relative;
        margin-left: 10px
    }
    #index .sec.works.active .worklist {
        transform: translateY(0px);
    }
    #index .sec.works .worklist .box {}
    #index .sec.works .worklist .box a {
        display: flex;
        background: #141410;
        width: 150px;
        height: 150px;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #index .sec.works .worklist .box .img {
        width: 65%;
        opacity: 0.5;
        transition: all ease 0.3s;
    }
    #index .sec.works .worklist .box.active .img {
        opacity: 1;
    }
    #index .sec.works .worklist .box .info {
        position: absolute;
        left: 0;
        bottom: -30px;
        color: #fff;
        font-size: 13px;
        opacity: 0;
        transition: all ease 0.3s;
    }
    #index .sec.works .worklist .box.active .info {
        opacity: 1;
    }
    #index .sec.works .worklist .box .info .year {}
    #index .sec.works .worklist .box .info .artist {
        margin-top: 20px;
    }
    #index .sec.works .worklist .box .info .name {
        margin-top: 4px;
    }
    #index .sec.works .worklist .box .info .creator {
        margin-top: 20px;
    }
    #index .sec.works .worklist .box .info .creator .title {
        font-size: 11px;
        color: #a8a8a8;
    }
    #index .sec.works .worklist .box .info .creator span {
        display: block;
        line-height: 1.5em;
        margin-top: 4px;
    }
    #index .sec.works .worknamelist {
        display: flex;
        flex-direction: column;
        font-size: 13px;
        line-height: 1.5em;
        order: 2;
        margin-top: 120px;
        gap: 10px 0;
        width: calc(100% - 200px)
    }
    #index .sec.works .worknamelist a {
        color: #fff;
        display: block;
        position: relative;
    }
    #index .sec.works .worknamelist a::before {
        display: none
    }
    #index .sec.works .worknamelist a .artist {
        display: block;
        position: relative;
        padding-right: 30px;
        transition: all ease 0.3s;
        font-size: 12px;
        line-height: 1.5em;
    }
    #index .sec.works .worknamelist a .name {
        display: block;
        color: #a6a6a6;
        position: relative;
        transition: all ease 0.3s;
        padding-right: 0;
        font-size: 10px;
        line-height: 1.5em;
        margin-top: 1px;
    }
    #index .sec.about {
        position: relative;
        padding: 120px 0 120px 0;
    }
    #index .sec.about h2 {
        top: -79px;
    }
    #index .sec.about h2>span {
        left: 3%;
        font-size: 81px;
        top: 150px;
    }
    #index .sec.about>.inner {
        width: 100%;
        margin: 0 auto;
    }
    #index .sec.about .link {
        position: relative;
        display: block;
        overflow: hidden;
    }
    #index .sec.about .link .img {
        width: 100%;
        height: 480px;
    }
    #index .sec.about .link .img img {
        transition: 0.6s ease clip-path, 0.3s ease opacity, 0.3s ease transform;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    #index .sec.about .link .img .img1_2 {
        position: absolute;
        left: 0;
        top: 0;
    }
    #index .sec.about .link .btstyle {
        left: 50%;
        top: 44%;
        position: absolute;
        transform: translate(-50%, -50%);
        background: #fff;
    }
    #index .sec.about .logo {
        width: 93px;
        margin: 121px 4% 0 auto;
    }
    #index .sec.about .imgbox {
        position: absolute;
        left: 0;
        height: 760px;
        top: 0;
        pointer-events: none;
        z-index: 100;
    }
    #index .sec.about .imgbox .img {
        position: absolute;
    }
    #index .sec.about .imgbox .img img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    #index .sec.about .imgbox .img2 {
        width: 222px;
        top: 550px;
        left: 0;
        height: 145px;
    }
    #index .sec.about .imgbox .img3 {
        top: 550px;
        width: 113px;
        left: 221px;
    }
    #index .sec.about .imgbox .img4 {
        width: 107px;
        left: 115px;
        top: 695px;
    }
    #index .sec.about .imgbox .img5 {
        width: 325px;
        left: 425px;
        top: 1255px;
        display: none;
    }
    #index .sec.creator {
        padding: 260px 0 0px 0;
    }
    #index .sec.creator h2>span {
        left: calc(50% - 382px);
    }
    #index .sec.creator h2>span:nth-child(2) {
        left: auto;
        right: calc(50% - 533px);
        top: 124px;
    }
    #index .sec.creator h2>span:nth-child(2) span {}
    #index .sec.creator>.inner {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        width: 92%;
        display: block;
    }
    #index .sec.creator .btstyle {
        position: absolute;
        left: auto;
        top: auto;
        right: 0;
        bottom: 131px;
    }
    #index .sec.creator .creatorlistwrap {
        position: relative;
        width: 100vw;
        overflow: hidden;
        left: -4vw;
        margin-top: 38px;
        height: 520px;
    }
    #index .sec.creator .creatorlist {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        width: max-content;
        will-change: transform;
    }
    #index .sec.creator .creatorlist .box {
        width: 250px;
        margin-right: 30px;
    }
    #index .sec.creator .creatorlist .box a {
        display: block;
    }
    #index .sec.creator .creatorlist .box .img {
        overflow: hidden;
    }
    #index .sec.creator .creatorlist .box .img img {
        filter: grayscale(100);
        filter: grayscale(0);
        transition: 0.3s ease filter, 0.3s ease transform, 0.6s ease clip-path;
    }
    #index .sec.creator .creatorlist .box.active .img img {
        filter: grayscale(0);
    }
    #index .sec.creator .creatorlist .box .info {
        margin-top: 15px;
        font-size: 13px;
        opacity: 1;
        transition: 0.3s ease all;
    }
    #index .sec.creator .creatorlist .box.active a .info {
        opacity: 1;
    }
    #index .sec.creator .creatorlist .box .info .creator {
        line-height: 1.5em;
        font-size: 13px;
    }
    #index .sec.creator .creatorlist .box .info .detail {
        margin-top: 8px;
    }
    #index .sec.creator .creatorlist .box .info .detail span {
        display: block;
        line-height: 1.4em;
        font-size: 10px;
    }
    #index .sec.creator .creatornamelist {
        font-size: 13px;
        line-height: 1.5em;
        display: flex;
        flex-direction: row;
        gap: 5px 0;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #index .sec.creator .creatornamelist a {
        display: block;
        width: 48%;
        position: relative;
    }
    #index .sec.creator .creatornamelist a .creator {
        position: relative;
        transition: all ease 0.3s;
        display: inline-block;
        font-size: 12px;
    }
    #index .sec.creator .creatornamelist a .creator::before {
        background: #00ffff;
        content: "";
        height: 100%;
        width: 0%;
        display: block;
        position: absolute;
        transition: all ease 0.3s;
        top: 0;
        left: -5px;
    }
    #index .sec.creator .creatornamelist a.active .creator::before {
        width: calc(100% + 10px);
    }
    #index .sec.creator .creatornamelist a .creator span {
        position: relative;
        display: inline-block;
    }
    #index .sec.creator .creatornamelist a .detail {
        position: absolute;
        left: calc(100% + 40px);
        top: 0;
        display: none;
        width: 500px;
        pointer-events: none;
    }
    #index .sec.creator .creatornamelist a .detail span {
        display: block;
    }
    #index .sec.news,
    #index .sec.contact {
        min-height: 0;
        padding: 50px 0;
    }
    #index .sec.news>.inner,
    #index .sec.contact>.inner {
        max-width: 1200px;
        width: 92%;
        margin: 0 auto;
        position: relative;
    }
    #index .sec.news .btstyle {
        position: absolute;
        right: 0;
        top: 0px;
    }
    .newslist {
        display: flex;
        gap: 30px 14px;
        margin-top: 35px;
        flex-wrap: wrap;
    }
    .newslist .box {
        width: calc((100% - 14px) / 2);
    }
    .newslist .box a {}
    .newslist .box a .img {
        overflow: hidden;
    }
    .newslist .box a .img img {
        transition: clip-path 0.6s linear(0,
                0.0012 5%,
                0.0052 10%,
                0.0127 15%,
                0.0245 20%,
                0.0421 25%,
                0.0676 30%,
                0.1051 35%,
                0.163 40%,
                0.2644 45%,
                0.5 50%,
                0.72 55%,
                0.82 60%,
                0.875 65%,
                0.91 70%,
                0.935 75%,
                0.955 80%,
                0.971 85%,
                0.983 90%,
                0.992 94%,
                0.997 97%,
                1),
            transform 0.3s ease;
    }
    .newslist .box a .info {
        margin-top: 11px;
    }
    .newslist .box a .info .date {
        font-size: 10px;
    }
    .newslist .box a .info .title {
        font-size: 12px;
        line-height: 1.6em;
    }
    #index .sec.contact {
        padding-bottom: 0;
    }
    #index .sec.contact .contactform {
        margin-top: 30px;
    }
    /**********************************************************/
    /* Inner */
    /**********************************************************/
    #inner .main {
        padding-top: 0;
    }
    #inner .innervisual {
        position: relative;
        z-index: 100;
        pointer-events: none;
    }
    #inner .innervisual h1,
    #inner .innervisual .label {
        font-size: 124px;
        font-weight: 500;
        line-height: 1em;
        position: absolute;
        left: calc(50% - 58px);
        color: #fff;
        top: -7px;
        transition: 1.5s all linear(0,
			0.0012 5%,
			0.0052 10%,
			0.0127 15%,
			0.0245 20%,
			0.0421 25%,
			0.0676 30%,
			0.1051 35%,
			0.163 40%,
			0.2644 45%,
			0.5 50%,
			0.72 55%,
			0.82 60%,
			0.875 65%,
			0.91 70%,
			0.935 75%,
			0.955 80%,
			0.971 85%,
			0.983 90%,
			0.992 94%,
			0.997 97%,
			1);
        transform: translate(400px, 0);
    }
    #inner .innervisual .label {
        left: calc(50% - 452px);
        top: 120px;
        transform: translate(-400px, 0);
    }
    #inner .innervisual.active h1,
    #inner .innervisual.active .label {
        transform: translate(0, 0);
    }
    /***************************************/
    /* about */
    /***************************************/
    #inner.about .main {
        background: #ededed;
    }
    #inner.about .content {
        padding: 180px 0 0 0;
    }
    #inner.about .intro {}
    #inner.about .intro>.inner {
        max-width: 1200px;
        margin: 0 auto;
        width: 92%;
    }
    #inner.about .intro .img {}
    #inner.about .intro .img img {
      object-fit: cover;
      height: 410px;
      width: 100%;
    }
    #inner.about .intro .scrolltextwrap {
        margin-top: -48px;
    }
    #inner.about .service {
        margin-top: 80px;
    }
    #inner.about .service>.inner {
        max-width: 1200px;
        margin: 0 auto;
        width: 92%;
    }
    #inner.about .service .fbox {
        display: flex;
        gap: 15px;
        margin-top: 10px;
        flex-direction: column;
    }
    #inner.about .service .fbox .box {
        width: 76%;
        display: flex;
    }
    #inner.about .service .fbox .box + .box {
    margin: 0 0 0 auto;
    flex-direction: row-reverse;
    }
    #inner.about .service .fbox .box .text {
        font-size: 12px;
        margin: 0 5px;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    #inner.about .company {
        margin-top: 60px;
    }
    #inner.about .company>.inner {
        max-width: 1200px;
        margin: 0 auto;
        width: 92%;
    }
    #inner.about .company .hstyle {
        
    }
    #inner.about .company .hstyle > span {
        flex-wrap: wrap;
        width: 410px;
    }
    #inner.about .company .hstyle .mr {
        
    }
    #inner.about .company dl.list1 {
        display: flex;
        flex-wrap: wrap;
        font-size: 11px;
        line-height: 1.5em;
        gap: 8px 0;
        margin-top: 42px;
    }
    #inner.about .company dl.list1 dt {
        width: 80px;
    }
    #inner.about .company dl.list1 dd {
        width: calc(100% - 80px);
    }
    #inner.about .company dl.list1.en dt {
        width: 185px;
    }
    #inner.about .company dl.list1.en dd {
        width: calc(100% - 185px);
    }
    #inner.about .company .award {
        margin-top: 54px;
    }
    #inner.about .company .award h3 {
        font-size: 14px;
        letter-spacing: 0.05em;
    }
    #inner.about .company dl.list2 {
        display: flex;
        flex-wrap: wrap;
        font-size: 11px;
        line-height: 1.5em;
        gap: 15px 0;
        margin-top: 20px;
    }
    #inner.about .company dl.list2 dt {
        width: 42px;
    }
    #inner.about .company dl.list2 dt.hidden {
        opacity: 0;
    }
    #inner.about .company dl.list2 dd {
        width: calc(100% - 42px);
        display: flex;
    }
    #inner.about .company dl.list2 dd .month {
        display: block;
        width: 40px;
        line-height: 1.5em;
    }
    #inner.about .company dl.list2 dd .text {
        width: calc(100% - 44px);
        line-height: 1.5em;
    }
    /***************************************/
    /* studio */
    /***************************************/
    #inner.studio .main {
        background: #ededed;
        padding-top: 0;
    }
    #inner.studio .innervisual h1 {
        left: calc(50% - 60px);
    }
    #inner.studio .innervisual .label {
        left: calc(50% - 448px);
    }
    #inner.studio .content {
        padding: 180px 0 0 0;
    }
    #inner.studio .sec {}
    #inner.studio .sec>.inner {
        max-width: 1200px;
        margin: 0 auto;
        width: 92%;
    }
    #inner.studio .sec .mainimg {
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        transition: all ease 0.6s;
        width: 100%;
    }
    #inner.studio .sec .mainimg img {
    object-fit: cover;
    width: 100%;
    height: 410px;
    }
    #inner.studio .sec .hstyle {
        margin-top: 36px;
    }
    #inner.studio .sec .hstyle > span {
        flex-wrap: wrap;
        width: 350px;
        gap: 6px 0;
    }
    #inner.studio .sec .hstyle > span .mr {
        margin-right: 100px;
    }
    #inner.studio .sec .detail {
        display: block;
        margin-top: 18px;
    }
    #inner.studio .sec .detail .floor {
        width: 78%;
        margin: 0 2% 0 auto;
    }
    #inner.studio .sec .detail .info {
        width: auto;
        margin: 54px 0 0 0;
    }
    #inner.studio .sec .detail dl.spec {
        display: flex;
        font-size: 11px;
        flex-wrap: wrap;
        letter-spacing: 0.05em;
        gap: 3px 0;
        line-height: 2em;
    }
    #inner.studio .sec .detail dl.spec dt {
        width: 76px;
    }
    #inner.studio .sec .detail dl.spec dd {
        width: calc(100% - 90px);
    }
    #inner.studio .sec .bt_link {
        display: flex;
        width: 164px;
        height: 38px;
        border: 1px solid #000;
        margin-top: 39px;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }
    #inner.studio .sec .bt_link::after {
        content: "";
        display: block;
        width: 22px;
        height: 22px;
        background: url(./images/icon_link_b.webp) no-repeat center center / contain;
        margin: 0 -6px 0 5px;
    }
    #inner.studio .sec .morebox {
        margin: 39px 0 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #inner.studio .sec .morebox .text {
        font-size: 12px;
        line-height: 2.4em;
    }
    #inner.studio .sec .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 80px;
    }
    #inner.studio .sec .gallery button {
        width: calc((100% - 14px) / 3);
    }
    #inner.studio .sec.daikanyama {
        margin-top: 150px;
    }
    #inner.studio .sec.daikanyama .mainimg {
        width: 100vw;
    }
    #inner.studio .sec.daikanyama .mainimg img {
        object-fit: cover;
        width: 100%;
        height: 310px;
        transition: all ease 0.6s;
    }
    #inner.studio .sec.daikanyama .hstyle {
        margin: -209px 0 350px 0;
        transition: all ease 0.6s;
    }
    #inner.studio .sec.daikanyama .hstyle span {
    }
    #inner.studio .sec.daikanyama .hstyle span.mr {
    margin-right: 25px;
    }
    #inner.studio .sec.daikanyama .hstyle span span {
        color: #fff;
        transition: all ease 0.6s;
    }
    #inner.studio .sec.daikanyama.show .mainimg {
        width: 100%;
    }
    #inner.studio .sec.daikanyama.show .mainimg img {
        object-fit: cover;
        width: 100%;
        height: 410px;
    }
    #inner.studio .sec.daikanyama.show .hstyle {
        margin: 36px 0 0 0;
    }
    #inner.studio .sec.daikanyama.show .hstyle span span {
        color: #000;
    }
    #inner.studio .sec.daikanyama .detail {
        margin-top: -20px;
    }
    #inner.studio .sec.daikanyama .detail .floor {
        margin: 0 2% 0 auto;
        width: 82%;
    }
    /***************************************/
    /* news */
    /***************************************/
    #inner.page.news .main {
        background: #ededed;
    }
    #inner.page.news .innervisual h1 {
        left: calc(50% - 10px);
    }
    #inner.page.news .innervisual .label {
        left: calc(50% - 378px);
    }
    #inner.page.news .content {
        padding: 260px 0 0 0;
    }
    #inner.page.news .content .newslist {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 1000;
        width: 92%;
    }
    /***************************************/
    /* creator */
    /***************************************/
    #inner.page.creator .main {
        background: #ededed;
    }
    #inner.page.creator .innervisual h1 {
        left: calc(50% - 59px);
    }
    #inner.page.creator .innervisual .label {
        left: calc(50% - 445px);
    }
    #inner.page.creator .content {
        padding: 290px 0 0 0;
    }
    #inner.page.creator .insec {
        max-width: 1200px;
        margin: 0 auto;
        width: 94%;
    }
    #inner.page.creator .insec+.insec {
        margin-top: 70px;
    }
    #inner.page.creator .insec h2 {
        margin-bottom: 26px;
        font-size: 15px;
        position: relative;
        z-index: 1000;
    }
    #inner.page.creator .creatorlist {
        display: flex;
        gap: 42px 14px;
        flex-wrap: wrap;
    }
    #inner.page.creator .creatorlist .box {
        width: calc((100% - 14px) / 2);
    }
    #inner.page.creator .creatorlist .box a {
        display: block;
    }
    #inner.page.creator .creatorlist .box .img {
        overflow: hidden;
    }
    #inner.page.creator .creatorlist .box .img img {
        filter: grayscale(100);
        transition: 0.3s ease filter, 0.3s ease transform, 0.6s ease clip-path;
    }
    #inner.page.creator .creatorlist .box .info {
        margin-top: 13px;
        font-size: 13px;
        transition: 0.3s ease all;
    }
    #inner.page.creator .creatorlist .box.active a .info {
        opacity: 1;
    }
    #inner.page.creator .creatorlist .box .info .creator {
        line-height: 1.5em;
        font-size: 12px;
    }
    #inner.page.creator .creatorlist .box .info .detail {
        margin-top: 2px;
        display: flex;
        flex-wrap: wrap;
        font-size: 10px;
    }
    #inner.page.creator .creatorlist .box .info .detail span {
        display: block;
        line-height: 1.3em;
        letter-spacing: 0;
    }
    #inner.page.creator .creatorlist .box .info .detail span::after {
        content: "/ ";
        margin-left: 0.6em;
    }
    #inner.page.creator .creatorlist .box .info .detail span:last-child::after {
        display: none
    }
    /***************************************/
    /* work */
    /***************************************/
    #inner.page.work,
    #inner.page.work .main {
        background: #1e1e1e;
    }
    #inner.page.work .workbg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
    }
    #inner.page.work .workbg .img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all ease 0.3s;
        opacity: 0;
    }
    #inner.page.work .workbg .img.active {
        opacity: 0.5;
    }
    #inner.page.work .workbg .img img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        filter: blur(30px);
    }
    #inner.page.work .innervisual h1 {
        left: calc(50% - 60px);
        color: #000;
    }
    #inner.page.work .innervisual .label {
        left: calc(50% - 448px);
        color: #000;
    }
    #inner.page.work .content {
        padding: 180px 0 0 0;
        position: relative;
        z-index: 1000;
    }
    #inner.page.work .worklist {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 44px 14px;
        width: 92%;
    }
    #inner.page.work .worklist .box {
        width: calc((100% - 14px) / 2);
    }
    #inner.page.work .worklist .box.hidden {
        display: none;
    }
    #inner.page.work .worklist .box a {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        position: relative;
        aspect-ratio: 1 / 1;
        flex-direction: column;
    }
    #inner.page.work .worklist .box a::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: calc((92vw - 14px) / 2);
        background: #141410;
    }
    #inner.page.work .worklist .box.active a::before {
        transition: 0.6s ease all;
        width: 100%;
    }
    #inner.page.work .worklist .box .img {
        width: 100%;
        aspect-ratio: 1/ 1;
        overflow: hidden;
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #inner.page.work .worklist .box.active .img {
        transition: all ease 0.6s +0.2s;
        opacity: 1;
    }
    #inner.page.work .worklist .box .img img {
        object-fit: contain;
        opacity: 0.5;
        transition: all ease 0.3s;
        width: 65%;
    }
    #inner.page.work .worklist .box .info {
        position: relative;
        left: auto;
        bottom: auto;
        color: #fff;
        font-size: 10px;
        opacity: 1;
        transition: all ease 0.3s;
        width: 100%;
        margin-top: -90px;
    }
    #inner.page.work .worklist .box .info .year {}
    #inner.page.work .worklist .box .info .artist {
        margin-top: 20px;
    }
    #inner.page.work .worklist .box .info .name {
        margin-top: 0;
    }
    #inner.page.work .worklist .box .info .creator {
        margin-top: 32px;
    }
    #inner.page.work .worklist .box .info .creator .title {
        font-size: 8px;
        color: #a8a8a8;
    }
    #inner.page.work .worklist .box .info .creator span {
        display: block;
        line-height: 1.5em;
        margin-top: 2px;
        font-size: 9px;
    }
    /** works filter *************/
    .filter {
        display: flex;
        gap: 40px;
        position: relative;
        z-index: 10;
        max-width: 1200px;
        margin: 0 auto 55px auto;
        width: 92%;
        justify-content: start;
    }
    .filter>.box {
        position: relative;
        color: #fff;
    }
    .filter .label {
        margin: 0;
        cursor: pointer;
        font-size: 13px;
        letter-spacing: 0.08em;
    }
    .filter .buttons {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 5px;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        color: #fff;
        width: 200px;
        padding: 5px 0 0 0;
    }
    /* ホバー時と選択中は開いたまま */
    .filter>.box.hover .buttons,
    .filter>.box.active .buttons {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .filter button {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        color: #fff;
        font: inherit;
        line-height: 1.5;
        letter-spacing: 0.05em;
        text-align: left;
        cursor: pointer;
        transition: color 0.3s ease;
        font-size: 10px;
    }
    .filter .box.active:not(.hover) .buttons button:not(.active) {
        display: none;
    }
    .filter button.active {
        background: #00ffff;
        color: #000;
    }
    /* CREATORボタン */
    .filter .creator button {
        font-size: 10px;
    }
    .filter .creator button .jp {
        display: block;
    }
    /***************************************/
    /* creator single */
    /***************************************/
    #inner.single.creator .main {
        background: #ededed;
    }
    #inner.single.creator .innervisual h1 {
        left: calc(50% + 190px);
    }
    #inner.single.creator .innervisual .label {
        left: calc(50% - 1278px);
    }
    #inner.single.creator .content {
        padding: 0;
    }
    #inner.single.creator article {}
    #inner.single.creator article .visual {
        position: relative;
        height: calc(100dvh - 80px);
    }
    #inner.single.creator article .visual .bg {
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #inner.single.creator article .visual .bg img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    #inner.single.creator article .visual>.inner {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        width: 92%;
        height: 100%;
    }
    #inner.single.creator article .visual .info {
        color: #fff;
        padding: 170px 0 0 0;
    }
    #inner.single.creator article .visual .info h1 {
        font-size: 13px;
        line-height: 1.6em;
        letter-spacing: 0.05em;
    }
    #inner.single.creator article .visual .info .role {
        font-size: 11px;
        line-height: 1.7em;
        margin-top: 14px;
        letter-spacing: 0.05em;
    }
    #inner.single.creator article .visual .scrolltextwrap {
        z-index: 100;
        position: absolute !important;
        bottom: -34px !important;
        left: 0;
    }
    #inner.single.creator article .visual .scrolltextwrap .scrolltext p {
        color: #000;
        font-size: 62px;
    }
    #inner.single.creator article .body {
        max-width: 1200px;
        margin: 0 auto;
        width: 92%;
        padding: 100px 0 0 0;
    }
    #inner.single.creator article .body .fbox {
        display: block;
    }
    #inner.single.creator article .body .fbox .info {
        width: auto;
    }
    #inner.single.creator article .body .fbox .info .name {
        font-size: 13px;
        line-height: 1.6em;
        letter-spacing: 0.05em;
    }
    #inner.single.creator article .body .fbox .info .role {
        font-size: 11px;
        line-height: 1.7em;
        margin-top: 14px;
        letter-spacing: 0.05em;
    }
    #inner.single.creator article .body .fbox .comment {
        width: auto;
        margin-top: 56px;
    }
    #inner.single.creator article .body .fbox .comment p {
        font-size: 12px;
        width: auto;
        line-height: 1.8em;
    }
    #inner.single.creator article .body .insec {
        margin-top: 60px;
    }
    #inner.single.creator article .body .insec h2 {
        font-size: 11px;
        color: #666666;
        margin-bottom: 25px;
    }
    #inner.single.creator article .body .insec .list {
        display: flex;
        gap: 30px 14px;
    }
    #inner.single.creator article .body .insec .list .box {
        width: calc((100% - 14px) / 2);
    }
    #inner.single.creator article .body .insec .list .box a {
        display: block;
    }
    #inner.single.creator article .body .insec .list .box .info {
        margin-top: 13px;
    }
    #inner.single.creator article .body .insec .list .box .info .artist {}
    #inner.single.creator article .body .insec .list .box .info .artist span {
        display: block;
        font-size: 11px;
        line-height: 1.5em;
    }
    #inner.single.creator article .body .insec .list .box .info .name {
        margin-top: 3px;
    }
    #inner.single.creator article .body .insec .list .box .info .name span {
        display: block;
        font-size: 11px;
        line-height: 1.5em;
    }
    #inner.single.creator article .body .insec .list .box .info .creator {
        margin-top: 10px;
    }
    #inner.single.creator article .body .insec .list .box .info .creator .title {
        font-size: 10px;
        color: #a8a8a8;
        margin-bottom: 3px;
    }
    #inner.single.creator article .body .insec .list .box .info .creator span {
        display: block;
        line-height: 1.5em;
        margin-top: 0;
        font-size: 9px;
    }
    #inner.single.creator article .body .insec .link {
        display: flex;
        gap: 14px;
    }
    #inner.single.creator article .body .insec .link a {
        display: block;
        width: 42px;
        background: #fff;
        border-radius: 100px;
    }
    #inner.single.creator article .body .fbox2 {
        display: flex;
        flex-direction: column;
    }
    #inner.single.creator article .body .fbox2 .box1 {
        width: auto;
        order: 2;
        display: flex;
        flex-wrap: wrap;
    }
    #inner.single.creator article .body .fbox2 .box1 .discography {
        
    }
    #inner.single.creator article .body .fbox2 .box1 .discography .text {
        width: auto;
        font-size: 12px;
        line-height: 1.8em;
    }
    #inner.single.creator article .body .fbox2 .box1 .platform,
    #inner.single.creator article .body .fbox2 .box1 .sns {
        width: 50%;
    }
    #inner.single.creator article .body .fbox2 .box2 {
        width: auto;
        order: 1;
    }
    #inner.single.creator article .body .fbox2 .box2 .embed {}
    #inner.single.creator article .body .fbox2 .box2 .embed iframe {
        display: block;
        height: 410px;
        width: 100%;
    }
    #inner.single.creator article .body .fashion_work {}
    #inner.single.creator article .body .fashion_work .gallery {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }
    #inner.single.creator article .body .fashion_work .gallery .box {
        width: calc((100% - 28px) / 3);
    }
    #inner.single.creator article .body .other {}
    #inner.single.creator article .body .other .fbox {
        display: flex;
        gap: 30px 14px;
    }
    #inner.single.creator article .body .other .fbox .box {
        width: calc((100% - 14px) / 2);
    }
    #inner.single.creator article .body .other .fbox .box a {
        display: block;
    }
    #inner.single.creator article .body .other .fbox .box a .img {
        overflow: hidden;
    }
    #inner.single.creator article .body .other .fbox .box a .img img {
        aspect-ratio: 1000 / 1400;
        object-fit: cover;
        filter: grayscale(0);
        transition: 0.3s ease filter, 0.3s ease transform, 0.6s ease clip-path;
    }
    #inner.single.creator article .body .other .fbox .box a .name {
        font-size: 12px;
        margin-top: 13px;
        line-height: 1.5em;
    }
		
	/***************************************/
	/* work single */
	/***************************************/
	#inner.single.work {
		background: #1e1e1e;
	}
	#inner.single.work .main {
		background: none;
	}
	#inner.single.work .innervisual h1 {
        left: calc(50% - 60px);
		color: #000;
	}
	#inner.single.work .innervisual .label {
        left: calc(50% - 448px);
		color: #000;
	}
	#inner.single.work .scrollwrap {
		position: relative;
	}
	#inner.single.work .scrollwrap .visual {
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#inner.single.work .scrollwrap.fixedend .visual {
		position: absolute;
		bottom: 0;
		top: auto;
	}
	#inner.single.work .scrollwrap.nofixed .visual {
		position: absolute;
		bottom: auto;
		top: 0;
		height: 100%;
	}
	#inner.single.work .scrollwrap .visual .bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #000;
	}
	#inner.single.work .scrollwrap .visual .bg img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		filter: blur(30px);
		transform: scale(1.2);
		opacity: 0.5;
	}
	#inner.single.work .scrollwrap .visual .img {
		position: relative;
		width: 216px;
		z-index: 100000;
	}
	#inner.single.work .scrollwrap .visual .img img {
		position: relative;
	}
	#inner.single.work .scrollwrap .info {
		max-width: 1200px;
		width: 92%;
		margin: 0 auto 70px auto;
		padding: 140px 0px 70px 0px;
		position: relative;
		z-index: 1000;
		padding^t: ;
	}
	#inner.single.work .scrollwrap .info .img {
    margin: 0 auto 70px auto;
    width: 218px;
    }
	#inner.single.work .scrollwrap .info .insec {
		width: auto;
		margin-top: 50px;
	}
	#inner.single.work .insec {
		color: #fff;
		font-size: 12px;
		margin-top: 50px;
	}
	#inner.single.work .insec .title,
	#inner.single.work .insec h2 {
		color: #a8a8a8;
		margin-bottom: 15px;
		font-size: 10px;
	}
	#inner.single.work .insec .text {
      font-size: 12px;
    }
	#inner.single.work .insec .text span {}
	#inner.single.work .insec h1 {}
	#inner.single.work .insec h1 span {
		line-height: 2em;
		display: block;
	}
	#inner.single.work .insec.flex {
		display: flex;
	}
	#inner.single.work .insec.flex .title,
	#inner.single.work .insec.flex h2 {
		width: 70px;
		margin: 0;
	}
    #inner.single.work .insec.flex h1, #inner.single.work .insec.flex .text {width: calc(100% - 70px);}
	#inner.single.work .insec.creator .text {
		display: flex;
		flex-direction: column;
		align-items: start;
	}
	#inner.single.work .insec.creator .text a {
		color: #fff;
	}
	#inner.single.work .insec.spotify iframe {
		display: block;
		height: 410px;
	}
	#inner.single.work .insec .link {
		display: flex;
		gap: 14px;
	}
	#inner.single.work .insec .link a {
		display: block;
		width: 42px;
		background: #fff;
		border-radius: 100px;
	}
	#inner.single.work .body {
		max-width: 1200px;
		margin: 0 auto;
		width: 92%;
		padding: 0px 0 0 0;
	}
	#inner.single.work .insec.musicvideo {}
	#inner.single.work .insec.musicvideo iframe {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	#inner.single.work .insec.other .fbox {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		gap: 44px 14px;
	}
	#inner.single.work .insec.other .fbox .box {
		width: calc((100% - 14px) / 2);
	}
	#inner.single.work .insec.other .fbox .box.hidden {
		display: none;
	}
	#inner.single.work .insec.other .fbox .box a {
		width: 100%;
		align-items: center;
		position: relative;
		aspect-ratio: initial;
		display: block;
	}
	#inner.single.work .insec.other .fbox .box a::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 0%;
		background: #141410;
		height: calc((92vw - 14px) / 2);
	}
	#inner.single.work .insec.other .fbox .box.active a::before {
		transition: 0.6s ease all;
		width: 100%;
	}
	#inner.single.work .insec.other .fbox .box .img {
		width: auto;
		aspect-ratio: 1/ 1;
		overflow: hidden;
		opacity: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#inner.single.work .insec.other .fbox .box.active .img {
		transition: all ease 0.6s +0.2s;
		opacity: 1;
	}
	#inner.single.work .insec.other .fbox .box .img img {
		width: 65%;
		object-fit: contain;
		opacity: 0.5;
		transition: all ease 0.3s;
	}
	#inner.single.work .insec.other .fbox .box .info {
        position: relative;
        left: auto;
        bottom: auto;
        color: #fff;
        font-size: 10px;
        opacity: 1;
        transition: all ease 0.3s;
        width: 100%;
        margin-top: -90px;
    }
	#inner.single.work .insec.other .fbox .box .info .year {}
	#inner.single.work .insec.other .fbox .box .info .artist {
        margin-top: 20px;
    }
	#inner.single.work .insec.other .fbox .box .info .name {
        margin-top: 0;
    }
	#inner.single.work .insec.other .fbox .box .info .creator {
        margin-top: 32px;
    }
	#inner.single.work .insec.other .fbox .box .info .creator .title {
        font-size: 8px;
        color: #a8a8a8;
    }
	#inner.single.work .insec.other .fbox .box .info .creator span {
        display: block;
        line-height: 1.5em;
        margin-top: 2px;
        font-size: 9px;
    }
	/**********************************************************/
	/* 404 */
	/**********************************************************/
	#error {
		text-align: center;
	}
	#error .content {
		text-align: center;
		padding: 150px 0;
	}
	#error h2 {
		font-size: 20px;
		margin-bottom: 50px;
		color: #000;
	}
	#error .bt_more {
		margin: 30px auto 0 auto;
	}
}