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


スマホページ用


-------------------------------------------------------------------------------------*/


/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:1024px){
}




/* ●px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width:1024px){

*{box-sizing: border-box;}
body{}

body{
	position:static;
	}


/*表示・非表示*/
.sp_none{ display:none !important;}
.sp_only{ display:block;}
#pc_header{ display:none; }

body,
#wrapper,
#contents
{ padding:0 !important; margin:0 !important;}

#wrapper{
overflow: hidden;
}

.slider,
.slider_bottom{display:none}

.business_bnr_pc{display:none}
	
/*幅関係*/


html,
body,
#wrapper,
#contents,
#container,
#footer,
#footer_inner,
.copy
{
	width:100% !important;
	padding:0;
	}



img{ width:100%; height:auto;}


.sp_on{display:block;}	
.sp_w50 img{ width:49%;}
.img85 img{ width:85%;}




/*ヘッダー*/
	
#sp_header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 20px;
}
#sp_header img{
  height: 100%;	
}
	
.header_logo {
 width:40%;
 height: auto;
 max-height: 50px;
 margin-top:14px;
 padding-left: 20px;
}
.header_logo img{
 max-height: 50px;
 width: auto;
}

.header_contact {
	width: 120px;
	float:right;
	margin-top: 10px;
}

.sp_tel{
	width: 50px;
	height: 50px;
	margin-right: 10px;
	padding: 5px;
	float:left;
  background:#94AC3A;
  border-radius: 5px;
	}
.sp_mail{
	width: 50px;
	height: 50px;
	margin-right: 10px;
	padding: 5px;
	float:right;
  background:#94AC3A;
  border-radius: 5px;
	}
	

/* フッター
------------------------------------------------- */

#footer {
    position:  relative;  
    background-color: #94AC3A;
    border-radius: 200% 200% 0 0 / 30% 30% 0 0;
    margin: 16px 0 0 0;
    padding: 0;
	height: auto;
    min-height: auto;
    text-align: center;
	margin-top: 20px;
}


#footer_area{
width: 100%;
height: auto;
margin: 0 auto;
}

#footer_leaf{
	position: absolute;
	top:200px;
	left:-80px;
}
#footer_leaf img{
	width: 70%;
	}
#footer_house{
	display: none;
}

#footer_logo{
width: 80%;
height: auto;
margin: 0 auto;
margin-bottom: 30px;
padding-top: 20px;
}

#footer_logo img{
width: 80%;
height: auto;
}


.footer_navi{
width: 80%;
height: auto;
margin: 0 auto;
flex-shrink: 0;
border-radius: 30px;
background: rgba(255, 255, 255, 0.50);
display: table;
margin-bottom: 30px;

}

.footer_navi ul{
	width: 100%;
	margin: 0 auto;
   display: flex;
  flex-flow: column;
   padding-top: 10px;
   padding-bottom: 10px;
}

.footer_navi li {
   padding-top: 20px;
}

.footer_navi a {
	color: #402D1D;
 text-decoration: none;
}
.footer_navi a:hover {
	color:#A21517;
 text-decoration: none;
}

.footer_copy {
text-align: center;
font-size: 15px;
line-height: auto; 
	padding-bottom: 10px;
}


	
	
	

/* メインコンテンツ
------------------------------------------------- */

#main_area{
    position:  relative;  
	width:100%;
    max-width: 100%;
	margin: 0 auto;
	padding:0 1%;
}


#main_area_l{
	float: left;
	width:100%;
	height: auto;
}
	

#main_area_l img{
	opacity: 0.5;
	height: 500px;
	object-fit: none;
	}

#main_area_r{
	position: absolute;
	top:160px;
    right:10px;
	width:100%;
	height: auto;
}


.main_txt01{
	text-align: center;
text-shadow: 1px 2px 3px #ffffff;
 position: relative;
	font-size:36px;
	margin-bottom:50px;
  opacity: 0; /* 初めは透明に設定 */
  transform: translateY(100%); /* 下からスライドするために位置を下に設定 */
  animation: fadeInFromBottom 1s forwards; /* フェードインアニメーションの設定 */
}
@keyframes fadeInFromBottom {
  to {
    opacity: 1; /* アニメーション終了時に完全に表示 */
    transform: translateY(0); /* アニメーション終了時の位置 */
  }
}


.main_txt02{
	text-align: center;
text-shadow: 1px 2px 3px #ffffff;
	font-size:16px;
    font-weight: 400;
	line-height: 180%;
	margin-left: 40px;
	
}
#contents {
	width:100%;
    max-width: 1440px;
	margin: 0 auto;
	clear: both;
	padding:0 20px;
}
* html #contents {
	zoom: 1;
}
*+html #contents {
	zoom: 1;
}
#contents:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

.top_area{
    opacity: 1; /* 最初は非表示にしておく */
    transition: all 2s; /* 動きを滑らかに */
}
/* フェードイン用のクラス */
.fadeIn {
    opacity: 1;
}	


.top01_area{
	width:100%;
	height: auto;
	margin: 0 auto;
	margin-top: 80px;
	border-top:solid 1px #DCD0D0;
	border-bottom: solid 1px #DCD0D0;
	background: url("../img/top_trust.png") no-repeat right bottom;
	background-size: 45%;
}


.top02_area{
	width:100%;
	height: auto;
	margin: 0 auto;
	border-bottom: solid 1px #DCD0D0;
	background: url("../img/top_management.png") no-repeat right bottom;
	background-size: 90%;
}

.top02_txt_area{
	padding-left: 0;
	float: none;
}

.top03_area{
	width:100%;
	height: auto;
	margin: 0 auto;
	border-bottom: solid 1px #DCD0D0;
	background: url("../img/top_partner.png") no-repeat right bottom;
	background-size: 70%;
}


.top_inner{
	padding: 70px 20px;
}


.top_title{
	font-size:26px;
	line-height: 120%; 
}

.top_txt,.top_txt2{
	width:100%;
	height: auto;
	padding-top: 30px;
	font-size:16px;
	font-weight: 400;
    line-height: 180%;
}

.top_link_r{
	text-align: right;
}
.top_link_l{
	text-align: right;
}

.top_link{
    margin-top: 30px;
	  position: relative;
    /*形状*/
    display: inline-block;
    padding: 0 20px;
    color: #402D1D;
	font-size:14px;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.top_link::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
  position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
  background:#402D1D;
    /*アニメーションの指定*/
    transition: all .3s;
}

.top_link::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
  background:#402D1D;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.top_link:hover::before{
    left:20%;
}

.top_link:hover::after{
    right:-5%;
}


.works{
	width:100%;
    max-width: 1440px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 30px;
}

.works_ttl{width:100%;
    max-width: 1440px;
	margin: 0 auto;
	clear: both;
	font-size:16px;
	text-align: center;
   letter-spacing: 0.4em;
	margin-bottom: 20px;
}


.works_list{
	width: 100%;
    padding:0;
    list-style:none;
}
	

.works_list li{
	width: 100%;
	height: auto;
	float:none;
	padding: 0 30px;
	text-align: center;
}


.works_list img{
   width: 100%;
	height: auto;
    object-fit: cover;	
}


.works_name{
	color: #402D1D;
	font-size:16px;
	line-height: 100%;

}




.works_bf{
    float: left;
	width: 100%;
}

.works_af{
	float: right;
	width: 100%;
	text-align: right;
	margin-bottom: 20px;
}


	
	
/* 下層ページ
------------------------------------------------- */
h1{width:100%;
    max-width: 1440px;
	margin: 0 auto;
	clear: both;
	font-size:16px;
	text-align: center;
   letter-spacing: 0.4em;
	padding-bottom: 30px;
}



#title_area {width:100%;
    max-width: 1440px;
	margin: 0 auto;
	clear: both;
	padding-top:40px;
	text-align: center;
}


.title {
    display: inline-block;
    font-size: 2rem;
    font-family: "Josefin Sans";
    letter-spacing: -0.15rem;
    animation: text-animation 0.8s forwards;
    transform: rotateY(90deg);
}

h2{width:100%;
    max-width: 1440px;
	margin: 0 auto;
	clear: both;
	font-size:20px;
	text-align: center;
   letter-spacing: 0.4em;
	padding-bottom: 20px;
}

@keyframes text-animation {
    0% {
        transform: rotateY(90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}




/* *******************************************
	オーナー様向け
******************************************* */

.owners_area {
	margin-bottom: 0;
}


.owners_txt_area{
	width: 100%;
	margin-bottom: 40px;
}


.owners_txt{
    width: 92%;
	margin: 0 auto;
	height: auto;
	margin-bottom: 30px;
	text-align: center;
	line-height: 200%;
	font-weight: bold;
}

.fluid_area01{
    width: 100%;
	margin: 0 auto;
	height: 500px;
	margin-bottom: 20px;
}
	
.fluid_area02{
    width: 100%;
	margin: 0 auto;
	height: 360px;
	margin-bottom: 20px;
}
	
.fluid01 {
  width:100%;/*横幅*/
  height: 70vw;/*縦幅*/
  background:#ecf5ce;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
}


.fluid02 {
  width:100%;/*横幅*/
  height: 50vw;/*縦幅*/
  background:#ecf5ce;/*背景色*/
  animation: fluidrotate2 30s ease 0s infinite;/*アニメーションの設定*/
}




.owners_ttl01{
    width: 100%;
	padding: 60px 30px 20px;
	font-size:30px;
	font-weight: bold;
}
.owners_ttl01:before {
  content: url('../img/owners01.svg');
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-top: 10px;
  margin-right: 10px;
}

.owners_ttl02{
    width: 100%;
	padding: 60px 30px 20px;
	font-size:30px;
	font-weight: bold;
}

.owners_ttl02:before {
  content: url('../img/owners02.svg');
  display: inline-block;
vertical-align: bottom;
  width: 32px;
  height: 32px;
}

.owners_ttl03{
    width: 100%;
	padding: 60px 30px 20px;
	font-size:30px;
	font-weight: bold;
}
.owners_ttl03:before {
  content: url('../img/owners03.svg');
  display: inline-block;
vertical-align: bottom;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.owners_contents{
    width: 92%;
	margin: 0 auto;
	height: auto;
	padding-left: 40px;
	margin-bottom: 50px;
	font-size:16px;
	line-height: 150%;
}



/* *******************************************
	施工事例
******************************************* */

.works_area {
    overflow: hidden; 
    width: 92%;
	margin: 0 auto;
	height: auto;
	border: 1px solid #ccc;
	padding: 10px 20px;
	text-align: left;
	margin-bottom: 50px;
}

.works_title {
    padding: 14px;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}



.works_img { 
    float:none;
    width: 100%;
	height: auto;
	padding-left: 0;
	padding-top: 20px;
	
}

.works_img_s {
    float:none;
    width: 100%;
	height: auto;
	padding-top: 10px;
}

.works_img_ss {
    float: left;
    width: 48%;
	height: auto;
	margin-left: 0;
	margin-right:2%;
	margin-bottom: 20px;
}


.works_r{
    float:none;
    width: 100%;
	height: auto;
	margin-top: 20px;
	margin-right: 0;
}


.works_access_t{
	font-weight: bold;
	padding-left: 4px;
}

.works_access{
	border-top: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
	padding: 4px;
}

.works_comment{
	padding: 10px;
	margin: 30px 0;
	background: #ffffff;
	font-size:0.9em;
}	
	
.works_bfaf{
	clear: both;
	margin: 0;
}	

	
/* *******************************************
	会社概要
******************************************* */
	

.company_area{
	margin-top: 50px;
}
.company_inner{
	width: 92%;
	margin: 0 auto;
}

dl.company_info {
	border-bottom:1px solid #868695;
	width:100%;
	margin-bottom:10px;
	padding-bottom:5px;
}
dl.company_info dt {
	width: 100%;
	float:none;
	color:#185630;
	font-size:16px;
	font-weight:bold;
	text-align: center;
	padding-left: 0;

}
dl.company_info dd {
	float:right;
	width:100%;
	text-align: center;
}


	

/* *******************************************
	お問い合わせ
******************************************* */

.smf-item__label__text{
	font-size:18px;
	line-height: 180%;
	float: left;
}
	
.smf-item__description{
	font-size: 0.75em;
    font-weight: normal;
	color: #fff;
	text-align: left;
    background: #c91744;
	margin: 0px;
	padding: 4px 10px;
	margin-left:10px;
}
	
	
.contact_area{
	width: 96%;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 50px;
}

.contact_txt{
	width: 92%;
	margin: 0 auto;
	font-size:16px;
	line-height: 180%;
	text-align: center;
	margin-bottom: 30px;
}
	
table.contact_tbl {
    width: 92%;
	margin-bottom: 20px;
    table-layout: fixed;
    margin: 0 auto;
    font-size:  16px;
    border-collapse: collapse;
}

table.contact_tbl  tr {
    border: 1px solid #b4b4b4;
}

table.contact_tbl th,
table.contact_tbl td {
	display: block;
    padding: 10px;
}

table.contact_tbl th {
    width: 100%;
	background:#F0EEE3;
    text-align: left;
	font-size:14x;
	font-weight: bold;
	padding: 10px;
}

table.contact_tbl td {
    width: 100%;
	background: #ffffff;
	padding: 2%;
    text-align: left;
}

.hissu {
	font-size: 0.75em;
    font-weight: normal;
	color: #fff;
	text-align: left;
    background: #c91744;
	margin: 0px;
	padding: 4px 10px;
	margin-left:10px;
}

table.contact_tbl input[type="text"], input[type="tel"], input[type="mail"]{
    width: 100%;
	height: 36px;
	font-size:18px;
	line-height: 20px;
    border: 1px solid #ddd;
}


table.contact_tbl textarea {
    width: 100%;
    resize: vertical;
	font-size:20px;
	line-height: 24px;
    border: 1px solid #ddd;
}

table.contact_tbl .tel_num {
    width: 100%;
    border: 4px solid #2ca9e1;
    padding: 20px;
	margin-bottom:50px;
	margin-left:40px;
}

	

table.contact_tbl .privacy {
    font-size: 16px;
    line-height: 120%;
    text-align: justify;
    overflow: scroll;
    width: 96%;
    height: 200px;
    background: #f7f6f2;
    /*margin: 5px;*/
    padding: 10px 20px;
    border: 1px solid #ddd;
}



	
}	
	
	
/* タブレット系　*/

/* 幅600px以下から  
------------------------------------------------------------*/
@media only screen and (max-width: 600px){

	

	

}




/* 幅414px以下から iphone6& plus
------------------------------------------------------------*/
@media only screen and (max-width: 414px){





	

}




/* 幅320x以下から ヘッダー等微調節 iphone5
------------------------------------------------------------*/
@media only screen and (max-width: 320px){





}