/*===========================
additional css elements 
===========================*/

@font-face {
    font-family: 'hanaminaregular';
    src: url('../fonts/HanaMinA_weight.ttf') format('truetype');

}

.minchouFontClass {
	font-family: "hanaminaregular";
}

.catch.minchouFontClass span {
	font-weight: normal;
	font-size: 70%;
	color: #333;
	line-height: 1.5em;
	display: block;
}

.content  {
	border-bottom:#306CE9 2px solid;
}
.bgcolor3 {
	padding:50px 0;
	background-color:#fff;
	background-image:url(../img/common/bg_eco.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
.bgcolor3 .wrapper {
	width: 82%;
	min-width:83%;
	background-color: rgba(255, 255, 255, 0.7);
	padding:4%;
}
main h2.h2menu {
	font-size: 1.5em;
	border-bottom:#4288bc 2px dotted;
	padding-bottom:1em;
	margin-bottom:1em;
}

/* #telset .tel {
	letter-spacing: -0.1px;
}*/


.tel a {
	text-decoration:none;
}

.telNoDeco a {
	text-decoration:none;
	color:#FFF;
}

.telNoDeco {
	color:#FFF;
}

#bg-vis .catch2 {
	text-indent: -9999px;	
}

/* menu table*/


 table.table2-2 {
 width: 100%;
 margin-bottom:1em;
}
table.table2-2 tr {
 display: block;
}
table.table2-2 th {
 display: list-item;
 padding: 0;
 border-bottom: none;
 text-align: left;
 font-weight: normal;
 vertical-align: top;
 width: 100%;
 line-height: 1em;
 border:none;
 font-weight:bold;
}
table.table2-2 td {
 display: list-item;
 width: 100%;
 padding-bottom: 3%;
 margin-bottom: 3%;
 border-bottom: 1px #c9d4dc solid;
 font-weight: normal;
 padding: 5px 0 3% 0;
}

table td.add_bg {
	background-color:#e6ecf0
}


/* 地図複数の場合 */



#map_canvas2 {
	width:100%;
	height:380px;
	margin:0 auto;
	margin-bottom:20px;
}

#map_multi1 {
	width:100%;
	height:380px;
	margin:0 auto;
	margin-bottom:20px;
}

#map_multi2 {
	width:100%;
	height:380px;
	margin:0 auto;
	margin-bottom:20px;
}


/* 他 */

ul.liReseter  {
	line-height:1.8em;
	margin-left:15px;
}

ul.liReseter li {
	display:list-item;
	list-style-type: disc;
	list-style-position: outside;
	padding-left:-10px;
}

ul.liReseter2  {
	line-height:1.8em;
	margin:0 0 12px 30px;
}

ul.liReseter2 li {
	display:list-item;
	list-style-type: disc;
	list-style-position: outside;
	padding-left:-10px;
}

ul.liReseterFloat  {
	line-height:1.8em;
	margin-left:15px;
}

ul.liReseterFloat li {
	display:list-item;
	list-style-type: disc;
	list-style-position: outside;
	padding-left:-10px;
	float:left;
	padding-right:60px;
}


ol.liReseter {
	line-height:1.8em;
	margin-left:20px;
}

ol.liReseter li {
	display:list-item;
	list-style-type:decimal;
	list-style-position: outside;
	padding-left:-10px;
}

ol.liReseter2 {
	line-height:1.8em;
	margin:0 0 20px 50px;
}

ol.liReseter2 li {
	display:list-item;
	list-style-type:decimal;
	list-style-position: outside;
	padding-left:-10px;
}



.txt80{
	font-size: 80%;
}
.a3-3 .pic {
	text-align: center;
}
.a3-4 .pic {
	text-align: center;
}
.a3-3 .pic img {
	width: 80%;
}
.a3-4 .pic img {
	width: 80%;
}
.portfolio {
	width: 48%;
	margin-right: 1%;
	margin-bottom: 2em;
	margin-left: 1%;
	float: left;
}
.portfolio .pic {
	text-align: center;
}

.portfolio .pic img{
	width: 85%;
}


/* 特別 */

.clear{
	clear:both;
}

div.clear {
	height:0px;
	line-height:0;
	font-size:0;
}

.ex2 {
	padding-left: 1em; /*1em（1文字）分、右に動かす*/
	text-indent: -1em; /*最初の行だけ1em（1文字）分、左に動かす*/
	margin-bottom:3em;
	line-height:1.3em;
}
.a3-3 .pic .highslide img {
	height: auto;
	width: 85%;
}
.a3-4 .pic .highslide img {
	height: auto;
	width: 85%;
}




.layout-a1 .a4-1 {
	width:68%;
	float:left;
	padding-right: 2%;
}
.layout-a1 .a4-2 {
	width:30%;
	float: right;
}

.layout-a1 .a4-1 .info {
	max-height:200px;
	min-height:80px;
	overflow:auto;
}
.layout-a1 .a4-1 .info dl {
	width:100%;
	overflow:auto;
}
.layout-a1 .a4-1 .info dl dt {
	float: left;
	clear:left;
	width: 5.0em;
	margin:0;
	padding: 3px 0 3px 4px;
}
.layout-a1 .a4-1 .info dl dd {
	margin:0;
	padding: 3px 0 3px 5.5em;
}
/* レイアウトA-3 (2カラム　1：1)*/

.layout-a3 .a3-3 {
	float:left;
	width:49%;
}
.layout-a3 .a3-4 {
	float:right;
	width:49%;
}
/* レイアウトA-3 (2カラム　1：1)*/

.a3-3 {
	float:left;
	width:49%;
}
.a3-4 {
	float:right;
	width:49%;
}
.a3-5 {
	float:left;
	width:49%;
}
.a3-6 {
	float:right;
	width:49%;
}
.a3-5 .pic {
	text-align: center;
}
.a3-6 .pic {
	text-align: center;
}


.list1 li:after {
	background:#13c51c;
	top:4px;
}




.philosophy {
	font-size: 2em;
	line-height: 1.5em;
}


.w85 {
	width: 85%;
	margin-right: auto;
	margin-left: auto;
}
.L30 {
	margin-left: 30px;
}

.cap {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
.capL {
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 2em;
	padding-left: 2em;
}
ul.sns li {
	display: inline-block;
	vertical-align:top;
	margin-right: 5px;
}
ul li.facebook {
	line-height:0;
}
/* flow2 */
.flow dl dt {
	padding-top: 10px;
	padding-right: 1%;
	padding-bottom: 10px;
	padding-left: 1%;
	width: 16%;
	background-color: #5280CB;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	float: left;
	border: 1px solid #5280CB;
	margin-bottom: 15px;
}
.flow dl dd {
	margin-bottom: 15px;
	width: 78%;
	padding-top: 10px;
	padding-right: 1%;
	padding-bottom: 10px;
	padding-left: 1%;
	float: left;
	border: 1px solid #5280CB;
}
.arrow {
	/*margin: 0 auto 0;
	width: 90px;  領域確保 */
	/*height: 70px;  領域確保 */
	position: relative;
}
.arrow:after {
	border-top: 10px solid #FFC300; /* 角度を緩やかなものに指定 */
	border-left: 15px solid transparent; /* 左のボーダーを透過に指定 */
	border-right: 15px solid transparent; /*右のボーダーを透過に指定*/
	content: "";
	position: absolute;
	top: 45px; /* 四角形の高さと同じ物を指定 */
	left: 50%; /* 中央寄せに使用 */
	margin-left: -15px; /* 中央寄せに使用 */
	-webkit-filter:drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
	filter:drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
}
.arrow:last-child:after {
    border: none; /* 最後のボックスだけ三角形を表示しない */

}
/* flow2 */
.flow_balloon {
	position: relative;
	padding: 0.75em;
	background-color: #dae7fd;
	border-radius: 2px;
	box-shadow: 2px 2px 4px rgba(164, 189, 232, .1) inset;
	margin-bottom: 18px;
	margin-right: 10px;
	margin-left: 10px;
}
.flow_balloon::after {
	position: absolute;
	top: 100%;
	left: 50%;
	content: '';
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 15px solid #dae7fd;
	margin-left: -50px;
}
.flow_last {
	background-color: #acc4eb;
	box-shadow: 2px 2px 4px rgba(108, 142, 196, .1) inset;
	margin-bottom: 0px;
}
.flow_last::after {
	border: none;
	border-top: none;
}
.flow_balloon p {
	padding-right: 5px;
	padding-left: 10px;
}
.flow_balloon h3 {
	border-left-style: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	margin-bottom: 0.5em;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	line-height: 1em;
	color: #093E97;
	font-size: 1.3em;
	text-align: left;
}

/* flow3 */
.flow_balloon2 {
	position: relative;
	padding: 0.75em;
	background-color: #ffffff;
	border-radius: 2px;
	box-shadow: 2px 2px 4px rgba(164, 232, 170, .1) inset;
	margin-bottom: 40px;
	margin-right: 10px;
	margin-left: 10px;
	border: 3px solid #b0fbb0;
}
.flow_balloon2::after {
	position: absolute;
	bottom: -78px;
	left: 50%;
	content: '';
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 15px solid #f9c569;
	margin-left: -50px;
}
.flow_last2 {
	background-color: #e0fae3;
	box-shadow: 2px 2px 4px rgba(167, 232, 164, .1) inset;
	margin-bottom: 0px;
}
.flow_last2::after {
	border: none;
	border-top: none;
}
.flow_balloon2 p {
	padding-right: 5px;
	padding-left: 10px;
}
.flow_balloon2 h3 {
	border-left-style: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	margin-bottom: 0.5em;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	line-height: 1.3em;
	color: #0c9709;
	font-size: 1.3em;
	text-align: left;
}

/* flow4 */
.flow_balloon3 {
	position: relative;
	padding: 0.75em;
	background-color: #ffffff;
	border-radius: 2px;
	box-shadow: 2px 2px 4px rgba(164, 232, 170, .1) inset;
	margin-bottom: 20px;
	margin-right: 10px;
	margin-left: 10px;
	border: 3px solid #b0fbb0;
}
.flow_balloon3::after {
	position: absolute;
	bottom: -71px;
	left: 50%;
	content: '';
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 15px solid #f9c569;
	margin-left: -50px;
}
.flow_last3 {
	background-color: #e0fae3;
	box-shadow: 2px 2px 4px rgba(167, 232, 164, .1) inset;
}
.flow_last3::after {
	border: none;
	border-top: none;
}
.flow_balloon3 p {
	padding-right: 5px;
	padding-left: 10px;
}
.flow_balloon3 h3 {
	border-left-style: none;
	border-bottom-style: none;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	line-height: 1em;
	color: #0c9709;
	font-size: 1.3em;
	text-align: center;
	border-top-style: none;
	border-right-style: none;
	margin-bottom: 0px;
}

.ex_flow {
	padding-left: 1em;
	text-indent: -1em;
	display: block;
}

.catchcopy {
	font-weight:normal;
	font-size:1.2em;
	margin-bottom:0.6em;
	color:#090;
	letter-spacing: 1px;
}

/* テーブルを横スクロール */
table {
	width: 100%;
}
/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
	overflow: auto;
	white-space: nowrap;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
 height: 5px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}

.td_middle {
	vertical-align:middle;
}

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

	 #map_canvas2 {
	width:300px;
	height:300px;
}
.layout-a1 .a4-1 .info dl {
	margin: 0 0 1.5em 0;
}
.layout-a1 .a4-1 .info dl dt {
	float: none;
	clear:both;
}
.layout-a1 .a4-1 .info dl dd {
	margin:0;
	padding: 3px 0 3px 0;
}



/* table調整 */


.add1 {
	height:150px;
}

.add1 td {
	vertical-align:middle;
	
}

.add1 th {
	width:30%;
}

th.add3 {
	text-align:left;
}


.add1 th.add3 {
	width:60%;
}


/* リスト追加 */


.admit {
	border:2px #c9d4dc solid;
	padding:30px;
}

.admit li {
	float:left;
	width:25%;
	line-height:2.5em
}

.admit li span {
	width:80px;
	display:block;
	float:left;
}


 }



 @media screen and (max-width: 768px) {
	 .admit li {
	float:left;
	width:auto;
	line-height:2.5em;
	min-width:180px;
}

.admit li span {
	width:auto;
	margin-right:1em;
	display:block;
	float:left;
}

#footer .inq-set .txt {
	color:#FFF;
	font-size:1.1em;
	padding:5px 1% 0 0;
	margin-bottom:15px;
}

.layout-a1 .a4-1 {
	width:100%;
	float:none;
	padding:2em 0 0;
}

.layout-a1 .a4-1 .info {
	margin: 0 0 1.5em 0;
	width:100%;
	overflow:visible;
	height:auto;
	max-height:none;
}
.layout-a1 .a4-1 .info dl {
	overflow:visible;
}

.layout-a1 .a4-2 {
	width:100%;
	margin-right: auto;
	margin-left: auto;
	float: none;
	text-align:center;
}
.layout-a3 .a3-3 {
	float:left;
	width:49%;
	margin-bottom:1em;
}
.layout-a3 .a3-4 {
	float:right;
	width:49%;
	margin-bottom:1em;
}

.portfolio  {
	width:100%;
	margin-right: auto;
	margin-left: auto;
	float: none;
	text-align:center;
}
.L30 {
	margin-left: none;
}
}




/* ////// arra-ez responsive set --- please custom as you like //////////////////////////  */
 
.shell { display: flex; flex-direction:row; flex-wrap:wrap; }
.shell.reverse { display: flex; flex-direction:row-reverse; flex-wrap:wrap; }
.shell.nowrap-x { flex-wrap:nowrap; }
.shell.left { justify-content:flex-start; }
.shell.center, .shell.x-center { justify-content:center; }
.shell.right { justify-content:flex-end; }
.shell.fill, .shell.fill-x, .shell.split { justify-content:space-between; }
.shell.equalize { justify-content:space-around; }
.shell.top { align-items:flex-start; }
.shell.middle, .shell.y-center { align-items:center; }
.shell.baseline { align-items:baseline; }
.shell.bottom { align-items:flex-end; }
.shell > .grow-x {flex-grow:1;}
.stretch, .grow-y { align-self:stretch; }
 
.solo, .full { width:100%;}
.duo, .half { width:50%;}
.trio, .one-third { width:calc(100% / 3);}
.two-thirds { width:calc(100% / 3 * 2);}
.quad, .quarter { width:25%;}
.three-quarters { width:75%;}
.penta, .twenty { width:20%;}
.thirty { width:30%;} 
.forty { width:40%;} 
.sixty { width:60%;}
.seventy { width:70%;}
.eighty { width:80%;}
 
.solo.gutter, .full.gutter { width:98%; margin:1em 1%;}
.duo.gutter, .half.gutter { width:48%;  margin:1em 1%;}
.trio.gutter, .one-third.gutter { width:calc(94% / 3); margin:1em 1%;}
.two-thirds.gutter { width:calc(97% / 3 * 2); margin:1em 1%;}
.quad.gutter, .quarter.gutter { width:23%; margin:1em 1%;}
.three-quarters.gutter { width:73%; margin:1em 1%;}
.penta.gutter, .twenty.gutter { width:18%; margin:1em 1%;}
.thirty.gutter { width:28%; margin:1em 1%;} 
.forty.gutter{ width:38%; margin:1em 1%;} 
.sixty.gutter { width:58%; margin:1em 1%;}
.seventy.gutter { width:68%; margin:1em 1%;}
.eighty.gutter { width:78%; margin:1em 1%;}
 
.centering {text-align:center;}
.centering > * { margin-left:auto !important; margin-right:auto !important;}
 
/* Universal Padding Class --- as you like */
.pd-around {padding:1.5em 1.5em;}
.pd-side {padding:0 1.5em;}
.pd-top-bottom {padding:1.5em 0;}
.pd-right {padding-right:1.5em;}
.pd-left {padding-left:1.5em;}
 
/* clearfix --- for use together with legacy float layout */
.clearfix:before, .clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
 
/*** Media Query ***/
@media only screen and (max-width: 899px) {
     
    .shell.break900:not(.step) { flex-direction:column;}
    .shell.break900 > .solo, .shell.break900 > .full, .shell.break900 > .duo, .shell.break900 > .half, .shell.break900 > .trio, .shell.break900 > .one-third, .shell.break900 > .two-thirds, .shell.break900 > .quad, .shell.break900 > .quarter, .shell.break900 > .three-quarters, .shell.break900 > .penta, .shell.break900 > .twenty, .shell.break900 > .thirty, .shell.break900 > .forty, .shell.break900 > .sixty, .shell.break900 > .seventy, .shell.break900 > .eighty 
    { width:100%; }
    .shell.break900 > .solo.gutter, .shell.break900 > .full.gutter, .shell.break900 > .duo.gutter, .shell.break900 > .half.gutter, .shell.break900 > .trio.gutter, .shell.break900 > .one-third.gutter, .shell.break900 > .two-thirds.gutter, .shell.break900 > .quad.gutter, .shell.break900 > .quarter.gutter, .shell.break900 > .three-quarters.gutter, .shell.break900 > .penta.gutter, .shell.break900 > .twenty.gutter, .shell.break900 > .thirty.gutter, .shell.break900 > .forty.gutter, .shell.break900 > .sixty.gutter, .shell.break900 > .seventy.gutter, .shell.break900 > .eighty.gutter
    { width:98%; margin:1em 1%;}
     
    .shell.step { flex-direction:row; flex-wrap:wrap; }
    .shell.step > .duo, .shell.step > .half, .shell.step > .trio, .shell.step > .one-third, .shell.step > .two-thirds, .shell.step > .quad, .shell.step > .quarter, .shell.step > .three-quarters, .shell.step > .penta, .shell.step > .twenty, .shell.step > .thirty, .shell.step > .forty, .shell.step > .sixty, .shell.step > .seventy, .shell.step > .eighty 
    { width:50%;}
    .shell.step > .duo.gutter, .shell.step > .half.gutter, .shell.step > .trio.gutter, .shell.step > .one-third.gutter, .shell.step > .two-thirds.gutter, .shell.step > .quad.gutter, .shell.step > .quarter.gutter, .shell.step > .three-quarters.gutter, .shell.step > .penta.gutter, .shell.step > .twenty.gutter, .shell.step > .thirty.gutter, .shell.step > .forty.gutter, .shell.step > .sixty.gutter, .shell.step > .seventy.gutter, .shell.step > .eighty.gutter 
    { width:48%; margin:1em 1%;}
     
}
 
/* Mobile Single Column ( like 7-10 inch Tablet ) */
@media only screen and (max-width: 768px) {
 
    .container, .wide-container {padding:0 0.3em;} /* as you like */
 
    .shell.break768:not(.step) { flex-direction:column;}
    .shell.break768 > .solo, .shell.break768 > .full, .shell.break768 > .duo, .shell.break768 > .half, .shell.break768 > .trio, .shell.break768 > .one-third, .shell.break768 > .two-thirds, .shell.break768 > .quad, .shell.break768 > .quarter, .shell.break768 > .three-quarters, .shell.break768 > .penta, .shell.break768 > .twenty, .shell.break768 > .thirty, .shell.break768 > .forty, .shell.break768 > .sixty, .shell.break768 > .seventy, .shell.break768 > .eighty
    { width:100%; }
    .shell.break768 > .solo.gutter, .shell.break768 > .full.gutter, .shell.break768 > .duo.gutter, .shell.break768 > .half.gutter, .shell.break768 > .trio.gutter, .shell.break768 > .one-third.gutter, .shell.break768 > .two-thirds.gutter, .shell.break768 > .quad.gutter, .shell.break768 > .quarter.gutter, .shell.break768 > .three-quarters.gutter, .shell.break768 > .penta.gutter, .shell.break768 > .twenty.gutter, .shell.break768 > .thirty.gutter, .shell.break768 > .forty.gutter, .shell.break768 > .sixty.gutter, .shell.break768 > .seventy.gutter, .shell.break768 > .eighty.gutter
    { width:98%; margin:1em 1%;}
     
    .shell:not(.keep) > .solo, .shell:not(.keep) > .full, .shell:not(.keep) > .duo, .shell:not(.keep) > .half, .shell:not(.keep) > .trio, .shell:not(.keep) > .one-third, .shell:not(.keep) > .two-thirds, .shell:not(.keep) > .quad, .shell:not(.keep) > .quarter, .shell:not(.keep) > .three-quarters, .shell:not(.keep) > .penta, .shell:not(.keep) > .twenty, .shell:not(.keep) > .thirty, .shell:not(.keep) > .forty, .shell:not(.keep) > .sixty, .shell:not(.keep) > .seventy, .shell:not(.keep) > .eighty
    { width:100%; margin:0; }   
    .shell:not(.keep) > .solo.gutter, .shell:not(.keep) > .full.gutter, .shell:not(.keep) > .duo.gutter, .shell:not(.keep) > .half.gutter, .shell:not(.keep) > .trio.gutter, .shell:not(.keep) > .one-third.gutter, .shell:not(.keep) > .two-thirds.gutter, .shell:not(.keep) > .quad.gutter, .shell:not(.keep) > .quarter.gutter, .shell:not(.keep) > .three-quarters.gutter, .shell:not(.keep) > .penta.gutter, .shell:not(.keep) > .twenty.gutter, .shell:not(.keep) > .thirty.gutter, .shell:not(.keep) > .forty.gutter, .shell:not(.keep) > .sixty.gutter, .shell:not(.keep) > .seventy.gutter, .shell:not(.keep) > .eighty.gutter
    { width:98%; margin:1em 1%;}
 
    .shell.step { flex-direction:row; flex-wrap:wrap; }
    .shell.step > .duo, .shell.step > .half, .shell.step > .trio, .shell.step > .one-third, .shell.step > .two-thirds, .shell.step > .quad, .shell.step > .quarter, .shell.step > .three-quarters, .shell.step > .penta, .shell.step > .twenty, .shell.step > .thirty, .shell.step > .forty, .shell.step > .sixty, .shell.step > .seventy, .shell.step > .eighty 
    { width:50%;}
    .shell.step > .duo.gutter, .shell.step > .half.gutter, .shell.step > .trio.gutter, .shell.step > .one-third.gutter, .shell.step > .two-thirds.gutter, .shell.step > .quad.gutter, .shell.step > .quarter.gutter, .shell.step > .three-quarters.gutter, .shell.step > .penta.gutter, .shell.step > .twenty.gutter, .shell.step > .thirty.gutter, .shell.step > .forty.gutter, .shell.step > .sixty.gutter, .shell.step > .seventy.gutter, .shell.step > .eighty.gutter
    { width:48%; margin:1em 1%;}
 
    .shell.keep-half:not(.keep), .shell.keep-half:not(.keep) { flex-direction:row;}
    .shell.keep-half:not(.keep) > .solo, .shell.keep-half:not(.keep) > .full, .shell.keep-half:not(.keep) > .duo, .shell.keep-half:not(.keep) > .half, .shell.keep-half:not(.keep) > .trio, .shell.keep-half:not(.keep) > .one-third, .shell.keep-half:not(.keep) > .two-thirds, .shell.keep-half:not(.keep) > .quad, .shell.keep-half:not(.keep) > .quarter, .shell.keep-half:not(.keep) > .three-quarters, .shell.keep-half:not(.keep) > .penta, .shell.keep-half:not(.keep) > .twenty, .shell.keep-half:not(.keep) > .thirty, .shell.keep-half:not(.keep) > .forty, .shell.keep-half:not(.keep) > .sixty, .shell.keep-half:not(.keep) > .seventy, .shell.keep-half:not(.keep) > .eighty   
    { width:50%;}   
    .shell.keep-half:not(.keep) > .solo.gutter, .shell.keep-half:not(.keep) > .full.gutter, .shell.keep-half:not(.keep) > .duo.gutter, .shell.keep-half:not(.keep) > .half.gutter, .shell.keep-half:not(.keep) > .trio.gutter, .shell.keep-half:not(.keep) > .one-third.gutter, .shell.keep-half:not(.keep) > .two-thirds.gutter, .shell.keep-half:not(.keep) > .quad.gutter, .shell.keep-half:not(.keep) > .quarter.gutter, .shell.keep-half:not(.keep) > .three-quarters.gutter, .shell.keep-half:not(.keep) > .penta.gutter, .shell.keep-half:not(.keep) > .twenty.gutter, .shell.keep-half:not(.keep) > .thirty.gutter, .shell.keep-half:not(.keep) > .forty.gutter, .shell.keep-half:not(.keep) > .sixty.gutter, .shell.keep-half:not(.keep) > .seventy.gutter, .shell.keep-half:not(.keep) > .eighty.gutter
    { width:48%; margin:1em 1%;}
     
    /* Universal padding class --- as you like */
    .pd-around {padding:1.5em 1.5em;}
    .pd-side {padding:0 1.5em;}
    .ttal {text-align:left !important;}
    .ttal:not(.pd-side) { padding:0 1.5em;}
    .pd-around .ttal:not(.pd-side), .pd-side .ttal:not(.pd-side) { padding:0;}  
     
}
 
/* Traditional SmartPhone Portrait Size */
@media only screen and (max-width: 479px) {
     
    .shell:not(.keep), .shell.step:not(.keep) { flex-direction:column;}
    .shell.step:not(.keep) > .solo, .shell.step:not(.keep) > .full, .shell.step:not(.keep) > .duo, .shell.step:not(.keep) > .half, .shell.step:not(.keep) > .trio, .shell.step:not(.keep) > .one-third, .shell.step:not(.keep) > .two-thirds, .shell.step:not(.keep) > .quad, .shell.step:not(.keep) > .quarter, .shell.step:not(.keep) > .three-quarters, .shell.step:not(.keep) > .penta, .shell.step:not(.keep) > .twenty, .shell.step:not(.keep) > .thirty, .shell.step:not(.keep) > .forty, .shell.step:not(.keep) > .sixty, .shell.step:not(.keep) > .seventy, .shell.step:not(.keep) > .eighty    
    { width:100%; margin: margin:0;}
    .shell.step:not(.keep) > .solo.gutter, .shell.step:not(.keep) > .full.gutter, .shell.step:not(.keep) > .duo.gutter, .shell.step:not(.keep) > .half.gutter, .shell.step:not(.keep) > .trio.gutter, .shell.step:not(.keep) > .one-third.gutter, .shell.step:not(.keep) > .two-thirds.gutter, .shell.step:not(.keep) > .quad.gutter, .shell.step:not(.keep) > .quarter.gutter, .shell.step:not(.keep) > .three-quarters.gutter, .shell.step:not(.keep) > .penta.gutter, .shell.step:not(.keep) > .twenty.gutter, .shell.step:not(.keep) > .thirty.gutter, .shell.step:not(.keep) > .forty.gutter, .shell.step:not(.keep) > .sixty.gutter, .shell.step:not(.keep) > .seventy.gutter, .shell.step:not(.keep) > .eighty.gutter 
    { width:98%; margin:1em 1%;}
 
    /* Single Column --- Universal margin-bottom class */
    .shell.automa > , .shell.automa > .gutter {margin-bottom:1.5em !important;}
 
    /* Universal padding class --- as you like */
    .pd-around {padding:6% 3%;}
    .pd-side, .pd-right, .pd-left {padding:0 3%;}
    .stal {text-align:left !important;}
    .stal:not(.pd-side) { padding:0 3%;}
    .pd-around .stal:not(.pd-side), .pd-side .stal:not(.pd-side) { padding:0;}  
 
} 


 
.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}
 
.list1 li{
	position:relative;
	padding-left:20px;
}
 
.list1 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:3px; 
	left:2px; 
	height:0; 
	width:0; 
	border-top: 6px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #08b047;
}

.list2 li{
	position:relative;
	padding-left:20px;
}
 
.list2 li:before{
	content:''; 
	height:0; 
	width:0; 
	display:block; 
	border:5px transparent solid; 
	border-right-width:0; 
	border-left-color:#08b047; 
	position:absolute; 
	top:5px; 
	left:8px;
}
 
.list2 li:after{
	content:''; 
	height:2px; 
	width:10px; 
	display:block; 
	background:#08b047; 
	position:absolute; 
	top:9px; 
	left:0px;
}

.list3 li{
	position:relative;
	padding-left:20px;
}
 
.list3-maru:after{
	content:''; 
	display:block; 
	position:absolute; 
	top:3px; 
	left:3px; 
	border-radius:30px;
	height:7px; 
	width:7px; 
	border:3px solid #08b047;
}
 
.list3-batu:before, .list3-batu:after{
	content:''; 
	display:block; 
	position:absolute; 
	top:8px; 
	left:3px;
	height:4px; 
	width:14px; 
	background:#08b047; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
.list3-batu:after{
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

.list4 li{
	position:relative;
	padding-left:20px;
}
 
.list4 li:after, .list4 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:4px; 
	left:8px; 
	height:11px; 
	width:4px; 
	background:#08b047; 
	border-radius:10px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.list4 li:before{
	top:8px; 
	left:3px;
	height:8px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}

.list5 li{
	position: relative;
	padding-left: 20px;
}
.list5 li:before{
	content:''; 
	height:0px; 
	width: 90%;
	display:block; 
	position:absolute; 
	top:23px; 
	left:0px; 
	border-bottom: 1px dashed #aaa;
}
.list5 li:after{
	content:'';
	display:block; 
	position:absolute; 
	background:#08b047;
	width:5px;
	height:5px; 
	top:7px; 
	left:5px; 
	border-radius: 5px;
}

.list6 li{
	position:relative;
	padding-left:20px;
}
 
.list6 li:after{
	content:'';
	display:block; 
	position:absolute; 
	background:#08b047;
	width:9px;
	height:9px; 
	top:5px; 
	left:5px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}

.list7 li{
	position:relative;
	display: block;
	padding: 5px 0px 5px 30px;
	background: #1cba58;
	color: #fff;
	border-radius:15px 0px 0px 15px;
}
 
.list7 li:after{
	content:'';
	display:block; 
	position:absolute;
	width:14px;
	height: 14px;
	top:7px;
	left:5px;
	background: #fff;
	border-radius: 10px;
}

.list8{
	counter-reset:li;
	margin-left:20px !important;
}
 
.list8 li{
	position:relative;
	display: block;
	padding:8px 0px 8px 40px; 
}
 
li.list8-count:after{
	counter-increment: li;
	content: counter(li);
	position: absolute;	
	left: -16px;
	top: 2px;
	background: #a4d1b5;
	height: 30px;
	width: 30px;
	line-height: 32px;
	border: 2px solid #1cba58;
	color: #fff;
	text-align: center;
	font-weight: bold;
	border-radius: 30px;
}
 
li.list8-count:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:11px; 
	left:15px; 
	height:0; 
	width:0; 
	border-top: 8px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #1cba58;
}

.list9{
	counter-reset:li;   
}
.list9 li{
	position: relative;
	display: block;
	padding: 5px 0px 5px 50px;
	background: #a4d1b5;
	border: 2px solid #1cba58;
	border-radius: 2px;
	/* [disabled]margin-left:-15px !important; */
}
li.list9-count:after{
	counter-increment: li;
	content: counter(li);
	position: absolute;
	left: 0px;
	top: 0px;
	background: #1cba58;
	height: 30px;
	width: 30px;
	line-height: 30px;
	border: 2px solid #1cba58;
	color: #fff;
	text-align: center;
	font-weight: bold;
	/* [disabled]border-radius: 2px; */
}
 
li.list9-count:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:8px; 
	left:33px; 
	height:0; 
	width:0; 
	border-top: 8px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #1cba58;
}

.list10{
	counter-reset:li;   
}
 
.list10 li{
	position:relative;
	display: block;
	padding:10px 0px 10px 30px; 
	margin-left:0px !important;
}
 
li.list10-count:after{
	counter-increment: li;
	content: counter(li) ".";
	position: absolute;	
	display: block;
	text-align: center;
	font-style: italic;
	left: 0px;
	top: 6px;
	font-size: 30px;
	color:#96bc9d;
	font-family:'Goudy Bookletter 1911',Georgia,serif; 
}
/*===========================
anchor
===========================*/


#anchor01 {
	margin-top:-110px;
	padding-top:110px;
}

#anchor02 {
	margin-top:-95px;
	padding-top:95px;
}

#anchor03 {
	margin-top:-95px;
	padding-top:95px;
}
#lnk-1,#lnk-2,#lnk-3,#lnk-4 {
    margin-top: -125px;
    padding-top: 125px;
}
#partner {
    margin-top: -125px;
    padding-top: 125px;
}
.box-sd {
    padding: 2rem;
    background-color: #fff;
    border: 1px solid #999;
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
.box-sd {
    padding: 1.2rem;
    box-sizing: border-box;
}

}
/*===========================
spacer
===========================*/


.mt10 {
	margin-top:10px !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;
}
.mt0{
	margin-top:0px !important;}
	
.mb10 {
	margin-bottom:10px !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;
}
.mb0{
	margin-bottom:0px !important;}

@media screen and (max-width: 768px) {
.mt10,.mt20,.mt30 {
     margin-top:4% !important;
}
.mb10,.mb20,.mb30 {
     margin-bottom:4% !important;
}
.mt40,.mt50,.mt60 {
     margin-top:5% !important;
}
.mb40,.mb50,.mb60 {
     margin-bottom:5% !important;
}
.mt70,.mt80 {
     margin-top:8% !important;
}
.mb70,.mb80 {
     margin-bottom:8% !important;
}
}
.btn-animation-02 {
  display: inline-block;
  width: 300px;
  text-align: center;
  background-color: #2bb116;
  border: 2px solid #2bb116;
  font-size: 16px;
  color: #2bb116 !important;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 4px;
  position: relative;
}

.btn-animation-02 span {
  position: relative;
  z-index: 1;
}

.btn-animation-02::before,
.btn-animation-02::after {
  content: "";
  display: block;
  background-color: #FFF;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: .2s;
}
.btn-animation-02::before {
  left: 0;
}
.btn-animation-02::after {
  right: 0;
}

.btn-animation-02:hover:before,
.btn-animation-02:hover:after {
  width: 0;
  background-color: #FFF;
}

.btn-animation-02:hover {
  color: #FFF!important;
}
.box-sd {
    padding: 3rem;
    background-color: #fff;
    border: 1px solid #999;
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
.box-sd {
    padding: 1.2rem;
    box-sizing: border-box;
}
.btn-animation-02 {
  width: 70%;
}

}
.wd40{
   width:40% !important;
   margin:auto;
}
.wd50 {
  width:50% !important;
  margin:0 auto;
}
.wd60 {
  width:60% !important;
  margin:0 auto;
}
.wd70 {
  width:70% !important;
  margin:0 auto;
}
.wd80 {
  width:80% !important;
  margin:0 auto;
}
.wd85 {
  width:85% !important;
  margin:0 auto;
}
.wd90 {
  width:90% !important;
  margin:0 auto;
}
.wd95 {
  width:95% !important;
  margin:0 auto;
}

@media only screen and (max-width: 768px) {
.wd40,.wd50,.wd60,.wd70,.wd80,.wd85,.wd90,.wd95{
   width:100% !important;
   margin:auto;
}
}