@charset "UTF-8";
/*----動画サムネイル　220414----*/
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700);
.sherebtn {
 text-align: right;
 margin-right: 0;
}
@font-face {
 font-family: "Flaticon";
 src: url("/css/font/Flaticon.eot");
 src: url("/css/font/Flaticon.eot?#iefix") format("embedded-opentype"), url("/css/font/Flaticon.woff") format("woff"), url("/css/font/Flaticon.ttf") format("truetype"), url("/css/font/Flaticon.svg#Flaticon") format("svg");
 font-weight: normal;
 font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
 @font-face {
  font-family: "Flaticon";
  src: url("/css/font/Flaticon.svg#Flaticon") format("svg");
 }
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
 font-family: Flaticon;
 font-style: normal;
}
.flaticon-back:before {
 content: "\f100";
}
.flaticon-calendar:before {
 content: "\f101";
}
.flaticon-document:before {
 content: "\f102";
}
.flaticon-facebook:before {
 content: "\f103";
}
.flaticon-interface:before {
 content: "\f104";
}
.flaticon-line-logo:before {
 content: "\f105";
}
.flaticon-next:before {
 content: "\f106";
}
.flaticon-pdf:before {
 content: "\f107";
}
.flaticon-read:before {
 content: "\f108";
}
.flaticon-twitter:before {
 content: "\f109";
}
.flaticon-windows:before {
 content: "\f10a";
}
.sherebtn a {
 font-size: 14px;
 border-radius: 4px;
 display: inline-block;
 width: 100px;
 text-align: center;
 font-weight: bold;
}
a.btn-twitter {
 background: #55acee;
 color: #fff !important;
 border: 2px solid #55acee;
}
a.btn-twitter:hover {
 background: #fff;
 color: #55acee !important;
 ;
}
a.btn-facebook {
 background: #3B5999;
 color: #fff !important;
 ;
 border: 2px solid #3B5999;
}
a.btn-facebook:hover {
 background: #fff;
 color: #3B5999 !important;
 ;
}
a.btn-line {
 background: #00c300;
 color: #fff !important;
 ;
 border: 2px solid #00c300;
}
a.btn-line:hover {
 background: #fff;
 color: #00c300 !important;
 ;
}
@media screen and (max-width: 320px) {
 .sherebtn a {
  font-size: 12px;
  width: 80px;
 }
}
@media screen and (max-width: 767px) {
 .otherMenu {
  margin: 10px -15px;
 }
}
@media screen and (min-width: 768px) {
 .otherMenu {
  margin: 10px -15px 0 -40px;
 }
}
.otherMenu div {
 margin-bottom: 10px;
}
.otherMenu div img {
 width: 100%;
}
.description {
 font-size: 125%;
}
@media screen and (max-width: 767px) {
 .description {
  font-size: 100%;
 }
}
.description h2 {
 font-size: 200%;
 font-weight: bold;
}
.description p {
 font-weight: bold;
 line-height: 1.5em;
}
.description a {
 text-decoration: underline !important;
 font-weight: bold;
}
.main {
 /*width: 760px;*/
 font-size: 120%;
 line-height: 1.7em;
 max-width: 100%;
}
@media screen and (max-width: 767px) {
 .main {
  font-size: 100%;
 }
}
@media screen and (max-width: 991px) {
 .main p {
  /*margin-left: 1%;*/
  /*width: 45%;*/
  /*vertical-align: text-top;*/
 }
}
.main .movie, .main .in_preparation {
 /*position: relative;*/
 /*padding-bottom: 56.25%;*/
 /*height: 0;*/
 /*overflow: hidden;*/
 border: solid 1px #d0d0d0;
 margin-bottom: 10px;
}
.main .movie img {
 width: 100%;
}
.main .movie img:hover {
 opacity: 0.5;
}
.main .movie img.noop:hover {
 opacity: 1;
}
.main .movie iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.main .in_preparation {
 padding: 25% 0 30.88%;
 height: 0;
 background-color: #eee;
 border: solid 2px #d0d0d0;
 text-align: center;
 vertical-align: middle;
}
.main p {
 font-weight: bold;
 font-size: 120%;
}
@media screen and (max-width: 374px) {
 .main p {
  font-size: 100%;
 }
}
.main a > p {
 display: inline-block;
 margin-left: 5px;
 font-weight: inherit;
}
.main p.kodawari {
 margin: 0;
 font-size: 90%;
}
.main a.chart {
 position: absolute;
 bottom: 0;
 right: 30px;
 font-size: 75%;
}
.main a.chart img {
 vertical-align: text-bottom;
}
@media screen and (max-width: 767px) {
 .main a.chart {
  bottom: 0em;
  right: 2em;
 }
}
.otherMenu a img:hover {
 opacity: 0.5;
}
.movie_modal_background {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
}
.movie_modal {
 position: absolute;
 left: 0;
 width: 100%;
 margin: 0;
 text-align: center;
}
.movie_modal .inner {
 position: relative;
 display: inline-block;
 text-align: center;
}
.movie_modal-wrap {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
}
.movie_modal iframe {
 width: 800px;
 height: 450px;
 max-width: 100%;
 max-height: 55vw;
 display: none;
}

/*----動画サムネイル　220414----*/
.main .movie{}
.main .movie a{position: relative;display: block;} 
.main .movie a:hover{cursor: pointer;}
.main .movie a:after {
 content: "";
 width: 100%;
 height: 100%;
 background: rgba(35, 35, 35, 0.1);
 z-index: 10;
 position: absolute;
 left: 0;
 top: 0;
}
.main .movie a:before {
 position: absolute;
 left: 50%;
 top: 50%;
 font-size: 80px;
 margin-top: -40px;
 margin-left: -40px;
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 content: "\ea9d";
 z-index: 100;
 color: #fff;
}
.main .movie a:hover:before {
 color: #ff0000;
}