/*
Theme Name: WordPressテーマ
Author: clarenet
Author URI: https://www.clarenet.co.jp/
Version: 1.0
*/

* { margin: 0; padding: 0; }
body { line-height: 1.4; letter-spacing: 0.03em; font-size: 14px;
     font-family: sans-serif; }
img { vertical-align: top; }
h1 { margin: 0; }
ul,li { list-style: none;}
a:link    { color: #333333; text-decoration: none; }
a:visited { color: #333333; text-decoration: none; }
a:hover   { color: #333333; text-decoration: none; }
a:active  { color: #333333; text-decoration: none; }

.fl { float: left; }
.fr { float: right; }

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

#onMenu {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0,0,0,0.85);
}
#onMenu .onMenu_list {
  margin-top: 30%;
}
#onMenu .onMenu_list li {
  text-align: center;
  margin-bottom: 8%;
}
#onMenu .onMenu_list li a {
  color: #FFF;
}

.pankuzu {
  padding: 0;
}
.pankuzu li {
  display: inline-block;
  font-size: 0.8em;
}
.pankuzu li::after {
  content: ">";
}
.pankuzu li:last-child::after {
  content: "";
}
.pankuzu li a {
  display: inline-block;
  margin-right: 10px;
}
.pankuzu li a:hover {
  text-decoration: underline;
}

.pagetop {
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 1000;
  cursor: pointer;
}


/* =============================================
　common: header
==============================================*/
header {
  min-width: 960px;
  padding: 0;
  border-bottom: 3px solid #2095CB;
}
.header_logo {
  padding: 0;
  display: inline-block;
}
.header_logo-image {
  padding: 0 25px;
}
.header_logo-image img {
  margin-top: 20px;
}
.header_logo-catch {
  display: inline-block;
  font-size: 0.85em;
  line-height: 110px;
  color: #333;
  letter-spacing: 0.08em;
}

#hamburger_btn { display: none; }

.header_menu {
  float: right;
}
.header_menu-main {
  display: inline-block;
  padding-right: 2em;
}
.header_menu-main li {
  display: inline-block;
  padding: 0 4px;
  margin: 0 18px;
  font-size: 0.95em;
  font-weight: bold;
  color: #333;
}
.header_menu-main li a {
  position: relative;
  padding: 0 1.1em;
  text-decoration: none;
}

.header_menu-main li a::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #13569D;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.header_menu-main li a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.header_menu-mail {
  display: inline-block;
  background: #12569D;
}
.header_menu-mail a {
  display: inline-block;
  padding: 38px;
}

/* =============================================
　common: mainimage
==============================================*/
.mainimg {
  width: 100%;
  margin-bottom: 20px;
  border-bottom: 3px solid #BDE2F4;
  background-size: cover;
}
.mainimg .mainimg_inner {
  width: 660px;
  height: 440px;
  margin: 0 auto;
  background: #12559d;
  text-align: center;
  position: relative;
  top: 30px;
  display: none;
}
.mainimg .mainimg_inner .inner_txt {
  padding: 65px 0 40px;
  text-align: center;
}

a.mainimg_linkbtn {
  display: block;
  width: 550px;
  margin: 0 auto;
  padding: 25px 0;
  border: 3px solid #9EC9F3;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 0.08em;
  background: #12569D url(./images/icon_linkbtn-arrow_hover.png) no-repeat right 40px center;
  transition: background 0.3s;
}
a.mainimg_linkbtn:hover {
  background: #FFF url(./images/icon_linkbtn-arrow.png) no-repeat right 25px center;
  color: #12569D;
}

.mainimg img {

}

/* =============================================
　common: container
==============================================*/
.container {
  width: 1060px;
  margin: 0 auto;
}
.article_title {
  margin-bottom: 95px;
  border-bottom: 1px solid #1C528E;
  position: relative;
  text-align: center;
}
.article_title span {
  background: #FFF;
  display: inline-block;
  padding: 6px 30px;
  position: relative;
  top: 28px;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 1.4em;
  color: #13559F;
  letter-spacing: 0.1em;
}
.contents_block {
  margin-bottom: 100px;
}
.section_block {
  margin-bottom: 60px;
}
a.common_linkbtn {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding: 25px 0;
  border: 3px solid #9EC9F3;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #12569D;
  letter-spacing: 0.08em;
  background: url(./images/icon_linkbtn-arrow.png) no-repeat right 40px center;
  transition: background 0.3s;
}
a.common_linkbtn:hover {
  background: #12569D url(./images/icon_linkbtn-arrow_hover.png) no-repeat right 25px center;
  color: #FFF;
}

/* =============================================
　common: footer
==============================================*/
footer {
  background: #EEF7FC;
}
small {
  display: block;
  padding: 30px 0;
  background: #12569D;
  text-align: center;
  font-size: 0.9em;
  color: #FFF;
}
footer small a.copylink { color: #FFF; }

.footer-info {
  width: 1000px;
  margin: 0 auto;
  padding: 35px 0 50px;
}
.footer_navi {
  text-align: center;
  margin-bottom: 70px;
}
.footer_navi li {
  display: inline-flex;
  padding: 0 45px;
  border-left: 1px solid #333;
}
.footer_navi li:last-child {
  border-right: 1px solid #333;
}
.footer_navi li a {
  font-size: 0.85em;
}

.footer_logo {
  width: 300px;
  height: 90px;
  float: left;
}
.footer_logo .footer_logo-image {
  display: inline-block;
  position: relative;
  top: -25px;
  padding: 0 5px;
}
.footer_logo .footer_logo-catch {
  font-size: 0.85em;
  line-height: 90px;
  color: #333;
  font-weight: bold;
  letter-spacing: 0.08em;
}
.footer_adress {
  width: 400px;
  float: left;
  font-size: 0.9em;
}
.footer_adress p {
  margin-bottom: 8px;
}
.footer_tel {
  width: 300px;
  padding-top: 20px;
  float: left;
}


.telno_txt {
  font-size: 1.6em;
  font-weight: bold;
  color: #222;
}
.telno_txt:hover {
  opacity: 1;
  color: #222;
}

/* =============================================
　each pages
==============================================*/
.p_subpage {
  padding-top: 40px;
}

/* --- top --- */
.business_kind ul li {
  width: 32%;
  margin-right: 2%;
  float: left;
  display: inline-block;
  text-align: center;
}
.business_kind ul li:last-child {
  margin-right: 0;
}
.business_kind ul li p {
  margin-bottom: 25px;
  font-size: 1.6em;
  font-weight: bold;
  color: #13559F;
  letter-spacing: 0.1em;
}

.result_boxes {
  margin-bottom: 30px;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-webkit-flexbox;
  display:-moz-flexbox;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.result_boxes li {
  width: 25%;
  float: left;
  margin-bottom: 40px;
}
.result_boxes li .inner {
  width: 230px;
  margin: 0 auto;
}
.result_boxes li .result_image {
  width: 230px;
  margin-bottom: 10px;
}
.result_boxes li .icon {
  margin-bottom: 8px;
}
.result_boxes li .icon span {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.5em;
  color: #FFF;
  letter-spacing: 0.09em;
}
.result_boxes li .icon span.dismantling { background: #E4A907; }
.result_boxes li .icon span.reform      { background: #CFCA0C; }
.result_boxes li .icon span.exterior    { background: #A1B516; }

.result_boxes li .add-info {
  margin-bottom: 8px;
  font-size: 0.8em;
  font-weight: bold;
  color: #333;
}
.result_boxes li .add-info .date {
  padding-right: 10px;
}
.result_boxes li p {
  letter-spacing: 0.02em;
}

/* ---------------------- 事業内容 ---------------------- */
.business_information .business_one {
  margin-bottom: 70px;
}
.business_information .business_one .business_image {
  margin-bottom: 20px;
  position: relative;
}
.business_information .business_one .business_image .business_image_title {
  position: absolute;
  bottom: -10px;
}
.business_information .business_one .business_information_box .title {
  width: 370px;
  float: left;
  text-align: center;
}
.business_information .business_one .business_information_box .title h3 {
  border-bottom: 1px solid #1C528E;
  line-height: 80px;
  margin-bottom: 30px;
  font-size: 1.6em;
  font-weight: bold;
  color: #13559F;
}
.business_information .business_one .business_information_box .txt {
  width: 660px;
  float: right;
  text-align: justify;
  font-size: 1.1em;
  padding-top: 120px;
  line-height: 1.8;
}

/* ---------------------- 会社概要 ---------------------- */
.company_intro,
.company_catch,
.company_txt {
  text-align: center;
}
.company_catch .company_catch_1 {
  margin-bottom: 10px;
}
.company_catch .company_catch_2 {
  margin-bottom: 4px;
}
.company_txt {
  padding-bottom: 50px;
  margin-bottom: 75px;
  background: url("../muraoka/images/bg_company_txt.png") no-repeat bottom center;
}
.company_txt p {
  line-height: 3;
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  margin-bottom: 50px;
}
.company_txt p span {
  color: #18469d;
}
.company_info h3 {
  width: 320px;
  text-align: center;
  margin: 0 auto 75px;
  padding: 6px 0;
  background: #18469d;
  font-size: 1.4em;
  color: #FFF;
  letter-spacing: 0.15em;
}
.company_info .conpany-data {
  width: 490px;
  padding-left: 40px;
  color: #12559d;
}
.company_info .conpany-data th,
.company_info .conpany-data td {
  line-height: 2.5;
  vertical-align: top;
}
.company_info .conpany-data th {
  width: 175px;
  text-align: left;
  font-weight: bold;
}
.gmap iframe {
  width: 1060px;
  height: 300px;
}

/* ---------------------- お問い合わせ ---------------------- */
.contact_inputArea {
  padding: 30px;
}
.contactform_txt {
  padding: 0 30px 25px;
  color: #222;
  line-height: 1.8;
}
.contactform_txt .asterisk {
  color: #dd0000;
}
.contact_inputArea table.input {
  width: 100%;
}
.contact_inputArea table.input tr th,
.contact_inputArea table.input tr td {
  padding: 12px 0;
  vertical-align: middle;
}
.contact_inputArea table.input tr th.input_ttl_txtarea {
  vertical-align: top;
}
.contact_inputArea table.input tr th {
  width: 25%;
  text-align: left;
  color: #222;
  font-size: 1.2em;
}
.contact_inputArea table.input tr th span {
  padding-left: 10px;
  color: #DD0000;
}
.contact_inputArea table.input tr td {
  font-size: 1em;
}
.contact_inputArea table.input tr td input {
  padding: 6px;
}
.contact_inputArea table.input tr td textarea {
  width: 90%;
  height: 120px;
  padding: 6px;
  font-size: 1.1em;
}
.contact_inputArea table.input tr td .m_name { width: 35%; }
.contact_inputArea table.input tr td .m_address { width: 60%; }
.contact_inputArea table.input tr td .m_company { width: 50%; }
.contact_inputArea table.input tr td .m_tel { width: 30%; }

.contact_inputArea .sendBtn {
  text-align: center;
  padding: 50px 0;
}
.contact_inputArea .sendBtn input,
.contact_inputArea .modal_sendBtn input {
  border: 3px solid #9EC9F3;
  background: #FFF;
  padding: 15px 100px;
  color: #12559d;
  font-size: 1.3em;
  font-weight: bold;
  cursor: pointer;
  background: #FFF;
  transition: background 0.3s;
}
.contact_inputArea .sendBtn input:hover,
.contact_inputArea .modal_sendBtn input:hover {
  background: #12569D;
  color: #FFF;
}
.modal_sendBtn {
  text-align: center;
}

.notice {
  border: 1px dashed #DDD;
  padding: 35px;
  margin-bottom: 30px;
}
.notice h3 {
  color: #222;
  font-size: 1.1em;
  padding-bottom: 15px;
}

.err_name,
.err_address,
.err_txt {
  background: #FFDDDD;
}

.modalBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  display: none;
  background: rgba(0,0,0,0.7);
  z-index: 1500;
}
.modal_on {
  display: block;
}
table.conf {
  width: 70%;
  padding: 30px;
  margin: 100px auto 20px;
  background: #FFF;
}
table.conf th {
  width: 25%;
  padding: 12px 0;
  background: #FFF;
  text-align: left;
}


.c_contact .toTopPage {
  text-align: center;
}
.c_contact .toTopPage a {
  text-decoration: underline;
}


/* =============================================
　スマホのみ
==============================================*/
@media screen and (max-width:768px) {

header { min-width: 100%;}

/* --- メニュー --- */
#hamburger_btn {
    width: 60px;
    height: 60px;
    float: right;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1500;
    outline: 0;
    border-style: none;
    border: 0;
    background: none;
    display: block;
    background: #12569D;
    cursor: pointer;
}
#hamburger_btn span {
    width: 20px;
    height: 2px;
    display: inline-block;
    background: #FFF;
    position: absolute;
    z-index: 10;
}
#hamburger_btn span:nth-of-type(1) {
    top: 25px;
    right: 20px;
}
#hamburger_btn span:nth-of-type(2) {
    top: 30px;
    right: 20px;
}
#hamburger_btn span:nth-of-type(3) {
    top: 35px;
    right: 20px;
}
#hamburger_btn.active span:nth-of-type(1) {
    top: 25px;
    transform: translateY(5px) rotate(-45deg);
}
#hamburger_btn.active span:nth-of-type(2) {
    opacity: 0;
}
#hamburger_btn.active span:nth-of-type(3) {
    top: 0px;
    transform: translateY(30px) rotate(45deg);
}

/* --------------------------- 共通 --------------------------- */
.p_subpage {
  padding-top: 5%;
}
.pankuzu {
  padding: 0 2%;
}

/* --- メインイメージ --- */
.mainimg {
  height: 0;
  margin-bottom: 3%;
  background-size: cover;
}
.mainimg .mainimg_inner {
  width: 65%;
  height: 70%;
}
.mainimg .mainimg_inner .inner_txt {
  padding: 5% 0 5%;
}
.mainimg img { width: 90%; }

a.mainimg_linkbtn {
  display: block;
  width: 90%;
  margin: 0 auto;
  padding: 3% 0;
  border: 2px solid #9EC9F3;
  text-align: center;
  font-size: 0.75em;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 0.08em;
  background: #12569D url(./images/icon_linkbtn-arrow_hover.png) no-repeat right 6% center;
  transition: background 0.3s;
  background-size: auto 30%;
}
a.mainimg_linkbtn:hover {
  background: #FFF url(./images/icon_linkbtn-arrow.png) no-repeat right 3% center;
  color: #12569D;
}


/* --- 共通 --- */
.header_menu {
  display: none;
}
.header_logo-image {
  padding: 0 10px;
}
.header_logo-image img {
  width: auto;
  height: 40px;
  margin-top: 10px;
}
.header_logo-catch {
  line-height: 60px;
  font-size: 74%;
}

.container {
    width: 100%;
    margin: 0 auto;
}
.contents_block {
  margin-bottom: 10%;
}
.article_title {
  margin-bottom: 12%;
}
.article_title span {
  font-size: 90%;
  top: 20px;
}
.section_block {
  margin-bottom: 8%;
}
a.common_linkbtn {
  width: 90%;
  font-size: 76%;
  background: url(./images/icon_linkbtn-arrow.png) no-repeat right 6% center;
  background-size: auto 15%;
}

.footer-info {
  width: 100%;
  padding: 3% 0 8%
}
.footer_navi {
  text-align: left;
  margin-bottom: 5%;
  padding: 0 3%;
}
.footer_navi li {
  width: 49.5%;
  padding: 10px 0;
  margin: 0 1% 1% 0;
  text-align: center;
  display: block;
  float: left;
  border: none;
  background: #EEE;
}
.footer_navi li:nth-child(2n) {
  margin-right: 0;
}
.footer_navi li:last-child {
  border: none;
}
.footer_navi li a {
  display: block;
  margin: 0 0.5%;
}

.footer_logo,
.footer_tel {
  width: 100%;
  display: block;
  float: none;
}
.footer_adress {
  width: auto;
  padding: 3%;
  display: block;
  float: none;
}

.footer_logo,
.footer_tel {
  text-align: center;
}
.footer_logo {
  height: auto;
}
.footer_logo .footer_logo-image {
  top: -15px;
}
.footer_logo img {
  width: 40px;
}
.footer_logo .footer_logo-catch {
  line-height: 50px;
}
footer small a.copylink { color: #FFF; }

.footer_tel img {
  width: 60%;
}

/* --- 事業内容 --- */
.business_kind ul li p {
  font-size: 86%;
}
.business_kind ul li {
  width: 32%;
}
.business_kind ul li a img {
  max-width: 160px;
  width: 80%;
}

/* --- 施工事例 --- */
.result_boxes {
  margin-bottom: 0;
}
.result_boxes li {
  width: 33.3%;
}
.result_boxes li .inner {
  width: auto;
  padding: 0 3%;
}
.result_boxes li .result_image {
  width: 100%;
  margin-bottom: 1%;
}
.result_boxes li .result_image img {
  width: 100%;
  height: auto;
}
.result_boxes li .add-info {
  font-size: 74%;
}
.result_boxes li p {
  font-size: 80%;
}

/* ----------------------------- 事業内容 ---------------------------- */
.p_subpage .section_block {
  margin-bottom: 12%;
}
.business_information .business_one .business_image {
  margin-bottom: 0;
}
.business_information .business_one .business_image img {
  width: 100%;
}
.business_information .business_one .business_information_box .title {
  width: 100%;
  float: none;
}
.business_information .business_one .business_information_box .title img {
  width: 20%;
}
.business_information .business_one .business_information_box .txt {
  width: 94%;
  float: none;
  margin: 0 auto;
  padding-top: 8%;
}

/* ----------------------------- 会社概要 ---------------------------- */
.company_intro {
  margin-top: 16%;
}
.company_intro img {
  width: 16%;
}
.company_catch {
  margin: 2% 0 20%;
}
.company_catch img {
  width: 80%;
}
.company_catch .company_catch_1 {
  margin-bottom: 10px;
}
.company_catch .company_catch_2 {
  margin-bottom: 4px;
}
.company_txt {
  padding: 0 5% 10%;
  margin-bottom: 12%;
  background: url("../muraoka/images/bg_company_txt.png") no-repeat bottom center;
  background-size: 100%;
}
.company_txt p {
  line-height: 2.2;
  letter-spacing: 0.08em;
  text-align: justify;
  font-size: 1.0em;
  font-weight: bold;
  color: #464646;
  margin-bottom: 8%;
}
.company_info h3 {
  width: 70%;
  text-align: center;
  margin: 0 auto 8%;
  padding: 2% 0;
  background: #18469d;
  font-size: 1.4em;
  color: #FFF;
  letter-spacing: 0.15em;
}
.company_info .conpany-data {
  width: 94%;
  padding-left: 0;
  margin: 0 auto;
  color: #12559d;
  float: none;
}
.company_info .conpany-data table {
  width: 100%;
}
.company_info .conpany-data th,
.company_info .conpany-data td {
  line-height: 2.5;
  vertical-align: top;
}
.company_info .conpany-data th {
  display: block;
  width: 94%;
  padding: 0 3%;
  text-align: left;
  font-weight: bold;
  border-bottom: 1px dashed #999;
}
.company_info .conpany-data td {
  display: block;
  margin-bottom: 6%;
  padding: 0 3%;
}
.gmap iframe {
  width: 100%;
  height: 300px;
}

/* ----------------------------- お問い合わせ ---------------------------- */
.contactform_txt {
  padding: 0 3% 6%;
  color: #222;
  line-height: 1.8;
}
.contact_inputArea {
  padding: 3%;
}
.contact_inputArea table.input tr th,
.contact_inputArea table.input tr td {
  padding: 3% 0;
}
.contact_inputArea table.input tr th {
  width: 30%;
  font-size: 0.9em;
}
.contact_inputArea table.input tr th span {
  padding-left: 1%;
}
.contact_inputArea table.input tr td {
  font-size: 0.9em;
}
.contact_inputArea table.input tr td input {
  padding: 0.5em;
  font-size: 16px;
  transform: scale(0.9);
}
.contact_inputArea table.input tr td textarea {
  width: 95%;
  height: 5rem;
  padding: 1%;
  font-size: 16px;
  transform: scale(0.9);
}
.contact_inputArea table.input tr td .m_name { width: 90%; }
.contact_inputArea table.input tr td .m_address { width: 90%; }
.contact_inputArea table.input tr td .m_company { width: 90%; }
.contact_inputArea table.input tr td .m_tel { width: 90%; }

.notice {
  width: 82%;
  margin: 0 auto;
  padding: 5%;
  margin-bottom: 12%;
}

.modal_inner {
  width: 76%;
  height: 70%;
  padding: 3% 6% 6%;
  overflow: scroll;
  margin: 5% auto 5%;
  background: #FFF;
  position: relative;
}
.modal_inner .modal_close {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1600;
    outline: 0;
    border-style: none;
    border: 0;
    background: none;
    display: block;
    background: #FFF;
    cursor: pointer;
}
.modal_inner .modal_close span {
    width: 30px;
    height: 2px;
    display: inline-block;
    background: #999;
    position: absolute;
    z-index: 10;
}
.modal_inner .modal_close span:nth-of-type(1) {
    top: 15px;
    right: 5px;
    transform: translateY(5px) rotate(-45deg);
}
.modal_inner .modal_close span:nth-of-type(2) {
    top: -10px;
    right: 5px;
    transform: translateY(30px) rotate(45deg);
}


table.conf {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
table.conf th {
  width: 100%;
  display: block;
  padding: 3% 0;
  background: #FFF;
  text-align: left;
}
table.conf td {
  display: block;
}
.contact_inputArea .modal_sendBtn {
  width: 80%;
  margin: 0 auto;
}
.contact_inputArea .modal_sendBtn input {
  font-size: 1.1em;
  padding: 6% 12%;
}




.pagetop {
  position: fixed;
  bottom: 20px;
  right: 0px;
  z-index: 1000;
  cursor: pointer;
}
.pagetop img {
  width: 70%;
}

.br_sp { display: none; }

}

/* =============================================
　PCのみ
==============================================*/
@media screen and (min-width:768px) {

.br { display: none; }

}