@charset "UTF-8";
/*-------------
vars
-------------*/
:root{
    --inner-width: 1200px;
    --inner-width_sp: 90.625vw;
    --inner-sides: 30px;
    --inner-sides_sp: 4.6875vw;
    --min-width: var(--inner-width);
    
    --theme-grad: linear-gradient(135deg, #f8ffb5, #44fff2);
    --theme-grad_rad: radial-gradient(#f8ffb5, #44fff2);
    --base-black: #333;
    --accent-black: #1a1a1a;
    
    --accent-gray: #ccc;
    --border-gray: #ccc;
    --bg-gray: #e6e6e6;
    --bg-light-gray: #f0f0f0;
    --text-gray: #999;
    
    --accent-blue: #146af5;
    --accent-yellow: #fcee21;
    --text-red: #e60012;

    --bg-arrow: url(../images/arrow_right.svg) no-repeat center right / auto;
    --bg-arrow_white: url(../images/arrow_right_white.svg) no-repeat center right / auto;
    --bg-arrow-slide: arrow-slide 1.5s ease infinite;
    
    --font-sans: "Noto Sans JP", sans-serif;
    --font-serif: "Shippori Mincho", serif;
    --font-en-sans: "Lexend", var(--font-sans);
    --font-en-serif: "DM Serif Display", var(--font-serif);
    --fontsize-base: 1.6rem;
    --line-height: calc(1em + min(1em, 16px));
    --letter-spacing: .05em;

    --linear: .5s linear;
    --ease: .5s ease;
}
@media screen and (max-width:768px){
    :root{
        --inner-width: var(--inner-width_sp);
        --inner-sides: var(--inner-sides_sp);
        --min-width: 320px;
        
        --bg-light-gray: var(--bg-gray);
        
        --fontsize-base: 1.4rem;
        --line-height: calc(1em + min(1em, 14px));
    }
}
@keyframes arrow-slide{
    0%{
        background-position: left 0 center;
    }
    20%{
        background-position: left 14px center;
    }
    40%{
        background: none;
    }
    60%{
        background-position: left -14px center;
    }
    80%{
        background-position: left 0 center;
    }
}

/*-------------
base
-------------*/
html{
    font-size: 62.5%;
}
body{
    width: 100%;
    min-width: calc(var(--inner-width) + (var(--inner-sides) * 2));
    background: #fff;
    color: var(--base-black);
    font-feature-settings: "palt" 1, "kern" 1;
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-size: var(--fontsize-base);
    line-height: normal;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}
@media screen and (max-width:768px){
    body{
        min-width: 320px;
    }
}
::selection{
    background: var(--accent-black);
    color: #fff;
}
.wrapper{
    position: relative;
}
.wrapper, .container{
    container-type: inline-size;
}
.wrapper *, .container *{
    --container-sides: calc(50cqw - (var(--inner-width) / 2));
}
h1, h2, h3, h4, h5, h6,
*:not(:where(span, a, b, i, em, strong, small, sub, sup, abbr, code, label, time, mark, q)){
    --my-1em: 1em;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
}
img{
    max-width: 100%;
    height: auto;
}
@media screen and (max-width:768px){
    img{
        width: 100%;
    }
}
body._preload *:not([data-effect]),
body._preload *:not([data-effect])::before,
body._preload *:not([data-effect])::after{
    transition: none!important;
}
@media screen and (min-width:769px){
    @keyframes view-fade-in {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes view-fade-out {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    @view-transition {
        navigation: auto;
    }
    ::view-transition-old(root) {
        animation: view-fade-out 1s ease-out;
    }
    ::view-transition-new(root) {
        animation: view-fade-in 1s ease-out;
    }
}

/*-------------
common
-------------*/
@media screen and (min-width:769px){
    .sp{
        display: none!important;
    }
}
@media screen and (max-width:768px){
    .pc{
        display: none!important;
    }
}
.clearfix::after,
.cf::after{
    content: "";
    display: block;
    clear: both;
}
.floatL, .l{
    float: left;
}
.floatR, .r{
    float: right;
}
.clearBoth, .c_b{
	clear:both;
}
.dispIB{
    display: inline-block;
}
img.dispIB{
    width: revert-layer;
    height: revert-layer;
}

/* margin */
.mRkern{
    margin-right: -.4em;
}
.mLkern{
    margin-left: -.4em;
}
.mLRkern{
    margin-right: -.4em;
    margin-left: -.4em;
}
.mB0{
	margin-bottom: 0px!important;
}
.mB5{
	margin-bottom: 5px!important;
}
.mB10{
	margin-bottom: 10px!important;
}
.mB15{
	margin-bottom: 15px!important;
}
.mB20{
	margin-bottom: 20px!important;
}
.mB30{
	margin-bottom: 30px!important;
}
.mR10{
	margin-right: 10px!important;
}

/* text */
.textInd, .txt_ind {
    text-indent: calc((1em + var(--letter-spacing)) * -1);
    padding-left: calc(1em + var(--letter-spacing));
}
.ffsPalt{
	font-feature-settings: "palt" 1;
}
.ffSans{
    font-family: var(--font-sans)!important;
}
.ffSerif{
    font-family: var(--font-serif)!important;
}
.ffSansEN{
    font-family: var(--font-en-sans)!important;
}
.ffSerifEN{
    font-family: var(--font-en-serif)!important;
}
.txtBlk{
    color: var(--accent-black)!important;
}
.txtRed{
    color: var(--text-red)!important;
}
.textSmall{
    font-size: max(.7em, 10px);
}
.textCenter, .txt_c{
    text-align: center;
}
.textRight, .txt_r{
    text-align: right;
}
.wsNowrap{
    white-space: nowrap;
}
@media screen and (min-width:769px){
    *:has(> wbr:not(.sp)){
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}
@media screen and (max-width:768px){
    *:has(> wbr.sp){
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}
.txt_b, .fWb{
    font-weight: bold;
}
.fW500{
    font-weight: 500;
}
.fW600{
    font-weight: 600;
}
mark{
    background: linear-gradient(to top, var(--accent-yellow) .0 .5em, rgba(255,255,255,0) .5em);
    color: var(--accent-black);
    font-weight: 500;
}
mark._not-bg{
    background: none;
}

/* a */
@media (any-hover: hover){
    :where(a:hover){
        text-decoration: none;
    }
}
.textLink:not(:hover){
    text-decoration: underline;
}
@media screen and (min-width:769px){
    body:not(.viewing_mobile) a[href^="tel:"]{
        text-decoration: none!important;
        pointer-events: none;
    }
}
.fadeHover{
    transition: opacity var(--ease);
}
@media (any-hover: hover){
    .fadeHover:hover{
        opacity: .7;
    }
    .undHover:not(:hover),
    .hoverUnd:hover{
        text-decoration: underline;
    }
}
:where(a:has(> img:only-child)),
:where(a:has(> picture:only-child)){
    transition: opacity var(--ease);
}
@media (any-hover: hover){
    :where(a:has(> img:only-child)):hover,
    :where(a:has(> picture:only-child)):hover{
        opacity: .7;
    }
}

/* loading */
@keyframes loading-dots{
    0%,
    80%,
    100%{
        box-shadow: 0 var(--dotSize) 0 calc(var(--dotSize) * -.75) var(--dotColor);
    }
    40%{
        box-shadow: 0 var(--dotSize) 0 0 var(--dotColor);
    }
}
.loadingDots{
    --dotSize: 20px;
    --dotColor: var(--accent-gray);
    position: relative;
}
@media screen and (max-width:768px){
    .loadingDots{
        --dotSize: 14px;
    }
}
.loadingDots,
.loadingDots::before,
.loadingDots::after{
    width: var(--dotSize);
    height: var(--dotSize);
    border-radius: 50%;
    animation-fill-mode: both;
    animation: loading-dots 1.8s infinite ease-in-out;
}
.loadingDots{
    transform: translate(calc(var(--dotSize) / -2), calc(var(--dotSize) * -1.5));
    font-size: 0;
    animation-delay: -0.16s;
}
.loadingDots::before,
.loadingDots::after{
    position: absolute;
    top: 0;
    z-index: 1;
    content: '';
}
.loadingDots::before{
    left: calc((var(--dotSize) + 10px) * -1);
    animation-delay: -0.32s;
}
.loadingDots::after{
    left: calc(var(--dotSize) + 10px);
}

/*-------------
data-effect
-------------*/
.wrapper *{
    --fade-transition: transform .8s ease, opacity .8s ease;
}
@media screen and (max-width:768px){
    :root{
        --fade-transition: transform .4s ease, opacity .4s ease;
    }
}
*[data-effect^="fade"]{
    opacity: 0;
    transition: var(--fade-transition);
}
*[data-effect="fade-up"]{
    transform: translateY(min(50dvh, 20%));
}
.wrapper *{
    --fade-left: translateX(max( -20%, calc(var(--container-sides) * -1)));
}
*[data-effect="fade-left"]{
    transform: var(--fade-left);
}
.wrapper *{
    --fade-right: translateX(min(var(--container-sides), 20%));
}
*[data-effect="fade-right"]{
    transform: var(--fade-right);
}
*[data-effect^="fade"][class*="_fade"]{
    opacity: 1;
    transform: none;
}

/*-------------
button
-------------*/
.readMore a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68px;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-en-serif);
    font-size: 1.8rem;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .readMore a{
        height: 58px;
        font-size: 1.6rem;
    }
}

/* beforeGrad */
@keyframes before-grad{
    0%{
        background-position: left 0 center;
    }
    100%{
        background-position: left 100% center;
    }
}
.beforeGrad a::before{
    opacity: 0;
    mix-blend-mode: color;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--theme-grad);
    background-size: 200%;
    content: "";
    pointer-events: none;
    animation: before-grad 3s linear infinite alternate;
    animation-play-state: paused;
    transition: opacity var(--ease);
}
@media (any-hover: hover){
    .beforeGrad a:hover::before{
        opacity: 1;
        animation-play-state: running;
    }
}

/* viewmoreBtn */
.viewmoreBtn-box{
    width: min(var(--inner-width), 100%);
    margin: 60px auto;
    padding-top: 60px;
    border-top: solid 1px var(--accent-gray);
}
@media screen and (max-width:768px){
    .viewmoreBtn-box{
        margin-top: 30px;
        padding-top: 30px;
    }
}
.viewmoreBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    width: 480px;
    height: 69px;
    margin: 0 auto;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-en-serif);
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
}
.viewmoreBtn::before{
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
    background: var(--bg-arrow_white);
    content: "";
}
@media (any-hover: hover){
    .viewmoreBtn:hover::before{
        animation: var(--bg-arrow-slide);
    }
}
@media screen and (max-width:768px){
    .viewmoreBtn{
        gap: 0 8px;
        width: 100%;
        height: 58px;
        font-size: 1.6rem;
    }
    .viewmoreBtn::before{
        width: 14px;
        height: 14px;
        background: var(--bg-arrow_white);
    }
}

/*-------------
site-loading
-------------*/
.site-loading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100dvh;
    background: #fff;
    --hole-size: 0%; /* カスタムプロパティで穴の大きさを制御 */

    -webkit-mask-image: radial-gradient(circle, white var(--hole-size), white calc(var(--hole-size) + 1%));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;

    mask-image: radial-gradient(circle, white var(--hole-size), white calc(var(--hole-size) + 1%));
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;

    transition: opacity 0.8s ease-out;
}
.site-loading._loaded{
    opacity: 0;
}
.site-loading-gauge{
    --loading-gauge: 0;
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: 50%;
}
/* .site-loading-gauge::before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: var(--accent-blue);
    -webkit-mask-image: conic-gradient(#000 0 var(--loading-gauge), rgba(255,255,255,0) var(--loading-gauge) 100%);
    mask-image: conic-gradient(#000 0 var(--loading-gauge), rgba(255,255,255,0) var(--loading-gauge) 100%);
    content: "";
} */
.site-loading-progress{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin: 2px;
    border-radius: 50%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    position: relative;
    z-index: 1000;
}

.site-loading-bg svg{
    width: 400px!important;
    height: 400px!important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.site-loading-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

@media screen and (max-width:768px){
    .site-loading-bg svg{
        width: 250px!important;
        height: 250px!important;
    }
}
@media screen and (max-width:300px){
    .site-loading-bg svg{
        width: 100%!important;
        height: 100%!important;
    }
}
/*-------------
accordion
-------------*/
.accordion-btn:not(.is--ready){
    pointer-events: none;
}
.accordion-btn.is--ready{
    cursor: pointer;
}
@media screen and (max-width:768px){
    .accordion-btn_sp:not(.is--ready){
        pointer-events: none;
    }
    .accordion-btn_sp.is--ready{
        cursor: pointer;
    }
}
.accordion-btn:not(._active):not([data-target-class]) + *:not(.accordion-container),
.accordion-content{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .accordion-btn_sp:not(._active):not([data-target-class]) + *:not(.accordion-container),
    .accordion-content_sp{
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
}
.accordion-container{
    overflow: hidden;
    transition: height .3s ease;
}
.accordion-container.is--hit_low{
    transition: height .2s ease;
}
.accordion-container:not(.is--open){
    height: 0!important;
}
@media screen and (min-width:769px){
    .accordion-container.is--limit_sp{
        height: auto!important;
    }
}

/*-------------
bg-gradation
-------------*/
.bg-gradation{
    --grad-opacity: 1;
    opacity: var(--grad-opacity);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateZ(0);
    width: 100%;
    height: 660px;
    font-size: 0;
    user-select: none;
    pointer-events: none;
    transition: opacity .5s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
}
.bg-gradation._hide{
    opacity: 0;
}
.bg-gradation::before{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 290px;
    background: linear-gradient(to top, rgba(255,255,255,.6), rgba(255,255,255,0));
    content: "";
}
.bg-gradation::after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 240px;
    background: linear-gradient(to top, #fff, rgba(255,255,255,0));
    content: "";
}
@media screen and (max-width:768px){
    .bg-gradation{
        height: 120vw;
    }
    .bg-gradation::before{
        height: 50vw;
    }
    .bg-gradation::after{
        height: 45vw;
    }
}
.bg-gradation._bottom{
    top: auto;
    bottom: 0;
    height: 690px;
}
.bg-gradation._bottom::before{
    top: 0;
    bottom: auto;
    transform: rotate(180deg);
    height: 360px;
}
.bg-gradation._bottom::after{
    top: 0;
    bottom: auto;
    transform: rotate(180deg);
    height: 300px;
}
@media screen and (max-width:768px){
    .bg-gradation._bottom{
        height: 600px;
    }
    .bg-gradation._bottom::before{
        height: 90px;
    }
    .bg-gradation._bottom::after{
        height: 60px;
    }
}
.bg-gradation-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .5s ease;
}

/*-------------
header
-------------*/
body{
    --header-ini-hit: 90px;
    --header-hit: var(--header-ini-hit);
}
@media screen and (max-width:768px){
    body{
        --header-ini-hit: 45px;
    }
}
.header{
    position: relative;
    z-index: 99;
    width: 100%;
    height: var(--header-ini-hit);
}
.header .header-inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 20px;
    position: relative;
    z-index: 99;
    width: 100%;
    height: var(--header-hit);
    padding: 0 var(--inner-sides);
}
.header .header-inner:not(._fixed){
    transition: opacity var(--ease), background var(--ease), backdrop-filter var(--ease);
}
@media screen and (max-width:768px){
    .header .header-inner{
        display: flex;
        align-items: center;
        z-index: 100;
        padding-right: 0;
    }
}
.header .header-inner._fixed{
    opacity: 0;
    transform: translateY(calc(var(--header-hit) * -1));
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(2px);
}
.header .header-inner._fixed._down{
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s ease, transform .5s ease;
}
.header .header-inner._fixed._up{
    opacity: 0;
    transform: translateY(calc(var(--header-hit) * -1));
}
.header .header-logo{
    display: flex;
    align-items: center;
    margin-right: auto;
}
@media screen and (max-width:768px){
    .header .header-logo{
        flex: 0 0 auto;
        width: 168px;
    }
}
.header-menu-btn{
    display: none;
}
@media screen and (max-width:768px){
    .header .header-menu-btn{
        display: block;
        flex: 0 0 auto;
        position: relative;
        width: calc(33px + (var(--inner-sides_sp) * 2));
        height: 100%;
        padding: 0 var(--inner-sides_sp);
        background: linear-gradient(to top, var(--accent-black), var(--accent-black)) no-repeat top 17px left var(--inner-sides_sp) / 33px 1px,
        linear-gradient(to top, var(--accent-black), var(--accent-black)) no-repeat bottom 17px left var(--inner-sides_sp) / 33px 1px;
        color: rgba(255,255,255,0);
        font-size: 0;
        pointer-events: auto;
    }
    .header .header-menu-btn._open{
        background: none;
    }
    .header .header-menu-btn::before,
    .header .header-menu-btn::after{
        position: absolute;
        top: calc(50% - .5px);
        left: var(--inner-sides_sp);
        width: 33px;
        height: 1px;
        background: var(--accent-black);
        content: "";
        transition: transform var(--ease);
    }
    .header .header-menu-btn._open::before{
        transform: rotate(-20deg);
    }
    .header .header-menu-btn._open::after{
        transform: rotate(20deg);
    }
}
.header .header-menu,
.header .header-nav{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
}
.header .header-nav a{
    color: var(--accent-black);
    font-family: var(--font-en-sans);
    font-size: 1.8rem;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .header .header-menu{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100dvh;
        background: #fff;
        transition: opacity .5s ease;
    }
    .header .header-menu:not(._active),
    .header .header-menu:not(._active) *{
        z-index: -999;
        pointer-events: none;
        animation-play-state: paused;
    }
    .header .header-menu:not(._show){
        opacity: 0;
    }
    .header .header-nav{
        display: flex;
        flex-direction: column;
        height: min(200vw, 100%);
        padding: 0 var(--inner-sides_sp) calc(15px + env(safe-area-inset-bottom));
        font-size: 1.6rem;
        pointer-events: none;
        transition: transform .5s ease;
    }
    .header .header-menu:not(._show) .header-nav{
        transform: scale(.96);
    }
    .header .header-nav *{
        pointer-events: auto;
    }
}
.header .header-nav-list{
    display: flex;
    justify-content: center;
    gap: 0 30px;
}
.header .header-nav-list-item a{
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    padding: 0 10px;
    line-height: calc(1em + 4px);
}
@media screen and (max-width:768px){
    .header .header-nav-list{
        display: block;
        margin: auto 0;
    }
    .header .header-nav-list-item a{
        display: block;
        height: auto;
        padding: 13px 0;
    }
}
.header .header-contact{
    margin-left: auto;
}
.header .header-contact a{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0 10px;
    position: relative;
    width: 142px;
    height: 100%;
    line-height: calc(1em + 4px);
}
.header .header-contact a::before{
    position: absolute;
    top: 20px;
    left: 0;
    width: 1px;
    height: calc(100% - 40px);
    background: var(--accent-gray);
    content: "";
}
.header .header-contact a::after{
    flex: 0 0 auto;
    width: 14px;
    height: 10px;
    background: var(--bg-arrow);
    content: "";
}
@media (any-hover: hover){
    .header .header-contact a:hover::after{
        animation: var(--bg-arrow-slide);
    }
}
@media screen and (max-width:768px){
    .header .header-contact{
        margin: 0;
    }
    .header .header-contact a{
        justify-content: space-between;
        width: 100%;
        height: auto;
        padding: 19px 0 18px;
    }
    .header .header-contact a::before{
        top: 0;
        left: 0;
        transform-origin: left center;
        width: 100%;
        height: 1px;
        background: var(--accent-black);
        transition: transform var(--ease);
    }
    .header .header-menu:not(._show) .header-contact a::before{
        transform: scaleX(0);
    }
}

/*-------------
footer
-------------*/
.footer{
    position: relative;
    margin: 150px var(--inner-sides) 0;
    padding: 61px 0 100px;
}
@media screen and (max-width:768px){
    .footer{
        margin-top: 80px;
        padding: 41px 0 min(80px, calc(50px + env(safe-area-inset-bottom)));
    }
}
.footer-top{
    display: flex;
    align-items: flex-start;
    gap: 0 14px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}
.footer-top::before{
    flex: 1 1 auto;
    height: 1px;
    border-top: solid 1px var(--accent-black);
    content: "";
}
@media screen and (max-width:768px){
    .footer-top{
        gap: 0 10px;
    }
}
.footer-pagetop{
    flex: 0 0 auto;
    transform: translateY(-50%);
    pointer-events: auto;
}
.footer-pagetop a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    color: var(--accent-black);
    font-family: var(--font-en-sans);
    font-size: 1.6rem;
    line-height: 1;
    transition: background var(--ease);
}
.footer-pagetop a::before{
    flex: 0 0 auto;
    transform: rotate(-90deg);
    width: 14px;
    height: 14px;
    background: var(--bg-arrow);
    content: "";
}
@media (any-hover: hover){
    .footer-pagetop a:hover::before{
        animation: var(--bg-arrow-slide);
    }
}
@media screen and (max-width:768px){
    .footer-pagetop a{
        gap: 8px;
        padding: 13px 0;
        font-size: 1.4rem;
    }
}
.footer-inner{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: var(--inner-width);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .footer-inner{
        flex-direction: column;
        gap: 40px 0;
    }
}
.footer-nav{
    flex: 0 0 auto;
    min-width: 340px;
}
.footer-nav-list{
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0 30px;
}
.footer-nav-list-item a{
    display: block;
    padding: 9px 0;
    color: var(--accent-black);
    font-family: var(--font-en-sans);
    font-size: 1.8rem;
    line-height: calc(1em + 2px);
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .footer-nav{
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0 20px;
        min-width: 0;
    }
    .footer-nav-list{
        display: block;
        width: 34.375vw;
    }
    .footer-nav-list-item a{
        font-size: 1.6rem;
    }
}
.footer-contact{
    width: 240px;
    margin: 50px auto 0 0;
}
.footer-contact a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-en-serif);
    font-size: 1.8rem;
    letter-spacing: .1em;
    text-align: center;
}
@media screen and (max-width:768px){
    .footer-contact{
        width: unset;
        margin: 0;
    }
    .footer-contact a{
        height: 50px;
        font-size: 1.6rem;
    }
}
.footer-info{
    display: flex;
    flex-direction: column;
    min-height: 210px;
}
.footer-logo{
    margin-bottom: 24px;
}
.footer-address{
    margin-bottom: 40px;
    line-height: calc(1em + 10px);
}
.footer-address-head{
    margin-bottom: 9px;
}
.footer-copy{
    display: block;
    margin-top: auto;
    color: var(--accent-black);
    font-family: var(--font-en-sans);
    font-size: 1.4rem;
    line-height: calc(1em + 2px);
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .footer-info{
        display: block;
        min-height: 0;
    }
    .footer-logo{
        width: 256px;
        margin: 0 auto 25px 0;
    }
    .footer-copy{
        font-size: 1.3rem;
    }
}

/*-------------
top-page
-------------*/
.top-page .bg-gradation._top{
    height: 100dvh;
    transition: none;
}
.top-page .bg-gradation._top::before,
.top-page .bg-gradation._top::after{
    content: none;
}
.top-page .bg-gradation._bottom{
    opacity: 1;
    position: absolute;
    top: auto;
    bottom: 0;
    height: 660px;
}
.top-page .bg-gradation._bottom::before{
    height: 330px;
    background: linear-gradient(to top, rgba(255,255,255,.6) 0 120px, rgba(255,255,255,0));
}
.top-page .bg-gradation._bottom::after{
    height: 150px;
}
@media screen and (max-width:768px){
    .top-page .bg-gradation._bottom{
        height: 630px;
    }
    .top-page .bg-gradation._bottom::before{
        height: 315px;
        background: linear-gradient(to top, rgba(255,255,255,.6) 0 120px, rgba(255,255,255,0));
    }
    .top-page .bg-gradation._bottom::after{
        height: 75px;
    }
}

/* header_fv */
.header._top,
.header_fv{
    position: absolute;
    top: 20px;
    right: var(--inner-sides);
    z-index: 99;
}
.header_fv .header-logo{
    display: none;
}
.header_fv .header-nav a{
    display: block;
    min-width: 110px;
    padding: 8px 0;
    color: var(--accent-black);
    font-family: var(--font-en-sans);
    font-size: 1.8rem;
    line-height: calc(1em + 2px);
    letter-spacing: 0;
}
.header_fv .header-nav-list-item a{
    border-bottom: solid 1px currentColor;
}
@media screen and (max-width:768px){
    .header_fv{
        top: 13px;
    }
    .header_fv .header-nav a{
        min-width: 90px;
        padding: 6px 0;
        font-size: clamp(14px, 4.375vw, 1.6rem);
    }
}
@media screen and (max-width:768px){
    .header._firstview .header-menu{
        transition: none!important;
    }
}

/* top-hero */
.top-hero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100dvh;
    overflow: hidden;
}
@keyframes topHeroBgFade {
    0%   { opacity: 0; }
    20%  { opacity: 0; }
    50%  { opacity: 1; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes topHeroBgRotate {
    0%   { transform: rotate(0); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
.top-hero-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    height: 600px;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    user-select: none;
    transition: opacity 1.2s ease .6s, transform 1.2s ease .6s;
}
body:not(._loaded) .top-hero-bg,
body._loading .top-hero-bg{
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2) rotate(-5deg);
}
@media screen and (max-width:768px){
    .top-hero-bg{
        height: min(140vw, 50%);
    }
}
.top-hero-bg img{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.top-hero-bg img:nth-child(1){
    animation: topHeroBgFade 36s infinite ease-out -18s, topHeroBgRotate 150s linear infinite;
}
.top-hero-bg img:nth-child(2){
    animation: topHeroBgFade 36s infinite ease-in-out -6s, topHeroBgRotate 90s linear infinite;
}
.top-hero-bg img:nth-child(3){
    animation: topHeroBgFade 36s infinite ease-out 6s, topHeroBgRotate 120s linear infinite;
}
body:is(._preload, ._loading) .top-hero-bg img{
    animation-play-state: paused;
}
.top-hero-catch{
    filter: drop-shadow(1px 1px 0 rgba(255,255,255,.5)) 
    drop-shadow(-1px -1px 0 rgba(255,255,255,.5)) 
    drop-shadow(0 0 5px rgba(255,255,255,.1));
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
    padding-bottom: 20px;
    transition: opacity 1s ease .2s, transform 1s ease .2s;
}
body:not(._loaded) .top-hero-catch,
body._loading .top-hero-catch{
    opacity: 0;
    transform: scale(.96);
}
@media screen and (max-width:768px){
    .top-hero-catch{
        padding-bottom: min(90px, 21.875vw);
    }
}
.top-hero-catch__logo img{
    display: block;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .top-hero-catch__logo img{
        width: min(480px, 80vw);
    }
}
.top-hero-catch-main{
    display: inline-block;
    margin: 20px 0 0 auto;
    color: var(--accent-black);
    font-family: var(--font-serif);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: calc(1em + 2px);
    letter-spacing: .02em;
    transition: opacity .7s ease .7s, transform .7s ease .7s;
}
body._preload .top-hero-catch-main,
body._loading .top-hero-catch-main{
    opacity: 0;
    transform: translateX(1em);
}
.top-hero-catch-main .__big{
    font-size: 3rem;
}
@media screen and (max-width:768px){
    .top-hero-catch-main{
        margin-top: 10px;
        font-size: clamp(11px, 3.4375vw ,1.4rem);
    }
    .top-hero-catch-main .__big{
        font-size: clamp(13px, 4.0625vw, 1.8rem);
    }
}
.top-hero-scroll-msg{
    position: absolute;
    right: var(--inner-sides);
    bottom: 20px;
    min-width: 110px;
}
.top-hero-scroll-msg a{
    display: flex;
    align-items: center;
    gap: 0 9px;
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0;
}
.top-hero-scroll-msg a::after{
    flex: 0 0 auto;
    transform: rotate(90deg);
    width: 14px;
    height: 14px;
    background: var(--bg-arrow);
    content: "";
    animation: var(--bg-arrow-slide);
}
@media screen and (max-width:768px){
    .top-hero-scroll-msg{
        min-width: 0;
    }
    .top-hero-scroll-msg a{
        gap: 0 6px;
        font-size: 1.4rem;
    }
}

/* top-lead */
.top-lead{
    position: relative;
    padding: 89px 0 150px;
}
.top-lead::before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: calc(100% + 300px);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0 120px, rgba(255,255,255,.6));
    content: "";
}
.top-lead-inner{
    width: 800px;
    margin: 0 auto;
}
.top-lead-title{
    --my-count: 0%;
    margin-bottom: 42px;
    color: var(--accent-black);
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 500;
    line-height: calc(1em + 20px);
    letter-spacing: .05em;
    overflow: hidden;
}
.top-lead-title-inner{
    opacity: calc(var(--my-count) * .01);
    -webkit-mask-image: linear-gradient(to right, #000 0 calc(var(--my-count) * 1%), rgba(0,0,0,0) calc(var(--my-count) * 1%));
    mask-image: linear-gradient(to right, #000 0 calc(var(--my-count) * 1%), rgba(0,0,0,0) calc(var(--my-count) * 1%));
}
.top-lead-body{
    opacity: 0;
    transition: opacity 1s ease .6s;
}
body._loaded .top-lead-title._action ~ .top-lead-body{
    opacity: 1;
}
.top-lead-btn{
    width: 240px;
    margin: 60px auto 0 0;
}
@media screen and (max-width:768px){
    .top-lead{
        padding: 53px 0 80px;
    }
    .top-lead::before{
        top: 40px;
        height: calc((100% + 100dvh) - 190px);
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0 45vw, rgba(255,255,255,.6));
    }
    .top-lead-inner{
        width: 84.375%;
        margin: 0 auto;
    }
    .top-lead-title{
        margin-bottom: 26px;
        font-size: 2.5rem;
        letter-spacing: .04em;
    }
    .top-lead-btn{
        width: 100%;
        margin-top: 34px;
    }
}

/* top-columns */
.top-columns{
    position: relative;
    margin-bottom: 150px;
}
.top-columns::before{
    position: absolute;
    top: -30px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: calc(100% + 100dvh);
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 300px);
    content: "";
}
@media screen and (max-width:768px){
    .top-columns{
        margin-bottom: 60px;
    }
    .top-columns::before{
        top: -150px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 100vw);
    }
}
.top-columns-inner{
    width: var(--inner-width);
    margin: 0 auto;
    transition: opacity var(--ease);
}
.top-columns-inner:not(._is-show){
    opacity: 0;
}
.top-columns-title{
    margin-bottom: 40px;
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 48px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}
@media screen and (max-width:768px){
    .top-columns-title{
        margin-bottom: 20px;
        font-size: 36px;
    }
}
.top-columns-pickup{
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}
@media screen and (max-width:768px){
    .top-columns-pickup{
        flex-direction: column;
        gap: 25px 0;
    }
}
.top-columns .columns-pickup-item{
    flex: 0 0 auto;
    width: 360px;
    transition: var(--fade-transition); 
}
.top-columns-inner:not(._is-show) .columns-pickup-item{
    opacity: 0;
    transform: var(--fade-right);
}
@media screen and (max-width:768px){
    .top-columns .columns-pickup-item{
        flex-direction: column;
        gap: 25px 0;
    }
    .top-columns .columns-pickup-item{
        width: 100%;
    }
}
.top-columns .columns-pickup-item-inner{
    height: 100%;
}
.top-columns .columns-pickup-item a{
    display: flex;
    flex-direction: column;
    height: 100%;
}
@media screen and (max-width:768px){
    .top-columns .columns-pickup-item a{
        display: block;
    }
}
.top-columns .columns-pickup-item-thumb{
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 25px;
    overflow: hidden;
    border-radius: 10px;
}
.top-columns .columns-pickup-item-thumb::before{
    mix-blend-mode: darken;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: solid 1px var(--border-gray);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}
@media screen and (max-width:768px){
    .top-columns .columns-pickup-item-thumb{
        margin-bottom: 9px;
    }
}
.top-columns .columns-pickup-item-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ease);
}
@media (any-hover: hover){
    .top-columns a:hover .columns-pickup-item-thumb img{
        transform: scale(1.1);
    }
}
.top-columns .columns-pickup-item-title{
    margin-bottom: 25px;
    color: var(--accent-black);
    font-weight: 500;
    line-height: calc(1em + 12px);
}
@media screen and (max-width:768px){
    .top-columns .columns-pickup-item-title{
        margin-bottom: 13px;
        line-height: calc(1em + 11px);
    }
}
.top-columns .columns-pickup-item-more{
    display: flex;
    align-items: center;
    gap: 0 8px;
    margin-top: auto;
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0;
}
.top-columns .columns-pickup-item-more::after{
    flex: 0 0 auto;
    width: 14px;
    height: 10px;
    background: var(--bg-arrow);
    content: "";
}
@media (any-hover: hover){
    .top-columns a:hover .columns-pickup-item-more::after{
        animation: var(--bg-arrow-slide);
    }
}

/* top-sect */
.top-sect-title{
    width: min(100%, var(--inner-width));
    margin: 0 auto 60px;
}
.top-sect-title::before{
    display: block;
    margin-bottom: 18px;
    color: #000;
    font-family: var(--font-en-serif);
    font-size: 80px;
    line-height: 1;
    letter-spacing: 0;
    content: attr(data-en);
}
.top-sect-title-inner{
    display: block;
    position: relative;
    padding-left: 18px;
    color: var(--accent-black);
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: calc(1em + 4px);
    letter-spacing: .02em;
}
.top-sect-title-inner::before{
    position: absolute;
    top: calc(.5em - 1px);
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: currentColor;
    content: "";
}
@media screen and (max-width:768px){
    .top-sect-title{
        margin-bottom: 23px;
    }
    .top-sect-title::before{
        margin-bottom: 13px;
        font-size: 50px;
    }
    .top-sect-title-inner{
        padding-left: 16px;
        font-size: 1.6rem;
    }
    .top-sect-title-inner::before{
        top: calc(.5em - 2px);
    }
}

/* top-feature */
.top-feature{
    --my-sect-hit: min(720px, calc(100dvh - (180px + var(--header-hit))));
    --my-sect-sticky: calc((100dvh - var(--my-sect-hit)) / 2);
    position: relative;
    width: var(--inner-width);
    margin: 0 auto 100px;
    padding-right: 630px;
}
@media screen and (max-width:768px){
    .top-feature{
        --my-sect-hit: 50dvh;
        display: block;
        width: 100%;
        margin-bottom: 45px;
        padding-right: 0;
        counter-reset: sectNum;
    }
}
.top-feature-visual{
    position: absolute;
    top: 0;
    right: 30px;
    width: 540px;
    height: 100%;
}
/* .top-feature-visual-inner{
    position: sticky;
    top: var(--my-sect-sticky);
    right: 0;
    width: 100%;
    height: var(--my-sect-hit);
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(0,0,0,.2);
}
.top-feature-visual-pic{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform var(--ease);
}
.top-feature-visual-pic:not(._show){
    transform: translateX(100%);
}
.top-feature-visual-pic:has(+ .top-feature-visual-pic._show){
    transform: translateX(-100%);
}
.top-feature-visual-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} */
.top-feature-visual-inner{
    position: sticky;
    top: var(--my-sect-sticky);
    right: 0;
    width: 100%;
    height: var(--my-sect-hit);
    perspective: 900px;
}
.top-feature-visual-pic{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(0,0,0,.2);
    transition: opacity 1s ease, filter .5s ease .1s, transform 1s ease, box-shadow 1s ease;
}
.top-feature-visual-pic:not(._show){
    filter: blur(5px);
    transform: scale(1.02);
    box-shadow: none;
}
.top-feature-visual-pic:not(:first-child):not(._show){
    opacity: 0;
}
.top-feature-visual-pic:has(+ .top-feature-visual-pic._show){
    opacity: 0;
    transform: scale(.98) translateZ(-50px);
}
.top-feature-visual-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width:768px){
    .top-feature-visual{
        display: none;
    }
}
.top-feature-container{
    position: static;
}
@media screen and (max-width:768px){
    .top-feature-container{
        position: relative;
        width: 100%;
        padding: 0 var(--inner-sides_sp) 56px;
    }
}
.top-feature-sect{
    min-height: var(--my-sect-hit);
    transition: opacity .25s ease .25s;
}
@media screen and (min-width:769px){
    .top-feature-sect:not(._show){
        opacity: .25;
    }   
}
.top-feature-sect:not(:has(+ .top-feature-gauge)){
    padding-bottom: 100px;
}
@media screen and (max-width:768px){
    .top-feature-sect{
        min-height: 0;
    }
    .top-feature-sect:not(:has(+ .top-feature-gauge)){
        padding-bottom: 80px;
    }
}
.top-feature-sect__visual{
    display: none;
}
@media screen and (max-width:768px){
    .top-feature-sect__visual{
        display: block;
        position: relative;
        aspect-ratio: 9 / 7;
        margin-bottom: 21px;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 2px 12px rgba(0,0,0,.2);
    }
    .top-feature-sect__visual::before{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, -50%);
        color: var(--text-gray);
        font-family: var(--font-en-sans);
        font-size: 20px;
        content: counter(sectNum, decimal-leading-zero);
        counter-increment: sectNum;
    }
    .top-feature-sect__visual img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity var(--ease);
    }
    .top-feature-sect:not(._show) .top-feature-sect__visual img{
        opacity: 0;
    }
    .top-feature-sect__visual ~ *{
        transition: opacity .5s ease;
    }
    .top-feature-sect:not(._show) .top-feature-sect__visual ~ *{
        opacity: 0;
    }
}
.top-feature-term{
    margin-bottom: 23px;
    color: var(--accent-black);
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: calc(1em + 8px);
    letter-spacing: .02em;
}
.top-feature-desc-head{
    margin-bottom: 38px;
    color: var(--accent-black);
    font-size: 36px;
    font-weight: bold;
    line-height: calc(1em + 27px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .top-feature-term{
        margin-bottom: 9px;
        font-size: 2rem;
    }
    .top-feature-desc-head{
        margin-bottom: 16px;
        font-size: 2.4rem;
        line-height: calc(1em + 14px);
    }
}
.top-feature-btn{
    width: 200px;
    margin: 53px auto 0 0;
}
.top-feature-btn a{
    height: 60px;
    font-size: 1.6rem;
}
@media screen and (max-width:768px){
    .top-feature-btn{
        width: min(200px, 53.125vw);
        margin-top: 18px;
    }
    .top-feature-btn a{
        height: 50px;
        font-size: 1.4rem;
    }
}
.top-feature-gauge{
    position: absolute;
    top: 0;
    right: -30px;
    width: 30px;
    height: 100%;
}
.top-feature-gauge-inner{
    --my-progress: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px 0;
    position: sticky;
    top: var(--my-sect-sticky);
    right: 0;
    width: 100%;
    height: var(--my-sect-hit);
    padding: 85px 0;
}
.top-feature-gauge-num{
    flex: 0 0 auto;
    color: #666;
    font-family: var(--font-en-sans);
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}
.top-feature-gauge-bar{
    flex: 1 1 auto;
    position: relative;
    width: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bg-gray);
}
.top-feature-gauge-bar::before{
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleY(var(--my-progress));
    transform-origin: top center;
    width: 100%;
    height: 100%;
    background: var(--accent-blue);
    content: "";
    transition: transform var(--ease);
}
@media screen and (max-width:768px){
    .top-feature-gauge{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .top-feature-gauge-inner{
        flex-direction: row;
        gap: 0 10px;
        top: unset;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 46px;
        padding: 0 var(--inner-sides_sp);
        background: rgba(255,255,255,.75);
    }
    .top-feature-gauge-num{
        flex: 0 0 auto;
        color: #666;
        font-family: var(--font-en-sans);
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0;
        text-align: center;
    }
    .top-feature-gauge-bar{
        width: 100%;
        height: 4px;
    }
    .top-feature-gauge-bar::before{
        transform: scaleX(var(--my-progress));
        transform-origin: left center;
    }
}

/* top-works */
.top-works{
    margin-bottom: 120px;
    padding: 100px 0 80px;
    background: var(--accent-black);
}
@media screen and (max-width:768px){
    .top-works{
        margin-bottom: 50px;
        padding: 50px 0 60px;
    }
}
.top-works *,
.top-works *::before,
.top-works *::after{
    color: #fff;
}
@media screen and (min-width:769px){
    .top-works .top-sect-title{
        margin-bottom: 39px;
    }
}
.top-works-list-container{
    min-height: 360px;
}
@media screen and (max-width:768px){
    .top-works-list-container{
        position: relative;
        z-index: 0;
        min-height: 0;
        padding-bottom: 26px;
    }
    .top-works-list-container::before{
        -webkit-mask-image: linear-gradient(to right, #000, rgba(0,0,0,0));
        mask-image: linear-gradient(to right, #000, rgba(0,0,0,0));
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 60px;
        background: linear-gradient(to top, var(--base-black), rgba(26,26,26,0));
        content: "";
    }
}
.top-works-list:not(._ready){
    display: none;
}
.top-works-list.keen-slider{
    width: 2660px!important;
}
.top-works-list .works-list-item{
    width: 380px;
    padding: 0 10px;
}
@media screen and (max-width:768px){
    .top-works-list.keen-slider{
        --slide-wid: 67.5vw;
        width: calc(var(--slide-wid) * 3)!important;
    }
    .top-works-list .works-list-item{
        width: var(--slide-wid);
        padding: 0 calc((var(--slide-wid) - 62.5vw) / 2);
    }
}
.top-works-list .works-list-item a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.top-works-list .works-list-thumb{
    width: 100%;
    aspect-ratio: 8 / 5;
    margin-bottom: 30px;
}
@media screen and (max-width:768px){
    .top-works-list .works-list-thumb{
        margin-bottom: 15px;
    }
}
.top-works-list .works-list-thumb_pc{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    transition: opacity var(--ease);
}
@media (any-hover: hover){
    .top-works-list a:hover .works-list-thumb_pc{
        opacity: .75;
    }
}
.top-works-list .works-list-thumb_pc img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-works-list .works-list-thumb_sp{
    display: none;
}
.top-works-list .works-list-type{
    display: inline-flex;
    margin-bottom: 5px;
    padding: 6px 13px 7px;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    color: var(--accent-black);
    font-size: 1.2rem;
    font-weight: bold;
    line-height: calc(1em + 1px);
    letter-spacing: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (max-width:768px){
    .top-works-list .works-list-type{
        margin-bottom: 6px;
        padding: 6px 12px 7px;
        font-size: 1rem;
    }
}
.top-works-list .works-list-name{
    font-weight: 500;
    line-height: calc(1em + 12px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .top-works-list .works-list-name{
        line-height: calc(1em + 8px);
    }
}
.top-works-body{
    --my-hit: 360px;
    position: relative;
    width: var(--inner-width);
    margin: calc(var(--my-hit) * -1) auto 0;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .top-works-body{
        margin: 0 auto;
    }
}
.top-works-body *{
    pointer-events: auto;
}
.top-works-lead{
    display: flex;
    flex-direction: column;
    width: 360px;
    min-height: calc(var(--my-hit) + 20px);
    margin-left: -40px;
    padding: 20px 40px;
    background: var(--accent-black);
}
@media screen and (max-width:768px){
    .top-works-lead{
        width: 100%;
        min-height: 0;
        margin-left: 0;
        padding: 30px 0 0;
    }
}
.top-works-lead-head{
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .top-works-lead-head{
        font-size: 1.6rem;
    }
}
.top-works-lead-catch{
    display: flex;
    align-items: flex-end;
    margin-bottom: 13px;
}
.top-works-lead-catch .__num{
    --my-count: 1;
    display: block;
    flex: 0 0 auto;
    position: relative;
    margin-right: 10px;
    color: rgba(255,255,255,0);
    font-family: var(--font-en-sans);
    font-size: 90px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
}
.top-works-lead-catch .__num::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    overflow: hidden;
    content: attr(data-my-count);
}
.top-works-lead-catch .__unit{
    flex: 0 0 auto;
    padding-bottom: 15px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .top-works-lead-catch{
        margin-bottom: 13px;
    }
    .top-works-lead-catch .__num{
        font-size: 80px;
    }
    .top-works-lead-catch .__unit{
        padding-bottom: 12px;
        font-size: 2.4rem;
    }
}
.top-works-lead-desc{
    margin-bottom: 35px;
    line-height: calc(1em + 12px);
}
@media screen and (max-width:768px){
    .top-works-lead-desc{
        margin-bottom: 33px;
        line-height: calc(1em + 14px);
    }
}
.top-works-btn{
    position: absolute;
    top: -108px;
    right: 0;
    width: 200px;
}
@media screen and (max-width:768px){
    .top-works-btn{
        position: static;
        width: 100%;
    }
}
.top-works-btn a{
    background: #fff;
    color: var(--accent-black);
}
.top-works-slider-arrows{
    display: flex;
    gap: 0 10px;
    margin-top: auto;
}
@media screen and (max-width:768px){
    .top-works-slider-arrows{
        display: none;
    }
}
.top-works-slider-arrow{
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border: solid 1px #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--ease);
}
.top-works-slider-arrow._prev{
    transform: rotate(180deg);
}
.top-works-slider-arrow::after{
    flex: 0 0 auto;
    width: 14px;
    height: 10px;
    background: var(--bg-arrow_white);
    content: "";
}
@media (any-hover: hover){
    .top-works-slider-arrow:hover{
        background: #fff;
    }
    .top-works-slider-arrow:hover::after{
        background: var(--bg-arrow);
    }
}

/* top-service */
.top-service{
    width: var(--inner-width);
    margin: 0 auto 100px;
}
@media screen and (max-width:768px){
    .top-service{
        margin-bottom: 60px;
    }
}

/* top-contact-bnr */
.top-contact-bnr{
    width: 1000px;
    margin: 110px auto 0;
    padding-top: 40px;
}
@media screen and (max-width:768px){
    .top-contact-bnr{
        width: var(--inner-width_sp);
        margin-top: 50px;
        padding: 30px 0 0;
    }
}
.top-contact-bnr a{
    display: block;
    position: relative;
    padding: 65px 120px 60px 40px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(102,102,102,.1);
    background: #fff;
}
.top-contact-bnr a::before{
    position: absolute;
    top: -40px;
    left: 40px;
    color: #000;
    font-family: var(--font-en-serif);
    font-size: 80px;
    line-height: 1;
    letter-spacing: 0;
    content: attr(data-en);
}
.top-contact-bnr a::after{
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%);
    position: absolute;
    top: calc(50% - 8px);
    right: -40px;
    transform: skewX(45deg);
    transform-origin: right bottom;
    width: 150px;
    height: 9px;
    border-right: solid 1px #000;
    border-bottom: solid 1px #000;
    content: "";
    transition: right var(--ease);
}
@media (any-hover: hover){
    .top-contact-bnr a:hover::after{
        right: -50px;
    }
}
@media screen and (max-width:768px){
    .top-contact-bnr a{
        display: flex;
        align-items: center;
        min-height: 90px;
        padding: 30px 60px 30px 15px;
        border-radius: 10px;
        box-shadow: 0 0 12px rgba(102,102,102,.1);
    }
    .top-contact-bnr a::before{
        top: -30px;
        left: 15px;
        font-size: 50px;
    }
    .top-contact-bnr a::after{
        clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%);
        top: calc(50% - 5px);
        right: 10px;
        width: 40px;
        height: 6px;
    }
}
.top-contact-bnr-msg{
    display: block;
    position: relative;
    padding-left: 19px;
    color: var(--accent-black);
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: calc(1em + 8px);
    letter-spacing: .1em;
}
.top-contact-bnr-msg::before{
    position: absolute;
    top: calc(.5em + .5px);
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 4px;
    background: currentColor;
    content: "";
}
@media screen and (max-width:768px){
    .top-contact-bnr-msg{
        padding-left: 16px;
        font-size: 1.6rem;
    }
    .top-contact-bnr-msg::before{
        top: .5em;
        width: 8px;
        height: 8px;
        border-radius: 3px;
    }
}

/*-------------
breadcrumbs
-------------*/
.breadcrumbs-nav{
    display: block;
    padding: 11px 0;
    background: linear-gradient(to right, rgba(255,255,255,.75), rgba(255,255,255,0) 75%);
}
@media screen and (max-width:768px){
    .breadcrumbs-nav{
        padding: 2px 0;
    }
}
.breadcrumbs{
    display: flex;
    align-items: center;
    width: var(--inner-width);
    margin: 0 auto;
}
.breadcrumbs-item{
    flex: 0 0 auto;
    position: relative;
    min-width: 0;
    font-size: 1.3rem;
    line-height: calc(1em + 3px);
    letter-spacing: 0;
}
.breadcrumbs-item:not(:last-child){
    margin-right: 25px;
}
.breadcrumbs-item:last-child{
    flex: 1 1 auto;
}
@media screen and (max-width:768px){
    .breadcrumbs-item{
        font-size: 1.2rem;
        line-height: calc(1em + 2px);
    }
    .breadcrumbs-item:not(:last-child){
        margin-right: 23px;
    }
}
.breadcrumbs-item a{
    display: block;
    position: relative;
    color: var(--text-gray);
}
@media (any-hover: hover){
    .breadcrumbs-item a:hover{
        text-decoration: underline 1px;
    }
}
.breadcrumbs-item:not(:last-child) a::after{
    position: absolute;
    top: calc(50% - 2px);
    right: -25px;
    transform: translateY(-50%);
    width: 25px;
    text-align: center;
    content: "/";
    pointer-events: none;
}
@media screen and (max-width:768px){
    .breadcrumbs-item:not(:last-child) a::after{
        top: 50%;
        right: -23px;
        width: 23px;
    }
}
.breadcrumbs-item__name{
    display: block;
    padding: 8px 0 9px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (max-width:768px){
    .breadcrumbs-item__name{
        padding: 9px 0;
    }
}

/*-------------
page-header
-------------*/
.page-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: var(--inner-width);
    min-height: 395px;
    margin: 0 auto;
    padding: 45px 0 100px;
}
@media screen and (max-width:768px){
    .page-header{
        align-items: stretch;
        min-height: 62.5vw;
        padding: 20px 0 18px;
    }
}
.page-header-title{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.page-header-title::before{
    display: block;
    color: #000;
    font-family: var(--font-en-serif);
    font-size: 120px;
    line-height: 1;
    letter-spacing: 0;
    content: attr(data-en);
}
@media screen and (max-width:768px){
    .page-header-title{
        align-items: stretch;
    }
    .page-header-title::before{
        font-size: 50px;
    }
}
.page-header-title-main{
    position: relative;
    transform: translateX(50%);
    margin-left: 60px;
    color: var(--accent-black);
    font-family: var(--font-serif);
    font-size: 2.7rem;
    font-weight: 600;
    line-height: calc(1em + 4px);
    letter-spacing: .02em;
}
.page-header-title-main::before{
    position: absolute;
    top: calc(50% + 1px);
    left: -60px;
    width: 50px;
    height: 1px;
    background: currentColor;
    content: "";
}
@media screen and (max-width:768px){
    .page-header-title-main{
        display: flex;
        align-items: center;
        transform: none;
        margin: 1px 0 0;
        font-size: 2.1rem;
    }
    .page-header-title-main::before{
        position: static;
        flex: 1 1 auto;
        max-width: min(100px, 25.625vw);
        min-width: calc(var(--inner-sides_sp) * 2);
        height: 1px;
        margin-right: 10px;
    }
    .page-header-title-main::after{
        display: block;
        order: -1;
        flex: 1 1 auto;
        max-width: calc(min(100px, 25.625vw) + 10px);
        content: "";
    }
}

/*-------------
columns
-------------*/
.columns-pickone{
    margin-bottom: 90px;
}
@media screen and (max-width:768px){
    .columns-pickone{
        margin-bottom: 40px;
    }
}
.columns-pickone-inner{
    position: relative;
    padding-left: var(--container-sides);
}
.columns-pickone-head{
    display: flex;
    align-items: center;
    gap: 0 10px;
    position: absolute;
    top: 0;
    left: var(--container-sides);
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .columns-pickone-head{
        gap: 0 8px;
        position: static;
        margin-bottom: 13px;
        font-size: 1.6rem;
    }
}
.columns-pickone-head::before{
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: currentColor;
    content: "";
}
.columns-pickone-body{
    display: grid;
    grid-template-columns: 570px 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0 60px;
}
@media screen and (max-width:768px){
    .columns-pickone-body{
        display: block;
    }
}
.columns-pickone-title{
    margin-bottom: 38px;
    padding-top: 44px;
    color: var(--accent-black);
    font-size: 36px;
    font-weight: bold;
    line-height: calc(1em + 27px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .columns-pickone-title{
        margin-bottom: 23px;
        padding: 0 var(--inner-sides_sp) 0 0;
        font-size: 2.4rem;
        line-height: calc(1em + 14px);
    }
}
.columns-pickone-thumb{
    --my-side: calc(var(--container-sides) - ((1440px - var(--inner-width)) / 2));
    grid-column: 2 / 3;
    grid-row: 1 / 5;
    max-width: 690px;
    overflow: hidden;
    border-radius: 20px clamp(0px, var(--my-side), 20px) clamp(0px, var(--my-side), 20px) 20px;
}
@media screen and (max-width:768px){
    .columns-pickone-thumb{
        max-width: none;
        margin-bottom: 23px;
        border-radius: 15px 0 0 15px;
    }
}
.columns-pickone-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.columns-pickone-desc{
    margin-bottom: 60px;
}
@media screen and (max-width:768px){
    .columns-pickone-desc{
        margin-bottom: 23px;
        padding-right: var(--inner-sides_sp);
    }
}
.columns-pickone-more{
    display: inline-flex;
    align-items: center;
    gap: 0 12px;
    margin: auto auto 0 0;
    padding-bottom: 25px;
    border-bottom: solid 1px var(--accent-gray);
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
}
.columns-pickone-more::after{
    flex: 0 0 auto;
    width: 14px;
    height: 10px;
    background: var(--bg-arrow);
    content: "";
}
@media (any-hover: hover){
    a:hover .columns-pickone-more::after{
        animation: var(--bg-arrow-slide);
    }
}
@media screen and (max-width:768px){
    .columns-pickone-more{
        padding-bottom: 20px;
        font-size: 1.8rem;
    }
}

/* columns-list */
.columns-list-container{
    width: var(--inner-width);
    margin: 0 auto;
}
.columns-list{
    display: flex;
    flex-wrap: wrap;
    gap: 55px 60px;
}
.columns-list-item{
    flex: 0 0 auto;
    width: 360px;
}
@media screen and (max-width:768px){
    .columns-list{
        flex-direction: column;
        gap: 25px 0;
    }
    .columns-list-item{
        width: 100%;
    }
}
.columns-list-thumb{
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 25px;
    overflow: hidden;
    border-radius: 10px;
}
@media screen and (max-width:768px){
    .columns-list-thumb{
        aspect-ratio: 5 / 3;
        margin-bottom: 12px;
    }
}
.columns-list-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.columns-list-title{
    color: var(--accent-black);
    font-weight: 500;
    line-height: calc(1em + 12px);
}
@media screen and (max-width:768px){
    .columns-list-title{
        line-height: calc(1em + 11px);
    }
}

/*-------------
columns-dtl
-------------*/
.columns-dtl{
    margin-top: 95px;
}
@media screen and (max-width:768px){
    .columns-dtl{
        margin-top: min(35px, var(--inner-sides_sp));
    }
}
.columns-dtl-head{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: min(100%, calc(var(--inner-width) + 120px));
    min-height: 440px;
    margin: 0 auto 60px;
    overflow: hidden;
    border-radius: 30px;
}
.columns-dtl-head::before{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    background: linear-gradient(135deg, rgba(0,0,0,.5), rgba(0,0,0,.2));
    content: "";
}
@media screen and (max-width:768px){
    .columns-dtl-head{
        width: calc(100vw - var(--inner-sides_sp));
        min-height: 76.25vw;
        margin: 0 auto 35px 0;
        border-radius: 0 10px 10px 0;
    }
}
.columns-dtl-head-visual{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.columns-dtl-head-visual img{
    width: 100%;
    height: auto;
}
@media screen and (max-width:768px){
    .columns-dtl-head-visual img{
        width: auto;
        max-width: none;
        height: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }
}
.columns-dtl-head-title{
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,.25));
    padding: 60px;
}
.columns-dtl-head-title::before{
    display: inline-block;
    margin-bottom: 13px;
    padding: 5px 14px;
    border-radius: 99px;
    background: #fff;
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 2.4rem;
    line-height: 1;
    content: attr(data-en);
}
.columns-dtl-head-title-main{
    display: block;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    line-height: calc(1em + 30px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .columns-dtl-head-title{
        padding: 20px var(--inner-sides_sp);
    }
    .columns-dtl-head-title::before{
        margin-bottom: 11px;
        font-size: 1.8rem;
    }
    .columns-dtl-head-title-main{
        font-size: 2.5rem;
        line-height: calc(1em + 17px);
    }
}

/* columns-dtl-main */
.columns-dtl-main{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    gap: 0 59px;
    width: var(--inner-width);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .columns-dtl-main{
        display: block;
    }
}
.columns-dtl-backbtn{
    clear: both;
    width: 420px;
    margin: 120px auto 0;
}
.columns-dtl-backbtn a{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 68px;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-en-serif);
    font-size: 1.8rem;
    line-height: 1;
}
.columns-dtl-backbtn a::after{
    position: absolute;
    top: calc(50% - 5px);
    left: 30px;
    transform: rotate(-180deg);
    width: 14px;
    height: 10px;
    background: var(--bg-arrow_white);
    content: "";
}
@media (any-hover: hover){
    .columns-dtl-backbtn a:hover::after{
        animation: var(--bg-arrow-slide);
    }
}
@media screen and (max-width:768px){
    .columns-dtl-backbtn{
        width: 100%;
        margin-top: 80px;
    }
    .columns-dtl-backbtn a{
        height: 58px;
        font-size: 1.6rem;
    }
    .columns-dtl-backbtn a::after{
        left: 25px;
    }
}
.columns-dtl-side{
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    width: 301px;
    padding-left: 30px;
    border-left: solid 1px var(--accent-gray);
}
@media screen and (max-width:768px){
    .columns-dtl-side{
        width: 100%;
        margin-top: 30px;
        padding: 30px 0 0;
        border-top: solid 1px var(--accent-gray);
        border-left: none;
    }
}
@media screen and (min-width:769px){
    .columns-dtl-side-inner._sticky{
        position: sticky;
        top: 20px;
        right: 0;
    }   
}
.columns-dtl-pickup-title{
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-bottom: 20px;
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0;
}
.columns-dtl-pickup-title::before{
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: currentColor;
    content: "";
}
@media screen and (max-width:768px){
    .columns-dtl-pickup-title{
        gap: 0 8px;
        font-size: 1.6rem;
    }
}
.columns-dtl-pickup .columns-pickup-item:not(:last-child){
    margin-bottom: 21px;
}
.columns-dtl-pickup .columns-pickup-item-thumb{
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--bg-gray);
}
.columns-dtl-pickup .columns-pickup-item-thumb::before{
    mix-blend-mode: darken;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: solid 1px var(--bg-gray);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}
.columns-dtl-pickup .columns-pickup-item-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.columns-dtl-pickup .columns-pickup-item-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--accent-black);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: calc(1em + 10px);
    letter-spacing: .04em;
}
.columns-dtl-pickup .columns-pickup-item-more{
    display: none;
}
@media screen and (max-width:768px){
    .columns-dtl-pickup .columns-pickup-item:not(:last-child){
        margin-bottom: 26px;
    }
    .columns-dtl-pickup .columns-pickup-item-thumb{
        width: 100%;
        height: 50vw;
        aspect-ratio: unset;
        margin-bottom: 13px;
    }
    .columns-dtl-pickup .columns-pickup-item-thumb img{
        aspect-ratio: 3 / 2;
        object-fit: contain;
    }
}

/*-------------
columns-dtl-body
-------------*/
.columns-dtl-body > *:first-child,
.columns-dtl-sect > *:first-child{
    margin-top: 0;
}
.columns-dtl-body *:last-child,
.columns-dtl-sect > *:last-child{
    margin-bottom: 0;
}
:where(.columns-dtl-body p):not(:last-child){
    margin-bottom: 1em;
}
.columns-dtl-sect:not(:first-child){
    margin-top: 60px;
}
.columns-dtl-sect:not(:last-child){
    margin-bottom: 60px;
}
@media screen and (max-width:768px){
    .columns-dtl-sect:not(:first-child){
        margin-top: 50px;
    }
    .columns-dtl-sect:not(:last-child){
        margin-bottom: 50px;
    }
}

/* heading */
.columns-dtl-body :where(h1,h2,h3,h4,h5,h6){
    color: var(--accent-black);
    font-weight: 500;
    line-height: calc(1em + var(--my-linehit));
    margin-top: calc((var(--my-linehit) / 2) * -1);
}
.columns-dtl-body :is(h1,h2,h3,h4,h5,h6) + *{
    margin-top: 0;
}
.columns-dtl-title_lv1{
    --my-linehit: 20px;
    margin: 69px 0 31px;
    font-size: 30px;
    font-weight: bold;
}
@media screen and (max-width:768px){
    .columns-dtl-title_lv1{
        --my-linehit: 14px;
        margin: 53px 0 28px;
        font-size: 2rem;
    }
}
.columns-dtl-title_lv2{
    --my-linehit: 16px;
    margin: 50px 0 30px;
    padding: 0 0 2px 16px;
    border-left: solid 5px var(--accent-gray);
    font-size: 2.4rem;
}
@media screen and (max-width:768px){
    .columns-dtl-title_lv2{
        --my-linehit: 12px;
        padding: 2px 0 2px 16px;
        font-size: 1.8rem;
    }
}
.columns-dtl-title_lv3{
    --my-linehit: 16px;
    margin: 41px 0 28px;
    font-size: 2rem;
}
@media screen and (max-width:768px){
    .columns-dtl-title_lv3{
        --my-linehit: 14px;
        margin: 33px 0 23px;
        font-size: 1.7rem;
    }
}
.columns-dtl-title_lv4{
    --my-linehit: 16px;
    margin: 31px 0 23px;
    font-size: 1.8rem;
}
@media screen and (max-width:768px){
    .columns-dtl-title_lv4{
        --my-linehit: 14px;
        margin: 28px 0 18px;
        font-size: 1.6rem;
    }
}
.columns-dtl-title_lv5{
    --my-linehit: 16px;
    margin: 31px 0 18px;
    font-size: 1.6rem;
}
@media screen and (max-width:768px){
    .columns-dtl-title_lv5{
        --my-linehit: 14px;
        margin: 23px 0 13px;
        font-size: 1.4rem;
    }
}

/* list */
.columns-dtl-list{
    margin: 24px 0 25px;
}
.columns-dtl-list-item{
    position: relative;
    padding-left: 21px;
    line-height: calc(1em + 11px);
}
.columns-dtl-list-item:not(:last-child){
    margin-bottom: 9px;
}
@media screen and (max-width:768px){
    .columns-dtl-list{
        margin: 20px 0 22px;
    }
    .columns-dtl-list-item{
        line-height: calc(1em + 8px);
    }
    .columns-dtl-list-item:not(:last-child){
        margin-bottom: 7px;
    }
}
.columns-dtl-list._dot .columns-dtl-list-item{
    padding-left: 21px;
}
.columns-dtl-list._dot .columns-dtl-list-item::before{
    position: absolute;
    top: calc(.5em + 2px);
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-black);
    content: "";
}
@media screen and (max-width:768px){
    .columns-dtl-list._dot .columns-dtl-list-item{
        padding-left: 18px;
        line-height: calc(1em + 8px);
    }
    .columns-dtl-list._dot .columns-dtl-list-item::before{
        top: calc(.5em + 1px);
        left: 4px;
        width: 6px;
        height: 6px;
    }
}
.columns-dtl-list._num{
    counter-reset: listnum;
}
.columns-dtl-list._num .columns-dtl-list-item{
    padding-left: 1.25em;
}
.columns-dtl-list._num:has(.columns-dtl-list-item:nth-child(10)) .columns-dtl-list-item{
    padding-left: 1.75em;
}
.columns-dtl-list._num .columns-dtl-list-item::before{
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent-black);
    font-family: var(--font-en-sans);
    font-weight: revert-layer;
    letter-spacing: 0;
    content: counter(listnum)".";
    counter-increment: listnum;
}
.columns-dtl-datalist{
    margin: 40px 0;
}
.columns-dtl-datalist__term{
    position: relative;
    margin-bottom: 6px;
    color: var(--accent-black);
    font-weight: bold;
    line-height: calc(1em + 8px);
}
.columns-dtl-datalist-item:not(:first-child),
.columns-dtl-datalist__term:not(:first-child){
    margin-top: 18px;
}
.columns-dtl-datalist__term::before{
    display: inline-block;
    content: "　";
}
.columns-dtl-datalist__term::after{
    position: absolute;
    top: .5em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 4px;
    background: var(--accent-gray);
    content: "";
}
.columns-dtl-datalist__desc,
.columns-dtl-datalist__desc > *:first-child{
    margin-top: 0;
}
.columns-dtl-datalist__desc:has(> *[class*="columns-dtl"]){
    margin-top: 10px;
}
@media screen and (max-width:768px){
    .columns-dtl-datalist{
        margin: 30px 0;
    }
    .columns-dtl-datalist__term{
        position: relative;
        color: var(--accent-black);
        font-weight: bold;
        line-height: calc(1em + 8px);
    }
    .columns-dtl-datalist-item:not(:first-child),
    .columns-dtl-datalist__term:not(:first-child){
        margin-top: 16px;
    }
}
.columns-dtl-datalist._num{
    counter-reset: datanum;
}
.columns-dtl-datalist._num .columns-dtl-datalist__term::before{
    margin-right: .2em;
    font-family: var(--font-en-sans);
    font-weight: revert-layer;
    content: counter(datanum)".";
    counter-increment: datanum;
}
.columns-dtl-datalist._num .columns-dtl-datalist__term::after{
    content: none;
}

/* img */
.columns-dtl-body > img{
    display: block;
    margin: 40px auto;
}
@media screen and (max-width:768px){
    .columns-dtl-body > img{
        margin: 30px 0;
    }
}
.columns-dtl-img-box{
    margin: 50px 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--bg-gray);
}
.columns-dtl-img-box img{
    display: block;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .columns-dtl-img-box{
        margin: 40px 0;
        border-radius: 10px;
    }
    .columns-dtl-img-box img{
        width: 100%;
        height: auto;
    }
}

/*-------------
service
-------------*/
.service-list-container{
    width: var(--inner-width);
    margin: 0 auto;
}
.service-list{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 60px;
}
.service-list-item{
    flex: 0 0 auto;
    position: relative;
    z-index: 0;
    width: 360px;
}
.service-list-item::before{
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left center;
    width: 100%;
    height: 1px;
    background: var(--accent-gray);
    content: "";
    transition: transform var(--ease) .4s;
    pointer-events: none;
}
.service-list-item:not(._fade)::before{
    transform: scaleX(0);
}
@media screen and (max-width:768px){
    .service-list{
        flex-direction: column;
        gap: 10px 0;
    }
    .service-list-item{
        width: 100%;
    }
    .service-list-item::before{
        transition-delay: .2s;
    }
}
.service-list-item a{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    padding: 41px 0 40px;
    transition: transform var(--ease) .1s;
}
@media (any-hover: hover){
    .service-list-item a:hover{
        transform: translateY(-5px);
    }
    .service-list-item a::before,
    .service-list-item a::after{
        opacity: 0;
        position: absolute;
        top: 0;
        left: -20px;
        z-index: -1;
        width: calc(100% + 40px);
        height: 100%;
        background: #fff;
        content: "";
        transition: opacity var(--ease) .25s;
    }
    .service-list-item a:not(:hover):before,
    .service-list-item a:not(:hover):after{
        pointer-events: none;
    }
    .service-list-item a::before{
        top: 5px;
        background: var(--theme-grad);
        transition: opacity var(--ease), filter var(--ease);
    }
    .service-list-item a:hover::before{
        filter: blur(5px);
        opacity: .8;
        transition: opacity var(--ease) .25s, filter var(--ease);
    }
    .service-list-item a:hover::after{
        opacity: 1;
        transition: opacity var(--ease);
    }
}
@media screen and (max-width:768px){
    .service-list-item a{
        padding-top: 26px;
    }
}
.service-list-icon{
    position: relative;
    z-index: 0;
    width: 100%;
    height: 48px;
    margin-bottom: 25px;
    text-align: center;
}
@media screen and (max-width:768px){
    .service-list-icon{
        height: 40px;
        margin-bottom: 14px;
    }
}
.service-list-icon img{
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
}
.service-list-body{
    position: relative;
    z-index: 1;
    margin-bottom: 23px;
}
.service-list-term{
    margin-bottom: 18px;
    color: var(--accent-black);
    font-size: 2rem;
    font-weight: bold;
    line-height: calc(1em + 8px);
    text-align: center;
}
.fill-target path {
    stroke: #111;
    stroke-width: 1px; 
    fill: #111;
    fill-opacity: 0;
    transition: fill-opacity 0.3s ease-out, stroke-opacity 0.3s ease-out;
}
.fill-target.fill-visible path {
    fill-opacity: 1;
    stroke-opacity: 0;
    transition: fill-opacity 0.3s ease-out, stroke-opacity 0.3s ease-out;
}
@media screen and (max-width:768px){
    .service-list-body{
        margin-bottom: 18px;
    }
    .service-list-term{
        margin-bottom: 9px;
        font-size: 1.8rem;
    }
}
.service-list-more{
    display: flex;
    align-items: center;
    gap: 0 8px;
    margin-top: auto;
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0;
}
.service-list-more::after{
    flex: 0 0 auto;
    width: 14px;
    height: 10px;
    background: var(--bg-arrow);
    content: "";
}
@media (any-hover: hover){
    a:hover .service-list-more::after{
        animation: var(--bg-arrow-slide);
    }
}

/*-------------
service-dtl
-------------*/
.service-dtl-main{
    width: var(--inner-width);
    margin: 95px auto 0;
}
@media screen and (max-width:768px){
    .service-dtl-main{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 0;
    }
}
.service-dtl-head{
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}
.service-dtl-head-sub{
    display: flex;
    align-items: center;
    gap: 0 15px;
    margin-bottom: 4px;
    color: var(--accent-black);
    font-size: 2rem;
    font-weight: 500;
}
.service-dtl-head-sub::before{
    flex: 0 0 auto;
    padding: 5px 15px;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-en-serif);
    font-size: 2.4rem;
    line-height: 1;
    content: attr(data-en);
}
.service-dtl-head-title{
    color: var(--accent-black);
    font-size: 42px;
    font-weight: bold;
    line-height: calc(1em + 30px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .service-dtl-head{
        width: var(--inner-width_sp);
        margin: 0 auto 30px;
    }
    .service-dtl-head-sub{
        gap: 0 10px;
        margin-bottom: 6px;
        font-size: 1.4rem;
    }
    .service-dtl-head-sub::before{
        font-size: 1.6rem;
    }
    .service-dtl-head-title{
        font-size: 2.7rem;
        line-height: calc(1em + 17px);
    }
}
.service-dtl-mainvisual{
    float: right;
    width: 500px;
    aspect-ratio: 5 / 3;
    margin: 0 0 40px 40px;
    overflow: hidden;
    border-radius: 30px;
}
.service-dtl-mainvisual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width:768px){
    .service-dtl-mainvisual{
        float: none;
        order: -1;
        width: 100%;
        margin: 0 0 20px;
        border-radius: 0;
    }
}

/* service-dtl-body */
.service-dtl-body{
    width: 100%;
}
@media screen and (max-width:768px){
    .service-dtl-body{
        width: var(--inner-width_sp);
        margin: 0 auto;
    }
}
.service-dtl-body :is(h1,h2,h3,h4,h5,h6) + *{
    margin-top: 0;
}
.service-dtl-body > *:first-child,
.service-dtl-sect > *:first-child{
    margin-top: 0;
}
.service-dtl-body > *:last-child,
.service-dtl-sect > *:last-child{
    margin-bottom: 0;
}
:where(.service-dtl-body p):not(:last-child){
    margin-bottom: 1em;
}
.service-dtl-sect:not(:first-child){
    margin-top: 60px;
}
.service-dtl-sect:not(:last-child){
    margin-bottom: 60px;
}
@media screen and (max-width:768px){
    .service-dtl-sect:not(:first-child){
        margin-top: 50px;
    }
    .service-dtl-sect:not(:last-child){
        margin-bottom: 50px;
    }
}

/* heading */
.service-dtl-catch{
    margin: 49px 0 31px;
    color: var(--accent-black);
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 800;
    line-height: calc(1em + 20px);
}
@media screen and (max-width:768px){
    .service-dtl-catch{
        margin: 38px 0 23px;
        font-size: 2.4rem;
        line-height: calc(1em + 14px);
    }
}
.service-dtl-bar-title{
    margin: 80px 0 30px;
    padding: 10px 15px 12px;
    overflow: hidden;
    background: var(--accent-black);
    color: #fff;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: calc(1em + 8px);
}
@media screen and (max-width:768px){
    .service-dtl-bar-title{
        margin: 60px 0 25px;
        padding: 11px 15px;
        font-size: 2rem;
    }
}
.service-dtl-line-title{
    margin: 41px 0 30px;
    padding-bottom: 13px;
    overflow: hidden;
    border-bottom: solid 1px var(--accent-gray);
    color: var(--accent-black);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: calc(1em + 16px);
}
@media screen and (max-width:768px){
    .service-dtl-line-title{
        margin: 34px 0 20px;
        padding-bottom: 15px;
        font-size: 2.1rem;
        line-height: calc(1em + 11px);
    }
}
.service-dtl-point-title{
    display: flex;
    align-items: center;
    position: relative;
    min-height: 40px;
    margin: 41px 0 23px;
    padding-left: 40px;
    color: var(--accent-black);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: calc(1em + 8px);
}
.service-dtl-point-title::before{
    position: absolute;
    top: 5px;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(to top, #fff, #fff) no-repeat center bottom 14px / 4px 10px, 
    linear-gradient(to top, #fff, #fff) no-repeat center bottom 7px / 4px 4px, 
    var(--accent-black);
    content: "";
}
@media screen and (max-width:768px){
    .service-dtl-point-title{
        min-height: 35px;
        margin: 33px 0 18px;
        padding-left: 37px;
        font-size: 2.1rem;
    }
    .service-dtl-point-title::before{
        top: 4px;
        width: 27px;
        height: 27px;
        background: linear-gradient(to top, #fff, #fff) no-repeat center bottom 12px / 3px 9px, 
        linear-gradient(to top, #fff, #fff) no-repeat center bottom 6px / 3px 3px, 
        var(--accent-black);
    }
}
.service-dtl-mid-title{
    position: relative;
    margin: 35px 0 21px;
    color: var(--accent-black);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: calc(1em + 9px);
}
@media screen and (max-width:768px){
    .service-dtl-mid-title{
        margin: 25px 0 16px;
        font-size: 1.8rem;
    }
}
.service-dtl-sub-title{
    display: block;
    position: relative;
    margin-bottom: 2px;
    font-size: var(--fontsize-base);
    font-weight: 600;
    line-height: calc(1em + 8px);
}
.service-dtl-sub-title::before{
    display: inline-block;
    margin-right: 2px;
    content: "　";
}
.service-dtl-sub-title::after{
    position: absolute;
    top: calc(.5em + 1px);
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--accent-black);
    content: "";
}
@media screen and (max-width:768px){
    .service-dtl-sub-title::after{
        top: .5em;
    }
}
.service-dtl-mid-catch{
    color: var(--accent-black);
    font-weight: bold;
}
.service-dtl-mid-catch:has(+ p){
    margin-bottom: 0;
}
.service-dtl .service-dtl-mid-catch + *{
    margin-top: 0;
}

/* box */
.service-dtl-sect__box{
    position: relative;
    display: grid;
    z-index: 0;
    width: fit-content;
    min-width: 50%;
    margin: 30px 0;
    padding: 23px 20px 25px;
    overflow: hidden;
}
#service-dtl-body .service-dtl-sect__box > *:first-child{
    margin-top: 0;
}
#service-dtl-body .service-dtl-sect__box > *:last-child{
    margin-bottom: 0;
}
@media screen and (max-width:768px){
    .service-dtl-sect__box{
        width: 100%;
        margin: 20px 0;
        padding: 20px 15px 23px;
    }
}
.service-dtl-sect__box._bg{
    border-radius: 8px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.5);
    background: var(--bg-light-gray);
}
@media screen and (max-width:768px){
    .service-dtl-sect__box._bg{
        border-radius: 8px;
        background: var(--bg-light-gray);
    }
}
.service-dtl-sect__box._line{
    border: solid 1px var(--accent-black);
    border-radius: 8px;
    background: #fff;
}
.service-dtl-sect__box._line::before{
    -webkit-mask-image: linear-gradient(135deg, #000, rgba(0,0,0,0));
    mask-image: linear-gradient(135deg, #000, rgba(0,0,0,0));
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: -1;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: solid 1px var(--accent-black);
    border-radius: 6px;
    content: "";
}
@media screen and (max-width:768px){
    .service-dtl-sect__box._line{
        border-radius: 5px;
    }
    .service-dtl-sect__box._line::before{
        border-radius: 3px;
    }
}

/* list */
.service-dtl-list{
    margin: 24px 0 25px;
}
.service-dtl-list-item{
    position: relative;
    padding-left: 21px;
    line-height: calc(1em + 11px);
}
.service-dtl-list-item:not(:last-child){
    margin-bottom: 9px;
}
@media screen and (max-width:768px){
    .service-dtl-list{
        margin: 20px 0 22px;
    }
    .service-dtl-list-item{
        line-height: calc(1em + 8px);
    }
    .service-dtl-list-item:not(:last-child){
        margin-bottom: 7px;
    }
}
.service-dtl-list._dot .service-dtl-list-item{
    padding-left: 21px;
}
.service-dtl-list._dot .service-dtl-list-item::before{
    position: absolute;
    top: calc(.5em + 2px);
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-black);
    content: "";
}
@media screen and (max-width:768px){
    .service-dtl-list._dot .service-dtl-list-item{
        padding-left: 18px;
        line-height: calc(1em + 8px);
    }
    .service-dtl-list._dot .service-dtl-list-item::before{
        top: calc(.5em + 1px);
        left: 4px;
        width: 6px;
        height: 6px;
    }
}
.service-dtl-list._num{
    counter-reset: listnum;
}
.service-dtl-list._num .service-dtl-list-item{
    padding-left: 1.25em;
}
.service-dtl-list._num:has(.service-dtl-list-item:nth-child(10)) .service-dtl-list-item{
    padding-left: 1.75em;
}
.service-dtl-list._num .service-dtl-list-item::before{
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent-black);
    font-family: var(--font-en-sans);
    font-weight: revert-layer;
    letter-spacing: 0;
    content: counter(listnum)".";
    counter-increment: listnum;
}
.service-dtl-list._point .service-dtl-list-item{
    padding-left: 26px;
}
.service-dtl-list._point .service-dtl-list-item::before{
    position: absolute;
    top: calc(.5em - 3px);
    left: 0;
    transform: rotate(45deg);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to right, #fff, #fff) no-repeat top 4px right 7px / 2px 8px,
    linear-gradient(to top, #fff, #fff) no-repeat top 10px right 7px / 5px 2px,  var(--accent-black);
    content: "";
}
@media screen and (max-width:768px){
    .service-dtl-list._point .service-dtl-list-item{
        padding-left: 24px;
    }
    .service-dtl-list._point .service-dtl-list-item:not(:last-child){
        margin-bottom: 12px;
    }
    .service-dtl-list._point .service-dtl-list-item::before{
        top: calc(.5em - 4px);
        width: 16px;
        height: 16px;
        background: linear-gradient(to right, #fff, #fff) no-repeat top 4px right 6px / 2px 6px,
        linear-gradient(to top, #fff, #fff) no-repeat top 9px right 6px / 5px 2px,  var(--accent-black);
    }
}
.service-dtl-logo-list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 50px auto;
}
.service-dtl-logo-list-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    min-width: 294px;
    min-height: 70px;
    padding: 7px 10px;
    border: solid 2px var(--border-gray);
    background: #fff;
}
.service-dtl-logo-list-item img{
    width: revert-layer;
    height: revert-layer;
}
@media screen and (max-width:768px){
    .service-dtl-logo-list{
        gap: 4px;
        margin: 30px auto;
    }
    .service-dtl-logo-list-item{
        flex: 1 1 auto;
        min-width: calc(50% - 2px);
        min-height: 0;
    }
}
.service-dtl-note{
    display: block;
    margin: 20px 0 50px;
    color: #999;
    font-size: 1.3rem;
    line-height: var(--line-height);
}
#service-dtl-body *:has(+ .service-dtl-note){
    margin-bottom: 0;
}
@media screen and (max-width:768px){
    .service-dtl-note{
        margin: 15px 0 40px;
        font-size: 1.2rem;
    }
}
.service-dtl-note-list{
    margin: 14px 0 40px;
}
.service-dtl-note-list-item{
    padding-left: 1.05em;
    text-indent: -1.05em;
    font-size: 1.4rem;
    line-height: calc(1em + 10px);
}
.service-dtl-note-list-item:not(:last-child){
    margin-bottom: 10px;
}
@media screen and (max-width:768px){
    .service-dtl-note-list{
        margin-bottom: 30px;
    }
    .service-dtl-note-list-item{
        font-size: 1.2rem;
    }
}
.service-dtl-datalist{
    margin: 40px 0;
}
.service-dtl-datalist__term{
    position: relative;
    margin-bottom: 6px;
    color: var(--accent-black);
    font-weight: bold;
    line-height: calc(1em + 8px);
}
.service-dtl-datalist-item:not(:first-child),
.service-dtl-datalist__term:not(:first-child){
    margin-top: 18px;
}
.service-dtl-datalist__term::before{
    display: inline-block;
    content: "　";
}
.service-dtl-datalist__term::after{
    position: absolute;
    top: .5em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 4px;
    background: var(--accent-gray);
    content: "";
}
.service-dtl-datalist__desc,
.service-dtl-datalist__desc > *:first-child{
    margin-top: 0;
}
.service-dtl-datalist__desc:has(> *[class*="service-dtl"]){
    margin-top: 10px;
}
@media screen and (max-width:768px){
    .service-dtl-datalist{
        margin: 30px 0;
    }
    .service-dtl-datalist__term{
        position: relative;
        color: var(--accent-black);
        font-weight: bold;
        line-height: calc(1em + 8px);
    }
    .service-dtl-datalist-item:not(:first-child),
    .service-dtl-datalist__term:not(:first-child){
        margin-top: 16px;
    }
}
.service-dtl-datalist._num{
    counter-reset: datanum;
}
.service-dtl-datalist._num .service-dtl-datalist__term::before{
    margin-right: .2em;
    font-family: var(--font-en-sans);
    font-weight: revert-layer;
    content: counter(datanum)".";
    counter-increment: datanum;
}
.service-dtl-datalist._num .service-dtl-datalist__term::after{
    content: none;
}
.service-dtl-words-list{
    display: flex;
    flex-wrap: wrap;
}
.service-dtl-words-list-item:not(:last-child)::after{
    display: inline-block;
    margin: 0 .5em;
    content: "／";
}
@media screen and (max-width:768px){
    .service-dtl-words-list{
        display: block;
        overflow-wrap: break-word;
        word-break: break-word;
        font-size: 0;
    }
    .service-dtl-words-list-item{
        display: inline;
        font-size: var(--fontsize-base);
    }
    .service-dtl-words-list-item:not(:last-child)::after{
        margin: 0 .1em;
    }
}

/* img */
.service-dtl-pic{
    margin: 40px 0;
}
.service-dtl-pic img{
    display: block;
}
.servce-dtl-pic-caption{
    margin-top: 14px;
    line-height: calc(1em + 10px);
    color: #666;
}
@media screen and (max-width:768px){
    .service-dtl-pic{
        margin: 30px 0;
    }
    .servce-dtl-pic-caption{
        margin-top: 9px;
        line-height: calc(1em + 11px);
    }
}

/* service-dtl-bottom */
body:has(.service-dtl-bottom) .footer{
    margin-top: 100px;
}
.service-dtl-bottom{
    position: relative;
    z-index: 0;
    width: var(--inner-width);
    margin: 150px auto 0;
    padding: 50px 80px;
    background: linear-gradient(45deg, #fff, rgba(255,255,255,0));
    border: solid 1px var(--accent-black);
    border-radius: 30px;
}
@media screen and (max-width:768px){
    body:has(.service-dtl-bottom) .footer{
        margin-top: 50px;
    }
    .service-dtl-bottom{
        --my-side: min(30px, calc(var(--inner-sides_sp) + 5px));
        margin-top: 80px;
        padding: 21px var(--my-side) 15px;
        border-radius: 10px;
    }
}
.service-dtl-bottom-nav-title{
    position: relative;
    margin-bottom: 18px;
    color: var(--accent-black);
    font-size: 2.7rem;
    font-weight: 500;
    line-height: calc(1em + 8px);
}
.service-dtl-bottom-nav-title::before{
    position: absolute;
    top: calc(50% - 1px);
    left: -79px;
    width: 69px;
    height: 1px;
    background: var(--accent-black);
    content: "";
}
.service-dtl-bottom-nav-title::after{
    position: absolute;
    top: calc(50% - 4px);
    left: -17px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-black);
    content: "";
}
@media screen and (max-width:768px){
    .service-dtl-bottom-nav-title{
        margin-bottom: 9px;
        font-size: 2.1rem;
        text-align: justify;
    }
    .service-dtl-bottom-nav-title::before{
        content: none;
    }
    .service-dtl-bottom-nav-title::after{
        top: -12px;
        left: calc(((var(--my-side) / 2) + 3px) * -1);
        background: var(--accent-black);
    }
}
.service-dtl-bottom-nav-list{
    display: grid;
    grid-template-columns: repeat(3, auto 1fr);
    gap: 0 28px;
    margin-top: 53px;
}
.service-dtl-bottom-nav-list-item,
.service-dtl-bottom-nav-list-item a{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    gap: 0 20px;
}
.service-dtl-bottom-nav-list-item{
    border-top: solid 1px var(--accent-black);
}
.service-dtl-bottom-nav-list-item a{
    align-items: center;
    padding: 20px 0;
    color: var(--accent-black);
}
.service-dtl-bottom-nav-list-item._current a{
    opacity: .5;
}
.service-dtl-bottom-nav-list-icon img{
    display: block;
    width: auto;
    height: 32px;
    margin: 0 auto;
}
.service-dtl-bottom-nav-list-title{
    line-height: calc(1em + 8px);
}
@media screen and (max-width:768px){
    .service-dtl-bottom-nav-list{
        grid-template-columns: auto 1fr;
        gap: 0;
        margin-top: 33px;
    }
    .service-dtl-bottom-nav-list-item,
    .service-dtl-bottom-nav-list-item a{
        gap: 0 15px;
    }
    .service-dtl-bottom-nav-list-item{
        border-top-color: var(--accent-gray);
    }
    .service-dtl-bottom-nav-list-item a{
        padding: 15px 0;
    }
    .service-dtl-bottom-nav-list-icon img{
        height: 24px;
    }
}

/*-------------
works
-------------*/
.works-container{
    width: var(--inner-width);
    margin: 0 auto;
}
.works-list{
    display: flex;
    flex-wrap: wrap;
    gap: 55px 36px;
}
@media screen and (max-width:768px){
    .works-list{
        flex-direction: column;
        gap: 26px 0;
    }
}
.works-list .works-list-item{
    flex: 0 0 auto;
    width: 376px;
}
@media screen and (max-width:768px){
    .works-list .works-list-item{
        flex: 0 0 auto;
        width: 100%;
    }
}
.works-list .works-list-item a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.works-list .works-list-thumb{
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 5;
    margin-bottom: 19px;
}
.works-list .works-list-thumb_pc{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1)
}
.works-list .works-list-thumb_pc img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.works-list .works-list-thumb_sp{
    position: absolute;
    right: 18px;
    bottom: -32px;
    width: 104px;
    overflow: hidden;
    border: solid 2px #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    background: #fff;
}
.works-list .works-list-thumb_sp img{
    width: 100%;
    aspect-ratio: 1 / 2;
    object-fit: cover;
}
@media screen and (max-width:768px){
    .works-list .works-list-thumb{
        margin-bottom: 15px;
    }
    .works-list .works-list-thumb_pc{
        box-shadow: 0 2px 4px rgba(0,0,0,.1)
    }
    .works-list .works-list-thumb_sp{
        right: var(--inner-sides_sp);
        bottom: -24px;
        width: calc(25% + 4px);
        box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }
}
.works-list .works-list-type{
    display: inline-flex;
    max-width: 50%;
    margin-bottom: 13px;
    padding: 6px 13px 7px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--accent-black);
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: calc(1em + 1px);
    letter-spacing: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (max-width:768px){
    .works-list .works-list-type{
        margin-bottom: 6px;
        font-size: 1.2rem;
    }
}
.works-list .works-list-name{
    font-size: 1.8rem;
    font-weight: 500;
    line-height: calc(1em + 12px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .works-list .works-list-name{
        font-size: 1.6rem;
        line-height: calc(1em + 8px);
    }
}

/*-------------
works-dtl-visual
-------------*/
.works-dtl-visual{
    position: relative;
    width: var(--inner-width);
    margin: 95px auto 60px;
}
@media screen and (max-width:768px){
    .works-dtl-visual{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 56.25vw;
        margin: 0 auto 6.25vw;
    }
}
.works-dtl-visual-sp{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 250px;
    height: 100%;
    padding-top: 20px;
}
.works-dtl-visual-sp-frame{
    filter: drop-shadow(0 10px 5px rgba(0,0,0,.15));
    width: 100%;
    aspect-ratio: 1 / 2;
    background: url(../images/works/frame_sp.png) no-repeat top center / contain;
}
.works-dtl-visual-sp-inner{
    mask-image: url(../images/works/clip_sp.png);
    mask-size: contain;
    -webkit-mask-image: url(../images/works/clip_sp.png);
    -webkit-mask-size: contain;
    display: grid;
    grid-template-rows: auto 1fr;
    position: relative;
    height: 100%;
    padding: 11px 15px;
}
.works-dtl-visual-sp-inner::before{
    display: block;
    width: 100%;
    aspect-ratio: 220 / 38;
    background: url(../images/works/frame_sp-header.png) no-repeat top center / cover;
    content: "";
}
.works-dtl-visual-sp-inner img{
    width: 100%;
    object-fit: cover;
}
@media screen and (max-width:768px){
    .works-dtl-visual-sp{
        top: auto;
        bottom: 0;
        width: 75vw;
        height: unset;
        aspect-ratio: 100 / 57;
        padding-top: 2%;
    }
    .works-dtl-visual-sp-frame{
        filter: drop-shadow(0 4px 2px rgba(0,0,0,.1));
        top: 6.25vw;
        width: 18.5vw;
    }
    .works-dtl-visual-sp-inner{
        padding: 4.4% 6%;
    }
}
.works-dtl-visual-pc{
    position: relative;
    z-index: 0;
    width: 1000px;
    aspect-ratio: 100 / 57;
    margin-left: auto;
}
.works-dtl-visual-pc-frame{
    filter: drop-shadow(0 5px 5px rgba(0,0,0,.15));
    width: 100%;
    height: 100%;
    padding-top: 31px;
    background: url(../images/works/frame_pc.png) no-repeat top center / contain;
}
.works-dtl-visual-pc-inner{
    width: 768px;
    aspect-ratio: 8 / 5;
    margin: 0 auto;
    background: #fff;
}
.works-dtl-visual-pc-inner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width:768px){
    .works-dtl-visual-pc{
        width: 75vw;
    }
    .works-dtl-visual-pc-frame{
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));
        padding-top: 3.1%;
    }
    .works-dtl-visual-pc-inner{
        width: 76.8%;
    }
}

/* works-dtl-head */
.works-dtl-head{
    position: relative;
    width: var(--inner-width);
    margin: 0 auto 60px;
    padding-left: 360px;
}
.works-dtl-head::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    border-right: solid 1px var(--accent-gray);
    color: var(--accent-black);
    font-family: var(--font-en-serif);
    font-size: 82px;
    line-height: 1;
    letter-spacing: 0;
    content: attr(data-en);
}
@media screen and (max-width:768px){
    .works-dtl-head{
        margin-bottom: 40px;
        padding-left: 0;
    }
    .works-dtl-head::before{
        display: block;
        position: static;
        width: 100%;
        height: auto;
        margin-bottom: 30px;
        padding-bottom: 10px;
        border-right: none;
        border-bottom: solid 1px var(--accent-gray);
        font-size: 40px;
    }
}
.works-dtl-type{
    display: table;
    margin-bottom: 12px;
    padding: 7px 13px 8px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--accent-black);
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: calc(1em + 1px);
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .works-dtl-type{
        margin-bottom: 13px;
        font-size: 1.2rem;
    }
}
.works-dtl-name{
    margin-bottom: 24px;
    color: var(--accent-black);
    font-size: 30px;
    font-weight: bold;
    line-height: calc(1em + 14px);
}
@media screen and (max-width:768px){
    .works-dtl-name{
        margin-bottom: 23px;
        font-size: 2rem;
    }
}
.works-dtl-desc p:not(:last-child){
    margin-bottom: 1em;
}
.works-dtl-linkbtn{
    display: inline-flex;
    min-width: 270px;
    max-width: 100%;
    margin: 33px auto 0 0;
}
.works-dtl-linkbtn a{
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   z-index: 0;
   height: 60px;
   padding: 0 29px 2px 54px;
   overflow: hidden;
   border: solid 1px var(--accent-black);
   border-radius: 99px;
   white-space: nowrap;
   text-overflow: ellipsis;
   transition: color var(--ease);
}
.works-dtl-linkbtn a::before{
    position: absolute;
    top: 50%;
    left: 29px;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 30px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--accent-black);
    content: "";
    transition: width .3s ease;
}
@media (any-hover: hover){
    .works-dtl-linkbtn a:hover{
        color: #fff;
    }
    .works-dtl-linkbtn a:hover::before{
        width: 200%;
        transition: width var(--ease);
    }
}
.works-dtl-linkbtn a::after{
    position: absolute;
    top: calc(50% - 5px);
    left: 24px;
    width: 10px;
    height: 10px;
    background: url(../images/arrow_blank.svg) no-repeat center / contain;
    content: "";
}
@media screen and (max-width:768px){
    .works-dtl-linkbtn{
        display: block;
        min-width: 0;
        width: 100%;
        margin: 23px 0 0;
    }
    .works-dtl-linkbtn a{
       height: 50px;
       padding: 0 24px 0 47px;
    }
    .works-dtl-linkbtn a::before{
        left: 23px;
        width: 24px;
    }
    .works-dtl-linkbtn a::after{
        left: 19px;
    }
}

/* works-dtl-images */
.works-dtl-images{
    --works-images-bg: var(--bg-gray);
    margin: var(--inner-sides);
    border-radius: 30px;
    background: var(--works-images-bg);
}
.works-dtl-images-track{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0 40px;
    padding: 60px;
}
@media screen and (max-width:768px){
    .works-dtl-images{
        position: relative;
        margin: 20px 0 20px calc(var(--inner-sides_sp) - 5px);
        border-radius: 20px 0 0 20px;
    }
    .works-dtl-images-track{
        justify-content: flex-start;
        gap: 0 10px;
        transform: translateZ(0);
        padding: 30px 0 54px 20px;
        overflow: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        backface-visibility: hidden;
    }
    .works-dtl-images-track::after{
        opacity: 0;
        flex: 0 0 auto;
        min-width: 10px;
        content: ".";
        user-select: none;
    }
}
.works-dtl-image{
    filter: drop-shadow(0 5px 5px rgba(0,0,0,.15));
    flex: 1;
    overflow: hidden;
}
.works-dtl-image._pc{
    max-width: 810px;
    aspect-ratio: 9 / 16;
}
.works-dtl-image._sp{
    max-width: 360px;
    aspect-ratio: 1 / 4;
}
.works-dtl-image img{
    display: block;
}
@media screen and (max-width:768px){
    .works-dtl-image{
        flex: 0 0 auto;
    }
    .works-dtl-image._pc{
        width: 81.5625vw;
    }
    .works-dtl-image._sp{
        width: 36.25vw;
    }
    .works-dtl-image img{
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}
.works-dtl-images-bar{
    position: absolute;
    left: 20px;
    bottom: 30px;
    width: 40.625vw;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: #fff;
    pointer-events: none;
}
.works-dtl-images-bar__thumb{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--accent-blue);
    content: "";
}

/* works-dtl-viewmore */
.works-dtl-viewmore{
    position: relative;
    margin: 100px var(--inner-sides) 0;
    padding: 60px 0 85px;
    border-radius: 30px;
    background: var(--accent-black);
}
.works-dtl-viewmore,
.works-dtl-viewmore *{
    color: #fff;
}
@media screen and (max-width:768px){
    .works-dtl-viewmore{
        margin: 40px calc(var(--inner-sides) - 5px) 0 0;
        padding: 30px 0;
        border-radius: 0 20px 20px 0;
    }
}
.works-dtl-viewmore-head{
    display: flex;
    align-items: center;
    gap: 0 20px;
    width: 1000px;
    margin: 0 auto 40px;
}
.works-dtl-viewmore-title{
    flex: 0 0 auto;
    width: 320px;
    border-right: solid 1px #fff;
    color: #fff;
    font-family: var(--font-en-serif);
    font-size: 60px;
    line-height: 1;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .works-dtl-viewmore-head{
        width: auto;
        margin: 0 0 20px var(--inner-sides_sp);
    }
    .works-dtl-viewmore-title{
        width: 100%;
        border-right: none;
        font-size: 40px;
    }
}
.works-dtl-viewmore-body{
    position: relative;
    z-index: 0;
}
@media screen and (max-width:768px){
    .works-dtl-viewmore-body{
        padding-bottom: 26px;
    }
    .works-dtl-viewmore-body::before{
        -webkit-mask-image: linear-gradient(to right, #000, rgba(0,0,0,0));
        mask-image: linear-gradient(to right, #000, rgba(0,0,0,0));
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 60px;
        background: linear-gradient(to top, var(--base-black), rgba(26,26,26,0));
        content: "";
    }
}
.works-dtl-viewmore-slider:not(._ready){
    display: none;
}
.works-dtl-viewmore-slider.keen-slider{
    width: 2380px!important;
}
.works-dtl-viewmore-slider .works-list-item{
    width: 320px;
    padding: 0 10px;
}
@media screen and (max-width:768px){
    .works-dtl-viewmore-slider.keen-slider{
        --slide-wid: 67.5vw;
        width: calc(var(--slide-wid) * 3)!important;
    }
    .works-dtl-viewmore-slider .works-list-item{
        width: var(--slide-wid);
        padding: 0 calc((var(--slide-wid) - 62.5vw) / 2);
    }
}
.works-dtl-viewmore-slider .works-list-item a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.works-dtl-viewmore-slider .works-list-thumb{
    width: 100%;
    aspect-ratio: 8 / 5;
    margin-bottom: 30px;
}
.works-dtl-viewmore-slider .works-list-thumb_pc{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}
.works-dtl-viewmore-slider .works-list-thumb_pc img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.works-dtl-viewmore-slider .works-list-thumb_sp{
    display: none;
}
@media screen and (max-width:768px){
    .works-dtl-viewmore-slider .works-list-thumb{
        margin-bottom: 15px;
    }
    .works-dtl-viewmore-slider .works-list-thumb_pc img{
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}
.works-dtl-viewmore-slider .works-list-type{
    display: inline-flex;
    margin-bottom: 5px;
    padding: 6px 13px 7px;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    color: var(--accent-black);
    font-size: 1.2rem;
    font-weight: bold;
    line-height: calc(1em + 1px);
    letter-spacing: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (max-width:768px){
    .works-dtl-viewmore-slider .works-list-type{
        margin-bottom: 6px;
        padding: 6px 12px 7px;
        font-size: 1rem;
    }
}
.works-dtl-viewmore-slider .works-list-name{
    font-weight: 500;
    line-height: calc(1em + 12px);
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .works-dtl-viewmore-slider .works-list-name{
        line-height: calc(1em + 8px);
    }
}
.works-dtl-viewmore-bottom{
    position: absolute;
    top: 60px;
    right: calc(50% - 500px);
}
.works-dtl-viewmore-btn{
    width: 200px;
}
.works-dtl-viewmore-btn a{
    height: 60px;
    background: #fff;
    color: var(--accent-black);
    font-size: 1.6rem;
}
@media screen and (max-width:768px){
    .works-dtl-viewmore-bottom{
        position: static;
        width: auto;
        margin-left: var(--inner-sides_sp);
        padding-top: 30px;
    }
    .works-dtl-viewmore-btn{
        width: 62.5vw;
    }
    .works-dtl-viewmore-btn a{
        height: 50px;
        font-size: 1.4rem;
    }
}

/*-------------
contact-container
-------------*/
.contact-container{
    display: flex;
    gap: 0 60px;
    width: var(--inner-width);
    margin: 0 auto;
}
.contact-side{
    flex: 0 0 auto;
    width: 420px;
}
@media screen and (max-width:768px){
    .contact-container{
        flex-direction: column;
        gap: 30px 0;
    }
    .contact-side{
        width: 100%;
    }
}
.contact-privacy-link{
    position: sticky;
    top: calc(var(--header-hit) - 40px);
    left: 0;
    margin-top: 40px;
    padding: 42px 30px 40px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(102,102,102,.08);
    background: #fff;
}
.contact-privacy-link-title{
    position: relative;
    margin-bottom: 13px;
    padding-bottom: 1px;
    color: var(--accent-black);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: calc(1em + 3px);
}
.contact-privacy-link-title::before{
    position: absolute;
    top: 0;
    left: -30px;
    width: 4px;
    height: 100%;
    background: currentColor;
    content: "";
}
.contact-privacy-link-btn{
    margin-top: 23px;
}
.contact-privacy-link-btn a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 12px;
    height: 60px;
    padding-bottom: 2px;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-serif);
    font-weight: 600;
}
.contact-privacy-link-btn a::after{
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: url(../images/icon_blank.svg) no-repeat center / contain;
    content: "";
}
@media screen and (max-width:768px){
    .contact-privacy-link{
        position: static;
        margin-top: 23px;
        padding: 27px 20px 20px;
        border-radius: 10px;
    }
    .contact-privacy-link-title{
        font-size: 1.6rem;
    }
    .contact-privacy-link-title::before{
        left: -20px;
    }
    .contact-privacy-link-btn{
        margin-top: 17px;
    }
    .contact-privacy-link-btn a{
        gap: 0 10px;
        height: 58px;
        padding-bottom: 0;
        font-size: 1.6rem;
    }
}

/* contact-form */
.contact-form{
    flex: 1 1 auto;
}
.contact-form-row{
    position: relative;
    padding: 21px 0 20px;
}
.contact-form-row::before{
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border-gray);
    content: "";
}
@media screen and (max-width:768px){
    .contact-form-row{
        padding: 16px 0 20px;
    }
}
.contact-form-row-head{
    display: flex;
    align-items: flex-start;
    gap: 0 11px;
    min-height: 20px;
    margin-bottom: 13px;
    color: var(--accent-black);
    font-weight: 500;
    line-height: calc(1em + 3px);
    letter-spacing: .04em;
}
.contact-form-row-head .__req{
    flex: 0 0 auto;
    padding: 3px 11px 4px;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-size: 1.2rem;
    line-height: calc(1em + 1px);
}
@media screen and (max-width:768px){
    .contact-form-row-head{
        gap: 0 10px;
        min-height: 18px;
        margin-bottom: 12px;
    }
    .contact-form-row-head .__req{
        font-size: 1rem;
    }
}
.contact-form-row-body{
    display: flex;
    flex-direction: column;
    gap: 10px 0;
}
.contact-form input:is([type="text"],[type="email"],[type="tel"]){
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    border: solid 1px var(--accent-gray);
    border-radius: 6px;
    background: #fff;
    font-size: max(1.6rem, 16px);
}
@media screen and (max-width:768px){
    .contact-form input:is([type="text"],[type="email"],[type="tel"]){
        height: 44px;
        border-radius: 5px;
    }
}
.contact-form textarea{
    display: block;
    width: 100%;
    height: 200px;
    min-height: 200px;
    padding: 11px 15px;
    border: solid 1px var(--accent-gray);
    border-radius: 6px;
    background: #fff;
    font-size: max(1.6rem, 16px);
    resize: vertical;
}
@media screen and (max-width:768px){
    .contact-form textarea{
        height: 150px;
        min-height: 150px;
        padding-top: 8px;
        border-radius: 5px;
    }
}
.contact-form ::placeholder{
    color: var(--text-gray);
    font-weight: 400;
}
@media screen and (max-width:768px){
    .contact-form ::placeholder{
        font-size: 1.4rem;
    }
}
.contact-form-select{
    position: relative;
}
.contact-form-select::after{
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    top: calc(50% - 5px);
    right: 15px;
    width: 10px;
    height: 10px;
    background: var(--base-black);
    content: "";
    pointer-events: none;
}
.contact-form-select select{
    width: 100%;
    height: 60px;
    padding: 0 15px;
    border: solid 1px var(--accent-gray);
    border-radius: 6px;
    background: #fff;
    font-size: max(1.6rem, 16px);
}
@media screen and (max-width:768px){
    .contact-form-select select{
        height: 50px;
        border-radius: 5px;
    }
}
.contact-form-post{
    display: flex;
    align-items: center;
    width: 240px;
}
.contact-form-post .__postmark{
    flex: 0 0 auto;
    min-width: 30px;
    font-weight: 500;
    text-align: center;
}
@media screen and (max-width:768px){
    .contact-form-post{
        width: min(240px, 50%);
    }
    .contact-form-post .__postmark{
        min-width: 25px;
    }
}
.contact-form .__error{
    color: var(--text-red);
    font-weight: 500;
}
.contact-form-row:has(.__error) select,
.contact-form-row:has(.__error) input:is([type="text"],[type="tel"],[type="email"]),
.contact-form-row:has(.__error) textarea{
    background: #ffebeb;
}
.contact-chklabel{
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 15px;
    border: solid 1px var(--accent-gray);
    border-radius: 6px;
    background: #fff;
    line-height: calc(1em + 3px);
    cursor: pointer;
    transition: background var(--ease);
}
.contact-chklabel input{
    display: none;
}
.contact-chklabel a:not(:hover){
    text-decoration: underline;
}
.contact-chklabel .alt_check{
    flex: 0 0 auto;
    position: relative;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 6px;
    background: #ccc;
    content: "";
    transition: background var(--ease);
}
.contact-chklabel input:checked + .alt_check{
    background: var(--base-black);
}
.contact-chklabel .alt_check::after{
    position: absolute;
    top: 4px;
    right: 7px;
    transform: rotate(45deg);
    width: 7px;
    height: 12px;
    border-right: solid 2px #fff;
    border-bottom: solid 2px #fff;
    content: "";
}
@media screen and (max-width:768px){
    .contact-chklabel{
        min-height: 50px;
        padding: 0 15px;
        border-radius: 5px;
    }
    .contact-chklabel .alt_check{
        width: 20px;
        height: 20px;
        margin-right: 13px;
        border-radius: 5px;
    }
    .contact-chklabel .alt_check::after{
        width: 6px;
        height: 10px;
    }
}
.contact-form-bottom{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 15px;
    margin-top: 20px;
}
@media screen and (max-width:768px){
    .contact-form-bottom{
        flex-direction: column;
        align-items: flex-start;
        gap: 15px 0;
        margin-top: 10px;
    }
}
.contact-form-btn{
    flex: 0 0 auto;
    width: 360px;
    overflow: hidden;
    border-radius: 99px;
    transition: opacity var(--ease);
}
.contact-form-btn._inactive{
    opacity: .5;
    pointer-events: none;
}
.contact-form-btn a,
.contact-form-btn-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 68px;
    padding-bottom: 2px;
    border-radius: 99px;
    background: var(--accent-black);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 600;
}
.contact-form-btn a::after,
.contact-form-btn-inner::after{
    position: absolute;
    top: calc(50% - 5px);
    right: 30px;
    width: 14px;
    height: 10px;
    background: var(--bg-arrow_white);
    content: "";
}
@media (any-hover: hover){
    .contact-form-btn a:hover::after,
    .contact-form-btn-inner:hover::after{
        animation: var(--bg-arrow-slide);
    }
}
@media screen and (max-width:768px){
    .contact-form-btn{
        width: 100%;
    }
    .contact-form-btn a,
    .contact-form-btn-inner{
        height: 58px;
        padding-bottom: 0;
        font-size: 1.6rem;
    }
    .contact-form-btn a::after,
    .contact-form-btn-inner::after{
        right: 25px;
    }
}
.contact-form-backbtn{
    flex: 0 0 auto;
    width: 240px;
    overflow: hidden;
    border-radius: 99px;
}
.contact-form-backbtn a,
.contact-form-backbtn-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68px;
    border: solid 1px var(--accent-gray);
    border-radius: 99px;
    background: #fff;
}
@media screen and (max-width:768px){
    .contact-form-backbtn{
        width: min(210px, 56.25vw);
    }
    .contact-form-backbtn a,
    .contact-form-backbtn-inner{
        height: 58px;
    }
}

/* contact-msg */
.contact-msg{
    width: var(--inner-width);
    margin: 0 auto;
    padding: 50px 100px;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    background: #fff;
}
.contact-msg__title{
    margin-bottom: 30px;
    color: var(--accent-black);
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
}
.contact-msg p:not(:last-child){
    margin-bottom: 1em;
}
.contact-msg-bottom{
    margin-top: 40px;
}
@media screen and (max-width:768px){
    .contact-msg{
        width: auto;
        margin: 0 calc(var(--inner-sides_sp) - 5px);
        padding: 25px calc(var(--inner-sides_sp) + 5px) 30px;
        border-radius: 10px;
    }
    .contact-msg__title{
        margin-bottom: 15px;
        font-size: 2.4rem;
    }
    .contact-msg p br + br.sp{
        display: block;
        margin-bottom: 1em;
        content: "";
    }
    .contact-msg-bottom{
        margin-top: 30px;
    }
}