@charset "utf-8";

/* -------------------------------------------------
	first-view
------------------------------------------------- */

#first-view {
    padding: 29.3vw;
	position: relative;
}
#first-view h1 {
	width: calc(551 / 1400 * 100%);
	position: absolute;
	right: 14%;
	top: 7%;
}
#first-view .group1 {
	width: calc(678 / 1400 * 100%);
	position: absolute;
	left: 10%;
	bottom: 8%;
}
#first-view .group1 img {
	width: 100%;
}
#first-view .group1 p {
	padding: 0 0 0 1.2em;
	color: #fff;
	font-size: calc(22 / 1400 * 100vw);
	line-height: 1.8;
	font-family: "Yu Mincho Medium", "YuMincho Medium", "游明朝 Medium", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}
#first-view .credit {
	position: absolute;
	font-size: 14px;
	font-family: "Yu Mincho Medium", "YuMincho Medium", "游明朝 Medium", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	position: absolute;
	top: calc(100% + 35px);
	left: 35px;
}
#first-view .banner {
	width: calc(540 / 1400 * 100%);
	padding: 15px;
	display: block;
	box-shadow: 0 6px 4px rgba(0,0,0,0.2);
	box-sizing: border-box;
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translateY(28%);
	background: #fff;
}

@media print, screen and (min-width:768px) {
	#first-view {
		background: url(../images/mv.jpg) no-repeat center center / cover;
	}
	#first-view .banner img {
		transition: opacity 0.3s ease-out;
	}
	#first-view .banner:hover img {
		opacity: 0.7;
	}
}

@media screen and (max-width:767px) and (orientation:portrait) {
	#first-view {
		background: url(../images/mv_sp.jpg) no-repeat center center / cover;
    	height: 100vh;
		padding: 0;
	}
	#first-view h1 {
		width: calc(800 / 1130 * 100vw);
		right: 2%;
		top: 10%;
	}
	#first-view .group1 {
		width: 94%;
		left: 7%;
		top: 55%;
	}
	#first-view .group1 img {
		width: calc(740 / 1130 * 100vw);
	}
	#first-view .group1 p {
		padding-left: 0.5em;
		font-size: calc(38 / 1130 * 100vw);
		line-height: 2;
	}
	#first-view .credit {
		color: #fff;
		font-size: calc(26 / 1130 * 100vw);
		top: 82%;
		left: 9%;
	}
	#first-view .banner {
		width: calc(920 / 1130 * 100vw);
		padding: calc(30 / 1130 * 100vw);
		box-shadow: 0 6px 4px rgba(0,0,0,0.2);
		right: 50%;
		bottom: auto;
		top: 100%;
		transform: translate(50%,-50%);
	}
}

@media screen and (max-width:767px) and (orientation:landscape) { /* ほぼPCと同じ */
	#first-view {
		height: 100vh;
		position: relative;
		background: url(../images/mv_sp.jpg) no-repeat center 42% / cover;
	}
	#first-view h1 {
		width: calc(551 / 1400 * 100%);
		position: absolute;
		right: 18%;
		top: 7%;
	}
	#first-view .group1 {
		width: calc(678 / 1400 * 100%);
		position: absolute;
		left: 5%;
		bottom: 8%;
	}
	#first-view .group1 img {
		width: 100%;
	}
	#first-view .group1 p {
		padding: 0 0 0 1.2em;
		color: #fff;
		font-size: calc(22 / 1400 * 100vw);
		line-height: 1.8;
		font-family: "Yu Mincho Medium", "YuMincho Medium", "游明朝 Medium", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	}
	#first-view .credit {
		position: absolute;
		font-size: 1.5vw;
		font-family: "Yu Mincho Medium", "YuMincho Medium", "游明朝 Medium", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
		position: absolute;
		top: calc(100% + 2.2vw);
		left: 2.2vw;
	}
	#first-view .banner {
		width: calc(540 / 1400 * 100%);
		display: block;
		box-shadow: 0 6px 4px rgba(0,0,0,0.2);
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translateY(28%);
		background: #fff;
	}
}

/* -------------------------------------------------
	btn
------------------------------------------------- */

main .btn-index1 {
	width: 200px;
	height: 60px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Roboto_Condensed';
	font-weight: 700;
	color: #fff;
	font-size: 18px;
	background: #000;
	transition: opacity 0.3s ease-out;
}

@media print, screen and (min-width:768px) {
	main .btn-index1:hover {
		opacity: 0.7;
	}
}

@media screen and (max-width:767px) {
	main .btn-index1 {
		width: 65vw;
		height: 14vw;
		font-size: 3.8vw;
	}
}

/* -------------------------------------------------
	.h-index1
------------------------------------------------- */

.h-index1 {
	text-align: center;
}
.h-index1 .jp {
	font-size: 41px;
	display: block;
	letter-spacing: 0.2em;
	font-family: "Yu Mincho Medium", "YuMincho Medium", "游明朝 Medium", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}
.h-index1 .en {
	margin-top: 0.7em;
	font-size: 16px;
	display: block;
	font-weight: bold;
}

@media screen and (max-width:767px) {
	
	.h-index1 .jp {
		font-size: 4.4vw;
	}
	.h-index1 .en {
		font-size: 2.8vw;
	}
}

/* -------------------------------------------------
	h-index2
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	.h-index2 {
		text-align: left;
		position: absolute;
		top: 0;
	}
	.h-index2.left { left: 0; }
	.h-index2.right { right: 0; }
	
	.h-index2 .jp {
		font-size: 41px;
		display: block;
		letter-spacing: 0.2em;
		font-family: "Yu Mincho Medium", "YuMincho Medium", "游明朝 Medium", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
		white-space: nowrap;
		position: absolute;
		top: 0;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
	.h-index2.left .jp { left: 0; margin-left: 0.9em; }
	.h-index2.right .jp { right: 0; }
	
	.h-index2.double .jp {
		line-height: 1.3;
	}
	.h-index2.double.left .jp { left: 0; margin-left: 0.7em; }
		
	.h-index2 .en {
		font-size: 16px;
		display: block;
		font-weight: bold;
		position: absolute;
		top: 0;
		
		transform-origin: left top;
		margin-top: 0.2em;
	}
	.h-index2.left .en { left: 0; min-width: 260px; margin-left: 1em; transform: translateX(0%)rotate(90deg);}
	.h-index2.right .en { right: 70px; min-width: 260px; transform: translateX(100%)rotate(90deg);}
	
	.h-index2.double.right .en {
		margin-right: 4em;
	}
}

@media screen and (max-width:767px) {
	.h-index2 {
		text-align: center;
	}
	.h-index2 .jp {
		font-size: 4.4vw;
		display: block;
		letter-spacing: 0.2em;
		font-family: "Yu Mincho Medium", "YuMincho Medium", "游明朝 Medium", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	}
	.h-index2.double .jp {
		line-height: 1.5;
	}
	.h-index2 .en {
		margin-top: 0.7em;
		font-size: 2.8vw;
		display: block;
		font-weight: bold;
	}
}

/* -------------------------------------------------
	news
------------------------------------------------- */

#news {
	margin-top: 140px;
	position: relative;
}

#news .news-list li + li {
	margin-top: 35px;
}
#news .news-list .date {
	font-family: 'Roboto_Condensed';
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
}
#news .news-list .title {
	font-size: 16px;
	line-height: 1.5;
}

@media print, screen and (min-width:768px) {
	#news .text-wrap1 {
		padding-top: 50px;
		display: flex;
		justify-content: flex-end;
	}
	#news .text-wrap2 {
		width: calc(770 / 1180 * 100%);
	}
	
	#news .news-list li a {
		display: flex;
	}
	#news .news-list li a .date {
		width: 115px;
		display: block;
	}
	#news .news-list li a .title {
		width: calc(100% - 115px);
		padding-top: 0.2em;
		display: block;
	}
	#news .news-list li a:hover .title {
		text-decoration: underline;
	}
	
	#news .btn-index1 {
		margin: 65px 0 0 auto;
	}
}

@media screen and (max-width:767px) {
	#news {
		margin-top: 32vw;
	}
	#news .news-list {
		margin: 10vw 0 8vw;
	}
	#news .news-list li + li {
		margin-top: 6vw;
	}
	#news .news-list .date {
		font-size: 3.8vw;
		line-height: 1;
		display: block;
	}
	#news .news-list .title {
		margin-top: 0.5em;
		font-size: 3.4vw;
		line-height: 1.5;
		display: block;
	}
}

/* -------------------------------------------------
	copy1
------------------------------------------------- */

#copy1 {
	margin-top: 140px;
	text-align: center;
}
#copy1 img {
	width: 84%;
}

@media screen and (max-width:767px) {
	#copy1 {
		margin-top: 20vw;
	}
}

/* -------------------------------------------------
	product-area
------------------------------------------------- */

#product-area {
	margin-top: 160px;
	border-top: none;
}
#product-area .btn-index1 {
	max-width: 877px;
	width: 100%;
	margin-top: 80px;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic Medium", "游ゴシック", "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	letter-spacing: 0.1em;
	display: flex;
	text-align: center;
	line-height: 1.5;
	font-size: 20px;
}

@media print, screen and (min-width:768px) {
	#product-area .btn-index1 {
		height: 80px;
	}
}

@media screen and (max-width:767px) {
	#product-area {
		margin-top: 20vw;
	}
	#product-area .btn-index1 {
		margin-top: 8vw;
		font-size: 3.8vw;
	}
}

/* -------------------------------------------------
	story
------------------------------------------------- */

#story {
	margin-top: 150px;
	position: relative;
}
#story .text-wrap1 {
	padding-top: 50px;
	display: flex;
	justify-content: center;
}
#story .text-wrap2 p {
	line-height: 2.2;
	letter-spacing: 0.1em;
	font-size: 18px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
#story .text-wrap2 p span {
	text-combine-upright: all;
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
}
@-moz-document url-prefix() {
	#story .text-wrap2 p span {
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		-o-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		line-height: 1;
		letter-spacing: 0em;
		text-indent: -1.6em;
	}
}

@media print, screen and (min-width:768px) {
	#story .text-wrap2 {
		height: 320px;
		/*margin-right: calc(250 / 1180 * 100%);*/
		display: flex;
		justify-content: center;
	}
}

@media print, screen and (min-width:768px) and (-ms-high-contrast:none) { /* IE11 用バグfix (なぜかIE11のみでレイアウトが崩れるため) */
	*::-ms-backdrop, #story .text-wrap2 { width: 663px; }
}

@media print, screen and (min-width:768px) and (max-width:900px) {
	#story .text-wrap2 {
		margin-right: calc(190 / 1180 * 100%);
	}
	#story .text-wrap2 p {
		line-height: 2;
	}
}

@media screen and (max-width:767px) {
	#story {
		margin-top: 15vw;
	}
	#story .text-wrap1 {
		padding-top: 10vw;
		justify-content: center;
	}
	#story .text-wrap2 {
		width: 75vw; /* ← ここを設定しないとスマホででなぜかレイアウト崩れる */
		height: 80vw;
	}
	#story .text-wrap2 p {
		font-size: 3.4vw;
		letter-spacing: 0;
		line-height: 1.9;
	}
}

@media screen and (max-width:767px) and (orientation:landscape) {
	#story .text-wrap2 {
		height: 65vh;
	}
	#story .text-wrap2 p {
		font-size: 2.6vw;
		line-height: 1.5;
	}
}

/* -------------------------------------------------
	about
------------------------------------------------- */

#about {
	margin-top: 200px;
	position: relative;
}
#about .text-wrap1 p {
	font-size: 18px;
	line-height: 2.2;
}
#about .btn-index1 span {
	font-weight: bold;
	font-family: "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic Medium", "游ゴシック", "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	letter-spacing: 0.1em;
	display: inline-block;
	text-align: center;
	line-height: 1.5;
	font-size: 20px;
}

@media print, screen and (min-width:768px) {
	#about .text-wrap1 {
		padding-top: 50px;
		display: flex;
		justify-content: flex-end;
	}
	#about .text-wrap2 {
		width: calc(720 / 1180 * 100%);
	}
	#about .btn-index1 {
		width: 100%;
		height: 100px;
		margin-top: 80px;
	}
}

@media screen and (max-width:767px) {
	#about {
		margin-top: 15vw;
	}
	#about .text-wrap1 p {
		width: 90%;
		margin: 10vw auto 0;
		font-size: 3.4vw;
		line-height: 2;
	}
	#about .btn-index1 {
		width: 100%;
		height: 16vw;
		margin-top: 8vw;
	}
	#about .btn-index1 span {
		font-size: 3.8vw;
		text-align: center;
		letter-spacing: 0;
	}
}

/* -------------------------------------------------
	movie
------------------------------------------------- */

#movie {
	margin-top: 240px;
	position: relative;
}

@media print, screen and (min-width:768px) {
	#movie .mov {
		padding-top: 50px;
	}
	#movie iframe {
		width: 800px;
		height: calc(800px * 315 / 560);
	}
}

@media print, screen and (min-width:768px) and (max-width:1050px) {
	#movie iframe {
		width: calc(800 / 1050 * 100vw);
		height: calc(76.2vw * 315 / 560);
	}
}

@media screen and (max-width:767px) {
	#movie {
		margin-top: 15vw;
	}
	#movie .mov {
		padding-top: 10vw;
	}
	#movie iframe {
		width: 80%;
		height: 42vw;
		display: block;
		margin: 0 auto;
	}
}

/* -------------------------------------------------
	profile
------------------------------------------------- */

#profile {
	margin-top: 270px;
	position: relative;
}
#profile .prof-box + .prof-box {
	margin-top: 135px;
}

#profile .prof-box .man .name .large {
	font-size: 28px;
	display: inline-block;
	font-weight: bold;
	vertical-align: baseline;
}
#profile .prof-box .man .name .small {
	font-size: 20px;
	display: inline-block;
	vertical-align: baseline;
}
#profile .prof-box .man p {
	margin-top: 1.3em;
	font-size: 18px;
	line-height: 1.6;
}
#profile .prof-box .man p + p {
	margin-top: 0.8em;
}
#profile .prof-box .man p a {
	color: #808080;
	text-decoration: underline;
}

#profile .prof-box .comment {
	margin-top: 55px;
	padding: 25px 35px 25px 100px;
	border: solid 1px #666;
	position: relative;
}
#profile .prof-box .comment dt {
	font-size: 16px;
	color: #666;
	font-family: 'Roboto_Condensed';
	font-weight: 700;
}
#profile .prof-box .comment dd {
	font-size: 18px;
	line-height: 1.5;
}

@media print, screen and (min-width:768px) {
	#profile .text-wrap1 {
		padding-top: 50px;
		display: flex;
		justify-content: flex-end;
	}
	#profile .text-wrap2 {
		width: calc(960 / 1180 * 100%);
	}
	
	#profile .prof-box .man {
		display: flex;
		justify-content: space-between;
	}
	#profile .prof-box:nth-child(even) .man {
		flex-direction: row-reverse;
	}
	#profile .prof-box .man .pic {
		width: calc(280 / 960 * 100%);
	}
	#profile .prof-box .man .man-text {
		width: calc(600 / 960 * 100%);
	}
	#profile .prof-box .man p a:hover {
		text-decoration: none;
	}
	#profile .prof-box .comment dt {
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%) rotate(90deg);
	}
}

@media screen and (max-width:767px) {
	#profile {
		margin-top: 15vw;
	}
	#profile .text-wrap1 {
		margin-top: 10vw;
	}
	#profile .prof-box + .prof-box {
		margin-top: 10vw;
	}
	#profile .prof-box .man .pic {
		width: 55%;
		display: block;
		margin: 0 auto 6vw;
	}
	#profile .prof-box .man .name .large {
		font-size: 4.4vw;
	}
	#profile .prof-box .man .name .small {
		font-size: 3.4vw;
	}
	#profile .prof-box .man p {
		font-size: 3.4vw;
	}

	#profile .prof-box .comment {
		margin-top: 7vw;
		padding: 4vw;
	}
	#profile .prof-box .comment dt {
		font-size: 4vw;
	}
	#profile .prof-box .comment dd {
		margin-top: 0.7em;
		font-size: 3.4vw;
	}
}

/* -------------------------------------------------
	music
------------------------------------------------- */

#music {
	margin-top: 250px;
	position: relative;
}

#music .headline {
	font-size: 28px;
	font-weight: bold;
	line-height: 1.4;
}

#music .col2 + .col2 {
	margin-top: 140px;
}
#music .col2 .desc {
	margin: 1em 0 1.7em;
	font-size: 18px;
	line-height: 1.8;
}
#music .col2 .note dt {
	font-size: 16px;
	line-height: 1;
}
#music .col2 .note dd {
	margin-top: 0.4em;
	font-size: 16px;
	line-height: 1.4;
}

@media print, screen and (min-width:768px) {
	#music .col2:first-of-type {
		padding-top: 80px;
	}
	#music .col2 {
		width: calc(960 / 1180 * 100%);
		display: flex;
		justify-content: space-between;
	}
	#music .col2 .pic {
		width: calc(320 / 960 * 100%);
	}
	#music .col2 .text {
		width: calc(580 / 960 * 100%);
	}
	
	#music .btn-index1 {
		margin: 30px 0 25px;
	}
}

@media screen and (max-width:767px) {
	#music {
		margin-top: 15vw;
	}
	#music .headline {
		font-size: 4.4vw;
	}
	
	#music .col2:first-of-type {
		margin-top: 10vw;
	}
	#music .col2 + .col2 {
		margin-top: 12vw;
	}
	#music .col2 .pic {
		width: 55%;
		display: block;
		margin: 0 auto 7vw;
	}
	#music .col2 .desc {
		font-size: 3.4vw;
	}
	#music .col2 .note dt {
		font-size: 3.0vw;
		line-height: 1;
	}
	#music .col2 .note dd {
		font-size: 3.0vw;
	}
	#music .btn-index1 {
		margin-bottom: 6vw;
    	margin-top: 6vw;
	}
}


/* -------------------------------------------------
	teaser
------------------------------------------------- */
#teaser {
    margin-top: 250px;
    position: relative;
}

@media print, screen and (min-width:768px) {
	#teaser .mov {
		padding-top: 50px;
		display: flex;
		justify-content: flex-end;
	}
	#teaser iframe {
		width: 800px;
		height: calc(800px * 315 / 560);
	}
}

@media print, screen and (min-width:768px) and (max-width:1050px) {
	#teaser iframe {
		width: calc(800 / 1050 * 100vw);
		height: calc(76.2vw * 315 / 560);
	}
}

@media screen and (max-width:767px) {
	#teaser {
		margin-top: 15vw;
	}
	#teaser .mov {
		padding-top: 10vw;
	}
	#teaser iframe {
		width: 80%;
		height: 42vw;
		display: block;
		margin: 0 auto;
	}
}

/* -------------------------------------------------
	discussion
------------------------------------------------- */

#discussion {
	margin-top: 300px;
	text-align: left;
	position: relative;
}
#discussion .pic {
	width: calc(960 / 1180 * 100%);
	display: inline-block;
}

@media screen and (max-width:767px) {
	#discussion {
		margin-top: 15vw;
	}
	#discussion .pic {
		width: 80%;
		margin: 10vw auto 0;
		display: block;
		
	}
}

/* -------------------------------------------------
	comment
------------------------------------------------- */

#comment {
	padding-top: 250px;
}
#comment .comment-list {
	margin-top: 90px;
}
#comment .comment-list .comment {
	padding: 45px 1.7% 40px;
	box-sizing: border-box;
	border: solid 1px #000;
}
#comment .comment-list .comment .headline {
	font-size: 20px;
	line-height: 1.5;
	font-weight: bold;
}
#comment .comment-list .comment .desc {
	margin-top: 1.9em;
	font-size: 15px;
	line-height: 1.8;
}
#comment .comment-list .comment .by {
	margin-top: 1.5em;
	font-size: 18px;
	line-height: 1.4;
}
#comment .comment-list .comment .by span {
	font-size: 14px;
}

@media print, screen and (min-width:768px) {
	#comment .comment-list {
		display: flex;
		flex-wrap: wrap;
	}
	#comment .comment-list .comment {
		width: calc(360 / 1180 * 100%);
		margin-right: calc(50 / 1180 * 100%);
	}
	#comment .comment-list .comment:nth-child(3n) {
		margin-right: 0;
	}
	#comment .comment-list .comment:nth-child(3) ~ .comment {
		margin-top: 40px;
	}
	
	#comment .btn-index1 {
		width: 230px;
		margin-top: 70px;
	}
}

@media screen and (max-width:767px) {
	#comment {
		padding-top: 15vw;
	}
	#comment .comment-list {
		margin-top: 10vw;
	}
	#comment .comment-list .comment {
		padding: 6vw 4vw;
	}
	#comment .comment-list .comment + .comment {
		margin-top: 5vw;
	}
	#comment .comment-list .comment .headline {
    	font-size: 4.4vw;
	}
	#comment .comment-list .comment .desc {
		font-size: 3.4vw;
	}
	#comment .comment-list .comment .by {
		font-size: 4vw;
		line-height: 1.6;
	}
	#comment .comment-list .comment .by span {
		font-size: 3vw;
	}
	
	#comment .btn-index1 {
		margin-top: 10vw;
	}
}

/* -------------------------------------------------
	sns-list
------------------------------------------------- */

#sns-list {
	padding-top: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sns-list li + li {
	margin-left: 85px;
}
#sns-list li .t { width: 29px; }
#sns-list li .f { width: 14px; }
#sns-list li .l { width: 42px; }

@media print, screen and (min-width:768px) {
	#sns-list li a {
		transition: opacity 0.3s ease-out;
	}
	#sns-list li a:hover {
		opacity: 0.5;
	}
}

@media screen and (max-width:767px) {
	#sns-list {
		padding-top: 15vw;
	}
	#sns-list li + li {
		margin-left: 16vw;
	}
	#sns-list li .t { width: calc(29 * 0.2vw); }
	#sns-list li .f { width: calc(14 * 0.2vw); }
	#sns-list li .l { width: calc(42 * 0.2vw); }
}

/* -------------------------------------------------
	twitter
------------------------------------------------- */

#twitter {
	max-width: 100%;
	padding-top: 130px;
}
#twitter .wrap {
	border: solid 1px #ccc;
	height: 600px;
	overflow: auto;
}

@media screen and (max-width:767px) {
	#twitter {
		padding-top: 15vw;
	}
	#twitter .wrap {
		height: 80vw;
		-webkit-overflow-scrolling: touch;
	}
}

/* -------------------------------------------------
	banners
------------------------------------------------- */

#banners {
	padding-top: 190px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#banners li {
	width: calc(500 / 1080 * 100%);
}
#banners li:nth-child(2) ~ li {
	margin-top: 50px;
}

@media print, screen and (min-width:768px) {
	#banners li a {
		transition: opacity 0.3s ease-out;
	}
	#banners li a:hover {
		opacity: 0.7;
	}
}

@media screen and (max-width:767px) {
	#banners {
		padding-top: 15vw;
	}
	#banners li {
		width: 48%;
	}
	#banners li:nth-child(2) ~ li {
		margin-top: 3vw;
	}
}