@charset "UTF-8";
body { margin: 0; font-family: Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; font-size: 62.5%; line-height: 1; background: #fff9fb; }
@media (max-width: 880px) { body { font-size: 50%; } }
@media (max-width: 600px) { body { font-size: 50%; } }

img { vertical-align: top; max-width: 100%; }

h2 { margin: 0 auto 40px; color: #473232; font-size: 3.6em; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; text-align: center; letter-spacing: .2em; }

p { color: #473232; font-size: 1.8em; line-height: 1.9; }

th, td { color: #473232; line-height: 1; }

a { color: #b27388; word-break: break-all; }

.box { position: relative; padding: 80px 0; }

.row:before, .row:after { content: " "; display: table; }

.row:after { clear: both; }

.row { margin-left: 30px; margin-right: 30px; *zoom: 1; }
@media (max-width: 880px) { .row { margin-left: 5%; margin-right: 5%; } }

.col-2 { position: relative; width: 50%; float: left; }
@media (max-width: 880px) { .col-2 { width: 100%; float: none; } }

.col-3 { position: relative; width: 33.333333%; float: left; }
@media (max-width: 880px) { .col-3 { width: 100%; float: none; } }

.col-4 { position: relative; width: 25%; float: left; }
@media (max-width: 880px) { .col-4 { width: 33.333333%; } }
@media (max-width: 600px) { .col-4 { width: 50%; } }

.col-5 { position: relative; width: 20%; float: left; }
@media (max-width: 880px) { .col-5 { width: 25%; } }
@media (max-width: 600px) { .col-5 { width: 50%; } }

#head { text-align: center; background: #ad0711; }

#news { background: #fae8ee; }
#news p { margin-top: 1.5em; text-align: center; line-height: 1.8; }
@media (max-width: 600px) { #news p { text-align: left; } }

#story p { text-align: center; line-height: 2.8; }
@media (max-width: 600px) { #story p { text-align: left; } }

#cast { padding-top: 20px; background: #f6f0f2; }
#cast p { margin: 0; font-size: 2.4em; text-align: center; line-height: 1.4; }
#cast p span.title { font-size: 0.7em; }
#cast p span.small { font-size: 0.6em; }
#cast .col-1, #cast .col-2, #cast .col-3 { margin-top: 30px; }
#cast .col-4, #cast .col-5 { margin-top: 60px; }
@media (max-width: 600px) { #cast .col-4, #cast .col-5 { margin-top: 30px; } }
#cast .row { margin-left: 15px; margin-right: 15px; }
@media (max-width: 600px) { #cast .row { margin-left: 0; margin-right: 0; } }
#cast .flex { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
#cast .photo { margin-left: 5%; margin-right: 5%; text-align: center; }
#cast .name { position: absolute; bottom: 5%; width: 66%; height: 40px; margin-left: 17%; line-height: 40px; text-align: center; font-size: 2.0em; letter-spacing: .1em; background: url(../img/cast_name.png); }
@media (max-width: 600px) { #cast .name { bottom: 4%; width: 80%; margin-left: 10%; } }
#cast .col-5 .name { width: 76%; margin-left: 12%; }
#cast .border { margin-top: 60px; }

#outline p { margin: 0; font-size: 2.4em; text-align: center; line-height: 1.6; }
#outline p.m { margin-top: 0.5em; }
#outline p.small { font-size: 1.4em; }
#outline p span.title { font-size: 0.8em; }
#outline p span.small { font-size: 0.7em; }
#outline p span.small .icon img { width: 10px; vertical-align: super; }
@media (max-width: 600px) { #outline p span.br:after { content: "\A"; white-space: pre; } }
#outline table { margin-left: auto; margin-right: auto; border-collapse: collapse; }
@media (max-width: 600px) { #outline table { width: 100%; } }
#outline th, #outline td { padding: 0.5em 4em; font-size: 2em; text-align: center; }
@media (max-width: 600px) { #outline th, #outline td { padding: 0.5em 1em; } }
#outline th { border-bottom: 2px solid #897070; }
#outline td { border-bottom: 1px solid #897070; }
#outline .row { margin-top: 30px; }

#foot { padding: 100px 0 80px; background: #282727; }
#foot p { color: #9c9899; text-align: center; font-size: 1.4em; }
#foot p.copyright { margin-top: 20px; }
@media (max-width: 600px) { #foot img { width: 27%; } }

#nav { position: fixed; top: -85px; width: 100%; height: 85px; background: #fff9fb; }
@media (max-width: 600px) { #nav { display: none; } }
#nav a { color: #473232; text-decoration: none; }
#nav .logo { position: absolute; top: 7px; left: 28px; }
#nav .menu { position: absolute; top: 32px; left: 230px; }
#nav .menu a { display: inline-block; margin-right: 35px; font-size: 2.0em; }

#special { padding: 60px 0 140px; overflow: hidden; background: #090909; }
#special h2 { margin-bottom: 60px; color: #fff; }
#special .col { width: 12.5%; float: left; }
@media (max-width: 880px) { #special .col { width: 20%; } }
@media (max-width: 600px) { #special .col { width: 33.333333%; } }