*{
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
::after,::before{
    box-sizing:border-box;
}
:root{
    --primary-color:#212121;
    --secondary-color:#E2E0D7;
    --background-color:#C1BEAC;
    --orange:#FF6700;
    --orange-sub:#FF9145;
    --orange-light:#FFF1DE;
    --white:#FFFFFF;
    --gray:#F5F5F5;
    --gray-dark:#959595;
    --gray-light:#FCFCFC;
    --green:#22C674;
    --blue:#3CC4D6;
    --brown:#211815;
    --purple:#D4CEDD;
    --purple-sub:#A859B5;
    --deco-color:#F1F5F9;
    --error-color:#FF6C7D;
    --success-color:#00C78C;
    --message-received:#f0fdf4;
    --message-sent:#fef2f2;
    --overlay-bg:rgba(31,31,31,.2);
    --noto-sans-jp:"Noto Sans JP",sans-serif;
    --ab-omusubi:"ab-omusubi",sans-serif;
    --source-han:"source-han-sans-cjk-ja",sans-serif;
    --font-w-regular:400;
    --font-w-medium:500;
    --font-w-semibold:600;
    --font-w-bold:700;
    --font-w-black:900;
    --font-style:normal;
    --fs-sm:clamp(.75rem,.22vi + .7rem,.875rem);
    --fs-base:clamp(.875rem,.23vi + .82rem,1rem);
    --fs-md:clamp(1.125rem,.43vi + .98rem,1.375rem);
    --fs-lg:clamp(1.5rem,.74vi + 1.18rem,1.75rem);
    --fs-xl:clamp(1.75rem,1.2vi + 1.41rem,2.375rem);
    --fs-xxl:clamp(2.125rem,1.86vi + 1.67rem,3.25rem);
    --fs-xxxl:clamp(2.625rem,2.8vi + 1.97rem,4.125rem);
    --align-center:center;
}

body{
    font-family:var(--noto-sans-jp);
    font-size:var(--fs-base);
    font-weight:var(--font-w-medium);
    position:relative;
    letter-spacing:.055em;
    color:var(--primary-colo);
    background-color:var(--background-color);
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:background-color 1s ease;
}
body,
h1,
h2,
h3,
h4,
h5,
h6{
    margin:0;
    outline:none;
    line-height:1.6;
}
p{
    line-height:1.6;
}
a{
    display:inline-block;
    color:inherit;
}
a,a:focus,a:hover{
    outline:none;
    text-decoration:none;
}
a:hover{
    opacity:.7;
    cursor:pointer;
    transition:opacity .4s ease-in-out;
}
main,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section{
    position:relative;
    display:block;
}
ul,ol{
    list-style:none;
}
li{
    list-style:none;
}
nav ul{
    list-style:none;
}
figure{
    position:relative;
    display:block;
    margin-bottom:0;
    line-height:0;
}
figure figcaption{
    line-height:1.6;
}
table{
    width:100%;
}
table th{
    text-align:left;
}
iframe{
    border:none;
}
canvas{
    vertical-align:bottom;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after{
    content:'';
    content:none;
}
strong{
    font-weight:800;
}
section{
    padding:clamp(1.875rem,3.41vi + 1.02rem,3.75rem) 0;
}
span{
    display:inline-block;
}
button{
    font-family:inherit;
    background:transparent;
    border:0;
    color:inherit;
    cursor:pointer;
    letter-spacing:.06em;
    line-height:1.14;
    outline:0;
    padding:0;
}
img,svg{
    width:100%;
    height:auto;
}
input,textarea,select,button{
    font-size:var(--font-regular);
    appearance:none;
    width:auto;
    padding:0;
    border:none;
    border-radius:0;
    line-height:1.6;
    color:var(--jpp-primary);
    background:var(--jpp-white);
    letter-spacing:.05em;
    -webkit-appearance:none;
    -moz-appearance:none;
    -webkit-text-size-adjust:100%;
}
.container,
.container-lg,
.flex-container{
    position:relative;
    width:100%;
    margin:0 auto;
    padding:0 clamp(1.25rem,1.29vi + .95rem,2.5rem);
}
.container{
    max-width:80rem;
}
.pc-hide{
    display:block;
}
.sp-hide{
    display:none;
}
.p-layout{
    min-height:100vh;
    overflow-x:hidden;
}
.grid{
    display:grid;
}
.flex{
    display:flex;
    flex-direction:column;
}
.flex-reverse{
    flex-direction:column-reverse;
}
.h2-ttl{
    font-weight:var(--font-w-black);
}
.deco-ttl{
    font-family:var(--ab-omusubi);
    font-weight:var(--font-regular);
    font-style:var(--font-style);
}
.video-content{
    position: relative;
    overflow:hidden;
    width:100%;
    padding-top:56.25%;
}
.video-content iframe{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
}
.xl-text{
    font-size:3.75rem;
    font-weight:var(--font-w-black);
}
.sub-text{
    font-size:clamp(1.25rem,.45vi + 1.14rem,1.5rem);
    font-weight:var(--font-w-bold);
}
.btn{
    margin-top:clamp(1.563rem,2.84vi + .85rem,3.125rem);
}
.btn a{
    font-weight:var(--font-w-bold);
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    min-width:6.25rem;
    height:3.125rem;
    margin:0 auto;
    border-radius:2.5rem;
    text-align:center;
}
.btn a > span+span{
    margin-left:.938rem;
    line-height:1;
}
.btn-primary a{
    background-color:var(--primary-color);
    color:var(--white);
}
.l-btn a{
    max-width:25rem;
}
.btn-orange a{
    background-color:var(--orange);
}
.btn-green a{
    background-color:var(--green);
}
.btn-blue a{
    background-color:var(--blue);
}
.play-icon,.search-icon,.mail-icon{
    width:1.5rem;
}
.play-icon path,.search-icon path{
    fill:var(--white);
}
.tictok-icon .path01{
    fill:var(--white);
}
/*-- top-links --*/
.top-links,.header{
    background-color:var(--secondary-color);
    text-align:var(--align-center);
    border-bottom:.063rem solid var(--primary-color);
}
.top-links{
    padding:.625rem 0;
}
.top-links .site-ttl{
    font-size:var(--fs-sm);
}
/*-- Header --*/
.header{
    padding:.625rem 0;
}
.header .flex{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}
.header-logo{
    position:relative;
    width:clamp(16.25rem, 13.16vi + 12.96rem,28.75rem);
    z-index:3;
}
.header-logo svg path{
    fill:var(--primary-color);
}
.hamburger-menu{
    position:relative;
    width:2.25rem;
    height:2.25rem;
    border:.063rem solid var(--primary-color);
    border-radius:100%;
    overflow:hidden;
    cursor:pointer;
    z-index:3;
    transition:transform 0.3s ease;
}
.menu-toggle--open .hamburger-menu{
    transform: scale(1.1);
}
.menu-inner-content{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.25rem;
    width:100%;
    height:100%;
    background-color:var(--white);
}
.menu-inner-content span{
    width:1.375rem;
    height:.063rem;
    background-color:var(--primary-color);
}
.header-nav{
    position:fixed;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    padding:6.25rem 1.25rem 1.25rem;
    background-color:var(--secondary-color);
    z-index:2;
    clip-path:polygon(0 0,100% 0,100% 0,0 0);
    transition:clip-path 0.6s cubic-bezier(0.25,0.46,0.45,0.94),background-color 0.3s ease-in;
    backdrop-filter:blur(10px);
}
.menu-open .header-nav{
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.header-nav .nav-main--ul > li{
    opacity:0;
    transform:translateY(1.25rem);
    transition:opacity 0.4s ease-out, transform 0.4s ease-out;
}
.header-nav .nav-main--ul > li+li{
    margin-top:1.25rem;
}
.menu-open .header-nav .nav-main--ul > li{
    opacity:1;
    transform:translateY(0);
}
.menu-open .header-nav .nav-main--ul > li:nth-child(1) { transition-delay: 0.1s; }
.menu-open .header-nav .nav-main--ul > li:nth-child(2) { transition-delay: 0.15s; }
.menu-open .header-nav .nav-main--ul > li:nth-child(3) { transition-delay: 0.2s; }
.menu-open .header-nav .nav-main--ul > li:nth-child(4) { transition-delay: 0.25s; }
.menu-open .header-nav .nav-main--ul > li:nth-child(5) { transition-delay: 0.3s; }
.menu-open .header-nav .nav-main--ul > li:nth-child(6) { transition-delay: 0.35s; }
.menu-open .header-nav .nav-main--ul > li:nth-child(7) { transition-delay: 0.4s; }
.header-nav::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.05));
    opacity:0;
    transition:opacity 0.6s ease;
    pointer-events:none;
}
.menu-open .header-nav::before{
    opacity:1;
}
.header-nav .nav-inner--content{
    width:100%;
    height:100%;
    padding:1.25rem;
    border:1px solid var(--primary-color);
    overflow-y:auto;
}
.li-btn--links ul{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}
.li-btn--links li a{
    font-size:.875rem;
    display:inline-block;
    padding:.625rem .938rem;
    color:var(--white);
    border-radius:1.563rem;
    text-align:center;
}
.li-btn--links li.--support a{
    background-color:var(--orange);
}
.li-btn--links li.--consult a{
    background-color:var(--blue);
}
.header-nav .nav-main--ul > li.li-other--links{
    margin-top:2.5rem;
}
.li-other--links ul{
    display:flex;
    flex-wrap:wrap;
    gap:.938rem;
    justify-content:space-between;
}
.li-other--links ul li{
    width:calc(50% - .938rem);
}
.li-other--links ul li a{
    display:flex;
    align-items:center;
    gap:.938rem;
}
.li-other--links ul .youtube-icon,
.li-other--links ul .login-icon{
    width:1.875rem;
}
.li-other--links ul .twitter-x-icon,
.li-other--links ul .tictok-icon{
    width:1.563rem;
}
.li-other--links ul .profile-icon{
    width:1.25rem;
}
.menu-toggle--open .menu-inner-content{
    gap:0;
}
.menu-toggle--open .menu-inner-content span{
    width:1.563rem;
}
.menu-toggle--open .menu-inner-content > span:nth-of-type(1){
    transform:rotate(45deg);
}
.menu-toggle--open .menu-inner-content > span:nth-of-type(2){
    display:none;
}
.menu-toggle--open .menu-inner-content > span:nth-of-type(3){
    transform:rotate(-45deg);
}
/*-- s-links --*/
.s-last{
    background-color:var(--secondary-color);
    border-top:1px solid var(--primary-color);
    padding:0;
}
.s-last .h2-ttl{
    font-size:1.875rem;
    line-height:1.2;
    margin-bottom:clamp(1.25rem,1.1vi + .99rem,1.875rem);
    letter-spacing:-.015em;
    text-align:center;
}
.s-last .content01{
    padding:clamp(1.875rem,3.41vi + 1.02rem,3.75rem) 0 0;
    background:url(../img/top/sp-main-visual-pattern.png) var(--secondary-color) center / cover no-repeat;
}
.s-last .links-list{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.938rem;
}
.s-last .links-list .btn{
    margin-top:0;
}
.s-last .links-list a{
    width:13.75rem;
    color:var(--white);
    margin-top:0;
}
.s-last .mouse-characters{
    margin-top:clamp(1.875rem,3.41vi + 1.02rem,3.75rem);
}
.s-last .mouse-characters ol{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:.938rem;
    width:100%;
    max-width:48rem;
    margin:0 auto;
    bottom:-.375rem;
}
.s-last .mouse-characters ol li{
    text-align:center;
}
.mouse-characters li:nth-child(1) img{
  animation:jumpUp 2s ease-in-out infinite;
  animation-delay:0s;
}

.mouse-characters li:nth-child(2) img{
  animation:jumpUpHigh 2.5s ease-in-out infinite;
  animation-delay:.3s;
}

.mouse-characters li:nth-child(3) img{
  animation:jumpUpLow 1.8s ease-in-out infinite;
  animation-delay:.7s;
}

.mouse-characters li:nth-child(4) img{
  animation:jumpUp 2.2s ease-in-out infinite;
  animation-delay:1s;
}

.mouse-characters li:nth-child(5) img{
  animation:jumpUpHigh 1.9s ease-in-out infinite;
  animation-delay:1.4s;
}
/*-- footer --*/
.footer{
    padding:1.875rem 0 1.25rem;
    background-color:var(--primary-color);
    color:var(--white);
}
.footer .flex{
    gap:.938rem;
    margin-bottom:2.5rem;
}
.footer .mouse-footer{
    max-width:clamp(13.75rem,4.42vi + 12.71rem,16.25rem);
    margin:0 auto;
}
.footer .site-ttl{
    font-size:.875rem;
    text-align:center;
}
.footer-logo{
    margin-top:.625rem;
}
.footer-logo svg path{
    fill:var(--white);
}
.footer .author-ttl{
    font-size:var(--fs-base);
    margin-bottom:.625rem;
}
.footer .company-address{
    font-size:var(--fs-sm);
}
.footer .copy{
    font-size:var(--fs-sm);
    text-align:center;
}
/*-- media query 47.938rem --*/
@media screen and (max-width:47.938rem){
    .li-btn--links li a{
        width:12.5rem;
    }
}
/*-- media query 48rem --*/
@media screen and (min-width:48rem){
    .s-last .links-list{
        flex-direction:row;
    }
    .footer .flex{
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:3.125rem;
        margin-bottom:0;
    }
    .footer .flex .content03{
        margin-top:-2rem;
    }
}
/*-- media query 80rem --*/
@media screen and (min-width:80rem){
    .pc-hide{
        display:none;
    }
    .sp-hide{
        display:block;
    }
    .l-btn a{
        height:4.375rem;
    }
    .l-btn .play-icon,
    .l-btn .search-icon,
    .l-btn .mail-icon{
        width:1.875rem;
    }
    /*-- top-links --*/
    .top-links .flex{
        flex-direction:row;
        justify-content:space-between;
    }
    .top-links .flex-content{
        font-size:.875rem;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:1.563rem;
    }
    .top-links ul{
        display:flex;
        align-items:center;
    }
    .top-links ul li+li{
        margin-left:1.25rem;
    }
    .top-links ul li a{
        display:flex;
        align-items:center;
        gap:.625rem;
        line-height:1;
    }
    .top-links ul .youtube-icon,
    .top-links ul .login-icon{
        width:1.5rem;
    }
    .top-links ul .twitter-x-icon,
    .top-links ul .tictok-icon,
    .top-links ul .profile-icon{
        width:1.25rem;
    }
    .hamburger-menu,
    .li-other--links{
        display:none;
    }
    .header-nav{
        position:relative;
        display:block;
        clip-path:none;
        padding:0;
        width:100%;
        height:auto;
        background-color:transparent;
    }
    .header-nav::before{
        content:none;
    }
    .header-nav .nav-inner--content{
        padding:0;
        border:0;
    }
    .header-nav .nav-main--ul > li{
        transform:none;
        opacity:1;
    }
    .header-nav .nav-main--ul > li+li{
        margin-top:0;
    }
    .nav-main--ul{
        display:flex;
        align-items:center;
    }
    .nav-main--ul li+li{
        margin-left:clamp(.938rem,2.34vi + -0.94rem,1.875rem);
    }
    .li-btn--links ul{
        flex-direction:row;
        gap:0;
    }
    .s-last .content01{
        background:url(../img/top/main-visual-pattern.png) var(--secondary-color) center / contain repeat;
    }
    .s-last .mouse-characters ol{
        bottom:-.625rem;
    }
    .s-last .mouse-characters ol li img{
        width:80%;
    }
    .footer .company-address{
        white-space:nowrap;
    }
}

/*-- Jump animation keyframes --*/
@keyframes jumpUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes jumpUpHigh {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes jumpUpLow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}