/* Reset style */
* {
  font-family: serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  }
body{
	text-align: left;
	font-size: 18px;
	color: #424444; 
	background: #99ff99;
	background-image: url(img/anonatu/haikei21.png);
	line-height: 1.3em;
    }

a { text-decoration: none; }
a:link { color: #ff8c00; }
a:hover { color: #ff002b; }
a:active { color: #ff002b; }
a:visited { color: #008080; }


/********※スマホのみ表示**********/
@media(min-width:750px){
    .pc{
        display: none !important;
    }
}
/********※PCのみ表示**********/
@media(max-width:750px){
    .sp{
        display: none !important;
    }
}

/*******index.html********/
/**ヘッダー部分**/
/**　※スマホのみ　全ページ共通　ヘッダー部分**/
.toptitle{
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: left;
	padding-left: 20px;
	background: #5fcdb4c2;
}
.toptitle img/**劇団ロゴ**/{
	width: 130px;
}

/**　※スマホのみ　全ページ共通　ハンバーガーメニュー**/
	/**メニューボタン**/
	.menu-btn {
		position: fixed;
		top: 10px;
		right: 10px;
		display: flex;
		height: 60px;
		width: 60px;
		justify-content: center;
		align-items: center;
		z-index: 90;
		background: #ffd700;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #ffffff;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 8px;
	}
	.menu-btn span:after {
		top: 8px;
	}
	/**ボタンがタップされたとき三本線を「×」マークにする設定**/
	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	#menu-btn-check {
		display: none;/**チェックボックスを非表示**/
	}
	/**メニュー内容**/
	.menu-content {
		width: 40%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;/*leftの値を変更してメニューを画面外へ*/
		z-index: 80;
		background: #ffa500;
		transition: all 0.5s;/*アニメーション設定*/
	}
	.menu-content ul {
		padding: 70px 10px 0;
	}
	.menu-content ul li {
		border-bottom: solid 1px #ffffff;
		list-style: none;
	}
	.menu-content ul li a {
		display: block;
		width: 100%;
		font-size: 15px;
		box-sizing: border-box;
		color:#ffffff;
		text-decoration: none;
		padding: 9px 15px 10px 0;
		position: relative;
	}
	.menu-content ul li a::before {
		content: "";
		width: 7px;
		height: 7px;
		border-top: solid 2px #ffffff;
		border-right: solid 2px #ffffff;
		transform: rotate(45deg);
		position: absolute;
		right: 11px;
		top: 16px;
	}
	/**ボタンを押したらメニューが出てくる**/
	#menu-btn-check:checked ~ .menu-content {
		left: 60%;/*メニューを画面内へ*/
	}


/************以下、あの夏トップページ************/

  main { padding-top: 80px; }
  h1 img { width: 25%; float: right; }
  h1 { width: 95%; font-weight: bold; font-size: 20px; color: #ffffff; line-height: 1.3em; padding: 8px; background-color: #2ca9e1; margin: 0 auto; border-top: solid 3px #2ca9e1; }
  h1 p,title { font-size: 36px; color: #996600; background-color: #ffffff; padding: 10px; margin; 10px 0; }

  div.copy { width: 80%; font: 16px 'メイリオ',serif bold; color: #0a2633; padding: 12px; border: double 8px #0099e0; text-align: center; margin-top: 10px; }

  div.catch { width: 95%; padding: 10px; background-color: #ffffe0; font-size: 16px; font-weight: bold; text-align: center; line-height: 1.5em; color: #8b4513; }

  div.mono { width: 98%; padding: 10px; text-align: left; border: double 8px #009900; font-size: 15px; color: #0a2633; font-weight: bold; }

  .hukuyama { width: 98%; padding: 10px; text-align: left; border: solid 2px #2ca9e1; background-color: #f5fffa; background-image: url(img/anonatu/dome.png); background-repeat: no-repeat; background-size:70% auto; font-size: 15px; color: #000000;line-height: 150%; }
  
  p.f { width: 600px; text-align: right; font-weight: bold; }
  p.s { font-size: 12px; }
  .no { font-weight: normal;}
  .b { font-weight: bold; }
  .auto { margin: auto; }
  .center { text-align: center; }

  /**「俳優名をクリックするとプロフィールが表示されます」「他の俳優プロフィールは」**/
  .s { font-size: 12px; }
  .ms { font-size: 14px; line-height: 1.1em; margin-top: 20px; }
  p.r { text-align: right; }
  p.mi { color: #006600; font-size: 18px; font-weight: bold; }

  div.shutuen { width: 98%; line-height: 1em; }
  div.shutuen p { font-size: 14px; background-color: #ffffe0; color: #663300; text-align: center; padding: 5px; line-height: 1em; border: solid 1px #0099E0; margin-bottom: 10px; }
  div.shutuen td { width: 30%; font-size: 14px; font-weight: bold; text-align: center; line-height: 1.7em; color: #aa66dd; }
  div.shutuen img { width: 100%; }

  div.staff { width: 98%; font-size: 12px; text-align: center; line-height: 150%; margin-bottom: 20px; }
  div.staff p { font-size: 14px; background-color: #ffffe0; color: #663300; padding: 7px; font-weight: bold; text-align: center ; border: solid 1px #0099e0; margin-bottom: 10px; }

  div#tayori { width: 100px; padding: 8px; background-color: #cc9900; color: #ffffff; font-weight: bold; text-align: center; }

  div.nittei { width: 98%; padding: 10px; background-color: #ffffff; font-size: 16px; }
  .ac { background-color: #aa9933; padding: 3px; }

  td.top { vertical-align: top; }

/**********公演概要**********/

	dl.info{
		border-bottom: 1px solid  #129b90;
	}
	dl dt.info_read{
		width: 25%;
		border-top: 1px solid  #129b90;
		border-left: 8px solid  #129b90;
		margin: 0;
		margin-bottom: 5px;
		padding: 15px 5px 10px 15px;
		float: left;
		clear: left;
		font-weight: bold;
	}
	.ticketinfomation dt.info_read{
		padding: 5px;
		font-size: 0.9em;
	}
	
	dl dd{
		margin: 0;
		border-top: 1px solid  #129b90;
	}
	.infoitem_read{
		padding: 15px 5px 10px 8px;
		margin-bottom: 5px;
		margin-left: 25%;
	}
	/**.infoitem_read span{
		font-size: 0.8em;
	}**/

  div.engeki {
        width: 90%;
        padding: 10px;
        background-color: #ffffe0;
        font-size: 16px;
        text-align: center;
        line-height: 1.5em;
        color: #000000;
        margin-right: auto;
        margin-left: auto;
        }

	/*******フッター********/
	footer{
		width: 100%;
		background:  #30539c;
		color: #e6eaf7;
		line-height: 1.2em;
		padding-top: 20px;
		padding-bottom: 30px;
		font-family: serif;
		position: absolute;
		height: auto;
	}
	footer p{
		font-size: 0.9em;
		font-family: serif;
		text-align: center;
	}
	.footerlogo{
		width: 180px;
		display: block;
		margin: 0 auto 10px auto;
	}
	


/************以下、日程ページ************/

.enkancau {
        width: 650px;
        padding:5px;
        background-color: #fcfcfc;
        border: solid 3px #79b9bbef ;
        font-size: 16px;
        color: #003300;
        line-height: 1.3em;}

table.enkan th {  
        border: solid 4px #79b9bbef ;
        background-color:  #79b9bbef;
        color: white;
    }

table.enkan td {  
        border: solid 4px  #79b9bbef ;
    }

table.enkan {
    border: solid 4px  #79b9bbef ;
    background-color: #ffffff;
    width: 650px;
    display: table;
    border-collapse: collapse;
    box-sizing: border-box;
    text-indent: initial;
    }

    span.gaiyou{
        font-weight: bold;
}

span.tyuusi{
        font-size: 16px;
        font-weight: normal;
        line-height: 22px;
}

/* 以下、日程ページの、実行委員会公演の案内フレーム */
.jikkou {
	background-color: white; 
	border-radius: 5px;
	margin: 30px 5px; 
	padding: 30px 20px 20px 20px; 
	position: relative;
	z-index: 0;
        text-align: left;
        line-height: 30px;
        font-size: 15px;
        display: block;
        margin-top:20px;
        width: 620px;
}

.jikkou:before{
	border: 3px solid #B5F6A5; 
        
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
.jikkou:after{
	background-color: #b6f5a7;
	background-position: 0 0, 8px 8px;
	background-size: 15px 15px;
        border-left: 2px  rgba(0,0,0,0.1);
	border-right: 2px  rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: -10px;
	transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
        font-weight: bold;
        font-size: 15px;
}


.fukuoka.jikkou:after
{
        content: '福岡実行委員会公演';
}

.ooita.jikkou:after
{
        content: '大分実行委員会公演';
}

.kumamoto.jikkou:after
{
        content: '熊本実行委員会公演';
}

.koganei.jikkou:after
{
        content: '”あの夏の絵”を観る会inこがねい';
}

.tukuba.jikkou:after
{
        content: 'つくば市「あの夏の絵を観る会」';
}

.zama.jikkou:after
{
        content: '「あの夏の絵」座間公演実行委員会';
}

.top.jikkou{
        width: 450px;
}

.top.jikkou:after{
        content: '実行委員会公演';
}

.koutouku.jikkou:after
{
        content: '「生活の中に演劇を―新しい活動拠点形成事業―」公演（沖縄県石垣市）';
}

.higashimatsuyama.jikkou:after
{
        content: '「あの夏の絵」所沢実行委員会公演';
}

.caution
{
        font-size: 1.3em;
        font-weight: bold;
        color: #132bb1;
        line-height: 1.5;
        padding-bottom: 2em;
}

span.blue{
		color: #132bb1;
}

/**以下、中高生のための演劇鑑賞教室のリンク部分**/
.kyousitu{
        background-color: #beecec;
        width: 500px;
        padding: 10px;
        margin: auto;
        line-height: 1.5;
      }
      
.kyousitulink{
        display: inline-block;
        width:200px;
        border: none;
      }
      
.kyousitumoji{
        display: inline-block;
        margin-top: 10px;
        color: rgba(0, 0, 0, 0.678);
        font-family: "meiryo";
        font-size: 20px;
        vertical-align: middle;
      }