@charset "UTF8";

/*----------------------------
縦向きの場合スマホスタイル
----------------------------*/

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

  .topimage-area{
    display: none;
  }

  .topimage-print-area{
    display: none;
  }

  .m-topimage-area{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .topimage-area img{
    width: 100%;
    vertical-align: bottom;
  }

  .m-top-image-touka{
    width: 100%;
    height: 35vh;
  }

  .m-top-image-touka img{
    width: 100%;
    vertical-align: bottom;
  }

  .m-top-image-slide{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .topimage-area-line{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
  }

  .topimage-area-line img{
    width: 100%;
    height: 20vh;
    vertical-align: bottom;
  }

  .topimage-area-text{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /*top: 12%;
    left: 3%;*/
  }

  .topimage-area-text img{
    width: 100%;
    vertical-align: bottom;
    filter: drop-shadow(2px 2px 0.5px #000);
  }

  h1.m-topimage-area-text{
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 100;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -115%);
    text-align: left;
    font-size: 3.5vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, .9));
    margin: 0;
  }


  p.topimage-area-text{
    width: 90%;
    position: absolute;
    z-index: 100;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -100%);
    text-align: left;
    font-size: 4vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, .9));
    margin: 0;
  }

  .topimage-text{
    position: absolute;
    top: 10%;
    left: 5%;
  }

  .topimage-text img{
    width: 90%;
  }

  .introduction-area{
    display: none;
  }

  .p-introduction-area{
    display: none;
  }

  .m-introduction-area{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #869fb6;
    margin: 15% 0;
  }

  .introduction-text-inner{
    width: 90%;
    margin: 0 auto;
  }

  .introduction-text-inner p{
    font-size: 3vw;
    color: #fff;
    text-align: left;
  }

  .introduction-text-top{
    width: 100%;
    margin: 0 auto;
  }

  .introduction-text-top p{
    font-size: 7vw;
    font-weight: bold;
    line-height: 8vw;
    color: #fff;
    text-align: center;
    margin: 0;
  }

  .introduction-text-bottom{
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .introduction-text-bottom p{
    font-size: 3.5vw;
    line-height: 5vw;
    color: #fff;
    text-align: left;
  }

  .introduction-image-area{
    width: 90%;
    margin: 0 auto;
  }

  .introduction-image-area-inner{
    width: 60%;
    display: flex;
  }

  .introduction-image-photo{
    margin-right: 15%;
    padding: 0;
  }

  .introduction-image-photo img{
    width: 100%;
  }

  .introduction-text{
    width: 60%;
    display: flex;
    align-items: center;
  }

  .introduction-photo{
    width: 40%;
    position: relative;
    top: 0;
    left: 0;
  }

  .introduction-photo1{
    width: 70%;
    position: absolute;
    top: -45%;
    left: 0;
    z-index: 1000;
  }

  .introduction-photo1 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(10px 10px 3px #000);
  }

  .introduction-photo2{
    width: 70%;
    position: absolute;
    top: 35%;
    left: 20%;
    z-index: 1100;
  }

  .introduction-photo2 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(10px 10px 3px #000);
  }

}


/*-----------------------
 横向きの場合スマホスタイル
-------------------------*/

@media screen and (min-width: 481px) and (max-width: 896px) {

  .m-topimage-area{
    display: none;
  }

  .topimage-print-area{
    display: none;
  }

  .topimage-area{
    width: 100%;
    height: 95vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .topimage-area img{
    width: 100%;
    vertical-align: bottom;
  }

  .topimage-container{
    width: 100%;
    height: 95vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .topimage-container{
    width: 100%;
    height: 95vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
  }

  .topimage-left{
    width: 60%;
    height: 95vh;
  }

  .topimage-left-top{
    width: 100%;
    height: 40vh;
    display: flex;
    flex-direction: column;
  }

  .topimage-left-top-eng{
    width: 100%;
    padding-left: 5%;
  }

  .topimage-left-top-eng img{
    width: 100%;
    vertical-align: bottom;
    margin: 3% 0;
  }

  .topimage-left-top-eng h3{
    color: #1f4e79;
    font-size: 3vw;
  }

  .topimage-left-top-jap{
    width: 50%;
    padding-left: 5%;
  }

  .topimage-left-top-jap img{
    width: 100%;
    vertical-align: bottom;
    margin: 3% 0;
  }

  .topimage-left-top-jap p{
    color: #1f4e79;
    font-size: 2vw;
  }


  .topimage-left-bottom{
    width: 100%;
    padding-left: 5%;
    display: flex;
    position: relative;
    top: -10%;
  }

  .topimage-left-bottom-left{
    width: 45%;
  }

  .topimage-left-bottom-right{
    width: 25%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    top: 0;
    left: -20%;
    /*margin-left: 3%;*/
  }

  .topimage-left-bottom-right img{
    width: 80%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  #topimg-navi1{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin: 8% 0;
    display: flex;
  }

  #topimg-navi1:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content_jp.png");
    background-size: contain;
  }

  #topimg-navi2{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    margin: 8% 0;
  }

  #topimg-navi2:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile_jp.png");
    background-size: contain;
  }

  #topimg-navi3{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    margin: 8% 0;
  }

  #topimg-navi3:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry_jp.png");
    background-size: contain;
  }

  #topimg-navi4{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    margin: 8% 0;
  }

  #topimg-navi4:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit_jp.png");
    background-size: contain;
  }

  .topimage-right{
    width: 40%;
    height: 95vh;
  }

  .topimage-area-line{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
  }

  .topimage-area-line img{
    width: 100%;
    height: 95vh;
    vertical-align: bottom;
  }

  h1.topimage-area-text{
    width: 76%;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 35%;
    transform: translate(-50%, -240%);
    text-align: center;
    font-size: 3.3vw;
    font-weight: 100;
    letter-spacing: 0.1em;
    color: #fff;
    /*filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, .9));*/
    margin: 0;
    font-family: 'Hind Madurai', sans-serif;
  }

  h1.m-topimage-area-text{
    display: none;
  }


  p.topimage-area-text{
    width: 90%;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    text-align: center;
    font-size: 1.95vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, .9));
    margin: 0;
  }

  .topimage-text{
    position: absolute;
    top: 10%;
    left: 5%;
  }

  .topimage-text img{
    width: 50%;
  }

  .introduction-area{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #869fb6;
    display: flex;
    flex-direction: column;
    margin: 10% 0;
  }

  .p-introduction-area{
    display: none;
  }

  .m-introduction-area{
    display: none;
  }

  .introduction-text-inner{
    width: 90%;
    margin: 0 auto;
  }

  .introduction-text-inner p{
    font-size: 2vw;
    color: #fff;
  }

  .introduction-text-top{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-text-top p{
    font-size: 6vw;
    line-height: 7vw;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 0;
  }

  .introduction-text-bottom{
    width: 100%;
    margin: 2% auto;
  }

  .introduction-text-bottom p{
    font-size: 2vw;
    line-height: 6vw;
    color: #fff;
    text-align: center;
    margin: 0;
  }

  .introduction-image-area{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-image-area-inner{
    width: 70%;
    display: flex;
  }

  .introduction-image-photo{
    margin-right: 15%;
    padding: 0;
  }

  .introduction-image-photo img{
    width: 100%;
  }

  .introduction-text{
    width: 60%;
  }

  .introduction-photo{
    width: 40%;
    display: flex;
    align-items: center;
    position: relative;
    top: 0;
    left: 0;
  }

  .introduction-photo1{
    width: 85%;
    position: absolute;
    top: -15%;
    left: -20%;
    z-index: 1000;
  }

  .introduction-photo1 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }

  .introduction-photo2{
    width: 85%;
    position: absolute;
    top: 50%;
    left: 5%;
    z-index: 1100;
  }

  .introduction-photo2 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }

}

/*-------------------
タブレット
-------------------*/
@media screen and (min-width: 897px) and (max-width: 1024px) {

  .m-topimage-area{
    display: none;
  }

  .topimage-print-area{
    display: none;
  }

  .topimage-area{
    width: 100%;
    height: 34vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    background: #f2f2f2;
  }

  .topimage-area img{
    width: 100%;
    vertical-align: bottom;
  }

  .topimage-container{
    width: 100%;
    height: 34vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .topimage-container{
    width: 100%;
    height: 34vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
  }

  .topimage-left{
    width: 60%;
    height: 34vh;
    position: relative;
    top: 0;
    left: 0;
  }

  .topimage-left-top{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .topimage-left-top-eng{
    width: 100%;
    padding-left: 5%;
  }

  .topimage-left-top-eng img{
    width: 100%;
    vertical-align: bottom;
    margin: 3% 0;
  }

  .topimage-left-top-eng h3{
    color: #1f4e79;
    font-size: 3vw;
  }

  .topimage-left-top-jap{
    width: 50%;
    padding-left: 5%;
  }

  .topimage-left-top-jap img{
    width: 100%;
    vertical-align: bottom;
    margin: 3% 0;
  }

  .topimage-left-top-jap p{
    color: #1f4e79;
    font-size: 2vw;
  }


  .topimage-left-bottom{
    width: 100%;
    padding-left: 5%;
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
  }

  .topimage-left-bottom-left{
    width: 37%;
  }

  .topimage-left-bottom-right{
    width: 25%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-left: 3%;
    position: absolute;
    top: 50%;
    left: 28%;
  }

  .topimage-left-bottom-right img{
    width: 80%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  #topimg-navi1{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi1:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content_jp.png");
    background-size: contain;
  }

  #topimg-navi2{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi2:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile_jp.png");
    background-size: contain;
  }

  #topimg-navi3{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi3:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry_jp.png");
    background-size: contain;
  }

  #topimg-navi4{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi4:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit_jp.png");
    background-size: contain;
  }

  .topimage-right{
    width: 40%;
    height: 95vh;
  }

  .topimage-area-line{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
  }

  .topimage-area-line img{
    width: 100%;
    height: 95vh;
    vertical-align: bottom;
  }

  h1.topimage-area-text{
    width: 76%;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 35%;
    transform: translate(-50%, -240%);
    text-align: center;
    font-size: 3.3vw;
    font-weight: 100;
    letter-spacing: 0.1em;
    color: #fff;
    /*filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, .9));*/
    margin: 0;
    font-family: 'Hind Madurai', sans-serif;
  }

  h1.m-topimage-area-text{
    display: none;
  }


  p.topimage-area-text{
    width: 90%;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    text-align: center;
    font-size: 1.95vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, .9));
    margin: 0;
  }

  .topimage-text{
    position: absolute;
    top: 10%;
    left: 5%;
  }

  .topimage-text img{
    width: 50%;
  }

  .m-introduction-area{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #869fb6;
    display: flex;
    flex-direction: column;
    margin: 10% 0;
  }

  .p-introduction-area{
    display: none;
  }

  .introduction-area{
    display: none;
    /*width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #869fb6;
    margin: 12% 0 7% 0;*/
  }

  .introduction-text-inner{
    width: 100%;
    margin: 0 auto;
  }

  .introduction-text-inner p{
    font-size: 2vw;
    color: #fff;
  }

  .introduction-text-top{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-text-top p{
    font-size: 5vw;
    line-height: 6vw;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 0;
  }

  .introduction-text-bottom{
    width: 60%;
  }

  .introduction-text-bottom p{
    font-size: 2vw;
    line-height: 3vw;
    color: #fff;
    text-align: center;
  }

  .introduction-image-area{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-image-area-inner{
    width: 60%;
    display: flex;
  }

  .introduction-text{
    width: 60%;
  }

  .introduction-image-photo{
    margin-right: 15%;
    padding: 0;
  }

  .introduction-image-photo img{
    width: 100%;
  }

  .introduction-photo{
    width: 40%;
    position: relative;
    top: 0;
    left: 0;
  }

  .introduction-photo1{
    width: 70%;
    position: absolute;
    top: -50%;
    left: 0;
    z-index: 1000;
  }

  .introduction-photo1 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }

  .introduction-photo2{
    width: 70%;
    position: absolute;
    top: 60%;
    left: 24%;
    z-index: 1100;
  }

  .introduction-photo2 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }


}

/*-------------------
タブレット_横
-------------------*/
@media screen and (min-width: 1025px) and (max-width: 1400px) {

  .m-topimage-area{
    display: none;
  }

  .topimage-print-area{
    display: none;
  }

  .topimage-area{
    width: 100%;
    height: 65vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    background: #f2f2f2;
  }

  .topimage-area img{
    width: 100%;
    vertical-align: bottom;
  }

  .topimage-container{
    width: 100%;
    height: 65vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .topimage-container{
    width: 100%;
    height: 65vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
  }

  .topimage-left{
    width: 60%;
    height: 65vh;
    position: relative;
    top: 0;
    left: 0;
  }

  .topimage-left-top{
    width: 100%;
    height: 35vh;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 5%;
    left: 0;
  }

  .topimage-left-top-eng{
    width: 100%;
    padding-left: 5%;
  }

  .topimage-left-top-eng img{
    width: 100%;
    vertical-align: bottom;
    margin: 3% 0;
  }

  .topimage-left-top-eng h3{
    color: #1f4e79;
    font-size: 3vw;
  }

  .topimage-left-top-jap{
    width: 50%;
    padding-left: 5%;
  }

  .topimage-left-top-jap img{
    width: 100%;
    vertical-align: bottom;
    margin: 3% 0;
  }

  .topimage-left-top-jap p{
    color: #1f4e79;
    font-size: 2vw;
  }


  .topimage-left-bottom{
    width: 100%;
    padding-left: 5%;
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
  }

  .topimage-left-bottom-left{
    width: 36%;
  }

  .topimage-left-bottom-right{
    width: 25%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-left: 3%;
    position: absolute;
    top: 50%;
    left: 28%;
  }

  .topimage-left-bottom-right img{
    width: 80%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  #topimg-navi1{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi1:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content_jp.png");
    background-size: contain;
  }

  #topimg-navi2{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi2:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile_jp.png");
    background-size: contain;
  }

  #topimg-navi3{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi3:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry_jp.png");
    background-size: contain;
  }

  #topimg-navi4{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi4:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit_jp.png");
    background-size: contain;
  }

  .topimage-right{
    width: 40%;
    height: 95vh;
  }

  .topimage-area-line{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
  }

  .topimage-area-line img{
    width: 100%;
    height: 65vh;
    vertical-align: bottom;
  }

  h1.topimage-area-text{
    width: 76%;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 35%;
    transform: translate(-50%, -240%);
    text-align: center;
    font-size: 3.3vw;
    font-weight: 100;
    letter-spacing: 0.1em;
    color: #fff;
    /*filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, .9));*/
    margin: 0;
    font-family: 'Hind Madurai', sans-serif;
  }

  h1.m-topimage-area-text{
    display: none;
  }


  p.topimage-area-text{
    width: 90%;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    text-align: center;
    font-size: 1.95vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, .9));
    margin: 0;
  }

  .topimage-text{
    position: absolute;
    top: 10%;
    left: 5%;
  }

  .topimage-text img{
    width: 50%;
  }

  .m-introduction-area{
    display: none;
  }

  .p-introduction-area{
    display: none;
  }

  .introduction-area{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #869fb6;
    margin: 8% 0 5% 0;
  }

  .introduction-text-inner{
    width: 100%;
    margin: 0 auto;
  }

  .introduction-text-inner p{
    font-size: 2vw;
    color: #fff;
  }

  .introduction-text-top{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-text-top p{
    font-size: 5vw;
    font-weight: bold;
    line-height: 6vw;
    color: #fff;
    text-align: center;
    margin: 0;
  }

  .introduction-text-bottom{
    width: 100%;
    margin: 0 auto;
  }

  .introduction-text-bottom p{
    font-size: 2vw;
    line-height: 3vw;
    color: #fff;
    text-align: center;
  }

  .introduction-image-area{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-image-area-inner{
    width: 60%;
    display: flex;
  }

  .introduction-text{
    width: 60%;
  }

  .introduction-image-photo{
    margin-right: 15%;
    padding: 0;
  }

  .introduction-image-photo img{
    width: 100%;
  }

  .introduction-photo{
    width: 40%;
    position: relative;
    top: 0;
    left: 0;
  }

  .introduction-photo1{
    width: 70%;
    position: absolute;
    top: -20%;
    left: 0;
    z-index: 1000;
  }

  .introduction-photo1 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }

  .introduction-photo2{
    width: 70%;
    position: absolute;
    top: 40%;
    left: 20%;
    z-index: 1100;
  }

  .introduction-photo2 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }


}


/*---------------------------------
PC用表示
---------------------------------*/

@media all and (min-width: 1401px){

  .m-topimage-area{
    display: none;
  }

  .topimage-print-area{
    display: none;
  }

  .topimage-area{
    width: 100%;
    height: 95vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .topimage-area img{
    width: 100%;
    vertical-align: bottom;
  }

  .topimage-container{
    width: 100%;
    height: 95vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .topimage-container{
    width: 100%;
    height: 95vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
  }

  .topimage-left{
    width: 60%;
    height: 95vh;
  }

  .topimage-left-top{
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
  }

  .topimage-left-top-eng{
    width: 100%;
    padding-left: 5%;
  }

  .topimage-left-top-eng img{
    width: 100%;
    vertical-align: bottom;
    margin: 3% 0;
  }

  .topimage-left-top-eng h3{
    color: #1f4e79;
    font-size: 3vw;
  }

  .topimage-left-top-jap{
    width: 50%;
    padding-left: 5%;
  }

  .topimage-left-top-jap img{
    width: 100%;
    vertical-align: bottom;
    margin: 3% 0;
  }

  .topimage-left-top-jap p{
    color: #1f4e79;
    font-size: 2vw;
  }


  .topimage-left-bottom{
    width: 100%;
    padding-left: 5%;
    display: flex;
  }

  .topimage-left-bottom-left{
    width: 25%;
  }

  .topimage-left-bottom-right{
    width: 25%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-left: 3%;
  }

  .topimage-left-bottom-right img{
    width: 80%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  #topimg-navi1{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi1:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content_jp.png");
    background-size: contain;
  }

  #topimg-navi2{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi2:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile_jp.png");
    background-size: contain;
  }

  #topimg-navi3{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi3:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry_jp.png");
    background-size: contain;
  }

  #topimg-navi4{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi4:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit_jp.png");
    background-size: contain;
  }

  .topimage-right{
    width: 40%;
    height: 95vh;
  }

  .topimage-area-line{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
  }

  .topimage-area-line img{
    width: 100%;
    height: 95vh;
    vertical-align: bottom;
  }

  h1.topimage-area-text{
    width: 76%;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 35%;
    transform: translate(-50%, -240%);
    text-align: center;
    font-size: 3.3vw;
    font-weight: 100;
    letter-spacing: 0.1em;
    color: #fff;
    /*filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, .9));*/
    margin: 0;
    font-family: 'Hind Madurai', sans-serif;
  }

  h1.m-topimage-area-text{
    display: none;
  }


  p.topimage-area-text{
    width: 90%;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    text-align: center;
    font-size: 1.95vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, .9));
    margin: 0;
  }

  .topimage-text{
    position: absolute;
    top: 10%;
    left: 5%;
  }

  .topimage-text img{
    width: 50%;
  }

  .m-introduction-area{
    display: none;
  }

  .p-introduction-area{
    display: none;
  }

  .introduction-area{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #869fb6;
    margin: 10% 0;
  }

  .introduction-text-inner{
    width: 100%;
    margin: 0 auto;
  }

  .introduction-text-top{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-text-top p{
    font-size: 4vw;
    line-height: 4vw;
    color: #fff;
    text-align: center;
    font-family: 'Hind Madurai', sans-serif;
    margin: 0;
  }

  .introduction-text-bottom{
    width: 80%;
    margin: 0 auto;
  }

  .introduction-text-bottom p{
    font-size: 1.3vw;
    line-height: 2.3;
    color: #fff;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
  }

  .introduction-image-area{
    width: 50%;
    margin: 0 auto;
  }

  .introduction-image-area-inner{
    width: 60%;
    display: flex;
  }

  .introduction-text{
    width: 60%;
  }

  .introduction-image-photo{
    margin-right: 15%;
    padding: 0;
  }

  .introduction-text{
    width: 50%;
  }

  .introduction-photo{
    width: 50%;
    position: relative;
    top: 0;
    left: 0;
  }

  .introduction-photo1{
    width: 60%;
    position: absolute;
    top: -50%;
    left: 10%;
    z-index: 1000;
  }

  .introduction-photo1 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }

  .introduction-photo2{
    width: 60%;
    position: absolute;
    top: 40%;
    left: 35%;
    z-index: 1100;
  }

  .introduction-photo2 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }

}

/*---------------------------------
印刷用表示
---------------------------------*/

@media print{

  @page {
	 margin: 0mm 5mm;
	 size: A4 portrait; //横の場合はlandscape
  }

  body{
   padding-top: 5mm;
	 width: 210mm;
	 height: 297mm;
  }

  .m-topimage-area{
    display: none;
  }

  .topimage-print-area{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
  }

  .topimage-print-area img{
    width: 100%;
    vertical-align: bottom;
  }

  .topimage-area{
    display: none;
  }

  .topimage-area img{
    width: 100%;
    vertical-align: bottom;
  }

  .topimage-container{
    width: 100%;
    height: 95vh;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .topimage-container{
    width: 100%;
    height: 95vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
  }

  .topimage-left{
    width: 60%;
    height: 95vh;
  }

  .topimage-left-top{
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
  }

  .topimage-left-top-eng{
    width: 100%;
    padding-left: 5%;
  }

  .topimage-left-top-eng h3{
    color: #1f4e79;
    font-size: 3vw;
  }

  .topimage-left-top-jap{
    width: 50%;
    padding-left: 5%;
  }

  .topimage-left-top-jap p{
    color: #1f4e79;
    font-size: 2vw;
  }


  .topimage-left-bottom{
    width: 100%;
    padding-left: 5%;
    display: flex;
  }

  .topimage-left-bottom-left{
    width: 25%;
  }

  .topimage-left-bottom-right{
    width: 25%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-left: 3%;
  }

  .topimage-left-bottom-right img{
    width: 80%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  #topimg-navi1{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi1:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/business_content_jp.png");
    background-size: contain;
  }

  #topimg-navi2{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi2:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/company_profile_jp.png");
    background-size: contain;
  }

  #topimg-navi3{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi3:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/inquiry_jp.png");
    background-size: contain;
  }

  #topimg-navi4{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit.png");
    background-size: contain;
    margin: 5% 0;
  }

  #topimg-navi4:hover{
    width: 100%;
    background-image: url("../img/top/topimage_navi/recruit_jp.png");
    background-size: contain;
  }

  .topimage-right{
    width: 40%;
    height: 95vh;
  }

  .topimage-area-line{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
  }

  .topimage-area-line img{
    width: 100%;
    height: 95vh;
    vertical-align: bottom;
  }

  h1.topimage-area-text{
    width: 76%;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 35%;
    transform: translate(-50%, -240%);
    text-align: center;
    font-size: 3.3vw;
    font-weight: 100;
    letter-spacing: 0.1em;
    color: #fff;
    /*filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, .9));*/
    margin: 0;
    font-family: 'Hind Madurai', sans-serif;
  }

  h1.m-topimage-area-text{
    display: none;
  }


  p.topimage-area-text{
    width: 90%;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    text-align: center;
    font-size: 1.95vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, .9));
    margin: 0;
  }

  .topimage-text{
    position: absolute;
    top: 10%;
    left: 5%;
  }

  .topimage-text img{
    width: 50%;
  }

  .m-introduction-area{
    display: none;
  }

  .p-introduction-area{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background: #869fb6;
    margin: 10% 0;
    display: block;
  }

  .introduction-area{
    display: none;
  }

  .introduction-text-inner{
    width: 100%;
    margin: 0 auto;
  }

  .introduction-text-top{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-text-top p{
    font-size: 4vw;
    font-weight: bold;
    line-height: 4vw;
    color: #fff;
    text-align: center;
  }

  .introduction-text-bottom{
    width: 70%;
    margin: 0 auto;
  }

  .introduction-text-bottom p{
    font-size: 1.3vw;
    line-height: 2.3;
    color: #fff;
    text-align: center;
  }

  .introduction-image-area{
    width: 50%;
    margin: 0 auto;
  }

  .introduction-image-area-inner{
    width: 60%;
    display: flex;
  }

  .introduction-image-photo{
    margin-right: 15%;
    padding: 0;
  }

  .introduction-image-photo img{
    width: 100%;
  }

  .introduction-text{
    width: 70%;
  }

  .introduction-photo{
    width: 50%;
    position: relative;
    top: 0;
    left: 0;
  }

  .introduction-photo1{
    width: 60%;
    position: absolute;
    top: -30%;
    left: 10%;
    z-index: 1000;
  }

  .introduction-photo1 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }

  .introduction-photo2{
    width: 60%;
    position: absolute;
    top: 40%;
    left: 35%;
    z-index: 1100;
  }

  .introduction-photo2 img{
    width: 100%;
    vertical-align: bottom;
    filter:drop-shadow(15px 15px 7px #000);
  }

}

  /*---------------------------------
  共通
  ---------------------------------*/

.introduction-back-area{
  width: 100%;
  margin: 0 auto;
  display: flex;
  padding: 2% 0;
}

/*-------------------------
エフェクト関係Ｃ�E��E�
-------------------------*/

.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}