body { margin: 0; padding: 0; }

html, body { height: 100%; }

img { line-height: 0; font-size: 0; border: 0; }

a img, fieldset, img { border: 0; }

blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, ul, li, ol, p, pre, span, td, th { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, p, address { font-size: 100%; font-weight: normal; }

ul, li, ol { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }

a:link, a:visited { color: #000; text-decoration: none; }

a:hover, a:active { color: #333; text-decoration: none; }

.cf:before, .secBox:before, .cf:after, .secBox:after { content: " "; display: table; }

.cf:after, .secBox:after { clear: both; }

.cf, .secBox { *zoom: 1; }

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

#container { margin: 0 auto; text-align: center; font-size: 3.6vw; line-height: 160%; overflow-x: hidden; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; }

.pc { display: none; }

.cInner { width: 100%; margin: 0 auto; text-align: center; position: relative; padding: 0 5vw; }

.fit { width: 100%; height: auto; display: block; }

#content { overflow: hidden; padding-bottom: 25vw; }

/*-------------------------------------------------
	++ HOME MAIN 
-------------------------------------------------*/
#main { height: 175vw; color: #FFF; background: url("../img/main_sp.jpg") no-repeat center top; background-size: 100%; position: relative; }
#main .cInner { padding-top: 16vw; }
#main .mainDetail { margin-top: 10vw; }
#main .mainDetail .catch { font-size: 5vw; font-weight: 700; line-height: 160%; margin-bottom: 4vw; text-shadow: 0 0 15px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 0, 0, 0.7); }
#main .mainDetail .text { border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; padding: 4vw 0; font-size: 3.8vw; line-height: 170%; text-shadow: 0 0 15px black, 0 0 15px black; }

/*-------------------------------------------------
	++ HOME CONTENTS 
-------------------------------------------------*/
.section { position: relative; padding: 20vw 0 10vw 0; }
.section:before { content: ""; display: block; width: 100%; height: 53vw; position: absolute; top: 0vw; background-color: #FFF; }
.section .photo { padding-top: 27vw; }
.section .logo { position: absolute; top: 0; left: 4vw; }
.section .detail { text-align: left; padding-top: 5vw; }
.section .detail h2 { font-size: 5.6vw; font-weight: 900; margin-bottom: 5vw; line-height: 140%; padding-left: 8%; position: relative; }
.section .detail h2 span { display: block; width: 7%; position: absolute; top: 1vw; left: 0; }
.section .detail .text { font-size: 3.6vw; font-weight: 700; letter-spacing: 1px; line-height: 190%; }
.section .link { text-align: center; }
.section .link a { display: inline-block; text-align: center; width: 53vw; border-radius: 10vw; background-color: #FFF; padding: 3vw; font-size: 5vw; font-weight: 700; box-shadow: 4px 8px 0 0 rgba(0, 0, 0, 0.3); letter-spacing: 2px; border: 2px solid #FFF; background-color: #FFF; background-repeat: no-repeat; background-position: right 3vw center; background-size: 4vw; }
.section#campaignsong { background-color: #fed76e; }
.section#campaignsong:before { height: 63vw; }
.section#campaignsong .jt { position: absolute; top: 15vw; right: 8vw; width: 25%; }
.section#campaignsong .logo { width: 80%; }
.section#livemusic { background-color: #14416a; }
.section#livemusic .program { padding-top: 13vw; }
.section#livemusic .program ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.section#livemusic .program ul li { width: 100%; background-color: #E5E5E5; padding: 10vw 7vw; margin-bottom: 5vw; }
.section#livemusic .program ul li .pgLogo { margin-bottom: 8vw; }
.section#livemusic .program ul li .text { text-align: left; font-size: 3.8vw; line-height: 180%; margin-bottom: 5vw; }
.section#livemusic .program ul li .link a { background-image: url("../img/out_blue.png"); color: #14416a; }
.section#livemusic .logo { width: 95%; }
.section#livemusic .detail { color: #FFF; }
.section#onairarchive { background-color: #066a68; }
.section#onairarchive:before { height: 63vw; }
.section#onairarchive .photo { padding-top: 30vw; }
.section#onairarchive .logo { width: 70%; }
.section#onairarchive .detail { color: #FFF; }
.section#onairarchive .detail .text { margin-bottom: 6vw; }
.section#onairarchive .detail .link a { background-image: url("../img/link_green.png"); background-size: 2vw; color: #066a68; }
.section#metrosongs { background-color: #f29f8f; }
.section#metrosongs:before { height: 60vw; }
.section#metrosongs .photo { padding-top: 30vw; }
.section#metrosongs .logo { width: 57%; }
.section#metrosongs .detail { color: #FFF; }
.section#metrosongs .detail .text { margin-bottom: 5vw; }
.section#metrosongs .detail .link a { background-image: url("../img/out_pink.png"); color: #f29f8f; }
.section#handstogether { background-color: #ffab53; }
.section#handstogether:before { height: 72vw; }
.section#handstogether .photo { padding-top: 39vw; }
.section#handstogether .logo { width: 80%; }
.section#handstogether .detail { color: #FFF; }
.section#handstogether .detail h2 span { width: 8%; top: 0; }
.section#handstogether .detail .text { margin-bottom: 6vw; }
.section#handstogether .detail .link a { width: 68vw; background-image: url("../img/link_orange.png"); background-size: 2vw; color: #ffab53; }

/*-------------------------------------------------
	++ SUB MAIN 
-------------------------------------------------*/
#submain { height: 108vw; color: #FFF; background: url("../img/onairarchive/onairarchive_main_sp.jpg") no-repeat center top; background-size: 100%; position: relative; padding-top: 10vw; }
#submain h1 { width: 50%; margin: 0 auto; text-align: center; }
#submain h2 { padding: 0 10vw; margin-top: 5vw; }
#submain .mainDetail { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); }
#submain .mainDetail .text { font-size: 3.6vw; letter-spacing: 1px; line-height: 180%; }

body.handstogether #submain { background: url("../img/handstogether/handstogether_main_sp.jpg") no-repeat center top; background-size: 100%; }
body.handstogether #submain h2 { margin-top: 12vw; }

/*-------------------------------------------------
	++ SUB CONTENTS 
-------------------------------------------------*/
.subSection { padding-top: 17vw; }
.subSection .cInner { padding: 0; }
.subSection .secHead { margin: 0 auto; text-align: center; }
.subSection .secHead h2 { padding: 0 27vw; margin-bottom: 10vw; }
.subSection .secHead h2 span { display: block; color: #066a68; font-size: 4vw; margin-top: 2vw; }
.subSection .secHead .catList { position: relative; }
.subSection .secHead .catList ul { display: none; position: absolute; top: 17.7vw; left: 0; width: 100%; z-index: 1; }
.subSection .secHead .catList ul li { width: 100%; }
.subSection .secHead .catList ul li a { display: block; padding: 6vw; font-size: 5vw; position: relative; background-color: #e5e5e5; background-repeat: no-repeat; background-position: 5vw center; background-size: 8vw; border-bottom: 1px solid #1b1b1b; color: #1b1b1b; }
.subSection .secHead .catList ul li.all a { background-image: url("../img/onairarchive/caticon_all_off.png"); }
.subSection .secHead .catList ul li.music a { background-image: url("../img/onairarchive/caticon_music_off.png"); }
.subSection .secHead .catList ul li.enjoy a { background-image: url("../img/onairarchive/caticon_enjoy_off.png"); }
.subSection .secHead .catList ul li.relax a { background-image: url("../img/onairarchive/caticon_relax_off.png"); }
.subSection .secHead .catList ul li.know a { background-image: url("../img/onairarchive/caticon_know_off.png"); }
.subSection .secHead .catList.all ul li.all, .subSection .secHead .catList.music ul li.music, .subSection .secHead .catList.enjoy ul li.enjoy, .subSection .secHead .catList.relax ul li.relax, .subSection .secHead .catList.know ul li.know { display: none; }
.subSection .secHead .catList .catBtn { position: absolute; top: 0; right: 0; width: 15%; height: 17.7vw; display: block; z-index: 2; }
.subSection .secHead .catList .catBtn:after { content: ''; width: 4vw; height: 4vw; border: 0px; border-top: solid 1px #FFF; border-right: solid 1px #FFF; -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 50%; right: 5vw; margin-top: -2.4vw; }
.subSection .secHead .catList .catBtn.current:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 0vw; }
.subSection .secHead .catList.music .catBtn:after { border-color: #1b1b1b; }
.subSection .catTitle h3 { display: block; padding: 6vw; font-size: 5vw; position: relative; background-color: #FFF; background-repeat: no-repeat; background-position: 5vw center; background-size: 8vw; color: #FFF; }
.subSection .catTitle h3.all { background-color: #066a68; background-image: url("../img/onairarchive/caticon_all_on.png"); }
.subSection .catTitle h3.music { background-color: #fed76e; background-image: url("../img/onairarchive/caticon_music_off.png"); color: #1b1b1b; }
.subSection .catTitle h3.enjoy { background-color: #f57454; background-image: url("../img/onairarchive/caticon_enjoy_on.png"); }
.subSection .catTitle h3.relax { background-color: #14416a; background-image: url("../img/onairarchive/caticon_relax_on.png"); }
.subSection .catTitle h3.know { background-color: #82bd5a; background-image: url("../img/onairarchive/caticon_know_on.png"); }
.subSection .archiveLink { padding: 0 5vw; margin-bottom: 7vw; }
.subSection .archiveLink a { display: block; width: 100%; background: #e5e5e5 url("../img/onairarchive/out_green.png") no-repeat right 3vw bottom 3vw; background-size: 4vw; box-shadow: 1vw 1vw 0 0 #066a68; position: relative; border-radius: 4px; min-height: 22vw; padding: 3vw 3vw 3vw 23vw; }
.subSection .archiveLink a .circle { width: 16vw; height: 16vw; border-radius: 100%; background-color: #066a68; color: #FFF; padding: 4.6vw 0; font-size: 2.8vw; line-height: 120%; position: absolute; top: 3vw; left: 3vw; }
.subSection .archiveLink a .logo { width: 90%; height: 15vw; background: url(../img/onairarchive/logo_j-wave_news_off.png) no-repeat center center; background-size: 100% auto; }
.subSection .archiveLink a .logo img { opacity: 0; }
.subSection .catTitle { margin-bottom: 10vw; }
.subSection .secWrap { padding: 0 5vw; }

.secBox { border: 0.5vw solid #066a68; border-radius: 1vw; padding: 5vw; margin-bottom: 10vw; }
.secBox:nth-last-of-type(1) { margin-bottom: 0; }
.secBox .secLeft { text-align: left; }
.secBox .secLeft .photo img { display: block; width: 100%; height: auto; display: block; }
.secBox .secLeft .time { margin-top: 5vw; font-size: 4.4vw; }
.secBox .secLeft h3 { margin-top: 2vw; font-size: 5.2vw; }
.secBox .secLeft .listenBtn { margin-top: 5vw; }
.secBox .secLeft .listenBtn a { display: block; background: #066a68 url("../img/onairarchive/icon_timefree_off.png") no-repeat left 5vw center; background-size: 5vw auto; padding: 3vw 5vw; border-radius: 3vw; text-align: center; border: 4px solid #066a68; color: #FFF; font-size: 4.4vw; }
.secBox .secRight { text-align: left; margin-top: 5vw; }
.secBox .secRight .pgText { font-size: 4vw; margin-bottom: 5vw; }
.secBox .secRight .pgText b { color: #0099ff; }
.secBox .secRight .catList ul li { width: 49%; float: left; margin-right: 2%; margin-bottom: 3vw; }
.secBox .secRight .catList ul li:nth-of-type(2n) { margin-right: 0; }
.secBox .secRight .catList ul li a { display: block; border: 1px solid #1b1b1b; border-radius: 10vw; text-align: center; padding: 1vw; }
.secBox .secRight .catList ul li.music a { background: url("../img/onairarchive/caticons_music.png") no-repeat left 1vw center; background-size: 6vw auto; }
.secBox .secRight .catList ul li.enjoy a { background: url("../img/onairarchive/caticons_enjoy.png") no-repeat left 1vw center; background-size: 6vw auto; }
.secBox .secRight .catList ul li.relax a { background: url("../img/onairarchive/caticons_relax.png") no-repeat left 1vw center; background-size: 6vw auto; }
.secBox .secRight .catList ul li.know a { background: url("../img/onairarchive/caticons_know.png") no-repeat left 1vw center; background-size: 6vw auto; }
.secBox .secRight .snsBtn { font-size: 4vw; text-align: center; }
.secBox .secRight .snsBtn ul { display: inline-block; margin-top: 3vw; }
.secBox .secRight .snsBtn ul li { display: inline-block; width: 23%; margin: 0 1vw; }

/*-------------------------------------------------
	++ FORM 
-------------------------------------------------*/
#messageform .intro { line-height: 180%; margin-bottom: 10vw; font-size: 3.5vw; }
#messageform .message .message-subtitle { color: #ffab53; margin: 3vw 0; padding: 2vw; font-weight: 900; }
#messageform .message .sub-link { margin: 3vw 0; }
#messageform .message .sub-link a { margin: 0 3vw; color: #999; }
#messageform .message #form-notice { margin: 5vw 0; text-align: left; }
#messageform .message #form-notice .formAtt { margin-bottom: 3vw; }
#messageform .message table { width: 100%; border-collapse: collapse; }
#messageform .message table tr th { display: block; text-align: left; padding-bottom: 1vw; }
#messageform .message table tr td { display: block; text-align: left; padding-bottom: 5vw; }
#messageform .message table tr td input.fname { width: 45%; margin-bottom: 2px; vertical-align: middle; }
#messageform .message table tr td input.fage { width: 15%; margin-right: 3px; margin-bottom: 2px; vertical-align: middle; }
#messageform .message.thanks h2 { font-size: 6vw; font-weight: bold; margin-bottom: 3vw; }
#messageform .message.thanks .text { margin-bottom: 3vw; }

#hw-message input[type="text"], #hw-message input[type="password"], #hw-message input[type="tel"], #hw-message input[type="email"], #hw-message input[type="number"], #hw-message table textarea { width: 100%; border: 1px solid #ffab53; background: #fff; -webkit-appearance: none; padding: 3vw 2vw; font-size: 16px; border-radius: 0; height: 10vw; }

#hw-message input[type="text"], #hw-message input[type="password"], #hw-message input[type="tel"], #hw-message input[type="email"], #hw-message input[type="number"] { vertical-align: top; }

#hw-message table textarea { height: 23vw; }

.custom-selectbox { position: relative; }
.custom-selectbox .inner { position: relative; z-index: 0; height: 10vw; line-height: 32px; margin-top: -2px; border: 1px solid #ffab53; }
.custom-selectbox .inner:before, .custom-selectbox .inner:after { content: ""; position: absolute; display: block; }
.custom-selectbox .inner:after { top: 50%; right: 7px; margin-top: -3px; width: 0; height: 0; border: solid transparent; border-top-color: #ffab53; border-width: 8px 5px 0; }
.custom-selectbox select { position: absolute; border: 0; top: 0; left: 0; z-index: 1; width: 100%; height: 10vw; display: block; -webkit-appearance: none; background-color: transparent; font-size: 16px; padding: 0 2vw; }

input[type="radio"] { position: absolute; left: -10000px; margin-right: 10px; }
input[type="radio"] + label { padding: 0 0 0 6vw; display: inline-block; min-height: 5vw; background: url(../img/radio-off.png) no-repeat left center; background-size: 5vw 5vw; cursor: pointer; margin-right: 10vw; }
input[type="radio"]:checked + label { background: url(../img/radio-on.png) no-repeat left center; background-size: 5vw 5vw; cursor: pointer; }

#form-submit, #form-reset, #form-back { -webkit-appearance: none; position: relative; background: #4b4b4b; outline: none; min-height: 12vw; width: 47%; margin-right: 2vw; font-size: 16px; cursor: pointer; color: #fff; border-radius: 7vw; border: 0; }
#form-submit:after, #form-reset:after, #form-back:after { content: ""; background: url(../img/form_btn_rewrite_off.png) no-repeat left center; background-size: 20px 20px; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; margin-top: -10px; }

#form-submit { background: #ffab53; border: 2px solid #ffab53; }
#form-submit:after { background: url(../img/form_btn_send_off.png) no-repeat left center; background-size: 20px 20px; }

#form-back:after { display: none; }

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#jwaveFooter { background-color: #a0a0a0; color: #FFF; padding: 6vw 0; }
#jwaveFooter .commonSet { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; }
#jwaveFooter .commonSet .toHome { width: 60%; text-align: left; }
#jwaveFooter .commonSet .toHome a { width: 45%; display: block; }
#jwaveFooter .commonSet .footerLogo { width: 40%; text-align: right; }
#jwaveFooter .commonSet .copyRight { width: 100%; text-align: center; font-size: 3vw; margin-top: 8vw; }

/* overrides common styles */
#commonFooter { width: 100% !important; position: static !important; }

#commonFooterInner { padding: 15px 0 !important; width: 100% !important; background-color: #282828 !important; text-align: center !important; }

#commonFooter li { display: inline-block !important; float: none !important; }

#pageTop { position: fixed; bottom: 5vw; right: 5vw; width: 10vw; height: 10vw; }

/*inview
---------------------------------------------------------------------------*/
.up { overflow: hidden; position: relative; opacity: 0; bottom: -80px; }

.upstyle { opacity: 1; bottom: 0px; transition: 1s 0.3s; }