@charset "UTF-8";



/* radial-gradient */
    @property --c-0 {
        syntax: '<color>';
        inherits: false;
        initial-value: hsla(241, 100%, 88%, 0.2);
    }

    @property --s-start-0 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 4.038772213247173%;
    }

    @property --s-end-0 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 37.2265767974114%;
    }

    @property --x-0 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 91%;
    }

    @property --y-0 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 11%;
    }

    @property --c-1 {
        syntax: '<color>';
        inherits: false;
        initial-value: hsla(191, 100%, 88%, 0.2);
    }

    @property --s-start-1 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 9%;
    }

    @property --s-end-1 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 51%;
    }

    @property --y-1 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 97%;
    }

    @property --x-1 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 97%;
    }

    @property --x-2 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 36%;
    }

    @property --s-start-2 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 12.107536057085522%;
    }

    @property --s-end-2 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 63.33640956108327%;
    }

    @property --c-2 {
        syntax: '<color>';
        inherits: false;
        initial-value: hsla(136, 100%, 88%, 0.2);
    }

    @property --y-2 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 87%;
    }

    @property --x-3 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 36%;
    }

    @property --s-start-3 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 12.107536057085522%;
    }

    @property --s-end-3 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 63.33640956108327%;
    }

    @property --c-3 {
        syntax: '<color>';
        inherits: false;
        initial-value: hsla(352, 83%, 79%, 0.2);
    }

    @property --y-3 {
        syntax: '<percentage>';
        inherits: false;
        initial-value: 87%;
    }



/* 横揺れ用のカスタムプロパティ */
    @property --sway-x {
      syntax: '<length>';
      inherits: false;
      initial-value: 0px;
    }

.home .l-contents__inner{
    margin-top: 0px!important;
}

.home .l-container{
    --s-start-0: 4%;
  --s-end-0: 37%;
  --s-start-1: 9%;
  --s-end-1: 51%;
  --s-start-2: 12%;
  --s-end-2: 63%;
  --s-start-3: 12%;
  --s-end-3: 63%;
    background-color: hsla(0, 0%, 100%, 1);
    background-image:
    radial-gradient(circle at var(--x-0, 91%) var(--y-0, 11%),
      var(--c-0, hsla(241,100%,88%,.2)) var(--s-start-0, 4%),
      transparent var(--s-end-0, 37%)),
    radial-gradient(circle at var(--x-1, 97%) var(--y-1, 97%),
      var(--c-1, hsla(191,100%,88%,.2)) var(--s-start-1, 9%),
      transparent var(--s-end-1, 51%)),
    radial-gradient(circle at var(--x-2, 36%) var(--y-2, 87%),
      var(--c-2, hsla(136,100%,88%,.2)) var(--s-start-2, 12%),
      transparent var(--s-end-2, 63%)),
    radial-gradient(circle at var(--x-3, 36%) var(--y-3, 87%),
      var(--c-3, hsla(352,83%,79%,.2)) var(--s-start-3, 12%),
      transparent var(--s-end-3, 63%));
    /* animation: ani-your_css_selector_here 10s linear infinite alternate; */
    /* background-blend-mode: normal, normal, normal, normal; */
    /* will-change: transform, opacity; */
    /* contain: paint; */
    }

    /* 初期：ロゴと文章を隠す（泡は動いてOK） */

    /* firstview */

    .fv {
    height: calc(var(--vh, 1vh) * 100); 
    position: relative;
    /* overflow: hidden; */
    }

    .fv .fv_slider_img_pc{
        margin-bottom: 80px; 
        
    }
    .fv .fv_slider_img_pc,
    .fv .fv_sub{
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .8s ease, transform .8s ease;
    }

    /* 泡が準備できたらロゴ表示 */
    .fv.is-show-logo .fv_slider_img_pc{
    opacity: 1;
    transform: translateY(0);
    }

    /* ロゴ終わったら文章表示 */
    .fv.is-show-sub .fv_sub{
    opacity: 1;
    transform: translateY(0);
    }

    /* SVG全体*/
    .fv.is-show-logo.home{
        animation-play-state: paused;
    }

    #layer .logo-char{
  opacity: 0;
  transform: scale(.995);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .9s cubic-bezier(.22,.9,.25,1),
              transform .9s cubic-bezier(.22,.9,.25,1);
  will-change: opacity, transform;
}
.fv.is-show-logo #layer .logo-char{
  opacity: 1;
  transform: scale(1);
}

    /* 20個：delayは transition-delay */
    .fv.is-show-logo #layer .logo-char:nth-of-type(1)  { transition-delay: 0ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(2)  { transition-delay: 60ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(3)  { transition-delay: 120ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(4)  { transition-delay: 180ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(5)  { transition-delay: 240ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(6)  { transition-delay: 300ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(7)  { transition-delay: 360ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(8)  { transition-delay: 420ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(9)  { transition-delay: 480ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(10) { transition-delay: 540ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(11) { transition-delay: 600ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(12) { transition-delay: 660ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(13) { transition-delay: 720ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(14) { transition-delay: 780ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(15) { transition-delay: 840ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(16) { transition-delay: 900ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(17) { transition-delay: 960ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(18) { transition-delay: 1020ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(19) { transition-delay: 1080ms; }
    .fv.is-show-logo #layer .logo-char:nth-of-type(20) { transition-delay: 1140ms; }


  

    .fv-content{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100vw;
        z-index: 2;

    }
    .fv_contents{
        font-size: 20px;
    }

    /* バブルここから */

    .bubble{
      position: absolute;
      /* background-image: url("../img/shabon02.png");  */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0;
      will-change: transform, opacity;

      /* 2つのアニメーションを併用 */
      animation-name: floatUp, sway;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      animation-fill-mode: both, both;
    }

    .bubble.type1 {
     background-image: url("../img/shabon02.png");
     z-index: 5;
    }

    /* 2種類目 */
    .bubble.type2 {
    background-image: url("../img/shabon.png");
    z-index: 5;
    }

    /* 上昇（ふわふわ） */
    @keyframes floatUp {
      0% {
        transform:
          translate3d(
            calc(var(--x-start) + var(--sway-x)),
            110vh,
            0
          )
          scale(var(--scale))
          rotate(0deg);
        opacity: 0;
      }
      10% {
        opacity: var(--opacity);
      }
      50% {
        opacity: var(--opacity);
      }
      100% {
        transform:
          translate3d(
            calc(var(--x-start) + var(--x-drift) + var(--sway-x)),
            -10vh,
            0
          )
          scale(var(--scale))
          rotate(360deg);
        opacity: 0;
      }
    }

    /* ゆらゆら横揺れ（ふわふわ感） */
    @keyframes sway {
      0%   { --sway-x: -15px; }
      50%  { --sway-x:  15px; }
      100% { --sway-x: -15px; }
    }

    /* 軽量泡のコンテナ（これが無いとabsoluteが基準を失う） */
    .bubble-deco{
    position: relative;     /* 重要 */
    overflow: hidden;
    }

    /* 軽量泡（.bubbleの既存設定を上書きして安全運用） */
    .bubble-deco .bubble{
    position: absolute;     /* 重要 */
    left: var(--x-start);   /* 重要：散らばる */
    bottom: -80px;

    opacity: var(--opacity);
    transform: translateX(0) scale(1); /* 既存のscale変数がなくても破綻しない */

    /* 既存の2本アニメ設定を殺して、1本に固定 */
    animation-name: bubbleFloatLite;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    will-change: transform;
    }

    /* 1本アニメで、縦移動＋横ドリフトをまとめてやる（軽い） */
    @keyframes bubbleFloatLite{
    from{
        transform: translateX(0) translateY(0) scale(1);
    }
    to{
        transform: translateX(var(--x-drift)) translateY(calc(-1 * var(--vh, 1vh) * 120)) scale(1);
    }
    }


      /* バブルここまで */
   
    .fv::before{
        content: "";
        position: absolute;
        background: url(../img/fv_wrapp.png) no-repeat;
        background-size: cover;
        width: 100vw;
        height: 100vh;
        top: 0px;
        left: 0%;
        z-index: 1;

    }
 
    .fv_slider_img_pc {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    }
    .fv_link {
    margin-top: 41px;
    }

    .fv_link a, .kabin_btm a, .en_sect .smb-section__lede.smb-section-side-heading__lede a{
        position: relative;
        border-radius: 100px;
        background: #ffffffb0;
        z-index: 0;
        padding: 14px 50px;
        text-decoration: none;
        color: #2c3763;
        display: inline-block;
        margin-top: 30px;
        font-family: "Zen Kaku Gothic New", sans-serif!important;
        font-size: 16px;
        transition: filter 0.3s ease;

    }
    .fv_link a::before, .kabin_btm a::before, .en_sect .smb-section__lede.smb-section-side-heading__lede a::before{
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px; /* 枠の太さ */
        border-radius: 100px;

        background: linear-gradient(
            90deg,
            rgba(77, 96, 172, 1) 0%,
            rgba(47, 59, 106, 1) 64%,
            rgba(44, 55, 99, 1) 100%
        );
        mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    
    }
    span.btm_deco{
        position: relative;
        margin-left: -30px;
    }
    span.btm_deco::after{
        content: "";
        background: url(../img/btn.png) no-repeat;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -39px;
        z-index: 10000;
        background-size: cover;
    }
    .smb-section__subtitle{
        color: #333;
        font-weight: 400;
    }
    .smb-section__subtitle{
        font-family: "Zen Kaku Gothic New", sans-serif!important;
        font-weight: 500;
    }
    .en_sect .smb-section__subtitle, .inst_sect .smb-section__subtitle{
        font-family: "Poppins", sans-serif!important;
        font-weight: 500;
        font-style: normal;
    }

    /* お知らせ辺り */
    .wp-block-snow-monkey-blocks-section-side-heading.alignfull.smb-section.smb-section-side-heading.smb-section--fit.en_sect.bubble-deco.is-style-smb-section-undecorated-title.side_btm {
        position: relative;
        overflow: hidden;
        padding-top: 103px;
    }
    .en_sect .c-container{
        margin-left: 0px!important;
        margin-right: 0px!important;
        max-width: initial;
    }
    .en_sect .c-row{
        margin-left: calc(50% - var(--_container-max-width) / 2);
        width: 100%;
    }
  
    span.c-entry-summary__term.c-entry-summary__term--category-1.c-entry-summary__term--category-slug-uncategorized{
        display: none;
    }
    .top-new-sect .c-entries-carousel .spider__slide .c-entries-carousel__item a{
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-radius: 15px;
        border: .2px solid #2e37633d;
        padding: 28px;
    }
    .spider__arrow[data-direction=prev]:before{
        content: "";
        background: url(../img/btn-left.png) no-repeat;
        background-size: cover;
        width: 60px;
        height: 60px;
        border: 0px;
        transform:inherit;
        left: 0px;
        top: 0px;
    }
    .spider>.spider__arrow{
        top: -100px;

    }
    .top-new-sect .c-entries-carousel {
    max-width: 1080px;
}
    .spider__arrow[data-direction=next]:before{
        content: "";
        background: url(../img/btn-right.png) no-repeat;
        background-size: cover;
        width: 60px;
        height: 60px;
        border: 0px;
        transform:inherit;
        right: 0px;
        bottom: 0px;
    }
    .spider__arrow[data-direction=prev]{
        left: 0px;
    }
    .spider__arrow[data-direction=next]{
        left: 65px;
        right: initial;
        top: -100px;
    }
    .spider__arrow{
        width: 60px;
        height: 60px;
    }
     .smb-section__header>*+*{
        margin-top: 0px;
     }
     .top-kabinnu .c-entries-carousel__item a{
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-radius: 15px;
        border: .2px solid #2e37633d;
        padding: 28px;
     }
     .top-new-sect .c-entry-summary__meta{
        justify-content: flex-start;
     }
     .top-kabinnu .spider__dots:not([data-thumbnails=true]) .spider__dot[aria-current=true]{
        background: url(../img/btn-doots.png) no-repeat;
        width: 30px;
        height: 30px;
        background-size: cover;
     }
      .top-kabinnu .spider__dots:not([data-thumbnails=true]) .spider__dot{
        background: url(../img/btn-doot.png) no-repeat;
         width: 30px;
        height: 30px;
        background-size: cover;

     }
     .kabinnu::before{
        content: "";
        background: url(../img/character-kabinne01.png) no-repeat;
        width: 150px;
        height: 150px;
        background-size: cover;
        position: absolute;
        right: 20%;
        top: -10px;
        animation: floatY 3s ease-in-out infinite;
        z-index: 10;
     
     }
     .top-kabinnu::before{
        content: "";
        background: url(../img/character-kabinne03.png) no-repeat;
        width: 100px;
        height: 100px;
        background-size: cover;
        position: absolute;
        left: 60%;
        top: -50px;
        transform: translateX(-50%);
        animation: floatY 3s ease-in-out infinite;
        z-index: 10;
     }
     @keyframes floatY {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-30px); }
        100% { transform: translateY(0); }
        }
     @media (max-width: 1279px){
        .en_sect .c-row{
            margin-left: inherit;
        }
        
     }
     div#sbi_load {
        margin-top: 20px;
    }
     span.sbi_follow_btn.sbi_custom a{
        font-size: 16px!important;
     }
    @media (min-width: 1024px){
        h2.smb-section__title{
            font-size: 40px;
            font-weight: 400;
        }
        .spider__arrow[data-direction=prev] {
                left: 58vw;
            }
        .spider__arrow[data-direction=next]{
            left: 63vw;
        }
         .en_sect .c-row__col.c-row__col--1-1.c-row__col--md-3-4{
        padding-left: 0px;

        }
    }
    @media (max-width: 1023px){
        .fv-content{
            width: 90vw;
        }
        .fv_slider_img_pc{
            width: 100%;
        }
        .fv_contents {
            text-align: left;
        }
        .kabinnu::before{
            right: 0%;
            width: 100px;
            height: 100px;
        }
        .top-kabinnu::before{
            left: 0px;
        }
        /* .fv-content{
            top: 59%;
        } */
    }
     @media (max-width: 842px){
        .en_sect .c-row__col--md-3-4{
            --_item-width: 100%;
        }
     }
     @media (min-width: 1500px){
        .spider__arrow[data-direction=prev] {
                    left: 51vw;
                }
        .spider__arrow[data-direction=next]{
            left: 55vw;
        }
        }
    @media (max-width: 842px){
        .en_sect .c-row__col.c-row__col--1-1.c-row__col--md-1-4 {
            --_item-width: 100%;
        }
        .spider__arrow[data-direction=next]{
            left: 48%;
        }
        .spider__arrow[data-direction=prev] {
            left: 39%;
        }
    }
    @media (min-width: 640px){
        /* .top-new-sect .c-entries-carousel{
            min-width: 1297px;
        } */
        .en_sect .c-container{
        --_container-margin-right: 0px!important;
        }
    }

      @media (max-width: 639px){
        .spider__arrow[data-direction=next]{
            left: initial;
            right: 0px;
        }
        .spider__arrow[data-direction=prev] {
            left: initial;
            right: 50px;
        }
        .fv_contents {
            font-size: 16px;
        }
        .fv .fv_slider_img_pc {
            margin-bottom: 56px;
        }
        /* .fv{
            height: 90vh;
        } */
        .fv-content{
            top: 60%;
        }
        .wp-block-snow-monkey-blocks-section-side-heading.alignfull.smb-section.smb-section-side-heading.smb-section--fit.en_sect.bubble-deco.is-style-smb-section-undecorated-title.side_btm{
            padding-top: 8px;
        }
        .fv_link a, .kabin_btm a{
            margin-top: 0px;
        }
        .top-kabinnu::before{
            top: -32px;
        }

      }
       @media (max-width: 500px){
        .fv_contents, .fv_link a, .kabin_btm a, .en_sect .smb-section__lede.smb-section-side-heading__lede a {
            font-size: 15px;
        }
        .kabinnu::before{
            width: 60px;
            height: 60px;
        }
        .top-kabinnu::before{
            width: 60px;
            height: 60px;
        }
       }
       @media not all and (min-width: 1024px) {
    [data-scrolled=true] .l-header--sticky-overlay-colored-sm {
       background: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}
  @media (max-width: 374px){
    .fv_link{
        margin-top: 10px;
    }
    .kabinnu::before{
        top: 10px;
    }
  }
  @media (max-width: 320px){
    .spider__arrow[data-direction=next]:before{
      width: 40px;
      height: 40px;
      bottom: 11px;
    }
    .spider__arrow[data-direction=prev]:before {
      width: 40px;
      height: 40px;
      left: 27px;
      top: 9px;
    }
    .fv .fv_slider_img_pc {
        margin-bottom: 20px;
    }
}
button.spider__arrow, .top-kabinnu .c-entries-carousel__item a img, .top-new-sect .c-entries-carousel .spider__slide .c-entries-carousel__item a img{
      transition: filter 0.3s ease;

}
@media (any-hover: hover) {
    .fv_link a:hover, .hed_contact a:hover, .kabin_btm a:hover, .en_sect .smb-section__lede.smb-section-side-heading__lede a:hover{
        filter: brightness(90%) hue-rotate(200deg);
    }
    button.spider__arrow:hover{
        filter: brightness(90%);
    }
    .top-kabinnu .c-entries-carousel__item a:hover img {
    filter: brightness(80%);
    }
    .top-new-sect .c-entries-carousel .spider__slide .c-entries-carousel__item a:hover img{
    filter: brightness(80%);  
    }
}
@media (min-width: 640px) {
    .top-new-sect .c-entries-carousel .spider__slide {
        max-width: 380px;
    }
     .top-new-sect .c-entries-carousel .spider__slide:last-child{
        margin-right: 50px!important;
     }
}
@media (min-width: 1080px){
     .top-new-sect .c-entries-carousel .spider__slide {
        max-width: 420px;
    }
}