@charset "UTF-8";

/*2026.03.31
基本個別のサムネイルarticle(※fontサイズ諸々が異なるのでTOPINDEXのパーツそれぞれで指定)*/
/*テキストカラーとフォントウエイトは共通*/
/*シャドウとホバーは共通*/
#top_index aside{ margin: 0; padding: 0; }
/*サムネタイトル*/
#top_index .title{ font-weight: bold; line-height: 1.5; }
/*サムネの日付と下の補足文(補足はページ上の最大サムネのみ)*/
#top_index .title,
#top_index .release_date,
#top_index .release_txt{
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}
#top_index .release_date,
#top_index .release_txt{
	color: #444444;
}
#top_index article a ,
#top_index article a:hover ,
#top_index article a:visited ,
#top_index article a:active,
.topindex_whatsnew_box a ,
.topindex_whatsnew_box a:hover ,
.topindex_whatsnew_box a:visited ,
.topindex_whatsnew_box a:active
{ color: #222; text-decoration: none; transition:0.1s;}

#top_index article a:hover .featured_image { opacity: 0.8;}

/*INDEX下部の背景*/
.area_bgcolor_white { width: 100%; background: #ffffff; }
.area_bgcolor_gray {
	width: 100%; 
	background-image: linear-gradient(180deg, rgba(223, 223, 223, 0),
	rgba(223, 223, 223, 0) 13.5%, rgba(223, 223, 223, 1) 13.5%);
}
/*一覧へボタン位置*/
.topindex_more_btn,
.topindex_more_btn2 { margin-right: auto; margin-left: auto; }
.topindex_more_btn { margin-top: 0.4em; margin-bottom: 0.4em;}
.topindex_more_btn2 { margin-top: 0.4em;}

/*メイン枠の上下余白*/
.per12_7-5_top{ padding-top: 12%; }
.per12_7-5_btm{ padding-bottom: 12%; }
.per8_5_top{ padding-top: 8%; }
.per8_5_btm{ padding-bottom: 8%; }
.per4_3_top{ padding-top: 4%; }
.per4_3_btm{ padding-bottom: 4%; }

@media print, screen and (min-width: 768px) {
.per12_7-5_top{ padding-top: clamp( 25px ,7.5% ,117px ); }
.per12_7-5_btm{ padding-bottom: clamp( 25px ,7.5% ,117px ); }
.per8_5_top{ padding-top: clamp( 25px ,5% ,78px ); }
.per8_5_btm{ padding-bottom: clamp( 25px ,5% ,78px ); }
.per4_3_top{ padding-top: clamp( 15px ,3% ,39px ); }
.per4_3_btm{ padding-bottom: clamp( 15px ,3% ,39px ); }
.topindex_more_btn,
.topindex_more_btn2{ margin-right: 0; margin-left: auto;}
}
@media print, screen and (min-width: 1560px) {
.area_bgcolor_gray { background-image: linear-gradient(180deg, rgba(223, 223, 223, 0),
	rgba(223, 223, 223, 0) 160px, rgba(223, 223, 223, 1) 160px);
}
}
/* サムネイル下のタイトルover表示(ニュース・したっけエリアの指定もこっち)
================================================= */
.title_over2_2,
.title_over3_2,
.title_over3_3,
.title_over4_3,
#top_area_news_box .title,
#sitakke_article_list .title,
#osusume_swiper .title{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
/* 任意の行数を指定 */
.title_over2_2 { -webkit-line-clamp: 2; }
.title_over3_2,.title_over3_3,
#sitakke_article_list .title { -webkit-line-clamp: 3; }
.title_over4_3,
#top_area_news_box .title{ -webkit-line-clamp: 4; }
#osusume_swiper .title{ -webkit-line-clamp: 2; }

@media print, screen and (min-width: 960px) {
.title_over3_2 { -webkit-line-clamp: 2; }
.title_over4_3,#top_area_news_box .title { -webkit-line-clamp: 3; }
#osusume_swiper .title{ -webkit-line-clamp: 1; }
}

/* 各見出しh1,h2,h3
================================================= */
/*見出し*/
.top_h2_20_32_b,
.top_h2_22_40,
.top_h2_22_40_w,
.top_h2_22_40_b,
.top_h2_24_48,
.top_h2_24_48_w,
.top_h2_24_48_b,
.top_h2_24_60,
.top_h2_24_60_w,
.top_h2_24_60_b,
.top_h3_21_40{
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: 0.05em;
}
.top_h2_20_32_b{ font-size: 2.0rem; }
.top_h2_22_40,.top_h2_22_40_w,.top_h2_22_40_b{ font-size: 2.2rem; }
.top_h2_24_48,.top_h2_24_48_w,.top_h2_24_48_b{ font-size: 2.4rem; }
.top_h2_24_60,.top_h2_24_60_w,.top_h2_24_60_b{ font-size: 2.4rem; }
.top_h3_21_40{ font-size: 2.1rem; color: #222222; }
.top_h2_center { text-align: center; }
.top_h2_22_40,.top_h2_24_48,.top_h2_24_60{ color: #d70b24; }
.top_h2_20_40_w,.top_h2_24_48_w,.top_h2_24_60_w{ color: #ffffff; }
.top_h2_20_32_b.top_h2_20_40_b,.top_h2_24_48_b,.top_h2_24_60_b{ color: #222222; }

/*ドット付き*/
.top_h2_20_32_dotte_b,
.top_h2_22_40_dotte,
.top_h2_22_40_w_dotte,
.top_h2_22_40_b_dotte,
.top_h2_24_48_dotte,
.top_h2_24_48_w_dotte,
.top_h2_24_48_b_dotte,
.top_h2_24_60_dotte,
.top_h2_24_60_w_dotte,
.top_h2_24_60_b_dotte{
	position:relative;
	padding-left:calc(0.25em + 10px); 
}
.top_h2_20_32_dotte_b::before,
.top_h2_22_40_dotte::before,
.top_h2_22_40_w_dotte::before,
.top_h2_22_40_b_dotte::before,
.top_h2_24_48_dotte::before,
.top_h2_24_48_w_dotte::before,
.top_h2_24_48_b_dotte::before,
.top_h2_24_60_dotte::before,
.top_h2_24_60_w_dotte::before,
.top_h2_24_60_b_dotte::before {
  content: '';
  display: block;
  position: absolute;
}
.top_h2_20_32_dotte_b::before{
  top: calc(0.2em + 5px);
  left :0px;
  width: 8px;
  height: 5px;
  border-radius: 2px;
}
.top_h2_22_40_dotte::before,
.top_h2_22_40_w_dotte::before,
.top_h2_22_40_b_dotte::before,
.top_h2_24_48_dotte::before,
.top_h2_24_48_w_dotte::before,
.top_h2_24_48_b_dotte::before,
.top_h2_24_60_dotte::before,
.top_h2_24_60_w_dotte::before,
.top_h2_24_60_b_dotte::before {
  top: calc(0.3em + 5px);
  left :0px;
  width: 8px;
  height: 5px;
  border-radius: 2px;
}
.top_h2_22_40_dotte::before,
.top_h2_24_48_dotte::before,
.top_h2_24_60_dotte::before{ background: #d70b24; }
.top_h2_22_40_w_dotte::before,
.top_h2_24_48_w_dotte::before,
.top_h2_24_60_w_dotte::before{ background: #ffffff; }
.top_h2_20_32_dotte_b::before,
.top_h2_22_40_b_dotte::before,
.top_h2_24_48_b_dotte::before,
.top_h2_24_60_b_dotte::before{ background: #222222; }

@media print, screen and (min-width: 960px) {
.top_h2_20_32_b{ font-size: 3.2rem; }
.top_h2_22_40,.top_h2_22_40_w,.top_h2_22_40_b{ font-size: 3.0vw; }
.top_h2_24_48,.top_h2_24_48_w,.top_h2_24_48_b{ font-size: 3.2vw; }
.top_h2_24_60,.top_h2_24_60_w,.top_h2_24_60_b{ font-size: 3.6vw; }
.top_h3_21_40{ font-size: 2.9vw; }
.top_h2_20_32_dotte_b::before{
  top: calc(50% - 5px);
  width: 12px;
  height: 7px;
  border-radius: 2px;
}
.top_h2_22_40_dotte::before,
.top_h2_22_40_w_dotte::before,
.top_h2_22_40_b_dotte::before,
.top_h2_24_48_dotte::before {
  top: calc(50% - 3px);
  width: 12px;
  height: 7px;
  border-radius: 3px;
}
.top_h2_24_48_dotte::before,
.top_h2_24_48_w_dotte::before,
.top_h2_24_48_b_dotte::before{
  top: calc(50% - 4px);
  width: 12px;
  height: 7px;
  border-radius: 3px;
}
.top_h2_24_60_dotte::before,
.top_h2_24_60_w_dotte::before,
.top_h2_24_60_b_dotte::before {
  top: calc(50% - 4px);
  width: 13px;
  height: 8px;
  border-radius: 3px;
}
}

@media print, screen and (min-width: 1405px) {
.top_h2_22_40,.top_h2_22_40_w,.top_h2_22_40_b{ font-size: 4.0rem; }
.top_h2_24_48,.top_h2_24_48_w,.top_h2_24_48_b{ font-size: 4.8rem; }
.top_h2_24_60,.top_h2_24_60_w,.top_h2_24_60_b{ font-size: 6.0rem; }
.top_h3_21_40{ font-size: 4.0rem; }
.top_h2_22_40_dotte::before,
.top_h2_22_40_w_dotte::before,
.top_h2_22_40_b_dotte::before,
.top_h2_24_48_dotte::before {
  top: calc(0.4em + 7px);
  width: 12px;
  height: 7px;
}
.top_h2_24_48_dotte::before,
.top_h2_24_48_w_dotte::before,
.top_h2_24_48_b_dotte::before{
  top: calc(0.4em + 7px);
  width: 12px;
  height: 7px;
}
.top_h2_24_60_dotte::before,
.top_h2_24_60_w_dotte::before,
.top_h2_24_60_b_dotte::before {
  top: calc(0.4em + 10px);
  width: 15px;
  height: 10px;
}
}
.bottom_3_4-5 { margin-bottom: 4.5% }
.bottom_3_4-5vw { margin-bottom: 4.5vw }
.bottom_3_5 { margin-bottom: 5% }

@media print, screen and (min-width: 768px) {
.bottom_3_4-5,
.bottom_3_4-5vw,
.bottom_3_5 { margin-bottom: 3% }
}

/*PCサイズ以上のみ表示*/
.vew_pc {display: none;}
@media print, screen and (min-width: 960px) {
.vew_pc{display: inline-block;}
}

/*スマホ・タブのみ表示*/
.vew_smp { display: inherit;}
@media print, screen and (min-width: 960px) {
.vew_smp { display: none;}
}

/*上部みどころ3つと下部スワイパー--------------------------------------------- */
.top_area_special{}
.area_bgcolor_pink_top{background-image: linear-gradient(180deg, rgba(255, 216, 217, 0),rgba(255, 216, 217, 0) 8%, rgba(255, 216, 217, 1) 8%);}
.area_bgcolor_pink_btm{background-image: linear-gradient(180deg, rgba(255, 216, 217, 1),rgba(255, 216, 217, 1) 32%, rgba(255, 216, 217, 0) 32%);}

.top_area_special_bigbox{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 3.0vw;
	grid-row-gap: 3.0vw;
}
.bigbox1 { grid-area: 1 / 1 / 2 / 3; }
.bigbox2 { grid-area: 2 / 1 / 3 / 2; }
.bigbox3 { grid-area: 2 / 2 / 3 / 3; }

.top_area_special .featured_image{
	padding: 56.25% 0 0;
	border-radius: 5px 5px 0 0;
}
.top_area_special_bigbox article{
	background: #fff;
	height: 100%;
	border-radius: 5px;
}
.bigbox1,.bigbox2,.bigbox3{ 
	background: #fff;
	height: 100%;
	border-radius: 5px;
}
#special_smallbox_swiper{ padding-top: calc(4% - 6px); }

.bigbox1 .title,
.bigbox1 .release_date,
.bigbox1 .release_txt,
.bigbox2 .title,
.bigbox2 .release_date,
.bigbox2 .release_txt,
.bigbox3 .title,
.bigbox3 .release_date,
.bigbox3 .release_txt,
#special_smallbox_swiper .title,
#special_smallbox_swiper .release_date{ width: calc(100% - 8%); }

.bigbox1 .release_txt,
#special_smallbox_swiper .release_txt{ display: none;}

/*タイトル*/.bigbox1 .title,
.bigbox1 .title{ 
	margin-top: 2.5%;
	font-size: clamp( 1.6rem,2.2vw,3rem );
	line-height: 1.4;
}
.bigbox2 .title,
.bigbox3 .title{ 
	margin-top: 2.5%;
	font-size: clamp( 1.5rem,1.8vw,1.8rem );
	line-height: 1.4;
}
#special_smallbox_swiper .title{
	margin-top: 2.5%; margin-bottom: 4%; font-size: clamp( 1.4rem,1.8vw,1.8rem );
}
/*日付と補足*/
.bigbox1 .release_date,
.bigbox1 .release_txt { 
	margin-top:0.4em; margin-bottom: 4%; font-size: clamp( 1.4rem,2.2vw,1.8rem );
}
.bigbox2 .release_date,
.bigbox3 .release_date{
	margin-top:0.4em; margin-bottom: 4%; font-size: clamp( 1.3rem,1.8vw,1.6rem );
}
#special_smallbox_swiper .release_txt { 
	margin-top:0.55em; margin-bottom: 6%; font-size: 1.5rem; }

@media print, screen and (min-width: 768px) {
/*枠組み*/
.top_area_special_bigbox{
	grid-template-columns: 2fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 3.0vw;
	grid-row-gap: 2.0vw;
}
.bigbox1 { margin-bottom: 0; grid-area: 1 / 1 / 3 / 2; }
.bigbox2 { grid-area: 1 / 2 / 2 / 3; }
.bigbox3 { grid-area: 2 / 2 / 3 / 3; }
	
#special_smallbox_swiper{ padding-top: clamp( 15px,4%,62px ); }
	
/*テキスト*/
.bigbox1 .title,
.bigbox1 .release_date,
.bigbox1 .release_txt{
	width: calc(100% - 6%);
}
.bigbox2 .title,
.bigbox2 .release_date,
.bigbox2 .release_txt,
.bigbox3 .title,
.bigbox3 .release_date,
.bigbox3 .release_txt {
	width: calc(100% - 7%);
}
#special_smallbox_swiper .title,
#special_smallbox_swiper .release_date,
#special_smallbox_swiper .release_txt{ width: calc(100% - 10%); }
	
.bigbox1 .release_txt,
#special_smallbox_swiper .release_txt{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
/*タイトル*/
.bigbox1 .title{ margin-top: 2%; }
#special_smallbox_swiper .title { margin-top: 4%; margin-bottom: 0; }
	
/*日付と補足*/
.bigbox1 .release_date,
.bigbox1 .release_txt { 
	margin-top:12px; margin-bottom: 4%;
}
.bigbox2 .release_date,
.bigbox3 .release_date{
	 margin-bottom: 3.5%;
}
#special_smallbox_swiper .release_txt { 
	margin-top:0.55em; margin-bottom: 6%; font-size: 1.5rem; }
	
.bigbox1 .release_date { margin-top:0.4em; margin-bottom: 0;}
.bigbox1 .release_txt { margin-top:0.4em; margin-bottom: 3%;}
}

@media print, screen and (min-width: 960px) {
.top_area_special .featured_image{ border-radius: 7px 7px 0 0; }
.bigbox1,.bigbox2,.bigbox3{ border-radius: 7px; }
.bigbox2 .title,.bigbox3 .title{ line-height: 1.5; }
}
@media print, screen and (min-width: 1556px) {
.top_area_special_bigbox{
	grid-column-gap: 50px;
	grid-row-gap: 40px;}
}

/*ニュースエリア
================================================= */
.top_area_news{
	background-color: #fff;
	border-radius: clamp( 20px, 2.8vw ,50px );
	padding: 7% 6%;
}
#top_area_news_box{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 5%;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.04);
}
#top_area_news_box article{ width: 47.85%; }
#top_area_news_box article:nth-child(2),
#top_area_news_box article:last-child{ display: none; }
#top_area_news_box .featured_image{ padding: 56.25% 0 0; }
#top_area_news_box .title{ margin-top:0.5em; font-size: 1.5rem; }

@media print, screen and (min-width: 520px) {
.top_area_news{ padding: 4% 5%; }
#top_area_news_box article{ width: 31%; }
#top_area_news_box article:nth-child(2) { display: block; }
}

@media print, screen and (min-width: 960px) {
#top_area_news_box{ margin-bottom: 3%; }
#top_area_news_box article{ width: 22%; }
#top_area_news_box article:last-child{ display: block; }
}

/*イベント・キャンペーン----------------------------------------------*/
#topindex_event_swiper{ margin-bottom: 4.5%; }

#topindex_event_swiper .title,
#topindex_event_swiper .release_date
{ width: calc(100% - 8%); }

#topindex_event_swiper .title { margin-top:2.5%; font-size: 1.5rem; }
#topindex_event_swiper .release_date {  margin-top:0.27em; font-size: 1.3rem; margin-bottom: 4%;}

@media print, screen and (min-width: 960px) {
#topindex_event_swiper .title { margin-top:2.5%; font-size: 1.8rem; }
#topindex_event_swiper .release_date { margin-top:0.55em; font-size: 1.5rem; margin-bottom: 5%;}
}

/*動画エリア(背景青グラデ)おすすめと配信----------------------------------------------*/
.top_area_video,
.top_area_stream{
	background-image: linear-gradient(180deg, rgba(41, 165, 199, 1) ,rgba(136, 216, 237, 1));
	border-radius: clamp( 20px, 2.8vw ,50px );
}
.top_area_video{ padding: 4% 5%; }
.top_area_stream{ padding: 7% 6%; }

@media print, screen and (min-width: 960px) {
.top_area_video { padding: 4% 5%; }
.top_area_stream { padding: 5% 5%; }
}
.top_video_box,
.top_stream_box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

/*おすすめ動画*/
.top_video_box .video{ width: 100%;}
#video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  margin: 0 auto;
  padding: 56.25% 0 0;
}
#video-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*おすすめ動画と配信・右サイド*/
.top_video_small,
.top_stream_small{
justify-content: space-between; }

.top_video_small/*smp非表示*/{ display: none;}
.top_stream_small/*smp非表示*/{ display: flex; flex-wrap: wrap; width: 100%; }

.top_video_small article,
.top_stream_small article{ 
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
}
/*配信*/
.top_stream_box .stream_title_info{ 
	width: 100%;
	color: #fff;
}
.stream_title_info p{ 
	padding: 5% 0;
	font-size:clamp( 1.4rem,1.6vw ,1.8rem );
}
.top_stream_small article{ width: 47.5%; overflow: hidden; }

.top_video_small article .movie_featured_image,
.top_stream_small article .movie_featured_image{
    position: relative;
    overflow: hidden;
	padding-left:100%;
	width: 100%;
	padding-top: 56.25%;
}
.movie_featured_image img {
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-color: none;
}
.platform_name:hover {text-decoration: underline;}
.platform_name:hover .platform_icon {opacity: 0.8;}

.top_movie_link:hover .movie_title {text-decoration: underline;}
.top_movie_link:hover img {opacity: 0.8;}

.article_box{ background: #fff; }

/*articleのテキスト*/
.top_video_small .movie_title,
.top_stream_small .movie_title,
.top_video_small .platform_name,
.top_stream_small .platform_name
{ width: 92%; margin-left: auto; margin-right: auto; }

.top_video_small .movie_title,
.top_stream_small .movie_title{
	font-weight: bold;
	font-size: 1.4rem;
}
.top_video_small .movie_title{ margin-top:4%; }
.top_stream_small .movie_title{ margin-top:2.5%; }

.platform_name{
	display: flex;
	align-items: center;
	color: #868686;
	font-size: 1.2rem;
	line-height: 1.2;
}
/*動画プラットフォームアイコン*/
.top_video_small .platform_name { margin-top: 0.4em; margin-bottom: 5%; }
.top_stream_small .platform_name { margin-top: 0.3em; margin-bottom: 4%; }

.platform_icon:hover{ transition:0.1s; opacity: 0.9;}

.platform_icon  {
	display: block;
	content: "　";
	width: clamp( 30px, 3vw ,50px );
	height: clamp( 30px, 3vw ,50px );
	border: 1px solid #c1c1c1;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #fff;
	border-radius: clamp( 15px, 1.5vw ,25px );
}
.platform_name p { margin-left: 0.4em; width: calc(77% - 0.4em); }
.platform_hbc_fanst { background-size: 94% auto; background-image: url("../../image/logo_hbcfanst.svg"); }
.platform_hbc_youtube { background-size: 94% auto; background-image: url("../../image/logo_hbc_youtube.svg"); }
.platform_tver { background-size: 80% auto; background-image: url("../../image/logo_tver.svg"); }

.button_hbcfanstream_pc,
.button_hbcfanstream_smp{
	width: clamp( 200px, 90% ,420px );
	margin: 5% auto 0;
	border: solid 1px #222222;
	background: #fff;
}
.button_hbcfanstream_pc:hover img,
.button_hbcfanstream_smp:hover img{ opacity: 0.8;}
.button_hbcfanstream_pc{ display: none; }

@media print, screen and (min-width: 768px) {
/*おすすめ動画*/	
.top_video_small/*smp非表示*/{ display: flex; }
.top_video_box .video { width: 62%; }
.top_video_small/*PC表示*/{ width: 33%; }
.top_video_small article{ width: 100%; }
.top_video_small article:last-child/*PC(小)非表示*/{ display: none; }
/*配信*/
.top_stream_box .stream_title_info{ width: 40%;}
.top_stream_small { width: 56%; }
.stream_title_info p{ padding: 5% 0 0; }
.button_hbcfanstream_pc{ display: block; }
.button_hbcfanstream_smp{ display: none; }
.platform_name p { margin-left: 0.6em; width: calc(77% - 0.6em); }
.top_video_small .movie_title{font-size: 1.4rem;}
}
@media print, screen and (min-width: 960px) {
.top_video_box .video, .top_video_small{ width: 47.5%; }
.top_video_small article{ width: 47.5%; }
.top_video_small article:last-child{ display: block; }
.top_stream_box .stream_title_info{ width: 41.5%;}
.top_stream_small { width: 53.5%; }
.top_video_small article{ width: 47.5%; }
.top_video_small .movie_title{ font-size: 1.6rem; }
.top_stream_small .movie_title{ font-size:clamp( 1.4rem ,1.4vw ,1.8rem ); }
.platform_name{ font-size: 1.3rem; }
}
/*上部お天気と情報カメラ*/
.top_area_wether_infocam{
	display: flex;
	justify-content: space-between;
}
.top_block_wether,
.top_block_infocam{
	display: flex;
	align-items: center;
	position: relative;
	width: 48.75%;
	padding: 1rem 1.2rem ;
	background: #ffffff;
	border: solid 1px #0f9ec2;
	border-radius: 1.2rem;
}
.top_block_wether h3{ width: 100%; background-image: url("../../image/icon_topindex_wether.svg") ,url("../../image/icon_btn_arrow_blue.svg"); }
.top_block_infocam h3{ width: 100%; background-image: url("../../image/icon_topindex_infocam.svg"),url("../../image/icon_btn_arrow_blue.svg"); }

.top_block_wether h3,
.top_block_infocam h3{
	box-sizing: border-box;
	margin-right: 2%;
	padding-left: clamp(2.4rem, 7.2vw, 3.8rem);
	background-size: clamp(2rem, 5.8vw, 2.8rem) auto, clamp(1.2rem, 2.5vw, 2.4rem) auto;
	background-repeat: no-repeat;
	background-position: left center , right center;
	font-size: clamp(1.4rem, 3.4vw, 1.6rem);
	color: #0f9ec2;
	font-weight: bold;
}
.top_block_wether ul,
.top_block_infocam ul{
	display: none;
	margin-right: 2%;
}
a.wether_infocam_btn {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
}
.nodisplay_smp{display: none;}

@media print, screen and (min-width: 768px) {
.nodisplay_smp{display:inherit;}
.top_block_wether,
.top_block_infocam{
	padding: 1% 1.5%;
	border-radius: 1.6vw;
}
.top_block_wether h3{ width: calc(26.75% + 28px); background-image: url("../../image/icon_topindex_wether.svg"); }
.top_block_infocam h3{ width: calc(21.75% + 28px); background-image: url("../../image/icon_topindex_infocam.svg"); }

.top_block_wether h3,
.top_block_infocam h3{
	box-sizing: border-box;
	margin-right: 2%;
	padding-left: 28px;
	background-size: 24px auto;
	background-repeat: no-repeat;
	background-position: left center;
	font-size: 1.6vw;
	color: #0f9ec2;
	font-weight: bold;
}
.top_block_wether ul{ width: calc(48% - 28px); }
.top_block_infocam ul{ width: calc(50% - 28px); }
.top_block_wether ul,
.top_block_infocam ul{
	display: flex;
	margin-right: 2%;
}
.top_area_wether_infocam ul li{
	width: 46%;
	max-width: 72px;
	margin-left: 6.4%;
	font-size: 0.9rem;
	text-align: center;
	line-height: 1;
}
.top_area_wether_infocam ul img{
	margin-bottom: 6%;
	border-radius: 3px;
}
.top_area_wether_infocam ul li:first-of-type{ margin-left: 0;}
.top_area_wether_infocam ul li:last-of-type{ display: none; }

.top_area_wether_infocam ul a:visited,
.top_area_wether_infocam ul a:active,
.top_area_wether_infocam ul a:hover,
.top_area_wether_infocam ul a:link{
	color: #0f9ec2;
}
a.wether_infocam_btn {
	display: block;
	position:inherit;
	width: 26.25%;
	height: inherit;
	min-width: 90px;
	box-sizing: border-box;
	padding: 4px 10px 4px 10px;
	background-color: #0f9ec2;
	background-image: url("../../image/icon_btn_arrow_w.svg"); background-size: 10px auto;
	background-repeat: no-repeat;
	background-position: right 10px center;
	border-radius: 19px;
	font-size: 1.1vw;
	font-weight: bold;
	color: #ffffff;
}
a.wether_infocam_btn:hover{
	background-color: #00c1ce;
	text-decoration: none;}
}

@media print, screen and (min-width: 1024px) {
.top_area_wether_infocam ul li{
	width: 31.2%;
	font-size: 1.0rem;
	margin-left: 3.2%;
}
.top_area_wether_infocam ul li:last-of-type{ display: block; }
}

@media print, screen and (min-width: 1280px) {
.top_block_wether h3,
.top_block_infocam h3{
	padding-left: 38px;
	background-size: 32px auto;
	font-size: 1.3vw;
	margin-right: 4%;
}
.top_block_wether h3{ width: calc(26.75% + 38px); }
.top_block_infocam h3{ width: calc(22.75% + 38px); }

.top_block_wether ul{ width: calc(60% - 38px); max-width: 265px;}
.top_block_infocam ul{ width: calc(63% - 38px); max-width: 289px;}
.top_area_wether_infocam ul li{ margin-right: 4%; }

a.wether_infocam_btn {
	max-width: 150px;
	padding: 6px 17px 6px 13px;
	background-size: 12px auto;
	background-position: right 13px center;
	border-radius: 19px;
	font-size: 1vw;
	letter-spacing: 0.04em;}
}

@media print, screen and (min-width: 1560px) {
.top_block_wether h3{ width:177px; }
.top_block_infocam h3{ width: 156px }
.top_block_wether h3,.top_block_infocam h3 { font-size: 2.2rem; }
.top_area_wether_infocam ul li { font-size: 1.2rem; }
a.wether_infocam_btn { font-size: 1.4rem; }
}

/* HBC制作番組（テレビ・ラジオ）
================================================= */
.topindex_h_tv,
.topindex_h_radio{
	position: relative;
	padding-left: calc(20px + 0.35em);
}
.topindex_h_tv::before,
.topindex_h_radio::before{
	position: absolute;
	content: " ";
	display: block;
	width: 20px;
	height: 22px;
	left: 0;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 20px auto;
}
.topindex_h_tv::before{ background-image:url("../../image/icon_topindex_tv.svg"); }
.topindex_h_radio::before{ background-image:url("../../image/icon_topindex_radio.svg"); }

#tv_swiper .swiper-slide,
#radio_swiper .swiper-slide{ padding: 3% 0; }

#tv_swiper .swiper-slide:hover,
#radio_swiper .swiper-slide:hover{
  transform: translateY(-2%);
  transition: 0.5s ease;
}

@media print, screen and (min-width: 960px) {
#tv_swiper .swiper-slide,
#radio_swiper .swiper-slide{ padding: 2rem 0; }

#tv_swiper .swiper-slide:hover,
#radio_swiper .swiper-slide:hover{
  transform: translateY(-1.5rem);
  transition: 0.5s ease; }
}

@media print, screen and (min-width: 960px) {
.topindex_h_tv,
.topindex_h_radio{ padding-left: calc(3.1vw + 0.35em); }
.topindex_h_tv::before,
.topindex_h_radio::before{ width: 3.1vw; height: 3.2vw; background-size: 3.1vw auto;}
}

@media print, screen and (min-width: 1404px) {
.topindex_h_tv,
.topindex_h_radio{ padding-left: calc(40px + 0.35em); }
.topindex_h_tv::before,
.topindex_h_radio::before{ width: 40px; height: 42px; background-size: 40px auto;}
}

/* おススメコンテンツ（sitakkeやHBCのIPなど）
================================================= */
.topindex_sitakke_box{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	padding: 5%;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.04);
}
.sitakke_title , #sitakke_article_list{ width: 47%; }
.sitakke_title p { font-size:clamp( 0.9rem,1.4vw,1.4rem); text-align: center; color: #828282; }
.sitakke_title p span { color: #4eb0df; }
.sitakke_title img { width: clamp( 120px, 94% ,307px ); margin: auto; padding: 8% 0 4% }
.sitakke_title a { margin: 0.4em auto; }

#sitakke_article_list {
	display: flex;
	justify-content: space-between; }
#sitakke_article_list article:nth-child(2),
#sitakke_article_list article:last-child { display: none; }

#sitakke_article_list article:first-of-type { position: relative; }
#sitakke_article_list article::before { 
	display: block;
	position:absolute;
	content: "最新情報";
	top: -0.6em;
	left: -0.6em;
	z-index: 10;
	width: 38px; 
	height: 38px; 
	padding: 8px;
	box-sizing: border-box;
	background-color: #68c6f2;
	font-size: 1.0rem;
	font-weight: bold;
	color: #fff;
	border-radius: 19px;
	line-height: 1.2;
	letter-spacing: 0.04em;
}
#sitakke_article_list .featured_image{ padding: 56.25% 0 0; }
#sitakke_article_list .title { font-size: 1.4rem; margin-top: 0.4em; }
#sitakke_article_list .release_date { display: none; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) {
.sitakke_title { width: 30%; }
#sitakke_article_list { width: 65%; }
#sitakke_article_list article { width: 48.75%; }
#sitakke_article_list article:nth-child(2) { display: block; }
#sitakke_article_list article::before { 
	top: -0.7em;
	left: -0.7em;
	width: 46px; 
	height: 46px; 
	padding: 10px;
	font-size: 1.2rem;
	border-radius: 24px; }
}

@media print, screen and (min-width: 960px) {
.topindex_sitakke_box{ padding: 4%;}
.sitakke_title{ width: 23%; }
.sitakke_title p { font-size:clamp( 1.1rem,1.0vw,1.6rem); text-align: center; color: #828282; }
#sitakke_article_list{ width: 72%; }
#sitakke_article_list article{ width: 30%; }
#sitakke_article_list article:last-child{ display: block; }
.topindex_sitakke_box{
	border-radius: 7px;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
}
#sitakke_article_list .title { font-size: 1.5rem; margin-top: 4.5%; margin-bottom: 0.55em; }
#sitakke_article_list .release_date { display: block; }
}
@media print, screen and (min-width: 1280px) {
#sitakke_article_list article::before { 
	top: -0.9em;
	left: -0.9em;
	width: 55px; 
	height: 55px; 
	padding: 12px;
	font-size: 1.45rem;
	border-radius: 28px;
}
}
/*HBCのIPスライダー*/
#osusume_swiper{ margin-bottom: 4.5%; }
#osusume_swiper .title { 
	width: calc(100% - 8%);
	margin-top:2.5%;
	margin-bottom: 4%;
	font-size: 1.5rem;
}
@media print, screen and (min-width: 960px) {
#osusume_swiper .title { width: calc(100% - 10%); }
#osusume_swiper .title { margin-top:4.5%; margin-bottom:6%; font-size: 1.8rem; }
}

/* 下部================================================= */
/* What's new (topindex only) HBCからのお知らせ
================================================= */
.topindex_whatsnew_box{
	width: clamp( 330px, 100% ,1164px );
	margin: 0 auto;
	padding:  clamp( 21px, 6% ,70px );
	background: #fff;
	border-radius: clamp( 25px , 3.2vw , 50px );
}
ul.topindex_whatsnew_list{
	width: 100%;
	height: 280px;
	overflow-y:scroll;
	border-top: 1px solid #dedede;
}
.topindex_whatsnew_list li a{ 
	display: flex;
	flex-wrap: wrap;
	padding: 3% 0;
	border-bottom: 1px solid #dedede;
	font-size: 1.6rem;
	line-height: 1.5;
}
.whats_new_day{ width: 100%; font-weight: bold; }
.whats_new_txt{ width: 100%; padding: 0.35em 0 0; }
.topindex_whatsnew_box a:hover { text-decoration: none; }
.topindex_whatsnew_box a:hover .whats_new_txt{ text-decoration: underline; }

@media print, screen and (min-width: 768px) {
.topindex_whatsnew_list li a{ flex-wrap: nowrap; padding: clamp( 9px,5%,26px ) 0; }
ul.topindex_whatsnew_list{ height: 240px; }
.whats_new_day{ width: clamp( 100px,14.25%,146px ); padding: 0 clamp( 9px,5%,51px ) }
.whats_new_txt{ width: clamp( 400px,70.75%,723px ); padding: 0 clamp( 9px,5%,51px ) 0 0; }
}

@media print, screen and (min-width: 960px) {
.topindex_whatsnew_list li a{ font-size: 1.8rem; }
}

/* SNS accounts(topindex only)
================================================= */
.topindex_sns_box{}
.topindex_sns_list{}

ul.topindex_sns_list {
	width: clamp( 300px, 90% ,768px );
	flex-wrap: wrap;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	padding: 2.5rem 0;
}
.topindex_sns_list li { margin-left: clamp( 25px, 2.5vw ,40px ); margin-bottom: 2rem;}
.topindex_sns_list li:first-child { margin-left:0; }
.topindex_sns_list li:last-child { margin-right:clamp( 25px, 2.5vw ,40px ); }
.topindex_sns_list li:hover{ filter: brightness(0) saturate(100%) invert(27%); }
.topindex_sns_list li.x_sns { width:40px; }
.topindex_sns_list li.fb { width:40px; }
.topindex_sns_list li.ig { width:40px; }
.topindex_sns_list li.line { width:40px; }
.topindex_sns_list li.yt { width:46px; }
.topindex_sns_list li.pococha { width:138px;}
.topindex_sns_box .common_btn_l_b{ margin: calc( -2rem + 0.4em ) auto 0.4em;}

@media print, screen and (min-width: 410px) {
.topindex_sns_list li:last-child { margin-right:0; }
}
@media print, screen and (min-width: 768px) {
.topindex_sns_list li { margin-bottom: 3rem;}
.topindex_sns_list li.x_sns { width:45px; }
.topindex_sns_list li.fb { width:45px; }
.topindex_sns_list li.ig { width:45px; }
.topindex_sns_list li.line { width:45px; }
.topindex_sns_list li.yt { width:52px; }
.topindex_sns_list li.pococha { width:157px; }
}

/* バナースペース
================================================= */
.topindex_banner_list{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	list-style: none;
	box-sizing: border-box;
	width: 90%;
}
.topindex_banner_list li{ max-width: 162px; margin:1% 1%; }
.topindex_banner_list li:last-child{ margin-right: 0; }
.topindex_banner_list li:hover img{ opacity: 0.8; }
.topindex_banner_list img{ border: solid 1px #d6d6d6; width: 100%; }

@media print, screen and (min-width: 960px) {
.topindex_banner_list{ justify-content:flex-start; }
.topindex_banner_list li{ margin:1% 1% 0 0; }
}

@media print, screen and (min-width: 1920px) {
.topindex_banner_list{ justify-content:space-between; }
}