﻿/* ===========================================
	TBS v9 Top Page CSS
=========================================== */

/*	.panel
============================== */

div.panel {
	text-align:left;
}
div.pickup {
	min-height:300vh;
}
div.pickup.loaded {
	min-height:auto;
}
div.panel ul {
	display:flex;
	flex-wrap:wrap;
}
div.panel ul li a, div.panel ul li a span, div.panel ul li a span img {
	display:block;
}
div.panel ul li a {
	text-decoration:none;
}
div.panel ul li a:hover {
	opacity:0.8;
}
div.panel ul li a span.thumb {
	position:relative;
	height:0;
	padding-top: -webkit-calc(9 / 16 * 100%);
	padding-top: calc(9 / 16 * 100%);
	background-size:cover;
	background-position:center top;
	background-repeat:no-repeat;
	overflow:hidden;
}
div.panel ul li a span.thumb.lazy-done {
	-webkit-animation: tbsv9FadeIn 800ms;
	animation: tbsv9FadeIn 800ms;
}
div.panel ul li a span.thumb img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.panel ul li a span.txt-area {
	line-height:1.4;
}
div.panel ul li a span.txt-area span.txt {
	color:#fafafa;
	color:#3B3F4A;
	font-weight:700;
}
div.panel ul li a span.txt-area span.txt:not(:last-child) {
	margin-bottom:0.2em;
}
div.topics div.panel ul li a span.txt-area span.txt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height:2.8em;
}
div.panel ul li a span.txt-area span.date,
div.panel ul li a span.txt-area span.outgoing {
	color:#fafafa;
	color:#81899C;
}
div.topics div.panel ul li a,
div.pickup.panel ul li a span.thumb.lazy-done {
	box-shadow:4px 4px 10px hsla(0,0%,0%,.1);
}
div.topics div.panel ul li a {
	background-color:#fff;
}
@media all and (min-width: 1200px) {
div.panel {
	max-width:1200px;
	margin:0 auto;
}
}
@media all and (min-width: 768px) and (max-width: 991.98px) {
div.panel {
	margin:0 5.3333333333%;
}
}
@media all and (min-width: 768px) {
div.panel ul li {
	width: -webkit-calc((100% - 2*20px)/3);
	width:calc((100% - 2*20px)/3);
	margin-bottom:32px;
}
div.panel ul li:not(:nth-child(3n)) {
	margin-right:20px;
}
div.panel ul li a span.thumb {
	border-radius:10px;
}
div.panel ul li a span.thumb:not(:last-child) {
	margin-bottom:12px;
}
div.panel ul li a span.txt-area span.txt {
	font-size:125%;
}
div.panel ul li a span.txt-area span.date {
	font-size:87.5%;
}
div.panel ul li a span.txt-area span.outgoing {
	font-size:83%;
}
div.pickup.panel ul {
	margin-bottom:96px;
}
div.pickup.panel ul li:first-child {
	margin-bottom:64px;
}
div.pickup.panel ul li:not(:nth-child(3n)) {
	margin-right:0;
}
div.pickup.panel ul li:not(:nth-child(3n+1)) {
	margin-right:20px;
}
div.pickup.panel ul li:first-child a span.thumb {
	border-radius:20px;
}
div.pickup.panel ul li:first-child a span.thumb:not(:last-child) {
	margin-bottom:16px;
}
div.pickup.panel ul li:first-child a span.txt-area span.txt {
	font-size:195%;
}
div.pickup.panel ul li:first-child a span.txt-area span.date {
	font-size:100%;
}
div.topics div.panel ul li a {
	border-radius:10px;
}
div.topics div.panel ul li a span.txt-area {
	padding:0 12px 16px;
}
}
@media all and (max-width: 767.98px) {
div.panel {
	padding:0 5.3333333333%;
}
div.panel ul li {
	width: -webkit-calc((100% - 16px)/2);
	width:calc((100% - 16px)/2);
	margin-bottom:16px;
}
div.panel ul li:nth-child(odd) {
	margin-right:16px;
}
div.panel ul li a span.thumb {
	border-radius:5px;
}
div.panel ul li a span.thumb:not(:last-child) {
	margin-bottom:6px;
}
div.panel ul li a span.txt-area span.txt {
	font-size:87.5%;
}
div.panel ul li a span.txt-area span.date {
	font-size:75%;
}
div.panel ul li a span.txt-area span.outgoing {
	font-size:62.5%;
}
div.pickup.panel ul {
	margin-bottom:56px;
}
div.pickup.panel ul li:first-child {
	margin-bottom:24px;
}
div.pickup.panel ul li:nth-child(odd) {
	margin-right:0;
}
div.pickup.panel ul li:nth-child(even) {
	margin-right:16px;
}
div.pickup.panel ul li:first-child a span.thumb {
	border-radius:10px;
}
div.pickup.panel ul li:first-child a span.thumb:not(:last-child) {
	margin-bottom:12px;
}
div.pickup.panel ul li:first-child a span.txt-area span.txt {
	font-size:112.5%;
}
div.pickup.panel ul li:first-child a span.txt-area span.date {
	font-size:87.5%;
}
div.pickup.panel ul li:first-child a span.txt-area span.outgoing {
	font-size:83%;
}
div.topics div.panel ul li a {
	border-radius:5px;
}
div.topics div.panel ul li a span.txt-area {
	padding:0 8px 12px;
}
}
div.pickup.panel ul li:first-child {
	width:100%;
	margin-right:0;
}
div.topics div.panel ul li a {
	overflow:hidden;
}
div.topics div.panel ul li a span.thumb {
	border-radius:0;
}

/*	.unit
============================== */

.col-green {
	background-color:#32c83c;
}
.col-tbsblue {
	background-color:#0050ff;
}
.col-blue {
	background-color:#5a96ff;
}
.col-orange {
	background-color:#ffaa1e;
}
.col-pink {
	background-color:#ff91a0;
}
.col-light {
	background-color:#f9f9fc;
}
.col-dark {
	background-color:#33363B;
}

div.contents > .unit > article {
	color:#fafafa;
	text-align:left;
}
div.contents > .unit > article > header {
	display:flex;
	align-items:center;
	justify-content:space-between;
}
div.contents > .unit > article > header h2 {
	letter-spacing:0.1em;
}
div.contents > .col-light > article > header h2 {
	color:#0050ff;
}
div.contents > .tbsfree > article > header h2 {
	letter-spacing:0;
}
@media all and (min-width: 1200px) {
div.contents > .unit > article {
	max-width:1200px;
	margin:0 auto;
}
}

@media all and (min-width: 992px) {
div.contents > .unit {
	padding-bottom:176px;
	margin-bottom:-80px;
}
div.contents > .unit > article > header {
	margin-bottom:56px;
}
div.contents > .unit > article > header h2 {
	font-size:300%;
}
}
@media all and (max-width: 991.98px) {
div.contents > .unit {
	padding-bottom:112px;
	margin-bottom:-56px;
}
div.contents > .unit > article > header {
	padding:0 5.3333333333vw;
	margin-bottom:24px;
}
div.contents > .unit > article > header h2 {
	font-size:5vw;
}
}

@media all and (max-width: 575.98px) {
div.contents > .unit > article > header h2 {
	font-size:7.4vw;
}
}


/*	.news
============================== */
div.contents > div.news > article > header h2 {
	letter-spacing:0.25em;
}
div.news article ul.news-li li:not(:last-child) {
	border-bottom:solid 1px #E5E6E9;
}
div.news article ul.news-li li.level1 a dl dt,
div.news article ul.news-li li.level2 a dl dt {
	display:none;
}
div.news article ul.news-li li a {
	display:block;
	text-decoration:none;
	position:relative;
}
div.news article ul.news-li li a:after {
	content:"";
	display:inline-block;
	position:absolute;
	right:0;
	top:50%;
	background-image:url(../img/icons/arrow_r.svg);
	background-size:cover;
	background-repeat:no-repeat;
}
div.news article ul.news-li li {
	padding:1.25em 0;
}
div.news article ul.news-li li.level2 a dl dd {
	color:#FF3C1E;
}
div.news article ul.news-li li a dl dt,
div.news article ul.news-li li a dl dd {
	line-height:1.5;
}
div.news article ul.news-li li a dl dt {
	color:#81899C;
}
div.news article ul.news-li li a dl dd {
	color:#3B3F4A;
}
@media all and (min-width: 992px) {
div.news article header {
	float:left;
}
div.news article ul.news-li {
	padding-left:352px;
	border-bottom:solid 1px #E5E6E9;
	padding-bottom:96px;
	margin-bottom:49px;
}
div.news article ul.news-li li a {
	padding-right:56px;
}
div.news article ul.news-li li a:after {
	width:40px;
	height:40px;
	margin-top:-20px;
}
div.news article ul.news-li li:first-child {
	padding-top:0;
}
div.news article ul.news-li li:last-child {
	padding-bottom:0;
}
div.news article ul.news-li li a dl dt {
	font-size:87.5%;
}
div.news article ul.news-li li a dl dd {
	font-size:112.5%;
}
}
@media all and (max-width: 991.98px) {
div.news article ul.news-li {
	padding:0 5.3333333333vw;
	margin-bottom:48px;
}
div.news article ul.news-li li a {
	padding-right:32px;
}
div.news article ul.news-li li a:after {
	width:20px;
	height:20px;
	margin-top:-10px;
}
div.news article ul.news-li li a dl dt {
	font-size:75%;
}
div.news article ul.news-li li a dl dd {
	font-size:87.5%;
}
}





/*	.slider
============================== */
.slider .outer {
	position:relative;
	overflow-x: hidden;
}
.slider .outer ul {
	display: flex;
	flex-wrap: nowrap;
	/**/
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	/**/
	width:fit-content;
}
.slider.slider-off .outer ul {
	justify-content: center;
	width:auto;
}
.slider .outer ul li a,
.slider .outer ul li span,
.slider .outer ul li img {
	display:block;
}
.slider .outer ul li a {
	text-decoration:none;
	color:#fafafa;
	/**/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/**/
}
.slider .outer ul li a:hover {
	opacity:0.8;
}
.slider .outer ul li a span.thumb {
	position:relative;
	height:0;
	padding-top: -webkit-calc(9 / 16 * 100%);
	padding-top: calc(9 / 16 * 100%);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	overflow:hidden;
}
.slider .outer ul li a span.thumb.slazy-done {
	-webkit-animation: tbsv9FadeIn 800ms;
	animation: tbsv9FadeIn 800ms;
	box-shadow:4px 4px 10px hsla(0,0%,0%,.1);
}
.slider .outer ul li a span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.slider .outer ul li a span.txt {
	font-weight:700;
	line-height:1.4;
}
.slider .outer ul li a span.date {
	line-height:1.3;
}
@media all and (min-width: 992px) {
.slider .outer {
	margin-bottom:64px;
}
.slider .outer ul li {
	max-width: 276px;
	width: 276px;
	min-width: 276px;
}
.slider .outer ul li:not(:last-child) {
	margin-right:32px;
}
.slider .outer ul li a span.thumb {
	border-radius:20px;
	margin-bottom:16px;
}
.slider .outer ul li a span.txt {
	font-size:20px;
}
.slider .outer ul li a span.date {
	font-size:14px;
}
.slider ul.ctrl {
	display:flex;
	justify-content:center;
}
.slider ul.ctrl.ctrl-off {
	display:none;
}
.slider ul.ctrl li {	
	width:40px;
}
.slider ul.ctrl li:first-child {	
	margin-right:146px;
}
.slider ul.ctrl li a {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	border:1px solid #E5E6E9;
	text-decoration:none;
	/**/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/**/
}
.slider ul.ctrl li a.off {
	opacity:0.25;
	cursor:default;
}
.slider ul.ctrl li a > span {
	display:inline-block;
	position:relative;
	width:12px;
	height:12px;
}
.slider ul.ctrl li a > span:after {
	content: '';
	display: inline-block;
	line-height: 1;
	width: 100%;
	height: 2px;
	background-color: #E5E6E9;
	position:absolute;
	top:50%;
	left:0;
	margin-top:-1px;
}
.slider ul.ctrl li a > span:before {
	content: '';
	width: 75%;
	height: 75%;
	border: 2px solid #E5E6E9;
	border-bottom: 0;
	position: absolute;
	top: 50%;
	box-sizing: border-box;
}
.slider ul.ctrl li.ctrl-rig a > span:before {
	border-left: 0;
	transform: rotate(45deg);
	transform-origin: top right;
	right: -1px;
}
.slider ul.ctrl li.ctrl-lef a > span:before {
	border-right: 0;
	transform: rotate(-45deg);
	transform-origin: top left;
	left: -1px;
}
}
@media all and (max-width: 991.98px) {
.slider .outer {
	margin-left:5.3333333333vw;
}
.slider .outer ul li {
	width:220px;
	max-width: 220px;
	min-width: 220px;
}
.slider .outer ul li:not(:last-child) {
	margin-right:16px;
}
.slider .outer ul li a span.thumb {
	border-radius:15px;
	margin-bottom:12px;
}
.slider .outer ul li a span.txt {
	font-size:14px;
}
.slider .outer ul li a span.date {
	font-size:12px;
}
.slider ul.ctrl {
	display:none;
}
}


/*	.tbsfree
============================== */
div.tbsfree .slider .outer ul li a span.txt-area span.txt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height:2.8em;
	margin-bottom:0.4em;
}
div.tbsfree .slider .outer ul li a span.txt-area {
	padding-bottom:0.2em;
}
div.tbsfree .slider .outer ul li a span.txt-area span.date {
	display:inline-block;
	margin-bottom:0;
}
div.tbsfree .slider .outer ul li a span.txt-area span.date > span {
	display:inline-block;
	background-color:#fff;
	color:#0055ff;
	padding:0 0.25em;
	margin-left:1em;
}

/*	.announcer
============================== */
div.announcer .slider .outer ul li a span.thumb {
	padding-top: 100%;
}
div.announcer .slider .outer ul li a span.txt {
	font-weight:400;
	letter-spacing:0.2em;
	text-indent:0.2em;
	text-align:center;
	padding-bottom:0.2em;
}
@media all and (min-width: 992px) {
div.announcer .slider .outer ul li a span.thumb {
	border-radius:60px;
}
div.announcer .slider .outer ul li {
	width:214px;
	max-width: 214px;
	min-width: 214px;
}
div.announcer .slider .outer ul li a:not(:last-child) {
	margin-bottom:32px;
}
}
@media all and (max-width: 991.98px) {
div.announcer .slider .outer ul li a span.thumb {
	border-radius:40px;
}
div.announcer .slider .outer ul li {
	width:120px;
	max-width: 120px;
	min-width: 120px;
}
div.announcer .slider .outer ul li a:not(:last-child) {
	margin-bottom:20px;
}
div.announcer .slider .outer ul li a span.txt {
	font-size:12px;
}
}

/*	.news
============================== */
div.news .slider .outer ul li a span.thumb {
	padding-top: 100%;
	margin-bottom:0;
}
div.news .slider .outer ul li a span.thumb.slazy-done {
/*	border:2px solid #0050ff; */
}
@media all and (min-width: 992px) {
div.news .slider ul.ctrl li a {
	border-color:#3B3F4A;
}
div.news .slider ul.ctrl li a > span:after {
	background-color: #3B3F4A;
}
div.news .slider ul.ctrl li a > span:before {
	border-color:#3B3F4A;
}
}
@media all and (max-width: 991.98px) {
div.news .slider .outer ul li {
	width:140px;
	max-width: 140px;
	min-width: 140px;
}
}

/*	.ticket
============================== */
div.ticket .slider .outer ul li a {
	display:flex;
	flex-direction:row-reverse;
	justify-content:space-between;
	overflow:hidden;
}
div.ticket .slider .outer ul li a:before,
div.ticket .slider .outer ul li a:after {
	content:'';
	display:block;
	background-repeat:repeat-y;
	background-size:cover;
}
div.ticket .slider .outer ul li a:before {
	background-image:url(../img/tbsv9_ticket_r.svg);
}
div.ticket .slider .outer ul li a:after {
	background-image:url(../img/tbsv9_ticket_l.svg);
}
div.ticket .slider .outer ul li a > figure {
	padding:8px 0;;
}
div.ticket .slider .outer ul li a span.thumb {
	padding-top: -webkit-calc(150 / 100 * 100%);
	padding-top: calc(150 / 100 * 100%);
	border-radius:2px;
	box-shadow:none;
	margin-bottom:0;
}
div.ticket .slider .outer ul li a span.txt-area {
	display:flex;
	flex-direction:column-reverse;
	justify-content:flex-end;
}
div.ticket .slider .outer ul li a span.txt-area span.txt {
	color:#3B3F4A;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/**/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/**/
}
div.ticket .slider .outer ul li a span.txt-area span.date {
	color:#81899C;
	border-top:solid #E5E6E9 1px;
	padding-top:0.5em;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height:1.5em;
}
@media all and (min-width: 992px) {
div.ticket .slider .outer ul li {
	width:584px;
	max-width: 584px;
	min-width: 584px;
}
div.ticket .slider .outer ul li a {
/*	padding:8px 24px; */
	max-height:286px;
	background-image: -webkit-gradient(linear, left center, right center, from(transparent), color-stop(14px, transparent), color-stop(14px, #fff)), color-stop(566px, #fff)), color-stop(566px, transparent)), to(transparent)));
	background-image: linear-gradient(to right, transparent 14px, #fff 14px, #fff 570px, transparent 570px);
}
div.ticket .slider .outer ul li a:before,
div.ticket .slider .outer ul li a:after {
	width:16px;
	height:286px;
}
div.ticket .slider .outer ul li a > figure {
	width:180px;
}
div.ticket .slider .outer ul li a span.txt-area {
	width:321px;
	padding-top:32px;
}
div.ticket .slider .outer ul li a span.txt-area span.txt {
	-webkit-line-clamp: 7;
	max-height:9.8em;
}
div.ticket .slider .outer ul li a span.date {
	font-size:16px;
	margin-top:1em;
}
}
@media all and (max-width: 991.98px) {
div.ticket .slider .outer ul li {
	width:294px;
	max-width: 294px;
	min-width: 294px;
}
div.ticket .slider .outer ul li a {
/*	padding:8px 18px; */
	max-height:166px;
	background-image: -webkit-gradient(linear, left center, right center, from(transparent), color-stop(8px, transparent), color-stop(8px, #fff)), color-stop(286px, #fff)), color-stop(286px, transparent)), to(transparent)));
	background-image: linear-gradient(to right, transparent 8px, #fff 8px, #fff 286px, transparent 286px);
}
div.ticket .slider .outer ul li a:before,
div.ticket .slider .outer ul li a:after {
	width:9px;
	height:166px;
}
div.ticket .slider .outer ul li a > figure {
	width:100px;
}
div.ticket .slider .outer ul li a span.txt-area {
	width:146px;
	padding-top:11px;
}
div.ticket .slider .outer ul li a span.txt-area span.txt {
	padding-bottom:.5em;
	-webkit-line-clamp: 6;
	max-height:8.4em;
}
div.ticket .slider .outer ul li a span.date {
	margin-top:.5em;
}
}

/*	.tbsch .goods
============================== */
div.goods .slider .outer ul li a span.txt,
div.tbsch .slider .outer ul li a span.txt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height:2.8em;
	margin-bottom:0.4em;
}
div.tbsfree .slider .outer ul li a span.txt-area span.date {
	margin-bottom:0;
	padding-bottom:0.1em;
}

/*	.newsdig
============================== */
div.newsdig .slider .outer ul li a {
	background-color:#fff;
	border-radius:10px;
	box-shadow:4px 4px 10px hsla(0,0%,0%,.5);
}
div.newsdig .slider .outer ul li a span.thumb {
	border-radius:8px;
	box-shadow:2px 2px 10px hsla(0,0%,0%,.1);
	margin-bottom:8px;
}
div.newsdig .slider .outer ul li a span.txt-area span.txt {
	color:#3B3F4A;
}
div.newsdig .slider .outer ul li a span.txt-area span.date {
	color:#81899C;
}
div.newsdig .slider .outer ul li a span.txt {
	font-size:14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	height:4.2em;
}
div.newsdig .slider .outer ul li a span.date {
	font-size:12px;
}
div.newsdig .slider .outer ul li a span.txt-dig {
	font-size:12px;
	text-align:right;
	line-height:1.3;
	color:#0050ff;
	padding:0.5em 0;
}
@media all and (min-width: 992px) {
div.newsdig .slider .outer ul li a {
	padding:8px;
}
}
@media all and (max-width: 991.98px) {
div.newsdig .slider .outer ul li a {
	padding:6px;
}
div.newsdig .slider .outer ul li {
	width:220px;
	max-width: 220px;
	min-width: 220px;
}
}


/*	.gfooter
============================== */
div.gfooter-inner .slider .outer ul li a span.thumb {
	border-radius:5px;
	margin-bottom:0;
}
@media all and (min-width: 992px) {
div.gfooter-inner .slider {
	margin-bottom:96px;
}
div.gfooter-inner .slider .outer ul li {
	width:224px;
	max-width: 224px;
	min-width: 224px;
}
div.gfooter-inner .slider .outer ul li:not(:last-child) {
	margin-right:20px;
}
}
@media all and (max-width: 991.98px) {
div.gfooter-inner .slider {
	margin-bottom:48px;
}
div.gfooter-inner .slider .outer ul li {
	width:190px;
	max-width: 190px;
	min-width: 190px;
}
div.gfooter-inner .slider .outer ul li:not(:last-child) {
	margin-right:8px;
}
}


/*	.tbsv9_banner_responsive
============================== */
@media all and (min-width: 992px) {
div.tbsv9_banner_responsive {
	margin-bottom:96px;
}
}
@media all and (max-width: 991.98px) {
div.tbsv9_banner_responsive {
	margin-bottom:48px;
}
}




/*	.tbs-btn
============================== */
@media all and (min-width: 992px) {
div.contents > .unit > article > .tbs-btn.ftr {
	display:none;
}
}
@media all and (max-width: 991.98px) {
div.contents > .unit > article > header .tbs-btn {
	display:none;
}
div.contents > .unit > article > .tbs-btn.ftr {
	padding-top:40px;
	text-align:center;
}
}


@media all and (min-width: 1400px) {
}
@media all and (min-width: 1200px) and (max-width: 1399.98px) {
}
@media all and (min-width: 992px) and (max-width: 1199.98px) {
}
@media all and (min-width: 768px) and (max-width: 991.98px) {
}
@media all and (min-width: 576px) and (max-width: 767.98px) {
}
@media all and (max-width: 575.98px) {
}

@media print {
div.panel ul,
div.unit div.slider {
	display:none;
}
}





































