@charset "UTF-8";

/* layout
----------------------------- */
.co_container_box_inner {
width: 965px;
margin: 0 auto;
}
.contents_right {
width: 770px;
float: right;
padding-bottom: 10px;
background: url(/pcc/N/special/230607_music/images/pattern.png),linear-gradient(#91b7ef,#e932bb);
background-size: contain;
}
.contents_right * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* login
----------------------------- */
.term_text {
padding: 6px;
background: #1e1e40;
}
.term_text p {
color: #fff;
font-size: 22px;
font-weight: bold;
text-align: center;
}
.login {
margin: 20px 60px;
text-align: center;
background: #fff;
padding: 30px;
border: 1px solid #d00;
}
.login p {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.login a {
display: inline-block;
width: 240px;
height: 46px;
line-height: 48px;
background: #d00;
color: #fff;
font-size: 24px;
font-weight: bold;
border-radius: 6px;
margin: 0 10px;
text-decoration: none;
}
.login a:hover {
opacity: 0.8;
}

/* common
----------------------------- */
.imgBlock {
width: 100%;
text-align: center;
}
.imgBlock.title {
margin: 0 auto 20px;
}
.imgBlock a {
display: block;
}
.imgBlock img {
width: 100%;
max-width: 770px;
height: auto;
}
.underline {
text-decoration: underline;
text-underline-position: under;
text-decoration-line: underline;
text-decoration-skip-ink: none;
}
.indent_1em {
padding-left: 1em;
text-indent: -1em;
}

/* header
--------------------------------------- */
.head_area {
margin: 0 auto;
}
.head_area img {
width: 770px;
height: 320px;
}
.head_area .lead_text {
margin-bottom: 18px;
padding: 10px 0 10px;
background: #000;
line-height: 1.2;
text-align: center;
font-weight: bold;
font-size: 16px;
color: #fff;
}

/* toplead
----------------------------- */
.toplead {
margin: 0 auto 40px;
}

/* title_area
----------------------------- */
.title_area .contents {
margin: 0 60px 40px;
padding: 20px;
border: 5px solid #fff;
background: rgb(255 255 255 / 55%);
}
.title_area .contents:last-of-type {
margin: 0 60px 15px;
}
.title_area .text_box {
width: 100%;
}
.title_area .title_name {
background: #1e1e40;
color: #fff;
font-weight: bold;
padding: 8px 7px;
font-size: 24px;
line-height: 27px;
text-align: left;
}
.title_area .title_name a {
color: #fff;
}
.title_area .coupon {
text-align: left;
}
.title_area .coupon img {
width: 43%;
max-width: 400px;
height: auto;
}
.title_area .thum_box_inner {
display: flex;
justify-content: space-between;
width: 100%;
margin: 15px auto 8px;
text-align: center;
}
.title_area .thum_box {
width: 32%;
}
.title_area .thum_box a {
display: block;
}
.title_area .thum_box img {
width: 100%;
max-width: 300px;
}
.title_area .sale {
height: 26px;
margin: 0 auto;
background: #fb4646;
line-height: 26px;
font-size: 16px;
color: #fff;
}
.title_area .copy_title {
font-size: 12px;
text-align: left;
}
.title_area .comment {
text-align: left;
font-size: 16px;
line-height: 1.3;
}
.title_area .comment_title {
display: block;
font-weight: bold;
}
.title_area .btn_box {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 15px;
}
.title_area .btn_box a {
display: inline-block;
}
.title_area .free_btn {
margin-right: 20px;
}
.title_area .free_btn img,.title_area .tweet_btn img {
width: 100%;
height: auto;
}
.title_area .addmanga_text {
margin-bottom: 40px;
}
.title_area .addmanga_text img {
width: 100%;
height: auto;
}
.title_area .attention_text {
font-size: 14px;
line-height: 1.4;
margin: 0 60px 30px;
}


/* questionnaire_area
----------------------------- */
.questionnaire_area {
background: #1e1e40;
padding: 40px;
}
.questionnaire_area img {
width: 100%;
height: auto;
}
.questionnaire_area .questionnaire_bnrarea {
display: flex;
justify-content: space-between;
margin-top: 12px;
}
.questionnaire_area .questionnaire_bnrarea a {
width: 48%;
height: auto;
}
.questionnaire_area .questionnaire_bnrarea img {
width: 100%;
height: auto;
}

/* twcam_area
----------------------------- */
.twcam_area {
margin: 40px 60px;
padding: 10px;
border: 4px solid #fff;
background: rgb(255 255 255 / 55%);
}
.twcam_area .twcam_area_inner img {
width: 100%;
height: auto;
}


/* detail_area
----------------------------- */
.detail_area {
margin: 0 60px;
background: #fff;
text-align: left;
}
.detail_area p {
padding: 0 10px;
font-size: 16px;
}
.detail_area p.indent_1em {
padding: 0 10px 0 24px;
text-indent: -14px;
}
.detail_title {
height: auto;
padding: 8px 5px;
background: #1e1e40;
line-height: 32px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #fff;
}
.detail_blocktitle {
font-size: 18px;
font-weight: bold;
}
.detail_area_block {
padding: 15px;
}
.detail_area_block:last-of-type {
padding: 15px 15px 25px;
}
.detail_area_block.couponcan .detail_blocktitle{
border-top: 3px solid #1e1e40;
padding-top: 25px;
padding-bottom: 3px;
}
.detail_contents{
background: #fff;
line-height: 1.4;
text-align: left;
color: #333;
}
.detail_contents dt{
font-size: 18px;
font-weight:bold;
}
.detail_contents dd{
font-size: 16px;
}
.detail_contents dd + dt {
margin-top: 10px;
}
.detail_scroll {
margin: 8px auto 0;
padding: 0 10px;
border: 1px solid #333;
width: 95%;
height: 120px;
overflow: scroll;
overflow-x: hidden;
}
.detail_scroll dt {
font-size: 14px;
font-weight: bold;
margin: 10px 0 3px;
}
.detail_scroll dd {
font-size: 14px;
line-height: 1.3;
}

/* btn_areas(sns)
----------------------------- */
.btn_areas {
margin: 10px;
}
.btn_areas img:hover {
opacity:0.7;
}

/* end
----------------------------- */
.end_area {
margin: 30px auto;
text-align: center;
}
.end_area p {
font-size: 24px;
font-weight: bold;
color: #eb141b;
}