@charset "utf-8"; /* =========================================================================================== ヘッダー =========================================================================================== */ header { margin: 0 0 10px; font-size: 13px; width: 100%; border-top: 6px solid @colorMain; position: relative; /* =================================================== パターン1:ロゴ:左 =================================================== */ &.headerLay01 { .headArea01 { .wrap { padding: 5px 0; display: table; table-layout: fixed; .translation, h1 { display: table-cell; vertical-align: middle; } .translation { text-align: right; width: 220px; } } } .headArea02 { .wrap { padding: 10px 0; display: table; .infoArea, .logoArea { display: table-cell; vertical-align: middle; } .logoArea { width: 40%; } .infoArea { text-align: right; } } } } /* =================================================== パターン2:ロゴ:中央 =================================================== */ &.headerLay02 { padding: 20px 0 0; .wrap { display: table; table-layout: fixed; padding: 10px 0; .headArea01, .headArea02, .headArea03 { display: table-cell; vertical-align: middle; width: 33.3%; } .headArea01 {} .headArea02 { text-align: center; padding: 0 10px; } .headArea03 { text-align: right; } } } /* =================================================== Header共通 =================================================== */ .wrap { width: @contentWidth; margin: 0 auto; } h1 { font-size: 100%; font-weight: normal; line-height: 130%; } .translation { margin-bottom: 10px; } .telNum { color: @colorMain; display: inline-block; margin-bottom: 10px; font-size: 23px; line-height: 100%; padding-left: 50px; background: url('../images/tel.png') left center no-repeat; background-size: 42px 24px; } .businessHours { margin-bottom: 10px; } } /* =========================================================================================== グローバルナビ =========================================================================================== */ .globalNavi { margin: 0 0 15px; ul { width: @contentWidth; margin: 0 auto; display: flex; justify-content: center; align-items: center; li { text-align: center; width: 100%; font-weight: bold; font-size: 15px; a { color: @colorMain; display: block; padding: 15px 5px; position: relative; } a:hover::after { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; content: ''; width: 80px; height: 3px; background: @colorSub; } } li.current { a::before { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; content: ''; width: 80px; height: 3px; background: @colorSub; } } } } /* =========================================================================================== スライダー =========================================================================================== */ #sliderContent { width: 100%; margin: 0 auto; .sliderWrap { width: auto; /*要調整*/ margin: auto; min-width: 1000px; } #galleryslider { list-style-type: none; li { img { width: auto; height: auto; } } } .bx-wrapper { margin-bottom: 40px; .bx-controls-direction{ a, a:active, a:link, a:visited { -webkit-transition: none; transition: none; } } .bx-pager.bx-default-pager a { background: @colorMain !important; } .bx-pager.bx-default-pager a.active { background: darken(@colorMain, 20%) !important; } } }