:root {
  --clr-main: #0ABAB5; }

/*******************************
common
*******************************/
* {
  box-sizing: border-box; }

html {
  overflow-y: scroll; }

body {
  color: #333;
  word-break: break-word;
  line-height: 1.6;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem; }
  @media screen and (max-width: 1200px) {
    body {
      font-size: 1.25vw; } }
  @media screen and (max-width: 599px) {
    body {
      overflow-x: hidden;
      font-size: 4vw; } }

.sp {
  display: none; }
  @media screen and (max-width: 599px) {
    .sp {
      display: block; } }

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

img {
  vertical-align: top;
  max-width: 100%;
  height: auto; }

a {
  transition: all  0.5s ease;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none; }

a:hover {
  opacity: 0.75; }

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

button {
  outline: none; }

strong {
  font-weight: 700; }

.inner {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto; }

.inview {
  transition: all  0.5s ease;
  opacity: 0;
  transform: translate(0, -15em); }
  .inview.active {
    opacity: 1;
    transform: translate(0, 0); }

.is-inview {
  animation-name: fade-in;
  animation-duration: .8s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fade-in {
  0% {
    transform: translateY(80px); }
  100% {
    transform: translateY(0px);
    opacity: 1; } }
/*******************************
cv
*******************************/
.cv_wrap01 {
  background: #D2F2F2;
  padding: 1px 0; }
  @media screen and (max-width: 599px) {
    .cv_wrap01 {
      padding: 1px 5%; } }

.cv {
  width: 996px;
  max-width: 100%;
  margin: 8em auto 5em;
  position: relative;
  background: #FA804A;
  box-shadow: 8px 8px 10px rgba(153, 153, 153, 0.5);
  border-radius: 1.25em;
  padding: 3em 0 1.75em; }
  @media screen and (max-width: 599px) {
    .cv {
      border-radius: 1.75em;
      padding: 3em 0 1.35em;
      margin: 5em auto 3em; } }
  .cv h3 {
    text-align: center;
    font-size: 1.75em;
    border: 2px solid #FA804A;
    border-radius: 0.714em;
    padding: 0.2em 0;
    background: #fff;
    width: 27em;
    max-width: 80%;
    position: absolute;
    top: -1.5em;
    left: 50%;
    transform: translate(-50%, 0); }
    @media screen and (max-width: 599px) {
      .cv h3 {
        font-size: 1.125em;
        border-radius: 1.25em;
        padding: 0.5em 0;
        top: -2.25em;
        line-height: 1.5; } }
    .cv h3 strong {
      color: #0ABAB5; }
    .cv h3::after {
      content: "";
      position: absolute;
      top: 1.8em;
      left: 50%;
      transform: translate(-50%, 0);
      width: 0;
      height: 0;
      border-left: 0.5em solid transparent;
      border-right: 0.5em solid transparent;
      border-top: 0.5em solid #fff; }
      @media screen and (max-width: 599px) {
        .cv h3::after {
          top: 3.75em;
          border-top: 1em solid #fff; } }
  .cv .txt01 {
    color: #fff;
    text-align: center;
    font-size: 2em;
    font-weight: 700; }
    @media screen and (max-width: 599px) {
      .cv .txt01 {
        font-size: 1.6em;
        line-height: 1.4; } }
    .cv .txt01 strong {
      font-size: 1.25em; }
  .cv a {
    background: url("../img/arrow01.svg") no-repeat 90% center #fff;
    border-radius: 500px;
    padding: 0.35em 2em 0.35em 0;
    text-align: center;
    font-size: 1.75em;
    color: #333;
    box-shadow: 3px 3px 3px #B1505F;
    font-weight: 700;
    margin: 1em auto 0;
    display: flex;
    width: 21em;
    max-width: 90%;
    justify-content: center;
    align-items: center; }
    @media screen and (max-width: 599px) {
      .cv a {
        background: url("../img/arrow01.svg") no-repeat 95% center #fff;
        font-size: 1.125em;
        padding: 0.5em 2em 0.5em 0;
        margin-top: 0.75em; } }
    .cv a .icon {
      width: 2.228em;
      margin-right: 0.75em; }

/*******************************
header
*******************************/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 28.625em;
  max-width: 76.92%;
  z-index: 10; }
  header #logo a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    height: 8.5em;
    box-shadow: 3px 3px 6px rgba(153, 153, 153, 0.3);
    border-radius: 0 0 3.125em 0; }
    @media screen and (max-width: 599px) {
      header #logo a {
        border-radius: 0 500px 500px 0;
        box-shadow: 3px 3px 6px rgba(153, 153, 153, 0.75);
        height: 4em; } }
    header #logo a img {
      width: 85%; }
      @media screen and (max-width: 599px) {
        header #logo a img {
          width: 73%; } }

/*******************************
kv
*******************************/
#kv {
  position: relative; }
  #kv .inner {
    position: relative; }
  #kv .bg {
    width: 100%; }
  #kv .icon {
    position: absolute;
    top: 2em;
    right: 50%;
    transform: translate(50%, 0);
    width: 1200px;
    max-width: 90%;
    display: flex;
    justify-content: flex-end; }
    @media screen and (max-width: 599px) {
      #kv .icon {
        top: 4.5em; } }
    #kv .icon img {
      width: 17.3125em; }
      @media screen and (max-width: 599px) {
        #kv .icon img {
          width: 43%; } }
  #kv .txt_area01 {
    position: absolute;
    top: 47%;
    left: 0; }
    @media screen and (max-width: 599px) {
      #kv .txt_area01 {
        top: 33.25%; } }
    #kv .txt_area01 h1 span {
      background: #fff;
      display: flex;
      align-items: center;
      font-weight: 700;
      margin-bottom: 1em; }
      @media screen and (max-width: 599px) {
        #kv .txt_area01 h1 span {
          display: block;
          margin-bottom: 0.35em; } }
      #kv .txt_area01 h1 span.txt_area01_txt01 {
        font-size: min(1.5vw, 1.625em);
        height: 2.923em;
        overflow: hidden;
        width: 40em;
        padding-left: 30%; }
        @media screen and (max-width: 599px) {
          #kv .txt_area01 h1 span.txt_area01_txt01 {
            font-size: 1.175em;
            width: 15.5em;
            height: auto;
            padding: 0.25em 0 0em 2em; } }
        #kv .txt_area01 h1 span.txt_area01_txt01 img {
          width: 14.38em;
          margin: 0 -0.5em 0 -1.5em; }
          @media screen and (max-width: 599px) {
            #kv .txt_area01 h1 span.txt_area01_txt01 img {
              margin: -0.885em -0.8em -0.35em -2em;
              display: inline-block;
              vertical-align: middle; } }
        #kv .txt_area01 h1 span.txt_area01_txt01 strong {
          color: #01A7B0;
          font-size: 1.153em; }
      #kv .txt_area01 h1 span.txt_area01_txt02 {
        font-size: min(1.35vw, 1.4375em);
        height: 3.3em;
        width: 51em;
        padding-left: 29%; }
        @media screen and (max-width: 599px) {
          #kv .txt_area01 h1 span.txt_area01_txt02 {
            font-size: 1.08em;
            padding: 0 0 0.5em 1em;
            height: auto;
            width: 19.5em; } }
        #kv .txt_area01 h1 span.txt_area01_txt02 img {
          width: 19.34em;
          margin-right: -0.5em; }
          @media screen and (max-width: 599px) {
            #kv .txt_area01 h1 span.txt_area01_txt02 img {
              width: 18em;
              margin: -1em -0.5em -2em -1em;
              display: inline-block;
              vertical-align: baseline; } }
      #kv .txt_area01 h1 span.txt_area01_txt03 {
        font-size: min(1.35vw, 1.4375em);
        width: 38em;
        padding-left: 30%; }
        @media screen and (max-width: 599px) {
          #kv .txt_area01 h1 span.txt_area01_txt03 {
            font-size: 1em;
            padding: 0.25em 0 0.25em 1em;
            height: auto;
            width: 15em;
            line-height: 1.4; } }
        #kv .txt_area01 h1 span.txt_area01_txt03 strong {
          color: #01A7B0;
          font-size: 1.217em; }
  #kv .txt_area02 {
    position: absolute;
    bottom: 11.5%;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
    max-width: 100%; }
    @media screen and (max-width: 599px) {
      #kv .txt_area02 {
        width: 90%;
        white-space: normal;
        bottom: 1.25em; } }
    #kv .txt_area02 .txt01 {
      box-shadow: 5px 5px 0 0 #0ABAB5;
      background: #fff;
      border-radius: 1.25em;
      padding: 0.65em 1em 0.15em 1.5em; }
      @media screen and (max-width: 599px) {
        #kv .txt_area02 .txt01 {
          text-align: center;
          line-height: 1.5;
          box-shadow: 3px 3px 0 0 #0ABAB5; } }
      #kv .txt_area02 .txt01 strong {
        font-size: 2em; }
        @media screen and (max-width: 599px) {
          #kv .txt_area02 .txt01 strong {
            font-size: 1.25em; } }
        #kv .txt_area02 .txt01 strong span {
          display: inline-block;
          background: url("../img/kv_line01.png") no-repeat center 100%;
          background-size: 85% auto;
          padding-bottom: 0.35em; }
    #kv .txt_area02 .note01 {
      text-indent: -1em;
      margin-top: 2em;
      margin-left: 1em;
      font-size: 0.75em;
      text-align: center; }
      @media screen and (max-width: 599px) {
        #kv .txt_area02 .note01 {
          margin-top: 1.25em;
          text-align: left;
          line-height: 1.2; } }

/*******************************
problem
*******************************/
#problem {
  padding: 4em 0; }
  @media screen and (max-width: 599px) {
    #problem {
      padding: 1.5em 0 2.5em; } }
  #problem .inner {
    position: relative; }
  #problem .lead01 {
    text-align: center;
    font-size: 1.625em;
    font-weight: 700;
    margin-bottom: 0.25em; }
    @media screen and (max-width: 599px) {
      #problem .lead01 {
        font-size: 1.125em; } }
    #problem .lead01 strong {
      color: #0ABAB5; }
  #problem h2 {
    font-size: 3em;
    line-height: 1.5;
    margin-bottom: 0.75em;
    text-align: center; }
    @media screen and (max-width: 599px) {
      #problem h2 {
        font-size: 1.875em; } }
    #problem h2 span {
      background: linear-gradient(transparent 80%, #E9F9F8 80%); }
      #problem h2 span strong {
        color: #0ABAB5; }
  #problem .img01 {
    width: 12.5em;
    margin: 0 auto 3em;
    display: block; }
    @media screen and (max-width: 599px) {
      #problem .img01.pc {
        display: none; } }
    #problem .img01.sp {
      display: none; }
      @media screen and (max-width: 599px) {
        #problem .img01.sp {
          display: block;
          width: 100%;
          margin-bottom: 2em; } }
  @media screen and (max-width: 599px) {
    #problem .box01 {
      margin-top: 1.75em; } }
  #problem .box01 h3 {
    display: flex;
    justify-content: center;
    text-align: center;
    font-weight: 700; }
    #problem .box01 h3 .line01 {
      width: 3.5em;
      margin-right: 1.75em; }
      @media screen and (max-width: 599px) {
        #problem .box01 h3 .line01 {
          width: 2.5em;
          margin-right: 0.35em; } }
    #problem .box01 h3 .line02 {
      width: 3.5em;
      margin-left: 1.75em;
      transform: scaleX(-1); }
      @media screen and (max-width: 599px) {
        #problem .box01 h3 .line02 {
          width: 2.5em;
          margin-left: 0.15em; } }
    #problem .box01 h3 .txt01 {
      font-size: 1.5em;
      display: block; }
      @media screen and (max-width: 599px) {
        #problem .box01 h3 .txt01 {
          font-size: 1em; } }
    #problem .box01 h3 .txt02 {
      font-size: 2em; }
      @media screen and (max-width: 599px) {
        #problem .box01 h3 .txt02 {
          font-size: 1.375em; } }
      #problem .box01 h3 .txt02 strong {
        color: #0ABAB5; }
  #problem .box01 .wrap {
    display: flex;
    justify-content: space-between;
    width: 928px;
    max-width: 100%;
    margin: 3em auto 0; }
    @media screen and (max-width: 599px) {
      #problem .box01 .wrap {
        display: block;
        margin-top: 0; } }
    #problem .box01 .wrap .each {
      width: 30.55%;
      border: 2px solid #0ABAB5;
      border-radius: 0.625em; }
      @media screen and (max-width: 599px) {
        #problem .box01 .wrap .each {
          margin-top: 2em;
          width: 100%; } }
      #problem .box01 .wrap .each dt {
        background: #0ABAB5;
        color: #fff;
        display: flex;
        position: relative;
        padding: 1.25em 0 1em 7em;
        letter-spacing: 0.05em; }
        @media screen and (max-width: 599px) {
          #problem .box01 .wrap .each dt {
            padding-left: 9em; } }
        #problem .box01 .wrap .each dt .icon {
          border-radius: 100%;
          border: 2px solid #0ABAB5;
          background: #fff;
          width: 5em;
          height: 5em;
          position: absolute;
          top: -0.75em;
          left: 0.5em;
          display: flex;
          justify-content: center;
          align-items: center; }
          @media screen and (max-width: 599px) {
            #problem .box01 .wrap .each dt .icon {
              left: 1.5em; } }
          #problem .box01 .wrap .each dt .icon img {
            width: 65%; }
        #problem .box01 .wrap .each dt span {
          font-size: 1.25em;
          font-weight: 500; }
          #problem .box01 .wrap .each dt span strong {
            font-size: 1.2em;
            font-weight: 700; }
      #problem .box01 .wrap .each dd {
        padding: 2em 1.75em 1.25em; }
        @media screen and (max-width: 599px) {
          #problem .box01 .wrap .each dd {
            padding: 1.25em 0 0.5em;
            display: flex;
            justify-content: center; } }
        #problem .box01 .wrap .each dd .li01 li {
          background: url("../img/check01.svg") no-repeat 0 0.25em;
          background-size: 1em;
          padding: 0 0 0 1.5em;
          margin-bottom: 0.75em;
          line-height: 1.4; }
  #problem .circle01, #problem .circle02, #problem .circle03 {
    position: absolute;
    background: #D2F2F2;
    border-radius: 100%; }
    @media screen and (max-width: 599px) {
      #problem .circle01, #problem .circle02, #problem .circle03 {
        display: block;
        position: static;
        border-radius: 1.25em;
        padding: 1.5em 0;
        margin-top: 2em; } }
    #problem .circle01 .icon, #problem .circle02 .icon, #problem .circle03 .icon {
      height: 4em;
      width: auto;
      display: block;
      margin: 1.5em auto 0; }
      @media screen and (max-width: 599px) {
        #problem .circle01 .icon, #problem .circle02 .icon, #problem .circle03 .icon {
          height: 9vw;
          width: auto;
          display: block;
          margin: -2.5em auto 0; } }
    #problem .circle01 dl, #problem .circle02 dl, #problem .circle03 dl {
      margin-top: 1em; }
      @media screen and (max-width: 599px) {
        #problem .circle01 dl, #problem .circle02 dl, #problem .circle03 dl {
          margin-top: 0.65em; } }
      #problem .circle01 dl dt, #problem .circle02 dl dt, #problem .circle03 dl dt {
        font-weight: 700;
        text-align: center;
        font-size: 1.5em; }
        @media screen and (max-width: 599px) {
          #problem .circle01 dl dt, #problem .circle02 dl dt, #problem .circle03 dl dt {
            font-size: 1.375em; } }
        #problem .circle01 dl dt span, #problem .circle02 dl dt span, #problem .circle03 dl dt span {
          background: linear-gradient(transparent 70%, #fff 70%); }
      #problem .circle01 dl dd, #problem .circle02 dl dd, #problem .circle03 dl dd {
        margin-top: 1em;
        font-weight: 500;
        font-size: 1.25em;
        text-align: center;
        line-height: 1.45; }
        @media screen and (max-width: 599px) {
          #problem .circle01 dl dd, #problem .circle02 dl dd, #problem .circle03 dl dd {
            font-size: 1.08em; } }
  #problem .circle01 {
    width: 18.375em;
    height: 18.375em;
    top: 0;
    left: 7%; }
    @media screen and (max-width: 599px) {
      #problem .circle01 {
        width: 100%;
        height: auto; } }
  #problem .circle02 {
    width: 18.375em;
    height: 18.375em;
    top: 21em;
    left: 1%; }
    @media screen and (max-width: 599px) {
      #problem .circle02 {
        width: 100%;
        height: auto; } }
  #problem .circle03 {
    width: 22.75em;
    height: 22.75em;
    top: 4em;
    right: 1%; }
    @media screen and (max-width: 599px) {
      #problem .circle03 {
        width: 100%;
        height: auto; } }
  #problem .baloon01 {
    position: absolute;
    top: 15em;
    left: 30%;
    width: 5.47em; }
  #problem .baloon02 {
    position: absolute;
    top: 26em;
    left: 27%;
    width: 5.91em; }
  #problem .baloon03 {
    position: absolute;
    top: 23.5em;
    right: 28%;
    width: 10em; }

/*******************************
reason
*******************************/
#reason {
  background: #F4F4D7;
  padding: 7em 0 1px;
  position: relative; }
  @media screen and (max-width: 599px) {
    #reason {
      padding: 3em 0 1px; } }
  #reason::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 6em solid transparent;
    border-right: 6em solid transparent;
    border-top: 5em solid #fff; }
    @media screen and (max-width: 599px) {
      #reason::after {
        border-left: 2em solid transparent;
        border-right: 2em solid transparent;
        border-top: 2em solid #fff; } }
  #reason h2 {
    text-align: center;
    margin-bottom: 2em; }
    @media screen and (max-width: 599px) {
      #reason h2 {
        margin-bottom: 1.5em; } }
    #reason h2 span {
      border-bottom: 5px solid #BEAF73;
      font-size: 1.875em;
      padding-bottom: 0.15em; }
      @media screen and (max-width: 599px) {
        #reason h2 span {
          font-size: 1.25em;
          border-bottom: 3px solid #BEAF73; } }
      #reason h2 span strong {
        font-size: 1.2em;
        color: #0ABAB5; }
  #reason .lead {
    text-align: center;
    margin-bottom: 2.5em; }
    @media screen and (max-width: 599px) {
      #reason .lead {
        margin-bottom: 1.25em;
        text-align: left; } }
  #reason .box01 {
    background: #fff;
    border-radius: 1.25em;
    padding: 1.5em 2.5em 1.75em;
    box-shadow: 5px 5px 0 0 rgba(10, 186, 181, 0.5);
    display: flex;
    justify-content: space-between;
    width: 832px;
    max-width: 100%;
    margin: 0 auto 2.5em; }
    @media screen and (max-width: 599px) {
      #reason .box01 {
        padding: 1.25em 1em 1.5em;
        display: block;
        position: relative; } }
    #reason .box01 .number {
      width: 14.54%; }
      @media screen and (max-width: 599px) {
        #reason .box01 .number {
          position: absolute;
          width: 4.25em;
          top: 1em;
          left: 1em; } }
    #reason .box01 section {
      width: 82%; }
      @media screen and (max-width: 599px) {
        #reason .box01 section {
          width: 100%; } }
      #reason .box01 section h3 {
        font-size: 1.5em;
        border-bottom: 1px solid #0ABAB5;
        padding-bottom: 0.5em;
        margin-bottom: 0.5em; }
        @media screen and (max-width: 599px) {
          #reason .box01 section h3 {
            display: flex;
            padding-left: 4em;
            font-size: 1.25em;
            line-height: 1.4;
            padding-bottom: 1em;
            margin-bottom: 1em; } }
        #reason .box01 section h3 span {
          position: relative;
          display: inline-block; }
          @media screen and (max-width: 599px) {
            #reason .box01 section h3 span {
              display: flex;
              align-items: flex-start; } }
          #reason .box01 section h3 span .icon01 {
            position: absolute;
            right: -4em;
            top: -1.6em;
            width: 3.35em; }
            @media screen and (max-width: 599px) {
              #reason .box01 section h3 span .icon01 {
                right: 0;
                position: static;
                margin: -0.5em 0 0 1em; } }
          #reason .box01 section h3 span .icon02 {
            position: absolute;
            right: -5em;
            top: -1.8em;
            width: 4.66em; }
            @media screen and (max-width: 599px) {
              #reason .box01 section h3 span .icon02 {
                position: static;
                width: 4em;
                margin: -1.25em -2em 0 0; } }
          #reason .box01 section h3 span .icon03 {
            position: absolute;
            right: -4.5em;
            top: -2.25em;
            width: 3.7em; }
            @media screen and (max-width: 599px) {
              #reason .box01 section h3 span .icon03 {
                position: static;
                width: 3em;
                margin: -1em 0 0 1em; } }
      @media screen and (max-width: 599px) {
        #reason .box01 section p {
          font-size: 93.75%;
          padding: 0 0.5em; } }

/*******************************
point
*******************************/
#point {
  background: #0ABAB5;
  padding: 5em 0 4em;
  position: relative;
  overflow: hidden; }
  @media screen and (max-width: 599px) {
    #point {
      padding: 4.75em 0 2em; } }
  #point .txt01 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 19em; }
    @media screen and (max-width: 599px) {
      #point .txt01 {
        top: -0.75em; } }
  #point h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 1em; }
    @media screen and (max-width: 599px) {
      #point h2 {
        font-size: 1.5em; } }
    #point h2 span {
      border-bottom: 5px solid #fff;
      padding-bottom: 0.15em; }
    #point h2 strong {
      font-size: 1.875em;
      color: #fff; }
  #point .wrap {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    display: flex; }
    @media screen and (max-width: 599px) {
      #point .wrap {
        flex-wrap: wrap;
        justify-content: center; } }
    #point .wrap .each {
      width: 29%;
      margin: 0 2.5%;
      position: relative; }
      @media screen and (max-width: 599px) {
        #point .wrap .each {
          width: 47.14%; } }
      @media screen and (max-width: 599px) {
        #point .wrap .each:nth-child(1) {
          margin: 1.125em 15% 0; } }
      @media screen and (max-width: 599px) {
        #point .wrap .each:nth-child(2) {
          margin: 3em 5% 0 0; } }
      @media screen and (max-width: 599px) {
        #point .wrap .each:nth-child(3) {
          margin: 3em 0 0; } }
      #point .wrap .each a {
        padding: 5em 0 3em;
        display: flex;
        justify-content: center;
        border-radius: 1.25em;
        background: #fff;
        box-shadow: 4px 4px 0 #077E7A; }
        @media screen and (max-width: 599px) {
          #point .wrap .each a {
            padding-top: 2.75em; } }
      #point .wrap .each .number {
        position: absolute;
        width: 5em;
        top: -0.6em;
        left: 50%;
        transform: translate(-50%, 0); }
        @media screen and (max-width: 599px) {
          #point .wrap .each .number {
            width: 3.35em;
            top: -1.5em; } }
      #point .wrap .each p {
        text-align: center;
        font-size: 1.875em;
        font-weight: 700;
        line-height: 1.4; }
        @media screen and (max-width: 599px) {
          #point .wrap .each p {
            font-size: 1.25em; } }
      #point .wrap .each .arrow {
        position: absolute;
        width: 1.875em;
        bottom: 0.5em;
        left: 50%;
        transform: translate(-50%, 0); }

#point01 .title, #point02 .title, #point03 .title {
  padding: 5em 0 3em;
  position: relative; }
  @media screen and (max-width: 599px) {
    #point01 .title, #point02 .title, #point03 .title {
      padding: 1.25em 0 0.5em; } }
  #point01 .title h2, #point02 .title h2, #point03 .title h2 {
    text-align: center;
    font-size: 2.25em;
    position: relative;
    letter-spacing: 0.05em;
    margin-bottom: 1.5em; }
    @media screen and (max-width: 599px) {
      #point01 .title h2, #point02 .title h2, #point03 .title h2 {
        font-size: 1.5em;
        margin-bottom: 1em; } }
    #point01 .title h2 span, #point02 .title h2 span, #point03 .title h2 span {
      position: relative; }
    #point01 .title h2 .icon, #point02 .title h2 .icon, #point03 .title h2 .icon {
      position: absolute;
      top: 50%;
      left: -3em;
      transform: translate(0, -50%);
      width: 2.217em; }
      @media screen and (max-width: 599px) {
        #point01 .title h2 .icon, #point02 .title h2 .icon, #point03 .title h2 .icon {
          position: static;
          display: block;
          margin: 0 auto 0.5em;
          transform: none;
          width: 2.25em; } }
    #point01 .title h2::after, #point02 .title h2::after, #point03 .title h2::after {
      content: "";
      width: 50px;
      height: 3px;
      background: #0ABAB5;
      position: absolute;
      bottom: -0.75em;
      left: 50%;
      transform: translate(-50%, 0); }
      @media screen and (max-width: 599px) {
        #point01 .title h2::after, #point02 .title h2::after, #point03 .title h2::after {
          position: static;
          display: block;
          margin: 0.75em auto 0;
          transform: none;
          width: 1.5em; } }
  #point01 .title .txt01, #point02 .title .txt01, #point03 .title .txt01 {
    text-align: center;
    line-height: 1.75;
    margin-bottom: 1.5em; }
    @media screen and (max-width: 599px) {
      #point01 .title .txt01, #point02 .title .txt01, #point03 .title .txt01 {
        text-align: left;
        font-feature-settings: "palt"; } }
  #point01 .title .note01, #point02 .title .note01, #point03 .title .note01 {
    text-align: center;
    font-size: 75%; }
    @media screen and (max-width: 599px) {
      #point01 .title .note01, #point02 .title .note01, #point03 .title .note01 {
        text-align: left; } }

#point01 .title {
  padding-bottom: 6em; }
  @media screen and (max-width: 599px) {
    #point01 .title {
      padding-bottom: 2em; } }
  #point01 .title .icon01 {
    width: 12.375em;
    position: absolute;
    top: 2.5em;
    right: 4%; }
    @media screen and (max-width: 599px) {
      #point01 .title .icon01 {
        position: static;
        width: 40%;
        margin: 0 auto 1.5em; } }
#point01 .box01 {
  padding: 5em 0 1em;
  background: #D2F2F2;
  border-top: 8px solid #0ABAB5; }
  @media screen and (max-width: 599px) {
    #point01 .box01 {
      border-top: 6px solid #0ABAB5; } }
  #point01 .box01 .inner {
    width: 835px;
    max-width: 90%; }
    #point01 .box01 .inner section {
      position: relative;
      margin-bottom: 4em; }
      #point01 .box01 .inner section h3 {
        position: absolute;
        top: 0;
        left: 2em;
        height: 4.3125em; }
        @media screen and (max-width: 599px) {
          #point01 .box01 .inner section h3 {
            top: -3.5em;
            left: 0;
            height: 3em; } }
        #point01 .box01 .inner section h3.h302 {
          top: -0.5em;
          left: 0; }
          @media screen and (max-width: 599px) {
            #point01 .box01 .inner section h3.h302 {
              top: -2.85em; } }
        #point01 .box01 .inner section h3 img {
          height: 100%; }
      #point01 .box01 .inner section .note01 {
        font-size: 87.5%;
        text-align: right;
        margin-right: 1em;
        margin-bottom: 0.5em; }
        @media screen and (max-width: 599px) {
          #point01 .box01 .inner section .note01 {
            font-size: 85%;
            margin-right: -0.5em;
            margin-bottom: 0.25em; } }
      #point01 .box01 .inner section .table01 {
        width: 690px;
        max-width: 100%;
        margin: 0 auto; }
      #point01 .box01 .inner section .table02 {
        width: 792px;
        max-width: 100%;
        margin: 0 auto; }
      #point01 .box01 .inner section .note02 {
        width: 700px;
        max-width: 100%;
        margin: 2em auto 0; }
        @media screen and (max-width: 599px) {
          #point01 .box01 .inner section .note02 {
            margin: 1.25em auto -3em; } }
        #point01 .box01 .inner section .note02 li {
          font-size: 87.5%;
          text-indent: -1em;
          margin-left: 1em; }
          @media screen and (max-width: 599px) {
            #point01 .box01 .inner section .note02 li {
              font-size: 85%;
              line-height: 1.4; } }
#point01 .flow {
  padding: 5em;
  background: url("../img/bg01.png") repeat #D2F2F2;
  background-size: 2.5em; }
  @media screen and (max-width: 599px) {
    #point01 .flow {
      padding: 2em 0;
      background: url(../img/bg01.png) repeat #D2F2F2;
      background-size: 1.1em; } }
  #point01 .flow .inner {
    width: 1000px;
    max-width: 90%;
    padding: 5em 0 2em;
    background: #fff;
    border-radius: 1.875em;
    position: relative;
    text-align: center; }
    @media screen and (max-width: 599px) {
      #point01 .flow .inner {
        padding: 1.25em 1.25em 2em;
        border-radius: 1em; } }
    #point01 .flow .inner h3 {
      position: relative;
      text-align: center;
      font-weight: 700;
      display: inline-block;
      letter-spacing: 0.1em; }
      @media screen and (max-width: 599px) {
        #point01 .flow .inner h3 {
          display: block;
          position: static; } }
      #point01 .flow .inner h3 .icon {
        position: absolute;
        width: 7.625em;
        top: -1.25em;
        left: -9em; }
        @media screen and (max-width: 599px) {
          #point01 .flow .inner h3 .icon {
            width: 26%;
            top: -2em;
            left: 0; } }
      #point01 .flow .inner h3 .txt01 {
        font-size: 2.125em;
        background: linear-gradient(transparent 70%, #E9F9F8 70%); }
        @media screen and (max-width: 599px) {
          #point01 .flow .inner h3 .txt01 {
            font-size: 1.6em; } }
      #point01 .flow .inner h3 .txt02 {
        font-size: 1.5em; }
        @media screen and (max-width: 599px) {
          #point01 .flow .inner h3 .txt02 {
            font-size: 1em; } }
        #point01 .flow .inner h3 .txt02 strong {
          color: #0ABAB5;
          font-size: 1.1em; }
    #point01 .flow .inner .icon01 {
      position: absolute;
      top: 3em;
      right: 7%;
      width: 15.6875em; }
      @media screen and (max-width: 599px) {
        #point01 .flow .inner .icon01 {
          top: -3.25em;
          right: -1em;
          width: 8em; } }
    #point01 .flow .inner .img01 {
      width: 758px;
      max-width: 100%;
      margin: 3em auto 0; }
      @media screen and (max-width: 599px) {
        #point01 .flow .inner .img01 {
          margin-top: 1em; } }

#point02 .box01 {
  padding: 5em 0 1em;
  background: #D2F2F2;
  border-top: 8px solid #0ABAB5; }
  @media screen and (max-width: 599px) {
    #point02 .box01 {
      border-top: 6px solid #0ABAB5;
      padding: 2em 0 1em; } }
  #point02 .box01 .wrap {
    width: 1000px;
    max-width: 90%;
    display: flex;
    flex-wrap: wrap; }
    @media screen and (max-width: 599px) {
      #point02 .box01 .wrap {
        display: block; } }
    #point02 .box01 .wrap .each {
      width: 28.3%;
      margin: 0 2.5% 3.25em;
      border-radius: 1.25em;
      overflow: hidden;
      padding-top: 2.5em;
      position: relative;
      background: #fff; }
      @media screen and (max-width: 599px) {
        #point02 .box01 .wrap .each {
          width: 100%;
          margin: 0 0 1.25em;
          border-radius: 1.5em;
          padding-top: 2em; } }
      #point02 .box01 .wrap .each .number {
        position: absolute;
        top: 0;
        left: 0; }
        @media screen and (max-width: 599px) {
          #point02 .box01 .wrap .each .number {
            width: 3.5em; } }
      #point02 .box01 .wrap .each dl {
        margin-bottom: 1.25em; }
        #point02 .box01 .wrap .each dl dt {
          font-size: 1.125em;
          line-height: 1.55;
          color: #0ABAB5;
          text-align: center;
          font-weight: 700;
          margin-bottom: 0.75em; }
          @media screen and (max-width: 599px) {
            #point02 .box01 .wrap .each dl dt {
              font-size: 1.35em;
              line-height: 1.4; } }
        #point02 .box01 .wrap .each dl dd {
          font-size: 0.875em;
          padding: 0 1.125em; }
      #point02 .box01 .wrap .each .img {
        height: 10.5em;
        overflow: hidden; }
        @media screen and (max-width: 599px) {
          #point02 .box01 .wrap .each .img {
            height: 9.5em; } }
        #point02 .box01 .wrap .each .img .img01 {
          margin-top: -4em; }
          @media screen and (max-width: 599px) {
            #point02 .box01 .wrap .each .img .img01 {
              margin-top: -10em; } }
        @media screen and (max-width: 599px) {
          #point02 .box01 .wrap .each .img img {
            margin-top: -2em; } }

@media screen and (max-width: 599px) {
  #point03 .title h2 {
    letter-spacing: 0; } }
#point03 .box01 {
  padding: 5em 0 1em;
  background: #D2F2F2;
  border-top: 8px solid #0ABAB5; }
  @media screen and (max-width: 599px) {
    #point03 .box01 {
      border-top: 5px solid #0ABAB5;
      padding: 2em 0 1em; } }
  #point03 .box01 .inner {
    width: 1000px; }
    #point03 .box01 .inner .each dl dt {
      border-radius: 1.25em 1.25em 0 0;
      background: #0ABAB5;
      color: #fff;
      font-size: 1.5em;
      font-weight: 700;
      padding: 0.75em 0;
      text-align: center; }
      @media screen and (max-width: 599px) {
        #point03 .box01 .inner .each dl dt {
          font-size: 1.25em;
          padding: 1.25em 0; } }
    #point03 .box01 .inner .each dl dd {
      border-radius: 0 0 1.25em 1.25em;
      padding: 2.5em 0;
      font-weight: 500;
      text-align: center;
      line-height: 1.8;
      background: #fff; }
      @media screen and (max-width: 599px) {
        #point03 .box01 .inner .each dl dd {
          border-radius: 0 0 1.125em 1.125em;
          padding: 1.4em 6%;
          text-align: left; } }
    #point03 .box01 .inner .each.w01 {
      position: relative;
      margin-bottom: 3em; }
      @media screen and (max-width: 599px) {
        #point03 .box01 .inner .each.w01 {
          margin-bottom: 0; } }
      #point03 .box01 .inner .each.w01 dl dt {
        font-size: 1.75em; }
        @media screen and (max-width: 599px) {
          #point03 .box01 .inner .each.w01 dl dt {
            font-size: 1.35em;
            padding: 1.125em 0; } }
      #point03 .box01 .inner .each.w01 dl dt div, #point03 .box01 .inner .each.w01 dl dd div {
        width: 60%; }
        @media screen and (max-width: 599px) {
          #point03 .box01 .inner .each.w01 dl dt div, #point03 .box01 .inner .each.w01 dl dd div {
            width: 100%; } }
      #point03 .box01 .inner .each.w01 .img01 {
        position: absolute;
        width: 23.25em;
        top: -2em;
        right: 2.5em; }
        @media screen and (max-width: 599px) {
          #point03 .box01 .inner .each.w01 .img01 {
            position: static;
            margin-bottom: 1em; } }
  #point03 .box01 .wrap {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 599px) {
      #point03 .box01 .wrap {
        display: block; } }
    #point03 .box01 .wrap .each {
      width: 48%; }
      @media screen and (max-width: 599px) {
        #point03 .box01 .wrap .each {
          width: 100%;
          margin-top: 1.5em; } }
  #point03 .box01 .arrow01 {
    display: block;
    width: 6.4375em;
    margin: 2em auto 0.5em; }
    @media screen and (max-width: 599px) {
      #point03 .box01 .arrow01 {
        width: 5em;
        margin-top: 1em; } }
#point03 .box02 {
  background: url("../img/bg03.png") repeat #0ABAB5;
  background-size: 80em; }
  @media screen and (max-width: 599px) {
    #point03 .box02 {
      background: url("../img/bg03.png") repeat #0ABAB5;
      background-size: 40em; } }
  #point03 .box02 .inner {
    text-align: center;
    position: relative;
    padding: 5em 0 2em; }
    @media screen and (max-width: 599px) {
      #point03 .box02 .inner {
        padding: 4.5em 0 0; } }
    #point03 .box02 .inner dt {
      font-size: 1.5em;
      color: #fff;
      letter-spacing: 0.08em;
      font-weight: 700;
      position: relative;
      display: inline-block;
      margin-bottom: 0.25em; }
      @media screen and (max-width: 599px) {
        #point03 .box02 .inner dt {
          font-size: 1.35em;
          position: static;
          margin-bottom: 0.75em; } }
      #point03 .box02 .inner dt .txt01 {
        position: absolute;
        top: -2em;
        left: -5em;
        width: 9.58em; }
        @media screen and (max-width: 599px) {
          #point03 .box02 .inner dt .txt01 {
            top: 1em;
            left: 0;
            width: 11em; } }
    #point03 .box02 .inner dd {
      font-size: 1.75em;
      color: #FFFF88;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      font-weight: 700; }
      @media screen and (max-width: 599px) {
        #point03 .box02 .inner dd {
          font-size: 1.5em; } }
      #point03 .box02 .inner dd .txt02 {
        width: 10.1em;
        margin-left: 0.35em; }
    #point03 .box02 .inner .note01 {
      font-size: 87.5%;
      font-weight: 500;
      color: #fff;
      text-align: center;
      margin-top: 0.75em; }
      @media screen and (max-width: 599px) {
        #point03 .box02 .inner .note01 {
          font-size: 75%;
          margin-top: 1em; } }
    #point03 .box02 .inner .img01 {
      position: absolute;
      width: 21.25em;
      bottom: 0;
      left: 1.25em; }
      @media screen and (max-width: 599px) {
        #point03 .box02 .inner .img01 {
          position: static;
          width: 88.28%;
          margin: 0 auto; } }
    #point03 .box02 .inner .img02 {
      position: absolute;
      width: 21.47em;
      bottom: 0;
      right: 3em; }
      @media screen and (max-width: 599px) {
        #point03 .box02 .inner .img02 {
          width: 100%;
          bottom: auto;
          right: 0;
          top: 2em; } }

/*******************************
voice
*******************************/
#voice {
  padding: 5em 0;
  overflow: hidden; }
  @media screen and (max-width: 599px) {
    #voice {
      padding: 2em 0 5em; } }
  #voice h2 {
    font-size: 1.875em;
    position: relative;
    text-align: center;
    margin-bottom: 2em; }
    @media screen and (max-width: 599px) {
      #voice h2 {
        font-size: 1.25em;
        line-height: 1.4;
        text-align: left;
        border-bottom: 3px solid #BEAF73;
        padding: 0 0 0.15em;
        display: flex;
        align-items: flex-start;
        margin: 0 5%; } }
    #voice h2 span {
      border-bottom: 5px solid #BEAF73;
      padding: 0 0 0.15em; }
      @media screen and (max-width: 599px) {
        #voice h2 span {
          display: block;
          padding: 0;
          border: none; } }
    #voice h2 .icon {
      position: absolute;
      top: -0.25em;
      left: 50%;
      transform: translate(-13em, 0);
      width: 2em; }
      @media screen and (max-width: 599px) {
        #voice h2 .icon {
          position: static;
          transform: none;
          width: 2.45em;
          margin-right: 0.65em; } }
    #voice h2 strong {
      font-size: 1.2em;
      color: #0ABAB5; }
  #voice .box01 {
    position: relative; }
    #voice .box01.odd {
      background: linear-gradient(90deg, #E9F9F8 0%, #E9F9F8 50%, transparent 50%, transparent 100%); }
      @media screen and (max-width: 599px) {
        #voice .box01.odd {
          background: none; } }
      #voice .box01.odd .inner {
        border-radius: 0 1000px 1000px 0;
        padding: 2em 0; }
        #voice .box01.odd .inner .img01 {
          width: 32%;
          margin-top: -3em; }
          @media screen and (max-width: 599px) {
            #voice .box01.odd .inner .img01 {
              position: absolute;
              top: 2.5em;
              right: 5%;
              width: 37%; } }
      #voice .box01.odd .bg01 {
        border-radius: 0 1000px 1000px 0;
        height: 108%;
        top: 2em;
        left: -2%; }
        @media screen and (max-width: 599px) {
          #voice .box01.odd .bg01 {
            position: absolute;
            top: 1.5em;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: -2;
            width: 150vw;
            right: auto;
            border-radius: 0; } }
      @media screen and (max-width: 599px) {
        #voice .box01.odd .bg02 {
          background: #E9F9F8;
          height: 110%;
          width: 150vw;
          border-radius: 100%;
          position: absolute;
          top: -1.5em;
          left: 50%;
          transform: translate(-50%, 0);
          z-index: -1; } }
    #voice .box01.even {
      background: linear-gradient(90deg, transparent 0%, transparent 50%, #E9F9F8 50%, #E9F9F8 100%);
      margin-top: 7em; }
      @media screen and (max-width: 599px) {
        #voice .box01.even {
          background: none;
          margin-top: 2em; } }
      #voice .box01.even .inner {
        border-radius: 1000px 0 0 1000px;
        flex-direction: row-reverse;
        padding: 4em 0 2em; }
        @media screen and (max-width: 599px) {
          #voice .box01.even .inner section h3 {
            padding-left: 32%;
            font-feature-settings: "palt"; } }
        #voice .box01.even .inner section .name {
          text-align: right; }
          @media screen and (max-width: 599px) {
            #voice .box01.even .inner section .name {
              text-align: left; } }
        #voice .box01.even .inner .img01 {
          width: 25%;
          margin-top: -2em;
          margin-right: 4%; }
          @media screen and (max-width: 599px) {
            #voice .box01.even .inner .img01 {
              position: absolute;
              top: 3.5em;
              left: 2%;
              width: 30%; } }
      #voice .box01.even .bg01 {
        border-radius: 1000px 0 0 1000px;
        right: -8%;
        height: 100%;
        top: 4em; }
        @media screen and (max-width: 599px) {
          #voice .box01.even .bg01 {
            position: absolute;
            top: 5em;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: -2;
            width: 160vw;
            right: auto;
            border-radius: 0; } }
      @media screen and (max-width: 599px) {
        #voice .box01.even .bg02 {
          background: #E9F9F8;
          height: 100%;
          width: 150vw;
          border-radius: 100%;
          position: absolute;
          top: 2.5em;
          left: 50%;
          transform: translate(-50%, 0);
          z-index: -1; } }
    #voice .box01 .inner {
      display: flex;
      align-items: flex-start;
      background: #E9F9F8; }
      @media screen and (max-width: 599px) {
        #voice .box01 .inner {
          background: transparent;
          margin-top: 2.5em; } }
      #voice .box01 .inner section {
        width: 54.16%; }
        @media screen and (max-width: 599px) {
          #voice .box01 .inner section {
            width: 100%; } }
        #voice .box01 .inner section h3 {
          color: #0ABAB5;
          font-weight: 700;
          line-height: 1.45;
          margin-bottom: 1em;
          font-size: 1.5em; }
          @media screen and (max-width: 599px) {
            #voice .box01 .inner section h3 {
              font-size: 1.35em; } }
        #voice .box01 .inner section p {
          line-height: 1.8; }
        #voice .box01 .inner section .name {
          color: #0ABAB5;
          font-size: 0.875em;
          font-weight: 500;
          margin-top: 1em; }
          #voice .box01 .inner section .name strong {
            font-size: 1.1428em;
            font-weight: 500; }
    #voice .box01 .bg01 {
      position: absolute;
      z-index: -1;
      max-width: 1000%; }

/*******************************
faq
*******************************/
#faq {
  padding: 5em 0; }
  @media screen and (max-width: 599px) {
    #faq {
      padding: 2.5em 0 0; } }
  #faq h2 {
    font-size: 2.25em;
    position: relative;
    text-align: center; }
    @media screen and (max-width: 599px) {
      #faq h2 {
        font-size: 1.6em; } }
    #faq h2 span {
      border-bottom: 5px solid #BEAF73;
      padding: 0 0.5em 0.15em; }
      @media screen and (max-width: 599px) {
        #faq h2 span {
          border-bottom: 3px solid #BEAF73;
          padding: 0 0 0.15em; } }
    #faq h2 .icon {
      position: absolute;
      top: -0.5em;
      right: 50%;
      transform: translate(7em, 0);
      width: 2.83em; }
      @media screen and (max-width: 599px) {
        #faq h2 .icon {
          right: 1em;
          transform: none;
          width: 2.5em; } }
  #faq .wrap {
    padding-top: 3em; }
    @media screen and (max-width: 599px) {
      #faq .wrap {
        padding-top: 1em; } }
    #faq .wrap dl {
      border-radius: 1.25em;
      overflow: hidden;
      margin-top: 2em; }
      @media screen and (max-width: 599px) {
        #faq .wrap dl {
          margin-top: 1.25em; } }
      #faq .wrap dl dt {
        background: #0ABAB5;
        color: #fff;
        padding: 1.25em 1.75em;
        display: flex;
        align-items: center;
        position: relative;
        transition: all  0.5s ease;
        cursor: pointer; }
        @media screen and (max-width: 599px) {
          #faq .wrap dl dt {
            padding: 1em 1em; } }
        #faq .wrap dl dt:hover {
          opacity: 0.75; }
        #faq .wrap dl dt .q {
          width: 2em;
          height: auto;
          margin-right: 1.5em; }
          @media screen and (max-width: 599px) {
            #faq .wrap dl dt .q {
              width: 1.75em;
              margin-right: 1em; } }
        #faq .wrap dl dt .txt {
          font-size: 1.25em;
          font-weight: 700; }
          @media screen and (max-width: 599px) {
            #faq .wrap dl dt .txt {
              font-size: 1.125em;
              line-height: 1.4; } }
        #faq .wrap dl dt .open, #faq .wrap dl dt .close {
          background: #FFFFFF;
          width: 1.8em;
          height: 1.8em;
          border-radius: 100%;
          color: #BEAF73;
          position: absolute;
          top: 50%;
          right: 1em;
          transform: translate(0, -50%);
          display: flex;
          justify-content: center;
          align-items: center; }
      #faq .wrap dl dd {
        background: #F4F4D7;
        padding: 2.5em 1.75em;
        display: none; }
        @media screen and (max-width: 599px) {
          #faq .wrap dl dd {
            padding: 0.5em 1em 1.25em; } }
        #faq .wrap dl dd div {
          display: flex; }
          @media screen and (max-width: 599px) {
            #faq .wrap dl dd div {
              display: block; } }
          @media screen and (max-width: 599px) {
            #faq .wrap dl dd div br {
              display: none; } }
        #faq .wrap dl dd .a {
          margin-right: 1.75em; }
          @media screen and (max-width: 599px) {
            #faq .wrap dl dd .a {
              display: block;
              width: 1.5em;
              margin-right: 0; } }
  @media screen and (max-width: 599px) {
    #faq .cv {
      width: 90%; } }

/*******************************
about
*******************************/
#about {
  padding: 5em 0 3.25em;
  background: #E9F9F8;
  position: relative; }
  @media screen and (max-width: 599px) {
    #about {
      padding: 1.75em 0 0.1em; } }
  #about h2 {
    text-align: center;
    color: #0ABAB5;
    font-size: 2.5em;
    position: relative;
    z-index: 2;
    margin-bottom: 2.25em; }
    @media screen and (max-width: 599px) {
      #about h2 {
        font-size: 1.6em;
        margin-bottom: 1.25em; } }
    #about h2 span {
      line-height: 1.8;
      border-bottom: 5px solid #BEAF73; }
  #about .txt01 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    width: 44.625em;
    max-width: 100%; }
    @media screen and (max-width: 599px) {
      #about .txt01 {
        width: 85%; } }
    #about .txt01 img {
      width: 100%; }
  #about .txt03 {
    font-size: 1.875em;
    text-align: center; }
    @media screen and (max-width: 599px) {
      #about .txt03 {
        font-size: 1.35em; } }
    #about .txt03 span {
      color: #fff;
      background: #0ABAB5;
      padding: 0.25em 2em;
      display: inline-block;
      box-shadow: 0.15em 0.15em 0 0 #fff; }
      @media screen and (max-width: 599px) {
        #about .txt03 span {
          padding: 0.25em 0.65em; } }
  #about .txt02 {
    font-size: 1.125em;
    line-height: 1.8;
    text-align: center;
    margin-top: 1em; }
    @media screen and (max-width: 599px) {
      #about .txt02 {
        font-size: 1em;
        font-weight: 500; } }
  #about .wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 2.5em; }
    @media screen and (max-width: 599px) {
      #about .wrap {
        display: block;
        margin-top: 1.75em; } }
    #about .wrap h3 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -70%);
      width: 16.75em;
      max-width: 100%; }
      @media screen and (max-width: 599px) {
        #about .wrap h3 {
          position: static;
          transform: none;
          width: 100%; } }
    #about .wrap .each_wrap {
      width: 41.5%; }
      @media screen and (max-width: 599px) {
        #about .wrap .each_wrap {
          width: 100%; } }
      #about .wrap .each_wrap.odd .each h4 {
        float: right; }
        @media screen and (max-width: 599px) {
          #about .wrap .each_wrap.odd .each h4 {
            float: none; } }
      #about .wrap .each_wrap.even .each .wrap01 {
        flex-direction: row-reverse; }
    #about .wrap .each {
      margin-bottom: 1.75em;
      position: relative;
      z-index: 2; }
      #about .wrap .each h4 {
        background: #BEAF73;
        color: #fff;
        font-size: 1.3125em;
        border-radius: 0.5em;
        margin-bottom: 0.5em;
        width: 7.5em;
        text-align: center;
        padding: 0.15em 0; }
        @media screen and (max-width: 599px) {
          #about .wrap .each h4 {
            width: 100%;
            font-size: 1.2em;
            border-radius: 0;
            margin-bottom: 1.125em;
            padding: 0.1em 0; } }
      #about .wrap .each .wrap01 {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        clear: both; }
        @media screen and (max-width: 599px) {
          #about .wrap .each .wrap01 {
            flex-direction: row-reverse; } }
        #about .wrap .each .wrap01 .img {
          width: 35.74%;
          border-radius: 0.625em;
          overflow: hidden; }
          @media screen and (max-width: 599px) {
            #about .wrap .each .wrap01 .img {
              width: 36.28%;
              height: 6em;
              border-radius: 0; } }
          #about .wrap .each .wrap01 .img img {
            transform: scale(1.5); }
        #about .wrap .each .wrap01 .txt {
          width: 60.24%;
          line-height: 1.75;
          min-height: 11em; }
          @media screen and (max-width: 599px) {
            #about .wrap .each .wrap01 .txt {
              line-height: 1.7;
              min-height: 0;
              font-size: 90%; } }

/*******************************
movie
*******************************/
#movie {
  padding: 5em 0;
  background: url("../img/bg02.png") repeat #E9F9F8; }
  @media screen and (max-width: 599px) {
    #movie {
      padding: 2em 0;
      background: url(../img/bg02.png) repeat #E9F9F8;
      background-size: 40em; } }
  #movie .inner {
    width: 56.25em;
    background: #fff;
    border-radius: 1em;
    padding: 2em 3em;
    box-shadow: 0.35em 0.35em 0 0 #0ABAB5;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    @media screen and (max-width: 599px) {
      #movie .inner {
        padding: 1em 5%; } }
    #movie .inner section {
      width: 53.6%;
      position: relative; }
      @media screen and (max-width: 599px) {
        #movie .inner section {
          width: 100%; } }
      #movie .inner section .txt01 {
        position: absolute;
        top: -2em;
        left: -1.35em;
        width: 108%; }
        @media screen and (max-width: 599px) {
          #movie .inner section .txt01 {
            top: -2em;
            left: 0;
            width: 100%; } }
        #movie .inner section .txt01 img {
          width: 100%; }
      #movie .inner section h2 {
        color: #0ABAB5;
        font-size: 1.875em;
        font-weight: 700;
        letter-spacing: 0.05em;
        line-height: 1.46;
        position: relative;
        z-index: 2;
        margin-top: 0.5em; }
        @media screen and (max-width: 599px) {
          #movie .inner section h2 {
            font-size: 1.35em;
            text-align: center; } }
        @media screen and (max-width: 599px) {
          #movie .inner section h2 .sp {
            display: inline; } }
      #movie .inner section .btn01 {
        background: url("../img/arrow04.svg") no-repeat 90% center #0ABAB5;
        font-weight: 700;
        padding: 0.75em 1.5em;
        margin: 1.5em 0;
        display: block;
        color: #fff;
        border-radius: 500px;
        width: 15em;
        max-width: 100%; }
        @media screen and (max-width: 599px) {
          #movie .inner section .btn01 {
            padding: 1em 1.5em;
            margin: 1em auto;
            width: 13em; } }
      #movie .inner section .txt02 {
        font-weight: 700;
        font-size: 1.25em; }
        @media screen and (max-width: 599px) {
          #movie .inner section .txt02 {
            font-size: 1.05em;
            text-align: center; } }
    #movie .inner .img01 {
      width: 41.8%;
      border: 2px solid #0ABAB5; }
      @media screen and (max-width: 599px) {
        #movie .inner .img01 {
          width: 74.28%;
          margin: 0.8em auto 0;
          position: relative; } }

/*******************************
link
*******************************/
#link {
  padding: 5em 0 7em; }
  @media screen and (max-width: 599px) {
    #link {
      padding: 3.75em 0 2em; } }
  #link .inner {
    width: 52.125em;
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 599px) {
      #link .inner {
        display: block; } }
    #link .inner .oc {
      width: 48%; }
      @media screen and (max-width: 599px) {
        #link .inner .oc {
          width: 100%;
          position: relative; } }
      #link .inner .oc a {
        background: #FA804A;
        color: #fff;
        padding: 1.75em 1.125em 2.5em;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        border-radius: 1.875em;
        box-shadow: 8px 8px 10px rgba(153, 153, 153, 0.5); }
        @media screen and (max-width: 599px) {
          #link .inner .oc a {
            padding: 2.75em 1.125em 2em;
            box-shadow: 4px 4px 6px rgba(153, 153, 153, 0.5); } }
        #link .inner .oc a .txt01 {
          margin-bottom: 1.25em; }
          @media screen and (max-width: 599px) {
            #link .inner .oc a .txt01 {
              margin: 0;
              position: absolute;
              top: -2em;
              left: 50%;
              transform: translate(-50%, 0);
              width: 80%; } }
          #link .inner .oc a .txt01 img {
            width: 100%; }
        #link .inner .oc a h2 {
          text-align: center;
          font-size: 2em;
          font-weight: 700;
          line-height: 1.4375; }
          @media screen and (max-width: 599px) {
            #link .inner .oc a h2 {
              font-size: 1.6em; } }
          #link .inner .oc a h2 strong {
            font-size: 1.25em; }
        #link .inner .oc a .btn {
          background: url("../img/arrow01.svg") no-repeat 90% center #fff;
          border-radius: 500px;
          padding: 0.35em 0;
          text-align: center;
          font-size: 1.75em;
          color: #333;
          width: 96%;
          box-shadow: 3px 3px 3px #B1505F;
          font-weight: 700;
          margin-top: 1em; }
          @media screen and (max-width: 599px) {
            #link .inner .oc a .btn {
              width: 90%;
              font-size: 1.5em;
              margin-top: 0.5em; } }
          #link .inner .oc a .btn .icon {
            width: 2.228em;
            margin-right: 1em;
            margin-left: -2em; }
    #link .inner .other {
      width: 46%; }
      @media screen and (max-width: 599px) {
        #link .inner .other {
          width: 100%;
          margin-top: 1.75em; } }
      #link .inner .other li:not(:last-child) {
        margin-bottom: 1.95em; }
        @media screen and (max-width: 599px) {
          #link .inner .other li:not(:last-child) {
            margin-bottom: 1.5em; } }
      #link .inner .other li a {
        background: url("../img/arrow01.svg") no-repeat 95% center #D2F2F2;
        display: block;
        border-radius: 0.714em;
        box-shadow: 5px 5px 7px rgba(119, 119, 119, 0.3);
        font-size: 1.75em;
        padding: 1em;
        font-weight: 700; }
        @media screen and (max-width: 599px) {
          #link .inner .other li a {
            font-size: 1.4em; } }
        #link .inner .other li a span {
          font-size: 78.57%; }

/*******************************
footer
*******************************/
footer {
  background: var(--clr-main);
  color: #fff;
  padding: 1em 0; }
  @media screen and (max-width: 599px) {
    footer {
      padding: 0.25em 0;
      margin-bottom: 8em; } }
  footer #copyright {
    text-align: center;
    font-size: 0.875em; }

#tracking {
  position: fixed;
  bottom: 1em;
  right: 1em;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 13.75em;
  max-width: 11.5%; }
  @media screen and (max-width: 599px) {
    #tracking {
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: 100%;
      flex-direction: row-reverse; } }
  #tracking #top_btn {
    display: none;
    width: 3.625em;
    cursor: pointer;
    transition: all 0.5s ease; }
    @media screen and (max-width: 599px) {
      #tracking #top_btn {
        position: fixed;
        right: 0.8em;
        width: 10%;
        bottom: 0.75em; } }
    #tracking #top_btn:hover {
      opacity: 0.75; }
  #tracking #bnr01 {
    margin-top: 1.5em; }
    @media screen and (max-width: 599px) {
      #tracking #bnr01 {
        width: 72%;
        margin: 0 auto;
        display: none; } }
    #tracking #bnr01 a {
      display: block; }