@charset "utf-8";
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/**
 *
 *  芳澤建設のこだわり
 *
 */

/*--------------------------------------------------------------------------
   overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/
#pageHeader .lead{
	margin-bottom: 0;
	font-size: 124%;
	font-weight: normal;
}
#pageHeader .lead br{
	display: block;
}

/* #service
-----------------------------------------------------------------*/

.right {
	float: right;
	margin-right:10px;
	padding: 5px 0 5px 5px;
}

#service{
	padding: 20px 0px 50px;
	background: #fff;
	margin-top: 20px;
	/* background: url("https://yoshizawa.work/about/images/main_bg.svg") no-repeat 50% 50% ;
	background-position: right;  */
}
#service .wrap{
	position: relative;
/* 	background: #fff;*/
/*	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	*/
}

#service .note{
	margin: 1%;
	padding: 1%;
	width: 98%;
	margin-bottom:0px;
}
#service .note h2{
	font-size: 200%;
	font-weight: 500;
	text-align: center;
}


#service .note h2 span1{
	color: #098eb2;
	line-height: 1.9;
	font-weight: 500;
	font-size: 80%;
}

#service .note h2 span{
	color: #000;
	line-height: 1.9;
	font-size: 80%;
	font-weight: 500;
}

#service .note2{
	margin: 4%;
	padding: 1%;
	width: 90%;
	margin-bottom:0px;
	overflow: auto;
	border: 1px #999 solid;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	}

#service .note2 h2{
	margin: 40px 0 10px;
	color: #000;
	line-height: 1.9;
	font-size: 200%;
	font-weight: 500;
}


#service .note2 p{
	color: #000;
	line-height: 1.9;
	font-size: 120%;
	font-weight: 400;

}

#service .note2 img{
	margin: 0 auto;
	max-width: 800px;
}

.list_inner {
	width: 60%; 
	height:100%; 
	padding:10px;
	float: left;
}
.list_inner ul { margin-bottom: 5px;}/* 40　→ 20*/
.list_inner ul li {
	margin-bottom:15px;
	background: url("../images/joykos/mark-01.png") no-repeat no-repeat 0% 11%;
    padding-left: 25px;
    line-height: 1.2;
    font-size: 1.05rem;
 }


.list_inner img{
	width: 100%; }

.list_inner2 {
	width: 35%; 
	height:100%; 
	padding:10px;
	float: left;
}

.list_inner2 img{
	max-height: 300px;
}

.box_area{
	float: left;
	padding: 1%; 
}

.box_area img{
	width: 100%;
}

.box_wd60{
	width: 40%;
}

.box_wd50{
	width: 50%;
}

.box_wd40{
	width: 40%;
}


.box_wd30{
	width: 30%;
}


.bannerA img a:hober{
	padding: 0 0px;
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";}



.col_orange{
	color: #F15A24;
}

.col_green{
	color: #009245;
}

.col_blue{
	color: #0071BC;
}

.right {
	float: right;
	margin-right:10px;
	padding: 5px 0 5px 5px;
}



/* リスト
-----------------------------------------------------------------*/

.txt {

	width:100%;
	margin: 10px 0px 20px;
/*	border: 1px solid #ccc;
	padding: 5px;*/
}


 .txt p {
	font-size:10px;
	line-height:1.2em;
	padding-bottom:10px;
}
 .txt p.way {
	padding-top:15px;
	font-size:25px;
	font-weight: bold;
	color: #4f4f4f;
}

 .txt p.way_rblue {
	padding-top:10px;
	font-size:18px;
	font-weight: 500;
	color: #098eb2;
}
 .txt p.way_rgreen {
	padding-top:10px;
	font-size:18px;
	font-weight: 500;
	color: #098eb2;
}

 .txt p.way_orange {
	padding-top:10px;
	font-size:16px;
	font-weight: bold;
	color: #098eb2;
}

 .txt p.way_red {
	padding-top:10px;
	font-size:14px;
	font-weight: bold;
	color: #e93862;
}


 .txt p.sub {
	padding-top:5px;
/*	border-top:1px solid #CCC;*/
	font-size:12px;
	color: #00a56e;
}

 .txt hr.line01 {
border-top: 1px #00a56e solid;
}





.gaiyou {
	width:90%;
	margin: 0 auto;
	text-align: center;
	padding-top:30px;
	background: #fff;
}
.gaiyou p{
	font-size: 110%;
}

table.brwsr {
	width: 100%;
    font-size: 110%;
    border-collapse: separate;
    border-spacing: 0px 1px;
    margin-bottom:30px;
    padding: 0 3%;
    color: #1f0d00;
}

table.brwsr img{
	margin:0;
}

table.brwsr th {
    font-weight: 500;
    font-size: 110%;
    padding: 8px 0;
    padding-left:5px;
    vertical-align: middle;
    text-align: left;
    border-bottom: #1f0d00 1px solid;
    /*border-bottom: #999 1px solid;
    color: #fff;*/
}
 
table.brwsr td {
    padding: 8px 0;
    text-align: left;
    border-bottom: #1f0d00 1px solid;

}
table.brwsr th.r1 {
    width: 20%;
    text-align: left;
   /* border-right: #999 1px solid;
     background: #447791;*/
}

table.brwsr th.r2 {
    width: 15%;
    text-align: left;
   /* border-right: #999 1px solid;
     background: #447791;*/
}
table.brwsr th.r3 {
    width: 25%;
    text-align: left;
   /* border-right: #999 1px solid;
     background: #447791;*/
}

table.brwsr th.r4, 
table.brwsr th.r5, 
table.brwsr th.r6{
    width: 5%;
    text-align: center;
   /* border-right: #999 1px solid;
     background: #447791;*/
}

table.brwsr td.r1,
table.brwsr td.r2,
table.brwsr td.r3 {
	padding-left: 10px;
    text-align: left;
    font-size: 100%;
   /* border-left: #fff 1px solid;
    border-right: #999 1px solid;
    background: #5893b1;*/
}
 table.brwsr td.r4,
 table.brwsr td.r5,
 table.brwsr td.r6 {
    text-align: center;
    font-size: 100%;
   /* border-left: #fff 1px solid;
    border-right: #999 1px solid;
    background: #5893b1;*/
}

 table.brwsr td.r7{
 	padding-left: 10px;
  	width: 49%;
    text-align: left;
    font-size: 100%;
   /* border-left: #fff 1px solid;
    border-right: #999 1px solid;
    background: #5893b1;*/
}

 table.brwsr td.r8{
 	padding-left: 10px;
  	width: 10%;
    text-align: left;
    font-size: 100%;
   /* border-left: #fff 1px solid;
    border-right: #999 1px solid;
    background: #5893b1;*/
}

 table.brwsr td.r9{
 	padding-left: 10px;
  	width: 39.5%;
    text-align: left;
    font-size: 100%;
   /* border-left: #fff 1px solid;
    border-right: #999 1px solid;
    background: #5893b1;*/
}

 table.brwsr td.r10{
 	width: 1%;
    text-align: left;
    font-size: 100%;
   border-bottom:none;
}

.clearf {
    clear: both;
}


@media screen and (max-width:768px) {
}


@media screen and (max-width:670px) {

	
}


@media screen and (max-width:400px) {

	#service .note2 h2 {
	    margin: 40px 0 10px;
	    line-height: 1.5;
	    font-size: 150%;
	    text-align: center;
	}
	
	
	#service .note2 p{
		text-align: none;
	/* margin: 0 auto; */
	}
	
	
	#service .note2 img{
		margin: 0 auto;
		padding: 5%;
		width: 95%;
	}
	
	
}