@charset "utf-8";
/* CSS Document  | Seikangakuryo Anniversary */
/* Format :Desktop First Index */

/*PC = 835px以上*/
/*TB = 416-834px*/
/*SP = 320-415px*/

/* =================== ALL =================== */
/*ALL media*/

.anv10th-logo_fadein {
	background: #061526 url(/sd/special/seikangakuryo/image/anv10th-bg.jpg) center/cover no-repeat;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
  /*top: var(--height-hdr);
  min-height: calc(100vh - var(--height-hdr));*/
	width: 100%;
	z-index: 999;
  text-align: center;
  pointer-events: auto;
}
.anv10th-logo_fadein p {
  position: absolute; /* fixedでも動くけど absoluteの方が素直 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: min(50%,33rem);
  margin-inline: auto;
  text-align: center;

  /* ▼追加：純フェード */
  opacity: 0;
  transition: opacity 1s ease-out;
  display: block; /* ←重要：display:noneをやめる */
}
.anv10th-logo_fadein p.is-in { opacity: 1; }
.anv10th-logo_fadein p.is-out{ opacity: 0; }

.anv10th-logo_fadein[style*="display: none"] { pointer-events: none; }


/* ===== キービジュアル ===== */
.anv10th-poster {
	position: relative;
	width: min(100%, 192rem);
	margin: 0 auto;
	overflow: hidden;
	background: #061526 url(/sd/special/seikangakuryo/image/anv10th-bg.jpg) center/cover no-repeat;
	box-shadow: 0 18px 50px rgba(0,0,0,.35);
	color: #fff;
  padding-bottom: calc(var(--rs) * 5.0);
}
/* 文字の読みやすさ用に薄い暗幕（不要なら削除） */
.anv10th-poster::before{
  content:"";
  position:absolute; inset:0;
  /*background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45));*/
  pointer-events:none;
}
.anv10th-poster-inner {
  position: relative;
  z-index: 10;
	/*aspect-ratio: 4 / 3;*/
	margin: 0 auto;
  width: min(100%, 162rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--height-hdr));
}

/* 前景は背景より上 */
.anv10th-poster-inner > *{ position:absolute; z-index:1; }
.anv10th-poster__title, .anv10th-poster__body{ z-index: 5; }

/* ===== Title / Body ===== */
.anv10th-poster__title {
  /*left: 50%;
  top: clamp(18px, 3.2%, 32px);
  transform: translateX(-50%);*/
	width: min(90%, 80rem);
	text-align: center;
	text-shadow: 0 2px 14px rgba(0,0,0,.6);
	margin: 0 auto calc(var(--rs) * 3.0);
}
.anv10th-logo {
  display: block;
  width: min(40%,34rem);
  margin: 0 auto;
}
.anv10th-cap {
  filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.6)) drop-shadow(0 0 0.5rem rgba(0,0,0,0.6)) drop-shadow(0 0 0.5rem rgba(0,0,0,0.6));
  width: min(100%,72rem);
  text-align: center;
  margin-inline: auto;
}

.anv10th-poster__body {
	left: 50%;
	top: 1.5%;
	transform: translateX(-50%);
	width: min(100%, 80rem);
	letter-spacing: .05em;
	text-shadow: 0 2px 14px rgba(0,0,0,.65);
	position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.anv10th-poster__body p {
  line-height: 1.8;
  padding: 0.75em 0;
  text-shadow: 0 0 1rem rgba(0,0,0,0.6) , 0 0 .4rem rgba(0,0,0,0.6) ,0 0 1rem rgba(0,0,0,0.6) , 0 0 .4rem rgba(0,0,0,0.6) , 0 0.1rem 0.4rem rgba(0,0,0,0.6);
  filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.6));
}

/* ===== 文章配置 ===== */
.anv10th-readbox01 {
  padding: 0 1.5em;
  color: #E1E2E5;
  font-size: calc(var(--fs) * 1.7);
}
.anv10th-readbox02 {
  margin-top: 1rem;
  padding: 1rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  font-size: calc(var(--fs) * 1.6);
}
.anv10th-read05 {
  margin: 0 calc(50% - 50vw) calc(var(--rs) * 1.0);
  width: 100vw;
}
.anv10th-read05 img {
  width: min(90%,58rem);
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 0.3rem rgba(0,0,0,0.6)) drop-shadow(0 0 0.6rem rgba(0,0,0,0.4)) drop-shadow(0 0 0.8rem rgba(0,0,0,0.2));
}

/* ===== 画像配置 ===== */
.anv10th-layer {
  margin:0;
  position:absolute;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  text-align: center;
}
.anv10th-layer.img01 {
	z-index: 1;
	top: 2%;
	right: 10%;
	width: min(30%,47rem);
}
.anv10th-layer.img02 {
	z-index: 2;
	bottom: 5%;
	right: 0%;
	width: min(30%,53rem);
}
.anv10th-layer.img03 {
	z-index: 3;
	bottom: 6%;
	left: 2%;
	width: min(30%,58rem);
}
.anv10th-layer.img04 {
	z-index: 4;
	top: -5%;
	left: 3%;
	width: min(30%,45rem);
}
.anv10th-layer.img05 {
	z-index: 5;
	top: 3%;
	right: 7%;
	width: min(13%,13rem);
}
.anv10th-layer.img06 {
	z-index: 6;
	top: 36%;
	right: 1%;
	width: min(13%,13rem);
	transform: translate(0%,-50%);
}
.anv10th-layer.img07 {
	z-index: 7;
	top: 54%;
  right: 3%;
  width: min(15%,17rem);
  transform: translate(0%,-50%);
}
.anv10th-layer.img08 {
	z-index: 8;
	top: 43%;
	left: 0;
	width: min(18%,23rem);
	transform: translate(0%,-50%);
}

/* ===== アニメーション設定 ===== */
.anv10th-logo,
.anv10th-cap,
.anv10th-poster-inner > figure,
.anv10th-poster__body p {
  opacity: 0;
}

/* is-show が付いた瞬間にだけアニメを走らせる */
.anv10th-poster.is-show .anv10th-logo,
.anv10th-poster.is-show .anv10th-cap,
.anv10th-poster.is-show .anv10th-poster-inner > figure,
.anv10th-poster.is-show .anv10th-poster__body p {
  animation-name: top-anime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

/* アニメーション定義 */
@keyframes top-anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*ロゴとタイトル*/
.anv10th-logo {animation-delay: 0.5s; }
.anv10th-cap  {animation-delay: 1.0s; animation-duration: 6s;}
/*発売日順表示*/
.anv10th-layer.img04 {animation-delay: 1.2s;}
.anv10th-layer.img06 {animation-delay: 1.4s;}
.anv10th-layer.img03 {animation-delay: 1.6s;}
.anv10th-layer.img05 {animation-delay: 1.8s;}
.anv10th-layer.img01 {animation-delay: 2.1s;}
.anv10th-layer.img07 {animation-delay: 2.4s;}
.anv10th-layer.img02 {animation-delay: 2.7s;}
.anv10th-layer.img08 {animation-delay: 3.0s;}
/*テキスト表示順*/
.anv10th-read01 {animation-delay: 3.2s;}
.anv10th-read02 {animation-delay: 4.2s; animation-duration: 5s;}
.anv10th-read03 {animation-delay: 4.5s; animation-duration: 6s;}
.anv10th-read04 {animation-delay: 4.8s; animation-duration: 7s;}
.anv10th-read05 {animation-delay: 5.0s; animation-duration: 8s;}


/* ==================== ALL END ==================== */
/**/
/* =================== PC START =================== */
@media screen and (max-width: 1200px) {
  .anv10th-poster__body{ padding-top: 4%; }
  .anv10th-readbox01 {width: 70%;}
  .anv10th-readbox02 {}
  .anv10th-layer.img01 {width: 30%; right: 7%;}
  .anv10th-layer.img02 {width: 33%; right: -6%;}
  .anv10th-layer.img03 {width: 35%; left: -3%; bottom: 3%;}
  .anv10th-layer.img04 {width: 31%; left: -1%; top: -1%;}
  .anv10th-layer.img05 {width: 10%; right: 1%;}
  .anv10th-layer.img06 {width: 11%; right: 9%; top: 38%;}
  .anv10th-layer.img07 {width: 13%; right: 0; top: 58%;}
  .anv10th-layer.img08 {width: 16%;top: 35%;}
  
}
/* =================== PC END =================== */
/**/
/* =================== TB START =================== */
@media screen and (max-width: 835px) {
  .anv10th-poster__body {
    top: 0%;
    padding-top: 10%;
  }
  .anv10th-logo {width: min(50%,28rem);}
  .anv10th-cap { margin-top: 35%; }
  .anv10th-readbox01 {width: 100%;}
  .anv10th-layer.img01 {
    right: 0%;
    top: 3%;
    width: 35%;
  }
  .anv10th-layer.img02 {
    right: -8%;
    width: 40%;
    bottom: auto;
    top: 22%;
  }
  .anv10th-layer.img03 {
    bottom: auto;
    width: 39%;
    top: 19%;
    left: -2%;
  }
  .anv10th-layer.img04 {
    top: -2%;
    left: -5%;
    width: 40%;
  }
  .anv10th-layer.img05 {
    right: auto;
    left: 29%;
    top: 33%;
    width: 11%;
  }
  .anv10th-layer.img06 {
    top: 29%;
    right: 48%;
    transform: inherit;
    width: 11%;
  }
  .anv10th-layer.img07 {
    right: -4%;
    width: 17%;
    top: 24%;
  }
  .anv10th-layer.img08 {
    top: 38%;
    left: auto;
    right: 25%;
    width: 22%;
  }
  
}
/* =================== TB END =================== */
/**/
/* =================== SP START =================== */
@media screen and (max-width: 415px) {
  .anv10th-poster__body {
    margin-top: auto;
  }
  .anv10th-poster__body p {
    font-size: calc(100vw/30);
  }
  

}
/* =================== SP END =================== */