@charset "euc-jp";
/* CSS Document */

body {
margin: 0;
padding:50px 0 50px 0;
background-color: #fffef6;
font-size:16px;
line-height:1.9em;
color:#191919;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-feature-settings: "palt";
letter-spacing: 0.05em;
}

p {
margin-bottom:1.5em;
}

strong {
font-weight: bold;
}

a:hover img {
filter:brightness(90%);
}

.center {
text-align: center;
}

.pc {
display:inline-block;
}

.sp {
display:none;
}

/* -------------------------------------------------
content
-------------------------------------------------*/

#content-wrapper {
max-width:1200px;
padding:0 40px;
margin:0 auto;
}

/* 見出し */

h1 {
text-align:center;
margin-bottom:40px;
}

h2 {
display: block;
padding:24px 0 24px 50px;
border-bottom: solid 2px #3d3d3d;
margin-bottom:30px;
font-family: "FOT-筑紫Aオールド明朝 Pr6 D","TsukuAOldMinPr6-B";
font-size:36px;
letter-spacing: 0.05em;
line-height: 1.2em;
}

h2.center {
text-align: center;
padding:0;
margin-top:60px;
border:none;
}

h2.enabled {
background-image: url("../images/icon_plus.png");
background-repeat: no-repeat;
background-position:10px center;
cursor: pointer;
}

h2.active {
background-image: url("../images/icon_minus.png");
background-repeat: no-repeat;
background-position:10px center;
cursor: pointer;
}

h2 span {
font-size:0.8em;
}

h3 {
display: block;
margin-bottom:40px;
font-family: "FOT-筑紫Aオールド明朝 Pr6 D","TsukuAOldMinPr6-B";
font-size:24px;
letter-spacing: 0.05em;
}

h3.right {
text-align: right;
}

h3.statement {
font-size:30px;
line-height: 1.7em;
}

/* ポスター・作品紹介 */

#poster-wrapper {
text-align: center;
margin-bottom: 30px;
}

#poster-wrapper span {
display: block;
width: 100%;
margin: 20px 0;
}

#poster-wrapper a {
display: inline-block;
width: 500px;
background-color:#333331;
color:#fff;
font-weight: bold;
text-decoration: none;
padding:20px 0;
border-radius: 4px;
background-image:url("../../images/icon_blank.png");
background-repeat: no-repeat;
background-position: right 30px center;
background-size:20px auto;
}

#poster-wrapper a:hover {
background-color:#7f7f7b;
}

/* 各コンテンツ */

.article-container {
padding:20px 50px;
display: none;
}

.article-container.visible {
display: block;
}

dl::after {
content: "";
clear: both;
display: block;
}

dt {
display: block;
float:left;
clear: left ;
width:9em;
padding:0.4em 1.5em;
font-weight: bold;
text-align: right;
border-right: solid 2px #3d3d3d;
margin-bottom: 24px;
}

dd {
display: block;
margin-left:12em;
padding:0.4em 1.5em;
margin-bottom: 24px;
}

dd img {
margin:20px 0 0 0;
width:100%;
max-width: 760px;
height: auto;
display: block;;
}

dd ul {
margin-top: 0.5em;
}

dd ul li {
line-height: 1.0em;
margin-bottom:0.5em;
}

.article-container.normal-list dt {
display: block;
float:none;
clear: both;
width:100%;
padding:0.4em 0em;
font-weight: bold;
text-align: left;
border-right: none;
margin-bottom: 0.3em;
font-size: 1.2em;
}

.article-container.normal-list dd {
display: block;
margin-left:0;
padding:0.4em 0em;
margin-bottom: 1.5em;
}

#haishin-container {
display: block;
padding:30px 20px;
background-color: #fff;
border:solid 2px #000;
text-align: center;
line-height: 1.5em;
}

#haishin-container h4 {
font-size:24px;
font-weight: bold;
margin-bottom:20px;
}

#haishin-container h4 span {
font-size:0.8em;
}

/* 作品リスト */

ul.poster-list {
display: flex;
flex-wrap: wrap;
}

ul.poster-list li {
width:21%;
text-align: center;
margin:0 2% 30px 2%;
position: relative;
}

ul.poster-list li a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

ul.poster-list li img {
width:100%;
height: auto;
}

ul.poster-list li h3 {
margin: 20px 0px 6px 0px;
}

ul.poster-list li h4 {
margin: 0x;
}

ul.poster-list li.linked h3 {
color: #128abc;
}

/* 劇場リスト */

.article-container.wide {
padding:20px 0px;
}

h3.area {
text-align: center;
background-color: #f4efcb;
padding:0.5em 1em;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 1.2em;
font-weight: bold;
}

ul.theater-list {
display: flex;
flex-wrap: wrap;
justify-content:center;
text-align: center;
}

ul.theater-list li {
width:150px;
text-align: center;
margin:0 2% 30px 2%;
position: relative;
}

ul.theater-list li a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

ul.theater-list li img {
width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 10px;
}

ul.theater-list  li h4 {
margin: 0x;
line-height: 1.5em;
}

/* トップへ戻るリンク */

#link-top {
margin:30px 0;
text-align: center;
font-family: "FOT-筑紫Aオールド明朝 Pr6 D","TsukuAOldMinPr6-B";
}

#link-top a {
display: inline-block;
font-size: 1.4em;
padding:20px 50px 20px 50px;
text-decoration: none;
background-image: url("../../images/theater/icon_back.png");
background-repeat: no-repeat;
background-position: left center;
}

#link-top a:hover {
text-decoration: underline;
}

/* SNSシェア */

#sns-container {
width: 100%;
background-color:#f4efcb;
text-align:center;;
padding:14px 0 7px 0;
position:fixed;
left:0;
bottom:0;
}

#social {
margin:0;
}

#social li {
display:inline-block;
padding:0 5px 0 5px;
}

#social li.eiga {
margin-right:-20px;
}

/************* 800 *************/

@media screen and (max-width: 800px) {

dt {
display: block;
float:none;
width:100%;
padding:0em;
font-weight: bold;
text-align: left;
border-right: none;
margin-bottom: 10px;
}

dd {
display: block;
margin-left:0em;
padding:0em;
margin-bottom: 30px;
}

}

/************* 640 *************/

@media screen and (max-width: 640px) {

body {
padding:40px 0 12vw 0;
}

#content-wrapper {
padding:0 20px;
}

h1 {
margin-bottom:25px;
}

h1 img {
width:80%;
height: auto;
}

h2 {
padding:16px 0 16px 30px;
margin-bottom:20px;
font-size:24px;
}

h2.center {
margin-top:40px;
}

h2.enabled {
background-position:6px center;
background-size: 10px auto;
}

h2.active {
background-position:6px center;
background-size: 10px auto;
}

h3 {
display: block;
margin-bottom:30px;
font-size:20px;
}

h3.statement {
font-size:20px;
}

/* 劇場リスト */

ul.theater-list {
display: flex;
flex-wrap: wrap;
justify-content:center;
text-align: center;
}

ul.theater-list li {
width:80px;
text-align: center;
margin:0 3% 20px 3%;
position: relative;
font-size:0.8em;
}

ul.theater-list li img {
width:100%;
}

/* ポスター・作品紹介 */

#poster-wrapper {
text-align: center;
margin-bottom: 30px;
}

#poster-wrapper img {
width:100%;
height: auto;
}

#poster-wrapper span {
display: block;
width: 100%;
margin: 20px 0;
}

#poster-wrapper a {
font-size: 0.8em;
display: inline-block;
width: 100%;
color:#fff;
font-weight: bold;
text-decoration: none;
padding:20px 0;
border-radius: 4px;
background-image:url("../../images/icon_blank.png");
background-repeat: no-repeat;
background-position: right 20px center;
background-size:16px auto;
}

#poster-wrapper a:hover {
background-color:#7f7f7b;
}

.article-container {
padding:15px 0px;
}

#haishin-container {
padding:30px 15px;
}

#haishin-container h4 {
font-size:20px;
margin-bottom:20px;
}

.article-container.normal-list dt {
font-size: 1.0em;
}

/* 作品リスト */

ul.poster-list li {
width:44%;
text-align: center;
margin:0 3% 15px 3%;
}
ul.poster-list li h3 {
margin: 12px 0px 3px 0px;
font-size:1.1em;
line-height: 1.2em;
}

ul.poster-list li h4 {
font-size:0.8em;
}

/* 劇場リスト */

.article-container.theater {
padding:20px 0px;
}

h3.area {
font-size: 1.0em;
}

/* トップへ戻るリンク */


#link-top a {
display: inline-block;
font-size: 1.3em;
padding:20px 24px 20px 34px;
text-decoration: none;
background-image: url("../../images/theater/icon_back.png");
background-repeat: no-repeat;
background-position: left center;
background-size: 16px auto;
}

#link-top a:hover {
text-decoration: underline;
}


#social li {
display:inline-block;
padding:0 2px 0 2px;
}

}