@charset "utf-8";

/*============================================
PC版
============================================*/
@media screen and (min-width:641px) {
/*============================================
色の変更
============================================*/
body {
    background-color: #ffece8;
}

div#headerbody {
    background-color:#ffd9d8;
}

h4 {
    background-color: #ff8a63;
    border-bottom: solid 3px #df4614;
}

div#library_submenu h2 a {
    background-color: #ff8a63
}

div#library_submenu h2 a:hover {
    background-color: #ef6a53
}

hr {
    border:1px dotted #ff8a63;
}

h5 {
    border-left: solid 3px #ff8a63;/*左線*/
}

/*タブのスタイル*/
.character_item {
  border: solid 2px #df4614;
  background-color: #ffd9d8;
}

.character_tabs input:checked + .character_item {
  background-color: #efb9b8;
  border:solid 2px #df4614;
}

a#link {
    color: #df4614;
    }
    
a#link:hover {
    color: #af2604;
    text-decoration: none;
    }
    
div.headerborder {
    background-color:#ff8a63;
}

div#card {
    background-color:#ffece8;		/*背景色*/
    border:2px solid #ff8a63;
}

div#card:hover {
    background-color:#ffd9d8;      /*カーソルを合わせると色が変わる*/
    border:2px solid #ff8a63;
}

    
/*本編各話*/
div#smallcard {
    margin:0;
    background-color: #ffece8;
    border:3px solid #ff8a63;
    border-radius: 10px;
}

div#smallcard:hover {
    transform: scale(1.05);
    background-color:#ffd9d8;
    border:3px solid #ff8a63;
    transition-duration: 0.2s;
}
    
/*============================================
メインメニュー
============================================*/
div#menubody {
    background-color:#ff8a63;
}

.menu li {
    background-color:#ff8a63;		/*背景色*/
}

.menu li a {
	color:#333333;			/*文字色*/
}

.menu li ul a {
	color:#333333;			/*文字色*/
}

.menu ul {
    background-color:#ff8a63;		/*背景色*/
	color:#333333;			/*文字色*/
}

.menu li:hover {
    background-color: #ef6a53;      /* カーソルを合わせると色が変わる */
    transition-duration: 0.2s;      /*色が変わる時間*/
}

/*============================================
作品ページタブ表示
============================================*/
/*タブ切り替え全体のスタイル*/
.tabs {
  background-color: #ffece8;
}

/*タブのスタイル*/
.tab_item {
  border-bottom: solid 3px #df4614;
  background-color: #ff8a63;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #ef6a53;
  border-bottom: solid 3px #df4614;
  color: #ffece8;
}

/*============================================
登場人物紹介関連
============================================*/
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: 180%;
    text-align: center;
}

p#character_name_ruby {
    text-indent:0em;
    float:right;
    width:480px;
    margin:0px 10px 10px;
    padding:0px;
    text-align: center;
}

p#character_ov {
    float:right;
    width:480px;
    margin:10px;
    padding:0px;
}

/*============================================
名簿チェックボックス
============================================*/  
.address_check{
    display: none;
}
.address_label{
    width:820px;
    margin:0;
    color: #333333;
    display: block;
    padding:10px 0px;
    font-size:150%;
    border-bottom:dotted 3px #333333;
    background-image: url(../images/others/terraorder/address_background.png)
}
    
.address_label:hover {
    filter: brightness(90%);
    transition-duration: 0.2s;
}

.address_page{
    width:820px;
    height: 0;
    opacity: 0;
    padding: 0 0px;
    transition: 0.5s;
    visibility: hidden;
}
    
.address_check:checked + .address_label + .address_page{
    width:820px;
    height: 400px;
    opacity: 1;
    padding: 0px;
    visibility: visible;
    display:flex;
}

/*============================================
名簿関連
============================================*/

div#address_content {
    width: 860px;
    height: auto;
    background-image: url(../images/others/terraorder/address_background.png)
}

/*住所録タブがチェックされている時に表示する*/
#address:checked ~ #address_content {
    display: flex;
    flex-direction: column;
} 



div#address_list {
    width:860px;
    height:auto;
    padding:0px 20px;
}

div.address_tab {
    display: flex;
}

div.address_page p {
    width: 400px;
    height:auto;
    margin:0px 0px 0px 20px;
}

div.address_page h5 {
    width: 400px;
    height:auto;
    margin:0px 0px 0px 20px;
    padding:10px 0px;
    border: 0px;
    font-size: 100%;
    
}
    
div.address_page p {
    text-indent: 0em;
}
    
div.address_page p#catch {
    text-align: center;
    margin: 10px 20px;
}

div.address_page p#info {
    padding:10px 0px;
    
}
    
/*============================================
「前の話へ」「次の話へ」ボタン
============================================*/
div#prev-next_episode a {
    background-color: #ffd9d8;
    border:3px solid #df4614;
}

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

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

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


}

/*============================================
スマホ版
============================================*/
@media screen and (max-width:640px) {

/*============================================
色の変更（モバイル）
============================================*/
body {
    background-color: #ffece8;
}

div#headerbody {
    background-color:#ffd9d8;
}

h4 {
    background-color: #ff8a63;
    border-bottom: solid 3px #df4614;
}

div#library_submenu h2 a {
    background-color: #ff8a63
}

div#library_submenu h2 a:hover {
    background-color: #ef6a53
}

hr {
    border:1px dotted #ff8a63;
}
    
#nav-open {
    background-color: #ff8a63;
}
    
#mobilemenu-content {
    background-color:  #ffd9d8;  
}

#mobilemenu-content ul.menu li {
    background-color: #ff8a63;
    border-bottom:solid 3px #df4614;
}
    
#mobilemenu-content ul.menu li.main {
    background-color: #ef6a53;
}

#mobilemenu-content ul.menu li:hover {
    background-color: #ef6a53;
}

h5 {
    border-left: solid 3px #ff8a63;/*左線*/
}

/*タブのスタイル*/
.character_item {
  border-bottom: solid 2px #df4614;
  background-color: #ffd9d8;
}

.character_tabs input:checked + .character_item {
  background-color: #efb9b8;
  border-bottom:solid 2px #df4614;
}

a#link {
    color: #df4614;
    }
    
a#link:hover {
    color: #af2604;
    text-decoration: none;
    }
    
div.headerborder {
    background-color:#ff8a63;
}

div#card {
    background-color:#ffece8;		/*背景色*/
    border:2px solid #ff8a63;
}

div#card:hover {
    background-color:#ffd9d8;      /*カーソルを合わせると色が変わる*/
    border:2px solid #ff8a63;
}

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

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

/*============================================
作品ページタブ表示
============================================*/
/*タブ切り替え全体のスタイル*/
.tabs {
  background-color: #ffece8;
}

/*タブのスタイル*/
.tab_item {
  border-bottom: solid 3px #df4614;
  background-color: #ff8a63;
}

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

p#character_name {
    width:100%;
    margin:10px 0px;
    padding:0px;
    text-indent: 0em;
    font-size: 180%;
    text-align: center;
}
    
p#character_name_ruby {
    text-indent:0em;
    text-align: center;
    width:100%;
    margin:0px 10px 10px;
    padding:0px;
}

p#character_ov {
    width:100%;
    margin:10px 0px;
    padding:0px;
}

/*============================================
名簿チェックボックス（モバイル）
============================================*/  
.address_check{
    display: none;
}
.address_label{
    width:100%;
    margin:0;
    color: #333333;
    display: block;
    padding:10px 0px;
    font-size:150%;
    border-bottom:dotted 3px #333333;
    background-image: url(../images/others/terraorder/address_background.png)
}
    
.address_label:hover {
    filter: brightness(90%);
}

.address_page{
    width:100%;
    height:0;
    opacity: 0;
    padding: 0 0px;
    visibility: hidden;
    display: flex;
    flex-direction: column-reverse;
}
    
.address_check:checked + .address_label + .address_page{
    width:100%;
    height: auto;
    opacity: 1;
    padding: 0px;
    visibility: visible;
    display:flex;
}


.address_check:checked {
    background-color: #000000;
}
    
/*============================================
名簿関連（モバイル）
============================================*/

div#address_content {
    width: 100%;
    height: auto;
    background-image: url(../images/others/terraorder/address_background.png)
}

/*住所録タブがチェックされている時に表示する*/
#address:checked ~ #address_content {
    display: block;
} 



div#address_list {
    width:100%;
    height:auto;
    padding:0px;
}

div.address_page p {
    width: 100%;
    height:auto;
    margin:0px;
    text-indent: 0em;
}

div.address_page h5 {
    width: 100%;
    height:auto;
    margin:0px;
    padding:10px 0px;
    border: 0px;
    font-size: 100%;
    
}

div.address_page p#catch {
    text-align: center;
    margin: 10px 0px;
    text-indent: 0em;
}

div.address_page p#info {
    padding:10px 0px;
    
}

div.address_page img {
    width:100%;
    height:400px;
    object-fit: none;
}
    
/*============================================
「前の話へ」「次の話へ」ボタン（モバイル）
============================================*/
div#prev-next_episode a {
    background-color: #ffd9d8;
    border:3px solid #df4614;
}

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

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

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

}