@charset "UTF-8";
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; }
body, html { height: 100%; }
body {
 font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
 font-weight: 400; font-size: 15px; -webkit-font-smoothing: antialiased; color: #000;
}
body.stop-scrolling { height: 100%; overflow: hidden !important; }
.h1, h1 { font-size: 26px; }
a { transition: color 0.2s, background-color 0.2s, border-color 0.2s, text-decoration 0.2s; }
a:link, a:visited { color: #333; }
img { height: auto; max-width: 100%; vertical-align: bottom; }
.mf, .mainslide .scroll a span { font-family: 'Shippori Mincho', serif; }
.container { max-width: 1430px; padding-left: 20px; padding-right: 20px; margin: 0 auto; }
@media screen and (max-width: 767px) {
 .container { width: 100%; }
 .home .container { padding-left: 0; padding-right: 0; }
}
@media screen and (max-width: 767px) { body { min-width: auto; } }

/*pc sp switch*/
.pc { display: block !important; }
span.pc { display: inline !important; }
.sp { display: none !important; }
@media only screen and (max-width: 767px) {
 .pc { display: none !important; }
 .sp { display: block !important; }
 span.sp { display: inline !important; }
}

/*共通*/
.fr { list-style: none; display: flex; }
.fr.between { justify-content: space-between; }
.fr.start { justify-content: flex-start; }
.fr.reverse { flex-direction: row-reverse; }
.fr.wrap { flex-wrap: wrap; }
.fr.center { justify-content: center; }
.fr.hcenter { align-items: center; }
.fr.bottom { align-items: flex-end; }
.fr.top { align-items: flex-start; }

/*==================================================
 * header
 *================================================*/
#header { background-color: #fff; top: 0; left: 0; position: fixed; width: 100%; z-index: 2; }
@media screen and (max-width: 767px) { #header { position: fixed; border-top: 0; } }
.home #header { background-color: rgba(255,255,255,0.8); top: -120px; transition: all .2s; }
@media screen and (max-width: 767px) { .home #header { background-color: #fff; top: 0; } }
#header .container {
 display: flex; justify-content: space-between; position: relative;
 align-items: center; height: 120px; z-index: 2; padding: 0 60px;
}
@media screen and (max-width: 767px) { #header .container { height: 50px; align-items: flex-start; padding: 0 0 0 10px; } }
@media (min-width: 768px) { .fixed.home #header { transition: all .2s; top: 0; } }

#header .logo a {
 display: block; width: 171px; height: 51px; text-indent: 100%;
 white-space: nowrap; overflow: hidden; background-position: center;
 background-repeat: no-repeat; background-size: 100% auto; transition: all 0.2s;
 position: relative; background-image: url(/images/logo-b.svg);
}
@media screen and (max-width: 767px) { #header .logo a { width: 110px; height: 33px; margin-top: 10px; } }

#contents { margin-top: 0; padding-bottom: 0; }
.wrapper { padding-top: 120px; }
@media screen and (max-width: 767px) { .wrapper { padding-top: 50px !important; overflow: hidden; } }
/* お問い合わせ：Googleフォーム iframe 内スクロールを阻害しない */
@media screen and (max-width: 767px) {
 body.contact .wrapper {
 overflow-x: hidden;
 overflow-y: visible;
 }
}
.home .wrapper { padding-top: 0; }

.gnavi { display: flex; justify-content: flex-end; }
@media (min-width: 768px) {
 .gmenu { margin-bottom: 0; display: flex !important; justify-content: flex-end; align-items: center; }
 .gmenu ul.navi { list-style: none; margin: 0; padding: 0; align-items: center; display: flex; }
 .gmenu ul.navi > li { margin: 0 0 0 70px; padding: 0; position: static; cursor: pointer; }
 .gmenu ul.navi > li > a {
 color: #000; line-height: 1.3; padding: 0; font-size: 1.4rem;
 transition: none; text-decoration: none; position: relative;
 font-weight: 500; transition: all .2s; text-align: center; letter-spacing: 0.2em;
 }
 .gmenu ul.navi > li > a:hover { opacity: .6; }
 .gmenu ul.navi > li > a::before { opacity: 0.8; }
 .main-head { top: 0; left: 0; position: absolute; width: 100%; z-index: 1; background-color: transparent; }
 .fixed .main-head { visibility: hidden; }
 .main-head .container { display: flex; justify-content: space-between; position: relative; align-items: flex-start; padding: 65px 60px 0 60px; }
 .main-head .logo a {
 pointer-events: none; display: block; width: 243px; height: 69px;
 text-indent: 100%; white-space: nowrap; overflow: hidden;
 background-position: center; background-repeat: no-repeat; background-size: 100% auto;
 transition: all 0.2s; position: relative; background-image: url(/images/logo.svg);
 }
 .main-head .gmenu ul.navi li a { color: #fff; }
}
@media (max-width: 767px) {
 .main-head { display: none; }
 .gmenu { display: none; position: fixed; right: 0; top: 50px; background-color: #000; width: 400px; }
 ul.navi { list-style: none; margin: 45px 24px; padding: 0; }
 ul.navi > li { margin: 0; padding: 0; text-align: center; }
 ul.navi > li > a { text-decoration: none; color: #fff; line-height: 1; padding: 30px 0; font-size: 18px; font-weight: bold; text-align: center; display: block; }
}
@media (max-width: 767px) {
 .gmenu {
 width: 100%;
 height: calc(100vh - 50px);
 height: calc(100dvh - 50px);
 }
}

/*menu*/
.navbar-toggle { display: none !important; }
@media screen and (max-width: 767px) {
 .navbar-toggle {
 cursor: pointer; outline: none; z-index: 1000; display: block !important;
 padding: 0; height: 50px; width: 50px;
 border: 0;
 background: #000;
 position: relative;
 -webkit-tap-highlight-color: transparent;
 }
 /* SVG が落ちても表示されるよう CSS のみでアイコン描画 */
 .navbar-toggle::before {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 width: 26px;
 height: 2px;
 margin: -1px 0 0 -13px;
 background: #fff;
 box-shadow: 0 -7px 0 0 #fff, 0 7px 0 0 #fff;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .navbar-toggle::after {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 width: 26px;
 height: 2px;
 margin: -1px 0 0 -13px;
 background: #fff;
 opacity: 0;
 pointer-events: none;
 transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .navbar-toggle.is-active::before {
 box-shadow: none;
 transform: rotate(45deg);
 }
 .navbar-toggle.is-active::after {
 opacity: 1;
 transform: rotate(-45deg);
 pointer-events: none;
 }
 .navbar-toggle:focus, .navbar-toggle:hover { background-color: #000; }
 .navbar-toggle.is-open:focus, .navbar-toggle.is-open:hover { background-color: #000; }
}

/** * .section */
section { margin-bottom: 0; display: block; position: relative; padding: 80px 0; }
@media screen and (max-width: 767px) { section { padding: 42px 0; } }
section .anchor { position: absolute; top: 0; }
@media screen and (max-width: 767px) { section .anchor { top: -70px; } }

/*メインイメージ*/
main { position: relative; }
.mainslide { width: 100%; margin: 0; padding: 10px; position: relative; height: auto; z-index: 1; }
@media screen and (max-width: 767px) {
 .mainslide { min-width: auto; padding: 8px; }
 .mainslide .container { padding-left: 0; padding-right: 0; }
}
.mainslide .inner .slick-slide img { width: 100%; height: 768px; object-fit: cover; }
@media screen and (max-width: 767px) { .mainslide .inner .slick-slide img { height: 406px; } }
@keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
.mainslide .add-animation { animation: zoomUp 10s linear 0s normal both; }
.mainslide .titletxt { position: absolute; left: calc(50% + 10%); top: 126px; }
@media screen and (max-width: 767px) {
 .mainslide .titletxt { display: block; left: calc(50% + 10%); top: 52px; }
 .mainslide .titletxt img { width: 51px; height: 274px; }
}
.mainslide #main_visual { position: relative; overflow: hidden; }
.mainslide .scroll { position: absolute; left: 144px; transform: translateX(-50%); bottom: 0; }
@media screen and (max-width: 1200px) { .mainslide .scroll { left: 110px; } }
@media screen and (max-width: 767px) { .mainslide .scroll { left: 8vw; bottom: -35px; } }
.mainslide .scroll a { display: flex; flex-direction: column; align-items: center; position: relative; transition: all 0.2s; text-decoration: none; }
.mainslide .scroll a:after { content: ""; height: 110px; width: 1px; display: block; background-color: #51B29C; }
@media screen and (max-width: 767px) { .mainslide .scroll a:after { height: 80px; } }
.mainslide .scroll a span { display: block; transform: rotate(-90deg) translateY(-10px) translateX(-150%); transform-origin: center 0 0; color: #000; font-size: 14px; width: 20px; height: 65px; letter-spacing: 0.05em; }
@media screen and (max-width: 767px) { .mainslide .scroll a span { font-size: 12px; } }
.mainslide .slick-slide { outline: none; }
@media screen and (max-width: 767px) { .mainslide .slick-slide { height: auto; } }
.anchor { position: absolute; top: -170px; }

/*section title*/
.titlearea { text-align: center; margin: 0 0 80px; }
@media screen and (max-width: 767px) { .titlearea { margin: 0 0 40px; } }
.titlearea .ettl { font-size: 3rem; font-weight: 700; letter-spacing: 0.2em; line-height: 1; }
.titlearea h2 { font-size: 1.4rem; line-height: 1; font-weight: 500; margin: 15px 0 0; letter-spacing: 0.1em; }
img { vertical-align: bottom; }

/** * .footer */
#footer {
 background-image: url(/images/bg-footer.jpg);
 background-repeat: no-repeat; background-position: center; background-size: cover;
 width: 100%; position: relative; padding: 90px 0 10px; height: 1026px;
 display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
@media only screen and (max-width: 767px) {
 #footer {
 padding: 90px 0 10px; height: 438px;
 background-image: url(/images/sp-bg-footer.jpg); background-size: 100% auto;
 }
}
#footer .container { display: flex; justify-content: space-between; align-items: center; }
#footer ul.footmenu { list-style: none; margin: 0; padding: 0; justify-content: center; align-items: center; display: flex; }
@media screen and (max-width: 767px) { #footer ul.footmenu { display: block; } }
#footer ul.footmenu > li { margin: 0 35px; padding: 0; position: static; cursor: pointer; }
@media screen and (max-width: 767px) { #footer ul.footmenu > li { text-align: center; margin-bottom: 10px; } }
#footer ul.footmenu > li > a { color: #fff; line-height: 1.3; padding: 0; font-size: 1.4rem; text-decoration: none; position: relative; font-weight: 500; transition: all .2s; text-align: center; letter-spacing: 0.2em; }
#footer ul.footmenu > li > a:hover { opacity: .6; }
#footer .company-info { padding: 0; font-size: 1.4rem; line-height: 2.1; color: #fff; font-weight: 500; letter-spacing: 0.1em; text-align: center; }
@media only screen and (max-width: 767px) { #footer .company-info { font-size: 1.2rem; } }
#footer .company-info .sns { margin-top: 20px; line-height: 1; }
#footer .company-info .sns a { transition: all .2s; }
#footer .company-info .sns a:hover { opacity: .6; }
#footer .copy { font-size: 1rem; font-weight: 500; padding-bottom: 0; margin: 35px 0 0; }
@media only screen and (max-width: 767px) { #footer .copy { margin: 30px 0 0; } }

/*-------------------------------
 home
 ------------------------------- */
section .ttlarea { margin-bottom: 80px; text-align: center; }
@media screen and (max-width: 767px) { section .ttlarea { margin-bottom: 55px; } }
section .ttlarea .h1 { font-size: 50px; font-weight: 700; margin: 0 0 10px; }
@media screen and (max-width: 767px) { section .ttlarea .h1 { font-size: 35px; } }
section .ttlarea .h2 { font-size: 18px; font-weight: 300; line-height: 1.3; margin-top: 5px; color: #41A9A5; }
@media screen and (max-width: 767px) { section .ttlarea .h2 { font-size: 15px; } }
section .ttlarea .ttl { font-size: 35px; font-weight: bold; letter-spacing: 0.05em; margin-left: 15px; }
@media screen and (max-width: 767px) { section .ttlarea .ttl { font-size: 28px; } }

a.readmore {
 margin: 30px auto 0; font-weight: normal; font-size: 1.2rem; text-align: center;
 display: block; letter-spacing: 0.1em; border: 1px solid #000; text-decoration: none;
 color: #000; width: 250px; line-height: 52px; height: 54px; padding-right: 25px;
 background-color: #fff; position: relative;
 background-image: url(/images/icon-arrow.svg); background-repeat: no-repeat; background-position: right 20px center;
}
a.readmore:hover { background-color: #000; color: #fff; background-image: url(/images/icon-arrow-w.svg); }
a.readmore2 {
 margin: 70px auto 0; font-weight: normal; font-size: 1.3rem; text-align: center;
 display: block; letter-spacing: 0.1em; border: 1px solid #000; text-decoration: none;
 color: #fff; width: 250px; line-height: 52px; height: 54px; background-color: #000; position: relative;
}
@media screen and (max-width: 767px) { a.readmore2 { margin: 40px auto 30px; } }
a.readmore2:hover { background-color: #fff; color: #000; }
a.readmore + a.readmore2 { margin: 15px auto 0; }

/*foot*/
#page-top { display: none; position: fixed; z-index: 9999; bottom: 30px; right: 30px; font-size: 12px; }
@media screen and (max-width: 767px) { #page-top { bottom: 30px; right: 10px; } }
#page-top a { line-height: 1; text-decoration: none; color: #000; text-align: center; display: block; position: relative; padding: 0; transition: all 0.2s; }
#page-top a:hover { opacity: .8; }
#page-top a.w span { color: #fff; }
#page-top a.w svg { fill: #fff; }
#page-top span { display: block; writing-mode: vertical-rl; color: #000; font-size: 1rem; font-weight: 500; white-space: nowrap; margin-bottom: 5px; margin-left: 5px; letter-spacing: 0.1em; }

/*-------------------------------
 page
 ------------------------------- */
.page-header { background-position: center; background-repeat: no-repeat; background-size: cover; }
.page-header .container {
 display: flex;
 align-items: center; /* ← 縦中央 */
 justify-content: flex-start; /* ← 左寄せ */
 height: 358px; /* ← 高さ必須 */
}
@media screen and (max-width: 767px) { .page-header .container { justify-content: center; } }
.page-header .titlearea {
 margin-left: 88px;
 text-align: left;
}
@media screen and (max-width: 767px) { .page-header .titlearea { margin: 0; text-align: center; } }
.page-header .titlearea .ettl { font-size: 3rem; font-weight: 700; letter-spacing: 0.2em; line-height: 1; }
.page-header .titlearea h1 { font-size: 1.4rem; line-height: 1; font-weight: 500; margin: 20px 0 0; letter-spacing: 0.2em; }

.second h2 { text-align: center; font-size: 2.6rem; line-height: 1.5; margin: 0 0 60px; font-weight: 500; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { .second h2 { margin: 0 0 38px; } }
.second .lead { letter-spacing: 0.1em; text-align: center; font-size: 1.5rem; line-height: 2.6; max-width: 1045px; margin: 0 auto; }
@media screen and (max-width: 767px) { .second .lead { line-height: 2; text-align: left; text-indent: 1em; margin: 0 10px; } }
.second section { padding: 125px 0; }
@media screen and (max-width: 767px) { .second section { padding: 52px 0 0; } }
.second section:last-child { padding-bottom: 100px; }
/* お問い合わせ：フォーム下の余白を詰める（.second:last-child より詳細度高） */
.contact.second section.sec-contact2 {
 padding-bottom: 28px;
}
@media screen and (max-width: 767px) {
 .contact.second section.sec-contact2 {
 padding-bottom: 20px;
 }
}

/*works page*/
.works .page-header { background-image: url(/images/bg-works.jpg); }
@media screen and (max-width: 767px) { .works .page-header { background-image: url(/images/sp-bg-works.jpg); } }

/*contact page*/
.contact .page-header { background-image: url(/images/bg-contact.jpg); }
@media screen and (max-width: 767px) { .contact .page-header { background-image: url(/images/sp-bg-contact.jpg); } }
.contact .sec-contact1 { padding-bottom: 0; }
.contact .sec-contact1 .lead { font-size: 1.4rem; line-height: 1.8; font-weight: 500; margin-bottom: 115px; }
@media screen and (max-width: 767px) { .contact .sec-contact1 .lead { text-align: center; margin-bottom: 50px; } }
.contact .sec-contact2 .lead { font-size: 1.8rem; line-height: 1.8; font-weight: 500; }
@media screen and (max-width: 767px) { .contact .sec-contact2 .lead { text-align: center; font-size: 1.5rem; } }
.contact .sec-contact2 .tel { font-size: 2.2rem; text-align: center; font-weight: 500; letter-spacing: 0.1em; margin: 35px 0 0; }
@media screen and (max-width: 767px) { .contact .sec-contact2 .tel { font-size: 1.8rem; } }
.contact .sec-contact2 .tel a { text-decoration: none; font-size: 2.6rem; font-weight: 500; margin-left: 20px; pointer-events: none; }
@media screen and (max-width: 767px) { .contact .sec-contact2 .tel a { pointer-events: all; margin-left: 0; font-size: 2.2rem; display: block; margin-top: 20px; } }
.contact .sec-contact2 .form { margin: 60px auto 0; max-width: 640px; min-height: 0; }
.contact .sec-contact2 .form iframe { display: block; width: 100%; vertical-align: top; }
@media screen and (max-width: 767px) { .contact .sec-contact2 .form { margin: 50px auto 0; } }
.contact .google-map { width: 100%; height: 478px; }
@media screen and (max-width: 767px) { .contact .google-map { height: 300px; } }

/* top slide Dots */
.slick-dotted.slick-slider { margin-bottom: 30px; }
.slick-dots { position: absolute; bottom: 100px; display: inline-block !important; left: 50%; transform: translateX(-550px); width: auto; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots.thin { bottom: 20px; }
.slick-dots li { position: relative; display: inline-block; width: auto; height: 14px; margin: 0 8px; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 14px; height: 14px; padding: 0; border-radius: 50%; background-color: #fff; cursor: pointer; border: 0; outline: none; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li.slick-active button { border: 2px solid #fff; background-color: transparent; }

#loading { display: none; }

.contact .page-header {
 background-image: url(/images/bg-contact.jpg);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
@media (min-width: 768px) {
 #spmenu {
 display: none !important;
 }
}
body:not(.home) .wrapper {
 padding-top: 0;
}
.page-header .titlearea {
 color: #fff;
}
.page-header .titlearea h1,
.page-header .titlearea .ettl {
 color: #fff;
}
@media (min-width: 768px) {
 .page-header .titlearea {
 margin-left: 88px;
 transform: translateY(88px);
 }
}
.works-kominka {
 padding: 100px 0;
 background: #f7f5f2;
 text-align: center;
}

.works-title {
 font-size: 2.4rem;
 letter-spacing: 0.2em;
 margin-bottom: 20px;
}

.works-lead {
 font-size: 1.3rem;
 line-height: 2;
 margin-bottom: 60px;
 color: #444;
}

.works-item {
 margin-bottom: 60px;
}

.works-item img {
 width: 100%;
 max-width: 800px;
 margin: 0 auto;
 display: block;
}

.works-text {
 margin-top: 15px;
 font-size: 1.2rem;
 line-height: 2;
}

.works-btn {
 display: inline-block;
 margin-top: 40px;
 padding: 12px 40px;
 background: #000;
 color: #fff !important; /* ← 半角スペースにする */
 text-decoration: none;
}
a.works-btn,
a.works-btn:link,
a.works-btn:visited {
 background: #fff;
 color: #000;
 border: 1px solid #000;
}
#header .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

#gmenu ul.navi {
 display: flex;
 gap: 40px;
 list-style: none;
}

#gmenu ul.navi li a {
 text-decoration: none;
 color: #000;
}
.works .page-header {
 background-image: url(/images/bg-works.jpg);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.page-header {
 height: 358px;
}
@media screen and (max-width: 767px) {
 .works .page-header {
 height: 220px;
 min-height: 0;
 }
 .works .page-header .container {
 height: 100%;
 min-height: 0;
 }
 .works .page-header .titlearea {
 color: #000;
 }

 .works .page-header .titlearea h1,
 .works .page-header .titlearea .ettl {
 color: #000;
 }
}
@media screen and (max-width: 767px) {
 .works .page-header .titlearea,
 .works .page-header .titlearea h1,
 .works .page-header .titlearea .ettl {
 color: #fff !important;
 }
}
@media screen and (max-width: 767px) {
 .works .page-header .container {
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 }

 .works .page-header .titlearea {
 margin: 0;
 transform: none;
 }
}
/* PCナビはスマホで非表示 */
@media screen and (max-width: 767px) {
 #gmenu {
 display: none;
 }
}
.menu-btn {
 display: none;
}

@media screen and (max-width: 767px) {
 .menu-btn {
 display: block;
 }
}
@media screen and (max-width: 767px) {
 .contact .page-header {
 height: 200px;
 }

 .contact .page-header .container {
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 }

 .contact .page-header .titlearea {
 margin: 0;
 transform: translateY(10px);
 }
}

.menu-btn {
 position: absolute;
 right: 15px;
 top: 15px;
 z-index: 999; /* ← これ重要 */
}
.works .menu-btn {
 display: block;
}
.menu-btn {
 background: #000;
}

.menu-btn span {
 display: block;
 width: 20px;
 height: 2px;
 background: #fff;
 margin: 4px auto;
}
.contact .page-header {
 margin: 0;
 padding: 0;
}
.contact .page-header .container {
 padding: 0;
}
.works-furniture {
 padding: 40px 0;
 background: #f7f5f2;
 text-align: center;
}

.works-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
}

.works-grid img {
 width: 100%;
 aspect-ratio: 1 / 1;
 object-fit: cover;
 display: block;
}
@media screen and (max-width: 767px) {
 .works-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
/* ===== Chainsaw ===== */
.works-chainsaw {
 padding: 20px 0 60px;
 text-align: center;
}

.chainsaw-images {
 margin-bottom: 10px;
}

.chainsaw-images img {
 width: 100%;
 max-width: 900px;
 display: block;
 margin: 0 auto 10px;
}
/* ===== スマホ ===== */
@media screen and (max-width: 767px) {

 .works-chainsaw {
 padding: 60px 0;
 }

 .chainsaw-images img {
 margin-bottom: 10px;
 }

}
.works-text {
 max-width: 800px;
 margin: 20px auto 0;
 text-align: left;
 line-height: 2;
 font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
 .works-text {
 padding: 0 20px;
 font-size: 1.3rem;
 }
}

/* WORKS ページ：#kominka 等へジャンプしたとき固定ヘッダーに隠れないよう */
body.works.second #kominka,
body.works.second #furniture,
body.works.second #chainsaw {
 scroll-margin-top: 120px;
}
@media screen and (max-width: 767px) {
 body.works.second #kominka,
 body.works.second #furniture,
 body.works.second #chainsaw {
 scroll-margin-top: 60px;
 }
}