@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700,900|Montserrat:500,900');

html, body {
  color: #4c4948;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.75em;
  text-decoration: none;
  word-break: break-all;
}
@media screen and (max-width: 750px) {
  html, body {
    font-size: 4vw;
  }
}
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, input, textarea, picture, figure, :before, :after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align:baseline;
}
article, header, footer, aside, figure, figcaption, nav, section, main, picture, figure { 
  display:block;
  box-sizing: border-box;
}
body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}
img {
  display: block;
  max-width: 100%;
//  height: auto;
  margin: 0 auto;
  line-height: 1;
}
/* iPhone reset */
input, textarea {
  -webkit-appearance: none;
  max-width: 100%;
}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

input::placeholder,
textarea::placeholder {
  color: #B2B2B2;
}
/* IE */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #B2B2B2;
}
/* Edge */
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #B2B2B2;
}

/*---------------------------------*/
p, a, span, b, strong, i, italic {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

a {
  color: #2C3E50;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .3s;
}

a:hover {
  opacity: .7;
}

b {
  font-weight: bold;
}

strong {
  background: linear-gradient(transparent 60%, #FFF981 60%);
  font-weight: bold;
}

p:not(:last-child) {
  margin-bottom: 1em;
}

input[type="submit"]:hover ,
label {
  cursor: pointer;
}

label input {
  vertical-align: middle;
}

h1 span, h2 span, h3 span {
  display: inline-block;
}


/*---------------------------------*/
body {
  background: none;
}

#wrap {
  width: 100%;
  min-width: 1200px;
}

@media screen and (max-width: 750px) {
  #wrap {
    min-width: initial;
    overflow: hidden;
  }
}

#main {
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width: 750px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

.inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 10px;
}

@media screen and (max-width: 750px) {
  .inner {
    padding: 0 2.66vw;
  }
}


/* header */
/*---------------------------------*/
#header {
}

#header .inner {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  height: 100px;
}

#header .logo {
  width: 246px;
}

#header .btn a {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 268px;
  height: 48px;
  background-color: #F56F61;
  border-radius: 24px;
  color: #fff;
  font-size: 1.46rem;
  font-weight: 500;
}

@media screen and (max-width: 750px) {
  #header .inner {
    height: 17.3vw;
  }

  #header .logo {
    width: 40vw;
  }

  #header .btn a {
    width: 47.3vw;
    height: 9.3vw;
    border-radius: 4.65vw;
    font-size: .89rem;
  }
}


/* mv */
/*---------------------------------*/
#mv {
  width: 100%;
  background-color: #EAEEF1;
  padding-bottom: 68px;
}

#mv .inner {
  width: 1200px;
  max-width: initial;
  background: url(../img/mv_pc.png) no-repeat top center / contain;
  margin: 0 auto;
  padding: 0 50px;
}

#mv .section_header {
  padding: 50px 0 180px;
}

#mv .section_header .pref {
  margin-bottom: 1rem;
  color: #429AD0;
  font-size: 2.13rem;
  font-weight: 400;
  line-height: 1em;
}

#mv .section_header .title {
  color: #429AD0;
  font-size: 8.93rem;
  font-weight: 900;
  line-height: 1em;
}

#mv .section_header .title span {
  font-size: .75em;
}

#mv .section_body {
  width: 512px;
  font-size: 1.33rem;
  font-weight: 400;
  line-height: 1.75em;
}

#mv .cta {
  width: 484px;
  margin: 0 auto;
}

@media screen and (max-width: 750px) {
  #mv {
    padding-bottom: 18vw;
  }

  #mv .inner {
    width: 100%;
    background-image: url(../img/mv_sp.png);
    padding: 0 2.66vw;
  }

  #mv .section_header {
    padding: 4vw 0 26.4vw;
  }

  #mv .section_header .pref {
    margin-bottom: .5rem;
    font-size: 1.26rem;
  }

  #mv .section_header .title {
    font-size: 4rem;
  }

  #mv .section_body {
    width: 52.8vw;
    margin-bottom: 12.8vw;
    font-size: .86rem;
  }

  #mv .cta {
    width: 100%;
  }
}


/* rouse */
/*---------------------------------*/
#rouse {
  background-color: #EAEEF1;
  padding-bottom: 100px;
}

#rouse .block {
  margin-bottom: 100px;
}

#rouse .block .block_header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 1005px;
  height: 124px;
  background-color: #71C8CE;
}
#rouse .block.block01 .block_header {
  margin-left: -50px;
}
#rouse .block.block02 .block_header {
  margin-right: -50px;
  margin-left: auto;
}

#rouse .block .block_header .title {
  color: #fff;
  font-size: 1.86rem;
  font-weight: 600;
}

#rouse .block .block_header .title br {
  display: none;
}

#rouse .block .section_body {
  display: -webkit-flex;
  display: flex;
  margin-top: -12px;
}
#rouse .block.block01 .section_body {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

#rouse .block .section_body .image {
  width: 364px;
}

#rouse .block .section_body .contents {
  width: calc(100% - 364px);
  padding: 50px 0 65px;
  font-size: 1.06rem;
}
#rouse .block.block01 .section_body .contents {
  padding-right: 30px;
}
#rouse .block.block02 .section_body .contents {
  padding-left: 30px;
}

#rouse .block .section_body .contents .title {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 350px;
  height: 42px;
  background-color: #F56F61;
  margin-bottom: 20px;
  border-radius: 21px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
}

#rouse .block .section_body .contents .item {
}
#rouse .block .section_body .contents .item:not(:last-child) {
  background: url(../img/line_dot.png) repeat-x left bottom;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

#rouse .block .section_body .contents .item h4 {
  margin-bottom: 15px;
  color: #429AD0;
  font-size: 1.2rem;
  font-weight: 600;
}
#rouse .block .section_body .contents .item h4:before {
  content: "\25CF";
}

@media screen and (max-width: 750px) {
  #rouse {
    padding-bottom: 2.66vw;
  }

  #rouse .block {
    margin-bottom: 18.4vw;
  }

  #rouse .block .block_header {
    width: 100vw;
    height: 33vw;
  }
  #rouse .block.block01 .block_header,
  #rouse .block.block02 .block_header {
    margin-right: -2.66vw;
    margin-left: -2.66vw;
  }

  #rouse .block .block_header .title {
    font-size: 1.33rem;
    line-height: 1.9em;
    text-align: center;
  }

  #rouse .block .block_header .title br {
    display: inline;
  }

  #rouse .block .section_body {
    display: block;
    margin-top: 10.4vw;
  }

  #rouse .block .section_body .image {
    width: 100%;
  }

  #rouse .block .section_body .contents {
    width: 100%;
    padding: 10.4vw 0 0;
  }
  #rouse .block.block01 .section_body .contents,
  #rouse .block.block02 .section_body .contents {
    padding-right: 0;
    padding-left: 0;
  }

  #rouse .block .section_body .contents .title {
    width: 100%;
    height: 10.4vw;
    margin-bottom: 5.6vw;
    border-radius: 5.2vw;
  }

  #rouse .block .section_body .contents .item:not(:last-child) {
    margin-bottom: 5.6vw;
    padding-bottom: 5.6vw;
  }

  #rouse .block .section_body .contents .item h4 {
    margin-bottom: 3.2vw;
  }
}


/* step */
/*---------------------------------*/
#step {
  background-color: #EAEEF1;
  padding-bottom: 1px;
}

#step .section_header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 124px;
  background-color: #429AD0;
  margin-bottom: 50px;
  border-radius: .7rem;
}

#step .section_header .title {
  color: #fff;
  font-size: 3.8rem;
  font-weight: 900;
}

#step .section_header .title br {
  display: none;
}

#step .block {
  position: relative;
  display: grid;
  gap: 20px 40px;
  margin-bottom: 100px;
}
#step .block.block01,
#step .block.block03 {
  grid-template-areas:
    "area-a area-d"
    "area-b area-d"
    "area-c area-d";
}
#step .block.block02 {
  grid-template-areas:
    "area-d area-a"
    "area-d area-b"
    "area-d area-c";
}

#step .block.block01:after,
#step .block.block02:after {
  content: "";
  position: absolute;
  bottom: -68px;
  display: block;
  width: 124px;
  height: 124px;
  background: url(../img/step_arrow_pc.png) no-repeat center center / contain;
}
#step .block.block01:after {
  right: 315px;
}
#step .block.block02:after {
  right: 660px;
  transform: rotate(90deg);
}

#step .block .block_header {
  grid-area: area-a; order: initial;
}

#step .block .block_header .upper {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 5px;
  border-bottom: 2px solid #F56F61;
}

#step .block .block_header .upper .pref {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 152px;
  height: 46px;
  background-color: #F56F61;
  margin-bottom: 0;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
}

#step .block .block_header .upper h3.title {
  margin: 0 1rem 0 .7rem;
  font-size: 2rem;
  font-weight: 600;
}

#step .block .block_header .upper .tail {
  color: #F56F61;
  font-size: 1.4rem;
}

#step .block .block_header h4.title {
  font-size: 1.46rem;
  font-weight: 700;
  line-height: 1.45em;
}

#step .block .contents {
  grid-area: area-b; order: initial;
  font-size: 1.06rem;
}

#step .block .contents .more {
  color: #429AD0;
}

#step .block .block_footer {
  grid-area: area-c; order: initial;
  background-color: #72BFC3;
  padding: 1.5rem 1.5rem;
  border-radius: 1rem;
  color: #fff;
}

#step .block .block_footer dt {
  margin-bottom: .7rem;
  font-size: 1.33rem;
  font-weight: 500;
}

#step .block .block_footer dd {
  position: relative;
  padding-left: 1em;
  font-size: 1.06rem;
  font-weight: 300;
}

#step .block .block_footer dd:after {
  content: "\30FB";
  position: absolute;
  top: 0;
  left: 0;
}

#step .block .image {
  grid-area: area-d; order: initial;
  width: 438px;
}

#step .block .image .video {
  position: relative;
  width: 100%;
  margin-top: 50px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

#step .block .image .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 750px) {
  #step {
  }

  #step .section_header {
    height: 33vw;
    margin-bottom: 11.7vw;
  }

  #step .section_header .title {
    font-size: 2.4rem;
    line-height: 1.2em;
    text-align: center;
  }

  #step .section_header .title br {
    display: inline;
  }

  #step .block {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 0;
    margin-bottom: 48vw;
  }
  #step .block.block03 {
    margin-bottom: 21.6vw;
  }

  #step .block.block01:after,
  #step .block.block02:after {
    right: 0;
    bottom: -37vw;
    left: 0;
    transform: rotate(0deg);
    width: 23vw;
    height: 25.6vw;
    background-image: url(../img/step_arrow_sp.png);
    margin: auto;
  }

  #step .block .block_header {
    order: 1;
  }

  #step .block .block_header .upper {
    display: block;
    margin-bottom: 1rem;
    text-align: center;
  }

  #step .block .block_header .upper .pref {
    width: 100%;
    height: 12.2vw;
    margin-bottom: 5vw;
  }

  #step .block .block_header .upper h3.title {
    margin: 0;
  }

  #step .block .block_header .upper .tail {
    margin: 2vw 0 3.5vw;
  }

  #step .block .block_header h4.title {
  }

  #step .block .contents {
    order: 3;
    padding-bottom: 1rem;
  }

  #step .block .block_footer {
    order: 4;
    padding: 1rem;
  }

  #step .block .image {
    order: 2;
    width: 100%;
    margin: 4vw 0 3vw;
  }

  #step .block .image .video {
    margin-top: 0;
  }
}


/* recommend */
/*---------------------------------*/
#recommend {
  padding: 100px 0;
}

#recommend .section_header {
  margin-bottom: 50px;
}

#recommend .section_header .title {
  color: #429AD0;
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1em;
  text-align: center;
}

#recommend .section_body {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#recommend .block {
  width: 523px;
  background-color: #EAEEF1;
  padding: 20px;
  border-radius: 2rem;
}

#recommend .block .block_header .title {
  display: inline-block;
  background-color: #F56F61;
  margin-bottom: 1rem;
  padding: 0 20px;
  border-radius: 1em;
  color: #fff;
  font-size: 1.33rem;
  font-weight: 600;
  line-height: 2em;
}
#recommend .block.block02 .block_header .title {
  background-color: #72BFC3;
}

#recommend .block.block02 .block_header .title span {
  display: inline-block;
}

#recommend .block .block_body .contents .title {
  margin-bottom: 1rem;
  font-size: 1.46rem;
  font-weight: 700;
  line-height: 1.45em;
}

#recommend .block .block_body .contents small {
  display: block;
  margin-bottom: 1rem;
  font-size: 1rem;
}

#recommend .block .block_body .contents p {
  font-size: 1.06rem;
}

@media screen and (max-width: 750px) {
  #recommend {
    padding: 26.4vw 0;
  }

  #recommend .section_header {
    margin-bottom: 0;
  }

  #recommend .section_header .title {
    font-size: 2rem;
  }

  #recommend .section_body {
    display: block;
  }

  #recommend .block {
    width: 100%;
    margin-top: 12.8vw;
    padding: 1rem;
  }

  #recommend .block .block_header .title {
    display: block;
    padding: .5rem;
    line-height: 1.3em;
    text-align: center;
  }
}


/* faq */
/*---------------------------------*/
#faq {
  background-color: #EAEEF1;
  padding: 100px 0 50px;
}

#faq .section_header {
  margin-bottom: 40px;
}

#faq .section_header .title {
  color: #F56F61;
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1em;
  text-align: center;
}

#faq .item {
  background-color: #fff;
  margin-bottom: 50px;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
}

#faq .item h3 {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 40px;
  font-size: 1.46rem;
  font-weight: 800;
  line-height: 1.27em;
}

#faq .item h3:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 24px;
  height: 28px;
  background: url(../img/ico_q.svg) no-repeat center center / contain;
}

#faq .item p {
  position: relative;
  padding-left: 40px;
  font-size: 1.06rem;
  line-height: 1.75em;
}

#faq .item p:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 24px;
  height: 28px;
  background: url(../img/ico_a.svg) no-repeat center center / contain;
}

@media screen and (max-width: 750px) {
  #faq {
    padding: 21.6vw 0 8vw;
  }

  #faq .section_header {
    margin-bottom: 10.8vw;
  }

  #faq .section_header .title {
    font-size: 2rem;
  }

  #faq .item {
    margin-bottom: 12vw;
  }

  #faq .item h3 {
    padding-left: 8vw;
    font-size: 1.06rem;
    line-height: 1.6em;
  }

  #faq .item h3:after {
    top: .3rem;
    width: 4.8vw;
    height: 5.33vw;
  }

  #faq .item p {
    padding-left: 8vw;
    line-height: 1.6em;
  }

  #faq .item p:after {
    top: .3rem;
    width: 4.8vw;
    height: 5.33vw;
  }
}


/* cta */
/*---------------------------------*/
#cta {
  padding: 40px 0 50px;
}

#cta .section_header {
  margin-bottom: 1rem;
}

#cta .section_header .title {
  font-size: 2.66rem;
  font-weight: 800;
  line-height: 1.43em;
  text-align: center;
}

#cta .section_body {
  padding: 0 45px;
  font-size: 1.06rem;
}

#cta .cta {
  width: 564px;
  margin: 40px auto 0;
}

@media screen and (max-width: 750px) {
  #cta {
    padding: 21.6vw 0;
  }

  #cta .section_header {
    margin-bottom: 2rem;
  }

  #cta .section_header .title {
    font-size: 2rem;
  }

  #cta .section_header .title span {
    display: block;
  }

  #cta .section_body {
    padding: 0;
  }

  #cta .cta {
    width: 100%;
    margin-top: 1rem;
  }
}


/* footer */
/*---------------------------------*/
#footer {
  background-color: #EAEEF1;
  padding-top: 100px;
}

#footer .footer_wrap {
  background-color: #429AD0;
  padding: 90px 0;
}

#footer .copyright {
  display: block;
  color: #fff;
  font-size: .93rem;
  text-align: center;
}

@media screen and (max-width: 750px) {
  #footer {
    padding-top: 0;
  }

  #footer .footer_wrap {
    padding: 10.8vw 0;
  }

  #footer .copyright {
    font-size: 1.06rem;
  }
}