/* Style adjustment for new design with flat header and footer 2014 [ 新規ページのための共通スタイル ] このcssが影響するhtml一覧 (増えたら追記してください) /peugeot-topics/ /dealers-list/ /wallpaper/ /finance/ /after-service/ /price/ */ @font-face{font-family:font1;src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Regular.eot);src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Regular.eot?#iefix) format("embedded-opentype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Regular.woff) format("woff"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Regular.ttf) format("truetype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Regular.svg#font1) format("svg");font-weight:400;font-style:normal}@font-face{font-family:font2;src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Italic.eot);src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Italic.eot?#iefix) format("embedded-opentype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Italic.woff) format("woff"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Italic.ttf) format("truetype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ds/DSTitleWebSmall-Italic.svg#font2) format("svg");font-weight:400;font-style:normal}@font-face{font-family:roboto;src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/Roboto-Regular.eot);src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/Roboto-Regular.eot?#iefix) format("embedded-opentype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/Roboto-Regular.woff) format("woff"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/Roboto-Regular.ttf) format("truetype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/Roboto-Regular.svg#roboto) format("svg");font-weight:400;font-style:normal}@font-face{font-family:font4;src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/roboto-light-webfont.eot);src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/roboto-light-webfont.eot?#iefix) format("embedded-opentype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/roboto-light-webfont.woff2) format("woff2"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/roboto-light-webfont.woff) format("woff"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/roboto-light-webfont.ttf) format("truetype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/roboto/roboto-light-webfont.svg#font4) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Ubuntu;src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/citroen/citroen_light-webfont.eot);src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/citroen/citroen_light-webfont.eot?#iefix) format("embedded-opentype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/citroen/citroen_light-webfont.woff) format("woff"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/citroen/citroen_light-webfont.ttf) format("truetype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/citroen/citroen_light-webfont.svg#Ubuntu) format("svg");font-weight:400;font-style:normal}@font-face{font-family:NSpictos;src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ns_pictos/ns_pictos.eot);src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ns_pictos/ns_pictos.eot?#iefix) format("embedded-opentype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ns_pictos/ns_pictos.woff2) format("woff2"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ns_pictos/ns_pictos.woff) format("woff"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ns_pictos/ns_pictos.ttf) format("truetype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/ns_pictos/ns_pictos.svg#NSpictos) format("svg");font-weight:400;font-style:normal}@font-face{font-family:fontello;src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/fontello/fontello.eot?14539174);src:url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/fontello/fontello.eot?14539174#iefix) format("embedded-opentype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/fontello/fontello.woff?14539174) format("woff"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/fontello/fontello.ttf?14539174) format("truetype"),url(https://mediapays2-dspp-driveds-prod.driveds.com/fonts/fontello/fontello.svg?14539174#fontello) format("svg");font-weight:400;font-style:normal} #pgt_wrapper_central div, #pgt_wrapper_central span, #pgt_wrapper_central applet, #pgt_wrapper_central object, #pgt_wrapper_central iframe, #pgt_wrapper_central h1, #pgt_wrapper_central h2, #pgt_wrapper_central h3, #pgt_wrapper_central h4, #pgt_wrapper_central h5, #pgt_wrapper_central h6, #pgt_wrapper_central p, #pgt_wrapper_central blockquote, #pgt_wrapper_central pre, #pgt_wrapper_central a, #pgt_wrapper_central abbr, #pgt_wrapper_central acronym, #pgt_wrapper_central address, #pgt_wrapper_central big, #pgt_wrapper_central cite, #pgt_wrapper_central code, #pgt_wrapper_central del, #pgt_wrapper_central dfn, #pgt_wrapper_central em, #pgt_wrapper_central img, #pgt_wrapper_central ins, #pgt_wrapper_central kbd, #pgt_wrapper_central q, #pgt_wrapper_central s, #pgt_wrapper_central samp, #pgt_wrapper_central small, #pgt_wrapper_central strike, #pgt_wrapper_central strong, #pgt_wrapper_central sub, #pgt_wrapper_central sup, #pgt_wrapper_central tt, #pgt_wrapper_central var, #pgt_wrapper_central b, #pgt_wrapper_central u, #pgt_wrapper_central i, #pgt_wrapper_central center, #pgt_wrapper_central dl, #pgt_wrapper_central dt, #pgt_wrapper_central dd, #pgt_wrapper_central ol, #pgt_wrapper_central ul, #pgt_wrapper_central li, #pgt_wrapper_central fieldset, #pgt_wrapper_central form, #pgt_wrapper_central label, #pgt_wrapper_central legend, #pgt_wrapper_central table, #pgt_wrapper_central caption, #pgt_wrapper_central tbody, #pgt_wrapper_central tfoot, #pgt_wrapper_central thead, #pgt_wrapper_central tr, #pgt_wrapper_central th, #pgt_wrapper_central td, #pgt_wrapper_central article, #pgt_wrapper_central aside, #pgt_wrapper_central canvas, #pgt_wrapper_central details, #pgt_wrapper_central embed, #pgt_wrapper_central figure, #pgt_wrapper_central figcaption, #pgt_wrapper_central footer, #pgt_wrapper_central header, #pgt_wrapper_central hgroup, #pgt_wrapper_central menu, #pgt_wrapper_central nav, #pgt_wrapper_central output, #pgt_wrapper_central ruby, #pgt_wrapper_central section, #pgt_wrapper_central summary, #pgt_wrapper_central time, #pgt_wrapper_central mark, #pgt_wrapper_central audio, #pgt_wrapper_central video { font-family: 'dsmediumregular', 'ヒラギノ角ゴ Pro W3','メイリオ', meiryo, 'ＭＳ Ｐゴシック',MS PGothic, 'Hiragino Kaku Gothic Pro', Arial, sans-serif, Verdana, Helvetica,Osaka, sans-serif !important; } #pgt_wrapper_central h1 {font-family: 'dsmediumregular', 'ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',MS PGothic, 'メイリオ', meiryo, 'Hiragino Kaku Gothic Pro', Arial, sans-serif, Verdana, Helvetica,Osaka, sans-serif !important;} .selfclear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; } #content_main { width: 100%; padding: 0 !important; } #content_main ul { list-style: none; padding-left:0; } #content_main .title, #content_main .img_text { display: none; } /* 新しいh1ヘッダーとブレッドクラム */ #pgt_wrapper_central.pgt_wrapper { min-width: 0; overflow: hidden !important; background-image: none !important; } .pgt_inwrapper .wrap-ch { } .pgt_inwrapper .wrap-ch #content_header { width: 1024px; margin: 0 auto; min-height: 50px; padding-top: 20px; height: auto !important; } .pgt_inwrapper .wrap-ch #content_header:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; } .pgt_inwrapper .wrap-ch #content_header h1 { font-size: 23px !important; color: #646464 !important; padding:15px 0 15px 0 !important; margin:0 !important; width:auto !important; display: inline; /*-webkit-text-stroke-width: 0.2px; */ } .pgt_inwrapper .wrap-ch #content_header #pgt_wrapper_breadcrumb { float: right; display: inline; width: auto !important; min-width: 0 !important; margin: 0 auto; padding: 21px 0 15px; } .pgt_inwrapper .wrap-ch #content_header.longer #pgt_wrapper_breadcrumb { float: left; padding-top: 10px; padding-bottom: 10px; } .pgt_inwrapper .wrap-ch #content_header.longer h1 { padding-top: 0 !important; } .pgt_inwrapper .wrap-ch #content_header #pgt_wrapper_breadcrumb .pgt_inwrapper, .pgt_inwrapper .wrap-ch #content_header #pgt_wrapper_breadcrumb .pgt_inwrapper ul { width: auto; text-align: left; overflow: visible; } .pgt_inwrapper .wrap-ch #content_header #pgt_wrapper_breadcrumb ul li:first-child { display: inline; } .pgt_inwrapper .wrap-ch #content_header #pgt_wrapper_breadcrumb ul li a, .pgt_inwrapper .wrap-ch #content_header #pgt_wrapper_breadcrumb ul li .cr { color: white !important; } .pgt_inwrapper .wrap-ch #content_header #pgt_wrapper_breadcrumb ul li a span { font-size: 12px; } #content_main { width: 1024px; padding: 0; margin: 0 auto; } /* レスポンシブ時の自動調整 .auto-fit : basisWidth以下で自動的につくクラス */ .auto-fit #pgt_wrapper_breadcrumb.pgt_wrapper { width: 100% !important; } .auto-fit #pgt_main_wrapper .pgt_inwrapper #content_header h1 { padding: 4px 0 9px 0; } .auto-fit #pgt_wrapper_central .pgt_inwrapper #content_main { padding: 0 0 50px ;} .auto-fit .article_content .social { right: 1em; } .auto-fit .pgt_inwrapper { overflow-x: hidden; width: 100% !important; min-width: 100% !important; padding: 0 !important; } .auto-fit #content_main { overflow: hidden; } .auto-fit #content { /*margin:0*/ } .auto-fit #page-footer { min-height: 1em !important; } /* 1024以下 */ @media (max-width: 1024px) { .pgt_inwrapper .wrap-ch #content_header { width: 100% !important; } .pgt_inwrapper .wrap-ch #content_header h1 { padding-left: 1em !important; padding-right: 1em !important; } .pgt_inwrapper .wrap-ch #content_header #pgt_wrapper_breadcrumb { padding-left: 2em !important; padding-right: 2em !important; } } #content a { text-decoration: none; font-weight: normal; outline: none; } .imageLiquid { display: block; overflow: hidden; width:100%; height: 100%; } /* boxレイアウトを使う場合、下記に注意 ・ IE9までは対応していないので、jsで再調整が必要（ドメインをまたぐのでflexie.jsは使えない） ・firefoxではfloatが入っていると効かない ・上記２つのことから、対象コンテンツを一度inline-block要素でラップしてやるとよい */ /* flex box - center x center */ .box-c-c { display: -webkit-box !important; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box !important; -moz-box-pack: center; -moz-box-align: center; display: -ms-flexbox !important; -ms-flex-pack: center; -ms-flex-align: center; display: box !important; box-pack: center; box-align: center; } /* flex box - start x center */ .box-s-c { display: -webkit-box !important; -webkit-box-pack: start; -webkit-box-align: center; display: -moz-box !important; -moz-box-pack: start; -moz-box-align: center; display: -ms-box !important; -ms-box-pack: start; -ms-box-align: center; display: -ms-flexbox !important; -ms-flex-pack: start; -ms-flex-align: center; display: box !important; box-pack: start; box-align: center; } /* flex box - center x start */ .box-c-s { display: -webkit-box !important; -webkit-box-pack: center; -webkit-box-align: start; display: -moz-box !important; -moz-box-pack: center; -moz-box-align: start; display: -ms-flexbox !important; -ms-flex-pack: center; -ms-flex-align: start; display: box !important; box-pack: center; box-align: start; } /* flex box - end x center */ .box-e-c { display: -webkit-box !important; -webkit-box-pack: end; -webkit-box-align: center; display: -moz-box !important; -moz-box-pack: end; -moz-box-align: center; display: -ms-flexbox !important; -ms-flex-pack: end; -ms-flex-align: center; display: box !important; box-pack: end; box-align: center; } /* flex box - center x end */ .box-c-e { display: -webkit-box !important; -webkit-box-pack: center; -webkit-box-align: end; display: -moz-box !important; -moz-box-pack: center; -moz-box-align: end; display: -ms-flexbox !important; -ms-flex-pack: center; -ms-flex-align: end; display: box !important; box-pack: center; box-align: end; } /* flex box - center x center */ .box-s-e { display: -webkit-box !important; -webkit-box-pack: start; -webkit-box-align: end; display: -moz-box !important; -moz-box-pack: start; -moz-box-align: end; display: -ms-flexbox !important; -ms-flex-pack: start; -ms-flex-align: end; display: box !important; box-pack: start; box-align: end; } /* Mobile Styles */ .smart-phone header.header-flat{ text-align:center; position:relative; top:0; left:0; width:100%; padding:0.6875em 1em; background:#142032; z-index:1000; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)} .smart-phone header.header-flat:before {content:''; display:block; width:100%; margin-bottom:-1em} .smart-phone header.header-flat:after {content:''; display:inline-block; width:100%} .smart-phone header.header-flat .navicon-button, .smart-phone header.header-flat .logo, .smart-phone header.header-flat .dealer-locator { position:relative; display:inline-block; vertical-align:middle; top:1em} .smart-phone header.header-flat .navicon-button {-webkit-user-select:none; z-index:100; height:22px; line-height:22px; padding:10px 0} .smart-phone header.header-flat .navicon-button .navicon { position:relative; display:inline-block; width:30px; height:3px; vertical-align:middle; background:#e7e6dd; transition:0.5s; -webkit-box-shadow:-1px -1px 1px 0 #000; -moz-box-shadow:-1px -1px 1px 0 #000; box-shadow:-1px -1px 1px 0 #000} .smart-phone header.header-flat .navicon-button .navicon:before,.smart-phone header.header-flat .navicon-button .navicon:after{display:block; content:""; width:30px; height:3px; background:#e7e6dd; position:absolute; z-index:-1; transition:0.5s; -webkit-box-shadow:-1px -1px 1px 0 #000; -moz-box-shadow:-1px -1px 1px 0 #000; box-shadow:-1px -1px 1px 0 #000} .smart-phone header.header-flat .navicon-button .navicon:before { top:.56em } .smart-phone header.header-flat .navicon-button .navicon:after { top:-.56em } .smart-phone header.header-flat .logo { text-align:center} .smart-phone header.header-flat .logo img { height:auto; width:auto; max-height:28px; max-width:100%} .smart-phone header.header-flat .logo .logo-title { display:block} .smart-phone header.header-flat .dealer-locator { position:absolute; right: 5%; background:transparent url('http://www.peugeot.co.jp/defaultSites/peugeot_main_responsive/images/mobile/dealer_locator.png?1389715718') no-repeat left top; background-size:100%; height:1.5em; width:1em } .smart-phone .footer-wrapper { font-size: 16px; background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #040303), color-stop(100%, #1a1a1a)); background: -webkit-linear-gradient(bottom, #040303 0%, #1a1a1a 100%); background: -moz-linear-gradient(bottom, #040303 0%, #1a1a1a 100%); background: -o-linear-gradient(bottom, #040303 0%, #1a1a1a 100%); background: linear-gradient(bottom, #040303 0%, #1a1a1a 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#040303', endColorstr='#1a1a1a', GradientType=0 ); padding: 5% 0; text-align: center; text-transform: uppercase; color: #6b6b6b; font-family: "PeugeotExpanded", 'Peugeot', 'ヒラギノ角ゴ Pro W3','メイリオ', meiryo, 'ＭＳ Ｐゴシック',MS PGothic, 'Hiragino Kaku Gothic Pro', Arial, sans-serif, Verdana, Helvetica,Osaka, sans-serif !important; } .smart-phone .footer-wrapper p { font-size: 0.875em } .smart-phone .footer-wrapper .social-list { margin: 5% 0; padding: 0 5% } .smart-phone .footer-wrapper .social-list li { position: relative; display: inline-block; line-height: 35px; } .smart-phone .footer-wrapper .social-list li a { position: relative; display: block; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2a2a2a), color-stop(100%, #101010)); background: -webkit-linear-gradient(top, #2a2a2a 0%, #101010 100%); background: -moz-linear-gradient(top, #2a2a2a 0%, #101010 100%); background: -o-linear-gradient(top, #2a2a2a 0%, #101010 100%); background: linear-gradient(top, #2a2a2a 0%, #101010 100%); box-sizing: border-box; width: 41px; height: 41px; margin: 0 10.25px; vertical-align: middle; border: 1px solid #484848; border-radius: 41px; text-decoration: none } .smart-phone .footer-wrapper .social-list li a: before { content: ''; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle } .smart-phone .footer-wrapper .social-list li a img { display: inline-block; vertical-align: middle; border: 0; height: 1.5em; width: 1.5em } .smart-phone .footer-wrapper .links a { color: #6b6b6b; text-decoration: none; font-size: 0.8125em; font-weight: normal !important; } .smart-phone .footer-wrapper .links a: hover { text-decoration: underline } .smart-phone .footer-wrapper .links a: before { display: inline-block; width: 20px; margin: 0 2%; content: ""; vertical-align: middle; border-top: 1px solid #525252 } .smart-phone .footer-wrapper .links a: first-child: before { display: none }