@charset "utf-8";

/*　========================================
PC表示設定（画面の横幅が769px以上）
========================================　*/
/* 全体設定
---------------------------------------- */
@font-face { font-family: 'orator'; src: url(../font/orator_std.ttf); }
html { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; font-size : 62.5%; color: #333; }
body { width: 100%; min-width: 980px; font-size: 16px; font-size: 1.6rem; line-height: 1.6; }
.wrap { width: 980px; margin: 0 auto; text-align: left;}
img { width: 100%; height: auto; }
a { color: #333; }
a:visited { color: #333; }
a:hover { color: #cc0033; }

* { box-sizing: border-box; }

/* ヘッダー設定
---------------------------------------- */
header { position: relative; position: fixed; width: 100%; min-width: 980px; border-top: #ffa132 solid 5px; background: #fff; box-shadow:0px 0px 6px 4px rgba(0,0,0,0.3); z-index: 2; }
header .logo { float: left; margin-left: 45px; padding: 15px 0; }
nav { float: right; margin-right: 30px; font-family: "orator"; }
nav ul.gNav li { float: left; }
nav ul.gNav li a { display: block; margin: 25px 20px 0; color: #000; font-size: 18px; font-size: 1.8rem; font-weight: bold; text-decoration : none; }
nav ul.gNav li a:hover { color: #ffa132; }
.nav_toggle { display:none; }

/* 共通部分設定
---------------------------------------- */
/*　見出し　*/
h2 { padding-top: 100px; font-size: 40px; font-size: 4.0rem; background: url(../image/common/h2_bg.png) no-repeat bottom center; font-family: "orator"; text-align: center; }
h2 span { display: block; margin-bottom: 20px; padding: 20px 0; font-size: 16px; font-size: 1.6rem; }
h3 { margin-bottom: 20px; font-size: 30px; font-size: 3rem; text-align: center; }

/*　リード文　*/
.lead { margin-bottom: 65px; font-size: 20px; text-align: center; line-height: 1.6; letter-spacing: 0.1em; }

/* フッター設定
---------------------------------------- */
footer { padding: 40px 0; background: #000; color: #fff; }
.sns { width: 80px; margin: 0 auto 20px; }
.sns .left { float: left; width: 45%; }
.sns .right { float: right; width: 45%; }
/*　コピーライト　*/
.copy { text-align :center; }

/* メインスライド
---------------------------------------- */
#mainSlide { padding-top: 80px; }

/* SERVICES/サービス
---------------------------------------- */
#service .box { min-height: 400px; margin: 0 auto 20px; }
#service .box:nth-of-type(1) { border-top: #0071bc solid 2px; background: url(/image/top/service_img01.jpg) no-repeat right; background-size: 50%; }
#service .box:nth-of-type(2) { border-top: #fbb03b solid 2px; background: url(/image/top/service_img02.jpg) no-repeat left; background-size: 50%; }
#service .box:nth-of-type(3) { border-top: #22b573 solid 2px; background: url(/image/top/service_img03.jpg) no-repeat right; background-size: 50%; }
#service .box:nth-of-type(4) { border-top: #ff7bac solid 2px; background: url(/image/top/service_img04.jpg) no-repeat left; background-size: 50%; }
#service .box .left { float: left; width: 50%; }
#service .box .right { float: right; width: 50%; }
#service .box .text { padding-top: 20px; text-align: justify; }
#service .box .text p { width: 96%; margin: 0 auto; font-size: 18px; font-size: 1.8rem; }

/* WORKS/施工事例
---------------------------------------- */
#work .work.slider .slick-track li { width: 230px; margin: 0 10px; }

/* BLOG/ブログ
---------------------------------------- */
#blog { background: #e0e0e0; padding-bottom: 10%; }
#blog ul { display: flex; justify-content: space-between; flex-wrap: wrap;　-webkit-flex-wrap: wrap; width: 100%; }
#blog ul li { position: relative; width: 23.5%; margin: 0 0 30px; padding: 0 0 30px; background: #fff; border: #ddd solid 1px; border-radius: 5px; }
#blog ul li p:first-child { margin-bottom: 4%; }
#blog ul li .img {  height: auto; overflow: hidden; border-top-left-radius: 5px; border-top-right-radius: 5px; }
#blog ul li .ttl { margin-bottom: 3%; padding: 0 10px; }
#blog ul li .ttl a { font-weight: bold; text-decoration: none; }
#blog ul li .date { margin-bottom: 2%; padding: 2% 10px; background: #F7F7F7; font-size: 12px; font-size: 1.2rem; }
#blog ul li .text { margin-bottom: 5%; padding: 0 10px; font-size: 12px; font-size: 1.2rem; text-align: justify; }
#blog ul li .more { position: absolute; bottom: 2%; left: 10px; font-size: 12px; font-size: 1.2rem; }

#blog .moreLink { margin-top: 2%; font-family: "orator"; font-size: 24px; font-size: 2.4rem; text-align: center; }
#blog .moreLink a { color: #333; text-decoration: none; font-weight: bold; }
#blog .moreLink a:after { content: " >"; }

/* COMPANY/会社概要
---------------------------------------- */
#company .box { width: 660px; margin: 0 auto; }
#company dl { width: 100%; margin-bottom: 4%; padding-bottom: 4%; border-bottom: #999 dotted 1px; }
#company dl:first-child { padding-top: 4%; border-top: #999 dotted 1px; }
#company dl:last-child { margin-bottom: 16%; }
#company dt { float: left; width: 22%; padding-left: 2%; }
#company dd { float: right; width: 74%; padding-right: 2%; }

/* CONTACT/コンタクト
---------------------------------------- */
#contact { background: #e0e0e0; padding-bottom: 10%; }
#contact .box { width: 760px; margin: 0 auto; }
input { display: block; width: 96%; height: 44px; margin: 0 auto 2%; padding: 0 2%; border: none; background: #f0f0f0; font-size: 16px; font-size: 1.6rem; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; }
input:nth-of-type(2) { margin-bottom: 4%; }
input[type="button"],
input[type="submit"] { display: block; width: 400px; height: 56px; margin: 0 auto; border: none; border-radius: 12px; background: #ff8500; color: #fff; font-size: 18px; font-size: 1.8rem; text-align: center; }
textarea { display: block; width: 96%; height: 195px; margin: 0 auto 4%; padding: 2%; border: none; background: #f0f0f0; font-size: 16px; font-size: 1.6rem; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; }

/* プレースホルダ設定 */
:focus::-webkit-input-placeholder { color: #ccc; } /* Chrome・Safari・Opera用(※Edgeにも使える) */
:focus:-moz-placeholder { color: #ccc; }  /* Firefox18以前用 */
:focus::-moz-placeholder { color: #ccc; } /* Firefox19以上用 */
:focus:placeholder-shown { color: #ccc; } /* CSS標準(予定)の記述 */

/* 確認画面
---------------------------------------- */
#check { width: 980px; margin: 0 auto; padding: 40px 0; }
#check > p { margin-bottom: 20px; text-align: center; }
#check table { width: 760px; margin: 0 auto 20px; border-collapse: collapse; }
#check table th,#check table td { padding: 10px 20px; border: #ccc solid 1px; text-align: left; }
#check div { width: 400px; margin: 0 auto; }
#check div .left { float: left; }
#check div .right { float: right; }
#check input  { display: block; width: 140px; height: 56px; margin: 0 auto; border: none; border-radius: 12px; background: #ff8500; color: #fff; font-size: 1.8rem; }
#check input[type="button"],
#check input[type="submit"] { width: 190px; }

.error { padding: 40px 0; }
.error p { margin-bottom: 20px; text-align: center; }

/* レスポンシブ用
---------------------------------------- */
@media screen and (max-width: 1300px){
#service .box:nth-of-type(1) { background: url(/image/top/service_img01.jpg) no-repeat right top; background-size: 50%; }
#service .box:nth-of-type(2) { background: url(/image/top/service_img02.jpg) no-repeat left top; background-size: 50%; }
#service .box:nth-of-type(3) { background: url(/image/top/service_img03.jpg) no-repeat right top; background-size: 50%; }
#service .box:nth-of-type(4) { background: url(/image/top/service_img04.jpg) no-repeat left top; background-size: 50%; }
#service .box .text p { font-size: 16px; font-size: 1.6rem; }
}

/* レスポンシブ用
---------------------------------------- */
@media screen and (max-width: 768px){

/* 全体設定　---------------------------------------- */
body { min-width: 100%; font-size: 12px; font-size: 1.2rem; }
.wrap { width: 100%; }

/* ヘッダー設定　---------------------------------------- */
header { min-width: 100%; }
header .logo { width: 160px; margin-left: 2%; padding: 8px 0; top: 0; }
nav { position: fixed; height: 100%; right: -160px; width: 160px; margin-right: 0; z-index: 2; background-color: rgba(255,255,255,0.8); transition: transform 0.3s linear 0s; }
nav ul { padding-top: 50px; }
nav ul.gNav li { float: none; border-bottom: #ccc dotted 1px; }
nav ul.gNav li a { display: block; margin: 0; padding: 10px; color: #000; font-size: 18px; font-size: 1.8rem; font-weight: bold; text-decoration : none; }
nav ul.gNav li a:hover { color: #1C2787; }
.open nav { -moz-transform: translateX(-160px); -webkit-transform: translateX(-160px); transform: translateX(-160px)}

/* ドロワーメニュー */
.nav_toggle { display: block; position: absolute; top: 11px; right: 2%; width: 30px; height: 25px; cursor: pointer; z-index: 3; }
.nav_toggle div { position: relative; }
.nav_toggle span { display: block; position: absolute; width: 100%; border-bottom:solid 3px #999; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
.nav_toggle span:nth-child(1) { top: 0; }
.nav_toggle span:nth-child(2) { top: 11px; }
.nav_toggle span:nth-child(3) { top: 22px; }
.open .nav_toggle span:nth-child(1) { top: 11px; -webkit-transform:rotate( -45deg); -moz-transform:rotate( -45deg); transform:rotate( -45deg)}
.open .nav_toggle span:nth-child(2),
.open .nav_toggle span:nth-child(3) { top: 11px; -webkit-transform:rotate( 45deg); -moz-transform:rotate( 45deg); transform:rotate( 45deg)}


/* 共通部分設定　---------------------------------------- */
/*　見出し　*/
h2 { padding-top: 5%; font-size: 30px; font-size: 3rem; }
h2 span { margin-bottom: 5%; padding: 2% 0 3% 0; font-size: 14px; font-size: 1.4rem; }
h3 { margin-bottom: 5%; font-size: 20px; font-size: 2rem; text-align: center; }

/*　リード文　*/
.lead { margin-bottom: 5%; padding: 0 2%; }

/* フッター設定　---------------------------------------- */

/* メインスライド　---------------------------------------- */
#mainSlide { padding-top: 50px; }

/* SERVICES/サービス　---------------------------------------- */
#service .box { margin-bottom: 10%; }
#service .box:nth-of-type(1) { background: none; }
#service .box:nth-of-type(1):after { content: ""; width: 100%; padding-top: 80%; background: url(/image/top/service_img01.jpg) no-repeat bottom; background-size: cover; }
#service .box:nth-of-type(2) { background: none; }
#service .box:nth-of-type(2):after { content: ""; width: 100%; padding-top: 80%; background: url(/image/top/service_img02.jpg) no-repeat bottom; background-size: cover; }
#service .box:nth-of-type(3) { background: none; }
#service .box:nth-of-type(3):after { content: ""; width: 100%; padding-top: 80%; background: url(/image/top/service_img03.jpg) no-repeat bottom; background-size: cover; }
#service .box:nth-of-type(4) { background: none; }
#service .box:nth-of-type(4):after { content: ""; width: 100%; padding-top: 80%; background: url(/image/top/service_img04.jpg) no-repeat bottom; background-size: cover; }
#service .box .text p { font-size: 16px; font-size: 1.6rem; }

#service .box .left,
#service .box .right { float: none; margin-bottom: 5%; width: 100%; }
#service .box .text { padding-top: 5%; }
#service .box .text p { font-size: 14px; font-size: 1.4rem; }

/* BLOG/ブログ　---------------------------------------- */
#blog ul { width: 98%; margin: 0 auto; }
#blog ul li { width: 48.5%; margin: 0 0 20px; }
#blog ul li:nth-of-type(odd) { margin-right: 3%; }

/* COMPANY/会社概要　---------------------------------------- */
#company .box { width: 98%; }

/* CONTACT/コンタクト　---------------------------------------- */
#contact .box { width: 98%; }
input:last-child { width: 98%; height: 50px; margin: 0 auto; font-size: 16px; font-size: 1.6rem; }

}

@media screen and (max-width: 480px){

/* BLOG/ブログ　---------------------------------------- */
#blog ul li { width: 100%; margin: 0 0 4%; }

}