@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%;
	width: 100%;
	height: 290px;
	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;
}
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: 913px) and (max-width: 1279px) {
	    div.header:after {
        height: 220px;
    }
}
@media all and (min-width: 1900px) {
	    div.header:after {
        height: 430px;
    }
}
@media all and (max-width: 767px) {
div.header {
	padding-bottom: 88%;
}
div.header:after {
	height: 80px;
}
div.header header > h1 {
	margin-bottom:20px;
}
}

@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 .main1 {
    background-image: url("../img/kv_sp.jpg"); 
    height: 150%;
	padding-top:58%;
  }
}

.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;
}
div.info dl dt {
	font-size:100%;
}
div.info dl dd {
	font-size:112.5%;
}
div.info img {
	width: 90%;
}
}

/*	.info_before
============================== */
@media all and (max-width: 767px) {
div.info {
	transform: translateY(530%);
}
}
@media all and (max-width: 540px) {
div.info {
	transform: translateY(490%);
}
}
@media all and (max-width: 430px) {
div.info {
	transform: translateY(460%);
}
}
@media all and (max-width: 390px) {
div.info {
	transform: translateY(450%);
}
}
@media all and (max-width: 375px) {
div.info {
	transform: translateY(440%);
}
}
@media all and (max-width: 344px) {
div.info {
	transform: translateY(430%);
}
}
/*	.info_after
============================== */
/*
@media all and (max-width: 767px) {
div.info {
	transform: translateY(360%);
}
}
@media all and (max-width: 540px) {
div.info {
	transform: translateY(390%);
}
}
@media all and (max-width: 430px) {
div.info {
	transform: translateY(370%);
}
}
@media all and (max-width: 390px) {
div.info {
	transform: translateY(360%);
}
}
*/