@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,396;1,396&family=DotGothic16&family=East+Sea+Dokdo&family=Licorice&family=Playwrite+AU+QLD:wght@100..400&family=Rampart+One&family=RocknRoll+One&family=Shippori+Mincho+B1&family=Train+One&display=swap');

/*キャラ一覧用　2column*/
.chara-lists{
display: flex; /*横並び*/
flex-wrap: wrap; /*画面の横幅を超えたら折り返す*/
}

.chara-card{
border-radius:15px;
background-color:white;
margin:2.5%;
padding:1%;
width:45%;
}

.chara-card a{
text-decoration: none;
} 

.fit-picture {
 width: 100%;
 padding:5%;
 height: auto;
}

.charaName{
 text-align: center; 
 align-items: center;
}


/*メニュー一覧*/
.menu-lists{ /*メニュー全体の幅*/
padding-top:3%; 
}

.menu-list{ /*メニューの並び方指定*/
display: block;
}

.menu-list li{ /*メニュー1つ1つの設定*/
margin:2.5% 0;
position: relative;

}

.menu-list-title{ /*メニューのタイトル*/
font-size:2.0rem;
width:100%;
padding:3%;
text-align: center;
background-color:white;
border-radius:15px;
}

.menu-selected-icon{ /*未選択中はアイコン非表示*/
width:15%;
z-index: 94;
position: absolute;
top: -12px;
left: 8px;
opacity: 0;
}

.menu-list li:hover .menu-selected-icon{ /*選択中はアイコン表示*/
  opacity: 1;
}

.charamenu{
  display: flex;
  align-items: center;
  justify-content: center;
}

.charamenu-img{
  width:150px;
}


.charamenu-child{
display: none;
color: #662e09;
margin:1%;
padding:1% 3%;
background-color:white;
border: 3px solid orange;
border-radius:30px;
}

/*タブメニュー全般*/
.modal-tab{
 display: flex;
 margin:1% 0;
 align-items: center;
 justify-content: center;
}

/*タブメニューのボタン*/
.modal-tab span{
padding:1% 3%;
}

/*タブメニュークリック時は色を変える*/
.modal-tab-active {
color:#FFF8E3;
background-color: #662e09;
}

/*タブメニューボタンの左側に線をつける*/
.modal-tabmenu-left{
 border-left: 1px solid #B28655;
}

/*キャラクター一覧*/
.menu-list-childList{ /*普段は非表示のメニュー*/
margin-top:2%;
margin-left:15%;
display: none;
}

.menu-list-childList ul{ /*キャラクターの並び方指定*/
display: flex;
flex-wrap: wrap;
}

.character{
width:15%;
margin:1px;
padding:1px;
}

.character-img{
width: 100%;
height: auto;
border: 3px solid #FFBEB9;
border-radius:5px;
align-items: center;
}

.character-img2{
width:15%;
height: auto;
margin:1px;
padding:1px;
border: 3px solid #FFBEB9;
border-radius:5px;
align-items: center;
}

.explanation {
display:inline-block;
padding:0;
}

.typetags{
display:inline-block;
margin-top:1%; 
background-color:white;
border: 3px solid orange;
border-radius:5px;
}

/* モーダルウィンドウ */
.modal-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background-color: #FFF8E3;
  border-radius: 5px;
  font-size:1.4rem;
  z-index: 96;
}

.modal-content {
padding: 2.0rem 3.5rem;  
}

.modal-content ul{
height: 500px;
}

.modal-content li{
height: 100%;
overflow:scroll;
}

/* 閉じるボタン */
.button-close {
font-size:2.0rem;
color: #662e09;
z-index: 90;
}

.modal-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  padding: 1em;
  background-color: #c96931;
  color: #eaeaea;
  border-radius: 20rem;
  cursor: pointer;
}

.modal-heading{
 font-size:2.0rem;
 font-family: "RocknRoll One", sans-serif;
 font-weight: 400;
 font-style: normal;
}

.modal-category span {
 padding-right:1rem;
}

.modal-title-text{
margin: 1em 0;
text-align: center;
border-top: 3px solid #662e09;
border-bottom: 3px solid #662e09;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 95;
}

/* キャラ変更のボタン */
.round_arrow_left,.round_arrow_right {
  position: relative;
}
 
.round_arrow_left::before,.round_arrow_right::before {
  content: "";
  position: fixed;
  margin: auto;
  top: 50%;
  bottom: 50%;
  width: 48px; /* 横幅 */
  height: 48px; /* 高さ */
  border-radius: 50%; /* 角の丸み */
  background: #ffa01c;
  opacity: 0.5;
}

.round_arrow_left::before { 
  left: -10px;
}

.round_arrow_right::before { 
  right: -10px;
}

.round_arrow_left::after,.round_arrow_right::after { /* くの字の表示設定 */
  content: "";
  position: fixed;
  margin: auto;
  top: 50%;
  bottom: 50%;
  width: 20px;
  height: 20px;
  border-top: 5px solid #fff;
}
 
.round_arrow_left::after { /* くの字の表示設定 */
  left: 7px;
  border-left: 5px solid #fff;
  transform: rotate(-45deg);
}
 

 
.round_arrow_right::after { /* くの字の表示設定 */
  right:7px;
  border-right: 5px solid #fff;
  transform: rotate(45deg);
}


/*-----------------------------フォント-----------------------------*/
.rocknroll-one-regular {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.train-one-regular { /* ボーダー文字 */
  font-family: "Train One", system-ui;
  font-weight: 400;
  font-style: normal;
}

.rampart-one-regular { /* 立体 */
  font-family: "Rampart One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.east-sea-dokdo-regular { /* 墨っぽいやつ */
  font-family: "East Sea Dokdo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.licorice-regular { /* 筆記体の英語 */
  font-family: "Licorice", cursive;
  font-weight: 400;
  font-style: normal;
}