/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* 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; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { --design-width-pc: 1366px; --design-width-sp: 750px; --design-inner-width-pc: 1200px; --design-inner-width-sp: 660px; --header-height: 120px; --hidden-in-header: 100px; } @media (max-width: 1310px) { :root { --header-height: 162px; --hidden-in-header: 142px; } } @media only screen and (max-width: 767px) { :root { --header-height: 0px; --hidden-in-header: 0px; } } :root { --font-family-notoSansJP: "Noto Sans JP", sans-serif; --font-family-raleway: "Raleway", sans-serif; --font-family-default: var(--font-family-notoSansJP); --font-weight-black: 900; --font-weight-extra-bold: 800; --font-weight-bold: 700; --font-weight-semi-bold: 600; --font-weight-medium: 500; --font-weight-regular: 400; --font-weight-light: 300; --font-weight-extra-light: 200; --font-weight-thin: 100; --font-size-1366-10px: min(calc(0.25rem + 7.5 * (100vw / 1366)), 1rem); --font-size-1366-11px: min(calc(0.275rem + 8.25 * (100vw / 1366)), 1.1rem); --font-size-1366-12px: min(calc(0.3rem + 9 * (100vw / 1366)), 1.2rem); --font-size-1366-13px: min(calc(0.325rem + 9.75 * (100vw / 1366)), 1.3rem); --font-size-1366-14px: min(calc(0.35rem + 10.5 * (100vw / 1366)), 1.4rem); --font-size-1366-15px: min(calc(0.375rem + 11.25 * (100vw / 1366)), 1.5rem); --font-size-1366-16px: min(calc(0.4rem + 12 * (100vw / 1366)), 1.6rem); --font-size-1366-17px: min(calc(0.425rem + 12.75 * (100vw / 1366)), 1.7rem); --font-size-1366-18px: min(calc(0.45rem + 13.5 * (100vw / 1366)), 1.8rem); --font-size-1366-19px: min(calc(0.475rem + 14.25 * (100vw / 1366)), 1.9rem); --font-size-1366-20px: min(calc(0.5rem + 15 * (100vw / 1366)), 2rem); --font-size-1366-21px: min(calc(0.525rem + 15.75 * (100vw / 1366)), 2.1rem); --font-size-1366-22px: min(calc(0.55rem + 16.5 * (100vw / 1366)), 2.2rem); --font-size-1366-23px: min(calc(0.575rem + 17.25 * (100vw / 1366)), 2.3rem); --font-size-1366-24px: min(calc(0.6rem + 18 * (100vw / 1366)), 2.4rem); --font-size-1366-25px: min(calc(0.625rem + 18.75 * (100vw / 1366)), 2.5rem); --font-size-1366-26px: min(calc(0.65rem + 19.5 * (100vw / 1366)), 2.6rem); --font-size-1366-27px: min(calc(0.675rem + 20.25 * (100vw / 1366)), 2.7rem); --font-size-1366-28px: min(calc(0.7rem + 21 * (100vw / 1366)), 2.8rem); --font-size-1366-29px: min(calc(0.725rem + 21.75 * (100vw / 1366)), 2.9rem); --font-size-1366-30px: min(calc(0.75rem + 22.5 * (100vw / 1366)), 3rem); --font-size-1366-40px: min(calc(1rem + 30 * (100vw / 1366)), 4rem); --font-size-1366-45px: min(calc(1.125rem + 33.75 * (100vw / 1366)), 4.5rem); --font-size-1366-50px: min(calc(1.25rem + 37.5 * (100vw / 1366)), 5rem); --font-size-1366-90px: min(calc(2.25rem + 67.5 * (100vw / 1366)), 9rem); --font-size-1366-121px: min(calc(3.025rem + 90.75 * (100vw / 1366)), 12.1rem); --font-size-pc-10px: min(calc(0.25rem + 7.5 * (100vw / 1200)), 1rem); --font-size-pc-11px: min(calc(0.275rem + 8.25 * (100vw / 1200)), 1.1rem); --font-size-pc-12px: min(calc(0.3rem + 9 * (100vw / 1200)), 1.2rem); --font-size-pc-13px: min(calc(0.325rem + 9.75 * (100vw / 1200)), 1.3rem); --font-size-pc-14px: min(calc(0.35rem + 10.5 * (100vw / 1200)), 1.4rem); --font-size-pc-15px: min(calc(0.375rem + 11.25 * (100vw / 1200)), 1.5rem); --font-size-pc-16px: min(calc(0.4rem + 12 * (100vw / 1200)), 1.6rem); --font-size-pc-17px: min(calc(0.425rem + 12.75 * (100vw / 1200)), 1.7rem); --font-size-pc-18px: min(calc(0.45rem + 13.5 * (100vw / 1200)), 1.8rem); --font-size-pc-19px: min(calc(0.475rem + 14.25 * (100vw / 1200)), 1.9rem); --font-size-pc-20px: min(calc(0.5rem + 15 * (100vw / 1200)), 2rem); --font-size-pc-21px: min(calc(0.525rem + 15.75 * (100vw / 1200)), 2.1rem); --font-size-pc-22px: min(calc(0.55rem + 16.5 * (100vw / 1200)), 2.2rem); --font-size-pc-23px: min(calc(0.575rem + 17.25 * (100vw / 1200)), 2.3rem); --font-size-pc-24px: min(calc(0.6rem + 18 * (100vw / 1200)), 2.4rem); --font-size-pc-25px: min(calc(0.625rem + 18.75 * (100vw / 1200)), 2.5rem); --font-size-pc-26px: min(calc(0.65rem + 19.5 * (100vw / 1200)), 2.6rem); --font-size-pc-27px: min(calc(0.675rem + 20.25 * (100vw / 1200)), 2.7rem); --font-size-pc-28px: min(calc(0.7rem + 21 * (100vw / 1200)), 2.8rem); --font-size-pc-29px: min(calc(0.725rem + 21.75 * (100vw / 1200)), 2.9rem); --font-size-pc-30px: min(calc(0.75rem + 22.5 * (100vw / 1200)), 3rem); --font-size-pc-32px: min(calc(0.8rem + 24 * (100vw / 1200)), 3.2rem); --font-size-pc-35px: min(calc(0.875rem + 26.25 * (100vw / 1200)), 3.5rem); --font-size-pc-40px: min(calc(1rem + 30 * (100vw / 1200)), 4rem); --font-size-pc-45px: min(calc(1.125rem + 33.75 * (100vw / 1200)), 4.5rem); --font-size-pc-100px: min(calc(2.5rem + 75 * (100vw / 1200)), 10rem); --font-size-pc-160px: min(calc(4rem + 120 * (100vw / 1200)), 16rem); --font-size-sp-10px: min(calc(0.15rem + 8.5 * (100vw / 750)), 1.0226666667rem); --font-size-sp-11px: min(calc(0.165rem + 9.35 * (100vw / 750)), 1.1249333333rem); --font-size-sp-12px: min(calc(0.18rem + 10.2 * (100vw / 750)), 1.2272rem); --font-size-sp-13px: min(calc(0.195rem + 11.05 * (100vw / 750)), 1.3294666667rem); --font-size-sp-14px: min(calc(0.21rem + 11.9 * (100vw / 750)), 1.4317333333rem); --font-size-sp-15px: min(calc(0.225rem + 12.75 * (100vw / 750)), 1.534rem); --font-size-sp-16px: min(calc(0.24rem + 13.6 * (100vw / 750)), 1.6362666667rem); --font-size-sp-17px: min(calc(0.255rem + 14.45 * (100vw / 750)), 1.7385333333rem); --font-size-sp-18px: min(calc(0.27rem + 15.3 * (100vw / 750)), 1.8408rem); --font-size-sp-19px: min(calc(0.285rem + 16.15 * (100vw / 750)), 1.9430666667rem); --font-size-sp-20px: min(calc(0.3rem + 17 * (100vw / 750)), 2.0453333333rem); --font-size-sp-21px: min(calc(0.315rem + 17.85 * (100vw / 750)), 2.1476rem); --font-size-sp-22px: min(calc(0.33rem + 18.7 * (100vw / 750)), 2.2498666667rem); --font-size-sp-23px: min(calc(0.345rem + 19.55 * (100vw / 750)), 2.3521333333rem); --font-size-sp-24px: min(calc(0.36rem + 20.4 * (100vw / 750)), 2.4544rem); --font-size-sp-25px: min(calc(0.375rem + 21.25 * (100vw / 750)), 2.5566666667rem); --font-size-sp-26px: min(calc(0.39rem + 22.1 * (100vw / 750)), 2.6589333333rem); --font-size-sp-27px: min(calc(0.405rem + 22.95 * (100vw / 750)), 2.7612rem); --font-size-sp-28px: min(calc(0.42rem + 23.8 * (100vw / 750)), 2.8634666667rem); --font-size-sp-29px: min(calc(0.435rem + 24.65 * (100vw / 750)), 2.9657333333rem); --font-size-sp-30px: min(calc(0.45rem + 25.5 * (100vw / 750)), 3.068rem); --font-size-sp-32px: min(calc(0.48rem + 27.2 * (100vw / 750)), 3.2725333333rem); --font-size-sp-34px: min(calc(0.51rem + 28.9 * (100vw / 750)), 3.4770666667rem); --font-size-sp-35px: min(calc(0.525rem + 29.75 * (100vw / 750)), 3.5793333333rem); --font-size-sp-38px: min(calc(0.57rem + 32.3 * (100vw / 750)), 3.8861333333rem); --font-size-sp-45px: min(calc(0.675rem + 38.25 * (100vw / 750)), 4.602rem); --font-size-sp-50px: min(calc(0.75rem + 42.5 * (100vw / 750)), 5.1133333333rem); --font-size-sp-55px: min(calc(0.825rem + 46.75 * (100vw / 750)), 5.6246666667rem); --font-size-sp-60px: min(calc(0.9rem + 51 * (100vw / 750)), 6.136rem); --font-size-sp-80px: min(calc(1.2rem + 68 * (100vw / 750)), 8.1813333333rem); --font-size-sp-162px: min(calc(2.43rem + 137.7 * (100vw / 750)), 16.5672rem); --font-size-sp-240px: min(calc(3.6rem + 204 * (100vw / 750)), 24.544rem); --color-default: #333; --color-red: #e50011; --color-blue: #003b77; --color-white: #fff; --color-black: #000; --color-almostBlack: #1e1e1e; --color-gray: #ebebeb; --color-lightGray: #f5f5f5; --color-lightGray-2: #f7f7f8; --color-lightGray-3: #f5f7f9; --color-lightGray-4: #d7d7d7; --color-lightGray-5: #f3f3e5; --color-lightGray-6: #f1f1f1; --color-lightGray-7: #e6e6e6; --color-lightGray-8: #d4d4d4; --color-middleGray-1: #a4a4a4; --color-middleGray-2: #a1a1a1; --color-middleGray-3: #b7b7b7; --color-middleGray-4: #d6d6d6; --color-middleGray-5: #c3c3bf; --color-middleGray-6: #b9b9b9; --color-darkRed: #a2000c; --color-darkRed-2: #91000b; --color-darkRed-3: #630007; --color-darkRed-4: #89000a; --color-darkRed-5: #81000a; --color-darkRed-6: #4d1514; --color-dustyRose: #c7666d; --color-lightYellow: #ffea73; --color-lightYellow-2: #ffe87b; --color-lightYellow-3: #ffe87b; --color-lightYellow-4: #fae6a4; --color-offWhite: #f5f5ed; --color-offWhite-2: #f0f0e5; --color-lightBeige: #dedece; --color-goldenYellow: #ffd43d; --color-paleYellow: #fefcc3; --color-paleBlue: #ecf4f9; --color-warm-gray-1: #ddd6c6; --color-warm-gray-2: #f3f2f0; --color-deep-blue: #0a2e5f; --color-blue-tint-1: #e7eef6; --color-blue-tint-2: #dde6f0; --color-cream-yellow-1: #fff7e4; --color-cream-beige-1: #f7f2e6; --color-deep-blue: #004377; --color-lightPink: #ffe0e2; --color-yellow: #ffff04; --color-goldBrown: #a59753; --color-khakiGray: #a8a891; --color-font-base: var(--color-default); --color-focus-border: var(--color-black); --color-focus-bg: var(--color-goldenYellow); --color-lang-font: #4b4b4b; --color-lang-bg: var(--color-gray); --color-lang-font-active: var(--color-white); --color-lang-bg-active: var(--color-red); --color-link-marked-default: var(--color-default); --color-link-marked-hover: var(--color-red); --color-link-marked-active: var(--color-red); --color-link-marked-visited: var(--color-default); --color-link-marked-visited-hover: var(--color-red); --color-link-unmarked-default: var(--color-blue); --color-link-unmarked-hover: var(--color-red); --color-link-unmarked-active: var(--color-red); --color-link-unmarked-visited: var(--color-blue); --color-link-unmarked-visited-hover: var(--color-red); --color-page-title-bg: var(--color-lightGray-2); --color-page-title-bg-dark-red: var(--color-darkRed); --color-business-livestock: #00604f; --color-business-aqua: #1b42a6; --color-business-egg: #de2a00; --color-business-pet-food: #cf006d; --color-news-all: var(--color-lightPink); --color-news-information: #ffd3d3; --color-news-sustainability: #d4eebd; --color-news-livestock: #c4e6e0; --color-news-aqua: #aad0ff; --color-news-egg: #fae6a4; --color-news-pet-food: #ffe0f0; --color-livestock-1: #00604f; --color-livestock-2: #86e9d8; --color-livestock-3: #4bbf84; --color-livestock-4: rgb(134 233 216 / 70%); --color-aqua-1: #1b42a6; --color-aqua-2: #9fc4f2; --color-aqua-3: #6ca0df; --color-aqua-4: rgb(159 196 242 / 70%); --color-egg-1: #de2a00; --color-egg-2: #f3dd92; --color-egg-3: #f08c3a; --color-egg-4: rgb(243 221 146 / 70%); --color-pet-food-1: #cf006d; --color-pet-food-2: #fabddd; --color-pet-food-3: #d99fbe; --color-pet-food-4: rgb(250 189 221 / 70%); --carousel-color-button: var(--color-red); --carousel-color-pagination-dot: var(--color-darkRed-2); --carousel-color-card-link-icon: var(--color-red); --carousel-color-toggle-button-outline: var(--color-white); --c-business-lv3-inpage-link-color-arrow: var(--color-default); --c-business-lv3-commitment-color-bg: var(--color-middleGray-1); --c-business-lv3-commitment-color-number: var(--color-default); --c-business-lv3-commitment-color-link-icon: var(--color-default); --color-about-shadow--1: #bcebdd; --color-about-shadow--2: #ebebeb; --color-rdqm--1: #0a72e7; --color-rdqm--2: var(--color-red); --color-rdqm--3: #304056; --color-rdqm--4: #0042a3; --color-rdqm--5: #640008; --color-rdqm--6: #015f4f; --color-rdqm--7: #e8f6f3; --color-rdqm--8: #1b42a7; --color-rdqm--9: #e8f0f9; --color-sustainability-livestock: #c4e6e0; --color-sustainability-aqua: #aad0ff; --color-sustainability-egg: #fae6a4; --color-sustainability-pet-food: #ffe0f0; } html { scroll-behavior: smooth; font-size: 62.5%; /* 1rem = 10px */ scrollbar-gutter: stable; scroll-padding-top: 160px; } @media (max-width: 1310px) { html { scroll-padding-top: 202px; } } @media (max-width: 900px) { html { scroll-padding-top: 202px; } } @media only screen and (max-width: 767px) { html { scroll-padding-top: 26.6666666667vw; } } body { position: relative; font-family: var(--font-family-default); font-weight: var(--font-weight-regular); font-size: var(--font-size-pc-16px); color: var(--color-font-base); line-height: 1.7; background-color: var(--color-white); } @media only screen and (max-width: 767px) { body { font-size: var(--font-size-sp-26px); } } :where(img) { vertical-align: middle; } button { cursor: pointer; } sup { vertical-align: super; font-size: smaller; } sub { vertical-align: sub; font-size: smaller; } @media screen { .js-visible { -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s ease-out; transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s ease-out; transition: opacity 0.5s 0.5s, transform 0.5s 0.5s ease-out; transition: opacity 0.5s 0.5s, transform 0.5s 0.5s ease-out, -webkit-transform 0.5s 0.5s ease-out; } .is-before-visible { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .is-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .l-header { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; } @media print { .l-header { position: static; } } .l-header__inner { position: relative; z-index: 20; background-image: linear-gradient(90deg, var(--color-white) calc(100% - 100px), var(--color-almostBlack) calc(100% - 100px)); display: grid; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; grid-template-columns: 230px auto 100px 100px; grid-template-rows: 70px 50px; width: 100%; border-radius: 0 0 20px 20px; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); } @media (max-width: 1310px) { .l-header__inner { background: var(--color-white); grid-template-columns: 200px auto 70px 70px; grid-template-rows: 82px 80px; } } @media only screen and (max-width: 767px) { .l-header__inner { display: block; overflow: auto; background: none; -webkit-box-shadow: none; box-shadow: none; } } @media print { .l-header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; padding: 20px; } } .l-header__logo { grid-column: 1/2; grid-row: 1/3; padding-top: 30px; padding-left: 62px; } @media (max-width: 1310px) { .l-header__logo { grid-row: 1/2; padding-top: 20px; padding-left: 30px; } } @media only screen and (max-width: 767px) { .l-header__logo { position: fixed; top: 0; left: 0; padding-top: 5.7333333333vw; padding-left: 5.4666666667vw; background-color: var(--color-white); width: 36vw; height: 21.3333333333vw; border-radius: 0 0 4vw 0; -webkit-box-shadow: 0px 0px 2.6666666667vw rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2.6666666667vw rgba(0, 0, 0, 0.2); } } .l-header__logo-link { position: relative; display: inline-block; } .l-header__logo-link:focus-visible::after { content: ""; position: absolute; top: -13px; left: -13px; width: calc(100% + 26px); height: calc(100% + 26px); border: 3px solid var(--color-black); border-radius: 5px; } .l-header__logo-image { width: 150px; } @media (max-width: 1087px) { .l-header__logo-image { width: min(14vw, 150px); } } @media only screen and (max-width: 767px) { .l-header__logo-image { width: 25.0666666667vw; } } .l-header__lang { grid-column: 2/3; grid-row: 1/2; padding-right: 25px; display: grid; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: auto auto; gap: 22px; } @media only screen and (max-width: 767px) { .l-header__lang { display: none; } } .l-header__mitsubishi-group > img { display: block; width: 223px; } .l-header__lang-btn { display: grid; height: 30px; grid-template-columns: repeat(2, 79px); gap: 2px; } @media print { .l-header__lang-btn { display: none; } } .l-header__lang-btn > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 15px 0 0 15px; background-color: var(--color-lang-bg-active); font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-lang-font-active); text-align: center; line-height: 1; } .l-header__lang-btn > a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0 15px 15px 0; background-color: var(--color-lang-bg); font-size: 14px; font-weight: var(--font-weight-medium); text-align: center; line-height: 1; overflow: hidden; } .l-header__lang-btn > a::before { content: ""; display: block; aspect-ratio: 1/1; position: absolute; z-index: 1; top: 50%; left: 50%; width: 0; background-color: var(--color-lang-bg-active); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.3s ease, height 0.3s ease; transition: width 0.3s ease, height 0.3s ease; } @media (hover: hover) and (pointer: fine) { .l-header__lang-btn > a:hover::before { width: 300%; } .l-header__lang-btn > a:hover > span { color: var(--color-lang-font-active); } } .l-header__lang-btn > a:focus-visible { -webkit-box-shadow: inset 0 0 0 3px var(--color-black); box-shadow: inset 0 0 0 3px var(--color-black); } .l-header__lang-btn > a > span { position: relative; z-index: 2; color: var(--color-lang-font); -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .l-header__gnav { grid-column: 2/3; grid-row: 2/3; padding-right: 20px; } @media (max-width: 1310px) { .l-header__gnav { grid-column: 1/5; padding-right: 0; } } @media only screen and (max-width: 767px) { .l-header__gnav { display: none; } } @media print { .l-header__gnav { display: none; } } .l-header__contact { grid-column: 3/4; grid-row: 1/3; } @media (max-width: 1310px) { .l-header__contact { grid-row: 1/2; } } @media only screen and (max-width: 767px) { .l-header__contact { display: none; } } @media print { .l-header__contact { display: none; } } .l-header__contact-link { position: relative; display: block; width: 100%; height: 100%; background-color: var(--color-red); overflow: hidden; } .l-header__contact-link::before { content: ""; display: block; aspect-ratio: 1/1; position: absolute; z-index: 1; top: 50%; left: 50%; width: 0; background-color: var(--color-white); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } .l-header__contact-link::after { position: absolute; top: 0; left: 0; z-index: 2; content: ""; display: block; width: 100%; height: 100%; border: 4px solid var(--color-red); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .l-header__contact-link:focus-visible::before { width: 300%; } .l-header__contact-link:focus-visible::after { border: 3px solid var(--color-black); top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 5px; } .l-header__contact-link:focus-visible .l-header__contact-icon { background-color: var(--color-black); } @media (hover: hover) and (pointer: fine) { .l-header__contact-link:hover::before { width: 300%; } .l-header__contact-link:hover .l-header__contact-icon { background-color: var(--color-red); } } .l-header__contact-icon { position: relative; z-index: 2; display: block; width: 100%; height: 100%; background-color: var(--color-white); -webkit-mask-image: url(/assets/img/common/button_contact.svg); mask-image: url(/assets/img/common/button_contact.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 70px 60px; mask-size: 70px 60px; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } @media (max-width: 1310px) { .l-header__contact-icon { -webkit-mask-size: 50px 43px; mask-size: 50px 43px; } } .l-header__menu-button { grid-column: 4/5; grid-row: 1/3; border-radius: 0 0 20px 0; } @media (max-width: 1310px) { .l-header__menu-button { grid-row: 1/2; border-radius: 0; } } @media only screen and (max-width: 767px) { .l-header__menu-button { display: none; } } @media print { .l-header__menu-button { display: none; } } .l-header__menu-button-trigger { position: relative; display: block; width: 100%; height: 100%; border-radius: 0 0 20px 0; background-color: var(--color-almostBlack); cursor: pointer; overflow: hidden; } @media (max-width: 1310px) { .l-header__menu-button-trigger { border-radius: 0; } } .l-header__menu-button-trigger::before { content: ""; display: block; aspect-ratio: 1/1; position: absolute; z-index: 1; top: 50%; left: 50%; width: 0; background-color: var(--color-white); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } .l-header__menu-button-trigger::after { position: absolute; top: 0; left: 0; z-index: 2; content: ""; display: block; width: 100%; height: 100%; border-radius: 0 0 20px 0; border: 4px solid var(--color-almostBlack); } @media (max-width: 1310px) { .l-header__menu-button-trigger::after { border-radius: 0; } } .l-header__menu-button-trigger:focus-visible::before { width: 300%; } .l-header__menu-button-trigger:focus-visible::after { border: 3px solid var(--color-black); top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 5px 5px 19px 5px; } @media (max-width: 1310px) { .l-header__menu-button-trigger:focus-visible::after { border-radius: 5px; } } .l-header__menu-button-trigger:focus-visible .l-header__menu-button-icon { background-color: var(--color-black); } @media (hover: hover) and (pointer: fine) { .l-header__menu-button-trigger:hover::before { width: 300%; } .l-header__menu-button-trigger:hover .l-header__menu-button-icon { background-color: var(--color-almostBlack); } } .l-header__menu-button-icon { position: relative; z-index: 2; display: block; width: 100%; height: 100%; background-color: var(--color-white); -webkit-mask-image: url(/assets/img/common/button_menu.svg); mask-image: url(/assets/img/common/button_menu.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 41px 44px; mask-size: 41px 44px; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } @media (max-width: 1310px) { .l-header__menu-button-icon { -webkit-mask-size: 34px 37px; mask-size: 34px 37px; } } .l-header__sp-menu-button { display: none; position: fixed; top: 4vw; right: 4vw; } @media only screen and (max-width: 767px) { .l-header__sp-menu-button { display: block; } } @media print { .l-header__sp-menu-button { display: none; } } .l-header__sp-menu-button-trigger { position: relative; display: block; background-color: var(--color-almostBlack); cursor: pointer; overflow: hidden; width: 15.8666666667vw; height: 15.8666666667vw; border-radius: 50%; -webkit-box-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, 0.2); box-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, 0.2); } .l-header__sp-menu-button-trigger::before { content: ""; display: block; position: absolute; z-index: 1; top: 50%; left: 50%; width: 0; height: 0; background-color: var(--color-white); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.3s ease, height 0.3s ease; transition: width 0.3s ease, height 0.3s ease; } .l-header__sp-menu-button-trigger::after { position: absolute; top: 0; left: 0; z-index: 2; content: ""; display: block; width: 100%; height: 100%; border-radius: 0 0 20px 0; border: 4px solid var(--color-almostBlack); } @media only screen and (max-width: 767px) { .l-header__sp-menu-button-trigger::after { display: none; } } .l-header__sp-menu-button-trigger:focus-visible { background-color: #fff; border: 3px solid var(--color-black); } .l-header__sp-menu-button-trigger:focus-visible .l-header__sp-menu-button-icon { background-color: var(--color-black); } .l-header__sp-menu-button-icon { position: relative; z-index: 2; display: block; width: 100%; height: 100%; background-color: var(--color-white); -webkit-mask-image: url(/assets/img/common/button_menu.svg); mask-image: url(/assets/img/common/button_menu.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 6.4vw 7.2vw; mask-size: 6.4vw 7.2vw; } .l-header__mega-menu { position: absolute; top: calc(100% - 35px); width: 100%; } @media only screen and (max-width: 767px) { .l-header__mega-menu { display: none; } } @media print { .l-header__mega-menu { display: none; } } @media (min-width: 768px) { .l-header--home { pointer-events: none; visibility: hidden; opacity: 0; -webkit-transform: translateY(-180px); transform: translateY(-180px); -webkit-transition: opacity 0.4s, visibility 0.4s, -webkit-transform 0.4s ease-out; transition: opacity 0.4s, visibility 0.4s, -webkit-transform 0.4s ease-out; transition: opacity 0.4s, transform 0.4s ease-out, visibility 0.4s; transition: opacity 0.4s, transform 0.4s ease-out, visibility 0.4s, -webkit-transform 0.4s ease-out; } .l-header--home.is-show { pointer-events: all; visibility: visible; opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } .l-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 min(100px, 8.3333333333vw); overflow: hidden; } @media only screen and (max-width: 767px) { .l-main { padding: 0 0 13.3333333333vw; } } @media print { .l-main { padding-top: 0; } } .l-main--home { padding: 0 0 min(100px, 7.3206442167vw); } @media only screen and (max-width: 767px) { .l-main--home { padding: 0 0 13.3333333333vw; } } .l-main--news { padding: 0 0 min(60px, 5vw); } @media only screen and (max-width: 767px) { .l-main--news { padding: 0 0 8vw; } } .l-main--preview { padding: min(200px, 14.6412884334vw) 0 min(100px, 7.3206442167vw); } @media only screen and (max-width: 767px) { .l-main--preview { padding: 26.6666666667vw 0; } } .l-main__inner { max-width: var(--design-inner-width-pc); width: 100%; padding: min(80px, 6.6666666667vw) min(60px, 5vw) 0; } @media only screen and (max-width: 767px) { .l-main__inner { max-width: none; width: 100%; padding: 8.4vw 6vw 0; } } .l-main--news-post .l-main__inner { padding: 0 min(60px, 5vw) 0; } @media only screen and (max-width: 767px) { .l-main--news-post .l-main__inner { padding: 0 6vw; } } .l-main--sustainability-case .l-main__inner { padding: min(78px, 6.5vw) min(60px, 5vw) 0; } @media only screen and (max-width: 767px) { .l-main--sustainability-case .l-main__inner { padding: 8.4vw 6vw 0; } } .l-main--corporate-message .l-main__inner:not(.l-main__inner--2nd) { padding-top: min(60px, 5vw); } @media only screen and (max-width: 767px) { .l-main--corporate-message .l-main__inner:not(.l-main__inner--2nd) { padding-top: 5.7333333333vw; } } .l-main--corporate-outline .l-main__inner:not(.l-main__inner--2nd) { padding-top: min(60px, 5vw); } @media only screen and (max-width: 767px) { .l-main--corporate-outline .l-main__inner:not(.l-main__inner--2nd) { padding-top: 5.7333333333vw; } } .l-main__inner--2nd { padding: 0 min(40px, 3.3333333333vw); } @media only screen and (max-width: 767px) { .l-main__inner--2nd { padding: 0; } } .l-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 min(60px, 5vw); } @media only screen and (max-width: 767px) { .l-wrapper { padding: 0; } } .l-wrapper--pc-col2--sp-col1 .l-wrapper__inner { max-width: var(--design-inner-width-pc); display: grid; grid-template-columns: repeat(2, 1fr); gap: min(40px, 3.3333333333vw); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media only screen and (max-width: 767px) { .l-wrapper--pc-col2--sp-col1 .l-wrapper__inner { padding: 5.3333333333vw 6vw; grid-template-columns: 100%; gap: 5.3333333333vw; } } .gnav { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; gap: min(25px, 1.8301610542vw); list-style-type: none; } @media (max-width: 1310px) { .gnav { gap: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .gnav__item > a { position: relative; display: block; height: 100%; padding-top: 3px; font-size: var(--font-size-1366-17px); font-weight: var(--font-weight-medium); line-height: 1.8823529412; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media (max-width: 1310px) { .gnav__item > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; line-height: 1.7; padding-top: 0; padding-bottom: 3px; text-align: center; } } @media (max-width: 900px) { .gnav__item > a { -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding-top: 13px; } } .gnav__item > a br { display: none; } @media (max-width: 900px) { .gnav__item > a br { display: inline; } } .gnav__item > a::after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: 4px; background-color: var(--color-red); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .gnav__item > a:focus-visible::before { content: ""; position: absolute; z-index: 2; display: block; top: -1px; left: -6px; width: calc(100% + 12px); height: calc(100% + 2px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-transform: none; transform: none; -webkit-transition: none; transition: none; -webkit-box-shadow: 0px 0px 0px 2px var(--color-white); box-shadow: 0px 0px 0px 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .gnav__item > a:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .gnav__item.is-current > a::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .gnav__icon-external-link { display: inline-block; margin-left: 0.2941176471em; width: 0.7647058824em; background-color: var(--color-red); aspect-ratio: 18/14; -webkit-mask-image: url(/assets/img/common/icon_external-link.svg); mask-image: url(/assets/img/common/icon_external-link.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media print { .mega-menu { display: none; } } .mega-menu > ul { position: relative; } .mega-menu__item { position: absolute; top: 0; left: 0; width: 100%; display: grid; grid-template-rows: 0fr; -webkit-transition: grid-template-rows 0.3s; transition: grid-template-rows 0.3s; transition: grid-template-rows 0.3s, -ms-grid-rows 0.3s; overflow: hidden; } .mega-menu__item.is-open { grid-template-rows: 1fr; } .mega-menu__item.is-open .mega-menu__item-content > div { -webkit-transition: opacity 1s 0.2s, -webkit-transform 0.5s ease-out; transition: opacity 1s 0.2s, -webkit-transform 0.5s ease-out; transition: opacity 1s 0.2s, transform 0.5s ease-out; transition: opacity 1s 0.2s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out; opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } .mega-menu__item-inner { padding-bottom: 15px; overflow: hidden; } .mega-menu__item-content { position: relative; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 35px; background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--color-red)), color-stop(50%, var(--color-darkRed))); background-image: linear-gradient(90deg, var(--color-red) 50%, var(--color-darkRed) 50%); -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); overflow: hidden auto; } .mega-menu__item-content::after { content: ""; display: block; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: min(1366px, 100vw); height: 100%; background-image: -webkit-gradient(linear, left top, right top, color-stop(36.8228%, var(--color-red)), color-stop(36.8228%, var(--color-darkRed))); background-image: linear-gradient(90deg, var(--color-red) 36.8228%, var(--color-darkRed) 36.8228%); } .mega-menu__item--business .mega-menu__item-content::after { --left-width: 780px; } @media screen and (max-width: 1080px) { .mega-menu__item--business .mega-menu__item-content::after { --left-width: 720px; } } @media screen and (max-width: 980px) { .mega-menu__item--business .mega-menu__item-content::after { --left-width: 650px; } } @media screen and (max-width: 900px) { .mega-menu__item--business .mega-menu__item-content::after { --left-width: 580px; } } .mega-menu__item--business .mega-menu__item-content::after { background-image: -webkit-gradient(linear, right top, left top, from(var(--color-darkRed)), to(var(--color-red))); background-image: linear-gradient(to left, var(--color-darkRed) var(--left-width), var(--color-red) var(--left-width)); } .mega-menu__item-content > div { position: relative; z-index: 2; display: grid; grid-template-columns: 36.82284041% 63.17715959%; width: min(1366px, 100vw); max-width: 100%; opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); } .mega-menu__item--business .mega-menu__item-content > div { grid-template-columns: auto 780px; } @media screen and (max-width: 1080px) { .mega-menu__item--business .mega-menu__item-content > div { grid-template-columns: auto 720px; } } @media screen and (max-width: 980px) { .mega-menu__item--business .mega-menu__item-content > div { grid-template-columns: auto 650px; } } @media screen and (max-width: 900px) { .mega-menu__item--business .mega-menu__item-content > div { grid-template-columns: auto 580px; } } @media (max-width: 980px) { .mega-menu__item--sustainability .mega-menu__item-content > div { grid-template-columns: 360px auto; } } .mega-menu__category { padding: min(33px, 2.4158125915vw) 0 min(47px, 3.4407027818vw) min(60px, 4.39238653vw); background-color: var(--color-red); min-height: min(320px, 23.4260614934vw); } .mega-menu__category-link { position: relative; display: inline-block; font-size: clamp(34px, 26.2943143813px + 1.0033444816vw, 40px); font-weight: var(--font-weight-light); color: var(--color-white); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media screen and (max-width: 820px) { .mega-menu__item--business .mega-menu__category-link { font-size: 26px; } } .mega-menu__category-link::after { position: absolute; left: 0; bottom: -0.25em; content: ""; width: 100%; height: 2px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .mega-menu__category-link:focus-visible::before { position: absolute; top: 0.225em; left: -0.275em; content: ""; display: block; width: calc(100% + 0.55em); height: calc(100% - 0.375em); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .mega-menu__category-link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } .mega-menu__category-link:hover .mega-menu__category-link-icon::before { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .mega-menu__category-link:hover .mega-menu__category-link-icon::after { background-color: var(--color-red); } } .mega-menu__category-link-icon { position: relative; display: inline-block; margin-left: 0.35em; -webkit-transform: translateY(0.1em); transform: translateY(0.1em); width: 0.9em; height: 0.9em; vertical-align: baseline; } .mega-menu__category-link-icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(100% + 4px); height: calc(100% + 4px); background-color: var(--color-white); border-radius: 50%; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transform-origin: center center; transform-origin: center center; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .mega-menu__category-link-icon::after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--color-white); -webkit-mask-image: url(/assets/img/common/icon_link_right_circle.svg); mask-image: url(/assets/img/common/icon_link_right_circle.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .mega-menu__category-inner { margin-top: min(15px, 1.0980966325vw); } .mega-menu__category-inner-link { position: relative; display: inline-block; padding-left: 0.8888888889em; font-size: clamp(16px, 13.4314381271px + 0.3344481605vw, 18px); font-weight: var(--font-weight-regular); color: var(--color-white); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .mega-menu__category-inner-link::after { position: absolute; left: 0; bottom: -0.25em; content: ""; width: 100%; height: 2px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .mega-menu__category-inner-link:focus-visible::before { content: ""; position: absolute; top: 0; left: -0.5555555556em; width: calc(100% + 0.5555555556em + 8px); height: calc(100% + 1px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .mega-menu__category-inner-link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .mega-menu__category-inner-link > br { display: none; } @media screen and (max-width: 820px) { .mega-menu__category-inner-link > br { display: inline; } } .mega-menu__category-inner-link-icon { position: absolute; top: 0.6111111111em; left: 0; display: inline-block; width: 0.4444444444em; background-color: var(--color-white); aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .mega-menu__summary { background-color: var(--color-darkRed); display: grid; } .mega-menu__summary--pickup { grid-template-columns: clamp(242px, 90.4548494983px + 19.7324414716vw, 360px) auto; } .mega-menu__item--business .mega-menu__summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mega-menu__pickup { padding: min(50px, 3.6603221083vw) min(40px, 2.9282576867vw); } .mega-menu__pickup-image { display: block; position: relative; border-radius: min(5px, 0.3660322108vw); overflow: hidden; } .mega-menu__pickup-image::after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: min(4px, 0.2928257687vw); background-color: var(--color-red); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .mega-menu__pickup-image:focus-visible { -webkit-box-shadow: 0 0 0 min(3px, 0.2196193265vw) var(--color-black), 0 0 0 min(5px, 0.3660322108vw) var(--color-white); box-shadow: 0 0 0 min(3px, 0.2196193265vw) var(--color-black), 0 0 0 min(5px, 0.3660322108vw) var(--color-white); } @media (hover: hover) and (pointer: fine) { .mega-menu__pickup-image:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .mega-menu__pickup-image > img { width: 100%; } .mega-menu__pickup-text { display: inline-block; padding-left: 0.8888888889em; position: relative; margin-top: 0.3333333333em; margin-left: 0.5555555556em; display: inline-block; font-size: clamp(16px, 13.4314381271px + 0.3344481605vw, 18px); font-weight: var(--font-weight-middle); color: var(--color-white); } .mega-menu__pickup-text::after { position: absolute; left: 0; bottom: -0.25em; content: ""; width: 100%; height: 2px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .mega-menu__pickup-text:focus-visible::before { content: ""; position: absolute; top: 0; left: -0.5555555556em; width: calc(100% + 0.5555555556em + 8px); height: 100%; border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .mega-menu__pickup-text:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .mega-menu__pickup-text-icon { position: absolute; top: 0.6111111111em; left: 0; content: ""; display: inline-block; width: 0.4444444444em; background-color: var(--color-white); aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .mega-menu__link-list { padding: min(43px, 3.1478770132vw) min(50px, 3.6603221083vw) min(44px, 3.2210834553vw) min(30px, 2.196193265vw); list-style-type: none; } .mega-menu__item--corporate .mega-menu__link-list { border-left: 1px solid var(--color-dustyRose); padding-left: min(20px, 1.4641288433vw); } .mega-menu__link-item:nth-child(n+2) { margin-top: min(10px, 0.7320644217vw); } .mega-menu__summary-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: min(11px, 0.8052708638vw); -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding: min(43px, 3.1478770132vw) min(20px, 1.4641288433vw) min(44px, 3.2210834553vw); } .mega-menu__summary-col:nth-child(n+2) { border-left: 1px solid var(--color-dustyRose); } @media (max-width: 900px) { .mega-menu__summary-col { padding-left: min(10px, 0.7320644217vw); } .mega-menu__summary-col > .mega-menu__link { margin-left: min(16px, 1.1713030747vw); } } .mega-menu__link { position: relative; display: inline-block; padding-left: 0.8888888889em; font-size: clamp(16px, 13.4314381271px + 0.3344481605vw, 18px); font-weight: var(--font-weight-regular); color: var(--color-white); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .mega-menu__item--business .mega-menu__link { font-weight: var(--font-weight-bold); } .mega-menu__link::after { position: absolute; left: 0; bottom: -0.25em; content: ""; width: 100%; height: 2px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .mega-menu__link:focus-visible::before { content: ""; position: absolute; top: 0; left: -0.5555555556em; width: calc(100% + 0.5555555556em + 8px); height: calc(100% + 1px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .mega-menu__link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .mega-menu__link-icon { position: absolute; top: 0.6111111111em; left: 0; display: inline-block; width: 0.4444444444em; background-color: var(--color-white); aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .mega-menu__text { position: relative; display: inline-block; padding-left: 0.8888888889em; font-size: clamp(16px, 13.4314381271px + 0.3344481605vw, 18px); font-weight: var(--font-weight-bold); color: var(--color-white); } .mega-menu__sublist { padding-left: calc(clamp(16px, 13.4314381271px + 0.3344481605vw, 18px) * 0.8888888889); } .mega-menu__sublist-link { position: relative; display: inline-block; padding-left: 1.0625em; font-size: var(--font-size-pc-16px); font-weight: var(--font-weight-regular); color: var(--color-white); } .mega-menu__sublist-link::after { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 1px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .mega-menu__sublist-link:focus-visible::before { content: ""; position: absolute; top: 0; left: -0.5em; width: calc(100% + 0.625em + 8px); height: calc(100% + 1px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .mega-menu__sublist-link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .mega-menu__sublist-link-icon { position: absolute; top: 0.625em; left: 0; display: inline-block; width: 0.375em; background-color: var(--color-white); aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .mega-menu__item--business .mega-menu__br { display: none; } @media screen and (max-width: 980px) { .mega-menu__item--business .mega-menu__br { display: inline; } } .pc-menu { position: fixed; z-index: 99999; width: 100%; height: 100vh; height: 100dvh; background-color: var(--color-darkRed); display: grid; grid-template-rows: 96px auto; opacity: 0; -webkit-transform: scale(0.6); transform: scale(0.6); pointer-events: none; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } @media only screen and (max-width: 767px) { .pc-menu { display: none; } } .pc-menu.is-open { opacity: 1; -webkit-transform: scale(1); transform: scale(1); pointer-events: all; visibility: visible; } @media print { .pc-menu { display: none; } } .pc-menu::after { content: ""; display: block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/assets/img/common/logo_nosan_symbol.svg); background-position: center center; background-size: min(1246px, 91.21522694vw) auto; background-repeat: no-repeat; opacity: 0.3; } .pc-menu__close-button { position: absolute; top: min(30px, 2.5vw); right: min(30px, 2.5vw); cursor: pointer; } .pc-menu__close-button:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(100% + min(16px, 1.3333333333vw)); height: calc(100% + min(16px, 1.3333333333vw)); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pc-menu__close-button-icon { display: block; width: min(34px, 2.8333333333vw); height: min(34px, 2.8333333333vw); background-color: var(--color-white); -webkit-mask-image: url(/assets/img/common/button_menu_close.svg); mask-image: url(/assets/img/common/button_menu_close.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .pc-menu__header { display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: min(100%, var(--design-inner-width-pc)); padding: 0 min(83px, 6.9166666667vw); } .pc-menu__header-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .pc-menu__lang-btn { display: grid; height: 30px; grid-template-columns: repeat(2, 79px); gap: 2px; } .pc-menu__lang-btn > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 15px 0 0 15px; background-color: var(--color-lang-bg-active); font-size: 1.4rem; font-weight: var(--font-weight-medium); color: var(--color-lang-font-active); text-align: center; line-height: 1; } .pc-menu__lang-btn > a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0 15px 15px 0; background-color: var(--color-lang-bg); font-size: 1.4rem; font-weight: var(--font-weight-medium); text-align: center; line-height: 1; overflow: hidden; } .pc-menu__lang-btn > a::before { content: ""; display: block; position: absolute; z-index: 1; top: 50%; left: 50%; width: 0; height: 0; background-color: var(--color-lang-bg-active); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.3s ease, height 0.3s ease; transition: width 0.3s ease, height 0.3s ease; } .pc-menu__lang-btn > a:focus-visible { -webkit-box-shadow: inset 0 0 0 3px var(--color-black); box-shadow: inset 0 0 0 3px var(--color-black); } @media (hover: hover) and (pointer: fine) { .pc-menu__lang-btn > a:hover::before { width: 300%; height: 300%; } .pc-menu__lang-btn > a:hover > span { color: var(--color-lang-font-active); } } .pc-menu__lang-btn > a > span { position: relative; z-index: 2; color: var(--color-lang-font); -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .pc-menu__main { overflow: auto; } .pc-menu__main-inner { display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; grid-template-columns: min(100%, var(--design-inner-width-pc)); padding: min(6px, 0.5vw) min(60px, 5vw) min(74px, 6.1666666667vw); } .pc-menu__body { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, auto); gap: 0 min(60px, 5vw); width: 100%; } .pc-menu__box { border-top: 1px solid var(--color-white); padding: min(12px, 1vw) min(8px, 0.6666666667vw) min(45px, 3.75vw); } .pc-menu__box--home { grid-column: 1/2; grid-row: 1/2; } .pc-menu__box--about { grid-column: 2/3; grid-row: 1/2; } .pc-menu__box--corporate { grid-column: 3/4; grid-row: 1/3; } .pc-menu__box--business { grid-column: 1/3; grid-row: 2/3; padding: min(12px, 1vw) 0 min(45px, 3.75vw); } .pc-menu__box--rdqm { grid-column: 1/2; grid-row: 3/4; } .pc-menu__box--sustainability { grid-column: 2/3; grid-row: 3/4; } .pc-menu__box--recruit { grid-column: 3/4; grid-row: 3/4; } .pc-menu__box--news { grid-column: 1/2; grid-row: 4/5; } .pc-menu__box--contact { grid-column: 2/3; grid-row: 4/5; } .pc-menu__link-list { margin-top: min(7px, 0.5833333333vw); padding-left: min(17px, 1.4166666667vw); } .pc-menu__business-cols .pc-menu__business-col:first-child .pc-menu__link-list { padding-left: 0; } .pc-menu__link-wrap { overflow: hidden; } .pc-menu.is-opened .pc-menu__link-wrap { overflow: visible; } .pc-menu__link { display: inline-block; position: relative; color: var(--color-white); padding-left: 0.9em; font-size: var(--font-size-pc-16px); font-weight: var(--font-weight-regular); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; -webkit-transform: translateY(6em); transform: translateY(6em); -webkit-transition: -webkit-transform 0.5s ease 0.3s; transition: -webkit-transform 0.5s ease 0.3s; transition: transform 0.5s ease 0.3s; transition: transform 0.5s ease 0.3s, -webkit-transform 0.5s ease 0.3s; } .pc-menu.is-open .pc-menu__link { -webkit-transform: translateY(0); transform: translateY(0); } .pc-menu__link::after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .pc-menu__link:focus-visible::before { content: ""; position: absolute; z-index: 2; top: 0; left: -0.5555555556em; width: calc(100% + 0.5555555556em + 8px); height: calc(100% + 1px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .pc-menu__link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .pc-menu__link--large { font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-medium); } .pc-menu__link--middle { font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-bold); } .pc-menu__link-icon { position: absolute; top: 0.6em; left: 0; display: block; background-color: var(--color-white); height: 0.5555555556em; aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .pc-menu__business-cols { display: grid; margin-top: min(8px, 0.6666666667vw); padding: 0 min(8px, 0.6666666667vw); grid-template-columns: repeat(4, 1fr); } .pc-menu__business-col { padding-right: min(8px, 0.6666666667vw); } .pc-menu__business-col:nth-child(5) { grid-column: 1/5; margin-top: min(12px, 1vw); padding-top: min(12px, 1vw); border-top: 1px solid var(--color-darkRed-6); } .pc-menu__business-text-wrap { overflow: hidden; } .pc-menu__business-text { font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-bold); color: var(--color-white); -webkit-transform: translateY(4em); transform: translateY(4em); -webkit-transition: -webkit-transform 0.5s ease 0.3s; transition: -webkit-transform 0.5s ease 0.3s; transition: transform 0.5s ease 0.3s; transition: transform 0.5s ease 0.3s, -webkit-transform 0.5s ease 0.3s; } .pc-menu.is-open .pc-menu__business-text { -webkit-transform: translateY(0); transform: translateY(0); } .pc-menu__business-catalog { margin-top: min(12px, 1vw); padding: min(12px, 1vw) min(8px, 0.6666666667vw) 0; border-top: 1px solid var(--color-darkRed-6); } .pc-menu__icon-external-link { display: inline-block; margin-left: 0.2222222222em; width: 0.7222222222em; background-color: var(--color-white); aspect-ratio: 18/14; -webkit-mask-image: url(/assets/img/common/icon_external-link.svg); mask-image: url(/assets/img/common/icon_external-link.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .pc-menu__footer { margin-top: min(25px, 2.0833333333vw); } .pc-menu__footer-list { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: var(--font-size-pc-16px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1em; } .pc-menu__footer-link { position: relative; display: inline-block; color: var(--color-white); font-size: var(--font-size-pc-16px); font-weight: var(--font-weight-regular); -webkit-transform: translateY(4em); transform: translateY(4em); -webkit-transition: -webkit-transform 0.5s ease 0.3s; transition: -webkit-transform 0.5s ease 0.3s; transition: transform 0.5s ease 0.3s; transition: transform 0.5s ease 0.3s, -webkit-transform 0.5s ease 0.3s; } .pc-menu.is-open .pc-menu__footer-link { -webkit-transform: translateY(0); transform: translateY(0); } .pc-menu__footer-link::after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .pc-menu__footer-link:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 0.5555555556em + 8px); height: calc(100% + 1px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .pc-menu__footer-link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .sp-menu { display: none; position: fixed; z-index: 99999; width: 100%; height: 100vh; height: 100dvh; background-color: var(--color-darkRed); grid-template-rows: 17.4666666667vw auto; opacity: 0; pointer-events: none; visibility: hidden; -webkit-transition: opacity 0.5s ease, visibility 0.5s; transition: opacity 0.5s ease, visibility 0.5s; } @media only screen and (max-width: 767px) { .sp-menu { display: grid; } } .sp-menu.is-open { opacity: 1; pointer-events: all; visibility: visible; } @media print { .sp-menu { display: none; } } .sp-menu::after { content: ""; display: block; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; background-image: url(/assets/img/common/logo_nosan_symbol.svg); background-position: center 6.6666666667vw; background-size: 100% auto; background-repeat: no-repeat; opacity: 0.3; } .sp-menu__close-button { position: absolute; z-index: 2; top: 5.3333333333vw; right: 9.6vw; cursor: pointer; } .sp-menu__close-button:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(100% + 2.9333333333vw); height: calc(100% + 2.9333333333vw); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sp-menu__close-button-icon { display: block; width: 6.8vw; height: 6.8vw; background-color: var(--color-white); -webkit-mask-image: url(/assets/img/common/button_menu_close.svg); mask-image: url(/assets/img/common/button_menu_close.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .sp-menu__header { display: grid; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: 100%; } .sp-menu__header-inner { padding-left: 10vw; -webkit-transform: translateY(-20px); transform: translateY(-20px); -webkit-transition: -webkit-transform 0.5s ease-out; transition: -webkit-transform 0.5s ease-out; transition: transform 0.5s ease-out; transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out; } .sp-menu.is-open .sp-menu__header-inner { -webkit-transform: translateY(0); transform: translateY(0); } .sp-menu__lang-btn { display: grid; height: 7.2vw; grid-template-columns: repeat(2, 18.9333333333vw); gap: 0.5333333333vw; } .sp-menu__lang-btn > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 3.6vw 0 0 3.6vw; background-color: var(--color-lang-bg-active); font-size: var(--font-size-sp-26px); font-weight: var(--font-weight-medium); color: var(--color-lang-font-active); text-align: center; line-height: 1; } .sp-menu__lang-btn > a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0 3.6vw 3.6vw 0; background-color: var(--color-lang-bg); font-size: var(--font-size-sp-26px); font-weight: var(--font-weight-medium); text-align: center; line-height: 1; overflow: hidden; } .sp-menu__lang-btn > a:focus-visible { -webkit-box-shadow: inset 0 0 0 3px var(--color-black); box-shadow: inset 0 0 0 3px var(--color-black); } .sp-menu__main { overflow: auto; } .sp-menu__main-inner { padding-bottom: 12.6666666667vw; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s ease-out; transition: opacity 0.5s, -webkit-transform 0.5s ease-out; transition: transform 0.5s ease-out, opacity 0.5s; transition: transform 0.5s ease-out, opacity 0.5s, -webkit-transform 0.5s ease-out; } .sp-menu.is-open .sp-menu__main-inner { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .sp-menu__list-item { position: relative; padding-top: 1px; } .sp-menu__list-item::before { content: ""; position: absolute; top: 0; left: 10vw; width: calc(100% - 20vw); height: 1px; background-color: var(--color-white); } .sp-menu__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: calc(100% - 20vw); height: 11.3333333333vw; margin: 0 auto; padding: 0 4.9333333333vw 0 6.6666666667vw; color: var(--color-white); font-size: var(--font-size-sp-26px); font-weight: var(--font-weight-regular); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .sp-menu__sublist-depth2 .sp-menu__link { padding-left: 9.3333333333vw; } .sp-menu__link::after { content: ""; display: block; background-color: var(--color-white); height: 0.7692307692em; aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .sp-menu__link--recruit::after { width: 4vw; background-color: var(--color-white); aspect-ratio: 18/14; -webkit-mask-image: url(/assets/img/common/icon_external-link.svg); mask-image: url(/assets/img/common/icon_external-link.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; -webkit-transform: translateX(0.8vw); transform: translateX(0.8vw); } .sp-menu__link:has(+ .sp-menu__sublist-button)::after { display: none; } .sp-menu__link:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 5px; -webkit-box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 5px var(--color-black); box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 5px var(--color-black); } .sp-menu__link--large { font-size: var(--font-size-sp-26px); font-weight: var(--font-weight-medium); height: 16vw; padding: 0 4.9333333333vw 0 4vw; } .sp-menu__business-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: calc(100% - 20vw); height: 11.3333333333vw; margin: 0 auto; padding: 0 4.9333333333vw 0 6.6666666667vw; color: var(--color-white); font-size: var(--font-size-sp-26px); font-weight: var(--font-weight-regular); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .sp-menu__sublist-button { position: absolute; top: 1px; right: 10vw; width: 12vw; height: 16vw; } .sp-menu__sublist-button:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 5px; -webkit-box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 5px var(--color-black); box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 5px var(--color-black); } .sp-menu__sublist-button-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 4vw; height: 4vw; background-color: var(--color-white); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .sp-menu__sublist-button-icon--open { -webkit-mask-image: url(/assets/img/common/icon_minus.svg); mask-image: url(/assets/img/common/icon_minus.svg); } .sp-menu__sublist-button.is-open .sp-menu__sublist-button-icon--open { opacity: 1; } .sp-menu__sublist-button-icon--close { -webkit-mask-image: url(/assets/img/common/icon_plus.svg); mask-image: url(/assets/img/common/icon_plus.svg); } .sp-menu__sublist-button:not(.is-open) .sp-menu__sublist-button-icon--close { opacity: 1; } .sp-menu__sublist { position: relative; display: grid; grid-template-rows: 0fr; -webkit-transition: grid-template-rows 0.4s, visibility 0.4s; transition: grid-template-rows 0.4s, visibility 0.4s; transition: grid-template-rows 0.4s, visibility 0.4s, -ms-grid-rows 0.4s; background-color: var(--color-darkRed-2); background-color: rgba(128, 0, 10, 0.5); } .sp-menu__sublist.is-open { grid-template-rows: 1fr; } .sp-menu__sublist[aria-hidden=true] { pointer-events: none; visibility: hidden; } .sp-menu__sublist[aria-hidden=false] { pointer-events: auto; visibility: visible; } .sp-menu__sublist > div { overflow: hidden; } .sp-menu__sublist > div > ul { padding: 3.8666666667vw 0 4.2666666667vw; } .sp-menu__footer { margin-top: 6.9333333333vw; } .sp-menu__footer-list { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: var(--font-size-sp-26px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1em; } .sp-menu__footer-item { overflow: hidden; } .sp-menu.is-opened .sp-menu__footer-item { overflow: visible; } .sp-menu__footer-link { position: relative; display: inline-block; color: var(--color-white); font-weight: var(--font-weight-regular); } .sp-menu__footer-link:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 0.5555555556em + 8px); height: calc(100% + 1px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } .pc-sitemap { width: 100%; background-color: var(--color-darkRed); } @media only screen and (max-width: 767px) { .pc-sitemap { display: none; } } .pc-sitemap__main { display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; grid-template-columns: min(100%, var(--design-inner-width-pc)); padding: min(80px, 6.6666666667vw) min(60px, 5vw) min(30px, 2.5vw); } .pc-sitemap__body { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, auto); gap: 0 min(60px, 5vw); width: 100%; } .pc-sitemap__box { border-top: 1px solid var(--color-white); padding: min(12px, 1vw) min(8px, 0.6666666667vw) min(45px, 3.75vw); } .pc-sitemap__box--home { grid-column: 1/2; grid-row: 1/2; } .pc-sitemap__box--about { grid-column: 2/3; grid-row: 1/2; } .pc-sitemap__box--corporate { grid-column: 3/4; grid-row: 1/3; } .pc-sitemap__box--business { grid-column: 1/3; grid-row: 2/3; padding: min(12px, 1vw) 0 min(45px, 3.75vw); } .pc-sitemap__box--rdqm { grid-column: 1/2; grid-row: 3/4; } .pc-sitemap__box--sustainability { grid-column: 2/3; grid-row: 3/4; } .pc-sitemap__box--recruit { grid-column: 3/4; grid-row: 3/4; } .pc-sitemap__box--news { grid-column: 1/2; grid-row: 4/5; } .pc-sitemap__box--contact { grid-column: 2/3; grid-row: 4/5; } .pc-sitemap__link-list { margin-top: min(7px, 0.5833333333vw); padding-left: min(17px, 1.4166666667vw); } .pc-sitemap__business-cols .pc-sitemap__business-col:first-child .pc-sitemap__link-list { padding-left: 0; } .pc-sitemap__link { display: inline-block; position: relative; color: var(--color-white); padding-left: 0.9em; font-size: var(--font-size-pc-16px); font-weight: var(--font-weight-regular); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .pc-sitemap__link::after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .pc-sitemap__link:focus-visible::before { content: ""; position: absolute; z-index: 2; top: 0; left: -0.5555555556em; width: calc(100% + 0.5555555556em + 8px); height: calc(100% + 1px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .pc-sitemap__link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .pc-sitemap__link--large { font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-medium); } .pc-sitemap__link--middle { font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-bold); } .pc-sitemap__link-icon { position: absolute; top: 0.6em; left: 0; display: block; background-color: var(--color-white); height: 0.5555555556em; aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .pc-sitemap__business-cols { display: grid; margin-top: min(8px, 0.6666666667vw); padding: 0 min(8px, 0.6666666667vw); grid-template-columns: repeat(4, 1fr); } .pc-sitemap__business-col { padding-right: min(8px, 0.6666666667vw); } .pc-sitemap__business-col:nth-child(5) { grid-column: 1/5; margin-top: min(12px, 1vw); padding-top: min(12px, 1vw); border-top: 1px solid var(--color-darkRed-6); } .pc-sitemap__business-text { font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-bold); color: var(--color-white); } .pc-sitemap__business-catalog { margin-top: min(12px, 1vw); padding: min(12px, 1vw) min(8px, 0.6666666667vw) 0; border-top: 1px solid var(--color-darkRed-6); } .pc-sitemap__icon-external-link { display: inline-block; margin-left: 0.2222222222em; width: 0.7222222222em; background-color: var(--color-white); aspect-ratio: 18/14; -webkit-mask-image: url(/assets/img/common/icon_external-link.svg); mask-image: url(/assets/img/common/icon_external-link.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .sp-sitemap { display: none; background-color: var(--color-darkRed); } @media only screen and (max-width: 767px) { .sp-sitemap { display: block; } } @media print { .sp-sitemap { display: none; } } .sp-sitemap__main { overflow: auto; } .sp-sitemap__main-inner { padding: 13.3333333333vw 0 10.9333333333vw; } .sp-sitemap__list-item { position: relative; padding-top: 1px; } .sp-sitemap__list-item::before { content: ""; position: absolute; top: 0; left: 10vw; width: calc(100% - 20vw); height: 1px; background-color: var(--color-white); } .sp-sitemap__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: calc(100% - 20vw); height: 11.3333333333vw; margin: 0 auto; padding: 0 4.9333333333vw 0 6.6666666667vw; color: var(--color-white); font-size: var(--font-size-sp-26px); font-weight: var(--font-weight-regular); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .sp-sitemap__sublist-depth2 .sp-sitemap__link { padding-left: 9.3333333333vw; } .sp-sitemap__link::after { content: ""; display: block; background-color: var(--color-white); height: 0.7692307692em; aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .sp-sitemap__link--recruit::after { width: 4vw; background-color: var(--color-white); aspect-ratio: 18/14; -webkit-mask-image: url(/assets/img/common/icon_external-link.svg); mask-image: url(/assets/img/common/icon_external-link.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; -webkit-transform: translateX(0.8vw); transform: translateX(0.8vw); } .sp-sitemap__link:has(+ .sp-sitemap__sublist-button)::after { display: none; } .sp-sitemap__link:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 5px; -webkit-box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 5px var(--color-black); box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 5px var(--color-black); } .sp-sitemap__link--large { font-size: var(--font-size-sp-26px); font-weight: var(--font-weight-medium); height: 16vw; padding: 0 4.9333333333vw 0 4vw; } .sp-sitemap__business-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: calc(100% - 20vw); height: 11.3333333333vw; margin: 0 auto; padding: 0 4.9333333333vw 0 6.6666666667vw; color: var(--color-white); font-size: var(--font-size-sp-26px); font-weight: var(--font-weight-regular); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .sp-sitemap__sublist-button { position: absolute; top: 1px; right: 10vw; width: 12vw; height: 16vw; } .sp-sitemap__sublist-button:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 5px; -webkit-box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 5px var(--color-black); box-shadow: inset 0 0 0 3px var(--color-white), inset 0 0 0 5px var(--color-black); } .sp-sitemap__sublist-button-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 4vw; height: 4vw; background-color: var(--color-white); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 0; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .sp-sitemap__sublist-button-icon--open { -webkit-mask-image: url(/assets/img/common/icon_minus.svg); mask-image: url(/assets/img/common/icon_minus.svg); } .sp-sitemap__sublist-button.is-open .sp-sitemap__sublist-button-icon--open { opacity: 1; } .sp-sitemap__sublist-button-icon--close { -webkit-mask-image: url(/assets/img/common/icon_plus.svg); mask-image: url(/assets/img/common/icon_plus.svg); } .sp-sitemap__sublist-button:not(.is-open) .sp-sitemap__sublist-button-icon--close { opacity: 1; } .sp-sitemap__sublist { display: grid; grid-template-rows: 0fr; -webkit-transition: grid-template-rows 0.4s, visibility 0.4s; transition: grid-template-rows 0.4s, visibility 0.4s; transition: grid-template-rows 0.4s, visibility 0.4s, -ms-grid-rows 0.4s; } .sp-sitemap__sublist.is-open { grid-template-rows: 1fr; } .sp-sitemap__sublist[aria-hidden=true] { pointer-events: none; visibility: hidden; } .sp-sitemap__sublist[aria-hidden=false] { pointer-events: auto; visibility: visible; } .sp-sitemap__sublist > div { overflow: hidden; } .sp-sitemap__sublist > div > ul { padding: 3.8666666667vw 0 4.2666666667vw; background-color: var(--color-darkRed-2); } .sp-sitemap__footer { margin-top: 6.9333333333vw; } .sp-sitemap__footer-list { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: var(--font-size-sp-26px); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1em; } .sp-sitemap__footer-item { overflow: hidden; } .sp-sitemap__footer-link { position: relative; display: inline-block; color: var(--color-white); font-weight: var(--font-weight-regular); } .footer-banner-area { display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; grid-template-columns: min(100%, var(--design-inner-width-pc)); background-color: var(--color-darkRed-3); padding: min(40px, 3.3333333333vw) min(60px, 5vw) min(35px, 2.9166666667vw); } @media only screen and (max-width: 767px) { .footer-banner-area { display: block; padding: 13.3333333333vw 2.6666666667vw 4.6666666667vw; } } .footer-banner-area__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; gap: min(20px, 1.6666666667vw); } @media only screen and (max-width: 767px) { .footer-banner-area__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6.6666666667vw 2.5333333333vw; } } .footer-banner-area__item { width: min(224px, 18.6666666667vw); } @media only screen and (max-width: 767px) { .footer-banner-area__item { width: auto; } } .footer-banner-area__item > a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .footer-banner-area__item > a:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 10px); height: calc(100% + 10px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .footer-banner-area__item > a:hover .footer-banner-area__banner > img { opacity: 0.5; } .footer-banner-area__item > a:hover .footer-banner-area__banner::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .footer-banner-area__item > a:hover .footer-banner-area__text::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .footer-banner-area__banner { border-radius: min(5px, 0.4166666667vw); overflow: hidden; background-color: var(--color-almostBlack); position: relative; } @media only screen and (max-width: 767px) { .footer-banner-area__banner { border-radius: 0.6666666667vw; } } .footer-banner-area__banner::after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: min(4px, 0.3333333333vw); background-color: var(--color-red); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .footer-banner-area__banner > img { -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .footer-banner-area__text { position: relative; display: inline-block; margin-top: min(8px, 0.6666666667vw); font-size: var(--font-size-pc-16px); font-weight: var(--font-weight-regular); color: var(--color-white); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; white-space: nowrap; } @media only screen and (max-width: 767px) { .footer-banner-area__text { font-size: var(--font-size-sp-26px); font-size: min(0.25rem + 3vw, 2.5566666667rem); } } .footer-banner-area__text::after { position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 1px; background-color: var(--color-white); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } @media only screen and (max-width: 767px) { .footer-banner-area__text-thin { display: inline-block; -webkit-transform: scaleX(0.9); transform: scaleX(0.9); -webkit-transform-origin: left top; transform-origin: left top; } } .footer-banner-area__icon-external-link { display: inline-block; margin-left: 0.6875em; width: 1.125em; background-color: var(--color-white); aspect-ratio: 18/14; -webkit-mask-image: url(/assets/img/common/icon_external-link.svg); mask-image: url(/assets/img/common/icon_external-link.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; -webkit-transform: translateY(0.0625em); transform: translateY(0.0625em); } @media only screen and (max-width: 767px) { .footer-banner-area__icon-external-link { margin-left: 0.4545454545em; width: 1em; -webkit-transform: translateY(0.0909090909em); transform: translateY(0.0909090909em); } } .footer-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: min(16px, 1.1713030747vw) 0; background-color: var(--color-white); padding: min(34px, 2.4890190337vw) 0 min(34px, 2.4890190337vw); } @media only screen and (max-width: 767px) { .footer-bottom { gap: 0.2666666667vw; padding: 6.4vw 0 7.4666666667vw; } } .footer-bottom__links-extra { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--font-size-pc-16px) calc(var(--font-size-pc-16px) * 2); } @media only screen and (max-width: 767px) { .footer-bottom__links-extra { gap: var(--font-size-sp-26px) calc(var(--font-size-sp-26px) * 2); } } .footer-bottom__links-link { position: relative; display: inline-block; font-size: var(--font-size-pc-16px); font-weight: var(--font-weight-regular); color: var(--color-font-base); } @media only screen and (max-width: 767px) { .footer-bottom__links-link { font-size: var(--font-size-sp-26px); } } .footer-bottom__links-link::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--color-font-base); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .footer-bottom__links-link:focus-visible::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 0.5555555556em + 8px); height: calc(100% + 1px); border: 3px solid var(--color-black); border-radius: 5px; -webkit-box-shadow: 0 0 0 2px var(--color-white); box-shadow: 0 0 0 2px var(--color-white); } @media (hover: hover) and (pointer: fine) { .footer-bottom__links-link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .footer-bottom__copyright { text-align: center; } .footer-bottom__copyright > span { font-size: var(--font-size-pc-16px); font-weight: var(--font-weight-regular); color: var(--color-font-base); } @media only screen and (max-width: 767px) { .footer-bottom__copyright > span { font-size: var(--font-size-sp-26px); } } @media print { .page-top { display: none; } } .page-top__anchor { position: absolute; top: 0; left: 0; visibility: hidden; width: 0; height: 200px; } .page-top__button { display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; z-index: 99999; right: min(20px, 1.4641288433vw); bottom: min(20px, 1.4641288433vw); background-color: var(--color-almostBlack); width: min(90px, 6.588579795vw); height: min(90px, 6.588579795vw); border: 1px solid var(--color-almostBlack); border-radius: 50%; overflow: hidden; -webkit-box-shadow: 0 0 min(20px, 1.4641288433vw) rgba(0, 0, 0, 0.2); box-shadow: 0 0 min(20px, 1.4641288433vw) rgba(0, 0, 0, 0.2); opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); pointer-events: none; visibility: hidden; -webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s, visibility 0.3s; transition: opacity 0.3s, transform 0.3s, visibility 0.3s, -webkit-transform 0.3s; } @media only screen and (max-width: 767px) { .page-top__button { right: 2.6666666667vw; bottom: 2.6666666667vw; width: 12vw; height: 12vw; } } .page-top__button.is-show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: all; visibility: visible; } .page-top__button::after { content: ""; display: block; aspect-ratio: 1/1; position: absolute; z-index: 1; top: 50%; left: 50%; width: 0; background-color: var(--color-white); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.3s ease; transition: width 0.3s ease; border: 1px solid var(--color-almostBlack); } @media (hover: hover) and (pointer: fine) { .page-top__button:hover::after { width: 100%; } .page-top__button:hover > span { background-color: var(--color-almostBlack); } } .page-top__button:focus-visible::after { width: 100%; } .page-top__button:focus-visible > span { background-color: var(--color-almostBlack); } .page-top__button > span { position: relative; z-index: 2; display: block; width: min(20px, 1.4641288433vw); height: min(20px, 1.4641288433vw); background-color: var(--color-white); -webkit-mask-image: url(/assets/img/common/icon_arrow_top.svg); mask-image: url(/assets/img/common/icon_arrow_top.svg); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .page-top__button > span { width: 2.6666666667vw; height: 2.6666666667vw; } } .page-title { width: 100%; padding-top: 120px; background-color: var(--color-page-title-bg); border-radius: 0 0 30px 30px; } @media screen and (max-width: 1310px) { .page-title { padding-top: 162px; } } @media only screen and (max-width: 767px) { .page-title { padding-top: 21.3333333333vw; border-radius: 0 0 4vw 4vw; } } @media print { .page-title { padding-top: 0; } } .page-title--dark-red { background-color: var(--color-page-title-bg-dark-red); color: var(--color-white); } .page-title--sustainability-case { background-color: var(--color-lightYellow-2); color: var(--color-default); } .page-title__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 43px 45px 40px; min-height: min(180px, 15vw); } @media only screen and (max-width: 767px) { .page-title__inner { gap: 1.0666666667vw; padding: 6.4vw 6vw 6vw; min-height: 22.6666666667vw; } } .page-title__ruby { font-family: var(--font-family-raleway); font-size: var(--font-size-pc-13px); font-size: 1.8rem; font-weight: var(--font-weight-medium); } @media only screen and (max-width: 767px) { .page-title__ruby { font-size: var(--font-size-sp-20px); } } .page-title__title { font-size: var(--font-size-pc-45px); line-height: 1.3; font-weight: var(--font-weight-medium); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 767px) { .page-title__title { font-size: var(--font-size-sp-45px); } } .breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 0 min(60px, 5vw); line-height: 1; } @media only screen and (max-width: 767px) { .breadcrumb { padding: 0 6vw; } } .breadcrumb__list { max-width: var(--design-inner-width-pc); width: 100%; min-height: 50px; padding: min(15px, 1.25vw) 0; } @media only screen and (max-width: 767px) { .breadcrumb__list { padding: 3.0666666667vw 0; } } .breadcrumb__item { display: inline; line-height: 1.3; font-size: var(--font-size-pc-15px); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 767px) { .breadcrumb__item { font-size: var(--font-size-sp-24px); } } .breadcrumb__item:not(:last-child)::after { content: ">"; margin: 0 0.1em; } .breadcrumb__item > a { color: var(--color-default); background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-link-unmarked-hover))); background-image: linear-gradient(var(--color-link-unmarked-hover)); background-size: 0% 1px; background-repeat: no-repeat; background-position: right 100%; -webkit-transition: background-size 0.5s, color 0.5s; transition: background-size 0.5s, color 0.5s; } @media (hover: hover) and (pointer: fine) { .breadcrumb__item > a:hover { background-size: 100% 1px; background-position: left 100%; color: var(--color-link-unmarked-hover); } } .breadcrumb__item > a:focus-visible { border-radius: 10px; outline: 2px solid var(--color-focus-border, #000); outline-offset: 2px; background-color: var(--color-focus-bg); -webkit-box-shadow: 0 0 0 2px var(--color-focus-bg); box-shadow: 0 0 0 2px var(--color-focus-bg); } .topics { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--color-offWhite); padding: min(49px, 4.0833333333vw) min(60px, 5vw) min(57px, 4.75vw); } @media only screen and (max-width: 767px) { .topics { padding: 5.6vw 6vw 7.6vw; } } .topics__hgroup { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: min(5px, 0.4166666667vw); } @media only screen and (max-width: 767px) { .topics__hgroup { gap: 2.1333333333vw; } } .topics__hgroup > p { font-size: var(--font-size-pc-16px); white-space: nowrap; } @media only screen and (max-width: 767px) { .topics__hgroup > p { font-size: var(--font-size-sp-26px); } } .topics__title { font-family: var(--font-family-raleway); font-size: var(--font-size-pc-24px); font-weight: var(--font-weight-semi-bold); color: var(--color-black); } @media only screen and (max-width: 767px) { .topics__title { font-size: var(--font-size-sp-50px); } } .topics__list { margin-top: min(32px, 2.6666666667vw); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0 min(26px, 2.1666666667vw); max-width: var(--design-inner-width-pc); width: 100%; padding: 0; } @media only screen and (max-width: 767px) { .topics__list { max-width: none; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5.6vw 5.3333333333vw; margin-top: 4.1333333333vw; padding: 0; } } .topics__item { width: min(280px, 23.3333333333vw); } @media only screen and (max-width: 767px) { .topics__item { width: auto; } } .topics__card { position: relative; display: block; } @media (hover: hover) and (pointer: fine) { .topics__card:hover .topics__card-image::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .topics__card:hover .topics__card-image > img { -webkit-filter: brightness(50%); filter: brightness(50%); } .topics__card:hover .topics__card-text > span { color: var(--color-link-marked-hover); } .topics__card:hover .topics__card-text > span::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; } } .topics__card:focus-visible::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid var(--color-black); border-radius: min(10px, 0.8333333333vw); } .topics__card-image { position: relative; border-radius: min(10px, 0.8333333333vw); width: 100%; aspect-ratio: 280/170; overflow: hidden; } @media only screen and (max-width: 767px) { .topics__card-image { border-radius: 1.3333333333vw; aspect-ratio: 310/188; } } .topics__card-image::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: min(4px, 0.3333333333vw); background-color: var(--color-red); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } @media only screen and (max-width: 767px) { .topics__card-image::after { height: 0.5333333333vw; } } .topics__card-image > img { width: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-filter 0.4s; transition: -webkit-filter 0.4s; transition: filter 0.4s; transition: filter 0.4s, -webkit-filter 0.4s; } .topics__card-text { margin-top: min(9px, 0.75vw); padding-left: min(7px, 0.5833333333vw); } @media only screen and (max-width: 767px) { .topics__card-text { margin-top: 1.3333333333vw; padding-left: 1.3333333333vw; } } .topics__card-text > span { position: relative; display: inline-block; padding-left: min(17px, 1.4166666667vw); font-size: var(--font-size-pc-16px); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; color: var(--color-link-marked-default); -webkit-transition: color 0.4s; transition: color 0.4s; } @media only screen and (max-width: 767px) { .topics__card-text > span { padding-left: 5.0666666667vw; font-size: var(--font-size-sp-24px); } } .topics__card-text > span::before { content: ""; display: block; position: absolute; top: 0.5em; left: 0; width: 0.5625em; background-color: var(--color-red); aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .topics__card-text > span::before { top: 0.4166666667em; width: 0.6666666667em; } } .topics__card-text > span::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--color-link-marked-hover); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .contact-cta { width: 100%; } .contact-cta__link { position: relative; display: block; } .contact-cta__link::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.2928257687vw; background-color: var(--color-red); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } @media only screen and (max-width: 767px) { .contact-cta__link::after { height: 0.5333333333vw; } } .contact-cta__link img { display: block; width: 100%; -webkit-transition: -webkit-filter 0.5s; transition: -webkit-filter 0.5s; transition: filter 0.5s; transition: filter 0.5s, -webkit-filter 0.5s; } @media (hover: hover) and (pointer: fine) { .contact-cta__link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .contact-cta__link:hover img { -webkit-filter: brightness(50%); filter: brightness(50%); } } .contact-cta__link:focus-visible::before { content: ""; display: block; position: absolute; z-index: 2; width: 100%; height: 100%; border-radius: 10px; border: 4px solid var(--color-white); -webkit-box-shadow: inset 0 0 0 2px var(--color-black); box-shadow: inset 0 0 0 2px var(--color-black); } .contact-cta__text-wrap { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 10.0292825769vw; gap: 2.3426061493vw; } @media only screen and (max-width: 767px) { .contact-cta__text-wrap { padding-top: 18.2666666667vw; gap: 4.2666666667vw; } } .contact-cta__text1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 6.588579795vw; font-size: calc(0.45rem + 25.5 * 0.0732064422vw); font-weight: var(--font-weight-medium); color: var(--color-white); padding: 0 5.270863836vw; border: 1px solid var(--color-white); border-radius: 3.2942898975vw; } @media only screen and (max-width: 767px) { .contact-cta__text1 { height: 12vw; font-size: var(--font-size-sp-30px); padding: 0 9.6vw; border-radius: 6vw; } } .contact-cta__text2 { text-align: center; font-size: calc(0.3rem + 17 * 0.0732064422vw); font-weight: var(--font-weight-medium); color: var(--color-white); } @media only screen and (max-width: 767px) { .contact-cta__text2 { font-size: var(--font-size-sp-20px); } } .heading--1 { position: relative; margin: min(80px, 6.6666666667vw) 0 calc(min(50px, 4.1666666667vw) - (1lh - 1em) / 2); padding-top: calc(min(38px, 3.1666666667vw) - (1lh - 1em) / 2); font-size: var(--font-size-pc-32px); font-weight: var(--font-weight-medium); line-height: 1.3; text-align: center; } @media only screen and (max-width: 767px) { .heading--1 { margin: 12vw 0 calc(8vw - (1lh - 1em) / 2); padding-top: calc(5.0666666667vw - (1lh - 1em) / 2); font-size: var(--font-size-sp-32px); } } .heading--1::before { content: ""; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: min(8px, 0.6666666667vw); height: min(8px, 0.6666666667vw); background-color: var(--color-red); } @media only screen and (max-width: 767px) { .heading--1::before { width: 1.0666666667vw; height: 1.0666666667vw; } } .heading--2 { border-top: 1px solid var(--color-red); margin: min(60px, 5vw) 0 calc(min(50px, 4.1666666667vw) - (1lh - 1em) / 2); padding-top: calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2); font-size: var(--font-size-pc-24px); font-weight: var(--font-weight-medium); line-height: 1.3; text-align: center; } @media only screen and (max-width: 767px) { .heading--2 { margin: 8vw 0 calc(8vw - (1lh - 1em) / 2); padding-top: calc(5.3333333333vw - (1lh - 1em) / 2); font-size: var(--font-size-sp-32px); } } .heading--2.heading--rdqm-quality { border-top-color: var(--color-rdqm--1); } .heading--3 { position: relative; margin: calc(min(50px, 4.1666666667vw) - (1lh - 1em) / 2) 0 calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2); padding: 0 min(40px, 3.3333333333vw); font-size: var(--font-size-pc-22px); font-weight: var(--font-weight-medium); line-height: 1.3; } @media only screen and (max-width: 767px) { .heading--3 { margin: calc(8vw - (1lh - 1em) / 2) 0 calc(6.6666666667vw - (1lh - 1em) / 2); padding: 0 0 0 8vw; font-size: var(--font-size-sp-28px); line-height: 1.6428571429; } } .heading--3::before { content: ""; display: block; position: absolute; top: 0.5lh; left: min(10px, 0.8333333333vw); -webkit-transform: translateY(-50%); transform: translateY(-50%); width: min(19px, 1.5833333333vw); height: min(5px, 0.4166666667vw); background-image: linear-gradient(90deg, var(--color-red) 0, var(--color-red) min(5px, 0.4166666667vw), transparent min(5px, 0.4166666667vw), transparent min(7px, 0.5833333333vw)); background-size: min(7px, 0.5833333333vw) min(5px, 0.4166666667vw); background-repeat: repeat; background-position: 0 0; } @media only screen and (max-width: 767px) { .heading--3::before { left: 2vw; width: 4vw; height: 1.0666666667vw; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, var(--color-red)), color-stop(1.0666666667vw, var(--color-red)), color-stop(1.0666666667vw, transparent), color-stop(1.4666666667vw, transparent)); background-image: linear-gradient(90deg, var(--color-red) 0, var(--color-red) 1.0666666667vw, transparent 1.0666666667vw, transparent 1.4666666667vw); background-size: 1.4666666667vw 1.0666666667vw; } } .heading--4 { margin: calc(min(30px, 2.5vw) - (1lh - 1em) / 2) 0 calc(min(20px, 1.6666666667vw) - (1lh - 1em) / 2); padding: 0 min(40px, 3.3333333333vw); font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-bold); line-height: 1.3; color: var(--color-darkRed-4); } @media only screen and (max-width: 767px) { .heading--4 { margin: calc(5.3333333333vw - (1lh - 1em) / 2) 0 calc(4vw - (1lh - 1em) / 2); padding: 0; font-size: var(--font-size-sp-26px); line-height: 1.6538461538; } } .inpage-link-list { margin: calc(min(60px, 5vw) - (1lh - 1em) / 2) 0 min(60px, 5vw); font-size: var(--font-size-pc-18px); line-height: 1.3; } @media only screen and (max-width: 767px) { .inpage-link-list { margin: calc(8vw - (1lh - 1em) / 2) 0 8vw; font-size: var(--font-size-sp-26px); } } .inpage-link-list__list { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; gap: min(37px, 3.0833333333vw) min(30px, 2.5vw); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 767px) { .inpage-link-list__list { gap: 7.2vw 5.3333333333vw; } } .inpage-link-list__list > li { width: calc((100% - min(60px, 5vw)) / 3); } @media only screen and (max-width: 767px) { .inpage-link-list__list > li { width: calc((100% - 5.3333333333vw) / 2); } } .inpage-link-list__link { position: relative; display: block; padding: 0 min(20px, 1.6666666667vw) min(18px, 1.5vw) min(50px, 4.1666666667vw); background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-lightGray-4))); background-image: linear-gradient(var(--color-lightGray-4)); background-size: 100% 1px; background-repeat: no-repeat; background-position: center bottom; color: var(--color-default); -webkit-transition: color 0.4s; transition: color 0.4s; } @media only screen and (max-width: 767px) { .inpage-link-list__link { padding: 0 2.6666666667vw 3.6vw 8vw; } } @media (hover: hover) and (pointer: fine) { .inpage-link-list__link:hover { color: var(--color-red); } .inpage-link-list__link:hover::before { background-color: var(--color-red); } .inpage-link-list__link:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left center; transform-origin: left center; } } .inpage-link-list__link:focus-visible { border-radius: 10px; outline: 2px solid var(--color-focus-border, #000); outline-offset: 2px; background-color: var(--color-focus-bg); -webkit-box-shadow: 0 0 0 2px var(--color-focus-bg); box-shadow: 0 0 0 2px var(--color-focus-bg); } .inpage-link-list__link::before { position: absolute; top: 0.5em; left: min(20px, 1.6666666667vw); content: ""; display: block; width: min(8px, 0.6666666667vw); background-color: var(--color-default); -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: background-color 0.4s; transition: background-color 0.4s; aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .inpage-link-list__link::before { top: 0.3461538462em; left: 2.6666666667vw; width: 2.1333333333vw; } } .inpage-link-list__link::after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color: var(--color-red); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right center; transform-origin: right center; -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .paragraph { margin: calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2) 0; font-size: var(--font-size-pc-16px); } @media only screen and (max-width: 767px) { .paragraph { margin: calc(6.6666666667vw - (1lh - 1em) / 2) 0; font-size: var(--font-size-sp-26px); } } .paragraph--left { text-align: left; } .paragraph--right { text-align: right; } .paragraph--center { text-align: center; } :where(.link) { color: var(--color-link-unmarked-default); background-image: -webkit-gradient(linear, left top, right top, from(var(--color-link-unmarked-hover))), -webkit-gradient(linear, left top, right top, from(var(--color-link-unmarked-default))); background-image: linear-gradient(90deg, var(--color-link-unmarked-hover)), linear-gradient(90deg, var(--color-link-unmarked-default)); background-size: 0% 1px, 100% 1px; background-repeat: no-repeat, no-repeat; background-position: right bottom, right bottom; -webkit-transition: background-size 0.4s, color 0.4s; transition: background-size 0.4s, color 0.4s; } :where(.link:visited) { color: var(--color-link-unmarked-default); } @media (hover: hover) and (pointer: fine) { :where(.link:hover) { color: var(--color-link-unmarked-hover); background-size: 100% 1px, 100% 1px; background-position: left bottom, right bottom; } } :where(.link:focus-visible) { border-radius: 10px; outline: 2px solid var(--color-focus-border, #000); outline-offset: 2px; background-color: var(--color-focus-bg); -webkit-box-shadow: 0 0 0 2px var(--color-focus-bg); box-shadow: 0 0 0 2px var(--color-focus-bg); } .link--pdf { background-image: none; } .link--external-link { background-image: none; } .link__icon { vertical-align: middle; margin-right: 0.3em; } .link__text + .link__icon { margin-right: 0; margin-left: 0.3em; } .link__text { vertical-align: middle; color: var(--color-link-marked-default); background-image: -webkit-gradient(linear, left top, right top, from(var(--color-link-marked-hover))); background-image: linear-gradient(90deg, var(--color-link-marked-hover)); background-size: 0% 1px; background-repeat: no-repeat; background-position: right bottom; -webkit-transition: background-size 0.4s, color 0.4s; transition: background-size 0.4s, color 0.4s; } @media (hover: hover) and (pointer: fine) { .link:hover .link__text { color: var(--color-link-marked-hover); background-size: 100% 1px; background-position: left bottom; } } .link-list { margin: calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2) 0; font-size: var(--font-size-pc-16px); } @media only screen and (max-width: 767px) { .link-list { margin: calc(6.6666666667vw - (1lh - 1em) / 2) 0; font-size: var(--font-size-sp-26px); } } .link-list__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: min(13px, 1.0833333333vw); } @media only screen and (max-width: 767px) { .link-list__list { gap: 2.9333333333vw; } } .link-list__link { position: relative; display: inline-block; padding-left: 2.5em; } @media only screen and (max-width: 767px) { .link-list__link { padding-left: 2.1153846154em; } } .link-list__link::before { content: ""; position: absolute; display: block; background-color: var(--color-red); } .link-list__link--link::before { top: 0.5625em; left: 1.125em; width: 0.5em; aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .link-list__link--link::before { top: 0.5769230769em; left: 0.5769230769em; width: 0.5em; } } .link-list__link--external-link::before { top: 0.4375em; left: 0.75em; width: 1.125em; aspect-ratio: 18/14; -webkit-mask-image: url(/assets/img/common/icon_external-link.svg); mask-image: url(/assets/img/common/icon_external-link.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .link-list__link--external-link::before { top: 0.4615384615em; left: 0.1923076923em; width: 1.1153846154em; } } .link-list__link--pdf::before { top: 0.25em; left: 0.5625em; width: 1.5em; aspect-ratio: 24/22; -webkit-mask-image: url(/assets/img/common/icon_pdf.svg); mask-image: url(/assets/img/common/icon_pdf.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .link-list__link--pdf::before { top: 0.3076923077em; left: 0; width: 1.5em; } } .link-list__link:focus-visible { border-radius: 10px; outline: 2px solid var(--color-focus-border, #000); outline-offset: 2px; background-color: var(--color-focus-bg); -webkit-box-shadow: 0 0 0 2px var(--color-focus-bg); box-shadow: 0 0 0 2px var(--color-focus-bg); } .link-list__text { color: var(--color-link-marked-default); background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-link-marked-hover)), to(var(--color-link-marked-hover))); background-image: linear-gradient(var(--color-link-marked-hover), var(--color-link-marked-hover)); background-size: 0% 1px; background-repeat: no-repeat; background-position: right 100%; -webkit-transition: background-size 0.4s, color 0.4s; transition: background-size 0.4s, color 0.4s; } @media (hover: hover) and (pointer: fine) { .link-list__link:hover .link-list__text { background-size: 100% 1px; background-position: left 100%; color: var(--color-link-marked-hover); } } .image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: start; margin: min(40px, 3.3333333333vw) 0 calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2); font-size: var(--font-size-pc-14px); line-height: 1.3; } @media only screen and (max-width: 767px) { .image { margin: 6.6666666667vw 0 calc(6.6666666667vw - (1lh - 1em) / 2); font-size: var(--font-size-sp-22px); } } .image > figure img { display: block; width: 100%; height: auto; border-radius: min(5px, 0.4166666667vw); } @media only screen and (max-width: 767px) { .image > figure img { border-radius: 0.6666666667vw; } } .image > figure figcaption { margin-top: calc(min(20px, 1.6666666667vw) - (1lh - 1em) / 2); } @media only screen and (max-width: 767px) { .image > figure figcaption { margin-top: calc(2.6666666667vw - (1lh - 1em) / 2); } } .image--medium { gap: min(60px, 5vw); } .l-main__inner--2nd .image--medium { gap: min(40px, 3.3333333333vw); } @media only screen and (max-width: 767px) { .image--medium { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(6.6666666667vw - (1lh - 1em) / 2); } .l-main__inner--2nd .image--medium { gap: calc(6.6666666667vw - (1lh - 1em) / 2); } } .image--medium > figure { width: calc((100% - min(60px, 5vw)) / 2); } .l-main__inner--2nd .image--medium > figure { width: calc((100% - min(40px, 3.3333333333vw)) / 2); } @media only screen and (max-width: 767px) { .image--medium > figure { width: 100%; } .l-main__inner--2nd .image--medium > figure { width: 100%; } } .image--small { gap: min(30px, 2.5vw); } .l-main__inner--2nd .image--small { gap: min(20px, 1.6666666667vw); } @media only screen and (max-width: 767px) { .image--small { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(6.6666666667vw - (1lh - 1em) / 2); } .l-main__inner--2nd .image--small { gap: calc(6.6666666667vw - (1lh - 1em) / 2); } } .image--small > figure { width: calc((100% - min(60px, 5vw)) / 3); } .l-main__inner--2nd .image--small > figure { width: calc((100% - min(40px, 3.3333333333vw)) / 3); } @media only screen and (max-width: 767px) { .image--small > figure { width: 100%; } .l-main__inner--2nd .image--small > figure { width: 100%; } } .image--x-small { margin: min(30px, 2.5vw) 0 calc(min(30px, 2.5vw) - (1lh - 1em) / 2); gap: min(20px, 1.6666666667vw); } @media only screen and (max-width: 767px) { .image--x-small { margin: 6.6666666667vw 0 calc(6.6666666667vw - (1lh - 1em) / 2); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(6.6666666667vw - (1lh - 1em) / 2); } .l-main__inner--2nd .image--x-small { gap: calc(6.6666666667vw - (1lh - 1em) / 2); } } .image--x-small > figure { width: calc((100% - min(60px, 5vw)) / 4); } @media only screen and (max-width: 767px) { .image--x-small > figure { width: 100%; } } .image--x-small > figure > figcaption { margin-top: calc(min(15px, 1.25vw) - (1lh - 1em) / 2); } @media only screen and (max-width: 767px) { .image--x-small > figure > figcaption { margin-top: calc(2.6666666667vw - (1lh - 1em) / 2); } } :where(.button--red) { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: calc((2.3076923077em - 1lh) / 2 - 2px); width: min(380px, 31.6666666667vw); font-size: var(--font-size-pc-26px); font-weight: var(--font-weight-medium); line-height: 1.3; border: 2px solid var(--color-red); background-color: var(--color-red); border-radius: 1.1538461538em; overflow: hidden; } @media only screen and (max-width: 767px) { :where(.button--red) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: calc((3em - 1lh) / 2 - 2px); width: 80vw; font-size: var(--font-size-sp-30px); border-radius: 1.5em; } } .button--red::after { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 0; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--color-white); -webkit-transition: width 0.4s; transition: width 0.4s; } .button--red > span { position: relative; z-index: 2; display: inline-block; color: var(--color-white); -webkit-transition: color 0.4s; transition: color 0.4s; } .button--red > span::before { position: absolute; top: 50%; right: calc(100% + 0.3076923077em); -webkit-transform: translateY(-50%); transform: translateY(-50%); content: ""; display: block; width: 0.3076923077em; background-color: var(--color-white); -webkit-transition: background-color 0.4s; transition: background-color 0.4s; aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .button--red > span::before { right: calc(100% + 0.5em); width: 0.5333333333em; } } @media (hover: hover) and (pointer: fine) { .button--red:hover::after { width: 200%; } .button--red:hover > span { color: var(--color-red); } .button--red:hover > span::before { background-color: var(--color-red); } } .button--red:focus-visible { outline: 2px solid var(--color-focus-border, #000); outline-offset: 2px; background-color: var(--color-focus-bg); -webkit-box-shadow: 0 0 0 2px var(--color-focus-bg); box-shadow: 0 0 0 2px var(--color-focus-bg); } .button--red:focus-visible::after { width: 0; -webkit-transition: width 0s; transition: width 0s; } .button--red:focus-visible > span { color: var(--color-black); -webkit-transition: color 0s; transition: color 0s; } .button--red:focus-visible > span::before { background-color: var(--color-black); -webkit-transition: background-color 0s; transition: background-color 0s; } :where(.button--white) { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; gap: 0.4444444444em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: calc((3.3333333333em - 1lh) / 2 - 1px); width: min(320px, 26.6666666667vw); font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-medium); line-height: 1.3; border: 1px solid var(--color-middleGray-2); background-color: var(--color-white); border-radius: 1.6666666667em; overflow: hidden; } @media only screen and (max-width: 767px) { :where(.button--white) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 0.6666666667em; padding: calc((3em - 1lh) / 2 - 2px); width: 80vw; font-size: var(--font-size-sp-30px); border-radius: 1.5em; } } .button--white::before { position: relative; z-index: 2; content: ""; display: block; width: 0.4444444444em; background-color: var(--color-red); -webkit-transition: background-color 0.4s; transition: background-color 0.4s; aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .button--white::before { width: 0.4em; } } .button--white::after { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 0; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--color-red); -webkit-transition: width 0.4s; transition: width 0.4s; } .button--white > span { position: relative; z-index: 2; color: var(--color-default); -webkit-transition: color 0.4s; transition: color 0.4s; } @media (hover: hover) and (pointer: fine) { .button--white:hover::before { background-color: var(--color-white); } .button--white:hover::after { width: 200%; } .button--white:hover > span { color: var(--color-white); } } .button--white:focus-visible { outline: 2px solid var(--color-focus-border, #000); outline-offset: 2px; background-color: var(--color-focus-bg); -webkit-box-shadow: 0 0 0 2px var(--color-focus-bg); box-shadow: 0 0 0 2px var(--color-focus-bg); } .button--white:focus-visible::before { background-color: var(--color-black); -webkit-transition: background-color 0s; transition: background-color 0s; } .button--white:focus-visible::after { width: 0; -webkit-transition: width 0s; transition: width 0s; } .button--white:focus-visible > span { color: var(--color-black); -webkit-transition: color 0s; transition: color 0s; } .table { margin: min(60px, 5vw) 0; } @media only screen and (max-width: 767px) { .table { margin: 10.6666666667vw 0; } } .table--1 { width: 100%; border-collapse: collapse; } :where(.table--1) { table-layout: fixed; } @media only screen and (max-width: 767px) { :where(.table--1) { table-layout: auto; } } :where(.table--1 > tbody > tr) { border-top: 1px solid var(--color-warm-gray-1); border-bottom: 1px solid var(--color-warm-gray-1); } :where(.table--1 > tbody > tr > th) { padding: calc((3.375em - 1lh) / 2) min(40px, 3.3333333333vw); background-color: var(--color-warm-gray-2); font-size: var(--font-size-pc-16px); font-weight: var(--font-weight-medium); vertical-align: middle; text-align: left; width: min(300px, 25vw); } @media only screen and (max-width: 767px) { :where(.table--1 > tbody > tr > th) { width: 100%; } } :where(.table--1 > tbody > tr > td) { padding: calc((3.375em - 1lh) / 2) min(40px, 3.3333333333vw); background-color: var(--color-white); font-size: var(--font-size-pc-16px); vertical-align: middle; text-align: left; } @media only screen and (max-width: 767px) { :where(.table--1) { border-top: 1px solid var(--color-warm-gray-1); } :where(.table--1 > tbody > tr) { display: grid; grid-template-columns: 1fr; border-top: none; } :where(.table--1 > tbody > tr > th) { display: block; padding: calc((3.9615384615em - 1lh) / 2) 4vw; font-size: var(--font-size-sp-26px); } :where(.table--1 > tbody > tr > td) { display: block; padding: calc((4.2916666667em - 1lh) / 2) 4vw; font-size: var(--font-size-sp-24px); } } .table--2 { width: 100%; border-collapse: collapse; background-color: var(--color-white); } :where(.table--2) { table-layout: fixed; } @media only screen and (max-width: 767px) { .table--2 > thead { display: none; } } .table--2 > thead > tr > th { padding: calc((3.8888888889em - 1lh) / 2) min(20px, 1.6666666667vw); font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: 1.3; vertical-align: middle; text-align: center; } .table--2 > thead > tr > th:nth-child(1) { background-color: var(--color-lightGray-6); } :where(.table--2 > thead > tr > th:nth-child(1)) { width: min(288px, 24vw); } .table--2 > thead > tr > th:nth-child(2n) { border-left: 1px solid var(--color-white); background-color: var(--color-deep-blue); } .table--2 > thead > tr > th:nth-child(2n+3) { border-left: 1px solid var(--color-white); background-color: var(--color-darkRed-3); } .table--2 > tbody > tr { border-top: 2px solid var(--color-white); border-bottom: 2px solid var(--color-white); } @media only screen and (max-width: 767px) { .table--2 > tbody > tr { display: grid; grid-template-columns: 100%; gap: 2px; border-top: none; } .table--2 > tbody > tr:last-child { border-bottom: none; } } .table--2 > tbody > tr:nth-child(odd) > th { background-color: var(--color-darkRed); } .table--2 > tbody > tr:nth-child(odd) > td:nth-child(even) { background-color: var(--color-blue-tint-1); } .table--2 > tbody > tr:nth-child(odd) > td:nth-child(even)::before { background-color: var(--color-deep-blue); } .table--2 > tbody > tr:nth-child(odd) > td:nth-child(odd) { background-color: var(--color-cream-yellow-1); } .table--2 > tbody > tr:nth-child(odd) > td:nth-child(odd)::before { background-color: var(--color-darkRed-3); } .table--2 > tbody > tr:nth-child(even) > th { background-color: var(--color-darkRed-5); } .table--2 > tbody > tr:nth-child(even) > td:nth-child(even) { background-color: var(--color-blue-tint-2); } .table--2 > tbody > tr:nth-child(even) > td:nth-child(even)::before { background-color: var(--color-deep-blue); } .table--2 > tbody > tr:nth-child(even) > td:nth-child(odd) { background-color: var(--color-cream-beige-1); } .table--2 > tbody > tr:nth-child(even) > td:nth-child(odd)::before { background-color: var(--color-darkRed-3); } .table--2 > tbody > tr > th { padding: calc((3.8888888889em - 1lh) / 2) min(20px, 1.6666666667vw); font-size: var(--font-size-pc-18px); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: 1.3; vertical-align: middle; text-align: center; } @media only screen and (max-width: 767px) { .table--2 > tbody > tr > th { padding: calc((4.1em - 1lh) / 2) 2.6666666667vw; font-size: var(--font-size-sp-20px); } } .table--2 > tbody > tr > td { padding: calc(min(20px, 1.6666666667vw) - (1lh - 1em) / 2) min(20px, 1.6666666667vw); font-size: var(--font-size-pc-16px); vertical-align: middle; } @media only screen and (max-width: 767px) { .table--2 > tbody > tr > td { display: grid; padding: 0; font-size: var(--font-size-sp-22px); } :where(.table--2 > tbody > tr > td) { grid-template-columns: 37% auto; } .table--2 > tbody > tr > td::before { content: attr(data-label); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: calc((4.1em - 1lh) / 2) 2.6666666667vw; font-size: var(--font-size-sp-20px); color: var(--color-white); border-right: 1px solid var(--color-white); } } @media only screen and (max-width: 767px) { .table--2 .table__td-inner { padding: calc((3.7272727273em - 1lh) / 2) 2.6666666667vw; } } .bulleted-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: min(6px, 0.5vw); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style-type: none; margin: calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2) 0; font-size: var(--font-size-pc-16px); } @media only screen and (max-width: 767px) { .bulleted-list { gap: 4vw; margin: calc(6.6666666667vw - (1lh - 1em) / 2) 0; font-size: var(--font-size-sp-26px); line-height: 1.2307692308; } } .bulleted-list__item { position: relative; padding-left: 2.375em; } @media only screen and (max-width: 767px) { .bulleted-list__item { padding-left: 1.4615384615em; } } .bulleted-list__item::before { content: ""; display: block; position: absolute; top: 0.5lh; left: 0.625em; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0.625em; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--color-red); } @media only screen and (max-width: 767px) { .bulleted-list__item::before { left: 0; width: 0.6538461538em; } } .bulleted-list__item--black::before { background-color: var(--color-almostBlack); } .bulleted-list--disc { padding-left: 1.8em; list-style-type: disc; } .bulleted-list--disc .bulleted-list__item { padding: 0; } .bulleted-list--disc .bulleted-list__item::before { display: none; } .box { margin: min(40px, 3.3333333333vw) 0; padding: calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2) min(40px, 3.3333333333vw); font-size: var(--font-size-pc-16px); background-color: var(--color-offWhite); } .box:has(.box__title) { padding: calc(min(40px, 3.3333333333vw) - var(--font-size-pc-24px) * 0.3 / 2) min(40px, 3.3333333333vw) calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2); } @media only screen and (max-width: 767px) { .box { margin: 6.6666666667vw 0; font-size: var(--font-size-sp-24px); padding: calc(7.7333333333vw - (1lh - 1em) / 2) 5.7333333333vw; } .box:has(.box__title) { padding: calc(7.7333333333vw - var(--font-size-sp-28px) * 0.3 / 2) 5.7333333333vw calc(7.7333333333vw - (1lh - 1em) / 2); } } .box__title { font-size: var(--font-size-pc-24px); font-weight: var(--font-weight-bold); line-height: 1.3; text-align: center; margin-bottom: min(31px, 2.5833333333vw); } @media only screen and (max-width: 767px) { .box__title { font-size: var(--font-size-sp-28px); margin-bottom: 4.6666666667vw; } } .box__text { font-size: var(--font-size-pc-16px); } @media only screen and (max-width: 767px) { .box__text { font-size: var(--font-size-sp-24px); } } .box--dark-red { background-color: var(--color-darkRed-3); color: var(--color-white); } .text-image { margin-top: min(40px, 3.3333333333vw); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: min(40px, 3.3333333333vw); } @media only screen and (max-width: 767px) { .text-image { margin-top: 6.6666666667vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; } } .text-image__text-wrqp { margin-bottom: calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2); width: calc(100% - min(380px, 31.6666666667vw)); font-size: var(--font-size-pc-16px); } @media only screen and (max-width: 767px) { .text-image__text-wrqp { margin-bottom: calc(6.6666666667vw - (1lh - 1em) / 2); width: 100%; font-size: var(--font-size-sp-26px); } } .text-image__text { margin-top: calc((1lh - 1em) / 2 * -1); } .text-image__image-wrqp { margin-bottom: calc(min(40px, 3.3333333333vw) - (1lh - 1em) / 2); width: min(340px, 28.3333333333vw); font-size: var(--font-size-pc-14px); line-height: 1.3; } @media only screen and (max-width: 767px) { .text-image__image-wrqp { margin-bottom: calc(6.6666666667vw - (1lh - 1em) / 2); width: 100%; font-size: var(--font-size-sp-22px); } } .text-image__image > img { display: block; width: 100%; height: auto; border-radius: min(5px, 0.4166666667vw); } @media only screen and (max-width: 767px) { .text-image__image > img { border-radius: 0.6666666667vw; } } .text-image__image > figcaption { margin-top: calc(min(20px, 1.6666666667vw) - (1lh - 1em) / 2); } @media only screen and (max-width: 767px) { .text-image__image > figcaption { margin-top: calc(2.6666666667vw - (1lh - 1em) / 2); } } .text-image__image--no-rounded > img { border-radius: 0%; } .carousel { width: 100%; } .carousel__inner { position: relative; overflow: hidden; padding: 20px 0 80px; } @media only screen and (max-width: 767px) { .carousel__inner { padding: 20px 0 22vw; } } .carousel__viewport { position: relative; overflow: visible; width: 810px; margin: 0 auto; -ms-touch-action: pan-y; touch-action: pan-y; } @media only screen and (max-width: 1200px) { .carousel__viewport { width: 67.5vw; } } @media only screen and (max-width: 767px) { .carousel__viewport { width: 88vw; } } .carousel__track { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-touch-action: pan-y; touch-action: pan-y; } .carousel__slide { -ms-flex-negative: 0; flex-shrink: 0; padding: 0 20px; } @media only screen and (max-width: 767px) { .carousel__slide { padding: 0 2vw; } } .carousel__button { outline: none; position: absolute; top: 144px; top: calc((100% - 100px) / 2 + 20px); -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 42px; height: 42px; background-color: var(--carousel-color-button); border-radius: 3px; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); border: 2px solid var(--carousel-color-button); overflow: hidden; } @media only screen and (max-width: 767px) { .carousel__button { top: calc((100% - 20px - 22vw) / 2 + 20px); width: 11.2vw; height: 11.2vw; border-radius: 0.8vw; -webkit-box-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, 0.25); box-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, 0.25); -webkit-transform: translateY(-50%); transform: translateY(-50%); } } .carousel__button::after { content: ""; display: block; aspect-ratio: 1/1; position: absolute; z-index: 1; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; background-color: var(--color-white); -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } .carousel__button > span { position: relative; z-index: 2; display: block; width: 14px; background-color: var(--color-white); aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 767px) { .carousel__button > span { width: 3.7333333333vw; } } .carousel__button--prev { left: 19px; } @media only screen and (max-width: 767px) { .carousel__button--prev { left: 1.3333333333vw; } } .carousel__button--prev > span { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .carousel__button--next { right: 19px; } @media only screen and (max-width: 767px) { .carousel__button--next { right: 1.3333333333vw; } } @media (hover: hover) and (pointer: fine) { .carousel__button:hover::after { width: 100%; } .carousel__button:hover > span { background-color: var(--carousel-color-button); } } .carousel__button:focus-visible { border-color: var(--color-almostBlack); } .carousel__button:focus-visible::after { width: 100%; } .carousel__button:focus-visible > span { background-color: var(--color-almostBlack); } .carousel__pagination-area { position: absolute; bottom: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media only screen and (max-width: 767px) { .carousel__pagination-area { bottom: 6.6666666667vw; gap: 10vw; } } .carousel__pagination { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } @media only screen and (max-width: 767px) { .carousel__pagination { gap: 10vw; } } .carousel__pagination-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-middleGray-3); overflow: hidden; } @media only screen and (max-width: 767px) { .carousel__pagination-dot { width: 2.6666666667vw; height: 2.6666666667vw; } } .carousel__pagination-dot[aria-current=true] { background-color: var(--carousel-color-pagination-dot); } .carousel__pagination-dot::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; height: 0; background-color: var(--carousel-color-pagination-dot); -webkit-transition: all 0.2s; transition: all 0.2s; } @media (hover: hover) and (pointer: fine) { .carousel__pagination-dot:hover::after { width: 100%; height: 100%; } } .carousel__pagination-dot:focus-visible { outline: 2px solid var(--carousel-color-pagination-dot); outline-offset: 3px; } @media only screen and (max-width: 767px) { .carousel__pagination-dot:focus-visible { outline: 0.2666666667vw solid var(--carousel-color-pagination-dot); outline-offset: 0.4vw; } } .carousel__toggle-button { position: relative; width: 30px; height: 30px; background-color: var(--color-black); border: 2px solid var(--color-black); border-radius: 3px; overflow: hidden; } @media only screen and (max-width: 767px) { .carousel__toggle-button { width: 8.4vw; height: 8.4vw; border-radius: 0.8vw; } } .carousel__toggle-button::after { content: ""; display: block; aspect-ratio: 1/1; position: absolute; z-index: 1; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; background-color: var(--color-white); -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } .carousel__toggle-button > span { position: absolute; z-index: 2; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 33.3333333333%; background-color: var(--color-white); aspect-ratio: 9/10; -webkit-mask-image: url(/assets/img/common/icon_play.svg); mask-image: url(/assets/img/common/icon_play.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .carousel__toggle-button[aria-pressed=true] > span { aspect-ratio: 1/1; -webkit-mask-image: url(/assets/img/common/icon_stop.svg); mask-image: url(/assets/img/common/icon_stop.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media (hover: hover) and (pointer: fine) { .carousel__toggle-button:hover::after { width: 100%; } .carousel__toggle-button:hover > span { background-color: var(--color-black); } } .carousel__toggle-button:focus-visible { outline: 2px solid var(--carousel-color-toggle-button-outline); outline-offset: 0px; } @media only screen and (max-width: 767px) { .carousel__toggle-button:focus-visible { outline: 0.2666666667vw solid var(--carousel-color-toggle-button-outline); } } .carousel-card { position: relative; display: block; width: 100%; max-width: 770px; height: 100%; background-color: var(--color-almostBlack); -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); } @media only screen and (max-width: 1200px) { .carousel-card { width: 64.1666666667vw; } } @media only screen and (max-width: 767px) { .carousel-card { width: 84vw; } } .carousel-card::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; -webkit-transform: scale(0, 1); transform: scale(0, 1); background-color: var(--color-red); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; -webkit-transform-origin: left center; transform-origin: left center; } @media only screen and (max-width: 767px) { .carousel-card::after { height: 0.5333333333vw; } } @media (hover: hover) and (pointer: fine) { .carousel-card:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .carousel-card:hover .carousel-card__inner { opacity: 0.5; } } .carousel-card:focus-visible::before { content: ""; position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; -webkit-box-shadow: inset 0 0 0 2px var(--color-white), inset 0 0 0 5px var(--color-black); box-shadow: inset 0 0 0 2px var(--color-white), inset 0 0 0 5px var(--color-black); } @media only screen and (max-width: 767px) { .carousel-card:focus-visible::before { -webkit-box-shadow: inset 0 0 0 0.2666666667vw var(--color-white), inset 0 0 0 0.6666666667vw var(--color-black); box-shadow: inset 0 0 0 0.2666666667vw var(--color-white), inset 0 0 0 0.6666666667vw var(--color-black); } } .carousel-card__inner { display: grid; width: 100%; height: 100%; grid-template-columns: 36.3636363636% 63.6363636364%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } @media only screen and (max-width: 767px) { .carousel-card__inner { position: relative; display: block; } } @media only screen and (max-width: 767px) { .carousel-card__image { position: absolute; top: 0; left: 0; z-index: 2; width: 39.3333333333vw; height: 39.3333333333vw; } } .carousel-card__image > img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } .carousel-card__content { position: relative; padding: 30px 30px 50px 40px; height: 100%; background-color: var(--color-white); } @media only screen and (max-width: 1200px) { .carousel-card__content { padding: 2.5vw 2.5vw 4.1666666667vw 3.3333333333vw; } } @media only screen and (max-width: 767px) { .carousel-card__content { padding: 0; } } @media only screen and (max-width: 767px) { .carousel-card__title-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 2.5333333333vw; min-height: 39.3333333333vw; padding: 4vw 6vw 0 46vw; } } .carousel-card__meta { margin-bottom: 15px; } @media only screen and (max-width: 1200px) { .carousel-card__meta { margin-bottom: 1.25vw; } } @media only screen and (max-width: 767px) { .carousel-card__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 0.4vw; } } .carousel-card__meta > time { font-size: 1.4rem; font-weight: var(--font-weight-regular); margin-right: 1em; } @media only screen and (max-width: 1200px) { .carousel-card__meta > time { font-size: min(0.21rem + 11.9 * 0.0833333333vw, 1.4rem); } } @media only screen and (max-width: 767px) { .carousel-card__meta > time { font-size: var(--font-size-sp-22px); } } .carousel-card__category { font-size: 1.4rem; font-weight: var(--font-weight-regular); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 1200px) { .carousel-card__category { font-size: min(0.21rem + 11.9 * 0.0833333333vw, 1.4rem); } } @media only screen and (max-width: 767px) { .carousel-card__category { font-size: var(--font-size-sp-22px); } } .carousel-card__title { margin-bottom: 4px; font-size: 2.4rem; font-weight: var(--font-weight-medium); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 1200px) { .carousel-card__title { margin-bottom: 0.3333333333vw; font-size: min(0.36rem + 20.4 * 0.0833333333vw, 2.4rem); } } @media only screen and (max-width: 767px) { .carousel-card__title { font-size: var(--font-size-sp-34px); margin-bottom: 0; } } .carousel-card__description { font-size: 1.6rem; font-weight: var(--font-weight-regular); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 1200px) { .carousel-card__description { font-size: min(0.24rem + 13.6 * 0.0833333333vw, 1.6rem); } } @media only screen and (max-width: 767px) { .carousel-card__description { padding: 3.8666666667vw 5.3333333333vw 11.0666666667vw; font-size: var(--font-size-sp-26px); } } .carousel-card__link-text { position: absolute; right: 28px; bottom: 12px; font-size: 1.6rem; font-weight: var(--font-weight-regular); } @media only screen and (max-width: 1200px) { .carousel-card__link-text { right: 2.3333333333vw; bottom: 1vw; font-size: min(0.24rem + 13.6 * 0.0833333333vw, 1.6rem); } } @media only screen and (max-width: 767px) { .carousel-card__link-text { right: 5.3333333333vw; bottom: 3.4666666667vw; font-size: var(--font-size-sp-26px); } } .carousel-card__link-text::before { margin-right: 9px; content: ""; display: inline-block; width: 0.625em; background-color: var(--carousel-color-card-link-icon); aspect-ratio: 8/10; -webkit-mask-image: url(/assets/img/common/icon_link_right.svg); mask-image: url(/assets/img/common/icon_link_right.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } @media only screen and (max-width: 1200px) { .carousel-card__link-text::before { margin-right: 0.75vw; } } @media only screen and (max-width: 767px) { .carousel-card__link-text::before { margin-right: 1.3333333333vw; } } .carousel-card__link-text--pdf::before { vertical-align: middle; width: 1.5em; background-color: var(--color-red); aspect-ratio: 24/22; -webkit-mask-image: url(/assets/img/common/icon_pdf.svg); mask-image: url(/assets/img/common/icon_pdf.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .floating-box { position: absolute; z-index: 999; top: min(640px, 53.3333333333vw); right: 10px; width: 0; height: calc(100% - min(640px, 53.3333333333vw)); } @media only screen and (max-width: 767px) { .floating-box { top: 70.6666666667vw; right: 4vw; height: calc(100% - 70.6666666667vw); } } .business-lv4 .floating-box { top: min(340px, 28.3333333333vw); } @media only screen and (max-width: 767px) { .business-lv4 .floating-box { top: 70.6666666667vw; } } .floating-box__inner { position: sticky; top: calc(var(--header-height) + 60px); } @media only screen and (max-width: 767px) { .floating-box__inner { top: 29.3333333333vw; } } .floating-box__main { position: absolute; top: 0; right: 0; } .contact-button__button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100px; height: 100px; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); background-color: var(--color-red); border-radius: 3px; border: 4px solid var(--color-red); overflow: hidden; } @media only screen and (max-width: 767px) { .contact-button__button { width: 16vw; height: 16vw; -webkit-box-shadow: 0 0 4vw rgba(0, 0, 0, 0.3); box-shadow: 0 0 4vw rgba(0, 0, 0, 0.3); border-radius: 0.4vw; border-width: 0.5333333333vw; } } .contact-button__button::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: var(--color-white); width: 0; aspect-ratio: 1; border-radius: 50%; -webkit-transition: width 0.4s; transition: width 0.4s; } @media (hover: hover) and (pointer: fine) { .contact-button__button:hover::before { width: 300%; } .contact-button__button:hover .contact-button__button-icon { background-color: var(--color-red); } } .contact-button__button:focus-visible { background-color: var(--color-white); border-color: var(--color-almostBlack); } .contact-button__button:focus-visible .contact-button__button-icon { background-color: var(--color-almostBlack); } .contact-button__button-icon { position: relative; z-index: 2; display: block; width: 80px; aspect-ratio: 70/60; background-color: var(--color-white); -webkit-mask-image: url(/assets/img/common/button_contact.svg); mask-image: url(/assets/img/common/button_contact.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; -webkit-transition: background-color 0.4s; transition: background-color 0.4s; } @media only screen and (max-width: 767px) { .contact-button__button-icon { width: 12.8vw; } } .contact-button__hide-button { position: absolute; z-index: 9; top: 0; right: 0; padding: 8px 8px 5px 5px; } @media only screen and (max-width: 767px) { .contact-button__hide-button { padding: 1.3333333333vw 1.3333333333vw 0.8vw 0.8vw; } } .contact-button__hide-button:focus-visible { border-radius: 10px; outline: 2px solid var(--color-focus-border, #000); outline-offset: 2px; background-color: var(--color-focus-bg); -webkit-box-shadow: 0 0 0 2px var(--color-focus-bg); box-shadow: 0 0 0 2px var(--color-focus-bg); } .contact-button__hide-button-icon { position: relative; display: block; width: 12px; aspect-ratio: 1; overflow: hidden; } @media only screen and (max-width: 767px) { .contact-button__hide-button-icon { width: 1.8666666667vw; } } .contact-button__hide-button-icon::before { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color: var(--color-white); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center center; transform-origin: center center; } .contact-button__hide-button-icon::after { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 100%; height: 1px; background-color: var(--color-white); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: center center; transform-origin: center center; } .dialog-video { max-width: unset; max-height: unset; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); border: none; opacity: 0; width: 100%; height: 100%; overflow: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .dialog-video[open] { display: grid; } .dialog-video__inner { position: relative; width: 65.8857979502vw; } @media only screen and (max-width: 767px) { .dialog-video__inner { width: 93.3333333333vw; } } .dialog-video--YouTube .dialog-video__inner { width: 65.5929721816vw; } @media only screen and (max-width: 767px) { .dialog-video--YouTube .dialog-video__inner { width: 89.6vw; } } .dialog-video--mp4 .dialog-video__inner { width: 65.8857979502vw; } @media only screen and (max-width: 767px) { .dialog-video--mp4 .dialog-video__inner { width: 93.3333333333vw; } } .dialog-video__close-button { position: absolute; bottom: 100%; left: 100%; width: 3.513909224vw; height: 3.513909224vw; padding: 0.5856515373vw; } @media only screen and (max-width: 767px) { .dialog-video__close-button { right: 0; bottom: calc(100% + 2.6666666667vw); left: auto; width: 6.4vw; height: 6.4vw; padding: 0; } } .dialog-video__close-button > img { width: 100%; } .dialog-video--YouTube .dialog-video__player-wrap { width: 65.5929721816vw; height: 36.8960468521vw; } @media only screen and (max-width: 767px) { .dialog-video--YouTube .dialog-video__player-wrap { width: 89.6vw; height: 50.4vw; } } .dialog-video--mp4 .dialog-video__player-wrap { width: 65.8857979502vw; aspect-ratio: 16/9; } @media only screen and (max-width: 767px) { .dialog-video--mp4 .dialog-video__player-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 93.3333333333vw; max-height: 80vh; aspect-ratio: auto; } } .dialog-video--YouTube .dialog-video__player { width: 65.5929721816vw; height: 36.8960468521vw; } @media only screen and (max-width: 767px) { .dialog-video--YouTube .dialog-video__player { width: 89.6vw; height: 50.4vw; } } .dialog-video--mp4 .dialog-video__player { -o-object-fit: contain; object-fit: contain; -o-object-position: center center; object-position: center center; width: 100%; height: 100%; } @media only screen and (max-width: 767px) { .dialog-video--mp4 .dialog-video__player { width: 80%; height: auto; } } @media only screen and (max-width: 767px) { .u-show-pc { display: none; } } @media (min-width: 768px) { .u-show-sp { display: none; } } .u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .u-nowrap { white-space: nowrap !important; } .u-mt-0 { margin-top: 0 !important; } .u-mb-0 { margin-bottom: 0 !important; } .u-pt-0 { padding-top: 0 !important; } .u-pb-0 { padding-bottom: 0 !important; } .u-mt-80 { margin-top: 80px !important; } .u-mt-half-em { margin-top: 0.5em !important; } .u-mt-1em { margin-top: 1em !important; } .u-mt-half-lh { margin-top: 0.5lh !important; } .u-mt-1lh { margin-top: 1lh !important; } .u-opacity1 { opacity: 1 !important; } .u-block { display: block !important; } .u-ib { display: inline-block !important; } .u-va-top { vertical-align: top !important; } .u-ta-center { text-align: center !important; } .u-ta-left { text-align: left !important; } .u-ta-right { text-align: right !important; } .u-fw-medium { font-weight: var(--font-weight-medium); } .u-fw-bold { font-weight: var(--font-weight-bold); } .u-line { margin: 0.5em 0; width: 100%; height: 1px; background-color: var(--color-lightGray-7); } .u-icon--external-link { display: inline-block; width: 0.8125em; background-color: var(--color-default); vertical-align: middle; aspect-ratio: 18/14; -webkit-mask-image: url(/assets/img/common/icon_external-link.svg); mask-image: url(/assets/img/common/icon_external-link.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .u-icon--pdf { display: inline-block; width: 1.5em; background-color: var(--color-red); vertical-align: text-bottom; aspect-ratio: 24/22; -webkit-mask-image: url(/assets/img/common/icon_pdf.svg); mask-image: url(/assets/img/common/icon_pdf.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; } .u-note { font-size: var(--font-size-pc-14px); -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 767px) { .u-note { font-size: var(--font-size-sp-23px); } } .u-palt { -webkit-font-feature-settings: "palt" !important; font-feature-settings: "palt" !important; } .u-paren-fix::first-letter { margin-left: -0.4em; } .u-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .u-w-auto { width: auto !important; }/*# sourceMappingURL=common.css.map */