@charset "utf-8";

/*================*/
:root {
    --color-black: rgba(0,0,0,1);
    --color-white: rgba(255,255,255,1);
    --color-transparent: rgba(0,0,0,0);
    
    --color-gray-01: rgba(246,246,246,1);
    --color-gray-02: rgba(228,228,228,1);
    --color-gray-03: rgba(51,51,51,1);
    
    --color-translucent-01: rgba(0,0,0,0.6);
    --color-translucent-02: rgba(246,246,246,0.9);
    
    --color-font-base: rgba(87,87,87,1);
    
    --color-base-pink: rgba(237,187,207,1);
    --color-base-blue: rgba(114,188,226,1);
    --color-base-green: rgba(122,222,168,1);
    
    --color-shop-a-01: rgba(216,107,150,1);
    --color-shop-b-01: rgba(212,191,136);
    --color-shop-c-01: rgba(71,149,190,1);
    --color-shop-d-01: rgba(72,161,132,1);
    
    --color-shop-a-02: rgba(255,245,249,1);
    --color-shop-b-02: rgba(255,251,240,1);
    --color-shop-c-02: rgba(243,251,255,1);
    --color-shop-d-02: rgba(242,251,246,1);
    
    --gradient-white-01: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 200%);
    --gradient-onetone-01: linear-gradient(90deg, var(--color-shop-a-01) 20%, rgba(255,255,255,1) 160%);
    --gradient-onetone-02: linear-gradient(90deg, var(--color-shop-b-01) 20%, rgba(255,255,255,1) 160%);
    --gradient-onetone-03: linear-gradient(90deg, var(--color-shop-c-01) 20%, rgba(255,255,255,1) 160%);
    --gradient-onetone-04: linear-gradient(90deg, var(--color-shop-d-01) 20%, rgba(255,255,255,1) 160%);
    --gradient-twotone-01: linear-gradient(70deg, rgba(49,185,111,1) 0%, rgba(38,150,202,1) 100%);
    
    --gradient-rgb-01: linear-gradient(70deg, var(--color-base-green) 0%, var(--color-base-blue) 35%, var(--color-base-pink) 100%);
    
    --gradient-hem-01: linear-gradient(180deg, var(--color-base-pink) 0%, var(--color-base-pink) 100%);
    --gradient-hem-02: linear-gradient(180deg, var(--color-base-pink) 0%, var(--color-base-blue) 100%);
    --gradient-hem-03: linear-gradient(180deg, var(--color-base-blue) 0%, var(--color-base-green) 100%);
    --gradient-hem-04: linear-gradient(180deg, var(--color-base-green) 0%, var(--color-base-pink) 100%);
    
    --marker-text-01: linear-gradient(0deg,
        var(--color-base-blue)     0%,
        var(--color-base-blue)    10%,
        var(--color-transparent)  10%,
        var(--color-transparent) 100%
    );
    --marker-text-02: linear-gradient(0deg,
        var(--color-transparent)   0%,
        var(--color-transparent)  10%,
        var(--color-base-pink)    10%,
        var(--color-base-pink)    20%,
        var(--color-transparent)  20%,
        var(--color-transparent) 100%
    );
    
    --speed-flow-horizontal: calc(88s / 780);
    --speed-flow-vercital: 64s;
    
    --content-centerwidth: 82cqw;
    --content-linewidth-min: 0.4cqw;
    --content-fontsize-base: 3.2cqw;
    --content-pickup-linewidth-gradient: 0.8cqw;
    --content-modal-margin: 17cqw;
}

/*================*/
html {
    font-family: "Outfit","Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    color: var(--color-font-base);
}
body {
}
.basis {
}
main{
}
section {
}
section>.inner {
}
b {
    font-weight: inherit;
}
em {
    font-style: normal;
}
button {
}
menu,
aside {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

/*================*/
.hitelm {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.figelm {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    backface-visibility: hidden;
}
.svgdefinition {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}
svg.inlinesvg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    fill: rgba(0,0,0,0);
    stroke: rgba(0,0,0,0);
    stroke-width: 1;
    stroke-opacity: 1;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

/*================*/
.gradient-string {
    display: inline-block;
    vertical-align: top;
    background-image: var(--gradient-rgb-01);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--color-transparent);
    text-fill-color: var(--color-transparent);
}

/*================*/
.myanime-flow-01 {
    animation-name: myanime-flow-01;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 0 0;
}
.myanime-flow-01.myanime-flow-01-speed-a1 {
    animation-duration: calc( var(--speed-flow-horizontal) * 780);
}
.myanime-flow-01.myanime-flow-01-speed-a2 {
    animation-duration: calc( var(--speed-flow-horizontal) * 210);
}
.myanime-flow-01.myanime-flow-01-speed-b1 {
    animation-duration: calc( var(--speed-flow-horizontal) * (97.0 + 8));
}
.myanime-flow-01.myanime-flow-01-speed-b2 {
    animation-duration: calc( var(--speed-flow-horizontal) * (88.4 + 8));
}
.myanime-flow-01.myanime-flow-01-speed-b3 {
    animation-duration: calc( var(--speed-flow-horizontal) * (128.6 + 8));
}
.myanime-flow-01.myanime-flow-01-speed-b4 {
    animation-duration: calc( var(--speed-flow-horizontal) * (74.6 + 8));
}
.myanime-flow-01.myanime-flow-01-speed-b5 {
    animation-duration: calc( var(--speed-flow-horizontal) * (91.2 + 8));
}
@keyframes myanime-flow-01 {
      0%{transform: translateX(0);}
    100%{transform: translateX(-100%);}
}
/*--------*/
.myanime-flow-02 {
    animation-name: myanime-flow-02;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 0 0;
}
.myanime-flow-02.myanime-flow-02-speed-a1 {
    animation-duration: calc(var(--speed-flow-vercital) * 1);
}
@keyframes myanime-flow-02 {
      0%{transform: translateY(-50%);}
    100%{transform: translateY(0);}
}
.myanime-flow-03 {
    animation-name: myanime-flow-03;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 0 0;
}
.myanime-flow-03.myanime-flow-03-speed-a1 {
    animation-duration: calc(var(--speed-flow-vercital) * 0.5);
}
@keyframes myanime-flow-03 {
      0%{transform: translateY(0);}
    100%{transform: translateY(-50%);}
}