/*
Theme Name: ONE＆COMPANY
Description: ONE＆COMPANYのコーポレートサイト用テーマ
Version: 1.0
*/

html {
  font-size: 62.5%;
  margin: 0;
}


body {
  font-family:"Times New Roman", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-size: 1.4rem;
  color: #222;
}

section{
  padding:2rem 0;
}

.wrapper{
width: 95%;
margin:0 auto;
}

.outside-wrapper{
max-width: 1010px;
margin:0 auto;
}

.inner-wrapper{
  max-width:800px;
  margin:0 auto;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.u-heading{
  font-size: 2.3rem;
  position: relative;
  width:8rem;
  border-bottom: solid 3px #ccc;
  font-weight: normal;
} 

.u-heading:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: -3px;
  border-bottom: solid 3px #000;
  width: 3.2rem;
} 

.bold{
  font-weight: 500;
}


.btn-title a{
  display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 150px;
	height: 40px;
  border: solid 1px #222;
  margin: 3rem 0 0 auto;
}

.btn-title a::after {
  content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent #222;
}

.Service .btn-title a{
  display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 280px;
	height: 50px;
  margin: 3rem auto; 
  border: solid 1px #222;
}


.container .btn-title a{
	width: 280px;
	height: 50px;
  margin: 3rem auto 0 0;
}

.container .btn-title a::after {
  content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent #222;
}


a{
  text-decoration: none;
  color: #222;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

a:hover{
  opacity: 0.75;
}


/* header
============================================================================ */

header{
  display:flex; 
  justify-content:space-between;
  padding:1rem 0;
}

.catch{
  position:absolute;
  top:7rem;
  left:1rem;
 }

.header-title{
  font-size: 2rem;
  margin: 0;
  font-weight:500;
}

.header-subtitle{
  font-size:1.8rem;
}

.cover{
  background:center / cover black url("./image/top-cover.png");
  height:30rem;
  position: relative;
}

/* .cover::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;
  display:block;
  opacity:0.5;
} */


/* topページNews
============================================================================ */
.news-list{
  list-style: none;
  padding: 0;
}

time{
  font-size: 1.3rem;
}


.news-list li{
  margin-bottom: 1rem;
}

.sp-block{
  display: block;
}


/* topページService
============================================================================ */
.Service{
  background-color: #F5F5F5;
}

.Service .u-heading{
  margin: 0 auto;
}


.Service-pic img{
  width:100%;
  max-width: 100%;
  height:auto;
  vertical-align: middle;
}


.Service-pic{
  position: relative;
}


.Service-pic::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height:auto;
  background-color:#000;
  display:block;
  opacity:0.4;
}

.link-pic{
  text-align: center;
}

.link img{
  width:100%;
  max-width: 100%;
  height:auto;
}

/* topページrecruit/contact
============================================================================ */
.container .btn-title a{
	width: 250px;
}

.recruit{
  background:bottom / cover black url("./image/recruit.png");
}

.contact{
  background:center / cover black url("./image/contact.png");
}

.recruit,.contact{
  padding: 2rem 0;
  position: relative;
  color: #fff;
  margin-bottom:1rem;
 }

.recruit::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#000;
  display:block;
  opacity:0.5;
  
}

.contact::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#000;
  display:block;
  opacity:0.7;
}

.container .u-heading{
  margin: 0 auto;
  text-align: center;
}

.container p {
  text-align: center;
  color: #fff;
  position: relative;
}

.contact-text{
  margin: 2rem 0;
}

.container .center a{
  margin: 0 auto;
  color: #fff;
  border:solid 1px #fff;
}

.container .btn-title a::after {
  border-color: transparent transparent transparent #fff;
}

table{
  border-collapse: collapse;
}

th, td {
  padding: 20px 0;
  font-size: 1.5rem;
  text-align: left;
  border-bottom: solid 1px #ccc;
}

.company th, .sub-company th {
  padding-right:2rem;
}

iframe{
  width: 100%;
  max-width: 100%;
  height: 400px;
  vertical-align:bottom;
}

/* footer
============================================================================ */

footer{
  background:#F5F5F5;
}

.footer-text{
  font-size: 1.3rem;
}

.copy p{
  margin: 0;
}


/* Serviceページ
============================================================================ */
.post-60{
 padding: 0;
}

.sub-title{
  position:absolute;
  top:7rem;
  left:5rem;
 }

.sub-header-title{
  font-size: 2.2rem;
  font-weight: 500;
  margin-top:3rem ;
}

.sub{
  font-size: 2.2rem;
  position:relative; 
  margin-left:2rem;
  padding:0 1rem;
  font-weight: normal;
}

.sub::before, 
.sub::after{
 position: absolute;
 top: 50%;
 content: '';
 width: 1.5rem;
 height: 1px;
 background-color:#222;

}

.sub::after{right: 100%;}
.sub::before{left: 100%;}

.sub-Service{
  padding:0;
}

.sub-cover{
 background-image: url("./image/service-cover.png");
 background-repeat: no-repeat;
 background-size: cover;
 background-position:center bottom 70%;
 height:20rem;
 position: relative;
}

.sub-cover::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;
  display:block;
  opacity:0.3;
}


.sub-Service-pic_right, .sub-Service-pic_left{
  position: relative;
}

.sub-Service-pic_right img, .sub-Service-pic_left img{
  width:100%;
  max-width: 100%;
  height:auto;
  vertical-align: middle;
}

.sub-Service-pic_right::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height:auto;
  background-color:#000;
  display:block;
  opacity:0.4;
}

.sub-Service-pic_left::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height:auto;
  background-color:#000;
  display:block;
  opacity:0.4;
}

.figure{
  padding-top: 2rem;
}

.figure img{
  width:100%;
  max-width: 100%;
  height:auto;
}


/* news一覧ページ
============================================================================ */
.archive-page-navi{
  text-align: center;
}


/* news個別ページ
============================================================================ */
.news-title{
  font-size: 2.2rem;
  margin-top:4rem;
}

.date{
  text-align: right;
}

.news-body{
  padding-top:3rem;
}

.eye-catch{
  text-align: center;
  margin-top: 5rem;
}

.page-navi{
  padding-bottom: 5rem;
}


/* contactページ Contact Form7
  ===========================================================================*/
  .wp-block-contact-form-7-contact-form-selector input{
    padding: .5rem;
  }

  /*見出し欄*/
  .inquiry th{
    text-align:left;
    font-size:14px;
    color:#444;
    padding-left:5px;
    padding-right:35px;
    width:40%;
    border:solid 1px #222;
   }
 
   /*通常欄*/
   .inquiry td{
    font-size:14px;
    border:solid 1px #222;
    padding: 20px 80px 20px 80px;	
   }

  
    .wp-block-contact-form-7-contact-form-selector{
      padding:3rem;
    }

    .wp-block-contact-form-7-contact-form-selector p{
      text-align: center;
      margin: 3rem 0;
    }
  

   .wp-block-contact-form-7-contact-form-selector input{
     margin-top: .6rem;
   }

    .inquiry{
      margin: 0 auto;
    }
  
    /*横の行とテーブル全体*/
    .entry-content .inquiry tr,.entry-content table{
     border:solid 1px #222;	
    }
  
    /*必須の調整*/
    .haveto{
     font-size:10px;
     padding:5px;
     background:#222;
     color:#fff;
     border-radius:3px;
     margin-right:5px;
     position:relative;
     bottom:1px;
    }
  
    /*任意の調整*/
    .any{
     font-size:10px;
     padding:5px;
     background:#ccc;
     color:#000;
     font-weight: bold;
     border-radius:3px;
     margin-right:5px;
     position:relative;
     bottom:1px;
    }

  
    /*送信ボタンのデザイン変更*/
    #formbtn{
     display: block;
     margin:0 auto;
     width:120px;
     height: 40px;
     color:#222;
     font-size:1.6rem;     
     border:1p solid #222;
     background: #fff;
    }
  
    /*送信ボタンマウスホバー時*/
    /* #formbtn:hover{
    } */



  @media(max-width:649px){
    .inquiry th,.inquiry td {
     display:block!important;
     width:90%!important;
     border-top:none!important;
     -webkit-box-sizing:border-box!important;
     -moz-box-sizing:border-box!important;
     box-sizing:border-box!important;
     margin: 0 auto;
    }
    .inquiry tr:first-child th{
     border-top:1px solid #222!important;
    }

    .wp-block-contact-form-7-contact-form-selector .textsp, .company, .Position, .address, .mailsp, .tel{
      width: 90%;
    }

    .drop{
      width: 90%;
    }

   textarea.content{
     width:90%;
   }

   /*見出し欄*/
   .inquiry th{
    text-align:left;
    font-size:14px;
    color:#444;
    padding-left:5px;
    width:35%;
    border:solid 1px #222;
   }
 
   /*通常欄*/
   .inquiry td{
     font-size:14px;
     border:solid 1px #222;
     padding: 20px;	
    }
 }

  

/*Privacy-Policyページ
  ===========================================================================*/
  .Privacy-Policy span{
    padding-right: 1rem;
  }

  .Privacy-Policy-title{
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 3rem;
  }

  .Privacy-Policy-sub{
    font-size: 1.8rem;
    text-align: left;
  }

  .Privacy-Policy h2{
    font-size: 1.8rem;
  }

  .Privacy-Policy h3{
    font-size: 1.6rem;
     margin:4rem 0 0 0;
   }


   ol{
     padding-left: 1.8rem;
   }

  .blank{
      margin-top: 2rem;
  }

    
/* @media(max-width: 649px){ 
============================================================================ */

@media(max-width: 649px){ 

  .wrapper{
    width: 90%;
    margin:0 auto;
    }
    
    .outside-wrapper{
    width:90%;
    margin: 0 auto;
    }
    
    .inner-wrapper{
      width:90%;
      margin: 0 auto;
    }

  .logo img{
    width: 200px;
    padding-top: .4rem;
  }
  
/*グローバルナビゲーション*/
  .nav-wrap.open {
    display: block;
  }

  .nav-wrap.close {
    display: none;
  }
    
  .nav-wrap .btn{
    border:none;
    width: 100%;
    padding: 10px 0;
  }

  .nav-button {
    display: block;
    cursor: pointer;
  }

  .nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
  }

  .nav-wrap .nav{
    position: relative;
    top: 50%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 0;
  }

  .nav li {
    text-align: center;
    display: block;
    padding: 10px 0;
    margin-bottom: 5rem;
  }

  .nav a {
    color: #fff;
    font-weight: bold;
    font-size: 2.2rem;
    display: inline-block;
    position: relative;

  }

  .nav li a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color:#fff;
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }
    
    .nav li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
    }
    

   /*メニューボタン*/
   .nav-button,
   .nav-button span {
     transition: all 0.4s;
     box-sizing: border-box;
   }
   
   .nav-button {
     z-index: 20;
     position: relative;
     width: 30px;
     height: 30px;
     transition: all .5s;
     cursor: pointer;
     align-self: center;
    }

     .nav-button span {
      display: block;
       position: absolute;
       left: 0;
       width: 30px;
       height: 2px;
       background-color: #000;
       border-radius: 4px;
       transition: all .5s;
     }

     .nav-button span:nth-of-type(1) {
       top: 4px;
     }
     .nav-button span:nth-of-type(2) {
       top: 14px;
     }
     .nav-button span:nth-of-type(3) {
       bottom: 4px;
     }
     .nav-button.active span:nth-child(1) {
      -webkit-transform: translateY(10px) rotate(-315deg);
      transform: translateY(10px) rotate(-315deg);
      background-color:#fff;
      }
      .nav-button.active span:nth-child(2) {
      opacity: 0;
      }
      .nav-button.active span:nth-child(3) {
      -webkit-transform: translateY(-10px) rotate(315deg);
      transform: translateY(-10px) rotate(315deg);
      background-color:#fff;
      }
/* 
  スマホ非表示     */
  .display-sp{
    display: none;
  }

  .recruit{
    margin-bottom: 2rem;
  }

  .company table th, .sub-company table th {
    width: 8rem;
  }

  .recruit p{
    padding: 0 1rem;
  }

  table th, td{
    font-size: 1.4rem;
  }

/*footer*/
  .footer-text{
    padding:2rem 0;
    text-align: center;
  }

  .footer-logo img{
    width:150px;
    margin: 0 auto;
  }
  
  .copy {
    padding-top:1rem;
  }


/* serviceページ
============================================================================ */
  .u-heading-sub{
   
    font-size: 2.3rem;
    position: relative;
    font-weight: normal;
    text-align: center;
  }
  
  
  .u-heading-sub::before{
    content: "";
    position: absolute;
    left:0;
    right: 0;
    margin: auto;
    bottom: 0;
    width:8rem;
    border-bottom: solid 3px #ccc;
  }
  
  .u-heading-sub:after {
    content: " ";
    position: absolute;
    left:-5rem;
    right: 0;
    margin: auto;
    bottom: 0;
    border-bottom: solid 3px #000;
    width: 3.2rem;
  }

  .sub-Service .u-heading-sub{
    margin-bottom: 3rem;
  }

  .sub-Service p{
    line-height: 1.8;
  }

  

/* サブナビゲーション
===============================*/
  .sub-nav{
    background: #f5f5f5;
    height: 100px;
    padding: 1rem 0;
  }

  .sub-ul{
    list-style: none;
    padding:0;
    margin: 0 auto;
  }
  
  .sub-ul li {
     text-align:center;
     width: 50%;
     line-height: 50px;
     float:left;
     box-sizing: border-box;
  }

  .sub-ul li:nth-child(even){
   border-left:solid 1px #000;
   box-sizing: border-box;
  } 

  .sub-ul li:nth-child(1){
    border-bottom:solid 1px #000;
    line-height: 1.8;
  } 

  .sub-ul li:nth-child(2){
    border-bottom:solid 1px #000;
  }
  
.sub-Service-pic img{
  width:100%;
  max-width: 100%;
  height:auto;
}


 /*news個別ページ
============================================================================ */
.page-navi{
  text-align: center;
}

.new{
  text-align: left;
  margin-bottom: 3rem;
}

.old{
  text-align: right;
}


/*Privacy-Policyページ
  ===========================================================================*/
.sub-title-privacy .sub{
  display: block;
  width: 150px;
  text-align: center;
}
}



 /* media(min-width: 650px)
============================================================================ */
@media(min-width: 650px){
  body{
   font-size: 1.6rem;
  }

  section{
    padding:5rem 0;
  }

   /* pc非表示 */
  .display-pc{
    display: none;
  }

/* 固定ページh1見出し */
 .u-heading{
   font-size: 2.6rem;
   position: relative;
   width:8rem;
   border-bottom: solid 3px #ccc;
   font-weight: normal;
  } 


  /*ヘッダー
============================================================================ */
header{
  width: 95%;
  margin: 0 auto;
}

.logo{
  align-self:center;
}

.logo img{
  width:250px;
  padding-top: .4rem;
}

.cover{
  height: 60rem;
}

.cover::before{
  opacity:0.3;
}

.catch{
  position:absolute;
  top:18rem;
  left:5rem;
 }

.header-title{
font-size: 3rem;
margin:0;
}

.header-subtitle{
font-size:2rem;
margin-top:1rem;
letter-spacing:0.3rem;
}


 /*グローバールナビゲーション
=========================================================================== */
.nav-wrap{
  align-self:center;
  text-align: right;
}

.nav-wrap .nav{
  display:flex; 
  list-style: none;
  border-left: solid 1px #222;
  padding: 0;
}

.nav-wrap .nav li{
  width: 120px;
  font-size: 1.7rem;
  text-align:center;
  border-right: solid 1px #222;
}



/*TOPページnews
============================================================================ */
.sp-block{
  display: inline-block;
  padding-right:3rem;
  font-size: 1.4rem;
}

.news-list{
  padding:0 8rem;
}

/*TOPページservice
============================================================================ */
.Service-list section{
  display: flex;
  justify-content:space-between;
}


.Service-list section:nth-child(odd) {
  flex-direction: row-reverse;
}


.Service-list .Service-pic{
  width: 50%;
}

.Service .btn-title a{
	width: 300px;
  margin: 3rem auto 0 0;
}

.Service-list .right a{
  margin: 3rem 0 0 auto;
}


.Service-pic img{
    width: 100%;
    height: 360px;
    object-fit: cover;
  }

  .Service-pic::before{
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 360px;
    background-color:#000;
    display:block;
    opacity:0.4;
    
  }
  

.Service-text{
  align-self:center;
  padding: 0 2rem;
}

/* topページrecruit/contact
============================================================================ */

.container{
  display:flex;
  justify-content:space-around;
}

.container .btn-title a{
	width: 300px;
}

.recruit{
  margin-right: 1rem;
  box-sizing: border-box;
}

.recruit,.contact{
  width: 50%;
}

.contact{
  margin-left: 1rem;
  box-sizing: border-box;
}


/* company
============================================================================ */
.company th {
  width: 40%;
  padding-left: 4rem;
}

.sub-company th{
  width: 40%;
  padding-right: 5rem;
  padding-left: 5rem;
}

.sub-company td{
  padding-right: 4rem;
  padding-left: 5rem;
}

/* footer
============================================================================ */

.footer-text{
  line-height: 4rem;
  padding-top: 1rem;
  font-size: 1.4rem;
  }

.footer-logo img{
    width:200px;
    padding-top:1rem;
  }

.footer-logo{
  float:left;
}

.privacy{
  padding: .5rem 0 .5rem 2rem;
  float:left;
}

.copy{
  float: right;
  padding:.5rem;
}

/* news一覧ページ
============================================================================ */
.sub-title-news{
  margin-top:6rem;
}


/* news個別ページ
============================================================================ */
.page-navi{
  display: flex;
  justify-content: space-between;
}

/* serviceページ
============================================================================ */
.sub-title{
  position:absolute;
  top:8rem;
 }

.sub-header-title{
  font-size: 2.8rem;
}

.sub{
  font-size: 2.6rem;
}

.u-heading-sub{
  font-size: 2.4rem;
  position: relative;
  font-weight: normal;
  margin-top: 0;
}

.u-heading-sub::before{
  content: "";
  position: absolute;
  left: 10rem;
  bottom: 0;
  width:8rem;
  border-bottom: solid 3px #ccc;
}

.u-heading-sub:after {
  content: " ";
  position: absolute;
  left:10rem;
  bottom: 0;
  border-bottom: solid 3px #000;
  width: 3.2rem;
}

.border-le::before{
  content: "";
  position: absolute;
  left: 3.5rem;
  bottom: 0;
  width:8rem;
  border-bottom: solid 3px #ccc;
}

.border-le:after {
  content: " ";
  position: absolute;
  left:3.5rem;
  bottom: 0;
  border-bottom: solid 3px #000;
  width: 3.2rem;
}

.border-ri::before{
  content: "";
  position: absolute;
  left: 61rem;
  bottom: 0;
  width:8rem;
  border-bottom: solid 3px #ccc;
}

.border-ri:after {
  content: " ";
  position: absolute;
  left:61rem;
  bottom: 0;
  border-bottom: solid 3px #000;
  width: 3.2rem;
}

.sub{
  font-size: 2.8rem;
 }


.sub-cover{
  height:30rem;
}

.sub-Service-pic_right img, .sub-Service-pic_left img{
  width: 50%;
  height: 268px;
  object-fit: cover;
}

.sub-Service-pic_right::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: inherit;
  width: 50%;
  height: 268px;
  background-color:#000;
  display:block;
  opacity:0.4;
} 

.sub-Service-pic_left::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  width: 50%;
  height: 268px;
  background-color:#000;
  display:block;
  opacity:0.4;
} 


.link img{
  width: 600px;
  height: 100%;
}

.float-ri{
  float:right;
  padding-left: 2rem;
} 

.clear::after{
  clear: right;
}

.float-le{
  float:left;
  padding-right: 2rem;
} 

.clear::after{
  clear: left;
}


/* サブナビゲーション
============================================================================ */
.sub-nav{
  background: #f5f5f5;
  padding: 1.8rem 0;
}

.sub-ul{
  list-style: none;
  display: flex;
  padding: 0;
  justify-content: center;
  margin: 0;
}

.sub-ul li{
   padding: 0 2rem;
   font-size: 1.6rem;
   text-align:center;
   border-left: solid 1px #222;
}

.sub-ul li:nth-of-type(4){
  border-right: solid 1px #222;
}



/* contactページ
============================================================================ */

.sub-title-contact{
  margin-top:6rem;
}


/*Privacy-Policyページ
  ===========================================================================*/
  .sub-title-privacy{
  margin-top: 8rem;
 }

  .Privacy-Policy h3{
    font-size: 1.8rem;
    margin:4rem 0 0 0;
  }

  .Privacy-Policy-title{
    font-size: 2.2rem;
    text-align: left;
  }

  .Privacy-Policy-sub{
    font-size: 2.2rem;
    margin: 4rem 0;
  }

  .sub-title-privacy .sub{
    display:inline-block;
  }

  .blank{
    margin-top: 4rem;
  }
}