@charset "utf-8";
/* CSS Document */

body, h1, div, p, ul, li{
    margin:0;
    padding:0;

}
/*
body{
    font:16px/1.3 "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}*/
/*
h1.banner_title{
    padding: .3em .8em;
    font-size: 1.2em;
}*/

#banner ul {
    /*height: 700px;*/
    list-style: none;
    display: flex;
    justify-content: flex-start;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    align-items: stretch;
    align-content: space-between;
}
#banner li {
    width: 240px;
    overflow: hidden;
    text-align: center;
}
#banner li a {
    width: 220px;
    padding: 14px;
    display: block;
    text-decoration: none;
}
#banner img.thumbnail {
    margin: .2em 0;
}
#banner button {
    margin-top: .3em;
    /*font-size: .9em;*/
/*font-size: 16px;*/
    margin-right: .3em;
    padding: .5em .8em;
    border-radius: 3px;
    cursor: pointer;
    border-width: 0;
/*    line-height: 1em;*/
}
#banner button::after {
    width: 10px;
    height: 10px;
    padding-left: 5px;
    content: "";
    display: inline-block;
    background: url(play.png) no-repeat 5px 0;
}
.movie_site {
    padding-bottom: .3em;
    font-weight: bold;
    /*font-size: .7em;*/
/*font-size: 16px;*/
}
.release_date {
   /* font-size: .8em;*/
/*font-size: 16px;*/
    padding-bottom: .3em;
}
.release_date::before {
    content: "配信日";
    margin-right: .3em;
    padding: .2em .3em;
}
.movie_title {
    padding-bottom: .3em;
/*font-size: 16px;*/
}
.movie_title::before {
    content: "「";
}
.movie_title::after {
    content: "」";
}
.actress {
    padding-bottom: .3em;
    font-weight: bold;
/*font-size: 16px;*/
}
.movie_description {
    /*font-size: .9em;*/
/*font-size: 16px;*/
    text-align: left;
/*line-height: 26px;*/
}


/* Styles for Text Banner */
#banner.text_banner li {
    width: 100%;
    text-align: left;
    border-bottom: dotted 1px #858585;
}
#banner.text_banner li:last-of-type {
    width: 100%;
    text-align: left;
    border-bottom: none;
}
#banner.text_banner li a {
    width: 100%;
}
#banner.text_banner .movie_description {
    max-width: 94%;
    display: inline-block;
}
#banner.text_banner button {
    margin-top: 0;
    margin-right: 0;
    padding: .3em .5em;
    /*font-size: .8em;*/
}



/* Styles for Blue Theme */
.theme_blue {
    color:#000;
}
.theme_blue h1.banner_title {
    background: #007fff;
    color: #FFFFFF;
}
.theme_blue ul,
.theme_blue li {
    background: #f6f6f6;
}
.theme_blue li:hover {
    background: #FFFFFF;
}
.theme_blue li a {
    color: #333333;
}
.theme_blue button {
    background: #007fff;
    color: #FFF;
}
.theme_blue .release_date::before {
    background: #007fff;
    color: #FFF;
}
.theme_blue .movie_title {
    color: #003eff;
}


/* Styles for Red Theme */
.theme_red {
    color:#000;
}
.theme_red h1.banner_title {
    background: #ff3f59;
    color: #FFFFFF;
}
.theme_red ul,
.theme_red li {
    background: #f6f6f6;
}
.theme_red li:hover {
    background: #FFFFFF;
}
.theme_red li a {
    color: #333333;
}
.theme_red button {
    background: #ff3f59;
    color: #FFF;
}
.theme_red .release_date::before {
    background: #ff3f59;
    color: #FFF;
}
.theme_red .movie_title {
    color: #e92b45;
}


/* Styles for Darkness Theme */
.theme_darkness {
    color: #ffffff;
}
.theme_darkness h1.banner_title{
    background: #1c1c1c;
    color: #FFFFFF;
}
.theme_darkness ul,
.theme_darkness li {
    background: #2f2f2f;
}
.theme_darkness li:hover {
    background: #444444;
}
.theme_darkness li a {
    color: #FFFFFF;
}
.theme_darkness button {
    background: #ec6c11;
    color: #FFF;
}
.theme_darkness .release_date::before {
    background: #1c1c1c;
    color: #FFF;
}
.theme_darkness .movie_title {
    color: #f58400;
}