@charset "UTF-8";

/* =========================================
   Moreボタン
========================================= */

.btns a img {
  display: inline-block;
  transform: translateX(0);
  animation: sway-right 1.8s ease-in-out infinite;
  will-change: transform;
  transform-origin: center;
}

@keyframes sway-right {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(12px); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .btns a img,
  .btns a:hover img,
  .btns a:focus-visible img {
    animation: none !important;
  }
}

.A1-pickup .btns a img {
  transform: translateY(-15px) translateX(0);
  animation: btn-sway-right 1.8s ease-in-out infinite;
  will-change: transform;
  vertical-align: middle;
}

@keyframes btn-sway-right {
  0%   { transform: translateY(-15px) translateX(0); }
  50%  { transform: translateY(-15px) translateX(20px); }
  100% { transform: translateY(-15px) translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .A1-pickup .btns a img { animation: none !important; }
}

h2.tit01 > span::before { content: none !important; }

h2.tit01{
  --tit-icon-dur:    1.0s;
  --tit-icon-offset: 16px;
  --tit-gap:         .5s;
  --tit-text-dur:    0.6s;
  --tit-text-offset: 18px;
}

h2.tit01 .sharp{
  position:absolute; top:50%; right:80%;
  width:100px; height:100px;
  background: url(../images/common/ico_hash.png) center / contain no-repeat;
  transform: translateY(calc(-50% + var(--tit-icon-offset)));
  opacity:0; pointer-events:none; will-change: transform, opacity;
}
@media (max-width:780px){ h2.tit01top .sharp,h2.tit01 .sharp{ width:60px; height:60px; } }
.A1-ranking h2.tit01 .sharp{ background-image: url(../images/common/ico_hash02.png); }

h2.tit01 .txts{
  display:inline-block;
  opacity:0;
  transform: translateY(var(--tit-text-offset));
  will-change: transform, opacity;
  transition: none !important;
  animation: none !important;
}

h2.tit01.is-reveal .sharp{
  animation: tit01IconUp var(--tit-icon-dur) cubic-bezier(.16,.84,.44,1) forwards;
}

h2.tit01.text-on .txts{
  animation: tit01TextIn var(--tit-text-dur) cubic-bezier(.20,.80,.20,1) forwards !important;
  transition: none !important;
}

/* keyframes */
@keyframes tit01IconUp{
  from{ opacity:0; transform: translateY(calc(-50% + var(--tit-icon-offset))); }
  to  { opacity:1; transform: translateY(-50%); }
}
@keyframes tit01TextIn{
  from{ opacity:0; transform: translateY(var(--tit-text-offset)); }
  to  { opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  h2.tit01 .sharp, h2.tit01 .txts{
    animation:none !important; transition:none !important; opacity:1 !important;
  }
  h2.tit01 .sharp{ transform: translateY(-50%) !important; }
}

/* ②(txts)を前倒しで開始（強めに検証用） */
h2.tit01{
  --tit-gap: .7s;       /* そのまま */
  --tit-overlap: 1.0s;  /* ← gap(0.5s)より大きく。icon(1.0s)+gap を超えると即出しに近い */
}
/* SPはさらに前倒ししたければ */
@media (max-width:780px){
  h2.tit01{ --tit-overlap: 1.4s; }
}

/* =========================
   Moreボタン（SP）
   ========================= */
@media (max-width: 780px){
  .btns{
    margin-top: 20px;
  }
  .btns a{
    display: inline-flex;
    align-items: center;
    gap: .4em;
  }
  .btns a span{
    font-size: 16px;
    line-height: 1;
  }
  .btns a img{
    height: 15px;
    vertical-align: middle;
    position: relative;
    top: 5px; 
  }

  .A1-pickup .btns a span{ font-size: 20px; }
  .A1-pickup .btns a img{
    height: 18px;
    animation: btn-sway-right-sp 1.8s ease-in-out infinite !important;
    will-change: transform;
  }

  @keyframes btn-sway-right-sp {
    0%   { transform: translateY(-10px) translateX(0); }
    50%  { transform: translateY(-10px) translateX(20px); }
    100% { transform: translateY(-10px) translateX(0); }
  }
}



/* ================================
   2段階ヘッダー
================================ */

:root {
  --header-compact-shadow: 0 6px 20px rgba(0,0,0,.06);
  --logo-scale-compact: .68; 
  --nav-maxheight: 90px;
}

@media (min-width: 781px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #fff;
    transition: padding .35s ease, box-shadow .25s ease, background-color .2s ease;
    padding-top: 28px !important;
    padding-bottom: 16px !important;
  }

  .header-logo h1 a img {
    transform-origin: center top;
    transition: transform .35s ease, opacity .25s ease;
  }
  .header-logo h1 div {
    transition: opacity .25s ease, max-height .3s ease, margin .3s ease;
    overflow: hidden; 
    max-height: 60px;
  }

  /* メニュー */
  .header-nav {
    transition: opacity .25s ease, max-height .3s ease, margin .3s ease;
    overflow: hidden;
    max-height: var(--nav-maxheight);
  }

  .header.is-compact {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    box-shadow: var(--header-compact-shadow);
  }
  .header.is-compact .header-logo h1 a img {
    transform: scale(var(--logo-scale-compact));
  }
  .header.is-compact .header-logo h1 div {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
  }
  .header.is-compact .header-nav {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    margin-top: 0;
  }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  .header,
  .header-logo h1 a img,
  .header-logo h1 div,
  .header-nav {
    transition: none !important;
  }
}

/* ================================
   固定ヘッダー（PC）: 大→小
================================ */

:root{
  --header-compact-h: 70px;
}

.header-spacer{
  height: var(--header-expanded-h, 0px);
  transition: height .35s ease;
}

@media (min-width: 781px){

  .header{
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 299;
    background: #fff;
    height: var(--header-expanded-h, auto);
    overflow: hidden;
    transition: height .35s ease, box-shadow .25s ease, padding .35s ease;
  }

  .header-logo h1 a img{
    transform-origin: center top;
    transition: transform .35s ease, opacity .25s ease;
  }
  .header-logo h1 div{
    transition: opacity .25s ease, max-height .3s ease, margin .3s ease;
    overflow: hidden;
    max-height: 60px;/
  }
  .header-nav{
    transition: opacity .25s ease, max-height .3s ease, margin .3s ease;
    overflow: hidden;
    max-height: 120px;
  }

  /* 縮小（コンパクト）状態 */
  .header.is-compact{
    height: var(--header-compact-h);
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }
  .header.is-compact .header-logo h1 a img{
    transform: scale(var(--logo-scale-compact, .68));
  }
  .header.is-compact .header-logo h1 div{
    opacity: 0;
    max-height: 0;
    margin-top: 0;
  }
  .header.is-compact .header-nav{
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    margin-top: 0;
  }

  body.header-compact .header-spacer{
    height: var(--header-compact-h);
  }
}

@media (prefers-reduced-motion: reduce){
  .header,
  .header-logo h1 a img,
  .header-logo h1 div,
  .header-nav,
  .header-spacer{
    transition: none !important;
  }
}

@media (min-width: 781px) {
  .header.is-compact {
    padding: 0 !important;
  }

  .header.is-compact .header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
  }

  .header.is-compact .header-logo h1 a img {
    transform-origin: center center;
    transform: scale(var(--logo-scale-compact, .68));
  }

  .header.is-compact .header-nav {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
  }
}

/*.inner */
.reveal-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* インスタアイコン */

.sp_header__sns a{
  position: relative;
  display: inline-block;
  line-height: 0;
}
.sp_header__sns a img{
  display: block;
}

body.menu-open  .sp_header__sns a img,
body.is-menu-open .sp_header__sns a img,
body:has(.gnavi.is-active) .sp_header__sns a img{
  opacity: 0 !important;
}

body.menu-open  .sp_header__sns a::after,
body.is-menu-open .sp_header__sns a::after,
body:has(.gnavi.is-active) .sp_header__sns a::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../images/common/ico_insta_w.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  transform: translateY(-2px);
}

html { overflow-y: scroll; }