/*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:80px; } .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; } .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; background-position:-31px 0px; } } .box2{ z-index: 130; height: 163px; width:532px; 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; } #acMenu dt{ display:block; width:$wid; height:43px; border:#333 1px solid; cursor:pointer; background-color:#FFF; .dttit{ 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; } .dttxt{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 14px; float: right; padding-right: 13px; color: #333; line-height: 43px; text-decoration: none; } } #acMenu dd{ background:#f2f2f2; width:$wid; height:1356px; border:#666 1px solid; display:none;/*none非表示、編集時block*/ .dht{ width:796px; height:50px; padding:55px 72px; @extend .mar; .dhttxt{ font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 14px; line-height: 24px; } .dhtbox{ font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; .dhtleft{ width:464px; height:294px; float:left; } .dhtright{ width:307px; float:right; } .dhtrtit{ font-size: 24px; line-height:24px; padding-top:15px; padding-bottom:30px; } .dhtrtxt{ font-size: 14px; line-height:24px; } } } } .slider-wrapper { width: 940; } .box3{ width: $wid; padding-top:30px; .left{ float:left; } .right{ float:right; } .tit{ font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:20px; line-height:20px; padding:24px 0 26px 0; } .txt{ font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:14px; line-height:24px; text-align:left; padding-left:5px; } } .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} } .dhttit2{ font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 24px; line-height:28px; padding-left:72px; margin:0 auto 0 auto; } .dhtsub{ width:824 - 44px; padding-left:44px; margin:0 auto 0 auto; font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 14px; line-height:24px; background-repeat: no-repeat; background-position: top left; span{ color:#D7471F;} } .dhtsub1{ @extend .dhtsub; background-image: url(../images/dht_2_no1.png); font-size: 16px; } .dhtsub2{ @extend .dhtsub; background-image: url(../images/dht_2_no2.png); font-size: 16px; } .dhtsub3{ @extend .dhtsub; background-image: url(../images/dht_2_no3.png); font-size: 16px; } .dhtbox2{ padding-top:12px; li{ float:left; font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 14px; line-height:28px; span{ color:#D7471F;} } } .dhtbox4{ width:700px; margin-left:72px; padding:6px 6px 6px 84px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 14px; line-height:24px; background-image:url(../images/dht_img04.jpg); background-repeat: no-repeat; background-position: left; background-color:#ffd900; span{ font-weight: bold; color:#D7471F;} } hr.style-two { border: 0px; margin: 0px; margin-top: 20px; margin-bottom: 20px; height: 1px; background-image: -webkit-linear-gradient(left, rgba(100,100,100,0), rgba(100,100,100,0.50), rgba(100,100,100,0)); background-image: -moz-linear-gradient(left, rgba(100,100,100,0), rgba(100,100,100,0.50), rgba(100,100,100,0)); background-image: -ms-linear-gradient(left, rgba(100,100,100,0), rgba(100,100,100,0.50), rgba(100,100,100,0)); background-image: -o-linear-gradient(left, rgba(100,100,100,0), rgba(100,100,100,0.50), rgba(100,100,100,0)); } #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; }