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

html {
	font-size:62.5%;
}
body {
    font-family:'Noto Sans JP',Arial,sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8;
    font-size: 1.6rem;
    color: #352b27;
}
.manrope {
  font-family: "Manrope", sans-serif;
}
.NotoSerif {
    font-family: 'Noto Serif JP', serif;
}
a,
a:active,
a:visited {
	text-decoration:none;
	color:#352b27;
}
a:hover {
	filter: alpha(opacity=60);
	-moz-opacity:0.60;
	opacity:0.60;
}
a,
a:hover {
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
img {
	max-width:100%;
	height: auto;
    vertical-align: bottom;
}
img.vab {
	vertical-align:baseline;
}
img.vam {
	vertical-align: middle;
}
.pr {
	position:relative;
}
.tac {
	text-align:center;
}
.tar {
	text-align:right;
}
.tal {
	text-align:left;
}
.pcCont {
	display:block !important;
}
.pcTabCont {
	display:block !important;
}
.tabOnlyCont {
	display:none !important;
}
.spCont {
	display:none !important;
}
.spTabCont {
	display:none !important;
}
.spOnlyCont {
	display:none !important;
}
@media screen and (max-width: 834px) {
	.tabOnlyCont {
        display:block !important;
    }
    .spTabCont {
        display:block !important;
    }
}
@media screen and (max-width: 768px) {
    .pcCont {
        display:none !important;
    }
    .spCont {
        display:block !important;
    }
}
@media screen and (max-width: 480px) {
    .tabOnlyCont {
        display:none !important;
    }
	.spOnlyCont {
        display:block !important;
    }
}

/*メイン
-------------------------------------------------------*/
.contBox {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
.contBoxW1200 {
	width: 90%;
	max-width: 1200px;
	/*margin: 0 auto;*/
}
.bgGray {
	background-color: #f5f5f5;
}
.mgnAuto {
	margin: auto;
}
.mb5 {
	margin-bottom:5px !important;
}
.mb10 {
	margin-bottom:10px !important;
}
.mb15 {
	margin-bottom:15px !important;
}
.mb20 {
	margin-bottom:20px !important;
}
.mb30 {
	margin-bottom:30px !important;
}
.mb40 {
	margin-bottom:40px !important;
}
.mb50 {
	margin-bottom:50px !important;
}
.mb60 {
	margin-bottom:60px !important;
}
.mb70 {
	margin-bottom:70px !important;
}
.mb80 {
	margin-bottom:80px !important;
}
.mb90 {
	margin-bottom:90px !important;
}
.mb100 {
	margin-bottom:100px !important;
}
.mt5 {
	margin-top:5px !important;
}
.mt10 {
	margin-top:10px !important;
}
.mt15 {
	margin-top:15px !important;
}
.mt20 {
	margin-top:20px !important;
}
.mt30 {
	margin-top:30px !important;
}
.mt40 {
	margin-top:40px !important;
}
.mt50 {
	margin-top:50px !important;
}
.mt60 {
	margin-top:60px !important;
}
.mt70 {
	margin-top:70px !important;
}
.mt80 {
	margin-top:80px !important;
}
.mt90 {
	margin-top:90px !important;
}
.mt100 {
	margin-top:100px !important;
}
.mr10 {
	margin-right:10px !important;
}
.mr20 {
	margin-right:20px !important;
}
.mr30 {
	margin-right:30px !important;
}
.ml0{
	margin-left:0px !important;
}
.ml10 {
	margin-left:10px !important;
}
.ml20 {
	margin-left:20px !important;
}
.ml30 {
	margin-left:30px !important;
}
.w100 {
	width:100%;
}
.w95 {
	width:95%;
}
.w90 {
	width:90%;
}
.w85 {
	width:85%;
}
.w80 {
	width:80%;
}
.w75 {
	width:75%;
}
.w70 {
	width:70%;
}
.w65 {
	width:65%;
}
.w60 {
	width:60%;
}
.w55 {
	width:55%;
}
.w50 {
	width:50%;
}
.w45 {
	width:45%;
}
.w40 {
	width:40%;
}
.w35 {
	width:35%;
}
.w30 {
	width:30%;
}
.w25 {
	width:25%;
}
.w20 {
	width:20%;
}
.w15 {
	width:15%;
}
.w10 {
	width:10%;
}
.w5 {
	width:5%;
}
.fwb {
    font-weight: bold !important;
}
.fw700 {
    font-weight: 700 !important;
}
.ls01 {
    letter-spacing: 0.1em;
}
.ls02 {
    letter-spacing: 0.075em;
}
.ls03 {
    letter-spacing: 0.05em;
}
.ls04 {
    letter-spacing: 0.2em;
}
.ls05 {
    letter-spacing: -0.05em;
}
.ls06 {
    letter-spacing: -0.2em;
}
.ls07 {
    letter-spacing: -0.025em;
}
.ls08 {
    letter-spacing: 0.025em;
}
.lh13 {
    line-height: 1.3;
}
.lh14 {
    line-height: 1.4;
}
.lh15 {
    line-height: 1.5;
}
.lh16 {
    line-height: 1.6;
}
.lh21 {
    line-height: 2.1;
}
@media screen and (max-width: 900px) {
    a:hover {
        filter: alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
    }
    .tabtac {
        text-align: center;
    }
}
@media screen and (max-width: 600px) {
    .sptac {
        text-align: center;
    }
    .mb10 {
        margin-bottom:10px !important;
    }
    .mb15 {
        margin-bottom:15px !important;
    } 
    .mb20 {
        margin-bottom:20px !important;
    }
    .mb30 {
        margin-bottom:30px !important;
    }
    .mb40 {
        margin-bottom:30px !important;
    }
    .mb50 {
        margin-bottom:30px !important;
    }
    .mb60 {
        margin-bottom:30px !important;
    }
    .mb70 {
        margin-bottom:40px !important;
    }
    .mb80 {
        margin-bottom:60px !important;
    }
    .mb90 {
        margin-bottom:60px !important;
    }
    .mb100 {
        margin-bottom:60px !important;
    }
    .mt5 {
        margin-top:7px !important;
    }
    .mt10 {
        margin-top:10px !important;
    }
    .mt15 {
        margin-top:10px !important;
    }
    .mt20 {
        margin-top:20px !important;
    }
    .mt30 {
        margin-top:20px !important;
    }
    .mt40 {
        margin-top:20px !important;
    }
    .mt50 {
        margin-top:30px !important;
    }
    .mt60 {
        margin-top:30px !important;
    }
    .mt70 {
        margin-top:40px !important;
    }
    .mt80 {
        margin-top:40px !important;
    }
    .mt90 {
        margin-top:40px !important;
    }
    .mt100 {
        margin-top:40px !important;
    }
}

/* ヘッダー
-------------------------------------------------------*/
/*header {
    width: 100%;
    position: fixed;
	z-index: 1;
	transition: 0.3s;
}
header.scroll {
	background-color: rgba(53,43,39,1);
	background-color: rgba(0,0,0,.7);
}*/
header {
    width: 100%;
    position: fixed;
	z-index: 1;
	transition: 0.3s;
}
header.scroll {
	background-color: rgba(0,0,0,.7);
}
.logoFlex {
	display: flex;
    align-items: center;
    justify-content: space-between;
	margin: 0 auto;
    padding: 3rem 5rem;
}
.logo {
    width: 160px;
}
header.scroll .logo img {
	filter: drop-shadow(0 0 2px #352b27);
}
.navFlex {
    display: flex;
    align-items: center;
    line-height: 1.4;
    gap: 4rem;
	font-size: 1.4rem;
}
.navFlex a {
	color: #fff;
}
header.scroll .navFlex a {
	text-shadow: 0 0 2px #352b27;
}
.ham-btn {
    display:none;
}
.navFlexSp {
    display:none;
}
@media screen and (max-width: 768px) {
	header {
		/*position: fixed;*/
    }
    header.scroll {
        /*background-color: rgba(0,0,0,.7);*/
    }
    .navFlex {
        display:none;
    }
    .logoFlex {
        width: 100%;
        padding: 2rem 5%;
    }
	.logo {
		width: 120px;
		z-index: 150;
	}
    .ham-btn {
        display:flex;
        z-index:151;
        order: 4;
        margin-left: auto;
    }
    .menu-trigger,
    .menu-trigger span {
      display: inline-block;
      transition: all .4s;
      box-sizing: border-box;
    }
    .menu-trigger {
      position: relative;
      width: 40px;
      height: 40px;
      background-color: #fff;
      border-radius: 100px;
    }
    .menu-trigger span {
      position: absolute;
      left: 13px;
      width: 15px;
      height: 1.5px;
      background-color: #352b27;
      border-radius: 3px;
    }
    .menu-trigger span:nth-of-type(1) {
      top: 14px;
    }
    .menu-trigger span:nth-of-type(2) {
      top: 20px;
    }
    .menu-trigger span:nth-of-type(3) {
      top: 26px;
    }
    .menu-trigger.active span:nth-of-type(1) {
      -webkit-transform: translateY(6px) rotate(-45deg);
      transform: translateY(6px) rotate(-45deg);
    }
    .menu-trigger.active span:nth-of-type(2) {
      opacity: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
      -webkit-transform: translateY(-6px) rotate(45deg);
      transform: translateY(-6px) rotate(45deg);
    }
    .menu-trigger::after {
      content: '';
      font-size: 0.9em;
      text-align: center;
      width: 100%;
      display: inline-block;
      position: absolute;
      bottom: 0px;
      left: 0;
      color: #000;
    }
    .ham-btn a:hover {
        filter: alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
    }
    .navFlexSp {
        display: block;
        padding: 100px 0 3rem;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(150%);
        transition: all 0.6s;
        width: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        box-shadow: none;
		z-index: 0;background-color: #352b27;
    }
    .navFlexSp.active {
        top: 0;
        transform: translateX(0%);
    }
    .navFlexSp li {
        width: 100%;
    }
    .navFlexSp a {
		display: block;
        padding: 1.15rem 5%;
        font-size: 1.6rem;
		color: #fff;
    }
}

/* メイン
-------------------------------------------------------*/
.mainWrap {
	background: url("../img/kuzuha/main.jpg") no-repeat center 25%;
	background-size: cover;
	width: 100%;
	height: 100vh;
	/*position: absolute;
	top: 0;*/
}
.catchWrap {
	width: 100%;
	position: absolute;
	white-space: nowrap;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}
.catch {
	width: 83%;
	max-width: 725px;
}
.h2catch {
	font-size: 24px;
	color: #fff;
}
.h3catch {
	font-size: 36px;
	color: #fff;
}
@media screen and (max-width: 890px) {
    .h2catch {
        font-size: calc(100vw * 24 / 890);
    }
    .h3catch {
        font-size: calc(100vw * 36 / 890);
    }
}

/* ABOUT
-------------------------------------------------------*/
.about {
	background: url("../img/kuzuha/bg_about.jpg") no-repeat 0 0;
	background-size: cover;
}
.contBoxW1200 {
	margin-left: auto !important;
}
.contBoxW1200.rev {
	margin-left: 0 !important;
}
.aboutWrap {
	padding: 100px 0 145px;
}
.h3wrap {
	display: flex;
	align-items: center;
}
.h3sec {
	background-color: #352b27;
	color: #fff;
	width: fit-content;
	padding: 0 1rem;
	font-size: 13px;
	flex-shrink: 0;
}
.h3wrap span {
	background-color: #352b27;
	width: 100%;
	height: 1px;
}
.about .h3sec {
	background-color: #fff;
	color: #352b27;
}
.about .h3wrap span {
	background-color: #fff;
}
.h4sec {
	font-size: 100px;
	line-height: 1;
}
.about .h4sec {
	color: #fff;
}
.aboutFlex {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	margin-top: -20px;
}
.h5sec {
	font-size: 38px;
	line-height: 1.5;
}
.about .h5sec {
	color: #fff;
}
.pSec {
	font-size: 15px;
	line-height: 2.0;
}
.about .pSec {
	color: #fff;
}
.imgAbout {
	width: 550px;
}
.circleFlex {
	display: flex;
	gap: 3px;
	align-items: center;
	color: #fff;
}
.circle{
	font-size: 16px;
	display:flex;
	align-items:center;
	justify-content:center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
	border: 1px solid #fff;
}
.pCross {
	font-size: 120%;
}
@media screen and (max-width: 1200px) {
	/*.aboutFlex {
        margin-top: 0;
    }*/
	.h4sec {
        font-size: calc(100vw * 100 / 1200);
    }
    .h5sec {
        font-size: calc(100vw * 38 / 1200);
    }
}
@media screen and (max-width: 768px) {
    .about {
        background: url("../img/kuzuha/bg_about.jpg") no-repeat 50% 0;
        background-size: cover;
    }
    .aboutWrap {
        padding: 15vw 0 0;
    }
	.contBoxW1200 {
		width: 100%;
	}
    .h3wrap {
        margin-left: 5%;
    }
    .rev .h3wrap {
        margin-left: 0;
        margin-right: 5%;
    }
    .h4sec {
        font-size: calc(100vw * 100 / 768);
    }
    .h4sec {
		padding-left: 5%;
    }
    .rev .h4sec {
        margin-left: 0;
        margin-right: 5%;
    }
    .aboutFlex {
        flex-direction: column;
        gap: 12vw;
        margin-top: 0;
    }
	.leftAbout {
		width: 100%;
		padding: 0 5%;
	}
    .h5sec {
        font-size: calc(100vw * 38 / 768);
    }
	.imgAbout {
		width: 100%;
	}
    .circleFlex {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    .aboutFlex {
        gap: 12vw;
    }
    .h4sec {
        font-size: calc(100vw * 60 / 400);
    }
    .h5sec {
        font-size: calc(100vw * 24 / 400);
    }
    .pSec {
        font-size: 14px;
    }
}
.aboutDl {
	border-bottom: 1px solid #fff;
	color: #fff;
	display: flex;
	flex-flow: wrap;
	margin-left: 0;
}
.aboutDl dt {
	width: 30%;
	background-color: #352b27;
	padding: 15px 0;
	border-top: 1px solid #fff;
}
.aboutDl dd {
	width: 70%;
	padding: 15px 0 15px 45px;
	border-top: 1px solid #fff;
}
@media screen and (max-width: 768px) {
	.aboutDl.contBox {
		width: 100%;
	}
    .aboutDl {
        margin-left: auto;
    }
    .aboutDl dt {
        width: 27%;
        padding: 4vw 0;
    }
    .aboutDl dd {
        width: 73%;
        padding: 4vw 0 4vw 4vw;
    }
    .aboutDl dd:first-of-type {
        padding: 2vw 0 2vw 4vw;
		line-height: 1.6;
    }
}

/* DESIGN
-------------------------------------------------------*/
.design {
	background: url("../img/kuzuha/bg_design.png") no-repeat 100% 0% #f9f6f3;
	background-size: 100% auto;
}
.designWrap {
	padding: 145px 0 145px;
}
@media screen and (max-width: 768px) {
    .designWrap {
        padding: 15vw 0;
    }
}
@media screen and (max-width: 480px) {
    .designWrap {
        padding: 12vw 0;
    }
}
.rev .h3wrap {
	flex-direction: row-reverse;
}
.rev .h4sec {
	text-align: right;
}
.designFlex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.designFlex.even {
	flex-direction: row-reverse;
}
.imgDesign {
	width: 55%;
}
.txtWrapDesign {
	width: 40%;
}
.h6sec {
	font-size: 24px;
	line-height: 1.6;
}
@media screen and (max-width: 768px) {
    .design {
        background: url("../img/kuzuha/bg_design.png") no-repeat 50% 0% #f9f6f3;
        background-size: 200% auto;
    }
    .designFlex,.designFlex.even  {
        flex-direction: column;
		gap: 5vw;
    }
    .imgDesign {
        width: 100%;
    }
    .txtWrapDesign {
        width: 100%;
    }
    .h6sec {
        font-size: calc(100vw * 24 / 768);
    }
}
@media screen and (max-width: 480px) {
    .design {
        background: url("../img/kuzuha/bg_design.png") no-repeat 49% 0% #f9f6f3;
        background-size: 390% auto;
    }
    .h6sec {
        font-size: calc(100vw * 21 / 400);
    }
}

/* ROOM
-------------------------------------------------------*/
.room {
	background: url("../img/kuzuha/bg_room.png") no-repeat 0% 50%;
	background-size: 100% auto;
}
.roomWrap {
	padding: 145px 0 145px;
}
@media screen and (max-width: 768px) {
    .room {
        background: url("../img/kuzuha/bg_room.png") no-repeat 0% 50%;
        background-size: 200% auto;
    }
    .roomWrap {
        padding: 15vw 0;
    }
}
@media screen and (max-width: 480px) {
    .room {
        background: url("../img/kuzuha/bg_room.png") no-repeat 25% -30%;
        background-size: 400% auto;
    }
    .roomWrap {
        padding: 12vw 0;
    }
}
.roomFlex {
	display: flex;
	justify-content: space-between;
}
.roomLeft,.roomRight {
	width: 47.5%;
}
.roomLeft {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.roomBtmFlex {
	display: flex;
	justify-content: space-between;
}
.imgRoomBtm {
	width: 30%;
}
@media screen and (max-width: 768px) {
    .roomFlex {
        flex-direction: column;
		gap: 4vw;
    }
    .roomLeft,.roomRight {
        width: 100%;
    }
    .roomLeft {
        flex-direction: column-reverse;
    }
	.mt40.h5room {
		margin-top: 0 !important;
	}
	.mb40.h5room {
		margin-bottom: 0 !important;
	}
    .roomBtmFlex {
		flex-direction: column;
		gap: 10vw;
    }
    .imgRoomBtm {
        width: 100%;
    }
}
.roomTxt {
	font-size: 13px;
}

/* SAFETY
-------------------------------------------------------*/
.safety {
	background-color: #f9f6f3;
}
.safetyWrap {
	padding: 145px 0 145px;
}
@media screen and (max-width: 768px) {
    .safety {
    }
    .safetyWrap {
        padding: 15vw 0;
    }
}
@media screen and (max-width: 480px) {
    .safety {
    }
    .safetyWrap {
        padding: 12vw 0;
    }
}
.safetyFlex {
	display: flex;
	justify-content: center;
}
.safetyCont {
	width: 250px;
	padding: 10px 0 20px;
}
.safetyCont:nth-of-type(2) {
	border-left: 1px solid #b0b3b5;
	border-right: 1px solid #b0b3b5;
}
.imgSafety {
	max-width: 102px;
	margin: auto;
}
.pSafety {
	text-align: center;
}
@media screen and (max-width: 768px) {
    .pSafety {
        text-align: left;
    }
}
@media screen and (max-width: 508px) {
    .safetyCont {
        width: 30vw;
    }
    .imgSafety {
        max-width: 19vw
    }
}

/* GALLERY
-------------------------------------------------------*/
.gallery {
}
.galleryWrap {
	padding: 145px 0 145px;
}
@media screen and (max-width: 768px) {
    .safety {
    }
    .galleryWrap {
        padding: 15vw 0;
    }
}
@media screen and (max-width: 480px) {
    .safety {
    }
    .galleryWrap {
        padding: 12vw 0;
    }
}
.h4gallery {
	font-size: 48px;
	line-height: 1;
}
@media screen and (max-width: 768px) {
    .h4gallery {
        font-size: calc(100vw * 48 / 768);
        line-height: 1;
    }
}
@media screen and (max-width: 480px) {
    .h4gallery {
        font-size: calc(100vw * 36 / 400);
        line-height: 1;
    }
}
.galleryFlex {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
	gap: 3rem 0;
}
.galleryFlex li {
    width: 23%;
}
.galleryFlex li img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.galleryFlex::after {
	content: "";
    display: block;
    width: 23%;
}
.galleryFlex::before {
	content: "";
    display: block;
    width: 23%;
	order: 1;
}
@media screen and (max-width: 768px) {
    .galleryFlex {
        gap: 4vw 0;
    }
    .galleryFlex li {
        width: 30%;
    }
}
.imgHide {
    display: none;
	transition: 0.3s;
}
.imgHide.imgShow {
    display: block;
}
.imgHideSp {
    display: none;
}
.imgMore {
    cursor: pointer;
    width: 300px;
    padding: 1.75rem 0;
    position: relative;
    display: block;
    color: #fff !important;
    margin: auto;
    background-color: #cfb198;
    text-align: center;
	font-size: 15px;
	border-radius: 100px;
}
.imgMore i {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    transition: all 0.3s;
    font-size: 180%;
}
.imgMore::before {
    content: 'もっと見る';
}
.imgMore.on::before {
    content: '施工事例を戻す';
}
.imgMore.on i {
	 transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 767px) {
    .imgHideSp {
        display: block;
    }
    .imgMore::before {
    }
    .imgMore.on::before {
    }
    .imgMore span::before {
        font-size: 18px;
    }
    .imgMore.on span::before {
        font-size: 18px;
    }
    .imgMore {
		font-size: 14px;
    }
}
@media screen and (max-width: 480px) {
    .imgMore {
		width: 75vw;
		font-size: 14px;
    }
}

/* MACHIMOKU
-------------------------------------------------------*/
.machimoku {
	background: url("../img/kuzuha/bg_machimoku.jpg") no-repeat center center;
	background-size: cover;
	padding: 80px 0;
}
.machimoku .h5sec,.machimoku .pSec {
    color: #fff;
}
.h5sec.f31 {
	font-size: 31px;
}
@media screen and (max-width: 768px) {
    .machimoku {
        padding: 10vw 0;
    }
    .h5sec.f31 {
        font-size: calc(100vw * 31 / 768);
    }
}
@media screen and (max-width: 480px) {
    .h5sec.f31 {
        font-size: calc(100vw * 24 / 400);
    }
}
.fLogoWrap {
	background-color: #352b27;
	padding: 50px 0;
}
@media screen and (max-width: 768px) {
    .fLogoWrap {
        padding: 8vw 0;
    }
}

/* FOOTER
-------------------------------------------------------*/
footer {
	padding: 30px 1.3%;
	display: flex;
	align-items: center;
	gap: 35px;
}
/*.logoCorp {
	width: 255px;
}*/
.logoFlexFotter {
	display: flex;
	gap: 15px;
}
.telFlex {
	display: flex;
	align-items: flex-end;
	gap: 15px;
}
.pFooter {
	font-size: 12px
}
.telNum {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	font-size: 36px;
	line-height: 1;
}
.telNum img {
	width: 20px;
	height: 20px;
	margin-bottom: 3px;
}
.copy {
	font-size: 11px;
	margin-top: auto;
	margin-left: auto;
}
@media screen and (max-width: 1225px) {
    .telFlex {
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }
}
@media screen and (max-width: 915px) {
    footer {
		flex-direction: column;
        padding: 30px 1.3%;
        gap: 20px;
    }
	.copy {
        margin-top: 0;
        margin-left: 0;
    }
	.logoFlexFotter {
		order: 2;
	}
	.telFlex {
		order: 1;
		gap: 1vw;
	}
	.telNum {
		margin-top: 1vw;
	}
	.copy {
		order: 3;
	}
}
@media(min-width: 768px){
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
    }
}