@charset "UTF-8";
/* Scss Document */
html {
  font-size: 62.5%; }

body {
  font-size: 1.6rem;
  font-family: 'Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	color: #333;
  line-height: 1.6; }
  @media screen and (max-width: 1023px) {
    body {
      font-size: 1.4rem; } }

p {
  margin: 20px 0; }

a {
  color: #333; }

h1, h2, h3, h4 {
  font-family: 'Josefin Sans','Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: normal; }

h2 {
  position: relative;
  padding-left: 16px; }
  h2::before {
    position: absolute;
    top: 20%;
    left: 0;
    content: "";
    display: block;
    width: 4px;
    height: 50%;
    background: #CCCFDB; }

.grid {
  display: grid; }

.flex {
  display: flex;
  flex-wrap: wrap; }

ul.yoko {
  margin: 20px 0; }
  ul.yoko li {
    margin-right: 20px;
    line-height: 40px; }

/*------------------------------------------------------------
　ヘッダー
------------------------------------------------------------*/
header {
  position: sticky;
  top: 0;
  z-index: 2; }
  @media screen and (max-width: 1023px) {
    header {
      background: #CCCFDB; } }
/*-------------------- タイトル --------------------*/
  header h1 {
    text-align: center;
    color: #333;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.4rem;
    padding: 20px 0 16px; }
    header h1 a {
      text-decoration: none; }
/*-------------------- メニューボタン --------------------*/
  header .menubtn {
    position: absolute;
    top: 24px;
    right: 20px;
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent;
    transition: transform 0.3s ease;
    cursor: pointer; }
header .menubtn.is-active{
	transform: rotate(180deg);
}
@media screen and (max-width: 1023px) {
	header .menubtn{
	top: 24px;
	right: 10px;
  width: 20px;}
	header .menubtn.is-active{
	right: 10px;
}
}

/*-------------------- メニュー --------------------*/
ul.menu {
  padding: 20px 0;
  display: none;
  background: #CCCFDB; }
  ul.menu li {
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    transition: 0.2s; }
    ul.menu li:hover {
      background: #fff;
      transition: 0.2s; }
    ul.menu li a {
      display: block;
      text-decoration: none; }

/*------------------------------------------------------------
　トップ絵
------------------------------------------------------------*/
.topimg {
  max-height: calc(100vh - 74px); }
  .topimg img {
    width: calc(100vw - 148px);
    height: calc(100vh - 148px);
    object-fit: cover;
    margin: 0 auto; }
    @media screen and (max-width: 1023px) {
      .topimg img {
				width: 100vw;
        height: auto; } }

/*------------------------------------------------------------
　横幅設定
------------------------------------------------------------*/
@media screen and (min-width: 1024px) {
  main {
    width: 1024px;
    margin: 0 auto; } }
/*------------------------------------------------------------
　コンテンツ
------------------------------------------------------------*/
section {
  padding: 120px 0 0; }
  @media screen and (max-width: 1023px) {
    section {
      padding: 80px 10px 0; } }

/*-------------------- あらすじ・登場人物 --------------------*/
/*タブ切替*/
.tabs {
  margin: 10px auto;
  position: relative; }

.tab-buttons span {
  cursor: pointer;
  border-bottom: 8px solid rgba(204, 207, 219, 0.2);
  display: block;
  width: 241px;
  height: 66px;
  float: left;
  text-align: center;
  padding: 20px 0; }
  @media screen and (max-width: 1023px) {
    .tab-buttons span {
      width: 50%; } }

.tab-content {
  padding: 40px 0 0;
  display: inline-flex; }

#lamp {
  width: 241px;
  height: 8px;
  background: #CCCFDB;
  display: block;
  position: absolute;
  top: 58px;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in; }
  @media screen and (max-width: 1023px) {
    #lamp {
      width: 50%; } }

#lamp.character {
  left: 241px;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in; }
  @media screen and (max-width: 1023px) {
    #lamp.character {
      left: 50%; } }

#lamp.summary {
  left: 0;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in; }

/*あらすじ*/
@media screen and (max-width: 1023px) {
  .summary {
    padding: 0 10px; } }

/*登場人物*/
.character {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; }
  .character .chara img {
    border-radius: 50%;
    margin: 20px auto;
    width: 180px;
    height: 180px;
    object-fit: cover; }
  .character .chara .charaname {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px; }
  .character .chara p {
    font-size: 1.4rem;
    padding: 0 10px; }

/*-------------------- サムネイル一覧 --------------------*/
#episode-list {
  padding: 20px 0 0; }
  @media screen and (min-width: 1024px) {
    #episode-list ul {
      grid-template-columns: repeat(auto-fit, minmax(328px, 1fr));
      gap: 20px; }
      #episode-list ul li {
        margin-bottom: 20px;
        overflow: hidden; }
        #episode-list ul li:hover .title {
          background-size: 100% 8px;
          transition: 0.3s; }
        #episode-list ul li a {
          text-decoration: none;
          margin-bottom: -20px;
          padding-bottom: 20px; }
        #episode-list ul li img {
          margin: 0 auto;
          width: 320px;
          height: 238px;
          object-fit: cover; }
        #episode-list ul li .episode {
          font-size: 1.8rem;
          margin: 20px 0; }
        #episode-list ul li .title {
          display: inline;
          background: linear-gradient(rgba(204, 207, 219, 0.2), rgba(204, 207, 219, 0.2)) 0 100%/0 8px no-repeat;
          transition: 0.3s; } }
  @media screen and (max-width: 1023px) {
    #episode-list ul li {
      position: relative;
      min-height: 100px;
      margin-bottom: 10px; }
      #episode-list ul li img {
        position: absolute;
        height: 100%; }
      #episode-list ul li p {
        margin: 10px;
        margin-left: 140px; }
      #episode-list ul li a {
        text-decoration: none; } }

/*-------------------- ランキング --------------------*/
@media screen and (max-width: 1023px) {
  #ranking {
    padding: 80px 10px 0; } }

/*------------------------------------------------------------
　フッター
------------------------------------------------------------*/
footer {
  margin-top: 120px;
  padding: 20px 0;
  text-align: center;
  }
footer small{
	font-size: 1.2rem; 
}