@charset "utf-8";

body { position:static; overflow:auto; background:#333; }

body[data_id="movie"] header .subtitle .icon { background-image:url(../img/icon_movie_2.svg); }
body                  header .date           { margin-left:0px; }
body                  header .date     input { width:140px; }

#movie_area                                          { width:96%; max-width:1440px; margin:110px auto 0px auto; }
#movie_area .size                                    { text-align:center; margin-top:10px; }
#movie_area .size       span                         { font-size:16px; color:#fff; }
#movie_area hr                                       { border-top:solid 1px #111; border-bottom:solid 1px #555; border-left:none; border-right:none; height:0; }
#movie_area .cols:after                              { display:block; clear:both; content:" "; }
#movie_area .cols       .col                         { float:left; width:100%; margin-bottom:20px; font-size:16px; background:#aaa; box-shadow:0 3px 6px rgba(0,0,0,0.2); }
#movie_area .cols       .col:first-child             { margin-left:0%; }
#movie_area .cols       .col             .photo      { display:block; width:100%; height:270px; background-color:#000; background-repeat:no-repeat; background-size:cover; background-position: 50% 50%; }
#movie_area .cols       .col             .photo span { display:block; width:100%; height:270px; background:url(../img/movie_play.svg) no-repeat 50% 50%; background-size:60px 60px; }
#movie_area .cols       .col             p           { height:200px; margin:0px; padding:10px; color:#fff; background:#555; }
#movie_area .cols       .col.select      p           { color:#555; background:#fff; }
#movie_area .cols       .col             p      span { font-size:13px; line-height:1.5em; color:#aaa; }

.copy { font-size:11px; text-align:center; padding:20px 0; color:#888; }

@media screen and (max-width:640px)
{
  body        header .date input { width:115px; }
  #movie_area                    { margin:100px auto 0px auto; }
}

@media (min-width:480px) and (max-width:767px)
{
  #movie_area .cols .col                { width:48%; margin-left:4%; }
  #movie_area .cols .col:nth-child(odd) { margin-left:0%; }
}

@media (min-width:768px) and (max-width:1067px)
{
  #movie_area .cols .col                 { width:31%; margin-left:3.5%; }
  #movie_area .cols .col:nth-child(3n+1) { margin-left:0%; }
}

@media (min-width:1068px)
{
  #movie_area .cols .col                 { width:23.05%; margin-left:2.6%; }
  #movie_area .cols .col:nth-child(4n+1) { margin-left:0%; }
}

@media screen and (min-width:2000px)
{
  body        header .date               input       { width:280px; }
  #movie_area                                        { max-width:2880px; margin:220px auto 0px auto; }
  #movie_area .size                                  { margin-top:20px; }
  #movie_area .size  input[type="radio"]             { width:32px; height:32px; }
  #movie_area .size  span                            { font-size:32px; }
  #movie_area hr                                     { border-top-width:2px; border-bottom-width:2px; }
  #movie_area .cols  .col                            { margin-bottom:40px; font-size:32px; box-shadow:0 6px 12px rgba(0,0,0,0.2); }
  #movie_area .cols  .col                .photo      { height:540px; }
  #movie_area .cols  .col                .photo span { height:540px; background-size:120px 120px; }
  #movie_area .cols  .col                p           { height:400px; padding:20px; }
  #movie_area .cols  .col                p      span { font-size:26px; }
  .copy                                              { font-size:22px; padding:40px 0; }
}

@media screen and (min-width:4000px)
{
  body        header .date               input       { width:560px; }
  #movie_area                                        { max-width:5760px; margin:440px auto 0px auto; }
  #movie_area .size                                  { margin-top:40px; }
  #movie_area .size  input[type="radio"]             { width:64px; height:64px; }
  #movie_area .size  span                            { font-size:64px; }
  #movie_area hr                                     { border-top-width:4px; border-bottom-width:4px; }
  #movie_area .cols  .col                            { margin-bottom:80px; font-size:64px; box-shadow:0 12px 24px rgba(0,0,0,0.2); }
  #movie_area .cols  .col                .photo      { height:1080px; }
  #movie_area .cols  .col                .photo span { height:1080px; background-size:240px 240px; }
  #movie_area .cols  .col                p           { height:800px; padding:40px; }
  #movie_area .cols  .col                p      span { font-size:52px; }
  .copy                                              { font-size:44px; padding:80px 0; }
}

@media screen and (min-width:8000px)
{
  body        header .date               input       { width:1120px; }
  #movie_area                                        { max-width:11520px; margin:880px auto 0px auto; }
  #movie_area .size                                  { margin-top:80px; }
  #movie_area .size  input[type="radio"]             { width:128px; height:128px; }
  #movie_area .size  span                            { font-size:128px; }
  #movie_area hr                                     { border-top-width:8px; border-bottom-width:8px; }
  #movie_area .cols  .col                            { margin-bottom:160px; font-size:128px; box-shadow:0 24px 48px rgba(0,0,0,0.2); }
  #movie_area .cols  .col                .photo      { height:2160px; }
  #movie_area .cols  .col                .photo span { height:2160px; background-size:480px 480px; }
  #movie_area .cols  .col                p           { height:1600px; padding:80px; }
  #movie_area .cols  .col                p      span { font-size:104px; }
  .copy                                              { font-size:88px; padding:160px 0; }
}