@charset "utf-8";
/*
Theme Name: Yorozuya2026
Description: Yorozuya2026テーマ
*/

/*基本設定*/
html { margin-top: 0 !important; }
	* html body { margin-top: 0 !important; }
	@media screen and ( max-width: 767px ) {
		html { margin-top: 0 !important; }
		* html body { margin-top: 0 !important; }
	}
html,body{
 ? ?width: 100%; height:100%;
}
body {height:100%; position: relative; right: 0;	overflow-x: hidden; margin:0; padding:0; font-family:'Noto Sans JP', sans-serif;font-weight: 400;
  font-style: normal; color:#4d4d4d; line-height:2em; background:#fff; letter-spacing:.13em;}

/*base*/
html, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, ite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, ol, ul, li, fieldset, form, label, legend,caption, tbody, tfoot, thead,tt,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video, p{ margin: 0; ?padding: 0; ?border: 0; ?font: inherit;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; /*color:#5eb4b5;*/ }

body{position:relative;}
li{list-style:none;}
a{text-decoration: none; color:#4d4d4d;}
a:hover{color:#cec28e;}
ul{padding:0;}

/*共通設定*/
.center{text-align:center;}
img{width:100%; height:auto;}
.bg01{background:#ff0000;}
.bg02{background:#fcf9f4;}
.contents_inner_1020{width:100%; max-width:1020px; margin:0 auto; padding:100px 0;}
.contents_inner_760{width:100%; max-width:760px; margin:0 auto; padding:100px 0;}
.contents_inner_1020 h3 ,.contents_inner_760 h3{font-size:1.8em; display:block; text-align:center; line-height:1.4em; margin-bottom:1em;}
.contents_inner_1020 .title-text{width:50%; display:block; margin:0 auto 1em;}
.btn{width:100%; text-align:center; margin-bottom:3em;}
.btn a{background: #fff; border: 2px solid #4d4d4d; border-radius: 60px; color: #4d4d4d; display:inline-block; max-width: 300px; padding: 5px 30px; text-align: center; margin:0 auto; cursor: pointer; transition: .2s}
.btn a i{padding-left:1em;}
.btn a:hover {background: #4d4d4d; color: #ffffff;}
.btn a:hover i{color:#fff;}
.title-main{text-align:center; width:100%; display:flex;  flex-flow: column; margin-bottom:3em;}
.title-main svg{width:120px; height:60px;  margin:0 auto 0.5em;}
.title-main h2{position: relative; display: inline-block; margin-bottom: 1em;}
.title-main h2:before {content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 3px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#cec28e; border-radius: 2px;}
.title-main h3{font-size:1em;}

.list-bg02{display:flex; width:100%; max-width:1020px; gap:1em; margin:5em auto 5em; padding:0;}
.list-bg02 li{width:calc((100% - 2em) / 3); background:#fcf9f4; text-align:center;}
.list-bg02 li h4{margin:1.5em auto; font-size:1.8em; line-height:1.4em;}
.list-bg02 li .oneline{line-height:2.8em;}
.list-bg02 p{display:block; width:80%; margin:0 auto 1.5em; text-align:left;}

#page-main_title{background:#fcf9f4; padding:6em 0; width:100%;}
@media screen and (max-width: 768px) {
	.contents_inner_1020{width:100%; max-width:1020px; margin:0 auto; padding:100px 5%;}
	.contents_inner_760{width:100%; max-width:760px; margin:0 auto; padding:100px 5%;}
#page-main_title{background:#fcf9f4; padding:6em 0 2em; width:100%;}
.contents_inner_1020 .title-text{width:100%; display:block; margin:0 auto 1em;}
.list-bg02{display:block; width:100%; max-width:1020px; gap:1em; margin:5em auto 5em; padding:0;}
.list-bg02 li{width:100%; background:#fcf9f4; text-align:center;padding-bottom: 1em;
        margin-bottom: 2em;}
}



.tab_link{background:#4d4d4d; border-radius:50px; padding:3px  10px; color:#fff; font-size:80%; margin-left:1em;}
.tab_link a{color:#fff;}

.page-contents_title{font-size:2em; line-height:1.6em; margin-bottom:2em;}
/*ヘッダー*/
header{background:#fff;}
.head-inneer{width:100%; display:flex; justify-content: space-between; height:100px; padding:0;}
.head-inneer li{padding:10px; height:100px;}
.head-inneer img{height:100%; width:auto;}
.head-menu ul{display:flex; font-weight:bold;}
.head-menu li{position:relative;}
.head-menu li a:hover{color:#cec28e;}
.head-menu ul a{color:#4d4d4d;}
.head-menu ul i{padding-right:10px;}
.head-menu ul li a{line-height:60px;}

.head-menu .sub-menu {
    position: absolute;
	top: 80px; flex-wrap:wrap;
    left: 0;
    overflow: hidden;
    width: 400px;
    height:0;
    transition: .8s;
    transform: translateY(0);
    opacity: 0;    border-bottom: 1px solid #ddd; z-index:100;
  }
.head-menu li:hover .sub-menu {
    height: auto;
    transform: translateY(0);
    opacity: 1;
  }
 
.head-menu .sub-menu li{
    display: block;
	width:50%; height:100%; line-height:60px;
    margin-left: 0;
    padding: 0 1em;

    background-color:#fff;
  }
 
.head-menu ul .menu-btn a{background: #4d4d4d; border: 2px solid #4d4d4d; border-radius: 60px; color: #fff; display:inline-block; max-width: 300px; padding: 5px 30px; text-align: center; line-height:2.4em;  margin:0 auto; cursor: pointer; transition: .2s; }
.head-menu ul .menu-btn a:hover {background:#fff; color:#4d4d4d;}
.menu-btn a:hover i{color:#4d4d4d;}

.st-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 40px;
    padding-right: 145px;
    padding-bottom: 40px;
    padding-left: 50px;
    position: relative;
}


/*メインビジュアル*/
#main-visual{position:relative; width:100%; padding:0; height:100vh; max-height:100vh;overflow:hidden;}
#main-visual img{position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); }
#main-visual .catchcopy{position:absolute; top:13%; left:17%; z-index:10;}
#main-visual .catchcopy h1{display: inline;	box-decoration-break: clone; -webkit-box-decoration-break: clone; font-size:3em; padding:0 10px;	line-height: 2; background:#70652d; color:#fff;}
#main-visual .catchcopy h2{font-size:2em; background:#70652d; color:#fff; margin-top:20px; padding:10px;}

@media screen and (max-width: 768px) {
#main-visual{position:relative; width:100%; padding:88% 0 0 0; height:auto; max-height:auto;overflow:hidden; margin-top:60px;}
#main-visual img{position:absolute; top:0; left:0; transform:translate(0, 0); }
#main-visual .catchcopy{position:absolute; bottom:0; left:5%; z-index:10;}
#main-visual .catchcopy h1{display: inline;	box-decoration-break: clone; -webkit-box-decoration-break: clone; font-size:1.5em; padding:0 10px;	line-height:2em; background:#70652d; color:#fff;}
#main-visual .catchcopy h2{font-size:1em; background:#70652d; color:#fff; margin-top:0; padding:0;}
}

.front-company{background-image:url(http://sumaino-y.com/2026cms/wp-content/uploads/topcompany-fig-01.jpg); background-size:100%; color:#fff;}
.front-company svg path {fill: #fff;}
@media screen and (max-width: 768px) {
	.front-company{background-size:cover;}
}

.front-news{display:flex; margin-bottom:1em;}
.front-news li:first-child{width:20%;}
@media screen and (max-width: 768px) {
.front-news{display:block; width:90%; margin:0 auto 1em; border-bottom:1px solid #cec28e; padding-bottom:1em;}
.front-news li:first-child{width:100%;}
}

.tp-contents_main{text-align:center;}
.tp-contact_tel{text-align:center; margin-bottom:2em;}
.tp-contact_tel-num{display:block; font-size:300%; line-height:2em;}
.tp-contact_tel-num a{color:#4d4d4d;}


/*シングルページ用デザイン*/
.title_data{text-align:center;}
.title_data ul{display:table; margin:0 auto; gap:10px;}
.title_data ul li{display:table-cell; padding:10px;}

/*アバウトページ設定*/
.about01, .about02{display:flex; padding:0; gap:2em; margin-top:6em; margin-bottom:2em;}
.about01:first-child{margin-top:0;}
.about01 li, .about02 li{width:calc((100% - 40%) - 2em);} 
.about01 .about-img, .about02 .about-img{width:40%;} 
.about02{flex-direction: row-reverse;}
.about01 li h3, .about02 li h3{font-size:1.4em; text-align:left;} 
@media screen and (max-width: 768px) {
	.about01, .about02{display:block; width:90%; margin:0 auto 3em;}
.about01 li, .about02 li{width:100%;} 
.about01 .about-img, .about02 .about-img{width:100%;} 
}

/*サービスページ*/
.service-list{display:flex; flex-wrap:wrap; gap:2em; justify-content: center;}
.service-list li{width:calc((100% - 4em) / 3); background:#fff; padding:2em;}
.service-list li img{width:70%; display:block; margin:0 auto;}
.service-list li h3{font-size:1.2em; margin:1em 0;}
.service-list_02{display:flex; flex-wrap:wrap; gap:2em; justify-content: center;}
.service-list_02 li{width:calc((100% - 4em) / 3); background:#fcf9f4; padding:2em;}
.service-list_02 li img{width:70%; display:block; margin:0 auto;}
.service-list_02 li h3{font-size:1.2em; margin:1em 0;}
@media screen and (max-width: 768px) {
.service-list{width:90%; margin:0 auto; padding:0;}
.service-list_02{width:90%; margin:0 auto; padding:0;}		
.service-list li{width:100%; background:#fff; padding:2em;}
.service-list_02 li{width:100%; background:#fcf9f4; padding:2em;}	
}
/*施工事例一覧ページデザイン*/
.list-works{display:flex; flex-wrap:wrap; gap:3em;}
.list-works li{width:calc((100% - 3em) / 2); text-align:left;}
.list-works li img{margin-bottom:1em;}
.list-works li p{font-size:1em; font-weight:bold;}
.list-works li h3{text-align:left;}
.list-works li ul{display:flex; padding:0;justify-content:  flex-start; }
.list-works li ul li{text-align:left; width:auto;}

@media screen and (max-width: 768px) {
.list-works{display:block; width:90%; margin:0 auto; padding:0;}
.list-works li{width:100%; text-align:left;}
}

#works_inneer h1{font-size:2em; margin-bottom:3em;}
#works_inneer h2{font-size:1.8em; margin-bottom:2em; text-align:left;}
#works_inneer h3{font-size:1.6em; margin-bottom:1em; text-align:left;}
#works_inneer h4{font-size:1.4em; margin-bottom:1em; text-align:left;}
#works_inneer h5{font-size:1.2em; margin-bottom:1em; text-align:left;}
#works_inneer p{line-height:1.4em; margin-bottom:1.6em;} 

.contents_inner_760 h1{font-size:2em; margin-bottom:3em;}
.contents_inner_760 h2{font-size:1.6em; margin-bottom:1em; margin-top:2em; text-align:left; background:#fcf9f4; padding:5px 10px;}
.contents_inner_760 h3{font-size:1.4em; margin-bottom:1em; text-align:left; border-bottom:1px solid #4d4d4d; padding-left:10px;}
.contents_inner_760 h4{font-size:1.4em; margin-bottom:1em; text-align:left;}
.contents_inner_760 h5{font-size:1.2em; margin-bottom:1em; text-align:left;}
.contents_inner_760 p{line-height:1.8em; margin-bottom:1.6em;} 

.column-eria img{width:80%; display:block; margin:0 auto 2em;}
.mokuji{width:100%; padding:2em; background:#fcf9f4; border:1px solid #cec28e;}
.mokuji::before {
	content: "\3010\76EE\6B21\3011";}
/*会社案内*/
dl{margin:0; padding:0;}
.cp-outline {border-top: 1px solid #cec28e;}
.cp-outline_item {display: flex; border-bottom: 1px solid #cec28e;}
.cp-outlin_head {display: flex; align-items: center; justify-content: center;  width: 250px; padding-top: 1.25rem; padding-right: .5rem; padding-bottom: 1.25rem; padding-left: .5rem; --viewport-from: 476; --font-size-from: 16; --viewport-to: 992; --font-size-to: 20; --max-font-size: 20; line-height: 1.6; text-align: center; background-color:#f5f3e8;}
.cp-outline_body {width: calc(100% - 250px); padding-top: 1.25rem; padding-right: 2rem; padding-bottom: 1.25rem; width: calc(100% - 250px); --viewport-from: 476; --font-size-from: 16; --viewport-to: 992; --font-size-to: 20; --max-font-size: 20; line-height: 1.6;}

@media screen and (max-width: 768px) {
	.cp-outline_item {display:block; width:100%;}
	.cp-outline{width:90%; margin:0 auto;}
	.cp-outlin_head {width:calc(100% - 2em); text-align:left; padding:1em; display:block;}
	.cp-outline_body {width:calc(100% - 2em); text-align:left; padding:1em; display:block; margin:0;}
}

/*スマホ用ヘッダー*/
.head-sp{position:fixed; z-index:100; top:0; height:54px; background:#fff; width:100%; text-align:center; display:flex;}
.sp-menu{width:25%;}
.sp-logo{width:50%; line-height:1.4em; padding-top:5px;}
.sp-btn{width:25%;}
.sp-btn .btn{font-size:0.6em; margin-top:10px; padding:0;}
.sp-menu_inneer{width:80%; margin:0 auto; padding:0;}
.sp-menu_inneer li{width:100%; border-bottom:1px solid #cec28e; line-height:2.6em;}
.sp-menu_inneer li a{line-height:1.6em;}
.sp-menu_foot{width:80%; margin:1em auto; text-align:left;}
.sp-menu .btn{width:100%; display:block; text-align:center; background:#4d4d4d; color:#fff; border-radius:50px; line-height:3em;}
.sp-menu nav .sp-logo{width:80%; margin:0 auto 1em;}
.sp-menu_inneer a{color:#4d4d4d; width:100%;}
/*スマホ用ドロワーメニュー設定*/
.l-header {
  display: block;
  z-index: 100;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width:40px;
	height:40px;
}



.c-hamburger {
	border: none;
	background:none;
  position: relative;
 width: inherit;
  height: inherit;
  margin: 0;
  cursor: pointer;
	width:40px; left:10px; top:6px;

}


.c-hamburger span {font-family :"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
  display: block;
  position: relative;
  left: 50%;
  width: 30px;
  height: 1px;
  transform: translateX(-50%);
  background: #4d4d4d;
  transition: all 0.4s;
}


.c-hamburger span:nth-of-type(2) {
  top: -4px;
}

.c-hamburger span:nth-of-type(3) {
  top: 1px;
}


.c-hamburger span:nth-of-type(4) {
  top: 6px;
}


.c-hamburger .c-hamburger__text {
  display: block;
  top: 12px;
  background: transparent;
  color: #4d4d4d;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}


.c-hamburger.is-active .c-hamburger__text {color:#f0f0f1;
}
.c-hamburger.is-active span:nth-of-type(2) {
  top: 0;
  transform: translateX(-50%) rotate(225deg);
	  background: #4d4d4d;
}


.c-hamburger.is-active span:nth-of-type(3) {
  opacity: 0;
}


.c-hamburger.is-active span:nth-of-type(4) {
  top: -4px;
  transform: translateX(-50%) rotate(-225deg);
	  background: #4d4d4d;
}

.p-header__nav {
  display: flex;
  z-index: 999;
  position: absolute;
left:-100%;
  top: 0;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
 /* background:#4d4d4d;*/
  font-weight: 700;
  opacity: 0;
 transition: 0.2s;overflow-y:scroll;
}



.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  padding: 13px 20px;
}


.p-header__hamburger {
  z-index: 1000; width:40px; height:40px;
  position: absolute;
  top:0; left: 0;}



.p-header__nav.is-active {
  position: fixed;
  top: 0;
  left: 0;
  background:#f5f3e8;
  opacity: 1;
  transition: 0.4s;
}

.p-nav {
  padding-top: 72px;
  padding-bottom: 72px;
}

.p-nav__list {
  display: block;
  width: 100%;
/*  padding-right: 20px;
  padding-left: 20px;*/
  background:#4d4d4d;
}



.p-nav__item {
  position: relative;
  width: 100%;
}

.p-nav__link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
}

/*フッター*/
footer{background:#70652d; color:#fff; padding:5em 0 0;}
.foot-inneer{width:100%; max-width:1020px; margin:0 auto 1.5em; border-bottom:1px solid #fff; padding-bottom:1.5em;}
.foot-inneer ul{display:flex; padding:0; gap:3em;}
.foot-inneer ul li{width:calc((100% - 3em) / 2);}
.foot-inneer h1{font-size:1.2em; margin-bottom:1em;}
.foot-inneer h2{font-size:2.2em; margin-bottom:1em;}
.foot-menu{width:100%; max-width:1020px; margin:0 auto; padding:0; display:flex; gap:5em; font-weight:bold; margin-bottom:1em;}
.foot-menu a{color:#fff;}
.foot-menu li{width:calc((100% - 20px) / 5);}
@media screen and (max-width: 768px) {
	.foot-inneer{width:90%; margin:0 auto;}
	.foot-inneer ul{display:block;}
	.foot-inneer ul li{width:100%;}
	.foot-menu{width:90%; margin:0 auto; display:block; margin-top:2em;}
	.foot-menu li{width:100%;}
}
.copyright{text-align:center; width:100%; background:#4d4d4d; padding:5px; font-size:0.8em; margin-top:5em;}

.sp-foot-btn{background:#70652d; position:fixed; bottom:0; z-index:999999; display:block; text-align:center; width:100%;transition: .5s; color:#fff; padding:10px 0 2em; font-size:1em;}
.sp-foot-btn.hide{transform: translateY(100%);}
@media screen and (min-width: 769px) {

	.sp-foot-btn{display:none;}
}
.fm-main{width:85%; margin:0 auto;}
.fm-main input{line-height:3em; margin-bottom:1em;}
.fm-main textarea{width:100%;}
.sw-rounddutton{text-align:right;}

.foot-size_btn{position:fixed; background:#cec28e; border-radius:50%; width:100px; height:100px; bottom:2em; right:2em; text-align:center; color:#4d4d4d; font-weight:bold; font-size:90%; padding:10px;}
.foot-size_btn i{font-size:300%;}
.foot-size_btn:hover{background:#4d4d4d;}
@media screen and (max-width: 768px) {
	.foot-size_btn{display:none;}
}