@charset "utf-8";

/*============================================
PC板
============================================*/
@media screen and (min-width:641px) {
/*============================================
作品用サブメニュー（左カラム）
============================================*/
div#library_submenu {
	width:290px;			/*幅の指定*/
	margin:10px 0px 10px 20px;	/*位置調整*/
	float:left;			/*カラムを左寄せにする*/
}

div#library_submenu h2 a {
    background-color:#ffd700;		/*背景色*/
	display:block;			/*リンク部分をブロック表示にする*/
    width:260px; height:45px;      /*ブロックのサイズ*/
	padding:10px 0px 0px 30px;	/*パディング*/
    border-radius:5px;			/*角丸にする*/
	color:#333333;			/*文字色*/
	text-decoration:none;		/*リンクの下線を無くす*/
}

div#library_submenu h2 a:hover {
    background-color: #ffa500;      /* カーソルを合わせると色が変わる */
    transition-duration: 0.2s
}
/*============================================
各話カード
============================================*/
div#smallcard_wrapper {
    width: 840px;
    height: auto;
    margin:10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 210px;
    grid-row-gap: 10px;
    grid-gap: 20px 21px;
}

div#smallcard {
    margin:0;
    background-color: #fffff0;
    border:3px solid #ffd700;
    border-radius: 10px;
}

div#smallcard a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    text-align: center;
}

div#smallcard p {
    width: 100%;
    height:auto;
    margin: 0;
    padding: 0;
    text-indent: 0em;
    color: #333333;
    font-size: 150%;
}
    
div#smallcard img {
    margin:0;
    padding:0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div#smallcard:hover {
    transform: scale(1.05);
    background-color:#ffffe0;
    border:3px solid #ffa500;
    transition-duration: 0.2s;
}

    
/*中辻夏祭り編*/
div#smallcard_sf {
    margin:0;
    background-color: #fffff0;
    border:3px solid #000080;
    border-radius: 10px;
}

div#smallcard_sf a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    text-align: center;
}

div#smallcard_sf p {
    width: 100%;
    height:auto;
    margin: 0;
    padding: 0;
    text-indent: 0em;
    color: #333333;
    font-size: 150%;
}
    
div#smallcard_sf img {
    margin:0;
    padding:0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div#smallcard_sf:hover {
    transform: scale(1.05);
    background-color:#ffffe0;
    border:3px solid #000060;
    transition-duration: 0.2s;
}
    
/*1999東京編*/
div#smallcard_tokyo {
    margin:0;
    background-color: #fffff0;
    border:3px solid #8b008b;
    border-radius: 10px;
}

div#smallcard_tokyo a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    text-align: center;
}

div#smallcard_tokyo p {
    width: 100%;
    height:auto;
    margin: 0;
    padding: 0;
    text-indent: 0em;
    color: #333333;
    font-size: 150%;
}
    
div#smallcard_tokyo img {
    margin:0;
    padding:0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div#smallcard_tokyo:hover {
    transform: scale(1.05);
    background-color:#ffffe0;
    border:3px solid #8b008b;
    transition-duration: 0.2s;
}

/*Film de Nakatsuji編*/
div#smallcard_fdn {
    margin:0;
    background-color: #fffff0;
    border:3px solid #de143c;
    border-radius: 10px;
}

div#smallcard_fdn a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    text-align: center;
}

div#smallcard_fdn p {
    width: 100%;
    height:auto;
    margin: 0;
    padding: 0;
    text-indent: 0em;
    color: #333333;
    font-size: 150%;
}
    
div#smallcard_fdn img {
    margin:0;
    padding:0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div#smallcard_fdn:hover {
    transform: scale(1.05);
    background-color:#ffffe0;
    border:3px solid #de143c;
    transition-duration: 0.2s;
}

/*美北に生きた時編*/
div#smallcard_mkt {
    margin:0;
    background-color: #fffff0;
    border:3px solid #32cd32;
    border-radius: 10px;
}

div#smallcard_mkt a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    text-align: center;
}

div#smallcard_mkt p {
    width: 100%;
    height:auto;
    margin: 0;
    padding: 0;
    text-indent: 0em;
    color: #333333;
    font-size: 150%;
}
    
div#smallcard_mkt img {
    margin:0;
    padding:0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div#smallcard_mkt:hover {
    transform: scale(1.05);
    background-color:#ffffe0;
    border:3px solid #32cd32;
    transition-duration: 0.2s;
}

/*皇ヶ崎学院生徒会編*/
div#smallcard_khs {
    margin:0;
    background-color: #fffff0;
    border:3px solid #ff66c9;
    border-radius: 10px;
}

div#smallcard_khs a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    text-align: center;
}

div#smallcard_khs p {
    width: 100%;
    height:auto;
    margin: 0;
    padding: 0;
    text-indent: 0em;
    color: #333333;
    font-size: 150%;
}
    
div#smallcard_khs img {
    margin:0;
    padding:0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div#smallcard_khs:hover {
    transform: scale(1.05);
    background-color:#ffffe0;
    border:3px solid #ff66c9;
    transition-duration: 0.2s;
}

/*============================================
各話カード(サムネイルなし)
============================================*/
div#smallcard_button {
    float:left;			/*リスト項目を横に並べる*/
    margin:0;        /*マージン*/
    display:block;			/*リンク部分をブロック表示にする*/
    background-color:#fffff0;		/*背景色*/
    width:100%; height:auto;     /*ブロックのサイズ*/
    border-radius:10px;			/*角丸にする*/
    border:2px solid #ffd700;	/*リンク領域にボーダーを付ける*/
    position: relative;
}

div#smallcard_button a {
    display:block;			/*リンク部分をブロック表示にする*/
    width:100%; height:100%;     /*ブロックのサイズ*/
    border-radius:10px;			/*角丸にする*/
    text-decoration:none;		/*リンクの下線を無くす*/
    color:#333333;			/* 文字色を濃い目のグレーにする */
}

div#smallcard_button p#cardtitle {
    margin:0 auto;         /*位置調整とか*/
    width:100%;
    text-align: center;
    font-size:150%;			/* フォントサイズを150%にする */
    text-indent:0em;		/*インデント幅*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

div#smallcard_button:hover {
    background-color:#ffffe0;      /*カーソルを合わせると色が変わる*/
    border:2px solid #ffa500;	/*リンク領域にボーダーを付ける*/
    border-radius:10px;			/*角丸にする*/
    transition-duration: 0.2s;
}


/*============================================
PDFビューア
============================================*/
div#pdf {
    width:860px;
    height:930px;
}
div#pdf iframe#pdfviewer {
    margin:10px;
}
    

/*============================================
作品ポスター
============================================*/
img.poster {
    width:860px;
    height:1218px;
}

/*============================================
作品ページタブ表示
============================================*/
/*タブ切り替え全体のスタイル*/
.tabs {
  padding-bottom: 0px;
  background-color: #fffff0;
  width: 860px;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/4);
  height: 50px;
  border-bottom: solid 3px #ffd700;
  background-color: #ffffe0;
  line-height: 60px;
  font-size: 25px;
  text-align: center;
  color: #333333;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
    cursor :pointer;
}

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

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 0px 0px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#episode:checked ~ #episode_content,
#story:checked ~ #story_content,
#character:checked ~ #character_content,
#keyword:checked ~ #keyword_content,
#special:checked ~ #special_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #ffa500;
  color: #ffffff;
}

/*============================================
登場人物紹介関連
============================================*/
a#character_img img {
    margin:10px 0px;
    float:left;
    width: 360px;
    height: auto;
}

p#character_name {
    float:right;
    width:480px;
    margin:10px;
    padding:0px;
    text-indent: 0em;
    font-size: 200%;
    text-align: center;
}
p#character_ov {
    float:right;
    width:480px;
    margin:10px;
    padding:0px;
}

/*============================================
登場人物紹介タブ
============================================*/
/*タブ切り替え全体のスタイル*/
.character_tabs {
  padding-bottom: 0px;
  width: 860px;
  margin: 0 auto;
}

/*タブのスタイル*/
.character_item {
  margin: 10px;
  width: 191px;
  height: 50px;
  border: solid 2px #ffd700;
  background-color: #fffff0;
  border-radius: 10px;
  line-height: 50px;
  font-size: 25px;
  text-align: center;
  color: #333333;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
    cursor :pointer;
}

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

/*タブ切り替えの中身のスタイル*/
.characters {
  display: none;
  opacity: 0;
  padding: 0px 0px 0;
  clear: both;
  overflow: hidden;
}

@keyframes show {
  from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/*選択されているタブのコンテンツのみを表示*/
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content,
#tab7:checked ~ #tab7_content,
#tab8:checked ~ #tab8_content,
#tab9:checked ~ #tab9_content {
  display: block;
  opacity: 1;
  animation: show 0.5s;
}

/*選択されているタブのスタイルを変える*/
.character_tabs input:checked + .character_item {
  background-color: #ffffe0;
  border:solid 2px #ffa500;
}

/*============================================
あらすじ表示ボタン
============================================*/
/*全体*/
.hidden_box {
    margin: 20px 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px #ffd700;
    border-radius: 10px;
    cursor :pointer;
    background-color: #fffff0;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background-color: #ffffe0;
    border:solid 2px #ffa500;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show1 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box .hidden_show2 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box .hidden_show3 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box .hidden_show4 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box .hidden_show5 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input#label1:checked ~ .hidden_show1 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box input#label2:checked ~ .hidden_show2 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box input#label3:checked ~ .hidden_show3 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box input#label4:checked ~ .hidden_show4 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box input#label5:checked ~ .hidden_show5 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

    
/*============================================
「前の話へ」「次の話へ」ボタン
============================================*/
div#prev-next_episode {
    width:800px;
    height:auto;
    margin:10px auto;
    display:flex;
}
    
div#prev-next_episode a {
    display:block;
    width:150px;
    height:45px;
    border:3px solid #ffd700;
    border-radius:10px;
    text-decoration: none;
}

div#prev-next_episode a p {
    width:100%;
    height:100%;
    padding:4px 0px 0px 0px;
    margin:0;
    text-indent:0em;
    text-align: center;
    font-size:150%;
    color:#333333;
}
    
div#prev-next_episode a#prev_episode {
    
}

div#prev-next_episode a#next_episode {
    margin:0 0 0 auto;
}

div#prev-next_episode a#prev_episode:hover,#next_episode:hover {
    background-color: #ffffe0;
    border:3px solid #ffa500;
    transition-duration: 0.2s
}

div#prev-next_episode a#prev_episode_unpublish {
    background-color: #d8d8a8;
    border:3px solid #b89E00;
}

div#prev-next_episode a#next_episode_unpublish {
    background-color: #d8d8a8;
    border:3px solid #b89E00;
    margin:0 0 0 auto;
}
}



/*============================================
スマホ版
============================================*/
@media screen and (max-width:640px) {
/*============================================
作品用サブメニュー（左カラム）（モバイル）
============================================*/
div#library_submenu {
	width:100%;			/*幅の指定*/
	margin:0px 0px 0px 0px;	/*位置調整*/
	float:left;			/*カラムを左寄せにする*/
}

div#library_submenu h2 a {
    background-color:#ffd700;		/*背景色*/
	display:block;			/*リンク部分をブロック表示にする*/
    width:100%; height:45px;      /*ブロックのサイズ*/
	padding:10px 0px 0px 0px;	/*パディング*/
    text-indent: 1em;
    border-radius:5px;			/*角丸にする*/
	color:#333333;			/*文字色*/
	text-decoration:none;		/*リンクの下線を無くす*/
}

div#library_submenu h2 a:hover {
    background-color: #ffa500;      /* カーソルを合わせると色が変わる */
    transition-duration: 0.2s
}

/*============================================
各話カード（モバイル）
============================================*/   
div#smallcard_wrapper {
    width: 100%;
    height: auto;
    margin:10px 0px;
    display: grid;
    grid-template-columns: 1fr;
}

div#smallcard {
    width:100%;
    height:100px;
    border-bottom: 3px solid #ffd700;
    background-color:#fffff0;
}

div#smallcard a{
    display: block;
    text-decoration: none;
    width:100%;
    height:100%;
}
    
div#smallcard img{
    width:auto;
    height:100%;
    float:left;
}

div#smallcard p{
    width:100%;
    height:100%;
    margin:0;
    padding:30px 0px 0px 0px;
    text-indent:0em;
    color:#333333;
    font-size:150%;
    text-align: center;
}

div#smallcard:hover {
    border-bottom: 3px solid #ffa500;
    background-color:#ffffe0;
    transition-duration: 0.2s;
}

/*中辻夏祭り編*/
div#smallcard_sf {
    width:100%;
    height:100px;
    border-bottom: 3px solid #000080;
    background-color:#fffff0;
}

div#smallcard_sf a{
    display: block;
    text-decoration: none;
    width:100%;
    height:100%;
}
    
div#smallcard_sf img{
    width:auto;
    height:100%;
    float:left;
}

div#smallcard_sf p{
    width:100%;
    height:100%;
    margin:0;
    padding:30px 0px 0px 0px;
    text-indent:0em;
    color:#333333;
    font-size:150%;
    text-align: center;
}

div#smallcard_sf:hover {
    border-bottom: 3px solid #000060;
    background-color:#ffffe0;
    transition-duration: 0.2s;
}  

/*1999東京編*/
div#smallcard_tokyo {
    width:100%;
    height:100px;
    border-bottom: 3px solid #8b008b;
    background-color:#fffff0;
}

div#smallcard_tokyo a{
    display: block;
    text-decoration: none;
    width:100%;
    height:100%;
}
    
div#smallcard_tokyo img{
    width:auto;
    height:100%;
    float:left;
}

div#smallcard_tokyo p{
    width:100%;
    height:100%;
    margin:0;
    padding:30px 0px 0px 0px;
    text-indent:0em;
    color:#333333;
    font-size:150%;
    text-align: center;
}

div#smallcard_tokyo:hover {
    border-bottom: 3px solid #8b008b;
    background-color:#ffffe0;
    transition-duration: 0.2s;
}

/*Film de Nakatsuji編*/
div#smallcard_fdn {
    width:100%;
    height:100px;
    border-bottom: 3px solid #dc143c;
    background-color:#fffff0;
}

div#smallcard_fdn a{
    display: block;
    text-decoration: none;
    width:100%;
    height:100%;
}
    
div#smallcard_fdn img{
    width:auto;
    height:100%;
    float:left;
}

div#smallcard_fdn p{
    width:100%;
    height:100%;
    margin:0;
    padding:30px 0px 0px 0px;
    text-indent:0em;
    color:#333333;
    font-size:150%;
    text-align: center;
}

div#smallcard_fdn:hover {
    border-bottom: 3px solid #dc143c;
    background-color:#ffffe0;
    transition-duration: 0.2s;
}

/*美北に生きた時編*/
div#smallcard_mkt {
    width:100%;
    height:100px;
    border-bottom: 3px solid #32cd32;
    background-color:#fffff0;
}

div#smallcard_mkt a{
    display: block;
    text-decoration: none;
    width:100%;
    height:100%;
}
    
div#smallcard_mkt img{
    width:auto;
    height:100%;
    float:left;
}

div#smallcard_mkt p{
    width:100%;
    height:100%;
    margin:0;
    padding:30px 0px 0px 0px;
    text-indent:0em;
    color:#333333;
    font-size:150%;
    text-align: center;
}

div#smallcard_mkt:hover {
    border-bottom: 3px solid #32cd32;
    background-color:#ffffe0;
    transition-duration: 0.2s;
}

/*皇ヶ崎学院生徒会編*/
div#smallcard_khs {
    width:100%;
    height:100px;
    border-bottom: 3px solid #ff66c9;
    background-color:#fffff0;
}

div#smallcard_khs a{
    display: block;
    text-decoration: none;
    width:100%;
    height:100%;
}
    
div#smallcard_khs img{
    width:auto;
    height:100%;
    float:left;
}

div#smallcard_khs p{
    width:100%;
    height:100%;
    margin:0;
    padding:30px 0px 0px 0px;
    text-indent:0em;
    color:#333333;
    font-size:150%;
    text-align: center;
}

div#smallcard_khs:hover {
    border-bottom: 3px solid #ff66c9;
    background-color:#ffffe0;
    transition-duration: 0.2s;
}

/*============================================
各話カード(サムネイルなし)（モバイル）
============================================*/
div#smallcard_button {
    width:100%;
    height:auto;
    border-bottom: 3px solid #ffd700;
    background-color:#fffff0;
}

div#smallcard_button a {
    display: block;
    text-decoration: none;
    width:100%;
    height:100%;
    color:#333333;			/* 文字色を濃い目のグレーにする */
}

div#smallcard_button p#cardtitle {
    margin:0 auto;         /*位置調整とか*/
    padding:10px 0px;
    width:100%; height:auto;
    text-align: center;
    font-size:150%;			/* フォントサイズを150%にする */
    text-indent:0em;		/*インデント幅*/
}

div#smallcard_button:hover {
    border-bottom: 3px solid #ffa500;
    background-color:#ffffe0;
    transition-duration: 0.2s;
}

/*============================================
PDFビューア
============================================*/
div#pdf {
    width:100%;
    text-align: center;
}
div#pdf iframe#pdfviewer {
    width:90%;
    margin:10px,0px;
}
    

/*============================================
作品ポスター
============================================*/
img.poster {
    width:100%;
    height:auto;
}

/*============================================
作品ページタブ表示（モバイル）
============================================*/
/*タブ切り替え全体のスタイル*/
.tabs {
  padding-bottom: 0px;
  background-color: #fffff0;
  width: 100%;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/4);
  height: 40px;
  border-bottom: solid 3px #ffd700;
  background-color: #ffffe0;
  line-height: 50px;
  font-size: 100%;
  text-align: center;
  color: #333333;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
    cursor :pointer;
}

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

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 0px 0px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
/*#addressはterraorder.cssにあります*/
#episode:checked ~ #episode_content,
#story:checked ~ #story_content,
#character:checked ~ #character_content,
#keyword:checked ~ #keyword_content,
#special:checked ~ #special_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #ffa500;
  color: #ffffff;
}
    
/*============================================
登場人物紹介関連（モバイル）
============================================*/
div.character_img {
    text-align: center;
}
    
a#character_img img {
    text-align: center;
    width: 50%;
    height: auto;
}

p#character_name {
    width:100%;
    margin:10px 0px;
    padding:0px;
    text-indent: 0em;
    font-size: 200%;
    text-align: center;
}
p#character_ov {
    width:100%;
    margin:10px 0px;
    padding:0px;
}
 
/*============================================
登場人物紹介タブ（モバイル）
============================================*/
/*タブ切り替え全体のスタイル*/
.character_tabs {
  padding-bottom: 0px;
  width: 100%;
  margin: 0 auto;
}

/*タブのスタイル*/
.character_item {
  margin: 0;
  width: 50%;
  height: 45px;
  border-bottom: solid 2px #ffd700;
  background-color: #fffff0;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  color: #333333;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
    cursor :pointer;
}

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

/*タブ切り替えの中身のスタイル*/
.characters {
  display: none;
  opacity: 0;
  padding: 0px 0px 0;
  clear: both;
  overflow: hidden;
}

@keyframes show {
  from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/*選択されているタブのコンテンツのみを表示*/
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content,
#tab7:checked ~ #tab7_content,
#tab8:checked ~ #tab8_content,
#tab9:checked ~ #tab9_content {
  display: block;
  opacity: 1;
  animation: show 0.5s;
}

/*選択されているタブのスタイルを変える*/
.character_tabs input:checked + .character_item {
  background-color: #ffffe0;
  border-bottom:solid 2px #ffa500;
}

/*============================================
あらすじ表示ボタン（モバイル）
============================================*/
/*全体*/
.hidden_box {
    width:100%;
    height:auto;
    margin: 10px 0;/*前後の余白*/
    padding: 0;
    text-align: center;
}

/*ボタン装飾*/
.hidden_box label {
    display:inline-block;
    width:90%;
    height:auto;
    padding: 15px;
    font-weight: bold;
    border: solid 2px #ffd700;
    border-radius: 10px;
    cursor :pointer;
    background-color: #fffff0;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background-color: #ffffe0;
    border:solid 2px #ffa500;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show1 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box .hidden_show2 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box .hidden_show3 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box .hidden_show4 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box .hidden_show5 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
    
/*クリックで中身表示*/
.hidden_box input#label1:checked ~ .hidden_show1 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box input#label2:checked ~ .hidden_show2 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box input#label3:checked ~ .hidden_show3 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box input#label4:checked ~ .hidden_show4 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

.hidden_box input#label5:checked ~ .hidden_show5 {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
    
/*============================================
「前の話へ」「次の話へ」ボタン
============================================*/
div#prev-next_episode {
    width:100%;
    height:auto;
    margin:10px auto;
    display:flex;
}
    
div#prev-next_episode a {
    display:block;
    width:150px;
    height:45px;
    border:3px solid #ffd700;
    border-radius:10px;
    text-decoration: none;
}

div#prev-next_episode a p {
    width:100%;
    height:100%;
    padding:4px 0px 0px 0px;
    margin:0;
    text-indent:0em;
    text-align: center;
    font-size:150%;
    color:#333333;
}
    
div#prev-next_episode a#prev_episode {
    
}

div#prev-next_episode a#next_episode {
    margin:0 0 0 auto;
}

div#prev-next_episode a#prev_episode:hover,#next_episode:hover {
    background-color: #ffffe0;
    border:3px solid #ffa500;
    transition-duration: 0.2s
}

div#prev-next_episode a#prev_episode_unpublish {
    background-color: #d8d8a8;
    border:3px solid #b89E00;
}

div#prev-next_episode a#next_episode_unpublish {
    background-color: #d8d8a8;
    border:3px solid #b89E00;
    margin:0 0 0 auto;
}

}