@charset "UTF-8";

/*cmn*/

.ttl_header {
  background: #003362;
  font-family: "Sawarabi Mincho", sans-serif;
  transform: rotate(0.03deg);
}

.ttl_header .content_inner {
  max-width: 1000px;
}

/*pc*/
@media screen and (min-width: 640.1px) {
  .content_inner {
    display: block !important;
    padding: 0 0 0 0;
  }

  .contentWrap {
    padding: 0 0 4em 0;
  }
}

@media screen and (max-width: 1000px) {
  .content_inner {
    width: 100%;
  }

  .ttl_header .content_inner {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }

  #anniversary img {
    width: 100%;
  }
}

/*sp*/
@media screen and (max-width: 640px) {
  .content.content_inner {
    padding: 1em 0 3em 0;
  }

  .appointment_info {
    padding-bottom: 2em;
  }

  .page_ttl h2 {
    margin: 0 auto;
    padding: 2.5% 0;
  }
}

/* 画面外にいる状態 */
.fadein {
  opacity: 0.1;
  transform: translate(0, 50px);
  transition: all 500ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/*ロード時やスクロール時にふわっと表示させる*/
.scroll-fade {
  opacity: 0;
  transition: all 0.2s
    /*処理にかかる時間*/
  ;
}

.scroll-up {
  opacity: 0;
  transform: translateY(10px)
    /*スクロールアップする距離*/
  ;
  transition: all 0.5s
    /*処理にかかる時間*/
  ;
}

.scroll-up.done,
.scroll-fade.done {
  opacity: 1;
  transform: translate(0, 0);
}

.load-fade {
  opacity: 0;
  transition: all 2s
    /*処理にかかる時間*/
  ;
}

.load-up {
  opacity: 0;
  transform: translateY(30px)
    /*スクロールアップする距離*/
  ;
  transition: all 1s
    /*処理にかかる時間*/
  ;
}

.load-up.done,
.load-fade.done {
  opacity: 1;
  transform: translate(0, 0);
}

/*タイトル・作者*/

.page_ttl {
  font-size: 2em;
  color: #fff;
}

/*pc*/
@media screen and (min-width: 640.1px) {
  .ttl_header {
    padding: 0.8em;
  }

  .ttl_header .content_inner {
    padding: 0 1em;
  }
}

/*タイトル*/
.ttl_wrap {}

.ttl_wrap h3 {
  font-size: 4rem;
  line-height: 1;
  padding: 1.4rem 0.4em;
  max-width: 1000px;
  margin: 0 auto 0.5em auto;
  color: #fff;
}

.ttl_wrap h4 {
  font-size: 3rem;
  color: #00bcbe;
  background-color: #eaeff2;
  background-image: none;
  border-left: 8px solid #00bcbe;
  line-height: 1;
  padding: 1.4rem 0.4em;
  font-family: "Sawarabi Mincho", sans-serif;
  margin-bottom: 1em;
}

.item_list {
  width: 95%;
  margin: 0 auto 2em;
}

.item_list li {
  flex-basis: 46% !important;
  max-width: 46% !important;
  width: 46% !important;
  border-bottom: 1px solid #d7dde6;
  margin: 0 2%;
}

.item_list li a {
  padding: 1em;
  display: block;
  position: relative;
  padding-right: 2.5em;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.item_list a:after {
  content: "";
  position: absolute;
  height: 0.7em;
  width: 0.7em;
  background: url(../../common/images/arrow_b.png) no-repeat;
  top: 0;
  bottom: 0;
  right: 1em;
  margin: auto;
  -webkit-background-size: contain;
  background-size: contain;
}

.ttl_wrap h4 span {
  color: #00bcbe;
}






/* 5周年追記 */
/* 点滅アニメーションの定義 */
@keyframes blinking {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 点滅アニメーションを適用 */
.blink {
  animation: blinking 1s ease-in-out infinite alternate;
}

#anniversary a {
  color: #00bcbe;
  text-decoration: underline;
}
#anniversary .ss a {
  color: #fff;
  text-decoration: none;
}

#anniversary a:hover {
  text-decoration: none;
}

#anniversary .btn_wrap a {
  color: white;
  text-decoration: none;
}

#anniversary .bnr a img {
  border: 1px solid gray;
}

.center {
  text-align: center;
}

#anniversary h5 {
  font-size: x-large;
  font-family: "Sawarabi Mincho", sans-serif;
}

#anniversary h6 {
  font-size: large;
  /* font-family: "Sawarabi Mincho", sans-serif; */
}

#anniversary .kazari {
  display: block;
  width: fit-content;
  color: white;
  background-color: #2b7bda;
  border-left: 6px double #fff;
  margin: 0 0 0.5em 0px;
  padding: 0 1em 0;
}

#anniversary .tac {
  margin-bottom: 3em;
}

#anniversary .tac1 {
  margin-bottom: 1em;
}

#anniversary h6 span {
  font-weight: bold;
  color: #004586;
}

.mv img {
  max-width: 100%;
}

#mv_comment p {
  font-size: large !important;
  color: white;
  font-family: "Sawarabi Mincho", sans-serif;
  ;
}

#anniversary nav {
  display: flex;
  list-style: none;
  width: 85%;
  margin: 0 auto;
  text-align: center;
}

#anniversary nav li {
  padding: 1em;
  width: 20%;
  border-left: 1px solid;
  border-image: linear-gradient(to bottom, #ffffff00, #9ce2e3, #9ce2e3, #ffffff00) 1;
}

#anniversary nav li:last-child {
  border-right: 1px solid;
}

#anniversary nav li a {
  color: #000;
  text-decoration: none;
}

#anniversary nav li a:hover {
  color: #00bcbe;
}
#anniversary #nav3 h5{
  border-bottom: 1px rgb(22, 122, 198) solid;
}
#anniversary #nav3 h5::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../images/kira.png);
  background-position: center;
  background-size: contain;
  transform: scale(-1, 1);
  margin-right: 10px;
}

#anniversary #nav3 h5::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../images/kira.png);
  background-position: center;
  background-size: contain;
  margin-left: 10px;
}

#anniversary .anime div.anime_list {
  display: flex;
}

#anniversary .anime div.bnr {
  width: 40%;
}

#anniversary .anime p.discripstion {
  width: 60%;
  padding: 0 0 0 1em;
}






/*ＳＱＥＸノベル1st anniversary記念企画 TOPページ*/
#anniversary.top h2.content_inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  text-align: center;
}

#anniversary.top h2.content_inner.teaser {
  padding: 0 0 7em 0;
}

#anniversary.top h2.content_inner img {
  vertical-align: bottom;
}

#anniversary .content_block {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

#anniversary .bg_blueImg {
  width: 100%;
}

#anniversary .bg_blueImg p {
  padding: 4em 0;
  text-align: center;
}

#anniversary .bg_blueImg .content_block {
  padding-bottom: 0;
}

#anniversary.top .ttl_wrap h3 {
  font-size: 6rem;
  line-height: 1;
  padding: 5rem 0 2rem 0;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-family: "Sawarabi Mincho", sans-serif;
  position: relative;
  transform: rotate(0.03deg);
  background-color: transparent;
  background-image: none;
  color: #000;
}

#anniversary .top.contentWrap {
  width: 100%;
  background: #fff;
  padding: 3.3% 2.5% 3.3% 2.5%;
  margin: 0 0 4em 0;
  border: 1px solid #034484;
}

#anniversary .ttl_wrap .day12 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#anniversary .ttl_wrap p.center {
  text-align: center;
  font-size: 130%;
  font-weight: bold;
  margin-bottom: 1em;
}

#anniversary .ttl_wrap .day12 p.img {
  width: 15%;
}

#anniversary .ttl_wrap .day12 p.text {
  width: 82%;
  font-size: 120%;
  padding-top: 2em;
}

#anniversary .ttl_wrap .day span {
  color: #00bcbe;
  font-weight: bold;
}

#anniversary .ttl_wrap p.novel {
  width: 58%;
  margin: 0 auto;
}

#anniversary .ttl_wrap p.novel.space {
  margin-bottom: 2em;
}

#anniversary .ttl_wrap .day ul {
  margin-bottom: 4em;
}

#anniversary .ttl_wrap .day ul.last {
  margin-bottom: 0;
}

#anniversary .btn_wrap.tac {
  margin-bottom: 2em;
}

#anniversary p.comingsoon {
  text-align: center;
  font-size: 250%;
  font-weight: bold;
  color: #a3edee;
  padding: 1em 0;
}

.bnr.w80 {
  width: 80%;
  margin: 0 auto 20px;
}

#anniversary .ttl_wrap .twitter span {
  color: #00bcbe;
  font-weight: bold;
}

/*1st anniversary記念動画*/
#anniversary .ttl_wrap .movie span {
  color: #00bcbe;
  font-weight: bold;
  font-size: 1.3em;
}

#anniversary .youtube {
  text-align: center;
  margin: 1% auto 6%;
}

#anniversary .border {
  padding-top: 6%;
  border-top: 2px dotted #00c7db;
}

#anniversary .youtube.noneb {
  text-align: center;
  margin: 1% auto 6%;
  padding-bottom: 0;
  border-bottom: none;
}

#anniversary .ttl_wrap .movie span br.pc-br {
  display: block;
}

#anniversary .movie .pc {
  display: block;
}

#anniversary .movie .sp {
  display: none;
}


/*ＳＱＥＸノベル1st anniversary記念企画 対談ページ*/
#anniversary p {
  line-height: 1.8;
  font-size: 110%;
}

#anniversary li p {
  line-height: 2.5;
}

#anniversary .contentWrap {
  width: 100%;
  background: #fff;
  padding: 3.3% 2.5% 5% 2.5%;
  margin: 1em 0 0 0;
  border: 1px solid #034484;
}

#anniversary .contentWrap img {
  width: 100%;
}

#anniversary .content_block {
  padding-bottom: 5em;
}

#anniversary .main {
  margin-bottom: 1em;
}

#anniversary .textBox.last {
  margin-bottom: 0;
}

#anniversary .textBox {
  margin-bottom: 2em;
}

#anniversary .space {
  margin-bottom: 2em;
}

#anniversary .textBox.space2 {
  margin-bottom: 4em;
}

#anniversary .textBox ul {
  margin-bottom: 3em;
}

#anniversary .textBox ul li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
}

#anniversary .textBox ul li .icon {
  width: 10%;
}

#anniversary .textBox ul li .txt {
  width: 87%;
  padding-top: 1.7em;
}

#anniversary .textBox .hensyu {
  width: 100%;
  padding: 2% 3%;
  background-color: #e8eff7;
  border-radius: 7px;
}

#anniversary .author {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
}

#anniversary .author img {
  text-align: center;
}

#anniversary .author .author1,
#anniversary .author .author2 {
  width: 49%;
  background: #fff;
  padding: 3.3% 2.5% 3.3% 2.5%;
  margin: 5em 0 0 0;
  border: 1px solid #034484;
}

#anniversary .author .space3 {
  margin-bottom: 1em;
}

#anniversary .author .kyo {
  background-color: #e8eff7;
  padding: 2% 3%;
  text-align: center;
  margin-bottom: 1.5em;
  font-weight: bold;
  border-radius: 7px;
}

#anniversary .author ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px dotted #0f408d;
}

#anniversary .author ul.last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

#anniversary .author ul li {
  width: 48%;
}

#anniversary .author ul li img {
  width: 100%;
  border: 1px solid #003a8a;
}

#anniversary .author ul li span {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 110%;
}

#anniversary .author ul li p {
  line-height: 1.2;
}

#anniversary .author .btn {
  font-size: 1.2em;
}

/*限定ショートストーリー　リスト*/
#anniversary .ss_list p {
  line-height: 1.5;
}

ul.ss_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: #fff;
  margin: 1em 0 2em 0;
}

ul.ss_list.last {
  margin: 1em 0 0 0;
}

ul.ss_list li {
  width: 22.75%;
  margin: 0 3% 3% 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

ul.ss_list li.none {
  background-color: transparent;
}

ul.ss_list li:nth-child(4n) {
  margin-right: 0;
}

ul.ss_list li img {
  width: 100%;
  border: 1px solid #ebecee;
}

ul.ss_list li .link {
  font-size: 1.1em;
  padding: 0.6em 0;
}

ul.ss_list li .link a.btn {
  display: inline-block;
  width: 100%;
  background: url(/sqexnovel/common/images/arrow.png) no-repeat #00bcbe;
  background-position: 96%;
  color: #fff;
  text-align: center;
  font-weight: bold;
  transition: opacity 0.3s;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1.1em;
  line-height: 1.3;
}

ul.ss_list .series_ttl {
  font-weight: bold;
  flex-grow: 1;
}

#anniversary .zikai {
  font-weight: bold;
  font-size: 200%;
  text-align: center;
  font-family: "Sawarabi Mincho", sans-serif;
  color: #034484;
  flex-grow: 1;
}

@media screen and (max-width: 1024px) {
  #anniversary .top.contentWrap {
    width: 95%;
    background: #fff;
    padding: 3.3% 2.5% 3.3% 2.5%;
    margin: 0 auto 4em auto;
    border: 1px solid #034484;
  }

  #anniversary .bg_blueImg p {
    width: 95%;
    margin: 0 auto;
  }

  #anniversary.taidan .contentWrap,
  #anniversary.ss .contentWrap {
    width: 95%;
    background: #fff;
    padding: 3.3% 2.5% 5% 2.5%;
    margin: 1em auto 0 auto;
    border: 1px solid #034484;
  }

  #anniversary .author {
    width: 95%;
    margin: 0 auto 1em auto;
  }
}

@media screen and (max-width: 640px) {

  /*タイトル*/
  .ttl_wrap h4 {
    font-size: 2.5rem !important;
    padding: 2.5% 2.5% 2.5% 0;
    margin: 0 0 4%;
  }

  .ttl_wrap h3 {
    font-size: 3rem !important;
  }

  .ttl_wrap h4 span {
    padding: 0.35rem 0 0.35rem 0.6em;
    font-size: 0.8em;
    display: block;
    line-height: 1.3;
  }

  .item_list li {
    flex-basis: 96% !important;
    max-width: 96% !important;
    width: 96% !important;
  }

  #anniversary.top .content_block {
    padding-bottom: 1em;
  }

  #anniversary.top h2.content_inner {
    border-top: 1px solid #02478a;
  }

  #anniversary .contentWrap .bnr {
    margin: 0 2%;
  }

  #anniversary .bg_blueImg p {
    padding: 3em 1em;
  }

  #anniversary .ttl_wrap .day {
    margin: 0 2%;
  }

  #anniversary .ttl_wrap .day.title {
    margin: 0 2%;
  }

  #anniversary .ttl_wrap .day12 p.text {
    padding-top: 0 !important;
  }

  #anniversary .ttl_wrap .day.movie {
    margin: 0 2%;
  }

  #anniversary .ttl_wrap .movie span {
    font-size: 1.1em !important;
  }

  #anniversary .ttl_wrap .movie span br.pc-br {
    display: none;
  }

  #anniversary .ttl_wrap .day.twitter {
    margin: 0 2%;
  }

  #anniversary .ttl_wrap .day12 {
    margin-bottom: 1em;
  }

  #anniversary .ttl_wrap p.novel {
    width: 80%;
    margin: 0 auto;
  }

  #anniversary .movie .pc {
    display: none;
  }

  #anniversary .movie .sp {
    display: block;
    position: relative;
    width: 100%;
    /* padding-top: 56.25%; */
  }



  /* #anniversary .movie .sp iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  #anniversary .youtube {
    margin: 1% auto 8%;
  } */


  /* 5周年追記 */
  #anniversary nav{
    flex-wrap: wrap;
  }
  
  #anniversary nav li{
    width: 33%;
    
  /* border-left: 1px solid;
  border-image: linear-gradient(to bottom, #ffffff00, #9ce2e3, #9ce2e3, #ffffff00) 1; */
  }
  #anniversary nav li:nth-child(3){
    
  border-right: 1px solid;

  }
  #anniversary .anime div.anime_list {
    display: flex;
    flex-wrap: wrap;

  }

  #anniversary .anime div.bnr {
    width: 100%;
  }

  #anniversary .anime p.discripstion {
    width: 100%;
    padding: 0 0 0 0em;
  }


  /*ＳＱＥＸノベル1st anniversary記念企画 対談ページ*/
  #anniversary .textBox ul li .txt {
    padding-top: 0 !important;
  }

  #anniversary li p {
    line-height: 2 !important;
  }

  #anniversary .author .author1,
  #anniversary .author .author2 {
    width: 100% !important;
  }

  #anniversary .author {
    display: block !important;
  }

  #anniversary.taidan .content.content_inner {
    padding: 0;
  }

  /*限定ショートストーリー　SS本文*/
  #anniversary.ss ul.ss_list li {
    width: 48%;
    margin: 0 4% 4% 0;
  }

  #anniversary.ss ul.ss_list li:nth-child(2n) {
    margin: 0 0 4% 0;
  }

  #anniversary.ss .content.content_inner {
    padding: 0;
  }
}