/* CSS Document */

/* 共通設定 */
section h3 + div{
	margin:40px auto 0;
}

a.btn{
	background:url(../../common/img/parts/black_arrow.png) no-repeat 95% center, #FFC222;
	width:260px;
	height:50px;
	margin:0 auto;
	text-decoration:none;
	color:#2A2A2B;
	border:1px solid #FFC222;
	border-radius:10px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-transition:0.7s;
	-moz-transition:0.7s;
	transition:0.7s;
}

a.btn:hover{
	background-color:#FFFFFF;
}


/* コープえひめとは */
#howto {
	width:960px;
	margin:0 auto;
}
#howto > div:first-of-type {
	margin-bottom:70px;
}
#howto > div:first-of-type h4{
	margin-bottom:20px;
	text-align:center;
}
#howto > div:first-of-type p {
	width:690px;
	margin:0 auto 15px;
}

#howto .bg_figure {
	min-height:500px;
	background:url(../img/howto/figure01.png) no-repeat center center;
	position:relative;
}
#howto .bg_figure p {
	font-weight:bold;
	font-size:14px;
	position:absolute;
}
#howto .bg_figure p:nth-child(1) {
	width:320px;
	color:#349d00;
}
#howto .bg_figure p:nth-child(1) span {
	display:block;
	font-weight:bold;
	text-indent:-1em;
	margin-left:1em;
	margin-top:.8em;
}
#howto .bg_figure p:nth-child(2) {
	width:240px;
	color:#1d8ed6;
	right:0;
	bottom:48%;
}
#howto .bg_figure p:nth-child(3) {
	width:220px;
	color:#e44e51;
	left:0;
	bottom:0;
}

/* コープえひめの理念 */
#corporate {
}
#corporate h4 {
	color:#cb4e51;
	font-size:24px;
	font-weight:bold;
	margin-bottom:8px;
}
#corporate > div{
	text-align:center;
}

#vision {
	margin-top:-30px;
}
#vision ul{
	width:72%;
	margin:0 auto 30px;
}
#vision li{
	color:#348e45;
	font-size:18px;
	font-weight:bold;
	line-height:36px;
}

/* 組織概要 */
#profile {
	padding:50px 0 0;
}
#profile img {
}
#profile > div > table {
	margin:0 auto;
	box-shadow:0px 1px 4px 1px #cccccc;
}
#profile table th,
#profile table td {
	font-size:14px;
	padding:9px 18px;
	border-right:1px solid #c9bfa4;
	border-bottom:1px solid #c9bfa4;
}
#profile table th {
	text-align:center;
}
#profile table td {
}
#profile table td span {
	color:#cb4e51;
	font-weight:bold;
	font-size:18px;
}
#profile table td table{
	border-left:1px solid #c9bfa4;
	border-top:1px solid #c9bfa4;
}
#profile div table + p{
	width:600px;
	font-size:14px;
	margin:10px auto 0;
	text-align:right;
	letter-spacing:1px;
}


/* 組織図 */

#org_chart {
	margin:0 auto;
	padding:50px 0;
}

#org_chart div{
	text-align:center;
}

#org_chart img {
}


/* 事業所一覧 */

#office_list {
}
#office_list > div > p{
	text-align:center;
	margin-bottom:30px;
}
#office_list > div > p img {
	display:block;
	margin:0 auto 20px;
}
#office_list #thumb {
	margin-bottom:40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* Safari */
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start; /* Safari */
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#office_list #thumb li {
	background:#FFFFFF;
	padding:10px 20px 15px;
	border-radius: 7px;        /* CSS3草案 */  
	-webkit-border-radius: 7px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 7px;   /* Firefox用 */  
	box-shadow:0px 1px 4px 1px #cccccc;
}
#office_list #thumb li a{

}
#office_list #thumb li a:hover{

}
#office_list #thumb li h4{
	text-align:center;
	color:#e44e51;
	font-size:22px;
	font-weight:bold;
	margin-bottom:0.2em;
}
#office_list #thumb li img {
	display:block;
	margin-bottom:1em;
}

/* linkの設定 */
ul#btn{
	margin-bottom:40px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
}
ul#btn li{
	text-align:center;
	margin:0 25px;
}
ul#btn li a{
	width:260px;
	display:block;
	padding:15px 20px 15px;
	text-decoration:none;
	color:#FFFFFF;
	border:1px solid #3A937A;
	border-radius:10px;
	-webkit-transition:0.7s;
	-moz-transition:0.7s;
	transition:0.7s;
	box-sizing:border-box;
}
ul#btn li a{
	background:url(../../common/img/parts/white_arrow.png) no-repeat 95% center, #3A937A;
}
ul#btn li a:hover{
	background:url(../../common/img/parts/black_arrow.png) no-repeat 95% center, #FFFFFF;
	font-weight:bold;
	color:#3A937A;
}


/* btnList */
#btnList ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#btnList ul li{
	width:calc((100% - 40px) / 3);
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	margin-right: 20px;
}

#btnList ul li:nth-of-type(3n){
	margin-right: 0;
}

#btnList ul li:nth-of-type(3) ~ li{
	margin-top: 20px;
}

#btnList ul a{
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #3A937A;
	text-decoration: none;
	background: #3A937A;
	transition: 0.5s;
	height: 80px;
}

#btnList ul a span{
	font-weight: bold;
	font-size: 20px;
	color: #ffffff;
}

#btnList ul a:hover{
	opacity: 0.4;
}



#colorconcept .title + *{
    max-width: 768px;
}


/* markconcept */
#markconcept > img{
    display: block;
    margin: 0 auto 40px;
    max-width: 360px;
}

#markconcept .title + *{
    max-width: 690px;
}

/* colorconcept */
#colorconcept .title + *{
    text-align: center
}

#colorconcept .colorList{
    display: inline-block;
}

#colorconcept .colorList > li{
    display: flex;
}

#colorconcept .colorList > li + li{
    margin-top: 10px;
}

#colorconcept .colorList > li::before{
    content: "";
    display: block;
    border-radius: 99px;
    margin-right: 10px;
    min-width: 20px;
    height: 20px;
    width: 20px;
}

#colorconcept .colorList .purple::before{
    background: #4a4a9c;
}

#colorconcept .colorList .rose::before{
    background: #e84653;
}

#colorconcept .colorList .green::before{
    background: #00a172;
}

#colorconcept .colorList .yellow::before{
    background: #f7b400;
}