@charset "UTF-8";
/* ポップアップ（事業者選択 / ROM容量選択）のデザイン。
   サイト共通CSS /css/style.css (v=20260818-1) から次の5ブロックを無改変で抜き出したコピー。
     .p-productModalWrap / .p-carrierBtnList / .p-carrierBtn /
     .p-handlingBtnList / .p-handlingBtn

   ★ 共通CSS側の更新には追従しない
     このファイルは style.css より後に読まれるため、同じセレクタではこちらが勝つ。
     共通CSS側でボタンの色やサイズを変えた場合は、同じ5ブロックを取り直して差し替えること。

   ★ 読み込み順
     lp.css より前に置くこと。lp.css 側にLP固有の上書き（オーバーレイの色、
     販売店ロゴの最大幅など）があり、それを後勝ちで効かせる必要がある。

   参照している /images/common/ico-blank.svg と ico-modal.svg はサイトルート基準の絶対パス。 */

.p-productModalWrap {
  padding: 50px 0px;
}
@media screen and (min-width: 960px) {
  .p-productModalWrap {
    padding: 60px 30px;
  }
}
.p-productModalWrap p {
  color: #323232;
  font-size: 1.5rem;
}
@media screen and (min-width: 960px) {
  .p-productModalWrap p {
    font-size: 1.6rem;
  }
}

.p-carrierBtnList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
}
@media screen and (min-width: 960px) {
  .p-carrierBtnList {
    gap: 20px;
  }
}
.p-carrierBtnList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-carrierBtn {
  display: block;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 13rem;
  padding: 10px 20px;
  text-align: center;
  color: white !important;
  font-weight: bold;
  text-decoration: none;
  border-radius: calc(infinity * 1px);
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  line-height: 1.5;
  cursor: pointer;
  background-color: #004a70;
  font-size: 1.5rem;
}
@media screen and (min-width: 960px) {
  .p-carrierBtn {
    min-width: 26rem;
    padding: 14px 30px;
    font-size: 1.6rem;
  }
  .p-carrierBtn:not([target=_blank]):not(.-modal)::after {
    position: absolute;
    top: 50%;
    right: 25px;
    width: 8px;
    height: 8px;
    -webkit-transform: translate(0, -50%) rotate(45deg);
            transform: translate(0, -50%) rotate(45deg);
    border-top: 1px solid white;
    border-right: 1px solid white;
    content: "";
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
}
@media screen and (min-width: 960px) and (max-width: 519px) {
  .p-carrierBtn:not([target=_blank]):not(.-modal)::after {
    right: 16px;
  }
}
@media screen and (min-width: 960px) {
  .p-carrierBtn:not([target=_blank]):not(.-modal):hover::after {
    -webkit-transform: translate(4px, -50%) rotate(45deg);
            transform: translate(4px, -50%) rotate(45deg);
  }
  .p-carrierBtn:hover {
    opacity: 0.7;
  }
}
.p-carrierBtn[target=_blank] {
  padding-right: 40px;
}
.p-carrierBtn[target=_blank]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translate(0, -55%);
          transform: translate(0, -55%);
  width: 14px;
  height: 14px;
  background: url(/images/common/ico-blank.svg) no-repeat center center/contain;
}
@media screen and (min-width: 960px) {
  .p-carrierBtn[target=_blank]::after {
    -webkit-transform: translate(0, -60%);
            transform: translate(0, -60%);
  }
}
.p-carrierBtn.-modal {
  padding-right: 45px;
}
.p-carrierBtn.-modal::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translate(0, -55%);
          transform: translate(0, -55%);
  width: 15px;
  height: 15px;
  background: url(/images/common/ico-modal.svg) no-repeat center center/contain;
  border: none;
}
@media screen and (min-width: 960px) {
  .p-carrierBtn.-modal::after {
    -webkit-transform: translate(0, -60%);
            transform: translate(0, -60%);
  }
}
.p-carrierBtn.-docomo {
  background-color: #aa1325;
}
.p-carrierBtn.-au {
  background-color: #fc7f2b;
}
.p-carrierBtn.-uqmobile {
  background-color: #227fab;
}
.p-carrierBtn.-rakuten {
  background-color: #f19dae;
}
.p-carrierBtn.-jcom {
  background-color: #e9381b;
}
.p-carrierBtn.-simfree {
  background-color: #67B9AB;
}
.p-carrierBtn.-ymobile {
  background-color: #ef4e24;
}
.p-carrierBtn.-softbank {
  background-color: #bbbdbe;
}

.p-handlingBtnList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media screen and (min-width: 960px) {
  .p-handlingBtnList {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.p-handlingBtn {
  border: solid 1px #cdd5e4;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  padding: 24px 16px 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  .p-handlingBtn {
    padding: 30px 16px 20px;
  }
}
.p-handlingBtn[href^=http] {
  pointer-events: auto;
  cursor: pointer;
  border: solid 1px #004858;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.p-handlingBtn[href^=http]:hover {
  opacity: 0.7;
}
.p-handlingBtn[href^=http] span {
  color: #004858;
  text-decoration: underline;
}
.p-handlingBtn img {
  margin-inline: auto;
  display: block;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 150/30;
  -o-object-fit: contain;
     object-fit: contain;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-handlingBtn img.logo-large {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.p-handlingBtn span {
  text-align: center;
  line-height: 1.3;
  font-size: 1.2rem;
  margin: 0;
}
@media screen and (min-width: 960px) {
  .p-handlingBtn span {
    font-size: 1.4rem;
  }
}