/* Font */
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
main {
 font-family: "Roboto", sans-serif;
}
.font-mochiy-pop {
	font-family: 'Mochiy Pop One', sans-serif;
}

/* ヘッダーユーザーメニューリストのトグル */
.user-menu {
				  display: none;
}
.user-menu.open {
				  display: block;
}
/* ヘッダーナビメニューリストのトグル */
.nav-menu {
				  display: none;
}
.nav-menu.open {
				  display: block;
}
/* 編集ナビメニューリストのトグル */
.edit-menu {
				  display: none;
}
.edit-menu.open {
				  display: block;
}
 
/* 共通 リンクボタンクリック時の動き */
.linkbutton:hover {
				  opacity:0.8;
}
.linkbutton:active {
				  -webkit-transform: translate(0,2px);
				  -moz-transform: translate(0,2px);
				  transform: translate(0,2px);
				  border-bottom:none;
}
 
.linkbutton_checked {
				  opacity:0.7;
				  -webkit-transform: translate(0,2px);
				  -moz-transform: translate(0,2px);
				  transform: translate(0,2px);
				  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.ribon_color1 {

    border: 2px solid #FED7AA;

              background-image: linear-gradient(45deg, #fecdd312 25%, transparent 25%, transparent 50%, #fecdd312 50%, #fecdd312 75%, transparent 75%, transparent), linear-gradient(-45deg, #fecdd312 25%, transparent 25%, transparent 50%, #fed7ae12 50%, #fecdd312 75%, transparent 75%, transparent);

              background-color: #FED7AA0d;

    background-size: 20px 20px;

}

.ribon_color2 {

    border: 2px solid #FEE2E2;

              background-image: linear-gradient(45deg, #fee2e28d 25%, transparent 25%, transparent 50%, #fee2e28d 50%, #fecdd312 75%, transparent 75%, transparent), linear-gradient(-45deg, #fee2e28d 25%, transparent 25%, transparent 50%, #fee2e28d 50%, #fee2e28d 75%, transparent 75%, transparent);

              background-color: #FEE2E28d;

    background-size: 20px 20px;

}

 

.ribon_color3 {

    border: 2px solid #FECDD3;

              background-image: linear-gradient(45deg, #fecdd312 25%, transparent 25%, transparent 50%, #fecdd312 50%, #fecdd312 75%, transparent 75%, transparent), linear-gradient(-45deg, #fecdd312 25%, transparent 25%, transparent 50%, #fecdd312 50%, #fecdd312 75%, transparent 75%, transparent);

              background-color: #FECDD30d;

    background-size: 20px 20px;

}

.ribon_color3_2 {

    border: 2px solid #FECDD3;

              background-image: linear-gradient(45deg, #fecdd38d 25%, transparent 25%, transparent 50%, #fecdd38d 50%, #fecdd312 75%, transparent 75%, transparent), linear-gradient(-45deg, #fecdd38d 25%, transparent 25%, transparent 50%, #fecdd38d 50%, #fecdd38d 75%, transparent 75%, transparent);

              background-color: #FECDD38d;

    background-size: 20px 20px;

}

.ribon_midashi {
				  display: block;
				  position: relative;
				  height: 60px;
				  line-height: 60px;
				  text-align: center;
				  padding: 7px 10px;
				  box-sizing: border-box;
				  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
.ribon_midashi h1 {
				  margin: 0;
				  padding: 0 30px;
				  border-top-width: 2px;
				  border-bottom-width: 2px;
				  border-top-style: dashed;
				  border-bottom-style: dashed;
				  line-height: 42px;
}
.ribon_midashi:before, .ribon_midashi:after {
				  position: absolute;
				  content: '';
				  width: 0px;
				  height: 0px;
				  z-index: 1;
}
.ribon_midashi:before {
				  top: -2px;
				  left: -2px;
				  border-width: 32px 0px 32px 15px;
				  /*border-color: transparent transparent transparent #fff;*/
				  border-style: solid;
}
.ribon_midashi:after {
				  top: -2px;
				  right: -2px;
				  border-width: 32px 15px 32px 0px;
				  /*border-color: transparent #fff transparent transparent;*/
				  border-style: solid;
}
 
.memotag {
				  display:flex;
				  padding: 3px 5px;
				  vertical-align: middle;
				  border-radius: 25px 0px 0px 25px;
}
 
.comic_container_box{
	 position: relative;
	 padding: 0.25em 1em;
}
.comic_container_box:before,.comic_container_box:after
{
	 content: '';
	 position: absolute;
	 width:15px;
	 height: 15px;
	 border-style:solid;
	 border-width:2px;
}
.comic_container_box:after {
	 top:-15px;
	 left:-15px;
}
.comic_container_box:before {
	 bottom:-15px;
	 right:-15px;
}

.comic_container_box_trans::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(rgba(255,255,255,0) 0, #fff 80%);
  position: absolute;
  top: 0;
  left: 0;
  z-index:10;
}
 
a:visited {
    color: #551A8B;
}
 
a:hover {
    color: #0000EE;
    text-decoration: underline;
}
 
a:active {
    color: #0000EE;
}

/* book rating */
 
.bookrate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.bookrate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    color:#ccc;
}
.bookrate:not(:checked) > label:before {
    content: '★';
}
.bookrate > input:checked ~ label {
    color: #ffc700;   
}
.bookrate:not(:checked) > label:hover,
.bookrate:not(:checked) > label:hover ~ label {
    color: #deb217; 
}
.bookrate > input:checked + label:hover,
.bookrate > input:checked + label:hover ~ label,
.bookrate > input:checked ~ label:hover,
.bookrate > input:checked ~ label:hover ~ label,
.bookrate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}
 
.read_wrap{
}
.read_wrap input{
    opacity: 0;
}
.read_wrap label{
    width:45px;
    height:20px;
    box-sizing:border-box;
    float:left;
    border-radius:45px;
    position:relative;
    cursor:pointer;
    transition:.3s ease;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
}
.read_wrap input:focus + label,
.read_wrap input:focus + label:before{
    box-shadow: 0 0 4px #34abff;
}
.read_wrap input:checked + label{
    background:#4BD865;
}
.read_wrap label:before{
    content:'';
    width:18px;
    height:18px;
    position:absolute;
    background:white;
    left:5px;
    top:2px;
    box-sizing:border-box;
    color:black;
    border-radius:45px;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
    transition:.3s;
}
.read_wrap input[type=checkbox]:checked + label:before{
    left:23px;
}
.book_describe_bg{
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 50%,
      #ffff 50%,
      #ffff 50%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #999 97%,
      #999 100%
    );
  background-size:
    8px 100%,
    100% 2em;
}
/* book rating */


/* animation */
.loading-image {
  animation: jump 1.0s infinite ease-in-out; /* ジャンプアニメーション */
}
 
/* ジャンプするアニメーション */
@keyframes jump {
  0% {
    transform: translateY(0); /* 地面（スタート位置） */
  }
  50% {
    transform: translateY(0); /* 地面に戻る */
  }
  75% {
    transform: translateY(-7px); /* 再度ジャンプ */
  }
  100% {
    transform: translateY(0); /* 最終的に地面に着地 */
  }
}

/* QA */
.qa-7 {
	margin:0 auto;
	max-width: 1024px;
	margin-bottom: 5px;
	border-bottom: 2px solid #d6dde3;
}
 
.qa-7 summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em 1em 3em;
	font-weight: 600;
	cursor: pointer;
}
 
.qa-7 summary::before,
.qa-7 span::before {
	position: absolute;
	left: 1em;
	font-weight: 600;
	font-size: 1.3em;
}
.qa-7 summary::before{
	color: #75bbff;
	content: "Q";
}
 
.qa-7 summary::after {
	transform: translateY(-25%) rotate(45deg);
	width: 7px;
	height: 7px;
	margin-left: 10px;
	border-bottom: 3px solid #333333b3;
	border-right: 3px solid #333333b3;
	content: '';
	transition: transform .5s;
}
 
.qa-7[open] summary::after {
	transform: rotate(225deg);
}
 
.qa-7 span {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em 3em;
    color: #333;
    transition: transform .5s, opacity .5s;
}
.qa-7[open] span {
    transform: none;
    opacity: 1;
}
.qa-7 span::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}
/* Chat */

.voice_chat_button{
  width:100%;
  height:50px;
  padding: 8px 20px;
  margin:  0 0 10px 0;
  text-align:right;
  background: snow;
  display:flex;
  justify-content: flex-end;
}
.voice_chat_button p{
  padding: 5px 0 0 0;
  white-space: nowrap;
  margin: 0 60px 0 0;  
}
.voice_tool{
  margin: 0 5px 0 0;
  text-align: left;
}
.voice_chat_button .voice_chat_button_img_right
{
  margin-right:4px;
  margin-top:-1px;
  float:right;
  width:44px;
  height:44px;
}
.voice_chat_button .voice_chat_button_img_right img
{
  max-width:40px;
  max-height:40px;
  border:2px solid #eee;
  border-radius:50%;
  margin:0;
}

.voice-text-right
{
  color:#444;
  position:relative;
  margin-left:60px;
  margin-right:5px;
  padding:0.5em;
  border:3px solid #eee;
  background-color:#fff;
  border-radius:5px;
}
.voice-text-right:before
{
  position:absolute;
  content:'';
  border:10px solid transparent;
  border-right:10px solid #eee;
  top:21px;
  left:-23px;
}
.voice-text-right:after
{
  position:absolute;
  content:'';
  border:10px solid transparent;
  border-right:10px solid #fff;
  top:21px;
  left:-19px;
}
.voice-text-left
{
  position:relative;
  margin-left:5px;
  margin-right:60px;
  padding:0.5em;
  border:3px solid #eee;
  background-color:#fff;
  border-radius:5px;
}
.voice-text-left:before
{
  position:absolute;
  content:'';
  border:10px solid transparent;
  border-left:10px solid #eee;
  top:21px;
  right:-23px;
}
.voice-text-left:after
{
  position:absolute;
  content:'';
  border:10px solid transparent;
  border-left:10px solid #fff;
  top:21px;
  right:-19px;
}
.message_box{
   padding: 0.2em 0.5em;
    margin: 2em 0;
    padding: 1em;
    color: black;
    background: #fffde8;
    box-shadow: 0px 0px 0px 10px #fffde8;
    border: dashed 2px #ffb03f;
    border-radius: 8px;
    width: 100%;
}
.message_box p{
  margin: 0;
  padding: 0;
  font-size: 20px;
}