@charset "utf-8";


/* スマホヘッダー */
@media screen and (max-width: 800px) {
header #sp_header { display: none }
}


/* メインエリア */
#main { opacity: 0; overflow: hidden; zoom: 1 }
#main .bx_bloc { float: left; width: 66.66% }
#main .title { float: right; width: 30% }
#main .title div { padding-top: 26.8%; width: 82% }
#main .title div h1 { font-family: 'Sawarabi Gothic', sans-serif; font-size: 120% }
#main .title div h2 { margin-bottom: 0.3em }
#main .title div h3 { margin-bottom: 4em; font-size: 110%; text-align: right }
#main .title div h4 { color: #878767; font-family: "Sawarabi Mincho", sans-serif; font-weight: normal; font-size: 180%; text-align: center }
#main .title div h4 span { position: relative; padding: 0.5em 1em 1em; display: inline-block }
#main .title div h4 span::before { content: url("../img/common/diagonal.png"); position: absolute; top: 0; left: 0 }
#main .title div h4 span::after { content: url("../img/common/diagonal.png"); position: absolute; bottom: 0; right: 0 }
#main .title div p { margin-bottom: 1em; width: 25% }
#main .pager_auto { position: absolute; bottom: 10px; left: 10px }

@media screen and (max-width: 1400px) {
#main .title div h1 { font-size: 100% }
#main .title div h4 { font-size: 130% }
#main .title div h4 span { padding: 0.5em 0 1em }
#main .title div h4 span::before { content: "" }
#main .title div h4 span::after { content: "" }
}

@media screen and (max-width: 800px) {
#main .bx_bloc { float: none; margin-bottom: 1.5em; width: 100% }
#main .title { float: none; width: 100% }
#main .title div { margin: 0 auto; padding-top: 0; width: 80% }
#main .title div h1 { font-size: 100%; text-align: center }
#main .title div h2 { margin: 0.3em auto; width: 80% }
#main .title div h3 { margin-bottom: 0.5em; font-size: 110%; text-align: center }
#main .title div h4 { font-size: 140% }
#main .title div h4 span { padding: 0.5em 1em 1em }
#main .title div h4 span::before { content: url("../img/common/diagonal.png") }
#main .title div h4 span::after { content: url("../img/common/diagonal.png") }
#main .title div h4 br { display: block }
#main .title div p { display: none }
}


/* お知らせ */
#news { overflow: hidden; zoom: 1 }
#news .column { overflow: hidden }
#news .news_area { float: left; position: relative; padding: 1em 0 2em; border: 1px solid #CCC; width: 49% }
#news .news_area::before { content: ""; display: block; padding-top: 165% }
#news .news_area .inner { position: absolute; top: 1em; bottom: 2em; left: 0; right: 0 }
#news .news_area .box { margin: 0 auto; overflow-y: auto; width: 95%; max-height: 100% }
#news .sns { float: right; width: 49% }
#news .sns .btn_bloc { margin: 1em auto 0; width: 50% }

#news .insta ul { margin-top: -3%; margin-left: -3%; display: flex; flex-wrap: wrap }
#news .insta li { margin-top: 3%; margin-left: 3%; width: 47% }
#news .insta .date { font-size: 90% }
#news .insta .photo { position: relative; padding-top: 100%; overflow: hidden; width: 100% }
#news .insta img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; font-family: "object-fit: cover;"; width: 100%; height: 100% }
#news .insta li a { display: block }
#news .insta li a .like {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
  opacity: 0.6;
  text-shadow: 0 0 7px #000;
}

#news .box li { padding: 1em 0; border-bottom: 1px solid #CCC; font-size: 90% }
#news .box li:last-child { border-bottom: none }
#news .box a { display: block }
#news .box a:link { color: #333; text-decoration: none }
#news .box a:visited { color: #333; text-decoration: none }
#news .box a:hover { color: #333; text-decoration: none }
#news .box a:active { color: #333; text-decoration: none }
#news .box h4 { margin-bottom: 0.3em; font-weight: bold }
#news .box h4::before { content: "●"; font-size: 120% }
#news .box h5 { line-height: 1.5 }
#news .box p { margin: 0.5em 0; text-align: center; max-width: 500px }
#news .box p img { width: 100% }

@media screen and (max-width: 800px) {
#news .news_area { float: none; margin: 0 auto 1em; width: 90% }
#news .sns { float: none; margin: 0 auto; width: 90% }
#news .sns .btn_bloc { width: 75% }
#news .twitter { margin-bottom: 1em; width: 100%; height: 300px }
#news .twitter p { line-height: 300px; height: 300px }
#news .facebook { width: 100% }
#news .facebook .fb-container { width: 100% }
#news .box { height: auto }
#news .box ul { padding: 0.5em 1em 1em }
#news .box p { width: 100% }
}


/* 業務内容 */
#service { overflow: hidden; zoom: 1 }
#service .in { position: relative; max-width: 1000px; overflow: visible }
#service .photo1 { position: absolute; top: 20%; left: 0; width: 35% }
#service .photo2 { position: absolute; top: 0; right: -100px; width: 38% }
#service .box { float: right; padding-top: 2em; width: 59% }
#service .box div { margin-bottom: 1.5em }
#service .box h2 { margin-bottom: 0.3em; font-size: 120% }
#service .box h3 { margin-bottom: 1em; color: #878767; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; font-size: 180% }
#service .box h4 { margin-bottom: 0.5em; padding-bottom: 0.3em; border-bottom: 1px solid #ccc; font-size: 100%; font-weight: bold }
#service .box h5 { font-size: 90% }
#service .box2 { padding-top: 3em; overflow: hidden; zoom: 1 }
#service .box2 > p { float: left; width: 31.6% }
#service .btn_bloc { float: right; text-align: right; width: 65% }
#service .btn { width: 80% }

@media screen and (max-width: 800px) {
#service .photo { overflow: hidden }
#service .photo1 { position: static; top: 0; width: 50%; float: left }
#service .photo2 { position: static; right: 0; width: 50%; float: right }
#service .box { float: none; margin: 0 auto; padding-top: 1em; width: 90% }
#service .box h2 { font-size: 110%; text-align: center }
#service .box h3 { font-size: 150%; text-align: center }
#service .box2 { padding-top: 0 }
}


/* 施工実績 */
#works { margin-bottom: 6em; padding-top: 5em; background: url(../img/common/bg.png); overflow: hidden; zoom: 1 }
#works .subtitle h2 span { background-image: url(../img/common/tyle_wh_s.gif), url(../img/common/tyle_wh_s.gif) }
#works .in { max-width: none }
#works .photo_bloc { margin-bottom: 2em }
#works .photo_bloc ul { display: flex; justify-content: space-between }
#works .photo_bloc ul li { position: relative; margin-bottom: 1em; width: 16% }
#works .photo_bloc ul p { position: relative; margin-bottom: 0.5em; padding-top: 100%; overflow: hidden; width: 100% }
#works .photo_bloc ul p img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; font-family: "object-fit: cover;"; width: 100%; height: 100% }
#works .btn_bloc { margin: 0 auto; max-width: 300px }
#works h4 { font-size: 95%; font-weight: bold; text-align: center }
#works h5 { font-size: 90%; text-align: center }
#works li span { position: absolute; top: -8px; right: 10px }

@media screen and (max-width: 800px) {
#works { margin-bottom: 3em; padding-top: 2em }
#works .photo_bloc ul { flex-wrap: wrap }
#works .photo_bloc ul li { width: 30% }
#works .btn_bloc { width: 60% }
}


/* 会社案内 */
#company { margin-bottom: 6em; border-bottom: 4px solid #000; overflow: hidden; zoom: 1 }
#company .box { margin: 0 auto; width: 100%; max-width: 700px }
#company ul { margin-left: -3%; overflow: hidden; zoom: 1 }
#company ul li { float: left; margin-left: 3%; margin-bottom: 2em; width: 47% }
#company ul a { padding: 1.5em 0; background-repeat: no-repeat; background-size: contain; border: 1px solid #333; border-radius: 7px; font-size: 110%; font-weight: bold; display: block; text-align: center }
#company ul a span { background-image: url(../img/common/arrow_next_bk.png); background-repeat: no-repeat; background-position: 95% 50%; display: block }
#company ul a:link { color: #333; text-decoration: none }
#company ul a:visited { color: #333; text-decoration: none }
#company ul a:hover { color: #333; text-decoration: none }
#company ul a:active { color: #333; text-decoration: none }
#company ul a:hover { background-color: #333; color: #fff }
#company ul a:hover span { background-image: url(../img/common/arrow_next_wh.png) }

@media screen and (max-width: 800px) {
#company { margin-bottom: 3em }
#company .box { width: 90% }
#company ul li { margin-bottom: 1em }
#company ul a { padding: 1em 0; font-size: 80%; font-weight: normal }
}


/* お問い合わせ */
#contact { overflow: hidden; zoom: 1 }
#contact .box { margin: 0 auto 2em; padding: 2em; background-color: #F0F1F7; width: 100%; max-width: 1000px }
#contact .btn_bloc { margin: 0 auto; max-width: 380px }
#contact h3 { margin-bottom: 0.5em; text-align: center }
#contact h3 span { padding: 0.3em 0.7em 0.2em; background-color: #333; border-radius: 7px; color: #FFF; font-size: 100%; display: inline-block }
#contact h4 { text-align: center }
#contact h5 { font-size: 120%; text-align: center }
#contact h5 img { width: 335px }
#contact p { margin-bottom: 0.7em; text-align: center }
#contact p span { padding: 0.1em 0 0 55px; background: url(../img/common/ico_free.png) no-repeat 0 50%; font-size: 220%; font-weight: bold; display: inline-block }

@media screen and (max-width: 800px) {
#contact .box { margin: 0 auto 1em; padding: 1em; width: 90% }
#contact h3 span { font-size: 80% }
#contact h4 { font-size: 90% }
#contact h5 img { width: 90% }
#contact h5 span { display: none }
#contact p { margin: 0.5em 0 }
#contact p span { font-size: 170% }
#contact .btn_bloc { width: 60% }
}