@charset "utf-8";

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

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

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

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

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

hr {
    border:5px double #cd853f;
}

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

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

.character_tabs input:checked + .character_item {
  background-color: #f5deb3;
  border:solid 2px #99642f;
}

a#link {
    color: #cd853f;
    }
    
a#link:hover {
    color: #99642f;
    }
    
div.headerborder {
    background-color:#cd853f;
}
/*============================================
メインメニュー
============================================*/
div#menubody {
    background-color:#cd853f;
}

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

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

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

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

.menu li:hover {
    background-color: #99642f;      /* カーソルを合わせると色が変わる */
    transition-duration: 0.2s;      /*色が変わる時間*/
}
    
/*============================================
地図
============================================*/
/*スマホ版地図を非表示*/
div.episode_mobile {
    display: none;
}
    
div#background_map {
    width: 860px;
    height: 674px;
    position: relative;
}    
        
.chapter_select input[type="radio"] {
  display: none;
}
        
div.chapter_select img#chapter1 {
    position: absolute;
    left: 46px;
    top: 149px;
        }
        
div.chapter_select img#chapter2 {
    position: absolute;
    left: 253px;
    top: 237px;
        }

div.chapter_select img#chapter3 {
    position: absolute;
    left: 248px;
    top: 94px;
        }
        
div.chapter_select img#chapter4 {
    position: absolute;
    left: 462px;
    top: 83px;
        }

div.chapter_select img#chapter5 {
    position: absolute;
    left: 587px;
    top: 192px;
        }
    
div.chapter_select img#epilogue {
    position: absolute;
    left: 650px;
    top: 400px;
        }
        
label img {
    width: 80px;
    height: 80px;
    border-radius: 40px;
}

.chapter_select input[type="radio"]:checked + label img {
    filter: brightness(150%);
    transition-duration: 0.2s;
}

div.chapter_content {
    display: none;
}

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

#chapter1:checked ~ #chapter1_content, 
#chapter2:checked ~ #chapter2_content,
#chapter3:checked ~ #chapter3_content,
#chapter4:checked ~ #chapter4_content,
#chapter5:checked ~ #chapter5_content,
#epilogue:checked ~ #epilogue_content {
    display: block;
    opacity: 1;
    animation: show 0.5s;
}

/*============================================
各話カード
============================================*/
    
div.chapter_card a{
    display: block;
    margin: 10px 28px;
    width: 800px;
    height: 160px;
    border: 2px solid #cd853f;
    border-radius: 10px;
    background-color: #ffe7ba;
}

div.chapter_card img {
    float:left;
    border-radius:10px 0px 0px 10px;
}

div.chapter_card p {
    text-indent: 0em;		/*インデント幅*/
    float: left;
    width: 500px;
    height: 160px;
    margin: 0;
    padding: 0px 20px;
    font-size: 150%;
    text-decoration: none;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

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

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

    
}

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

/*============================================
色の変更
============================================*/
body {
    background-color: #f5deb3;
}

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

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

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

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

hr {
    border:5px double #cd853f;
}
    
#nav-open {
    background-color: #cd853f;
}
    
#mobilemenu-content {
    background-color:  #f5deb3;  
}

#mobilemenu-content ul.menu li {
    background-color: #cd853f;
}
    
#mobilemenu-content ul.menu li.main {
    background-color: #99642f;
}

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

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

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

.character_tabs input:checked + .character_item {
  background-color: #f5deb3;
  border-bottom:solid 2px #99642f;
}

a#link {
    color: #cd853f;
    }
    
a#link:hover {
    color: #99642f;
    }
    
div.headerborder {
    background-color:#cd853f;
}
/*============================================
地図
============================================*/
/*PC版地図を非表示*/
div#background_map {
    display: none;
}
    
img#map_mobile {
    width: 100%;
    height: auto;
}

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

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

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #99642f;
  color: #333333;
}
    
/*============================================
各話カード（モバイル）
============================================*/   
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 #cd853f;
    background-color:#ffe7ba;
}

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

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 img {
    width:auto;
    height:100%;
    float:left;
}

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