@charset "UTF-8";

/* Reset */
*,*:before,*:after {box-sizing: border-box;}

/* 見出し */
h1,h2,h3,h4,h5,h6 {margin:0; font-size: 1em;}

/* 段落 */
p {margin:0; line-height: 1.5;}

ul {list-style:none;}
ul,li {margin:0; padding:0;}

ol {padding:0; margin:0 0 1em 1.5em;}
ol li {margin-bottom:0.5em; line-height: 1.5;}
ol ol, ol ul {margin-top:1em;}

a {color:#fc446b; text-decoration:none; outline:none;}

img {vertical-align:middle;}

dl,dt,dd {margin:0;}

address,caption,em,th {font-style:normal;}

table {border-collapse: collapse; border-spacing: 0;}

figure {margin: 0;}

/* Fluid-img */
img {width:100%; height:auto;}

/* PC用のもは非表示 */
.pc_only {display:none;}


/* --------------------------------------------------
	ベース
-------------------------------------------------- */
html {color:#000; font-feature-settings: "palt"; font-family: 'Noto Sans JP', sans-serif; font-size: 4.267vw; font-weight: 700; line-height:1; height:100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: 100%;}/* 基準フォントサイズは16px */


/* BODY */
body {margin: 0; padding-bottom: 14vw;}




/* --------------------------------------------------
	ヘッダ（メインビジュアル）
-------------------------------------------------- */
.header {position: relative;}
.header .mv_youtube {position: absolute; right:3vw; bottom: 5.86vw; font-size: 2.7vw; color: #fff;}
.header .mv_youtube a {color: #fff; text-decoration: underline;}


/* --------------------------------------------------
	アンカーリンク
-------------------------------------------------- */
.anchor {background-color: #000; padding: 6.667vw 0; text-align: center;}
.anchor ul {display: inline-block;}
.anchor li {display: inline-block;}
.anchor li:before {content: ""; display: inline-block; width: 5vw; height: 5vw; background: url("../img/arrow_down.png") no-repeat; background-size: contain; margin-right: 1.333vw; vertical-align: middle;}
.anchor li:nth-child(2) {margin: 0 3vw;}
.anchor li img {height: 4vw; width: auto;}

.anchor.backnumber li:before {transform: rotate(-90deg);}

/* --------------------------------------------------
	番組概要
-------------------------------------------------- */
.about {background-color: #8cee7b; background-image: url("../img/about_bg.png"); background-size: 26.5vw; height: 140vw; overflow: hidden;}
.about .inner {position: relative; height: 100%;}
.about .dots {position: absolute; width: 130vw; top: 34vw; left: -15vw;}
.about h2 {position: absolute; width: 44vw; top: 5vw; left: 50%; transform: translateX(-50%);}
.about .what {position: absolute; width: 15.6vw; top: 40vw; left: 50%; transform: translateX(-50%);}
.about .disc {position: absolute; width: 98.8vw; top: 46vw; left: 0.6vw;}

/* --------------------------------------------------
	今回のイチバン
-------------------------------------------------- */
.current {background-color: #ffcd41; background-image: url("../img/current_bg.png"); background-size: 7vw; overflow: hidden;}
.current .inner {position: relative; padding: 12vw 4vw; text-align: center;}
.current .bom {position: absolute; top: 3vw; left: 5vw; width: 17.2vw;}
.current h2 {width: 62.133vw; margin: 0 auto 0.5em; position: relative; z-index: 1;}
.current h3 {font-size: 1.125em; font-weight: 900; margin-bottom: 0.75em;}
.current dl {line-height: 1.5; margin-bottom: 1em;}
.current dl:last-child {margin-bottom: 0;}
.current dt {background-color: #fff; padding: 0.5em 0.5em 0.5em 4em; text-align: left; position: relative; border: solid 3px #000; border-bottom: none; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.current dt:before {content: ""; display: block; width: 3.125em; height: 3em; background: url("../img/icon_one.png") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0.2em; transform: translateY(-50%);}
.current dd a, .current dd span {display: block; background-color: #000; color: #fff; padding: 0.5em; position: relative; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.current dd a:after {content: ""; display: block; width: 0.5em; height: 0.9em; background: url("../img/arrow_right.png") no-repeat; background-size: contain; position: absolute; top: 50%; right: 1em; transform: translateY(-50%);}

.current .comingsoon {font-size: 2em; color: #f00; font-weight: bold; margin: 2em auto;}

/* --------------------------------------------------
	過去の放送
-------------------------------------------------- */
.past {background-color: #51d6ff; background-image: url("../img/past_bg.png"); background-size: 13.33vw; overflow: hidden;}
.past .inner {position: relative; padding: 12vw 4vw 8vw;}
.past .bom {position: absolute; top: 4vw; right: 6vw; width: 17.2vw;}
.past h2 {width: 46vw; margin: 0 0 0.3em 30vw; position: relative; z-index: 1;}
.past .take {position: absolute; top: 1vw; left: -4vw; width: 52vw;}
.past h3 {font-weight: 900; line-height: 1.25; margin: 0 0 0.75em 34vw; position: relative; z-index: 1;}
.past .cont {background-color: #fff5ad; border: solid 3px #000; border-radius: 10px; padding: 5vw; position: relative; z-index: 1;}
.past .youtube {margin-bottom: 1.5em;}
.past .youtube iframe {width: 100%;}
.past figure.no_img {display: none;}
.past figure {margin-bottom: 1.5em;}
.past figure img {border-radius: 10px;}
.past .ttl {display: flex; justify-content: space-between; align-items: center; background-color: #fc446b; color: #fff; padding: 0.25em 0.5em; border-radius: 2px; margin-bottom: 0.75em;}
.past .ttl h4 {font-size: 1.5em; font-weight: 900;}
.past dl {font-weight: 900; margin-bottom: 1em;}
.past dt {color: #fc446b; margin-bottom: 0.5em;}
.past dd {line-height: 1.5;}
.past dd:last-child {margin-bottom: 0; line-height: 1.75;}
.past dd a {color: #000; text-decoration: underline;}
.past dd a:hover {color: #666;}

.past .cont p {width: 100%; color: #fc446b; font-size: 2em; font-weight: 900; text-align: center; padding: 2em 0;}

.past .btn a {display: block; background-color: #000; color: #fff; font-size: 1.125em; font-weight: 900; text-align: center; line-height: 2.8; margin-top: 1em; border-radius: 100px; position: relative;}
.past .btn a:after {content: ""; display: block; width: 0.5em; height: 0.9em; background: url("../img/arrow_right.png") no-repeat; background-size: contain; position: absolute; top: 50%; right: 1em; transform: translateY(-50%);}


/* --------------------------------------------------
	バックナンバー
-------------------------------------------------- */
.backnumber_ttl {width: 75%; margin: 6vw auto 0;}
.past .cont.backnumber {position: relative; margin-bottom: 1em;}
.past .cont.backnumber:last-child {margin-bottom: 0;}
.past .cont_num {position: absolute; top: 0.25em; left: 0.25em; font-size: 2em; font-weight: 900; color: #fc446b; text-shadow: -4px -4px 0 #fff,-4px 0 0 #fff,0 -4px 0 #fff,4px 4px 0 #fff,4px 0 0 #fff,0 4px 0 #fff,4px -4px 0 #fff,-4px 4px 0 #fff;}

.yukai img {width: 1em; margin: 0 0.1em;} /* ダイヤあンドユカイの星マーク */


/* --------------------------------------------------
	SNS
-------------------------------------------------- */
.snsblock {background-color: #ffadda; background-image: url("../img/sns_bg.png"); background-size: 10vw; overflow: hidden;}
.snsblock .inner {position: relative; padding: 16vw 4vw;}
.snsblock .bom {position: absolute; top: 8.26vw; left: 5vw; width: 17.2vw;}
.snsblock h2 {width: 28.67vw; margin: 0 0 1em 4em; position: relative; z-index: 1;}
.snsblock .take {position: absolute; z-index: 0; top: 3vw; right: 3vw; width: 45.33vw;}
.snsblock h3 {font-weight: 900; margin: 0 0 1.5em 2em; line-height: 1.5; position: relative; z-index: 1;}
.snsblock ul {margin-left: 0; text-align: center;}
.snsblock li {display: inline-block; width: 13vw; margin: 0 0.5em; position: relative; z-index: 1;}

/* --------------------------------------------------
	ボトムアンカーリンク
-------------------------------------------------- */
.btm_anchor {font-size: 1em; font-weight: 900; background-color: #000; padding: 1em 0; text-align: center;}
.btm_anchor a {color: #fff;}
.btm_anchor ul {display: inline-block;}
.btm_anchor li {display: inline-block;}
.btm_anchor li:before {content: ""; display: inline-block; width: 1.2em; height: 1.2em; background: url("../img/arrow_down.png") no-repeat; background-size: contain; transform: rotate(180deg); margin-right: 1.333vw; vertical-align: top;}
.btm_anchor li:nth-child(2) {margin: 0 0.5em;}

.btm_anchor.backnumber li:before {transform: rotate(-90deg);}

/* --------------------------------------------------
	フッター
-------------------------------------------------- */
.footer {background-color: #fff; padding: 1em; text-align: center; font-weight: 100;}
.footer_link {margin-bottom: 1em; font-size: 0.75em;}
.footer_link li {display: inline; margin: 0 1em;}
.footer_link img {width: auto; height: 1.5em;}
.footer_cr {font-size: 0.75em; }

/* --------------------------------------------------
	出演したい企業さまはこちら　出演企業を 紹介したい方 はこちら
-------------------------------------------------- */
.sp_wantrcm {position: fixed; left: 0; bottom: 0; box-shadow: 0 -3px 7px  rgb(0 0 0 / 30%); font-size: 3.2vw; display: flex; z-index: 100;}
.sp_wantrcm li a {display: block; width: 100%; padding: 4vw 0; text-align: center; color: #fff;}
.sp_wantrcm .wanted {width: 47vw; background-color: #2ac223;}
.sp_wantrcm .recommend {width: 53vw; background-color: #0068b6;}


/* --------------------------------------------------
	ページトップ
-------------------------------------------------- */
.backToTop {position:fixed; right:15px; bottom:14vw; width:50px; height:50px; cursor:pointer; z-index:100; transition: all 0.25s ease;}

/* --------------------------------------------------
	出演企業募集
-------------------------------------------------- */
.recruit {background-color: #8ce2fd; background-image: url("../img/mv_bg_sp.png"); background-repeat: no-repeat; background-size: cover; text-align: center;}
.recruit .inner {padding: 10vw 4vw;}
.recruit h2 {width: 14em; background-image: url("../img/mv_bom_sp.png"); background-repeat: no-repeat; background-size: 14em 4em; background-position: center; color: #fc446b; font-size: 1.4em; margin: 0 auto 1em; padding: 1.5em 0;}
.recruit h2 span {margin-left: 0.5em;}
.recruit h3 {font-size: 1.2em; margin-bottom: 1em;}
.recruit h4 {font-size: 1.1em; margin-bottom: 0.5em;}
.recruit p {line-height: 1.75; font-weight: 500;}
.recruit p span {display: inline-block; margin-left: 0.25em;}
.recruit a {text-decoration: underline;}

/* --------------------------------------------------
	 768px〜　タブレット
-------------------------------------------------- */
@media print, screen and (min-width : 768px) {

html {font-size: 16px;}
	
	body {padding-bottom: 0;}

.pc_only {display: block;}
.sp_only {display: none;}

/* HOVER */
a:hover {color:#fff94e; transition: all 0.25s ease;}
a:hover img {opacity: 0.75; transition: all 0.25s ease;}

/* --------------------------------------------------
	ヘッダ（メインビジュアル）
-------------------------------------------------- */
.header {background-color: #8ce2fd; background-image: url("../img/mv_bg.png"); background-repeat: no-repeat; background-size: cover; overflow: hidden;}
.header .blue_bar {position: absolute; width: 100%; height: 24.7%; background-color: #0068b6; bottom: 0;}
.header .inner {position: relative; width: 100%; height: 56.25vw;}
.header h1 {position: absolute; width: 74.3%; top: -0.5%; left: 0.97%;}
.header .mv_take {position: absolute; width: 51.32%; bottom: -1.1%; right: -5.42%;}
.header .rsc_photo {position: absolute; width: 46.6%; right: 0.7%; bottom: -14.2%;}
.header .rsc_junior {position: absolute; width: 12.5%; right: 16.5%; bottom: 1.73%;}
.header .mv_logo {position: absolute; width: 19.4%; left: 0.7%; bottom: 1.73%;}
.header .mv_next_ttl {position: absolute; width: 24.6%; left: 24%; bottom: 16%;}
.header .mv_next_date {position: absolute; left: 21%; bottom: 9%; font-size: 2.78vw; color: #FFFF00;}
	.header .mv_next_date span {font-size: 0.75em;}
.header .mv_youtube {right: auto; left: 23.5%; bottom: 3.7%; font-size: 1.25vw;}

/* --------------------------------------------------
	アンカーリンク
-------------------------------------------------- */
.anchor {padding: 2.7vw 0;}
.anchor li:before {width: 4vw; height: 4vw; margin-right: 0.7vw;}
.anchor li img {height: 2.36vw;}

/* --------------------------------------------------
	番組概要
-------------------------------------------------- */
.about {height: 60vw; max-height: 700px; background-size: auto;}
.about .inner {max-width: 1040px; height: 100%; padding: 0 1.92%; margin: 0 auto;}
.about .dots {width: 84%; top: 0; left: 25.48%;}
.about h2 {width: 31.73%; top: 7.63%; left: 2%; transform: none}
.about .what {width: 13.56%; top: 12.37%; left: 27.69%; transform: none;}
.about .disc {width: 62.5%; top: 14%; left: 35.57%;}

/* --------------------------------------------------
	次回のイチバン
-------------------------------------------------- */
.current {background-size: auto;}
.current .inner {max-width: 1040px; padding: 80px 1.92%; margin: 0 auto;}
.current .bom {top: 21px; left: 21.5%; width: 11.15%;}
.current h2 {width: 40.673%; margin: 0 auto 1em; position: relative; z-index: 1;}
.current h3 {font-size: 1.75em;}
.current .item {display: flex; justify-content:center; flex-wrap: wrap;}
.current dl {width: 49%; max-width: 472px; font-size: 1.25em;}
.current dl:first-child {margin-right: 1%;}
.current dl:nth-child(2) {margin-left: 1%;}
.current dt {padding: 1em 0.5em 1em 5em; border: solid 6px #000; border-bottom: none; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.current dt:before {width: 4.25em; height: 4em;}
.current dd a, .current dd span {padding: 1em 0.5em;}
.current dd a:after {width: 0.4em; height: 0.73em; right: 0.75em;}
.current dd a:hover {color: #fff94e;}

.current .comingsoon {font-size: 3em;}

/* --------------------------------------------------
	過去の放送
-------------------------------------------------- */
.past {background-size: auto;}
.past .inner {max-width: 1040px; padding: 96px 1.92% 80px; margin: 0 auto;}
.past .bom {top: 43px; right: 26.5%; width: 11.15%;}
.past h2 {width: 31%; margin: 0 auto 1em;}
.past .take {top: 2px; left: -2%; width: 40%;}
.past h3 {font-size: 1.5em; margin: 0 0 0.75em 35%;}
.past .cont {border: solid 5px #000; border-radius: 20px; padding: 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.past .cont .visual {width: 100%; height: 100%; display: flex; justify-content: space-between; margin-bottom: 20px;}
.past .youtube, .past figure {margin-bottom: 0; width: calc(50% - 10px);}
.past .youtube iframe {height: 100%;}
.past figure.no_img {display: block;}
.past .data {width: 100%; display: flex; flex-wrap: wrap;}
.past .ttl {width: 100%; border-radius: 4px;}
.past .data dl:nth-of-type(2) {margin: 0 30px;}

.past .btn a {width: 480px; margin: 2em auto 0; font-size: 1.375em;}
.past .btn a:hover {color: #fff94e;}

/* --------------------------------------------------
	バックナンバー
-------------------------------------------------- */
.backnumber_ttl {width: 100%; max-width: 1040px; margin: 0 auto; text-align: right; position: relative;}
.backnumber_ttl h1 {position: absolute; top: 20px; right: 10px; width: 27%; max-width: 260px;}
.past .cont.backnumber {margin-bottom: 30px;}

/* --------------------------------------------------
	SNS
-------------------------------------------------- */
.snsblock {background-size: auto;}
.snsblock .inner {max-width: 1040px; padding: 120px 1.92% 80px; margin: 0 auto;}
.snsblock .bom {top: 68px; left: 31.16%; width: 11.15%;}
.snsblock h2 {width: 19.3%; margin: 0 auto 1em;}
.snsblock .take {width: 294px; right: 0; top: auto; bottom: 0;}
.snsblock h3 {font-size: 1.5em; margin: 0 0 2em; text-align: center; position: relative; z-index: 1;}
.snsblock h3 br {display: none;}
.snsblock ul {margin-left: 0; text-align: center;}
.snsblock li {width: 9.6%; margin: 0 7px;}

/* --------------------------------------------------
	ボトムアンカーリンク
-------------------------------------------------- */
.btm_anchor {font-size: 1.5em;}
.btm_anchor a {color: #fff;}
.btm_anchor a:hover {color: #fff94e;}
.btm_anchor li:nth-child(2) {margin: 0 2em;}
	
/* --------------------------------------------------
	フッター
-------------------------------------------------- */
.footer {font-size: 0.875em; padding: 2em;}
.footer_link {font-size: 1.25em;}
	
/* --------------------------------------------------
	FIXED BTN
-------------------------------------------------- */
.fixed_btn {position: fixed; bottom: 20px; right: 10px; z-index: 100;}

/* --------------------------------------------------
	出演したい企業さまはこちら　出演企業を 紹介したい方 はこちら
-------------------------------------------------- */
.pc_wantrcm {margin-bottom: 10px; transition: all 0.25s ease;}
.pc_wantrcm li {width: 10vw; margin-bottom: 10px;}

/* --------------------------------------------------
	ページトップ
-------------------------------------------------- */
.backToTop {position: relative; right: auto; bottom: auto; width:8vw; height:8vw; margin: 0 auto;}

/* --------------------------------------------------
	出演企業募集
-------------------------------------------------- */
.recruit .inner {padding: 40px; display: flex; justify-content: center; align-items: center;}
.recruit h2 {font-size: 24px; width: 280px; height: 216px; background-size: contain; padding: 78px 0 0; margin: 0; line-height: 1.5;}
.recruit h2 span {display: block; margin-left: 0;}
.recruit .contact {margin-left: 40px; text-align: left;}
}

/* --------------------------------------------------
	 1024px〜　タブレット横・PC
-------------------------------------------------- */
@media print, screen and (min-width : 1024px) {
/* --------------------------------------------------
	過去の放送
-------------------------------------------------- */
.past .cont .visual {width: calc(70% - 20px);}
.past .youtube, .past figure {width: calc(50% - 10px);}
.past .data {width: 30%; display: block;}
.past .data dl {margin: 0 0 1em !important;}
.past h3 {margin: 0 0 2.75em 0; text-align: center;}
.past h3 br {display: none;}
	
/* --------------------------------------------------
	出演したい企業さまはこちら　出演企業を 紹介したい方 はこちら
-------------------------------------------------- */
.pc_wantrcm li {width: 120px;}

/* --------------------------------------------------
	ページトップ
-------------------------------------------------- */
.backToTop { width:90px; height:90px;}


}


/* --------------------------------------------------
	 1440px〜　PC
-------------------------------------------------- */
@media print, screen and (min-width : 1440px) {

/* --------------------------------------------------
	ヘッダ（メインビジュアル）
-------------------------------------------------- */
.header .inner {width: 1440px; height: 810px; margin: 0 auto;}
.header .mv_next_date {font-size: 40px;}
.header .mv_youtube {font-size: 18px;}

/* --------------------------------------------------
	アンカーリンク
-------------------------------------------------- */
.anchor {padding: 38px 0;}
.anchor li:before {width: 60px; height: 60px; margin-right: 10px;}
.anchor li img {height: 34px;}
.anchor li:nth-child(2) {margin: 0 54px;}



}