@charset "udf-8";

@media screen and (max-width: 1199px) {

    .main-logo {
  
      width: 80%;
  
    }
    #nav .other a img {
      
      width: 80%; 
    }
  
    #top img {
  
        width: 25%;
    }
  
    .bar.green img {
      width: 50%;
    }
  
    .bar.pink img {
  
      width: 80%;
    }
  
    .bar.blue img {
      width: 75%;
    }
  
  }
  
  
  @media screen and (max-width: 767px) {

    body .head_logo {

      top:85px !important;
    }

    

    body footer .return-top > a {
 
     width: 70px;
     height: 70px;
 
     }
 
 
 
    body .opfixed {
       opacity: 1 !important;
       pointer-events: all !important;
 
     }
 
 
 body .scroll {
 
 
   width: 76px;
     height: 76px;
     left: 1%;
     top:240px;
 }
 body .scrollIn {
     width: 58px;
     height: 58px;
 
 }
 
 
 body .main-logo {
 
   top: 80%;
     width: 80%;
 
 }
 
 
 body .main_top figcaption {
   top: 7%;
     right: 10.5%;
     width: 20%;
 }
 
 body .main_top {
 
 
   justify-content: center;
   margin: 80px auto 0 ;
 
 }
 
 
 body .main_top .main_v {
 
   width: 75%;
   margin: 0 auto;
   position: relative;
 
 }
 
 
 
 
    body .scrollPdf {
     width: auto;
     height: auto;
     right: 26px;
     bottom: 0;
 
     }
 
 body #nav {
     padding-top: 75px;
 }
 
 body #nav .other,
   body #nav .bar.green a,
    body  #nav a {
     padding-left: 18px;
 
     }

     body #nav a span {
      font-size: 1.2rem;
     }
 
     body #top:hover {
       background: none ;
     }
 
 body #hamburger {
 
   top: 85px;
     right: 32px;
 
 }
 
 
     body .left_sec { 
 
 
       display: none;
     }
 
    body #nav {
 
     width: 100%;
     }
 
     body #nav {
 
 
       transform: translateX(260%);
 
     }
 
 
    body #nav.in {
 
     
     transform: translateX(0);
     }
 
 
    }


    ul {

        list-style: none;
      }
      
      
      .op_01 {
      
        opacity: 0;
        pointer-events: none;
      
      }
      
      
      
      
      /*ハンバーガーメニュー*/
      
      
      .hv_manu {
          top: 0px;
          position: fixed;
          width: 100%;
          /*height: 90px;
          background: #000000;*/
          z-index: 99999;
      }
      
      #nav{
        position: absolute;
        height: 100vh;
        width: 50%;
        right:  0;
        top: 65px;
        background: #6E6EFF;
        transition: .7s;
        transform: translateY(-150%);
      }
      #nav {
        padding-top: 32px;
      }
      #nav ul li{
        list-style-type: none;
        font-size: 20px;
      }
      #nav a{
        display: block;
        text-decoration: none;
        color: #000000;
        margin: 0 ;
        padding: 15px 0 ;
        transition: .5s;
        padding-left: 60px ;
        position: relative;
      }
      

      #nav a span {

        display: block;
        font-size: 1.4rem;
        color: #fff;
        padding-top: 10px ;
      }

      #nav ul li div {
      
        position: relative;
      }
      
      
      #nav ul li div ::after {
        content: '';
        display: block;
        position: absolute;
        background: url(/waga-machi-mirai/fcf_img/common/item-arrow.svg) center center no-repeat;
        width: 11px;
          height: 10px;
          transform: rotate(-90deg);
          bottom: 15px;
          right: 10%;
          background-size: contain;
      
      }
      
      #nav img {
      
      
        vertical-align: bottom ;
      }
      
      
      #top:hover{
        color: #ffffff;
        background: #cd5c5c;
       
      }
      
      #nav li a:hover{
       /* color: #ffffff;
        background: #cd5c5c;
        border-bottom: none;*/
      }
      
      #nav .bar.green a {
      
        padding-left: 60px;
      
      }
      
      .bar.blue {
          background: #34B5F0;
      }
      
      .bar.blue:hover {
          background: #1496D1;
      }
      
      
      .bar.pink {
          background: #E35959;
      }
      
      #nav ul .bar.pink:hover {
          background: #D84B4B;
      }
      
      
      #nav .bar.green a:hover{
        color: #ffffff;
        background: #2CA56A;
        border-bottom: none;
      }
      
      
      #hamburger {
        display: block;
        position: absolute;
        top: 122px;
        right:  65px;
        /*width: 50px;*/
        width: 54px;
        /*height: 22px;*/
        height: 30px;
        cursor: pointer;
        transition: .5s;
        background: #6E6EFF;
      }
      .inner_line {
        display: block;
        position: absolute;
        left: 2px;
        width: 50px;
        height: 2px;
        background-color: #ffffff;
        transition: 1s;
        border-radius: 4px;
        margin-top: 4px;
      }
      #line1 {
        top: 0;
        height: 2px;
      }
      #line2 {
        top: 10px;
      }
      #line3 {
        /*bottom: 0px;*/
        height: 2px;
        top: 20px;
      }
      
      
      #nav.in{
        transform: translateY(0);
      }
      .line_1,.line_2,.line_3{
        /*
        background: #000000;*/
      }
      .line_1 {
        transform: translateY(10px) rotate(18deg);
        top: 0;
      }
      .line_2 {
        opacity: 0;
      }
      .line_3 {
        transform: translateY(-9px) rotate(-19deg);
        bottom: 0;
      }
      
      @media screen and (max-width: 767px) {
        #nav ul li {
          font-size: 14px;
        }
      
      }
      
      /*ハンバーガーメニュー*/
      
      
      
      
      .ovf {
        overflow: hidden;
      }
      
      
      
      .side_line01 {
      
        position: fixed;
          top: 0;
          right: 0;
          overflow: hidden;
          background: #ffe100;
          width: 24px;
          height: 100vh;
          z-index: 99999998;
      
      }
      
      .side_line01 .fixedIn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          height: 200%;
          position: absolute;
          width: 100%;
          left: 0;
          bottom: 0;
      }
      
      .side_line01 .fixedIn .tick {
          
          animation: tick linear 12s 3;
      
      
      }
      
      .side_line01 .fixedIn .tick img {
      
        width: 100% ;
      }
      
      
      header {
        display: block !important;
        position: fixed;
        z-index: 999999999;
        ;
      
      }
      .is-open .lay {
          transform: scaleY(1);
      
      }
      
      footer .return-top > a {
        background: none;
        width: 100px;
          height: 100px;
          padding: 0;
          bottom: -20px;
        left: -20px ;
        right: auto !important;
        transition: .3s;
        z-index: 1;
      }
      
      footer .return-top > a:hover {
          opacity: .55;
          background: none;
        }
      
      
      .dis_n {
        display: none !important;
      
      }
      .left_sec {
       
          position: fixed;
          top: 0;
          left: 0;
          width: 50%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          transition: all 0.8s cubic-bezier(0.7, 0.2, 0.1, 1);
          pointer-events: none;
          transform: scaleY(0);
          transform-origin: bottom;
          z-index: 2;
      }
      
      .head_logo {
      
      display: block;
      position: fixed;
        top: 15%;
        left:24px;
      z-index: 3;
      transition: all .3s;
      }
      
      
      
      .in.left_sec {
          transform: scaleY(1);
      
      }
      
      
      @keyframes tick {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(100%);
        }
      }
      
      
      
      .scroll {
          width: 96px;
          height: 96px;
          border-radius: 48px;
          background: #5c5cd6;
          position: absolute;
          top: 197px;
          left: 81px;
          z-index: 1;
          /* position: relative; */
      }
      
      .scrollIn {
          width: 76px;
          height: 76px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      .scrollIn img {
          animation: spiner linear 12s 3;
          width: 100%;
          height: 100%;
      }
      
      
      @keyframes spiner {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .arrow {
          width: 9px;
          /*height: 10px;*/
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      
      footer .return-top > a > img {
      
          width: 100%;
      }
      
      
      .top_ob {
        width: 100%;
      }
      
      .bar.green {
          background: #42BF82;
      }
      
      #nav .other { 
      
        padding-left: 60px;
      }
      
      #nav .other  a { 
        padding: 0 ;
      }
      
      
      .scrollPdf:hover {
      
        opacity: .55;
      }
      
      
      .scrollPdf {
          width: 210px;
          height: 90px;/*
          background: lightseagreen;*/
          position: fixed;
          bottom: 7px;
          right: 30px;
          cursor: pointer;
          transition: all 0.4s;
          z-index: 2;
      }
      
      
      .scrollPdf_hidden {
          opacity: 0;
          transform: translateY(20px);
          pointer-events: none;
      }
      
      
      .main_top {
      margin-top: 42px;
        display: flex;
          justify-content: flex-end;
        margin-right: 60px;
          position: relative;
      }
      
      
      .main_top .main_v{
          position: relative;
        width: 600px;
      }
      
      .main_top figcaption {
      
        position: absolute;
          top: 11%;
          right: -12px;
      
      }
      
      .mod-frame {
      
        position: relative;
      }
      
      
      .main-logo {
      
      position: absolute;
          z-index: 1;
          top: 25%;
      }
      
      .main-logo img {
      
        width: 100%;
      }
      
      .op_02 {
      
        opacity: 1 !important;
        pointer-events: all !important;
      
      }
      
      .opacity {
      
        opacity: 0 !important;
      }
      
      p {
      
        letter-spacing: 0.08em;
      }




      .main_font {
     
   
        font-feature-settings: "palt" 1;
        text-rendering: optimizeSpeed;
      }

      .mt0 {

        margin-top: 0px !important;
      }


      .font02 {
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
        
    }


    .font_b {

      font-weight: bold !important;
  
  }
  

  /*--next_area_second--*/

.next_area_second {
  width: 100%;
  position: relative;
  background: #6E6EFF;
  padding: 65px 0;
}


.second_container {

width: calc(100% - 86px);
margin:  0 auto;
}

.second_container a {

display: block;
}

.second_container .green:hover {
background: #2CA56A;
}


.second_container .bar.pink:hover {
    background: #D84B4B;
}


.second_container ul li div {

  position: relative;

  padding: 32px 68px ;
}


.second_container ul li div span {

  display: block;
}

.second_container ul li div span:nth-child(1) {

  margin-bottom: 14px;
}



.second_container ul li div::after {
    content: '';
    display: block;
    position: absolute;
    background: url(/waga-machi-mirai/fcf_img/common/item-arrow.svg) center center no-repeat;
    width: 11px;
    height: 10px;
    transform: rotate(-90deg);
    bottom: 32px;
    right: 2%;
    background-size: contain;
}

@media screen and (min-width: 989px) {
  .second_container .bar.blue img,
.second_container .bar.pink img,
.second_container .bar.green img {
    width: auto;
}
}


@media screen and (max-width: 1099px) { 

  .second_container ul li div .ikani img {

width: 90%;
}

}


@media screen and (max-width: 767px) { 

  .second_container ul li div::after {

    bottom: 38px;
  }

  .second_container ul li div .ikani img {

    width: 95%;
  }

  body .second_container ul li div {
    padding: 32px 18px;
    
  }


  body .second_container {

    width: calc(100% - 52px );

  }

}

  /*//--next_area_second--*/