@charset "UTF-8";
html {
    background-color: #ffdbdb;
}
.l-footer, .p-recommended,
.l-root.is-episode {
	background: #ffdbdb url(../img/special/episode/2023/bg.svg) repeat;
	background-size: 135px auto;
}
.p-episode {
	font-size: 1.4rem;
	line-height: 1.75;
	color: #231815;
}
.is-episode .p-share {
    background-color: #962e2f;
}
@media screen and (max-width: 767px) {
.l-footer, .p-recommended,
.l-root.is-episode {
	background-size: 75px auto;
}
}
/*-------------------------------------------- */
/* kv
---------------------------------------------- */
.episode-kv {
	padding-top: 60px;
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}
.episode-kv-heading {
	max-width: 802px;
	width: 50.125vw;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
.episode-kv-heading > img {
	max-width: 802px;
	width: 50.125vw;
}
.episode-kv-period {
	width: 96%;
	max-width: 786px;
	margin: 50px auto 0;
}
.episode-kv-lead {
	text-align: center;
	font-size: 2rem;
	margin-top: 40px;
}
.episode-kv-lead span {
	background-color: #fff;
	display: inline-block;
	padding: 2px 1em;
	margin-top: 15px;
}
.episode-kv .nami {
	position: absolute;
}
.episode-kv .nami01 {
    top: 2%;
    left: 10%;
    max-width: 337px;
    width: 21.063vw;
}
.episode-kv .nami02 {
    top: 33%;
    left: 11%;
	max-width: 235px;
	width: 14.688vw;
}
.episode-kv .nami03 {
    max-width: 318px;
    width: 18.688vw;
    top: 3%;
    right: 15%;
}
.episode-kv .nami04 {
    max-width: 264px;
    width: 16.5vw;
    top: 25%;
    right: 12%;
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
.episode-kv-heading {
    width: 82%;
}
.episode-kv-heading > img {
	width: 100%;
}
.episode-kv-lead {
	font-size: 1.15rem;
	margin-top: 10px;
}
.episode-kv-lead span {
	padding: 2px .5em;
	margin-top: 10px;
}

.episode-kv .nami01 {
    top: 1%;
    left: 1%;
    width: 37.333vw;
}
.episode-kv .nami02 {
    top: 42%;
    left: 2%;
    width: 29.3vw;
}
.episode-kv .nami03 {
    width: 35vw;
    top: 1%;
    right: 4%;
}
.episode-kv .nami04 {
    width: 29vw;
    top: 37%;
    right: 2%;
}

}
@media screen and (max-width: 375px) {
.episode-kv-lead {
	font-size: 1rem;
}
.episode-block-heading {
    max-width: 190px;
}
}


/*-------------------------------------------- */
/* content
---------------------------------------------- */
.episode-content {
	margin: 0 auto 60px;
	width: 96%;
	max-width: 1600px;
	position: relative;
}
.episode-block {
	border: 6px solid;
	background: #fff;
	max-width: 827px;
	margin: 0 auto;
	text-align: center;
	margin: 120px auto 0;
	padding: 80px 0 50px;
	border-radius: 30px;
	box-sizing: border-box;
	z-index: 1;
	position: relative;
}
.episode-block-heading {
	margin: -150px auto 0;
	max-width: 356px;
}
.episode-lists {
	font-size: 14px;
	text-align: left;
	margin: 30px 4% 0;
}
.episode-block01 {
	border-color: #ffe300;
}
.episode-block01-txt {
	font-size: 20px;
	margin: 30px auto 0;
}
.episode-block01-txt span {
	font-size: 12px;
}
.episode-block01-box {
	background: #ffff80;
	border-radius: 30px;
	/*max-width: 736px;*/
	margin: 60px 4% 0;
	padding: 60px 5% 40px;
	position: relative;
}
.episode-block01-box-ttl {
	border-radius: 50px;
	color: #fff;
	font-size: 18px;
	background: #ffb000;
	display: table;
	margin: -80px auto 0;
	padding: 5px 5em;
}
.episode-block01-box-txt {
	font-size: 17px;
	text-align: left;
	margin-top: 30px;
}
.episode-block01-box-ico {
	position: absolute;
	width: 109px;
	bottom: 5%;
	right: 4%;
}

.episode-block02 {
	border-color: #1d2779;
}
.episode-block02-txt {
	width: 96%;
	margin: 0 auto;
}

.episode-block03 {
	border-color: #ff8080;
}
.episode-block03-txt {
	font-size: 28px;
	color: #1d2779;
	font-weight: bold;
	margin-top: 30px;
}
.episode-block01-stafftxt {
	font-size: 15px;
	margin: 30px 50px;
	text-align: left;
	border-radius: 30px;
	color: #000;
	background: #fff0bf;
	padding: 30px 40px;
}

@media screen and (max-width: 767px) {
.episode-content {
	margin-bottom: 40px
}
.episode-block {
	border-width: 5px;
	width: 100%;
	margin: 80px auto 0;
	padding: 40px 0 40px;
}
.episode-block-heading {
	margin: -80px auto 0;
	max-width: 210px;
}
.episode-lists {
	font-size: 10px;
	margin: 20px 4% 0;
}

.episode-block01-txt {
	font-size: 14px;
	margin: 20px auto 0;
}
.episode-block01-txt span {
	font-size: 10px;
}
.episode-block01-box {
	margin: 40px 4% 0;
	padding: 60px 5% 30px;
}
.episode-block01-box-ttl {
	font-size: 15px;
	margin: -80px auto 0;
	padding: 5px 4em;
}
.episode-block01-box-txt {
	font-size: 11px;
	margin-top: 20px;
}
.episode-block01-box-ico {
	width: 55px;
	bottom: 16%;
}
.episode-block03-txt {
    font-size: 18px;
}
.episode-block01-stafftxt {
	font-size: 11px;
	margin: 20px 30px 0;
	text-align: left;
	border-radius: 30px;
	color: #000;
	background: #fff0bf;
	padding: 20px 30px;
}
}
@media screen and (min-width: 768px) {
/*.episode-lists-btn_on a:hover {
	cursor: pointer;
	opacity: .6;
}*/
}
@media screen and (max-width: 375px) {
.episode-block01-box-txt {
	font-size: 11px;
	margin-top: 20px;
}
}
/*-------------------------------------------- */
/* from
---------------------------------------------- */
.episode-from-line {
	background: #1d2779;
	font-size: 3.3rem;
	color: #fff;
	text-align: center;
	font-weight: bold;
	line-height: 3;
}
.p-episode .p-87day {
	padding-bottom: 0;
}
.p-episode .p-87day .p-hero__detail {
    padding: 65px 0 80px;
}
.p-87day .p-hero__hdg--sub {
    font-size: 1.8rem;
}
.p-episode .p-87day .episode-from-btn {
	margin: 80px auto 0;
	max-width: 541px;
}
@media screen and (max-width: 767px) {
.episode-from-line {
	font-size: 1.8rem;
	line-height: 3;
}
.p-episode .p-87day .p-hero__detail {
    padding: 40px 0 40px;
}
.p-87day .p-hero__hdg--sub {
    font-size: 26px;
    font-size: 3.46667vw;
}
.p-episode .p-87day .episode-from-btn {
	margin: 40px auto 0;
	max-width: 280px;
}
}

/*-------------------------------------------- */
/* Animation
---------------------------------------------- */
.nami01,.nami02,.nami05 {
    transform: translateX(-60px);
    transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition-delay: 1.0s;
}
.nami03,.nami04,.nami06 {
    transform: translateX(60px);
    transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition-delay: 2.0s;
}
/*.episode-kv-heading_hana {
    transform: rotate(30deg);
    transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}*/
.episode-kv-img {
    transform: scale(0.5);
    transition: opacity 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.ico {
	position: absolute;
	z-index: 0;
}
.ico01 {
	max-width: 237px;
	width: 14.813vw;
	top: 5%;
	left: -5%;
	animation:film1 3s ease-in infinite alternate both;
}
@keyframes film1 {
  0% , 100%{
      transform: rotate(0deg);
  }
  30%{
      transform: rotate(0deg);
  }
  40%{
      transform: rotate(-20deg);
  }
  50%{
  	transform: rotate(0deg);
  }
}
.ico02 {
	max-width: 245px;
	width: 15.313vw;
	top: 32%;
	left: 4%;
	animation:film2 3s ease-in infinite alternate both;
}
@keyframes film2 {
  0% , 100%{
      transform: rotate(0deg);
  }
  50%{
      transform: rotate(0deg);
  }
  60%{
      transform: rotate(20deg);
  }
  70%{
  	transform: rotate(0deg);
  }
}
.ico03 {
	max-width: 254px;
	width: 15.875vw;
	top: 58%;
	left: -6%;
	animation:film3 3s ease-in infinite alternate both;
}
@keyframes film3 {
  0% , 100%{
      transform: rotate(0deg);
  }
  30%{
      transform: rotate(0deg);
  }
  40%{
      transform: rotate(-20deg);
  }
  50%{
  	transform: rotate(0deg);
  }
}
.ico04 {
	max-width: 245px;
	width: 15.313vw;
	top: 88%;
	left: 2%;
	animation:film4 3s ease-in infinite alternate both;
}
@keyframes film4 {
  0% , 100%{
      transform: rotate(0deg);
  }
  50%{
      transform: rotate(0deg);
  }
  60%{
      transform: rotate(20deg);
  }
  70%{
  	transform: rotate(0deg);
  }
}
.ico05 {
	max-width: 242px;
	width: 15.125vw;
	top: 16%;
	right: -6%;
	animation:film5 3s ease-in infinite alternate both;
}
@keyframes film5 {
  0% , 100%{
      transform: rotate(0deg);
  }
  60%{
      transform: rotate(0deg);
  }
  70%{
      transform: rotate(20deg);
  }
  80%{
  	transform: rotate(0deg);
  }
}
.ico06 {
	max-width: 237px;
	width: 14.813vw;
	top: 46%;
	right: 3%;
	animation:film6 3s ease-in infinite alternate both;
}
@keyframes film6 {
  0% , 100%{
      transform: rotate(0deg);
  }
  70%{
      transform: rotate(0deg);
  }
  80%{
      transform: rotate(-20deg);
  }
  90%{
  	transform: rotate(0deg);
  }
}
.ico07 {
	max-width: 242px;
	width: 15.125vw;
	top: 81%;
	right: -6%;
	animation:film7 3s ease-in infinite alternate both;
}
@keyframes film7 {
  0% , 100%{
      transform: rotate(0deg);
  }
  70%{
      transform: rotate(0deg);
  }
  80%{
      transform: rotate(-20deg);
  }
  90%{
  	transform: rotate(0deg);
  }
}

@media screen and (max-width: 767px) {
.ico {
	display: none;
}	
}




.motion_op {
	opacity:0;
	transition: all 1s;
}
.motion_Y10 {
	transform:translateY(10px);
	transition: all .5s;
}
.motion_Y30 {
	transform:translateY(30px);
	transition: all .5s;
}
.motion_X2 {
	transform:translateX(-20px);
}
.ico-m {
    transform: scale(0.5);
    transition: all .5s;
}
.is_motion {
	transform:translateX(0);
	transform:translateY(0);
	transform: rotate(0);
	transform: scale(1);
	opacity:1;
}