/* body */ body { background: #eae9e8; } /* #g_navi */ #g_navi {background: #d991a3;} #g_navi .mod-freeHTMLinner ul{overflow: hidden; padding: 10px 0;} #g_navi .mod-freeHTMLinner ul li {float: left; width: 18%; box-sizing: border-box;} #g_navi .mod-freeHTMLinner ul li a{display: block; color: #fff; text-align: center; padding: 10px; border-left: 1px dotted #fff;} #g_navi .mod-freeHTMLinner ul li:last-child a{border-right: 1px dotted #fff;} #g_navi .mod-freeHTMLinner ul li a em{font-size: 1.18em; display:block; letter-spacing: -0.1em;} #g_navi .mod-freeHTMLinner ul li.tit {width: 26%;} #g_navi .mod-freeHTMLinner ul li.tit img {width: 100%; max-width: 214px;} /* #main */ #main { display: table; width: 100%; min-width: 980px; } /* pankuzu */ #pankuzu { background: #efefee; padding: 40px 17px; overflow: hidden; } #pankuzu { background: #efefee; padding: 17px 40px; } #pankuzu a { color: #000000; text-decoration: none; } #pankuzu a:hover { text-decoration: underline; } #pankuzu ul { display: table; } #pankuzu li { display: table-cell; padding-right: 10px; font-size: 12px; } /* #left_menu */ #left_menu { width: 200px; box-sizing: border-box; display: table-cell; position: relative; vertical-align: top; z-index: 6; box-shadow: 2px 2px 7px 0 rgba(0,0,0,0.35); } #left_menu .inner { display: block; position: relative; z-index: 1; padding: 12px 0px 0px; } #left_menu .inner:before { content: ""; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: -1; } #left_menu .login { width: 200px; box-sizing: border-box; padding: 0px 10px 12px; } #left_menu .top_frame { height: 150px; position: relative; } #left_menu .top_frame .left_menu_top { position: absolute; top: 0px; left: 10px; } #left_menu .top_frame .left_menu_tit { left: 33px; position: absolute; top: 60px; } #left_menu .form_tb { display: table; width: 180px; margin: 0px auto 23px; box-sizing: border-box; border: 1px solid #5f502d; } #left_menu .form_tc { display: table-cell; vertical-align: top; } #left_menu .form_tc.submit { width: 33px; border-left: 1px solid #5f502d; } #left_menu #left_menu_search { width: 100%; padding: 7px; box-sizing: border-box; } #left_menu #left_menu_search { line-height: 150%; background: transparent; border: none; font-size: 12px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; } #left_menu .left_menu li img { display: block; } #left_menu .left_menu li img.on { display: none; } #left_menu .left_menu li.select img { display: none; } #left_menu .left_menu li.select img.on { display: block; } #left_menu .bottom_frame { height: 55px; margin-bottom: 12px; position: relative; } #left_menu .bottom_frame .left_menu_bottom { position: absolute; top: 7px; left: 10px; } #left_menu .bnr_area { width: 200px; box-sizing: border-box; padding: 0px 10px; } #left_menu .bnr_area ul { overflow: hidden; } #left_menu .bnr_area li { margin-bottom: 7px; } #left_menu .bnr_area li.last { margin-bottom: 6px; } #left_menu .sub_menu > li { position: absolute; left: 200px; display: none; } #left_menu .sub_menu > li img { vertical-align: bottom; } #left_menu .sub_menu > li > ul { padding: 27px 0; background: #f1f0ef; border: 2px solid #5f502d; position: relative; box-sizing: border-box; width: 200px; } #left_menu .sub_menu > li > ul:after { content: ""; display: block; position: absolute; width: 21px; height: 31px; top: 50%; margin-top: -15px; left: -21px; } #left_menu .sub_menu > li.left_menu_1 {top: -28px;} #left_menu .sub_menu > li.left_menu_2 {top: -165px;} #left_menu .sub_menu > li.left_menu_3 {top: -107px;} #left_menu .sub_menu > li.left_menu_4 {top: -25px;} #left_menu .sub_menu > li.left_menu_5 {top: 145px;} #left_menu .sub_menu > li.left_menu_6 {top: 200px;} #left_menu .left_menu_wrapper { position: relative; } /* #content */ #content { box-sizing: border-box; display: table-cell; background: #ffffff; position: relative; } #content .content_wrap{ } #content .ranking { display: table; width: 100%; table-layout: fixed; } #content .ranking.cont_3 { width: 74.5%; margin: 0px auto; } #content .ranking.cont_2 { margin: 0 auto; width: 48.7%; } #content .ranking.cont_1 { margin: 0 auto; width: 22.9%; } #content .ranking a { text-decoration: none; } /* サムネイルのホバー処理 */ .thumb { opacity: 1.0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .thumb:hover { opacity: 0.75; } /* #foot_nav */ #foot_nav { min-width: 980px; } #foot_nav .inner { width: 980px; margin: 0px auto; color: #ffffff; font-size:12px; } #foot_nav .inner ul { width: 680px; margin: 0px auto; } #foot_nav .inner li a { color: #ffffff; padding: 12px 0; padding-right: 12px; text-decoration: none; display: block; float: left; } #foot_nav .inner li a:hover { text-decoration: underline; } #foot_nav .inner li span { margin-top: 12px; float: right; } #foot_nav .inner li { float: left; overflow: hidden; padding-right: 12px; } #foot_nav .inner li.last a { padding-right: 0px; } #foot_nav .inner li.last { padding-right: 0px; } /* #footer */ #footer { background: #eae9e8; min-width: 980px; overflow: hidden; } #footer .inner { width: 980px; margin: 25px auto; text-align: center; } #footer .inner img { display: inline; } /* pagetop */ #pagetop { position: fixed; right: 20px; bottom: 20px; display: none; } /* .main_content */ .main_content { max-width: 1390px; margin: 0px auto; } .main_content .inner { margin: 0 40px 40px; padding-top: 1px; padding-bottom: 1px; } .main_content .inner h3 { margin-top: 40px; } .bg_brown { background: #eae9e8; margin-bottom: 40px; padding: 1px 0; } .hover_view { display: none; position: absolute; top: 0; left: 100%; z-index: 10; box-sizing: border-box; background: rgba(255,255,255,0.75); box-shadow: 0px 0px 7px 0 rgba(0,0,0,0.7); padding: 10px; } .hover_view.left { left:auto; right: 100%; margin-left: 0px; } /* ranking */ #content .ranking > li { display: table-cell; } #content .ranking > li.spacer { width: 38px; } #content .ranking > li .box { position: relative; box-sizing: border-box; padding: 40px 0 0; } #content #download .ranking > li .box { position: relative; box-sizing: border-box; padding: 82px 0 0; } #content .ranking > li .box img { vertical-align: bottom; } #content .ranking > li .box .icon { left: -17px; position: absolute; top: 39px; } #content .ranking > li .box .icon.last { margin-left: 6%; } #content .ranking > li .box p { font-size: 12px; text-align: center; color: #433c30; font-weight: bold; width: 95%; margin: 0px auto; margin-top: 15px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; line-height: 100%; } #content .ranking > li .box h4 { font-size: 12px; text-align: center; color: #433c30; font-weight: bold; width: 95%; margin: 0px auto; margin-top: 20px; } #content .ranking > li .box p.txt { font-weight: normal; }