@charset "utf-8";

/* ===

ABOUT PAGE STYLE

Last Updated: 2014/05/07 (TAKATA)
======================================= */

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

	COMMON

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



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

	/about/index.html

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

#page-about .graph-pdca {
	width: 600px; height: 400px;
	position: relative;
	margin-bottom: 20px;
}
#page-about .graph-pdca img { position: absolute ;width: 300px; height: 200px;}
#page-about .graph-pdca img.pdca-p { left: 0; top: 0; }
#page-about .graph-pdca img.pdca-d { left: 300px; top: 0; }
#page-about .graph-pdca img.pdca-c { left: 300px; top: 200px; }
#page-about .graph-pdca img.pdca-a { left: 0; top: 200px; }

#page-about .menu-about li {
	width: 193px; height: 73px;
	float: left;
	margin-right: 10px;
}

#page-about .menu-about li.last { margin-right: 0; }


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

	/about/function.html

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

#page-function .menu-function {
	padding-top: 10px;
}

#page-function .menu-function li {
	float: left;
	width: 123px; height: 123px;
	padding-right: 22px;
}

#page-function .menu-function li.last { margin-right: 0; }

#page-function .menu-btn {
	margin-bottom: 20px;
}

#page-function .menu-btn li {
	float: left;
	margin-right: 10px;
}

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

	/about/interface.html

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

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

	/about/reason.html

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

#page-reason .menu-btn {
	margin-bottom: 40px;
}

#page-reason .menu-btn li {
	margin-bottom: 10px;
}

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

	SP

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

.graph-pdca-sp {
	display:none;
}

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

#page-about,
#page-interface,
#pdca,
.graph-pdca,
#interface,
#page-reason,
#reason,
#page-function,
#function
{
	width: 100%;
	box-sizing:border-box;
}

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

.side {
	display: none;
}

#pdca h2,
#pdca h2 img,
#interface h2,
#interface h2 img,
#interface img,
#reason h2,
#reason h2 img,
#reason h3,
#reason h3 imgl,
#function h2,
#function h2 img,
#function h3,
#function h3 img
{
	width: 100%!important;
}

.graph-pdca {
	width: 100%;
}

.graph-pdca img {
	width: 50%;
}

.menu-about {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}
.menu-about li {
	width: auto!important;
	height: auto!important;
	float: none!important;
	margin: 0 0 10px 0!important;
}
#page-function .menu-function li {
	width:40%;
}
.graph-pdca {
	display:none;
}

.graph-pdca-sp {
	display:block;
	width:100%;
	box-sizing:border-box;
}

.graph-pdca-sp dl{
	margin-bottom:10px;
}

.graph-pdca-sp dl:last-child{
	margin-bottom:30px;
}
.graph-pdca-sp dl dt {
	padding:10px;
	color:#FFF;
}

.graph-pdca-sp dl dt span {
	font-weight:bold;
	font-size:16px;
	margin-right:15px;
}

.graph-pdca-sp dl dd {
	padding:10px;
}

.graph-pdca-sp dl dd ul li{
	margin-bottom:5px;
	padding-left:1em;
	text-indent:-1em;
	line-height:1.5;
}
.graph-pdca-sp .plan dt{ background:#EC7071; }
.graph-pdca-sp .do dt{ background:#FFB057; }
.graph-pdca-sp .check dt{ background:#A5CD69; }
.graph-pdca-sp .action dt{ background:#5CC4DC; }
.graph-pdca-sp .plan dd{ border:1px solid #EC7071; }
.graph-pdca-sp .do dd{ border:1px solid #FFB057; }
.graph-pdca-sp .check dd{ border:1px solid #A5CD69; }
.graph-pdca-sp .action dd{ border:1px solid #5CC4DC; }

#easy .img-box,
#approach .img-box
{
	display:none;
}

}

.img-box + .img-box{
	margin-top: 1em;
}

.img-box.center{
	text-align: center;
}

h3.icon_ttl{
	position:relative;
	padding-left: 2em;
	font-size: 135%;
	line-height: 1.672;
	font-weight: normal;
	box-sizing: border-box;
}

h3.icon_ttl:before{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	width: 1.5em;
	height: 100%;
	display: block;
	background-size: 1.5em auto;
	background-repeat: no-repeat;
	background-repeat: no-repeat;
	background-position: left center;
}

@media only screen and (max-width: 768px){
	h3.icon_ttl {font-weight: bold;}

h3.icon_ttl br{
	display: none;
}
}

h3.icon_ttl:after{
	content: '';
	position: absolute;
	top: calc(50% - 0.25em);
	left: 1.5em;
	border-left-width: 0.25em;
	border-left-style: solid;
	border-top: 0.25em solid transparent;
	border-bottom: 0.25em solid transparent;
}

h3.icon_ttl.red{
	color: #e85353;
	background-color: #fceeee;
}

h3.icon_ttl.red:before{
	background-color: #e96161;
}

h3.icon_ttl.red:after{
	border-left-color:#e96161;
}

h3.icon_ttl.red.icon_variation:before{
	background-image: url(../images/about/function_variation_h3_ttl.gif);
}
h3.icon_ttl.red.icon_database:before{
	background-image: url(../images/about/function_database_h3_ttl.gif);
}

h3.icon_ttl.yellow{
	color: #ffa030;
	background-color: #fff5ea;
}

h3.icon_ttl.yellow.icon_enquete:before{
	background-image: url(../images/about/function_enquete_h3_ttl.gif);
}

h3.icon_ttl.yellow:before{
	background-color: #ffa030;
}

h3.icon_ttl.yellow:after{
	border-left-color:#ffa030;
}

h3.icon_ttl.blue{
	color: #39b8d5;
	background-color: #ecf8fb;
}

h3.icon_ttl.blue.icon_approach:before{
	background-image: url(../images/about/function_approach_h3_ttl.gif);
}

h3.icon_ttl.blue:before{
	background-color: #39b8d5;
}

h3.icon_ttl.blue:after{
	border-left-color:#39b8d5;
}

@media screen and ( min-width: 769px ) {
	h3.icon_ttl{
	font-size: 216%;
	line-height: 1.5;
	}
}

.database_flow{
	position: relative;
	margin-top: 2em;
	margin-bottom: 7em;
	background: linear-gradient(to right, #fff 0%, #fff 35%, #FBE0E0 35%,  #FBE0E0 65%,#fff 65%,#fff 100%);
}

.database_flow:after{
	content: '';
	position: absolute;
	bottom: -6em;
	left: calc(50% - 12em);
	margin: auto;
	border-top: 6em solid #FBE0E0;
	border-right: 12em solid transparent;
	border-left: 12em solid transparent;
}

.database_flow img{
	width: 100%;
	margin-bottom: 1em;
	border: 1px solid #cccccc;
}

.database_flow h4{
	font-size: 1.5em;
	color: #4369AD;
	margin-bottom: 0.5em;
	margin-top: 1.5em;
}

.database_flow .start{
	position: absolute;
	left: 0;
	right: 0;
	color: #e96161;
	font-size: 2.5em;
	font-weight: normal;
	text-align: center;
	z-index: 1;
	margin-top: 0.25em;
}


/*.database_flow2*/
.database_flow2{
	margin-top: 3em;
}
.database_flow2 .arrow{
	position: relative;
	width: 100%;
	height: 3em;
	margin-top: -4em;
	opacity: 0.5;
	content: '';
	background: linear-gradient(to right, transparent 0%, transparent 45%, #e09999 45%,  #e09999 55%,transparent 55%,transparent 100%);
}

.database_flow2 .arrow:after{
	content: '';
	position: absolute;
	bottom: -2.5em;
	left: calc(50% - 5em);
	margin: auto;
	border-top: 3em solid #e09999;
	border-right: 5em solid transparent;
	border-left: 5em solid transparent;
}

.database_flow2 img{
	width: 100%;
	margin-bottom: 1em;
	border: 1px solid #cccccc;
}

.database_flow2 img.no_border{
	border: none;
}

.database_flow2 h4{
	font-size: 1.5em;
	color: #4369AD;
	margin-bottom: 0.5em;
	margin-top: 1.5em;
}

/*#database*/
#database .img-box.flow{
	width: 100%;
	display:flex;
	align-items: flex-start;
	margin-bottom:20px;
}

#database .img-box.flow > img{
	width: calc((170/600)*100%);
}

#database .img-box.flow > img:last-of-type{
	width: calc((90/600)*100%);
}




/*.enquete_about*/
.enquete_about img{
	width: 100%;
	margin-bottom: 1em;
	border: 1px solid #cccccc;
}

.enquete_about h4{
	font-size: 1.5em;
	color: #4369AD;
	margin-bottom: 0.5em;
	margin-top: 1.5em;
}

/*.fukidashibox*/
.fukidashibox{
	text-align: center;
}
.fukidashibox img{
	width: 100%;
	margin-bottom: 1em;
	border: 1px solid #cccccc;
}

.fukidashibox h4{
	font-size: 1.5em;
	color: #4369AD;
	margin-bottom: 0.5em;
	margin-top: 1.5em;
	text-align: left;
}

.fukidashibox .fukidashi{
	position: relative;
  display: inline-block;
  padding: 0.5em 1em;
	line-height: 1.5;
	width: auto;
  max-width: 100%;
	text-align: center;
  color: #4369AD;
  background: #FFF;
  border: solid 3px #4369AD;
  box-sizing: border-box;
	font-weight: bold;
}
.fukidashibox .fukidashi:before {
	content: "";
  position: absolute;
  left: 50%;
  margin-left: -15px;
	z-index: 3;
}
.fukidashibox .fukidashi:after {
	content: "";
  position: absolute;
  left: 50%;
  margin-left: -17px;
  z-index: 2;
}

.fukidashibox .fukidashi.bottom{
	margin-bottom: -1em;
	margin-top: 1em;
}

.fukidashibox .fukidashi.top{
	margin-top: -1em;
	margin-bottom: 1.5em;
}

.fukidashibox .fukidashi.bottom:before {
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
	bottom: -24px;
}

.fukidashibox .fukidashi.bottom:after {
  border: 14px solid transparent;
  border-top: 14px solid #4369AD;
	bottom: -30px;
}

.fukidashibox .fukidashi.top:before {
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
	top: -24px;
}

.fukidashibox .fukidashi.top:after {
  border: 14px solid transparent;
  border-bottom: 14px solid #4369AD;
	top: -30px;
}