@charset "utf-8";
/* CSS Document */

/**********************
　2020/4/23 作成
**********************/

*{
	font-size:16px;
	font-family:"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#666666;
	line-height:200%;
}


/* IEだけに適応 */
_:lang(x)::-ms-backdrop, .selector {
	font-family: "Segoe UI", "メイリオ", Meiryo, sans-serif;
}

* {
	float: none;
}
 
img {
	max-width: 100%;
	height: auto;
}

body{
	margin:0;
	padding:0;
}

a{
	color:#009;
	text-decoration:none;
}

a img{border:none;}

a:hover img{
	filter: alpha(opacity=80); /* IE7以下用 */
	-ms-filter: “alpha(opacity=80)”; /* IE8用 */
	opacity:0.8; /* Firefox 1.5以上, Opera, Safari用 */ 
} 

div#continer{
	position:relative;
	min-height:100%;
}

* html div#continer{
	height:100%;
}

.clear{clear:both;}

#header{
	width:100%;
	height:35px;
	padding:0;
	background-color:#0075C1;
    position: fixed;
	top:0;
    justify-content: space-between;
	z-index:1000;
}

.logo_box{
	height:35px;
	width:100%;
}

.logo{
	height:35px;
	width:295px;
	float:left;
}

.main_image{
	background:url(img/top_back.jpg) no-repeat center;
	background-size: cover;
	background-attachment:fixed;
	position: relative;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

#main_container{
	width:100%;
	margin:0;
}   

.main_item{margin:0 auto 100px;}


#para1 {
    background-image: url("img/letter.png");
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
	position: relative;
	width:100%;
}

.main_rogo{
	background:url(img/main_logo.png) no-repeat center center;
	width:100%;
	height:100%;
}



/*------------------------------------------
　上へ戻るボタン
------------------------------------------*/

#pageTop {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 1500;
  line-height:100% !important;
}

#pageTop i {
  padding-top: 8px
}

#pageTop a {
  display: block;
  z-index: 1600;
  padding: 5px 0 0 0;
  border-radius: 30px;
  width: 50px;
  height: 45px;
  background-color: #dddddd;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}


/*------------------------------------------
  スクロールメニュー
------------------------------------------*/

header button{margin-top:35px;}

.floating {
  position: fixed;
  right: 8px;
  bottom: 8px;
  display: none;
  z-index:1200;
}

nav{margin-top:35px;}

.drawer-nav{z-index:1100 !important;}


/*------------------------------------------
  タイトル他
------------------------------------------*/

h2{
	position: relative;
	font-size:16px;
	font-weight:bold;
	line-height:60px;
	height:60px;
	margin:100px auto 30px;
	text-align:center;
	letter-spacing:0.2em;
}

h2::after{
	content: '';
    display: block;
    width: 100%;
    height: 1px;
	background:linear-gradient(-45deg, transparent, #CCCCCC 10%, #CCCCCC 90%, transparent);
}

h2.news::before{
	content:'Information';
	color: gray; /*文字色*/
	font-size: 2em; /*2倍サイズ*/
	display: block; /*改行するように*/
	line-height:0;
}

h2.companyp::before{
	content:'Corporate Profile';
	color: gray; /*文字色*/
	font-size: 2em; /*2倍サイズ*/
	display: block; /*改行するように*/
	line-height:0;
}

h2.philosophy::before{
	content:'Corporate Philosophy';
	color: gray; /*文字色*/
	font-size: 2em; /*2倍サイズ*/
	display: block; /*改行するように*/
	line-height:0;	
}

h2.meaning::before{
	content:'Name Meaning';
	color: gray; /*文字色*/
	font-size: 2em; /*2倍サイズ*/
	display: block; /*改行するように*/
	line-height:0;	
}

h2.work::before{
	content:'Business Content';
	color: gray; /*文字色*/
	font-size: 2em; /*2倍サイズ*/
	display: block; /*改行するように*/
	line-height:0;
}


h2.recruit::before{
	content:'Recruit Info';
	color: gray; /*文字色*/
	font-size: 2em; /*2倍サイズ*/
	display: block; /*改行するように*/
	line-height:0;
}

h2.contact::before{
	content:'Contact Us';
	color: gray; /*文字色*/
	font-size: 2em; /*2倍サイズ*/
	display: block; /*改行するように*/
	line-height:0;
}



.main_txt{
	text-align:left;
	line-height:180%;
	margin:0 auto 30px;
}

.mekure{
	margin:-61px 0 0 0;
	width:100%;
	text-align:right;
	position:relative;
}


/*------------------------------------------
　新着情報
------------------------------------------*/

.main_box dl{padding:0 40px;}
.main_box dt{float:left;width:170px;margin:10px 0;}
.main_box dd{float:left;margin:10px 0 10px 10px;}
.main_box a:hover{
	background-color:#DDF4FF;
	border-bottom:dotted 2px #2E3AAB;
}



/*------------------------------------------
　会社概要 &　企業理念
------------------------------------------*/
.company{padding:20px;}
.company table{border-collapse: collapse;margin:20px auto;width:80%;table-layout: fixed;}
.company tr{padding: .35em; border-bottom: 1px dotted #8BC34A;}
.company tr:last-child{
   border-bottom: none}
.company tr:first-child{
   border-top: none}
.company tr th,
.company tr td{padding: 1em 10px 1em 1em;}
.company tr th{width:250px;color:#345494;}
.company tr td{margin-left: 0;text-align:left;}

.company h3{color:#204893;font-weight:bold;letter-spacing:0.2em;margin:30px 0 0;text-align:left;font-size:1.2em;}



/*------------------------------------------
　問合せフォーム
------------------------------------------*/
.contact form{margin-bottom:30px;}
.contact table{border-collapse: collapse;margin:20px auto;width:910px;table-layout: fixed;}
.contact tr{padding: .35em; border-bottom: 1px dotted #09C;}
.contact tr:last-child{
   border-bottom: 2px solid #36C;}
.contact tr:first-child{
   border-top: 2px solid #36C;}
.contact tr th,
.contact tr td{padding: 1em 10px 1em 1em;}
.contact tr th{color: #204893; background:#EFF4FE;width:200px;}
.contact tr td{margin-left: 0;text-align:left;}
.contact form .center{text-align:center;}


/*------------------------------------------
　Footer
------------------------------------------*/

#footer{
	width:100%;
	height:auto;
	background-color:#0081D7;
	color:#ffffff;
}


#footer .footer_box .footer_logo img{
	max-width:100%;
}

#footer .footer_box .copy_box{
	margin-top:50px;
	color:#ffffff;
}

#footer .footer_box .footer_menu ul li{
	list-style-type:none;
	text-align:left;
}

#footer .footer_box .footer_menu ul li a{
	color:#ffffff;
}


/*------------------------------------------
  レスポンシブ対応
------------------------------------------*/

@media screen and (max-width:1000px){
  /*画面幅が1000pxまでの時*/


h2{width:90%;}
 
.main_txt{width:90%;}

.w_auto{width:90%;margin:0 auto;}


/*------------------------------------------
 header
------------------------------------------*/

.logo_box{background-color:#0075C1;
	height:35px;
	width:100%;
}

#para1{
	height:350px;
    background-size: auto 500px;
}

.main_image{
	height:350px;
}

h1{
	display:none;
}

/*------------------------------------------
 main_container
------------------------------------------*/

.main_box{
	width:90%;
	margin:0 auto 150px;
}

/*------------------------------------------
 company
 -----------------------------------------*/

.company{width:90%;background:#ffffff;height:auto;margin:20px auto;}

.map_s{margin:0 auto;}
.map_b{display:none;}


/*------------------------------------------
　footer
------------------------------------------*/
#footer .footer_box{
	width:100%;
}



#footer .footer_box .footer_logo{
	width:140px;
	height:auto;
	padding:20px 0;
}


#footer .footer_box .footer_menu{
	width:100%;
}


/*------------------------------------------
  nav　メニュー
------------------------------------------*/

.main_nav{
text-align: center;
clear:both;
width:100%;
height:auto;
margin-top:35px;
float:left;
}
.main_nav ul{
margin:20px ;
padding: 0 ;
}
.main_nav li{
list-style: none;
display: inline-block;
width: 10%;
min-width: 100px;
}
.main_nav li:not(:last-child){
border-right:none;
}
.main_nav a{
text-decoration: none;
color: #333;
}
.main_nav a.current{
color: #00B0F0;
}
.main_nav a:hover{
color:#06C;
background-color:#DDF4FF;
border-bottom:dotted 2px #2E3AAB;
}


}


@media screen and (min-width:1001px){
  /*画面幅が1000px以上の時*/

h2{width:1000px;}
 
.main_txt{width:850px;}

.w_auto{width:1000px;margin:0 auto;}


/*------------------------------------------
 header
------------------------------------------*/

.logo_box{background-color:#0075C1;
	height:35px;
	width:1024px;
	margin:0 auto;
}

#para1{
	height:650px;
    background-size: cover;
}

.main_image{
	height:650px;
}


h1{
	float:right;
	height:35px;
	margin:0 12px;
	text-align:right;
	line-height:35px;
	width:300px;
	color:#ffffff;
	font-weight:bold;
	font-size:14px;
}


/*------------------------------------------
 main_container
------------------------------------------*/

.main_box{
	width:900px;
	margin:0 auto 150px;
}


/*------------------------------------------
 company
 -----------------------------------------*/

.company{width:1000px;background:#ffffff;height:auto;margin:20px auto;}

.map_b{margin:0 auto;}
.map_s{display:none;}



/*------------------------------------------
　footer
------------------------------------------*/
#footer .footer_box{
	width:1000px;
	margin:0 auto;
}


#footer .footer_box .footer_logo{
	width:200px;
	height:auto;
	padding:20px 0;
	float:left;
}


#footer .footer_box .footer_menu{
	width:auto;
	float:left;
	padding:10px;
	margin:20px 50px;
	border-left:1px solid #ffffff;
}


/*------------------------------------------
  nav　メニュー
------------------------------------------*/

.main_nav{
text-align: center;
clear:both;
width:100%;
height:auto;
margin-top:35px;
float:left;
}
.main_nav ul{
margin:30px ;
padding: 0 ;
}
.main_nav li{
list-style: none;
display: inline-block;
width: 10%;
min-width: 150px;
}
.main_nav li:not(:last-child){
border-right:1px solid #666;
}
.main_nav a{
text-decoration: none;
color: #333;
}
.main_nav a.current{
color: #00B0F0;
}
.main_nav a:hover{
color:#06C;
background-color:#DDF4FF;
border-bottom:dotted 2px #2E3AAB;
}




}

/*------------------------------------------
　共通素材
------------------------------------------*/
.bg_gray{background:#E0E0E0;}
.bg_white{background:#ffffff;}

.kadomaru{border-radius:10px;}

.wp100{width:100%;
	position: relative;
    text-align: center;
    align-items: center;
    justify-content: center;
	padding:40px 0;
}

.w100{width:100px;}
.w200{width:200px;}
.w300{width:300px;}
.w400{width:400px;}
.w500{width:500px;}
.w600{width:600px;}
.w700{width:700px;}
.w800{width:800px;}
.w900{width:900px;}

.wp100{width:100%;}
.wp90{width:90%;}
.wp80{width:80%;}



.ft_left{float:left;}
.ft_right{float:right;}

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}

.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}