@charset "utf-8";

/* === reset css 全体のcss設定 === */

*,
::before,
::after {
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
body {
	font-family: sans-serif;
	font-size: 16px;
	color: #222222;
	background-color:#fcfcfc;
	line-height: 1.6;
}



/* ====【ヘッダー  全デバイスサイズ共通】=================================== */

.header {
	background-color:#ffffff; /* ヘッダー背景色 ホワイト */
}
.header a {text-decoration:none }

.fixed{
	width: 100%;
	max-width: 1008px;
	margin-left: auto;
	margin-right: auto;
	background-color:#ffffff;
}
.header-menu{	background-color:#ffffff;}

/*
    :link ･･･未訪問リンク
    :visited ･･･訪問済みリンク
    :hover ･･･カーソルが重なった時
    :active ･･･クリックしてから離される時まで
*/

.header_title a {color: #404040;/* 文字色：濃グレー*/} 
.header_subtitle {color: #808080;/* 文字色：グレー*/}
.header-menu a {color: #404040;/* 文字色：濃グレー*/}

.header-menu a:hover{
	color: #cc1427; /* 文字色：赤 */
}
.header-menu a:active{
	color: #cc1427; /* 文字色：赤 */
	font-weight:bold;
}





/* ====【フッター  全デバイスサイズ共通】=================================== */

.footer{
	color: lightyellow;
 	background-color:#ffffff; 
	background-image: url(../img/footer-storm03.jpg);
	background-position:center;
	margin-left: auto;
	margin-right: auto;
}
.footer-inner{
	width: 100%;
	max-width: 1008px;
	margin-left: auto;
	margin-right: auto;
}
.footer-inner a{
	color: lightyellow;
	text-decoration: none;
}
.footer-inner a:link {color: lightyellow;/*ホワイト*/ }
.footer-inner a:visited {color: lightyellow;}
.footer-inner a:hover {color: cyan; font-weight:bold;}
.footer-inner a:active {color: cyan; font-weight:bold;}


.footer-menu li {
	margin: 0;	/* 通常ccsのリセット */
	display: block;
	height: 2.4em;
	font-size: 85%;
}
.footer_about{
	font-size:85%;
	padding:20px 0 0 2em;
}

.copyright{
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

/* ====【mainタグ内 全デバイスサイズ共通】================================== */

.main{
	width: 100%;
	max-width: 1008px;
	margin-left: auto;
	margin-right: auto;
	background-color:#fcfcfc;
}

/*	mainタグ内　基本のリンク装飾　
			リンク文字：青色、下線あり
			hoverとactive：赤色、下線あり
*/
.main a {
	color: #0033cc; /* 文字色：青色 */
	text-decoration: underline;
	outline:none;
}
.main a:link {color: #0033cc; } /* #0000cc #3366cc #1a0dab */
.main a:visited {color: #0033cc; }
.main a:hover {color: #e6172d; }/* 文字色：赤系 */
.main a:active {color:#e6172d; }


/* パンくずリスト  */
.topic-path a {text-decoration:none; }
.topic-path li {padding-right: 0.6em; }
.topic-path li:last-child { /* 最期のパンくずリストだけ右側に余白を作らない */
	padding-right: 0;}

.topic-path li:not(:first-child)::before { /*「>」マークをリンク前に表示させる、ただし最初のliは除く */ 
	content: "\03e";
	padding-right: 0.6em;
} 


/*先頭にもどる */
.text--right{
	font-size: 90%;
	text-align: right;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

/*	mainタグ内　汎用の文字装飾　*/

.mark::before { /*「>>」マークをリンク前に表示させる */ 
	content: "\0bb"; 
}

.diamond::before { /* ◇を表示 */
	content: "\025c7";
}



/* アンダーライン付き見出し  */
.border-bottom-title {
	border-bottom: 2px solid #808080;
}

/* spanタグで装飾 */
.blankleft--1em{padding-left:1em; } /* 1文字 字下げ */

.blankleft--2em{padding-left:2em; } /* ２文字 字下げ */
.paddingtop--06em{padding-top:0.6em; } /* 0.6文字 上に余白 */
.margintop--06em{margin-top:0.6em; } /* 0.6文字 上にマージン */


.fontsize--120per{font-size:120%; } /* 文字サイズ80％指定 spanで使用想定 */
.fontsize--80per{font-size:80%; } /* 文字サイズ80％指定 spanで使用想定 */
.fontsize--90per{font-size:90%; }
.fontbold {font-weight:bold; } /* 太文字 */
.font--normal {font-weight:normal; } /* hタグなどで太文字を解除したい場合 */
.font--red{color:red;}

.text-center{text-align:center;}

.letter--large {text-transform: uppercase; }/* すべて大文字にする */
.letter--small {text-transform: lowercase; }/* すべて小文字にする */
.letter--ini_large {text-transform: capitalize; }/* 頭文字を大文字にする */

.float--left{float:left;}
.float--clear {clear: both;}

.div.embed {margin:5px auto;}

.inline_block{display:inline-block}


/*	mainタグ内　配置部品の汎用class　*/

.flex_nowrap{  /* ブロック要素横並び 回り込みナシ */
	display:flex;
	flex-wrap: nowrap;
}
.flex_wrap{  /* ブロック要素横並び 回り込みアリ */
	display:flex;
	flex-wrap: wrap;
}
.flex_center{justify-content:center; }
.flex_equal{justify-content:space-around; }
.flex_between{justify-content:space-between; }


.margintop--20{margin-top:20px; }
.margintop--30{margin-top:30px; }
.margintop--50{margin-top:50px; }

.paddingtop--1em{padding-top:1em;}
.paddingtop--2em{padding-top:2em;}

.paddingtop--70{padding-top:70px; }

.marginleft--30{margin-left:30px; }


.block_width--100per{width:100%;}



/* === トップページ・リンクボタン群セクション　共通 === */


.link_official{
		padding-top:10px;
		border-bottom: 1px solid #c8c8c8;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
	}

.link_official ul li{
		display:block;
    border: none;

    outline: none;
		background-position: center;
    background-repeat: no-repeat;
}


.link_official--button{
	width:auto;
	height:30px;
	line-height:30px; /* 親要素の高さとline-heightを同じにして文字を縦中央に配置させる */
	padding:0 0.8em;
  background-color: #161666; /* darknavy #11114d*/
	color: #ffffff;/*ホワイト*/
	font-size:95%;
	margin-right:30px;
	margin-bottom:10px;
	border-radius: 6px;

}
.link_official--button a {
	color: #ffffff;/*ホワイト*/
	text-decoration: none;
}
.link_official--button a:link {color: #ffffff;}
.link_official--button a:visited {color: #ffffff;}
.link_official--button a:hover {color: gold;}
.link_official--button a:active {color: gold;}


.group_sns{	margin-bottom:10px;}
.group_sns li{margin-right:24px;}
.group_sns li:last-child {margin-right: 0;}

.group_sns--text{
	width:auto;
	height:30px;
	line-height:30px; /* 親要素の高さとline-heightを同じにして文字を縦中央に配置させる */
	padding:0;
/*	font-size:95%;*/
}

.logo{
		width:30px;
		height:30px;
		text-align:center;
}
.logo img{width:30px; height:30px;}

.logo--x{background-color: black; border-radius: 6px;}
.logo--x img{width:25px; height:25px; padding-top:5px;}
.logo--youtube img{border-radius: 6px;}


.button--right{
display:flex;
justify-content:flex-end;
}


/* ===【 全デバイス共通 トップ予告動画と変動ネタ 】=== */

.wrapper_top{
	width :100% ;
	padding-top: 30px;
	padding-bottom :30px;
	border-bottom: 1px solid #c8c8c8;
	display: flex;
}
.




.index_wrapper01{
	width :100% ;
	padding-top: 30px;
	display: flex;
	flex-wrap: wrap;
}

.topics li{
padding-top:2em;
}

.tag{
display:inline;
padding:0 0.5em;
box-sizing:border-box;
border-radius:8px;
/*color:white;*/
font-size:70%;
font-weight:bold;
line-height:1.3;
vertical-align:middle;
} 
.tag--date{
display:inline;
font-weight:bold;
line-height:1.3;
vertical-align:bottom;
}

.tag--event{
background-color:lightgreen;
border:1px solid forestgreen;
} 
.tag--theater{
background-color:#ffcccc; /* softpink*/
border:1px solid deeppink;
} 
.tag--broadcast{
background-color:gold;
border:1px solid orange;
} 
.tag--topic{
background-color:powderblue;
border:1px solid dodgerblue;
} 

.tag--new{
background-color:red;
border:1px solid #cc0000;
color:white;
} 

.articles ul li{padding-top:30px;}


.link_page h4{
	height:30px;
	line-height:30px;
}
.link_page ul li{padding-top:0.5em;}
.link_page p{font-size:90%;}


/* ==========================================================================
【　PC用　】：幅1008px以上のデバイス用　css 

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

/* === PC用ヘッダー === */

.header {  /* PCはヘッダー全体を固定表示 */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background-color:#ffffff;
	border-bottom: 1px solid #c8c8c8;
}
.fixed {
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 6px;
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	align-items: flex-end;
}

.header_wrapper {width: 320px;}

.header_title {
	font-size: 20px;
	/*width: 100%;   */
	padding-top: 10px;
}
.header_subtitle {font-size: 12px;}

.toggle-menu-button,
.header-menu_button{
	display: none;
}

.header-menu{
	/*width: 100%;
	max-width: 1008px;
	margin-left: auto;
	margin-right: auto;  */

	/*padding-left: 20px;
	padding-right: 20px;
	padding-top: 1em;
	padding-bottom: 0.5em;  */

	
}
.header-menu {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	font-size:15px;
	/*justify-content: center; */
}
.header-menu li {
	padding-right: 30px;
	display: block;
	text-align: right;
}
.header-menu li:last-child {padding-right: 0;}




/* === PC用mainタグ内 === */
.main {
	margin-top: 70px;
	/*ヘッダー固定表示のためmain本体にヘッダー高さ分のpaddingをとって表示させる*/
}
.main-inner {
	padding-left: 40px;
	padding-right: 40px;
}

.topic-path {
	padding-top: 15px;
	font-size: 75%;
}
.topic-path ul li{
	display: inline;
	white-space: wrap;
}

/* ===【 PC用 トップ予告動画と変動ネタ 】=== */

.wrapper_top{	flex-wrap:nowrap;}
.wrapper_top--video{
	width :360px;
	flex-shrink:0; /* 動画の縮小を防ぐ */
} 
.video_wrapper .w360{
	width :360px;
}
.wrapper_top--topic{
	width :auto;
	flex-shrink:1;
	padding-left:50px;
} 

/* ===【 PC用 動画埋込み 】=== */

.video_wrapper .PC2p{ /* YouTube埋め込み用クラスiframe-wrapperの親要素として大きさと埋め込み始点設定するためのdiv要素 */
	width :360px;
	margin-right:30px;
}

.video_wrapper .PC3p{ /* YouTube埋め込み用クラスiframe-wrapperの親要素として大きさと埋め込み始点設定するためのdiv要素 */
	width :309px;
	padding-right:10px;
}
.video_wrapper .PC2p--next {
	width :515px;
	padding-left:20px;
}




/* YouTube埋め込み用クラスiframe-wrapperの親要素として大きさと埋め込み始点設定するためのボックス */
.video_section--PC2p{ /* PC画面に動画2個並べる */
	width :360px;
}
.video_section--PC3p{ /* PC画面に動画3個並べる */
	width :32%;
}


.video_section{
	/* YouTube埋め込み用クラスiframe-wrapperの親要素として大きさと埋め込み始点設定するためのボックス */
	width :360px;
	height :203px;
}
.video_section--indextop{ /* トップ左に並べる仕様 */
	/* YouTube埋め込み用クラスiframe-wrapperの親要素として大きさと埋め込み始点設定するためのボックス */
	width :360px;
	height :203px;
}
.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* %指定だとpadding高さは親要素横幅に対する56.25%%になる。これで16:9の大きさになる。 */
  height: 0; /* iframeはabsoluteで浮いたレイアウトのため親要素のheightはゼロでよい */
  overflow: hidden;

}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.index_wrapper01--right {
	width: 560px;
	padding-left: 60px;
}

.pc_marginleft--30{margin-left:30px;}

.link-button{/* リンクボタン */
	/*width: 300px;*/
	margin: 5px 10px;
	padding: 15px;
}


.prize_topics {
	display: flex;
	flex-direction :column;
	flex-grow:1;
}




/* === PC用フッター === */

.footer-inner{
	padding-left: 40px;
	padding-right: 40px;
/*	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	align-items: flex-start;   */
}



}/* PC用ccs おわり */


/* ==========================================================================
【　タブレット用　】：幅641px〜1007pxのデバイス用　css 

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

@media screen and (min-width: 641px) and (max-width: 1007px){

/* === タブレット用ヘッダー === */

.header {  /* PCはヘッダー全体を固定表示 */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background-color:#ffffff;
	border-bottom: 1px solid #c8c8c8;
}
.fixed {
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 6px;
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	align-items: flex-end;
}

.header_wrapper {width: 320px;}
.header_title {
	font-size: 20px;
	/*width: 100%;   */
	padding-top: 10px;
}
.header_subtitle {font-size: 12px;}

.toggle-menu-button,
.header-menu_button{
	display: none;
}

.header-menu{
	/*width: 100%;
	max-width: 1008px;
	margin-left: auto;
	margin-right: auto;  */

	/*padding-left: 20px;
	padding-right: 20px;
	padding-top: 1em;
	padding-bottom: 0.5em;  */

	
}
.header-menu {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	font-size:15px;
	/*justify-content: center; */
}
.header-menu li {
	padding-right: 30px;
	display: block;
	text-align: right;
}
.header-menu li:last-child {padding-right: 0;}





/* === タブレット用mainタグ内 === */
.main {
	margin-top: 70px;
	/*ヘッダー固定表示のためmain本体にヘッダー高さ分のpaddingをとって表示させる*/
}

.main-inner {
	padding-left: 40px;
	padding-right: 40px;
}

.topic-path {
	padding-top: 10px;
	font-size: 70%;
}

.topic-path ul li{
	display: inline;
	white-space: wrap;
}


/* ===【 タブレット用 トップ予告動画と変動ネタ 】=== */

.wrapper_top{	flex-wrap:wrap;}
.wrapper_top--video{
	margin: 0px auto;
	width :90%;
} 
.video_wrapper .w360{
	margin: 0px auto;
	width :360px;
}
.wrapper_top--topic{
	margin: 0px auto;
	width :90%;
	padding-top :20px;
} 

/* ===【 タブレット用 動画埋込み 】=== */

 /* 動画 2列配置（3つ目からは2行目に回り込む） */

.video_wrapper .tablet2p{ /* YouTube埋め込み用クラスiframe-wrapperの親要素として大きさと埋め込み始点設定するためのdiv要素 */
	width :50%;
	max-width:360px;
	padding-right:15px;
}

 /* 動画 3列配置（4つ目からは2行目に回り込む） */

.video_wrapper .tablet3p{ /* YouTube埋め込み用クラスiframe-wrapperの親要素として大きさと埋め込み始点設定するためのdiv要素 */
	width:32%;
	min-width:240px;
	padding-right:15px;
}

.video_wrapper .tablet2p--next {
	flex-grow:1;
}


/* 動画埋込み タブレット用  */

.video_section--tablet{
	padding-right:10px;
	width:32%;
	min-width:240px;
}

/* .video_section_test{
	margin: 0px auto;
	width:40%;
}  */

.video_section--indextop{
	margin: 0px auto;
	width:40%;
  /*padding-bottom: 56.25%;
  height: 0;*/
	height :209px;	
}
.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* %指定だとpadding高さは親要素横幅に対する56.25%%になる。これで16:9の大きさになる。 */
  height: 0; /* iframeはabsoluteで浮いたレイアウトのため親要素のheightはゼロでよい */
  overflow: hidden;

}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.link-button{ /* リンクボタン */
	min-width: 300px;
	margin: 5px 10px;
	padding: 15px;
}


.index_wrapper01--right {
	width: 50%;
	padding-left: 2em;
}





/* === タブレット用フッター === */

.footer-inner{
	padding-left: 40px;
	padding-right: 40px;
	/*display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	align-items: flex-start;  */
}




}/* タブレット用ccs おわり */

/* ==========================================================================
【　スマホ用　】：幅1px〜640pxのデバイス用　css 

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

@media screen and (min-width: 1px) and (max-width: 640px){

.header {  /* PCはヘッダー全体を固定表示 */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background-color:#ffffff;
	border-bottom: 1px solid #c8c8c8;
}
.fixed {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 4px;
}

.header_wrapper{
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
}

.header_title {
	font-size: 18px;
	/*width: 100%;   */
	padding-top: 8px;
}
.header_subtitle {font-size: 10px;}



/* .header-menu_button（ハンバーガーメニューボタン押下で表示するメニューのcssは全デバイス共通で指定）*/

.header-menu { /*スマホ用ハンバーガーメニュー表示スタイル */
	width: 50%;
	display: block;
	text-align: center;
	position: absolute;
	top: 100%;/* 親要素の高さをtop位置とする */
	left: 50%;
	right:0;
	background-color:rgba(0, 30, 67, 0.92);;/*ミッドナイトブルー 4番目数値で透過 */
	padding-top: 20px;
	padding-bottom: 25px;
	display:none; /* ボタン押下までは非表示 */
}
/*.header-menu ul{
	display: block;
	text-align: center; 
}  */

.header-menu li {
	margin: 0;	/* 通常ccsのリセット */
	display: block;
	height: 4em;
}
.header-menu a {
	display: block;
	text-decoration: none;
	color: #ffffff;
}
.header-menu a:link,
.header-menu a:visited {
	color: #ffffff;
}
.header-menu a:hover,
.header-menu a:active {
	font-size:110%;
}

.header-menu.is-show { 
	/*Javascript処理：メニューボタンが押されたらis-showクラスが加わる*/
	display: block;
}

/* ハンバーガーメニューボタン */
.toggle-menu-button {
	display: block;
	float: right;
	position: relative;
	/*top: 0;
	right: 0; */
	width:44px;
	height: 34px;
	background-image: url(../img/menu_line.svg);/*  */
		background-size: 38px 38px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
	margin: 5px 0px 15px;
	padding-bottom: 5px;
}
	.toggle-menu-button::after {
		content: 'menu';
		display: block;
		width: 44px;
		height: auto;
		position: absolute;
		margin: 15px auto 0;
	}

	.toggle-menu-button.is-show {
		background-image: url(../img/close.png);
	background-size: 45%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
 	}
	.toggle-menu-button.is-show::after {
		content: 'close';
	}





/* === スマホ用mainタグ内部分 === */
.main {
	margin-top: 62px;
	/*ヘッダー固定表示のためmain本体にヘッダー高さ分のpaddingをとって表示させる*/
}
.main-inner {
	padding-left: 20px;
	padding-right: 20px;
	font-size: 90%;
}


.topic-path {
	width: 100%;
	max-width: 1008px;
	margin-left: auto;
	margin-right: auto;
	font-size: 78%;
}
.topic-path ul{
	padding-top: 0.8em;
	display: flex;
	overflow: auto;
}
.topic-path ul li {
	flex-shrink: 0; /*子要素(li)を縮めず表示させるのはスマホだけ */
}


/* ===【 スマホ用 トップ予告動画と変動ネタ 】=== */

.wrapper_top{	flex-wrap:wrap;}
.wrapper_top--video{
	width:100%;
}
.wrapper_top--topic{
	margin: 0px auto;
	width:90%;
	padding-top :20px;
} 



/* ===【 スマホ用 動画埋込み 】=== */

.video_wrapper .mobile{
	margin: 0px auto;
	width:90%;
}

.video_wrapper .mobile1p{
	margin: 0px auto;
	width:90%;
}

.video_wrapper .mobile2p{
	width :50%;
	padding-right:12px;
}


.video_section{
	margin: 0px auto;
	width:90%;
  padding-bottom: 56.25%;
  height: 0;
	
}

.video_section_test{
	margin: 0px auto;
	width:90%;
}

.video_section--indextop{
	margin: 0px auto;
	width:90%;
  padding-bottom: 56.25%;
  height: 0;
	
}
.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.link-button{/* リンクボタン */
	min-width: 250px;
	margin:5px 10px;
	padding:15px 3px;
}



/* === スマホ用フッター === */

.footer-inner{
	padding-left: 20px;
	padding-right: 20px;
}

.footer-title{
	font-size:90%;
}

.copyright{
	text-align:center;
	font-size:70%;
}



}/* スマホ用ccs おわり */