@charset "UTF-8";
.top {
  /*----------------------------------------------------
  	☆common
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	☆mv
  ----------------------------------------------------*/
  /*----------------------------------------------------
  	☆sec01
  ----------------------------------------------------*/
  	/*----------------------------------------------------
  	☆sec02
  ----------------------------------------------------*/
  	/*----------------------------------------------------
  	☆sec03
  ----------------------------------------------------*/
  	/*----------------------------------------------------
  	☆sec04
  ----------------------------------------------------*/
  	/*----------------------------------------------------
  	☆sec05
  ----------------------------------------------------*/ }
  .top .pcHd {
    width: calc(100% - 120px);
    left: 60px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding: 0;
    top: 36px;
    padding-bottom: 20px; }
    .top .pcHd .logo a {
      background-image: url("/lib/cmn_img/logo_wf.png"); }
    .top .pcHd .gnavList > li a {
      color: #fff; }
  .top #container {
    margin-top: -60px;
    z-index: 9;
    position: relative;
    padding-top: 0; }
    @media screen and (max-width: 768px) {
      .top #container {
        margin-top: 0; } }
  .top .secTtl {
    font-size: 3.4rem;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 40px;
    font-weight: 300;
    letter-spacing: 0.08em; }
    @media screen and (max-width: 768px) {
      .top .secTtl {
        font-size: 2.8rem; } }
    .top .secTtl span {
      font-size: 1.2rem;
      margin-top: 5px;
      color: #999;
      letter-spacing: 0.4em;
      display: block; }
  .top .mv {
    width: 100%;
    padding: 20px;
    position: relative; }
    @media screen and (max-width: 768px) {
      .top .mv {
        padding: 0; } }
    .top .mv .slider_01 > li {
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      width: 100%;
      height: calc(100vh - 40px); }
      @media screen and (max-width: 768px) {
        .top .mv .slider_01 > li {
          height: 460px; } }
    .top .mv .bx-wrapper {
      margin: 0; }
    .top .mv .mainCopy {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 580px;
      z-index: 1; }
      @media screen and (max-width: 768px) {
        .top .mv .mainCopy {
          width: 90%;
          position: static;
          transform: translate(0, 0);
          margin: 0 auto; }
          .top .mv .mainCopy img {
            max-width: 230px;
            margin: 0 auto; } }
      .top .mv .mainCopy span {
        color: #fff;
        margin: 35px auto 0;
        display: block;
        font-size: 1.2rem;
        font-weight: 900;
        text-align: center;
        letter-spacing: 0.65em; }
        @media screen and (max-width: 768px) {
          .top .mv .mainCopy span {
            letter-spacing: 0.35em;
            margin-top: 20px;
            font-size: 1.1rem; } }
    .top .mv .read {
      position: absolute;
      left: 100px;
      bottom: 120px;
      width: auto;
      font-size: 1.6rem;
      line-height: 2.3;
      color: #fff;
      letter-spacing: 0.2em; }
      @media screen and (max-width: 768px) {
        .top .mv .read {
          font-size: 1.3rem;
          position: static;
          text-align: center;
          margin-top: 15px; } }
    @media screen and (max-width: 768px) {
      .top .mv .txWrap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center; } }
    .top .mv .bx-wrapper .bx-pager {
      bottom: 80px; }
      @media screen and (max-width: 768px) {
        .top .mv .bx-wrapper .bx-pager {
          bottom: 20px; } }
    .top .mv .bx-wrapper .bx-pager.bx-default-pager a {
      background: #fff !important;
      margin: 0px 10px; }
      .top .mv .bx-wrapper .bx-pager.bx-default-pager a.active {
        background: #29a66d !important; }
  @media screen and (max-width: 768px) {
    .top .sec01 {
      margin-top: 50px; } }
  .top .sec01 .newsList {
    width: 100%;
    font-size: 0;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .top .sec01 .newsList {
        text-align: left; } }
    .top .sec01 .newsList > li {
      width: 20%;
      display: inline-block;
      vertical-align: top;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      border-left: 1px solid #ddd;
      text-align: left; }
      @media screen and (max-width: 768px) {
        .top .sec01 .newsList > li {
          width: 50%; } }
      @media screen and (max-width: 768px) {
        .top .sec01 .newsList > li:nth-child(3), .top .sec01 .newsList > li:nth-child(5) {
          border-right: 1px solid #ddd; } }
      @media screen and (max-width: 768px) {
        .top .sec01 .newsList > li.last {
          border-right: 1px solid #ddd; } }
      @media screen and (max-width: 768px) {
        .top .sec01 .newsList > li:nth-child(1) {
          width: 100%;
          border: none; } }
      .top .sec01 .newsList > li.last {
        border-right: 1px solid #ddd; }
      .top .sec01 .newsList > li.ttlBox {
        text-align: center;
        background-color: #fff; }
        .top .sec01 .newsList > li.ttlBox .in {
          display: table;
          width: 100%;
          height: 100%; }
          .top .sec01 .newsList > li.ttlBox .in .wrap {
            display: table-cell;
            vertical-align: middle; }
            .top .sec01 .newsList > li.ttlBox .in .wrap .secTtl {
              font-size: 2.4rem;
              margin-bottom: 15px; }
              .top .sec01 .newsList > li.ttlBox .in .wrap .secTtl span {
                letter-spacing: 0; }
            .top .sec01 .newsList > li.ttlBox .in .wrap .btnStyle_01 a {
              max-width: 165px; }
              .top .sec01 .newsList > li.ttlBox .in .wrap .btnStyle_01 a::before {
                content: none; }
      .top .sec01 .newsList > li.kiji a {
        background-color: #fff; }
        .top .sec01 .newsList > li.kiji a:hover {
          background-color: #ebf8f2; }
  .top .sec02 .inrLL {
    position: relative;
    overflow: hidden;
    zoom: 1; }
    @media screen and (max-width: 768px) {
      .top .sec02 .inrLL {
        width: 100% !important; } }
    .top .sec02 .inrLL .imgBox {
      width: 55%;
      background: url("/lib/cmn_img/top/sec02_img01.jpg") no-repeat center center/cover;
      height: 540px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1; }
      @media screen and (max-width: 768px) {
        .top .sec02 .inrLL .imgBox {
          width: calc(100% - 20px);
          height: auto;
          padding-top: 66.66%;
          position: relative;
          z-index: 1; } }
    .top .sec02 .inrLL .txBox {
      background-color: #ebf8f2;
      padding: 30px 50px 30px 15%;
      z-index: 8;
      width: 55%;
      height: 540px;
      display: table;
      z-index: -1;
      margin-top: 60px;
      float: right; }
      @media screen and (max-width: 768px) {
        .top .sec02 .inrLL .txBox {
          width: calc(100% - 20px);
          height: auto;
          padding: 60px 25px 45px 25px;
          margin-top: -30px; } }
      .top .sec02 .inrLL .txBox .wrap {
        display: table-cell;
        vertical-align: middle; }
        .top .sec02 .inrLL .txBox .wrap .copy {
          font-size: 2.8rem;
          font-weight: 300;
          line-height: 1.8;
          letter-spacing: 0.1em; }
          @media screen and (max-width: 768px) {
            .top .sec02 .inrLL .txBox .wrap .copy {
              font-size: 2.0rem;
              font-weight: 400; } }
          .top .sec02 .inrLL .txBox .wrap .copy span {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: #999;
            letter-spacing: 0.4em;
            display: block; }
        .top .sec02 .inrLL .txBox .wrap .tx {
          font-size: 1.6rem;
          margin-top: 20px; }
          @media screen and (max-width: 768px) {
            .top .sec02 .inrLL .txBox .wrap .tx {
              font-size: 1.4rem;
              margin-top: 15px; } }
        .top .sec02 .inrLL .txBox .wrap .btnStyle_01 a {
          margin-left: 0;
          margin-top: 40px; }
          @media screen and (max-width: 768px) {
            .top .sec02 .inrLL .txBox .wrap .btnStyle_01 a {
              margin-top: 30px; } }
  .top .sec03 .sec03Inr {
    max-width: 1620px;
    width: 100%;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .top .sec03 .sec03Inr {
        width: calc(100% - 40px); } }
    .top .sec03 .sec03Inr .faList {
      width: 100%;
      font-size: 0; }
      .top .sec03 .sec03Inr .faList > li {
        width: 22.5%;
        margin-left: 2%;
        margin-bottom: 2%; }
        @media screen and (max-width: 768px) {
          .top .sec03 .sec03Inr .faList > li {
            width: 49%;
            margin-left: 0;
            margin-right: 2%; } }
        .top .sec03 .sec03Inr .faList > li:nth-child(2n) {
          margin-right: 0; }
        .top .sec03 .sec03Inr .faList > li:nth-child(4n) {
          margin-right: 2%; }
          @media screen and (max-width: 768px) {
            .top .sec03 .sec03Inr .faList > li:nth-child(4n) {
              margin-right: 0; } }
  .top .sec04 {
    margin-top: 180px; }
    @media screen and (max-width: 768px) {
      .top .sec04 {
        margin-top: 80px; } }
    .top .sec04 .inrL {
      position: relative; }
      .top .sec04 .inrL .imgBox {
        position: absolute;
        z-index: -1;
        top: -60px;
        right: 0;
        width: 53%;
        height: 390px;
        background: url("/lib/cmn_img/top/sec04_img01.jpg") no-repeat center center/cover; }
        @media screen and (max-width: 768px) {
          .top .sec04 .inrL .imgBox {
            position: static;
            width: 100%;
            height: auto;
            padding-top: 50%; } }
      .top .sec04 .inrL .txBox {
        margin-top: 60px;
        height: 390px;
        display: table;
        width: 53%;
        background: #29a66d;
        padding: 40px;
        text-align: center;
        color: #fff; }
        @media screen and (max-width: 768px) {
          .top .sec04 .inrL .txBox {
            height: auto;
            width: 100%;
            padding: 35px 20px;
            margin-top: 0; } }
        .top .sec04 .inrL .txBox .secTtl {
          font-size: 2.8rem;
          margin-bottom: 20px; }
          @media screen and (max-width: 768px) {
            .top .sec04 .inrL .txBox .secTtl {
              font-size: 2.2rem; } }
          .top .sec04 .inrL .txBox .secTtl span {
            color: #fff; }
        .top .sec04 .inrL .txBox .tx {
          color: #fff;
          font-size: 1.6rem;
          line-height: 1.7;
          letter-spacing: 0.05em; }
          @media screen and (max-width: 768px) {
            .top .sec04 .inrL .txBox .tx {
              font-size: 1.4rem; } }
        .top .sec04 .inrL .txBox .btnStyle_01 {
          margin-top: 30px; }
          @media screen and (max-width: 768px) {
            .top .sec04 .inrL .txBox .btnStyle_01 {
              margin-top: 25px; } }
          .top .sec04 .inrL .txBox .btnStyle_01 a::before {
            background-image: url("/lib/cmn_img/arw_bl.png"); }
          .top .sec04 .inrL .txBox .btnStyle_01 a {
            background: #fff;
            color: #111; }
            .top .sec04 .inrL .txBox .btnStyle_01 a:hover {
              background: #ebf8f2 !important; }
        .top .sec04 .inrL .txBox .wrap {
          display: table-cell;
          vertical-align: middle;
          width: 100%; }
  .top .sec05 {
    padding: 120px 20px;
    text-align: center;
    background: url("/lib/cmn_img/top/sec05_img01.jpg") no-repeat center center/cover; }
    @media screen and (max-width: 768px) {
      .top .sec05 {
        padding: 50px 20px;
        background-image: url("/lib/cmn_img/top/sec05_img01_sp.jpg"); } }
    .top .sec05 .main {
      max-width: 435px;
      width: 100%;
      display: block;
      margin: 0 auto; }
      .top .sec05 .main span {
        font-size: 1.2rem;
        margin-top: 15px;
        color: #999;
        letter-spacing: 0.4em;
        display: block; }
    .top .sec05 .tx {
      font-size: 1.6rem;
      letter-spacing: 0.05em;
      margin-top: 20px; }
      @media screen and (max-width: 768px) {
        .top .sec05 .tx {
          font-size: 1.4rem;
          margin-top: 15px; } }
    .top .sec05 .btnStyle_01 {
      margin-top: 30px; }
      @media screen and (max-width: 768px) {
        .top .sec05 .btnStyle_01 {
          margin-top: 25px; } }