@charset "utf-8"; /*===== CSS RESET =====*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,img,ins,kbd,q,s,samp,strike,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{outline:none;border:0;font-size:100%;font:inherit;vertical-align:middle;margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}.clear{clear:both}.clearfix:after{content:" ";display:table;clear:both}.clearfix{*zoom:1}ul,ol{list-style:none;}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body *{max-height:99999em}body img{max-height:none} /*===== COMMON =====*/ html, body { width: 100%; min-height: 100%; } body { background: #FFF; font: 14px/1.6 "メイリオ", arial, helvetica, clean, sans-serif; -webkit-text-size-adjust: none; color: #323232; } .ft_serif { font-family: "Hiragino Mincho Pro", Times, "Times New Roman", Georgia, serif; } a { color: #e7316e; } .trans { opacity: 1; } .trans:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: .8; -khtml-opacity: .8; opacity: .8; } .container { width: 100%; min-width: 1200px; position: relative; z-index: 1; } .wrapper { max-width: 100%; min-width: 1200px; margin-left: auto; margin-right: auto; } .sub_page .title_logo { top: 151px; } .sub_page ul.menu { margin-top: 235px; } .scrollup { position: fixed; bottom: 49px; right: 24px; z-index: 999; display: none; } .scrollup a { display: block; cursor: pointer; } .particules { position: absolute; width: 100%; height: 1000px; z-index: 1; overflow: hidden; } body.loading{ position: fixed; width: 100%; height: 100%; overflow: hidden; } #loading{ position: fixed; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; background-color: white; background-image: url(../img/bg.png); z-index: 10; display: table; } #loading .logo{ display: table-cell; vertical-align: middle; } #loading .logo img{ display: block; margin: auto; } /*===== HEADER =====*/ header {} /*===== NAVIGATION =====*/ .navigation {} /*===== FOOTER =====*/ footer {} /*===== MAIN =====*/ .main {} /*===== PAGE: TOP =====*/ /*.banner { background-image: url(../img/banner_bg.jpg); background-size: 100% 100%; min-height: 1000px; }*/ .banner { position:relative; background-image: url(../img/banner_bg.jpg); background-size: cover; min-height: 1200px; background-position: left top; background-repeat: no-repeat; } .banner .visual img{ position: relative; z-index: 3; } .banner .visual img{ width: 100%; } .banner .bnr{ position:absolute; top:5%; left:8%; z-index: 50; } .banner .bnr2{ position:absolute; top:11%; left:8%; z-index: 50; } .page_top { background: url('../img/bg.png') repeat; } .page_top img { display: block; } .main_top { position: relative; } .main_top h1 { position: absolute; top: 20px; left: 27px; z-index: 9999; } .title_logo { position: absolute; top: 194px; left: 26px; z-index: 9999; } .left_bar { position: fixed; float: left; width: 280px; background: url('../img/side_bg.jpg') repeat top center; padding: 0 30px; padding-bottom: 50px; background-size: 100%; z-index: 999; } ul.menu { margin-top: 259px; margin-bottom: 20px; } ul.menu a { display: inline-block; } ul.menu li { height: 24px; margin-bottom: 5px; position: relative; } ul.menu li img{ position: absolute; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } ul.menu li .hover{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } ul.menu li:hover a:not(.disabled) .hover{ opacity: 1; } ul.menu li a.disabled{ cursor: default; } ul.menu li:hover a:not(.disabled) .normal{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .movie { margin-top: 12px; } .movie h2 { margin-bottom: 5px; } .movie a { display: block; } .twitter { margin-top: 24px; } .twitter h2 { margin-bottom: 9px; } .share_gr { margin-top: 28px; } .share_gr h2 { margin-bottom: 11px; } .share_gr ul li { float: left; margin-left: -8px; } .share_gr ul li a { display: block; } .share_gr ul li:first-child { margin-left: 0; } .copyright { margin-top: 30px; } .right_content { float: right; width: 100%; min-width: 920px; position: relative; } .news_frame { background: url('../img/bg.jpg') no-repeat top center; padding: 17px 90px 7px; position: relative; background-size: cover; margin-top: -2px; z-index: 10; } .news_frame a{ color: #000000; text-decoration: none; } .news_frame h2 { margin-bottom: 19px; } .news_frame a p{ text-decoration: underline; } ul.list_news li { width: 100%; float: left; margin-bottom: 12px; } ul.list_news li .day { float: left; width: 98px; height: 25px; line-height: 25px; text-align: center; background: url('../img/day_bg.png') no-repeat center; } ul.list_news li .txt_news { float: left; width: 84%; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; padding: 3px 0; margin-left: 20px; height: 25px; font-size: 14px; } .btn_more { position: absolute; right: 31px; top: 42px; } .btn_more a { display: block; } .provisional_banner { margin-top: 17px; } .provisional_banner ul li { float: left; width: 200px; height: 60px; margin-right: 20px; } .provisional_banner ul li a { display: block; } .provisional_banner ul li:last-child { margin-right: 0; } /*=======PAGE TRAILER===========*/ #mov { width: 640px; margin: 10px 0 0 20px; } a:link { outline: none; } a:visited { outline: none; } a:hover { outline: none; } a:active { outline: none; color: #e7316e; } /*=======PAGE ONAIR=========*/ .onair { background: url('../img/onair/bg_oniar.png') no-repeat bottom center; background-size: 100%; } .main_onair { width: 100%; z-index: 99; position: relative; min-height: 1250px; } .main_onair h2 { margin-left: 75px; margin-top: 51px; } #onair_mainArea { width:758px; text-align: left; padding-top: 48px; margin: 0 auto; } .onaircat { text-align: center; display: table; height: 42px; margin-right: auto; margin-left: auto; margin-bottom:40px; } .onaircat li { height: 40px; width: 150px; display:table-cell; } .onaircat li a { border: 1px solid #e7316e; display: table-cell; height: 38px; width: 128px; display: block; text-decoration: none; line-height: 38px; text-align: center; font-size: 14px; color: #000; font-weight:bold; margin:0 auto; } .onaircat li a:hover,.goodscat li a.active{ background-color:#e7316e; } .dayTxt_Img { width:100%; padding-top:30px; padding-left: 48px; margin:0 auto; } .onairboxin { padding-top: 35px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; } .onairboxin h6{ text-align: center; padding-top: 30px; padding-bottom: 20px; font-size: 18px; color: #e7316e; font-weight:bold; } .onairboxin table { width: 100%; } .onairboxin .at1 th, .onairboxin .at1 td { border-bottom-style: none; padding-bottom: 10px; } .onairboxin .at2 th, .onairboxin .at2 td { border-top-style: none; padding-top: 0px; font-size:14px; } .onairboxin th,.onairboxin td { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #e7316e; border-bottom-color: #e7316e; padding-top: 20px; padding-bottom: 20px; font-size: 16px; vertical-align: top; font-weight:bold; } .onairboxin th { width: 180px; padding-left: 50px; color: #e7316e; } .onairboxin td { padding-right: 50px; } .onairboxin .at1 th, .onairboxin .at1 td { border-bottom-style: none; padding-bottom: 10px; } .onairboxin .at2 th, .onairboxin .at2 td { border-top-style: none; padding-top: 0px; font-size:14px;S } .onairboxin a { text-decoration: none; } .coution { color:#FF0000; text-align: center; padding-top: 20px; padding-bottom: 30px; } /*=======PAGE STORY=========*/ .story { background: url('../img/story/bg_story.png') no-repeat bottom center; background-size: 100%; } .main_story { width: 100%; z-index: 99; position: relative; min-height: 1250px; } .main_story h2 { margin-left: 75px; margin-top: 51px; } .main_tab { text-align: center; padding-top: 48px; } .main_tab a{ text-decoration: none; } .content_tab h3 { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; font-size: 32px; font-weight: bold; font-style: oblique; letter-spacing: 0.15em; color: #e7316e; } .content_tab h3 span { color: #28a7e1; } .content_tab a{ text-decoration: none; } .content_tab p { color: #e7316e; font-size: 16px; line-height: 3.75em; font-weight: bold; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; letter-spacing: 0.2em; } .content_tab p span { font-size: 23px; color: #28a7e1; } .tab_title { margin-bottom: 49px; /* padding-right: 135px;*/ } .tab_title li{ display: inline-block; vertical-align: top; } .tab_title .tab-link{ display: inline-block; margin: 0px 15px; cursor: pointer; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; font-size: 27px; font-weight: bold; font-style: oblique; letter-spacing: 0.15em; color: #28a7e1; vertical-align: top; } .tab_title .tab-link.soon{ color: #888888; cursor: default; } .tab_title .tab-link.disabled{ color: #e7316e; cursor: default; } .tab_title li:after{ content: ""; display: inline-block; width: 16px; height: 39px; background-image: url(../img/story/tab_separator.png); background-position: 50% 50%; background-repeat: no-repeat; } .tab_title li:last-child:after{ display: none; } .content_tab{ } .content_tab[tab-id="introduction"]{ display: block; } .story .bg_footer { margin-top: -134.1%; } /*====PAGE NEWS=====*/ .right_content.news { background: url('../img/news/bg.png') no-repeat bottom center; background-size: 100%; } .main_news { width: 100%; margin-top: 49px; padding-bottom: 55px; padding-left: 79px; padding-right: 91px; } .date { display: inline-block; height: 25px; width: 115px; line-height: 25px; background: #28a7e1; border-radius: 10px; text-align: center; color: white; } .block_news { width: 750px; background: rgba(255, 255, 255, 0.75); position: relative; border-top: none; border-bottom: none; margin: auto; margin-bottom: 51px; } .bg_ie_left, .bg_ie_right { position: absolute; width: 2px; left: 0; top: 0; height: 100%; /*background: url('../img/news/bg_border.jpg') no-repeat;*/ background: linear-gradient(#8eedfe, #ff6aa7); background-size: cover; } .bg_ie_right { left: 100%; } .block_news .border { padding: 29px 31px; border-top: 2px solid #8eedfe; border-bottom: 2px solid #ff6aa7; } .block_news h3 { font-size: 18px; font-weight: bold; color: #e7316e; border-bottom: 2px dashed #ec79ac; padding-bottom: 10px; margin-top: 17px; margin-bottom: 15px; } .block_news p { line-height: 1.785714285714286em; } span.img_news { margin: 20px 0; display: block; } span.img_news img { width: 100%; } /*=====PAGE CHARACTER====*/ .bxslider li a.show .active, .bxslider li a .normal { display: block; } { display: block; } .bxslider li a.show .normal, .bxslider li a .active { display: none; } .bx-wrapper .bx-pager { display: none; } .bx-wrapper { margin-top: 30px; } ul.bxslider li { height: 75px; } ul.bxslider { padding-left: 30px; } .bx-viewport { max-width: 747px; } .main_character{ position: relative; z-index: 3; height: 1100px; min-height: 1100px; -webkit-transition: height 0.5s linear; -moz-transition: height 0.5s linear; -ms-transition: height 0.5s linear; -o-transition: height 0.5s linear; transition: height 0.5s linear; } .main_character h2 { margin-left: 75px; margin-top: 51px; } .content_slide { width: 750px; margin: 0 auto; margin-top: 50px; position: relative; } .content_slide.first{ display: block; } .content_slide_child { width: 100%; } .img_left_up { float: left; width: 350px; } .right_up { float: right; width: 400px; } .txt_right_up p { line-height: 1.857142857142857em; font-weight: bold; } .txt_right_up h3 { margin-bottom: 15px; } .img_right_up { float: right; margin-top: 35px; } .bottom_info { position: relative; margin-top: 30px; } .bottom_info h3 { position: absolute; left: 375px; } .right_content.character { padding-bottom: 125px; background: url('../img/character/under_img.png') no-repeat bottom center; background-size: 100%; } .content_slide_child { position: absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all .5s linear; -ms-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; } .content_slide_child.active { opacity: 1; } ul.bxslider li a { cursor: pointer; } ul.bxslider li img { position: absolute; bottom: 0; } .btnChart{ position: absolute; top:10px; right:50%; transform: translate(430px, 0); } .btnChart a{ display: block; -webkit-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .btnChart a:hover{ opacity: 0.7; } #page-chart{ background: url('../img/character/bg_dot.png'); } #page-chart .image{ text-align: center; } /*=====PAGE STAFF_CAST======*/ .staff_cast { background: url('../img/staff/staff_banner.png') no-repeat bottom center; background-size: 100%; padding-bottom: 100px; } .staff_list { display: inline-block; width: 45%; margin-top: 49px; vertical-align: top; } .staff_list.cast{ margin-left: 75px; } .staff_list ul li { font-size: 20px; font-weight: bold; color: #e7316e; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; margin-bottom: 16px; } .staff_list ul li:last-child { margin: 0; } .staff_list ul li p span { color: #28a7e1; } .staff_list h3 { margin-bottom: 25px; } /*======PAGE VIDEO======*/ .main_video { width: 750px; margin: 0 auto; margin-top: 50px; } .block_video { float: left; width: 355px; margin-right: 40px; margin-bottom: 50px; } .block_video h3{ display: block; width: 100%; height: 46px; background-image: url(../img/video/title_video.png); color: white; font-size: 18px; font-weight: bold; text-shadow: 2px 0 0 #e7316e, -2px 0 0 #e7316e, 0 2px 0 #e7316e, 0 -2px 0 #e7316e, 1px 1px #e7316e, -1px -1px 0 #e7316e, 1px -1px 0 #e7316e, -1px 1px 0 #e7316e; text-align: center; line-height: 52px; } .block_video:nth-child(even) { margin-right: 0; } .video_page { padding-bottom: 337px; background: url('../img/video/banner.png') no-repeat bottom center; background-size: 100%; } .block_video h3 { margin-bottom: 14px; } .frame_movie a { display: block; } /*=======PAGE GOODS=========*/ .main_goods{ width: 100%; z-index: 99; position: relative; min-height: 1250px; } .main_goods h2 { margin-left: 75px; margin-top: 51px; } .goods_page { background: url('../img/goods/bg_goods.png') no-repeat top center; background-size: 100%; } /* tab */ #goods-tabs{ margin-top: 40px; letter-spacing: -0.4em; text-align: center; } #goods-tabs a{ text-decoration: none; } #goods-tabs .sonn{ color: #7A7A7A; } #goods-tabs li{ width: 160px; display:inline-block; letter-spacing: normal; vertical-align: top; } #goods-tabs li:not(:first-child){ margin-left: 20px; } #goods-tabs a{ display: block; padding: 10px 0; border: 2px solid #e7316e; font-size:16px; font-weight: bold; line-height: 1.5; color: #e7316e; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } #goods-tabs .is-active, #goods-tabs a:hover{ background: #e7316e; color: #FFF; } /* goods list */ #goods-lst{ width: 780px; margin: 0 auto; letter-spacing: -0.4em; -webkit-transform: translate(-30px, 0); -ms-transform: translate(-30px, 0); transform: translate(-30px, 0); } #goods-lst .itemOne{ width: 230px; display: inline-block; letter-spacing: normal; vertical-align: top; margin-left: 30px; margin-top: 40px; } #goods-lst .itemOne .image{ height: 230px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #goods-lst .itemOne .image{ height: 230px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #goods-lst .itemOne .goodsCbox{ text-decoration: none; } #goods-lst .goosName{ position: relative; margin-top: 10px; padding-left: 20px; font-size:14px; font-weight: 600; line-height: 1.5; color:#e7316e; } #goods-lst .goosName::after{ content: ''; display: block; width: 10px; height: 1px; background: #e7316e; position: absolute; top:10px; left: 0; } #goods-lst .itemOne a:hover .image img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* Category */ #goods-lst .itemOne a{ position: relative; display: block; padding-bottom: 20px; } #goods-lst .itemOne a::after{ display: block; position: absolute; left:20px; bottom:0; font-size:12px; font-weight: 600; line-height: 1.5; color: #0b7cc3; } #goods-lst .itemOne.goods a::after{content: 'GOODS';} #goods-lst .itemOne.bluray a::after{content: 'Blu-ray&DVD';} #goods-lst .itemOne.music a::after{content: 'MUSIC';} /* GOODS MODAL */ #goodsModal{ background: transparent; } #goodsModal a{ color: #e7316e; } #goods-stage{ position: relative; visibility: hidden; } #goods-detailsWrapper{ position: relative; } #goods-stage .btnBack{ display:none; } #goods-stage .btnBack a{ display: inline-block; margin-left: 5%; padding: 5px 20px; border: 2px solid #e7316e; background: #FFF; font-size:16px; font-weight: bold; line-height: 1.5; color: #e7316e; } #goods-stage .sp_images{ display:none; } #goods-stage .sp_images img{ width: 100%; height: auto; } #goods-stage .goodsName{ font-size:20px; font-weight: bold; line-height: 1.5; color: #e7316e; text-shadow:-1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff; } #goods-stage .goodsCategory{ font-size:16px; font-weight: bold; line-height: 1.5; color: #0b7cc3; text-shadow:-1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff; } #goods-stage .goodsTxt{ margin-top: 20px; font-size:14px; font-weight: 800; line-height: 1.7; } .shop_tokuten{ margin-bottom: 50px; } .pc #goods-stage{ width:845px; border: 2px solid #e7316e; box-sizing: border-box; background: url('../img/goods/detail_bg.png') 50% 0 no-repeat; background-size:100% auto; } .pc #goods-scrollpane{ height: 520px; overflow-y: auto; } .pc #goods-details{ padding: 40px; overflow: hidden; } .pc #goods-details .images{ width: 340px; float: left; } .pc #goods-details .txtAreas{ width: 370px; float: right; } .pc .shop_tokuten{ text-align: center; margin-bottom: 50px; } .sp #goods-stage{ padding: 30px 0; border-top: 5px solid #e7316e; background: url('../img/goods/bg_dot.png'); } .sp #goods-details{ width:90%; margin: 30px auto; } .sp #goods-stage .btnBack{ display: block; } .sp .images{ display: none; } .sp #goods-stage .sp_images{ display:block; margin-top: 30px; } .sp .shop_tokuten{ padding: 0 5%; } .sp .shop_tokuten img{ width: 100%; height: auto; } .tab-link:hover { color:#E7316E; } .content_tab #storyList { display: table; height: 30px; padding-bottom: 40px; margin-right: auto; margin-left: auto; } #storyList li { height: 30px; width: 58px; padding-right: 6px; padding-left: 7px; display: table-cell; } #storyList li a { font-size: 14px; line-height: 28px; font-weight: bold; color: #E7316E; display: block; height: 28px; border: 1px solid #E7316E; background-color: rgba(255,255,255,0.5); } #storyList li a.active,#storyList li a:hover { color: #FFF; background-color: #E7316E; } .storyOnce { width: 750px; margin-right: auto; margin-left: auto; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; text-align: left; padding-bottom: 270px; display: none; } .storyOnce h4 { font-size: 20px; padding-bottom: 20px; font-weight: bold; color: #E7316E; text-align: left; } .storyimgs { height: 280px; } .storyimgs li { float: left; height: 140px; width: 250px; } .storyimgs li img { height: 140px; width: 250px; } .content_tab .storyOnce p { font-size: 14px; line-height: 28px; color: #2B2A2A; text-align: left; padding-top: 30px; padding-bottom: 50px; } .storyOnce h6 { font-size: 16px; color: #E7316E; padding-bottom: 30px; text-align: left; font-weight: bold; } .content_tab #wordsList { display: table; height: 30px; padding-bottom: 40px; margin-right: auto; margin-left: auto; } #wordsList li { height: 30px; width: 43px; padding-right: 6px; padding-left: 7px; display: table-cell; } #wordsList li a { font-size: 14px; line-height: 28px; font-weight: bold; color: #E7316E; display: block; height: 28px; border: 1px solid #E7316E; background-color: rgba(255,255,255,0.5); } #wordsList li a.active,#wordsList li a:hover { color: #FFF; background-color: #E7316E; } .wordsOnce { font-weight:bold; width: 750px; margin-right: auto; margin-left: auto; text-align: left; } .wordsOnce h4 { font-size: 20px; color: #E7316E; padding-bottom: 15px; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #E7316E; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; text-align: left; } .wordsOnce dl { padding-top: 20px; } .wordsOnce dt { background-color: #28a7e1; height: 30px; color: #FFF; border-radius: 6px; line-height: 30px; padding: 0 15px; background-image: url(../img/story/bg_word.gif); font-size: 16px; font-weight: bold; } .wordsOnce dd { padding-top: 20px; padding-bottom: 40px; } .wordsOnce dd p { font-size: 14px; line-height: 25px; font-weight: bold; color: #3D3D3D; } .wordsOnce dd p img { margin-right: 20px; margin-bottom: 20px; display: inline; } /*=======PAGE GOODS / PAGE Bluray=========*/ .main_goods{ width: 100%; z-index: 99; position: relative; min-height: 1250px; } .main_goods h2 { margin-left: 75px; margin-top: 51px; } .goods_page { background: url('../img/goods/bg_goods.png') no-repeat top center; background-size: 100%; } /* tab */ #goods-tabs{ margin-top: 40px; letter-spacing: -0.4em; text-align: center; } #goods-tabs .sonn{ color: #7A7A7A; } #goods-tabs li{ width: 160px; display:inline-block; letter-spacing: normal; vertical-align: top; } #goods-tabs li:not(:first-child){ margin-left: 20px; } #goods-tabs a{ display: block; padding: 10px 0; border: 2px solid #e7316e; font-size:16px; font-weight: bold; line-height: 1.5; color: #e7316e; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } #goods-tabs .is-active, #goods-tabs a:hover{ background: #e7316e; color: #FFF; } /* GOODS MODAL */ #goodsModal{ background: transparent; } #goodsModal a{ color: #e7316e; } #goods-stage{ position: relative; visibility: hidden; } #goods-detailsWrapper{ position: relative; } #goods-stage .btnBack{ display:none; } #goods-stage .btnBack a{ display: inline-block; margin-left: 5%; padding: 5px 20px; border: 2px solid #e7316e; background: #FFF; font-size:16px; font-weight: bold; line-height: 1.5; color: #e7316e; } #goods-stage .sp_images{ display:none; } #goods-stage .sp_images img{ width: 100%; height: auto; } #goods-stage .goodsName{ font-size:20px; font-weight: bold; line-height: 1.5; color: #e7316e; text-shadow:-1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff; } #goods-stage .goodsCategory{ font-size:16px; font-weight: bold; line-height: 1.5; color: #0b7cc3; text-shadow:-1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff; } #goods-stage .goodsTxt{ margin-top: 20px; font-size:14px; font-weight: 800; line-height: 1.7; } .pc #goods-stage{ width:845px; border: 2px solid #e7316e; box-sizing: border-box; background: url('../img/goods/detail_bg.png') 50% 0 no-repeat; background-size:100% auto; } .pc #goods-scrollpane{ height: 520px; overflow-y: auto; } .pc #goods-details{ padding: 40px; overflow: hidden; } .pc #goods-details .images{ width: 340px; float: left; } .pc #goods-details .txtAreas{ width: 370px; float: right; } .sp #goods-stage{ padding: 30px 0; border-top: 5px solid #e7316e; background: url('../img/goods/bg_dot.png'); } .sp #goods-details{ width:90%; margin: 30px auto; } .sp #goods-stage .btnBack{ display: block; } .sp #goods-stage .btnBack a{ text-decoration: none; } .sp .images{ display: none; } .sp #goods-stage .sp_images{ display:block; margin-top: 30px; } /*【GOODS PAGE】*/ #goods-lst{ width: 780px; margin: 0 auto; letter-spacing: -0.4em; -webkit-transform: translate(-30px, 0); -ms-transform: translate(-30px, 0); transform: translate(-30px, 0); } #goods-lst .itemOne{ width: 230px; display: inline-block; letter-spacing: normal; vertical-align: top; margin-left: 30px; margin-top: 40px; } #goods-lst .itemOne .image{ height: 230px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #goods-lst .itemOne .image img{ display: block; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #goods-lst .goosName{ position: relative; margin-top: 10px; padding-left: 20px; font-size:14px; font-weight: 600; line-height: 1.5; color:#e7316e; } #goods-lst .goosName::after{ content: ''; display: block; width: 10px; height: 1px; background: #e7316e; position: absolute; top:10px; left: 0; } #goods-lst .itemOne a:hover .image img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #goods-lst .itemOne a{ position: relative; display: block; padding-bottom: 20px; } #goods-lst .itemOne a::after{ display: block; position: absolute; left:20px; bottom:0; font-size:12px; font-weight: 600; line-height: 1.5; color: #0b7cc3; } #goods-lst .itemOne.goods a::after{content: 'GOODS';} #goods-lst .itemOne.bluray a::after{content: 'Blu-ray&DVD';} #goods-lst .itemOne.music a::after{content: 'MUSIC';} /*【Bluray PAGE】*/ #bluray-tabs{ margin-top: 40px; letter-spacing: -0.4em; text-align: center; } #bluray-tabs a{ text-decoration: none; } #bluray-tabs .sonn{ color: #7A7A7A; } #bluray-tabs li{ display:inline-block; letter-spacing: normal; vertical-align: top; } #bluray-tabs li:not(:first-child){ margin-left: 20px; } #bluray-tabs a{ display: block; padding: 10px 20px; border: 2px solid #e7316e; font-size:16px; font-weight: bold; line-height: 1.5; color: #e7316e; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } #bluray-tabs .is-active, #bluray-tabs a:hover{ background: #e7316e; color: #FFF; } #bluray-lst{ width: 780px; margin: 0 auto; } #bluray-lst .tokuten, #bluray-lst .gentei{ display: none; } #bluray-lst .illust{ display: block; border: 1px solid #e7316e; font-size: 11px; line-height: 24px; color: #e7316e; text-align: center; padding-right: 5px; padding-left: 5px; } #bluray-lst .illust:hover{ background-color: #e7316e; color: #FFF; } #bluray-lst .itemOne{ width: 230px; display: inline-block; letter-spacing: normal; vertical-align: top; margin-left: 25px; margin-top: 40px; } #bluray-lst .itemOne:nth-child(3n+1){ margin-left: 0; } #bluray-lst .itemOne .image{ height: 285px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #bluray-lst .itemOne .image img{ display: block; width:100%; height: auto; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #bluray-lst .goosName{ position: relative; margin-top: 10px; padding-left: 20px; font-size:14px; font-weight: 600; line-height: 1.5; color:#e7316e; } #bluray-lst .goosName::after{ content: ''; display: block; width: 10px; height: 1px; background: #e7316e; position: absolute; top:10px; left: 0; } #bluray-lst .hatsubai{ padding-left: 20px; font-size:14px; font-weight: 600; line-height: 1.5; color: #0b7cc3; } #bluray-lst .itemOne a:hover .image img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #bluray-lst .itemOne a{ position: relative; display: block; padding-bottom: 20px; text-decoration: none; } #bluray-lst .tokuen_ttl{ margin-top: 40px; font-size:24px; font-weight: bold; line-height: 1.5; color:#e7316e; } #bluray-lst .tokuen_sttl{ margin-top: 40px; margin-bottom: 20px; font-size:18px; font-weight: bold; line-height: 1.5; color: #0b7cc3; } #bluray-lst .tokuten .txt{ margin-top: 20px; font-size: 14px; font-weight: bold; } #bluray-lst .tokuten-table{ width:100%; margin-top: 40px; border-collapse:collapse; border-spacing:0; } #bluray-lst .tokuten-table th{ padding: 10px; text-align: center; border:1px solid #e7316e; background-color:rgba(231, 49, 110, 0.8); font-size: 14px; color:#FFF; font-weight: bold; } #bluray-lst .tokuten-table td{ padding: 10px; border:1px solid #e7316e; border-top:none; background: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: bold; } #bluray-lst .tokuten-table td a{ color: #e7316e; text-decoration: none; font-weight: bold; } #bluray-lst .tokuten-table td a:hover{ text-decoration: none; } #bluray-lst .gentei .txt{ margin-top: 20px; font-weight: bold; } #bluray-lst .gentei .txt a{ color: #0b7cc3; text-decoration: underline; } #bluray-lst .gentei .txt a:hover{ text-decoration: none; }