@media screen and (max-width: 1450px) {
.companyoutlook img{
    width: 430px;
    height: 323px;
}
.gmap{
    width: 430px;
    height: 323px;
}
}


@media screen and (max-width: 1350px) {
/*index--------------*/
.box01-title {
    font-size: 30px;
}
.box01-text {
    font-size: 20px;
}
.topbox-title01 p {
    font-size: 30px;
    margin-bottom: 80px;
}
.topbox-title02 p {
    margin-bottom: 80px;
    font-size: 30px;
}
.gre-box01 p{
    margin: 20px 0;
}
.gre-box02 {
    width: 60%;
    font-size:20px;
}
.rec-exp {
    width: 65%;
}   
.rec-cont02 p {
    font-size: 18px;
}
.mov-box {
    width: 40%;    
    
    
}
/*company--------------*/ 
#com-title01 {
    font-size: 30px;
}
#com-title02 {
    font-size: 30px;
}
/*business--------------*/  
#bus-title,#bus-title02 {
    font-size: 30px;
}
/*client--------------*/  
#cli-title01,#cli-title02 {
    font-size: 30px;
}
.list-box03 a {
    padding: 20px 250px 20px 10px;
}
/*privacy-------------*/    
#pri-title {
    font-size: 30px;
}
/*mailform-------------*/  
.theme-title08 p {
    font-size: 30px;
}
}


@media screen and (max-width: 1220px) {
/*index--------------*/
.top-macbox {
    margin-top: 25%;
}
.gre-box01 {
    width: 20%;
}
.topbox-title02 p {
    padding-top: 80px;
} 
.rec-exp {
    width: 80%;
} 
.rec-cont01 {
    justify-content: space-around;  
}
.box01-text {
    width: 80%;
}
/*business--------------*/  
.bus-exp02-01 {
    width: 80%;
}
.bus-exp02-01 p {
    font-size: 18px;
    padding-left: 20px;
}
/*client--------------*/ 
.list-box03 a {
    padding: 20px 100px 20px 10px;
} 
}


@media screen and (max-width: 1050px) {
.companyoutlook img{
    width: 350px;
    height: 263px;
}
.gmap{
    width: 350px;
    height: 263px;
}  
}


@media screen and (max-width: 995px) {
/*index--------------*/
.top-macbox {
    margin-top: 30%;
}
.rec-cont01 {
    margin: 50px auto;
}
.box01-title {
    padding: 30px 0;
} 
.mov-box {
    width: 50%;
}    
#toptitle {
    left: 23%;
}
.com-table01 {
    width: 80%;
}
.com-table02 {
    width: 80%;
}
.com-table02 td {
    padding: 20px;
}
.tabyear{
    width: 100px;   
}
.pri-box02 p {
    padding: 30px 50px;
}
.list-box03 a {
    padding: 20px 80px 20px 10px;
} 
}


@media screen and (max-width: 850px) {
.top-macbox {
    margin-top: 40%;
    justify-content: space-around;  
}
.gre-box01 {
    width: 30%;
}
.gre-box02 {
    width: 80%;
    margin: 50px auto 0;
}
#companylogo img{
    width:350px;
}
#toplogo img {
    width: 350px;
}
.foot-box {
    width: 80%;
}
.companyoutlook img {
    width: 100%;
    height: auto;
}
.gmap{
    width: 100%;
    margin-top: 30px;
}
.tableft {
    padding: 20px 30px;
    width: 200px;
}
.bus-exp02-01 {
    width: 90%;
}
.cli-exp p {
    padding: 50px 0px 50px 50px;
}
.contact-form {
    padding: 30px 0 80px 70px;
}
.list-box03 a {
    padding: 20px 50px 20px 10px;
}    
}


@media screen and (max-width: 810px) {
.pc{
    display:none;       
}
#pc{
    display:none;
}
.tab{
    display: block;
}
#tab{
    display:block;
}
#backsp{
    display:none;
}
}


@media screen and (max-width: 730px) {
/*index--------------*/
#engagepc{
    display:none;
}
#engagetab{
    display: block;
}
.rec-cont03 {
    width: 520px;
}
.box01-title {
    font-size: 25px;
}
#companylogo img{
    width:300px;
}
#toplogo img {
    width: 300px;
}
.topbox03 {
    margin: 0px auto;
}
.topbox-title01 p {
    margin-bottom: 50px;
}
.top-macbtn p {
    margin: 50px 0 70px;
} 
.topbox-title02 p {
    padding-top: 70px;
}
.mov-box {
    width: 60%;
}
.rec-cont02 p {
    font-size: 16px;
}
}
@media screen and (max-width: 710px) {
.footer-box02 {
    justify-content: end;
    flex-direction: column-reverse;
}
.footer-box02-01 p {
    text-align: right;
    padding-right: 10px;
}
}
@media screen and (max-width: 675px) {
/*共通--------------*/

.site-header{
    display: none;
}
.site-footer {
    height: 900px;
}
.site-headersp{
    display: block;
    position:fixed;
	top:0;
    justify-content: space-between;
    width: 100%;
	z-index:13;
    height: 180px;
    background: linear-gradient(to bottom,#000000,#000000,#3E3E3E);
}
#header01,#header02{
    display:none;
}
#headersp{
    display:block;
}
.pc{
    display:none;
}
.sp{
    display:block;       
}
#sp{
    display:block;
}
.tab{
    display:none;
}
#tab{
    display:none;
}
#backsp{
    display:block;    
}
    /*==途中からハンバーガーメニューに変化==*/
/*ボタン全体の形状*/
.openbtn1{
    /*はじめは非表示に*/
  display: none;
    /*ボタンの位置*/
  position:fixed;
  top:10px;
  right: 10px;
  z-index: 999;
    /*ボタンの形状*/
  background:#78c3ff;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
}
/*ボタンのアイコン設定*/
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: #fff;
    width: 45%;
  }
.openbtn1 span:nth-of-type(1) {
  top:15px; 
}
.openbtn1 span:nth-of-type(2) {
  top:23px;
}
.openbtn1 span:nth-of-type(3) {
  top:31px;
}
/*activeクラスが付与された後のボタンのアイコン設定*/
.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
/*fadeDownクラスが付与された後のボタンの出現アニメーション設定*/
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: block;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/*==ヘッダーの形状*/
/*ヘッダーグラデーション版*/
#headersp{
  height: 70px;
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:linear-gradient(to bottom,#99CCFF,#BFCFFF,#FFFFFF);
  color:#fff;
  text-align: center;
  padding: 20px;
}
/*ヘッダー白版*/
#headersp{
  height: 70px;
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#fff;
  color:#fff;
  text-align: center;
  padding: 20px;
}
/*.doneクラスがついたヘッダー*/
#headersp.dnone {
  opacity: 0;/*透過0にして非表示に*/
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
#headersp.dnone.panelactive {
  opacity: 1;/*不透明にして出現*/
}
/*==ヘッダーテキストナビ形状==*/
#g-navi ul{
  list-style: none;
  display: flex;
  justify-content: center;
}
#g-navi ul li a{
  display: none;
  text-decoration: none;
  color: #666;
  padding:10px;
  font-size:18px;
  font-family: "Kozuka Gothic Pr6N";
}
#g-navi ul li.current a,
#g-navi ul li a:hover{
  color:#fff; 
}
/*.doneクラスがついたヘッダーのテキストナビゲーションの形状*/
#headersp.dnone #g-navi{
    /*固定位置にして最背面に*/
    position: fixed;
    top: 50px;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: all 0.4s;
    margin: 0;
    padding: 0;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたナビゲーションの形状*/
#headersp.dnone.panelactive #g-navi{
    opacity: 1;/*不透明に*/
    z-index:3;/*最前面に*/
    background:#eee;
    position: fixed;
    top: 0px;
    left: 0;
    padding: 150px 0;
}
#headersp.dnone.panelactive #g-navi ul{
  display:block;/*flexの横並びをblockにして縦並びに*/
    width:100%;
}

/*リストの形状*/
#headersp.dnone.panelactive #g-navi li {
    border-bottom:1px solid;
}
#headersp.dnone.panelactive #g-navi li a{
    color: #333;
    text-decoration: none;
    padding:15px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition:all 0.3s;
    letter-spacing: 0.4rem;
}
.footer-box02-02 {
    width: 380px;
    margin: 0 auto;
}
 .footer-box02-01 p {
    padding-top: 10px;
    padding-right:0px;
    text-align: center;
}   
/*index--------------*/ 
#toplogo{
    display:none;    
}
.box01-title {
    font-size: 25px;
    padding: 20px 0;
}
.box01-text {
    font-size: 18px;
}
.box01-text p{
    margin: 20px 0;
}   
.top-macbox {
    margin-top: 50%;
}
.gre-box02 {
    font-size: 18px;
} 
.top-macbtn p {
    margin: 80px 0 40px;
}
.tmac {
    width: 35%;
}
.topbox-title01 p {
    font-size: 25px;
} 
.topbox-title02 p {
    margin-bottom: 50px;
    font-size: 25px;
} 
.rec-exp {
    font-size: 18px;
}
#toptitle {
    left: 13%;
    top: 10%;
    font-size: 4.3vw;
}
.gre-box01 {
    width: 40%;
}
/*company--------------*/ 
#com-title01 {
    font-size: 25px;
}
.com-table01 {
    width: 90%;
}
.tableft {
    padding: 20px 5px;
}
.company-container01 {
    margin-top: 0px;
}
#com-title02 {
    font-size: 25px;
    margin: 0px auto;
    padding: 50px 0;
}
/*business--------------*/
.busimage{
    display:none;
}
.busimage-sp{
    display:block;
}
.bus-exp02-01 p {
    font-size: 16px;
    padding-left: 0px;
}
.bus-exp02-01 {
    padding: 10px 15px;
}
.bus-exp01 p {
    text-align: left;
} 
.slideshow-zoom{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 350px;
    padding: 0;
    li{
        list-style: none;
        width: 100%;
        height: auto;
        animation: zooming 5s forwards;
        img{
          width: 100%;
        }
        @keyframes zooming {
      0% {
          z-index: 1;
          opacity: 0;
      }
    100% {
       transform: scale(1.2);
       opacity: 1;
       z-index: 10;
      }
    }
  }
}  
#bus-title,#bus-title02 {
    font-size: 25px;
    margin-bottom: 50px;
}
.business-container {
    margin-top: 50px;
}
.bus-exp01 p {
    font-size: 18px;
}
/*client------------------*/
#cli-title01,#cli-title02 {
    font-size: 25px;
    margin-bottom: 50px;
}
.cli-exp {
    width: 90%;
}
.client-container {
    margin: 50px auto;
}
.list-exp {
    font-size: 16px;
    width: 80%;
    margin: 0 auto;
    text-align: left;
    line-height: 1.5rem;
}
.cli-list {
    font-size: 16px;
    width: 80%;
}
.jisseki-list p {
    font-size: 18px;
}
.list-box03 a {
    padding: 20px 20px 20px 10px; 
}
/*privacy-------------*/    
#pri-title {
    font-size: 25px;
    margin-bottom: 50px;
}
.privacy-container {
    margin-top: 50px;
}
.pri-exp {
    width: 80%;
    font-size: 14px;
}  
    
    
/*mailform-------------*/  
.theme-title08 p {
    font-size: 25px;
} 
.contact-container {
    margin-top: 50px;
    margin-bottom: 50px;
}
.contact-form {
    padding: 30px 0 80px 10px;
}
#company-name, #name, #name-kana, #mail {
    width: 85%;
    margin-left: 0px;
}
#prefectures {
    width: 85%;
    margin-left: 0px;
}
#director {
    width: 85%;
    margin-left: 54px;
}
#tel {
    width: 85%;
    margin-left: 0px;
}
#contact-detail {
    width: 85%;
    margin-left: 0px;
}
#detail-text {
    vertical-align: text-top;
    width: 57px;
}
}

@media screen and (max-width: 522px) {
#engagetab{
    display:none;
}
#engagesp{
    display: block;
}
.rec-cont03 {
    width: 320px;
}
#toptitle {
    left: 13%;
    top: 10%;
    font-size: 4vw;
}
.top-macbox {
    margin-top: 60%;
}
.bus-macbox {
    width: 100%;
}
.bus-macbox02 {
    width: 90%;
}
.bus-macbox03 {
    width: 90%;
}
#spectol{
    text-align: left;
}
.contact-form {
    padding: 30px 0 80px 10px;
}
.contact-attention p {
    text-align: left;
}
.top-mac{
    display:none;
}
.top-mac-sp{
    display:block;
    background:  linear-gradient(to bottom,#BFDFFF,#FFF,#FFF,#BFDFFF);
    width:100%;
    padding-bottom:50px;
}
    
}

@media screen and (max-width: 522px) {
.top-macbox {
    margin-top: 60%;
}
.topimage{
    display:none;
}
.topimage-sp{
    display:block;
    line-height: 1.5rem;
    margin:0 auto;
}
#toptitle {
    left: 19%;
    top: 5%;
    font-size: 30px;
    text-align: center;
    line-height: 2;
}
.tmac p {
    margin: 20px 0;
}
.gre-box01 {
    width: 50%;
} 
.rec-box {
    width: 70%;
    margin: 0 auto;
}
.rec-box img {
    margin-bottom: 30px;
}
.mov-box {
    width: 70%;
}  
.topbox05 {
    margin: 50px auto;
}
.link-aicon{
    width:80%;    
}
.footer-box01 {
    display: block;
}
.footer-list{
    width: 80%;
    margin: 10px auto;
}    
.foot-box {
    width: 100%;
}
.tableft {
    padding: 10px;
    float: right;
    width: 100%;
}
.tabright {
    padding:0 0 0 20px;
    float: left;
    width: 100%;
}  
.com-table02 {
    width: 90%;
}
#nagailogo{
    margin-top:20px;
}
.tabtop {
    border-top: none;
}
.tabright img{
    width:70%;
}
.com-table01 tr {
    border-bottom: none;
}
.footer-container {
    width: 90%;
}
.footer-box02-01 {
    margin-left: 0px;
}
.cli-exp p {
    padding: 20px 0 20px 20px;
    font-size: 18px;
}
.pri-box02 {
    width: 90%;
}
.pri-box02 p {
    padding: 0px 20px;
    font-size: 14px;
}
#pageTop {
    bottom: 170px;
    right: 10px;
    width: 50px;
    height: 50px;
}
.triangle {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid #fff;
    position: fixed;
    bottom: 235px;
    right: 19px;
}



@media screen and (max-width: 484px) {
.top-macbox {
    margin-top: 80%;
}
#toptitle {
    left: 15%;
}
.list-box03 a {
    padding: 20px 10px;
}
.list-box03 p {
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 15px 0 15px 0px;
    line-height:1.5rem;
}
.listbr{
    display:block;
}
}


@media screen and (max-width: 398px) {
.top-macbox {
    margin-top: 100%;
}
#toptitle {
    left: 15%;
    font-size: 25px;
} 
.box01-title {
    font-size: 23px;
} 
.box01-text {
    width: 85%;
}
.mov-box {
    width: 80%;
}  
.footerlogo {
    padding: 50px 0 0px;
}  
#company-name, #name, #name-kana, #mail {
    width: 80%;
}
#prefectures {
    width: 80%;
}
#director {
    width: 80%;
}  
#tel {
    width: 80%;
}    
#contact-detail {
    width: 80%;
}
.form-button{
    padding-left: 25%;
}
.com-table02 td {
    padding: 10px 0 10px 10px;
}
.br398{
    display:block;
}  
    
    
}