@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+JP:wght@400;700&display=swap"); /* ----------------------------------------------------------- スタイルリセット ----------------------------------------------------------- */ /** * Swiper 7.2.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: October 27, 2021 */ @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{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{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,.swiper-3d .swiper-wrapper{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,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(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{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{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{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-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}/** * Swiper 7.3.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 18, 2021 */ @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{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{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,.swiper-3d .swiper-wrapper{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,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(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{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{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{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-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.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: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:flex;align-items: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:.35;cursor:auto;pointer-events:none}.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;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right: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;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.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, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-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:10px;top:50%;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%;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;transition:.2s transform,.2s top}.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%;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{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(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%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{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: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:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content: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%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;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;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{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:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;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;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}* { margin: 0; padding: 0; } div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, form, input, textarea, button, table, tr, th, td, article, aside, footer, header, hgroup, nav, section, a, span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } q:before, q:after { content: ""; } object, embed { vertical-align: top; } hr, legend { display: none; border: none; } abbr, acronym, fieldset { border: 0; } tr, th, td, caption { vertical-align: top; font-style: normal; font-weight: normal; text-align: left; } ol, ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: normal; font-size: 100%; } img { border: 0; font-size: 0; line-height: 0; vertical-align: bottom; } input, button, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none; } textarea { resize: vertical; } input[type=checkbox], input[type=radio] { display: none; } input[type=submit], input[type=button], label, button, select { cursor: pointer; } select::-ms-expand { display: none; } /** 背景によって読みにくくなってしまった文字を読みやすくするためのシャドウ */ @keyframes gradient { 0% { background-position: 0% 19%; } 50% { background-position: 100% 82%; } 100% { background-position: 0% 19%; } } @keyframes top-scroll { 0% { transform-origin: 0 100%; transform: scale(1, 1); } 40% { transform-origin: 0 100%; transform: scale(1, 0); } 60% { transform-origin: 0 0; transform: scale(1, 0); } 99% { transform-origin: 0 0; transform: scale(1, 1); } 100% { transform-origin: 0 100%; transform: scale(1, 1); } } body, select, input, textarea, p, a, div { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; font-weight: 400; font-style: normal; } a { color: inherit; text-decoration: inherit; cursor: inherit; } a:active, a:focus { outline: none; } a { cursor: pointer; } body { background: #f7f7f7; } @media all and (min-width: 769px) { .pc { display: block; } } @media all and (max-width: 768px) { .pc { display: none !important; } } @media all and (max-width: 768px) { .sp { display: block; } } @media all and (min-width: 769px) { .sp { display: none !important; } } main .page-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 100ms; -moz-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 100ms; -o-transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 100ms; transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 100ms; /* easeInOutQuint */ } main .page-background.appear { opacity: 1; } .swiper-button-prev, .swiper-button-next { position: relative; top: 0; transform: translate(0, 0); margin: 0; } .swiper-button-prev::after, .swiper-button-next::after { display: none; } .swiper-button-prev::before, .swiper-button-next::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: #262626 1px solid; } .swiper-button-prev { left: 0; } .swiper-button-next { right: 0; } .l-header { position: fixed; width: 100%; z-index: 100; -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .l-header__inner { display: flex; justify-content: space-between; align-items: center; -webkit-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; /* easeOutQuint */ } .l-header h1 { line-height: 0; } @media all and (max-width: 768px) { .l-header h1 { margin-left: 5.3333333333%; margin-top: 5.3333333333%; margin-bottom: 5.3333333333%; width: 19.7333333333%; z-index: 101; } } @media all and (min-width: 769px) { .l-header h1 { margin-left: 40px; margin-top: 32px; margin-bottom: 32px; width: 110px; max-width: 110px; } } .l-header h1 svg .group { -webkit-transition: 0 380ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -moz-transition: 0 380ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -ms-transition: 0 380ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -o-transition: 0 380ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; transition: 0 380ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .l-header h1 a { display: block; } .l-header h1 img { width: 100%; } .l-header__links { margin-right: 40px; display: flex; justify-content: center; align-items: center; } @media all and (max-width: 768px) { .l-header__links { justify-content: flex-end; width: 53.3333333333%; margin-right: 4.2666666667%; } } @media all and (max-width: 768px) { .l-header nav { width: 100%; background: #16202f; position: fixed; top: 0; left: 0; z-index: 50; overflow: auto; max-height: 100vh; -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate(0, -100%); } } .l-header nav .subnavi { display: none; } @media all and (max-width: 768px) { .l-header nav .subnavi { padding-top: 0; padding-bottom: 0; background: #1c2738; height: 0; overflow: hidden; -webkit-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; /* easeOutQuint */ display: block; } } @media all and (max-width: 768px) { .l-header nav .subnavi.open { padding-top: 2.6666666667%; padding-bottom: 2.6666666667%; height: auto; } .l-header nav .subnavi.open a { padding: 6.1333333333% 0; opacity: 1; } } @media all and (max-width: 768px) { .l-header nav .subnavi li { border-top: none; padding-left: 14.4%; } } .l-header nav .subnavi a { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; } @media all and (max-width: 768px) { .l-header nav .subnavi a { font-size: 3.7333333333vw; -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 0.5333333333% 0; opacity: 0; } } .l-header nav .subnavi a::after { display: none; } @media all and (min-width: 769px) { .l-header nav .l-footer__sns { display: none; } } @media all and (max-width: 768px) { .l-header nav .l-footer__sns { padding-top: 10.6666666667%; } } @media all and (min-width: 769px) { .l-header nav .l-footer__copyarea { display: none; } } @media all and (max-width: 768px) { .l-header nav .l-footer__copyarea { border-top: 0; padding-top: 10.6666666667%; } } .l-header nav > ul { display: flex; white-space: nowrap; } @media all and (max-width: 768px) { .l-header nav > ul { display: block; padding-top: 13.3333333333%; border-bottom: rgba(255, 255, 255, 0.1) 1px solid; } } .l-header nav > ul li { font-size: 15px; margin-right: 32px; } @media all and (max-width: 768px) { .l-header nav > ul li { font-size: 4.8vw; margin-right: 0; border-top: rgba(255, 255, 255, 0.1) 1px solid; } } .l-header nav > ul li .js-headernavi { position: relative; } @media all and (max-width: 768px) { .l-header nav > ul li .js-headernavi::after { content: ""; display: block; position: absolute; right: 8.5333333333%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22chevron_down%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M13%2C1%2C7%2C7%2C1%2C1%22%20transform%3D%22translate(5.5%208)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"); background-size: contain; top: 50%; width: 6.4%; padding-top: 6.4%; transform: translate(0, -50%); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .l-header nav > ul li .js-headernavi.open::after { transform: translate(0, -50%) rotate(180deg); } } .l-header nav > ul a { color: #262626; overflow: hidden; line-height: 1.4; position: relative; display: inline-block; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 900; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (min-width: 769px) { .l-header nav > ul a { opacity: 0; } } @media all and (min-width: 769px) { .l-header nav > ul a.appear { opacity: 1; } } @media all and (max-width: 768px) { .l-header nav > ul a { opacity: 1; } } @media all and (max-width: 768px) { .l-header nav > ul a { color: #fff; font-size: 4.2666666667vw; } } @media all and (min-width: 769px) { .l-header nav > ul a.active > div { color: #4060ff; } } .l-header nav > ul a > div { color: #262626; pointer-events: none; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 900; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media all and (min-width: 769px) { .l-header nav > ul a > div.appear { -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @media all and (max-width: 768px) { .l-header nav > ul a > div { color: #fff; font-size: 4.2666666667vw; } } .l-header nav > ul a > div:last-child { line-height: 1; position: relative; } .l-header nav > ul a > div:last-child::after { position: absolute; content: ""; display: none; height: 1px; width: 8px; background: #fff; top: 50%; right: -8px; transform: translate(100%, 0); } @media all and (max-width: 768px) { .l-header nav > ul a > div:last-child::after { width: 10px; right: -10px; } } @media all and (min-width: 769px) { .l-header nav > ul a:hover div { color: #4060ff; } .l-header nav > ul a:hover::before { opacity: 1; } } @media all and (max-width: 768px) { .l-header nav > ul a { display: block; padding: 6.1333333333% 0 6.1333333333% 8.5333333333%; color: #fff; } } .l-header nav > ul a { /*&::before { position: absolute; line-height: 1.5; left: 0; top: 0; @include lato-black; opacity: 0; color: $gray9; @include ease-out-quint($duration); @include mq_sp { display: none; } } // Service &.l-headernavi__service { &::before { content: 'Service'; } } // Business &.l-headernavi__business { &::before { content: 'Business'; } } // Company &.l-headernavi__company { &::before { content: 'Company'; } } // News &.l-headernavi__news { &::before { content: 'News'; } } // Contact &.l-headernavi__contact { &::before { content: 'Contact'; } }*/ } .l-header .p-button { width: 125px; padding: 11px 0; border: none; position: relative; z-index: 101; } @media all and (min-width: 769px) { .l-header .p-button::before { background: #4060ff; } .l-header .p-button p { color: #fff; } .l-header .p-button:hover { background: #fff; } .l-header .p-button:hover::before { background: #fff; } .l-header .p-button:hover p { color: #4060ff; } } @media all and (max-width: 768px) { .l-header .p-button { width: 22%; background: transparent; padding: 0; margin-right: 8%; border-radius: 0; line-height: 1.4; } .l-header .p-button::before { background: transparent; } .l-header .p-button p { color: #4060ff; font-size: 3.2vw; } } @media all and (min-width: 769px) { .l-header__navibutton { display: none; } } @media all and (max-width: 768px) { .l-header__navibutton { width: 12%; padding-top: 12%; position: relative; z-index: 101; } .l-header__navibutton span { background: #262626; width: 75%; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .l-header__navibutton .line1 { margin-top: -25%; } .l-header__navibutton .line3 { margin-top: 25%; } } @media all and (min-width: 769px) { .l-header.scrolled { transform: translate(0, -105%); } } @media all and (max-width: 768px) { .l-header.scrolled .l-header__inner { background: #fff; } } .l-header.navi-open h1 svg .group { fill: #fff; } @media all and (max-width: 768px) { .l-header.navi-open nav { transform: translate(0, 0); } } .l-header.navi-open .l-header__navibutton span { background: #fff; } .l-header.navi-open .l-header__navibutton .line2 { opacity: 0; } .l-header.navi-open .l-header__navibutton .line1, .l-header.navi-open .l-header__navibutton .line3 { margin-top: 0; } .l-header.navi-open .l-header__navibutton .line1 { transform: translate(-50%, -50%) rotate(-315deg); } .l-header.navi-open .l-header__navibutton .line3 { transform: translate(-50%, -50%) rotate(315deg); } .l-footer { width: 100%; position: relative; background: #16202f; } .l-footer__inner { margin: 0 auto; } @media all and (min-width: 769px) { .l-footer__inner { max-width: 1232px; padding: 0 40px; } } @media all and (max-width: 768px) { .l-footer__inner { max-width: none; padding: 0; width: 100%; } } .l-footer__info { width: 14.4097222222%; max-width: 166px; } @media all and (max-width: 768px) { .l-footer__info { width: 100%; max-width: none; } } .l-footer__info svg { width: 100%; } .l-footer__logo { display: block; width: 100%; } @media all and (max-width: 768px) { .l-footer__logo { display: none; } } .l-footer__sns { display: flex; justify-content: space-between; align-items: center; } @media all and (min-width: 769px) { .l-footer__sns { width: 91.5662650602%; margin-top: 38.5542168675%; } } @media all and (max-width: 768px) { .l-footer__sns { width: 40.5333333333%; padding-bottom: 10.6666666667%; margin: 0 auto; } } .l-footer__snsicon { position: relative; width: 26.3157894737%; padding-top: 26.3157894737%; line-height: 0; } .l-footer__snsicon::before { content: ""; border: #fff 1px solid; width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ } .l-footer__snsicon svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media all and (min-width: 769px) { .l-footer__snsicon:hover::before { transform: translate(-50%, -50%) scale(1.1); } } .l-footer__snsicon.tw svg { width: 60%; } .l-footer__snsicon.fb svg { width: 20%; } .l-footer__snsicon.ig svg { width: 40%; } .l-footer__links { display: flex; width: 100%; justify-content: space-between; padding-bottom: 13.8888888889%; padding-top: 6.9444444444%; position: relative; } @media all and (max-width: 768px) { .l-footer__links { display: block; padding-top: 10.6666666667%; padding-bottom: 0; } } .l-footer__navi { flex-grow: 1; width: 79.8611111111%; } @media all and (max-width: 768px) { .l-footer__navi { width: 100%; } } @media all and (min-width: 769px) { .l-footer__navi .navi { display: flex; justify-content: flex-end; margin-right: 2.1739130435%; } } @media all and (min-width: 769px) { .l-footer__navi .navi > li:nth-child(3) { margin-left: 2.7777777778%; } } @media all and (min-width: 769px) { .l-footer__navi li { margin-left: 5.5555555556%; } } @media all and (max-width: 768px) { .l-footer__navi li { border-top: rgba(255, 255, 255, 0.1) 1px solid; } } .l-footer__navi li a { display: inline-block; color: #fff; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; position: relative; -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (max-width: 768px) { .l-footer__navi li a { line-height: 1; display: block; font-size: 4.2666666667vw; padding: 6.1333333333% 0; } } @media all and (min-width: 769px) { .l-footer__navi li a:hover { color: #00abdc; } } @media all and (max-width: 768px) { .l-footer__navi li .js-footernavi::after { content: ""; display: block; position: absolute; right: 8.5333333333%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22chevron_down%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M13%2C1%2C7%2C7%2C1%2C1%22%20transform%3D%22translate(5.5%208)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"); background-size: contain; top: 50%; width: 6.4%; padding-top: 6.4%; transform: translate(0, -50%); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .l-footer__navi li .js-footernavi.open::after { transform: translate(0, -50%) rotate(180deg); } } .l-footer__navi li span { line-height: 1; position: relative; } .l-footer__navi li span::after { position: absolute; content: ""; display: none; height: 1px; width: 8px; background: #fff; top: 50%; right: -8px; transform: translate(100%, 0); } @media all and (max-width: 768px) { .l-footer__navi li span { padding-left: 8.5333333333%; } .l-footer__navi li span::after { width: 10px; right: -10px; } } .l-footer__navi .subnavi { width: 100%; } @media all and (min-width: 769px) { .l-footer__navi .subnavi { margin-top: 20px; } } @media all and (max-width: 768px) { .l-footer__navi .subnavi { padding-top: 0; padding-bottom: 0; background: #1c2738; height: 0; overflow: hidden; -webkit-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; /* easeOutQuint */ } } @media all and (max-width: 768px) { .l-footer__navi .subnavi.open { padding-top: 2.6666666667%; padding-bottom: 2.6666666667%; height: auto; } .l-footer__navi .subnavi.open a { padding: 6.1333333333% 0; opacity: 1; } } @media all and (min-width: 769px) { .l-footer__navi .subnavi li { margin: 12px 0 0 0; } } @media all and (max-width: 768px) { .l-footer__navi .subnavi li { border-top: none; padding-left: 14.4%; } } .l-footer__navi .subnavi a { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 14px; } @media all and (max-width: 768px) { .l-footer__navi .subnavi a { font-size: 3.7333333333vw; -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 0.5333333333% 0; opacity: 0; } } .l-footer__navi .subnavi a::after { display: none; } .l-footer__pagetop { position: absolute; width: 4.1666666667%; padding-top: 4.1666666667%; right: 0; bottom: 0; margin-bottom: 3.6458333333%; cursor: pointer; -webkit-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -moz-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -ms-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -o-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; /* easeOutQuint */ transform: translate(0, 30px); } .l-footer__pagetop::before { content: ""; position: absolute; background: rgba(255, 255, 255, 0.9); border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ } @media all and (min-width: 769px) { .l-footer__pagetop:hover::before { transform: scale(1.15); } } @media all and (max-width: 768px) { .l-footer__pagetop { width: 12.8%; padding-top: 12.8%; bottom: auto; right: 4.2666666667%; top: 0; transform: translate(0, -50%); } } .l-footer__pagetop .chevron_up { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; } .l-footer__pagetop.appear { transform: translate(0, 0); } @media all and (max-width: 768px) { .l-footer__pagetop.appear { transform: translate(0, -50%); } } .l-footer__copyarea { width: 100%; border-top: rgba(255, 255, 255, 0.1) 1px solid; display: flex; justify-content: space-between; align-items: center; padding-top: 3.4722222222%; padding-bottom: 6.9444444444%; } @media all and (max-width: 768px) { .l-footer__copyarea { width: 100%; padding-top: 18.6666666667%; padding-left: 8%; padding-right: 8%; margin: 0 auto; } } .l-footer__copy { color: #fff; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px; } @media all and (max-width: 768px) { .l-footer__copy { font-size: 2.6666666667vw; } } .l-footer__policy { color: #fff; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px; text-align: right; -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (min-width: 769px) { .l-footer__policy:hover { color: #00abdc; } } @media all and (max-width: 768px) { .l-footer__policy { font-size: 2.6666666667vw; } } .p-button { border-radius: 50px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border: #4060ff 1px solid; padding: 23px 0 22px; -webkit-transition: clip-path 800ms cubic-bezier(0.23, 1, 0.32, 1) 1000ms; -moz-transition: clip-path 800ms cubic-bezier(0.23, 1, 0.32, 1) 1000ms; -ms-transition: clip-path 800ms cubic-bezier(0.23, 1, 0.32, 1) 1000ms; -o-transition: clip-path 800ms cubic-bezier(0.23, 1, 0.32, 1) 1000ms; transition: clip-path 800ms cubic-bezier(0.23, 1, 0.32, 1) 1000ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (max-width: 768px) { .p-button { padding: 3.4920634921% 0 2.8571428571%; } } .p-button p { font-size: 16px; color: #4060ff; line-height: 1; text-align: center; letter-spacing: 0.02rem; position: relative; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 900; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media all and (min-width: 769px) { .p-button p { -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @media all and (max-width: 768px) { .p-button p { font-size: 3.7333333333vw; } } @media all and (min-width: 769px) { .p-button p { -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } } .p-button::before { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 99.2%; height: 100.5%; background: #fff; border-radius: 80px; } @media all and (min-width: 769px) { .p-button::before { -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } } .p-button.type-arrow { justify-content: flex-start; } .p-button.type-arrow p { padding-left: 30px; } .p-button.type-arrow::after { content: ""; position: absolute; top: 50%; right: 30px; width: 15px; padding-top: 15px; transform: translate(0, -50%); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.667%2014.495%22%3E%20%3Cline%20x2%3D%2211.667%22%20transform%3D%22translate(1%207.248)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M12%2C5l5.833%2C5.833L12%2C16.667%22%20transform%3D%22translate(-5.167%20-3.586)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } @media all and (max-width: 768px) { .p-button.type-arrow::after { right: 15.7142857143%; width: 11.4285714286%; } } .p-button.type-arrowback::after { content: ""; position: absolute; top: 50%; left: 30px; width: 15px; padding-top: 15px; transform: translate(0, -50%) rotate(180deg); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.667%2014.495%22%3E%20%3Cline%20x2%3D%2211.667%22%20transform%3D%22translate(1%207.248)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M12%2C5l5.833%2C5.833L12%2C16.667%22%20transform%3D%22translate(-5.167%20-3.586)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } @media all and (max-width: 768px) { .p-button.type-arrowback::after { right: 15.7142857143%; width: 11.4285714286%; } } .p-button.type-blank { justify-content: flex-start; } .p-button.type-blank p { padding-left: 30px; } .p-button.type-blank::after { content: ""; position: absolute; top: 50%; right: 30px; width: 20px; padding-top: 20px; transform: translate(0, -50%); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22external-link%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%2F%3E%20%3Cg%20transform%3D%22translate(2.5%202.5)%22%3E%20%3Cpath%20d%3D%22M13.5%2C9.833V16.5H1V4H7.667%22%20transform%3D%22translate(-1%20-1.5)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M13%2C1h5V6%22%20transform%3D%22translate(-3%20-1)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cline%20y1%3D%229.167%22%20x2%3D%229.167%22%20transform%3D%22translate(5.833)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: contain; } .p-button.type-accordion { justify-content: flex-start; } .p-button.type-accordion p { padding-left: 30px; } .p-button.type-accordion::after { content: ""; display: block; width: 12px; height: 8px; position: absolute; top: 50%; right: 32px; background: url('data:image/svg+xml,') no-repeat; transform: translate(0, -50%) rotate(180deg); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .p-button.type-accordion.-open::after { transform: translate(0, -50%) rotate(0deg); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .p-button.type-gray { border: #e5e5e5 1px solid; background: #e5e5e5; } .p-button.type-gray::before { background: #e5e5e5; } .p-button.type-gray p { color: #262626; } .p-button.type-blue { background: #4060ff; } .p-button.type-blue::before { background: #4060ff; } .p-button.type-blue p { color: #fff; } .p-button.type-center p { text-align: center; } @media all and (min-width: 769px) { .p-button:hover { -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #4060ff; } .p-button:hover::before { width: 100.4%; background: #4060ff; } .p-button:hover p { color: #fff; } .p-button:hover.type-gray { background: #fff; border: #4060ff 1px solid; -webkit-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; transition: all 380ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; /* easeOutQuint */ } .p-button:hover.type-gray::before { background: #fff; } .p-button:hover.type-gray p { color: #4060ff; } .p-button:hover::after { filter: brightness(500%); } } .p-table { display: table; } .p-table__group { display: table-row-group; } .p-table__head { display: table-cell; vertical-align: middle; border-bottom: #262626 1px solid; } .p-table__body { display: table-cell; vertical-align: middle; border-bottom: #f2f2f2 1px solid; } .js-header2 > div { opacity: 0; } .l-section { width: 100%; position: relative; } .l-section__inner { margin: 0 auto; position: relative; } @media all and (min-width: 769px) { .l-section__inner { max-width: 1232px; padding: 0 40px; } } @media all and (max-width: 768px) { .l-section__inner { padding: 0; } } .l-section__inner h3 { font-size: 24px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .l-section__inner h3 div { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; will-change: transform; } .l-section__inner h3 { color: #4060ff; } @media all and (max-width: 768px) { .l-section__inner h3 { font-size: 4.2666666667vw; } } .l-section__inner h3 span { position: relative; } .l-section__inner h3 span:not(.-noborder)::after { will-change: transform; content: ""; height: 1px; width: 24px; background: #4060ff; position: absolute; top: 50%; right: -12px; transform-origin: 0 0; transform: translate(100%, -50%) scale(0, 1); -webkit-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; -moz-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; -ms-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; -o-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; /* easeOutQuint */ } .l-section__inner h3.appear span::after { transform: translate(100%, -50%) scale(1, 1); } .l-section .text-area .text__body > h2 { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; line-height: 1.3; font-size: 40px; } .l-section .text-area .text__body > h2 div { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; will-change: transform; opacity: 0; } @media all and (max-width: 768px) { .l-section .text-area .text__body > h2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 6.4vw; } } .l-section .text-area .text__body > h2.type-white { color: #fff; } .l-section .text-area .text__body > h2.type-white div { color: #fff; } .l-section .text-area .text__body > p { line-height: 1.8; font-size: 18px; text-align: justify; } @media all and (max-width: 768px) { .l-section .text-area .text__body > p { font-size: 3.7333333333vw; } } .l-section .text-area .text__body > p.type-white { color: #fff; } .l-section .text-area.type-right { margin: 0 0 0 auto; } .l-section .text-area.js-lazyclass > p, .l-section .text-area .js-lazyclass > p { opacity: 0; transform: translate(0, 10px); -webkit-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 900ms; -moz-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 900ms; -ms-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 900ms; -o-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 900ms; transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 900ms; /* easeOutQuint */ } .l-section .text-area.js-lazyclass .p-button, .l-section .text-area .js-lazyclass .p-button { clip-path: ellipse(50% 100% at -100% 50%); } .l-section .text-area.appear > p, .l-section .text-area .appear > p { opacity: 1; transform: translate(0, 0); } .l-section .text-area.appear .buttons .p-button, .l-section .text-area .appear .buttons .p-button { clip-path: ellipse(50% 100% at 50% 50%); } .l-section .maskleft { clip-path: polygon(0% 0%, 0% 0, 0% 150%, 0 150%); -webkit-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; -moz-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; -o-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; /* easeInOutCubic */ } .l-section .maskleft.appear { clip-path: polygon(0% 0%, 150% 0, 150% 150%, 0 150%); } .l-section .maskright { clip-path: polygon(150% 0%, 150% 0, 150% 150%, 150% 150%); -webkit-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; -moz-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; -o-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; /* easeInOutCubic */ } .l-section .maskright.appear { clip-path: polygon(0% 0%, 150% 0, 150% 150%, 0 150%); } #contact { background: rgba(22, 33, 52, 0.95); } @media all and (min-width: 769px) { #contact { padding: 170px 0 160px; } } @media all and (max-width: 768px) { #contact { padding: 21.3333333333% 0; } } #contact .text-area { display: flex; justify-content: space-between; align-items: center; } @media all and (max-width: 768px) { #contact .text-area { display: block; width: 84%; margin: 0 auto; } } #contact .text__body { flex-grow: 1; width: 64.2361111111%; } @media all and (max-width: 768px) { #contact .text__body { width: 100%; } } #contact .text__body h2 { font-size: 32px; } @media all and (max-width: 768px) { #contact .text__body h2 { font-size: 6.4vw; } } #contact .text__body p { margin-top: 2.7027027027%; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media all and (max-width: 768px) { #contact .text__body p { font-size: 3.7333333333vw; margin-top: 7.619047619%; } } #contact .button-area { width: 320px; } @media all and (max-width: 768px) { #contact .button-area { width: 100%; } } #contact .p-button { width: 100%; display: flex; align-items: center; padding: 7.5% 0 7.1875%; } @media all and (max-width: 768px) { #contact .p-button { width: 76.1904761905%; max-width: none; margin-top: 15.873015873%; padding: 5.3968253968% 0; } } #contact .p-button p { padding-left: 4.1666666667%; } @media all and (min-width: 769px) { #contact .p-button p { font-size: 20px; } } @media all and (max-width: 768px) { #contact .p-button p { font-size: 4.2666666667vw; } } #contact .p-button svg { width: 11.6666666667%; position: relative; padding-left: 18.3333333333%; } @media all and (max-width: 768px) { #contact .p-button svg { width: 10%; padding-left: 17.5%; } } #contact .p-button .contact-icon-mail { -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (min-width: 769px) { #contact .p-button:hover svg { stroke: #fff; } } .p-link { font-size: 14px; display: inline-flex; align-items: center; border-bottom: 1px solid #4060ff; color: #4060ff; padding-bottom: 8px; } .p-link.type-arrow::after { content: ""; width: 14px; height: 14px; margin-left: 32px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22arrow-right%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%20%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22none%22%2F%3E%20%3Cline%20x2%3D%229.333%22%20transform%3D%22translate(3.333%208)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M12%2C5l4.667%2C4.667L12%2C14.333%22%20transform%3D%22translate(-4%20-1.667)%22%20fill%3D%22none%22%20stroke%3D%22%234060ff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"); flex-shrink: 0; } .p-link.type-blank::after { content: ""; width: 14px; height: 14px; margin-left: 32px; background-image: url('data:image/svg+xml,'); flex-shrink: 0; } .linkcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; } @media all and (max-width: 768px) { .linkcards { width: 84%; margin: 0 auto; grid-template-columns: repeat(1, 1fr); } } .linkcards.-col2 { grid-template-columns: repeat(2, 1fr); } @media all and (max-width: 768px) { .linkcards.-col2 { grid-template-columns: repeat(1, 1fr); } } .linkcards.-col2 { gap: 60px 80px; } .linkcards.-col2 .linkcard { flex-direction: row; } .linkcards.-col2 .linkcard .image-area { flex: 0 0 47.7611940299%; } .linkcards.-col2 .linkcard .text-area { padding-top: 0; padding-left: 32px; display: flex; flex-direction: column; } @media all and (max-width: 768px) { .linkcards.-col2 .linkcard .text-area { padding-left: 16px; } } .linkcards.-col2 .linkcard .text-area .buttons { margin-top: auto; } .linkcards .linkcard { display: flex; flex-direction: column; border-bottom: 1px solid #4060ff; padding-bottom: 24px; } @media all and (max-width: 768px) { .linkcards .linkcard { flex-direction: row; align-items: flex-start; } } .linkcards .linkcard .image-area { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .linkcards .linkcard .image-area { flex: 0 0 47.2668810289%; } } .linkcards .linkcard .image-area .img { position: relative; } .linkcards .linkcard .image-area .img::before { content: ""; float: left; padding-top: 75%; } .linkcards .linkcard .image-area .img[data-ratio="1:1"]::before { padding-top: 100%; } .linkcards .linkcard .image-area .img[data-ratio="4:3"]::before { padding-top: 75%; } .linkcards .linkcard .image-area .img[data-ratio="3:2"]::before { padding-top: 66.6666666667%; } .linkcards .linkcard .image-area .img[data-ratio="16:9"]::before { padding-top: 56.25%; } .linkcards .linkcard .image-area .img[data-ratio="2:1"]::before { padding-top: 50%; } .linkcards .linkcard .image-area .img[data-ratio="3:4"]::before { padding-top: 133.3333333333%; } .linkcards .linkcard .image-area .img[data-ratio="2:3"]::before { padding-top: 150%; } .linkcards .linkcard .image-area .img[data-ratio=golden]::before { padding-top: 61.804697157%; } .linkcards .linkcard .image-area .img[data-ratio=silver]::before { padding-top: 70.7213578501%; } .linkcards .linkcard .image-area .img::after { content: ""; display: table; clear: both; } .linkcards .linkcard .image-area .img > :first-child { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .linkcards .linkcard .image-area img { object-fit: cover; } @media all and (min-width: 769px) { .linkcards .linkcard .text-area { padding-top: 48px; } } @media all and (max-width: 768px) { .linkcards .linkcard .text-area { padding-left: 16px; flex-direction: row; align-items: flex-start; } } .linkcards .linkcard .text-area .linkcard__title span { font-size: 16px; color: #4060ff; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media all and (max-width: 768px) { .linkcards .linkcard .text-area .linkcard__title span { font-size: 12px; } } .linkcards .linkcard .text-area .linkcard__title p { font-size: 32px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; margin-top: 8px; } @media all and (max-width: 768px) { .linkcards .linkcard .text-area .linkcard__title p { font-size: 20px; margin-top: 4px; } } .linkcards .linkcard .text-area .linkcard__title p > div { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .linkcards .linkcard .text-area .buttons { margin-top: 48px; } } .linkcards .linkcard .text-area .buttons .p-button { display: inline-block; padding-right: 80px; } @media all and (min-width: 769px) { .linkcards .linkcard .text-area .buttons .p-button { padding-top: 16px; padding-bottom: 16px; } } @media all and (max-width: 768px) { .linkcards .linkcard .text-area .buttons .p-button { margin-top: 24px; padding-top: 7.619047619%; padding-bottom: 7.619047619%; padding-right: 40px; } .linkcards .linkcard .text-area .buttons .p-button::after { right: 16px; width: 10px; padding-top: 10px; } .linkcards .linkcard .text-area .buttons .p-button p { padding-left: 16px; font-size: 12px; } } .p-iframe { position: relative; } .p-iframe::before { content: ""; float: left; padding-top: 56.25%; } .p-iframe[data-ratio="1:1"]::before { padding-top: 100%; } .p-iframe[data-ratio="4:3"]::before { padding-top: 75%; } .p-iframe[data-ratio="3:2"]::before { padding-top: 66.6666666667%; } .p-iframe[data-ratio="16:9"]::before { padding-top: 56.25%; } .p-iframe[data-ratio="2:1"]::before { padding-top: 50%; } .p-iframe[data-ratio="3:4"]::before { padding-top: 133.3333333333%; } .p-iframe[data-ratio="2:3"]::before { padding-top: 150%; } .p-iframe[data-ratio=golden]::before { padding-top: 61.804697157%; } .p-iframe[data-ratio=silver]::before { padding-top: 70.7213578501%; } .p-iframe::after { content: ""; display: table; clear: both; } .p-iframe > :first-child { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .p-accordion { width: 100%; text-align: left; } .p-accordion.default-open + .p-accordion-contents { display: block; } .p-accordion-contents { display: none; } .l-section { padding: 160px 0; } @keyframes maskleft { from { clip-path: polygon(0% 0%, 0% 0, 0% 150%, 0 150%); } to { clip-path: polygon(0% 0%, 150% 0, 150% 150%, 0 150%); } } .l-pagetitle { width: 100%; margin-bottom: 160px; position: relative; top: 88px; } @media all and (min-width: 769px) { .l-pagetitle { height: 480px; } .philosophy .l-pagetitle { height: 580px; margin-bottom: 0; padding-bottom: 100px; overflow: hidden; } .interview .l-pagetitle { margin-bottom: 180px; } .service .l-pagetitle { margin-bottom: 200px; } .daresugugift .l-pagetitle { height: 580px; margin-bottom: 100px; padding-bottom: 100px; overflow: hidden; } } @media all and (max-width: 768px) { .philosophy .l-pagetitle { margin-bottom: 180px; overflow: hidden; } .partnership .l-pagetitle { margin-bottom: 16px; } .interview .l-pagetitle { margin-bottom: 100px; } .service .l-pagetitle { margin-bottom: 200px; } .daresugugift .l-pagetitle { margin-bottom: 100px; overflow: hidden; } .company .l-pagetitle { margin-bottom: 100px; } } @media all and (min-width: 769px) { .l-pagetitle.-basic { height: 320px; margin-bottom: 80px; } } @media all and (max-width: 768px) { .l-pagetitle.-basic { margin-bottom: 40px; } } @media all and (max-width: 768px) { .l-pagetitle.-basic .text-area { margin-bottom: 6.3492063492%; padding-left: 8.5333333333%; padding-right: 8.5333333333%; } } .l-pagetitle.-basic .text-area .category { font-size: 24px; color: #4060ff; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-bottom: 32px; } .l-pagetitle.-basic .text-area .category::after { content: "/"; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; margin-left: 16px; } @media all and (max-width: 768px) { .l-pagetitle.-basic .text-area .category { font-size: 14px; margin-bottom: 16px; } } .l-pagetitle.-basic .text-area h1 { font-size: 80px; } @media all and (max-width: 768px) { .l-pagetitle.-basic .text-area h1 { font-size: 40px; } } .l-pagetitle.-basic .text-area h1 + p { font-size: 28px; opacity: 0; } .loaded .l-pagetitle.-basic .text-area h1 + p { opacity: 1; } @media all and (max-width: 768px) { .l-pagetitle.-basic .text-area h1 + p { font-size: 16px; } } .l-pagetitle.-basic .text-area .p-link { margin-top: 16px; } .l-pagetitle.-basic .text-area .p-link p { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } .l-pagetitle.-basic .image-area { position: absolute; width: 18.75%; padding-top: 18.75%; top: 50%; right: 6.0763888889%; transform: translate(0, -50%); } @media all and (max-width: 768px) { .l-pagetitle.-basic .image-area { position: static; width: 29.8666666667%; padding-top: 29.8666666667%; transform: translate(0, 0); margin: 32px auto 60px; } } .l-pagetitle.-basic .image-area::before { content: ""; background: #4060ff; width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; transform: translate(-50%, -50%) rotate(45deg); } .l-pagetitle.-basic .image-area .img { position: absolute; width: 59.2592592593%; padding-top: 59.2592592593%; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); line-height: 0; opacity: 0; -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .loaded .l-pagetitle.-basic .image-area .img { opacity: 1; transform: translate(-50%, -50%); } .l-pagetitle.-basic .image-area .img { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .l-pagetitle.-basic .image-area .img { width: 85.7142857143%; padding-top: 85.7142857143%; } } .l-pagetitle.-basic .image-area .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46.875%; } @media all and (max-width: 768px) { .l-pagetitle.-basic .image-area .img img { width: 50%; } } .l-pagetitle__inner { display: flex; align-items: center; height: 100%; margin: 0 auto; position: relative; } @media all and (min-width: 769px) { .l-pagetitle__inner { max-width: 1232px; padding: 0 40px; } } @media all and (max-width: 768px) { .l-pagetitle__inner { flex-direction: column; } } .daresugugift .l-pagetitle .text-area { position: relative; z-index: 1; } .l-pagetitle .text-area h1 { font-size: 96px; color: #4060ff; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; clip-path: polygon(0% 0%, 0% 0, 0% 150%, 0 150%); animation: maskleft 1s 0.3s forwards; } @media all and (max-width: 768px) { .l-pagetitle .text-area h1 { font-size: 48px; } } .l-pagetitle .text-area h1 + p { font-size: 32px; margin-top: 16px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; opacity: 0; } .loaded .l-pagetitle .text-area h1 + p { opacity: 1; } @media all and (max-width: 768px) { .l-pagetitle .text-area h1 + p { font-size: 16px; margin-top: 8px; } } .l-pagetitle .text-area h1 + p > div { font-weight: inherit; } .interview .l-pagetitle .text-area h1 { font-size: 40px; color: #262626; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; line-height: 1.25; margin-top: 32px; } @media all and (max-width: 768px) { .interview .l-pagetitle .text-area h1 { margin-top: 24px; font-size: 6.4vw; } } .interview .l-pagetitle .text-area h1 + p { font-size: 24px; line-height: 1.5; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; margin-top: 24px; padding: 24px; position: relative; } @media all and (min-width: 769px) { .interview .l-pagetitle .text-area h1 + p { max-width: 600px; } } @media all and (max-width: 768px) { .interview .l-pagetitle .text-area h1 + p { margin-top: 16px; padding: 16px; font-size: 4.2666666667vw; } } .interview .l-pagetitle .text-area h1 + p::before, .interview .l-pagetitle .text-area h1 + p::after { content: ""; width: 32px; height: 96px; position: absolute; } @media all and (max-width: 768px) { .interview .l-pagetitle .text-area h1 + p::before, .interview .l-pagetitle .text-area h1 + p::after { width: 24px; height: 48px; } } .interview .l-pagetitle .text-area h1 + p::before { border-top: 1px solid #4060ff; border-left: 1px solid #4060ff; top: 0; left: 0; } .interview .l-pagetitle .text-area h1 + p::after { border-bottom: 1px solid #4060ff; border-right: 1px solid #4060ff; right: 0; bottom: 0; } .daresugugift .l-pagetitle .text-area h1 { font-size: 72px; display: flex; flex-direction: column; } @media all and (max-width: 768px) { .daresugugift .l-pagetitle .text-area h1 { font-size: 10.1333333333vw; } } .daresugugift .l-pagetitle .text-area h1 span { font-size: 32px; } @media all and (max-width: 768px) { .daresugugift .l-pagetitle .text-area h1 span { font-size: 4.2666666667vw; } } @media all and (max-width: 768px) { .l-pagetitle .text-area { align-self: flex-start; padding-left: 8.5333333333%; padding-right: 8.5333333333%; margin-bottom: 11.4285714286%; } .service .l-pagetitle .text-area { margin-bottom: 0; } } .l-pagetitle .text-area h3 { font-size: 24px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .l-pagetitle .text-area h3 div { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; will-change: transform; } .l-pagetitle .text-area h3 { color: #4060ff; } @media all and (max-width: 768px) { .l-pagetitle .text-area h3 { font-size: 4.2666666667vw; } } .l-pagetitle .text-area h3 span { position: relative; } .l-pagetitle .text-area h3 span:not(.-noborder)::after { will-change: transform; content: ""; height: 1px; width: 24px; background: #4060ff; position: absolute; top: 50%; right: -12px; transform-origin: 0 0; transform: translate(100%, -50%) scale(0, 1); -webkit-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; -moz-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; -ms-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; -o-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 1200ms; /* easeOutQuint */ } .l-pagetitle .text-area h3.appear span::after { transform: translate(100%, -50%) scale(1, 1); } .l-pagetitle .image-area { opacity: 0; -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 300ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 300ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 300ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 300ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 300ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .loaded .l-pagetitle .image-area { opacity: 1; } .partnership .l-pagetitle .image-area { position: absolute; width: 29.1666666667%; padding-top: 29.1666666667%; top: 50%; right: 6.0763888889%; transform: translate(0, -50%); } @media all and (max-width: 768px) { .partnership .l-pagetitle .image-area { position: static; width: 53.3333333333%; padding-top: 53.3333333333%; transform: translate(0, 0); margin: 32px auto 96px; } } .partnership .l-pagetitle .image-area::before { content: ""; background: #4060ff; width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; transform: translate(-50%, -50%) rotate(45deg); } .partnership .l-pagetitle .image-area .img { position: absolute; width: 119.0476190476%; padding-top: 95.2380952381%; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 0; opacity: 0; -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .loaded .partnership .l-pagetitle .image-area .img { opacity: 1; } .partnership .l-pagetitle .image-area .img { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .partnership .l-pagetitle .image-area .img { width: 82.9333333333vw; padding-top: 110%; } } .partnership .l-pagetitle .image-area .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 82%; } .interview .l-pagetitle .image-area { position: absolute; width: 29.1666666667%; padding-top: 29.1666666667%; top: 50%; right: 6.0763888889%; transform: translate(0, -50%); } @media all and (max-width: 768px) { .interview .l-pagetitle .image-area { position: static; width: 53.3333333333%; padding-top: 53.3333333333%; transform: translate(0, 0); margin: 32px auto 96px; } } .interview .l-pagetitle .image-area::before { content: ""; background: #4060ff; width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; transform: translate(-50%, -50%) rotate(45deg); } .interview .l-pagetitle .image-area .img { position: absolute; width: 119.0476190476%; padding-top: 89.2857142857%; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 0; opacity: 0; -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .loaded .interview .l-pagetitle .image-area .img { opacity: 1; } .interview .l-pagetitle .image-area .img { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .interview .l-pagetitle .image-area .img { width: 82.9333333333vw; padding-top: 110%; } } .interview .l-pagetitle .image-area .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .philosophy .l-pagetitle .image-area { position: absolute; width: 70.3125%; padding-top: 45.6597222222%; top: 50%; right: calc((100vw - 100%) / 2 * -1 - 11.2847222222%); transform: translate(0, -50%); } @media all and (max-width: 768px) { .philosophy .l-pagetitle .image-area { position: relative; right: 10.1333333333%; width: 129.8666666667%; padding-top: 76%; top: auto; transform: translate(0, 0); margin: 0 auto; } } .philosophy .l-pagetitle .image-area .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } @media all and (min-width: 769px) { .philosophy .l-pagetitle .image-area .img img { margin-top: 56px; } } @media all and (max-width: 768px) { .philosophy .l-pagetitle .image-area .img img { margin-top: -24px; } } .company .l-pagetitle .image-area { position: absolute; width: 29.1666666667%; padding-top: 29.1666666667%; top: 50%; right: 6.0763888889%; transform: translate(0, -50%); } @media all and (max-width: 768px) { .company .l-pagetitle .image-area { position: static; width: 53.3333333333%; padding-top: 53.3333333333%; transform: translate(0, 0); margin: 32px auto 96px; } } .company .l-pagetitle .image-area::before { content: ""; background: #4060ff; width: 100%; height: 100%; top: 50%; left: 50%; position: absolute; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; transform: translate(-50%, -50%) rotate(45deg); } .company .l-pagetitle .image-area .img { position: absolute; width: 38.0952380952%; padding-top: 38.0952380952%; background: #fff; top: 50%; left: 50%; line-height: 0; opacity: 0; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .company .l-pagetitle .image-area .img { width: 48%; padding-top: 48%; } } .company .l-pagetitle .image-area .img:nth-child(1) { transform: translate(-162.5%, -50%); -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 500ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (max-width: 768px) { .company .l-pagetitle .image-area .img:nth-child(1) { transform: translate(-158.3333333333%, -50%); } } .loaded .company .l-pagetitle .image-area .img:nth-child(1) { opacity: 1; } .company .l-pagetitle .image-area .img:nth-child(2) { transform: translate(-50%, -50%); -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 650ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 650ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 650ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 650ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 650ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .loaded .company .l-pagetitle .image-area .img:nth-child(2) { opacity: 1; } .company .l-pagetitle .image-area .img:nth-child(3) { transform: translate(62.5%, -50%); -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 800ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 800ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 800ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 800ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 800ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (max-width: 768px) { .company .l-pagetitle .image-area .img:nth-child(3) { transform: translate(58.3333333333%, -50%); } } .loaded .company .l-pagetitle .image-area .img:nth-child(3) { opacity: 1; } .company .l-pagetitle .image-area .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46.875%; } @media all and (max-width: 768px) { .company .l-pagetitle .image-area .img img { width: 50%; } } .service .l-pagetitle .image-area { position: absolute; width: 31.25%; padding-top: 31.25%; top: 50%; right: 3.4722222222%; transform: translate(0, -50%); } @media all and (max-width: 768px) { .service .l-pagetitle .image-area { position: relative; width: 68.5714285714%; padding-top: 68.5714285714%; top: auto; transform: translate(0, 0); margin: 0 auto; text-align: center; } } @media all and (max-width: 768px) { .service .l-pagetitle .image-area .img { margin-right: -24px; } } .service .l-pagetitle .image-area .img img { position: absolute; top: 50%; left: 50%; transform: translate(-40%, -40%); width: 100%; } .giftmall .l-pagetitle .image-area { position: absolute; width: 31.25%; padding-top: 31.25%; top: 50%; right: 3.4722222222%; transform: translate(0, -50%); } @media all and (max-width: 768px) { .giftmall .l-pagetitle .image-area { position: relative; right: -2.1333333333%; width: 58.6666666667%; padding-top: 53.3333333333%; top: auto; transform: translate(0, 0); margin: 0 auto; } } .giftmall .l-pagetitle .image-area .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .daresugugift .l-pagetitle .image-area { position: absolute; width: 27.7777777778%; padding-top: 43.75%; top: 50%; right: 6.9444444444%; transform: translate(0, -50%); } @media all and (max-width: 955px) { .daresugugift .l-pagetitle .image-area { top: 50%; } } @media all and (max-width: 768px) { .daresugugift .l-pagetitle .image-area { position: relative; right: -2.1333333333%; width: 68%; padding-top: 97.8666666667%; top: auto; transform: translate(0, 0); margin: -20% auto 0; } } .daresugugift .l-pagetitle .image-area::before { content: ""; background: #4060ff; width: 87.5%; height: 55.5555555556%; top: 50%; left: 50%; position: absolute; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; transform: translate(-50%, -50%) rotate(45deg); } @media all and (max-width: 768px) { .daresugugift .l-pagetitle .image-area::before { width: 70.5882352941%; height: 49.0463215259%; } } .daresugugift .l-pagetitle .image-area .img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } @media all and (max-width: 768px) { .daresugugift .l-pagetitle .image-area .img img { transform: translate(-50%, -50%) scale(0.75); } } .philosophy main { overflow: hidden; } .philosophy__purpose { padding-top: 80px; position: relative; } @media all and (min-width: 769px) { .philosophy__purpose { overflow: hidden; } } @media all and (max-width: 768px) { .philosophy__purpose { padding-top: 0; } } .philosophy__purpose .text-area { position: relative; } @media all and (min-width: 769px) { .philosophy__purpose .text-area { padding: 80px 0 160px 10.4166666667%; } } @media all and (max-width: 768px) { .philosophy__purpose .text-area { padding: 160px 32px; } } .philosophy__purpose .text-area:before { content: ""; width: 100vw; height: 100%; display: block; position: absolute; top: 0; left: 0; background: rgba(64, 96, 255, 0.05); transform: scaleX(0); transform-origin: right; -webkit-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; -moz-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; -o-transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; transition: all 680ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; /* easeInOutCubic */ } .philosophy__purpose .text-area.appear:before { transform: scaleX(1); } .philosophy__purpose .text-area h1 { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (min-width: 769px) { .philosophy__purpose .text-area h1 { font-size: 64px; } } @media all and (max-width: 768px) { .philosophy__purpose .text-area h1 { font-size: 32px; } } .philosophy__purpose .text-area h1 div { font: inherit; } .philosophy__purpose .text-area h1 span { display: block; color: #999999; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .philosophy__purpose .text-area h1 span { font-size: 18px; } } @media all and (max-width: 768px) { .philosophy__purpose .text-area h1 span { font-size: 14px; } } .philosophy__purpose .text-area .text__body { width: 100%; } @media all and (min-width: 769px) { .philosophy__purpose .text-area .text__body { display: flex; margin-top: 80px; } } @media all and (max-width: 768px) { .philosophy__purpose .text-area .text__body { margin-top: 48px; } } @media all and (min-width: 769px) { .philosophy__purpose .text-area .text__body .title { width: 39.9305555556%; } } @media all and (max-width: 768px) { .philosophy__purpose .text-area .text__body .title { margin-bottom: 48px; } .philosophy__purpose .text-area .text__body .title img { width: 49.2063492063%; } } .philosophy__purpose .text-area .text__body .title h2 { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .philosophy__purpose .text-area .text__body .title h2 { font-size: 28px; margin-top: 32px; } } @media all and (max-width: 768px) { .philosophy__purpose .text-area .text__body .title h2 { font-size: 4.8vw; margin-top: 16px; } } .philosophy__purpose .text-area .text__body .title h2 > div { font-weight: inherit; } .philosophy__purpose .text-area .text__body > p { line-height: 2; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .philosophy__purpose .text-area .text__body > p { width: 43.0555555556%; margin-left: 6.9444444444%; font-size: 18px; } } @media all and (max-width: 768px) { .philosophy__purpose .text-area .text__body > p { font-size: 4.2666666667vw; } } .philosophy__purpose .image-area { display: flex; } @media all and (min-width: 769px) { .philosophy__purpose .image-area .img { width: 55.5555555556%; } } @media all and (max-width: 768px) { .philosophy__purpose .image-area .img { width: 82.6666666667%; } } @media all and (min-width: 769px) { .philosophy__purpose .image-area .img:nth-child(1) { margin-top: -13.8888888889%; margin-left: -12.5%; } } @media all and (max-width: 768px) { .philosophy__purpose .image-area .img:nth-child(1) { position: absolute; top: 0; left: 0; transform: translateY(-50%); } } @media all and (min-width: 769px) { .philosophy__purpose .image-area .img:nth-child(2) { margin-top: 6.9444444444%; transform: translateX(17.3611111111%); } } @media all and (max-width: 768px) { .philosophy__purpose .image-area .img:nth-child(2) { position: absolute; bottom: 0; right: 0; transform: translateY(50%); } } .philosophy__purpose .image-area .img img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .philosophy__vision { padding: 0 0 160px; } @media all and (max-width: 768px) { .philosophy__vision { padding: 0 0 80px; width: 84%; margin: 0 auto; } } .philosophy__vision .title { display: flex; align-items: center; margin-bottom: 80px; } @media all and (max-width: 768px) { .philosophy__vision .title { margin-bottom: 40px; } } @media all and (min-width: 769px) { .philosophy__vision .title .icon { width: 11.1111111111%; margin-right: 40px; } } @media all and (max-width: 768px) { .philosophy__vision .title .icon { width: 21.3333333333%; margin-right: 24px; } } .philosophy__vision .title .icon img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .philosophy__vision .title h1 { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (min-width: 769px) { .philosophy__vision .title h1 { font-size: 80px; } } @media all and (max-width: 768px) { .philosophy__vision .title h1 { font-size: 10.6666666667vw; } } .philosophy__vision .title h1 div { font: inherit; } .philosophy__vision .title h1 span { display: block; color: #999999; margin: 4px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .philosophy__vision .title h1 span { font-size: 18px; } } @media all and (max-width: 768px) { .philosophy__vision .title h1 span { font-size: 3.7333333333vw; } } .philosophy__vision .vision__message { position: relative; } @media all and (min-width: 769px) { .philosophy__vision .vision__message { padding: 80px 13.8888888889%; } } @media all and (max-width: 768px) { .philosophy__vision .vision__message { padding: 64px 16px; } } .philosophy__vision .vision__message::before, .philosophy__vision .vision__message::after { content: ""; display: block; position: absolute; } @media all and (min-width: 769px) { .philosophy__vision .vision__message::before, .philosophy__vision .vision__message::after { width: 32px; height: 100%; top: 0; border-top: 1px solid #4060ff; border-bottom: 1px solid #4060ff; } } @media all and (max-width: 768px) { .philosophy__vision .vision__message::before, .philosophy__vision .vision__message::after { width: 100%; height: 16px; left: 0; border-right: 1px solid #4060ff; border-left: 1px solid #4060ff; } } @media all and (min-width: 769px) { .philosophy__vision .vision__message::before { left: 0; border-left: 1px solid #4060ff; } } @media all and (max-width: 768px) { .philosophy__vision .vision__message::before { top: 0; border-top: 1px solid #4060ff; } } @media all and (min-width: 769px) { .philosophy__vision .vision__message::after { right: 0; border-right: 1px solid #4060ff; } } @media all and (max-width: 768px) { .philosophy__vision .vision__message::after { bottom: 0; border-bottom: 1px solid #4060ff; } } .philosophy__vision .vision__message h2 { text-align: center; display: flex; flex-direction: column; margin-bottom: 32px; } @media all and (max-width: 768px) { .philosophy__vision .vision__message h2 { margin-bottom: 16px; } .philosophy__vision .vision__message h2 img { width: 90.7142857143%; margin: 0 auto; } } .philosophy__vision .vision__message p { font-size: 32px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; text-align: center; } @media all and (max-width: 768px) { .philosophy__vision .vision__message p { font-size: 3.7333333333vw; } } .philosophy__mission { padding: 0 0 160px; } @media all and (max-width: 768px) { .philosophy__mission { padding: 0 0 80px; width: 84%; margin: 0 auto; } } .philosophy__mission .title { display: flex; align-items: center; margin-bottom: 80px; } @media all and (max-width: 768px) { .philosophy__mission .title { margin-bottom: 40px; } } @media all and (min-width: 769px) { .philosophy__mission .title .icon { width: 11.1111111111%; margin-right: 40px; } } @media all and (max-width: 768px) { .philosophy__mission .title .icon { width: 21.3333333333%; margin-right: 24px; } } .philosophy__mission .title .icon img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .philosophy__mission .title h1 { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (min-width: 769px) { .philosophy__mission .title h1 { font-size: 80px; } } @media all and (max-width: 768px) { .philosophy__mission .title h1 { font-size: 10.6666666667vw; } } .philosophy__mission .title h1 div { font: inherit; } .philosophy__mission .title h1 span { display: block; color: #999999; margin: 4px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .philosophy__mission .title h1 span { font-size: 18px; } } @media all and (max-width: 768px) { .philosophy__mission .title h1 span { font-size: 3.7333333333vw; } } .philosophy__mission .mission__lists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; } @media all and (max-width: 768px) { .philosophy__mission .mission__lists { grid-template-columns: repeat(1, 1fr); gap: 40px; } } .philosophy__mission .mission__lists .mission__list { position: relative; border-bottom: 1px solid #4060ff; } @media all and (min-width: 769px) { .philosophy__mission .mission__lists .mission__list { padding-bottom: 48px; } } @media all and (max-width: 768px) { .philosophy__mission .mission__lists .mission__list { padding-bottom: 32px; } } @media all and (min-width: 769px) { .philosophy__mission .mission__lists .mission__list h3 { margin-bottom: 48px; } } @media all and (max-width: 768px) { .philosophy__mission .mission__lists .mission__list h3 { margin-bottom: 32px; } } .philosophy__mission .mission__lists .mission__list h2 { text-align: center; display: flex; align-items: center; flex-direction: column; } @media all and (min-width: 769px) { .philosophy__mission .mission__lists .mission__list h2 { margin-bottom: 48px; } } @media all and (max-width: 768px) { .philosophy__mission .mission__lists .mission__list h2 { margin-bottom: 32px; } } .philosophy__mission .mission__lists .mission__list h2 img { width: 76.1194029851%; } @media all and (max-width: 768px) { .philosophy__mission .mission__lists .mission__list h2 img { width: 80.6349206349%; } } .philosophy__mission .mission__lists .mission__list p { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; text-align: center; } @media all and (min-width: 769px) { .philosophy__mission .mission__lists .mission__list p { font-size: 32px; } } @media all and (max-width: 768px) { .philosophy__mission .mission__lists .mission__list p { font-size: 4.2666666667vw; } } .philosophy__value { padding: 0 0 160px; } @media all and (max-width: 768px) { .philosophy__value { padding: 0 0 80px; width: 84%; margin: 0 auto; } } .philosophy__value .title { display: flex; align-items: center; margin-bottom: 80px; } @media all and (max-width: 768px) { .philosophy__value .title { margin-bottom: 40px; } } @media all and (min-width: 769px) { .philosophy__value .title .icon { width: 11.1111111111%; margin-right: 40px; } } @media all and (max-width: 768px) { .philosophy__value .title .icon { width: 21.3333333333%; margin-right: 24px; } } .philosophy__value .title .icon img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .philosophy__value .title h1 { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (min-width: 769px) { .philosophy__value .title h1 { font-size: 80px; } } @media all and (max-width: 768px) { .philosophy__value .title h1 { font-size: 10.6666666667vw; } } .philosophy__value .title h1 div { font: inherit; } .philosophy__value .title h1 span { display: block; color: #999999; margin: 4px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .philosophy__value .title h1 span { font-size: 18px; } } @media all and (max-width: 768px) { .philosophy__value .title h1 span { font-size: 3.7333333333vw; } } .philosophy__value .image-area { margin-bottom: 80px; } @media all and (max-width: 768px) { .philosophy__value .image-area { margin-left: -10.1587301587%; margin-right: -10.1587301587%; margin-bottom: 40px; } } .philosophy__value .image-area img { width: 100%; } @media all and (min-width: 769px) { .philosophy__value .value__lists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; } } @media all and (min-width: 769px) and (max-width: 768px) { .philosophy__value .value__lists { display: block; } } .philosophy__value .value__lists .value__list { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; border-bottom: 1px solid #4060ff; } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list { padding-bottom: 16px; } .philosophy__value .value__lists .value__list:not(:last-child) { margin-bottom: 48px; } } .philosophy__value .value__lists .value__list h3 { display: inline-block; line-height: 1; border: 1px solid #4060ff; padding: 4px 8px; margin-bottom: 24px; } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list h3 { font-size: 18px; } } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list h3 { font-size: 3.7333333333vw; } } .philosophy__value .value__lists .value__list .title-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list .title-area h2 img { height: 5.3333333333vw; } .philosophy__value .value__lists .value__list .title-area h2 picture img { height: 12.8vw; } } .philosophy__value .value__lists .value__list .title-area p { align-items: center; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list .title-area p { font-size: 18px; margin-top: 16px; } } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list .title-area p { font-size: 3.7333333333vw; margin-top: 8px; } } .philosophy__value .value__lists .value__list > p { line-height: 2; } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list > p { font-size: 18px; } } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list > p { text-align: left; font-size: 3.7333333333vw; } } .philosophy__value .value__lists .value__list > p span { display: block; line-height: 1.5; margin-top: 8px; } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list > p span { font-size: 12px; } } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list > p span { font-size: 2.6666666667vw; } } .philosophy__value .value__lists .value__list > dl { text-align: left; line-height: 1.5; width: 100%; } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list > dl { display: flex; } } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list > dl { margin-top: 4px; } } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list > dl:first-of-type { margin-top: 8px; } } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list > dl:first-of-type { margin-top: 16px; } } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list > dl { font-size: 12px; } } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list > dl { font-size: 2.6666666667vw; } } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list > dl dt { flex: 0 0 13em; } } @media all and (min-width: 769px) { .philosophy__value .value__lists .value__list > dl dd { flex: 1; text-indent: -1em; padding-left: 1em; } .philosophy__value .value__lists .value__list > dl dd::before { content: "："; } } @media all and (max-width: 768px) { .philosophy__value .value__lists .value__list > dl dd { margin-left: 1em; } } .philosophy__tech { background: rgba(255, 255, 255, 0.5); margin-bottom: 160px; } @media all and (max-width: 768px) { .philosophy__tech { margin-bottom: 80px; padding: 80px 8.5333333333%; } } .philosophy__tech .image-area { margin-bottom: 160px; } @media all and (max-width: 768px) { .philosophy__tech .image-area { margin-bottom: 80px; margin-left: -10.1587301587%; margin-right: -10.1587301587%; } } .philosophy__tech .image-area .img img { width: 100%; } .philosophy__tech .text-area { text-align: center; } @media all and (min-width: 769px) { .philosophy__tech .text-area { width: 69.4444444444%; margin: 0 auto; } } .philosophy__tech .text-area .img { margin-bottom: 64px; } @media all and (max-width: 768px) { .philosophy__tech .text-area .img { width: 76.1904761905%; margin: 0 auto 32px; } .philosophy__tech .text-area .img img { width: 100%; } } .philosophy__tech .text-area h2 { font-size: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; margin-bottom: 24px; } @media all and (max-width: 768px) { .philosophy__tech .text-area h2 { font-size: 4.2666666667vw; } } .philosophy__tech .text-area p { line-height: 2; } @media all and (min-width: 769px) { .philosophy__tech .text-area p { font-size: 18px; } } @media all and (max-width: 768px) { .philosophy__tech .text-area p { font-size: 3.7333333333vw; } } .partnarship__about { padding-top: 80px; position: relative; } @media all and (max-width: 768px) { .partnarship__about { padding-top: 0; } } .partnarship__about .l-section__inner { display: flex; padding-top: 62px; padding-bottom: 62px; } @media all and (max-width: 768px) { .partnarship__about .l-section__inner { flex-direction: column; position: static; } } .partnarship__about .l-section__inner:first-child { padding-top: 0; } .partnarship__about .l-section__inner:first-child { padding-bottom: 0; } @media all and (min-width: 769px) { .partnarship__about .text-area { position: relative; top: 50%; width: 43.0555555556%; } } @media all and (max-width: 768px) { .partnarship__about .text-area { width: 84%; margin: 0 auto; padding-top: 21.3333333333%; padding-bottom: 13.3333333333%; } } .partnarship__about .text-area h2 { margin-top: 9.4827586207%; } @media all and (max-width: 768px) { .partnarship__about .text-area h2 { margin-top: 12.6984126984%; } } .partnarship__about .text-area .text__body > p { margin-top: 5.1724137931%; } @media all and (max-width: 768px) { .partnarship__about .text-area .text__body > p { margin-top: 7.9365079365%; } } .partnarship__about .text-area .text__body .buttons .p-button { clip-path: ellipse(60% 100% at -100% 50%); margin-top: 64px; width: 72.5806451613%; } @media all and (max-width: 768px) { .partnarship__about .text-area .text__body .buttons .p-button { margin-top: 32px; width: 100%; padding: 7.619047619% 0; } } .partnarship__about .text-area .text__body .buttons .p-button > p { font-size: 18px; padding-left: 12px; } @media all and (max-width: 768px) { .partnarship__about .text-area .text__body .buttons .p-button > p { font-size: 3.7333333333vw; } } .partnarship__about .text-area .text__body .buttons .p-button svg { width: 6.6666666667%; position: relative; padding-left: 11.1111111111%; } @media all and (min-width: 769px) { .partnarship__about .text-area .text__body .buttons .p-button:hover svg path, .partnarship__about .text-area .text__body .buttons .p-button:hover svg line { stroke: #fff; } } .partnarship__about .text-area .text__body.appear .buttons .p-button, .partnarship__about .text-area .text__body .appear .buttons .p-button { clip-path: ellipse(60% 100% at 50% 50%); } .partnarship__about .image-area { line-height: 0; margin-left: auto; opacity: 0; -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .partnarship__about .image-area .p-iframe img { height: auto; } .partnarship__about .image-area .p-iframe > :first-child { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (min-width: 769px) { .partnarship__about .image-area { position: relative; width: 50%; top: 40px; padding-top: 40px; } } @media all and (max-width: 768px) { .partnarship__about .image-area { position: relative; width: 100%; left: 50%; transform: translate(-50%, 0); } } .partnarship__about .image-area.appear { opacity: 1; } .partnarship__menu { padding: 80px 0 160px; } @media all and (max-width: 768px) { .partnarship__menu { width: 84%; margin: 0 auto; padding-bottom: 13.3333333333%; } } .partnarship__menu ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media all and (max-width: 768px) { .partnarship__menu ul { grid-template-columns: repeat(2, 50%); gap: 10px; } } .partnarship__menu ul li { background: #fff; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .partnarship__menu ul li a { display: block; padding: 24px; position: relative; height: 100%; } @media all and (max-width: 768px) { .partnarship__menu ul li a { padding: 12px; } } .partnarship__menu ul li a .label { font-size: 16px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; display: flex; align-items: center; position: absolute; top: 16px; left: 16px; } @media all and (max-width: 768px) { .partnarship__menu ul li a .label { font-size: 3.2vw; } } .partnarship__menu ul li a .label::after { content: ""; display: block; width: 16px; height: 1px; background: #4060ff; margin-left: 8px; } .partnarship__menu ul li a .icon { width: 128px; height: 128px; margin: 16px auto; -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ background: #f5f7ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media all and (max-width: 768px) { .partnarship__menu ul li a .icon { width: 64px; height: 64px; margin-top: 32px; } } .partnarship__menu ul li a .icon img { width: 72px; } @media all and (max-width: 768px) { .partnarship__menu ul li a .icon img { width: 36px; } } .partnarship__menu ul li a p { font-size: 16px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .partnarship__menu ul li a p { padding-right: 62px; } } @media all and (max-width: 768px) { .partnarship__menu ul li a p { font-size: 2.9333333333vw; } } .partnarship__menu ul li a p.en { font-size: 40px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu ul li a p.en { font-size: 5.3333333333vw; margin-bottom: 4px; } } .partnarship__menu ul li a .arrow { width: 48px; position: absolute; right: 24px; bottom: 24px; } @media all and (max-width: 768px) { .partnarship__menu ul li a .arrow { width: 24px; right: 12px; bottom: 12px; } } .partnarship__menu ul li a .arrow img { width: 100%; } .partnarship__menu ul li a:hover .icon { transform: scale(1.1); } @media all and (max-width: 768px) { .partnarship__menu01 { padding-top: 80px; padding-bottom: 0; overflow: hidden; } } .partnarship__menu01 .l-section__inner { padding-top: 62px; padding-bottom: 62px; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner { padding-top: 0; padding-bottom: 0; } } .partnarship__menu01 .l-section__inner:first-child { padding-top: 0; } .partnarship__menu01 .l-section__inner:first-child { padding-bottom: 0; } .partnarship__menu01 .l-section__inner .text-area { position: relative; top: 50%; width: 43.0555555556%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner .text-area { width: 84%; margin: 0 auto; padding-bottom: 8.5333333333%; } } .partnarship__menu01 .l-section__inner .text-area h2 { margin-top: 1.6129032258%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner .text-area h2 { margin-top: 2.5396825397%; } } .partnarship__menu01 .l-section__inner .text-area .text__body > p { margin-top: 6.0483870968%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner .text-area .text__body > p { margin-top: 7.9365079365%; } } @media all and (min-width: 769px) { .partnarship__menu01 .l-section__inner .image-area { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); -webkit-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; -moz-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; -ms-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; -o-transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; transition: all 680ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner .image-area { padding-bottom: 42.6666666667%; width: 100%; position: static; } } .partnarship__menu01 .l-section__inner .image-area.appear { opacity: 1; } .partnarship__menu01 .l-section__inner:nth-child(even) .text-area { margin-left: auto; } .partnarship__menu01 .l-section__inner:nth-child(even) .image-area { right: auto; left: 0; } .partnarship__menu01 .l-section__inner#menu01-header { padding-bottom: 98px; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#menu01-header { padding-bottom: 24px; } } .partnarship__menu01 .l-section__inner#menu01-header .text-area { width: 55.5555555556%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#menu01-header .text-area { width: 84%; } } .partnarship__menu01 .l-section__inner#menu01-header .text-area h1 { margin-top: 10%; font-size: 96px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#menu01-header .text-area h1 { font-size: 12.8vw; } } .partnarship__menu01 .l-section__inner#menu01-header .text-area h1 > div { font-weight: inherit; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .partnarship__menu01 .l-section__inner#menu01-header .text-area h2 { margin-top: 1.25%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#menu01-header .text-area h2 { font-size: 5.3333333333vw; } } .partnarship__menu01 .l-section__inner#menu01-header .text-area .text__body > p { margin-top: 10%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#menu01-header .text-area .text__body > p { margin-top: 15.2380952381%; } } @media all and (min-width: 769px) { .partnarship__menu01 .l-section__inner#menu01-header .image-area { width: 43.75%; margin-right: -3.4722222222%; padding-top: 11.9047619048%; } } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#menu01-header .image-area { width: 84%; margin: 0 auto; padding-bottom: 0; } } .partnarship__menu01 .l-section__inner#menu01-header .image-area img { width: 100%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#menu01-header .image-area img { width: 110%; } } .partnarship__menu01 .l-section__inner#reason01 { padding-top: 172px; padding-bottom: 105px; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason01 { padding-top: 0; padding-bottom: 0; } } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason01 .text-area { padding-top: 0; } } .partnarship__menu01 .l-section__inner#reason01 .text-area::before { content: ""; display: block; width: 96px; height: 1px; background: #4060ff; position: absolute; left: -128px; top: 50%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason01 .text-area::before { width: 1px; height: 48px; left: 50%; top: auto; bottom: -40px; } } .partnarship__menu01 .l-section__inner#reason01 .image-area { width: 53.8194444444%; padding-top: 14.9305555556%; margin-left: -0.8680555556%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason01 .image-area { width: 100%; margin: 0 auto; padding-top: 8.5333333333%; padding-bottom: 0; } } .partnarship__menu01 .l-section__inner#reason01 .image-area img { width: 100%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason01 .image-area img { margin-left: 5.3333333333%; } } .partnarship__menu01 .l-section__inner#reason02 { padding-top: 105px; padding-bottom: 105px; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason02 { padding-top: 0; padding-bottom: 0; } } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason02 .text-area { padding-top: 0; } } .partnarship__menu01 .l-section__inner#reason02 .text-area::before { content: ""; display: block; background: #4060ff; position: absolute; } @media all and (min-width: 769px) { .partnarship__menu01 .l-section__inner#reason02 .text-area::before { right: -128px; top: 50%; width: 96px; height: 1px; } } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason02 .text-area::before { width: 1px; height: 48px; left: 50%; top: auto; bottom: -40px; } } .partnarship__menu01 .l-section__inner#reason02 .image-area { width: 55.9895833333%; padding-top: 9.1145833333%; margin-right: -3.4722222222%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason02 .image-area { width: 100%; margin: 0 auto; padding-top: 14.9333333333%; padding-bottom: 32px; } } .partnarship__menu01 .l-section__inner#reason02 .image-area img { width: 100%; } .partnarship__menu01 .l-section__inner#reason03 { padding-top: 105px; padding-bottom: 105px; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason03 { padding-top: 0; padding-bottom: 80px; } } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason03 .text-area { padding-top: 0; } } .partnarship__menu01 .l-section__inner#reason03 .text-area::before { content: ""; display: block; width: 96px; height: 1px; background: #4060ff; position: absolute; left: -128px; top: 50%; z-index: 1; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason03 .text-area::before { width: 1px; height: 48px; left: 50%; top: auto; bottom: -40px; } } .partnarship__menu01 .l-section__inner#reason03 .image-area { width: 46.5277777778%; padding-top: 4.3402777778%; margin-left: 3.4722222222%; } @media all and (max-width: 768px) { .partnarship__menu01 .l-section__inner#reason03 .image-area { width: 84%; margin: 0 auto; padding-top: 17.0666666667%; padding-bottom: 0; } } .partnarship__menu01 .l-section__inner#reason03 .image-area img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .partnarship__menu02 { background: rgba(255, 255, 255, 0.5); } @media all and (max-width: 768px) { .partnarship__menu02 { padding-top: 80px; padding-bottom: 80px; } } .partnarship__menu02 .l-section__inner { padding-top: 62px; padding-bottom: 62px; } @media all and (max-width: 768px) { .partnarship__menu02 .l-section__inner { padding-top: 0; padding-bottom: 0; width: 84%; } } .partnarship__menu02 .l-section__inner:first-child { padding-top: 0; } .partnarship__menu02 .l-section__inner:first-child { padding-bottom: 0; } .partnarship__menu02 .l-section__inner#menu02-header { padding-bottom: 98px; } .partnarship__menu02 .l-section__inner#menu02-header .text-area h1 { margin-top: 64px; font-size: 96px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu02 .l-section__inner#menu02-header .text-area h1 { font-size: 12.8vw; } } .partnarship__menu02 .l-section__inner#menu02-header .text-area h1 > div { font-weight: inherit; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .partnarship__menu02 .l-section__inner#menu02-header .text-area h2 { font-size: 32px; margin-top: 16px; } @media all and (max-width: 768px) { .partnarship__menu02 .l-section__inner#menu02-header .text-area h2 { font-size: 5.3333333333vw; } } .partnarship__menu02 .featurelist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; } @media all and (max-width: 768px) { .partnarship__menu02 .featurelist { grid-template-columns: repeat(1, 1fr); gap: 48px; } } .partnarship__menu02 .featurelist li { padding-bottom: 32px; border-bottom: 1px solid #4060ff; } @media all and (max-width: 768px) { .partnarship__menu02 .featurelist li { padding-bottom: 16px; } } .partnarship__menu02 .featurelist li .featuretitle { margin-bottom: 32px; display: flex; align-items: center; } @media all and (max-width: 768px) { .partnarship__menu02 .featurelist li .featuretitle { margin-bottom: 16px; } } .partnarship__menu02 .featurelist li .featuretitle .icon { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .partnarship__menu02 .featurelist li .featuretitle .icon { width: 64px; } .partnarship__menu02 .featurelist li .featuretitle .icon img { width: 100%; height: auto; } } .partnarship__menu02 .featurelist li .featuretitle h3 { font-size: 28px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; margin-left: 32px; } @media all and (max-width: 768px) { .partnarship__menu02 .featurelist li .featuretitle h3 { font-size: 4.2666666667vw; margin-left: 16px; } } .partnarship__menu02 .featurelist li .featuretitle h3 span { font-size: 16px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; display: block; margin-bottom: 8px; } @media all and (max-width: 768px) { .partnarship__menu02 .featurelist li .featuretitle h3 span { font-size: 3.2vw; } } .partnarship__menu02 .featurelist li p { line-height: 2; } @media all and (max-width: 768px) { .partnarship__menu02 .featurelist li p { font-size: 3.7333333333vw; } } @media all and (max-width: 768px) { .partnarship__menu03 { padding-top: 80px; padding-bottom: 80px; overflow: hidden; } } .partnarship__menu03 .l-section__inner { padding-top: 62px; padding-bottom: 62px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner { padding-top: 0; padding-bottom: 0; width: 84%; } } .partnarship__menu03 .l-section__inner:first-child { padding-top: 0; } .partnarship__menu03 .l-section__inner:first-child { padding-bottom: 0; } .partnarship__menu03 .l-section__inner#menu03-header { display: flex; align-items: flex-end; padding-bottom: 98px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner#menu03-header { flex-direction: column; align-items: flex-start; } } .partnarship__menu03 .l-section__inner#menu03-header .text-area h1 { margin-top: 64px; font-size: 96px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner#menu03-header .text-area h1 { font-size: 12.8vw; } } .partnarship__menu03 .l-section__inner#menu03-header .text-area h1 > div { font-weight: inherit; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .partnarship__menu03 .l-section__inner#menu03-header .text-area h2 { font-size: 32px; margin-top: 16px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner#menu03-header .text-area h2 { font-size: 5.3333333333vw; } } .partnarship__menu03 .l-section__inner#menu03-header .text-area + p { line-height: 2; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner#menu03-header .text-area + p { padding-left: 8.3333333333%; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner#menu03-header .text-area + p { margin-top: 15.2380952381%; } } .partnarship__menu03 .l-section__inner .flow { margin-bottom: 80px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow { position: relative; padding-left: 32px; margin-bottom: 48px; } } .partnarship__menu03 .l-section__inner .flow > p { display: flex; align-items: center; color: #4060ff; font-size: 16px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; position: relative; margin-bottom: 16px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow > p { font-size: 12px; writing-mode: vertical-rl; position: absolute; left: -12px; top: 0; bottom: 0; } } .partnarship__menu03 .l-section__inner .flow > p span { padding: 0 32px; display: inline-flex; align-items: baseline; padding-bottom: 16px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow > p span { padding: 16px 0; align-items: center; } } .partnarship__menu03 .l-section__inner .flow > p span::after { content: ""; display: block; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow > p span::after { width: 48px; height: 16px; background: url('data:image/svg+xml,') no-repeat; background-size: 48px 16px; position: absolute; right: -2px; top: 16px; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow > p span::after { width: 24px; height: 8px; background: url('data:image/svg+xml,') no-repeat; background-size: 24px 8px; position: absolute; right: -3.5px; bottom: 0; transform: rotate(90deg); } } .partnarship__menu03 .l-section__inner .flow > p b { font-size: 32px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow > p b { font-size: 20px; writing-mode: horizontal-tb; } } .partnarship__menu03 .l-section__inner .flow > p::before, .partnarship__menu03 .l-section__inner .flow > p::after { content: ""; flex: 1; height: 1px; background: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow > p::before, .partnarship__menu03 .l-section__inner .flow > p::after { width: 1px; height: auto; } } .partnarship__menu03 .l-section__inner .flow ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow ul { grid-template-columns: repeat(1, 1fr); } } .partnarship__menu03 .l-section__inner .flow ul li:last-child .icon__inner::after { display: none; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow ul li { display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto 1fr; gap: 4px 16px; position: relative; } .partnarship__menu03 .l-section__inner .flow ul li > p { font-size: 3.7333333333vw; } .partnarship__menu03 .l-section__inner .flow ul li:not(:last-child)::after { content: ""; display: block; width: 16px; height: 32px; background: url('data:image/svg+xml,') no-repeat; position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%) rotate(90deg); } } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow ul li .icon { width: 100%; background: #fff; border-radius: 50%; margin-bottom: 32px; position: relative; } .partnarship__menu03 .l-section__inner .flow ul li .icon::before { content: ""; float: left; padding-top: 100%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio="1:1"]::before { padding-top: 100%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio="4:3"]::before { padding-top: 75%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio="3:2"]::before { padding-top: 66.6666666667%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio="16:9"]::before { padding-top: 56.25%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio="2:1"]::before { padding-top: 50%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio="3:4"]::before { padding-top: 133.3333333333%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio="2:3"]::before { padding-top: 150%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio=golden]::before { padding-top: 61.804697157%; } .partnarship__menu03 .l-section__inner .flow ul li .icon[data-ratio=silver]::before { padding-top: 70.7213578501%; } .partnarship__menu03 .l-section__inner .flow ul li .icon::after { content: ""; display: table; clear: both; } .partnarship__menu03 .l-section__inner .flow ul li .icon > :first-child { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .partnarship__menu03 .l-section__inner .flow ul li .icon { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow ul li .icon { display: contents; } } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow ul li .icon__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .partnarship__menu03 .l-section__inner .flow ul li .icon__inner::after { content: ""; display: block; width: 16px; height: 32px; background: url('data:image/svg+xml,') no-repeat; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow ul li .icon__inner { display: contents; } } .partnarship__menu03 .l-section__inner .flow ul li .icon__inner > p { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow ul li .icon__inner > p { font-size: 24px; height: 3em; text-align: center; display: flex; align-items: center; margin-top: 8px; line-height: 1.25; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow ul li .icon__inner > p { font-size: 4.2666666667vw; grid-column-start: 2; grid-row-start: 1; align-self: flex-end; } } .partnarship__menu03 .l-section__inner .flow ul li .sm-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow ul li .sm-icon { grid-column-start: 1; grid-row-start: span 2; width: 80px; height: 80px; background: #fff; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .partnarship__menu03 .l-section__inner .flow ul li .sm-icon img { width: 32px; } } .partnarship__menu03 .l-section__inner .flow ul li .sm-icon > p { font-size: 24px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow ul li .sm-icon > p { font-size: 16px; } } .partnarship__menu03 .l-section__inner .flow ul li > p { line-height: 2; } .partnarship__menu03 .l-section__inner .flow ul li > p span { font-size: 14px; line-height: 1.5; } .partnarship__menu03 .l-section__inner .flow-detail { margin-bottom: 80px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail { margin-bottom: 15.2380952381%; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion { border: 1px solid #4060ff; background: #f5f7ff; font-size: 20px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; padding: 20px 24px; position: relative; display: inline-flex; align-items: center; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion { font-size: 3.7333333333vw; padding: 20px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 12px; background: url('data:image/svg+xml,') no-repeat; -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion::before { width: 14px; height: 14px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion::after { content: ""; display: block; width: 18px; height: 10px; position: absolute; top: 50%; right: 32px; background: url('data:image/svg+xml,') no-repeat; transform: translate(0, -50%) rotate(180deg); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion::after { right: 20px; width: 14px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion.-open::after { transform: translate(0, -50%) rotate(0deg); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents { width: calc(100% + 80px); margin-left: -40px; padding: 0 40px; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents { width: 120.3174603175%; padding: 0 10.1587301587%; margin-left: -10.1587301587%; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents[style="display: block;"] > ul > li .flow-detail__block { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; transition: box-shadow 0.6s; } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul { padding-top: 80px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul { padding-top: 48px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .flow-detail__block { background: #fff; transition: box-shadow 0.1s; box-shadow: rgba(0, 0, 0, 0) 0 0 0; margin-bottom: 72px; padding: 64px; display: flex; flex-wrap: wrap; position: relative; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .flow-detail__block { padding: 32px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li:not(:last-child) .flow-detail__block::after { content: ""; display: block; width: 16px; height: 32px; background: url('data:image/svg+xml,') no-repeat; position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%) rotate(90deg); } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .campaign { width: 100%; background: #4060ff; color: #fff; } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .campaign dl { display: flex; font-size: 20px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .campaign dl { font-size: 4.2666666667vw; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .campaign dl dt { background: #404040; padding: 16px 32px; flex-shrink: 0; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .campaign dl dt { padding: 16px; display: flex; align-items: center; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .campaign dl dd { padding: 16px 32px; } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area { flex: 0 0 320px; margin-right: 64px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area { flex: 0 0 100%; display: flex; flex-direction: row-reverse; align-items: center; margin-bottom: 32px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area:only-child { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 0; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area:only-child { margin-bottom: 0; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area h3 { font-size: 32px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area h3 { margin-bottom: 32px; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area h3 { font-size: 5.3333333333vw; margin-left: 24px; margin-right: auto; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area h3 .label { font-size: 24px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area h3 .label { font-size: 4.2666666667vw; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .icon { -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ background: #f5f7ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .icon { width: 128px; height: 128px; margin: 16px auto; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .icon { width: 96px; height: 96px; flex-shrink: 0; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .icon img { width: 72px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .icon img { width: 48px; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .icon.shopopen { margin: 0; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .icon.shopopen img { width: 120px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .icon.shopopen img { width: 80px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .shopopen { font-size: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; margin-top: 16px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .title-area .shopopen { font-size: 4.2666666667vw; text-align: center; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area { flex: 1; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area { border-left: 1px solid #4060ff; padding-left: 64px; } } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area { border-top: 1px solid #4060ff; padding-top: 32px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area > p { line-height: 2; margin-bottom: 32px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area > p { font-size: 3.7333333333vw; margin-bottom: 24px; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .important { display: inline-block; color: #db305e; font-size: 20px; border-bottom: 2px solid #db305e; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .important { font-size: 4.2666666667vw; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .period { border: 1px solid #4060ff; color: #4060ff; display: inline-flex; align-items: center; padding: 0 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .period { font-size: 3.7333333333vw; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .p-button { margin-top: 64px; width: 62.5%; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .p-button { margin-top: 32px; width: 100%; padding: 7.619047619% 0; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .p-button > p { font-size: 18px; padding-left: 12px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .p-button > p { font-size: 3.7333333333vw; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .p-button svg { width: 6.6666666667%; position: relative; padding-left: 11.1111111111%; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .p-button:hover svg path, .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .p-button:hover svg line { stroke: #fff; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .box { border: 1px solid #db305e; padding: 16px 24px; } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .box p { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; line-height: 2; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .box p { font-size: 3.7333333333vw; } } .partnarship__menu03 .l-section__inner .flow-detail .p-accordion-contents > ul > li .text-area .box p strong { color: #db305e; } .partnarship__menu03 .l-section__inner .buttons { border-top: 1px solid #4060ff; padding-top: 32px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .buttons { margin-top: 7.619047619%; } } .partnarship__menu03 .l-section__inner .buttons .p-button { width: 31.25%; margin: 0 auto; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .buttons .p-button { width: 82.5396825397%; padding: 6.3492063492% 0; } } .partnarship__menu03 .l-section__inner .buttons .p-button > p { font-size: 18px; padding-left: 12px; } @media all and (max-width: 768px) { .partnarship__menu03 .l-section__inner .buttons .p-button > p { font-size: 3.7333333333vw; } } .partnarship__menu03 .l-section__inner .buttons .p-button svg { width: 6.6666666667%; position: relative; padding-left: 11.1111111111%; } @media all and (min-width: 769px) { .partnarship__menu03 .l-section__inner .buttons .p-button:hover svg path, .partnarship__menu03 .l-section__inner .buttons .p-button:hover svg line { stroke: #fff; } } .partnarship__menu04 { background: rgba(255, 255, 255, 0.5); } @media all and (max-width: 768px) { .partnarship__menu04 { padding-top: 80px; padding-bottom: 190px; position: relative; } .partnarship__menu04::before { content: ""; display: block; width: 100%; position: absolute; bottom: 158px; border-top: 1px solid #4060ff; } } .partnarship__menu04 .l-section__inner { padding-top: 62px; padding-bottom: 62px; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner { padding-top: 0; padding-bottom: 0; width: 84%; position: static; } } .partnarship__menu04 .l-section__inner:first-child { padding-top: 0; } .partnarship__menu04 .l-section__inner:first-child { padding-bottom: 0; } .partnarship__menu04 .l-section__inner .faqwrap { display: flex; flex-direction: row-reverse; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap { flex-direction: column; } } @media all and (min-width: 769px) { .partnarship__menu04 .l-section__inner .faqwrap .text-area { width: 29.1666666667%; } } .partnarship__menu04 .l-section__inner .faqwrap .text-area h1 { margin-top: 64px; font-size: 96px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .text-area h1 { font-size: 12.8vw; } } .partnarship__menu04 .l-section__inner .faqwrap .text-area h1 > div { font-weight: inherit; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .partnarship__menu04 .l-section__inner .faqwrap .text-area h2 { font-size: 32px; margin-top: 16px; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .text-area h2 { font-size: 5.3333333333vw; } .partnarship__menu04 .l-section__inner .faqwrap .text-area h2 br { display: none; } } .partnarship__menu04 .l-section__inner .faqwrap .text-area .buttons .p-button { margin-top: 64px; width: 51.7857142857%; padding: 17px 0 16px; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .text-area .buttons .p-button { margin-top: 17.1428571429%; width: 140px; padding: 3.8095238095% 0; position: absolute; bottom: 80px; } } @media all and (min-width: 769px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area { width: 63.8888888889%; } } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area { margin-top: 80px; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area { margin-right: auto; } .partnarship__menu04 .l-section__inner .faqwrap .faq-area > .p-button.-open { display: none; } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq { background: #fff; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; border-left: 1px solid #4060ff; margin-bottom: 24px; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq { position: relative; z-index: 1; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion { display: flex; min-height: 126px; } @media all and (min-width: 769px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion { position: relative; z-index: 1; } } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion { flex-direction: column; padding-bottom: 32px; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion::before { content: ""; display: block; background: #f5f7ff; width: 124px; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion::before { display: none; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion::after { content: ""; display: block; width: 18px; height: 10px; position: absolute; background: url('data:image/svg+xml,') no-repeat; -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (min-width: 769px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion::after { top: 50%; right: 32px; transform: translate(0, -50%) rotate(180deg); } } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion::after { right: 50%; bottom: 16px; transform: translate(50%, 0) rotate(180deg); } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion.-open::after { transform: translate(0, -50%) rotate(0deg); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion.-open::after { transform: translate(50%, 0) rotate(0deg); } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion .label { flex: 0 0 124px; align-self: flex-start; padding: 16px 24px; font-size: 16px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion .label { background: #f5f7ff; display: flex; align-items: center; padding: 8px 16px; flex: 0 0 100%; width: 100%; font-size: 3.2vw; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion .label span { display: block; font-size: 40px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion .label span { font-size: 6.4vw; margin-left: 8px; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion p { line-height: 2; padding: 16px 54px; display: flex; align-items: center; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion p { padding: 16px 24px; font-size: 3.7333333333vw; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion-contents { padding: 24px; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion-contents { padding-top: 0; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion-contents dl dt { font-size: 16px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; background: #f7f7f7; padding: 8px 12px; margin-bottom: 16px; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion-contents dl dt { font-size: 3.2vw; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion-contents dl dd { line-height: 2; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .faq .p-accordion-contents dl dd { font-size: 3.7333333333vw; } } .partnarship__menu04 .l-section__inner .faqwrap .faq-area .p-button { margin-top: 64px; width: 23.9130434783%; padding: 17px 0 16px; } @media all and (max-width: 768px) { .partnarship__menu04 .l-section__inner .faqwrap .faq-area .p-button { margin-top: 17.1428571429%; width: 140px; padding: 3.8095238095% 0; } } @media all and (max-width: 768px) { .partnarship__menu05 { padding-top: 0; } } @media all and (max-width: 768px) and (max-width: 768px) { .partnarship__menu05 { padding-top: 80px; padding-bottom: 80px; } } .partnarship__menu05 .l-section__inner { padding-top: 62px; padding-bottom: 62px; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner { padding-top: 0; padding-bottom: 0; width: 84%; } } .partnarship__menu05 .l-section__inner:first-child { padding-top: 0; } .partnarship__menu05 .l-section__inner:first-child { padding-bottom: 0; } .partnarship__menu05 .l-section__inner#menu05-header { padding-bottom: 98px; } .partnarship__menu05 .l-section__inner#menu05-header .text-area h1 { margin-top: 64px; font-size: 96px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner#menu05-header .text-area h1 { font-size: 12.8vw; } } .partnarship__menu05 .l-section__inner#menu05-header .text-area h1 > div { font-weight: inherit; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .partnarship__menu05 .l-section__inner#menu05-header .text-area h2 { font-size: 32px; margin-top: 16px; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner#menu05-header .text-area h2 { font-size: 5.3333333333vw; } } .partnarship__menu05 .l-section__inner .interview-list { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -30px; margin-right: -30px; } .partnarship__menu05 .l-section__inner .interview-list .interview-item { flex: 0 0 33.3333%; padding: 0 30px; margin-bottom: 80px; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item { flex: 0 0 100%; } .partnarship__menu05 .l-section__inner .interview-list .interview-item:not(:last-child) { margin-bottom: 48px; } .partnarship__menu05 .l-section__inner .interview-list .interview-item:last-child { margin-bottom: 0; } } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card { border-bottom: 1px solid #4060ff; padding-bottom: 24px; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item .card { padding-bottom: 32px; display: grid; grid-template-columns: 147px 1fr; grid-template-rows: minmax(55px, auto) minmax(55px, auto) 1fr 40px; grid-auto-columns: 1fr; gap: 0px 0px; grid-auto-flow: column; grid-template-areas: "image label" "image store-name" "text text" "button button"; } } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > img { width: 100%; display: block; margin-bottom: 24px; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > img { grid-area: image; order: 1; margin-bottom: 0; } } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p { display: flex; align-items: center; font-size: 20px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; padding: 12px 24px; margin-bottom: 24px; position: relative; } @media all and (min-width: 769px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p { min-height: 150px; } } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p { order: 4; grid-area: text; margin-bottom: 0; font-size: 3.7333333333vw; margin-top: 16px; padding: 16px; } } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p::before, .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p::after { content: ""; width: 32px; height: 96px; position: absolute; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p::before, .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p::after { width: 24px; height: 48px; } } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p::before { border-top: 1px solid #4060ff; border-left: 1px solid #4060ff; top: 0; left: 0; } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card > p::after { border-bottom: 1px solid #4060ff; border-right: 1px solid #4060ff; right: 0; bottom: 0; } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card .label { font-size: 16px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item .card .label { order: 2; grid-area: label; display: flex; align-items: flex-end; padding-left: 16px; padding-bottom: 8px; font-size: 3.2vw; } } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card h3 { font-size: 24px; color: #262626; margin-top: 8px; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item .card h3 { order: 3; grid-area: store-name; display: flex; align-items: flex-start; margin-top: 0; padding-left: 16px; font-size: 4.2666666667vw; } } .partnarship__menu05 .l-section__inner .interview-list .interview-item .card .p-button { margin-top: 48px; width: 53.7790697674%; padding: 17px 0 16px; } @media all and (max-width: 768px) { .partnarship__menu05 .l-section__inner .interview-list .interview-item .card .p-button { order: 5; margin-top: 17.1428571429%; width: 50.1587301587%; padding: 5.7142857143% 0; grid-area: button; margin-top: 16px; } } .partnarship__menu05 .buttons .p-button { width: 31.25%; margin: 0 auto; } @media all and (max-width: 768px) { .partnarship__menu05 .buttons .p-button { margin-top: 15.2380952381%; width: 83.4920634921%; padding: 6.3492063492% 0; } } .partnarship__menu05 .buttons .p-button > p { font-size: 18px; padding-left: 12px; } @media all and (max-width: 768px) { .partnarship__menu05 .buttons .p-button > p { font-size: 3.7333333333vw; } } .partnarship__menu05 .buttons .p-button svg { width: 6.6666666667%; position: relative; padding-left: 11.1111111111%; } @media all and (min-width: 769px) { .partnarship__menu05 .buttons .p-button:hover svg path, .partnarship__menu05 .buttons .p-button:hover svg line { stroke: #fff; } } .partnarship__menu06 { background: rgba(255, 255, 255, 0.5); } @media all and (max-width: 768px) { .partnarship__menu06 { padding-top: 80px; padding-bottom: 80px; } } .partnarship__menu06 .l-section__inner { padding-top: 62px; padding-bottom: 62px; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner { padding-top: 0; padding-bottom: 0; width: 84%; } } .partnarship__menu06 .l-section__inner:first-child { padding-top: 0; } .partnarship__menu06 .l-section__inner:first-child { padding-bottom: 0; } .partnarship__menu06 .l-section__inner#menu06-header { display: flex; align-items: flex-end; padding-bottom: 98px; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner#menu06-header { flex-direction: column; align-items: flex-start; } } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner#menu06-header .text-area { flex: 0 0 100%; } } .partnarship__menu06 .l-section__inner#menu06-header .text-area h1 { margin-top: 64px; font-size: 96px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner#menu06-header .text-area h1 { font-size: 12.8vw; } } .partnarship__menu06 .l-section__inner#menu06-header .text-area h1 > div { font-weight: inherit; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .partnarship__menu06 .l-section__inner#menu06-header .text-area h2 { font-size: 32px; margin-top: 16px; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner#menu06-header .text-area h2 { font-size: 5.3333333333vw; } } .partnarship__menu06 .l-section__inner#menu06-header .text-area + p { line-height: 2; margin-left: auto; } @media all and (min-width: 769px) { .partnarship__menu06 .l-section__inner#menu06-header .text-area + p { width: 50%; padding-left: 8.3333333333%; } } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner#menu06-header .text-area + p { flex: 0 0 100%; margin-top: 48px; } } .partnarship__menu06 .l-section__inner .card-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner .card-list { grid-template-columns: repeat(1, 1fr); gap: 0px; } } .partnarship__menu06 .l-section__inner .card-list .card { border-bottom: 1px solid #4060ff; padding-bottom: 32px; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner .card-list .card { padding-bottom: 32px; display: grid; grid-template-columns: 147px 1fr; grid-template-rows: auto auto 1fr 40px; grid-auto-columns: 1fr; gap: 0px 0px; grid-auto-flow: column; grid-template-areas: "image label" "image store-name" "text text" "button button"; } .partnarship__menu06 .l-section__inner .card-list .card:not(:last-child) { margin-bottom: 48px; } .partnarship__menu06 .l-section__inner .card-list .card:last-child { margin-bottom: 0; } } .partnarship__menu06 .l-section__inner .card-list .card > img { width: 100%; display: block; margin-bottom: 24px; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner .card-list .card > img { grid-area: image; order: 1; margin-bottom: 0; } } .partnarship__menu06 .l-section__inner .card-list .card .label { font-size: 16px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner .card-list .card .label { order: 2; grid-area: label; display: flex; align-items: flex-end; padding-left: 16px; padding-bottom: 8px; font-size: 3.2vw; } } .partnarship__menu06 .l-section__inner .card-list .card h3 { font-size: 24px; color: #262626; margin-top: 8px; margin-bottom: 48px; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner .card-list .card h3 { order: 3; grid-area: store-name; display: flex; align-items: flex-start; margin-top: 0; margin-bottom: 0; padding-left: 16px; font-size: 4.2666666667vw; } } .partnarship__menu06 .l-section__inner .card-list .card > p { margin-bottom: 48px; } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner .card-list .card > p { order: 4; grid-area: text; margin-bottom: 0; font-size: 3.7333333333vw; margin-top: 16px; padding: 16px 0; } } @media all and (max-width: 768px) { .partnarship__menu06 .l-section__inner .card-list .card .p-link { order: 5; grid-area: button; width: 36.1904761905%; } .partnarship__menu06 .l-section__inner .card-list .card .p-link p { font-size: 3.2vw; } } .fixedbutton { background: #fff; border: 2px solid #4060ff; font-size: 16px; line-height: 1.25; width: 160px; height: 160px; border-radius: 50%; position: fixed; right: 40px; bottom: 40px; z-index: 1; opacity: 0; visibility: hidden; transform: scale(0.75); box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; -webkit-transition: all 500ms cubic-bezier(0.68, 0, 0.265, 1) 0ms; /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0ms; -moz-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0ms; -o-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0ms; transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0ms; /* easeInOutBack */ } @media all and (max-width: 768px) { .fixedbutton { font-size: 11px; width: 96px; height: 96px; right: 16px; } } .fixedbutton a { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #4060ff; } .fixedbutton img { width: 60px; } @media all and (max-width: 768px) { .fixedbutton img { width: 36px; } } .fixedbutton.-show { opacity: 1; visibility: visible; transform: scale(1); } @media all and (min-width: 769px) { .fixedbutton.-show:hover { -webkit-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -moz-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -ms-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -o-transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; /* easeOutQuint */ transform: scale(1.05); } } .fixedbutton.-hide { opacity: 0; visibility: hidden; transform: scale(0.75); } .interview__overview { background: rgba(64, 96, 255, 0.05); padding-top: 80px; padding-bottom: 80px; } @media all and (max-width: 768px) { .interview__overview { padding-top: 40px; padding-bottom: 40px; } } .interview__overview p { max-width: 960px; margin: 0 auto; font-size: 18px; line-height: 2; } @media all and (max-width: 768px) { .interview__overview p { width: 84%; margin: 0 auto; font-size: 3.7333333333vw; } } @media all and (max-width: 768px) { .interview__interview { padding-top: 80px; padding-bottom: 0; overflow: hidden; } } .interview__interview .interview__contents { max-width: 960px; margin: 0 auto; } @media all and (max-width: 768px) { .interview__interview .interview__contents { width: 84%; } } .interview__interview .interview__contents .interview__q { border-left: 1px solid #4060ff; padding-left: 32px; margin-bottom: 32px; } @media all and (max-width: 768px) { .interview__interview .interview__contents .interview__q { padding-left: 16px; margin-bottom: 24px; } } .interview__interview .interview__contents .interview__q .name { font-size: 18px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; display: flex; align-items: center; } @media all and (max-width: 768px) { .interview__interview .interview__contents .interview__q .name { font-size: 3.7333333333vw; } } .interview__interview .interview__contents .interview__q .name::before { flex-shrink: 0; content: ""; display: block; width: 30px; height: 27px; margin-right: 12px; background: url('data:image/svg+xml,') no-repeat; } @media all and (max-width: 768px) { .interview__interview .interview__contents .interview__q .name::before { width: 19px; height: 16px; } } .interview__interview .interview__contents .interview__q p { font-size: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; margin-top: 16px; } @media all and (max-width: 768px) { .interview__interview .interview__contents .interview__q p { font-size: 4.2666666667vw; margin-top: 8px; } } .interview__interview .interview__contents .interview__a { background: rgba(255, 255, 255, 0.5); padding: 32px; margin-bottom: 80px; } @media all and (max-width: 768px) { .interview__interview .interview__contents .interview__a { margin-bottom: 48px; margin-left: -10.1587301587%; margin-right: -10.1587301587%; } } .interview__interview .interview__contents .interview__a .name { font-size: 18px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #999999; display: flex; align-items: center; } @media all and (max-width: 768px) { .interview__interview .interview__contents .interview__a .name { font-size: 3.2vw; } } .interview__interview .interview__contents .interview__a .name::before { flex-shrink: 0; content: ""; display: block; width: 27px; height: 27px; margin-right: 12px; background: url('data:image/svg+xml,') no-repeat; } @media all and (max-width: 768px) { .interview__interview .interview__contents .interview__a .name::before { width: 16px; height: 16px; } } .interview__interview .interview__contents .interview__a p { padding: 32px; font-size: 18px; line-height: 2; } @media all and (max-width: 768px) { .interview__interview .interview__contents .interview__a p { font-size: 3.7333333333vw; padding: 0; margin-top: 16px; } } .interview__interview .interview__contents .buttons { border-top: 1px solid #4060ff; padding-top: 32px; } @media all and (max-width: 768px) { .interview__interview .interview__contents .buttons { padding-top: 24px; } } .interview__interview .interview__contents .buttons .p-button { width: 37.5%; margin: 0 auto; } @media all and (max-width: 768px) { .interview__interview .interview__contents .buttons .p-button { width: 83.4920634921%; padding: 6.3492063492% 0; } } .interview__interview .interview__contents .buttons .p-button > p { font-size: 18px; padding-left: 12px; } @media all and (max-width: 768px) { .interview__interview .interview__contents .buttons .p-button > p { font-size: 3.7333333333vw; } } .interview__interview .interview__contents .buttons .p-button svg { width: 6.6666666667%; position: relative; padding-left: 11.1111111111%; } @media all and (min-width: 769px) { .interview__interview .interview__contents .buttons .p-button:hover svg path, .interview__interview .interview__contents .buttons .p-button:hover svg line { stroke: #fff; } } .interview__related { padding-top: 0; } @media all and (max-width: 768px) { .interview__related { padding-top: 80px; padding-bottom: 40px; } } .interview__related h3 { width: 100%; margin-bottom: 64px; } @media all and (max-width: 768px) { .interview__related h3 { width: 84%; margin: 0 auto 48px; } } @media all and (max-width: 768px) { .service .l-pagetitle__inner { flex-direction: column; } } @media all and (max-width: 768px) { .service .l-pagetitle .text-area h1 { font-size: 12.8vw; } .service .l-pagetitle .text-area h1 + p { font-size: 4.2666666667vw; } } .service__giftmall { padding-top: 0; padding-bottom: 0; background: rgba(255, 255, 255, 0.5); } @media all and (max-width: 768px) { .service__giftmall { padding-top: 200px; } } .service__giftmall .l-section__inner { display: flex; max-width: 1440px; padding: 0; } @media all and (max-width: 768px) { .service__giftmall .l-section__inner { flex-direction: column; position: relative; } } .service__giftmall .image-area { width: 50%; background: rgba(64, 96, 255, 0.1); padding: 96px 0 24px; opacity: 0; -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ } .loaded .service__giftmall .image-area { opacity: 1; } @media all and (max-width: 768px) { .service__giftmall .image-area { width: 100%; padding: 40px 0 16px; } } .service__giftmall .image-area .giftmall { width: 100%; padding-bottom: 40px; } @media all and (max-width: 768px) { .service__giftmall .image-area .giftmall { padding-bottom: 60px; } } .service__giftmall .image-area .giftmall-control { position: absolute; width: 26.6666666667%; padding-top: 6.6666666667%; right: 2.7777777778%; bottom: 10px; } @media all and (max-width: 768px) { .service__giftmall .image-area .giftmall-control { width: 84%; padding-top: 0; margin-top: 48px; height: 48px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: center; } } .service__giftmall .image-area .giftmall-control__nums { height: 100%; display: flex; align-items: center; justify-content: flex-start; } @media all and (min-width: 769px) { .service__giftmall .image-area .giftmall-control__nums { position: absolute; top: 0; left: 0; width: 33.8541666667%; } } @media all and (max-width: 768px) { .service__giftmall .image-area .giftmall-control__nums { width: 20.6349206349%; } } .service__giftmall .image-area .giftmall-control__nums > span { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; color: #cccccc; } .service__giftmall .image-area .giftmall-control__nums .current { color: #262626; } .service__giftmall .image-area .giftmall-control__nums .separator { padding: 0 12px; display: inline-block; } .service__giftmall .image-area .giftmall-control__nums::after { content: ""; position: absolute; width: 1px; height: 10px; top: 50%; right: 0; transform: translate(0, -50%); background: #cccccc; } .service__giftmall .image-area .giftmall-control__buttons { position: absolute; right: 0; top: 0; width: 54.1666666667%; display: flex; justify-content: space-between; align-items: center; height: 100%; } @media all and (max-width: 768px) { .service__giftmall .image-area .giftmall-control__buttons { width: 104px; height: 48px; } } .service__giftmall .image-area .giftmall-control .swiper-button-prev, .service__giftmall .image-area .giftmall-control .swiper-button-next { width: 46.1538461538%; height: 100%; } @media all and (max-width: 768px) { .service__giftmall .image-area .giftmall-control .swiper-button-prev, .service__giftmall .image-area .giftmall-control .swiper-button-next { width: 48px; } } .service__giftmall .image-area .giftmall-control .swiper-button-prev svg, .service__giftmall .image-area .giftmall-control .swiper-button-next svg { width: 20.8333333333%; } .service__giftmall .image-area .giftmall-control .swiper-button-prev::before, .service__giftmall .image-area .giftmall-control .swiper-button-next::before { -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ } @media all and (min-width: 769px) { .service__giftmall .image-area .giftmall-control .swiper-button-prev:hover::before, .service__giftmall .image-area .giftmall-control .swiper-button-next:hover::before { transform: scale(1.1); } } @media all and (max-width: 768px) { .service__giftmall .image-area .giftmall-control .swiper-button-next { margin-left: 8px; } } .service__giftmall .text-area { width: 50%; display: flex; align-items: center; } @media all and (max-width: 768px) { .service__giftmall .text-area { width: 100%; padding-bottom: 80px; } } .service__giftmall .text-area .text__body { max-width: 590px; width: 86.1111111111%; padding-left: 80px; } @media all and (max-width: 768px) { .service__giftmall .text-area .text__body { width: 84%; padding-left: 0; margin: 0 auto; } } @media all and (max-width: 768px) { .service__giftmall .text-area .text__body .service-title { position: absolute; top: -120px; } } .service__giftmall .text-area .text__body .service-title h2 { font-size: 80px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; line-height: 1.2; } @media all and (max-width: 768px) { .service__giftmall .text-area .text__body .service-title h2 { font-size: 10.6666666667vw; } } .service__giftmall .text-area .text__body .service-title h2 > div { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: inherit; } .service__giftmall .text-area .text__body .service-title span { font-size: 16px; color: #999999; } @media all and (max-width: 768px) { .service__giftmall .text-area .text__body .service-title span { font-size: 3.2vw; } } .service__giftmall .text-area .text__body h3 { font-size: 40px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; margin-top: 64px; } @media all and (max-width: 768px) { .service__giftmall .text-area .text__body h3 { font-size: 6.4vw; margin-top: 48px; } } .service__giftmall .text-area .text__body p { margin-top: 5.1724137931%; } @media all and (max-width: 768px) { .service__giftmall .text-area .text__body p { margin-top: 7.9365079365%; } } .service__giftmall .text-area .buttons { display: flex; align-items: center; margin-top: 10.3448275862%; } @media all and (max-width: 768px) { .service__giftmall .text-area .buttons { margin-top: 15.2380952381%; } } .service__giftmall .text-area .buttons .p-button { max-width: 240px; width: 41.3793103448%; } @media all and (max-width: 768px) { .service__giftmall .text-area .buttons .p-button { width: 52.0634920635%; max-width: none; margin-top: 0; padding: 5.0793650794% 0; } } .service__giftmall .text-area .buttons .p-button p { margin-top: 0; } .service__giftmall .text-area .buttons .p-link { margin-left: auto; } .service__giftmall .text-area .buttons .p-link p { margin-top: 0; } @media all and (max-width: 768px) { .service__others { padding-top: 80px; padding-bottom: 80px; } } @media all and (min-width: 769px) { .service__others .service-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 160px 80px; } } @media all and (max-width: 768px) { .service__others .service-list { width: 84%; margin: 0 auto; } } .service__others .service-list__detail { border-bottom: 1px solid #4060ff; padding-bottom: 40px; display: grid; grid-template-columns: 1fr 41.7910447761%; grid-template-rows: 120px 1fr auto; gap: 40px; } @media all and (max-width: 768px) { .service__others .service-list__detail { display: grid; grid-template-columns: 1fr 33.6507936508%; grid-template-rows: auto 1fr auto; gap: 20px; padding-bottom: 24px; } .service__others .service-list__detail:not(:first-child) { padding-top: 80px; } } .service__others .service-list__detail .image-area { grid-column: 2; grid-row: 1/3; } @media all and (max-width: 768px) { .service__others .service-list__detail .image-area { grid-row: 2/3; } } .service__others .service-list__detail .image-area img { width: 100%; } .service__others .service-list__detail .service-title { grid-column: 1; grid-row: 1; } @media all and (max-width: 768px) { .service__others .service-list__detail .service-title { grid-column: 1/3; } .service__others .service-list__detail .service-title br { display: none; } } .service__others .service-list__detail .service-title h2 { font-size: 40px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; line-height: 1.2; } @media all and (max-width: 768px) { .service__others .service-list__detail .service-title h2 { font-size: 32px; } } .service__others .service-list__detail .service-title h2 > div { font-weight: inherit; } .service__others .service-list__detail .service-title span { font-size: 16px; color: #999999; } @media all and (max-width: 768px) { .service__others .service-list__detail .service-title span { font-size: 12px; } } .service__others .service-list__detail .service-text { grid-column: 1; grid-row: 2; } .service__others .service-list__detail .service-text h3 { font-size: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; line-height: 1.25; } @media all and (max-width: 768px) { .service__others .service-list__detail .service-text h3 { font-size: 16px; } } .service__others .service-list__detail .service-text p { line-height: 2; margin-top: 5.1724137931%; } @media all and (max-width: 768px) { .service__others .service-list__detail .service-text p { margin-top: 7.9365079365%; } } @media all and (max-width: 768px) and (max-width: 768px) { .service__others .service-list__detail .service-text p { font-size: 14px; } } .service__others .service-list__detail .buttons { grid-column: 1/3; grid-row: 3; display: flex; align-items: center; } @media all and (max-width: 768px) { .service__others .service-list__detail .buttons { padding-top: 20px; } } .giftmall main .page-background { z-index: -3; } .giftmall .giftmall-bg { position: absolute; top: 3%; right: 0; width: 100%; z-index: -1; text-align: center; overflow: hidden; } .giftmall .giftmall-bg:nth-child(2) img { transition: opacity 1s; } .giftmall .giftmall-bg:nth-child(3) img { transition: opacity 1s 0.2s; } .giftmall .giftmall-bg:nth-child(4) img { transition: opacity 1s 0.4s; } .giftmall .giftmall-bg img { opacity: 0; } .loaded .giftmall .giftmall-bg img { opacity: 1; } @media all and (min-width: 769px) { .giftmall .giftmall-bg img { width: 1215px; margin-left: 20%; } } @media all and (max-width: 768px) { .giftmall .giftmall-bg img { max-width: 550px; width: 146.6666666667%; position: relative; left: 50%; transform: translateX(-47%); } } .giftmall__about { padding-top: 80px; padding-bottom: 80px; } @media all and (max-width: 768px) { .giftmall__about { padding-top: 96px; } } .giftmall__about::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); position: absolute; top: 0; left: 0; z-index: -2; } @media all and (min-width: 769px) { .giftmall__about .text-area { width: 50%; } } @media all and (max-width: 768px) { .giftmall__about .text-area { width: 84%; margin: 0 auto; } } .giftmall__about .text-area .text__body h3 { font-size: 40px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } .giftmall__about .text-area .text__body > p { margin-top: 64px; } @media all and (max-width: 768px) { .giftmall__about .text-area .text__body > p { margin-top: 15.2380952381%; } } .giftmall__about .text-area .buttons { display: flex; align-items: center; margin-top: 10.3448275862%; } .giftmall__feature { overflow: hidden; } @media all and (max-width: 768px) { .giftmall__feature { padding: 80px 0; } } @media all and (max-width: 768px) { .giftmall__feature .l-section__inner > .text-area { width: 84%; margin: 0 auto; } } @media all and (min-width: 769px) { .giftmall__feature .l-section__inner > .text-area h2 { margin-top: 64px; font-size: 64px; } } @media all and (max-width: 768px) { .giftmall__feature .l-section__inner > .text-area h2 { margin-top: 48px; font-size: 8.5333333333vw; } } .giftmall__feature .feature-list__block { display: flex; margin-top: 160px; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block { flex-direction: column; margin-top: 80px; } } .giftmall__feature .feature-list__block:nth-child(odd) { flex-direction: row-reverse; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block:nth-child(odd) { flex-direction: column; } } @media all and (min-width: 769px) { .giftmall__feature .feature-list__block:nth-child(odd) .text-area { margin-right: 80px; } } .giftmall__feature .feature-list__block:nth-child(odd) .image-area img { left: 0; } @media all and (min-width: 769px) { .giftmall__feature .feature-list__block:nth-child(even) .text-area { margin-left: 80px; } } .giftmall__feature .feature-list__block:nth-child(even) .image-area img { right: 0; } .giftmall__feature .feature-list__block .image-area { width: 50%; position: relative; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .image-area { width: 100%; margin-bottom: 32px; } } .giftmall__feature .feature-list__block .image-area img { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; position: absolute; top: 0; } @media all and (min-width: 769px) { .giftmall__feature .feature-list__block .image-area img { width: auto; height: 324px; } } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .image-area img { position: static; width: 100%; } } .giftmall__feature .feature-list__block .text-area { display: flex; border-left: 1px solid #4060ff; padding-left: 24px; } @media all and (min-width: 769px) { .giftmall__feature .feature-list__block .text-area { width: 78.125%; min-height: 324px; } } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .text-area { padding-left: 12px; width: 84%; margin: 0 auto; } } .giftmall__feature .feature-list__block .text-area .label { font-size: 18px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; margin-right: 32px; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .text-area .label { font-size: 3.2vw; margin-right: 24px; } } .giftmall__feature .feature-list__block .text-area .label b { font-size: 40px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .text-area .label b { font-size: 6.4vw; } } .giftmall__feature .feature-list__block .text-area .text__body h3 { font-size: 40px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; line-height: 1.25; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .text-area .text__body h3 { font-size: 6.4vw; } } .giftmall__feature .feature-list__block .text-area .text__body h3 span { font-size: 24px; display: inline-block; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .text-area .text__body h3 span { font-size: 5.3333333333vw; } } .giftmall__feature .feature-list__block .text-area .text__body h3 span::after { display: none; } .giftmall__feature .feature-list__block .text-area .text__body h4 { font-size: 20px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; margin-top: 32px; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .text-area .text__body h4 { font-size: 4.2666666667vw; margin-top: 24px; } } .giftmall__feature .feature-list__block .text-area .text__body h4 + p { margin-top: 12px; } .giftmall__feature .feature-list__block .text-area .text__body p { line-height: 2; } .giftmall__feature .feature-list__block .text-area .text__body p.note { font-size: 14px; margin-top: 8px; } .giftmall__feature .feature-list__block .text-area .text__body .buttons { margin-top: 24px; } .giftmall__feature .feature-list__block .text-area .text__body .buttons .p-button { width: 35.0378787879%; padding: 18px 0 18px; } @media all and (max-width: 768px) { .giftmall__feature .feature-list__block .text-area .text__body .buttons .p-button { width: 68.3982683983%; padding: 18px 0 18px; } } .giftmall__feature .feature-list__block .text-area .text__body .buttons .p-button p { line-height: 1; } .giftmall__brand { background: rgba(255, 255, 255, 0.5); } @media all and (max-width: 768px) { .giftmall__brand { padding: 80px 0; } } .giftmall__brand > .l-section__inner { display: flex; flex-direction: row-reverse; } @media all and (max-width: 768px) { .giftmall__brand > .l-section__inner { flex-direction: column; } } .giftmall__brand > .l-section__inner .image-area { width: 50%; padding: 80px 62px 0; display: flex; align-items: center; justify-content: flex-end; } @media all and (max-width: 768px) { .giftmall__brand > .l-section__inner .image-area { width: 100%; padding-left: 24%; padding-right: 24%; justify-content: center; } } .giftmall__brand > .l-section__inner .image-area img { width: 54.1666666667%; } @media all and (max-width: 768px) { .giftmall__brand > .l-section__inner .image-area img { width: 100%; } } .giftmall__brand > .l-section__inner .text-area { width: 50%; } @media all and (max-width: 768px) { .giftmall__brand > .l-section__inner .text-area { width: 84%; margin: 0 auto; } } @media all and (max-width: 768px) { .giftmall__brand > .l-section__inner .text-area > h3 { position: absolute; top: 0; left: 8.5333333333%; } } .giftmall__brand > .l-section__inner .text-area h2 { margin-top: 64px; font-size: 40px; } @media all and (max-width: 768px) { .giftmall__brand > .l-section__inner .text-area h2 { font-size: 6.4vw; } } .giftmall__brand > .l-section__inner .text-area h2 + p { line-height: 2; margin-top: 16px; } .giftmall__brand .aboutlogo { margin-top: 60px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo { margin: 48px auto 0; } } .giftmall__brand .aboutlogo .p-accordion { width: 22.3958333333%; padding: 18px 0 18px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo .p-accordion { font-size: 3.2vw; width: 61.0666666667%; margin: 0 8.5333333333%; } .giftmall__brand .aboutlogo .p-accordion::after { right: 24px; } } @media all and (min-width: 769px) { .giftmall__brand .aboutlogo .p-accordion-contents { width: calc(100% + 80px); margin-left: -40px; padding: 0 40px; } } .giftmall__brand .aboutlogo .p-accordion-contents[style="display: block;"] .image-area { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; transition: box-shadow 0.6s; } .giftmall__brand .aboutlogo .p-accordion-contents .image-area { background: #fff; transition: box-shadow 0.1s; box-shadow: rgba(0, 0, 0, 0) 0 0 0; } .giftmall__brand .aboutlogo .p-accordion-contents .image-area img { width: 100%; } .giftmall__brand .aboutlogo .p-accordion-contents .text-area { display: flex; padding: 0 100px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo .p-accordion-contents .text-area { width: 84%; margin: 0 auto; padding: 0; display: block; } } .giftmall__brand .aboutlogo .p-accordion-contents .text-area:not(:first-child) { margin-top: 160px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo .p-accordion-contents .text-area:not(:first-child) { margin-top: 80px; } } @media all and (min-width: 769px) { .giftmall__brand .aboutlogo .p-accordion-contents .text-area h3 { flex: 0 0 240px; } } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo .p-accordion-contents .text-area h3 { margin-bottom: 32px; } } .giftmall__brand .aboutlogo .p-accordion-contents .text-area .text__body p { line-height: 2; } .giftmall__brand .aboutlogo .p-accordion-contents .text-area .image-area { margin-top: 80px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo .p-accordion-contents .text-area .image-area { margin-top: 32px; } } .giftmall__brand .aboutlogo .p-accordion-contents .buttons { border-top: 1px solid #4060ff; padding-top: 32px; margin-top: 160px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo .p-accordion-contents .buttons { width: 84%; margin: 80px auto 0; } } .giftmall__brand .aboutlogo .p-accordion-contents .buttons .p-button { margin: 0 auto; width: 31.25%; padding: 24px 0 24px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo .p-accordion-contents .buttons .p-button { width: 94.2307692308%; padding: 18px 0 18px; } } .giftmall__brand .aboutlogo .p-accordion-contents .buttons .p-button p span { font-size: 10px; } .giftmall__brand .aboutlogo__concept { margin-top: 160px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo__concept { margin-top: 80px; } } .giftmall__brand .aboutlogo__concept .image-area { background: #fff; padding: 50px; padding-left: 14.7569444444%; padding-right: 14.7569444444%; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo__concept .image-area { padding-left: 6.4%; padding-right: 6.4%; } } .giftmall__brand .aboutlogo__concept .copy { font-size: 32px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; line-height: 1.25; text-align: center; margin-top: 80px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo__concept .copy { font-size: 4.2666666667vw; width: 84%; margin: 32px auto 0; } } .giftmall__brand .aboutlogo__symbol { margin-top: 160px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo__symbol { margin-top: 40px; } } .giftmall__brand .aboutlogo__symbol .image-area { padding: 80px; padding-left: 9.7222222222%; padding-right: 9.7222222222%; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo__symbol .image-area { padding: 32px; padding-left: 6.4%; padding-right: 6.4%; } } .giftmall__brand .aboutlogo__symbol .text-area .image-area { padding: 24px; padding-left: 7.8993055556%; padding-right: 7.8993055556%; } .giftmall__brand .aboutlogo__logotype { margin-top: 160px; } @media all and (max-width: 768px) { .giftmall__brand .aboutlogo__logotype { margin-top: 80px; } } .giftmall__brand .aboutlogo__logotype .text-area .image-area { padding: 40px; padding-left: 3.7326388889%; padding-right: 3.7326388889%; } .daresugugift main .page-background { z-index: -3; } .daresugugift .daresugugift-bg { position: absolute; top: -2%; left: 0; width: 242.5%; margin-left: -65.625%; text-align: center; overflow: hidden; } @media all and (max-width: 768px) { .daresugugift .daresugugift-bg { width: 135.7333333333%; width: 135.73333vw; margin-left: 0; top: 8%; left: 50%; transform: translateX(-50%) !important; } } .daresugugift .daresugugift-bg:nth-child(1) img { transition: opacity 1s 0.6s; } .daresugugift .daresugugift-bg:nth-child(2) img { transition: opacity 1s 0.8s; } .daresugugift .daresugugift-bg:nth-child(3) img { transition: opacity 1s 1s; } .daresugugift .daresugugift-bg img { opacity: 0; } .loaded .daresugugift .daresugugift-bg img { opacity: 1; } @media all and (min-width: 769px) { .daresugugift .daresugugift-bg img { width: 100%; } } @media all and (max-width: 768px) { .daresugugift .daresugugift-bg img { width: 135.7333333333%; width: 135.73333vw; position: relative; left: 50%; transform: translateX(-47%); } } .daresugugift__about { padding-top: 80px; padding-bottom: 80px; } @media all and (max-width: 768px) { .daresugugift__about { position: relative; } } .daresugugift__about::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); position: absolute; top: 0; left: 0; z-index: -2; } @media all and (min-width: 769px) { .daresugugift__about .l-section__inner { display: flex; justify-content: space-between; } } @media all and (min-width: 769px) { .daresugugift__about .image-area { width: 46.5277777778%; } } @media all and (max-width: 768px) { .daresugugift__about .image-area { width: 84%; margin: 48px auto; } } .daresugugift__about .image-area img { width: 100%; } @media all and (min-width: 769px) { .daresugugift__about .text-area { width: 46.5277777778%; } .daresugugift__about .text-area h3 { margin-bottom: 64px; } } @media all and (max-width: 768px) { .daresugugift__about .text-area { width: 84%; margin: 0 auto; } .daresugugift__about .text-area h3 { position: absolute; top: -64px; left: 8.5333333333%; } } .daresugugift__about .text-area .buttons { display: flex; align-items: center; margin-top: 10.3448275862%; } @media all and (max-width: 768px) { .daresugugift__menu { width: 84%; margin: 0 auto; padding-top: 80px; padding-bottom: 13.3333333333%; } } .daresugugift__menu ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media all and (max-width: 768px) { .daresugugift__menu ul { grid-template-columns: repeat(1, 1fr); gap: 10px; } } .daresugugift__menu ul li { background: #fff; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .daresugugift__menu ul li a { display: block; padding: 24px; position: relative; height: 100%; } @media all and (max-width: 768px) { .daresugugift__menu ul li a { padding: 16px 24px; display: flex; align-items: center; } } .daresugugift__menu ul li a .icon { flex-shrink: 0; width: 128px; height: 128px; margin: 16px auto; -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ background: #f5f7ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media all and (max-width: 768px) { .daresugugift__menu ul li a .icon { flex: 0 0 64px; height: 64px; margin: 0; } } .daresugugift__menu ul li a .icon.double { position: relative; } .daresugugift__menu ul li a .icon.double img { position: absolute; } .daresugugift__menu ul li a .icon.double img:nth-child(1) { left: -10px; } @media all and (max-width: 768px) { .daresugugift__menu ul li a .icon.double img:nth-child(1) { left: -4px; } } .daresugugift__menu ul li a .icon.double img:nth-child(2) { right: -10px; } @media all and (max-width: 768px) { .daresugugift__menu ul li a .icon.double img:nth-child(2) { right: -4px; } } .daresugugift__menu ul li a .icon img { width: 72px; } @media all and (max-width: 768px) { .daresugugift__menu ul li a .icon img { width: 36px; } } @media all and (max-width: 768px) { .daresugugift__menu ul li a .text { margin-left: 24px; flex: 1; padding-right: 40px; } } .daresugugift__menu ul li a .text p { font-size: 16px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .daresugugift__menu ul li a .text p { padding-right: 62px; } } @media all and (max-width: 768px) { .daresugugift__menu ul li a .text p { font-size: 2.9333333333vw; } } .daresugugift__menu ul li a .text p.en { font-size: 40px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .daresugugift__menu ul li a .text p.en { font-size: 5.3333333333vw; margin-bottom: 4px; } } .daresugugift__menu ul li a .arrow { width: 48px; position: absolute; right: 24px; bottom: 24px; } @media all and (max-width: 768px) { .daresugugift__menu ul li a .arrow { width: 24px; right: 12px; bottom: 12px; } } .daresugugift__menu ul li a .arrow img { width: 100%; } .daresugugift__menu ul li a:hover .icon { transform: scale(1.1); } .daresugugift .flow { margin-bottom: 80px; } @media all and (max-width: 768px) { .daresugugift .flow { position: relative; width: 84%; margin: 80px auto 48px; } } .daresugugift .flow > p { display: flex; align-items: center; color: #4060ff; font-size: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; position: relative; margin-bottom: 32px; } @media all and (max-width: 768px) { .daresugugift .flow > p { font-size: 4.2666666667vw; border-top: 1px solid #4060ff; border-bottom: 1px solid #4060ff; } } .daresugugift .flow > p span { padding: 0 64px; display: inline-flex; align-items: baseline; padding-bottom: 16px; } @media all and (max-width: 768px) { .daresugugift .flow > p span { display: inline-block; width: 100%; text-align: center; padding: 8px 0; } } @media all and (min-width: 769px) { .daresugugift .flow > p::before, .daresugugift .flow > p::after { content: ""; flex: 1; height: 1px; background: #4060ff; } } .daresugugift .flow.receive ul { grid-template-columns: repeat(3, 1fr); } @media all and (max-width: 768px) { .daresugugift .flow.receive ul { grid-template-columns: repeat(1, 1fr); } } .daresugugift .flow ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; } @media all and (max-width: 768px) { .daresugugift .flow ul { grid-template-columns: repeat(1, 1fr); gap: 48px; } } @media all and (max-width: 768px) { .daresugugift .flow ul li { display: grid; grid-template-columns: 46.6666666667% 1fr; gap: 16px; } .daresugugift .flow ul li > p { font-size: 3.7333333333vw; } } .daresugugift .flow ul li .image-area { position: relative; } @media all and (min-width: 769px) { .daresugugift .flow ul li .image-area { width: 100%; margin-bottom: 32px; } } @media all and (max-width: 768px) { .daresugugift .flow ul li .image-area { grid-column: 1; grid-row: 2; } } .daresugugift .flow ul li .image-area img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .daresugugift .flow ul li h3 { text-align: center; color: #262626; display: flex; flex-direction: column; align-items: center; font-size: 24px; margin-bottom: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } .daresugugift .flow ul li h3 span { color: #4060ff; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-bottom: 4px; } @media all and (max-width: 768px) { .daresugugift .flow ul li h3 { grid-column: 1/3; grid-row: 1; font-size: 5.3333333333vw; margin-bottom: 0; } .daresugugift .flow ul li h3 span { font-size: 4.2666666667vw; } } @media all and (max-width: 768px) { .daresugugift .flow ul li .text { grid-column: 2; grid-row: 2; } } .daresugugift .flow ul li .text p { line-height: 2; word-break: break-all; } @media all and (max-width: 768px) { .daresugugift .flow ul li .text p { font-size: 3.7333333333vw; } } .daresugugift .flow ul li .text p span { display: block; font-size: 14px; line-height: 1.5; margin-top: 8px; } @media all and (max-width: 768px) { .daresugugift .flow ul li .text p span { font-size: 3.2vw; } } @media all and (max-width: 768px) { .daresugugift__howtouse { padding-top: 80px; padding-bottom: 80px; overflow: hidden; } .daresugugift__howtouse p.small { width: 84%; margin: 0 auto; } } .daresugugift__howtouse .l-section__inner > .text-area { margin-bottom: 160px; } @media all and (max-width: 768px) { .daresugugift__howtouse .l-section__inner > .text-area { width: 84%; margin: 0 auto; } } @media all and (min-width: 769px) { .daresugugift__howtouse .l-section__inner > .text-area h2 { margin-top: 24px; font-size: 64px; } } @media all and (max-width: 768px) { .daresugugift__howtouse .l-section__inner > .text-area h2 { margin-top: 16px; font-size: 8.5333333333vw; } } .daresugugift__howtouse .l-section__inner .flow ul li:last-child .image-area::after { display: none; } @media all and (min-width: 769px) { .daresugugift__howtouse .l-section__inner .flow ul li:not(:last-child) .image-area { position: relative; } .daresugugift__howtouse .l-section__inner .flow ul li:not(:last-child) .image-area::after { content: ""; display: block; width: 16px; height: 32px; background: url('data:image/svg+xml,') no-repeat; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); } } .daresugugift__goodpoint { background: rgba(255, 255, 255, 0.5); } @media all and (max-width: 768px) { .daresugugift__goodpoint { padding-top: 80px; padding-bottom: 80px; overflow: hidden; } } .daresugugift__goodpoint .l-section__inner > .text-area { margin-bottom: 160px; } @media all and (max-width: 768px) { .daresugugift__goodpoint .l-section__inner > .text-area { width: 84%; margin: 0 auto; } } @media all and (min-width: 769px) { .daresugugift__goodpoint .l-section__inner > .text-area h2 { margin-top: 24px; font-size: 64px; } } @media all and (max-width: 768px) { .daresugugift__goodpoint .l-section__inner > .text-area h2 { margin-top: 16px; font-size: 8.5333333333vw; } } .daresugugift__goodpoint .buttons { border-top: 1px solid #4060ff; padding-top: 32px; } @media all and (max-width: 768px) { .daresugugift__goodpoint .buttons { width: 84%; margin: 7.619047619% auto 0; } } .daresugugift__goodpoint .buttons .p-button { width: 20.8333333333%; margin: 0 auto; } @media all and (max-width: 768px) { .daresugugift__goodpoint .buttons .p-button { width: 69.8412698413%; padding: 5.0793650794% 0; } } .daresugugift__goodpoint .buttons .p-button > p { font-size: 14px; } @media all and (max-width: 768px) { .daresugugift__goodpoint .buttons .p-button > p { font-size: 3.2vw; } } .daresugugift__case { overflow: hidden; } @media all and (max-width: 768px) { .daresugugift__case { padding: 80px 0; } } @media all and (max-width: 768px) { .daresugugift__case .l-section__inner > .text-area { width: 84%; margin: 0 auto; } } @media all and (min-width: 769px) { .daresugugift__case .l-section__inner > .text-area h2 { margin-top: 64px; font-size: 64px; } } @media all and (max-width: 768px) { .daresugugift__case .l-section__inner > .text-area h2 { margin-top: 16px; font-size: 8.5333333333vw; } } .daresugugift__case .case-list__block { display: flex; margin-top: 160px; } @media all and (max-width: 768px) { .daresugugift__case .case-list__block { flex-direction: column; margin-top: 80px; } } .daresugugift__case .case-list__block:nth-child(odd) { flex-direction: row-reverse; } @media all and (max-width: 768px) { .daresugugift__case .case-list__block:nth-child(odd) { flex-direction: column; } } @media all and (min-width: 769px) { .daresugugift__case .case-list__block:nth-child(odd) .text-area { margin-right: 80px; } } .daresugugift__case .case-list__block:nth-child(odd) .image-area img { left: 0; } @media all and (min-width: 769px) { .daresugugift__case .case-list__block:nth-child(even) .text-area { margin-left: 80px; } } .daresugugift__case .case-list__block:nth-child(even) .image-area img { right: 0; } .daresugugift__case .case-list__block .image-area { width: 50%; position: relative; } @media all and (max-width: 768px) { .daresugugift__case .case-list__block .image-area { width: 100%; margin-bottom: 32px; } } .daresugugift__case .case-list__block .image-area img { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; position: absolute; top: 0; } @media all and (min-width: 769px) { .daresugugift__case .case-list__block .image-area img { width: auto; height: 324px; } } @media all and (max-width: 768px) { .daresugugift__case .case-list__block .image-area img { position: static; width: 100%; } } .daresugugift__case .case-list__block .text-area { display: flex; border-left: 1px solid #4060ff; padding-left: 24px; } @media all and (min-width: 769px) { .daresugugift__case .case-list__block .text-area { width: 78.125%; min-height: 324px; } } @media all and (max-width: 768px) { .daresugugift__case .case-list__block .text-area { padding-left: 12px; width: 84%; margin: 0 auto; } } .daresugugift__case .case-list__block .text-area .label { font-size: 18px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; margin-right: 32px; } @media all and (max-width: 768px) { .daresugugift__case .case-list__block .text-area .label { font-size: 3.2vw; margin-right: 24px; } } .daresugugift__case .case-list__block .text-area .label b { font-size: 40px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; } @media all and (max-width: 768px) { .daresugugift__case .case-list__block .text-area .label b { font-size: 6.4vw; } } .daresugugift__case .case-list__block .text-area .text__body h3 { font-size: 40px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; line-height: 1.25; margin-bottom: 32px; } @media all and (max-width: 768px) { .daresugugift__case .case-list__block .text-area .text__body h3 { font-size: 6.4vw; margin-bottom: 24px; } } .daresugugift__case .case-list__block .text-area .text__body p { line-height: 2; } .daresugugift__case .case-list__block .text-area .text__body .buttons { margin-top: 24px; } .daresugugift__case .case-list__block .text-area .text__body .buttons .p-button { width: 35.0378787879%; padding: 18px 0 18px; } @media all and (max-width: 768px) { .daresugugift__case .case-list__block .text-area .text__body .buttons .p-button { width: 68.3982683983%; padding: 18px 0 18px; } } .daresugugift__case .case-list__block .text-area .text__body .buttons .p-button p { line-height: 1; } .daresugugift__case .daresugu-link { background: rgba(64, 96, 255, 0.05); display: flex; align-items: center; } @media all and (min-width: 769px) { .daresugugift__case .daresugu-link { margin-top: 160px; padding: 80px; justify-content: space-between; } } @media all and (max-width: 768px) { .daresugugift__case .daresugu-link { width: 84%; margin: 80px auto 0; padding: 40px 24px; flex-direction: column; justify-content: center; } } @media all and (min-width: 769px) { .daresugugift__case .daresugu-link .text-area { padding-right: 40px; } } .daresugugift__case .daresugu-link .text-area p { font-size: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .daresugugift__case .daresugu-link .text-area p { font-size: 3.7333333333vw; text-align: center; } } @media all and (min-width: 769px) { .daresugugift__case .daresugu-link .p-button { width: 36.2903225806%; } } @media all and (max-width: 768px) { .daresugugift__case .daresugu-link .p-button { margin-top: 24px; width: 100%; padding-top: 20px; padding-bottom: 20px; font-size: 3.7333333333vw; } } .daresugugift__brand { background: rgba(255, 255, 255, 0.5); } @media all and (max-width: 768px) { .daresugugift__brand { padding: 80px 0; } } .daresugugift__brand > .l-section__inner { display: flex; flex-direction: row-reverse; } @media all and (max-width: 768px) { .daresugugift__brand > .l-section__inner { flex-direction: column; } } .daresugugift__brand > .l-section__inner .image-area { width: 50%; padding: 80px 62px 0; display: flex; align-items: center; justify-content: flex-end; } @media all and (max-width: 768px) { .daresugugift__brand > .l-section__inner .image-area { width: 100%; padding-left: 24%; padding-right: 24%; justify-content: center; } } .daresugugift__brand > .l-section__inner .image-area img { width: 54.1666666667%; } @media all and (max-width: 768px) { .daresugugift__brand > .l-section__inner .image-area img { width: 100%; } } .daresugugift__brand > .l-section__inner .text-area { width: 50%; } @media all and (max-width: 768px) { .daresugugift__brand > .l-section__inner .text-area { width: 84%; margin: 0 auto; } } @media all and (max-width: 768px) { .daresugugift__brand > .l-section__inner .text-area > h3 { position: absolute; top: 0; left: 8.5333333333%; } } .daresugugift__brand > .l-section__inner .text-area h2 { margin-top: 64px; font-size: 40px; } @media all and (max-width: 768px) { .daresugugift__brand > .l-section__inner .text-area h2 { font-size: 6.4vw; } } .daresugugift__brand > .l-section__inner .text-area h2 + p { line-height: 2; margin-top: 16px; } .daresugugift__brand .aboutlogo { margin-top: 60px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo { margin: 48px auto 0; } } .daresugugift__brand .aboutlogo .p-accordion { width: 22.3958333333%; padding: 18px 0 18px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo .p-accordion { font-size: 3.2vw; width: 61.0666666667%; margin: 0 8.5333333333%; } .daresugugift__brand .aboutlogo .p-accordion::after { right: 24px; } } @media all and (min-width: 769px) { .daresugugift__brand .aboutlogo .p-accordion-contents { width: calc(100% + 80px); margin-left: -40px; padding: 0 40px; } } .daresugugift__brand .aboutlogo .p-accordion-contents[style="display: block;"] .image-area { box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; transition: box-shadow 0.6s; } .daresugugift__brand .aboutlogo .p-accordion-contents .image-area { background: #fff; transition: box-shadow 0.1s; box-shadow: rgba(0, 0, 0, 0) 0 0 0; } .daresugugift__brand .aboutlogo .p-accordion-contents .image-area img { width: 100%; } .daresugugift__brand .aboutlogo .p-accordion-contents .text-area { display: flex; padding: 0 100px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo .p-accordion-contents .text-area { width: 84%; margin: 0 auto; padding: 0; display: block; } } .daresugugift__brand .aboutlogo .p-accordion-contents .text-area:not(:first-child) { margin-top: 160px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo .p-accordion-contents .text-area:not(:first-child) { margin-top: 80px; } } @media all and (min-width: 769px) { .daresugugift__brand .aboutlogo .p-accordion-contents .text-area h3 { flex: 0 0 240px; } } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo .p-accordion-contents .text-area h3 { margin-bottom: 32px; } } .daresugugift__brand .aboutlogo .p-accordion-contents .text-area .text__body p { line-height: 2; } .daresugugift__brand .aboutlogo .p-accordion-contents .text-area .image-area { margin-top: 80px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo .p-accordion-contents .text-area .image-area { margin-top: 32px; } } .daresugugift__brand .aboutlogo .p-accordion-contents .buttons { border-top: 1px solid #4060ff; padding-top: 32px; margin-top: 160px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo .p-accordion-contents .buttons { width: 84%; margin: 80px auto 0; } } .daresugugift__brand .aboutlogo .p-accordion-contents .buttons .p-button { margin: 0 auto; width: 31.25%; padding: 24px 0 24px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo .p-accordion-contents .buttons .p-button { width: 94.2307692308%; padding: 18px 0 18px; } } .daresugugift__brand .aboutlogo .p-accordion-contents .buttons .p-button p span { font-size: 10px; } .daresugugift__brand .aboutlogo__concept { margin-top: 160px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo__concept { margin-top: 80px; } } .daresugugift__brand .aboutlogo__concept .image-area { background: #fff; padding: 50px; padding-left: 14.7569444444%; padding-right: 14.7569444444%; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo__concept .image-area { padding-left: 6.4%; padding-right: 6.4%; } } .daresugugift__brand .aboutlogo__concept .copy { font-size: 32px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #262626; line-height: 1.25; text-align: center; margin-top: 80px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo__concept .copy { font-size: 4.2666666667vw; width: 84%; margin: 32px auto 0; } } .daresugugift__brand .aboutlogo__symbol { margin-top: 160px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo__symbol { margin-top: 40px; } } .daresugugift__brand .aboutlogo__symbol .image-area { padding: 80px; padding-left: 9.7222222222%; padding-right: 9.7222222222%; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo__symbol .image-area { padding: 32px; padding-left: 6.4%; padding-right: 6.4%; } } .daresugugift__brand .aboutlogo__symbol .text-area .image-area { padding: 24px; padding-left: 7.8993055556%; padding-right: 7.8993055556%; } .daresugugift__brand .aboutlogo__logotype { margin-top: 160px; } @media all and (max-width: 768px) { .daresugugift__brand .aboutlogo__logotype { margin-top: 80px; } } .daresugugift__brand .aboutlogo__logotype .text-area .image-area { padding: 40px; padding-left: 3.7326388889%; padding-right: 3.7326388889%; } .company__menu { padding-top: 0; } @media all and (max-width: 768px) { .company__menu { padding-bottom: 80px; } } .company__brand { padding-top: 80px; padding-bottom: 80px; } @media all and (max-width: 768px) { .company__brand { padding-top: 0; padding-bottom: 80px; } } .company__brand .brandmovie { display: flex; } @media all and (max-width: 768px) { .company__brand .brandmovie { flex-direction: column; } } .company__brand .brandmovie .text-area { width: 43.0555555556%; } @media all and (max-width: 768px) { .company__brand .brandmovie .text-area { width: 84%; margin: 0 auto; } } .company__brand .brandmovie .text-area h3 { margin-bottom: 64px; } .company__brand .brandmovie .text-area h2 { margin-bottom: 32px; } @media all and (max-width: 768px) { .company__brand .brandmovie .text-area h2 { margin-bottom: 0; } } .company__brand .brandmovie .image-area { position: relative; } @media all and (min-width: 769px) { .company__brand .brandmovie .image-area { width: 50%; margin-top: 100px; margin-left: auto; } } @media all and (max-width: 768px) { .company__brand .brandmovie .image-area { width: 100%; margin-top: 32px; margin-bottom: 32px; } } .company__brand .brandmovie .image-area video { width: 100%; } @media all and (max-width: 768px) { .company__brand .brandmovie .image-area p { width: 84%; margin: 32px auto 0; font-size: 3.7333333333vw; line-height: 1.8; } } .company__group { padding-top: 80px; } @media all and (max-width: 768px) { .company__group { padding-top: 0; padding-bottom: 80px; } } .company__group .groupblock { display: flex; flex-direction: row-reverse; flex-wrap: wrap; } @media all and (max-width: 768px) { .company__group .groupblock { flex-direction: column; width: 84%; margin: 0 auto; } } .company__group .groupblock > h3 { width: 100%; margin-bottom: 64px; } @media all and (min-width: 769px) { .company__group .groupblock .text-area { width: 50%; } } @media all and (max-width: 768px) { .company__group .groupblock .text-area { display: contents; } } .company__group .groupblock .text-area h2 { margin-bottom: 32px; } .company__group .groupblock .text-area .buttons { margin-top: 64px; } @media all and (max-width: 768px) { .company__group .groupblock .text-area .buttons { order: 1; margin-top: 40px; } } .company__group .groupblock .image-area { width: 43.0555555556%; position: relative; margin-right: auto; } @media all and (max-width: 768px) { .company__group .groupblock .image-area { width: 100%; margin-top: 32px; } } .company__group .groupblock .image-area img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } @media all and (max-width: 768px) { .company__related { padding-top: 80px; padding-bottom: 80px; } } .company__related h3 { width: 100%; margin-bottom: 64px; } @media all and (max-width: 768px) { .company__related h3 { width: 84%; margin: 0 auto 48px; } } .profile__contents { overflow: hidden; } @media all and (max-width: 768px) { .profile__contents { padding-top: 80px; padding-bottom: 80px; } } @media all and (min-width: 769px) { .profile__contents .image-area { margin-right: calc((100vw - 100%) / 2 * -1); } } @media all and (max-width: 768px) { .profile__contents .image-area { padding: 0; width: 100%; } } .profile__contents .image-area img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .profile__contents .dl-table { border-top: 1px solid #e5e5e5; } @media all and (min-width: 769px) { .profile__contents .dl-table { width: 83.3333333333%; margin: 80px auto; } } @media all and (max-width: 768px) { .profile__contents .dl-table { width: 84%; margin: 40px auto 0; } } .profile__contents .dl-table dl { display: flex; font-size: 18px; line-height: 2; padding: 32px 0; border-bottom: 1px solid #e5e5e5; } @media all and (max-width: 768px) { .profile__contents .dl-table dl { font-size: 3.7333333333vw; } } .profile__contents .dl-table dl dt { width: 16.6666666667%; flex-shrink: 0; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .profile__contents .dl-table dl dt { width: 25.3968253968%; } } .profile__contents .dl-table dl dd { padding-left: 8.3333333333%; } @media all and (max-width: 768px) { .profile__contents .dl-table dl dd { padding-left: 5.0793650794%; } } .profile__contents .dl-table dl dd a { text-decoration: underline; } .profile__contents .dl-table dl dd a:hover { text-decoration: none; } .profile__access { padding-top: 0; padding-bottom: 0; } .profile__access h3 { margin-bottom: 64px; } @media all and (max-width: 768px) { .profile__access h3 { width: 84%; margin: 0 auto 48px; } } .member .memberlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px 40px; margin-top: 64px; } @media all and (max-width: 768px) { .member .memberlist { margin-top: 48px; grid-template-columns: repeat(2, 1fr); gap: 48px 16px; } } .member .memberblock { border-bottom: 1px solid #4060ff; padding-bottom: 24px; } .member .memberblock__profile .image-area { margin-bottom: 24px; } @media all and (max-width: 768px) { .member .memberblock__profile .image-area { margin-bottom: 16px; } } .member .memberblock__profile .image-area .img img { width: 100%; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; } .member .memberblock__profile .text-area h2 { font-size: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .member .memberblock__profile .text-area h2 { font-size: 4.2666666667vw; } } .member .memberblock__profile .text-area .position { font-size: 14px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; margin-top: 8px; } @media all and (max-width: 768px) { .member .memberblock__profile .text-area .position { font-size: 2.9333333333vw; margin-top: 4px; } } .member .memberblock__text { font-size: 16px; line-height: 2; margin-top: 24px; } @media all and (max-width: 768px) { .member .memberblock__text { font-size: 3.2vw; margin-top: 16px; } } .member__executives { padding-top: 80px; padding-bottom: 80px; } @media all and (max-width: 768px) { .member__executives { width: 84%; margin: 0 auto; padding-bottom: 40px; } } .member__executives .memberlist { grid-template-columns: repeat(3, 1fr); gap: 60px; } @media all and (max-width: 768px) { .member__executives .memberlist { grid-template-columns: repeat(1, 1fr); gap: 48px; } } .member__executives .memberblock { padding-bottom: 48px; } @media all and (max-width: 768px) { .member__executives .memberblock { padding-bottom: 24px; } } @media all and (max-width: 768px) { .member__executives .memberblock__profile { display: flex; } } .member__executives .memberblock__profile .image-area { margin-bottom: 48px; } @media all and (max-width: 768px) { .member__executives .memberblock__profile .image-area { width: 46.6666666667%; flex-shrink: 0; margin-bottom: 0; } } @media all and (max-width: 768px) { .member__executives .memberblock__profile .text-area { flex: 1; padding-left: 5.3968253968%; } } .member__executives .memberblock__profile .text-area h2 { font-size: 32px; } @media all and (max-width: 768px) { .member__executives .memberblock__profile .text-area h2 { font-size: 5.3333333333vw; } } .member__executives .memberblock__profile .text-area h2 span { font-size: 16px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #999999; display: block; } @media all and (max-width: 768px) { .member__executives .memberblock__profile .text-area h2 span { font-size: 2.6666666667vw; } } .member__executives .memberblock__profile .text-area .position { font-size: 18px; margin-top: 24px; } @media all and (max-width: 768px) { .member__executives .memberblock__profile .text-area .position { font-size: 3.2vw; margin-top: 16px; } } .member__executives .memberblock__text { font-size: 18px; margin-top: 48px; } @media all and (max-width: 768px) { .member__executives .memberblock__text { font-size: 3.7333333333vw; margin-top: 24px; } } .member__members { padding-top: 80px; padding-bottom: 80px; } @media all and (max-width: 768px) { .member__members { width: 84%; margin: 0 auto; padding-top: 40px; padding-bottom: 40px; } } .member__audit { padding-top: 80px; padding-bottom: 80px; } @media all and (max-width: 768px) { .member__audit { width: 84%; margin: 0 auto; padding-top: 40px; padding-bottom: 40px; } } .history__contents { padding-top: 80px; padding-bottom: 80px; } @media all and (max-width: 768px) { .history__contents { padding-top: 80px; padding-bottom: 0; } } .history__contents .dl-table { border-top: 1px solid #e5e5e5; } @media all and (min-width: 769px) { .history__contents .dl-table { width: 83.3333333333%; margin: 0 auto; } } @media all and (max-width: 768px) { .history__contents .dl-table { width: 84%; margin: 0 auto; } } .history__contents .dl-table > dl { padding: 32px 0; border-bottom: 1px solid #e5e5e5; } @media all and (max-width: 768px) { .history__contents .dl-table > dl { padding: 28px 0; } } .history__contents .dl-table > dl > dt { width: 80px; } @media all and (max-width: 768px) { .history__contents .dl-table > dl > dt { width: 20.3174603175%; } } .history__contents .dl-table > dl > dd dl dt { width: 18.1818181818%; } .history__contents .dl-table > dl > dd dl + dl { margin-top: 32px; } @media all and (max-width: 768px) { .history__contents .dl-table > dl > dd dl + dl { margin-top: 24px; } } .history__contents .dl-table dl { display: flex; font-size: 18px; line-height: 2; } @media all and (max-width: 768px) { .history__contents .dl-table dl { font-size: 3.7333333333vw; } } .history__contents .dl-table dl dt { flex-shrink: 0; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } .history__contents .dl-table dl dd { flex: 1; } .history__contents .dl-table dl dd a { text-decoration: underline; } .history__contents .dl-table dl dd a:hover { text-decoration: none; } .contact .l-section { padding: 80px 0; } .contact__lead p { line-height: 2; } @media all and (min-width: 769px) { .contact__lead { display: flex; padding-bottom: 80px; } } @media all and (max-width: 768px) { .contact__lead { width: 84%; margin: 0 auto; padding-bottom: 40px; } } .contact__lead .p-button { margin-left: auto; display: inline-block; padding-right: 84px; } @media all and (min-width: 769px) { .contact__lead .p-button { padding-top: 16px; padding-bottom: 16px; } } @media all and (max-width: 768px) { .contact__lead .p-button { margin-top: 24px; padding-top: 3.8095238095%; padding-bottom: 3.8095238095%; } } .contact__form { background: rgba(255, 255, 255, 0.5); } @media all and (min-width: 769px) { .contact__form { padding: 80px 96px; } } @media all and (max-width: 768px) { .contact__form { padding: 40px 32px; } } .contact__form .contact_box .wpcf7-response-output { color: #db305e; text-align: center; margin-bottom: 32px; font-size: 18px; } @media all and (max-width: 768px) { .contact__form .contact_box .wpcf7-response-output { font-size: 16px; } } .contact__form .contact_box .contact_bt .wpcf7-response-output { margin-top: 32px; margin-bottom: 0; } .contact__form .contact_box .form_block { display: flex; align-items: center; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-top: -1px; padding: 32px 0; } @media all and (max-width: 768px) { .contact__form .contact_box .form_block { display: block; } } .contact__form .contact_box .form_block > label { display: flex; align-items: center; width: 100%; } @media all and (max-width: 768px) { .contact__form .contact_box .form_block > label { display: block; } } .contact__form .contact_box .form_block .contact_title { display: flex; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .contact__form .contact_box .form_block .contact_title { font-size: 18px; flex-direction: column; flex: 0 0 240px; padding-right: 24px; align-items: flex-start; } } @media all and (max-width: 768px) { .contact__form .contact_box .form_block .contact_title { font-size: 16px; flex: 0 0 240px; padding-right: 24px; align-items: center; margin-bottom: 16px; } } .contact__form .contact_box .form_block .contact_title .compulsory { line-height: 1; color: #db305e; border: 1px solid #db305e; display: inline-flex; align-items: center; border-radius: 3px; } @media all and (min-width: 769px) { .contact__form .contact_box .form_block .contact_title .compulsory { margin-top: 6px; height: 24px; font-size: 11px; padding: 0 16px; } } @media all and (max-width: 768px) { .contact__form .contact_box .form_block .contact_title .compulsory { height: 20px; font-size: 10px; padding: 0 8px; margin-left: 8px; } } @media all and (min-width: 769px) { .contact__form .contact_box .form_block .contact_input { padding-left: 24px; flex: 1; } } .contact__form .contact_box .form_block .contact_input [role=alert], .contact__form .contact_box .form_block .contact_input .wpcf7-not-valid-tip { color: #db305e; display: block; margin-top: 16px; } .contact__form .contact_box .form_block .contact_input [data-class=wpcf7cf_group], .contact__form .contact_box .form_block .contact_input .wpcf7cf_remove, .contact__form .contact_box .form_block .contact_input .wpcf7cf_add { display: none; padding-left: 44px; } @media all and (min-width: 769px) { .contact__form .contact_box .form_block .contact_input [data-class=wpcf7cf_group], .contact__form .contact_box .form_block .contact_input .wpcf7cf_remove, .contact__form .contact_box .form_block .contact_input .wpcf7cf_add { margin-bottom: 24px; } } @media all and (max-width: 768px) { .contact__form .contact_box .form_block .contact_input [data-class=wpcf7cf_group], .contact__form .contact_box .form_block .contact_input .wpcf7cf_remove, .contact__form .contact_box .form_block .contact_input .wpcf7cf_add { margin-top: 16px; } } .contact__form .contact_box .form_block .contact_input .wpcf7-form-control-wrap { display: block; } .contact__form .contact_box .form_block .contact_input .wpcf7-form-control-wrap .wpcf7-form-control { display: block; } .contact__form .contact_box .form_block .contact_input .wpcf7-form-control-wrap [class*=-check] { display: block; } @media all and (max-width: 768px) { .contact__form .contact_box .form_block .contact_input .wpcf7-form-control-wrap [class*=-check] { margin-top: 32px; } } @media all and (min-width: 769px) { .contact__form .contact_box .form_block .contact_input .wpcf7-list-item { display: block; margin: 32px 0; } } @media all and (max-width: 768px) { .contact__form .contact_box .form_block .contact_input .wpcf7-list-item { display: block; margin-top: 32px; } } .contact__form .contact_box .form_block .contact_input [data-class=wpcf7cf_group] .wpcf7-form-control-wrap { margin-top: 12px; display: block; } .contact__form .contact_box .form_block .contact_input label { position: relative; display: flex; } .contact__form .contact_box .form_block .contact_input input[type=text], .contact__form .contact_box .form_block .contact_input input[type=tel], .contact__form .contact_box .form_block .contact_input input[type=email], .contact__form .contact_box .form_block .contact_input input[type=url], .contact__form .contact_box .form_block .contact_input input[type=password], .contact__form .contact_box .form_block .contact_input input[type=text], .contact__form .contact_box .form_block .contact_input textarea, .contact__form .contact_box .form_block .contact_input .wpcf7-text { width: 100%; border: 1px solid #e5e5e5; background: #fff; padding: 12px 16px; border-radius: 3px; } .contact__form .contact_box .form_block .contact_input input[type=tel] { max-width: 360px; } .contact__form .contact_box .form_block .contact_input input[type=checkbox], .contact__form .contact_box .form_block .contact_input input[type=radio] { display: inline-block; border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } .contact__form .contact_box .form_block .contact_input input[type=checkbox] + span, .contact__form .contact_box .form_block .contact_input input[type=radio] + span { padding-left: 44px; } @media all and (min-width: 769px) { .contact__form .contact_box .form_block .contact_input input[type=checkbox] + span, .contact__form .contact_box .form_block .contact_input input[type=radio] + span { margin-right: 64px; } } .contact__form .contact_box .form_block .contact_input input[type=checkbox] + span::before, .contact__form .contact_box .form_block .contact_input input[type=radio] + span::before { content: ""; display: block; width: 32px; height: 32px; margin-top: -16px; position: absolute; top: 50%; left: 0; border: 1px solid #e5e5e5; background: #fff; } .contact__form .contact_box .form_block .contact_input input[type=checkbox] + span:after, .contact__form .contact_box .form_block .contact_input input[type=radio] + span:after { content: ""; display: block; position: absolute; top: 50%; -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .contact__form .contact_box .form_block .contact_input input[type=checkbox] + span::before { border-radius: 3px; } .contact__form .contact_box .form_block .contact_input input[type=checkbox] + span:after { width: 12px; height: 6px; left: 10px; margin-top: -6px; border-bottom: 3px solid #4060ff; border-left: 3px solid #4060ff; opacity: 0; transform: scale(0.5) rotate(-45deg); } .contact__form .contact_box .form_block .contact_input input[type=checkbox]:checked + span:after { opacity: 1; transform: scale(1) rotate(-45deg); } .contact__form .contact_box .form_block .contact_input input[type=radio] + span::before { border-radius: 50%; } .contact__form .contact_box .form_block .contact_input input[type=radio] + span:after { width: 16px; height: 16px; border-radius: 50%; left: 9px; margin-top: -7px; background: #4060ff; opacity: 0; transform: scale(0.5); } .contact__form .contact_box .form_block .contact_input input[type=radio]:checked + span:after { opacity: 1; transform: scale(1); } .contact__form .contact_box .form_block .contact_input .know-check-text ~ .wpcf7-form-control-wrap .wpcf7-list-item-label { margin-right: 0; } .contact__form .contact_box [data-id=caution] { line-height: 2; } @media all and (min-width: 769px) { .contact__form .contact_box [data-id=caution] { padding-top: 64px; text-align: center; font-size: 16px; } } @media all and (max-width: 768px) { .contact__form .contact_box [data-id=caution] { padding-top: 40px; font-size: 14px; } } @media all and (min-width: 769px) { .contact__form .contact_box [data-id=caution] + .contact_bt { padding-top: 32px; } } @media all and (max-width: 768px) { .contact__form .contact_box [data-id=caution] + .contact_bt { padding-top: 24px; } } .contact__form .contact_box .contact_bt { text-align: center; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .contact__form .contact_box .contact_bt { padding-top: 64px; } } @media all and (max-width: 768px) { .contact__form .contact_box .contact_bt { padding-top: 40px; } } .contact__form .contact_box .contact_bt a { color: #4060ff; text-decoration: underline; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } .contact__form .contact_box .contact_bt a:hover { text-decoration: none; } .contact__form .contact_box .contact_bt p { margin-top: 32px; } .contact__form .contact_box .contact_bt input[type=submit] { border: 1px solid #4060ff; color: #4060ff; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .contact__form .contact_box .contact_bt input[type=submit] { width: 240px; height: 64px; border-radius: 32px; font-size: 18px; } } @media all and (max-width: 768px) { .contact__form .contact_box .contact_bt input[type=submit] { width: 180px; height: 48px; border-radius: 24px; font-size: 16px; } } .contact #modal-contact .modal__content dl { display: flex; align-items: center; background: #f5f7ff; margin-top: 8px; padding: 32px 40px; } @media all and (max-width: 768px) { .contact #modal-contact .modal__content dl { padding: 16px; min-height: 105px; } } .contact #modal-contact .modal__content dl dt { font-size: 24px; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4060ff; } @media all and (max-width: 768px) { .contact #modal-contact .modal__content dl dt { font-size: 20px; } } .contact #modal-contact .modal__content dl dt span { font-size: 20px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .contact #modal-contact .modal__content dl dt span { font-size: 18px; display: block; } } .contact #modal-contact .modal__content dl dd { margin-left: auto; } .contact #modal-contact .modal__content dl dd .p-button { padding-right: 72px; height: 52px; } @media all and (max-width: 768px) { .contact #modal-contact .modal__content dl dd .p-button { padding-right: 64px; height: 40px; } } .contact #modal-contact .modal__content dl dd .p-button::after { right: 24px; } .contact #modal-contact .modal__content dl dd .p-button p { font-size: 16px; } @media all and (max-width: 768px) { .contact #modal-contact .modal__content dl dd .p-button p { font-size: 14px; padding-left: 24px; } } .contact .screen-reader-response { display: inline-block; border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } .contact .wpcf7-display-none { display: none !important; } .contact .contact-note { max-width: 580px; margin: 40px auto 0; font-size: 14px; line-height: 1.75; } @media all and (max-width: 768px) { .contact .contact-note { font-size: 12px; } } .news .l-section { padding-top: 80px; } @media all and (max-width: 768px) { .news .l-section { padding-bottom: 80px; } } .news__search { background: rgba(64, 96, 255, 0.05); padding: 32px 40px; margin-bottom: 80px; display: flex; justify-content: space-between; } @media all and (max-width: 768px) { .news__search { margin-bottom: 32px; padding: 32px 7.619047619%; } } .news__search label { font-size: 18px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; color: #4060ff; display: flex; align-items: center; } @media all and (max-width: 992px) { .news__search label { font-size: 16px; } } @media all and (max-width: 768px) { .news__search label { font-size: 3.2vw; } } .news__search label img { margin-right: 8px; } @media all and (max-width: 992px) { .news__search label img { width: 28px; } } @media all and (max-width: 768px) { .news__search label img { width: 20px; } } .news__search .select { position: relative; } .news__search .select::after { content: ""; display: block; width: 12px; height: 8px; position: absolute; top: 50%; right: 20px; background: url('data:image/svg+xml,') no-repeat; transform: translate(0, -50%) rotate(180deg); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news__search .select select { width: 100%; appearance: none; border: 1px solid #e5e5e5; background: #fff; color: #262626; border-radius: 4px; padding: 16px 40px 16px 16px; } @media all and (max-width: 768px) { .news__search .select select { padding: 12px 40px 12px 16px; } } .news__search .category { width: 46.2686567164%; display: flex; } @media all and (max-width: 1240px) { .news__search .category { width: 55%; } } @media all and (max-width: 768px) { .news__search .category { flex: 0 0 58.7301587302%; flex-direction: column; } } .news__search .category label { flex: 0 0 164px; } @media all and (max-width: 1240px) { .news__search .category label { flex: 0 0 auto; margin-right: 20px; } } @media all and (max-width: 768px) { .news__search .category label { flex: 0 0 auto; margin-bottom: 8px; margin-right: 0; } } .news__search .category .select { flex: 1; } .news__search .year { width: 46.2686567164%; display: flex; } @media all and (max-width: 1240px) { .news__search .year { width: 40%; } } @media all and (max-width: 768px) { .news__search .year { flex: 0 0 36.5079365079%; flex-direction: column; } } .news__search .year label { flex: 0 0 164px; } @media all and (max-width: 1240px) { .news__search .year label { flex: 0 0 auto; margin-right: 20px; } } @media all and (max-width: 768px) { .news__search .year label { flex: 0 0 auto; margin-bottom: 8px; margin-right: 0; } } .news__search .year .select { flex: 1; } .news .newslist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media all and (max-width: 992px) { .news .newslist { grid-template-columns: repeat(2, 1fr); } } @media all and (max-width: 768px) { .news .newslist { width: 84%; margin: 0 auto; grid-template-columns: repeat(1, 1fr); gap: 16px; } } .news .newslist .newscard { background: #fff; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; display: flex; flex-direction: column; height: 100%; position: relative; } .news .newslist .newscard__meta { background: #f5f7ff; padding: 16px; display: flex; align-items: center; justify-content: space-between; } @media all and (max-width: 768px) { .news .newslist .newscard__meta { padding: 8px; } } .news .newslist .newscard__meta .category { font-size: 12px; line-height: 1; background: #4060ff; color: #fff; border-radius: 4px; width: 120px; height: 28px; display: inline-flex; align-items: center; justify-content: center; } @media all and (max-width: 768px) { .news .newslist .newscard__meta .category { font-size: 10px; width: 96px; height: 20px; } } .news .newslist .newscard__meta .category.-press { background: #00abdc; } .news .newslist .newscard__meta .category.-info { background: #257df0; } .news .newslist .newscard__meta .category.-media { background: #5f57d9; } .news .newslist .newscard__meta .date { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media all and (max-width: 768px) { .news .newslist .newscard__meta .date { font-size: 14px; } } .news .newslist .newscard__body { padding: 24px 32px; display: flex; flex-direction: column; height: 100%; word-break: break-word; } @media all and (max-width: 768px) { .news .newslist .newscard__body { padding: 16px 24px; } } .news .newslist .newscard__body .title { font-size: 18px; line-height: 1.5; margin-bottom: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .news .newslist .newscard__body .title { font-size: 3.7333333333vw; } } .news .newslist .newscard__body .title a { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } .news .newslist .newscard__body .title a:hover { color: #4060ff; } .news .newslist .newscard__body .title a::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .news .newslist .newscard__body .text { margin-top: auto; font-size: 16px; line-height: 1.5; color: #999999; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media all and (max-width: 768px) { .news .newslist .newscard__body .text { font-size: 3.2vw; } } .news__article article { padding: 80px; background: rgba(255, 255, 255, 0.5); } @media all and (max-width: 768px) { .news__article article { padding: 40px 8.5333333333%; } } .news__article article .article__contents { max-width: 720px; margin: 0 auto; } @media all and (max-width: 768px) { .news__article article .article__contents { font-size: 3.2vw; } } .news__article article header { margin-bottom: 80px; } @media all and (max-width: 768px) { .news__article article header { margin-bottom: 40px; } } .news__article article header .article__meta { display: flex; align-items: center; margin-bottom: 28px; } @media all and (max-width: 768px) { .news__article article header .article__meta { margin-bottom: 16px; } } .news__article article header .article__meta .category { font-size: 12px; line-height: 1; background: #4060ff; color: #fff; border-radius: 4px; width: 120px; height: 28px; display: inline-flex; align-items: center; justify-content: center; margin-right: 32px; } @media all and (max-width: 768px) { .news__article article header .article__meta .category { font-size: 10px; width: 96px; height: 20px; } } .news__article article header .article__meta .category.-press { background: #00abdc; } .news__article article header .article__meta .category.-info { background: #257df0; } .news__article article header .article__meta .category.-media { background: #5f57d9; } .news__article article header .article__meta .date { font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media all and (max-width: 768px) { .news__article article header .article__meta .date { font-size: 14px; } } .news__article article header h1 { font-size: 32px; line-height: 1.25; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .news__article article header h1 { font-size: 5.3333333333vw; } } .news__article article .entry-content img { width: auto; max-width: 100%; } .news__article article .entry-content a { color: #4060ff; text-decoration: underline; } .news__article article .entry-content a:hover { text-decoration: none; } .news__article article .sharebtn { display: flex; justify-content: center; border-top: 1px solid rgba(38, 38, 38, 0.1); margin-top: 80px; padding-top: 32px; } .news__article article .sharebtn__icon { position: relative; width: 48px; padding-top: 48px; line-height: 0; margin: 0 8px; } .news__article article .sharebtn__icon::before { content: ""; border: 1px solid #262626; width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ } .news__article article .sharebtn__icon svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media all and (min-width: 769px) { .news__article article .sharebtn__icon:hover::before { transform: translate(-50%, -50%) scale(1.1); } } .news__article article .sharebtn__icon.tw svg { width: 58.3333333333%; } .news__article article .sharebtn__icon.fb svg { width: 18.75%; } .news__article article .sharebtn__icon.line svg { width: 56.25%; } .news__article .articlenav { display: flex; justify-content: center; margin-top: 40px; line-height: 1; } @media all and (max-width: 768px) { .news__article .articlenav { flex-wrap: wrap; font-size: 3.2vw; } } .news__article .articlenav .back { display: flex; align-items: center; } @media all and (max-width: 768px) { .news__article .articlenav .back { order: 1; margin-top: 24px; flex: 0 0 100%; display: flex; justify-content: center; } } .news__article .articlenav .back a { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (min-width: 769px) { .news__article .articlenav .back a { border-left: 1px solid rgba(38, 38, 38, 0.3); border-right: 1px solid rgba(38, 38, 38, 0.3); margin: 0 32px; padding: 0 32px; } } @media all and (max-width: 768px) { .news__article .articlenav .back a::before { content: ""; display: inline-block; width: 10px; padding-top: 10px; transform: rotate(180deg); margin-right: 10px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.667%2014.495%22%3E%20%3Cline%20x2%3D%2211.667%22%20transform%3D%22translate(1%207.248)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M12%2C5l5.833%2C5.833L12%2C16.667%22%20transform%3D%22translate(-5.167%20-3.586)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } } .news__article .articlenav .prev a, .news__article .articlenav .next a { display: flex; align-items: center; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } .news__article .articlenav .prev a:hover span, .news__article .articlenav .next a:hover span { transform: scale(1.1); } .news__article .articlenav .prev a span, .news__article .articlenav .next a span { -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1) 0ms; /* older webkit */ -webkit-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -ms-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; transition: all 380ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; /* easeOutBack */ display: inline-block; width: 48px; height: 48px; position: relative; border: 1px solid #262626; border-radius: 50%; } .news__article .articlenav .prev a span::after, .news__article .articlenav .next a span::after { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; width: 12px; padding-top: 12px; } @media all and (max-width: 768px) { .news__article .articlenav .prev a span::after, .news__article .articlenav .next a span::after { width: 10px; padding-top: 10px; } } @media all and (max-width: 768px) { .news__article .articlenav .prev a::after { content: ""; width: 32px; height: 16px; border-right: 1px solid rgba(38, 38, 38, 0.3); margin-right: 32px; } } .news__article .articlenav .prev a span { margin-right: 10px; } .news__article .articlenav .prev a span::after { transform: translate(-50%, -50%) rotate(180deg); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.667%2014.495%22%3E%20%3Cline%20x2%3D%2211.667%22%20transform%3D%22translate(1%207.248)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M12%2C5l5.833%2C5.833L12%2C16.667%22%20transform%3D%22translate(-5.167%20-3.586)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } .news__article .articlenav .next a span { margin-left: 10px; } .news__article .articlenav .next a span::after { transform: translate(-50%, -50%); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.667%2014.495%22%3E%20%3Cline%20x2%3D%2211.667%22%20transform%3D%22translate(1%207.248)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M12%2C5l5.833%2C5.833L12%2C16.667%22%20transform%3D%22translate(-5.167%20-3.586)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } #recruit { background: rgba(64, 96, 255, 0.05); } @media all and (min-width: 769px) { #recruit { padding: 170px 0 160px; } } @media all and (max-width: 768px) { #recruit { padding: 21.3333333333% 0; } } #recruit .text-area { display: flex; justify-content: space-between; align-items: center; } @media all and (max-width: 768px) { #recruit .text-area { display: block; width: 84%; margin: 0 auto; } } #recruit .text__body { flex-grow: 1; width: 64.2361111111%; } @media all and (max-width: 768px) { #recruit .text__body { width: 100%; } } #recruit .text__body h2 { font-size: 32px; } @media all and (max-width: 768px) { #recruit .text__body h2 { font-size: 6.4vw; } } #recruit .text__body p { margin-top: 2.7027027027%; font-size: 18px; } @media all and (max-width: 768px) { #recruit .text__body p { font-size: 4.2666666667vw; margin-top: 7.619047619%; } } #recruit .button-area { width: 320px; } @media all and (max-width: 768px) { #recruit .button-area { width: 100%; } } #recruit .p-button { width: 100%; display: flex; align-items: center; padding: 7.5% 0 7.1875%; } @media all and (max-width: 768px) { #recruit .p-button { width: 76.1904761905%; max-width: none; margin-top: 15.873015873%; padding: 5.3968253968% 0; } } #recruit .p-button p { padding-left: 4.1666666667%; } @media all and (min-width: 769px) { #recruit .p-button p { font-size: 20px; } } @media all and (max-width: 768px) { #recruit .p-button p { font-size: 4.2666666667vw; } } #recruit .p-button svg { width: 8.75%; position: relative; padding-left: 13.75%; } @media all and (max-width: 768px) { #recruit .p-button svg { width: 8.3333333333%; padding-left: 14.5833333333%; } } @media all and (min-width: 769px) { #recruit .p-button:hover svg { stroke: #fff; } } .privacy .l-section { padding: 80px 0 160px; } .privacy__contents { background: rgba(255, 255, 255, 0.5); padding: 40px 0; } .privacy__block { max-width: 960px; margin: 0 auto; } @media all and (max-width: 768px) { .privacy__block { width: 84%; margin: 0 auto; } } .privacy__block:not(:last-child) { margin-bottom: 80px; } @media all and (max-width: 768px) { .privacy__block:not(:last-child) { margin-bottom: 40px; } } .privacy__block h2 { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; font-size: 18px; border-left: 1px solid #4060ff; padding-left: 16px; margin-bottom: 32px; } @media all and (max-width: 768px) { .privacy__block h2 { margin-bottom: 16px; font-size: 4.2666666667vw; } } .privacy__block p, .privacy__block ul { font-size: 18px; line-height: 2; } @media all and (max-width: 768px) { .privacy__block p, .privacy__block ul { font-size: 3.7333333333vw; } } .privacy__block p a, .privacy__block ul a { color: #4060ff; text-decoration: underline; } .privacy__block p a:hover, .privacy__block ul a:hover { text-decoration: none; } .privacy__block ul li { margin-top: 4px; padding-left: 1.125em; position: relative; } .privacy__block ul li::before { content: "・"; display: block; position: absolute; top: 0; left: 0; } .modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background: rgba(29, 25, 25, 0.8); display: flex; justify-content: center; align-items: center; } .modal__container { background-color: #fff; padding: 40px; width: 640px; max-height: 100vh; overflow-y: auto; box-sizing: border-box; margin: 0 16px; } @media all and (max-width: 768px) { .modal__container { padding: 24px; width: 640px; } } .modal__close { background: transparent; border: 0; } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmslideIn { from { transform: translateY(15%); } to { transform: translateY(0); } } @keyframes mmslideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } } .micromodal-slide { display: none; } .micromodal-slide.-open { display: block; } .micromodal-slide[aria-hidden=false] .modal__overlay { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide[aria-hidden=false] .modal__container { animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide[aria-hidden=true] .modal__overlay { animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide[aria-hidden=true] .modal__container { animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide .modal__container, .micromodal-slide .modal__overlay { will-change: transform; } .modal__header .modal__title h2 { font-size: 24px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .modal__header .modal__title h2 { font-size: 20px; } } .modal__header .modal__title p { margin-top: 8px; font-size: 14px; color: #999999; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; } @media all and (max-width: 768px) { .modal__header .modal__title p { font-size: 12px; } } .modal__header .modal__close { position: absolute; top: 8px; right: 8px; } .modal__header .modal__close::before, .modal__header .modal__close:after { content: ""; display: block; height: 2px; background: #262626; position: absolute; } .modal__header .modal__close::before { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .modal__header .modal__close:after { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); } @media all and (min-width: 769px) { .modal__header .modal__close { width: 48px; height: 48px; } .modal__header .modal__close::before, .modal__header .modal__close:after { width: 40px; } } @media all and (max-width: 768px) { .modal__header .modal__close { width: 32px; height: 32px; } .modal__header .modal__close::before, .modal__header .modal__close:after { width: 24px; } } .wysiwyg { line-height: 2; } .wysiwyg a { text-decoration: none; } .wysiwyg a:hover { border-bottom: 1px solid; } .wysiwyg abbr { border-bottom: 1px dotted; cursor: help; } .wysiwyg cite { font-style: italic; } .wysiwyg hr { background: #e6e6e6; border: none; display: block; height: 1px; margin-bottom: 1.4em; margin-top: 1.4em; } .wysiwyg img { vertical-align: text-bottom; } .wysiwyg ins { background-color: lime; text-decoration: none; } .wysiwyg mark { background-color: #ff0; } .wysiwyg small { font-size: 0.8em; } .wysiwyg strong { font-weight: 700; } .wysiwyg sub, .wysiwyg sup { font-size: 0.8em; } .wysiwyg sub { vertical-align: sub; } .wysiwyg sup { vertical-align: super; } .wysiwyg p, .wysiwyg dl, .wysiwyg ol, .wysiwyg ul, .wysiwyg blockquote, .wysiwyg pre, .wysiwyg table { margin-bottom: 1.4em; } .wysiwyg p:last-child, .wysiwyg dl:last-child, .wysiwyg ol:last-child, .wysiwyg ul:last-child, .wysiwyg blockquote:last-child, .wysiwyg pre:last-child, .wysiwyg table:last-child { margin-bottom: 0; } .wysiwyg p:empty { display: none; } .wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5, .wysiwyg h6 { font-weight: 700; line-height: 1.2; } .wysiwyg h1:first-child, .wysiwyg h2:first-child, .wysiwyg h3:first-child, .wysiwyg h4:first-child, .wysiwyg h5:first-child, .wysiwyg h6:first-child { margin-top: 0; } .wysiwyg h1 { font-size: 2.4em; margin-bottom: 0.58333em; margin-top: 0.58333em; line-height: 1; } .wysiwyg h2 { font-size: 1.6em; margin-bottom: 0.875em; margin-top: 1.75em; line-height: 1.1; } .wysiwyg h3 { font-size: 1.3em; margin-bottom: 1.07692em; margin-top: 1.07692em; } .wysiwyg h4 { font-size: 1.2em; margin-bottom: 1.16667em; margin-top: 1.16667em; } .wysiwyg h5 { font-size: 1.1em; margin-bottom: 1.27273em; margin-top: 1.27273em; } .wysiwyg h6 { font-size: 1em; margin-bottom: 1.4em; margin-top: 1.4em; } .wysiwyg dd { margin-left: 1.4em; } .wysiwyg ol, .wysiwyg ul { list-style-position: outside; margin-left: 1.4em; } .wysiwyg ol { list-style-type: decimal; } .wysiwyg ol ol { list-style-type: lower-alpha; } .wysiwyg ol ol ol { list-style-type: lower-roman; } .wysiwyg ol ol ol ol { list-style-type: lower-greek; } .wysiwyg ol ol ol ol ol { list-style-type: decimal; } .wysiwyg ol ol ol ol ol ol { list-style-type: lower-alpha; } .wysiwyg ul { list-style-type: disc; } .wysiwyg ul ul { list-style-type: circle; } .wysiwyg ul ul ul { list-style-type: square; } .wysiwyg ul ul ul ul { list-style-type: circle; } .wysiwyg ul ul ul ul ul { list-style-type: disc; } .wysiwyg ul ul ul ul ul ul { list-style-type: circle; } .wysiwyg blockquote { border-left: 4px solid #e6e6e6; padding: 0.6em 1.2em; } .wysiwyg blockquote p { margin-bottom: 0; } .wysiwyg code, .wysiwyg kbd, .wysiwyg samp, .wysiwyg pre { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; background-color: #f2f2f2; color: #333; font-size: 0.9em; } .wysiwyg code, .wysiwyg kbd, .wysiwyg samp { border-radius: 3px; line-height: 1.77778; padding: 0.1em 0.4em 0.2em; vertical-align: baseline; } .wysiwyg pre { overflow: auto; padding: 1em 1.2em; } .wysiwyg pre code { background: none; font-size: 1em; line-height: 1em; } .wysiwyg figure { margin-bottom: 2.8em; text-align: center; } .wysiwyg figure:first-child { margin-top: 0; } .wysiwyg figure:last-child { margin-bottom: 0; } .wysiwyg figcaption { font-size: 0.8em; margin-top: 0.875em; } .wysiwyg table { width: 100%; } .wysiwyg table pre { white-space: pre-wrap; } .wysiwyg th, .wysiwyg td { font-size: 1em; padding: 0.7em; border: 1px solid #e6e6e6; line-height: 1.4; } .wysiwyg thead tr, .wysiwyg tfoot tr { background-color: #f5f5f5; } .wysiwyg thead th, .wysiwyg thead td, .wysiwyg tfoot th, .wysiwyg tfoot td { font-size: 0.9em; padding: 0.77778em; } .wysiwyg thead th code, .wysiwyg thead td code, .wysiwyg tfoot th code, .wysiwyg tfoot td code { background-color: #fff; } .wysiwyg tbody tr { background-color: #fff; } .js-lazyclass.-fade { transform: translate(0, 10px); opacity: 0; -webkit-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -moz-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -ms-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; -o-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms; /* easeOutQuint */ } .js-lazyclass.-fade.appear { transform: translate(0, 0); opacity: 1; } .js-lazyclass.-fadedelay { transform: translate(0, 10px); opacity: 0; -webkit-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 600ms; -moz-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 600ms; -ms-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 600ms; -o-transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 600ms; transition: all 680ms cubic-bezier(0.215, 0.61, 0.355, 1) 600ms; /* easeOutQuint */ } .js-lazyclass.-fadedelay.appear { transform: translate(0, 0); opacity: 1; } .philosophy .l-headernavi > ul > li > [href="/philosophy/"], .philosophy .l-headernavi > ul > li > [href="/philosophy/"] > div { color: #4060ff; } .service .l-headernavi__service, .giftmall .l-headernavi__service, .service .l-headernavi__service > div, .giftmall .l-headernavi__service > div { color: #4060ff; } .partnership .l-headernavi__business, .interview .l-headernavi__business, .partnership .l-headernavi__business > div, .interview .l-headernavi__business > div { color: #4060ff; } .company .l-headernavi__company, .profile .l-headernavi__company, .member .l-headernavi__company, .history .l-headernavi__company, .company .l-headernavi__company > div, .profile .l-headernavi__company > div, .member .l-headernavi__company > div, .history .l-headernavi__company > div { color: #4060ff; } .news .l-headernavi__news, .news .l-headernavi__news > div { color: #4060ff; } .contact .l-headernavi__contact, .contact .l-headernavi__contact > div { color: #4060ff; } p.small { font-size: 14px; } @media all and (max-width: 768px) { p.small { font-size: 3.2vw; } } .pagebackbutton { padding: 0 0 80px; } .giftmall .pagebackbutton { padding-top: 160px; } @media all and (max-width: 768px) { .pagebackbutton { padding: 40px 0 40px; } .giftmall .pagebackbutton { padding-top: 80px; } } .pagebackbutton .p-button { width: 320px; margin: 0 auto; padding: 24px 0 24px; } @media all and (max-width: 768px) { .pagebackbutton .p-button { width: 76.1904761905%; margin: 0 auto; padding: 5.7142857143% 0 5.7142857143%; } } .pagebackbutton .p-button p { text-transform: capitalize; } .js-youtubethumb { cursor: pointer; } .js-youtubethumb:hover { opacity: 0.9; } .c-news-paging { padding-top: 40px; } .c-news-paging ul { display: flex; align-items: center; justify-content: center; font-family: "Lato", "Noto Sans JP", Hiragino Sans, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .c-news-paging ul li.c-news-paging__num a, .c-news-paging ul li.c-news-paging__num span { padding: 12px; opacity: 0.3; } @media all and (max-width: 768px) { .c-news-paging ul li.c-news-paging__num a, .c-news-paging ul li.c-news-paging__num span { padding: 10px; } } .c-news-paging ul li.c-news-paging__num a:hover, .c-news-paging ul li.c-news-paging__num.current span { opacity: 1; } .c-news-paging ul li.c-news-paging__prev, .c-news-paging ul li.c-news-paging__next { margin: 0 12px; } .c-news-paging ul li.c-news-paging__prev a, .c-news-paging ul li.c-news-paging__next a { display: block; width: 48px; height: 48px; border: 1px solid #262626; border-radius: 50%; position: relative; font-size: 0; transform: scale(1); -webkit-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 380ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media all and (max-width: 768px) { .c-news-paging ul li.c-news-paging__prev a, .c-news-paging ul li.c-news-paging__next a { width: 42px; height: 42px; } } @media all and (min-width: 769px) { .c-news-paging ul li.c-news-paging__prev a:hover, .c-news-paging ul li.c-news-paging__next a:hover { transform: scale(1.1); } } .c-news-paging ul li.c-news-paging__prev a::after, .c-news-paging ul li.c-news-paging__next a::after { content: ""; position: absolute; top: 50%; left: 50%; } .c-news-paging ul li.c-news-paging__prev a::after { width: 12px; padding-top: 12px; transform: translate(-50%, -50%) rotate(180deg); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.667%2014.495%22%3E%20%3Cline%20x2%3D%2211.667%22%20transform%3D%22translate(1%207.248)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M12%2C5l5.833%2C5.833L12%2C16.667%22%20transform%3D%22translate(-5.167%20-3.586)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } @media all and (max-width: 768px) { .c-news-paging ul li.c-news-paging__prev a::after { width: 10px; padding-top: 10px; } } .c-news-paging ul li.c-news-paging__next a::after { width: 12px; padding-top: 12px; transform: translate(-50%, -50%); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.667%2014.495%22%3E%20%3Cline%20x2%3D%2211.667%22%20transform%3D%22translate(1%207.248)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M12%2C5l5.833%2C5.833L12%2C16.667%22%20transform%3D%22translate(-5.167%20-3.586)%22%20fill%3D%22none%22%20stroke%3D%22%23262626%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } @media all and (max-width: 768px) { .c-news-paging ul li.c-news-paging__next a::after { width: 10px; padding-top: 10px; } } @media all and (max-width: 768px) { body.notfound .l-pagetitle h1 { margin-top: 40px; } } body.notfound .l-section { padding-top: 0; padding-bottom: 80px; } @media all and (max-width: 768px) { body.notfound .l-section { padding-top: 80px; padding-bottom: 40px; width: 84%; margin: 0 auto; } } body.notfound .l-section h2 { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Sans, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 700; font-size: 32px; margin-bottom: 32px; } @media all and (max-width: 768px) { body.notfound .l-section h2 { font-size: 4.2666666667vw; } } body.notfound .l-section p { line-height: 2; } .img.w-100 img { width: 100%; } .sr-only { display: inline-block; border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } #contact { background: rgba(6, 18, 38, 0.85); } /** 背景によって読みにくくなってしまった文字を読みやすくするためのシャドウ */ @keyframes gradient-5ecb3cda { 0% { background-position: 0% 19%; } 50% { background-position: 100% 82%; } 100% { background-position: 0% 19%; } } @keyframes top-scroll-5ecb3cda { 0% { transform-origin: 0 100%; transform: scale(1, 1); } 40% { transform-origin: 0 100%; transform: scale(1, 0); } 60% { transform-origin: 0 0; transform: scale(1, 0); } 99% { transform-origin: 0 0; transform: scale(1, 1); } 100% { transform-origin: 0 100%; transform: scale(1, 1); } } .map[data-v-5ecb3cda] { width: 100%; height: 480px; box-shadow: rgba(0, 0, 0, 0.12) 20px 20px 40px; }