@charset "utf-8";

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);

/*
	font-family:"FontAwesome";
	font-family:"Font Awesome 5 Free";
*/


/*========================================
 Base／固定
========================================*/
#header_group, #footer_group {min-width:1080px;}
#special_content *, #top-wrap * {box-sizing:border-box;}
#special_content {margin:0 auto;}
#top-wrap section {background:transparent;}
.mainBanner img {vertical-align:bottom;}
.note{
	width:1000px;
    margin:2rem auto 1rem;
	line-height:1.4;
}

/* SP用 */
/*#top-wrap {font-size:var(--14px);}*/
#top-wrap section{
    width:100%;
    margin:0 auto;
}
#top-wrap section#corner_sphone_banner {width:100%;}
div.sphone_banner img{
    width:100%;
    vertical-align:bottom;
}
/*#product-detail-wrap {font-size:var(--14px);}*/
section p{
    margin: 0;
    padding:0;
 }


/*===== display:none =====*/
/* PC用 */
#special_content .title, .nav_separate, #special_content title_in, .pagetop {display:none;}
.special_contents_wrap + br, #top-wrap #corner_main_text h2 {display:none;}

/* SP用 */
#corner_name, #corner_sub_text_title p a + br {display:none;}


/*===== 商品情報 =====*/
#related_products ul.product_horizontal_list{
	width:1000px;
    margin:0 auto;
}
#related_products ul.product_horizontal_list li{
	background:#fff;
    width:calc((100% - 60px )/ 4);
    height:auto !important;
    margin:30px 20px 20px 0;
    padding:0.5rem 1rem;
	border:1px solid #e8e8e8; /*商品 枠色*/
}
#related_products ul li:nth-of-type(4n) {margin-right:0;}
.product_horizontal_list li{
    background:#fff;
    border:1px solid #e8e8e8;
}
#special_content .fltCheckboxItem{
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#related_products ul li .item_list_class{
	top:-30px;
	left:0;
    width:100%;
}
#related_products ul li .item_list_thumb {height:auto;}
#related_products ul li h3{
    font-size:var(--15px);
    font-weight:normal;
    line-height:1.6;
    /* 3点リーダー */
    overflow:hidden;
    display:-webkit-box;
    text-overflow:ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
#related_products ul li .price{
	margin:0.5rem 0;
    font-size:var(--15px);
}
#related_products ul li .item_list_status, #related_products ul li .release {font-size:var(--13px);}

.item_checkbox {cursor:pointer;}
#special_content .item_checkbox {top:346px !important;}
.v_checkbox:checked + .item_checkbox:before{
	position:relative;
    top:-2px;
    right:-2px;
}


/*====== 〇〇ページへ ======*/
.add_cart_btn_bulk {border-radius:5px;}

/* SP用 */
#top-wrap .itemsList {margin:0 0 20%;}
#top-wrap .itemsList li{
	margin:1rem auto;
    padding:0.5rem;
    border:1px solid #eee;
}
#top-wrap .itemsList li div{
    width:100%;
    height:100%;
    padding-left:150px !important;
    box-sizing:border-box !important;
}
#top-wrap .itemsList li .img{
    width:140px;
    margin:0 5px 0 0 !important;
    border:1px solid #f0f0f0;
}
#top-wrap .itemList li .img span{
    width:auto;
    height:auto;
}
#top-wrap .itemsList li .img img {max-width:130px;}
#top-wrap .itemsList li div > span{
    font-size:var(--12px);
	line-height:1.2;
}
#top-wrap .itemsList li div > a{
    margin:0 0 0.5rem;
    font-size:var(--13px);
    line-height:1.4;
    /* 3点リーダー */
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.itemsList li {border:1px solid #eee !important;}
#top-wrap .item_checkbox{
    bottom:.5rem;
    right:.5rem;
}

#top-wrap .itemsList li > a + div > a + span{
    font-size:var(--15px);
    color:#d55454;
}


/*====== このグループの商品を全て選択するボタン ======*/
#top-wrap .chkSelCorner {padding:0 1rem;}
.btnSelCorner {margin-left:2.6em !important;}
#top-wrap .btnSelCorner {margin-left:1.3em !important;}


/*====== チェックした商品をカートに入れるボタン ======*/
.fa.fa-flip-horizontal.fa-shopping-cart, #top-wrap .fa-flip-horizontal {padding-left:.5em;}
.fltArea {bottom:0 !important;}


/*===== コピーライト＆topへ戻るボタン =====*/
#FooterCopyright{
    padding-bottom:2rem;
    text-align:center;
}


/*====== topへ戻る ======*/
.pagetop, #special_content #page_top {display:none !important;}
#top-wrap #page_top{
	position:fixed;
    display:none;
    background:#325fab;
	bottom:10px;
	right:10px;
    width:40px;
    height:40px;
    padding:0;
    text-indent:-9999px;
    border-radius:100%;
    cursor:pointer;
    z-index:800;
}
#top-wrap #page_top a {display:block;}
#top-wrap #page_top::after{
    font-family:"FontAwesome";
    content:"\f106";
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    font-size:40px;
    color:#fff;
    text-align:center;
    line-height:35px;
    text-indent:0;
}


/*===== FontSize 早見表(必要なもののみ残す) 　※ 16pxは1remで記載 ※ =====*/
html {
    --12px:calc(12 / 16 * 1rem);
    --13px:calc(13 / 16 * 1rem);
    --14px:calc(14 / 16 * 1rem);
    --15px:calc(15 / 16 * 1rem);
    --18px:calc(18 / 16 * 1rem);
    --20px:calc(20 / 16 * 1rem);
    --24px:calc(24 / 16 * 1rem);
    --30px:calc(30 / 16 * 1rem);
}


/*========================================
 カスタム用 ／PC&SP
========================================*/

/*===== class名でfontを使用する場合／下記の記述でfontを設定 =====*/
.Font13 {font-size:var(--13px);}


/*===== 背景変更する場合 =====*/
#layouts {background:url(/special/staff_oshi_comic/images/bg.png) 0 0 / 50px repeat-x;}
#special_content{
	position:relative;
	background:#fff;
}


/*===== SNS位置修正 =====*/
#special_content .share{
	position:absolute;
	top:0;
	right:-22px;
	width:auto;
	z-index:50;
}


/*===== header下ナビボタンとサブテキストを非表示 =====*/
.detail_info > a, #corner_sub_text_title {display:none;}
.search-h2 {display:none;}


/*===== サブテキスト コンテンツ =====*/
.sec_sub {margin:5% auto;}


/*------------ 共通 ------------*/
article section {
    font-size: unset;
}
.contentsWrap {
    margin-bottom: 10%;
    line-height: 1.6;
}
#special_content img, #top-wrap img {
    width: 100%;
}

.caution {font-size:var(--13px);}
#top-wrap .caution {font-size:var(--12px);}
#top-wrap .caution li:first-of-type {
    margin-bottom:0.6em;
    line-height:1.6;
}

#LeadBox{
    background:#ef437d;
    width:80%;
    margin:2em auto;
    padding:2em;
    font-size:var(--20px);
    color:#fff;
    line-height:1.7;
    text-align:center;
    border-radius:5px;
    border:8px solid #000;
    box-sizing:border-box;
}
#top-wrap #LeadBox{
    width:94%;
    margin:2em auto;
    padding:1.5em;
    font-size:var(--14px);
    text-align:left;
    border:6px solid #000;
}
.LeadTit{
    margin-bottom:1em;
    font-size:var(--30px);
    font-weight:bold;
}
#top-wrap .LeadTit{
    font-size:var(--18px);
    text-align:center;
}


/*------------ 推し作品 ------------*/

/*アコーディオン*/
.accordionContainer {
    margin: 0 auto 2rem;
}
.accordionTitle {
    background-color: #fff;
    font-size: var(--24px);
    font-weight: bold;
    padding: 1rem;
    border:2px solid;
    filter: drop-shadow(2px 2px 0px);
    text-align: center;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.3s;
}
#top-wrap .accordionTitle {
    font-size: var(--20px);
    padding: .5rem;
}
.iconWrap::before {
    position: absolute;
    right: 2rem;
    top: 50%;
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    transform: translateY(-50%) rotate(0);
    transition-duration: 0.3s;
}
#top-wrap .iconWrap::before {
    right: :1rem;
}
.accordionTitle.default .iconWrap::before {
    transform: translateY(-50%)  rotate(-180deg);
    transition-duration: 0.3s;
}
.accordionTitle.default.open .iconWrap::before {
    transform: translateY(-50%) rotate(0deg);
    transition-duration: 0.3s;
}
.accordionTitle.open .iconWrap::before {
    transform: translateY(-50%) rotate(-180deg);
    transition-duration: 0.3s;
}
.accordionInner {
    display: none;
    width:900px;
    margin:0 auto;
    box-sizing: border-box;
}
.accordionInner.default {
    display: block;
}

/*目次*/
.toc {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin:2rem auto 4rem;
}
#top-wrap .toc {
    display: block;
}
.tocList {
    padding: 1rem;
    width: calc((100% - 1rem) / 2);
    background: #262626;
    border-radius: 5px;
    display: flex;
    gap: 1rem;
}
#top-wrap .tocList {
    margin-bottom: 1rem;
    padding: .8rem;
    width: 100%;
    gap: .8rem;
    font-size:var(--14px);
}
.tocIcon {
    flex:1;
    max-width: 100px;
    align-self: center;
}
.tocIcon img {
    vertical-align: bottom;
    transition: 0.2s;
}
.tocText {
    flex:3;
    align-self: center;
}
#top-wrap .tocText p {
    padding-bottom: .4em;
}
.tocTitle {
    font-weight: bold;
    color: #fff;
}

/*見出し*/
.mainTitle {
    padding: .5rem;
    color: #fff;
    background: #ededed;
    border-radius: 99px;
    font-size: var(--20px);
    font-weight: bold;
    text-align: center;
}

/*プロフ*/
.prof {
    margin: 2rem auto;
    width: 860px;
}
.prof {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows   : 1fr;
    grid-column-gap: 1rem;
    grid-template-areas  : "profIcon profText"
                         "profIcon profComment";
}
#top-wrap .prof {
    width: 94%;
    font-size: var(--14px);
    grid-column-gap: .8rem;
    grid-template-areas  : "profIcon profText"
                         "profComment profComment";
}
.profIcon {
    grid-area: profIcon;
    max-width:200px;
}
#top-wrap .profIcon {
    min-width:80px;
}
.profText {
    grid-area: profText;
    align-self: center;
}
.profName {
    padding-bottom: .5rem;
    font-weight: bold;
}
.profComment {
    grid-area: profComment;
    width: 100%;
    margin: 1rem auto;
    padding: .5rem 0;
    border-top: 3px dotted #333;
    border-bottom: 3px dotted #333;
}
#top-wrap .profComment {
    margin-bottom: 0;
}

/*書籍*/
.book {
    margin: 2rem auto 4rem;
    width: 860px;
    display: flex;
    gap: 2rem;
}
#top-wrap .book {
    display: block;
    width:100%;
}
.bookList {
    flex: 1;
    border: 1px solid;
    text-align: center;
}
#top-wrap .bookList {
    margin: 2rem auto;
}
.bookLabel {
    padding: .5rem;
    margin-bottom: 1rem;
    font-size: var(--14px);
    font-weight: bold;
    color:#fff;
    background: #333;
    position: relative;
}
.bookLabel:before {
    position: absolute;
    bottom: -8px;
    left: 1em;
    width: 0;
    height: 0;
    content: '';
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.bookInner {
    padding: 0 2rem;
}
#top-wrap .bookInner {
    padding: 0 1rem;
}
.bookTitle {
    padding-bottom: .4rem;
    font-weight: bold;
    font-size: var(--18px);
    line-height: 1.4;
}
#top-wrap .bookTitle {
    font-size: var(--16px);
}
.bookAuthor {
    padding-bottom: 1rem;
    font-size: var(--14px);
    line-height: 1.4;
}
.bookFlex {
    display: flex;
    gap: 1rem;
}
.thumb {
    width: 140px;
    height: auto;
}
#top-wrap .thumb {
    width: 120px;
}
.bookThumb {
    filter: drop-shadow(1px 1px 2px #8e8e8e);
}

/*ボタン*/
.btnArea {
    flex: 1;
    align-self: center;
}
.bookBtn {
    display: block;
    margin: 1rem auto;
    padding: .6rem;
    font-size: var(--14px);
    text-decoration: none;
    color: #fff;
    background: #262626;
    border-radius: 99px;
    transition: 0.2s;
}
#top-wrap .bookBtn {
    padding: .4rem;
}
.bookBtn:hover {opacity: 0.7;}
.bookBuy {
    background:#EE427C;
}
.bookAbs {
    background:#209FCC;
}

/*コメント*/
.bookComment {
    margin: 1rem auto;
    font-size: var(--14px);
}
.commentTitle {
    padding: .2rem;
    background: #262626;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
}
.commentText {
    padding: .5rem 0;
    border-bottom: 2px dotted;
    text-align: left;
}
.commentText span {
    color: #ee427c;
    font-weight: bold;
}
#top-wrap .commentText {
    line-height: 1.6;
}

/*------------　まとめ買いについて　------------*/
.contentsTitle {
    padding: .5rem;
    text-align: center;
    font-size:var(--24px);
    font-weight: bold;
    color: #fff;
    background: #262626;
}
#top-wrap .contentsTitle {
    font-size:var(--20px);
    line-height: 1.4;
}
.desc {
    width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 1rem;
}
#top-wrap .desc {
    display: block;
}
.descList {
    margin: 2rem auto;
    padding: 1rem;
    flex: 1;
    background: #F3F5F6;
    border-radius: 5px;
}
#top-wrap .descList {
    margin: 1rem auto;
}
.descList span {
    color:#EE427C;
    font-weight:bold;
}
.descTitle {
    font-weight: bold;
    font-size:var(--18px);
}
#top-wrap .descTitle {
    font-size:1rem;
    padding-bottom: .4rem;
}

/*おすすめ*/
.recommend {
    width: 900px;
    margin: 0 auto;
    text-align: center;
}
#top-wrap .recommend {
    margin: 2rem auto;
}
.recommendTitle {
    font-size:var(--20px);
    font-weight: bold;
    color: #EE427C;
}
.recommend p {
    padding: .5rem 0;
}
.recommend img {
    transition: 0.2s;
}


/*------------　アーカイブ部分　------------*/
.pastTitle {
    margin: 2rem auto;
    text-align: center;
    font-size:var(--30px);
    font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}
#top-wrap .pastTitle {
    font-size:var(--20px);
}
.pastTitle::before,
.pastTitle::after {
	content: '';
	width: 3px;
	height: 30px;
	background-color: #EE427C;
    display: inline-block;
}
#top-wrap .pastTitle::before,
#top-wrap .pastTitle::after {
	height: 20px;
}
.pastTitle::before {
	margin-right: 20px;
	transform: rotate(-35deg)
}
.pastTitle::after {
	margin-left: 20px;
	transform: rotate(35deg)
}
#top-wrap .pastTitle::before {
	margin-right: 10px;
}
#top-wrap .pastTitle::after {
	margin-left: 10px;
}

/*------------ これまでの推し作品はこちら(文字制限回避) ------------*/
/*↓2番目以降*/
.sec_sub:nth-of-type(n+4), .sec_sub:nth-of-type(n+4) .contentsWrap, .sec_sub:nth-of-type(n+4) .note.clearfix {margin:0 auto;}
.sec_sub:last-of-type {margin:0 auto 5%;}
.special_contents_wrap + br, #top-wrap #corner_main_text h2 {display:none;}

/*------------ カラー調整 ------------*/

/*にっしー #4ED4B4*/
.tocList.nissy,
.nissy .mainTitle,
.nissy .bookLabel,
.nissy .commentTitle {background: #4ED4B4;}

.nissy .profComment,
.nissy .bookList,
.nissy .commentText {border-color: #4ED4B4;}
.nissy .bookLabel:before {border-color: 
#4ED4B4 transparent transparent transparent}

.nissy .profIcon {filter: drop-shadow(0px 0px 2px #4ED4B4);}

/*てんぽー #C68ADF*/
.tocList.tenpo,
.tenpo .mainTitle,
.tenpo .bookLabel,
.tenpo .commentTitle {background: #C68ADF;}

.tenpo .profComment,
.tenpo .bookList,
.tenpo .commentText {border-color: #C68ADF;}
.tenpo .bookLabel:before {border-color: 
#C68ADF transparent transparent transparent}

.tenpo .profIcon {filter: drop-shadow(0px 0px 2px #C68ADF);}

/*ひがし #F696B6*/
.tocList.higashi,
.higashi .mainTitle,
.higashi .bookLabel,
.higashi .commentTitle {background: #F696B6;}

.higashi .profComment,
.higashi .bookList,
.higashi .commentText {border-color: #F696B6;}
.higashi .bookLabel:before {border-color: 
#F696B6 transparent transparent transparent}

.higashi .profIcon {filter: drop-shadow(0px 0px 2px #F696B6);}

/*U #F8C050*/
.tocList.u_staff,
.u_staff .mainTitle,
.u_staff .bookLabel,
.u_staff .commentTitle {background: #F8C050;}

.u_staff .profComment,
.u_staff .bookList,
.u_staff .commentText {border-color: #F8C050;}
.u_staff .bookLabel:before {border-color: 
#F8C050 transparent transparent transparent}

.u_staff .profIcon {filter: drop-shadow(0px 0px 2px #F8C050);}

/*葡萄 #62C9D9*/
.tocList.budou,
.budou .mainTitle,
.budou .bookLabel,
.budou .commentTitle {background: #62C9D9;}

.budou .profComment,
.budou .bookList,
.budou .commentText {border-color: #62C9D9;}
.budou .bookLabel:before {border-color: 
#62C9D9 transparent transparent transparent}

.budou .profIcon {filter: drop-shadow(0px 0px 2px #62C9D9);}

/*むーみん #96bfe8*/
.tocList.moomin,
.moomin .mainTitle,
.moomin .bookLabel,
.moomin .commentTitle {background: #96bfe8;}

.moomin .profComment,
.moomin .bookList,
.moomin .commentText {border-color: #96bfe8;}
.moomin .bookLabel:before {border-color: 
#96bfe8 transparent transparent transparent}

.moomin .profIcon {filter: drop-shadow(0px 0px 2px #96bfe8);}

/*まも #ee8178*/
.tocList.mamo,
.mamo .mainTitle,
.mamo .bookLabel,
.mamo .commentTitle {background: #ee8178;}

.mamo .profComment,
.mamo .bookList,
.mamo .commentText {border-color: #ee8178;}
.mamo .bookLabel:before {border-color: 
#ee8178 transparent transparent transparent}

.mamo .profIcon {filter: drop-shadow(0px 0px 2px #ee8178);}


/*sp*/
#top-wrap .top {
    margin: 1rem auto 2rem;
    width: 94%;
}
#top-wrap .accordionTitle {
    margin: 1rem auto 0;
    width: 94%;
}
#top-wrap .accordionInner,
#top-wrap .desc,
#top-wrap .recommend {
    width:90%;
}