@charset "utf-8";

/* ---------------------------------------------
Reset
--------------------------------------------- */
/* Modern browser */
*,
*::before,
*::after{box-sizing:border-box}
*{margin:0;padding:0;}
img,
picture,
video,
canvas,
svg{display:block;max-width:100%}
input,
button,
textarea,
select{font:inherit}
p,
h1,
h2,
h3,
h4,
h5,
h6{overflow-wrap:break-word}


/* addition */
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
em {
  font-style: normal;
}
small {
  font-size: 70%;
}

ul,ol,li {
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}


/* ---------------------------------------------
font
--------------------------------------------- */
html {
  font-family: 'Noto Sans JP', sans-serif;
}

html body,
table th,
table td {
  line-height: 1.6;
  color: #000;
  font-size: 4.2666vw;
}
@media screen and (min-width:641px) {
  html body,
  table th,
  table td {
    font-size: 25px;
  }
}

strong, em {
  font-weight: 600;
}


/* ---------------------------------------------
link
--------------------------------------------- */
a,
a:link,
a:visited {
  color: #1e87f0;
}
a:hover {
  color: #f01e1e;
  text-decoration: none;
}


/* ---------------------------------------------
width
--------------------------------------------- */
.wrapper {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width:641px) {
  .wrapper {
    width: 100%;
    min-width: 960px;
  }
}

.contentsWrapper {
  width: 84%;
  margin: 0 auto;
}
@media screen and (min-width:641px) {
  .contentsWrapper {
    width: 860px;
  }
}

.contentsWrapper2 {
  width: 85.3333vw;
}
@media screen and (min-width:641px) {
  .contentsWrapper2 {
    width: 940px;
  }
}

/* ---------------------------------------------
cmn
--------------------------------------------- */
.page_cmn .sec {
  margin: 0;
}

.page_cmn p {
  margin: 0 0 2em;
}

.page_cmn sup {
  font-size: 70%;
  vertical-align: super;
}

.page_cmn .red1 {
  color: #e41c24;
}
.page_cmn .blu1 {
  color: #2167ae;
}

.page_cmn .note small {
  font-size: 2.9333vw;
  display: block;
}
@media screen and (min-width:641px) {
  .page_cmn .note small {
    font-size: 14px;
  }
}
.page_cmn .note1 small {
  padding-left: 1em;
  text-indent: -1em;
}
.page_cmn .note2 small {
  padding-left: 1.8em;
  text-indent: -1.8em;
}

.page_cmn .txtSt1 {
  text-decoration: underline;
}

.page_cmn .secTtlSt1 {
  text-align: center;
  display: flex;
  justify-content: center;
}
@media screen and (min-width:641px) {
  .page_cmn .secTtlSt1 {
    align-items: center;
  }
}
.page_cmn .secTtlSt1::before,
.page_cmn .secTtlSt1::after {
  content: '';
  width: 4vw;
  border: 2px solid #1b358a;
  display: block;
}
.page_cmn .secTtlSt1::before {
  border-right: 0;
}
.page_cmn .secTtlSt1::after {
  border-left: 0;
}
@media screen and (min-width:641px) {
  .page_cmn .secTtlSt1::before,
  .page_cmn .secTtlSt1::after {
    height: 2px;
    background-color: #1b358a;
    border: 0;
    flex-grow: 1;
  }
}
.page_cmn .secTtlSt1 .secTtl {
  margin: 0 .5em;
  color: #1b358a;
  font-size: 8vw;
  font-weight: 900;
  display: inline-block;
}
@media screen and (min-width:641px) {
  .page_cmn .secTtlSt1 .secTtl {
    margin: 0 .3em;
    font-size: 50px;
  }
}

.page_cmn .brPc {
  display: none;
}
@media screen and (min-width:641px) {
  .page_cmn .brPc {
    display: block;
  }
    .page_cmn .brSp {
    display: none;
  }
}

.page_cmn  .hidden_sp {
  display: none;
}
@media screen and (min-width:641px) {
  .page_cmn  .hidden_sp {
    display: block;
  }
}


/* cta */
.page_cmn .cta {
  margin: 0 auto;
  padding-bottom: 2.5em;
}
.page_cmn .cta .ctaTtlArea {
  margin-bottom: 1em;
}
.page_cmn .cta .ctaTtlArea .ttl {
  width: 106.02%;
  margin: 0 -3.01%;
}
@media screen and (min-width:641px) {
  .page_cmn .cta .ctaTtlArea .ttl {
    width: 100%;
    margin: 0 auto;
  }
}
.page_cmn .cta .btnArea {
  margin-bottom: 1px;
}
@media screen and (min-width:641px) {
  .page_cmn .cta .btnArea {
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
  }
}
.page_cmn .cta .btnArea .btn {
  width: 100%;
  margin: 0 auto .8em;
}
@media screen and (min-width:641px) {
  .page_cmn .cta .btnArea .btn {
    width: 47.874%;
    margin: 0;
  }
}
.page_cmn .cta .btnArea .btn a:hover {
  filter: saturate(150%) brightness(95%);
}


/* ---------------------------------------------
#pageHeader
--------------------------------------------- */
#pageHeader {
  padding: 4vw 0;
  position: relative;
  z-index: 10;
}
@media screen and (min-width:641px) {
  #pageHeader {
    padding: 20px 0;
  }
}
#pageHeader .logoArea a {
  vertical-align: bottom;
  text-decoration: none;
  display: inline-block;
}
#pageHeader .logoArea .inner {
  display: flex;
  align-items: center;
  text-decoration: none;
}
#pageHeader .logoArea .logo {
  width: 29.3333vw;
  margin-right: 2.6666vw;
}
@media screen and (min-width:641px) {
  #pageHeader .logoArea .logo {
    width: 170px;
    margin-right: 20px;
  }
}
#pageHeader .logoArea .name {
  color: #2167ae;
  font-size: 3.3333vw;
  font-weight: 700;
}
@media screen and (min-width:641px) {
  #pageHeader .logoArea .name {
    font-size: 17px;
  }
}



/* ---------------------------------------------
#mainContents
--------------------------------------------- */
#mainContents {
  position: relative;
  z-index: 1;
}


/* contentHeader */
#mainContents .contentHeader {
  margin-bottom: 8vw;
}
@media screen and (min-width:641px) {
  #mainContents .contentHeader {
    margin-bottom: 45px;
  }
}
#mainContents .contentHeader #mvArea {
  margin: 0;
}
@media screen and (min-width:641px) {
  #mainContents .contentHeader #mvArea {
    background: url(../images/mv_bg1.jpg) no-repeat center / auto 100%;
  }
}
#mainContents .contentHeader #mvArea .pageTitle {
  max-width: 1000px;
  margin: 0 auto;
}


/* contents */
#mainContents #sec1 {
  padding: 8vw 0 5.3333vw;
  background: url(../images/sec1_bg1_sp.jpg) no-repeat center / cover;
}
@media screen and (min-width:641px) {
  #mainContents #sec1 {
    padding: 2em 0;
    background-image: url(../images/sec1_bg1.jpg);
  }
}
#mainContents #sec1 .secTtlArea {
  margin-bottom: 1em;
}
#mainContents #sec1 .secTtlArea .secTtl {
  width: 84vw;
  margin: 0 auto;
}
@media screen and (min-width:641px) {
  #mainContents #sec1 .secTtlArea .secTtl {
    width: 900px;
  }
}
#mainContents #sec1 .steps {
  width: 100%;
  background-color: #fff;
  border: .2666vw solid #dde4e3;
  border-radius: 1.3333vw;
  overflow: hidden;
}
@media screen and (min-width:641px) {
  #mainContents #sec1 .steps {
    border-width: 2px;
    border-radius: 8px;
  }
}
#mainContents #sec1 .steps .step {
  width: 100%;
  margin-bottom: 1vw;
  text-align: center;
  filter: drop-shadow(0 2vw 1.3333vw #edf5fa);
  position: relative;
}
@media screen and (min-width:641px) {
  #mainContents #sec1 .steps .step {
    margin-bottom: .5em;
    filter: drop-shadow(0 15px 10px #edf5fa);
  }
}
#mainContents #sec1 .steps .step:last-child {
  margin-bottom: 0;
  filter: none;
}
#mainContents #sec1 .steps .step .step_inner {
  padding: 5.3333vw 0 0;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.2666vw), 50% 100%, 0 calc(100% - 4.2666vw));
}
@media screen and (min-width:641px) {
  #mainContents #sec1 .steps .step .step_inner {
    padding: 1.5em 0 2.5em;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2em), 50% 100%, 0 calc(100% - 2em));
  }
}
#mainContents #sec1 .steps .step:last-child .step_inner {
  clip-path: none;
}
#mainContents #sec1 .steps .step .ttlArea {
  margin-bottom: .5em;
}
#mainContents #sec1 .steps .step .ttlArea .ttl {
  padding: .1em 1.2em;
  line-height: 1;
  color: #1b358a;
  font-size: 4.8vw;
  font-weight: 900;
  background-color: #fbec75;
  border-radius: .5333vw;
  display: inline-block;
}
@media screen and (min-width:641px) {
  #mainContents #sec1 .steps .step .ttlArea .ttl {
    font-size: 28px;
    border-radius: 2px;
  }
}
#mainContents #sec1 .steps .step .ttlArea .ttl .num {
  font-size: 140%;
}
#mainContents #sec1 .steps .step .txtArea1 {
  margin-bottom: .6em;
}
#mainContents #sec1 .steps .step .txtArea1 p:last-child {
  margin-bottom: 0;
}
#mainContents #sec1 .steps .step .figImg {
  width: 32.791%;
  margin: 0 auto;
}
#mainContents #sec1 .steps .step1 {
  z-index: 3;
}
#mainContents #sec1 .steps .step2 {
  z-index: 2;
}
#mainContents #sec1 .steps .step3 {
  z-index: 1;
}


#mainContents #sec2 {
  padding: 8vw 0 5.3333vw;
  background-color: #c4e7f8;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 {
    padding: 1em 0 1.5em;
    background-color: #eef0f1;
  }
}
#mainContents #sec2 .secTtlArea {
  margin-bottom: 1.5em;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .secTtlArea {
    margin-bottom: 1em;
  }
}
#mainContents #sec2 .bg_sty1 {
  padding: 2em 0;
  background-color: #fff;
}
#mainContents #sec2 .present_list {
  width: 76vw;
  margin: 0 auto;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list {
    width: 79.07%;
  }
}
#mainContents #sec2 .present_list .present {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  background-image: linear-gradient(to right,#707070 .2666vw, transparent .2666vw);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: .5333vw .1333vw;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present {
    background-image: linear-gradient(to right,#707070 2px, transparent 2px);
    background-size: 4px 1px;
    flex-direction: row;
    justify-content: space-between;
  }
}
#mainContents #sec2 .present_list .present:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  background: none;
}
#mainContents #sec2 .present_list .present .figImg {
  width: 53.3333vw;
  margin: 0 auto 1em;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present .figImg {
    width: 32.942%;
    margin: 0;
  }
}
#mainContents #sec2 .present_list .present .figImg.shadow picture {
  box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present .figImg.shadow picture {
    box-shadow: 0 0 1.3333vw 0 rgba(0,0,0,.25);
  }
}
#mainContents #sec2 .present_list .present .figImg .note {
  padding-top: .3em;
}
#mainContents #sec2 .present_list .present .txtArea {
  display: contents;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present .txtArea {
    width: 63.5%;
    display: block;
  }
}
#mainContents #sec2 .present_list .present .txtArea .ttlArea {
  margin-bottom: 1em;
  color: #1b358a;
  display: flex;
  align-items: center;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present .txtArea .ttlArea {
    margin-bottom: .3em;
  }
}
#mainContents #sec2 .present_list .present .txtArea .ttlArea .lot {
  width: 18.6666vw;
  height: 18.6666vw;
  margin-right: .8em;
  line-height: 1;
  font-size: 4vw;
  font-weight: 700;
  background-color: #fef772;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present .txtArea .ttlArea .lot {
    width: 110px;
    height: 110px;
    font-size: 20px;
  }
}
#mainContents #sec2 .present_list .present .txtArea .ttlArea .lot .num {
  margin-bottom: .1em;
  font-size: 8vw;
  display: block;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present .txtArea .ttlArea .lot .num {
    font-size: 44px;
  }
}
#mainContents #sec2 .present_list .present .txtArea .ttlArea .ttl {
  line-height: 1.4;
  font-size: 5.6vw;
  font-weight: 600;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present .txtArea .ttlArea .ttl {
    font-size: 28px;
  }
}
#mainContents #sec2 .present_list .present .txt {
  font-size: 3.7333vw;
}
@media screen and (min-width:641px) {
  #mainContents #sec2 .present_list .present .txt {
    font-size: 20px;
  }
}
#mainContents #sec2 .present_list .present .txt p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width:640px) {
  #mainContents #sec2 .present_list .present .figImg .note {
    font-size: 2.4vw;
  }
  #mainContents #sec2 .present_list .present .txtArea .ttlArea {
    order: 1;
  }
  #mainContents #sec2 .present_list .present .figImg {
    order: 2;
  }
  #mainContents #sec2 .present_list .present .txt {
    order: 3;
  }
}


#mainContents #sec3 {
  padding: 8vw 0 13.3333vw;
}
@media screen and (min-width:641px) {
  #mainContents #sec3 {
    padding: 1.5em 0 3em;
  }
}
#mainContents #sec3 .contentsWrapper {
  width: 92%;
}
@media screen and (min-width:641px) {
  #mainContents #sec3 .contentsWrapper {
    width: 900px;
  }
}
#mainContents #sec3 .secTtlArea {
  margin-bottom: 1em;
}
#mainContents #sec3 .campaign_details {
  padding: 1em 1em;
  background-color: #fff;
  border: .2666vw solid #dde4e3;
  border-radius: 1.0666vw;
  font-size: 3.4666vw;
}
@media screen and (min-width:641px) {
  #mainContents #sec3 .campaign_details {
    padding: 1.5em 2em;
    font-size: 18px;
    border-width: 2px;
    border-radius: 8px;
  }
}
#mainContents #sec3 .campaign_details .campaign_details_list a:link,
#mainContents #sec3 .campaign_details .campaign_details_list a:visited {
  color: #000;
}
#mainContents #sec3 .campaign_details .campaign_details_list .block {
  margin-bottom: 2em;
}
#mainContents #sec3 .campaign_details .campaign_details_list .block dt {
  margin-bottom: 1.5em;
  text-align: center;
  font-size: 3.9333vw;
  font-weight: 600;
  position: relative;
}
@media screen and (min-width:641px) {
  #mainContents #sec3 .campaign_details .campaign_details_list .block dt {
    font-size: 22px;
  }
}
#mainContents #sec3 .campaign_details .campaign_details_list .block dt::before {
  content: '';
  width: 4em;
  height: 3px;
  background-color: #737373;
  position: absolute;
  top: calc(100% + .5em);
  left: 50%;
  transform: translateX(-50%);
}
#mainContents #sec3 .campaign_details .campaign_details_list .block dd p {
  margin-bottom: 1em;
}
#mainContents #sec3 .campaign_details .campaign_details_list .block dd .ttl2 {
  margin-bottom: .5em;
  font-size: 100%;
  font-weight: 400;
}
#mainContents #sec3 .campaign_details .campaign_details_list .block dd .note {
  padding-top: .5em;
  font-size: 2.9333vw;
}
@media screen and (min-width:641px) {
  #mainContents #sec3 .campaign_details .campaign_details_list .block dd .note {
    font-size: 16px;
  }
}
#mainContents #sec3 .campaign_details .campaign_details_list .block dd ol li {
  list-style: decimal inside;
}
#mainContents #sec3 .campaign_details .campaign_details_list .block dd ul.ind1 li {
  padding-left: 1em;
  text-indent: -1em;
}
#mainContents #sec3 .e-mail {
  display: inline-block;
  vertical-align: middle;
}
#mainContents #sec3 .e-mail1 {
  width: 42.1333vw;
}
@media screen and (min-width:641px) {
  #mainContents #sec3 .e-mail1 {
    width: 245px;
  }
}
#mainContents #sec3 .e-mail2 {
  width: 48.8vw;
}
@media screen and (min-width:641px) {
  #mainContents #sec3 .e-mail2 {
    width: 210px;
  }
}
#mainContents #sec3 .e-mail a:hover {
  filter: saturate(150%) brightness(95%);
}


/* ---------------------------------------------
#pageFooter
--------------------------------------------- */
#pageFooter {
  padding: 1em 0 2em;
}
@media screen and (min-width:641px) {
  #pageFooter {
    padding: 1em 0;
  }
}
#pageFooter .approvalNumber {
  margin-bottom: .3em;
  padding-bottom: .3em;
  text-align: right;
  border-bottom: 1px solid #434343;
}
#pageFooter .approvalNumber .num {
  font-size: 2.9333vw;
}
@media screen and (min-width:641px) {
  #pageFooter .approvalNumber .num {
    font-size: 10px;
  }
}
#pageFooter .footer_btm {
  text-align: center;
}
@media screen and (min-width:641px) {
  #pageFooter .footer_btm {
    display: flex;
    justify-content: space-between;
  }
}
#pageFooter .footerNav {
  margin: 0 0 1.5em;
  text-align: center;
}
#pageFooter .footerNav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
#pageFooter .footerNav ul li {
  margin: 0;
  font-size: 2.9333vw;
}
@media screen and (min-width:641px) {
  #pageFooter .footerNav ul li {
    font-size: 15px;
  }
}
#pageFooter .footerNav ul li::after {
  content: '';
  width: 1px;
  height: 1em;
  margin: 0 1.5em;
  background-color: #000;
  display: inline-block;
  transform: translateY(2px);
}
#pageFooter .footerNav ul li:last-child:after {
  display: none;
}
#pageFooter .footerNav ul li a:link,
#pageFooter .footerNav ul li a:visited {
  color: #000;
}
#pageFooter .copyright {
  margin: 0;
  text-align: center;
  font-size: 2.9333vw;
}
@media screen and (min-width:641px) {
  #pageFooter .copyright {
    font-size: 10px;
  }
}

.pageTop {
  width: 13.3333vw;
  height: 13.3333vw;
  margin: 0 0 0 auto;
  font-size: 3vw;
  position: fixed;
  right: 1em;
  bottom: 1em;
  z-index: 9999;
  display: none;
}
@media screen and (min-width:751px) {
  .pageTop {
    width: 50px;
    height: 50px;
    font-size: 13px;
    right: auto;
    left: calc(50% + 480px);
  }
}
.pageTop a {
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  background: #c6e3ef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pageTop a::before {
  content: '';
  width: 8vw;
  height: 3.3333vw;
  background-color: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
@media screen and (min-width:751px) {
  .pageTop a::before {
    width: 30px;
    height: 13px;
  }
}
.pageTop a:hover {
  background: #00a0e9;
}