@charset "utf-8";
body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; /*Chrome,Safari*/
  -ms-text-size-adjust: 100%; /*EgdeMobile*/
  -moz-text-size-adjust: 100%; /*firefox*/
}
/* 共通
-------------------------------------------- */
div#pontabulk_guide {
  width: 100%;
  font-size: 14px;
  text-align: center;
  background: #fff;
}
div#pontabulk_guide img {
  border-radius: 0rem;
}
div#pontabulk_guide article {
  width: 100%;
}
div#pontabulk_guide header {
  width: 100%;
  background: url("../img/img_main_bg_pc.png") lightgray 50% / cover no-repeat;
  text-align: center;
  padding-top: 60px;
}
/* 波線 */
div#pontabulk_guide div.nami_bottom {
  width: 100%;
  background: url("../img/moyo_nami.png") 0% 0% / 100px 20px repeat-x;
  background-position: left 0px bottom -10px;
  display: flex;
  /* padding: 40px 24px 40px 24px; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
div#pontabulk_guide div.nami_top {
  width: 100%;
  background: url("../img/moyo_nami.png") 0% 0% / 100px 20px repeat-x;
  background-position: left 0px top -10px;
  display: flex;
  padding: 40px 24px 40px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
/* 波線 */
div#pontabulk_guide div.contents_title {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
div#pontabulk_guide div.contents_title h2 {
  font-size: 26px;
  color: #003866;
  padding-left: 16px;
  padding-right: 16px;
  font-weight: 700;
}
div#pontabulk_guide div.contents_title img.contents_title_right {
  transform: rotateY(180deg);
}
div#pontabulk_guide section {
  display: flex;
  /* padding: 40px 24px 40px 24px; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
div#pontabulk_guide section.campaign {
  align-self: stretch;
  background: url("../img/bg_shima.png") 0% 0% / 50px 50px repeat;
}
/* 非表示 */
div#pontabulk_guide section.block_off {
  display: none;
}
div#pontabulk_guide section.campaign img.bnr {
  width: 640px;
}
div#pontabulk_guide section.campaign a:hover {
  opacity: 1.0;
}
div#pontabulk_guide section.app_link h2 {
  width: 640px;
  height: 390px;
  background: url("../img/img_dousen_pc01.png") #fff 50% / cover no-repeat;
  margin-right: auto;
  margin-left: auto;
  font-size: 0px;
  margin-top: 30px;
}
div#pontabulk_guide section.merit {
  background: url("../img/bg_kiiro.png") 0% 0% / 300px 300px repeat;
}
div#pontabulk_guide section.merit h2 img {
  max-width: 580px;
  margin-right: auto;
  margin-left: auto;
}
div#pontabulk_guide section.merit div.merit01, div#pontabulk_guide section.merit div.merit02, div#pontabulk_guide section.merit div.merit03 {
  display: flex;
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 16px;
  border-radius: 24px;
  border: 4px solid #0064B5;
  background: #FFF;
}
div#pontabulk_guide section.merit p.img {
  height: 360px;
  width: 360px;
}
div#pontabulk_guide section.merit div p.ico {
  width: 80px;
  height: 80px;
  margin-right: auto;
  margin-left: auto;
}
div#pontabulk_guide section.merit div.merit_innner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 400px;
  text-align: center;
}
div#pontabulk_guide section.merit h3 {
  color: #105D9C;
  font-size: 26px;
  font-weight: 700;
  padding-bottom: 16px;
}
div#pontabulk_guide section.merit h3:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0px;
  display: inline-block;
  width: 60px;
  height: 4px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #105D9C;
}
div#pontabulk_guide section.merit p {
  font-size: 20px;
}
div#pontabulk_guide section.merit div.merit02 p.link {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="%23105D9C" d="M7.5 6.70022C7.776 6.70022 8 6.92422 8 7.20022V7.70022C7.99981 7.97606 7.77588 8.20022 7.5 8.20022H5.5C4.947 8.20022 4.5 8.64722 4.5 9.20022V14.7002C4.50019 15.2521 4.94712 15.7002 5.5 15.7002H12C12.5529 15.7002 12.9998 15.2521 13 14.7002V12.7002C13 12.4242 13.224 12.2002 13.5 12.2002H14C14.276 12.2002 14.5 12.4242 14.5 12.7002V15.2002C14.4998 16.3041 13.6039 17.2002 12.5 17.2002H5C3.89612 17.2002 3.00019 16.3041 3 15.2002V8.70022C3 7.59622 3.896 6.70022 5 6.70022H7.5ZM16.4424 3.27347C16.7144 3.27647 16.9355 3.49756 16.9375 3.76956L16.9961 9.70511C16.9981 9.98095 16.7768 10.2058 16.501 10.208L16.001 10.2129C15.724 10.2149 15.4981 9.99382 15.4961 9.71682L15.4541 5.81546L9.60352 11.6573C9.40852 11.8522 9.09148 11.8522 8.89648 11.6573L8.54297 11.3028C8.34797 11.1078 8.34797 10.7907 8.54297 10.5957L14.3945 4.75198L10.4727 4.70511C10.1977 4.70211 9.97557 4.4762 9.97754 4.20022L9.98242 3.70022C9.98542 3.42329 10.2114 3.20221 10.4873 3.20511L16.4424 3.27347Z" /></svg>');
  background-repeat: no-repeat;
  background-position: right -2px bottom 1px;
  background-size: 20px /*横幅の値*/ 21px /*高さの値*/ ;
  padding-right: 24px;
  text-align: center;
  vertical-align: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  margin-top: 12px;
  color: #105D9C;
  width: 16em;
  margin-right: auto;
  margin-left: auto;
}
div#pontabulk_guide section.step {
  background: url("../img/bg_shima.png") 0% 0% / 50px 50px repeat;
}
div#pontabulk_guide section.step img {
  width: 405px;
  margin-right: auto;
  margin-left: auto;
}
div#pontabulk_guide section.step ul {
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
div#pontabulk_guide section.step p.link {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="%23105D9C" d="M7.5 6.70022C7.776 6.70022 8 6.92422 8 7.20022V7.70022C7.99981 7.97606 7.77588 8.20022 7.5 8.20022H5.5C4.947 8.20022 4.5 8.64722 4.5 9.20022V14.7002C4.50019 15.2521 4.94712 15.7002 5.5 15.7002H12C12.5529 15.7002 12.9998 15.2521 13 14.7002V12.7002C13 12.4242 13.224 12.2002 13.5 12.2002H14C14.276 12.2002 14.5 12.4242 14.5 12.7002V15.2002C14.4998 16.3041 13.6039 17.2002 12.5 17.2002H5C3.89612 17.2002 3.00019 16.3041 3 15.2002V8.70022C3 7.59622 3.896 6.70022 5 6.70022H7.5ZM16.4424 3.27347C16.7144 3.27647 16.9355 3.49756 16.9375 3.76956L16.9961 9.70511C16.9981 9.98095 16.7768 10.2058 16.501 10.208L16.001 10.2129C15.724 10.2149 15.4981 9.99382 15.4961 9.71682L15.4541 5.81546L9.60352 11.6573C9.40852 11.8522 9.09148 11.8522 8.89648 11.6573L8.54297 11.3028C8.34797 11.1078 8.34797 10.7907 8.54297 10.5957L14.3945 4.75198L10.4727 4.70511C10.1977 4.70211 9.97557 4.4762 9.97754 4.20022L9.98242 3.70022C9.98542 3.42329 10.2114 3.20221 10.4873 3.20511L16.4424 3.27347Z" /></svg>');
  background-repeat: no-repeat;
  background-position: right -2px bottom 1px;
  background-size: 20px /*横幅の値*/ 21px /*高さの値*/ ;
  padding-right: 24px;
  text-align: right;
  vertical-align: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  margin-top: 12px;
  color: #105D9C;
  margin-top: 24px;
  letter-spacing: -0.02em;
}
div#pontabulk_guide section.merit02 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  background: url("../img/bg_kiiro.png") 0% 0% / 300px 300px repeat;
}
div#pontabulk_guide section.merit02 h2 img {
  width: 840px;
  margin-right: auto;
  margin-left: auto;
}
div#pontabulk_guide section.merit02 img {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
div#pontabulk_guide section.merit02 ul {
  width: 800px;
  text-align: left;
}
div#pontabulk_guide section.merit02 li {
  font-size: 18px;
}
div#pontabulk_guide section.merit02 li a {
  color: #313133;
  text-decoration: underline;
}
div#pontabulk_guide section.other_link img {
  width: 400px;
  margin-right: auto;
  margin-left: auto;
}
div#pontabulk_guide section.other_link ul {
  display: flex;
  margin-right: auto;
  margin-left: auto;
  align-items: center;
  align-self: stretch;
}
div#pontabulk_guide section.other_link li.first {
  display: block;
  padding-right: 16px;
}
div#pontabulk_guide section.app_link img {
  width: 640px;
}
/*　見出し
-------------------------------------------- */
div#pontabulk_guide header h1 {
  width: 800px;
  height: 350px;
  background: url("../img/img_main_title_pc.png");
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
}
div#pontabulk_guide section .midashi01 {
  width: 800px;
  height: 80px;
  background: url("../img/midashi_pc_01.png");
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
}
div#pontabulk_guide section .midashi02 {
  height: 80px;
  width: 580px;
  background: url("../img/midashi_pc_02.png");
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
}
div#pontabulk_guide section .midashi03 {
  width: 405px;
  height: 80px;
  background: url("../img/midashi_pc_03.png");
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
}
div#pontabulk_guide section .midashi04 {
  height: 80px;
  width: 840px;
  background: url("../img/midashi_pc_04.png");
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
}
div#pontabulk_guide section .midashi05 {
  width: 400px;
  height: 80px;
  background: url("../img/midashi_pc_05.png");
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
}
div#pontabulk_guide section p.sp_link {
  display: none;
}
/* SP用
-------------------------------------------- */
@media screen and (max-width: 750px) {
  div#pontabulk_guide section {
    display: flex;
    padding: 0px 0px 0px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  div#pontabulk_guide header {
    width: 100%;
    background: url("../img/img_main_bg_sp.png") lightgray 50% / cover no-repeat;
    text-align: center;
    padding-top: 0px;
  }
  div#pontabulk_guide header h1 {
    max-width: 100%;
    height: 20%;
    background: url("../img/img_main_title_sp.png");
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    font-size: 0;
    background-position: center;
    aspect-ratio: 720 / 800; /* アスペクト比を保持してレスポンシブ */
  }
  div#pontabulk_guide section.campaign img {
    width: 100%;
  }
  div#pontabulk_guide div.contents_title img.contents_title_right, div#pontabulk_guide div.contents_title img.contents_title_left {
    width: 16px;
  }
  div#pontabulk_guide div.contents_title h2 {
    font-size: 26px;
    color: #003866;
    padding-left: 16px;
    padding-right: 16px;
    font-weight: 700;
  }
  div#pontabulk_guide div.contents_title h2 {
    font-size: 16px;
  }
  div#pontabulk_guide section .midashi01 {
    width: 100%;
    height: 20%;
    background: url("../img/midashi_sp_01.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    font-size: 0;
    background-position: center;
    aspect-ratio: 721 / 160; /* アスペクト比を保持してレスポンシブ */
  }
  div#pontabulk_guide section .midashi02 {
    width: 100%;
    height: 20%;
    background: url("../img/midashi_sp_02.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    font-size: 0;
    background-position: center;
    aspect-ratio: 721 / 160; /* アスペクト比を保持してレスポンシブ */
  }
  div#pontabulk_guide section .midashi03 {
    width: 100%;
    height: 20%;
    background: url("../img/midashi_sp_03.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    font-size: 0;
    background-position: center;
    aspect-ratio: 721 / 160; /* アスペクト比を保持してレスポンシブ */
  }
  div#pontabulk_guide section .midashi04 {
    width: 100%;
    height: 20%;
    background: url("../img/midashi_sp_04.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    font-size: 0;
    background-position: center;
    aspect-ratio: 721 / 160; /* アスペクト比を保持してレスポンシブ */
  }
  div#pontabulk_guide section .midashi05 {
    width: 100%;
    height: 20%;
    background: url("../img/midashi_sp_05.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    font-size: 0;
    background-position: center;
    aspect-ratio: 721 / 160; /* アスペクト比を保持してレスポンシブ */
  }
  div#pontabulk_guide section.campaign img.bnr {
    width: 100%;
  }
  div#pontabulk_guide section.app_link img {
    width: 100%;
  }
  div#pontabulk_guide section.app_link {
    padding: 0px 16px 40px 16px;
  }
  div#pontabulk_guide section.app_link p.pc_link {
    display: none;
  }
  div#pontabulk_guide section a.app_dl {
    display: flex;
    min-height: 56px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid #0689F2;
    background: #0072CE;
    box-shadow: 0px 0px 6px 0px rgba(82, 134, 179, 0.60), 0px 4px 20px 0px rgba(82, 134, 179, 0.20);
    font-size: 16px;
    font-weight: 700;
  }
  div#pontabulk_guide p.sp_link {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="x,y"><path fill="white" d="M3.99998 12.7398L18.89 12.7398L12.89 18.7998C12.7959 18.892 12.7429 19.0181 12.7429 19.1498C12.7429 19.2815 12.7959 19.4077 12.89 19.4998V19.4998L13.25 19.8498C13.3404 19.9433 13.4649 19.9961 13.595 19.9961C13.725 19.9961 13.8495 19.9433 13.94 19.8498V19.8498L21.3 12.3498C21.4894 12.1588 21.4894 11.8508 21.3 11.6598L13.94 4.14982C13.8478 4.05576 13.7217 4.00275 13.59 4.00275C13.4583 4.00275 13.3321 4.05576 13.24 4.14982V4.14982L12.88 4.49982C12.6894 4.69424 12.6894 5.0054 12.88 5.19982L18.87 11.2498L3.99998 11.2498C3.72607 11.2551 3.5053 11.4759 3.49998 11.7498L3.49998 12.2398C3.5053 12.5137 3.72607 12.7345 3.99998 12.7398Z" /></svg>');
    background-repeat: no-repeat;
    background-position: right -4px bottom -1px;
    background-size: 28px /*横幅の値*/ 24px /*高さの値*/ ;
    padding-right: 28px;
    color: #FFF;
    display: block !important;
    font-weight: 700;
    font-size: 16px !important;
  }
  div#pontabulk_guide section.merit div.merit01, div#pontabulk_guide section.merit div.merit02, div#pontabulk_guide section.merit div.merit03 {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 16px;
    border-radius: 24px;
    border: 4px solid #0064B5;
    background: #FFF;
    margin-bottom: 40px;
  }
  div#pontabulk_guide section.merit div.merit01 {
    margin-top: 40px;
  }
  div#pontabulk_guide section.merit div.merit02 {
    flex-direction: column;
  }
  div#pontabulk_guide section.merit div.merit03 {
    margin-bottom: 20px;
  }
  div#pontabulk_guide section.merit div p.ico {
    margin-top: -40px;
  }
  div#pontabulk_guide section.step ul {
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  div#pontabulk_guide section.step img {
    width: 100%;
  }
  div#pontabulk_guide section.step p.link {
    font-size: 14px;
  }
  div#pontabulk_guide section.sp_erase {
    display: none;
  }
  div#pontabulk_guide section.merit02 img {
    width: 100%;
  }
  div#pontabulk_guide section.merit02 ul {
    width: 100%;
    font-size: 12px;
  }
  div#pontabulk_guide section.merit02 ul li {
    font-size: 12px;
  }
  div#pontabulk_guide section.other_link ul {
    display: flex;
    flex-direction: column;
  }
  div#pontabulk_guide section.other_link img {
    width: 100%;
  }
  div#pontabulk_guide section.other_link li.first {
    padding-right: 0px;
    padding-bottom: 16px;
  }
  div#pontabulk_guide section.app_link h2 {
    width: 100%;
    height: 20%;
    background: url("../img/img_dousen_sp.png") #fff 50% / cover no-repeat;
    margin-right: auto;
    margin-left: auto;
    font-size: 0px;
    aspect-ratio: 720 / 600; /* アスペクト比を保持してレスポンシブ */
  }
  div#pontabulk_guide section.merit h3 {
    font-size: 22px;
  }
  div#pontabulk_guide section.merit p {
    font-size: 16px;
  }
}