/*================================================== = defalut = ==================================================*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,li,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-weight:normal;vertical-align:baseline;background:transparent;}body{line-height:1;}li,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}deltext-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}img{vertical-align:bottom;} html{width:100%; height:100%; font-size: 62.5%;-webkit-text-size-adjust: 100%;} body{width: 100%; height:100%; word-wrap: break-word;color: #3b3b3b;font-family: sans-serif;position:relative;} img {max-width: 100%; height: auto;} .cf:before,.cf:after {content:"";display:table;} .cf:after {clear:both;} .cf {*zoom:1;} a{color: #006; text-decoration: underline; transition: 0.5s; -webkit-transition: 0.5s;0} a:hover{color: #006; text-decoration: none;} a img, x:-moz-any-link, x:default {box-shadow: #000 0 0 0;} a.alpha:hover{ opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; -moz-opacity:0.7; -khtml-opacity: 0.7; zoom:1; } #container {position: relative;background-color: #fff;} .w960{width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px; position: relative;} .bold{font-weight: bold;} /*共通見出し記号設定*/ .marker {display: block;padding-left: 1.5em;} .marker::before {content: "";display: block;float: left;margin-left: -1.5em;width: 1em;text-align: center;} .marker.type_disc::before {content: "・";} /*================================================== = common = ==================================================*/ /*header*/ #header_pc {background: url("../image/kakuriyo_bg_header.jpg") left top repeat; width: 100%; /*height: 100px; border-bottom: 1px solid #e5e5e5;*/} #header_pc .mainImage{width: 100%; height: 670px; background: url("../image/kakuriyo_header_pc.png") center center no-repeat;} /*#header_pc .mainImage h1{display: none;}*/ #header_pc .mainImage .w960{height: 670px;} #header_pc .mainImage img{display:block;} #header_pc .mainImage h1.logo{position: absolute; top: 25px; left: 0; right: 0; margin:0 auto; width: 390px; height: 470px;} #header_pc .mainImage .Lbunko{position: absolute; top: 20px; left: 0; width: 180px; height: 50px;} #header_pc .mainImage .lead{position: absolute; bottom: 15px; left: 0; right: 0; margin:0 auto; width: 540px; height: 140px;} #header_pc .mainImage .book{position: absolute; bottom: 25px; left: 20px; right: 5px; margin:0; width: 193px; height: 249px;} #header_pc #header_pc_menu_b{width: 100%; display: table; padding: 20px 0;} #header_pc #header_pc_menu_b nav{display: table-cell; vertical-align: middle;} #header_pc #header_pc_menu_b nav ul{width: 100%;} #header_pc #header_pc_menu_b nav ul li{float: left; width: 16%; border-left: 1px solid #d0c9bf; text-align: center; height: 180px;} #header_pc #header_pc_menu_b nav ul li:last-child{border-right: 1px solid #d0c9bf;} #header_pc #header_pc_menu_b .sns{display: table-cell; vertical-align: middle; width: 100px;padding: 0 30px;} #header_pc #header_pc_menu_b .sns li{margin-bottom: 10px;} #header_pc #header_pc_menu_b .sns li:last-child{margin-bottom: 0;} #header_pc_fixed{position: fixed; background: url("../image/kakuriyo_bg_header.jpg") left top repeat; width: 100%; z-index: 999;display: none; box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6); -moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6);} #header_pc_fixed #header_pc_menu_fixed{width: 100%; display: table; padding: 20px 0;} #header_pc_fixed #header_pc_menu_fixed nav{display: table-cell; vertical-align: middle;} #header_pc_fixed #header_pc_menu_fixed nav ul li{float: left; text-align: center; height: 40px;} #header_pc_fixed #header_pc_menu_fixed nav ul li.small{width: 13%;} #header_pc_fixed #header_pc_menu_fixed nav ul li.big{width: 19%;} #header_pc_fixed #header_pc_menu_fixed .sns{display: table-cell; vertical-align: middle; width: 108px;} #header_pc_fixed #header_pc_menu_fixed .sns li{width: 30px;float: left;margin-left: 6px;} #header_sp{padding-top: 60px;} @media only screen and (max-width : 980px) { #header_pc .mainImage .book{position: absolute; bottom: 150px; left: 30px; right: 0; margin:0; width: 160px;} } @media only screen and (max-width : 750px) { .sp_book{ position: relative; } .sp_book_absolute{ width: 120px; position: absolute; left: 3vw; bottom: 18vh; } } @media only screen and (max-width : 500px) { .sp_book{ position: relative; } .sp_book_absolute{ width: 85px; position: absolute; left: 3vw; bottom: 14vh; } } @media only screen and (max-width : 375px) { .sp_book{ position: relative; } .sp_book_absolute{ width: 75px; position: absolute; left: 3vw; bottom: 11vh; } } /*bg*/ #container .bg_asa_white{width: 100%; height: auto; background: url("../image/kakuriyo_bg_asa_white.jpg") left top repeat; background-size: 25% auto; padding: 60px 0 40px;} #container .bg_plants{width: 100%; height: auto; background-image:url("../image/kakuriyo_bg_plants.png"), url("../image/kakuriyo_bg_plants_bg.jpg"); background-repeat: repeat,repeat; background-position: left top,left top; padding: 140px 0 100px;} #container .bg_asa_pink{width: 100%; height: auto; background: url("../image/kakuriyo_bg_asa_pink.jpg") left top repeat; background-size: 25% auto; border-top: 5px solid #c73d88; padding: 100px 0;} #container .bg_book{width: 100%; height: auto; background: url("../image/kakuriyo_bg_book.jpg") left top repeat; border-top: 5px solid #073b39; padding: 40px 0 120px;} #container .bg_comic{width: 100%; height: auto; background: url("../image/kakuriyo_bg_comic.jpg") left top repeat; border-top: 5px solid #4c492a; padding: 40px 0 50px;} /*footer*/ footer{background:#000; padding: 40px 0;} footer .inner_w1200{text-align: center;} footer .bnr{width: 100%; max-width: 630px; margin: 0 auto 30px; text-align:center;} footer .bnr li{width: 300px;} footer .bnr li:nth-child(odd){float:left; margin-right:10px;} footer .bnr li:nth-child(even){float:right; margin-left:10px;} footer .sns{width: 180px; margin: 0 auto 20px; text-align:center;} footer .sns li{width: 40px; float:left; margin-right: 30px;} footer .sns li:last-child{margin-right: 0;} footer .copyright{margin-top: 10px; color: #fff;text-align: center;font-size: 14px; line-height: 1.2;} footer .copyright small{font-size: 14px;} /*pagetop*/ .pagetop {display: none; position: fixed; bottom: 50px; right: 40px; z-index: 10;} .pagetop a {display: block; width: 80px; height: 80px;} @media only screen and (max-width: 750px){ .sp_menu_none {display:none;} } @media only screen and (min-width: 751px){ .pc_menu_none {display:none;} } @media only screen and (max-width: 750px){ #container .bg_asa_white{padding: 30px 0 20px;} #container .bg_plants{padding: 50px 0; background-size: 75% auto;} #container .bg_asa_pink{padding: 50px 0;} #container .bg_book{padding: 10px 0 50px;} #container .bg_comic{padding: 20px 0 50px;} footer .bnr{width: 100%;margin: 0 auto 15px; text-align:center;} footer .bnr li{width: 50%;} footer .bnr li img{width: 90%;} footer .bnr li:nth-child(odd){float:left; margin-right: 0;} footer .bnr li:nth-child(even){float:right; margin-left: 0;} footer .sns{width: 100px; margin: 0 auto 10px; text-align:center;} footer .sns li{width: 20px; float:left; margin-right: 20px;} footer .sns li:last-child{margin-right: 0;} footer .copyright{margin-top: 10px; color: #fff;text-align: center;font-size: 10px; line-height: 1.2;} footer .copyright small{font-size: 10px;} .pagetop {display: none; position: fixed; bottom: 20px; right: 10px;} .pagetop a {display: block; width: 60px; height: 60px;} } #news{width: 100%;border:3px solid #000;padding: 3px; position: relative; background: #fff;} #news .news_col{width: 95%;} #news h2{position: absolute; top: -30px; left: 10px; width: 80px;} #news .news_line_outline{border: 1px solid #000; padding: 15px;} #news .news_inner{width: 100%; padding-left: 90px;} #news .news_inner ul{height: 300px; overflow-y: scroll;} #news li.one_news{border-bottom: 1px solid #ccc; padding: 20px 0;} #news li.one_news:last-child{border-bottom: 0:} #news .news_inner .one_news{font-size: 16px; line-height: 1.4;} #news li.one_news .news_day{color: #6d0404; font-weight: bold; font-size: 16px} #news li.one_news .news_day, #news li.one_news .news_text{padding: 0 20px;} #news li.one_news .news_text a{color: #3b3b3b; text-decoration: none; display:block;} #news li.one_news .news_text a:hover{color: #fff; text-decoration: none; background: #b7203f;} @media only screen and (max-width: 750px){ #news .news_col{width: 100%;} #news h2{position: absolute; top: -10px; left: 10px; width: 40px;} #news .news_inner{width: 100%; padding-left: 40px;} #news .news_inner ul{height: 150px; overflow-y: scroll;} #news li.one_news{border-bottom: 1px solid #ccc; padding: 15px 0;} #news li.one_news .news_day{margin-bottom: 5px; color: #6d0404; font-weight: bold; font-size: 12px} #news .news_inner .one_news{font-size: 12px; line-height: 1.4;} } #container .item{width: 100%; display: table; margin-top: 40px;} #container .item .twitter{display: table-cell; vertical-align: top; padding-right: 40px;} #container .item .bnr{display: table-cell; vertical-align: top; width: 350px;} #container .item .bnr:only-child{display: block;} #container .item .bnr h2{border-left: 10px solid #000; padding-left: 10px; margin-bottom: 5px;} #container .item .bnr h2 img{width: 116px; vertical-align: middle;} #container .item .bnr li{width: 100%;margin-bottom: 10px;} #container .item .bnr li a{display: block;} #container .item .bnr li:last-child{margin-bottom: 0;} #container .btn_blank{text-align: center;} #container .btn_blank a{text-decoration: none; width: 100%; display: block; color: #fff; font-weight: bold; padding: 30px 0; font-size:26px;} #container .btn_blank a:hover{opacity: 0.7;} #container .btn_blank a:before{background:url(../image/kakuriyo_icon_blank.png) 0 0 no-repeat;background-size:36px 36px;content:"";display:inline-block;width:36px; height:36px;position:relative;top:5px;left: -13px;} #container .btn_blank--mini{ margin-top: 30px; } #container .btn_blank--mini a{ display: inline; color: #ab0505; text-decoration: underline; font-size: 18px; } #container .btn_blank--mini a:before{ width: 28px; height: 28px; background-size:28px 28px; mask-size:28px 28px; background-blend-mode: multiply; mask-image: url(../image/kakuriyo_icon_blank.png); -webkit-mask-image: url(../image/kakuriyo_icon_blank.png); background-color: #ab0505; } #container .btn_blank.anime_official a{background: -moz-linear-gradient(left, #633195, #5f9bd1); background: -webkit-linear-gradient(left, #633195, #5f9bd1); background: linear-gradient(to right, #633195, #5f9bd1);} #container .btn_blank.comic_official a{background: -moz-linear-gradient(left, #4cbe92, #197681); background: -webkit-linear-gradient(left, #4cbe92, #197681); background: linear-gradient(to right, #4cbe92, #197681);} @media only screen and (max-width: 750px){ #container .item .twitter{padding-right: 0; margin-bottom: 40px;} #container .item .twitter,#container .item .bnr{display:block; width: 100%;} #container .item .bnr h2{border-left: 5px solid #000; padding-left: 10px; margin-bottom: 5px;} #container .item .bnr h2 img{width: 100px; vertical-align: middle;} #container .item .bnr ul{width: 100%;} #container .item .bnr li{width: 50%; float: left; text-align: center;} #container .item .bnr li:nth-child(odd){padding-right:1%;} #container .item .bnr li:nth-child(even){padding-left:1%;} #container .btn_blank a{width: 100%; display: block; color: #fff; font-weight: bold; padding: 30px 0; font-size:16px;} #container .btn_blank a:before{background-size:18px 18px;width:18px;height:18px;position:relative;top:5px;left: -13px;} #container .btn_blank--mini a{ display: inline; color: #ab0505; } #container .btn_blank--mini a:before{ mask-size:18px 18px; } } #container .bg_plants h2{width: 500px; position: absolute; top: -40px; right: 0; left: 0; margin: auto;} #container .bg_plants .line_box{width: 100%;background-color: #fff; padding: 70px 30px 40px; border-radius: 10px;} #container .bg_plants #story .line_box{border: 6px solid #242f51; background-image:url("../image/story/kakuriyo_story_bg_bottom-right.png"), url("../image/story/kakuriyo_story_bg_top-left.png"), url("../image/story/kakuriyo_story_bg_top-right.png"), url("../image/story/kakuriyo_story_bg_bottom-left.png"); background-repeat: no-repeat,no-repeat,no-repeat,no-repeat; background-position: 98% 90%,3% 10%,95% 10%,3% 80%;} #container .bg_plants #character .line_box{border: 6px solid #a9355d;} #container .bg_plants #recipe .line_box{border: 6px solid #8f1628;} #story, #character, #recipe{position: relative;} #story, #character{margin-bottom: 120px;} #story .line_box .text{position: relative; z-index: 2;} #story .ginji{width: 200px;position: absolute; left: 2%; bottom:-20px; z-index: 1;} #story .line_box p{text-align: center; line-height: 1.2;text-shadow: 2px 2px 3px #fff, -1px -1px 1px #fff;} #story .line_box p.lead01{color: #347079; font-size: 28px; font-weight: bold;} #story .line_box p.lead02{font-size: 22px; line-height: 1.2; padding: 30px 0;} #story .line_box p.lead02 .aoi{color: #84004c; font-weight: bold;} #story .line_box p.lead03{color: #d12437; font-size: 30px; font-weight: bold;} #character ul.chara_list li{border: 1px solid #c9c9c9; margin-bottom: 20px;} #character ul.chara_list.main li{width: 100%; display: table; padding: 20px;} #character ul.chara_list.main li figure{width: 380px; display: table-cell;vertical-align: middle;} #character ul.chara_list.main li .detail{display: table-cell;vertical-align: middle; padding-left: 20px;} #character ul.chara_list.main li .detail h3{text-align: center; width: 100%; max-width: 350px; margin: 0 auto 10px;} #character ul.chara_list.main li .detail p{font-size: 18px; line-height: 1.3;} #character ul.chara_list.sub li .inner{width: 100%; display: table; padding: 10px;} #character ul.chara_list.sub li figure{width:50%;max-width: 200px; display: table-cell;vertical-align: top;} #character ul.chara_list.sub li .detail{display: table-cell;vertical-align: top; padding-left: 10px; padding-top: 10px;} #character ul.chara_list.sub li .detail h3{width: 150px; margin-bottom: 10px;} #character ul.chara_list.sub li .detail p{font-size: 16px; line-height: 1.3;} #character ul.chara_list.sub_s li{width: 100%; padding: 20px;} #character ul.chara_list.sub_s li h3{width: 160px; margin-bottom: 10px;} #character ul.chara_list.sub_s li p{font-size: 16px; line-height: 1.3;} #recipe .lead{border-top: 3px solid #600512;border-bottom: 3px solid #600512; padding: 3px 0; margin-bottom: 30px;} #recipe .lead .line-inner{border-top: 1px solid #600512;border-bottom: 1px solid #600512; padding: 15px 0;text-align: center;} #recipe .lead .line-inner h3{width: 90%; margin: 0 auto;} #recipe .recipe_box{width: 100%; display: table;} #recipe .recipe_box .menu_list{width: 65%; display: table-cell;vertical-align: top; padding-right: 30px;} #recipe .recipe_box .menu_list li{margin-bottom: 30px;} #recipe .recipe_box .menu_list li:last-child{margin-bottom: 0;} #recipe .recipe_box .menu_list h4{width: 260px; margin-bottom: 10px;} #recipe .recipe_box .menu_list p{font-size: 18px; line-height: 1.3;} #recipe .recipe_box figure{width: 25%; display: table-cell; vertical-align: top;} @media only screen and (max-width: 750px){ #container .bg_plants h2{width: 250px; position: absolute; top: -20px; right: 0; left: 0; margin: auto;} #container .bg_plants .line_box{padding: 40px 20px 20px;} #container .bg_plants #story .line_box{border: 4px solid #242f51; background-size: 50% auto,50% auto,30% auto,25% auto;padding-top: 40px; padding-bottom: 30px;} #container .bg_plants #character .line_box{border: 4px solid #a9355d;} #container .bg_plants #recipe .line_box{border: 4px solid #8f1628;} #story, #character{margin-bottom: 70px;} #story .ginji{width: 105px; bottom:-10px;} #story .line_box p.lead01{font-size: 20px;} #story .line_box p.lead02{font-size: 15px; padding: 15px 0;} #story .line_box p.lead03{font-size: 20px;} #character ul.chara_list li{margin-bottom: 10px;} #character ul.chara_list.main li figure{width: 90%; margin: 0 auto; max-width: 380px; display: block;} #character ul.chara_list.main li .detail{display: block; padding-left: 0;} #character ul.chara_list.main li .detail h3{width: 100%; max-width: 220px; margin-top: 5px;} #character ul.chara_list.main li .detail h3 img{width: 100%;} #character ul.chara_list.main li .detail p{font-size: 14px;} #character ul.chara_list.sub li figure{width: 35%;max-width: 120px; display: table-cell;vertical-align: top;} #character ul.chara_list.sub li .detail{padding-top: 3px;} #character ul.chara_list.sub li .detail h3{width: 100px; margin-bottom: 5px;} #character ul.chara_list.sub_s li h3{width: 120px; margin-bottom: 5px;} #character ul.chara_list.sub li .detail p,#character ul.chara_list.sub_s li p{font-size: 12px; line-height: 1.2;} #recipe .lead{margin-bottom: 20px;} #recipe .lead .line-inner{padding: 10px 0;} #recipe .lead .line-inner h3{width: 80%; max-width: 245px;margin: 0 auto;} #recipe .recipe_box .menu_list{width: 100%; display: block; padding-right: 0;} #recipe .recipe_box .menu_list li{margin-bottom: 20px;} #recipe .recipe_box .menu_list h4{width: 180px; margin-bottom: 7px;} #recipe .recipe_box .menu_list p{font-size: 14px;} #recipe .recipe_box figure{width: 90%; max-width: 445px; margin: 20px auto 0; display: block;} } #media {line-height: 1.3;} #media h2{width: 500px; margin: 0 auto 40px;} #media .anime_box{margin-bottom: 40px;} #media p.copyright{font-size: 10px; margin-top: 5px; text-align: left;} #media .detail h4{margin: 5px 0 15px;} #media .detail h4 img{width: 246px;} #media ul.housou_list{text-align: left;} #media ul.housou_list li{margin-bottom: 30px;} #media ul.housou_list h5{font-size: 24px; color: #ab0505; font-weight: bold;} #media ul.housou_list p{font-size: 22px; font-weight: bold;} #media p.housou_other{font-size: 20px; padding-left: 20px;} #media p.housou_other--mini{font-size: 16px;} #media .staff_list{background: #fff; padding: 20px; border-radius: 15px;} #media .staff_list.staff h4{border-bottom: 1px solid #9977c0; /*text-align: left;*/ padding-bottom: 5px;} #media .staff_list.staff h4 img{width: 158px;} #media .staff_list.cast h4{border-bottom: 1px solid #b14a95; padding-bottom: 5px;} #media .staff_list.cast h4 img{width: 141px;} #media .staff_list dl{padding-top: 20px;} #media .staff_list dt{font-weight: bold;font-size: 14px; line-height: 1.2;} #media .staff_list.staff dt{color: #9977c0;} #media .staff_list.cast dt{color: #b14a95;} #media .staff_list dd{font-size: 16px; line-height: 1.2; color: #3b3b3b;} @media only screen and (max-width: 750px){ #media h2{width: 250px; margin: 0 auto 20px;} #media .anime_box{margin-bottom: 20px;} #media .anime_box figure,#media .anime_box .detail h3{width: 80%; text-align: center; margin: 0 auto;} #media p.copyright{text-align: center;} #media .detail h4{margin: 5px 0 5px;text-align: center;} #media .detail h4 img{width: 180px;} #media ul.housou_list li{margin-bottom: 15px;} #media ul.housou_list h5{font-size: 18px;} #media ul.housou_list p{font-size: 16px; font-weight: bold;} #media ul.housou_list{text-align: center;} #media p.housou_other{font-size: 16px; padding-left: 0px; text-align: center;} #media .staff_list dl{padding-top: 20px;} #media .staff_list dt{font-weight: bold;font-size: 14px; text-align: center;margin: 0 0 5px; padidng:0;} #media .staff_list dd{font-size: 16px; color: #3b3b3b; text-align: center;margin: 0; padidng:0;} #media .staff_list h4{text-align: center!important;} #media .staff_list.staff h4 img{width: 148px;} #media .staff_list.cast h4 img{width: 130px;} } #book .title_box{width: 100%; height: auto; background-image:url("../image/book/kakuriyo_book_title_bg_tendon.png"), url("../image/book/kakuriyo_book_title_bg_sakura.png"); background-repeat: no-repeat,no-repeat; background-position: 96% top,right 5%;} #book .title_box h2{width: 520px;} #book ul.book_box{margin-top: -20px;} #book .asaoni_bnr{width: 100%; max-width: 805px; margin: 0 auto;} ul.book_box li.one_book{background: #fff; margin-bottom: 40px; padding: 40px 50px; } ul.book_box li.one_book .icon_new{width: 78px;position: absolute; left: -40px; top: -60px;} ul.book_box li.one_book .book_area{width: 100%; display: table;} ul.book_box li.one_book .book_area figure{width: 30%;max-width: 250px; display: table-cell; vertical-align: top;position: relative;} ul.book_box li.one_book .book_area .detail{display: table-cell; padding-left: 30px; vertical-align: middle;} ul.book_box li.one_book h2{font-weight: bold; font-size: 32px; line-height: 1.2; margin-bottom: 15px;} ul.book_box li.one_book h2 span{font-weight: bold; font-size: 26px;} ul.book_box li.one_book p.story{font-size: 18px; line-height: 1.4; padding-bottom: 20px;} ul.book_box li.one_book p.author{font-size: 16px; line-height: 1.4; padding-bottom: 20px;} ul.book_box li.one_book p.release{color: #fd7408; font-size: 20px; font-weight: bold;margin: 10px 0;} ul.book_box li.one_book .btn_area{border-top: 1px solid #c9c9c9; padding-top: 20px; margin-top: 20px; width: 100%;} ul.book_box li.one_book .btn_area .btn_area_inner{width: 100%; padding: 0; margin:0; } ul.book_box li.one_book .btn_area .btn_area_inner li{width: 48%;} ul.book_box li.one_book .btn_area .btn_area_inner li:nth-child(odd){float: left;margin-right:1%;} ul.book_box li.one_book .btn_area .btn_area_inner li:nth-child(even){float: right;margin-left:1%;} ul.book_box li.one_book .btn{text-align: center;} ul.book_box li.one_book .btn.trial{margin-top: 10px;} ul.book_box li.one_book .btn a{display: block; color: #fff; font-weight: bold;border-radius: 10px; font-size: 18px; line-height: 1.0;padding: 20px 10px; text-decoration: none;} ul.book_box li.one_book .btn a:hover{opacity: 0.7;} ul.book_box li.one_book .btn.ebook span{display: block; color: #fff; font-weight: bold;border-radius: 10px; font-size: 18px; line-height: 1.0;padding: 20px 10px;} ul.book_box li.one_book .btn.trial a{background: #d2363a; width: 425px; padding: 20px 10px;} ul.book_box li.one_book .btn.buy a{background: #cc0070;} ul.book_box li.one_book .btn.ebook a{background: #25356a;} ul.book_box li.one_book .btn.ebook_close{background: #888;} ul.book_box li.one_book .btn.ebook span{background: #ccc;} ul.book_box li.one_book .btn.trial a:before{background:url(../image/kakuriyo_icon_trial.png) 0 0 no-repeat;background-size:24px 20px;content:"";display:inline-block;width:24px; height:20px;position:relative;top:3px;left: -13px;} ul.book_box li.one_book .btn.buy a:before{background:url(../image/kakuriyo_icon_cart.png) 0 0 no-repeat;background-size:30px 26px;content:"";display:inline-block;width:30px; height:26px;position:relative;top:5px;left: -13px;} ul.book_box li.one_book .btn.ebook span:before,ul.book_box li.one_book .btn.ebook a:before{background:url(../image/kakuriyo_icon_ebook.png) 0 0 no-repeat;background-size:18px 26px;content:"";display:inline-block;width:18px; height:26px;position:relative;top:5px;left: -13px;} #comic .title_box h2{width: 660px; z-index: 2;position: relative;} #comic .detail_box{margin-top: -20px; z-index: 1;position: relative;} #comic .detail_box figure{width: 90%; max-width: 930px; margin: 0 auto 10px;} #comic .detail_box .lead_b{width: 90%; max-width:680px; margin: 0 auto 10px;} #comic .detail_box .lead_s{text-align: center; font-weight: bold; font-size: 22px; line-height: 1.2; margin-bottom: 40px;text-shadow: 2px 2px 3px #fff, -1px -1px 1px #fff;} #comic .detail_box .lead_s .red{color: #b20000; font-weight: bold; font-size: 26px; line-height: 1.2;} #comic ul.book_box{margin-top: 80px;} @media only screen and (max-width: 750px){ #book .title_box{width: 100%; height: auto; background-image:url("../image/book/kakuriyo_book_title_bg_sakura.png"); background-repeat: no-repeat; background-position: right top; background-size: 50% auto;} #book .title_box h2{width: 260px;} #comic .title_box h2{width: 290px;} #comic .detail_box figure{width: 90%; max-width: 750px; margin: 0 auto 10px;} #comic .detail_box .lead_b{width: 90%; max-width: 600px; margin: 0 auto 10px;} #comic .detail_box .lead_s{text-align: center; font-weight: bold; font-size: 16px; line-height: 1.2; margin-bottom: 20px;} #comic .detail_box .lead_s .red{color: #b20000; font-weight: bold; font-size: 20px; line-height: 1.2;} #comic ul.book_box{margin-top: 40px;} ul.book_box li.one_book .icon_new{width: 39px;position: absolute; left: -20px; top: -20px;} ul.book_box li.one_book h2 span{font-size: 18px;} ul.book_box li.one_book h2{font-weight: bold; font-size: 20px; margin-bottom: 8px;} ul.book_box li.one_book{margin-bottom: 20px; padding: 30px 20px;} ul.book_box li.one_book .btn_area{padding-top: 20px; margin-top: 10px; width: 100%;} ul.book_box li.one_book .book_area figure{width: 80%;max-width: 200px; display: block; margin: 0 auto 20px;} ul.book_box li.one_book .book_area .detail{display: block; padding-left: 0; width: 100%;} ul.book_box li.one_book p.story{font-size: 14px; padding-bottom: 10px;} ul.book_box li.one_book p.author{font-size: 12px; padding-bottom: 10px;} ul.book_box li.one_book p.release{color: #fd7408; font-size: 16px; font-weight: bold;margin: 5px 0;} ul.book_box li.one_book .btn.ebook span,ul.book_box li.one_book .btn a{font-size: 12px; padding: 17px 10px;border-radius: 7px; text-decoration: none;} ul.book_box li.one_book .btn.trial a{margin: 0 auto; width: 100%; padding: 20px 10px;} ul.book_box li.one_book .btn.trial a:before{background:url(../image/kakuriyo_icon_trial.png) 0 0 no-repeat;background-size:12px 10px;content:"";display:inline-block;width:12px; height:10px;position:relative;top:2px;left: -10px;} ul.book_box li.one_book .btn.buy a:before{background:url(../image/kakuriyo_icon_cart.png) 0 0 no-repeat;background-size:17px 15px;content:"";display:inline-block;width:17px; height:15px;position:relative;top:3px;left: -10px;} ul.book_box li.one_book .btn.ebook span:before,ul.book_box li.one_book .btn.ebook a:before{background:url(../image/kakuriyo_icon_ebook.png) 0 0 no-repeat;background-size:10px 15px;content:"";display:inline-block;width:10px; height:15px;position:relative;top:3px;left: -10px;} } /*================================================== = media only screen = ==================================================*/ @media only screen and (min-width: 750px){ .br-pc { display:block; } .br-sp { display:none; } } @media only screen and (max-width: 750px){ .br-pc { display:none; } .br-sp { display:block; } } @media only screen and (max-width : 769px) { } @media only screen and (max-width : 640px) { /*.twitter-widget-wrapper iframe {width: 600px !important;}*/ } #header_sp nav { text-align: center; } #header_sp nav ul { margin: 0; padding: 1em; list-style-type: none; } #header_sp nav ul li { display: inline; margin-left: 1em; } #header_sp nav ul li:first-child { margin-left: 0; } #header_sp nav ul li ul { display: none; } /*! ####################################################################### MeanMenu 2.0.7 -------- To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/) ####################################################################### */ /* hide the link until viewport size is reached */ a.meanmenu-reveal { display: none; } /* when under viewport size, .mean-container is added to body */ .mean-container .mean-bar { float: left; width: 100%; position: fixed; background: #fff; min-height: 60px; z-index: 999999; border-bottom: 1px solid #ccc; } .mean-container a.meanmenu-reveal { width: 120px; height: 60px; position: absolute; top: 0; right: 0; cursor: pointer; color: #fff; text-decoration: none; font-size: 12px; text-indent: -9999em; font-size: 1px; display: block; } .mean-container a.meanmenu-reveal span { display: block; background: url(../image/menu_open.png) center center no-repeat; width: 120px; height: 60px; background-size:contain; } .meanmenu-reveal.meanclose{ display: block; background: url(../image/menu_close.png) center center no-repeat; width: 120px; height: 60px; background-size:contain; } .mean-container .mean-nav { float: left; width: 100%; background-color: rgba(255,255,255,0.5); margin-top: 60px; } .mean-container .mean-nav ul { padding: 0; margin: 0; width: 100%; list-style-type: none; } .mean-container .mean-nav ul li { position: relative; float: left; width: 100%; } .mean-container .mean-nav ul li a { display: block; width: 100%; margin: 0; text-align: center; color: #006; padding: 16px 0; border-top: 1px solid #e5e5e5; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 12px; } .mean-container .mean-nav ul li a span.font{font-family: 'Montserrat', sans-serif;font-size: 140%; line-height: 1.2; } .mean-container .mean-nav ul li.mean-last a { border-bottom: none; margin-bottom: 0; } .mean-container .mean-nav ul li a.mean-expand { margin-top: 1px; width: 26px; height: 32px; padding: 12px !important; text-align: center; position: absolute; right: 0; top: 0; z-index: 2; font-weight: 700; background: rgba(255,255,255,0.1); border: none !important; border-left: 1px solid rgba(255,255,255,0.4) !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; } .mean-container .mean-nav ul li a.mean-expand:hover { background: rgba(0,0,0,0.9); } .mean-container .mean-push { float: left; width: 100%; padding: 0; margin: 0; clear: both; } .mean-nav .wrapper { width: 100%; padding: 0; margin: 0; } /* Fix for box sizing on Foundation Framework etc. */ .mean-container .mean-bar, .mean-container .mean-bar * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .mean-remove {display: none !important;} .fakeLoader{position: relative; z-index: 9999999;} /*colorbox*/ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999999; overflow:hidden;} #cboxWrapper {max-width:none;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} #cboxOverlay{background-color: rgba(0, 0, 0, 0.8)} #colorbox{outline:0;} #cboxContent{margin-top:62px; overflow:visible; /*background:#000;*/} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{/*background:#000;*/ padding:1px;} #cboxLoadingGraphic{background:url(../image/colorbox_loading.gif) no-repeat center center;} #cboxLoadingOverlay{/*background:#000;*/} #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:62px; height:62px; position:absolute; top: -62px; background:url(../image/colorbox_close.png) no-repeat 0 0;} #cboxClose:active {outline:0;} #cboxClose{background-position: 0px 0px; right:0;} #cboxClose:hover{background-position:0 -62px;} /*リニューアル時追加*/ @media only screen and (min-width: 750px){ /*.waku_kkry_chara{ display:table; width:100%; text-align: center; margin:0 auto; } .waku_kkry_chara_cell{ display:table-cell; border:1px solid #999; width:47%; padding:15px; } .waku_kkry_chara .waku_kkry_chara_cell .inner_waku{ display:table; vertical-align:middle; } .waku_kkry_chara .waku_kkry_chara_cell img{ width:100%; max-width:191px; display:table-cell; } .waku_kkry_chara .waku_kkry_chara_cell .detail{ width:50%; display:table-cell; vertical-align:middle; }*/ .waku_kkry_chara{ display:flex; display:flexbox; flex-wrap: wrap; width:100%; text-align: center; margin:0 auto 20px; justify-content: space-between; } .waku_kkry_chara_cell{ display:block; border:1px solid #c9c9c9; width:calc(50% - 1%); padding:15px; } .waku_kkry_chara .waku_kkry_chara_cell .inner_waku{ display:flex; vertical-align:middle; text-align: left; } .waku_kkry_chara .waku_kkry_chara_cell img{ width:calc(100% - 5%); max-width:191px; display:block; } .waku_kkry_chara .waku_kkry_chara_cell .detail{ width:52%; display:block; vertical-align:middle; } .waku_kkry_chara .waku_kkry_chara_cell .detail p{ font-size:85%; line-height:125%; margin-top:8px; } #media .anime_box_waku{ display:flex; flex-wrap: wrap; width:100%; text-align: center; margin:0 auto 20px; justify-content: space-between; } #media .anime_box_waku .anime_key_v{ display:block; width:49%; } #media .anime_box_waku .anime_key_v2{ text-align: center; margin-bottom:40px; padding-bottom: 30px; border-bottom: 1px solid #c73d88; } #media .anime_box_waku .anime_johou_txt{ display:block; width:49%; } #media .anime_sc_waku{ display:flex; flex-wrap: wrap; width:100%; text-align: center; margin:0 auto 20px; justify-content: space-between; } #media .anime_sc_waku .anime_staff{ display:block; width:calc(50% - 1%); text-align: center; } #media .anime_sc_waku .anime_cast{ display:block; width:calc(50% - 1%); text-align:center; } .staff_title_waku{ display:flex; margin:20px 0 20px 10px; text-align:left; flex-direction: row; flex-wrap: wrap; } .staff_title_waku .staff_midashi_A{ font-size:13px; color:#9977c0; display:block; font-weight:600; margin-right:10px; width:15%; line-height:125%; } .staff_title_waku .staff_midashi_B{ font-size:13px; color:#b14a95; display:block; font-weight:600; margin-right:10px; width:15%; line-height:125%; } .staff_name{ font-size: 16px; color: #3b3b3b; display:block; line-height:125%; text-align:left; width:80%; } } /*画面サイズ750px以下*/ @media only screen and (max-width: 750px){ /*.waku_kkry_chara{ display:block; flex-wrap: wrap; width:100%; text-align: center; margin:0 auto 20px; justify-content: space-between; }*/ .waku_kkry_chara_cell{ display: block; border:1px solid #c9c9c9; width:100%; padding:15px; text-align: center; margin:0 auto; margin-bottom:15px; } .waku_kkry_chara .waku_kkry_chara_cell .inner_waku{ margin:0 auto; text-align: center; } .waku_kkry_chara .waku_kkry_chara_cell img{ width:100%; max-width:191px; display:inline-blcok;; margin:0 atuo; } .waku_kkry_chara .waku_kkry_chara_cell .detail{ width:100%; max-width:400px; display:block; margin:15px auto; text-align: left; } .waku_kkry_chara .waku_kkry_chara_cell .detail p{ font-size:90%; line-height:150%; margin-top:12px; text-align: left; } /*#media .anime_box_waku{ display:block; width:100%; margin:0 auto 20px; max-widht:400px; }*/ #media .anime_box_waku .anime_key_v{ display:block; width:90%; max-widht:400px; margin:0 auto; } #media .anime_box_waku .anime_key_v2{ display:block; width:100%; text-align: center; padding-bottom: 20px; border-bottom: 1px solid #c73d88; max-widht:400px; margin-bottom:20px; } #media .anime_box_waku .anime_johou_txt{ display:block; width:100%; max-width:500px; text-align:center; margin:20px auto; } /*#media .anime_sc_waku{ display:block; width:100%; text-align: center; margin:0 auto 20px; }*/ #media .anime_sc_waku .anime_staff{ display:block; width:100% max-width:500px; margin:0 auto 20px; text-align: center; } #media .anime_sc_waku .anime_cast{ display:block; width:100% max-width:500px; margin:0 auto 20px; } .staff_title_waku{ display:block; margin:30px auto; text-align:center; width:100%; } .staff_title_waku .staff_midashi_A{ font-size:18px; color:#9977c0; display:inline-block; font-weight:600; width:100%; line-height:125%; text-align:center; } .staff_title_waku .staff_midashi_B{ font-size:18px; color:#b14a95; display:inline-block; font-weight:600; width:100%; line-height:125%; text-align:center; } .staff_name{ font-size: 20px; color: #3b3b3b; display:block; line-height:125%; text-align:center; width:100%; margin:15px auto; } #otameshi{ visibility:hidden; } } /* start add251003 */ /******** comics layout ********/ .books-Comic .comic-Box .comic-Group { margin-bottom: 3.90625vw; } @media print, screen and (min-width:770px) { .books-Comic .comic-Box .comic-Group { display: flex; align-items: center; gap: 50px; margin-bottom: 30px } } @media print, screen and (min-width:1921px) { .books-Comic .comic-Box .comic-Group { gap: 2.6041666667vw; margin-bottom: 1.5625vw; } } .books-Comic .comic-Box .comic-Group h3 { display: flex; justify-content: flex-start; gap: 1.3020833333vw; font-size: 4.1666666667vw; letter-spacing: .06em; line-height: 1.3; } @media print, screen and (min-width:770px) { .books-Comic .comic-Box .comic-Group h3 { gap: 10px; font-size: 2.4rem; } } @media print, screen and (min-width:1921px) { .books-Comic .comic-Box .comic-Group h3 { gap: .5208333333vw; font-size: 1.25vw; } } .books-Comic .comic-Box .comic-Group p { margin-top: 1.8229166667vw; font-size: 3.125vw; line-height: 1.3; } @media print, screen and (min-width:770px) { .books-Comic .comic-Box .comic-Group p { margin-top: 0; font-size: 1.6rem; } } @media print, screen and (min-width:1921px) { .books-Comic .comic-Box .comic-Group p { font-size: .9375vw; } } /******** comics components > heading ********/ .comic-Box .comic-Group h3::before { content: ""; display: block; width: 2.34375vw; aspect-ratio: 14/23; aspect-ratio: 28/46; background: #0d0d0e; -webkit-mask: url(../image/kakuriyo_icon_new_book.png) no-repeat center/95% auto; mask: url(../image/kakuriyo_icon_new_book.png) no-repeat center/95% auto } @media print, screen and (min-width:1025px) { .comic-Box .comic-Group h3::before { width: 14px } } @media print, screen and (min-width:1921px) { .comic-Box .comic-Group h3::before { width: .7291666667vw } } /******** comics components > layout ********/ .books-Comic .comic-Box dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7.8125vw 5.2083333333vw; } @media print, screen and (min-width:770px) { .books-Comic .comic-Box dl { grid-template-columns: repeat(4, 1fr); gap: 45px 25px } } @media print, screen and (min-width:1921px) { .books-Comic .comic-Box dl { gap: 3.125vw 1.3020833333vw } } /********* comics components > title,subtitle *******/ .books-Comic .comic-Box dl div a .title { margin-top: 3.125vw; line-height: 1.3; font-size: 3.3854166667vw } @media print, screen and (min-width:770px) { .books-Comic .comic-Box dl div a .title { margin-top: 16px; font-size: 1.6rem } } @media print, screen and (min-width:1921px) { .books-Comic .comic-Box dl div a .title { margin-top: .8333333333vw; font-size: .8333333333vw } } .books-Comic .comic-Box dl div a .subtitle { margin-top: 1.3020833333vw; letter-spacing: .06em; line-height: 1.3; font-size: 3.6458333333vw } @media print, screen and (min-width:770px) { .books-Comic .comic-Box dl div a .subtitle { margin-top: 6px; font-size: 1.8rem } } @media print, screen and (min-width:1921px) { .books-Comic .comic-Box dl div a .subtitle { margin-top: .3125vw; font-size: .9375vw } } /******** comics components > etc ********/ .comic-Box{ padding: 30px; margin-bottom: 40px; background-color: #fff; border-radius: 15px; } .comic-Box:first-child{ margin-top: -15px; } .comic-Box img{ border: 1px solid #999; } .comic-Box a{ color: #3b3b3b; text-decoration: none; } .comic-List + .btn_blank.comic_official{ margin-top: 25px; } @media print, screen and (min-width:770px) { .comic-List + .btn_blank.comic_official{ margin-top: 45px; } }