@import url("stream.css");
@import url("top_character.css");
@import url("topics.css");

/*	.header
============================== */
/* kv */
div.header {
background: url(../img/sky.jpg) no-repeat center bottom; background-size:cover;
}
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;
}

div.header header p{margin:0 !important; padding:0 !important; line-height:150% !important;}
div.header header span.notice{position:relative; display:inline-block; border-radius:20px; margin:0 0 .5em 9em; background-color:#f19ec2; color:#fff; font-weight:600; padding:.5em .8em; box-shadow:5px 5px 14px rgba(123,152,167,0.5);}
div.header header span.notice:before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left:15%;
    bottom: -12px;
    border-top: 18px solid #f19ec2;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

.bn_movie{margin:0 auto .2em; width:800px; height:122px; position: relative; border-radius:6px; box-shadow:2px 2px 20px rgba(209,148,175,0.6);}
.bn_movie a{display:block; width:100%; height:100%; background: url(../img/top/bn_movie.png) repeat center center; background-size:cover; transition: 0.5s; border-radius:6px;}
.bn_movie a:hover{opacity:0.5;}
.outgo{text-align:center; font-size:75%;}

@media all and (min-width: 768px) {
div.header {
	padding:30px 0;
}
div.header header > h1 {
	margin-bottom:24px;
}
div.header header {
	max-width:1080px;
	margin:0 auto;
}
}
@media all and (max-width: 767px) {
div.header {
	padding-bottom:2.5%;
}
div.header header > h1 {
	margin-bottom:2.5%;
}

div.header header span.notice{border-radius:10vw; margin:0 0 1% 2%; padding:.5em 2%; box-shadow:5px 5px 10px rgba(123,152,167,0.5); font-size:3vw;}
div.header header span.notice:before{
    left:8%;
    bottom: -10px;
    border-top: 15px solid #f19ec2;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

.bn_movie{margin:0 auto .25%; width:96%; height:0; padding:14.693877551% 0 0; box-shadow:2px 2px 12px rgba(209,148,175,0.6); border-radius:1.5vw;}
.bn_movie a {position:absolute;left:0;top:0; width:100%; height:100%; border-radius:1.5vw;}
.outgo{font-size:.5rem;}
}

@media print {
div.header,
div.tbs-topics,
div.sns {
	display:none !important;
}
}

div.wrapper {
background-image:url(../img/top/bubble.svg),linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 20%,rgba(255,255,255,0) 100%);
background-repeat:no-repeat,no-repeat;
background-size:520px,auto;
background-position:calc(50% - 500px) bottom,0 0;
}

@media all and (max-width: 767px) {
div.wrapper {
background-size:60%,auto;
background-position:0 bottom,0 0;
}
}


/*	.story
============================== */
div.story,
div.story article,
div.story article div.inner {
	position:relative;
}
p.lines{font-size:110%; color:#666464; font-weight: 500;}
div.story article {
	text-align:left;
}
div.story article header {
	text-align:center;
}
div.story article header h2,
div.story article header p {
	line-height:1.25;
}
div.story article header h2 {
	color:#f19ec2;
	font-weight:700;
	line-height:1.25;
	text-shadow: 2px 2px 0px rgba(255,255,255,0.9), 0px 0px 16px rgba(255,255,255,0.9), 0px 0px 30px rgba(255,255,255,0.9);
}
div.story article header h2:first-letter {
	color:#a6d8f0;
}
div.story article header h2 span {
}
div.story article header p,div.story article span.ep,div.story article header span.region {
/*	margin-top:0.75em; */
font-family: "kaisei-opti", sans-serif;
font-weight: 700;
font-style: normal;
color:#666464;
text-shadow: 1px 1px 0px rgba(255,255,255,0.9), 0px 0px 16px rgba(255,255,255,0.9), 0px 0px 30px rgba(255,255,255,0.9);
}
div.story article span.ep{
	font-size:200%;
}
div.story article div.txt {
position:relative;
	background-color:hsla(0,0%,100%,0.6);
	box-shadow:10px 10px 30px rgba(209,148,175,0.5);
}
div.story article div.txt:before,div.story article div.txt:after { 
  content:'';
  width:80%;
  height:80%;
  position: absolute;
  display: inline-block;
}
div.story article div.txt:before {
  border-right: solid 4px #a6d8f0;
  border-bottom: solid 4px #a6d8f0;
  bottom:0;
  right:0;
}
div.story article div.txt:after {
  border-left: solid 4px #f19ec2;
  border-top: solid 4px #f19ec2;
  top:0;
  left:0;
}
div.story article header p > span {
	/* background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(0,52%,90%,0.75)), to(hsla(0,52%,90%,0.75)));
	background-image: linear-gradient(transparent 50%, hsla(0,52%,90%,0.75) 50%); */
	padding:0 0.5em;
	/* letter-spacing:0.1em;
	text-indent:0.1em;
	text-shadow:2px 3px 3px hsla(0,100%,100%,0.5); */
}

div.story article header p > span > b,
div.story article header p > span > span > b {
	font-size:125%;
	color:#f19ec2;
}
div.story article header span.region {
	font-size:90%;
	color:#666464;
	font-weight: 500;
	text-align:center;
	padding:.2em 0 0;
	display:inline-block;
}

div.story article div.txt p.lines {
position:relative;
  z-index:1;
}

@media all and (min-width: 768px) {
div.bg-contents {
}
div.story {
	padding:40px 0;
}
div.story article div.inner {
	width:80%;
	max-width:800px;
	margin:0 auto;
}
div.story article header {
	margin-bottom:30px;
}
div.story article header h2 {
	font-size:550%;
}
div.digest article header h3,
div.story article header h3 {
	font-size:150%;
}
div.story article header p {
	font-size:225%;
}
div.story article div.txt {
	padding:2em 30px 3em;
}
}
@media all and (max-width: 767px) {
div.bg-contents {
	background-size:75%;
}
div.story {
	padding:25px 0;
}
div.story article header {
	margin-bottom:20px;
}
div.story article header h2 {
	font-size:12vw;
}
div.digest article header h3,
div.story article header h3 {
	font-size:3.5vw;
}
div.story article div.inner {
	padding:0 20px;
}
div.story article header p {
	font-size:5.4vw;
}
div.story article header span.region {
	font-size:80%;
}
div.story article div.txt {
	padding:4% 4% 6%;
}
div.story article div.txt:before {
  border-right: solid 3px #a6d8f0;
  border-bottom: solid 3px #a6d8f0;
}
div.story article div.txt:after {
  border-left: solid 3px #f19ec2;
  border-top: solid 3px #f19ec2;
}

div.story article div.txt p.lines {
	font-size:100%;
}
div.story article div.txt p.lines {
	margin-bottom:6%;
}
}


/*	.btn
============================== */
div.story article div.txt div.btn {
	text-align: center;
	margin:0 auto;
	width:300px;
position:relative;
z-index:1;
}
div.story article div.txt div.btn a {
width:100%;
	background-color:#f19ec2;
	border:1px solid #fff;
	text-decoration: none;
	/**/
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	/**/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/**/
	box-shadow:10px 10px 20px rgba(209,148,175,0.5);
	padding:.4em 0;
}
div.story article div.txt div.btn a span {
	display: inline-block;
	text-align: center;
	letter-spacing:0.05em;
	text-indent:0.1em;
	color:#fff;
	line-height:1.25;
	margin-right:0.5em;
	font-weight:500;
	font-family: "kaisei-opti", sans-serif;
	font-style: normal;
}
div.story article div.txt div.btn a:hover {
}
div.story article div.txt div.btn a:after {
	content:"";
	display:inline-block;
	transform:rotate(45deg);
}
@media all and (min-width: 768px) {
div.story article div.txt div.btn:not(:last-child) {
	margin-bottom:30px;
}
div.story article div.txt div.btn a {
	font-size:175%;
	border-radius:30px;
}
div.story article div.txt div.btn a:after {
	width:12px;
	height:12px;
	border-right:3px solid #fff;
	border-top:3px solid #fff;
}
}
@media all and (max-width: 767px) {
div.story article div.txt div.btn {
	width:65%;
margin:0 auto 2.5%;
}
div.story article div.txt div.btn a {
	font-size:6vw;
	border-radius:20vw;
	padding:2.5% 0 3%;
}
div.story article div.txt div.btn a:after {
	width:2.5vw;
	height:2.5vw;
	border-right:3px solid #fff;
	border-top:3px solid #fff;
}
}


/*	.interview
============================== */
div.interview article {
	text-align:left;
}
div.interview article header {
	text-align:center;
}
div.interview article header h2 {
	line-height:1.25;
}
div.interview article header h2 {
	color:#000;
	-webkit-transform: rotate(4deg);
	transform: rotate(4deg);
	font-weight:normal;
	line-height:1;
}
div.interview 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(56,48%,93%,0.8)), to(hsla(56,48%,93%,0.8)));
	background-image: linear-gradient(transparent 20%, hsla(56,48%,93%,0.8) 20%);
}
@media all and (min-width: 768px) {
div.interview {
	padding:40px 0;
}
div.interview article div.inner {
	width:80%;
	max-width:800px;
	margin:0 auto;
}
div.interview article header {
	margin-bottom:30px;
}
div.interview article header h2 {
	font-size:550%;
}
}
@media all and (max-width: 767px) {
div.interview {
	padding:25px 0;
}
div.interview article header {
	margin-bottom:20px;
}
div.interview article header h2 {
	font-size:12vw;
}
div.interview article div.inner {
	padding:0 20px;
}
}


/*	figure
============================== */
div.ph-large figure > span, div.ph-large figure span img {
	display:block;
}
div.ph-large figure > span {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-size:cover;
}
div.ph-large figure span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}
div.ph-large figure span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media print {
div.ph-large figure {
	display:none;
}
}


div.story article div.mention {
	text-align:center;
	background-color:hsla(0,100%,100%,0.5);
	padding:0.5em 0;
}
div.story article div.mention > p {
	line-height:1.5;
	font-family: "Helvetica Neue","游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}
@media all and (min-width: 768px) {
div.story article div.mention {
	margin-bottom:40px;
}
div.story article div.mention > p {
	font-size:125%;
}
}
@media all and (max-width: 767px) {
div.story article div.mention {
	margin-bottom:20px;
}
div.story article div.mention > p {
	font-size:3vw;
}
}



/*	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:hsla(0,100%,100%,.5);
}
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;
}

div.bnr ul{display: flex; flex-flow: row wrap; margin:0 auto; justify-content: center; position:relative; z-index:1;}
div.bnr ul li{width:480px; height:140px;  margin:0 0 2em; background-color:rgba(255,255,255,0.75); box-shadow:10px 10px 30px rgba(209,148,175,0.5);}
div.bnr ul li a{display:block; width:100%; height:100%; background-repeat: no-repeat; background-position:center center; position: relative; background-size:cover; }
div.bnr ul li.bn_comic a {background-image:url(../img/top/bn_comic.png?1);
	outline : 1px solid #fff;
	outline-offset : -6px 
}
div.bnr ul li.bn_comic img{width:22%; position: absolute; left:5%; top:-5%;  transform:rotate(-5deg); }

@media all and (min-width: 768px) {
div.bnr {
	padding:50px 0 30px;
}
div.bnr aside {
	max-width:1080px;
	margin:0 auto;
}
div.bnr aside ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
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:5% 0;
}
div.bnr aside ul {
	width:82%;
	margin:0 auto;
}
div.bnr aside ul li:not(:last-child) {
	margin-bottom:20px;
}

div.bnr ul{width:100%; align-items: center;}
div.bnr ul li{width:100%; height:auto; margin:2% auto;}
div.bnr ul li a{height:0; padding:27.9569892473% 0 0;}
div.bnr ul li.bn_comic img{width:20%; left:7%; top:-3%;}
}