@charset "utf-8";
/* CSS Document */

/* maki-nao.com (discography/) */



#cd-list {
	width: 100%;
	margin: 0 auto;
}
#cd-list img {
	margin-left: -20px;
}
#cd-title {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto 50px;
	padding-left: 10px;
	background-color: #CCF;
}
#cd-title h3 {
	line-height: 40px;
	font-size: 20px;
}
#cd-details div:nth-child(3) div {
	width: 350px;
	margin: 0 auto;
}
#cd-details div:nth-child(3) div h4 {
	width: 350pxt;
	padding-left: 0;
	text-align: left;
}
#cd-details button {
	padding: 8px 30px;
	margin: 30px 0 0 50px;
	background: #8252f4;
}
#cd-details li {
	padding-bottom: 6px;
	text-align: left;
}
#cd_rname {
	text-align: right;
}
.vc-pf {
	text-decoration: underline;
	text-decoration-color: #B3B3FF;
}
.pf {
	text-decoration: underline;
	text-decoration-color: #FFA4FF;
}
.jp-pos {
	margin-left: 22px;
}


/* ------------------------------ ◆ bootstrap media query (single) ◆ ---------------------------- */

/* ～575.98px */
 @media (max-width: 575.98px) {
#cd-list {
	width: 100%;
	margin: 0 auto;
}
#cd-list img {
	width: 100px;
	float: left;
	margin-right: 10px;
}
#cd-list h3 {
	font-size: 18px;
	margin-top: 10px;
}
#cd-list h4 {
	font-size: 16px;
}
#cd-list p {
	text-align: right;
	padding-right: 20px;
}
#cd-details {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto;
}
#cd-details h4 {
	font-size: medium;
	padding: 40px 0 0 40px;
}
#cd-details div:first-child {
	grid-column: 1;
	grid-row: 1;
	text-align: center;
}
#cd-details div:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
}
#cd-details div:nth-child(3) {
	grid-column: 1;
	grid-row: 3;
	padding-top: 30px;
}
#cd-details div:nth-child(3) ol {
	padding-left: 20px;
}
#cd-details div:last-child {
	grid-column: 1;
	grid-row: 4;
}
#cd-details div:first-child img {
	width: 100%;
	max-width: 400px;
}
#cd-details button {
	display: none;
}
#cd-details article {
	width: 90%;
	margin: 50px auto 0;
	padding: 20px;
	background: #F4F4FF;
	border-radius: 20px;
}
}

/* 576～767.98px */
 @media (min-width: 576px) and (max-width: 767.98px) {
}

/* 768～991.98px */
 @media (min-width: 768px) and (max-width: 991.98px) {
}

/* 992～1199.98px */
 @media (min-width: 992px) and (max-width: 1199.98px) {
}
/* 1200px～ */
 @media (min-width: 1200px) {
}

/* ------------------------------ ◆ bootstrap media query (multi-2) ◆ ---------------------------- */

/* ～767.98 */
 @media (max-width: 767.98px) {
}

/* 576～991.98px */
 @media (min-width: 576px) and (max-width: 991.98px) {
#cd-details {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 400px calc(100% - 400px);
	grid-template-rows: 404px auto auto;
}
#cd-details h4 {
	font-size: medium;
	padding: 40px 0 0 40px;
}
#cd-details div:first-child {
	grid-column: 1 / 2;
	grid-row: 1;
}
#cd-details div:nth-child(2) {
	grid-column: 2 / 3;
	grid-row: 1;
}
#cd-details div:nth-child(3) {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	padding-top: 30px;
}
#cd-details div:last-child {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
}
#cd-details article {
	width: 90%;
	margin: 50px auto 0;
	padding: 20px;
	background: #F4F4FF;
	border-radius: 20px;
}
}

/* 768～1199.98px */
 @media (min-width: 768px) and (max-width: 1199.98px) {
}

/* 992px～ */
 @media (min-width: 992px) {
#cd-title {
	border-radius: 10px;
}
#cd-details {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 400px calc(100% - 750px) 350px;
	grid-template-rows: 404px auto;
}
#cd-details h4 {
	font-size: medium;
	padding: 40px 0 0 40px;
}
#cd-details div:first-child {
	grid-column: 1;
	grid-row: 1 / 2;
}
#cd-details div:nth-child(2) {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
#cd-details div:nth-child(3) {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
#cd-details div:last-child {
	grid-column: 1 / 4;
	grid-row: 2 / 3;
}
#cd-details article {
	width: 90%;
	margin: 50px auto 0;
	padding: 20px;
	background: #F4F4FF;
	border-radius: 20px;
}
}

/* ------------------------------ ◆ bootstrap media query (multi-3) ◆ ---------------------------- */

/* ～991.98px */
 @media (max-width: 991.98px) {
}

/* 576～1199.98px */
 @media (min-width: 576px) and (max-width: 1199.98px) {
}

/* 768px～ */
 @media (min-width: 768px) {
}

/* ------------------------------ ◆ bootstrap media query (multi-4) ◆ ---------------------------- */

/* 576px～ */
 @media (min-width: 576px) {
#cd-list {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
#cd-list img {
	width: 160px;
	float: left;
	margin-right: 10px;
}
#cd-list h3 {
	font-size: 22px;
	margin-top: 40px;
}
#cd-list h4 {
	font-size: 18px;
}
#cd-list p {
	text-align: right;
	margin-top: 10px;
	padding-right: 20px;
}
}

/* ～1199.99px */
 @media (max-width: 1199.98px) {
}