/*	ecshohp.css	*/
@charset "UTF-8";

/* 独自：for いいもの市場 */
#ECArea h2 { background-color: #0087CB;}
#ECArea .incAreaBtn a {
  background-color: #0087CB;
  border: 2px solid #0087CB;
}
#ECArea .incAreaBtn a:hover { color: #0087CB; }


/* 共通（ID名以外）*/
#ECArea dl, #ECArea dt, #ECArea dd, #ECArea h2, #ECArea h3, #ECArea p { margin:0; padding:0;}
#ECArea { padding:1em 0;}

#ECArea h2 {
	border-radius:10px 10px 0 0; border: solid 1px #ccc; 
	color:#FFF; font-size:1.1rem; font-weight:bold;
	margin-bottom:0;
	padding-top:5px; padding-bottom:3px;
	padding-left: 10px;
}
#ECArea h2 span { padding-left:0.5em; font-size:0.9rem; font-weight:normal;}
#ECArea h3 { font-weight:bold; margin:0.5em 0; font-size: 1.0rem;}
#ECArea p.planinfo { font-size: 0.8rem;}
/**/
#ECArea .plan_select {
	justify-content:space-around;
    display: flex;
    flex-wrap: wrap;
	margin-top:0;
}
#ECArea .plan_select article { 
    margin: 0;
    width: 32%;
	display: flex;
	margin-bottom: 1em;	
}
#ECArea .plan_select article a {
    display: block;
    text-decoration: none;
    background-color:#FFF;
    color: #333;
    border: 1px solid rgba(0,0,0,0.2); border-radius: 5px;
	padding:8px;
    width: 100%;
}
/**/
#ECArea .incAreaBox:before { content: ""; display: block; padding-top: 70%; }
#ECArea .incAreaBox {
	margin-bottom:4px;
	display: block;
    position: relative; overflow: hidden;
	width: 100%;
}
#ECArea .incAreaBox img {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
/**/
#ECArea .plan_select a .incAreaBox img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
#ECArea .plan_select a:hover .incAreaBox img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
#ECArea .plan_select article a:hover {
	background-color:#fff;
	box-shadow: 0 0 8px gray;
}

/**/
#ECArea .incAreaBtn { text-align:right;}
#ECArea .incAreaBtn a {
  display:inline-block;
  padding: 0.5em 3em;
  text-align: center;
  text-decoration: none;
  outline: none;
  font:1.0rem bold;
  -webkit-border-radius:3em;
  border-radius: 3em;
  
  position: relative;
  z-index: 2;
  color: #fff;
  overflow: hidden;
}
#ECArea .incAreaBtn a::before,
#ECArea .incAreaBtn a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
#ECArea .incAreaBtn a,
#ECArea .incAreaBtn a::before,
#ECArea .incAreaBtn a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
#ECArea .incAreaBtn a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
#ECArea .incAreaBtn a:hover::after {
  background: #fff;
  -webkit-transform: scale(1);
  transform: scale(1);
}

@media only screen and (max-width: 640px){
#ECArea .plan_select { display: block; width:100%; margin:auto;}
#ECArea .plan_select article { width: 100%;  }