@charset "UTF-8";
:root {
  --blue-light: #F2FBFC;
  --blue: #BEE2EB;
  --blue-dark: #009BC3;
  --green-light: #F2F8F6;
  --green: #128980;
  --yellow-light: #FFFFF8;
  --yellow: #FFED0F;
  --white: #FFF;
  --black: #000;
  --gray-light: #F2F2F2;
  --gray: #9D9D9D;
  --pink-light: #FCF2F2;
  --pink: #F05656;
  --red: #CB0505;
  --content-width: 900px;
  --inner-content-width: 700px;
}

/* --------------------------------------------------------------
common
-------------------------------------------------------------- */
html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

picture,
figure {
  display: flex;
  justify-content: center;
}

img {
  max-width: 100%;
  height: auto;
}

b {
  font-weight: 600;
}

span.linebreak {
  display: inline-block;
}

/* --------------------------------------------------------------
.container
-------------------------------------------------------------- */
.container {
  max-width: var(--content-width);
  margin-inline: auto;
}

/* --------------------------------------------------------------
.header
-------------------------------------------------------------- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 64px;
  padding-left: 15px;
  padding-right: 15px;
}
@media print, screen and (min-width: 769px) {
  .header {
    height: 70px;
  }
}
.header a {
  display: flex;
}

/* --------------------------------------------------------------
.fixedDeposit
-------------------------------------------------------------- */
.fixedDeposit {
  background: var(--blue-dark) url(../img/bg_fixed_deposit.png) no-repeat left center/cover;
  color: var(--white);
  padding: 35px 15px 20px;
}
@media print, screen and (min-width: 769px) {
  .fixedDeposit {
    background-position: center center;
    padding-top: 50px;
    padding-bottom: 30px;
  }
}

/* --------------------------------------------------------------
.outsideOkinawa
-------------------------------------------------------------- */
.outsideOkinawa {
  background-color: var(--white);
  position: relative;
  padding: 25px;
  border-radius: 7px;
  max-width: 345px;
  margin-inline: auto;
}
@media print, screen and (min-width: 769px) {
  .outsideOkinawa {
    max-width: var(--inner-content-width);
    padding: 50px 50px 30px;
  }
}
.outsideOkinawa .outsideOkinawa__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--yellow);
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  width: 232px;
  height: 35px;
  padding-bottom: 2px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
}
@media print, screen and (min-width: 769px) {
  .outsideOkinawa .outsideOkinawa__heading {
    width: 360px;
    height: 50px;
    font-size: 28px;
  }
}
.outsideOkinawa .outsideOkinawa__content {
  display: flex;
  flex-flow: column;
  gap: 10px;
  color: var(--black);
}
@media print, screen and (min-width: 769px) {
  .outsideOkinawa .outsideOkinawa__content .img-1 img {
    width: 100%;
    max-width: 560px;
  }
}
@media print, screen and (min-width: 769px) {
  .outsideOkinawa .outsideOkinawa__content .img-2 img {
    width: 100%;
    max-width: 540px;
  }
}
@media print, screen and (min-width: 769px) {
  .outsideOkinawa .outsideOkinawa__content .img-3 img {
    margin-top: 5px;
    width: 100%;
    max-width: 600px;
  }
}

/* --------------------------------------------------------------
.applicationProcess
-------------------------------------------------------------- */
.applicationProcess {
  padding: 30px 15px;
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.applicationProcess .applicationProcess__heading {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: var(--yellow);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  height: 155px;
  position: relative;
  cursor: pointer;
  user-select: none;
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__heading {
    font-size: 24px;
    height: 170px;
  }
}
.applicationProcess .applicationProcess__heading::before {
  content: "";
  display: block;
  width: 12px;
  height: 8px;
  background: url(../img/icon_arrow-black.svg) no-repeat center center/contain;
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 100;
  transform: translateY(-50%) rotate(0);
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__heading::before {
    width: 20px;
    height: 11px;
    right: 26px;
  }
}
.applicationProcess .applicationProcess__heading::after {
  content: "";
  display: block;
  width: 70px;
  height: 70px;
  background: url(../img/icon_okiginsmart.svg) no-repeat center center/contain;
  margin-top: 5px;
}
.applicationProcess .applicationProcess__heading span.decoration {
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
}
.applicationProcess .applicationProcess__heading span.decoration::before {
  content: "";
  display: block;
  width: 11px;
  height: 17px;
  background: url(../img/icon_decoration_left-blue.svg) no-repeat center center/contain;
  margin-right: 5px;
}
.applicationProcess .applicationProcess__heading span.decoration::after {
  content: "";
  display: block;
  width: 11px;
  height: 17px;
  background: url(../img/icon_decoration_right-blue.svg) no-repeat center center/contain;
}
.applicationProcess .applicationProcess__heading.open::before {
  transform: translateY(-50%) rotate(180deg);
}
.applicationProcess .applicationProcess__contents {
  display: none;
  padding-top: 30px;
  background-color: var(--yellow-light);
}
.applicationProcess .applicationProcess__contents .section__heading {
  background-color: var(--blue-dark);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  padding: 10px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
}
.applicationProcess .applicationProcess__article {
  font-size: 12px;
  padding: 0 15px 40px 105px;
  position: relative;
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__article {
    font-size: 16px;
    padding: 0 30px 50px 160px;
  }
}
.applicationProcess .applicationProcess__article:before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 15px;
  z-index: 100;
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__article:before {
    width: 125px;
    height: 125px;
  }
}
.applicationProcess .applicationProcess__article::after {
  content: "";
  display: block;
  width: 5px;
  height: calc( 100% - 85px );
  background: url(../img/icon_dotted.svg) repeat-y center top;
  position: absolute;
  top: 83px;
  left: 52px;
  z-index: 10;
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__article::after {
    height: calc( 100% - 132px );
    top: 130px;
    left: 74px;
  }
}
.applicationProcess .applicationProcess__article .heading {
  display: flex;
  align-items: center;
  min-height: 80px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__article .heading {
    font-size: 18px;
    min-height: 125px;
  }
}
.applicationProcess .applicationProcess__article .textarea {
  display: flex;
  flex-flow: column;
  gap: 1em;
}
.applicationProcess .applicationProcess__article .picture {
  margin-top: 1em;
  max-width: 300px;
}
.applicationProcess .applicationProcess__article .app {
  display: flex;
  flex-flow: column;
  gap: 10px;
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__article .app {
    flex-flow: row;
    gap: 70px;
  }
}
.applicationProcess .applicationProcess__article .app img {
  width: 180px;
}
.applicationProcess .applicationProcess__article .app a {
  display: inline-flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__article .app a {
    font-size: 12px;
    padding-right: 80px;
  }
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__article .app a.iphone {
    background: url(../img/img_appstore_qr.png) no-repeat right top/64px 64px;
  }
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__article .app a.android {
    background: url(../img/img_googleplay_qr.png) no-repeat right top/64px 64px;
  }
}
.applicationProcess .applicationProcess__article[data-step="1"]:before {
  background-image: url(../img/application_process/step-1.svg);
}
.applicationProcess .applicationProcess__article[data-step="2"]:before {
  background-image: url(../img/application_process/step-2.svg);
}
.applicationProcess .applicationProcess__article[data-step="3"]:before {
  background-image: url(../img/application_process/step-3.svg);
}
.applicationProcess .applicationProcess__article[data-step="4"]:before {
  background-image: url(../img/application_process/step-4.svg);
}
.applicationProcess .applicationProcess__article[data-step="5"]:before {
  background-image: url(../img/application_process/step-5.svg);
}
.applicationProcess .applicationProcess__article[data-step="6"]:before {
  background-image: url(../img/application_process/step-6.svg);
}
.applicationProcess .applicationProcess__article[data-step="7"]:before {
  background-image: url(../img/application_process/step-7.svg);
}
.applicationProcess .applicationProcess__article[data-step="8"]:before {
  background-image: url(../img/application_process/step-8.svg);
}
.applicationProcess .applicationProcess__article[data-step="8"]:after {
  display: none;
}
.applicationProcess .applicationProcess__close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90px;
  background-color: var(--gray);
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.applicationProcess .applicationProcess__close::after {
  content: "";
  display: block;
  width: 20px;
  height: 12px;
  background: url(../img/icon_arrow-white.svg) no-repeat center center/contain;
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 100;
  transform: translateY(-50%) rotate(180deg);
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess .applicationProcess__close::after {
    right: 26px;
  }
}

/* --------------------------------------------------------------
.applicationProcess__caution
-------------------------------------------------------------- */
.applicationProcess__caution {
  background-color: var(--pink-light);
  border: solid 1px var(--pink);
  border-radius: 7px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 40px;
  padding: 25px 20px;
  max-width: var(--inner-content-width);
}
@media print, screen and (min-width: 1025px) {
  .applicationProcess__caution {
    padding: 25px 50px 40px;
    margin-inline: auto;
  }
}
.applicationProcess__caution .caution__text {
  font-size: 16px;
  color: var(--pink);
}
.applicationProcess__caution .caution__text::before {
  content: "";
  display: block;
  width: 38px;
  height: 33px;
  background: url(../img/icon_caution-pink.svg) no-repeat center center/contain;
  margin-inline: auto;
  margin-bottom: 10px;
}
.applicationProcess__caution .caution__box {
  background-color: var(--white);
  color: var(--pink);
  font-size: 14px;
  font-weight: 700;
  padding: 15px;
  border: solid 1px var(--pink);
  border-radius: 7px;
  margin-top: 20px;
}
.applicationProcess__caution .caution__list {
  display: flex;
  flex-flow: column;
  gap: 1em;
  font-size: 12px;
  list-style: disc;
  padding-left: 15px;
  margin-top: 20px;
}
@media print, screen and (min-width: 769px) {
  .applicationProcess__caution .caution__list {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------
.deposit
-------------------------------------------------------------- */
.deposit {
  background-color: var(--blue-light);
}

/* --------------------------------------------------------------
.choices
-------------------------------------------------------------- */
.choices {
  background: var(--blue-dark) url(../img/bg_pattern.png) no-repeat left center/cover;
  color: var(--white);
  padding: 0 15px 30px;
}
@media print, screen and (min-width: 1025px) {
  .choices {
    padding-bottom: 60px;
  }
}
.choices .container {
  max-width: var(--inner-content-width);
}
.choices h2.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--yellow);
  color: var(--black);
  height: 72px;
  font-size: 24px;
  font-weight: 700;
  position: relative;
  z-index: 100;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 40px;
}
@media print, screen and (min-width: 1025px) {
  .choices h2.heading {
    height: 123px;
    font-size: 36px;
    margin-bottom: 58px;
  }
}
.choices h2.heading::after {
  content: "";
  display: block;
  width: 24px;
  height: 21px;
  background-color: var(--yellow);
  position: absolute;
  left: 50%;
  bottom: -19px;
  z-index: 100;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media print, screen and (min-width: 1025px) {
  .choices h2.heading::after {
    width: 40px;
    height: 30px;
    bottom: -27px;
  }
}
.choices h3.heading--okigin {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 8px;
  line-height: 1;
  margin-bottom: 40px;
}
@media print, screen and (min-width: 1025px) {
  .choices h3.heading--okigin {
    gap: 10px;
    margin-bottom: 60px;
  }
}
@media print, screen and (min-width: 1025px) {
  .choices h3.heading--okigin .txt__okigin {
    margin-bottom: 10px;
  }
}
@media print, screen and (min-width: 1025px) {
  .choices h3.heading--okigin .txt__okigin img {
    width: 180px;
  }
}
.choices h3.heading--okigin .txt__yuimaru {
  font-size: 36px;
  font-weight: 700;
}
@media print, screen and (min-width: 1025px) {
  .choices h3.heading--okigin .txt__yuimaru {
    font-size: 70px;
  }
}
.choices h3.heading--okigin .txt__campaign {
  font-size: 29px;
  font-weight: 700;
}
@media print, screen and (min-width: 1025px) {
  .choices h3.heading--okigin .txt__campaign {
    font-size: 70px;
  }
}
.choices h3.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--yellow);
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  width: 232px;
  height: 35px;
  padding-bottom: 2px;
  margin-inline: auto;
  margin-top: 30px;
}
@media print, screen and (min-width: 769px) {
  .choices h3.heading {
    width: 360px;
    height: 50px;
    font-size: 28px;
    margin-top: 50px;
  }
}
.choices .table {
  margin-top: 20px;
  margin-bottom: 20px;
  color: var(--black);
  text-align: center;
}
@media print, screen and (min-width: 1025px) {
  .choices .table {
    margin-top: 40px;
  }
}
.choices .table .col-1,
.choices .table .col-2,
.choices .table .col-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.choices .table b.star {
  display: inline-flex;
  gap: 4px;
  font-size: 17px;
}
@media print, screen and (min-width: 769px) {
  .choices .table b.star {
    font-size: 30px;
    line-height: 1;
  }
}
.choices .table b.star::before, .choices .table b.star::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 16px;
  background: url(../img/icon_star.svg) no-repeat center center/contain;
}
@media print, screen and (min-width: 769px) {
  .choices .table b.star::before, .choices .table b.star::after {
    width: 20px;
    height: 30px;
  }
}
.choices .table .table__heading {
  font-size: 14px;
  font-weight: 700;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--blue);
  border-left: solid 1px var(--blue);
  border-right: solid 1px var(--blue);
  border-bottom: solid 1px var(--blue);
}
.choices .table .table__heading .col-1 {
  border-right: solid 1px var(--white);
}
.choices .table .table__heading .col-2 {
  border-right: solid 1px var(--white);
}
.choices .table .table__item {
  font-size: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--white);
  border-left: solid 1px var(--blue);
  border-right: solid 1px var(--blue);
  border-bottom: solid 1px var(--blue);
}
@media print, screen and (min-width: 769px) {
  .choices .table .table__item {
    font-size: 26px;
  }
}
.choices .table .table__item .col-1 {
  border-right: solid 1px var(--blue);
}
.choices .table .table__item .col-2 {
  border-right: solid 1px var(--blue);
}
.choices .table .table__item .col-3 {
  padding: 10px 5px;
}
.choices .list--disc {
  display: flex;
  flex-flow: column;
  gap: 4px;
  font-size: 10px;
  list-style: disc;
  padding-left: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}
@media print, screen and (min-width: 769px) {
  .choices .list--disc {
    font-size: 14px;
    margin-top: 25px;
  }
}
.choices .list--asterisk {
  display: flex;
  flex-flow: column;
  gap: 4px;
  font-size: 10px;
  padding-left: 15px;
  margin-top: 15px;
}
@media print, screen and (min-width: 769px) {
  .choices .list--asterisk {
    font-size: 14px;
    margin-top: 25px;
  }
}
.choices .list--asterisk li {
  position: relative;
}
.choices .list--asterisk li::before {
  content: "※";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -13px;
  z-index: 100;
}
@media print, screen and (min-width: 1025px) {
  .choices .list--asterisk li::before {
    left: -17px;
  }
}

/* --------------------------------------------------------------
.recommended
-------------------------------------------------------------- */
.recommended {
  background: var(--blue-dark) url(../img/bg_pattern.png) no-repeat left center/cover;
  color: var(--white);
  padding: 0 15px 30px;
}
@media print, screen and (min-width: 1025px) {
  .recommended {
    padding-bottom: 60px;
  }
}
.recommended h2.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--yellow);
  color: var(--black);
  height: 72px;
  font-size: 24px;
  font-weight: 700;
  position: relative;
  z-index: 100;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 40px;
}
@media print, screen and (min-width: 1025px) {
  .recommended h2.heading {
    height: 123px;
    font-size: 36px;
    margin-bottom: 70px;
  }
}
.recommended h2.heading::after {
  content: "";
  display: block;
  width: 24px;
  height: 21px;
  background-color: var(--yellow);
  position: absolute;
  left: 50%;
  bottom: -19px;
  z-index: 100;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media print, screen and (min-width: 1025px) {
  .recommended h2.heading::after {
    width: 40px;
    height: 30px;
    bottom: -27px;
  }
}
.recommended .article {
  background-color: var(--white);
  color: var(--black);
  border-radius: 7px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  padding: 40px 20px 25px;
  position: relative;
  max-width: 345px;
  margin-inline: auto;
}
@media print, screen and (min-width: 769px) {
  .recommended .article {
    max-width: var(--inner-content-width);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 50px 30px 30px;
  }
}
.recommended .article .article__figure {
  margin-bottom: 15px;
}
@media print, screen and (min-width: 769px) {
  .recommended .article .article__figure {
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 769px) {
  .recommended .article .article__contents {
    display: flex;
    flex-flow: column;
    justify-content: center;
  }
}
.recommended .article.before {
  margin-top: 60px;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 1025px) {
  .recommended .article.before {
    margin-bottom: 25px;
  }
}
.recommended .article.before .article__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--pink);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  width: 232px;
  height: 35px;
  padding-bottom: 2px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
}
@media print, screen and (min-width: 1025px) {
  .recommended .article.before .article__heading {
    font-size: 24px;
    width: 290px;
    height: 45px;
  }
}
.recommended .article.before .article__details {
  border: solid 1px var(--pink);
  background-color: var(--pink-light);
  color: var(--pink);
  border-radius: 7px;
  padding: 15px;
  text-align: center;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 769px) {
  .recommended .article.before .article__details {
    margin-bottom: 20px;
  }
}
@media print, screen and (min-width: 1025px) {
  .recommended .article.before .article__details {
    font-size: 18px;
  }
}
.recommended .article.before .article__details a {
  text-decoration: underline;
  font-weight: 700;
}
.recommended .article.before .article__fill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 50px;
  background-color: var(--pink);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  border-radius: 7px;
  text-align: center;
}
.recommended .article.before .article__fill::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../img/icon_caution-white.svg) no-repeat center center;
}
.recommended .article.after {
  padding-top: 50px;
  margin-top: 30px;
}
@media print, screen and (min-width: 1025px) {
  .recommended .article.after {
    margin-top: 50px;
  }
}
.recommended .article.after .article__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--yellow);
  color: var(--black);
  font-size: 24px;
  font-weight: 700;
  border-radius: 999px;
  width: 232px;
  height: 50px;
  padding-bottom: 2px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
}
@media print, screen and (min-width: 1025px) {
  .recommended .article.after .article__heading {
    font-size: 29px;
    width: 354px;
    height: 55px;
  }
}
.recommended .article.after .article__details {
  border: solid 1px var(--yellow);
  background-color: var(--yellow-light);
  color: var(--black);
  border-radius: 7px;
  padding: 15px;
  text-align: center;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 769px) {
  .recommended .article.after .article__details {
    margin-bottom: 20px;
  }
}
@media print, screen and (min-width: 1025px) {
  .recommended .article.after .article__details {
    font-size: 18px;
  }
}
.recommended .article.after .article__details b {
  position: relative;
}
.recommended .article.after .article__details b::after {
  content: "";
  display: block;
  width: calc( 100% + 16px );
  height: 12px;
  background-color: var(--yellow);
  position: absolute;
  left: -8px;
  bottom: -3px;
  z-index: 10;
  clip-path: polygon(1.5% 0, 100% 0, 98.5% 100%, 0 100%);
}
.recommended .article.after .article__details span {
  position: relative;
  z-index: 100;
}
.recommended .article.after .article__fill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 50px;
  background-color: var(--yellow);
  color: var(--black);
  font-size: 20px;
  font-weight: 700;
  border-radius: 7px;
  text-align: center;
}
.recommended .article.after .article__fill::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../img/icon_check-yellow.svg) no-repeat center center;
}

/* --------------------------------------------------------------
.guaranteeSystem
-------------------------------------------------------------- */
.guaranteeSystem {
  background-color: var(--blue-light);
  padding: 25px 15px;
}
@media print, screen and (min-width: 1025px) {
  .guaranteeSystem {
    padding-top: 50px;
    padding-bottom: 90px;
  }
}
.guaranteeSystem .container {
  max-width: var(--inner-content-width);
}
.guaranteeSystem h2.heading {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: var(--blue-dark);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 18px;
}
@media print, screen and (min-width: 1025px) {
  .guaranteeSystem h2.heading {
    font-size: 36px;
    margin-bottom: 30px;
  }
}
.guaranteeSystem h2.heading span.decoration {
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
}
@media print, screen and (min-width: 1025px) {
  .guaranteeSystem h2.heading span.decoration {
    font-size: 18px;
  }
}
.guaranteeSystem h2.heading span.decoration::before {
  content: "";
  display: block;
  width: 11px;
  height: 17px;
  background: url(../img/icon_decoration_left-black.svg) no-repeat center center/contain;
  margin-right: 5px;
}
.guaranteeSystem h2.heading span.decoration::after {
  content: "";
  display: block;
  width: 11px;
  height: 17px;
  background: url(../img/icon_decoration_right-black.svg) no-repeat center center/contain;
}
.guaranteeSystem .figure {
  margin-bottom: 20px;
}
@media print, screen and (min-width: 1025px) {
  .guaranteeSystem .figure {
    margin-bottom: 30px;
  }
}
.guaranteeSystem .textarea {
  display: flex;
  flex-flow: column;
  gap: 1em;
}

/* --------------------------------------------------------------
.importantPoint
-------------------------------------------------------------- */
.importantPoint {
  padding: 0 15px 40px;
}
@media print, screen and (min-width: 1025px) {
  .importantPoint {
    padding-bottom: 60px;
  }
}
.importantPoint .container {
  max-width: var(--inner-content-width);
}
.importantPoint h2.heading {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: var(--blue-dark);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 18px;
}
@media print, screen and (min-width: 1025px) {
  .importantPoint h2.heading {
    font-size: 36px;
    margin-bottom: 30px;
  }
}
.importantPoint h2.heading span.decoration {
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
}
@media print, screen and (min-width: 1025px) {
  .importantPoint h2.heading span.decoration {
    font-size: 18px;
  }
}
.importantPoint h2.heading span.decoration::before {
  content: "";
  display: block;
  width: 11px;
  height: 17px;
  background: url(../img/icon_decoration_left-black.svg) no-repeat center center/contain;
  margin-right: 5px;
}
.importantPoint h2.heading span.decoration::after {
  content: "";
  display: block;
  width: 11px;
  height: 17px;
  background: url(../img/icon_decoration_right-black.svg) no-repeat center center/contain;
}
.importantPoint .table {
  margin-top: 20px;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 1025px) {
  .importantPoint .table {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
.importantPoint .table .table__heading {
  font-size: 12px;
  font-weight: 700;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--blue);
  border-left: solid 1px var(--blue);
  border-right: solid 1px var(--blue);
  border-bottom: solid 1px var(--blue);
}
@media print, screen and (min-width: 1025px) {
  .importantPoint .table .table__heading {
    font-size: 23px;
  }
}
.importantPoint .table .table__heading .col-1,
.importantPoint .table .table__heading .col-2,
.importantPoint .table .table__heading .col-3 {
  display: flex;
  align-items: center;
  padding: 10px;
}
.importantPoint .table .table__heading .col-1,
.importantPoint .table .table__heading .col-2 {
  border-right: solid 1px var(--white);
}
.importantPoint .table .table__item {
  font-size: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--white);
  border-left: solid 1px var(--blue);
  border-right: solid 1px var(--blue);
  border-bottom: solid 1px var(--blue);
}
@media print, screen and (min-width: 1025px) {
  .importantPoint .table .table__item {
    font-size: 20px;
  }
}
.importantPoint .table .table__item .col-1,
.importantPoint .table .table__item .col-2,
.importantPoint .table .table__item .col-3 {
  display: flex;
  align-items: center;
  padding: 10px;
}
.importantPoint .table .table__item .col-1,
.importantPoint .table .table__item .col-2 {
  border-right: solid 1px var(--blue);
}
.importantPoint .table .highlights {
  position: relative;
  background-color: var(--green-light);
  font-weight: 700;
}
.importantPoint .table .highlights::after {
  content: "";
  display: block;
  width: calc( 100% + 4px);
  height: calc( 100% + 4px);
  border: solid 2px var(--green);
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 10;
}
.importantPoint .textarea {
  display: flex;
  flex-flow: column;
  gap: 1em;
}

/* --------------------------------------------------------------
.conditions
-------------------------------------------------------------- */
.conditions {
  background-color: var(--gray-light);
  padding: 30px 15px;
  margin-bottom: 50px;
}
@media print, screen and (min-width: 1025px) {
  .conditions {
    max-width: var(--content-width);
    margin-inline: auto;
    margin-bottom: 75px;
  }
}
.conditions h2.heading {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 1025px) {
  .conditions h2.heading {
    font-size: 24px;
  }
}
.conditions ul.details {
  display: flex;
  flex-flow: column;
  gap: 5px;
  max-width: var(--inner-content-width);
  margin-inline: auto;
  list-style: disc;
  padding-left: 15px;
}

/* --------------------------------------------------------------
.churashima
-------------------------------------------------------------- */
.churashima {
  margin-top: 30px;
}
@media print, screen and (min-width: 1025px) {
  .churashima {
    margin-top: 75px;
    margin-bottom: 0;
  }
}
.churashima .textarea {
  padding: 20px 15px 0;
}
@media print, screen and (min-width: 769px) {
  .churashima .textarea {
    display: none;
  }
}

/* --------------------------------------------------------------
.applicationNotes
-------------------------------------------------------------- */
.applicationNotes {
  background-color: var(--blue-light);
  padding: 30px 15px;
}
@media print, screen and (min-width: 1025px) {
  .applicationNotes {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.applicationNotes .container {
  max-width: var(--inner-content-width);
  margin-inline: auto;
}
.applicationNotes h2.heading {
  color: var(--blue-dark);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 1025px) {
  .applicationNotes h2.heading {
    font-size: 36px;
  }
}
.applicationNotes h3.heading {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 1025px) {
  .applicationNotes h3.heading {
    font-size: 24px;
    margin-top: 40px;
  }
}
.applicationNotes ul.details {
  display: flex;
  flex-flow: column;
  gap: 10px;
  list-style: disc;
  padding-left: 13px;
  font-size: 12px;
}
.applicationNotes .table {
  margin-bottom: 20px;
}
@media print, screen and (min-width: 1025px) {
  .applicationNotes .table {
    margin-bottom: 30px;
  }
}
.applicationNotes .table .table__heading {
  font-size: 12px;
  font-weight: 700;
  display: grid;
  grid-template-columns: 110px 1fr;
  background-color: var(--blue);
  border-left: solid 1px var(--blue);
  border-right: solid 1px var(--blue);
  border-bottom: solid 1px var(--blue);
}
@media print, screen and (min-width: 1025px) {
  .applicationNotes .table .table__heading {
    grid-template-columns: 210px 1fr;
    font-size: 23px;
  }
}
.applicationNotes .table .table__heading .col-1,
.applicationNotes .table .table__heading .col-2 {
  display: flex;
  align-items: center;
  padding: 10px;
}
@media print, screen and (min-width: 1025px) {
  .applicationNotes .table .table__heading .col-1,
  .applicationNotes .table .table__heading .col-2 {
    padding: 10px 20px;
  }
}
.applicationNotes .table .table__heading .col-1 {
  border-right: solid 1px var(--white);
}
.applicationNotes .table .table__item {
  font-size: 12px;
  display: grid;
  grid-template-columns: 110px 1fr;
  background-color: var(--white);
  border-left: solid 1px var(--blue);
  border-right: solid 1px var(--blue);
  border-bottom: solid 1px var(--blue);
}
@media print, screen and (min-width: 1025px) {
  .applicationNotes .table .table__item {
    grid-template-columns: 210px 1fr;
    font-size: 20px;
  }
}
.applicationNotes .table .table__item .col-1,
.applicationNotes .table .table__item .col-2 {
  padding: 10px;
}
@media print, screen and (min-width: 1025px) {
  .applicationNotes .table .table__item .col-1,
  .applicationNotes .table .table__item .col-2 {
    padding: 15px 20px;
  }
}
.applicationNotes .table .table__item .col-1 {
  display: flex;
  align-items: center;
  border-right: solid 1px var(--blue);
}
.applicationNotes .table .table__item .col-2 {
  display: flex;
  flex-flow: column;
  gap: 1em;
}
.applicationNotes .textarea {
  display: flex;
  flex-flow: column;
  gap: 1em;
}

/* --------------------------------------------------------------
.questions
-------------------------------------------------------------- */
.questions {
  background-color: var(--white);
  padding: 30px 15px;
}
@media print, screen and (min-width: 1025px) {
  .questions {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.questions h2.heading {
  color: var(--blue-dark);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 1025px) {
  .questions h2.heading {
    font-size: 36px;
    margin-bottom: 40px;
  }
}
.questions .details {
  max-width: var(--inner-content-width);
  margin-inline: auto;
}
.questions .details dt {
  color: var(--blue-dark);
  font-weight: 700;
  margin-bottom: 8px;
  padding-left: 20px;
  text-indent: -21px;
}
@media print, screen and (min-width: 1025px) {
  .questions .details dt {
    font-size: 18px;
    margin-bottom: 15px;
  }
}
.questions .details dd {
  font-size: 14px;
  padding-left: 21px;
  text-indent: -16px;
}
@media print, screen and (min-width: 1025px) {
  .questions .details dd {
    font-size: 16px;
    margin-left: 20px;
  }
}
.questions .details dd:not(:last-child) {
  margin-bottom: 15px;
}
@media print, screen and (min-width: 1025px) {
  .questions .details dd:not(:last-child) {
    margin-bottom: 40px;
  }
}

/* --------------------------------------------------------------
.inquiry
-------------------------------------------------------------- */
.inquiry {
  background-color: var(--gray-light);
  padding: 30px 15px;
}
@media print, screen and (min-width: 1025px) {
  .inquiry {
    max-width: var(--content-width);
    margin-inline: auto;
  }
}
.inquiry h2.heading {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 1025px) {
  .inquiry h2.heading {
    font-size: 24px;
  }
}
.inquiry .details {
  max-width: var(--inner-content-width);
  margin-inline: auto;
  padding-left: 15px;
}
.inquiry .details dt {
  display: list-item;
  font-weight: 700;
  list-style: disc;
}
.inquiry .details dd:not(:last-child) {
  margin-bottom: 15px;
}

/* --------------------------------------------------------------
.okiginsmart
-------------------------------------------------------------- */
.okiginsmart {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 15px;
}
.okiginsmart a {
  display: flex;
}
@media print, screen and (max-width: 768px) {
  .okiginsmart a {
    max-width: 345px;
  }
}

.okiginsmart.narrow {
  padding: 0 0 40px;
}
@media print, screen and (min-width: 1025px) {
  .okiginsmart.narrow {
    padding-bottom: 75px;
  }
}

/* --------------------------------------------------------------
.footer
-------------------------------------------------------------- */
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--red);
  color: var(--white);
  font-size: 12px;
  width: 100%;
  height: 70px;
}