@charset "UTF-8";

/*****************************************************************

    header

*****************************************************************/
header {
	width: 100%;
	background: #fff url(../image/bg-header.jpg) center top;
	background-size: auto 100%;
}
header h1 {
	width: 100%;
	max-width: 1220px;
	margin: 0 auto;
}


/*****************************************************************

    intro

*****************************************************************/
.intro {
	margin-top: 5px;
	padding: 4% 0;
	background: #2c8b23;
	color: #fff;
	text-align: center;
}
.intro h2, .intro p {
	width: 90%;
	max-width: 1220px;
	margin: 0 auto;
}
.intro h2 img {
	width: 90%;
	margin: 5px auto 3%;
}
.intro p.catch {
  font-size: 1.7rem;
}
.intro span.txt-bold {
  font-weight: bold;
}
.intro p br { display: none; }



/*****************************************************************

    main

*****************************************************************/
/* segment common */
.main article {
	margin: 10% 0;
	padding: 15px;
	border: 3px solid #212121;
}
article.ranking { box-shadow: 7px 7px 0 0 #fde15c; }
article.masterpiece { box-shadow: 7px 7px 0 0 #6bc5ee; }
article.recommend { box-shadow: 7px 7px 0 0 #8ccf5f; }
article.vogue { box-shadow: 7px 7px 0 0 #f1a3a3; }
article.memory { box-shadow: 7px 7px 0 0 #998ff8; }
article.onayami { box-shadow: 7px 7px 0 0 #8ccf5f; }
.main ul {
	margin-left: 2rem;
	list-style: disc outside;
}

/* segment h2 */
.main article h2 {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1%;
}
.main article h2 img.onair {
	width: 75px;
	margin: -31px 5px 0 -33px;
}
.main article h2 img:not(.onair) {
	width: auto;
	height: 2.4rem;
	margin-bottom: 5px;
}
.main article h2 div.join {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: -webkit-calc(100% - 50px);
	width: calc(100% - 45px);
}

/* segment h3・h4 balloon */
.balloon {
	display: inline-block;
 	position: relative;
	margin-bottom: 6px;
	padding: 0 8px;
 	border-radius: 5px;
	color: #fff;
}
.balloon::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 20px;
	bottom: -6px;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
}
article.ranking .balloon { background: #fcef5d; color: #212121; }
article.ranking .balloon::before { border-top: 6px solid #fcef5d; }
article.masterpiece .balloon { background: #4ea6ce; }
article.masterpiece .balloon::before { border-top: 6px solid #4ea6ce; }
article.recommend .balloon { background: #5bb120; }
article.recommend .balloon::before { border-top: 6px solid #5bb120; }

/* segment ranking */
article.ranking .flex { margin-top: -5px;  }
article.ranking h3 {
	margin-top: 20px;
	font-weight: bold;
}
article.ranking h3:not(.balloon) {
	padding: 0 8px;
	border-top: 2px dotted #212121;
	border-bottom: 2px dotted #212121;
	background: #fcef5d;
}
article.ranking h3:not(.balloon)::before {
	content: url('../image/ranking-crown.svg');
	margin-right: 3px;
}
article.ranking table {
	width: 100%;
	margin-top: 5px;
	font-weight: bold;
	line-height: 1.5;
}
article.ranking tr {
	display: block;
	margin-bottom: 5px;
}
article.ranking tr:nth-child(even) { background: #ececec; }
article.ranking th {
	width: 23px;
	padding: 0 5px;
	background: #fcef5d;
	vertical-align: middle;
}
article.ranking td { padding: 4px 7px; }
article.ranking .artist {
	display: block;
	font-size: 1.2rem;
	font-weight: normal;
}

/* segment masterpiece・recommend */
.select {
	margin-top: 15px;
	padding: 2%;
	border-top: 2px dotted #212121;
	border-bottom: 2px dotted #212121;
	text-align: center;
}
article.masterpiece .select { background: #d6f0f6; }
article.recommend .select { background: #def8cd; }
.select h3 {
	margin: 0 auto 5px;
	font-weight: bold;
}
.select h3:before, .select h3:after {
	content: '★';
	margin: 5px;
	color: #E7C72E;
}
.select .album, .select .music {
	display: inline-block;
	margin-bottom: 5px;
	padding: 0 10px;
	color: #fff;
	font-weight: bold;
}
.select .album { background: #53b6e3; }
.select .music { background: #66bd2b; }
.select .year {
	display: inline-block;
  font-size: 0.85em;
	font-weight: normal;
}
.select dd { text-align: left; } 
article.masterpiece h4, article.recommend h4 { margin-top: 20px; }

/* side */
.side section { margin-top: 15%; }
.side .col:first-child > section:first-child { margin-top: 0; }
.side section h2 { margin-bottom: 8px; }
.side section h2 img { width: auto; height: 2.8rem; margin: 0 auto; }
.side section ul.sns-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.side section ul.sns-list li {
	width: 50px;
	margin: 8px 16px 0;
}

/* button */
a.btn {
	display: block;
	padding: 0;
	color: #fff;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
}
.main a.btn {
	width: 14.5em;
	height: 38px;
	margin: 20px 0 5px auto;
	border-radius: 19px;
	line-height: 38px;
}
.side a.btn {
	width: 90%;
	max-width: 320px;
	height: 46px;
	margin: 15px auto 0;
	border-radius: 23px;
	line-height: 46px;
}
a.backnumber { background: #3D3D3D; }
a.backnumber:hover, a.backnumber:active { background: #000; }
a.radiko { background: #1295e3; }
a.radiko:hover, a.radiko:active { background: #0081D8; }
a.mail { background: #de415f; }
a.mail:hover, a.mail:active { background: #C90D4A; }


/*****************************************************************

    responsive

*****************************************************************/
@media  print, screen and (min-width: 480px) {
.intro h2 img { width: 75%; max-width: 400px; }
}

@media print, screen and (min-width: 640px) {
.intro { margin-top: 8px; }
.main article { margin: 8% 0; }
.main article h2 img.onair { width: 85px; margin: -33px 5px 0 -35px; }
.main article h2 img:not(.onair) { height: 2.75rem; }
}
@media print, screen and (min-width: 640px) and (max-width: 767px) {
.side { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; }
.side .col { width: 47.5%; }
.side .col > section:first-child { margin-top: 0; }
}

@media print, screen and (min-width: 768px) {
header h1 { width: 95%; }
.intro h2 img { width: 65%; max-width: 500px; }
}
@media print, screen and (min-width: 768px) and (max-width: 959px) {
.side section h2 { margin-left: -5%; margin-right: -5%; }
}

@media print, screen and (min-width: 960px) {
.intro p br { display: inline; }
.main article { padding: 20px; }
.main article h2 img.onair { width: 90px; margin: -37px 5px 0 -40px; }
}

@media print, screen and (min-width: 1280px) {
.intro { margin-top: 10px; padding: 50px 0; }
.intro h2 img { width: 55%; max-width: 650px; }
.main article { margin: 2.5% 0; }
.main article:not(.ranking) { width: 47.5%; }
.main article.ranking { width: 100%; }
.main article.ranking .flex { display: flex; justify-content: space-between; }
.main article.ranking .column { width: 48%; }
}