@charset "UTF-8";

/************************
	main　*/

#main {
	position: relative;
	border: 1px solid #6d0070;
	border-width: 1px 0;
	margin-bottom: 40px;
	background: url(../../shareobject/img/slide_stripe.gif) repeat;
}
#catch {
	position: relative;
	width: 26%;
	float: left;
}
#catch .illust {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 75%;
	padding-top: 15%;
	max-width: 219px;
	margin: auto;
}
#slider {
	width: 74%;
	float: right;
}
#main .note {
	color: #fff;
	background: rgba(0,0,0,0.5);
}

/*slick css*/
.slick-dotted.slick-slider {
	margin-bottom: 0;
}
.slick-dots {
	/*left: -18%;
	bottom: -35px;*/
  bottom: 0;
}
.slick-dots li {
	margin: 2px;
}

@media screen and (max-width: 480px) {
	#catch {
		float: none;
		width: 100%;
		display: none;
	}
	#catch .illust {
		position: static;
		width: 50%;
		padding: 20px 0;
	}
	#slider {
		float: none;
		width: 100%;
	}
	.slick-dots {
		left: 0;
	}
}

/************************
	text　*/
.text{
  text-align: center;
  margin-bottom: 3em;
  padding:1em 2em;
}
@media screen and (max-width: 480px) {
  .text{padding:0em 1em 0.5em;}
}


/************************
	contents_btn　*/
.contents_btn {
  width: 92%;
  margin: auto;
}
.contents_btn h4 {
  text-align: center;
}
.contents_btn .m {
  letter-spacing: 5px;
  transition: all 1s;
}
.contents_btn h4::after {
  content: "";
  display: block;
  background: #6d0070;
  width: 50px;
  height: 3px;
  margin: 1em auto 0;
}
.contents_btn ul {
	letter-spacing: -.4em;
	text-align: center;
}
.contents_btn li {
	display: inline-block;
	width: 33.33%;
	/*max-width: 340px;*/
	letter-spacing: normal;
  opacity: 0;
  -webkit-transition: 0.8s ease opacity;
          transition: 0.8s ease opacity;
}

.contents_btn .inview_action li{ opacity: 1;}
.contents_btn .inview_action li:nth-child(1){
  -webkit-transition: 0.8s ease opacity 0s;
          transition: 0.8s ease opacity 0s;
}
.contents_btn .inview_action li:nth-child(2){
  -webkit-transition: 0.8s ease opacity 0.25s;
          transition: 0.8s ease opacity 0.25s;
}
.contents_btn .inview_action li:nth-child(3){
  -webkit-transition: 0.8s ease opacity 0.5s;
          transition: 0.8s ease opacity 0.5s;
}
.contents_btn .inview_action li:nth-child(4){
  -webkit-transition: 0.8s ease opacity 0.75s;
          transition: 0.8s ease opacity 0.75s;
}
.contents_btn .inview_action li:nth-child(5){
  -webkit-transition: 0.8s ease opacity 1s;
          transition: 0.8s ease opacity 1s;
}
.contents_btn .inview_action li:nth-child(6){
  -webkit-transition: 0.8s ease opacity 1.25s;
          transition: 0.8s ease opacity 1.25s;
}



.contents_btn figure {
  max-width: 310px;
	position: relative;
	margin: 5%;
  /*background: #000;*/
}
.contents_btn figure img {
  /*background: #6d0070;*/
}
.contents_btn figure:hover img {
	/*opacity: 0.7;*/
   background-color: rgba(109,0,112,0.15);
}
/*.contents_btn figure:hover img {
	opacity: 0.7;
}*/

.contents_btn .overscreen{
  position: absolute;
	left: 0.32258064516129%;
	top: 0.4%;
  width:99.354838709677419%;
  max-width:310px;
  height: 75.6%;
  max-height: 189px;
  overflow: hidden;
}
.contents_btn .overscreen_inner{
  position: relative;
  width:100%;
  height: 100%;
}

.contents_btn .overscreen_bg{
  position: absolute;
	left: 0%;
	top: 0%;
  width:100%;
  height: 100%;
  background-color: #000000;
  display: block;
  opacity: 0.5;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: 0.5s ease opacity, 0.3s ease-in-out transform;
          transition: 0.5s ease opacity, 0.3s ease-in-out transform;
}
.contents_btn figure:hover .overscreen_bg{
  opacity: 0.5;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.contents_btn .overscreen_more{
  position: absolute;
	left: 0%;
	top: 50%;
  width:100%;
  height: 100%;
  color: #FFFFFF;
  display: block;
  opacity: 0;
  margin-top:-7px;
  font-size: 14px;
  text-align: center;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: 0.5s ease opacity, 0.6s ease-in-out transform;
          transition: 0.5s ease opacity, 0.6s ease transform;
}
.contents_btn .overscreen_more span{
  display: inline-block;
  padding-left:0.5em;
}
.contents_btn .overscreen_more img{
  width:4px; height: auto;
  margin-top: -6px;
  display: block;
}
.contents_btn figure:hover .overscreen_more{
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.contents_btn figure:hover .overscreen_more img{
  background-color: rgba(0,0,0,0);
}

.overscreen.btn_group .overscreen_more{
  top: 70%;
}

@media screen and (max-width: 480px) {
	.contents_btn li {
		width: 50%;
	}
}