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

.btn { color: #d4c700;background: #98001f url(../img/op.svg) 90% 50% no-repeat; background-size: 18px; border: 1px solid #000; box-shadow: 0 5px 0 #000;}
.btn:hover { background: #a72737 url(../img/op.svg) 90% 50% no-repeat; background-size: 18px; color: #d4c700; box-shadow: 0 3px 0 #000; }

.wrapper_body { position: relative; text-align: center;}

/*header
----------------------------------------------*/
.kv { position: absolute; top: 0; left: 0; z-index: -1;}
h1 { text-align: center;}
.head_list { display: flex; gap: .5em 1em; justify-content: center; flex-wrap: wrap; font-size: 2rem; background: #ffffff85; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: .5em 1em; width: 95%; max-width: 530px; margin: 0 auto; box-sizing: border-box; }
.price { font-size: 2.5rem; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;}
.price > strong { font-size: 4rem;}
.shop { font-size: 2rem; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;}
.shop_list { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin: .5em auto 3em;}

/*Introduction
----------------------------------------------*/
#m_intro > p:first-child { font-size: 3rem; color: #970013; margin-bottom: 1em;}

/*Character
----------------------------------------------*/
.name { position: relative; line-height: 1.4; padding: 0 1em; display: inline-block; top: 0; font-size: 4rem; margin-bottom: 1em;}
.name:before, .name:after { position: absolute; top: 0; content: ''; width: 8px; height: 100%; display: inline-block; }
.name:before { border-left: solid 1px black; border-top: solid 1px black; border-bottom: solid 1px black; left: 0; }
.name:after { content: ''; border-top: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black; right: 0; }
.name1 { font-size: 1.4rem;}
.name2 { font-size: 2.4rem;}
.voice { font-size: 1.4rem; width: 100%; max-width: 530px; margin: 0 auto 1em;}
#m_chara > ul { display: flex; justify-content: center; gap: .5em 1em; flex-wrap: wrap; font-size: 1.4rem; margin-bottom: 1em; width: 100%; max-width: 300px; margin: 0 auto 2em;}
.chara_info { width: 100%; max-width: 530px; margin: 0 auto 1em;}
.chara_info > dt { background: #d6dbdf; }
.chara_info > dd { text-align: left; margin-bottom: 1.5em;}
.chara_info > dd:last-child {margin-bottom: 0;}
.you { margin-top: 2em;}

/*TrackList
----------------------------------------------*/
#m_track > .list { width: 100%; max-width: 530px; margin: 0 auto 2em; text-align: left;}
#m_track > .list > dt { font-size: 2.4rem; border-left: 2px solid #a0a0a0; padding-left: .5em; margin-bottom: .2em;}
#m_track > .list > dt > span { font-size: 1.6rem; margin-right: 1em;}
#m_track > .list > dt > small { font-size: 1.6rem; margin-left: .5em;}
#m_track > .list > .netabare_btn { text-align: center; font-size: 1.2rem; background: #e4e4e4; padding: .5em 0; cursor: pointer; border-radius: 3px; margin-bottom: .5em;}
#m_track > .list > .netabare_btn:hover { background: #f8f8f8; transition: .5s;}
#m_track > .list > .hidden { display: none;}
#m_track > .list > .con { font-size: 1.2rem;}
#m_track > .list > .con > p { margin-bottom: .5em;}
#m_track > .list > .con > p:first-child { font-size: 1.6rem;}

/*castinterview
----------------------------------------------*/
#m_cast > .text1 { font-size: 1.8rem; line-height: 1.5em;}
#m_cast > .text1 > span { font-size: 1.4rem;}
#m_cast > .body { width: 100%; max-width: 530px; margin: 0 auto; text-align: left; }
#m_cast > .body > dt { border-bottom: solid 3px #c8c8c8; position: relative; margin: 2em 0 .5em; }
#m_cast > .body > dt:after { position: absolute; content: " "; display: block; border-bottom: solid 3px #000; bottom: -3px; width: 20%; }
#m_cast > .body > dd { font-size: 1.4rem;}

/*特典
----------------------------------------------*/
#m_bonus > h3,
#m_bonus > h4 { font-weight: normal;}
#m_bonus > h3 { position: relative; padding: 0 65px; text-align: center; font-size: 1.8rem; width: 100%; max-width: 530px; margin: 0 auto 1em; box-sizing: border-box; }
#m_bonus > h3:before { position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 1px; content: ''; background: #000; }
#m_bonus > h3 span { position: relative; padding: 0 1em; background: #fff; }
#m_bonus > h4 { font-size: 1.8rem; margin-bottom: 1em;}
#m_bonus > h4 > span { background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #edeac7 50%); padding: 0 .25em;}
#m_bonus > .text { width: 100%; max-width: 530px; margin: 0 auto; text-align: left; font-size: 1.2rem;}
#m_bonus > .shop_list { margin-top: 2em;}

/*Staff
----------------------------------------------*/
#m_staff { font-size: 1.6rem;}
.staff { margin-top: 5em;}
.staff > dt { font-size: 1.8rem;}
.staff > dd { margin-bottom: 2em;}
.staff > dd > small { margin-bottom: 1.4em;}
.staff a { color: #2968bf;}

/*グラデ枠
----------------------------------------------*/
.gradient_border { border: 1px solid transparent; border-radius: 20px; background: linear-gradient(white, white) padding-box, linear-gradient(45deg, #603512, #c89629, #faf290, #c89629, #603512) border-box; }

/*サブ用--------*/
.gradient_border { width: 95%; max-width: 800px; margin: 0 auto 3em; font-size: 1.6rem; padding: 50px; box-sizing: border-box;}
.gradient_border > p { margin-bottom: 1.5em;}
.gradient_border > p:last-child { margin-bottom: 0;}
.gradient_border > h2 { font-size: 3rem; font-weight: normal; margin-bottom: 1em; position: relative; display: inline-block; padding: 0 45px;}
.gradient_border > h2:before,
.gradient_border > h2:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 44px; height: 2px; background-color: black; -webkit-transform: rotate(-60deg); transform: rotate(-60deg);}
.gradient_border > h2:before { left:0;}
.gradient_border > h2:after { right: 0;}