@charset "UTF-8"; .container * { color: #222c41; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .container *:focus { outline: none; -webkit-box-sizing: border-box; box-sizing: border-box; } a:hover, a:focus { opacity: 1; } .op1 { opacity: 1!important; } .container { font-family: "Noto Sans JP" !important; overflow: hidden; } .container.en { font-family: "Noto Sans", sans-serif !important; } .container.zh { font-family: "Noto Sans SC" !important; } @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; src: url(../fonts/notosanscjkjp-regular_woff2.woff2) format("woff2"), url(../fonts/notosanscjkjp-regular_woff.woff) format("woff"), url(../fonts/notosanscjkjp-regular_otf.otf) format("opentype"), url(../fonts/notosanscjkjp-regular_ttf.ttf) format("truetype"); } @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; src: url(../fonts/notosanscjkjp-medium_woff2.woff2) format("woff2"), url(../fonts/notosanscjkjp-medium_woff.woff) format("woff"), url(../fonts/notosanscjkjp-medium_otf.otf) format("opentype"), url(../fonts/notosanscjkjp-medium_ttf.ttf) format("truetype"); } @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 700; src: url(../fonts/notosanscjkjp-bold_woff2.woff2) format("woff2"), url(../fonts/notosanscjkjp-bold_woff.woff) format("woff"), url(../fonts/notosanscjkjp-bold_otf.otf) format("opentype"), url(../fonts/notosanscjkjp-bold_ttf.ttf) format("truetype"); } @font-face { font-family: 'Fjalla One'; font-style: normal; font-weight: 400; src: url(../fonts/fjallaone-regular_woff2.woff2) format("woff2"), url(../fonts/fjallaone-regular_woff.woff) format("woff"), url(../fonts/fjallaone-regular_oft.otf) format("opentype"), url(../fonts/fjallaone-regular_ttf.ttf) format("truetype"); } @font-face { font-family: 'atlanta'; font-style: normal; font-weight: 500; src: url(../fonts/bratlbs0_woff2.woff2) format("woff2"), url(../fonts/bratlbs0_woff.woff) format("woff"), url(../fonts/bratlbs0_otf.otf) format("opentype"), url(../fonts/bratlbs0_ttf.ttf) format("truetype"); } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.fadeIn { -webkit-animation-duration: 1s; animation-duration: 1s; } .animated.bounceIn { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes customFadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) translate(-50%, -50%); transform: translate3d(0, 100%, 0) translate(-50%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes customFadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) translate(-50%, -50%); transform: translate3d(0, 100%, 0) translate(-50%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .customFadeInUp { -webkit-animation-name: customFadeInUp; animation-name: customFadeInUp; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes st0_anime { 0% { stroke-dashoffset: 2000; fill: #fff; } 10% { fill: transparent; } 30% { fill: transparent; } 50% { fill: transparent; } 100% { stroke-dashoffset: 0; fill: transparent; } } @keyframes st0_anime { 0% { stroke-dashoffset: 2000; fill: #fff; } 10% { fill: transparent; } 30% { fill: transparent; } 50% { fill: transparent; } 100% { stroke-dashoffset: 0; fill: transparent; } } @-webkit-keyframes st1_anime { 0% { stroke-dashoffset: 2000; } 100% { stroke-dashoffset: 0; } } @keyframes st1_anime { 0% { stroke-dashoffset: 2000; } 100% { stroke-dashoffset: 0; } } @-webkit-keyframes kaizen1Anim1 { from { height: 0; } 40% { height: 50.285714%; } 60% { height: 50.285714%; } to { height: 50.285714%; } } @keyframes kaizen1Anim1 { from { height: 0; } 40% { height: 50.285714%; } 60% { height: 50.285714%; } to { height: 50.285714%; } } .kaizen1Anim1 { -webkit-animation-name: kaizen1Anim1; animation-name: kaizen1Anim1; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } @-webkit-keyframes kaizen1Anim2 { from { height: 0; } 40% { height: 50.285714%; } 60% { height: 50.285714%; } to { height: 21.142857%; } } @keyframes kaizen1Anim2 { from { height: 0; } 40% { height: 50.285714%; } 60% { height: 50.285714%; } to { height: 21.142857%; } } .kaizen1Anim2 { -webkit-animation-name: kaizen1Anim2; animation-name: kaizen1Anim2; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } @-webkit-keyframes kaizen3Anim1 { from { height: 0; } 40% { height: 39.941691%; } 60% { height: 39.941691%; } to { height: 39.941691%; } } @keyframes kaizen3Anim1 { from { height: 0; } 40% { height: 39.941691%; } 60% { height: 39.941691%; } to { height: 39.941691%; } } .kaizen3Anim1 { -webkit-animation-name: kaizen3Anim1; animation-name: kaizen3Anim1; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } @-webkit-keyframes kaizen3Anim2 { from { height: 0; } 40% { height: 39.941691%; } 60% { height: 39.941691%; } to { height: 46.938776%; } } @keyframes kaizen3Anim2 { from { height: 0; } 40% { height: 39.941691%; } 60% { height: 39.941691%; } to { height: 46.938776%; } } .kaizen3Anim2 { -webkit-animation-name: kaizen3Anim2; animation-name: kaizen3Anim2; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .mechanic .menu-trigger { -webkit-box-shadow: 0px 0px 10px 0px #9CA2B3; box-shadow: 0px 0px 10px 0px #9CA2B3; } .nav { position: fixed; top: 0; left: 0; height: 100vh; z-index: 99; cursor: pointer; } .nav:before { content: ''; display: block; position: fixed; top: 0; left: 0; height: 100vh; width: 0; background-color: #222c41; opacity: .8; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; z-index: 10; } @media screen and (max-width: 768px) { .nav:before { width: 100%; height: 0; } } .nav ul { /*display: none;*/ position: relative; margin-bottom: 60px; z-index: 10; font-size: 0; text-align: center; } @media screen and (max-width: 768px) { .nav ul { /*position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 35px;*/ margin-bottom: 0; } } .nav ul li { display: inline-block; width: 25%; list-style: none; text-align: center; vertical-align: top; } @media screen and (max-width: 768px) { .nav ul li { width: 100%; display: block; } } @media screen and (max-width: 768px) { .nav ul li + li { margin-top: 10px; } } .nav ul li:nth-child(1) .hdg:after { background-image: url("../images/txt_menu_top_b.png"); background-repeat: no-repeat; background-size: contain; } .nav ul li:nth-child(2) .hdg:after { background-image: url("../images/txt_menu_mechanic_b.png"); background-repeat: no-repeat; background-size: contain; } .nav ul li:nth-child(3) .hdg:after { background-image: url("../images/txt_menu_owner_b.png"); background-repeat: no-repeat; background-size: contain; } .nav ul li:nth-child(4) .hdg { position: relative; } .nav ul li:nth-child(4) .hdg:after { background-image: url("../images/txt_menu_contact_b.png"); background-repeat: no-repeat; background-size: contain; } .nav ul li a { position: relative; display: block; color: #fff; text-decoration: none; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .nav ul li a { padding-left: 85px; height: 73px; } } .nav ul li a:hover .img:after { opacity: .3; } .nav ul li a:hover .hdg img { opacity: 0; } .nav ul li a:hover .hdg:after { opacity: 1; } .nav ul li a:hover .txt { color: #6ab8ff; } .nav ul li a .img { width: 168px; margin: 0 auto 30px; position: relative; } @media screen and (max-width: 768px) { .nav ul li a .img { width: 73px; position: absolute; top: 0; left: 0; margin-bottom: 0; } } .nav ul li a .img:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; border-radius: 100%; opacity: 0; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .nav ul li a .img img { width: 100%; vertical-align: top; } @media screen and (max-width: 768px) { .nav ul li a .wrap { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: left; } } .nav ul li a .hdg { display: inline-block; position: relative; margin-bottom: 8px; vertical-align: top; } @media screen and (max-width: 768px) { .nav ul li a .hdg { margin-bottom: 5px; } } .nav ul li a .hdg:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .nav ul li a .hdg img { width: auto; height: 18px; vertical-align: top; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .nav ul li a .hdg img { height: 13px; } } .nav ul li a .txt { color: #fff; font-size: 14px; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .nav ul li a .txt { font-size: 12px; } } .nav.open { width: 100%; } @media screen and (max-width: 768px) { .nav.open { width: 100%; height: 100vh; } } .nav.open:before { width: 100%; } @media screen and (max-width: 768px) { .nav.open:before { width: 100%; height: 100vh; } } /*.nav.open ul { display: block; }*/ .nav.open .menu-wrap { display: block; transition: all .3s; } .nav.open .menu-wrap.show { opacity: 1; } @media screen and (max-width: 768px) { .nav.open ul { width: 174px; margin: 0 auto; } } .nav.open .box-menu-bnr { display: block; } .menu-trigger, .menu-trigger span { display: block; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; -webkit-box-sizing: border-box; box-sizing: border-box; } .menu-trigger { position: fixed; top: 135px; left: 35px; width: 60px; height: 60px; border-radius: 100%; background-color: #fff; z-index: 99; -webkit-box-shadow: 0px 1px 20px 0px #d5d2ce; box-shadow: 0px 1px 20px 0px #d5d2ce; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .menu-trigger { top: 120px; left: initial; right: 15px; width: 42px; height: 42px; } } @media screen and (min-width: 769px) { .menu-trigger:hover .wrap span { background-color: #1586cc; } .menu-trigger:hover .txt-menu { color: #1586cc; } } .menu-trigger .wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: -6px; width: 22px; height: 19px; } @media screen and (max-width: 768px) { .menu-trigger .wrap { width: 18px; height: 16px; margin-top: 0; } } .menu-trigger.active { top: 40px!important; background: none; -webkit-box-shadow: none; box-shadow: none; } @media screen and (max-width: 768px) { .menu-trigger.active { top: 20px!important; } } .menu-trigger.active span { background-color: #fff; } .menu-trigger.active .txt-menu { opacity: 0; } .menu-trigger .txt-menu { position: absolute; bottom: 9px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 11px; font-family: "Fjalla One", sans-serif !important; letter-spacing: .02em; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .menu-trigger .txt-menu { display: none; } } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background: #222c41; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .menu-trigger span { height: 2px; } } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 8px; } @media screen and (max-width: 768px) { .menu-trigger span:nth-of-type(2) { top: 7px; } } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger span:nth-of-type(1) { -webkit-animation: menu-bar01 .75s forwards; animation: menu-bar01 .75s forwards; } @-webkit-keyframes menu-bar01 { 0% { -webkit-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg); } 50% { -webkit-transform: translateY(6px) rotate(0); transform: translateY(6px) rotate(0); } 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } } @keyframes menu-bar01 { 0% { -webkit-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg); } 50% { -webkit-transform: translateY(6px) rotate(0); transform: translateY(6px) rotate(0); } 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } } .menu-trigger span:nth-of-type(2) { opacity: 1; } .menu-trigger span:nth-of-type(3) { -webkit-animation: menu-bar02 .75s forwards; animation: menu-bar02 .75s forwards; } @-webkit-keyframes menu-bar02 { 0% { -webkit-transform: translateY(-6px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg); } 50% { -webkit-transform: translateY(-6px) rotate(0); transform: translateY(-6px) rotate(0); } 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } } @keyframes menu-bar02 { 0% { -webkit-transform: translateY(-6px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg); } 50% { -webkit-transform: translateY(-6px) rotate(0); transform: translateY(-6px) rotate(0); } 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } } .menu-trigger.active span:nth-of-type(1) { top: 2px; -webkit-animation: active-menu-bar01 .75s forwards; animation: active-menu-bar01 .75s forwards; } @-webkit-keyframes active-menu-bar01 { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(6px) rotate(0); transform: translateY(6px) rotate(0); } 100% { -webkit-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg); } } @keyframes active-menu-bar01 { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(6px) rotate(0); transform: translateY(6px) rotate(0); } 100% { -webkit-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg); } } @media screen and (max-width: 768px) { @-webkit-keyframes active-menu-bar01 { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(5px) rotate(0); transform: translateY(5px) rotate(0); } 100% { -webkit-transform: translateY(5px) rotate(45deg); transform: translateY(5px) rotate(45deg); } } @keyframes active-menu-bar01 { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(5px) rotate(0); transform: translateY(5px) rotate(0); } 100% { -webkit-transform: translateY(5px) rotate(45deg); transform: translateY(5px) rotate(45deg); } } } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger.active span:nth-of-type(3) { bottom: 2px; -webkit-animation: active-menu-bar03 .75s forwards; animation: active-menu-bar03 .75s forwards; } @-webkit-keyframes active-menu-bar03 { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-6px) rotate(0); transform: translateY(-6px) rotate(0); } 100% { -webkit-transform: translateY(-6px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg); } } @keyframes active-menu-bar03 { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-6px) rotate(0); transform: translateY(-6px) rotate(0); } 100% { -webkit-transform: translateY(-6px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg); } } @media screen and (max-width: 768px) { @-webkit-keyframes active-menu-bar03 { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-5px) rotate(0); transform: translateY(-5px) rotate(0); } 100% { -webkit-transform: translateY(-5px) rotate(-45deg); transform: translateY(-5px) rotate(-45deg); } } @keyframes active-menu-bar03 { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-5px) rotate(0); transform: translateY(-5px) rotate(0); } 100% { -webkit-transform: translateY(-5px) rotate(-45deg); transform: translateY(-5px) rotate(-45deg); } } } .menu-wrap { display: none; opacity: 0; max-width: 1020px; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 30px; z-index: 10; transition: opacity .3s; } @media screen and (max-width: 768px) { .menu-wrap { margin-top: -10px; } } .box-menu-bnr { /*display: none;*/ position: relative; padding: 30px 0 25px; z-index: 10; text-align: center; } @media screen and (max-width: 768px) { .box-menu-bnr { /*position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 348px; width: 100%;*/ padding: 15px 0 25px; } } .box-menu-bnr .bnr { display: inline-block; text-decoration: none; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .box-menu-bnr .bnr.iot { margin-left: 88px; } @media screen and (max-width: 768px) { .box-menu-bnr .bnr.iot { margin-left: 12px; } } .box-menu-bnr .bnr .img { position: relative; width: 320px; height: 150px; margin-bottom: 10px; } .box-menu-bnr .bnr .img img { position: absolute; top: 0; left: 0; width: 100%; vertical-align: top; } .box-menu-bnr .bnr .img:after { content: ''; display: block; width: 100%; height: 100%; background-color: #fff; opacity: 0; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .box-menu-bnr .bnr .img { width: 137px; height: 64px; margin-bottom: 2px; } } .box-menu-bnr .bnr .txt { color: #fff; font-size: 18px; letter-spacing: .04em; text-align: center; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .box-menu-bnr .bnr .txt { font-size: 11px; } } @media screen and (min-width: 769px) { .box-menu-bnr .bnr:hover .txt { color: #6ab8ff; } .box-menu-bnr .bnr:hover .img:after { opacity: .3; } } .scroll { height: 70px; position: absolute; bottom: 70px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 260px; text-align: center; cursor: pointer; font-size: 14px; letter-spacing: .08em; font-family: 'Fjalla One', sans-serif; } @media screen and (max-width: 768px) { .scroll { top: initial; bottom: 30px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @media screen and (max-width: 768px) { .scroll .txt { display: none; } } .scroll .arrow { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; height: 60px; font-size: 50px; font-family: 'FontAwesome'; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .scroll .arrow { display: none; } } .scroll .arrow.down { -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; bottom: -6px; } @media screen and (max-width: 768px) { .scroll img { width: 55px; height: auto; } } .scroll:hover .arrow { bottom: -10px !important; } .container:not(.index) .scroll { top: initial; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 95px; } @media screen and (max-width: 768px) { .container:not(.index) .scroll { bottom: 35px; } } .mechanic .scroll { color: #fff; } .mechanic .scroll .txt { color: #fff; } .mechanic .scroll .arrow i { color: #fff; } span.br { display: inline-block; } .floating-bnr { position: fixed; display: block; width: 88px; height: 340px; right: 0; top: 50%; margin-top: -140px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3483cd+0,5bb8e2+100 */ background: #3483cd; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(#3483cd), to(#5bb8e2)); background: -webkit-linear-gradient(left, #3483cd 0%, #5bb8e2 100%); background: -o-linear-gradient(left, #3483cd 0%, #5bb8e2 100%); background: linear-gradient(to right, #3483cd 0%, #5bb8e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3483cd', endColorstr='#5bb8e2',GradientType=1 ); /* IE6-9 */ border-radius: 10px 0 0 10px; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; z-index: 99; } .floating-bnr:after { content: '\f105'; position: absolute; left: 50%; bottom: 15px; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); margin-left: 2px; color: #fff; font-size: 30px; font-family: "FontAwesome" !important; } .floating-bnr.disable { opacity: 0; } .floating-bnr img { position: absolute; top: 12px; left: 11px; width: 68px; } .floating-bnr .txt { position: absolute; top: 90px; left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); width: 40px; height: 230px; margin-left: 2px; color: #fff; font-size: 17px; font-weight: 500; } .floating-bnr .txt img { display: block; width: 100%; height: auto; position: static; } .floating-bnr:hover { opacity: .8; -webkit-box-shadow: 0px 1px 20px 0px #949c9e; box-shadow: 0px 1px 20px 0px #949c9e; } @media screen and (max-width: 768px) { .floating-bnr { display: none; } } .zh .floating-bnr { height: 310px; } .zh .floating-bnr .txt { width: 44px; } .btn-pagetop { position: fixed; right: 18px; bottom: 20px; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; z-index: 50; } .btn-pagetop.disable { opacity: 0; } @media screen and (max-width: 768px) { .btn-pagetop { right: 15px; top: initial; bottom: 25px; } } @media screen and (min-width: 769px) { .btn-pagetop:hover .btn { background: #222c41; } .btn-pagetop:hover .btn i { color: #fff; } } .btn-pagetop .btn { position: relative; display: block; width: 50px; height: 50px; margin: 0 auto 2px; background-color: #fff; border: 2px solid #222c41; border-radius: 100%; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .btn-pagetop .btn { width: 42px; height: 42px; } } .btn-pagetop .btn i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: -1px; color: #222c41; font-size: 32px; } @media screen and (max-width: 768px) { .btn-pagetop .btn i { font-size: 28px; } } @media screen and (max-width: 768px) { .btn-pagetop .txt { width: 45px; } .btn-pagetop .txt img { width: 100%; } } .graph { position: relative; width: 300px; height: 300px; margin: 0 auto 40px; opacity: 0; } @media screen and (max-width: 768px) { .graph { width: 250px; height: 250px; margin: 0 auto 20px; } .graph canvas { width: 250px !important; height: 250px !important; } } .graph .chart { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .graph .chartBg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } .graph__num { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 66px; font-family: "Fjalla One", sans-serif !important; letter-spacing: -.05em; } @media screen and (max-width: 768px) { .graph__num { font-size: 60px; } } .graph__num span { color: #fff; } .graph__num .percent { font-size: 36px; } @media screen and (max-width: 768px) { .graph__num .percent { font-size: 30px; } } .index .nav ul li:nth-child(1) .img:after { background-color: #bdc0c6; opacity: .5; } .index .nav ul li:nth-child(1) .hdg img { opacity: 0; } .index .nav ul li:nth-child(1) .hdg:after { opacity: 1; } .index .nav ul li:nth-child(1) .txt { color: #6ab8ff; } .index .main { padding: 100px 0 110px; background-color: #edefef; } @media screen and (max-width: 768px) { .index .main { padding: 28px 0 45px; } } .index .main .inner { max-width: 1166px; margin: 0 auto; font-size: 0; } @media screen and (max-width: 768px) { .index .main .inner { width: 100%; padding: 0 15px; } } .index .hdg-top { opacity: 0; } .hdg-top { position: relative; } .hdg-top-anim { position: relative; width: 100%; height: 100%; overflow: hidden; } .hdg-top-anim img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%; } .hdg-top-anim.wide img { width: 100%; height: auto; } .hdg-top-anim .wrap-animimg .anim { display: none; } .hdg-top-anim .wrap-animimg .anim.visible { display: block; } .hdg-top-circle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 700px; height: 700px; background-color: #fff; border-radius: 100%; -webkit-box-shadow: 0px 1px 20px 0px #d5d2ce; box-shadow: 0px 1px 20px 0px #d5d2ce; opacity: 0; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .hdg-top-circle { width: 290px; height: 290px; } } .hdg-top-circle.show { opacity: 1; } .hdg-top-circle .wrap-txt { width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -45px; } @media screen and (max-width: 768px) { .hdg-top-circle .wrap-txt { margin-top: -10px; } } .hdg-top-circle__fukidashi { position: relative; width: 234px; height: 95px; margin: 0 auto 30px; color: #fff; font-size: 36px; font-weight: 500; letter-spacing: .1em; background-color: #222c41; border-radius: 48px; opacity: 0; } @media screen and (max-width: 768px) { .hdg-top-circle__fukidashi { width: 98px; height: 40px; margin: 0 auto 15px; font-size: 15px; } } .hdg-top-circle__fukidashi .txt { width: 160px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 1; margin-top: -2px; margin-left: 8px; color: #fff; } @media screen and (max-width: 768px) { .hdg-top-circle__fukidashi .txt { width: 76px; } } .hdg-top-circle__fukidashi:after { content: ''; display: block; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 100%; margin-top: -1px; width: 0; height: 0; border-style: solid; border-width: 22px 16px 0 16px; border-color: #222c41 transparent transparent transparent; } @media screen and (max-width: 768px) { .hdg-top-circle__fukidashi:after { border-width: 10px 9px 0 9px; } } .hdg-top-circle__main { margin-bottom: 25px; font-size: 110px; letter-spacing: .1em; text-align: center; opacity: 0; } @media screen and (max-width: 768px) { .hdg-top-circle__main { margin-bottom: 10px; font-size: 45px; } } .hdg-top-circle__paragraph { font-size: 18px; font-weight: 500; text-align: center; letter-spacing: .05em; opacity: 0; } @media screen and (max-width: 768px) { .hdg-top-circle__paragraph { width: 210px; margin: 0 auto; font-size: 14px; } } .main-btn { display: inline-block; width: calc(50% - 18px); vertical-align: top; text-decoration: none; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .main-btn { width: 100%; } } .main-btn + .main-btn { margin-left: 36px; } @media screen and (max-width: 768px) { .main-btn + .main-btn { margin-left: 0; margin-top: 30px; } } .main-btn:nth-child(2) .main-btn__buttom { background-color: #bcbcbc; } .main-btn:hover { -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; opacity: 0.6 !important; -webkit-box-shadow: 0px 1px 20px 0px #949c9e; box-shadow: 0px 1px 20px 0px #949c9e; } .main-btn:hover .main-btn__buttom .read-more:after { position: absolute; right: -50px; } @media screen and (max-width: 768px) { .main-btn:hover .main-btn__buttom .read-more:after { right: -30px; } } .main-btn:nth-child(2) .main-btn__top .top-txt { color: #292929; } .main-btn:nth-child(2) .main-btn__top .top-img { width: 142px; } @media screen and (max-width: 768px) { .main-btn:nth-child(2) .main-btn__top .top-img { width: 86px; } } .main-btn__top { position: relative; height: 400px; padding-top: 40px; text-align: center; background-color: #fff; } @media screen and (max-width: 768px) { .main-btn__top { height: 200px; padding-top: 19px; } } .main-btn__top img { margin: 0 auto; display: block; } .main-btn__top .top-img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 72px; width: 190px; } @media screen and (max-width: 768px) { .main-btn__top .top-img { width: 108px; height: auto; margin-top: 42px; } } .main-btn__top .top-hdg { height: 58px; width: auto; margin-bottom: 22px; } @media screen and (max-width: 768px) { .main-btn__top .top-hdg { height: 36px; width: auto; margin-bottom: 8px; } } .main-btn__top .top-txt { color: #292929; font-size: 28px; letter-spacing: .05em; } @media screen and (max-width: 768px) { .main-btn__top .top-txt { font-size: 18px; } } .main-btn__buttom { position: relative; height: 270px; background-color: #292929; } @media screen and (max-width: 768px) { .main-btn__buttom { height: 136px; } } .main-btn__buttom .buttom-txt { width: 100%; position: absolute; top: 55px; color: #fff; font-size: 32px; font-weight: 500; text-align: center; letter-spacing: .02em; } @media screen and (max-width: 768px) { .main-btn__buttom .buttom-txt { top: 30px; font-size: 16px; } } .main-btn__buttom .read-more { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 55px; } @media screen and (max-width: 768px) { .main-btn__buttom .read-more { bottom: 26px; } } .main-btn__buttom .read-more:after { content: '\f105'; position: absolute; right: -40px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; font-size: 16px; font-family: "FontAwesome" !important; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .main-btn__buttom .read-more:after { right: -20px; margin-top: -1px; font-size: 14px; } } .main-btn__buttom img { width: 71px; } @media screen and (max-width: 768px) { .main-btn__buttom img { width: 66px; } } .inquiry { padding: 100px 20px 90px; background-color: #222c41; } @media screen and (max-width: 768px) { .inquiry { padding: 60px 15px 90px; } } .inquiry p { color: #fff; text-align: center; } .inquiry p span { color: #fff; } .inquiry__hdg { margin-bottom: 35px; font-size: 36px; font-weight: bold; letter-spacing: .1em; } @media screen and (max-width: 768px) { .inquiry__hdg { font-size: 16px; } } .inquiry__txt { margin-bottom: 30px; font-size: 18px; line-height: 2; letter-spacing: .05em; } @media screen and (max-width: 768px) { .inquiry__txt { font-size: 12px; } } .inquiry__btn { position: relative; display: block; height: 128px; width: 100%; max-width: 920px; margin: 0 auto; text-decoration: none; background-size: 200% auto; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2873c7+0,5fbde4+50,5fbde4+50,2873c7+100 */ background-image: #2873c7; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background-image: -webkit-gradient(linear, left top, right top, from(#2873c7), color-stop(50%, #5fbde4), color-stop(50%, #5fbde4), to(#2873c7)); background-image: -webkit-linear-gradient(left, #2873c7 0%, #5fbde4 50%, #5fbde4 50%, #2873c7 100%); background-image: -o-linear-gradient(left, #2873c7 0%, #5fbde4 50%, #5fbde4 50%, #2873c7 100%); background-image: linear-gradient(to right, #2873c7 0%, #5fbde4 50%, #5fbde4 50%, #2873c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2873c7', endColorstr='#2873c7',GradientType=1 ); /* IE6-9 */ -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; opacity: 0; } .inquiry__btn.animated { opacity: 1; } .inquiry__btn:hover { background-position: right center; } .inquiry__btn:hover:after { right: 20px; } @media screen and (max-width: 768px) { .inquiry__btn { width: 100%; height: 68px; } } .inquiry__btn:after { content: '\f105'; position: absolute; right: 42px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; font-size: 24px; font-family: "FontAwesome" !important; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .inquiry__btn:after { right: 15px; } } .inquiry__btn span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: 30px; font-weight: bold; letter-spacing: .2em; } @media screen and (max-width: 768px) { .inquiry__btn span { width: 100%; font-size: 16px; text-align: center; } } .en .hdg-top-circle__main { font-size: 64px; } @media screen and (max-width: 768px) { .en .hdg-top-circle__main { font-size: 26px; } } .en .hdg-top-circle__fukidashi { font-size: 34px; } @media screen and (max-width: 768px) { .en .hdg-top-circle__fukidashi { width: 110px; font-size: 15px; } } .en .hdg-top-circle__fukidashi .txt { width: 162px; margin-left: 4px; } @media screen and (max-width: 768px) { .en .hdg-top-circle__fukidashi .txt { width: 80px; margin-left: 8px; } } .en .hdg-top-circle__paragraph { padding: 0 60px; } @media screen and (max-width: 768px) { .en .hdg-top-circle__paragraph { padding: 0; } } .en .main-btn__buttom .buttom-txt { font-size: 30px; } @media screen and (max-width: 768px) { .en .main-btn__buttom .buttom-txt { font-size: 16px; } } .vi .hdg-top-circle__main { font-size: 64px; } @media screen and (max-width: 768px) { .vi .hdg-top-circle__main { font-size: 26px; } } .vi .hdg-top-circle__fukidashi { width: 370px; font-size: 34px; } @media screen and (max-width: 768px) { .vi .hdg-top-circle__fukidashi { width: 170px; font-size: 15px; } } .vi .hdg-top-circle__fukidashi .txt { width: 330px; margin-left: 4px; } @media screen and (max-width: 768px) { .vi .hdg-top-circle__fukidashi .txt { width: 150px; margin-left: 4px; } } .vi .hdg-top-circle__paragraph { padding: 0 60px; } @media screen and (max-width: 768px) { .vi .hdg-top-circle__paragraph { padding: 0; } } .vi .main-btn__buttom .buttom-txt { font-size: 30px; } @media screen and (max-width: 768px) { .vi .main-btn__buttom .buttom-txt { font-size: 16px; } } .zh .hdg-top-circle__fukidashi .txt { width: 200px; margin-left: 11px; } @media screen and (max-width: 768px) { .zh .hdg-top-circle__fukidashi .txt { width: 92px; margin-left: 8px; } } .zh .hdg-top-circle__main { font-size: 96px; } @media screen and (max-width: 768px) { .zh .hdg-top-circle__main { font-size: 40px; } } @media screen and (max-width: 768px) { .only-pc { display: none; } } .only-sp { display: none; } @media screen and (max-width: 768px) { .only-sp { display: block; } } .mechanic .nav ul li:nth-child(2) .img:after { background-color: #bdc0c6; opacity: .5; } .mechanic .nav ul li:nth-child(2) .hdg img { opacity: 0; } .mechanic .nav ul li:nth-child(2) .hdg:after { opacity: 1; } .mechanic .nav ul li:nth-child(2) .txt { color: #6ab8ff; } .mechanic .hdg-top { background-color: #292929; } .mechanic .hdg-top .wrap-txt { position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -40px; text-align: center; } @media screen and (max-width: 768px) { .mechanic .hdg-top .wrap-txt { margin-top: -110px; } } @media screen and (max-width: 768px) { .mechanic .hdg-top__paragraph { color: #fff; } .mechanic .hdg-top__paragraph span { color: #fff; } } .gifanime { position: absolute; left: 50%; top: 150px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-left: 550px; width: 580px; height: 510px; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .gifanime.is-right { margin-left: -550px; } .gifanime img { position: absolute; left: 0; bottom: 0; width: 100%; } .hdg-top { overflow: hidden; min-height: 700px !important; } @media screen and (max-width: 768px) { .hdg-top { min-height: 500px !important; } } .hdg-top .gifanime { top: initial; bottom: -90px; margin-left: 490px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 768px) { .hdg-top .gifanime { bottom: -24px; margin-left: 0; width: 360px; height: auto; } } .hdg-top__hdg { margin-bottom: 30px; opacity: 0; } @media screen and (max-width: 768px) { .hdg-top__hdg { margin-bottom: 20px; } } @media screen and (max-width: 768px) { .hdg-top__hdg img { max-width: 77px; } } .hdg-top__main { margin-bottom: 70px; color: #fff; font-size: 60px; font-weight: bold; letter-spacing: -.04em; line-height: 1.3; opacity: 0; } @media screen and (max-width: 768px) { .hdg-top__main { margin-bottom: 30px; font-size: 22px; line-height: 1.7; } } .hdg-top__paragraph { color: #fff; font-size: 18px; line-height: 1.8; opacity: 0; } .hdg-top__paragraph span { color: #fff; } @media screen and (max-width: 768px) { .hdg-top__paragraph { color: #222c41; font-size: 12px; } .hdg-top__paragraph span { color: #222c41; } } .section-trouble { position: relative; padding: 210px 0 180px; text-align: center; overflow: hidden; } .section-trouble:nth-child(2n) { background-color: #edefef; } .section-trouble:nth-child(2n) .section-trouble__main { background-color: #fff; } @media screen and (max-width: 768px) { .section-trouble { padding: 30px 15px 35px; } .section-trouble .gifanime { display: block; position: relative; top: 0; margin-left: 0; margin-bottom: 30px; width: 220px; height: 218px; } } .section-trouble__hdg { display: inline-block; position: relative; padding-left: 140px; margin-bottom: 30px; height: 112px; color: #292929; font-size: 36px; text-align: left; } .section-trouble__hdg .circle { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 112px; height: 112px; background-color: #292929; border-radius: 100%; } .section-trouble__hdg .circle img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .section-trouble__hdg .txt { display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #292929; } @media screen and (max-width: 768px) { .section-trouble__hdg { padding-left: 0; margin-bottom: 0; height: auto; font-size: 16px; } .section-trouble__hdg .circle { position: static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin: 0 auto 13px; width: 48px; height: 48px; } .section-trouble__hdg .circle img { width: 27px; } .section-trouble__hdg .txt { top: 50%; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .section-trouble__img { margin-bottom: 20px; } @media screen and (max-width: 768px) { .section-trouble__img img { width: 170px; } } .section-trouble__pragraph { max-width: 448px; margin: 0 auto 40px; font-size: 16px; text-align: left; letter-spacing: -.05em; } @media screen and (max-width: 768px) { .section-trouble__pragraph { max-width: 100%; margin: 0 auto 23px; font-size: 12px; } } .section-trouble__main { position: relative; width: 100%; height: 240px; max-width: 1222px; margin: 0 auto; background-color: #edefef; opacity: 0; } @media screen and (max-width: 768px) { .section-trouble__main { height: auto; border-radius: 50px; } } .section-trouble__main .img { display: block; position: absolute; top: 50%; left: 40px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 768px) { .section-trouble__main .img { display: none; } } .section-trouble__main .txt { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 105px 0 270px; color: #292929; font-size: 24px; font-weight: bold; text-align: left; letter-spacing: .04em; } .section-trouble__main .txt .strong { color: #222c41; font-weight: bold; } @media screen and (max-width: 768px) { .section-trouble__main .txt { position: static; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); padding: 30px 20px; font-size: 14px; } } .digiflex-feed__hdg { position: relative; width: 100%; height: 380px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#69d7ef+0,27a6c1+100 */ background: #69d7ef; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(#69d7ef), to(#27a6c1)); background: -webkit-linear-gradient(left, #69d7ef 0%, #27a6c1 100%); background: -o-linear-gradient(left, #69d7ef 0%, #27a6c1 100%); background: linear-gradient(to right, #69d7ef 0%, #27a6c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69d7ef', endColorstr='#27a6c1',GradientType=1 ); /* IE6-9 */ } @media screen and (max-width: 768px) { .digiflex-feed__hdg { height: 222px; } } .digiflex-feed__hdg:after { content: ''; position: absolute; display: block; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-top: -1px; width: 0; height: 0; border-style: solid; border-width: 24px 27px 0 27px; border-color: #49c0d8 transparent transparent transparent; } .digiflex-feed__hdg .txt { position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: -2px; color: #fff; font-size: 43px; font-weight: bold; text-align: center; letter-spacing: .025em; opacity: 0; } @media screen and (max-width: 768px) { .digiflex-feed__hdg .txt { font-size: 22px; line-height: 1.8; } } .digiflex-feed__hdg .txt span { color: #fff; } .digiflex-feed__hdg .txt .dot { display: inline-block; position: relative; color: #fff; } @media screen and (max-width: 768px) { .digiflex-feed__hdg .txt .dot { margin-top: 10px; } } .digiflex-feed__hdg .txt .dot:before { content: ''; display: block; position: absolute; top: -15px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 11px; height: 11px; background-color: #fff; border-radius: 100%; } @media screen and (max-width: 768px) { .digiflex-feed__hdg .txt .dot:before { top: -6px; width: 6px; height: 6px; } } .digiflex-feed__hdg .txt .strong { margin: 0 10px; color: #222c41; font-size: 58px; font-weight: bold; letter-spacing: 0; } @media screen and (max-width: 768px) { .digiflex-feed__hdg .txt .strong { margin-right: 5px; font-size: 29px; } } .digiflex-feed__img { padding: 230px 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+32,d4e0e2+100 */ background: #ffffff; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(32%, #ffffff), to(#d4e0e2)); background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 32%, #d4e0e2 100%); background: -o-linear-gradient(top, #ffffff 0%, #ffffff 32%, #d4e0e2 100%); background: linear-gradient(to bottom, #ffffff 0%, #ffffff 32%, #d4e0e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d4e0e2',GradientType=0 ); /* IE6-9 */ } @media screen and (max-width: 768px) { .digiflex-feed__img { padding: 64px 15px; } } .digiflex-feed__img p { text-align: center; } .digiflex-feed__img .img { margin-bottom: 40px; opacity: 0; } .digiflex-feed__img .img img { width: 100%; max-width: 668px; height: auto; } @media screen and (max-width: 768px) { .digiflex-feed__img .img img { max-width: 288px; } } .digiflex-feed__img .txt { opacity: 0; } .digiflex-feed__img .txt img { width: 100%; max-width: 732px; height: auto; } @media screen and (max-width: 768px) { .digiflex-feed__img .txt img { max-width: 288px; } } .kaizen { position: relative; width: 100%; font-size: 0; } @media screen and (max-width: 768px) { .kaizen { height: auto !important; padding: 40px 0 0; } } .kaizen:nth-child(2n) { background-color: #edefef; } .kaizen:nth-child(2n) .kaizen-main { position: absolute; right: 0; top: 0; } @media screen and (max-width: 768px) { .kaizen:nth-child(2n) .kaizen-main { position: relative; } } .kaizen:nth-child(2n) .kaizen-graph { position: absolute; left: 0; top: 0; } @media screen and (max-width: 768px) { .kaizen:nth-child(2n) .kaizen-graph { position: relative; } } .kaizen:nth-child(2n) .kaizen-graph:before, .kaizen:nth-child(2n) .kaizen-graph:after { content: ''; left: calc(100% - 31px); right: -1px; background-color: #edefef; } @media screen and (max-width: 768px) { .kaizen:nth-child(2n) .kaizen-graph:before { left: 0; } .kaizen:nth-child(2n) .kaizen-graph:after { left: calc(50% + 10px); } } .kaizen:nth-child(2n) .kaizen-graph .wrap-graph { margin-left: -15px; } @media screen and (max-width: 768px) { .kaizen:nth-child(2n) .kaizen-graph .wrap-graph { margin-left: 0; } } .kaizen:nth-child(2n) .kaizen-graph .wrap-graph:before, .kaizen:nth-child(2n) .kaizen-graph .wrap-graph:after { content: ''; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 100%; right: -31px; width: 0; height: 0; border-style: solid; border-width: 19px 31px 19px 0; border-color: transparent #edefef transparent transparent; } @media screen and (max-width: 768px) { .kaizen:nth-child(2n) .kaizen-graph .wrap-graph:before, .kaizen:nth-child(2n) .kaizen-graph .wrap-graph:after { top: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); right: 100%; left: 50%; width: 0; height: 0; border-style: solid; border-width: 16px 10.5px 0 10.5px; border-color: #edefef transparent transparent transparent; } .kaizen:nth-child(2n) .kaizen-graph .wrap-graph:before { margin-top: 0; margin-left: -11px; } .kaizen:nth-child(2n) .kaizen-graph .wrap-graph:after { margin-top: 0; margin-left: 11px; } } .kaizen.is-01 { height: 745px; } .kaizen.is-01 .kaizen-graph { background-image: url("../images/img_kaizen_fukidashi_01.png"); background-repeat: no-repeat; background-size: cover; background-position: center left; vertical-align: top; } .kaizen.is-02 { height: 880px; } .kaizen.is-02 .kaizen-graph { background-image: url("../images/img_kaizen_fukidashi_02.png"); background-repeat: no-repeat; background-size: cover; background-position: center right; vertical-align: top; } .kaizen.is-03 { height: 790px; } .kaizen.is-03 .kaizen-graph { background-image: url("../images/img_kaizen_fukidashi_03.png"); background-repeat: no-repeat; background-size: cover; background-position: center left; vertical-align: top; } .kaizen-main { position: relative; display: inline-block; width: 55.7%; height: 100%; vertical-align: top; } .kaizen-main .wrap-txt { width: 100%; max-width: 500px; padding: 0 10px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 768px) { .kaizen-main { padding: 0 15px; display: block; width: 100%; margin-bottom: 50px; } .kaizen-main .wrap-txt { position: static; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); padding: 0; max-width: 100%; } } .kaizen-main__hdg { position: relative; padding-left: 135px; margin-bottom: 40px; color: #292929; font-size: 38px; font-weight: bold; line-height: 1.4; text-align: left; opacity: 0; } .kaizen-main__hdg .circle { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 116px; height: 116px; border-radius: 100%; border: 1px solid #292929; } .kaizen-main__hdg .circle img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 768px) { .kaizen-main__hdg { padding-left: 0; margin-bottom: 20px; font-size: 16px; text-align: center; } .kaizen-main__hdg .circle { width: 48px; height: 48px; display: block; position: relative; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); margin: 0 auto 20px; } .kaizen-main__hdg .circle img { width: 21px; } } .kaizen-main__img { margin-bottom: 20px; opacity: 0; } .kaizen-main__img img { width: 100%; height: auto; } .kaizen-main__paragraph { font-size: 18px; font-weight: bold; letter-spacing: .04em; opacity: 0; } @media screen and (max-width: 768px) { .kaizen-main__paragraph { font-size: 12px; } } .mechanic .kaizen-main .wrap-txt { opacity: 0; } .mechanic .kaizen-main__hdg { opacity: 1; } .mechanic .kaizen-main__img { opacity: 1; } .mechanic .kaizen-main__paragraph { opacity: 1; } .kaizen-graph { position: relative; display: inline-block; width: 44.3%; height: 100%; text-align: center; background-image: url("../images/img_kaizen_fukidashi_01.png"); background-repeat: no-repeat; background-size: cover; background-position: center left; vertical-align: top; overflow: hidden; } .kaizen-graph:before, .kaizen-graph:after { content: ''; display: block; width: 31px; height: calc(50% - 18px); position: absolute; left: -1px; background-color: #fff; z-index: 1; } @media screen and (max-width: 768px) { .kaizen-graph:before, .kaizen-graph:after { width: calc(50% - 10px); height: 15px; } } .kaizen-graph:before { top: 0; } .kaizen-graph:after { bottom: 0; } @media screen and (max-width: 768px) { .kaizen-graph:after { bottom: initial; top: 0; left: initial; right: 0; } } .kaizen-graph .wrap-graph { width: calc(100% - 30px); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-left: 15px; } @media screen and (max-width: 768px) { .kaizen-graph .wrap-graph { margin-left: 0; padding: 60px 0 45px; } } .kaizen-graph .wrap-graph:before, .kaizen-graph .wrap-graph:after { content: ''; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: -31px; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 31px; border-color: transparent transparent transparent #ffffff; } @media screen and (max-width: 768px) { .kaizen-graph .wrap-graph:before, .kaizen-graph .wrap-graph:after { left: 50%; top: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); border-width: 16px 10.5px 0 10.5px; border-color: #ffffff transparent transparent transparent; } } .kaizen-graph .wrap-graph:before { margin-top: -18px; } @media screen and (max-width: 768px) { .kaizen-graph .wrap-graph:before { margin-top: 0; margin-left: -11px; } } .kaizen-graph .wrap-graph:after { margin-top: 18px; } @media screen and (max-width: 768px) { .kaizen-graph .wrap-graph:after { margin-top: 0; margin-left: 11px; } } @media screen and (max-width: 768px) { .kaizen-graph { width: 100%; } .kaizen-graph .wrap-graph { width: 100%; position: static; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } } .kaizen-graph__graph { width: 100%; max-width: 329px; margin-bottom: 40px; } @media screen and (max-width: 768px) { .kaizen-graph__graph { margin-bottom: 10px; } } .kaizen-graph__txt { color: #fff; font-size: 40px; font-weight: bold; opacity: 0; } @media screen and (max-width: 768px) { .kaizen-graph__txt { font-size: 20px; } } .voice { position: relative; height: 1080px; background-color: #292929; overflow: hidden; } @media screen and (max-width: 768px) { .voice { height: auto; padding: 50px 0 208px; } } .voice__bg { position: absolute; bottom: -156px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 768px) { .voice__bg { width: 460px; bottom: -60px; } } .voice__hdg { margin-top: 110px; margin-bottom: 100px; color: #fff; font-size: 48px; font-weight: bold; text-align: center; letter-spacing: .04em; opacity: 0; } @media screen and (max-width: 768px) { .voice__hdg { margin-top: 0; margin-bottom: 40px; font-size: 20px; } } .voice__fukidashi { max-width: 1110px; margin: 0 auto; font-size: 0; } .voice__fukidashi .fukidashi { position: relative; display: inline-block; width: 30%; height: 0; padding-top: 30%; font-size: 18px; background-color: #fff; vertical-align: top; border-radius: 100%; opacity: 0; } @media screen and (max-width: 768px) { .voice__fukidashi .fukidashi { display: block; width: 217px; height: 217px; margin: 0 auto; padding-top: 0; } } .voice__fukidashi .fukidashi:after { content: ''; display: block; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-top: -2px; width: 0; height: 0; border-style: solid; border-width: 30px 16px 0 16px; border-color: #ffffff transparent transparent transparent; } @media screen and (max-width: 768px) { .voice__fukidashi .fukidashi:after { border-width: 20px 12px 0 12px; } } .voice__fukidashi .fukidashi + .fukidashi { margin-left: 5%; } @media screen and (max-width: 768px) { .voice__fukidashi .fukidashi + .fukidashi { margin: 30px auto 0; } } .voice__fukidashi .fukidashi .txt { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; padding: 0 12%; color: #292929; font-weight: bold; line-height: 1.8; } @media screen and (max-width: 1000px) and (min-width: 768px) { .voice__fukidashi .fukidashi .txt { font-size: 1.8vw; } } @media screen and (max-width: 768px) { .voice__fukidashi .fukidashi .txt { font-size: 12px; } } @media screen and (max-width: 768px) { .voice__fukidashi .fukidashi:nth-child(1):after, .voice__fukidashi .fukidashi:nth-child(3):after { top: 182px; left: 12px; -webkit-transform: rotateZ(45deg); -ms-transform: rotate(45deg); transform: rotateZ(45deg); } } @media screen and (max-width: 768px) { .voice__fukidashi .fukidashi:nth-child(2):after { top: 182px; left: initial; right: 12px; -webkit-transform: rotateZ(-45deg); -ms-transform: rotate(-45deg); transform: rotateZ(-45deg); } } .movie { position: relative; display: block; height: 810px; text-decoration: none; background-color: #222c41; opacity: 1; } .movie:hover { opacity: 1; } .movie:focus { opacity: 1; } @media screen and (max-width: 1162px) { .movie { padding-top: 58.2142%; height: 0; } } .movie .wrap { width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: -2%; text-align: center; } .box-movie { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; padding-top: 58.2142%; } .movie__bg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; max-width: 1162px; } .movie__txt { width: 100%; margin-bottom: 2%; color: #fff; font-size: 48px; font-weight: bold; letter-spacing: .025em; text-align: center; line-height: 1.8; opacity: 0; } .movie__txt span { color: #fff; } @media screen and (max-width: 768px) { .movie__txt { font-size: 15px; } } .movie__btn { position: relative; width: 300px; height: 150px; margin: 0 auto; } @media screen and (max-width: 768px) { .movie__btn { margin-top: 5%; width: 50px; height: 50px; } } .movie__btn svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 768px) { .movie__btn svg { width: 50px; height: 50px; } } .movie__btn .path { stroke: #fff; fill: #fff; stroke-dasharray: 2000; stroke-dashoffset: 0; stroke-width: 3px; } .movie__btn .path.circle { fill: none; } .movie__btn:hover .path.circle { -webkit-animation: st1_anime 1.5s ease-in 0s forwards; animation: st1_anime 1.5s ease-in 0s forwards; } .movie__btn:hover .path.sankaku { -webkit-animation: st0_anime 1.5s ease-in 0s forwards; animation: st0_anime 1.5s ease-in 0s forwards; } .box-note { padding: 10px; font-size: 12px; } @media screen and (max-width: 768px) { .box-note { font-size: 10px; } } .line-up { padding: 100px 0 110px; max-width: 1100px; margin: 0 auto; font-size: 0; } @media screen and (max-width: 768px) { .line-up { padding: 60px 0 85px; } } .line-up__hdg { text-align: center; margin-bottom: 80px; font-size: 60px; font-family: "atlanta" !important; letter-spacing: .04em; } @media screen and (max-width: 768px) { .line-up__hdg { margin-bottom: 45px; font-size: 40px; } .line-up__hdg img { width: 115px; } } .line-up-item { display: inline-block; width: 45.4545%; vertical-align: top; } .line-up-item + .line-up-item { margin-left: 9.09%; } .line-up-item:nth-child(3) .line-up-item__img img { padding-top: 25px; } @media screen and (max-width: 768px) { .line-up-item:nth-child(3) .line-up-item__img img { width: 255px; } } @media screen and (max-width: 768px) { .line-up-item { display: block; width: 100%; padding: 0 15px; } .line-up-item + .line-up-item { margin-left: 0; margin-top: 80px; } } .line-up-item__img { position: relative; width: 100%; padding-top: 43%; margin-bottom: 35px; } @media screen and (max-width: 768px) { .line-up-item__img { padding-top: 0; } } .line-up-item__img img { display: block; height: 100%; width: auto; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 768px) { .line-up-item__img img { width: 225px; height: auto; position: static; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); margin: 0 auto; } } .line-up-item__hdg { position: relative; padding-left: 30px; margin-bottom: 25px; font-size: 38px; font-family: "atlanta" !important; letter-spacing: .04em; text-align: left; } .line-up-item__hdg:before { content: ''; display: block; position: absolute; top: 50%; left: 7px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: 1px; width: 13px; height: 36px; background-color: #222c41; } .line-up-item__hdg:after { content: ''; width: 100%; height: 2px; position: absolute; left: 0; bottom: -8px; background-color: #222c41; } @media screen and (max-width: 768px) { .line-up-item__hdg { padding-left: 16px; font-size: 20px; } .line-up-item__hdg:before { content: ''; display: block; position: absolute; top: 50%; left: 3px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 7px; height: 18px; background-color: #222c41; } .line-up-item__hdg:after { bottom: -12px; } .line-up-item__hdg img { width: 66px; } } .line-up-item__list { min-height: 238px; margin-bottom: 30px; } @media screen and (max-width: 768px) { .line-up-item__list { min-height: auto; } } .line-up-item__list li { position: relative; padding-left: 12px; font-size: 18px; letter-spacing: .04em; list-style: none; } .line-up-item__list li + li { margin-top: 3px; } .line-up-item__list li:before { content: '・'; position: absolute; top: 0; left: 0; } @media screen and (max-width: 768px) { .line-up-item__list li { font-size: 12px; } } .line-up-item__btn { position: relative; display: block; width: 100%; max-width: 290px; margin: 0 auto; padding: 20px 0; color: #fff; font-size: 18px; text-decoration: none; text-align: center; letter-spacing: .04em; background-color: #222c41; border: 3px solid #222c41; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .line-up-item__btn:hover { color: #222c41; background: none; } .line-up-item__btn:hover:after { color: #222c41; right: 15px; } .line-up-item__btn:after { content: '\f105'; position: absolute; right: 25px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; font-size: 24px; font-family: "FontAwesome" !important; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .line-up-item__btn { padding: 11px 0; font-size: 10px; max-width: 168px; } .line-up-item__btn:after { right: 14px; font-size: 10px; } } .line-up-item__btn.is-soon:hover { color: #fff; background: #222c41; } .line-up-item__btn.is-soon:after { content: none; } .inquiry:not(.is-index) { padding: 70px 20px 100px; background-image: url("../images/bg_inquiry.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .inquiry:not(.is-index) .inquiry__img { position: relative; margin-bottom: 30px; text-align: center; } .inquiry:not(.is-index) .inquiry__img img { width: 96px; } .inquiry:not(.is-index) .inquiry__txt { font-size: 30px; font-weight: bold; margin-bottom: 50px; line-height: 1.7; } .inquiry:not(.is-index) .inquiry__btn span:after { -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .inquiry:not(.is-index) .inquiry__btn:hover span:after { right: -95px; } @media screen and (max-width: 768px) { .inquiry:not(.is-index) { padding: 40px 15px 60px; } .inquiry:not(.is-index) .inquiry__img { margin-bottom: 15px; } .inquiry:not(.is-index) .inquiry__img img { width: 80px; } .inquiry:not(.is-index) .inquiry__txt { font-size: 16px; margin-bottom: 18px; } } .box-bnr { position: relative; padding: 145px 0 120px; background-color: #edefef; } @media screen and (max-width: 768px) { .box-bnr { padding: 80px 15px 100px; } } .box-bnr .bnr { display: block; position: relative; width: 100%; height: 200px; max-width: 920px; margin: 0 auto; font-size: 0; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; opacity: 0; } .box-bnr .bnr.bnr-fadeIn { -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 1; } .box-bnr .bnr:hover { -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; opacity: 0.6 !important; -webkit-box-shadow: 0px 1px 20px 0px #949c9e; box-shadow: 0px 1px 20px 0px #949c9e; } .box-bnr .bnr:hover .read-more:after { right: -10px; } @media screen and (max-width: 768px) { .box-bnr .bnr:hover .read-more:after { right: 0; } } @media screen and (max-width: 768px) { .box-bnr .bnr { height: 97px; } } .box-bnr .bnr .read-more { position: absolute; display: block; bottom: 12px; right: 20px; padding-right: 25px; } @media screen and (max-width: 768px) { .box-bnr .bnr .read-more { padding-right: 12px; right: initial; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-left: 13.3215%; } } .box-bnr .bnr .read-more img { width: 70px; height: auto; } @media screen and (max-width: 768px) { .box-bnr .bnr .read-more img { width: 36px; } } .box-bnr .bnr .read-more:after { content: '\f105'; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; font-size: 16px; font-family: "FontAwesome" !important; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (max-width: 768px) { .box-bnr .bnr .read-more:after { margin-top: -1px; font-size: 8px; } } .box-bnr .bnr.is-iot { margin-bottom: 15px; background-image: url("../images/bg_iot_bnr.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } @media screen and (max-width: 768px) { .box-bnr .bnr.is-iot .read-more { margin-left: 0; } } .box-bnr .bnr + .bnr { margin-top: 65px; } @media screen and (max-width: 768px) { .box-bnr .bnr + .bnr { margin-top: 20px; } } .box-bnr .bnr__hdg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; color: #fff; font-size: 48px; letter-spacing: .1em; text-align: center; } .box-bnr .bnr__hdg .strong { color: #fff; font-size: 70px; font-weight: 500; } @media screen and (max-width: 768px) { .box-bnr .bnr__hdg { font-size: 17px; margin-top: -4px; } .box-bnr .bnr__hdg .strong { font-size: 22px; } } .box-bnr .bnr__img { display: inline-block; position: relative; width: 240px; height: 100%; background-color: #fff; vertical-align: top; } .box-bnr .bnr__img img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 128px; height: auto; margin-left: -5px; } @media screen and (max-width: 768px) { .box-bnr .bnr__img { width: 26.643%; } .box-bnr .bnr__img img { width: 61px; } } .box-bnr .bnr__main { display: inline-block; width: calc(100% - 240px); height: 100%; background-color: #bcbcbc; vertical-align: top; } @media screen and (max-width: 768px) { .box-bnr .bnr__main { width: 73.357%; } } .box-bnr .bnr__main .hdg { margin-top: 25px; text-align: center; } .box-bnr .bnr__main .hdg img { width: auto; height: 42px; } @media screen and (max-width: 768px) { .box-bnr .bnr__main .hdg { margin-top: 12px; } .box-bnr .bnr__main .hdg img { height: 18px; } } .box-bnr .bnr__main .txt { padding: 0 10px; margin-top: 14px; color: #fff; font-size: 24px; text-align: center; letter-spacing: .1em; } @media screen and (max-width: 768px) { .box-bnr .bnr__main .txt { padding: 0 2px; margin-top: 5px; font-size: 12px; font-weight: bold; } } .box-bnr .iot-txt { width: 100%; max-width: 920px; margin: 0 auto; font-size: 18px; letter-spacing: .1em; text-align: center; line-height: 1.8; opacity: 0; } @media screen and (max-width: 768px) { .box-bnr .iot-txt { font-size: 12px; text-align: left; letter-spacing: 0; } } .en .hdg-top__main { max-width: 1200px; margin: 0 auto 70px; } @media screen and (max-width: 768px) { .en .hdg-top__main { margin-bottom: 30px; } } .en .kaizen-main__hdg { font-size: 30px; } @media screen and (max-width: 768px) { .en .kaizen-main__hdg { font-size: 16px; } } .en.mechanic .kaizen.is-01 { height: 940px; } .en.mechanic .kaizen.is-03 { height: 900px; } .en .voice__fukidashi .fukidashi { font-size: 16px; } .en .box-bnr .bnr__hdg { font-size: 36px; } .owner .nav ul li:nth-child(3) .img:after { background-color: #bdc0c6; opacity: .5; } .owner .nav ul li:nth-child(3) .hdg img { opacity: 0; } .owner .nav ul li:nth-child(3) .hdg:after { opacity: 1; } .owner .nav ul li:nth-child(3) .txt { color: #6ab8ff; } .owner .hdg-top { background-color: #edefef; } .owner .hdg-top .wrap-txt { position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -40px; text-align: center; } @media screen and (max-width: 768px) { .owner .hdg-top .wrap-txt { margin-top: -110px; } } .owner .hdg-top .hdg-top__main { color: #292929; } .owner .hdg-top .hdg-top__paragraph { color: #292929; } .owner .hdg-top .hdg-top__paragraph span { color: #292929; } .owner .section-trouble__main { background-color: #edefef; } .owner .section-trouble__main .txt { width: 100%; font-size: 34px; text-align: center; } @media screen and (max-width: 1000px) { .owner .section-trouble__main .txt .only-pc { display: none; } } @media screen and (max-width: 768px) { .owner .section-trouble__main .txt { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); padding: 30px 20px; font-size: 14px; text-align: left; } } .owner .section-trouble__hdg { margin-bottom: 45px; color: #bcbcbc; } @media screen and (max-width: 768px) { .owner .section-trouble__hdg { margin-bottom: 0; } } .owner .section-trouble__hdg .circle { background-color: #292929; } .owner .section-trouble__hdg .txt { color: #292929; } .owner .section-trouble__img { margin: 0 auto 40px; } @media screen and (max-width: 768px) { .owner .section-trouble__img { margin-bottom: 20px; } .owner .section-trouble__img img { width: 290px; } } .owner .section-trouble .section-trouble__img { position: relative; opacity: 1; } .owner .section-trouble.is-01 .section-trouble__img { max-width: 446px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img { max-width: 290px; } } .owner .section-trouble.is-01 .section-trouble__img .cause, .owner .section-trouble.is-01 .section-trouble__img .result { display: block; position: relative; color: #fff; font-size: 16px; border-radius: 40px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .cause, .owner .section-trouble.is-01 .section-trouble__img .result { font-size: 12px; } } .owner .section-trouble.is-01 .section-trouble__img .cause .strong, .owner .section-trouble.is-01 .section-trouble__img .result .strong { margin: 0 5px; color: #fff; font-size: 32px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .cause .strong, .owner .section-trouble.is-01 .section-trouble__img .result .strong { font-size: 22px; } } .owner .section-trouble.is-01 .section-trouble__img .cause { padding: 10px 0 16px; margin-bottom: 40px; background-color: #6ccef4; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .cause { padding: 1px 0 3px; margin-bottom: 30px; } } .owner .section-trouble.is-01 .section-trouble__img .cause:after { content: ''; display: block; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-top: 10px; width: 0; height: 0; border-style: solid; border-width: 22px 24px 0 24px; border-color: #c7dde0 transparent transparent transparent; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .cause:after { margin-top: 9px; border-width: 14px 17px 0 17px; } } .owner .section-trouble.is-01 .section-trouble__img .result { padding: 3px 0 7px; background-color: #4289c9; } .owner .section-trouble.is-01 .section-trouble__img .result + .result { margin-top: 30px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .result + .result { margin-top: 20px; } } .owner .section-trouble.is-01 .section-trouble__img .result + .result:before { content: ''; display: block; position: absolute; top: -25px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 4px; height: 20px; background-color: #c7dde0; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .result + .result:before { width: 3px; height: 14px; top: -17px; } } .owner .section-trouble.is-01 .section-trouble__img .result + .result:after { content: ''; display: block; position: absolute; top: -17px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 20px; height: 4px; background-color: #c7dde0; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .result + .result:after { width: 14px; height: 3px; top: -12px; } } .owner .section-trouble.is-01 .section-trouble__img .badge { position: absolute; display: block; top: 105px; right: -18px; width: 130px; height: 130px; background-color: #222c41; border-radius: 100%; opacity: 0; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .badge { width: 90px; height: 90px; top: 62px; right: -12px; } } .owner .section-trouble.is-01 .section-trouble__img .badge .txt { position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: -4px; margin-left: 1px; color: #fff; font-size: 14px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .badge .txt { margin-top: -2px; font-size: 10px; } } .owner .section-trouble.is-01 .section-trouble__img .badge .txt .strong { margin: 0 5px; color: #fff; font-size: 28px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-01 .section-trouble__img .badge .txt .strong { margin: 0 3px; font-size: 20px; } } .owner .section-trouble.is-02 .section-trouble__img { max-width: 580px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-02 .section-trouble__img { max-width: 290px; } } .owner .section-trouble.is-02 .section-trouble__img .main { position: relative; margin-left: 34px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-02 .section-trouble__img .main { max-width: 170px; margin-left: 25px; } } .owner .section-trouble.is-02 .section-trouble__img .sub { position: absolute; opacity: 0; } @media screen and (max-width: 768px) { .owner .section-trouble.is-02 .section-trouble__img .sub { max-width: 95px; } } .owner .section-trouble.is-02 .section-trouble__img .sub.is-01 { top: -10px; left: 0; } @media screen and (max-width: 768px) { .owner .section-trouble.is-02 .section-trouble__img .sub.is-01 { top: -2px; } } .owner .section-trouble.is-02 .section-trouble__img .sub.is-02 { top: 98px; right: 0; } @media screen and (max-width: 768px) { .owner .section-trouble.is-02 .section-trouble__img .sub.is-02 { top: 56px; } } .owner .section-trouble.is-03 .section-trouble__img { max-width: 441px; text-align: left; } @media screen and (max-width: 768px) { .owner .section-trouble.is-03 .section-trouble__img { max-width: 290px; } } @media screen and (max-width: 768px) { .owner .section-trouble.is-03 .section-trouble__img canvas { width: 180px !important; height: 180px !important; } } .owner .section-trouble.is-03 .section-trouble__img .num { position: absolute; color: #fff; font-size: 44px; font-family: "Fjalla One", sans-serif !important; letter-spacing: -.02em; opacity: 0; } @media screen and (max-width: 768px) { .owner .section-trouble.is-03 .section-trouble__img .num { font-size: 28px; } } .owner .section-trouble.is-03 .section-trouble__img .num.is-70 { top: 154px; left: 182px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-03 .section-trouble__img .num.is-70 { top: 111px; left: 115px; } } .owner .section-trouble.is-03 .section-trouble__img .num.is-30 { top: 60px; left: 34px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-03 .section-trouble__img .num.is-30 { top: 44px; left: 21px; } } .owner .section-trouble.is-03 .section-trouble__img .num .parent { color: #fff; font-size: 24px; } @media screen and (max-width: 768px) { .owner .section-trouble.is-03 .section-trouble__img .num .parent { font-size: 16px; } } .owner .section-trouble.is-03 .section-trouble__img .label { display: block; position: absolute; bottom: 15px; right: 0; } .owner .section-trouble.is-03 .section-trouble__img .label .txt { display: block; color: #0060a8; } @media screen and (max-width: 768px) { .owner .section-trouble.is-03 .section-trouble__img .label .txt { font-size: 10px; } } .owner .section-trouble.is-03 .section-trouble__img .label .txt:before { content: ''; display: inline-block; width: 17px; height: 17px; margin-right: 6px; background-color: #6ccef4; vertical-align: middle; } @media screen and (max-width: 768px) { .owner .section-trouble.is-03 .section-trouble__img .label .txt:before { width: 12px; height: 12px; } } .owner .section-trouble.is-03 .section-trouble__img .label .txt + .txt { margin-top: 12px; } .owner .section-trouble.is-03 .section-trouble__img .label .txt + .txt:before { background-color: #0060a8; } .owner .digiflex-feed__hdg { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3bb3e5+0,4289c9+100 */ background: #3bb3e5; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(#3bb3e5), to(#4289c9)); background: -webkit-linear-gradient(left, #3bb3e5 0%, #4289c9 100%); background: -o-linear-gradient(left, #3bb3e5 0%, #4289c9 100%); background: linear-gradient(to right, #3bb3e5 0%, #4289c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb3e5', endColorstr='#4289c9',GradientType=1 ); /* IE6-9 */ } .owner .digiflex-feed__hdg:after { border-color: #3f9fd7 transparent transparent transparent; } .owner .kaizen-main__hdg { color: #292929; } .owner .kaizen-main__hdg .circle { border: 1px solid #292929; } .owner .kaizen { height: 650px; } @media screen and (max-width: 768px) { .owner .kaizen { padding-bottom: 50px; } } .owner .kaizen .wrap { position: relative; height: 100%; width: 100%; max-width: 1000px; margin: 0 auto; } .owner .kaizen.is-01 .kaizen-main__img img { max-width: 430px; } .owner .kaizen.is-03 .kaizen-main__hdg { font-size: 34px; } @media screen and (max-width: 768px) { .owner .kaizen.is-03 .kaizen-main__hdg { font-size: 16px; } } .owner .kaizen.is-03 .kaizen-main__img img { max-width: 356px; } .owner .kaizen .kaizen-main { width: 50%; } @media screen and (max-width: 768px) { .owner .kaizen .kaizen-main { width: 100%; margin-bottom: 0; } } .owner .kaizen .kaizen-main__img { position: relative; width: 50%; height: 100%; display: inline-block; } .owner .kaizen .kaizen-main__img .box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; padding: 0 20px; } @media screen and (max-width: 768px) { .owner .kaizen .kaizen-main__img .box { position: static; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); text-align: center; } } @media screen and (max-width: 768px) { .owner .kaizen .kaizen-main__img { width: 100%; height: auto; display: block; } .owner .kaizen .kaizen-main__img img { display: block; position: static; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); margin: 0 auto; padding: 0; } } .owner .box-bnr .bnr__main { background-color: #292929; } .owner .box-bnr .bnr__img img { width: 164px; margin-left: 0; } @media screen and (max-width: 768px) { .owner .box-bnr .bnr__img img { width: 65px; } } .owner .kaizen-main__img .box .wrap-img { display: inline-block; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 768px) { .owner .kaizen-main__img .box .wrap-img { position: static; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } } .owner .kaizen.is-01 .kaizen-main__img .box { max-width: 470px; margin: 0 auto; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img { width: 100%; height: 0; padding-top: 81.395349%; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .hdg { display: block; width: 100%; position: absolute; top: 0; left: 0; padding: 3px 0 5px; color: #fff; font-size: 16px; text-align: center; letter-spacing: .1em; background-color: #0060a8; border-radius: 20px; } @media screen and (max-width: 540px) { .owner .kaizen.is-01 .kaizen-main__img .wrap-img .hdg { font-size: 3vw; } } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .main { position: absolute; width: 86.511628%; height: 80%; left: 6.06977%; bottom: 6.14286%; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .txt { position: absolute; left: 32.567442%; bottom: 0; color: #6a7573; font-size: 12px; } @media screen and (max-width: 540px) { .owner .kaizen.is-01 .kaizen-main__img .wrap-img .txt { left: 32.567442%; font-size: 2.8vw; } } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .txt.dff { left: 70.55349%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .bar { position: absolute; display: block; bottom: 7.4%; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .bar .num { color: #0060a8; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 103%; font-size: 12px; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .bar1 { left: 28.6%; width: 18.139535%; height: 0; background-color: #6ccef4; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .bar2 { left: 61.395349%; width: 18.139535%; height: 0; background-color: #0060a8; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .badge { position: absolute; height: auto; opacity: 0; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .badge.badge1 { width: 15.909091%; left: 51.883721%; top: 38.571429%; } .owner .kaizen.is-01 .kaizen-main__img .wrap-img .badge.badge2 { width: 23.045455%; left: 60.883721%; top: 22.571429%; } @media screen and (max-width: 768px) { .owner .kaizen.is-02 .kaizen-main__img .wrap-img { max-width: 290px; } } .owner .kaizen.is-02 .kaizen-main__img .wrap-img .sub, .owner .kaizen.is-02 .kaizen-main__img .wrap-img .badge { position: absolute; opacity: 0; } .owner .kaizen.is-02 .kaizen-main__img .wrap-img .main { max-width: 392px; } .owner .kaizen.is-02 .kaizen-main__img .wrap-img .sub { width: 86.479592%; left: 0; top: 0; } .owner .kaizen.is-02 .kaizen-main__img .wrap-img .badge { width: 32.653061%; height: 32.653061%; left: 57.183673%; bottom: 0; background-color: #222c41; border-radius: 100%; } .owner .kaizen.is-02 .kaizen-main__img .wrap-img .badge .txt { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-left: 1px; width: 100%; color: #fff; font-size: 26px; font-weight: 500; letter-spacing: .15em; line-height: 1.3; text-align: center; } @media screen and (max-width: 768px) { .owner .kaizen.is-02 .kaizen-main__img .wrap-img .badge .txt { font-size: 18px; } } @media screen and (max-width: 360px) { .owner .kaizen.is-02 .kaizen-main__img .wrap-img .badge .txt { font-size: 5vw; } } .owner .kaizen.is-03 .kaizen-main__img .box { max-width: 389px; margin: 0 auto; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img { width: 100%; height: 0; padding-top: 98.280802%; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .hdg { display: block; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 3px 30px 5px; color: #fff; font-size: 16px; text-align: center; letter-spacing: .1em; background-color: #0060a8; border-radius: 20px; } @media screen and (max-width: 540px) { .owner .kaizen.is-03 .kaizen-main__img .wrap-img .hdg { font-size: 3vw; } } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .main { position: absolute; left: 0; top: 17.492711%; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .txt { position: absolute; left: 30.467442%; bottom: 0; color: #6a7573; font-size: 12px; } @media screen and (max-width: 540px) { .owner .kaizen.is-03 .kaizen-main__img .wrap-img .txt { left: 29.467442%; font-size: 2.8vw; } } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .txt.dff { width: 100px; left: 74.695349%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-align: center; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .bar { position: absolute; display: block; bottom: 7.28863%; width: 20.612813%; background-color: #6ccef4; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .bar .num { color: #0060a8; position: absolute; bottom: 103%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 12px; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .bar1 { left: 25.2149%; height: 0; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .bar2 { left: 64.183381%; height: 0; background-color: #0060a8; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .badge { position: absolute; height: auto; opacity: 0; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .badge.badge1 { width: 22.063037%; left: 43.5%; top: 32.408163%; } .owner .kaizen.is-03 .kaizen-main__img .wrap-img .badge.badge2 { width: 26.074499%; left: 24.5%; top: 16.408163%; } .owner .voice { background-color: #edefef; } .owner .voice__hdg { color: #292929; } .owner .voice__fukidashi .fukidashi .txt { color: #292929; } .zh .kaizen.is-01 .kaizen-main__img .wrap-img .txt { left: 31.867442%; } @media screen and (max-width: 540px) { .zh .kaizen.is-01 .kaizen-main__img .wrap-img .txt { left: 30.467442%; } } .zh .kaizen.is-03 .kaizen-main__img .wrap-img .txt { left: 28.467442%; } @media screen and (max-width: 540px) { .zh .kaizen.is-03 .kaizen-main__img .wrap-img .txt { left: 27.667442%; } } .en.owner .kaizen.is-01 { height: 940px; } .en.owner .kaizen.is-03 { height: 900px; } .en.owner .kaizen.is-03 .kaizen-main__hdg { font-size: 30px; } @media screen and (max-width: 768px) { .en.owner .kaizen.is-03 .kaizen-main__hdg { font-size: 16px; } } @media screen and (max-width: 768px) { .en.owner .hdg-top .wrap-txt { margin-top: -70px; } } .en.owner .section-trouble.is-01 .section-trouble__img .badge { right: -60px; } @media screen and (max-width: 768px) { .en.owner .section-trouble.is-01 .section-trouble__img .badge { right: 0; top: 145px; } } @media screen and (max-width: 768px) { .en.owner .section-trouble.is-01 .section-trouble__img { margin-bottom: 75px; } } @media screen and (max-width: 768px) { .en.owner .section-trouble.is-03 .section-trouble__img { margin-bottom: 70px; } } @media screen and (max-width: 768px) { .en.owner .section-trouble.is-03 .section-trouble__img .label { bottom: -46px; } } .en.owner .section-trouble.is-03 .section-trouble__img .label { font-size: 11px; } .en.owner .kaizen .kaizen-main__img .wrap-img .hdg { width: 100%; letter-spacing: .05em; } .en.owner .kaizen.is-01 .kaizen-main__img .wrap-img .txt.cp { left: 28.567442%; bottom: -4.8%; text-align: center; } @media screen and (max-width: 540px) { .en.owner .kaizen.is-01 .kaizen-main__img .wrap-img .txt.cp { left: 26.067442%; bottom: -15px; } } .en.owner .kaizen.is-03 .kaizen-main__img .wrap-img .txt.cp { left: 24.867442%; bottom: -4.8%; text-align: center; } @media screen and (max-width: 540px) { .en.owner .kaizen.is-03 .kaizen-main__img .wrap-img .txt.cp { left: 23.867442%; } } .en.owner .kaizen.is-02 .kaizen-main__img .wrap-img .badge .txt { margin-top: 3px; font-size: 23px; } @media screen and (max-width: 768px) { .en.owner .kaizen.is-02 .kaizen-main__img .wrap-img .badge .txt { font-size: 16px; } } .st_globalLink_country { color: #fff; }