@charset "utf-8";
html.viewer,
html.viewer body{
height: 100%;
overflow: hidden;
}
body{
font-family: "中ゴシックBBB", "游ゴシック", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS P Gothic", sans-serif;
font-style: normal;
font-weight: 100;
-webkit-text-size-adjust: 100%;
background: url(../img/bg.jpg);
background-attachment: fixed;
}
img,input,textarea,select,button{
vertical-align: bottom;
}
h1,h2,h3,h4,h5{
font-family: "見出ゴMB31", YuGothic;
}
a{
color:inherit;
}
input,textarea,select,button{
outline: none;
}
#wrapper{
width: 100%;
min-width: 600px;
min-height: 100vh;
}
#inner_content{
min-height: 100vh;
max-width: 1000px;
margin: 0 auto;
background-color: #fffde3;
overflow: hidden;
}
#inner_content > header{
width: 200px;
position: fixed;
box-sizing: border-box;
}
#inner_content > section{
margin-left: 200px;
box-sizing: border-box;
}
#inner_content > header{
padding: 45px 28px 45px 40px;
}
#inner_content > header h1{
text-align: center;
}
#inner_content > header nav{
margin-top: 40px;
}
#inner_content > header nav ul li{
margin-bottom: 30px;
}
#inner_content > header nav ul li a.current{
background-position: 0 -72px !important;
}
#inner_content > header nav ul li._1 a{
padding-left: 15px;
background: white url(../img/menu_bg_1.png) no-repeat left top;
background-size: 16px auto;
}
#inner_content > header nav ul li._2 a{
padding-left: 13px;
background: white url(../img/menu_bg_2.png) no-repeat left top;
background-size: 13px auto;
}
#inner_content > header nav ul li._3 a{
padding-left: 30px;
background: white url(../img/menu_bg_3.png) no-repeat left top;
background-size: 23px auto;
}
#inner_content > header nav ul li._4 a{
padding-left: 20px;
background: white url(../img/menu_bg_4.png) no-repeat left top;
background-size: 17px auto;
}
#inner_content > header nav ul li a{
height: 24px;
text-align: center;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15em;
display: block;
text-decoration: none;
font-family: '秀英丸ゴシック L', YuGothic;
}
#inner_content > header nav ul li a:hover{
animation: menu_bg 0.2s steps(3) forwards;
}
#inner_content > header nav ul li a.current:hover{
animation: none;
}
@keyframes menu_bg {
100%{
background-position: 0 -72px;
}
}
#inner_content > header nav ul li a img{
height: 24px;
width: auto;
}
#inner_content > header .sns{
text-align: center;
}
#inner_content > header .sns li{
margin: 0 5px;
display: inline-block;
}
.content_title{
font-size: 20px;
text-align: center;
letter-spacing: 0.15em;
line-height: 29px;
font-family: "中ゴシックBBB", YuGothic;
}
.content_title span{
padding: 0 35px;
background-color: white;
font-family: '秀英丸ゴシック L', YuGothic;
}
.content_title_2{
padding: 20px 0;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.content_list{
padding: 45px 40px;
}
.content_list > * + *{
margin-top: 30px;
}
.content_list li{
overflow: hidden;
border-radius: 23px 0px 0px 0px
}
.content_list li.text,
.content_list li.ad{
border-radius: 0;
}
.content_list li.ad img,
.content_list .manga img{
width: 100%;
max-width: 720px;
height: auto;
}
.content_list li{
overflow: hidden;
}
.content_list .time{
float: right;
margin-top: 10px;
font-size: 12px;
color: #BD2249;
border-bottom: 1px dotted #BD2249;
font-family: 'Josefin Sans', YuGothic, sans-serif;
}
.content_list .time span{
padding-right: 1em;
}
.work_detail.text .main_visual,
.content_list .text a{
display: block;
margin: 0 auto;
text-align: center;
height: 176px;
background: #FFF;
position: relative;
overflow: hidden;
box-sizing: border-box;
text-decoration: none;
}
.work_detail.text .main_visual a{
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.work_detail.text .main_visual .content,
.content_list .text .content{
overflow: hidden;
position: absolute;
right: 19px; left: 19px; top: 20px; bottom: 20px;
font-size: 13px;
letter-spacing: 0.1em;
text-align: left;
line-height: 19px;
font-family: '秀英丸ゴシック L', YuGothic, "ヒラギノ角ゴ Pro W3";
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.work_detail.text .main_visual .content img,
.content_list .text .content img{
display: none;
}
.work_detail.text .main_visual .title,
.content_list .text h2{
width: 228px;
height: 72px;
text-align: center;
position: absolute;
top: 47px;
left: 50%;
background: #FFF;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.work_detail.text .main_visual .title img,
.content_list .text h2 img{
max-width: 207px;
max-height: 58px;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
/*
.content_list iframe{
width: 720px;
height: 90px;
}
*/
.content_list .cards_wrap{
margin: 45px -20px 0;
overflow: hidden;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.content_list .cards_wrap article{
width: 50%;
font-size: 16px;
}
@media screen and (max-width: 767px){
.content_list .cards_wrap article{
width: 340px;
margin: 0 auto;
}
}
.content_list .cards_wrap article a{
margin: 0 20px;
display: block;
text-decoration: none;
padding-bottom: 30px;
}
.content_list .cards_wrap article .image{
overflow: hidden;
border-radius: 10px;
}
.content_list .cards_wrap article .image img{
width: 100%;
height: auto;
}
.content_list .cards_wrap article time{
padding-top: 10px;
color: #bc2249;
font-size: 12px;
border-bottom: 1px dotted;
float: right;
font-family: 'Josefin Sans', YuGothic, sans-serif;
}
.content_list .cards_wrap article time span{
padding-right: 1em;
}
.content_list .cards_wrap article h3{
padding: 10px 0 5px;
line-height: 26px;
clear: both;
}
.content_list .cards_wrap article h3 + p{
line-height: 26px;
}
/* page_pager */
.page_pager{
padding: 20px 0;
overflow: hidden;
border-top: 1px solid black;
border-bottom: 1px solid black;
position: relative;
}
.page_pager p{
font-size: 12px;
line-height: 17px;
width: 50%;
box-sizing: border-box;
}
.page_pager p+p{
border-left: 1px solid #000;
}
.page_pager p a{
text-decoration: none;
display: block;
}
.page_pager p span{
height: 20px;
font-size: 16px;
display: block;
margin-top: 5px;
font-family: '秀英丸ゴシック L', YuGothic;
color: #bc2249;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page_pager p a:visited span{
color: #000;
}
.page_pager p span:before{
content: "";
display: inline-block;
width: 20px;
height: 17px;
background: url(../img/menu_bg_1.png) no-repeat left top;
background-size: auto 68px;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
.work_detail.text .page_pager p span:before{
background: url(../img/menu_bg_2.png) no-repeat left top;
background-size: auto 68px;
}
.page_pager p span:hover:before{
animation: menu_bg_2 0.2s steps(3) forwards;
}
@keyframes menu_bg_2 {
100%{
background-position: 0 -51px;
}
}
.page_pager .prev{
float: left;
padding-right: 10px;
}
.page_pager .next{
text-align: right;
float: right;
padding-left: 10px;
}
/* work_detail */
.work_detail{
padding: 45px 40px;
}
.work_detail.manga header .cover{
overflow: hidden;
border-radius: 23px 0px 0px 0px;
}
.work_detail header .cover img{
width: 720px;
height: auto;
}
.work_detail header time{
padding-top: 10px;
color: #bc2249;
font-size: 12px;
border-bottom: 1px dotted;
float: right;
font-family: 'Josefin Sans', YuGothic, sans-serif;
}
.work_detail header h3{
padding: 10px 0 15px;
font-size: 22px;
line-height: 30px;
clear: both;
letter-spacing: 0.1em;
}
.work_detail header h3 + p{
font-size: 14px;
font-family: "見出ゴMB31", YuGothic;
}
#gallery_single .work_detail header h3 + p{
text-align: center;
font-family: "中ゴシックBBB", YuGothic;
}
.work_detail .description{
margin-top: 20px;
}
.work_detail .description p+p{
margin-top: 1em;
}
.work_detail .description p{
font-size: 16px;
line-height: 28px;
}
.work_detail .share ul{
padding: 35px 0 30px;
overflow: hidden;
text-align: center;
}
.work_detail .share ul li{
margin: 0 15px;
float: none;
display: inline-block;
}
.work_detail .news{
margin: 20px 0;
padding-top: 20px;
background-color: white;
}
.work_detail .news h4{
text-align: center;
font-size: 16px;
letter-spacing: 0.2em;
color: #bc2249;
}
.work_detail .news h4 span{
display: inline-block;
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.work_detail .news article,
.other_items_list_news li{
padding: 15px 40px 40px;
overflow: hidden;
}
.work_detail .news article + article,
.other_items_list_news li + li{
border-top: 1px solid black;
}
.work_detail .news article .detail,
.other_items_list_news li .detail{
font-size: 16px;
line-height: 28px;
}
.work_detail .news article .detail p+p,
.other_items_list_news li .detail p+p{
margin-top: 1em;
}
.work_detail .news article .thumbnail,
.other_items_list_news li .thumbnail{
margin-left: 20px;
text-align: center;
float: right;
max-width: 40%;
max-height: 100%;
}
.other_items_list_news li .thumbnail img,
.work_detail .news article .thumbnail img{
max-width: 100%;
max-height: 100%;
}
.work_detail .episode{
padding: 20px 0;
border-bottom: 1px solid black;
}
.work_detail .episode h4{
font-size: 16px;
letter-spacing: 0.2em;
}
.work_detail .episode ul{
overflow: hidden;
width: 100%;
}
.work_detail .episode ul li{
width: 33.3%;
margin-top: 12px;
float: left;
}
.work_detail .episode ul li a{
text-decoration: none;
display: block;
margin-right: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
height: 16px;
line-height: 16px;
font-family: '秀英丸ゴシック L', YuGothic;
color: #bc2249;
}
.work_detail .episode ul li a:visited{
color: #000;
}
.work_detail .episode ul li a:before{
content: "";
display: inline-block;
width: 16px;
height: 14px;
background: url(../img/menu_bg_1.png) no-repeat left top;
background-size: auto 56px;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
.work_detail.text .episode ul li a:before{
background: url(../img/menu_bg_2.png) no-repeat left top;
background-size: auto 56px;
}
.work_detail .episode ul li a:hover:before{
animation: menu_bg_3 0.2s steps(3) forwards;
}
@keyframes menu_bg_3 {
100%{
background-position: 0 -42px;
}
}
.work_detail .profile{
padding: 20px 0;
}
.work_detail .news+.profile{
border-top: 1px solid black;
}
.work_detail .profile h4{
font-size: 16px;
letter-spacing: 0.2em;
}
.work_detail .profile > div{
margin-top: 15px;
overflow: hidden;
position: relative;
}
.work_detail .profile div.avatar{
float: left;
width: 182px;
}
.work_detail .profile div.avatar img{
width: 182px;
height: auto;
}
.work_detail .profile div.avatar + div{
margin-left: 202px;
}
.work_detail .profile div.avatar + div .name{
margin-bottom: 15px;
font-size: 18px;
line-height: 27px;
}
.work_detail .profile .description p{
font-size: 13px;
line-height: 20px;
}
.work_detail .profile .description a:hover{
color: #bc2249;
}
/* work_detail type2 */
.work_detail header .cover img{
max-width: 100%;
width: intrinsic;
height: auto;
}
.work_detail.type2 header h3{
margin-top: 30px;
text-align: center;
}
/* units */
.content_box{
margin: 0 auto;
padding: 50px 0 70px;
}
#gallery_single .content_box{
padding: 0;
}
.content_box a{
text-decoration: none;
}
.content_box img{
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.content_box p{
font-size: 16px;
line-height: 26px;
}
.content_box p + p{
margin-top: 50px;
}
.other_items_list{
padding: 20px 0;
border-top: 1px solid black;
}
.other_items_list h4{
margin-bottom: 15px;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
}
.other_items_list ul{
position: relative;
overflow: hidden;
text-align: center;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-webkit-justify-content: space-around;
justify-content: space-around;
height: 242px;
overflow: hidden;
}
.other_items_list ul li{
width: 130px !important;
text-align: center;
box-sizing: border-box;
overflow: hidden;
}
.other_items_list ul li iframe{
width: 120px;
height: 240px;
}
.other_items_list ul li a{
text-decoration: none;
display: block;
margin: 0 4px;
padding: 10px;
min-height: 100%;
box-sizing: border-box;
background-color: white;
}
.other_items_list ul li p.thumbnail{
padding-top: 0;
text-align: center;
height: 100px;
}
.other_items_list ul li p.thumbnail img{
height: 100%;
width: auto;
}
.other_items_list ul li p{
padding: 0 10px;
font-size: 12px;
line-height: 18px;
}
.other_items_list ul li p+p{
margin-top: 5px;
}
.other_items_list ul li .title{
height: 36px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
margin-top: 5px;
}
.other_items_list ul li .publisher{
margin-top: 5px;
font-size: 10px;
line-height: 1em;
}
.other_items_list ul li .shop_link{
max-width: 100px;
margin: 10px auto 0;
padding: 2px 0;
text-align: center;
border: 1px solid black;
border-radius: 5px;
display: block;
}
.other_items_list ul li .shop_link img{
vertical-align: bottom;
}
.other_items_list_circle{
padding: 15px 0;
border-top: 1px solid black;
}
.other_items_list_circle h4{
margin-bottom: 15px;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
}
.other_items_list_circle ul{
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
.other_items_list_circle ul li{
width: 25%;
text-align: center;
}
.other_items_list_circle ul li a{
display: block;
margin: 0 10px;
padding: 10px 0;
text-decoration: none;
}
.other_items_list_circle ul li p.thumbnail{
width: 85%;
padding-top: 85%;
height: 0;
margin: 0 auto;
position: relative;
}
.other_items_list_circle ul li p.thumbnail:before{
content: "";
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 1px solid black;
border-radius: 100%;
overflow: hidden;
display: block;
box-sizing: border-box;
z-index: 2;
}
.other_items_list_circle ul li p.thumbnail span{
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 100%;
overflow: hidden;
display: block;
}
.other_items_list_circle ul li p.thumbnail img{
width: 100%;
height: 100%;
}
.other_items_list_circle ul li.nw p.thumbnail:after{
content: "";
width: 15px;
height: 15px;
background: url(../img/el_new_w.png) no-repeat center center;
background-size: 15px 15px;
position: absolute;
right: 12%;
top: 6%;
display: block;
}
.other_items_list_circle ul li p.title{
margin: 10px 0;
font-size: 13px;
line-height: 20px;
font-family: "見出ゴMB31", YuGothic;
overflow: hidden;
}
.other_items_list_circle ul li p.name{
font-size: 12px;
}
/* VIEWER */
/* common */
#viewer_loading{
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: url(../img/loading.png) no-repeat center center #FFFDE3;
background-size: 196px 117px;
z-index: 100;
}
#viewer{
box-sizing: border-box;
background-color: #fffce2;
height: 100vh;
width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: hidden;
}
#viewer_container{
position: absolute;
left: 0; right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#viewer header{
position: absolute;
height: 60px;
top: 0; left: 0; right: 0;
z-index: 2;
}
/* header */
#viewer header .bg{
position: absolute;
top: 0; left: 0; right: 0;
height: 60px;
transition: top 300ms ease;
/* background: #fffce2; */
background: rgba(255,253,227,0.85);
}
#viewer header.hide .bg{
top: -60px;
}
#viewer header .content{
width: 1000px;
margin: 0px auto;
padding: 10px 0;
height: 40px;
overflow: hidden;
position: relative;
top: 0;
}
#viewer header h1{
padding-left: 18px;
position: relative;
z-index: 2;
float: left;
}
#viewer header .share{
text-align: center;
position: absolute;
top: 15px;
left: 0; right: 0;
}
#viewer header .share li{
margin: 0 15px;
display: inline-block;
}
/* footer */
#viewer footer{
position: absolute;
height: 55px;
left: 0; right: 0; bottom: 0;
}
#viewer footer .bg{
position: absolute;
bottom:0; right: 0; left: 0;
/* background: #fffce2; */
background: rgba(255,253,227,0.85);
transition: bottom 300ms ease;
}
#viewer footer.hide .bg{
bottom: -55px;
}
#viewer footer .content{
width: 1060px;
margin: 0 auto;
height: 30px;
padding: 15px 0 10px;
position: relative;
bottom: 0;
}
#viewer footer .content > a{
height: 16px;
line-height: 17px;
position: absolute;
bottom: 17px;
font-size: 13px;
text-decoration: none;
font-family: "見出ゴMB31", YuGothic;
}
#viewer footer .next{
padding-left: 24px;
background: url(../img/arr_l_r.png) no-repeat left center;
left: 10px;
background-size: contain;
}
#viewer footer .prev{
padding-right: 24px;
background: url(../img/arr_r_r.png) no-repeat right center;
right: 10px;
background-size: contain;
}
#viewer footer h2{
text-align: center;
font-size: 12px;
line-height: 15px;
}
#viewer footer h2 a{
text-decoration: none;
display: inline-block;
}
#viewer footer h2 span{
display: block;
font-family: "中ゴシックBBB", YuGothic;
font-size: 10px;
}
/* controle */
#viewer_control > a{
width: 53px;
height: 53px;
text-indent: -9999px;
background-color: #bc2148;
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 36px;
border-radius: 100%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: opacity 300ms ease;
}
#viewer_control.hide > a{
opacity: 0;
}
#viewer_control > a.next{
background-image: url(../img/arr_l_w.png);
left: 6px;
}
#viewer_control > a.prev{
background-image: url(../img/arr_r_w.png);
right: 6px;
}
/* main */
#viewer_main{
position: relative;
margin: 0 auto;
overflow: hidden;
}
#viewer.text #viewer_main{
background-color: white;
}
/* page */
#viewer .page_content{
float: right;
overflow: hidden;
}
#viewer .scroll_bar{
height: 100%;
width: 100%;
padding-bottom: 40px;
overflow-y: hidden;
overflow-x: scroll;
}
#viewer .page{
float: right;
height: 100%;
position: relative;
}
#viewer .info_content{
position: relative;
float: right;
}
#viewer .info_content .spread{
float: right;
height: 100%;
position: relative;
}
#viewer .info_page .content{
text-align: left;
}
#viewer .info_page .content,
#viewer .info_content .spread .content{
height: 522px;
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
padding: 0 40px;
}
#viewer_main.single .manga_page.blank{
display: none;
}
#viewer .scroll{
position: relative;
}
/* item list */
#viewer .other_items_list_circle,
#viewer .other_items_list{
padding: 10px 0 0px;
}
#viewer_main .other_items_list ul{
padding-top: 10px;
margin-bottom: 10px;
}
#viewer_main.single .other_items_list ul li,
#viewer_main.single .other_items_list_circle ul li{
width: 33.3%;
}
#viewer_main.single .other_items_list ul li:nth-child(4),
#viewer_main.single .other_items_list ul li:nth-child(5),
#viewer_main.single .other_items_list_circle ul li:nth-child(4),
#viewer_main.single .other_items_list_circle ul li:nth-child(5){
display: none;
}
#viewer .other_items_list h4{
margin-bottom: 0px;
}
#viewer .other_items_list_circle h4,
#viewer .other_items_list ul li p.title,
#viewer .other_items_list_circle ul li p.title{
max-height: 40px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
#viewer .other_items_list_circle h4{
margin-bottom: 0;
}
#viewer .other_items_list_circle ul li p.title{
font-family: "中ゴシックBBB", YuGothic;
}
#viewer .other_items_list ul li p{
padding: 0;
}
#viewer .other_items_list ul li a{
padding: 10px 5px 15px;
}
#viewer .other_items_list_news h4{
margin-bottom: 10px;
padding: 10px 0 0;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
border-top: 1px solid black;
color: #bc2249;
}
#viewer .other_items_list_news h4 span{
display: inline-block;
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
#viewer .other_items_list_news li .thumbnail img{
max-width: 100%;
max-height: 100%;
}
/* pagenation */
#viewer_pagenation{
background-color: #bdbdbd;
overflow: hidden;
position: absolute;
top: 0; left: 0; right: 0;
}
#viewer_pagenation span{
display: block;
float: right;
background-color: #bc2148;
height: 5px;
width: 0;
}
#viewer.bind_left #viewer_pagenation span{
float: left;
}
#viewer.bind_left footer .prev{
padding-left: 24px;
background: url(../img/arr_l_r.png) no-repeat left center;
left: 10px;
right: auto;
background-size: contain;
}
#viewer.bind_left footer .next{
padding-right: 24px;
background: url(../img/arr_r_r.png) no-repeat right center;
right: 10px;
left: auto;
background-size: contain;
}
/* manga */
#viewer.manga .scroll{
height: 100%;
}
#viewer.manga .manga_page{
height: 100%;
text-align: center;
position: relative;
background-color: white;
}
#viewer.manga .manga_page .manga_page_con{
display: table-cell;
vertical-align: middle;
position: relative;
}
#viewer.manga .manga_page .manga_page_con .manga_page_image{
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url(../img/loading.gif?v=2) no-repeat center center #fffce2;
background-size: 25px 25px;
}
#viewer.manga .manga_page .manga_page_con .manga_page_image.loaded{
position: relative;
top: auto; left: auto; right: auto; bottom: auto;
background: none;
}
#viewer.manga .manga_page:nth-child(even){
padding-left: 45px;
}
#viewer.manga .manga_page:last-child{
padding-left: 0 !important;
}
#viewer.manga .manga_page:nth-child(even):after{
content: "";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0;
width: 45px;
background: #FFFCE2;
}
#viewer.manga .manga_page .manga_page_con .iframe_wrap{
position: absolute;
left: 20px; right: 20px;
height: 0;
padding-top: 56.25%;
top: 50%;
transform: translateY(-50%);
}
#viewer.manga .manga_page .manga_page_con .iframe_wrap iframe,
#viewer.manga .manga_page .manga_page_con .iframe_wrap video{
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
width: 100%; height: 100%;
}
#viewer.manga #viewer_container.no_koguchi .manga_page:after,
#viewer.manga .manga_page:last-child:after{
display: none !important;
}
#viewer.manga.bind_left .manga_page:nth-child(even){
padding-left: 0;
padding-right: 45px;
}
#viewer.manga.bind_left .manga_page:nth-child(even):after{
left: auto;
right: 0;
}
#viewer.manga #viewer_container.no_koguchi .manga_page{
padding-left: 0 !important;
padding-right: 0 !important;
}
#viewer_main.single .manga_page:nth-child(even){
padding: 0 !important;
}
#viewer_main.single .manga_page:nth-child(even):after{
display: none !important;
}
#viewer.manga .manga_page img{
max-height: 100%;
max-width: 100%;
height: auto !important;
width: auto !important;
}
#viewer.manga.bind_right .manga_page{
float: right;
}
#viewer.manga.bind_left .page,
#viewer.manga.bind_left .info_content .spread{
float: left;
}
#viewer.manga.bind_left .manga_page{
float: left;
}
/* text */
#viewer.text .page_content{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size: 18px;
line-height: 33px;
letter-spacing: 0.03em;
height: 22em;
text-align: justify;
padding-right: 50px;
padding-left: 100px;
font-family: '秀英丸ゴシック L', YuGothic;
}
#viewer.text .page_content p+p{
padding-right: 1em;
}
#viewer.text .page_content .post_title{
font-family: '秀英丸ゴシック B', YuGothic;
padding: 0;
}
#viewer.text .page_content .post_author{
text-align: right;
}
#viewer.text .page_content .post_title.no_author,
#viewer.text .page_content .post_author{
margin-left: 2em;
padding: 0;
}
#viewer.text .page_content p img{
max-height: 100%;
width: auto;
padding: 0 1em;
}
#viewer .page_content .shop_link{
padding: 2px 0 !important;
}
#viewer .page_content .shop_link img{
width: 74px !important;
height: auto !important;
}
/* GENERAL CONTENT */
.general_content{
padding: 45px 40px 120px;
}
.general_content h2{
margin-bottom: 40px;
}
.general_content > div + div{
margin-top: 45px;
}
.general_content > div > div{
padding: 35px 60px;
font-size: 16px;
line-height: 35px;
background-color: white;
}
.general_content > div > div p{
font-size: 16px;
line-height: 24px;
}
.general_content > div > div p + p{
margin-top: 50px;
}
.general_content > div > div .text_right{
text-align: right;
}
.general_content .articles{
padding: 0;
background-color: transparent;
line-height: 1em;
}
/* CONTACT */
.general_content .contact p:first-child{
margin: 0;
}
.general_content .contact p{
margin-top: 30px;
}
.general_content .contact .label{
display: block;
font-size: 12px;
line-height: 1em;
margin-bottom: 4px;
font-family: "見出ゴMB31", YuGothic;
}
.general_content .contact .label.required:after{
content: "※";
color: #BD2249;
display: inline;
}
.general_content .contact input[type="text"],
.general_content .contact input[type="number"],
.general_content .contact input[type="tel"],
.general_content .contact input[type="email"]{
width: 160px;
padding: 0 5px;
font-size: 12px;
line-height: 27px;
border: 1px solid #c9c9c9;
display: block;
font-family: YuGothic;
}
.general_content .contact .select{
margin-top: 30px;
position: relative;
font-family: "見出ゴMB31", YuGothic;
}
.general_content .contact .select:after{
content: "";
width: 9px;
height: 8px;
position: absolute;
left: 182px;
top: 50%;
margin-top: -4px;
background: url(../img/select_tri.png) no-repeat center center;
}
.general_content .contact .select select{
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
border: 0;
margin: 0;
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
box-sizing: content-box;
width: 190px;
font-size: 12px;
padding: 5px;
color: white;
background-color: #bdbdbd;
display: block;
}
.general_content .contact .textarea{
max-width: 497px;
margin-top: 0;
}
.general_content .contact textarea{
box-sizing: border-box;
width: 100%;
height: 128px;
padding: 5px;
font-size: 12px;
border: 1px solid #c9c9c9;
}
.general_content .contact .privacy{
font-size: 10px;
line-height: 18px;
padding-left: 1em;
}
.general_content .contact .accept{
margin-top: 30px;
font-size: 12px;
line-height: 1em;
}
.general_content .contact .accept input{
margin: 0;
}
.general_content .contact input[type="submit"]{
width: 106px;
height: 29px;
margin-top: 30px;
color: white;
border: 0;
border-radius: 10px;
background-color: #A3A3A3;
font-family: "見出ゴMB31", YuGothic;
}
.general_content span.wpcf7-not-valid-tip{
padding: 5px 0;
font-size: 11px !important;
font-family: "中ゴシックBBB", YuGothic !important;
}
.general_content div.wpcf7-mail-sent-ok{
border: none;
color: #bc2148;
text-align: center;
}
/* NEWS */
section > .news_articles{
padding: 100px 40px 120px;
}
.news_articles article{
margin-bottom: 10px;
background-color: white;
overflow: hidden;
}
.news_articles article a{
text-decoration: none;
display: block;
overflow: hidden;
cursor: pointer;
}
.news_articles article .thumbnail{
width: 175px;
float: left;
}
.news_articles article .thumbnail img{
vertical-align: bottom;
}
.news_articles article .detail{
padding: 20px 20px 13px;
box-sizing: border-box;
}
.news_articles article .thumbnail+.detail{
margin-left: 175px;
}
.news_articles article .detail time{
font-size: 12px;
}
.news_articles article .detail h3{
margin: 10px 0 13px;
font-size: 22px;
line-height: 22px;
color: #bc2148;
font-family: "中ゴシックBBB", YuGothic;
}
.news_articles article .detail p{
height: 78px;
font-size: 16px;
line-height: 28px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.news_articles .read_more{
margin-top: 20px;
text-align: center;
}
.news_articles .read_more a{
padding-bottom: 25px;
font-size: 16px;
text-decoration: none;
background: url(../img/arr_d_r.png) no-repeat center bottom;
background-size: 28px 15px;
display: inline-block;
}
.news_single header{
margin-bottom: 20px;
}
.news_single header .time{
margin-bottom: 10px;
font-size: 18px;
line-height: 1em;
}
.news_single header h3{
font-size: 22px;
color: #bc2148;
}
.news_single .content p{
margin-top: 1em;
line-height: 26px;
}
.news_single .content img{
max-width: 100%;
margin: 0 auto 10px;
display: block;
}
/* recent post */
.recent_post{
margin-top: 10px;
padding: 30px 0 40px 40px;
background-color: white;
position: relative;
}
.recent_post a{
text-decoration: none;
}
.recent_post ul{
overflow: hidden;
}
.recent_post ul li{
width: 290px;
margin-top: 10px;
margin-right: 40px;
font-size: 14px;
line-height: 17px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.recent_post ul li time{
padding-right: 14px;
}
.gallery_list .more_button,
.recent_post .more_button{
width: 32px;
height: 32px;
text-indent: -9999px;
background: #bc2148 url(../img/arr_d_w.png) no-repeat center center;
background-size: 22px 12px;
border-radius: 100%;
position: absolute;
left: 50%;
bottom: -22px;
margin-left: -16px;
cursor: pointer;
-webkit-transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
}
.recent_post.open .more_button{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/* item list */
.item_list{
padding: 45px 40px 80px;
}
.item_list ul{
max-width: 755px;
margin: 0 -10px;
margin-top: 35px;
overflow: hidden;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.item_list ul li{
width: 240px;
margin: 0 0 20px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
}
.item_list ul li a{
display: block;
margin: 0 10px;
min-height: 100%;
box-sizing: border-box;
padding: 10px 13px 20px;
background-color: white;
text-decoration: none;
}
.item_list ul li .thumbnail{
margin-bottom: 8px;
text-align: center;
overflow: hidden;
}
.item_list ul li .thumbnail img{
height: 194px;
}
.item_list ul li h3{
margin-bottom: 12px;
font-size: 14px;
line-height: 21px;
}
.item_list ul li p{
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 994px){
.item_list ul li{
width: 50%;
}
}
@media screen and (max-width: 750px){
.item_list ul{
display: block;
}
.item_list ul li{
width: 100%;
max-width: 240px;
margin: 0 auto 20px;
}
}
/* item_mordal */
#item_modal_wrapper{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 10px;
background: rgba(0,0,0, 0.5);
z-index: 100;
display: none;
}
#item_modal_wrapper > .close{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
#item_modal_container{
width: 100%;
max-width: 1000px;
height: 95vh;
max-height: 800px;
background-color: white;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
overflow: hidden;
}
#item_modal_container > .close{
width: 40px;
height: 40px;
background: url(../img/close_btn.png) no-repeat center center;
background-size: 40px 40px;
position: fixed;
right: 14px;
top: 9px;
cursor: pointer;
z-index: 2;
}
#item_modal_container .article_container{
position: absolute;
padding: 0 70px;
top: 0; left: ; right: 0; bottom: 0;
overflow: hidden;
box-sizing: border-box;
min-width: 568px;
width: 100%;
}
.item_modal_inner{
overflow: hidden;
}
.item_modal{
width: 450px;
padding-bottom: 55px;
}
.item_modal .thumbnail{
width: 332px;
margin: 0 auto;
text-align: center;
}
.item_modal .thumbnail img{
max-width: 100%;
height: auto;
}
.item_modal .shop{
width: 332px;
margin: 30px auto 0;
overflow: hidden;
}
.item_modal .shop li{
width: 148px;
height: 60px;
margin: 0 8px 5px;
border: 1px solid #2f2f2f;
float: left;
}
.item_modal_large{
min-width: 568px;
padding: 70px 20px 80px;
width: 100%;
box-sizing: border-box;
}
.item_modal_large .left{
width: 222px;
float: left;
}
.item_modal_large .left .thumbnail{
text-align: center;
}
.item_modal_large .left .thumbnail img{
max-width: 100%;
height: auto;
}
.item_modal_large .left .shop{
width: 150px;
margin: 30px auto 0;
}
.item_modal_large .left .shop li{
border: 1px solid #2f2f2f;
margin-bottom: 5px;
}
.item_modal_large .right{
margin-left: 282px;
}
.item_modal_large .right h4{
margin-bottom: 1em;
font-size: 22px;
line-height: 30px;
}
.item_modal_large .right p{
margin-bottom: 1em;
font-size: 16px;
line-height: 28px;
}
.item_modal_large .right .browsing{
text-decoration: none;
height: 19px;
line-height: 17px;
background-size: auto 68px;
width: 160px;
margin: 2em auto 0;
}
.item_modal_large .right .browsing a{
text-decoration: none;
font-family: '秀英丸ゴシック L', YuGothic;
}
.item_modal_large .right .browsing a:before{
content: "";
display: inline-block;
width: 20px;
height: 17px;
background: url(../img/menu_bg_1.png) no-repeat left top;
background-size: auto 68px;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
.item_modal_large .right .browsing a:hover:before{
animation: menu_bg_2 0.2s steps(3) forwards;
}
/* GALLERY */
#gallery_single .work_detail .description{
margin-bottom: 45px;
}
#gallery_single .work_detail .profile{
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-bottom: 40px;
}
#gallery_single .content_box{
text-align: center;
}
#gallery_single .content_box a{
display: inline-block;
position: relative;
max-width: 50%;
}
#gallery_single .content_box a:after{
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
right: 10px;
bottom: 10px;
background: url(../img/zoom_icon.png) no-repeat center center;
background-size: contain;
}
#gallery_single .content_box div+div{
margin-top: 30px;
}
#gallery_single .content_box img{
max-width: 100%;
display: inline;
margin: 0;
}
#gallery_single .content_box p{
font-size: 10px !important;
line-height: 12px !important;
margin-top: 8px !important;
text-align: center;
display: block;
width: 100%;
}
#gallery_single .work_detail .profile .description{
margin-bottom: 0;
font-size: 13px;
line-height: 20px;
}
.gallery_list{
padding: 100px 40px;
}
.work_detail .gallery_list{
padding: 0;
position: relative;
}
.gallery_list ul{
margin: 40px -25px 0;
overflow: hidden;
}
.gallery_list ul li{
width: 50%;
margin: 0 0 20px;
text-align: center;
float: left;
}
.gallery_list ul li a{
display: block;
margin: 0 25px;
text-decoration: none;
}
.gallery_list ul li .thumbnail{
margin-bottom: 10px;
}
.gallery_list ul li .thumbnail{
/* height: 160px; */
}
.gallery_list ul li .thumbnail img{
width: 100%;
height: auto;
}
.gallery_list ul li h3{
margin-bottom: 8px;
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gallery_list ul li p{
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gallery_list .content_title_2{
border-bottom: none;
}
/* pager */
.wp-pagenavi{
margin-top: 60px;
text-align: center;
}
.wp-pagenavi > *{
margin: 0 10px;
font-size: 16px;
line-height: 17px;
text-decoration: none;
display: inline-block;
}
.wp-pagenavi .previouspostslink{
padding-left: 20px;
background: url(../img/arr_l_b.png) no-repeat left center;
}
.wp-pagenavi .nextpostslink{
padding-right: 20px;
background: url(../img/arr_r_b.png) no-repeat right center;
}
#gallery_viewer{
width: 100vw;
height: 100vh;
padding: 40px 40px 70px;
box-sizing: border-box;
background: #fffde3;
overflow: hidden;
}
#gallery_viewer p{
position: relative;
display: table-cell;
width: 100vw;
height: calc(100vh - 110px);
text-align: center;
vertical-align: middle;
}
#gallery_viewer p img{
max-width: 100%;
max-height: 100%;
}
#gallery_viewer footer{
position: absolute;
left: 0; right: 0; bottom: 30px;
}
#gallery_viewer footer img{
height: 33px;
}
#gallery_viewer footer .close img{
height: 20px;
}
#gallery_viewer footer .close{
display: block;
width: 20px;
margin: 0 auto;
}
#gallery_viewer footer .prev,
#gallery_viewer footer .next{
display: block;
position: absolute;
top: 0;
}
#gallery_viewer footer .prev{
right: 40px;
}
#gallery_viewer footer .next{
left: 40px;
}
div.wpcf7-mail-sent-ng,
div.wpcf7-validation-errors{
border-color: #bc2148 !important;
}
/*
.hadsWrap iframe{
height: auto !important;
width: auto !important;
}
*/
.hads_wrap{
text-align: center;
}
.content_list .ads{
text-align: center;
}
.content_list .hads_wrap{
display: inline-block;
}
.content_list .hads_wrap+.hads_wrap{
margin-left: 10px;
}
@media screen and (max-width: 890px){
.content_list .hads_wrap+.hads_wrap{
margin-top: 10px;
margin-left: 0;
}
}
#hads_to-ti_series_under_description{
padding-top: 35px;
}
#hads_to-ti_series_footer{
padding-top: 20px;
}
#hads_to-ti_viewer_pc_1st_top,
#hads_to-ti_viewer_pc_last_top{
position: absolute;
top: 50%;
margin-top: -290px;
left: 50%;
transform: translateX(-50%);
}
#hads_to-ti_viewer_pc_1st_bottom,
#hads_to-ti_viewer_pc_last_bottom{
position: absolute;
top: 50%;
margin-top: 10px;
left: 50%;
transform: translateX(-50%);
}