#top {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0 auto var(--section-margin);
  --wave-mask-height: 4.5vh;
  --scroll-line-height: 3.2em;
  --scroll-hint-lift: 2.5em;
}

/* ---- TOP トピックス回転バー（ヘッダー直下・右揃え） ---- */
#top .topics_ticker {
  position: absolute;
  top: 5.5em;
  left: auto;
  right: 1em;
  z-index: 8;
  width: 614px;
  max-width: calc(100% - 2em);
  -webkit-transform: none;
  transform: none;
  pointer-events: none;
  box-sizing: border-box;
}

#top .topics_ticker .topics_ticker_bar {
  pointer-events: auto;
  gap: 0.75em 1em;
  min-height: 2.6em;
  min-width: 0;
  max-width: 100%;
  padding: 0.55em 1em;
  border-radius: 4px;
  background: rgba(0, 147, 219, 0.50);
  background: color-mix(in srgb, var(--color2, #0093db) 50%, transparent);
  box-shadow: 0 4px 16px rgba(0, 147, 219, 0.22);
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

#top .topics_ticker .topics_ticker_label {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  padding: 0.2em 0.65em;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

#top .topics_ticker .topics_ticker_label:hover {
  background: rgba(255, 255, 255, 0.12);
}

#top .topics_ticker .topics_ticker_viewport {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 1.5em;
  overflow: hidden;
}

#top .topics_ticker .topics_ticker_list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  min-height: 1.5em;
  max-width: 100%;
  overflow: hidden;
}

#top .topics_ticker .topics_ticker_item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  max-width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.45s ease, visibility 0.45s ease;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#top .topics_ticker .topics_ticker_item.is_active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#top .topics_ticker .topics_ticker_link {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.75em;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
}

#top .topics_ticker .topics_ticker_link:hover .topics_ticker_title {
  text-decoration: underline;
}

#top .topics_ticker .topics_ticker_date {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.9;
}

#top .topics_ticker .topics_ticker_title {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- TOP カタログダウンロードボタン（ticker 直下） ---- */
#top .catalog_btn {
  --content-color: #fff;
  position: absolute;
  top: 9em;
  right: 1em;
  z-index: 8;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.45em;
  text-decoration: none;
  pointer-events: auto;
  color: #fff;
  padding: 0.8em;
  border-radius: 4px;
  background: rgba(0, 147, 219, 0.50);
  background:
    color-mix(in srgb, var(--color2, #0093db) 50%, transparent);
  box-shadow: 0 4px 16px rgba(0, 147, 219, 0.22);
  -webkit-transition: background 0.2s ease, box-shadow 0.2s ease;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#top .catalog_btn svg {
  display: block;
  flex-shrink: 0;
  -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

#top .catalog_btn svg:first-child {
  width: 3em;
  aspect-ratio: 1/1;
}

#top .catalog_btn svg:last-child {
  width: auto;
  height: 3em;
  max-width: min(42vw, 200px);
}

#top .catalog_btn svg:last-child path {
  fill: var(--content-color);
  -webkit-transition: fill 0.2s ease;
  transition: fill 0.2s ease;
}

#top .catalog_btn svg:first-child path,
#top .catalog_btn svg:first-child circle {
  stroke: var(--content-color);
  -webkit-transition: stroke 0.2s ease;
  transition: stroke 0.2s ease;
}

#top .catalog_btn:hover {
  background: rgba(141, 194, 31, 0.5);
  background: color-mix(in srgb, var(--color1, #8dc21f) 50%, transparent);
  box-shadow: 0 4px 16px rgba(141, 194, 31, 0.28);
}

#top .relative {
  height: 100vh;
  min-height: 360px;
  overflow: hidden;
}

#top .base_blur {
  display: none;
}

#top .base {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* PC: 左右いっぱい（上下はクロップ可） */
  object-position: center center;
  z-index: 1;
}

/* 1920超: メインは最大1920・中央寄せ、背面に同画像をぼかして敷く */
@media screen and (min-width: 1920px) {
  #top .base_blur {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
    -webkit-filter: blur(28px);
    filter: blur(28px);
  }

  #top .base {
    left: 0;
    right: 0;
    width: 1920px;
    max-width: 1920px;
    margin: 0 auto;
  }
}

#top .text {
  top: 2em;
  left: 2em;
  z-index: 3;
  width: 35%;
  max-width: 300px;
}

#top .catch_text {
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 42%;
  max-width: 420px;
  opacity: 0;
  overflow: visible;
  -webkit-transform: translate(-50%, calc(-50% + 0.6em));
  transform: translate(-50%, calc(-50% + 0.6em));
}

#top .catch_text img {
  display: block;
  width: 100%;
  height: auto;
}

#top .catch_text svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#top .scroll_hint {
  left: 50%;
  bottom: var(--scroll-hint-lift, 1.25em);
  z-index: 9;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.6em;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#top .scroll_hint .label {
  display: block;
  width: 2.6em;
  height: auto;
}

#top .scroll_hint .line {
  position: relative;
  display: block;
  width: 2px;
  height: var(--scroll-line-height);
  margin-bottom: calc(var(--scroll-line-height) / -2);
  background: rgba(51, 51, 51, 0.25);
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* top アニメ＋keyframes内 var() はサブピクセルでぶれるため transform のみで動かす */
#top .scroll_hint .line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: #333;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -webkit-animation: yab_scroll_hint 2.6s linear infinite;
  animation: yab_scroll_hint 2.6s linear infinite;
}

@-webkit-keyframes yab_scroll_hint {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 250%, 0);
    transform: translate3d(0, 250%, 0);
  }
}

@keyframes yab_scroll_hint {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 250%, 0);
    transform: translate3d(0, 250%, 0);
  }
}

/* ヒーロー下端に重ね、グレーマスクが青・緑より手前で覆う（#news .wave_top と同様 1px 重ねで境目の線を防止） */
#top .wave.wave_mask {
  top: auto;
  bottom: -1px;
}


#top .text svg {
  overflow: visible;
}

#top .text svg path {
  opacity: 0;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes yab_path_top {
  from {
    opacity: 0;
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes yab_path_top {
  from {
    opacity: 0;
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes yab_path_right {
  from {
    opacity: 0;
    -webkit-transform: translateX(0.5em);
    transform: translateX(0.5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes yab_path_right {
  from {
    opacity: 0;
    -webkit-transform: translateX(0.5em);
    transform: translateX(0.5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes yab_path_left {
  from {
    opacity: 0;
    -webkit-transform: translateX(-0.5em);
    transform: translateX(-0.5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes yab_path_left {
  from {
    opacity: 0;
    -webkit-transform: translateX(-0.5em);
    transform: translateX(-0.5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes yab_path_bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(0.5em);
    transform: translateY(0.5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes yab_path_bottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(0.5em);
    transform: translateY(0.5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

#top .text.active svg path.move1 {
  -webkit-animation: yab_path_top 0.4s ease-out forwards;
  animation: yab_path_top 0.4s ease-out forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

#top .text.active .copy.shadow svg path.move1 {
  -webkit-animation-delay: 0.22s;
  animation-delay: 0.22s;
}

#top .text.active svg path.move2 {
  -webkit-animation: yab_path_right 0.4s ease-out forwards;
  animation: yab_path_right 0.4s ease-out forwards;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#top .text.active .copy.shadow svg path.move2 {
  -webkit-animation-delay: 0.32s;
  animation-delay: 0.32s;
}

#top .text.active svg path.move3 {
  -webkit-animation: yab_path_right 0.4s ease-out forwards;
  animation: yab_path_right 0.4s ease-out forwards;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#top .text.active .copy.shadow svg path.move3 {
  -webkit-animation-delay: 0.42s;
  animation-delay: 0.42s;
}

#top .text.active svg path.move4 {
  -webkit-animation: yab_path_right 0.4s ease-out forwards;
  animation: yab_path_right 0.4s ease-out forwards;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#top .text.active .copy.shadow svg path.move4 {
  -webkit-animation-delay: 0.52s;
  animation-delay: 0.52s;
}

#top .text.active svg path.move5 {
  -webkit-animation: yab_path_right 0.4s ease-out forwards;
  animation: yab_path_right 0.4s ease-out forwards;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#top .text.active .copy.shadow svg path.move5 {
  -webkit-animation-delay: 0.62s;
  animation-delay: 0.62s;
}

#top .text.active svg path.move6 {
  -webkit-animation: yab_path_left 0.4s ease-out forwards;
  animation: yab_path_left 0.4s ease-out forwards;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#top .text.active .copy.shadow svg path.move6 {
  -webkit-animation-delay: 0.72s;
  animation-delay: 0.72s;
}

#top .text.active svg path.move7 {
  -webkit-animation: yab_path_bottom 0.4s ease-out forwards;
  animation: yab_path_bottom 0.4s ease-out forwards;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#top .text.active .copy.shadow svg path.move7 {
  -webkit-animation-delay: 0.82s;
  animation-delay: 0.82s;
}

#top .text.active svg path.move8 {
  -webkit-animation: yab_path_bottom 0.4s ease-out forwards;
  animation: yab_path_bottom 0.4s ease-out forwards;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

#top .text.active .copy.shadow svg path.move8 {
  -webkit-animation-delay: 0.92s;
  animation-delay: 0.92s;
}

#top .text.active svg path.move9 {
  -webkit-animation: yab_path_bottom 0.4s ease-out forwards;
  animation: yab_path_bottom 0.4s ease-out forwards;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

#top .text.active .copy.shadow svg path.move9 {
  -webkit-animation-delay: 1.02s;
  animation-delay: 1.02s;
}

/* 築く影完了後（move9影 1.02+0.4=1.42s）に中央 SVG を表示 */
#top .text.active~.catch_text {
  -webkit-animation: yab_catch_text_in 0.9s ease-out 1.55s forwards;
  animation: yab_catch_text_in 0.9s ease-out 1.55s forwards;
}

@-webkit-keyframes yab_catch_text_in {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, calc(-50% + 0.6em));
    transform: translate(-50%, calc(-50% + 0.6em));
  }

  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

@keyframes yab_catch_text_in {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, calc(-50% + 0.6em));
    transform: translate(-50%, calc(-50% + 0.6em));
  }

  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

/* SP トピックス：中央ロゴと同タイミング（delay 1.55s） */
@-webkit-keyframes yab_topics_ticker_in {
  from {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(0.6em);
    transform: translateX(-50%) translateY(0.6em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes yab_topics_ticker_in {
  from {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(0.6em);
    transform: translateX(-50%) translateY(0.6em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }
}

/* SP カタログボタン：トピックスと同タイミング（delay 1.55s） */
@-webkit-keyframes yab_top_catalog_btn_in {
  from {
    opacity: 0;
    -webkit-transform: translateY(0.6em);
    transform: translateY(0.6em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes yab_top_catalog_btn_in {
  from {
    opacity: 0;
    -webkit-transform: translateY(0.6em);
    transform: translateY(0.6em);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ------------------------------------------------- info -------------------------------------------------- */
#info {
  --main-max-width: 390px;
}

#info .main_flex {
  position: relative;
}

#info .main_flex .main {
  width: 50%;
  max-width: var(--main-max-width);
}

#info .main_flex .main .img {
  width: 90%;
  max-width: 250px;
  margin: 0 auto 6em 0;
}

#info .main_flex .main .text p {
  font-size: 1.2em;
  white-space: nowrap;
}

#info .main_flex .top_text {
  position: absolute;
  right: calc(((100vw - var(--inner)) / -2) - 2em);
  width: 50vw;
}

#info .top_text svg {
  overflow: visible;
}

#info .top_text svg path {
  opacity: 0;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  transform-origin: center;
}

#info .top_text.active svg path.move1 {
  -webkit-animation: yab_path_top 0.4s ease-out forwards;
  animation: yab_path_top 0.4s ease-out forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

#info .top_text.active svg path.move2 {
  -webkit-animation: yab_path_right 0.4s ease-out forwards;
  animation: yab_path_right 0.4s ease-out forwards;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#info .top_text.active svg path.move3 {
  -webkit-animation: yab_path_right 0.4s ease-out forwards;
  animation: yab_path_right 0.4s ease-out forwards;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#info .top_text.active svg path.move4 {
  -webkit-animation: yab_path_right 0.4s ease-out forwards;
  animation: yab_path_right 0.4s ease-out forwards;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#info .top_text.active svg path.move5 {
  -webkit-animation: yab_path_right 0.4s ease-out forwards;
  animation: yab_path_right 0.4s ease-out forwards;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#info .top_text.active svg path.move6 {
  -webkit-animation: yab_path_left 0.4s ease-out forwards;
  animation: yab_path_left 0.4s ease-out forwards;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#info .top_text.active svg path.move7 {
  -webkit-animation: yab_path_bottom 0.4s ease-out forwards;
  animation: yab_path_bottom 0.4s ease-out forwards;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#info .sub_flex {
  --num: 2;
  --gap: clamp(1.5em, 3vw, 3.5em);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  gap: var(--gap);
  margin: 25vw auto 0;
}

/* info1_img / info2_img：各カード用。円くりぬきで表示 */
#info .sub_flex .sub {
  position: relative;
  width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
  max-width: 32em;
  border-radius: 100%;
  overflow: hidden;
}

#info .sub_flex .sub .base {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
  border-radius: 100%;
  position: relative;
  z-index: 1;
}

#info .sub_flex .sub .absolute.core {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 13% 11%;
  box-sizing: border-box;
  -webkit-transform: none;
  transform: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  z-index: 3;
  background: rgba(0, 30, 60, 0.28);
  border-radius: 100%;
}

#info .sub_flex .sub h3 {
  width: 62%;
  margin: 0 auto 1.35em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#info .sub_flex .sub h3 svg {
  display: block;
  width: 100%;
  height: auto;
}

#info .sub_flex .sub p {
  width: clamp(280px, 26vw, 380px);
  max-width: 74%;
  margin: 0 auto;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.85;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}

#info .sub_flex .sub .core a.view_more {
  position: relative;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin-top: 1.6em;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

#info .sub_flex .sub .core a.view_more:hover {
  opacity: 0.85;
}

#info .sub_flex .sub .core a.view_more svg {
  display: block;
  width: 38%;
  min-width: 8em;
  max-width: 11.5em;
  height: auto;
  margin: 0 auto;
}

#info .sub_flex .sub .core a.view_more .arrow_down {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 0.5em;
  width: 1px;
  height: 1em;
  background: #fff;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

#info .sub_flex .sub .core a.view_more .arrow_down::before,
#info .sub_flex .sub .core a.view_more .arrow_down::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 0.62em;
  background: #fff;
}

#info .sub_flex .sub .core a.view_more .arrow_down::before {
  left: 0;
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}

#info .sub_flex .sub .core a.view_more .arrow_down::after {
  right: 0;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

#info .sub_flex .sub .core a.view_more:hover .arrow_down {
  height: 1.5em;
}

@media screen and (max-width: 1200px) {
  #info .main_flex .top_text {
    position: relative;
    right: calc(-1 * var(--side-padding) - 2em);
    width: calc(100% - var(--main-max-width));
  }

  #info .sub_flex {
    margin: 8em auto 0;
  }
}

@media screen and (max-width: 1024px) {
  #info .sub_flex {
    --num: 1;
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
  }

  #info .sub_flex .sub {
    width: 100%;
    max-width: none;
  }
}

/* ------------------------------------------------- product -------------------------------------------------- */
#product .inner {
  padding: 0;
  overflow: visible;
}

#product .product_flex.product_lattice {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 3em;
  margin: 0 auto;
  padding: 2em 0;
}

#product .product_flex .product_row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 1.5em;
  width: 100%;
}

#product .product_flex .item {
  position: relative;
  display: block;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 12em;
  max-width: 12em;
  min-width: 0;
  z-index: 1;
}

#product .product_flex .item.blank {
  pointer-events: none;
}

#product .product_flex .item.blank .bubble_shell {
  background: #6f6d6c;
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.12);
}

#product .product_flex a.item.link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

#product .product_flex .item .bubble_shell {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #6f6d6c;
  border-radius: 999px;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  will-change: transform;
  opacity: 1;
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.12);
  /* 本番：スクロール／ホバーの縮尺を CSS で補間（テスト neumorph は別指定） */
  -webkit-transition: -webkit-transform 0.28s ease-out, box-shadow 0.35s ease, background 0.35s ease;
  transition: transform 0.28s ease-out, box-shadow 0.35s ease, background 0.35s ease;
  isolation: isolate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#product .product_flex .item .core {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  top: 50%;
  left: 50%;
  width: 86%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#product .product_flex .item .label,
#product .product_swiper .item .label {
  position: relative;
  display: block;
  width: 100%;
  color: #fff;
  margin: 0 auto;
  line-height: 1.35;
  font-size: 0.76em;
  text-align: center;
}

#product .product_flex .item .arrow_down,
#product .product_swiper .item .arrow_down {
  position: absolute;
  left: 50%;
  top: 100%;
  background: #fff;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

#product .product_flex .item .arrow_down {
  margin-top: 0.5em;
  height: 1em;
  width: 1px;
}

#product .product_swiper .item .arrow_down {
  margin-top: 0.65em;
  height: 1em;
  width: 2px;
}

#product .product_flex .item .icon_frame {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 60%;
  aspect-ratio: 1 / 1;
  margin: -2em auto 0.35em;
  background: transparent;
  overflow: visible;
}

#product .product_flex .item .icon_frame img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

#product .product_flex .item .arrow_down::before,
#product .product_flex .item .arrow_down::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 0.62em;
  background: #fff;
}

#product .product_swiper .item .arrow_down::before,
#product .product_swiper .item .arrow_down::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 0.62em;
  background: #fff;
}

#product .product_flex .item .arrow_down::before,
#product .product_swiper .item .arrow_down::before {
  left: 0;
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}

#product .product_flex .item .arrow_down::after,
#product .product_swiper .item .arrow_down::after {
  right: 0;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

#product .product_flex .item.is_hover .arrow_down {
  height: 1em;
}

#product .product_swiper .swiper-slide-active .item .arrow_down {
  height: 1.5em;
}

@-webkit-keyframes yab_product_item_flash {
  0% {
    background: #6f6d6c;
  }

  50% {
    background: var(--color1);
  }

  100% {
    background: var(--color2);
  }
}

@keyframes yab_product_item_flash {
  0% {
    background: #6f6d6c;
  }

  50% {
    background: var(--color1);
  }

  100% {
    background: var(--color2);
  }
}

@-webkit-keyframes yab_product_item_unflash {
  0% {
    background: var(--color2);
  }

  50% {
    background: var(--color1);
  }

  100% {
    background: #6f6d6c;
  }
}

@keyframes yab_product_item_unflash {
  0% {
    background: var(--color2);
  }

  50% {
    background: var(--color1);
  }

  100% {
    background: #6f6d6c;
  }
}

#product .product_flex .item.yab_product_item_in .bubble_shell {
  -webkit-animation: yab_product_item_flash 0.2s linear forwards;
  animation: yab_product_item_flash 0.2s linear forwards;
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.22);
}

#product .product_flex .item.yab_product_item_out .bubble_shell {
  -webkit-animation: yab_product_item_unflash 0.2s linear forwards;
  animation: yab_product_item_unflash 0.2s linear forwards;
}

#product .product_flex .item.is_hover .bubble_shell {
  background: #0093db;
  background: var(--color2);
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.22);
}

#product .product_flex .item.is_hover {
  z-index: 200;
}

@media (prefers-reduced-motion: reduce) {

  #product .product_flex .item.yab_product_item_in .bubble_shell,
  #product .product_flex .item.yab_product_item_out .bubble_shell {
    -webkit-animation: none;
    animation: none;
  }
}

/* ---- TOP テスト用：写真向けエンボス（#top.neumorph のみ・灰彫り込みは使わない） ---- */
/* 青・緑影は位置ズレ0。同じ軌跡をディレイ再生して一瞬見えるだけ。完了後は消す */
#top.neumorph .text,
#info.neumorph .catch_pin .catch {
  position: relative;
}

/* catch_text は SVG 直出力。relative にすると absolute が無効化され下端で scroll/wave と重なる */
#top.neumorph .catch_text.absolute {
  position: absolute;
}

#top.neumorph .text .copy,
#top.neumorph .catch_text .copy {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#top.neumorph .text .copy.main,
#top.neumorph .catch_text .copy.main {
  position: relative;
  z-index: 2;
}

/* 影コピー：ズレ0・ぼかしなし・アニメ完了後にフェードアウト */
@-webkit-keyframes yab_shadow_fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes yab_shadow_fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#top.neumorph .text .copy.shadow,
#top.neumorph .catch_text .copy.shadow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-transform: none;
  transform: none;
  -webkit-filter: none;
  filter: none;
}

/* 築くために氣づく：move9 影完了 1.42s → 1.45s 開始でフェードアウト */
#top.neumorph .text.active .copy.shadow {
  -webkit-animation: yab_shadow_fadeout 0.45s ease-out 1.45s forwards;
  animation: yab_shadow_fadeout 0.45s ease-out 1.45s forwards;
}

/* 築くために氣づく（SP）：同タイミング */
#top.neumorph .catch_text.active .copy.shadow,
#top.neumorph .catch_text .copy.shadow.active {
  -webkit-animation: yab_shadow_fadeout 0.4s ease-out 1.3s forwards;
  animation: yab_shadow_fadeout 0.4s ease-out 1.3s forwards;
}


#top.neumorph .text .copy svg,
#top.neumorph .catch_text .copy svg {
  display: block;
  margin: 0 auto;
}

/* TOP ヒーロー SVG 色：縦書き黒・中央ロゴ白（PC/SP 共通・確定） */
@media screen and (min-width: 769px) {

  #top .text .copy.main svg path,
  #top .text>svg path,
  #top.neumorph .text .copy.main svg path,
  #top.neumorph .text>svg path {
    fill: #111 !important;
  }
}

/* 中央ロゴ：全面白（上段・YABUSHITA・左右アクセントなし） */
#top .catch_text .yab_catch_logotype path,
#top .catch_text .yab_catch_logotype rect,
#top .catch_text svg .yab_catch_tagline,
#top .catch_text>svg path,
#top .catch_text>svg rect,
#top.neumorph .catch_text .yab_catch_logotype path,
#top.neumorph .catch_text .yab_catch_logotype rect,
#top.neumorph .catch_text svg .yab_catch_tagline,
#top.neumorph .catch_text>svg path,
#top.neumorph .catch_text>svg rect,
#top.neumorph .catch_text .copy.main svg path,
#top.neumorph .catch_text .copy.main svg rect {
  fill: #fff !important;
}

#top.neumorph .text .copy.shadow svg path.move1,
#top.neumorph .text .copy.shadow svg path.move2,
#top.neumorph .text .copy.shadow svg path.move3,
#top.neumorph .text .copy.shadow svg path.move4,
#top.neumorph .text .copy.shadow svg path.move5,
#top.neumorph .catch_text .copy.shadow svg path,
#top.neumorph .catch_text .copy.shadow svg rect {
  fill: #7ad4f8;
}

#top.neumorph .text .copy.shadow svg path.move6,
#top.neumorph .text .copy.shadow svg path.move7,
#top.neumorph .text .copy.shadow svg path.move8,
#top.neumorph .text .copy.shadow svg path.move9 {
  fill: #c5eb6e;
}

#top.neumorph .scroll_hint .label {
  -webkit-filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

#top.neumorph .scroll_hint .line {
  background: rgba(0, 0, 0, 0.22);
}

/* 移動バー：黒 → 青(--color2) → 緑(--color1) を循環 */
#top.neumorph .scroll_hint .line::after {
  background: #333;
  -webkit-animation: yab_scroll_hint_neo 2.6s linear infinite;
  animation: yab_scroll_hint_neo 2.6s linear infinite;
}

@-webkit-keyframes yab_scroll_hint_neo {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    background: #333;
  }

  35% {
    background: #0093db;
  }

  70% {
    background: #8dc21f;
  }

  100% {
    -webkit-transform: translate3d(0, 250%, 0);
    transform: translate3d(0, 250%, 0);
    background: #333;
  }
}

@keyframes yab_scroll_hint_neo {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    background: #333;
  }

  35% {
    background: #0093db;
  }

  70% {
    background: #8dc21f;
  }

  100% {
    -webkit-transform: translate3d(0, 250%, 0);
    transform: translate3d(0, 250%, 0);
    background: #333;
  }
}

/* ---- INFO テスト用：写真ヒーローの下に「常識をヤブる」全面＋ロゴ文章（#info.neumorph のみ） ---- */
#info.neumorph {
  --yab_info_neo_bg: #e8e8e8;
  --yab_info_neo_shadow_dark: #c5c5c5;
  --yab_info_neo_shadow_light: #ffffff;
  background: #e8e8e8;
  background: var(--yab_info_neo_bg);
  padding-top: 0;
  padding-right: 0;
  padding-bottom: clamp(3em, 8vh, 6em);
  padding-left: 0;
  margin-bottom: 0;
}

#info.neumorph .catch {
  height: 100vh;
  min-height: 360px;
  width: 100%;
  margin: 0 auto;
  padding: 0 4vw;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#info.neumorph .catch svg {
  display: block;
  width: 90%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

#info.neumorph .catch svg path {
  fill: #6b6968;
  opacity: 0;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  transform-origin: center;
}

#info.neumorph .catch.active svg path.move1 {
  -webkit-animation: yab_path_top 0.45s ease-out forwards;
  animation: yab_path_top 0.45s ease-out forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

#info.neumorph .catch.active svg path.move2 {
  -webkit-animation: yab_path_right 0.45s ease-out forwards;
  animation: yab_path_right 0.45s ease-out forwards;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#info.neumorph .catch.active svg path.move3 {
  -webkit-animation: yab_path_right 0.45s ease-out forwards;
  animation: yab_path_right 0.45s ease-out forwards;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#info.neumorph .catch.active svg path.move4 {
  -webkit-animation: yab_path_right 0.45s ease-out forwards;
  animation: yab_path_right 0.45s ease-out forwards;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#info.neumorph .catch.active svg path.move5 {
  -webkit-animation: yab_path_right 0.45s ease-out forwards;
  animation: yab_path_right 0.45s ease-out forwards;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#info.neumorph .catch.active svg path.move6 {
  -webkit-animation: yab_path_left 0.45s ease-out forwards;
  animation: yab_path_left 0.45s ease-out forwards;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#info.neumorph .catch.active svg path.move7 {
  -webkit-animation: yab_path_bottom 0.45s ease-out forwards;
  animation: yab_path_bottom 0.45s ease-out forwards;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#info.neumorph .main_flex {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  max-width: min(72em, 92vw);
  margin: clamp(2em, 6vh, 4em) auto clamp(4em, 10vh, 7em);
  padding: 0 clamp(1.5em, 4vw, 3em);
  box-sizing: border-box;
}

#info.neumorph .main_flex .main {
  width: 100%;
  max-width: 48em;
  text-align: center;
}

#info.neumorph .main_flex .main .img {
  width: min(42%, 280px);
  max-width: 280px;
  margin: 0 auto 3.25em;
}

#info.neumorph .main_flex .main .img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
}

#info.neumorph .main_flex .main .text p {
  color: #6b6968;
  font-size: clamp(15px, 1.85vw, 20px);
  line-height: 2.05;
  letter-spacing: 0.04em;
  white-space: normal;
  text-align: center;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

/* INFO サブカード：円形＋へこみニューモ（波紋 surface の上にリム） */
#info.neumorph .sub_flex .sub {
  border-radius: 100%;
}

#info.neumorph .sub_flex .sub .base {
  border-radius: 100%;
}

/* jquery.ripples 用：img はサイズ確保、描画は wrap 上の WebGL canvas */
#info.neumorph .sub_flex .sub .yab_info_wave_wrap {
  position: relative;
  z-index: 1;
  line-height: 0;
  border-radius: 100%;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background: #e8e8e8;
  background: var(--yab_info_neo_bg);
}

#info.neumorph .sub_flex .sub .yab_info_wave_wrap .base {
  opacity: 0;
  pointer-events: none;
  border-radius: 100%;
  position: relative;
  z-index: 0;
}

#info.neumorph .sub_flex .sub .yab_info_wave_wrap>canvas {
  z-index: 1 !important;
  border-radius: 100%;
}

/* 旧 surface 互換（残存時） */
#info.neumorph .sub_flex .sub .yab_info_wave_surface {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

#info.neumorph .sub_flex .sub .yab_info_wave_surface canvas {
  z-index: 1 !important;
  border-radius: 100%;
}

#info.neumorph .sub_flex .sub>.base {
  border-radius: 100%;
  box-shadow:
    inset 0.55em 0.55em 1.15em rgba(140, 140, 140, 0.5),
    inset -0.4em -0.4em 0.85em rgba(255, 255, 255, 0.7);
}

#info.neumorph .sub_flex .sub .yab_info_wave_wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 100%;
  box-shadow:
    inset 0.55em 0.55em 1.2em rgba(140, 140, 140, 0.55),
    inset -0.4em -0.4em 0.9em rgba(255, 255, 255, 0.75);
}

@media screen and (max-width: 768px) {
  #info.neumorph .catch {
    width: 100vw;
    max-width: 100vw;
    padding: 0 6vw;
  }

  #info.neumorph .catch svg {
    width: 100%;
    max-width: 100%;
  }

  #info.neumorph .main_flex {
    max-width: 100%;
    padding: 0 1.25em;
    margin-bottom: clamp(3em, 8vh, 5em);
  }

  #info.neumorph .main_flex .main {
    max-width: 100%;
  }

  #info.neumorph .main_flex .main .img {
    width: min(56%, 200px);
    max-width: 200px;
    margin-bottom: 2.4em;
  }

  #info.neumorph .main_flex .main .text p {
    font-size: 15px;
    line-height: 1.95;
    white-space: normal;
  }
}

/* ---- INFO：角丸テンプレ専用（中央で破れ→同一 main_flex にニューモロゴ＋文言） ---- */
/* body.yab_top_soft 欠落時も catch_pin があれば横スクロール抑止（Safari は hidden フォールバック） */
body.yab_top_soft,
body.yab_top_soft main,
body:has(#info.neumorph .catch_pin),
body:has(#info.neumorph .catch_pin) main {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

#info.neumorph:has(.catch_pin) {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

#info.neumorph .catch_pin {
  --yab-tear: 0;
  --yab-split: 0;
  --yab-flash: 0;
  --yab-stage: 1;
  --yab-main: 0;
  --yab-copy: 0;
  --yab-paper: 1;
  --yab-tear-travel: 24vh;
  position: relative;
  min-height: 100vh;
  margin: 0;
  z-index: 2;
  max-width: 100%;
}

#info.neumorph .catch_frame {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

#info.neumorph .catch_stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  pointer-events: none;
  opacity: var(--yab-stage);
  overflow: hidden;
  -webkit-transform: translate3d(var(--yab-shake-x, 0px), var(--yab-shake-y, 0px), 0);
  transform: translate3d(var(--yab-shake-x, 0px), var(--yab-shake-y, 0px), 0);
}

#info.neumorph .catch_pin .catch {
  position: relative;
  z-index: 2;
  width: min(90%, 720px);
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

#info.neumorph .catch_pin .catch .copy.main {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#info.neumorph .catch_pin .catch .copy.main svg {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(58vh, 480px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
}

#info.neumorph .catch_pin .catch .copy.main svg path {
  fill: #6b6968;
}

/* 破れ中：入場キーフレーム打ち切り（ステージ側） */
#info.neumorph .catch_pin.is_tearing .catch_stage .catch svg path {
  -webkit-animation: none !important;
  animation: none !important;
  will-change: opacity;
  -webkit-transition: none;
  transition: none;
}

/* ---- 破れ紙オーバーレイ（仮SVGギザギザ） ---- */
/* 回転で左右端が空くため、paper 自体を画面より広げてから clip（frame）する */
#info.neumorph .tear_paper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -18vw;
  width: calc(100% + 36vw);
  right: auto;
  z-index: 3;
  pointer-events: none;
  opacity: var(--yab-paper);
  overflow: hidden;
}

#info.neumorph .tear_half {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  will-change: transform;
  box-sizing: border-box;
}

/*
 * 裂ける距離。画面外まで飛ばすと再訪時に破れた紙が見えないため、
 * 上下に開いたまま留まる距離（--yab-tear-travel）で止める。
 */
#info.neumorph .tear_top {
  top: 0;
  height: 50%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: translate3d(0,
      calc(var(--yab-split) * var(--yab-tear-travel) * -1 + var(--yab-shake-y, 0px) * 0.2),
      0) rotate(calc(var(--yab-split) * -0.8deg));
  transform: translate3d(0,
      calc(var(--yab-split) * var(--yab-tear-travel) * -1 + var(--yab-shake-y, 0px) * 0.2),
      0) rotate(calc(var(--yab-split) * -0.8deg));
}

#info.neumorph .tear_bottom {
  bottom: 0;
  height: 50%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0,
      calc(var(--yab-split) * var(--yab-tear-travel) + var(--yab-shake-y, 0px) * 0.15),
      0) rotate(calc(var(--yab-split) * 1deg));
  transform: translate3d(0,
      calc(var(--yab-split) * var(--yab-tear-travel) + var(--yab-shake-y, 0px) * 0.15),
      0) rotate(calc(var(--yab-split) * 1deg));
}

#info.neumorph .tear_sheet {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #e8e8e8;
  background: var(--yab_info_neo_bg, #e8e8e8);
}

/* 常識SVGを縫い目基準で上下にクリップ */
#info.neumorph .tear_sheet .catch {
  position: absolute;
  left: 50%;
  width: min(90%, 720px);
  margin: 0;
  padding: 0;
  -webkit-filter: none;
  filter: none;
}

#info.neumorph .tear_top .tear_sheet .catch {
  top: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#info.neumorph .tear_bottom .tear_sheet .catch {
  top: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* 入場中は紙側の文字を隠す（ステージ側の一文字入場のみ見せる） */
#info.neumorph .tear_paper .catch {
  opacity: 0;
}

#info.neumorph .catch_pin.is_tearing .tear_paper .catch {
  opacity: 1;
}

#info.neumorph .tear_paper .catch svg path {
  opacity: 1 !important;
  -webkit-animation: none !important;
  animation: none !important;
}

#info.neumorph .tear_rim {
  position: relative;
  z-index: 2;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 100%;
  height: clamp(22px, 3.2vw, 40px);
  line-height: 0;
  margin-top: -1px;
  opacity: 0;
  color: #e8e8e8;
  color: var(--yab_info_neo_bg, #e8e8e8);
  -webkit-filter: drop-shadow(0 3px 4px rgba(90, 90, 90, 0.28));
  filter: drop-shadow(0 3px 4px rgba(90, 90, 90, 0.28));
}

#info.neumorph .tear_rim svg {
  display: block;
  width: 100%;
  min-width: 100%;
  height: 100%;
}

#info.neumorph .catch_pin.is_tearing .tear_rim {
  opacity: 1;
}

#info.neumorph .tear_rim_flip {
  margin-top: 0;
  margin-bottom: -1px;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  -webkit-filter: drop-shadow(0 -3px 4px rgba(90, 90, 90, 0.22));
  filter: drop-shadow(0 -3px 4px rgba(90, 90, 90, 0.22));
}

/* フラッシュは catch_pin 外（#info 直下）で画面全体 */
#info.neumorph>.catch_flash {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: #fff;
  opacity: var(--yab-flash, 0);
}

/* 同一ブロック：中央に居たままロゴ（ニューモ）→ 文言 */
#info.neumorph .catch_pin .main_flex {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 6vh 4vw;
  box-sizing: border-box;
  opacity: var(--yab-main);
  pointer-events: none;
  -webkit-transition: none;
  transition: none;
}

/* 上に戻ったとき：main_flex をふわっとフェードアウト */
#info.neumorph .catch_pin.is_fading_out .main_flex {
  opacity: 0 !important;
  -webkit-transform: translateY(-0.35em);
  transform: translateY(-0.35em);
  -webkit-transition:
    opacity 0.45s ease,
    -webkit-transform 0.45s ease;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

#info.neumorph .catch_pin.is_reveal_done .main_flex {
  pointer-events: auto;
  opacity: 1;
}

/*
 * 完了後もピンは 100vh のまま。潰すと文書高が変わり、演出直後にスクロール位置が飛ぶ。
 * 破れ直後は破れ紙だけ消えてロゴが残る（見出しは is_static_view で戻ってきたときに出す）。
 */
#info.neumorph .catch_pin.is_reveal_done {
  --yab-main: 1;
  --yab-copy: 1;
  --yab-paper: 0;
  --yab-stage: 0;
  --yab-split: 1;
}

#info.neumorph .catch_pin.is_reveal_done .tear_paper {
  visibility: hidden;
  opacity: 0;
}

/*
 * 一度セクションを離れて戻ったとき：破れる前の「常識をヤブる。」＋ロゴ＋文言を静止表示。
 * 切り替えは画面外で行うため、ピン高さ（100vh）は変えない。
 */
#info.neumorph .catch_pin.is_static_view {
  --yab-stage: 1;
}

/* 重ね合わせ（absolute）から縦並びへ */
#info.neumorph .catch_pin.is_static_view .catch_frame {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  /* 余った高さを見出し・ロゴ文言の上下へ均等に配る（詰まって見せない） */
  -webkit-box-pack: justify;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: clamp(1em, 2.5vh, 1.5em);
  /* 上は固定ヘッダーに見出しが潜らない余白。左右は見出しを詰めないよう 0 */
  padding: clamp(5em, 9vh, 6em) 0 clamp(1.2em, 3vh, 2em);
  box-sizing: border-box;
}

#info.neumorph .catch_pin.is_static_view .catch_stage,
#info.neumorph .catch_pin.is_static_view .main_flex {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 100%;
  padding: 0;
  -webkit-transform: none;
  transform: none;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

/* DOM 順は main_flex → catch_stage のため、見出しを上へ */
#info.neumorph .catch_pin.is_static_view .catch_stage {
  visibility: visible;
  overflow: visible;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  order: -1;
}

/* 見出しは破れるときと同じ大きさが上限。低い画面はロゴ文言と余白の分だけ詰める */
#info.neumorph .catch_pin.is_static_view .catch_stage .catch .copy.main svg {
  max-height: min(58vh, 480px, calc(100vh - 520px));
}

/* 左右余白はロゴ文言側だけに持たせる */
#info.neumorph .catch_pin.is_static_view .main_flex {
  padding: 0 4vw;
}

#info.neumorph .catch_pin.is_static_view .main_flex .main .img {
  width: min(28%, 165px);
  margin-bottom: clamp(0.5em, 1.2vh, 1em);
}

/* 入場キーフレームの途中状態を残さない */
#info.neumorph .catch_pin.is_static_view .catch_stage .catch svg path {
  opacity: 1;
  -webkit-animation: none;
  animation: none;
}


#info.neumorph .catch_pin .main_flex .main {
  width: 100%;
  max-width: 48em;
  text-align: center;
  margin: 0 auto;
}

#info.neumorph .catch_pin .main_flex .main .img {
  width: min(42%, 280px);
  max-width: 280px;
  margin: 0 auto 3.25em;
  opacity: 1;
}

#info.neumorph .catch_pin .main_flex .main .img svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

/* マーク：背景に溶かしておき、入場でニューモ凹をフェードイン */
#info.neumorph .catch_pin .main_flex .main .img svg path.mark {
  fill: #e8e8e8;
  fill: var(--yab_info_neo_bg);
  color: #e8e8e8;
  color: var(--yab_info_neo_bg);
  opacity: 0;
  -webkit-filter: url(#yab_logo_concave);
  filter: url(#yab_logo_concave);
  -webkit-transition: opacity 0.55s ease;
  transition: opacity 0.55s ease;
}

#info.neumorph .catch_pin .main_flex .main .img svg path:not(.mark),
#info.neumorph .catch_pin .main_flex .main .img svg rect {
  fill: #111;
  opacity: 0;
  -webkit-filter: none;
  filter: none;
  -webkit-transition: opacity 0.45s ease;
  transition: opacity 0.45s ease;
}

#info.neumorph .catch_pin .main_flex .main .img.is_revealed svg path.mark {
  opacity: 1;
}

#info.neumorph .catch_pin .main_flex .main .img.is_revealed svg path:not(.mark),
#info.neumorph .catch_pin .main_flex .main .img.is_revealed svg rect {
  opacity: 1;
}

#info.neumorph .catch_pin .main_flex .main .text {
  margin-top: 0;
  opacity: var(--yab-copy);
  -webkit-transform: translateY(calc((1 - var(--yab-copy)) * 0.85em));
  transform: translateY(calc((1 - var(--yab-copy)) * 0.85em));
}

#info.neumorph .catch_pin .main_flex .main .text p {
  color: #6b6968;
  font-size: clamp(15px, 1.85vw, 20px);
  line-height: 2.05;
  letter-spacing: 0.04em;
  white-space: normal;
  text-align: center;
}

#info.neumorph .catch_pin.is_past_action .catch_stage {
  visibility: hidden;
  pointer-events: none;
}

#info.neumorph .catch_pin.is_fading_out .tear_paper {
  opacity: 0;
  -webkit-transition: opacity 0.35s ease;
  transition: opacity 0.35s ease;
}

/* 演出中もスクロールバーは維持（Lenis stop 時の overflow: clip を上書き） */
html.yab_catch_scroll_lock {
  overscroll-behavior: none;
}

html.lenis.yab_catch_scroll_lock.lenis-stopped {
  overflow-y: scroll;
  overflow-x: clip;
}

@media screen and (max-width: 768px) {
  html.yab_catch_scroll_lock {
    touch-action: none;
  }
}

@media screen and (max-width: 768px) {
  #info.neumorph .catch_pin .catch {
    width: 100%;
    max-width: 100%;
    padding: 0 2%;
    box-sizing: border-box;
  }

  #info.neumorph .catch_pin .main_flex {
    padding: 5vh 6vw;
  }

  #info.neumorph .catch_pin .catch svg {
    max-height: min(52vh, 400px);
  }

  #info.neumorph .catch_pin.is_static_view .catch_stage .catch .copy.main svg {
    max-height: min(52vh, 400px, calc(100vh - 360px));
  }

  #info.neumorph .catch_pin.is_static_view .catch_frame {
    padding: clamp(4.5em, 8vh, 5.5em) 0 clamp(1.2em, 3vh, 2em);
  }

  #info.neumorph .catch_pin.is_static_view .main_flex {
    padding: 0 6vw;
  }

  #info.neumorph .catch_pin.is_static_view .main_flex .main .img {
    width: min(42%, 155px);
  }

  #info.neumorph .tear_rim {
    height: 26px;
  }

  /* SP：回転は小さく（左右隙間防止）。裂ける距離は --yab-tear-travel */
  #info.neumorph .catch_pin {
    --yab-tear-travel: 27vh;
  }

  #info.neumorph .tear_top {
    -webkit-transform: translate3d(0,
        calc(var(--yab-split) * var(--yab-tear-travel) * -1 + var(--yab-shake-y, 0px) * 0.15),
        0) rotate(calc(var(--yab-split) * -0.5deg));
    transform: translate3d(0,
        calc(var(--yab-split) * var(--yab-tear-travel) * -1 + var(--yab-shake-y, 0px) * 0.15),
        0) rotate(calc(var(--yab-split) * -0.5deg));
  }

  #info.neumorph .tear_bottom {
    -webkit-transform: translate3d(0,
        calc(var(--yab-split) * var(--yab-tear-travel) + var(--yab-shake-y, 0px) * 0.12),
        0) rotate(calc(var(--yab-split) * 0.6deg));
    transform: translate3d(0,
        calc(var(--yab-split) * var(--yab-tear-travel) + var(--yab-shake-y, 0px) * 0.12),
        0) rotate(calc(var(--yab-split) * 0.6deg));
  }

  #info.neumorph .catch_pin .main_flex .main .img {
    width: min(56%, 200px);
    max-width: 200px;
    margin-bottom: 2.4em;
  }

  #info.neumorph .catch_pin .main_flex .main .text p {
    font-size: 15px;
    line-height: 1.95;
  }
}

/* ---- ニューモ共通：title_box / btn_box は入場前フラット、入場で is_revealed ---- */
#product.neumorph .title_box,
#works.neumorph .title_box,
#news.neumorph .title_box,
#product.neumorph .btn_box,
#works.neumorph .btn_box,
#news.neumorph .btn_box {
  opacity: 0.36;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

#product.neumorph .title_box.is_revealed,
#works.neumorph .title_box.is_revealed,
#news.neumorph .title_box.is_revealed,
#product.neumorph .btn_box.is_revealed,
#works.neumorph .btn_box.is_revealed,
#news.neumorph .btn_box.is_revealed {
  opacity: 1;
}

#product.neumorph .title_box:not(.is_revealed)>span,
#works.neumorph .title_box:not(.is_revealed)>span,
#news.neumorph .title_box:not(.is_revealed)>span {
  color: #b8b6b5;
  text-shadow: none;
}

#product.neumorph .title_box:not(.is_revealed)>span:after,
#works.neumorph .title_box:not(.is_revealed)>span:after,
#news.neumorph .title_box:not(.is_revealed)>span:after {
  background: #c8c8c8;
  box-shadow: none;
  opacity: 0.45;
}

#product.neumorph .title_box:not(.is_revealed) .title svg,
#works.neumorph .title_box:not(.is_revealed) .title svg,
#news.neumorph .title_box:not(.is_revealed) .title svg {
  -webkit-filter: none;
  filter: none;
  opacity: 0.48;
}

#product.neumorph .title_box:not(.is_revealed) .title svg path,
#works.neumorph .title_box:not(.is_revealed) .title svg path,
#news.neumorph .title_box:not(.is_revealed) .title svg path {
  fill: #b8b6b5;
}

#product.neumorph .btn_box:not(.is_revealed) a>svg:first-child,
#product.neumorph .btn_box:not(.is_revealed) a>svg:last-child,
#works.neumorph .btn_box:not(.is_revealed) a>svg:first-child,
#works.neumorph .btn_box:not(.is_revealed) a>svg:last-child,
#works.neumorph .btn_box:not(.is_revealed) a>svg.white-color,
#news.neumorph .btn_box:not(.is_revealed) a>svg:first-child,
#news.neumorph .btn_box:not(.is_revealed) a>svg:last-child {
  -webkit-filter: none;
  filter: none;
  opacity: 0.5;
}

#product.neumorph .btn_box:not(.is_revealed) a>svg:first-child circle,
#product.neumorph .btn_box:not(.is_revealed) a>svg:first-child path[stroke],
#works.neumorph .btn_box:not(.is_revealed) a>svg:first-child circle,
#works.neumorph .btn_box:not(.is_revealed) a>svg:first-child path[stroke],
#news.neumorph .btn_box:not(.is_revealed) a>svg:first-child circle,
#news.neumorph .btn_box:not(.is_revealed) a>svg:first-child path[stroke] {
  stroke: #b8b6b5;
}

#product.neumorph .btn_box:not(.is_revealed) a>svg:last-child path,
#works.neumorph .btn_box:not(.is_revealed) a>svg:last-child path,
#works.neumorph .btn_box:not(.is_revealed) a>svg.white-color path:not([fill="none"]),
#news.neumorph .btn_box:not(.is_revealed) a>svg:last-child path {
  fill: #b8b6b5;
}

/* ---- PRODUCT テスト用ニューモーフィズム（#product.neumorph のみ・本番非適用） ---- */
#product.neumorph {
  --yab_product_neo_bg: #e8e8e8;
  --yab_product_neo_shadow_dark: #c5c5c5;
  --yab_product_neo_shadow_light: #ffffff;
  --yab_product_neo_text: #595757;
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
}

#product.neumorph .title_box>span {
  color: #7a7877;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product.neumorph .title_box>span:after {
  background: #7a7877;
  box-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product.neumorph .title_box .title svg {
  display: block;
  height: 100%;
  width: auto;
  margin-left: auto;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
}

#product.neumorph .title_box .title svg path {
  fill: #7a7877;
}

#product.neumorph .product_flex .item .bubble_shell,
#product.neumorph .product_swiper .item .bubble_shell {
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  background-image: none;
  /* 未入場：フラット（浮き出しなし） */
  box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.28);
  /* 縮尺アニメなし（JS も scale 固定）。transition は見た目変化のみ */
  -webkit-transition: background 0.45s ease, background-image 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
  transition: background 0.45s ease, background-image 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
  will-change: box-shadow;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(1) translateZ(0) !important;
  transform: scale(1) translateZ(0) !important;
}

#product.neumorph .product_flex .item.link .core {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.45s ease, visibility 0.45s ease;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

/* 入場後：浮き出し＋商品・名前を表示 */
#product.neumorph .product_flex .item.link.is_revealed .bubble_shell {
  background-image: -webkit-linear-gradient(145deg, #f4f4f4 0%, #e8e8e8 42%, #dcdcdc 100%);
  background-image: linear-gradient(145deg, #f4f4f4 0%, #e8e8e8 42%, #dcdcdc 100%);
  box-shadow:
    0.55em 0.55em 1.1em var(--yab_product_neo_shadow_dark),
    -0.55em -0.55em 1.1em var(--yab_product_neo_shadow_light);
}

#product.neumorph .product_flex .item.link.is_revealed .core {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#product.neumorph .product_flex .item.blank .bubble_shell {
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  background-image: none;
  box-shadow:
    inset 0.4em 0.4em 0.8em var(--yab_product_neo_shadow_dark),
    inset -0.4em -0.4em 0.8em var(--yab_product_neo_shadow_light);
}

#product.neumorph .product_flex .item .label,
#product.neumorph .product_swiper .item .label {
  color: #6b6968;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: none;
  -webkit-transition: color 0.35s ease;
  transition: color 0.35s ease;
}

#product.neumorph .product_flex .item .arrow_down,
#product.neumorph .product_swiper .item .arrow_down {
  background: #6b6968;
  box-shadow: none;
  height: 0.5em;
  -webkit-transition: height 0.35s ease, background 0.35s ease;
  transition: height 0.35s ease, background 0.35s ease;
}

#product.neumorph .product_flex .item .arrow_down::before,
#product.neumorph .product_flex .item .arrow_down::after,
#product.neumorph .product_swiper .item .arrow_down::before,
#product.neumorph .product_swiper .item .arrow_down::after {
  background: #6b6968;
  box-shadow: none;
  -webkit-transition: background 0.35s ease;
  transition: background 0.35s ease;
}

/* ホバー：入場済みのみ。拡大なし。外側に水色グロー */
#product.neumorph .product_flex .item.is_revealed.is_hover .bubble_shell,
#product.neumorph .product_swiper .swiper-slide-active .item .bubble_shell {
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  background-image: -webkit-linear-gradient(145deg, #f4f4f4 0%, #e8e8e8 42%, #dcdcdc 100%);
  background-image: linear-gradient(145deg, #f4f4f4 0%, #e8e8e8 42%, #dcdcdc 100%);
  box-shadow:
    0.55em 0.55em 1.1em var(--yab_product_neo_shadow_dark),
    -0.55em -0.55em 1.1em var(--yab_product_neo_shadow_light),
    0 0 0 0.28em rgba(0, 147, 219, 0.22),
    0 0 1.5em 0.2em rgba(0, 147, 219, 0.45),
    0.65em 0.85em 1.6em rgba(0, 120, 180, 0.28);
}

#product.neumorph .product_flex .item.is_revealed.is_hover .label,
#product.neumorph .product_swiper .swiper-slide-active .item .label {
  color: #0093db;
  color: var(--color2);
  text-shadow: none;
}

#product.neumorph .product_flex .item.is_revealed.is_hover .arrow_down,
#product.neumorph .product_swiper .swiper-slide-active .item .arrow_down {
  height: 1.35em;
  background: #0093db;
  background: var(--color2);
  box-shadow: none;
}

#product.neumorph .product_flex .item.is_revealed.is_hover .arrow_down::before,
#product.neumorph .product_flex .item.is_revealed.is_hover .arrow_down::after,
#product.neumorph .product_swiper .swiper-slide-active .item .arrow_down::before,
#product.neumorph .product_swiper .swiper-slide-active .item .arrow_down::after {
  background: #0093db;
  background: var(--color2);
  box-shadow: none;
}

#product.neumorph .product_flex .item.yab_product_item_in .bubble_shell,
#product.neumorph .product_flex .item.yab_product_item_out .bubble_shell {
  -webkit-animation: none;
  animation: none;
}

/* SP Swiper：アクティブのみ浮き出し＋中身表示 */
#product.neumorph .product_swiper .item .bubble_shell {
  background-image: none;
  box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.28);
}

#product.neumorph .product_swiper .item .core {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.45s ease, visibility 0.45s ease;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#product.neumorph .product_swiper .swiper-slide-active .item .bubble_shell {
  background-image: -webkit-linear-gradient(145deg, #f4f4f4 0%, #e8e8e8 42%, #dcdcdc 100%);
  background-image: linear-gradient(145deg, #f4f4f4 0%, #e8e8e8 42%, #dcdcdc 100%);
  box-shadow:
    0.55em 0.55em 1.1em var(--yab_product_neo_shadow_dark),
    -0.55em -0.55em 1.1em var(--yab_product_neo_shadow_light),
    0 0 0 0.28em rgba(0, 147, 219, 0.22),
    0 0 1.5em 0.2em rgba(0, 147, 219, 0.45),
    0.65em 0.85em 1.6em rgba(0, 120, 180, 0.28);
}

#product.neumorph .product_swiper .swiper-slide-active .item .core {
  opacity: 1;
  visibility: visible;
}

/* PRODUCT ボタン SVG（矢印円＋ワードマーク）をネオ調に */
#product.neumorph .btn_box a {
  --content-color: #6b6968;
  -webkit-align-items: center;
  align-items: center;
  gap: 2em;
}

#product.neumorph .btn_box a>svg:first-child {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  -webkit-transition: -webkit-transform 0.28s ease, -webkit-filter 0.35s ease;
  transition: transform 0.28s ease, filter 0.35s ease;
}

#product.neumorph .btn_box a>svg:first-child circle {
  stroke: #7a7877;
}

#product.neumorph .btn_box a>svg:first-child path[stroke] {
  stroke: #7a7877;
}

#product.neumorph .btn_box a>svg:last-child {
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  -webkit-transition: -webkit-filter 0.35s ease;
  transition: filter 0.35s ease;
}

#product.neumorph .btn_box a>svg:last-child path {
  fill: #7a7877;
}

#product.neumorph .btn_box a:hover>svg:first-child {
  -webkit-transform: translateX(0.28em);
  transform: translateX(0.28em);
  box-shadow: none;
  -webkit-filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
}

#product.neumorph .btn_box a:hover>svg:first-child circle,
#product.neumorph .btn_box a:hover>svg:first-child path[stroke] {
  stroke: #0093db;
  stroke: var(--color2);
}

#product.neumorph .btn_box a:hover>svg:last-child {
  -webkit-filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
}

#product.neumorph .btn_box a:hover>svg:last-child path {
  fill: #0093db;
  fill: var(--color2);
}

/* ---- PRODUCT 角丸四角別案（#product.neumorph.soft のみ・丸版は template_index のまま） ---- */
#product.neumorph.soft .product_flex .item .bubble_shell,
#product.neumorph.soft .product_swiper .item .bubble_shell {
  position: relative;
  border-radius: 1.4em;
  /* 凸の影を縮めつつ、リングを出す（凹は ::before でフェード） */
  -webkit-transition: background 0.4s ease, background-image 0.4s ease, box-shadow 0.4s ease;
  transition: background 0.4s ease, background-image 0.4s ease, box-shadow 0.4s ease;
}

/* 凹レイヤー（初期透明 → ホバーでフェードイン） */
#product.neumorph.soft .product_flex .item .bubble_shell::before,
#product.neumorph.soft .product_swiper .item .bubble_shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0.5em 0.5em 1em var(--yab_product_neo_shadow_dark),
    inset -0.45em -0.45em 0.95em var(--yab_product_neo_shadow_light);
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

#product.neumorph.soft .product_flex .item .core,
#product.neumorph.soft .product_swiper .item .core {
  z-index: 1;
}

#product.neumorph.soft .product_flex .item.blank .bubble_shell::before {
  content: none;
}

/* 入場後の凸：リング用スロットを用意してホバー遷移を滑らかに */
#product.neumorph.soft .product_flex .item.link.is_revealed .bubble_shell {
  box-shadow:
    0.55em 0.55em 1.1em var(--yab_product_neo_shadow_dark),
    -0.55em -0.55em 1.1em var(--yab_product_neo_shadow_light),
    0 0 0 0 rgba(0, 147, 219, 0);
}

/* ホバー／SPアクティブ：凸を消し、凹レイヤーをフェードイン */
#product.neumorph.soft .product_flex .item.is_revealed.is_hover .bubble_shell,
#product.neumorph.soft .product_swiper .swiper-slide-active .item .bubble_shell {
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  background-image: -webkit-linear-gradient(145deg, #e2e2e2 0%, #e8e8e8 48%, #f0f0f0 100%);
  background-image: linear-gradient(145deg, #e2e2e2 0%, #e8e8e8 48%, #f0f0f0 100%);
  box-shadow:
    0 0 0.15em rgba(197, 197, 197, 0),
    0 0 0.15em rgba(255, 255, 255, 0),
    0 0 0 0.18em rgba(0, 147, 219, 0.2);
}

#product.neumorph.soft .product_flex .item.is_revealed.is_hover .bubble_shell::before,
#product.neumorph.soft .product_swiper .swiper-slide-active .item .bubble_shell::before {
  opacity: 1;
}

/* ---- WORKS テスト用ニューモーフィズム（#works.neumorph のみ・本番非適用） ---- */
#works.neumorph {
  --yab_works_neo_bg: #e8e8e8;
  --yab_works_neo_shadow_dark: #c5c5c5;
  --yab_works_neo_shadow_light: #ffffff;
  --wave-scroll-link: 1;
  background: #e8e8e8;
  background: var(--yab_works_neo_bg);
}

#works.neumorph .title_box>span {
  color: #7a7877;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#works.neumorph .title_box>span:after {
  background: #7a7877;
  box-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#works.neumorph .title_box .title svg {
  display: block;
  height: 100%;
  width: auto;
  margin-right: auto;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
}

#works.neumorph .title_box .title svg path {
  fill: #7a7877;
}

#works.neumorph .works_list .item {
  --img-width: 44%;
  --gap: 2.25em;
  background: #e8e8e8;
  background: var(--yab_works_neo_bg);
  border-radius: 1em;
  padding: 1.35em 1.6em;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  box-shadow:
    0.45em 0.45em 0.9em var(--yab_works_neo_shadow_dark),
    -0.45em -0.45em 0.9em var(--yab_works_neo_shadow_light);
  -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in, box-shadow 0.35s ease, background 0.35s ease;
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, box-shadow 0.35s ease, background 0.35s ease;
}

#works.neumorph .works_list .item:not(:last-child) {
  margin-bottom: 1.75em;
}

#works.neumorph .works_list .item .img {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}

#works.neumorph .works_list .item .img .bg {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 0.9em;
  overflow: hidden;
  isolation: isolate;
}

#works.neumorph .works_list .item .img .bg:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0.45em 0.45em 0.85em rgba(140, 140, 140, 0.55),
    inset -0.35em -0.35em 0.75em rgba(255, 255, 255, 0.7);
  -webkit-transition: box-shadow 0.35s ease;
  transition: box-shadow 0.35s ease;
}

#works.neumorph .works_list .item .img .bg img {
  border-radius: inherit;
}

#works.neumorph .works_list .item .img .more {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-top: 0.9em;
  margin-left: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#works.neumorph .works_list .item .img .more svg {
  --more-color: #6b6968;
  margin: 0;
  height: 1.15em;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  -webkit-transition: -webkit-filter 0.35s ease;
  transition: filter 0.35s ease;
}

#works.neumorph .works_list .item .text {
  --margin: 0.65em;
  padding-top: 0.15em;
}

#works.neumorph .works_list .item .text .num {
  font-size: 2.4em;
  margin-bottom: 0.2em;
}

#works.neumorph .works_list .item .text .num,
#works.neumorph .works_list .item .text h3,
#works.neumorph .works_list .item .text .client,
#works.neumorph .works_list .item .text p,
#works.neumorph .works_list .item .text .tag_arrow_box .tag {
  color: #6b6968;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#works.neumorph .works_list .item .text .tag_arrow_box .tag:before {
  color: #6b6968;
}

#works.neumorph .works_list .item .text .tag_arrow_box {
  margin-top: 0.35em;
}

#works.neumorph .works_list.active .item:hover {
  background: #e8e8e8;
  background: var(--yab_works_neo_bg);
  color: inherit;
  box-shadow:
    0.45em 0.45em 0.9em var(--yab_works_neo_shadow_dark),
    -0.45em -0.45em 0.9em var(--yab_works_neo_shadow_light),
    0 0 0 0.22em rgba(0, 147, 219, 0.22),
    0 0 1.3em 0.15em rgba(0, 147, 219, 0.4);
}

#works.neumorph .works_list.active .item:hover .text .num,
#works.neumorph .works_list.active .item:hover .text h3,
#works.neumorph .works_list.active .item:hover .text .client,
#works.neumorph .works_list.active .item:hover .text p,
#works.neumorph .works_list.active .item:hover .text .tag_arrow_box .tag,
#works.neumorph .works_list.active .item:hover .text .tag_arrow_box .tag:before {
  color: #0093db;
  color: var(--color2);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(0, 110, 160, 0.35);
}

#works.neumorph .works_list.active .item:hover .img .more svg {
  --more-color: #0093db;
  -webkit-filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
}

#works.neumorph .works_list.active .item:hover .img .bg:after {
  background: transparent;
  opacity: 1;
  box-shadow:
    inset 0.45em 0.45em 0.85em rgba(0, 110, 160, 0.28),
    inset -0.35em -0.35em 0.75em rgba(255, 255, 255, 0.65);
}

#works.neumorph .btn_box a {
  --content-color: #6b6968;
  -webkit-align-items: center;
  align-items: center;
  gap: 2em;
}

#works.neumorph .btn_box a>svg:first-child {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  -webkit-transition: -webkit-transform 0.28s ease, -webkit-filter 0.35s ease;
  transition: transform 0.28s ease, filter 0.35s ease;
}

#works.neumorph .btn_box a>svg:first-child circle {
  stroke: #7a7877;
}

#works.neumorph .btn_box a>svg:first-child path[stroke] {
  stroke: #7a7877;
}

#works.neumorph .btn_box a>svg:last-child,
#works.neumorph .btn_box a>svg.white-color {
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  -webkit-transition: -webkit-filter 0.35s ease;
  transition: filter 0.35s ease;
}

#works.neumorph .btn_box a>svg:last-child path,
#works.neumorph .btn_box a>svg.white-color path:not([fill="none"]),
#works.neumorph .inner .btn_box a svg.white-color path:not([fill="none"]) {
  fill: #7a7877;
}

#works.neumorph .btn_box a:hover>svg:first-child {
  -webkit-transform: translateX(0.28em);
  transform: translateX(0.28em);
  -webkit-filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
}

#works.neumorph .btn_box a:hover>svg:first-child circle,
#works.neumorph .btn_box a:hover>svg:first-child path[stroke] {
  stroke: #0093db;
  stroke: var(--color2);
}

#works.neumorph .btn_box a:hover>svg:last-child,
#works.neumorph .btn_box a:hover>svg.white-color {
  -webkit-filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
}

#works.neumorph .btn_box a:hover>svg:last-child path,
#works.neumorph .btn_box a:hover>svg.white-color path:not([fill="none"]),
#works.neumorph .inner .btn_box a:hover svg.white-color path:not([fill="none"]) {
  fill: #0093db;
  fill: var(--color2);
}

/* ---- NEWS テスト用ニューモーフィズム（#news.neumorph のみ・本番非適用） ---- */
#news.neumorph {
  --yab_news_neo_bg: #e8e8e8;
  --yab_news_neo_shadow_dark: #c5c5c5;
  --yab_news_neo_shadow_light: #ffffff;
  --wave-scroll-link: 1;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
}

#news.neumorph .title_box>span {
  color: #7a7877;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#news.neumorph .title_box>span:after {
  background: #7a7877;
  box-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#news.neumorph .title_box .title svg {
  display: block;
  height: 100%;
  width: auto;
  margin-right: auto;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
}

#news.neumorph .title_box .title svg path {
  fill: #7a7877;
}

#news.neumorph .news_nav .item {
  color: #6b6968;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#news.neumorph .news_nav .item.column {
  color: #6b6968;
}

#news.neumorph .news_nav .item:hover {
  color: #0093db;
  color: var(--color2);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(0, 110, 160, 0.35);
}

#news.neumorph .news_nav .item.column:hover {
  color: #8dc21f;
  color: var(--color1);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(100, 140, 40, 0.3);
}

/* カード間余白（Swiper の spaceBetween:0 / margin-right:!important を崩さずスライド内余白で確保） */
#news.neumorph .news_swiper {
  padding-top: 0.55em;
  padding-bottom: 0.85em;
}

#news.neumorph .news_swiper .swiper-slide {
  padding: 0 0.7em;
  box-sizing: border-box;
}

#news.neumorph .news_swiper:not(.swiper-initialized) .swiper-slide {
  padding: 0 0.7em;
  box-sizing: border-box;
}

#news.neumorph .news_swiper .item {
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  border-radius: 1em;
  padding: 1em 1em 1.1em;
  box-shadow:
    0.4em 0.4em 0.85em var(--yab_news_neo_shadow_dark),
    -0.4em -0.4em 0.85em var(--yab_news_neo_shadow_light);
  -webkit-transition: color 0.2s ease, background 0.35s ease, box-shadow 0.35s ease;
  transition: color 0.2s ease, background 0.35s ease, box-shadow 0.35s ease;
}

#news.neumorph .news_swiper .item .title {
  color: #6b6968;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.55;
  min-height: calc(1.55em * 2);
  margin: 0 0 0.85em;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#news.neumorph .news_swiper .item .thumb {
  border-radius: 0.75em;
  overflow: hidden;
  isolation: isolate;
  background: #dcdcdc;
  margin: 0;
}

#news.neumorph .news_swiper .item .thumb::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0.4em 0.4em 0.75em rgba(140, 140, 140, 0.5),
    inset -0.3em -0.3em 0.65em rgba(255, 255, 255, 0.65);
}

#news.neumorph .news_swiper .item .thumb img {
  border-radius: inherit;
}

#news.neumorph .news_swiper .item .more {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 0.9em 0 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  --more-color: #6b6968;
}

#news.neumorph .news_swiper .item .more svg {
  margin: 0;
  height: 1.15em;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  -webkit-transition: -webkit-filter 0.35s ease;
  transition: filter 0.35s ease;
}

#news.neumorph .news_swiper .item:hover {
  color: inherit;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  box-shadow:
    0.4em 0.4em 0.85em var(--yab_news_neo_shadow_dark),
    -0.4em -0.4em 0.85em var(--yab_news_neo_shadow_light),
    0 0 0 0.2em rgba(0, 147, 219, 0.2),
    0 0 1.2em 0.12em rgba(0, 147, 219, 0.38);
}

/* ---- NEWS：角丸テンプレ専用（ホバーで凸→凹） ---- */
body.yab_top_soft #news.neumorph .news_swiper .item {
  position: relative;
  isolation: isolate;
  box-shadow:
    0.4em 0.4em 0.85em var(--yab_news_neo_shadow_dark),
    -0.4em -0.4em 0.85em var(--yab_news_neo_shadow_light),
    0 0 0 0 rgba(0, 147, 219, 0);
  -webkit-transition: color 0.2s ease, background 0.4s ease, box-shadow 0.4s ease;
  transition: color 0.2s ease, background 0.4s ease, box-shadow 0.4s ease;
}

body.yab_top_soft #news.neumorph .news_swiper .item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0.45em 0.45em 0.9em var(--yab_news_neo_shadow_dark),
    inset -0.4em -0.4em 0.85em var(--yab_news_neo_shadow_light);
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

body.yab_top_soft #news.neumorph .news_swiper .item>* {
  position: relative;
  z-index: 1;
}

body.yab_top_soft #news.neumorph .news_swiper .item:hover {
  box-shadow:
    0 0 0.15em rgba(197, 197, 197, 0),
    0 0 0.15em rgba(255, 255, 255, 0),
    0 0 0 0.18em rgba(0, 147, 219, 0.2);
}

body.yab_top_soft #news.neumorph .news_swiper .item:hover::before {
  opacity: 1;
}

#news.neumorph .news_swiper .item:hover .title {
  color: #0093db;
  color: var(--color2);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(0, 110, 160, 0.35);
}

#news.neumorph .news_swiper .item:hover .more svg {
  --more-color: #0093db;
  -webkit-filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
}

#news.neumorph .news_swiper .item:hover .thumb .tag {
  color: #fff;
}

#news.neumorph .news_swiper .item:hover .thumb .tag::after {
  background: var(--category-color);
}

#news.neumorph .news_swiper .swiper-button-prev,
#news.neumorph .news_swiper .swiper-button-next {
  color: #0093db;
  color: var(--color2);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

#news.neumorph .btn_box a {
  --content-color: #6b6968;
  -webkit-align-items: center;
  align-items: center;
  gap: 2em;
}

#news.neumorph .btn_box a>svg:first-child {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  -webkit-transition: -webkit-transform 0.28s ease, -webkit-filter 0.35s ease;
  transition: transform 0.28s ease, filter 0.35s ease;
}

#news.neumorph .btn_box a>svg:first-child circle {
  stroke: #7a7877;
}

#news.neumorph .btn_box a>svg:first-child path[stroke] {
  stroke: #7a7877;
}

#news.neumorph .btn_box a>svg:last-child {
  -webkit-filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  filter:
    drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px -1px 0 #b5b5b5);
  -webkit-transition: -webkit-filter 0.35s ease;
  transition: filter 0.35s ease;
}

#news.neumorph .btn_box a>svg:last-child path {
  fill: #7a7877;
}

#news.neumorph .btn_box a:hover>svg:first-child {
  -webkit-transform: translateX(0.28em);
  transform: translateX(0.28em);
  -webkit-filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
}

#news.neumorph .btn_box a:hover>svg:first-child circle,
#news.neumorph .btn_box a:hover>svg:first-child path[stroke] {
  stroke: #0093db;
  stroke: var(--color2);
}

#news.neumorph .btn_box a:hover>svg:last-child {
  -webkit-filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(-1px -1px 0 rgba(0, 110, 160, 0.35));
}

#news.neumorph .btn_box a:hover>svg:last-child path {
  fill: #0093db;
  fill: var(--color2);
}

#product .btn_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  gap: 4em;
  margin: 4em 0 0 auto;
  padding: 0 1em;
  position: relative;
  z-index: 4;
}

#product .btn_box a {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

#product .btn_box a svg path {
  fill: var(--content-color);
}

/* ---- PRODUCT SP Swiper（768以下のみ表示・横1列） ---- */
#product .product_swiper {
  --product-circle: min(69vw, 18em);
  /* 旧 46vw/12em の約1.5倍 */
  display: none;
  width: 100%;
  height: auto;
  min-height: calc(var(--product-circle) * 1.2);
  margin: 0 auto;
  padding: 1.5em 0 2em;
  overflow: hidden;
}

#product .product_swiper .swiper-wrapper {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#product .product_swiper .swiper-slide {
  width: var(--product-circle);
  height: auto;
  overflow: visible;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#product .product_swiper .item {
  position: relative;
  display: block;
  width: var(--product-circle);
  max-width: none;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
  -webkit-transition: -webkit-transform 0.35s ease-out;
  transition: transform 0.35s ease-out;
  -webkit-transform: scale(0.82);
  transform: scale(0.82);
}

#product .product_swiper .item .bubble_shell {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #6f6d6c;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.12);
  -webkit-transition: background 0.35s ease, box-shadow 0.35s ease;
  transition: background 0.35s ease, box-shadow 0.35s ease;
  isolation: isolate;
}

#product .product_swiper .swiper-slide-active .item {
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 2;
}

#product .product_swiper .swiper-slide-active .item .bubble_shell {
  background: #0093db;
  /* フォールバック */
  background: var(--color2);
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.22);
}

#product .product_swiper .item .core {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  top: 50%;
  left: 50%;
  width: 88%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#product .product_swiper .item .icon_frame {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 52%;
  aspect-ratio: 1 / 1;
  margin: 0 auto 0.35em;
  background: transparent;
  overflow: visible;
}

#product .product_swiper .item .icon_frame img,
#product .product_swiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ------------------------------------------------- works -------------------------------------------------- */
#works {
  --works-wave-height: 7vh;
  --wave-mask-height: 4.5vh;
  position: relative;
  z-index: 2;
}

#works .wave.wave_bottom {
  top: 100%;
  bottom: auto;
}


#works .inner {
  min-height: 12em;
}

#works .works_list {
  width: 100%;
  margin: 0 0 0 auto;
}

#works .works_list .item {
  --img-width: 50%;
  --gap: 2em;
  display: flex;
  padding: 1em;
  gap: var(--gap);
  -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in, background 0.2s ease-in;
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, background 0.2s ease-in;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  opacity: 0;
}

#works .works_list .item:not(:last-child) {
  margin: 0 auto;
}

#works .works_list.active .item:nth-child(1) {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

#works .works_list.active .item:nth-child(2) {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

#works .works_list.active .item:nth-child(3) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#works .works_list.active .item:nth-child(4) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

#works .works_list.active .item:nth-child(5) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

#works .works_list.active .item:nth-child(6) {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

#works .works_list.active .item:nth-child(7) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#works .works_list.active .item:nth-child(8) {
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

#works .works_list.active .item:nth-child(9) {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

#works .works_list.active .item:nth-child(10) {
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}

#works .works_list.active .item:nth-child(11) {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

#works .works_list.active .item:nth-child(12) {
  -webkit-transition-delay: 0.55s;
  transition-delay: 0.55s;
}

#works .works_list.active .item:nth-child(13) {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

#works .works_list.active .item:nth-child(14) {
  -webkit-transition-delay: 0.65s;
  transition-delay: 0.65s;
}

#works .works_list.active .item:nth-child(15) {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

#works .works_list.active .item {
  opacity: 1;
  transform: translateY(0);
  cursor: pointer;
}

/* 入場 delay をホバーに引き継がない（即反応） */
#works .works_list.active .item:hover {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  background: #0093db;
  /* フォールバック */
  background: var(--color2);
  color: #fff;
}

#works .works_list.active .item:hover .text .client,
#works .works_list.active .item:hover .text .tag_arrow_box .tag {
  color: #fff;
}

#works .works_list.active .item:hover .img .more svg {
  --more-color: #fff;
}

#works .works_list.active .item:hover .img .bg:after {
  background: #fff;
  opacity: 1;
}

#works .works_list .item .img {
  width: var(--img-width);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-self: stretch;
  align-self: stretch;
  min-height: 0;
}

#works .works_list .item .img .bg {
  display: block;
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
}

#works .works_list .item .img .bg:after {
  content: "";
  position: absolute;
  top: 3%;
  left: 3%;
  width: 100%;
  height: 100%;
  background: #0093db;
  /* フォールバック */
  background: var(--color2);
  opacity: 0.5;
  z-index: -1;
  -webkit-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}

#works .works_list .item .img .bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#works .works_list .item .img .more {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

#works .works_list .item .img .more svg {
  --more-color: #0093db;
  display: block;
  margin: 1.5em 0 0 auto;
  height: 1em;
}

#works .works_list .item .text {
  --margin: 0.5em;
  width: calc(100% - var(--img-width) - var(--gap));
}

#works .works_list .item .text>* {
  margin: 0 auto var(--margin);
}

#works .works_list .item .text .num {
  display: block;
  font-size: 3em;
  line-height: 100%;
  margin: 0 auto calc(var(--margin) / 2);
}

#works .works_list .item .text h3 {
  font-weight: 600;
}

#works .works_list .item .text .client {
  display: block;
  color: #807e7d;
}

#works .works_list .item .text .tag_arrow_box .tag {
  position: relative;
  display: block;
  color: var(--color2);
}

#works .works_list .item .text .tag_arrow_box .tag:before {
  content: "\2192";
  margin: 0 0.5em 0 0;
}

#works .inner .btn_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  margin: 2em 0 0 auto;
  padding: 0 1em;
  --content-color: #000;
}

#works .inner .btn_box a svg.white-color path:not([fill="none"]),
#works .inner .btn_box a svg.white-color circle:not([fill="none"]) {
  fill: #000;
}

#works .inner .btn_box a svg.white-color path[stroke],
#works .inner .btn_box a svg.white-color circle[stroke] {
  stroke: #000;
}

#works .inner .btn_box a:hover svg.white-color path:not([fill="none"]),
#works .inner .btn_box a:hover svg.white-color circle:not([fill="none"]) {
  fill: var(--color2);
}

#works .inner .btn_box a:hover svg.white-color path[stroke],
#works .inner .btn_box a:hover svg.white-color circle[stroke] {
  stroke: var(--color2);
}

@media screen and (max-width: 1900px) {
  #works .works_list {
    width: 80%;
  }
}

/* ------------------------------------------------- company -------------------------------------------------- */
#company {
  --company-padding: calc(var(--section-margin) * 1.4);
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: #fff;
}

/* 本体の background だと z-index 負の子より手前に描かれ写真が隠れるため、下敷きは ::before に */
#company::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: #050a14;
  pointer-events: none;
}

#company .title_box span:after {
  background: #fff;
}

#company .company_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* 高さは JS が画像比率から算出（入場=画像上端 / 退場=画像下端） */
  height: 145%;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}

#company .company_bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

#company:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

/*
 * FEATURE（.inner）を title_box より手前にしつつ、右リンクはクリック可能にする。
 * .inner は全幅のため、そのままでは背面の .btn_box a を塞ぐ → 透過して子だけ受け取る
 */
#company .inner {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

#company .inner .company_list,
#company .inner .btn_box {
  pointer-events: auto;
}

#company .title_box {
  z-index: 1;
}

#company .title_box .btn_box a {
  position: relative;
  z-index: 2;
}

/* PC：右 title（top: company-padding）と左 company_list の開始位置を揃える */
@media screen and (min-width: 769px) {
  #company {
    padding-top: var(--company-padding);
  }
}

#company .company_list {
  width: 50%;
  max-width: 560px;
}

/* 各 item を個別 scroll_view.wow で検出（親 stagger 一括付与は使わない） */
#company .company_list .item.scroll_view.wow {
  opacity: 0;
  -webkit-transform: translateY(1.25em);
  transform: translateY(1.25em);
  -webkit-transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

#company .company_list .item.scroll_view.wow.active,
#company .company_list .item.scroll_view.wow.is_in {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

#company .company_list .item:not(:last-child) {
  margin: 0 auto 70px;
}

#company .company_list .item .num {
  height: 60px;
  margin: 0 auto 2em 0;
}

#company .company_list .item .num svg {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}

/*
 * FEATURE: ラベルは左から → 数字は JS でカウントアップ（.is_on）
 * .yab_feature_play は各 .item の IntersectionObserver 入場時に付与
 */
#company .company_list .item .num .yab_feature_label {
  opacity: 0;
  -webkit-transform: translateX(-28px);
  transform: translateX(-28px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#company .company_list .item.yab_feature_play .num .yab_feature_label {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#company .company_list .item .num .yab_feature_digit {
  opacity: 0;
  -webkit-transform: translateY(-14px);
  transform: translateY(-14px);
  -webkit-transition: opacity 0.25s ease-out, -webkit-transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#company .company_list .item .num .yab_feature_digit.is_on {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

#company .company_list .item h3 {
  /* width: 60%;
  max-width: 350px;
  font-family: 'Noto Sans JP', sans-serif; */
  height: 150px;
  margin: 0 auto 1em 0;
}

#company .company_list .item h3 svg {
  display: block;
  /* width: 100%; */
  height: 100%;
  overflow: visible;
}

/* 見出し SVG: 一文字ずつ左からふわっと（clipPath 分割・字形は全文 path のまま） */
#company .company_list .item h3 .yab_feature_char {
  opacity: 0;
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#company .company_list .item h3 .yab_feature_char.is_on {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#company .company_list .item p {
  font-size: 0.95em;
  line-height: 2;
  margin: 0;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
  opacity: 0;
  -webkit-transform: translateY(0.75em);
  transform: translateY(0.75em);
  -webkit-transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

#company .company_list .item p.is_on {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* ---- COMPANY テスト用：写真背景向けエンボス（#company.neumorph のみ） ---- */
#company.neumorph::after {
  background:
    -webkit-radial-gradient(70% 28%,
      ellipse,
      rgba(0, 147, 219, 0.22) 0%,
      rgba(0, 147, 219, 0) 58%),
    -webkit-linear-gradient(top,
      rgba(5, 10, 20, 0.24) 0%,
      rgba(5, 10, 20, 0.24) 45%,
      rgba(5, 10, 20, 0.4) 100%);
  background:
    radial-gradient(ellipse at 70% 28%,
      rgba(0, 147, 219, 0.22) 0%,
      rgba(0, 147, 219, 0) 58%),
    linear-gradient(180deg,
      rgba(5, 10, 20, 0.24) 0%,
      rgba(5, 10, 20, 0.24) 45%,
      rgba(5, 10, 20, 0.4) 100%);
  box-shadow: inset 0 0 6em 1.5em rgba(0, 147, 219, 0.12);
}

#company.neumorph .title_box>span {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(0, 147, 219, 0.35);
}

/* タイトル：薄い青シャドウ（右寄せを崩さないよう display:block は付けない） */
#company.neumorph .title_box h2.title img {
  -webkit-filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 10px rgba(0, 147, 219, 0.4)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.55));
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 10px rgba(0, 147, 219, 0.4)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.55));
}

/* FEATURE：薄い青シャドウ */
#company.neumorph .company_list .item .num svg,
#company.neumorph .company_list .item h3 svg {
  -webkit-filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 8px rgba(0, 147, 219, 0.38));
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 8px rgba(0, 147, 219, 0.38));
}

#company.neumorph .company_list .item p {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(0, 147, 219, 0.22);
}

#company.neumorph .btn_box a {
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
}

#company.neumorph .btn_box a>svg {
  -webkit-filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 8px rgba(0, 147, 219, 0.32));
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 8px rgba(0, 147, 219, 0.32));
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
}

#company.neumorph .btn_box a:hover>svg {
  -webkit-filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 12px rgba(0, 147, 219, 0.55)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75));
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 12px rgba(0, 147, 219, 0.55)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75));
}

#company.neumorph .btn_box a:hover {
  -webkit-transform: translateX(0.15em);
  transform: translateX(0.15em);
}

@media screen and (max-width: 1024px) {
  #company .company_list {
    width: 65%;
    max-width: 640px;
  }
}

/* タブレット縦持ち（iPad 等） */
@media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  #company .company_bg img {
    object-position: 65%;
  }
}

/* ------------------------------------------------- news -------------------------------------------------- */
#news {
  /* --news-margin: calc(var(--section-margin) * 2); */
  position: relative;
  background: #e8e8e8;
  /* margin: -6px auto calc(var(--news-margin) * 2); */
  padding: var(--section-margin) var(--side-padding) 16vh;
}

/* #company 直下の波マスク（#news 上端） */
#news .wave_top {
  bottom: calc(100% - 1px);
}

/* #news:before,
#news:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

#news:before {
  height: 5vw;
  background-image: url("../img/news/news_wave_top.svg");
  background-position: bottom;
  bottom: calc(100% - 1px);
}

#news:after {
  height: calc(var(--news-margin) * 2);
  background-image: url("../img/news/news_wave_bottom.svg");
  background-position: top;
  top: calc(100% - 1px);
} */

#news .title_flex {
  gap: 4em;
  margin: 0 auto 4em;
}

#news .title_box {
  width: auto;
  margin: 0;
}

#news .news_nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.55em;
  padding-top: 0.35em;
}

#news .news_nav .news_nav_row {
  display: contents;
}

#news .news_nav .item {
  display: block;
  color: #1198c3;
  font-size: 0.875em;
  -webkit-transition: color 0.2s ease, -webkit-transform 0.2s ease;
  transition: color 0.2s ease, transform 0.2s ease;
}

#news .news_nav .item.column {
  color: #4f9f2f;
}

#news .news_nav .item span::before {
  content: "\2192";
  margin-right: 0.45em;
}

#news .news_nav .item:hover {
  color: #0093db;
  /* フォールバック */
  color: var(--color2);
  -webkit-transform: translateX(0.35em);
  transform: translateX(0.35em);
}

#news .news_nav .item.column:hover {
  color: #8dc21f;
  /* フォールバック */
  color: var(--color1);
}

#news .news_swiper {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: 0 46px;
}

#news .news_swiper:not(.swiper-initialized) {
  min-height: 18em;
}

#news .news_swiper:not(.swiper-initialized) .swiper-wrapper {
  width: 100%;
  max-width: 100%;
  gap: 0;
}

#news .news_swiper:not(.swiper-initialized) .swiper-slide {
  -webkit-flex: 0 0 calc(100% / 5);
  flex: 0 0 calc(100% / 5);
  width: calc(100% / 5);
  min-width: 0;
  max-width: calc(100% / 5);
}

#news .news_swiper.swiper-initialized .swiper-wrapper {
  gap: 0;
}

#news .news_swiper .swiper-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

#news .news_swiper .swiper-slide {
  width: auto;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin-right: 0 !important;
}

#news .news_swiper .item {
  --category-color: #00a0d6;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0.85em 0.9em 1em;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  -webkit-transition: color 0.2s ease, background 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease;
}


#news .news_swiper .item .title {
  line-height: 1.7;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.75em;
  min-height: calc(1.7em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#news .news_swiper .item:hover {
  color: #fff;
  background: var(--category-color);
}

#news .news_swiper .item:hover .title {
  color: #fff;
}

#news .news_swiper .item:hover .more svg {
  --more-color: #fff;
}

#news .news_swiper .item:hover .thumb .tag::after {
  background: #fff;
}

#news .news_swiper .item:hover .thumb .tag {
  color: var(--category-color);
}

#news .news_swiper .swiper-button-prev,
#news .news_swiper .swiper-button-next {
  width: 34px;
  height: 34px;
  color: #fff;
}

#news .news_swiper .swiper-button-prev {
  left: 0;
}

#news .news_swiper .swiper-button-next {
  right: 0;
}

#news .news_swiper .swiper-button-prev::after,
#news .news_swiper .swiper-button-next::after {
  font-size: 30px;
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(0, 147, 219, 0.3),
    0 0 18px rgba(0, 147, 219, 0.18);
}

#news .news_swiper .item .thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d6d6d6;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

#news .news_swiper .item .thumb.no_image {
  background: #d6d6d6;
}

#news .news_swiper .item .thumb .tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-block;
  color: #fff;
  font-size: 0.875em;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.45em 1.1em 0.45em 0.75em;
  max-width: 92%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#news .news_swiper .item .thumb .tag::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% + 1em);
  height: 100%;
  background: var(--category-color);
  -webkit-transform: skewX(-28deg);
  transform: skewX(-28deg);
  z-index: -1;
}

#news .news_swiper .item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#news .news_swiper .item .more {
  --more-color: var(--category-color);
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.85em;
}

#news .news_swiper .item .more svg {
  display: block;
  margin: 0 0 0 auto;
  height: 1em;
  width: auto;
}

#news .btn_box {
  margin: 4em 0 0 auto;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  padding: 0;
}

/* :after なしで谷間を白く見せる（旧 #news:after の代替） */
#news .wave_bottom {
  top: auto;
  bottom: 0;
  --wave-height: 6vh;
  z-index: 4;
  background: #fff;
}

@media screen and (max-width: 1280px) {
  #news .news_swiper {
    padding: 0 34px;
  }

  #news .news_swiper:not(.swiper-initialized) .swiper-wrapper {
    gap: 0;
  }

  #news .news_swiper:not(.swiper-initialized) .swiper-slide {
    -webkit-flex: 0 0 calc(100% / 3);
    flex: 0 0 calc(100% / 3);
    width: calc(100% / 3);
    max-width: calc(100% / 3);
  }
}

/* ---- SP（768px以下）---- */
@media screen and (max-width: 768px) {
  #top {
    margin: 0 auto calc(var(--section-margin) * 0.6);
  }

  #top .topics_ticker {
    top: auto;
    bottom: calc(var(--scroll-hint-lift, 1.25em) + var(--scroll-line-height, 4em) + 2.75em);
    left: 50%;
    right: auto;
    z-index: 9;
    width: calc(100% - 1.5em);
    max-width: calc(100% - 1.5em);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
  }

  /* 中央ロゴ（catch_text）と同じタイミングで表示 */
  #top:has(.text.active) .topics_ticker {
    -webkit-animation: yab_topics_ticker_in 0.9s ease-out 1.55s forwards;
    animation: yab_topics_ticker_in 0.9s ease-out 1.55s forwards;
  }

  #top .topics_ticker .topics_ticker_bar {
    gap: 0.55em 0.65em;
    padding: 0.5em 0.75em;
    min-height: 2.4em;
  }

  #top .topics_ticker .topics_ticker_label {
    font-size: 11px;
    padding: 0.15em 0.5em;
  }

  #top .topics_ticker .topics_ticker_date {
    font-size: 12px;
  }

  #top .topics_ticker .topics_ticker_title {
    font-size: 13px;
  }

  #top .topics_ticker .topics_ticker_link {
    gap: 0.5em;
  }

  #top .catalog_btn {
    top: auto;
    bottom: calc(var(--scroll-hint-lift, 1.25em) + var(--scroll-line-height, 4em) + 6em);
    left: auto;
    right: 0.75em;
    gap: 0.5em;
    opacity: 0;
  }

  #top:has(.text.active) .catalog_btn {
    -webkit-animation: yab_top_catalog_btn_in 0.9s ease-out 1.55s forwards;
    animation: yab_top_catalog_btn_in 0.9s ease-out 1.55s forwards;
  }

  #top .catalog_btn svg:first-child {
    width: 2.25em;
  }

  #top .catalog_btn svg:last-child {
    height: 2.5em;
  }

  #top .base {
    object-fit: cover;
    /* SP: 上下いっぱい（左右はクロップ可） */
    object-position: 70% center;
    /* 右の人物を優先。必要なら X を調整 */
  }

  #top .text {
    top: 5%;
    left: 50%;
    width: 30%;
    max-width: 100px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #top .catch_text {
    top: 44%;
    width: 72%;
    max-width: 280px;
  }

  /* ヒーロー SVG：縦書き黒・中央ロゴ白は共通ルール */
  #top .text .copy.main svg path,
  #top .text>svg path,
  #top.neumorph .text .copy.main svg path,
  #top.neumorph .text>svg path {
    fill: #111 !important;
  }

  /* SVG 内蔵の青グローと CSS filter が二重になるため、SP では内蔵側をオフ */
  #top.neumorph .catch_text .copy svg>g,
  #top.neumorph .catch_text>svg>g {
    -webkit-filter: none !important;
    filter: none !important;
  }

  #top {
    --scroll-line-height: 4em;
    --scroll-hint-lift: 1.25em;
  }

  #top .scroll_hint .label {
    width: 4em;
  }

  #info .main_flex {
    justify-content: center;
  }

  #info .main_flex .main {
    width: 100%;
  }

  #info .main_flex .main .img {
    margin: 0 auto calc(var(--section-margin));
  }

  #info .main_flex .top_text {
    right: auto;
    width: 80%;
    max-width: 400px;
    margin: 0 auto calc(var(--section-margin) * 2);
  }

  #info .sub_flex {
    margin-top: 4em;
    max-width: min(40em, 92vw);
  }

  #info .sub_flex .sub .absolute.core {
    padding: 14% 12%;
  }

  #info .sub_flex .sub h3 {
    width: 66%;
    margin-bottom: 1.2em;
  }

  #info .sub_flex .sub p {
    width: clamp(220px, 92vw, 320px);
    max-width: 100%;
    font-size: clamp(11px, 2.8vw, 14px);
  }

  #info .sub_flex .sub .core a.view_more svg {
    width: 42%;
    min-width: 7.5em;
  }

  #info .sub_flex .sub .core a.view_more .arrow_down {
    margin-top: 0.65em;
    width: 2px;
  }

  #info .sub_flex .sub .core a.view_more .arrow_down::before,
  #info .sub_flex .sub .core a.view_more .arrow_down::after {
    width: 2px;
  }

  /* #product .product_lattice の display:flex が .flex.pc より強いため明示切替 */
  #product .product_flex.product_lattice {
    display: none;
  }

  #product {
    overflow: visible;
    padding-bottom: calc(var(--section-margin) + 1em);
  }

  #product .product_swiper {
    display: block;
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: visible;
  }

  #product .product_swiper::before,
  #product .product_swiper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7%;
    max-width: 2.2em;
    z-index: 3;
    pointer-events: none;
  }

  #product .product_swiper::before {
    left: 0;
    background: #e8e8e8;
    background: -webkit-linear-gradient(90deg, #e8e8e8 0%, rgba(232, 232, 232, 0) 100%);
    background: linear-gradient(90deg, #e8e8e8 0%, rgba(232, 232, 232, 0) 100%);
  }

  #product .product_swiper::after {
    right: 0;
    background: #e8e8e8;
    background: -webkit-linear-gradient(270deg, #e8e8e8 0%, rgba(232, 232, 232, 0) 100%);
    background: linear-gradient(270deg, #e8e8e8 0%, rgba(232, 232, 232, 0) 100%);
  }

  #product .product_swiper .item .label {
    font-size: 1em;
  }

  /* soft SP：NEWS カードと同系（単一面・凸→アクティブで凹） */
  body.yab_top_soft #product.neumorph.soft .product_swiper {
    --product-circle: min(58vw, 16em);
    min-height: calc(var(--product-circle) * 1.15);
    padding-top: 0.55em;
    padding-bottom: 0.85em;
  }

  body.yab_top_soft #product.neumorph.soft .product_swiper .swiper-slide {
    width: auto;
    padding: 0 0.7em;
    box-sizing: border-box;
  }

  body.yab_top_soft #product.neumorph.soft .product_swiper .item {
    width: 100%;
    max-width: none;
    -webkit-transform: none;
    transform: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  body.yab_top_soft #product.neumorph.soft .product_swiper .swiper-slide-active .item {
    -webkit-transform: none;
    transform: none;
  }

  body.yab_top_soft #product.neumorph.soft .product_swiper .item .bubble_shell {
    position: relative;
    isolation: isolate;
    width: 100%;
    border-radius: 1em;
    overflow: visible;
    background: #e8e8e8;
    background: var(--yab_product_neo_bg);
    background-image: none;
    box-shadow:
      0.4em 0.4em 0.85em var(--yab_product_neo_shadow_dark),
      -0.4em -0.4em 0.85em var(--yab_product_neo_shadow_light),
      0 0 0 0 rgba(0, 147, 219, 0);
    -webkit-transition: background 0.4s ease, background-image 0.4s ease, box-shadow 0.4s ease;
    transition: background 0.4s ease, background-image 0.4s ease, box-shadow 0.4s ease;
  }

  body.yab_top_soft #product.neumorph.soft .product_swiper .item .bubble_shell::before {
    box-shadow:
      inset 0.45em 0.45em 0.9em var(--yab_product_neo_shadow_dark),
      inset -0.4em -0.4em 0.85em var(--yab_product_neo_shadow_light);
    opacity: 0;
  }

  body.yab_top_soft #product.neumorph.soft .product_swiper .swiper-slide-active .item .bubble_shell {
    background: #e8e8e8;
    background: var(--yab_product_neo_bg);
    background-image: none;
    box-shadow:
      0 0 0.15em rgba(197, 197, 197, 0),
      0 0 0.15em rgba(255, 255, 255, 0),
      0 0 0 0.18em rgba(0, 147, 219, 0.2);
  }

  body.yab_top_soft #product.neumorph.soft .product_swiper .swiper-slide-active .item .bubble_shell::before {
    opacity: 1;
  }

  #product .btn_box {
    width: 100%;
    margin: 2em 0 0 auto;
    padding: 0 var(--side-padding) 1em;
    gap: 2em;
    z-index: 5;
  }

  #works .works_list {
    width: 100%;
  }

  #works .works_list .item {
    --gap: 0;
    flex-wrap: wrap;
    padding: 0 1em;
    margin: 0 auto 2em;
  }

  #works .works_list .item:not(:last-child) {
    margin: 0 auto 2em;
  }

  #works .works_list .item .img {
    width: 100%;
  }

  #works .works_list .item .text {
    width: 100%;
    margin: -1em auto 0;
  }

  #works.neumorph .works_list .item {
    --img-width: 100%;
    --gap: 0;
    padding: 1.1em 1.2em 1.25em;
  }

  #works.neumorph .works_list .item .img {
    width: 100%;
  }

  #works.neumorph .works_list .item .img .bg {
    aspect-ratio: 16 / 10;
  }

  #works.neumorph .works_list .item .text {
    width: 100%;
    margin: 0.85em auto 0;
    padding-top: 0;
  }

  #company .company_list {
    width: 100%;
  }

  .btn_box.company_flex {
    width: 100%;
    max-width: inherit;
    margin: calc(var(--section-margin) * 2) 0 0 auto;
  }

  #news .title_flex {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2em;
    margin-bottom: 2.5em;
  }

  #news .news_nav {
    min-width: 0;
    width: 100%;
    padding-top: 0;
    gap: 0.85em;
  }

  #news .news_nav .news_nav_row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 1em;
  }


  #news .news_nav .news_nav_row .item span {
    word-break: keep-all;
    line-break: strict;
  }

  #news .news_swiper {
    padding: 0.85em 0;
    overflow: visible;
  }

  #news .news_swiper:not(.swiper-initialized) .swiper-wrapper {
    gap: 0;
  }

  #news .news_swiper:not(.swiper-initialized) .swiper-slide {
    -webkit-flex: 0 0 calc(100% / 1.2);
    flex: 0 0 calc(100% / 1.2);
    width: calc(100% / 1.2);
    max-width: calc(100% / 1.2);
  }

  #news .news_swiper .swiper-button-prev,
  #news .news_swiper .swiper-button-next {
    display: none;
  }
}