@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #000;
}
a {text-decoration: none;}
img {max-width: 100%;display:block;}
a:hover img {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";}/* リンク画像ホバー */
/* リンク文字色指定 */
a:link { color: #000; } 
a:visited { color: #000; } 
a:hover { color: #ff0000; } 
a:active { color: #000; } 

/* テキストの両端揃え */
p{text-align: justify;}


.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
}

/* 画面サイズが600px以下の時に読み込ませる */
@media screen and (max-width: 600px) {
    .pc_none {display: none;}
    .sp_none {display: block;}
}
/* 画面サイズが600px以上の時に読み込ませる */
@media screen and (min-width: 600px) {
    .pc_none {display: block;}
    .sp_none {display: none;}
}

/* HEADER
------------------------------- */
.logo{
	width: 300px;
	margin-bottom: 10px;
}
.sitetext{
	font-size: 0.8rem;
	font-weight: normal;
	margin-bottom: 10px;
}
/* 画面サイズが600px以下の時に読み込ませる */
@media screen and (max-width: 600px) {
.sitetext{
	font-size: 0.75rem;
	font-weight: normal;
	width: 85%;
	margin-bottom: 10px;
}
}
.page-header{
	margin: 10px 0;
	display: flex;
	justify-content: space-between;
}
/* 画面サイズが600px以下の時に読み込ませる */
@media screen and (max-width: 600px) {
.page-header{
	display: flex;
	flex-direction: column;
}
}

.headercontact:before {
	content:url(../img/icon_header_mail.png);
	padding-right: 15px;
	vertical-align: middle;
}
.headercontact {
	background-color: #ff0000;
	padding: 5px 30px;;
	font-size: 1.25rem;
	font-weight: bolder;
	color: #ffffff;
}
/* 画面サイズが600px以下の時に読み込ませる */
@media screen and (max-width: 600px) {
.headercontact {
	text-align: center;
}
}

.headertel:before {
	content:url(../img/tel_mark.svg);
	display: inline-block;/*忘れずに！*/
	width: 25px;/*画像の幅*/
	height: 25px;/*画像の高さ*/
	vertical-align: middle;
	margin-top: -6px;
	margin-right: 10px;
}
.headertel {
	margin-top: 5px;
	font-size: 1.65rem;
	font-weight: bolder;
	line-height: 2.2rem;
}
/* 画面サイズが600px以下の時に読み込ませる */
@media screen and (max-width: 600px) {
.headertel {
	text-align: center;
}
}
nav{
	border-bottom: 5px solid #ff0000;	
background: -webkit-linear-gradient(#FFF, #ccc);
background: -o-linear-gradient(#FFF, #ccc);
background: linear-gradient(#FFF, #ccc);
}
nav ul{
	display: table;
	table-layout: fixed;
	text-align: center;
	width: 100%;
}
nav ul li{
	display: table-cell;
 	vertical-align: middle;
	font-size: 1.2rem;
	font-weight: bolder;
	line-height: 60px;
	border-right: 2px solid #ccc;
	height: 60px;

}
nav ul li:first-child{
	border-left:2px solid #ccc;
}
.active{
	background-color: #FF0000;
}
.active a:link{
	color: #ffffff;
}
.active a:visited{
	color: #ffffff;
}
.active a:hover{
	color: #ffffff;
}



/*ハンバーガーメニュー用 CSS */
#ham-menu {
    background-color: #f00; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 50px 20px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 300px; /*メニュー横幅*/
    z-index: 1000;
}

#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}

#menu-icon {
    background-color: #f00; /*アイコン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #fff; /*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px; /*アイコン縦高さ*/
    line-height: 50px; /*縦位置中央化*/
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}

#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}
#ham-menu ul li {
	list-style: none;
	font-size: 1.3rem;
	line-height: 3rem;
	border-bottom: #FFFFFF dotted 1px;

}
#ham-menu ul li a{
	color: #FFFFFF;
}



/* FOOTER
------------------------------- */
footer{
	margin-top: 80px;
	padding:  40px 0 10px 0;
	background-color: #DDD;
}
.footerlogo{
	width: 250px;
	text-align: center;
	margin-bottom: 10px;
}
.footer_ad{
	text-align:center;
}
.footer_copy{
	border-top: #A3A3A3 solid 1px;
	margin-top: 20px;
	padding-top: 10px;
}
.footer_copy p{
	font-size: 0.75rem;
	text-align: center;
	color: #5F5F5F;
}
.footer_menu{
	margin-top: 40px;
}
.footer_menu ul li{
	display: inline;
	margin-left: 15px;
	margin-right: 15px;
}
@media screen and (max-width: 600px) {
.footer_menu ul li{
	display: block;
}
}
.footer_menu ul li:before{
	content:url(../img/yajirusi.png);
	display: inline-block;/*忘れずに！*/
	vertical-align: middle;
	margin-right: 6px;
}

.footer_menu2{
	margin-top: 10px;
	margin-bottom: 40px;
}
.footer_menu2 ul li{
	display: inline;
	margin-left: 15px;
	margin-right: 15px;
}
@media screen and (max-width: 600px) {
.footer_menu2 ul li{
	display: block;
}
}

.footer_menu2 ul li:before{
	content:"・";
	display: inline-block;/*忘れずに！*/
	vertical-align: middle;
	margin-right: 6px;
}


/* INDEX
------------------------------- */
.mt_pc80_sp40{
	margin-top: 80px;
}
@media screen and (max-width: 600px) {
.mt_pc80_sp40{
	margin-top: 40px;
}
}
h3{
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}
.flex_top{
	display: flex;
}
@media screen and (max-width: 600px) {
.flex_top{
	display: flex;
	flex-direction: column;
}
.item:first-child{
	margin-right: 0!important;
	margin-bottom: 20px;
}
	
}
.item:first-child{
	margin-right: 50px;
}
.itemcon{
	background-color: #DDD;
	padding: 10px;
}
.itemtitle{
	font-size: 1.25rem;
	color: #f00;
	font-weight: bolder;
}
.saiyou{
	background-image: url("../img/index_04.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	min-height: 400px;
	margin-top: 80px;
	display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */

}
.saiyouh3{
	font-size: 2rem;
	margin-bottom: 0px!important;
	font-weight: bold;
	text-align: center;
}
.saiyoutext{
	text-align: center;
}
.bottan{
	padding: 20px 0px;
	background-color: #f00;
	color: #FFF;
	font-size: 1.5rem;
	font-weight: bold;
	width: 50%;
	margin: 0 auto;
	text-align: center;
}
@media screen and (max-width: 600px) {
.bottan{
	padding: 10px 0px;
	background-color: #f00;
	color: #FFF;
	font-size: 1.5rem;
	font-weight: bold;
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
}


/* 事業内容
------------------------------- */
h4{
	color: #f00;
	font-size: 1.25rem;
	font-weight: bolder;
	text-align: center;
	margin-bottom: 20px;
}
.setumei{
	background-color: #ddd;
	padding: 10px;
	margin: 20px 0;
}
.setumei span{
	font-weight: bold;
	margin-right: 30px;
}
.bisinesstitle{
	background-color: #ddd;
	padding: 20px;
	border-left: #f00 solid 15px;
	margin-bottom: 20px;
	font-weight: bold;
}



/* 会社概要
------------------------------- */
table{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 0 auto;
  text-align: left;
  width: 100%;
}
table th,
table td{
  border: 1px solid #999;
  padding: 1em;
}
table th{
  background: #eee;
	width: 20%;
}
@media (max-width: 650px) {
    table{
      width: 100%;
    }
    table th,
    table td{
      display: block;
    }
	table th{
	width: 100%;
}

}


/* 作業工程
------------------------------- */
/*基本の吹き出し*/
.proobi{
  position: relative;
  background: #DDD;
  padding: 1em;
	margin-bottom: 20px;
	text-align: center;
	font-weight:bolder;
	font-size: 1.25rem;
}
.proobilast{
  position: relative;
  background: #DDD;
  padding: 1em;
	margin-bottom: 20px;
	text-align: center;
	font-weight:bolder;
	font-size: 1.25rem;
}
.proobi span{
	color: #f00;
	margin-right: 5px;
}
.proobilast span{
	color: #f00;
	margin-right: 5px;
}
.proobi:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #DDD transparent transparent transparent;
  border-width: 15px 15px 0 15px;
}

/* プライバシーポリシー
------------------------------- */
.prab{
	margin-top: 20px;
	font-weight: bolder;
	font-size: 1.15rem;
}


/* サイトマップ
------------------------------- */

.sitemapobi ul li{
}
.sitemapobi li{
	background-color: #DDDDDD;
	padding: 15px;
	margin-bottom: 20px;
	list-style: none;

}

/* トップページ facebook用
------------------------------- */

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
	margin: 0 auto;
}
.wrap {
  max-width: 500px;
  margin: 0 auto;
 }