/* argument */ /* site style */ /* [ opacity ] -------------------------------------------------*/ /* [ display style ] -------------------------------------------------*/ /* [ background-image ] -------------------------------------------------*/ /* [ writing-mode ] -------------------------------------------------*/ /* [ illustrator & photoshop letter spacing ] -------------------------------------------------*/ /* [ easy breakpoint ] -------------------------------------------------*/ /* [ easy transform ] -------------------------------------------------*/ /* [ writing-mode ] -------------------------------------------------*/ /* @font-face { font-family: 'DIN Next LT'; font-style: normal; font-weight: 500; src: url("../../fonts/DINNextLTProMedium.woff"), url("../../DINNextLTProMedium.eot"); } */ @-webkit-keyframes Roll { 0% { transform: rotateZ(15deg) scale(0.9); } 50% { transform: rotateZ(-15deg) scale(1); } 100% { transform: rotateZ(15deg) scale(0.9); } } @keyframes Roll { 0% { transform: rotateZ(15deg) scale(0.9); } 50% { transform: rotateZ(-15deg) scale(1); } 100% { transform: rotateZ(15deg) scale(0.9); } } @-webkit-keyframes FloatVertical { 0% { transform: translate3d(0, 1vw, 0); } 50% { transform: translate3d(0, -1vw, 0); } 100% { transform: translate3d(0, 1vw, 0); } } @keyframes FloatVertical { 0% { transform: translate3d(0, 1vw, 0); } 50% { transform: translate3d(0, -1vw, 0); } 100% { transform: translate3d(0, 1vw, 0); } } @-webkit-keyframes FloatVerticalCloud { 0% { transform: translate3d(0, 0.7vw, 0); } 50% { transform: translate3d(0, -0.7vw, 0); } 100% { transform: translate3d(0, 0.7vw, 0); } } @keyframes FloatVerticalCloud { 0% { transform: translate3d(0, 0.7vw, 0); } 50% { transform: translate3d(0, -0.7vw, 0); } 100% { transform: translate3d(0, 0.7vw, 0); } } .service{ font-family:'Noto Sans JP', sans-serif; } .top { padding-top: 76.66666vh; } .top .footer { background-color: rgba(255, 255, 255, 0.85); } .top .footer__vid { display: none; } .top__mainimg { background: #1b3156 url(../../img/common/icon/loading.gif) no-repeat center center; background-size: 45px 45px; overflow: hidden; height: calc(76.66666vh - 60px); width: 100%; padding: 0 50px; position: fixed; top: 60px; left: 0; z-index: 2; max-height: calc(100vh - 95px); font-size: 0; } .top__mainimg--inner { position: relative; height: 100%; max-width: 1405px; margin: 0 auto; } .top__mainimg--vid { position: absolute; width: auto; height: 70vh; top: 0; left: 50%; -webkit-transform: translateX(-50.5%); -moz-transform: translateX(-50.5%); -ms-transform: translateX(-50.5%); -o-transform: translateX(-50.5%); transform: translateX(-50.5%); backface-visibility: hidden; visibility: visible !important; } .top__mainimg--staticimg { width: 100%; height: 100%; background: url(../../img/top/img_main.jpg) no-repeat center center; background-size: cover; position: absolute; top: 0; left: 0; backface-visibility: hidden; visibility: visible !important; -webkit-transition: opacity 0.8s; -moz-transition: opacity 0.8s; -ms-transition: opacity 0.8s; -o-transition: opacity 0.8s; transition: opacity 0.8s; opacity: 0; } .top__mainimg--staticimg.animated { opacity: 1; } .top__mainimg--anim { opacity: 0; -webkit-transition: opacity 0.8s; -moz-transition: opacity 0.8s; -ms-transition: opacity 0.8s; -o-transition: opacity 0.8s; transition: opacity 0.8s; } .top__mainimg--anim > div { position: absolute; } .top__mainimg--anim .cloud01, .top__mainimg--anim .cloud02, .top__mainimg--anim .balloon01 span, .top__mainimg--anim .balloon02 span { background-repeat: no-repeat; background-size: 100% 100%; background-position: top left; } .top__mainimg--anim .cloud01 { background-image: url(../../img/top/img_cloud01.png); width: 100px; height: 56px; top: 129px; right: 98px; animation: FloatVerticalCloud 6.0s ease-in-out infinite alternate; } @media only screen and (min-width: 1281px) { .top__mainimg--anim .cloud01 { top: 30px; right: 20%; } } .top__mainimg--anim .cloud02 { background-image: url(../../img/top/img_cloud02.png); width: 250px; height: 128px; top: 319px; left: -108px; animation: FloatVerticalCloud 7.0s ease-in-out infinite alternate; animation-delay: 0.5s; } @media only screen and (min-width: 1281px) { .top__mainimg--anim .cloud02 { top: 30%; left: 13%; } } .top__mainimg--anim .balloon01 span, .top__mainimg--anim .balloon02 span { width: 100%; height: 100%; display: block; animation-delay: .5s; } .top__mainimg--anim .balloon01 { width: 73px; height: 100px; top: 179px; right: 255px; } .top__mainimg--anim .balloon01 span { background-image: url(../../img/top/img_balloon01.png); animation: FloatVertical 7.0s ease-in-out infinite alternate; } .top__mainimg--anim .balloon02 { width: 110px; height: 150px; bottom: -1px; left: 26%; animation-delay: 0.5s; } .top__mainimg--anim .balloon02 span { background-image: url(../../img/top/img_balloon02.png); animation: FloatVertical 8.0s ease-in-out infinite alternate; } .top__mainimg--content { position: relative; height: 100%; max-width: 1000px; margin: 0 auto; opacity: 0; } .top__mainimg--content > img { display: block; width: 380px; position: absolute; bottom: 0; right: -81px; } .top__intro { background: #1b3156; padding: 21px 0; position: relative; z-index: 2; height: 60px; } .top__intro img { display: block; width: 846px; margin: 0 auto; } .top__cmnhd { text-align: center; } .top__cmnhd span, .top__cmnhd small { display: block; } .top__cmnhd span { color: #567893; font-size: 54px; font-family: "DIN Next LT", sans-serif; line-height: 1; letter-spacing: 5px; } .top__cmnhd small { font-size: 18px; font-weight: 500; margin-top: -2px; letter-spacing: 1.5px; } .top__cmnmore { display: block; margin: 0 auto; width: 141px; text-align: center; border: 1px solid #335d7d; font-size: 16px; font-family: "DIN Next LT", sans-serif; position: relative; padding: 10px 10px 8px; line-height: 1; letter-spacing: 2px; opacity: 1 !important; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .top__cmnmore::after, .top__cmnmore span { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; backface-visibility: hidden; } .top__cmnmore::before, .top__cmnmore::after { content: ""; position: absolute; } .top__cmnmore::before { width: 6px; height: 11px; background: url(../../img/common/icon/ico_ar_right_blue.svg) no-repeat top left; background-size: 100% 100%; top: 50%; margin-top: -5px; right: 30px; z-index: 2; } .top__cmnmore::after { width: 100%; height: 100%; background: #1b3156; top: 0; left: 0; opacity: 0; } .top__cmnmore span { display: inline-block; vertical-align: top; color: #335d7d; position: relative; left: -3px; z-index: 2; white-space: nowrap; } @media only screen and (min-width: 768px) { .top__cmnmore:hover::before { background-image: url(../../img/common/icon/ico_ar_right_white.svg); } .top__cmnmore:hover::after { opacity: 1; } .top__cmnmore:hover span { color: #fff; } } .top__news { padding: 100px 0 94px; position: relative; z-index: 2; background: #fff; } .top__news .top__cmnhd { margin-bottom: 68px; } .top__news--list { margin-bottom: 45px; } .top__news--list li { font-size: 0; margin-bottom: 14px; } .top__news--list li:last-child { margin-bottom: 0; } .top__news--list li a { display: block; } .top__news--list li a:before, .top__news--list li a:after { content: " "; display: table; } .top__news--list li a:after { clear: both; } .top__news--list li span { float: left; } .top__news--list li span.date { letter-spacing: 0.1px; margin-right: 25px; position: relative; top: -3px; } .top__news--list li span.cat { font-size: 11px; width: 58px; text-align: center; color: #fff; font-weight: 500; margin: 2px 12px 0 0; line-height: 1; padding: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top__news--list li span.cat.type-1 { background: #2c3c63; } .top__news--list li span.cat.type-2 { background: #2c9480; } .top__news--list li span.cat.type-3 { background: #bf3929; } .top__news--list li span.cat.type-4 { background: #999; } .top__news--list li span.cat.type-5 { background: #bf3929; } .top__news--list li span.cat.type-6 { background: #c0e218; } .top__news--list li .date, .top__news--list li .title { font-size: 14px; } .top__news--list li .title { overflow: hidden; letter-spacing: 0.3px; } .top__pickup { padding: 78px 0 112px; background: rgba(255, 255, 255, 0.85); overflow: hidden; position: relative; z-index: 2; } .top__pickup--vid { position: fixed; top: -5%; left: 50%; width: auto; height: 110%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); opacity: .15; backface-visibility: hidden; visibility: visible !important; } .top__pickup .container { position: relative; z-index: 2; } .top__pickup .top__cmnhd { margin-bottom: 76px; } .top__pickup--bg { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 100%; width: auto; opacity: .1; visibility: visible !important; } .top__pickup--list { font-size: 0; } .top__pickup--list li a { display: block; } .top__pickup--list li .img { display: block; width: 100%; margin-bottom: 22px; } .top__pickup--list li .title { font-size: 19px; font-weight: 500; margin-bottom: 7px; } .top__pickup--list li p { font-size: 14px; line-height: 1.9; letter-spacing: 0.8px; text-align: justify; } @media only screen and (min-width: 768px) { .top__pickup--list li .txt { height: auto !important; } } .top__pickup--list .owl-prev, .top__pickup--list .owl-next { position: absolute; top: 43px; } .top__pickup--list .owl-prev span, .top__pickup--list .owl-next span { display: block; width: 18px; height: 32px; background-position: top left; background-size: 100% 100%; background-repeat: no-repeat; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } @media only screen and (min-width: 768px) { .top__pickup--list .owl-prev:hover span, .top__pickup--list .owl-next:hover span { opacity: .5; } } .top__pickup--list .owl-prev { left: -59px; } .top__pickup--list .owl-prev span { background-image: url(../../img/common/icon/ico_prev_slide.svg); } .top__pickup--list .owl-next { right: -59px; } .top__pickup--list .owl-next span { background-image: url(../../img/common/icon/ico_next_slide.svg); } .top__service { position: relative; z-index: 2; background: #fff; padding: 108px 0 24px; } .top__service .top__cmnhd { margin-bottom: 48px; } .top__service--desc { max-width: 860px; margin: 0 auto 103px; } .top__service--desc p { font-size: 16px; line-height: 2; margin-bottom: 40px; text-align: justify; } .top__service--desc .top__cmnmore { width: 201px; font-size: 18px; padding: 16px 10px 10px; letter-spacing: 2.5px; } .top__service--desc .top__cmnmore::before { width: 7px; height: 13px; right: 17px; margin-top: -6px; } .top__service--desc .top__cmnmore span { left: -7px; } .top__service--list { font-size: 0; margin: 0 -46px; } .top__service--list li { display: inline-block; vertical-align: top; width: 33.33333%; padding: 0 46px; margin-bottom: 95px; } .top__service--list li .img { width: 100%; display: table; margin-bottom: 18px; } .top__service--list li .img figure { display: table-cell; vertical-align: bottom; width: 100%; } .top__service--list li .img figure img { display: block; margin: 0 auto; max-width: 200px; } .top__service--list li .img.img01 figure img { width: 84px; } .top__service--list li .img.img02 figure img { width: 82px; } .top__service--list li .img.img03 figure img { width: 158px; } .top__service--list li .img.img04 figure img { width: 90px; } .top__service--list li .txt { margin-bottom: 25px; } .top__service--list li .title { text-align: center; font-weight: 500; font-size: 23px; margin: 0 -5px 8px; } .top__service--list li p { font-size: 14px; line-height: 1.9; letter-spacing: 0.55px; text-align: justify; } /* .top__service--bar { font-size: 0; margin: 0 -46px; } */ .top__service--bar{ padding-top: 40px; padding-left: 70px; padding-right: 70px; margin-bottom: 30px; } .top__service--bar li{ line-height: 1.3; letter-spacing: 0.45px; padding-bottom: 10px; /* width: 80%; */ /* display: flex; align-items: center; justify-content: center; */ } .top__service--bar li .head { font-size: 36px; text-align: center; } .top__service--bar li .head_en { font-family: 'DIN Next LT'; font-size: 36px; text-align: center; } .top__service--bar li .head_sm { font-size: 34px; text-align: center; } .top__service--bar li .sub_head { font-size: 26px; text-align: center; } .top__service--bar li .sub_head_en { font-family: 'DIN Next LT'; font-size: 26px; text-align: center; } .top__service--bar li .content { border-style: solid; border-width: 1px; background: #EEEEEE; padding-top: 5px; padding-bottom: 5px; } .top__service--bar li .content_sonota section{ background: #EEEEEE; } .top__service--bar .wrapper { /* width: 80%; */ display: flex; /* margin: 10px auto; */ justify-content: center; } .top__service--bar .wrapper .main { width: 55%; } .top__service--bar .wrapper .side { width: 45%; } .top__service--bar .wrapper .left { border-style: solid; border-width: 1px; margin-right: 5px; width: 50%; } .top__service--bar .wrapper .right { border-style: solid; border-width: 1px; margin-left: 5px; width: 50%; } .top__service--bar .wrapper .detail{ padding-top: 5px; padding-left: 15px; padding-right: 15px; } .top__service--bar .wrapper .detail .category{ font-size: 16px; } .top__service--bar .wrapper .detail .category_sonota{ font-size: 13px; } .top__service--bar .wrapper .detail .title{ padding-top: 20px; padding-bottom: 15px; font-weight: bolder; font-size: 24px; } .top__service--bar .wrapper .detail .title2{ padding-top: 10px; padding-bottom: 5px; font-weight: bolder; font-size: 24px; } .top__service--bar .detail .title_sonota{ /* padding-top: 5px; */ padding-bottom: 5px; font-weight: bolder; font-size: 20px; } .top__service--bar .wrapper .detail p{ font-size: 14px; font-weight: lighter; padding-bottom: 12px; } /* 繝「繝シ繝繝ォ髢「騾」 start */ #close, #close2{ cursor:pointer; width:200px; border:1px solid #ccc; border-radius:4px; text-align: center; padding:5px 0; margin:12px auto 0; } #mask, #mask2{ background:rgba(0,0,0,0.4); position:fixed; top:0; bottom:0; left:0; right:0; z-index:1; } #modal, #modal2{ background:#fff; width:700px; padding:20px; border-radius:4px; position:absolute; /* top:650px; */ left:0; right:0; margin:0 auto; transition:transform 0.4s; z-index:3; } #modal{ top:780px; } #modal2{ top:880px; } #modal .content, #modal2 .content { padding: 5px; margin-top: 5px; margin-bottom: 5px; border-style: solid; border-width: 1px; border-color: silver; background: white; } #modal .content .wrapper, #modal2 .content .wrapper { display: flex; justify-content: center; } #modal .content .left, #modal2 .content .left { width: 10%; } #modal .content .modal_main, #modal2 .content .modal_main { width: 90%; } #modal .content .category, #modal2 .content .category{ font-size: 14px; } #modal .content .title, #modal2 .content .title{ font-weight: bolder; font-size: 24px; } #modal .contact a, #modal2 .contact a{ font-size: 12px; color: #fff; background: #4169e1; margin-top:-15px; padding: 4px 4px; display: block; border-radius: 5px; text-decoration: none; float: right; } #modal .image, #modal2 .image{ margin-top: 5px; margin-bottom: 5px; display: flex; justify-content: center; } #modal .image img, #modal2 .image img{ width:300px; height:200px; margin-left:5px; margin-right:5px; } #modal .content p, #modal2 .content p{ line-height: 1.3; letter-spacing: 0.45px; } /* #modal > p{ margin:0 0 20px; } */ #mask.hidden, #mask2.hidden{ display:none; } #modal.hidden, #modal2.hidden{ display:none; } /* 繝「繝シ繝繝ォ髢「騾」 end */ .top__service--bar .title_sonota{ margin-top:10px; } /* 繝懊ち繝ウ陬�」セ */ /* .top__service--bar .detail .contact a{ */ .top__service--bar .wrapper .detail_btn{ cursor:pointer; font-size: 14px; color: #fff; background: #4169e1; padding: 8px 8px; margin-top:-5px; display: block; border-radius: 5px; text-decoration: none; float: right; } .top__service--bar .detail .contact a{ cursor:pointer; font-size: 14px; color: #fff; background: #4169e1; padding: 8px 8px; margin-top:-5px; margin-bottom:5px; display: block; border-radius: 5px; text-decoration: none; float: right; } .top__service--bar .dld_btn a{ cursor:pointer; font-size: 14px; color: #fff; background: #4169e1; padding: 4px 4px; margin-top:-25px; margin-bottom:20px; margin-left:15px; display: block; border-radius: 5px; text-decoration: none; float: left; } @media only screen and (min-width: 768px) and (max-width: 1023px) { .top__service--list { margin: 0 -20px; } .top__service--list li { padding: 0 20px; width: 50%; } } @media only screen and (max-width: 767px) { .top { padding-top: 520px; } .top__mainimg { top: 60px; height: 460px; max-height: calc(100vh - 60px); } .top__mainimg--vid { height: 110%; width: auto; top: -5%; max-width: 4000px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); left: 50%; } .top__mainimg--anim .cloud01 { width: 55px; height: 32px; top: 12px; right: 8px; } .top__mainimg--anim .cloud02 { width: 181px; height: 90px; top: 35px; left: -127px; } .top__mainimg--anim .balloon01 { width: 73px; height: 100px; top: 20px; right: -29px; } .top__mainimg--anim .balloon01 span { background-image: url(../../img/top/img_balloon02.png); } .top__mainimg--anim .balloon02 { width: 127px; height: 174px; bottom: -88px; left: -36px; } .top__mainimg--vid { -webkit-transform: translateX(-52%); -moz-transform: translateX(-52%); -ms-transform: translateX(-52%); -o-transform: translateX(-52%); transform: translateX(-52%); } .top__mainimg--content > img { width: 260px; bottom: -26px; right: -81px; } .top__intro { padding: 21px 0 19px; height: auto; } .top__intro img { width: 290px; } .top__cmnhd span { font-size: 38px; letter-spacing: 2.7px; } .top__cmnhd small { font-size: 14px; letter-spacing: 0; margin-top: -4px; } .top__cmnmore { width: 150px; padding: 11px 10px 6px; font-size: 19px; letter-spacing: 1.5px; } .top__cmnmore::before { width: 7px; height: 13px; margin-top: -7px; right: 14px; } .top__cmnmore span { left: 0; } .top__news { padding: 78px 0 41px; } .top__news .top__cmnhd { margin-bottom: 35px; } .top__news--list { border-top: 1px solid #a8a8a8; margin-bottom: 36px; } .top__news--list li { border-bottom: 1px solid #a8a8a8; margin: 0; } .top__news--list li a { padding: 12px 0 8px; } .top__news--list li span.date { font-size: 11px; letter-spacing: 0.6px; margin-right: 6px; } .top__news--list li span.cat { font-size: 9px; width: 47px; padding: 3px 2px 2px; margin: 1px 0 0; } .top__news--list li .title { font-size: 12px; float: left; width: 100%; margin-top: 5px; line-height: 1.95; letter-spacing: 0; } .top__news--list li:nth-child(4), .top__news--list li:nth-child(5) { display: none; } .top__pickup { padding: 81px 0 49px; } .top__pickup .top__cmnhd { margin-bottom: 26px; } .top__pickup--list { padding: 0 6px; } .top__pickup--list li .img { margin: 0; } .top__pickup--list li .txt { background: #fff; padding: 16px 19px 19px; } .top__pickup--list li .title { font-size: 17px; font-weight: normal; margin-bottom: 6px; } .top__pickup--list li p { font-size: 12px; line-height: 1.8; letter-spacing: 0; } .top__pickup--list .owl-dots { text-align: center; margin-top: 27px; } .top__pickup--list .owl-dots .owl-dot { width: 11px; height: 11px; background: #335d7d; margin: 0 10px; border: 2px solid #335d7d; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .top__pickup--list .owl-dots .owl-dot.active { background: #fff; } .top__service { padding: 80px 0 0; } .top__service .top__cmnhd { margin-bottom: 29px; } .top__service--desc { margin-bottom: 38px; } .top__service--desc p { font-size: 14px; line-height: 2.1; margin-bottom: 33px; } .top__service--desc .top__cmnmore { width: 201px; font-size: 19px; padding: 12px 10px 8px; } .top__service--desc .top__cmnmore::before { width: 7px; height: 13px; margin-top: -7px; right: 14px; letter-spacing: 1.9px; } .top__service--desc .top__cmnmore span { left: 0; } .top__service--list { background: url(../../img/top/bg_service.jpg) no-repeat bottom center; background-size: cover; margin: 0 -13px; padding: 17px 0 0; } .top__service--list li { width: auto; margin: 0 19px 17px; padding: 36px 28px; background: #fff; } .top__service--list li:last-child { margin-bottom: 0; } .top__service--list li .img { margin-bottom: 23px; } .top__service--list li .img.img01 figure img { width: 65px; } .top__service--list li .img.img02 figure img { width: 67px; } .top__service--list li .img.img03 figure img { width: 117px; } .top__service--list li .img.img04 figure img { width: 68px; } .top__service--list li .txt, .top__service--list li .img { height: auto !important; } .top__service--list li .txt { margin-bottom: 24px; } .top__service--list li .title { font-size: 17px; margin-bottom: 12px; } .top__service--list li p { font-size: 12px; line-height: 1.95; letter-spacing: 0.2px; margin: 0 -9px; } .top__service--list li .top__cmnmore { width: 133px; font-size: 17px; padding: 9px 10px 6px; } .top__service--list li .top__cmnmore::before { width: 6px; height: 11px; right: 12px; margin-top: -6px; } .top__service--list li .top__cmnmore span { letter-spacing: 1px; } } @media only screen and (min-width: 768px) and (max-width: 1465px) { .top__mainimg--anim .cloud01 { top: 25px; right: 10px; } .top__mainimg--anim .cloud02 { left: 0; bottom: 190px; top: auto; width: 200px; height: 112px; } .top__mainimg--anim .balloon01 { top: 80px; right: 80px; } .top__mainimg--anim .balloon02 { left: 100px; } } @media only screen and (min-width: 1466px) { .top .top__mainimg--anim .balloon01 { top: 75px; } } .top.hide_cloud .top__mainimg { height: 100%; max-height: 100%; } .top.hide_cloud .top__mainimg--vid { height: 110% !important; top: -5% !important; width: auto !important; left: 50% !important; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .top.hide_cloud .top__mainimg--content { visibility: hidden !important; opacity: 0; } .top.loaded .top__mainimg--content { opacity: 1; } .top.loaded .top__mainimg--anim { opacity: 1; } @media only screen and (min-width: 768px) and (max-width: 1279px) { .top__mainimg--content > img { width: 380px; } .top__mainimg--anim .cloud01 { width: 100px; height: 56px; } .top__mainimg--anim .cloud02 { width: 250px; height: 128px; left: -120px; bottom: 50px; } .top__mainimg--anim .balloon01 { width: 90px; height: 123px; } .top__mainimg--anim .balloon02 { width: 170px; height: 233px; bottom: -130px; } .top__intro { padding: 22px 0 0; } .top__intro img { width: 750px; } } @media only screen and (min-width: 768px) { .top__pickup::before { content: ""; width: 100%; height: 100%; background-image: url(../../img/top/bg_vid.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: 0; left: 0; opacity: .2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .top.hide_cloud .top__pickup::before { opacity: 0; } } @media only screen and (min-width: 768px) and (max-width: 1280px) { .top__mainimg--content > img { width: 320px; } .top__mainimg--anim .cloud01 { top: 25px; right: -20px; } .top__mainimg--anim .cloud02 { left: -110px; bottom: 10px; top: auto; } .top__mainimg--anim .balloon01 { top: 60px; right: 80px; } .top__mainimg--anim .balloon02 { left: 100px; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .top__mainimg--content > img { width: 280px; } .top__mainimg--anim .cloud01 { right: -40px; } .top__mainimg--anim .cloud02 { left: -210px; } .top__mainimg--anim .balloon01 { right: 10px; } .top__mainimg--anim .balloon02 { left: 42px; } } @media screen and (min-width: 1800px) { .top video#main_vid { width: 100%; height: auto; top: -5vh; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } .top__mainimg.canvas_bl .top__mainimg--vid { width: 100%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .top__mainimg.canvas_bl #animation_container, .top__mainimg.canvas_bl #dom_overlay_container, .top__mainimg.canvas_bl #canvas { width: 100% !important; height: auto !important; } @media only screen and (min-width: 768px) and (max-width: 1300px) { .top__mainimg.canvas_bl .top__mainimg--vid { height: 100%; width: auto; } .top__mainimg.canvas_bl #animation_container, .top__mainimg.canvas_bl #dom_overlay_container, .top__mainimg.canvas_bl #canvas { width: auto !important; height: 100% !important; } } @media only screen and (max-width: 767px) { .top__mainimg.canvas_bl .top__mainimg--vid { top: 0; height: 100%; width: auto; -webkit-transform: translateX(-52%); -moz-transform: translateX(-52%); -ms-transform: translateX(-52%); -o-transform: translateX(-52%); transform: translateX(-52%); } .top__mainimg.canvas_bl #animation_container, .top__mainimg.canvas_bl #dom_overlay_container, .top__mainimg.canvas_bl #canvas { width: auto !important; height: 100% !important; } } /*# sourceMappingURL=maps/top.min.css.map */