@charset "utf-8";
/*------------
 TOP PAGE - PC
--------------*/

main{
    width: 100%;
}

.main{
    width: 100%;
    height: 100vh;
    background: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* navy */
.circle-base {
    position: absolute;
    top: 50%;
    left: calc(50% - 4.63vw);
    width: 100vh;
    height: 100vh;
    border-radius: 50%;
    background: #073e93;
    transform: translate(-50%, -50%) scale(3.2);
    transform-origin: center center;
    animation: circle-base-anim 4.5s linear forwards;
}
@keyframes circle-base-anim {
    0%   { transform: translate(-50%, -50%) scale(3.2);   background: #073e93; }
    30%  { transform: translate(-50%, -50%) scale(1.6);   background: #073e93;}
    46%  { transform: translate(-50%, -50%) scale(0.8);   background: #009245; }
    54%  { transform: translate(-50%, -50%) scale(0.5);   background: #fcee21; }
    67%  { transform: translate(-50%, -50%) scale(0.18); background: #fcee21; }
    89%  { transform: translate(-50%, -50%) scale(0.18); background: #fcee21; }
    100% { transform: translate(-50%, -50%) scale(0);     background: #fcee21; }
}

/* main-text */
.main-text {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: main-text-fade 4.5s linear forwards;
}
.main-text .text-svg {
    width: 44%;
    height: auto;
    animation: main-text-color 4.5s ease forwards;
}
.main-text .text-svg path { fill: currentColor; }
@keyframes main-text-color {
    0%   { color: #ffffff; }
    54%  { color: #ffffff; }
    66%  { color: #000000; }
    100% { color: #000000; }
}
@keyframes main-text-fade {
    0%,  89% { opacity: 1; }
    96%, 100% { opacity: 0; }
}

/* circle-set */
.circle-set {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.main_dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--d);
    height: var(--d);
    visibility: hidden;
    transform: translate(-50%, -50%) translate(0, 0) scale(0);
    animation: main_dot-open var(--dur) cubic-bezier(0.22, 1, 0.36, 1) var(--delay) forwards;
}
.main_dot > i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--c);
    will-change: transform;
    --fm: 2.2;   /* 浮遊 */
    --fdm: 0.5;  /* 速さ */
    animation-name: main_dot-float;
    animation-duration: calc(var(--fdur) * var(--fdm, 1));
    animation-timing-function: ease-in-out;
    animation-delay: var(--fdelay);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* 中央(scale0) → 着地(--tx/--ty, scale1) */
@keyframes main_dot-open {
    0%   { visibility: visible; transform: translate(-50%, -50%) translate(0, 0) scale(0); }
    100% { visibility: visible; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1); }
}
/* 浮遊：揺れ幅は --fx/--fy に共通倍率 --fm を掛けて算出（--fm を変えれば全体調整） */
@keyframes main_dot-float {
    from { transform: translate(0, 0); }
    to   { transform: translate(calc(var(--fx) * var(--fm, 1)), calc(var(--fy) * var(--fm, 1))); }
}

.main_dot.sp { display: none; }

/* pc */
.p1  { --c:#c39f35;--d:1.38vw;--tx:-30.43vw;--ty:-33.70vh;--dur:0.74s;--delay:4.84s;--fx:-2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.78s }
.p2  { --c:#c39f35;--d:1.38vw;--tx:-21.99vw;--ty:30.72vh;--dur:0.74s;--delay:4.87s;--fx:2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.81s }
.p3  { --c:#fff53c;--d:1.38vw;--tx:-41.26vw;--ty:-16.45vh;--dur:0.74s;--delay:4.9s;--fx:-2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.84s }
.p4  { --c:#c39f35;--d:1.38vw;--tx:31.51vw;--ty:-17.52vh;--dur:0.74s;--delay:4.82s;--fx:2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.76s }
.p5  { --c:#c39f35;--d:1.38vw;--tx:-44.04vw;--ty:2.39vh;--dur:0.74s;--delay:4.85s;--fx:-2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.79s }
.p6  { --c:#0059a6;--d:4.48vw;--tx:-32.31vw;--ty:15.55vh;--dur:0.77s;--delay:4.85s;--fx:2.4px;--fy:-6.5px;--fdur:3.5s;--fdelay:5.82s }
.p7  { --c:#0059a6;--d:3.89vw;--tx:23.98vw;--ty:-29.61vh;--dur:0.77s;--delay:4.77s;--fx:-2.3px;--fy:-6.3px;--fdur:3.5s;--fdelay:5.74s }
.p8  { --c:#0059a6;--d:3.89vw;--tx:33.02vw;--ty:8.00vh;--dur:0.77s;--delay:4.81s;--fx:2.3px;--fy:-6.3px;--fdur:3.5s;--fdelay:5.78s }
.p9  { --c:#00964d;--d:7.69vw;--tx:-47.40vw;--ty:26.83vh;--dur:0.81s;--delay:4.79s;--fx:-2.7px;--fy:-7.5px;--fdur:3.7s;--fdelay:5.8s }
.p10 { --c:#00964d;--d:7.81vw;--tx:25.93vw;--ty:31.79vh;--dur:0.81s;--delay:4.82s;--fx:2.7px;--fy:-7.5px;--fdur:3.8s;--fdelay:5.83s }
.p11 { --c:#fff53c;--d:9.85vw;--tx:-29.79vw;--ty:-5.27vh;--dur:0.84s;--delay:4.71s;--fx:-2.9px;--fy:-8.2px;--fdur:3.9s;--fdelay:5.75s }
.p12 { --c:#0059a6;--d:14.18vw;--tx:-46.10vw;--ty:-41.55vh;--dur:0.89s;--delay:4.69s;--fx:3.3px;--fy:-9.6px;--fdur:4.2s;--fdelay:5.78s }
.p13 { --c:#00964d;--d:11.64vw;--tx:46.76vw;--ty:14.03vh;--dur:0.86s;--delay:4.76s;--fx:-3.0px;--fy:-8.8px;--fdur:4.0s;--fdelay:5.82s }
.p14 { --c:#fff53c;--d:33.94vw;--tx:42.90vw;--ty:-50.00vh;--dur:0.95s;--delay:4.58s;--fx:5.0px;--fy:-16.0px;--fdur:5.6s;--fdelay:5.73s }

/* tb/sp */
.s1  { --c:#fff53c;--d:3.34vw;--tx:-42.18vw;--ty:8.65vh;--dur:0.74s;--delay:4.84s;--fx:-2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.78s }
.s2  { --c:#fff53c;--d:3.34vw;--tx:38.65vw;--ty:26.97vh;--dur:0.74s;--delay:4.87s;--fx:2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.81s }
.s3  { --c:#fff53c;--d:3.34vw;--tx:40.16vw;--ty:-20.00vh;--dur:0.74s;--delay:4.9s;--fx:-2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.84s }
.s4  { --c:#c39f35;--d:2.67vw;--tx:-28.64vw;--ty:33.50vh;--dur:0.73s;--delay:4.82s;--fx:2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.75s }
.s5  { --c:#c39f35;--d:2.67vw;--tx:-41.83vw;--ty:-22.32vh;--dur:0.73s;--delay:4.86s;--fx:-2.1px;--fy:-5.4px;--fdur:3.3s;--fdelay:5.79s }
.s6  { --c:#00964d;--d:33.32vw;--tx:57.43vw;--ty:0.57vh;--dur:0.88s;--delay:4.73s;--fx:3.2px;--fy:-9.5px;--fdur:4.2s;--fdelay:5.81s }
.s7  { --c:#fff53c;--d:82.23vw;--tx:50.47vw;--ty:-53.93vh;--dur:0.95s;--delay:4.58s;--fx:-5.0px;--fy:-16.0px;--fdur:5.6s;--fdelay:5.73s }
.s8  { --c:#fff53c;--d:23.86vw;--tx:-43.17vw;--ty:38.59vh;--dur:0.84s;--delay:4.73s;--fx:2.9px;--fy:-8.2px;--fdur:3.9s;--fdelay:5.77s }
.s9  { --c:#00964d;--d:15.04vw;--tx:-34.32vw;--ty:-30.84vh;--dur:0.79s;--delay:4.81s;--fx:-2.5px;--fy:-7.0px;--fdur:3.6s;--fdelay:5.8s }
.s10 { --c:#0059a6;--d:24.58vw;--tx:42.67vw;--ty:38.74vh;--dur:0.84s;--delay:4.79s;--fx:2.9px;--fy:-8.3px;--fdur:3.9s;--fdelay:5.83s }
.s11 { --c:#0059a6;--d:9.42vw;--tx:6.13vw;--ty:-33.79vh;--dur:0.77s;--delay:4.79s;--fx:-2.3px;--fy:-6.3px;--fdur:3.5s;--fdelay:5.76s }
.s12 { --c:#0059a6;--d:9.42vw;--tx:-46.89vw;--ty:0.05vh;--dur:0.77s;--delay:4.82s;--fx:2.3px;--fy:-6.3px;--fdur:3.5s;--fdelay:5.79s }
.s13 { --c:#00964d;--d:7.21vw;--tx:19.74vw;--ty:33.50vh;--dur:0.76s;--delay:4.87s;--fx:-2.3px;--fy:-6.0px;--fdur:3.4s;--fdelay:5.83s }


/* main-logo */
.main-logo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: main-logo-in 1.6s ease 5.2s forwards;
    animation: main-logo-in 1.6s ease 4.9s forwards;
    animation: main-logo-in 1.7s ease 4.8s forwards;
}
.main-logo img { width: 25.76%; }

@keyframes main-logo-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.main_dot.pc { display: none; }
.main_dot.sp { display: block; }
.circle-base {
    top: 50%;
    left: calc(50% - 6vw);
}
@keyframes circle-base-anim {
    0%   { transform: translate(-50%, -50%) scale(3.2);   background: #2e3192; }
    30%  { transform: translate(-50%, -50%) scale(1.6);   background: #2e3192; }
    46%  { transform: translate(-50%, -50%) scale(0.8);   background: #009245; }
    54%  { transform: translate(-50%, -50%) scale(0.5);   background: #fcee21; }
    67%  { transform: translate(-50%, -50%) scale(0.12); background: #fcee21; }
    89%  { transform: translate(-50%, -50%) scale(0.12); background: #fcee21; }
    100% { transform: translate(-50%, -50%) scale(0);     background: #fcee21; }
}
.main-text .text-svg {
    width: 60%;
}
.main-logo img { 
    width: 46%;
}
}
@media screen and (max-width: 640px) {
.main-logo img { 
    width: 50%;
}
}
@media screen and (max-width: 480px) {
.circle-base {
    top: 50%;
    left: calc(50% - 6.6vw);
}
@keyframes circle-base-anim {
    0%   { transform: translate(-50%, -50%) scale(3.2);   background: #2e3192; }
    30%  { transform: translate(-50%, -50%) scale(1.6);   background: #2e3192; }
    46%  { transform: translate(-50%, -50%) scale(0.8);   background: #009245; }
    54%  { transform: translate(-50%, -50%) scale(0.5);   background: #fcee21; }
    67%  { transform: translate(-50%, -50%) scale(0.09); background: #fcee21; }
    89%  { transform: translate(-50%, -50%) scale(0.09); background: #fcee21; }
    100% { transform: translate(-50%, -50%) scale(0);     background: #fcee21; }
}
.main-text .text-svg {
    width: 70%;
}
.main-logo img { 
    width: 60%;
}
}
@media (prefers-reduced-motion: reduce) {
    .main_dot > i { animation: none !important; }
}

/* scroll-indicator */
.scroll-indicator {
    width: 40px;
    position: absolute;
    bottom: 10px;
    left: calc( 50% - 40px / 2 );
}
.scroll-indicator a{
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.scroll-text {
    font-family: "EB Garamond", serif;
    font-size: 0.9375em;
    letter-spacing: 0.08em;
    color: #c39f35;
}
.scroll-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c39f35;
    opacity: 0.2;
    animation: dotFade 1.5s infinite;
}
.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.25s; }
.dot:nth-child(3) { animation-delay: 0.5s; }

@keyframes dotFade {
    0%, 60%, 100% { opacity: 0.2; }
    30% { opacity: 1; }
}

@media screen and (max-width: 840px) {
.scroll-indicator {
    bottom: 70px;
}
}

/* anchor link */
#donations{
    position: absolute;
    top: -100px;
    left: 0;
}
#statement{
    position: absolute;
    top: -70px;
    left: 0;
}
#message{
    position: absolute;
    top: -280px;
    left: 0;
}
#greeting,
#future{
    position: absolute;
    top: -50px;
    left: 0;
}
#history{
    position: absolute;
    top: -70px;
    left: 0;
}
#topics{
    position: absolute;
    top: -20px;
    left: 0;
}
/*-----------------------------640px-----*/
@media screen and (max-width: 640px) {
    #message{
        top: -150px;
    }
    #history{
        top: -50px;
    }
    #topics{
        top: -30px;
    }
}


/*-----------
content
-------------*/
article{
    width: 100%;
}
.cont01{
    width: 100%;
    position: relative;
    z-index: 0;
}

/* -----------
cont01  maru_bg_anime
------------- */
.dot-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    background: transparent;
    pointer-events: none;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.7;
    animation: floaty var(--dur) ease-in-out infinite;
    will-change: transform;
    height: auto;
    aspect-ratio: 1 / 1;
}
@keyframes floaty {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(var(--dx), var(--dy)) scale(1.02); }
}
.rdot {
    position: absolute;
    top: 0;
    border-radius: 50%;
    will-change: transform;
}

 /* big circle bg blur:
--sp=スクロール速度(小さいほど止まって見える)
--dur=浮遊の周期, --dx/--dy=浮遊の揺れ幅(方向と量)  */
/* 
blue
 background: #25dafc; 
green
 background: #2ecd0e;
navy
background: #007ce7;
yellow
background: #fafd04;
*/
.blob01{
    top:100px;
    left: clamp(-180px, -16%, -240px);
    width: clamp(250px, 25vw, 390px); 
    background: #25dafc; 
    --sp:0.1;
    --dur:8s;
    --dx:120px;
    --dy:-80px;
}
.blob02{
    top:5%;
    right: clamp(-140px, -10%, -200px);
    width: clamp(250px, 25vw, 390px); 
    background: #2ecd0e;
    --sp:0.05;
    --dur:6s;
    --dx:-80px;
    --dy:130px; 
}
.blob03{
    top:40%;
    left: clamp(-180px, -50px, -240px);
    width: clamp(250px, 25vw, 390px); 
    background: #fafd04;
    opacity: 0.6;
    --sp:0.1;
    --dur:6s;
    --dx:100px;
    --dy:-70px;
}
.blob04{ 
    top: -150%;
    left: calc( 50% - 22vw / 2 );
    width: clamp(250px, 22vw, 390px); 
    background: #fafd04;
    --sp: 0.1;
    --dur: 4s;
    --dx: 110px;
    --dy: -70px;
    opacity: 0.6;
} 
.blob05{ 
    top:50%;
    right: clamp(-100px, -16%, -200px);
    width: clamp(250px, 25vw, 390px); 
    background: #007ce7;
    --sp: 0.11;
    --dur: 6s;
    --dx: 80px;
    --dy: -150px;
}
.blob06{
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .blob { animation: none; }
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.blob01{ 
    top:5%;
    --dx:50px;
    --dy:-50px;
}
.blob02{
    top:5%;
    --dx:-50px;
    --dy:120px;
}
.blob03{ 
    top:40%;
    --dx:80px;
    --dy:-50px;
}
.blob04{ 
    top: -100%;
    left: calc( 50% - 250px / 2 );
    --dx:10px;
    --dy:-10px;
}
.blob05{ 
    top:50%;
    --dx:50px;
    --dy:-140px;
}
}
/*-----------------------------640px-----*/
@media screen and (max-width: 640px) {
.blob {
    filter: blur(30px);
}
.blob01{ 
    left: clamp(-60px, -16%, -120px);
    width: clamp(120px, 15vw, 200px); 
}
.blob02{
    top:12%;
    right: clamp(-60px, -16%, -120px);
    width: clamp(120px, 15vw, 200px); 
}
.blob03{ 
    top:60%;
    left: clamp(-60px, -16%, -120px);
    width: clamp(120px, 15vw, 200px); 
    background: #2ecd0e;
}
.blob04{ 
    top: -100%;
    left: calc( 50% - 120px / 2 );
    width: clamp(120px, 15vw, 200px); 
}
.blob05{ 
    top:50%;
    right: clamp(-60px, -16%, -120px);
    width: clamp(120px, 15vw, 200px); 
}
.blob06{
   top: 75%;
   right: clamp(80px, -16%, 100px);
   width: clamp(120px, 15vw, 200px); 
    display: block;
    background: #fafd04;
    --sp:0.11;
    --dur:6s;
    --dx:80px;
    --dy:-150px;
}
}


.cont_inner{
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.cont01_inner01{
    width: 76.92%;
    margin: 0 auto;
    padding: 250px 0;
    position: relative;
}
.cont01_text{
    font-size: 1.125em;
    line-height: 1.85em;
    font-feature-settings: "palt";
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0 0 100px;
    position: relative;
    z-index: 4;
}
.cont01_title{
    width: 347px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
.cont01_title img{
position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .para { transform: none !important; }
}

.cont01_i01{
    position: absolute;
    top: 2%;
    left: 16%;
    width: 24%;
    z-index: 1;
}
.cont01_i02{
    position: absolute;
    top: 10.85%;
    right: 10.5%;
    width: 35%;
    z-index: 1;
}
.cont01_i03{
    position: absolute;
    top: 27%;
    left: 3.5%;
    width: 27%;
    z-index: 1;
}
.cont01_i04{
    position: absolute;
    top: 37%;
    right: 3.5%;
    width: 23.3%;
    z-index: 1;
}
.cont01_i05{
    position: absolute;
    bottom: 8.6%;
    left: 8.2%;
    width: 23.5%;
    z-index: 1;
}
.cont01_i06{
    position: absolute;
    bottom: -1%;
    right: 8.5%;
    width: 24.7%;
    z-index: 1;
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.cont01_i01{
    top: 5%;
    left: 5%;
    width: 29%;
}
.cont01_i02{
    top: 10.85%;
    right: -2%;
    width: 43%;
}
.cont01_i03{
    top: 30%;
    left: -15%;
    width: 33%;
}
.cont01_i04{
    top: 37%;
    right: -14%;
    width: 29%;
}
.cont01_i05{
    bottom: 15%;
    left: -10%;
    width: 30%;
}
.cont01_i06{
    bottom: 6%;
    right: -8%;
    width: 31%
}
}


.cont01_logo_area{
    width: 100%;
    position: relative;
}
.cont01_logo_area_inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.cont01_bottom_bg{
    width: 100%;
    position: relative;
    z-index: 0;
}
.cont01_inner02{
    width: 646px;
    margin: 0 auto -100px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 2;
}
.cont01_inner02_logo{
    width: 220px;
    padding: 0 38px 0 0;
}
.cont01_inner02 dl{
    width: 426px;
    padding: 10px 0 10px 40px;
    border-left: 1px solid #000;
}
.cont01_inner02 dl dt{
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1em;
    font-feature-settings: "palt";
    letter-spacing: 0.06em;
    padding: 0 0 10px;
}
.cont01_inner02 dl dd{
    font-size: 0.9375em;
    line-height: 1.6em;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    text-align: justify;
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.cont01_inner02{
    width: 80%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 50px 0;
    justify-content: center;
    margin: 0 auto;
}
.cont01_inner02_logo{
    width: 200px;
    padding: 0 0 40px;
}

.cont01_inner02 dl{
    width: 100%;
    border-left: none;
    padding: 0;
}
.cont01_inner02 dl dt {
    font-size: 1.375em;
    text-align: center;
    padding: 0 0 20px;
}
.cont01_inner02 dl dd{
    font-size: 0.875em;
    line-height: 1.75em;
    padding: 0 5%;
}
}


/*-----------
cont_the-next
------------*/
.cont_the-next{
    width: 100%;
    background: linear-gradient( 90deg, rgba(0, 64, 151, 1) 0%, rgba(0, 91, 171, 1) 30%, rgba(0, 152, 68, 1) 70%, rgba(0, 152, 68, 1) 100% );
    position: relative;
}
.the-next_inner{
    width: 76.92%;
    margin: 0 auto;
    padding: 130px 0 55px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row-reverse;
}

/* the-next_title */
.the-next_title{
    position: absolute;
    left: 50%;
    width: 665px;
    max-width: 100%;
    z-index: 2;
    pointer-events: none;
    transform: translate(-50%, calc(-75.8% + 24px));
    opacity: 0;
    transition: opacity .9s ease, transform .9s ease;
}
.the-next_title img {
    display: block;
    width: 100%;
    height: auto;
}
.the-next_title_bottom {
    position: absolute;
    top: 0;
    left: 0;
}

.the-next_title_bottom {
    clip-path: inset(75.8% 0 100% 0);
    transition: clip-path .7s cubic-bezier(.6,0,.2,1) .5s;
}
.the-next_title.is-visible {
    opacity: 1;
    transform: translate(-50%, -75.8%);
}
.the-next_title.is-visible .the-next_title_bottom {
    clip-path: inset(75.8% 0 0 0);
}

/* no-anime */
@media (prefers-reduced-motion: reduce) {
.the-next_title, .the-next_title_bottom { transition: none; }
}

.the_next_box{
    width: 54%;
    padding: 0 6% 0 6.9%;
    padding: 0 7.8% 0 8.8%;
}
.cont_the-next .cont_title{
    text-align: left;
    color: #fff;
    padding: 0 0 40px;
}
.message_t_inner{
    width: 100%;
}
.message_t01{
    width: 75.65%;
    padding: 0 0 20px;
}
.message_t02{
    width: 75.65%;
    width: 72.3%;
    padding: 10px 13px;
    background: #fff;
    margin: 0;
    display: block;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.message_t03{
    width: 100%;
    padding: 10px 13px;
    background: #fff;
    margin: 9px 0 0;
    display: block;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* svg text anime */
.msg_svg {
    display: block;
    width: 100%;
    height: auto;
}
.msg_svg path {
    fill: #0059a6;
}
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
.sync_write {
    --p: 0;
    clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
}
.sync_write .msg_svg {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) * 115% - 15%), transparent calc(var(--p) * 115%));
            mask-image: linear-gradient(90deg, #000 calc(var(--p) * 115% - 15%), transparent calc(var(--p) * 115%));
}
/* text anime 1 */
.startYmsg .message_t02.sync_write {
    animation: sync_p 1.2s ease .1s forwards;
}
/* text anime 2 */
.startYmsg .message_t03.sync_write {
    animation: sync_p 1.4s ease 1s forwards;
}
@keyframes sync_p {
    to { --p: 1; }
}
/* no-anime */
@media (prefers-reduced-motion: reduce) {
    .startYmsg .sync_write {
        animation-duration: .01s !important;
        animation-delay: 0s !important;
    }
}


.message_text{
    color: #fff;
    font-size: 0.9375em;
    line-height: 1.8em;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;
    text-align: justify;
    padding: 14px 0 5px;
}
/* svg animation message_text */
.message_text,
.yajirusi_btn_en_inner {
    opacity: 0;
    transform: translateY(12px);
}
.yajirusi_btn_en_inner{
    margin: 0 auto 0 0;
}
.startYmsg .message_text{
    animation: text_fade 1s cubic-bezier(.25,.6,.3,1) 1.8s forwards;
}
.startYmsg .yajirusi_btn_en_inner {
    animation: text_fade 1s cubic-bezier(.25,.6,.3,1) 2.2s forwards;
}
@keyframes text_fade {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .startYmsg .message_text,
    .startYmsg .yajirusi_btn_en_inner {
        animation-duration: .01s;
        animation-delay: 0s;
    }
}

.the-next_i01{
    width: 46%;
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.the-next_title {
    width: 70%;
}
.the-next_inner{
    width: 80%;
    flex-direction: row;
    padding: 130px 0 70px;
}
.the-next_i01{
    width: 100%;
}
.the_next_box{
    width: 100%;
    padding: 50px 0 0;
}
.message_t01 {
    max-width: 300px;
}
.message_t_inner{
    width: 90%;
}
.cont_the-next .yajirusi_btn_en {
    padding: 10px 0 0;
}
}
/*-----------------------------640px-----*/
@media screen and (max-width: 640px) {
.cont01_text {
    font-size: 0.875em;
    padding: 0 0 55px;
}
.cont01_title {
    width: 280px;
}
.cont01_inner01 {
    width: 84%;
    padding: 48% 0 60%;
}
.cont01_i01 {
    top: 2%;
    width: 40%;
    left: 3.5%;
}
.cont01_i02 {
    top: 6%;
    right: -6%;
    width: 60%;
}
.cont01_i03 {
    top: 34%;
    left: -21%;
    width: 43%;
}
.cont01_i04 {
    top: 40%;
    right: -18%;
    width: 38%;
}
.cont01_i05 {
    bottom: 8%;
    width: 36%;
}
.cont01_i06 {
    bottom: 3%;
    right: 6%;
    width: 44%;
}

.cont01_inner02{
    padding: 30px 0;
}
.cont01_inner02_logo {
    width: 120px;
    padding: 0 0 30px;
}
.cont01_inner02 dl dt{
    font-size: 1em;
    letter-spacing: 0.15em;
    padding: 0 0 12px;
}

.the-next_inner{
    width: 84%;
    padding: 70px 0 40px;
}
.the_next_box{
    padding: 30px 0 0;
}
.message_t_inner {
    width: 100%;
}
.message_text{
font-size: 0.875em;
}
}


/*-------------
cont_future
--------------*/
.cont_future{
    width: 100%;
    position: relative;
    overflow: hidden;
}
.cont_future_paraarea{
    width: 100%;
    position: relative;
}
/* background */
.cont_future .aurora-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #050608 url("../img/top/bg.jpg") left center / cover no-repeat;
    transform: scale(1.06);
    animation: hueShift 2s ease-in-out infinite alternate;
    will-change: filter;
  }
  @keyframes hueShift {
    0%   { filter: hue-rotate(-35deg); }
    100% { filter: hue-rotate(40deg); }
  }

  .future_bg_i{
    width: 66%;
    position: absolute;
    bottom: 10%;
    right: -3.6%;
    z-index: 1;
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0%, #000 30%),
      linear-gradient(to top,    transparent 0%, #000 30%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
            mask-image:
      linear-gradient(to right,  transparent 0%, #000 30%),
      linear-gradient(to top,    transparent 0%, #000 30%);
  }

.future_bg_a2{
    position: absolute;
    width: 84%;
    top: 41%;
    left: 0;
    z-index: 1;
}

.future_bg_a1_inner{
    position: absolute;
    width: 60%;
    top: -3%;
    right: 0;
    z-index: 1;
}
.future_bg_a1{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
   z-index: 1;
   display: block;
}
.future_bg_a1-02{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
 }

 .future_bg_a2_inner{
    position: absolute;
    width: 84%;
    top: 41%;
    left: 0;
    z-index: 1;
}
.future_bg_a2{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
   z-index: 1;
   display: block;
}
.future_bg_a2-02{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
 }

 .future_bg_a3_inner{
    position: absolute;
    width: 60%;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.future_bg_a3{
    width: 100%;
    display: block;
    position: relative;
    top: 0;
    left: 0;
   z-index: 1;
}
.future_bg_a3-02{
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
 }

.cont_future_inner{
    width: 100%;
    padding: 90px 0 165px;
    position: relative;
    z-index: 1;
}
.cont_future_inner02{
    width: 76.92%;
    margin: 0 auto;
}

/*--------
cont_title
---------*/
.cont_title{
    color: #fff;
    font-size: 1.875em;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
    line-height: 1em;
    text-align: center;
    margin: 0 auto;
}
.cont_title .cont_title_s{
    font-family: "EB Garamond", serif;
    font-size: 0.6em;
    font-feature-settings: "palt";
    letter-spacing: 0.075em;
    line-height: 2em;
}

.future_inner{
    width: 100%;
}
.future_inner01{
    width: 100%;
    display: flex;
    padding: 70px 0 0;
}
.future_inner01 dl{
    width: 50%;
    padding: 0 1.1% 0 5%;
}
.future_inner01 dl dt{
    width: 100%;
}
.future_inner01_text{
    width: 100%;
    padding: 30px 8.8% 0;
    color: #fff;
    font-size: 0.9375em;
    line-height: 1.8em;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;
    text-align: justify;
}
.future_text01{
    width: 4.3%;
    margin: 0 14.2% 0 10%;
    padding: 6% 0 0;
}
.future_i02{
    width: 21.8%;
    padding: 24% 0 0;
}
.future_i02_sp{
    display: none;
}
.future_inner02{
    width: 100%;
    display: flex;
    padding: 60px 0 130px;
}
.future_i03{
    width: 50%;
    padding: 30px 14.5% 0 0;
}
.future_text02{
    min-width: 450px;
    width: 450px;
    color: #fff;
    font-size: 0.9375em;
    line-height: 1.8em;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;
    text-align: justify;
}
/*-----------------------------1000px-----*/
@media screen and (max-width: 1000px) {
.future_text02{
    min-width: auto;
    width: 50%;
    text-align: justify;
}
.future_inner02_br01{
    display: none;
}
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
    .future_inner02_br01{
        display: block;
    }
}
/*-----------------------------640px-----*/
@media screen and (max-width: 640px) {
    .future_inner02_br01{
        display: none;
    }
}


.future_title02{
    width: 100%;
    position: relative;
    z-index: 3;
}
.future_title02 img{
    width: 539px;
    margin: 0 auto;
}
.future_inner03{
    display: flex;
    padding: 106px 0 0;
}
.future_title03{
    width: 10.4%;
}
.future_inner03 dl{
    width: 37.4%;
    padding: 65px 0 0;
    margin: 0 0 0 10.8%;
}
.future_inner03 dl dt{
    width: 100%;
    padding: 0 0 65px;
}
.future_inner03 dl dd{
    width: 78%;
}
.future_inner04{
    display: flex;
    align-items: flex-end;
    padding: 70px 0 94px;
}
.future_inner04_text{
    width: 50%;
    color: #fff;
    font-size: 0.9375em;
    line-height: 1.8em;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;
    text-align: justify;
    padding: 0 0.9% 150px 12.6%;
}
.future_i05{
    width: 29.1%;
    margin: 2% 0 0 5.2%;
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.cont_future .aurora-bg {
    background: #050608 url("../img/top/bg.jpg") 25% center / cover no-repeat;
}
.cont_future_inner {
    padding: 90px 0 70px;
}
.cont_future_inner02{
    width: 80%;
}
.future_inner01 {
    padding: 70px 0 0;
    flex-wrap: wrap;
}
.future_inner01 dl {
    width: 60%;
    padding: 0;
}
.future_inner01_text{
    padding: 60px 0 0;
}
.future_text01 {
    width: 8%;
    margin: 50% 0 0 12%;
    padding: 0;
}
.future_i02{
    display: none;
}
.future_i02_sp{
    display: block;
    width: 70%;
    padding: 50px 0 0;
}

.future_inner02 {
    padding: 100px 0 80px;
    flex-wrap: wrap;
}
.future_i03 {
    width: 70%;
    padding: 0;
    margin: 0 0 0 auto;
}
.future_text02 {
    width: 100%;
    padding: 50px 0 0;
}
.future_title02 {
    width: 100%;
}
.future_inner03 {
    padding: 80px 0 0;
    position: relative;
    flex-wrap: wrap;
}
.future_title03 {
    width: 18%;
    margin: 10% auto 0 7%;
    position: relative;
    z-index: 2;
}
.future_bg_i{
    position: absolute;
    width: 95%;
    top: 2%;
    right: -9%;
}
.future_inner03 dl {
    width: 100%;
    padding: 100px 0 0;
    margin: 0;
    position: relative;
    z-index: 2;
}
.future_inner03 dl dd {
    width: 100%;
    margin: 0 auto;
}
.future_inner03_text{
    width: 100%;
    color: #fff;
    font-size: 0.9375em;
    line-height: 1.8em;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;
    text-align: justify;
    padding: 0 0 80px;
}
.future_inner03 dl dd.future_i04{
    width: 67%;
    margin: 0 auto;
}

.future_inner04{
    flex-wrap: wrap;
    padding: 50px 0 50px;
}
.future_inner04_text {
    width: 100%;
    padding: 50px 0 0;
}
.future_i05{
    width: 50%;
    margin: 0 0 0 auto;
}
.future_bg_a1_inner {
    top: 0%;
} 
.future_bg_a2_inner {
    width: 150%;
    top: 43%;
}
.future_bg_a3_inner {
    width: 90%;
    bottom: 14%;
}
}
/*-----------------------------640px-----*/
@media screen and (max-width: 640px) {
.cont_future_inner {
    padding: 50px 0 70px;
}
.cont_title {
    color: #fff;
    font-size: 1.375em;
}
.future_bg_a1_inner {
    width: 56%;
    top: 2%;
} 
.future_inner01 {
    padding: 50px 0 0;
}
.future_inner01 dl {
    width: 69.23%;
}
.future_inner01_text {
    padding: 30px 0 0;
    font-size: 0.875em;
}
.future_i02_sp{
    padding: 24px 0 0;
}

.future_text01 {
    margin: 56% 0 0 12%;
}
.future_inner02 {
    padding: 50px 0 40px;
}
.future_text02 {
    padding: 30px 0 0;
    font-size: 0.875em;
}
.future_bg_i {
    right: -9%;
    width: 95%;
    top: 2%;
}
.future_inner03 {
    padding: 60px 0 0;
}
.future_title03 {
    margin: 0 auto 0 7%;
}
.future_inner03 dl {
    padding: 90px 0 0;
}
.future_inner03 dl dt {
    width: 100%;
    padding: 0 0 26px;
}
.future_inner03_text{
    font-size: 0.875em; 
}
.future_inner04 {
    padding: 55% 0 35px;
}
.future_bg_a3_inner {
    width: 100%;
    bottom: 16.1%;
}
.future_inner04_text {
    padding: 35px 0 0;
    font-size: 0.875em;
}
}

/*------------
cont_greeting
--------------*/
.cont_greeting{
    width: 100%;
    padding: 90px 0 163px;
    position: relative;
}
.cont_greeting_inner{
    width: 100%;
    position: relative;
    z-index: 2;
}

/* big circle bg blur */
.blob_greeting01{ 
    top:10%;
    left: clamp(-180px, -16%, -240px);
    width: clamp(250px, 25vw, 390px); 
    background: #25dafc;
    --sp:0.1;
    --dur:8s;
    --dx:120px;
    --dy:-80px;
}
.blob_greeting02{ 
    top:0%;
    left: clamp(100px, 25%, 400px);
    width: clamp(120px, 15vw, 200px); 
    background: #fafd04;
    --sp:0.1;
    --dur:6s;
    --dx:120px;
    --dy:-50px;
}
.blob_greeting03{ 
    bottom:-5%;
    left: clamp(-50px, -5%, -100px);
    width: clamp(120px, 15vw, 200px); 
    background: #fafd04;
    --sp:0.1;
    --dur:5s;
    --dx:150px;
    --dy:-50px;
}
.blob_greeting04{ 
    top:0%;
    right: clamp(100px, 35%, 400px);
    width: clamp(120px, 15vw, 200px); 
    background: #25dafc; 
    --sp:0.1;
    --dur:6s;
    --dx:180px;
    --dy:-50px;
}
.blob_greeting05{ 
    top:30%;
    right: clamp(-100px, -16%, -200px);
    width: clamp(250px, 25vw, 390px); 
    background: #2ecd0e;
    --sp:0.1;
    --dur:4s;
    --dx:50px;
    --dy:-150px;
}
.blob_greeting06{
    display: none;
}
.cont_greeting .cont_title{
    color: #000;
    transition: color .5s ease;
}
.greeting_inner{
    width: 69.23%;
    margin: 0 auto;
    padding: 55px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.3%;
}
.greeting_inner li{
    width: 32.4%;
}
.greeting_i a{
    width: 100%;
    overflow: hidden;
    backface-visibility: visible;
    display: block;
    transition: color .5s ease;
}

.greeting_i a img{
    width: 100%;
    display: block;
    transition: transform 1s ease;
}
.greeting_i a:hover img{
    transform: scale(1.05);
}

.greeting_text{
    line-height: 1em;
    font-feature-settings: "palt";
    letter-spacing: 0.02em;
}
.greeting_text_inner{
    width: 100%;
    display: flex;
    align-items: center;
}
.greeting_text01{
    font-size: 0.9375em;
    line-height: 1.4em;
    padding: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
}
.greeting_text02{
    font-size: 1em;
}
.cont_greeting .link_more{
    margin: 0;
    --mor-accent: #0059a6;
	--mor-arw: #000;
	--mor-arw-hover: #fff;
    display: flex;
	align-items: center;
	justify-content: space-between;
}
.cont_greeting .link_more a{
    color: #000;
    display: flex;
	align-items: center;
	justify-content: space-between;
    position: relative;
}
.cont_greeting .link_more a:hover{
    color: #0059a6;
    transition: color .3s ease;
}
.cont_greeting .link_more a span{
    position: relative;
	z-index: 2;
}
.cont_greeting .link_more span .arw{
	width: 5px;
	height: auto;
	display: block;
	position: relative;
	z-index: 2;
	overflow: visible;
	color: var(--mor-arw);
	transition: color .3s ease;
    margin: 0 0 0 8px;
    padding: 3px 0 0;
}
.cont_greeting .link_more a span .arw polyline{
	fill: none;
	stroke: currentColor;
	stroke-width: .65;
	stroke-miterlimit: 10;
}

/* 矢印 animation */
.cont_greeting .link_more a span::before{
	content: "";
	position: absolute;
	left: calc( 50% + 4px );
    top: calc( 50% + 2px );
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mor-accent);
	transform: translate(-50%, -50%) scale(0);
	transition: transform .3s ease .08s;
	z-index: 1;
}
.cont_greeting .link_more a:hover span::before{
	transform: translate(-50%, -50%) scale(1);
}
.cont_greeting .link_more a:hover span .arw{
	color: var(--mor-arw-hover);
}

.cont_greeting .link_more a .frame ellipse{
	fill: none;
	stroke: var(--mor-accent); 
}

.cont_greeting .cont_btn_blue{
    padding: 100px 0 0;
}
.cont_greeting .cont_btn_blue a{
    color: #fff;
    background: #0059a6;
}
/*-----------------------------920px-----*/
@media screen and (max-width: 920px) {
.greeting_text01{
    font-size: 0.875em;
}
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.cont_greeting {
    padding: 90px 0 70px;
}
.blob_greeting02{ 
    top:50%;
    left: clamp(-50px, -25%, -100px);
    width: clamp(180px, 20vw, 250px); 
    background: #fafd04;
    --sp:0.1;
    --dur:7s;
    --dx:120px;
    --dy:-50px;
}
.blob_greeting03{ 
    bottom:7%;
    right: clamp(50px, 5%, 100px);
    width: clamp(120px, 15vw, 200px); 
    background: #2ecd0e;
    --sp:0.1;
    --dur:6s;
    --dx:150px;
    --dy:-50px;
}
.blob_greeting04{ 
    top:0%;
    right: clamp(50px, 15%, 100px);
    width: clamp(120px, 15vw, 200px); 
}
.blob_greeting06{
    display: block;
    bottom:0%;
    right: clamp( 50px, 15%, 100px);
    width: clamp(120px, 15vw, 200px); 
    background: #fafd04;
    --sp:0.1;
    --dur:6s;
    --dx:50px;
    --dy:-150px;
}
.greeting_inner {
    width: 80%;
    padding: 55px 10% 0;
    flex-wrap: wrap;
}
.greeting_inner li{
    width: 100%;
    padding: 0 0 50px;
}
.greeting_inner li:last-child{
    padding: 0;
}
.cont_greeting .cont_btn_blue {
    padding: 70px 0 0;
}
.greeting_text01{
    font-size: 0.9375em;
}
}
/*-----------------------------640px-----*/
@media screen and (max-width: 640px) {
.cont_greeting {
    padding: 50px 0 70px;
}
.blob_greeting01{ 
    top:20%;
    left: clamp(-50px, -15%, -140px);
    width: clamp(120px, 15vw, 200px); 
    background: #25dafc; 
    --sp:0.1;
    --dur:11s;
    --dx:50px;
    --dy:-150px;
}
.blob_greeting05{ 
    top:40%;
    right: clamp(-50px, -15%, -140px);
    width: clamp(120px, 15vw, 200px); 
    background: #2ecd0e;
    --sp:0.1;
    --dur:11s;
    --dx:50px;
    --dy:-150px;
}
.greeting_inner {
    padding: 40px 10% 0;
}
.greeting_inner li {
    padding: 0 0 30px;
}
.greeting_text_inner{
    padding: 5px 8px 0 0;
}
.greeting_text01 {
    font-size: 0.875em;
}
.greeting_text02 {
    font-size: 0.875em;
}
.link_more {
    width: 55px;
}
.link_more a img {
    width: 6px;
}
.link_more a {
    font-size: 1em;
}
.greeting_text_inner{
    padding: 5px 0 0;
}
.cont_greeting .cont_btn_blue{
    width: 80%;
    margin: 0 auto;  
    padding: 50px 0 0;
}
}


/*----------
cont_history
------------*/
.cont_history{
    width: 100%;
    position: relative;
}
.history_bg {
    width: 100%;
    position: relative;
}
.history_bg::after{
    content: "";
    width: 100%;
    height: 12px;
    background: linear-gradient( 90deg, rgba(0, 152, 68, 1) 0%, rgba(0, 152, 68, 1) 30%, rgba(0, 91, 171, 1) 70%, rgba(0, 64, 151, 1) 100% );
    filter: saturate(100%) brightness(170%) contrast(100%);
    display: block;
}
.history_inner{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history_box{
    width: 62.3%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
}
.history_box_inner{
    width: 100%;
    position: relative;
    height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.history_img_inner{
width: 100%;
} 

.history_t{
    width: 100%;
    padding: 0 0 34px;
    margin: auto 0 0;
    z-index: 2;
}
.history_t img {
    display: block;
    width: 100%;
    height: auto;
}

.history_btn_box {
    width: 510px;
    display: flex;
    justify-content: center;
    margin: 0 auto auto;
}
.history_btn_box.history_btn_box_sp{
    display: none;
}

/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.cont_history{
    background: linear-gradient( 90deg, rgba(0, 152, 68, 1) 0%, rgba(0, 152, 68, 1) 30%, rgba(0, 91, 171, 1) 70%, rgba(0, 64, 151, 1) 100% );
}
.history_bg::after{
    height: 6px;
    filter: saturate(100%) brightness(125%) contrast(100%);
}
.history_inner{
    height: auto;
}
.history_t{
    padding: 10% 0 0;
    margin: 0 auto;
}

.history_btn_box.history_btn_box_pc{
    display: none;
}
.history_btn_box.history_btn_box_sp{
    display: flex;
    background: linear-gradient( 90deg, rgba(0, 152, 68, 1) 0%, rgba(0, 152, 68, 1) 30%, rgba(0, 91, 171, 1) 70%, rgba(0, 64, 151, 1) 100% );
    padding: 50px 0;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}
}


/*-----------
cont_topics
-------------*/
.cont_topics{
    width: 100%;
    padding: 144px 0 68px;
    position: relative;
}
/* big circle bg blur */
.blob_topics01{ 
    top:0%;
    left: clamp(50px, 25%, 150px);
    width: clamp(100px, 15vw, 150px); 
    background: #fafd04;
    --sp:0.1;
    --dur:6s;
    --dx:180px;
    --dy:-50px;
}
.blob_topics02{ 
    top:-10%;
    right: clamp(-10px, -6%, -50px);
    width: clamp(200px, 25vw, 300px); 
    background: #25dafc; 
    --sp:0.1;
    --dur:7s;
    --dx:100px;
    --dy:-50px;
}

.cont_topics .cont_title{
    color: #000;
}
.topics_inner{
    width: 69.23%;
    margin: 0 auto;
    padding: 55px 0 75px;
    display: flex;
    justify-content: space-between;
    gap: 1.5%;
}
.topics_inner li{
    width: calc( ( 100% - 4.5% ) / 4 );
}
.topics_inner li a{
    width: 100%;
}
.topics_inner li.coming-soon a{
    pointer-events: none;
}
.topics_inner li a .topics_i{
    width: 100%;
    overflow: hidden;
    backface-visibility: visible;
}
.topics_inner li a .topics_i img{
    width: 100%;
    display: block;
    transition: transform 1s ease;
}
.topics_inner li a:hover .topics_i img{
    transform: scale(1.05);
}
.topics_inner li a .topics_day{
    color: #000;
    font-size: 0.8125em;
    line-height: 1em;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;
    padding: 12px 6% 0;
}
.topics_inner li a .topics_text{
    color: #000;
    font-size: 0.9375em;
    line-height: 1.8em;
    font-feature-settings: "palt";
    letter-spacing: 0.03em;
    padding: 5px 6% 0;
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.cont_topics {
    padding: 90px 0 50px;
}
.topics_inner{
    width: 80%;
    flex-wrap: wrap; 
    gap: 3%;
}
.topics_inner li {
    width: calc( ( 100% - 3% ) / 2 );
    padding: 0 0 50px;
}
}
/*-----------------------------640px-----*/
@media screen and (max-width: 640px) {
.cont_topics{
    padding: 50px 0 30px;
}
.blob_topics01{ 
    top:10%;
    left: clamp(-50px, -5%, -80px);
    width: clamp(100px, 15vw, 150px); 
}
.blob_topics02{ 
    top:0%;
    right: clamp(-10px, -6%, -30px);
    width: clamp(120px, 20vw, 180px); 
    --dx: -100px;
    --dy: -50px;
}
.topics_inner{
    padding: 40px 0 40px;
}
.topics_inner li{
    padding: 0 0 30px;
}
.topics_inner li a .topics_day{
    font-size: 0.75em;
}
.topics_inner li a .topics_text{
    font-size: 0.875em;
    padding: 5px 3% 0;
    line-height: 1.1em;
}
}


/*----------
bokin_inner
------------*/
.bokin_inner{
    width: 69.23%;
    margin: 0 auto;
    position: relative;
}
.bokin_bg{
    width: 100%;
    position: relative;
}
.bokin_box{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.bokin_box_inner{
    width: 80.66%;
    height: 100%;
    margin: 0 0 0 2.2%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.bokin_title{
    color: #fff;
    font-size: 1.875em;
    line-height: 1em;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}
.bokin_text{
    width: 100%;
    color: #fff;
    font-size: 0.9375em;
    line-height: 1.8em;
    font-feature-settings: "palt";
    letter-spacing: 0.16em;
    text-align: right;
    padding: 16px 0 0;
}

@media screen and (max-width: 1000px) {
.bokin_box_inner{
    width: 90%;
    margin: 0;
}
}
/*-----------------------------840px-----*/
@media screen and (max-width: 840px) {
.bokin_inner {
    width: 80%;
}
.bokin_box_inner{
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
}
.bokin_title{
    width: 100%;
    text-align: center;
    padding: 0 0 20px;
}
.bokin_text{
    font-size: 1.25em;
    text-align: center;
    padding: 0 0 5px;
}
}
/*-----------------------------640px-----*/
@media screen and (max-width: 640px) {
.bokin_title {
    font-size: 1.25em;
    padding: 6px 0 10px;
}
.bokin_text {
    font-size: 0.75em;
    padding: 0;
    line-height: 1.5em;
    letter-spacing: 0.05em;
}
}