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

  body {

    text-align: center;
    font-size:12px;
    line-height:100%;
    max-width:100%;
    color:#555555;/*??{??????F-----------------*/
    padding-top:0px;/*?R???e???c?{?b?N?X???�H?��????????????-----------------*/
    margin-bottom:0px;
    margin-right:0;
    margin:0 0 0 0 !important;
    background-color:rgb(130 143 146);
    font-family:  "?q???M?m?p?S ProN W3", HiraKakuProN-W3, ???S?V?b?N, "Yu Gothic", ???C???I, Meiryo, Verdana, Helvetica, Arial, sans-serif!important;
    }

    .disp-img:before{
      position:fixed;
      top:0;
      left:0;
      z-index:-1;
      width:100vw;
      height:100vh;
      background:url("../images/sample5_vertical5.jpeg") no-repeat center/cover;
      content:"";
    }

  #disp-img{
    position: relative;
    z-index: 0;
    background: #7777771f;
  }


    
    
    
    /*?K?????????N??F*/
    /*a:visited {text-decoration:underline;color:#CC3300;}*/
 
    #catch_copy{
      /*margin-right: 300px;*/

      font-size: 6vw;
      font-weight:bold;
      padding-left:5%;
      color: #ffffff;
      padding-top: calc(1831px*0.182);
      text-shadow:0 0 5px black;
      text-align: left;
      text-decoration: none;
      animation: fadeInLeft 1.2s ease 0s 1 normal;
    }
    #catch_copy_sub{
      color: #ffffff;
      font-size: 2vw;
      padding-left: 5%;
      padding-bottom: 120px;
      text-align: left;
    }

    .btn_mitsumori a{
      width:80%;
      color: #fff;
      display: block;
      text-decoration: none;
      border: 1px solid #fff;
      text-align: center;
      padding: 10px 5px 10px 5px;
      position: relative;
      left:4%;
      animation-name: fadein;
      animation-duration:1.4s;
    }
    .btn_mitsumori a:hover {
    background-color: #ffffff;
    color: rgb(168, 2, 2);
    }

       
        
    /*?~??z?u*/
    .seien{
      display: flex;
      display: -webkit-flex;
      justify-content:flex-start;
      text-align:left;
      padding-right:10%;
      padding-left:4%;
      padding-top:1%;
    
      }
     .seien #seien1{
        animation-name: fadein-fast;
        animation-duration:1.3s;
      }
     .seien #seien2{
        animation-name: fadein-fast;
        animation-duration:2.1s;
      }
     .seien #seien3{
        animation-name: fadein-fast;
        animation-duration:3.0s;
      }
      /*?~?????*/
      .seien div{
        width:calc(55%/2);
        border-radius: 100%;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-box-pack: center;
        align-items: center;
        -webkit-box-align: center;
        color: #ffffff;
        border: 1px solid #4c4c4c;
        background: #ff000045;
        text-align: center;
        font-weight: 600;
        font-size:normal;
        line-height: normal;
        border: 1px solid #b66f6f;
      }

      /*?[???v?f*/
      .seien div:before{
        display: block;
        content: '';
        padding-top: 100%;
        }
        
        .vertical_contents{
          border-top:1px solid rgb(238, 238, 238);
          margin-top:1%;
          background-color:rgb(69 81 84 / 54%);
          padding-bottom:10px;
          animation-name: fadein;
          animation-duration:3.2s;
         
        }
        
        .vertical_contents_forconts .htitle{
          background-color:#7d0000;
        }
        
        
        .htitle {
          font-size: 180%;
          color: white;
          font-weight: bold;
          padding-top: 1%;
          padding-bottom: 5px;
          line-height: normal;
          background-color: #8c0404b3;
        }
        .about{
          padding-top: 10px;
          margin:0px 0px 0px 0px;
      }
      .vertical_pic img{
        align-items: center;
        margin: auto!important;
        left:7%;
        width:86%;
        padding-top:16vw;
        padding:0 auto;
      
      }

      .vertical_pic_services img{
        align-items: center;
        margin: auto!important;
        left:7%;
        width:86%;
        padding:0 auto;
      
      }

      .vertical_pic_example img{
        align-items: center;
        left:2%;
        width:96%;
        padding-top:2%;
  }

      .vertical{
        margin-left: 3%;
        margin-right: 3%;
        font-size:3.4vw;
        font-weight:100;
        color:white;
        line-height:normal;
        /*height:20vw;*/
        text-align:left;
        padding: 0 4% 4% 4%;
      }

      .vertical_pic_top img{
        align-items: center;
        margin: auto!important;
        left:7%;
        width:86%;
        padding-top:0;
        
      }

      .vertical_top{
        /*margin-top:63vw;*/
        margin-left: 3%;
        margin-right: 3%;
        font-size:3.4vw;
        font-weight:100;
        color:white;
        line-height:normal;
        /*height:20vw;*/
        text-align:left;
        padding: 0 4% 4% 4%;
      }
        .vertical_btn a{
          margin-left:10%;
          width: 80%;
          height:4vh;
          color: #fff;
          display: block;
          text-decoration: none;
          border: 1px solid #fff;
          text-align: center;
          margin-top:1%;
          padding:1% 2% 1% 1%;
          position: relative;
          left: 0%;
          border-radius:4%;
        }
        
        .vertical_btn a:hover {
          background-color: #ffffff;
          color: rgb(212, 14, 14);
          }
        
          .vertical_name{
            
            padding-left:20px;
            text-align:left;
            font-size:20pt;
            color:white;
            font-weight:bold;
            line-height:normal;
            background-color: #087bdd5c;
            
          }
        
          .vertical_attribute{
            padding-left:20px;
            text-align:left;
            line-height:normal;
            color:white;
            text-decoration:underline;
          }
        
    
    .contents h3{
      padding-top: 3px;
      line-height: 30px;
      background-color: rgb(51 51 51 / 63%);
      text-align:center;
      letter-spacing: 0.2em;
      font-size: 180%;
      color: rgb(255, 255, 255);
      box-shadow:0px 1px 10px #002957;
      border-radius:5%
    }
    
    .contents h3 span{
      display: block;
      font-size: 60%;
    
    }
    .contents .list-column-container{
       display:block;
       justify-content: space-between;
       flex:wrap;
       margin: 1px;
    }
    .contents .list-column {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;
        background: rgba(70,70,70,0.8);
        color: #fff;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        box-shadow:0px 4px 13px #002957;
    }

    .list-column img{
      width:100%;

  }

    .contents a{
      color:inherit;
      text-decoration:none;
    }

    .contents h4{
      font-size: 150%;
      padding-left: 10px
    }
    h4{
      line-height: 5vw;
      font-size: 3.5vw!important;
    }
    
    .contents.department{
      padding: 0 100px 0 100px;
    }
    
    
    div{
      display: block;
    }
    
    .contents{
      padding: 0 4vw 0 4vw;
    }
    .contents .list-column p{
      padding:0px 5% 4% 7%;
      text-align:left;
      line-height:normal;
      font-size: 130%;
    }


    .zisseki_map{

      background-image: url(../images/Japanese_Archipelago.png);
      background-attachment:inherit;
      background-position: center;
      background-size:contain;
      background-repeat: no-repeat;
      /*background-color:rgba(200,200,200,0.5);/*?S???w?i?F-----------------*/
      text-align: center;
      font-size:medium;
      line-height:100%;
      height:350px;
      margin-bottom:250px;
      margin-top:90px
      
      
      
      }
    
    .zisseki_sum{
      
        padding: 3vw 5vw;
        color: #ffffff;
        width:70%;
        margin: 0 auto;
        font-size:5vw;
        font-weight:bold;
        background-color: #d3aa42;
      
      
    } 
    
    .area_table{
    
      width:75px;
      background-image:linear-gradient(60deg, #a58532 0%, #970505e0 74%);
      border:solid 0.5px #fcce5a;
      border-radius:8px;
      padding-top:20px;
      width:21vw;
        
    }
      
    .area_tr{
        line-height:0.5vw;

    }
        
    .area_tr:last-child *{
        border-bottom: none;
    }
        
    .prefecture{
        text-align: center;
        color: white;
        padding: 7px 0;
    }
    .number_of_works{
        text-align: center;
        color: white;
        padding: 7px 0;
    }
    
    div[class^="name_of_area"]{
      position:absolute;
      left:50%;
      font-size:normal;
      font-weight:bold;
      color:white;
      z-index:100;
    }
    table[id$="area"]{
      position:absolute;
      left:50%;
      font-weight:600;
      font-size:x-small;
    }

     
     
    #Hokkaido_area{
      margin-left:20vw;
      margin-top:-80px;
    
    }
    .name_of_area_Hokkaido{
      margin-left:20vw;
      margin-top:-73px;
    
    }
    
    
    #Tohoku_area{  
      margin-left:90px;
      margin-top:90px;
    }
    .name_of_area_Tohoku{
      margin-left:98px;
      margin-top:96px;  
    }
    #Kanto_area{
      margin-left:25vw;
      margin-top:330px;
    }
    .name_of_area_Kanto{
      margin-left:27vw;
      margin-top:336px;
    }
     #Chubu_Hokuetsu_area{
      margin-left:-20vw;
      margin-top:-75px;
    }
    .name_of_area_Chubu_Hokuetsu{
        margin-left:-19vw;
        margin-top:-70px;
    }
    #Kinki_area{
      margin-left:-0;
      margin-top:330px;
  }
  .name_of_area_Kinki{
      margin-left:2vw;
      margin-top:336px;
  }
  #Chugoku_area{
      left:10%!important;
      margin-left:-5vw;
      margin-top:103px;
  }
  .name_of_area_Chugoku{
      left:10%!important;
      margin-left:-3vw;
      margin-top:110px;
  }
  #Shikoku_area{
      margin-left:-23vw;
      margin-top:363px;
  }
  .name_of_area_Shikoku{
      margin-left:-21vw;
      margin-top:369px;
  }
  
  #Kyushu_Okinawa_area{
    left:2%!important;
    margin-top:370px;
}

.name_of_area_Kyushu_Okinawa{
    left:2%!important;
    margin-left:3px;
    margin-top:377px;    
}
    
    

    .second_contents{
      border-top:1px white solid;
      background-color:rgb(130 143 146 / 27%);
    }
    
    .service_card_container{
      background-color:rgb(130 143 146 / 69%);
      padding-top:20px;
      display:flex;
      flex-wrap:wrap;
    }
    .service_card img{
      width:85%;
    }
    .service_card{
      width:50%;
    color: #FFF;
    background: #00000000;
    }
    .service_card_btn a{
      width: 100%;
      /*height:4vh;*/
      color: #fff;
      display: block;
      text-decoration: none;
      border: 1px solid #fff;
      text-align: center;
      margin-top:1%;
      padding:1% 1% 1% 1%;
      position: relative;
      left: 0%;
      border-radius:4%;
    }
    
    .service_card_btn a:hover {
      background-color: #ffffff;
      color: rgb(255, 0, 0);
      }
    
      .service_card p {
        padding: 0 10% 0 10%;
        line-height: normal;
        text-align:left;
        font-size:normal;
      }
      .service_card h4{
        line-height:normal;
        font-size:2.7vw;
      }
    
      .service_card2 img{
        width:100%;
    }


/* CV???????????? (????) - ????????? */
.call-to-action-tel {
    /* ???????/????????? */
    background-image: linear-gradient(90deg, #790202e0 0%, #843b04 100%);
    padding: 15px 10px;
    margin: 20px auto;
    width: 90%;
    border-radius: 4px; /* ?????? */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* ???? */
    text-align: center;
    border: 1px solid #ffffff; /* ??????????????? */
    opacity: 0.75; /* ????0.75????????????? */
}
.call-to-action-tel a {
    text-decoration: none;
    color: #ffffff; /* ?????? */
    display: block;
}
.call-to-action-tel .cta-text {
    font-size: 4vw;
    font-weight: normal;
    margin: 0;
    line-height: 1.5;
}
.call-to-action-tel .cta-tel-number {
    font-size: 7vw;
    font-weight: bold;
    margin: 5px 0;
    line-height: 1;
}
.call-to-action-tel .cta-caption {
    font-size: 3vw;
    margin: 0;
    line-height: 1.5;
}
/* 2?????????????? */
.call-to-action-tel.second-cta {
    background-image: linear-gradient(90deg, #087bdd5c 0%, #1e88e5 100%);
    border: 1px solid #ffffff;
    opacity: 0.85; /* ????0.85??? */
}

    h5 span{
       font-size:20%;
       padding-top:30px;
    }
    
    h5{
      font-size: 300%;
      text-align:center;
    
    
    }


    .btn1 a {
        width:90%;
        color: #fff;
        display: block;
        text-decoration: none;
        border: 1px solid #fff;
        text-align: center;
        padding: 10px 55px 10px 55px;
        margin: 40px auto 0;
        position: absolute;
        bottom: 10px;
    
    }
    .btn1 a:hover {
        background-color: #ffffff;
        color: rgb(23,96,160);
    }
    ul.department{
      margin-top: 10px;
      display: flex;
    }
    
    .l-wrapper_01 {
      margin: 1rem auto;
      display:flex;
      overflow-x: scroll;
    
    }
    
    .card_01:hover {
      transform: translateY(-3px);
      box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
      transition: all .5s;
      box-shadow: 0px 10px 15px 10px #963535ed;
    }
    
    .card_01 {
      background-color: rgb(232 251 255 / 69%);
      box-shadow: 0 0 8px rgba(0, 0, 0, .16);
      color: #212121;
      text-decoration: none;
      width:250px;
      height:45%;
      margin:0% 1% 3% 3%;
      flex-shrink:0;
    }
    
    .card__header_01 {
      display: flex;
      flex-wrap: wrap;
    }
    
    .card__title_01 {
      padding: 0rem 1.5rem 0;
      font-size: 1rem;
      order: 1;
      margin-bottom: 0.6rem;
      font-weight: bold;
      text-decoration: none;
    }
    
    .card__thumbnail_01 {
      text-align:center;
      order:0;
    }
    .card__thumbnail_01 img{
      width:-webkit-fill-available,100%;
      height:7rem;
      
    }
    
    
    .card__body_01 {
      padding: 0 1.5rem;
    }
    
    .card__text_01 {
      font-size: .8rem;
      text-align:center;
      text-decoration: none;
      padding-bottom: 0;
    }
    
    .card__text2_01 {
      font-size: .8rem;
      margin-top: 0;
      margin-bottom: 2rem;
      text-align:left;
    }
    
    .card__text_01 + .card__text_01 {
      margin-top: .5rem;
    }
    
    .card__footer_01 {
      padding: 1rem;
      border-top: 1px solid #ddd;
    }
    
    .button_01 {
      display: inline-block;
      text-decoration: none;
      transition: background-color .3s ease-in-out;
      text-align: center;
    }
    
    .button_01 a {
      text-decoration: none;
    }
    
    .button_01.-compact {
      padding: .5rem 1rem;
      border-radius: .25rem;
      background-color: #a41717db;
      color: #fff;
      font-weight: bold;
      text-decoration: none;
    }
    
    .button_01.-compact:hover,
    .button_01.-compact:focus {
      background-color: #a41717db;
    }
    

    /*IMG?{?[?_?[??\??*/

    
    
    
    
    
    /*TABLE?{?[?_?[??\??*/
    table  {
    border:none;
    }
    
    
    /*IE--BR?o?O???*/
    br  {
    letter-spacing:normal;
    }
    
    .keiko{
      padding:1% 7% 7% 1%;
    }
    .keiko img{
      width: 85%;
      padding-left: 16.5%;
    }

    
    .title_of_introduce{
      border-bottom: 1px solid black;
      font-size: 23px;
      font-weight: bold;
      padding:30px 0 10px 30px;
    
    }
    
    .ml,.btm_lead{
      font-size: 13px;
      line-height:normal;
      padding-left:10px;
      padding-bottom:10px
    }
    .cnts{
      width:100%;
      text-align: left;
      background-color:rgba(200,200,200,0.8);
      margin-top:20px;
      padding: 20px 10px 20px 20px;
      margin-bottom:20px;
      animation-name: fadein;
      animation-duration: 1.4s;
      /*animation-iteration-count: infinite;*/
    }

    .left-right-wrapper{
      padding-top:20px;
      display:flex;
    
    }
    .left{
      width:100%;
      animation-name: fadein;
      animation-duration: 1.4s;
    }
    .left .divided_title{
      text-align: left;
      font-size: 4vw;
      font-weight: bold;
      padding: 1em 0.7em 0.9em 0.7em;
      text-shadow: 1px 1px 1px #e8b2b2;
      color: white;
      background: black;
      margin-top: 13px;
        
    }
    .left .divided_text{
      background-color:#fff0f0e0;
      text-align:left;
      line-height:normal;
      font-size:1.4vw;
      font-weight:normal;
      margin-top:20px;
      padding:1em 5em 1em 0em;
      color:black;
    }
    
    .left ul{
      font-size: 2.0vw;
      font-weight:bold;
      line-height: 1.5;
    }
    
    .left li + li{
      margin-top: 2em;
    }
    .left li{
      font-size:large;
      position: relative;
      padding-left: 25px;
      list-style:none;
      padding-top:6px;
    }
    .left li p{
      font-size:3.0vw;
      font-weight:normal;
      padding:1em 0 0 0;
    }
    
    .left li:before {
      content: "";
      position: absolute;
      top: .4em;
      left: 0px;
      -webkit-transform: rotate(50deg);
      -ms-transform: rotate(50deg);
      transform: rotate(50deg);
      width: 6px;
      height: 14px;
      border-right: 2px solid #8b6b4e;
      border-bottom: 2px solid #8b6b4e;
    }
    
    .left li:after {
      content: "";
      position: absolute;
      top: .3em;
      left: -9px;
      width: 23px;
      height: 23px;
      border: 1px solid #8b6b4e;
      border-radius: 2px;
    }
    
    .left .reform_container{
      display:flex;
    }
    .left .reform_card{
      padding-left:20px;
    }
    .left .reform_name{
      padding-left:2.2vw;
    }
    .left .reform_name span{
      font-size:1vw;
      font-weight:normal;
      
    }
    
    
    .right{
          padding-left:74%;
          width:96%;
          position:fixed;
          top:9.4%;
          display:none;
    
    }
    
    .menu_btn{
      padding-top:10px;
      
    }
    .right #menu_btn1 a{
      animation-name: fadein-fastest;
      animation-duration:1.0s;
    }
    .right #menu_btn2 a{
      animation-name: fadein-fastest;
      animation-duration:1.4s;
    }
    .right #menu_btn3 a{
      animation-name: fadein-fastest;
      animation-duration:1.7s;
    }
    .right #menu_btn4 a{
      animation-name: fadein-fastest;
      animation-duration:2.0s;
    }
    .right #menu_btn5 a{
      animation-name: fadein-fastest;
      animation-duration:2.3s;
    }
    .right #menu_btn6 a{
      animation-name: fadein-fastest;
      animation-duration:2.6s;
    }
    .right #menu_btn7 a{
      animation-name: fadein-fastest;
      animation-duration:2.9s;
    }
    
    .menu_btn a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      padding: 1em 2em 1em 1em;
      background-color:#aa2f2f40;
      color: #b12222;
      width:23vw;
      border-radius:7px;
      text-shadow: 2px 2px 8px #e8b2b2;
      font-size: 18px;
      font-weight: 700;
      border: 2px solid #b12222;
    }
    
    
    .menu_btn a::after {
      content: '';
      width: 5px;
      height: 5px;
      border-top: 3px solid #b12222;
      border-right: 3px solid #b12222;
      transform: rotate(45deg);
    }
    
    .menu_btn a:hover {
      color: #333333;
      text-decoration: none;
      background-color: #d79a9ad1;
    }
    
    .menu_btn a:hover::after {
      border-top: 3px solid #333333;
      border-right: 3px solid #333333;
    }
    


    .topics{
      padding-bottom: 20px;
    
    }
    .topics dl {
    border-bottom: 1px solid #ccc;
    text-align:center;
    }
    
    .topics dt {
      clear: left;
      float: left;
      width: 20%;
      background: #d10000d6;
      color: white;
      padding: 1vw;

    }
    .topics dd {
      text-align:center;
      color: #131313;
      font-size: normal;
      line-height: normal;
      padding-top:1vw;
    }
    
    .topics2{
      padding-bottom: 20px;
    
    }
    .topics2 dl {
    border-bottom: 1px solid #ccc;
    margin:2vw 7vw 7px 7vw;
    }
    
    .topics2 dt {
      width: 17%;
      color: black;
      padding: 5px 5px 5px 5px;
      font-size: 1vw;
    }
    .topics2 dd {
      text-align:left;
      color: #131313;
      line-height: normal;
    
    }
    
    .timeline {
      list-style: none;
      padding-left:1vw;
    }
    .timeline > li {
      margin-bottom: 60px;
    }
    
    /* for Desktop */

      .timeline > li {
        overflow: hidden;
        margin: 0;
        position: relative;
      }
      .timeline-date {
        width: 18vw;
        float: left;
        margin-top: 20px;
        padding-left:4vw;
      }
      .timeline-content {
 
        font-size:normal;
        color: black;
        line-height: normal;
        border-left: 3px #e5e5d1 solid;
        margin-left:1vw;
        border-bottom: 1px white solid;
        padding-top: 5vw;
        text-align:center;
      }
      .timeline-content:before {
        content: '';
        width: 12px;
        height: 12px;
        background: #c20000;
        position: absolute;
        left: 0vw;
        top: 19px;
        border-radius: 100%;
      }
    
    

    .access_card{
      padding-top:20px;
    }
    
    .access_name span{
      color:black;
      font-size:15px;
      font-weight:bold;
      
    }
    
    .access_container{
        display:flex;
        justify-content:space-evenly;
    }

    .access_container img{
      width:85%;
  }


    * {

      /* ???????d?v?I?I */
      box-sizing: border-box;
    }
    
    
    
    @keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }

    @keyframes fadein-fast {
      from {
          opacity: 0;
          transform: translateY(60px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
      }
    
      @keyframes fadein-fastest {
        from {
            opacity: 0;
            transform: translateX(100px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
        }

        @keyframes fadeInLeft {
          0% {
            opacity: 0;
            transform: translateX(-30px);
          }
          100% {
            opacity: 1;
          }
        }
    /*?p?????????X?g?w??-----------------*/
    #pan{
    text-align:right;
    font-size:10px;
    }

    img{
      width:100%;
    }
  }


@media screen and (min-width: 1201px){
html{
  min-width:1200px;
}

body {

background-color:rgba(200,200,200,0.5);/*?S???w?i?F-----------------*/
text-align: center;
font-size:medium;
line-height:100%;
color:#555555;/*??{??????F-----------------*/
/*margin-top:25px;/*?R???e???c?{?b?N?X???�H?��????????????-----------------
margin-bottom:0px;
padding-left:10px;
padding-right:10px;*/
}

.disp-img:before{
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100vw;
  height:100vh;
  background:url(../images/sample5.jpeg) no-repeat center/cover;
  content:"";
}

#disp-img{
  position: relative;
  z-index: 0;
  background: #7777771f;
}


.btn_mitsumori a{
  width:40%;
  color: #fff;
  display: block;
  text-decoration: none;
  border: 1px solid #fff;
  text-align: center;
  padding: 10px 5px 10px 5px;
  position: relative;
  left:4%;
  animation-name: fadein;
  animation-duration:1.4s;
}
.btn_mitsumori a:hover {
background-color: #ffffff;
color: rgb(168, 2, 2);
}

#catch_copy{
  /*margin-right: 300px;*/
  font-size: 300%;
  font-weight:bold;
  margin-left:2.5%;
  color: #ffffff;
  margin-top: 250px;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  animation-name: fadein;
  animation-duration:1.0s;
  
}
#catch_copy_sub{
  color: #ffffff;
  margin-right: 540px;
  font-size: 100%;
  margin-left: 30px;
  margin-bottom: 200px;
  white-space: nowrap;
  text-align: left;

}
   
/*?~??z?u*/
.seien{
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  padding-right:60%;
  padding-left:3%;
  padding-top:3%;

  }
 .seien #seien1{
    animation-name: fadein-fast;
    animation-duration:1.3s;
  }
 .seien #seien2{
    animation-name: fadein-fast;
    animation-duration:2.1s;
  }
 .seien #seien3{
    animation-name: fadein-fast;
    animation-duration:3.0s;
  }
  /*?~?????*/
  .seien div{
    width: calc(63%/2);
    border-radius: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-box-pack: center;
    align-items: center;
    -webkit-box-align: center;
    color: #ffffff;
    border: 1px solid #4c4c4c;
    background: #ff000045;
    text-align: center;
    font-weight: 600;
    font-size: large;
    line-height: normal;
    border: 1px solid #b66f6f;
  }
  /*?[???v?f*/
  .seien div:before{
  display: block;
  content: '';
  padding-top: 100%;
  }

.vertical_contents{
  border-top:1px solid rgb(238, 238, 238);
  margin-top:1%;
  background:#00000045;
  padding-bottom:10px;
  animation-name: fadein;
  animation-duration:3.2s;
 
}

.vertical_contents_forconts .htitle{
  background-color:#7d0000ba;
}



.htitle {
  font-size: 200%;
  color: white;
  font-weight: bold;
  padding-top: 1%;
  padding-bottom: 21px;
  line-height: normal;
  background-color: #c007075c;;
}
.about{

  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  padding-top: 30px;
}
.vertical_pic_top img{
  padding-left:0%;
  height:23vw;
  width: auto;
}



.about .vertical_pic_example img{

  height:25vw;
  width:auto;
 }
.vertical_top{
  margin-top:3%;
  margin-right:0;
  font-size:1.34vw;
  font-weight:100;
  color:white;
  line-height:normal;
  /*height:20vw;*/
  text-align:left;
  background:#0000009c;
  padding: 4% 4% 4% 4%;
}
.vertical_right{
  height:20vw;
}
.vertical{
  margin-top:3%;
  margin-right:0;
  font-size:1.4vw;
  font-weight:100;
  color:white;
  line-height:normal;
  /*height:20vw;*/
  text-align:left;
  background:#0000009c;
  padding: 4% 4% 4% 4%;
}
.vertical_btn a{
  width: 30%;
  height:4vh;
  color: #fff;
  display: block;
  text-decoration: none;
  border: 1px solid #fff;
  text-align: center;
  margin-top:1%;
  padding:1% 1% 1% 1%;
  position: relative;
  left: 0%;
  border-radius:4%;
}

.vertical_btn a:hover {
  background-color: #ffffff;
  color: rgb(212, 14, 14);
  }

  .vertical_name{
    text-align:left;
    font-size:20pt;
    color:white;
    font-weight:bold;
    line-height:normal;
    background-color: #ffa500a3;
    
  }

  .vertical_attribute{
    text-align:left;
    line-height:normal;
    color:white;
    text-decoration:underline;
  }


.contents h3{
  line-height: normal;
  background-color: rgb(0 0 0 / 73%);
  text-align:center;
  letter-spacing: 0.2em;
  font-size: 180%;
  color: rgba(255,255,255,1);
  height: 90px;
    align-items: center;
    padding-top: 15px;
}

.contents h3 span{
  display: block;
  font-size: 30%;

}
.contents .list-column-container{
   display: flex;
   justify-content: space-between;
   flex:wrap;
   margin-top: 3vw;
   margin-left:10vw;
   margin-right:10vw;
}
.contents .list-column {
    display: flex;
    flex-direction: column;
    width: 32%;
    margin-bottom: 20px;
    background: rgba(70,70,70,0.8);
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px 0 #000000;
}

  .contents .list-column:hover{
      transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  transition: all .5s;
  box-shadow: 0px 10px 15px 10px #963535ed;
  }

  .contents a{
    color:inherit;
    text-decoration:none;
  }

.contents figure {
  position: relative;
  padding-top: 40%; /* ?? */
}
.contents figure img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height:11vw;
  transform: translate(-50%, -50%);
  /*object-fit: cover;*/

}
.contents h4{
  font-size: 150%;
  padding-left: 10px;
  line-height:normal;
  
}

.contents.department{
  padding: 0 100px 0 100px;
}


div{
  display: block;
}

.contents{
  padding: 0 0.5% 0 0.5%;
}
.contents .list-column p{
  /*padding-top:5%;*/
  padding-right:10%;
  padding-left:10%;
  padding-bottom:5%;
  line-height:1.4em;
  text-align:left;
  flex:1 0 auto;
  font-size: 100%;
}

.zisseki_map{

  background-image: url(../images/Japanese_Archipelago.png);
  background-attachment:inherit;
  background-position: center;
  background-size:contain;
  background-repeat: no-repeat;
  /*background-color:rgba(200,200,200,0.5);/*?S???w?i?F-----------------*/
  text-align: center;
  font-size:medium;
  line-height:100%;
  height:550px;
  margin-bottom:250px;
  margin-top:90px
  
  
  
  }

.zisseki_sum{
  
    padding: 2vw 4vw;
    color: #ffffff;
    width:65%;
    margin: 0 auto;
    font-size:3.5vw;
    font-weight:bold;
    background-color: #e7ba49;
    opacity:0.95;
  
  
} 

.area_table{

  width:150px;
  background-image:linear-gradient(60deg, #9b7d32 0%, #8f0404e0 74%);
  border:solid 0.5px #fcce5a;
  border-radius:8px;
  padding-top:35px;
}
  
.area_tr{
    line-height:8px;
}
    
.area_tr:last-child *{
    border-bottom: none;
}
    
.prefecture{
    text-align: center;
    color: white;
    padding: 10px 0;
}
.number_of_works{
    text-align: center;
    color: white;
    padding: 10px 0;
}

div[class^="name_of_area"]{
  position:absolute;
  left:50%;
  font-size:large;
  font-weight:bold;
  color:white;
  z-index:100;
}
table[id$="area"]{
  position:absolute;
  left:50%;
}


#Hokkaido_area{
  margin-left:230px;
  margin-top:-30px;

}
.name_of_area_Hokkaido{
  margin-left:258px;
  margin-top:-16px;

}
#Tohoku_area{  
  margin-left:200px;
  margin-top:90px;
}
.name_of_area_Tohoku{
  margin-left:243px;
  margin-top:104px;  
}
#Kanto_area{
  margin-left:220px;
  margin-top:330px;
}
.name_of_area_Kanto{
  margin-left:261px;
  margin-top:344px;
}
 #Chubu_Hokuetsu_area{
    margin-left:-170px;
    margin-top:-82px;
}
.name_of_area_Chubu_Hokuetsu{
    margin-left:-158px;
    margin-top:-70px;
}
#Kinki_area{
    margin-left:-10px;
    margin-top:460px;
}
.name_of_area_Kinki{
    margin-left:32px;
    margin-top:474px;
}
#Chugoku_area{
    margin-left:-347px;
    margin-top:103px;
}
.name_of_area_Chugoku{
    margin-left:-306px;
    margin-top:115px;
}
#Shikoku_area{
    margin-left:-197px;
    margin-top:563px;
}
.name_of_area_Shikoku{
    margin-left:-157px;
    margin-top:575px;
}

#Kyushu_Okinawa_area{
    margin-left:-410px;
    margin-top:370px;
}

.name_of_area_Kyushu_Okinawa{
    margin-left:-399px;
    margin-top:380px;    
}

.second_contents{
  border-top:1px white solid;
  background-color:#18181880
}

.service_card_container{
  display:flex;
  flex-wrap:wrap;
  margin-left:10%;
}
.service_card img{
  width:85%;
}
.service_card{
width: 30%;
color: #FFF;
background: #00000000;
}
.service_card_btn a{
  width: 30%;
  /*height:4vh;*/
  color: #fff;
  display: block;
  text-decoration: none;
  border: 1px solid #fff;
  text-align: center;
  margin-top:1%;
  padding:1% 1% 1% 1%;
  position: relative;
  left: 0%;
  border-radius:4%;
}

.service_card_btn a:hover {
  background-color: #ffffff;
  color: rgb(255, 0, 0);
  }

  .service_card p {
    padding: 0 20% 0 20%;
    line-height: normal;
    text-align:left;
  }
  .service_card h4{
    line-height:normal;
  }


/* CV???????????? (PC) - ????????? */
.call-to-action-tel {
    /* ???????/????????? */
    background-image: linear-gradient(90deg, #6b0303e0 0%, #843402 100%);
    padding: 20px 30px;
    margin: 40px auto;
    width: 60%;
    border-radius: 4px; /* ?????? */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6); /* ???? */
    text-align: center;
    border: 1px solid #ffffff; /* ??????????????? */
    opacity: 0.80; /* ????0.80????????????? */
}
.call-to-action-tel a {
    text-decoration: none;
    color: #ffffff; /* ?????? */
    display: block;
}
.call-to-action-tel .cta-text {
    font-size: 1.5vw;
    font-weight: normal;
    margin: 0;
    line-height: 1.5;
}
.call-to-action-tel .cta-tel-number {
    font-size: 3vw;
    font-weight: bold;
    margin: 5px 0;
    line-height: 1;
}
.call-to-action-tel .cta-caption {
    font-size: 1.2vw;
    margin: 0;
    line-height: 1.5;
}
/* 2?????????????? */
.call-to-action-tel.second-cta {
    background-image: linear-gradient(90deg, #087bdd5c 0%, #1e88e5 100%);
    border: 1px solid #ffffff;
    opacity: 0.95; /* ????0.85??? */
}

h5 span{
   font-size:20%;
   padding-top:30px;
}

h5{
  font-size: 300%;
  text-align:center;


}
.btn1 a {
    color: #fff;
    display: block;
    text-decoration: none;
    border: 1px solid #fff;
    text-align: center;
    padding: 10px 55px 10px 55px;
    margin: 40px auto 0;
    position: absolute;
    bottom: 10px;

}
.btn1 a:hover {
    background-color: #ffffff;
    color: rgb(160, 23, 23);
}
ul.department{
  margin-top: 10px;
  display: flex;
}

.l-wrapper_01 {
  margin: 1rem auto;
  
  display:flex;
  justify-content:center;

}

.card_01:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  transition: all .5s;
  box-shadow: 0px 10px 15px 10px #963535ed;
}

.card_01 {
  background-color: #dde6ffb8;
  box-shadow: 0 0 8px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
  width:25%;
  margin:0 1% 3% 1%;
}

.card__header_01 {
  display: flex;
  flex-wrap: wrap;
}

.card__title_01 {
  padding: 1rem 1.5rem 0;
  font-size: 1.6rem;
  order: 1;
  margin-bottom: 0.6rem;
  font-weight: bold;
  text-decoration: none;
}

.card__thumbnail_01 {
  text-align:center;
  order:0;
}
.card__thumbnail_01 img{
  width:20vw;
}


.card__body_01 {
  padding: 0 1.5rem;
}

.card__text_01 {
  font-size: .8rem;
  text-align:center;
  text-decoration: none;
	padding-bottom: 0;
}

.card__text2_01 {
  font-size: .8rem;
  margin-top: 0;
  margin-bottom: 2rem;
}

.card__text_01 + .card__text_01 {
  margin-top: .5rem;
}

.card__footer_01 {
  padding: 1rem;
  border-top: 1px solid #ddd;
}

.button_01 {
  display: inline-block;
  text-decoration: none;
  transition: background-color .3s ease-in-out;
  text-align: center;
}

.button_01 a {
  text-decoration: none;
}

.button_01.-compact {
  padding: .5rem 1rem;
  border-radius: .25rem;
  background-color: #a41717db;
  color: #fff;
  font-weight: bold;
	text-decoration: none;
}

.button_01.-compact:hover,
.button_01.-compact:focus {
  background-color: #a41717db;
}

.topics{
  padding-bottom: 20px;

}
.topics dl {
border-bottom: 1px solid #ccc;
margin:2vw 7vw 7px 7vw;
}

.topics dt {
  clear: left;
  float: left;
  width: 16%;
  background: black;
  color: white;
  padding: 7px 7px 7px 7px;
  font-size: 1.5vw;
}
.topics dd {
  padding-right:10px;
  color: #131313;
  font-size: 1vw;
  line-height: normal;
}

.topics2{
  padding-bottom: 20px;

}
.topics2 dl {
border-bottom: 1px solid #ccc;
margin:2vw 7vw 7px 7vw;
}

.topics2 dt {
  width: 20%;
  color: black;
  padding: 5px 5px 5px 5px;
  font-size: 1vw;
}
.topics2 dd {
  text-align:left;
  color: #131313;
  font-size: 1vw;
  line-height: normal;

}

.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    font-size: large;
    color: black;
    line-height: normal;
    border-left: 3px #e5e5d1 solid;
    padding-left: 30px;
    border-bottom: 1px white solid;
    padding-top: 10px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #c20000;
    position: absolute;
    left: 106px;
    top: 19px;
    border-radius: 100%;
  }
}

.access_card{
  padding-top:20px;
}

.access_name span{
  color:black;
  font-size:20px;
  font-weight:bold;
  
}

.access_container{
    display:flex;
    justify-content:space-evenly;
}


/*IMG?{?[?_?[??\??*/
img  {
border: none;
vertical-align:top;
}





/*TABLE?{?[?_?[??\??*/
table  {
border:none;
}


/*IE--BR?o?O???*/
br  {
letter-spacing:normal;
}

.keiko{
  display:flex;
  padding:1% 7% 7% 1%;
}
.keiko img{
  width:23vw;

}
.title_of_introduce{
  border-bottom: 1px solid black;
  color: #550000;
  text-align:center;
  font-size: 28px;
  font-weight: bold;
  padding:30px 0 10px 40px;

}

.ml,.btm_lead{
  line-height: 25px;
  font-size: 25px;
  line-height:2vw;

}
.btm_lead p{
  font-size:large;
  padding:0 0rem 0 4rem;
  text-align:left;
}
.vertical_contents_forconts{
  animation-name: fadein;
  animation-duration:1s;
}
.cnts{
    text-align: center;
    background-color:rgba(200,200,200,0.89);
    margin:20px 14vw 0 14vw;
    padding: 20px 30px 20px 40px;
    margin-bottom:20px;
    animation-name: fadein;
    animation-duration:1.4s;
    /*animation-iteration-count: infinite;*/
}
.access_container{
  display:flex;
  justify-content:space-evenly;
}

.access_map img{
  width:90%;
}
* {
  /* ???????d?v?I?I */
  box-sizing: border-box;
}

.left-right-wrapper{
  padding-top:20px;
  display:flex;

}
.left{
  padding-left:5%;
  width:73%;
  animation-name: fadein;
  animation-duration: 1.4s;
}
.left .divided_title{
  text-align:left;
    font-size:3vw;
    font-weight:bold;
    padding:0.7em 0.5em 0.7em 1em;
    text-shadow:1px 1px 1px #e8b2b2;
    color:white;
    background:black;
    margin-top:13px;
    
}
.left .divided_text{
  background-color:#fff0f0e0;
  text-align:left;
  line-height:normal;
  font-size:1.4vw;
  font-weight:normal;
  margin-top:20px;
  padding:1em 5em 1em 2em;
  color:black;
}

.left ul{
  font-size: 2.0vw;
  font-weight:bold;
  line-height: 1.5;
}

.left li + li{
  margin-top: 2em;
}
.left li{
  position: relative;
  padding-left: 25px;
  list-style:none;
}
.left li p{
  font-size:1.5vw;
  font-weight:normal;
  padding:1em 0 0 1em;
}

.left li:before {
  content: "";
  position: absolute;
  top: .4em;
  left: 8px;
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
  width: 6px;
  height: 14px;
  border-right: 2px solid #8b6b4e;
  border-bottom: 2px solid #8b6b4e;
}

.left li:after {
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 23px;
  height: 23px;
  border: 1px solid #8b6b4e;
  border-radius: 2px;
}

.left .reform_container{
  display:flex;
}
.left .reform_card{
  padding-left:20px;
}
.left .reform_name{
  padding-left:2.2vw;
}
.left .reform_name span{
  font-size:1vw;
  font-weight:normal;
  
}



.right{
      padding-left:74%;
      width:96%;
      position:fixed;
      top:195px;

}

.menu_btn{
  padding-top:10px;
  
}
.right #menu_btn1 a{
  animation-name: fadein-fastest;
  animation-duration:1.0s;
}
.right #menu_btn2 a{
  animation-name: fadein-fastest;
  animation-duration:1.4s;
}
.right #menu_btn3 a{
  animation-name: fadein-fastest;
  animation-duration:1.7s;
}
.right #menu_btn4 a{
  animation-name: fadein-fastest;
  animation-duration:2.0s;
}
.right #menu_btn5 a{
  animation-name: fadein-fastest;
  animation-duration:2.3s;
}
.right #menu_btn6 a{
  animation-name: fadein-fastest;
  animation-duration:2.6s;
}
.right #menu_btn7 a{
  animation-name: fadein-fastest;
  animation-duration:2.9s;
}


.menu_btn a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em 1em 1em;
  background-color:#aa2f2f40;
  color: #b12222;
  width:23vw;
  border-radius:7px;
  text-shadow: 2px 2px 8px #e8b2b2;
  font-size: 18px;
  font-weight: 700;
  border: 2px solid #b12222;
}


.menu_btn a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #b12222;
  border-right: 3px solid #b12222;
  transform: rotate(45deg);
}

.menu_btn a:hover {
  color: #333333;
  text-decoration: none;
  background-color: #d79a9ad1;
}

.menu_btn a:hover::after {
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
}






@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes fadein-fast {
  from {
      opacity: 0;
      transform: translateY(60px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
  }

  @keyframes fadein-fastest {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
    }
/*?p?????????X?g?w??-----------------*/
#pan{
text-align:right;
font-size:10px;
}

.mitsumori{
  
  margin-top: 30px;
  padding-top: 10px;
  margin-left: 10%;
  padding-left:10%;
  margin-right: 10%;
  padding-right: 10%;
  margin-bottom: 30px;
  padding-bottom: 10px;
  color:#fff;
  background:rgba(70,70,70,0.8);
  width:80%;

}

.mitsumori label{
  text-align:left;
}
img{
  width:100%;
}

}