@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap");
/*********************************
 *
 * COMMON
 *
 *********************************/
body {
  overflow-x: hidden;
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(1.375vw, 34px);
  font-weight: 800; }
  @media screen and (max-width: 767px) {
    body {
      max-width: 750px;
      font-size: 3.3vw;
      -webkit-text-size-adjust: 100%; }
      body .pc {
        display: none !important; } }
  @media screen and (min-width: 768px) {
    body a {
      transition: 0.3s; }
      body a:hover {
        opacity: 0.8; }
    body a[href^="tel:"] {
      pointer-events: none; }
    body .sp {
      display: none !important; } }
  body a {
    text-decoration: none; }
  body img {
    width: 100%;
    height: auto; }

/* font */
.red {
  color: #a22351; }

.blue {
  color: #00005a; }

.min {
  font-family: "Zen Old Mincho", serif; }

strong {
  font-weight: 900; }

p.l_1em {
  padding: 0 0 0 1em;
  text-indent: -1em;
  line-height: 1.7; }

/* btn */
a.cmn_btn {
  position: relative;
  display: block;
  padding: 0.9em 3em 0.9em 2em;
  background: #ff7b00;
  border: 2px solid #ff7b00;
  border-radius: 3em;
  color: #fff;
  font-weight: 800; }
  @media screen and (max-width: 767px) {
    a.cmn_btn {
      font-size: 120%; } }
  a.cmn_btn::after {
    position: absolute;
    display: block;
    content: "";
    width: 1.5em;
    height: 1.5em;
    top: 50%;
    right: 1em;
    background: url("../images/icon_arw.svg") center center no-repeat;
    background-size: auto 95%;
    transform: translateY(-50%); }
  @media screen and (min-width: 768px) {
    a.cmn_btn:hover {
      background: #fff;
      color: #ff7b00;
      opacity: 1; }
      a.cmn_btn:hover::after {
        background: url("../images/icon_arw_hover.svg") center center no-repeat;
        background-size: auto 95%; } }

a.cmn_btn2 {
  position: relative;
  display: block;
  padding: 0.9em 3em 0.9em 2em;
  background: #0055ac;
  border: 2px solid #0055ac;
  border-radius: 3em;
  color: #fff;
  font-weight: 800; }
  @media screen and (max-width: 767px) {
    a.cmn_btn2 {
      font-size: 120%; } }
  a.cmn_btn2::after {
    position: absolute;
    display: block;
    content: "";
    width: 1.5em;
    height: 1.5em;
    top: 50%;
    right: 1em;
    background: url("../images/icon_arw2.svg") center center no-repeat;
    background-size: contain;
    transform: translateY(-50%); }

/* h2 */
main h2 {
  position: relative;
  font-weight: 800;
  text-align: center; }
  main h2 .en {
    display: block;
    margin: 0 auto; }
  main h2 .jp {
    position: relative;
    display: block;
    margin: -0.9em auto 0 auto;
    padding: 0 0 1em 0;
    color: #0257a9;
    font-size: 110%; }
    @media screen and (max-width: 767px) {
      main h2 .jp {
        padding: 0 0 0.8em 0; } }
    main h2 .jp::after {
      position: absolute;
      display: block;
      content: "";
      width: 3em;
      height: 3px;
      bottom: 0;
      left: 50%;
      background: #0257a9;
      transform: translateX(-50%); }
      @media screen and (max-width: 767px) {
        main h2 .jp::after {
          height: 2px; } }

/* lead */
main .lead {
  position: relative;
  margin: 0.3em 0 0 0;
  color: #0257a9;
  font-size: 170%;
  font-weight: 900;
  text-align: center; }
  @media screen and (max-width: 767px) {
    main .lead {
      margin: 0.5em 0 0 0; } }
  main .lead span {
    color: #ff7b00;
    font-size: 160%;
    font-weight: 800; }

/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fadeUpTrigger {
  opacity: 0; }

@keyframes toleftAnime {
  0% {
    transform: translateX(12%); }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes torightAnime {
  0% {
    transform: translateX(-12%); }
  100% {
    transform: translateX(0);
    opacity: 1; } }
/*********************************
 *
 * HEADER
 *
 *********************************/
header {
  position: sticky;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #0660ae 0%, #21abc7 100%);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: min(1.2vw, 16px);
  z-index: 10; }
  header .h_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 88%;
    height: 90px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      header .h_inner {
        height: 60px; } }
  header .logo {
    width: 24.3%;
    max-width: 292px; }
    @media screen and (max-width: 767px) {
      header .logo {
        width: 100%;
        max-width: none; } }
  header .h_box {
    display: flex;
    align-items: center; }
  header a {
    color: #fff; }
  header .tel {
    padding: 0.2em 0 0.2em 1.35em;
    background: url("../images/icon_tel.svg") left center no-repeat;
    background-size: auto 1.1em;
    font-size: 190%;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.05em; }
  header .btn {
    margin: 0 0 0 2em; }

/*********************************
 *
 * MV
 *
 *********************************/
#mv {
  background: url("../images/mv_bg01.jpg") center top no-repeat;
  background-size: cover; }
  @media screen and (max-width: 767px) {
    #mv {
      background: url("../images/mv_bg01-sp.jpg") center top no-repeat;
      background-size: cover; } }
  #mv .mv_inner {
    position: relative;
    width: 77.3%;
    height: 61.4vw;
    margin: 0 auto;
    padding: 1vw 0 0 0;
    color: #fff; }
    @media screen and (max-width: 767px) {
      #mv .mv_inner {
        width: 92%;
        height: 333vw;
        padding: 2vw 0 0 0; } }
    #mv .mv_inner dl {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: 0.8em 0 0 -1%;
      animation-name: fadeUpAnime;
      animation-duration: 0.8s;
      animation-fill-mode: forwards;
      opacity: 0; }
      #mv .mv_inner dl dt {
        width: 14%; }
        @media screen and (max-width: 767px) {
          #mv .mv_inner dl dt {
            width: 45%; } }
      #mv .mv_inner dl dd {
        margin: 0 0 0 0.1em;
        font-size: 90%;
        font-weight: 800;
        letter-spacing: 0.05em; }
        @media screen and (max-width: 767px) {
          #mv .mv_inner dl dd {
            width: 110%;
            margin: -1em 0 0 0;
            padding: 0 0 0 0.8em;
            font-size: 105%; } }
        #mv .mv_inner dl dd .line {
          display: inline-block;
          margin: 0 0 0.1em 0;
          padding: 0 0 2px 0;
          border-bottom: 2px solid #fff; }
        #mv .mv_inner dl dd strong {
          font-size: 180%;
          font-weight: 800; }
        #mv .mv_inner dl dd em {
          font-size: 140%;
          font-weight: 800; }
    @media screen and (min-width: 768px) {
      #mv .mv_inner h1 {
        color: #000;
        font-size: 200%;
        font-weight: 900;
        font-style: italic;
        letter-spacing: 0.02em;
        animation-name: toleftAnime;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
        animation-delay: 0.5s;
        opacity: 0; }
        #mv .mv_inner h1 em {
          display: inline-block;
          color: #117cbb;
          font-size: 180%;
          font-weight: 900;
          font-style: italic; }
        #mv .mv_inner h1 .txt {
          filter: drop-shadow(0 0.3em 0.2em rgba(0, 0, 0, 0.25)); }
          #mv .mv_inner h1 .txt span {
            display: inline-block;
            margin: 0 0 0.45em 0;
            padding: 0.2em 1.1em 0.3em 1.1em;
            background: #fff;
            clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
            line-height: 1; } }
    @media screen and (max-width: 767px) {
      #mv .mv_inner h1 {
        color: #000;
        font-size: 160%;
        font-weight: 900;
        font-style: italic;
        animation-name: toleftAnime;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
        animation-delay: 0.5s;
        opacity: 0; }
        #mv .mv_inner h1 em {
          display: inline-block;
          color: #117cbb;
          font-size: 190%;
          font-weight: 900;
          font-style: italic; }
        #mv .mv_inner h1 .txt {
          filter: drop-shadow(0 0.3em 0.2em rgba(0, 0, 0, 0.25)); }
          #mv .mv_inner h1 .txt span {
            display: inline-block;
            margin: 0 0 0.35em 0;
            padding: 0.2em 1.5em 0.3em 1.1em;
            background: #fff;
            clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
            line-height: 1; }
        #mv .mv_inner h1.p1 {
          margin: 0.8em 0 0 0; }
        #mv .mv_inner h1.p2 {
          float: right;
          margin-right: 10%; } }
    #mv .mv_inner h2 {
      color: #000;
      font-size: 200%;
      font-weight: 900;
      font-style: italic;
      letter-spacing: 0.02em;
      animation-name: torightAnime;
      animation-duration: 0.8s;
      animation-fill-mode: forwards;
      animation-delay: 0.8s;
      opacity: 0; }
      @media screen and (max-width: 767px) {
        #mv .mv_inner h2 {
          font-size: 160%;
          letter-spacing: 0; } }
      #mv .mv_inner h2 em {
        display: inline-block;
        color: #117cbb;
        font-size: 180%;
        font-weight: 900;
        font-style: italic; }
      #mv .mv_inner h2 .txt {
        filter: drop-shadow(0 0.3em 0.2em rgba(0, 0, 0, 0.25)); }
        #mv .mv_inner h2 .txt span {
          display: inline-block;
          margin: 0 0 0.45em 0;
          padding: 0.2em 1.1em 0.3em 1.1em;
          background: #fff;
          clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
          line-height: 1; }
    #mv .mv_inner .txt_box {
      margin: 0.2em 0 0 0;
      font-size: 85%;
      font-weight: 600;
      line-height: 1.8;
      animation-name: fadeUpAnime;
      animation-duration: 1s;
      animation-fill-mode: forwards;
      animation-delay: 1.5s;
      opacity: 0; }
      @media screen and (max-width: 767px) {
        #mv .mv_inner .txt_box {
          margin: 1.4em 0 0 0;
          font-size: 110%;
          line-height: 2; } }
      #mv .mv_inner .txt_box ul {
        display: flex;
        justify-content: space-between;
        width: 64%;
        margin: 0.6em 0 0 0;
        line-height: 1.5; }
        @media screen and (max-width: 767px) {
          #mv .mv_inner .txt_box ul {
            flex-wrap: wrap;
            width: 100%;
            margin: 17em 0 0 0;
            font-size: 110%; } }
        #mv .mv_inner .txt_box ul li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 33%;
          padding: 0.9em 0 1.1em 0;
          background: url("../images/mv_bg02.png") left top no-repeat;
          background-size: 100% 100%;
          filter: drop-shadow(0 0.1em 0.1em rgba(0, 0, 0, 0.2));
          background-size: 100% 100%; }
          @media screen and (max-width: 767px) {
            #mv .mv_inner .txt_box ul li {
              width: 100%;
              margin: 0 0 0.5em 0;
              padding: 1.8em 0 1.8em 0;
              background: url("../images/mv_bg02-sp.png") left top no-repeat;
              background-size: 100% 100%; } }
    #mv .mv_inner .img {
      position: absolute;
      width: 43%;
      top: 25.5%;
      right: 0; }
      @media screen and (max-width: 767px) {
        #mv .mv_inner .img {
          width: 74%;
          top: 47.2%; } }
  #mv .btn {
    width: 38%;
    margin: 1.4em auto 0 auto;
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
    opacity: 0; }
    @media screen and (max-width: 767px) {
      #mv .btn {
        position: absolute;
        width: 96%;
        bottom: 5%;
        left: 2%; } }
    #mv .btn a {
      box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.2);
      text-align: center; }
    #mv .btn p {
      padding: 1em 0 0 0;
      color: #fff;
      font-size: 62%;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #mv .btn p {
          font-size: 100%; } }

/*********************************
 *
 * problems
 *
 *********************************/
#problems {
  position: relative;
  background: url("../images/bg_problems.jpg") right bottom no-repeat;
  background-size: 100% auto;
  z-index: 3; }
  @media screen and (max-width: 767px) {
    #problems {
      background: url("../images/bg_problems-sp.jpg") right bottom no-repeat;
      background-size: 100% auto;
      padding: 8vw 0 9vw 0; } }
  #problems .problems_inner {
    position: relative;
    width: 74%;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      #problems .problems_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #problems .problems_inner {
        width: 92%; } }
  #problems h2 {
    margin: -2.5vw 0 0 0; }
    @media screen and (max-width: 767px) {
      #problems h2 {
        margin: 0 0 0 0; } }
    #problems h2 .en {
      width: 63.6%; }
      @media screen and (max-width: 767px) {
        #problems h2 .en {
          width: 82%; } }
  #problems .note {
    margin: 0.5em 0 0 0;
    font-size: 95%;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #problems .note {
        margin: 1em 0 0 0; } }
  #problems .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    #problems .list .item {
      position: relative;
      width: 48%;
      margin: 1.5em 0 0 0;
      font-weight: 900; }
      @media screen and (max-width: 767px) {
        #problems .list .item {
          width: 100%; } }
      #problems .list .item:last-child {
        width: 100%;
        font-size: 110%; }
        #problems .list .item:last-child .item_box {
          padding: 1.5em 1.5em !important; }
    #problems .list .ttl_box {
      position: relative;
      display: flex;
      align-items: center;
      z-index: +1; }
      #problems .list .ttl_box .num {
        width: 3.4em;
        height: auto; }
        @media screen and (max-width: 767px) {
          #problems .list .ttl_box .num {
            width: 5em; } }
      #problems .list .ttl_box p {
        margin: 0 0 0.3em 0.8em;
        font-size: 90%; }
        @media screen and (max-width: 767px) {
          #problems .list .ttl_box p {
            font-size: 110%;
            margin: 0.5em 0 0 0.8em; } }
    #problems .list .item_box {
      position: relative;
      margin: -0.3em 0 0 0;
      padding: 1em 1.5em;
      background: #e6f6f9;
      box-shadow: 0 0.3em 0.3em rgba(2, 87, 169, 0.1);
      border-radius: 0.8em; }
      @media screen and (max-width: 767px) {
        #problems .list .item_box {
          margin: -0.7em 0 0 0;
          padding: 1.5em 0 1.5em 0; } }
      #problems .list .item_box p {
        padding: 0;
        color: #0257a9;
        line-height: 1.7; }
        @media screen and (max-width: 767px) {
          #problems .list .item_box p {
            font-size: 130%;
            text-align: center; } }
        #problems .list .item_box p span {
          color: #ff7b00;
          font-size: 130%; }
    #problems .list .img {
      position: absolute;
      z-index: 2; }
      #problems .list .img.box1 {
        width: 24%;
        right: 5%;
        bottom: -11%; }
        @media screen and (max-width: 767px) {
          #problems .list .img.box1 {
            width: 20%;
            bottom: -18%; } }
      #problems .list .img.box2 {
        width: 38.7%;
        right: 2%;
        bottom: -11%; }
        @media screen and (max-width: 767px) {
          #problems .list .img.box2 {
            width: 30%;
            bottom: -27%; } }
      #problems .list .img.box3 {
        width: 34%;
        right: 3%;
        bottom: -11%; }
        @media screen and (max-width: 767px) {
          #problems .list .img.box3 {
            width: 27%;
            bottom: -15%; } }
      #problems .list .img.box4 {
        width: 24%;
        right: 5%;
        bottom: -11%; }
        @media screen and (max-width: 767px) {
          #problems .list .img.box4 {
            width: 19%;
            bottom: auto;
            top: 20%;
            right: 3%; } }
      #problems .list .img.box5 {
        width: 21.2%;
        right: 2%;
        bottom: -12%; }
        @media screen and (max-width: 767px) {
          #problems .list .img.box5 {
            width: 18%;
            bottom: auto;
            top: 18%; } }
      #problems .list .img.box6 {
        width: 30%;
        right: -10%;
        bottom: -8%; }
        @media screen and (max-width: 767px) {
          #problems .list .img.box6 {
            width: 22%;
            right: 2%;
            bottom: -22%; } }
      #problems .list .img.box7 {
        width: 16.2%;
        right: 2%;
        bottom: -15%; }
        @media screen and (max-width: 767px) {
          #problems .list .img.box7 {
            width: 28%;
            right: 2%;
            bottom: -26%; } }
  #problems .arw {
    width: 3.2em;
    margin: 3em auto 0 auto; }
  #problems .catch {
    margin: 0.5em 0 0 0;
    color: #0257a9;
    font-size: 180%;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.02em; }
    @media screen and (max-width: 767px) {
      #problems .catch {
        font-size: 160%; } }
    #problems .catch span {
      font-size: 150%; }
    #problems .catch span.line {
      border-bottom: 3px solid #0257a9;
      font-size: 100%; }
    #problems .catch .orange {
      color: #ff7b00; }

/*********************************
 *
 * solution
 *
 *********************************/
#solution {
  position: relative;
  padding: 17vw 0 0 0;
  background: #0257a9 url("../images/bg_solution01.jpg") right top no-repeat;
  background-size: 100% auto;
  z-index: 3; }
  @media screen and (max-width: 767px) {
    #solution {
      padding: 20vw 0 0 0;
      background: #0257a9 url("../images/bg_solution01-sp.jpg") right top no-repeat;
      background-size: 100% auto; } }
  #solution .bg_solution {
    padding: 0 0 10vw 0;
    background: url("../images/bg_solution02.jpg") right bottom no-repeat;
    background-size: 100% auto; }
    @media screen and (max-width: 767px) {
      #solution .bg_solution {
        padding: 0 0 13vw 0;
        background: url("../images/bg_solution02-sp.jpg") right bottom no-repeat;
        background-size: 100% auto; } }
  #solution .solution_inner {
    position: relative;
    width: 74%;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      #solution .solution_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #solution .solution_inner {
        width: 96%; } }
  #solution h2 .en {
    width: 59.8%; }
    @media screen and (max-width: 767px) {
      #solution h2 .en {
        width: 76%; } }
  #solution h2 .jp {
    color: #fff; }
    #solution h2 .jp::after {
      background: #fff; }
  #solution .lead {
    color: #fff; }
    @media screen and (max-width: 767px) {
      #solution .lead {
        margin: 0.8em 0 0 0;
        line-height: 1.2; } }
  #solution .note {
    margin: 0.9em 0 0 0;
    color: #fff;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #solution .note {
        margin: 1.1em 0 0 0;
        line-height: 1.5; } }
  #solution .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    #solution .list .item {
      position: relative;
      width: 48%;
      margin: 2.5em 0 0 0;
      font-weight: 900; }
      @media screen and (max-width: 767px) {
        #solution .list .item {
          width: 96%;
          margin: 2.5em auto 0 auto; } }
      #solution .list .item:last-child {
        width: 100%; }
        @media screen and (max-width: 767px) {
          #solution .list .item:last-child {
            width: 96%; } }
      #solution .list .item .img {
        position: relative; }
      #solution .list .item button {
        width: 3.5vw;
        height: 3.5vw; }
        @media screen and (max-width: 767px) {
          #solution .list .item button {
            position: absolute;
            width: 12vw;
            height: 12vw;
            right: -4vw !important;
            bottom: 3vw !important; } }
    #solution .list .ttl_box {
      position: relative; }
      #solution .list .ttl_box .num {
        position: absolute;
        width: 3.4em;
        bottom: 0;
        left: -1%; }
        @media screen and (max-width: 767px) {
          #solution .list .ttl_box .num {
            width: 5em; } }
      #solution .list .ttl_box p {
        padding: 1em 1em 1em 4.5em;
        background: #22aec8;
        border-radius: 3em;
        box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.15);
        color: #fff;
        font-size: 85%; }
        @media screen and (max-width: 767px) {
          #solution .list .ttl_box p {
            padding: 0.5em 1em 0.5em 5.5em;
            font-size: 110%; } }
      #solution .list .ttl_box.box6 p {
        padding: 0.3em 1em 0.3em 4.5em; }
        @media screen and (max-width: 767px) {
          #solution .list .ttl_box.box6 p {
            padding: 0.5em 1em 0.5em 5.5em; } }
    #solution .list .item_box {
      position: relative;
      margin: 0.8em 0 0 0;
      padding: 2.5em 3vw;
      background: #fff;
      box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.15);
      border-radius: 1.6em; }
      @media screen and (min-width: 768px) {
        #solution .list .item_box {
          height: 27em; }
          #solution .list .item_box.box7 {
            height: auto; } }
      @media screen and (max-width: 767px) {
        #solution .list .item_box {
          margin: 1.2em 0 0 0;
          padding: 2.5em 5vw 1em 5vw;
          border-radius: 2em; } }
      #solution .list .item_box dl {
        width: 100%; }
        #solution .list .item_box dl dt {
          padding: 0 0 0 0.8em;
          border-left: 0.4em solid #0257a9;
          color: #0257a9;
          font-size: 125%;
          font-weight: 900;
          line-height: 1.5; }
          @media screen and (max-width: 767px) {
            #solution .list .item_box dl dt {
              font-size: 155%; } }
          #solution .list .item_box dl dt span {
            color: #ff7b00; }
        #solution .list .item_box dl dd {
          padding: 0.5em 0 0 0; }
          @media screen and (max-width: 767px) {
            #solution .list .item_box dl dd {
              padding: 1.3em 0 0 0; } }
          #solution .list .item_box dl dd p {
            font-size: 85%;
            font-weight: 700;
            line-height: 1.8; }
            @media screen and (max-width: 767px) {
              #solution .list .item_box dl dd p {
                font-size: 110%; } }
          #solution .list .item_box dl dd .img {
            position: relative;
            margin: 1em 0 0 0; }
      @media screen and (min-width: 768px) {
        #solution .list .item_box.box7 dl {
          display: flex;
          justify-content: space-between; }
          #solution .list .item_box.box7 dl dt {
            border: 0;
            padding: 0;
            width: 50%; }
            #solution .list .item_box.box7 dl dt .ttl {
              padding: 0 0 0 0.8em;
              border-left: 0.4em solid #0257a9; }
            #solution .list .item_box.box7 dl dt .note {
              margin: 0.5em 0 0 0;
              color: #000;
              font-size: 68%;
              font-weight: 700;
              line-height: 1.8;
              text-align: left; }
              #solution .list .item_box.box7 dl dt .note span {
                color: #0257a9; }
          #solution .list .item_box.box7 dl dd {
            width: 42%;
            padding: 0; }
        #solution .list .item_box.box7 .medal {
          position: absolute;
          width: 35%;
          bottom: -2em;
          right: -2.2em; }
        #solution .list .item_box.box7 button {
          position: absolute;
          bottom: 0;
          left: 0; } }
      @media screen and (max-width: 767px) {
        #solution .list .item_box.box7 {
          position: relative; }
          #solution .list .item_box.box7 .note {
            margin: 0;
            color: #000; }
          #solution .list .item_box.box7 .medal {
            position: absolute;
            width: 40%;
            bottom: -4em;
            left: -2.2em; } }
  #solution .img_box {
    margin: 4em 0 0 0;
    text-align: center; }
    #solution .img_box h3 {
      color: #fff;
      font-size: 150%;
      font-weight: 800;
      letter-spacing: 0.05em; }
      @media screen and (max-width: 767px) {
        #solution .img_box h3 {
          font-size: 130%; } }
      #solution .img_box h3 span {
        color: #ff7b00;
        font-size: 185%; }
      #solution .img_box h3 .line {
        display: inline-block;
        margin: -1.3em 0 0 0;
        padding: 0 0.2em 0.4em 0.2em;
        border-bottom: 3px solid #fff;
        color: #fff;
        font-size: 100%; }
        @media screen and (max-width: 767px) {
          #solution .img_box h3 .line {
            display: inline;
            margin: -0.5em 0 0 0;
            padding: 0 0.2em 0.3em 0.2em;
            border-bottom: 2px solid #fff; } }
      #solution .img_box h3 em {
        display: inline-block;
        text-emphasis: filled;
        font-weight: 800;
        line-height: 1; }
    #solution .img_box .img {
      width: 90%;
      margin: 2em auto 0 auto; }
      @media screen and (max-width: 767px) {
        #solution .img_box .img {
          width: 70%;
          margin: 3.5em auto 0 auto; } }

/*********************************
 *
 * movie
 *
 *********************************/
#movie {
  position: relative;
  padding: 7vw 0;
  background: #e6f6f9 url("../images/bg_movie.jpg") left bottom repeat-x;
  background-size: auto 80%;
  z-index: 3; }
  @media screen and (max-width: 767px) {
    #movie {
      padding: 10vw 0;
      background: #e6f6f9 url("../images/bg_movie-sp.jpg") left bottom no-repeat;
      background-size: cover; } }
  #movie .movie_inner {
    position: relative;
    width: 74%;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      #movie .movie_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #movie .movie_inner {
        width: 92%; } }
  #movie h2 {
    display: flex;
    align-items: center; }
    #movie h2 .en {
      width: 38.4%;
      margin: 0; }
      @media screen and (max-width: 767px) {
        #movie h2 .en {
          width: 70%; } }
    #movie h2 .jp {
      margin: 0 0 0 1em;
      padding: 1.3em 0 0 0; }
      @media screen and (max-width: 767px) {
        #movie h2 .jp {
          font-size: 130%; } }
      #movie h2 .jp::after {
        display: none; }
  #movie .movie_box {
    padding: 4vw 2vw 2vw 2vw;
    background: #fff;
    box-shadow: 0 0.1em 0.3em rgba(2, 87, 169, 0.1);
    border-radius: 1.8em; }
    @media screen and (max-width: 767px) {
      #movie .movie_box {
        padding: 6vw 4vw 4vw 4vw; } }
    #movie .movie_box .ttl {
      position: relative;
      padding: 0 0 0.7em 0;
      color: #0257a9;
      font-size: 130%;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #movie .movie_box .ttl {
          font-size: 150%; } }
      #movie .movie_box .ttl::after {
        position: absolute;
        display: block;
        content: "";
        width: 2.5em;
        height: 3px;
        bottom: 0;
        left: 50%;
        background: #0257a9;
        transform: translateX(-50%); }
    #movie .movie_box .img {
      margin: 1.3em 0 0 0; }
      @media screen and (min-width: 768px) {
        #movie .movie_box .img {
          max-width: 700px;
          margin: 1.3em auto 0 auto; } }
    #movie .movie_box picture {
      cursor: pointer; }

/*********************************
 *
 * pcontact
 *
 *********************************/
.pcontact {
  position: relative;
  padding: 4vw 0;
  background: url("../images/bg_pcontact.jpg") left top no-repeat;
  background-size: cover;
  color: #fff;
  z-index: 3; }
  @media screen and (max-width: 767px) {
    .pcontact {
      padding: 9vw 0;
      background: url("../images/bg_pcontact-sp.jpg") left top no-repeat;
      background-size: cover; } }
  .pcontact .pcontact_inner {
    position: relative;
    width: 74%;
    margin: 0 auto;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .pcontact .pcontact_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      .pcontact .pcontact_inner {
        width: 92%; } }
  .pcontact h3 {
    font-size: 120%;
    font-weight: 800; }
    @media screen and (max-width: 767px) {
      .pcontact h3 {
        line-height: 1.5; } }
  .pcontact .btn {
    width: 40%;
    margin: 1.5em auto 0 auto; }
    @media screen and (max-width: 767px) {
      .pcontact .btn {
        width: 100%; } }
    .pcontact .btn a {
      box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.2); }
      @media screen and (max-width: 767px) {
        .pcontact .btn a {
          font-size: 130%; } }
    .pcontact .btn p {
      padding: 0.8em 0 0 0;
      color: #fff;
      font-size: 70%;
      text-align: center; }
      @media screen and (max-width: 767px) {
        .pcontact .btn p {
          font-size: 90%; } }
  .pcontact dl.tel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.7em 0 0 0; }
    @media screen and (max-width: 767px) {
      .pcontact dl.tel {
        display: inline-block; } }
    .pcontact dl.tel dt {
      padding: 0.2em 1.2em 0.2em 2.2em;
      background: url("../images/icon_tel.svg") left center no-repeat;
      background-size: auto 1.8em; }
      @media screen and (max-width: 767px) {
        .pcontact dl.tel dt {
          width: 100%;
          padding: 0.2em 1.2em 0.2em 3.2em;
          background-size: auto 2.7em; } }
      .pcontact dl.tel dt a {
        color: #fff;
        font-style: italic;
        font-size: 170%; }
        @media screen and (max-width: 767px) {
          .pcontact dl.tel dt a {
            font-size: 240%;
            font-weight: 700; } }
    .pcontact dl.tel dd {
      font-size: 65%;
      font-weight: 600; }
      @media screen and (max-width: 767px) {
        .pcontact dl.tel dd {
          width: 100%;
          padding: 0.6em 0 0 0; } }
      .pcontact dl.tel dd span {
        padding: 0.2em 2em;
        border: 1px solid #fff;
        border-radius: 2em; }
        @media screen and (max-width: 767px) {
          .pcontact dl.tel dd span {
            font-size: 130%; } }
  .pcontact .note {
    margin: 0.5em 0 0 0;
    font-size: 90%; }

/*********************************
 *
 * reason
 *
 *********************************/
.bg_reason {
  background: url("../images/bg_reason.jpg") left bottom no-repeat;
  background-size: 100% auto; }
  @media screen and (max-width: 767px) {
    .bg_reason {
      background: #e6f6f9 url("../images/bg_reason-sp.jpg") left top no-repeat;
      background-size: 100% auto; } }

#reason {
  position: relative;
  padding: 7vw 0; }
  @media screen and (max-width: 767px) {
    #reason {
      padding: 15vw 0 10vw 0; } }
  #reason .reason_inner {
    position: relative;
    width: 74%;
    margin: 0 auto;
    text-align: center; }
    @media screen and (min-width: 768px) {
      #reason .reason_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #reason .reason_inner {
        width: 92%; } }
  #reason h2 .en {
    width: 48%; }
    @media screen and (max-width: 767px) {
      #reason h2 .en {
        width: 70%; } }
  #reason .lead {
    margin: 1.2em 0 0 0;
    font-size: 200%; }
    @media screen and (max-width: 767px) {
      #reason .lead {
        margin: 0.5em 0 0 0;
        font-size: 180%; } }
  #reason .slider {
    position: relative; }
    #reason .slider .slick-slide {
      overflow: visible;
      position: relative;
      width: 610px !important;
      padding: 70px 40px 0 40px; }
      @media screen and (max-width: 767px) {
        #reason .slider .slick-slide {
          width: 96vw !important;
          padding: 5vw 0 0 0; } }
      #reason .slider .slick-slide .medal {
        position: absolute;
        width: 27%;
        top: 2%;
        right: 0; }
        @media screen and (max-width: 767px) {
          #reason .slider .slick-slide .medal {
            width: 34%;
            top: 0;
            right: 0; } }
    #reason .slider .dots-wrap {
      display: flex;
      justify-content: center; }
    #reason .slider .dots-wrap li {
      width: 15px;
      height: 15px;
      margin: 0 18px;
      background: none;
      border-radius: 50%;
      border: 2px solid #0257a9;
      cursor: pointer; }
      @media screen and (max-width: 767px) {
        #reason .slider .dots-wrap li {
          width: 3.2vw;
          height: 3.2vw;
          margin: 0 3vw; } }
    #reason .slider .dots-wrap li:hover,
    #reason .slider .dots-wrap li.slick-active {
      background: #0257a9; }
    #reason .slider .dots-wrap li button {
      display: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      padding: 0; }
    #reason .slider .arrow_box {
      position: absolute;
      width: 100vw; }
    #reason .slider .prev-arrow,
    #reason .slider .next-arrow {
      display: block;
      width: 44px;
      height: 44px;
      background: url("../images/slider_arw.svg") center center no-repeat;
      background-size: contain;
      cursor: pointer;
      position: absolute;
      z-index: 15 !important; }
      @media screen and (max-width: 767px) {
        #reason .slider .prev-arrow,
        #reason .slider .next-arrow {
          width: 9vw;
          height: 9vw; } }
    #reason .slider .prev-arrow {
      transform: rotate(180deg);
      left: calc(50% - 327px);
      top: calc(50% - 5px); }
      @media screen and (max-width: 767px) {
        #reason .slider .prev-arrow {
          left: calc(50% - 48vw); } }
    #reason .slider .next-arrow {
      left: calc(50% + 284px);
      top: calc(50% - 5px);
      transform: scale(1, -1); }
      @media screen and (max-width: 767px) {
        #reason .slider .next-arrow {
          left: calc(50% + 39vw); } }
  #reason .img {
    margin: 5em 0 0 0; }
    @media screen and (max-width: 767px) {
      #reason .img {
        width: 90%;
        margin: 2.5em auto 0 auto; } }

/*********************************
 *
 * function
 *
 *********************************/
#function {
  position: relative;
  padding: 7vw 0 3vw 0; }
  @media screen and (max-width: 767px) {
    #function {
      width: 100vw;
      overflow-x: hidden;
      padding: 7vw 0 0 0; } }
  #function .function_inner {
    position: relative;
    width: 74%;
    margin: 0 auto;
    text-align: center;
    z-index: +1; }
    @media screen and (min-width: 768px) {
      #function .function_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #function .function_inner {
        width: 88%; } }
  #function h2 .en {
    width: 60.8%; }
    @media screen and (max-width: 767px) {
      #function h2 .en {
        width: 88%;
        opacity: 0.5; } }
  #function .lead {
    margin: 0.5em 0 0 0;
    font-size: 180%; }
    @media screen and (max-width: 767px) {
      #function .lead {
        line-height: 1.3; } }
  #function .lead + p {
    margin: 1em 0 0 0;
    color: #000;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #function .lead + p {
        margin: 1.3em 0 0 0; } }
  #function .bg1 {
    position: relative;
    padding: 0 0 3em 0; }
    @media screen and (max-width: 767px) {
      #function .bg1 {
        padding: 0 0 1.5em 0; } }
    #function .bg1::after {
      position: absolute;
      display: block;
      content: "";
      width: 96%;
      height: 25vw;
      left: 0;
      bottom: 0;
      background: #22aec8;
      border-radius: 0 1.5em 1.5em 0;
      box-shadow: 0 0.3em 0.3em rgba(0, 0, 0, 0.1); }
      @media screen and (max-width: 767px) {
        #function .bg1::after {
          display: none; } }
  #function .bg2 {
    position: relative;
    margin: 2em 0 0 0;
    padding: 0 0 5em 0; }
    @media screen and (max-width: 767px) {
      #function .bg2 {
        padding: 0 0 3em 0;
        background: #22aec8; } }
    #function .bg2::after {
      position: absolute;
      display: block;
      content: "";
      width: 96%;
      height: 100%;
      right: 0;
      bottom: 0;
      background: #22aec8;
      border-radius: 1.5em 0 0 1.5em;
      box-shadow: 0 0.3em 0.3em rgba(0, 0, 0, 0.1); }
      @media screen and (max-width: 767px) {
        #function .bg2::after {
          display: none; } }
  #function h3 {
    display: inline-block;
    margin: 3em 0 0 0;
    padding: 0.8em 1.5em;
    background: #fff;
    border-radius: 0.8em;
    box-shadow: 0 0.25em 0.25em rgba(2, 87, 169, 0.1);
    color: #0257a9;
    font-weight: 800; }
    @media screen and (max-width: 767px) {
      #function h3 {
        margin: 2em 0 0 0;
        font-size: 150%; } }
  #function h4 {
    position: relative;
    display: inline-block;
    margin: 3em 0 0 0;
    padding: 0.1em 1.8em 0.1em 1.5em;
    color: #fff;
    font-weight: 800; }
    @media screen and (max-width: 767px) {
      #function h4 {
        font-size: 140%; } }
    #function h4::before {
      position: absolute;
      display: block;
      content: "";
      top: 0.2em;
      left: 0;
      width: 1em;
      height: 1em;
      background: url("../images/icon_h4.svg") left center no-repeat;
      background-size: contain; }
      @media screen and (max-width: 767px) {
        #function h4::before {
          width: 1.3em;
          height: 1.3em; } }
    #function h4::after {
      position: absolute;
      display: block;
      content: "";
      top: 0.2em;
      right: 0;
      width: 1em;
      height: 1em;
      background: url("../images/icon_h4.svg") left center no-repeat;
      background-size: contain; }
      @media screen and (max-width: 767px) {
        #function h4::after {
          width: 1.3em;
          height: 1.3em; } }
  #function .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    #function .list .item {
      position: relative;
      width: 31.6%;
      margin: 2.5em 0 0 0;
      padding: 3.5vw 2.2vw;
      background: #0257a9;
      border-radius: 1.7em;
      box-shadow: 0 0.3em 0.3em rgba(2, 87, 169, 0.2); }
      @media screen and (max-width: 767px) {
        #function .list .item {
          width: 100%;
          padding: 7vw 12vw 7vw 9vw; } }
      #function .list .item::before {
        position: absolute;
        display: block;
        content: "";
        top: 0;
        left: 50%;
        width: 60%;
        height: 0.5em;
        background: #ff7b00;
        transform: translateX(-50%); }
      #function .list .item .img {
        overflow: visible;
        position: relative; }
        #function .list .item .img button {
          right: -1em !important;
          bottom: -1em !important; }
          @media screen and (max-width: 767px) {
            #function .list .item .img button {
              position: absolute;
              width: 12vw;
              height: 12vw;
              right: -4vw !important;
              bottom: 3vw !important; } }
    #function .list .ttl span {
      display: inline-block;
      width: 80%;
      margin: 1.5em auto 0 auto;
      padding: 0.5em 0;
      background: #fff;
      border-radius: 0.8em;
      box-shadow: 0 0.25em 0.25em rgba(2, 87, 169, 0.2);
      color: #0257a9;
      font-size: 120%;
      font-weight: 900; }
      @media screen and (max-width: 767px) {
        #function .list .ttl span {
          font-size: 170%;
          margin: 0 auto 0 auto; } }
    #function .list .note {
      margin: 1.3em 0 0 0;
      color: #fff;
      font-size: 86%;
      font-weight: 600;
      line-height: 1.8;
      text-align: left; }
      @media screen and (max-width: 767px) {
        #function .list .note {
          width: 100%;
          margin: 1.3em auto 0 auto;
          font-size: 120%; } }
  #function ul.list1 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.5em 0 0 0;
    font-size: 110%; }
    @media screen and (max-width: 767px) {
      #function ul.list1 {
        font-size: 140%;
        margin: 0.2em 0 0 0; } }
    #function ul.list1 li {
      width: 18%;
      margin: 1em 0 0 0;
      padding: 0.5em 1em;
      background: #fff;
      border-radius: 0.7em;
      box-shadow: 0 0.1em 0.3em rgba(2, 87, 169, 0.2);
      color: #0257a9; }
      @media screen and (max-width: 767px) {
        #function ul.list1 li {
          width: 47.5%; } }
  #function ul.list2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.5em 0 0 0;
    color: #fff;
    font-size: 110%; }
    @media screen and (max-width: 767px) {
      #function ul.list2 {
        width: 100%;
        justify-content: space-between;
        font-size: 140%; } }
    #function ul.list2 li {
      width: 23%;
      margin: 1em 0 0 0; }
      @media screen and (max-width: 767px) {
        #function ul.list2 li {
          width: 47.5%; } }
      #function ul.list2 li span {
        display: block;
        width: 90%;
        margin: 0 auto;
        padding: 0.5em 1em;
        border: 2px solid #fff;
        border-radius: 0.7em;
        box-shadow: 0 0.1em 0.3em rgba(2, 87, 169, 0.2); }
        @media screen and (max-width: 767px) {
          #function ul.list2 li span {
            width: 100%; } }
      #function ul.list2 li p {
        margin: 0.5em 0 0 0;
        font-size: 70%; }
  #function .note {
    width: 90%;
    margin: 2em auto 0 auto;
    color: #fff;
    font-size: 70%;
    text-align: left; }
    @media screen and (max-width: 767px) {
      #function .note {
        width: 100%;
        font-size: 90%;
        font-weight: 700;
        line-height: 1.6; } }
  #function .img {
    margin: 1.2em auto 0 auto; }
    @media screen and (max-width: 767px) {
      #function .img {
        overflow-x: scroll;
        overflow-y: hidden;
        width: 110%;
        margin: 1.2em 0 0 -2vw;
        padding: 0 0 3em 0; }
        #function .img picture {
          display: block;
          width: 775px !important;
          height: auto; }
        #function .img::-webkit-scrollbar {
          height: 6px; }
        #function .img::-webkit-scrollbar-thumb {
          background: #0257a9;
          border-radius: 6px; }
        #function .img::-webkit-scrollbar-track {
          background: #fff;
          border-radius: 6px; } }

/*********************************
 *
 * comparison
 *
 *********************************/
#comparison {
  position: relative;
  padding: 17vw 0 7vw 0;
  background: url("../images/bg_comparison.jpg") center top no-repeat;
  background-size: 100% auto; }
  @media screen and (min-width: 768px) {
    #comparison {
      font-size: min(1.375vw, 20px); } }
  @media screen and (max-width: 767px) {
    #comparison {
      width: 100vw;
      overflow-x: hidden;
      padding: 17vw 0 11vw 0;
      background: url("../images/bg_comparison-sp.jpg") center top no-repeat;
      background-size: 100% auto; } }
  #comparison .comparison_inner {
    position: relative;
    width: 74%;
    margin: 0 auto;
    text-align: center; }
    @media screen and (min-width: 768px) {
      #comparison .comparison_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #comparison .comparison_inner {
        width: 92%; } }
  #comparison .lead {
    font-size: 160%;
    font-weight: 900; }
    #comparison .lead span {
      font-size: 160%; }
    #comparison .lead .line {
      padding: 0 0 0.3em 0;
      font-size: 100%;
      border-bottom: 3px solid #0257a9; }
  #comparison .img {
    margin: 2.5em 0 0 0; }
    @media screen and (max-width: 767px) {
      #comparison .img {
        overflow-x: scroll;
        overflow-y: hidden;
        width: 102%;
        margin: 2.5em 0 0 2.4vw;
        padding: 0 0 3em 0; }
        #comparison .img picture {
          display: block;
          width: 674px !important;
          height: auto; }
        #comparison .img::-webkit-scrollbar {
          height: 6px; }
        #comparison .img::-webkit-scrollbar-thumb {
          background: #0257a9;
          border-radius: 6px; }
        #comparison .img::-webkit-scrollbar-track {
          background: #fff;
          border-radius: 6px; } }
  #comparison .note {
    margin: 1em 0 0 0;
    font-size: 80%; }
    @media screen and (max-width: 767px) {
      #comparison .note {
        margin: 1.5em 0 0 0;
        font-size: 95%;
        line-height: 1.5; } }

/*********************************
 *
 * change
 *
 *********************************/
.bg_change {
  background: url("../images/bg_change.jpg") right bottom no-repeat;
  background-size: cover; }
  @media screen and (max-width: 767px) {
    .bg_change {
      background: #e6f6f9;
      background-image: none; } }

#change {
  position: relative;
  padding: 7vw 0; }
  @media screen and (max-width: 767px) {
    #change {
      padding: 9vw 0; } }
  #change .change_inner {
    position: relative;
    width: 74%;
    margin: 0 auto;
    text-align: center; }
    @media screen and (min-width: 768px) {
      #change .change_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #change .change_inner {
        width: 92%; } }
  #change .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 1.5em 0 0 0; }
    @media screen and (max-width: 767px) {
      #change .list {
        margin: 1em 0 0 0; } }
    #change .list .item {
      position: relative;
      width: 49.6%;
      margin: 0.7em 0 0 0; }
      @media screen and (max-width: 767px) {
        #change .list .item {
          width: 100%; } }
  #change .note {
    margin: 1em 0 0 0;
    font-size: 80%; }
    @media screen and (max-width: 767px) {
      #change .note {
        margin: 1.2em 0 0 0;
        font-size: 95%;
        line-height: 1.5; } }

/*********************************
 *
 * voice
 *
 *********************************/
#voice {
  position: relative;
  padding: 3vw 0 17vw 0; }
  @media screen and (max-width: 767px) {
    #voice {
      padding: 7vw 0 17vw 0;
      background: #0257a9 url("../images/bg_voice-sp.jpg") left top no-repeat;
      background-size: 100% auto; } }
  #voice .voice_bg {
    position: relative; }
    #voice .voice_bg::after {
      position: absolute;
      display: block;
      content: "";
      width: 88%;
      height: 100%;
      padding: 0 0 7vw 0;
      top: 0;
      left: 50%;
      background: #0257a9 url("../images/bg_voice.jpg") left bottom repeat-x;
      background-size: auto 80%;
      border-radius: 3em;
      transform: translateX(-50%); }
      @media screen and (min-width: 768px) {
        #voice .voice_bg::after {
          max-width: 1300px;
          font-size: min(1.375vw, 20px); } }
      @media screen and (max-width: 767px) {
        #voice .voice_bg::after {
          display: none; } }
  #voice .voice_inner {
    position: relative;
    width: 88%;
    margin: 0 auto;
    padding: 7vw 0 0 0;
    text-align: center;
    z-index: 5; }
    @media screen and (min-width: 768px) {
      #voice .voice_inner {
        max-width: 1300px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #voice .voice_inner {
        width: 92%; } }
  #voice h2 .en {
    width: 29%; }
    @media screen and (max-width: 767px) {
      #voice h2 .en {
        width: 50%; } }
  #voice h2 .jp {
    color: #fff; }
    #voice h2 .jp::after {
      background: #fff; }
  #voice .lead {
    margin: 0.5em 0 0 0;
    color: #fff;
    font-size: 180%; }
  #voice .lead + p {
    margin: 1em 0 0 0;
    color: #fff;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #voice .lead + p {
        margin: 1.8em 0 0 0;
        font-weight: 700;
        line-height: 1.7; } }
  #voice .slider {
    margin: 2em 0 0 0;
    z-index: 5; }
  #voice .slick-slide {
    width: 630px !important;
    padding: 0 40px; }
    @media screen and (max-width: 767px) {
      #voice .slick-slide {
        width: 96vw !important; } }
  #voice .dots-wrap {
    display: flex;
    justify-content: center; }
  #voice .dots-wrap li {
    width: 15px;
    height: 15px;
    margin: 0 18px;
    background: #fff;
    border-radius: 50%;
    border: 0;
    cursor: pointer; }
    @media screen and (max-width: 767px) {
      #voice .dots-wrap li {
        width: 2.8vw;
        height: 2.8vw;
        margin: 0 3vw; } }
  #voice .dots-wrap li:hover,
  #voice .dots-wrap li.slick-active {
    background: #ff7b00; }
  #voice .dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0; }
  #voice .arrow_box {
    position: absolute;
    width: 100vw; }
  #voice .prev-arrow,
  #voice .next-arrow {
    display: block;
    width: 44px;
    height: 44px;
    background: url("../images/slider_arw.svg") center center no-repeat;
    background-size: contain;
    cursor: pointer;
    position: absolute;
    z-index: 15 !important; }
    @media screen and (max-width: 767px) {
      #voice .prev-arrow,
      #voice .next-arrow {
        width: 9vw;
        height: 9vw; } }
  #voice .prev-arrow {
    transform: rotate(180deg);
    left: calc(50% - 335px);
    top: calc(50% - 22px); }
    @media screen and (max-width: 767px) {
      #voice .prev-arrow {
        left: calc(50% - 44vw); } }
  #voice .next-arrow {
    left: calc(50% + 292px);
    top: calc(50% - 22px);
    transform: scale(1, -1); }
    @media screen and (max-width: 767px) {
      #voice .next-arrow {
        left: calc(50% + 36vw); } }

/*********************************
 *
 * flow
 *
 *********************************/
#flow {
  position: relative;
  padding: 7vw 0;
  background: url("../images/bg_flow.jpg") left bottom repeat-x;
  background-size: auto 80%; }
  @media screen and (max-width: 767px) {
    #flow {
      padding: 12vw 0;
      background: url("../images/bg_flow-sp.jpg") left 25% no-repeat;
      background-size: 100% auto; } }
  #flow .flow_inner {
    position: relative;
    width: 74%;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      #flow .flow_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #flow .flow_inner {
        width: 92%; } }
  #flow h2 .en {
    width: 34%; }
    @media screen and (max-width: 767px) {
      #flow h2 .en {
        width: 50%; } }
  @media screen and (max-width: 767px) {
    #flow h2 .jp {
      padding-bottom: 0.7em;
      font-size: 190%; }
      #flow h2 .jp::after {
        width: 1.8em; } }
  #flow .img {
    margin: 2em 0 0 0; }

/*********************************
 *
 * faq
 *
 *********************************/
#faq {
  position: relative;
  padding: 7vw 0;
  background: url("../images/bg_faq.jpg") right top no-repeat;
  background-size: cover; }
  @media screen and (max-width: 767px) {
    #faq {
      padding: 10vw 0 8vw 0;
      background: #e7f6f9 url("../images/bg_faq-sp.jpg") left bottom no-repeat;
      background-size: 100% auto; } }
  #faq .faq_inner {
    position: relative;
    width: 74%;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      #faq .faq_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #faq .faq_inner {
        width: 92%; } }
  #faq h2 .en {
    width: 23.6%; }
    @media screen and (max-width: 767px) {
      #faq h2 .en {
        width: 30%; } }
  @media screen and (max-width: 767px) {
    #faq h2 .jp {
      padding-bottom: 0.7em;
      font-size: 210%; }
      #faq h2 .jp::after {
        width: 1.5em; } }
  #faq dl {
    overflow: hidden;
    margin: 1em 0 0 0;
    border-radius: 1em;
    box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.15); }
    #faq dl dt {
      position: relative;
      padding: 1.7em 8vw;
      background: #fff url("../images/faq_q.svg") 1em center no-repeat;
      background-size: auto 3em;
      color: #0257a9;
      font-weight: 900;
      cursor: pointer;
      transition: 0.3s; }
      @media screen and (max-width: 767px) {
        #faq dl dt {
          padding: 0.8em 18vw;
          background: #fff url("../images/faq_q.svg") 1.2em center no-repeat;
          background-size: auto 2.8em;
          font-size: 110%; } }
      #faq dl dt::after {
        position: absolute;
        display: block;
        content: "";
        width: 1.6em;
        height: 1.6em;
        right: 2em;
        top: 50%;
        background: url("../images/icon_plus.svg") center center no-repeat;
        background-size: contain;
        transform: translateY(-50%); }
        @media screen and (max-width: 767px) {
          #faq dl dt::after {
            width: 1.3em;
            height: 1.3em;
            right: 1.5em; } }
      #faq dl dt.open {
        background: #117cbb url("../images/faq_q_on.svg") 1em center no-repeat;
        background-size: auto 3em;
        color: #fff; }
        @media screen and (max-width: 767px) {
          #faq dl dt.open {
            background: #117cbb url("../images/faq_q_on.svg") 1.2em center no-repeat;
            background-size: auto 2.8em; } }
        #faq dl dt.open::after {
          background: url("../images/icon_minus.svg") center center no-repeat;
          background-size: contain; }
    #faq dl dd {
      display: none;
      padding: 1em 1em 1em 8vw;
      min-height: 5em;
      background: #fff url("../images/faq_a.svg") 1em 1em no-repeat;
      background-size: auto 3em;
      color: #0257a9;
      transition: 0.3s; }
      @media screen and (max-width: 767px) {
        #faq dl dd {
          padding: 1em 8vw 1em 18vw;
          font-size: 105%; } }
      #faq dl dd span {
        color: #ff7b00; }
  #faq h2 + dl {
    margin: 2.5em 0 0 0; }

/*********************************
 *
 * contact
 *
 *********************************/
#contact {
  position: relative;
  padding: 4vw 0 6vw 0;
  background: linear-gradient(to right, #0660ae 0%, #21abc7 100%); }
  @media screen and (max-width: 767px) {
    #contact {
      padding: 10vw 0 6vw 0; } }
  #contact .contact_inner {
    position: relative;
    width: 74%;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      #contact .contact_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      #contact .contact_inner {
        width: 92%; } }
  #contact .en {
    position: absolute;
    width: 34.6%;
    top: 0;
    right: 0; }
    @media screen and (max-width: 767px) {
      #contact .en {
        display: none; } }
  #contact p {
    color: #fff; }
    @media screen and (max-width: 767px) {
      #contact p {
        width: 96%;
        margin: 0 auto;
        font-size: 110%; } }
  #contact .arw {
    width: 3em;
    margin: -1em auto 0 auto; }
    @media screen and (max-width: 767px) {
      #contact .arw {
        width: 4.5em;
        margin: 1em auto 0 auto; } }
  #contact .img_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; }
    #contact .img_box ul {
      width: 60%;
      color: #fff;
      font-size: 95%; }
      @media screen and (max-width: 767px) {
        #contact .img_box ul {
          width: 100%;
          font-size: 105%;
          letter-spacing: 0.05em; } }
      #contact .img_box ul li {
        margin: 0 0 0.3em 0;
        padding: 0.2em 0 0.2em 2.4em;
        background: url("../images/contact_icon.svg") left 0.6em no-repeat;
        background-size: auto 1.8em; }
        @media screen and (max-width: 767px) {
          #contact .img_box ul li {
            margin: 0 0 1em 0;
            background: url("../images/contact_icon.svg") left 0.2em no-repeat;
            background-size: auto 1.8em; }
            #contact .img_box ul li:last-child .line {
              margin-top: -0.4em; } }
      #contact .img_box ul span {
        font-size: 120%; }
        @media screen and (max-width: 767px) {
          #contact .img_box ul span {
            font-size: 130%; } }
      #contact .img_box ul .line {
        display: inline-block;
        margin-bottom: 0.3em;
        padding-bottom: 0.1em;
        border-bottom: 2px solid #fff; }
    #contact .img_box picture {
      width: 40%;
      transform: translateX(10%); }
      @media screen and (max-width: 767px) {
        #contact .img_box picture {
          width: 100%;
          margin: 0.5em 0 0 0;
          transform: translateX(0%); } }
    @media screen and (max-width: 767px) {
      #contact .img_box {
        margin: 2em auto 0 auto; } }
  #contact .txt {
    margin: 0.7em 0 0 0;
    font-size: 86%;
    line-height: 2;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #contact .txt {
        margin: 1.2em 0 0 0;
        font-size: 110%;
        font-weight: 600;
        line-height: 1.5; } }
    #contact .txt span {
      font-size: 170%; }
      @media screen and (max-width: 767px) {
        #contact .txt span {
          display: inline-block;
          margin: 0 0 0.5em 0;
          font-size: 220%;
          font-weight: 900;
          line-height: 1.2; } }
  #contact .form_box {
    position: relative;
    margin: 2em 0 0 0;
    padding: 5vw 4vw;
    background: #fff;
    border-radius: 2em; }
    @media screen and (max-width: 767px) {
      #contact .form_box {
        padding: 6vw 4vw;
        border-radius: 1em; } }
    #contact .form_box h4 {
      position: relative;
      padding: 0 0 0.6em 2vw;
      color: #0257a9;
      font-size: 160%;
      font-weight: 900;
      text-align: center; }
      @media screen and (max-width: 767px) {
        #contact .form_box h4 {
          font-size: 210%;
          text-align: left; } }
      #contact .form_box h4::after {
        position: absolute;
        display: block;
        content: "";
        width: 2em;
        height: 3px;
        left: 50%;
        bottom: 0;
        background: #0257a9;
        transform: translateX(-50%); }
        @media screen and (max-width: 767px) {
          #contact .form_box h4::after {
            display: none; } }
    #contact .form_box .icon {
      position: absolute;
      width: 20%;
      top: 0;
      right: 0;
      transform: translate(-6%, -15%); }
      @media screen and (max-width: 767px) {
        #contact .form_box .icon {
          width: 45%;
          top: 5vw;
          right: 2vw;
          transform: translate(0, 0); } }
  #contact .note {
    margin: 1em 0 0 0;
    color: #000 !important;
    font-size: 90%;
    text-align: center; }
  #contact form {
    margin: 2em 0 0 0; }
  #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__input_group label:first-child {
    color: #0257a9;
    font-size: min(1.375vw, 20px); }
    @media screen and (max-width: 767px) {
      #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__input_group label:first-child {
        font-size: 160%; } }
  #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__system_notes {
    display: block;
    font-size: 80%; }
  #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__require {
    display: inline-block;
    padding: 0.5em 0.7em 0.6em 0.7em;
    background: #ff7b00;
    border-radius: 2em;
    color: #fff;
    font-size: 65%; }
    @media screen and (max-width: 767px) {
      #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__require {
        font-size: 80%; } }
  #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__not_require {
    display: inline-block;
    padding: 0.5em 0.7em 0.6em 0.7em;
    background: #949494;
    border-radius: 2em;
    color: #fff;
    font-size: 65%; }
    @media screen and (max-width: 767px) {
      #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__not_require {
        font-size: 80%; } }
  #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=text], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=tel], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=password], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=email], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=number], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=url], #contact .satori__custom_form_f24b9be8dbe59c47_css textarea {
    border-width: 2px;
    border-style: solid;
    border-radius: 0.6em;
    color: #000;
    box-shadow: none;
    border-color: #88bedd;
    background-color: #fff; }
    @media screen and (max-width: 767px) {
      #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=text], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=tel], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=password], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=email], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=number], #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=url], #contact .satori__custom_form_f24b9be8dbe59c47_css textarea {
        font-size: 110%; } }
  #contact .satori__custom_form_f24b9be8dbe59c47_css select {
    padding: 13px;
    border-width: 2px;
    border-style: solid;
    border-radius: 0.6em;
    color: #000;
    box-shadow: none;
    border-color: #88bedd;
    background-color: #fff;
    height: 3.4em; }
  #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=checkbox],
  #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=radio] {
    transform: scale(1.5);
    margin-right: 0.3em; }
  #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=checkbox] + label,
  #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=radio] + label {
    color: #000; }
    @media screen and (max-width: 767px) {
      #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=checkbox] + label,
      #contact .satori__custom_form_f24b9be8dbe59c47_css input[type=radio] + label {
        display: inline-block;
        font-size: 130%; } }
  #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__message {
    color: #000; }
  #contact .satori__custom_form_f24b9be8dbe59c47_css a {
    color: #0257a9; }
  #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__btn {
    position: relative;
    padding: 0.6em 3em 0.6em 3em;
    background: #ff7b00;
    border: 2px solid #ff7b00;
    border-radius: 3em;
    color: #fff;
    font-weight: 800;
    text-align: center;
    transform: 0.3s; }
    @media screen and (max-width: 767px) {
      #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__btn {
        margin-top: 1em;
        font-size: 120%; } }
    @media screen and (min-width: 768px) {
      #contact .satori__custom_form_f24b9be8dbe59c47_css .satori__btn:hover {
        background: #fff;
        color: #ff7b00;
        opacity: 1; } }
  #contact .satori__custom_form_f24b9be8dbe59c47_css textarea {
    min-height: 10em; }

/*********************************
 *
 * fixbnr_pc
 *
 *********************************/
#fixbnr_pc {
  position: fixed;
  width: 22vw;
  max-width: 300px;
  padding: 1em 0 0.6em 0;
  bottom: 2vw;
  right: 4.5vw;
  background: url("../images/fixbnr_bg.jpg") left top repeat-y;
  background-size: 100% auto;
  border-radius: 1em;
  border: 3px solid #fff;
  font-size: min(1.375vw, 20px);
  transform: translateY(150%);
  transition: 0.5s;
  z-index: 100; }
  #fixbnr_pc.is-show {
    transform: translateY(0%); }
  #fixbnr_pc .inner {
    position: relative;
    width: 100%;
    height: 100%; }
  #fixbnr_pc .icon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.5em;
    height: 5.5em;
    top: -3em;
    right: -2.5em;
    background: #7ac443;
    border-radius: 50%;
    box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 95%;
    text-align: center; }
  #fixbnr_pc .logo {
    width: 52%;
    margin: 0 auto; }
  #fixbnr_pc .btn {
    width: 86%;
    margin: 0.8em auto 0 auto;
    font-size: 95%; }
    #fixbnr_pc .btn a {
      padding: 0.6em 1.5em;
      box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.2); }
  #fixbnr_pc .tel {
    margin: 0.4em 0 0 0;
    font-size: 95%;
    text-align: center; }
    #fixbnr_pc .tel span {
      display: inline-block;
      padding: 0.2em 0 0.2em 1.9em;
      background: url("../images/icon_tel.svg") left center no-repeat;
      background-size: auto 1.5em; }
      @media screen and (max-width: 767px) {
        #fixbnr_pc .tel span {
          padding: 0 1.2em 0.2em 3.6em;
          background-size: auto 2.7em; } }
    #fixbnr_pc .tel a {
      color: #fff;
      font-style: italic;
      font-size: 130%; }
      @media screen and (max-width: 767px) {
        #fixbnr_pc .tel a {
          font-size: 310%; } }

/*********************************
 *
 * fixbnr_sp
 *
 *********************************/
#fixbnr_sp {
  position: fixed;
  padding: 0.9em 0 0.7em 0;
  width: 100%;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100; }
  #fixbnr_sp ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 94%;
    margin: 0 auto;
    font-size: 90%;
    text-align: center; }
    #fixbnr_sp ul li {
      position: relative; }
      #fixbnr_sp ul li:first-child a {
        padding-top: 0.3em;
        padding-bottom: 0.3em; }
      #fixbnr_sp ul li .icon {
        position: absolute;
        width: 60%;
        padding: 0.3em 0;
        top: -1.3em;
        left: 20%;
        background: #fff;
        box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.2);
        color: #0055ac;
        font-size: 120%;
        font-weight: 800;
        z-index: +1; }

/*********************************
 *
 * footer
 *
 *********************************/
footer {
  position: relative;
  padding: 4vw 0;
  background: linear-gradient(to right, #0660ae 0%, #21abc7 100%);
  color: #fff;
  z-index: 3; }
  @media screen and (max-width: 767px) {
    footer {
      padding: 4vw 0 25vw 0; } }
  footer .f_inner {
    position: relative;
    width: 74%;
    margin: 0 auto;
    text-align: center; }
    @media screen and (min-width: 768px) {
      footer .f_inner {
        max-width: 1100px;
        font-size: min(1.375vw, 20px); } }
    @media screen and (max-width: 767px) {
      footer .f_inner {
        width: 94%; } }
  footer .ttl {
    font-size: 80%; }
    @media screen and (max-width: 767px) {
      footer .ttl {
        font-size: 110%; } }
  footer .btn {
    width: 40%;
    margin: 1.5em auto 0 auto; }
    footer .btn a {
      box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.2); }
    footer .btn p {
      padding: 0.8em 0 0 0;
      color: #fff;
      font-size: 70%;
      text-align: center; }
  footer .tel {
    display: inline-block;
    padding: 0.2em 1.2em 0.2em 2.6em;
    background: url("../images/icon_tel.svg") left center no-repeat;
    background-size: auto 1.8em; }
    @media screen and (max-width: 767px) {
      footer .tel {
        padding: 0 1.2em 0.2em 3.6em;
        background-size: auto 2.7em; } }
    footer .tel a {
      color: #fff;
      font-style: italic;
      font-size: 180%; }
      @media screen and (max-width: 767px) {
        footer .tel a {
          font-size: 310%; } }
  footer .date {
    margin: 0.5em 0 0 0;
    font-size: 65%;
    font-weight: 600; }
    @media screen and (max-width: 767px) {
      footer .date {
        font-size: 100%; } }
    footer .date span {
      padding: 0.2em 2em;
      border: 1px solid #fff;
      border-radius: 2em; }
      @media screen and (max-width: 767px) {
        footer .date span {
          padding: 0.1em 2em; } }
  footer .note {
    margin: 4em 0 0 0;
    font-size: 65%;
    font-weight: 600;
    line-height: 1.8; }
    @media screen and (max-width: 767px) {
      footer .note {
        font-size: 90%; } }

/*********************************
 *
 * modal
 *
 *********************************/
.open-btn {
  position: absolute;
  display: block;
  width: 3em;
  height: 3em;
  padding: 0;
  bottom: 0;
  right: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  transition: background-color 0.3s ease; }

.close-btn {
  position: absolute;
  width: 2.3em;
  height: 2.3em;
  top: 1.3em;
  right: 1.3em;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease; }

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(2, 87, 169, 0.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease; }

.modal.active {
  display: flex;
  opacity: 1;
  pointer-events: auto; }

.modal-content {
  background: #fff;
  padding: 5em 2.5em 2.5em 2.5em;
  border-radius: 1.5em;
  width: 80vw;
  max-width: 1000px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(2, 87, 169, 0.5);
  position: relative;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease; }
  @media screen and (max-width: 767px) {
    .modal-content {
      width: 90vw;
      padding: 5em 0 2.5em 2.5em; }
      .modal-content .img {
        overflow-x: scroll;
        width: 100%; }
        .modal-content .img::-webkit-scrollbar {
          height: 6px; }
        .modal-content .img::-webkit-scrollbar-thumb {
          background: #0257a9;
          border-radius: 6px; }
        .modal-content .img::-webkit-scrollbar-track {
          background: #fff;
          border-radius: 6px; }
        .modal-content .img img {
          width: auto;
          max-width: none;
          height: 80vh; } }

.modal.active .modal-content {
  animation: fadeInScale 0.4s ease forwards; }

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8); }
  100% {
    opacity: 1;
    transform: scale(1); } }