@charset "utf-8";

/*画面サイズ768px以下*/
@media print, screen and (max-width:768px) {

html {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
	font-style: normal;
	font-size: 90%;
}
button, input, select, textarea {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
	font-style: normal;
}
body {
	color: #222;
	line-height: 1.5;
    letter-spacing: 0.07em;
	margin: 0;
}
p {
  margin: 0;
  padding: 3px;
}
h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
	margin: 0;
	padding: 0;
    width: 100%;
	vertical-align: bottom;
}
a {
    margin: 0;
    padding: 0;
	color: #3186F5;
    text-decoration: none;
}
a:visited {
	color: #3186F5;
}
a:focus {
	text-decoration: underline;
}
a:active, a:hover {
	outline: 0;
    text-decoration: underline;
}
a:hover img {
	opacity:0.78;
	-webkit-transition:0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
i {
    margin-right: 5px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    text-align: left;
    padding: 10px;
    background-color: #D9DFFF;
}
table tr, table td {
    border-bottom: 1px solid #ccc;
    padding: 10px 5px;
}
figure {
	margin: 0;
}

/*- - -------------------------- ヘッダー */
header {
    margin: 0;
    width: 100%;
    height: 75px;
    background-color: #00113D;
    line-height: 1;
}
header .head_inner {
    margin: 0 auto;
    padding-top: 13px;
    display: flex;
    justify-content: space-between;
    width: 96%;
    max-width: 1200px;
}
header .head_inner .left_h1 {
    width: auto;
    display: flex;
}
header .head_inner .left_h1 .logo {
    margin-right: 10px;
	padding-top: 7px;
    width: 45px;
    height: auto;
}

header .head_inner .left_h1 .titleh1 small {
    padding-left: 1px;
    color: #fff;
}
header .head_inner .left_h1 .titleh1 h1 {
    width: 200px;
}
header .head_inner .right_telcon {
    display: none;
}

/* SPナビは、drawer/drawer-master/dist/cssにて設定 */

/*- - -------------------------- TOPメインビジュアル */
#main_visual {
    width: 100%;
}

/*- - -------------------------- TOPトピックス＆バナーエリア*/
#topics_banner {
    margin: 25px auto;
    width: 100%;
}
/*トピックス*/
.topics {
    margin: 0 auto;
    width: 100%;
    max-width: 470px;
}
.topics .topics_inner {
   padding-top: 5px;
}
.topics .topics_inner .line {
    padding: 7px;
    border-bottom: 1px dotted #707070;
}
.topics .topics_inner .line .date {
    background : url("../img/page/square.png") no-repeat 0 6px;
    background-position: 0;
}
.topics .topics_inner .line .date p {
    padding: 0 0 0 13px;
}
.topics .topics_inner .more {
    margin-right: 5px;
    margin-left: auto;
    margin-top: 5px;
    width:  69px;
}
/*トピックス一覧*/
.topicsmore_box {
    margin: 0 auto;
    width: 100%;
    max-width: 470px;
	padding-top: 15px;
}
.topicsmore_box .line {
    padding: 7px;
    border-bottom: 1px dotted #707070;
}
.topicsmore_box .line .date {
    background : url("../img/page/square.png") no-repeat 0 6px;
    background-position: 0;
}
.topicsmore_box .line .date p {
    padding: 0 0 0 13px;
}

/*バナーエリア*/
#topics_banner .banner {
    margin:20px auto 0;
    width: 95%;
    max-width: 470px;
}
#topics_banner .banner li:first-child {
    margin-bottom: 20px;
}

/*- - -------------------------- TOPピクチャーメニューエリア*/
#picmenu {
    margin: 0 auto;
    width: 95%;
    max-width: 600px;
}
#picmenu .picmenu_inner ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#picmenu .picmenu_inner ul li {
    width: 48%;
    margin-top: 15px;
}

/*- - -------------------------- 中ページの共通スタイル */
#contents {
    margin: 0 auto 50px;
    width: 100%;
}
#contents img {
    display: block;
    margin: 0 auto;
    padding: 10px 5px;
}

#contents > h2 {
    padding: 25px 10px;
    font-weight: bold;
    font-size: 155%;
    text-align: center;
    background-image: url(../img/page/back01.png);
    background-repeat: repeat;
	border-bottom: solid 1px #EFEFEF;
}

#contents_inner_sp {
  margin: 0 auto;
  width: 96%;
}

#contents h3 {
    margin: 20px 0 10px;
    font-weight: bold;
    font-size: 125%;
    position: relative;
    padding: 0.25em 0;
}
#contents h3:after {
  content: "";
  display: block;
  height: 3px;
  background: -webkit-linear-gradient(to right, #364cc4, rgb(54, 169, 196));
  background: linear-gradient(to right, #364cc4, rgb(54, 169, 196));
}
#contents h4 {
    margin: 15px 0 5px;
    padding:5px 0;
    font-weight: bold;
    font-size: 110%;
    color: #368cc4;
    border-bottom: 1px dotted #368cc4;
}
/* 画像をリサイズしセンタリングする */
.img_l {
    width: 100%;
	max-width: 700px;
}
.img_m {
    width: 100%;
    max-width: 460px;
}
.img_ss {
    width: 220px;
}
/* 画像を２列で横並びにする */
.flexbox_2row {
  display: flex;
  flex-direction: column;
}
.flexbox_2row > img {
    width: 100%;
    max-width: 450px;
}
.flexbox_2row figure {
	width: 100%;
}
/* 画像（キャプション付き）を２列で横並び */
.flexbox_2row figure.withcaption {
	margin-top: 15px;
	text-align: center;
    width: 100%;
}

/* 画像を３列で横並びにする */
.flexbox_3row {
  display: flex;
  flex-direction: column;
}
.flexbox_3row > img {
    width: 100%;
    max-width: 450px;
}
/* 左に小さめ画像、右にテキストを横並びにする */
.flexbox_2row_txt {
  display: flex;
  flex-direction: column;
}
.flexbox_2row_txt .smallside {
	margin: 0 auto;
	width: 100%;
	max-width: 450px;
	text-align: center;
}
.flexbox_2row_txt .largeside {
	margin: 0 auto;
	padding-bottom: 20px;
	width: 96%;
}

/*h2下のグレー背景テキスト*/
#firsttext {
    padding: 5px;
    width: 100%;
    text-align: center;
    font-size: 105%;
    font-weight: bold;
    background-color: #f2f2f2;
}
/*工事一覧テーブルの共通スタイル*/
table.kouji_ichiran {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
table.kouji_ichiran tbody {
  display: table;
    width: 96%;
}
table.kouji_ichiran th {
    background-color: #E1F2F1;
}
table.kouji_ichiran th,
table.kouji_ichiran tr,
table.kouji_ichiran td {
    border: 1px solid #a8a8a8;
    padding: 10px;
}
table.kouji_ichiran span {
    font-weight: bold;
    color: #107717;
}

/*受賞履歴テーブルのスタイル*/
table.jusyou {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
table.jusyou tbody {
  display: table;
    width: 96%;
}
table.jusyou th {
    background-color: #E0F4FB;
}
table.jusyou th,
table.jusyou tr,
table.jusyou td {
    border: 1px solid #E0DFDF;
    padding: 10px;
}
table.jusyou span {
    font-weight: bold;
    color: #AB4F00;
}

/*- - -------------------------- 中ページ　単独のスタイル */
/* リサイクルプラント */
.asfrc_container {
    margin: 0 auto;
}
.asfrc_container span {
    font-size: 130%;
}
/* 会社概要 */
table.company {
    margin: 10px auto 0;
}
table.company tr td:first-child {
    width: 32%;
}
/* 企業方針 */
#rinen {
    text-align: center;
}
#rinen ul li {
    font-family: ro-shino-std, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 35px;
    line-height: 1.2;
}
.ceo {
    text-align: right;
}
.ceo span {
    font-family: ro-shino-std, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 150%;
}
/* 特殊工法 */
a.ab {
	background-color: #CA484A;
	color: #fff;
}
a.ab:hover {
	background-color:#973637;
	text-decoration: none;
}
a.takenoko {
	background-color:#48800E;
	color: #fff;
}
a.takenoko:hover {
	background-color:#2C4F09;
	text-decoration: none;
}

/* 採用情報 */
table.recruit {
  margin-bottom: 15px;
  background-color: rgba(230, 230, 230, 0.5);
}
table.recruit tr td:first-child {
    width: 23%;
    color: #222;
}

/* トピックス個別ページ */
.topics_date {
	text-align: right;
	padding: 10px 0 15px;
}

/*- - -------------------------- フッター */
footer {
    margin-top: 30px;
    width: 100%;
    background-color: #000060;
    font-size: 90%;
}
footer p,
footer .foot_inner .right_menu ul li a {
    color: #fff;
}
footer .foot_inner {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-top: 20px;
    width: 95%;
}
footer .foot_inner .left_detail {
    order: 2;
}
footer .foot_inner .right_menu {
    order: 1;
}

footer .foot_inner .left_detail .txtl {
    font-weight: bold;
    font-size: 135%;;
    padding-bottom: 3px;
}

footer .foot_inner .right_menu {
    width: 70%;
}
footer .foot_inner .right_menu > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 15px;
}
footer .foot_inner .right_menu > ul > li {
    margin-bottom: 15px;
    width: 50%;
}
footer .foot_inner .right_menu > ul {
    display: flex;
    justify-content: space-between;
}
footer .foot_inner .right_menu > ul ul.ko_menu {
    display: flex;
    flex-wrap: wrap;
    width: 200px;

}
footer .foot_inner .right_menu > ul ul.ko_menu > li {
    width: 60%;
    font-size: 85%;
    line-height: 1.8em;
}
footer .foot_inner .right_menu > ul ul.ko_menu > li:nth-child(odd) {
    width: 80px;
}

#copy {
    padding: 20px 0 73px;
    width: 100%;
    text-align: center;
    letter-spacing: 0.2em;
    font-size: 70%;
}
#copy .copy_txtlink {
	color: #76B2FF;
}
/*- - -------------------------- TOPへ戻る追従ボタン */
.page-top {
  position: fixed;
  width: 65px;
  height: 70px;
  right: 4%;
  bottom: 90px;
  z-index: 99;
}

/*- - -------------------------- スマホ下部問い合わせバー */
.contactbar {
	display: flex;
    justify-content: space-around;
	position: fixed;
	bottom: 0;
	width: 100%;
    height: 70px;
	background-color: rgba( 0, 0, 0, 0.6 );
    font-size: 95%;
	z-index: 10000;
}
.contactbar a:hover {
    text-decoration: none;
}
/*電話するボタン*/
.contactbar .contactbar_inner_a {
    margin: 0px auto;
    padding: 10px 0;
	width:47%;
    height: 50px;
    line-height: 40px;
}
/*メールするボタン*/
.contactbar .contactbar_inner_b {
    margin: 0px auto;
    padding: 10px 0;
	width:47%;
    height: 50px;
}
.contactbar .contactbar_inner .contactbar_inner_btn {
    padding: 11px 0;
    font-size: 20px;
    font-weight: bold;
    margin-left: 15px;
	line-height: 1.3;
}
.inquiry_btn {
	display: block;
    background-color: #060627;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
	max-width: 100%;
    padding: 5px 10px;
}
.inquiry_btn:link, .inquiry_btn:visited {
    color: #fff !important;
}
.contactbar_inner span {
	color: #fff;
}

/*- - -------------------------- 非表示 */
.sp_none {
    display: none;
}

}