@charset "UTF-8"; /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .menu-trigger { width: clamp(30px, 0px + 8vw, 60px); aspect-ratio: 1.5/1; position: relative; z-index: 999; display: flex; justify-content: center; align-items: center; } .menu-trigger .menu-bar { position: absolute; width: 100%; height: 2px; background-color: #f8f8f8; transition: transform 0.4s ease, opacity 0.4s ease, background-color 1.2s ease; } .menu-trigger .menu-bar:nth-child(1) { transform: translateY(calc(clamp(6px, 0px + 1.6vw, 12px) * -1)); } .menu-trigger .menu-bar:nth-child(2) { opacity: 1; } .menu-trigger .menu-bar:nth-child(3) { transform: translateY(clamp(6px, 0px + 1.6vw, 12px)); } .menu-trigger[aria-expanded=true] .menu-bar { background-color: #3867de; } .menu-trigger[aria-expanded=true] .menu-bar:nth-child(1) { transform: translateY(0) rotate(-45deg) scale(80%); } .menu-trigger[aria-expanded=true] .menu-bar:nth-child(2) { opacity: 0; } .menu-trigger[aria-expanded=true] .menu-bar:nth-child(3) { transform: translateY(0) rotate(45deg) scale(80%); } .sp-nav-menu { position: fixed; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; inset: 0; padding: clamp(32.5px, 0px + 8.67vw, 65px); color: #282828; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); display: grid; row-gap: clamp(40px, 0px + 10.67vw, 80px); place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease, right 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0s, 0s, 0s; z-index: 100; font-size: clamp(15px, 0px + 4vw, 30px); font-weight: bold; } @media screen and (min-width: 768px) { .sp-nav-menu { font-weight: 500; right: -100%; padding-top: 80px; width: -moz-fit-content; width: fit-content; margin-left: auto; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); box-shadow: -2px 0px 9px 9px rgba(0, 0, 0, 0.0588235294); font-size: 1rem; font-weight: bold; } } .sp-nav-menu.is-active { opacity: 1; visibility: visible; transition-delay: 0s, 0s; } @media screen and (min-width: 768px) { .sp-nav-menu.is-active { right: 0; } } @media screen and (min-width: 1200px) { .sp-nav-menu.is-active { visibility: hidden; opacity: 0; } } .sp-nav-menu .sp-nav-menu-logo { width: 90%; margin-inline: auto; } @media screen and (min-width: 768px) { .sp-nav-menu .sp-nav-menu-logo { width: 100%; margin-top: 20px; } } .sp-nav-menu .sp-nav-menu-logo svg { fill: #282828; aspect-ratio: 349.85/27.24; } .sp-nav-menu .nav-list { display: grid; row-gap: clamp(33px, 0px + 8.8vw, 66px); text-align: center; } .sp-nav-menu .btn-list { display: grid; width: 100%; row-gap: clamp(15px, 0px + 4vw, 30px); } .sp-nav-menu .btn { display: block; margin-top: 0; padding-block: clamp(17.5px, 0px + 4.67vw, 35px); } @media screen and (min-width: 768px) { .sp-nav-menu .btn { padding-block: 15px; } } html { font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif; background-repeat: repeat; scrollbar-gutter: stable; font-weight: bold; font-size: 18px; scroll-behavior: smooth; scroll-padding-top: var(--header-height, 80px); } :root { interpolate-size: allow-keywords; } body { position: relative; color: #282828; font-feature-settings: "palt"; letter-spacing: 4%; max-width: 1920px; margin-inline: auto; min-height: 100vh; display: grid; grid-template: "header" auto "main" 1fr "footer" auto/100%; } body:has(.menu-trigger[aria-expanded=true]) { overflow: hidden; } @media screen and (min-width: 768px) { body:has(.menu-trigger[aria-expanded=true]) { overflow: auto; } } figure { line-height: 1; height: -moz-fit-content; height: fit-content; } figure img { display: block; } button { cursor: pointer; } @media screen and (min-width: 768px) { .sp-content { visibility: hidden; display: none; } } .pc-content { visibility: hidden; display: none; } @media screen and (min-width: 768px) { .pc-content { visibility: visible; display: block; } } .material-symbols { font-family: "Material Symbols Outlined"; font-weight: 200; } p { font-weight: 500; font-size: clamp(15px, 0px + 4vw, 30px); line-height: 1.75; letter-spacing: 5%; } @media screen and (min-width: 768px) { p { font-size: 1rem; } } p a { color: #3867de; text-decoration: underline; } p a:hover { text-decoration: none; } img { width: 100%; } .inline-block { display: inline-block; } .nav-list .list-item { position: relative; } .nav-list .list-item::after { content: ""; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: currentColor; height: 1px; left: 0; width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease-in-out; } @media (hover: hover) { .nav-list .list-item:hover::after { transform: scaleX(1); } } .main .breadcrumb-nav { border-bottom: 1px solid #3867de; background-color: #f8f8f8; } .main .breadcrumb-nav .page-inner { padding-block-start: 10px; padding-block-end: 8px; } @media screen and (min-width: 1440px) { .main .breadcrumb-nav .page-inner { margin-inline: 97px; } } .main .breadcrumb-nav .breadcrumb { display: flex; flex-wrap: wrap; } .main .breadcrumb-nav a { text-decoration: underline; color: #3867de; } .main .breadcrumb-nav a:hover { text-decoration: none; } .main .breadcrumb-nav .breadcrumb-separator { margin: 0 8px; color: #858585; } .page-inner { padding-inline: clamp(32.5px, 0px + 8.67vw, 65px); } .page-inner:first-of-type { padding-block-start: clamp(60px, 0px + 16vw, 120px); } .page-inner:last-of-type { padding-block-end: clamp(65px, 0px + 17.33vw, 130px); } @media screen and (min-width: 768px) { .page-inner:last-of-type { padding-block-end: 120px; } } .section { line-height: 0; position: relative; background-color: #eaeef9; background-image: url(../img/common/bg-blue.jpg); overflow: hidden; } @media screen and (min-width: 1440px) { .section { position: relative; } .section::before, .section::after { content: ""; display: block; position: absolute; top: 50%; background-color: #8ca7eb; width: 205px; aspect-ratio: 150/13; -webkit-mask-image: url(../svg/taisei_printing.svg); mask-image: url(../svg/taisei_printing.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; translate: 0 -50%; } .section::before { left: -55px; rotate: -90deg; } .section::after { right: -55px; rotate: 90deg; } } .section:nth-child(odd) { background-color: #f8f8f8; background-image: url(../img/common/bg-white.jpg); } @media screen and (min-width: 768px) { .section-inner { position: relative; z-index: 1; } } @media screen and (min-width: 1440px) { .section-inner { border-right: 1px solid #9bb3ee; border-left: 1px solid #9bb3ee; margin-inline: 97px; } } .section-title { font-family: "Zen Old Mincho", serif; font-size: clamp(35px, 0px + 9.33vw, 70px); color: #8ca7eb; line-height: 1.4; font-weight: 400; margin-inline: auto; width: -moz-fit-content; width: fit-content; margin-bottom: clamp(32.5px, 0px + 8.67vw, 65px); } @media screen and (min-width: 768px) { .section-title { position: relative; z-index: 2; mix-blend-mode: multiply; } } .content-block { display: grid; max-width: 1363px; margin-inline: auto; } .content-block + .content-block { margin-top: clamp(38px, 0px + 10.13vw, 76px); } @media screen and (min-width: 768px) { .content-block + .content-block { margin-top: 73px; } } .content-title { margin-top: clamp(35px, 0px + 9.33vw, 70px); margin-bottom: clamp(25.5px, 0px + 6.8vw, 51px); font-size: clamp(23px, 0px + 6.13vw, 46px); line-height: 1.4; font-weight: bold; } @media screen and (min-width: 768px) { .content-title { font-size: clamp(1.45rem, 0.114rem + 2.51vw, 2rem); margin-top: 105px; line-height: 1.46; letter-spacing: 10%; margin-bottom: 25px; } } .content-paragraph + .content-paragraph { margin-top: clamp(27.5px, 0px + 7.33vw, 55px); } @media screen and (min-width: 768px) { .content-paragraph + .content-paragraph { margin-top: 35px; } } .splide { width: 100vw; margin-inline: calc(50% - 50vw); } @media screen and (min-width: 768px) { .splide { width: 100%; margin-inline: 0; } } .splide__slide { border-radius: clamp(5px, 0px + 1.33vw, 10px); overflow: hidden; } .splide__arrows { display: flex; justify-content: space-between; margin-top: clamp(34px, 0px + 9.07vw, 68px); } @media screen and (min-width: 768px) { .splide__arrows { margin-top: 42px; width: 200px; margin-inline: auto; } } .splide__arrow, .splide__toggle { color: #2e7ad1; display: block; width: clamp(47px, 0px + 12.53vw, 94px); height: auto; aspect-ratio: 1; background: none; border-radius: 50%; position: relative; transform: none; opacity: 1; } @media screen and (min-width: 768px) { .splide__arrow, .splide__toggle { width: 45px; } } .splide__arrow { border: clamp(1.5px, 0px + 0.4vw, 3px) solid currentColor; } @media screen and (min-width: 768px) { .splide__arrow { border: 1px solid currentColor; } } .splide__arrow::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(16px, 0px + 4.27vw, 32px); aspect-ratio: 1; background-color: currentColor; -webkit-mask-image: url(../svg/icon-arrow.svg); mask-image: url(../svg/icon-arrow.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media screen and (min-width: 768px) { .splide__arrow::after { width: 15px; } } .splide__arrow--prev { left: 0; transform: rotate(180deg); } .splide__arrow--next { right: 0; } .splide__toggle { background-color: #c0d3ee; display: grid; place-content: center; } .splide__toggle object { width: clamp(15px, 0px + 4vw, 30px); pointer-events: none; } @media screen and (min-width: 768px) { .splide__toggle object { width: 19px; } } .splide__toggle__play { translate: clamp(2.5px, 0px + 0.67vw, 5px) 0; } @media screen and (min-width: 768px) { .splide__toggle__play { translate: 3px 0; } } .btn { position: relative; display: block; background-color: #3867de; color: #f8f8f8; width: 100%; text-align: center; font-size: clamp(17.5px, 0px + 4.67vw, 35px); font-weight: 600; padding-block: clamp(31.5px, 0px + 8.4vw, 63px); border-radius: clamp(2px, 0px + 0.53vw, 4px); margin-top: clamp(26px, 0px + 6.93vw, 52px); border: 2px solid transparent; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } @media (hover: hover) { .btn:hover { background-color: #f8f8f8; color: #3867de; border-color: #3867de; font-weight: bold; } } @media screen and (min-width: 768px) { .btn { font-size: 1rem; font-weight: normal; padding-block: 32px; margin-top: 0; padding-inline: 20px; min-width: 192px; border-radius: 4px; } } .btn::after { content: ""; background-color: currentColor; -webkit-mask-image: url(../svg/icon-arrow.svg); mask-image: url(../svg/icon-arrow.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; display: block; width: clamp(15px, 0px + 4vw, 30px); aspect-ratio: 1; position: absolute; right: 8%; top: 50%; transform: translateY(-50%); } @media screen and (min-width: 768px) { .btn::after { right: 8.5%; width: 15px; } } @media screen and (min-width: 768px) { .btn[download] { max-width: 265px; } } .btn[download]::before { content: ""; display: block; position: absolute; top: 50%; translate: 0 -50%; left: 6%; width: clamp(20.5px, 0px + 5.47vw, 41px); aspect-ratio: 107/150; background-color: currentColor; -webkit-mask-image: url(../svg/icon-pdf.svg); mask-image: url(../svg/icon-pdf.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media screen and (min-width: 768px) { .btn[download]::before { width: 17px; left: 10%; } } .btn[download]::after { -webkit-mask-image: url(../svg/icon-dl.svg); mask-image: url(../svg/icon-dl.svg); width: clamp(29px, 0px + 7.73vw, 58px); aspect-ratio: 46/25; right: 6%; } @media screen and (min-width: 768px) { .btn[download]::after { width: 26px; right: 10%; } } .btn.contact { background-color: #3867de; display: flex; justify-content: center; align-items: center; -moz-column-gap: clamp(15px, 0px + 4vw, 30px); column-gap: clamp(15px, 0px + 4vw, 30px); font-weight: bold; } @media (hover: hover) { .btn.contact:hover { background-color: #f8f8f8; color: #3867de; border-color: #3867de; } } @media screen and (min-width: 768px) { .btn.contact { -moz-column-gap: 12px; column-gap: 12px; padding-inline: 28px 35px; } } .btn.contact::after { display: none; } .btn.contact::before { content: ""; display: inline-block; width: clamp(20px, 0px + 5.33vw, 40px); aspect-ratio: 36/25; background-color: currentColor; -webkit-mask-image: url(../svg/icon-mail.svg); mask-image: url(../svg/icon-mail.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media screen and (min-width: 768px) { .btn.contact::before { width: 18px; } } .top-btn { z-index: 3; position: fixed; right: 17px; bottom: 35px; transition: opacity 0.3s, visibility 0.3s, transform 0.3s; opacity: 0; visibility: hidden; } .top-btn.is-show { opacity: 1; visibility: visible; } .top-btn::before { content: ""; display: block; width: 60px; aspect-ratio: 40/25; background-color: #3867de; -webkit-mask-image: url(../svg/icon-top.svg); mask-image: url(../svg/icon-top.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; margin-bottom: 5px; } .header { position: sticky; top: 0; background-color: #273889; color: #f8f8f8; z-index: 100; display: flex; justify-content: space-between; padding: clamp(17.5px, 0px + 4.67vw, 35px) clamp(14.5px, 0px + 3.87vw, 29px) clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .header { padding: 15px 30px; } } @media screen and (min-width: 1200px) { .header { padding: 0; display: flex; flex-direction: column; } } @media screen and (min-width: 1200px) { .header .header-inner { display: grid; grid-template-columns: auto auto; padding-inline: 26px 14px; padding-block: 14px 4px; -moz-column-gap: 30px; column-gap: 30px; } } .header .pc-content { display: none; visibility: hidden; } @media screen and (min-width: 1200px) { .header .pc-content { display: block; visibility: visible; } } .header .pc-content:has(.btn-list) { justify-self: end; } @media screen and (min-width: 768px) { .header .sp-content { display: block; visibility: visible; } } @media screen and (min-width: 1200px) { .header .sp-content { display: none; visibility: hidden; } } .header .header-logo { width: clamp(100px, 0px + 26.67vw, 200px); fill: #f8f8f8; } @media screen and (min-width: 768px) { .header .header-logo { width: 170px; } } .header .header-nav { display: flex; -moz-column-gap: 30px; column-gap: 30px; padding-top: 20px; border-top: 1px solid #f8f8f8; padding-bottom: 16px; } .header .header-nav .nav-list { display: flex; justify-content: center; -moz-column-gap: min(2.5vw, 36px); column-gap: min(2.5vw, 36px); align-items: center; justify-content: space-between; margin-inline: auto; width: -moz-fit-content; width: fit-content; letter-spacing: 0.24rem; height: -moz-fit-content; height: fit-content; margin-block-start: auto; padding-block-end: 11px; } .header .pc-content .btn-list { display: flex; -moz-column-gap: 18px; column-gap: 18px; align-items: center; } .header .pc-content .nav-menu-logo { width: 162px; height: 100%; margin-inline: auto; display: grid; place-content: end; } .header .pc-content .nav-menu-logo svg { fill: #f8f8f8; aspect-ratio: 349.85/27.24; width: 100%; } .header .pc-content .list-item:has(.btn) { grid-row: 2/3; } @media screen and (min-width: 768px) { .header .pc-content .btn { padding-block: 11px; } } .header .pc-content .btn.access { background-color: #f8f8f8; color: #273889; font-weight: 600; min-width: auto; } @media screen and (min-width: 1200px) { .header .pc-content .btn.access { padding-inline: 46px; } } @media (hover: hover) { .header .pc-content .btn.access:hover { background-color: #273889; color: #f8f8f8; border-color: #f8f8f8; font-weight: bold; } } .header .pc-content .phone-contact { margin-right: 10px; } .header .pc-content .phone-contact .grid-wrapper { display: grid; grid-template-columns: auto 1fr; -moz-column-gap: 5px; column-gap: 5px; row-gap: 0; line-height: 1.4; align-items: center; } .header .pc-content .phone-contact .material-symbols { font-size: 22px; line-height: 1; } .footer { background-color: #f1f4fd; border-top: 1px solid #8ca7eb; padding-top: clamp(12.5px, 0px + 3.33vw, 25px); } @media screen and (min-width: 768px) { .footer { padding-top: 70px; } } .footer .page-inner { padding-block: 0; } .footer .footer-logo { width: 70%; margin-inline: auto; } @media screen and (min-width: 768px) { .footer .footer-logo { width: 300px; height: -moz-fit-content; height: fit-content; margin-inline: 0; align-self: center; } } .footer .footer-logo svg { fill: #282828; aspect-ratio: 349.85/27.24; margin-bottom: clamp(7px, 0px + 1.87vw, 14px); } .footer .footer-logo span { font-size: clamp(12.5px, 0px + 3.33vw, 25px); text-align: center; } @media screen and (min-width: 768px) { .footer .footer-logo span { text-align: left; font-size: 1rem; } } .footer .grid-wrapper { display: grid; grid-template-columns: auto 1fr; align-items: center; -moz-column-gap: clamp(3px, 0px + 0.8vw, 6px); column-gap: clamp(3px, 0px + 0.8vw, 6px); } .footer .grid-wrapper span { text-align: left; } .footer .grid-wrapper span.material-symbols { font-weight: 400; font-size: clamp(13.5px, 0px + 3.6vw, 27px); } @media screen and (min-width: 1440px) { .footer .footer-inner { margin-inline: 97px; } } .footer .content-block { row-gap: 20px; } @media screen and (min-width: 1200px) { .footer .content-block { grid-template-columns: auto 1fr; -moz-column-gap: 50px; column-gap: 50px; } } .footer .footer-nav { margin-top: clamp(42px, 0px + 11.2vw, 84px); } @media screen and (min-width: 768px) { .footer .footer-nav { margin-top: 0; padding-inline: 0; flex: 1; } } @media screen and (min-width: 1200px) { .footer .footer-nav { display: flex; flex-wrap: wrap; margin-inline-start: auto; width: -moz-fit-content; width: fit-content; white-space: nowrap; justify-content: end; height: -moz-fit-content; height: fit-content; -moz-column-gap: clamp(40px, -26.67px + 5.56vw, 80px); column-gap: clamp(40px, -26.67px + 5.56vw, 80px); row-gap: 20px; } } .footer .nav-list { display: grid; justify-content: center; font-size: clamp(15px, 0px + 4vw, 30px); font-weight: bold; text-align: center; row-gap: clamp(33px, 0px + 8.8vw, 66px); } @media screen and (min-width: 768px) { .footer .nav-list { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; -moz-column-gap: 40px; column-gap: 40px; row-gap: 10px; font-size: 1rem; } } @media screen and (min-width: 1200px) { .footer .nav-list { justify-content: end; } } .footer .list-item { height: -moz-fit-content; height: fit-content; } .footer .contact { margin-top: clamp(50px, 0px + 13.33vw, 100px); padding-block: clamp(15.5px, 0px + 4.13vw, 31px); } @media screen and (min-width: 768px) { .footer .contact { padding-block: 15px; width: 320px; margin-inline-start: auto; margin-top: 20px; } } @media screen and (min-width: 1200px) { .footer .contact { margin-top: 0; } } .footer .credit { background-color: #273889; margin-top: clamp(6px, 0px + 1.6vw, 12px); padding-block: clamp(5px, 0px + 1.33vw, 10px); color: #f8f8f8; text-align: center; font-size: clamp(12.5px, 0px + 3.33vw, 25px); } @media screen and (min-width: 768px) { .footer .credit { margin-top: 30px; font-size: 0.8rem; font-weight: 500; padding-block: 7px 8px; } } .home .img-wrapper { border-radius: clamp(10px, 0px + 2.67vw, 20px); overflow: hidden; } @media screen and (min-width: 768px) { .home .img-wrapper { border-radius: 15px; } } .home .main .btn { max-width: 400px; margin-inline: auto; margin-top: clamp(26px, 0px + 6.93vw, 52px); } .home .main .mv { height: calc(100svh - var(--header-height)); } @media screen and (min-width: 768px) { .home .main .mv { height: auto; } } .home .main .mv::before, .home .main .mv::after { content: none; } .home .main .mv video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (min-width: 768px) { .home .main .mv video { -o-object-fit: contain; object-fit: contain; } } .home .main .about .section-inner { display: grid; } @media screen and (min-width: 768px) { .home .main .about .section-title + .content-block { margin-top: -36px; } } .home .main .about .img-wrapper { margin-top: clamp(48.5px, 0px + 12.93vw, 97px); } @media screen and (min-width: 1024px) { .home .main .about .img-wrapper { height: auto; } } @media screen and (min-width: 1024px) { .home .main .about .img-wrapper img { height: 100%; -o-object-fit: cover; object-fit: cover; } } .home .main .about .splide { margin-top: clamp(52px, 0px + 13.87vw, 104px); margin-bottom: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 1024px) { .home .main .about .splide { grid-row: 2/3; margin-top: 75px; margin-bottom: 67px; } } @media screen and (min-width: 1024px) { .home .main .about .page-inner:last-child .btn { margin-inline: auto 0; } } @media screen and (min-width: 1024px) { .home .main .about .page-inner:nth-child(1) .content-block { grid-template-columns: 1fr 1.25fr; grid-template-rows: 1fr auto; -moz-column-gap: 7.5%; column-gap: 7.5%; } } @media screen and (min-width: 1024px) { .home .main .about .page-inner:nth-child(1) .content-block .text-wrapper { grid-column: 2/3; align-self: center; } } @media screen and (min-width: 1024px) { .home .main .about .page-inner:nth-child(1) .content-block .img-wrapper { margin-top: 0; grid-row: 1/3; } } @media screen and (min-width: 1200px) { .home .main .about .page-inner:nth-child(1) .btn { margin-inline: auto 0; } } .home .main .about .page-inner:nth-child(2) .content-block { margin-top: clamp(38px, 0px + 10.13vw, 76px); } @media screen and (min-width: 768px) { .home .main .about .page-inner:nth-child(2) .content-block { margin-top: 0; } } @media screen and (min-width: 1024px) { .home .main .about .page-inner:nth-child(2) .text-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; -moz-column-gap: 10.5%; column-gap: 10.5%; } } @media screen and (min-width: 1024px) { .home .main .about .page-inner:nth-child(2) .content-title { margin-top: 0; margin-bottom: 0; width: -moz-fit-content; width: fit-content; margin-inline: auto; } } .home .main .strength .btn, .home .main .information .btn { margin-top: clamp(48.5px, 0px + 12.93vw, 97px); } @media screen and (min-width: 768px) { .home .main .strength .btn, .home .main .information .btn { margin-top: 52px; margin-inline: auto; } } .home .main .strength .section-title { margin-bottom: clamp(46px, 0px + 12.27vw, 92px); } @media screen and (min-width: 768px) { .home .main .strength .section-title { max-width: 638px; margin-bottom: 70px; } } .home .main .strength .content-title { text-align: center; margin-top: clamp(13.5px, 0px + 3.6vw, 27px); margin-bottom: clamp(8px, 0px + 2.13vw, 16px); } .home .main .strength .img-wrapper { border-radius: clamp(5px, 0px + 1.33vw, 10px); overflow: hidden; display: block; } .home .main .strength .pc-grid-container { max-width: 1363px; margin-inline: auto; display: grid; } @media screen and (min-width: 1024px) { .home .main .strength .pc-grid-container { grid-template-columns: repeat(3, 1fr); -moz-column-gap: 45px; column-gap: 45px; } } @media screen and (min-width: 768px) { .home .main .strength .pc-grid-container .content-block { margin-top: clamp(38px, 0px + 10.13vw, 76px); display: grid; } } @media screen and (min-width: 1024px) { .home .main .strength .pc-grid-container .content-block { margin-top: 0; row-gap: 15px; } } @media screen and (min-width: 1024px) { .home .main .strength .pc-grid-container .content-title { font-size: clamp(1.2rem, 1.6vw, 1.6rem); margin: 0; } } @media screen and (min-width: 768px) { .home .main .strength .pc-grid-container .content-paragraph { margin-top: 10px; font-size: 0.9rem; line-height: 1.68; } } .home .main .information .section-title { width: 47%; margin-bottom: clamp(35px, 0px + 9.33vw, 70px); } @media screen and (min-width: 768px) { .home .main .information .section-title { max-width: 353px; margin-bottom: 60px; } } .home .main .information .information-list { display: grid; row-gap: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .home .main .information .information-list { max-width: 1200px; margin-inline: auto; row-gap: 14px; } } @media screen and (min-width: 768px) { .home .main .information .list-item { display: grid; grid-template-columns: auto 1fr auto; } } @media screen and (min-width: 768px) { .home .main .information .article-title-wrapper { display: grid; grid-template-columns: subgrid; grid-column: span 3; } } .home .main .information .article-title-wrapper button { background-color: #f8f8f8; background-image: url(../img/common/bg-white.jpg); width: 100%; grid-template-columns: 1fr auto; padding-inline: clamp(10px, 0px + 2.67vw, 20px); padding-block: clamp(14px, 0px + 3.73vw, 28px); border-radius: clamp(2.5px, 0px + 0.67vw, 5px); -moz-column-gap: clamp(5px, 0px + 1.33vw, 10px); column-gap: clamp(5px, 0px + 1.33vw, 10px); display: grid; } @media screen and (min-width: 768px) { .home .main .information .article-title-wrapper button { grid-template-columns: subgrid; grid-column: span 3; align-items: center; padding-inline: 45px; padding-block: 33px; } } .home .main .information .article-title { font-weight: bold; font-size: clamp(15px, 0px + 4vw, 30px); line-height: 1.75; letter-spacing: 5%; } @media screen and (min-width: 768px) { .home .main .information .article-title { font-size: 1rem; } } .home .main .information .article-date { line-height: 1; font-size: clamp(12.5px, 0px + 3.33vw, 25px); font-weight: bold; color: #3867de; padding-bottom: clamp(3.5px, 0px + 0.93vw, 7px); } @media screen and (min-width: 768px) { .home .main .information .article-date { font-size: 1.1rem; margin-right: 75px; } } .home .main .information .accordion-indicator { align-self: center; display: grid; grid-template-columns: 1fr; grid-column: 2/3; grid-row: 1/3; place-content: center; width: clamp(14px, 0px + 3.73vw, 28px); aspect-ratio: 1; } @media screen and (min-width: 768px) { .home .main .information .accordion-indicator { grid-column: 3/4; width: 20px; } } .home .main .information .accordion-indicator::before, .home .main .information .accordion-indicator::after { content: ""; display: block; width: 100%; height: clamp(3px, 0px + 0.8vw, 6px); background-color: #3867de; grid-column: 1/2; grid-row: 1/2; margin-inline: auto; } @media screen and (min-width: 768px) { .home .main .information .accordion-indicator::before, .home .main .information .accordion-indicator::after { height: 5px; } } .home .main .information .accordion-indicator::after { rotate: 90deg; transition: rotate 0.4s ease; } .home .main .information .article { height: 0; overflow: hidden; transition: height 0.4s ease; font-size: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .home .main .information .article { grid-column: 1/4; } } @media screen and (min-width: 1024px) { .home .main .information .article { display: grid; grid-template-columns: subgrid; grid-column: 2/4; } } .home .main .information .article .img-wrapper { margin-top: clamp(20px, 0px + 5.33vw, 40px); } .home .main .information .article p { line-height: 1.66; } @media screen and (min-width: 768px) { .home .main .information .article p { font-size: 0.9rem; line-height: 1.75; } } .home .main .information .article p + p { margin-top: clamp(20px, 0px + 5.33vw, 40px); } .home .main .information .article .btn { margin-top: clamp(20px, 0px + 5.33vw, 40px); } .home .main .information .article-inner { padding-top: clamp(15px, 0px + 4vw, 30px); padding-inline: clamp(10px, 0px + 2.67vw, 20px); padding-bottom: clamp(22.5px, 0px + 6vw, 45px); } @media screen and (min-width: 768px) { .home .main .information .article-inner { padding-left: 40px; padding-right: 40px; } } @media screen and (min-width: 1024px) { .home .main .information .article-inner { grid-column: span 2; padding-left: 0; padding-right: 40px; } } .home .main .information .list-item:has(.article-title-wrapper[aria-expanded=true]) .article { height: auto; } .home .main .information .list-item:has(.article-title-wrapper[aria-expanded=true]) .accordion-indicator::after { rotate: 0deg; } .home .main .csr .section-title { margin-bottom: clamp(32.5px, 0px + 8.67vw, 65px); } @media screen and (min-width: 768px) { .home .main .csr .section-title { margin-bottom: 60px; } } .home .main .csr .section-title ruby { display: block; line-height: 1; } @media screen and (min-width: 1024px) { .home .main .csr .section-title ruby { display: grid; grid-template-columns: 1fr auto 1fr; max-width: 1368px; margin-inline: auto; } } .home .main .csr .section-title object { display: block; width: 27%; margin-inline: auto; } @media screen and (min-width: 768px) { .home .main .csr .section-title object { grid-column: 2/3; width: 100%; max-width: 230px; margin-bottom: 20px; } } @media screen and (min-width: 1024px) { .home .main .csr .section-title object { margin-bottom: 0; } } .home .main .csr .section-title .title-rt { display: block; text-align: center; margin-inline: auto; font-size: clamp(16px, 0px + 4.27vw, 32px); color: #8ca7eb; font-weight: bold; margin-top: clamp(22.5px, 0px + 6vw, 45px); } @media screen and (min-width: 768px) { .home .main .csr .section-title .title-rt { text-align: right; justify-self: end; margin-inline: auto 0; line-height: 1; margin-top: auto; } } @media screen and (min-width: 768px) { .home .main .csr .content-block { grid-template-rows: 1fr auto; -moz-column-gap: 8%; column-gap: 8%; } } @media screen and (min-width: 1200px) { .home .main .csr .content-block { grid-template-columns: 1fr 1.25fr; } } @media screen and (min-width: 768px) { .home .main .csr .content-block .img-wrapper { grid-row: 1/3; } } .home .main .csr .content-title { text-align: center; } @media screen and (min-width: 768px) { .home .main .csr .content-title { text-align: left; margin-inline: auto; } } @media screen and (min-width: 1200px) { .home .main .csr .content-title { margin-top: 11px; } } @media screen and (min-width: 768px) { .home .main .csr .btn { margin-inline-start: auto; margin-top: 40px; } } .lower-page .main .content-block { max-width: 1200px; } .lower-page .mv { background-repeat: no-repeat; width: 100%; background-position: center; display: grid; place-content: center; height: 600px; background-size: cover; position: relative; } @media screen and (min-width: 768px) { .lower-page .mv { height: 420px; } } .lower-page .mv::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.65); } .lower-page .page-title { font-family: "Zen Old Mincho", serif; font-size: clamp(35px, 0px + 9.33vw, 70px); translate: 0 -25%; color: #f8f8f8; font-weight: 400; text-align: center; } .lower-page .list { line-height: 1.7; font-weight: normal; } .lower-page .section-title:has(svg) { height: 88px; width: -moz-fit-content; width: fit-content; margin-inline: auto; } .lower-page .section-title svg { width: auto; height: 100%; } .lower-page .certification { z-index: 0; line-height: 1.7; } @media screen and (min-width: 768px) { .lower-page .certification .lead-paragraph { text-align: center; font-weight: bold; } } .lower-page .certification .certification-list { display: grid; row-gap: clamp(60px, 0px + 16vw, 120px); } @media screen and (min-width: 768px) { .lower-page .certification .certification-list { grid-template-columns: repeat(2, 1fr); margin-top: 74px; -moz-column-gap: 57px; column-gap: 57px; } } @media screen and (min-width: 1200px) { .lower-page .certification .certification-list { grid-template-columns: repeat(3, 1fr); } } .lower-page .certification .list-item { font-size: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .lower-page .certification .list-item { font-size: 1rem; } } .lower-page .certification .list-item .btn { margin-inline: auto; max-width: 360px; padding-block: clamp(15px, 0px + 4vw, 30px); margin-top: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .lower-page .certification .list-item .btn { max-width: 230px; padding-block: 15px; } } .lower-page .certification .list-item figure { max-width: 363px; margin-inline: auto; text-align: center; font-size: 120%; margin-bottom: clamp(10px, 0px + 2.67vw, 20px); } .lower-page .certification .list-item figure img { margin-bottom: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .lower-page .certification .list-item figure img { margin-bottom: 35px; } } .lower-page .certification .list-item figure figcaption { width: -moz-fit-content; width: fit-content; margin-inline: auto; text-align: center; } .lower-page.corporate .content-block { line-height: 1.7; } .lower-page.privacypolicy .mv { background-image: url(/assets/img/lower-page/privacypolicy_mv.jpg); background-position: right top; } .lower-page.privacypolicy .main .content-block { max-width: 900px; } .lower-page.privacypolicy .list-item-title { font-size: 110%; display: grid; grid-template-columns: auto 1fr; -moz-column-gap: clamp(2.5px, 0px + 0.67vw, 5px); column-gap: clamp(2.5px, 0px + 0.67vw, 5px); } .lower-page.privacypolicy .small-list { list-style: disc; padding-inline-start: clamp(11px, 0px + 2.93vw, 22px); font-weight: 500; margin-left: clamp(14px, 0px + 3.73vw, 28px); } .lower-page .policy-list { line-height: 1.7; display: grid; row-gap: clamp(20px, 0px + 5.33vw, 40px); counter-reset: step-counter; } .lower-page .policy-list-item { counter-increment: step-counter; } .lower-page .policy-list-item .list-item-title:before { content: counter(listnum); content: counter(step-counter) ". "; } .lower-page.equipment .mv { background-image: url(/assets/img/lower-page/equipment_mv.jpg); background-position: left top; } .lower-page.equipment .lead-block { display: grid; row-gap: clamp(40px, 0px + 10.67vw, 80px); } @media screen and (min-width: 1024px) { .lower-page.equipment .lead-block { display: flex; justify-content: space-between; -moz-column-gap: 30px; column-gap: 30px; } } .lower-page.equipment .lead-paragraph { display: grid; } @media screen and (min-width: 1024px) { .lower-page.equipment .lead-paragraph { max-width: 500px; } } .lower-page.equipment .lead-paragraph strong { font-family: "Zen Old Mincho", serif; font-size: 150%; text-wrap: pretty; } @media screen and (min-width: 768px) { .lower-page.equipment .lead-paragraph strong { font-size: 200%; align-self: center; } } .lower-page.equipment .main-equipment { line-height: 1.7; } .lower-page.equipment .machine-info { color: #3867de; display: grid; font-family: "Zen Old Mincho", serif; } .lower-page.equipment .grid-wrapper { display: grid; row-gap: clamp(25px, 0px + 6.67vw, 50px); max-width: 1360px; margin-inline: auto; } @media screen and (min-width: 1200px) { .lower-page.equipment .grid-wrapper { grid-template-columns: 384px 1fr; -moz-column-gap: 90px; column-gap: 90px; } } @media screen and (min-width: 1200px) { .lower-page.equipment .grid-wrapper:has(*:nth-last-child(n+3)) .img-wrapper { grid-row: 1/3; grid-column: 2/3; } } .lower-page.equipment .grid-wrapper + .grid-wrapper { margin-top: 50px; } @media screen and (min-width: 768px) { .lower-page.equipment .grid-wrapper + .grid-wrapper { grid-template-columns: repeat(2, 1fr); -moz-column-gap: 30px; column-gap: 30px; } } .lower-page.equipment .grid-wrapper .grid-item:has(.machine-entry:nth-last-child(n+3)) { display: grid; row-gap: clamp(15px, 0px + 4vw, 30px); } .lower-page.equipment .machine-title { font-weight: 500; display: grid; grid-template-columns: auto 1fr; -moz-column-gap: clamp(20px, 0px + 5.33vw, 40px); column-gap: clamp(20px, 0px + 5.33vw, 40px); align-items: center; margin-bottom: clamp(10px, 0px + 2.67vw, 20px); line-height: 1.4; max-width: 1360px; margin-inline: auto; } @media screen and (min-width: 768px) { .lower-page.equipment .machine-title { font-size: 130%; margin-bottom: 25px; } } .lower-page.equipment .machine-title::after { content: ""; display: block; width: -webkit-fill-available; width: -moz-available; width: stretch; height: 1px; background-color: #282828; } .lower-page.equipment .machine-title span { display: grid; grid-template-columns: auto 1fr auto; width: -moz-fit-content; width: fit-content; -moz-column-gap: clamp(4px, 0px + 1.07vw, 8px); column-gap: clamp(4px, 0px + 1.07vw, 8px); } .lower-page.equipment .machine-title span::before, .lower-page.equipment .machine-title span::after { content: ""; display: block; width: 12px; border: 1px solid #282828; translate: 0 -7%; } .lower-page.equipment .machine-title span::before { border-right: none; } .lower-page.equipment .machine-title span::after { border-left: none; } .lower-page.equipment .machine-small-title { width: -moz-fit-content; width: fit-content; line-height: 1; font-weight: normal; padding: clamp(3px, 0px + 0.8vw, 6px) clamp(5px, 0px + 1.33vw, 10px) clamp(2px, 0px + 0.53vw, 4px); margin-bottom: clamp(5px, 0px + 1.33vw, 10px); background-color: #3867de; color: #f8f8f8; font-weight: bold; background-position: top, right, bottom, left; font-size: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .lower-page.equipment .machine-small-title { font-size: 1rem; } } .lower-page.equipment .machine-info { margin-bottom: clamp(10px, 0px + 2.67vw, 20px); } @media screen and (min-width: 768px) { .lower-page.equipment .machine-info .machine-type { font-size: 140%; } } .lower-page.equipment .machine-info .machine-model { font-size: 130%; line-height: 1.3; } @media screen and (min-width: 768px) { .lower-page.equipment .machine-info .machine-model { font-size: 200%; } } .lower-page.equipment .machine-info .machine-model + .machine-model::before { content: "+"; display: block; color: #282828; } .lower-page.equipment .machine-info .machine-maker { font-size: 80%; } .lower-page.equipment .machine-info .machine-maker::before { content: "（"; } .lower-page.equipment .machine-info .machine-maker::after { content: "）"; } .lower-page.equipment .splide { width: -webkit-fill-available; width: -moz-available; width: stretch; margin-inline: auto; } .lower-page.equipment .splide__slide { border-radius: 0; } .lower-page.history .mv { background-image: url(/assets/img/lower-page/history_mv.jpg); } .lower-page.history .message p { font-weight: 600; } .lower-page.history .message p + P { margin-block-start: clamp(20px, 0px + 5.33vw, 40px); } @media screen and (min-width: 1200px) { .lower-page.history .message .content-block { display: grid; } } .lower-page.history .message .content-block .img-wrapper { margin-bottom: clamp(35px, 0px + 9.33vw, 70px); } @media screen and (min-width: 1200px) { .lower-page.history .message .content-block .img-wrapper { margin-bottom: 0; grid-column: 1/2; grid-row: 1/4; } } .lower-page.history .message .text-wrapper { height: 100%; } .lower-page.history .message .signature { align-self: end; margin-block-end: 0; text-align: right; margin-top: clamp(50px, 0px + 13.33vw, 100px); } .lower-page.history .section.history .page-inner { padding-right: clamp(20px, 0px + 5.33vw, 40px); } .lower-page.history .section.history .content-block { max-width: 1363px; } .lower-page.history .history-list-wrapper { position: relative; } .lower-page.history .history-list-wrapper::before { content: ""; width: 3px; display: block; height: 100%; background-color: #3867de; position: absolute; left: -1px; } @media screen and (min-width: 768px) { .lower-page.history .history-list-wrapper::before { width: 4px; left: 50%; translate: -50%; } } .lower-page.history .history-list-wrapper img { max-width: 300px; } .lower-page.history .history-list { position: relative; } @media screen and (min-width: 768px) { .lower-page.history .history-list { display: grid; grid-template-columns: 1fr 1px 1fr; } } .lower-page.history .history-list .list-item { grid-template-columns: subgrid; grid-column: span 3; padding-bottom: clamp(30px, 0px + 8vw, 60px); } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item { display: grid; padding-bottom: 70px; } } .lower-page.history .history-list .list-item:has(img) .list-title { margin-top: 0; } .lower-page.history .history-list .list-item:has(img) .list-data { translate: 0; } .lower-page.history .history-list .list-item .gregorian-calendar, .lower-page.history .history-list .list-item .jp-calendar, .lower-page.history .history-list .list-item .list-data { padding-left: clamp(22.5px, 0px + 6vw, 45px); } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .gregorian-calendar, .lower-page.history .history-list .list-item .jp-calendar, .lower-page.history .history-list .list-item .list-data { padding-left: 0; } } .lower-page.history .history-list .list-item .list-title { position: relative; margin-left: clamp(0px, (100vw - 1050px) * 0.3769, 245px); grid-column: 1/2; grid-row: 1/2; height: -moz-fit-content; height: fit-content; margin-block: auto; } .lower-page.history .history-list .list-item .list-title::before, .lower-page.history .history-list .list-item .list-title::after { position: absolute; display: block; background-color: #3867de; } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .list-title::before, .lower-page.history .history-list .list-item .list-title::after { content: ""; } } .lower-page.history .history-list .list-item .list-title::before { width: 15px; aspect-ratio: 1; border-radius: 50%; top: 50%; left: calc(clamp(28px, 0px + 7.47vw, 56px) * -1); translate: 50% -50%; } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .list-title::before { right: -0.3%; left: auto; } } .lower-page.history .history-list .list-item .list-title::after { width: clamp(17.5px, 0px + 4.67vw, 35px); height: 1px; left: calc(clamp(20px, 0px + 5.33vw, 40px) * -1); top: 50%; translate: 0 -50%; } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .list-title::after { width: clamp(110px, (100vw - 768px) * 0.3723 + 110px, 215px); right: 0; left: auto; } } .lower-page.history .history-list .list-item .list-title time { display: grid; line-height: 1; font-weight: bold; } .lower-page.history .history-list .list-item .list-title .gregorian-calendar { color: #3867de; font-size: clamp(10px, 0px + 2.67vw, 20px); } .lower-page.history .history-list .list-item .list-title .gregorian-calendar::before, .lower-page.history .history-list .list-item .list-title .gregorian-calendar::after { content: ""; position: absolute; display: block; background-color: #3867de; } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .list-title .gregorian-calendar::before, .lower-page.history .history-list .list-item .list-title .gregorian-calendar::after { display: none; } } .lower-page.history .history-list .list-item .list-title .gregorian-calendar::before { width: clamp(7.5px, 0px + 2vw, 15px); aspect-ratio: 1; border-radius: 50%; top: 32%; left: 0; translate: -50% -50%; } .lower-page.history .history-list .list-item .list-title .gregorian-calendar::after { width: clamp(17.5px, 0px + 4.67vw, 35px); height: 1px; left: calc(clamp(20px, 0px + 5.33vw, 40px) * -1); top: 32%; translate: 100% -50%; } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .list-title .gregorian-calendar { padding-left: 0; font-size: 24px; } } .lower-page.history .history-list .list-item .list-title .gregorian-calendar .u-number { font-size: 240%; letter-spacing: -3%; } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .list-title .gregorian-calendar .u-number { font-size: 220%; } } .lower-page.history .history-list .list-item .list-title .jp-calendar { margin-top: clamp(5px, 0px + 1.33vw, 10px); color: #858585; font-size: 70%; } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .list-title .jp-calendar { font-size: 100%; } } .lower-page.history .history-list .list-item .list-data { font-size: clamp(15px, 0px + 4vw, 30px); line-height: 1.6; margin-top: clamp(10px, 0px + 2.67vw, 20px); font-weight: 500; } @media screen and (min-width: 768px) { .lower-page.history .history-list .list-item .list-data { font-weight: 600; grid-column: 3/4; grid-row: 1/2; line-height: 1.92; font-size: 1rem; padding-inline: 35px; translate: 0 calc(50% - 25px); } } .lower-page.corporate .section { background-color: #eaeef9; background-image: url(../img/common/bg-blue.jpg); } .lower-page.corporate .section:nth-child(even) { background-color: #f8f8f8; background-image: url(../img/common/bg-white.jpg); } .lower-page.corporate .mv { background-image: url(/assets/img/lower-page/corporate_mv.jpg); background-position: 50% 26%; } .lower-page.corporate .philosophy { font-family: "Zen Old Mincho", serif; } .lower-page.corporate .philosophy .lead-block { text-align: center; } .lower-page.corporate .philosophy .lead-block .lead-paragraph { font-size: clamp(21px, 0px + 5.6vw, 42px); margin-bottom: clamp(20px, 0px + 5.33vw, 40px); } @media screen and (min-width: 1024px) { .lower-page.corporate .philosophy .lead-block .lead-paragraph { font-size: 48px; } } @media screen and (min-width: 1200px) { .lower-page.corporate .philosophy .content-block { display: grid; grid-template-columns: 1fr 1.17fr; -moz-column-gap: 6%; column-gap: 6%; } } .lower-page.corporate .philosophy .img-wrapper { border-radius: clamp(5px, 0px + 1.33vw, 10px); overflow: hidden; } .lower-page.corporate .philosophy .text-wrapper { margin-left: clamp(30px, 0px + 8vw, 60px); margin-top: clamp(20px, 0px + 5.33vw, 40px); } @media screen and (min-width: 1200px) { .lower-page.corporate .philosophy .text-wrapper { margin-top: 0; align-self: center; } } .lower-page.corporate .philosophy .text-wrapper .content-paragraph { font-weight: 600; } @media screen and (min-width: 768px) { .lower-page.corporate .philosophy .text-wrapper .content-paragraph { font-size: 26px; line-height: 2; } } @media screen and (min-width: 768px) { .lower-page.corporate .philosophy .text-wrapper .content-paragraph + .content-paragraph { margin-top: 42px; } } .lower-page.corporate .philosophy .text-wrapper strong { color: #8ca7eb; position: relative; font-size: 130%; } @media screen and (min-width: 768px) { .lower-page.corporate .philosophy .text-wrapper strong { margin-bottom: 20px; } } .lower-page.corporate .philosophy .text-wrapper strong::before { content: ""; position: absolute; top: 50%; left: -10%; translate: -100% 50%; display: block; width: clamp(20px, 0px + 5.33vw, 40px); height: 1px; background-color: currentcolor; } @media screen and (min-width: 1200px) { .lower-page.corporate .philosophy .text-wrapper strong::before { width: 50px; } } .lower-page.corporate .management-vision p { font-weight: 600; line-height: 1.75; letter-spacing: 5%; } .lower-page.corporate .management-vision p + P { margin-block-start: clamp(20px, 0px + 5.33vw, 40px); } .lower-page.corporate .corporate-info .content-block { max-width: 1000px; } .lower-page.corporate .corporate-info-list { display: grid; grid-template-columns: auto 1fr; } .lower-page.corporate .corporate-info-list .list-item { display: grid; grid-template-columns: subgrid; grid-column: span 2; border-bottom: 1px solid #3867de; padding-block: clamp(10px, 0px + 2.67vw, 20px); font-size: clamp(15px, 0px + 4vw, 30px); } .lower-page.corporate .corporate-info-list .list-item:last-of-type { border-bottom: none; } @media screen and (min-width: 768px) { .lower-page.corporate .corporate-info-list .list-item { font-size: 1rem; } } .lower-page.corporate .corporate-info-list .list-title, .lower-page.corporate .corporate-info-list .list-data { padding-inline: clamp(10px, 0px + 2.67vw, 20px); } @media screen and (min-width: 768px) { .lower-page.corporate .corporate-info-list .list-title, .lower-page.corporate .corporate-info-list .list-data { padding-inline: 40px; } } .lower-page.corporate .corporate-info-list .list-title { align-self: center; } .lower-page.corporate .corporate-info-list .list-data { border-left: 1px solid #3867de; padding-block: clamp(7.5px, 0px + 2vw, 15px); } .lower-page.corporate .corporate-info-list .list-data strong { color: #3867de; display: block; } .lower-page.corporate .access h4 { border: 1px solid currentColor; width: -moz-fit-content; width: fit-content; padding-inline: clamp(10px, 0px + 2.67vw, 20px); padding-block: clamp(5px, 0px + 1.33vw, 10px); font-size: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .lower-page.corporate .access h4 { font-size: 1.3rem; padding-inline: 25px; padding-block: 10px 6px; } } .lower-page.corporate .access .content-block { max-width: 1360px; } @media screen and (min-width: 1200px) { .lower-page.corporate .access .content-block { grid-template-columns: 1fr 1.2fr; } } .lower-page.corporate .access .content-paragraph { font-size: clamp(12px, 0px + 3.2vw, 24px); font-weight: 600; margin-top: clamp(10px, 0px + 2.67vw, 20px); } @media screen and (min-width: 768px) { .lower-page.corporate .access .content-paragraph { font-size: 1.15rem; } } .lower-page.corporate .access dl { margin-top: clamp(20px, 0px + 5.33vw, 40px); display: grid; row-gap: clamp(20px, 0px + 5.33vw, 40px); } @media screen and (min-width: 768px) { .lower-page.corporate .access dl { margin-top: 50px; row-gap: 30px; } } .lower-page.corporate .access .list-title { font-size: clamp(15px, 0px + 4vw, 30px); font-weight: 600; margin-bottom: clamp(5px, 0px + 1.33vw, 10px); } .lower-page.corporate .access .list-title::before { content: "●"; } .lower-page.corporate .access .list-data { font-size: clamp(12px, 0px + 3.2vw, 24px); } @media screen and (min-width: 768px) { .lower-page.corporate .access .list-data { font-size: 1.15rem; } } .lower-page.corporate .access .img-wrapper { margin-top: clamp(15px, 0px + 4vw, 30px); } .lower-page.corporate .customer .customer-list { font-size: clamp(14px, 0px + 3.73vw, 28px); } @media screen and (min-width: 768px) { .lower-page.corporate .customer .customer-list { font-size: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 8%; column-gap: 8%; width: 100%; max-width: 900px; margin-inline: auto; margin-top: -30px; } } .lower-page.corporate .customer .customer-list::after { content: "ほか"; display: block; text-align: right; margin-top: clamp(10px, 0px + 2.67vw, 20px); grid-column: 2/3; } .lower-page.corporate .customer .list-item { border-bottom: 1px solid #3867de; padding-inline: clamp(10px, 0px + 2.67vw, 20px); padding-block: clamp(10px, 0px + 2.67vw, 20px); } @media screen and (min-width: 768px) { .lower-page.corporate .customer .list-item { padding-block: 30px; } } .lower-page.corporate .list-title { font-size: clamp(18px, 0px + 4.8vw, 36px); color: #3867de; margin-bottom: clamp(5px, 0px + 1.33vw, 10px); } @media screen and (min-width: 768px) { .lower-page.corporate .list-title { font-size: 28px; } } .lower-page.corporate .signature { text-align: right; margin-top: clamp(50px, 0px + 13.33vw, 100px); font-weight: bold; } .lower-page.corporate.iso9001 .lead-block, .lower-page.corporate.iso14001 .lead-block, .lower-page.corporate.iso27001 .lead-block, .lower-page.corporate.fsc .lead-block, .lower-page.corporate.greenprinting .lead-block { margin-bottom: clamp(15px, 0px + 4vw, 30px); } .lower-page.corporate.iso9001 .lead-block .lead-paragraph, .lower-page.corporate.iso14001 .lead-block .lead-paragraph, .lower-page.corporate.iso27001 .lead-block .lead-paragraph, .lower-page.corporate.fsc .lead-block .lead-paragraph, .lower-page.corporate.greenprinting .lead-block .lead-paragraph { font-size: clamp(18px, 0px + 4.8vw, 36px); text-wrap: pretty; text-align: left; } @media screen and (min-width: 768px) { .lower-page.corporate.iso9001 .lead-block .lead-paragraph, .lower-page.corporate.iso14001 .lead-block .lead-paragraph, .lower-page.corporate.iso27001 .lead-block .lead-paragraph, .lower-page.corporate.fsc .lead-block .lead-paragraph, .lower-page.corporate.greenprinting .lead-block .lead-paragraph { font-size: 32px; width: -moz-fit-content; width: fit-content; margin-inline: auto; } } .lower-page.corporate.iso9001 .lead-block .content-paragraph, .lower-page.corporate.iso14001 .lead-block .content-paragraph, .lower-page.corporate.iso27001 .lead-block .content-paragraph, .lower-page.corporate.fsc .lead-block .content-paragraph, .lower-page.corporate.greenprinting .lead-block .content-paragraph { text-align: left; max-width: 1200px; margin-inline: auto; } .lower-page.corporate.iso9001 .content-block, .lower-page.corporate.iso14001 .content-block, .lower-page.corporate.iso27001 .content-block, .lower-page.corporate.fsc .content-block, .lower-page.corporate.greenprinting .content-block { row-gap: clamp(20px, 0px + 5.33vw, 40px); } @media screen and (min-width: 1024px) { .lower-page.corporate.iso9001 .content-block, .lower-page.corporate.iso14001 .content-block, .lower-page.corporate.iso27001 .content-block, .lower-page.corporate.fsc .content-block, .lower-page.corporate.greenprinting .content-block { grid-template-columns: 1fr 2.2fr; -moz-column-gap: 6%; column-gap: 6%; } } .lower-page.corporate.iso9001 .img-wrapper, .lower-page.corporate.iso14001 .img-wrapper, .lower-page.corporate.iso27001 .img-wrapper, .lower-page.corporate.fsc .img-wrapper, .lower-page.corporate.greenprinting .img-wrapper { max-width: 363px; margin-inline: auto; } .lower-page.corporate.iso9001 .text-wrapper, .lower-page.corporate.iso14001 .text-wrapper, .lower-page.corporate.iso27001 .text-wrapper, .lower-page.corporate.fsc .text-wrapper, .lower-page.corporate.greenprinting .text-wrapper { margin-left: 0; margin-top: 0; } .lower-page.corporate.iso9001 .policy-list, .lower-page.corporate.iso14001 .policy-list, .lower-page.corporate.iso27001 .policy-list, .lower-page.corporate.fsc .policy-list, .lower-page.corporate.greenprinting .policy-list { row-gap: clamp(7px, 0px + 1.87vw, 14px); font-size: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .lower-page.corporate.iso9001 .policy-list, .lower-page.corporate.iso14001 .policy-list, .lower-page.corporate.iso27001 .policy-list, .lower-page.corporate.fsc .policy-list, .lower-page.corporate.greenprinting .policy-list { font-size: 1rem; } } .lower-page.corporate.iso9001 ol.policy-list, .lower-page.corporate.iso14001 ol.policy-list, .lower-page.corporate.iso27001 ol.policy-list, .lower-page.corporate.fsc ol.policy-list, .lower-page.corporate.greenprinting ol.policy-list { counter-reset: policy; } .lower-page.corporate.iso9001 ol.policy-list .list-item, .lower-page.corporate.iso14001 ol.policy-list .list-item, .lower-page.corporate.iso27001 ol.policy-list .list-item, .lower-page.corporate.fsc ol.policy-list .list-item, .lower-page.corporate.greenprinting ol.policy-list .list-item { display: grid; grid-template-columns: auto 1fr; -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .lower-page.corporate.iso9001 ol.policy-list .list-item::before, .lower-page.corporate.iso14001 ol.policy-list .list-item::before, .lower-page.corporate.iso27001 ol.policy-list .list-item::before, .lower-page.corporate.fsc ol.policy-list .list-item::before, .lower-page.corporate.greenprinting ol.policy-list .list-item::before { counter-increment: policy 1; content: counter(policy) " )"; } .lower-page.corporate.iso9001 ul.policy-list .list-item, .lower-page.corporate.iso14001 ul.policy-list .list-item, .lower-page.corporate.iso27001 ul.policy-list .list-item, .lower-page.corporate.fsc ul.policy-list .list-item, .lower-page.corporate.greenprinting ul.policy-list .list-item { display: grid; grid-template-columns: auto 1fr; -moz-column-gap: 0.25rem; column-gap: 0.25rem; } .lower-page.corporate.iso9001 ul.policy-list .list-item::before, .lower-page.corporate.iso14001 ul.policy-list .list-item::before, .lower-page.corporate.iso27001 ul.policy-list .list-item::before, .lower-page.corporate.fsc ul.policy-list .list-item::before, .lower-page.corporate.greenprinting ul.policy-list .list-item::before { content: "・"; } .lower-page.corporate.fsc .lead-block, .lower-page.corporate.greenprinting .lead-block { font-family: "Zen Old Mincho", serif; } .lower-page.corporate.fsc .lead-block + .content-block, .lower-page.corporate.greenprinting .lead-block + .content-block { margin-bottom: clamp(15px, 0px + 4vw, 30px); } .lower-page.corporate.fsc .lead-block + .content-block .text-wrapper, .lower-page.corporate.greenprinting .lead-block + .content-block .text-wrapper { align-self: flex-start; } .lower-page.corporate.fsc .page-inner, .lower-page.corporate.greenprinting .page-inner { font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif; } .lower-page.corporate.fsc .content-block.no-grid, .lower-page.corporate.greenprinting .content-block.no-grid { display: block; } .lower-page.corporate.fsc .content-block.no-grid:not(:has(.policy-list)), .lower-page.corporate.greenprinting .content-block.no-grid:not(:has(.policy-list)) { background-color: #f8f8f8; padding-inline: clamp(10px, 0px + 2.67vw, 20px); padding-block: clamp(10px, 0px + 2.67vw, 20px); } .lower-page.corporate.fsc .content-block.no-grid .img-wrapper, .lower-page.corporate.greenprinting .content-block.no-grid .img-wrapper { margin-top: 20px; max-width: 100%; } .lower-page.corporate.fsc .content-block .content-paragraph + .box, .lower-page.corporate.greenprinting .content-block .content-paragraph + .box { border: 2px solid #3867de; border-radius: 4px; padding-inline: 20px; padding-block: 10px; margin-top: 10px; } .lower-page.corporate.fsc .content-block .content-paragraph + .box strong, .lower-page.corporate.greenprinting .content-block .content-paragraph + .box strong { display: block; margin-bottom: 0; color: #282828; } .lower-page.corporate.fsc .content-block .content-paragraph + .box strong::before, .lower-page.corporate.greenprinting .content-block .content-paragraph + .box strong::before { display: none; } .lower-page.corporate.fsc .text-wrapper:has(.policy-list), .lower-page.corporate.greenprinting .text-wrapper:has(.policy-list) { font-family: "Zen Old Mincho", serif; } .lower-page.corporate.fsc .text-wrapper:has(.policy-list) .content-paragraph, .lower-page.corporate.greenprinting .text-wrapper:has(.policy-list) .content-paragraph { font-weight: bold; margin-bottom: clamp(7.5px, 0px + 2vw, 15px); } @media screen and (min-width: 768px) { .lower-page.corporate.fsc .text-wrapper .content-paragraph, .lower-page.corporate.greenprinting .text-wrapper .content-paragraph { font-size: 1rem; } } .lower-page.corporate.fsc .text-wrapper h3, .lower-page.corporate.greenprinting .text-wrapper h3 { line-height: 1.7; font-size: clamp(18px, 0px + 4.8vw, 36px); color: #3867de; margin-bottom: clamp(5px, 0px + 1.33vw, 10px); } @media screen and (min-width: 768px) { .lower-page.corporate.fsc .text-wrapper h3, .lower-page.corporate.greenprinting .text-wrapper h3 { font-size: 28px; } } .lower-page.corporate.fsc .text-wrapper h4, .lower-page.corporate.greenprinting .text-wrapper h4 { line-height: 1.7; font-size: clamp(16px, 0px + 4.27vw, 32px); margin-bottom: clamp(5px, 0px + 1.33vw, 10px); } @media screen and (min-width: 768px) { .lower-page.corporate.fsc .text-wrapper h4, .lower-page.corporate.greenprinting .text-wrapper h4 { font-size: 1.15rem; } } .lower-page.corporate.fsc .text-wrapper .grid-wrapper, .lower-page.corporate.greenprinting .text-wrapper .grid-wrapper { display: grid; gap: clamp(10px, 0px + 2.67vw, 20px); } @media screen and (min-width: 768px) { .lower-page.corporate.fsc .text-wrapper .grid-wrapper, .lower-page.corporate.greenprinting .text-wrapper .grid-wrapper { grid-template-columns: repeat(2, 1fr); } } .lower-page.corporate.fsc .before, .lower-page.corporate.fsc .after, .lower-page.corporate.greenprinting .before, .lower-page.corporate.greenprinting .after { border: 2px solid #005032; border-radius: 4px; padding-inline: clamp(10px, 0px + 2.67vw, 20px); padding-block: clamp(5px, 0px + 1.33vw, 10px); } .lower-page.corporate.fsc .before, .lower-page.corporate.greenprinting .before { border-color: #858585; } .lower-page.corporate.fsc .before h4, .lower-page.corporate.greenprinting .before h4 { color: #858585; } .lower-page.corporate.fsc .after, .lower-page.corporate.greenprinting .after { position: relative; } .lower-page.corporate.fsc .after::before, .lower-page.corporate.greenprinting .after::before { content: ""; display: block; position: absolute; aspect-ratio: 5/4; width: clamp(25px, 0px + 6.67vw, 50px); background-color: #005032; top: 0; left: 50%; translate: -50% -75%; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); } @media screen and (min-width: 768px) { .lower-page.corporate.fsc .after::before, .lower-page.corporate.greenprinting .after::before { top: 50%; left: 0; rotate: -90deg; translate: -70% -50%; } } .lower-page.corporate.fsc .after h4, .lower-page.corporate.greenprinting .after h4 { color: #005032; } .lower-page.news .page-title { color: #3867de; mix-blend-mode: normal; } .lower-page.news .section { line-height: 1.7; } .lower-page.news .archive-wrapper { display: grid; -moz-column-gap: 50px; column-gap: 50px; row-gap: clamp(40px, 0px + 10.67vw, 80px); } @media screen and (min-width: 768px) { .lower-page.news .archive-wrapper { grid-template-columns: 1fr auto; } } .lower-page.news .archive-aside { font-size: clamp(15px, 0px + 4vw, 30px); padding-inline: clamp(15px, 0px + 4vw, 30px); padding-block: clamp(10px, 0px + 2.67vw, 20px); background-color: #f8f8f8; } @media screen and (min-width: 768px) { .lower-page.news .archive-aside { font-size: 1rem; height: -moz-fit-content; height: fit-content; } } .lower-page.news .archive-aside h3 { font-size: 110%; } .lower-page.news .year-nav .year-nav-list { display: flex; flex-wrap: wrap; gap: clamp(7.5px, 0px + 2vw, 15px); justify-content: space-between; } @media screen and (min-width: 768px) { .lower-page.news .year-nav .year-nav-list { display: grid; gap: 7px; } } .lower-page.news .year-nav .list-item a { color: #3867de; text-decoration: underline; } .lower-page.news .year-nav .list-item a:hover { text-decoration: none; } .lower-page.news .year-nav .list-item .active { font-weight: bold; color: #282828; text-decoration: none; } .lower-page.news .information-list { display: grid; row-gap: clamp(20px, 0px + 5.33vw, 40px); } .lower-page.news .information-list .list-item { background-color: #f8f8f8; padding-inline: clamp(10px, 0px + 2.67vw, 20px); padding-block: clamp(10px, 0px + 2.67vw, 20px); } .lower-page.news .information-list .list-item .btn { margin-top: clamp(10px, 0px + 2.67vw, 20px); padding-block: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .lower-page.news .information-list .list-item .btn { padding-block: 15px; } } .lower-page.news .article-title-wrapper { font-size: clamp(15px, 0px + 4vw, 30px); } @media screen and (min-width: 768px) { .lower-page.news .article-title-wrapper { font-size: 1.1rem; } } .lower-page.news .article-date { color: #3867de; } .lower-page.sustainability:has(.pop-up.active) { overflow-y: hidden; } .lower-page.sustainability .mv { background-image: url(/assets/img/lower-page/sustainability_mv.jpg); background-position: 20%; } .lower-page.sustainability .content-block { max-width: 1363px; } .lower-page.sustainability .lead-block .img-wrapper { max-width: 1083px; margin-inline: auto; margin-bottom: 70px; } .lower-page.sustainability .lead-block .lead-paragraph { max-width: 950px; margin-inline: auto; line-height: 2.2; font-size: 110%; } .lower-page.sustainability .lead-block .lead-paragraph strong { display: block; font-size: 200%; font-family: "Zen Old Mincho", serif; margin-bottom: 40px; } .lower-page.sustainability .grid-wrapper { row-gap: 60px; } @media screen and (min-width: 1024px) { .lower-page.sustainability .grid-wrapper { grid-template-columns: 1.22fr 1fr; -moz-column-gap: 100px; column-gap: 100px; } } @media screen and (min-width: 1024px) { .lower-page.sustainability .grid-wrapper > .img-wrapper { grid-column: 1/2; grid-row: 1/2; } } .lower-page.sustainability .grid-wrapper .sdgs-list { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; margin-bottom: 35px; } .lower-page.sustainability .grid-wrapper strong { display: block; font-size: 200%; font-weight: bold; margin-block: 64px 12px; } .lower-page.sustainability .sdgs-list { display: grid; } .lower-page.sustainability .sdgs-list .list-item { max-width: 110px; } .lower-page.sustainability .detailed-block { margin-top: 100px; } .lower-page.sustainability .detailed-block h4 { font-weight: 500; display: grid; width: -webkit-fill-available; width: -moz-available; width: stretch; grid-template-columns: auto 1fr; -moz-column-gap: clamp(20px, 0px + 5.33vw, 40px); column-gap: clamp(20px, 0px + 5.33vw, 40px); align-items: center; margin-bottom: clamp(10px, 0px + 2.67vw, 20px); line-height: 1.4; max-width: 1360px; margin-inline: auto; } @media screen and (min-width: 768px) { .lower-page.sustainability .detailed-block h4 { font-size: 130%; margin-bottom: 25px; } } .lower-page.sustainability .detailed-block h4::after { content: ""; display: block; width: -webkit-fill-available; width: -moz-available; width: stretch; height: 1px; background-color: #282828; } .lower-page.sustainability .detailed-block h4 span { display: grid; grid-template-columns: auto 1fr auto; width: -moz-fit-content; width: fit-content; -moz-column-gap: clamp(4px, 0px + 1.07vw, 8px); column-gap: clamp(4px, 0px + 1.07vw, 8px); } .lower-page.sustainability .detailed-block h4 span::before, .lower-page.sustainability .detailed-block h4 span::after { content: ""; display: block; width: 12px; border: 1px solid #282828; translate: 0 -7%; } .lower-page.sustainability .detailed-block h4 span::before { border-right: none; } .lower-page.sustainability .detailed-block h4 span::after { border-left: none; } .lower-page.sustainability .detailed-block .detailed-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); -moz-column-gap: clamp(21px, 0px + 5.6vw, 42px); column-gap: clamp(21px, 0px + 5.6vw, 42px); row-gap: clamp(50px, 0px + 13.33vw, 100px); } .lower-page.sustainability .detailed-block .detailed-list .list-title { font-size: 140%; } .lower-page.sustainability .detailed-block .detailed-list .list-title figcaption { line-height: 1.7; margin-block: clamp(7.5px, 0px + 2vw, 15px) clamp(10px, 0px + 2.67vw, 20px); } .lower-page.sustainability .detailed-block .detailed-list .list-data { line-height: 1.9; } .lower-page.sustainability .detailed-block .detailed-list .list-data .btn { margin-top: clamp(12.5px, 0px + 3.33vw, 25px); margin-inline-start: auto; padding-block: clamp(5px, 0px + 1.33vw, 10px); } @media screen and (min-width: 768px) { .lower-page.sustainability .detailed-block .detailed-list .list-data .btn { max-width: 240px; } } .lower-page.sustainability .map-wrapper { width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 30px; overflow-x: scroll; } @media screen and (min-width: 768px) { .lower-page.sustainability .map-wrapper { width: 100%; margin-inline: auto; overflow: auto; } } @media (pointer: coarse) { .lower-page.sustainability .map-wrapper { -ms-overflow-style: none; } .lower-page.sustainability .map-wrapper::-webkit-scrollbar { display: none; } } .lower-page.sustainability .map-wrapper svg { min-width: 1300px; } @media screen and (min-width: 768px) { .lower-page.sustainability .map-wrapper svg { width: 100%; min-width: unset; } } .lower-page.sustainability .map-wrapper svg .st-base { stroke-width: 0px; fill: #fff; filter: url(#common-drop-shadow); } .lower-page.sustainability .map-wrapper svg .st-no-filter { stroke-width: 0px; fill: #fff; } .lower-page.sustainability .map-wrapper svg .st-bg-gray { fill: #fff; stroke-width: 0px; } .lower-page.sustainability .map-wrapper svg .st-blue-rect { fill: #3962ad; stroke-width: 0px; } .lower-page.sustainability .map-wrapper svg .txt-main { fill: #272828; font-size: 33px; font-weight: 500; letter-spacing: 0.04em; } .lower-page.sustainability .map-wrapper svg .txt-step { fill: #479937; font-size: 45px; font-weight: 700; } .lower-page.sustainability .map-wrapper svg .txt-sub { font-size: 32px; letter-spacing: 0.06em; } .lower-page.sustainability .map-wrapper svg .line-arrow { fill: none; stroke: #272828; stroke-miterlimit: 10; stroke-width: 5px; } .lower-page.sustainability .map-wrapper svg .speech-bubble { cursor: pointer; pointer-events: all; transition: opacity 0.2s ease; } .lower-page.sustainability .map-wrapper svg .speech-bubble:hover { opacity: 0.8; } .lower-page.sustainability .pop-up-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: grid; place-content: center; z-index: 999; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 0.2s ease; } .lower-page.sustainability .pop-up-wrapper:has(.active) { opacity: 1; pointer-events: all; } .lower-page.sustainability .pop-up { visibility: hidden; background-color: #f8f8f8; padding: clamp(15px, 0px + 4vw, 30px); margin-inline: clamp(32.5px, 0px + 8.67vw, 65px); border-radius: 5px; max-width: 600px; grid-column: 1/2; grid-row: 1/2; height: -moz-fit-content; height: fit-content; align-self: center; } .lower-page.sustainability .pop-up .icon-list { display: flex; flex-wrap: wrap; -moz-column-gap: clamp(15px, 0px + 4vw, 30px); column-gap: clamp(15px, 0px + 4vw, 30px); row-gap: clamp(25px, 0px + 6.67vw, 50px); max-height: 80svh; overflow-y: scroll; } @media screen and (min-width: 1024px) { .lower-page.sustainability .pop-up .icon-list { overflow: unset; } } .lower-page.sustainability .pop-up .icon-list .flex-wrapper { display: flex; } .lower-page.sustainability .pop-up .icon-list img { width: 50%; margin-bottom: 10px; } @media screen and (min-width: 768px) { .lower-page.sustainability .pop-up .icon-list img { width: 100px; } } .lower-page.sustainability .pop-up.active { visibility: visible; pointer-events: all; } .lower-page.sustainability .certification p { text-align: center; } .lower-page.sustainability .certification figure { display: grid; grid-template-columns: repeat(3, 1fr); width: -moz-fit-content; width: fit-content; margin-inline: auto; justify-content: space-between; flex-wrap: wrap; margin-top: clamp(25px, 0px + 6.67vw, 50px); gap: clamp(10px, 0px + 2.67vw, 20px); } @media screen and (min-width: 768px) { .lower-page.sustainability .certification figure { display: flex; } } .lower-page.sustainability .certification figure img { max-width: 200px; } .lower-page.sustainability .certification .btn { margin-inline: auto; padding-inline: clamp(10px, 0px + 2.67vw, 20px); margin-top: clamp(20px, 0px + 5.33vw, 40px); padding-block: clamp(10px, 0px + 2.67vw, 20px); } @media screen and (min-width: 768px) { .lower-page.sustainability .certification .btn { max-width: 240px; } } .lower-page.sustainability.zero_emissions .lead-block strong { font-size: 160%; margin-bottom: 0; } .lower-page.sustainability.zero_emissions .lead-block p:has(strong) { margin-bottom: 0; } @media screen and (min-width: 1024px) { .lower-page.sustainability.zero_emissions .lead .grid-wrapper { grid-template-columns: 1fr 2.5fr; } } .lower-page.sustainability.zero_emissions .content-block p { font-weight: 600; margin-bottom: clamp(20px, 0px + 5.33vw, 40px); } .lower-page.sustainability.zero_emissions .scope-list { line-height: 1.7; display: grid; row-gap: clamp(15px, 0px + 4vw, 30px); counter-reset: step-counter; } .lower-page.sustainability.zero_emissions .scope-list .list-item { counter-increment: step-counter; display: grid; grid-template-columns: auto 1fr; } .lower-page.sustainability.zero_emissions .scope-list .list-title { font-weight: bold; font-size: 120%; display: grid; grid-template-columns: subgrid; grid-column: span 2; } .lower-page.sustainability.zero_emissions .scope-list .list-title::before { content: counter(step-counter) ". "; } .lower-page.sustainability.zero_emissions .scope-list .list-data { grid-column: 2/3; } .lower-page.sustainability.zero_emissions .img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); -moz-column-gap: clamp(15px, 0px + 4vw, 30px); column-gap: clamp(15px, 0px + 4vw, 30px); row-gap: clamp(15px, 0px + 4vw, 30px); margin-top: clamp(25px, 0px + 6.67vw, 50px); } .lower-page.service .mv { background-image: url(/assets/img/lower-page/service_mv.jpg); background-position: left top; } .lower-page.service .lead-block .lead-paragraph { font-family: "Zen Old Mincho", serif; } @media screen and (min-width: 1024px) { .lower-page.service .section:nth-of-type(even) .content-block:not(.lead-block) { grid-template-columns: 1fr 1.14fr; } } @media screen and (min-width: 1024px) { .lower-page.service .section:nth-of-type(even) .content-block:not(.lead-block) .img-wrapper { grid-column: 2/3; } } @media screen and (min-width: 1024px) { .lower-page.service .section:nth-of-type(even) .content-block:not(.lead-block) .text-wrapper { grid-row: 1/2; } } .lower-page.service .content-block { max-width: 1363px; display: grid; } @media screen and (min-width: 1024px) { .lower-page.service .content-block { grid-template-columns: 1.14fr 1fr; -moz-column-gap: 100px; column-gap: 100px; } } .lower-page.service .content-block .text-wrapper { align-self: center; height: -moz-fit-content; height: fit-content; } .lower-page.service .content-block p + h3 { margin-top: clamp(20px, 0px + 5.33vw, 40px); } .lower-page.service .content-block h3 { font-size: 210%; line-height: 1.7; font-weight: 500; margin-bottom: clamp(10px, 0px + 2.67vw, 20px); } .contact .main { font-weight: 500; font-size: clamp(15px, 0px + 4vw, 30px); line-height: 1.75; letter-spacing: 5%; } @media screen and (min-width: 768px) { .contact .main { font-size: 1rem; } } .contact .main .mv { background-image: url(/assets/img/lower-page/contact_mv.jpg); background-position: right center; } .contact .main .mv::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); } .contact .main p { padding-bottom: clamp(10px, 0px + 2.67vw, 20px); } .contact .main .content-block { max-width: 800px; } .contact .main .section { line-height: 1.7; } .contact .main .contact-form { width: 100%; } .contact .main .form-group { margin-bottom: 30px; } .contact .main .form-group label { display: block; margin-bottom: 10px; } .contact .main .form-group input, .contact .main .form-group textarea { width: 100%; padding: clamp(6px, 0px + 1.6vw, 12px); border: 1px solid #ddd; border-radius: clamp(2.5px, 0px + 0.67vw, 5px); font-family: inherit; } .contact .main .form-group input:focus, .contact .main .form-group textarea:focus { border-color: #3867de; } .contact .main .form-group textarea { resize: vertical; min-height: 150px; } .contact .main .form-group label[for=agree_check] { display: flex; justify-content: center; align-items: center; } .contact .main .form-group input[type=checkbox] { cursor: pointer; position: relative; width: clamp(25px, 0px + 6.67vw, 50px); aspect-ratio: 1/1; margin-right: 10px; } @media screen and (min-width: 768px) { .contact .main .form-group input[type=checkbox] { width: 20px; } } .contact .main .form-group input[type=checkbox]:checked::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(30px, 0px + 8vw, 60px); color: #3867de; content: "✓"; } @media screen and (min-width: 768px) { .contact .main .form-group input[type=checkbox]:checked::after { font-size: 1.8rem; } } .contact .main .error { color: #d32f2f; font-size: 80%; margin-top: clamp(2.5px, 0px + 0.67vw, 5px); } .contact .main .error-input { border-color: #d32f2f !important; } .contact .main .optional { font-size: 80%; color: #858585; margin-left: 8px; } .contact .main .confirm-container { width: 100%; } .contact .main .confirm-item { margin-bottom: clamp(12.5px, 0px + 3.33vw, 25px); padding-bottom: clamp(10px, 0px + 2.67vw, 20px); border-bottom: 1px solid #858585; } .contact .main .confirm-item:last-of-type { border-bottom: none; } .contact .main .confirm-label { font-weight: bold; color: #3867de; margin-bottom: clamp(2.5px, 0px + 0.67vw, 5px); } .contact .main .confirm-value { word-break: break-word; white-space: pre-wrap; } @media screen and (min-width: 768px) { .contact .main .button-group { display: flex; gap: 15px; margin-top: 40px; justify-content: center; } } .contact .main .error-message { color: #d32f2f; padding: 15px; background-color: #ffebee; border-radius: 5px; margin-bottom: 20px; } .contact .main .complete-container { border-radius: 10px; text-align: center; } .contact .main .complete-title { font-size: 28px; font-weight: bold; color: #333; margin-bottom: 20px; } .contact .main .complete-message { color: #666; line-height: 1.8; margin-bottom: 30px; } .contact .main .btn { font-weight: 500; font-size: clamp(15px, 0px + 4vw, 30px); line-height: 1; letter-spacing: 5%; margin-inline: auto; padding-block: clamp(20px, 0px + 5.33vw, 40px); max-width: 440px; } @media screen and (min-width: 768px) { .contact .main .btn { font-size: 1rem; padding-block: 32px; max-width: 300px; } } .contact .main .btn.back { background-color: #f8f8f8; color: #3867de; border-color: #3867de; } .contact .main .btn.back:hover { background-color: #3867de; color: #f8f8f8; } .contact .main .btn.back::after { rotate: 180deg; left: 8%; transform: translateY(50%); } .contact .main .btn-home { display: inline-block; background-color: #333; color: white; padding: 15px 40px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; text-decoration: none; } .contact .main .btn-home:hover { background-color: #555; } .observe-me { overflow: hidden; opacity: 0; } .observe-me.roller-layer { transform: translateY(150%) skewX(-30deg); opacity: 1; transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity 0.7s ease; } .observe-me.roller-layer.is-visible { transform: translateY(0) skewX(0); } .observe-me.fade-in-bottom { transform: translateY(100px); transition: transform 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity 0.7s ease; } .observe-me.fade-in-bottom.is-visible { transform: translateY(0); opacity: 1; } .observe-me.fade-in-bottom.btn { transition: transform 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity 0.7s ease, background-color 0.3s, color 0.3s, border-color 0.3s; } .observe-me.fade-in-left { transform: translateX(-70%); transition: transform 1s ease, opacity 0.7s ease; } .observe-me.fade-in-left.is-visible { transform: translateX(0); opacity: 1; } .observe-me.fade-in-left.btn { transition: transform 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity 0.7s ease, background-color 0.3s, color 0.3s, border-color 0.3s; } .observe-me.is-visible { overflow: visible; }/*# sourceMappingURL=style.css.map */