@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%); }