@charset "UTF-8";

/* ========================================
   Guide components
   TOP / 下層 / PC / SP 共通
   ページ側では幅・高さ・位置・CSS変数だけ指定し、
   線そのものはこのファイルだけで描画する。
======================================== */

/* ----------------------------------------
   Guide row
   縦1列レイアウトの上端 / 中間 / 下端
---------------------------------------- */
.c-guide-row {
  --guide-color: #111;
  --guide-line-width: 1px;
  --guide-arm-width: 18px;

  position: relative;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
}

.c-guide-row::before,
.c-guide-row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: var(--guide-arm-width);
  background-repeat: no-repeat;
  pointer-events: none;
}

.c-guide-row::before {
  left: 0;
  background-image:
    linear-gradient(var(--guide-color), var(--guide-color)),
    linear-gradient(var(--guide-color), var(--guide-color));
  background-position:
    left top,
    left center;
  background-size:
    var(--guide-line-width) 100%,
    var(--guide-arm-width) var(--guide-line-width);
}

.c-guide-row::after {
  right: 0;
  background-image:
    linear-gradient(var(--guide-color), var(--guide-color)),
    linear-gradient(var(--guide-color), var(--guide-color));
  background-position:
    right top,
    right center;
  background-size:
    var(--guide-line-width) 100%,
    var(--guide-arm-width) var(--guide-line-width);
}

.c-guide-row--top::before {
  background-position:
    left top,
    left top;
}

.c-guide-row--top::after {
  background-position:
    right top,
    right top;
}

.c-guide-row--middle::before {
  background-position:
    left top,
    left center;
}

.c-guide-row--middle::after {
  background-position:
    right top,
    right center;
}

.c-guide-row--bottom::before {
  background-position:
    left top,
    left bottom;
}

.c-guide-row--bottom::after {
  background-position:
    right top,
    right bottom;
}

/* ----------------------------------------
   Guide list
   ul/li の縦一覧用
---------------------------------------- */
.c-guide-list {
  --guide-color: #111;
  --guide-line-width: 1px;
  --guide-arm-width: 18px;
  --guide-leg-height: 18px;

  position: relative;
}

.c-guide-list::before,
.c-guide-list::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: var(--guide-arm-width);
  height: var(--guide-leg-height);
  border-bottom: var(--guide-line-width) solid var(--guide-color);
  pointer-events: none;
}

.c-guide-list::before {
  left: 0;
  border-left: var(--guide-line-width) solid var(--guide-color);
}

.c-guide-list::after {
  right: 0;
  border-right: var(--guide-line-width) solid var(--guide-color);
}

.c-guide-list > li {
  position: relative;
}

.c-guide-list > li::before,
.c-guide-list > li::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: var(--guide-arm-width);
  height: calc(var(--guide-leg-height) * 2);
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translateY(-50%);
}

.c-guide-list > li::before {
  left: 0;
  background-image:
    linear-gradient(var(--guide-color), var(--guide-color)),
    linear-gradient(var(--guide-color), var(--guide-color));
  background-position:
    left top,
    left center;
  background-size:
    var(--guide-line-width) 100%,
    var(--guide-arm-width) var(--guide-line-width);
}

.c-guide-list > li::after {
  right: 0;
  background-image:
    linear-gradient(var(--guide-color), var(--guide-color)),
    linear-gradient(var(--guide-color), var(--guide-color));
  background-position:
    right top,
    right center;
  background-size:
    var(--guide-line-width) 100%,
    var(--guide-arm-width) var(--guide-line-width);
}

.c-guide-list > li:first-child::before,
.c-guide-list > li:first-child::after {
  height: var(--guide-leg-height);
  transform: none;
}

.c-guide-list > li:first-child::before {
  background-position:
    left top,
    left top;
}

.c-guide-list > li:first-child::after {
  background-position:
    right top,
    right top;
}

/* ----------------------------------------
   Guide point
   2カラム以上のグリッド交点用
   PC/SP共通
---------------------------------------- */
.c-guide-point {
  --guide-color: #111;
  --guide-line-width: 1px;
  --guide-arm-x: 18px;
  --guide-arm-y: 18px;

  position: absolute;
  z-index: 2;
  width: calc(var(--guide-arm-x) * 2);
  height: calc(var(--guide-arm-y) * 2);
  pointer-events: none;
}

.c-guide-point::before,
.c-guide-point::after {
  content: "";
  position: absolute;
  background: var(--guide-color);
}

.c-guide-point::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--guide-line-width);
  transform: translateY(-50%);
}

.c-guide-point::after {
  top: 0;
  left: 50%;
  width: var(--guide-line-width);
  height: 100%;
  transform: translateX(-50%);
}

.c-guide-point--tl {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.c-guide-point--tr {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.c-guide-point--bl {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

.c-guide-point--br {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

.c-guide-point--corner-tl::before {
  left: 50%;
  width: 50%;
}

.c-guide-point--corner-tl::after {
  top: 50%;
  height: 50%;
}

.c-guide-point--corner-tr::before {
  width: 50%;
}

.c-guide-point--corner-tr::after {
  top: 50%;
  height: 50%;
}

.c-guide-point--corner-bl::before {
  left: 50%;
  width: 50%;
}

.c-guide-point--corner-bl::after {
  height: 50%;
}

.c-guide-point--corner-br::before {
  width: 50%;
}

.c-guide-point--corner-br::after {
  height: 50%;
}

.c-guide-point--tee-top::after {
  top: 50%;
  height: 50%;
}

.c-guide-point--tee-bottom::after {
  height: 50%;
}

.c-guide-point--tee-left::before {
  left: 50%;
  width: 50%;
}

.c-guide-point--tee-right::before {
  width: 50%;
}

/* ----------------------------------------
   Utility
---------------------------------------- */
.u-pc-only {
  display: initial;
}

.u-sp-only {
  display: none;
}

@media (max-width: 767px) {
  .u-pc-only {
    display: none !important;
  }

  .u-sp-only {
    display: initial;
  }
}

/* ========================================
   TOP page guide layout / positions
   page-top.css から移管。
   ガイドに関する指定はこのファイルで一元管理する。
======================================== */

/* ========================================
   FV guide size
   1200px時 18px を基準に、FV幅に比例して可変
   線幅は視認性維持のため 1px 固定
======================================== */

.p-top-kv .c-guide-point {
  --guide-arm-x: 1.5cqw;
  --guide-arm-y: 1.5cqw;
  --guide-line-width: 1px;
  --guide-color: #111;
}

/* SHOPガイド：guide-row.css の tee-right 形状を流用
   c-guide-point--tr の形状指定は残しつつ、配置だけSHOP右下へ上書き */
.p-top-kv__guide--shop-tr {
  top: auto;
  right: -1.8333cqw; /* 1200px時 -22px */
  bottom: -0.8333cqw; /* 1200px時 -10px */
  left: auto;
  transform: translate(50%, 50%);
}

.p-top-kv__guide--founder-br {
  top: auto;
  right: -1.8333cqw; /* 1200px時 -22px */
  bottom: -1.1667cqw; /* 1200px時 -14px */
  left: auto;

  transform: translate(50%, 50%);
}

/* シーモンキー：右上ガイド */
.p-top-kv__guide--seamonkey-tr {
  top: -1.25cqw; /* 1200px時 -15px */
  left: 29.6667cqw; /* 1200px時 356px */
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* シーモンキー：右下ガイド */
.p-top-kv__guide--seamonkey-br {
  top: auto;
  left: auto;
  right: -1.25cqw; /* 1200px時 -15px */
  bottom: -0.8333cqw; /* 1200px時 -10px */
  transform: translate(50%, 50%);
}

/* Tarbell：右下の十字ガイド */
.p-top-kv__guide--tarbell-br {
  top: auto;
  right: -1.1667cqw; /* 1200px時 -14px */
  bottom: -1.25cqw; /* 1200px時 -15px */
  left: auto;

  transform: translate(50%, 50%);
}

.p-top-kv__guide--backgammon-tr {
  top: -1.0833cqw; /* -13px */
  right: -1.0833cqw; /* -13px */
  bottom: auto;
  left: auto;

  transform: translate(50%, -50%);
}

.p-top-kv__guide--backgammon-br {
  top: auto;
  right: -1.0833cqw; /* 1200px時 -13px */
  bottom: -1.1667cqw; /* 1200px時 -14px */
  left: auto;

  transform: translate(50%, 50%);
}

.p-top-kv__guide--plapuzzle-tr {
  --guide-arm-x: 1.5cqw; /* 1200px時 18px */
  --guide-arm-y: 1.5cqw; /* 1200px時 18px */
  --guide-line-width: 1px;
  --guide-color: #111;

  top: -1.3333cqw; /* 1200px時 -16px */
  right: -1.4167cqw; /* 1200px時 -17px */
  bottom: auto;
  left: auto;

  transform: translate(50%, -50%);
}

.p-top-kv__guide--plapuzzle-br {
  right: -1.4167cqw;
  bottom: -1.8167cqw;
  left: auto;
  transform: translate(50%, 50%);
}

/* 右側中段：┘ */
.p-top-kv__guide--history-mr {
  top: 9.3333cqw; /* 1200px時 112px */
  right: -0.6667cqw; /* 1200px時 -8px */
  bottom: auto;
  left: auto;

  transform: translate(50%, -50%);
}

.p-top-kv__guide--history-br {
  top: auto;
  right: 8.1667cqw;
  bottom: -1.5167cqw;
  left: auto;
  transform: translate(50%, 50%);
}

/* 左下ガイド */
.p-top-kv__guide--artbank-bl {
  top: auto;
  left: -2cqw; /* 1200px時 -24px */
  right: auto;
  bottom: -1.3333cqw; /* 1200px時 -16px */

  transform: translate(-50%, 50%);
}

/* 左上ガイド */
.p-top-kv__guide--3dart-tl {
  top: -1.25cqw; /* 1200px時 -15px */
  left: -1.6667cqw; /* 1200px時 -20px */
  right: auto;
  bottom: auto;

  transform: translate(-50%, -50%);
}

/* 左上ガイド */
.p-top-kv__guide--microbank-tl {
  top: -1.3333cqw; /* 1200px時 -16px */
  left: -1.6667cqw; /* 1200px時 -20px */
  right: auto;
  bottom: auto;

  transform: translate(-50%, -50%);
}

.p-top-kv__guide--recruit-tl {
  top: -2.5cqw; /* 1200px時 -30px */
  left: -1.0833cqw; /* 1200px時 -13px */
  right: auto;
  bottom: auto;

  transform: translate(-50%, -50%);
}

/* 右上ガイド */
.p-top-kv__guide--recruit-tr {
  top: -2.4667cqw;
  right: -2.0667cqw;
  bottom: auto;
  left: auto;
  transform: translate(50%, -50%);
}

.p-top-kv__guide--magic-tr {
  top: -2cqw; /* 1200px時 -24px */
  right: -1.5cqw; /* 1200px時 -18px */
  bottom: auto;
  left: auto;

  transform: translate(50%, -50%);
}

/* 右上ガイド */
.p-top-kv__guide--puzzle-tr {
  top: -2cqw;
  right: -1.5cqw;
  bottom: auto;
  left: auto;

  transform: translate(50%, -50%);
}

.p-top-kv__guide--wow-tr {
  top: -2cqw;
  right: -1.5cqw;
  bottom: auto;
  left: auto;

  transform: translate(50%, -50%);
}

.p-top-kv__guide--jigsaw-tl {
  top: -1.25cqw; /* 1200px時 -15px */
  left: -1.0833cqw; /* 1200px時 -13px */
  right: auto;
  bottom: auto;

  transform: translate(-50%, -50%);
}

/* Row guide decoration
 * row: 874.6407px / guide total width: 899.4492px
 * => 1200px時、左右へ12.40425pxずつ張り出す。
 * 最上段は角、row間はT字、最下段は角で構成する。
 */
.p-top-products__guide {
  position: relative;
  z-index: 3;

  display: block;

  width: 74.9541cqw; /* 1200px時 899.4492px */
  height: 2cqw; /* 1200px時 row間 24px */

  margin-left: -1.0337cqw; /* 1200px時 -12.40425px */

  pointer-events: none;
}

.p-top-products__guide--between {
  margin-top: 2cqw; /* 1200px時 24px */
}

.p-top-products__guide--top,
.p-top-products__guide--bottom {
  height: 0;
}

/* 上端：┌ ┐ */
/* row間：├ ┤ */
.p-top-products__guide-point--ml,
.p-top-products__guide-point--ml::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;

  width: 2cqw;
  border-top: 1px solid #111;

  transform: translateY(-50%);
}

.p-top-products__guide-point--mr::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;

  width: 2cqw;
  border-top: 1px solid #111;

  transform: translateY(-50%);
}

/* 下端：└ ┘ */
/* Brand */

/* ========================================
   PRODUCTS GUIDE
   共通 c-guide-point を流用
======================================== */

.p-top-products__guide {
  position: relative;
  display: block;

  width: 74.9541cqw; /* 1200px時 899.4492px */
  height: 0;

  margin-left: -1.0337cqw; /* rowより左へ12.40425px */
  pointer-events: none;
}

.p-top-products__guide .c-guide-point {
  --guide-arm-x: 1.5cqw;
  --guide-arm-y: 1.5cqw;
  --guide-line-width: 1px;
  --guide-color: #111;
}

/* 最上段 */
.p-top-products__guide--top .c-guide-point--tl {
  top: -1cqw;
  left: 0;
}

.p-top-products__guide--top .c-guide-point--tr {
  top: -1cqw;
  right: 0;
}

/* row間 */
.p-top-products__guide--between .c-guide-point--tl {
  top: -1cqw;
  left: 0;
}

.p-top-products__guide--between .c-guide-point--tr {
  top: -1cqw;
  right: 0;
}

/* 最下段 */
.p-top-products__guide--bottom .c-guide-point--bl {
  bottom: -1cqw;
  left: 0;
}

.p-top-products__guide--bottom .c-guide-point--br {
  right: 0;
  bottom: -1cqw;
}

/* ----------------------------------------
   ABOUT guide points
   既存の .c-guide-point を流用
---------------------------------------- */

.p-top-about__guide {
  --guide-arm-x: 1.5cqw;
  --guide-arm-y: 1.5cqw;
  --guide-line-width: 1px;
  --guide-color: #111;

  z-index: 5;
  pointer-events: none;
}

.p-top-about__guide.c-guide-point--tl {
  top: -1cqw;
  left: -1cqw;
  transform: translate(-50%, -50%);
}

.p-top-about__guide--tm {
  top: -1cqw;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-top-about__guide.c-guide-point--tr {
  top: -1cqw;
  right: -1cqw;
  transform: translate(50%, -50%);
}

.p-top-about__guide--ml {
  top: 50%;
  left: -1cqw;
  transform: translate(-50%, -50%);
}

.p-top-about__guide--mr {
  top: 50%;
  right: -1cqw;
  transform: translate(50%, -50%);
}

.p-top-about__guide.c-guide-point--br {
  right: -1cqw;
  bottom: -1cqw;
  transform: translate(50%, 50%);
}

.p-top-about__guide--bm {
  bottom: -1cqw;
  left: 50%;
  transform: translate(-50%, 50%);
}

.p-top-about__guide.c-guide-point--bl {
  bottom: -1cqw;
  left: -1cqw;
  transform: translate(-50%, 50%);
}

@media (max-width: 767px) {
  .p-top-kv .c-guide-point {
    --guide-arm-x: 12px;
    --guide-arm-y: 12px;
    --guide-line-width: 1px;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide,
  .p-top-products__guide--top,
  .p-top-products__guide--between,
  .p-top-products__guide--bottom {
    width: 89.7436vw; /* 390px時 350px */
    height: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide--between {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide .c-guide-point {
    --guide-arm-x: 3.0769vw;
    --guide-arm-y: 3.0769vw;
    --guide-line-width: 1px;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide--top .c-guide-point--tl,
  .p-top-products__guide--top .c-guide-point--tr,
  .p-top-products__guide--between .c-guide-point--tl,
  .p-top-products__guide--between .c-guide-point--tr {
    top: -1.5385vw;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide--bottom .c-guide-point--bl,
  .p-top-products__guide--bottom .c-guide-point--br {
    bottom: -1.5385vw;
  }
}

@media (max-width: 767px) {
  .p-top-products__row + .p-top-products__guide--between {
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide--between {
    position: relative;
    width: 89.7436vw; /* 390px時 350px */
    height: 0;
    margin-right: auto;
    margin-bottom: 12px;
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  /* 前段のbetween用上方向補正を解除し、24px余白の中央へ */
  .p-top-products__guide--between .c-guide-point--tl,
  .p-top-products__guide--between .c-guide-point--tr {
    top: 0;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide,
  .p-top-products__guide--top,
  .p-top-products__guide--between,
  .p-top-products__guide--bottom {
    width: 89.7436vw;
    height: 1.2821vw; /* 390px時 5px */
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide--between {
    position: relative;
    width: 89.7436vw;
    height: 5.1282vw; /* 390px時 20px */
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  /* Step 3 の12px marginを解除 */
  .p-top-products__row + .p-top-products__guide--between {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide--between .c-guide-point--tl,
  .p-top-products__guide--between .c-guide-point--tr {
    top: 2.5641vw; /* 390px時 10px */
  }
}

/* ========================================
   ABOUT SP - PC layout scaled as-is
   390px基準:
   PCカード 477 x 446 を 326.1359px幅へ同比率縮尺
   内部の余白・文字・画像・位置関係も同じ倍率で維持
======================================== */

.p-top-about__sp-guide {
  display: none;
}

@media (max-width: 767px) {
  /*
   * PC用3x3ガイドはPCではそのまま。
   * SPでは1列用の5本（上・3境界・下）に置き換える。
   */
  .p-top-about__grid > .p-top-about__guide {
    display: none;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide {
    position: relative;
    display: block;
    flex: 0 0 auto;
    align-self: center;

    width: 89.7436vw; /* PRODUCTS同様、390px時350px */
    height: 5.1282vw; /* 境界の余白 20px */
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--top,
  .p-top-about__sp-guide--bottom {
    height: 1.2821vw; /* 390px時5px */
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide .c-guide-point {
    --guide-arm-x: 3.1556vw; /* PC 18pxをカード縮尺した約12.31px */
    --guide-arm-y: 3.1556vw;
    --guide-line-width: 1px;
    --guide-color: #111;

    position: absolute;
    z-index: 5;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--top .c-guide-point--tl {
    top: 0;
    left: 0;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--top .c-guide-point--tr {
    top: 0;
    right: 0;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--between .c-guide-point--tee-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--between .c-guide-point--tee-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--bottom .c-guide-point--bl {
    bottom: 0;
    left: 0;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--bottom .c-guide-point--br {
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  /*
   * PC用の9点ガイドはSPでは使用しない。
   * guide-row.css の .c-guide-row で上端 / 中間 / 下端を描画する。
   */
  .p-top-about__grid > .p-top-about__guide {
    display: none;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide {
    --guide-color: #111;
    --guide-line-width: 1px;
    --guide-arm-width: 3.0769vw; /* 390px時 12px */

    display: block;
    flex: 0 0 auto;
    align-self: center;

    width: 89.7436vw; /* 390px時 350px */
    margin: 0;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  /*
   * 上端：┌────────┐
   * guide-row.cssの縦線は短いガイド領域の中だけに存在する。
   */
  .p-top-about__sp-guide--top {
    height: 3.0769vw; /* 390px時 12px */
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--top::before {
    background-position:
      left top,
      left top;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--top::after {
    background-position:
      right top,
      right top;
  }
}

@media (max-width: 767px) {
  /*
   * カード間：├        ┤
   * 20pxの空間中央に横線。
   * .c-guide-row の初期値（center）をそのまま使用。
   */
  .p-top-about__sp-guide--between {
    height: 5.1282vw; /* 390px時 20px */
  }
}

@media (max-width: 767px) {
  /*
   * 下端：└────────┘
   */
  .p-top-about__sp-guide--bottom {
    height: 3.0769vw; /* 390px時 12px */
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--bottom::before {
    background-position:
      left top,
      left bottom;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--bottom::after {
    background-position:
      right top,
      right bottom;
  }
}

@media (max-width: 767px) {
  /*
   * 以前のc-guide-pointベースSPガイド指定を完全に無効化。
   */
  .p-top-about__sp-guide .c-guide-point {
    display: none !important;
  }
}

/* ========================================
   GUIDE UNIFICATION FINAL OVERRIDE
   ガイド線の描画は guide-row.css のみ。
   page-top.css は寸法・配置・CSS変数のみ。
======================================== */

.p-top-products__guide {
  --guide-color: #111;
  --guide-line-width: 1px;
  --guide-arm-width: 18px;

  position: relative;
  z-index: 3;
  display: block;
  pointer-events: none;
}

/* PRODUCTSはc-guide-rowへ統一済み */
.p-top-products__guide > .c-guide-point {
  display: none !important;
}

/* ABOUT PCは2x2なので共通c-guide-pointを利用 */
.p-top-about__guide {
  --guide-color: #111;
  --guide-line-width: 1px;
  --guide-arm-x: 18px;
  --guide-arm-y: 18px;
}

/* ABOUT SPは1列なので共通c-guide-rowを利用 */
.p-top-about__sp-guide {
  --guide-color: #111;
  --guide-line-width: 1px;
  --guide-arm-width: 12px;

  position: relative;
  display: none;
  pointer-events: none;
}

@media (max-width: 767px) {
  .p-top-products__guide {
    --guide-arm-width: 3.0769vw; /* 390px時 12px */
    width: 89.7436vw; /* 390px時 350px */
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide--top,
  .p-top-products__guide--bottom {
    height: 3.0769vw;
  }
}

@media (max-width: 767px) {
  .p-top-products__guide--between {
    height: 5.1282vw; /* 390px時 20px */
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .p-top-about__grid > .p-top-about__guide {
    display: none;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide {
    --guide-arm-width: 3.0769vw;

    display: block;
    flex: 0 0 auto;
    align-self: center;

    width: 89.7436vw;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--top,
  .p-top-about__sp-guide--bottom {
    height: 3.0769vw;
  }
}

@media (max-width: 767px) {
  .p-top-about__sp-guide--between {
    height: 5.1282vw;
  }
}

/* ========================================
   TOP / ABOUT SP guide alignment
   PRODUCTSと同じ c-guide-row 構成・外幅に統一。
   ABOUT側の親gridを350px相当幅にしたため、
   guide自体は親幅100%で中央ズレを発生させない。
======================================== */
@media (max-width: 767px) {
  .p-top-about__sp-guide {
    display: block;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    margin-inline: 0;
  }

  .p-top-about__sp-guide--top,
  .p-top-about__sp-guide--bottom {
    height: 3.0769vw; /* 390px時 12px */
  }

  .p-top-about__sp-guide--between {
    height: 5.1282vw; /* 390px時 20px */
  }
}

/* corner-rd: corner-bl の上下反転版（中心から右 + 中心から下） */
.c-guide-point--corner-rd::before {
  left: 50%;
  width: 50%;
}

.c-guide-point--corner-rd::after {
  top: 50%;
  height: 50%;
}