@charset "utf-8";
body {
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 100%;
	line-height: 1.4;
}

ul, ol, dl {
	padding: 0;
	margin: 0;
}

ul.topnav {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
background-color: #1b2538;
height:auto;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
color: white;
}
ul.topnav li a:hover:not(.active) {
background-color: #a9bce2;
}
ul.topnav li a.active {
background-color: #da3c41;
}
ul.topnav li.right {
float: right;
}

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

.header .logo{
	float: none;
}

ul.topnav li.right, ul.topnav li {
	float: none;
	width:100%;
}

.topimage{
	text-align:left;
}

}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}

h1{
	font-size: medium;
}

.new{
	overflow:auto;
	padding: 5px;
	margin-right: 20px;
	margin-left: 20px;
	margin-top:0;
	border: thin solid #999;
}
@media screen and (max-width: 480px) {
.new{
	width:95%;
	padding: 0;
	margin-left:5px;
	margin-top: 50px;
	border: thin solid #999;
}
}

.smoji{
	font-size:small;
}
.mmoji{
	font-size:medium;
}

.new td,th{
	padding:5px 10px;
}

.cast td,th{
	padding_bottom:2px;
}

.castlaboheme td,th{
	padding_bottom:2px;
	border-bottom: 1px solid #9b88be;
}

hr{
	border:none;
	height:2px;
	background:linear-gradient(90deg,rgba(37,180,10,0.1)0%,rgba(37,180,210,1)50%,rgba(37,180,10,0.1)100%);
}

/*新着情報ココカラ*/

.topics dl {
padding: 15px 0;
border-bottom: 1px solid #ccc;
}

.topics dt {
padding-bottom: 5px;
}

@media screen and (min-width: 768px) {
.topics dt {
clear: left;
float: left;
width: 10%;
}
.topics dd {
margin-left: 18%;
}
}
/*新着情報ココマデ*/

/*articlesココカラ*/
.articles ul{
	list-style:none;
	margin:0 auto;
	padding:0;
}
.articles li{
	overflow:hidden;
	padding:10px;
	margin-bottom:20px;
	background:#99cccc;
}
.articles .tumbnail{
	position:relative;
	float:left;
	margin-right:10px;
	font-size:0;
	width:320px;
	height:230px;
}
.articles .category{
	margin:0 0 5px 0;
	font-size:12px;
	font-weight:bold;
	color:#333333;
}
.articles .title{
	margin:0;
	font-size:14px;
}
.articles .title a{
	text-decoration:none;
	color:#000000;
}
.articles .title a:hover{
	color:#717171;
}

.articles .tumbnail a:hover{
	opacity:0.75;

}
.new_red{
	position:absolute;
	right:0%;
	top:0%;
}

.box01{
	box-shadow: 2px 2px 4px gray;
}

.box02{
	width:85%;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box02 p {
    margin: 0; 
    padding: 0;
}
.box03{
	background-color:#FFF;
	font-size: small;
	margin-right: 5px;
	margin-left: 325px;
	font-weight: bold;
}
@media screen and (max-width: 480px) {
.box03{
	margin-left: 0px;
}

}

.box04{
	width:90%;
	background-color:#FFF;
	font-size:medium;
	padding:10px;
	margin-right: 5px;
	margin-left: 10px;
	margin-bottom:20px;
	font-weight: bold;
	border-style: solid;
	border-width: 1px;
}
@media screen and (max-width: 480px) {
.box04{
	width:85%;
	margin-left: 5px;
}

}


@media screen and (max-width: 480px) {
.articles .tumbnail{
	float:none;
}

}
/*articlesココマデ*/


/*contentココカラ*/
.main-container{
	float: left;
	width: 660px;
}
@media screen and (max-width: 480px) {
.main-container{
	float: left;
	width:auto;
}
}
	
.sideber{
	padding-top:10px;
	float: right;
	width: 300px;
}
@media screen and (max-width: 480px) {
.sideber{
	float:none;
	width: 300px;
	padding-top:50px;
	padding-left:5px;
}
}

/*contentココマデ*/

/*チラシ大きな画像ココカラ*/
a{
	text-decoration:none;
}

.bigflyer{
	width:50%;
	padding:3px;
	margin-bottom:2px;
	background:#F3F3F3;
	text-align:left;
}
.bigflyer:hover{
	background:#E8E8E8;
}
/*チラシ大きな画像ココマデ*/

/*historyココカラ*/
.history{
	clear: both;
	padding: 50px;
	margin-right: auto;
	margin-left: auto;
}

@media screen and (max-width: 480px) {
.history{
	padding-left:5px;
}
}

/*ココマデ*/

/*eventココカラ*/
.event{
	margin: 20px;
	padding: 20px;
}

.cell04{
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-width: thin;
	border-bottom-width: thin;
	margin-top: 20px;
	text-align:left;
}
.cell05{
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-width: thin;
	border-bottom-width: thin;
	margin-top: 20px;
	padding-left:0.5em;
}
.cell06{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-width: thin;
	margin-top: 20px;
	padding-left:0.5em;
}
.cell07{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-width: thin;
	margin-top: 20px;
	text-align:left;
}

.eventtopics dl {
padding: 15px 0;
border-bottom: 1px solid #ccc;
}

.eventtopics dt {
padding-bottom: 5px;
}

@media screen and (min-width: 768px) {
.eventtopics dt {
clear: left;
float: left;
width: 15%;
}
.eventtopics dd {
margin-left: 18%;
}
}
/*eventココマデ*/

/*companyココカラ*/

.company{
	margin: 20px;
	padding: 20px;
}
@media screen and (max-width: 480px) {
.company{
	margin:0;
	padding:0 0 0 5px;
}
}

.cell01{
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-width: thin;
	border-bottom-width: thin;
	margin-top: 20px;
	padding-top: 1em;
	padding-right: 2em;
	padding-bottom: 1em;
	padding-left: 2em;
}

.cell02{
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	padding: 1em 2em 1em 2em;
	border-top-width: thin;
	border-right-width: 0px;
	border-bottom-width: thin;
	border-left-width: 0px;
}

.cell03{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	padding: 1em 2em 1em 2em;
	border-bottom-width: thin;
}

/*companyココマデ*/

/*contactココカラ*/

.contact{
	margin: 20px;
	padding: 20px;
}
@media screen and (max-width: 480px) {
.contact{
	width:100%;
	margin: 5px;
	padding: 5px;
}

}

.contactul{
	margin-left:2em;
}

/*表のCSS_20201224に追記*/

.contact p {
  font-size: 16px;
  font-weight: bold;
  text-align:left;
  margin: 60px auto 10px;
}
table {
  margin: 20px auto;
}
.tbl-r02 th {
	/*width:auto;*/
	color: #333;
	padding: 10px;
	background-color: #FFF;
	text-align: left;
	border: 1px solid #CCC;
}
.tbl-r02 td {
	border: solid 1px #ccc;
	padding: 10px;
	background-color: #FFF;
	border: 1px solid #CCC;
}

@media screen and (max-width: 640px) {
table {
  margin:3px;
}
	
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

/*表のCSS_20201224に追記ココマデ*/

.cell08{
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-width: thin;
	border-bottom-width: thin;
	margin-top: 20px;
	padding-top: 1em;
	padding-right: 2em;
	padding-bottom: 1em;
	padding-left: 2em;
	width: 8em;
}
@media screen and (max-width: 480px) {
.cell08{
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-width: thin;
	border-bottom-width: thin;
	margin-top: 20px;
	padding-top: 1em;
	padding-right: 2em;
	padding-bottom: 1em;
	padding-left: 2em;
	width: auto;
}

}

/*contactココマデ*/

/*privacypolicyココカラ*/
.privacy{
	margin:50px;
}
@media screen and (max-width: 480px) {
.privacy{
	width:80%;
}

}

/*privacypolicyココマデ*/


/*eventcontainerココカラ*/
.eventcontainer{
	width:960px;
	height:auto;
}
.eventside{
	width:360px;
	height:auto;
	float:left;
}
.eventcontent{
	width:570px;
	float:right;
}
.subtitle{
	display:block;
	padding-top:5px;
	border-top:1px dashed #ff6699;
	font-size:16px;
	font-weight:normal;
	color:#666666;
}
.jump{
	display:none;
}

@media screen and (max-width: 480px) {
.eventcontainer{
	width:80%;
}
.eventside{
	width:auto;
	float:none;
}
.eventcontent{
	width:auto;
	float:none;
}
.jump{
	display:block;
}
}
/*eventcontainerココマデ*/

a img { 
	border: none;
}

a:link {
	color: #42413C;
	text-decoration: underline; 
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}

.container {
	width: 960px;
	background-color: #FFF;
	margin: 0 auto; 
}
@media screen and (max-width: 480px) {
	.container {
	width: 100%;
	background-color: #FFF;
	margin: 0 auto; 
}
}


.header {
}


.arrow{
	text-align: right;
	margin-top: 100px;
}

.arrow a:hover{
	opacity:0.75;
}

.logo{
	float: left;
	padding-top: 20px;
	padding-bottom: 10px;
	background-color: #FFF;
	padding-right: 5px;
	padding-left: 5px;
	
}
.topleftspace{
	background-color: #1b2538;
	width: 180px;
}

.toprod{
	background-color: #FF6699;
	height: 10px;
}

.topimage{
	width: 960px;
	height: 150px;
	background-color: #FFF;
	display: block;
	text-align: center;
	margin: auto;
	padding-top: 50px;
}
@media screen and (max-width: 480px) {
.topimage{
	width: 100%;
	height: auto;
	background-color: #FFF;
	display: block;
	text-align: left;
	margin: auto;
	padding-top: 50px;
}
#Insert_logo{
	max-width:90%;
	height:auto;
}

}
/*twitterココカラ*/
.tweetcontainer{
	height:450px;
	padding:5px;
	margin:10px;
}

.twitter-timeline{
	margin-left:auto;
	margin-right:auto;
}
@media screen and (max-width: 480px) {
	.twitter-timeline{
		width:70%;
	}
}
/*twitterココマデ*/

@media (max-width: 700px) {
    #content {
        width: auto;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}
.content {
	width:960px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
@media screen and (max-width: 480px) {
.content {
	width:100%;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
}

/*special(月のイベント)ココカラ*/

.special{
	overflow:hidden;
	width:80%;
	border: 1px solid #999;
	padding: 15px;
	border-radius: 6px;
	margin-top: 20px;
	margin-left: 20px;
}
.special .inspecial{
	float:left;
}
@media screen and (max-width: 480px) {
.special{
    width:70%;
	border: 1px solid #999;
	padding: 15px;
	border-radius: 6px;
	margin-top: 10px;
	margin-left: 5px;
}
.special .inspecial{
	float:none;
}
}
/*special(月のイベント)ココマデ*/

/* フッターここから */
.footer {
	padding: 10px 0;
	background-color: #1b2538;
	color: #FFF;
	font-size: small;
}
.footer a:link{
	color:#FFF;
}
.footer a:visited {
	color: #FFF;
	text-decoration: underline;
}

.footer a:hover, a:active, a:focus {
	text-decoration: none;
}
/* フッターココマデ */





/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.mar01{
	margin-top:10px;/*マージン10pxを加えるためのクラス*/
}
.mar02{
	margin:20px;/*マージン20pxを加えるためのクラス*/
}
.bold01{/*太字にするためのクラス*/
	font-weight: bold;
}
.red{
	color:#F00;
}

/*吹き出しのCSS*/
/* 吹き出し本体 */
.balloon1{
  position: relative;
  width:85%;
  border-radius: 10px; /* ボックスの四つ角を丸くする */

  padding: 20px;
  background: linear-gradient(to bottom, #dad7e9 0%,#9b88be 100%);
  color: #333333;
}
/* グラデーションの開始の色に合わせた三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #dad7e9;
  border-left: 15px solid transparent;
}
/*吹き出しのCSSココマデ*/