@charset "utf-8";


/* =========================================================================
	20170511 New template 
========================================================================= */
/* 
	Common - 旧との差別化のため[.wrap-work]から始める
------------------------------------------------------------ */
.wrap-work div {
	box-sizing: border-box;
}

.wrap-work p {
	margin-bottom: 0;
	line-height: 1.6;
}

.wrap-work img {
	max-width: 100%;
}

.wrap-work section {
	margin-bottom: 50px;
	font-size: 14px;
	line-height: 1.6;
}

.wrap-work section h2 {
    padding: 0 20px 0 10px;
    border-left: 3px solid #e65457;
    color: #e65457;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
}

.wrap-work ol.decimal li {
	margin: 0 0 0 20px;
	list-style: decimal;
}

.wrap-work ul.disc li {
	margin: 0 0 0 15px;
	list-style: disc;
}

.wrap-work dl.ttl-border dt {
	margin-top: 20px;
	border-bottom: 1px dotted #aaa;
	font-weight: bold;
}

.wrap-work dl.ttl-border dd {
	margin-top: 10px;
}

.wrap-work dl.ttl-border dd p {
	margin-bottom: 10px;
}

.wrap-work dl.ttl-border dd ul {
	margin-bottom: 10px;
}

.wrap-work .float-box .view-box p {
	position: relative;
}

.wrap-work .float-box .view-box p + p {
	margin-top: 20px;
}

.wrap-work .float-box .view-box p a {
	display: block;
	border: 1px solid #eee;
	text-decoration: none;
}

.wrap-work .float-box .view-box a::before {
	box-sizing: border-box;
	display: block;
	position: absolute;
	bottom: -7px;
	right: -9px;
	content: "拡大表示";
	padding: 5px 10px 5px;
	width: 100px;
	background: url(../works/images/icon_view.png) 10px center no-repeat, #4068ac;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", Meiryo, arial, sans-serif;
	color: #fff;
	text-align: right;
	z-index: 100;
}

.wrap-work .float-box .view-box a::after {
	content: "";
	position: absolute;
	right: -9px;
	bottom: 25px;
	border-style: solid;
	border-color: transparent;
	border-style: solid;
	border-width: 9px 9px 0 0;
	border-top-color: #ccc;
	transform: rotate(275deg);
}

.company-box {
	box-sizing: border-box;
	background: #f1f1f1;
	font-size: 14px;
	line-height: 1.6;
}

.company-box {
	padding-bottom: 15px;
}

.company-box h4 {
	margin-bottom: 10px;
	padding: 10px 20px;
	background: #888;
	font-weight: bold;
	color: #fff;
}

.company-box dl {
	box-sizing: border-box;
	padding: 5px 20px;
}

.wrap-work blockquote {
    position: relative;
    margin: 20px auto 0;
    padding: 30px 20px 10px 20px;
    box-sizing: border-box;
    width: 90%;
    background: #efefef;
    color: #555;
}

.wrap-work blockquote::before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: middle;
    content: "”";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 80px;
    line-height: 1;
    font-style: italic;
}

.wrap-work blockquote p {
    padding: 5px 0;
}

.wrap-work blockquote dl {
    padding: 5px 0;
}

.wrap-work ul.disc {
    padding: 5px 0;
}

.wrap-work ul.disc li {
    list-style: disc;
    padding: 2px 0;
}

/* ----- SP ------------------------------ */
@media screen and (max-width: 768px) {

	.wrap-work .sp-none { display: none; }

	.wrap-work .float-box div + div {
		margin-top: 10px;
	}

	.company-box dl {
		margin-top: 8px;
		padding-bottom: 8px;
	}

	.company-box dl:not(:last-child) {
		border-bottom: 1px dotted #bbb;
	}

	.company-box dl dt {
		font-weight: bold;
	}

}

/* ----- PC ------------------------------ */
@media screen and (min-width: 769px) {
	
	.wrap-work .pc-none { display: none; }

	.wrap-work section > div {
		padding: 0 15px;
	}
	
	.wrap-work .float-box:after {
		content: "";
		clear: both;
		display: block;
	}
	
	.wrap-work .float-box div {
		float: left;
		width: 60%;
	}
	
	.wrap-work .float-box .view-box {
		float: right;
		margin-left: 5%;
		width: 35%;
	}
	
	.company-box dl {
		display: table;
		width: 100%;
	}
	
	.company-box dl > * {
		display: table-cell;
	}
		.company-box dl dt { width: 12%; }
		.company-box dl dd { width: 88%; }

}



/* =========================================================================
	old template
========================================================================= */
.compay_name h3 img{
	display: inline-block;
	margin-right: 20px;
	vertical-align: middle;
} 
.compay_name h3{
	font-size: 24px !important;
	font-weight: normal;
}
.works-subject{
    background-image: url(../works/images/icon_bottom_arrow.png);
	background-position: center bottom 0;
	background-repeat: no-repeat;
	background-attachment: scroll;
	padding-bottom: 25px;
}
.works-subject > div{
    background-color: #ecf0f7;
	padding: 20px;
}
.works-subject p{
    display:block;	
}
.works-subject .title{
	height: 25px;
	background: url(../works/images/icon_check.png) no-repeat 0 center scroll;
	padding-left: 35px;
	line-height: 25px;
	font-weight: bold;
    font-size: 18px;
}
.works-subject .subtitle{
	height: 20px;
	border-left: 3px solid #e65457;
	color: #e65457;
	padding-left: 10px;
	line-height: 20px;
	font-weight: bold;
    font-size: 18px;
}
.works-subject .outerBtn{
    display: inline-block;
    padding: 0 0 20px 30px;
}
.works-subject .comment{
    padding: 0 30px 10px;	
}
.works-subject li{
    display:block;
	min-height:15px;
	padding: 0 20px 20px 30px;
	background: url(../works/images/icon_circle.png) no-repeat 0 0 scroll;
	line-height: 1.6;
}
.works-subject li:last-child{
    padding-bottom: 0;	
}


.works-solution h4{
    height: 40px;
	padding-bottom: 20px;	
}
.works-solution > div{
    padding: 0 0 20px;	
}
.works-solution .title{
	
}
.works-solution .subtitle{
	display:inline-block;
	hieght: 20px;
	border-left: 3px solid #e65457;
	color: #e65457;
	padding: 0 20px 0 10px;
	margin-left: 20px;
	line-height: 20px;
	font-weight: bold;
    font-size: 18px;
}
.works-solution .comment{
	display:block;
	padding: 0 20px 0 20px;
	
}
.works-solution .imgbox{
	display:block;
	position: relative;
	padding: 5px 0 5px 20px;
}
.works-solution .text_red{
	color: #e65457;
}
.works-solution dl{
	display: table;
	width: 100%;
	margin-top: 5px;
}
.works-solution  dt{
	display:table-cell;
	width: 150px;
	background:#94c250;
	padding: 15px;
	color: #fff;
	line-height:1.6;
}
.works-solution dd{
	display:table-cell;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	padding: 15px; 
}
.works-solution dd span{
	display: block;
	position: relative;
	padding-left: 40px;
	line-height:1.6;
}
.works-solution dd span:before{
	display: inline-block;
	position: absolute;
	content: "要件：";
	top:0;
	left:0;
}
.works-solution hr{
    height:0;
	border-top:dashed 1px #3885c6;
	margin: 30px 0;
}

.other_works{
    margin-top: 10px;
    padding: 10px 0;
    background: #f1f1f1;
}
.other_works p.company_name {
    padding-bottom: 10px;
    padding-left: 10px;
    border-bottom: dashed 1px #ccc;
}
.other_works div {
    display: table;
    table-layout: fixed;
}
.other_works > div > div {
    display: table-cell;
    width: 50%;
    padding: 10px;
}
.other_works p span {
    display: block;
    height: 20px;
    width: 100px;
    margin-bottom: 10px;
    background: #333;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    text-align: center;
}
.other_works p.company_name span {
    display: inline-block;
    background: #00a5d4;
    margin-right: 15px;
    margin-bottom: 0px;
    color:#fff;
    font-size: 14px;
}
.other_works p.company_name{
	color:#00a5d4;
    font-size: 18px;
}

/* ----- 20170113追記 ----- */
.works-solution ol.decimal li {
	margin: 0 0 10px 40px;
	list-style: decimal;
}

/* 
20170113 index.html作成
------------------------------------------------------------ */
.work-box > * {
	box-sizing: border-box;
}

.work-box a {
	text-decoration: none;
	color: #333;
}

.work-box ul {
	position:  relative;
	line-height: 1.2;
	text-align: center;
}

.work-box ul li {
	margin: 0 1% 1% 0;
	border: 2px solid #ddd;
}

.work-box ul dl > * {
	box-sizing: border-box;
	padding: .5rem;
	width: 100%;
}

.work-box ul dl dt,
.work-box ul dl dd {
	display: table;
	table-layout: fixed;
}

.work-box ul dl dt span,
.work-box ul dl dd span {
	display: table-cell;
	margin: 0 auto;
	vertical-align: middle;
}

.work-box ul dl dd {
	border-top: 1px solid #eee;
}

.work-box ul dl dd + dd {
	background: #436AAE;
	color: #fff;
	font-size: 12px;
}

/* ----- 【sp】index.html  ----- */
@media screen and (max-width: 768px) {
	
	.sp-none {
		display: none;
	}
	
	.work-box ul dl dt {
		padding: 1rem;
	}

}

/* ----- 【pc】index.html  ----- */
@media screen and (min-width: 769px) {
	
	.work-box ul::after {
		content: "";
		clear: both;
		display: block;
	}

	.work-box ul li {
		float: left;
		width: 23.4%;
	}

	.work-box ul dl dt {
		height: 80px;
	}

	.work-box ul dl dt img {
		max-width: 180px;
	}
	
	.work-box ul dl dd {
		height: 50px;
	}
	
}



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

	SP

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

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

#page-functionsandsupport,
#functions-support
{
	width: 100%;
	box-sizing:border-box;
}

.contents-two-colomn .main {
	width: 100%;
	float: none;
}

.side {
	display: none;
}

#functions-support h3 {
	width:100%!important;
}
#functions-support h3 img {
	max-width: 100%!important;
	display:block;
	padding-bottom:20px;
}

.works-subject .title {
	line-height:1.2;
	padding-bottom:25px;
}

.works-subject .comment {
	padding:0 10px;
}

.works-solution dt,
.works-solution dd {
	display:block;
	width:100%;
	box-sizing:border-box;
}
.works-solution dd {
	border:2px solid #ccc;
}

.other_works div {
    display: block;
}
.other_works > div > div {
    display: block;
    width: auto;
    padding: 10px;
}
.other_works p.company_name span{
    display: block;

}
}