@charset "UTF-8";

*{margin:0;padding:0;list-style:none;}
html{height:100%;}

body {
font-size:15px;
font-family:'Century Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
margin: 0;
padding: 0;
height:100%; 
background: url(../img/main.png)no-repeat center center fixed, rgba(60,60,60,.1); 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

a{outline:none;}
a{color:#fff;}
a:link{color:#fff; text-decoration:none;}
a:visited{color:#fff;}
a:hover{
color:#fff;
opacity:0.8;
filter:alpha(opacity=80);
}
a:active{color:#fff;}


header h1{
	font-weight:normal;
	font-size:80%;
	display:block;
	width:100%;
	text-align:right;
	color:#666;
	margin-bottom:0.5em;
}

.tab-box a:link, a:visited{text-decoration:underline;color:#ccc;}
.tab-box a:hover{text-decoration:underline;}

header{
width:96%;
padding:10px 2%;
text-align:right;
position:fixed;
z-index:99;
}

header i{
margin:0 0 0 20px;
color:#666;
width:30px;
height:30px;
}

header img.btn{
width:25px !important;
height:25px !important;
margin:0 0 0 20px;
}

body > section {height: auto;}

section{
height:100%;
min-height:100%;
background:url(../img/logo.png) no-repeat;
background-position : right center;
background-size: 60%;
}

#topics{
width:100%;
height:auto;
margin:1em auto 0;
text-align:right;
}

#topics a:link,
#topics a:visited{color:#333 !important;}

#topics ul li{
	display:inline;
}


#topics ul li:after{
color:#BFA16E;
content: "|";
margin:0 1em;
}

#topics ul li:last-child:after{
content:none;
margin:0 2em;
}

footer{
font-family: Georgia, "Times New Roman", Times, serif;
width:96%;
padding:0 2%;
margin:-26px 0 0;
line-height:26px;
background:#3C3C3C;
color:#fff;
text-align:center;
}

/* -------------------------- */

.overlayall_sub {
width:80%;
padding:5% 10% 0;
height: 100%;
position: fixed;
overflow: scroll;
top: 0;
left: 0;
z-index: 100;
background: rgba(60,60,60,.8); 
color: #FFF;
text-align: center;
line-height: 1.5;
}

.overlayall {
display: none;
width:80%;
padding:5% 10% 0;
height: 100%;
position: fixed;
overflow: scroll;
top: 0;
left: 0;
z-index: 100;
background: rgba(60,60,60,.8); 
color: #FFF;
text-align: center;
font-size: 14px;
line-height: 1.5;
}

.overlayall p,
.overlayall_sub p{
padding:0 0 1em;
text-align: justify;
}

.overlayall p.two_em:first-letter,
.overlayall_sub p.two_em:first-letter{
font-size:2.5em;
line-height:1;
float:left;
margin:0 .1em 0 0;
padding:.1em 0;
}

.overlayall h1.ttl,
.overlayall p.ttl,
.overlayall_sub p.ttl{
font-size:120%;
font-weight:bold;
text-align: center;
}

.overlayall p.no_m,
.overlayall_sub p.no_m{margin-top:-0.8em;}

.overlayall h1.ttl span,
.overlayall p.ttl span,
.overlayall_sub p.ttl span{
font-size:80%;
font-weight: normal;
}

#tab_JP p{text-align: center;}

#tab_EN p b,
#tab_EN ul li b{
font-weight:bold;
font-style:italic;
}

p.close{
padding:10px;
margin:1em;
font-size:30px;
cursor: pointer;
position:fixed;
right:0;
top:0;
}

#tab_EN .Heading_border, .year, .awards_ttl{
font-family: 'Cinzel', serif;
font-weight:700;
}

/* TabArea-------------------------- */
.tab-content {padding-bottom:5em;}

.tab-content input[type="radio"] {display: none;}

.tab-content .tab-box {
width: 100%;
height: auto;
}

.tab-content > .tab-box > div {display: none;}
#JP:checked ~ .tab-box > #tab_JP {display: block;}
#EN:checked ~ .tab-box > #tab_EN {display: block;}
.tab-content input[type="radio"] {display: none;}

.tab-content label {
width: 35%;
margin:0 1% 1em 0;
padding: 10px 1%;
font-size:115%;
font-weight: bold;
text-align:center;
color: #999;
cursor: pointer;
display: inline-block;
}

.tab-content label:hover,
.tab-content input[type="radio"]:checked + label {
padding: 10px 1%;
color: #fff;
}

.tab-content .tab-box {
width: 100%;
height: auto;
padding: 30px 0 20px;
margin-bottom:100px;
}

.tab-content .tab-box ul{
width: 96%;
padding:0 2% 1em;
text-align:left;
clear:both;
overflow:hidden;
}

.tab-content .tab-box ul li{
float:left;
margin:0 1.5em 0.5em 0;
}

.tab-content .tab-box ul p.more{
width:80%;
text-align:center;
clear:both;
display:block;
margin:0 auto 0.5em auto;
}

.tab-content .tab-box ul li:before{
font-family: FontAwesome !important;
content: "\f0da" !important;
margin-right:5px !important;
}

.tab-content > .tab-box > div {display: none;}
#JP:checked ~ .tab-box > #tab_JP {display: block;}
#EN:checked ~ .tab-box > #tab_EN {display: block;}


/*タブ切り替え全体のスタイル*/
.tabs {
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(94%/4);
  height:auto;
  font-size: 110%;
  color:#D5D5D5;
  text-align: center;
  padding:0.75em 0;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;

  border-top:1px solid #3c3c3c;
  border-right:1px solid #3c3c3c;
  border-left:1px solid #3c3c3c;
  margin-right:1%;
border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
}

.tab_item:last-child {margin-right:0%;}

.tab_item:hover {
  border-top:1px solid #af9b7a;
  border-right:1px solid #af9b7a;
  border-left:1px solid #af9b7a;
  color:#af9b7a;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {display: none;}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 2em;
  clear: both;
  overflow: hidden;
  border:1px solid #af9b7a;
  margin-bottom:10%;
}

.tab_content .year{
	font-size:100%;
	margin-bottom:0 !important;
	font-size:90%;
	color:#dbdbdb;
	font-style:italic;
}
.tab_content .year:after{
content: "..." !important;
margin-left:0.25em !important;
}
.tab_content ul{
	text-align:left;
	margin-bottom:1em;
	font-size:105%;
}

.tab_content ul li{
padding-left:2em;
text-indent:0em;
}


/*選択されているタブのコンテンツのみを表示*/
#BOOK:checked ~ #BOOK_content,
#TV:checked ~ #TV_content,
#MG:checked ~ #MG_content,
#PR:checked ~ #PR_content,
#WEB:checked ~ #WEB_content,
#KOZA:checked ~ #KOZA_content,
#SYOHIN:checked ~ #SYOHIN_content,
#EV:checked ~ #EV_content {display: block;}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #af9b7a;
  color: #fff;
  border-top:1px solid #af9b7a;
  border-right:1px solid #af9b7a;
  border-left:1px solid #af9b7a;
}


.Heading_border ,.awards_ttl{
font-weight:bold;
display:block;
font-size:130%;
text-align:center;
margin:0.5em 0 1em;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
text-align:center; /* for no-flexbox browsers */
letter-spacing:0.25em;
color:#fff;
opacity:0.8;
filter:alpha(opacity=80);
}

.Heading_border:before, .awards_ttl:before,
.Heading_border:after, .awards_ttl:after {
border-top:1px solid;
content:"";
display:inline; /* for IE */
-webkit-box-flex:1;
-webkit-flex-grow:1;
-ms-flex:1;
flex-grow:1;
}

.Heading_border:before, .awards_ttl:before {margin-right:0.75em;}
.Heading_border:after, .awards_ttl:after {margin-left:0.5em;}


ul.book{
width:100%;
height:auto;
display:block;
clear:both;
margin:3em 0;
padding:3em 0;
border-top: 1px solid #eee;
overflow:hidden;
}

.book_text{
width:75%;
float:right;
}

ul.book li{
padding:2em 0;
border-bottom:1px solid #ccc;
text-align:left;
}

ul.book li:last-child{border-bottom:none;}

ul.books li:first-child{padding-top:0;}
ul.book li{border-bottom:none;}

ul.book li img{
float:left;
max-width:12%;
margin:3px 2% 3px 3px;
box-shadow:0 0 3px 0 rgba(0,0,0,0.25);
}

ul.book li iframe{
float:left;
max-width:12%;
margin:3px 2% 3px 3px;
box-shadow:0 0 3px 0 rgba(0,0,0,0.25);
}

ul.book li img{max-width:22%; float:left;}

ul.book .book_title{
width:100%;
height:auto;
font-size:130%;
font-weight:bold;
margin:0 0 0.5em;
float:right;
}
ul.book .book_title{
width:100%;
padding-bottom:0.5em;
margin-bottom:0.5em;
border-bottom:1px solid #ccc;
}

ul.book li .book_detail{
width:100%;
font-size:100%;
padding:0.25em 0;
color: #fff;
float:right;
}

ul.book li .book_detail span{
font-size:120%;
font-weight:bold;
}

ul.book li a:link,
ul.book li a:visited{
text-decoration: underline;
}

ul.book li a:hover{
}

table.table_book{
width:100%;
height:auto;
margin:2em 0 0 !important;
border-spacing:0;
}

table.table_book th,
table.table_book td{
border-bottom:1px solid #666;
padding:0.5em 1em;
}

table.table_book th{
	width:7em !important;	
	text-align:justify
}

table.table_book tr:last-child td{
border-bottom:none;
padding-top:1em;
}

table.table_book p:last-child{
	padding-bottom:0 !important;
}

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

body{
font-size:14px;
background: url(../img/main_sp.jpg)no-repeat center 20% fixed, rgba(60,60,60,.1);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

header h1{
	font-weight:normal;
	font-size:80%;
	display:block;
	width:98%;
	padding:0 1%;
	text-align:center;
}

header{text-align:center;}

header img.btn{margin:0 5px;}

#topics{
width:100%;
height:auto;
display:inherit;
text-align:center;
margin-top:0.5em;
}


.tab-content {padding-bottom:2em;}

.overlayall {
display: none;
width:94%;
padding:5% 3% 0;
}

.overlayall_sub {
width:94%;
padding:5% 3% 0;
}

.tab_item {
  width: calc(96%/2);
  font-size: 100%;
}

.tab_content {padding: 1em;}

.tab-content .tab-box ul li{margin:0 1em 0.5em 0;}

p.close{
padding:0 20px 0 0 !important;
margin:.2em !important;
}

footer{font-size:80%;}

#tab_JP p{text-align:left;}

#tab_JP p.ttl{text-align:center}



section{
height:100%;
min-height:100%;
background:url(../img/logo_sp.png) no-repeat;
background-position : left 0px bottom 7%;
background-size: contain;
}

}

#pageTop {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 10000000;
}
 
#pageTop a {
display: block;
z-index: 100000000;
padding: 8px 0 0 8px;
border-radius: 30px;
width: 35px;
height: 35px;
background-color: #9FD6D2;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
 
#pageTop a:hover {
text-decoration: none;
opacity: 0.7;
}

.btn-icon,
.btn-icon_M,
.btn-icon_L{
text-align:center;
background-color:#9ec34b;
font-size:120%;
color:#FFF !important;
text-decoration:none !important;
font-weight:bold;
padding:0.5em 1em;
border-radius:5px;
margin:1em auto;
}

.btn-icon{
display:inline-block;
width:50%;
}

.btn-icon_M{
display:block;
width:65%;
font-size:110%;
}

.btn-icon_L{
display:block;
width:80%;
font-size:110%;
}

.btn-icon_M a:link,
.btn-icon_L a:link,
.btn-icon a:link{
text-decoration:none !important;
}
a.btn-icon_M:before,
a.btn-icon_L:before,
a.btn-icon:before{
margin-right:0.5em;
content:"\f270";
font-family:"Font Awesome 5 Free";
font-weight:900;
}