company@charset "utf-8";


/*
reset
*/
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*追加リセット*/

h2{margin-top: 0px;}
dd{margin: 0px;}
ul{padding: 0px;}
p{margin: 0px;}
a img {border: none;}

caption,th,td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}

html {
font-size: 62.5%;
/*fontsizeを10px基準に変更*/
}

.fcw{color: #fff;}
.fwb{font-weight: bold;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.pc{display: inline;}
.sp{display: none;}
@media screen and (max-width: 768px) {
.pc {display: none;}
.sp {display: inline;}
}
.bshadow{box-shadow: 
0px /*右方向のずれ*/
0px /*下方向のずれ*/
3px /*ぼかしの大きさ*/
0px /*拡張の大きさ*/
rgba(0,0,0,0.5)/*影の色*/;
}

/*
common
*/
body {
font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-size: 1.6rem;
line-height: 1.5rem;
color: #333;
background-color: #ececec;
background-position:center top;
background-repeat:no-repeat;
margin: 0 auto;
/*safariのopacityチラつき対策*/
-webkit-font-smoothing:antialiased;
}

*,*::before,*::after{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/*
.wrap {
position: relative;
margin: 0 auto;
}
*/

/*nav humberger*/

.inner{
width: 960px;
margin: 0 auto;
}

header{
  width:100%;
padding: 32px 0;
background-color: #fff;
position: fixed;
z-index: 99999;
margin-top: -115px;
}
header .inner{
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
width: 158px;
height:42px;
margin:0;
background:url('../images/logo.png') no-repeat;
/*テキスト非表示設定*/
overflow: hidden;
text-indent: 100%;
white-space: nowrap;}
@media screen and (max-width: 768px) {
.logo {
margin:0 auto;}
}

.logo a{
/*背景画像へのリンク設置*/
display: block;
width: 100%;
height:100%;
}



header nav {
margin-right: -16px;
}
header nav ul{
display: flex;
align-items: center;

}
header nav ul li a{
color: #fff;
text-decoration: none;
font-weight: 800;
padding: 0 24px ;
}
@media screen and (max-width:768px){
header nav ul li a{
font-size: 2rem;
padding: 24px ;}
}



#main_img{
max-width: 960px;
margin: 0 auto;
}

#nav_toggle{
display: none;
}
.change_btn{
color: #fff;
display: block;
width: 100%;
text-decoration: none;
border: 1px solid #fff;
text-align: center;
padding: 25px 0;
font-size:20px;
margin-top: 40px;
}

/*スマホ・タブレット用の設定*/
@media screen and (max-width:960px){
header{
  /*padding: 16px 0;*/
  position: fixed;
z-index: 99999;
}
h1{
  width: 120px;
}
.inner{
  width: 90%;
}
#main_img{
  width: 100%;
}
.change_btn{
  width: 90%;
  margin: 32px auto;
}

/*メニュー部分*/
nav{
  display: none;
  position: absolute;
  top:72px;
  width: 100%;
  background: #312b2b;
  left: 0;
  opacity: 0.95;
}
header nav ul{
  display: block;
  margin: 0 auto;
  width: 100%;
}
header nav ul li{
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid #000;
}
header nav ul li:last-child{
  border: none;
}
header nav ul li a{
  display: block; 
}

  
/*開閉ボタン*/
#nav_toggle{
  display: block;
  width: 32px;
  height: 32px;
  position: relative;
  top: 4px;
  z-index: 100;
}
#nav_toggle div {
  position: relative;
}
#nav_toggle span{
  display: block;
  height: 2px;
  background: #666;
  position:absolute;
  width: 100%;
  left: 0;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out; 
}
#nav_toggle span:nth-child(1){
  top:0px;
}
#nav_toggle span:nth-child(2){
  top:12px;
}
#nav_toggle span:nth-child(3){
  top:24px;
}

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
    top: 12px;
     -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .open #nav_toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav_toggle span:nth-child(3) {
    top: 12px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
}

/*
メニューホバーアクション PCのみ
*/
@media screen and (min-width:769px){
header nav ul li a{
font-size: 1.4rem;
position: relative;
display: inline-block;
text-decoration: none;
color: #000;
}
header nav ul li a::after {
position: absolute;
bottom: -10px;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #e7242e;
transform: scale(0, 1);
transform-origin: center top;
transition: transform .2s;
}
header nav ul li a:hover::after {
transform: scale(1, 1);}

}

/*navここまで
*/




/*contents*/
h2{
font-size: 32px;
color: #e7242e;
margin-bottom: 60px;}
@media screen and (max-width: 414px) {
h2{
font-size: 24px;
margin-bottom: 0px;}
}

.mt60{margin-top: 60px}

/*
keyvisual area
*/
.keyvisual{
margin: 115px auto 0;
background-image: url('../images/keyvisual.jpg');
background-position: 50% 50%;
background-repeat:  no-repeat;
background-size: cover;
padding:30px 0 0 ;
display: block; /* 追記：ie11main要素表示対策 */ 
height: 678px;}
@media screen and (max-width: 768px) {
.keyvisual{
margin-top: 115px;
width: 100%;
background-image: url('../images/keyvisual@2x.jpg');
background-position: top center;
height: 400px;}
}
@media screen and (max-width: 414px) {
.keyvisual{
width: 100%;
background-image: url('../images/sp_keyvisual.jpg');
background-position: top center;
height: 400px;}
}


.maincopy{
width: 600px;
height:117px;
background-image: url(../images/maincopy.png);
background-repeat: no-repeat;
padding-top: 0px;
margin:90px auto 0;
/*テキスト非表示設定*/
overflow: hidden;
text-indent: 100%;
white-space: nowrap;}
/*
PC retina img対応
*/
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
.maincopy { 
background: url('../images/maincopy@2x.png')no-repeat;
background-size: 600px 117px;}
}

@media screen and (max-width: 768px) {
.maincopy{
width: 70%;
height:auto;
background-image: url(../images/maincopy@2x.png);
background-repeat: no-repeat;
background-size: contain;
padding-top: 27.25%;
margin: 0px auto;}
}
@media screen and (max-width: 414px) {
.maincopy{
width: 57%;
background-image: url(../images/sp_maincopy.png);
padding-top: 35.25%;}
}


.keyvisual_lead{
text-align: center;
font-weight: 800;
font-size: 2.4rem;
line-height: 3.2rem;
padding: 20px 0 0 ;}
@media screen and (max-width: 768px) {
.keyvisual_lead{
margin-top: -100px;
text-align: center;
font-size: 2rem;
padding: 20px 30px;}
}
@media screen and (max-width: 414px) {
.keyvisual_lead{
text-align: left;
margin-top: 0px;}
}


/*
news area
*/
.newsbox{
width:920px;
background: #fff;
margin: -10% auto 60px;
overflow: hidden;
padding: 50px;
position: relative;/*fixedの場合もありますね*/
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
opacity: 0.98;}

@media screen and (max-width: 768px) {
.newsbox{
width: 90%;
margin: -15% auto 60px;
padding: 40px;
position: relative;/*fixedの場合もありますね*/}
}

.date{
font-size: 13px;
font-weight: 800;
color: #666;
padding-bottom: 15px;
}
.newslist{
margin-left:0; 
padding-bottom: 30px;
line-height: 1.5;
}

/*
contentspanel area
*/

.section_contents{
height: 360px;
display: flex;
}

.panelbox{
/*マウスオンで画像拡大ボックス*/
overflow: hidden; /*拡大時にはみ出た部分を隠す*/
width:100%;
height: 360px;
}

.content_panel_a,.content_panel_b,.content_panel_c{
width:100%;
height: 360px;
padding:50px 0;
background-repeat: no-repeat;
background-size: cover;
outline: 1px solid #fff; /* 線幅、線のスタイル、カラー */
outline-offset: -20px; /* 対象の要素からの距離、マイナス(内側)にも対応 */
/* ボックス内、縦のセンタリング設定*/
display: flex;
justify-content: center;
align-items: center;
/*拡大トランジションの設定*/
display: block;
transition-duration: 0.3s;  /*変化に掛かる時間*/
}

@media screen and (max-width: 768px) {
.section_contents{
height: auto;
display: inline;
}
}

.content_panel_a{
background-image: url(../images/contentspanel_a.png);
}
.content_panel_b{
background-image: url(../images/contentspanel_b.png);
}
.content_panel_c{
background-image: url(../images/contentspanel_c.png);
}

/*拡大トランジションの設定02*/
.panelbox .content_panel_a:hover,
.panelbox .content_panel_b:hover,
.panelbox .content_panel_c:hover {
opacity: 0.8;/*透過率変更*/
transform: scale(1.125);  /*画像の拡大率*/
transition-duration: 0.3s;  /*変化に掛かる時間*/
}

.contentsarea{
color: #fff;
text-align: center;
}

.contentsarea .paneltitle{
padding-top:40px;
font-size: 3.2rem;
font-weight: 800;
margin-bottom: 16px;}
@media screen and (max-width: 768px) {
.contentsarea .paneltitle{
padding-top:40px;}
}

.entitle{
font-size: 1.4rem;
font-weight: normal;
margin-left:0; 
}
.contentsarea .readmore a{
width:40%;
font-size: 1.2rem;
font-weight: normal;
display: block;
background-color: #fff;
margin:60px auto 0;
padding:3%;
border-radius: 4px;
text-decoration: none;
color: #e7242e;
font-weight: 800;
transition-duration:0.5s;
}

.contentsarea .readmore a:hover{
background-color: #e7242e;
color: #fff;
}

/*お問い合わせ*/
.section_Inquiry{
padding: 60px 0;
text-align: center;
line-height: 1.5;
}

.telicon{
vertical-align: middle;
border-radius: 50%;
display: inline-block;
width: 125px;
height: 125px;
background-color: #fff;
display: flex;
  justify-content: center;
  align-items: center;
  margin:30px auto; 
}
.redcolor{
color: #e7242e;
}

.callnumber{
font-weight: 800;
font-size: 32px;
margin-top: 20px;
}


.section_btmcompany{
padding: 30px 0;
text-align: center;
}
.section_btmcompany .logo{
margin:0 auto;
}
.companyname{
  margin-top:30px;
font-size: 1.8rem;
font-weight: 800;
}

.companylist{
margin:20px;
font-size: 14px;
line-height: 1.5;
}

/*ページTOP*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 1.2rem;
}
#page-top a {
  background: #666;
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 20px;
  text-align: center;
  display: block;
  border-radius: 4px;
}
#page-top a:hover {
  text-decoration: none;
  background: #999;
}

/*footer*/

.footer{
background-color: #333;
color: #fff;
text-align: center;
font-size: 12px;
padding:20px; 
line-height: 1.5;
}

.indent
{text-indent: -1em;
line-height: 2.5;}


/*****************
profile start
****************/

.keyvisual_profile{
margin: 115px auto 0;
background-image: url('../images/keyvisual_profile.png');
background-position: 50% 50%;
background-repeat:  no-repeat;
background-size: cover;
padding:120px 0 0;
display: block; /* 追記：ie11main要素表示対策 */ 
height: 255px;}
@media screen and (max-width: 414px) {
.keyvisual_profile{
padding:60px 0;
height: auto;}
}

.keyvisual_profile h2{
text-align: center;
color: #fff;
}

.section_profile{
width:960px;
margin:60px auto 60px; }
@media screen and (max-width: 414px) {
.section_profile{
width:100%;}
}

.profile{
width: 720px;
margin: 0 auto;}
@media screen and (max-width: 414px) {
.profile{
width:100%;}
}

.profile th,.profile td{
border-bottom: 1px solid #c5c2c2;}

.profile th{
/*width:30%;*/
padding:30px;
font-size: 1.6rem;
font-weight: 800;
color: #666;}


.profile th span{
font-size: 1.2rem;
font-weight: 100;
line-height: 2;
}
.profile td{
/*width:70%;*/
padding:30px;
font-size: 1.6rem;
line-height: 1.5;}

p.move{
  color: red;
  font-size: 1.3rem;
padding: 20px 0 8px;}

.profile ul{
padding-left: 0;}

@media only screen and (max-width:414px){
.profile th,.profile td{
display: block;
width:100%;
box-sizing: border-box;}
.profile td{
background-color: #fff;}
}
.catchcolor{color: #e7242e;}

/*****************
service start
****************/
.keyvisual_service{
margin: 115px auto 0;
background-image: url('../images/keyvisual_service.png');
background-position: 50% 50%;
background-repeat:  no-repeat;
background-size: cover;
padding:120px 0 0;
display: block; /* 追記：ie11main要素表示対策 */ 
height: 255px;}
@media screen and (max-width: 414px) {
.keyvisual_service{
padding:60px 0;
height: auto;}
}
.keyvisual_service h2{
text-align: center;
color: #fff;
}
p.update{
margin-top: 60px;
text-align: center;
font-size: 1.2rem;
}

.service_num{
width:20%;
margin: 30px auto ;
text-align: center;
padding: 20px;
font-size: 1.4rem;
border:1px solid #e7242e;
color:#e7242e;
}
@media screen and (max-width: 414px) {
  .service_num{
width:46%;}
}

.section_service{
  margin-bottom: 60px;
  padding:0 20px;
}

.section_service h3{
font-size: 2.4rem;
text-align: center;
line-height: 1.5
}
.tepcologo{
width: 223px;
height:72px;
margin:0 auto 30px;
background:url('../images/tepcologo.png') no-repeat;}

.service_lead{
line-height: 1.5;
width:770px;
margin: 60px auto;}
@media screen and (max-width: 768px) {
.service_lead{
width:100%;}
}
.servicewrapbox{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width:960px;
margin: 60px auto;}
@media screen and (max-width: 768px) {
.servicewrapbox{
width:100%;}
}
.servicebox {
width:350px;
text-align: center;
line-height: 1.5;
margin-bottom: 30px;}
@media screen and (max-width: 768px) {
.servicebox{
width:100%;}
}

.service_icon_a{
width: 104px;
height:73px;
margin:0 auto 30px;
background:url('../images/service_icon_a.png') no-repeat;}


.service_icon_b{
width: 164px;
height:73px;
margin:0 auto 30px;
background:url('../images/service_icon_b.png') no-repeat;}


.service_icon_c{
width: 288px;
height:136px;
margin:0 auto 30px;
background:url('../images/service_icon_c.png') no-repeat;}


.service_icon_d{
width: 235px;
height:190px;
margin:0 auto 30px;
background:url('../images/service_icon_d.png') no-repeat;
/*テキスト非表示設定*/
overflow: hidden;
text-indent: 100%;
white-space: nowrap;}

.service_icon_e{
width: 365px;
height:303px;
margin:0 auto 30px;
background:url('../images/service_icon_e.png') no-repeat;
/*テキスト非表示設定*/
overflow: hidden;
text-indent: 100%;
white-space: nowrap;}
/*
PC retina img対応
*/
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
.service_icon_e { 
background: url('../images/service_icon_e@2x.png')no-repeat;
background-size: 365px 303px;}
}

/*
@media screen and (max-width: 768px) {
.service_icon_e{
  background:url('../images/sp_service_icon_e.png') no-repeat;
    width: 100%;
    background-size: contain;}
}
*/

.service_icon_f{
width: 168px;
height:88px;
margin:0 auto 30px;
background:url('../images/service_icon_f.png') no-repeat;}

.service_icon_g{
width: 92px;
height:137px;
margin:0 auto 30px;
background:url('../images/service_icon_g.png') no-repeat;
/*テキスト非表示設定*/
overflow: hidden;
text-indent: 100%;
white-space: nowrap;}


.servicebox dt{
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1rem;
}
.servicebox dd{
  font-size: 1.6rem;
  text-align: left;
}
.servicebox dd span{
  font-size: 1.3rem;
  line-height: 1.2;
}
.section_service h4{
  font-size: 2.4rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;  /*全幅で線を引く場合は不要。*/
}

.section_service h4:before,
.section_service h4:after {
border-top: 1px solid;
content: "";
flex-grow: 0;/*全幅で線を引く場合。widthで線幅を短くしたい場合は不要もしくは0（初期値が0だから）*/
width:10em; /*全幅で線を引く場合は不要。*/
}

@media screen and (max-width: 414px) {
.section_service h4:before,
.section_service h4:after {
width:2em; /*全幅で線を引く場合は不要。*/}
}

.section_service h4:before {
margin-right: 1rem;
}
.section_service h4:after {
margin-left: 1rem;
}

.section_service p.center{
  text-align:center;
  margin: 0px 0 60px;
  line-height: 1.5;
}
.section_service .servicebox ul.taise_a{
    font-size: 1.4rem;
    text-align: left;
    margin: 0 auto;
    width: 230px;
}

.section_service .servicebox ul.taise_b{
    font-size: 1.4rem;
    text-align: left;
    margin: 0 auto;
    width: 140px;
}

.section_service .itaku{padding:60px 0;}
@media screen and (max-width: 414px) {
  .section_service .itaku{padding:30px 0;}
}


/*****************
philosophy start
****************/
.keyvisual_philosophy{
margin: 115px auto 0;
background-image: url('../images/keyvisual_philosophy.png');
background-position: 50% 50%;
background-repeat:  no-repeat;
background-size: cover;
padding:120px 0 0;
display: block; /* 追記：ie11main要素表示対策 */ 
height: 255px;}
@media screen and (max-width: 414px) {
.keyvisual_philosophy{
padding:60px 0;
height: auto;}
}
.keyvisual_philosophy h2{
text-align: center;
color: #fff;
}

.section_philosophy{

}
.philosophy_lead{
line-height: 1.5;
width:960px;
margin: 60px auto;}
@media screen and (max-width: 768px) {
.philosophy_lead{
width:100%;
padding: 0 20px;
margin: 40px auto;}
}

.section_concept{
margin: 0 auto;
background-image: url('../images/concept_bg.png');
background-position: 50% 50%;
background-repeat:  no-repeat;
background-size: cover;
padding:60px 0 0;
display: block; /* 追記：ie11main要素表示対策 */ 
height: 500px;
color: #fff}
@media screen and (max-width: 768px) {
.section_concept{
  padding:20px 0 20px;
height: auto;}
}  
.conceptbox{
  width:502px;
margin: 60px auto;
display: flex;}
@media screen and (max-width: 768px) {
.conceptbox{
  width:100%;
    justify-content: center;
display: flex;}
}  

.concept_seal {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    /*background: #3789d1;*/
    border:1px solid #fff;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;}
@media screen and (max-width: 768px) {
  .concept_seal {
    width: 140px;
    height: 140px;
  }
}
.concept_seal_cross{
    font-size: 10rem;
    padding: 8rem 1rem 0;}
@media screen and (max-width: 768px) {
.concept_seal_cross{
    font-size: 6rem;
     padding: 6rem 1rem 0;}
}

.concept_ttile{
  font-size: 2.4rem;
  font-weight: 800;}
@media screen and (max-width: 768px) {
.concept_ttile{
  font-size: 1.8rem;}
}

.section_stance{
padding-bottom: 60px;
}

/*
PC retina img対応
*/
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
.logo { 
background: url('../images/logo@2x.png')no-repeat;
background-size: 158px 42px;}

.service_icon_a { 
background: url('../images/service_icon_a@2x.png')no-repeat;
background-size: 104px 73px;}


.service_icon_b { 
background: url('../images/service_icon_b@2x.png')no-repeat;
background-size: 164px 73px;}


.service_icon_c { 
background: url('../images/service_icon_c@2x.png')no-repeat;
background-size: 288px 136px;}


.service_icon_d { 
background: url('../images/service_icon_d@2x.png')no-repeat;
background-size: 235px 190px;}


.service_icon_f { 
background: url('../images/service_icon_f@2x.png')no-repeat;
background-size: 168px 88px;}


.service_icon_g { 
background: url('../images/service_icon_g@2x.png')no-repeat;
background-size: 92px 137px;}
}