@charset "utf-8"; /* =========================================================================================== ヘッダー =========================================================================================== */ header { margin: 0 0 10px; font-size: 80%; width: 100%; position: relative; border-top: 4px solid @colorMain; /* =================================================== パターン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; font-size: 13px; } } } } /* =================================================== パターン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: 13px; font-weight: normal; line-height: 130%; } .translation { margin-bottom: 10px; line-height: 1; } .telNum { margin-bottom: 10px; font-size: 24px; line-height: 100%; font-weight: bold; &:before { font-family: Flaticon; content: '\e0a9'; font-size: 20px; margin: 0 10px 0 0; color: @colorSub; font-weight: normal; } } .businessHours { margin-bottom: 10px; } } /* =========================================================================================== グローバルナビ =========================================================================================== */ .globalNavi { margin: 0; border-top: 1px solid #e6e6e6; padding: 16px 0; ul { width: @contentWidth; margin: 0 auto; display: flex; justify-content: center; align-items: center; li { text-align: center; width: 100%; border-left: 1px solid #e6e6e6; &:last-of-type { border-right: 1px solid #e6e6e6; } a { font-size: 14px; display: block; padding: 5px 0; margin: 0 0; font-weight: bold; letter-spacing: -0.6px; position: relative; } a:hover { &:after { content: ''; display: block; position: absolute; width: calc(~"100% - 10px"); height: 3px; background-color: @colorSub; left: 0; right: 0; bottom: -10px; margin: auto; } } } li.current { a { &:after { content: ''; display: block; position: absolute; width: calc(~"100% - 10px"); height: 3px; background-color: @colorSub; left: 0; right: 0; bottom: -10px; margin: auto; } } } } } /* =========================================================================================== スライダー =========================================================================================== */ #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: 0px; .bx-controls-direction{ a, a:active, a:link, a:visited { -webkit-transition: none; transition: none; } } .bx-pager.bx-default-pager a { background: #00a040 !important; } .bx-pager.bx-default-pager a.active { background: #006026 !important; } } }