@charset "utf-8";

/*================*/
:root {
    --color-black: #282D3C;
    --color-white: #ffffff;
    --color-transparent: rgba(0,0,0,0);
    
    --color-translucent-01: rgba(239,242,246,0.6);
    --color-translucent-02: rgba(239,242,246,0.9);
    --color-translucent-03: rgba( 15, 30,210,0.3);
    --color-translucent-04: rgba(  0,  0,  0,0.3);
    
    --color-gray-01: #A7AFC1;
    --color-gray-02: #8F98AC;
    --color-gray-03: #EFF2F6;
    
    --color-brand-01: #0F1ED2;
}

/*================*/
html {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
}
body {
}
.basis {
}
main{
}
section {
    position: relative;
    width: 100%;
}
section>.inner {
    position: relative;
    margin: 0 auto 0 auto;
}
b {
    font-weight: inherit;
}
em {
    font-style: normal;
}
button {
}

/*================*/
.hitelm {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
}
.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;
}

/*================*/
.myanime-drop {
    animation-name: myanime-drop-01,myanime-drop-02;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}
@keyframes myanime-drop-01 {
      0%{top:    0;}
    100%{top: 100%;}
}
@keyframes myanime-drop-02 {
      0%{opacity: 1;}
     60%{opacity: 1;}
    100%{opacity: 0;}
}
.myanime-slidefade {
    animation-name: myanime-slidefade-01,myanime-slidefade-02;
    animation-duration: 4s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}
@keyframes myanime-slidefade-01 {
      0%{transform: translateX(0);}
     80%{transform: translateX(0);}
    100%{transform: translateX(-20%);}
}
@keyframes myanime-slidefade-02 {
      0%{opacity: 0;}
     10%{opacity: 1;}
     80%{opacity: 1;}
    100%{opacity: 0;}
}

/*================*/
/* !!!! dev */
html.mode-design body {
    background-image: url(../../_dsn_pc.png);
    background-repeat: no-repeat;
    background-position: 50% -161px;
    background-size: 1512px auto;
    /*
    background-image: url(../../_dsn_sp.png);
    background-repeat: no-repeat;
    background-position: 0px -47px;
    background-size: 100% auto;
    */
}
html.mode-design .basis {
    opacity: 0.4;
}/*
html.mode-design section:nth-of-type(2n) {
    background-color: red;
}
*/
html.mode-outline * {
    outline: solid 1px blue;
}
/* dev !!!! */