/* header area ------------------------------------------------------- */
header { min-height: 100%; padding-bottom: 30px; padding-top: 30px; overflow: hidden; text-align: center; }
#showMov { background-color: #2F4D66; border: 2px solid #4F7AA1; color: #fff;
  border-radius: 50px; padding: 8px 40px; display: inline-block;
  font-size: 24px; letter-spacing: 3px; }
#twimgArea { width: 90%; margin: 0 auto; }
#twimgArea img { width: 100%; height: auto; }
#showMov { display: inline-block; margin-top: 20px; }

/* container area ------------------------------------------------------- */
.container { background-color: #EAEAEA; padding: 30px 20px; }
.container section { background-color: #fff; width: 100%; margin-bottom: 30px; }
.container .imgArea img { display: block; width: 100%; }
.container .textArea { width: 80%; margin: 0 auto; padding: 30px 0; }
.container .textArea h2 { color: #2E4C66; font-size: 22px; margin-bottom: 20px; }
.container .textArea p { text-align: justify; margin-bottom: 20px; }
.container .textArea a { display: block; width: 120px; text-align: center; 
  border: 2px solid #2E4C66; border-radius: 50px; padding: 5px 0; margin: 0 auto; }

/* movie area ------------------------------------------------------- */
#movie { display: block; }
#movPlayBtn, #movStopBtn, #movCloseBtn { 
  display: inline-block; width: 24px; height: 24px;
  background-repeat: no-repeat; background-size: contain; }
#movPlayBtn { background-image: url(../images/movPlayBtn.png); }
#movStopBtn { background-image: url(../images/movStopBtn.png); }
#movCloseBtn { background-image: url(../images/movCloseBtn.png); }

@media(min-width:970px){
  header { padding-top: 100px; }
  #twimgArea { max-width: 1400px; }

  .container { padding: 10px 0 50px; }
  .container section { width: 100%; max-width: 1200px; margin: 40px auto; overflow: hidden; }
  .container .imgArea { float: left; width: 47%; }
  .container .imgArea img { width: 100%; height: auto; }
  .container .textArea { float: left; width: 53%; padding: 30px 5%; }
  .container .textArea h2 { margin: 20px 0; font-size: 28px;  }
  .container .textArea p { margin: 20px 0; }
  .container .textArea a { margin: 0 auto 0 0; }
  .container section:nth-of-type(2) .imgArea { float: right; }
}

#movFrame { z-index: 9999; }
#movFrame.w3-modal .w3-modal-content { background-color: #666; margin: 0 auto; }
@media (min-width: 993px){
  .w3-modal-content { width: 900px; }
}