@charset "utf-8";

/* ************************************************ 
*	ページ上部タイトル
* ************************************************ */	
.page-toptitle-box {
margin: 0 auto;
padding: 100px 0 0 0;
text-align:center;
position: relative;
overflow: hidden;
}
.page-toptitle-box img{
vertical-align: bottom;
}
.page-toptitle-box:before {
content: "";
position: absolute;
top: 100;
left: 0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.3);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.page-toptitle {
font-weight:500;
letter-spacing: 0.05em;
padding: 0;
margin: 0;
color: #fff;
text-align:center;
width:100%;
position: absolute;
top: calc(50% + 50px);
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index:999;
font-size: 36px;
line-height: 100%;
}

.page-toptitle span{
font-size: 24px;
}

.page-topinterview-no {
position: absolute;
bottom: 0;
right: 7%;
z-index:999;
}
.page-topinterview-no img{
vertical-align: bottom;
width: 178px;
}

/* ************************************************ 
*   見出し
* ************************************************ */
.htitle {
  position: relative;
  padding: 0 0 15px 0;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
  display: inline-block;
}
.htitle:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #999, #999 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #999, #999 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.htitle2,
.htitle3,
.htitle4 {
  position: relative;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 150%;
  display: block;
}
.htitle2 span { font-size: 16px; }
.htitle2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #999, #999 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #999, #999 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.htitle3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #3c4975, #3c4975 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #3c4975, #3c4975 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.htitle4:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #56a959, #56a959 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #56a959, #56a959 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* ************************************************ 
*	採用情報
* ************************************************ */
.recruit-box {
margin: 0 0 50px 0;
padding: 0;
}
.recruit-contents-box{
margin: 30px 0 50px 0;
padding: 0 0 0 0;
line-height: 180%;
}
table.recruit {
width: 100%;
margin: 0 0 10px 0;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
border: 1px #999 solid;
}
table.recruit tr {
border-bottom: 1px #999 solid;
}
table.recruit th {
font-weight: normal;
text-align: center;
padding: 20px 10px;
white-space: nowrap; 
width:20%;
border-right: 1px #999 solid;
background-color: #efefef;
vertical-align: middle;
}
table.recruit td {
text-align: left;
padding: 20px 10px;
white-space: normal;
vertical-align: middle;
}


/* ************************************************ 
*	メッセージ
* ************************************************ */
.message-box {
margin: 0;
padding: 0;
position:relative;
z-index:0;
}
.message-box .imgbox{
width: 860px;
height: 500px;
overflow: hidden;
margin: 0;
padding: 0;
}
.message-box .text-box{
width: 870px;
margin: 0;
padding: 50px 0 0 50px;
position:relative;
z-index:9;
top: -90px;
left: 200px;
background-color: rgba(255,255,255,0.8);
}
.message-box .text-box p{
font-size: 18px;
line-height: 250%;
}
.message-box h2{
margin: 25px 0;
font-size: 18px;
font-weight: 700;
line-height: 100%;
}
.message-box .name-text{
margin: 30px 0;
padding: 0;
text-align: right;
}
.message-box .name-text span{
font-size: 16px;
}


/* ************************************************ 
*	会社概要
* ************************************************ */
.greeting-box {
text-align: center;
margin: 0 0 50px 0;
padding: 0;
}
.greeting-box h2{
margin: 0 0 50px 0;
padding: 0;
text-align: center;
font-size: 30px;
font-family: 'Sawarabi Mincho';
font-weight: 700;
}
.greeting-box p{
margin: 0 0 0 0;
padding: 0;
font-size: 16px;
font-family: 'Sawarabi Mincho';
line-height: 220%;
text-align: left;
}
.greeting-box .name-text{
margin: 30px 0;
padding: 0;
font-size: 16px;
font-family: 'Sawarabi Mincho';
line-height: 220%;
text-align: right;
}
.greeting-box .name-text span{
font-size: 14px;
}

.company-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.company-box .text-box{
width: 65%;
}
.company-box .img-box{
width: 30%;
}
table.company {
width: 100%;
margin: 0 0 70px 0;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
}
table.company tr {
border-bottom: 1px #999 solid;
}
table.company th {
font-weight: normal;
text-align: center;
padding: 20px 10px;
white-space: nowrap; 
width:20%;
}
table.company td {
text-align: left;
padding: 20px 10px;
white-space: normal;
vertical-align: middle;
}

.base-box {
margin: 30px 0 70px 0;
padding: 0;
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.base-box h3{
margin: 0 0 30px 0;
font-size: 20px;
font-weight: 500;
position: relative;
padding: 0 0 5px 10px;
border-bottom: 1px solid #56a959;
width: 100%;
}
.base-box h3:after{
content: "";
position: absolute;
top: 0;
bottom: -4px;
left: 0;
right: 0;
border-bottom: 1px solid #3c4975;
}
.base-box .inner-leftbox{
width: 58%;
}
.base-box .inner-leftbox img{
vertical-align: bottom;
margin: 0 0 20px 0;
}
.base-box .inner-leftbox ul li{
  position:relative;
  padding: 0 0 0 15px;
  margin: 7px 0 7px 0px;
  line-height: 30px;
}
.base-box .inner-leftbox ul li:before{
  background: #56a959;
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  top: 15px;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


.base-box .inner-text{
margin: 0 0 10px 0;
padding: 0;
}
.base-box table.inner-table{
margin: 0;
padding: 0;
border-top: 1px #999 solid;
border-bottom: 1px #999 solid;
width:100%;
}
.base-box table.inner-table tr {
border-bottom: 1px #999 solid;
}
.base-box table.inner-table th {
font-weight: normal;
text-align: center;
padding: 10px 0;
white-space: nowrap; 
width:20%;
}
.base-box table.inner-table td {
text-align: left;
padding: 10px 0;
white-space: normal;
vertical-align: middle;
}
.base-box .inner-rightbox{
width: 35%;
}
.base-box .inner-rightbox .map-box{
width: 100%;
height: 330px;
overflow: hidden;
}


.license-box { margin: 0 0 70px 0; }
table.license {
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
table.license th {
font-weight: normal;
text-align: left;
padding: 20px 10px;
white-space: nowrap; 
width:50%;
border-bottom: 1px #56a959 solid;
}
table.license td {
text-align: left;
padding: 20px 10px;
white-space: normal;
vertical-align: middle;
border-bottom: 1px #3c4975 solid;
}

.earnings-box {
margin: 30px 0 70px 0;
padding: 0;
width: 100%;
}
.earnings-box h3{
margin: 0 0 30px 0;
font-size: 20px;
font-weight: 500;
position: relative;
padding: 0 0 5px 10px;
border-bottom: 1px solid #56a959;
width: 100%;
}
.earnings-box table.inner-table{
margin: 0;
padding: 0;
border-top: 1px #999 solid;
width:100%;
}
.earnings-box table.inner-table tr {
border-bottom: 1px #999 solid;
}
.earnings-box table.inner-table th {
font-weight: normal;
text-align: center;
padding: 10px;
white-space: nowrap; 
width:20%;
}
.earnings-box table.inner-table td {
text-align: left;
padding: 10px;
white-space: normal;
vertical-align: middle;
}


/* ************************************************ 
*	事業紹介
* ************************************************ */
.business-box {
margin: 0 0 70px 0;
padding: 0;
}
.business-dtailebox {
position:relative;
z-index:0;
margin: 0 0 75px 0;
padding: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.business-dtailebox .titlebox{
width: 100%;
text-align: center;
margin: 0 auto 35px auto;
}
.business-dtailebox h3{
margin: 0;
padding: 0 0 10px 0;
display: inline-block;
font-size: 24px;
position: relative;
border-bottom: 2px solid #56a959;
}
.business-dtailebox h3:after{
content: "";
position: absolute;
top: 0;
bottom: -6px;
left: 0;
right: 0;
border-bottom: 2px solid #3c4975;
}


.business-dtailebox .inner-leftbox{
width: 57.5%;
}
.business-dtailebox .inner-leftbox p{
font-size: 18px;
margin-top: 20px;
}
.business-dtailebox .inner-rightbox{
width: 37.5%;
}
.business-dtailebox .inner-rightbox img{
vertical-align: bottom;
margin-bottom: 25px;
}
.business-dtailebox-under {
position: absolute;
bottom: 0;
left: 0;
width: 15%;
z-index:-1;
}
.business-dtailebox-under img{
vertical-align: bottom;
opacity: 0.3;
}

.business-alllink {
margin: 0 auto 70px auto;
padding: 0;
background-color:#fff;
border: 1px solid #333;
text-align:center;
width: 30%;
}
.business-alllink a{
color: #333;
display: block;
padding: 15px 0px;
font-size:16px;
}
.business-alllink a:hover{
color: #fff;
background-color:#333;
}


/* ************************************************ 
*	お知らせ
* ************************************************ */
.news-box {
margin: 50px 0 150px 0;
padding: 0;
}
ul.news{
margin: 0 0 80px 0;
padding: 0 0 0 0;
list-style: none;
border-top:1px solid #999;
}
ul.news li{
margin: 0 0 0 0;
padding: 20px 0 20px 10px;
border-bottom:1px solid #999;
}
ul.news li a{
margin: 0 0 0 25px;
color:#333;
text-decoration: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
ul.news li a:hover{
color:#000;
text-decoration: underline;
}
.pager{
margin: 0 auto 0 auto;
text-align:center;
}
.news-page-navi,
.news-page-navi2{
margin: 0 3px;
padding: 6px 0;
text-align:center;
border:1px solid #999;
}
.news-page-navi a,
.news-page-navi2 a{
color: #333;
padding: 6px 10px;
text-decoration:none;
}
.news-page-navi a:hover{
color: #fff;
background-color: #3c4975;
text-decoration:none;
}
.news-page-navi2 a:hover{
color: #fff;
background-color: #56a959;
text-decoration:none;
}
.news-contents-box{
margin: 30px 0 0 0;
padding: 0 0 0 0;
line-height: 180%;
}
.news-contents-box img{
margin: 0 0 0 0;
padding: 30px 0px;
}

.news-contents-box a{
  color: #55a959;
  text-decoration: underline;
}

/* ************************************************ 
*	お問い合わせ
* ************************************************ */
.contact-box {
margin: 50px 0 150px 0;
padding: 0;
}
.contact-line{
padding:15px 20px;
border:1px solid #333;
}
.contact-line a{
text-decoration: underline;
color: #56a959;
}
.contact-line a:hover{
text-decoration: none;
color: #000;
}
table#contact {
width: 100%;
margin: 50px 0 30px 0;
padding: 0 0 0 0;
border-collapse: collapse;
border-spacing: 0;
font-size: 15px;
}
table#contact th {
padding: 16px 20px 15px 20px;
white-space: normal;
vertical-align: middle;
width: 25%;
}
table#contact th.last,
table#contact td.last {
vertical-align: top;
}
table#contact td {
text-align: left;
padding: 15px 0px 15px 15px;
white-space: normal;
vertical-align: top;
width: 75%;
}
.width20{ width: 20%!important; }
.contact-red { color: #c20018; font-size: 80%; }
input[type="checkbox"] {
    position: relative;
    top: 1px;
    font-size: 110%;
}
.contact-end{
text-align: center;
margin: 0 auto 0 auto;
}

.contactlink-box {
margin: 50px auto 30px auto;
padding: 0;
text-align:center;
}
.contactlink {
margin: 0 auto;
text-align:center;
width: 30%;
font-size: 110%;
background-color:#333;
color: #fff;
padding: 10px 0;
border: none;
}
.contactlinkbk {
margin: 0 auto;
padding: 0;
text-align:center;
width: 30%;
font-size: 110%;
background-color:#808080;
color: #fff;
padding: 10px 0;
border: none;
}
.contactlink:hover{
color: #fff;
background-color:#3c4975;
border: none;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}

.privacy-box{
margin: 0 0 0 0;
padding:20px 20px;
border:1px solid #666;
}
.privacy-title{
margin: 25px 0 10px 0;
padding: 10px;
font-size: 15px;
font-weight: bold;
background-color: #efefef;
}



/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){
#privacy,
#profile,
#permission,
#member,
#base,
#license,
#group {
margin-top: -105px;
padding-top: 105px;
}

}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.page-toptitle { font-size: 24px; }
.page-toptitle span{ font-size: 18px; }
.page-topinterview-no img{ width: 100px; }
.htitle,
.htitle2,
.htitle3,
.htitle4 { font-size: 21px; }
.htitle2 span { font-size: 14px; }

.message-box .imgbox{
width: 100%;
height: 400px;
}
.message-box .text-box{
width: 100%;
margin: 0 auto;
padding: 40px 0 0 0;
top: 0;
left: 0;
}
.message-box h2{
margin: 25px 0;
font-size: 16px;
font-weight: 700;
line-height: 100%;
}
.message-box .name{
font-size: 16px;
}
.contents-list li { font-size: 14px; }
.company-box .greeting-box{
margin: 70px auto 100px auto;
background-size: 300px;
}
.greeting-box h2{ font-size: 24px; }
.greeting-box h3{
margin: 50px 0 50px 0;
padding: 10px 20px;
font-size: 21px;
}
.greeting-box h3 span{ font-size: 16px; }
.greeting-box .lead-text{ font-size: 14px; }
.greeting-box .name-text{ font-size: 14px; width: 400px;}
.greeting-box .name-text span{ font-size: 12px; }

.business-dtailebox { padding: 50px 50px 50px 50px; }
.business-dtailebox h3{ font-size: 21px; }
.business-dtailebox .inner-leftbox p{
font-size: 16px;
margin-top: 0;
}


table#contact th {
padding: 16px 0px 15px 10px;
width: 27%;
}
table#contact td {
padding: 16px 0px 15px 10px;
width: calc(73% - 20px);
}


}


/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.logo,
.logo-active { display: none; }
#nav_bg.active .logo-active { display: none; }
.nav-menu li:hover > a,
.nav-menu li a:hover {
border-bottom: none;
}

.nav-menu li:nth-child(6) { display: none; }
.nav-menu li:nth-child(7) { display: none; }
#nav_bg.active .nav-menu li:nth-child(7) { display: none; }
.nav-menu li:last-child { display: block; }

.page-toptitle-box { padding: 0 0 0 0; }
.page-toptitle {
    top: 50%;
    left: 50%;
    font-size: 6.5vw;
}
.page-toptitle span {
    font-size: 5.5vw;
}
.htitle { font-size: 5vw; }
.htitle2,
.htitle3,
.htitle4 { font-size: 4.5vw; }
.htitle2 span { font-size: 3.5vw; }

.recruit-contents-box{ margin: 30px 0; }
table.recruit tr {
border-bottom: 1px #999 solid;
}
table.recruit th {
text-align: left;
padding: 10px;
border-right: none;
display:block;
width: calc(100% - 20px);
}
table.recruit td {
text-align: left;
padding: 10px;
display:block;
width: calc(100% - 20px);
}

.message-box .imgbox{
width: 100%;
height: auto;
}
.message-box .text-box{
width: 100%;
margin: 10px auto 50px auto;
padding: 0;
top: 0;
left: 0;
font-size: 4vw;
}
.message-box h2{
margin: 30px 0;
font-size: 5vw;
}
.message-box .name{ font-size: 4.5vw; }

.greeting-box h2 {
font-size: 5.5vw;
margin: 0 0 30px 0;
}
.greeting-box .name-text{
font-size: 4vw;
line-height: 220%;
display: block;
width: 100%;
margin: 20px 0 50px 0;
}
.greeting-box .name-text span{
font-size: 3.5vw;
}

.company-box .text-box{ width: 100%; }
.company-box .img-box{
width: 70%;
margin: auto;
text-align: center;
}
table.company th {
display:block;
width: calc(100% - 10px);
text-align: left;
padding: 16px 0px 5px 0px;
font-weight:bold;
}
table.company td {
display:block;
width: 100%;
text-align: left;
padding: 0px 0px 15px 0px;
}

.base-box .inner-leftbox,
.base-box .inner-rightbox,
.group-box .inner-leftbox,
.group-box .inner-rightbox {
    width: 100%;
}
.base-box h3 {
    margin: 0 0 0 0;
    font-size: 4.2vw;
    padding: 0 0 5px 0;
}
.base-box .inner-leftbox img{ margin: 20px 0; }
.base-box .inner-text{
margin: 15px 0 10px 0;
line-height: 140%;
}
.base-box table.inner-table { margin: 0 0 30px 0; }
.base-box table.inner-table th { text-align: left; }

.earnings-box h3{
margin: 0 0 0 0;
font-size: 4.2vw;
padding: 0 0 5px 0;
}
.earnings-box table.inner-table { border-top: none; }
.earnings-box table.inner-table th { width:30%; }


.business-box { margin: 50px 0 100px 0; }
.business-bgbox { margin: 50px 0 50px 0; }
.business-dtailebox {
margin: 50px 0 0 0;
padding: 0;
display: block;
box-shadow: none;
}
.business-dtailebox .inner-leftbox{ width: 100%; }
.business-dtailebox .inner-leftbox p{
font-size: 4.5vw;
margin-top: 0;
}
.business-dtailebox .inner-rightbox{ width: 100%; }
.business-dtailebox .inner-rightbox img{ margin: 25px 0 0 0; }
.business-dtailebox-under { display: none; }

.business-alllink {
margin: 50px auto 100px auto;
width: 100%;
}
.business-alllink a{ font-size:4vw; }

.news-box { margin: 50px 0 100px 0; }
ul.news li{ padding: 20px 0; }
ul.news li a{ margin: 0 0 0 0; }

table#contact { border-top: none; }
table#contact th {
display:block;
width: calc(100% - 10px);
text-align: left;
padding: 16px 0px 5px 0px;
border-bottom: none;
font-weight:bold;
}
table#contact td {
display:block;
width: 100%;
text-align: left;
padding: 0px 0px 15px 0px;
border-bottom: none;
}
.contactlink-box { margin: 30px auto 80px auto; }
.contactlink { width: 100%; }

.width20{ width: 50%!important; }

#privacy,
#profile,
#permission,
#member,
#base,
#license,
#group {
margin-top: -10px;
padding-top: 10px;
}


}