@charset "UTF-8";
/* CSS Document */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/
/  mixin                                                     */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,time,ul,var,video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background-color: transparent;
  list-style: none;
  font-style: normal;
  font-weight: 400; }

header,article,footer,aside,nav,small,section {
  display: block; }

p {
  line-height: 2; }

li,
ol li {
  list-style-type: none; }

a img {
  border-style: none; }

a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #3b3d3d; }
  a:hover {
    opacity: 0.7;
    transition: 0.3s; }

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  border-style: none; }

table {
  width: 100%;
  border-collapse: collapse; }

table th,
table td {
  vertical-align: top; }

article,aside,dialog,figure,footer,header,hgroup,nav,section {
  display: block; }

@media screen and (min-width: 751px) and (max-width: 1300px) {
  html {
    font-size: calc(1vw * 100 / 1300); } }
@media (min-width: 1301px) {
  html {
    font-size: 0.0625rem; } }
@media (max-width: 750px) {
  html {
    font-size: calc(1vw * 100 / 750); } }

body {
  font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "meiryo", "ＭＳ Ｐゴシック", sans-serif;
  color: #3b3d3d; }
  @media (min-width: 751px) {
    body {
      font-size: 16rem; } }
  @media (max-width: 750px) {
    body {
      font-size: 28rem; } }

@font-face {
  font-family: 'Irohamaru';
  font-style: normal;
  font-weight: 400;
  src: url("./font/irohamaru-Regular.ttf") format("truetype");
  src: url("./font/irohamaru-Regular.woff2") format("woff2"), url("./font/irohamaru-Regular.woff") format("woff"), url("./font/irohamaru-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'Irohamaru';
  font-style: normal;
  font-weight: 500;
  src: url("./font/irohamaru-Medium.ttf") format("truetype"); }
.Irohamaru {
  font-family: 'Irohamaru';
  font-weight: 400; }

.Irohamaru__medium {
  font-family: 'Irohamaru';
  font-weight: 500; }

.kozuka {
  font-family: '小塚ゴシック Pro', 'Kozuka Gothic Pro', sans-serif; }

@media (min-width: 751px) {
  .pc__none {
    display: none; } }

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

.text__center {
  text-align: center; }

.js__animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s; }

.js__animate1 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: .1s; }

.js__animate2 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: .3s; }

.js__animate3 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: .5s; }

.js__animate4 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: 0.7s; }

.js__animate5 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: 0.8s; }

.js__animate6 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: 0.9s; }

.js__animate7 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: 1s; }

.js__animate8 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: 1.1s; }

.js__animate9 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: 1.2s; }

.js__animate10 {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.75s;
  transition-delay: 1.3s; }

@media (min-width: 751px) {
  .cmn__inner-1020 {
    width: 1020rem;
    margin: 0 auto; } }
@media (max-width: 750px) {
  .cmn__inner-1020 {
    width: 720rem;
    margin: 0 auto; } }

.cmn__head {
  text-align: center;
  position: relative; }
  .cmn__head:before {
    background: #e1f9f5;
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 38rem;
    top: 13rem;
    z-index: -1; }
  .cmn__head p {
    color: #26a88f;
    line-height: 1;
    margin-bottom: 15rem;
    letter-spacing: 7rem;
    font-size: 37rem; }
  .cmn__head h2 {
    color: #383a3a;
    position: relative;
    display: inline-block;
    margin-bottom: 60rem; }
    @media (min-width: 751px) {
      .cmn__head h2 {
        font-size: 14rem; } }
    @media (max-width: 750px) {
      .cmn__head h2 {
        font-size: 28rem; } }
    .cmn__head h2:after {
      content: '';
      display: inline-block;
      background: #ebcb78;
      width: 24px;
      height: 3px;
      position: absolute;
      bottom: -20rem; }
      @media (min-width: 751px) {
        .cmn__head h2:after {
          left: 12rem; } }
      @media (max-width: 750px) {
        .cmn__head h2:after {
          left: 43rem; } }

.header {
  background: #fff;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 50;
  -webkit-transition: height cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
  transition: height cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s; }
  @media (min-width: 751px) {
    .header {
      height: 60rem; } }
  @media (max-width: 750px) {
    .header {
      height: 105rem; } }
  @media (min-width: 751px) {
    .header.js__fixed {
      position: fixed;
      z-index: 3000;
      width: 100%;
      height: 35rem; } }
  @media (min-width: 751px) {
    .header.js__fixed .header__inner-left h1 {
      font-size: 20rem; } }
  @media (min-width: 751px) {
    .header.js__fixed .header__inner-right nav ul li:last-of-type {
      font-size: 26rem; } }
  .header__inner {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center; }
    @media (min-width: 751px) {
      .header__inner {
        width: 1020rem;
        margin: 0 auto; } }
    @media (max-width: 750px) {
      .header__inner {
        margin: 0 20rem;
        width: 720rem; } }
    .header__inner-left h1 {
      font-size: 24rem;
      color: #26a88f; }
    @media (max-width: 750px) {
      .header__inner-right {
        margin-right: 10rem; } }
    @media (max-width: 750px) {
      .header__inner-right nav {
        display: none;
        transition: 0.3s; } }
    @media (max-width: 750px) {
      .header__inner-right nav.on {
        right: 0;
        transition: 0.3s;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        background: #fff;
        font-size: 16rem;
        box-sizing: border-box;
        z-index: 2;
        transition: 0.3s;
        padding: 140rem 0 30rem 0;
        z-index: 1000;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0; } }
    @media (min-width: 751px) {
      .header__inner-right nav ul li:first-of-type a {
        border-left: 3rem solid #26a88f; } }
    @media (max-width: 750px) {
      .header__inner-right nav ul li:nth-of-type(1) a span {
        margin-left: 135rem; } }
    @media (max-width: 750px) {
      .header__inner-right nav ul li:nth-of-type(2) a span {
        margin-left: 100rem; } }
    @media (max-width: 750px) {
      .header__inner-right nav ul li:nth-of-type(3) a span {
        margin-left: 20rem; } }
    @media (max-width: 750px) {
      .header__inner-right nav ul li:nth-of-type(4) a span {
        margin-left: 95rem; } }
    @media (max-width: 750px) {
      .header__inner-right nav ul li:nth-of-type(5) a span {
        margin-left: 105rem; } }
    @media (max-width: 750px) {
      .header__inner-right nav ul li:nth-of-type(1) a, .header__inner-right nav ul li:nth-of-type(2) a, .header__inner-right nav ul li:nth-of-type(3) a, .header__inner-right nav ul li:nth-of-type(4) a {
        border-bottom: 1rem dashed #cccccc; } }
    @media (max-width: 750px) {
      .header__inner-right nav ul li:not(:last-of-type) {
        padding: 0 60rem 0 95rem; } }
    .header__inner-right nav ul li:not(:last-of-type) a {
      color: #26a88f; }
      @media (max-width: 750px) {
        .header__inner-right nav ul li:not(:last-of-type) a {
          font-size: 28rem;
          display: block;
          padding: 32rem 25rem 32rem 60rem; } }
      .header__inner-right nav ul li:not(:last-of-type) a span {
        display: inline-block; }
        @media (max-width: 750px) {
          .header__inner-right nav ul li:not(:last-of-type) a span {
            font-size: 20rem; } }
    @media (min-width: 751px) {
      .header__inner-right nav ul li:last-of-type {
        color: #2d8a8e;
        font-size: 36rem; } }
    @media (max-width: 750px) {
      .header__inner-right nav ul li:last-of-type {
        background: #26a88f;
        color: #fff;
        font-size: 36rem;
        text-align: center;
        padding: 8rem; } }
  @media (min-width: 751px) {
    .header__sp {
      display: none; } }
  @media (max-width: 750px) {
    .header__sp {
      font-weight: 700;
      position: relative;
      box-sizing: border-box;
      cursor: pointer;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      z-index: 1001;
      width: 58rem;
      height: 65rem; } }
  @media (max-width: 750px) {
    .header__sp:after {
      content: 'MENU';
      position: absolute;
      color: #26a88f;
      font-size: 21rem;
      position: absolute;
      bottom: -4rem;
      left: -2rem; } }
  @media (max-width: 750px) {
    .header__sp.active {
      position: fixed;
      right: 20rem;
      top: 20rem; } }
  @media (max-width: 750px) {
    .header__sp.active:after {
      content: 'CLOSE';
      left: -6rem;
      bottom: -11rem; } }
  @media (max-width: 750px) {
    .header__sp span {
      background: #26a88f;
      position: absolute;
      width: 59rem;
      height: 3px;
      left: 0;
      -webkit-transition: all 0.3s;
      transition: all 0.3s; }
      .header__sp span:nth-of-type(1) {
        top: 0;
        transition: 0.3s; }
      .header__sp span.close {
        display: none;
        transition: 0.3s; } }
  @media (max-width: 750px) {
    .header__sp span:nth-of-type(2) {
      top: 15rem; } }
  .header__sp span:nth-of-type(2).close {
    display: block;
    transform: rotate(-45deg);
    transition: 0.3s;
    z-index: 10; }
  @media (max-width: 750px) {
    .header__sp span:nth-of-type(3) {
      top: 30rem; } }
  .header__sp span:nth-of-type(3).close {
    transform: rotate(45deg);
    transition: 0.3s;
    display: block;
    z-index: 10; }
    @media (max-width: 750px) {
      .header__sp span:nth-of-type(3).close {
        top: 15rem; } }

@media (min-width: 751px) {
  .mv {
    padding-top: 60rem;
    margin-bottom: 100rem; } }
@media (max-width: 750px) {
  .mv {
    padding-top: 105rem;
    margin-bottom: 45rem; } }
.mv__head {
  text-align: center;
  background: #26a88f;
  color: #fff; }
  @media (min-width: 751px) {
    .mv__head {
      font-size: 18rem; } }
  @media (max-width: 750px) {
    .mv__head {
      font-size: 26rem; } }
.mv img {
  width: 100%; }

@media (min-width: 751px) {
  .below__content {
    margin-bottom: 160rem; } }
@media (max-width: 750px) {
  .below__content {
    margin-bottom: 100rem; } }
.below__content-separate {
  display: flex;
  justify-content: space-between; }
  @media (min-width: 751px) {
    .below__content-separate {
      padding: 0 30rem 0 65rem; } }
  .below__content-separate .left {
    border-right: 1px solid #26a88f; }
    @media (min-width: 751px) {
      .below__content-separate .left {
        width: 438rem; } }
    @media (max-width: 750px) {
      .below__content-separate .left {
        width: 50%; } }
    .below__content-separate .left div {
      display: flex;
      align-items: center;
      margin-bottom: 30rem; }
      .below__content-separate .left div img {
        width: 68rem; }
      .below__content-separate .left div h2 {
        color: #3ebaa2;
        margin-left: 15rem;
        font-weight: 700; }
        @media (min-width: 751px) {
          .below__content-separate .left div h2 {
            font-size: 18rem; } }
        @media (max-width: 750px) {
          .below__content-separate .left div h2 {
            font-size: 20rem; } }
    .below__content-separate .left ul li {
      display: flex;
      align-items: center;
      color: #3b3d3d; }
      @media (min-width: 751px) {
        .below__content-separate .left ul li {
          margin-bottom: 15rem;
          font-size: 15rem; } }
      @media (max-width: 750px) {
        .below__content-separate .left ul li {
          margin-bottom: 25rem;
          font-size: 25rem; } }
      .below__content-separate .left ul li span {
        background: #ebcb78;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin-right: 20rem;
        width: 34rem;
        height: 34rem; }
        @media (max-width: 750px) {
          .below__content-separate .left ul li span {
            font-size: 22rem; } }
  @media (min-width: 751px) {
    .below__content-separate .right {
      width: 438rem; } }
  @media (max-width: 750px) {
    .below__content-separate .right {
      width: 50%;
      padding-left: 15rem; } }
  .below__content-separate .right div {
    display: flex;
    align-items: center;
    margin-bottom: 30rem; }
    .below__content-separate .right div img {
      width: 62rem; }
    .below__content-separate .right div h2 {
      color: #3ebaa2;
      margin-left: 15rem;
      font-weight: 700; }
      @media (min-width: 751px) {
        .below__content-separate .right div h2 {
          font-size: 18rem; } }
      @media (max-width: 750px) {
        .below__content-separate .right div h2 {
          font-size: 20rem; } }
  @media (min-width: 751px) {
    .below__content-separate .right p {
      font-size: 15rem;
      margin-bottom: 15rem; } }
  @media (max-width: 750px) {
    .below__content-separate .right p {
      font-size: 24rem;
      margin-bottom: 15rem; } }
  @media (min-width: 751px) {
    .below__content-separate .right small {
      font-size: 13rem; } }
  @media (max-width: 750px) {
    .below__content-separate .right small {
      font-size: 22rem; } }

.detail {
  margin-bottom: 160rem; }
  .detail .cmn__head .cmn__inner-1020 {
    position: relative; }
    .detail .cmn__head .cmn__inner-1020:after {
      content: '';
      background-image: url(../images/top/detail__after.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: -90rem; }
      @media (min-width: 751px) {
        .detail .cmn__head .cmn__inner-1020:after {
          right: 0;
          width: 258rem;
          height: 280rem; } }
      @media (max-width: 750px) {
        .detail .cmn__head .cmn__inner-1020:after {
          right: 25rem;
          width: 185rem;
          height: 201rem; } }
  .detail__content {
    margin-bottom: 80rem; }
    .detail__content h4 {
      text-align: center;
      color: #26a88f;
      line-height: 1;
      margin-bottom: 20rem; }
      @media (min-width: 751px) {
        .detail__content h4 {
          font-size: 21rem; } }
      @media (max-width: 750px) {
        .detail__content h4 {
          font-size: 30rem; } }
      .detail__content h4:not(:first-of-type) {
        margin-top: 40rem; }
    .detail__content-head {
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 750px) {
        .detail__content-head {
          margin-bottom: 100rem; } }
      .detail__content-head .right {
        padding-left: 40rem; }
        @media (min-width: 751px) {
          .detail__content-head .right {
            width: 580rem; } }
        @media (max-width: 750px) {
          .detail__content-head .right {
            width: 490rem; } }
        @media (min-width: 751px) {
          .detail__content-head .right div {
            display: flex;
            align-items: flex-end;
            margin-bottom: 35rem; } }
        .detail__content-head .right div h3 {
          position: relative;
          color: #26a88f;
          letter-spacing: 3rem; }
          @media (min-width: 751px) {
            .detail__content-head .right div h3 {
              font-size: 21rem; } }
          @media (max-width: 750px) {
            .detail__content-head .right div h3 {
              font-size: 25rem; } }
          .detail__content-head .right div h3 span {
            background: #ebcb78;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 7rem;
            width: 34rem;
            height: 34rem;
            position: absolute;
            left: -40rem;
            top: 0; }
            @media (min-width: 751px) {
              .detail__content-head .right div h3 span {
                font-size: 16rem; } }
            @media (max-width: 750px) {
              .detail__content-head .right div h3 span {
                font-size: 22rem; } }
          .detail__content-head .right div h3 strong {
            display: block; }
        .detail__content-head .right div small {
          color: #26a88f;
          border-radius: 11rem;
          border: 2rem dashed #26a88f; }
          @media (min-width: 751px) {
            .detail__content-head .right div small {
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 17rem;
              height: 30rem;
              padding: 0 23rem;
              margin-left: 40rem; } }
          @media (max-width: 750px) {
            .detail__content-head .right div small {
              display: inline-block;
              font-size: 24rem;
              padding: 0 23rem;
              margin: 25rem 0; } }
        .detail__content-head .right p {
          line-height: 1.5; }
          @media (min-width: 751px) {
            .detail__content-head .right p {
              font-size: 14rem; } }
          @media (max-width: 750px) {
            .detail__content-head .right p {
              font-size: 24rem; } }
    .detail__content:nth-of-type(1) .detail__content-head img {
      width: 164rem; }
      @media (min-width: 751px) {
        .detail__content:nth-of-type(1) .detail__content-head img {
          margin-right: 120rem; } }
      @media (max-width: 750px) {
        .detail__content:nth-of-type(1) .detail__content-head img {
          margin-right: 20rem; } }
    @media (min-width: 751px) {
      .detail__content:nth-of-type(1) .detail__content-head .right {
        padding-left: 95rem;
        width: 580rem; } }
    @media (min-width: 751px) {
      .detail__content:nth-of-type(1) .detail__content-head .right h3 {
        white-space: nowrap; } }
    @media (min-width: 751px) {
      .detail__content:nth-of-type(2) .detail__content-head img {
        width: 346rem;
        margin-right: 50rem; } }
    @media (max-width: 750px) {
      .detail__content:nth-of-type(2) .detail__content-head img {
        width: 275rem;
        margin-right: 20rem; } }
    .detail__content .tab-area .head {
      display: flex;
      border-top: 1px solid #6bc1b4;
      border-left: 1px solid #6bc1b4;
      border-right: 1px solid #6bc1b4; }
      .detail__content .tab-area .head li {
        width: calc(100% / 3);
        text-align: center;
        color: #fff;
        position: relative; }
        @media (min-width: 751px) {
          .detail__content .tab-area .head li {
            padding: 18rem;
            font-size: 15rem; } }
        @media (max-width: 750px) {
          .detail__content .tab-area .head li {
            padding: 12rem;
            font-size: 23rem; } }
        .detail__content .tab-area .head li:nth-of-type(1) {
          background: #6bc1b4; }
          .detail__content .tab-area .head li:nth-of-type(1).tab-active:after, .detail__content .tab-area .head li:nth-of-type(1).tab-active1:after, .detail__content .tab-area .head li:nth-of-type(1).tab-active2:after {
            border-color: #6bc1b4 transparent transparent transparent; }
        .detail__content .tab-area .head li:nth-of-type(2) {
          background: #9adbd0; }
          .detail__content .tab-area .head li:nth-of-type(2).tab-active:after, .detail__content .tab-area .head li:nth-of-type(2).tab-active1:after, .detail__content .tab-area .head li:nth-of-type(2).tab-active2:after {
            border-color: #9adbd0 transparent transparent transparent; }
        .detail__content .tab-area .head li:nth-of-type(3) {
          background: #beede4; }
          .detail__content .tab-area .head li:nth-of-type(3).tab-active:after, .detail__content .tab-area .head li:nth-of-type(3).tab-active1:after, .detail__content .tab-area .head li:nth-of-type(3).tab-active2:after {
            border-color: #beede4 transparent transparent transparent; }
        .detail__content .tab-area .head li.tab-active, .detail__content .tab-area .head li.tab-active1, .detail__content .tab-area .head li.tab-active2 {
          position: relative; }
          .detail__content .tab-area .head li.tab-active:after, .detail__content .tab-area .head li.tab-active1:after, .detail__content .tab-area .head li.tab-active2:after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20rem 12rem 0 12rem;
            left: 46%;
            bottom: -11rem; }
    .detail__content .tab-area .tab-content,
    .detail__content .tab-area .tab-content1,
    .detail__content .tab-area .tab-content2 {
      border-left: 1px solid #6bc1b4;
      border-right: 1px solid #6bc1b4;
      border-bottom: 1px solid #6bc1b4;
      display: none; }
      @media (min-width: 751px) {
        .detail__content .tab-area .tab-content,
        .detail__content .tab-area .tab-content1,
        .detail__content .tab-area .tab-content2 {
          padding: 50rem; } }
      @media (max-width: 750px) {
        .detail__content .tab-area .tab-content,
        .detail__content .tab-area .tab-content1,
        .detail__content .tab-area .tab-content2 {
          padding: 25rem; } }
      .detail__content .tab-area .tab-content.js-show, .detail__content .tab-area .tab-content.js-show1, .detail__content .tab-area .tab-content.js-show2,
      .detail__content .tab-area .tab-content1.js-show,
      .detail__content .tab-area .tab-content1.js-show1,
      .detail__content .tab-area .tab-content1.js-show2,
      .detail__content .tab-area .tab-content2.js-show,
      .detail__content .tab-area .tab-content2.js-show1,
      .detail__content .tab-area .tab-content2.js-show2 {
        display: block; }
      @media (min-width: 751px) {
        .detail__content .tab-area .tab-content p,
        .detail__content .tab-area .tab-content1 p,
        .detail__content .tab-area .tab-content2 p {
          font-size: 13rem; } }
      @media (max-width: 750px) {
        .detail__content .tab-area .tab-content p,
        .detail__content .tab-area .tab-content1 p,
        .detail__content .tab-area .tab-content2 p {
          font-size: 25rem; } }
      @media (min-width: 751px) {
        .detail__content .tab-area .tab-content ul li,
        .detail__content .tab-area .tab-content1 ul li,
        .detail__content .tab-area .tab-content2 ul li {
          font-size: 13rem; } }
      @media (max-width: 750px) {
        .detail__content .tab-area .tab-content ul li,
        .detail__content .tab-area .tab-content1 ul li,
        .detail__content .tab-area .tab-content2 ul li {
          font-size: 25rem; } }
      .detail__content .tab-area .tab-content ul li:not(:last-of-type),
      .detail__content .tab-area .tab-content1 ul li:not(:last-of-type),
      .detail__content .tab-area .tab-content2 ul li:not(:last-of-type) {
        margin-bottom: 10rem; }

.how {
  margin-bottom: 200rem; }
  @media (min-width: 751px) {
    .how .cmn__head h2:after {
      left: 28rem; } }
  @media (max-width: 750px) {
    .how .cmn__head h2:after {
      left: 75rem; } }
  @media (max-width: 750px) {
    .how .cmn__inner-1020 {
      position: relative; } }
  .how__head {
    text-align: center; }
    .how__head h3 {
      color: #3ebaa2;
      line-height: 1;
      margin-bottom: 50rem; }
      @media (min-width: 751px) {
        .how__head h3 {
          font-size: 18rem; } }
      @media (max-width: 750px) {
        .how__head h3 {
          font-size: 30rem; } }
  .how__content {
    text-align: center; }
    @media (min-width: 751px) {
      .how__content {
        padding-left: 25rem;
        margin-bottom: 170rem; } }
    @media (max-width: 750px) {
      .how__content {
        margin: 0 auto 140rem; } }
    @media (min-width: 751px) {
      .how__content:nth-of-type(1) .how__content-block:nth-of-type(1) {
        position: relative; } }
    .how__content:nth-of-type(1) .how__content-block:nth-of-type(1) .float {
      position: absolute;
      z-index: 2; }
      @media (min-width: 751px) {
        .how__content:nth-of-type(1) .how__content-block:nth-of-type(1) .float {
          right: 30rem;
          width: 255rem;
          height: 285rem;
          top: -230rem; } }
      @media (max-width: 750px) {
        .how__content:nth-of-type(1) .how__content-block:nth-of-type(1) .float {
          right: 0;
          width: 170rem;
          height: 190rem;
          top: -42rem; } }
    .how__content:nth-of-type(2) .how__content-block:nth-of-type(1) {
      position: relative; }
      .how__content:nth-of-type(2) .how__content-block:nth-of-type(1) .float {
        position: absolute;
        z-index: 2; }
        @media (min-width: 751px) {
          .how__content:nth-of-type(2) .how__content-block:nth-of-type(1) .float {
            right: 30rem;
            width: 270rem;
            height: 322rem;
            top: -260rem; } }
        @media (max-width: 750px) {
          .how__content:nth-of-type(2) .how__content-block:nth-of-type(1) .float {
            right: 30rem;
            width: 180rem;
            height: 215rem;
            top: -210rem; } }
    .how__content h4 {
      color: #3ebaa2;
      line-height: 1;
      position: relative;
      display: inline-block;
      font-weight: 700; }
      @media (min-width: 751px) {
        .how__content h4 {
          margin-bottom: 150rem;
          font-size: 20rem; } }
      @media (max-width: 750px) {
        .how__content h4 {
          font-size: 26rem;
          margin-bottom: 75rem; } }
      .how__content h4:after {
        content: '';
        display: inline-block;
        background: #ebcb78;
        width: 24px;
        height: 2px;
        position: absolute;
        bottom: -20rem; }
        @media (min-width: 751px) {
          .how__content h4:after {
            left: 38rem; } }
        @media (max-width: 750px) {
          .how__content h4:after {
            left: 62rem; } }
      @media (min-width: 751px) {
        .how__content h4.position:after {
          left: 9rem; } }
      @media (max-width: 750px) {
        .how__content h4.position:after {
          left: 17rem; } }
    @media (min-width: 751px) {
      .how__content-block {
        margin-bottom: 25rem;
        text-align: left;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: flex-end; } }
    @media (max-width: 750px) {
      .how__content-block {
        text-align: center;
        margin-bottom: 40rem; } }
    @media (min-width: 751px) {
      .how__content-block .left {
        width: 400rem;
        margin-right: 70rem; } }
    @media (min-width: 751px) {
      .how__content-block .left__img {
        width: 280rem; } }
    @media (max-width: 750px) {
      .how__content-block .left__img {
        display: block;
        margin: 0 auto 10rem; } }
    .how__content-block .left div {
      display: flex;
      align-items: center;
      margin-bottom: 30rem; }
      .how__content-block .left div span {
        background: #ebcb78;
        color: #fff;
        border-radius: 15rem; }
        @media (min-width: 751px) {
          .how__content-block .left div span {
            padding: 8rem 26rem;
            font-size: 17rem;
            margin-right: 10rem; } }
        @media (max-width: 750px) {
          .how__content-block .left div span {
            padding: 8rem 15rem;
            font-size: 20rem;
            margin-right: 10rem; } }
      .how__content-block .left div h5 {
        color: #3ebaa2; }
        @media (min-width: 751px) {
          .how__content-block .left div h5 {
            font-size: 20rem; } }
        @media (max-width: 750px) {
          .how__content-block .left div h5 {
            font-size: 23rem; } }
    @media (min-width: 751px) {
      .how__content-block .left p {
        font-size: 13rem;
        padding-left: 20rem; } }
    @media (max-width: 750px) {
      .how__content-block .left p {
        text-align: left;
        font-size: 23rem; } }

.about .bg__green {
  background: #e1f9f5;
  padding: 100rem 0 110rem; }
  @media (min-width: 751px) {
    .about .bg__green {
      margin-bottom: 210rem; } }
  @media (max-width: 750px) {
    .about .bg__green {
      margin-bottom: 140rem; } }
  .about .bg__green .about__separate {
    margin: 0 auto; }
    .about .bg__green .about__separate .block__gel {
      background: #fff; }
.about .cmn__head h2 {
  margin-bottom: 160rem; }
  @media (min-width: 751px) {
    .about .cmn__head h2:after {
      left: 71rem; } }
  @media (max-width: 750px) {
    .about .cmn__head h2:after {
      left: 71rem; } }
.about .cmn__head .cmn__inner-1020 {
  position: relative; }
  .about .cmn__head .cmn__inner-1020:after {
    content: '';
    background-image: url(../images/top/about__after.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -145rem; }
    @media (min-width: 751px) {
      .about .cmn__head .cmn__inner-1020:after {
        right: 0;
        width: 202rem;
        height: 323rem; } }
    @media (max-width: 750px) {
      .about .cmn__head .cmn__inner-1020:after {
        right: 25rem;
        width: 202rem;
        height: 323rem; } }
.about__title {
  text-align: center;
  background: #3ebaa2;
  padding: 63rem 0;
  margin-bottom: 150rem; }
  .about__title h3 {
    color: #fff;
    line-height: 1;
    display: inline-block;
    position: relative;
    font-weight: 700; }
    @media (min-width: 751px) {
      .about__title h3 {
        font-size: 18rem; } }
    @media (max-width: 750px) {
      .about__title h3 {
        font-size: 30rem; } }
    .about__title h3:before {
      content: '';
      background-image: url(../images/top/gel__before.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute; }
      @media (min-width: 751px) {
        .about__title h3:before {
          top: -125rem;
          left: -210rem;
          width: 151rem;
          height: 279rem; } }
      @media (max-width: 750px) {
        .about__title h3:before {
          top: -45rem;
          left: -100rem;
          width: 100rem;
          height: 186rem; } }
.about__title1 {
  text-align: center;
  background: #3ebaa2;
  padding: 63rem 0; }
  .about__title1 h3 {
    color: #fff;
    line-height: 1;
    display: inline-block;
    position: relative;
    font-weight: 700; }
    @media (min-width: 751px) {
      .about__title1 h3 {
        font-size: 18rem;
        width: 1020rem;
        margin: 0 auto; } }
    .about__title1 h3:after {
      content: '';
      background-image: url(../images/top/gel__after.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute; }
      @media (min-width: 751px) {
        .about__title1 h3:after {
          top: -160rem;
          right: 0;
          width: 247rem;
          height: 306rem; } }
      @media (max-width: 750px) {
        .about__title1 h3:after {
          right: -160rem;
          width: 165rem;
          height: 204rem;
          top: -63rem; } }
.about__separate {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  @media (min-width: 751px) {
    .about__separate {
      margin: 0 auto 150rem; } }
  @media (max-width: 750px) {
    .about__separate {
      margin: 0 auto 140rem; } }
  .about__separate .block__gel {
    border-radius: 10rem;
    background: #e1f9f5;
    margin-bottom: 20rem; }
    @media (min-width: 751px) {
      .about__separate .block__gel {
        padding: 25rem 20rem;
        width: 480rem; } }
    @media (max-width: 750px) {
      .about__separate .block__gel {
        padding: 30rem 30rem 30rem 120rem;
        width: 100%; } }
    @media (min-width: 751px) {
      .about__separate .block__gel .img1 {
        width: 109rem;
        height: 46rem; } }
    @media (min-width: 751px) {
      .about__separate .block__gel .img2 {
        width: 84rem;
        height: 46rem; } }
    @media (min-width: 751px) {
      .about__separate .block__gel .img3 {
        width: 76rem;
        height: 34rem; } }
    @media (min-width: 751px) {
      .about__separate .block__gel .img4 {
        width: 84rem;
        height: 34rem; } }
    .about__separate .block__gel .one {
      display: flex;
      margin-bottom: 20rem;
      align-items: center; }
      .about__separate .block__gel .one span {
        color: #fff;
        font-weight: 700;
        background: #ebcb78;
        width: 60rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin-right: 20rem;
        height: 60rem; }
        @media (min-width: 751px) {
          .about__separate .block__gel .one span {
            font-size: 20rem; } }
      .about__separate .block__gel .one h4 {
        font-weight: 700;
        color: #3ebaa2;
        letter-spacing: 4rem; }
        @media (min-width: 751px) {
          .about__separate .block__gel .one h4 {
            font-size: 20rem; } }
        @media (max-width: 750px) {
          .about__separate .block__gel .one h4 {
            font-size: 30rem; } }
    .about__separate .block__gel .second {
      display: flex;
      align-items: center; }
      @media (min-width: 751px) {
        .about__separate .block__gel .second {
          padding: 0 40rem;
          justify-content: space-between; } }
      @media (max-width: 750px) {
        .about__separate .block__gel .second {
          padding: 0 50rem; } }
      @media (max-width: 750px) {
        .about__separate .block__gel .second img:nth-of-type(2) {
          margin-left: 45rem; } }

.voice {
  margin-bottom: 70rem; }
  .voice .cmn__head .cmn__inner-1020 {
    position: relative; }
    .voice .cmn__head .cmn__inner-1020:before {
      content: '';
      background-image: url(../images/top/voice__before.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: -90rem; }
      @media (min-width: 751px) {
        .voice .cmn__head .cmn__inner-1020:before {
          left: 0;
          width: 298rem;
          height: 370rem; } }
      @media (max-width: 750px) {
        .voice .cmn__head .cmn__inner-1020:before {
          left: 25rem;
          width: 198rem;
          height: 247rem; } }
    .voice .cmn__head .cmn__inner-1020 h2 {
      margin-bottom: 220rem; }
      @media (min-width: 751px) {
        .voice .cmn__head .cmn__inner-1020 h2:after {
          left: 22rem; } }
      @media (max-width: 750px) {
        .voice .cmn__head .cmn__inner-1020 h2:after {
          left: 58rem; } }
  @media (min-width: 751px) {
    .voice__first {
      width: 1130rem;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      position: relative; } }
  .voice__first img {
    width: 435rem;
    height: 264rem; }
    @media (max-width: 750px) {
      .voice__first img {
        display: block;
        margin: 0 auto 30rem; } }
  @media (min-width: 751px) {
    .voice__separate {
      width: 1130rem;
      margin: 0 auto -50rem;
      display: flex;
      justify-content: space-between;
      position: relative; } }
  .voice__separate img {
    width: 435rem;
    height: 264rem; }
    @media (max-width: 750px) {
      .voice__separate img {
        display: block;
        margin: 0 auto 30rem; } }
  .voice__main {
    text-align: center; }
    .voice__main img {
      display: block;
      width: 211rem; }
      @media (min-width: 751px) {
        .voice__main img {
          margin: -60rem auto 0; } }
      @media (max-width: 750px) {
        .voice__main img {
          margin: 0 auto 60rem; } }

  .online__main {
    text-align: center; }
    .online__main img {
      display: block;
      width: 800rem; }
      @media (min-width: 751px) {
        .online__main img {
          margin: 0 auto 60rem; } }
      @media (max-width: 750px) {
        .online__main img {
          margin: 0 auto 60rem; } }

.footer {
  background: #3ebaa2;
  padding: 25rem 0 30rem;
  text-align: center;
  color: #fff; }
  .footer ul {
    display: flex;
    justify-content: center;
    margin-bottom: 30rem; }
    .footer ul li a {
      color: #fff;
      display: inline-block; }
      @media (min-width: 751px) {
        .footer ul li a {
          font-size: 15rem;
          margin: 0 27.5rem; } }
      @media (max-width: 750px) {
        .footer ul li a {
          font-size: 25rem;
          margin: 0 25rem; } }
  .footer small {
    display: block; }
    @media (min-width: 751px) {
      .footer small {
        font-size: 15rem; } }
    @media (max-width: 750px) {
      .footer small {
        font-size: 24rem; } }

@media (min-width: 751px) {
  #detail,
  #how,
  #about,
  #voice {
    margin-top: -150rem;
    padding-top: 150rem; } }
@media (max-width: 750px) {
  #detail,
  #how,
  #about,
  #voice {
    margin-top: -250rem;
    padding-top: 250rem; } }

/*# sourceMappingURL=common.css.map */