/* ---- gradation（global: ページ全体中央の左右ブロブ / local: セクション内手動） ---- */
.gradation,
.gradation * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ページ全体（main 直下・DOM は末尾・表示は absolute で背面） */
main>.gradation.global {
  --grad-set-step: 300vh;
  --grad-footer-gap: clamp(120px, 20vh, 260px);
  --grad-mask-top-fade: 5%;
  --grad-mask-bottom-fade: 95%;
  --grad-blob1-y: -85%;
  --grad-blob2-y: -15%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--grad-footer-gap));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: -webkit-linear-gradient(top,
      transparent 0%,
      #000 var(--grad-mask-top-fade),
      #000 var(--grad-mask-bottom-fade),
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      #000 var(--grad-mask-top-fade),
      #000 var(--grad-mask-bottom-fade),
      transparent 100%);
}

main>.gradation.global .gradation_set {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main>.gradation.global.multi .gradation_set {
  height: var(--grad-set-h, var(--grad-set-step));
  top: var(--grad-set-top, calc(var(--grad-set-index, 0) * var(--grad-set-step)));
}

main>.gradation.global.compact .gradation_set {
  height: 100%;
  top: 0;
}

main>.gradation.global .grad {
  --grad-overlap: 5%;
  --grad-parallax-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  display: block;
  width: auto;
  height: clamp(480px, 130vh, 1700px);
  max-height: none;
  bottom: auto;
  object-fit: contain;
  object-position: center center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

main>.gradation.global .grad.blob1 {
  -webkit-transform: translate(calc(-100% + var(--grad-overlap)), var(--grad-blob1-y)) translate3d(0, var(--grad-parallax-y), 0);
  transform: translate(calc(-100% + var(--grad-overlap)), var(--grad-blob1-y)) translate3d(0, var(--grad-parallax-y), 0);
  opacity: 0.4;
  z-index: 1;
}

main>.gradation.global .grad.blob2 {
  -webkit-transform: translate(calc(0% - var(--grad-overlap)), var(--grad-blob2-y)) translate3d(0, var(--grad-parallax-y), 0);
  transform: translate(calc(0% - var(--grad-overlap)), var(--grad-blob2-y)) translate3d(0, var(--grad-parallax-y), 0);
  opacity: 0.35;
  z-index: 0;
}

@media screen and (min-width: 769px) {
  main>.gradation.global.compact {
    --grad-blob1-y: -58%;
    --grad-blob2-y: -42%;
  }

  main>.gradation.global.compact .grad {
    height: clamp(300px, 52vh, 620px);
    max-width: 42vw;
  }

  main>.gradation.global.compact .grad.blob1 {
    left: -6%;
    right: auto;
    -webkit-transform: translateY(var(--grad-blob1-y)) translate3d(0, var(--grad-parallax-y), 0);
    transform: translateY(var(--grad-blob1-y)) translate3d(0, var(--grad-parallax-y), 0);
  }

  main>.gradation.global.compact .grad.blob2 {
    left: auto;
    right: -6%;
    -webkit-transform: translateY(var(--grad-blob2-y)) translate3d(0, var(--grad-parallax-y), 0);
    transform: translateY(var(--grad-blob2-y)) translate3d(0, var(--grad-parallax-y), 0);
  }
}

/* 手動配置（message 等・セクション内） */
section:has(.gradation.local) {
  isolation: isolate;
}

section .gradation.local {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  z-index: 0;
  overflow: visible;
}

section:has(.gradation.local)>*:not(.gradation) {
  position: relative;
  z-index: 1;
}

section .gradation.local .grad {
  --grad-overlap: 2%;
  --grad-parallax-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  display: block;
  width: auto;
  height: clamp(360px, 65vh, 820px);
  max-width: 50%;
  bottom: auto;
  object-fit: contain;
  object-position: center center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

section .gradation.local .grad.blob1 {
  -webkit-transform: translate(calc(-100% + var(--grad-overlap)), -50%) translate3d(0, var(--grad-parallax-y), 0);
  transform: translate(calc(-100% + var(--grad-overlap)), -50%) translate3d(0, var(--grad-parallax-y), 0);
  opacity: 0.4;
}

section .gradation.local .grad.blob2 {
  -webkit-transform: translate(calc(0% - var(--grad-overlap)), -50%) translate3d(0, var(--grad-parallax-y), 0);
  transform: translate(calc(0% - var(--grad-overlap)), -50%) translate3d(0, var(--grad-parallax-y), 0);
  opacity: 0.35;
}

@media screen and (max-width: 768px) {
  main>.gradation.global {
    --grad-blob1-y: -92%;
    --grad-blob2-y: -8%;
  }

  main>.gradation.global .grad {
    height: clamp(320px, 62vh, 560px);
    max-width: 80vw;
  }

  section .gradation.local .grad {
    height: clamp(260px, 55vh, 480px);
    max-width: 62%;
  }

  main>.gradation.global .grad.blob1 {
    -webkit-transform: translate(calc(-100% + var(--grad-overlap)), var(--grad-blob1-y)) translate3d(0, var(--grad-parallax-y), 0);
    transform: translate(calc(-100% + var(--grad-overlap)), var(--grad-blob1-y)) translate3d(0, var(--grad-parallax-y), 0);
    opacity: 0.15;
  }

  main>.gradation.global .grad.blob2 {
    -webkit-transform: translate(calc(0% - var(--grad-overlap)), var(--grad-blob2-y)) translate3d(0, var(--grad-parallax-y), 0);
    transform: translate(calc(0% - var(--grad-overlap)), var(--grad-blob2-y)) translate3d(0, var(--grad-parallax-y), 0);
    opacity: 0.15;
  }
}

/* ------------------------------------------------------------------- message ------------------------------------------------------------------- */

#message .inner {
  margin: var(--content-margin) auto 0;
}

#message .split_box {
  position: relative;
}

#message .split_box .text {
  width: 100%;
  min-width: 300px;
}

#message .split_box .text>*:not(:last-child) {
  margin: 0 auto 4em;
}

#message .split_box .text h3 img,
#message .split_box .text h3 svg {
  display: block;
  width: 492px;
  max-width: 100%;
  height: auto;
}

#message .split_box .text p {
  line-height: 200%;
  /* text-shadow: 0px 0px 2px #e8e8e8; */
}

#message .split_box .name_box {
  gap: 2em;
}

#message .split_box .name_box .name {
  -webkit-flex: 0 0 calc(50% - 1em);
  flex: 0 0 calc(50% - 1em);
  width: calc(50% - 1em);
  min-width: 0;
}

#message .split_box .name_box .name>*:not(:last-child) {
  margin: 0 0 1.5em;
}

#message .split_box .name_box .name img,
#message .split_box .name_box .name svg {
  --img-height: 3em;
  display: block;
  width: auto;
}

#message .split_box .name_box .name img:nth-child(1),
#message .split_box .name_box .name svg:nth-child(1) {
  height: var(--img-height);
}

#message .split_box .name_box .name img:nth-child(2),
#message .split_box .name_box .name svg:nth-child(2) {
  height: calc(var(--img-height) / 2);
}

#message .split_box .name_box .name img:nth-child(3),
#message .split_box .name_box .name svg:nth-child(3) {
  height: calc(var(--img-height) * 3 / 3);
}

#message .split_box .name_box .img {
  -webkit-flex: 0 0 calc(50% - 1em);
  flex: 0 0 calc(50% - 1em);
  width: calc(50% - 1em);
}

#message .split_box .name_box .img img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  #message .split_box .text {
    width: 100%;
  }

  #message .split_box .name_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 1.5em;
  }

  #message .split_box .name_box .img {
    -webkit-order: 1;
    order: 1;
    -webkit-flex: none;
    flex: none;
    width: 100%;
  }

  #message .split_box .name_box .name {
    -webkit-order: 2;
    order: 2;
    -webkit-flex: none;
    flex: none;
    width: 100%;
  }
}


/* ------------------------------------------------------------------- philosophy ------------------------------------------------------------------- */

#philosophy .inner {
  margin: var(--content-margin) auto 0;
}

#philosophy .split_box {
  position: relative;
  width: 50%;
  min-width: 300px;
}


#philosophy .split_box h3 svg {
  display: block;
  max-width: 100%;
  height: auto;
}

#philosophy .split_box .philosophy_svg_sp {
  display: none;
}

@media screen and (max-width: 768px) {
  #philosophy .split_box .philosophy_svg_pc {
    display: none;
  }

  #philosophy .split_box .philosophy_svg_sp {
    display: block;
  }
}

#policy .tac img,
#policy .inner > .tac .policy_svg_pc,
#policy .inner > .tac .policy_svg_sp {
  display: block;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
}

#policy .inner > .tac .policy_svg_pc svg,
#policy .inner > .tac .policy_svg_sp svg {
  display: block;
  width: 100%;
  height: auto;
}

#policy .inner > .tac .policy_svg_sp {
  display: none;
}

@media screen and (max-width: 768px) {
  #policy .inner > .tac .policy_svg_pc {
    display: none;
  }

  #policy .inner > .tac .policy_svg_sp {
    display: block;
  }
}

#philosophy .split_box .text>*:not(:last-child) {
  margin: 0 auto 2em;
}

#philosophy .split_box .text p {
  line-height: 200%;
}

@media screen and (max-width: 768px) {
  #philosophy .split_box {
    width: 100%;
  }

  #philosophy .split_box .text p {
    line-height: 180%;
  }
}

/* ------------------------------------------------------------------- policy ------------------------------------------------------------------- */

#policy .inner {
  margin: var(--content-margin) auto 0;
}

#policy .inner>*:not(:last-child) {
  margin: 0 auto 4em;
}

#policy .oct_box {
  --num: 3;
  --gap: 5em;
  gap: var(--gap);
}

#policy .oct_box .item {
  width: calc((100% - (var(--num) - 1) * var(--gap)) / var(--num));
  text-align: center;
}

#policy .oct_box .item .oct {
  position: relative;
}

#policy .oct_box .item .oct:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 90%;
  aspect-ratio: 1 / 1;
  background-image: url("../img/company/oct.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}

/* oct_shape はニューモ専用（通常テンプレでは :before の oct.svg のみ） */
#policy .oct_box .item .oct .oct_shape {
  display: none;
}

#policy .oct_box .item .oct svg:not(.oct_shape) {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

#policy .inner > .tac {
  scroll-margin-top: calc(var(--header-height, 72px) + 1em);
}


#policy .oct_box .item p {
  margin: 1em auto 0;
}


@media screen and (max-width: 768px) {
  #policy .oct_box {
    --num: 2;
    --gap: 2em;
  }

  #policy .oct_box .item .oct {
    width: 80%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  #policy .oct_box {
    --num: 1;
  }
}

/* ------------------------------------------------------------------- company_profile ------------------------------------------------------------------- */

#company_profile .inner {
  margin: var(--content-margin) auto 0;
}


#company_profile .profile_box .intro {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 3em;
  margin: 0 auto 4em;
}

#company_profile .profile_box .intro .text {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#company_profile .profile_box .intro .text p {
  line-height: 2;

  font-weight: 700;
}

#company_profile .profile_box .intro .img {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#company_profile .profile_box .intro .img img {
  display: block;
  width: 100%;
  height: auto;
}

#company_profile .company_detail {
  width: 612px;
}

#company_profile .company_detail h3 {

  font-weight: 700;
  font-size: 1.8em;
  line-height: 1.4;
  padding: 0 0 0.4em;
  margin: 0 auto 2em;
  border-bottom: 3px solid #111;
}

#company_profile .company_detail .detail .row {
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 2em;
}

#company_profile .company_detail .detail .row:not(:last-child) {
  margin: 0 auto 1.5em;
}

#company_profile .company_detail .detail dt {
  width: 8em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;

  font-weight: 700;
}

#company_profile .company_detail .detail dd {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;

  font-weight: 700;
}

#company_profile .company_detail .detail dd p:not(:last-child) {
  margin: 0 auto 0.5em;
}

@media screen and (max-width: 768px) {
  #company_profile .profile_box {
    padding: 0;
  }

  #company_profile .profile_box .intro {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2em;
    margin: 0 auto 3em;
  }

  #company_profile .profile_box .intro .text,
  #company_profile .profile_box .intro .img {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    min-width: 0;
  }

  #company_profile .company_detail {
    width: 100%;
  }

  #company_profile .company_detail .detail .row {
    gap: 1em;
  }

  #company_profile .company_detail .detail dt {
    width: 5em;
  }
}

/* ------------------------------------------------------------------- company_profile / network ------------------------------------------------------------------- */

#network .inner {
  margin: var(--content-margin) auto 0;
}


#network .network_list .item:not(:last-child) {
  margin: 0 auto 4em;
}

#network .network_list .item .head {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 3em;
}

#network .network_list .item .info {
  width: calc(42% - 1.5em);
  -webkit-flex: 0 0 calc(42% - 1.5em);
  flex: 0 0 calc(42% - 1.5em);
  min-width: 0;
}

#network .network_list .item .info h3 {

  font-weight: 700;
  font-size: 1.8em;
  line-height: 1.4;
  padding: 0 0 0.4em;
  margin: 0 auto 1.5em;
  border-bottom: 3px solid #111;
}

#network .network_list .item .info .detail .row {
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 1.5em;
}

#network .network_list .item .info .detail .row:not(:last-child) {
  margin: 0 auto 1.5em;
}

#network .network_list .item .info .detail dt {
  width: 4.5em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;

  font-weight: 700;
}

#network .network_list .item .info .detail dd {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

#network .network_list .item .info .detail dd p:not(:last-child) {
  margin: 0 auto 0.5em;
}

#network .network_list .item .visual {
  width: calc(58% - 1.5em);
  -webkit-flex: 1 1 calc(58% - 1.5em);
  flex: 1 1 calc(58% - 1.5em);
  min-width: 0;
}

#network .network_list .item .visual .swiper {
  aspect-ratio: 4 / 3;
}

#network .network_list .item .visual .swiper .swiper-slide {
  position: relative;
}

#network .network_list .item .visual .swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#network .network_list .item .visual .swiper .caption {
  position: absolute;
  top: 0.75em;
  right: 0.75em;
  padding: 0.35em 0.75em;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.4;
}

#network .network_list .item .visual>img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#network .network_list .item .map_box {
  margin: 2em auto 0;
}

#network .network_list .item .map_box .map_embed,
#network .network_list .item .visual .map_embed {
  width: 100%;
}

#network .network_list .item .map_box .map_embed iframe,
#network .network_list .item .visual .map_embed iframe {
  display: block;
  width: 100%;
  min-height: 280px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

#network .network_list .map_placeholder {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 280px;
  background: #d9d9d9;
  color: #111;

  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.1em;
}

#network .network_list .item.map_side .visual .map_placeholder {
  min-height: 0;
  height: 100%;
  aspect-ratio: 4 / 3;
}

#network .network_list .item.special .info .lead {
  line-height: 1.8;
  margin: 0 auto 2em;
}

#network .network_list .item.special .view_btn {
  gap: 0.75em;
  color: #111;
  text-decoration: none;
}

#network .network_list .item.special .view_btn .icon {
  display: block;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: var(--theme-color);
  background: #8dc21f;
  position: relative;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#network .network_list .item.special .view_btn .icon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0.45em;
  height: 0.45em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

#network .network_list .item.special .view_btn .label {
  font-weight: 700;
}

#network .network_list .item.special .view_btn .text {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  #network .network_list .item .head {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2em;
  }

  #network .network_list .item .info,
  #network .network_list .item .visual {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    min-width: 0;
  }

  #network .network_list .map_placeholder {
    min-height: 200px;
    font-size: 1.5em;
  }
}

/* ------------------------------------------------------------------- company_profile / history ------------------------------------------------------------------- */

#history .inner {
  margin: var(--content-margin) auto 0;
}


/* 沿革：年グループ（見た目は中の .item に委ねる） */
#history .history_list .history_year_group {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#history .history_list .item {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 1em;
}

#history .history_list .item:not(:last-child) {
  margin: 0 auto 1em;
}

#history .history_list .item.new_year {
  margin-top: 2.5em;
}

#history .history_list .item.new_year:first-child {
  margin-top: 0;
}

#history .history_list .item .year {
  width: 5.5em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;

  font-weight: 700;
}

#history .history_list .item .month {
  width: 3em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;

  font-weight: 700;
}

#history .history_list .item .year,
#history .history_list .item .month {
  margin: 0;
}

#history .history_list .item .year span,
#history .history_list .item .month span {
  display: inline;
  position: static;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

#history .history_list .item .year span:after,
#history .history_list .item .month span:after {
  content: none;
}

#history .history_list .item .content {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;

  font-weight: 700;
}

#history .history_list .item .content p {
  line-height: 1.8;
}

#history .history_list .item .content .img {
  max-width: 300px;
  margin: 1em 0 0;
}

#history .history_list .item .content .img.imgs {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.75em;
  max-width: none;
}

#history .history_list .item .content .img img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}

#history .history_list .item .content .img.imgs img {
  max-width: 300px;
}

@media screen and (max-width: 768px) {
  #history .history_list .item {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.35em 0.5em;
  }

  #history .history_list .item:not(:last-child) {
    margin: 0 auto;
    padding-bottom: 0.55em;
    border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  }

  #history .history_list .item:has(+ .item.new_year) {
    padding-bottom: 0.75em;
    border-bottom: none;
  }

  #history .history_list .item.new_year {
    margin-top: 3em;
  }

  #history .history_list .item.new_year:not(:first-child) {
    padding-top: 0.5em;
  }

  #history .history_list .item.new_year:first-child {
    margin-top: 0;
  }

  #history .history_list .item.new_year .year {
    margin-bottom: 0.1em;
    padding-bottom: 0.45em;
    border-bottom: 1px solid rgba(0, 147, 219, 0.22);
    border-bottom: 1px solid color-mix(in srgb, var(--color2) 22%, transparent);
  }

  #history .history_list .item:not(.new_year) {
    padding-top: 0.15em;
  }

  #history .history_list .item .year {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    font-size: 1.25em;
    color: #0093db;
    color: var(--color2);
  }

  #history .history_list .item .year:empty {
    display: none;
  }

  #history .history_list .item .month {
    width: 2.75em;
    -webkit-flex: 0 0 2.75em;
    flex: 0 0 2.75em;
  }

  #history .history_list .item.new_year .month:empty {
    display: none;
  }

  #history .history_list .item.new_year:has(.month:empty) .content {
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  #history .history_list .item .content {
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }

  #history .history_list .item .content p {
    line-height: 1.55;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-line-break: strict;
    line-break: strict;
  }
}

/* ------------------------------------------------------------------- group ------------------------------------------------------------------- */

#group .inner {
  margin: var(--content-margin) auto 0;
}


#group .group_top .intro {
  --intro-text-width: 300px;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 3em;
  margin: 0 auto 4em;
}

#group .group_top .intro .text {
  width: var(--intro-text-width);
  max-width: var(--intro-text-width);
  -webkit-flex: 0 0 var(--intro-text-width);
  flex: 0 0 var(--intro-text-width);
  min-width: 0;
}

#group .group_top .intro .text p {
  line-height: 2;

  font-weight: 700;
}

#group .group_top .intro .img {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
}

/* 紹介画像：同一画像を4枚重ね、縦1/4ずつ clip して左から stagger 表示 */
#group .group_top .intro .img .intro_split {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#group .group_top .intro .img .intro_split .panel {
  margin: 0;
  overflow: hidden;
}

#group .group_top .intro .img .intro_split .panel:first-child {
  position: relative;
  z-index: 1;
}

#group .group_top .intro .img .intro_split .panel:not(:first-child) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#group .group_top .intro .img .intro_split .panel:nth-child(1) {
  z-index: 1;
  -webkit-clip-path: inset(0 75% 0 0);
  clip-path: inset(0 75% 0 0);
}

#group .group_top .intro .img .intro_split .panel:nth-child(2) {
  z-index: 2;
  -webkit-clip-path: inset(0 50% 0 25%);
  clip-path: inset(0 50% 0 25%);
}

#group .group_top .intro .img .intro_split .panel:nth-child(3) {
  z-index: 3;
  -webkit-clip-path: inset(0 25% 0 50%);
  clip-path: inset(0 25% 0 50%);
}

#group .group_top .intro .img .intro_split .panel:nth-child(4) {
  z-index: 4;
  -webkit-clip-path: inset(0 0 0 75%);
  clip-path: inset(0 0 0 75%);
}

#group .group_top .intro .img .intro_split .panel img,
#group .group_top .intro .img .photo_placeholder {
  width: 100%;
}

#group .group_top .intro .img .intro_split .panel img {
  display: block;
  width: 100%;
  height: auto;
}

#group .group_top .intro .img .intro_split .panel:not(:first-child) img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#group .group_top .intro .img .photo_placeholder {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #d9d9d9;
  color: #111;
  font-weight: 700;
  font-size: 2em;
}

#group_list {
  position: relative;
  z-index: 1;
  padding-top: 0;
}

#group_list .inner {
  margin: 0 auto;
  padding: 0 0 var(--section-margin);
}


#group_list .group_company:not(:last-child) {
  margin: 0 auto 4em;
}

#group_list .group_company h3 {

  font-weight: 700;
  font-size: 1.8em;
  line-height: 1.4;
  padding: 0 0 0.4em;
  margin: 0 auto 2em;
  border-bottom: 3px solid #111;
}

#group_list .group_company .detail .row {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 2em;
}

#group_list .group_company .detail .row:not(:last-child) {
  margin: 0 auto 1.5em;
}

#group_list .group_company .detail .label {
  width: 8em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;

  font-weight: 700;
}

#group_list .group_company .detail .value {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;

  font-weight: 700;
}

#group_list .group_company .detail .value p:not(:last-child) {
  margin: 0 auto 0.5em;
}

#group_list .group_company .detail .value a {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
}

#group_list .group_company .office {
  margin: 3em auto 0;
}

#group_list .group_company .office h4 {

  font-weight: 700;
  font-size: 1.4em;
  margin: 0 auto 1.5em;
}

#group_list .group_company .office .head {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 3em;
}

#group_list .group_company .office .info {
  width: calc(42% - 1.5em);
  -webkit-flex: 0 0 calc(42% - 1.5em);
  flex: 0 0 calc(42% - 1.5em);
  min-width: 0;
}

#group_list .group_company .office .info .detail .label {
  width: 4.5em;
}

#group_list .group_company .office .info .detail .row {
  gap: 1.5em;
}

#group_list .group_company .office .visual {
  width: calc(58% - 1.5em);
  -webkit-flex: 1 1 calc(58% - 1.5em);
  flex: 1 1 calc(58% - 1.5em);
  min-width: 0;
}

#group_list .group_company .office .visual img {
  display: block;
  width: 100%;
  /* aspect-ratio: 4 / 3; */
  object-fit: cover;
  background: #d9d9d9;
}

#group_list .group_company .office .visual .swiper {
  aspect-ratio: 4 / 3;
}

#group_list .group_company .office .visual .swiper .swiper-slide {
  position: relative;
}

#group_list .group_company .office .visual .swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #d9d9d9;
}

#group_list .group_company .map_box {
  margin: 2em auto 0;
}

#group_list .group_company .map_box .map_embed {
  width: 100%;
}

#group_list .group_company .map_box .map_embed iframe {
  display: block;
  width: 100%;
  min-height: 280px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

#group_list .group_company .map_placeholder {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 280px;
  background: #d9d9d9;
  color: #111;

  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
  #group .group_top .intro {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2em;
    margin: 0 auto 3em;
  }

  #group .group_top .intro .text {
    width: 100%;
    max-width: var(--intro-text-width);
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  #group .group_top .intro .img {
    width: 100%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: none;
  }

  #group_list .group_company .office .head {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2em;
  }

  #group_list .group_company .office .info,
  #group_list .group_company .office .visual {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #group_list .group_company .detail .label {
    width: 6em;
  }

  #group_list .group_company .map_placeholder {
    min-height: 200px;
    font-size: 1.5em;
  }
}

/* ------------------------------------------------------------------- csr ------------------------------------------------------------------- */
#natural_disaster .title_box h2.title.two_lines {
  height: auto;
  max-height: none;
  min-height: 0;
}

#natural_disaster .title_box h2.title.two_lines img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(26vw, 264px);
  max-width: 1140px;
  object-fit: contain;
  object-position: left center;
}

#natural_disaster .title_box h2.title.two_lines svg {
  display: block;
  width: auto;
  height: min(26vw, 264px);
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  #natural_disaster .title_box h2.title.two_lines img {
    max-height: min(38vw, 220px);
  }
  #natural_disaster .title_box h2.title.two_lines svg {
    height: min(38vw, 220px);
  }
}

#eco_action21 .inner,
#for_community .inner {
  margin: var(--content-margin) auto 0;
}

.csr_box {
  --text-width: 50%;
  --gap: 3em;
  gap: var(--gap);
}

.csr_box .text {
  width: var(--text-width);
}

#for_community .lead,
#for_community .csr_item .text p {
  line-height: 2;

  font-weight: 700;
}

.csr_box .btn_box {
  width: calc(100% - var(--text-width) - var(--gap));
  margin: 0 auto;
}


.csr_box .btn_box a svg {
  --height: 3.2vw;
}

@media screen and (max-width: 1200px) {
  .csr_box {
    --text-width: 55%;
    --gap: 0.5em;
  }

  .csr_box .btn_box {
    width: auto;
    margin: 0 0 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .csr_box {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2em;
  }

  .csr_box .text,
  .csr_box .btn_box {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    min-width: 0;
  }

  .csr_box .btn_box {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin: 0;
  }
}

#for_community .lead {
  margin: 0 auto 3em;
}

#for_community .csr_item:not(:last-child) {
  margin: 0 auto 4em;
}

#for_community .csr_item .head {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 3em;
}

#for_community .csr_item .text {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#for_community .csr_item .text h3 {

  font-weight: 700;
  font-size: 2em;
  line-height: 1.6;
  margin: 0 auto 0.5em;
}

#for_community .csr_item .text p {
  margin: 0;
}

#for_community .csr_item .visual {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#for_community .photo_grid {
  --gap: 1.5em;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: var(--gap);
  margin: 2em auto 0;
  width: 100%;
}

#for_community .photo_grid .photo_item {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
}

#for_community .photo_grid .photo_placeholder {
  overflow: hidden;
}

#for_community .photo_placeholder {
  display: block;
  aspect-ratio: 4 / 3;
  background: #fff;
}

#for_community .photo_placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#for_community .photo_grid .caption {
  margin: 0.75em 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.5;
  text-align: center;
}

@media screen and (max-width: 768px) {

  #for_community .csr_item .text h3 {
    font-size: 1.8em;
  }

  .csr_box,
  #for_community .csr_item .head {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2em;
  }

  #for_community .csr_item .text,
  #for_community .csr_item .visual {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    min-width: 0;
  }

  .csr_box .btn_box {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }

  .csr_box .btn_box a svg {
    --height: 6.5vw;
  }

  #for_community .photo_grid {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #for_community .photo_grid .photo_item {
    -webkit-flex: 0 0 calc((100% - 1.5em) / 2);
    flex: 0 0 calc((100% - 1.5em) / 2);
    width: calc((100% - 1.5em) / 2);
  }

  #for_community .photo_grid .caption {
    font-size: 0.9em;
  }
}

@media screen and (max-width: 480px) {
  #for_community .photo_grid .photo_item {
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
  }
}

/* ------------------------------------------------------------------- sponsor ------------------------------------------------------------------- */
#sponsor .inner {
  margin: var(--content-margin) auto 0;
}

#sponsor .main_box {
  margin: 0 auto 4em;
}


#sponsor .news_box {
  margin: 0 auto 5em;
}

#sponsor .news_box .news_title {
  font-weight: 700;
  font-size: 2.4em;
  margin: 0 auto 0.5em;
}

#sponsor .news_list {
  margin: 0 auto 2em;
}

#sponsor .news_list .item:not(:last-child) {
  margin: 0 auto 1em;
}

#sponsor .news_list .item a {
  padding: 1.25em 1.5em;
  background: #fff;
  color: #111;
  font-weight: 700;
  transition: all 0.2s ease;
}

#sponsor .news_list .item a:hover {
  color: #fff;
  background: var(--color2);
}

#sponsor .news_list .item time {
  width: 6.5em;
}

#sponsor .news_list .item .title {
  line-height: 1.6;
}

#sponsor .news_box .view_link_box {
  margin: 0;
}

#sponsor .player_box {
  margin: 0 auto;
}

#sponsor .player_box:not(:last-child) {
  margin: 0 auto 4em;
}

#sponsor .player_area {
  margin: 0 auto;
}

#sponsor .player_panels {
  position: relative;
}

#sponsor .player_panel:not([hidden]) {
  position: relative;
  z-index: 1;
}

#sponsor .player_head {
  margin: 0 auto 3em;
}

#sponsor .player_tabs {
  position: relative;
  min-height: clamp(5rem, 12vw, 9.5rem);
}

#sponsor .player_tab {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: #bbb;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#sponsor .player_tab[aria-pressed="true"] {
  color: #111;
  z-index: 2;
}

#sponsor .player_tab[aria-pressed="false"] {
  color: #bbb;
  z-index: 1;
}

#sponsor .player_tab:focus,
#sponsor .player_tab:focus-visible {
  color: #0093db;
  color: var(--color2);
  z-index: 3;
  outline: none;
}

#sponsor .player_tab.sports_tab {
  position: relative;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  width: 58%;
  max-width: 520px;
}

#sponsor .player_tab.talent_tab {
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  width: 52%;
  max-width: 480px;
}

#sponsor .player_tab .nav_label {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: 0.06em;
}

#sponsor .player_tab .nav_label.left:before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5em);
  width: 3.5em;
  height: 2px;
  background: currentColor;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

#sponsor .player_tab .nav_label.right:after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 0.5em);
  width: 3.5em;
  height: 2px;
  background: currentColor;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

#sponsor .player_tab .title {
  display: block;
  width: 100%;
  line-height: 0;
}

#sponsor .player_tab.sports_tab .title {
  text-align: left;
}

#sponsor .player_tab.talent_tab .title {
  text-align: right;
}

#sponsor .player_tab .title svg {
  display: block;
  height: auto;
  max-height: clamp(4.5rem, 11vw, 9rem);
  width: auto;
}

#sponsor .player_tab.sports_tab .title svg {
  margin: 0 auto 0 0;
}

#sponsor .player_tab.talent_tab .title svg {
  margin: 0 0 0 auto;
}

#sponsor .player_tab .title svg path {
  fill: currentColor;
  -webkit-transition: fill 0.2s ease;
  transition: fill 0.2s ease;
}

#sponsor .player_panel[hidden] {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

/* stagger が子へ visibility:visible を付けるため、子孫も強制で隠す */
#sponsor .player_panel[hidden] * {
  visibility: hidden !important;
}

#sponsor .player_category {
  font-weight: 700;
  font-size: 1.6em;
  padding: 0 0 0.4em;
  border-bottom: 3px solid #111;
}

#sponsor .player_list .player_item {
  margin: 4em auto 0;
}

#sponsor .player_item {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 3em;
}

#sponsor .player_item .visual {
  width: 42%;
  -webkit-flex: 0 0 42%;
  flex: 0 0 42%;
  min-width: 0;
}

#sponsor .player_item .info {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

#sponsor .player_item .info h4 {
  font-weight: 700;
  font-size: 1.4em;
  margin: 0 auto 1em;
}

#sponsor .player_item .info h4 span {
  display: block;
  margin: 0.35em auto 0;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#sponsor .player_item .info p {
  font-weight: 700;
  margin: 0 auto 1.5em;
}

/* ---- プロフィール表（所属・出身地・生年月日 / メンバー表） ---- */
#sponsor .player_item .info .detail_table,
#sponsor .player_item .info .extra .member_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  margin: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

#sponsor .player_item .info .extra .member_table th,
#sponsor .player_item .info .extra .member_table td {
  font-weight: 700;
  padding: 0.95em 0 0.95em 1.15em;
  border: none;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  text-align: left;
  vertical-align: middle;
  line-height: 1.55;
  background: transparent;
}

#sponsor .player_item .info .extra .member_table tr:first-child th,
#sponsor .player_item .info .extra .member_table tr:first-child td {
  border-top: 2px solid #111;
}

#sponsor .player_item .info .extra .member_table tr:last-child th,
#sponsor .player_item .info .extra .member_table tr:last-child td {
  border-bottom: 2px solid #111;
}

#sponsor .player_item .info .detail_table th,
#sponsor .player_item .info .extra .member_table th:not(.member_name) {
  position: relative;
  width: 7.5em;
  padding-left: 1.35em;
  color: #111;
  white-space: nowrap;
  font-size: 0.88em;
  letter-spacing: 0.08em;
}

#sponsor .player_item .info .detail_table th:before,
#sponsor .player_item .info .extra .member_table th:not(.member_name):before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1.1em;
  margin-top: -0.55em;
  background: #0093db;
  background: var(--color2);
}

#sponsor .player_item .info .detail_table td,
#sponsor .player_item .info .extra .member_table td {
  color: #111;
  word-break: break-word;
  padding-left: 1.25em;
}

#sponsor .player_item .info .extra .member_table tr:hover th:not(.member_name),
#sponsor .player_item .info .extra .member_table tr:hover td {
  background: rgba(0, 147, 219, 0.07);
}

#sponsor .player_item .info .extra {
  margin: 1.5em auto 0;
}

#sponsor .player_item .info .extra .member_table:not(:last-child) {
  margin: 0 auto 1.25em;
}

#sponsor .player_item .info .extra .member_table .member_name {
  width: auto;
  background: #111;
  color: #fff;
  border: none;
  border-bottom: none;
  padding: 0.85em 1.15em;
  font-size: 1em;
  letter-spacing: 0.04em;
}

#sponsor .player_item .info .extra .member_table .member_name:before {
  display: none;
}

#sponsor .player_item .info .extra .member_table .member_name span {
  display: inline;
  margin: 0 0 0 0.5em;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

#sponsor .player_item .info .extra .member_table tr:first-child .member_name {
  border-top: none;
}

#sponsor .player_item .visual .photo,
#sponsor .player_item .visual .photo_placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
  object-fit: cover;
  background: #d9d9d9;
}

#sponsor .photo_placeholder {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  color: #111;
  font-weight: 700;
  font-size: 2em;
}

@media screen and (max-width: 768px) {
  #sponsor .news_list .item a {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 0.75em;
  }

  #sponsor .news_list .item time {
    width: auto;
  }


  #sponsor .player_tabs {
    min-height: 0;
  }

  #sponsor .player_tab.sports_tab,
  #sponsor .player_tab.talent_tab {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  #sponsor .player_tab.talent_tab .title,
  #sponsor .player_tab.talent_tab .title svg {
    text-align: left;
    margin: 0;
  }

  #sponsor .player_item,
  #sponsor .player_item.flex {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2em;
  }

  #sponsor .player_item .visual,
  #sponsor .player_item .info {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #sponsor .player_item .info .extra .member_table th,
  #sponsor .player_item .info .extra .member_table td {
    padding-top: 0.85em;
    padding-bottom: 0.85em;
  }

  #sponsor .player_item .info .detail_table th,
  #sponsor .player_item .info .extra .member_table th:not(.member_name) {
    width: 5.5em;
    padding-left: 1.15em;
    font-size: 0.82em;
    letter-spacing: 0.05em;
  }

  #sponsor .player_item .info .detail_table td,
  #sponsor .player_item .info .extra .member_table td {
    padding-left: 1em;
  }

  #sponsor .player_item .info .extra .member_table .member_name {
    padding: 0.75em 1em;
  }

  #sponsor .player_item .visual .photo_placeholder,
  #sponsor .photo_placeholder {
    font-size: 1.5em;
  }
}

/* ------------------------------------------------------------------- movie ------------------------------------------------------------------- */
#movie .inner,
#latest_youtube .inner {
  margin: var(--content-margin) auto 0;
}

#movie .lead,
#latest_youtube .lead {
  margin: 0 auto 2.5em;
  line-height: 2;

  font-weight: 700;
}

#movie .movie_box,
#latest_youtube .movie_box {
  margin: 0 auto;
}

#movie .movie_list,
#latest_youtube .movie_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2.5em 2em;
  margin: 0 auto 2.5em;
}

#movie .movie_list .item,
#latest_youtube .movie_list .item {
  width: calc((100% - 4em) / 3);
  -webkit-flex: 0 0 calc((100% - 4em) / 3);
  flex: 0 0 calc((100% - 4em) / 3);
  min-width: 0;
}

#movie .movie_list .item .card,
#latest_youtube .movie_list .item .card {
  display: block;
  color: #111;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#movie .movie_list .item button.card,
#latest_youtube .movie_list .item button.card {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

#movie .movie_list .item .card:hover,
#latest_youtube .movie_list .item .card:hover {
  color: var(--color2);
}

#movie .movie_list .item .thumb,
#latest_youtube .movie_list .item .thumb {
  margin: 0 auto 0.75em;
}

#movie .movie_placeholder,
#latest_youtube .movie_placeholder {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: #d9d9d9;
  color: #111;

  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.1em;
}

#movie .movie_list .item time,
#latest_youtube .movie_list .item time {
  display: block;
  margin: 0 auto 0.35em;

  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.4;
}

#movie .movie_list .item .title,
#latest_youtube .movie_list .item .title {
  display: block;

  font-weight: 700;
  line-height: 1.6;
}

#latest_youtube .view_link_box {
  margin: 0;
}

@media screen and (max-width: 1024px) {

  #movie .movie_list .item,
  #latest_youtube .movie_list .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }
}

@media screen and (max-width: 768px) {

  #movie .movie_list,
  #latest_youtube .movie_list {
    gap: 2em;
  }

  #movie .movie_list .item,
  #latest_youtube .movie_list .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }

  #movie .movie_placeholder,
  #latest_youtube .movie_placeholder {
    font-size: 1.5em;
  }

}

@media screen and (max-width: 480px) {

  #movie .movie_list .item,
  #latest_youtube .movie_list .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}

#movie .movie_list .item .thumb img,
#latest_youtube .movie_list .item .thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#movie .archive_empty,
#latest_youtube .archive_empty {
  margin: 0 auto 2.5em;
  font-weight: 700;
  line-height: 1.8;
}

#movie .movie_single {
  margin: 0 auto 2.5em;
}

#movie .movie_single time {
  display: block;
  margin: 0 auto 0.75em;
  font-weight: 700;
  font-size: 0.95em;
}

#movie .movie_single .entry_title {
  margin: 0 auto 1.25em;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.6;
}

#movie .movie_single .movie_embed {
  margin: 0 auto 1.5em;
}

#movie .movie_single .movie_embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

#movie .movie_single .movie_player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background: #000;
}

#movie .movie_single .thumb {
  margin: 0 auto 1.5em;
}

#movie .movie_single .thumb img {
  display: block;
  width: 100%;
  height: auto;
}

#movie .load_more_box {
  margin: 0 auto 2.5em;
}

#movie .load_more_btn {
  display: inline-block;
  min-width: 12em;
  padding: 0.85em 2em;
  border: 2px solid #111;
  background: transparent;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.4;
  cursor: pointer;
  -webkit-transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#movie .load_more_btn:hover,
#movie .load_more_btn:focus-visible {
  border-color: var(--color2);
  color: var(--color2);
}

#movie .load_more_btn:disabled,
#movie .load_more_btn.loading {
  opacity: 0.6;
  cursor: wait;
}

/* ---- 動画ポップアップ ---- */
.movie_popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.movie_popup[hidden] {
  display: none;
}

.movie_popup_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.movie_popup_panel {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow: auto;
  padding: 28px 32px 32px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.movie_popup_close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #595757;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.movie_popup_close:hover,
.movie_popup_close:focus-visible {
  color: var(--color2, #e60012);
}

.movie_popup_body time {
  display: block;
  margin: 0 auto 0.75em;
  font-weight: 700;
  font-size: 0.95em;
}

.movie_popup_title {
  margin: 0 auto 1em;
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.6;
}

.movie_popup_player {
  margin: 0 auto 1.25em;
}

.movie_popup_player iframe,
.movie_popup_player .movie_player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background: #000;
}

.movie_popup_text {
  margin: 0 auto;
  line-height: 1.8;
}

body.yab_movie_popup_open {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .movie_popup {
    padding: 16px;
  }

  .movie_popup_panel {
    padding: 24px 20px 20px;
  }
}

/* ------------------------------------------------------------------- product ------------------------------------------------------------------- */
#product_list .main_title~.inner,
#product_list .inner,
#product .inner,
#product_works .inner {
  margin: var(--content-margin) auto 0;
}

#product .info_box {
  margin: 0 auto;
}

#product .info_list {
  margin: 0 auto 2em;
}

#product .info_list .item:not(:last-child) {
  margin: 0 auto 1em;
}

#product .info_list .item a {
  gap: 1.5em;
  padding: 1.25em 1.5em;
  background: #fff;
  color: #111;
  font-weight: 700;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#product .info_list .item a:hover {
  color: #fff;
  background: var(--color2);
}

#product .info_list .item time {
  width: 6.5em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#product .info_list .item .tag {
  display: inline-block;
  min-width: 7em;
  padding: 0.15em 0.5em;
  border: 1px solid #111;
  font-size: 0.85em;
  line-height: 1.4;
  text-align: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-transition: border-color 0.2s ease, color 0.2s ease;
  transition: border-color 0.2s ease, color 0.2s ease;
}

#product .info_list .item a:hover .tag {
  border-color: #fff;
}

#product .info_list .item .title {
  line-height: 1.6;
  min-width: 0;
}

#product .view_link_box {
  margin: 0;
}


/* ---- 製品一覧アーカイブ: 大分類ジャンプ＋ジャンルグリッド（新サイト向け） ---- */
#product_list .page_nav.group_index {
  --page-nav-gap: 1.5em 2.5em;
  margin: 0 auto 2.5em;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#product_list .page_nav.group_index .label {
  font-size: 1.25em;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

#product_list .group_box {
  scroll-margin-top: 6em;
}

#product_list .group_box:not(:last-child) {
  margin: 0 auto 4em;
}

#product_list .group_head {
  margin: 0 auto 1.75em;
}

#product_list .group_head .titles {
  position: relative;
  min-width: 0;
  padding: 0 0 0.9em;
  border-bottom: 1px solid #d8d8d8;
}

#product_list .group_head .titles:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3.5em;
  height: 3px;
  background: #0093db;
  background: var(--color2, #0093db);
}

#product_list .group_head .en {
  display: block;
  margin: 0 0 0.3em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.4vw, 0.9rem);
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: #0093db;
  color: var(--color2, #0093db);
  text-transform: uppercase;
}

#product_list .group_head .ja {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #111;
}

#product_list .genre_grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2em 1.75em;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

#product_list .genre_grid .item {
  width: calc((100% - 3.5em) / 3);
  -webkit-flex: 0 0 calc((100% - 3.5em) / 3);
  flex: 0 0 calc((100% - 3.5em) / 3);
  min-width: 0;
}

/* 製品一覧グリッドの一件ずつ入場（JS animate が本体） */
#product_list .genre_grid.stagger_list>.item {
  opacity: 0;
  -webkit-transform: translateY(1.25em);
  transform: translateY(1.25em);
}

#product_list .genre_grid.stagger_list>.item.is_in {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

#product_list .genre_grid .genre_card {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  height: 100%;
  color: #111;
  text-align: left;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#product_list .genre_grid .genre_card .visual {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 1em;
  padding: 1.25em;
  background: #fff;
  overflow: hidden;
}

#product_list .genre_grid .genre_card .visual img,
#product_list .genre_grid .genre_card .visual .photo_placeholder {
  display: block;
  width: 100%;
  height: 11em;
  margin: 0 auto;
  object-fit: contain;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
}

#product_list .genre_grid .genre_card:hover .visual img {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

#product_list .genre_grid .genre_card .body {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
  padding: 0 0.15em;
}

#product_list .genre_grid .genre_card .name {
  display: block;
  margin: 0 0 0.4em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.45;
  color: #111;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#product_list .genre_grid .genre_card .summary {
  display: block;
  margin: 0 0 0.85em;
  font-size: 0.875em;
  line-height: 1.6;
  color: #666;
  font-weight: 400;
}

#product_list .genre_grid .genre_card .more {
  display: inline-block;
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  color: #0093db;
  color: var(--color2, #0093db);
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#product_list .genre_grid .genre_card .more:after {
  content: " \2192";
}

#product_list .genre_grid .genre_card:hover .name,
#product_list .genre_grid .genre_card:hover .more {
  color: #0077b3;
}

@media screen and (max-width: 1024px) {
  #product_list .genre_grid .item {
    width: calc((100% - 1.75em) / 2);
    -webkit-flex: 0 0 calc((100% - 1.75em) / 2);
    flex: 0 0 calc((100% - 1.75em) / 2);
  }
}

@media screen and (max-width: 768px) {
  #product_list .page_nav.group_index {
    --page-nav-gap: 1em 1.5em;
    margin: 0 auto 2em;
  }

  #product_list .page_nav.group_index .label {
    font-size: 1.05em;
  }

  #product_list .group_box:not(:last-child) {
    margin: 0 auto 3em;
  }

  #product_list .group_head {
    margin: 0 auto 1.35em;
  }

  #product_list .group_head .titles {
    padding: 0 0 0.75em;
  }

  #product_list .group_head .titles:after {
    width: 2.75em;
    height: 2px;
  }

  #product_list .group_head .en {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }

  #product_list .group_head .ja {
    font-size: clamp(1.35rem, 5vw, 1.7rem);
  }

  #product_list .genre_grid {
    gap: 1.5em 1em;
  }

  #product_list .genre_grid .item {
    width: calc((100% - 1em) / 2);
    -webkit-flex: 0 0 calc((100% - 1em) / 2);
    flex: 0 0 calc((100% - 1em) / 2);
  }

  #product_list .genre_grid .genre_card .visual {
    padding: 0.85em;
  }

  #product_list .genre_grid .genre_card .visual img,
  #product_list .genre_grid .genre_card .visual .photo_placeholder {
    height: 8em;
  }

  #product_list .genre_grid .genre_card .name {
    font-size: 0.95em;
  }

  #product_list .genre_grid .genre_card .summary {
    font-size: 0.8em;
  }

  #product_list .genre_grid .genre_card .more {
    font-size: 0.8em;
  }
}

/* ---- 製品一覧ニューモテスト（#product_list.neumorph / #product.neumorph・本番非適用） ---- */
#product_list.neumorph,
#product.neumorph,
#product_works.neumorph {
  --yab_product_neo_bg: #e8e8e8;
  --yab_product_neo_shadow_dark: #c5c5c5;
  --yab_product_neo_shadow_light: #ffffff;
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  padding-bottom: 3em;
}

#product_list.neumorph .main_title span.main svg {
  -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_list.neumorph .main_title span.main svg path {
  fill: #7a7877;
}

#product_list.neumorph .main_title span.main:after {
  background: #7a7877;
  box-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product_list.neumorph .main_title span.sub {
  color: #6b6968;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product_list.neumorph .title_box,
#product.neumorph .title_box,
#product_works.neumorph .title_box {
  opacity: 0.36;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

#product_list.neumorph .title_box.is_revealed,
#product.neumorph .title_box.is_revealed,
#product_works.neumorph .title_box.is_revealed {
  opacity: 1;
}

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

#product_list.neumorph .title_box:not(.is_revealed) > span,
#product.neumorph .title_box:not(.is_revealed) > span,
#product_works.neumorph .title_box:not(.is_revealed) > span {
  color: #9a9897;
  text-shadow: none;
}

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

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

#product_list.neumorph .title_box .title svg,
#product.neumorph .title_box .title svg,
#product_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);
}

#product_list.neumorph .title_box:not(.is_revealed) .title svg,
#product.neumorph .title_box:not(.is_revealed) .title svg,
#product_works.neumorph .title_box:not(.is_revealed) .title svg {
  -webkit-filter: none;
  filter: none;
  opacity: 0.55;
}

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

#product_list.neumorph .title_box:not(.is_revealed) .title svg path,
#product.neumorph .title_box:not(.is_revealed) .title svg path,
#product_works.neumorph .title_box:not(.is_revealed) .title svg path {
  fill: #9a9897;
}

/* ページ内リンク：ピル殻をやめ、TOP btn_box 同様に矢印円＋ラベルの彫り込み */
#product_list.neumorph .page_nav.group_index a {
  gap: 0.85em;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #6b6968;
  box-shadow: none;
  text-shadow: none;
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
}

#product_list.neumorph .page_nav.group_index a .icon {
  --page-nav-icon-size: 2.1em;
}

#product_list.neumorph .page_nav.group_index a .icon svg {
  --content-color: #7a7877;
  -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_list.neumorph .page_nav.group_index a .icon svg circle,
#product_list.neumorph .page_nav.group_index a .icon svg path[stroke] {
  stroke: #7a7877;
}

#product_list.neumorph .page_nav.group_index a .label {
  color: #6b6968;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
  -webkit-transition: color 0.25s ease, text-shadow 0.25s ease;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

#product_list.neumorph .page_nav.group_index a:hover {
  color: #0093db;
  color: var(--color2);
  background: transparent;
  box-shadow: none;
}

#product_list.neumorph .page_nav.group_index a:hover .icon svg {
  --content-color: #0093db;
  --content-color: var(--color2);
  -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));
}

#product_list.neumorph .page_nav.group_index a:hover .icon svg circle,
#product_list.neumorph .page_nav.group_index a:hover .icon svg path[stroke] {
  stroke: #0093db;
  stroke: var(--color2);
}

#product_list.neumorph .page_nav.group_index a:hover .label {
  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);
}

#product_list.neumorph .group_head .en {
  color: #7a7877;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product_list.neumorph .group_head .ja {
  color: #6b6968;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product_list.neumorph .group_head .titles {
  border-bottom-color: #cfcfcf;
}

#product_list.neumorph .group_head .titles:after {
  background: #7a7877;
  box-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product_list.neumorph .genre_grid .genre_card {
  position: relative;
  isolation: isolate;
  padding: 1em 1em 1.15em;
  border-radius: 1em;
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  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);
  color: #6b6968;
  -webkit-transition: color 0.25s ease, box-shadow 0.4s ease, background 0.4s ease;
  transition: color 0.25s ease, box-shadow 0.4s ease, background 0.4s ease;
}

#product_list.neumorph .genre_grid .genre_card::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_product_neo_shadow_dark),
    inset -0.4em -0.4em 0.85em var(--yab_product_neo_shadow_light);
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

#product_list.neumorph .genre_grid .genre_card > * {
  position: relative;
  z-index: 1;
}

#product_list.neumorph .genre_grid .genre_card:hover {
  color: #0093db;
  color: var(--color2);
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  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_list.neumorph .genre_grid .genre_card:hover::before {
  opacity: 1;
}

#product_list.neumorph .genre_grid .genre_card .visual {
  border-radius: 0.75em;
  background: #dcdcdc;
  box-shadow:
    inset 0.35em 0.35em 0.7em rgba(140, 140, 140, 0.35),
    inset -0.25em -0.25em 0.55em rgba(255, 255, 255, 0.55);
}

#product_list.neumorph .genre_grid .genre_card .name {
  color: #6b6968;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product_list.neumorph .genre_grid .genre_card .summary {
  color: #8a8887;
}

#product_list.neumorph .genre_grid .genre_card .more {
  color: #6b6968;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#product_list.neumorph .genre_grid .genre_card:hover .name,
#product_list.neumorph .genre_grid .genre_card:hover .more {
  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);
}

#product_list.neumorph .genre_grid .genre_card:hover .visual img {
  -webkit-transform: none;
  transform: none;
}

#product.neumorph .info_list .item a {
  position: relative;
  isolation: isolate;
  gap: 1.5em;
  padding: 1.15em 1.4em;
  border-radius: 1em;
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  color: #6b6968;
  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);
  -webkit-transition: color 0.25s ease, background 0.4s ease, box-shadow 0.4s ease;
  transition: color 0.25s ease, background 0.4s ease, box-shadow 0.4s ease;
}

#product.neumorph .info_list .item a::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_product_neo_shadow_dark),
    inset -0.4em -0.4em 0.85em var(--yab_product_neo_shadow_light);
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

#product.neumorph .info_list .item a > * {
  position: relative;
  z-index: 1;
}

#product.neumorph .info_list .item a:hover {
  color: #0093db;
  color: var(--color2);
  background: #e8e8e8;
  background: var(--yab_product_neo_bg);
  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 .info_list .item a:hover::before {
  opacity: 1;
}

#product.neumorph .info_list .item .tag {
  border: none;
  border-radius: 999px;
  background: #00a0d6;
  background: var(--category-color, #00a0d6);
  color: #fff;
  padding: 0.35em 0.9em;
}

#product.neumorph .info_list .item a:hover .tag {
  background: #fff;
  color: var(--category-color, var(--color2));
}

#product.neumorph .view_link_box {
  opacity: 0.36;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

#product.neumorph .view_link_box.is_revealed {
  opacity: 1;
}

/* ---- 製品アーカイブ：最新事例（旧 products Latest Works） ---- */
#product_works .works_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2em;
  margin: 0 auto 2.5em;
  padding: 0;
  list-style: none;
}

#product_works .works_list.landing_pickup .item {
  width: calc((100% - 4em) / 3);
  -webkit-flex: 0 0 calc((100% - 4em) / 3);
  flex: 0 0 calc((100% - 4em) / 3);
  min-width: 0;
}

#product_works .works_list.landing_pickup .item .card {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0.35em 0.5em 0.35em 0.35em;
  background: #fff;
  color: #111;
  text-decoration: none;
  -webkit-transition: color 0.2s ease, box-shadow 0.2s ease;
  transition: color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

#product_works .works_list.landing_pickup .item .visual {
  width: 100%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}

#product_works .works_list.landing_pickup .item .visual .bg {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

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

#product_works .works_list.landing_pickup .item .text {
  width: 100%;
  margin: 0.75em auto 0;
  padding: 0 0.15em 0.5em;
  position: relative;
  z-index: 2;
}

#product_works .works_list.landing_pickup .item .text .meta {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.5em 0.85em;
  margin: 0 0 0.45em;
  color: #888;
  font-size: 0.85em;
  line-height: 1.4;
}

#product_works .works_list.landing_pickup .item .text .meta .label {
  color: #888;
}

#product_works .works_list.landing_pickup .item .text .title {
  margin: 0 0 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.5;
  color: #111;
}

#product_works .works_list.landing_pickup .item .text .tags {
  margin: 0;
  color: #888;
  font-size: 0.85em;
  line-height: 1.5;
}

#product_works .works_list.landing_pickup .item .card:hover {
  color: var(--color2);
  background: #fff;
}

#product_works .works_list.landing_pickup .item .card:hover .text .title {
  color: var(--color2);
}

#product_works .view_link_box {
  margin: 0;
}

#product_works.neumorph .works_list.landing_pickup .item .card {
  border-radius: 1.2em;
  background: #e8e8e8;
  background: var(--yab_product_neo_bg, #e8e8e8);
  box-shadow:
    0.4em 0.4em 0.8em var(--yab_product_neo_shadow_dark, #c5c5c5),
    -0.4em -0.4em 0.8em var(--yab_product_neo_shadow_light, #ffffff);
  overflow: hidden;
}

#product_works.neumorph .works_list.landing_pickup .item .card:hover {
  -webkit-transform: none;
  transform: none;
  box-shadow:
    inset 0.2em 0.2em 0.45em var(--yab_product_neo_shadow_dark, #c5c5c5),
    inset -0.2em -0.2em 0.45em var(--yab_product_neo_shadow_light, #ffffff);
}

#product_works.neumorph .view_link_box {
  opacity: 0.36;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

#product_works.neumorph .view_link_box.is_revealed {
  opacity: 1;
}

@media screen and (max-width: 1024px) {
  #product_works .works_list.landing_pickup .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }
}

@media screen and (max-width: 768px) {
  #product_works .works_list.landing_pickup .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}

body.yab_product_soft #product_list.neumorph .inner,
body.yab_product_soft #product.neumorph .inner,
body.yab_product_soft #product_works.neumorph .inner {
  position: relative;
  z-index: 1;
}

#product_list .category_box {
  scroll-margin-top: 6em;
}

#product_list .category_box.is_head_only .category_head.category_link {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#product_list .category_box.is_head_only .category_head.category_link:hover {
  color: var(--color2);
}

#product_list .category_box .product_grid {
  width: 100%;
  clear: both;
}

#product_list .category_box:not(:last-child) {
  margin: 0 auto 4em;
}

#product_list .category_head {
  margin: 0 auto 1.5em;
  gap: 1.5em;
}

#product_list .category_head .category_titles {
  min-width: 0;
}

#product_list .category_head .en {
  gap: 0.65em;
  margin: 0 auto 0.35em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.4;
}

#product_list .category_head .en .line {
  display: block;
  width: 3.5em;
  height: 2px;
  background: #111;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#product_list .category_head .ja {
  margin: 0;
  padding: 0 0 0 calc(3.5em + 0.65em);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.35;
}

#product_list .genre_archive_visual {
  margin: 0 auto 2em;
  max-width: 960px;
}

#product_list .genre_archive_visual img,
#product_list .genre_archive_visual .photo_placeholder.wide {
  display: block;
  width: 100%;
  height: auto;
}

#product_list .title_box h2.title.text_only {
  height: auto;
  max-height: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

#product_list .product_grid .item .card img,
#catalog_list .catalog_grid img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 製品個別: 比率固定で切らず、元画像を全部表示 */
#catalog_list .catalog_grid img,
#product_single .catalog_grid img,
.yab_article_catalog > .catalog_grid img,
#product_single .wide_visual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

#product_single .page_nav {
  --page-nav-gap: 1.5em;
  margin: 2.5em auto 0;
  padding: 0.35em 0;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

#product_single .page_nav .label {
  font-size: 1.1em;
  line-height: 1.45;
  white-space: nowrap;
}

#product_single .model+.page_nav,
#product_single .product_subtitle+.page_nav {
  margin-top: 2.5em;
}

#product_list .product_grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2em;
  margin: 0 auto;
}

#product_list .product_grid .item {
  width: calc((100% - 6em) / 4);
  -webkit-flex: 0 0 calc((100% - 6em) / 4);
  flex: 0 0 calc((100% - 6em) / 4);
  min-width: 0;
}

#product_list .product_grid .item .card {
  display: block;
  height: 100%;
  padding: 0;
  background: #fff;
  color: #111;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-transition: color 0.2s ease, box-shadow 0.2s ease;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

#product_list .product_grid .item .card:hover {
  color: var(--color2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

#product_list .product_grid .item .card .visual {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
}

#product_list .product_grid .item .card .visual img,
#product_list .product_grid .item .card .visual .photo_placeholder {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: contain;
  object-fit: contain;
}

#product_list .product_grid .item .card .body {
  display: block;
  padding: 0.75em 0.85em 1em;
}

#product_list .photo_placeholder {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  color: #111;
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: 0.1em;
}

#product_list .product_grid .item .name,
#product_list .product_grid .item .sub {
  display: block;

  font-weight: 700;
  line-height: 1.5;
}

#product_list .product_grid .item .sub {
  margin: 0.15em auto 0;
  font-size: 0.9em;
}

#product_list .product_grid .card_sections {
  gap: 0.3em;
  margin: 0 auto 0.65em;
  padding: 0;
  list-style: none;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

#product_list .product_grid .card_sections .section_mark {
  width: 0.8em;
  height: 0.8em;
  border: 1px solid #111;
  background: #fff;
}

@media screen and (max-width: 1024px) {

  #product_list .product_grid .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }
}

@media screen and (max-width: 768px) {

  #product .info_list .item a {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.75em 1.5em;
  }

  #product .info_list .item .title {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }


  #product_list .category_head .ja {
    padding-left: calc(3em + 0.65em);
    font-size: 1.5em;
  }

  #product_list .product_grid {
    gap: 1.5em;
  }

  #product_list .product_grid .item {
    width: calc((100% - 1.5em) / 2);
    -webkit-flex: 0 0 calc((100% - 1.5em) / 2);
    flex: 0 0 calc((100% - 1.5em) / 2);
  }

  #product_list .photo_placeholder {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 480px) {
  #product_list .genre_grid .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #product_list .product_grid .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}

/* ------------------------------------------------------------------- product single ------------------------------------------------------------------- */
#product_single {
  padding: var(--content-margin) var(--side-padding) var(--section-margin);
}

#product_single .inner {
  margin: 0 auto;
}

#product_single .hero_box {
  margin: 0 auto 5em;
}

#product_single .product_name {
  margin: 0 auto 0.25em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.3;
}

#product_single .product_subtitle {
  margin: 0 auto 0.35em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.5;
  color: #404040;
}

/* 画像の下にキャプション（構造: .media > 画像 → .caption） */
#product_single .photo_grid .item,
#product_single .install_grid .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

#product_single .photo_grid .item .media,
#product_single .install_grid .item .media {
  display: block;
  width: 100%;
}

#product_single .photo_grid .item .media img,
#product_single .photo_grid .item .media .photo_placeholder,
#product_single .install_grid .item .media img,
#product_single .install_grid .item .media .photo_placeholder {
  display: block;
  width: 100%;
  height: auto;
}

#product_single .model {
  margin: 0 auto 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.5;
}

#product_single .content_section:not(:last-child) {
  margin: 0 auto 4em;
}

#product_single .section_title {
  margin: 0 auto 1.5em;
  padding: 0 0 0.35em;
  border-bottom: 3px solid #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.75em;
  line-height: 1.4;
}

.yab_article_catalog > .section_title {
  margin: 0 auto 1em;
  padding: 0 0 0.5em;
  border-bottom: 2px solid #0093db;
  border-bottom: 2px solid var(--color, var(--color2, #0093db));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.75em;
  line-height: 1.5;
  color: #333;
}

#product_single .lead {
  margin: 0 auto 1.5em;
  line-height: 2;
  font-family: var(--font-body);
  font-weight: 700;
}

#product_single .photo_placeholder {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #d9d9d9;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.1em;
}

#product_single .photo_placeholder.square {
  aspect-ratio: 1 / 1;
  font-size: 1.5em;
}

#product_single .photo_placeholder.wide {
  aspect-ratio: 16 / 6;
  font-size: 2em;
}

#catalog_list .photo_placeholder.catalog,
#product_single .photo_placeholder.catalog {
  aspect-ratio: 3 / 4;
  margin: 0 auto 1em;
  font-size: 1.5em;
}

#catalog_list .photo_placeholder.catalog {
  width: 100%;
  margin: 0 auto 1.25em;
}

#product_single .split_box {
  gap: 3em;
}

#product_single .split_box .text {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#product_single .split_box .text h3 {
  margin: 0 auto 1em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.6;
}

#product_single .split_box .text p {
  margin: 0;
  line-height: 2;
  font-family: var(--font-body);
  font-weight: 700;
}

#product_single .split_box .visual {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#product_single .photo_grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2em;
  margin: 0 auto 2em;
  padding: 0;
  list-style: none;
}

#product_single .photo_grid .item {
  width: calc((100% - 6em) / 4);
  -webkit-flex: 0 0 calc((100% - 6em) / 4);
  flex: 0 0 calc((100% - 6em) / 4);
  min-width: 0;
}

#product_single .photo_grid .caption {
  display: block;
  margin: 0.75em auto 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.5;
  text-align: center;
}

/* 1〜3枚の photo_grid は枚数に応じて幅を調整（1枚だけ25%幅になる崩れを防ぐ） */
#product_single .photo_grid.photos_1 .item {
  width: 100%;
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
}

#product_single .photo_grid.photos_2 .item {
  width: calc((100% - 2em) / 2);
  -webkit-flex: 0 0 calc((100% - 2em) / 2);
  flex: 0 0 calc((100% - 2em) / 2);
}

#product_single .photo_grid.photos_3 .item {
  width: calc((100% - 4em) / 3);
  -webkit-flex: 0 0 calc((100% - 4em) / 3);
  flex: 0 0 calc((100% - 4em) / 3);
}

/* 本文なし text_image（使用イメージ等） */
#product_single .content_section.image_only .visual.full {
  width: 100%;
  max-width: 100%;
}

#product_single .content_section.image_only .visual.full img {
  width: 100%;
  height: auto;
}

/* ---- ワンタッチドレンパン概要（本番寄せレイアウト） ---- */
#product_single .drain_pan_overview .section_title {
  margin: 0 auto 0.85em;
}

#product_single .drain_pan_overview .lead {
  margin: 0 auto 1em;
}

#product_single .drain_pan_overview .patent_img {
  display: block;
  width: 160px;
  max-width: 45%;
  height: auto;
  margin: 1em auto 0 0;
}

/* #product_single .drain_pan_overview .summary_img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 20px 20px 0 #23221f;
} */

#product_single .drain_pan_overview .install_link {
  display: block;
  margin: 2.5em auto 0;
}

#product_single .drain_pan_overview .install_img {
  display: block;
  width: 100%;
  height: auto;
}

#product_single .sun_shade_overview .section_title {
  margin: 0 auto 0.85em;
}

#product_single .sun_shade_overview .lead {
  margin: 0 auto 1em;
}

#product_single .sun_shade_overview .patent_img {
  display: block;
  width: 160px;
  max-width: 45%;
  height: auto;
  margin: 1em auto 0 0;
}

#product_single .sun_shade_overview .summary_img {
  display: block;
  width: 100%;
  height: auto;
}

#product_single .cta_banner {
  gap: 0.75em;
  width: 100%;
  min-height: 0;
  padding: 0.85em 1.5em;
  margin: 1.5em auto 0;
  background: #0093db;
  background: var(--color2);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

#product_single .cta_banner:hover {
  opacity: 0.88;
  color: #fff;
}

/* CTA直後はセクション下余白をやや詰めて導入事例との間延びを抑える */
#product_single .content_section:has(.cta_banner):not(:last-child) {
  margin-bottom: 3em;
}

#product_single .point_list .point_item:not(:last-child) {
  margin: 0 auto 3em;
}

#product_single .point_item {
  gap: 3em;
}

#product_single .point_item .text {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#product_single .point_item .text h3 {
  margin: 0 auto 1em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.35em;
  line-height: 1.6;
}

#product_single .point_item .text p {
  margin: 0;
  line-height: 2;
  font-family: var(--font-body);
  font-weight: 700;
}

#product_single .point_item .visual {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#product_single .point_item.text_only .text {
  width: 100%;
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
}

#product_single .point_list+.install_grid {
  margin-top: 2em;
}

#product_single .wide_visual {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#product_single .install_grid {
  --grid-gap: 2em;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

#product_single .install_grid .item {
  width: calc((100% - var(--grid-gap)) / 2);
  -webkit-flex: 0 0 calc((100% - var(--grid-gap)) / 2);
  flex: 0 0 calc((100% - var(--grid-gap)) / 2);
  min-width: 0;
}

#product_single .install_grid .photo_placeholder {
  margin: 0 auto 0.75em;
  font-size: 1.5em;
}

#product_single .install_grid .caption {
  margin: 0.75em 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95em;
  color: #807e7d;
  line-height: 1.5;
  text-align: center;
}

#product_single .case_grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2em;
  margin: 0 auto 2.5em;
  padding: 0;
  list-style: none;
}

#product_single .case_grid .item {
  width: calc((100% - 4em) / 3);
  -webkit-flex: 0 0 calc((100% - 4em) / 3);
  flex: 0 0 calc((100% - 4em) / 3);
  min-width: 0;
}

#product_single .case_grid .card {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #fff;
  color: #111;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;
}

#product_single .case_grid .card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

#product_single .case_grid .card .visual {
  display: block;
  overflow: hidden;
  background: #d9d9d9;
}

#product_single .case_grid .card .visual img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
}

#product_single .case_grid .card .visual .photo_placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

#product_single .case_grid .card:hover .visual img {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

#product_single .case_grid .photo_placeholder {
  margin: 0;
  font-size: 1.5em;
}

#product_single .case_grid .card .body {
  display: block;
  padding: 1em 1.15em 1.25em;
}

#product_single .case_grid .card .name {
  display: block;
  margin: 0 0 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.55;
  color: #111;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#product_single .case_grid .card:hover .name {
  color: #0093db;
  color: var(--color2, #0093db);
}

#product_single .case_grid .card .meta {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85em;
  line-height: 1.55;
  color: #807e7d;
}

#product_single .case_grid .card:hover .meta {
  color: #807e7d;
}

#product_single .view_link_box {
  margin: 0;
}


#catalog_list .catalog_grid,
#product_single .catalog_grid,
.yab_article_catalog > .catalog_grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

#catalog_list .catalog_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5em 2em;
}

/* 関連資料: 左揃え flex（num:4 / gap:1em） */
#product_single .catalog_grid,
.yab_article_catalog > .catalog_grid {
  --num: 4;
  --gap: 1em;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  gap: var(--gap);
}

#product_single .catalog_grid .item,
.yab_article_catalog > .catalog_grid .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: calc((100% - (var(--num) - 1) * var(--gap)) / var(--num));
  -webkit-flex: 0 0 calc((100% - (var(--num) - 1) * var(--gap)) / var(--num));
  flex: 0 0 calc((100% - (var(--num) - 1) * var(--gap)) / var(--num));
  min-width: 0;
}

#catalog_list .catalog_grid .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  min-width: 0;
}

#catalog_list .catalog_grid .card,
#product_single .catalog_grid .card {
  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-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  color: #111;
  text-decoration: none;
  text-align: center;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.yab_article_catalog > .catalog_grid .card {
  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-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  color: #333;
  text-decoration: none;
  text-align: left;
  --content-color: #333;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#product_single .catalog_grid .card img,
.yab_article_catalog > .catalog_grid .card img,
#product_single .catalog_grid .card .photo_placeholder.catalog,
.yab_article_catalog > .catalog_grid .card .photo_placeholder.catalog {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#catalog_list .catalog_grid .card .photo_placeholder.catalog,
#product_single .catalog_grid .card img,
.yab_article_catalog > .catalog_grid .card img {
  margin: 0 auto 1em;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#catalog_list .catalog_grid .card img,
#catalog_list .catalog_grid .card .photo_placeholder.catalog {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1.25em;
  -webkit-transition: opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  transition: opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1), transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}

#catalog_list .catalog_grid .card:hover img,
#catalog_list .catalog_grid .card:hover .photo_placeholder.catalog,
.yab_article_catalog > .catalog_grid .card:hover img,
.yab_article_catalog > .catalog_grid .card:hover .photo_placeholder.catalog {
  opacity: 0.85;
  box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.28);
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}

#catalog_list .catalog_grid .card:hover,
#product_single .catalog_grid .card:hover,
.yab_article_catalog > .catalog_grid .card:hover {
  color: #0093db;
  color: var(--color2);
}

#catalog_list .catalog_grid .name,
#product_single .catalog_grid .name {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 0 0 0.75em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  text-align: left;
  color: #111;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.yab_article_catalog > .catalog_grid .name {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 0 0 0.75em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.5;
  text-align: left;
  color: #333;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#catalog_list .catalog_grid .card:hover .name,
#product_single .catalog_grid .card:hover .name,
.yab_article_catalog > .catalog_grid .card:hover .name {
  color: #0093db;
  color: var(--color2);
}

#catalog_list .catalog_grid .download,
#product_single .catalog_grid .download,
.yab_article_catalog > .catalog_grid .download {
  --height: 2em;
  --max-height: 1.5em;
  --download-wordmark-height: calc(var(--height) * 2);
  --download-wordmark-max-height: calc(var(--max-height) * 2);
  --download-arrow-size: var(--height);
  --download-arrow-max: var(--max-height);
  margin: auto 0 0;
}

#catalog_list .catalog_grid .download .icon.wordmark svg,
#product_single .catalog_grid .download .icon.wordmark svg,
.yab_article_catalog > .catalog_grid .download .icon.wordmark svg {
  height: var(--download-wordmark-height);
  max-height: var(--download-wordmark-max-height);
  width: auto;
}

#catalog_list .catalog_grid .download .icon.arrow svg,
#product_single .catalog_grid .download .icon.arrow svg,
.yab_article_catalog > .catalog_grid .download .icon.arrow svg {
  height: var(--download-arrow-size);
  max-height: var(--download-arrow-max);
  width: auto;
  aspect-ratio: 1 / 1;
}

@media screen and (max-width: 1024px) {

  #product_single .photo_grid.photos_1 .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #product_single .photo_grid.photos_3 .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }

  #product_single .photo_grid .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }

  #product_single .case_grid .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }

  #product_single .catalog_grid {
    --num: 2;
  }
}

@media screen and (max-width: 768px) {

  #product_single .hero_box {
    margin: 0 auto 3.5em;
  }

  #product_single .page_nav {
    --page-nav-gap: 0.85em;
    margin: 2em auto 0;
    padding: 0;
    overflow: visible;
  }

  #product_single .page_nav>li {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #product_single .page_nav .label {
    font-size: 0.95em;
    white-space: normal;
  }

  #product_single .content_section:not(:last-child) {
    margin: 0 auto 3em;
  }

  #product_single .section_title {
    font-size: 1.5em;
  }

  .yab_article_catalog > .section_title {
    font-size: 1.5em;
  }

  #product_single .split_box,
  #product_single .point_item {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2em;
  }

  #product_single .split_box .text,
  #product_single .split_box .visual,
  #product_single .point_item .text,
  #product_single .point_item .visual {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  /* #product_single .drain_pan_overview .summary_img {
    box-shadow: 8px 8px 0 #23221f;
  } */

  #product_single .drain_pan_overview .install_link {
    margin-top: 2em;
  }

  #product_single .drain_pan_overview .patent_img {
    width: 140px;
    max-width: 50%;
  }

  #product_single .sun_shade_overview .patent_img {
    width: 140px;
    max-width: 50%;
  }

  #product_single .photo_grid.photos_1 .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #product_single .photo_grid .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }

  #product_single .install_grid {
    --grid-gap: 1.5em;
  }

  #product_single .case_grid .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }

  #product_single .cta_banner {
    padding: 0.75em 1.25em;
    margin-top: 1.25em;
    font-size: 1em;
  }

  #product_single .content_section:has(.cta_banner):not(:last-child) {
    margin-bottom: 2.5em;
  }

  #product_single .photo_placeholder {
    font-size: 1.5em;
  }

  #product_single .photo_placeholder.wide {
    min-width: 48em;
    aspect-ratio: 16 / 9;
  }

  #product_single .catalog_grid {
    --num: 2;
    --gap: 1.5em;
  }

  #catalog_list .catalog_grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media screen and (max-width: 480px) {

  #product_single .photo_grid .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #product_single .install_grid .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #product_single .case_grid .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #catalog_list .catalog_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 関連資料は 480 以下も 2 列を維持（--num:1 に落とさない） */
}

/* ------------------------------------------------------------------- catalog list ------------------------------------------------------------------- */
#catalog_list .catalog_section_heading:has(h2.title.text_only)>span {
  margin-bottom: 0.3em;
}

#catalog_list .catalog_section_heading h2.title.text_only {
  height: inherit;
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 5rem);
  letter-spacing: 0.02em;
}

#catalog_list .inner .page_nav {
  --page-nav-gap: 1em 2.5em;
  margin: 0 auto 2em;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

#catalog_list .inner .page_nav .label {
  font-size: 1em;
  line-height: 1.4;
  white-space: nowrap;
}

#catalog_list .inner {
  margin: var(--content-margin) auto 0;
}

#catalog_list .lead {
  margin: 0 auto 2.5em;
  font-family: var(--font-body);
  font-size: 1em;
  line-height: 1.8;
}

#catalog_list .catalog_empty {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.8;
  text-align: center;
}

#catalog_list .catalog_groups>*:not(:last-child) {
  margin-bottom: 6em;
}

#catalog_list .catalog_group:not(:first-child) .title_box {
  margin-top: var(--content-margin);
}

#catalog_list .catalog_group .product_title {
  margin: 0 auto 1.25em;
  font-family: var(--font-heading);
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.5;
}

#catalog_list .catalog_group .product_title a {
  color: #111;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#catalog_list .catalog_group .product_title a:hover {
  color: #0093db;
  color: var(--color2);
}

#catalog_list .catalog_section_heading {
  margin: 0;
}

#catalog_list .catalog_section_heading .title {
  margin: 0;
}

@media screen and (max-width: 768px) {
  #catalog_list .inner .page_nav {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    gap: 1.5em;
    margin: 0 -5% 2em;
    padding: 0 5% 0.5em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #catalog_list .inner .page_nav>li {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }

  #catalog_list .catalog_section_heading h2.title.text_only {
    height: 15vw;
    max-height: 120px;
    font-size: clamp(2rem, 10vw, 3.5rem);
  }
}

#catalog_list .price_notice {
  margin: 0 auto 1.5em;
  font-family: var(--font-body);
  font-size: 0.95em;
  line-height: 1.8;
}

#catalog_list .price_notice a {
  color: #0093db;
  color: var(--color2);
  text-decoration: underline;
}

#catalog_list .price_notice a:hover {
  text-decoration: none;
}

/* ------------------------------------------------------------------- news archive ------------------------------------------------------------------- */
/* フィルターメニューは JS で position:fixed 配置のため、main の overflow:hidden を外さない（100vw はみ出し防止） */

#news:has(.main_title):after {
  display: none;
  content: none;
}

#news:has(.main_title) .main_title~.inner {
  margin: var(--content-margin) auto 0;
}

#news .news_single {
  margin: 0 auto;
}

#news .filter_box {
  position: relative;
  z-index: 30;
  gap: 1em;
  margin: 0 auto 2em;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#news .filter_unit {
  position: relative;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#news .filter_unit.is_open {
  z-index: 2;
}

#news .filter_unit.is_open .filter_menu {
  z-index: 1000;
}

#news .filter_btn {
  gap: 0.75em;
  padding: 0.65em 1.25em;
  border: none;
  border-radius: 0;
  background: var(--color2);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

#news .filter_btn:hover {
  opacity: 0.85;
}

#news .filter_btn .icon {
  font-size: 0.65em;
  line-height: 1;
}

#news .filter_menu {
  position: absolute;
  top: calc(100% + 0.35em);
  left: 0;
  z-index: 20;
  min-width: 100%;
  max-height: min(70vh, 24em);
  margin: 0;
  padding: 0.35em 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75em;
  box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.12);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#news .filter_menu .filter_option {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65em 1.25em;
  border: none;
  background: transparent;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}

#news .filter_menu .filter_option:hover,
#news .filter_menu .filter_option.active {
  background: var(--color2);
  color: #fff;
}

/* カテゴリー：横並びタグ */
#news .filter_tags {
  gap: 0.55em;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

#news .filter_tags li {
  margin: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#news .filter_tag {
  display: inline-block;
  padding: 0.55em 1.1em;
  border-radius: 0;
  background: #f0f0f0;
  color: #444;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}

#news .filter_tag:hover {
  background: #e4e4e4;
  color: #111;
}

#news .filter_tag.active {
  background: #00a0d6;
  background: var(--category-color, var(--color2, #00a0d6));
  color: #fff;
}

#news .archive_empty {
  margin: 2em auto;
  font-weight: 700;
  text-align: center;
}

#news .archive_loading {
  margin: 2em auto;
  font-weight: 700;
  text-align: center;
  color: #666;
}

#news .archive_box {
  position: relative;
  z-index: 1;
}

#news .archive_list .item:not(:last-child) {
  margin: 0 auto 1em;
}

#news .archive_list .item a {
  gap: 1.5em;
  padding: 1.25em 1.5em;
  background: #fff;
  color: #111;
  font-weight: 700;
  text-decoration: none;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#news .archive_list .item a:hover {
  color: #fff;
  background: var(--color2);
}

#news .archive_list .item .meta {
  gap: 1em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-width: 0;
}

#news .archive_list .item .labels {
  gap: 0.5em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#news .archive_list .item time {
  width: 6.5em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  font-size: 0.95em;
  line-height: 1.4;
}

#news .archive_list .item .category {
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0.35em 0.9em;
  border-radius: 0;
  background: #00a0d6;
  background: var(--category-color, #00a0d6);
  color: #fff;
  font-weight: 700;
  font-size: 0.8em;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}


#news .archive_list .item a:hover .category {
  background: #fff;
  color: var(--category-color, var(--color2));
}

#news .archive_list .item .title {
  line-height: 1.6;
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

/* ---- HOT新聞一覧（本家 /company/hot 相当：サムネ＋アウトライン） ---- */
#news .hot_archive_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3em 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

#news .hot_archive_list .item {
  min-width: 0;
}

#news .hot_archive_list .item a.card {
  display: block;
  padding: 0;
  background: transparent;
  color: #404040;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

#news .hot_archive_list .item a.card:hover {
  color: #404040;
  background: transparent;
  opacity: 0.85;
}

#news .hot_archive_list .item .thumb {
  overflow: hidden;
  margin: 0 auto 0.5em;
  background: #f0f0f0;
  aspect-ratio: 566 / 800;
}

#news .hot_archive_list .item .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#news .hot_archive_list .item a.card:hover .thumb img {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  opacity: 0.9;
}

#news .hot_archive_list .item .thumb_empty {
  display: block;
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}

#news .hot_archive_list .item .title {
  margin: 0.5em 0 0.35em;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #404040;
  text-align: center;
}

#news .hot_archive_list .item a.card:hover .title {
  opacity: 0.8;
}

#news .hot_archive_list .item .outline {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8e8e8e;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

#news .hot_archive_list .item .date {
  display: block;
  margin: 0.35em 0 0;
  color: #8e8e8e;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}

#news .news_pagination {
  margin: 2.5em auto 0;
}

#news .news_pagination_inner {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.75em 1.25em;
}

#news .news_pagination_prev,
#news .news_pagination_next {
  display: inline-block;
  padding: 0.5em 1.25em;
  border: 1px solid #111;
  border: 1px solid var(--color2, #0093db);
  border-radius: 999px;
  color: #111;
  color: var(--color2, #0093db);
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

#news .news_pagination_prev:hover,
#news .news_pagination_next:hover,
#news .news_pagination_prev:focus-visible,
#news .news_pagination_next:focus-visible {
  background: var(--color2, #0093db);
  border-color: var(--color2, #0093db);
  color: #fff;
}

#news .news_pagination_pages {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.35em;
}

#news .news_pagination_page {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 0.4em;
  border: 1px solid #111;
  border: 1px solid var(--color2, #0093db);
  border-radius: 999px;
  color: #111;
  color: var(--color2, #0093db);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

#news a.news_pagination_page:hover,
#news a.news_pagination_page:focus-visible {
  background: var(--color2, #0093db);
  border-color: var(--color2, #0093db);
  color: #fff;
}

#news .news_pagination_page.current {
  background: #111;
  background: var(--color2, #0093db);
  border-color: #111;
  border-color: var(--color2, #0093db);
  color: #fff;
  cursor: default;
}

#news .news_pagination_ellipsis {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  font-weight: 700;
  color: #666;
}

@media screen and (max-width: 768px) {

  #news .filter_box {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #news .archive_box {
    padding: 1em;
  }

  #news .archive_list .item a {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.75em 1.25em;
  }

  #news .archive_list .item .meta {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #news .archive_list .item .title {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #news .hot_archive_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2em 1em;
  }

  #news .hot_archive_list .item .title {
    width: auto;
    -webkit-flex: initial;
    flex: initial;
    font-size: 14px;
  }

  #news .hot_archive_list .item .outline {
    font-size: 12px;
  }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
  #news .hot_archive_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- NEWS 一覧ニューモテスト（#news.neumorph / body.yab_news_soft・本番 /news/ 非適用） ---- */
#news.neumorph {
  --yab_news_neo_bg: #e8e8e8;
  --yab_news_neo_shadow_dark: #c5c5c5;
  --yab_news_neo_shadow_light: #ffffff;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  padding-bottom: 4em;
}

#news.neumorph .title_box {
  opacity: 0.36;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

#news.neumorph .title_box.is_revealed {
  opacity: 1;
}

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

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

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

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

#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:not(.is_revealed) .title svg {
  -webkit-filter: none;
  filter: none;
  opacity: 0.48;
}

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

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

#news.neumorph .filter_btn {
  border-radius: 999px;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  color: #6b6968;
  box-shadow:
    0.35em 0.35em 0.7em var(--yab_news_neo_shadow_dark),
    -0.35em -0.35em 0.7em var(--yab_news_neo_shadow_light);
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
  -webkit-transition: color 0.25s ease, box-shadow 0.35s ease, background 0.35s ease;
  transition: color 0.25s ease, box-shadow 0.35s ease, background 0.35s ease;
}

#news.neumorph .filter_btn:hover {
  opacity: 1;
  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 .filter_unit.is_open .filter_btn {
  box-shadow:
    inset 0.35em 0.35em 0.7em var(--yab_news_neo_shadow_dark),
    inset -0.3em -0.3em 0.65em var(--yab_news_neo_shadow_light);
  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 .filter_menu {
  border: none;
  border-radius: 1em;
  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);
  overflow: hidden;
}

#news.neumorph .filter_menu .filter_option {
  color: #6b6968;
  background: transparent;
  -webkit-transition: color 0.2s ease, background 0.25s ease, text-shadow 0.25s ease;
  transition: color 0.2s ease, background 0.25s ease, text-shadow 0.25s ease;
}

#news.neumorph .filter_menu .filter_option:hover,
#news.neumorph .filter_menu .filter_option.active {
  background: rgba(0, 147, 219, 0.12);
  color: #0093db;
  color: var(--color2);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(0, 110, 160, 0.25);
}

#news.neumorph .filter_tag {
  border-radius: 999px;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  color: #6b6968;
  box-shadow:
    0.3em 0.3em 0.65em var(--yab_news_neo_shadow_dark),
    -0.3em -0.3em 0.65em var(--yab_news_neo_shadow_light);
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
  -webkit-transition: color 0.25s ease, background 0.35s ease, box-shadow 0.35s ease, text-shadow 0.25s ease;
  transition: color 0.25s ease, background 0.35s ease, box-shadow 0.35s ease, text-shadow 0.25s ease;
}

#news.neumorph .filter_tag:hover {
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  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 .filter_tag.active {
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  color: #0093db;
  color: var(--color2);
  box-shadow:
    inset 0.3em 0.3em 0.65em var(--yab_news_neo_shadow_dark),
    inset -0.25em -0.25em 0.55em var(--yab_news_neo_shadow_light);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(0, 110, 160, 0.35);
}

#news.neumorph .archive_list .item:not(:last-child) {
  margin: 0 auto 1.15em;
}

#news.neumorph .archive_list .item a {
  position: relative;
  isolation: isolate;
  gap: 1.5em;
  padding: 1.15em 1.4em;
  border-radius: 1em;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  color: #6b6968;
  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.25s ease, background 0.4s ease, box-shadow 0.4s ease;
  transition: color 0.25s ease, background 0.4s ease, box-shadow 0.4s ease;
}

#news.neumorph .archive_list .item a::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;
}

#news.neumorph .archive_list .item a > * {
  position: relative;
  z-index: 1;
}

#news.neumorph .archive_list .item .meta,
#news.neumorph .archive_list .item .labels {
  position: relative;
  z-index: 1;
}

#news.neumorph .archive_list .item a:hover {
  color: #0093db;
  color: var(--color2);
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  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);
}

#news.neumorph .archive_list .item a:hover::before {
  opacity: 1;
}

#news.neumorph .archive_list .item time {
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

#news.neumorph .archive_list .item a:hover time,
#news.neumorph .archive_list .item a:hover .title {
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(0, 110, 160, 0.35);
}

#news.neumorph .archive_list .item .category {
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: #00a0d6;
  background: var(--category-color, #00a0d6);
  color: #fff;
  font-weight: 700;
  font-size: 0.8em;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: none;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#news.neumorph .archive_list .item a:hover .category {
  background: #fff;
  color: var(--category-color, var(--color2));
  box-shadow: none;
  text-shadow: none;
}

#news.neumorph .hot_archive_list .item a.card {
  position: relative;
  isolation: isolate;
  padding: 0.85em 0.85em 1em;
  border-radius: 1em;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  color: #6b6968;
  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.25s ease, background 0.4s ease, box-shadow 0.4s ease, opacity 0.2s ease;
  transition: color 0.25s ease, background 0.4s ease, box-shadow 0.4s ease, opacity 0.2s ease;
}

#news.neumorph .hot_archive_list .item a.card::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;
}

#news.neumorph .hot_archive_list .item a.card > * {
  position: relative;
  z-index: 1;
}

#news.neumorph .hot_archive_list .item a.card:hover {
  opacity: 1;
  color: #6b6968;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  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);
}

#news.neumorph .hot_archive_list .item a.card:hover::before {
  opacity: 1;
}

#news.neumorph .hot_archive_list .item .thumb {
  position: relative;
  border-radius: 0.75em;
  overflow: hidden;
  isolation: isolate;
  background: #dcdcdc;
}

#news.neumorph .hot_archive_list .item .thumb::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0.35em 0.35em 0.7em rgba(140, 140, 140, 0.45),
    inset -0.25em -0.25em 0.55em rgba(255, 255, 255, 0.65);
}

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

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

#news.neumorph .hot_archive_list .item a.card:hover .thumb img {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}

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

#news.neumorph .news_pagination_prev,
#news.neumorph .news_pagination_next,
#news.neumorph .news_pagination_page {
  border: none;
  border-radius: 999px;
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  color: #6b6968;
  box-shadow:
    0.3em 0.3em 0.65em var(--yab_news_neo_shadow_dark),
    -0.3em -0.3em 0.65em var(--yab_news_neo_shadow_light);
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
  -webkit-transition: color 0.25s ease, background 0.35s ease, box-shadow 0.35s ease;
  transition: color 0.25s ease, background 0.35s ease, box-shadow 0.35s ease;
}

#news.neumorph a.news_pagination_prev:hover,
#news.neumorph a.news_pagination_next:hover,
#news.neumorph a.news_pagination_page:hover,
#news.neumorph a.news_pagination_prev:focus-visible,
#news.neumorph a.news_pagination_next:focus-visible,
#news.neumorph a.news_pagination_page:focus-visible {
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  border-color: transparent;
  color: #0093db;
  color: var(--color2);
  box-shadow:
    inset 0.3em 0.3em 0.65em var(--yab_news_neo_shadow_dark),
    inset -0.25em -0.25em 0.55em var(--yab_news_neo_shadow_light);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(0, 110, 160, 0.35);
}

#news.neumorph .news_pagination_page.current {
  background: #e8e8e8;
  background: var(--yab_news_neo_bg);
  border-color: transparent;
  color: #0093db;
  color: var(--color2);
  box-shadow:
    inset 0.3em 0.3em 0.65em var(--yab_news_neo_shadow_dark),
    inset -0.25em -0.25em 0.55em var(--yab_news_neo_shadow_light),
    0 0 0 0.15em rgba(0, 147, 219, 0.22);
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.95),
    -1px -1px 0 rgba(0, 110, 160, 0.35);
}

#news.neumorph .news_pagination_ellipsis {
  color: #8a8887;
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #b5b5b5;
}

/* main_title：ニューモ彫り込み（青グラデ→灰＋白／灰 shadow） */
#news.neumorph .main_title span.main svg {
  -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 .main_title span.main svg path {
  fill: #7a7877;
}

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

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

body.yab_news_soft #news.neumorph .inner {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------- order made ------------------------------------------------------------------- */
#order_made .title_box h2.title.text_only {
  height: auto;
  max-height: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

#order_made .inner {
  margin: 0 auto;
}

#order_made .content_section:not(:last-child) {
  margin: 0 auto 4em;
}

#order_made .section_title {
  margin: 0 auto 1.5em;
  padding: 0 0 0.35em;
  border-bottom: 3px solid #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.75em;
  line-height: 1.4;
}

#order_made .overview_box {
  gap: 3em;
}

#order_made .overview_box .text {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#order_made .overview_box .text h4 {
  margin: 0 auto 1em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.6;
}

#order_made .overview_box .text p {
  margin: 0;
  line-height: 2;
  font-family: var(--font-body);
  font-weight: 700;
}

#order_made .overview_box .visual {
  width: calc(50% - 1.5em);
  -webkit-flex: 0 0 calc(50% - 1.5em);
  flex: 0 0 calc(50% - 1.5em);
  min-width: 0;
}

#order_made .photo_placeholder {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #d9d9d9;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.1em;
}

#order_made .example_grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2.5em 2em;
}

#order_made .example_item {
  width: calc((100% - 2em) / 2);
  -webkit-flex: 0 0 calc((100% - 2em) / 2);
  flex: 0 0 calc((100% - 2em) / 2);
  min-width: 0;
}

#order_made .example_item .photo_placeholder {
  margin: 0 auto 1em;
}

#order_made .example_item h4 {
  margin: 0 auto 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.6;
}

#order_made .example_item p {
  margin: 0;
  line-height: 1.8;
  font-family: var(--font-body);
  font-weight: 700;
}

#order_made .works_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2em;
  margin: 0 auto 2.5em;
  padding: 0;
  list-style: none;
}

#order_made .works_list.landing_pickup .item {
  width: calc((100% - 4em) / 3);
  -webkit-flex: 0 0 calc((100% - 4em) / 3);
  flex: 0 0 calc((100% - 4em) / 3);
  min-width: 0;
}

#order_made .works_list.landing_pickup .item .card {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0.35em 0.5em 0.35em 0.35em;
  background: #fff;
}

#order_made .works_list.landing_pickup .item .visual {
  width: 100%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

#order_made .works_list.landing_pickup .item .visual .bg {
  overflow: hidden;
}

#order_made .works_list.landing_pickup .item .text {
  width: 100%;
  margin: 0.75em auto 0;
  padding: 0 0.15em 0.5em;
  position: relative;
  z-index: 2;
}

#order_made .works_list.landing_pickup .item .card:hover {
  color: var(--color2);
  background: #fff;
}

#order_made .works_list.landing_pickup .item .card:hover .text .title {
  color: var(--color2);
}

#order_made .archive_empty {
  margin: 0 auto 2em;
  line-height: 2;
  font-family: var(--font-body);
  font-weight: 700;
}

#order_made .view_link_box {
  margin: 0;
}

@media screen and (max-width: 1024px) {

  #order_made .works_list.landing_pickup .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }
}

@media screen and (max-width: 768px) {

  #order_made .overview_box {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2em;
  }

  #order_made .overview_box .text,
  #order_made .overview_box .visual {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #order_made .example_item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }

  #order_made .works_list.landing_pickup .item {
    width: calc((100% - 2em) / 2);
    -webkit-flex: 0 0 calc((100% - 2em) / 2);
    flex: 0 0 calc((100% - 2em) / 2);
  }

  #order_made .photo_placeholder {
    font-size: 1.5em;
  }

}

@media screen and (max-width: 480px) {
  #order_made .example_item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #order_made .works_list.landing_pickup .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}

#order_made .overview_box .visual img,
#order_made .example_item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
  object-fit: cover;
}

#order_made .example_item img {
  margin: 0 auto 1em;
}

/* ------------------------------------------------------------------- order made list / single ------------------------------------------------------------------- */
#order_made_list .inner {
  margin: var(--content-margin) auto 0;
}

#order_made_list .lead {
  margin: 0 auto 3em;
  max-width: 52em;
  line-height: 2;
  font-family: var(--font-body);
  font-weight: 700;
}

#order_made_list .filter_box {
  position: relative;
  z-index: 30;
  gap: 1em;
  margin: 0 auto 2em;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#order_made_list .filter_unit {
  position: relative;
}

#order_made_list .filter_unit.is_open {
  z-index: 2;
}

#order_made_list .filter_unit.is_open .filter_menu {
  z-index: 1000;
}

#order_made_list .filter_btn {
  gap: 0.75em;
  padding: 0.65em 1.25em;
  border: none;
  background: var(--color2);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

#order_made_list .filter_btn:hover {
  opacity: 0.85;
}

#order_made_list .filter_btn .icon {
  font-size: 0.65em;
  line-height: 1;
}

#order_made_list .filter_menu {
  position: absolute;
  top: calc(100% + 0.35em);
  left: 0;
  z-index: 20;
  min-width: 100%;
  max-width: 18em;
  max-height: 20em;
  margin: 0;
  padding: 0.35em 0;
  list-style: none;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.12);
}

#order_made_list .filter_menu .filter_option {
  display: block;
  width: 100%;
  padding: 0.65em 1.25em;
  border: none;
  background: transparent;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}

#order_made_list .filter_menu .filter_option:hover,
#order_made_list .filter_menu .filter_option.active {
  background: var(--color2);
  color: #fff;
}

#order_made_list .filter_unit.filter_search {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.75em;
  -webkit-flex: 1 1 14em;
  flex: 1 1 14em;
  min-width: 12em;
}

#order_made_list .filter_search_label {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  font-weight: 700;
  white-space: nowrap;
}

#order_made_list .filter_search_input {
  width: 100%;
  padding: 0.65em 1em;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.4;
}

#order_made_list .filter_search_input:focus {
  outline: none;
  border-color: var(--color2);
}

#order_made_list .works_archive_box {
  margin: 0 auto 4em;
}

#order_made_list .works_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2em;
  margin: 0 auto 3em;
  padding: 0;
  list-style: none;
}

#order_made_list .works_list .item {
  width: calc((100% - 2em) / 2);
  -webkit-flex: 0 0 calc((100% - 2em) / 2);
  flex: 0 0 calc((100% - 2em) / 2);
  min-width: 0;
  margin: 0;
}

#order_made .works_list.landing_pickup .item .card,
#order_made_list .works_list .item .card {
  color: #111;
  text-decoration: none;
  -webkit-transition: color 0.2s ease, box-shadow 0.2s ease;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

#order_made_list .works_list .item .card {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-transition: color 0.2s ease, box-shadow 0.25s ease, -webkit-transform 0.25s ease;
  transition: color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

#order_made_list .works_list .item .card:hover {
  color: var(--color2);
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}

#order_made_list .works_list .item .card:hover .text .title {
  color: #0093db;
  color: var(--color2, #0093db);
}

#order_made_list .works_list .item .card:hover .text .tags {
  color: #0093db;
  color: var(--color2, #0093db);
}

#order_made_list .works_list .item .card:hover .visual .bg img {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

#order_made_list .works_list .item .visual {
  width: 100%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

#order_made .works_list.landing_pickup .item .visual .bg,
#order_made_list .works_list .item .visual .bg {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 導入事例一覧：画像は 16:9。オフセット影は画像を暗く見せるため付けない */
#order_made_list .works_list .item .visual .bg {
  aspect-ratio: 16 / 9;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

#order_made .works_list.landing_pickup .item .visual .bg:after {
  content: "";
  position: absolute;
  top: 3%;
  left: 3%;
  width: 100%;
  height: 100%;
  background: var(--color2);
  opacity: 0.45;
  z-index: -1;
}

#order_made_list .works_list .item .visual .bg:after {
  content: none;
  display: none;
}

#order_made .works_list.landing_pickup .item .visual .bg img,
#order_made_list .works_list .item .visual .bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
}

#order_made .works_list.landing_pickup .item .visual .more {
  display: none;
}

#order_made_list .works_list .item .visual .more {
  display: none;
}

#order_made_list .works_list .item .text {
  width: 100%;
  margin: 0.75em auto 0;
  padding: 0 1em 1.15em;
  position: relative;
  z-index: 2;
}

#order_made .works_list.landing_pickup .item .text>*,
#order_made_list .works_list .item .text>* {
  margin: 0 auto 0.75em;
}

#order_made .works_list.landing_pickup .item .text .meta,
#order_made_list .works_list .item .text .meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1.5;
  color: #807e7d;
}

#order_made .works_list.landing_pickup .item .text .meta .label,
#order_made_list .works_list .item .text .meta .label {
  margin: 0 0 0 0.75em;
}

#order_made .works_list.landing_pickup .item .text .title,
#order_made_list .works_list .item .text .title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1.55;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#order_made .works_list.landing_pickup .item .text .client,
#order_made_list .works_list .item .text .client {
  display: block;
  color: #807e7d;
  font-size: 0.95em;
}

#order_made .works_list.landing_pickup .item .text .excerpt,
#order_made_list .works_list .item .text .excerpt {
  line-height: 1.9;
  font-weight: 700;
}

#order_made .works_list.landing_pickup .item .text .tags,
#order_made_list .works_list .item .text .tags {
  margin: 0.5em auto 0;
  color: var(--color2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1.7;
}

#order_made_list .archive_empty {
  margin: 0 auto 3em;
  line-height: 2;
  font-weight: 700;
}

#order_made_list .works_pagination_box {
  margin: 0 auto 3em;
}

#order_made_list .works_pagination {
  margin: 0 auto;
}

#order_made_list .works_pagination_inner {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.75em 1.25em;
}

#order_made_list .works_pagination_prev,
#order_made_list .works_pagination_next {
  display: inline-block;
  padding: 0.5em 1.25em;
  border: 1px solid #111;
  border: 1px solid var(--color2, #0093db);
  border-radius: 999px;
  background: transparent;
  color: #111;
  color: var(--color2, #0093db);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.4;
  cursor: pointer;
  -webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

#order_made_list .works_pagination_prev:hover,
#order_made_list .works_pagination_next:hover,
#order_made_list .works_pagination_prev:focus-visible,
#order_made_list .works_pagination_next:focus-visible {
  background: var(--color2, #0093db);
  border-color: var(--color2, #0093db);
  color: #fff;
}

#order_made_list .works_pagination_pages {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.35em;
}

#order_made_list .works_pagination_page {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 0.55em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

#order_made_list button.works_pagination_page:hover,
#order_made_list button.works_pagination_page:focus-visible {
  border-color: var(--color2, #0093db);
  color: var(--color2, #0093db);
}

#order_made_list .works_pagination_page.current {
  border-color: var(--color2, #0093db);
  background: var(--color2, #0093db);
  color: #fff;
  cursor: default;
}

#order_made_list .works_pagination_ellipsis {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  color: #888;
  font-weight: 700;
}

#order_made_list .load_more_box {
  margin: 0 auto 3em;
}

#order_made_list .load_more_btn {
  display: inline-block;
  min-width: 12em;
  padding: 0.85em 2em;
  border: 2px solid #111;
  background: transparent;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.4;
  cursor: pointer;
  -webkit-transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#order_made_list .load_more_btn:hover,
#order_made_list .load_more_btn:focus-visible {
  border-color: var(--color2);
  color: var(--color2);
}

#order_made_list .load_more_btn:disabled,
#order_made_list .load_more_btn.loading {
  opacity: 0.6;
  cursor: wait;
}

#order_made_list .view_link_box {
  margin: 0;
  padding-top: 1em;
  border-top: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
  #order_made_list .lead {
    margin: 0 auto 2em;
    font-size: 0.95em;
  }

  #order_made_list .filter_box {
    width: 100%;
    gap: 0.75em;
  }

  #order_made_list .filter_unit:not(.filter_search) {
    -webkit-flex: 1 1 calc(33.333% - 0.5em);
    flex: 1 1 calc(33.333% - 0.5em);
    min-width: 0;
  }

  #order_made_list .filter_btn {
    width: 100%;
    padding: 0.65em 0.5em;
    font-size: 0.85em;
    -webkit-justify-content: center;
    justify-content: center;
  }

  #order_made_list .filter_unit.filter_search {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  #order_made_list .filter_menu {
    min-width: 11em;
    max-width: calc(100vw - 2.5rem);
    width: max-content;
  }

  #order_made_list .filter_unit:nth-child(3) .filter_menu {
    left: auto;
    right: 0;
  }

  #order_made_list .filter_unit:nth-child(2) .filter_menu {
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #order_made_list .filter_menu .filter_option {
    white-space: normal;
    word-break: break-word;
  }

  #order_made_list .works_list {
    gap: 1.5em;
  }

  #order_made_list .works_list .item {
    width: calc((100% - 1.5em) / 2);
    -webkit-flex: 0 0 calc((100% - 1.5em) / 2);
    flex: 0 0 calc((100% - 1.5em) / 2);
  }

  #order_made_list .works_list .item .text {
    padding: 0 0.75em 1em;
  }

}

@media screen and (max-width: 480px) {
  #order_made_list .works_list .item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}

#order_made_single:has(.main_title):after {
  display: none;
  content: none;
}

#order_made_single:has(.main_title) .main_title~.inner {
  margin: var(--content-margin) auto 0;
}

#order_made_single .works_single {
  margin: 0 auto;
}

#order_made_single .view_link_box {
  margin: 0 auto;
  gap: 1em;
}

@media (max-width: 768px) {
  #order_made_single .view_link_box {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------------- contact ------------------------------------------------------------------- */
#contact {
  padding-bottom: 0;
}

#contact .main_title {
  margin-bottom: 2em;
}

#contact .contact_nav {
  max-width: var(--inner);
  margin: 0 auto 1.5em;
}

#faq,
#contact_phone,
#contact_mail {
  padding-top: 0;
  scroll-margin-top: 6em;
}

#contact_phone .title_box h2.title.text_only,
#contact_mail .title_box h2.title.text_only,
#faq .title_box h2.title.text_only {
  height: auto;
  max-height: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.3;
  color: #111;
}

#contact_phone .inner,
#contact_mail .inner {
  margin: 0 auto;
}

#faq .inner {
  margin: 0 auto;
}

#faq .faq_search {
  margin: 0 auto 2.5em;
  padding: 1.5em;
  background: #fff;
  text-align: center;
}

#faq .faq_search_lead {
  margin: 0 0 1em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #111;
  text-align: center;
}

#faq .faq_search_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#faq .faq_search_form {
  position: relative;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 1em;
}

#faq .faq_search_input {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 3em;
  padding: 0 1em;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: 1em;
  line-height: 1.4;
  color: #111;
  text-align: left;
}

#faq .faq_search_input:focus {
  outline: none;
  border-color: #0093db;
  border-color: var(--color2);
}

#faq .faq_search_submit {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: block;
  width: auto;
  min-width: 10em;
  height: 3em;
  margin: 0 auto;
  padding: 0 2em;
  border: none;
  background: #0093db;
  background: var(--color2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0.06em;
  color: #fff;
  cursor: pointer;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

#faq .faq_search_submit:hover {
  background: #111;
}

#faq .faq_search_empty {
  margin: 1em 0 0;
  color: #666;
  text-align: center;
}

#faq .page_nav {
  margin: 0 auto 2.5em;
}

#faq .faq_list_title {
  margin-bottom: 1.5em;
}

#faq .faq_cat {
  scroll-margin-top: 6em;
}

#faq .faq_cat:not(:last-child) {
  margin: 0 auto 3em;
}

#faq .faq_cat.is-hidden {
  display: none;
}

#faq .faq_cat_title {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.65em;
  margin: 0 0 1.15em;
  padding: 0.5em 0 0.6em 1em;
  border-bottom: 3px solid #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 1.8rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #111;
}

#faq .faq_cat_title:before {
  content: "";
  position: absolute;
  top: 0.5em;
  bottom: 0.6em;
  left: 0;
  width: 5px;
  background: #0093db;
  background: var(--color2);
}

#faq .faq_box_list {
  background: #fff;
  border: 1px solid #e0e0e0;
  overflow: hidden;
}

#faq .faq_box {
  border-bottom: 1px solid #e0e0e0;
}

#faq .faq_box.is-hidden {
  display: none;
}

#faq .faq_cat .faq_box:last-child,
#faq .faq_box_list>.faq_box:last-child {
  border-bottom: none;
}

#faq .faq_q {
  gap: 1.25em;
  padding: 1.2em 1.35em;
  cursor: pointer;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: background 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, color 0.25s ease;
}

#faq .faq_box:not(.active) .faq_q:hover {
  background: #f3f8fc;
}

#faq .faq_box.active .faq_q {
  background: #0093db;
  background: var(--color2);
  color: #fff;
}

#faq .faq_q_body {
  gap: 0.75em;
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: baseline;
  align-items: baseline;
}

#faq .faq_mark {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 1.35em;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.65;
  letter-spacing: 0.02em;
  text-align: center;
  background: none;
}

#faq .faq_mark.q {
  color: #0093db;
  color: var(--color2);
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
}

#faq .faq_box.active .faq_mark.q {
  color: #fff;
}

#faq .faq_mark.a {
  color: #0093db;
  color: var(--color2);
}

#faq .faq_q_text {
  margin: 0;
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  line-height: 1.65;
  color: #111;
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
}

#faq .faq_box.active .faq_q_text {
  color: #fff;
}

#faq .faq_toggle {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 2.4em;
  height: 2.4em;
  padding: 0;
  border: 1px solid #111;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#faq .faq_toggle_icon {
  position: relative;
  display: block;
  width: 0.9em;
  height: 0.9em;
}

#faq .faq_toggle_icon:before,
#faq .faq_toggle_icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #111;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: background 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, transform 0.2s ease;
}

#faq .faq_toggle_icon:after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}

#faq .faq_box.active .faq_toggle_icon:after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

#faq .faq_box.active .faq_toggle {
  border-color: #fff;
  background: #fff;
}

#faq .faq_toggle:hover {
  border-color: var(--color2);
  background: var(--color2);
}

#faq .faq_box.active .faq_toggle:hover {
  border-color: #fff;
  background: #fff;
}

#faq .faq_box.active .faq_toggle_icon:before,
#faq .faq_box.active .faq_toggle_icon:after {
  background: #0093db;
  background: var(--color2);
}

#faq .faq_toggle:hover .faq_toggle_icon:before,
#faq .faq_toggle:hover .faq_toggle_icon:after {
  background: #fff;
}

#faq .faq_box.active .faq_toggle:hover .faq_toggle_icon:before,
#faq .faq_box.active .faq_toggle:hover .faq_toggle_icon:after {
  background: #0093db;
  background: var(--color2);
}

#faq .faq_a {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.35s ease;
  transition: max-height 0.35s ease;
}

#faq .faq_box.active .faq_a {
  max-height: 200em;
}

#faq .faq_a_frame {
  gap: 0.85em;
  margin: 0;
  padding: 1.35em 1.5em 1.5em;
  border: none;
  border-top: 1px solid #d4e8f4;
  background: #eef6fb;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: baseline;
  align-items: baseline;
}

#faq .faq_a_frame .faq_mark.a {
  line-height: 1.9;
}

#faq .faq_a_inner {
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1.02em;
  line-height: 1.9;
  color: #333;
}

#faq .faq_a_inner p {
  margin: 0;
}

#faq .faq_a_inner p:not(:last-child) {
  margin-bottom: 0.85em;
}

#faq .faq_empty {
  margin: 0;
  padding: 2em;
  background: #fff;
  text-align: center;
  color: #666;
}

#faq .faq_more,
#faq .faq_page_link {
  margin: 1.5em 0 0;
}

#faq .faq_contact_cta {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 3em auto 0;
  padding: clamp(2.5em, 5vw, 3.5em) 1.5em;
  background: #0093db;
  background: var(--color2);
  text-align: center;
}

#faq .faq_contact_cta_text {
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  line-height: 1.7;
  color: #fff;
  text-align: center;
}

#faq .faq_contact_btn {
  gap: 1em;
  margin: 1.75em auto 0;
  padding: 1.15em 2.6em;
  border: 2px solid #fff;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.8vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  -webkit-transition: background 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, color 0.25s ease;
}

#faq .faq_contact_btn .icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

#faq .faq_contact_btn .icon svg {
  --content-color: #fff;
  --height: 2.2em;
  height: var(--height);
  width: auto;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
}

#faq .faq_contact_btn .icon svg path,
#faq .faq_contact_btn .icon svg circle {
  stroke: currentColor;
  -webkit-transition: stroke 0.25s ease;
  transition: stroke 0.25s ease;
}

#faq .faq_contact_btn:hover {
  background: #fff;
  color: #0093db;
  color: var(--color2);
}

#faq .faq_contact_btn:hover .icon svg {
  --content-color: var(--color2);
  -webkit-transform: translateX(0.2em);
  transform: translateX(0.2em);
}

#contact_phone .hours {
  margin: 0 auto 2.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.6;
  color: #111;
}

#contact_phone .phone_grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 3em 2em;
}

#contact_phone .phone_item {
  width: calc((100% - 2em) / 2);
  -webkit-flex: 0 0 calc((100% - 2em) / 2);
  flex: 0 0 calc((100% - 2em) / 2);
}

#contact_phone .phone_cat {
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.75em;
  padding: 0 0 0.35em;
  border-bottom: 3px solid #111;
}

#contact_phone .phone_cat svg {
  display: block;
  width: auto;
  height: 2em;
  max-width: 100%;
}

#contact_phone .phone_cat svg path {
  fill: #111;
}

#contact_phone .phone_dept {
  margin: 0;
  color: #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.6;
}

#contact_phone .phone_num {
  margin: 0.5em 0 0;
}

#contact_phone .phone_num a {
  display: inline-block;
  text-decoration: none;
  line-height: 1;
}

#contact_phone .phone_num a svg {
  display: block;
  width: auto;
  height: clamp(2.8rem, 5vw, 4.2rem);
  max-width: 100%;
}

#contact_phone .phone_num a svg path {
  fill: #111;
  -webkit-transition: fill 0.2s ease;
  transition: fill 0.2s ease;
}

#contact_phone .phone_num a:hover svg path {
  fill: #0093db;
  fill: var(--color2);
}

#contact_mail .form_section:not(:last-child) {
  margin: 0 auto 3em;
}

#contact_mail .form_section_title {
  margin: 0 auto 1.5em;
  padding: 0 0 0.35em;
  border-bottom: 3px solid #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.4;
}

#contact_mail .wpcf7,
#contact_mail .wpcf7 form {
  width: 100%;
  max-width: none;
  margin: 0;
}

#contact_mail .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

#contact_mail .wpcf7-not-valid-tip {
  display: block;
  margin: 0.4em 0 0;
  color: #c0392b;
  font-size: 0.85em;
  line-height: 1.4;
}

#contact_mail .wpcf7-response-output {
  margin: 1.5em 0 0;
  padding: 1em 1.25em;
  border: 2px solid #111;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.95em;
  line-height: 1.6;
}

#contact_mail .wpcf7-mail-sent-ok,
#contact_mail form.sent .wpcf7-response-output {
  border-color: #0093db;
  border-color: var(--color2);
}

#contact_mail .wpcf7-validation-errors,
#contact_mail .wpcf7-spam-blocked,
#contact_mail form.invalid .wpcf7-response-output,
#contact_mail form.failed .wpcf7-response-output {
  border-color: #c0392b;
}

#contact_mail .form_notice {
  margin: 0 auto 1.5em;
  padding: 1em 1.25em;
  border: 2px solid #c0392b;
  background: #fff;
  font-family: var(--font-body);
  line-height: 1.6;
}

#contact_mail .form_privacy {
  margin: 2em auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1em;
  line-height: 1.6;
}

#contact_mail .form_privacy .wpcf7-acceptance,
#contact_mail .form_privacy .wpcf7-list-item {
  margin: 0;
}

#contact_mail .form_privacy label {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}

#contact_mail .form_privacy a {
  color: #0093db;
  color: var(--color2);
  text-decoration: underline;
}

#contact_mail .form_privacy input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#contact_mail .form_row {
  gap: 1.5em;
  margin: 0 auto 1.25em;
}

#contact_mail .form_row:last-child {
  margin-bottom: 0;
}

#contact_mail .form_label {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.5em;
  width: 14em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

#contact_mail .form_row.v-start .form_label {
  padding-top: 0.85em;
}

#contact_mail .form_label label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.4;
}

#contact_mail .form_label .required {
  display: inline-block;
  padding: 0.2em 0.45em;
  background: #3291db;
  background: var(--color2);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72em;
  line-height: 1.2;
  white-space: nowrap;
}

#contact_mail .form_field {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

#contact_mail .form_field input[type="text"],
#contact_mail .form_field input[type="email"],
#contact_mail .form_field input[type="tel"],
#contact_mail .form_field textarea {
  width: 100%;
  padding: 0.85em 1em;
  border: none;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 1em;
  line-height: 1.5;
}

#contact_mail .form_field textarea {
  min-height: 12em;
  resize: vertical;
}

#contact_mail .form_field textarea#yab_contact_address {
  min-height: 5em;
}

#contact_mail .form_field input::placeholder,
#contact_mail .form_field textarea::placeholder {
  color: #aaa;
}

#contact_mail .form_field input:focus,
#contact_mail .form_field textarea:focus {
  outline: 2px solid rgba(0, 147, 219, 0.35);
  outline-offset: 0;
}

#contact_mail .form_submit {
  margin: 3em auto 0;
  text-align: center;
}

#contact_mail .form_submit input[type="submit"],
#contact_mail .form_submit button {
  display: inline-block;
  padding: 0.75em 3em;
  border: none;
  border-radius: 9em;
  background: #3291db;
  background: var(--color2);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.4;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

#contact_mail .form_submit input[type="submit"]:hover,
#contact_mail .form_submit button:hover {
  opacity: 0.85;
}

#contact_mail .form_submit input[type="submit"]:disabled,
#contact_mail .form_submit button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media screen and (max-width: 768px) {
  #contact .contact_nav {
    margin: 0 auto 1.25em;
    padding: 0 var(--side-padding);
  }

  #contact_phone .phone_item {
    width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  #faq .faq_box_list {
    /* padding: 1.5em; */
  }

  #faq .faq_search_submit {
    width: auto;
    min-width: 12em;
  }


  #faq .faq_contact_cta {
    padding: 2.25em 1.25em;
  }

  #faq .faq_contact_btn {
    width: 100%;
    max-width: 26em;
    padding: 1.1em 1.75em;
    -webkit-justify-content: center;
    justify-content: center;
  }

  #faq .faq_contact_btn .icon svg {
    --height: 2em;
  }

  #contact_phone .phone_num a {
    font-size: clamp(2rem, 6vw, 2.8rem);
  }

  #contact_mail .form_row {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 0.5em;
  }

  #contact_mail .form_label {
    width: 100%;
  }

  #contact_mail .form_row.v-start .form_label {
    padding-top: 0;
  }

  #contact_mail .form_field input[type="text"],
  #contact_mail .form_field input[type="email"],
  #contact_mail .form_field input[type="tel"],
  #contact_mail .form_field textarea {
    font-size: 1.6rem;
  }

  #contact_mail .form_submit input[type="submit"],
  #contact_mail .form_submit button {
    width: 100%;
  }
}

/* ------------------------------------------------------------------- contact_thanks ------------------------------------------------------------------- */
#contact_thanks {
  margin: 0 auto var(--section-margin);
}

#contact_thanks .main_title {
  margin: 0 auto 3em;
  text-align: center;
}

#contact_thanks .thanks_head {
  background: #f0f0f0;
  padding: 1.75em var(--side-padding, 1.5em);
  text-align: center;
}

#contact_thanks .thanks_head_title {
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.4;
  color: #222;
  text-align: center;
}

#contact_thanks .inner {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 0 var(--side-padding, 1.5em);
}

#contact_thanks .thanks_message {
  margin: 0 auto;
  padding: 4.5em 0 3.5em;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 2.1;
  color: #222;
}

#contact_thanks .thanks_message p {
  margin: 0 auto;
}

#contact_thanks .thanks_message p + p {
  margin-top: 1.35em;
}

#contact_thanks .thanks_links {
  gap: 1.5em 2.5em;
  margin: 0 auto 3em;
  padding-top: 0.5em;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  #contact_thanks .thanks_head {
    padding: 1.4em 1.25em;
  }

  #contact_thanks .thanks_message {
    padding: 3.5em 0 2.75em;
    font-size: 15px;
    line-height: 2;
  }

  #contact_thanks .thanks_links {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    margin-bottom: 2.5em;
  }
}

/* ------------------------------------------------------------------- contact_banner ------------------------------------------------------------------- */
#contact_banner {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 360px;
  padding: 6rem var(--side-padding);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

#contact_banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: #001528;
  pointer-events: none;
}

#contact_banner .contact_bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

#contact_banner .contact_bg img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
}

#contact_banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 18, 42, 0.72);
  rgba(0, 8, 24, 0.78) 100%);
  pointer-events: none;
}

#contact_banner .contact_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--inner);
  margin: 0 auto;
}

#contact_banner .title_box {
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#contact_banner .title_box>span {
  font-weight: 500;
}

#contact_banner .title_box>span:after {
  background: #fff;
}

#contact_banner .title_box h2.title {
  text-align: left;
}

#contact_banner .link_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 2em;
  margin: 2.5em 0 0 4em;
  pointer-events: none;
}

#contact_banner .link_box .view_link {
  color: #fff;
  pointer-events: auto;
}

#contact_banner .link_box .view_link .icon svg {
  --content-color: #fff;
}

#contact_banner .link_box .view_link:hover .label {
  color: #0093db;
  color: var(--color2);
}

#contact_banner .link_box .view_link:hover .icon svg {
  --content-color: #0093db;
  --content-color: var(--color2);
}

@media screen and (max-width: 768px) {
  #contact_banner {
    min-height: 300px;
    padding: 4rem var(--side-padding);
  }

  #contact_banner .link_box {
    gap: 1.5em;
    margin: 2em 0 0;
  }

  #contact_banner .link_box .view_link .label {
    font-size: 1.25em;
  }
}

/* ------------------------------------------------------------------- 404 ------------------------------------------------------------------- */
#error-404 {
  --error-box-max: 560px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: calc(100svh - var(--header-height, 72px) - 8em);
  padding: clamp(2em, 5vh, 4em) var(--side-padding) clamp(3em, 10vh, 8em);
  text-align: center;
}

#error-404 .inner {
  width: 100%;
}

#error-404 .error_box {
  max-width: var(--error-box-max);
  margin: 0 auto;
  padding: clamp(3em, 7vw, 4.5em) clamp(2em, 5vw, 3em);
  background: #fff;
  box-shadow: 0 10px 48px rgba(0, 0, 0, 0.07);
}

#error-404 h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 7rem);
  line-height: 1;
  color: var(--color2);
  margin: 0 auto 0.35em;
}

#error-404 .message {
  font-weight: 700;
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  line-height: 1.6;
  margin: 0 auto 2em;
}

#error-404 .back-home {
  margin: 0;
}

#error-404 .back-home a {
  display: inline-block;
  min-width: 14em;
  padding: 0.9em 2.5em;
  background: var(--color2);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

#error-404 .back-home a:hover {
  opacity: 0.88;
}

@media screen and (max-width: 768px) {
  #error-404 {
    min-height: calc(100svh - var(--header-height, 72px) - 5em);
    padding-top: 1.5em;
    padding-bottom: 3em;
  }

  #error-404 .error_box {
    padding: 2.75em 1.5em;
  }

  #error-404 .back-home a {
    min-width: 0;
    width: 100%;
    max-width: 18em;
  }
}

/* -------------------------------------------------- MO-NET 検索結果ページ -------------------------------------------------- */
#monet_search .main_title {
  margin: 0 auto 2em;
}

#monet_search .inner {
  max-width: 960px;
  margin: 0 auto;
}

#monet_search .monet_search_panel {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-height, 72px) + 0.75em);
  z-index: 9;
  max-width: 960px;
  margin: 0 auto 3em;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#monet_search .monet_search_form_box {
  margin: 0;
  width: 100%;
}

#monet_search .monet-form_results {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#monet_search .monet-form_results .monet-form_filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75em 1em;
}

#monet_search .monet-form_results .monet-form_filters .filter_unit {
  margin: 0;
  min-width: 0;
}

#monet_search .monet_search_summary {
  margin: 0 0 1.5em;
  font-size: 1.6rem;
}

#monet_search .monet_search_summary strong {
  color: #0093db;
  color: var(--color2);
  font-size: 1.2em;
}

#monet_search .monet_search_empty h3 {
  margin: 0 0 0.75em;
  font-size: 1.8rem;
}

#monet_search .monet_result_list {
  display: grid;
  gap: 1.5em;
  min-width: 0;
  max-width: 100%;
}

#monet_search .monet_result_body {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 24px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

#monet_search .monet_result_card {
  border: 0;
  border-radius: 0;
  padding: 24px 28px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#monet_search .monet_result_visual {
  width: 160px;
  -webkit-flex: 0 0 160px;
  flex: 0 0 160px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-width: 0;
}

#monet_search .monet_result_main {
  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-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: 100%;
  gap: 16px;
  white-space: normal;
}

#monet_search .monet_result_main_inner {
  min-width: 0;
}

#monet_search .monet_result_img {
  width: 100%;
  min-height: 120px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#monet_search .monet_result_img.is_empty {
  display: none;
}

#monet_search .monet_result_img img {
  width: 100%;
  height: auto;
  max-height: 168px;
  object-fit: contain;
}

#monet_search .monet_result_units_btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #595757;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

#monet_search .monet_result_units_btn:hover {
  color: #0093db;
  color: var(--color2);
}

#monet_search .monet_result_units_arrow {
  display: inline-block;
  margin-left: 2px;
}

#monet_search .monet_result_info {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

#monet_search .monet_result_name {
  margin: 0 0 8px;
  font-size: 2.4rem;
  font-weight: 700;
  color: #1f81bd;
  color: var(--color2);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#monet_search .monet_result_type {
  margin: 0 0 16px;
  color: #23221f;
  font-size: 1.4rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#monet_search .monet_result_facts {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

#monet_search .monet_result_fact {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

#monet_search .monet_result_fact_label {
  display: inline-block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid #23221f;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

#monet_search .monet_result_fact_value {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.4rem;
  color: #23221f;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#monet_search .monet_result_stock {
  margin: 0;
  padding: 14px 14px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  max-width: 100%;
}

#monet_search .monet_result_stock_head {
  gap: 12px;
  margin: 0 0 6px;
}

#monet_search .monet_result_stock_title {
  margin: 0;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #23221f;
}

#monet_search .monet_result_stock_lead {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #666;
}

#monet_search .monet_result_stock_days {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#monet_search .monet_result_stock_days>li {
  margin: 0;
  padding: 0;
}

#monet_search .monet_result_stock_day {
  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-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 4px;
  min-width: 5.5em;
  padding: 8px 10px 10px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fafafa;
  text-align: center;
  box-sizing: border-box;
}

#monet_search .monet_result_stock_days>li.is_today .monet_result_stock_day {
  border-color: #0093db;
  border-color: var(--color2);
  box-shadow: 0 0 0 1px #0093db;
  box-shadow: 0 0 0 1px var(--color2);
}

#monet_search .monet_result_stock_day .date {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #23221f;
}

#monet_search .monet_result_stock_day .today_mark {
  display: inline-block;
  padding: 0 0.35em;
  border-radius: 2px;
  background: #0093db;
  background: var(--color2);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.6;
}

#monet_search .monet_result_stock_day .status {
  display: block;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
}

#monet_search .monet_result_stock_day.state_ok {
  background: #f3faf5;
  border-color: #b8dfc8;
}

#monet_search .monet_result_stock_day.state_ok .status {
  color: #0f6b3a;
}

#monet_search .monet_result_stock_day.state_warn {
  background: #fff8eb;
  border-color: #ecd49a;
}

#monet_search .monet_result_stock_day.state_warn .status {
  color: #a66b00;
}

#monet_search .monet_result_stock_day.state_none {
  background: #f5f5f5;
  border-color: #ccc;
}

#monet_search .monet_result_stock_day.state_none .status {
  color: #666;
}

#monet_search .monet_result_stock_legend {
  gap: 14px;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #e8e8e8;
  list-style: none;
  font-size: 11px;
  line-height: 1.4;
  color: #555;
}

#monet_search .monet_result_stock_legend .legend_dot {
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-right: 0.35em;
  border-radius: 50%;
  vertical-align: middle;
}

#monet_search .monet_result_stock_legend .legend_ok .legend_dot {
  background: #0f6b3a;
}

#monet_search .monet_result_stock_legend .legend_warn .legend_dot {
  background: #c99200;
}

#monet_search .monet_result_stock_legend .legend_none .legend_dot {
  background: #999;
}

#monet_search .monet_result_stock_updated {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #888;
  text-align: right;
  white-space: nowrap;
}

#monet_search .monet_result_actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#monet_search .monet_result_actions>li {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
}

#monet_search .monet_result_action {
  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;
  gap: 8px;
  min-height: 88px;
  padding: 12px 8px;
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: #23221f;
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1.35;
  text-align: center;
  box-sizing: border-box;
}

#monet_search a.monet_result_action:hover {
  border-color: #0093db;
  border-color: var(--color2);
  color: #0093db;
  color: var(--color2);
}

#monet_search .monet_result_action.is_disabled {
  background: #b5b5b5;
  border-color: #b5b5b5;
  color: #fff;
  cursor: default;
}

#monet_search .monet_result_action_icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#monet_search .monet_pagination {
  margin-top: 2.5em;
}

#monet_search .monet_pagination_inner {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.75em 1.25em;
}

#monet_search .monet_pagination_prev,
#monet_search .monet_pagination_next {
  padding: 0.5em 1.25em;
  border: 1px solid #0093db;
  border: 1px solid var(--color2);
  border-radius: 999px;
  color: #0093db;
  color: var(--color2);
  text-decoration: none;
}

#monet_search .monet_pagination_pages {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.35em;
}

#monet_search .monet_pagination_page {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 0.4em;
  border: 1px solid #0093db;
  border: 1px solid var(--color2);
  border-radius: 999px;
  color: #0093db;
  color: var(--color2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

#monet_search a.monet_pagination_page:hover,
#monet_search a.monet_pagination_page:focus-visible {
  background: #0093db;
  background: var(--color2);
  border-color: #0093db;
  border-color: var(--color2);
  color: #fff;
}

#monet_search .monet_pagination_page.current {
  background: #0093db;
  background: var(--color2);
  border-color: #0093db;
  border-color: var(--color2);
  color: #fff;
  cursor: default;
}

#monet_search .monet_pagination_ellipsis {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  font-weight: 700;
  color: #666;
}

.monet_support_modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.monet_support_modal[hidden] {
  display: none;
}

.monet_support_modal_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.monet_support_modal_panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  overflow: auto;
  padding: 28px 32px 32px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.monet_support_modal_close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #595757;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.monet_support_modal_product {
  margin: 0 0 16px;
  padding-right: 36px;
  font-size: 2rem;
  font-weight: 700;
  color: #1f81bd;
  color: var(--color2);
}

.monet_support_modal_loading,
.monet_support_modal_empty {
  margin: 0;
  font-size: 1.4rem;
  color: #595757;
}

.monet_support_modal_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 50vh;
  overflow: auto;
}

.monet_support_modal_list li {
  width: 50%;
  padding-right: 12px;
  font-size: 1.4rem;
  line-height: 1.6;
  box-sizing: border-box;
}

body.yab_monet_modal_open {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  #monet_search .monet_search_panel {
    position: static;
    margin: 0 auto 2.5em;
    padding: 0;
  }

  #monet_search .monet_result_card {
    padding: 20px 16px;
  }

  /* SP: タイトル全幅 → 画像｜定価等 → 以降100% */
  #monet_search .monet_result_body {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    -webkit-flex-wrap: unset;
    flex-wrap: unset;
    gap: 10px 14px;
    -webkit-box-align: start;
    -webkit-align-items: start;
    align-items: start;
  }

  #monet_search .monet_result_visual,
  #monet_search .monet_result_main,
  #monet_search .monet_result_main_inner,
  #monet_search .monet_result_info {
    display: contents;
  }

  #monet_search .monet_result_name {
    grid-column: 1 / -1;
    -webkit-order: 1;
    order: 1;
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
  }

  #monet_search .monet_result_type {
    grid-column: 1 / -1;
    -webkit-order: 2;
    order: 2;
    margin: 0 0 2px;
    font-size: 13px;
    line-height: 1.45;
  }

  #monet_search .monet_result_img {
    grid-column: 1;
    -webkit-order: 3;
    order: 3;
    width: 100%;
    min-width: 0;
    min-height: 0;
    -webkit-align-self: center;
    align-self: center;
  }

  #monet_search .monet_result_img.is_empty {
    display: none;
  }

  #monet_search .monet_result_img img {
    max-height: 108px;
  }

  #monet_search .monet_result_facts {
    grid-column: 2;
    -webkit-order: 3;
    order: 3;
    min-width: 0;
    margin-top: 0;
    gap: 10px;
    -webkit-align-self: center;
    align-self: center;
  }

  /* 画像なしのときは定価ブロックを全幅 */
  #monet_search .monet_result_body:not(:has(.monet_result_img:not(.is_empty))) .monet_result_facts {
    grid-column: 1 / -1;
  }

  #monet_search .monet_result_fact {
    gap: 8px;
  }

  #monet_search .monet_result_fact_label {
    min-width: 4.6em;
    font-size: 11px;
    padding: 2px 6px;
    text-align: center;
    box-sizing: border-box;
  }

  #monet_search .monet_result_fact_value {
    font-size: 14px;
    line-height: 1.4;
  }

  #monet_search .monet_result_units_btn {
    grid-column: 1 / -1;
    -webkit-order: 5;
    order: 5;
    width: 100%;
    margin-top: 2px;
    -webkit-align-self: auto;
    align-self: auto;
  }

  #monet_search .monet_result_stock {
    grid-column: 1 / -1;
    -webkit-order: 6;
    order: 6;
    width: 100%;
    padding: 12px 10px 10px;
    box-sizing: border-box;
  }

  #monet_search .monet_result_actions {
    grid-column: 1 / -1;
    -webkit-order: 7;
    order: 7;
    width: 100%;
  }

  #monet_search .monet_result_stock_head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  #monet_search .monet_result_stock_updated {
    text-align: left;
    white-space: normal;
  }

  /* SP: 日付を縦一列（1日1行）で読みやすく */
  #monet_search .monet_result_stock_days {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 6px;
  }

  #monet_search .monet_result_stock_days>li {
    width: 100%;
  }

  #monet_search .monet_result_stock_day {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
    min-width: 0;
    -webkit-flex: none;
    flex: none;
    padding: 10px 12px;
    text-align: left;
  }

  #monet_search .monet_result_stock_day .date {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    font-size: 14px;
  }

  #monet_search .monet_result_stock_day .today_mark {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-left: 0.35em;
  }

  #monet_search .monet_result_stock_day .status {
    margin-left: auto;
    text-align: right;
    font-size: 13px;
  }

  #monet_search .monet_result_stock_legend {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  #monet_search .monet_result_actions {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #monet_search .monet_result_actions>li {
    -webkit-box-flex: 1 1 calc(50% - 6px);
    -webkit-flex: 1 1 calc(50% - 6px);
    flex: 1 1 calc(50% - 6px);
  }

  .monet_support_modal_list li {
    width: 100%;
  }
}

/* ---- privacy / site_policy ---- */
#privacy .title_box h2.title.text_only,
#site_policy .title_box h2.title.text_only {
  height: auto;
  max-height: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.3;
  color: #111;
}

#privacy .inner,
#site_policy .inner {
  margin: 0 auto;
}

#privacy .policy_doc,
#site_policy .policy_doc {
  max-width: 920px;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 1.9;
  color: #222;
}

#privacy .policy_doc .lead,
#site_policy .policy_doc .lead {
  margin: 0 0 2.5em;
  font-weight: 500;
}

#privacy .policy_doc h3,
#site_policy .policy_doc h3 {
  margin: 2.5em 0 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #d8d8d8;
  font-size: clamp(1.7rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  color: #111;
}

#privacy .policy_doc h3:first-of-type,
#site_policy .policy_doc h3:first-of-type {
  margin-top: 0;
}

#privacy .policy_doc p,
#site_policy .policy_doc p {
  margin: 0 0 1.2em;
}

#privacy .policy_doc ul.dot,
#site_policy .policy_doc ul.dot {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

#privacy .policy_doc ul.dot li,
#site_policy .policy_doc ul.dot li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 0.2em;
  list-style: disc;
}

#privacy .policy_doc ol.num,
#site_policy .policy_doc ol.num {
  margin: 0.8em 0 0;
  padding-left: 1.6em;
}

#privacy .policy_doc ol.num li,
#site_policy .policy_doc ol.num li {
  margin-bottom: 0.5em;
  list-style: decimal;
}

#privacy .policy_doc .contact_info,
#site_policy .policy_doc .contact_info {
  margin: 1.5em 0 0;
  padding: 1.4em 1.6em;
  background: rgba(255, 255, 255, 0.72);
}

#privacy .policy_doc .contact_info p,
#site_policy .policy_doc .contact_info p {
  margin: 0;
}

#privacy .policy_doc .contact_info p:not(:last-child),
#site_policy .policy_doc .contact_info p:not(:last-child) {
  margin-bottom: 0.4em;
}

#privacy .policy_doc .contact_info a,
#site_policy .policy_doc a {
  color: #111;
  text-decoration: underline;
}

#privacy .policy_doc .contact_info a:hover,
#site_policy .policy_doc a:hover {
  opacity: 0.7;
}

#site_policy .policy_doc .note {
  margin-top: 0.4em;
  font-size: 1.35rem;
  color: #555;
}

@media screen and (max-width: 768px) {

  #privacy .policy_doc,
  #site_policy .policy_doc {
    font-size: 1.4rem;
    line-height: 1.85;
  }

  #privacy .policy_doc .lead,
  #site_policy .policy_doc .lead {
    margin-bottom: 2em;
  }

  #privacy .policy_doc h3,
  #site_policy .policy_doc h3 {
    margin-top: 2em;
  }

  #privacy .policy_doc .contact_info,
  #site_policy .policy_doc .contact_info {
    padding: 1.2em 1.2em;
  }

  #site_policy .policy_doc .note {
    font-size: 1.25rem;
  }
}

/* ------------------------------------------------------------------- w analyze ------------------------------------------------------------------- */
#w_analyze.w_analyze_page {
  --w-analyze-green: #0f3d2e;
  --w-analyze-accent: #a4d65e;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  font-size: 16px;
}

#w_analyze .w_analyze_nav_wrap,
#w_analyze .content_section .inner,
#w_analyze .w_analyze_dark .inner {
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

#w_analyze .w_analyze_nav_wrap {
  margin: 0 auto 2.5em;
}

#w_analyze .page_nav {
  margin: 0 auto;
}

#w_analyze .w_analyze_dark {
  background: #0f3d2e;
  background: var(--w-analyze-green);
  color: #fff;
}

#w_analyze .w_analyze_panel {
  padding: 3.5em 0;
}

#w_analyze .w_analyze_panel:not(:last-child) {
  padding-bottom: 2em;
}

#w_analyze .panel_title {
  margin: 0 0 1.25em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(25px, 3.5vw, 34px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #fff;
}

#w_analyze .intro_box .text_box p {
  margin: 0;
  line-height: 2;
  color: rgba(255, 255, 255, 0.92);
}

#w_analyze .intro_box .text_box p:not(:last-child) {
  margin-bottom: 1em;
}

#w_analyze .intro_flyer_link,
#w_analyze .detail_link_box {
  margin: 1.75em 0 0;
}

#w_analyze .detail_panel .detail_link_box {
  margin: 0;
  padding: 3.25em 0 4.25em;
  width: 100%;
  -webkit-justify-content: center;
  justify-content: center;
}

#w_analyze .detail_link_box .detail_cta {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: clamp(1.5em, 4vw, 2.75em);
  padding: 0.35em 0;
  color: #fff;
  text-decoration: none;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

#w_analyze .detail_link_box .detail_cta_text {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.45em;
  text-align: center;
}

#w_analyze .detail_link_box .detail_cta_main {
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: #fff;
  -webkit-transition: color 0.28s ease;
  transition: color 0.28s ease;
}

#w_analyze .detail_link_box .detail_cta_note {
  font-size: clamp(15px, 2.2vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  -webkit-transition: color 0.28s ease;
  transition: color 0.28s ease;
}

#w_analyze .detail_link_box .detail_cta .icon svg {
  width: clamp(3.1em, 5.5vw, 4.5em);
  height: clamp(3.1em, 5.5vw, 4.5em);
  --height: clamp(3.1em, 5.5vw, 4.5em);
  --content-color: #fff;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
}

#w_analyze .detail_link_box .detail_cta:hover .detail_cta_main,
#w_analyze .detail_link_box .detail_cta:focus-visible .detail_cta_main {
  color: #a4d65e;
  color: var(--w-analyze-accent);
}

#w_analyze .detail_link_box .detail_cta:hover .detail_cta_note,
#w_analyze .detail_link_box .detail_cta:focus-visible .detail_cta_note {
  color: #a4d65e;
  color: var(--w-analyze-accent);
}

#w_analyze .detail_link_box .detail_cta:hover .icon svg,
#w_analyze .detail_link_box .detail_cta:focus-visible .icon svg {
  --content-color: #a4d65e;
  --content-color: var(--w-analyze-accent);
  -webkit-transform: translateX(0.22em);
  transform: translateX(0.22em);
}

#w_analyze .detail_link_box .detail_cta:hover .icon svg circle,
#w_analyze .detail_link_box .detail_cta:focus-visible .icon svg circle,
#w_analyze .detail_link_box .detail_cta:hover .icon svg path[stroke],
#w_analyze .detail_link_box .detail_cta:focus-visible .icon svg path[stroke] {
  stroke: #a4d65e;
  stroke: var(--w-analyze-accent);
}

#w_analyze .intro_flyer_link .view_link,
#w_analyze .detail_link_box .view_link:not(.detail_cta) {
  color: #fff;
}

#w_analyze .intro_flyer_link .view_link .label,
#w_analyze .detail_link_box .view_link:not(.detail_cta) .label {
  font-size: clamp(16px, 2.2vw, 18px);
  letter-spacing: 0.05em;
}

#w_analyze .intro_flyer_link .view_link .icon svg,
#w_analyze .detail_link_box .view_link:not(.detail_cta) .icon svg {
  --content-color: #fff;
  --height: 2em;
}

#w_analyze .intro_flyer_link .view_link:hover,
#w_analyze .intro_flyer_link .view_link:focus-visible,
#w_analyze .detail_link_box .view_link:not(.detail_cta):hover,
#w_analyze .detail_link_box .view_link:not(.detail_cta):focus-visible {
  color: #a4d65e;
  color: var(--w-analyze-accent);
}

#w_analyze .intro_flyer_link .view_link:hover .label,
#w_analyze .intro_flyer_link .view_link:focus-visible .label,
#w_analyze .detail_link_box .view_link:not(.detail_cta):hover .label,
#w_analyze .detail_link_box .view_link:not(.detail_cta):focus-visible .label {
  color: #a4d65e;
  color: var(--w-analyze-accent);
}

#w_analyze .intro_flyer_link .view_link:hover .icon svg,
#w_analyze .intro_flyer_link .view_link:focus-visible .icon svg,
#w_analyze .detail_link_box .view_link:not(.detail_cta):hover .icon svg,
#w_analyze .detail_link_box .view_link:not(.detail_cta):focus-visible .icon svg {
  --content-color: #a4d65e;
  --content-color: var(--w-analyze-accent);
}

#w_analyze .content_section {
  padding: 3.5em 0;
  scroll-margin-top: 6em;
}

#w_analyze .section_title {
  margin: 0 0 1.25em;
  padding: 0 0 0.35em;
  border-bottom: 3px solid #111;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.45;
  letter-spacing: 0.03em;
  color: #111;
}

#w_analyze .text_box p {
  margin: 0;
  line-height: 2;
  color: #222;
  letter-spacing: 0.02em;
}

#w_analyze .text_box p:not(:last-child) {
  margin-bottom: 1em;
}

#w_analyze .comparison_lead {
  margin: 0 0 1.5em;
  line-height: 1.95;
  color: #444;
  letter-spacing: 0.02em;
}

#w_analyze .comparison_chart {
  margin: 0;
  padding: 1.5em;
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

#w_analyze .comparison_columns {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 1.25em;
}

#w_analyze .comparison_column {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
  padding: 1.25em 1.15em 1.35em;
  border-radius: 4px;
}

#w_analyze .comparison_column.standard {
  background: #f3f4f6;
}

#w_analyze .comparison_column.w_analyze {
  background: #edf6f0;
}

#w_analyze .comparison_column_head {
  margin: 0 0 0.65em;
  padding: 0.8em 0.95em;
  border-radius: 3px;
  text-align: center;
}

#w_analyze .comparison_column.standard .comparison_column_head {
  background: #6b7280;
  color: #fff;
}

#w_analyze .comparison_column.w_analyze .comparison_column_head {
  background: #0f3d2e;
  background: var(--w-analyze-green);
  color: #fff;
}

#w_analyze .comparison_column_title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

#w_analyze .comparison_column_subtitle {
  margin: 0 0 1.15em;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: #333;
  letter-spacing: 0.02em;
}

#w_analyze .comparison_steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

#w_analyze .comparison_flow {
  position: relative;
  margin: 0;
  padding: 0.75em 0.65em 1.15em;
  border: 1px dashed #b8bcc4;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
}

#w_analyze .comparison_flow::before {
  content: "フロー";
  display: block;
  margin: 0 0 0.75em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.14em;
  color: #6b7280;
}

#w_analyze .comparison_column.w_analyze .comparison_flow {
  border-color: rgba(15, 61, 46, 0.38);
  background: rgba(255, 255, 255, 0.82);
}

#w_analyze .comparison_column.w_analyze .comparison_flow::before {
  color: #0f3d2e;
  color: var(--w-analyze-green);
}

#w_analyze .comparison_flow::after {
  content: "▼";
  position: absolute;
  left: 50%;
  bottom: -0.55em;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 0 0.4em;
  font-size: 15px;
  line-height: 1;
  color: #6b7280;
  pointer-events: none;
  z-index: 1;
}

#w_analyze .comparison_column.standard .comparison_flow::after {
  background: #f3f4f6;
}

#w_analyze .comparison_column.w_analyze .comparison_flow::after {
  background: #edf6f0;
  color: #0f3d2e;
  color: var(--w-analyze-green);
}

#w_analyze .comparison_step {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 0.75em;
  padding: 0.85em 0.95em;
  background: #fff;
  border-left: 4px solid #9ca3af;
}

#w_analyze .comparison_column.w_analyze .comparison_step {
  border-left-color: #0f3d2e;
  border-left-color: var(--w-analyze-green);
}

#w_analyze .comparison_step:not(:last-child) {
  margin-bottom: 1.55em;
}

#w_analyze .comparison_step:not(:last-child)::after {
  content: "▼";
  position: absolute;
  left: 50%;
  bottom: -1.05em;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  color: #9ca3af;
  pointer-events: none;
}

#w_analyze .comparison_column.w_analyze .comparison_step:not(:last-child)::after {
  color: #0f3d2e;
  color: var(--w-analyze-green);
}

#w_analyze .comparison_step .step_body {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

#w_analyze .comparison_step .step_title {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.55;
  color: #111;
}

#w_analyze .comparison_step .step_badges {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  gap: 0.35em;
}

#w_analyze .comparison_step .step_badge {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}

#w_analyze .comparison_step .step_badge.badge_air {
  background: #0f3d2e;
  background: var(--w-analyze-green);
}

#w_analyze .comparison_step .step_badge.badge_sound {
  background: #e8a317;
}

#w_analyze .comparison_step .step_note {
  margin: 0.35em 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #555;
}

#w_analyze .comparison_result {
  margin: 1.35em 0 0;
  padding: 0.95em 1em;
  border: 2px solid #c0392b;
  border-radius: 3px;
  background: #fff;
  text-align: center;
}

#w_analyze .comparison_column.w_analyze .comparison_result {
  border-color: #c9a227;
  background: #fffdf5;
}

#w_analyze .comparison_result .result_title {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.65;
  color: #111;
}

#w_analyze .comparison_result .result_note {
  margin: 0.45em 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #444;
}

#w_analyze .comparison_vs {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 3.25em;
  height: 3.25em;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d1d5db;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #374151;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#w_analyze .comparison_footer {
  margin: 1.15em 0 0;
  padding: 0.85em 1em;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  text-align: center;
  font-size: 16px;
  line-height: 1.75;
  color: #555;
  letter-spacing: 0.02em;
}

#w_analyze .feature_section .inner {
  max-width: 960px;
}

#w_analyze .feature_card {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

#w_analyze .feature_head {
  position: relative;
  margin: 0 0 1.5em;
  padding: 3.5em 0 0;
  border-bottom: none;
}

#w_analyze .feature_label {
  position: absolute;
  top: 0;
  left: -1em;
  z-index: 0;
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 52px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #0093db;
  color: var(--color2);
  opacity: 0.7;
  white-space: nowrap;
  pointer-events: none;
}

#w_analyze .feature_card .section_title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 0 0.45em;
  border-bottom: 3px solid #111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: #111;
}

#w_analyze .feature_body p {
  font-size: 16px;
  line-height: 2.05;
  color: #1a1a1a;
}

#w_analyze .feature_points {
  margin: 1.75em 0 0;
  padding: 0;
  background: none;
  border: none;
  list-style: none;
}

#w_analyze .feature_points li {
  position: relative;
  padding-left: 1.1em;
  line-height: 1.95;
  font-weight: 500;
  font-size: 16px;
  color: #222;
  letter-spacing: 0.02em;
}

#w_analyze .feature_points li:not(:last-child) {
  margin-bottom: 0.5em;
}

#w_analyze .feature_points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #111;
}

#w_analyze .feature_visual {
  margin: 2em 0 0;
}

#w_analyze .feature_visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* 画像付きカードは箇条書きの右側にビジュアルを配置 */
#w_analyze .feature_card.has_visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  column-gap: 2.5em;
  align-items: start;
}

#w_analyze .feature_card.has_visual .feature_head,
#w_analyze .feature_card.has_visual .feature_body {
  grid-column: 1 / -1;
}

#w_analyze .feature_card.has_visual .feature_points {
  grid-column: 1;
}

#w_analyze .feature_card.has_visual .feature_visual {
  grid-column: 2;
  grid-row: 3;
  margin: 1.75em 0 0;
}

#w_analyze .flow_panel {
  padding-top: 2.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#w_analyze .flow_intro {
  margin: 0 0 1.75em;
}

#w_analyze .flow_intro .panel_title {
  margin-bottom: 0.65em;
}

#w_analyze .flow_lead {
  margin: 0;
  text-align: center;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}

#w_analyze .flow_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 1.35em;
  margin: 0;
  padding: 0;
  list-style: none;
}

#w_analyze .flow_item {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  -webkit-align-items: center;
  align-items: center;
  min-width: 0;
  min-height: 15.5em;
  padding: 2.5em 0.85em 1.35em;
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 6px;
  text-align: center;
  overflow: visible;
}

#w_analyze .flow_item:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: -0.72em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
  color: #0f3d2e;
  color: var(--w-analyze-green);
  pointer-events: none;
  z-index: 2;
}

#w_analyze .flow_item .step_badge {
  position: absolute;
  top: -1.05em;
  left: 50%;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: #0f3d2e;
  background: var(--w-analyze-green);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#w_analyze .flow_item .flow_icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 4.2em;
  height: 4.2em;
  margin: 0 0 0.85em;
  border-radius: 50%;
  background: #edf6f0;
  color: #0f3d2e;
  color: var(--w-analyze-green);
}

#w_analyze .flow_item .flow_icon svg {
  display: block;
  width: 1.75em;
  height: 1.75em;
}

#w_analyze .flow_item .body {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

#w_analyze .flow_item .label {
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: center;
  color: #0f3d2e;
  color: var(--w-analyze-green);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#w_analyze .flow_item .flow_body_detail {
  width: 100%;
  margin-top: 0.75em;
  padding-top: 0.75em;
  border-top: 1px dashed #c5d0da;
  min-height: 1px;
}

#w_analyze .flow_item .note {
  margin: 0;
  width: 100%;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-align: center;
  color: #333;
}

#w_analyze .flow_item .flow_details {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

#w_analyze .flow_item .flow_details li {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  word-break: keep-all;
}

#w_analyze .flow_item .flow_details li:not(:last-child) {
  margin-bottom: 0.25em;
}

#w_analyze .flow_item .flow_details .detail_label {
  font-weight: 400;
}

#w_analyze .flow_item .flow_term {
  color: #c27817;
  font-weight: 700;
}

#w_analyze .flow_item .flow_caution {
  margin: 0.65em 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #666;
  word-break: keep-all;
}

#w_analyze .flow_cta {
  gap: 1.15em;
  margin: 1.75em auto 0;
  max-width: 46em;
  padding: 1.15em 1.75em;
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 999px;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

#w_analyze .flow_cta_icon {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  background: #0f3d2e;
  background: var(--w-analyze-green);
  color: #fff;
}

#w_analyze .flow_cta_icon svg {
  display: block;
  width: 1.85em;
  height: 1.85em;
}

#w_analyze .flow_cta_body {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 1.15em;
  border-left: 1px dashed #c5d0da;
  text-align: left;
}

#w_analyze .flow_cta_title {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.55;
  color: #0f3d2e;
  color: var(--w-analyze-green);
}

#w_analyze .flow_cta_note {
  margin: 0.35em 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #555;
}

#w_analyze .faq_panel {
  padding-top: 2.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#w_analyze .faq_intro {
  margin: 0 0 2em;
}

#w_analyze .faq_intro .panel_title {
  margin-bottom: 0.65em;
}

#w_analyze .faq_lead {
  margin: 0;
  text-align: center;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
}

#w_analyze .faq_columns {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 1.5em;
}

#w_analyze .faq_column {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
}

#w_analyze .faq_column_title {
  gap: 0.55em;
  margin: 0;
  padding: 0.8em 1em;
  background: #0f3d2e;
  background: var(--w-analyze-green);
  border-radius: 4px 4px 0 0;
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: #fff;
}

#w_analyze .faq_column_icon {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#w_analyze .faq_column_icon svg {
  display: block;
  width: 1.35em;
  height: 1.35em;
}

#w_analyze .faq_box_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0;
  padding: 1.35em 1.5em 1.5em;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

#w_analyze .faq_box {
  padding: 1em 1.05em;
  margin: 0 0 0.85em;
  background: #fff;
  border: 1px solid #e3eaf0;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

#w_analyze .faq_column .faq_box:last-child {
  padding-bottom: 1em;
  margin-bottom: 0;
  border-bottom: 1px solid #e3eaf0;
}

#w_analyze .faq_q,
#w_analyze .faq_a {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 0.75em;
  margin: 0;
}

#w_analyze .faq_q {
  margin-bottom: 0.85em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #111;
  cursor: default;
}

#w_analyze .faq_a {
  max-height: none;
  overflow: visible;
  padding-top: 0.85em;
  border-top: 1px dashed #d7e0e8;
}

#w_analyze .faq_mark {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 0.35em;
  border-radius: 50%;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

#w_analyze .faq_mark.q {
  background: #0f3d2e;
  background: var(--w-analyze-green);
  color: #fff;
}

#w_analyze .faq_mark.a {
  background: #e8a317;
  color: #fff;
}

#w_analyze .faq_q_text,
#w_analyze .faq_a_text {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

#w_analyze .faq_a_text p,
#w_analyze .faq_a_text ol {
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  color: #333;
  letter-spacing: 0.02em;
}

#w_analyze .faq_a_text p:not(:last-child),
#w_analyze .faq_a_text ol:not(:last-child) {
  margin-bottom: 0.75em;
}

#w_analyze .faq_a_text ol.num {
  padding-left: 1.35em;
}

#w_analyze .faq_a_text ol.num li:not(:last-child) {
  margin-bottom: 0.35em;
}

#w_analyze .faq_a_text strong {
  color: #c27817;
  font-weight: 700;
}

#w_analyze .faq_a_text .faq_note {
  margin-top: 0.55em;
  font-size: 16px;
  line-height: 1.65;
  color: #777;
}

#w_analyze .faq_footer {
  gap: 0.85em;
  margin: 1.75em 0 0;
  padding: 1em 1.25em;
  background: #edf6f0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

#w_analyze .faq_footer_icon {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: #0f3d2e;
  background: var(--w-analyze-green);
  color: #fff;
}

#w_analyze .faq_footer_icon svg {
  display: block;
  width: 1.45em;
  height: 1.45em;
}

#w_analyze .faq_footer_text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #0f3d2e;
  color: var(--w-analyze-green);
  letter-spacing: 0.02em;
}

#w_analyze .bonus_section {
  padding: 5.5em 0 6em;
  background: #eef2f6;
  text-align: center;
  border-bottom: none;
}

#w_analyze .bonus_section .inner {
  max-width: 920px;
}

#w_analyze .bonus_section .section_title {
  display: inline-block;
  margin: 0 auto 1.75em;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.45;
  letter-spacing: 0.05em;
}

#w_analyze .bonus_text {
  max-width: 46em;
  margin: 0 auto;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 2.15;
  letter-spacing: 0.03em;
  color: #111;
}

#w_analyze .bonus_text.bonus_lead {
  margin-top: 0.65em;
  margin-bottom: 3em;
  font-weight: 700;
}

#w_analyze .product_links {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 1.5em;
  margin: 0 0 2.75em;
}

#w_analyze .product_link {
  gap: 0.85em;
  min-width: 16em;
  padding: 1.15em 2.25em;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-size: clamp(16px, 2vw, 18px);
  text-decoration: none;
  -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#w_analyze .product_link .label {
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

#w_analyze .product_link .icon svg {
  --content-color: currentColor;
  display: block;
  width: 1.65em;
  height: auto;
}

#w_analyze .product_link .icon svg path,
#w_analyze .product_link .icon svg circle {
  fill: none;
  stroke: var(--content-color);
}

#w_analyze .product_link:hover,
#w_analyze .product_link:focus-visible {
  background: #0093db;
  background: var(--color2);
  border-color: #0093db;
  border-color: var(--color2);
  color: #fff;
}

#w_analyze .contact_link_box {
  margin-top: 0.25em;
}

#w_analyze .bonus_section .view_link {
  gap: 1.15em;
}

#w_analyze .bonus_section .view_link .label {
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: 0.05em;
  line-height: 1.35;
}

#w_analyze .bonus_section .view_link .icon svg {
  --height: 2.85em;
}

/* ---- w analyze アニメーション ---- */
#w_analyze .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);
}

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

#w_analyze .comparison_chart.scroll_view.wow {
  -webkit-transform: translateY(1.25em) scale(0.98);
  transform: translateY(1.25em) scale(0.98);
}

#w_analyze .comparison_chart.scroll_view.wow.active,
#w_analyze .comparison_chart.scroll_view.wow.is_in {
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
}

#w_analyze .feature_card.scroll_view.wow .feature_label {
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

#w_analyze .feature_card.scroll_view.wow.active .feature_label,
#w_analyze .feature_card.scroll_view.wow.is_in .feature_label {
  opacity: 0.7;
}

#w_analyze .stagger_list.scroll_view.wow>*,
#w_analyze .wow_list.scroll_view.wow>* {
  -webkit-transition: opacity 0.32s ease, -webkit-transform 0.32s ease;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

#w_analyze .flow_list.stagger_list>.flow_item.is_in {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

@media screen and (max-width: 768px) {

  #w_analyze .content_section,
  #w_analyze .w_analyze_panel {
    padding: 2.5em 0;
  }

  #w_analyze .feature_head {
    padding-top: 3.25em;
    margin-bottom: 1.25em;
    overflow: visible;
  }

  #w_analyze .feature_label {
    top: 0;
    left: 0;
    max-width: 100%;
    font-size: 36px;
    letter-spacing: 0.02em;
    opacity: 0.85; /* PCと同じ */
  }

  #w_analyze .feature_card .section_title {
    font-size: 18px;
  }

  #w_analyze .feature_body p {
    font-size: 16px;
  }

  #w_analyze .feature_card.has_visual {
    display: block;
  }

  #w_analyze .feature_card.has_visual .feature_visual {
    margin-top: 2em;
  }

  #w_analyze .flow_list {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2em;
  }

  #w_analyze .flow_item {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 2.25em;
  }

  #w_analyze .flow_item .label {
    font-size: 16px;
  }

  #w_analyze .flow_item:not(:last-child)::after {
    top: auto;
    bottom: -1.35em;
    right: auto;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(90deg);
    transform: translateX(-50%) rotate(90deg);
  }

  #w_analyze .flow_cta {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    max-width: 24em;
    border-radius: 12px;
    text-align: center;
  }

  #w_analyze .flow_cta_body {
    padding-left: 0;
    border-left: none;
    padding-top: 0.85em;
    border-top: 1px dashed #c5d0da;
    width: 100%;
    text-align: center;
  }

  #w_analyze .flow_cta_title {
    font-size: 16px;
  }

  #w_analyze .faq_footer {
    -webkit-flex-direction: column;
    flex-direction: column;
    border-radius: 12px;
    text-align: center;
  }

  #w_analyze .faq_columns {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  #w_analyze .product_link {
    width: 100%;
    padding: 1.1em 1.5em;
  }

  #w_analyze .bonus_section {
    padding: 4em 0 4.5em;
  }

  #w_analyze .bonus_text.bonus_lead {
    margin-bottom: 2.25em;
  }

  #w_analyze .product_links {
    margin-bottom: 2em;
  }

  #w_analyze .scroll_view.wow {
    -webkit-transform: translateY(0.85em);
    transform: translateY(0.85em);
  }

  #w_analyze .comparison_chart {
    padding: 1em 0.85em;
  }

  #w_analyze .comparison_columns {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 1em;
  }

  #w_analyze .comparison_column.standard {
    -webkit-order: 1;
    order: 1;
  }

  #w_analyze .comparison_vs {
    position: relative;
    top: auto;
    left: auto;
    -webkit-order: 2;
    order: 2;
    margin: -0.15em auto;
    -webkit-transform: none;
    transform: none;
  }

  #w_analyze .comparison_column.w_analyze {
    -webkit-order: 3;
    order: 3;
  }

  #w_analyze .comparison_column_title {
    font-size: 16px;
  }

  #w_analyze .comparison_step .step_title {
    font-size: 16px;
  }

  #w_analyze .comparison_chart.scroll_view.wow {
    -webkit-transform: translateY(0.85em) scale(0.98);
    transform: translateY(0.85em) scale(0.98);
  }

  #w_analyze .feature_card.scroll_view.wow.active .feature_label,
  #w_analyze .feature_card.scroll_view.wow.is_in .feature_label {
    opacity: 0.85; /* PCと同じ */
  }
}