@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
*     {font-family:‘Noto Sans Japanese’, sans-serif; box-sizing: border-box; list-style: none;}
html  {font-size: 62.5%; color:#222; background-color: #FFF;}
img   {vertical-align: middle; border: 0;}
.clearfix:after {content: ""; clear: both; display: block;}

body{padding: 0; margin: 0;}
ul,ol{-webkit-padding-start: 0px; margin: 0;}
a{text-decoration: none;}

a:link    {color: #FFF;}
a:visited {color: #FFF;}
a:hover   {color: #FFF;}
a:active  {color: #FFF;}

.fl_r   {float: right;}
.fl_l   {float: left;}
.txt_l  {text-align: left;}
.txt_c  {text-align: center;}
.mg_0	{margin: 0 auto;}
.mgt_10 {margin-top: 10px;}
.pdb_20 {padding-bottom: 20px;}

/*==================================================*/


/*header*/
#header{width: 100%; height: 80px; background-color: #FFF; position: fixed; z-index: 9999;}

.header_in ul li{display: inline-block; vertical-align: top;}
.logo{width: 200px; margin-left: 1em;}


.entry{width: 120px; height: 80px; float: right; background-color: #153373; padding-top: 2.4rem; text-align: center; vertical-align: middle;}
.entry a{color: #FFF; font-size: 2.3rem; letter-spacing: .04em;}
.entry:hover{background-color: #1e4fa1;}

.hum{width: 80px; height: 80px; background-color: #231815;  float: right; padding: 26px;}

#nav-drawer {position: relative;}

/*チェックボックス等は非表示に*/
.nav-unshown {display:none;}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 80px;
  height: 80px;
  text-align: center;
  vertical-align: middle;
}

@media screen and (max-width: 760px) {
	.hum,
	#nav-open{
		width: 45px;
		height: 45px;
	}
	.hum{padding: 11px;}
	#nav-open span, #nav-open span:before, #nav-open span:after{
		width: 20px;
	}
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 1px;/*線の太さ*/
  width: 28px;/*長さ*/
  border-radius: 1px;
  background: #FFF;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  /*background: #fff;*//*背景色*//*17.1208Matsukawa*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(105%);
  transform: translateX(105%);/*左に隠しておく*/
  background:rgba(21,51,116,0.8);/*17.1208Matsukawa*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-content ul{padding-top: 1em;}
#nav-content li{width: 100%; height: 50px; font-size: 1.6rem; color: #000; padding-left: 1em; padding-top: 1em;}
#nav-content li a{/*color: #000;*/  color:#fff;/*17.1208Matsukawa*/ width: 100%; height: 50px;}
#nav-content li:hover{/*background-color: #eee;*/background-color: #999;}

#nav-content .sns{display: flex;}
#nav-content .sns:hover{background-color: rgba(0,0,0,0);}
#nav-content .sns a{height: 30px;width: auto; min-width:30px;text-align: center;margin-right: 10px;border:1px solid rgba(0,0,0,0); border-radius: 4px;  padding: 2px;}
#nav-content .sns a:hover{border-color:#FFF;}
#nav-content .sns img{height: 100%;}

#top_wrap{width: 100%; position: relative; padding-top: 80px;}
#top_wrap img{width: 100%;}

.thanks_top{font-size: 4.7rem; line-height: 6rem; color: #FFF; position: absolute; left: 1em; top: 30%;}

.rinen_box		{width: 35%; position: absolute; right: 5%; top: 45%; overflow: hidden;}
.rinen_box a    {color: #FFF;}
.rinen_title	{font-size: 1.8rem; color: #FFF; line-height: 4rem;}
.rinen_promise	{font-size: 4rem; color: #FFF; line-height: 4.5rem; padding: .4rem 0; letter-spacing: .1em;}
.rinen_txt		{font-size: 1.4rem; color: #FFF; line-height: 2em;}


.ceo_photo{width: 40%; position: absolute; right: 0; bottom: -10%;}
.ceo_photo img{width: 100%;}

.ceo_message{width: 45%; position: absolute; left: 5%; bottom: 0%;}
.top_message{font-size: 4.8rem; color: #3e3a39; font-weight: 700; margin-bottom: .3em;}
.top_message_inner{padding: .5em;}
.top_message_inner img{width: 100%;}

.btn_more_rinen	{
	width: 100%; height: 50px; line-height: 50px;
	font-size: 1.6rem; display: inline-block; outline: none;
	border: 1px #FFF solid; text-align: center;
	color: #FFF; margin-top: 2em;
}

.btn_more_ceo{
	width: 60%; height: 50px; line-height: 50px;
	font-size: 1.6rem; display: inline-block; outline: none;
	border: 1px #153373 solid; text-align: center;
	color: #153373; margin-top: 2em;
}

.btn_more_rinen::before,.btn_more_rinen::after,
.btn_more_ceo::before,.btn_more_ceo::after{position: absolute; z-index: -1; display: block; content: '';}
.btn_more_rinen,.btn_more_rinen::before,.btn_more_rinen::after,
.btn_more_ceo,.btn_more_ceo::before,.btn_more_ceo::after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s;}

.btn_more_rinen{position: relative; z-index: 2; border: 1px solid #FFF; color: #FFF; line-height: 50px; overflow: hidden;}
.btn_more_rinen:hover {color: #153373;}

.btn_more_ceo{position: relative; z-index: 2; border: 1px solid #153373; color: #153373; line-height: 50px; overflow: hidden;}

.btn_more_ceo:visited,.btn_more_ceo:active,.btn_more_ceo:link{color: #153373;}
.btn_more_ceo:hover{color: #FFF;}

.btn_more_rinen::after,.btn_more_ceo::after{top: 0; left: 0; width: 100%; height: 100%;}
.btn_more_rinen:hover::after {background: #FFF; -webkit-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg);}
.btn_more_ceo:hover::after {background: #153373; -webkit-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg);}



@media screen and (max-width: 760px) {
	#header{height: 45px;}
	.logo{width: 50%; margin: 5px 10px 0;}
	.logo img{width: 100%;}
	.entry{width: 20%; height: 45px; padding-top: 1.4rem;}
	.entry a{font-size: 1.3rem;}
	#top_wrap{padding-top: 45px;}
	.thanks_top{font-size: 2.4rem; line-height: 3rem; top: 35%;}

	.rinen_box{width: 90%; top: 72%; left: 5%;}
	.rinen_box a    {color: #153373;}
	.rinen_title	{font-size: 1.8rem; color: #153373; line-height: 4rem;}
	.rinen_promise	{font-size: 4rem; font-weight: 700; color: #153373; line-height: 4.5rem;padding: .4rem 0; letter-spacing: .05em;}
	.rinen_txt		{font-size: 1.4rem; color: #153373; line-height: 2em;}
	.btn_more_rinen {border: 1px #153373 solid;}

	.ceo_photo{bottom: /*-100%;*/-110%; left: 0; width: 70%; margin: 0 auto;}
	.ceo_message{bottom: /*-145%*/-160%; width: 90%;}
	.top_message{font-size: 2.4rem;text-align:center;}
	.top_message_inner{width: 100%;}

}


#mid_wrap{width: 100%;}
.mid_wrap_inner{width: 90%; height: 27%; margin-top: 20%; margin-right: 0; float: right;}
.interview_box,.shain{width: 20%; height: 100%;  background-color: #FFF; float: left; position: relative; overflow: hidden;}

.inter_title{font-size: 2.6rem; text-align: center; padding: 5% 0;}
.inter_title img{width:60%;}
.inter_text{font-size: 1.4rem; line-height: 2rem; padding: 0 5%; text-align: justify;}
.mg-5{margin: 10%; width: 80%;}

.shain img{width: 100%;}
.shain_inner{position: absolute; left: 3%; bottom: 0; width: 100%;}
.name{font-size: 2.2rem; color: #FFF; line-height: .2em;}
.shozoku{font-size: 1.8rem; color: #FFF; line-height: .3em;}
.ninki{font-size: 1.2rem; color: #FFF; line-height: .1em;}


@media screen and (max-width: 760px) {
#mid_wrap{width: 100%; margin: 0 auto; margin-top: 200%; float: none;}
.mid_wrap_inner{width: 100%;}
.interview_box{width: 100%; height: /*260px;*/300px; float: none;}
.shain{width: 50%; float: left;}
.shain img{width: 100%;}
.inter_title img{width:50%;}
}


#under_wrap{width: 100%; margin: 5% 0;  background-image: url("../images/mid_bg.png"); background-repeat: no-repeat; background-size:cover;}
.h2_tt{font-size: 3rem; text-align: center;}
.h2_tt img{width:300px;}

.inner{text-align: center;}
.inner li{display: inline-block; margin: 0 2%; padding: 5% 3%;}
.human_box{margin-bottom: 10%;}
.human_box_inner{width: 25%; height: 27%; background-color: #f7f8f8;}

/**0111Matsukawa*/
.human_box_inner:first-of-type{background-color:#14316b;}
.human_box_inner:nth-of-type(2){background-color:#e1c906;}

.number{
	font-size: 3rem;
	line-height: 1.5em;
	font-weight: 700;
	color: #f7f8f8;
	/*-webkit-text-stroke-color: #000;
	-webkit-text-stroke-width: 1px;*/
	text-shadow: black 1px 1px 0px, black -1px 1px 0px,
             black 1px -1px 0px, black -1px -1px 0px;
}
.num_title{font-size: 2rem; line-height: 1.5em; text-align: center; padding-bottom: 1em;}
.num_txt{font-size: 1.4rem; line-height: 1.4em; text-align: justify;letter-spacing:1px;}

/*0119Matsukawa*/
.inner.vo .human_box_inner{width:330px;}
.inner.vo li{padding:50px;margin-top:30px;}
@media screen and (max-width: 1147px) {
.inner li{margin-right:1px;margin-left:1px;}
}
@media screen and (max-width: 1050px) {
.inner.vo .inner li{margin: 2% 0;}
.inner.vo .human_box_inner{width: 90%;}
.btn_more_ceo:visited, .btn_more_ceo:active, .btn_more_ceo:link{color:#fff;}
.btn_more_ceo{border-color:#fff;}
}
/**0111Matsukawa*/
.num_title.wh,.num_txt.wh{color:#fff;}


.btn_num{width: 30%; margin-left: 35%;}

.our_box{width: 90%; margin-top: ; margin: 0 auto;}
.our_works{width: 100%; color: #FFF; font-size: 3rem; text-align: center;}
.our_works img{width:300px;}
.our_box ul li{display: inline-block; width: 22.5%; margin: 1%; padding: 0;}
.our_box ul li img{width: 100%;}
.none{display: inline-block;}

/*0110Matsukawa*/
.our_box a.white{background-color:#ffffff;display:block;}
.our_box a.white:hover img{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}
.faceWrap{width:100%;margin:5% 0;}
.faceBox > div:first-of-type{float:left;width:400px;}
.faceBox > div:last-of-type{float:right;width:400px;margin-top:100px;}
.faceWrap .faceBox{width:900px;margin:0 auto;}
.faceWrap .h2_tt img{width:250px;}
#feed{width:400px;}
#feed time{font-size:14px;color:#000;}
#feed dt{border-bottom:1px solid #666;padding:5px 10px;}
#feed dd{margin:0;padding:10px 10px;}
#feed a{color:#666;font-size:14px;line-height:28px;}
@media screen and (max-width: 760px) {
.faceBox > div:first-of-type{float:none;width:80%;margin:0 auto;}
.faceBox > div:last-of-type{float:none;margin:0 auto;}
.faceWrap .faceBox{width:100%;padding-top:30px;}
.faceBox iframe{width:100%;}
#feed{width:100%;}
}


@media screen and (max-width: 760px) {
	#under_wrap{margin-top: 12%; background-image: none;}
	.h2_tt{font-size: 2.4rem;}
	.h2_tt img{width:60%;}
	.inner li{margin: 2% 0;}
	.human_box_inner{width: 90%;}
	.btn_num{width: 50%; margin-left: 25%;}
	.our_box{width: 100%; margin: 5% 0;}
	.our_box ul{margin-bottom: 10px;}
	.our_box ul li{float: left; width: 50%; margin: 0%; padding: 0;}
	.our_works{color: #153373;background-color:#153373;width:100%;margin-bottom:0;padding:20px 10px;}
	.our_works img{width:70%;}
	.none{display: none;}
}

.foot{width: 100%; height: 200px; background-color: #153373; position: relative;}
.topmodoru img{width: 67px; height: 67px; position: absolute; top: -34px; right: 1%;}

.foot ul{width: 90%; margin: 0 auto;}
.foot ul li{display: inline-block; padding: 20px;}
.icon_facebook img{width: 8.62px; height: 16.596px;}
.icon_insta img{width: 17.891px; height: 17.891px;}

/*0111Matsukawa*/
.foot nav ul{text-align:center;width:980px;}
.foot nav ul li{padding:5px 20px;font-size:12px;margin-bottom:50px;}
.foot nav ul li:hover{background-color:#999;}
.foot .grayBox{background-color:#fff;text-align:center;padding:30px 0;}
.foot .grayBox h2{text-align:center;font-size:12px;font-weight:100;line-height:24px;}
.foot .grayBox a{color:#666666;}
.foot .grayBox a:hover{background-color:#999;}
.pc_only{display:block;}
.sp_only{display:none;}

@media screen and (max-width: 760px) {
.pc_only{display:none;}
.sp_only{display:block;}
}

/*0111Matsukawa*/
.voiceBtn{width:100%;padding-bottom:80px;padding-top:100px;background-color:#eeeeee;}
.voiceBtn a{margin-top:0;}
@media screen and (max-width: 760px) {
.voiceBtn{width:100%;padding-bottom:50px;padding-top:50px;background-color:#eeeeee;}
}