/*######################################################################

		Reset CSS

************************************************************************/

/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	list-style:none;
}

ol {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {
	line-height:1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}


.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}


.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}



a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

input, select {
	vertical-align:middle;
}


iframe {
	max-width: 100%;
}

address {
	font-style: normal;
}

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


/* # =================================================================
   # Other
   # ================================================================= */

body {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

input:-webkit-autofill  {
	-webkit-box-shadow: 0 0 0px 1000px #369 inset;
}

input[type="button"],input[type="submit"]  {
	border-radius: 0;
	-webkit-appearance: none;
}

img {
	-ms-interpolation-mode: bicubic;
}

input[type="submit"]  {
	-webkit-appearance: none;
}


/*
////////////////////////////////////////////////////////////////////////

	�� General

------------------------------------------------------------------------
*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transition: .4s margin ease-out;
	-moz-transition: .4s margin ease-out;
	-ms-transition: .4s margin ease-out;
	-o-transition: .4s margin ease-out;
	transition: .4s margin ease-out;
}

@font-face {
	font-family: "YuGothic-M";
	font-weight: normal;
	 src: local("YuGothic-Medium"),
		  local("Yu Gothic Medium"),
		  local("YuGothic-Regular");
}

@font-face {
	font-family: "MyYuGothic-M";
	font-weight: bold;
	 src: local("YoGothic-Bold"),
		  local("Yu Gothic");
}

html {
	font-size: 62.5%; /* 10px = 1rem */
}

body {
	color: #333;
	font-family: "MyYuGothic-M", "YuGothic", "-apple-system", "blinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "���C���I", "Meiryo", sans-serif;
	font-weight: 500;
	text-align: justify;
	line-height: 1.61;
	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	font-size:1.6rem;
}


/* -------
	Link Style
------- */

a {
	color: #43abc9;
	text-decoration: none;
}

a:hover {
	color: #107896;
	-webkit-transition: 0.1s ease;
	-moz-transition: 0.1s ease;
	-o-transition: 0.1s ease;
	transition: 0.1s ease;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

p a {
	text-decoration: underline;
}

p a:hover {
	text-decoration: none;
}


/* -------
	Section
------- */

.section {
	margin: 0 0 1rem;
	padding: 3rem 0 0rem 0;
/*		border-bottom: 1px dashed #dcdcdc;	/**/
}

.section-area {
	margin: 0 auto;
	margin: 0em 0 0em 0;
	width: 100%;
	padding:0 3rem;
}


#movie_list .h3_wrap {
  margin-bottom: 1.5em;
  top: 50%;
  left: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index:0;

}
#movie_list h3 {
  position: relative;
  color: #333;
  text-shadow: 0 0 2px white;
  font-size:2.0rem;

}
#movie_list h3:before {
  content: "";
  position: absolute;
  background: #4FC3F7;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index:-1;
}


.section-title {
	margin: 0 0 2rem;
	font-size: 2.0rem;
	text-align: center;
}


#movie_list {
width: 80%;margin:0 auto;
}

#movie_list h1 {
	text-align:center;
	margin:2rem auto;
}


#movie_list .h2_wrap {
	text-align:center;
	margin-bottom: 4em;
}

#movie_list h2 {
  position: relative;
  display: inline-block;
  font-size:2.6rem;
  color:#014190;
}
#movie_list h2:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #014190;
  border-radius: 2px;
}


#movie_list .m_list ul {
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
}
#movie_list .m_list ul li {
	width : 33%;
	padding:0 10px 20px 0;
	text-align:left;
}
#movie_list .m_list ul li p {
	margin:1em 0 1em;
	font-size:1.4rem;
}
#movie_list .m_list ul li p.cap {
	font-size:1.6rem;
}

	#movie_list .m_list ul {
		dlex-direction:column;
	}
	#movie_list .m_list ul li {
		width : 100%;
		margin: 0 ;
		padding:0 5px;
	}



.cap{
	margin: 0px auto 0px auto;
	text-align:left  ;
	padding: 0px 0px 0px 0px;
}	


a.button {
  position: relative;
  display: inline-block;
  padding: .9em 4em;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
a.button::before {
  position: absolute;
  top: 50%;
  left: .8em;
  content: '';
  margin-top: -5px;
  border: 7px solid transparent;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-right-color: #fff;
  opacity: 0;
}
a.button:hover::before {
  animation: arrow 1.2s infinite;
  color: #fff;
}
@keyframes arrow {
  50% {
    left: .2em;
    opacity: 1;
  }
  100% {
    left: -.4em;
    opacity: 0;
  }
}

#footer {width:90%;margin:10px auto 100px auto;text-align:center;}

.btn_wrap {
	margin: 3em auto;
	text-align:center;
}

.videoBox  {
	position: relative;
	display:block;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	width:320px;
	height:180px;
}
.videoBox .play {
position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
	opacity: 0.9;
	z-index:0;
}
.video {
	-webkit-transition: 0.5s ease-in-out;
	z-index:0;
}
.videoBox:hover {
	opacity: 0.7;
	box-shadow: 0px 0px 10px rgba(0,0,0,.3);
/*
	box-shadow: 10px 10px 15px -10px;
*/
}

img { max-width: 100%;margin: 0px auto 0px;padding: 0px 0px 0px 0px;vertical-align: bottom;}