@charset "UTF-8";
/* 2026-10 A案: トップページ専用 */
.renewal-usp,.renewal-usp * {box-sizing:border-box;}
.page-top .top-mv picture,.renewal-usp picture {display:block;}
.page-top .top-mv img {display:block;width:100%;height:auto;}
.renewal-usp {background:#2a120b;padding:16px 0 44px;}
.renewal-usp__grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1200px;width:75%;margin:0 auto;}
.renewal-usp__item {display:block;min-width:0;position:relative;}
.renewal-usp__item img {display:block;width:100%;height:auto;}
.renewal-usp__item--01 {grid-column:1/3;grid-row:1;border-right:1px solid #8b776a;}
.renewal-usp__item--02 {grid-column:3/5;grid-row:1;}
.renewal-usp__item--03 {grid-column:1/3;grid-row:2;border-right:1px solid #8b776a;border-top:1px solid #8b776a;margin-top:18px;padding-top:12px;}
.renewal-usp__item--04 {grid-column:3;grid-row:2;border-top:1px solid #8b776a;margin-top:18px;padding-top:12px;}
.renewal-usp__item--05 {grid-column:4;grid-row:2;border-top:1px solid #8b776a;margin-top:18px;padding-top:12px;}
.renewal-campaign {width:54%;max-width:860px;margin:38px auto 0;}
.renewal-campaign a,.renewal-campaign img {display:block;width:100%;height:auto;}
.renewal-usp a:focus-visible {outline:3px solid #e3c17a;outline-offset:3px;}
@media(max-width:767px){
.renewal-usp {padding:0 0 30px;}
.renewal-usp__grid {width:auto;max-width:none;margin:0 15px;grid-template-columns:repeat(2,minmax(0,1fr));}
.renewal-usp__item--01 {grid-column:1/3;grid-row:1;border:0;}
.renewal-usp__item--02 {grid-column:1/3;grid-row:2;}
.renewal-usp__item--03 {grid-column:1/3;grid-row:3;}
.renewal-usp__item--04 {grid-column:1;grid-row:4;}
.renewal-usp__item--05 {grid-column:2;grid-row:4;}
.renewal-usp__item--02,.renewal-usp__item--03,.renewal-usp__item--04,.renewal-usp__item--05 {margin-top:0;padding-top:0;border-top:1px solid #8b776a;border-right:0;}
.renewal-usp__item--04 {border-right:1px solid #8b776a;}
.renewal-campaign {width:auto;max-width:none;margin:25px 30px 0;}
}

/* USPリンク：マウス操作時のホバー効果 */
.renewal-usp__item img {
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .renewal-usp__item:hover img {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .renewal-usp__item img {
    transition: none;
  }
}

/* v4: 罫線は画像の余白と分離し、交点の中心から四方向に12px空ける。 */
@media (min-width:768px) {
  .renewal-usp__grid {
    --usp-center-gap:12px;
    width:90%;
    max-width:1240px;
    column-gap:calc(var(--usp-center-gap) * 2);
    row-gap:calc(var(--usp-center-gap) * 2);
  }
  .renewal-usp__item--01,
  .renewal-usp__item--03 {border-right:0;}
  .renewal-usp__item--03,
  .renewal-usp__item--04,
  .renewal-usp__item--05 {
    border-top:0;
    margin-top:0;
    padding-top:12px;
  }
  /* 横線の中心を下段上端に合わせる（1px線の半幅を補正）。 */
  .renewal-usp__item--03::before,
  .renewal-usp__item--04::before,
  .renewal-usp__item--05::before {
    content:"";
    position:absolute;
    top:-0.5px;
    left:0;
    right:0;
    height:1px;
    background:#8b776a;
    pointer-events:none;
  }
  /* 縦線の中心を列間の中央に合わせる。 */
  .renewal-usp__item--01::after,
  .renewal-usp__item--03::after {
    content:"";
    position:absolute;
    right:calc(-1 * var(--usp-center-gap) - 0.5px);
    width:1px;
    background:#8b776a;
    pointer-events:none;
  }
  /* 上段と横線の間は24px。その半分まで縦線を延ばして12px残す。 */
  .renewal-usp__item--01::after {
    top:0;
    bottom:calc(-1 * var(--usp-center-gap));
  }
  .renewal-usp__item--03::after {
    top:var(--usp-center-gap);
    bottom:0;
  }
}