@charset "utf-8";
/*==========================================
 共通
===========================================*/
/*===== PAGE TITLE =====*/
.sec-ttl{
 text-align: center;
 margin-bottom: 25px;
}
.sec-ttl .ttl-en{
 font-size: 3.6rem;
 letter-spacing: 0.075em;
}
.sec-ttl .ttl-ja{
 font-size: 1.4rem;
 color: #949393;
 margin: 5px auto 0;
}
@media screen and (max-width:767px){
.sec-ttl .ttl-en{
 font-size: 2.8rem;
}
.sec-ttl .ttl-ja{
 margin: 0 auto 0;
}
}
@media screen and (max-width:380px){
.sec-ttl .ttl-en{
 font-size: 2.4rem;
}
}
/*===== TITLE H2 =====*/
.inner-page-ttl_h2{
 font-size: 2.1rem;
 text-align: center;
 margin: 0 auto 50px;
}
/*===== line =====*/
.section-line{
 border-top: 1px solid #c9c9c9;
}
/*===== BTN 緑角丸 =====*/
.btn-basic{
 display: block;
 background: #003e00;
 border-radius: 5px;
 color: #fff;
 width: 100%;
 max-width: 270px;
 text-align: center;
 padding: 10px 0;
 position: relative;
}
.btn-basic::after{
 content: "\f101";
 font-family: FontAwesome;
 font-size: 1.8rem;
 position: absolute;
 right: 20px;
 top: calc(50% - 13px);
}
@media screen and (min-width:768px){
.btn-basic:hover{
 background: #000;
}
}

/*==========================================
スライダー
===========================================*/
#slide {
  /*opacity: 0;*/
  display: none;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  max-width: 1140px;
  -webkit-transition: all 0.0s;
  transition: all 0.0s;
}
.sp-arrows {
  z-index: 9999;
}
.sp-previous-arrow::before {
  border-bottom: none;
}
.sp-previous-arrow::after {
  border-top: none;
}
.sp-next-arrow::before {
  border-bottom: none;
}
.sp-next-arrow::after {
  border-top: none;
}
.sp-thumbnail-container {
  padding: 16px 1% 0 0%;
}

/*==========================================
 HOME【トップページ】
===========================================*/
/*===== About SPAZIO【スパジオについて】 =====*/
.index-about{
 margin: 100px auto 0;
}
.about-contents{
 border-top: 1px solid #c9c9c9;
 padding: 80px 0 120px;
}
.about-contents-list{
 display: flex;
 justify-content: space-between;
}
.about-contents-list li a{
 display: block;
 max-width: 176px;
}
@media screen and (min-width:768px){
.about-contents-list li a:hover {
 transform-origin: bottom center;
 animation: jumpingtwo 4s ease-in infinite;
}
}
@media screen and (min-width:768px) and (max-width:1000px) {
.about-contents-list{
 flex-wrap: wrap;
 justify-content: center;
}
.about-contents-list li{
 margin: 10px 5%;
}
}
@media screen and (max-width:767px) {
.about-contents-list{
 flex-wrap: wrap;
 padding: 0 10px;
}
.about-contents-list li{
 width: 48%;
 margin: 10px 0;
}
.about-contents-list li a{
 margin: 0 auto;
}
}
@media screen and (max-width:480px) {
.about-contents {
 padding: 40px 0 60px;
}
}
/*===== Gallery of SPAZIO【施工事例】 =====*/
.index-gallery{
 background: #f9f4ea;
 padding: 60px 0 50px;
}
.index-gallery-list{
 display: flex;
 justify-content: center;
}
.index-gallery-list .item{
 width: 23%;
}
.index-gallery-list .item .img{
 font-size: 0;
 text-align: center;
}
.index-gallery-list .item .img img{
 width: 100%;
 max-width: 220px;
 max-height: 170px;
 height: 300px;
 object-fit: cover;
 font-family: 'object-fit: cover;';
}
.index-gallery-list .item .ttl{
 text-align: center;
 margin: 10px 0;
}
.index-gallery-list .item .btn-more{
 background:#003e00;
 color: #fff;
 max-width: 130px;
 width: 100%;
 display: block;
 text-align: center;
 font-size: 1.4rem;
 padding: 3px 0;
 margin: 0 0 0 auto;
}
.index-gallery-list .item .btn-more::before{
 content: "\f101";
 font-family: FontAwesome;
 margin-right: 0.7em;
}
.btn-gallery{
 display: block;
 color: #fff;
 background:#003e00;
 border-radius: 5px;
 max-width: 260px;
 width: 100%;
 margin: 50px auto 0;
 text-align: center;
 font-size: 1.4rem;
 line-height: 2rem;
 position: relative;
 padding: 10px 0;
}
.btn-gallery span{
 font-size: 2.4rem;
 font-family: 'M+ C Type-1 (basic latin) light';
}
.btn-gallery::after{
 content: "\f101";
 font-family: FontAwesome;
 font-size: 1.8rem;
 position: absolute;
 right: 20px;
 top: calc(50% - 10px);
}
@media screen and (min-width: 768px) {
.index-gallery-list .item:not(:last-child){
 margin-right: 3%;
}
.index-gallery-list .item .btn-more:hover,
.btn-gallery:hover{
 background: #000;
 color: #fff;
}
}
@media screen and (max-width: 767px) {
.index-gallery-list{
 flex-wrap: wrap;
 justify-content: space-between;
}
.index-gallery-list .item{
 width: 48%;
 margin-bottom: 35px;
}
.index-gallery-list .item .ttl{
 font-size: 1.4rem;
}
}
@media screen and (max-width:480px) {
.btn-gallery {
 margin: 30px auto 0;
}
}
/*===== News and Infomation【新着情報】 =====*/
.index-topics{
 padding: 100px 0 80px;
 display: flex;
 justify-content: space-between;
align-items: flex-end;
}
.index-topics .list-block{
 max-width: 646px;
 width: 100%;
}
.index-topics-more{
 max-width: 250px;
 width: 100%;
 text-align: right;
}
.index-topics-img{
 background: url(../img/bg-topics.png) no-repeat top center;
 background-size: contain;
 height: 221px;
 max-width:362px;
 width: 100%;
 margin: 0 auto;
}
.index-topics-more a{
 color: #534741;
}
.index-topics-more a::before{
 content: "\f101";
 font-family: FontAwesome;
 margin-right:0.5em;
}
/*CMS*/
.index-topics-list{
 height: 160px;
overflow: auto;
}
.index-topics hr{
 border: 1px solid #c9c9c9;
 border-width: 1px 0 0 0;
}
.index-topics .tabbox{
 color: #003e00;
 width:97%;
}
@media screen and (max-width: 1000px) {
.index-topics .list-block{
 padding: 0 10px;	
}
.index-topics-more{
 padding: 0 10px;
}
}
@media screen and (max-width: 767px) {
.index-topics{
 display: block;
}
.index-topics .list-block{
 max-width: none;
}
.index-topics-more{
 max-width: none;
 margin:10px auto 0;
}
.index-topics-img{
 display: none;
}
}
@media screen and (max-width:480px) {
.index-topics {
 padding: 50px 0 60px;
}
}
/*===== Link of SPAZIO【リンク集】 =====*/
.index-link{
 background: #f9f4ea;
 padding: 60px 0 50px;
}
.index-link-list{
 display: flex;
 justify-content: space-around;
 align-items:center;
 flex-wrap:wrap;
}
.index-link-list li{
 width: 23%;
 text-align: center;
 font-size: 0;
 margin-bottom:25px;
}
.index-link-list li a{
 display: block;
 max-width: 150px;
 margin: 0 auto;
}
@media screen and (min-width: 768px) {
.index-link-list li a:hover {
 transform-origin: bottom center;
 animation: jumpingtwo 4s ease-in infinite;
}
}
@media screen and (max-width: 767px) {
.index-link-list{
 justify-content: space-between;
}
.index-link-list li{
 width: 30%;
}
}
@media screen and (max-width: 480px) {
.index-link-list li{
 margin-bottom:15px;
}
}
/*==========================================
 COMPANY【会社案内】
===========================================*/
.company-greeting{
 background: url(../img/bg-company.jpg) #00a1e9 no-repeat bottom center;
 background-size: contain;
 color: #fff;
 max-width: 690px;
 width: 100%;
 margin: 0 auto 100px;
 padding: 50px 10px 273px;
 text-align: center;
 letter-spacing: 0.1em;
 line-height: 4rem;
}
.company-lead-text{
 font-size: 2.4rem;
 margin: 0 0 40px;
 line-height: 4.6rem;
}
.company-lead-text2{
 font-size: 1.8rem;
 margin: 40px 0 0;
}
.company-overview{
 padding: 66px 0 0;
}
.overview-list{
 width: 100%;
}
.overview-list th,
.overview-list td{
 padding: 25px 0;
}
.overview-list th{
 font-family: 'M+ C Type-1 (basic latin) Bold','M+ Type-1 (general-j) Bold';
 font-weight: bold;
 border-bottom: 1px solid #c9c9c9;
}
.overview-list td{
 border-bottom: 1px dotted #c9c9c9;
}
.btn-map{
 background: #1a631a;
 color: #fff;
 font-size: 1.4rem;
 border-radius: 5px;
 padding: 4px 10px;
 margin-left: 3em;
}
.btn-map::before{
 content: "\f041";
 font-family: FontAwesome;
 font-size: 1.6rem;
 margin-right: 0.5em;
}
.company-map{
 margin-top: 25px;
}
.company-map-canvas{
 border: 10px solid #f9f4ea;
 font-size: 0;
}
.btn-googlemap{
 margin: 25px auto 0;
}
@media screen and (min-width: 768px) {
.overview-list th{
 text-align: left;
 width: 20%;
 min-width: 230px;
 padding-left: 50px;
}
.overview-list td{
 width: 80%;
 padding-left: 20px;
}
.overview-list tr:first-child th,
.overview-list tr:first-child td{
 padding-top: 0;
}
.btn-map:hover{
 background: #000;
}
}
@media screen and (max-width: 767px) {
.company-greeting{
 padding: 50px 10px 40%;
}
.company-greeting br{
 display: none;
}
.company-lead-text {
 font-size: 2.1rem;
}
.overview-list th,
.overview-list td{
 display: block;
}
.overview-list th{
 padding: 25px 0 10px;	
}
.overview-list td{
 border-bottom: 0;
}
.overview-list tr:first-child th{
 padding:0 0 10px;
}
.btn-map{
 display: block;
 max-width: 133px;
 width: 100%;
 text-align: center;
 margin: 15px auto 0;
}
}
@media screen and (max-width: 480px) {
.company-greeting{
 text-align: left;
 line-height: 3rem;
}
.company-lead-text {
 margin: 0 0 25px;
 line-height: 3.6rem;
}
.company-lead-text2 {
 margin: 25px 0 0;
}
}
/*==========================================
  GALLERY【施工事例】
===========================================*/
.gallery-list{
 background: #f9f4ea;
 padding: 40px 2.5% 50px;
}
.page_title_bg{
 font-size: 3.6rem;
 letter-spacing: 0.075em;
}
.responsive-wrap h3{
 font-size:1.6rem;
}
.Template-reform-detail-btn a{
 background: #1a631a;
 color: #fff;
 font-size: 1.4rem;
 border-radius: 5px;
}
.Template-reform-detail-btn a::before{
 content: "\f101";
 font-family: FontAwesome;
 margin-right: 0.7em;
}

@media screen and (min-width: 768px) {
body .responsive-wrap .triple li div.img-box img,
.responsive-article img{
 transition: .5s ease-in-out;
}
body .responsive-wrap .triple li div.img-box img:hover,
.responsive-article img:hover{
 opacity:0.5;
}
.Template-reform-detail-btn a:hover{
 background:#000;
}
}
/*==========================================
  STAFF【スタッフ紹介】
===========================================*/
.staff-mainimg{
 max-width: 960px;
 width: 100%;
 margin: 0 auto 60px;
 background: url(../img/bg-staff.jpg) no-repeat bottom right -20px #3bae37;
 min-height: 300px;
 color: #fff;
}
.staff-mainimg .text{
 text-align: center;
 max-width: 610px;
 width: 100%;
 padding: 85px 0 0;
 letter-spacing: 0.05em;
}
.staff-lead-text{
 font-size: 3.6rem;
}
.staff-text{
 font-size:1.8rem;
 margin-top: 15px;
 font-weight: 500;
}
.staff-list{
 display: flex;
 flex-wrap:wrap;
 justify-content: space-between;
}
.staff-list li{
 width: 32%;
 text-align: center;
 margin: 20px 0;
}
@media screen and (max-width:960px) {
.staff-mainimg{
 background: url(../img/bg-staff.jpg) no-repeat bottom center #3bae37;
 padding: 0 0 255px;
}
.staff-mainimg .text{
 text-align: center;
 max-width: none;
 padding: 30px 0 0;
}
}
@media screen and (max-width:767px) {
.staff-lead-text {
 font-size: 3.2rem;
}
.staff-list li{
 width: 48%;
}
}
@media screen and (max-width:480px) {
.staff-mainimg{
 background-size: contain;
 padding: 0 0 65%;
}
.staff-lead-text {
 font-size: 2.1rem;
}
.staff-text {
 font-size: 1.6rem;
}
}
/*==========================================
  NEWS【新着情報】
===========================================*/
.topics hr{
 border:none;
 border-top: 1px solid #c9c9c9;
 margin:25px 0;
}
/*==========================================
  PRIVACY【プライバシーポリシー】
===========================================*/
.privacy{
 line-height: 2.8rem;
}
.privacy-lead{
 margin-bottom: 50px;
}
.privacy-list .privacy-section:not(:last-child){
 margin-bottom: 50px;
}
.privacy-section-ttl{
 font-family: 'M+ C Type-1 (basic latin) Bold','M+ Type-1 (general-j) Bold';
 font-weight: bold;
 font-size: 1.8rem;
}
.privacy-section-ttl2{
 font-family: 'M+ C Type-1 (basic latin) Bold','M+ Type-1 (general-j) Bold';
 font-weight: bold;
 color: #003e00;
 margin-top: 15px;
}
/*==========================================
  CONTACT【お問い合わせ】
===========================================*/
.contact-lead{
 text-align: center;
 margin-bottom: 35px;
}
.contact-block{
 display: flex;
 justify-content: space-between;
 text-align: center;
}
.contact-block-item{
 width: 48%;
}
.contact-block-ttl{
 background: #12b5b0;
 color: #fff;
 padding: 10px 0;
 text-align: center;
 font-weight: bold;
}
.contact-block-item .number_tel-fax{
 color: #1a631a;
 font-size: 2.8rem;
 font-family: 'M+ C Type-1 (basic latin) Heavy';
 font-weight: bold;
 padding: 25px 10px;
}
.contact-block-item .number_tel-fax a{
 color: #1a631a;
}
.contact-block-ttl.mail-ttl{
 background: url(../img/bg-contact.png) no-repeat calc(50% - 170px) bottom #12b5b0;
 margin-bottom: 25px;
}
@media screen and (max-width:767px) {
.contact-block-item .number_tel-fax {
 font-size: 2.4rem;
}
}
@media screen and (max-width:480px) {
.contact-block{
 display: block;
}
.contact-block-item {
 width: 100%;
}
.contact-block-ttl.mail-ttl{
 background-position: left bottom;
 text-shadow: 
    #12b5b0 2px 0px,  #12b5b0 -2px 0px,
    #12b5b0 0px -2px, #12b5b0 0px 2px,
    #12b5b0 2px 2px , #12b5b0 -2px 2px,
    #12b5b0 2px -2px, #12b5b0 -2px -2px,
    #12b5b0 1px 2px,  #12b5b0 -1px 2px,
    #12b5b0 1px -2px, #12b5b0 -1px -2px,
    #12b5b0 2px 1px,  #12b5b0 -2px 1px,
    #12b5b0 2px -1px, #12b5b0 -2px -1px;
}
}
.mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev{
 text-shadow: none;
}
/*==mfphack==*/
#mailfield{
  max-width:960px;
  padding:0 0;
}
form#mailformpro dl dt{
  width:40%;
  font-size: 16px;
  font-weight: 500;
  padding:30px 50px;
  border-top:none;
  line-height: 1.6; 
}
form#mailformpro dl dd{
  padding:25px 0;
  font-size: 16px;
  border-top:none;
}
form#mailformpro input {
  width: 100%!important;
  max-width: 355px;
  padding: 7px;
  font-size: 15px;
  vertical-align: middle;
  margin-bottom: 5px;
  border-radius: 4px;
  border: 1px solid #aaa;
  box-shadow:none;
}
form#mailformpro textarea {
  max-width: 430px;
  width: 100%!important;
  max-height: 150px;
  padding: 7px;
  font-size: 15px;
  vertical-align: middle;
  border-radius: 4px;
  border: 1px solid #aaa;
}

.fontS{
  font-size: 14px;
  line-height: 1.6;
}
@media screen and (min-width: 768px){
form#mailformpro input.mfp-elements01{
   width: auto!important;
}
form#mailformpro dl dt.address-block{
 padding-bottom:80px;
}
}
@media screen and (min-width: 0px) and (max-width:767px) {
form#mailformpro label input[type="radio"] {
  display: inline-block !important;
  width: 15px;
}
form#mailformpro label {
  width: 120px;
}
#mailfield{
  width:100%;
}
form#mailformpro input {
    display: block;
  height: 30px;
    margin: 5px 0;
    width: 100%;
  max-width:none;
}

form#mailformpro textarea {
    display: block;
  height: 150px;
    margin: 5px 0;
    width: 100%;
}

form#mailformpro input.mfp-elements01 {
  display: inline;
    margin: 5px 0;
  width: 49%;
}
form#mailformpro textarea {
  max-width: none;
}
}

form#mailformpro select {
  vertical-align: middle;
  font-size: 14px;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
  border: 1px solid #aaa;
}

@media screen and (min-width: 0px) and (max-width:767px) {
form#mailformpro dl dt {
  border-top: solid 1px #CCC;
  text-align: left;
  width: 100%;
  padding:10px 1%;
  line-height: 1.8;
}
.spdb{
  display: block;
}

form#mailformpro dl dd {
    padding: 10px 5px;
}
}
div.mfp_buttons button {
 font-size: 1.8rem;
 width: 288px;
 height: 66px;
 background: #003e00;
 border-radius: 5px;
 color:#fff;
 margin-top: 50px; 
}
div.mfp_buttons button:hover {
 background: #000;
 opacity: 1;
}
div#mfp_phase_confirm{
  margin:35px auto 0;
}

div#mfp_phase_confirm p{
  text-align: center;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.6;
}
@media all and (-ms-high-contrast:none){
.must{
padding-top:3px;
padding-bottom:0;
}
}
.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date,
.mfp_element_password {
  border: solid 1px #CCC;
  border-radius: 3px;
  box-shadow: none;
  padding: 3px 8px;
  margin: 2px;
  vertical-align: middle;
}
/*==========================================
  対応エリア
===========================================*/
.inner-page{
	margin-top: 30px;
}
.btn{
	margin-top: 30px;
 display: block;
 background: #003e00;
 border-radius: 5px;
 color: #fff;
 width: 100%;
 max-width: 230px;
 text-align: left;
 padding: 12px 0 12px 20px;
 position: relative;

}