@charset "UTF-8"; /* =================================== */ /* /* Name: lyout CSS /* Description: lyout Settings /* /* Create: 180913 /* /* =================================== */ /************************************************ 1.container ************************************************/ div#container { width: 100%; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; position: relative; padding-bottom: 0; z-index: 10; } /************************************************ 2.contents ************************************************/ div#contents { width: auto; margin: 0 auto; text-align: left; clear: both; display: block; position: relative; overflow: hidden; } /************************************************ 3.header & nav ************************************************/ main { width: auto; margin: 0 auto; text-align: left; clear: both; display: block; position: relative; overflow: hidden; padding: 0; } header { width: 100%; z-index: 5010; position: absolute; height: 120px; width: 100vw; } #header { z-index: 500; top: 0; left: 0; width: 100%; height: 120px; position: fixed; } #header #header--bg { position: relative; z-index: 2; padding: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 120px; } #header #header--bg:before { content: ""; position: absolute; right: 0; right: -100vw; top: 0; width: 100%; height: 70px; background-color: #fff; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all .4s cubic-bezier(.19, 1, .22, 1); transition: all .4s cubic-bezier(.19, 1, .22, 1); -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1); transition-timing-function: cubic-bezier(.19, 1, .22, 1); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.1); box-shadow: 0 0 3px rgba(0,0,0,.1); } #header.headroom--not-top { height: 70px; } #header.headroom--not-top #header--bg { height: 70px; } #header.headroom--not-top #header--bg::before { -webkit-transform: translateX(-100vw); transform: translateX(-100vw); right: -100vw; } #header.headroom--not-top .sp_lyout { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #header.headroom--not-top ul.subnav { padding: 0; } #header.headroom--not-top ul.subnav > li a { line-height: 70px; } #header.headroom--not-top ul.nav > li a { line-height: 70px; } #header.headroom--not-top #logo { width: 50px; height: 40px; } #header.headroom--not-top #logo a { height: 40px; background-size: 147px 40px; } #header.headroom--not-top .head-tagline { display: none; } #header.headroom--not-top .subnav_list { display: none; } #header.headroom--not-top .nav_sns { display: none; } #header.headroom--not-top ul.subnav > li.nav_contact { margin-left: 0; } /* logo ================ */ #logo { width: 183px; height: 50px; text-align: left; margin-bottom: 0; padding-top: 0; z-index: 50; margin-left: 3rem; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #logo a { display: block; height: 50px; background-image: url(../images/common/logo.svg); background-size: 183px 50px; background-position: left top; background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; } .head-tagline { font-size: 1.3rem; padding-left: 20px; margin-bottom: 0; color: #2E344F; line-height: 1; margin-top: 14px; } .head-tagline.on { color: #fff; } /* nav ================ */ nav { } ul.nav { padding: 0 17px; z-index: 502; background-color: #fff; } ul.nav > li { font-size: 1.4rem; display: block; margin: 0; padding: 0px; list-style-type: none; float: left; z-index: 70; position: relative; } ul.nav > li a { white-space: nowrap; display: block; text-align: center; margin: 0 13px 0; overflow: hidden; position: relative; text-decoration: none; outline: 0; color: #2C334C; font-weight: 500; line-height: 60px; } ul.nav > li a:hover { color: #17A57E; text-decoration: none; } ul.nav > li.nav_list a.current { color: #17A57E; text-decoration: none; } ul.nav > li.nav_list.home a.current { color: #2C334C; text-decoration: none; } header nav li.nav_list.home a.current:hover { color: #17A57E; } header nav li.nav_list a:before { content: ""; position: absolute; z-index: 1; left: 0; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(0) translateX(0); width: 0; bottom: 0; background: #17A57E; height: 4px; -webkit-transition-property: left, width; -webkit-transition-property: width; transition-property: width; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } header nav li.nav_list a:hover:before, header nav li.nav_list a:focus:before, header nav li.nav_list a:active:before { left: 0; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(0) translateX(0); width: 100%; } header nav li.nav_list a.current:before { left: 0; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(0) translateX(0); width: 100%; } header nav li.nav_list.home a.current:before { width: 0; } header nav li.nav_list.home a:before { content: ""; position: absolute; z-index: 1; left: 0; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(0) translateX(0); width: 0; bottom: 0; background: #17A57E; height: 4px; -webkit-transition-property: left, width; -webkit-transition-property: width; transition-property: width; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } header nav li.nav_list.home a:hover:before, header nav li.nav_list.home a:focus:before, header nav li.nav_list.home a:active:before { left: 0; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(0) translateX(0); width: 100%; } ul.subnav { padding: 0 0 0 10px; z-index: 502; background-color: #374252; opacity: 0.85; } ul.subnav > li { font-size: 1.3rem; display: block; margin: 0; padding: 0px; list-style-type: none; float: left; z-index: 70; position: relative; } ul.subnav > li a { white-space: nowrap; display: block; text-align: center; overflow: hidden; line-height: 60px; position: relative; text-decoration: none; outline: 0; color: #fff; font-weight: 500; } ul.subnav > li.subnav_list a { padding: 0 20px 0; } ul.subnav > li.subnav_list a:hover { color: #ccc; } ul.subnav > li.subnav_list a:after { content: ""; z-index: 1; height: 18px; width: 1px; background: #bbb; display: inline-block; position: absolute; right: 0; top: 50%; margin-top: -9px; } ul.subnav > li:nth-child(2) a:after { content: none; } .nav_sns a { border: 1px solid #fff; border-radius: 50px 50px; line-height: 1 !important; padding: 9px !important; font-size: 1.6rem; margin: 12px 3px 0 !important; } .nav_sns a i { padding-right: 0 !important; } ul.subnav > li.nav_contact { float: right; margin-left: 18px; } ul.subnav > li.nav_contact a { background-color: #01ABA7; width: 160px; } ul.subnav > li.nav_contact a:hover { background-color: #007876; } .subnav_store img { height: 30px; padding: 0 5px; vertical-align: middle; margin: 15px 0 0; } #header.headroom--not-top .subnav_store { display: none; } @media only screen and (max-width: 1120px) { ul.subnav > li { font-size: 1.2rem; } ul.subnav > li.subnav_list a { padding: 0 10px 0; } ul.nav > li { font-size: 1.3rem; } ul.nav > li a { margin: 0 8px 0; } ul.subnav > li.nav_contact a { width: 140px; } } @media only screen and (max-width: 1040px) { ul.nav > li { font-size: 1.2rem; } } @media only screen and (max-width: 991px) { #navi_btn { width: 50px; height: 30px; z-index: 10000; display: none; } #navi_btn { position: relative; cursor: pointer; } #navi_btn.scroll { position: fixed; } .smt-logo { display: none; } .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: absolute; width: 26px; height: 23px; top: 3px; left: 15px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background-color: #17a57e; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 10px; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-315deg); transform: translateY(10px) rotate(-315deg); } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-20px) rotate(315deg); transform: translateY(-10px) rotate(315deg); } .comp__subnavigation { position: relative; padding: 0 0 0; border-top: 1px solid #ccc; } #header.headroom--not-top ul.subnav > li a { line-height: 60px; } #header.headroom--not-top nav { -ms-flex-direction: none; flex-direction: none; display: none; -ms-flex-wrap: none; flex-wrap: none; } .sp_lyout { display: flex; flex-flow: column nowrap; } .comp__navigation { display: none; position: absolute; top: 0; margin-top: 0; background-color: #374252; left: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; height: -webkit-calc(100vh); height: 100vh; -webkit-transition: opacity .4s ease, top 0s ease 1s; transition: opacity .4s ease, top 0s ease 1s; width: 100%; padding: 80px 20px 30px; } .comp__navigation * { color: #fff !important; } ul.nav { margin: 0 0 20px; background-color: transparent; order: 1; padding: 0; border-top: 1px solid #787f89; } ul.nav li { font-size: 1.4rem; display: block; float: none; border-bottom: 1px solid #787f89; } ul.nav li a { white-space: nowrap; display: block; height: 50px; line-height: 50px !important; margin: 0; text-align: left; } ul.nav li:first-child a { margin: 0 0 0 0; } nav {display: none;} ul.subnav { padding: 0; width: 100%; order: 2; z-index: 502; background-color: transparent; opacity: 1; } ul.subnav > li { font-size: 1.2rem; float: none; display: inline-block !important; } .subnav_list {width:calc(50% - 3px);} ul.subnav > .subnav_list a { line-height: 1.6 !important; } ul.subnav > li.nav_sns { margin: 10px 0 0; } ul.subnav > li.nav_contact a { width: 60%; margin: 0 auto; } ul.subnav > li.nav_contact { display: block !important; float: none; margin: 20px auto 0; } #logo { width: 110px; height: 30px; margin: 0; z-index: 100000; } #logo a { height: 30px; background-size: 110px; } header { height: auto; } #header { height: auto; margin: 0; } #header #header--bg:before { height: 70px; } header nav li.nav_list a:before { display: none; } #header #header--bg { height: inherit; padding: 19px 0 19px; } #header.header-sticky #header--bg { background-color: #fff; border-bottom: 1px solid #ddd; } #header.headroom--not-top #logo { width: 110px; height: 30px; } #header.headroom--not-top #logo a { height: 30px; background-size: 110px; } .btn-product .js-s-toggle { position:relative; } .btn-product .js-s-toggle:before { position: absolute; top: 50%; right: 10px; left: inherit !important; display: block; content: ""; width: 15px !important; height: 1px; background: #fff; } .btn-product .js-s-toggle:after { position: absolute; top: 50%; right: 17px; display: block; content: ""; width: 1px; height: 15px; margin-top: -7px; background: #fff; } .btn-product.active .js-s-toggle:after { display: none; } } @media only screen and (max-width: 450px) { .head-tagline { display: none; } } @media only screen and (max-width: 350px) { .subnav_list:nth-child(1) { width: 25%;} .subnav_list:nth-child(2) { width: 35%;} .subnav_list:nth-child(3) { width: 40%;} } /* megamenu_product [ ----------------------------------------------------------- */ .megamenu_product { color: #fff; display: none; margin: 0 auto; top: 120px; left: 0; text-align: left; padding: 40px 80px 0; z-index: 9999; width: 100%; position: fixed; box-shadow: none; overflow-y: auto; visibility: visible; white-space: normal; bottom: 0px; height: initial; border-width: initial !important; border-style: none !important; border-color: initial !important; border-image: initial !important; border-radius: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100vw; background-color: transparent; } .megamenu_product .home_movement_container { max-width: 1180px; margin: 0 auto; } .megamenu_product .home_movement_container .comp__tabContent { display: table; width: 100%; height: calc(100vh - 240px); } .megamenu_product .home_movement_container .comp__tabContent .tabContent { display: table-cell; vertical-align: middle; width: 100%; } .img-close { cursor: pointer; z-index: 50; } .megamenu_product hr { margin: 20px 0 20px; } .img-close:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } .megamenu_product p { font-size: 2.0rem; font-weight: 500; line-height: 1; margin-bottom: 0; } .megamenu_product p a { color: #fff; padding-left: 20px; } .megamenu_product p a:before { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: 0.3s all; } .megamenu_product .comp__mega_category p { margin-bottom: 30px; } .megamenu_product.is-active { display: block; } .comp__mega_categorylist a { color: #fff; position: relative; } .comp__mega_categorylist a:hover { color: #B0B0B0; } .megamenu_product ul li { font-size: 1.6rem; margin-bottom: 10px; } .megamenu_product ul ul { margin-bottom: 8px; padding-top: 4px; } .megamenu_product ul li li a { font-size: 1.3rem; padding-left: 15px; color: #dadada; } .megamenu_product ul ul li a:before { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: 0.3s all; } .comp__mega_categorylist dl { margin-bottom: 20px; } .comp__mega_categorylist dt { padding-right: 15px; width: 30%; } .comp__mega_categorylist dd { font-size: 1.6rem; font-weight: 500; width: 70%; line-height: 1.2; color: #fff; } #container.megamenu--bg:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #374252 !important; opacity: 0.96; -webkit-transform: translateY(-101%); transform: translateY(-101%); -webkit-transition: all .4s cubic-bezier(.19, 1, .22, 1); transition: all .4s cubic-bezier(.19, 1, .22, 1); -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1); transition-timing-function: cubic-bezier(.19, 1, .22, 1); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.1); box-shadow: 0 0 3px rgba(0,0,0,.1); z-index: 5010; } #container.on.megamenu--bg::before { -webkit-transform: translateY(0); transform: translateY(0) } @media only screen and (max-width: 991px) { .megamenu_product { margin: 0 auto; padding: 0; top: 0; position: relative; height: initial; border-width: initial !important; border-style: none !important; border-color: initial !important; border-image: initial !important; border-radius: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; } .megamenu_product ul li { font-size: 1.3rem; margin-bottom: 0; border: none; } .megamenu_product hr { display: none; } .megamenu_product p { display: none; } .img-close { display: none; } .megamenu_product ul ul { display: none; } .comp__mega_category > .col-12 { padding: 0; border-bottom: 1px solid #787f89; } } /* =================================== 4: floatingNav ====================================== */ .floatingNav { position: absolute; position: fixed; right: 0; width: 60px; top: 50%; height: auto; transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .floatingNav { top: 50%; height: auto; transform: translateY(-50%); -moz-transform: rotate(-50%); -o-transform: rotate(-50%); -ms-transform: rotate(-50%); -webkit-transform: rotate(-50%); } .floatingNav__list { position: absolute; top: 50%; width: 60px; margin-top: -90px; } .floatingNav, .floatingNav__list { z-index: 5002; } .floatingNav__item { display: block; width: 60px; height: 60px; overflow: hidden; } .floatingNav__item a { display: block; height: 100%; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; transition: background .2s ease-out; -moz-transition: background .2s ease-out; -o-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; } .floatingNav__item.-mail a { background-image: url(../images/common/ico_mail.svg); background-size: 24px 18px; background-color: #01ABA7; } .floatingNav__item.-mail a:hover { background-color: #00807D; } .floatingNav__item.-search a { background-image: url(../images/common/ico_search.svg); background-size: 20px 20px; background-color: #189468; } .floatingNav__item.-search a:hover { background-color: #0F5F43; } .floatingNav__item.-lang a { background-image: url(../images/common/ico_lang.svg); background-size: 20px 20px; background-color: #35774D; background-position: center 15px; color: #fff; } .floatingNav__item.-lang a:hover { background-color: #1E432C; } .floatingNav__item.-lang a { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; text-indent: inherit; } .floatingNav__item.-lang span { display: block; position: relative; top: 74%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; font-size: 1.1rem; margin-top: 0; } .floatingNav__item.-line a { background-image: url(../images/common/ico_line.svg); background-size: 25px 24px; background-color: #00DB00; } .floatingNav__item.-line a:hover { background-color: #00AE00; } .floatingfoot__list { position: fixed; bottom: 10px; left: 10px; z-index: 5002; display: none; } .floatingfoot__item { width: 50px; height: 50px; overflow: hidden; display: inline-block; margin-right: 10px; } .floatingfoot__item a { border-radius: 5px; display: block; height: 100%; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; transition: background .2s ease-out; -moz-transition: background .2s ease-out; -o-transition: background .2s ease-out; -webkit-transition: background .2s ease-out; } .floatingfoot__item.-line a { background-image: url(../images/common/ico_line.svg); background-size: 29px 28px; background-color: #00DB00; } .floatingfoot__item.-line a:hover { background-color: #00AE00; } .floatingfoot__item.-tel a { background-image: url(../images/common/ico_tel.svg); background-size: 28px 28px; background-color: #17A57E; } .floatingfoot__item.-tel a:hover { background-color: #0F5F43; } .floatingNav__item.-store { display: none; } @media screen and (max-width: 991px){ .floatingNav { top: 14px; height: auto; position: fixed; right: 10px; width: 160px; z-index: 100000; } .floatingNav__list { position: absolute; top: 0; width: 160px; margin-top: 0; display: flex; } .floatingNav__list { transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s,-webkit-transform .4s; -webkit-transform: rotateY(0) rotateZ(0); -ms-transform: rotateY(0) rotateZ(0); transform: rotateY(0) rotateZ(0); -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; moz-transform-origin: right bottom; } .floatingNav__item { display: block; width: 40px; height: 40px; overflow: hidden; } .floatingNav__item.-mail a { background-size: 18px; } .floatingNav__item.-search a { background-size: 14px; } .floatingNav__item.-lang a { background-size: 12px; background-position: center 10px; } .floatingNav__item.-lang span { top: 74%; font-size: 1rem; } .floatingNav__item.-line { display: none; } .floatingfoot__list { display: block; } .floatingNav__item.-store { display: block; } .floatingNav__item.-store a { background-image: url(/thai/asset/css/../images/common/shopping-cart.svg); background-size: 18px; background-color: #008481; } .floatingNav__item.-store a:hover { background-color: #004645; } } /* =================================== 4: Footer ====================================== */ /* comp__cta_item [ ----------------------------------------------------------- */ a.comp__cta_item { width: 100%; height: 400px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; -ms-grid-row-align: center; -webkit-box-align: center; align-items: center; background-position: center; background-size: cover; overflow: hidden; } a.comp__cta_item:after { position:absolute; content:""; width:100%; height: 100%; display: block; background-color: #464646 !important; top: 0; left: 0; z-index:-1; opacity: 0.8; animation-duration: 1s; animation-fill-mode: both; } a.comp__cta_item:hover:after { background-color: #818181 !important; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; } .comp__cta dl { text-align: center; width: 100%; display: block; padding: 0 30px; color: #fff; z-index: 2; } .comp__cta dt { font-size: 2.2rem; font-weight: 500; } .comp__cta_item.catalog { background-image: url(../images/common/footer_cta_bg01.jpg); z-index: 0; } .comp__cta_item.company { background-image: url(../images/common/footer_cta_bg02.jpg); z-index: 0; } .comp__cta_item.locations { background-image: url(../images/common/footer_cta_bg03.jpg); z-index: 0; } @media only screen and (max-width: 991px) { .comp__cta dt { font-size: 1.8rem; } .comp__cta dd { font-size: 1.4rem; } } @media only screen and (max-width: 768px) { a.comp__cta_item { height: 250px; color: #ddd; } .comp__cta dt { font-size: 1.8rem; } .comp__cta dd { font-size: 1.2rem; } } @media only screen and (max-width: 576px) { a.comp__cta_item { height: 200px; color: #ddd; } .comp__cta dl { margin: 0 50px; } } .pagetop { position: fixed; bottom: 0; right: 0; width: 60px; height: 60px; z-index: 1000; } .pagetop a { position: relative; background-color: #374252; display: block; height: 60px; border: #374252; } .pagetop.stop a { border: 1px solid #ccc; } .pagetop a:hover { background-color: #189468; border: #189468; } .pagetop a::before { position: absolute; top: 6px; bottom: 0; left: 0; right: 0; margin: auto; content: ""; vertical-align: middle; } .pagetop a::before { width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(315deg); transform: rotate(315deg); transition: 0.3s all; } @media only screen and (max-width: 576px) { .pagetop { width: 40px; height: 40px; } .pagetop a { height: 40px; } } .comp__contact { background-color: #01ABA7; padding: 80px; text-align: center; color: #fff; } .comp__contact h3 { margin-bottom: 10px; } .comp__contact p { margin-bottom: 14px; } .comp__contact_tel { font-size: 3.0rem; line-height: 1; margin-bottom: 6px !important; font-weight: 500; } .comp__contact_tel span.free { font-size: 1.2rem; display: inline-block; margin-right: 10px; border: 1px solid #fff; border-radius: 50px 50px; padding: 6px 10px; vertical-align: bottom; font-weight: 500; } .comp__contact_tel a { color: #fff !important; text-decoration:none; } .comp__contact_open { font-size: 1.4rem; } @media only screen and (max-width: 768px) { .comp__contact { padding: 40px 20px; } .comp__contact h3 { text-align: center; } .comp__contact_tel b { display: block; margin-right: 0; margin-bottom: 10px; } .comp__contact_tel i { display: block; margin-left: 0; padding-top: 4px; font-size: 1.2rem; } .comp__contact .btn { margin: 0; width: 100%; margin-bottom: 10px; } } @media only screen and (max-width: 576px) { .comp__contact p { font-size: 1.2rem; } .comp__contact p.comp__contact_tel { font-size: 2.2rem; line-height: 1; } .comp__contact_tel span.free { font-size: 1.0rem; vertical-align: top; font-weight: 700; } } /* foot [ ----------------------------------------------------------- */ footer { clear: both; position: relative; background-color: #374252; } footer * { color: #fff; } div#footer { clear: both; margin: 0 auto; padding: 70px 0 70px; position: relative; text-align: left; } div#footer .comp__footer-title a { padding-right: 0; } div#footer .comp__footer-title span { display: inline-block; height: 50px; background-image: url(../images/common/footer_logo.svg); background-size: 183px 50px; background-position: left top; background-repeat: no-repeat; padding-left: 220px; line-height: 50px; } div#footer .comp__footer-sitemap li { margin: 0 0 20px; display: block; font-size: 1.5rem; text-align: left; font-weight: 500; line-height: 1.6; } div#footer .comp__footer-sitemap li a { color: #fff; } div#footer .comp__footer-sitemap li li a { color: #FFFFFF; } div#footer .comp__footer-sitemap li a:hover { color: #FFFFFF; text-decoration: underline; } div#footer .comp__footer-sitemap ul ul { padding-top: 20px; } div#footer .comp__footer-sitemap ul li ul li { margin: 0 0 15px; font-size: 1.3rem; font-weight: 400; } div#footer .comp__footer-sitemap .txt-description { margin: 0; } div#footer .comp__footer-sitemap dt { font-weight: 500; margin-bottom: 20px; font-size: 1.5rem; float: none; padding: 0; line-height: 1.6; } div#footer .comp__footer-sitemap dt a { color: #fff; } div#footer .comp__footer-sitemap dd a { color: #FFFFFF; } div#footer .comp__footer-sitemap dt a:hover, div#footer .comp__footer-sitemap dd a:hover { color: #fff; text-decoration: underline; } div#footer .comp__footer-sitemap dd ul li { margin: 0 0 15px; font-size: 1.3rem; font-weight: 400; } .comp__footer-sitemap { padding-top: 40px; } div#footer .comp__footer-sitemap .none { display: none; } #footer-end { padding-top: 30px; padding-bottom: 30px; text-align: left; background-color: #fff; } #footer-end .foot_link li { display: inline-block; padding-left: 30px; line-height: 1; } #footer-end * { color: #868686; font-size: 12px; } .foot_link { text-align: right; margin-bottom: 10px; } p.footer-copy { color: #868686; font-size: 12px; padding: 0; margin-bottom: 0; text-align: right; line-height: 1; } .comp__footer_sns li { float: left; } .comp__footer_sns li.nav_sns a { padding: 9px 13px !important; } @media only screen and (max-width: 991px) { div#footer .comp__footer-sitemap li { font-size: 1.4rem; } div#footer .comp__footer-sitemap ul li ul li { font-size: 1.2rem; } div#footer .comp__footer-sitemap .txt-description { margin: 0 0 30px; } } @media only screen and (max-width: 767px) { div#footer .comp__footer-sitemap li { font-size: 1.3rem; } .comp__footer_sns { padding: 30px 15px 15px; } #footer-end { text-align: center; } p.footer-copy { font-size: 1.0rem !important; text-align: center; line-height: 1.4rem; } div#footer .comp__footer-title span { background-size: 120px; padding-left: 140px; line-height: 44px; font-size: 1.2rem; } #footer-end .col-md-6 .row.align-middle { border-bottom: 1px solid #ccc; padding-bottom: 25px; } #footer-end .row.align-middle .col { font-size: 10px; text-align: left; } .foot_link { text-align: center; margin-bottom: 10px; } #footer-end .foot_link li { padding: 20px 10px; line-height: 1; } } @media only screen and (max-width: 576px) { div#footer .comp__footer-sitemap li { font-size: 1.3rem; } .comp__footer_sns { padding: 20px 15px 0; } div#footer { padding: 40px 0rem 40px; } .comp__footer-sitemap { padding-top: 30px; } div#footer .comp__footer-sitemap .none { display: block; } div#footer .comp__footer-sitemap .txt-description { margin: 0 0 15px; border-bottom: 1px solid #555555; } div#footer .comp__footer-sitemap .txt-description dt { font-weight: 600; margin-bottom: 0; font-size: 1.3rem; margin: 10px 0 0; padding: 20px 0; border-top: 1px solid #555555; } div#footer .comp__footer-sitemap .txt-description dd { padding: 0 0 10px; border-top: none; line-height: 1.6; } div#footer .comp__footer-sitemap .txt-description dt i.icon:before { background: #fff; } div#footer .comp__footer-sitemap .txt-description dt i.icon:after { background: #fff; } div#footer .comp__footer-sitemap ul { margin-bottom: 0; } div#footer .comp__footer-sitemap .first_list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } div#footer .comp__footer-sitemap .first_list li { flex: 0 0 50%; padding-right: 15px; padding-left: 15px; margin-bottom: 12px; } div#footer .comp__footer-sitemap .second_list { display:none; } div#footer .comp__footer-sitemap .third_list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } div#footer .comp__footer-sitemap .third_list li { flex: 0 0 50%; padding-right: 15px; padding-left: 15px; margin-bottom: 12px; } div#footer .comp__footer-sitemap ul ul { padding-top: 10px; } div#footer .comp__footer-sitemap dt { margin-bottom: 10px; font-size: 1.3rem; } div#footer .comp__footer-sitemap dd ul li { display: block; margin-bottom: 10px; font-size: 1.2rem; } } /* =================================== 4: search ====================================== */ .input-group { width: 80%; } .input-group.result { width: 100%; } .input-group .row { margin: auto; width: 100%; } .input-group .medium-expand { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0px; padding-right: 0; padding-left: 0; border-radius: 0 0 0 0; } .input-group .input--search{ width: 100%; border-radius: 0 0 0 0; height: 60px; line-height: 60px; font-size: 2.0rem; padding: 0 30px 0 30px; color: #333; } .input-group .shrink { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: 100%; } .input-group .shrink .btn a{ height: 60px; padding: 0 30px !important; border-radius: 0; } .input-group .shrink .btn > *{ line-height: 58px; } .modal__contents.search + .modal__close { margin: 0 0; margin-top: 0; padding-top: 0; text-align: center; position: absolute; top: 30px; right: 30px; } .comp__keyword { } .comp__keyword li { display: inline-block; margin-right: 10px; font-size: 1.4rem; margin-bottom: 5px; } .comp__keyword li a { color: #fff; border: 1px solid #fff; padding: 3px 8px; border-radius: 4px; display: block; } .comp__keyword li a:hover { color: #fff; background-color: #01ABA7; border: 1px solid #01ABA7; } .comp__language { border-top: 1px solid #787f89; } .comp__language li { font-size: 1.6rem; text-align: center; padding-bottom: 10px; border-bottom: 1px solid #787f89; padding-top: 10px; letter-spacing: 0.2rem; font-family: 'IBM Plex Sans', sans-serif; } .comp__language li a { color:#fff; } @media only screen and (max-width: 576px) { .input-group { width: 100%; } .input-group .input--search { font-size: 1.6rem; padding: 0 20px 0 20px; } } /* =================================== 5: Component ====================================== */ /* heading ------------------------------------------ */ h1, h2, h3, h4, h5, h6 { padding: 0; clear: both; margin: 0; font-weight: normal; font-feature-setting: "pkna" 1; } .ttl--Xxl { font-size: 5.0rem; font-weight: 500; line-height: 1.2 !important; } .ttl--Xl { /* 基本h2に適用 */ font-size: 3.0rem !important; line-height: 1.4 !important; font-weight: 500; } .ttl--l { /* 基本h2に適用 */ font-size: 2.4rem !important; line-height: 1.6 !important; font-weight: 500; } .ttl--m { /* 基本h2に適用 */ font-size: 2.2rem !important; line-height: 1.6 !important; font-weight: 500; } .ttl--s { /* 基本h2に適用 */ font-size: 2.0rem !important; line-height: 1.6 !important; font-weight: 500; } .ttl--lead { /* 基本h2に適用 */ font-size: 1.8rem !important; line-height: 1.6 !important; font-weight: 400; } .ttl_en { font-family: 'IBM Plex Sans', sans-serif; } .ttl_en_caption { font-size: 1.4rem; font-weight: 400; font-style: italic; color: #00AC81; line-height: 1.4; margin-bottom: 8px; font-family: 'IBM Plex Sans', sans-serif; } @media only screen and (max-width: 576px) { h1, h2, h3, h4, h5, h6 { padding: 0; font-size: 16px; clear: both; margin: 0; font-weight: normal; } .ttl--Xxl { font-size: 3rem; margin-bottom: 3rem; } .ttl--Xl { font-size: 2rem !important; margin-bottom: 3rem; line-height: 1.4 !important; } .ttl--lead { font-size: 1.5rem !important; margin-bottom: 20px; text-align: left; } .ttl--l { font-size: 1.8rem !important; margin-bottom: 30px; letter-spacing: 0; text-align: left; } .ttl--m { font-size: 1.6rem !important; line-height: 1.6 !important; font-weight: 500; } .ttl--s { /* 基本h2に適用 */ font-size: 1.4rem !important; } } /* button [ ------------------------------------------ */ .btn { position: relative; display: inline-block; transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; /* -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1); box-shadow: 0 0 10px rgba(0, 0, 0, .1);*/ line-height: 24px; } .btn > * { color: #fff !important; display: block; text-align: center; text-decoration: none; position: relative; border: 1px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; padding: 12px 26px !important; border-radius: 4px; font-weight: 700; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); } .btn.main > * { background-color: #01ABA7; border: 1px solid #01ABA7; font-weight: 700; } .btn.main > a:hover { background-color: #0E7775; border: 1px solid #0E7775 !important; } .btn.second > * { background-color: #5481B4; border: 1px solid #5481B4; font-weight: 700; } .btn.second > a:hover { background-color: #3D5C7F; border: 1px solid #3D5C7F !important; } .btn.third > * { background-color: #374252; border: 1px solid #374252; font-weight: 700; } .btn.third > a:hover { background-color: #1E2735; border: 1px solid #1E2735 !important; } .btn.linegray > * { background-color: #fff; border: 1px solid #B4B4B4; font-weight: 500; color: #707070 !important; } .btn.linegray > a:hover { border: 1px solid #424242 !important; color: #fff !important; background-color: #424242; } .btn_center { width: 240px; margin: 0 auto; } .btn.center { margin-left: auto; margin-right: auto; } .btn.large a { font-size: 1.8rem; padding: 22px 26px !important; border-radius: 4px; font-weight: 700; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); } .btn.small a { font-size: 1.4rem; padding: 10px 15px !important; border-radius: 4px; font-weight: 500; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); } .btn.w-all { display: block; } /* pdf button [ ------------------------------------------ */ i.pdf { content: ""; display: inline-block; width: 18px; height: 19px; margin-top: 3px; margin-left: 0 !important; margin-right: 8px; vertical-align: sub; background-position: 0px 0; background-image: url(../images/common/ico_pdf.png); background-size: 18px 19px; } @media only screen and (max-width: 576px) { main .btn { width: auto !important; } .btn > * { font-size: 1.4rem !important; width: auto; } .btn.large a { padding: 12px 20px !important; } .btn.small a { font-size: 1.2rem !important; padding: 6px 10px !important; } } /* pdf button [ ------------------------------------------ */ .youtube { position: relative; width: 100%; padding-top: 56.25%; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /* comp__cta_btn ================ */ ol.list_parentheses{ padding:0 0 0 1em; margin:0; } ol.list_parentheses li{ padding:0 0 0 0; margin:0 0 15px; } ol.list_parentheses ol li{ margin: 0 0 5px; list-style-type: none; counter-increment: cnt; text-indent: -1.5em; padding: 0 0 0 1.5em; } ol.list_parentheses ol li:last-child{ margin:0 0 0; } ol.list_parentheses ol li:before{ display: marker; content: "(" counter(cnt) ") "; } ol.list_parentheses ul { margin-bottom: 15px; } ol.list_parentheses ul li { margin-top: .5em; padding-left: 1em; text-indent: -1em; margin-bottom: 0; } ol.list_parentheses ul li:before { margin-right: 12px; content: ''; width: 6px; height: 6px; border-radius: 100%; display: inline-block; vertical-align: middle; background: #666; } /* comp__cta_btn ================ */ .comp__cta_btn { background-color: #374252; padding: 50px; text-align: center; margin-bottom: 30px; } .comp__cta_btn * { color:#fff; } @media only screen and (max-width: 576px) { .comp__cta_btn { padding: 30px 20px; } } /* btn-group ================ */ .btn-group li {margin-right: 10px;} /* large_btn ================ */ .large_btn { position: relative; overflow: hidden; display: inline-block; height: 50px; transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; font-weight: 700 !important; letter-spacing: 0.6px; } .large_btn > * { height: 50px; line-height: 48px; color: #fff !important; display: block; text-align: center; text-decoration: none; position: relative; border: 1px solid #fff; box-sizing: border-box; font-size: 1.8rem; font-weight: 700; -webkit-border-radius: 50px 50px; border-radius: 50px 50px; padding: 0 40px; } .large_btn > *:before { content: ""; display: block; } .large_btn > *:after { content: ""; display: block; } .large_btn > *:before, .large_btn > *:after { position: absolute; width: 0; height: 0; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; opacity: 0; } .large_btn:hover > * { border-color: transparent; background-color: #fff; color: #01ABA7 !important; } .large_btn:hover > *:before, .large_btn:hover > *:after { opacity: 1; width: 100%; width: -webkit-calc(100% + 1px); width: calc(100% + 1px); height: 100%; height: -webkit-calc(100% + 1px); height: calc(100% + 1px); } @media only screen and (max-width: 576px) { .large_btn { height: 40px; } .large_btn > * { font-size: 1.4rem; height: 40px; line-height: 38px; padding: 0 20px; } .btn-group li {margin-bottom: 10px;} } /* mega_link [ ------------------------------------------ */ .mega_link { display: block; margin-top: 60px; } .mega_link a { display: block; background-color: #DDDDDD; padding: 90px 0 70px; text-align: center; color: #2C334C; position: relative; } .mega_link a:before { content: ""; } .mega_link a:before, .mega_link a::after { position: absolute; content: ""; } .mega_link a::before { top: 80px; right: 50%; left: 50%; margin-left: -7px; display: block; width: 15px; height: 1px; background: #2E344F; transition: 0.3s all; } .mega_link a::after { top: 80px; right: 50%; left: 50%; display: block; width: 1px; height: 15px; margin-top: -7px; background: #2E344F; transition: 0.3s all; } .mega_link a:hover { background-color: #28b8b4; color: #fff; } .mega_link a:hover::before { background: #fff; } .mega_link a:hover::after { background: #fff; } /* table [ ------------------------------------------ */ table.detail_tbl2 { width: 100%; padding: 0px; border-collapse: collapse; border-spacing: 0px; border: 1px solid #ccc; font-size: 1.4rem; margin-bottom: 0; background-color: #fff; } .scroll + p { padding-top: 15px; } table.detail_tbl2 + p { padding-top: 15px; } table.detail_tbl2 thead td { padding: 8px 10px; margin: 0px; border: 1px solid #ccc; color: #374252; background: rgba(86, 122, 134, 0.1); font-weight: 700; text-align: center; white-space: nowrap; } table.detail_tbl2 thead th { padding: 8px 10px; margin: 0px; border: 1px solid #ccc; color: #374252; background: rgba(86, 122, 134, 0.1); font-weight: 700; text-align: center; white-space: nowrap; } table.detail_tbl2 tbody tr { margin: 0px; padding: 0px; } table.detail_tbl2 tbody td { padding: 5px 10px; text-align:center; margin: 0px; border: 1px solid #ccc; } table.detail_tbl2 tbody th { margin: 0; padding: 5px 10px; text-align: center; border: 1px solid #ccc; background: rgba(65, 81, 88, 0.1); white-space: nowrap; } table.detail_tbl2 tbody tr:nth-of-type(even) { background-color:rgba(86, 122, 134, 0.1); } table.bg_adjustment.detail_tbl2 tbody tr:nth-of-type(even) { background-color:transparent; } table.bg_adjustment.detail_tbl2 tbody td.body2 { background-color:rgba(86, 122, 134, 0.1); } table.detail_tbl2 .body3 {white-space:nowrap; background: rgba(65, 81, 88, 0.1);} .table_pa10 th { padding:10px !important; text-align: left !important; } .table_pa10 td { padding-left:10px !important; text-align: left !important; } .scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .scroll::-webkit-scrollbar { height: 10px; } .scroll::-webkit-scrollbar-track { margin: 0 2px; background: #ccc; } .scroll::-webkit-scrollbar-thumb { background: #666; } @media only screen and (max-width: 576px) { table.detail_tbl2 { font-size: 1.2rem; } .scroll{ overflow-x: scroll; display: block; width: 100%; -webkit-overflow-scrolling:auto; background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%; background-repeat: no-repeat; background-attachment: scroll; background-color: #fff; } .scroll::-webkit-scrollbar { height: 10px; } .scroll::-webkit-scrollbar-track { margin: 0 2px; background: #ccc; } .scroll::-webkit-scrollbar-thumb { background: #666; } .scroll table { background: linear-gradient(to left, hsla(0,0%,100%,0), white 15px) 0 0 / 50px 100%, linear-gradient(to right, hsla(0,0%,100%,0), white 15px) right / 50px 100%; background-repeat: no-repeat; background-attachment: local; border-bottom: 1px solid #CCC; border-collapse: collapse; } .scroll + h4 { padding-top: 20px; } } /* =================================== 5:Project ====================================== */ /* body [ ----------------------------------------------------------- */ #section--home { background-color: #FFFFFF; } .header_p #contents {padding-top: 120px} @media only screen and (max-width: 991px) { .header_p #contents { padding-top: 80px; } } /* breadcrumbs [ ----------------------------------------------------------- */ .breadcrumbs { margin: 0 0 10px 0; list-style: none; white-space: nowrap; padding-top: 30px; } .breadcrumbs::before, .breadcrumbs::after { display: table; content: ' '; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .breadcrumbs::after { clear: both; } .breadcrumbs li { font-size: 1.4rem; cursor: default; display: inline-block; white-space: nowrap; letter-spacing: 0.1rem; } .breadcrumbs li:not(:last-child)::after { position: relative; top: 1px; margin: 0 0.5rem; opacity: 1; content: ">"; } .breadcrumbs a { color: #374252; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs .disabled { color: #cacaca; cursor: not-allowed; } .breadcrumbs span { font-weight:700; } .product_details .breadcrumbs li.breadcrumbs_category + li.breadcrumbs_category{ display: none; } @media only screen and (max-width: 575px) { .breadcrumbs { padding-top: 0; } .breadcrumbs li { font-size: 1.2rem; } } /* =================================== 6:top page ====================================== */ /* top page cover [ ----------------------------------------------------------- */ .cover_wrap { width: 100%; position: relative; background-color: #E9E9E9; height: calc(100vh); min-height: 600px; max-height: 1000px; } .enter-img { position: relative !important; top: 0; left: 0; width: 100%; height: calc(100vh); min-height: 600px; max-height: 1000px; z-index: 0 !important; overflow: hidden; } .enter-img .inner { background-position: center bottom; background-size: cover; width: 100%; height: calc(100vh); min-height: 600px; max-height: 1000px; overflow: hidden; background-repeat: no-repeat; background-size: cover; display: flex; align-items: flex-end; } .bg-overlay { z-index: 2; position: absolute; width: 100%; height: calc(100vh - 80px); -webkit-transition: transform .6s ease, opacity .6s ease; -webkit-transition: opacity .6s ease, -webkit-transform .6s ease; transition: opacity .6s ease, -webkit-transform .6s ease; transition: transform .6s ease, opacity .6s ease; transition: transform .6s ease, opacity .6s ease, -webkit-transform .6s ease; } .enter-img .inner p { margin: 0 auto; display: block; width: 100%; text-align: left; margin-bottom: 102px; padding-left: 120px; font-size: 1.2rem; } .cover { text-align: left; clear: both; margin-top: 0; margin-right: auto; margin-left: auto; padding: 0; position: absolute; top: 0; overflow: hidden; z-index: 5001; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; /* -webkit-box-align: center; */ -ms-flex-align: center; -ms-grid-row-align: center; -webkit-box-align: center; align-items: center; width: 100%; height: calc(100vh - 135px); min-height: 465px; max-height: 865px; padding-top: 120px; background-repeat: no-repeat; background-size: cover; background-position: center; } .cover__valign { width: 100%; } .kv_center { display: block; max-width: 1380px; width: 80%; margin: 0 auto 0; text-align: left; } .kv_center #catch01 { display: inline-block; margin-bottom: 15px; width: 60%; } .kv_center #catch02 { font-size: 2.6rem; color: #374252; line-height: 1; text-align: left; margin-bottom: 40px; margin-top: 0px; font-weight: 600; } .kv_center ul li a { color: #fff; } .cover_foot { position: absolute; bottom: 0; width: 100%; } .cover__arrow:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } a.cover__arrow { position: absolute; bottom: 20px; right: 0px; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); text-decoration: none; z-index: 5002; padding-bottom: 40px; font-size: 13px; color: #fff; } a.cover__arrow i { transform: rotateZ( 90deg ); -webkit-transform: rotateZ( 90deg ); font-style: normal; display: inline-block; letter-spacing: 1px; height: auto; } @media only screen and (min-height: 1080px) { } @media only screen and (max-width: 1000px) { .enter-img .inner { } .kv_center #catch01 { width: 70%; } } @media only screen and (max-width: 576px) { .cover_wrap { height: 100%; min-height: inherit; max-height: inherit; } .enter-img { position: relative !important; top: 0; left: 0; width: 100%; height: 100%; min-height: inherit; max-height: 400px; z-index: 0 !important; overflow: hidden; } .cover { max-height: inherit; min-height: 400px; padding-top: 70px; height: auto; } .enter-img .inner { background-position: 30% center; height: 100%; min-height: inherit; max-height: 400px; } .kv_center { width: auto; padding: 0 20px; } .kv_center #catch01 { width: 90%; margin-bottom: 10px; } .kv_center #catch02 { font-size: 1.4rem; margin-bottom: 20px; } .kv_center ul li:last-child { display: none; } .comp__promotion { bottom: 10px; left: 3rem; padding-right: 60px; } .comp__promotion p span { font-size: 1.1rem; line-height: 1.5; letter-spacing: 0; } a.cover__arrow { right: -10px; padding-bottom: 30px; font-size: 10px; } .enter-img .inner p { margin: 0 auto; display: block; width: 100%; text-align: left; margin-bottom: 25px; padding-left: 100px; font-size: 1.0rem; } } /* comp--topics [ ----------------------------------------------------------- */ .comp--topics { background-color: #fff; padding: 0 3rem; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .p-dl_news { height: 80px; color: #102129; } .p-dl_news dt { float: left; width: 80px; height: 80px; line-height: 80px; color: #374252; font-size: 1.4rem; text-align: left; position: relative; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; } .p-dl_news dd { line-height: 50px; margin-left: 80px; font-size: 1.4rem; } .p-dl_news dd a { } .ticker { line-height: 80px; width: 100%; text-align: left; position: relative; overflow: hidden; } .ticker ul { width: 100%; position: relative; line-height: 50px; } .ticker ul li { width: 99%; line-height: 80px; color: #2C334D; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; /* Safari */ -o-text-overflow: ellipsis; /* Opera */ white-space: nowrap; overflow: hidden; display: none; } @media only screen and (max-width: 576px) { .cover_foot { background-color: #fff; position: relative; } .comp--topics { padding: 0; } .p-dl_news { height: auto; padding-bottom: 0; } .p-dl_news dt { float: none; width: 100%; height: auto; line-height: 2.0; padding-top: 20px; } .p-dl_news dd { line-height: 1.6; margin-left: 0; color: #fff; font-size: 1.2rem; } .ticker { line-height: 1.8; width: 100%; text-align: left; position: relative; } .ticker ul { width: 100%; position: relative; line-height: 1.8; } .ticker ul li { width: 100%; line-height: 1.8; text-overflow: initial; -webkit-text-overflow: initial; -o-text-overflow: initial; white-space: initial; overflow: auto; } .slide-control { position: absolute; top: -25px; margin: 0 auto 0; display: block; width: auto; text-align: left; padding: 0; z-index: 50; } } /* mainly [ ----------------------------------------------------------- */ .mainlytile_container a { display: block; position: relative; height: 100%; } .mainlytile_container.products a:hover { background-color: #e8eef3; } .mainlytile_container.skytop a:hover { background-color: #e8eef3; } .mainlytile_container a .txt { padding: 40px 30px; } .mainlytile_container figure { position: relative; overflow: hidden; background: rgb(0, 0, 0, 0.10); } .mainlytile_container a figure img { position: relative; overflow: hidden; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(1.02); transform: scale(1.02); z-index: 99; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; animation-duration: 1s; animation-fill-mode: both; transform: translate3d(0px, 0px, 0px); width: 100%; height: 220px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;' } .mainlytile_container .row > div:nth-child(2) a .txt, .mainlytile_container .row > div:nth-child(5) a .txt, .mainlytile_container .row > div:nth-child(8) a .txt, .mainlytile_container .row > div:nth-child(11) a .txt, .mainlytile_container .row > div:nth-child(14) a .txt, .mainlytile_container .row > div:nth-child(17) a .txt{ margin: 0 -1px; } .mainlytile_container a .txt span { font-size: 1.4rem; font-weight: 400; display: inline-block; font-style: italic; color: #00AC81; line-height: 1.4; margin-bottom: 8px; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, Arial, sans-serif; } .mainlytile_container a .txt h3 { font-size: 2.2rem; font-weight: 700; line-height: 1.6; margin-bottom: 8px; color: #374252; } .mainlytile_container a .txt p { font-size: 1.4rem; font-weight: 500; line-height: 1.8; margin-bottom: 0; color: #374252; } .mainlytile_container a:hover figure img { -webkit-animation-name: fadeInbnr; animation-name: fadeInbnr; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 2s ease-in-out; transition: -webkit-transform 2s ease-in-out; transition: transform 2s ease-in-out; transition: transform 2s ease-in-out, -webkit-transform 2s ease-in-out; } .mainlytile_container .row > div { z-index: 3; } .mainlytile_container .row > div:hover { z-index: 5; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; box-shadow: 0 0 20px rgba(12,0,0,.25); -webkit-box-shadow: 0 0 20px rgba(12,0,0,.25); -moz-box-shadow: 0 0 20px rgba(12,0,0,.25); } .mainlytile_container a:hover .txt { background-color: #e8eef3; } .mainlytile_container.skytop a:hover .txt { background-color: transparent; } .mainlytile_container.products a:hover .txt { background-color: transparent; } /*.mainlytile_container a:hover .txt * { color: #fff; }*/ .mainlytile_container a:hover .label.normal { /*border: 1px solid #fff;*/ } .mainlytile_container.products a .txt h3 { font-size: 1.8rem; } .mainlytile_container.products a .txt p { font-weight: 400; } .mainlytile_container.products a .txt p + ul { padding-top: 15px; } .mainlytile_container.products a .txt ul li.label + li.label { margin-left: 4px; } .mainlytile_container.skytop a .txt { padding: 20px; } .mainlytile_container.skytop .row > div { margin-bottom: 0; } .mainlytile_container.skytop a figure img { height: 160px; } .mainlytile_container.skytop a .txt h3 { font-size: 1.6rem; } .mainlytile_container.skytop a .txt p { font-size: 1.2rem; font-weight: 400; color: #707070; } /*.mainlytile_container.skytop a:hover .txt p { color: #fff; }*/ .entry__permalink { position: absolute; bottom: 30px; left:30px; overflow:hidden; } .entry__permalink li { font-size: 1.2rem; font-weight: 400; margin-right:10px; display: none; } .entry__permalink li:nth-child(1),.entry__permalink li:nth-child(2) { display: inline-block; } .entry__permalink li a { color:#006149; } .entry__permalink li a:hover { -webkit-box-shadow: none; box-shadow: none; text-decoration:underline; } .mainlytile_container.news a .txt { padding: 30px 30px 60px; } .mainlytile_container.news .row > div { margin-bottom: 0; } .mainlytile_container.news a figure img { height: 240px; } .mainlytile_container.news a .txt h3 { font-size: 1.8rem; } .mainlytile_container.news a .txt ul.row { margin-bottom: 10px; } .mainlytile_container.news a .txt ul li { font-size: 1.2rem; font-weight: 500; display:inline-block; margin-right:10px; } .mainlytile_container.news a .txt ul li span { font-size: 1.2rem; font-weight: 500; font-style: normal; padding: 6px; margin: 0; line-height: 1; } .mainlytile_container.news a .txt ul li.time { color: #707070; line-height: 1; font-size: 1.3rem; font-weight: 400; } .mainlytile_container.news a:hover .txt ul li { /*color: #fff;*/ } .mainlytile_container.news.related-section .row > div:nth-of-type(4) { display: none; } @media only screen and (max-width: 991px) { .mainlytile_container.news.related-section .row > div:nth-of-type(4) { display: block; } .mainlytile_container.news a figure img { height: 180px; } .mainlytile_container.news a .txt { padding: 20px 20px 60px; } .mainlytile_container.news a .txt h3 { font-size: 1.6rem; } .entry__permalink { left: 20px; } } @media only screen and (max-width: 576px) { .mainlytile_container a .txt h3 { font-size: 1.6rem; } .mainlytile_container a .txt span { font-size: 1.1rem; } .mainlytile_container a figure img { height: 140px; } .mainlytile_container a .txt { padding: 20px 15px; } .mainlytile_container.products a .txt h3 { font-size: 1.6rem; } .mainlytile_container a .txt p { font-size: 1.2rem; line-height: 1.6; } .mainlytile_container.news a .txt { padding: 20px 10px 60px; } .mainlytile_container.news a .txt h3 { font-size: 1.6rem; } .entry__permalink { bottom: 20px; left: 10px; } .mainlytile_container.news a figure img { height: 140px; } .mainlytile_container.skytop a .txt { padding: 20px 15px; } .mainlytile_container.skytop a .txt h3 { font-size: 1.4rem; } } /* comp_title [ ----------------------------------------------------------- */ .comp_title { padding-right: 40px; margin-right: 40px; position:relative; } .comp_title h2 { line-height:1 !important; margin-bottom:20px !important; letter-spacing: 0.5rem; } .comp_title p { line-height:1 !important; margin-bottom:0 !important; } .comp_title:after { content:""; width:1px; height:100%; background-color:#ccc; position:absolute; right:0; top:0; display:block; } @media only screen and (max-width: 991px) { .comp_title + p.mb0 { padding: 20px 0 0 15px; line-height: 1.4; } .comp_title:after { display: none; } } @media only screen and (max-width: 576px) { .comp_title h2 { margin-bottom: 10px !important; letter-spacing: 0.2rem; } .comp_title { padding-right: 0; margin-right: 0; position: relative; } } /* tab [ ----------------------------------------------------------- */ .tab { position: relative; margin: 0 0 40px; border-bottom: 1px solid #BFBFBF; } .tab li { display: inline-block; padding-right: 50px; font-size: 1.8rem; color: #374252; line-height: 1; } .tab li a { font-weight: 500; color: #374252; position: relative; display: block; padding-bottom: 25px; } .tab li a:hover { color: #00AC80; } .tab li a.active { color: #00AC80; font-weight: 700; } .tab li a.active:before { content: ""; display: block; position: absolute; bottom: -1px; height: 2px; width: 100%; background-color: #00AC80; } .tab li a.active:after { content: ""; display: block; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; width: 10px; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #00AC80; } .tab li:last-child { padding-right: 0; } .tab span { font-size: 1.6rem; } /* #tab2 {padding-top: 140px; margin-top: -140px;} */ @media only screen and (max-width: 576px) { .tab li { padding-right: 20px; font-size: 1.4rem; } } /* comp__category [ ----------------------------------------------------------- */ .comp__category { margin-right: -10px; margin-left: -10px; } .comp__category a { padding: 12px; background-color: #fff; } .comp__category a .txt { font-size: 1.4rem; color: #707070; font-weight: 500; } .comp__category a figure { padding-right: 10px; text-align: center; } .comp__category_list { margin-bottom: 20px; padding-right: 10px; padding-left: 10px; } .comp__category a:hover { padding: 12px; /* background-color: #00AC80;*/ background-color: #374252; -webkit-box-shadow: 0 0 20px rgba(0,0,0,.3); box-shadow: 0 0 20px rgba(0,0,0,.3); } .comp__category a:hover img { opacity: 1; } .comp__category a:hover .txt { color: #fff; } .comp_category_title p { color: #6b6b6b; font-size: 1.8rem; margin-bottom: 4px; font-weight: 500; } .comp_category_title h1 { font-size: 3.4rem; font-weight: 700; line-height: 1.2; } .comp_category_title h1 + p { padding-top: 10px; font-weight: 400; } .comp_category_title + .comp_category_description { padding-top: 25px; } .comp_category_description + .js-toggle { margin-top: 30px; } .comp_category_description i { padding-right: 15px !important; flex-grow: 1; } .comp_category_description i img { max-width: 90px; max-height: 70px; } .comp_category_description h2 { font-size: 1.6rem; line-height: 1.6; flex-grow: 10; } .comp_category_description h2 img { padding-top: 10px; } .comp_category_description h3 { font-size: 1.6rem; line-height: 1.6; } @media only screen and (max-width: 576px) { .comp_category_title h1 { font-size: 2.2rem; } .comp_category_description h2 { font-size: 1.4rem; } .comp__category a .txt { font-size: 1.2rem; } .comp__category_list { margin-bottom: 10px; padding-right: 5px; padding-left: 5px; } } /* grid [ ----------------------------------------------------------- */ #grid { font-size: 0.1px; } .mix, .gap { display: inline-block; vertical-align: top; } .filter__nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 4rem; } .filter__nav fieldset { } .filter__nav_category{ } .filter__nav_spec { } .filter__nav_spec ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .filter__nav_spec ul li { height: 50px; padding: 0 15px; background-color: #EEF1F2; border: 1px solid #ccc; border-left: none; line-height: 46px; } .filter__nav_spec ul li:first-child { border: 1px solid #ccc; } /* Custom dropdown */ .custom-dropdown { position: relative; display: inline-block; vertical-align: middle; overflow: hidden; } .custom-dropdown select { background-color: #1abc9c; color: #fff; font-size: 1.5rem; padding: 0 10px; padding-right: 2.5em; border: 0; margin: 0; text-overflow: ''; -webkit-appearance: button; height: 50px; line-height: 50px; font-weight: 500; width: 130%; } .custom-dropdown::before, .custom-dropdown::after { content: ""; position: absolute; pointer-events: none; } .custom-dropdown::after{ position: absolute; top: 50%; margin-top: -6px; right: 15px; margin-left: -4px; content: ""; vertical-align: middle; } .custom-dropdown::after{ width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg); transition: 0.3s all; } .custom-dropdown::before { /* Custom dropdown arrow cover */ width: 2em; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; } .custom-dropdown select[disabled] { color: rgba(0,0,0,.3); } .custom-dropdown select[disabled]::after { color: rgba(0,0,0,.1); } .custom-dropdown::before { } .custom-dropdown::after { color: rgba(0,0,0,.4); } .select-hidden { display: none; visibility: hidden; padding-right: 10px; } .select { cursor: pointer; display: inline-block; position: relative; font-size: 16px; color: #fff; width: 220px; height: 40px; } .select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #c0392b; padding: 8px 15px; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .select-styled:after { content: ""; width: 0; height: 0; border: 7px solid transparent; border-color: #fff transparent transparent transparent; position: absolute; top: 16px; right: 10px; } .select-styled:hover { background-color: #b83729; } .select-styled:active, .select-styled.active { background-color: #ab3326; } .select-styled:active:after, .select-styled.active:after { top: 9px; border-color: transparent transparent #fff transparent; } .select-options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0; padding: 0; list-style: none; background-color: #ab3326; } .select-options li { margin: 0; padding: 12px 0; text-indent: 15px; border-top: 1px solid #962d22; -moz-transition: all 0.15s ease-in; -o-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .select-options li:hover { color: #c0392b; background: #fff; } .select-options li[rel="hide"] { display: none; } @media only screen and (max-width: 576px) { .custom-dropdown select { font-size: 1.6rem; width: 100%; } .filter__nav fieldset { width: 100%; } .custom-dropdown { width: 100%; } .filter__nav_spec li { width: 50%; } } /* CATALOG ----------------------------------------------------------- */ .download figure { margin-bottom: 15px; } .download a { color: #707070 } .download p.pdf { padding-left: 24px; position: relative; line-height: 1.6; } .download p.pdf:before { content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 18px; height: 19px; margin-top: 3px; margin-left: 0 !important; margin-right: 8px; vertical-align: sub; background-position: 0px 0; background-image: url(../images/common/ico_pdf.png); background-size: 18px 19px; } .download .row > div { margin-bottom: 40px; } /* label [ common tag ----------------------------------------------------------- */ .tile_container { border-top: 1px solid #ccc; } a.comp__tile_item { width: 100%; height: 250px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; -ms-grid-row-align: center; -webkit-box-align: center; align-items: center; overflow: hidden; text-align: center; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } a.comp__tile_item:hover { /*background-color: #28b8b4 !important;*/ background-color: #bdced6 !important; } /*a.comp__tile_item:hover * { color: #fff !important; }*/ a.comp__tile_item.last { } a.comp__tile_item:after { position:absolute; content:""; width:100%; height: 100%; display: block; background-color: #464646 !important; top: 0; left: 0; z-index:1; opacity: 0; animation-duration: 1s; animation-fill-mode: both; } a.comp__tile_item:hover:after { background-color: #B19B61 !important; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; } .comp__tile_item > div { width: 100%; display: block; margin: 0 auto; padding: 0 30px; } .comp__tile_item span { text-align: center; z-index: 2; display: block; margin-bottom: 30px; } .comp__tile_item i { text-align: center; display: block; z-index: 2; margin-bottom: 20px; } .comp__tile_item:hover i img { opacity: 1; } .comp__tile_item i img { height: 38px; } .comp__tile_item dl { text-align: center; width: 100%; display: block; margin: 0; z-index: 2; font-size: 2.0rem; color: #374252; } .comp__tile_item dt { font-size: 1.6rem; font-weight: 500; color: #374252; } .comp__tile_item h2 { z-index: 2; font-size: 2rem; color: #374252; font-weight: 700; margin-bottom: 15px; } .comp__tile_item p { font-size: 1.6rem; font-weight: 400; color: #374252; margin: 0 5%; line-height: 1.6; } @media only screen and (max-width: 991px) { .comp__tile_item h2 { font-size: 1.6rem; } .comp__tile_item p { font-size: 1.3rem; } } @media only screen and (max-width: 768px) { .tile_container .col-sm-6:nth-child(5) a.comp__tile_item { background-color: #fff !important; } .tile_container .col-sm-6:nth-child(7) a.comp__tile_item { background-color: #EEF1F2 !important; } .tile_container .col-sm-6:nth-child(8) a.comp__tile_item { background-color: #EEF1F2 !important; } } @media only screen and (max-width: 576px) { a.comp__tile_item { height: auto; padding: 30px 0; background-color: #fff; } .comp__tile_item span { margin-bottom: 15px; } .comp__tile_item i { margin-bottom: 10px; } .comp__tile_item i img { height: 30px; } .comp__tile_item dl { font-size: 1.4rem; } .comp__tile_item dt { font-size: 1.4rem; } .comp__tile_item.bg_gr { background-color: transparent !important; } .tile_container .col-sm-6:nth-child(7) a.comp__tile_item { background-color: #fff !important; } .tile_container .col-sm-6:nth-child(even) a.comp__tile_item { background-color: #EEF1F2 !important; } .tile_container .col-sm-6:nth-child(7) a.comp__tile_item:hover { background-color: #bdced6 !important; } .tile_container .col-sm-6:nth-child(even) a.comp__tile_item:hover { background-color: #bdced6 !important; } } /* label [ common tag ----------------------------------------------------------- */ .label, .tag { border: 1px solid transparent; font-size: 1.3rem; } .label { display: inline-block; padding: 0.7rem; border-radius: 0; font-size: 1.1rem; line-height: 1; white-space: nowrap; background: transparent; color: #00AD82; font-weight: 400; vertical-align: text-bottom; } .label.large { font-size: 16px; padding: 0.6rem 1.0rem; } .meta-group .label.large { font-size: 15px; padding: 0.6rem; vertical-align: super; } .label.disable { background-color: #ccc !important; color: #565656; border: 1px solid #ccc; } .label.normal { border: 1px solid #00AD82; } .label.category { background-color: #2E344F !important; border: 1px solid #2E344F; color: #fff; } .label.black { background-color: #374252 !important; color: #fff; border: 1px solid #374252; } figure .label.category { position: absolute; bottom: 10px; left: 10px; z-index: 100; } @media only screen and (max-width: 576px) { .label { font-size: 0.9rem; } } /* icon [ common tag ----------------------------------------------------------- */ .comp__icon li { display: inline-block; margin-right: 8px; margin-bottom: 8px; } .comp__icon li img { max-width: 30px; max-height: 30px; } /* js-toggle [ common tag ----------------------------------------------------------- */ dl.js-toggle.normal.on { -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; -webkit-box-shadow: 0 0 20px rgba(0,0,0,.16); box-shadow: 0 0 20px rgba(0,0,0,.16); } dl.js-toggle.normal > dt { position: relative; padding: 15px 65px 15px 15px; cursor: pointer; transition: 0.7s all; line-height: 1.5; font-size: 1.6rem; font-weight: 500; border: 1px solid #ccc; margin-top: -1px; } dl.js-toggle.normal > dt span{ position: absolute; top: 0; right: 0; width: 50px; height: 100%; background-color: #EEF1F2; } dl.js-toggle.normal > dt span::before{ position: absolute; top: 50%; margin-top: -6px; left: 50%; margin-left: -4px; content: ""; vertical-align: middle; } dl.js-toggle.normal > dt span::before{ width: 9px; height: 9px; border-top: 2px solid #707070; border-right: 2px solid #707070; -webkit-transform: rotate(135deg); transform: rotate(135deg); transition: 0.3s all; } dl.js-toggle.normal > dt.is-active{ border-color: #555E6C; background-color: #555E6C; color: #fff; } dl.js-toggle.normal > dt.is-active span{ background-color: #374252; } dl.js-toggle.normal > dt.is-active span::before{ border-color: #fff; -webkit-transform: rotate(315deg); transform: rotate(315deg); margin-top: -2px; } dl.js-toggle.normal > dt:hover span::before{ border-color: #01ABA7; } dl.js-toggle.normal > dd{ position: relative; display: none; padding: 30px; background-color: #F9F9F9; border: 1px solid #CCCCCC; } dl.js-toggle.normal > dd p{ margin-bottom: 0px; } dl.js-toggle.normal > dd p + p{ padding-top:20px; } dl.js-toggle.normal > dd .col12 + .col12{ padding-top:20px; } @media only screen and (max-width: 576px) { dl.js-toggle.normal > dt { font-size: 1.4rem; } dl.js-toggle.normal > dd { padding: 15px; font-size: 1.3rem; } } .comp__nav_news { margin-bottom: 50px; border-bottom: 1px solid #BFBFBF; } .comp__nav_news li { display: inline-block; padding-right: 40px; } .comp__nav_news li:last-child { padding-right: 0; } .comp__nav_news li a{ color: #374252; font-weight: 700; padding-bottom: 15px; display: block; } .comp__nav_news li a:hover{ color: #00AC81; font-weight: 700; } .comp__nav_news li a.active{ color: #00AC81; } .comp__nav_news li a.active:before { content: ""; display: block; position: absolute; bottom: -1px; height: 2px; width: 100%; background-color: #00AC80; z-index: 10; } .comp__nav_news li a.active:after { content: ""; display: block; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; width: 10px; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #00AC80; z-index: 10; } .comp__nav_news li:not(:first-child) a.current{ color: #00AC81; } .comp__nav_news li:not(:first-child) a.current:before { content: ""; display: block; position: absolute; bottom: -1px; height: 2px; width: 100%; background-color: #00AC80; } .comp__nav_news li:not(:first-child) a.current:after { content: ""; display: block; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; width: 10px; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #00AC80; } .comp__nav_news li:last-child { padding-right: 0; } @media only screen and (max-width: 768px) { .comp__nav_news_wrap { background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%; background-repeat: no-repeat; background-attachment: scroll; background-color: #fff; white-space: nowrap; margin: 0 -15px 30px; border-top: 1px solid #ccc; position: relative; } .comp__nav_news { margin-bottom: 0; background: linear-gradient(to left, hsla(0,0%,100%,0), white 15px) 0 0 / 50px 100%, linear-gradient(to right, hsla(0,0%,100%,0), white 15px) right / 50px 100%; background-repeat: no-repeat; background-attachment: local; padding: 10px 15px 10px; overflow-x: scroll; position:relative; } .comp__nav_news_wrap:before { content:""; display:block; width: 100%; height:1px; background-color:#ccc; position:absolute; bottom:10px; z-index: 1; left: 0; } .comp__nav_news_wrap:after { content:""; display:block; width: 100%; height:10px; background-color:#fff; position:absolute; bottom:0; z-index:0; } .comp__nav_news li { display: inline-block; padding-right: 20px; font-size: 1.4rem; } } /* pager [ common tag ----------------------------------------------------------- */ .area-pager { position: relative; padding: 30px 20px; overflow: hidden; } .mod-pager { position: relative; left: 50%; float: left; } .mod-pager li { position: relative; left: -50%; float: left; margin: 0 5px; } .mod-pager li.prev { margin-right: 20px; } .mod-pager li.next { margin-left: 20px; } .mod-pager li a, .mod-pager li em, .mod-pager li span { display: block; width: 50px; height: 50px; padding-top: 17px; border-radius: 50%; color: #01ABA7; font-size: 16px; font-weight: bold; text-align: center; line-height: 1; } .mod-pager li a:hover { color: #00ac80; } .mod-pager li em { background: #01ABA7; font-style: normal; color: #fff; } .mod-pager li.prev a, .mod-pager li.next a, .mod-pager li.disabled span { width: 70px; padding: 16px; background: #01ABA7; border: 1px solid #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1); box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 0; color: #fff; } .mod-pager li.prev a:hover, .mod-pager li.next a:hover { background: #00ac80; } .mod-pager li.disabled span { background: #ccc; } @media screen and (max-width: 767px) { .mod-pager { position: static; float: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .mod-pager li { position: static; float: none; display: none; margin: 0; } .mod-pager li.active { display: block; } .mod-pager li.prev { display: block; margin-right: auto; } .mod-pager li.next { display: block; margin-left: auto; } } /* form [ ----------------------------------------------------------- */ /* form [ ----------------------------------------------------------- */ .attention { margin: 0 0 6px; display: block; color: #F15253; font-size: 14px; padding: 6px 0 0; font-weight: 700; } .ico-req { color: #F15253; font-weight: bold; font-size: 20px; border-bottom: none; } .attention_box { border: 2px solid #F15253; font-size: 14px !important; line-height: 2; padding: 30px; background-color: #FDF0F0; color: #F15253; margin-bottom: 20px; font-weight: bold; } .attention_box h3 { font-size: 18px; margin-bottom: 10px; font-weight: 700; } .attention { margin: 0 0 15px; display: block; color: #F15253; font-size: 14px; } abbr.ico-req { color: #F15253; font-weight: normal; font-size: 160%; border-bottom: none !important; } select { padding:0 0 0 10px; height:36px; line-height:36px; font-size:14px; outline: 0; border: 1px solid #ccc; } input[type="text"],input[type="tel"], input[type="email"], input[type="password"], input[type="button"], input[type="submit"] { padding: 0 10px; height: 50px; line-height: 50px; font-size: 15px; outline: 0; border-radius: 3px; border: 1px solid #ccc; vertical-align: middle; } input[type="submit"] { background-color: #1abc9c; color: #fff; padding: 0 30px; border: 1px solid transparent; min-width: 200px; } input[type="submit"]:hover { filter: alpha(opacity=70) ; -moz-opacity: 0.7 ; opacity: 0.7 ; } input[type="submit"].btn_sub01{ background-color: #e62739; color: #fff; border: 1px solid #e62739; } input[type="submit"].btn_sub02{ background-color: #e62739; color: #fff; border: 1px solid #e62739; } input[type="button"] { background-color: #B19B61; color: #fff; padding: 0 30px; border: 1px solid transparent; min-width: 160px; } input[type="button"]:hover { filter: alpha(opacity=70) ; -moz-opacity: 0.7 ; opacity: 0.7 ; } input[type="button"].btn_save{ background-color: #9fa0a0; color: #fff; } input[type="button"].btn_delete{ background-color: #222; color: #fff; } input[type="radio"], input[type="checkbox"] { display: inline-block; margin-right: 6px; } input[type="radio"] + label, input[type="checkbox"] + label { position: relative; display: inline-block; margin-right: 12px; font-size: 1.3rem; line-height: 1.6; cursor: pointer; } input[type="text"]:focus, input[type="tel"]:focus, textarea:focus { background-color:#FFFBC7; border: 1px solid #ccc; } @media (min-width: 1px) { input[type="radio"], input[type="checkbox"] { display: none; margin: 0; } input[type="radio"] + label, input[type="checkbox"] + label { padding: 0 0 0 24px; } input[type="radio"] + label::before { content: ""; position: absolute; top: 12px; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px; margin-top: -9px; background: #FFF; } input[type="checkbox"] + label::before { content: ""; position: absolute; top: 10px; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px; margin-top: -9px; background: #FFF; } input[type="radio"] + label::before { border: 1px solid #ABABAB; border-radius: 30px; } input[type="checkbox"] + label::before { border: 1px solid #ABABAB; background-color: transparent; } input[type="radio"]:checked + label::before { border: 1px solid #000; } input[type="checkbox"]:checked + label::before { border: 1px solid #1abc9c; background-color: #1abc9c; } input[type="radio"]:checked + label::after, input[type="checkbox"]:checked + label::after { content: ""; position: absolute; top: 12px; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } input[type="radio"]:checked + label::after { left: 5px; width: 8px; height: 8px; margin-top: -4px; background: #1abc9c; border-radius: 8px; } input[type="checkbox"]:checked + label::after {left: 3px;width: 16px;height: 8px;margin-top: -10px;border-left: 2px solid #fff;border-bottom: 2px solid #fff;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);} input[type="radio"].static + label::before { border: 1px solid #ABABAB; } input[type="radio"].static:checked + label::before { border: 1px solid #ABABAB; } input[type="radio"].static:checked + label::after { background: #ABABAB; } } textarea { border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; padding:10px 20px; font-size:14px; width: 100%; } input::-webkit-input-placeholder { color: #999; } input:-moz-placeholder { color: #999; } input::-moz-placeholder { color: #999; } input:-ms-input-placeholder { color: #999; } input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } input:focus:-ms-input-placeholder { color: transparent; } /* =================================== 8: product detail ====================================== */ /* comp__product_kv [ ----------------------------------------------------------- */ .comp__product_kv { overflow: hidden; margin-bottom: 10px; margin-top: 20px; background-color:#EEF1F2; } .comp__product_kv .swiper-container img { width: 100%; } .comp__product_kv .comp_category_title { padding-left: 40px; } .comp__product_kv .comp_category_title .label + .label{ margin-left:4px; } .comp__product_kv .comp_category_title .label.category:first-child{ display: none; } .comp__product_item .col-item { margin-bottom: 40px } .comp__product_item .col-item h3 { font-size: 2.0rem; font-weight: 700; margin-bottom: 20px; border-top: 1px solid #AAAAAA; padding-top: 20px; position:relative; } .comp__product_item .col-item h3:before { content: ""; background-color: #374252; width: 16px; height: 4px; display: inline-block; position: relative; left: 0; vertical-align: super; margin-right: 10px; } .comp__product_item .col-item.col-sm-12 .txt { font-size: 1.6rem; background-color: transparent; padding: 0; } .comp__product_item .col-item .txt { font-size: 1.6rem; background-color: #EEF1F2; padding: 25px; } .comp__product_item .col-item .txt h2 { font-size: 3.0rem !important; line-height: 1.4 !important; font-weight: 500; } .comp__product_item .col-item .txt p { margin-bottom: 0; } .comp__product_item .col-item .txt p + p { padding-top: 15px; } .postid-196 .breadcrumbs_category { display: none; } .postid-614 .breadcrumbs_category { display: none; } .postid-196 .comp__related { display: none; } .postid-614 .comp__related { display: none; } .postid-196 .comp_category_title p { display: none; } .postid-614 .comp_category_title p { display: none; } .postid-196 .comp_category_title h1.mb15 { margin-bottom: 0 !important; } .postid-614 .comp_category_title h1.mb15 { margin-bottom: 0 !important; } .comp__teflon { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: flex; padding-top: 15px; } .comp__teflon span.icon-teflon img { max-width: 70px; } .comp__teflon span.txt { font-size: 1.3rem; padding-left: 10px; color: #555E6C; } @media only screen and (max-width: 1200px) { .comp__product_kv > .container { padding: 0; max-width: inherit; } .comp_category_title h1 { font-size: 3.0rem; } .comp__product_kv .comp_category_title { padding-right: 30px; } } @media only screen and (max-width: 768px) { .comp__product_kv .comp_category_title { padding: 30px 20px; } .comp_category_title h1 { font-size: 2.6rem; } .comp_category_title p { font-size: 1.4rem; } .comp__product_item .col-item h3 { font-size: 1.8rem; } .comp__product_item .col-item .txt h2 { font-size: 3.0rem !important; line-height: 1.4 !important; font-weight: 500; } .comp__product_item .col-item .txt h2 { font-size: 2rem !important; margin-bottom: 0; line-height: 1.4 !important; } } @media only screen and (max-width: 576px) { .comp_category_title h1 { font-size: 2rem; } } /* comp__dl [ download button / common tag ----------------------------------------------------------- */ .comp__dl li { display: inline-block; margin-left: 6px; } .comp__dl li:first-child { margin-left: 0; } /* =================================== 8: page common parts ====================================== */ .header_p main { margin-bottom: 80px; } .page-id-204.header_p main { margin-bottom: 0 !important; } .page-id-204.header_p .comp__contact { display: none; } .page-id-204.header_p .comp__contact.phone { display: block; } .header_p.product_details main { margin-bottom: 0; } .page-id-1588.header_p main { margin-bottom: 0 !important; } @media only screen and (max-width: 576px) { .header_p main { margin-bottom: 30px; } } /* hero_wrap [ ----------------------------------------------------------- */ .hero_wrap { text-align: left; clear: both; margin: 0 auto; padding: 0; position: relative; width: 100%; display: table; height: calc(100vh - 38vh); min-height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; background-color: #EEF1F2; } /*.hero_wrap:after { position: absolute; content: ""; width: 100%; height: 100%; display: block; background-color: #000000 !important; top: 0; left: 0; z-index: 1; opacity: 0.54; animation-duration: 1s; animation-fill-mode: both; }*/ .hero__valign { display: table-cell; vertical-align: middle; text-align: left; padding: 0 5% 0; z-index: 4; position: relative; z-index: 2; } .hero_wrap.md { height: 300px !important; } .hero__valign .kv_center { display: block; max-width: 1380px; margin: 0 auto 0; text-align: left; width: auto; margin-top: 120px; } .hero_wrap h1 { font-size: 3.4rem; line-height: 1.4; font-weight: 700; margin-bottom: 0; color: #374252; } .hero_wrap p { font-size: 1.6rem; line-height: 1; font-weight: 500; margin-bottom: 15px; font-family: 'IBM Plex Sans', sans-serif; color: #AAAAAA; letter-spacing: 0.2rem; } /* hero_wrap breadcrumbs [ ----------------------------------------------------------- */ .hero_wrap .breadcrumbs { position: absolute; top: 120px; left: 5%; z-index: 5; } .hero_wrap .breadcrumbs li { color: #374252; } .hero_wrap .breadcrumbs li:not(:last-child)::after { color: #374252; } .hero_wrap .breadcrumbs a { color: #374252; } .hero_wrap .breadcrumbs .disabled { color: #999; cursor: not-allowed; } @media only screen and (max-width: 991px) { .hero_wrap { background-position: 20% center; max-height: 500px; } } @media only screen and (max-width: 576px) { .hero_wrap { height: 300px !important; min-height: 300px; background-position: 10% center; } .hero__valign .kv_center { padding: 0 15px; margin-top: 60px; } .hero_wrap .hero__valign { padding: 0 20px; background-color: rgba(255,255,255,0.3); } .hero_wrap h1 { font-size: 1.8rem; font-weight: 700; } .hero_wrap h2 { font-size: 1.2rem; } .hero_wrap .breadcrumbs { top: 80px; } .hero_wrap p { font-size: 1.2rem; font-weight: 400; margin-bottom: 15px; letter-spacing: 0.1rem; color: #555; } } /* =================================== 9: company page ====================================== */ /* company_blc [ ----------------------------------------------------------- */ .company_blc { margin: -120px auto 100px auto !important; } .normal_page .company_blc { margin: 0 auto 100px auto !important; } .normal_page .colpd-wide { margin: 0 0 0 !important; } .company_blc > .container { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 1199px) { .company_blc .colpd-wide{ width: calc(100% - 320px); margin: 120px 0 0; } .company_blc aside{ display: block; width: 270px; margin-left: 50px; } .sp_lnav aside{ display: none; } } @media only screen and (max-width: 991px){ .company_blc aside{ margin-left: 0; width: 100%; position: absolute; left: 0; top: 0; background-color: #fff; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.1); box-shadow: 0 0 3px rgba(0,0,0,.1); z-index: 500; background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%; background-repeat: no-repeat; background-attachment: scroll; } .sp_lnav aside{ display: block; } .company_blc { margin: 0 auto 30px auto !important; } .company_blc .colpd-wide{ width: 100%; margin: 60px 0 0; } .normal_page .colpd-wide { margin: 60px 0 0 !important; } } @media only screen and (min-width: 1200px) { .company_blc .colpd-wide{ width: calc(100% - 380px); float: left; margin: 120px 0 0; } .company_blc aside{ display: block; width: 330px; margin-left: 50px; } .sp_lnav aside{ display: none; } } .company_blc aside > div { background-color: #555E6C; padding: 50px 35px 35px; } .company_blc aside h3 { font-size: 1.8rem; margin-bottom: 5.0rem; font-weight: 700; line-height: 1; color: #fff; } .company_blc aside h3 a { color: #fff; } .company_blc aside li:first-child a { border-top: 1px solid #A4AEBE; } .company_blc aside li a { padding: 12px 10px; border-bottom: 1px solid #A4AEBE; color: #fff; font-size: 1.4rem; font-weight: 500; display: block; } .company_blc aside li a:hover { background-color: #28b8b4; color: #fff; } .company_blc aside li a.current { background-color: #28b8b4; color: #fff; } .company_blc.normal aside { margin-top: 200px; } @media only screen and (max-width: 991px){ .company_blc > .container { flex-flow: column nowrap; } .company_blc aside > div { display: -ms-flexbox; display: flex; overflow-x: hidden; overflow: hidden; width: 100%; margin-left: 0; max-width: inherit; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; -webkit-justify-content: initial; justify-content: initial; padding: 0; background-color: transparent; background: linear-gradient(to left, hsla(0,0%,100%,0), white 15px) 0 0 / 50px 100%, linear-gradient(to right, hsla(0,0%,100%,0), white 15px) right / 50px 100%; background-repeat: no-repeat; background-attachment: local; } .company_blc aside h3 { font-size: 1.2rem; font-weight: 700; line-height: 2; padding: 12px 15px; width: auto; display: inline-block; margin: 0; background-color: #555E6C; } .company_blc aside li:first-child a { border-top: none; } .company_blc aside li a { padding: 12px 15px; border-bottom: none; font-size: 1.2rem; font-weight: 500; display: block; color: #1F2438; } .company_blc aside .lnav { display: -ms-flexbox; display: flex; } .company_blc.normal aside { margin-top: 70px; } } @media only screen and (max-width: 768px){ .googlemap_oversea iframe { height: 300px !important; } } /* comp__page-nav [ ----------------------------------------------------------- */ .comp__page-nav { border-bottom: 1px solid #AAAAAA; padding-bottom: 20px; margin-bottom: 40px; } .comp__page-nav li { display: inline-block; padding-right: 20px; } .comp__page-nav li a { color: #555E6C; } .comp__page-nav li a:hover { color: #01aba7; } @media only screen and (max-width: 576px) { .comp__page-nav { position: relative; border-bottom: none; text-align: center; margin-bottom: 10px; overflow-x: hidden; overflow: hidden; width: 100%; margin-left: 0; max-width: inherit; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; -webkit-justify-content: initial; justify-content: initial; padding-bottom: 20px; } .comp__page-nav:after { content:""; height:1px; width:100%; background-color:#ccc; position:absolute; bottom:20px; left:0; z-index:-1; } .comp__page-nav li { font-size: 1.2rem; padding: 0 20px 20px 0; } } /* locations page [ ----------------------------------------------------------- */ .location > div { margin-bottom: 60px; } .location figure { margin-bottom: 20px; } .location h3 { margin-bottom: 6px; font-size: 1.8rem; font-weight: 700; } @media only screen and (max-width: 576px) { .location > div { margin-bottom: 30px; } .location > div p { font-size: 1.2rem; margin-bottom: 10px; } .location h3 { font-size: 1.6rem; } .location > div .btn-group li { display: block; margin: 0; } .location > div .btn-group li + li { padding-top: 10px; } } @media only screen and (max-width: 768px) { .greeting_photo { width: 200px; } } /* media page [ ----------------------------------------------------------- */ dl.comp__media_list, .comp__media_list dt, .comp__media_list dd { box-sizing: border-box; } .comp__media_list dt { width: 120px; float: left; font-weight: 600; } .comp__media_list dd { padding-left: 120px; padding-bottom: 15px; } .comp__media_list dd:after { content: ''; display: block; clear: both; } @media only screen and (max-width: 576px) { .comp__media_list dt { width: 100%; float: none; font-weight: 600; } .comp__media_list dd { padding-left: 0; padding-bottom: 15px; } } /* comp__p-info [ ----------------------------------------------------------- */ dl.comp__p-info, .comp__p-info dt, .comp__p-info dd { box-sizing: border-box; } dl.comp__p-info { margin-bottom: 20px; } .comp__p-info dt, .comp__p-info dd { padding: 15px 15px 0 15px; margin-bottom: 0; } .comp__p-info dt { width: 180px; float: left; font-weight: 600; } .comp__p-info dd { padding-left: 180px; padding-bottom: 15px; } .comp__p-info dd:nth-of-type(odd) { background-color: #EEF1F2; } .comp__p-info dd:after { content: ''; display: block; clear: both; } .comp__p-info p {margin-top: 1rem; margin-bottom: 0;} .comp__p-info p:first-child {margin-top: 0; margin-bottom: 0;} .bm01 {width: 120px;display: inline-block;} .bm02 {width: 250px;display: inline-block;} .bm03 {width: 160px;display: inline-block;} .comp__p-info.histry dt { width: 80px; float: left; font-weight: 600; } .comp__p-info.histry dd { padding-left: 80px; padding-bottom: 15px; } .comp__p-info .explanation p {margin-bottom: 1rem;} .comp__p-info .explanation p:last-child {margin-bottom: 0;} @media screen and (max-width: 1200px) { .bm01 {width: auto; margin-right:20px;display: inline-block;} .bm02 {width: 280px;display: inline-block;} .bm03 {width: auto;display: block;} } @media screen and (max-width: 576px) { dl.comp__p-info { margin-bottom: 0; } .comp__p-info dt { padding: 15px 15px 0; margin-bottom: 0; font-size: 1.4rem; width: 100%; float: none; } .comp__p-info dt:nth-of-type(odd) { background-color: #F2F2F2; } .comp__p-info dd { padding: 0px 15px 15px; margin-bottom: 0; width: 100%; float: none; } .comp__p-info.histry dt { width: 100%; float: none; font-weight: 600; } .comp__p-info.histry dd { padding-left: 15px; padding-bottom: 15px; } .bm01 {width: auto; margin-right:20px;display: inline-block;} .bm02 {width: auto;display: inline-block;} .bm03 {width: auto;display: block;} } .comp__product_back li:nth-child(2) { display: none; } /* comp__p-download [ ----------------------------------------------------------- */ dl.comp__p-download, .comp__p-download dt, .comp__p-download dd { box-sizing: border-box; } dl.comp__p-download { margin-bottom: 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; -ms-grid-row-align: center; -webkit-box-align: center; align-items: center; position: relative; border: 1px solid #ccc; margin-top: -1px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .comp__chemical_download dl.comp__p-download:last-child { margin-bottom: 20px; } .comp__p-download dt, .comp__p-download dd { padding: 15px; } .comp__p-download dt { font-weight: 600; } .comp__p-download dd { text-align:right; white-space: nowrap; } .comp__chemical_download .comp__p-download:nth-of-type(odd) dd:before { background-color:#EEF1F2; display:block; content:""; height:100%; width:100%; position:absolute; top:0; left:0; z-index:-1; } @media screen and (max-width: 420px) { dl.comp__p-download { display: block; } .comp__p-download dt { padding: 15px 15px 0; } .comp__p-download dd { padding: 10px 15px 15px; text-align: left; } } /* comp__dl-info [ ----------------------------------------------------------- */ .comp__dl-info { background-color: #EEF1F2; padding: 50px 40px; margin-bottom: 30px; } .comp__dl-info dt { text-align: center; font-size: 1.8rem; margin-bottom: 10px; font-weight: 700; } .comp__dl-info dd { text-align: left; } .comp__dl-info.center dd { text-align: center; } .comp__dl-info span { display: block; text-align: center; margin-bottom: 10px; } .comp__dl-info span img { height: 38px; } @media screen and (max-width: 576px) { .comp__dl-info { padding: 30px 20px; margin-bottom: 20px; } .comp__dl-info dt { font-size: 1.6rem; } } /* comp__executives [ ----------------------------------------------------------- */ .row.comp__executives { position: relative; } .row.comp__executives .comp__executives_txt:after { content: ""; display: block; width: 50px; height: 50px; position: absolute; z-index: -1; background-color: #00AD82; } .row.comp__executives .comp__executives_txt:before { content: ""; width: 80px; height: 80px; position: absolute; z-index: -1; background-color: #00AD82; } .row.comp__executives:nth-child(odd) .comp__executives_txt:after { bottom: -10px; right: 40px; } .row.comp__executives:nth-child(even) .comp__executives_txt:after { top: -25px; left: 160px; } .row.comp__executives:nth-child(odd) .comp__executives_txt:before { display: block; bottom: -20px; right: 120px; width: 10px; height: 10px; } .row.comp__executives:nth-child(even) .comp__executives_txt:before { display: block; bottom: 20px; right: 60px; } .row.comp__executives:nth-child(4n) .comp__executives_txt:after { top: -25px; left: 80px; } .row.comp__executives:nth-child(4n) .comp__executives_txt:before { bottom: -20px; right: auto; left: 0px; } .comp__executives + .comp__executives { padding-top: 50px; } .comp__executives .comp__executives_photo { text-align: center; } .comp__executives figure{ text-align: center; margin-bottom: 10px; } .comp__executives h3{ font-size: 1.8rem; margin-bottom: 4px; } .comp__executives p{ font-size: 1.4rem; line-height: 1.6; margin-bottom: 0; } .comp__executives_txt { background-color: rgba(238,241,242,0.9); padding: 50px 40px; } @media only screen and (max-width: 768px) { .comp__executives figure img { max-width: 150px; } .comp__executives .comp__executives_photo { text-align: center; margin-bottom: 20px; } .comp__executives_txt { background-color: rgba(238,241,242,0.9); padding: 30px 20px; } .comp__executives h3.ttl--l { font-size: 1.6rem !important; } .comp__executives + .comp__executives { padding-top: 25px; border-top: 1px solid #ccc; margin-top: 25px; } } @media only screen and (max-width: 576px) { .row.comp__executives:nth-child(even) .comp__executives_txt:before { display: block; bottom: -10px; right: 60px; } .row.comp__executives:nth-child(even) .comp__executives_txt:after { top: -25px; left: 40px; } .row.comp__executives:nth-child(4n) .comp__executives_txt:before { bottom: -10px; right: auto; left: 180px; } .row.comp__executives:nth-child(4n) .comp__executives_txt:after { top: -10px; left: 80px; } } /* comp__section--outline [ ----------------------------------------------------------- */ dl.comp__section--outline, .comp__section--outline dt, .comp__section--outline dd { -webkit-box-sizing: border-box; box-sizing: border-box; } dl.comp__section--outline { } .comp__section--outline dt, .comp__section--outline dd { padding: 10px 0 0 0; margin-bottom: 10px; } .comp__section--outline dt { width: 140px; float: left; font-weight: 600; } .comp__section--outline dd { margin-left: 140px; } @media only screen and (max-width: 576px) { dl.comp__section--outline, .comp__section--outline dt, .comp__section--outline dd { font-size: 1.4rem; } dl.comp__section--outline, .comp__section--outline dt, .comp__section--outline dd { display: block; width: auto; float: none; padding: 0 0 0 0; margin: 0 0 0; text-align: center; } .comp__section--outline dd { margin: 0 0 15px; } } /* faq-page [ ----------------------------------------------------------- */ .faq-page .js-toggle dd ul { padding-top: 15px; } /* =================================== 9: Downloads page ====================================== */ dl.js-toggle.text > dt { padding: 20px 0; font-size: 1.8rem; } dl.js-toggle.comp__spec_section > dd { padding: 0; } .comp__spec-list { } .comp__spec-list dt, .comp__spec-list dd { padding: 8px 10px 8px 10px; margin-bottom: 0; } .comp__spec-list dt { width: 16%; float: left; font-weight: 600; line-height: 1; padding-top: 20px; } .comp__spec-list dd { padding-left: 16%; } .comp__spec-list dd:nth-of-type(even) { background-color: #F2F2F2; } .comp__spec-list dd:after { content: ''; display: block; clear: both; } .comp__catalogue_area { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #ccc; } .comp__catalogue_area a { display: block; color: #404040; } /* =================================== 9: search result ====================================== */ .comp__search-result { margin-bottom: 20px; box-shadow: 0 0 20px rgba(12,0,0,.25); -webkit-box-shadow: 0 0 20px rgba(12,0,0,.25); -moz-box-shadow: 0 0 20px rgba(12,0,0,.25); padding: 30px; background-color: #fff; } .comp__search-result h3 { font-size: 2.0rem; margin-bottom: 5px; font-weight: 700; } .comp__search-result p { font-size: 1.4rem; margin-bottom: 0; color: #707070; } /* =================================== 9: skytop result ====================================== */ .comp_category_title h1 .tag.label.normal { vertical-align: middle; margin-right: 10px; font-size: 1.4rem; font-weight: 500; margin-bottom: 5px; } .comp__skytop_txt { border-top: 6px solid #374252; padding-top: 30px; } .comp__skytop_txt dl, .comp__skytop_txt dt, .comp__skytop_txt dd { box-sizing: border-box; } .comp__skytop_txt dl { margin-bottom: 30px; } .comp__skytop_txt dt, .comp__skytop_txt dd { padding: 10px 0 0 0; margin-bottom: 0; line-height: 1.6; } .comp__skytop_txt dt { width: 140px; float: left; font-weight: 500; padding-bottom: 10px; } .comp__skytop_txt dd { padding-left: 140px; padding-bottom: 10px; } .comp__skytop_txt dd:after { content: ''; display: block; clear: both; } /* =================================== 11: news page ====================================== */ /* comp__news_section [ ----------------------------------------------------------- */ .comp_category_title.news { margin-bottom: 10px; } .comp_meta { padding: 50px 0; } .comp_meta li { margin-right: 20px; display: inline-block; } .comp__popular-post { border-top:8px solid #EEEEEE; padding-top: 30px; } .comp__popular-post h3 { font-size: 2.4rem; margin-bottom: 30px; text-align: center; } .comp__popular-post .comp__inner { border: 1px solid #DDDDDD; padding: 20px; } .comp__popular-post .comp__inner a { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .comp__popular-post li + li { padding-top:20px; } .comp__popular-post a figure { width:40%; } .comp__popular-post a .txt { width:calc(100% - 45%); } .comp__popular-post a h4 { font-size:1.4rem; color:#3B4552; } .comp__popular-post a .tag { font-size:1.2rem; margin:0 0 6px; padding:0; font-weight:400; } .comp__popular-post a figure img { position: relative; overflow: hidden; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(1.02); transform: scale(1.02); z-index: 99; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; animation-duration: 1s; animation-fill-mode: both; transform: translate3d(0px, 0px, 0px); width: 100%; height: 80px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;' } .comp__popular-post li:first-child a figure { width:100%; margin-bottom:10px; } .comp__popular-post li:first-child a .txt { width:100%; } .comp__popular-post li:first-child a h4 { font-size:1.6rem; } .comp__popular-post li:first-child a figure img { height: 200px; } .news_blc .comp__popular-post { margin-bottom: 20px; } @media only screen and (max-width: 576px){ .comp__popular-post h3 { font-size: 2.0rem; margin-bottom: 20px; } } @media only screen and (min-width: 1220px) { .news_blc .colpd-wide{ width: calc(100% - 380px); box-sizing: border-box; } } @media only screen and (min-width: 991px) { .news_blc .colpd-wide{ width: calc(100% - 380px); float: left; } .news_blc aside{ display: block; width: 330px; float: right; } } @media only screen and (max-width: 990px) { .news_blc .comp__popular-post { margin-bottom: 40px; } .comp__popular-post h3 { font-size: 1.6rem; margin-bottom: 30px; text-align: left; font-weight: 700; } .comp__popular-post .comp__inner { border: none; padding: 0; } .comp__popular-post li:first-child a figure { width: 40%; margin-bottom: 0; } .comp__popular-post li:first-child a figure img { height: 80px; } .comp__popular-post li:first-child a .txt { width: calc(100% - 45%); } .comp__popular-post li:first-child a h4 { font-size: 1.4rem; } } @media only screen and (max-width: 576px) { .comp__popular-post li:first-child a h4 { font-size: 1.2rem; } .comp__popular-post a h4 { font-size: 1.2rem; } } .news_blc aside .lnav li:first-child a { border-top: 1px solid #ccc; } .news_blc aside .lnav li a { padding: 12px 10px; border-bottom: 1px solid #ccc; color: #374252; font-size: 1.4rem; font-weight: 500; display: block; } .news_blc aside .lnav li a:hover { background-color: #28b8b4; color: #fff; } .news_blc aside .lnav li a.current { background-color: #28b8b4; color: #fff; } .comp__article { padding-top: 30px; } .comp__article .figure { text-align: center; } .comp__article h2 { font-size: 2.2rem; margin-bottom: 2rem; font-weight: bold; } .comp__article h3 { font-size: 1.8rem; margin-bottom: 2rem; font-weight: bold; } .comp__article h4 { font-size: 1.6rem; margin-bottom: 2rem; font-weight: bold; } .comp__article h5 { font-size: 16px;margin-bottom: 15px;font-weight: 700; } .comp__article h6 { font-size: 16px;margin-bottom: 15px; } .comp__article p { margin-bottom: 1.4em; font-size: 1.6rem; line-height: 2; overflow: auto;} .comp__article strong, .comp__article b { font-weight: bold; } .comp__article em { font-style: italic; } .comp__article ul, .comp__article ol { margin: 0 0 1em 0; padding: 0; counter-reset: li; list-style: none;} .comp__article ul ul, .comp__article ul ol, .comp__article ol ul, .comp__article ol ol { margin-bottom: 0; } .comp__article ul li, .comp__article ol li { margin-top: .5em; padding-left: 1em; text-indent: -1em; } .comp__article ul li:before { margin-right: 12px; content: ''; width: 6px; height: 6px; border-radius: 100%; display: inline-block; vertical-align: middle; background: #666; } .comp__article ol li:before { margin-right: 8px; color: #666; counter-increment: li; content: counter(li) "."; } .comp__article table { border-top: 1px solid #666; border-right: 1px solid #666; } .comp__article th, .comp__article td { padding: .25em 1em; border-bottom: 1px solid #666; border-left: 1px solid #666; font-size: 100%; } .comp__article th { font-weight: 300; } .comp__article blockquote { padding: 0 70px; position: relative; font-style: italic; } .comp__article blockquote::before, .comp__article blockquote::after { content: '\f106'; position: absolute; top: 0; color: #c0c0c0; font: normal 46px Genericons; } .comp__article blockquote:before { left: 0; } .comp__article blockquote:after { right: 0; } .comp__article .caption { margin-bottom: 1.6em; padding: 0; max-width:100% !important; font-size: 78.5714%; } .comp__article .caption.aligncenter { margin-bottom: 2em; } .comp__article .caption img { display: block; margin: 0; } .comp__article p.wp-caption-text { margin: 0; padding: 10px; font-size:14px; background-color: #eee; width:100% !important; } .comp__article .alignleft { display: inline; float: left; margin-right: 20px; } .comp__article .alignright { display: inline; float: right; margin-left: 20px; } .comp__article .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .comp__article img.alignleft, .comp__article img.alignright, .comp__article img.aligncenter { margin-bottom: 1.6em; } .comp__article .wp-caption.alignnone { width:100% !important; } .comp__article iframe { max-width: 100%; } .comp__article img { max-width:100%; height:auto; } .comp__article img.alignleft { max-width:100%; height:auto; width:auto; } .comp__article img.alignright { max-width:100%; height:auto; width:auto; } @media screen and (max-width: 575px) { .comp__article .alignleft, .comp__article .alignright { max-width: 100% !important; display: block; float: none; margin: 0; } .comp__news_title h1 { font-size: 2.0rem !important; } .comp__news_title ul { font-size: 1.2rem; } } /* Share button */ .snsShareArea a { box-sizing: border-box; display: inline-block; width: auto; margin: 0 3px; padding: .4em .8em; border-radius: 1px; color: white !important; text-decoration: none; text-align: center; font-size: 1.4rem; font-family: 'IBM Plex Sans', sans-serif; } .snsShareArea a:hover { opacity: 0.8; text-decoration: none !important; } .snsShareArea a:last-child { margin: 0 0 0 3px; } .btn--twitter{ background: #6ac0e9; } .btn--facebook{ background: #617ab2; } .btn--google{ background: #e2695f; } .btn--line{ background: #33cf33; } .btn--hatena{ background: #33b6e5; } .btn--pocket{ background: #dc737b; } .btn--tumblr{ background: #36465d; } .btn--pinterest{ background: #c60120; } @media only screen and (max-width: 767px) { .snsShareArea { margin-bottom: 10px; width: 100%; } .snsShareArea a { margin: 3px 3px; } } @media only screen and (max-width: 640px) { .snsShareArea a { margin: 3px 0px; width: 32.6%; padding: .8em .8em; } .snsShareArea a:last-child { margin: 3px 0px; } } @media only screen and (max-width: 420px) { .snsShareArea a { width: 49%; } } /* =================================== */ /* /* utility CSS /* /* 1:Utility - .u-* /* /* /* =================================== */ /* font size ------------------------------------------ */ .u-tx10 { font-size: 10px !important; } /*renders 10px */ .u-tx11 { font-size: 11px !important; } /*renders 11px */ .u-tx12 { font-size: 12px !important; } /*renders 12px */ .u-tx13 { font-size: 13px !important; } /*renders 13px */ .u-tx14 { font-size: 14px !important; } /*renders 14px */ .u-tx15 { font-size: 15px !important; } /*renders 15px */ .u-tx16 { font-size: 16px !important; } /*renders 16px */ .u-tx17 { font-size: 17px !important; } /*renders 17px */ .u-tx18 { font-size: 18px !important; } /*renders 18px */ .u-tx19 { font-size: 19px !important; } /*renders 19px */ .u-tx20 { font-size: 20px !important; } /*renders 20px */ .u-tx21 { font-size: 21px !important; } /*renders 21px */ .u-tx22 { font-size: 22px !important; } /*renders 22px */ .u-tx23 { font-size: 23px !important; } /*renders 23px */ .u-tx24 { font-size: 24px !important; } /*renders 24px */ .u-tx25 { font-size: 25px !important; } /*renders 25px */ .u-tx36 { font-size: 36px !important; line-height: 1.2; } /*renders 25px */ /* Form ------------------------------------------ */ /* IME : For Windows IE */ .imeA { ime-mode: active; } .imeD { ime-mode: disabled; } .hidden { display: none !important; } /* = Selected Text ----------------------------------------------- */ ::-moz-selection { background: #1A2336; /* Safari */ color: #fff; } ::selection { background: #1A2336; /* Safari */ color: #fff; } ::-moz-selection { background: #1A2336; /* Firefox */ color: #fff; } /* = js ----------------------------------------------- */ .is-visible { display: block !important; } .is-hidden { display: none !important; } .is-fixed { height: 100%; overflow: hidden; } .is-lock { overflow: hidden; } /* = sp & pc ----------------------------------------------- */ .pc_none { display: none !important; } .sp_none { display: block !important; } .pc_br { display: inline-block !important; } .sp_br { display: none !important; } @media only screen and (max-width: 991px) { .pc_br { display: none !important; } .sp_br { display: inline-block !important; } } @media only screen and (max-width: 991px) { .pc_none { display: block !important; } .sp_none { display: none !important; } } /* page padding ------------------------------------------ */ .content--basic-padding { padding: 100px 0; } .content--3quarter-padding { padding: 70px 0; } .content--harf-padding { padding: 50px 0; } .content--30-padding { padding: 30px 0; } .content--quarter-padding { padding: 25px 0; } .content--top-padding { padding: 100px 0 0; } .content--top3quarter-padding { padding: 70px 0 0; } .content--bottom-padding { padding: 0 0 100px; } .content--bottomharf-padding { padding: 0 0 50px; } .content--article_border-padding { padding: 70px 0; border-top: 1px solid #ccc; } .content--1bk_border-padding { padding: 40px 30px; border: 1px solid #707070; } .page-title--article { padding: 30px 0 50px; } @media only screen and (max-width: 575px) { .content--basic-padding { padding: 50px 0; } .content--3quarter-padding { padding: 40px 0; } .content--harf-padding { padding: 20px 0; } .content--30-padding { padding: 20px 0; } .content--quarter-padding { padding: 10px 0; } .content--top-padding { padding: 50px 0 0; } .content--top3quarter-padding { padding: 30px 0 0; } .content--bottom-padding { padding: 0 0 40px; } .content--article_border-padding { padding: 50px 0; border-top: 1px solid #ccc; } .page-title--article { padding: 15px 0 25px; } } /* line-height ------------------------------------------ */ .lh0 { line-height: 0 !important; } .lh10 { line-height: 1.0 !important; } .lh11 { line-height: 1.1 !important; } .lh12 { line-height: 1.2 !important; } .lh13 { line-height: 1.3 !important; } .lh14 { line-height: 1.4 !important; } .lh15 { line-height: 1.5 !important; } .lh16 { line-height: 1.6 !important; } .lh17 { line-height: 1.7 !important; } .lh175 { line-height: 1.75 !important; } .lh18 { line-height: 1.8 !important; } .lh19 { line-height: 1.9 !important; } .lh20 { line-height: 2.0 !important; } /* font-weight ------------------------------------------ */ .fwB { font-weight: 600 !important; } .fwN { font-weight: 400 !important; } .fwTin { font-weight: 100 !important; } /* display ------------------------------------------ */ .dsB { display: block; } /* font color ------------------------------------------ */ .fcGray { color: #909090 !important; } .fcbk { color: #222 !important; } .fcHot { color: #D90101 !important; } .fcblue { color: #30508F !important; } /* BG color ------------------------------------------ */ .bg_wh { background-color: #fff !important; } .bg_gr { background-color: #EEF1F2 !important; } .bg_grl { background-color: #efefef !important; } .bg_bk { background-color: #1C1C1E !important; color: #fff; } .bg_theme-bk { background-color: #17A57E !important; color: #fff; } .bg_creamy { background-color: #fffef7 !important; } /* font decoration ------------------------------------------ */ .fdU { text-decoration: underline; } /* indent ------------------------------------------ */ .indent1 { padding-left: 1em; text-indent: -1em; } .indent2 { padding-left: 0.5em; text-indent: -0.5em; } .indent3 { padding-left: 3em; text-indent: -3em; } /* letter-spacing ------------------------------------------ */ .ls1 { letter-spacing: 1px; } /* lock ------------------------------------------ */ .lock { overflow: hidden; } /* modal-overlay ------------------------------------------ */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); z-index: 5200; } /* text-align ------------------------------------------ */ .taL { text-align: left !important; } .taC { text-align: center !important; } .taR { text-align: right !important; } /* vertical-align ------------------------------------------ */ .vaT { vertical-align: top !important; } .vaM { vertical-align: middle !important; } .vaB { vertical-align: bottom !important; } /* float ------------------------------------------ */ .flL { float: left; } .flR { float: right; } /* overflow ------------------------------------------ */ .ofH { overflow: hidden; } /* clear ------------------------------------------ */ .clear { line-height: 1; clear: both; } .clearboth { clear: both; } /* inline block ------------------------------------------ */ .iBlk { display: -moz-inline-box; display: inline-block; } /* nowrap ------------------------------------------ */ .nwrp { white-space: nowrap; } .wba { word-break: break-all; } .wsN { white-space: pre; } /* smt ------------------------------------------ */ .sp-on { /* スマートフォンのみ表示 */ display: none !important; } .responsive * { max-width: 100%; height: auto; } /* width ------------------------------------------ */ .w100p { width: 100% !important; } .w80 { width: 80px !important; } .w100 { width: 100px !important; } .w110 { width: 110px !important; } .w120 { width: 120px !important; } .w125 { width: 125px !important; } .w130 { width: 130px !important; } .w140 { width: 140px !important; } .w150 { width: 150px !important; } .w180 { width: 180px !important; } .w190 { width: 190px !important; } .w200 { width: 200px !important; } .w210 { width: 210px !important; } .w240 { width: 240px !important; } .w220 { width: 220px !important; } .w225 { width: 225px !important; } .w230 { width: 230px !important; } .w240 { width: 240px !important; } .w245 { width: 245px !important; } .w246 { width: 246px !important; } .w260 { width: 260px !important; } .w270 { width: 270px !important; } .w280 { width: 280px !important; } .w290 { width: 290px !important; } .w295 { width: 295px !important; } .w300 { width: 300px !important; } .w320 { width: 320px !important; } .w315 { width: 315px !important; } .w330 { width: 330px !important; } .w340 { width: 340px !important; } .w345 { width: 345px !important; } .w350 { width: 350px !important; } .w360 { width: 360px !important; } .w370 { width: 370px !important; } .w390 { width: 390px !important; } .w400 { width: 400px !important; } .w410 { width: 410px !important; } .w430 { width: 430px !important; } .w440 { width: 440px !important; } .w450 { width: 450px !important; } .w460 { width: 460px !important; } .w470 { width: 470px !important; } .w480 { width: 480px !important; } .w500 { width: 500px !important; } .w520 { width: 520px !important; } .w530 { width: 530px !important; } .w542 { width: 542px !important; } .w550 { width: 550px !important; } .w560 { width: 560px !important; } .w590 { width: 590px !important; } .w600 { width: 600px !important; } .w640 { width: 640px !important; } .w675 { width: 675px !important; } .w680 { width: 680px !important; } .w780 { width: 780px !important; } .w730 { width: 730px !important; } .w820 { width: 820px !important; } .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } .align-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .align-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .align-justify { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .align-spaced { -ms-flex-pack: distribute; justify-content: space-around; } .align-top { -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .align-self-top { -ms-flex-item-align: start; align-self: flex-start; } .align-bottom { -webkit-box-align: end; -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .align-self-bottom { -ms-flex-item-align: end; align-self: flex-end; } .align-middle { /* -webkit-box-align: center; */ -ms-flex-align: center; -ms-grid-row-align: center; -webkit-box-align: center; align-items: center; } .align-self-middle { -ms-flex-item-align: center; align-self: center; } .align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; } .align-self-stretch { -ms-flex-item-align: stretch; align-self: stretch; } .small-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .small-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .small-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .small-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .small-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .small-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } @media screen and (min-width: 576px) { .medium-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .medium-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .medium-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .medium-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .medium-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .medium-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } } @media screen and (min-width: 768px) { .mlarge-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .mlarge-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .mlarge-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .mlarge-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .mlarge-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .mlarge-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } } @media screen and (min-width: 992px) { .large-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .large-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .large-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .large-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .large-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .large-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } } @media screen and (min-width: 1200px) { .xlarge-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .xlarge-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .xlarge-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .xlarge-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .xlarge-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .xlarge-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } } @media only screen and (max-width: 575px) { .taL { text-align: left; } .taC { text-align: center; } .taR { text-align: right; display: block; margin-bottom: 10px; } .tr { text-align: right; } .wsN { white-space: normal; } .w180 { width: 100% !important; } /* Responsive images and other embedded objects */ #contents object, #contents embed, #contents video { width: auto; max-width: 100%; } /* Responsive images aspeсt ratio */ #contents video { height: auto; } /* font size ------------------------------------------ */ .u-tx10 { font-size: 1.0rem !important; } /*renders 10px */ .u-tx11 { font-size: 1.1rem !important; } /*renders 11px */ .u-tx12 { font-size: 1.2rem !important; } /*renders 12px */ .u-tx13 { font-size: 1.3rem !important; } /*renders 13px */ .u-tx14 { font-size: 1.4rem !important; } /*renders 14px */ .u-tx15 { font-size: 1.4rem !important; } /*renders 15px */ .u-tx16 { font-size: 1.6rem !important; } /*renders 16px */ .u-tx17 { font-size: 1.6rem !important; } /*renders 17px */ .u-tx18 { font-size: 1.6rem !important; } /*renders 18px */ .u-tx19 { font-size: 1.6rem !important; } /*renders 19px */ .u-tx20 { font-size: 1.8rem !important; } /*renders 20px */ .u-tx21 { font-size: 1.8rem !important; } /*renders 21px */ .u-tx22 { font-size: 1.6rem !important; } /*renders 22px */ .u-tx23 { font-size: 1.6rem !important; } /*renders 23px */ .u-tx24 { font-size: 1.8rem !important; } /*renders 24px */ .u-tx25 { font-size: 1.6rem !important; } /*renders 25px */ .u-tx36 { font-size: 2.4rem !important; line-height: 1.2; } /*renders 25px */ .sp-taL br { display: none; } .sp-taL { text-align: left !important; } /* width ============================== */ .w270 { width: 100% !important; } .w280 { width: 100% !important; } .w290 { width: 100% !important; } .w295 { width: 100% !important; } .w300 { width: 100% !important; } .w320 { width: 100% !important; } .w315 { width: 100% !important; } .w330 { width: 100% !important; } .w340 { width: 100% !important; } .w345 { width: 100% !important; } .w350 { width: 100% !important; } .w360 { width: 100% !important; } .w370 { width: 100% !important; } .w390 { width: 100% !important; } .w400 { width: 100% !important; } .w410 { width: 100% !important; } .w430 { width: 100% !important; } .w440 { width: 100% !important; } .w450 { width: 100% !important; } .w460 { width: 100% !important; } .w470 { width: 100% !important; } .w480 { width: 100% !important; } .w500 { width: 100% !important; } .w520 { width: 100% !important; } .w530 { width: 100% !important; } .w542 { width: 100% !important; } .w550 { width: 100% !important; } .w560 { width: 100% !important; } .w590 { width: 100% !important; } .w600 { width: 100% !important; } .w640 { width: 100% !important; } .w675 { width: 100% !important; } .w680 { width: 100% !important; } .w780 { width: 100% !important; } .w730 { width: 100% !important; } .w740 { width: 100% !important; } .w820 { width: 100% !important; } } /* Margin ------------------------------------------ */ /* ------ margin-top ------ */ .mt0 { margin-top: 0 !important; } .mt1 { margin-top: 1px !important; } .mt3 { margin-top: 3px !important; } .mt5 { margin-top: 5px !important; } .mt7 { margin-top: 7px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt45 { margin-top: 45px !important; } .mt50 { margin-top: 50px !important; } .mt55 { margin-top: 55px !important; } .mt60 { margin-top: 60px !important; } .mt65 { margin-top: 65px !important; } .mt70 { margin-top: 70px !important; } .mt75 { margin-top: 75px !important; } .mt80 { margin-top: 80px !important; } .mt85 { margin-top: 85px !important; } .mt90 { margin-top: 90px !important; } .mt95 { margin-top: 95px !important; } .mt100 { margin-top: 100px !important; } /* ------ margin-right ------ */ .mrA { margin-right: auto !important; } .mr0 { margin-right: 0 !important; } .mr1 { margin-right: 1px !important; } .mr3 { margin-right: 3px !important; } .mr5 { margin-right: 5px !important; } .mr7 { margin-right: 7px !important; } .mr8 { margin-right: 8px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } .mr40 { margin-right: 40px !important; } .mr45 { margin-right: 45px !important; } .mr50 { margin-right: 50px !important; } .mr55 { margin-right: 55px !important; } .mr60 { margin-right: 60px !important; } .mr65 { margin-right: 65px !important; } .mr70 { margin-right: 70px !important; } .mr75 { margin-right: 75px !important; } .mr80 { margin-right: 80px !important; } .mr85 { margin-right: 85px !important; } .mr90 { margin-right: 90px !important; } .mr95 { margin-right: 95px !important; } .mr100 { margin-right: 100px !important; } /* ------ margin-bottom ------ */ .mb0 { margin-bottom: 0 !important; } .mb1 { margin-bottom: 1px !important; } .mb3 { margin-bottom: 3px !important; } .mb5 { margin-bottom: 5px !important; } .mb7 { margin-bottom: 7px !important; } .mb8 { margin-bottom: 8px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb40 { margin-bottom: 40px !important; } .mb45 { margin-bottom: 45px !important; } .mb50 { margin-bottom: 50px !important; } .mb55 { margin-bottom: 55px !important; } .mb60 { margin-bottom: 60px !important; } .mb65 { margin-bottom: 65px !important; } .mb70 { margin-bottom: 70px !important; } .mb75 { margin-bottom: 75px !important; } .mb80 { margin-bottom: 80px !important; } .mb85 { margin-bottom: 85px !important; } .mb90 { margin-bottom: 90px !important; } .mb95 { margin-bottom: 95px !important; } .mb100 { margin-bottom: 100px !important; } .mb170 { margin-bottom: 170px !important; } /* ------ margin-left ------ */ .mlA { margin-left: auto !important; } .ml0 { margin-left: 0 !important; } .ml1 { margin-left: 1px !important; } .ml3 { margin-left: 3px !important; } .ml5 { margin-left: 5px !important; } .ml7 { margin-left: 7px !important; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml45 { margin-left: 45px !important; } .ml50 { margin-left: 50px !important; } .ml55 { margin-left: 55px !important; } .ml60 { margin-left: 60px !important; } .ml65 { margin-left: 65px !important; } .ml70 { margin-left: 70px !important; } .ml75 { margin-left: 75px !important; } .ml80 { margin-left: 80px !important; } .ml85 { margin-left: 85px !important; } .ml90 { margin-left: 90px !important; } .ml95 { margin-left: 95px !important; } .ml100 { margin-left: 100px !important; } /* padding ------------------------------------------ */ .pa10 { padding: 10px !important; } .pa20 { padding: 20px !important; } .pa30 { padding: 30px !important; } .pa40 { padding: 40px !important; } .pa50 { padding: 50px !important; } @media only screen and (max-width: 575px) { .pa50 { padding: 30px !important; } } /* ------ padding-top ------ */ .p0 { padding: 0 !important; } .pt0 { padding-top: 0 !important; } .pt1 { padding-top: 1px !important; } .pt4 { padding-top: 4px !important; } .pt3 { padding-top: 3px !important; } .pt5 { padding-top: 5px !important; } .pt7 { padding-top: 7px !important; } .pt10 { padding-top: 10px !important; } .pt15 { padding-top: 15px !important; } .pt20 { padding-top: 20px !important; } .pt25 { padding-top: 25px !important; } .pt30 { padding-top: 30px !important; } .pt35 { padding-top: 35px !important; } .pt40 { padding-top: 40px !important; } .pt45 { padding-top: 45px !important; } .pt50 { padding-top: 50px !important; } .pt55 { padding-top: 55px !important; } .pt60 { padding-top: 60px !important; } .pt65 { padding-top: 65px !important; } .pt70 { padding-top: 70px !important; } .pt75 { padding-top: 75px !important; } .pt80 { padding-top: 80px !important; } .pt85 { padding-top: 85px !important; } .pt90 { padding-top: 90px !important; } .pt95 { padding-top: 95px !important; } .pt100 { padding-top: 100px !important; } /* ------ padding-right ------ */ .pr0 { padding-right: 0 !important; } .pr1 { padding-right: 1px !important; } .pr3 { padding-right: 3px !important; } .pr5 { padding-right: 5px !important; } .pr7 { padding-right: 7px !important; } .pr10 { padding-right: 10px !important; } .pr15 { padding-right: 15px !important; } .pr20 { padding-right: 20px !important; } .pr25 { padding-right: 25px !important; } .pr30 { padding-right: 30px !important; } .pr35 { padding-right: 35px !important; } .pr40 { padding-right: 40px !important; } .pr45 { padding-right: 45px !important; } .pr50 { padding-right: 50px !important; } .pr55 { padding-right: 55px !important; } .pr60 { padding-right: 60px !important; } .pr65 { padding-right: 65px !important; } .pr70 { padding-right: 70px !important; } .pr75 { padding-right: 75px !important; } .pr80 { padding-right: 80px !important; } .pr85 { padding-right: 85px !important; } .pr90 { padding-right: 90px !important; } .pr95 { padding-right: 95px !important; } .pr100 { padding-right: 100px !important; } /* ------ padding-bottom ------ */ .pb0 { padding-bottom: 0 !important; } .pb1 { padding-bottom: 1px !important; } .pb3 { padding-bottom: 3px !important; } .pb5 { padding-bottom: 5px !important; } .pb7 { padding-bottom: 7px !important; } .pb10 { padding-bottom: 10px !important; } .pb15 { padding-bottom: 15px !important; } .pb20 { padding-bottom: 20px !important; } .pb25 { padding-bottom: 25px !important; } .pb30 { padding-bottom: 30px !important; } .pb35 { padding-bottom: 35px !important; } .pb40 { padding-bottom: 40px !important; } .pb45 { padding-bottom: 45px !important; } .pb50 { padding-bottom: 50px !important; } .pb55 { padding-bottom: 55px !important; } .pb60 { padding-bottom: 60px !important; } .pb65 { padding-bottom: 65px !important; } .pb70 { padding-bottom: 70px !important; } .pb75 { padding-bottom: 75px !important; } .pb80 { padding-bottom: 80px !important; } .pb85 { padding-bottom: 85px !important; } .pb90 { padding-bottom: 90px !important; } .pb95 { padding-bottom: 95px !important; } .pb100 { padding-bottom: 100px !important; } /* ------ padding-left ------ */ .pl0 { padding-left: 0 !important; } .pl1 { padding-left: 1px !important; } .pl3 { padding-left: 3px !important; } .pl5 { padding-left: 5px !important; } .pl7 { padding-left: 7px !important; } .pl8 { padding-left: 8px !important; } .pl10 { padding-left: 10px !important; } .pl15 { padding-left: 15px !important; } .pl20 { padding-left: 20px !important; } .pl25 { padding-left: 25px !important; } .pl30 { padding-left: 30px !important; } .pl35 { padding-left: 35px !important; } .pl40 { padding-left: 40px !important; } .pl45 { padding-left: 45px !important; } .pl50 { padding-left: 50px !important; } .pl55 { padding-left: 55px !important; } .pl60 { padding-left: 60px !important; } .pl65 { padding-left: 65px !important; } .pl70 { padding-left: 70px !important; } .pl75 { padding-left: 75px !important; } .pl80 { padding-left: 80px !important; } .pl85 { padding-left: 85px !important; } .pl90 { padding-left: 90px !important; } .pl95 { padding-left: 95px !important; } .pl100 { padding-left: 100px !important; } .m-0 { margin: 0 0 !important; } .mt-0 { margin-top: 0 !important; } .mr-0 { margin-right: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .mx-0 { margin-right: 0 !important; margin-left: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-1 { margin: 1rem 1rem !important; } .mt-1 { margin-top: 1rem !important; } .mr-1 { margin-right: 1rem !important; } .mb-1 { margin-bottom: 1rem !important; } .ml-1 { margin-left: 1rem !important; } .mx-1 { margin-right: 1rem !important; margin-left: 1rem !important; } .my-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .m-2 { margin: 2rem 2rem !important; } .mt-2 { margin-top: 2rem !important; } .mr-2 { margin-right: 2rem !important; } .mb-2 { margin-bottom: 2rem !important; } .ml-2 { margin-left: 2rem !important; } .mx-2 { margin-right: 2rem !important; margin-left: 2rem !important; } .my-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .m-3 { margin: 3rem 3rem !important; } .mt-3 { margin-top: 3rem !important; } .mr-3 { margin-right: 3rem !important; } .mb-3 { margin-bottom: 3rem !important; } .ml-3 { margin-left: 3rem !important; } .mx-3 { margin-right: 3rem !important; margin-left: 3rem !important; } .my-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .m-4 { margin: 4rem 4rem !important; } .mt-4 { margin-top: 4rem !important; } .mr-4 { margin-right: 4rem !important; } .mb-4 { margin-bottom: 4rem !important; } .ml-4 { margin-left: 4rem !important; } .mx-4 { margin-right: 4rem !important; margin-left: 4rem !important; } .my-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .m-5 { margin: 5rem 5rem !important; } .mt-5 { margin-top: 5rem !important; } .mr-5 { margin-right: 5rem !important; } .mb-5 { margin-bottom: 5rem !important; } .ml-5 { margin-left: 5rem !important; } .mx-5 { margin-right: 5rem !important; margin-left: 5rem !important; } .my-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .p-0 { padding: 0 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-1 { padding: 1rem 1rem !important; } .pt-1 { padding-top: 1rem !important; } .pr-1 { padding-right: 1rem !important; } .pb-1 { padding-bottom: 1rem !important; } .pl-1 { padding-left: 1rem !important; } .px-1 { padding-right: 1rem !important; padding-left: 1rem !important; } .py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-2 { padding: 2rem 2rem !important; } .pt-2 { padding-top: 2rem !important; } .pr-2 { padding-right: 2rem !important; } .pb-2 { padding-bottom: 2rem !important; } .pl-2 { padding-left: 2rem !important; } .px-2 { padding-right: 2rem !important; padding-left: 2rem !important; } .py-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .p-3 { padding: 3rem 3rem !important; } .pt-3 { padding-top: 3rem !important; } .pr-3 { padding-right: 3rem !important; } .pb-3 { padding-bottom: 3rem !important; } .pl-3 { padding-left: 3rem !important; } .px-3 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .p-4 { padding: 4rem 4rem !important; } .pt-4 { padding-top: 4rem !important; } .pr-4 { padding-right: 4rem !important; } .pb-4 { padding-bottom: 4rem !important; } .pl-4 { padding-left: 4rem !important; } .px-4 { padding-right: 4rem !important; padding-left: 4rem !important; } .py-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .p-5 { padding: 5rem 5rem !important; } .pt-5 { padding-top: 5rem !important; } .pr-5 { padding-right: 5rem !important; } .pb-5 { padding-bottom: 5rem !important; } .pl-5 { padding-left: 5rem !important; } .px-5 { padding-right: 5rem !important; padding-left: 5rem !important; } .py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .m-auto { margin: auto !important; } .mt-auto { margin-top: auto !important; } .mr-auto { margin-right: auto !important; } .mb-auto { margin-bottom: auto !important; } .ml-auto { margin-left: auto !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } @media (min-width: 576px) { .m-sm-0 { margin: 0 0 !important; } .mt-sm-0 { margin-top: 0 !important; } .mr-sm-0 { margin-right: 0 !important; } .mb-sm-0 { margin-bottom: 0 !important; } .ml-sm-0 { margin-left: 0 !important; } .mx-sm-0 { margin-right: 0 !important; margin-left: 0 !important; } .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-sm-1 { margin: 1rem 1rem !important; } .mt-sm-1 { margin-top: 1rem !important; } .mr-sm-1 { margin-right: 1rem !important; } .mb-sm-1 { margin-bottom: 1rem !important; } .ml-sm-1 { margin-left: 1rem !important; } .mx-sm-1 { margin-right: 1rem !important; margin-left: 1rem !important; } .my-sm-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .m-sm-2 { margin: 2rem 2rem !important; } .mt-sm-2 { margin-top: 2rem !important; } .mr-sm-2 { margin-right: 2rem !important; } .mb-sm-2 { margin-bottom: 2rem !important; } .ml-sm-2 { margin-left: 2rem !important; } .mx-sm-2 { margin-right: 2rem !important; margin-left: 2rem !important; } .my-sm-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .m-sm-3 { margin: 3rem 3rem !important; } .mt-sm-3 { margin-top: 3rem !important; } .mr-sm-3 { margin-right: 3rem !important; } .mb-sm-3 { margin-bottom: 3rem !important; } .ml-sm-3 { margin-left: 3rem !important; } .mx-sm-3 { margin-right: 3rem !important; margin-left: 3rem !important; } .my-sm-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .m-sm-4 { margin: 4rem 4rem !important; } .mt-sm-4 { margin-top: 4rem !important; } .mr-sm-4 { margin-right: 4rem !important; } .mb-sm-4 { margin-bottom: 4rem !important; } .ml-sm-4 { margin-left: 4rem !important; } .mx-sm-4 { margin-right: 4rem !important; margin-left: 4rem !important; } .my-sm-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .m-sm-5 { margin: 5rem 5rem !important; } .mt-sm-5 { margin-top: 5rem !important; } .mr-sm-5 { margin-right: 5rem !important; } .mb-sm-5 { margin-bottom: 5rem !important; } .ml-sm-5 { margin-left: 5rem !important; } .mx-sm-5 { margin-right: 5rem !important; margin-left: 5rem !important; } .my-sm-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .p-sm-0 { padding: 0 0 !important; } .pt-sm-0 { padding-top: 0 !important; } .pr-sm-0 { padding-right: 0 !important; } .pb-sm-0 { padding-bottom: 0 !important; } .pl-sm-0 { padding-left: 0 !important; } .px-sm-0 { padding-right: 0 !important; padding-left: 0 !important; } .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-sm-1 { padding: 1rem 1rem !important; } .pt-sm-1 { padding-top: 1rem !important; } .pr-sm-1 { padding-right: 1rem!important; } .pb-sm-1 { padding-bottom: 1rem !important; } .pl-sm-1 { padding-left: 1rem !important; } .px-sm-1 { padding-right: 1rem !important; padding-left: 1rem !important; } .py-sm-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-sm-2 { padding: 2rem 2rem !important; } .pt-sm-2 { padding-top: 2rem !important; } .pr-sm-2 { padding-right: 2rem !important; } .pb-sm-2 { padding-bottom: 2rem !important; } .pl-sm-2 { padding-left: 2rem !important; } .px-sm-2 { padding-right: 2rem !important; padding-left: 2rem !important; } .py-sm-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .p-sm-3 { padding: 3rem 3rem !important; } .pt-sm-3 { padding-top: 3rem !important; } .pr-sm-3 { padding-right: 3rem !important; } .pb-sm-3 { padding-bottom: 3rem !important; } .pl-sm-3 { padding-left: 3rem !important; } .px-sm-3 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-sm-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .p-sm-4 { padding: 4rem 4rem !important; } .pt-sm-4 { padding-top: 4rem !important; } .pr-sm-4 { padding-right: 4rem !important; } .pb-sm-4 { padding-bottom: 4rem !important; } .pl-sm-4 { padding-left: 4rem !important; } .px-sm-4 { padding-right: 4rem !important; padding-left: 4rem !important; } .py-sm-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .p-sm-5 { padding: 5rem 5rem !important; } .pt-sm-5 { padding-top: 5rem !important; } .pr-sm-5 { padding-right: 5rem !important; } .pb-sm-5 { padding-bottom: 5rem !important; } .pl-sm-5 { padding-left: 5rem !important; } .px-sm-5 { padding-right: 5rem !important; padding-left: 5rem !important; } .py-sm-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .m-sm-auto { margin: auto !important; } .mt-sm-auto { margin-top: auto !important; } .mr-sm-auto { margin-right: auto !important; } .mb-sm-auto { margin-bottom: auto !important; } .ml-sm-auto { margin-left: auto !important; } .mx-sm-auto { margin-right: auto !important; margin-left: auto !important; } .my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 768px) { .m-md-0 { margin: 0 0 !important; } .mt-md-0 { margin-top: 0 !important; } .mr-md-0 { margin-right: 0 !important; } .mb-md-0 { margin-bottom: 0 !important; } .ml-md-0 { margin-left: 0 !important; } .mx-md-0 { margin-right: 0 !important; margin-left: 0 !important; } .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-md-1 { margin: 1rem 1rem !important; } .mt-md-1 { margin-top: 1rem !important; } .mr-md-1 { margin-right: 1rem !important; } .mb-md-1 { margin-bottom: 1rem !important; } .ml-md-1 { margin-left: 1rem !important; } .mx-md-1 { margin-right: 1rem !important; margin-left: 1rem !important; } .my-md-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .m-md-2 { margin: 2rem 2rem !important; } .mt-md-2 { margin-top: 2rem !important; } .mr-md-2 { margin-right: 2rem !important; } .mb-md-2 { margin-bottom: 2rem !important; } .ml-md-2 { margin-left: 2rem !important; } .mx-md-2 { margin-right: 2rem !important; margin-left: 2rem !important; } .my-md-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .m-md-3 { margin: 3rem 3rem !important; } .mt-md-3 { margin-top: 3rem !important; } .mr-md-3 { margin-right: 3rem !important; } .mb-md-3 { margin-bottom: 3rem !important; } .ml-md-3 { margin-left: 3rem !important; } .mx-md-3 { margin-right: 3rem !important; margin-left: 3rem !important; } .my-md-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .m-md-4 { margin: 4rem 4rem !important; } .mt-md-4 { margin-top: 4rem !important; } .mr-md-4 { margin-right: 4rem !important; } .mb-md-4 { margin-bottom: 4rem !important; } .ml-md-4 { margin-left: 4rem !important; } .mx-md-4 { margin-right: 4rem !important; margin-left: 4rem !important; } .my-md-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .m-md-5 { margin: 5rem 5rem !important; } .mt-md-5 { margin-top: 5rem !important; } .mr-md-5 { margin-right: 5rem !important; } .mb-md-5 { margin-bottom: 5rem !important; } .ml-md-5 { margin-left: 5rem !important; } .mx-md-5 { margin-right: 5rem !important; margin-left: 5rem !important; } .my-md-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .p-md-0 { padding: 0 0 !important; } .pt-md-0 { padding-top: 0 !important; } .pr-md-0 { padding-right: 0 !important; } .pb-md-0 { padding-bottom: 0 !important; } .pl-md-0 { padding-left: 0 !important; } .px-md-0 { padding-right: 0 !important; padding-left: 0 !important; } .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-md-1 { padding: 1rem 1rem !important; } .pt-md-1 { padding-top: 1rem !important; } .pr-md-1 { padding-right: 1rem !important; } .pb-md-1 { padding-bottom: 1rem !important; } .pl-md-1 { padding-left: 1rem !important; } .px-md-1 { padding-right: 1rem !important; padding-left: 1rem !important; } .py-md-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-md-2 { padding: 2rem 2rem !important; } .pt-md-2 { padding-top: 2rem !important; } .pr-md-2 { padding-right: 2rem !important; } .pb-md-2 { padding-bottom: 2rem !important; } .pl-md-2 { padding-left: 2rem !important; } .px-md-2 { padding-right: 2rem !important; padding-left: 2rem !important; } .py-md-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .p-md-3 { padding: 3rem 3rem !important; } .pt-md-3 { padding-top: 3rem !important; } .pr-md-3 { padding-right: 3rem !important; } .pb-md-3 { padding-bottom: 3rem !important; } .pl-md-3 { padding-left: 3rem !important; } .px-md-3 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-md-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .p-md-4 { padding: 4rem 4rem !important; } .pt-md-4 { padding-top: 4rem !important; } .pr-md-4 { padding-right: 4rem !important; } .pb-md-4 { padding-bottom: 4rem !important; } .pl-md-4 { padding-left: 4rem !important; } .px-md-4 { padding-right: 4rem !important; padding-left: 4rem !important; } .py-md-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .p-md-5 { padding: 5rem 5rem !important; } .pt-md-5 { padding-top: 5rem !important; } .pr-md-5 { padding-right: 5rem !important; } .pb-md-5 { padding-bottom: 5rem !important; } .pl-md-5 { padding-left: 5rem !important; } .px-md-5 { padding-right: 5rem !important; padding-left: 5rem !important; } .py-md-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .m-md-auto { margin: auto !important; } .mt-md-auto { margin-top: auto !important; } .mr-md-auto { margin-right: auto !important; } .mb-md-auto { margin-bottom: auto !important; } .ml-md-auto { margin-left: auto !important; } .mx-md-auto { margin-right: auto !important; margin-left: auto !important; } .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 992px) { .m-lg-0 { margin: 0 0 !important; } .mt-lg-0 { margin-top: 0 !important; } .mr-lg-0 { margin-right: 0 !important; } .mb-lg-0 { margin-bottom: 0 !important; } .ml-lg-0 { margin-left: 0 !important; } .mx-lg-0 { margin-right: 0 !important; margin-left: 0 !important; } .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-lg-1 { margin: 1rem 1rem !important; } .mt-lg-1 { margin-top: 1rem !important; } .mr-lg-1 { margin-right: 1rem !important; } .mb-lg-1 { margin-bottom: 1rem !important; } .ml-lg-1 { margin-left: 1rem !important; } .mx-lg-1 { margin-right: 1rem !important; margin-left: 1rem !important; } .my-lg-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .m-lg-2 { margin: 2rem 2rem !important; } .mt-lg-2 { margin-top: 2rem !important; } .mr-lg-2 { margin-right: 2rem !important; } .mb-lg-2 { margin-bottom: 2rem !important; } .ml-lg-2 { margin-left: 2rem !important; } .mx-lg-2 { margin-right: 2rem !important; margin-left: 2rem !important; } .my-lg-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .m-lg-3 { margin: 3rem 3rem !important; } .mt-lg-3 { margin-top: 3rem !important; } .mr-lg-3 { margin-right: 3rem !important; } .mb-lg-3 { margin-bottom: 3rem !important; } .ml-lg-3 { margin-left: 3rem !important; } .mx-lg-3 { margin-right: 3rem !important; margin-left: 3rem !important; } .my-lg-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .m-lg-4 { margin: 4rem 4rem !important; } .mt-lg-4 { margin-top: 4rem !important; } .mr-lg-4 { margin-right: 4rem !important; } .mb-lg-4 { margin-bottom: 4rem !important; } .ml-lg-4 { margin-left: 4rem !important; } .mx-lg-4 { margin-right: 4rem !important; margin-left: 4rem !important; } .my-lg-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .m-lg-5 { margin: 5rem 5rem !important; } .mt-lg-5 { margin-top: 5rem !important; } .mr-lg-5 { margin-right: 5rem !important; } .mb-lg-5 { margin-bottom: 5rem !important; } .ml-lg-5 { margin-left: 5rem !important; } .mx-lg-5 { margin-right: 5rem !important; margin-left: 5rem !important; } .my-lg-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .p-lg-0 { padding: 0 0 !important; } .pt-lg-0 { padding-top: 0 !important; } .pr-lg-0 { padding-right: 0 !important; } .pb-lg-0 { padding-bottom: 0 !important; } .pl-lg-0 { padding-left: 0 !important; } .px-lg-0 { padding-right: 0 !important; padding-left: 0 !important; } .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-lg-1 { padding: 1rem 1rem !important; } .pt-lg-1 { padding-top: 1rem !important; } .pr-lg-1 { padding-right: 1rem !important; } .pb-lg-1 { padding-bottom: 1rem !important; } .pl-lg-1 { padding-left: 1rem !important; } .px-lg-1 { padding-right: 1rem !important; padding-left: 1rem !important; } .py-lg-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-lg-2 { padding: 2rem 2rem !important; } .pt-lg-2 { padding-top: 2rem !important; } .pr-lg-2 { padding-right: 2rem !important; } .pb-lg-2 { padding-bottom: 2rem !important; } .pl-lg-2 { padding-left: 2rem !important; } .px-lg-2 { padding-right: 2rem !important; padding-left: 0.5rem !important; } .py-lg-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .p-lg-3 { padding: 3rem 3rem !important; } .pt-lg-3 { padding-top: 3rem !important; } .pr-lg-3 { padding-right: 3rem !important; } .pb-lg-3 { padding-bottom: 3rem !important; } .pl-lg-3 { padding-left: 3rem !important; } .px-lg-3 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-lg-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .p-lg-4 { padding: 4rem 4rem !important; } .pt-lg-4 { padding-top: 4rem !important; } .pr-lg-4 { padding-right: 4rem !important; } .pb-lg-4 { padding-bottom: 4rem !important; } .pl-lg-4 { padding-left: 4rem !important; } .px-lg-4 { padding-right: 4rem !important; padding-left: 4rem !important; } .py-lg-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .p-lg-5 { padding: 5rem 5rem !important; } .pt-lg-5 { padding-top: 5rem !important; } .pr-lg-5 { padding-right: 5rem !important; } .pb-lg-5 { padding-bottom: 5rem !important; } .pl-lg-5 { padding-left: 5rem !important; } .px-lg-5 { padding-right: 5rem !important; padding-left: 5rem !important; } .py-lg-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .m-lg-auto { margin: auto !important; } .mt-lg-auto { margin-top: auto !important; } .mr-lg-auto { margin-right: auto !important; } .mb-lg-auto { margin-bottom: auto !important; } .ml-lg-auto { margin-left: auto !important; } .mx-lg-auto { margin-right: auto !important; margin-left: auto !important; } .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; } } @media (min-width: 1200px) { .m-xl-0 { margin: 0 0 !important; } .mt-xl-0 { margin-top: 0 !important; } .mr-xl-0 { margin-right: 0 !important; } .mb-xl-0 { margin-bottom: 0 !important; } .ml-xl-0 { margin-left: 0 !important; } .mx-xl-0 { margin-right: 0 !important; margin-left: 0 !important; } .my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .m-xl-1 { margin: 1rem 1rem !important; } .mt-xl-1 { margin-top: 1rem !important; } .mr-xl-1 { margin-right: 1rem !important; } .mb-xl-1 { margin-bottom: 1rem !important; } .ml-xl-1 { margin-left: 1rem !important; } .mx-xl-1 { margin-right: 1rem !important; margin-left: 1rem !important; } .my-xl-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .m-xl-2 { margin: 2rem 2rem !important; } .mt-xl-2 { margin-top: 2rem !important; } .mr-xl-2 { margin-right: 2rem !important; } .mb-xl-2 { margin-bottom: 2rem !important; } .ml-xl-2 { margin-left: 2rem !important; } .mx-xl-2 { margin-right: 2rem !important; margin-left: 2rem !important; } .my-xl-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .m-xl-3 { margin: 3rem 3rem !important; } .mt-xl-3 { margin-top: 3rem !important; } .mr-xl-3 { margin-right: 3rem !important; } .mb-xl-3 { margin-bottom: 3rem !important; } .ml-xl-3 { margin-left: 3rem !important; } .mx-xl-3 { margin-right: 3rem !important; margin-left: 3rem !important; } .my-xl-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .m-xl-4 { margin: 4rem 4rem !important; } .mt-xl-4 { margin-top: 4rem !important; } .mr-xl-4 { margin-right: 4rem !important; } .mb-xl-4 { margin-bottom: 4rem !important; } .ml-xl-4 { margin-left: 4rem !important; } .mx-xl-4 { margin-right: 4rem !important; margin-left: 4rem !important; } .my-xl-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .m-xl-5 { margin: 5rem 5rem !important; } .mt-xl-5 { margin-top: 5rem !important; } .mr-xl-5 { margin-right: 5rem !important; } .mb-xl-5 { margin-bottom: 5rem !important; } .ml-xl-5 { margin-left: 5rem !important; } .mx-xl-5 { margin-right: 5rem !important; margin-left: 5rem !important; } .my-xl-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .p-xl-0 { padding: 0 0 !important; } .pt-xl-0 { padding-top: 0 !important; } .pr-xl-0 { padding-right: 0 !important; } .pb-xl-0 { padding-bottom: 0 !important; } .pl-xl-0 { padding-left: 0 !important; } .px-xl-0 { padding-right: 0 !important; padding-left: 0 !important; } .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-xl-1 { padding: 1rem 1rem !important; } .pt-xl-1 { padding-top: 1rem !important; } .pr-xl-1 { padding-right: 1rem !important; } .pb-xl-1 { padding-bottom: 1rem !important; } .pl-xl-1 { padding-left: 1rem !important; } .px-xl-1 { padding-right: 1rem !important; padding-left: 1rem !important; } .py-xl-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .p-xl-2 { padding: 2rem 2rem !important; } .pt-xl-2 { padding-top: 2rem !important; } .pr-xl-2 { padding-right: 2rem !important; } .pb-xl-2 { padding-bottom: 2rem !important; } .pl-xl-2 { padding-left: 2rem !important; } .px-xl-2 { padding-right: 2rem !important; padding-left: 2rem !important; } .py-xl-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .p-xl-3 { padding: 3rem 3rem !important; } .pt-xl-3 { padding-top: 3rem !important; } .pr-xl-3 { padding-right: 3rem !important; } .pb-xl-3 { padding-bottom: 3rem !important; } .pl-xl-3 { padding-left: 3rem !important; } .px-xl-3 { padding-right: 3rem !important; padding-left: 3rem !important; } .py-xl-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .p-xl-4 { padding: 4rem 4rem !important; } .pt-xl-4 { padding-top: 4rem !important; } .pr-xl-4 { padding-right: 4rem !important; } .pb-xl-4 { padding-bottom: 4rem !important; } .pl-xl-4 { padding-left: 4rem !important; } .px-xl-4 { padding-right: 4rem !important; padding-left: 4rem !important; } .py-xl-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .p-xl-5 { padding: 5rem 5rem !important; } .pt-xl-5 { padding-top: 5rem !important; } .pr-xl-5 { padding-right: 5rem !important; } .pb-xl-5 { padding-bottom: 5rem !important; } .pl-xl-5 { padding-left: 5rem !important; } .px-xl-5 { padding-right: 5rem !important; padding-left: 5rem !important; } .py-xl-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .m-xl-auto { margin: auto !important; } .mt-xl-auto { margin-top: auto !important; } .mr-xl-auto { margin-right: auto !important; } .mb-xl-auto { margin-bottom: auto !important; } .ml-xl-auto { margin-left: auto !important; } .mx-xl-auto { margin-right: auto !important; margin-left: auto !important; } .my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; } } /* clearfix [ ----------------------------------------------------------- */ /* For modern browsers */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } /* ************************************************** /* /* Name: icon font.css /* ***************************************************** */ @font-face { font-family: 'icomoon'; src: url('//files.secure-link.jp/chukoh/fonts/icomoon.eot?zcoeeh'); src: url('//files.secure-link.jp/chukoh/fonts/icomoon.eot?zcoeeh#iefix') format('embedded-opentype'), url('//files.secure-link.jp/chukoh/fonts/icomoon.ttf?zcoeeh') format('truetype'), url('//files.secure-link.jp/chukoh/fonts/icomoon.woff?zcoeeh') format('woff'), url('//files.secure-link.jp/chukoh/fonts/icomoon.svg?zcoeeh#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-pocket:before { content: "\e900"; } .icon-hatena:before { content: "\e901"; } .icon-line:before { content: "\e902"; } .icon-wechat:before { content: "\e903"; } .icon-share:before { content: "\ea82"; } .icon-facebook:before { content: "\ea90"; } .icon-instagram:before { content: "\ea92"; } .icon-twitter:before { content: "\ea96"; } .icon-sina-weibo:before { content: "\ea9a"; } .icon-youtube:before { content: "\ea9d"; } .icon-linkedin:before { content: "\eaca"; } .icon-pinterest:before { content: "\ead1"; } .snsShareArea i { margin-right: 5px; } /* ************************************************** /* /* Name: state.css /* /* Description: javascript Settings /* /* ***************************************************** */ /* =================================== 1: swiper ====================================== */ .swiper-container{margin:0 auto;position:relative;overflow:hidden;z-index:1} .swiper-container-no-flexbox .swiper-slide{float:left} .swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination{bottom:15px;left:0;width:100%}.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet{margin:0 5px}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;width:100%;height:100%;z-index:1}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}} /*#slider { margin-bottom:30px; }*/ /* swiper-container ------------------------------------------ */ .swiper-container { max-width: 1160px; margin: 0px auto; overflow: hidden; width: 100%; } .cover_wrap .swiper-container { max-width: inherit; height: 100%; } .swiper-container.comp__design {border-top: 1px solid #ccc;} .cover_wrap .swiper-slide { height: calc(100vh); min-height: 600px; max-height: 1000px; background-size: cover; background-position: bottom center; } .swiper-slide { background-size: cover; background-position: bottom center; } .swiper-container .slide-inner { margin: 0; } .swiper-container.comp__design .slide-inner figcaption { padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; color: #7E7E7E; } .swiper-container.comp__design .slide-inner img { border-bottom: 1px solid #ccc; } .swiper-slide-next,.swiper-slide-prev {opacity: 0.5;} .swiper-slide a:hover, .swiper-pagination-bullet:hover { opacity: 0.7; } .slide-control { position: absolute; top: -27px; margin: 0 auto 10px; display: block; width: auto; text-align: left; padding: 0; z-index: 50; } .swiper-button-prev { position: relative; width: 40px !important; height: 40px !important; background-size: 8px; background-repeat: no-repeat; left: inherit; z-index: 5550; background-color: #fff; right: inherit; display: inline-block; top: inherit; margin: 0; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E") } .swiper-button-next { position: relative; width: 40px !important; height: 40px !important; background-size: 8px; background-repeat: no-repeat; right: inherit; z-index: 5550; background-color: #2E344F; left: inherit; top: inherit; margin: 0; display: inline-block; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") } .swiper-button-next:hover, .swiper-button-prev:hover { opacity: 0.7; } .swiper-container-horizontal>.swiper-pagination { right: 20px; width: auto; left: auto; bottom: 20px; } .comp__product_kv .swiper-container.swiper-container-horizontal>.swiper-pagination { right: 20px; left: inherit; } .swiper-container.comp__design.swiper-container-horizontal>.swiper-pagination { bottom: auto; position: relative; text-align: right; margin-bottom: 0; padding-top: 10px; right: auto; } .swiper-container .swiper-pagination-bullet { width: 40px; height: 10px; margin: 0 6px !important; opacity: 1; background-color: #CCCCCC; border-radius: 0; } .swiper-container .swiper-pagination-bullet-active { width: 40px; height: 10px; margin: 0 6px !important; opacity: 1; background-color: #D9D900; } .gallery-thumbs { height: 100px; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; background-size: cover; background-position: center; cursor: pointer; } .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; } .gallery-top img { width: 100%; height: auto; } @media only screen and (max-width: 576px) { /* swiper-container ------------------------------------------ */ .cover_wrap .swiper-slide { height: calc(100vh); min-height: inherit; max-height: 400px; background-size: cover; background-position: bottom center; } .swiper-container .swiper-pagination-bullet-active { width: 30px; height: 6px; } .swiper-container .swiper-pagination-bullet { width: 30px; height: 6px; } .swiper-button-next, .swiper-button-prev { top: inherit; bottom: 16px; } .swiper-slide a:hover, .swiper-pagination-bullet:hover { opacity: 0.7; } .swiper-button-prev { width: 30px !important; height: 30px !important; } .swiper-button-next { width: 30px !important; height: 30px !important; } .swiper-button-next:hover, .swiper-button-prev:hover { opacity: 0.7; } } /* =================================== 4: Modal ====================================== */ .mfp-bg { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 9999; overflow: hidden; position: fixed; color: #fff; background: #374252; opacity: 0.96; filter: alpha(opacity=90); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display:block; color: #000; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { display: table; max-width: 1140px; height: 100%; width: 100%; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; table-layout:fixed; } .mfp-align-top .mfp-container:before { display: none; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { display: table-cell; vertical-align: middle; width: 100%; } /* contents ----------------------------------------------*/ .modal__contents { overflow: auto; max-height: calc(100vh - 170px); padding: 0 6%; text-align:left; } /* IE8 */ .modal__contents { padding: 0 6%; text-align:left; } .modal__contents::-webkit-scrollbar-track { background-color: #EEEEEE; } .modal__contents::-webkit-scrollbar-thumb { background-color: #B19B61; } .modal__contents::-webkit-scrollbar { width: 10px; background-color: #EEEEEE; } .modal__contents_innner.innertaC > p, .modal__contents_innner.innertaC > h3 { text-align:center !important; } .modal__contents_innner p { line-height: 2; } .modal__contents * { color: #fff; text-align:left; } .modal__contents_innner figure { margin-bottom:20px; text-align:center; width:inherit; } .modal__contents_innner img { max-width:100%; height:auto; } .modal__contents .movie-area { position: relative; width: 80%; padding-bottom: 45%; margin: 0 auto; } /* comp__partslist ----------------------------------------------*/ dl.comp__partslist, .comp__partslist dt, .comp__partslist dd { box-sizing: border-box; } dl.comp__partslist { margin-bottom: 20px; border-top: 1px solid #A19D9D; } .comp__partslist dt, .comp__partslist dd { padding: 5px 0; margin-bottom: 0; } .comp__partslist dt { width: 80%; float: left; font-weight: 400; } .comp__partslist dd { padding-left: 80%; border-bottom: 1px solid #A19D9D; text-align: right; } .comp__partslist dd:after { content: ''; display: block; clear: both; } @media screen and (max-width: 575px) { .partslist dt { padding: 15px 0 0; margin-bottom: 0; font-size: 1.4rem; width: 100%; float: none; } .partslist dd { padding: 0 0 15px 0; margin-bottom: 0; font-size: 1.4rem; width: 100%; float: none; } } /* comp__icon ----------------------------------------------*/ .comp__iconmodal .comp__iconmodal_item { margin-bottom: 3rem; } .comp__iconmodal dl { margin-bottom: 0; } .comp__iconmodal dt { font-size: 1.8rem; margin-bottom: 10px; line-height: 1; } .comp__iconmodal dd { font-size: 1.3rem; } .comp__iconmodal p { margin-bottom: 0; text-align: center; } .comp__iconmodal img { -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); max-height: 40px; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; display: table-cell; vertical-align: middle; } /* close ----------------------------------------------*/ .modal__close { margin: 0 0; margin-top: 0; padding-top: 30px; text-align: center; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { position: absolute; right: 50%; left: 50%; text-decoration: none; text-align: center; padding: 0 0 0 0;} .mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-close:active { top: 1px; } .mfp-close:hover, .mfp-close:focus { opacity: 0.80; filter: alpha(opacity=80); } .mfp-close:active { } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #000; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 1.0; filter: alpha(opacity=100); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 0.65; filter: alpha(opacity=65); } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; left: 40px; width: 20px; height: 20px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(225deg); transform: rotate(225deg); } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; left: 15px; width: 20px; height: 20px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 96%; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; padding-top: 56.25%; position: relative; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .modal__contents .c-glid__item--4 img { width:140px; height:auto; } .mfp-arrow { top: inherit; bottom: 10px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } #modal__close__button { position: relative; display: block; width: 52px; height:52px; margin: 0 auto; cursor: pointer; } /*animations*/ /****************** * Bounce in right * *******************/ .animated { animation-duration: 1s; animation-fill-mode: both; transform: translate3d(0px, 0px, 0px); } .animated.infinite { animation-iteration-count: infinite; } .animated.hinge { animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { animation-duration: .75s; } /* Added by Andy Meetan */ .delay-250 { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; } .delay-500 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } .delay-750 { -webkit-animation-delay: 0.75s; -moz-animation-delay: 0.75s; -o-animation-delay: 0.75s; animation-delay: 0.75s; } .delay-1000 { -webkit-animation-delay: 1.0s; -moz-animation-delay: 1.0s; -o-animation-delay: 1.0s; animation-delay: 1.0s; } .delay-1250 { -webkit-animation-delay: 1.25s; -moz-animation-delay: 1.25s; -o-animation-delay: 1.25s; animation-delay: 1.25s; } .delay-1500 { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-1750 { -webkit-animation-delay: 1.75s; -moz-animation-delay: 1.75s; -o-animation-delay: 1.75s; animation-delay: 1.75s; } .delay-2000 { -webkit-animation-delay: 2.0s; -moz-animation-delay: 2.0s; -o-animation-delay: 2.0s; animation-delay: 2.0s; } .delay-2500 { -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; -o-animation-delay: 2.5s; animation-delay: 2.5s; } .delay-2000 { -webkit-animation-delay: 2.0s; -moz-animation-delay: 2.0s; -o-animation-delay: 2.0s; animation-delay: 2.0s; } .delay-2500 { -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; -o-animation-delay: 2.5s; animation-delay: 2.5s; } .delay-3000 { -webkit-animation-delay: 3.0s; -moz-animation-delay: 3.0s; -o-animation-delay: 3.0s; animation-delay: 3.0s; } .delay-3500 { -webkit-animation-delay: 3.5s; -moz-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } @keyframes bounce { from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0, 0, 0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -30px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } .bounce { animation-name: bounce; transform-origin: center bottom; } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } .pulse { animation-name: pulse; } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } } .rubberBand { animation-name: rubberBand; } @keyframes shake { from, to { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .shake { animation-name: shake; } @keyframes headShake { 0% { transform: translateX(0); } 6.5% { transform: translateX(-6px) rotateY(-9deg); } 18.5% { transform: translateX(5px) rotateY(7deg); } 31.5% { transform: translateX(-3px) rotateY(-5deg); } 43.5% { transform: translateX(2px) rotateY(3deg); } 50% { transform: translateX(0); } } .headShake { animation-timing-function: ease-in-out; animation-name: headShake; } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } } .swing { transform-origin: top center; animation-name: swing; } @keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } .tada { animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes wobble { from { transform: none; } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { transform: none; } } .wobble { animation-name: wobble; } @keyframes jello { from, 11.1%, to { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { animation-name: jello; transform-origin: center; } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } .bounceIn { animation-name: bounceIn; } @keyframes bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } .bounceInDown { animation-name: bounceInDown; } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { transform: none; } } .bounceInLeft { animation-name: bounceInLeft; } @keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } .bounceInRight { animation-name: bounceInRight; } @keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } .bounceInUp { animation-name: bounceInUp; } @keyframes bounceOut { 20% { transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; transform: scale3d(.3, .3, .3); } } .bounceOut { animation-name: bounceOut; } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .bounceOutDown { animation-name: bounceOutDown; } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { animation-name: bounceOutLeft; } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } .bounceOutRight { animation-name: bounceOutRight; } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } .bounceOutUp { animation-name: bounceOutUp; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDownBig { from { opacity: 0; transform: translate3d(0, -2000px, 0); } to { opacity: 1; transform: none; } } .fadeInDownBig { animation-name: fadeInDownBig; } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } .fadeInLeft { animation-name: fadeInLeft; } @keyframes fadeInLeftBig { from { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInLeftBig { animation-name: fadeInLeftBig; } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } } .fadeInRight { animation-name: fadeInRight; } @keyframes fadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInRightBig { animation-name: fadeInRightBig; } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } @keyframes fadeInUpBig { from { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: none; } } .fadeInUpBig { animation-name: fadeInUpBig; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } } .fadeOutDown { animation-name: fadeOutDown; } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { animation-name: fadeOutDownBig; } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { animation-name: fadeOutLeft; } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { animation-name: fadeOutLeftBig; } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0); } } .fadeOutRight { animation-name: fadeOutRight; } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { animation-name: fadeOutRightBig; } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } } .fadeOutUp { animation-name: fadeOutUp; } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { animation-name: fadeOutUpBig; } @keyframes flip { from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in; } to { transform: perspective(400px); animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip; } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInX; } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInY; } @keyframes flipOutX { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @keyframes flipOutY { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipOutY; } @keyframes lightSpeedIn { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); opacity: 1; } to { transform: none; opacity: 1; } } .lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; } @keyframes lightSpeedOut { from { opacity: 1; } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; } @keyframes rotateIn { from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { transform-origin: center; transform: none; opacity: 1; } } .rotateIn { animation-name: rotateIn; } @keyframes rotateInDownLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } } .rotateInDownLeft { animation-name: rotateInDownLeft; } @keyframes rotateInDownRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } } .rotateInDownRight { animation-name: rotateInDownRight; } @keyframes rotateInUpLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } } .rotateInUpLeft { animation-name: rotateInUpLeft; } @keyframes rotateInUpRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } } .rotateInUpRight { animation-name: rotateInUpRight; } @keyframes rotateOut { from { transform-origin: center; opacity: 1; } to { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { animation-name: rotateOut; } @keyframes rotateOutDownLeft { from { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { animation-name: rotateOutDownLeft; } @keyframes rotateOutDownRight { from { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { animation-name: rotateOutDownRight; } @keyframes rotateOutUpLeft { from { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { animation-name: rotateOutUpLeft; } @keyframes rotateOutUpRight { from { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { animation-name: rotateOutUpRight; } @keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } to { transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { animation-name: hinge; } @keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } } .jackInTheBox { animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollIn { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; transform: none; } } .rollIn { animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollOut { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { animation-name: rollOut; } @keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { animation-name: zoomIn; } @keyframes zoomInDown { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { animation-name: zoomInDown; } @keyframes zoomInLeft { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { animation-name: zoomInLeft; } @keyframes zoomInRight { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { animation-name: zoomInRight; } @keyframes zoomInUp { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { animation-name: zoomInUp; } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { animation-name: zoomOut; } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { animation-name: zoomOutDown; } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; transform: scale(.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } .zoomOutLeft { animation-name: zoomOutLeft; } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; transform: scale(.1) translate3d(2000px, 0, 0); transform-origin: right center; } } .zoomOutRight { animation-name: zoomOutRight; } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { animation-name: zoomOutUp; } @keyframes slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .slideInDown { animation-name: slideInDown; } @keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .slideInLeft { animation-name: slideInLeft; } @keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .slideInRight { animation-name: slideInRight; } @keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .slideInUp { animation-name: slideInUp; } @keyframes slideOutDown { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 100%, 0); } } .slideOutDown { animation-name: slideOutDown; } @keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } } .slideOutLeft { animation-name: slideOutLeft; } @keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(100%, 0, 0); } } .slideOutRight { animation-name: slideOutRight; } @keyframes slideOutUp { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } } .slideOutUp { animation-name: slideOutUp; } /***************** * Short Animations *******************/ /********************* * fadeInUpShort *********************/ @-webkit-keyframes fadeInUpShort { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUpShort { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpShort { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } .fadeInUpShort.go { -webkit-animation-name: fadeInUpShort; animation-name: fadeInUpShort; } /********************* * fadeInDownShort *********************/ @-webkit-keyframes fadeInDownShort { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDownShort { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownShort { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } .fadeInDownShort.go { -webkit-animation-name: fadeInDownShort; animation-name: fadeInDownShort; } /********************* * fadeInRightShort *********************/ @-webkit-keyframes fadeInRightShort { 0% { opacity: 0; -webkit-transform: translateX(40px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInRightShort { 0% { opacity: 0; transform: translateX(40px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightShort { opacity: 0; -webkit-transform: translateX(40px); transform: translateX(40px); } .fadeInRightShort.go { -webkit-animation-name: fadeInRightShort; animation-name: fadeInRightShort; } /********************* * fadeInLeftShort *********************/ @-webkit-keyframes fadeInLeftShort { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeftShort { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftShort { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } .fadeInLeftShort.go { -webkit-animation-name: fadeInLeftShort; animation-name: fadeInLeftShort; } /********************* * slideaction *********************/ .u-animation.go:before { -webkit-animation-name: obiStart, obiEnd; animation-name: obiStart, obiEnd; -webkit-animation-duration: .5s, .5s; animation-duration: .5s, .5s; -webkit-animation-timing-function: cubic-bezier(.86, 0, .07, 1), cubic-bezier(.86, 0, .07, 1); animation-timing-function: cubic-bezier(.86, 0, .07, 1), cubic-bezier(.86, 0, .07, 1); -webkit-animation-delay: 0s, .5s; animation-delay: 0s, .5s; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .u-animation.go .u-animation__inner { -webkit-animation-name: obiInner; animation-name: obiInner; -webkit-animation-duration: 0s; animation-duration: 0s; -webkit-animation-delay: .5s; animation-delay: .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; transform: translate3d(0, 0, 0); } .u-animation--1.go:before { -webkit-animation-delay: .1s, .7s; animation-delay: .1s, .7s } .u-animation--1.go .u-animation__inner { -webkit-animation-delay: .7s; animation-delay: .7s } .u-animation--2.go:before { -webkit-animation-delay: .2s, .8s; animation-delay: .2s, .8s } .u-animation--2.go .u-animation__inner { -webkit-animation-delay: .8s; animation-delay: .8s } .u-animation--3.go:before { -webkit-animation-delay: .3s, .9s; animation-delay: .3s, .9s } .u-animation--3.go .u-animation__inner { -webkit-animation-delay: .9s; animation-delay: .9s } .u-animation--4.go:before { -webkit-animation-delay: .4s, 1s; animation-delay: .4s, 1s } .u-animation--4.go .u-animation__inner { -webkit-animation-delay: 1s; animation-delay: 1s } .u-animation--5.go:before { -webkit-animation-delay: .5s, 1.1s; animation-delay: .5s, 1.1s } .u-animation--5.go .u-animation__inner { -webkit-animation-delay: 1.1s; animation-delay: 1.1s } .u-animation--6.go:before { -webkit-animation-delay: .6s, 1.2s; animation-delay: .6s, 1.2s } .u-animation--6.go .u-animation__inner { -webkit-animation-delay: 1.2s; animation-delay: 1.2s } .u-animation--7.go:before { -webkit-animation-delay: .7s, 1.3s; animation-delay: .7s, 1.3s } .u-animation--7.go .u-animation__inner { -webkit-animation-delay: 1.3s; animation-delay: 1.3s } .u-animation--8.go:before { -webkit-animation-delay: .8s, 1.4s; animation-delay: .8s, 1.4s } .u-animation--8.go .u-animation__inner { -webkit-animation-delay: 1.4s; animation-delay: 1.4s } .u-animation--9.go:before { -webkit-animation-delay: .9s, 1.5s; animation-delay: .9s, 1.5s } .u-animation--9.go .u-animation__inner { -webkit-animation-delay: 1.5s; animation-delay: 1.5s } .u-animation--10.go:before { -webkit-animation-delay: 1s, 1.6s; animation-delay: 1s, 1.6s } .u-animation--10.go .u-animation__inner { -webkit-animation-delay: 1.6s; animation-delay: 1.6s } .u-animation--11.go:before { -webkit-animation-delay: 1.1s, 1.7s; animation-delay: 1.1s, 1.7s } .u-animation--11.go .u-animation__inner { -webkit-animation-delay: 1.7s; animation-delay: 1.7s } .u-animation--12.go:before { -webkit-animation-delay: 1.2s, 1.8s; animation-delay: 1.2s, 1.8s } .u-animation--12.go .u-animation__inner { -webkit-animation-delay: 1.8s; animation-delay: 1.8s } .u-animation { display: inline-block; position: relative; overflow: hidden; background-color: transparent !important; padding: 0 !important; } .u-animation:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; background-color: #17A57E; -webkit-transform: translateX(-101%); -ms-transform: translateX(-101%); transform: translateX(-101%); top: 0; left: 0; z-index: 150; } .u-animation--full { display: block !important; } @media(min-width:1024px) { .u-animation--mdIb { display: inline-block !important; } } @media(min-width:1024px) { .u-animation--mdfull { display: block!important; } } .u-animation__inner { opacity: 0; padding: 0; } @-webkit-keyframes obiInner { 0% { opacity:0 } 100% { opacity:1 } } @keyframes obiInner { 0% { opacity:0 } 100% { opacity:1 } } @-webkit-keyframes obiStart { 0% { -webkit-transform:translateX(-101%); transform:translateX(-101%) } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes obiStart { 0% { -webkit-transform:translateX(-101%); transform:translateX(-101%) } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @-webkit-keyframes obiEnd { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 100% { -webkit-transform:translateX(101%); transform:translateX(101%) } } @keyframes obiEnd { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 100% { -webkit-transform:translateX(101%); transform:translateX(101%) } } /* =================================== e:print ====================================== */ @media print { #container.megamenu--bg:before { background-color: transparent !important; } .breadcrumbs { display: none; } header { height: auto; } #header { z-index: 500; top: 0; left: 0; width: 100%; height: auto; position: relative; } .comp__product_item .col-item .txt { height: auto !important; } #logo { margin-left: 0; margin-bottom: 20px; } .hidden { display: block !important; } .cky-btn-revisit-wrapper { display: none !important; } header { background-color: transparent; } .header_p #contents { padding-top: 30px; } .lazyload, .lazyloading { opacity: 1 !important; -webkit-transition: opacity 300ms; transition: opacity 300ms; } .lazyloaded { opacity: 1; -webkit-transition: unset; transition: unset; } .mainlytile_container .row > div:nth-child(2) a .txt, .mainlytile_container .row > div:nth-child(5) a .txt, .mainlytile_container .row > div:nth-child(8) a .txt, .mainlytile_container .row > div:nth-child(11) a .txt, .mainlytile_container .row > div:nth-child(14) a .txt, .mainlytile_container .row > div:nth-child(17) a .txt{ height: auto !important; } #section--basic.page.header_p .content--basic-padding { padding-top: 30px; padding-bottom: 30px; } .content--3quarter-padding { padding: 20px 0; } .mainlytile_container.news a .txt { height: auto !important; } #header #header--bg { position: relative; z-index: 2; padding: 0; height: auto; } #header #header--bg:before { display: none; } .js-toggle > dt { display: none; } .js-toggle > dd { display: none; } .js-toggle.cv > dt.is-active { display: block; background-color: #DFDFDF; color: #000; border-bottom: none; font-size: 1.4rem; font-weight: 500; padding: 12px 10px 12px 10px; } .js-toggle.cv > dt.is-active a { color: #000; } .js-toggle.cv > dt.is-active span { display: none; } .js-toggle > dt.is-active span { display: none; } dl.js-toggle.cv i { font-weight: 500; } .js-toggle > dd.is-active { display: block; } .js-toggle.cv > dt { display: none; } .js-toggle.cv > dd { display: none; } .js-toggle.cv > dt.is-active { display: block; } .js-toggle.cv > dd.is-active { display: block; } .col-2dot4, .col-sm-2dot4, .col-md-2dot4, .col-lg-2dot4, .col-xl-2dot4 { padding-right: 5px; padding-left: 5px; } .hero_wrap { display: block; height: auto; min-height: auto; background-image: none !important; background-color: transparent; } .hero__valign { display: block; color: #000; padding: 0 20px; } .bg_theme-bk { background-color: transparent !important; color: #000; padding-top: 60px; } .hero_wrap h1 { font-size: 2.4rem; } a.cover__arrow { display: none; } .hero_wrap:after { display: none; } .sp_none.w100p { display: none !important; } .comp__cv_item dl { font-size: 1.0rem; } .btn.linegray > * { font-size: 10px; padding: 3px 0 !important; } .comp__cv_item h3 { font-size: 1.3rem; } .comp__cv_item h3 i { font-size: 1.5rem; } .comp__cv_item h3 span { font-size: 1.0rem; } .comp__cv_item h4 { font-size: 1.2rem; } .comp__cv_item dd { padding-left: 40%; padding-bottom: 0; } .comp__cv_item dt { width: 40%; font-weight: normal; padding: 0; } .comp__cv_item p { margin-bottom: 30px; font-size: 1.0rem; } .container { padding-right: 0; padding-left: 0; } .row { margin-right: 0; margin-left: 0; } .comp__resultItem .fav { display: none; } .comp__resultItem .comp__resultItem_ttl li { margin-right: 0; } .ttl--Xxl { font-size: 2.4rem; margin-bottom: 1.5rem; color: #000; } .comp__cta { display: none; } div#footer { display: none; } .floatingNav { display: none; } footer { clear: both; position: relative; background-color: transparent; border-top: none; } .pagetop { display: none !important; } #footer-end ul li { display: none; } p.footer-copy { color: #000; } a, a:visited { text-decoration: underline; } * { text-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } div#container {} .col { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-sm-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-sm-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-sm-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-sm-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-sm-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-sm-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-sm-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-sm-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-sm-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-sm-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-sm-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-sm-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-sm-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .pull-sm-0 { right: auto; } .pull-sm-1 { right: 8.333333%; } .pull-sm-2 { right: 16.666667%; } .pull-sm-3 { right: 25%; } .pull-sm-4 { right: 33.333333%; } .pull-sm-5 { right: 41.666667%; } .pull-sm-6 { right: 50%; } .pull-sm-7 { right: 58.333333%; } .pull-sm-8 { right: 66.666667%; } .pull-sm-9 { right: 75%; } .pull-sm-10 { right: 83.333333%; } .pull-sm-11 { right: 91.666667%; } .pull-sm-12 { right: 100%; } .push-sm-0 { left: auto; } .push-sm-1 { left: 8.333333%; } .push-sm-2 { left: 16.666667%; } .push-sm-3 { left: 25%; } .push-sm-4 { left: 33.333333%; } .push-sm-5 { left: 41.666667%; } .push-sm-6 { left: 50%; } .push-sm-7 { left: 58.333333%; } .push-sm-8 { left: 66.666667%; } .push-sm-9 { left: 75%; } .push-sm-10 { left: 83.333333%; } .push-sm-11 { left: 91.666667%; } .push-sm-12 { left: 100%; } .offset-sm-0 { margin-left: 0%; } .offset-sm-1 { margin-left: 8.333333%; } .offset-sm-2 { margin-left: 16.666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.333333%; } .offset-sm-5 { margin-left: 41.666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.333333%; } .offset-sm-8 { margin-left: 66.666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.333333%; } .offset-sm-11 { margin-left: 91.666667%; } .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-md-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-md-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-md-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-md-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-md-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-md-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-md-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-md-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-md-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-md-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-md-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-md-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .pull-md-0 { right: auto; } .pull-md-1 { right: 8.333333%; } .pull-md-2 { right: 16.666667%; } .pull-md-3 { right: 25%; } .pull-md-4 { right: 33.333333%; } .pull-md-5 { right: 41.666667%; } .pull-md-6 { right: 50%; } .pull-md-7 { right: 58.333333%; } .pull-md-8 { right: 66.666667%; } .pull-md-9 { right: 75%; } .pull-md-10 { right: 83.333333%; } .pull-md-11 { right: 91.666667%; } .pull-md-12 { right: 100%; } .push-md-0 { left: auto; } .push-md-1 { left: 8.333333%; } .push-md-2 { left: 16.666667%; } .push-md-3 { left: 25%; } .push-md-4 { left: 33.333333%; } .push-md-5 { left: 41.666667%; } .push-md-6 { left: 50%; } .push-md-7 { left: 58.333333%; } .push-md-8 { left: 66.666667%; } .push-md-9 { left: 75%; } .push-md-10 { left: 83.333333%; } .push-md-11 { left: 91.666667%; } .push-md-12 { left: 100%; } .offset-md-0 { margin-left: 0%; } .offset-md-1 { margin-left: 8.333333%; } .offset-md-2 { margin-left: 16.666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.333333%; } .offset-md-5 { margin-left: 41.666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.333333%; } .offset-md-8 { margin-left: 66.666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.333333%; } .offset-md-11 { margin-left: 91.666667%; } .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-lg-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-lg-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-lg-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-lg-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-lg-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-lg-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-lg-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-lg-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-lg-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-lg-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-lg-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-lg-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .pull-lg-0 { right: auto; } .pull-lg-1 { right: 8.333333%; } .pull-lg-2 { right: 16.666667%; } .pull-lg-3 { right: 25%; } .pull-lg-4 { right: 33.333333%; } .pull-lg-5 { right: 41.666667%; } .pull-lg-6 { right: 50%; } .pull-lg-7 { right: 58.333333%; } .pull-lg-8 { right: 66.666667%; } .pull-lg-9 { right: 75%; } .pull-lg-10 { right: 83.333333%; } .pull-lg-11 { right: 91.666667%; } .pull-lg-12 { right: 100%; } .push-lg-0 { left: auto; } .push-lg-1 { left: 8.333333%; } .push-lg-2 { left: 16.666667%; } .push-lg-3 { left: 25%; } .push-lg-4 { left: 33.333333%; } .push-lg-5 { left: 41.666667%; } .push-lg-6 { left: 50%; } .push-lg-7 { left: 58.333333%; } .push-lg-8 { left: 66.666667%; } .push-lg-9 { left: 75%; } .push-lg-10 { left: 83.333333%; } .push-lg-11 { left: 91.666667%; } .push-lg-12 { left: 100%; } .offset-lg-0 { margin-left: 0%; } .offset-lg-1 { margin-left: 8.333333%; } .offset-lg-2 { margin-left: 16.666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.333333%; } .offset-lg-5 { margin-left: 41.666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.333333%; } .offset-lg-8 { margin-left: 66.666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.333333%; } .offset-lg-11 { margin-left: 91.666667%; } /* .col-xl { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-xl-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-xl-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.333333%; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-xl-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.666667%; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-xl-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-xl-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-xl-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.666667%; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-xl-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-xl-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.333333%; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-xl-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-xl-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-xl-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.333333%; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-xl-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.666667%; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-xl-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }*/ .pull-xl-0 { right: auto; } .pull-xl-1 { right: 8.333333%; } .pull-xl-2 { right: 16.666667%; } .pull-xl-3 { right: 25%; } .pull-xl-4 { right: 33.333333%; } .pull-xl-5 { right: 41.666667%; } .pull-xl-6 { right: 50%; } .pull-xl-7 { right: 58.333333%; } .pull-xl-8 { right: 66.666667%; } .pull-xl-9 { right: 75%; } .pull-xl-10 { right: 83.333333%; } .pull-xl-11 { right: 91.666667%; } .pull-xl-12 { right: 100%; } .push-xl-0 { left: auto; } .push-xl-1 { left: 8.333333%; } .push-xl-2 { left: 16.666667%; } .push-xl-3 { left: 25%; } .push-xl-4 { left: 33.333333%; } .push-xl-5 { left: 41.666667%; } .push-xl-6 { left: 50%; } .push-xl-7 { left: 58.333333%; } .push-xl-8 { left: 66.666667%; } .push-xl-9 { left: 75%; } .push-xl-10 { left: 83.333333%; } .push-xl-11 { left: 91.666667%; } .push-xl-12 { left: 100%; } .offset-xl-0 { margin-left: 0%; } .offset-xl-1 { margin-left: 8.333333%; } .offset-xl-2 { margin-left: 16.666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.333333%; } .offset-xl-5 { margin-left: 41.666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.333333%; } .offset-xl-8 { margin-left: 66.666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.333333%; } .offset-xl-11 { margin-left: 91.666667%; } .col-2dot4 { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .col-sm-2dot4 { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .col-md-2dot4 { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .col-lg-2dot4 { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .col-xl-2dot4 { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .col-1dot2 { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } .col-sm-1dot2 { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } .col-md-1dot2 { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } .col-lg-1dot2 { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } .col-xl-1dot2 { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } @-webkit-keyframes fadeInUpShort { 0% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } 100% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } } @keyframes fadeInUpShort { 0% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } 100% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } } .fadeInUpShort { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } .animated { opacity: 1 !important; -webkit-animation-duration: 0s !important; animation-duration: 0s !important; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn { opacity: 1; } .u-animation__inner { opacity: 1!important; padding: 0!important; } .u-animation { display: inline-block; position: relative; overflow: hidden; background-color: transparent !important; padding: 0 !important; } .u-animation:before { content: ''; display: block !important; position: absolute; width: 100%; height: 100%; background-color: none; -webkit-transform: translateX(-101%); transform: translateX(-101%); top: 0; left: 0; z-index: 150; } @-webkit-keyframes obiInner { 0% { opacity: 1 } 100% { opacity: 1 } } @keyframes obiInner { 0% { opacity: 1 } 100% { opacity: 1 } } @-webkit-keyframes obiStart { 0% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } 100% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } } @keyframes obiStart { 0% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } 100% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } } @-webkit-keyframes obiEnd { 0% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } 100% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } } @keyframes obiEnd { 0% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } 100% { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } } nav { display: none; } }