@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap"); /* =================================================================== style info : リセット及びフォントサイズ =================================================================== */ /*! html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } main { display: block; } img { vertical-align: top; font-size: 0; line-height: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } :root { --c-base: #fff; --c-primary: #10243c; --c-primary-rgb: 16,36,60; --c-secondary: #516174; --c-tertiary: #fff8ec; --c-accent: #ff5d59; --c-navy-2: #183856; --c-coral-dark: #ed4745; --c-cream: #fff8ec; --c-yellow: #ffd65a; --c-sns-green: #0ac86b; --c-sky: #38a9e8; --c-line-soft: #e5e8ec; --c-text: var(--c-primary); --c-text-reversal: #fff; --c-body-bg: var(--c-base); --c-header-text: var(--c-primary); --c-header-bg: rgba(255,255,255,.94); --c-footer-text: var(--c-white); --c-footer-bg: var(--c-primary); --c-nav-text: var(--c-white); --c-nav-bg: var(--c-primary); --c-btn-text: var(--c-white); --c-btn-bg: var(--c-primary); --c-accordion: var(--c-primary); --c-gra: linear-gradient(135deg, #ff6c69 0%, #ff4f50 100%); --space-content: clamp(20px, 6vw, 70px); --space-content2: min(10vw,100px); --col-gap: clamp(16px, 4vw, 40px); --col-gap-sp: clamp(8px, 2vw, 16px); --mb-container: min(10vw, 100px); --c-h1-text: var(--c-white); --c-h1-bg: var(--c-primary); --c-h2-text: var(--c-white); --c-h2-bg: var(--c-primary); --c-h3-text: var(--c-primary); --c-h3-bg: var(--c-primary); --c-h4-text: var(--c-text); --c-h4-bg: var(--c-primary); --c-table-th: var(--c-white); --c-table-th-bg: var(--c-primary); --c-table-td: var(--c-text); --c-table-td-bg: var(--c-cWhite); --c-table-border: #efefef; --c-white: #fff; --c-white-rgb: 255,255,255; --c-red: #ff2626; --c-pink: #ffe1e1; --c-blue: #e8e9ff; --c-green: #edffe8; --c-gray: #efefef; --c-black: #000; --c-black-rgb: 0,0,0; --b-radius1: 10px; --b-radius2: min(2vw,20px); --b-radius3: min(3vw,30px); --z-index-loading: 100; --z-index-header: 90; --z-index-header-logo: 10; --z-index-top-main: 7; --z-index-toggle_nav: 10; --z-index-toggle_nav_bg: 9; --z-index-drawer: 9; --z-index-pagetop: 9; --bp-xs: 0; --bp-sm: 576px; --bp-md: 768px; --ff-base: var(--ff-sans-serif); --ff-sans-serif: "Noto Sans JP", 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; --ff-serif: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; --ff-eng: var(--ff-sans-serif); } /*! * 12 COLUMN : RESPONSIVE GRID SYSTEM * DEVELOPER : DENIS LEBLANC * URL : http://responsive.gs * VERSION : 3.0 * LICENSE : GPL & MIT */ /* ============================================ 12 COLUMN : RESPONSIVE GRID SYSTEM ============================================ */ .container:first-child { margin-top: 0; } .container.container-top-space { margin-top: var(--mb-container); } .container.container-top-narrow { margin-top: var(--col-gap); } .container.container-mb-space { margin-bottom: var(--mb-container); } .container.container-mb-narrow { margin-bottom: var(--col-gap); } .container .col > *:last-child { margin-bottom: 0; } .container .col figure { margin-bottom: 10px; } .container img { max-width: 100%; height: auto; } @media (min-width: 768px) { .container { max-width: 1000px; } } .row { padding-bottom: 0; display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: var(--col-gap); } .row:not(:last-child) { margin-bottom: var(--col-gap); } .row.row-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .row.row-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: end; } @media (min-width: 768px) { .row { -ms-grid-columns: 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr var(--col-gap) 1fr; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); } .row:not(:last-child) { margin-bottom: var(--col-gap); } .row.reverse { direction: rtl; } .row.reverse > .col { direction: ltr; } } .col { display: block; width: 100%; } @media (min-width: 768px) { .col { -ms-grid-column-span: 12; grid-column-end: span 12; } .span_1 { -ms-grid-column-span: 1; grid-column-end: span 1; } .span_2 { -ms-grid-column-span: 2; grid-column-end: span 2; } .span_3 { -ms-grid-column-span: 3; grid-column-end: span 3; } .span_4 { -ms-grid-column-span: 4; grid-column-end: span 4; } .span_5 { -ms-grid-column-span: 5; grid-column-end: span 5; } .span_6 { -ms-grid-column-span: 6; grid-column-end: span 6; } .span_7 { -ms-grid-column-span: 7; grid-column-end: span 7; } .span_8 { -ms-grid-column-span: 8; grid-column-end: span 8; } .span_9 { -ms-grid-column-span: 9; grid-column-end: span 9; } .span_10 { -ms-grid-column-span: 10; grid-column-end: span 10; } .span_11 { -ms-grid-column-span: 11; grid-column-end: span 11; } .span_12 { -ms-grid-column-span: 12; grid-column-end: span 12; } .offset_1 { -ms-grid-column: 2; grid-column-start: 2; } .offset_2 { -ms-grid-column: 3; grid-column-start: 3; } .offset_3 { -ms-grid-column: 4; grid-column-start: 4; } .offset_4 { -ms-grid-column: 5; grid-column-start: 5; } .offset_5 { -ms-grid-column: 6; grid-column-start: 6; } .offset_6 { -ms-grid-column: 7; grid-column-start: 7; } .offset_7 { -ms-grid-column: 8; grid-column-start: 8; } .offset_8 { -ms-grid-column: 9; grid-column-start: 9; } .offset_9 { -ms-grid-column: 10; grid-column-start: 10; } .offset_10 { -ms-grid-column: 11; grid-column-start: 11; } .offset_11 { -ms-grid-column: 12; grid-column-start: 12; } /* breakクラスは無害化（gridでは不要だが念のため残す） */ .col.break { display: contents; } } /* SP：特殊レイアウト */ @media (max-width: 767px) { .sp_image_cols:not(.sp_col2):not(.sp_col3) .col figure { overflow: hidden; } .sp_image_cols:not(.sp_col2):not(.sp_col3) .col figure img { float: left; width: 32%; margin-bottom: 10px; vertical-align: middle; } .sp_image_cols:not(.sp_col2):not(.sp_col3) .col figure figcaption { float: right; width: 66%; margin-top: 0; vertical-align: middle; } .sp_image_cols.sp_col2 { -ms-grid-columns: 1fr var(--col-gap) 1fr; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap); } .sp_image_cols.sp_col2 .col { width: auto; } .sp_image_cols.sp_col3 { -ms-grid-columns: 1fr var(--col-gap-sp) 1fr var(--col-gap-sp) 1fr; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap-sp); } .sp_image_cols.sp_col3 .col { width: auto; } } /** * Swiper 9.1.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 28, 2023 */ @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color:#007aff; } .swiper, swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-slide, swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } .swiper-backface-hidden .swiper-slide { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-3d.swiper-css-mode .swiper-wrapper { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ""; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: 10000; -ms-flex-order: 9999; order: 9999; } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { -webkit-margin-start: var(--swiper-centered-offset-before); margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { -webkit-margin-before: var(--swiper-centered-offset-before); margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader { -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @-webkit-keyframes swiper-preloader-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size:44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 0.3s opacity; transition: 0.3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 0.2s top, 0.2s -webkit-transform; transition: 0.2s top, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s top; transition: 0.2s transform, 0.2s top, 0.2s -webkit-transform; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 0.2s left, 0.2s -webkit-transform; transition: 0.2s left, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s left; transition: 0.2s transform, 0.2s left, 0.2s -webkit-transform; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet, :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 0.2s right, 0.2s -webkit-transform; transition: 0.2s right, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s right; transition: 0.2s transform, 0.2s right, 0.2s -webkit-transform; } .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; -ms-touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; -ms-touch-action: none; touch-action: none; } .swiper .swiper-notification, swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; -webkit-transition-property: opacity, height, -webkit-transform; transition-property: opacity, height, -webkit-transform; transition-property: transform, opacity, height; transition-property: transform, opacity, height, -webkit-transform; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } /*! Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); } #cboxWrapper { max-width: none; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; padding: 0; margin: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } #cboxOverlay { background: #fff; opacity: 0.9; filter: alpha(opacity=90); } #colorbox { outline: 0; } #cboxContent { margin-top: 32px; overflow: visible; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { background: #000; padding: 1px; } #cboxLoadingGraphic { background: url(/wp-content/uploads/parts/loading.gif) no-repeat center center; } #cboxLoadingOverlay { background: #000; } #cboxTitle { position: absolute; top: -22px; left: 0; color: #000; } #cboxCurrent { position: absolute; top: -22px; right: 205px; text-indent: -9999px; } #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; text-indent: -9999px; width: 20px; height: 20px; position: absolute; top: -20px; background: url(/wp-content/uploads/parts/controls.png) no-repeat 0 0; } #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0; } #cboxPrevious { background-position: 0 0; right: 44px; } #cboxPrevious:hover { background-position: 0 -25px; } #cboxNext { background-position: -25px 0; right: 22px; } #cboxNext:hover { background-position: -25px -25px; } #cboxClose { background-position: -50px 0; right: 0; } #cboxClose:hover { background-position: -50px -25px; } .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious { right: 66px; } .cboxSlideshow_on #cboxSlideshow { background-position: -75px -25px; right: 44px; } .cboxSlideshow_on #cboxSlideshow:hover { background-position: -100px -25px; } .cboxSlideshow_off #cboxSlideshow { background-position: -100px 0; right: 44px; } .cboxSlideshow_off #cboxSlideshow:hover { background-position: -75px -25px; } #cboxOverlay { background: #000; } #cboxLoadedContent { background: #fff; } #cboxLoadedContent { padding: 0; overflow: auto; -webkit-box-shadow: 0 1px 10px #000; box-shadow: 0 1px 10px #000; } #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose, #cboxTitle { top: -30px; } #colorbox, #cboxOverlay, #cboxWrapper { overflow: visible; } #cboxTitle { color: #fff; } #inline-content { margin: 20px; } #ajax-wrap { margin: 20px; } .left-mask { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%); -webkit-transition: all 1s cubic-bezier(0.5, 1, 0.89, 1); transition: all 1s cubic-bezier(0.5, 1, 0.89, 1); } .left-mask.js-ani-on { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); } .left-mask.js-ani-on img { -webkit-animation: zoomOutSection 10s linear 0s normal both; animation: zoomOutSection 10s linear 0s normal both; } @-webkit-keyframes zoomOutSection { 0% { -webkit-transform: scale(1.25); transform: scale(1.25); } 99.9%, to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes zoomOutSection { 0% { -webkit-transform: scale(1.25); transform: scale(1.25); } 99.9%, to { -webkit-transform: scale(1); transform: scale(1); } } .right-mask { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); -webkit-transition: all 1s cubic-bezier(0.5, 1, 0.89, 1); transition: all 1s cubic-bezier(0.5, 1, 0.89, 1); } .right-mask.js-ani-on { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); } .js-ani.ani-item > * { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out; transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out; transition: opacity 0.8s ease-out, transform 0.8s ease-out; transition: opacity 0.8s ease-out, transform 0.8s ease-out, -webkit-transform 0.8s ease-out; -webkit-transition-delay: 0s; transition-delay: 0s; } .js-ani.ani-item.js-ani-on > * { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .js-ani.ani-item.js-ani-on > *:nth-child(1) { -webkit-transition-delay: 0s; transition-delay: 0s; } .js-ani.ani-item.js-ani-on > *:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .js-ani.ani-item.js-ani-on > *:nth-child(3) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .js-ani.ani-item.js-ani-on > *:nth-child(4) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .js-ani.ani-item.js-ani-on > *:nth-child(5) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .js-ani.ani-item.js-ani-on > *:nth-child(6) { -webkit-transition-delay: 1s; transition-delay: 1s; } .js-ani.ani-item.js-ani-on > *:nth-child(7) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .js-ani.ani-item.js-ani-on > *:nth-child(8) { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; } .js-ani.ani-item.js-ani-on > *:nth-child(9) { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; } .js-ani.ani-item.js-ani-on > *:nth-child(10) { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; } .aniTextDown01 { opacity: 0; } .aniTextDown01.js-ani-on { opacity: 1; } .aniTextDown01.js-ani-on .char { display: inline-block; -webkit-animation-name: kf-animate-chars; animation-name: kf-animate-chars; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1); animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .aniTextDown01.js-ani-on .char:nth-child(1) { -webkit-animation-delay: 0.04s; animation-delay: 0.04s; } .aniTextDown01.js-ani-on .char:nth-child(2) { -webkit-animation-delay: 0.08s; animation-delay: 0.08s; } .aniTextDown01.js-ani-on .char:nth-child(3) { -webkit-animation-delay: 0.12s; animation-delay: 0.12s; } .aniTextDown01.js-ani-on .char:nth-child(4) { -webkit-animation-delay: 0.16s; animation-delay: 0.16s; } .aniTextDown01.js-ani-on .char:nth-child(5) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .aniTextDown01.js-ani-on .char:nth-child(6) { -webkit-animation-delay: 0.24s; animation-delay: 0.24s; } .aniTextDown01.js-ani-on .char:nth-child(7) { -webkit-animation-delay: 0.28s; animation-delay: 0.28s; } .aniTextDown01.js-ani-on .char:nth-child(8) { -webkit-animation-delay: 0.32s; animation-delay: 0.32s; } .aniTextDown01.js-ani-on .char:nth-child(9) { -webkit-animation-delay: 0.36s; animation-delay: 0.36s; } .aniTextDown01.js-ani-on .char:nth-child(10) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .aniTextDown01.js-ani-on .char:nth-child(11) { -webkit-animation-delay: 0.44s; animation-delay: 0.44s; } .aniTextDown01.js-ani-on .char:nth-child(12) { -webkit-animation-delay: 0.48s; animation-delay: 0.48s; } .aniTextDown01.js-ani-on .char:nth-child(13) { -webkit-animation-delay: 0.52s; animation-delay: 0.52s; } .aniTextDown01.js-ani-on .char:nth-child(14) { -webkit-animation-delay: 0.56s; animation-delay: 0.56s; } .aniTextDown01.js-ani-on .char:nth-child(15) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .aniTextDown01.js-ani-on .char:nth-child(16) { -webkit-animation-delay: 0.64s; animation-delay: 0.64s; } .aniTextDown01.js-ani-on .char:nth-child(17) { -webkit-animation-delay: 0.68s; animation-delay: 0.68s; } .aniTextDown01.js-ani-on .char:nth-child(18) { -webkit-animation-delay: 0.72s; animation-delay: 0.72s; } .aniTextDown01.js-ani-on .char:nth-child(19) { -webkit-animation-delay: 0.76s; animation-delay: 0.76s; } .aniTextDown01.js-ani-on .char:nth-child(20) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .aniTextDown01.js-ani-on .char:nth-child(21) { -webkit-animation-delay: 0.84s; animation-delay: 0.84s; } .aniTextDown01.js-ani-on .char:nth-child(22) { -webkit-animation-delay: 0.88s; animation-delay: 0.88s; } .aniTextDown01.js-ani-on .char:nth-child(23) { -webkit-animation-delay: 0.92s; animation-delay: 0.92s; } .aniTextDown01.js-ani-on .char:nth-child(24) { -webkit-animation-delay: 0.96s; animation-delay: 0.96s; } .aniTextDown01.js-ani-on .char:nth-child(25) { -webkit-animation-delay: 1s; animation-delay: 1s; } .aniTextDown01.js-ani-on .char:nth-child(26) { -webkit-animation-delay: 1.04s; animation-delay: 1.04s; } .aniTextDown01.js-ani-on .char:nth-child(27) { -webkit-animation-delay: 1.08s; animation-delay: 1.08s; } .aniTextDown01.js-ani-on .char:nth-child(28) { -webkit-animation-delay: 1.12s; animation-delay: 1.12s; } .aniTextDown01.js-ani-on .char:nth-child(29) { -webkit-animation-delay: 1.16s; animation-delay: 1.16s; } .aniTextDown01.js-ani-on .char:nth-child(30) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @-webkit-keyframes kf-animate-chars { 0% { opacity: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes kf-animate-chars { 0% { opacity: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .aniTextUp01 { overflow: hidden; opacity: 0; } .aniTextUp01 span { display: inline-block; -webkit-transform: translate(0, 105%); transform: translate(0, 105%); -webkit-transition: -webkit-transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; transition: -webkit-transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, -webkit-transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; } .aniTextUp01 span:nth-child(1) { -webkit-transition-delay: 0.06s; transition-delay: 0.06s; } .aniTextUp01 span:nth-child(2) { -webkit-transition-delay: 0.12s; transition-delay: 0.12s; } .aniTextUp01 span:nth-child(3) { -webkit-transition-delay: 0.18s; transition-delay: 0.18s; } .aniTextUp01 span:nth-child(4) { -webkit-transition-delay: 0.24s; transition-delay: 0.24s; } .aniTextUp01 span:nth-child(5) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .aniTextUp01 span:nth-child(6) { -webkit-transition-delay: 0.36s; transition-delay: 0.36s; } .aniTextUp01 span:nth-child(7) { -webkit-transition-delay: 0.42s; transition-delay: 0.42s; } .aniTextUp01 span:nth-child(8) { -webkit-transition-delay: 0.48s; transition-delay: 0.48s; } .aniTextUp01 span:nth-child(9) { -webkit-transition-delay: 0.54s; transition-delay: 0.54s; } .aniTextUp01 span:nth-child(10) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .aniTextUp01 span:nth-child(11) { -webkit-transition-delay: 0.66s; transition-delay: 0.66s; } .aniTextUp01 span:nth-child(12) { -webkit-transition-delay: 0.72s; transition-delay: 0.72s; } .aniTextUp01 span:nth-child(13) { -webkit-transition-delay: 0.78s; transition-delay: 0.78s; } .aniTextUp01 span:nth-child(14) { -webkit-transition-delay: 0.84s; transition-delay: 0.84s; } .aniTextUp01 span:nth-child(15) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .aniTextUp01 span:nth-child(16) { -webkit-transition-delay: 0.96s; transition-delay: 0.96s; } .aniTextUp01 span:nth-child(17) { -webkit-transition-delay: 1.02s; transition-delay: 1.02s; } .aniTextUp01 span:nth-child(18) { -webkit-transition-delay: 1.08s; transition-delay: 1.08s; } .aniTextUp01 span:nth-child(19) { -webkit-transition-delay: 1.14s; transition-delay: 1.14s; } .aniTextUp01 span:nth-child(20) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .aniTextUp01 span:nth-child(21) { -webkit-transition-delay: 1.26s; transition-delay: 1.26s; } .aniTextUp01 span:nth-child(22) { -webkit-transition-delay: 1.32s; transition-delay: 1.32s; } .aniTextUp01 span:nth-child(23) { -webkit-transition-delay: 1.38s; transition-delay: 1.38s; } .aniTextUp01 span:nth-child(24) { -webkit-transition-delay: 1.44s; transition-delay: 1.44s; } .aniTextUp01 span:nth-child(25) { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } .aniTextUp01 span:nth-child(26) { -webkit-transition-delay: 1.56s; transition-delay: 1.56s; } .aniTextUp01 span:nth-child(27) { -webkit-transition-delay: 1.62s; transition-delay: 1.62s; } .aniTextUp01 span:nth-child(28) { -webkit-transition-delay: 1.68s; transition-delay: 1.68s; } .aniTextUp01 span:nth-child(29) { -webkit-transition-delay: 1.74s; transition-delay: 1.74s; } .aniTextUp01 span:nth-child(30) { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; } .aniTextUp01.js-ani-on { opacity: 1; } .aniTextUp01.js-ani-on span { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .aniTextGlow { opacity: 0; } .aniTextGlow.js-ani-on { opacity: 1; } .aniTextGlow.js-ani-on .char { display: inline-block; -webkit-animation-name: glow_anime_on; animation-name: glow_anime_on; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .aniTextGlow.js-ani-on .char:nth-child(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .aniTextGlow.js-ani-on .char:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .aniTextGlow.js-ani-on .char:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .aniTextGlow.js-ani-on .char:nth-child(4) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .aniTextGlow.js-ani-on .char:nth-child(5) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .aniTextGlow.js-ani-on .char:nth-child(6) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .aniTextGlow.js-ani-on .char:nth-child(7) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .aniTextGlow.js-ani-on .char:nth-child(8) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .aniTextGlow.js-ani-on .char:nth-child(9) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .aniTextGlow.js-ani-on .char:nth-child(10) { -webkit-animation-delay: 1s; animation-delay: 1s; } .aniTextGlow.js-ani-on .char:nth-child(11) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .aniTextGlow.js-ani-on .char:nth-child(12) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .aniTextGlow.js-ani-on .char:nth-child(13) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .aniTextGlow.js-ani-on .char:nth-child(14) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .aniTextGlow.js-ani-on .char:nth-child(15) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .aniTextGlow.js-ani-on .char:nth-child(16) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .aniTextGlow.js-ani-on .char:nth-child(17) { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .aniTextGlow.js-ani-on .char:nth-child(18) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .aniTextGlow.js-ani-on .char:nth-child(19) { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } .aniTextGlow.js-ani-on .char:nth-child(20) { -webkit-animation-delay: 2s; animation-delay: 2s; } .aniTextGlow.js-ani-on .char:nth-child(21) { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .aniTextGlow.js-ani-on .char:nth-child(22) { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .aniTextGlow.js-ani-on .char:nth-child(23) { -webkit-animation-delay: 2.3s; animation-delay: 2.3s; } .aniTextGlow.js-ani-on .char:nth-child(24) { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .aniTextGlow.js-ani-on .char:nth-child(25) { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .aniTextGlow.js-ani-on .char:nth-child(26) { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .aniTextGlow.js-ani-on .char:nth-child(27) { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } .aniTextGlow.js-ani-on .char:nth-child(28) { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; } .aniTextGlow.js-ani-on .char:nth-child(29) { -webkit-animation-delay: 2.9s; animation-delay: 2.9s; } .aniTextGlow.js-ani-on .char:nth-child(30) { -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes glow_anime_on { 0% { opacity: 0; text-shadow: 0 0 0 #f60, 0 0 0 #f60; } 50% { opacity: 1; text-shadow: 0 0 10px #f60, 0 0 15px #f60; } 99% { opacity: 1; text-shadow: 0 0 0 #f60, 0 0 0 #f60; } 100% { opacity: 1; text-shadow: none; } } @keyframes glow_anime_on { 0% { opacity: 0; text-shadow: 0 0 0 #f60, 0 0 0 #f60; } 50% { opacity: 1; text-shadow: 0 0 10px #f60, 0 0 15px #f60; } 99% { opacity: 1; text-shadow: 0 0 0 #f60, 0 0 0 #f60; } 100% { opacity: 1; text-shadow: none; } } .caratLine { padding-bottom: 0px; background-repeat: no-repeat; background-size: 0% 100%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(0, #ff99bc)); background-image: linear-gradient(180deg, transparent 80%, #ff99bc 0); -webkit-transition: all 1s; transition: all 1s; } .caratLine.js-ani-on { background-size: 100% 100%; -webkit-transition: all 1s; transition: all 1s; } .ani-list > * { -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition-duration: 1.5s; transition-duration: 1.5s; opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .ani-list.js-ani-on > * { opacity: 1; -webkit-transform: none; transform: none; -webkit-filter: blur(0); filter: blur(0); } .ani-list.js-ani-on > *:nth-child(1) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .ani-list.js-ani-on > *:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .ani-list.js-ani-on > *:nth-child(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .ani-list.js-ani-on > *:nth-child(4) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .ani-list.js-ani-on > *:nth-child(5) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .ani-list.js-ani-on > *:nth-child(6) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .ani-list.js-ani-on > *:nth-child(7) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } .ani-list.js-ani-on > *:nth-child(8) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .ani-list.js-ani-on > *:nth-child(9) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .ani-list.js-ani-on > *:nth-child(10) { -webkit-transition-delay: 1s; transition-delay: 1s; } .ani-list.js-ani-on > *:nth-child(11) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .ani-list.js-ani-on > *:nth-child(12) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .shake-animation { -webkit-animation: shake 4s ease-in-out infinite; animation: shake 4s ease-in-out infinite; } @-webkit-keyframes shake { 0%, 92%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 92.5% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 93% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 93.5% { -webkit-transform: rotate(-3.5deg); transform: rotate(-3.5deg); } 94% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 94.5% { -webkit-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 95% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 95.5% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 96% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 96.5% { -webkit-transform: rotate(-0.5deg); transform: rotate(-0.5deg); } 97% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes shake { 0%, 92%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 92.5% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 93% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 93.5% { -webkit-transform: rotate(-3.5deg); transform: rotate(-3.5deg); } 94% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 94.5% { -webkit-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 95% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 95.5% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); } 96% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 96.5% { -webkit-transform: rotate(-0.5deg); transform: rotate(-0.5deg); } 97% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .sway-animation { -webkit-animation: sway 4s ease-in-out infinite; animation: sway 4s ease-in-out infinite; } @-webkit-keyframes sway { 0%, 100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 50% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes sway { 0%, 100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 50% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } .sway-animation2 { -webkit-animation: sway2 4s ease-in-out infinite; animation: sway2 4s ease-in-out infinite; } @-webkit-keyframes sway2 { 0%, 100% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } } @keyframes sway2 { 0%, 100% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } } @-webkit-keyframes textReveal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0% 0 0); } } @keyframes textReveal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0% 0 0); } } .reveal { position: relative; display: table; } .reveal__text { display: table; position: relative; background: #fff; clip-path: inset(0 100% 0 0); white-space: nowrap; } .reveal.js-ani-on .reveal__text { -webkit-animation: textReveal 0.8s ease forwards; animation: textReveal 0.8s ease forwards; } .reveal.js-ani-on.reveal--delay1 .reveal__text { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .reveal.js-ani-on.reveal--delay2 .reveal__text { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .reveal.js-ani-on.reveal--delay3 .reveal__text { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .reveal.js-ani-on.reveal--delay4 .reveal__text { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .reveal.js-ani-on.reveal--delay5 .reveal__text { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .reveal.reveal--fast.js-ani-on .reveal__text { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .reveal.reveal--slow.js-ani-on .reveal__text { -webkit-animation-duration: 1.2s; animation-duration: 1.2s; } /* HTML使用例:
基本のテキスト
遅延1のテキスト
高速アニメーション
*/ @-webkit-keyframes passingBar { 0% { left: 0; width: 0; } 50% { left: 0; width: 100%; } 51% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } } @keyframes passingBar { 0% { left: 0; width: 0; } 50% { left: 0; width: 100%; } 51% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } } @-webkit-keyframes passingBarIn { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes passingBarIn { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } .passingBarIn { opacity: 0; } .passingBar.js-ani-on { opacity: 1; position: relative; display: table; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .passingBar.js-ani-on::before { content: ""; display: table; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; -webkit-animation: passingBar 1s ease 0s 1 normal forwards; animation: passingBar 1s ease 0s 1 normal forwards; /* 任意の値 */ background: var(--c-primary); } .passingBar.js-ani-on .passingBarIn { -webkit-animation: passingBarIn 0s ease 0.5s 1 normal forwards; animation: passingBarIn 0s ease 0.5s 1 normal forwards; } .passingBar.js-ani-on.delay1::before { -webkit-animation: passingBar 1s ease 0.2s 1 normal forwards; animation: passingBar 1s ease 0.2s 1 normal forwards; } .passingBar.js-ani-on.delay1 .passingBarIn { -webkit-animation: passingBarIn 0s ease 0.7s 1 normal forwards; animation: passingBarIn 0s ease 0.7s 1 normal forwards; } .passingBar.js-ani-on.delay2::before { -webkit-animation: passingBar 1s ease 0.4s 1 normal forwards; animation: passingBar 1s ease 0.4s 1 normal forwards; } .passingBar.js-ani-on.delay2 .passingBarIn { -webkit-animation: passingBarIn 0s ease 0.9s 1 normal forwards; animation: passingBarIn 0s ease 0.9s 1 normal forwards; } .passingBar.js-ani-on.delay3::before { -webkit-animation: passingBar 1s ease 0.6s 1 normal forwards; animation: passingBar 1s ease 0.6s 1 normal forwards; } .passingBar.js-ani-on.delay3 .passingBarIn { -webkit-animation: passingBarIn 0s ease 1.2s 1 normal forwards; animation: passingBarIn 0s ease 1.2s 1 normal forwards; } .js-ani--img-zoom-down { overflow: hidden; background-color: #333; } .js-ani--img-zoom-down img { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: opacity 2.2s ease, -webkit-transform 2.2s ease; transition: opacity 2.2s ease, -webkit-transform 2.2s ease; transition: opacity 2.2s ease, transform 2.2s ease; transition: opacity 2.2s ease, transform 2.2s ease, -webkit-transform 2.2s ease; } .js-ani--img-zoom-down.js-ani-on img { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .js-ani--letter { opacity: 0; letter-spacing: 0.15em; -webkit-transition: opacity 1.2s ease, letter-spacing 1.8s ease; transition: opacity 1.2s ease, letter-spacing 1.8s ease; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .js-ani--letter.js-ani-on { opacity: 1; letter-spacing: normal; } .js-ani--letter-en { opacity: 0; letter-spacing: 0.2em; -webkit-transition: opacity 1s ease, letter-spacing 1.6s ease; transition: opacity 1s ease, letter-spacing 1.6s ease; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .js-ani--letter-en.js-ani-on { opacity: 1; letter-spacing: normal; } .js-ani--delay-1 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .js-ani--delay-2 { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .js-ani--delay-3 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .js-ani--delay-4 { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .js-ani--delay-5 { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .js-ani--delay-6 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .js-ani.maskReveal { mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(135deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%); mask-size: 250% 250%; -webkit-mask-size: 250% 250%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: 130% 130%; -webkit-mask-position: 130% 130%; } .js-ani.js-ani-on.maskReveal { -webkit-animation-name: mask-animation; animation-name: mask-animation; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes mask-animation { 0% { mask-position: 130% 130%; -webkit-mask-position: 130% 130%; } 100% { mask-position: 0 0; -webkit-mask-position: 0 0; } } @keyframes mask-animation { 0% { mask-position: 130% 130%; -webkit-mask-position: 130% 130%; } 100% { mask-position: 0 0; -webkit-mask-position: 0 0; } } .js-ani.fadeIn, .js-ani.fadeInDown, .js-ani.fadeInDownBig, .js-ani.fadeInLeft, .js-ani.fadeInLeftBig, .js-ani.fadeInRight, .js-ani.fadeInRightBig, .js-ani.fadeInUp, .js-ani.fadeInUpBig, .js-ani.fadeInTopLeft, .js-ani.fadeInTopRight, .js-ani.fadeInBottomLeft, .js-ani.fadeInBottomRight { opacity: 0; -webkit-transition: opacity 1s ease, -webkit-transform 1s ease, -webkit-filter 1.2s ease; transition: opacity 1s ease, -webkit-transform 1s ease, -webkit-filter 1.2s ease; transition: transform 1s ease, opacity 1s ease, filter 1.2s ease; transition: transform 1s ease, opacity 1s ease, filter 1.2s ease, -webkit-transform 1s ease, -webkit-filter 1.2s ease; } .js-ani.filterBlur { -webkit-filter: blur(10px); filter: blur(10px); } .js-ani.fadeInDown { -webkit-transform: translateY(-30px); transform: translateY(-30px); } .js-ani.fadeInDownBig { -webkit-transform: translateY(-80px); transform: translateY(-80px); } .js-ani.fadeInLeft { -webkit-transform: translateX(-30px); transform: translateX(-30px); } .js-ani.fadeInLeftBig { -webkit-transform: translateX(-80px); transform: translateX(-80px); } .js-ani.fadeInRight { -webkit-transform: translateX(30px); transform: translateX(30px); } .js-ani.fadeInRightBig { -webkit-transform: translateX(80px); transform: translateX(80px); } .js-ani.fadeInUp { -webkit-transform: translateY(30px); transform: translateY(30px); } .js-ani.fadeInUpBig { -webkit-transform: translateY(80px); transform: translateY(80px); } .js-ani.fadeInTopLeft { -webkit-transform: translate(-30px, -30px); transform: translate(-30px, -30px); } .js-ani.fadeInTopRight { -webkit-transform: translate(30px, -30px); transform: translate(30px, -30px); } .js-ani.fadeInBottomLeft { -webkit-transform: translate(-30px, 30px); transform: translate(-30px, 30px); } .js-ani.fadeInBottomRight { -webkit-transform: translate(30px, 30px); transform: translate(30px, 30px); } .js-ani.js-ani-on.fadeIn, .js-ani.js-ani-on.fadeInDown, .js-ani.js-ani-on.fadeInDownBig, .js-ani.js-ani-on.fadeInLeft, .js-ani.js-ani-on.fadeInLeftBig, .js-ani.js-ani-on.fadeInRight, .js-ani.js-ani-on.fadeInRightBig, .js-ani.js-ani-on.fadeInUp, .js-ani.js-ani-on.fadeInUpBig, .js-ani.js-ani-on.fadeInTopLeft, .js-ani.js-ani-on.fadeInTopRight, .js-ani.js-ani-on.fadeInBottomLeft, .js-ani.js-ani-on.fadeInBottomRight { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .js-ani.js-ani-on.filterBlur { -webkit-filter: blur(0); filter: blur(0); } .js-ani.scaleUpIn, .js-ani.scaleUpInLeft, .js-ani.scaleUpInRight, .js-ani.scaleDownIn, .js-ani.scaleDownInLeft, .js-ani.scaleDownInRight { opacity: 0; -webkit-transition-duration: 0.7s, 0.3s; transition-duration: 0.7s, 0.3s; } .js-ani.filterBlur { -webkit-filter: blur(10px); filter: blur(10px); -webkit-transition: 1.2s; transition: 1.2s; } .js-ani.scaleUpIn { -webkit-transform: scale(0.93); transform: scale(0.93); } .js-ani.scaleUpInLeft { -webkit-transform: scale(0.85) translate(-30px, 0); transform: scale(0.85) translate(-30px, 0); } .js-ani.scaleUpInRight { -webkit-transform: scale(0.85) translate(30px, 0); transform: scale(0.85) translate(30px, 0); } .js-ani.scaleDownIn { -webkit-transform: scale(1.15); transform: scale(1.15); } .js-ani.scaleDownInLeft { -webkit-transform: scale(1.15) translate(-30px, 0); transform: scale(1.15) translate(-30px, 0); } .js-ani.scaleDownInRight { -webkit-transform: scale(1.15) translate(30px, 0); transform: scale(1.15) translate(30px, 0); } .js-ani.js-ani-on.scaleUpIn, .js-ani.js-ani-on.scaleUpInLeft, .js-ani.js-ani-on.scaleUpInRight, .js-ani.js-ani-on.scaleDownIn, .js-ani.js-ani-on.scaleDownInLeft, .js-ani.js-ani-on.scaleDownInRight { opacity: 1; -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); } .js-ani.js-ani-on.filterBlur { -webkit-filter: blur(0); filter: blur(0); } .js-ani-on.delay1 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .js-ani-on.delay2 { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .js-ani-on.delay3 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .js-ani-on.delay4 { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .js-ani-on.delay5 { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .js-ani-on.delay6 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .js-ani-on.delay7 { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .js-ani-on.delay8 { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .js-ani-on.delay9 { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .js-ani-on.delay10 { -webkit-transition-delay: 1s; transition-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; } .js-ani-on.delay11 { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .js-ani-on.delay12 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @media only screen and (max-width: 768px) { .js-ani-on.delay1, .js-ani-on.delay2, .js-ani-on.delay3, .js-ani-on.delay4, .js-ani-on.delay4, .js-ani-on.delay5, .js-ani-on.delay6, .js-ani-on.delay7, .js-ani-on.delay8, .js-ani-on.delay9, .js-ani-on.delay10, .js-ani-on.delay11, .js-ani-on.delay12 { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; } } .gallery-box { padding: min(10vw, 100px) 0; } .gallery-box__inner { max-width: 1000px; margin: auto; } .gallery-box ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: min(3vw, 30px) 3%; margin: 0 !important; } .gallery-box li { width: 48.5%; list-style: none; } .gallery-box img { height: 100% !important; -o-object-fit: cover; object-fit: cover; } @media (min-width: 768px) { .gallery-box ul { gap: min(3vw, 30px) 3%; } .gallery-box li { width: 22.75%; } } .page-slider { position: relative; margin-top: var(--mb-container); margin-bottom: var(--mb-container); } .page-slider .swiper-button-next:after, .page-slider .swiper-button-prev:after { color: #fff; text-shadow: 0 0 10px #333; font-size: clamp(1.875rem, 1.7279411765rem + 0.7352941176vw, 2.5rem); } .page-slider .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; } .page-loop-slider { position: relative; margin-top: var(--mb-container); margin-bottom: var(--mb-container); overflow: hidden; } .page-loop-slider.is-bleed { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } .page-loop-slider .swiper-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .page-loop-slider .swiper-slide { width: auto; } .page-loop-slider .swiper-slide img { display: block; height: clamp(160px, 20vw, 260px); width: auto; -o-object-fit: cover; object-fit: cover; } .parts-faq { margin-bottom: min(4vw, 40px); } .parts-faq__q { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 15px 45px 15px 15px; cursor: pointer; color: var(--c-text); border: 1px solid #ddd; } .parts-faq__q:not(:first-of-type) { border-top: none; } .parts-faq__q::before { content: "Q"; -ms-flex-negative: 0; flex-shrink: 0; width: 34px; height: 34px; margin-right: 10px; background-color: var(--c-text); border-radius: 50%; color: #fff; font-weight: 700; text-align: center; line-height: 34px; } .parts-faq__q span::before, .parts-faq__q span::after { content: ""; display: inline-block; position: absolute; right: 20px; top: 50%; width: 13px; height: 2px; background-color: var(--c-text); -webkit-transition: all, 0.3s; transition: all, 0.3s; } .parts-faq__q span::before { -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 1s; transition: opacity 1s; } .parts-faq__q span::after { -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); opacity: 1; } .parts-faq__q.open span::before { opacity: 0; } .parts-faq__q.open span::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .parts-faq__a { display: -webkit-box; display: -ms-flexbox; display: flex; padding: min(4vw, 40px); border: 1px solid #ddd; border-top: none; background-color: #f5f5f5; } .parts-faq__a div *:last-child { margin-bottom: 0 !important; } .parts-faq__a::before { font-weight: 700; margin-right: 10px; } .entry-content img { max-width: 100%; height: auto; } .entry-content ol, .entry-content ul:not(.imgs-block) { margin-left: 30px; margin-bottom: 1em; } .entry-content ol:not(.imgs-block) { margin-left: 25px; } .entry-content ul { list-style-type: disc; } .entry-content ol { list-style-type: decimal; } .entry-content p { margin-bottom: 10px; } .entry-content table { width: 100%; margin-bottom: 1em; } .entry-content table caption { margin-bottom: 0.5em; text-align: center; font-size: 16px; } .entry-content table th, .entry-content table td { border: 1px solid var(--c-table-border); text-align: center; } .entry-content table thead th { background: var(--c-table-th-bg); color: var(--c-table-th); } .entry-content table tbody th { background: var(--c-table-th-bg); color: var(--c-table-th); } .entry-content table td { background: var(--c-table-td-bg); text-align: left; } .entry-content .alignright { text-align: right; } .entry-content .alignleft { -moz-text-align-last: auto; text-align-last: auto; } .entry-content .aligncenter { text-align: center; } .custom_txt { margin-bottom: 40px; } .custom_txt > *:last-child { margin-bottom: 0; } table th, table td { padding: 10px 20px; word-break: break-all; } @media (max-width: 576px) { table th, table td { padding: 10px 10px; } } table td:first-child { background-color: #f7f7f7; border: 1px solid #fff; } table.normal_table, table.menu_table { width: 100%; margin: 0 auto 10%; } @media (min-width: 768px) { table.normal_table, table.menu_table { margin: 0 auto 5%; } } table.menu_table tr:first-child th, table.menu_table tr:first-child td { padding-top: 0; word-break: break-all; } table.menu_table tr th, table.menu_table tr td { border: none; background: none; } table.menu_table tr th { min-width: 100px; padding-top: 20px; padding-right: 10px; border-bottom: 1px solid var(--c-secondary); color: var(--c-text); text-align: left; } table.menu_table tr td { text-align: right; border-bottom: 1px solid var(--c-secondary); padding-top: 20px; } table.menu_table tr td.td_cp2 { font-size: 13px; padding-top: 6px; border-bottom: none; text-align: left; } table.menu_table tr td.td_cp2 p { margin-bottom: 0; } table.menu_table.menu_table_td_left tr td { text-align: left; } table.normal_table { border-collapse: collapse; } table.normal_table tr th, table.normal_table tr td { padding: 10px 20px; word-break: break-all; } table.normal_table tr th { width: 30%; background-color: #f9f9f9; border: 1px solid #ddd; color: var(--c-primary); font-weight: normal; text-align: center; vertical-align: middle; } table.normal_table tr:last-child th { border-bottom: 1px solid #ddd; } table.normal_table tr td { border: 1px solid #ddd; } table.normal_table tr td.td_cp2 { padding-top: 6px; border: 1px solid #ddd; font-size: 13px; text-align: left; } table.normal_table tr td.td_cp2 p { margin-bottom: 0; } @media only screen and (max-width: 768px) { table.normal_table tr th, table.normal_table tr td { padding: 10px; } } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { min-width: 600px; } .table_notes { display: block; margin: 20px 0 10px; text-align: center; color: #999; } @media (min-width: 769px) { .table_notes { display: none; } } .custom_table_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 10%; } .custom_table_scroll table.custom_table { width: 768px; margin-bottom: 20px; } .custom_table_scroll table.custom_table tr th { width: auto; } @media (min-width: 769px) { .custom_table_scroll { margin: 0 0 5%; } .custom_table_scroll table.custom_table { width: 100%; } } .entry-content .list-block { margin-bottom: 20px; } .entry-content .list-block ul { padding: 0 0 0 27px; margin-left: 0; list-style-type: disc; } .entry-content .list-block ol { padding: 0 0 0 22px; margin-left: 0; margin-bottom: 0; } .entry-content .list-block li + li { margin-top: 5px; } .entry-content .list-block ul.check { padding: 0 0 0 0; list-style: none; } .entry-content .list-block ul.check li { position: relative; padding-left: 26px; } .entry-content .list-block ul.check li::before { content: ""; position: absolute; left: 0; top: calc(50% - 10px); width: 20px; height: 20px; background-color: var(--c-primary); -webkit-mask-image: url("/wp-content/uploads/parts/i_check.svg"); mask-image: url("/wp-content/uploads/parts/i_check.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .entry-content .custom_img { margin-bottom: 30px; } .imgs-block { margin-bottom: 30px; text-align: center; list-style: none; letter-spacing: -0.4em; } .imgs-block li { width: 48%; margin-right: 4%; display: inline-block; letter-spacing: normal; vertical-align: top; } .imgs-block li:last-child { margin-right: 0; } .imgs-block li .imgs-block-img { margin-bottom: 5px; } .imgs-block li .imgs-block-ttl, .imgs-block li .imgs-block-txt { text-align: left; } .imgs-block li .imgs-block-ttl { font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--c-primary); } .imgs-block li .imgs-block-btn a { display: inline-block; min-width: 240px; padding: 0.5em 1.8em; background-color: var(--c-primary); border-radius: 3px; color: var(--c-btn-text); font-size: 16px; line-height: 1.42; text-decoration: none; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; letter-spacing: 2px; } .imgs-block li .imgs-block-btn a:hover { -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; opacity: 0.9; } .imgs-block.set-3 li { width: 31%; margin-right: 3.5%; } .imgs-block.set-3 li:last-child { margin-right: 0; } .imgs-block.set-4 li { width: 23%; margin-right: 2.6666666667%; } .imgs-block.set-4 li:last-child { margin-right: 0; } @media only screen and (max-width: 768px) { .imgs-block li { display: inline-block; } .imgs-block li:last-child { margin-right: 0; } .imgs-block li .imgs-block-img { margin-bottom: 10px; } .imgs-block li .imgs-block-btn a { min-width: 0; padding: 0.5em 0.5em; font-size: 14px; } .imgs-block.imgs-block-sp-tate li { width: 100%; margin-right: 0; margin-bottom: 20px; } .imgs-block.imgs-block-sp-tate2 li { width: 49%; margin-right: 2%; margin-bottom: 20px; } .imgs-block.imgs-block-sp-tate2 li:nth-child(2n) { margin-right: 0; } .imgs-block.imgs-block-sp-tate2 li:last-child, .imgs-block.imgs-block-sp-tate2 li:nth-child(3) { margin-bottom: 0; } } .custom_video { position: relative; width: 80%; margin: 0 auto 30px; padding-top: 50.25%; } .custom_video iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } @media only screen and (max-width: 768px) { .custom_video { width: 100%; padding-top: 56.25%; } } .custom_google_map { margin: 0 auto 30px; } .custom_google_map iframe { width: 100%; } .custom_anchor_link_text a { display: inline-block; padding: 5px 10px; margin: 0 10px 10px; background-color: var(--c-primary); border-radius: 3px; color: #fff; text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s; } .custom_anchor_link_text a:hover { background-color: rgba(var(--c-primary-rgb), 0.8); } h1, h2, h3, h4, h5, h6 { font-weight: 500; } .page-ttl { position: relative; padding: min(10vw, 100px) var(--space-content); background-color: var(--c-h1-bg); background-position: center center; background-size: cover; color: var(--c-h1-text); text-align: center; font-size: clamp(1.375rem, 1.2573529412rem + 0.5882352941vw, 1.875rem); line-height: 1.1; text-shadow: 0 0 10px #333; } .page-ttl::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0))); background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); } .page-ttl span { display: inline-block; max-width: 1000px; padding: 0 15px; -webkit-box-sizing: content-box; box-sizing: content-box; } .single .page-ttl::after, .archive .page-ttl::after, .post-type-archive .page-ttl::after, .category .page-ttl::after, .tag .page-ttl::after, .date .page-ttl::after, .blog .page-ttl::after { content: none; } h2:not(.no-style) { display: table; position: relative; padding: 0 0 8px; margin: 1.5em auto 1.5em; border-bottom: min(0.9vw, 5px) dotted var(--c-h2-bg); text-align: center; font-size: clamp(1.25rem, 1.1323529412rem + 0.5882352941vw, 1.75rem); line-height: 1.4; } h2:not(.no-style):first-child { margin-top: 0; } h3:not(.no-style) { position: relative; padding: 14px 0 11px; margin: 1em 0 1em 0; border-top: 1px solid var(--c-h3-text); border-bottom: 1px solid var(--c-h3-text); color: var(--c-h3-text); font-size: clamp(1.125rem, 1.0661764706rem + 0.2941176471vw, 1.375rem); line-height: 1.4; } h3:not(.no-style):first-child { margin-top: 0; } h4:not(.no-style) { position: relative; margin: 1em 0 1em 0; padding-left: 14px; font-size: clamp(1rem, 0.9411764706rem + 0.2941176471vw, 1.25rem); line-height: 1.4; color: var(--c-h4-text); } h4:not(.no-style):first-child { margin-top: 0; } h4:not(.no-style)::before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; height: 100%; margin: 0 0; background: var(--c-h2-bg); } h5:not(.no-style) { margin: 0.5em 0 0.5em 0; font-size: clamp(0.9375rem, 0.8933823529rem + 0.2205882353vw, 1.125rem); line-height: 1.4; color: var(--c-h4-text); } h5:not(.no-style):first-child { margin-top: 0; } .mk-mv001 { display: -webkit-box; display: -ms-flexbox; display: flex; height: 550px; position: relative; margin: 0 auto 0; } @media (min-width: 860px) { .mk-mv001 { height: 800px; } } .mk-mv001__inner { position: relative; } .mk-mv001__slider-copy-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; bottom: 17%; left: 5%; right: 5%; z-index: 5; padding: 0 10px; margin: auto; color: #fff; font-size: clamp(1.125rem, 0.8014705882rem + 1.6176470588vw, 2.5rem); font-family: var(--ff-midashi); font-weight: 500; line-height: 1.4; text-shadow: #fff 1px 1px 15px, #fff -1px 1px 15px, #fff 1px -1px 15px, #fff 1px 1px 15px, #fff -1px 1px 15px, #fff 1px -1px 15px, #fff -1px 1px 15px, #fff 1px -1px 15px, #fff -1px 1px 15px, #fff 1px -1px 15px; } .mk-mv001__copy { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; bottom: min(4vw, 100px); right: min(4vw, 100px); z-index: 1; width: 55%; max-width: 400px; margin: auto; } .mk-mv001__copy img { width: auto !important; } @media (min-width: 768px) { .mk-mv001__copy { width: 40%; } } .mk-mv001__copy-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; bottom: 0; left: 3%; right: 3%; z-index: 5; padding: 0 10px; margin: auto; color: #000; font-size: clamp(1.1875rem, 0.7316176471rem + 2.2794117647vw, 3.125rem); font-family: var(--ff-midashi); font-weight: 500; text-align: center; text-shadow: #fff 1px 1px 15px, #fff -1px 1px 15px, #fff 1px -1px 15px, #fff 1px 1px 15px, #fff -1px 1px 15px, #fff 1px -1px 15px, #fff -1px 1px 15px, #fff 1px -1px 15px, #fff -1px 1px 15px, #fff 1px -1px 15px; } .mk-mv001 .swiper-button-next:after, .mk-mv001 .swiper-button-prev:after { color: #fff; font-size: min(7vw, 40px); } .mk-mv001 .swiper-pagination-bullet { width: min(3.5vw, 16px); height: min(3.5vw, 16px); background: #fff; opacity: 1; cursor: pointer; } .mk-mv001 .swiper-pagination-bullet-active { background-color: var(--c-primary); } .mk-mv001 .swiper-slide { z-index: 1; } .mk-mv001 .swiper-slide-active, .mk-mv001 .swiper-slide-duplicate-active, .mk-mv001 .swiper-slide-prev { overflow: hidden; } .mk-mv001 .swiper-slide-active > img, .mk-mv001 .swiper-slide-duplicate-active > img, .mk-mv001 .swiper-slide-prev > img { -webkit-animation: zoomUp 8s linear 0s normal both; animation: zoomUp 8s linear 0s normal both; } .mk-mv001 .swiper-slide > img, .mk-mv001 .swiper-slide > a > img, .mk-mv001 .swiper-slide picture > img, .mk-mv001 .swiper-slide > a picture > img { height: auto; width: 100%; height: 550px; -o-object-fit: cover; object-fit: cover; -o-object-position: center bottom; object-position: center bottom; } @media (min-width: 860px) { .mk-mv001 .swiper-slide > img, .mk-mv001 .swiper-slide > a > img, .mk-mv001 .swiper-slide picture > img, .mk-mv001 .swiper-slide > a picture > img { height: 800px; } } @-webkit-keyframes zoomUp { 0% { -webkit-transform: scale(1.07); transform: scale(1.07); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes zoomUp { 0% { -webkit-transform: scale(1.07); transform: scale(1.07); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .more a { position: relative; display: inline-block; padding: 7px 18px; background-color: var(--c-btn-bg); border: 1px solid var(--c-btn-bg); text-decoration: none; border-radius: 5px; color: #fff; font-size: clamp(0.875rem, 0.8455882353rem + 0.1470588235vw, 1rem); line-height: 1; letter-spacing: 2px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .more a.add_arrow { padding: 7px 18px 5px; } .more a.add_arrow::before, .more a.add_arrow::after { position: absolute; top: -2px; right: 8px; bottom: 0; content: ""; margin: auto; vertical-align: middle; width: 4px; height: 4px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .more a:hover { background: #fff; border: 1px solid var(--c-btn-bg); color: var(--c-btn-bg); } .more a:hover.add_arrow::before, .more a:hover.add_arrow::after { border-top: 1px solid var(--c-btn-bg); border-right: 1px solid var(--c-btn-bg); } .more.inverse a { color: var(--c-btn-bg); background: #fff; } .more.inverse a.add_arrow::before, .more.inverse a.add_arrow::after { border-top: 1px solid var(--c-btn-bg); border-right: 1px solid var(--c-btn-bg); } .more.inverse a:hover { background: var(--c-btn-bg); border: 1px solid #fff; color: #fff; } .more.inverse a:hover.add_arrow::before, .more.inverse a:hover.add_arrow::after { border-top: 1px solid #fff; border-right: 1px solid #fff; } /* btn ----------------------------------------------------*/ .parts_btn_type_a, .parts_btn_type_b, .parts_btn_type_c { margin: 20px 0; } .parts_btn_type_a { margin: 20px 0; } .parts_btn_type_a a { position: relative; display: inline-block; min-width: 280px; padding: 1em 2em; background-color: var(--c-btn-bg); color: var(--c-btn-text); font-size: 16px; line-height: 1.42; text-decoration: none; text-align: center; border: 1px solid var(--c-btn-bg); -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; letter-spacing: 2px; } .parts_btn_type_a a:hover { color: var(--c-btn-bg); background: var(--c-btn-text); border: 1px solid var(--c-btn-bg); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; } .parts_btn_type_a a::after { content: ""; display: block; position: absolute; top: 50%; right: 7%; margin: auto; width: 6px; height: 6px; border-top: 1px solid var(--c-btn-text); border-right: 1px solid var(--c-btn-text); -webkit-transform: translate(0, -50%) rotate(45deg); transform: translate(0, -50%) rotate(45deg); -webkit-transition: 0.2s; transition: 0.2s; } .parts_btn_type_a a:hover::after { right: 5%; border-top: 1px solid var(--c-btn-bg); border-right: 1px solid var(--c-btn-bg); } .parts_btn_type_a.btn_sm a { font-size: 14px; } .parts_btn_type_a.btn_lg a { font-size: 18px; } .parts_btn_type_b { margin: 20px 0; } .parts_btn_type_b a { display: inline-block; padding: 1em 1.8em; background-color: var(--c-btn-text); border: 2px solid var(--c-btn-bg); border-radius: 5px; color: var(--c-btn-bg); font-size: 16px; line-height: 1.42; text-decoration: none; -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; letter-spacing: 2px; } .parts_btn_type_b a:hover { border-radius: 5px; background-color: var(--c-btn-bg); color: var(--c-btn-text); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; } .parts_btn_type_b.btn_sm a { font-size: 14px; } .parts_btn_type_b.btn_lg a { font-size: 18px; } .parts_btn_type_c { margin: 20px 0; } .parts_btn_type_c a { display: inline-block; padding: 1em 1.8em; background-color: var(--c-btn-bg); border-radius: 2em; color: var(--c-btn-text); font-size: 16px; line-height: 1.42; text-decoration: none; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; letter-spacing: 2px; } .parts_btn_type_c a:hover { background: var(--c-secondary); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; } .parts_btn_type_c.btn_sm a { font-size: 14px; } .parts_btn_type_c.btn_lg a { font-size: 18px; } .btnBox { text-align: center; margin: 20px 0; } .btn01 a { min-width: 300px; padding: 10px 30px; display: inline-block; background-color: var(--c-primary); text-decoration: none; -webkit-appearance: none; border-radius: 5px; font-size: 16px; color: #FFF; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; letter-spacing: 2px; } .btn01 a:hover { border-radius: 5px; background: var(--c-secondary); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; } .btn02 a { font-size: 16px; padding: 10px 70px; display: inline-block; background-color: #193662; text-decoration: none; -webkit-appearance: none; border-radius: 5px; color: #fff; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; letter-spacing: 2px; } .btn02 a:hover { border-radius: 5px; background: var(--c-primary); color: #fff; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; } @media screen and (max-width: 768px) { .btn01 a { width: 90%; min-width: auto; padding: 10px 40px; } .btn02 a { padding: 10px 30px; } } ul.wp-block-gallery { margin-left: 0; } .wp-block-media-text { margin-bottom: 1em; } @media (max-width: 768px) { .col-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } @media (max-width: 768px) { .col-reverse-all--even .wp-block-columns:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .col-reverse-all--odd .wp-block-columns:nth-child(odd) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .grecaptcha-badge { visibility: hidden; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.8px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .sticky, .gallery-caption, .bypostauthor { margin: 0; } blockquote { position: relative; z-index: 2; padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; font-style: italic; color: #464646; background: #efefef; border: none; } blockquote::before, blockquote::after { display: inline-block; position: absolute; z-index: -1; content: "\f10d"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: rgba(255, 255, 255, 0.7); font-size: 46px; } blockquote::before { top: 0; left: 15px; } blockquote::after { bottom: 0; right: 15px; } .wp-block-embed__wrapper { width: 100%; max-width: 560px; margin: 0 auto min(5vw, 50px); aspect-ratio: 16/9; } .wp-block-embed__wrapper iframe { width: 100%; height: 100%; } .c-primary { color: var(--c-primary); } .c-secondary { color: var(--c-secondary); } .c-red { color: var(--c-red); } a { color: var(--c-primary); } a:hover { text-decoration: none; } a.text-link { text-decoration: underline; } .text-gra { background: var(--c-gra); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bg_primary_over { width: 100vw; padding: min(10vw, 100px) 20px; margin: 0 calc(50% - 50vw) var(--mb-container); background-color: rgba(var(--c-primary-rgb), 0.1); } .bg_primary_over .inner { padding: 0; } .bg_primary, .bg_white, .bg_gray, .bg_pink, .bg_blue, .bg_green { padding: min(5vw, 50px); margin: 0 0 var(--mb-container); background-color: var(--c-white); } .bg_primary *:last-child, .bg_primary *:last-child > *:last-child, .bg_white *:last-child, .bg_white *:last-child > *:last-child, .bg_gray *:last-child, .bg_gray *:last-child > *:last-child, .bg_pink *:last-child, .bg_pink *:last-child > *:last-child, .bg_blue *:last-child, .bg_blue *:last-child > *:last-child, .bg_green *:last-child, .bg_green *:last-child > *:last-child { margin-bottom: 0; } .bg_primary { background-color: rgba(var(--c-primary-rgb), 0.1); } .bg_gray { background-color: var(--c-gray); } .bg_pink { background-color: var(--c-pink); } .bg_blue { background-color: var(--c-blue); } .bg_green { background-color: var(--c-green); } .row-1-9, .row-2-8, .row-3-7, .row-4-6, .row-5-5, .row-6-4, .row-7-3, .row-8-2, .row-9-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 10%; } .row-1-9 .left, .row-1-9 .right, .row-2-8 .left, .row-2-8 .right, .row-3-7 .left, .row-3-7 .right, .row-4-6 .left, .row-4-6 .right, .row-5-5 .left, .row-5-5 .right, .row-6-4 .left, .row-6-4 .right, .row-7-3 .left, .row-7-3 .right, .row-8-2 .left, .row-8-2 .right, .row-9-1 .left, .row-9-1 .right { width: 100%; } .row-1-9 .left img, .row-1-9 .right img, .row-2-8 .left img, .row-2-8 .right img, .row-3-7 .left img, .row-3-7 .right img, .row-4-6 .left img, .row-4-6 .right img, .row-5-5 .left img, .row-5-5 .right img, .row-6-4 .left img, .row-6-4 .right img, .row-7-3 .left img, .row-7-3 .right img, .row-8-2 .left img, .row-8-2 .right img, .row-9-1 .left img, .row-9-1 .right img { max-width: 90%; margin: auto; display: block; margin-bottom: 20px; } @media (min-width: 768px) { .row-1-9, .row-2-8, .row-3-7, .row-4-6, .row-5-5, .row-6-4, .row-7-3, .row-8-2, .row-9-1 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 5%; } .row-1-9.reverse, .row-2-8.reverse, .row-3-7.reverse, .row-4-6.reverse, .row-5-5.reverse, .row-6-4.reverse, .row-7-3.reverse, .row-8-2.reverse, .row-9-1.reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .row-1-9.row-1-9 .left, .row-2-8.row-1-9 .left, .row-3-7.row-1-9 .left, .row-4-6.row-1-9 .left, .row-5-5.row-1-9 .left, .row-6-4.row-1-9 .left, .row-7-3.row-1-9 .left, .row-8-2.row-1-9 .left, .row-9-1.row-1-9 .left { width: 8%; } .row-1-9.row-1-9 .right, .row-2-8.row-1-9 .right, .row-3-7.row-1-9 .right, .row-4-6.row-1-9 .right, .row-5-5.row-1-9 .right, .row-6-4.row-1-9 .right, .row-7-3.row-1-9 .right, .row-8-2.row-1-9 .right, .row-9-1.row-1-9 .right { width: 89%; } .row-1-9.row-2-8 .left, .row-2-8.row-2-8 .left, .row-3-7.row-2-8 .left, .row-4-6.row-2-8 .left, .row-5-5.row-2-8 .left, .row-6-4.row-2-8 .left, .row-7-3.row-2-8 .left, .row-8-2.row-2-8 .left, .row-9-1.row-2-8 .left { width: 18%; } .row-1-9.row-2-8 .right, .row-2-8.row-2-8 .right, .row-3-7.row-2-8 .right, .row-4-6.row-2-8 .right, .row-5-5.row-2-8 .right, .row-6-4.row-2-8 .right, .row-7-3.row-2-8 .right, .row-8-2.row-2-8 .right, .row-9-1.row-2-8 .right { width: 79%; } .row-1-9.row-3-7 .left, .row-2-8.row-3-7 .left, .row-3-7.row-3-7 .left, .row-4-6.row-3-7 .left, .row-5-5.row-3-7 .left, .row-6-4.row-3-7 .left, .row-7-3.row-3-7 .left, .row-8-2.row-3-7 .left, .row-9-1.row-3-7 .left { width: 28%; } .row-1-9.row-3-7 .right, .row-2-8.row-3-7 .right, .row-3-7.row-3-7 .right, .row-4-6.row-3-7 .right, .row-5-5.row-3-7 .right, .row-6-4.row-3-7 .right, .row-7-3.row-3-7 .right, .row-8-2.row-3-7 .right, .row-9-1.row-3-7 .right { width: 69%; } .row-1-9.row-4-6 .left, .row-2-8.row-4-6 .left, .row-3-7.row-4-6 .left, .row-4-6.row-4-6 .left, .row-5-5.row-4-6 .left, .row-6-4.row-4-6 .left, .row-7-3.row-4-6 .left, .row-8-2.row-4-6 .left, .row-9-1.row-4-6 .left { width: 38%; } .row-1-9.row-4-6 .right, .row-2-8.row-4-6 .right, .row-3-7.row-4-6 .right, .row-4-6.row-4-6 .right, .row-5-5.row-4-6 .right, .row-6-4.row-4-6 .right, .row-7-3.row-4-6 .right, .row-8-2.row-4-6 .right, .row-9-1.row-4-6 .right { width: 59%; } .row-1-9.row-5-5 .left, .row-2-8.row-5-5 .left, .row-3-7.row-5-5 .left, .row-4-6.row-5-5 .left, .row-5-5.row-5-5 .left, .row-6-4.row-5-5 .left, .row-7-3.row-5-5 .left, .row-8-2.row-5-5 .left, .row-9-1.row-5-5 .left { width: 49%; } .row-1-9.row-5-5 .right, .row-2-8.row-5-5 .right, .row-3-7.row-5-5 .right, .row-4-6.row-5-5 .right, .row-5-5.row-5-5 .right, .row-6-4.row-5-5 .right, .row-7-3.row-5-5 .right, .row-8-2.row-5-5 .right, .row-9-1.row-5-5 .right { width: 48%; } .row-1-9.row-6-4 .left, .row-2-8.row-6-4 .left, .row-3-7.row-6-4 .left, .row-4-6.row-6-4 .left, .row-5-5.row-6-4 .left, .row-6-4.row-6-4 .left, .row-7-3.row-6-4 .left, .row-8-2.row-6-4 .left, .row-9-1.row-6-4 .left { width: 59%; } .row-1-9.row-6-4 .right, .row-2-8.row-6-4 .right, .row-3-7.row-6-4 .right, .row-4-6.row-6-4 .right, .row-5-5.row-6-4 .right, .row-6-4.row-6-4 .right, .row-7-3.row-6-4 .right, .row-8-2.row-6-4 .right, .row-9-1.row-6-4 .right { width: 38%; } .row-1-9.row-7-3 .left, .row-2-8.row-7-3 .left, .row-3-7.row-7-3 .left, .row-4-6.row-7-3 .left, .row-5-5.row-7-3 .left, .row-6-4.row-7-3 .left, .row-7-3.row-7-3 .left, .row-8-2.row-7-3 .left, .row-9-1.row-7-3 .left { width: 69%; } .row-1-9.row-7-3 .right, .row-2-8.row-7-3 .right, .row-3-7.row-7-3 .right, .row-4-6.row-7-3 .right, .row-5-5.row-7-3 .right, .row-6-4.row-7-3 .right, .row-7-3.row-7-3 .right, .row-8-2.row-7-3 .right, .row-9-1.row-7-3 .right { width: 28%; } .row-1-9.row-8-2 .left, .row-2-8.row-8-2 .left, .row-3-7.row-8-2 .left, .row-4-6.row-8-2 .left, .row-5-5.row-8-2 .left, .row-6-4.row-8-2 .left, .row-7-3.row-8-2 .left, .row-8-2.row-8-2 .left, .row-9-1.row-8-2 .left { width: 79%; } .row-1-9.row-8-2 .right, .row-2-8.row-8-2 .right, .row-3-7.row-8-2 .right, .row-4-6.row-8-2 .right, .row-5-5.row-8-2 .right, .row-6-4.row-8-2 .right, .row-7-3.row-8-2 .right, .row-8-2.row-8-2 .right, .row-9-1.row-8-2 .right { width: 18%; } .row-1-9.row-9-1 .left, .row-2-8.row-9-1 .left, .row-3-7.row-9-1 .left, .row-4-6.row-9-1 .left, .row-5-5.row-9-1 .left, .row-6-4.row-9-1 .left, .row-7-3.row-9-1 .left, .row-8-2.row-9-1 .left, .row-9-1.row-9-1 .left { width: 89%; } .row-1-9.row-9-1 .right, .row-2-8.row-9-1 .right, .row-3-7.row-9-1 .right, .row-4-6.row-9-1 .right, .row-5-5.row-9-1 .right, .row-6-4.row-9-1 .right, .row-7-3.row-9-1 .right, .row-8-2.row-9-1 .right, .row-9-1.row-9-1 .right { width: 8%; } .row-1-9 .left img, .row-1-9 .right img, .row-2-8 .left img, .row-2-8 .right img, .row-3-7 .left img, .row-3-7 .right img, .row-4-6 .left img, .row-4-6 .right img, .row-5-5 .left img, .row-5-5 .right img, .row-6-4 .left img, .row-6-4 .right img, .row-7-3 .left img, .row-7-3 .right img, .row-8-2 .left img, .row-8-2 .right img, .row-9-1 .left img, .row-9-1 .right img { max-width: 100%; margin-bottom: 0; } } .bold { font-weight: bold; } .underline { text-decoration: underline; } .text-white { color: #fff; } .text-black { color: #000; } .text-red { color: #F33; } .text-yellow { color: #FFF100; } .text-pink { color: #fe64b7; } .text-green { color: #10ac14; } .text-orange { color: #ff4e00; } .mk { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .mk:hover { opacity: 0.8; } .fz16 { font-size: 16px; } .fz18 { font-size: 18px; } .fz22 { font-size: 22px; } .fz25 { font-size: 25px; } .fz28 { font-size: 28px; } .text-xxlarge { font-size: clamp(1.5rem, 1.3235294118rem + 0.8823529412vw, 2.25rem); } .text-xlarge { font-size: clamp(1.25rem, 1.1323529412rem + 0.5882352941vw, 1.75rem); } .text-large { font-size: clamp(1rem, 0.9411764706rem + 0.2941176471vw, 1.25rem); } .text-small { font-size: 12px; } .text-xsmall { font-size: 10px; } .note-box { margin-bottom: min(4vw, 40px); } .note-box p { margin-bottom: 0; line-height: 1.5; } .note { position: relative; padding-left: 1.3em; } .note + .note { margin-top: 8px; } .note::before { content: "※"; position: absolute; left: 0; margin: 0; top: 0.4px; } .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } @media (min-width: 576px) { .sm-only { display: none !important; } } @media (min-width: 768px) { .sp-only { display: none !important; } .pc-text-center { text-align: center !important; } .pc-text-left { text-align: left !important; } .pc-text-right { text-align: right !important; } } @media (max-width: 767.98px) { .pc-only { display: none !important; } .sp-text-center { text-align: center !important; } .sp-text-left { text-align: left !important; } .sp-text-right { text-align: right !important; } } .mt0 { margin-top: 0px !important; } .pt0 { padding-top: 0px !important; } .mr0 { margin-right: 0px !important; } .pr0 { padding-right: 0px !important; } .mb0 { margin-bottom: 0px !important; } .pb0 { padding-bottom: 0px !important; } .ml0 { margin-left: 0px !important; } .pl0 { padding-left: 0px !important; } .mt5 { margin-top: 5px !important; } .pt5 { padding-top: 5px !important; } .mr5 { margin-right: 5px !important; } .pr5 { padding-right: 5px !important; } .mb5 { margin-bottom: 5px !important; } .pb5 { padding-bottom: 5px !important; } .ml5 { margin-left: 5px !important; } .pl5 { padding-left: 5px !important; } .mt10 { margin-top: 10px !important; } .pt10 { padding-top: 10px !important; } .mr10 { margin-right: 10px !important; } .pr10 { padding-right: 10px !important; } .mb10 { margin-bottom: 10px !important; } .pb10 { padding-bottom: 10px !important; } .ml10 { margin-left: 10px !important; } .pl10 { padding-left: 10px !important; } .mt15 { margin-top: 15px !important; } .pt15 { padding-top: 15px !important; } .mr15 { margin-right: 15px !important; } .pr15 { padding-right: 15px !important; } .mb15 { margin-bottom: 15px !important; } .pb15 { padding-bottom: 15px !important; } .ml15 { margin-left: 15px !important; } .pl15 { padding-left: 15px !important; } .mt20 { margin-top: 20px !important; } .pt20 { padding-top: 20px !important; } .mr20 { margin-right: 20px !important; } .pr20 { padding-right: 20px !important; } .mb20 { margin-bottom: 20px !important; } .pb20 { padding-bottom: 20px !important; } .ml20 { margin-left: 20px !important; } .pl20 { padding-left: 20px !important; } .mt25 { margin-top: 25px !important; } .pt25 { padding-top: 25px !important; } .mr25 { margin-right: 25px !important; } .pr25 { padding-right: 25px !important; } .mb25 { margin-bottom: 25px !important; } .pb25 { padding-bottom: 25px !important; } .ml25 { margin-left: 25px !important; } .pl25 { padding-left: 25px !important; } .mt30 { margin-top: 30px !important; } .pt30 { padding-top: 30px !important; } .mr30 { margin-right: 30px !important; } .pr30 { padding-right: 30px !important; } .mb30 { margin-bottom: 30px !important; } .pb30 { padding-bottom: 30px !important; } .ml30 { margin-left: 30px !important; } .pl30 { padding-left: 30px !important; } .mt35 { margin-top: 35px !important; } .pt35 { padding-top: 35px !important; } .mr35 { margin-right: 35px !important; } .pr35 { padding-right: 35px !important; } .mb35 { margin-bottom: 35px !important; } .pb35 { padding-bottom: 35px !important; } .ml35 { margin-left: 35px !important; } .pl35 { padding-left: 35px !important; } .mt40 { margin-top: 40px !important; } .pt40 { padding-top: 40px !important; } .mr40 { margin-right: 40px !important; } .pr40 { padding-right: 40px !important; } .mb40 { margin-bottom: 40px !important; } .pb40 { padding-bottom: 40px !important; } .ml40 { margin-left: 40px !important; } .pl40 { padding-left: 40px !important; } .mt45 { margin-top: 45px !important; } .pt45 { padding-top: 45px !important; } .mr45 { margin-right: 45px !important; } .pr45 { padding-right: 45px !important; } .mb45 { margin-bottom: 45px !important; } .pb45 { padding-bottom: 45px !important; } .ml45 { margin-left: 45px !important; } .pl45 { padding-left: 45px !important; } .mt50 { margin-top: 50px !important; } .pt50 { padding-top: 50px !important; } .mr50 { margin-right: 50px !important; } .pr50 { padding-right: 50px !important; } .mb50 { margin-bottom: 50px !important; } .pb50 { padding-bottom: 50px !important; } .ml50 { margin-left: 50px !important; } .pl50 { padding-left: 50px !important; } .mt55 { margin-top: 55px !important; } .pt55 { padding-top: 55px !important; } .mr55 { margin-right: 55px !important; } .pr55 { padding-right: 55px !important; } .mb55 { margin-bottom: 55px !important; } .pb55 { padding-bottom: 55px !important; } .ml55 { margin-left: 55px !important; } .pl55 { padding-left: 55px !important; } .mt60 { margin-top: 60px !important; } .pt60 { padding-top: 60px !important; } .mr60 { margin-right: 60px !important; } .pr60 { padding-right: 60px !important; } .mb60 { margin-bottom: 60px !important; } .pb60 { padding-bottom: 60px !important; } .ml60 { margin-left: 60px !important; } .pl60 { padding-left: 60px !important; } @media (max-width: 767px) { .mb-sp0 { margin-bottom: 0px !important; } } @media (max-width: 767px) { .mb-sp5 { margin-bottom: 5px !important; } } @media (max-width: 767px) { .mb-sp10 { margin-bottom: 10px !important; } } @media (max-width: 767px) { .mb-sp15 { margin-bottom: 15px !important; } } @media (max-width: 767px) { .mb-sp20 { margin-bottom: 20px !important; } } @media (max-width: 767px) { .mb-sp25 { margin-bottom: 25px !important; } } @media (max-width: 767px) { .mb-sp30 { margin-bottom: 30px !important; } } @media (max-width: 767px) { .mb-sp35 { margin-bottom: 35px !important; } } @media (max-width: 767px) { .mb-sp40 { margin-bottom: 40px !important; } } @media (max-width: 767px) { .mb-sp45 { margin-bottom: 45px !important; } } @media (max-width: 767px) { .mb-sp50 { margin-bottom: 50px !important; } } @media (max-width: 767px) { .mb-sp55 { margin-bottom: 55px !important; } } @media (max-width: 767px) { .mb-sp60 { margin-bottom: 60px !important; } } html { scroll-padding-top: 100px; } .header { position: sticky; top: 0; z-index: var(--z-index-header); display: -ms-grid; display: grid; -ms-grid-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 82px; padding: 0 clamp(20px, 5.7vw, 88px); background: var(--c-header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.06); line-height: 1; } @media (max-width: 992px) { .header { -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; } } @media (max-width: 768px) { .header { height: 66px; padding: 0 18px; } } .header__logo-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-decoration: none; } .header__brand { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 21px; font-weight: 900; letter-spacing: -0.04em; white-space: nowrap; } @media (max-width: 768px) { .header__brand { font-size: 17px; } } .header__brand > span:last-child span { color: var(--c-accent); } .header__brand-mark { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; margin-right: 11px; border-radius: 9px; background: var(--c-primary); color: #fff; font-size: 19px; -webkit-box-shadow: 0 4px var(--c-sky); box-shadow: 0 4px var(--c-sky); } @media (max-width: 768px) { .header__brand-mark { width: 32px; height: 32px; margin-right: 8px; border-radius: 7px; font-size: 15px; } } .header__nav { -ms-grid-column-align: center; justify-self: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: min(3vw, 32px); } @media (max-width: 992px) { .header__nav { display: none; } } .header__nav a { color: var(--c-primary); font-size: 14px; font-weight: 800; text-decoration: none; -webkit-transition: color 0.2s; transition: color 0.2s; } .header__nav a:hover { color: var(--c-accent); } .header__cta { -ms-grid-column-align: end; justify-self: end; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; padding: 15px 22px; border-radius: 999px; background: var(--c-gra); -webkit-box-shadow: 0 9px 24px rgba(255, 93, 89, 0.28); box-shadow: 0 9px 24px rgba(255, 93, 89, 0.28); color: #fff; font-size: 14px; font-weight: 900; white-space: nowrap; text-decoration: none; -webkit-transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s; transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s; } .header__cta:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 14px 32px rgba(255, 93, 89, 0.35); box-shadow: 0 14px 32px rgba(255, 93, 89, 0.35); } @media (max-width: 768px) { .header__cta { gap: 8px; padding: 11px 14px; font-size: 12px; } } /* スクロールバーの有無によるズレ対策 */ html { overflow-x: hidden; overflow-y: scroll; } body { position: relative; -webkit-text-size-adjust: 100%; color: var(--c-text); font-size: clamp(0.875rem, 0.8455882353rem + 0.1470588235vw, 1rem); font-family: var(--ff-base); line-height: 1.8; background-color: var(--c--body-bg); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; letter-spacing: 0.02em; } img { max-width: 100%; height: auto; } .entry-content > .inner > *:first-child { margin-top: 0; } .entry-content { margin-bottom: 100px; } .entry-content p:empty { display: none; } /* 12 COLUMN : RESPONSIVE GRID SYSTEM SPレイアウト */ figcaption, figure { text-align: center; } body:not(.home) main { min-height: 711px; margin-bottom: min(15vw, 150px); } main > *:last-child, main > *:last-child > *:last-child, main > *:last-child > *:last-child > *:last-child, main > *:last-child > *:last-child > *:last-child > *:last-child, main > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child, main > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child, main > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child { margin-bottom: 0; } @media (min-width: 768px) { a[href^="tel:"] { pointer-events: none; text-decoration: none; color: var(--c-text); } } .inner { max-width: 1000px; padding: 0 var(--space-content); margin: auto; -webkit-box-sizing: content-box; box-sizing: content-box; } .content-width { padding: 0 var(--space-content); max-width: 1000px; -webkit-box-sizing: content-box; box-sizing: content-box; } .container-custom01 { margin-top: 0; margin-bottom: 30px; } .container-custom01 .custom_txt:last-child { margin-bottom: 0; } .container-custom01 .custom_txt:last-child p:last-child { margin-bottom: 0; } .container-custom01 figure:last-child { margin-bottom: 0; } .parallax-img { position: relative; } .parallax-img__bg-clip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: inset(0); z-index: 0; } .parallax-img__bg-fixed { position: fixed; top: 0; left: 0; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .parallax-img__content { position: relative; z-index: 1; } .parallax-img--01 { height: 50vh; } .parallax-img--02 { padding: 20vh 0; } .parallax-img--01 .parallax-img__bg-fixed { background-image: url("https://picsum.photos/id/22/960/600"); } .parallax-img--02 .parallax-img__bg-fixed { background-image: url("https://picsum.photos/id/57/960/500"); } .loading { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-animation: fadeOut 1.5s 2.5s forwards; animation: fadeOut 1.5s 2.5s forwards; } .loading__logo { opacity: 0; -webkit-animation: logo_fade 2s 0.5s forwards; animation: logo_fade 2s 0.5s forwards; max-width: 300px; width: 80%; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } @-webkit-keyframes logo_fade { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 40% { opacity: 1; } 60% { -webkit-transform: translateY(0); transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes logo_fade { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 40% { opacity: 1; } 60% { -webkit-transform: translateY(0); transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } } .breadcrumb { max-width: 1000px; padding: 0 var(--space-content); margin: 10px auto 80px; font-size: 11px; -webkit-box-sizing: content-box; box-sizing: content-box; } @media (max-width: 768px) { .breadcrumb { margin: 10px 0 40px; font-size: 10px; } } .breadcrumb__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; list-style: none; } .breadcrumb__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .breadcrumb__link { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } @media (max-width: 768px) { .breadcrumb__link { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .breadcrumb__link:hover { opacity: 0.7; text-decoration: none; } .breadcrumb__current { color: #555; } @media (max-width: 768px) { .breadcrumb__current { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .breadcrumb__separator { margin: 0 0.5em; color: #ccc; } @media (max-width: 768px) { .breadcrumb__separator { margin: 0 0.25em; } } .searchform_box { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid var(--c-primary); display: block; padding: 0 10px; border-radius: 3px; height: 2.3em; overflow: hidden; } .searchform_box input[type=text] { border: none; height: 2em; width: calc(100% - 3.5em); } .searchform_box input[type=text]:focus { outline: 0; } .searchform_box input[type=submit] { cursor: pointer; font-family: FontAwesome; border: none; background: var(--c-primary); color: #fff; position: absolute; width: 3.5em; height: 3em; right: 0px; top: -5px; outline: none; } ul.anchor-link { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: min(3vw, 30px) min(5vw, 50px); margin: 0 !important; list-style: none; } @media (max-width: 768px) { ul.anchor-link { gap: min(3vw, 30px); } } ul.anchor-link li { width: calc(33.3333333333% - min(5vw, 50px) * 2 / 3); } @media (max-width: 768px) { ul.anchor-link li { width: calc(50% - min(3vw, 30px) / 2); } } ul.anchor-link li a { display: block; position: relative; padding: 10px 5px 20px; background-color: var(--c-primary); border: 1px solid var(--c-primary); color: #fff; font-size: clamp(0.875rem, 0.8455882353rem + 0.1470588235vw, 1rem); font-weight: 500; text-align: center; text-decoration: none; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } ul.anchor-link li a::before, ul.anchor-link li a::after { position: absolute; top: auto; right: 0; left: 0; bottom: 12px; content: ""; margin: auto; vertical-align: middle; width: 4px; height: 4px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } ul.anchor-link li a:hover { background-color: #fff; color: var(--c-primary); } ul.anchor-link li a:hover::before, ul.anchor-link li a:hover::after { border-color: var(--c-primary); } .table-schedule, .entry-content .table-schedule { width: 100%; letter-spacing: normal; } .table-schedule tbody th, .entry-content .table-schedule tbody th { background: transparent; } .table-schedule tbody tr:last-child th, .table-schedule tbody tr:last-child td, .entry-content .table-schedule tbody tr:last-child th, .entry-content .table-schedule tbody tr:last-child td { border-bottom: 0; } .table-schedule th, .table-schedule td, .entry-content .table-schedule th, .entry-content .table-schedule td { padding: 0.7em 0.3em; text-align: center; font-size: clamp(0.8125rem, 0.7683823529rem + 0.2205882353vw, 1rem); line-height: 1.2; vertical-align: middle; } @media (min-width: 768px) { .table-schedule th, .table-schedule td, .entry-content .table-schedule th, .entry-content .table-schedule td { padding: 0.7em min(1.2vw, 10px); font-size: clamp(0.8125rem, 0.7683823529rem + 0.2205882353vw, 1rem); } } .table-schedule td, .entry-content .table-schedule td { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; } .table-schedule tr th, .entry-content .table-schedule tr th { border: 0; border-bottom: 2px dotted var(--c-table-border); font-weight: normal; } .table-schedule tr:not(:last-child) td, .entry-content .table-schedule tr:not(:last-child) td { border: 0; border-bottom: 2px dotted var(--c-table-border); } .table-schedule tr th:not(:last-child), .table-schedule tr td:not(:last-child), .entry-content .table-schedule tr th:not(:last-child), .entry-content .table-schedule tr td:not(:last-child) { border-right: 2px dotted var(--c-table-border); } .table-schedule.type02 tbody tr:last-child th, .table-schedule.type02 tbody tr:last-child td, .entry-content .table-schedule.type02 tbody tr:last-child th, .entry-content .table-schedule.type02 tbody tr:last-child td { border-bottom: 1px solid var(--c-table-border); } .table-schedule.type02 tbody th, .entry-content .table-schedule.type02 tbody th { background-color: rgba(var(--c-primary-rgb), 0.8); } .table-schedule.type02 th, .entry-content .table-schedule.type02 th { background-color: var(--c-table-th-bg); color: #fff; } .table-schedule.type02 tr th, .entry-content .table-schedule.type02 tr th { border: 0; border-bottom: 1px solid var(--c-table-border); font-weight: normal; } .table-schedule.type02 tr td, .entry-content .table-schedule.type02 tr td { border: 0; border-bottom: 1px solid var(--c-table-border); } .table-schedule.type02 tr th, .table-schedule.type02 tr td, .entry-content .table-schedule.type02 tr th, .entry-content .table-schedule.type02 tr td { border-right: 1px solid var(--c-table-border); } .table-schedule.type03 tr th, .table-schedule.type03 tr td, .entry-content .table-schedule.type03 tr th, .entry-content .table-schedule.type03 tr td { border: none !important; } .table-schedule.type03 thead tr:first-child th:first-child, .entry-content .table-schedule.type03 thead tr:first-child th:first-child { border-radius: 5px 0 0 5px; } .table-schedule.type03 thead tr:first-child th:last-child, .entry-content .table-schedule.type03 thead tr:first-child th:last-child { border-radius: 0 5px 5px 0; } .table-schedule.type03 thead th, .entry-content .table-schedule.type03 thead th { border-bottom: none; background-color: rgba(var(--c-primary-rgb), 0.2); color: var(--c-primary); font-weight: 500; } .table-schedule.type03 tbody td, .table-schedule.type03 tbody th, .entry-content .table-schedule.type03 tbody td, .entry-content .table-schedule.type03 tbody th { border-bottom: 1px solid var(--c-primary) !important; } .table-schedule.type03 tbody th, .entry-content .table-schedule.type03 tbody th { color: var(--c-text); } .table-schedule.type03 tbody td, .entry-content .table-schedule.type03 tbody td { color: var(--c-primary); } ul.list { list-style: none; padding: 0 0 0 1.3em; } ul.list li { position: relative; margin-bottom: 5px; padding-top: 2px; } ul.list li::after { display: block; content: ""; position: absolute; top: 0.6em; left: -1em; width: 7px; height: 7px; background-color: var(--c-primary); border-radius: 100%; } ol.list-ol { counter-reset: item; padding-left: 1em; } ol.list-ol li { text-indent: -1.3em; padding-left: 1.3em; margin-bottom: 10px; } ol.list-ol li::before { counter-increment: item; content: counter(item) "."; /* 以下は自由に装飾... */ padding-right: 0.5em; font-weight: bold; color: var(--c-secondary); } .share_button { max-width: 1000px; padding: 80px 0; margin: auto; } @media screen and (max-width: 768px) { .share_button { width: 100%; padding: 40px 15px; } } .share_button ul li { display: inline-block; } .fb_iframe_widget > span { vertical-align: baseline !important; } .sidebar__title { padding: 10px; margin-bottom: 16px; background-color: var(--c-primary); color: #fff; } .sidebar__title:not(:first-child) { margin-top: 40px; } .sidebar__category-list { margin: 0 0 40px; padding: 0; list-style: none; } .sidebar__category-link { display: block; padding: 10px 15px; border-bottom: 1px solid #eee; color: #333; text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .sidebar__category-link:hover { color: var(--c-primary); background-color: rgba(var(--c-primary-rgb), 0.1); } .sidebar__recent-posts { margin: 0; padding: 0; list-style: none; } .sidebar__recent-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; } .sidebar__recent-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .sidebar__recent-date { display: block; margin-bottom: 4px; color: #666; font-size: 14px; } .sidebar__recent-link { display: block; color: #333; text-decoration: none; line-height: 1.4; -webkit-transition: color 0.3s; transition: color 0.3s; } .sidebar__recent-link:hover { color: var(--c-primary); } .footer { padding-bottom: 0 !important; } @media (max-width: 768px) { .footer { padding-bottom: 50px !important; } } .footer .page_top { padding-bottom: 0; } .footer .page_top.stop { padding-bottom: 0; } @media (max-width: 768px) { .footer .page_top { padding-bottom: 40px; } } .page_top { z-index: var(--z-index-pagetop); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; } .page_top a { height: 50px; width: 50px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--c-primary); text-decoration: none; border-radius: 50%; color: #fff; line-height: 1; font-size: 30px; font-weight: 400; } .page_top a svg { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .page_top.is-visible { opacity: 1; visibility: visible; } /* content-footer（メインフッターコンテンツ） ----------------------------------------------------*/ .footer { background: var(--c-footer-bg); color: var(--c-footer-text); } .footer__inner { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px auto; grid-template-columns: 1fr auto; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 20px 30px; max-width: 1000px; padding: min(9vw, 55px) var(--space-content) min(4vw, 30px); margin: 0 auto; } @media (max-width: 768px) { .footer__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 48px 20px 30px; } } .footer__brand { -ms-grid-column: 1; grid-column: 1; } .footer__catch { margin: 16px 0 0; color: var(--c-line-soft); font-size: 11px; } .footer__nav { -ms-grid-column: 2; grid-column: 2; } .footer__nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 14px 24px; } @media (max-width: 768px) { .footer__nav ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 14px; } } .footer__nav a { display: block; color: var(--c-line-soft); font-weight: 400; font-size: 11px; text-decoration: none; } .footer .copyright { grid-column: 1/-1; margin-top: min(3vw, 30px); color: var(--c-line-soft); font-size: 10px; font-weight: 400; text-align: left; } .top-section-title { margin-bottom: min(8vw, 55px); } .top-section-title > p { margin: 0 0 14px; color: #ff5d59; font-size: 11px; font-weight: 900; letter-spacing: 0.18em; } .top-section-title h2 { margin: 0; font-size: clamp(2rem, 1.6470588235rem + 1.7647058824vw, 3.5rem); font-weight: 400; letter-spacing: -0.055em; line-height: 1.3; } .top-section-title h2 em { color: #ff5d59; font-style: normal; } .top-section-title > span { display: block; margin-top: 18px; color: #516174; font-size: clamp(0.75rem, 0.7205882353rem + 0.1470588235vw, 0.875rem); } .top-section-title.center { text-align: center; } .top-section-title.light h2 { color: #fff; } .top-section-title.light > span { color: #b9c6d2; } .top-line-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 16px 22px; background: #08c865; border-radius: 999px; color: #fff; font-size: clamp(0.8125rem, 0.7977941176rem + 0.0735294118vw, 0.875rem); font-weight: 900; text-decoration: none; -webkit-box-shadow: 0 10px 24px rgba(8, 200, 101, 0.2); box-shadow: 0 10px 24px rgba(8, 200, 101, 0.2); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .top-line-btn b { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 31px; height: 25px; background: #fff; border-radius: 5px; color: #08c865; font-size: 14px; } .top-line-btn:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 14px 32px rgba(8, 200, 101, 0.35); box-shadow: 0 14px 32px rgba(8, 200, 101, 0.35); } .top-line-btn.large { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 18px 24px; font-size: clamp(0.875rem, 0.8602941176rem + 0.0735294118vw, 0.9375rem); } @media (max-width: 768px) { .top-line-btn { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .top-hero { position: relative; overflow: hidden; padding: 70px min(3vw, 60px) 118px; background: #fff8ec; } @media (max-width: 768px) { .top-hero { padding: 50px 20px 80px; } } .top-hero__deco { position: absolute; border-radius: 50%; pointer-events: none; } .top-hero__deco--1 { top: -150px; left: -180px; width: 360px; height: 360px; border: 60px solid rgba(255, 214, 90, 0.3); } .top-hero__deco--2 { top: 70px; right: 7%; width: 110px; height: 110px; background-image: radial-gradient(rgba(255, 93, 89, 0.4) 2px, transparent 2px); background-size: 16px 16px; } @media (max-width: 768px) { .top-hero__deco--2 { display: none; } } .top-hero__inner { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 48px; max-width: 1400px; margin: 0 auto; } @media (max-width: 768px) { .top-hero__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 0; } } .top-hero__copy { width: 100%; } .top-hero__eyebrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 17px; font-size: clamp(0.6875rem, 0.6286764706rem + 0.2941176471vw, 0.9375rem); font-weight: 900; letter-spacing: 0.02em; } .top-hero__eyebrow .mark { display: inline-block; width: 18px; height: 10px; margin-right: 8px; background: #ffd65a; } .top-hero__title { margin: 0; color: #10243c; font-size: clamp(2.5rem, 2.0882352941rem + 2.0588235294vw, 4.25rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; } .top-hero__title em { color: #ff5d59; font-style: normal; } .top-hero__desc { margin: 24px 0 18px; color: #425168; font-size: clamp(0.75rem, 0.7058823529rem + 0.2205882353vw, 0.9375rem); font-weight: 700; line-height: 2; } .top-hero__price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; margin-bottom: 24px; } .top-hero__price span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 4px; font-size: clamp(0.6875rem, 0.6433823529rem + 0.2205882353vw, 0.875rem); font-weight: 900; } .top-hero__price small { margin-right: 4px; padding: 6px 8px; background: #10243c; border-radius: 4px; color: #fff; font-size: 11px; } .top-hero__price strong { color: #ff5d59; font-size: clamp(1.75rem, 1.6470588235rem + 0.5147058824vw, 2.1875rem); letter-spacing: -0.05em; } .top-hero__price-divider { width: 1px; height: 28px; background: #9ca6b0; } .top-hero__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 26px; } @media (max-width: 768px) { .top-hero__actions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 13px; } } .top-hero__more { padding-bottom: 5px; border-bottom: 1px solid #10243c; color: #10243c; font-size: 12px; font-weight: 900; text-decoration: none; } @media (max-width: 768px) { .top-hero__more { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } } .top-hero__note { margin: 13px 0 0 13px; color: #75808c; font-size: 10px; } @media (max-width: 768px) { .top-hero__note { margin-left: 0; text-align: center; } } .top-hero__visual { position: relative; width: 100%; min-height: 585px; } @media (max-width: 768px) { .top-hero__visual { min-height: 360px; margin-top: 18px; } } .top-hero__img { position: absolute; top: 2px; right: 1%; overflow: hidden; width: 590px; height: 590px; border-radius: 50% 47% 48% 46%; -webkit-box-shadow: 0 28px 90px rgba(85, 62, 46, 0.12); box-shadow: 0 28px 90px rgba(85, 62, 46, 0.12); } .top-hero__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 768px) { .top-hero__img { right: 50%; width: min(89vw, 390px); height: min(89vw, 390px); -webkit-transform: translateX(50%); transform: translateX(50%); } } .top-hero__card { position: absolute; z-index: 4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 19px 21px; background: #fff; border-radius: 16px; -webkit-box-shadow: 0 20px 60px rgba(20, 43, 67, 0.12); box-shadow: 0 20px 60px rgba(20, 43, 67, 0.12); } .top-hero__card span:not(.check) { padding: 7px 8px; background: #ff5d59; border-radius: 5px; color: #fff; font-size: 12px; } .top-hero__card strong { font-size: 14px; } .top-hero__card--top { top: 90px; right: -6px; } .top-hero__card--bottom { bottom: 56px; left: -20px; padding: 17px 24px; } .top-hero__card--bottom .check { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 36px; height: 36px; background: #ff5d59; border-radius: 50%; color: #fff; } .top-hero__card--bottom p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; } .top-hero__card--bottom small { margin-top: 3px; color: #8a95a0; font-size: 9px; } @media (max-width: 768px) { .top-hero__card { padding: 12px 13px; } .top-hero__card strong { font-size: 11px; } .top-hero__card--top { top: 50px; right: -3px; } .top-hero__card--bottom { bottom: 5px; left: -3px; padding: 12px 14px; } .top-hero__card--bottom .check { width: 29px; height: 29px; } } .top-hero__socials { position: absolute; z-index: 5; bottom: 22px; right: 6px; display: -ms-grid; display: grid; gap: 8px; } .top-hero__socials span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 59px; height: 59px; border: 4px solid #fff8ec; border-radius: 16px; color: #fff; font-size: 26px; -webkit-transform: rotate(7deg); transform: rotate(7deg); } .top-hero__socials .instagram { background: linear-gradient(135deg, #6a4bf5, #ff3f8c, #ffb13b); } .top-hero__socials .tiktok { background: #101828; } @media (max-width: 768px) { .top-hero__socials { bottom: -15px; right: 0; } .top-hero__socials span { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; } } .top-strengths { position: relative; padding: 88px min(3vw, 60px) 78px; background: #10243c; color: #fff; } @media (max-width: 768px) { .top-strengths { padding: 76px 20px; } } .top-strengths::before, .top-strengths::after { content: ""; position: absolute; top: 0; height: 7px; } .top-strengths::before { left: 0; width: 25%; background: #ff5d59; } .top-strengths::after { left: 25%; width: 75%; background: #ffd65a; } .top-strengths__heading { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 10px 30px; max-width: 1400px; margin: 0 auto 34px; } @media (max-width: 768px) { .top-strengths__heading { display: block; margin-bottom: 25px; } } .top-strengths__heading p { grid-column: 1/-1; margin: 0; color: #ffd65a; font-size: 12px; font-weight: 900; letter-spacing: 0.2em; } .top-strengths__heading h2 { margin: 0; font-size: clamp(2.125rem, 1.8897058824rem + 1.1764705882vw, 3.125rem); font-weight: 400; letter-spacing: -0.055em; line-height: 1.2; } .top-strengths__heading h2 em { color: #ffd65a; font-style: normal; } @media (max-width: 768px) { .top-strengths__heading h2 { margin: 10px 0 13px; } } .top-strengths__heading span { display: block; -ms-grid-column-align: end; justify-self: end; padding-bottom: 8px; color: #bcc8d4; font-size: clamp(0.75rem, 0.7205882353rem + 0.1470588235vw, 0.875rem); line-height: 1.7; } @media (max-width: 768px) { .top-strengths__heading span { -ms-grid-column-align: auto; justify-self: auto; padding-bottom: 0; } } .top-strengths__grid { display: -ms-grid; display: grid; -ms-grid-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; } @media (max-width: 992px) { .top-strengths__grid { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .top-strengths__grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .top-strengths__card { position: relative; overflow: hidden; min-height: 310px; padding: 27px 25px 25px; background: #fff; border-radius: 20px; color: #10243c; -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; } .top-strengths__card:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); } .top-strengths__card::after { content: ""; position: absolute; right: -25px; bottom: -58px; width: 120px; height: 120px; border-radius: 50%; opacity: 0.14; } .top-strengths__card.coral { border-top: 7px solid #ff5d59; } .top-strengths__card.coral .no { color: #ff5d59; } .top-strengths__card.coral::after { background: #ff5d59; } .top-strengths__card.yellow { border-top: 7px solid #ffd65a; } .top-strengths__card.yellow .no { color: #dfad00; } .top-strengths__card.yellow::after { background: #ffd65a; } .top-strengths__card.blue { border-top: 7px solid #38a9e8; } .top-strengths__card.blue .no { color: #188ac9; } .top-strengths__card.blue::after { background: #38a9e8; } .top-strengths__card.green { border-top: 7px solid #0ac86b; } .top-strengths__card.green .no { color: #00a956; } .top-strengths__card.green::after { background: #0ac86b; } @media (max-width: 992px) { .top-strengths__card { min-height: 275px; } } @media (max-width: 768px) { .top-strengths__card { min-height: auto; padding: 24px 23px 27px; } } .top-strengths__card .lead { display: block; margin-bottom: 8px; font-size: 14px; } .top-strengths__card h3 { margin: 0 0 14px; font-size: clamp(1.25rem, 1.1470588235rem + 0.5147058824vw, 1.6875rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.32; } .top-strengths__card p { margin: 0; color: #667487; font-size: 14px; line-height: 1.85; } .top-strengths__card-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 24px; } .top-strengths__card-top .no { font-size: 45px; font-weight: 900; letter-spacing: -0.08em; line-height: 1; } .top-strengths__card-top .kicker { padding: 7px 9px; background: #eef1f4; border-radius: 999px; color: #687789; font-size: 9px; font-weight: 900; letter-spacing: 0.12em; } .top-strengths__summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 28px; max-width: 1400px; margin: 24px auto 0; padding: 20px 28px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; } .top-strengths__summary b { color: #ffd65a; font-size: 16px; } .top-strengths__summary span { color: #c9d3dd; font-size: 14px; line-height: 1.7; } @media (max-width: 768px) { .top-strengths__summary { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; padding: 20px; } .top-strengths__summary b { font-size: 14px; } } .top-problems { padding: 112px min(3vw, 60px); background: #f8f9fa; } @media (max-width: 768px) { .top-problems { padding: 76px 20px; } } .top-problems__grid { display: -ms-grid; display: grid; -ms-grid-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1400px; margin: 55px auto 0; } @media (max-width: 992px) { .top-problems__grid { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .top-problems__grid { gap: 10px; margin-top: 35px; } } .top-problems__grid article { padding: 28px 24px; background: #fff; border: 1px solid #eceef1; border-radius: 18px; min-height: 245px; text-align: center; } @media (max-width: 768px) { .top-problems__grid article { min-height: 220px; padding: 23px 13px; } } .top-problems__grid h3 { margin: 0 0 10px; font-size: clamp(0.875rem, 0.8308823529rem + 0.2205882353vw, 1.0625rem); font-weight: 400; line-height: 1.5; } .top-problems__grid p { margin: 0; color: #718092; font-size: clamp(0.75rem, 0.7205882353rem + 0.1470588235vw, 0.875rem); line-height: 1.75; } .top-problems__icon { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 74px; height: 74px; margin: 0 auto 21px; background: #fff0ef; border-radius: 50%; color: #ff5d59; font-size: 28px; } @media (max-width: 768px) { .top-problems__icon { width: 60px; height: 60px; } } .top-problems__icon span { position: absolute; top: -8px; color: #a8b0b8; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; } .top-problems__bridge { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin-top: 55px; } .top-problems__bridge span { padding: 19px 38px; background: #ff5d59; border-radius: 999px; -webkit-box-shadow: 0 10px 20px rgba(255, 93, 89, 0.2); box-shadow: 0 10px 20px rgba(255, 93, 89, 0.2); color: #fff; font-size: 17px; font-weight: 900; } @media (max-width: 768px) { .top-problems__bridge { margin-top: 35px; } .top-problems__bridge span { padding: 16px 27px; font-size: 14px; } } .top-answer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 90px; max-width: 1400px; padding: 150px min(3vw, 60px) 85px; margin: 0 auto; background: #fff; } @media (max-width: 768px) { .top-answer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 55px; padding: 115px 20px 85px; } } .top-answer__copy { width: 100%; } .top-answer__lead { margin: 0; color: #647487; font-size: 14px; line-height: 1.9; } .top-answer__lead + .top-answer__lead { margin-top: 8px; } .top-answer__box { margin: 25px 0; padding: 20px 24px; background: #fff8ec; border-left: 6px solid #ff5d59; } .top-answer__box small { display: block; margin-bottom: 7px; color: #718092; font-size: 10px; } .top-answer__box strong { font-size: clamp(1.125rem, 1.0367647059rem + 0.4411764706vw, 1.5rem); line-height: 1.45; } .top-phone { position: relative; overflow: hidden; width: 100%; max-width: 360px; min-height: 570px; margin: 0 auto; padding: 39px 20px 17px; background: #f5f5f5; border: 9px solid #14273c; border-radius: 42px; -webkit-box-shadow: 0 30px 70px rgba(16, 36, 60, 0.2); box-shadow: 0 30px 70px rgba(16, 36, 60, 0.2); -webkit-transform: rotate(2deg); transform: rotate(2deg); } @media (max-width: 768px) { .top-phone { width: min(85vw, 360px); min-height: 540px; } } .top-phone__notch { position: absolute; top: -1px; left: 50%; width: 130px; height: 25px; background: #14273c; border-radius: 0 0 16px 16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .top-phone__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: -39px -20px 14px; padding: 42px 18px 14px; background: #fff; border-bottom: 1px solid #ddd; font-size: 11px; } .top-phone__date { margin-bottom: 10px; color: #9aa2aa; font-size: 9px; text-align: center; } .top-phone__message, .top-phone__reply { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 75%; margin: 8px 0 9px auto; padding: 11px 13px; background: #99efb8; border-radius: 15px 15px 3px; color: #143526; font-size: 11px; } .top-phone__photos { position: relative; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 5px 1fr; grid-template-columns: 1fr 1fr; gap: 5px; max-width: 76%; margin-left: auto; } .top-phone__photos img { aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; } .top-phone__photos span { position: absolute; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc(50% - 2px); height: calc(50% - 2px); background: rgba(16, 36, 60, 0.65); color: #fff; font-size: 18px; font-weight: 900; } .top-phone__reply { margin: 28px auto 0 0; background: #fff; border-radius: 15px 15px 15px 3px; } .top-phone__input { position: absolute; right: 17px; bottom: 14px; left: 17px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 12px; background: #fff; border-radius: 18px; color: #aaa; font-size: 10px; } .top-phone__input span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 24px; height: 24px; background: #08c865; border-radius: 50%; color: #fff; } .top-phone__badge { position: absolute; top: 165px; right: 10px; padding: 14px 18px; background: #ff5d59; border-radius: 999px; -webkit-box-shadow: 0 20px 60px rgba(20, 43, 67, 0.12); box-shadow: 0 20px 60px rgba(20, 43, 67, 0.12); color: #fff; font-size: 14px; font-weight: 900; white-space: nowrap; } @media (max-width: 768px) { .top-phone__badge { right: 8px; font-size: 11px; } } .top-reasons { padding: 112px min(3vw, 60px); background: #10243c; color: #fff; } @media (max-width: 768px) { .top-reasons { padding: 76px 20px; } } .top-reasons__list { display: -ms-grid; display: grid; gap: 12px; max-width: 1200px; margin: 55px auto 0; } @media (max-width: 768px) { .top-reasons__list { margin-top: 35px; } } .top-reasons__list article { display: -ms-grid; display: grid; -ms-grid-columns: 80px 30px 1fr 30px auto; grid-template-columns: 80px 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; padding: 26px 30px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 18px; } @media (max-width: 768px) { .top-reasons__list article { -ms-grid-columns: 55px 17px 1fr; grid-template-columns: 55px 1fr; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 10px 17px; padding: 22px 18px; } } .top-reasons__list .no { font-size: 48px; font-weight: 900; letter-spacing: -0.08em; color: #ffd65a; } @media (max-width: 768px) { .top-reasons__list .no { font-size: 38px; } } .top-reasons__list p { margin: 0 0 5px; color: #ff5d59; font-size: 10px; font-weight: 900; letter-spacing: 0.08em; } .top-reasons__list h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 1.1911764706rem + 0.2941176471vw, 1.5rem); font-weight: 400; } .top-reasons__list span { color: #bfcad5; font-size: 14px; line-height: 1.7; } .top-reasons__list strong { padding: 11px 15px; background: #fff; border-radius: 999px; color: #10243c; font-size: 11px; white-space: nowrap; } .top-reasons__list strong i { margin-right: 4px; color: #0ac86b; } @media (max-width: 768px) { .top-reasons__list strong { -ms-grid-column: 2; grid-column: 2; -ms-grid-column-align: start; justify-self: start; } } .top-flow { padding: 112px min(3vw, 60px); background: #fff8ec; } @media (max-width: 768px) { .top-flow { padding: 76px 20px; } } .top-flow__grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 20px 32px 20px 1fr 20px 32px 20px 1fr; grid-template-columns: 1fr 32px 1fr 32px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; max-width: 1200px; margin: 55px auto 0; } @media (max-width: 768px) { .top-flow__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 35px; } } .top-flow__grid article { position: relative; min-height: 325px; padding: 28px; background: #fff; border-radius: 20px; -webkit-box-shadow: 0 16px 40px rgba(40, 51, 70, 0.07); box-shadow: 0 16px 40px rgba(40, 51, 70, 0.07); text-align: center; } @media (max-width: 768px) { .top-flow__grid article { width: 100%; min-height: auto; padding: 27px 25px 30px; } } .top-flow__grid article .step { position: absolute; top: -14px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 7px 20px; background: #ff5d59; border-radius: 999px; -webkit-box-shadow: 0 8px 16px rgba(255, 93, 89, 0.35); box-shadow: 0 8px 16px rgba(255, 93, 89, 0.35); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: 0.1em; white-space: nowrap; } .top-flow__grid article i { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 90px; height: 90px; margin: 28px auto 13px; background: #fff1ef; border-radius: 50%; font-size: 34px; font-style: normal; color: #ff5d59; } .top-flow__grid article small { padding: 5px 10px; background: #10243c; border-radius: 999px; color: #fff; font-size: 9px; } .top-flow__grid article h3 { margin: 14px 0 10px; font-size: clamp(1rem, 0.9558823529rem + 0.2205882353vw, 1.1875rem); font-weight: 400; } .top-flow__grid article p { margin: 0; color: #6c7a8b; font-size: 14px; line-height: 1.8; } .top-flow__arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #ff5d59; font-size: 27px; font-weight: 900; text-align: center; } @media (max-width: 768px) { .top-flow__arrow { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .top-compare { padding: 112px min(3vw, 60px); background: #17334f; color: #fff; } @media (max-width: 768px) { .top-compare { padding: 76px 20px; } } .top-compare__demo { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 40px 110px 40px 1fr; grid-template-columns: 1fr 110px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; max-width: 900px; margin: 58px auto 0; } @media (max-width: 768px) { .top-compare__demo { -ms-grid-columns: 1fr 18px 45px 18px 1fr; grid-template-columns: 1fr 45px 1fr; gap: 18px; margin-top: 38px; } } .top-compare__card { position: relative; text-align: center; } .top-compare__card > span { display: inline-block; margin-bottom: 13px; padding: 7px 13px; background: #fff; border-radius: 999px; color: #10243c; font-size: 10px; font-weight: 900; letter-spacing: 0.16em; } .top-compare__card > img { height: 380px; margin: auto; border: 8px solid #fff; border-radius: 25px; aspect-ratio: 9/14; -o-object-fit: cover; object-fit: cover; } @media (max-width: 768px) { .top-compare__card > img { width: 100%; height: auto; border-width: 5px; border-radius: 17px; } } .top-compare__card p { margin-top: 10px; color: #c6d2dd; font-size: 14px; line-height: 1.7; } @media (max-width: 768px) { .top-compare__card p { font-size: 9px; } } .top-compare__arrow { text-align: center; } .top-compare__arrow small { display: block; color: #ffd65a; font-size: 9px; font-weight: 900; letter-spacing: 0.15em; } .top-compare__arrow b { display: block; color: #ff5d59; font-size: 50px; } @media (max-width: 768px) { .top-compare__arrow b { font-size: 34px; } } .top-compare__video { position: relative; overflow: hidden; height: 380px; border: 8px solid #fff; border-radius: 25px; text-align: left; aspect-ratio: 9/14; } @media (max-width: 768px) { .top-compare__video { height: auto; border-width: 5px; border-radius: 17px; } } .top-compare__video::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(9, 20, 33, 0.88))); background: linear-gradient(transparent, rgba(9, 20, 33, 0.88)); } .top-compare__video img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .top-compare__video > small, .top-compare__video > strong, .top-compare__video > i { position: absolute; left: 24px; z-index: 2; } @media (max-width: 768px) { .top-compare__video > small, .top-compare__video > strong, .top-compare__video > i { left: 12px; } } .top-compare__video small { bottom: 104px; padding: 6px 8px; background: #ff5d59; border-radius: 4px; color: #fff; font-size: 12px; } @media (max-width: 768px) { .top-compare__video small { bottom: 76px; font-size: 7px; } } .top-compare__video strong { bottom: 46px; color: #fff; font-size: 19px; line-height: 1.4; } @media (max-width: 768px) { .top-compare__video strong { bottom: 31px; font-size: 11px; } } .top-compare__video > i { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; bottom: 18px; font-style: normal; } .top-compare__industries { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 22px; max-width: 1200px; margin: 55px auto 0; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.13); } .top-compare__industries span { color: #ffd65a; font-size: 11px; font-weight: 900; } .top-compare__industries b { padding: 10px 14px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; font-size: 11px; font-weight: 400; } .top-compare__industries b i { margin-right: 4px; } @media (max-width: 768px) { .top-compare__industries { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin-top: 35px; } .top-compare__industries span { width: 100%; } .top-compare__industries b { font-size: 9px; } } .top-price { padding: 112px min(3vw, 60px); background: #f7f8fa; } @media (max-width: 768px) { .top-price { padding: 76px 20px; } } .top-price__grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 24px 1fr; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 64px auto 0; } @media (max-width: 768px) { .top-price__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 36px; margin-top: 48px; } } .top-price__card { position: relative; padding: 38px; background: #fff; border: 1px solid #e2e6ea; border-radius: 24px; } @media (max-width: 768px) { .top-price__card { padding: 32px 24px; } } .top-price__card.recommended { border: 3px solid #ff5d59; -webkit-box-shadow: 0 20px 60px rgba(20, 43, 67, 0.12); box-shadow: 0 20px 60px rgba(20, 43, 67, 0.12); } .top-price__card > p { margin: 0 0 6px; color: #768392; font-size: 14px; } .top-price__card h3 { margin: 0 0 5px; font-size: clamp(1.25rem, 1.1764705882rem + 0.3676470588vw, 1.5625rem); font-weight: 400; } .top-price__card > span { color: #ff5d59; font-size: 14px; font-weight: 900; } .top-price__card ul { display: -ms-grid; display: grid; gap: 13px; margin: 25px 0; padding: 0; list-style: none; } .top-price__card ul li { color: #536276; font-size: 14px; } .top-price__card ul li b { margin-right: 7px; color: #0ac86b; } .top-price__card > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 20px; background: #10243c; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 900; text-decoration: none; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .top-price__card > a:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 14px 32px rgba(16, 36, 60, 0.25); box-shadow: 0 14px 32px rgba(16, 36, 60, 0.25); } .top-price__card.recommended > a { background: #ff5d59; } .top-price__badge { position: absolute; top: -18px; left: 50%; padding: 9px 20px; background: #ff5d59; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 900; white-space: nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .top-price .monthly { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-top: 25px; padding-bottom: 23px; border-bottom: 1px solid #e6e8eb; } .top-price .monthly small { margin-right: 9px; padding: 6px 7px; background: #10243c; border-radius: 5px; color: #fff; font-size: 10px; } .top-price .monthly strong { font-size: clamp(2.25rem, 2.0882352941rem + 0.8088235294vw, 2.9375rem); letter-spacing: -0.06em; color: #ff5d59; line-height: 1; } .top-price .monthly i { color: #7f8b97; font-size: 9px; font-style: normal; } .top-price__note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; max-width: 900px; margin: 24px auto 0; padding: 18px 24px; background: #fff; border-radius: 12px; } .top-price__note b { color: #ff5d59; font-size: 14px; } .top-price__note span { color: #6d7988; font-size: 14px; } @media (max-width: 768px) { .top-price__note { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 6px; } } .top-faq { padding: 112px min(3vw, 60px); background: #fff; } @media (max-width: 768px) { .top-faq { padding: 76px 20px; } } .top-faq__list { display: -ms-grid; display: grid; gap: 10px; max-width: 900px; margin: 55px auto 0; } @media (max-width: 768px) { .top-faq__list { margin-top: 35px; } } .top-faq__list details { overflow: hidden; border: 1px solid #e3e6e9; border-radius: 12px; } .top-faq__list details summary { display: -ms-grid; display: grid; -ms-grid-columns: 34px 17px 1fr 17px 24px; grid-template-columns: 34px 1fr 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 17px; padding: 20px 22px; cursor: pointer; font-size: clamp(0.75rem, 0.7205882353rem + 0.1470588235vw, 0.875rem); font-weight: 800; list-style: none; } .top-faq__list details summary::-webkit-details-marker { display: none; } .top-faq__list details summary span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 32px; height: 32px; background: #ff5d59; border-radius: 50%; color: #fff; } .top-faq__list details summary i { color: #ff5d59; font-size: 14px; font-style: normal; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } @media (max-width: 768px) { .top-faq__list details summary { -ms-grid-columns: 30px 12px 1fr 12px 20px; grid-template-columns: 30px 1fr 20px; gap: 12px; padding: 16px; } .top-faq__list details summary span { width: 30px; height: 30px; } } .top-faq__list details[open] summary i { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .top-faq__answer { display: -ms-grid; display: grid; -ms-grid-columns: 34px 17px 1fr; grid-template-columns: 34px 1fr; gap: 17px; padding: 18px 22px 22px; background: #f8f9fa; } .top-faq__answer span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 32px; height: 32px; background: #10243c; border-radius: 50%; color: #fff; } .top-faq__answer p { margin: 4px 0 0; color: #617083; font-size: 14px; line-height: 1.8; } @media (max-width: 768px) { .top-faq__answer { -ms-grid-columns: 30px 12px 1fr; grid-template-columns: 30px 1fr; gap: 12px; padding: 16px; } .top-faq__answer span { width: 30px; height: 30px; } } .top-contact { position: relative; overflow: hidden; padding: 112px min(3vw, 60px); background: #fff8ec; text-align: center; } @media (max-width: 768px) { .top-contact { padding: 76px 20px; } } .top-contact__deco { position: absolute; border: 60px solid rgba(255, 214, 90, 0.3); border-radius: 50%; width: 420px; height: 420px; } .top-contact__deco--1 { top: -210px; left: -260px; } .top-contact__deco--2 { right: -230px; bottom: -250px; } .top-contact__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .top-contact__inner > p { color: #ff5d59; font-size: 11px; font-weight: 900; letter-spacing: 0.22em; } .top-contact__inner > h2 { margin: 14px 0 20px; font-size: clamp(2.125rem, 1.7720588235rem + 1.7647058824vw, 3.625rem); font-weight: 400; letter-spacing: -0.055em; line-height: 1.2; } .top-contact__inner > span { color: #5f6d7d; font-size: clamp(0.8125rem, 0.7830882353rem + 0.1470588235vw, 0.9375rem); line-height: 1.9; } .top-contact__box { max-width: 560px; margin: 38px auto 20px; padding: 32px 48px; background: #fff; border-radius: 24px; -webkit-box-shadow: 0 20px 60px rgba(20, 43, 67, 0.12); box-shadow: 0 20px 60px rgba(20, 43, 67, 0.12); } @media (max-width: 768px) { .top-contact__box { padding: 27px 20px; } } .top-contact__box > small { display: inline-block; margin-bottom: 13px; padding: 7px 14px; background: #ffd65a; border-radius: 999px; font-size: 10px; font-weight: 900; } .top-contact__box > strong { display: block; font-size: clamp(1.125rem, 1.0514705882rem + 0.3676470588vw, 1.4375rem); line-height: 1.45; } .top-contact__box > p { margin: 9px 0 17px; color: #7e8995; font-size: 10px; } .top-contact__box > i { display: block; margin: 13px 0; color: #9aa3ad; font-size: 9px; font-style: normal; } .top-contact__mail { padding-bottom: 4px; border-bottom: 1px solid #10243c; color: #10243c; font-size: 11px; font-weight: 800; text-decoration: none; } .kakomi01, .kakomi02, .kakomi03 { padding: min(7vw, 50px); background-color: #F4F4F4; } .kakomi01.kakomi02, .kakomi02.kakomi02, .kakomi03.kakomi02 { background-color: #FFF7EC; } .kakomi01.kakomi03, .kakomi02.kakomi03, .kakomi03.kakomi03 { background-color: transparent; border: 1px solid #333; } .kakomi-radius01, .kakomi-radius02, .kakomi-radius03 { padding: min(7vw, 50px); border-radius: min(3vw, 30px); background-color: #F4F4F4; } .kakomi-radius01.kakomi-radius02, .kakomi-radius02.kakomi-radius02, .kakomi-radius03.kakomi-radius02 { background-color: #FFF7EC; } .kakomi-radius01.kakomi-radius03, .kakomi-radius02.kakomi-radius03, .kakomi-radius03.kakomi-radius03 { background-color: transparent; border: 1px solid #333; } .kakomi-over01, .kakomi-over02, .kakomi-over03 { padding: min(10vw, 100px) 0; width: 100vw; max-width: none; margin: 0 calc(50% - 50vw); background-color: #F4F4F4; } .kakomi-over01 .row, .kakomi-over01 .inner, .kakomi-over02 .row, .kakomi-over02 .inner, .kakomi-over03 .row, .kakomi-over03 .inner { max-width: 1000px; padding: 0 var(--space-content); margin: auto; -webkit-box-sizing: content-box; box-sizing: content-box; } .kakomi-over01.kakomi-over02, .kakomi-over02.kakomi-over02, .kakomi-over03.kakomi-over02 { background-color: #FFF7EC; } .kakomi-over01.kakomi-over03, .kakomi-over02.kakomi-over03, .kakomi-over03.kakomi-over03 { background-color: #F4F4F4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='16' cy='16' r='2' fill='%23e3e3e3'/%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: repeat; } .kakomi-over01 + .kakomi-over01, .kakomi-over01 + .kakomi-over02, .kakomi-over01 + .kakomi-over03, .kakomi-over02 + .kakomi-over01, .kakomi-over02 + .kakomi-over02, .kakomi-over02 + .kakomi-over03, .kakomi-over03 + .kakomi-over01, .kakomi-over03 + .kakomi-over02, .kakomi-over03 + .kakomi-over03 { margin-top: min(10vw, 100px); } .note-box { margin-bottom: min(4vw, 40px); } .note-box p { margin-bottom: 0; font-size: 14px; line-height: 1.5; } @media (max-width: 768px) { .note-box p { font-size: 12px; } } .note { position: relative; padding-left: 1.3em; } .note + .note { margin-top: 8px; } .note::before { content: "※"; position: absolute; left: 0; margin: 0; top: 0.4px; } .body-sitemap .sec_sitemap ul { border-top: 1px solid #ccc; } .body-sitemap .sec_sitemap ul li { list-style: none; border-bottom: 1px solid #ccc; } .body-sitemap .sec_sitemap ul li a { display: block; position: relative; padding: 10px 15px 10px 15px; font-size: 16px; text-decoration: none; } .body-sitemap .sec_sitemap ul li a::before { position: relative; top: -2px; content: ""; display: inline-block; margin-right: 10px; width: 7px; height: 7px; background-color: var(--c-primary); } .body-sitemap .sec_sitemap ul li a:hover { background-color: rgba(var(--c-primary-rgb), 0.2); } .body-sitemap .sec_sitemap ul li > ul li:last-child { border-bottom: none; } .body-sitemap .sec_sitemap ul li > ul li a { padding-left: 40px; } .body-sitemap .sec_sitemap ul li > ul li a::before { width: 5px; height: 5px; border-radius: 5px; } .post-password-form { padding: 100px 0 400px; } .box404 { padding: 100px 15px 200px; word-wrap: break-word; } .contact-box { width: 100%; padding: min(3vw, 30px) min(3vw, 30px); background-color: #fff; } .contact-box__form-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .contact-box__form-box .post-num input[type=text] { width: 100px; } .contact-box__dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contact-box dt, .contact-box dd { width: 100%; border-bottom: 1px dashed #ddd; -webkit-box-sizing: border-box; box-sizing: border-box; } .contact-box dt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 15px 0; border-bottom: none; } .contact-box dd { padding: 5px 10px; } @media (min-width: 768px) { .contact-box__dl { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .contact-box dt { width: 40%; padding: 20px 15px 20px 25px; border-right: none; border-bottom: 1px dashed #ddd; } .contact-box dd { padding: 20px 10px; width: 60%; } } .contact-box .req { font-size: 11px; background: #f44522; color: #fff; padding: 3px 6px 4px 5px; margin-right: 10px; position: relative; top: -2px; } .contact-box input, .contact-box textarea, .contact-box select { padding: 12px; border: 1px solid #e1e1e1; border-radius: 5px; color: #666; -webkit-box-shadow: 0 0 2px #d6d6d6 inset; box-shadow: 0 0 2px #d6d6d6 inset; } .contact-box input, .contact-box textarea { width: 100%; line-height: 1.4; } .contact-box input[type=checkbox], .contact-box input[type=radio] { width: auto; } .contact-box input[type=text]:focus, .contact-box input[type=tel]:focus, .contact-box input[type=email]:focus, .contact-box textarea:focus { border-color: #83B6C2; outline: none; -webkit-box-shadow: 2px 2px 4px rgba(143, 183, 222, 0.6), -2px -2px 4px rgba(143, 183, 222, 0.6), inset 0 1px 2px rgba(51, 51, 51, 0.2); box-shadow: 2px 2px 4px rgba(143, 183, 222, 0.6), -2px -2px 4px rgba(143, 183, 222, 0.6), inset 0 1px 2px rgba(51, 51, 51, 0.2); } .contact-box .wpcf7-radio { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5em 1em; } .contact-box .wpcf7-radio input[type=radio] { position: relative; top: -2px; margin-right: 5px; } .contact-box .privacy-link { margin-top: 20px; text-align: center; } .contact-box .submit_btn { text-align: center; padding: 3% 3% 0; width: 100%; } .contact-box .submitBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0; } .contact-box input[type=submit] { width: 100%; max-width: 280px; margin: 0 10px 10px 10px; -webkit-appearance: none; border-radius: 5px; background: var(--c-primary); color: #FFF; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); border: 1px solid var(--c-primary); cursor: pointer; letter-spacing: 2px; font-size: 18px; } .contact-box input[type=submit]:hover { border-radius: 5px; background: #fff; color: #333; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.35s, color 0.35s; transition: background-color 0.35s, color 0.35s; border: 1px solid var(--c-primary); } .contact-box input[type=submit][name=submitBack] { background-color: #999; border: 1px solid #999; } .contact-box input[type=submit][name=submitBack]:hover { background: #fff; } ::-webkit-input-placeholder { color: #afafaf; } :-moz-placeholder { color: #afafaf; } .archive-box { padding: 0 var(--space-content); -webkit-box-sizing: content-box; box-sizing: content-box; } .archive-box__inner { max-width: 1000px; margin: auto; } .archive-box__inner a { padding: 1.8em 40px; display: block; text-decoration: none; border-bottom: 1px solid #bbb; -webkit-transition: all, 0.3s; transition: all, 0.3s; } .archive-box__inner a:first-child { border-top: 1px solid #bbb; } .archive-box__inner a:hover { background: rgba(255, 255, 255, 0.6); } .archive-box dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .archive-box dt { position: relative; padding: 0 0 0 20px; font-family: var(--ff-eng); } .archive-box dt::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; -webkit-box-sizing: border-box; box-sizing: border-box; width: 6px; height: 6px; border: 6px solid transparent; border-left: 6px solid var(--c-primary); } .archive-box__text { padding: 0 20px; margin-right: auto; color: var(--c-text); text-align: left; } .archive-box__more { position: relative; padding: 0 20px 0 0; margin-left: auto; color: var(--c-primary); font-size: clamp(0.875rem, 0.8455882353rem + 0.1470588235vw, 1rem); } .archive-box__more::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; -webkit-box-sizing: border-box; box-sizing: border-box; width: 6px; height: 6px; border-top: 2px solid var(--c-primary); border-right: 2px solid var(--c-primary); -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media not (min-width: 768px) { .archive-box a { padding: 10px 20px; } .archive-box dl { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .archive-box dt { width: 100%; } } .post-2column { padding: 0 var(--space-content); } @media (max-width: 768px) { .post-2column { margin-bottom: min(10vw, 100px); } } .post-2column__inner { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1000px; margin: auto; gap: min(5vw, 50px); } @media (max-width: 768px) { .post-2column__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: min(10vw, 100px); } } .post-2column__inner .archive-box { width: 100%; padding: 0; } .post-2column__inner .archive-box__inner { width: 100%; } .post-2column__inner .archive-box__inner a { padding: 1.8em 20px; } @media (max-width: 768px) { .post-2column__inner .archive-box__inner a { padding: 10px 20px; } } .post-2column__inner .archive-box__inner dl { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .post-2column__inner .archive-box__inner dt { width: 100%; } .post-2column__inner .entry-content { width: 100%; } .post-2column__inner .entry-content .inner { max-width: none; padding: 0; } @media (max-width: 768px) { .post-2column__inner .entry-content { margin-bottom: 0; } } .post-2column .sidebar { width: 360px; } @media (max-width: 768px) { .post-2column .sidebar { width: 100%; } } .mk-imgBox09__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: min(4vw, 40px); max-width: 1200px; margin: auto; } .mk-imgBox09 figure { width: calc(33.3333333333% - min(4vw, 40px) * 2 / 3); } @media (max-width: 768px) { .mk-imgBox09 figure { width: calc(50% - min(4vw, 40px) * 1 / 2); } } .mk-imgBox09 a { color: var(--c-text); text-decoration: none; } .mk-imgBox09 a:hover .mk-imgBox09__img img { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0.8; } .mk-imgBox09__img { overflow: hidden; margin-bottom: 10px; } .mk-imgBox09__img img { width: 100%; height: min(20vw, 300px); -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.5s; transition: all 0.5s; } @media (max-width: 768px) { .mk-imgBox09__img img { height: 200px; height: min(36vw, 200px); } } .mk-imgBox09 figcaption { position: relative; padding-right: 27px; text-align: left; } .mk-imgBox09 figcaption::before { content: ""; position: absolute; top: 0; bottom: 0; right: 10px; width: 7px; height: 7px; margin: auto; border-top: 2px solid var(--c-text); border-right: 2px solid var(--c-text); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .pagination { clear: both; width: 100%; padding: min(10vw, 100px) 0 20px 0; position: relative; font-size: 14px; line-height: 14px; text-align: center; } .pagination .pagination-box { display: inline-block; } .pagination .pagination-box span, .pagination .pagination-box a { display: block; float: left; margin: 2px 2px 2px 0; padding: 10px 15px 10px 15px; text-decoration: none; width: auto; color: #fff; background: var(--c-primary); } .pagination .pagination-box a:hover { background: rgba(var(--c-primary-rgb), 0.8); } .pagination .pagination-box .current { padding: 10px 15px 10px 15px; background: rgba(var(--c-primary-rgb), 0.8); color: #fff; } @media only screen and (max-width: 413px) { .pagination { font-size: 12px; line-height: 12px; } .pagination span, .pagination a { padding: 8px 10px 8px 10px; } .pagination .current { padding: 8px 10px 8px 10px; } } /* single（シングルページ） ----------------------------------------------------*/ .content-single { padding-left: var(--space-content); padding-right: var(--space-content); } .content-single .inner { padding: min(7vw, 50px); background-color: #f7f7f7; } .content-single .inner .data { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 10px 15px 12px; margin-bottom: 1em; background-color: var(--c-primary); color: #fff; line-height: 1; font-size: clamp(0.75rem, 0.7205882353rem + 0.1470588235vw, 0.875rem); font-weight: 700; } .single-text-box { overflow: hidden; /* editor */ } .single-text-box strong { font-weight: bold; } .single-text-box em { font-style: italic; } .single-text-box blockquote { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px; } .single-text-box { /* img */ } .single-text-box .aligncenter { display: block; margin: 0 auto; } .single-text-box .alignright { float: right; margin-left: 1%; margin-bottom: 1%; } .single-text-box .alignleft { float: left; margin-right: 1%; margin-bottom: 1%; } .single-text-box .wp-block-image { margin-bottom: min(2vw, 20px); } .single-text-box img[class*=wp-image-], .single-text-box img[class*=attachment-] { height: auto; max-width: 100%; } @media only screen and (max-width: 768px) { .single-text-box .alignright, .single-text-box .alignleft { float: none; margin: auto; display: block; } }