@charset "utf-8";

/*================*/
.this-content-field {
    --color-black: #282D3C;
    --color-white: #FFFFFF;
    --color-transparent: rgba(0,0,0,0);
    
    --color-brand-01: #004099;
    
    --color-translucent-01: rgba(27,40,65,0.85);
    --color-translucent-02: rgba(200,0,0,0.2);
    
    --color-gradient-01: linear-gradient(90deg, #EC5EC2 0%, #BE3CF0 100%);
    --color-gradient-02: linear-gradient(90deg, #BE3CF0 0%, #EC5EC2 100%);
    
    --color-gray-01: #1B2841;
    --color-gray-02: #C3C3CD;
    --color-pink-01: #FF69D2;
    --color-yellow-01: #FFFF00;
    --color-blue-01: #50e1ff;
    --color-cyan-01: #3CD7FF;
    
    --color-svg-shadow-01: rgba(  0,  0,  0,0.4);
    --color-svg-shadow-02: rgba(255,255,255,  1);
    --color-svg-shadow-03: rgba(255, 80,200,  1);
    
    --color-fiber-01a: rgba(  0,204,255,0.7);
    --color-fiber-01b: rgba(  0,204,255,0.1);
    --color-fiber-01t: rgba(204,255,255,  1);
    
    --color-fiber-02a: rgba(255,102,153,0.7);
    --color-fiber-02b: rgba(255,102,153,0.1);
    
    --color-fiber-03a: rgba( 51,204, 51,0.7);
    --color-fiber-03b: rgba( 51,204, 51,0.1);
    
    --color-fiber-04a: rgba(255,153, 51,0.7);
    --color-fiber-04b: rgba(255,153, 51,0.1);
    
    --color-fiber-05a: rgba( 51,153,255,0.7);
    --color-fiber-05b: rgba( 51,153,255,0.1);
    
    --color-fiber-06a: rgba(255,255,0,0.7);
    --color-fiber-06b: rgba(255,255,0,0.1);
}

/*================*/
.this-content-field {
    position: relative;
    overflow: visible; /* for position:sticky */
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    color: var(--color-black);
}
.this-content-field * {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    box-sizing: border-box;
}
.this-content-field section {
    position: relative;
    width: 100%;
}
.this-content-field section>.inner {
    position: relative;
    margin: 0 auto 0 auto;
}
.this-content-field b {
    font-weight: inherit;
}
.this-content-field em {
    font-style: normal;
}
.this-content-field button {
    background-color: var(--color-transparent);
    border-style: none;
}
.this-content-field h1,
.this-content-field h2 {
    padding: 0 0 0 0;
}

/*================*/
.this-content-field .hitelm {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
    text-decoration: none;
    color: var(--color-black);
}
.this-content-field .hitelm.mode-inline {
    display: inline;
}
.this-content-field .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;
}
.this-content-field .svgdefinition {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}
.this-content-field 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;
}

/*================*/
.this-content-field .myfont-01 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/*================*/
.myanime-drop {
    animation-name: myanime-drop-01,myanime-drop-02;
    animation-duration: 3s;
    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-blink {
    animation-name: myanime-blink-01;
    animation-duration: 13s;
    animation-delay: 0s;
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}
@keyframes myanime-blink-01 {
      0%{opacity:   1;}
      1%{opacity: 0.3;}
      2%{opacity:   1;}
      3%{opacity: 0.3;}
      4%{opacity:   1;}
     50%{opacity:   1;}
     51%{opacity: 0.3;}
     52%{opacity:   1;}
    100%{opacity:   1;}
}

