@charset "UTF-8";

/* *************************************************************

*   Since:2025-12
*   Editor:ricostyle

************************************************************* */


/* ==========================================================================
   Media Queries
   ========================================================================== */

/*PC用のcssを記述*/

/* CONTENTS
------------------------------------------------------------ */


/* メインビジュアル */
#Mainvisual {
background-image:url(../img/main.jpg);background-repeat: no-repeat;
background-position:bottom center;
background-size:cover;
height:580px;
display: flex;
align-items: center;
animation: slide-flow 8s forwards linear;
}
@keyframes slide-flow {
 from {background-position:bottom center;}
 to {background-position:top center;}
}
#Mainvisual p
{font-family:"Shippori Mincho", serif;font-size:2.5em;line-height:2.3em;color:#FFF;text-shadow: 1px 1px 2px #2C4D2B;}


/* メッセージ文 */
#Message {background:#DFECCE;}
#Message .wrap p{color:#466B45;padding:13px 0;line-height:1.8em;}


/* 私たちについて と お知らせフェイスブック */
.wrapper{width:98%;max-width:1060px;margin:0 auto;text-align:left;}
.wrapper h2{color:#262415;font-size:1.8em;margin-bottom:50px;}
.wrapper p{line-height:2em;padding-bottom:1.8em;}

#About{width:56%;max-width:550px;display:inline-block;margin-right:50px;}
#About img{width:90%;}

#Facebook{display:inline-block;width:35%;max-width:450px;vertical-align:top;}


/* 施工案内 */
#Service{background:#F1F9EC;}
#Service p{font-size:1.5em;line-height:1.5em;}

#Service .wrap ul{display:flex;flex-wrap: wrap;justify-content:space-around;width:100%;margin:0 auto 50px;}
#Service .wrap ul li{width:19.5%;height:140px;color:#FFF;font-weight:700;font-size:1.2em;line-height:1.5em;margin-bottom:4px;}

#Service .wrap ul li span{display: flex;justify-content: center;align-items: center;backdrop-filter: brightness(0.6);height:100%;cursor:default;}
#Service .wrap ul li span:hover{transition:0.5s;backdrop-filter: brightness(1.1);}

#Service .wrap ul li.service01{background:url(../img/service/img_sv01.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service02{background:url(../img/service/img_sv02.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service03{background:url(../img/service/img_sv03.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service04{background:url(../img/service/img_sv04.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service05{background:url(../img/service/img_sv05.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service06{background:url(../img/service/img_sv06.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service07{background:url(../img/service/img_sv07.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service08{background:url(../img/service/img_sv08.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service09{background:url(../img/service/img_sv09.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service10{background:url(../img/service/img_sv10.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service11{background:url(../img/service/img_sv11.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service12{background:url(../img/service/img_sv12.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service13{background:url(../img/service/img_sv13.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service14{background:url(../img/service/img_sv14.jpg) no-repeat center center;background-size:cover;}
#Service .wrap ul li.service15{background:url(../img/service/img_sv15.jpg) no-repeat center center;background-size:cover;}

  
/* 施工例 */
#Case{background:#FFF;}
#Case p{font-size:1.5em;line-height:1.5em;}
#Case p img{margin-top:20px;}

.tab-switch {
--tab-color:#92bac2;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 960px;
margin-inline: auto;
gap: 0 20px;
}

/* ラジオ非表示 */
.tab-switch input {display: none;}

/* タブボタン */
.tab-switch label {
  padding: 1em;
  width:30%;
  background:#eee;
  cursor: pointer;
  order: -1;
  text-align: center;
  margin-bottom:30px;
}
.tab-switch label:hover{transition:0.3s;opacity:0.8;}

/* コンテンツ非表示 */
.tab-content{display: none;width: 100%;padding: 1.5em 0;}

/* 選択されたタブ＋コンテンツ表示 */
.tab-switch input:checked + label{background: var(--tab-color);color: #fff;}
.tab-switch input:checked + label + .tab-content{display: block;}

.tab-content ul{display: flex;flex-wrap: wrap;justify-content:center;width:100%;}
.tab-content ul li{display:inline-block;width:30%;text-align:left;font-size:0.9em;margin:0 10px 50px;}
.tab-content ul li img{display:block;width:100%;border:1px solid #CCC;padding:1px;margin-bottom:5px;}


/* ご依頼までの流れ */
#Flow{background:#F9F7EF url(../img/bk_flow.png) no-repeat center top;background-size:100% auto;}
#Flow #chart{width:65%;display:inline-block;text-align:left;}
#Flow #chart div{border:1px solid #5987A5;background:#F4F5FB;color:#5985A5;padding:20px 0;text-align:left;}
#Flow #chart img{margin-left:40px;}
#Flow #chart div h3{padding:0 20px 20px;font-size:1.6em;font-family:'Noto Serif JP', serif;font-weight:300;}
#Flow #chart div p{line-height:1.8em;padding:0 20px;font-weight:300;font-size:0.95em;}
#Flow #flowimage{width:30%;display:inline-table;vertical-align:top;margin-left:4%;}
#Flow #flowimage img{display:block;width:100%;text-align:right;margin:30px 0;}


/* 対応エリア */
#Area{background:#FFF;}
#Area p{line-height:2em;}
#Area p img{margin-top:40px;max-width:814px;width:90%;}


/* 会社概要 */
#Info{background:#F3F3F3;}
#Info .wrap table{margin:0 auto;width:90%;color:#666;line-height:1.8em;text-align:left;}
#Info .wrap th{background:#DFECCE;border-bottom:1px solid #F3F3F3;border-right:1px solid #F3F3F3;padding:20px;min-width:28%;}
#Info .wrap td{background:#FFF;border-bottom:1px solid #F3F3F3;padding:20px;}


/* お問合せ */
#Contact{background: url(../img/bk_contact.jpg) no-repeat center bottom;background-size:cover;}

#Contact #con_box{background:#FFF;padding:40px 0 50px;width:100%;margin:0 auto;}
#Contact #con_box p{line-height:2em;}
#Contact #con_box .tel{display:inline-block;background:url(../img/icon_tel.png) no-repeat left center;padding:50px 20px 50px 40px;font-size:2.2em;font-family:'Noto Serif JP', serif;font-weight:500;letter-spacing:0.5px;}
#Contact #con_box .tel a{color:#4C714A;}
#Contact #con_box .net{display:flex;flex-wrap: wrap;justify-content:center;}

#Contact #con_box .mail{display:inline-block;border:1px solid #82A5BB;border-radius:10px;background:#FFF
 url(../img/icon_mail.png) no-repeat 20px center;font-size:1.2em;line-height:1em;font-weight:500;letter-spacing:0.5px;margin:0 10px;}
#Contact #con_box .mail a{display:block;color:#5985A5;padding:20px 80px;}
#Contact #con_box .mail:hover{transition:0.3s;background:#82A5BB url(../img/icon_mail.png) no-repeat 20px center;}
#Contact #con_box .mail a:hover{color:#FFF;}

#Contact #con_box .line{display:inline-block;border:1px solid #06C755;border-radius:10px;background:#FFF
 url(../img/icon_line.png) no-repeat 20px center;font-size:1.2em;line-height:1em;font-weight:500;letter-spacing:0.5px;margin:0 10px;}
#Contact #con_box .line a{display:block;color:#06C552;padding:20px 70px 20px 90px;}
#Contact #con_box .line:hover{transition:0.3s;background:#06C755 url(../img/icon_line.png) no-repeat 20px center;}
#Contact #con_box .line a:hover{color:#FFF;}



@media only screen and ( max-width : 959px ) {
/*タブレット用のcssを記述*/   

}




@media only screen and (max-width:768px) {
 /*タブレット用のcssを記述*/

/* メインビジュアル */
#Mainvisual {background-size:auto 110%;height:400px;}
#Mainvisual p{font-size:2rem;}


/* 私たちについて と お知らせフェイスブック */
.wrapper{width:95%;max-width:768px;}
.wrapper p:last-child{padding-bottom:0;}

#About{width:100%;max-width:768px;margin-right:0;}
#About img{width:90%;margin:0 auto;display:block;}
#Facebook{display:block;width:90%;max-width:450px;vertical-align:top;}


/* 施工案内 */
#Service p{font-size:1.2em;}
#Service .wrap ul li{width:32.5%;}


/* 施工例 */
#Case p{font-size:1.2em;}
.tab-switch {max-width: 768px;gap: 0 15px;}
/* タブボタン */
.tab-switch label {width:40%; margin-bottom:20px;}
/* 選択されたタブ＋コンテンツ表示 */
.tab-content ul li{width:45%;margin:0 10px 50px;}


/* ご依頼までの流れ */
#Flow #chart{width:100%;}
#Flow #flowimage{width:80%;}


/* 対応エリア */
#Area p img{max-width:768px;}


/* 会社概要 */
#Info .wrap table{width:90%;font-size:0.95em;}


/* お問合せ */
#Contact #con_box p{line-height:2em;padding:0 10px;}
#Contact #con_box .mail{font-size:1.1em;letter-spacing:0;margin:0 10px;}
#Contact #con_box .mail a{padding:25px  35px 25px 70px;}
#Contact #con_box .line{font-size:1.1em;letter-spacing:0;margin:0 10px;}
#Contact #con_box .line a{padding:25px 20px 25px 85px;}

}




@media screen and ( max-width : 559px ) {
/*スマホ用のcssを記述*/  

/* メインビジュアル */
#Mainvisual {height:380px;}
#Mainvisual p{font-size:1.6rem;}


/* メッセージ文 */
#Message .wrap p{line-height:1.6em;}


/* 私たちについて と お知らせフェイスブック */
.wrapper h2{margin-bottom:30px;}
#Facebook{display:block;width:95%;max-width:559px;mar}


/* 施工案内 */
#Service p{font-size:1em;}
#Service .wrap ul{margin:0 auto 30px;}
#Service .wrap ul li{width:48%;height:100px;font-size:1.1em;line-height:1.3em;margin-bottom:6px;}

  
/* 施工例 */
#Case p{font-size:1em;}
.tab-switch {gap: 0 10px;}
/* タブボタン */
.tab-switch label { padding: 1em 0.8em;margin-bottom:10px;}
.tab-switch label:hover{transition:0.3s;opacity:0.8;}
/* コンテンツ非表示 */
 .tab-content{display: none;width: 98%;padding: 1.5em 0;}
/* 選択されたタブ＋コンテンツ表示 */
 .tab-content ul li{width:45%;font-size:0.8em;margin:0 8px 40px;}


/* ご依頼までの流れ */
#Flow{background-size:150% auto;}
#Flow #chart{width:90%;margin:0 auto 40px;}
#Flow #chart div h3{padding:0 15px 20px;}
#Flow #chart div p{line-height:1.6em;padding:0 15px;}
#Flow #flowimage{width:100%;margin:0 auto;}
#Flow #flowimage img{display:inline-block;width:46%;margin:0 5px 10px;}


/* 対応エリア */
#Area p{line-height:1.8em;}
#Area p img{max-width:559px;width:100%;}


/* 会社概要 */
#Info .wrap table{width:100%;line-height:1.6em;}
#Info .wrap th{padding:18px;min-width:30%;width:30%;}
#Info .wrap td{padding:18px;}


/* お問合せ */
#Contact #con_box p{line-height:1.8em;}
#Contact #con_box .tel{padding:40px 20px 40px 35px;font-size:2em;letter-spacing:0.3px;}
#Contact #con_box .mail{margin:0 10px 20px;}


}