@charset "utf-8";

@media print{
  body { 
    width: 1100px;
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform-origin: 0 0;
 }
 
}

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@font-face {
 font-family: 'Noto Sans Japanese';
 font-style: normal;
 src: local('NotoSansJP-Regular.otf'),
      url(https://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
      url(https://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
      url(https://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}

body{
  font-family: 'Noto Sans Japanese', sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.7;
  font-size: 84.5%;
  overflow: visible;
  -webkit-text-size-adjust: 100%;
  letter-spacing: 0.05em;
  text-align: center;
  overflow-x: hidden;
}

img{
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  line-height: 0;
  max-width: 100%;
  height: auto;
}

.sp{ display: none !important;}
.tab{ display: none;}

a{
  text-decoration: none;
  color: #333;
}
a:hover{
  text-decoration: underline;
}


#header{ width: 100%; z-index: 100; }
#header #head{ background-color: #fff; height: 100px; position: relative; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 100; }
#head li a{ transition: all .4s; }
#head li a:hover{ opacity: 0.7;  }

#gnav{
  text-align: center;
  position: absolute;
  z-index: 12;
  width: 100%;
}
#gnav ul{
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
#gnav ul li{
  float: left;
  width: 33.3%;
  border-right: 1px solid #ccc;
  border-collapse: collapse;
  box-sizing: border-box;
  height: 100px;
  background-color: #fff;
}
#gnav ul li:first-child{ border-left: 1px solid #ccc; }
#gnav ul li.gm1{ border-right: none; }
#gnav ul li.gm2{ border: none; }
#gnav ul li a{
  height: 100%;
  display: block;
}
#gnav ul li a img{
  margin-top: 35px;
}
#gnav ul li a:hover{
  text-decoration: none;
  color: #168cbb;
}
#gnav ul li#logo{ height: 150px; background-color: #fff; border: 1px solid #ccc; border-width: 0 1px 1px; }
#gnav ul li#logo img{ margin-top: 20px; }
#gnav ul li#logo img.yoko{ display: none; }

#gnav.type2 ul{ max-width: 900px; }
#gnav.type2 ul li{ width: 20%; }

#gnav.type3 ul{ max-width: 850px; }
#gnav.type3 ul li{ width: 23%; }
#gnav.type3 ul li#logo{ width: 31%; }
#gnav.type3 ul li#logo{ height: 100px; border-width: 0 1px; }
#gnav.type3 ul li#logo img{ margin: 30px auto 0; max-width: 200px; }
#gnav.type3 ul li#logo img.yoko{ display: block; }


#header.fixed{ position: fixed; top: 0; left: 0; }
#header.fixed h1 span{ display: none; }
#header.fixed #head{ height: 50px; }
#header.fixed #head h1{ background: none; text-align: center; padding: 2px 0 0; }
#header.fixed #head h1 img{ margin-bottom: 0; }
#header.fixed #gnav ul li{ height: 50px; }
#header.fixed #gnav ul li a img{ height: 29px; width: auto; margin-top: 10px; }
#header.fixed #gnav ul li#logo{ border-bottom: none; }
#header.fixed #gnav ul li#logo a img.tate{ display: none; }
#header.fixed #gnav ul li#logo a img.yoko{ display: inline; height: 24px; }
#header.fixed #gnav.type3 ul li{ width: 25%; }
#header.fixed #gnav.type3 ul li#logo{ width: 25%; }


/* mainimg ------------------------------------ */
.topimg{ position: relative; }
.topimg > img{ max-width: 2000px; width: 100%; }
.topimg h1{
  position: absolute;
  left: 25%;
  top: 50%;
  text-align: center;
  z-index: 5;
  opacity:0;
  transition: all 0.5s ease;
  -webkit-transform: translate3d(-50%, -50%, 0);
     -moz-transform: translate3d(-50%, -50%, 0);
           -ms-transform: translate(-50%, -50%);
          transform: translate3d(-50%, -50%, 0);
}
.topimg h1.move{ left: 40%; opacity:1; }

/* flexslider ------------------------------------ */



/* contents ------------------------------------ */
#contents{
  padding: 0 20px;
}
#contents .main{
  position: relative;
  max-width: 1400px;
  margin: 0 auto 80px;
}
#contents .movein{ opacity:0; transition: all 0.5s ease; transition-delay:.5s;  }
#contents .movein.act{ opacity:1; }
#contents .main::before{ position: absolute; background-color: #fff; width: 100%; height: 100%; content: ""; display: block; top: 0; left: 0; z-index: 10; transition: all 0.5s ease; }
#contents .main.act::before{ width: 0; left: 100%; }
#contents .main h2{
  position: absolute;
  left: 20%;
  top: 50%;
  text-align: center;
  z-index: 5;
  -webkit-transform: translate3d(-50%, -50%, 0);
     -moz-transform: translate3d(-50%, -50%, 0);
           -ms-transform: translate(-50%, -50%);
          transform: translate3d(-50%, -50%, 0);
}


/* contents ------------------------------------ */

/* news ------------------------------------ */
#news{
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  top: -70px;
  z-index: 1;
  padding: 40px 0 30px;
}
#news::before{
  background-color: rgba(23,48,94,0.9);
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  z-index: -1;
  left: 0;
  top: 0;
  transition: all 0.5s ease;
  transition-delay:.5s;
}
#news > div{ opacity:0; transition: all 0.5s ease; transition-delay:1s; }
#news h2{ 
  position: absolute;
  left: 10%;
  top: 50%;
  text-align: center;
  z-index: 5;
  -webkit-transform: translate3d(-50%, -50%, 0);
     -moz-transform: translate3d(-50%, -50%, 0);
           -ms-transform: translate(-50%, -50%);
          transform: translate3d(-50%, -50%, 0);
}
#news.move::before{ width: 100%; }
#news.move > div{ opacity:1; }

.newslist{ padding-left: 20%; padding-right: 30px; text-align: left; }
.newslist li{ color: #fff; overflow: hidden; margin-bottom: 1em; }
.newslist li p.date{ font-weight: bold; margin-bottom: 5px; font-size: 100%; float: left; width: 14em; }
.newslist li p.date.ctg1::after{ display: inline-block; width: 8em; text-align: center; border: 1px solid #949FB4; content: "お知らせ"; font-size: 75%; margin-left: 10px; }

.newslist li .txt{  float: left; width: 75%; }
.newslist li a{ color: #fff; }

.iziModal{ text-align: left; }
.iziModal h2.iziModal-header-title{ font-weight: bold !important; font-family: 'Noto Sans Japanese', sans-serif; }

/* news ------------------------------------ */

/* business ------------------------------------ */
#business{ padding-top: 50px; }
#business .area{
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
#business .area .ph{
  position: absolute;
}
#business .area .txt{
  position: relative;
  z-index: 2;
  background-color: rgba(255,255,255,0.9);
  text-align: left;
  width: 62%;
  box-sizing: border-box;
  padding: 50px;
}
#business .area.type1 .ph{ left: 0; }
#business .area.type1 .txt{ float: right; top: -50px; margin-bottom: 50px; }
#business .area.type2 .ph{ right: 0; }
#business .area.type2 .txt{ top: 50px; margin-bottom: 50px; }

#business .area .txt h3{ font-size: 160%; margin-bottom: 10px; color: #172D59; }
#business .area .txt ul > li,#product .pro_sec li{
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 1em;
  font-size: 110%;
}
#business .area .txt ul > li::before,#product .pro_sec li::before{
  position: absolute;
  left: 0;
  top: 0.3em;
  content: "□";
  color: #5D9EC4;
  font-size: 80%;
}
#business .area .txt ol{
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}
#business .area .txt ol li{
  text-indent: -1.3em;
  padding-left: 1.3em;
  font-size: 110%;
}
#business .area .txt ol li:before {
  counter-increment: item;
  content: counter(item)'.';
  padding-right: .5em;
  font-weight: bold;
  color: #5D9EC4;
  font-size: 120%;
}

/* business ------------------------------------ */

/* product ------------------------------------ */
#product{ padding-top: 50px; margin-bottom: 100px; }
#product .inner{ max-width: 1100px; margin: 0 auto; text-align: left; }
#product ul.tablist{
  margin-bottom: 30px;
  display: flex; gap: 1em;
}
#product ul.tablist li{ width: 100%; display: table; vertical-align: middle;}
#product ul.tablist li:first-child{ margin-left: 0; }
#product ul.tablist li a{
  display: block;
  background-color: #5398C0;
  color: #fff;
  transition: all 0.5s ease;
  height: 5em;
  display: table-cell;
  line-height: 1.3em;
  vertical-align: middle;
  font-size: 120%;
  text-align: center;
}
#product ul.tablist li a.active,
#product ul.tablist li a:hover{ background-color: #172E5A; text-decoration: none; }
#product ul.tablist li a.active{ position: relative; }
#product ul.tablist li a.active:before{ content: ""; position: absolute; bottom: -20px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 15px solid #172E5A; }

#product h3{ color: #172E5A; font-size: 240%; margin-bottom: .5em; }
#product h4{ border-bottom: 1px solid #ccc; font-size: 150%; position: relative; margin-bottom: 20px; line-height: 1.4; padding-bottom: .5em; }
#product h4 b{ font-size: 120%; color: #5398C0; }
#product h4 span.tag{ display: block; padding-left: 1.5em; color: #5398C0; }
#product h4::after{ width: 250px; height: 3px; content: ""; display: block; background-color: #5398C0; bottom: -2px; position: absolute; }
#product h4.type2::after{ background-color: #172E5A; }
#product h4.type2::before{ content: "□"; display: inline-block; padding-right: 5px; font-size: 80%; color: #5398C0; }
#product h4 span{ font-size: 75%; font-weight: normal; color: #555; }
#product h5{ font-size: 120%; margin-bottom: 10px; }
#product .pro_sec{ margin-bottom: 30px; }
#product .pro_sec.border{ margin: 40px 0 30px; border-top: 2px dotted #aaa; padding-top: 30px; }
#product .pro_sec .ph{ float: right; width: 23%; text-align: right; }
#product table,#product .txt { width: 74%; }
#product .pro_sec p{ margin-bottom: 1em; font-size: 110%; }

#product .flex{ display: flex; justify-content: space-between;  flex-wrap: wrap;}
#product .flex .pro_sec{ width: 48%; } 
.fig{ width: 100%; margin-bottom: 15px; }

.pdflist{ display: flex; justify-content: space-between; }
.pdflist li{ width: 48%; }
.pdflist li a{ border: 2px solid #ccc; display: flex; align-items: center; padding-left: 60px; font-size: 120%; text-align: center; background: url(../image/pdficon.png) no-repeat 3% center; height: 4em; font-weight: 600; border-radius: 5px; transition: .3s; color: #172E5A; }
.pdflist li a:hover{ background-color: #ECF3F9; border-color: #172E5A; text-decoration: none; }

table {
	border: none;
	border-collapse: separate;
  width: 100%;
}
table th,table td { box-sizing: border-box; font-size: 110%; }
table th {
	vertical-align: middle;
	width: 32%;
	margin: 0;
	color: #333;
	font-weight: bold;
	text-align: left;
	padding: 20px 20px;
}
table tr:nth-child(2n) {
	background: #ECF3F9;
}

table td.data {
	margin: 0;
	width: 70%;
	vertical-align: middle;
	overflow: hidden;
	padding: 20px 0;
}
table td.data > div{ padding: 10px 15px; border-left: solid 1px #666; }
table td.data > div.flex{ display:flex; justify-content:space-between; gap:1em; align-items:center; }
table td.data .logo{ width:100px; }

table td:fst-child {
	padding: 0 0 0 10px;
	vertical-align: middle;
}
table.hyo td.fb { font-size: 110%; font-weight: 900; }
table td.bar {
	height: 1px;
	width: 100%;
	border-top: solid 1px #ccc;
}

table a{ color: #5398C0; }

#product table.hyo{ width: 100%; text-align: center; border-collapse: collapse; }
#product table.hyo thead th{ background-color: #5398C0 !important; color: #fff; }
#product table.hyo tbody th{ background-color: #172E5A !important; color: #fff; }
table.hyo th{ width: auto; text-align: center; }
table.hyo th,table.hyo td{ border: 1px solid #ccc; padding: 5px 10px; font-size: 90%; }

#pro2,#pro3,#pro4,#pro5,#pro6{ display: none; }

#pro3 .box2 h4{ width: 49%; float: left; }
#pro3 .box2 h4:nth-child(odd){ margin-right: 2%; }

.img_center{ display:flex; justify-content:center; gap:2%; flex-wrap:wrap; }
.img_center .img{ text-align:center; margin:2em 0; width:23% }
.img_center .img.w{ width:30%; }
.img_center .img img{ margin-bottom:1em; }

.fr_img{ float:right; width:50%; text-align:center; }

.merit{}
.merit > p{ font-size: 130% !important; }
.merit b{ color: #5398C0; display:inline-block; margin-right:.2em; }

/* product ------------------------------------ */


/* company ------------------------------------ */
#company{ padding-top: 100px; }
#company h3{ color: #172E5A; font-size: 200%; margin-bottom: 50px; text-align: center; margin-top: 50px; }
#company h3::after{ content: ""; display: block; margin: 15px auto 0; width: 100px; height: 3px; background-color: #5398C0; }

#company .msg{ max-width: 1100px; margin: 0 auto; position: relative; }
#company .msg .ph{
  position: absolute;
  z-index: 2;
  left: 0; top: -50px;
  max-width: 250px;
  width: 25%;
}
#company .msg .txt{
  border: 1px solid #ccc;
  position: relative;
  text-align: left;
  width: 85%;
  box-sizing: border-box;
  padding: 50px 100px;
  float: none;
  margin: 0 auto 50px;
}
#company .msg .txt::before{
  position: absolute;
  content: "";
  z-index: -1;
  border: 1px dotted #ccc;
  width: 96%; height: 106%;
  top: -3%;
  left: 2%;
}
#company .msg p{ margin-bottom: 1em; font-size: 110%; line-height: 1.8;}

#company .inner{ max-width: 850px; margin: 0 auto; text-align: left; }
#company .inner video{ border: 1px solid #999; margin-bottom: 15px; }

#company #map_area { margin: 50px auto 100px; max-width: 1200px; }
#company #map_area #map{ width: 100%; height: 400px; background-color: #ccc; margin-bottom: 10px; }
#company #map_area p{ font-size: 150%; }

/* company ------------------------------------ */


/* contact ------------------------------------ */
#contact{ background-color: #64A2C6; color: #fff; padding: 100px 20px; }
#contact .inner{ max-width: 600px; margin: 0 auto; display: table; width: 100%; text-align: left; vertical-align: middle; }
#contact .inner h2{ display: table-cell; width: 50%; vertical-align: middle; }
#contact .inner .txt{ display: table-cell; width: 50%; vertical-align: middle; border-left: 1px solid #93BED7; padding-left: 5%; }
#contact .inner .txt p{ font-size: 220%; font-weight: bold; }
#contact .inner .txt p span{ font-size: 60%; }
#contact a{ color: #fff; }
#contact a:hover{ cursor: pointer; }

/* contact ------------------------------------ */

/* footer ------------------------------------ */
#footer{
  text-align: center;
  background-color: #172E5A;
  color: #A3ACBD;
  padding: 30px 10px;
}
#footer p#copy{ font-size: 80%; }


/* footer ------------------------------------ */

/* other ------------------------------------ */
.linkbtn.en{ font-family: 'Crimson Text', sans-serif !important; font-weight: bold; letter-spacing: 0.1em; }
.linkbtn a{ display: inline-block; width: 240px; border: 2px solid #333; position: relative; color: #333; font-size: 120%; padding: 8px 10px; transition: all .3s; }
.linkbtn a:after{
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 15px; top: 50%;
  margin-top: -5px;
  transition: all .3s;
}
.linkbtn a:hover{ text-decoration: none; opacity: 0.7; }
.linkbtn a:hover:after{ right: 10px; }

.btn{ display: inline-block; margin-bottom: 10px; }
.btn a{ border-radius: 3px; color: #fff !important; font-weight: 500; font-size: 90%; padding: 15px 20px 15px 50px; transition: all 0.5s ease; display: block; }
.btn.inq a{ background: url(/image/icon_contact.png) no-repeat 20px center #168cbb; background-size:18px 18px ; }
.btn.yoyaku a{ background: url(/image/icon_yoyaku.png) no-repeat 18px center #168cbb; background-size:26px 20px ; }
.btn a:hover{ text-decoration: none; background-color: #1f7394; }
.btn.yoyaku{ margin-right: 10px; }

ul.can li{ display: inline-block; vertical-align: top; margin: 0 1.5%; width: 30%; border-top: 1px dashed #aaa; }
ul.can li.nob{ border: none; }
ul.can li p{ margin-bottom: 10px; }
ul.can li .ph{ margin-top: 15px; }
ul.can li .ph+p,ul.can li p:first-child{ font-size: 130%; font-weight: 500; margin: 10px 0; }
ul.can li.can3{ width: 100%; padding-top: 10px; }
ul.can li.can2{ width: 40%;}

table.price{ width: 100%; font-size: 110%; color: #333; border: 2px #fff solid; border-collapse: separate; border-spacing: 5px; }
table.price.small{ font-size: 100%; }
table.price.small th,table.price.small td{ padding: 8px 10px; }
table.price th,table.price td{ padding: 15px 10px; vertical-align: middle; }
table.price th{ background-color: #168cbb; color: #fff; font-weight: 500; }
table.price th.no{ background: none; }
table.price td{ background-color: #e9f4f8; text-align: center; }




ul.tablist.bot li a.active:before{ top: -8px; border-top: none; border-bottom: 8px solid #168cbb; }

ul.list li{ list-style-type: circle; text-align: left; margin-bottom: 5px; margin-left: 20px; }



#tabarea{ padding: 20px 0 60px;}
#tabarea .cont{ display: none;  }
.ex_img img{ border-radius: 3px; margin-bottom: 30px; }
#tabarea h2+p{ text-align: center; font-size: 110%; }
ul.ex_list{ margin-top: 30px; }
ul.ex_list li{ display: inline-block; width: 30%; margin: 0 1.5%; vertical-align: top; border-radius: 3px; background-color: #e9f4f8; position: relative; }
ul.ex_list li a{ top: 0; left: 0; position: absolute; width: 100%; height: 100%; display: block; z-index: 2; }
ul.ex_list li .ph{ overflow:hidden; border-radius: 3px 3px 0 0; }
ul.ex_list li .ph img{ border-radius: 3px 3px 0 0; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; }
ul.ex_list li:hover .ph img{ -webkit-transform: scale(1.05); transform: scale(1.05); }
ul.ex_list li:hover .tit{ color: #168cbb; }
ul.ex_list li .tit{ height: 4em; font-size: 120%; font-weight: 500; margin-top: 2em; -webkit-transition: -webkit-all 0.3s ease; transition: all 0.3s ease;}
ul.ex_list li .tit.sub{ margin-top: 1em; height: 5em; }
ul.ex_list li .tit.sub span{ display: block; font-weight: normal; font-size: 80%; }





a.alpha{ transition: all 0.3s ease; }
a.alpha:hover{ opacity: 0.7; }


/* ボックス内dloatｖalear */
.cf:after,#product .detail:after,#product > dl:after {
	content: ".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}
.cf,#product .detail,#product > dl {display: inline-block;}
/* Hides from macIE \*/
* html .cf,* html #product .detail,* html #product > dl {height: 1%;}
.cf,#product .detail,#product > dl {display: block;}
/* End hide from macIE */

sup{ font-size: 70%; margin-top: -2em; display: inline-block;}
sub{ font-size: 70%; display: inline-block;}

.fontP1{ font-size: 110% !important;}
.fontP2{ font-size: 120% !important;}
.fontP3{ font-size: 130% !important;}
.fb{ font-weight: bold;}
.fl { float: left !important; }
.fr { float: right !important; }
.tac{ text-align: center !important;}
.tal{ text-align: left !important;}
.tar{ text-align: right !important;}
.f01{ color: #5398C0; }

p.note{ color: #666; font-size: 90% !important; text-align: left; }

/* margin-top */
.mt0{margin-top: 0px !important;}
.mt1{margin-top: 1px !important;}
.mt2{margin-top: 2px !important;}
.mt3{margin-top: 3px !important;}
.mt4{margin-top: 4px !important;}
.mt5{margin-top: 5px !important;}
.mt7{margin-top: 7px !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; }
.mt100{margin-top: 100px !important; }
.mt150{margin-top: 150px !important; }

/* margin-right */
.mr1{margin-right: 1px !important;}
.mr2{margin-right: 2px !important;}
.mr3{margin-right: 3px !important;}
.mr4{margin-right: 4px !important;}
.mr5{margin-right: 5px !important;}
.mr8{margin-right: 8px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.mr20{margin-right: 20px !important;}
.mr70{margin-right: 70px !important;}

/* margin-bottom */
.mb0{margin-bottom: 0px !important;}
.mb1{margin-bottom: 1px !important;}
.mb2{margin-bottom: 2px !important;}
.mb3{margin-bottom: 3px !important;}
.mb4{margin-bottom: 4px !important;}
.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;}
.mb50{margin-bottom: 50px !important;}
.mb80{margin-bottom: 80px !important;}

/* margin-left */
.ml1{margin-left: 1px !important;}
.ml2{margin-left: 2px !important;}
.ml3{margin-left: 3px !important;}
.ml4{margin-left: 4px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
.ml20{margin-left: 20px !important;}

/* padding-top */
.pt0{padding-top: 0px !important;}
.pt1{padding-top: 1px !important;}
.pt2{padding-top: 2px !important;}
.pt3{padding-top: 3px !important;}
.pt4{padding-top: 4px !important;}
.pt5{padding-top: 5px !important;}
.pt10{padding-top: 10px !important;}
.pt15{padding-top: 15px !important;}
.pt20{padding-top: 20px !important;}

/* padding-right */
.pr1{padding-right: 1px !important;}
.pr2{padding-right: 2px !important;}
.pr3{padding-right: 3px !important;}
.pr4{padding-right: 4px !important;}
.pr5{padding-right: 5px !important;}
.pr10{padding-right: 10px !important;}
.pr15{padding-right: 15px !important;}
.pr20{padding-right: 20px !important;}

/* padding-bottom */
.pb0{padding-bottom: 0px !important;}
.pb1{padding-bottom: 1px !important;}
.pb2{padding-bottom: 2px !important;}
.pb3{padding-bottom: 3px !important;}
.pb4{padding-bottom: 4px !important;}
.pb5{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb15{padding-bottom: 15px !important;}
.pb20{padding-bottom: 20px !important;}
.pb80{padding-bottom: 80px !important;}

/* padding-left */
.pl1{padding-left: 1px !important;}
.pl2{padding-left: 2px !important;}
.pl3{padding-left: 3px !important;}
.pl4{padding-left: 4px !important;}
.pl5{padding-left: 5px !important;}
.pl10{padding-left: 10px !important;}
.pl15{padding-left: 15px !important;}
.pl20{padding-left: 20px !important;}