@import url("wnew.css");
@import url("stream.css");
@import url("story.css");
@import url("topics.css");
/*	.header
============================== */
/* kv */
div.header {
  background: rgba(255, 255, 255, 0.7) url(bg.jpg) center / cover no-repeat;
  background-blend-mode: lighten;
  position: relative;
  z-index: 1;
}
div.header:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0%;
  top: 78%;
  width: 100%;
  height: auto;
  background: url(../img/bg_paper_01.png) no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
  background-size: 100% auto;
}
div.header header {
  text-align: left;
}
div.header header > h1 span {
  display: block;
}
div.header header > h1 > span {
  position: relative;
  height: 0;
  padding-top: -webkit-calc(9 / 16 * 100%);
  padding-top: calc(9 / 16 * 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/*div.header header > h1 > span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}*/
div.header header > h1 > span > span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}
@media all and (min-width: 768px) {
  div.header {
    padding: 30px 0 210px;
  }
  div.header header > h1 {
    /*margin-bottom:24px;*/
  }
  div.header header > h1 > span.lazy-done {
    box-shadow: 2px 3px 8px hsla(359, 98%, 25%, .3);
  }
  div.header header {
    max-width: 1080px;
    margin: 0 auto;
  }
}
/*
@media all and (min-width: 768px) and (max-width: 1279px) {
  div.header:after {
    height: 170px;
  }
}
@media all and (min-width: 1900px) {
  div.header:after {
    height: 430px;
  }
}
*/
@media all and (min-width: 1024px) {
  div.header:after {
    top: 73%;
  }
}
@media all and (min-width: 1280px) {
  div.header:after {
    top: 68%;
  }
}
@media all and (min-width: 1500px) {
  div.header:after {
    top: 63%;
  }
}
@media all and (min-width: 1800px) {
  div.header:after {
    top: 58%;
  }
}
@media all and (min-width: 2100px) {
  div.header:after {
    top: 53%;
  }
}
@media all and (min-width: 2500px) {
  div.header:after {
    top: 48%;
  }
}
@media all and (max-width: 767px) {
  div.header {
    /*	padding-bottom: 88%;*/
  }
  div.header:after {
    /*    height: 80px;*/
    top: 88%;
  }
  div.header header > h1 {
    margin-bottom: 20px;
  }
}
/*
@media all and (max-width: 343px) {
  div.header:after {
    height: 70px;
  }
}
*/
@media print {
  div.header, div.tbs-topics, div.sns {
    display: none !important;
  }
}
div.header header > h1 {
  position: relative;
}
/*div.header header > h1 .main1{background-image: url(../img/kv.jpg?0); background-size:cover; display: block; width:100%; height:0; padding-top:56.25%; position:absolute; top:0; left:0;
animation: fadein 2.5s ease 0s 1 normal;
-webkit-animation: fadein 2.5s ease 0s 1 normal;}
div.header header > h1 .kvLogo{background-image: url(../img/kv_logo.png); background-size:cover; display: block; width:100%; height:0; padding-top: 26.041%; position:absolute; bottom:0%; left:0%; opacity: 0;
-webkit-animation: 1.5s ease 0.5s 1 forwards;
  animation: 1.5s ease 0.5s 1 forwards;
z-index: 100;}
div.header header > h1 .kirari1{background-image: url(../img/kirari1.png); background-size:cover; display: block; width:9.007%; height:0; padding-top: 11.018%; position:absolute; top:65.131%; left:30.185%; opacity: 0;
-webkit-animation: 1.5s ease 0.5s 1 forwards;
  animation: 1.5s ease 0.5s 1 forwards;
z-index: 100;}
div.header header > h1 .kirari2{background-image: url(../img/kirari2.png); background-size:cover; display: block; width:5.925%; height:0; padding-top:4.305%; position:absolute; top:74.7%; left:34%; opacity: 0;
-webkit-animation: 1.5s ease 0.5s 1 forwards;
  animation: 1.5s ease 0.5s 1 forwards;
z-index: 100;}

.main1 img, .kvLogo img, .kirari1 img, .kirari2 img, .kirari3 img, .kirari4 img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}*/
#mainArea {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  margin: 0 auto;
  position: relative;
}
#mainArea .main1 {
  background-image: url(../img/kv.jpg?4);
  background-size: cover;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: absolute;
  top: 0;
  left: 0;
  animation: fadein1 2.5s ease 0s 1 normal;
  -webkit-animation: fadein1 2.5s ease 0s 1 normal;
}
#mainArea .kvLogo {
  background-image: url(../img/kv_logo.png);
  background-size: cover;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 26.041%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  opacity: 0;
  -webkit-animation: fadein1 1.5s ease 0.5s 1 forwards;
  animation: fadein1 1.5s ease 0.5s 1 forwards;
  z-index: 100;
}
#mainArea .kirari1 {
  background-image: url(../img/kirari1.png?0);
  background-size: cover;
  display: block;
  width: 9.007%;
  height: 0;
  padding-top: 11.018%;
  position: absolute;
  top: 65.131%;
  left: 30.2%;
  opacity: 0;
  -webkit-animation: fadein3 2s ease 0.5s 1 forwards;
  animation: fadein2 2s ease 0.5s 1 forwards;
  z-index: 100;
}
#mainArea .kirari2 {
  background-image: url(../img/kirari2.png?0);
  background-size: cover;
  display: block;
  width: 4.3055%;
  height: 0;
  padding-top: 4.768%;
  position: absolute;
  top: 74.177%;
  left: 34.9%;
  opacity: 0;
  -webkit-animation: fadein2 2.5s ease 1.0s 1 forwards;
  animation: fadein2 2.5s ease 1.0s 1 forwards;
  z-index: 100;
}
#mainArea .kirari3 {
  background-image: url(../img/kirari3.png?0);
  background-size: cover;
  display: block;
  width: 13.472%;
  height: 0;
  padding-top: 8.240%;
  position: absolute;
  top: 56.907%;
  left: 74.1%;
  opacity: 0;
  -webkit-animation: fadein3 2.5s ease 0.7s 1 forwards;
  animation: fadein2 2.5s ease 0.7s 1 forwards;
  z-index: 100;
}
#mainArea .kirari4 {
  background-image: url(../img/kirari4.png?0);
  background-size: cover;
  display: block;
  width: 6.296%;
  height: 0;
  padding-top: 6.944%;
  position: absolute;
  top: 63.486%;
  left: 80.1%;
  opacity: 0;
  -webkit-animation: fadein2 2s ease 1s 1 forwards;
  animation: fadein2 2s ease 1s 1 forwards;
  z-index: 100;
}
/* kv切り替え */
@media screen and (max-width: 767px) {
  #mainArea {
    height: 100%;
    padding-top: 0px
  }
  #mainArea .main1 {
    background-image: url("../img/kv_sp.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    padding-top: 144%; /* 694x1000px 比率 */
    position: relative;
  }
}
.main1 img, .kvLogo img, .kirari1 img, .kirari2 img, .kirari3 img, .kirari4 img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@keyframes fadein1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadein1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein2 {
  0% {
    opacity: 0;
    transform: rotate(30deg);
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: rotate(0);
  }
  100% {
    opacity: 0;
    transform: rotate(0);
  }
}
@-webkit-keyframes fadein2 {
  0% {
    opacity: 0;
    transform: rotate(30deg);
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: rotate(0);
  }
  100% {
    opacity: 0;
    transform: rotate(0);
  }
}
@keyframes fadein3 {
  0% {
    opacity: 0;
    transform: rotate(45deg);
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: rotate(0);
  }
  100% {
    opacity: 0;
    transform: rotate(0);
  }
}
@-webkit-keyframes fadein3 {
  0% {
    opacity: 0;
    transform: rotate(45deg);
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: rotate(0);
  }
  100% {
    opacity: 0;
    transform: rotate(0);
  }
}
@keyframes rotation1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*	sns
============================== */
div.sns {
  background-color: hsla(0, 0%, 100%, 0);
}
div.sns > aside section h3 {
  font-size: 300%;
  font-weight: normal;
  line-height: 1.25;
  margin-bottom: 0.2em;
}
div.sns > aside section h3:before {
  content: "";
  display: inline-block;
  background-image: url(/um/img/sns_logos_blk.svg);
  width: 64px;
  height: 64px;
  background-size: 192px 192px;
  margin-bottom: -0.3em;
}
div.sns > aside div.tw-outer section h3:before {
  background-position: left top;
}
div.sns > aside div.ig-outer section h3:before {
  background-position: center center;
}
.tw-inner {
  background-color: #fff;
}
@media all and (min-width: 768px) {
  div.sns {
    padding: 40px 0;
  }
  div.sns > aside {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 30px;
  }
  div.sns > aside .tw-outer, div.sns > aside .ig-outer {
    width: 50%;
  }
  div.sns aside .tw-outer {
    float: left;
  }
  div.sns aside .ig-outer {
    float: right;
  }
  div.sns aside .tw-outer > section {
    margin-right: 15px;
  }
  div.sns aside .ig-outer > section {
    margin-left: 15px;
  }
}
@media all and (max-width: 767px) {
  div.sns {
    padding: 30px 0;
  }
  div.sns > aside {
    padding-top: 20px;
  }
  div.sns > aside section h3:before {
    width: 64px;
    height: 64px;
    background-size: 192px 192px;
  }
  .tw-outer {
    margin: 0 30px 25px;
  }
  .ig-outer {
    margin: 0 20px;
  }
}
/*	instagram
============================== */
div.insta {}
div.insta ul li {
  float: left;
  width: 33.333333333333333%;
}
div.insta ul li span, div.insta ul li a, div.insta ul li a img {
  display: block;
}
div.insta ul li a, div.insta ul li a img {
  background-position: center center;
  background-repeat: no-repeat;
}
div.insta ul li a {
  background-size: cover;
  position: relative;
  height: 0;
  padding-top: 100%;
}
div.insta ul li a:hover img {
  background-color: hsla(216, 82%, 13%, 0.25);
}
div.insta ul li a img {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
div.insta ul li a img.icon-video {
  background-image: url(/um/img/play.png);
}
div.insta ul li:nth-child(3n-2) {
  clear: both;
  ;
}
@media all and (min-width: 768px) {
  div.insta ul li:nth-child(3n-2) > span {
    margin-right: 8px;
  }
  div.insta ul li:nth-child(3n-1) > span {
    margin-left: 4px;
    margin-right: 4px;
  }
  div.insta ul li:nth-child(3n) > span {
    margin-left: 8px;
  }
  div.insta ul li {
    margin-bottom: 12px;
  }
}
@media all and (max-width: 767px) {
  div.insta ul li:nth-child(3n-2) > span {
    margin-right: 6px;
  }
  div.insta ul li:nth-child(3n-1) > span {
    margin-left: 3px;
    margin-right: 3px;
  }
  div.insta ul li:nth-child(3n) > span {
    margin-left: 6px;
  }
  div.insta ul li {
    margin-bottom: 9px;
  }
}
div.bnr-insta {
  text-align: left;
}
div.bnr-insta a, div.bnr-insta a span {
  display: block;
}
div.bnr-insta a {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 0;
  padding-top: -webkit-calc(240 / 800 * 100%);
  padding-top: calc(240 / 800 * 100%);
}
div.bnr-insta a span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}
@media all and (min-width: 768px) {
  div.bnr-insta {
    width: 640px;
    margin: 40px auto 0;
  }
}
@media all and (max-width: 767px) {
  div.bnr-insta {
    margin-top: 30px;
    padding: 0 5.3vw;
  }
}
/*	.bnr
============================== */
div.bnr {
  text-align: left;
  background-color: #fff;
}
div.bnr aside ul li a, div.bnr aside ul li a span {
  display: block;
}
div.bnr aside ul li a {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 0;
  padding-top: -webkit-calc(240 / 800 * 100%);
  padding-top: calc(240 / 800 * 100%);
}
div.bnr aside ul li a span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}
div.bnr aside ul li a.lazy-done {
  -webkit-animation: fadeIn 800ms;
  animation: fadeIn 800ms;
  box-shadow: 2px 4px 10px hsla(0, 0%, 0%, .1);
}
@media all and (min-width: 768px) {
  div.bnr {
    padding: 80px 0;
  }
  div.bnr aside {
    max-width: 1080px;
    margin: 0 auto;
  }
  div.bnr aside ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
  div.bnr aside ul li {
    width: calc((100% - 30px)/2);
  }
  div.bnr aside ul li:nth-child(odd) {
    /*	margin-right:30px; */
  }
}
@media all and (max-width: 767px) {
  div.bnr {
    padding: 40px 0;
  }
  div.bnr aside ul {
    width: 82%;
    margin: 0 auto;
  }
  div.bnr aside ul li:not(:last-child) {
    margin-bottom: 20px;
  }
}
/*	.unit-yt
============================== */
div.unit-yt article {
  text-align: left;
}
div.unit-yt article header {
  text-align: center;
}
div.unit-yt article header h2 {
  color: #823282;
  line-height: 1.25;
}
div.unit-yt article header h2 span {
  display: inline-block;
  position: relative;
  background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.2, transparent), color-stop(0.2, hsla(0, 100%, 100%, 0.8)), to(hsla(0, 100%, 100%, 0.8)));
  background-image: linear-gradient(transparent 20%, hsla(0, 100%, 100%, 0.8) 20%);
}
@media all and (min-width: 768px) {
  div.unit-yt {
    padding: 40px 0;
  }
  div.unit-yt article div.inner {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
  }
  div.unit-yt article header {
    margin-bottom: 30px;
  }
  div.unit-yt article header h2 {
    font-size: 175%;
  }
}
@media all and (max-width: 767px) {
  div.unit-yt {
    padding: 25px 0;
  }
  div.unit-yt article header {
    margin-bottom: 20px;
  }
  div.unit-yt article header h2 {
    font-size: 4.5vw;
  }
  div.unit-yt article div.inner {
    padding: 0 20px;
  }
}
div.info {
  /*	max-width:1080px;*/
  width: 100%;
  margin: 0 auto;
}
div.info dl dt, div.info dl dd {
  line-height: 1.5;
}
div.info dl dt {
  margin-bottom: 0.25em;
}
div.info dl dd {
  color: #aa465a;
  font-weight: bold;
}
div.info img {
  width: 70%;
  margin: 0 auto;
  display: block;
}
@media all and (min-width: 992px) {
  div.info {
    margin: 20px 0 10px
  }
  div.info dl dt {
    font-size: 200%;
  }
  div.info dl dd {
    font-size: 225%;
  }
}
@media all and (max-width: 991.98px) {
  div.info {
    padding: 12px 0 16px;
  }
  div.info dl dt {
    font-size: 100%;
  }
  div.info dl dd {
    font-size: 112.5%;
  }
  div.info img {
    width: 80%;
  }
}
@media all and (max-width: 767px) {
  div.info {
    position: relative;
    text-align: center;
  }
  div.info img {
    width: 90%;
  }
}