@charset "UTF-8";
/* ================================================================================================
   mixin
   ================================================================================================ */
p {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.90;
  letter-spacing: 2px;
  color: #231815;
  font-family: "Avenir Next", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }

a {
  color: #0075bb; }
  a:hover, a:active, a:focus {
    color: #22acff; }

.links {
  display: inline-block;
  padding-left: 10px;
  background: url(../img/common/arrow.png) no-repeat left center;
  background-size: 5px 8px; }

.ctr {
  margin: 0 auto;
  text-align: center; }

.img_base {
  margin: 0 auto;
  text-align: center; }

/* ================================================================================================
  body
  ================================================================================================ */
html, body {
  margin: 0 auto;
  overflow-x: hidden; }

.sp {
  display: none; }

.wrap_pc {
  width: 980px;
  min-width: auto;
  margin: 0 auto; }

#content {
  max-width: auto;
  margin: 0 auto;
  text-align: justify;
  font-size: 14px; }
  #content .l_wrapper {
    background-color: #edf8ff;
    margin: 0 auto;
    /* ================================================================================================
  header
  ================================================================================================ */
    /* ================================================================================================
  kv - concept
  ================================================================================================ */
    /* ================================================================================================
   future
   ================================================================================================ */
    /* ================================================================================================
   case
   ================================================================================================ */
    /* ================================================================================================
   review
   ================================================================================================ */
    /* ================================================================================================
   cta
   ================================================================================================ */
    /* ================================================================================================
   footer
   ================================================================================================ */ }
    #content .l_wrapper .scroll_btn {
      position: fixed;
      z-index: 999;
      bottom: 80px;
      right: 0px; }
      #content .l_wrapper .scroll_btn a:hover {
        opacity: 0.7;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease; }
    #content .l_wrapper .h_layout {
      height: 50px; }
      #content .l_wrapper .h_layout .logo {
        float: left;
        padding: 20px 0 25px 0;
        max-width: 25%; }
      #content .l_wrapper .h_layout .concept {
        float: right;
        padding: 50px 0 0 0;
        max-width: 70%;
        font-weight: normal; }
    #content .l_wrapper .main_content .kv {
      position: relative; }
      #content .l_wrapper .main_content .kv .read {
        position: absolute;
        top: 35%;
        right: 0;
        bottom: 0;
        left: 0; }
      #content .l_wrapper .main_content .kv .copy {
        position: absolute;
        top: 53%;
        right: 0;
        bottom: 0;
        left: 0; }
    #content .l_wrapper .main_content .enfant_concept {
      text-align: center;
      margin: 0 auto;
      position: relative;
      margin-top: 15px;
      height: 636px;
      width: 100%;
      min-width: 980px;
      overflow: hidden; }
      #content .l_wrapper .main_content .enfant_concept .image-wrap {
        width: 960px;
        margin: 0 auto; }
      #content .l_wrapper .main_content .enfant_concept .bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 auto;
        max-width: 200%;
        margin: 0 -50%;
        text-align: center; }
      #content .l_wrapper .main_content .enfant_concept .read {
        position: absolute;
        top: 12%;
        right: 0;
        bottom: 0;
        left: 0; }
      #content .l_wrapper .main_content .enfant_concept .copy {
        position: absolute;
        top: 37%;
        right: 0;
        bottom: 0;
        left: 0; }
    #content .l_wrapper .future_l {
      background-color: #ffed00;
      padding-bottom: 40px;
      /* ================================================================================================
         01
         ================================================================================================ */
      /* ================================================================================================
         f02
         ================================================================================================ */
      /* ================================================================================================
         03
         ================================================================================================ */ }
      #content .l_wrapper .future_l .future_title_b .future_lead {
        padding: 60px 0 0 0; }
      #content .l_wrapper .future_l .future_title_b .future_title {
        padding: 20px 0 40px 0; }
      #content .l_wrapper .future_l .future1_b {
        background-color: #fff;
        height: 980px;
        border-radius: 10px; }
        #content .l_wrapper .future_l .future1_b .bg {
          position: relative;
          display: block;
          margin-bottom: 50px; }
        #content .l_wrapper .future_l .future1_b .wrap_2 {
          width: 868px;
          min-width: auto;
          margin: 0 auto;
          background-color: #edf8ff;
          border-radius: 10px;
          margin: 0 auto; }
          #content .l_wrapper .future_l .future1_b .wrap_2 .txt {
            padding: 0px 40px 40px 40px; }
          #content .l_wrapper .future_l .future1_b .wrap_2 .maker {
            background: linear-gradient(transparent 60%, #ffed00 0); }
        #content .l_wrapper .future_l .future1_b .title {
          position: absolute;
          top: 45px;
          right: 0;
          bottom: 0;
          left: 60px;
          text-align: left; }
          #content .l_wrapper .future_l .future1_b .title:before {
            content: "";
            display: inline-block;
            background-image: url(../img/pc/f1_head@2x.png);
            background-size: cover;
            width: 68px;
            height: 80px;
            margin: 0px 25px 0 0; }
        #content .l_wrapper .future_l .future1_b .sub_title {
          padding: 35px 0 10px 0;
          text-align: center;
          margin: 0 auto; }
        #content .l_wrapper .future_l .future1_b .h3 {
          margin: 45px 0% 15px 0%; }
        #content .l_wrapper .future_l .future1_b #modal {
          display: block; }
        #content .l_wrapper .future_l .future1_b .future {
          width: 810px;
          height: auto;
          margin: 0  auto;
          padding: 0px 0 20px 0;
          \zoom: 1; }
          #content .l_wrapper .future_l .future1_b .future:after {
            content: '';
            display: block;
            clear: both;
            height: 0; }
          #content .l_wrapper .future_l .future1_b .future .popupwrap {
            padding: 0; }
          #content .l_wrapper .future_l .future1_b .future .left {
            float: left;
            width: 392px; }
            #content .l_wrapper .future_l .future1_b .future .left h5 {
              font-size: 17px;
              margin: 20px 0 15px 0; }
          #content .l_wrapper .future_l .future1_b .future .right {
            float: right;
            width: 392px; }
            #content .l_wrapper .future_l .future1_b .future .right img {
              margin: 23px 0 0 0; }
            #content .l_wrapper .future_l .future1_b .future .right h5 {
              font-size: 17px;
              margin: 20px 0 15px 0; }
        #content .l_wrapper .future_l .future1_b .pb {
          padding: 0% 0% 8% 0%; }
      #content .l_wrapper .future_l .future2_b {
        background-color: #fff;
        margin-top: 25px;
        border-radius: 10px;
        height: 340px; }
        #content .l_wrapper .future_l .future2_b .wrap_2 {
          width: 868px;
          margin: 0 auto; }
          #content .l_wrapper .future_l .future2_b .wrap_2 .left {
            width: 380px;
            float: right;
            margin-top: 90px;
            position: relative; }
          #content .l_wrapper .future_l .future2_b .wrap_2 .left_text {
            width: 380px;
            float: right; }
          #content .l_wrapper .future_l .future2_b .wrap_2 h4 {
            margin-bottom: 25px; }
            #content .l_wrapper .future_l .future2_b .wrap_2 h4:before {
              content: "";
              display: inline-block;
              background-image: url(../img/pc/f2_head@2x.png);
              background-size: cover;
              width: 68px;
              height: 81px;
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: -90px; }
          #content .l_wrapper .future_l .future2_b .wrap_2 figure {
            width: 310px;
            float: left;
            margin: 50px 120px 0 0; }
        #content .l_wrapper .future_l .future2_b .title {
          margin: 0% 0% 0% 0%; }
      #content .l_wrapper .future_l .future3_b {
        clear: both;
        margin-top: 25px;
        border-radius: 10px;
        height: 340px;
        background-color: #fff; }
        #content .l_wrapper .future_l .future3_b .img_base {
          text-align: left; }
        #content .l_wrapper .future_l .future3_b .txt_mb {
          padding: 0 0 10px 0; }
        #content .l_wrapper .future_l .future3_b .wrap_2 {
          width: 868px;
          margin: 0 auto; }
        #content .l_wrapper .future_l .future3_b .left {
          width: 380px;
          float: left;
          margin: 60px 0 0 80px; }
        #content .l_wrapper .future_l .future3_b .left_2 {
          width: 370px;
          float: left;
          margin: 0px 0 0 80px; }
        #content .l_wrapper .future_l .future3_b .left_3 {
          width: 350px;
          float: left;
          margin: 0px 0 0 80px; }
        #content .l_wrapper .future_l .future3_b figure {
          width: 340px;
          float: right;
          margin: 55px 0 0 30px; }
        #content .l_wrapper .future_l .future3_b h4 {
          margin: 0% 0% 7% 0%;
          position: relative; }
          #content .l_wrapper .future_l .future3_b h4:before {
            content: "";
            display: inline-block;
            background-image: url(../img/pc/f3_head@2x.png);
            background-size: cover;
            width: 64px;
            height: 82px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: -90px; }
    #content .l_wrapper .case_l {
      background-color: #edf8ff;
      margin-top: 25px;
      border-radius: 10px; }
      #content .l_wrapper .case_l .wrap_2 {
        width: 810px;
        height: 280px;
        margin: 0 auto;
        padding: 85px 0 0px 0; }
      #content .l_wrapper .case_l .txt_mb {
        padding: 25px 0% 25px 0%;
        text-align: center;
        color: #0075bb;
        font-weight: bold; }
      #content .l_wrapper .case_l .case_b {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        display: flex; }
        #content .l_wrapper .case_l .case_b .border {
          border-right: 2px solid #CCC;
          padding-right: 25px;
          padding-top: 5px; }
        #content .l_wrapper .case_l .case_b p {
          padding-top: 3px; }
    #content .l_wrapper .brown {
      background: #f3f0e9;
      padding: 50px 0 60px 0; }
      #content .l_wrapper .brown h4 {
        margin-bottom: 30px; }
      #content .l_wrapper .brown .review_l {
        background-color: #fff;
        border-radius: 10px;
        background: url(../img/pc/review_bg.png) no-repeat;
        border-color: #000; }
        #content .l_wrapper .brown .review_l h5 {
          padding: 0 0 25px 0;
          text-align: left; }
        #content .l_wrapper .brown .review_l .wrap_2 {
          width: 810px;
          margin: 0 auto;
          padding: 60px 0 10px 0; }
        #content .l_wrapper .brown .review_l .txt_mb {
          background: url(../img/common/dot.png) repeat;
          background-size: auto 26px; }
          #content .l_wrapper .brown .review_l .txt_mb .bold {
            font-weight: 600;
            font-weight: bold;
            background: url(../img/common/border.png) repeat-x; }
        #content .l_wrapper .brown .review_l .last_txt {
          text-align: right;
          padding: 10px 0 20px 0; }
        #content .l_wrapper .brown .review_l .wrapper {
          font-size: 1.6rem; }
          #content .l_wrapper .brown .review_l .wrapper .text_wrapper {
            position: relative; }
          #content .l_wrapper .brown .review_l .wrapper .text {
            height: 140px;
            overflow: hidden; }
          #content .l_wrapper .brown .review_l .wrapper .show_more, #content .l_wrapper .brown .review_l .wrapper .show_more2 {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 30px;
            padding-top: 100px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fdfdfd 65%);
            text-align: center;
            line-height: 95px;
            cursor: pointer;
            transition: bottom 0.2s; }
          #content .l_wrapper .brown .review_l .wrapper .active {
            background: none;
            bottom: -30px; }
          #content .l_wrapper .brown .review_l .wrapper h1 {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 10px; }
    #content .l_wrapper .cta_l {
      background-color: #fff;
      position: relative;
      padding: 35px 0 2% 0; }
      #content .l_wrapper .cta_l .ab {
        position: absolute;
        top: 160px;
        right: 0;
        bottom: 0;
        left: 0; }
        #content .l_wrapper .cta_l .ab .logo {
          margin: 0 0 20px 0; }
        #content .l_wrapper .cta_l .ab .txt {
          margin: 0 0 25px 0; }
        #content .l_wrapper .cta_l .ab .cta a:hover {
          opacity: 0.6;
          -webkit-transition: all 1s ease;
          -moz-transition: all 1s ease;
          -o-transition: all 1s ease;
          transition: all  1s ease; }
    #content .l_wrapper .footer {
      background-color: #fff;
      margin-bottom: 60px; }
      #content .l_wrapper .footer .f_wrap {
        width: 980px;
        margin: 0 auto;
        min-width: auto; }
      #content .l_wrapper .footer .center {
        width: 900px;
        margin: 0 auto; }
      #content .l_wrapper .footer .left {
        margin: 0 auto;
        width: 130px;
        height: 55px;
        float: left;
        margin-right: 40px;
        border-right: 2px solid #CCC;
        padding: 20px 40px 5px 0; }
      #content .l_wrapper .footer .right {
        width: 670px;
        float: left;
        margin-bottom: 30px; }
        #content .l_wrapper .footer .right .txt_mb {
          padding: 0px 0 10px 0; }
      #content .l_wrapper .footer .pb {
        margin-bottom: 20px; }
      #content .l_wrapper .footer .t8 {
        width: auto;
        font-size: 8px; }
      #content .l_wrapper .footer a:hover {
        opacity: 0.6;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease; }