@charset "utf-8";

/*======================================================================

　LBS
　
	[01] 基本・レイアウト
	[02] メインビジュアル
	[03] コンテンツリンク
	[04] 見逃し配信
	[05] 番組詳細
	[06] ギャラリー
	[99] メディアクエリ

======================================================================*/



/*------------------------------------------------

	[01] 基本・レイアウト

------------------------------------------------*/

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

#wrapper { font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; width: 100%; min-width: 1000px; padding: 0; /*background: #fcf9ed;*/ }
.inr { width: 100%; /*max-width: 1000px;*/ margin: 0 auto; }
.vpc { display: inherit; }
.vsp { display: none; }
.flb { display:flex; flex-wrap: wrap; /*justify-content:center;*/ width: 100%; /*max-width: 1000px;*/ margin: 0 auto; }
p.article {font-size: 0.875rem; font-weight: 300; line-height: 1.8; color: #231815; }

/* フェード
---------------------------------*/
.scrollin { opacity: 0; transition: all .4s ease; }
.scrollin.show { opacity: 1; transform: none; }
.scr_lr { transform: translate(-1rem, 0); }
.scr_rl { transform: translate(1rem, 0); }
.scr_fadein { transform: translate(0, 0px); }
.scr_up1 { transform: translate(0, 1rem); transition: 0.8s 0s ease; }
.scr_up2 { transform: translate(0, 1rem); transition: 0.8s 0.2s ease; }
.scr_up3 { transform: translate(0, 1rem); transition: 0.8s 0.4s ease; }
.scr_up4 { transform: translate(0, 1rem); transition: 0.8s 0.6s ease; }
.scr_up5 { transform: translate(0, 1rem); transition: 0.8s 0.8s ease; }
.scr_up6 { transform: translate(0, 1rem); transition: 0.8s 1.0s ease; }
.scr_down { transform: translate(0, -1rem); }
.scr_scaleUp { transform: scale(.5); }
.scr_scaleDown { transform: scale(1.5); }
.scr_rotateL { transform: rotate(1rem); }
.scr_rotateR { transform: rotate(1rem); }


/*.fadein { opacity: 0; transform: translateY(6px); }
.type1 { transition: 0.9s 0s ease; }
.type2 { transition: 0.9s 0.2s ease; }
.type3 { transition: 0.9s 0.4s ease; }
.type4 { transition: 0.9s 0.6s ease; }
.type5 { transition: 0.9s 0.8s ease; }
.type6 { transition: 0.9s 1.0s ease; }
.fade1 { transition: all 0.3s; opacity: 0; visibility: hidden; transform: translate(-50px, 0px); }
.fade2 { transition: all 0.3s; opacity: 0; visibility: hidden; transform: translate(50px, 0px); }
.fade3 { transition: all 0.3s; opacity: 0; visibility: hidden; transform: translate(0px, 50px); }
.fade-in1 { opacity: 1; visibility: visible; transform: translate(0px, 0px); }
.fade-in2 { opacity: 1; visibility: visible; transform: translate(0px, 0px); }
.fade-in3 { opacity: 1; visibility: visible; transform: translate(0px, 0px); }

.fadeleft { animation-name: fadeleft; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0, 0, 0, 0, 0, 0, 0.7, 0.9, 1.0) ;; }
@keyframes fadeleft {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); } }

.faderight { animation-name: faderight; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0, 0, 0, 0, 0, 0, 0.7, 0.9, 1.0);; }
@keyframes faderight {
from { opacity: 0; transform: translateX(-160px); }
to { opacity: 1; transform: translateX(0px); } }

.fadeup { animation-name: fadeup; animation-duration: 2.4s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0, 0, 0, 0, 0, 0, 0.7, 0.9, 1.0); }
@keyframes fadeup {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); } }

.fadeup2 { animation-name: fadeup2; animation-duration: 2.4s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0, 0, 0, 0, 0, 0, 0.7, 0.9, 1.0); }
@keyframes fadeup2 {
from { opacity: 0; transform: translateY(0px); }
to { opacity: 1; transform: translateY(0); } }*/



/* フッタ
---------------------------------*/
footer#common_foot { margin: 0 0 0; }
#footer img { vertical-align: top !important; }
#footer { width: 100%; padding: 0 0 10px; text-align: center; }
p#copyright { padding: 30px 0; font-size: 0.875rem; line-height: 1.8; color: #fff; }


/* 動画配信
---------------------------------*/
.btn_flex-even { display: flex; width: 94%; max-width: 940px; margin: 0 auto 60px; justify-content: center; }
.btn_flex-even > li { /*flex-basis: 100%;*/flex-basis: 32%; }
.btn_flex-even li a { display: block; padding: 0.3em; margin: 0 0.3em; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.btn_flex-even li img { display: block; width: 100%; max-width: 224px; height: auto; text-align: center; margin: 0 auto; }


/* SNSボタン */
section.snsbtn_box div.fb-like, section.snsbtn_box div.btn_twitter, section.snsbtn_box div.btn_line, section.snsbtn_box div.btn_friend {float: left;}
section.snsbtn_box { position: relative; margin: 0 0 20px; padding: 0; border-top: none; }
#sns_btbox img {vertical-align: top !important;}
.sns_btn {text-align: right;}
.sns_btn div, .sns_btn p{display: inline-block; vertical-align: top;}
.sns_btn div iframe{height: inherit !important; max-height: 30px;}
.sns_btn a.ssp{margin: 0px; padding: 0 0 0 10px; vertical-align: top; line-height: 0;}




/* リンク
---------------------------------*/
/*a, a > div	{ font-weight: 500; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; }
a:link		{ color: #0952a1; }
a:visited	{ color: #0952a1; }
a:hover		{ text-decoration: none; color: #0952a1; opacity: 0.7; }
a:active	{ text-decoration: none; }*/


/* 見出し
---------------------------------*/
#taiwan h2 { width: 100%; max-width: 1200px; margin: 7% auto 0; text-align: left; }
#taiwan h2 img { width: 100%; max-width: 344px; margin: 0; }
#taiwan #wrapper h3 { width: 94%; max-width: 940px; margin: 1em auto .5em; font-size: 1.875rem; text-align: center; }
#cnt_movie h3, #cnt_info h3, .box_read_tva h3 { position: relative; width: 100%; max-width: 330px; margin: 0 0 60px; padding: 0 0 10px; font-size: 3.6rem; color: #003c6c; letter-spacing: 0.09em; border-bottom: 3px solid #003c6c; }
#cnt_movie h3:before, #cnt_info h3:before, .box_read_tva h3:before { content: ""; display: block; position: absolute; height: 3px; bottom: -3px; width: 16%; left: 0%; background: #ff7b25; }
h4 { margin: 0 0 10px; font-size: 1.125rem; letter-spacing: 0.09em; }




/* 脚注
---------------------------------*/








/*------------------------------------------------

	[02] メインビジュアル

------------------------------------------------*/
#taiwan #main { position: relative; width: 100%; }

.bg_main { width: 100vw; min-width: 1200px; height: 640px; background: url(/Taiwan/images/bg_main.jpg) 70% 50% / cover; }
.img_mokomichi { position: relative; height: 640px; margin-top: -560px; background: url(/Taiwan/images/mokomichi.png) 70% 50% / cover; z-index: 2; }
/*#taiwan #main .flb { width: 100%; margin: 0 auto; }
#taiwan #main .flb > div { width: 100%; }*/

.loopSlide { position: relative; display: flex; width: 100vw; height: 500px; overflow: hidden; }
.loopSlide ul { padding: 0; /*width: 100vw;*/ display: flex; flex-shrink: 0; }
.loopSlide ul:first-child { animation: slide1 300s -150s linear infinite; }
.loopSlide ul:last-child { animation: slide2 300s linear infinite; }
.loopSlide ul li { display: inline-block; width: 100%; min-width: 500px; list-style: none; text-align: center; background-color: black; }
.loopSlide ul li img { display: block; width: 100%; height: auto; opacity: 0.4; }

@keyframes slide1 { 0% { transform: translateX(100%); }
  to { transform: translateX(-100%); } }
@keyframes slide2 { 0% { transform: translateX(0); }
  to { transform: translateX(-200%); } }

.main_taiwan {position: absolute; top: 140px; left: 0; z-index: 2; }
.inr_main { width: 100%; max-width: 1000px; margin: -328px auto 0px; z-index: 3; position: sticky;}
.inr_main.flb div.logo { width: 34%; }
.inr_main.flb div.inc_intro { width: calc(66% - 0px); margin: 100px 0 0 0; }
.line { position: relative; margin: 0; padding: 0; border-bottom: 6px solid #003c6c; }
.line:before { content: ""; display: block; position: absolute; height: 6px; bottom: -6px; width: 32%; left: 0%; background: #ff7b25; }
/*.dotted { position: absolute; margin: auto; z-index: 1; opacity: 0.2; width: 100%; height: 500px; background: url(/Taiwan/images/dotted.png) ;}*/

p.title { margin: 10px 0; font-size: 4.0rem; font-weight: 600; color: #fff; text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; }
p.intro { margin: 14px 0; font-size: 1.0rem; line-height: 1.6; color: #fff; letter-spacing: 0.09em; text-align: justify; text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; }



.loopSlide1, .loopSlide2 { position: relative; display: flex; width: calc(100vw - 13px); min-width: 1200px; height: 420px; overflow: hidden; }
.loopSlide1 ul, .loopSlide2 ul { padding: 0; /*width: 100vw;*/ display: flex; flex-shrink: 0; }
.loopSlide1 ul:first-child { animation: slide1 300s -150s linear infinite; }
.loopSlide1 ul:last-child { animation: slide2 300s linear infinite; }
.loopSlide2 ul:first-child { animation: slide3 300s -150s linear infinite; }
.loopSlide2 ul:last-child { animation: slide4 300s linear infinite; }
.loopSlide1 ul li, .loopSlide2 ul li { display: inline-block; /*width: 242px;*/ min-width: 280px; margin: 0 10px; list-style: none; text-align: center; }
.loopSlide1 ul li img, .loopSlide2 ul li img { display: block; width: 100%; height: auto; border-radius: 10px; }

@keyframes slide1 { 0% { transform: translateX(100%); }
  to { transform: translateX(-100%); } }
@keyframes slide2 { 0% { transform: translateX(0); }
  to { transform: translateX(-200%); } }

@keyframes slide3 { 0% { transform: translateX(-100%); }
  to { transform: translateX(100%); } }
@keyframes slide4 { 0% { transform: translateX(-200%); }
  to { transform: translateX(0%); } }




/*------------------------------------------------

	[03] コンテンツリンク

------------------------------------------------*/
#cnt_link { width: 100%; margin: 0 auto; padding: 10px 0; }
#cnt_link .inr_cnt { width: 96%; max-width: 1200px; margin: 0 auto; }
.flb.clm3 > div { display: flex; flex-direction: column; width: calc(20% - 40px); height: auto; margin: 0 20px; background: #fff; text-align: center; border: 1px solid #ebebeb; box-sizing: border-box; }
/*.flb.clm3 > div { display: flex; flex-direction: column; width: 27%; height: auto; margin: 0 3%; background: #fff; text-align: center; }*/
.flb.clm3 > div img { width: 100%; }
.flb.clm3 p.dtl { width: 100%; padding: 1.5rem 0 3rem; font-size: 0.875rem; line-height: 1.6; text-align: justify; border-top: 1px solid #ebebeb; }
.flb.clm3 p span.tit { display: block; margin: 0 0 0.5em; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.09em; }

.bnr_cnt { overflow: hidden; transition: transform .6s cubic-bezier(.16,.5,.43,1); }
.bnr_cnt:hover { transform: scale(1); transition: transform .6s cubic-bezier(.16,.5,.43,1); }
.bnr_cnt_inr { width: 100%; height: 100%; transition: transform .6s cubic-bezier(.16,.5,.43,1);}
.bnr_cnt_inr:hover { transform: scale(.95); transition: transform .6s cubic-bezier(.16,.5,.43,1) ; }
.bnr_cnt a { display: block; text-decoration: none; color: #000; }



/*------------------------------------------------

	[04] 見逃し配信

------------------------------------------------*/
#cnt_movie { width: 100%; margin: 0 auto; padding: 60px 0; background: #f7f7f7; }
#cnt_movie .inr_cnt { width: 96%; max-width: 1200px; margin: 0 auto; }
#cnt_movie div.movie_box {width: 100%; margin: 0 auto 1em; text-align: center; }
#cnt_movie div.movie_box iframe { width:100%; max-width: 750px; height: 422px; margin: 0; }




/*------------------------------------------------

	[05] 番組詳細

------------------------------------------------*/
#cnt_info { width: 100%; margin: 0 auto; padding: 60px 0; }
#cnt_info .inr_cnt { width: 96%; max-width: 750px; margin: 0 auto; }

.cc01 { width: 100%; max-width: 750px; margin: 0 auto 60px; text-align: center; }
.cc01 img { width: 100%; transition: 0.2s ease-out; }
.cc01 img:hover { width: 100%; opacity: 0.7; }

#oainfo div.inr01 { width: 30%; }
#oainfo div.inr01 img { width: 100%; }
#oainfo div.inr02 { width: calc(70% - 2em); margin: 0 0 0 2em; }
#oainfo div.inr02 p.cc02 { margin: 0 0 1em; padding: .5em 1em; font-size: 1.125rem; color: #fff; background: #000; }
#oainfo div.inr02 p.txt_info { font-size: 0.875rem; line-height: 1.8; letter-spacing: 0.09em; text-align: justify; }


.list_archives li { margin: 0; padding: 30px 0; border-top: 1px solid #ccc; }
.list_archives li:first-child { padding: 0 0 30px; border-top: none; }
.list_archives li .inr01 { width: 28%; margin: 0 1%; }
.list_archives li .inr01 img { width: 100%; max-width: 420px; transition: 0.2s ease-out; }
.list_archives li .inr01 img:hover { opacity: 0.7; }
.list_archives li .inr02 { width: 68%; margin: 0 1%; }
.oa { margin: 0 0 6px; font-size: 0.75rem; }
.txt { font-size: 0.875rem; line-height: 1.6; text-align: justify; }



/*------------------------------------------------

	[06] ギャラリー

------------------------------------------------*/
#box_location { width: 100%; margin: 0 auto 20px; padding: 80px 0; background: url(/Taiwan/images/bg_lct.jpg) no-repeat 50% 0% / cover; background-color: rgba(0,0,0,0.6); background-blend-mode: darken; }
#box_location:before { content: ""; display: block; height: 140px; margin-top: -140px; visibility: hidden; }
#box_location .inr_box { width: 94%; max-width: 940px; margin: 0 auto; }
#box_location .inr_box p { color: #fff }

div#box-photogallery a { width: calc(100% / 5 - 20px); margin: 10px; }
div#box-photogallery a img { width: 100%; border-radius: 3px; }










/*------------------------------------------------

	[99] メディアクエリ

------------------------------------------------*/
@media screen and (min-width: 769px) {



}


@media screen and (max-width: 768px) {

/* [01] 基本・レイアウト
---------------------------------*/
#resNav { z-index: 9999; }
.bg-subnav { display: none; }
header { min-width: 150px; }
#wrapper { min-width:200px; }
.inr { width: 100%; max-width: none; padding-top: 0px; }
.vpc { display: none; }
.vsp { display: inherit; }

/* 見出し */
#taiwan h2 { width: 96%; margin: 20px auto 10px; text-align: center; }
#taiwan h2 img { width: 100%; max-width: 200px; margin: 0; }
#cnt_movie h3, #cnt_info h3 { max-width: none; font-size: 1.75rem; }



/* [02] メインビジュアル
---------------------------------*/
.img_mokomichi { height: 560px; margin-top: -480px; background: url(/Taiwan/images/mokomichi.png) 67% 50% / cover; }
.main_taiwan { /*position: absolute; top: 51%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: 2;*/ }
.main_taiwan { top: 50px; }
.bg_main { min-width: auto; height: 550px; background: url(/Taiwan/images/bg_main.jpg) 90% 50% / cover; }

#taiwan #main { margin: 8px 0 0; }
#taiwan #main > .flb { width: 100%; margin: 0 auto; animation: fadeIn 3s ease 0s 1 normal; -webkit-animation: fadeIn 3s ease 0s 1 normal; }
.inr_main { width: 100%; margin: -310px auto 0; justify-content: center; }
.inr_main.flb div.logo { width: auto; }
.inr_main.flb div.inc_intro { width: 100%; max-width: 636px; margin: 0 auto; }
.inr_main.flb div.inc_intro img { width: 100%; }

/*.loopSlide { position: relative; display: flex; width: 100vw; height: 640px; overflow: hidden; }
.loopSlide ul li { display: inline-block; width: 640px; min-width: 640px; list-style: none; text-align: center; background-color: black; }
.loopSlide ul li img { display: block; width: 640px; height: 640px; opacity: 0.4; }
.dotted { position: absolute; margin: auto; z-index: 1; opacity: 0.2; max-width: 100%; height: 640px; background: url(/lbs/images/dotted.png) ; }*/

p.title { width: 100%; margin: 0 auto 10px; font-size: 1.3125rem; font-weight: 600; color: #fff; }
p.intro { width: 100%; margin: 0 auto 20px; font-size: 0.875rem; line-height: 1.4; color: #fff; letter-spacing: 0.05em; }


.loopSlide1, .loopSlide2 { position: relative; display: flex; width: calc(100vw - 15px); /*height: 420px;*/ min-width: auto; overflow: hidden; }
.loopSlide1 ul, .loopSlide2 ul { padding: 0; /*width: 100vw;*/ display: flex; flex-shrink: 0; }
.loopSlide1 ul:first-child { animation: slide1 300s -150s linear infinite; }
.loopSlide1 ul:last-child { animation: slide2 300s linear infinite; }
.loopSlide2 ul:first-child { animation: slide3 300s -150s linear infinite; }
.loopSlide2 ul:last-child { animation: slide4 300s linear infinite; }
.loopSlide1 ul li, .loopSlide2 ul li { display: inline-block; /*width: 240px;*/ min-width: 240px; margin: 0 6px; list-style: none; text-align: center; }
.loopSlide1 ul li img, .loopSlide2 ul li img { display: block; /*width: 240px;*/ width: 100%; height: auto; border-radius: 10px; }


/* [03] コンテンツリンク
---------------------------------*/
#cnt_link { width: 90%; margin: 0 auto; padding: 0px 0 20px; }
.flb.clm3 > div { width: calc(94% / 3); margin: 0 1% 10px; }

/*.flb.clm3 > div { width: 46%; margin: 0 2%; }
.flb.clm3 p.dtl { width: 100%; padding: 1.5rem 0 3rem; font-size: 1.3rem; line-height: 1.4; text-align: justify; border-top: 1px solid #ebebeb; }
.flb.clm3 p span.tit { display: block; margin: 0 0 0.5em; font-size: 1.0rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.09em; }*/


/* [04] 見逃し配信
---------------------------------*/
#cnt_movie { padding: 30px 0; }
#cnt_movie div.movie_box { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#cnt_movie div.movie_box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }



/* [05] 番組詳細
---------------------------------*/
#cnt_info { padding: 30px 0; }
.cc01 { margin: 0 auto 30px; }

#oainfo div.inr01 { width: 100%; }
#oainfo div.inr02 { width: 100%; margin: 0; }
#oainfo div.inr02 p.cc02 { margin: 0 0 1em; padding: .5em 1em; font-size: 1.125rem; }
#oainfo div.inr02 p.txt_info { width: 96%; margin: 0 auto; font-size: 1rem; line-height: 1.8; }


.list_archives li .inr01 { width: 100%; margin: 0 0 2%; }
.list_archives li .inr01 img { max-width: none; }
.list_archives li .inr02 { width: 94%; margin: 0 3%; }




/* [06] ギャラリー
---------------------------------*/
#box_location { background: url(/Taiwan/images/bg_lct.jpg) no-repeat 60% 50% / cover; background-color: rgba(0,0,0,0.6); background-blend-mode: darken; }

div#box-photogallery a { width: calc(100% / 3 - 10px); margin: 5px; }



}



@media screen and (max-width: 480px) {






}
