@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body{background:#fff;}
.custom-nav{display:none;}
.custom-overlay{display:none;}
.custom-menu-trigger{display:none;}
.float-bx{display:none;}
.pc-br{display:block;}
.drawer{display:none;}
.ham-bx{display:none;}
div#header-in.header-in.wrap.cf {width:100%;}
main#main.main{padding:0;border:0;margin:0;}
.header-in{width:100%;position: fixed;top: 0;z-index: 100;background:transparent;transition:0.7s;}
.header-in.scrolled {background: rgba(255, 255, 255, 0.8);backdrop-filter: blur(10px);}
.header-ctt{width:100%;height:80px;position:relative;margin:auto;display: flex;justify-content: space-between;}
.header-nav{display:flex;align-items: center;gap:40px;}
.header-nav li {list-style:none;}
.header-nav li a{text-decoration:none;transition:0.7s;font-size:1.05rem;font-family: 'Outfit', sans-serif;color:#fff;}
.header-nav li a:hover{opacity:0.7;}
.header-in.scrolled .header-nav li a{color:#888880;}
.wrap{width:100%;}
.header-bx{display:flex;justify-content: flex-end;gap:100px;}
.header-contact{background:#8b6635;height:80px;padding:0 30px;color:#fff;display: flex;justify-content: center;align-items: center;text-decoration:none;transition:0.7s;border:solid 1px #8b6635;font-family: 'Outfit', sans-serif;}
.header-contact:hover{color:#8b6635;background:transparent;}
.ham-bx{display:none;}
.content{margin-top:0;}
.content-in{width:100%;}
.catch{position: absolute;top: 60%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);background:rgb(255,255,255,0.6);max-width:1000px;width:90%;padding:30px 50px;box-sizing: border-box;}
.catch1{font-size:3rem;font-weight:bold;margin-bottom:10px;}
.catch2{font-size:1.5rem;margin-bottom:30px;}
.ccc{width:200px;margin:auto;}
.logo-area {padding-left:20px;}
.tagline{padding:0;margin:0;}
#header-logo-svg {color: #fff;transition: color 0.4s ease;height:100%;}
.header-in.scrolled #header-logo-svg {color: #996E42;}

p{color:#888880;font-size: 1rem;}
a{color:#888880;font-size: 1rem;text-decoration:none;}
a:hover{color:#888880;}
h2{color:#221815;font-size:1.7em;font-weight:normal;margin-bottom:20px;}
.inner{max-width:1200px;width:90%;margin:auto;}
h3{font-weight:normal;}
ul li {color:#888880;font-size: 1rem;text-decoration:none;}
h3{color:#221815;}

.fade-up {opacity: 0;transform: translateY(40px);transition: opacity 0.7s ease, transform 0.7s ease;}
.fade-left {opacity: 0;transform: translateX(-30px);transition: opacity 0.7s ease, transform 0.7s ease;}
.fade-up.is-visible, .fade-left.is-visible {opacity: 1;transform: translate(0);}
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }
.delay-5 { transition-delay: 1s; }

.fv__bg:before{content:"";height: 100vh;min-height: 620px;width:100%;position:absolute;top:0;left:0;background:rgb(0,0,0,0.2);z-index:-1;}
.fv {height: 100vh;min-height: 620px;position: relative;overflow: hidden;}
.fv__slides{position:absolute;inset:0;}
.fv__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(0.4,0,0.2,1);pointer-events:none;}
.fv__slide--active{opacity:1;pointer-events:auto;}
.fv__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);will-change:transform;}
.fv__slide--active .fv__bg{transform:scale(1);transition:transform 8s ease-out 0.05s;}
.fv__slide:not(.fv__slide--active) .fv__bg{transition:transform 0s 1.4s;}
.fv__dots{display:flex;flex-direction:column;gap:10px;align-items:center;}
.fv__dot{display:block;width:3px;height:50px;background:rgba(255,255,255,0.3);border:none;cursor:pointer;padding:0;position:relative;overflow:hidden;transition:background 0.3s;}
.fv__dot--active{background:rgba(255,255,255,0.3);}
.fv__dot--active::after{content:'';position:absolute;top:0;left:0;right:0;height:0;background:#fff;animation:fvDotFill 6s linear forwards;}
@keyframes fvDotFill{from{height:0%;}to{height:100%;}}
.fv__count{color:#fff;font-family:'Outfit',sans-serif;}
.fv__text {position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: flex-end;padding: 0 3.5rem 14rem;}
.fv__catch {font-size:3rem;color: #fff;line-height:1.5;letter-spacing: 0.3em;margin-bottom: 2rem;font-weight:500;}
.fv__sub {font-size: 12px;font-weight: 300;color: rgba(255, 255, 255, 0.3);letter-spacing: 0.06em;line-height: 2.2;}
.fv__ui {position: relative;z-index: 10;height: 100%;} 
.fv__ui > * {pointer-events: auto;}
.fv__content {position: absolute;z-index: 10;width: 90%;max-width: 1440px;top: 40%;left: 50%;transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);}
.fv__txt {font-size:2.6rem;color: #fff;line-height:1.5;letter-spacing: 0.3em;margin-bottom: 2rem;font-weight:500;}
.fv__lead {font-size:1.4rem;color:#fff;}
.fv__controls{display:flex;flex-direction:column;align-items:flex-end;gap:1rem;transform:translateY(-50%) translateX(-50%);top:80%;left:50%;position:absolute;width:90%;max-width:1440px;}


.more{transition:0.7s;display:block;width:250px;margin:70px auto 0;background:transparent;border:solid 1px #fff;color:#fff;text-decoration:none;display:flex;justify-content:center;align-items:center;padding:15px 0;font-family: 'Outfit', sans-serif;}
.more:hover{color:#fff!important;background:#9d7043;border:solid 1px #9d7043;}

.about-bx{display:flex;align-items:center;height:800px;}
.about h2:before{content:"ABOUT";font-size:0.8rem;display:block;line-height: 1;color:#9d7043;margin-bottom:20px;font-family: 'Outfit', sans-serif;}
.about-img{width:55%;height:800px;position:relative;background:url(img/about-img.webp);background-position:center;background-size:cover;background-repeat:no-repeat;clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);filter: grayscale(80%);}
.about-ctt{width:45%;padding:100px 50px;}
.about-num{font-family: 'Outfit', sans-serif;color: #9d7043;padding-right:20px;}
.about-ctt ul{padding-left:0;margin-top:30px;}
.about-ctt ul li{list-style:none;font-size:1rem;color:#888880;border-bottom:solid 1px #e8e6e1;padding:20px 0;}
.about-ctt ul li:first-child{border-top:solid 1px #e8e6e1;}

.services{padding:100px 0;background:#f8f7f5;}
.services h2:before{content:"SERVICES";font-size:0.8rem;display:block;line-height: 1;color:#9d7043;margin-bottom:20px;font-family: 'Outfit', sans-serif;}
.services-bx{display:flex;margin-top:50px;}
.services-ctt{padding:20px;border-top:solid 1px #e8e6e1;border-right:solid 1px #e8e6e1;border-bottom:solid 1px #e8e6e1;width:25%;background:#fff;}
.services-ctt:first-child{border-left:solid 1px #e8e6e1;}
.services-num{font-family: 'Outfit', sans-serif;color: #9d7043;margin:0 auto 30px;font-size:1.2rem;}
.services h3 {font-size:1.2rem;margin-bottom:20px;}
.services-ctt ul{padding-left:0;}
.services-ctt ul li{list-style:none;font-size:1rem;color:#888880;}
.services-ctt p{color:#9d7043;margin-top:10px;}

.flow{padding:100px 0;}
.flow h2:before{content:"FLOW";font-size:0.8rem;display:block;line-height: 1;color:#9d7043;margin-bottom:20px;font-family: 'Outfit', sans-serif;}
.flow-bx{display:flex;gap:40px;width:100%;margin:100px auto 0;position:relative;}

.flow-line {position: absolute;top: 25px;left: 0;width: 0;background: #9d7043;height: 1px;transition: width 1s ease-in-out;}
.flow-line.is-visible {width: 100%;}
.flow-ctt {width: 20%;opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease;}
.flow-ctt.is-visible {opacity: 1;transform: translateY(0);}
.flow-ctt p{text-align:center;}
.flow-num{font-family: 'Outfit', sans-serif;color: #9d7043;border:solid 1px #9d7043;border-radius: 50%;width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;margin:0 auto 30px;background:#fff;}
.flow-ctt h3{text-align:center;font-size:1.2rem;}

.finner p{text-align:center;color:#fff;font-size:1.2rem;}
.finner {z-index:1;position:relative;height:400px;background:url(img/footer-bg.webp);background-repeat:no-repeat;background-size:cover;background-position: center;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.finner::before{z-index:-1;content:"";height:400px;position:absolute;top:0;left:0;width:100%;background:rgb(0,0,0,0.6);}

.footer{margin-top:0;padding:0;}
.footer-area{background:#221815;padding:100px 0;}
.footer-nav{margin:0;padding-left:0;display:flex;gap:40px;justify-content:center;display:flex;}
.footer-nav li {list-style:none;padding-bottom:10px;}
.footer-nav li a{color:#fff;text-decoration:none;}
.footer-bottom{background:#221815;margin-top:0;padding-bottom:100px;}

.bread{max-width:1100px;width:90%;margin:auto;}
.breadcrumb {margin: 1em 0;font-size: 1rem;color:#888880;}
.breadcrumb a{color:#888880;}
.page-fv{height: 100vh;min-height: 620px;position: relative;}
.company-fv{background:url(img/company-fv.webp);background-size:cover;background-repeat:no-repeat;background-position:bottom;}
.page-fv:before{content:"";height: 100vh;min-height: 620px;width:100%;position:absolute;top:0;left:0;background:rgb(0,0,0,0.2);}
.h1-page{font-size:2.5rem;font-weight:normal;position:absolute;top: 40%;right: 0;font-family: 'Outfit', sans-serif;color:#fff;z-index:1;}
.page-fv .inner{position:relative;height: 100vh;min-height: 620px;width:1100px;max-width:90%;}
.under-inner{width:90%;max-width:1100px;margin:auto;padding:50px 0 100px 0;}
.ttl-num{font-size:1rem;display:block;line-height: 1;color:#9d7043;margin-bottom:10px;font-family: 'Outfit', sans-serif;}
.company-table{margin-bottom:0;}
.company-table th{width:20%;background:transparent;border-top:none;border-left:none;border-right:none;border-bottom:solid 1px #9d7043;}
.company-table th p{color:#9d7043;}
.company-table td{width:80%;background:transparent;border-top:none;border-left:none;border-right:none;border-bottom:solid 1px #888880;}
table tr:nth-of-type(2n+1) {background-color:transparent;}
.company-bx{display:flex;gap:30px;margin-bottom:100px;}
.company-img{width:50%;}
.company-ctt{width:100%;}
.presidentp{margin-top:10px;text-align:right;}
.company-ttl:after{content:"会社概要";display:block;font-size:0.9rem;text-align:right;}

.contact-ttl:after{content:"お問い合わせ";display:block;font-size:0.9rem;text-align:right;}
.thanks-ttl:after{content:"ありがとうございます";display:block;font-size:0.9rem;text-align:right;}
.contact-fv{background:url(img/contact-fv.webp);background-size:cover;background-repeat:no-repeat;background-position:bottom;}
.contact-table th{background:transparent;border:none;text-align:left;font-weight:normal;display: flex;justify-content: space-between;gap: 30px;padding: 15px 0 5px 0;width:300px;}
.contact-table td{background:transparent;border:none;width:650px;}
.must{background: #8b6635;color: #fff;font-size:0.9rem;padding: 2px 10px;margin-left:10px;}
.any{border:solid 1px #8b6635;color: #8b6635;font-size:0.9rem;padding: 2px 10px;margin-left:10px;}
.under-bx{background:#f8f7f5;padding:100px;}
.wpcf7-spinner{display:none;}
.acceptance p{text-align:center;display: flex;justify-content: center;}
input[type='submit']{background:#8b6635;position:relative;display:flex;justify-content:center;align-items:center;margin:20px auto 0;width:133px;color:#fff;transition:0.3s ease-in-out;border:none;padding:10px 0;cursor:pointer;width:250px;padding:15px 0;font-size:1rem;}
input[type='submit']:hover{opacity:0.7;}
.wpcf7-spinner{display:none;}
.wpcf7-list-item {margin:0;}
.under-bx .more{background:transparent;border:solid 1px #9d7043;color:#9d7043;}
.under-bx .more:hover{color:#fff!important;background:#9d7043;border:solid 1px #9d7043;}
.thanksp{text-align:center;}

.error404 .content-in{margin-top:150px;}
.not-found{width:40%;}
.error404 .post{text-align:center;}
.error404 .more{background:transparent;border:solid 1px #9d7043;color:#9d7043;}
.error404 .more:hover{color:#fff!important;background:#9d7043;border:solid 1px #9d7043;}

.services-fv{background:url(img/services-fv.webp);background-size:cover;background-repeat:no-repeat;background-position:bottom;}
.services-ttl:after{content:"事業内容";display:block;font-size:0.9rem;text-align:right;}
.s-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:20px 0 50px 0;}
.s-bx{border:solid 1px #888880;padding:20px;}
.s-bx ul{padding-left:20px;}
.s-bx2 ul{padding-left:20px;}
.s-flex{display:flex;gap:20px;margin:20px 0 50px 0;}
.s-bx2{flex:1;border:solid 1px #888880;padding:20px;}
.nbtm{margin-bottom:0;}

.news-fv{background:url(img/news-fv.webp);background-size:cover;background-repeat:no-repeat;background-position:bottom;}
.news-ctt{display:flex;gap:20px;border-bottom:solid 1px #888880;margin-bottom:30px;padding-bottom:20px;align-items:center;}
.nmeta{display:flex;gap:20px;align-items:center;}
.ncate{;border:solid 1px #8b6635;color: #8b6635;font-size:0.9rem;padding: 2px 10px;margin-left:10px;width: 120px;text-align: center;}
.pagination {margin:50px 0 0 0;}
.pagination .current {background:#888880;color:#fff;}
.page-numbers {border:solid 1px #888880;border-radius:0;transition:0.7s;color:#888880;}
.pagination a:hover {background:#888880;color:#fff;}
.single-post .content{margin-top:100px;}
.single-post .bread {width: 100%;}
.single-post .content-in h2{color:#fff;padding:10px;margin:50px 0 20px 0;background:#888880;}
.single-post .content-in h3{border-bottom:solid 2px #888880;border-left:none;border-top:none;border-right:none;padding:5px 10px;}
.single-post .content-in h4{padding:5px 10px;border-bottom:dashed 2px #888880;border-left:none;border-top:none;border-right:none;}	
.news-ttl:after{content:"お知らせ";display:block;font-size:0.9rem;text-align:right;}

.works-fv{background:url(img/works-fv.webp);background-size:cover;background-repeat:no-repeat;background-position:bottom;}
.works-bx{display:flex;gap:30px;align-items:center;margin-bottom:30px;}
.works-img{width:300px;height:200px;}
.works-cate{border:solid 1px #8b6635;color: #8b6635;padding: 2px 10px;width: 150px;text-align: center;}
.works-ttl{font-size:1.6rem;margin:10px 0;}
.single-works .content{margin-top:100px;}
.works-flex{display:flex;gap:30px;margin-top:50px;}
.works-left{width:60%;}
.works-right{width:40%;}
.works-h1{line-height:1.3;margin:10px 0 20px 0;font-weight:500;font-size:1.8rem;}
.swiper-slide-visible img{width:100%;height: 150px;object-fit: cover;}
.works-slider-main {height: 400px;}
.works-slider-main img {width: 100%;height: 100%;object-fit: cover;}
.works-img-single img {width: 100%;height: 400px;object-fit: cover;}
.works-area1, .works-type3, .works-date3{font-size: 0.9rem;padding-right:10px;color: #8b6635;}
.works-right p{border-bottom:solid 1px #888880;padding:10px 0;}
.works-area3, .works-type1, .works-content1, .works-range1, .works-period1, .works-date1{font-size: 0.9rem;width:100px;display: inline-block;color: #8b6635;}
.works-nav{display:flex;gap:40px;justify-content:center;margin:50px 0 20px 0;}
.works-nav a{display:block;width:350px;max-width:100%;}
.works-nav-next{text-align:right;}
.works-ttl-fv:after{content:"施工事例";display:block;font-size:0.9rem;text-align:right;}

.single-works .header-nav li a{color:#888880;}
.single-post .header-nav li a{color:#888880;}
.error404 .header-nav li a{color:#888880;}
.thanks .header-nav li a{color:#888880;}
.single-works #header-logo-svg {color: #996E42;}
.single-post #header-logo-svg {color: #996E42;}
.error404 #header-logo-svg {color: #996E42;}
.thanks #header-logo-svg {color: #996E42;}

.pp-fv{background:url(img/pp-fv.webp);background-size:cover;background-repeat:no-repeat;background-position:bottom;}
.pp-ttl:after{content:"プライバシーポリシー";display:block;font-size:0.9rem;text-align:right;}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1200px以下*/
@media screen and (max-width: 1200px){

}

/*1024px以下*/
@media screen and (max-width: 1024px){
  /*必要ならばここにコードを書く*/
html, body {overflow-x: hidden !important;max-width: 100% !important;}
body.menu-open {overflow-x: hidden !important;position: relative;}
.custom-overlay {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 9998;opacity: 0;transition: opacity 0.5s ease;} 
.custom-overlay.open {display: block;opacity: 1; }
body {transition: margin-left 0.5s ease;margin-left: 0;}
body.menu-open {margin-left: -250px !important;}
.custom-menu-trigger {position: fixed !important;top: 20px !important;right: 20px !important;width: 36px;height: 28px;cursor: pointer;z-index: 10000 !important;background: none;border: none;padding: 0;display: block !important; }
.single-works .custom-menu-trigger span{background-color:#8b6635!important;}
.single-post .custom-menu-trigger span{background-color:#8b6635!important;}
.error404 .custom-menu-trigger span{background-color:#8b6635!important;}
.thanks .custom-menu-trigger span{background-color:#8b6635!important;}
	
.custom-menu-trigger span {display: block;position: absolute;left: 0;width: 100%;height: 2px;background-color: #fff;transition: all 0.5s ease;}
.custom-menu-trigger.active span {background-color: #fff!important;z-index: 10000 !important;}
.custom-menu-trigger span:nth-child(1) {top: 0;}
.custom-menu-trigger.active span:nth-child(1) {transform: translateY(12px) rotate(-45deg);}
.custom-menu-trigger span:nth-child(2) {top: 12px;} 
.custom-menu-trigger.active span:nth-child(2) {opacity: 0;}
.custom-menu-trigger span:nth-child(3) {bottom: 0;}
.custom-menu-trigger.active span:nth-child(3) {transform: translateY(-12px) rotate(45deg);}
.custom-nav {display:block;position: fixed !important;top: 0 !important;right: 0 !important;width: 250px;height: 100vh;background-color:#888880;z-index:9999!important;transform: translateX(250px);transition: transform 0.5s ease;padding-top: 100px;overflow-y: auto; }
.custom-nav.open {transform: translateX(0) !important; }
.custom-nav ul {list-style: none;margin: 0;padding: 0;}
.custom-nav li {color: #fff;text-align: center;padding: 15px 20px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);transition: background-color 0.3s ease;}
.custom-nav li:hover {background-color: rgba(255, 255, 255, 0.1);}
.custom-nav a {color: #fff;text-decoration: none;display: block;font-size: 16px;}      	
	
.fv__txt {font-size: 1.9rem;}
.fv__catch {font-size: 1.9rem;}
.fv__lead {font-size: 1.2rem;}
.header-in.scrolled {background:transparent;backdrop-filter:none;}
.header-bx {display: none;}
.pc-br{display:none;}
.about-bx {height: auto;flex-direction: column;}
.about-img {width: 100%;height: 400px;clip-path: initial;}
.about-ctt {width: 100%;padding: 100px 5%;}
.services-bx { flex-direction: column;}
.services-ctt {padding: 20px;width: 100%;border-left:solid 1px #e8e6e1;border-top:solid 1px #e8e6e1;border-right:solid 1px #e8e6e1;border-bottom:none;}
.services-ctt:last-child{border-bottom:solid 1px #e8e6e1;}	
.services-num {margin: 0 auto 10px;}
.services h3 {margin-bottom: 10px;}
.flow-bx {flex-direction: column;}
.flow-line {display:none;}
.flow-ctt {width: 100%;}
.footer-area {display: none;}
.float-bx{display:flex;justify-content:space-between;position:fixed;bottom:0;width:100%;left:0;height:50px;z-index:10;}
.float-btn{bottom: initial;right: initial;width: 100%; height: auto;display:flex;justify-content:center;align-items:center;position: relative;background:#9d7043;text-align:center;text-decoration:none;color:#221815!important;font-family: 'Outfit', sans-serif;}	
.float-btn2{display:flex;justify-content:center;align-items:center;width: 50%;background:#f8f7f5;height:auto;text-decoration:none;color:#221815!important;font-family: 'Outfit', sans-serif;}	
.float-btn2:hover {color:#221815!important;}
.t2{font-size:1rem;color:#fff;}
.t1{font-size:1rem;color:#9d7043;}
.go-to-top {display:none;}
.company-bx{flex-direction: column;}
.company-img {width: 100%;}
.company-ctt {width: 100%;}
.company-table td {width: 100%;background: transparent;display: block;padding: 3px 3px 10px 3px;margin-bottom: 20px;}
.company-table th {width: 100%;background: transparent;display: block;text-align:left;border-bottom:none;}
.under-bx{padding:20px;}
.contact-table td {width: 100%;background: transparent;display: block;padding: 3px 3px 10px 3px;margin-bottom: 20px;}
.contact-table th {width: 100%;background: transparent;display: block;text-align:left;border-bottom:none;}
.news-ctt {align-items: flex-start;flex-direction: column;}
.entry-title {padding:0;}
.works-slider-main {height: 200px;}
.works-img-single img {height: 200px;}	
.works-bx {flex-direction: column;align-items: flex-start;}
.works-ttl {font-size: 1.2rem;}
.swiper-slide-visible img{height:50px;}
.works-flex {flex-direction: column;}
.works-left {width: 100%;}
.works-h1 {font-size: 1.4rem;}
.works-right {width: 100%;}
.works-nav {flex-direction: column;gap:20px;}
.s-grid {grid-template-columns: repeat(1, 1fr);}
.s-flex { flex-direction: column;}
}

/*834px以下*/
@media screen and (max-width: 960px){
  /*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}