@charset "UTF-8";

/* ==========================================================================
   Variables (Custom Properties)
   ========================================================================== */
:root {
  /* Colors */
  --color-bg1: #dafcfd;
  --color-bg2: #fcf8ea;
  --color-main1: #1aa5aa;
  --color-main2: #eb5505;
  --color-sub: #F5C000;
  --color-text: #735b4d;

  /* Typography Scale (Original Base) */
  --body: 13px;
  --type-s: calc(var(--body) * .9);
  --type-h4: calc(var(--body) * 1.2);
  --type-h3: calc(var(--body) * 1.4);
  --type-h2: calc(var(--body) * 1.9);

  /* Spacing */
  --space-s: 16px;
  --space-ss: calc(var(--space-s) * .5);
  --space-m: calc(var(--space-s) * 2);
  --space-l: calc(var(--space-s) * 3);
  --gap: calc(var(--space-s) * .25);

  /* Clip Paths (Shapes) */
  --up: polygon(50% 0, 100% 100%, 0 100%);
  --right: polygon(0 0, 100% 50%, 0 100%);
  --down: polygon(0 0, 100% 0, 50% 100%);
  --bottom: polygon(0 50%, 100% 0, 100% 100%);
}

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */
html {
  /* scroll-behavior: smooth; */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* 背景固定のバグ回避のため fixed は body ではなく文脈に合わせて使用推奨だが、
     デザイン維持のため元のプロパティを整理して記述 */
  /* background: #fff url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/bg2.svg) no-repeat center center fixed;
  background-size: auto 80%; */
  color: var(--color-text);

  /* Font Stack: Platform Native -> JA Standard -> Fallback */
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "BIZ UDPGothic", "Meiryo", "メイリオ", "游ゴシック", YuGothic, Verdana, sans-serif;

  font-feature-settings: "palt";
  font-size: var(--body);
  line-break: strict;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  position: relative;
  word-break: normal;
  max-width: 425px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  background: #fff url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/bg2.svg) no-repeat center center;
  background-size: auto 80%;
  pointer-events: none;
  position: fixed;
  /* これが GPU を使った軽い固定方法です */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -9999;
}

/* Heading Reset: デザイン維持のため !important を許容 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: 900;
  margin-bottom: 0 !important;
}

p,
ul {
  margin-bottom: 0;
}

ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  list-style: none;
  padding-left: var(--space-s);
}

label {
  margin-bottom: 0;
}

figure {
  margin: 0;
}

section {
  margin-top: var(--space-l);
  padding: 0 var(--space-s) var(--space-s);
}

small {
  display: block;
  font-size: calc(var(--body) * .8);
}

time {
  display: block;
  font-size: calc(var(--body) * .9);
  font-weight: 900;
}

a {
  color: var(--color-text);
  transition: opacity .2s ease;
  text-decoration: underline;
}

a:hover {
  color: var(--color-text);
  opacity: .7;
}

/* ==========================================================================
   Components: Buttons
   ========================================================================== */
[class^="btn-"] {
  color: #fff;
  cursor: pointer;
  display: grid;
  place-content: center;
  font-size: calc(var(--body) * 1.5);
  font-weight: 900;
  margin-inline: auto;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease-in-out;
  max-width: 320px;
}

[class^="btn-"]:hover {
  color: #fff;
  opacity: .5;
  text-decoration: none;
}

/* Button Shapes */
[class^="btn-"]::before,
[class^="btn-"]::after,
[class^="btn-"] span::before,
[class^="btn-"] span::after {
  content: "";
  margin: auto;
  position: absolute;
  inset-block: 0;
  /* top:0; bottom:0; のモダンな書き方 */
  top: 0;
  bottom: 0;
  transition: all .2s ease-in-out;
  width: 0;
  height: 0;
  pointer-events: none;
  /* クリック透過 */
}

[class^="btn-"]::before,
[class^="btn-"]::after {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 21px 0 0 21px;
  left: 5px;
  width: calc(100% * .5);
  height: 42px;
}

[class^="btn-"]::after {
  border-radius: 0;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  left: calc(100% * .5 + 5px);
  width: 15px;
}

/* Button Icon Lines */
[class^="btn-"] span::before,
[class^="btn-"] span::after {
  background-color: #fff;
  right: 10px;
}

[class^="btn-"] span::before {
  border-radius: 1px;
  width: 20px;
  height: 1px;
}

[class^="btn-"] span::after {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

/* Button Variants */
.btn-entry,
.btn-entry-done {
  border-radius: 28px;
  height: 52px;
}

.btn-entry {
  background-color: var(--color-main2);
}

.btn-entry.is-visible {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.btn-entry-done {
  background-color: #848484;
  display: none;
}

.btn-sub {
  background-color: var(--color-sub);
  border-radius: 8px;
  height: 40px;
}

.btn-sub::before {
  background-color: #fff;
  border-radius: 1px;
  clip-path: var(--right);
  right: 8px;
  left: inherit;
  width: 12px;
  height: 16px;
}

.btn-sub::after {
  display: none;
}

/* ==========================================================================
   Section Design
   ========================================================================== */
.sec__inner {
  padding-top: calc(var(--body) * 5);
  position: relative;
}

.sec__inner::before {
  background: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/sec.svg) no-repeat center;
  background-size: cover;
  content: "";
  margin: auto;
  position: absolute;
  top: -24px;
  right: 0;
  left: 0;
  width: 146px;
  height: 70px;
}

.sec__inner h2 {
  font-size: var(--type-h2);
  line-height: 1.3;
  text-align: center;
}

.sec__inner h2::before {
  content: attr(data-title);
  display: block;
  font-family: "Caveat", cursive;
  font-weight: normal;
  font-size: calc(var(--body) * 1.5);
  letter-spacing: .06em;
  line-height: 1;
  margin-bottom: 10px;
}

h2.elem {
  opacity: .2;
  transform: translateY(16px);
  transition: all .4s ease-in-out;
}

h2.elem.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sec__inner h3 {
  font-size: var(--type-h3);
  line-height: 1.3;
  margin-top: var(--space-m);
  text-align: center;
}

.sec__inner h4 {
  font-size: var(--type-h4);
}

.sec__inner p,
.sec__inner ul {
  margin-top: var(--space-s);
}

/* Footer */
.footer {
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-top: var(--space-m);
  padding-bottom: var(--space-s);
}

.footer>.optout,
.footer>.copyright {
  font-size: calc(var(--body) * .8) !important;
  margin-bottom: 0 !important;
}

.footer>.optout>a {
  color: var(--color-text) !important;
}

.copy {
  text-align: center;
}

/* ==========================================================================
   Utilities / Libraries (GAMPLA etc)
   ========================================================================== */
.campaign__container-floating-footer {
  display: none;
}

.campaign__container {
  max-width: 900px;
}

.alert,
.alert-danger,
.alert-triangle {
  border-radius: 0;
  line-height: 1;
  margin: 0;
}

.fab {
  display: none;
}

/* ==========================================================================
   Page Specific Layout
   ========================================================================== */
.wrap {
  /* contain: paint; -> レイアウト崩れのリスクがあるため content に変更または削除推奨。
     ここでは安全性をとり削除（または content） */
  contain: content;
  position: relative;
  margin: 0 auto;
}

h1 {
  position: relative;
  height: 376px;
}

h1::before {
  content: "";
  background: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/kv.png) no-repeat center bottom;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 1;
}

h1::after {
  content: "";
  border: 40px solid var(--color-bg2);
  border-radius: 50%;
  margin: auto;
  position: absolute;
  bottom: -32px;
  left: calc((1600px - 100%)*-.5);
  width: 1600px;
  height: 1600px;
  z-index: -1;
}

.h1__main,
.h1__sub {
  position: absolute;
}

.h1__main {
  background-image: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/h1.png);
  background-size: auto 100%;
  animation: h1 4s steps(6) infinite;
  left: -40px;
  bottom: -32px;
  transform: scaleX(-1);
  width: 184px;
  height: 168px;
  will-change: background-position;
}

@keyframes h1 {
  to {
    background-position: -1105px;
  }
}

.h1__sub {
  top: 0;
  right: -16px;
  width: 124px;
}

.kv-desc {
  text-align: center;
}

.kv-desc time {
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid var(--color-text);
  display: inline-block;
  padding: 2px 8px;
  position: relative;
}

.kv-desc p {
  margin-top: var(--space-s);
}

.kv-desc p b {
  display: block;
  font-size: calc(var(--body)*1.2);
}

/* Quiz Section (Which) */
.sec-which {
  background-color: #CFEBEF;
  padding-bottom: var(--space-m);
  position: relative;
}

.sec-which::before {
  content: "";
  background-color: #CFEBEF;
  position: absolute;
  top: 0;
  left: calc((100vw - 425px) * -.5);
  width: 100vw;
  height: 100%;
}

.sec-which p {
  text-align: center;
}

.sec-which ul {
  counter-reset: whichnum;
  flex-direction: column;
  gap: var(--space-s);
  padding-left: 0;
}

.sec-which li {
  display: flex;
  flex-wrap: wrap;
}

.sec-which li h3::before {
  counter-increment: whichnum;
  content: "Q"counter(whichnum) ".";
  display: flex;
  align-items: center;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.sec-which h3 {
  margin-top: 0;
  padding-left: 40px;
  position: relative;
  text-align: left;
  width: 100%;
}

.sec-which li div {
  flex: 1;
  margin-top: 8px;
  position: relative;
}

.sec-which li div+div {
  margin-left: 12px;
}

.sec-which li div::before {
  background-color: var(--color-sub);
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  z-index: 1;
}

.sec-which li div:nth-of-type(1):before {
  background-color: var(--color-main1);
  content: "A";
}

.sec-which li div:nth-of-type(2):before {
  background-color: var(--color-main2);
  content: "B";
}

/* Radio Button Styling */
.sec-which input {
  display: none;
}

.sec-which input[id$="-a"]:checked+label {
  background-color: var(--color-main1);
  color: #fff;
}

.sec-which input[id$="-b"]:checked+label {
  background-color: var(--color-main2);
  color: #fff;
}

.sec-which input:checked+label::after {
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
}

.sec-which label {
  background-color: #fff;
  border: 1px solid var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px 8px 4px 28px;
  position: relative;
  height: 56px;
}

.sec-which label::before,
.sec-which label::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}

.sec-which label::before {
  background-color: #fff;
  border: 1px solid var(--color-text);
  display: block;
  left: 8px;
  width: 12px;
  height: 12px;
}

.sec-which label::after {
  top: -4px;
  left: 12px;
  transform: rotate(45deg);
  width: 6px;
  height: 12px;
}

.sec-which .btn-sub {
  margin-top: var(--space-m);
  width: 100%;
}

.sec-which .btn-sub::before {
  display: none;
}

/* Result Area */
.sec-which__a {
  margin-top: var(--space-m);
}

.sec-which__a li div {
  margin-top: 0;
}

.sec-which__a label {
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  height: auto;
}

.sec-which__a label::before {
  display: none;
}

.sec-which__a label[id$="-a"] {
  background-color: var(--color-main1);
  color: #fff;
}

.sec-which__a label[id$="-b"] {
  background-color: var(--color-main2);
  color: #fff;
}

.sec-which__a label img {
  display: block;
  width: auto;
  height: 20px;
}

.sec-which__a ul {
  display: none;
  flex-direction: row;
  gap: 12px;
  padding-left: 0;
}

.sec-which__a li {
  border: 1px solid var(--color-text);
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex: 1;
  padding: 4px 8px;
}

.sec-which__a li:first-child {
  background-color: var(--color-main1);
  color: #fff;
}

.sec-which__a li:last-child {
  background-color: var(--color-main2);
  color: #fff;
}

.sec-which__a li span {
  font-size: calc(var(--body) * 1.4);
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.sec-which__a p {
  margin-top: var(--space-m);
}

.sec-which__a p img {
  margin: var(--space-s) auto 0;
  height: 40px;
}

.resultBox {
  animation: result .4s ease-in-out;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-s);
}

@keyframes result {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.logos {
  display: flex;
  justify-content: center;
  margin-top: var(--space-s);
  gap: var(--space-m);
}

.logos img {
  margin: 0 !important;
  width: auto;
  height: 24px !important;
}

.sec-age img {
  /* border: 1px solid var(--color-text); */
  margin-top: var(--space-s);
}

/* ==========================================================================
   Main Content & Tabs
   ========================================================================== */
.sec-main .sec__inner {
  padding-top: 0;
}

.sec-main .sec__inner::before {
  display: none;
}

.main-head {
  flex-direction: row;
  padding-left: 0;
}

.tabBtn {
  border-radius: 16px 16px 0 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--body) * 1.4);
  font-weight: 900;
  letter-spacing: 6px;
  flex: 1;
  opacity: .5;
  transform: scale(.9);
  transition: all .2s ease-in-out;
  height: 48px;
  cursor: pointer;
}

.tabBtn.is-active {
  opacity: 1;
  transform: scale(1);
}

.tabBtn:first-child {
  background-color: var(--color-main1);
  transform-origin: bottom left;
}

.tabBtn:last-child {
  background-color: var(--color-main2);
  transform-origin: bottom right;
}

.main-body {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.tab {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 0 0 16px 16px;
  display: none;
  padding: var(--space-m) var(--space-s) var(--space-s);
  /* scroll-padding-top: 80px; */
  transition: all .1s ease-in-out;
  /* transition-behavior: allow-discrete; これは新しすぎるためコメントアウトで安全策をとるか、残しても古いブラウザは無視するだけなので維持 */
  transition-behavior: allow-discrete;
  width: 100%;
}

.tab:first-child {
  border: 8px solid var(--color-main1);
  transform: translateX(-50%);
}

.tab:last-child {
  border: 8px solid var(--color-main2);
  transform: translateX(50%);
}

.tab:first-child.is-active {
  display: block;
  transform: translateX(0);
}

@supports (transition-behavior: allow-discrete) {

  /* モダンブラウザ用のアニメーション */
  .tab:first-child.is-active {
    @starting-style {
      transform: translateX(-50%);
    }
  }
}

.tab:last-child.is-active {
  display: block;
  transform: translateX(0);
}

@supports (transition-behavior: allow-discrete) {

  /* モダンブラウザ用のアニメーション */
  .tab:last-child.is-active {
    @starting-style {
      transform: translateX(50%);
    }
  }
}

.tab section {
  padding: 0;
}

.tab h2 {
  position: relative;
  text-align: center;
}

.tab h2::before {
  content: "";
  margin-bottom: 0;
  position: absolute;
  right: -10px;
  bottom: -20px;
  height: 120px;
  pointer-events: none;
}

.tab--mamorail h2::before {
  animation: mamorail .8s steps(2, jump-none) infinite alternate;
  background: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/img_mamorail1.png) no-repeat;
  background-size: auto 100%;
  right: -32px;
  bottom: -8px;
  width: 73px;
  will-change: background-image;
}

.tab--anshin h2::before {
  animation: anshin .8s steps(2, jump-none) infinite alternate;
  background: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/img_anshin.png) no-repeat;
  background-size: auto 100%;
  width: 82px;
  will-change: background-image;
}

@keyframes mamorail {
  0% {
    background: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/img_mamorail1.png) no-repeat;
    background-size: auto 100%;
  }

  100% {
    background: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/img_mamorail2.png) no-repeat;
    background-size: auto 100%;
  }
}

@keyframes anshin {
  0% {
    background: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/img_anshin1.png) no-repeat;
    background-size: auto 100%;
  }

  100% {
    background: url(https://prcp.pass.auone.jp/gpl/202601_mamorail/img/img_anshin2.png) no-repeat;
    background-size: auto 100%;
  }
}

.tab h2 p {
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid var(--color-text);
  display: inline-block;
  font-size: 12px;
  padding: 2px 4px;
  position: relative;
}

.tab h2 p b {
  color: var(--color-main2);
  font-weight: bold;
}

.tab--mamorail h3 {
  color: var(--color-main1);
}

.tab--anshin h3 {
  color: var(--color-main2);
}

.tab h4 {
  margin-top: var(--space-s);
  line-height: 1.4;
}

.tab h4+p {
  margin-top: 8px;
}

.logo__sub,
.logo__main {
  margin: 0 auto;
  position: relative;
}

.logo__sub {
  height: 56px;
}

.logo__main {
  margin-top: 20px;
  height: 40px;
}

.tab ul {
  list-style: disc;
}

.tab time {
  margin-top: var(--space-s);
  text-align: center;
}

.tab .bonus small {
  margin-top: 8px;
}

.tab .participation {
  border-radius: 12px;
  padding: var(--space-s);
}

.tab .participation h3 {
  margin-top: 0;
}

.tab--mamorail .participation {
  border: 3px dotted var(--color-main1);
}

.tab--anshin .participation {
  border: 3px dotted var(--color-main2);
}

.participation ul {
  list-style: decimal;
}

.participation li b {
  color: var(--color-main2);
}

.entry {
  margin: var(--space-s) 0;
  width: 100%;
}

.subscription {
  background-color: var(--color-bg2);
  margin-top: var(--space-s);
  padding: 8px;
}

.subscription h4 {
  text-align: center;
}

.subscription ul {
  display: flex;
  flex-direction: row;
  gap: 8px;
  list-style: none;
  padding-left: 0;
}

.subscription li {
  flex: 1;
}

.subscription+small {
  margin-top: 8px;
}

.btn-main {
  background-color: var(--color-sub);
  border-radius: 8px;
  color: var(--color-text);
  font-size: calc(var(--body) * 1);
  margin: 0 auto;
  max-width: 320px;
  height: 40px;
}

.btn-main::before,
.btn-main::after {
  display: none;
}

.mail-form {
  background-color: var(--color-bg2);
  border-radius: 8px;
  padding: var(--space-s);
}

.reduction {
  text-align: center;
}

.about img {
  border-radius: 12px;
}

.about .btn-sub {
  margin-top: var(--space-m);
}

.tab--mamorail .about ul {
  list-style: "＊";
  margin-top: 8px;
}

.tab--anshin .about,
.tab--anshin .convenient {
  background-color: var(--color-main2);
  margin-right: calc(var(--space-s) * -1);
  margin-left: calc(var(--space-s) * -1);
}

.tab--anshin .about {
  color: #fff;
  padding: var(--space-m) 8px 0;
}

.tab--anshin .about h3 {
  color: #fff;
  margin-top: 0;
}

.tab--anshin .about img {
  border-radius: 0;
  margin: auto;
  height: 186px;
}

.tab--anshin .about ul {
  list-style: "⚪︎";
}

.tab--anshin .about ul span {
  display: inline-block;
  width: 64px;
}

.tab .convenient {
  margin-top: 0;
  padding: var(--space-m) 8px var(--space-m);
}

.convenient h3 {
  color: #fff;
  margin-top: 0;
}

.convenient ul {
  list-style: none;
  padding: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.convenient li {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  padding: 8px 4px;
  text-align: center;
  width: calc(100% * .5 - 4px);
}

.convenient figcaption {
  font-size: 11px;
  margin-top: 8px;
}

.convenient .btn-sub {
  margin-top: var(--space-m);
}

/* Caution List */
.tab--mamorail .caution ul {
  list-style: decimal;
}

.tab--mamorail .caution ul a {
  display: block;
  margin: 4px 0 8px;
}

.tab--mamorail .caution ul a:last-child {
  margin-bottom: 0;
}

.tab--anshin .caution ul {
  list-style: none;
  padding: 0;
}

.tab--anshin .caution li {
  padding-left: var(--space-s);
  position: relative;
}

.tab--anshin .caution ul li::before {
  content: "※";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.tab--anshin .caution ul ul {
  list-style: circle;
  margin-top: 0;
  padding-left: var(--space-s);
}

.tab--anshin .caution ul ul li {
  padding-left: 0;
}

.tab--anshin .caution ul ul li::before {
  content: "";
}

.services {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-s);
}

.services a {
  flex: 1;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
/* SP */
@media (max-width: 320px) {
  .pc {
    display: none;
  }

  h1 {
    height: 328px;
  }

  .sec-which label {
    font-size: 11px;
  }

  .tab--mamorail h2::before {
    right: -56px;
  }

  .tab--anshin h2::before {
    right: -48px;
  }

  .btn-main {
    font-size: calc(var(--body) * .75);
  }

  .footer>.optout,
  .footer>.copyright {
    font-size: calc(var(--body) * .7) !important;
  }
}

@media (min-width: 321px) and (max-width: 425px) {
  .pc {
    display: none;
  }
}

/* PC */
@media (min-width: 426px) {
  .sp {
    display: none;
  }

  .wrap {
    /* PC表示時に paint/content contain があると不都合が出る場合があるため解除 */
    contain: none;
  }

  h1::before {
    left: calc((100vw - 425px) * -.5);
  }

}

@media (min-width: 1601px) {
  h1::after {
    margin-left: calc((1600px - 425px)*-.5);
    right: 0;
    left: 0;
  }
}