@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Cormorant:400,700&');
@import url('fantastic.css');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

body,button,input,select,table,textarea{font-size: 1em;color:#333;font-family: メイリオ, Meiryo,  游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
h1,h2,h3{font-weight:bold;}
a:hover img {    opacity: 0.7;}

/*基本設定*/
html{font-size: 62.5%;}
body{font-size:1.6rem;color:#000;background:#eeeeee;;}
img{max-width:100%;}
div{box-sizing:border-box;}
p,a{text-align: justify; text-justify: inter-ideograph;word-break: normal;word-wrap: break-word;text-align:justify;}
h2{line-height:1.3em;}
ul,dl{letter-spacing: -.40em;}
li,dd,dt{letter-spacing: normal;}
a:link, a:visited:link, a:visited{color:#000;text-decoration:none;}
a:hover,a:visited:hover{color:#000;text-decoration:underline;}
a:hover>img{opacity:0.7;text-decoration:underline;}
i{vertical-align:middle;margin-right: 0.3em;}
a.blank:after{font-family: 'fantastic';content:'\004f';vertical-align:top;margin-left: 0.2em;}
img{pointer-events: none;  user-select: none;  vertical-align: bottom;  -webkit-user-select: none;  width: auto;  height: auto;  -ms-interpolation-mode: bicubic;}

.inner{width:980px;margin: 0 auto;display:table;}
.fixed {position: fixed;width: 100%;z-index: 100;top:0;}
.big{font-size:135%;color:#000;margin-right: 0.1em;}
.gray{filter: grayscale(100%);}
.white{filter: brightness(1) invert(0);}
.shadow{box-shadow:0px 1px 3px 0px #d6d6d6;-moz-box-shadow:0px 1px 3px 0px #d6d6d6;-webkit-box-shadow:0px 1px 3px 0px #d6d6d6;}
figure >a{display:block;}
.lightness{
  -webkit-box-shadow: 0 0 5px 0 #fff; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 5px 0 #fff; /* Firefox用 */
  box-shadow: 0 0 5px 0 #fff; /* CSS3 */
}


/*レイアウト*/
#content{margin: 0;padding: 0 0 2em;;}
#container{padding-top:80px;}
#top_main_area{width:750px;float: left;}
#topics{width: 300px;float: right;}
.wrap{width: 980px;}
#main{background: #fff;}
#news{}
#twitter{}
.body_in{padding-top: 0;}

/*icon用*/
.icon {display: inline-block;font: normal normal normal 14px/1 customfont;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}


/*ヘッダ*/
.header{background: url(../img/common/border.png) bottom 1px center repeat-x #fff;padding:0.75em 0 1em 0;}
.header a>img{display:block;}

.logo{display:inline-block;float: left;margin-right: 2em;}
.info{font-size:1.1rem;font-weight:bold;line-height: 2.6;}
#pc_menu{display:inline-block;}
#pc_menu ul li{display:inline-block;padding: 1em 0;margin-right: 1em;font-family:'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;font-weight:bold;}
#pc_menu ul li a{color:#493130;}
#pc_menu ul li:before{color:#493130;content: "\f004";font-family: 'fantastic';margin-right: 0.25em;font-size:60%;vertical-align:middle;}
#sub_mennu{float: right;}
#sub_mennu ul li{display:table-cell;vertical-align:middle;;}
#sub_mennu .days{border:1px solid #ee86ae;background:#ee86ae;color:#fff; border-radius:2px;font-weight:bold;padding: 0.1em 0.7em;}
#sub_mennu .twitter,#sub_mennu .mail{border:1px solid #ee86ae;border-radius:2px;}
#sub_mennu .twitter a{padding:0 0.85em;font-size:2rem;color:#ee86ae;}
#sub_mennu .mail a{padding: 0 1em;font-size:1.6rem;color:#ee86ae;    display: inline-block;vertical-align: middle;}
#sub_mennu .icon-twitter:before{line-height:unset;}
#sub_mennu ul{border-collapse: separate;border-spacing: 2px 0;}
#sub_mennu ul li a i{margin-right: 0;}

.icon-envelope:before {
content: "";
background: url(../img/common/icon_mail.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
filter: brightness(0) saturate(100%) invert(78%) sepia(68%) saturate(1460%) hue-rotate(290deg) brightness(96%) contrast(94%);
width: 1em;
height: 1em;
}
.icon-twitter:before {
content: "";
background: url(../img/common/icon_x.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
filter: brightness(0) saturate(100%) invert(78%) sepia(68%) saturate(1460%) hue-rotate(290deg) brightness(96%) contrast(94%);
width: 0.7em;
height: 0.7em;
}

/*フッダ*/
.footer{background: #493130;padding: 1.5em 0;text-align:center;}
.footer small{display:block;}
.footer h5{margin-bottom: 0.5em;}
.footer h5 img{width:120px;}

.footer ul.foter_nav1 li{font-size:1.2rem;display:inline-block;margin:0 0.5em;}
.footer ul.foter_nav1 li:before{content: "\f101";font-family: 'fantastic';margin-right: 0.2em;}
.footer ul.foter_nav1 li a{color:#fff;}
.footer ul.foter_nav2 li{font-size:1.2rem;display:inline-block;}
.footer ul.foter_nav2 li:after{content: "｜";}
.footer ul.foter_nav2 li:last-child:after{content:""}
.footer ul.foter_nav2 li a{color:#fff;}

.footer small{display:block;font-size:1rem;}

footer a{color:#fff!important;}
footer ul{padding: 0;}
footer li a{color:#fff;}
footer li a:hover{text-decoration:underline;}
footer li:before{display:none;}




/*ぱんくず*/
#breadcrumbs{    margin-bottom: 1.5em; padding-top: 1.75em;}
#breadcrumbs li{display:inline-block;}
#breadcrumbs .icon-twitter:before{line-height:unset;}


h2.ttl{padding: 2em 0 2em;}
h2.ttl:before{content:"";background: url(../img/common/orna01.png) no-repeat center center;height: 25px;display:block;}
h2.ttl:after{content:"";background: url(../img/common/orna02.png) no-repeat center center;height: 25px;display:block;}
h2.ttl span{  font-size:2rem;color:#493130;position: relative;display: block;padding:0.5em; text-align: center;}

#title_area{}
article.lpb{padding:0 0 4em 0;}

ul#tab{display:flex;width: 80%;margin: 0 auto 3em;}
ul#tab li{width: 33%;border-right:1px solid #000;font-size:2rem;font-weight:bold;}
ul#tab li:last-child{border-right:0;}
ul#tab li.active a{background: #493130;}
ul#tab li a{display:block;text-align:center;padding: 0.5em 0;color: #493130;}
ul#tab li a:hover{background: #493130;color:#fff;text-decoration:none;cursor:pointer;}
ul#tab li a:visited{}
ul#tab li.select a{color:#fff;background: #493130;transition: all 0.2s ease-out;}
.hide {display:none;}

.comic section table.plst{}
.comic section table.plst .days{background: #e4e1e1;width: 20%;padding: 1.5em;color:#7c6e6d;vertical-align: top;}
.comic section table.plst tr:nth-child(n + 2) .days div{display:none;}
.comic section table.plst .days div h5{font-size:4rem;font-family: 'Oswald', sans-serif;text-align:center;}
.comic section table.plst .days div h4{font-size:7.5rem;font-family: 'Oswald', sans-serif;text-align:center;line-height:1;}
.comic section table.plst .days div h3{font-size:3rem;font-family: 'Oswald', sans-serif;text-align:center;line-height:1;}
.comic section table.plst .days div p{font-size:3.5rem;text-align:center;font-weight:bold;font-family: 'Oswald', sans-serif;}
.comic section table.plst .details{background: #fff;padding: 1.5em;display:flex;}
.comic section table.plst .details > a{width: 40%;display:block;}
.comic section table.plst .details > a img{width: 100%;}
.comic section table.plst .details > .dtls{width: 60%;padding-left: 5%;}
.dtls h2{font-size:2.4rem;margin-bottom: 0.5em;}
.dtls h3{font-size:1.8rem;color:#e04fa9;margin-bottom: 1em;}
.dtls h4 {font-size:1.8rem;margin-bottom: 1em;}
.dtls h4 strong{;font-weight:bold;}
.dtls p{font-size:1.4rem;}
.dtls .btn {display:flex;justify-content:space-between;margin-top: 2.5em;}
.dtls .btn span{width: 49%;display:block;}
.dtls .btn span a{display:block;text-align:left;}
.dtls .btn span a {color: #fff;background-color: #493130;position:relative;font-weight:bold;}
.dtls .btn span a:before {content: "";display: block;width: 8px;height: 8px;position: absolute;right: 1.2em;top: calc(50% - 1px);border-top: solid 1px;border-right: solid 1px;transform: rotate(45deg) translateY(-50%);color: inherit;}
.dtls .btn span a:hover {color: #fff;background: #524040;text-decoration:none;}
.dtls .btn span a {border-bottom: 5px solid #8e8280;}
.dtls .btn span a:hover {margin-top: 3px;border-bottom: 2px solid #560720;}
.dtls .btn span a{position: relative;padding: 1em;border-radius: 5px;}
.dtls .btn span a i.fa {margin-right: 1rem;}


.panel-group{width: 100%;margin: 0 auto;}
section.thismonth,
section.nextmonth
{background: #fff;box-shadow:0px 0px 5px 0px #d6d6d6;}

section.othermonth{}
section.othermonth ul{display:flex;justify-content:space-between;}
section.othermonth ul li{width: 19%;background: #fff;box-shadow:0px 0px 5px 0px #d6d6d6;}
section.othermonth ul li:hover {top: -2px;position: relative;}
section.othermonth ul li a:hover{text-decoration:none;}
section.othermonth ul li div{padding: 1em;}
section.othermonth ul li div span{font-size:1.1rem;margin-bottom: 0.25em;display:block;}
section.othermonth ul li div h2{font-size:1.5rem;margin-bottom:0.25em;}
section.othermonth ul li div h4{font-size:1.2rem;}


#product_detail_area{display:flex;    background: #fff; box-shadow: 0px 0px 5px 0px #d6d6d6;padding: 2.5em;}
#product_detail_area .images{width: 40%;}
#product_detail_area .dtls{width: 60%;padding-left: 5%;}
#product_detail_area .dtls h3{font-weight: bold;color: #e04fa9;}
#product_detail_area .dtls h2{font-weight: bold;}
#product_detail_area .dtls h4{font-weight: bold;}
#product_detail_area .dtls p{margin-bottom: 2em;}
#product_detail_area .dtls .btn{margin-bottom: 2em;}
#product_detail_area .dtls dl{display:flex;flex-wrap:wrap;margin-bottom: 1em;margin-bottom: 2em;}
#product_detail_area .dtls dl dt{font-size: 1.4rem;border-bottom:1px solid #9e9e9e;width: 30%;padding: 0.5em 0;}
#product_detail_area .dtls dl dd{font-size: 1.4rem;border-bottom:1px solid #9e9e9e;width: 70%;padding: 0.5em 0;}
#product_detail_area .dtls dl dt:nth-last-child(2),
#product_detail_area .dtls dl dd:last-child{border:0;}
#product_detail_area .dtls ul.overview{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom: 0;}
#product_detail_area .dtls ul.overview li{width: 49%;}

.overview {margin-bottom: 1em;width:100%;display:flex;flex-wrap:wrap;}
.overview li {text-align:center;margin:0 0.5% 0.25em;background: none;}
.overview li a{text-align:center;width: 100%;display:block;padding: 10px;;background: #e5e5e5;border-radius:3px;align-items:center;}
.overview li a:hover{background: #ddd}
.overview li a img{height: 20px;width: auto;margin:2px 0}
.overview li.official_link a img{height: 26px;width: auto;margin: 0}


.title_recommend {}
.title_recommend ul{display:flex;justify-content:left; flex-wrap: wrap;}
.title_recommend ul li{width: 19%;background: #fff;box-shadow:0px 0px 5px 0px #d6d6d6;margin:0 0.5% 0 0.5%;margin-bottom: 1em;}
.title_recommend ul li:last-child{margin-right: 0;}
.title_recommend ul li:hover {top: -2px;position: relative;}
.title_recommend ul li a:hover{text-decoration:none;}
.title_recommend ul li div{padding: 1em;}
.title_recommend ul li div span{font-size:1.1rem;margin-bottom: 0.25em;display:block;}
.title_recommend ul li div h2{font-size:1.5rem;margin-bottom:0.25em;font-weight: bold;}
.title_recommend ul li div h4{font-size:1.2rem;}



/**PAGER＆SORTBOX        ----------------------------------**/
#sortBox dl{display:flex;justify-content: center;margin: 3em 0;font-size:1.4rem;}
#sortBox dl .sorts b{background: #fff;color:#524040;padding: 0.35em 1em;display: block;border-radius:2em;margin:0 0.25em;}
#sortBox dl .sorts a{background: #524040;color:#fff;padding: 0.35em 1em;display: block;border-radius:2em;margin:0 0.25em;}
#sortBox dl .sorts a:hover{text-decoration:none;background: #8e8280;}
#sortBox dl .un-selected{}
#sortBox dl .selected{}
#sortBox dl dd[type="07"]{order:1;}
#sortBox dl dd[type="10"]{order:2;}
#sortBox dl dd[type="11"]{order:3;}
#sortBox dl dd[type="20"]{order:4;}
#sortBox dl dd[type="21"]{order:5;}

.pager{text-align:center;margin: 3em 0;}
.pager ul{display:flex;justify-content: center;}
.pager ul li{margin:0 0.25em;}
.pager ul li a{color:#fff;display:block;border-radius: 2em;font-size: 1.6rem;padding: 0.5em 1em;color:#fff;background: #524040; }
.pager ul li a:hover{background:#524040;}
.pager ul li.on,
.pager ul li.prev_off,
.pager ul li.next_off
{background: #fff;display:block;border-radius: 2em;font-size: 1.4rem;padding: 0.5em 1em;color:;}
.pager .cb{display:none;}
.all_btn{    display: flex;margin-top: 2em;}
.all_btn a{display:inline-block;text-align:center;font-size:1.4rem;margin-left: auto;;}
.all_btn a {color: #fff;background-color: #493130;position:relative;font-weight:bold;}
.all_btn a:before {content: "";display: block;width: 8px;height: 8px;position: absolute;right: 1.2em;top: calc(50% - 1px);border-top: solid 1px;border-right: solid 1px;transform: rotate(45deg) translateY(-50%);color: inherit;}
.all_btn a:hover {color: #fff;background: #524040;text-decoration:none;}
.all_btn a {border-bottom: 5px solid #8e8280;}
.all_btn a:hover {margin-top: 3px;border-bottom: 2px solid #560720;}
.all_btn a{position: relative;padding: 0.5em 2em 0.5em 1em;border-radius: 5px;}

.sp{display:none;}

/*レスポンシブ*********************************************************************************************************************************************************************************************************************************************************************************************************************************/
@media screen and (max-width: 768px){
html{font-size: 52.5%;}
body{font-size:1.6rem;color:#000;background:#eeeeee;;}
.inner{width: 100%;margin: 0 auto;display:table;}
.header{z-index:1;}
#pc_menu{display:none;}
.pc{display:none;}
.sp{display:block;}

/*レイアウト*/
.wrap{width: 100%;}
#main{background: #fff;margin: 0 2%;}
#news{width: 100%;padding:1em 2% 0 2%;}
#tanwa{padding:0 2% 0 2%;}
#twitter{display:none;}
#container{padding-top: 60px;}
#content{padding: 0;}

#tanwa> ul li{display:inline-block;width: 33.33%;padding: 1%;}


/*ヘッダ*/
.header {-webkit-background-size: auto 10px;
background-size: ;}
.header .logo{float:none;width: 30%;margin: 0 auto;display:block;}
.header .logo img{width: 100%;}
.header .info{display:none;}
.header .mail{display:none!important;}
.header .twitter{display:none!important;}
.header .days{font-size:1.2rem;position:absolute;right:5px;top:15px;}
/*フッダ*/
.footer .foter_nav1{display:none;}

/*ぱんくず*/
#breadcrumbs{padding-top: 1em;padding-left: 2%;font-size:80%;}
/*ドロワー */
.drawer-overlay{background-color:rgba(0,0,0,0.8)}
.drawer-nav{width: 70%;background: #e2d2cf;}
.drawer--left .drawer-nav{left:-70%;}
.drawer--left.drawer-open .drawer-hamburger{left:70%;color:#fff;}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{color:#fff;}
.drawer--left.drawer-open .drawer-hamburger-icon:after,.drawer--left.drawer-open .drawer-hamburger-icon:before{background-color:#fff;}
.drawer-hamburger{margin-left: 10px;width: 2.5rem;padding: 14px .75rem 30px;}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{background: #000;}
.drawer-nav{z-index:2;}
.drawer-hamburger-icon:after, .drawer-hamburger-icon:before{top: -8px;}
.drawer-hamburger-icon:after{top:8px;}

#sp_menu .logo{margin: 0.75em auto;width:50%;}
#sp_menu .logo img{width: 100%;}

#res_head{}
#res_head a{color:#493130;}
#res_head h1,#res_head h2{ display: block;line-height: 0;margin: 0 0.25em 0 0;float: none;margin: 0 auto;padding: 0.5em 0 0.3em;}
#res_head h1 a,#res_head h2 a{display:block; text-align: center;}
#res_head h3{background: #e50012;color:#fff;font-size:1.1rem;float: left;padding: 0.2em 1em;float: left;margin: 1em 0 0 0;    width: 100%; text-align: center;}

#menus_res{display:table;width: 100%;}
#menus_res ul li{padding: 0.75em;}

#menus_res ul {margin-top: 0;margin-bottom: 1em;padding: 0 5%;}
#menus_res ul li{padding: 0.75em;border-bottom: #666 1px solid;font-size:1.6rem;}
#menus_res ul li:first-child{border-top:#666 1px solid;}
#menus_res ul li i{font-size:125%;}
#menus_res ul li a{display: block;font-weight:bold;}
#menus_res ul li a:after{content:"\f105";font-family:"fantastic";float: right;}

#sns_res{padding: 0 5%;}
#sns_res ul{display:table;width: 100%;margin-bottom: 1em;}
#sns_res ul li{display:table-cell;vertical-align:middle;    text-align: center;}
#sns_res .days{font-size:1.3rem;border:1px solid #493130;background:#493130;color:#fff; border-radius:2px;font-weight:bold;padding: 0.1em 0.7em;}
#sns_res .twitter,#sns_res .mail{border:1px solid #493130;border-radius:2px;}
#sns_res .twitter a{padding:0 1em;font-size:1.3rem;color:#493130;}
#sns_res .mail a{padding: 0 1em;font-size:1.1rem;color:#493130;}
#sns_res .icon-twitter:before{line-height:unset;}
#sns_res ul{border-collapse: separate;border-spacing: 2px 0;}
#sns_res ul li a i{margin-right: 0;}

#menus_f ul{padding:0 1em 1em 1em;}
#menus_f ul li {display:inline-block;width: 50%;}
#menus_f ul li a{font-size:70%;}
#menus_f ul li a:before{content:"\f105";font-family:"fantastic";margin-right: 0.3em;}

ul.list-type1 li{width: 100%;}
ul.list-type1 li .imgs{width: 40%;}
ul.list-type1 li .dtls{width: 60%;padding: 0 0 0 1em;}

.date{width: 35%;}
.lks{width: 65%;}
h2.ttl{padding: 1em 0 1em;}
section.thismonth, section.nextmonth{width: 95%;margin: 0 auto;}
ul#tab{width: 95%;}
ul#tab li{}
ul#tab li a{font-size:1.8rem;padding:0.5em 1em;}
.comic section table.plst .details{display:block;}
.comic section table.plst .details{padding: 1.5em;}
.comic section table.plst .details > .dtls{width: 100%;padding-left: 0;}
.comic section table.plst .details > a{width: 70%;margin: 0 auto 2em;}
.comic section table.plst .days{display:block;width: 100%;padding: 0.5em;}
.comic section table.plst .days div h5{}

section.othermonth{width: 95%;margin: 0 auto;}
section.othermonth ul {flex-wrap:wrap;justify-content:space-between;}
section.othermonth ul li{width: 32.333333%;margin: 0;margin-bottom: 1em;}
section.othermonth ul::after {width: 32.333333%;display: block;content:"";}

#product_detail_area{width: 95%;margin: 0 auto;padding: 1.5em;display:block;}
#product_detail_area .images{width: 70%;margin: 0 auto 2em;}
#product_detail_area .dtls{width: 100%;padding-left: 0;}

.title_recommend{width: 95%;margin: 0 auto;}
.title_recommend ul {flex-wrap:wrap;justify-content:space-between;}
.title_recommend ul li{width: 48.5%;margin: 0;margin-bottom: 1em;}
.title_recommend ul::after {width: 32.333333%;display: block;content:"";}

.all_btn{}
.all_btn a{width: 80%;margin: 0 auto;}

.dtls .btn{display:block;}
.dtls .btn span {width: 100%;display: block;margin-bottom: 0.5em;}
.dtls .btn span a { position: relative; padding: 1em;border-radius: 5px;}

#sortBox dl{font-size:1.2rem;margin:0 0 2em 0;}
#product_detail_area .dtls ul.overview{justify-content: flex-start;}
#product_detail_area .dtls ul.overview li{width:32%;}
#product_detail_area .dtls ul.overview li a{    display: flex;justify-content: center;height: 100%;}
.overview li a img{height: auto!important;max-width: 80%;}
@media only screen
and (orientation:landscape) {
#top_main_area #visual{height: 600px;}
}

}