@charset "utf-8";
/* CSS Document */

/*------------------------------
　共通
------------------------------*/
.pc{display: none !important;}
.w1100{width: 94%;margin: 0 auto;}

.m-b30{margin-bottom: 15px;}
.m-b50{margin-bottom: 25px;}

h1{font-size: 24px;font-weight: 500;}
h2{font-size: 21px;font-weight: 600;color: #41210f;line-height: 1.5;}
h3{font-size: 18px;font-weight: 500;color: #41210f;margin-top: 16px;line-height: 1.5;}
h3:before{content: "◆";color: #41210f;}


.bana-mae-txt{font-size:14px;font-weight:600;margin:0 auto;line-height:1.6;text-align:justify;color:#41210f;}
.bana-waku{width:100%;margin:15px auto;}
.bana-waku img{width:100%;height:auto;}
/* ----------------- */
/* ハンバーガーメニュー */
/* ----------------- */

.hamburger-set {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-icon {
  width: 100%;
  height: 100%;
}

.hamburger-line {
  fill: none;
  stroke: #41210f;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-set.active .hamburger-line {stroke: #FFF;}
.hamburger-line:nth-child(1) {stroke-dasharray: 60 207;}
.hamburger-line:nth-child(2) {stroke-dasharray: 60 60;}
.hamburger-line:nth-child(3) {stroke-dasharray: 60 207;}
.hamburger-set.active .hamburger-line:nth-child(1) {stroke-dasharray: 90 207;stroke-dashoffset: -134;}
.hamburger-set.active .hamburger-line:nth-child(2) {stroke-dasharray: 1 60;stroke-dashoffset: -30;}
.hamburger-set.active .hamburger-line:nth-child(3) {stroke-dasharray: 90 207;stroke-dashoffset: -134;}
.nav-set {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(65 33 15 / 95%);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 900;
}

.nav-set.active {
  clip-path: circle(150% at calc(100% - 44px) 44px);
}

.nav-set-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  width: 100%;
  height: 100%;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.nav-item {
color: #FFF;
font-size: 16px;
line-height: 30px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav-item a {
color: #FFF;
font-size: 16px;
line-height: 46px;
}

.nav-set.active .nav-item {
  opacity: 1;
  transform: translateY(0);
}

.nav-set.active .nav-item:nth-child(1) { transition-delay: 0.3s; }
.nav-set.active .nav-item:nth-child(2) { transition-delay: 0.4s; }
.nav-set.active .nav-item:nth-child(3) { transition-delay: 0.5s; }
.nav-set.active .nav-item:nth-child(4) { transition-delay: 0.6s; }
.nav-set.active .nav-item:nth-child(5) { transition-delay: 0.7s; }
.nav-set.active .nav-item:nth-child(6) { transition-delay: 0.8s; }
.nav-set.active .nav-item:nth-child(7) { transition-delay: 0.9s; }
.nav-set.active .nav-item:nth-child(8) { transition-delay: 1.0s; }
.nav-set.active .nav-item:nth-child(9) { transition-delay: 1.1s; }



/*------------------------------
ヘッダー
------------------------------*/
header {
    background-color: rgba(255, 255, 255, 1);
    width: 100%;
    height:  60px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-inner {display: flex;}
.h-logo img{height: 50px;width: auto;}
.h-bt-set{display: none;}


.h-bt-arrow{width: 10px !important;height: auto !important;}

/*------------------------------
　TOPコンテンツ
------------------------------*/

.list-bt{display: flex;justify-content: space-between;align-items: center;color: #FFF;border-radius: 5px;padding: 10px;font-size: 14px;margin-top:10px;
background-size: auto auto;
background-color: rgba(65, 33, 15, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(78, 40, 18, 1) 7px, rgba(78, 40, 18, 1) 9px);}
.list-bt:hover{background-color: #72441f;background-image: repeating-linear-gradient(135deg, transparent, transparent 7px, #8a5429 7px, #8a5429 9px);}
.list-bt.apply-go{width:100%;padding:15px;font-size:18px;font-weight:500;margin:0;transition:.3s;background-color: #1db7ce;background-image: repeating-linear-gradient(135deg, transparent, transparent 7px, #2bcbe3 7px, #2bcbe3 9px);}
.list-bt.apply-go:hover{background-color:#20cfea;}

.slider{}
.slider img,.slider-come img{width: 100%;height: auto;}
.slider-waku{max-height: 460px;position: relative;overflow: hidden;}
.slider-come{height: 200px; display: flex;justify-content: center;align-items: center;}

.bana-set{display: flex;justify-content: center;align-items: center;gap:10px;margin: 0px auto;padding: 10px;}
.bana-set img{width: 100%;height: auto;}

.section-title{margin: 30px auto 0;display: flex;justify-content: space-between;align-items: flex-end;}
.section-title img{height:42px;width: auto;}
section#event{padding: 10px;}
.event-waku{display: flex;justify-content: space-between;align-items: stretch;flex-direction: column; gap:10px;max-width: 1280px;margin: 10px auto;}
.event-pic{flex:1;}
.event-pic img{width: 100%;height: auto;}
.event-info{flex:1.4;display: flex;flex-direction: column;align-items: stretch;justify-content: space-between;}
.event-info h2{font-size: 21px;font-weight: 600;padding: 0 10px;border-bottom: 2px solid;margin-bottom: 10px;line-height: 1.6;}
.event-info .info-set{flex:1;}
.event-info .info-set div{font-size: 16px; padding: 10px;width: 100%;border-bottom:1px dotted #ccc;display:flex;align-items:flex-start;line-height:1.4;}
.event-info div span{font-weight: 600;padding-right: 10px;white-space:nowrap;}
.event-info p{margin-bottom: 15px; padding: 15px;}
.more-bt{display: block;text-align: right;}
.more-bt img{max-width: 70%; width: auto;height: auto;}
.-single .info-set{flex:unset;padding-bottom:15px;}


section#about{padding: 30px 10px;background-color: #e7f1d6;}
.about-flex{margin: 0 auto;display: flex;justify-content: center;align-items:flex-start;gap:15px;}
.kouzou-pic img{width: 100%;height: auto;}
.about-title{}
.about-title img{width: 100%;height: auto;}
.about-txt {}
.about-txt p{line-height: 1.8;padding: 15px 0 0;font-size: 16px;}
.about-txt p b{color:#1db7ce; }

section#works{padding: 10px; display: flex;justify-content: center;align-items: flex-start;flex-direction: column;}
.works-flex{display: flex;gap:20px;flex-direction: column;margin-top: 20px;}
.works-list-box{width: 100%;border:1px solid #2f4a55;position: relative;}
.works-list-box .pic{}
.works-list-box .pic img{width: 100%;height: auto;}
.works-list-box .info-set{padding: 5px;}
.works-list-box .txt{font-size: 14px;padding: 4px 8px;}
.works-list-box .txt b{font-size:18px;}
.works-list-box:after{position: absolute;bottom:10px;right:10px; content: "";background-image: url("../../../image/common/more-arrow-mini.svg");background-repeat: no-repeat; width: 80px;height: 18px;background-size: 100%;background-position: bottom;}

section#service{display: flex;justify-content: space-between;align-items: flex-start;gap:2px;flex-wrap: wrap;padding-bottom: 50px;}
.service-waku{width: calc(50% - 2px);}
.service-waku img{width: 100%;height: auto;}

/*------------------------------
　フッター
------------------------------*/
footer{display: flex;position: fixed;bottom:0;left:0;}
footer img{width: 100%;height: auto;}

/*------------------------------
　下層ページ
------------------------------*/

.page-title{background-color: #795548;padding: 15px;line-height: 1.2;text-align: center;color: #FFF;letter-spacing: .2rem;}
.page-title h1{max-width: 1280px;margin: 0 auto;}

.post-title{padding:10px;font-size:20px;border-bottom:2px solid #41210f;border-top:2px solid #41210f;font-weight:600;}
.single-post{padding:10px;}
.single-post p{padding:1rem !important;}
.single-post h1 {background: #e7f1d6;border-left: solid 10px #41210f;padding: 0.75rem 1.5rem;}
.single-post h2 {background: #41210f;padding: 1rem;position: relative;color: #fff;margin:30px auto 20px;}
.single-post h2:before {position: absolute;content: '';top: 100%;left: 0px;border: none;border-bottom: solid 10px transparent;border-right: solid 20px rgb(20, 86, 110);}
.single-post h3{padding-left:1rem;margin:20px auto 0;}
.single-post h4{background-color:#e7f1d6;padding:10px;margin:20px 0 0px 1rem;}

.single-page{padding: 20px 10px 60px;}
.single-page img{width: 100%;height: auto;}
.single-page h2{text-align: center;}
.single-page h2 b{background:linear-gradient(transparent 70%, #fff877 0%);}
.single-page h3{}
.single-page p{line-height: 1.8;padding: 16px 0;}
.spec-hoso{display: block;line-height: 1.5;}
.spec-hoso h4{font-weight:600;padding-bottom:5px;}
.spec-hoso li{display:block;}
.spec-hoso li:last-child{padding-bottom:10px;}
.spec-hoso li:before{content:"●";padding-left:10px;padding-right:5px;font-size:12px;}

.hoso{display: block;font-size: 88%;color: #666;line-height: 1.5;padding-bottom:10px;}
.color-waku{background-color: #f5ece6;text-align: center;padding: 10px 0 10px;margin-top: -15px;}
.inner{max-width: 1280px;margin: 0 auto;}
.inner img{width: 100%;height: auto;}

.flex-waku{display: flex;justify-content: space-between;flex-direction: column;}
.flex-waku.a-bottom{align-items: flex-end;}
.flex-waku > .waku-1{flex:1}
.flex-waku > .waku-2{flex:2;}
.flex-waku > .waku-3{flex:3;}

/* 超ローコストの理由 */
.kakaku-list{margin: 0px auto 10px;width: 100%;border:1px solid #41210f;}
.kakaku-list tr{}
.kakaku-list th{font-weight: 500; background-color: #41210f;color: #FFF;padding: 10px;letter-spacing: .1rem;text-align: center;border-left: 1px dotted;white-space: nowrap;}
.kakaku-list td{padding: 10px;letter-spacing: .1rem;text-align: center;border-left: 1px dotted #e0e0e0;white-space: nowrap;}
.kakaku-list tr:nth-child(odd) td{background-color: #e7e4d4;}

.js-scrollable{margin-bottom:30px;}
.planimg{padding-top:20px;}

.planimg {position: relative;}
.planimg img{width:100%;height:auto;}

/* クリックエリア1 */
.-p01 > .click-zone {
  position: absolute;
  top: 27%;
  left: 10px;
  width: calc(100% - 20px);
  height: 18%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0); /* 完全透明 */
  z-index: 10;
}

/* クリックエリア2 */
.-p02 > .click-zone {
  position: absolute;
  top: 10%;
  left: 10px;
  width: calc(100% - 20px);
  height: 21.5%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0); /* 完全透明 */
  z-index: 10;
}

/* モーダル（拡大画像） */
.modal {
  display: none; /* ← 初期状態 */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}
.modal-content {
  position: relative;
  margin: 5% auto;
  padding: 10px;
  width: 80%;
  background-color: #fff;
  text-align: center;
}

.modal-content img {
  max-width: 100%;
  height: auto;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

/* 建築の流れ */
.flow-bt{flex-direction: row;gap:3px;}
.anchor-bt{background-color: #c3b993;color: #FFF;display: flex;justify-content: center;align-content: center;padding: 8px;font-size: 16px;position: relative;line-height: 1.5;text-align: center;flex:1;}
.flow-bt .anchor-bt:nth-child(2){flex:1.45;}
.anchor-bt.-active{background-color: #41210f;}
.anchor-bt.-active:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -20px;
  border: 20px solid transparent;
  border-top: 20px solid #41210f;
}

.flow-waku{}
.flow-list{width: 100%;margin: 20px auto;}
.flow-list-flex{display: flex;justify-content: flex-start;align-items: stretch;}
.flow-title{width: 80px;font-size: 16px;background-color: #e7f1d6;color: #41210f;display: flex;justify-content: flex-start;flex-direction: column;align-items: center;position: relative;font-weight: 500;padding-top: 30px;}
.flow-list-flex:nth-child(n+2) .flow-title{}
.flow-list-flex:nth-child(n+2) .flow-title:before{content: "";background-image: url("../../../image/flow/flow-arrow.svg");background-size: 100%;display: block;position: absolute;top:-1px;left:0; background-position: bottom;height: 15px;width: 100%;background-repeat: no-repeat;}
.flow-list-flex:first-child .flow-txt{padding-top: 15px;}
.flow-list-flex:last-child .flow-title,.flow-list-flex:last-child .flow-txt{padding-top: 60px;padding-bottom: 40px;}
.flow-title .no{font-size:88%;}
.flow-title .no b{font-size: 160%;}
.flow-title .dai{padding-top: 12px;text-align: center;line-height: 1;display: flex;flex-direction: column;}
.flow-txt{flex:1;border-bottom: 1px dashed #abcf70;padding: 20px 15px; line-height: 1.6;position: relative;font-size: 14px;text-align:justify;}

/* 会社概要 */
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');
.sign {font-family: 'Yuji Syuku', serif; font-size: 1.5rem;text-align: right;}
.sign span { font-size: 1rem;}

.message{padding-bottom: 15px;display: flex;flex-direction: column;align-items: center;}
.message-pic{text-align: center;padding-bottom: 10px;}
.message-pic img{width: 240px;margin: 0 auto;}
.company-line-waku{margin: 30px auto;font-size: 14px;}
.company-line{display: flex;flex-direction: column;}
.company-line > div{line-height: 1.6; padding: 5px 15px; }
.company-line-l{width: 100%;color: #41210f;font-weight: 500;border-left:3px solid #41210f;background-color: #e7e4d4;}
.company-line-r{width: auto;flex:1;padding-left: 1rem !important;padding-bottom: 20px !important;}

.company-line-r iframe {width: 100%;height: 200px;}

/* 施工事例 */
.wks-info{margin-bottom:10px;margin-top:10px;}
.wks-info tr{display:flex;align-items: center;padding:3px 0;}
.wks-info th{font-weight: 500; font-size: 88%; padding: 3px 6px; background-color: #949494;border-radius: 5px;color: #FFF; line-height: 1;}
.wks-info td{padding:2px 1.5rem 5px .5rem;}

/* 新規プロジェクト情報 */
.project-catch{font-size:13px;text-align:center;line-height:1.6;font-weight:500;}
.project-midashi{text-align:center;font-size:21px;font-weight:600;color:#384b55;letter-spacing:.1rem;padding:30px 0 20px;}
.project-midashi b{font-size:180%;color:#41210f;}

.project-flex{display:flex;justify-content:center;flex-direction:column;gap:20px;}
.merit-box{width:100%;position:relative;border-radius: 20px 0;border:1px solid #41210f;display:flex;flex-direction:column;justify-content:space-between;}
.merit-box .number{background-color:#41210f;display:flex;justify-content:center;align-items:center;color:#FFF;font-size:30px; width: 60px;height: 60px; border-radius: 18px 0;position:absolute;}
.merit-box .pic{}
.merit-box .pic img{width:100%;height:100%;object-fit:cover; border-radius: 20px 0 0;}
.merit-title{font-size:18px;font-weight:500;padding:10px;color:#41210f;text-align:center;flex:1;display:flex;flex-direction: column; align-items: center; justify-content: center;line-height: 1.4;}
.merit-title p{font-size:11px;line-height:1.4;font-weight:normal;color:#555;padding:6px 0px 0 !important;}
.project-midashi2{text-align:center;font-size:21px;font-weight:600;color:#384b55;letter-spacing:.1rem;padding:50px 0 0;margin-bottom:-20px;}

/*************************************************
 * カタログDL
 * ********************************************************/
#panf-img-set {padding:10px 0;}
#panf-img-set .wpcf7-checkbox{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;}
#panf-img-set .wpcf7-list-item{width:calc(50% - 20px);margin:0;}
#panf-img-set .wpcf7-list-item:before{content:"";display: block;aspect-ratio: 13 / 9;background-size: cover;background-repeat: no-repeat;}
#panf-img-set .wpcf7-list-item label{display:flex;align-items:center;justify-content:flex-start;padding:5px 0;gap:5px;font-size:14px;}
#panf-img-set .wpcf7-list-item input{width: 20px;height: 20px;}


#panf-img-set .wpcf7-list-item:nth-child(1)::before{background-image:url(../../../image/catalog/gran_RC.webp);}
#panf-img-set .wpcf7-list-item:nth-child(2)::before{background-image:url(../../../image/catalog/gran-tochi.webp);}
#panf-img-set .wpcf7-list-item:nth-child(3)::before{background-image:url(../../../image/catalog/gran-souzoku.webp);}

.apply-title{text-align:center;}
.apply-thx-come{text-align: justify;font-size: 14px;line-height:2;padding:12px;margin-top: 30px; background-color: #f0f0f0;}