@charset "utf-8";

/*----------------------------------------------------------------
 /viewing/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 toc
-----------------------------------------------------*/
.toc{ background: var(--main-color); }
.toc ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	text-align			: center;
	justify-content		: center;
	padding				: 13px 0;
}
.toc ul li{ margin: 0 5px; }
.toc ul a{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid transparent;
	padding				: 5px 15px;
	background			: #FFF;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: var(--main-color);
}
.toc ul a:hover{
	border				: 1px solid #FFF;
	background			: transparent;
	color				: #FFF;
}

.toc ul span{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid #FFF;
	padding				: 5px 15px;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: #FFF;
}

@media screen and (min-width: 768px) {
.toc ul{ padding: 30px 0; }
.toc ul a{
	width				: 200px;
	padding				: 10px;
}
}

@media screen and (min-width: 768px) {
.toc ul{ padding: 30px 0; }
.toc ul span{
	width				: 200px;
	padding				: 10px;
}
}



/*-----------------------------------------------------
 common
-----------------------------------------------------*/
/* title
-----------------------------------------------------*/
.section .title{ margin: 0 0 15px 0;color: var(--main-color); }

/* btn
-----------------------------------------------------*/
.section .btn{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid transparent;
	padding				: 10px 20px;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: #FFF;
 	background			: var(--main-color);
}
.section .btn.small{
	padding				: 10px 15px;
	font-size			: 1.4rem;
}
.section .btn.small i.fas{ font-size: 1.4rem; }
.section .btn:hover{ background: transparent;
	border				: 1px solid var(--main-color);
	color				: var(--main-color);
}

/* btn_nolink
-----------------------------------------------------*/
.section .btn_nolink{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid transparent;
	padding				: 10px 20px;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: #ffffff;
 	background			: #aaaaaa;
}
.section .btn_nolink.small{
	padding				: 10px 15px;
	font-size			: 1.4rem;
}
.section .btn_nolink.small i.fas{ font-size: 1.4rem; }


/* links
-----------------------------------------------------*/
.section a:not(.btn){ text-decoration: none;
	border-bottom		: 1px dotted var(--main-color);
	color				: var(--main-color);
}



/*-----------------------------------------------------
 viewing
-----------------------------------------------------*/
#viewing{ background: var(--base-color); }

#viewing .container{ padding: 30px 0; }
@media screen and (min-width: 768px) {
#viewing .container{ padding: 60px 0; }
}

/* viewing-list
-----------------------------------------------------*/
#viewing .viewing-list{ margin: 40px 0; }
#viewing .viewing-list li{ list-style: none; }
#viewing .viewing-list>li{ margin: 0 0 40px 0; }

#viewing .viewing-list .row{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
}
#viewing .viewing-list .row>dl>dt{
	font-weight			: bold;
	margin				: 20px 0 15px 0;
	font-size			: 1.4rem;
}
#viewing .viewing-list dl .btn .fas,
#viewing .viewing-list dl .btn .fab{ margin: 0 5px 0 0; }
#viewing .viewing-list dl .btn{ margin: 10px 0; }

@media screen and (max-width: 767px) {
#viewing .viewing-list .row{ flex-direction: column; }
#viewing .viewing-list .row span{
	margin				: 0 0 10px 0;
	text-align			: center;
}
#viewing .viewing-list .row span img{ height: 150px; }
#viewing .viewing-list .channels{
	margin				: 20px 0 0 0;
	text-align			: center;
}
#viewing .viewing-list .btn.large{
	padding				: 12px 30px;
	font-size			: 1.6rem;
	border-radius		: 20px;
}
}

@media screen and (min-width: 768px) {
#viewing .viewing-list>li{ margin: 0 0 40px 0; }
#viewing .viewing-list .row{
	flex-direction		: row;
	justify-content		: space-between;
}
#viewing .viewing-list .row span{ flex: 0 0 220px; }
#viewing .viewing-list .row>dl{ flex: 0 0 calc(100% - 250px); }
#viewing .viewing-list .row>dl>dt{
	padding				: 15px 0 10px 0;
	font-size			: 2rem;
}

}

/* howto
---------------------------------*/
#viewing .viewing-list .howto{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
	margin				: 30px 0;
}
#viewing .viewing-list .howto + .howto{ margin: 40px 0 20px 0; }

#viewing .viewing-list .howto>dt{ margin: 0 0 15px 0; }
#viewing .viewing-list .howto>dt>span{
	display				: block;
	border-radius		: 15px;
	width				: 200px;
	padding				: 5px 0;
	background			: #cccc99;
	text-align			: center;
	font-weight			: bold;
	line-height			: 1;
}

@media screen and (min-width: 768px) {
#viewing .viewing-list .howto{
	flex-direction		: row;
	justify-content		: space-between;
}
#viewing .viewing-list .howto + .howto{ margin: 60px 0 30px 0; }

#viewing .viewing-list .howto>dt{ flex: 0 0 200px; }
#viewing .viewing-list .howto>dd{ flex: 0 0 calc(100% - 250px); }
}

#viewing .viewing-list .howto .row{ margin: 0 0 20px 0; }
#viewing .viewing-list .howto .row>dl>dt,
#viewing .viewing-list .howto .row>strong{ font-weight: bold; }

@media screen and (max-width: 767px) {
#viewing .viewing-list .howto .row span{ text-align: left; }
#viewing .viewing-list .howto .row>dl>dt{ margin: 0; }
}

@media screen and (min-width: 768px) {
#viewing .viewing-list .howto .row{
	align-items			: center;
	font-size			: 1.4rem;
}
#viewing .viewing-list .howto .row>span{ flex: 0 0 120px; }
#viewing .viewing-list .howto .row>dl,
#viewing .viewing-list .howto .row>strong{ flex: 0 0 calc(100% - 150px); }

#viewing .viewing-list .howto .row>dl>dt,
#viewing .viewing-list .howto .row>strong{ font-size: 1.6rem; }
#viewing .viewing-list .howto .row>dl>dt{
	margin				: 0 0 10px 0;
	padding				: 0;
}
}

/* todo-list
---------------------------------*/
#viewing .viewing-list .howto .todo-list .row{
	flex-direction		: row;
	justify-content		: space-between;
}
@media screen and (max-width: 767px) {
#viewing .viewing-list .howto .todo-list .row span{ flex: 0 0 16vw; }
#viewing .viewing-list .howto .todo-list .row img{ height: auto; }
#viewing .viewing-list .howto .todo-list .row strong,
#viewing .viewing-list .howto .todo-list .row dl{ flex: 0 0 calc(100% - 16vw - 15px); }
}

/* must-ticket
---------------------------------*/
#viewing .must-ticket{
	margin: 40px 0 0 0;
	border-radius		: 10px;
	padding				: 20px 30px 30px 30px;
	background			: #f6f6ee;
}
#viewing .must-ticket h4{
	text-align			: center;
	font-weight			: bold;
	margin: 10px 0 30px 0;
}
#viewing .must-ticket h4:not(:first-of-type){
	margin: 60px 0 30px 0;
	border-top: 1px solid #000;
	padding: 40px 0 0 0;
}
#viewing .must-ticket .info{
	font-size			: 1.4rem;
}
#viewing .must-ticket .btn{
	margin: 20px 0 0 0;
}
/* program-list
---------------------------------*/
#viewing .must-ticket .program-list{ margin: 20px 0 0 0; }
#viewing .must-ticket .program-list dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
	margin				: 20px 0 0 0;
}
#viewing .must-ticket .program-list dl dt{ margin: 0 0 10px 0; }
#viewing .must-ticket .program-list dl dt>img{ border-radius: 10px; }
@media screen and (max-width: 767px) {
#viewing .must-ticket .program-list dl dt{ text-align: center; }
}
@media screen and (min-width: 768px) {
#viewing .must-ticket .program-list dl{
	justify-content		: space-between;
	flex-direction		: row;
}
#viewing .must-ticket .program-list dl dt{ flex: 0 0 180px; }
#viewing .must-ticket .program-list dl dd{ flex: 0 0 calc(100% - 200px); }
}