@charset "utf-8";

/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html{ font-size: 62.5% } /*初期値16pxの62.5%でルートが10px*/
body{
	line-height: 1.5;
	font-size:90%;
	font-family: 'Noto Sans JP', sans-serif;
	color:#000;
 -webkit-text-size-adjust: 100%;
 	background:#04235d;
	display: flex;
    flex-flow: column;
    min-height: 100vh;
}



/*全てをクリア*/
.clear {clear: both;} 

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


/* リンク設定
------------------------------------------------------------*/
a,a:visited{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
 color: #0062b0; transition: all 0.5s ease 0s;
  cursor: pointer;}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#e53e3e;}

 a:hover img{opacity:.7; }

/**** Clearfix ****/



/* レイアウト
------------------------------------------------------------*/
.inner{margin:0 auto; max-width:1100px; width:95%;}
.inner2{ margin:0 auto; max-width:900px; width:95%; }

#wrapper{margin:0 auto 0px; font-size: 16px;font-size: 1.6rem;  
padding:0 0 0px; overflow: hidden; 
display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.googlefont{ font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Lato', sans-serif; }


/* ヘッダー
----------------------------------*/
#navi {margin:0 auto;
  position: fixed;
  top: 0;
  left: 0;
  height: 73px;
  width: 100%; 
  transition: all .4s;
  z-index: 100;  background:rgba(255,255,255,1);
}
 
header.smaller #navi   {
   background: #04235d; height: 65px; 
}

#navi input {
  display: none;
}
#navi h1,
#navi p {
  float: left;
/*  height: 130px; */
  line-height: 70px;
  transition: all .4s;
  font-size: 28px;font-size: 2.8rem;
  font-weight: bold;
}
#navi h1 a,#navi p a{ color: #04235d; }
header.smaller #navi h1 ,header.smaller #navi p   {
  line-height: 55px; font-size:24px;font-size: 2.4rem;
}
header.smaller #navi h1 a,header.smaller #navi p a{ color: #fff; }
@media screen and (max-width:989px) {#navi h1,#navi p {font-size: 24px;font-size: 2.4rem;}
	header.smaller #navi h1 ,header.smaller #navi p   {
  line-height: 55px; font-size:24px;font-size: 2.4rem;
}
}

#navi .menu {  float: right; padding: 0px 0 0 0; margin:-20px 0 0 0;  transition: all .4s;   }

header.smaller #navi .menu { margin-top: -20px;}
#navi .menu .menu-parent {
  float: left;
/*  margin: 0px 30px 0px 0px; */
  padding: 0px 0px 0px 20px;
  height: 70px;
  line-height:110px;
  font-size: 16px;
  font-weight: bold;
  transition: all .4s;
  white-space: nowrap;
}


#navi .menu .menu-parent:last-child {
  margin-right: 0px;
  transition: all .4s;
}

#menu-navibtn {
  display: none;
  cursor: pointer;
  cursor: hand;
}

#openmenu {  font-size: 10px; color:#fff;
}
#openmenu b {  position: absolute; bottom:2px;  left:4px;
  font-weight: normal; font-size: 10px; color:#fff; display: block;
}




@media screen and (max-width: 895px) {
  #menu-navibtn { display: none;  }
  #navi {
    height: 60px;
  }
  #navi h1,
  #navi p {
    float: none;
     font-size:24px;font-size: 2.4rem;
  }
  #navi h1 img,
  #navi p img {
    margin-top: -6px;
  width:64px;
  }
  #navi .menu {
    display: none; 
  }
  #navi .menu .menu-parent {
    height: auto;
    width: 95%;
    line-height: 60px; margin: 0 auto; 
    padding: 0px 20px 0px 20px;
   overflow: hidden;
  }
  
	#navi .menu .menu-parent i {
    padding: 0px 20px;
  }
  #navi ul {
    float: none;
  }
  /* メニューを移動させないため */
  #menu-navibtn:checked ~ #navi {
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
  }
}

/* 固定メニュー */
@media screen and (min-width: 895px) {
  #navi.fixed {
    height: 60px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  }
  #navi.fixed h1,
  #navi.fixed p {
    font-size: 18px;
    height: 60px;
    line-height: 60px;
  }
  #navi.fixed h1 img,
  #navi.fixed p img {
    margin-top: -7px;
    width: 34px;
    height: auto;
    padding-right: 6px;
  }
  #navi.fixed .menu .menu-parent {
    height: 60px; 
    line-height: 60px;
    font-size: 15px; 
  }
  #navi.fixed .menu-parent .menu-child,
  #navi.fixed .menu-parent:hover .menu-child {
    top: 60px;
  }
a.ib{ color: #000; font-weight:normal; padding: 0 1em ; margin: 0 0; position: relative;
  display: inline-block;
  font-size: 16px;
  height: 70px;
  line-height:70px; }
a.ib::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1px;
  height: 20px;
  margin: auto;
  background-color: #000; transition: all 0.3s ease 0s;
}	
a.ib::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 0px;
  margin: auto;
  background-color: #000;transition: all 0.3s ease 0s;
}

#company #navi .menu .company a::after,#business #navi .menu .business a::after,#req #navi .menu .recruit a::after,#greeting #navi .menu .greeting a::after,
a.ib:hover::after {
  height: 20px;
}
#company #navi .menu .company a::before,#business #navi .menu .business a::before,#req #navi .menu .recruit a::before,#greeting #navi .menu .greeting a::before,
a.ib:hover::before { height: 0px;}
header.smaller a.ib{ color: #fff; height: 65px; line-height:65px}
header.smaller a::before {   height: 15px;  background-color: #fff;}	
header.smaller a.ib::after {background-color: #fff;}

#company header.smaller  #navi .menu .company a::after,#business header.smaller  #navi .menu .business a::after,#req  header.smaller  #navi .recruit a::after,#greeting  header.smaller  #navi .greeting a::after,
header.smaller a.ib:hover::after { height: 15px;bottom: 1; }
	
	
	
.menu .menu-parent{ padding: 0!important; margin: 0 !important;   }
	
}
/* ドロップダウンメニュー */
.menu-parent {
  position: relative;
}
.menu-parent .menu-child {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  position: absolute;
  top: 100px;
  left: 35%;
  margin-left: -80px;
  width: 200px;
  background: #fff;
  box-sizing: border-box;
  padding: 4px 20px;
  border: 1px solid #000;
}
@media screen and (min-width: 895px) {
  .menu-parent:first-child .menu-child,
  .menu-parent:nth-child(2) .menu-child {
    width: 310px;
    margin-left: -130px;
  }
  .menu-parent:hover .menu-child {
    top: 95px;
    visibility: visible;
    transition: all .8s;
    opacity: 1;
  }
}
@media screen and (max-width: 895px) {
  #navi .menu-parent .menu-child {
    transition: all 0s;
  }
  .menu-parent .menu-child {
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
  }
}
@media screen and (max-width: 895px) {
  #menu-navibtn:checked ~ * .menu {
    display: block;
    opacity: 1;
  }
  #menu-navibtn:checked ~ * .menu-parent {
    max-height: inherit;
    overflow-y: visible;
  }
  #menu-navibtn:checked ~ * .menu-child {
    max-height: 0;
    overflow-y: hidden;
    visibility: hidden;
  }
  .menu ul {
    margin: 0;
    padding: 0;
    background :#f4f4f4;
    list-style: none;
  }
  .menu-parent .menu-child {
    position: relative;
    opacity: 1;
    padding: 0 20px;
    visibility: visible;
    top: 0;
    margin-left: auto;
    left: auto;
    width: auto;
  }
  .menu-child li {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  /* クリックされた時 */
  #navi input[type="checkbox"]:checked ~ .menu-child {
    max-height: inherit;
    overflow-y: visible;
    visibility: visible;
    opacity: 1;
  }
  .angletoggle:before {
    content: "\f107";
  }
  #navi input[type="checkbox"]:checked ~ * .angletoggle:before {
    content: "\f106";
  }
}
#navi .menu-child .menu-child-top {
  position: relative;
}
/* △部分 */
#navi .menu-child .menu-child-top::before,
#navi .menu-child .menu-child-top::after {
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
  border-bottom: solid 12px #fff;
  top: -15px;
  content: "";
  display: block;
  height: 0;
  left: 47%;
  position: absolute;
  width: 0;
}
@media screen and (max-width: 895px) {
#navi .menu {  float: none; padding: 0px 0 0 0; margin:0;  transition: all .4s;   }
#navi li {
  line-height: 30px;
  font-size: 14px;padding: 0;
  border-bottom: 1px solid #999; overflow: hidden;
}
#navi li a { display: inline-block;  padding: 0 10px;   
  text-decoration: none; color: #000; margin: 0 -20px;
  transition: .3s; width:120%;
}
header.smaller  #navi li a { color: #fff;
}
#navi li a:hover { background: #e53e3e; color: #fff; }
#navi li a:before{ 
font-family: "Font Awesome 5 Free";
  font-weight: 900;  font-size:16px;
  content: "\f105";  margin:0 0.5em 0 0;
}
a:hover.ib::after { display: none;}

	
	
#navi ul > li .pd {
  display: none;cursor: pointer;
}}
	
	
@media screen and (max-width: 895px) {
  #navi ul {
    float: none;
  }
  #navi ul > li .pd {
    display: inline-block;
    width: 100%;
  }
}

/* ハンバーガー */

#navi #navibtn {
  display: none;
  cursor: pointer;
  cursor: hand;
}
@media screen and (max-width: 895px) {
  #navi #navibtn {
    display: block;
    position: fixed;  right:30px; 
     margin: 10px 0 10px; text-align: right;
    z-index: 1000;
  }
  #navi #navibtn span {
    display: block;
    width: 40px;
    height: 40px;
    background-color:#04235d;
  }
  #navibtn span span {
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
  }
  #navibtn span span#openmenu b{ position: absolute;  font-size:9px !important;  bottom:0; width:100%; left: -2px;  }
	
  #navibtn span span::before,
  #navibtn span span::after,
  #navibtn span::after {
    position: absolute;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
    transition: .2s;
  }
  /* 上の棒 */
  #navibtn span span::before {
    top:10px;
  }
  #menu-navibtn:checked ~ #navi label#navibtn span span::before {
    top:15px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); 
  }
  /* 下の棒 */
  #navibtn span::after {
    bottom:15px;
  }
  #menu-navibtn:checked ~ #navi label#navibtn > span::after {
    bottom:22px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  /* 中の棒 */
  #navibtn span span::after {
    top:16px;
  }
  #menu-navibtn:checked ~ #navi label#navibtn span span::after {
    display: none;
  }
}
@media screen and (max-width:400px) { #navi #navibtn {right:10px;  }}



/* フッター
----------------------------------*/

#footer{ overflow: hidden;text-align: center; font-size:14px; font-size:1.4rem;   font-weight: normal;margin-top: auto; padding: 10px 0;  }
#footer nav{  float: left;  }
#footer nav li { display: inline-block; vertical-align: middle; border-right: 1px solid #fff; padding:0 0.5em;  }
#footer nav li:last-child { border: none;  }
#footer nav li a { display: inline-block;  padding: 0 1em;   
  position: relative;
  text-decoration: none; color: #fff;
}
#footer nav li a::after {
  position: absolute;
  bottom: -6px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #e53e3e;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
#footer nav li a:hover{ color: #e53e3e;}
#footer nav li a:hover::after {
  bottom: -2px;
  opacity: 1;
  visibility: visible;
}

#footer dl.footerabout{  color: #fff;  text-align: right;}
#footer dl.footerabout dt,#footer dl.footerabout dd{display: inline-block;  vertical-align: top; margin: 0 0 0 1em; text-align: left; }
#footer dl.footerabout dt{ font-size:20px; font-size:2.0rem;  font-weight: bold;}
#footer dl.footerabout dd img { display: inline-block; width:15px; height: auto; margin-left: 1em; }
#footer dl.footerabout dd b {  display: block; font-size:16px; font-size:1.6rem;font-family: 'Lato', sans-serif;  }
#footer a.privacy { float: right; display: block; font-size:12px; font-size:1.2rem;  margin: 0 0 1em; text-align: right; color: #fff;  }
#footer a.privacy:before{ 
font-family: "Font Awesome 5 Free";
  font-weight: 900;  font-size:16px;color: #fff; 
  content: "\f105";  margin:0 0.2em 0 0;
}

#page-top1{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: -0px;
  right: 40px;
  width: 50px;
  height:50px;
  text-align: center;
  text-decoration: none; 
  transition: .5s; font-size: 16px; font-size: 1.6rem; 
	vertical-align:middle;background: #04235d;  border-radius:50%;  }
a#page-top1 {  color: #fff !important;}
#page-top1 span {display: block; margin:10px auto 0;  font-size: 20px; font-size: 2.0rem; }

p.address{ font-size: 12px; font-size: 1.2rem; font-weight: normal; padding:0px 0 15px; text-align: center; }
p.address small { display: block;  color:  #fff;
display: flex;
align-items: center;
}
p.address small:before {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
p.address small:before {
margin-right: 1rem;
}



.alignleft{ float:left;}
.alignright{ float:right;}
.center{ text-align:center;}
	

/* サブページ
----------------------------------*/
#contents{ margin: 70px auto 0; background: #fff; overflow: hidden; padding: 0 0 50px; width:100%; overflow: hidden;  }
.sub #wrapper #contents header { width:100%;   overflow:hidden; position: relative;}
.sub #wrapper #contents header img {width:100%; height: auto;}
.sub #wrapper #contents header h1 {  position:absolute; bottom:5px; background:rgba(255,255,255,0.8); height: 70px; width:100%; text-align: left;}

.sub #wrapper #contents header h1 span {display: block; max-width: 1000px;  width:100%;  margin: 0 auto;  color: #04235d; font-size:26px; font-size:2.6rem;  padding:20px 0 0; text-align: left !important; }
.sub #wrapper #contents header h1 span u {font-size:16px; font-size:1.6rem;  text-decoration: none; }
.sub #wrapper #contents header h1 span u:before { content:" / "; }



.sub #contents .content{ max-width: 1000px;  width:100%;  margin: 0 auto; padding: 0; }
.sub #contents h2 {color: #04235d; font-size:22px; font-size:2.2rem;  text-align: left;
  display: flex;
  align-items: center; /* 垂直中心 */
}
.sub #contents h2:before{  border-top: 3px solid #04235d;
  content: "";
  width: 60px; /* 線の長さ */margin-right: 0.5em; /* 文字の右隣 */ }

.sub .content{ background:rgba(255,255,255,0.8); padding: 0px 40px 30px; margin: 20px auto;}
.sub .content article{  padding:80px 0 0;   margin: 0 auto;  }
.sub .content .left70{  margin: 36px 0 0 70px;}
.sub #wrapper #contents .photo {max-width: 1000px;  width:100%; height: auto; margin:40px auto; display: block; }
.sub #wrapper #contents .photo li {width: calc( 100% / 3 ); display: inline-block; vertical-align: top;}
.sub #wrapper #contents .photo li img {  width:100%; height: auto;}
.sub table {margin: 20px auto; border-collapse: collapse;  border: solid 1px #666;}
.sub table th {background: #f0f0f0;  border: solid 1px #666;  padding:15px; vertical-align: top; text-align: center; width:100px;}
.sub table td {border: solid 1px #666; vertical-align: top;  padding: 15px;}
 
.suvnav {  text-align: center; background: #04235d; padding: 8px 0; margin: -5px 0 0; }
.suvnav li{ display:  inline-block; margin:0 ; }
.suvnav li a{ color:#fff;  font-weight:normal; border-right:1px solid #fff;  padding: 0 1em 0 ; margin: 0 0; 
  position: relative;
  text-decoration: none;
}
 .suvnav li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px; border-radius: 3px;
  -webkit-transform: scaleX(0.2); -ms-transform:scaleX(0);
  transform: scaleX(0.2);
  background-color: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;}
.suvnav li a:hover::after{
  -webkit-transform: scaleX(.7); 
  -ms-transform: scaleX(.7);
  transform: scaleX(.7);
}	
.suvnav li:last-child a{ border:none; }


/*企業概要*/
.company article.no01 dl,.company article.no01 img{ display:inline-block; vertical-align: top;}
.company article.no01 dl{ width:  60% ; max-width: 560px; }
.company article.no01 img{max-width:333px ; width:35%;  height: auto; margin: 0 0 0 10px; padding: 0; }
.company article.no01 dl dt,.company article.no01 dl dd { display:  inline-block; vertical-align: top; padding:12px 0 12px 10px;}
.company article.no01 dl dt { width: calc( 15% - 10px); border-bottom: 3px solid #04235d;}
.company article.no01 dl dd { width: calc( 85% - 10px); border-bottom: 1px solid #666;}
.company article.no02 img{ width:100%; height: auto; margin: 40px auto 0; display: block; padding: 0;  }
.company article.no03 dl{  width: calc(95% - 70px); }
.company article.no03 dl dt,.company article.no03 dl dd { display:  inline-block; vertical-align: top; padding:20px 0 20px 10px; border-bottom: 1px solid #666;}
.company article.no03 dl dt { width: calc( 15% - 10px); }
.company article.no03 dl dd { width: calc( 85% - 10px);}


/*ごあいさつ*/
.greeting {  background-image:url("../img/greeting/back.jpg") ;}
.greeting article.no01 p { margin: 1em ;}
.greeting #contents h3 {color: #000; font-size:20px; font-size:2.0rem;  text-align: left;
}


/*事業概要*/
.business  table { margin: 20px auto 80px !important;}
.business  table tr:first-child th,.business table tr:nth-of-type(8) th {word-spacing: 1em;} 
.business  td li{ margin: 0 -0.3em 0.5em 2em;}
.business  td li:before{ content:"・"; margin: 0 0.3em 0 -1em;}
.business  td li span{ width:10em; display:  inline-block;}
.business  td  b{ font-weight: normal; font-size:14px;}
.business  article.no01{ font-weight: bold; font-size:18px;}
.business #wrapper #contents .photo li { margin:-3px 0 -2px; padding: 0; }


.privacy #contents p{ margin: 0 0 1em 0; }
.privacy #contents  .content article{  width:90%; max-width: 700px;  margin: 0 auto;  }
.privacy #contents dl dt{ margin:1em 0 0 1em; font-weight:bold; }
.privacy #contents dl dt:before{ 
font-family: "Font Awesome 5 Free";
  font-weight: 900;  font-size:16px;
  content: "\f0c8";  margin:0 0.5em 0 -1em;
}
  
.privacy #contents dl dd{ margin:0.3em 0 2em 1.2em; }
.privacy #contents dl dd li{  margin:0 0em 0 1em;
}
.privacy #contents dl dd li:before{ 
font-family: "Font Awesome 5 Free";
  font-weight: 900;  font-size:16px;
  content: "\f00c";  margin:0 0.5em 0 -1em;
}
.privacy #contents .shomei{ margin: 0 0 0 auto; width:20em;}
.privacy #contents .shomei h3{ font-weight:bold;}
.privacy #contents .shomei p{ font-size: 14px;}

/*事業内容*/
.business #wrapper{  background-image:url("../img/business/back.jpg") ;}
/*採用情報*/
#req #wrapper{  background-image:url("../img/req/back.jpg") ;}

div.chuijiko{ margin:2em 0 0 3em}
div.chuijiko b{ display: block; margin:0 0 0 1.2em; padding: 0; font-weight: normal;}
div.chuijiko b:before{ content:"※"; margin:0 0.2em 0 -1em}

/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width: 1070px){.sub .content article{   width:95%; }
.sub #wrapper #contents header h1 span { max-width: 1000px; width:95%; margin: 0 auto; }

}
@media only screen and (max-width: 1000px){
.sub #wrapper #contents .photo {width: calc(90%) ;  height: auto; margin:40px auto; padding: 0;  display: block;  }
.sub #wrapper #contents .photo li {width: calc( 100% / 3 ); display: inline-block; vertical-align: top;}
.sub #wrapper #contents .photo li img {  width:100%; height: auto;}
	
.company article.no01 dl,.company article.no01 img{ display:block; }
.company article.no01 dl{ width: calc(100% - 70px ) ; max-width:900px;  display: block; margin: 20px auto; }
.company article.no01 img{width: auto ; height: auto; margin: 20px auto; padding: 0; display: block; }
.sub table {margin: 20px auto; width: calc(90% - 70px ) ;}
}
@media only screen and (max-width: 900px){
.sub .content .left70{  margin: 36px 0 0 0px}
	.company article.no01 dl,.company article.no03 dl{ width: calc(100%) ; max-width:900px;}
	.business  table{ width: calc(100%) ; max-width:900px;}
	#footer a.privacy {  margin: 1em;  }
}

@media only screen and (max-width:895px){.sub #contents{ margin: 50px auto 0; width:100%; }
#footer dl{  display:  inline-block; vertical-align: top;width: calc( 100% / 2 - 50px );}

#footer nav{  float: none;  width:100%; }
#footer dl.footerabout{  float: none; margin: 20px 0 0; text-align:center; width:100%;}
#footer dl.footerabout dt{ margin: 0; }

.company article.no03 dl dt { width: calc( 25% - 10px); }
.company article.no03 dl dd { width: calc( 75% - 10px);}

}
@media only screen and (min-width:800px){
#contents{ min-height: 800px; }}
@media only screen and (max-width:800px){.menu-btn{ display: none;}
.sub .content article{  padding:30px 0; clear: both; }

}
	@media only screen and (max-width:743px){
.sub #wrapper #contents header { width:100%;   overflow:hidden; position: relative; margin:auto; display: block;}
.sub #wrapper #contents header h1 {  position:absolute; bottom:5px; background:rgba(255,255,255,0.8); height: 70px; width:100%; text-align: left;}
.staff #wrapper #slide-div li{ width: calc( 100% / 4 - 10px ); text-align: center; }

}

@media only screen and (max-width: 680px){ 
#footer nav li { width: calc( 100% / 2 - 20px); padding:1em 0; margin: 0; border-right: 1px dotted #999;border-bottom: 1px dotted #999; }
#footer nav li:nth-child(even) { border: none;  border-bottom: 1px dotted #999; }
#footer nav li a { display: inline-block;  padding: 1em 0.5em; }
#footer nav li a::after { bottom: -4px;}
#footer nav li a:hover::after {bottom: -1px;}

.company article.no01 img{ width: auto ; height: auto; margin: 20px auto !important; padding: 0 !important; display: block; }	

.sub #wrapper #contents header img { margin: 0 0 0 -50%; height: 300px; width: auto; }
.sub table {margin: 10px auto 0; width: 100% ;border: none ; padding: 0; border-collapse: collapse; border-top: 1px solid #000; }
.sub table th,
.sub table td {border: none ;
    display: block;
  text-align: left; padding: 10px; width: calc( 100% - 20px ) !important;  }
.sub table th { padding:15px; width: calc( 100% - 30px ) !important;}

.sub table td:nth-of-type(1){ padding: 1em  5px 0px 15px;calc( 100% - 20px ) !important; }
.sub table td:nth-of-type(1):before{ 
font-family: "Font Awesome 5 Free";
  font-weight: 900;  font-size:16px;
  content: "\f058";  margin:0 0.5em 0 0;
}
.sub table td:nth-of-type(2) {  padding: 0.5em 0 1em 2.5em; border-bottom: 1px solid #000; width:calc( 100% - 2.5em) !important; }
.business  td li span{ width:auto; }
.business  td li{  margin: 0 0 0 1em; }
.sub .last td:last-child {width: calc( 100% - 30px  ) ; }
}

@media only screen and (max-width: 600px){.sub .content article{   width:90%; margin: 10px auto; padding: 0; }
.company article.no01 dl,.company article.no03 dl{ border-bottom: 1px solid #f0f0f0;}

.company article.no01 dl dt,.company article.no01 dl dd { display:block; vertical-align: top; padding:12px 0 12px 10px;}
.company article.no01 dl dt ,.company article.no01 dl dd { width: 95%; margin: 0 auto;  border: none;}
.company article.no01 dl dt{  background: #f0f0f0;}
.company article.no03 dl dt,.company article.no03 dl dd { display:block; vertical-align: top; padding:12px 0 12px 10px;}
.company article.no03 dl dt ,.company article.no03 dl dd { width: 95%; margin: 0 auto;  border: none;}
.company article.no03 dl dt{  background: #f0f0f0;}
.company article.no03 dl dd {  padding:10px 0 20px 10px;}
.company article.no02 img{width: auto ; width:90%; height: auto; margin:20px auto; padding: 0; display: block; }
.business  article.no01 p{ margin: 1em;}
.staff #wrapper #slide-div li{ width: calc( 100% / 3 - 10px ); text-align: center; }
	
}

@media only screen and (max-width: 500px){
.sub .content article{   width:90%; margin: 10px auto; padding:10px 0; }
.sub #wrapper #contents header img { margin: 0 0 0 -100%; height: 300px; width: auto; }
.suvnav li{ display:  inline-block; margin:0 ; font-size:14px; }
.suvnav li a{ color:#fff;  font-weight:normal; border-right:1px solid #fff;  padding: 0 0.8em 0 ; margin: 0 0; 
  position: relative;
  text-decoration: none;
}
}