@charset "utf-8";

:root {
  --mincho: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
}

/* .firstview */
.firstview {
  background-image: url('/cms/feature/oricon/img/mv_bg.jpg');
  background-size: 100% 100%;
  background-position: center top;
  padding-block: 55px 150px;
}
.firstview-hdg {
  font-family: var(--mincho);
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 50px;
  text-align: center;
  margin-bottom: 55px;
}
.firstview-hdg-main {
  color: #FDF39B;
}
.firstview-hdg-sub {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: calc(35 / 24);
}
.firstview-lead {
  font-family: var(--mincho);
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 36px;
  text-align: center;
  margin-bottom: 40px;
}
.firstview-lead-main {
  color: #FDF39B;
}
.firstview-lead-sub {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: calc(30 / 20);
}
.firstview-reasons {
  display: flex;
  column-gap: 19px;
  justify-content: center;
}
.firstview-reasons > * {
  width: 185px;
}
.firstview-reason {
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 15px;
}
.firstview-reason * {
  color: inherit;
}
.firstview-reason-img {
  width: 180px;
}
.firstview-reason-txt {
  font-family: var(--mincho);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: calc(30 / 20);
  text-align: center;
}

/*.main-block */
.main-block {
  background-image: url('/cms/feature/oricon/img/main_bg.jpg');
  background-size: 100% 100%;
  background-position: center top;
}
.main-block-hdg {
  background-image: url('/cms/feature/oricon/img/main_hdg_bg.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 1600px 100%;
  color: #092152;
  font-family: var(--mincho);
  font-size: 45px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: calc(50 / 45);
  text-align: center;
  padding: 33px;
  position: relative;
  top: -60px;
  margin: 0 auto 20px;
}
.main-block-hdg::before {
  content: none;
}
.sec {
  padding-bottom: 100px;
}
.sec-inner {
  margin-inline: auto;
  width: 1200px;
}
.sec-inner > *:last-child {
  margin-bottom: 0;
}
.sec-hdg {
  background-image: url('/cms/feature/oricon/img/sec_hdg_bg.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 1200px 100%;
  color: #F8D36F;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 22px 22px 24px;
  margin-bottom: 70px;
}
.sec-hdg * {
  color: inherit;
}
.sec-hdg-num {
  margin-bottom: 20px;
}
.sec-hdg-num.-num1 > img {
  width: 16px;
}
.sec-hdg-num.-num2 > img {
  width: 25px;
}
.sec-hdg-num.-num3 > img {
  width: 23px;
}
.sec-hdg-main {
  font-family: var(--mincho);
  font-size: 35px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 8px;
}
.sec-hdg-sub > img {
  height: 15px;
}
.separator {
  margin-bottom: 100px;
}
.separator > *:last-child {
  margin-bottom: 0;
}
.hdg {
  color: #fff;
  font-family: var(--mincho);
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 10px;
  text-align: center;
  margin-bottom: 60px;
}
.hdg * {
  color: inherit;
}
.hdg-main {
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}
.hdg-sub {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  order: -1;
}
.cp-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 45px 12px;
  margin-bottom: 45px;
}
.cp-item {
  background-color: #071458;
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.cp-item * {
  color: inherit;
}
.cp-item-img {
}
.cp-item-ttl {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .09em;
  line-height: calc(27 / 20);
  text-align: center;
  padding-block: 7px 6px;
  position: relative;
  max-width: 75%;
}
.cp-item-ttl::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: .5em;
  height: .5em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: -.8em;
  translate: 0 -50%;
  rotate: 45deg;
}
.link-btn-wrap {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 270px));
  justify-content: center;
  row-gap: 16px;
  margin-bottom: 30px;
}
.link-btn {
  background-color: #172C96;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
  padding: 11px;
  position: relative;
}
.link-btn::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: .45em;
  height: .45em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: 19px;
  translate: 0 -50%;
  rotate: 45deg;
}
.pickup {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  column-gap: 20px;
}
.pickup-main {
}
.pickup-main-item {
  color: #fff;
  display: flex;
  flex-direction: column;
  row-gap: 18px;
}
.pickup-main-item * {
  color: inherit;
}
.pickup-main-item-head {
  background-color: #071458;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.pickup-main-item-ttl {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .09em;
  line-height: calc(27 / 20);
  text-align: center;
  padding-block: 7px 6px;
  position: relative;
  max-width: 75%;
}
.pickup-main-item-ttl::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: .5em;
  height: .5em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: -.8em;
  translate: 0 -50%;
  rotate: 45deg;
}
.pickup-main-item-body {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .07em;
  line-height: calc(35 / 18);
}
.pickup-sub-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
}
.pickup-sub-item {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.pickup-sub-note {
  color: #CEDFFF;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: calc(23 / 14);
}
.card {
  background-color: #09165E;
  border: 1px solid #9C9C83;
  color: #fff;
  clip-path: polygon(
    0 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% 100%,
    0 100%
  );
  display: flex;
  flex-direction: column;
  padding: 30px 17px 0;
  position: relative;
}
.card * {
  color: inherit;
}
.card::before {
  content: '';
  background-color: #A6A585;
  height: 37px;
  width: 1px;
  position: absolute;
  top: -7px;
  right: 11px;
  rotate: -45deg;
}
.pickup-sub-items .card {
  min-height: 372px;
}
.pickup-sub-items .card-icon {
  min-height: 72px;
}
.pickup-sub-items .card-ttl {
  min-height: 81px;
}
.card-icon {
  text-align: center;
  margin-bottom: 20px;
}
.card-icon.-d-coupon img {
  width: 161px;
}
.card-icon.-coupon img {
  width: 66px;
}
.card-icon.-travel img {
  width: 82px;
}
.card-icon.-beginner img {
  width: 44px;
}
.card-icon.-faq img {
  width: 60px;
}
.card-icon.-sim img {
  width: 60px;
}
.card-icon.-donate img {
  width: 33px;
}
.card-ttl {
  border-bottom: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: calc(32 / 22);
  text-align: center;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.card-txt {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: calc(27 / 15);
  text-align: center;
  margin-bottom: 19px;
}
.card-more {
  background: linear-gradient(90deg, #09165E 0%, #1530A2 100%);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: calc(27 / 16);
  text-align: right;
  padding: 8px 30px;
  position: relative;
  margin-inline: -17px;
  margin-top: auto;
}
.card-more::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: .5em;
  height: .5em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  rotate: 45deg;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4 , minmax(0, 1fr));
  gap: 20px;
}
.articles {
  display: grid;
  grid-template-columns: repeat(2 , minmax(0, 1fr));
  gap: 20px;
}
.article {
  background-color: #09165E;
  border: 1px solid #9C9C83;
  color: #fff;
  clip-path: polygon(
    0 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% 100%,
    0 100%
  );
  display: grid;
  align-items: start;
  grid-template-columns: 230px minmax(0, 1fr);
  column-gap: 27px;
  padding: 60px 38px 60px 29px;
  position: relative;
}
.article * {
  color: inherit;
}
.article::before {
  content: '';
  background-color: #9C9C83;
  height: 37px;
  width: 1px;
  position: absolute;
  top: -7px;
  right: 11px;
  rotate: -45deg;
}
.article-head {
  background-color: #071458;
}
.article-img {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.article-img-caption {
  font-size: 20px;
  font-weight: 500;
/*letter-spacing: .09em; */
  line-height: calc(27 / 20);
  text-align: center;
  padding-block: 7px 6px;
  position: relative;
  max-width: 75%;
}
.article-img-caption::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: .5em;
  height: .5em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: -.8em;
  translate: 0 -50%;
  rotate: 45deg;
}
.article-txt {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: calc(27 / 16);
}

.main-block2 {
  background-image: url('/cms/feature/oricon/img/main_bg2.jpg');
  background-size: 100% 100%;
  background-position: center top;
  color: #fff;
  padding-block: 100px;
}
.main-block2 * {
  color: inherit;
}
.main-block2-inner {
  margin-inline: auto;
  width: 1200px;
}
.main-block2-inner > *:last-child {
  margin-bottom: 0;
}
.main-block2-lead {
  color: #fff;
  font-family: var(--mincho);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: calc(50 / 25);
  text-align: center;
  margin-bottom: 40px;
}
.main-block2-lead em {
  color: #FDF39B;
  font-size: 31px;
  font-weight: inherit;
  letter-spacing: .02em;
  line-height: calc(50 / 31);
}
.announce-box {
  background-color: #2B377A;
  padding: 32px 50px;
  margin-bottom: 40px;
}
.announce-box > *:last-child {
  margin-bottom: 0;
}
.announce-box-hdg {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .02em;
  line-height: calc(35 / 20);
  text-align: left;
  margin: 0 0 18px;
}
.announce-box-hdg::before {
  content: none;
}
.announce-box-txt {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  margin-bottom: 30px;
}
.announce-box-txt p {
  font-size: 16px;
  letter-spacing: .02em;
  line-height: calc(35 / 16);
}
.summary-box {
  background-color: #00094C;
  padding: 32px 40px;
  margin: 100px auto;
  width: 1000px;
}
.summary-box-ttl {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .02em;
  line-height: calc(21 / 16);
  text-align: center;
  margin-bottom: 24px;
}
.summary-box-detail {
  display: grid;
  grid-template-columns: 322px minmax(322px, 1fr);
  column-gap: 13px;
}
.summary-box-detail-head {
}
.summary-box-detail-body {
}
.summary-box-dl {
  font-size: 16px;
  /* letter-spacing: .02em;*/
  line-height: calc(32 / 16);
}
.summary-box-dl-group {
}
.summary-box-dl dt,
.summary-box-dl dd {
  display: inline;
}

@media (max-width: 767px) {
  /* .firstview */
  .firstview {
    background-image: url('/cms/feature/oricon/img/mv_bg_sp.jpg');
    padding-block: 50px 80px;
  }
  .firstview-hdg {
    row-gap: 20px;
    margin-bottom: 50px;
  }
  .firstview-hdg-sub {
    font-size: min(20px, calc(20 / 375 * 100vw));
    letter-spacing: .05em;
    line-height: calc(33 / 20);
  }
  .firstview-lead {
    row-gap: 30px;
    margin-bottom: 50px;
  }
  .firstview-lead-sub {
    font-size: min(18px, calc(18 / 375 * 100vw));
    line-height: calc(34 / 18);
  }
  .firstview-reasons {
    column-gap: min(8px, calc(8 / 375 * 100vw));
    row-gap: 24px;
    flex-wrap: wrap;
    padding-inline: min(14px, calc(14 / 375 * 100vw));
  }
  .firstview-reasons > * {
    width: min(110px, calc(110 / 375 * 100vw));
  }
  .firstview-reason {
    row-gap: 12px;
  }
  .firstview-reason-img {
    width: 100%;
  }
  .firstview-reason-txt {
    font-size: min(15px, calc(15 / 375 * 100vw));
    line-height: calc(21 / 15);
  }

  /*.main-block */
  .main-block {
    background-image: url('/cms/feature/oricon/img/main_bg_sp.jpg');
  }
  .main-block-hdg {
    background-image: url('/cms/feature/oricon/img/main_hdg_bg_sp.png');
    background-size: 100% 100%;
    font-size: min(25px, calc(25 / 375 * 100vw));
    font-weight: bold;
    line-height: calc(34 / 25);
    padding: 21px min(10px, calc(10 / 375 * 100vw));
    top: 0;
    margin-bottom: 54px;
  }
  .sec {
    padding-bottom: 80px;
    padding-inline: min(15px, calc(15 / 375 * 100vw));
  }
  .sec-inner {
    width: 100%;
  }
  .sec-hdg {
    background-image: url('/cms/feature/oricon/img/sec_hdg_bg_sp.png');
    background-size: 100% 100%;
    padding: 14px 0 15px;
    margin-bottom: 60px;
  }
  .sec-hdg-num {
    margin-bottom: 24px;
  }
  .sec-hdg-num.-num1 > img {
    width: min(11px, calc(11 / 375 * 100vw));
  }
  .sec-hdg-num.-num2 > img {
    width: min(12px, calc(12 / 375 * 100vw));
  }
  .sec-hdg-num.-num3 > img {
    width: min(15px, calc(15 / 375 * 100vw));
  }
  .sec-hdg-main {
    font-size: min(25px, calc(25 / 375 * 100vw));
    line-height: calc(34 / 25);
    margin: 0;
  }
  .sec-hdg-sub > img {
    height: 9px;
  }
  .separator {
    margin-bottom: 70px;
  }
  .hdg {
    row-gap: 10px;
    margin-bottom: 30px;
  }
  .hdg-main {
    font-size: min(27px, calc(27 / 375 * 100vw));
    line-height: 1.2;
  }
  .hdg-sub {
    font-size: min(18px, calc(18 / 375 * 100vw));
  }
  .cp-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 9px;
    margin-bottom: 30px;
  }
  .cp-item-ttl {
    font-size: min(14px, calc(14 / 375 * 100vw));
    line-height: 1;
    padding-block: 7px 6px;
    max-width: 75%;
  }
  .link-btn-wrap {
    grid-template-columns: repeat(1, minmax(0, 174px));
    margin-bottom: 30px;
  }
  .link-btn {
    font-size: min(15px, calc(15 / 375 * 100vw));
    letter-spacing: .05em;
    line-height: 1.4;
    padding: 7px 12px;
  }
  .link-btn::after {
    right: 12px;
  }
  .pickup {
    grid-template-columns: repeat(1, calc(310 / 375 * 100vw));
    justify-content: center;
    row-gap: 40px;
  }
  .pickup-main-item {
    row-gap: 18px;
  }
  .pickup-main-item-ttl {
    font-size: min(14px, calc(14 / 375 * 100vw));
    line-height: 1;
    padding-block: 7px 6px;
  }
  .pickup-main-item-body {
    font-size: min(14px, calc(14 / 375 * 100vw));
    letter-spacing: .02em;
    line-height: calc(27 / 14);
    text-align: center;
  }
  .pickup-sub-items {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: 25px;
  }
  .pickup-sub-item {
    row-gap: 15px;
  }
  .pickup-sub-note {
    font-size: min(13px, calc(13 / 375 * 100vw));
    line-height: calc(23 / 13);
  }
  .card {
    padding: 20px 12px 0;
  }
  .pickup-sub-items .card {
    min-height: auto;
  }
  .pickup-sub-items .card-icon {
    min-height: auto;
  }
  .pickup-sub-items .card-ttl {
    min-height: auto;
  }
  .card-icon.-d-coupon img {
    width: 89px;
  }
  .card-icon.-coupon img {
    width: 35px;
  }
  .card-icon.-travel img {
    width: 54px;
  }
  .card-icon.-beginner img {
    width: 30px;
  }
  .card-icon.-faq img {
    width: 44px;
  }
  .card-icon.-sim img {
    width: 44px;
  }
  .card-icon.-donate img {
    width: 24px;
  }
  .card-ttl {
    font-size: min(18px, calc(18 / 375 * 100vw));
    letter-spacing: .09em;
    line-height: calc(22 / 18);
    padding-bottom: 10px;
    margin-bottom: 18px;
  }
  .card-txt {
    font-size: min(14px, calc(14 / 375 * 100vw));
    letter-spacing: .02em;
    line-height: calc(27 / 14);
    margin-bottom: 18px;
  }
  .card-more {
    font-size: min(16px, calc(16 / 375 * 100vw));
    margin-inline: -12px;
  }
  .cards {
    grid-template-columns: repeat(1, calc(310 / 375 * 100vw));
    justify-content: center;
    gap: 25px;
  }
  .articles {
    grid-template-columns: repeat(1, calc(310 / 375 * 100vw));
    justify-content: center;
    gap: 25px;
  }
  .article {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    justify-content: center;
    row-gap: 20px;
    padding: 30px min(24px, calc(24 / 375 * 100vw));
  }
  .article-img {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .article-img-caption {
    font-size: min(14px, calc(14 / 375 * 100vw));
    line-height: calc(15 / 14);
  }
  .article-txt {
    font-size: min(14px, calc(14 / 375 * 100vw));
    letter-spacing: .02em;
    line-height: calc(27 / 14);
  }

  .main-block2 {
    background-image: url('/cms/feature/oricon/img/main_bg2_sp.jpg');
    padding-block: 70px;
    padding-inline: min(15px, calc(15 / 375 * 100vw));
  }
  .main-block2-inner {
    width: 100%;
  }
  .main-block2-lead {
    font-size: min(16px, calc(16 / 375 * 100vw));
    line-height: calc(34 / 16);
    margin-bottom: 24px;
  }
  .main-block2-lead em {
    font-size: min(19px, calc(19 / 375 * 100vw));
    line-height: calc(34 / 19);
  }
  .announce-box {
    background-color: #2D3C8E;
    padding: 32px min(20px, calc(20 / 375 * 100vw));
    margin-bottom: 24px;
  }
  .announce-box-hdg {
    font-size: min(20px, calc(20 / 375 * 100vw));
    margin: 0 0 20px;
  }
  .announce-box-txt p {
    font-size: min(16px, calc(16 / 375 * 100vw));
  }
  .summary-box {
    background-color: #020C5B;
    padding: 30px min(20px, calc(20 / 375 * 100vw));
    margin: 60px auto;
    width: 100%;
  }
  .summary-box-ttl {
    font-size: min(16px, calc(16 / 375 * 100vw));
    padding: unset;
    margin-bottom: 24px;
  }
  .summary-box-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .summary-box-dl {
    font-size: min(16px, calc(16 / 375 * 100vw));
  }
  .summary-box-dl dt,
  .summary-box-dl dd {
    word-break: break-all;
  }
}