@charset "utf-8";

@import url("common.css");

#main-contents .event .outline {
	margin-bottom:100px;
	border-radius:10px;
	background:#fff;
	overflow:hidden;
}


/* poster */
#main-contents .event .poster {
	margin-bottom:30px;
	background:url(../../img/bg_stripe.jpg);
}
#main-contents .event .poster img {
	width:350px;
	margin:0 auto;
}
#main-contents .event .wide img {
	width:660px;
}

/* thumbnail */
#main-contents .event .tumb {
	margin-bottom:30px;
	text-align:center;
}
#main-contents .event .tumb li {
	display:inline-block;
	position:relative;
	width:85px;
	margin:0 5px;
	height:79px;
	border:3px #e7e1db solid;
	border-radius:4px;
	overflow:hidden;
	cursor:pointer;
}
.hover #main-contents .event .tumb li:hover {
	opacity:0.8;
	transition:.3s;
}
#main-contents .event .tumb li img {
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
}
#main-contents .event .tumb li.wide img {
	top:0;
	left:50%;
	transform:translate(-50%, 0);
	-webkit-transform:translate(-50%, 0);
	-moz-transform:translate(-50%, 0);
	width:auto;
	height:100%;
}
#main-contents .event .tumb li:after {
	display:block;
	content:"";
	position:absolute;
	bottom:2px;
	right:2px;
	width:20px;
	height:21px;
	background:url(../../img/icon_zoom.png) no-repeat left top / 100% auto;
}

/* CM movie */
#main-contents .event .cm-movie {
	position:relative;
  margin-bottom: 50px;
  padding-top: 56.25%;
}
#main-contents .event .cm-movie iframe {
	display:block;
	position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* outline */
#main-contents .event .inner {
	padding:20px 40px 80px;
}
#main-contents .event .inner .category {
	display:inline-block;
	margin-bottom:15px;
	padding:5px 10px;
	border-radius:4px;
	background:#d70c19;
	color:#fff;
	font-size:87.5%;
}
#main-contents .event .inner h2 {
	line-height:1.5;
	margin-bottom:50px;
	font-weight:bold;
	font-size:187.5%;
}
#main-contents .event .inner h3 {
	position:relative;
	margin-bottom:20px;
	padding:10px 20px;
	border-radius:4px;
	background:#e7e1db;
	font-size:112.5%;
}
#main-contents .event .inner h3:before {
	display:block;
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:0;
	height:10px;
	margin:auto;
	border-left:5px #d70c19 solid;
}
#main-contents .event .inner .text {
	line-height:2;
	margin-bottom:50px;
	padding:0 20px;
}
#main-contents .event .inner strong {
	color:#d70c19;
}
#main-contents .event .inner .data-list strong:after {
	content:"：";
	color:#000;
}
#main-contents .event .inner .text table {
  border-right: 2px #000 solid;
  border-bottom: 2px #000 solid;
}
#main-contents .event .inner .text table th,
#main-contents .event .inner .text table td {
  padding: 5px 20px;
  border-top: 2px #000 solid;
  border-left: 2px #000 solid;
  text-align: center;
  vertical-align: middle;
}
#main-contents .event .inner .text table th {
  font-weight: bold;
}
#main-contents .event .inner .sponsor {
	padding:25px;
	border-radius:5px;
	background:#f4f2f0;
}
#main-contents .event .inner .sponsor .data-list {
	float:left;
	width:530px;
	line-height:2;
}
#main-contents .event .inner .sponsor .link-img {
	float:right;
	width:220px;
	border-radius:4px;
	background:#fff;
}
#main-contents .event .inner .sponsor .link-img a {
	display:block;
	width:100%;
	height:100%;
	padding:40px 0;
}
#main-contents .event .inner .sponsor .link-img a img {
	width:88px;
	margin:0 auto;
}
#main-contents .event .back-btn {
	margin-top:50px;
}


/* journal */
#main-contents .event-journal .ttl-h {
	padding:75px 0 60px;
	background:url(../../../img/ttl_common_journal.png) no-repeat center top;
	text-align:center;
}
#main-contents .event-journal .ttl-h span {
	width:245px;
	font-weight:bold;
	font-size:162.5%;
}




@media all and (max-width: 812px) {
  #main-contents .event .outline {
    margin-bottom:50px;
  }


  /* poster */
  #main-contents .event .poster {
    margin-bottom:18px;
  }
  #main-contents .event .poster img {
    width:53%;
  }
  #main-contents .event .wide img {
    width:73%;
  }

  /* thumbnail */
  #main-contents .event .tumb {
    margin-bottom:18px;
    text-align:center;
  }
  #main-contents .event .tumb li {
    display:inline-block;
    position:relative;
    width:85px;
    margin:0 5px;
    padding-top:85px;
    border:3px #e7e1db solid;
    border-radius:4px;
    overflow:hidden;
    cursor:pointer;
  }
  #main-contents .event .tumb li img {
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
  }
  #main-contents .event .tumb li.wide img {
    top:0;
    left:50%;
    transform:translate(-50%, 0);
    -webkit-transform:translate(-50%, 0);
    -moz-transform:translate(-50%, 0);
    width:auto;
    height:100%;
  }
  #main-contents .event .tumb li:after {
    display:block;
    content:"";
    position:absolute;
    bottom:2px;
    right:2px;
    width:20px;
    height:21px;
    background:url(../../img/icon_zoom.png) no-repeat left top / 100% auto;
  }


  /* CM movie */
  #main-contents .event .cm-movie {
    margin-bottom: 30px;
  }



  /* outline */
  #main-contents .event .inner {
    padding:6% 5% 21%;
    word-wrap: break-word;
  }
  #main-contents .event .inner .category {
    margin-bottom:8px;
    font-size:81.3%;
  }
  #main-contents .event .inner h2 {
    margin-bottom:25px;
    font-size:118.8%;
  }
  #main-contents .event .inner h3 {
    margin-bottom:10px;
    padding:8px 15px;
    font-size:100%;
  }
  #main-contents .event .inner .text {
    margin-bottom:25px;
    padding:0;
    font-size:87.5%;
  }
  #main-contents .event .inner .sponsor {
    padding:5%;
  }
  #main-contents .event .inner .sponsor .data-list {
    float:none;
    width:100%;
    line-height:1.7;
    margin-bottom:10px;
    font-size:87.5%;	
  }
  #main-contents .event .inner .sponsor .link-img {
    float:none;
    width:100%;
  }
  #main-contents .event .inner .sponsor .link-img a {
    padding:8% 0;
  }
  #main-contents .event .back-btn {
    margin-top:40px;
  }


  /* journal */
  #main-contents .event-journal .ttl-h {
    padding:41px 0 36px;
    background:url(../../../img/ttl_common_journal.png) no-repeat center top / 160px auto;
  }
  #main-contents .event-journal .ttl-h span {
    width:150px;
    font-size:97%;
  }


	
}




@media all and (max-width: 568px) {
  #main-contents .event .inner .text table {
    width: 100%;
  }
  #main-contents .event .inner .text table th,
  #main-contents .event .inner .text table td {
    padding: 3px 10px;
  }
}