@charset "UTF-8"; @import url("https://web.archive.org/web/20220429165539cs_/https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Noto+Serif:400,700&display=swap"); @import url("https://web.archive.org/web/20220429165539cs_/https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"); html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } /*============================ mixin - #icon font #responsive img #font-size #opacity #link-colors #hover-link #Omega Reset #css transition easing #placeholdercolor ============================*/ /*============================ icon font ============================*/ /*============================ responsive img ============================*/ /*============================ font-size ============================*/ /*============================ opacity ============================*/ /*============================ link-colors ============================*/ /*============================ hover-link ============================*/ /*============================ Omega Reset ============================*/ /*============================ css transition easing ============================*/ /*============================ placeholdercolor ============================*/ /*============================ keyframes ----------------------------- slidefadeIn slideup&naname down spin ============================*/ /*============================ slidefadeIn ============================*/ @keyframes slidefadeIn { 0% { transform: translateX(-2%); opacity: 0.0; } 80% { opacity: 1; } 100% { transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slidefadeIn { 0% { -webkit-transform: translateX(-2%); opacity: 0.0; } 80% { opacity: 1; } 100% { -webkit-transform: translateX(0%); opacity: 1; } } /*============================ slideup&naname ============================*/ @keyframes slideUp { 0% { transform: translateY(100%); opacity: 0.0; } 50% { transform: translateY(-8%); } 65% { transform: translateY(4%); } 70% { transform: translateY(-4%); transform: rotate(-20deg); } 80% { transform: translateY(-4%); transform: rotate(20deg); } 90% { transform: translateY(2%); transform: rotate(-20deg); } 100% { transform: translateY(0%); opacity: 1; transform: rotate(20deg); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); opacity: 0.0; } 50% { -webkit-transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); } 70% { -webkit-transform: translateY(-4%); -webkit-transform: rotate(-20deg); } 80% { -webkit-transform: translateY(-4%); -webkit-transform: rotate(20deg); } 90% { -webkit-transform: translateY(2%); -webkit-transform: rotate(-20deg); } 100% { -webkit-transform: translateY(0%); opacity: 1; -webkit-transform: rotate(20deg); } } /*============================ down ============================*/ @keyframes down { 0% { transform: scaleY(0.3); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); opacity: 1; } } @-webkit-keyframes down { 0% { -webkit-transform: scaleY(0.3); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); opacity: 1; } } /*============================ spin ============================*/ @keyframes spin { 0% { transform: rotate(0deg); opacity: 0.4; } 50% { transform: rotate(180deg); opacity: 1; } 100% { transform: rotate(360deg); opacity: 0.4; } } /*============================ breakpoint ============================*/ /*! * BxSlider v4.1.2 - Fully loaded, responsive content slider * http://bxslider.com * * Written by: Steven Wanderski, 2014 * http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * http://bxcreative.com */ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; margin: 0 auto; padding: 0; *zoom: 1; } .bx-wrapper img { max-width: 100%; display: block; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } /* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* PAGER */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 48px; height: 6px; margin: 0 6px; outline: 0; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/controls.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/controls.png) no-repeat -43px -32px; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -32px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 100; -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } /*============================ color - ============================*/ /*============================ general ============================*/ /*============================ grey ============================*/ /*============================ others ============================*/ /*============================ link ============================*/ /*============================ bgcolor - ============================*/ .bgcolor.primary { background-color: rgba(185, 185, 192, 0.1); } /*============================ font - #font-family #font-size ============================*/ /*============================ font-family ============================*/ /*============================ yu gothic ============================*/ @font-face { font-family: "Custom Yu Gothic"; src: local("Yu Gothic"); font-weight: 300; } @font-face { font-family: "Custom Yu Gothic"; src: local("Yu Gothic"); font-weight: 500; } @font-face { font-family: "Custom Yu Gothic"; src: local("Yu Gothic"); font-weight: bold; } selector { font-family: YuGothic, "Custom Yu Gothic", "Yu Gothic", sans-serif; } /*============================ size ============================*/ /*! * Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ .fa, .fas, .far, .fal, .fab { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } .fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -.0667em; } .fa-xs { font-size: .75em; } .fa-sm { font-size: .875em; } .fa-1x { font-size: 1em; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-6x { font-size: 6em; } .fa-7x { font-size: 7em; } .fa-8x { font-size: 8em; } .fa-9x { font-size: 9em; } .fa-10x { font-size: 10em; } .fa-fw { text-align: center; width: 1.25em; } .fa-ul { list-style-type: none; margin-left: 2.5em; padding-left: 0; } .fa-ul > li { position: relative; } .fa-li { left: -2em; position: absolute; text-align: center; width: 2em; line-height: inherit; } .fa-border { border: solid 0.08em #eee; border-radius: .1em; padding: .2em .25em .15em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left, .fas.fa-pull-left, .far.fa-pull-left, .fal.fa-pull-left, .fab.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right, .fas.fa-pull-right, .far.fa-pull-right, .fal.fa-pull-right, .fab.fa-pull-right { margin-left: .3em; } .fa-spin { animation: fa-spin 2s infinite linear; } .fa-pulse { animation: fa-spin 1s infinite steps(8); } @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; transform: scale(1, -1); } .fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; transform: scale(-1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical, :root .fa-flip-both { filter: none; } .fa-stack { display: inline-block; height: 2em; line-height: 2em; position: relative; vertical-align: middle; width: 2.5em; } .fa-stack-1x, .fa-stack-2x { left: 0; position: absolute; text-align: center; width: 100%; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-facebook:before { content: "\f09a"; } .fa-twitter:before { content: "\f099"; } .fa-instagram:before { content: "\f16d"; } .fa-envelope:before { content: "\f0e0"; } .fa-angle-down:before { content: "\f107"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-times-circle:before { content: "\f057"; } .fa-chevron-down:before { content: "\f078"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-chevron-up:before { content: "\f077"; } .fa-phone:before { content: "\f095"; } .fa-paper-plane:before { content: "\f1d8"; } .fa-facebook-square:before { content: "\f082"; } .fa-twitter-square:before { content: "\f081"; } .fa-map-marker-alt:before { content: "\f3c5"; } .fa-circle:before { content: "\f111"; } .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /*! * Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; font-display: auto; src: url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-regular-400.eot"); src: url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-regular-400.eot#iefix") format("embedded-opentype"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-regular-400.woff2") format("woff2"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-regular-400.woff") format("woff"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-regular-400.ttf") format("truetype"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-regular-400.svg#fontawesome") format("svg"); } .far { font-family: 'Font Awesome 5 Free'; font-weight: 400; } /*! * Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ @font-face { font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: normal; font-display: auto; src: url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-brands-400.eot"); src: url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-brands-400.eot#iefix") format("embedded-opentype"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-brands-400.woff2") format("woff2"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-brands-400.woff") format("woff"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-brands-400.ttf") format("truetype"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-brands-400.svg#fontawesome") format("svg"); } .fab { font-family: 'Font Awesome 5 Brands'; } /*! * Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; font-display: auto; src: url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-solid-900.eot"); src: url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-solid-900.eot#iefix") format("embedded-opentype"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-solid-900.woff2") format("woff2"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-solid-900.woff") format("woff"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-solid-900.ttf") format("truetype"), url("/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/fonts/default/fa-solid-900.svg#fontawesome") format("svg"); } .fa, .fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; } /*! * Hover.css (http://ianlunn.github.io/Hover/) * Version: 2.3.2 * Author: Ian Lunn @IanLunn * Author URL: http://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover * Hover.css Copyright Ian Lunn 2017. Generated with Sass. */ /* 2D TRANSITIONS */ /* Grow */ .hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.1); transform: scale(1.1); } /* Shrink */ .hvr-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { -webkit-transform: scale(0.9); transform: scale(0.9); } /* Pulse */ @-webkit-keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active { -webkit-animation-name: hvr-pulse; animation-name: hvr-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Pulse Grow */ @-webkit-keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } .hvr-pulse-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active { -webkit-animation-name: hvr-pulse-grow; animation-name: hvr-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Pulse Shrink */ @-webkit-keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active { -webkit-animation-name: hvr-pulse-shrink; animation-name: hvr-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Push */ @-webkit-keyframes hvr-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes hvr-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .hvr-push { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-push:hover, .hvr-push:focus, .hvr-push:active { -webkit-animation-name: hvr-push; animation-name: hvr-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Pop */ @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .hvr-pop { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Bounce In */ .hvr-bounce-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Bounce Out */ .hvr-bounce-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active { -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Rotate */ .hvr-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active { -webkit-transform: rotate(4deg); transform: rotate(4deg); } /* Grow Rotate */ .hvr-grow-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active { -webkit-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); } /* Float */ .hvr-float { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-float:hover, .hvr-float:focus, .hvr-float:active { -webkit-transform: translateY(-8px); transform: translateY(-8px); } /* Sink */ .hvr-sink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active { -webkit-transform: translateY(8px); transform: translateY(8px); } /* Bob */ @-webkit-keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } .hvr-bob { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active { -webkit-animation-name: hvr-bob-float, hvr-bob; animation-name: hvr-bob-float, hvr-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Hang */ @-webkit-keyframes hvr-hang { 0% { -webkit-transform: translateY(8px); transform: translateY(8px); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @keyframes hvr-hang { 0% { -webkit-transform: translateY(8px); transform: translateY(8px); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @-webkit-keyframes hvr-hang-sink { 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @keyframes hvr-hang-sink { 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } .hvr-hang { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active { -webkit-animation-name: hvr-hang-sink, hvr-hang; animation-name: hvr-hang-sink, hvr-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Skew */ .hvr-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active { -webkit-transform: skew(-10deg); transform: skew(-10deg); } /* Skew Forward */ .hvr-skew-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active { -webkit-transform: skew(-10deg); transform: skew(-10deg); } /* Skew Backward */ .hvr-skew-backward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active { -webkit-transform: skew(10deg); transform: skew(10deg); } /* Wobble Vertical */ @-webkit-keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .hvr-wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active { -webkit-animation-name: hvr-wobble-vertical; animation-name: hvr-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Horizontal */ @-webkit-keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hvr-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble To Bottom Right */ @-webkit-keyframes hvr-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hvr-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .hvr-wobble-to-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active { -webkit-animation-name: hvr-wobble-to-bottom-right; animation-name: hvr-wobble-to-bottom-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble To Top Right */ @-webkit-keyframes hvr-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hvr-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .hvr-wobble-to-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active { -webkit-animation-name: hvr-wobble-to-top-right; animation-name: hvr-wobble-to-top-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Top */ @-webkit-keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active { -webkit-animation-name: hvr-wobble-top; animation-name: hvr-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Bottom */ @-webkit-keyframes hvr-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active { -webkit-animation-name: hvr-wobble-bottom; animation-name: hvr-wobble-bottom; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Skew */ @-webkit-keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active { -webkit-animation-name: hvr-wobble-skew; animation-name: hvr-wobble-skew; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Buzz */ @-webkit-keyframes hvr-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes hvr-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } .hvr-buzz { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active { -webkit-animation-name: hvr-buzz; animation-name: hvr-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Buzz Out */ @-webkit-keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .hvr-buzz-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active { -webkit-animation-name: hvr-buzz-out; animation-name: hvr-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Forward */ .hvr-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active { -webkit-transform: translateX(8px); transform: translateX(8px); } /* Backward */ .hvr-backward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active { -webkit-transform: translateX(-8px); transform: translateX(-8px); } /* BACKGROUND TRANSITIONS */ /* Fade */ .hvr-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { background-color: #C9A063; color: white; } /* Back Pulse */ @-webkit-keyframes hvr-back-pulse { 50% { background-color: rgba(32, 152, 209, 0.75); } } @keyframes hvr-back-pulse { 50% { background-color: rgba(32, 152, 209, 0.75); } } .hvr-back-pulse { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active { -webkit-animation-name: hvr-back-pulse; animation-name: hvr-back-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-color: #C9A063; background-color: #2098d1; color: white; } /* Sweep To Right */ .hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: white; } .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Right */ .hvr-sweep-to-right2 { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-right2:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; color: #fff; background: #e1e1e1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-right2:hover, .hvr-sweep-to-right2:focus, .hvr-sweep-to-right2:active { color: #fff !important; } .hvr-sweep-to-right2:hover:before, .hvr-sweep-to-right2:focus:before, .hvr-sweep-to-right2:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Right */ .hvr-sweep-to-right3 { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-right3:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; color: #C9A063 !important; border-radius: 12px; background: #fff; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; border: 3px solid #C9A063; } .hvr-sweep-to-right3:hover, .hvr-sweep-to-right3:focus, .hvr-sweep-to-right3:active { color: #C9A063 !important; } .hvr-sweep-to-right3:hover:before, .hvr-sweep-to-right3:focus:before, .hvr-sweep-to-right3:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Left */ .hvr-sweep-to-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active { color: white; } .hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Bottom */ .hvr-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { color: white; } .hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* Sweep To Top */ .hvr-sweep-to-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { color: white; } .hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* Bounce To Right */ .hvr-bounce-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active { color: white; } .hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Left */ .hvr-bounce-to-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active { color: white; } .hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Bottom */ .hvr-bounce-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active { color: white; } .hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Top */ .hvr-bounce-to-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active { color: white; } .hvr-bounce-to-top:hover:before, .hvr-bounce-to-top:focus:before, .hvr-bounce-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Radial Out */ .hvr-radial-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-radial-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active { color: white; } .hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before { -webkit-transform: scale(2); transform: scale(2); } /* Radial In */ .hvr-radial-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; background: #C9A063; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-radial-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; border-radius: 100%; -webkit-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-radial-in:hover, .hvr-radial-in:focus, .hvr-radial-in:active { color: white; } .hvr-radial-in:hover:before, .hvr-radial-in:focus:before, .hvr-radial-in:active:before { -webkit-transform: scale(0); transform: scale(0); } /* Rectangle In */ .hvr-rectangle-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #C9A063; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-rectangle-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active { color: white; } .hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before { -webkit-transform: scale(0); transform: scale(0); } /* Rectangle Out */ .hvr-rectangle-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-rectangle-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #C9A063; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active { color: white; } .hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before { -webkit-transform: scale(1); transform: scale(1); } /* Shutter In Horizontal */ .hvr-shutter-in-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #C9A063; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-in-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { color: white; } .hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { -webkit-transform: scaleX(0); transform: scaleX(0); } /* Shutter Out Horizontal */ .hvr-shutter-out-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-out-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #C9A063; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active { color: white; } .hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Shutter In Vertical */ .hvr-shutter-in-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #C9A063; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-in-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-in-vertical:hover, .hvr-shutter-in-vertical:focus, .hvr-shutter-in-vertical:active { color: white; } .hvr-shutter-in-vertical:hover:before, .hvr-shutter-in-vertical:focus:before, .hvr-shutter-in-vertical:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); } /* Shutter Out Vertical */ .hvr-shutter-out-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-out-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #C9A063; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active { color: white; } .hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* BORDER TRANSITIONS */ /* Border Fade */ .hvr-border-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active { box-shadow: inset 0 0 0 4px #C9A063, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Hollow */ .hvr-hollow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: background; transition-property: background; box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active { background: none; } /* Trim */ .hvr-trim { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-trim:before { content: ''; position: absolute; border: white solid 4px; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; transition-property: opacity; } .hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before { opacity: 1; } /* Ripple Out */ @-webkit-keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } .hvr-ripple-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-ripple-out:before { content: ''; position: absolute; border: #e1e1e1 solid 6px; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before { -webkit-animation-name: hvr-ripple-out; animation-name: hvr-ripple-out; } /* Ripple In */ @-webkit-keyframes hvr-ripple-in { 100% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } } @keyframes hvr-ripple-in { 100% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } } .hvr-ripple-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-ripple-in:before { content: ''; position: absolute; border: #e1e1e1 solid 4px; top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .hvr-ripple-in:hover:before, .hvr-ripple-in:focus:before, .hvr-ripple-in:active:before { -webkit-animation-name: hvr-ripple-in; animation-name: hvr-ripple-in; } /* Outline Out */ .hvr-outline-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-outline-out:before { content: ''; position: absolute; border: #e1e1e1 solid 4px; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } .hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; } /* Outline In */ .hvr-outline-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-outline-in:before { pointer-events: none; content: ''; position: absolute; border: #e1e1e1 solid 4px; top: -16px; right: -16px; bottom: -16px; left: -16px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } .hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1; } /* Round Corners */ .hvr-round-corners { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: border-radius; transition-property: border-radius; } .hvr-round-corners:hover, .hvr-round-corners:focus, .hvr-round-corners:active { border-radius: 1em; } /* Underline From Left */ .hvr-underline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-underline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #fff; height: 1px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before { right: 0; } /* Underline From Center */ .hvr-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0; background: #C9A063; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { left: 0; right: 0; } /* Underline From Right */ .hvr-underline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-underline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; bottom: 0; background: #C9A063; height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before { left: 0; } /* Overline From Left */ .hvr-overline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-overline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; top: 0; background: #C9A063; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before { right: 0; } /* Overline From Center */ .hvr-overline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-overline-from-center:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; top: 0; background: #C9A063; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before { left: 0; right: 0; } /* Overline From Right */ .hvr-overline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-overline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; top: 0; background: #C9A063; height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before { left: 0; } /* Reveal */ .hvr-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; border-color: #C9A063; border-style: solid; border-width: 0; -webkit-transition-property: border-width; transition-property: border-width; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); border-width: 4px; } /* Underline Reveal */ .hvr-underline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-underline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; background: #C9A063; height: 4px; -webkit-transform: translateY(4px); transform: translateY(4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); } /* Overline Reveal */ .hvr-overline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .hvr-overline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; background: #C9A063; height: 4px; -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); } /* SHADOW/GLOW TRANSITIONS */ /* Glow */ .hvr-glow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } /* Shadow */ .hvr-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); } /* Grow Shadow */ .hvr-grow-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow, transform; transition-property: box-shadow, transform; } .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.1); transform: scale(1.1); } /* Box Shadow Outset */ .hvr-box-shadow-outset { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); } /* Box Shadow Inset */ .hvr-box-shadow-inset { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active { box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Float Shadow */ .hvr-float-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ } .hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ } /* Shadow Radial */ .hvr-shadow-radial { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-shadow-radial:before, .hvr-shadow-radial:after { pointer-events: none; position: absolute; content: ''; left: 0; width: 100%; box-sizing: border-box; background-repeat: no-repeat; height: 5px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; transition-property: opacity; } .hvr-shadow-radial:before { bottom: 100%; background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .hvr-shadow-radial:after { top: 100%; background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .hvr-shadow-radial:hover:before, .hvr-shadow-radial:focus:before, .hvr-shadow-radial:active:before, .hvr-shadow-radial:hover:after, .hvr-shadow-radial:focus:after, .hvr-shadow-radial:active:after { opacity: 1; } /* SPEECH BUBBLES */ /* Bubble Top */ .hvr-bubble-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; left: calc(50% - 10px); top: 0; border-width: 0 10px 10px 10px; border-color: transparent transparent #e1e1e1 transparent; } .hvr-bubble-top:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before { -webkit-transform: translateY(-10px); transform: translateY(-10px); } /* Bubble Right */ .hvr-bubble-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-right:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; } .hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before { -webkit-transform: translateX(10px); transform: translateX(10px); } /* Bubble Bottom */ .hvr-bubble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; left: calc(50% - 10px); bottom: 0; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; } .hvr-bubble-bottom:hover:before, .hvr-bubble-bottom:focus:before, .hvr-bubble-bottom:active:before { -webkit-transform: translateY(10px); transform: translateY(10px); } /* Bubble Left */ .hvr-bubble-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; top: calc(50% - 10px); left: 0; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; } .hvr-bubble-left:hover:before, .hvr-bubble-left:focus:before, .hvr-bubble-left:active:before { -webkit-transform: translateX(-10px); transform: translateX(-10px); } /* Bubble Float Top */ .hvr-bubble-float-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-top:before { position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); top: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #e1e1e1 transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-top:hover, .hvr-bubble-float-top:focus, .hvr-bubble-float-top:active { -webkit-transform: translateY(10px); transform: translateY(10px); } .hvr-bubble-float-top:hover:before, .hvr-bubble-float-top:focus:before, .hvr-bubble-float-top:active:before { -webkit-transform: translateY(-10px); transform: translateY(-10px); } /* Bubble Float Right */ .hvr-bubble-float-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-right:before { position: absolute; z-index: -1; top: calc(50% - 10px); right: 0; content: ''; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active { -webkit-transform: translateX(-10px); transform: translateX(-10px); } .hvr-bubble-float-right:hover:before, .hvr-bubble-float-right:focus:before, .hvr-bubble-float-right:active:before { -webkit-transform: translateX(10px); transform: translateX(10px); } /* Bubble Float Bottom */ .hvr-bubble-float-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-bottom:before { position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); bottom: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .hvr-bubble-float-bottom:hover:before, .hvr-bubble-float-bottom:focus:before, .hvr-bubble-float-bottom:active:before { -webkit-transform: translateY(10px); transform: translateY(10px); } /* Bubble Float Left */ .hvr-bubble-float-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-left:before { position: absolute; z-index: -1; content: ''; top: calc(50% - 10px); left: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active { -webkit-transform: translateX(10px); transform: translateX(10px); } .hvr-bubble-float-left:hover:before, .hvr-bubble-float-left:focus:before, .hvr-bubble-float-left:active:before { -webkit-transform: translateX(-10px); transform: translateX(-10px); } /* ICONS */ /* Icon Back */ .hvr-icon-back { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .hvr-icon-back .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-back:hover .hvr-icon, .hvr-icon-back:focus .hvr-icon, .hvr-icon-back:active .hvr-icon { -webkit-transform: translateX(-4px); transform: translateX(-4px); } /* Icon Forward */ .hvr-icon-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .hvr-icon-forward .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-forward:hover .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon { -webkit-transform: translateX(4px); transform: translateX(4px); } /* Icon Down */ @-webkit-keyframes hvr-icon-down { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-down { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } } /* Icon Down */ .hvr-icon-down { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-down .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-down:hover .hvr-icon, .hvr-icon-down:focus .hvr-icon, .hvr-icon-down:active .hvr-icon { -webkit-animation-name: hvr-icon-down; animation-name: hvr-icon-down; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Up */ @-webkit-keyframes hvr-icon-up { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-up { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } /* Icon Up */ .hvr-icon-up { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-up .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-up:hover .hvr-icon, .hvr-icon-up:focus .hvr-icon, .hvr-icon-up:active .hvr-icon { -webkit-animation-name: hvr-icon-up; animation-name: hvr-icon-up; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Spin */ .hvr-icon-spin { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-spin .hvr-icon { -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .hvr-icon-spin:hover .hvr-icon, .hvr-icon-spin:focus .hvr-icon, .hvr-icon-spin:active .hvr-icon { -webkit-transform: rotate(360deg); transform: rotate(360deg); } /* Icon Drop */ @-webkit-keyframes hvr-icon-drop { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51%, 100% { opacity: 1; } } @keyframes hvr-icon-drop { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51%, 100% { opacity: 1; } } /* Icon Drop */ .hvr-icon-drop { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-drop .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-drop:hover .hvr-icon, .hvr-icon-drop:focus .hvr-icon, .hvr-icon-drop:active .hvr-icon { opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-animation-name: hvr-icon-drop; animation-name: hvr-icon-drop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Icon Fade */ .hvr-icon-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-fade .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color; transition-property: color; } .hvr-icon-fade:hover .hvr-icon, .hvr-icon-fade:focus .hvr-icon, .hvr-icon-fade:active .hvr-icon { color: #0F9E5E; } /* Icon Float Away */ @-webkit-keyframes hvr-icon-float-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } } @keyframes hvr-icon-float-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } } /* Icon Float Away */ .hvr-icon-float-away { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-float-away .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hvr-icon-float-away:hover .hvr-icon, .hvr-icon-float-away:focus .hvr-icon, .hvr-icon-float-away:active .hvr-icon { -webkit-animation-name: hvr-icon-float-away; animation-name: hvr-icon-float-away; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Sink Away */ @-webkit-keyframes hvr-icon-sink-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); } } @keyframes hvr-icon-sink-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); } } /* Icon Sink Away */ .hvr-icon-sink-away { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-sink-away .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hvr-icon-sink-away:hover .hvr-icon, .hvr-icon-sink-away:focus .hvr-icon, .hvr-icon-sink-away:active .hvr-icon { -webkit-animation-name: hvr-icon-sink-away; animation-name: hvr-icon-sink-away; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Grow */ .hvr-icon-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-grow .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-grow:hover .hvr-icon, .hvr-icon-grow:focus .hvr-icon, .hvr-icon-grow:active .hvr-icon { -webkit-transform: scale(1.3) translateZ(0); transform: scale(1.3) translateZ(0); } /* Icon Shrink */ .hvr-icon-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-shrink .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-shrink:hover .hvr-icon, .hvr-icon-shrink:focus .hvr-icon, .hvr-icon-shrink:active .hvr-icon { -webkit-transform: scale(0.8); transform: scale(0.8); } /* Icon Pulse */ @-webkit-keyframes hvr-icon-pulse { 25% { -webkit-transform: scale(1.3); transform: scale(1.3); } 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes hvr-icon-pulse { 25% { -webkit-transform: scale(1.3); transform: scale(1.3); } 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } .hvr-icon-pulse { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-pulse .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon { -webkit-animation-name: hvr-icon-pulse; animation-name: hvr-icon-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Icon Pulse Grow */ @-webkit-keyframes hvr-icon-pulse-grow { to { -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes hvr-icon-pulse-grow { to { -webkit-transform: scale(1.3); transform: scale(1.3); } } .hvr-icon-pulse-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-pulse-grow .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse-grow:hover .hvr-icon, .hvr-icon-pulse-grow:focus .hvr-icon, .hvr-icon-pulse-grow:active .hvr-icon { -webkit-animation-name: hvr-icon-pulse-grow; animation-name: hvr-icon-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Icon Pulse Shrink */ @-webkit-keyframes hvr-icon-pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes hvr-icon-pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } .hvr-icon-pulse-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-icon-pulse-shrink .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse-shrink:hover .hvr-icon, .hvr-icon-pulse-shrink:focus .hvr-icon, .hvr-icon-pulse-shrink:active .hvr-icon { -webkit-animation-name: hvr-icon-pulse-shrink; animation-name: hvr-icon-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Icon Push */ @-webkit-keyframes hvr-icon-push { 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes hvr-icon-push { 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } .hvr-icon-push { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-push .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-push:hover .hvr-icon, .hvr-icon-push:focus .hvr-icon, .hvr-icon-push:active .hvr-icon { -webkit-animation-name: hvr-icon-push; animation-name: hvr-icon-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Pop */ @-webkit-keyframes hvr-icon-pop { 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes hvr-icon-pop { 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } } .hvr-icon-pop { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-pop .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pop:hover .hvr-icon, .hvr-icon-pop:focus .hvr-icon, .hvr-icon-pop:active .hvr-icon { -webkit-animation-name: hvr-icon-pop; animation-name: hvr-icon-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Bounce */ .hvr-icon-bounce { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-bounce .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Icon Rotate */ .hvr-icon-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-rotate .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon { -webkit-transform: rotate(20deg); transform: rotate(20deg); } /* Icon Grow Rotate */ .hvr-icon-grow-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-grow-rotate .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-grow-rotate:hover .hvr-icon, .hvr-icon-grow-rotate:focus .hvr-icon, .hvr-icon-grow-rotate:active .hvr-icon { -webkit-transform: scale(1.5) rotate(12deg); transform: scale(1.5) rotate(12deg); } /* Icon Float */ .hvr-icon-float { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-float .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-float:hover .hvr-icon, .hvr-icon-float:focus .hvr-icon, .hvr-icon-float:active .hvr-icon { -webkit-transform: translateY(-4px); transform: translateY(-4px); } /* Icon Sink */ .hvr-icon-sink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-sink .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-sink:hover .hvr-icon, .hvr-icon-sink:focus .hvr-icon, .hvr-icon-sink:active .hvr-icon { -webkit-transform: translateY(4px); transform: translateY(4px); } /* Icon Bob */ @-webkit-keyframes hvr-icon-bob { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-bob { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @-webkit-keyframes hvr-icon-bob-float { 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-bob-float { 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } .hvr-icon-bob { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-bob .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-bob:hover .hvr-icon, .hvr-icon-bob:focus .hvr-icon, .hvr-icon-bob:active .hvr-icon { -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; animation-name: hvr-icon-bob-float, hvr-icon-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Icon Hang */ @-webkit-keyframes hvr-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @-webkit-keyframes hvr-icon-hang-sink { 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-hang-sink { 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } .hvr-icon-hang { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-hang .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-hang:hover .hvr-icon, .hvr-icon-hang:focus .hvr-icon, .hvr-icon-hang:active .hvr-icon { -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang; animation-name: hvr-icon-hang-sink, hvr-icon-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Icon Wobble Horizontal */ @-webkit-keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hvr-icon-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-wobble-horizontal .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-wobble-horizontal:hover .hvr-icon, .hvr-icon-wobble-horizontal:focus .hvr-icon, .hvr-icon-wobble-horizontal:active .hvr-icon { -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Wobble Vertical */ @-webkit-keyframes hvr-icon-wobble-vertical { 16.65% { -webkit-transform: translateY(6px); transform: translateY(6px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes hvr-icon-wobble-vertical { 16.65% { -webkit-transform: translateY(6px); transform: translateY(6px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .hvr-icon-wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-wobble-vertical .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-wobble-vertical:hover .hvr-icon, .hvr-icon-wobble-vertical:focus .hvr-icon, .hvr-icon-wobble-vertical:active .hvr-icon { -webkit-animation-name: hvr-icon-wobble-vertical; animation-name: hvr-icon-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Buzz */ @-webkit-keyframes hvr-icon-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes hvr-icon-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } .hvr-icon-buzz { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-buzz .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-buzz:hover .hvr-icon, .hvr-icon-buzz:focus .hvr-icon, .hvr-icon-buzz:active .hvr-icon { -webkit-animation-name: hvr-icon-buzz; animation-name: hvr-icon-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Icon Buzz Out */ @-webkit-keyframes hvr-icon-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-icon-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .hvr-icon-buzz-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-buzz-out .hvr-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-buzz-out:hover .hvr-icon, .hvr-icon-buzz-out:focus .hvr-icon, .hvr-icon-buzz-out:active .hvr-icon { -webkit-animation-name: hvr-icon-buzz-out; animation-name: hvr-icon-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* CURLS */ /* Curl Top Left */ .hvr-curl-top-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-top-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); /*For IE7-8-9*/ z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-top-left:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before { width: 25px; height: 25px; } /* Curl Top Right */ .hvr-curl-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-top-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-top-right:hover:before, .hvr-curl-top-right:focus:before, .hvr-curl-top-right:active:before { width: 25px; height: 25px; } /* Curl Bottom Right */ .hvr-curl-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-bottom-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before { width: 25px; height: 25px; } /* Curl Bottom Left */ .hvr-curl-bottom-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-bottom-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before { width: 25px; height: 25px; } /*============================ reset ============================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /*============================ base ============================*/ html { font-size: 62.5%; color: #000; } body { font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; background: #fff; line-height: 1; font-size: 16px; font-size: 1.6rem; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; text-size-adjust: 100%; } a { text-decoration: none; color: #2e2e2e; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } a:hover { -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } @media screen and (max-width: 768px) { a:hover { opacity: 1; filter: alpha(opacity=100); } } img { -webkit-backface-visibility: hidden; } table { border-collapse: separate; } section p { line-height: 2; } /*============================ grid - layout grid grid omega ============================*/ /*============================ layout ============================*/ .l-main { float: left; display: block; margin-right: 3.57869%; width: 65.47377%; padding-top: 40px; } .l-main:last-child { margin-right: 0; } @media screen and (max-width: 768px) { .l-main { float: left; display: block; margin-right: 3.57869%; width: 100%; padding-top: 0; } .l-main:last-child { margin-right: 0; } } .l-sidebar { float: left; display: block; margin-right: 3.57869%; width: 30.94754%; padding-top: 40px; } .l-sidebar:last-child { margin-right: 0; } @media screen and (max-width: 768px) { .l-sidebar { float: left; display: block; margin-right: 3.57869%; width: 100%; padding-top: 0; } .l-sidebar:last-child { margin-right: 0; } } .l-flipped .l-primary { float: right !important; } .l-flipped .l-secondary { float: left !important; } /*============================ grid ============================*/ .l-grid-container { width: 100%; height: auto; margin: 0 auto; } @media screen and (max-width: 768px) { .l-grid-container { width: 100%; } } .l-grid-wide { max-width: 1200px; margin-left: auto; margin-right: auto; } .l-grid-wide::after { clear: both; content: ""; display: table; } .l-grid { max-width: 960px; margin-left: auto; margin-right: auto; } .l-grid::after { clear: both; content: ""; display: table; } .l-grid-narrow { max-width: 768px; margin-left: auto; margin-right: auto; } .l-grid-narrow::after { clear: both; content: ""; display: table; } .l-grid-col1 { float: left; display: block; margin-right: 3.71965%; width: 4.92365%; } .l-grid-col1:last-child { margin-right: 0; } .l-grid-col1-5 { float: left; display: block; margin-right: 3.71965%; width: 9.24531%; } .l-grid-col1-5:last-child { margin-right: 0; } .l-grid-col2 { float: left; display: block; margin-right: 3.71965%; width: 13.56696%; } .l-grid-col2:last-child { margin-right: 0; } .l-grid-col2-5 { float: left; display: block; margin-right: 3.71965%; width: 17.88861%; } .l-grid-col2-5:last-child { margin-right: 0; } .l-grid-col3 { float: left; display: block; margin-right: 3.71965%; width: 22.21026%; } .l-grid-col3:last-child { margin-right: 0; } .l-grid-col3-5 { float: left; display: block; margin-right: 3.71965%; width: 26.53191%; } .l-grid-col3-5:last-child { margin-right: 0; } .l-grid-col4 { float: left; display: block; margin-right: 3.71965%; width: 30.85357%; } .l-grid-col4:last-child { margin-right: 0; } .l-grid-col4-5 { float: left; display: block; margin-right: 3.71965%; width: 35.17522%; } .l-grid-col4-5:last-child { margin-right: 0; } .l-grid-col5 { float: left; display: block; margin-right: 3.71965%; width: 39.49687%; } .l-grid-col5:last-child { margin-right: 0; } .l-grid-col5-5 { float: left; display: block; margin-right: 3.71965%; width: 43.81852%; } .l-grid-col5-5:last-child { margin-right: 0; } .l-grid-col6 { float: left; display: block; margin-right: 3.71965%; width: 48.14018%; } .l-grid-col6:last-child { margin-right: 0; } .l-grid-col6-5 { float: left; display: block; margin-right: 3.71965%; width: 52.46183%; } .l-grid-col6-5:last-child { margin-right: 0; } .l-grid-col7 { float: left; display: block; margin-right: 3.71965%; width: 56.78348%; } .l-grid-col7:last-child { margin-right: 0; } .l-grid-col7-5 { float: left; display: block; margin-right: 3.71965%; width: 61.10513%; } .l-grid-col7-5:last-child { margin-right: 0; } .l-grid-col8 { float: left; display: block; margin-right: 3.71965%; width: 65.42678%; } .l-grid-col8:last-child { margin-right: 0; } .l-grid-col8-5 { float: left; display: block; margin-right: 3.71965%; width: 69.74844%; } .l-grid-col8-5:last-child { margin-right: 0; } .l-grid-col9 { float: left; display: block; margin-right: 3.71965%; width: 74.07009%; } .l-grid-col9:last-child { margin-right: 0; } .l-grid-col9-5 { float: left; display: block; margin-right: 3.71965%; width: 78.39174%; } .l-grid-col9-5:last-child { margin-right: 0; } .l-grid-col10 { float: left; display: block; margin-right: 3.71965%; width: 82.71339%; } .l-grid-col10:last-child { margin-right: 0; } .l-grid-col10-5 { float: left; display: block; margin-right: 3.71965%; width: 87.03504%; } .l-grid-col10-5:last-child { margin-right: 0; } .l-grid-col11 { float: left; display: block; margin-right: 3.71965%; width: 91.3567%; } .l-grid-col11:last-child { margin-right: 0; } .l-grid-col11-5 { float: left; display: block; margin-right: 3.71965%; width: 95.67835%; } .l-grid-col11-5:last-child { margin-right: 0; } .l-grid-col12 { float: left; display: block; margin-right: 3.71965%; width: 100%; } .l-grid-col12:last-child { margin-right: 0; } @media screen and (max-width: 960px) { [class^="l-grid-col"] + [class^="l-grid-col"] { margin-top: 56px; } } @media screen and (max-width: 768px) { [class^="l-grid-col"] { float: left; display: block; margin-right: 3.71965%; width: 100%; } [class^="l-grid-col"]:last-child { margin-right: 0; } } /*============================ grid omega ============================*/ .l-grid-omega3 li { float: left; display: block; margin-right: 3.71965%; width: 30.85357%; padding-top: 32px; } .l-grid-omega3 li:last-child { margin-right: 0; } .l-grid-omega3 li:nth-child(3n) { margin-right: 0; } .l-grid-omega3 li:nth-child(3n+1) { clear: left; } @media screen and (max-width: 768px) { .l-grid-omega3 li { float: left; display: block; margin-right: 3.71965%; width: 48.14018%; } .l-grid-omega3 li:last-child { margin-right: 0; } .l-grid-omega3 li:nth-child(3n) { margin-right: 3.71965%; } .l-grid-omega3 li:nth-child(3n+1) { clear: none; } .l-grid-omega3 li:nth-child(2n) { margin-right: 0; } .l-grid-omega3 li:nth-child(2n+1) { clear: left; } } .l-grid-omega4 li { float: left; display: block; margin-right: 3.71965%; width: 22.21026%; padding-top: 32px; } .l-grid-omega4 li:last-child { margin-right: 0; } .l-grid-omega4 li:nth-child(4n) { margin-right: 0; } .l-grid-omega4 li:nth-child(4n+1) { clear: left; } @media screen and (max-width: 768px) { .l-grid-omega4 li { float: left; display: block; margin-right: 3.71965%; width: 48.14018%; } .l-grid-omega4 li:last-child { margin-right: 0; } .l-grid-omega4 li:nth-child(3n) { margin-right: 3.71965%; } .l-grid-omega4 li:nth-child(3n+1) { clear: none; } .l-grid-omega4 li:nth-child(2n) { margin-right: 0; } .l-grid-omega4 li:nth-child(2n+1) { clear: left; } } .l-grid-omega5 li { float: left; display: block; margin-right: 3.71965%; width: 17.02428%; padding-top: 32px; } .l-grid-omega5 li:last-child { margin-right: 0; } .l-grid-omega5 li:nth-child(5n) { margin-right: 0; } .l-grid-omega5 li:nth-child(5n+1) { clear: left; } @media screen and (max-width: 768px) { .l-grid-omega5 li { float: left; display: block; margin-right: 3.71965%; width: 48.14018%; } .l-grid-omega5 li:last-child { margin-right: 0; } .l-grid-omega5 li:nth-child(3n) { margin-right: 3.71965%; } .l-grid-omega5 li:nth-child(3n+1) { clear: none; } .l-grid-omega5 li:nth-child(2n) { margin-right: 0; } .l-grid-omega5 li:nth-child(2n+1) { clear: left; } } /*============================ l(ayout)-header - 横 ============================*/ /*============================ 横 ============================*/ .l-header { max-width: 100%; margin-left: auto; margin-right: auto; } .l-header::after { clear: both; content: ""; display: table; } .l-header .logo { float: left; display: block; margin-right: 3.71965%; width: 13.56696%; } .l-header .logo:last-child { margin-right: 0; } .l-header .gnav { float: left; display: block; margin-right: 3.71965%; width: 82.71339%; } .l-header .gnav:last-child { margin-right: 0; } .l-header .gnav:nth-child(2n) { margin-right: 0; } .l-header .gnav:nth-child(2n+1) { clear: left; } @media screen and (max-width: 1100px) { .l-header .gnav { display: none; } } /*============================ l(ayout)-footer - footer ============================*/ /*============================ footer ============================*/ .l-footer-primary { max-width: 100%; margin-left: auto; margin-right: auto; } .l-footer-primary::after { clear: both; content: ""; display: table; } @media screen and (max-width: 1100px) { .l-footer-primary { padding: 32px 16px; } } @media screen and (max-width: 960px) { .l-footer-primary { padding: 0; } } .l-footer-primary .footer-info { float: left; display: block; margin-right: 3.71965%; width: 30.85357%; } .l-footer-primary .footer-info:last-child { margin-right: 0; } @media screen and (max-width: 1100px) { .l-footer-primary .footer-info { float: left; display: block; margin-right: 3.71965%; width: 30.85357%; } .l-footer-primary .footer-info:last-child { margin-right: 0; } } @media screen and (max-width: 960px) { .l-footer-primary .footer-info { float: left; display: block; margin-right: 3.71965%; width: 100%; } .l-footer-primary .footer-info:last-child { margin-right: 0; } } .l-footer-primary .footer-nav-primary, .l-footer-primary .footer-nav-secondary { float: left; display: block; margin-right: 3.71965%; width: 65.42678%; float: right; } .l-footer-primary .footer-nav-primary:last-child, .l-footer-primary .footer-nav-secondary:last-child { margin-right: 0; } @media screen and (max-width: 1100px) { .l-footer-primary .footer-nav-primary, .l-footer-primary .footer-nav-secondary { float: left; display: block; margin-right: 3.71965%; width: 65.42678%; } .l-footer-primary .footer-nav-primary:last-child, .l-footer-primary .footer-nav-secondary:last-child { margin-right: 0; } } @media screen and (max-width: 960px) { .l-footer-primary .footer-nav-primary, .l-footer-primary .footer-nav-secondary { float: left; display: block; margin-right: 3.71965%; width: 100%; } .l-footer-primary .footer-nav-primary:last-child, .l-footer-primary .footer-nav-secondary:last-child { margin-right: 0; } } .footer-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; } .footer-wrap::after { clear: both; content: ""; display: table; } .mdl-topics__primary { max-width: 1024px; margin-left: auto; margin-right: auto; margin-top: 48px; margin-bottom: 76px; padding: 20px; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.15), 0 2px 10px 0 rgba(100, 100, 100, 0.15); z-index: 1; } .mdl-topics__primary::after { clear: both; content: ""; display: table; } .mdl-topics__primary table { float: left; display: block; margin-right: 3.71965%; width: 65.42678%; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; } .mdl-topics__primary table:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .mdl-topics__primary table { float: left; display: block; margin-right: 3.71965%; width: 100%; border-left: none; } .mdl-topics__primary table:last-child { margin-right: 0; } .mdl-topics__primary table + p { padding-bottom: 16px; text-align: center; } } @media screen and (max-width: 960px) { .mdl-topics__primary th, .mdl-topics__primary td { display: block; } } .mdl-topics__primary th { padding-top: 13px; padding-left: 40px; font-size: 14px; vertical-align: top; text-align: left; } @media screen and (max-width: 960px) { .mdl-topics__primary th { padding-top: 4px; padding-left: 0; text-align: left; } } .mdl-topics__primary td { padding-top: 7px; padding-left: 20px; vertical-align: top; font-size: 15px; line-height: 1.8; } .mdl-topics__primary td a { font-weight: 700; } .mdl-topics__primary td a:hover { opacity: .4; } @media screen and (max-width: 960px) { .mdl-topics__primary td { padding: 8px 0 0; font-size: 14px; } } .mdl-topics__primary .days { font-size: 12px; } @media screen and (max-width: 1100px) { .mdl-topics__primary { margin-left: 16px; margin-right: 16px; } } @media screen and (max-width: 960px) { .mdl-topics__primary { margin-top: 16px; margin-bottom: 48px; padding: 20px 24px; } } /*============================ contents - サービス・事業内容 ============================*/ @media screen and (max-width: 960px) { .mdl-service { padding: 20px 0 0; } } .mdl-service-primary { position: relative; height: 510px; padding: 64px 0; margin-bottom: 120px; } @media screen and (max-width: 960px) { .mdl-service-primary { height: auto; padding: 8px 0; margin-top: 30px; margin-bottom: 0; } .mdl-service-primary + .mdl-service-primary { margin-top: 0; margin-bottom: 32px; } } .mdl-service-primary:after { width: 80%; height: 511px; position: absolute; top: 0; right: 0; content: ""; background-color: rgba(185, 185, 192, 0.1); } @media screen and (max-width: 960px) { .mdl-service-primary:after { width: 82%; height: 220px; top: 30px; } } .mdl-service-primary.l-flipped:after { left: 0; right: inherit; } .mdl-service-primary__wrap { max-width: 1200px; margin-left: auto; margin-right: auto; } .mdl-service-primary__wrap::after { clear: both; content: ""; display: table; } @media screen and (max-width: 960px) { .mdl-service-primary__wrap { padding: 48px 24px 24px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .mdl-service-primary__explain { float: left; display: block; margin-right: 3.71965%; width: 48.14018%; padding-top: 64px; position: relative; z-index: 10; } .mdl-service-primary__explain:last-child { margin-right: 0; } .mdl-service-primary__explain h4 { font-size: 32px; font-weight: 700; line-height: 1.4; } .mdl-service-primary__explain p { padding: 40px 0; line-height: 1.8; } .mdl-service-primary__explain.l-primary { padding-left: 52px; } @media screen and (max-width: 960px) { .mdl-service-primary__explain { float: left; display: block; margin-right: 3.71965%; width: 100%; margin: 0 auto; -webkit-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; padding-top: 24px; } .mdl-service-primary__explain:last-child { margin-right: 0; } .mdl-service-primary__explain h4 { font-size: 22px; font-weight: 700; } .mdl-service-primary__explain p { padding: 16px 0; font-size: 15px; } .mdl-service-primary__explain p + p { padding: 8px 0 0 0; line-height: 1; text-align: center; } .mdl-service-primary__explain.l-primary { padding-left: 0; } } .mdl-service-primary__img { float: left; display: block; margin-right: 3.71965%; width: 48.14018%; position: relative; z-index: 1000; } .mdl-service-primary__img:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .mdl-service-primary__img { float: left; display: block; margin-right: 3.71965%; width: 100%; -webkit-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; text-align: center; z-index: 1; } .mdl-service-primary__img:last-child { margin-right: 0; } .mdl-service-primary__img img { max-width: 100%; height: auto; } } /*============================ tag - ============================*/ .mdl-tag { position: relative; z-index: 1; } @media screen and (max-width: 960px) { .mdl-tag { z-index: 0; } } .mdl-tag a:hover { opacity: .4; } .mdl-tag.primary { margin-bottom: 32px; overflow: hidden; text-align: center; } .mdl-tag.primary li { display: inline-block; margin: 0 8px 16px; padding: 8px 8px 6px; font-size: 14px; line-height: 1; background: #fff; border-radius: 16px; } @media screen and (max-width: 960px) { .mdl-tag.primary { margin-bottom: 16px; } } .mdl-tag.secondary { padding-top: 16px; overflow: hidden; } .mdl-tag.secondary li { display: inline-block; margin: 0 4px 8px 0; padding: 8px 8px 6px; font-size: 12px; line-height: 1; background-color: rgba(185, 185, 192, 0.1); border-radius: 16px; } @media screen and (max-width: 960px) { .mdl-tag.secondary { text-align: left; } .mdl-tag.secondary li { padding: 6px 8px 6px; } } /*============================ contact-secondary - ============================*/ .mdl-contact.primary { padding: 68px 0 68px 0; text-align: center; background: #C9A063; } .mdl-contact.primary h3 { font-size: 22px; font-weight: 700; color: #fff; } .mdl-contact.primary h3 br { display: none; } .mdl-contact.primary nav { max-width: 768px; margin-left: auto; margin-right: auto; padding-top: 40px; text-align: center; } .mdl-contact.primary nav::after { clear: both; content: ""; display: table; } .mdl-contact.primary .btn-contact { width: 360px; height: 72px; display: inline-block; position: relative; padding: 28px 0 0; font-size: 16px; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; font-weight: 600; color: #C9A063; background: #fff; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } .mdl-contact.primary .btn-contact i { padding-right: 4px; } .mdl-contact.primary .btn-contact:after { font-weight: 600; position: absolute; top: 28px; right: 16px; font-family: 'Font Awesome 5 Free'; font-size: 16px; content: "\f105"; } .mdl-contact.primary .btn-tel { float: left; display: block; margin-right: 4.63188%; width: 47.68406%; height: 72px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: #C9A063; letter-spacing: 1px; background: #fff; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } .mdl-contact.primary .btn-tel:last-child { margin-right: 0; } .mdl-contact.primary .btn-tel:before { padding-right: 3px; font-size: 13px; font-weight: 600; font-family: 'Font Awesome 5 Free'; content: "\f095"; vertical-align: 1px; } .mdl-contact.primary .btn-tel span { display: block; padding-top: 7px; padding-left: 16px; font-size: 12px; font-weight: 500; } .mdl-contact.primary .btn-tel em { display: inline-block; font-size: 15px; } .mdl-contact.primary .btn-tel.bg { padding: 16px 40px; text-align: center; color: #fff; background: #C9A063; } @media screen and (max-width: 960px) { .mdl-contact.primary .btn-tel { margin: 12px 0 0; } } @media screen and (max-width: 768px) { .mdl-contact.primary .btn-tel { font-size: 2rem; } .mdl-contact.primary .btn-tel:before { font-size: 1.4rem; vertical-align: 1px; } } .mdl-contact.primary p { padding-top: 32px; font-size: 16px; font-weight: 600; color: #fff; } @media screen and (max-width: 960px) { .mdl-contact.primary { margin-top: 0; padding: 40px 24px; } .mdl-contact.primary h3 { margin-top: 0; margin-bottom: 0; font-size: 18px; line-height: 1.6; } .mdl-contact.primary h3 br { display: block; } .mdl-contact.primary nav { padding-top: 0; } .mdl-contact.primary .btn-contact { float: left; display: block; margin-right: 4.63188%; width: 100%; height: 67px; padding: 26px 0; margin-top: 24px; font-size: 14px; font-weight: 700; } .mdl-contact.primary .btn-contact:last-child { margin-right: 0; } .mdl-contact.primary .btn-contact:after { top: 28px; font-size: 13px; } .mdl-contact.primary .btn-tel { float: left; display: block; margin-right: 4.63188%; width: 100%; height: auto; padding: 16px 0; font-size: 16px; } .mdl-contact.primary .btn-tel:last-child { margin-right: 0; } .mdl-contact.primary .btn-tel:after { top: 28px; font-size: 13px; } .mdl-contact.primary .btn-tel:before { font-size: 12px; } .mdl-contact.primary p { padding-top: 32px; } } .mdl-contact.secondary { padding: 68px 0 68px 0; text-align: center; background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/mdl-contact-bg.png); background-repeat: no-repeat; background-position: center center; } .mdl-contact.secondary h3 { font-size: 22px; font-weight: 700; color: #fff; } .mdl-contact.secondary h3 br { display: none; } .mdl-contact.secondary nav { max-width: 768px; margin-left: auto; margin-right: auto; padding-top: 40px; } .mdl-contact.secondary nav::after { clear: both; content: ""; display: table; } .mdl-contact.secondary .btn-contact { float: left; display: block; margin-right: 4.63188%; width: 47.68406%; height: 72px; position: relative; padding: 28px 0 0; font-size: 16px; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; font-weight: 600; color: #C9A063; background: #fff; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } .mdl-contact.secondary .btn-contact:last-child { margin-right: 0; } .mdl-contact.secondary .btn-contact i { padding-right: 4px; } .mdl-contact.secondary .btn-contact:hover { color: #fff; background: #C9A063; } .mdl-contact.secondary .btn-contact:after { font-weight: 600; position: absolute; top: 28px; right: 16px; font-family: 'Font Awesome 5 Free'; font-size: 16px; content: "\f105"; } .mdl-contact.secondary .btn-tel { float: left; display: block; margin-right: 4.63188%; width: 47.68406%; height: 72px; position: relative; padding: 18px 0 0; font-size: 17px; font-weight: 600; color: #C9A063; letter-spacing: 1px; background: #fff; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } .mdl-contact.secondary .btn-tel:last-child { margin-right: 0; } .mdl-contact.secondary .btn-tel:before { padding-right: 3px; font-size: 13px; font-weight: 600; font-family: 'Font Awesome 5 Free'; content: "\f095"; vertical-align: 1px; } .mdl-contact.secondary .btn-tel span { display: block; padding-top: 7px; padding-left: 16px; font-size: 12px; font-weight: 500; } .mdl-contact.secondary .btn-tel em { display: inline-block; font-size: 15px; } .mdl-contact.secondary .btn-tel.bg { padding: 16px 40px; text-align: center; color: #fff; background: #C9A063; } @media screen and (max-width: 768px) { .mdl-contact.secondary .btn-tel { font-size: 2rem; } .mdl-contact.secondary .btn-tel:before { font-size: 1.4rem; vertical-align: 1px; } } .mdl-contact.secondary p { padding-top: 32px; font-size: 16px; font-weight: 600; color: #fff; } @media screen and (max-width: 960px) { .mdl-contact.secondary { margin-top: 0; padding: 40px 24px; } .mdl-contact.secondary h3 { display: none; } .mdl-contact.secondary nav { padding-top: 0; } .mdl-contact.secondary .btn-contact { float: left; display: block; margin-right: 4.63188%; width: 100%; height: 67px; padding: 26px 0; margin-bottom: 24px; font-size: 14px; font-weight: 700; } .mdl-contact.secondary .btn-contact:last-child { margin-right: 0; } .mdl-contact.secondary .btn-contact:after { top: 28px; font-size: 13px; } .mdl-contact.secondary .btn-tel { float: left; display: block; margin-right: 4.63188%; width: 100%; height: auto; padding: 16px 0; font-size: 16px; } .mdl-contact.secondary .btn-tel:last-child { margin-right: 0; } .mdl-contact.secondary .btn-tel:after { top: 28px; font-size: 13px; } .mdl-contact.secondary .btn-tel:before { font-size: 12px; } .mdl-contact.secondary p { padding-top: 32px; } } /*============================ article - ============================*/ .mdl-article img { display: block; max-width: 100%; height: auto; } @media screen and (max-width: 960px) { .mdl-article img { margin: 0 auto; } } .mdl-article.primary { padding-bottom: 64px; overflow: hidden; } @media screen and (max-width: 960px) { .mdl-article.primary { padding: 24px; } } .mdl-article.primary li { float: left; display: block; margin-right: 4.63188%; width: 30.24541%; } .mdl-article.primary li:last-child { margin-right: 0; } .mdl-article.primary li:nth-child(3n) { margin-right: 0; } .mdl-article.primary li:nth-child(3n+1) { clear: left; } @media screen and (max-width: 960px) { .mdl-article.primary li { float: left; display: block; margin-right: 4.63188%; width: 100%; margin-bottom: 24px; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.1), 0 2px 10px 0 rgba(100, 100, 100, 0.1); } .mdl-article.primary li:last-child { margin-right: 0; } .mdl-article.primary li:nth-child(3n) { margin-right: 4.63188%; } .mdl-article.primary li:nth-child(3n+1) { clear: none; } } .mdl-article.primary a { display: block; height: 251px; color: #444444; background: #fff; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.1), 0 2px 10px 0 rgba(100, 100, 100, 0.1); } .mdl-article.primary a:hover { opacity: .6; } @media screen and (max-width: 960px) { .mdl-article.primary a { height: auto; } } .mdl-article.primary span { display: block; padding: 20px; font-weight: 700; font-size: 15px; line-height: 1.7; } .mdl-article.secondary { padding-bottom: 64px; overflow: hidden; } @media screen and (max-width: 960px) { .mdl-article.secondary { padding: 24px; } } .mdl-article.secondary li { float: left; display: block; margin-right: 4.63188%; width: 30.24541%; } .mdl-article.secondary li:last-child { margin-right: 0; } .mdl-article.secondary li:nth-child(3n) { margin-right: 0; } .mdl-article.secondary li:nth-child(3n+1) { clear: left; } @media screen and (max-width: 960px) { .mdl-article.secondary li { float: left; display: block; margin-right: 4.63188%; width: 100%; margin-bottom: 24px; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.1), 0 2px 10px 0 rgba(100, 100, 100, 0.1); } .mdl-article.secondary li:last-child { margin-right: 0; } .mdl-article.secondary li:nth-child(3n) { margin-right: 4.63188%; } .mdl-article.secondary li:nth-child(3n+1) { clear: none; } } .mdl-article.secondary.columnn2 li { float: left; display: block; margin-right: 4.63188%; width: 45.06826%; } .mdl-article.secondary.columnn2 li:last-child { margin-right: 0; } .mdl-article.secondary.columnn2 li:nth-child(3n) { margin-right: 4.63188%; } .mdl-article.secondary.columnn2 li:nth-child(3n+1) { clear: none; } .mdl-article.secondary.columnn2 li:nth-child(2n) { margin-right: 0; } .mdl-article.secondary.columnn2 li:nth-child(2n+1) { clear: left; } @media screen and (max-width: 960px) { .mdl-article.secondary.columnn2 li { float: left; display: block; margin-right: 4.63188%; width: 100%; margin-bottom: 0; box-shadow: none; } .mdl-article.secondary.columnn2 li:last-child { margin-right: 0; } .mdl-article.secondary.columnn2 li:nth-child(2n) { margin-right: 4.63188%; } .mdl-article.secondary.columnn2 li:nth-child(2n+1) { clear: none; } } .mdl-article.secondary.columnn2 a { height: 340px; margin-bottom: 32px; } .mdl-article.secondary a { display: block; position: relative; height: 288px; color: #444444; background: #fff; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.1), 0 2px 10px 0 rgba(100, 100, 100, 0.1); } .mdl-article.secondary a:hover { opacity: .6; } @media screen and (max-width: 960px) { .mdl-article.secondary a { height: 320px; } } .mdl-article.secondary h4 { padding: 20px; font-weight: 700; font-size: 15px; line-height: 1.7; } .mdl-article.secondary span { display: block; position: absolute; right: 20px; bottom: 20px; font-size: 12px; text-align: right; } .mdl-article.tertiary > li:first-child a { border-top: 1px solid #CCCCCC; } .mdl-article.tertiary > li a { display: block; overflow: hidden; padding: 32px 0; border-bottom: 1px solid #CCCCCC; } .mdl-article.tertiary > li a:hover { opacity: .4; } @media screen and (max-width: 960px) { .mdl-article.tertiary > li a { padding: 16px; } } .mdl-article.tertiary .article-thumunail { float: left; display: block; margin-right: 4.63188%; width: 28.50155%; margin-right: 8px; } .mdl-article.tertiary .article-thumunail:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .mdl-article.tertiary .article-thumunail { margin-right: 3.71965%; } } .mdl-article.tertiary .article-title { float: left; display: block; margin-right: 4.63188%; width: 66.86657%; } .mdl-article.tertiary .article-title:last-child { margin-right: 0; } .mdl-article.tertiary .article-title h3 { padding-bottom: 18px; font-size: 20px; font-weight: 700; line-height: 1.8; } .mdl-article.tertiary .article-title span { display: block; padding-bottom: 14px; font-size: 12px; color: #444444; } @media screen and (max-width: 960px) { .mdl-article.tertiary .article-title h3 { padding-bottom: 0; font-size: 14px; } .mdl-article.tertiary .article-title .mdl-tag { display: none; } .mdl-article.tertiary .article-title span { display: block; padding-bottom: 10px; font-size: 12px; } } .mdl-article.quaternary a { display: block; padding: 20px 0; overflow: hidden; border-bottom: 1px solid #CCCCCC; } .mdl-article.quaternary a:hover { opacity: .4; } @media screen and (max-width: 960px) { .mdl-article.quaternary a { padding: 16px; } } .mdl-article.quaternary .article-thumunail { float: left; display: block; margin-right: 4.63188%; width: 38.96474%; margin-right: 8px; } .mdl-article.quaternary .article-thumunail:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .mdl-article.quaternary .article-thumunail { float: left; display: block; margin-right: 4.63188%; width: 28.50155%; } .mdl-article.quaternary .article-thumunail:last-child { margin-right: 0; } } .mdl-article.quaternary .article-title { float: left; display: block; margin-right: 4.63188%; width: 56.40338%; line-height: 1.8; } .mdl-article.quaternary .article-title:last-child { margin-right: 0; } .mdl-article.quaternary .article-title h3 { font-weight: 700; font-size: 14px; } .mdl-article.quaternary .article-title span { display: block; padding-bottom: 8px; font-size: 12px; color: #444444; line-height: 1; } @media screen and (max-width: 960px) { .mdl-article.quaternary .article-title { float: left; display: block; margin-right: 4.63188%; width: 66.86657%; text-align: left; } .mdl-article.quaternary .article-title:last-child { margin-right: 0; } .mdl-article.quaternary .article-title span { padding-bottom: 10px; } } .mdl-article.quinary li { float: left; display: block; margin-right: 4.63188%; width: 47.68406%; padding-left: 0; } .mdl-article.quinary li:last-child { margin-right: 0; } .mdl-article.quinary li:nth-child(2n) { margin-right: 0; } .mdl-article.quinary li:nth-child(2n+1) { clear: left; } .mdl-article.quinary li:before { display: none; } @media screen and (max-width: 960px) { .mdl-article.quinary li { float: left; display: block; margin-right: 4.63188%; width: 100%; } .mdl-article.quinary li:last-child { margin-right: 0; } } .mdl-article.quinary a { display: block; padding: 20px 0; overflow: hidden; border-bottom: 1px solid #CCCCCC; } .mdl-article.quinary .article-thumunail { float: left; display: block; margin-right: 4.63188%; width: 38.96474%; } .mdl-article.quinary .article-thumunail:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .mdl-article.quinary .article-thumunail { float: left; display: block; margin-right: 4.63188%; width: 28.50155%; } .mdl-article.quinary .article-thumunail:last-child { margin-right: 0; } } .mdl-article.quinary .article-title { float: left; display: block; margin-right: 4.63188%; width: 56.40338%; line-height: 1.8; color: #000; } .mdl-article.quinary .article-title:last-child { margin-right: 0; } .mdl-article.quinary .article-title h3 { font-size: 14px !important; } @media screen and (max-width: 960px) { .mdl-article.quinary .article-title { float: left; display: block; margin-right: 4.63188%; width: 66.86657%; text-align: left; } .mdl-article.quinary .article-title:last-child { margin-right: 0; } .mdl-article.quinary .article-title h3 { font-weight: 700; } } /*============================ slide1 画面100% 横固定 横スクロール jquery.bxslider.min.jsの overflow:hiddenを非表示に ============================*/ .mdl-slider-primary { position: relative; overflow-x: hidden; } .mdl-slider-primary ul { position: relative; } .mdl-slider-primary li { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } @media screen and (max-width: 768px) { .mdl-slider-primary li { height: auto; } } .mdl-slider-primary .slider-copy { width: 500px; position: absolute; top: 24%; left: 50%; margin-left: -250px; text-align: center; line-height: 1.4; } @media screen and (max-width: 768px) { .mdl-slider-primary .slider-copy { width: 100%; top: 20%; left: 0; padding: 0 16px; margin-left: 0; } } .mdl-slider-primary .h-title { font-size: 40px; font-size: 4rem; font-weight: 700; } @media screen and (max-width: 768px) { .mdl-slider-primary .h-title { font-size: 18px; font-size: 1.8rem; } } .mdl-slider-primary p { padding: 16px; } @media screen and (max-width: 768px) { .mdl-slider-primary p { display: none; } .mdl-slider-primary p + p { display: block; } } /*============================ slider2 - ============================*/ .mdl-slider-secondary { position: relative; overflow: hidden; } .mdl-slider-secondary .slider-img1 { background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/slide-img.png); } .mdl-slider-secondary li { width: 100%; height: 530px; background-repeat: no-repeat; background-position: center center; background-size: cover; } @media screen and (max-width: 768px) { .mdl-slider-secondary li { height: 200px; } } .mdl-slider-secondary .slider-copy-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } @media screen and (max-width: 768px) { .mdl-slider-secondary .slider-copy-wrap { position: relative; } } .mdl-slider-secondary .slider-copy { max-width: 960px; margin-left: auto; margin-right: auto; padding-top: 88px; } .mdl-slider-secondary .slider-copy::after { clear: both; content: ""; display: table; } @media screen and (max-width: 768px) { .mdl-slider-secondary .slider-copy { padding: 24px; } } .mdl-slider-secondary .h-title { font-size: 32px; font-weight: 700; color: #fff; letter-spacing: 2px; line-height: 1.8; } @media screen and (max-width: 768px) { .mdl-slider-secondary .h-title { font-size: 18px; color: #2E2E2E; } } .mdl-slider-secondary p { text-align: left; } @media screen and (max-width: 768px) { .mdl-slider-secondary p { text-align: center; } } .mdl-slider-secondary .btn { margin-top: 50px; } @media screen and (max-width: 768px) { .mdl-slider-secondary .btn { margin-top: 16px; } } /*============================ slider3 - ============================*/ /*============================ slide3 イメージが右で、コピーが左 jquery.bxslider.min.jsの overflow:hiddenを非表示に ============================*/ .mdl-slider-tertiary { max-width: 100%; margin-left: auto; margin-right: auto; position: relative; } .mdl-slider-tertiary::after { clear: both; content: ""; display: table; } .mdl-slider-tertiary .slider-img00 { background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/slide-img.png); } .mdl-slider-tertiary .slider-img01 { background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/slide-img.png); } .mdl-slider-tertiary .slider-img02 { background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/slide-img.png); } .mdl-slider-tertiary .slider-copy { width: 480px; padding: 32px; position: absolute; top: 180px; left: 100px; font-family: 'Open Sans'; } @media screen and (max-width: 960px) { .mdl-slider-tertiary .slider-copy { width: auto; top: 100px; left: 32px; background: none; } } @media screen and (max-width: 768px) { .mdl-slider-tertiary .slider-copy { position: relative; top: 24px; left: 0; padding: 24px; } } .mdl-slider-tertiary .h-title { font-size: 34px; font-weight: 500; color: #000; line-height: 1.7; } @media screen and (max-width: 768px) { .mdl-slider-tertiary .h-title { font-size: 18px; color: #000; } } .mdl-slider-tertiary .slider-explain { padding-top: 16px; padding-bottom: 48px; font-size: 17px; font-weight: 500; line-height: 1.8; } .mdl-slider-tertiary .slider-explain + p { position: absolute; bottom: -40px; } @media screen and (max-width: 768px) { .mdl-slider-tertiary .slider-explain { margin-bottom: 0px; padding-top: 16px; padding-bottom: 20px; font-size: 16px; } .mdl-slider-tertiary .slider-explain + p { position: relative; bottom: 0; padding-bottom: 32px; text-align: center; } } .mdl-slider-tertiary .slider { float: left; display: block; margin-right: 4.63188%; width: 73.84203%; float: right; margin-right: 0; } .mdl-slider-tertiary .slider:last-child { margin-right: 0; } @media screen and (max-width: 1280px) { .mdl-slider-tertiary .slider { float: left; display: block; margin-right: 4.63188%; width: 73.84203%; float: right; margin-right: 0; } .mdl-slider-tertiary .slider:last-child { margin-right: 0; } } @media screen and (max-width: 960px) { .mdl-slider-tertiary .slider { float: left; display: block; margin-right: 4.63188%; width: 100%; } .mdl-slider-tertiary .slider:last-child { margin-right: 0; } } .mdl-slider-tertiary li { width: 100%; height: 680px; background-repeat: no-repeat; background-position: center center; background-size: cover; } @media screen and (max-width: 960px) { .mdl-slider-tertiary li { height: 530px; } } @media screen and (max-width: 768px) { .mdl-slider-tertiary li { height: 200px; } } /*============================ slide4 イメージが右で、コピーが左 jquery.bxslider.min.jsの overflow:hiddenを非表示に ============================*/ .mdl-slider-quaternary { max-width: 100%; margin-left: auto; margin-right: auto; position: relative; } .mdl-slider-quaternary::after { clear: both; content: ""; display: table; } .mdl-slider-quaternary .slider-img00 { background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/slide-img.png); } .mdl-slider-quaternary .slider-img01 { background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/slide-img.png); } .mdl-slider-quaternary .slider-img02 { background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/slide-img.png); } .mdl-slider-quaternary .slider-copy { width: 480px; padding: 32px; position: absolute; top: 180px; left: 100px; font-family: 'Open Sans'; background: #fff; } @media screen and (max-width: 960px) { .mdl-slider-quaternary .slider-copy { width: auto; top: 100px; left: 32px; background: none; } } @media screen and (max-width: 768px) { .mdl-slider-quaternary .slider-copy { position: relative; top: 24px; left: 0; padding: 24px; } } .mdl-slider-quaternary .h-title { font-size: 34px; font-weight: 600; color: #000; line-height: 1.7; } @media screen and (max-width: 768px) { .mdl-slider-quaternary .h-title { font-size: 18px; color: #000; } } .mdl-slider-quaternary .slider-explain { padding-top: 16px; padding-bottom: 48px; font-size: 17px; font-weight: 500; line-height: 1.8; } .mdl-slider-quaternary .slider-explain + p { position: absolute; bottom: -40px; } @media screen and (max-width: 768px) { .mdl-slider-quaternary .slider-explain { margin-bottom: 0px; padding-top: 16px; padding-bottom: 20px; font-size: 16px; } .mdl-slider-quaternary .slider-explain + p { position: relative; bottom: 0; padding-bottom: 32px; text-align: center; } } .mdl-slider-quaternary .slider { float: left; display: block; margin-right: 4.63188%; width: 73.84203%; float: right; margin-right: 0; } .mdl-slider-quaternary .slider:last-child { margin-right: 0; } @media screen and (max-width: 1280px) { .mdl-slider-quaternary .slider { float: left; display: block; margin-right: 4.63188%; width: 73.84203%; float: right; margin-right: 0; } .mdl-slider-quaternary .slider:last-child { margin-right: 0; } } @media screen and (max-width: 960px) { .mdl-slider-quaternary .slider { float: left; display: block; margin-right: 4.63188%; width: 100%; } .mdl-slider-quaternary .slider:last-child { margin-right: 0; } } .mdl-slider-quaternary li { width: 100%; height: 680px; background-repeat: no-repeat; background-position: center center; background-size: cover; } @media screen and (max-width: 960px) { .mdl-slider-quaternary li { height: 530px; } } @media screen and (max-width: 768px) { .mdl-slider-quaternary li { height: 200px; } } /*================================ header parts - logo ================================*/ header { position: relative; transition: background-color 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease, -webkit-box-shadow 0.5s ease; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); z-index: 1; } .logo { padding-top: 10px; padding-left: 20px; } .logo a:hover { opacity: .4; } @media screen and (max-width: 1100px) { .logo { height: 56px; padding-top: 12px; padding-left: 16px; padding-bottom: 2px; } .logo img { width: 120px; } } /*============================ footer-parts - ============================*/ footer { clear: both; color: #444444; background: #fff; border-top: 1px solid #E4E4E4; } .footer-wrap { padding: 44px 0; } @media screen and (max-width: 1100px) { .footer-wrap { padding: 44px 16px; } } @media screen and (max-width: 960px) { .footer-wrap { padding: 0; } } /*============================ #logo_address ============================*/ .footer-info { text-align: left; } @media screen and (max-width: 1100px) { .footer-info { padding-left: 1.6rem; } } @media screen and (max-width: 960px) { .footer-info { padding: 24px; } } .footer-info h3 { margin-top: -8px; padding-bottom: 2.4rem; } @media screen and (max-width: 960px) { .footer-info h3 { margin-top: 0; padding-bottom: 0; } } .footer-info address { line-height: 1.8; font-size: 1.4rem; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; font-weight: 300; } @media screen and (max-width: 960px) { .footer-info address { padding: 24px 0 0; font-size: 14px; border: none; } } .footer-info ul li { display: inline-block; padding: 12px 8px 8px 0; } .footer-info .btn-tel { color: #fff; } .footer-info p { padding-top: 20px; } /*============================ #nav ============================*/ [class^="footer-nav-"] a { font-size: 12px; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; } [class^="footer-nav-"] a:hover { opacity: .4; } @media screen and (max-width: 960px) { [class^="footer-nav-"] a { position: relative; display: block; padding: 18px 8px; font-size: 13px; line-height: 1.6; } [class^="footer-nav-"] a:after { font-weight: 600; position: absolute; right: .6rem; font-family: 'Font Awesome 5 Free'; color: #CCCCCC; content: "\f105"; } } .footer-nav { float: right; } @media screen and (max-width: 1100px) { .footer-nav { float: none; } } @media screen and (max-width: 960px) { .footer-nav { clear: both; float: none; padding: 24px; border-top: 1px solid #CCCCCC; } } .footer-nav ul { padding-right: 56px; padding-bottom: 16px; float: left; } .footer-nav ul:first-child li:nth-child(2) { font-size: 14px; color: #444444; } .footer-nav ul:last-child { padding-right: 0; } .footer-nav ul ul { float: none; padding-top: 24px; padding-right: 0; } .footer-nav ul ul a { font-size: 14px; color: #444444; } .footer-nav ul ul a:before { padding-right: 8px; content: "-"; } @media screen and (max-width: 960px) { .footer-nav ul { clear: both; padding-right: 0; padding-bottom: 0; text-align: left; } } .footer-nav li { padding-bottom: 20px; } .footer-nav a { font-weight: 500; font-size: 14px; color: #444444; } .footer-nav a:hover { opacity: .6; } /*============================ #copy ============================*/ .footer-copy { clear: both; font-size: 12px; color: #444444; text-align: right; } @media screen and (max-width: 960px) { .footer-copy { clear: both; padding: 32px 0; text-align: center; } } /*============================ contents - 会社案内・採用情報 ============================*/ .mdl-contents img { width: 100%; height: auto; display: block; } @media screen and (max-width: 960px) { .mdl-contents img { box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } } .mdl-contents__layer { width: 100%; position: absolute; top: 30%; } .mdl-contents.primary { position: relative; } .mdl-contents.primary .h-section { color: #fff; } .mdl-contents.primary .h-section:after { background: #fff; } .mdl-contents.primary .btn-text { color: #fff; } @media screen and (max-width: 960px) { .mdl-contents.primary { margin: 40px 6%; } .mdl-contents.primary .h-section { margin-bottom: 0; } .mdl-contents.primary .h-section:after { width: 0; height: 0; bottom: inherit; left: inherit; margin-left: 16px; position: absolute; top: 6px; right: 24px; font-family: 'Font Awesome 5 Free'; font-weight: 600; font-size: 13px; content: "\f105"; background: none; } .mdl-contents.primary .btn-text { display: none; } } /*============================ page内の最初の紹介文 ============================*/ /* 以下htmlで使用

*/ .contents-introduction { padding-top: 96px; padding-bottom: 96px; } .contents-introduction.top-none { padding-top: 0; } .contents-introduction.bottom-none { padding-bottom: 0; } @media screen and (max-width: 1100px) { .contents-introduction { padding-top: 64px; padding-bottom: 64px; } } @media screen and (max-width: 960px) { .contents-introduction { padding-left: 28px; padding-right: 28px; } } @media screen and (max-width: 768px) { .contents-introduction { padding-top: 40px; padding-bottom: 40px; } .contents-introduction.mb-bottom-none { padding-bottom: 0; } } .contents-introduction h2, .contents-introduction h3, .contents-introduction h4, .contents-introduction h5, .contents-introduction h6 { position: relative; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; letter-spacing: 2px; color: #C9A063; } .contents-introduction h2 span, .contents-introduction h3 span, .contents-introduction h4 span, .contents-introduction h5 span, .contents-introduction h6 span { display: block; padding-bottom: 16px; font-size: 32px; letter-spacing: 3px; color: #000; } @media screen and (max-width: 960px) { .contents-introduction h2 span, .contents-introduction h3 span, .contents-introduction h4 span, .contents-introduction h5 span, .contents-introduction h6 span { font-size: 20px; } } .contents-introduction h2.secondary span, .contents-introduction h3.secondary span, .contents-introduction h4.secondary span, .contents-introduction h5.secondary span, .contents-introduction h6.secondary span { font-size: 32px; } @media screen and (max-width: 960px) { .contents-introduction h2.secondary span, .contents-introduction h3.secondary span, .contents-introduction h4.secondary span, .contents-introduction h5.secondary span, .contents-introduction h6.secondary span { font-size: 20px; } } .contents-introduction h2.tertiary span, .contents-introduction h3.tertiary span, .contents-introduction h4.tertiary span, .contents-introduction h5.tertiary span, .contents-introduction h6.tertiary span { color: #C9A063; } .contents-introduction p { padding: 32px 0 0; text-align: center; line-height: 2.2; } @media screen and (max-width: 960px) { .contents-introduction p { padding-top: 12px; font-size: 14px; line-height: 2; text-align: left; } .contents-introduction p br { display: none; } } /*============================ 代表画像付き挨拶文 ============================*/ /* 以下htmlで使用

*/ .contents-message { background: rgba(201, 160, 99, 0.15); } .contents-message-wrap { max-width: 960px; margin-left: auto; margin-right: auto; padding-top: 80px; padding-bottom: 80px; } .contents-message-wrap::after { clear: both; content: ""; display: table; } .contents-message-wrap.top-none { padding-top: 0; } .contents-message-wrap.bottom-none { padding-bottom: 0; } @media screen and (max-width: 1100px) { .contents-message-wrap { padding-top: 64px; padding-bottom: 64px; } } @media screen and (max-width: 960px) { .contents-message-wrap { padding-left: 28px; padding-right: 28px; } } @media screen and (max-width: 768px) { .contents-message-wrap { padding-top: 40px; padding-bottom: 40px; } .contents-message-wrap.mb-bottom-none { padding-bottom: 0; } } .contents-message-img { float: left; display: block; margin-right: 0%; width: 35%; } .contents-message-img:last-child { margin-right: 0; } .contents-message-img img { max-width: 100%; height: auto; } @media screen and (max-width: 960px) { .contents-message-img { float: left; display: block; margin-right: 0%; width: 100%; text-align: center; } .contents-message-img:last-child { margin-right: 0; } } .contents-message-text { float: left; display: block; margin-right: 0%; width: 65%; } .contents-message-text:last-child { margin-right: 0; } .contents-message-text h2, .contents-message-text h3, .contents-message-text h4, .contents-message-text h5, .contents-message-text h6 { padding-bottom: 40px; font-size: 32px; color: #C9A063; } .contents-message-text p { font-size: 16px; line-height: 2; } @media screen and (max-width: 960px) { .contents-message-text { float: left; display: block; margin-right: 0%; width: 100%; } .contents-message-text:last-child { margin-right: 0; } .contents-message-text h2, .contents-message-text h3, .contents-message-text h4, .contents-message-text h5, .contents-message-text h6 { padding: 40px 16px 32px; font-size: 20px; color: #C9A063; text-align: center; } .contents-message-text p { font-size: 14px; } .contents-message-text br { display: none; } } /*============================ snsアイコン表示 contents-sns.phpで使用 ============================*/ .contents-sns { color: #fff; text-align: center; text-transform: uppercase; background: #C9A063; } .contents-sns h3 { font-size: 20px; font-weight: 500; letter-spacing: 2px; } .contents-sns nav { padding-top: 48px; } .contents-sns a { padding: 0 12px; color: #fff; } .contents-sns a:hover { opacity: .4; } .contents-sns i { font-size: 40px; } @media screen and (max-width: 960px) { .contents-sns nav { padding-top: 24px; } .contents-sns i { font-size: 37px; } } /*============================ tag一覧表示 sidebar.phpで使用 ============================*/ .contents-blog-tag { position: relative; padding-top: 8px; } .contents-blog-tag li { float: left; } .contents-blog-tag a { display: inline-block; padding: 12px 16px; margin-right: 16px; margin-top: 12px; font-size: 12px; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; color: #000; border: 1px solid #CCCCCC; border-radius: 50px; } .contents-blog-tag a:hover { background-color: #E4E4E4; } @media screen and (max-width: 960px) { .contents-blog-tag { margin-bottom: 24px; overflow: hidden; } .contents-blog-tag.single { margin-bottom: 0; } .contents-blog-tag.single li { margin: 0 16px 0 0; } .contents-blog-tag li { margin: 8px 0 0 16px; } .contents-blog-tag a { font-size: 14px; margin-right: 0; } } /*============================ list形式のコンテンツ パターン１ ============================*/ .contents-list-primary { padding-top: 96px; padding-bottom: 96px; background: #C9A063; } .contents-list-primary.top-none { padding-top: 0; } .contents-list-primary.bottom-none { padding-bottom: 0; } @media screen and (max-width: 1100px) { .contents-list-primary { padding-top: 64px; padding-bottom: 64px; } } @media screen and (max-width: 960px) { .contents-list-primary { padding-left: 28px; padding-right: 28px; } } @media screen and (max-width: 768px) { .contents-list-primary { padding-top: 40px; padding-bottom: 40px; } .contents-list-primary.mb-bottom-none { padding-bottom: 0; } } .contents-list-primary h2, .contents-list-primary h3, .contents-list-primary h4, .contents-list-primary h5, .contents-list-primary h6 { padding-bottom: 40px; font-size: 24px; color: #fff; text-align: center; } @media screen and (max-width: 960px) { .contents-list-primary h2, .contents-list-primary h3, .contents-list-primary h4, .contents-list-primary h5, .contents-list-primary h6 { font-size: 20px; } } .contents-list-primary li { float: left; display: block; margin-right: 1.61735%; width: 23.78699%; padding: 16px 0; margin-top: 24px; font-size: 18px; color: #C9A063; text-align: center; border-radius: 30px; background: #fff; } .contents-list-primary li:last-child { margin-right: 0; } .contents-list-primary li:nth-child(4n) { margin-right: 0; } .contents-list-primary li:nth-child(4n+1) { clear: left; } @media screen and (max-width: 960px) { .contents-list-primary li { float: left; display: block; margin-right: 1.61735%; width: 100%; margin-top: 0; margin-bottom: 16px; font-size: 14px; } .contents-list-primary li:last-child { margin-right: 0; } .contents-list-primary li:nth-child(4n) { margin-right: 1.61735%; } .contents-list-primary li:nth-child(4n+1) { clear: none; } } .contents-list-primary-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; } .contents-list-primary-wrap::after { clear: both; content: ""; display: table; } /*============================ list形式のコンテンツ パターン２ ============================*/ .contents-list-secondary { padding-top: 96px; padding-bottom: 96px; background-image: url(/web/20220429165539im_/https://cowry.jp/wp/wp-content/themes/cowry/lib/images/lp-image-2.png); background-repeat: no-repeat; background-size: cover; } .contents-list-secondary.top-none { padding-top: 0; } .contents-list-secondary.bottom-none { padding-bottom: 0; } @media screen and (max-width: 1100px) { .contents-list-secondary { padding-top: 64px; padding-bottom: 64px; } } @media screen and (max-width: 960px) { .contents-list-secondary { padding-left: 28px; padding-right: 28px; } } @media screen and (max-width: 768px) { .contents-list-secondary { padding-top: 40px; padding-bottom: 40px; } .contents-list-secondary.mb-bottom-none { padding-bottom: 0; } } .contents-list-secondary h2, .contents-list-secondary h3, .contents-list-secondary h4, .contents-list-secondary h5, .contents-list-secondary h6 { padding-bottom: 40px; font-size: 24px; color: #C9A063; text-align: center; } @media screen and (max-width: 960px) { .contents-list-secondary h2, .contents-list-secondary h3, .contents-list-secondary h4, .contents-list-secondary h5, .contents-list-secondary h6 { font-size: 20px; } } .contents-list-secondary li { float: left; display: block; margin-right: 1.61735%; width: 23.78699%; padding: 16px 0; margin-top: 24px; font-size: 18px; color: #000; text-align: center; background: #fff; border: 1px solid #C9A063; } .contents-list-secondary li:last-child { margin-right: 0; } .contents-list-secondary li:nth-child(4n) { margin-right: 0; } .contents-list-secondary li:nth-child(4n+1) { clear: left; } .contents-list-secondary li:last-child { float: left; display: block; margin-right: 1.61735%; width: 49.19133%; } .contents-list-secondary li:last-child:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .contents-list-secondary li { float: left; display: block; margin-right: 1.61735%; width: 100%; margin-top: 0; margin-bottom: 16px; font-size: 14px; } .contents-list-secondary li:last-child { margin-right: 0; } .contents-list-secondary li:nth-child(4n) { margin-right: 1.61735%; } .contents-list-secondary li:nth-child(4n+1) { clear: none; } .contents-list-secondary li:last-child { float: left; display: block; margin-right: 1.61735%; width: 100%; } .contents-list-secondary li:last-child:last-child { margin-right: 0; } } .contents-list-secondary-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; } .contents-list-secondary-wrap::after { clear: both; content: ""; display: table; } /*============================ 関連記事 ============================*/ .contents-article-relation tr { float: left; display: block; margin-right: 1.61735%; width: 49.19133%; display: block; } .contents-article-relation tr:last-child { margin-right: 0; } .contents-article-relation tr:nth-child(2n) { margin-right: 0; } .contents-article-relation tr:nth-child(2n+1) { clear: left; } @media screen and (max-width: 960px) { .contents-article-relation tr { float: left; display: block; margin-right: 1.61735%; width: 100%; } .contents-article-relation tr:last-child { margin-right: 0; } .contents-article-relation tr:nth-child(2n) { margin-right: 1.61735%; } .contents-article-relation tr:nth-child(2n+1) { clear: none; } } /*============================ 今回のみ使用 ============================*/ .contents-bnr-service { max-width: 1200px; margin-left: auto; margin-right: auto; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; text-align: center; } .contents-bnr-service::after { clear: both; content: ""; display: table; } @media screen and (max-width: 1100px) { .contents-bnr-service { padding: 32px 16px; } } @media screen and (max-width: 960px) { .contents-bnr-service { padding: 0; } } .contents-bnr-service li.bnr-fateverita, .contents-bnr-service li.bnr-nakoudo-bar { float: left; display: block; margin-right: 2.74614%; width: 48.62693%; margin-bottom: 64px; } .contents-bnr-service li.bnr-fateverita:last-child, .contents-bnr-service li.bnr-nakoudo-bar:last-child { margin-right: 0; } .contents-bnr-service li.bnr-fateverita:nth-child(2n), .contents-bnr-service li.bnr-nakoudo-bar:nth-child(2n) { margin-right: 0; } .contents-bnr-service li.bnr-fateverita:nth-child(2n+1), .contents-bnr-service li.bnr-nakoudo-bar:nth-child(2n+1) { clear: left; } .contents-bnr-service li p { text-align: left; } @media screen and (max-width: 960px) { .contents-bnr-service li { margin-bottom: 40px; padding-left: 16px; padding-right: 16px; } .contents-bnr-service li.bnr-fateverita, .contents-bnr-service li.bnr-nakoudo-bar { float: left; display: block; margin-right: 2.74614%; width: 100%; margin-bottom: 40px; } .contents-bnr-service li.bnr-fateverita:last-child, .contents-bnr-service li.bnr-nakoudo-bar:last-child { margin-right: 0; } } .contents-bnr-service.secondary li { float: left; display: block; margin-right: 2.74614%; width: 31.50258%; } .contents-bnr-service.secondary li:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .contents-bnr-service.secondary li { float: left; display: block; margin-right: 2.74614%; width: 100%; } .contents-bnr-service.secondary li:last-child { margin-right: 0; } .contents-bnr-service.secondary li:last-child { margin-bottom: 0; } } .contents-bnr-service img { max-width: 100%; height: auto; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .contents-bnr-service img:hover { opacity: .7; } .contents-bnr-service h3 { padding: 40px 0 0 0; font-size: 16px; font-weight: 700; } @media screen and (max-width: 960px) { .contents-bnr-service h3 { padding: 24px 0 0; font-size: 15px; } } .contents-bnr-service p { padding-top: 20px; font-size: 14px; line-height: 1.6; } @media screen and (max-width: 960px) { .contents-bnr-service p { font-size: 13px; } } .contents-bnr-service .btn-line { width: 100%; display: inline-block; margin-top: 32px; padding: 16px 32px; border: 1px solid #CCCCCC; } .contents-bnr-service .btn-line img { vertical-align: -10px; padding-left: 16px; box-shadow: none; } .contents-bnr-service .btn-line:hover { background: #EFEFEF; } @media screen and (max-width: 960px) { .contents-bnr-service .btn-line { margin-top: 16px; padding: 10px 32px; font-size: 14px; } .contents-bnr-service .btn-line img { vertical-align: -12px; } } .contents-bnr-column { background: #EFEFEF; } .contents-bnr-column ul { max-width: 710px; margin-left: auto; margin-right: auto; padding-top: 40px; } .contents-bnr-column ul::after { clear: both; content: ""; display: table; } .contents-bnr-column li { float: left; display: block; margin-right: 2.74614%; width: 48.62693%; } .contents-bnr-column li:last-child { margin-right: 0; } .contents-bnr-column li img { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } @media screen and (max-width: 960px) { .contents-bnr-column li { float: left; display: block; margin-right: 2.74614%; width: 100%; text-align: center; } .contents-bnr-column li:last-child { margin-right: 0; } .contents-bnr-column li:first-child { padding-bottom: 40px; } .contents-bnr-column li img { width: 248px; } } .contents-bnr-column a:hover { opacity: .4; } .contents-bnr-column p { padding-top: 16px; font-size: 14px; line-height: 1.6; } .contents-bnr-info { text-align: center; background: #fff; } .contents-bnr-info.u-wrap-large { padding-bottom: 180px; } @media screen and (max-width: 960px) { .contents-bnr-info.u-wrap-large { padding-bottom: 64px; } } .contents-bnr-info .l-grid-col6:first-child { border-right: 1px solid #CCCCCC; } .contents-bnr-info .l-grid-col6 img { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } @media screen and (max-width: 960px) { .contents-bnr-info .l-grid-col6 { padding: 32px 16px; } .contents-bnr-info .l-grid-col6:first-child { padding-top: 0; border-right: none; border-bottom: 1px solid #CCCCCC; } .contents-bnr-info .l-grid-col6 img { max-width: 100%; height: auto; } } .contents-bnr-info h3 { padding-bottom: 48px; } @media screen and (max-width: 960px) { .contents-bnr-info h3 { padding-bottom: 24px; } } .contents-bnr-info p { padding-top: 16px; font-size: 14px; line-height: 1.6; } .contents-bnr-info a:hover { opacity: .4; } /* =============================== global-nav =============================== */ /* =============================== global nav =============================== */ .gnav ul { position: relative; display: flex; justify-content: flex-end; list-style: none; z-index: 1000; box-sizing: border-box; } .gnav li { position: relative; } .gnav li:last-child a { padding-right: 30px; } .gnav a { display: block; padding: 35px 15px; color: #000; text-decoration: none; text-align: center; font-weight: 600; font-size: 15px; } .gnav a:hover { opacity: .4; } .gnav a.btn-header { height: 91px; padding: 0 32px; position: relative; padding-top: 33px; font-size: 13px; letter-spacing: 2px; } .gnav a.btn-header.tel { width: 247px; position: relative; padding-left: 48px; margin-left: 16px; font-size: 18px; color: #fff; background-color: #C9A063; } .gnav a.btn-header.tel span { display: block; padding-top: 12px; font-size: 12px; } .gnav a.btn-header.tel:before { position: absolute; top: 36px; left: 30px; font-family: 'Font Awesome 5 Free'; font-size: 12px; content: "\f095"; } .gnav i { font-size: 11px; vertical-align: 2px; } /*============================ animation 右から表示されるドロワーメニュー - ============================*/ /*ドロワー*/ .l-drawer { position: relative; display: none; } @media screen and (max-width: 1100px) { .l-drawer { display: block; } } .l-drawer__checkbox { display: none; } .l-drawer__icon { width: 56px; height: 56px; position: fixed; right: 0; cursor: pointer; display: block; background: #C9A063; } .l-drawer__icon-parts, .l-drawer__icon-parts:before, .l-drawer__icon-parts:after { width: 26px; height: 2px; position: absolute; top: -14px; right: 0; left: 0; bottom: 0; display: block; margin: auto; background-color: #fff; } .l-drawer__icon-parts:before, .l-drawer__icon-parts:after { content: " "; } .l-drawer__icon-parts:before { top: 16px; } .l-drawer__icon-parts:after { top: -16px; } .l-drawer__overlay { width: 100%; height: 100%; position: fixed; top: 0; right: 0; opacity: 0; pointer-events: none; background: #000; } .l-drawer__menu { color: #000; max-width: 100%; width: 73%; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; position: fixed; top: 0; left: -100vw; background: #C9A063; } .l-drawer__icon { z-index: 4; } .l-drawer__menu { z-index: 3; } .l-drawer__overlay { z-index: 2; } .l-drawer__checkbox:checked ~ .l-drawer__icon .l-drawer__icon-parts { background: transparent; } .l-drawer__checkbox:checked ~ .l-drawer__icon .l-drawer__icon-parts:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 0; } .l-drawer__checkbox:checked ~ .l-drawer__icon .l-drawer__icon-parts:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 0; } .l-drawer__checkbox:checked ~ .l-drawer__overlay { opacity: 0.3; pointer-events: auto; } .l-drawer__checkbox:checked ~ .l-drawer__menu { left: 0; } .l-drawer__icon-parts, .l-drawer__icon-parts:after, .l-drawer__icon-parts:before, .l-drawer__overlay, .l-drawer__menu { -webkit-transition: all .7s; transition: all .7s; } .l-drawer__icon-parts + span { position: relative; top: 34px; left: 7px; font-size: 10px; color: #fff; } .l-drawer__menu { margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.5); } .l-drawer__menu li { list-style: none; cursor: pointer; } .l-drawer__menu li.l-drawer__contact { line-height: 1.5; border: none; } .l-drawer__menu li.l-drawer__contact a { font-size: 18px; color: #fff; background: #666666; } .l-drawer__menu li.l-drawer__contact a:before { font-size: 12px; font-weight: 600; padding-right: 4px; font-family: 'Font Awesome 5 Free'; content: "\f095"; vertical-align: 2px; } .l-drawer__menu li.l-drawer__contact span { color: #fff; } .l-drawer__menu span { display: block; padding-top: 8px; font-size: 12px; color: #666666; } .l-drawer__menu a { display: block; position: relative; padding: 15px 24px; color: #000; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .l-drawer__menu a:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .l-drawer__menu a:after { position: absolute; top: 14px; right: 8px; font-family: 'FontAwesome'; content: \f105; } .l-drawer__menu i { padding-right: 8px; } /*PC アコーディオン*/ .dnav { position: relative; display: block; } .dnav__checkbox { display: none; } .dnav__overlay { background: #000; opacity: 0; pointer-events: none; width: 100%; height: 100%; position: fixed; top: 88px; left: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .dnav__menu { width: 100%; height: 210px; padding: 36px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; position: fixed; top: -100vh; left: 0; color: #000; } .dnav__menu ul { justify-content: center; } .dnav__bloc a { margin-left: 16px; letter-spacing: 3px; border-radius: 10px; background: #C9A063; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } .dnav__bloc a span { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 500; letter-spacing: 1px; } .dnav .dnav__text { display: inline-block; position: fixed; right: 360px; max-width: 100%; margin-left: auto; margin-right: auto; background: #fff; padding: 35px; } .dnav .dnav__text li a { padding-top: 24px; } .dnav .dnav__text li:first-child a { padding-top: 0; } .dnav .dnav__text a { display: block; position: relative; padding: 0; font-weight: 600; text-align: left; } .dnav .dnav__text a span { display: block; padding-top: 16px; padding-left: 16px; font-weight: 500; } .dnav .dnav__text a span:before { padding-right: 6px; content: "-"; color: #C9A063; } .dnav .dnav__text a:before { padding-right: 8px; color: #C9A063; font-weight: 600; font-family: 'Font Awesome 5 Free'; content: "\f105"; } .dnav .dnav__text a:hover { opacity: .4; } .dnav__icon { z-index: 1000; } .dnav__menu { z-index: 3; } .dnav__overlay { z-index: 2; } .dnav__checkbox:checked ~ .dnav__overlay { opacity: 0.5; pointer-events: auto; } .dnav__checkbox:checked ~ .dnav__menu { top: 55px; } .dnav__icon { margin: 0 10px 0 0; padding: 0 4px 0 16px; position: relative; top: 34px; font-weight: 600; font-size: 15px; color: #000; } .dnav__icon:hover { opacity: .4; } .dnav .fa-times-circle { font-size: 24px; vertical-align: -2px; } .dnav__icon-close { position: absolute; top: 32px; right: 32px; font-size: 18px; font-weight: 700; color: #B9B9C0; } .dnav__icon-close i { vertical-align: 0px; font-size: 18px; } .dnav__menu h2 { margin-bottom: 40px; font-size: 18px; font-weight: 700; color: #C9A063; text-align: center; } .dnav__menu i { font-size: 18px; vertical-align: 0px; } /*MOBILE アコーディオン*/ .acd-check { display: none; } .acd-label { height: 46px; padding: 14px 24px 12px; display: block; position: relative; color: #000; font-weight: 700; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); background: #C9A063; } .acd-label:after { position: absolute; top: 14px; right: 8px; font-family: 'FontAwesome'; content: \f107; } .acd-content { height: 0; opacity: 0; transition: .5s; visibility: hidden; background: #fff; } .acd-content ul + ul { border-top: 1px solid #CCCCCC; } .acd-content li { padding-left: 5px; border-bottom: 1px solid rgba(201, 160, 99, 0.3); } .acd-check:checked + .acd-label + .acd-content { height: auto; opacity: 1; visibility: visible; } /*============================ border - ============================*/ hr { margin: 0; border-top: 0; border-bottom: 1px solid #E4E4E4; } /*============================ heading - ============================*/ /*============================ section見出し ============================*/ .h-section.primary { margin-bottom: 96px; position: relative; font-size: 24px; font-weight: 700; color: #C9A063; text-align: center; line-height: 1.8; } .h-section.primary:after { width: 48px; height: 4px; position: absolute; bottom: -28px; left: 50%; margin-left: -24px; content: ""; background: #C9A063; } @media screen and (max-width: 960px) { .h-section.primary { margin-bottom: 32px; font-size: 20px; } .h-section.primary:after { bottom: -24px; } .h-section.primary.large { margin-bottom: 54px; } .h-section.primary.text-left { text-align: left; } .h-section.primary.text-left br { display: none; } .h-section.primary.text-left:after { left: 25px; bottom: -24px; } } .h-section.secondary { font-size: 24px; font-weight: 700; text-align: center; } .h-section.secondary br { display: none; } @media screen and (max-width: 960px) { .h-section.secondary { font-size: 18px; line-height: 1.6; } .h-section.secondary br { display: block; } } /*============================ 中ページ ページタイトル ============================*/ .h-page { padding: 54px 0; overflow: hidden; font-size: 24px; font-weight: 700; color: #fff; text-align: center; text-transform: uppercase; line-height: 1.8; letter-spacing: 4px; background: #C9A063; } .h-page span { display: block; font-size: 16px; } .h-page a { color: #fff; } @media screen and (max-width: 768px) { .h-page { padding: 32px 16px; font-size: 18px; } .h-page span { font-size: 12px; } } /*============================ 中ページ ページ内で使用する見出し ============================*/ .h-page-section.primary { padding-bottom: 72px; font-size: 24px; font-weight: 700; color: #C9A063; line-height: 1.4; text-align: center; } @media screen and (max-width: 768px) { .h-page-section.primary { padding-bottom: 20px; font-size: 18px; } } .h-page-section.secondary { padding: 26px; font-size: 22px; font-weight: 700; line-height: 1.4; background-color: rgba(185, 185, 192, 0.1); } @media screen and (max-width: 768px) { .h-page-section.secondary { padding: 18px; font-size: 16px; } } .h-page-section.tertiary { font-size: 24px; font-weight: 700; } @media screen and (max-width: 768px) { .h-page-section.tertiary { font-size: 18px; } } .h-page-section.quaternary { font-size: 18px; font-weight: 700; position: relative; padding: 0 0 0 24px; line-height: 1.6; } @media screen and (max-width: 768px) { .h-page-section.quaternary { font-size: 16px; } } .h-page-section.quaternary:before { position: absolute; font-family: 'Font Awesome 5 Free'; content: "\f111"; font-weight: 600; color: #C9A063; left: 0; top: 0; } /*============================ サイドバー ============================*/ .h-sidebar { clear: both; width: 100%; padding: 16px; font-size: 16px; font-weight: 700; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; color: #fff; background: #B9B9C0; } .h-sidebar.primary { color: #fff; background: #666666; } .h-sidebar.secondary { color: #000; background: rgba(201, 160, 99, 0.15); } /*============================ 関連記事見出し ============================*/ .h-article-relation { padding: 16px 0; font-size: 16px; font-weight: 700; border-bottom: 1px solid #CCCCCC; } /*============================ btn - ============================*/ .btn { position: relative; display: inline-block; text-align: center; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; font-weight: 500; } .btn:after { font-weight: 600; position: absolute; top: 26px; right: 20px; font-family: 'Font Awesome 5 Free'; content: "\f105"; } @media screen and (max-width: 768px) { .btn:after { top: 15px; } } .btn.primary { width: 344px; height: 76px; padding-top: 27px; font-size: 18px; font-weight: 700; color: #C9A063; line-height: 1; background: #fff; border: 3px solid #C9A063; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.2), 0 2px 10px 0 rgba(100, 100, 100, 0.2); } .btn.primary:hover { color: #fff; background: #C9A063; } @media screen and (max-width: 768px) { .btn.primary { width: 240px; height: 48px; padding: 15px; font-size: 14px; } } .btn.secondary { width: 304px; height: 56px; padding-top: 20px; color: #fff; line-height: 1; z-index: 10; background: #b9b9c0; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } .btn.secondary:after { top: 20px; padding-right: 8px; font-weight: 600; font-family: 'Font Awesome 5 Free'; content: "\f105"; } @media screen and (max-width: 768px) { .btn.secondary { width: 200px; height: 44px; padding-top: 16px; z-index: 1; } .btn.secondary:after { top: 16px; } } .btn.tertiary { width: 344px; height: 76px; font-size: 18px; font-weight: 700; color: #fff; line-height: 1; background: #C9A063; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.2), 0 2px 10px 0 rgba(100, 100, 100, 0.2); } @media screen and (max-width: 768px) { .btn.tertiary { width: 240px; height: 48px; padding: 15px; font-size: 14px; } } @media screen and (max-width: 768px) { .btn { font-size: 14px; font-size: 1.4rem; } } /* =============================== btn-round =============================== */ .btn-round { height: 76px; font-size: 1.8rem; font-weight: 800; padding: 16px 104px; display: inline-flex; justify-content: center; align-items: center; border-radius: 40px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); position: relative; } @media screen and (max-width: 768px) { .btn-round { width: 88%; height: 48px; padding: 16px; text-align: center; font-size: 1.5rem; } } .btn-round:after { font-weight: 600; position: absolute; right: 20px; font-family: 'Font Awesome 5 Free'; content: "\f105"; } @media screen and (max-width: 768px) { .btn-round:after { top: 15px; } } .btn-round.primary { color: #fff; background-color: #C9A063; } .btn-round.secondary { height: 56px; color: #fff; background-color: #B9B9C0; } @media screen and (max-width: 768px) { .btn-round.secondary { height: 44px; } } .btn-round.white-primary { color: #C9A063; background-color: #fff; border: 3px solid #C9A063; } .btn-round.white-secondary { height: 56px; color: #B9B9C0; background-color: #fff; border: 3px solid #B9B9C0; } @media screen and (max-width: 768px) { .btn-round.white-secondary { height: 44px; } } /* =============================== btn-radius =============================== */ .btn-radius { height: 76px; font-size: 1.8rem; font-weight: 800; padding: 16px 0; display: inline-flex; justify-content: center; align-items: center; border-radius: 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); position: relative; } @media screen and (max-width: 768px) { .btn-radius { width: 88%; height: 48px; padding: 16px; text-align: center; font-size: 1.5rem; } } .btn-radius:after { font-weight: 600; position: absolute; right: 20px; font-family: 'Font Awesome 5 Free'; content: "\f105"; } @media screen and (max-width: 768px) { .btn-radius:after { top: 15px; } } .btn-radius.primary { color: #fff; background-color: #C9A063; } .btn-radius.secondary { height: 56px; color: #fff; background-color: #B9B9C0; } @media screen and (max-width: 768px) { .btn-radius.secondary { height: 44px; } } .btn-radius.white-primary { color: #C9A063; background-color: #fff; border: 3px solid #C9A063; } .btn-radius.white-secondary { height: 56px; color: #B9B9C0; background-color: #fff; border: 3px solid #B9B9C0; } @media screen and (max-width: 768px) { .btn-radius.white-secondary { height: 44px; } } /* =============================== btn-text =============================== */ .btn-text { position: relative; } .btn-text:after { padding-left: 8px; font-weight: 600; font-family: 'Font Awesome 5 Free'; font-size: 13px; content: "\f105"; } .btn-text.primary { border-bottom: 1px solid #fff; } .btn-text.secondary { font-size: 14px; border-bottom: 1px dotted #CCCCCC; } /* =============================== btn-pdf =============================== */ .btn-blank { position: relative; color: #C9A063; text-decoration: underline; } .btn-blank.primary:after { padding-left: 8px; font-weight: 600; font-family: 'Font Awesome 5 Free'; font-size: 13px; content: "\f1c1"; } .btn-blank.secondary:after { padding-left: 8px; font-weight: 600; font-family: 'Font Awesome 5 Free'; font-size: 13px; content: "\f35d"; } /* =============================== pagetop =============================== */ .btn-pagetop { position: relative; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .btn-pagetop a { display: table-cell; width: 56px; height: 56px; position: absolute; margin: 0 auto; z-index: 200; padding-top: 16px; text-align: center; vertical-align: middle; color: #fff; font-size: 12px; font-size: 1.2rem; border-radius: 50px; background: #fff; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } .btn-pagetop a:hover { text-decoration: none; } .btn-pagetop a:before { color: #000; font-size: 20px; font-family: 'Font Awesome 5 Free'; content: "\f106"; font-weight: 600; } @media screen and (max-width: 768px) { .btn-pagetop a { width: 48px; height: 48px; } } @media screen and (max-width: 768px) { .btn-pagetop { bottom: 96px; right: 62px; position: fixed; } } /* =============================== btn-tel =============================== */ .btn-tel { display: block; font-size: 20px; font-weight: 500; color: #C9A063; letter-spacing: 1px; } .btn-tel:before { font-size: 12px; font-weight: 600; padding-right: 4px; font-family: 'Font Awesome 5 Free'; content: "\f095"; vertical-align: 2px; } .btn-tel em { display: inline-block; font-size: 15px; } .btn-tel.border { width: 344px; display: inline-block; position: relative; padding: 24px 40px; font-weight: 700; font-size: 18px; border: 2px solid #C9A063; box-shadow: 0 2px 5px 0 rgba(100, 100, 100, 0.3), 0 2px 10px 0 rgba(100, 100, 100, 0.3); } .btn-tel.border:after { position: absolute; right: 16px; font-family: 'Font Awesome 5 Free'; content: "\f105"; vertical-align: 1px; font-size: 14px; font-weight: 600; } .btn-tel.bg { padding: 16px 40px; text-align: center; color: #fff; background: #C9A063; } @media screen and (max-width: 768px) { .btn-tel { font-size: 2rem; } .btn-tel:before { font-size: 1.4rem; vertical-align: 1px; } } /* =============================== btn-badge =============================== */ .btn-badge { padding: 8px 20px; margin-right: 16px; font-size: 1.2rem; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; border: 3px solid #E4E4E4; border-radius: 50px; } @media screen and (max-width: 768px) { .btn-badge { font-size: 1rem; } } /* =============================== btn-pagenation =============================== */ .btn-pagenation { clear: both; text-align: center; } .btn-pagenation a { margin: 8px; padding: 16px; display: inline-block; border: 1px solid #B9B9C0; } .btn-pagenation .current { padding: 16px; margin: 8px; color: #fff; background: #B9B9C0; border: none; } /*============================ 特別な告知用ボタン - 参考： インテリアカワノ ============================*/ .btn-spcecial { width: 240px; height: 240px; position: absolute; right: 80px; bottom: -30px; padding-top: 56px; color: #fff; text-align: center; background: #C9A063; border-radius: 50%; z-index: 100; } .btn-spcecial .special-caption { font-size: 14px; } .btn-spcecial ul { padding-top: 40px; } .btn-spcecial li { padding-bottom: 24px; font-size: 20px; font-weight: 700; } @media screen and (max-width: 768px) { .btn-spcecial { width: 100%; height: auto; position: relative; bottom: -10px; right: 0; padding: 32px 24px 16px; margin-bottom: 48px; border-radius: 0; z-index: 0; } .btn-spcecial ul { padding-top: 20px; } .btn-spcecial li { padding-bottom: 16px; font-size: 16px; } } /* =============================== icon =============================== */ i { padding-right: 4px; padding-left: 4px; } /*============================ style list - ============================*/ .style-list.primary { padding-left: 16px; padding-top: 24px; line-height: 1.7; } .style-list.primary li { position: relative; padding-left: 18px; padding-bottom: 8px; } .style-list.primary li:before { position: absolute; top: 0; left: 0; padding-top: 7px; padding-left: 3px; content: "●"; color: rgba(185, 185, 192, 0.4); font-size: 8px; } .style-list.primary li:last-child { padding-bottom: 0; } @media screen and (max-width: 768px) { .style-list.primary { padding-top: 16px; } .style-list.primary li { padding-bottom: 6px; } .style-list.primary li:before { top: 3px; } } .style-list.secondary li { padding-top: 8px; line-height: 1.8; } .style-list.tertiary li { position: relative; display: flex; display: -webkit-flex; padding: 32px 32px 30px; margin-bottom: 60px; line-height: 1.8; background: #fff; } .style-list.tertiary li .style-list-icon { float: left; display: block; margin-right: 5.13568%; width: 7.13015%; } .style-list.tertiary li .style-list-icon:last-child { margin-right: 0; } .style-list.tertiary li .style-list-ex { float: left; display: block; margin-right: 5.13568%; width: 87.73417%; } .style-list.tertiary li .style-list-ex:last-child { margin-right: 0; } .style-list.tertiary li h4 { padding-bottom: 32px; font-weight: 700; font-size: 18px; } .style-list.tertiary li h4 span { display: block; float: left; } .style-list.tertiary li h4 span:first-child { padding-right: 8px; } .style-list.tertiary li p { display: block; clear: both; padding-left: 16px; padding-top: 15px; font-size: 16px; font-weight: 500; line-height: 1.7; } .style-list.tertiary li:after { position: absolute; bottom: -40px; left: 50%; margin-left: -10px; font-family: 'Font Awesome 5 Free'; font-size: 18px; font-weight: 600; color: #B9B9C0; content: "\f107"; } .style-list.tertiary li:last-child { margin-bottom: 0; } .style-list.tertiary li:last-child:after { display: none; } @media screen and (max-width: 768px) { .style-list.tertiary li { padding: 20px; margin-bottom: 40px; font-size: 16px; } .style-list.tertiary li .style-list-icon { float: left; display: block; margin-right: 5.13568%; width: 12.38693%; } .style-list.tertiary li .style-list-icon:last-child { margin-right: 0; } .style-list.tertiary li .style-list-icon img { max-width: 100%; height: auto; } .style-list.tertiary li .style-list-ex { float: left; display: block; margin-right: 5.13568%; width: 82.47739%; } .style-list.tertiary li .style-list-ex:last-child { margin-right: 0; } .style-list.tertiary li h4 { display: flex; padding-bottom: 0; line-height: 1.6; } .style-list.tertiary li p { padding-top: 4px; font-size: 16px; line-height: 1.8; } .style-list.tertiary li:after { bottom: -36px; } } .style-list.quinary.gallery li { float: left; display: block; margin-right: 5.13568%; width: 47.43216%; margin-bottom: 32px; } .style-list.quinary.gallery li:last-child { margin-right: 0; } .style-list.quinary.gallery li:nth-child(2n) { margin-right: 0; } .style-list.quinary.gallery li:nth-child(2n+1) { clear: left; } .style-list.quinary.gallery span { display: block; padding-top: 8px; font-size: 14px; } @media screen and (max-width: 768px) { .style-list.quinary.gallery li { float: left; display: block; margin-right: 5.13568%; width: 100%; } .style-list.quinary.gallery li:last-child { margin-right: 0; } .style-list.quinary.gallery li:nth-child(2n) { margin-right: 5.13568%; } .style-list.quinary.gallery li:nth-child(2n+1) { clear: none; } .style-list.quinary.gallery img { max-width: 100%; height: auto; } } /*============================ style graph - ============================*/ .style-graph.primary { width: 100%; margin-top: 28px; border-collapse: collapse; empty-cells: show; line-height: 1.6; background: #fff; } .style-graph.primary th, .style-graph.primary td { padding: 16px; border: 1px solid #E4E4E4; } @media screen and (max-width: 768px) { .style-graph.primary { margin-top: 16px; } } .style-graph.secondary { width: 100%; border-collapse: collapse; } .style-graph.secondary tr { display: block; line-height: 1.8; border-bottom: 1px solid #CCCCCC; } .style-graph.secondary tr:first-child { border-top: 1px solid #CCCCCC; } .style-graph.secondary th { width: 168px; padding: 24px 0; vertical-align: top; font-weight: 700; } .style-graph.secondary td { padding: 24px 0; } .style-graph.secondary i { color: #CCCCCC; } .style-graph.secondary span { display: block; } @media screen and (max-width: 768px) { .style-graph.secondary th { width: 80px; } } .style-graph.tertiary { width: 100%; border-collapse: collapse; } .style-graph.tertiary th, .style-graph.tertiary td { border: 1px solid #2E2E2E; text-align: center; padding: 12px; line-height: 1.4; } @media screen and (max-width: 768px) { .style-graph.tertiary th, .style-graph.tertiary td { font-size: 1.3rem; padding: 12px 2px; } } .style-graph.tertiary th.bg-primary-light, .style-graph.tertiary td.bg-primary-light { background-color: rgba(201, 160, 99, 0.1); } .style-graph.tertiary th.bg-secondary-light, .style-graph.tertiary td.bg-secondary-light { background-color: rgba(185, 185, 192, 0.1); } .style-graph.tertiary th { color: #fff; background-color: #B9B9C0; padding: 20px 12px; } @media screen and (max-width: 768px) { .style-graph.tertiary th { padding: 12px 6px; } } .style-graph.tertiary td { color: #C9A063; } .style-graph.quaternary { width: 100%; } .style-graph.quaternary tr { display: block; padding: 24px 0 16px; border-bottom: 1px solid #CCCCCC; } .style-graph.quaternary th, .style-graph.quaternary td { width: 100%; display: block; } .style-graph.quaternary th { font-size: 1.8rem; font-weight: 800; } @media screen and (max-width: 768px) { .style-graph.quaternary th { font-size: 1.6rem; } } @media screen and (max-width: 768px) { .style-graph.quaternary td { font-size: 1.5rem; } } .style-graph.quinary { width: 100%; } @media screen and (max-width: 768px) { .style-graph.quinary { padding: 30px 0 0 0; } } .style-graph.quinary tr { display: block; } .style-graph.quinary tr:nth-child(odd) { background: #CCCCCC; } .style-graph.quinary th { width: 128px; padding: 20px 16px 16px; vertical-align: top; font-weight: 700; } @media screen and (max-width: 768px) { .style-graph.quinary th { display: block; padding-bottom: 8px; } } .style-graph.quinary td { line-height: 1.6; padding: 16px; vertical-align: top; } @media screen and (max-width: 768px) { .style-graph.quinary td { display: block; padding-top: 0; } } .style-graph th.bg-primary, .style-graph td.bg-primary { background-color: rgba(201, 160, 99, 0.6); } .style-graph th.bg-secondary, .style-graph td.bg-secondary { background-color: rgba(185, 185, 192, 0.1); } /*============================ animation tool/keyframesを使用した animationのclass集 ----------------------------- loader slidefadeIn slideup&naname down zoom ============================*/ .js-animation { visibility: hidden; } @media screen and (max-width: 960px) { .js-animation { visibility: visible; } } /* =============================== loader =============================== */ .loader { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10000; -webkit-perspective: 500px; perspective: 500px; background: #fff; } .loader-spin { position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; text-align: center; color: #fff; margin: auto; width: 30px !important; height: 30px !important; border-radius: 30px; border: 6px solid #C9A063; border-right-color: transparent; animation: spin 1s infinite linear; } /*============================ slidefadeIn ============================*/ .slidefadeIn { animation-name: slidefadeIn; -webkit-animation-name: slidefadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } /*============================ slideup&naname ============================*/ .slideup-naname { animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } /*============================ down ============================*/ .down { animation-name: down; -webkit-animation-name: down; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } /*============================ zoom ============================*/ .zoom { -moz-transition: -moz-transform 7.5s linear; -webkit-transition: -webkit-transform 7.5s linear; -o-transition: -o-transform 7.5s linear; -ms-transition: -ms-transform 7.5s linear; transition: transform 7.5s linear; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /*============================ state #description: #js hook ----------------------------- is-fixed is-visible slider secondary zoom ============================*/ /*============================ is-fixed ============================*/ .is-fixed { width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: #fff; opacity: 1; transition: background-color 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease, -webkit-box-shadow 0.5s ease; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.01); } @media screen and (max-width: 1100px) { .is-fixed { position: static; } } .is-fixed .logo { float: left; display: block; margin-right: 5.13568%; width: 3.62562%; padding-top: 12px; padding-left: 0; } .is-fixed .logo:last-child { margin-right: 0; } .is-fixed .logo img { width: 130px; } .is-fixed .gnav { float: left; display: block; margin-right: 5.13568%; width: 91.23869%; } .is-fixed .gnav:last-child { margin-right: 0; } @media screen and (max-width: 1100px) { .is-fixed .gnav { display: none; } } .is-fixed a { padding: 22px 15px; } .is-fixed a.btn-header { height: 63px; padding-top: 24px; } .is-fixed a.btn-header:after { top: 22px; } .is-fixed a.btn-header.tel { width: 247px; padding-top: 17px; font-size: 16px; } .is-fixed a.btn-header.tel span { padding-top: 4px; font-size: 10px; } .is-fixed a.btn-header.tel:before { top: 19px; } .is-fixed a.is-current { padding: 24px 15px !important; } @media screen and (max-width: 1100px) { .is-fixed a { padding: 16px; } .is-fixed a.btn-header { height: 46px; padding-top: 16px; } } @media screen and (max-width: 960px) { .is-fixed a { padding: 16px 24px; } .is-fixed a.btn-header { height: auto; padding-top: 16px; } } .is-fixed .dnav__icon { top: 21px; } .is-fixed .dnav__overlay { top: 60px; } .is-fixed .dnav__checkbox:checked ~ .dnav__menu { top: 28px; } /*============================ is-current ============================*/ .is-current { position: relative; padding: 38px 15px !important; bottom: 3px; color: #C9A063 !important; } .is-current:after { width: 100%; height: 3px; position: absolute; left: 0; bottom: -3px; content: ""; background-color: #C9A063; } /*============================ is-visible ============================*/ .is-visible { display: block !important; position: fixed; bottom: 100px; right: 62px; -webkit-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); transition: all 1s cubic-bezier(0.42, 0, 0.58, 1); } /*============================ is-hide ============================*/ .is-hide { display: none; } /*============================ is-fade ============================*/ .is-fade { display: block; opacity: 1; filter: alpha(opacity=100); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } /*============================ slider secondary zoom ============================*/ .is-zoom { -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-duration: 6s; -moz-transition-duration: 6s; transition-duration: 6s; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /*============================ frontpage - ============================*/ .cc-message { font-size: 12px; } @media screen and (max-width: 960px) { .cc-compliance { margin: 0 auto; } } .front-topics { max-width: 1024px; margin-left: auto; margin-right: auto; padding-top: 102px; padding-bottom: 102px; } .front-topics::after { clear: both; content: ""; display: table; } @media screen and (max-width: 1100px) { .front-topics { padding-left: 16px; padding-right: 16px; } } @media screen and (max-width: 960px) { .front-topics { padding: 0; } } .front-topics .h-normal { float: left; display: block; margin-right: 5.13568%; width: 12.38693%; color: #C9A063; font-size: 14px; font-weight: 100; } .front-topics .h-normal:last-child { margin-right: 0; } .front-topics .h-normal span { vertical-align: -4px; padding-right: 16px; color: #000; font-size: 24px; } @media screen and (max-width: 960px) { .front-topics .h-normal { width: 100%; padding: 32px 0 24px; position: relative; text-align: center; } .front-topics .h-normal:after { width: 48px; height: 1px; position: absolute; left: 50%; bottom: 0; content: ""; margin-left: -24px; background: #C9A063; } .front-topics .h-normal span { display: block; vertical-align: 0; padding-bottom: 6px; padding-right: 0; letter-spacing: 3px; } } .front-topics table { padding-left: 40px; float: left; display: block; margin-right: 5.13568%; width: 60.57412%; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; border-left: 1px solid #C9A063; } .front-topics table:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .front-topics table { float: left; display: block; margin-right: 5.13568%; width: 100%; padding: 20px 20px 16px; border-left: none; } .front-topics table:last-child { margin-right: 0; } .front-topics table + p { padding-bottom: 16px; text-align: right; } } .front-topics th, .front-topics td { line-height: 1.8; } @media screen and (max-width: 960px) { .front-topics th, .front-topics td { display: block; } } .front-topics th { font-size: 14px; vertical-align: middle; } @media screen and (max-width: 960px) { .front-topics th { padding-top: 4px; } } .front-topics td { padding-left: 20px; vertical-align: top; } @media screen and (max-width: 960px) { .front-topics td { padding: 16px 0 4px; } } .front-topics .btn { float: left; display: block; margin-right: 5.13568%; width: 16.76758%; padding: 4px 0 0; } .front-topics .btn:last-child { margin-right: 0; } @media screen and (max-width: 960px) { .front-topics .btn { width: 40%; display: inline-block; margin-bottom: 16px; float: none; } } .front-introduction-wrap { position: relative; } .front-introduction-wrap section { max-width: 1200px; margin-left: auto; margin-right: auto; height: 835px; position: relative; z-index: 100; text-align: center; } .front-introduction-wrap section::after { clear: both; content: ""; display: table; } @media screen and (max-width: 960px) { .front-introduction-wrap section { width: 100%; height: auto; position: static; padding: 0; } .front-introduction-wrap section.solution1 { margin: 56px auto 0; } } .front-introduction-wrap h3 { font-size: 14px; color: #C9A063; text-align: left; letter-spacing: 2px; text-transform: uppercase; line-height: 1.6; } .front-introduction-wrap h3 span { display: block; font-size: 40px; color: #000; } @media screen and (max-width: 960px) { .front-introduction-wrap h3 { padding: 20px 8px 0; text-align: center; background: white; } .front-introduction-wrap h3 span { font-size: 24px; } .front-introduction-wrap h3 br { display: none; } } .front-introduction-wrap p { padding: 24px 0 40px; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; line-height: 2; text-align: left; } .front-introduction-wrap p span { display: block; padding-bottom: 20px; } @media screen and (max-width: 960px) { .front-introduction-wrap p { padding: 24px 16px 32px; } } .front-introduction-wrap .l-flipped { left: inherit; right: 0px; } .front-introduction-img { position: absolute; top: 0; left: 0; } @media screen and (max-width: 960px) { .front-introduction-img { position: relative; } .front-introduction-img img { max-width: 100%; height: auto; } } .front-introduction-card { width: 683px; height: auto; position: absolute; top: 207px; left: 0px; padding: 72px; background-color: #fff; transition: box-shadow .25s; } @media screen and (max-width: 960px) { .front-introduction-card { width: 100%; position: relative; top: 0; left: 0; padding: 24px 24px 56px; box-shadow: none; } .front-introduction-card.l-flipped { left: inherit; right: 0; } } .front-blog { border-top: 1px solid #E4E4E4; } .front-blog .article-list-card + p { padding-top: 64px; padding-bottom: 0; text-align: center; } @media screen and (max-width: 960px) { .front-blog .article-list-card + p { padding-top: 16px; } .front-blog .card { margin-bottom: 20px; border: 1px solid #E4E4E4; } .front-blog .card .btn-badge { margin-right: 16px; } .front-blog .card:after { display: none; } .front-blog figure { float: left; display: block; margin-right: 5.13568%; width: 100%; padding: 0; } .front-blog figure:last-child { margin-right: 0; } .front-blog img { width: 100%; } .front-blog .card-wrap { float: left; display: block; margin-right: 5.13568%; width: 100%; } .front-blog .card-wrap:last-child { margin-right: 0; } } .front-blog-tag { padding: 64px 0 0; margin: 0; font-family: "Noto Sans JP", "hiragino kaku gothic pro", "ヒラギノ角ゴ pro w3", yugothic, "yu gothic", 游ゴシック, 游ゴシック体; } .front-blog-tag a { display: inline-block; padding: 10px 24px; margin-right: 16px; border: 3px solid #E4E4E4; border-radius: 50px; } .front-blog-tag a:hover { border: 3px solid #C9A063; } @media screen and (max-width: 960px) { .front-blog-tag { padding: 32px 0 16px; overflow: hidden; font-size: 14px; } .front-blog-tag a { text-align: center; } .front-blog-tag a:first-child { float: left; display: block; margin-right: 3.71965%; width: 100%; display: block; margin-bottom: 12px; } .front-blog-tag a:first-child:last-child { margin-right: 0; } .front-blog-tag a:nth-child(2n) { float: left; display: block; margin-right: 3.71965%; width: 52.46183%; } .front-blog-tag a:nth-child(2n):last-child { margin-right: 0; } .front-blog-tag a:last-child { float: left; display: block; margin-right: 3.71965%; width: 43.81852%; } .front-blog-tag a:last-child:last-child { margin-right: 0; } } .front-news { border-top: 1px solid #E4E4E4; } @media screen and (max-width: 960px) { .front-news tr { border-bottom: 1px solid #E4E4E4; } } /*============================ utility - line-height padding style wrap responsive img ============================*/ /*============================ line-height ============================*/ .u-line-height.small { line-height: 1.4; } .u-line-height.middle { line-height: 1.8; } .u-line-height.large { line-height: 2.2; } /*============================ padding style ============================*/ .u-pt-xsmall { padding-top: 24px; } .u-align-left { text-align: left; } .u-align-right { text-align: right; } .u-align-center { text-align: center; } @media screen and (max-width: 768px) { .u-align-center img { display: inline-block; } } .u-float-right { float: right !important; } @media screen and (max-width: 768px) { .u-float-right { float: none; } } .u-float-clear { clear: both; } .u-flow { overflow: hidden; } /*============================ wrap ============================*/ @media screen and (max-width: 960px) { .u-wrap-side { padding-left: 24px; padding-right: 24px; } } .u-wrap-large { padding-top: 96px; padding-bottom: 96px; } .u-wrap-large.top-none { padding-top: 0; } .u-wrap-large.bottom-none { padding-bottom: 0; } @media screen and (max-width: 1100px) { .u-wrap-large { padding-top: 64px; padding-bottom: 64px; } } @media screen and (max-width: 768px) { .u-wrap-large { padding-top: 60px; padding-bottom: 60px; } .u-wrap-large.mb-bottom-none { padding-bottom: 0; } } .u-wrap-middle { padding-top: 64px; padding-bottom: 64px; } .u-wrap-middle.top-none { padding-top: 0; } .u-wrap-middle.bottom-none { padding-bottom: 0; } @media screen and (max-width: 768px) { .u-wrap-middle { padding-top: 32px; padding-bottom: 32px; } } .u-wrap-small { padding-top: 32px; padding-bottom: 32px; } .u-wrap-small.top-none { padding-top: 0; } .u-wrap-small.bottom-none { padding-bottom: 0; } @media screen and (max-width: 768px) { .u-wrap-small { padding-top: 16px; padding-bottom: 16px; } } .u-wrap-xsmall { padding-top: 16px; padding-bottom: 16px; } .u-wrap-xsmall.top-none { padding-top: 0; } .u-wrap-xsmall.bottom-none { padding-bottom: 0; } @media screen and (max-width: 768px) { .u-wrap-xsmall { padding-top: 8px; padding-bottom: 8px; } } /*============================ responsive img ============================*/ .u-responsive-img { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* FILE ARCHIVED ON 16:55:39 Apr 29, 2022 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 02:51:54 Jan 14, 2025. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 0.455 exclusion.robots: 0.016 exclusion.robots.policy: 0.006 esindex: 0.01 cdx.remote: 69.606 LoadShardBlock: 79.388 (3) PetaboxLoader3.datanode: 110.194 (4) load_resource: 138.205 PetaboxLoader3.resolve: 93.66 */