@charset "utf-8";

/*=====================================

common.css

=====================================*/

/*-------------------------------------
 top
-------------------------------------*/
.topService .head,
.topWorks .head,
.topWhatsnew .head {
	text-align: center;
}
.topService .head h2,
.topWorks .head h2,
.topWhatsnew .head h2 {
	margin: 0 0 4px 0;
	font-size: 42px;
	letter-spacing: 5px;
}
.topService .head p,
.topWorks .head p,
.topWhatsnew .head p {
	
}

.btnMore {
	text-align: center;
}
.btnMore a {
	display: inline-block;
	width: 230px;
	font-size: 17px;
	line-height: 37px;
	border: 1px solid #d62e15;
	background: url(../images/icn_arw02.png) no-repeat 13px center;
}

/* topSlide
-------------------------------------*/
.topSlide {
	text-align: center;
	background: #FFFFFF;
}

/* common for websmart
-------------------------------------*/
.free{
	font-size: 17px;
	margin-bottom: 40px;
}
.topAbout figure{
	text-align: center;
}
.topAbout figure span{
	display: block;
	text-align: center;
}
.topAbout figure.fltL {
	padding: 0 40px 0 0;
	max-width: 50%;
}
.topAbout figure.fltR {
	padding: 0 0 0 40px;
	max-width: 50%;
}
.topAbout figure.centerAbove{
	margin-bottom: 40px;
}
/* layout */
.topicpath {
	border-bottom: 1px solid #dfdfdf;
}
.topicpath .inner {
	padding: 12px 0;
}
.topicpath p {
	font-size: 12px;
}
.topicpath a {
	color: #333;
}
.contents {
	width: 72%;
}
main{
	/*min-height: 900px;*/
}
main::after{
	content: '';
	clear: both;
	display: block;
}
.containerB .contents {
	float: right;
}
.side {
	width: 25%;
}
.containerA .side {
	float: right;
}
.containerB .side {
	float: left;
	margin-top: 35px;
	margin-bottom: 60px;
}
.pageCategoryTitle{
	padding-top: 30px;
	padding-bottom: 30px;
	background: linear-gradient(to right, #d62e15 0%,#d62e15 27%,#ffffff 52%,#ffffff 100%); 
	overflow: hidden;
	position: relative;
	border-bottom: 1px solid #f1f1f1;
}
.pageCategoryTitle h2{
	font-size: 14px;
	color: #FFFFFF;
	font-weight: normal;
}
.pageCategoryTitle h2 em{
	font-size: 28px;
	margin-right: 40px;
}

.catTopImg {
    position: absolute;
    right: 0;
    top: -37px;
}


/* detail */
.pageTitle .date {
    font-size: 14px;
    text-align: right;
}
.pageTitle{
	margin-bottom: 30px;
}
.contents h1 {
	margin: 0 0 5px 0;
	padding: 25px 0 10px 0;
	font-size: 30px;
	border-bottom: 3px solid #d62e15;
}

.contents h2 {
	margin: 0 0 20px 0;
	padding: 7px 0 7px 23px;
	font-size: 26px;
	border-left: 3px solid #d62e15;
}
.contents h3 {
	margin: 0 0 30px 0;
	padding: 8px 22px;
	font-size: 22px;
	background: #efefef;
}
.contents h4 {
	margin: 0 0 30px 0;
	padding: 0 5px 5px 22px;
	font-size: 20px;
	border-bottom: 1px solid #00d3ff;
}
.contents h5 {
	margin: 0 0 30px 0;
	padding: 0 5px 5px 22px;
	font-size: 18px;
	border-bottom: 1px dotted #b2b2b2;
}

/* side */
.sideNav {
	margin: 0 0 27px 0;
}
.sideNav h3 {
	padding: 10px 5px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	background: #d62e15;
}
.sideNav ul {
	border-left: 1px solid #dedede;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
.sideNav ul li {
	position: relative;
	border-top: 1px solid #dedede;
}
.sideNav ul li a {
	display: block;
    padding: 10px 0 10px 26px;
    background: url(../images/icn_arw02.png) no-repeat 12px 14px;
    background-size: 5px auto;
    background-position: left 13px center;
}
.sideNav ul li ul {
	padding: 0 10px;
	border-left: none;
	border-right: none;
	border-bottom: none;
}
.sideNav ul li ul li {
	padding: 10px 0 10px 33px;
	background: url(/common/images/icn_arw09.png) no-repeat 19px 15px;
	border-top: 1px dotted #c7c7c7;
}
.sideNav ul li ul li a {
	display: inline;
	padding: 0;
	background: none;
}
.sideNav ul li ul li ul {
	padding: 5px 0;
}
.sideNav ul li ul li ul li {
	margin: 5px 0 0 0;
	padding: 0 0 0 19px;
	font-size: 14px;
	border-top: none;
	background: none;
}
.sideNav ul li ul li ul li:after {
	position: absolute;
	top: 8px;
	left: 0;
	width: 10px;
	height: 1px;
	content: "";
	background: #a6a6a6;
}




/* 
-------------------------------------*/
.sideBanner {
	padding: 0 0 10px 0;
}
.sideBanner ul li {
	margin: 0 0 17px 0;
	text-align: center;
}
.sideBox01 {
	clear: both;
	margin: 0 0 20px 0;
	border-left: 1px solid #dedede;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}
.sideBox01 h3 {
	margin: 0 -1px;
	padding: 6px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	background: #d62e15;
}

.sideSlide {
	position: relative;
	padding: 10px 5px;
}
.sideSlide ul {
	padding: 10px 30px 0 30px;
}
.sideSlide ul li {
	text-align: center;
}
.sideSlide ul li img {
	border: 1px solid #efefef;
}
.sideSlide .slick-prev,
.sideSlide .slick-next {
	position: absolute;
	top: 40%;
	margin: -20px 0 0 0;
	width: 10px;
	height: 40px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 2;
	border: none;
	font-size: 0;
	background-size: contain;
	background-color: transparent;
}
.sideSlide .slick-prev {
	left: 5px;
	background-image: url(../images/icn_slide_prev02.png);
}
.sideSlide .slick-next {
	right: 5px;
	background-image: url(../images/icn_slide_next02.png);
}
.sideTxt01 {
	padding: 10px;
	overflow: hidden;
}
.sideTxt01 .ttl {
	margin: 0 0 5px 0;
	font-weight: bold;
}
.sideTxt01 .txt {
	margin: 0 0 5px 0;
	font-size: 14px;
	line-height: 1.6;
}
.sideTxt01 .date {
	float: left;
	font-size: 12px;
}
.sideTxt01 .link {
	float: right;
	padding: 0 0 0 15px;
	font-size: 14px;
	background: url(/common/images/icn_arw01.png) no-repeat 0 2px;
}
/* 
-------------------------------------*/
.sideList01 ul {
	border-left: 1px solid #dedede;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}
.sideList01 ul li {
	border-top: 1px solid #dedede;
}
.sideList01 ul li a {
	display: block;
	padding: 10px;
	color: #333;
	font-size: 14px;
}
.sideList01 ul li .pr {
	font-size: 12px;
	text-align: right;
}
#page .newsList {
	width: 100%;
	margin: 0 auto 65px auto;
}


/*-------------------------------------
 contact form
-------------------------------------*/
#smart_mail_required{
	text-align: right;
	color: #d62e15;
	margin-bottom: 0;
}
#smart_mail{
	width: 100%;
    margin-bottom: 60px;
}
#smart_mail p{
	margin-bottom: 5px;
}
#smart_mail th, #smart_mail td{
	border-collapse: collapse;
	padding: 10px;
	border: solid 1px #dadada;
}
#smart_mail th{
	text-align: left;
	background-color: #f5f5f5;
	vertical-align: top;
	font-weight: bold;
}
#smart_mail th span{
	color: #d62e15;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: center;
	display: inline-block;
	float: right;
	font-size: 12px;
}
#smart_mail input[type="text"],#smart_mail input[type="email"],#smart_mail textarea{
	padding: 5px;
	border: solid 1px #dadada;
	background-color: #FFFFFF;
	width: calc( 100% - 10px )
}
.privacyCheck a{
	color: #029ede;
}
.inquiry-sbtn{ text-align: center;
}
.inquiry-sbtn input{
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	width: 280px;
	color:#FFFFFF;
	cursor: pointer;
	border: none;
	background-color: #d62e15;
	font-size: 18px;
}
.inquiry-sbtn input:hover{
	opacity: 0.7;
}
.inquiry-sbtn input:before {
    background-image: url(../images/icn_mail.png);
    content: '';
    background-size: contain;
    width: 23px;
    height: 18px;
    position: absolute;
    top: 10px;
    left: 10px;
}

.contents .section p.privacyCheck {
	margin-bottom: 0;
}
.error_text{
	color: #CD0003;
	margin-bottom: 10px;
}

.newsList ul li img {
    width: 20px;
    height: auto;
    display: inline-block;
    margin-bottom: 4px;
    margin-left: 5px;
}



/* topAbout
-------------------------------------*/

.gray {
	background: #eff1f0;
}
.white {
	background: #FFFFFF;
}
.keyColor{
	background-color: #d62e15;
	color:#FFFFFF;
}

.topAbout {
	
}
.topAbout .inner {
	padding: 60px 0 60px 0;
}
.topAbout h2 {
	margin: 0 0 50px 0;
	font-size: 36px;
	text-align: center;
}
.topAbout p {
	margin: 0 0 30px 0;
	font-size: 17px;
}




/* topService
-------------------------------------*/
.topService {
	color: #1b1d2e;
	background: #efefef;
}
.topService .inner {
	padding: 40px 0 94px 0;
}
.topService .head {
	margin: 0 0 40px 0;
	color: #1b1d2e;
}
.serviceBlock {
	border: 1px solid #f4f6f5;
}
.serviceTab ul {
	display: flex;
	border-bottom: 1px solid #f4f6f5;
}
.serviceTab ul li {
	width: 20%;
	padding: 52px 10px 12px 10px;
	cursor: pointer;
	text-align: center;
	background: #d62e15;
}
.serviceTab ul li + li {
	border-left: 1px solid #f4f6f5;
}
.serviceTab ul li figure {
	margin: 0 0 10px 0;
}
.serviceTab ul li figure img {
	width: 122px;
}
.serviceTab ul li.current {
	margin: 0 0 -1px 0;
}
.servicePanel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 5px;
}
.servicePanel .clm{
	display: table-cell;
}
.servicePanel .clm {
    padding: 20px;
	float: left;
	background-color: #FFF;
}

.servicePanel .clm h3 {
	margin: 0 0 30px 0;
	font-size: 18px;
	text-align: center;
	border-bottom: 2px solid #d62e15;
	padding-bottom: 19px;
	text-align: center;
}
.servicePanel .clm .topServiceLogo{
	margin-left: -20px;
	margin-right: -20px;
	border-bottom: 1px solid #efefef;
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.servicePanel .clm .topServiceLogo img{
	max-height: 70px;
}
.servicePanel .clm p {
	margin: 0 0 25px 0;
	font-size: 14px;
}
.servicePanel .clm .btn {
	padding: 20px 0 0 0;
	text-align: center;
}
.servicePanel .clm .btn a {
	display: inline-block;
	width: 146px;
	color: #d62e15;
	font-size: 17px;
	line-height: 37px;
	border: 1px solid #d62e15;
	background: url(../images/icn_arw02.png) no-repeat 13px center;
}

/* topWorks
-------------------------------------*/
.topWorks {
	background: #f4f6f5;
}
.topWorks .inner {
	padding: 30px 0 75px 0;
}
.topWorks .head {
	margin: 0 0 45px 0;
}
.worksList {
	position: relative;
	margin: 0 0 60px 0;
}
.worksList ul:after {
	clear: both;
	display: block;
	content: "";
}
.worksList ul {
	display: flex;
	border-left: 1px solid #d62e15;
}
.worksList ul li {
	position: relative;
	width: 25%;
	padding: 0 9px 55px 9px;
	border-width: 1px 1px 1px 0;
	border-style: solid;
	border-color: #d62e15;
}
.worksList ul li .cat {
	width: 157px;
	margin: 0 auto 16px auto;
	color: #fff;
	text-align: center;
	background: #d62e15;
}
.worksList ul li figure {
	margin: 0 0 18px 0;
	padding: 6px;
	background: #fff;
}
.worksList ul li dl dt {
	margin: 0 0 10px 0;
	font-size: 16px;
	text-align: center;
}
.worksList ul li .btn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 0 16px 0;
	text-align: center;
}
.worksList ul li .btn a {
	display: inline-block;
	width: 108px;
	font-size: 13px;
	line-height: 27px;
	border: 1px solid #d62e15;
	background: url(../images/icn_arw02.png) no-repeat 13px center;
}
.worksList .prev,
.worksList .next {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 24px;
	margin-top: -12px;
	cursor: pointer;
	background-color: #d62e15;
	background-repeat: no-repeat;
	background-position: center center;
}
.worksList .prev {
	left: -20px;
	background-image: url(../images/icn_prev01.png);
}
.worksList .next {
	right: -20px;
	background-image: url(../images/icn_next01.png);
}

/* topWhatsnew
-------------------------------------*/
.topWhatsnew .inner {
	padding: 45px 0 100px 0;
}
.topWhatsnew .head {
	margin: 0 0 45px 0;
}
.topWhatsnew .head p {
	color: #333;
}
.newsList {
	width: 840px;
	margin: 0 auto 65px auto;
}
.newsList ul {
	display: table;
	width: 100%;
	border-top: 1px solid #d62e15;
}
.newsList ul li {
	display: table-row;
	font-size: 16px;
}
.newsList ul li .date,
.newsList ul li .ttl {
	display: table-cell;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #d62e15;
}
.newsList ul li .date {
	width: 200px;
	padding: 10px;
}
.newsList ul li .ttl {
	padding: 10px 10px 10px 0;
}
.newsList .icnNew {
	display: inline-block;
	padding: 0 5px;
	margin: 5px 0 0 12px;
	color: #fff;
	font-size: 10px;
	line-height: 1.6;
	vertical-align: top;
	background: #d62e15;
}

/* topContact
-------------------------------------*/
.topContact {
	text-align: center;
	background: #f4f6f5;
}
.topContact .inner {
	padding: 40px 0 100px 0;
}
.topContact h2 {
	margin: 0 0 30px 0;
	font-size: 36px;
}
.topContact .btn {
	margin: 0 0 25px 0;
}
.topContact .btn a {
	display: inline-block;
	min-width: 530px;
	padding: 4px 50px;
	color: #d62e15;
	font-size: 24px;
	border: 2px solid #d62e15;
	background: url(../images/icn_contact03.png) no-repeat 16px center #fff;
}
.topContact .tel em {
	font-size: 16px;
}





.free a{
	color: #d62e15;
	text-decoration: underline;
}
.free a:hover{
	text-decoration: none;
}

.keyColor .free a{
	color: #FFFFFF;
	text-decoration: underline;
}
#page .layout_left div.free table, #page .layout_right div.free table{
	border: solid 1px #dcdcdc;
}
#page .layout_left div.free table td, #page .layout_right div.free table td{
	border: solid 1px #dcdcdc;
	padding: 10px;
}
#page .layout_left div.free table tr, #page .layout_right div.free table tr{
	border: solid 1px #dcdcdc;
	padding: 10px;
}
#page .layout_left div.free table th, #page .layout_right div.free table th{
	border: solid 1px #dcdcdc;
	padding: 10px;
}



/*-------------------------------------
 common
-------------------------------------*/
.fltL { float: left !important; }
.fltR { float: right !important; }
.alignL { text-align: left !important; }
.alignR { text-align: right !important; }
.alignC { text-align: center !important; }
.valignT { vertical-align: top !important; }
.valignM { vertical-align: middle !important; }
.valignB { vertical-align: bottom !important; }
.bold { font-weight: bold !important; }
.fontXS { font-size: 0.7em !important; }
.fontS { font-size: 0.8em !important; }
.fontM { font-size: 1em !important; }
.fontL { font-size: 1.2em !important; }
.fontXL { font-size: 1.5em !important; }
.fontXXL { font-size: 2em !important; }

.sup {
	font-size: 0.8em;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}
.sub {
	font-size: 0.8em;
	vertical-align: bottom;
	position: relative;
	top: 0.1em;
}

.w10p { width: 10%; }
.w15p { width: 15%; }
.w20p { width: 20%; }
.w25p { width: 25%; }
.w30p { width: 30%; }
.w40p { width: 40%; }
.w50p { width: 50%; }
.w60p { width: 60%; }
.w70p { width: 70%; }
.w80p { width: 80%; }
.w90p { width: 90%; }
.w100p { width: 100%; }


.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.w400 { width: 400px; }
.w500 { width: 500px; }
.w600 { width: 600px; }


.mgnT0 { margin-top:0px !important; }
.mgnT5 { margin-top:5px !important; }
.mgnT10 { margin-top:10px !important; }
.mgnT15 { margin-top:15px !important; }
.mgnT20 { margin-top:20px !important; }
.mgnT25 { margin-top:25px !important; }
.mgnT30 { margin-top:30px !important; }
.mgnT35 { margin-top:35px !important; }
.mgnT40 { margin-top:40px !important; }
.mgnT50 { margin-top:50px !important; }
.mgnT60 { margin-top:60px !important; }
.mgnT5em { margin-top:5em !important; }

.mgnB0 { margin-bottom:0px !important; }
.mgnB5 { margin-bottom:5px !important; }
.mgnB10 { margin-bottom:10px !important; }
.mgnB15 { margin-bottom:15px !important; }
.mgnB20 { margin-bottom:20px !important; }
.mgnB25 { margin-bottom:25px !important; }
.mgnB30 { margin-bottom:30px !important; }
.mgnB35 { margin-bottom:35px !important; }
.mgnB40 { margin-bottom:40px !important; }
.mgnB50 { margin-bottom:50px !important; }
.mgnB60 { margin-bottom:60px !important; }
.mgnB5em { margin-bottom:5em !important; }

.mgnL0 { margin-left:0px !important; }
.mgnL5 { margin-left:5px !important; }
.mgnL10 { margin-left:10px !important; }
.mgnL15 { margin-left:15px !important; }
.mgnL20 { margin-left:20px !important; }
.mgnL25 { margin-left:25px !important; }
.mgnL30 { margin-left:30px !important; }
.mgnL35 { margin-left:35px !important; }
.mgnL40 { margin-left:40px !important; }
.mgnL50 { margin-left:50px !important; }
.mgnL60 { margin-left:60px !important; }

.mgnR0 { margin-right:0px !important; }
.mgnR5 { margin-right:5px !important; }
.mgnR10 { margin-right:10px !important; }
.mgnR15 { margin-right:15px !important; }
.mgnR20 { margin-right:20px !important; }
.mgnR25 { margin-right:25px !important; }
.mgnR30 { margin-right:30px !important; }
.mgnR35 { margin-right:35px !important; }
.mgnR40 { margin-right:40px !important; }
.mgnR50 { margin-right:50px !important; }
.mgnR60 { margin-right:60px !important; }

.pdg0 { padding:0px !important; }
.pdg5 { padding:5px !important; }
.pdg10 { padding:10px !important; }
.pdg15 { padding:15px !important; }
.pdg20 { padding:20px !important; }
.pdg25 { padding:25px !important; }
.pdg30 { padding:30px !important; }
.pdg35 { padding:35px !important; }
.pdg40 { padding:40px !important; }
.pdg50 { padding:50px !important; }
.pdg60 { padding:60px !important; }

.pdgT0 { padding-top:0px !important; }
.pdgT5 { padding-top:5px !important; }
.pdgT10 { padding-top:10px !important; }
.pdgT15 { padding-top:15px !important; }
.pdgT20 { padding-top:20px !important; }
.pdgT25 { padding-top:25px !important; }
.pdgT30 { padding-top:30px !important; }
.pdgT35 { padding-top:35px !important; }
.pdgT40 { padding-top:40px !important; }
.pdgT50 { padding-top:50px !important; }
.pdgT60 { padding-top:60px !important; }

.pdgB0 { padding-bottom:0px !important; }
.pdgB5 { padding-bottom:5px !important; }
.pdgB10 { padding-bottom:10px !important; }
.pdgB15 { padding-bottom:15px !important; }
.pdgB20 { padding-bottom:20px !important; }
.pdgB25 { padding-bottom:25px !important; }
.pdgB30 { padding-bottom:30px !important; }
.pdgB35 { padding-bottom:35px !important; }
.pdgB40 { padding-bottom:40px !important; }
.pdgB50 { padding-bottom:50px !important; }
.pdgB60 { padding-bottom:60px !important; }

.pdgL0 { padding-left:0px !important; }
.pdgL5 { padding-left:5px !important; }
.pdgL10 { padding-left:10px !important; }
.pdgL15 { padding-left:15px !important; }
.pdgL20 { padding-left:20px !important; }
.pdgL25 { padding-left:25px !important; }
.pdgL30 { padding-left:30px !important; }
.pdgL35 { padding-left:35px !important; }
.pdgL40 { padding-left:40px !important; }
.pdgL50 { padding-left:50px !important; }
.pdgL60 { padding-left:60px !important; }

.pdgR0 { padding-right:0px !important; }
.pdgR5 { padding-right:5px !important; }
.pdgR10 { padding-right:10px !important; }
.pdgR15 { padding-right:15px !important; }
.pdgR20 { padding-right:20px !important; }
.pdgR25 { padding-right:25px !important; }
.pdgR30 { padding-right:30px !important; }
.pdgR35 { padding-right:35px !important; }
.pdgR40 { padding-right:40px !important; }
.pdgR50 { padding-right:50px !important; }
.pdgR60 { padding-right:60px !important; }


.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
	display:inline-table;
	min-height:1%;
}
/* \*/
html .clearfix{
	* height:1%;
}
.clearfix{
	display:block;
}
/* */

.clear {
	clear: both;
}