@charset "UTF-8";
/*
カラー・フォント定義
*/
/* =========================== 共通 =========================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

select::-ms-expand {
  display: none; }

a {
  color: #3c713d;
  text-decoration: none; }
  a:hover {
    color: #3c713d;
    text-decoration: underline; }

ul {
  list-style-type: none; }

body {
  font-family: "Sawarabi Gothic", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  color: #000;
  background-color: #fff;
  position: relative;
  font-size: 14px;
  line-height: 1;
  padding: 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px; }
  @media only screen and (max-width: 959px) {
    body {
      padding: 0px 0px 0px 0px; } }

/* =========================== 汎用スタイル =========================== */
@media only screen and (min-width: 960px) {
  .pc {
    display: block; } }
@media only screen and (max-width: 959px) {
  .pc {
    display: none; } }

@media only screen and (min-width: 960px) {
  .sp {
    display: none; } }
@media only screen and (max-width: 959px) {
  .sp {
    display: block; } }

.mb8 {
  margin-bottom: 8px !important; }

.mb12 {
  margin-bottom: 12px !important; }

.mb16 {
  margin-bottom: 16px !important; }

.mb24 {
  margin-bottom: 24px !important; }

.mb32 {
  margin-bottom: 32px !important; }

.mb48 {
  margin-bottom: 48px !important; }

.mb64 {
  margin-bottom: 64px !important; }

.mb96 {
  margin-bottom: 96px !important; }

.mb128 {
  margin-bottom: 128px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.mb60 {
  margin-bottom: 60px !important; }

.fadein {
  opacity: 0;
  transform: translate(0, 40px);
  transition: all 1000ms; }

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
  transition-timing-function: ease-in-out; }

img {
  vertical-align: bottom; }

.base-h2-ttl {
  color: #43575b;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin: 0px 0px 48px 0px; }
  @media only screen and (max-width: 959px) {
    .base-h2-ttl {
      font-size: 28px;
      margin: 0px 0px 32px 0px; } }
  .base-h2-ttl span {
    margin: 20px auto 0px auto;
    padding: 16px 0px 0px 0px;
    border-top: 1px solid #B7B7B7;
    display: block;
    font-size: 16px;
    color: #B7B7B7;
    font-weight: 400;
    width: 100%;
    max-width: 500px; }

section.base-container {
  padding: 0px 64px 0px 64px;
  margin: 0px 0px 96px 0px; }
  @media only screen and (max-width: 959px) {
    section.base-container {
      padding: 0px 16px 0px 16px;
      margin: 0px 0px 48px 0px; } }

span.explanation {
  font-size: 10px; }

.explanation-container {
  font-size: 12px;
  line-height: 1.6;
  color: #43575b; }

/* --------------------------------------------------------------------------------- */
.right-bottom-btn {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000; }
  @media only screen and (max-width: 959px) {
    .right-bottom-btn {
      width: 100%; } }
  .right-bottom-btn img {
    width: 300px;
    height: auto;
    border-top-left-radius: 12px; }
    @media only screen and (max-width: 959px) {
      .right-bottom-btn img {
        width: 100%;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px; } }

header {
  width: 1180px;
  margin: 0px auto 0px auto;
  padding: 64px 64px 96px 64px;
  background-image: url("../img/mv-bg.webp");
  background-position: top center;
  background-size: 100% auto; }
  @media only screen and (max-width: 959px) {
    header {
      width: 100%;
      padding: 24px 16px 24px 16px;
      background-color: #e6ecf4;
      background-image: url("../img/mv-bg-sp.webp"); } }
  header strong {
    /*
    display: inline-block;
    color: #fff;
    background-color: #639daa;
    font-size: 24px;
    font-weight: 400;
    padding: 16px 32px 16px 32px;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;*/
    display: block;
    margin: 0px 0px 64px 0px; }
    header strong img {
      width: 100%;
      height: auto;
      max-width: 376px; }
    @media only screen and (max-width: 959px) {
      header strong {
        /*font-size: 16px;
        padding: 12px 20px 12px 20px;*/
        margin: 0px 0px 32px 0px; }
        header strong img {
          max-width: 60%; } }
  header h1 {
    width: 420px;
    margin: 0px 0px 96px 0px; }
    @media only screen and (max-width: 959px) {
      header h1 {
        width: 100%;
        text-align: center;
        margin: 0px 0px 64px 0px; } }
    header h1 img {
      width: 100%;
      height: auto; }
      @media only screen and (max-width: 959px) {
        header h1 img {
          width: 85%; } }
  header h2 {
    /*color: $ac;
    font-size: 20px;
    font-weight: 400;
    line-height: 2;*/
    margin: 0px 0px 64px 0px; }
    header h2 img {
      width: 100%;
      max-width: 400px;
      height: auto; }
    @media only screen and (max-width: 959px) {
      header h2 {
        /*font-size: 16px;
        line-height: 1.6;*/
        margin: 0px 0px 64px 0px; }
        header h2 img {
          max-width: 65%; } }
  header h3 {
    /*color: $ac;
    font-size: 20px;
    font-weight: 400;
    line-height: 2;*/
    margin: 0px 0px 96px 0px; }
    header h3 img {
      width: 100%;
      max-width: 360px;
      height: auto; }
    @media only screen and (max-width: 959px) {
      header h3 {
        /*font-size: 16px;
        line-height: 1.6;*/
        margin: 0px 0px 64px 0px; }
        header h3 img {
          max-width: 65%; } }
  header .buy-btn {
    display: inline-block;
    width: 500px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); }
    @media only screen and (max-width: 959px) {
      header .buy-btn {
        display: block;
        width: calc(100%); } }
    header .buy-btn:hover {
      opacity: 0.8; }
    header .buy-btn img {
      width: 100%;
      height: auto; }

main {
  width: 1180px;
  margin: 0px auto 0px auto;
  box-shadow: inset 0px 0px 64px #c3dde4;
  overflow: hidden; }
  @media only screen and (max-width: 959px) {
    main {
      width: 100%;
      padding: 0px 0px 80px 0px; } }
  main .box01 {
    background-color: #c3dde4;
    padding: 64px 0px 64px 0px; }
    @media only screen and (max-width: 959px) {
      main .box01 {
        padding: 24px 0px 24px 0px; } }
    main .box01 .point3 {
      display: -webkit-flex;
      /* Safari */
      display: flex;
      -webkit-flex-direction: row;
      /* Safari */
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      /* Safari */
      flex-wrap: wrap;
      justify-content: center; }
      @media only screen and (max-width: 959px) {
        main .box01 .point3 {
          padding: 0px 16px;
          margin: 0px 0px 32px 0px; } }
      main .box01 .point3 li {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0px 24px 0px 0px;
        display: -webkit-flex;
        /* Safari */
        display: flex;
        align-items: center; }
        @media only screen and (max-width: 959px) {
          main .box01 .point3 li {
            width: 100%;
            height: auto;
            margin: 0px 0px 8px 0px;
            border-radius: 8px;
            padding: 8px 12px; } }
        main .box01 .point3 li:last-child {
          margin: 0px 0px 0px 0px; }
        main .box01 .point3 li p {
          width: 100%;
          text-align: center;
          font-size: 18px;
          line-height: 1.8;
          color: #43575b;
          font-weight: 700; }
          @media only screen and (max-width: 959px) {
            main .box01 .point3 li p {
              font-size: 16px;
              line-height: 1.4; } }
    main .box01 .point4 {
      padding: 64px 64px;
      margin: -64px 64px 0px 64px;
      border: 4px solid #fff;
      border-top-left-radius: 256px;
      border-bottom-right-radius: 256px; }
      @media only screen and (max-width: 959px) {
        main .box01 .point4 {
          padding: 24px 16px;
          margin: 0px 16px 0px 16px;
          border-bottom-right-radius: 0px; } }
      main .box01 .point4 .base-point4-container {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        -webkit-flex-direction: row;
        /* Safari */
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        /* Safari */
        flex-wrap: wrap;
        margin: 0px 0px 32px 0px; }
        @media only screen and (max-width: 959px) {
          main .box01 .point4 .base-point4-container {
            margin: 0px 0px 32px 0px; }
            main .box01 .point4 .base-point4-container:nth-last-child(1) {
              margin: 0px 0px 0px 0px; } }
        main .box01 .point4 .base-point4-container figure {
          width: 50%;
          text-align: center; }
          @media only screen and (max-width: 959px) {
            main .box01 .point4 .base-point4-container figure {
              order: 1;
              width: 100%;
              margin: 0px 0px 16px 0px; } }
          main .box01 .point4 .base-point4-container figure img {
            width: 80%;
            height: auto; }
            @media only screen and (max-width: 959px) {
              main .box01 .point4 .base-point4-container figure img {
                width: 60%; } }
        main .box01 .point4 .base-point4-container.child01 figure, main .box01 .point4 .base-point4-container.child03 figure {
          text-align: center; }
          @media only screen and (max-width: 959px) {
            main .box01 .point4 .base-point4-container.child01 figure, main .box01 .point4 .base-point4-container.child03 figure {
              text-align: center; } }
        main .box01 .point4 .base-point4-container.child01 .inner, main .box01 .point4 .base-point4-container.child03 .inner {
          text-align: left; }
          @media only screen and (max-width: 959px) {
            main .box01 .point4 .base-point4-container.child01 .inner, main .box01 .point4 .base-point4-container.child03 .inner {
              text-align: left; } }
          main .box01 .point4 .base-point4-container.child01 .inner .parent, main .box01 .point4 .base-point4-container.child03 .inner .parent {
            padding: 0px 0px 0px 48px; }
            @media only screen and (max-width: 959px) {
              main .box01 .point4 .base-point4-container.child01 .inner .parent, main .box01 .point4 .base-point4-container.child03 .inner .parent {
                padding: 0px 0px 0px 0px; } }
        main .box01 .point4 .base-point4-container.child02 figure, main .box01 .point4 .base-point4-container.child04 figure {
          text-align: center; }
          @media only screen and (max-width: 959px) {
            main .box01 .point4 .base-point4-container.child02 figure, main .box01 .point4 .base-point4-container.child04 figure {
              text-align: center; } }
        main .box01 .point4 .base-point4-container.child02 .inner, main .box01 .point4 .base-point4-container.child04 .inner {
          text-align: left; }
          @media only screen and (max-width: 959px) {
            main .box01 .point4 .base-point4-container.child02 .inner, main .box01 .point4 .base-point4-container.child04 .inner {
              text-align: left; } }
          main .box01 .point4 .base-point4-container.child02 .inner .parent, main .box01 .point4 .base-point4-container.child04 .inner .parent {
            padding: 0px 48px 0px 0px; }
            @media only screen and (max-width: 959px) {
              main .box01 .point4 .base-point4-container.child02 .inner .parent, main .box01 .point4 .base-point4-container.child04 .inner .parent {
                padding: 0px 0px 0px 0px; } }
        main .box01 .point4 .base-point4-container .inner {
          width: 50%;
          display: -webkit-flex;
          /* Safari */
          display: flex;
          align-items: center;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px; }
          @media only screen and (max-width: 959px) {
            main .box01 .point4 .base-point4-container .inner {
              width: 100%;
              order: 2; } }
          main .box01 .point4 .base-point4-container .inner .parent {
            width: 100%; }
            main .box01 .point4 .base-point4-container .inner .parent h3 {
              color: #639daa;
              font-weight: 700;
              font-size: 28px;
              line-height: 1.4;
              margin: 0px 0px 32px 0px;
              padding: 0px 0px 12px 0px;
              border-bottom: 3px dotted #639daa; }
              @media only screen and (max-width: 959px) {
                main .box01 .point4 .base-point4-container .inner .parent h3 {
                  font-size: 20px;
                  margin: 0px 0px 24px 0px;
                  text-align: center; } }
            main .box01 .point4 .base-point4-container .inner .parent p {
              color: #43575b;
              font-size: 14px;
              line-height: 1.8; }
              @media only screen and (max-width: 959px) {
                main .box01 .point4 .base-point4-container .inner .parent p {
                  line-height: 1.6; } }
            main .box01 .point4 .base-point4-container .inner .parent .explanation-container {
              padding: 16px 0px 0px 0px; }
  main .box02 {
    background-image: url("../img/box02-bg.webp");
    background-position: left center;
    background-size: auto 100%;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    justify-content: flex-end;
    padding: 64px 64px 64px 64px;
    margin: 0px 0px 64px 0px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }
    @media only screen and (max-width: 959px) {
      main .box02 {
        padding: 24px 16px;
        position: relative;
        margin: 0px 0px 32px 0px; }
        main .box02::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          opacity: 0.6;
          background-color: #fff;
          z-index: 1; } }
    main .box02 .inner {
      width: 50%;
      text-align: left;
      color: #43575b; }
      @media only screen and (max-width: 959px) {
        main .box02 .inner {
          width: 100%;
          z-index: 5;
          position: relative; } }
      main .box02 .inner h2 {
        font-size: 32px;
        font-weight: 700;
        margin: 0px 0px 24px 0px; }
        @media only screen and (max-width: 959px) {
          main .box02 .inner h2 {
            font-size: 24px; } }
      main .box02 .inner li {
        font-size: 24px;
        margin: 0px 0px 12px 0px; }
        @media only screen and (max-width: 959px) {
          main .box02 .inner li {
            font-size: 16px; } }
        main .box02 .inner li:last-child {
          margin: 0px 0px 0px 0px; }
  main .box03 dl {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-direction: row;
    /* Safari */
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    /* Safari */
    flex-wrap: wrap;
    margin: 0px 0px 32px 0px; }
    @media only screen and (max-width: 959px) {
      main .box03 dl {
        margin: 0px 0px 24px 0px; } }
    main .box03 dl dt {
      width: 40%;
      padding: 0px 32px 0px 0px; }
      @media only screen and (max-width: 959px) {
        main .box03 dl dt {
          width: 100%;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 16px 0px; } }
      main .box03 dl dt img {
        width: 100%;
        height: auto; }
        @media only screen and (max-width: 959px) {
          main .box03 dl dt img {
            border-radius: 12px; } }
    main .box03 dl dd {
      width: 60%;
      display: -webkit-flex;
      /* Safari */
      display: flex;
      align-items: center;
      border-bottom: 2px solid #c3dde4; }
      main .box03 dl dd.last {
        border-bottom: none; }
      @media only screen and (max-width: 959px) {
        main .box03 dl dd {
          width: 100%;
          padding: 0px 0px 24px 0px; } }
      main .box03 dl dd p {
        color: #43575b;
        font-size: 16px;
        line-height: 1.8;
        padding: 12px 0px 12px 0px; }
        @media only screen and (max-width: 959px) {
          main .box03 dl dd p {
            line-height: 1.6;
            padding: 0px 0px 0px 0px; } }
      main .box03 dl dd .explanation-container {
        padding: 16px 0px 0px 0px;
        font-weight: 400;
        display: block;
        width: 100%; }
      main .box03 dl dd em {
        font-style: normal;
        background-color: #e5f3f7;
        padding: 0px 4px 0px 4px; }
  main .box04 ul {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-direction: row;
    /* Safari */
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    /* Safari */
    flex-wrap: wrap;
    margin: 0px 0px 0px -32px; }
    @media only screen and (max-width: 959px) {
      main .box04 ul {
        margin: 0px 0px 0px 0px; } }
    main .box04 ul li {
      width: calc(33.3% - 32px);
      margin: 0px 0px 0px 32px; }
      @media only screen and (max-width: 959px) {
        main .box04 ul li {
          width: 100%;
          margin: 0px 0px 32px 0px; } }
      main .box04 ul li figure {
        margin: 0px 0px 24px 0px;
        text-align: center; }
        main .box04 ul li figure img {
          border-radius: 50%;
          width: 80%;
          height: auto; }
          @media only screen and (max-width: 959px) {
            main .box04 ul li figure img {
              width: 60%; } }
      main .box04 ul li strong {
        font-size: 20px;
        text-align: center;
        display: block;
        margin: 0px 0px 16px 0px; }
        @media only screen and (max-width: 959px) {
          main .box04 ul li strong {
            font-size: 18px; } }
      main .box04 ul li p {
        font-size: 14px;
        line-height: 1.6;
        color: #43575b; }
        @media only screen and (max-width: 959px) {
          main .box04 ul li p {
            font-size: 14px; } }
  main .box05 ul {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-direction: row;
    /* Safari */
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    /* Safari */
    flex-wrap: wrap;
    justify-content: center;
    margin: 0px 0px 32px 0px; }
    @media only screen and (max-width: 959px) {
      main .box05 ul {
        margin: 0px 0px 16px 0px; } }
    main .box05 ul li {
      width: 60%; }
      @media only screen and (max-width: 959px) {
        main .box05 ul li {
          margin: 0px 0px 16px 0px;
          width: 100%; } }
      main .box05 ul li:last-child {
        margin: 0px 0px 0px 0px; }
      main .box05 ul li img {
        width: 100%;
        height: auto;
        z-index: 5; }
  main .box05 h3 {
    text-align: left;
    color: #43575b;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0px auto; }
    @media only screen and (max-width: 959px) {
      main .box05 h3 {
        font-size: 16px;
        line-height: 1.6; } }
  main .box06 dl {
    margin: 0px auto 48px auto;
    max-width: 650px;
    width: 100%; }
    @media only screen and (max-width: 959px) {
      main .box06 dl {
        margin: 0px auto 24px auto; } }
    main .box06 dl dt {
      background-image: url("../img/q.svg");
      background-position: top left;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      font-size: 24px;
      color: #43575b;
      margin: 0px 0px 20px 0px;
      padding: 2px 0px 0px 42px;
      min-height: 30px; }
      @media only screen and (max-width: 959px) {
        main .box06 dl dt {
          font-size: 18px;
          padding: 8px 0px 0px 42px; } }
    main .box06 dl dd {
      background-image: url("../img/a.svg");
      background-position: top left;
      background-size: 30px 23px;
      background-repeat: no-repeat;
      font-size: 18px;
      color: #43575b;
      padding: 0px 0px 0px 42px;
      min-height: 23px;
      line-height: 1.6;
      margin: 0px 0px 0px 24px; }
      @media only screen and (max-width: 959px) {
        main .box06 dl dd {
          font-size: 14px;
          padding: 4px 0px 0px 42px;
          margin: 0px 0px 0px 12px; } }
  main .box07 p {
    text-align: center;
    color: #43575b;
    line-height: 2;
    font-size: 14px; }