@charset "UTF-8";
.home .l-container{
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
}

.home .l-container.is-ready{
  opacity: 1;
  visibility: visible;
}

#opening{
  display: none;
}
/* オープニング */
div#opening{
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
}

/* 背景用のバブルコンテナ */
.bubble-opbg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* シャボン玉 */
.bubble-opbg .bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;

  background-image: url("assets/img/shabon03.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  opacity: 0;
  will-change: transform, opacity;

  animation-name: floatUp, sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: both, both;
}

 div#opening{
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
}

/* 背景用のバブルコンテナ */
.bubble-opbg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* シャボン玉 */
.bubble-opbg .bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;

  background-image: url("assets/img/shabon03.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  opacity: 0;
  will-change: transform, opacity;

  animation-name: floatUp, sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: both, both;
}

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

  /* ===== 移動する本体 ===== */
  .chara{
    position: absolute;
    top: 50%;
    left: 96%;
    width: 158px;
    /* transform: translateY(-50%); */
    pointer-events: none;
    transform: translate(-65vw, -50%) translateY(0);
    opacity: 1;
    /* ① 飛行（ここで到着位置で止まる） */
    /* animation: fly 2.0s ease-out forwards; */
    will-change: transform, opacity;
  }

  /* ベース画像（chara01） */
  .chara .base{
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
    animation: baseFade 0.2s ease-out forwards;
    /* animation-delay: 2.2s; */
    animation-delay: 0.3s;
  }
  @keyframes baseFade{
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  /* 到着後に出すステッキアニメ（2〜5） */
  .stick{
    position: absolute;
    inset: 0;
    opacity: 0;                 /* 最初は隠す */
    animation: stickShow 0s linear forwards;
     /* animation-delay: 2.2s;      /* ← 到着タイミングに合わせる（調整ポイント） */
     animation-delay: 0.3s;
  }

  /* stickを表示開始 */
  @keyframes stickShow{
    to{ opacity: 1; }
  }

  /* ステッキフレーム（重ねる） */
  .stick .frame{
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    opacity: 0;

    /* ② ステッキ：1回だけ再生して止める */
    animation: frameOnce 0.8s ease-in-out forwards;
    will-change: opacity;
  }

  /* 4枚を順番に点灯（chara02〜05） */
  /*  .stick .f2{ animation-delay: 2.2s; }  /* stickShowと同時 */
  /* .stick .f3{ animation-delay: 2.4s; }
  .stick .f4{ animation-delay: 2.6s; } */
  /*.stick .f5{ animation-delay: 2.8s; }  /* 最後は残す */
  .stick .f2{ animation-delay: 0.3s; }
  .stick .f3{ animation-delay: 0.5s; }
  .stick .f4{ animation-delay: 0.7s; }
  .stick .f5{ animation-delay: 0.9s; }

  /* 0.2sずつ点灯して、最後は表示したまま（f5だけ別扱い） */
  @keyframes frameOnce{
    0%   { opacity: 0; }
    1%   { opacity: 1; }
    100% { opacity: 0; }
  }

  /* 最終フレーム（chara05）は残す */
  .stick .f5{
    animation-name: frameLast;
  }

  @keyframes frameLast{
    0%   { opacity: 0; }
    1%   { opacity: 1; }
    100% { opacity: 1; } /* ← ここがポイント：最後で停止 */
    }

  /* ===== 飛行：右→左、少し上下 ===== */
  /* @keyframes fly{
  0%{
    transform: translate(0, -50%) translateY(18px);
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  55%{
    transform: translate(-45vw, -50%) translateY(-20px);
  }
  75%{
    transform: translate(-55vw, -50%) translateY(12px);
  }
  100%{
    transform: translate(-65vw, -50%) translateY(0);
  }
} */
.chara-float{
  animation: float 1.4s cubic-bezier(.4,0,.6,1) infinite;
  /* will-change: transform; */
}

@keyframes float{
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-10px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(8px); }
  100% { transform: translateY(0); }
}

/* ロゴ */
.logo_svg{
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

 .logo{
  width: min(70vw, 480px);
  height: auto;

  /* 初期：見えない + 左側でカット */
  opacity: 0;
  transform: translateX(-30px) scale(0.99);
  clip-path: inset(0 100% 0 0);
  animation: logoReveal 1.4s cubic-bezier(.22,1,.36,1) forwards;
  /*animation-delay: 2.9s; /* ステッキ後に合わせて調整 */
  animation-delay: 1s;
  will-change: transform, opacity, clip-path;
  }

@keyframes logoReveal{
    0%{
      opacity: 0;
      transform: translateX(-30px) scale(0.99);
      clip-path: inset(0 100% 0 0);
      filter: blur(1.5px);
    }
    35%{ opacity: .35; }
    60%{ opacity: .7;  }
    85%{ opacity: 1;   }
    100%{
      opacity: 1;
      transform: translateX(0) scale(1);
      clip-path: inset(0 0 0 0);
      filter: blur(0);
    }
  }

@media screen and (max-width: 500px) {
  .logo_svg{
    left: 55%;
  }
  .chara{
    width: 60px;
    transform: translate(-85vw, -50%) translateY(0);
    opacity: 1;
  }
  .logo{
    width: min(62vw, 480px);
  }
  .chara{
    left: 93%;
  }
  /* ===== 飛行：右→左、少し上下 ===== */
    @keyframes fly{
    0%{
      transform: translate(0, -50%) translateY(18px);
      opacity: 0;
    }
    15%{
      opacity: 1;
    }
    55%{
      transform: translate(-65vw, -50%) translateY(-20px);
    }
    75%{
      transform: translate(-75vw, -50%) translateY(12px);
    }
    100%{
      transform: translate(-85vw, -50%) translateY(0);
    }

}
}

p,h1,h2,h3,h4,a, .p-global-nav .c-navbar__item>a, ul li, table tr td, table tr th, div{
 font-family: "Zen Kaku Gothic New", sans-serif!important;
  font-weight: 400;
  font-style: normal;
}
.p-global-nav .c-navbar__item>a{
  color: #333;
}

p.copy-light {
    font-size: 13px!important;
    font-family: "Poppins", sans-serif!important;
}
.l-header__content .p-global-nav .c-navbar__item>a{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
}
.hed_contact a{
    position: relative;
    border-radius: 100px;
    background: #ffffffb0;
    z-index: 0;
    padding-left: 50px!important;
    padding-right: 50px!important;
    text-decoration: none;
    color: #2c3763;
    display: inline-block;
    font-family: "Zen Kaku Gothic New", sans-serif!important;
    font-size: 16px;
}
.hed_contact 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;

 }
 .hed_contact a span{
   position: relative;
   margin-left: -30px;
 }
  .hed_contact a span::after{
    content: "";
    background: url(assets/img/btn.png) no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -39px;
    z-index: 10000;
    background-size: cover;
  }

/* フッター */
.l-footer{
  border: 0px;
  /* background: #fff; */
  padding-top: 134px;
}
.foot_before_cta {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 16px;
    color: #fff;
    margin-bottom: 108px;
}
.foot_before_cta::before{
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(45deg,rgba(156, 187, 212, 1) 0%, rgba(123, 124, 182, 1) 74%, rgba(67, 83, 148, 1) 100%);
  /* filter: blur(10px); */
  opacity: .9;
  z-index: 0;
  border-radius: 10px;
}
.foot_before_cta > * {
  position: relative;
  z-index: 1; /* 中身はクッキリ */
}
.fot_cta h3{
   font-family: "Poppins", sans-serif!important;
   font-size: 48px;
   margin: 0px;
}
.fot_cta .wp-block-column{
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.wp-block-group.cta_flex{
  display: flex;
  gap: 20px;
}
.cta_flex span.btm_deco{
  margin-left: -20px;
}
.cta_flex span.btm_deco::after{
  background:url(assets/img/cart.png) no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  right: -20px;
}
div#block-8 {
    display: flex;
    justify-content: flex-end;
}

ul#menu-footer_nav1 {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}
ul#menu-footer_nav1 >li+li{
  margin-top: 0px!important;
}

 /* @media (max-width: 1000px){
  .foot_before_cta::before{
    filter: blur(10px);
  }
 } */

 .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;
    }
.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(assets/img//btn.png) no-repeat;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -39px;
        z-index: 10000;
        background-size: cover;
    }

  /* ぱんくずどうするか考え中 */
  .p-breadcrumbs-wrapper{
    display: none;
  }
.custom-breadcrumbs .p-breadcrumbs-wrapper{
    display: block;
  }
/* トップページ・アーカイブ商品 */
.product-short-description {
    font-size: 13px;
}
.top-kabinnu .c-entry-summary__header{
  display: flex;
  flex-direction: column-reverse;
}
 @media (max-width: 1240px){
  .foot_before_cta::before{
    border-radius: 0px;
  }
 }
@media not all and (min-width: 1024px) {
    [data-scrolled=true] .l-header--sticky-overlay-colored-sm {
        background: rgba(255, 255, 255, 0.5)!important;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}

   @media (max-width: 1023px){
    ul#menu-footer_nav1, div#block-8{
      justify-content: center;
    }
    [data-scrolled=false] .l-header--sticky-overlay-colored-sm .c-hamburger-btn__bar{
      background-color: #2c3763;
    }
    [data-scrolled=false] .l-header--sticky-overlay-colored-sm .c-hamburger-btn__label, .c-hamburger-btn__label{
       font-family: "Poppins", sans-serif!important;
       color: #2c3763;
    }
    .c-drawer{
      background-color: #F4F0F9;
    }
    .c-drawer a{
      color: #2c3763;
    }
    .c-drawer__menu li a::after{
    content: "";
    background: url(assets/img/btn.png) no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* right: 160px; */
    z-index: 10000;
    background-size: cover;
    }
    .c-drawer__item{
    padding-top: 20px;
    padding-bottom: 20px;
    }
    .hed_contact a::before{
      content: none;
    }
    .hed_contact a{
      background: inherit;
      padding-left: 0px!important;
      padding-right: 0px!important;
      font-size: inherit;
      display: block;
    }
    /* .hed_contact a:after{
      right: 157px!important;
    } */
    .l-footer{
    padding-top: 80px;
  }
 
   }
  @media (max-width: 600px){
    .wp-block-group.cta_flex{
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 5px;
      }
      /* .hed_contact a:after {
        right: 139px !important;
    } */
    

  }
  @media (min-width: 500px){
    .pro-br{
      display: none;
    }
   
  }
  @media (max-width: 530px){
    .fot_cta h3{
      font-size: 38px;
    }
    .fot_cta .kabin_btm a{
      margin-top: 10px;
    }
    .fot_cta .wp-block-column{
      padding: 20px 0px;
    }
     p{
      font-size: 15px!important;
    } 
    .kabinnu p.has-text-align-center{
      text-align: left;
    }
    p.fot-sp-p {
    font-size: 14px;
    }
    p.copy-light{
      font-size: 11px!important;
    }
    p.has-text-align-center.kabin_btm {
    text-align: center;
    }
   

  }