@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: auto;
    object-fit: scale-down;
    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: 50px 0 0; }
  @media screen and (max-width: 1023px) {
    section {
      padding: 50px 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-block; }

#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; }

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

GALLERY

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.gallerylist {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 margin: 40px 0;
}

.gallerylist__item {
 width: calc((100% - 80px)/5);
 height: auto;

 @media screen and (max-width: 1024px) {
  width: calc((100% - 60px)/4);
 }

 @media screen and (max-width: 767px) {
  width: calc((100% - 40px)/3);
 }

 @media screen and (max-width: 520px) {
  width: calc((100% - 20px)/2);
 }

 a {
  position: relative;
  width: 100%;
  display: block;

  &::before {
   content: "";
   display: block;
   padding-top: 100%;
   /*100%=親要素の横幅*/
  }

  img {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
  }

 }

}

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

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