/*format */ $wid: 940px; $b3h: 1451px; $set-prefix: '' , -moz- , -webkit-; /*extend*/ .mar{ margin-right: auto; margin-left: auto; } 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, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } /*incrude*/ @mixin opacity($opacity) { opacity: $opacity; $opacityIE: $opacity * 100; filter: alpha(opacity=$opacityIE); } @mixin posa($w,$h) { position:absolute; display:block; top:0; left: 50%; margin-left: ($w/2); width: $w; height: $h; @content; } div.container { overflow: hidden; zoom: 1; height: 253px; margin-right: auto; margin-left: auto; background: center top; text-align: center; z-index:500; } .bg { height: 253px; margin: 0 auto 0px; padding: 0px; background: url(../images/product2_04.png) no-repeat center 0; } .kijyu{ width: auto; z-index: 100; position:relative; } .ab{ width: $wid; @extend .mar; color:#333; z-index: 110; padding-bottom:40px; } .box1{ width:369px; height:227px; float:right; margin-top:43px; background-image: url(../images/submenu_line.png); background-repeat: repeat-x; li{ width:31px; padding-left:10px; float:left; display:block; height:227px;} .bottun1 { background: url('../images/product_menu01.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun1 a { background: url('../images/product_menu01.png'); height:227px; width:31px; display:block; } .bottun2 { background: url('../images/product_menu02.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun2 a { background: url('../images/product_menu02.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun3 { background: url('../images/product_menu03.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun3 a { background: url('../images/product_menu03.png'); height:227px; width:31px; display:block; } .bottun4 { background: url('../images/product_menu04.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun4 a { background: url('../images/product_menu04.png'); height:227px; width:31px; display:block; } .bottun5 { background: url('../images/product_menu05.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun5 a { background: url('../images/product_menu05.png'); height:227px; width:31px; display:block; } .bottun6 { background: url('../images/product_menu06.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun6 a { background: url('../images/product_menu06.png'); height:227px; width:31px; display:block; } .bottun7 { background: url('../images/product_menu07.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun7 a { background: url('../images/product_menu07.png'); height:227px; width:31px; display:block; } .bottun8 { background: url('../images/product_menu08.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun8 a { background: url('../images/product_menu08.png'); height:227px; width:31px; display:block; } .bottun9 { background: url('../images/product_menu09.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun9 a { background: url('../images/product_menu09.png'); height:227px; width:31px; display:block; } .bottun10 { background: url('../images/product_menu10.png'); height:227px; width:31px; display:block; background-position:-31px 0px; } .bottun10 a { background: url('../images/product_menu10.png'); height:227px; width:31px; display:block; } } .box2{ width:546px; padding-top:70px; float:left; img{ margin-bottom:25px; } .txt{ font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:14px; line-height:24px; padding-left:5px; } } .bbox{ margin-bottom:40px; height:270px; } .ac{ width:$wid - 20px; @extend .mar; height:43px; background-color:#FFF; background-image:url(../images/tenpo_back01.png); background-repeat: no-repeat; background-position: right; border: 1px solid #CCC; .txt{ width: 50%; a { float: left; font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; padding-left: 13px; font-size: 24px; line-height: 43px; color: #333; text-decoration: none; } a:hover { color: #333; } } } .bnr{ font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; padding-left: 13px; text-align:center; font-size: 24px; line-height: 43px; color: #FFF; background-color:#C60; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; /* 最新バージョンでは出ません。 */ border-radius: 5px; } .bnrtxt{ font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; padding: 15px 0 30px 0; font-size: 14px; line-height: 24px; width:806px; margin:0 auto; span{color:#900} } .box3{ z-index: 140; width: 940px; li{ width:229px; padding-bottom:50px; display:block; .img{ height:229px; a { display: inline-block; } a:hover{ color:#C00; } img { vertical-align: bottom; } } .tit{ color: #7E0024; text-align:left; padding-top:8px; padding-left:8px; padding-right:8px; font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:14px; line-height:30px; height:30px; a { font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:18px; line-height:48px; color: #7E0024; text-decoration: none; } a:hover{ color:#C00; } } .txt{ font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:14px; line-height:28px; text-align:left; padding-left:5px; } .link{ padding-left:5px; a { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size:12px; float:left; color: #333; text-decoration: none; } a:hover{ color:#630; } } } } .box4{ width: 940px; li{ width:458px; padding-bottom:30px; display:block; .tit{ color: #7E0024; text-align:left; padding-top:8px; padding-left:8px; padding-right:8px; font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:16px; line-height:30px; height:30px; } .tit2{ color: #7E0024; text-align:left; padding-top:3px; padding-bottom:3px; padding-left:8px; padding-right:8px; font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:16px; line-height:24px; height:24px; } .txt{ font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:14px; line-height:32px; text-align:left; padding-left:8px; padding-right:8px; } .link{ padding-left:8px; padding-right:8px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size:12px; line-height:20px; float:left; color: #333; text-decoration: none; } } } #page-pop { position: absolute; bottom: 20px; right: 0px; left:50%; margin-left:370px; font-size: 77%; z-index: 3000; } #page-pop a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 10px 0; text-align: center; display: block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #page-pop a:hover { text-decoration: none; background: #999; }