@charset "UTF-8"; /*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, details, summary):not(svg *, symbol *)) { all: unset; display: revert; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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; appearance: revert; } /* reset default text opacity of input placeholder */ ::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; } :root { --color-blue: #043d78; --color-blue-rgb: 4, 61, 120; --color-beige: #faf5ed; --color-beige-rgb: 250, 245, 237; --color-blue-gray: #9eb2c6; --color-blue-gray-rgb: 158, 178, 198; --color-cloud: #ced8e2; --color-cloud-rgb: 206, 216, 226; --color-black: #4c4c4c; --color-black-rgb: 76, 76, 76; --color-white: #fff; --color-white-rgb: 255, 255, 255; --color-bg: #ecf0f4; --inner-padding: 6.4vw; --header-height: 44px; --hover-opacity: 0.6; } @media (min-width: 768px) { :root { --header-height: 78px; --inner-padding: 50px; } } * { margin: 0; padding: 0; } *::before, *::after { pointer-events: none; } html { overflow: auto; font-size: 62.5%; } body { position: relative; overflow: hidden; min-width: 320px; min-height: 100vh; padding-top: var(--header-height); font-weight: 400; font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif; color: var(--color-black); -webkit-text-size-adjust: 100%; letter-spacing: 0.05em; font-size: clamp(1.4rem, 1.0666666667rem + 0.6944444444vw, 1.6rem); } body h1:has(wbr), body h2:has(wbr), body h3:has(wbr), body h4:has(wbr), body h5:has(wbr), body h6:has(wbr), body p:has(wbr), body li:has(wbr), body span:has(wbr), body dt:has(wbr), body dd:has(wbr), body th:has(wbr), body td:has(wbr) { word-break: keep-all; overflow-wrap: anywhere; } :target, [id] { scroll-margin-top: var(--header-height); } main { position: relative; z-index: 2; } main p { line-height: 2; } a { color: inherit; text-decoration: none; transition: all 0.3s ease-in; } span { font-weight: inherit; } img { display: block; width: 100%; height: auto; } svg { width: 100%; height: 100%; } i:has(svg), span:has(svg) { display: inline-flex; justify-content: center; align-items: center; } input, textarea, button { border: none; appearance: none; caret-color: var(--color-blue); } input:focus-visible, textarea:focus-visible, button:focus-visible { outline-color: var(--color-blue); } @media (max-width: 767.98px) { input, textarea, button { font-size: 1.6rem; } } /* ------------------------------ Skip Link キーボード操作でフォーカスされた時のみ画面左上に出現 ------------------------------ */ .l-skip-link { position: absolute; top: 0; left: 0; z-index: 9999; padding: 0.75em 1.5em; background: var(--color-blue); color: var(--color-white); text-decoration: none; transform: translateY(-100%); } .l-skip-link:focus { transform: translateY(0); outline: 2px solid var(--color-white); outline-offset: -4px; } .js-slider .splide__slide--clone { opacity: 0; } .js-slider .splide__arrow { box-sizing: border-box; top: 25vw; transform: none; width: 44px; height: 44px; border: 1px solid var(--color-blue); background: var(--color-white); opacity: 1; transition: background 0.3s ease-in; } .js-slider .splide__arrow svg { color: var(--color-blue); transition: color 0.3s ease-in; } @media not all and (pointer: coarse) { .js-slider .splide__arrow:hover { background-color: var(--color-blue); } .js-slider .splide__arrow:hover svg { color: var(--color-white); } } .js-slider .splide__arrow--next { right: -32px; } .js-slider .splide__arrow--prev { left: -32px; } .js-slider .splide__pagination { position: relative; left: inherit; right: inherit; bottom: inherit; margin-top: 30px; gap: 8px; } .js-slider .splide__pagination__page { opacity: 1; background-color: var(--color-blue-gray); } @media not all and (pointer: coarse) { .js-slider .splide__pagination__page:hover { opacity: var(--hover-opacity); } } .js-slider .splide__pagination__page.is-active { background-color: var(--color-blue); } .js-slider--ad { width: min(100%, 600px); margin: auto; } .js-slider--ad .splide__arrow { top: 40%; } @media (max-width: 767.98px) { .js-slider--ad .splide__arrow--next { right: -22px; } .js-slider--ad .splide__arrow--prev { left: -22px; } } @media (min-width: 768px) { .js-slider .splide__arrow--next { right: -80px; } .js-slider .splide__arrow--prev { left: -80px; } .js-slider .splide__pagination { margin-top: 80px; gap: 12px; } } @media (min-width: 1024px) { .js-slider:not(.js-slider--ad) .splide__arrow { top: 130px; } } @media (min-width: 1200px) { .js-slider .splide__arrow { width: 70px; height: 70px; } .js-slider .splide__arrow--next { right: -105px; } .js-slider .splide__arrow--prev { left: -105px; } .js-slider--ad { width: 900px; } } .js-modal { position: fixed; z-index: 2000; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* .l-header ================================================ */ .l-header { --gnav-btn-width: 32px; --gnav-btn-height: 15px; --gnav-line-gap: 6px; box-sizing: border-box; position: fixed; z-index: 2000; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100vw; height: var(--header-height); padding: 0 24px; background-color: var(--color-white); box-shadow: 0 4px 14px 0 rgba(214, 189, 138, 0.1); font-size: 1.4rem; } .l-header__logo { width: 82px; } .l-header__button { position: relative; width: var(--gnav-btn-width); height: var(--gnav-btn-height); cursor: pointer; } .l-header__button-line { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: var(--color-black); transition: all 0.3s ease-in; } .l-header__button-line:nth-child(1) { top: 0; } .l-header__button-line:nth-child(2) { top: var(--gnav-line-gap); } .l-header__button-line:nth-child(3) { top: calc(var(--gnav-line-gap) * 2); } .l-header__button.is-open .l-header__button-line:nth-child(1) { top: var(--gnav-line-gap); transform: rotate(-20deg); } .l-header__button.is-open .l-header__button-line:nth-child(2) { opacity: 0; } .l-header__button.is-open .l-header__button-line:nth-child(3) { top: var(--gnav-line-gap); transform: rotate(20deg); } @media (min-width: 768px) { .l-header { padding: 14px 40px 11px; } .l-header__logo { width: 140px; } } @media (min-width: 1024px) { .l-header { padding-left: clamp(25px, 25px + 15 * (100vw - 1024px) / 342, 40px); padding-right: clamp(25px, 25px + 15 * (100vw - 1024px) / 342, 40px); } .l-header__button { display: none !important; } .l-header__logo { width: clamp(120px, 120px + 20 * (100vw - 1024px) / 342, 140px); } } .l-header-nav__list { display: flex; flex-wrap: wrap; } .l-header-nav__item details[open] summary::after { transform: rotate(180deg); } .l-header-nav__item summary { box-sizing: border-box; position: relative; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .l-header-nav__item summary::after { content: ""; box-sizing: border-box; display: inline-block; width: 43px; height: 36px; background: no-repeat center/8px 5px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%225%22%20viewBox%3D%220%200%208%205%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M0.94%200L4%203.05333L7.06%200L8%200.94L4%204.94L0%200.94L0.94%200Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); } .l-header-nav__lang { display: flex; justify-content: flex-end; align-items: center; gap: 4px; width: fit-content; font-size: 1.2rem; } .l-header-nav__lang span { width: 20px; height: 20px; } @media (max-width: 1023.98px) { .l-header-nav { box-sizing: border-box; position: absolute; z-index: 9000; top: var(--header-height); right: 0; width: min(100%, 300px); height: calc(100vh - var(--header-height)); padding: 24px 24px 48px; transform: translateX(120%); background-color: var(--color-blue); color: var(--color-white); overflow-y: auto; transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .l-header-nav a:hover, .l-header-nav summary:hover { opacity: var(--hover-opacity); } } .l-header-nav.is-open { transform: translateX(0); } .l-header-nav__list { flex-direction: column; gap: 28px; } .l-header-nav__item summary { border-bottom: 1px solid; } .l-header-nav__item > a:not(:has(.l-header-nav__icon)) { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border-bottom: 1px solid; } .l-header-nav__sub-item { margin-bottom: 16px; } .l-header-nav__sub-item:has(.l-header-nav__icon) a { display: flex; align-items: center; gap: 8px; } .l-header-nav__sub { margin-top: 40px; margin-bottom: 24px; } .l-header-nav__icon { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border: 1px solid; border-radius: 50%; color: var(--color-white); } .l-header-nav__icon svg { width: 12px; height: 12px; } .l-header-nav__lang { margin-left: auto; } } @media (min-width: 1024px) { .l-header-nav { display: grid; grid-template-columns: 1fr auto; height: 100%; color: var(--color-blue); } .l-header-nav__list { grid-column: 1/3; grid-row: 2; justify-content: space-between; align-items: center; gap: clamp(14px, -45.787px + 5.851vw, 36px); font-size: 1.4rem; } .l-header-nav__item summary { gap: 6px; font-size: clamp(1.2rem, 0.6011695906rem + 0.5847953216vw, 1.4rem); transition: all 0.3s ease-in; } .l-header-nav__item summary::after { width: 12px; height: 12px; background-size: auto; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M6.00195%209.56055L0.648437%204.20703L1.35547%203.5L6.00195%208.14648L10.6484%203.5L11.3555%204.20703L6.00195%209.56055Z%22%20fill%3D%22%23043D78%22%2F%3E%3C%2Fsvg%3E"); } @media not all and (pointer: coarse) { .l-header-nav__item summary:hover { text-decoration: underline; } } @media not all and (pointer: coarse) { .l-header-nav__item > a:not([class]):hover { text-decoration: underline; } } .l-header-nav__item--sustainability span:not([class]) { margin-left: 4px; } .l-header-nav__sub { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; font-size: 1.4rem; } .l-header-nav__sub-item { position: relative; margin-right: 16px; padding-right: 16px; } .l-header-nav__sub-item::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 16px; background-color: var(--color-blue); } .l-header-nav__sub-item a { display: flex; align-items: center; height: 100%; } @media not all and (pointer: coarse) { .l-header-nav__sub-item a:hover { text-decoration: underline; } } .l-header-nav__icon { display: none !important; } .l-header-nav__lang { grid-column: 2; grid-row: 1; } .l-header-nav__lang span { width: 16px; height: 16px; } @media not all and (pointer: coarse) { .l-header-nav__lang:hover { text-decoration: underline; } } } /* overlay */ .l-overlay { display: none; position: fixed; top: var(--header-height); left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1000; } @media (min-width: 768px) { .l-overlay { display: none !important; } } /* .l-footer ================================================ */ .l-footer { position: relative; background-color: var(--color-bg); } .l-footer__inner { display: grid; grid-template-columns: 100%; padding-top: 24px; padding-bottom: 10px; } .l-footer__logo { width: 160px; } .l-footer__credit { font-size: 1rem; justify-self: end; } .l-footer__pagetop { z-index: 9001; position: absolute; right: 0; bottom: 100%; } .l-footer__pagetop a { position: relative; width: 100%; height: 100%; background-color: var(--color-blue); } .l-footer__pagetop a::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: no-repeat center/1em; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M8.0013%203.05794L15.1393%2010.196L14.1966%2011.1387L8.0013%204.94336L1.80599%2011.1387L0.863282%2010.196L8.0013%203.05794Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); } .l-footer__pagetop.is-fixed { position: fixed; bottom: 0; right: 0; } .l-footer__pagetop.is-absolute { position: absolute; bottom: 100%; right: 0; } @media (max-width: 767.98px) { .l-footer__logo { margin-bottom: 40px; } .l-footer__credit { margin-top: 10px; font-feature-settings: "palt"; letter-spacing: 0; } } @media (min-width: 768px) { .l-footer__inner { --inner-max-width: 1200px; padding-top: 64px; padding-bottom: 10px; } .l-footer__pagetop { width: 36px; height: 36px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .l-footer__logo { margin-bottom: 64px; } .l-footer__credit { margin-top: 48px; text-align: right; } } @media (min-width: 1000px) and (max-width: 1280px) { .l-footer__inner { padding-left: 50px !important; padding-right: 50px !important; } } @media (min-width: 1024px) { .l-footer__inner { display: grid; grid-template-columns: 160px 1fr; gap: 48px min(8.33%, 100px); padding-top: 64px; padding-bottom: 10px; } .l-footer__credit { grid-column: 2; } } .l-footer-nav__item:not(:has(.l-footer-nav__children)) { display: flex; flex-wrap: wrap; } .l-footer-nav__link--has-no-icon { padding-right: 12px; padding-left: 12px; font-size: 1rem; } .l-footer-nav__link--has-no-icon + .l-footer-nav__link--has-no-icon { position: relative; } .l-footer-nav__link--has-no-icon + .l-footer-nav__link--has-no-icon::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 16px; background-color: var(--color-cloud); } .l-footer-nav__link--has-no-icon:last-of-type { margin-right: -12px; } @media (max-width: 767.98px) { .l-footer-nav__item:not(:has(.l-footer-nav__children)) { justify-content: flex-end; } .l-footer-nav__item:not(:has(.l-footer-nav__children)) .l-footer-nav__link:not(.l-footer-nav__link--has-no-icon) { display: none !important; } .l-footer-nav__link { display: inline-block; } } @media (min-width: 768px) { .l-footer-nav__item { box-sizing: border-box; padding-bottom: 20px; } .l-footer-nav__item:not(:first-of-type) { padding-top: 20px; } .l-footer-nav__item:not(:last-of-type) { border-bottom: 1px solid var(--color-cloud); } .l-footer-nav__item:has(.l-footer-nav__children) { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 48px; } .l-footer-nav__item:has(.l-footer-nav__children) .l-footer-nav__link { min-width: 152px; } .l-footer-nav__item:not(:has(.l-footer-nav__children)) .l-footer-nav__link:not(.l-footer-nav__link--has-no-icon) { margin-right: 40px; } .l-footer-nav__link { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; } @media not all and (pointer: coarse) { .l-footer-nav__link:not(.l-footer-nav__link--has-no-icon):hover { color: var(--color-blue-rgb); text-decoration: underline; } .l-footer-nav__link:not(.l-footer-nav__link--has-no-icon):hover .l-footer-nav__link-icon { background-color: var(--color-blue); color: var(--color-white); } } .l-footer-nav__link--has-no-icon { padding-left: 16px; padding-right: 16px; font-size: 1.2rem; } .l-footer-nav__link--has-no-icon:first-child, .l-footer-nav__link:not(.l-footer-nav__link--has-no-icon) + .l-footer-nav__link--has-no-icon { margin-left: auto; } @media not all and (pointer: coarse) { .l-footer-nav__link--has-no-icon:hover { color: var(--color-blue); text-decoration: underline; } } .l-footer-nav__link--has-no-icon:last-of-type { margin-right: -16px; } .l-footer-nav__link-icon { box-sizing: border-box; width: 24px; height: 24px; border: 1px solid; border-radius: 50%; transition: all 0.3s ease-in; } .l-footer-nav__link-icon svg { width: 9px; height: 9px; } .l-footer-nav__children { display: flex; flex-wrap: wrap; gap: 8px 40px; } .l-footer-nav__child-link { position: relative; display: flex; align-items: center; gap: 8px; font-size: 1.2rem; } .l-footer-nav__child-link::before { content: ""; display: inline-block; width: 8px; height: 1px; background-color: var(--color-black); } @media not all and (pointer: coarse) { .l-footer-nav__child-link:hover { text-decoration: underline; } } } /* .l-breadcrumb //================================================ */ .l-breadcrumb-list { box-sizing: border-box; display: flex; align-items: center; white-space: nowrap; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; overflow: auto; padding: 10px 24px 4px; } .l-breadcrumb-list::-webkit-scrollbar { display: none; } .l-breadcrumb-list__item { display: inline-flex; align-items: center; font-size: 1rem; } .l-breadcrumb-list__item + .l-breadcrumb-list__item { margin-left: 4px; } .l-breadcrumb-list__item + .l-breadcrumb-list__item:before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 4px; vertical-align: middle; background: no-repeat center/80%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M8.08903%204.99984L3.62777%209.4611L3.03857%208.87191L6.91064%204.99984L3.03857%201.12777L3.62777%200.538574L8.08903%204.99984Z%22%20fill%3D%22%234C4C4C%22%2F%3E%3C%2Fsvg%3E"); } .l-breadcrumb-list__link { color: var(--color-blue); } @media not all and (pointer: coarse) { .l-breadcrumb-list__link:hover { text-decoration: underline; } } @media (min-width: 768px) { .l-breadcrumb-list { width: min(100%, 1248px); margin: auto; padding: 16px 24px 8px; } } /* HOME ================================================ */ .l-main-visual { position: relative; min-width: 100vw; } .l-main-visual__video { width: 100%; } .l-main-visual__button { position: absolute; top: calc(100% - 40px); left: 50%; transform: translateX(-50%); width: 200px; height: 40px; background: var(--color-blue); color: var(--color-white); text-align: center; cursor: pointer; } /* .l-sub-visual ================================================ */ .l-sub-visual { box-sizing: border-box; height: var(--subvisual-height, 250px); background: no-repeat center/cover; color: var(--color-white); } .l-sub-visual--about { background-image: url(../img/about/bg_mv01_sp.jpg); } @media (min-width: 768px) { .l-sub-visual--about { background-image: url(../img/about/bg_mv01_pc.jpg); } } .l-sub-visual--business { background-image: url(../img/business/bg_mv01_sp.jpg); } @media (min-width: 768px) { .l-sub-visual--business { background-image: url(../img/business/bg_mv01_pc.jpg); } } .l-sub-visual--company { background-image: url(../img/company/bg_mv01_sp.jpg); } @media (min-width: 768px) { .l-sub-visual--company { background-image: url(../img/company/bg_mv01_pc.jpg); } } .l-sub-visual--about-product-history { background-image: url(../img/about-product-history/bg_mv01_sp.jpg); } @media (min-width: 768px) { .l-sub-visual--about-product-history { background-image: url(../img/about-product-history/bg_mv01_pc.jpg); } } .l-sub-visual--about-history { background-image: url(../img/about-history/bg_mv01_sp.jpg); } @media (min-width: 768px) { .l-sub-visual--about-history { background-image: url(../img/about-history/bg_mv01_pc.jpg); } } .l-sub-visual--about-brand-story { background-image: url(../img/about-brand-story/bg_mv01_sp.jpg); } @media (min-width: 768px) { .l-sub-visual--about-brand-story { background-image: url(../img/about-brand-story/bg_mv01_pc.jpg); } } .l-sub-visual--recruit { background-image: url(../img/recruit/bg_mv01_sp.jpg); } @media (min-width: 768px) { .l-sub-visual--recruit { background-image: url(../img/recruit/bg_mv01_pc.jpg); } } .l-sub-visual--about-product-history, .l-sub-visual--about-history { --subvisual-height: 320px; } .l-sub-visual--about-brand-story .l-sub-visual__inner { justify-content: center; text-align: center; gap: 4px; } .l-sub-visual--about-brand-story .l-sub-visual__ja { font-size: clamp(2.2rem, -0.3142857143rem + 5.2380952381vw, 4.4rem); } .l-sub-visual--about, .l-sub-visual--business { position: relative; } .l-sub-visual--about::after, .l-sub-visual--business::after { content: ""; display: inline-block; position: absolute; z-index: -1; top: 100%; left: 0; width: 100vw; height: 240px; background: linear-gradient(180deg, #dfeef8 0%, #fff 100%); } .l-sub-visual__inner { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-top: 32px; padding-bottom: 32px; } .l-sub-visual__en { line-height: 1.6; font-size: 1.4rem; } .l-sub-visual__ja { line-height: 1.4; font-size: clamp(2.2rem, 1.2857142857rem + 1.9047619048vw, 3rem); } .l-sub-visual__lead { margin-top: 30px; line-height: 2; font-size: clamp(1.2rem, 0.8571428571rem + 0.7142857143vw, 1.5rem); } @media (max-width: 767.98px) { .l-sub-visual__en { margin-bottom: 6px; } } @media (min-width: 768px) { .l-sub-visual { --subvisual-height: 400px; } .l-sub-visual--about-product-history { --subvisual-height: 480px; } .l-sub-visual--about-history { --subvisual-height: 480px; } .l-sub-visual--about-brand-story { --subvisual-height: 450px; } .l-sub-visual--about-brand-story .l-sub-visual__inner { gap: 8px; } .l-sub-visual--about::after, .l-sub-visual--business::after { height: 360px; } .l-sub-visual__inner { padding-top: 54px; padding-bottom: 54px; } .l-sub-visual__lead { margin-top: 40px; } } @media (min-width: 1024px) { .l-sub-visual--about-history .l-sub-visual__inner { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; place-content: end; } .l-sub-visual--about-history .l-sub-visual__en { align-self: end; margin-bottom: 8px; } .l-sub-visual--about-history .l-sub-visual__lead { grid-column: 2; grid-row: 1/3; } } /* .l-common-visual ================================================ */ .l-common-visual { box-sizing: border-box; position: relative; height: 120px; background-color: var(--color-bg); color: var(--color-blue); overflow: hidden; font-size: clamp(2.2rem, 1.2857142857rem + 1.9047619048vw, 3rem); } .l-common-visual::after { content: ""; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); width: 226px; height: 183px; background: no-repeat center/100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22226%22%20height%3D%22183%22%20viewBox%3D%220%200%20226%20183%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M48.7822%2049.9288V0H15.9133C2.95334%200%200%208.91214%200%2016.1218V89.6426L48.7822%2049.9288Z%22%20fill%3D%22%23CED8E2%22%2F%3E%3Cpath%20d%3D%22M156.249%20104.444C140.284%2086.8282%20126.281%2079.7054%20110.542%2078.1593L208.089%200H168.201C156.944%200%20153.834%200.955493%20137.869%2013.7938L44.8908%2089.243C42.9798%2090.5807%2040.9819%2092.4569%2035.7007%2092.4569H0V182.377H32.73C44.0048%20182.377%2048.7301%20175.515%2048.7301%20167.541L48.6954%20102.429C48.6954%2099.5797%2049.6856%2097.9119%2052.4478%2097.9119H59.8486C77.9161%2098.3636%2086.3244%2099.2148%2097.9988%20111.984L143.584%20163.372C160.627%20182.43%20173.153%20182.43%20191.967%20182.43H226L156.249%20104.461V104.444Z%22%20fill%3D%22%23CED8E2%22%2F%3E%3C%2Fsvg%3E"); } .l-common-visual::after { left: 61.3vw; } .l-common-visual__inner { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; } @media (min-width: 768px) { .l-common-visual { height: 130px; } .l-common-visual::after { width: 416px; height: 336px; } .l-common-visual::after { left: 78.9vw; } } .c-archive-list__item { border-bottom: 1px solid var(--color-blue-gray); } .c-archive-list__item--has-pdf .c-archive-list__icon { vertical-align: text-bottom; } .c-archive-list__item--has-pdf .c-archive-list__icon svg { width: 16px; height: 16px; } .c-archive-list__item--has-external-link .c-archive-list__icon svg { width: 12px; height: 12px; } .c-archive-list__link { box-sizing: border-box; display: block; } .c-archive-list__link { padding-top: 4.2vw; } .c-archive-list__link { padding-bottom: 4.2vw; } @media not all and (pointer: coarse) { .c-archive-list a.c-archive-list__link:hover .c-archive-list__head { text-decoration: underline; color: var(--color-blue); } .c-archive-list a.c-archive-list__link:hover .c-archive-list__icon { color: var(--color-blue); } } .c-archive-list__date { font-size: clamp(1rem, 0.6470588235rem + 0.7352941176vw, 1.4rem); } .c-archive-list__cat { box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; min-width: 100px; padding: 2px 10px 3px 10px; border-radius: 100px; background-color: rgba(var(--color-cloud-rgb), 0.5); font-size: clamp(1rem, 0.8235294118rem + 0.3676470588vw, 1.2rem); } .c-archive-list__cat--important { background-color: #d66b6b; color: #fff; } .c-archive-list__head { font-size: clamp(1.2rem, 1.0235294118rem + 0.3676470588vw, 1.4rem); } .c-archive-list__icon { margin-left: 0.5em; } @media (max-width: 767.98px) { .c-archive-list__date { margin-right: 1em; } .c-archive-list__head { margin-top: 8px; } } @media (min-width: 768px) { .c-archive-list__link { display: grid; grid-template-columns: auto auto 1fr; gap: 20px; padding-top: 24px; padding-bottom: 24px; } .c-archive-list__cat { align-self: start; min-width: 140px; padding: 2px 10px 3px 10px; } } .c-archive__inner { padding-top: 10.6vw; } .c-archive__inner { padding-bottom: 21.3vw; } .c-archive__filter { display: grid; grid-template-columns: 100%; } .c-archive__filter { gap: 8vw; } .c-archive__filter { margin-bottom: 16vw; } .c-archive__head { line-height: 1.6; color: var(--color-blue); font-size: clamp(1.8rem, 1.4rem + 0.8333333333vw, 2.4rem); } .c-archive__head { margin-bottom: 8vw; } @media (min-width: 768px) { .c-archive__inner { padding-top: 80px; padding-bottom: 160px; } .c-archive__filter { grid-template-columns: 1fr 240px; gap: 68px; margin-bottom: 80px; } .c-archive__head { margin-bottom: 40px; } } .c-select { box-sizing: border-box; position: relative; width: 100%; padding: 10px 20px; border: 1px solid var(--color-blue); background: no-repeat center right 20px/1em; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M6%209.70703L0.646484%204.35352L1.35352%203.64648L6%208.29297L10.6465%203.64648L11.3535%204.35352L6%209.70703Z%22%20fill%3D%22%23043D78%22%2F%3E%3C%2Fsvg%3E"); font-size: 1.6rem; cursor: pointer; } @media (min-width: 768px) { .c-select { font-size: 1.4rem; } } .c-taxonomy { display: flex; flex-wrap: wrap; gap: 1em; } .c-taxonomy__link { box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 3px 10px; border: 1px solid var(--color-cloud); border-radius: 40px; background-color: var(--color-white); font-size: clamp(1rem, 0.8rem + 0.4166666667vw, 1.3rem); } @media not all and (pointer: coarse) { .c-taxonomy__link:hover { border-color: var(--color-blue); background-color: var(--color-blue); color: var(--color-white); } } @media (min-width: 768px) { .c-taxonomy { align-self: start; } .c-taxonomy__link { padding: 2px 16px; } } .c-button { --button-margin-top: 40px; --button-margin-right: auto; --button-margin-bottom: 0; --button-margin-left: auto; --button-width: 140px; --button-height: 38px; --button-bg-color: var(--color-white); --button-hover-bg-color: var(--color-blue); --button-icon-right: 11px; --button-icon-width: 10px; --button-font-size: 1rem; width: var(--button-width); margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left); } .c-button--align-left { --button-margin-left: 0; } .c-button--align-right { --button-margin-right: 0; } .c-button--pdf { --button-width: 247px; --button-height: 54px; --button-icon-width: 17px; --button-font-size: 1.2rem; } .c-button--pdf small { font-size: 1rem; text-box-trim: trim-start; text-box-edge: cap alphabetic; } .c-button--external { --button-width: 184px; --button-height: 36px; } .c-button--back { --button-width: 200px; --button-icon-right: inherit; } .c-button--back .c-button__link { padding-left: 10px; } .c-button--back .c-button__icon { left: 11px; transform: scaleX(-1) translateY(-50%); } .c-button__link { box-sizing: border-box; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: var(--button-height); line-height: 1.4; border-radius: 100px; border: 1px solid; font-size: var(--button-font-size); } @media not all and (pointer: coarse) { .c-button__link:hover { border-color: var(--button-hover-bg-color); background-color: var(--button-hover-bg-color); color: var(--button-bg-color); } .c-button__link:hover .c-button__icon { color: var(--button-bg-color); } } .c-button__link:has(small) { flex-direction: column; } .c-button__icon { position: absolute; top: 50%; right: var(--button-icon-right); transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: var(--button-icon-width); height: var(--button-icon-width); transition: all 0.3s ease-in; } @media (min-width: 768px) { .c-button { --button-margin-top: 60px; --button-width: 200px; --button-height: 40px; --button-icon-width: 12px; --button-font-size: 1.2rem; } .c-button--pdf { --button-width: 320px; --button-height: 66px; --button-icon-right: 24px; --button-icon-width: 24px; --button-font-size: 1.4rem; } .c-button--pdf small { font-size: 1.2rem; } .c-button--external { --button-width: 200px; --button-height: 40px; } .c-button--external .c-button__link { gap: 16px; } .c-button--external .c-button__icon { position: relative; top: inherit; right: inherit; transform: none; } .c-button--back .c-button__link { padding-left: 14px; } } .c-button-list { display: flex; flex-wrap: wrap; width: fit-content; margin: auto; } .c-button-list { gap: 6.4vw; } .c-button-list .c-button { --button-margin-top: 0; --button-margin-right: 0; --button-margin-left: 0; } @media (max-width: 767.98px) { .c-button-list { flex-direction: var(--button-list-flex-direction, column); } } @media (min-width: 768px) { .c-button-list { justify-content: var(--button-list-justify-content, center); gap: 40px; gap: clamp(20px, 20px + 20 * (100vw - 768px) / 256, 40px); } } .c-card__text-area > h2, .c-card__text-area > h3 { color: var(--color-blue); font-size: clamp(1.6rem, 1.1428571429rem + 0.9523809524vw, 2rem); } .c-card__text-area > h2, .c-card__text-area > h3 { margin-bottom: 2.1vw; } .c-card__text-area p { font-size: clamp(1.2rem, 0.9714285714rem + 0.4761904762vw, 1.4rem); } .c-card__button { --button-margin-top: 20px; } @media (max-width: 1023.98px) { .c-card__thumbnail { margin-bottom: 4.2vw; } } @media (min-width: 768px) { .c-card__button { --button-margin-top: 40px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .c-card { max-width: 600px; margin-left: auto; margin-right: auto; } } @media (min-width: 1024px) { .c-card { display: grid; grid-template-columns: min(42.55%, 480px) 1fr; column-gap: clamp(36px, 36px + 36 * (100vw - 1024px) / 176, 72px); } .c-card__text-area { align-self: end; padding-bottom: 32px; border-bottom: 1px solid var(--color-blue-gray); } .c-card__text-area > h2, .c-card__text-area > h3 { margin-bottom: 20px; } .c-card__text-area p { max-width: 420px; } .c-card__text-area:not(:has(.c-card__button)) { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; height: 100%; } } .c-card-list { display: grid; grid-template-columns: 100%; } .c-card-list { gap: 18.6vw; } @media (min-width: 768px) { .c-card-list { gap: 100px; } } .c-form { --fluentform-danger: #f56c6c; } .c-form select { all: revert; } .c-form__item { padding: 20px 0; border-bottom: 1px solid var(--color-blue-gray); } .c-form__label { padding-top: 20px; } .c-form__name { padding-bottom: 20px; border-bottom: 1px solid var(--color-blue-gray); } .c-form__error { font-size: 12px; margin-top: 4px; color: var(--fluentform-danger); } .c-form__submit { margin-top: 40px; } @media (min-width: 768px) { .c-form__item { padding: 30px 0; } .c-form__label { padding-top: 30px; } .c-form__name { padding-bottom: 30px; } .c-form__submit { margin-top: 60px; } } /* override */ .c-form .fluentform { --fluentform-primary: #043d78; --fluentform-secondary: #4c4c4c; --fluentform-border-color: transparent; --fluentform-border-radius: 0; --fluentform-input-select-height: 40px; } .c-form .fluentform input, .c-form .fluentform textarea, .c-form .fluentform select { background-color: var(--color-bg); } .c-form .fluentform input { max-width: 500px; padding: 10px 16px; } .c-form .fluentform textarea { height: 160px; } .c-form .fluentform select { max-width: 200px; } .c-form .fluentform .ff-el-group { margin-bottom: 0.5em; } .c-form .fluentform .ff-el-input--label label { font-weight: 400; } .c-form .fluentform .ff-el-help-message { font-style: normal; } .c-form .fluentform .ff_btn_style { all: revert; } .c-form .fluentform .c-form__mail.is-error { border: 1px solid var(--fluentform-danger); } .c-form .fluentform .c-form__button { position: relative; width: 227px; height: 54px; border: 1px solid; border-radius: 100px; font-size: 1.2rem; text-align: center; cursor: pointer; transition: background-color 0.3s ease-in, color 0.3s ease-in; } .c-form .fluentform .c-form__button:not(.is-disabled) { background-color: var(--color-white) !important; color: var(--color-black) !important; } .c-form .fluentform .c-form__button::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 12px; height: 12px; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M11.707%206.10352L8.10352%209.70703L7.39648%209L9.79297%206.60352H1V5.60352H9.79297L7.39648%203.20703L8.10352%202.5L11.707%206.10352Z%22%20fill%3D%22%234C4C4C%22%2F%3E%3C%2Fsvg%3E"); transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-form .fluentform .c-form__button:hover { border: none; background-color: var(--color-blue) !important; color: var(--color-white) !important; opacity: 1; } .c-form .fluentform .c-form__button:hover::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M11.707%206.10352L8.10352%209.70703L7.39648%209L9.79297%206.60352H1V5.60352H9.79297L7.39648%203.20703L8.10352%202.5L11.707%206.10352Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); } } .c-form .fluentform .c-form__button.is-disabled { background-color: #ccc !important; color: var(--color-white) !important; pointer-events: none; } .c-form .fluentform .c-form__button.is-disabled::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M11.707%206.10352L8.10352%209.70703L7.39648%209L9.79297%206.60352H1V5.60352H9.79297L7.39648%203.20703L8.10352%202.5L11.707%206.10352Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); } @media (min-width: 768px) { .c-form .fluentform { --fluentform-input-select-height: 50px; } .c-form .fluentform input { padding: 15px 16px; } .c-form .fluentform select { max-width: 240px; } .c-form .fluentform .c-form__button { width: 320px; height: 66px; font-size: 1.4rem; } .c-form .fluentform .c-form__button::after { right: 24px; } } .c-head { position: relative; margin-bottom: var(--c-head-margin-bottom, 40px); line-height: 1.6; color: var(--color-blue); font-size: clamp(1.8rem, 1.1142857143rem + 1.4285714286vw, 2.4rem); } .c-head__line { display: inline-block; width: var(--c-head-border-width, 60px); height: 2px; margin-bottom: var(--c-head-border-gap, 20px); background: linear-gradient(to right, #043d78 0%, #043d78 50%, #9eb2c6 50%, #9eb2c6 100%); transform-origin: left center; } .c-head__lead { margin-top: 8px; color: var(--color-black); font-size: clamp(1.4rem, 1.1714285714rem + 0.4761904762vw, 1.6rem); } @media (min-width: 768px) { .c-head { --c-head-margin-bottom: 100px; --c-head-border-width: 80px; --c-head-border-gap: 32px; } .c-head__lead { margin-top: 24px; } } .c-history { overflow: hidden; } .c-history__heading { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 110px; line-height: 1.4; background-color: var(--color-blue); color: var(--color-white); } .c-history__heading { padding: 6.4vw; } .c-history__era { width: 100%; display: flex; align-items: center; gap: 8px; font-size: clamp(2.4rem, 0.1142857143rem + 4.7619047619vw, 4.4rem); } .c-history__era small { line-height: 2; font-size: clamp(1.4rem, 0.7142857143rem + 1.4285714286vw, 2rem); } .c-history__years { font-size: clamp(1.4rem, 0.7142857143rem + 1.4285714286vw, 2rem); } .c-history__lead { font-size: clamp(1.1rem, 0.5285714286rem + 1.1904761905vw, 1.6rem); } .c-history__entries { padding-bottom: 16vw; } @media (max-width: 767.98px) { .c-history__era:has(small) { flex-wrap: wrap; } } @media (min-width: 768px) { .c-history__heading { min-height: 185px; padding: 40px min(8.33vw, 120px); } .c-history__era, .c-history__lead { max-width: 1200px; margin: 0; } .c-history__era { gap: 12px; } .c-history__entries { padding-top: 80px; padding-bottom: 120px; } } @media (min-width: 1024px) { .c-history__entries { position: relative; width: 978px; margin-left: auto; margin-right: auto; } .c-history__entries::before { content: ""; position: absolute; top: 0; right: 754px; display: inline-block; width: 320px; height: 120%; background-color: var(--color-bg); } } .c-history__entry + .c-history__entry { margin-top: 13.3vw; } .c-history__entry--major .c-history__entry-summary { font-size: clamp(1.8rem, 1.1142857143rem + 1.4285714286vw, 2.4rem); } .c-history__entry--major .c-history__entry-year { color: var(--color-blue); font-size: clamp(2rem, -0.7428571429rem + 5.7142857143vw, 4.4rem); } .c-history__entry-year { box-sizing: border-box; font-size: clamp(2rem, 0.8571428571rem + 2.380952381vw, 3rem); } .c-history__entry-year span { position: relative; } .c-history__entry-year span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .c-history__entry-year small { font-size: clamp(1.1rem, 0.5285714286rem + 1.1904761905vw, 1.6rem); } .c-history__entry-summary { line-height: 1.6; font-size: clamp(1.4rem, 0.9428571429rem + 0.9523809524vw, 1.8rem); } .c-history__entry-summary { margin-bottom: 4.2vw; } .c-history__entry-text { font-size: clamp(1.2rem, 0.9714285714rem + 0.4761904762vw, 1.4rem); } .c-history__entry-text a { color: var(--color-blue); text-decoration: underline; } @media not all and (pointer: coarse) { .c-history__entry-text a:hover { text-decoration: none; } } .c-history__entry-text small { font-size: clamp(1.1rem, 0.8714285714rem + 0.4761904762vw, 1.3rem); } .c-history__entry-images { display: grid; grid-template-columns: 1fr 1fr; gap: 5.33vw; } .c-history__entry-images { margin-top: 8vw; } .c-history__entry-images { margin-bottom: 8vw; } .c-history__entry-note { box-sizing: border-box; padding: 4.26vw 5.33vw; background-color: var(--color-bg); } .c-history__entry-note { margin-top: 8vw; } .c-history__entry-note { margin-bottom: 8vw; } .c-history__entry-note h3, .c-history__entry-note h4 { font-size: clamp(1.4rem, 0.9428571429rem + 0.9523809524vw, 1.8rem); } .c-history__entry-note h3, .c-history__entry-note h4 { margin-bottom: 3.2vw; } .c-history__entry-note p { font-size: clamp(1.2rem, 0.9714285714rem + 0.4761904762vw, 1.4rem); } @media (max-width: 1023.98px) { .c-history__entry--major .c-history__entry-year { padding: 3.73vw 6.4vw; background-color: var(--color-bg); } .c-history__entry--major .c-history__entry-year { margin-bottom: 4.2vw; } .c-history__entry-year { padding: 0 6.4vw; } .c-history__entry-year { margin-bottom: 3.2vw; } .c-history__entry-year span { display: flex; align-items: center; gap: 10px; } .c-history__entry-content { box-sizing: border-box; padding-left: var(--inner-padding); padding-right: var(--inner-padding); } } @media (min-width: 768px) { .c-history__entry + .c-history__entry { margin-top: 80px; } .c-history__entry--major .c-history__entry-summary { margin-bottom: 20px; } .c-history__entry-summary { margin-bottom: 8px; } } @media (min-width: 1024px) { .c-history__entry { display: grid; grid-template-columns: 1fr 70%; grid-column-gap: 70px; } .c-history__entry--major .c-history__entry-year span::before { width: 16px; height: 16px; transform: translate(8px, 26px); } .c-history__entry-year span { display: grid; grid-template-columns: 1fr auto; justify-items: end; grid-column-gap: 24px; } .c-history__entry-year span::before { grid-column: 2; grid-row: 1/3; width: 12px; height: 12px; transform: translate(6px, 20px); } .c-history__entry-year small { display: block; } .c-history__entry-images { grid-template-columns: 200px 200px; gap: 40px; margin-top: 40px; margin-bottom: 40px; } .c-history__entry-note { margin-top: 40px; margin-bottom: 40px; padding: 24px 32px; } .c-history__entry-note h3, .c-history__entry-note h4 { margin-bottom: 16px; } } .c-lead__inner { padding-top: 50px; padding-bottom: 100px; line-height: 2.8; color: var(--color-blue); } .c-lead__inner p { line-height: 2.8; } @media (min-width: 768px) { .c-lead__inner { padding-top: 80px; padding-bottom: 160px; text-align: center; } } .c-anchor { margin-bottom: 21.3vw; } .c-anchor__list { color: var(--color-blue); } .c-anchor__link { box-sizing: border-box; position: relative; display: flex; justify-content: space-between; align-items: center; padding: 18px 10px; } .c-anchor__link::after { content: ""; display: inline-block; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background-color: var(--color-blue); } .c-anchor__icon { width: 12px; height: 12px; transform: rotate(90deg); } .c-anchor__text { font-size: 1.2rem; } @media (max-width: 767.98px) { .c-anchor__list { margin-left: auto; margin-right: auto; } .c-anchor__list { width: 87.2vw; } } @media (min-width: 768px) { .c-anchor { margin-bottom: 100px; } .c-anchor--business .c-anchor__text { text-align: center; } .c-anchor__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; width: min(96.66%, 1200px); margin-inline: auto; } .c-anchor__link { gap: 10px; min-height: 56px; padding: 4px 8px 4px 16px; } .c-anchor__link::after { opacity: 0; } @media not all and (pointer: coarse) { .c-anchor__link:hover::after { opacity: 1; } } .c-anchor__text { display: inline-flex; align-items: center; } .c-anchor__text small { font-size: 1rem; } } .c-pdf-links__inner { padding-top: 26.6vw; } .c-pdf-links__inner { padding-bottom: 26.6vw; } @media (min-width: 768px) { .c-pdf-links__inner { padding-top: 160px; padding-bottom: 160px; } } .c-dash-list--small { font-size: clamp(1.2rem, 0.8666666667rem + 0.6944444444vw, 1.4rem); } .c-dash-list__item { display: grid; grid-template-columns: auto 1fr; grid-column-gap: 8px; } .c-dash-list__item:not(:last-of-type) { margin-bottom: 0.6em; } .c-dash-list__item::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-top: 0.5em; background: no-repeat center/9px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%221%22%20viewBox%3D%220%200%209%201%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M9%200V1H0V0H9Z%22%20fill%3D%22%234C4C4C%22%2F%3E%3C%2Fsvg%3E"); } .c-note-list__item { position: relative; padding-left: 1em; text-indent: -1em; } .c-note-list__item::before { content: "※"; width: 1em; height: 1em; } .c-num-list { counter-reset: num; } .c-num-list__item { position: relative; padding-left: 1em; } .c-num-list__item::before { content: counter(num); counter-increment: num; display: inline-block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; } @media (max-width: 1023.98px) { .c-mega-menu { padding-top: 32px; } .c-mega-menu__top, .c-mega-menu__item { position: relative; display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 0 8px; transition: opacity 0.3s ease-in; } .c-mega-menu__top::before, .c-mega-menu__item::before { content: ""; display: inline-block; width: 8px; height: 1px; background-color: var(--color-white); } .c-mega-menu__top img, .c-mega-menu__item img { display: none !important; } .c-mega-menu__top { margin-bottom: 24px; } .c-mega-menu__item:not(:last-of-type) { margin-bottom: 24px; } .c-mega-menu__text { grid-column: 2; } .c-mega-menu__text:has(span) { display: flex; justify-content: flex-start; gap: 0.5em; } } @media (max-width: 1023.98px) { .c-mega-menu { color: var(--color-white); } } @media (min-width: 1024px) { .c-mega-menu { box-sizing: border-box; position: fixed; z-index: 9000; top: var(--header-height); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: auto auto; grid-column-gap: 113px; justify-content: center; width: 100vw; padding: 32px 24px; background-color: var(--color-bg); color: var(--color-black); } .c-mega-menu--about .c-mega-menu__list, .c-mega-menu--business .c-mega-menu__list { max-width: 632px; } .c-mega-menu img { width: 200px; height: 112px; } .c-mega-menu__top { align-self: start; } .c-mega-menu__top .c-mega-menu__text { align-items: center; } .c-mega-menu__top .c-mega-menu__text::before { box-sizing: border-box; width: 24px; height: 24px; border: 1px solid var(--color-black); border-radius: 50%; background-size: 9px; background-position: center; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M11.707%205.75L8.10352%209.35352L7.39648%208.64648L9.79297%206.25H1V5.25H9.79297L7.39648%202.85352L8.10352%202.14648L11.707%205.75Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-mega-menu__top:hover { color: var(--color-blue); text-decoration: underline; } .c-mega-menu__top:hover .c-mega-menu__text::before { background-color: var(--color-blue); border-color: var(--color-blue); background-position: center; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M11.707%205.75L8.10352%209.35352L7.39648%208.64648L9.79297%206.25H1V5.25H9.79297L7.39648%202.85352L8.10352%202.14648L11.707%205.75Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); } } .c-mega-menu__list { position: relative; display: flex; flex-wrap: wrap; gap: 16px; } .c-mega-menu__list::before { content: ""; display: inline-block; position: absolute; top: 0; right: calc(100% + 56px); width: 1px; height: 100%; background-color: var(--color-blue-gray); } .c-mega-menu__link { transition: none; } @media not all and (pointer: coarse) { .c-mega-menu__link:hover .c-mega-menu__text { text-decoration: underline; } } .c-mega-menu__link .c-mega-menu__text { max-width: 200px; min-height: 40px; } .c-mega-menu__link .c-mega-menu__text::before { width: 16px; height: 16px; background-size: 12px; background-position: center bottom; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M9.70703%206L4.35352%2011.3535L3.64648%2010.6465L8.29297%206L3.64648%201.35352L4.35352%200.646484L9.70703%206Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); } .c-mega-menu__text { position: relative; display: flex; justify-content: flex-start; align-items: flex-start; gap: 8px; margin-top: 8px; line-height: 1.4; } .c-mega-menu__text::before { content: ""; display: inline-block; background-repeat: no-repeat; } .c-mega-menu__text > span { transform: translateY(5px); } } .c-modal { width: min(90vw, 1000px); max-height: 90vh; overflow-y: auto; background-color: var(--color-white); } .c-modal__close { position: absolute; top: 1em; right: 1em; width: 2em; height: 2em; cursor: pointer; } .c-modal__close span { width: 100%; height: 100%; } @media not all and (pointer: coarse) { .c-modal__close:hover { opacity: var(--hover-opacity); } } .c-modal__inner { box-sizing: border-box; padding: 4em 2.5em 2.5em; font-size: clamp(1.2rem, 0.9714285714rem + 0.4761904762vw, 1.4rem); } .c-modal__head { position: relative; display: grid; grid-template-columns: 50px 1fr; grid-column-gap: 16px; align-items: center; margin-bottom: 24px; padding-bottom: 16px; } .c-modal__head img { grid-column: 1; grid-row: 1/3; } .c-modal__head h2 { font-size: clamp(1.6rem, 1.3714285714rem + 0.4761904762vw, 1.8rem); } .c-modal__head p { display: block; font-size: clamp(1.2rem, 0.9714285714rem + 0.4761904762vw, 1.4rem); } .c-modal__head::after { content: ""; position: absolute; top: 100%; left: 0; display: block; width: 100%; height: 1px; background: linear-gradient(to right, #043d78 0, #043d78 40px, #9eb2c6 40px); } .c-modal__lead { margin-bottom: 1em; font-size: clamp(1.3rem, 0.9571428571rem + 0.7142857143vw, 1.6rem); } .c-modal__text p + p { margin-top: 1em; } .c-modal__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 5.33vw; } .c-modal__figures { margin-top: 8vw; } .c-modal__figures { margin-bottom: 8vw; } .c-modal__figure-caption { margin-top: 10px; } .c-modal-trigger { box-sizing: border-box; display: grid; grid-template-columns: 50px 1fr 16px; grid-column-gap: 16px; align-items: center; width: 100%; padding: 3.2vw 4.26vw; border: 1px solid var(--color-cloud); cursor: pointer; } .c-modal-trigger { margin-top: 8vw; } @media not all and (pointer: coarse) { .c-modal-trigger:hover { opacity: var(--hover-opacity); } } .c-modal-trigger__avatar { grid-column: 1; } .c-modal-trigger__text { grid-column: 2; line-height: 2; font-size: clamp(1.6rem, 1.3714285714rem + 0.4761904762vw, 1.8rem); } .c-modal-trigger__meta { display: block; font-size: clamp(1.2rem, 0.9714285714rem + 0.4761904762vw, 1.4rem); } .c-modal-trigger__icon { grid-column: 3; } @media (min-width: 768px) { .c-modal__close { width: 3em; height: 3em; } .c-modal__head { margin-bottom: 32px; } .c-modal__figures { grid-template-columns: var(--modal-image-columns, repeat(2, 338px)); gap: 40px; width: fit-content; margin: 40px auto; } .c-modal-trigger { grid-template-columns: 70px 1fr 24px; margin-top: 40px; padding: 16px 24px; } } .c-button-nav { margin-top: 26.6vw; } .c-button-nav { padding-bottom: 21.3vw; } .c-button-nav__inner { background-color: var(--color-bg); } .c-button-nav__inner { margin-bottom: 8vw; } .c-button-nav__inner { padding-top: 8vw; } .c-button-nav__inner { padding-bottom: 8vw; } @media (max-width: 767.98px) { .c-button-nav__list { --button-list-flex-direction: row; justify-content: center; } .c-button-nav__button { --button-width: 156px; } } @media (min-width: 768px) { .c-button-nav { margin-top: 160px; padding-bottom: 160px; } .c-button-nav__inner { margin-bottom: 60px; padding-top: 60px; padding-bottom: 60px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .c-button-nav__list { max-width: 500px; } } .c-article-nav { display: grid; grid-template-columns: auto var(--pager-btn-width) auto; grid-column-gap: 30px; place-items: center; grid-gap: 20px; } .c-article-nav { margin-top: 10.6vw; } .c-article-nav__link { display: flex; align-items: center; gap: 9px; font-size: clamp(1.2rem, 0.9714285714rem + 0.4761904762vw, 1.4rem); } @media not all and (pointer: coarse) { .c-article-nav__link:hover { color: var(--color-blue); text-decoration: underline; } .c-article-nav__link:hover .c-article-nav__icon { color: var(--color-blue); } } .c-article-nav__link.is-disabled { color: #c0c0c0; pointer-events: none; } .c-article-nav__prev { grid-column: 1; justify-self: end; } .c-article-nav__prev .c-article-nav__icon { transform: scaleX(-1); } .c-article-nav__next { grid-column: 3; justify-self: start; } .c-article-nav__button { grid-column: 2; grid-row: 1; } .c-article-nav__button-link { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: var(--pager-btn-width, 140px); height: var(--pager-btn-height, 36px); background-color: var(--color-white); border-radius: 100px; border: 1px solid; font-size: clamp(1rem, 0.7714285714rem + 0.4761904762vw, 1.2rem); } @media not all and (pointer: coarse) { .c-article-nav__button-link:hover { background-color: var(--color-blue); color: var(--color-white); text-decoration: none; } } .c-article-nav__icon { display: inline-flex; justify-content: center; align-items: center; width: 1em; height: 1em; transition: color 0.3s ease-in; } @media (min-width: 768px) { .c-article-nav { --pager-btn-width: 200px; --pager-btn-height: 40px; margin-top: 60px; } } .c-pager { padding-top: 10.6vw; } @media (min-width: 768px) { .c-pager { padding-top: 80px; } } .c-pager__list { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; text-align: center; } .c-pager__list li a, .c-pager__list li span { box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0.25em; line-height: 1.1; font-size: clamp(1.2rem, 1.0666666667rem + 0.2777777778vw, 1.4rem); } .c-pager__list li a { cursor: pointer; text-decoration: underline; } @media not all and (pointer: coarse) { .c-pager__list li a:hover { text-decoration: none; } } .c-pager__list li.current span { width: 2em; height: 2em; cursor: default; border: 1px solid var(--color-cloud); border-radius: 50%; text-decoration: none; } .c-pager__list li.first, .c-pager__list li.previouspostslink, .c-pager__list li.nextpostslink, .c-pager__list li.last { position: relative; display: inline-flex; align-items: center; gap: 0.25em; } .c-pager__list li.first::before, .c-pager__list li.previouspostslink::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; background: no-repeat center/contain; } .c-pager__list li.first::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M4.93945%206L10.293%2011.3535L11%2010.6465L6.35352%206L11%201.35352L10.293%200.646484L4.93945%206Z%22%20fill%3D%22%234C4C4C%22%2F%3E%20%3Cpath%20d%3D%22M0.939453%206L6.29297%2011.3535L7%2010.6465L2.35352%206L7%201.35352L6.29297%200.646484L0.939453%206Z%22%20fill%3D%22%234C4C4C%22%2F%3E%3C%2Fsvg%3E"); } .c-pager__list li.previouspostslink::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%2211%22%20viewBox%3D%220%200%207%2011%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M4.68019e-07%205.35352L5.35352%20-6.18106e-08L6.06055%200.707031L1.41406%205.35352L6.06055%2010L5.35352%2010.707L4.68019e-07%205.35352Z%22%20fill%3D%22%234C4C4C%22%2F%3E%3C%2Fsvg%3E"); } .c-pager__list li.nextpostslink::after, .c-pager__list li.last::after { content: ""; display: inline-block; width: 0.75em; height: 0.75em; background: no-repeat center/contain; } .c-pager__list li.nextpostslink::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%2211%22%20viewBox%3D%220%200%207%2011%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M6.06055%205.35352L0.70703%20-6.18106e-08L-8.74228e-07%200.707031L4.64648%205.35352L-6.18106e-08%2010L0.707031%2010.707L6.06055%205.35352Z%22%20fill%3D%22%234C4C4C%22%2F%3E%3C%2Fsvg%3E"); } .c-pager__list li.last::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M7.06055%206L1.70703%2011.3535L1%2010.6465L5.64648%206L1%201.35352L1.70703%200.646484L7.06055%206Z%22%20fill%3D%22%234C4C4C%22%2F%3E%20%3Cpath%20d%3D%22M11.0605%206L5.70703%2011.3535L5%2010.6465L9.64648%206L5%201.35352L5.70703%200.646484L11.0605%206Z%22%20fill%3D%22%234C4C4C%22%2F%3E%3C%2Fsvg%3E"); } .c-product-slider { margin: auto; } .c-product-slider { width: 76.5vw; } .c-product-slider__media { position: relative; box-sizing: border-box; margin-bottom: 20px; padding-top: 20px; } .c-product-slider__year { box-sizing: border-box; position: absolute; top: 0; left: 0; display: inline-flex; justify-content: center; align-items: center; gap: 7px; padding: 3px 8px; background-color: var(--color-blue); color: var(--color-white); } .c-product-slider__year-num { font-size: clamp(1.6rem, 1.1428571429rem + 0.9523809524vw, 2rem); } .c-product-slider__year-era { font-size: clamp(1rem, 0.6571428571rem + 0.7142857143vw, 1.3rem); } .c-product-slider__image { margin: auto auto 0 auto; } .c-product-slider__image { width: 60.5vw; } .c-product-slider__catch, .c-product-slider__name { color: var(--color-blue); text-align: center; } .c-product-slider__catch { font-size: clamp(1.2rem, 0.7428571429rem + 0.9523809524vw, 1.6rem); } .c-product-slider__name { margin-bottom: 16px; line-height: 1.4; font-size: clamp(2.2rem, 1.2857142857rem + 1.9047619048vw, 3rem); } .c-product-slider__text { word-break: break-all; } @media (min-width: 600px) and (max-width: 1023.98px) { .c-product-slider { width: 500px; } } @media (min-width: 1024px) { .c-product-slider__slide { display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 30px + 40 * (100vw - 768px) / 432, 70px); } .c-product-slider__year { gap: 10px; padding: 7px 16px; } .c-product-slider__name { margin-bottom: 24px; } .c-product-slider__image { width: min(25vw, 360px); padding-left: 20px; } .c-product-slider__text-area { align-self: center; } } @media (min-width: 1200px) { .c-product-slider { width: 930px; } } .c-product + .c-product { margin-top: 24vw; } .c-product#history-1940 { --product-section-header-bg: url(../img/about-product-history/1940/bg_product01_sp.jpg); } .c-product#history-1970 { --product-section-header-bg: url(../img/about-product-history/1970/bg_product01_sp.jpg); } .c-product#history-1980 { --product-section-header-bg: url(../img/about-product-history/1980/bg_product01_sp.jpg); } .c-product#history-1990 { --product-section-header-bg: url(../img/about-product-history/1990/bg_product01_sp.jpg); } .c-product#history-2000 { --product-section-header-bg: url(../img/about-product-history/2000/bg_product01_sp.jpg); } .c-product#history-2010 { --product-section-header-bg: url(../img/about-product-history/2010/bg_product01_sp.jpg); } .c-product__header { display: flex; justify-content: center; align-items: center; height: 140px; background: var(--color-blue) var(--product-section-header-bg) no-repeat center/cover; color: var(--color-white); font-size: clamp(3rem, 0.9428571429rem + 4.2857142857vw, 4.8rem); } .c-product__header { margin-bottom: 8vw; } .c-product__header small { font-size: clamp(1.4rem, 0.2571428571rem + 2.380952381vw, 2.4rem); } .c-product__header--has-range { flex-direction: column; } .c-product__lead { margin-bottom: 18.6vw; } @media (max-width: 767.98px) { .c-product__lead { margin-left: auto; margin-right: auto; } .c-product__lead { width: 87.2vw; } } @media (min-width: 768px) { .c-product + .c-product { margin-top: 160px; } .c-product#history-1940 { --product-section-header-bg: url(../img/about-product-history/1940/bg_product01_pc.jpg); } .c-product#history-1970 { --product-section-header-bg: url(../img/about-product-history/1970/bg_product01_pc.jpg); } .c-product#history-1980 { --product-section-header-bg: url(../img/about-product-history/1980/bg_product01_pc.jpg); } .c-product#history-1990 { --product-section-header-bg: url(../img/about-product-history/1990/bg_product01_pc.jpg); } .c-product#history-2000 { --product-section-header-bg: url(../img/about-product-history/2000/bg_product01_pc.jpg); } .c-product#history-2010 { --product-section-header-bg: url(../img/about-product-history/2010/bg_product01_pc.jpg); } .c-product__inner { width: min(1200px, 100% - 100px); margin-left: auto; margin-right: auto; } .c-product__header { height: 240px; margin-bottom: 80px; } .c-product__lead { margin-bottom: 160px; } } @media (min-width: 1024px) { .c-product__lead { text-align: center; } } .c-good-time { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; height: 370px; background: url(../img/home/bg_time01_sp.jpg) no-repeat right center/cover; color: var(--color-white); } .c-good-time { padding-top: 6.4vw; } .c-good-time { padding-bottom: 6.4vw; } .c-good-time__inner { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .c-good-time__head-main, .c-good-time__head-sub { display: block; } .c-good-time__head-main { line-height: 1.4; font-size: clamp(2.4rem, 1.4rem + 2.0833333333vw, 3rem); } .c-good-time__head-sub { margin-bottom: 18px; line-height: 1.6; font-size: clamp(1.6rem, 1.2666666667rem + 0.6944444444vw, 1.8rem); } @media (min-width: 768px) { .c-good-time { height: 512px; padding-top: 48px; padding-bottom: 48px; background-image: url(../img/home/bg_time01_pc.jpg); } .c-good-time__inner { gap: 20px; } .c-good-time__head-sub { margin-bottom: 20px; } } .c-set + .c-set { margin-top: 26.6vw; } .c-set__company-name { line-height: 1.6; color: var(--color-blue); font-size: clamp(1.6rem, 1.1428571429rem + 0.9523809524vw, 2rem); } .c-set__company-name { margin-top: 4.2vw; } .c-set__text { margin-top: 1.6vw; } .c-set__button { --button-margin-top: 4.26vw; } @media (max-width: 1023.98px) { .c-set__image { margin-top: 10.6vw; } } @media (min-width: 1024px) { .c-set { display: grid; grid-template-columns: 1fr 57.14%; column-gap: 60px; } .c-set + .c-set { margin-top: 140px; } .c-set:has(.c-set__company-name) .c-set__image { grid-row: 1/-1; } .c-set__image, .c-set__button { grid-column: 2; } .c-set__image { grid-row: 1; } .c-set__company-name { margin-top: 24px; } .c-set__text { margin-top: 12px; } .c-set__button { --button-margin-top: 24px; grid-row: 2; } } .c-single__inner { padding-top: 10.6vw; } .c-single__inner { padding-bottom: 21.3vw; } .c-single__header { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; margin-bottom: 32px; padding-bottom: 24px; line-height: 1.6; border-bottom: 1px solid var(--color-cloud); } .c-single__date { grid-column: 1; align-self: center; font-size: clamp(1.1rem, 0.7571428571rem + 0.7142857143vw, 1.4rem); } .c-single__term { grid-column: 2; justify-self: start; box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; min-width: 100px; padding: 3px 10px; border-radius: 40px; background-color: rgba(var(--color-cloud-rgb), 0.5); font-size: clamp(1rem, 0.7714285714rem + 0.4761904762vw, 1.2rem); } .c-single__head { grid-column: 1/3; grid-row: 2; font-size: clamp(1.8rem, 1.1142857143rem + 1.4285714286vw, 2.4rem); } @media (min-width: 768px) { .c-single__inner { padding-top: 80px; padding-bottom: 160px; } .c-single__header { gap: 20px; margin-bottom: 40px; padding-bottom: 30px; } .c-single__term { min-width: 140px; padding: 5px 16px; } } .c-table table { width: 100%; } .c-table th { color: var(--color-blue); } .c-table td dl { display: grid; grid-template-columns: auto 1fr; gap: 0 1em; } @media (max-width: 767.98px) { .c-table table, .c-table thead, .c-table tbody, .c-table tr, .c-table th, .c-table td { display: block; } .c-table th { padding-top: 10px; padding-bottom: 2px; } .c-table td { padding-top: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--color-cloud); } } @media (min-width: 768px) { .c-table { table-layout: fixed; } .c-table th, .c-table td { padding: 16px 0; border-bottom: 1px solid var(--color-cloud); } .c-table th { width: 184px; } } .c-terms__inner { border-top: 1px solid var(--color-cloud); } .c-terms__inner { padding-top: 10.6vw; } .c-terms__inner { padding-bottom: 10.6vw; } .c-terms__inner h2, .c-terms__inner h3, .c-terms__inner h4 { line-height: 1.6; color: var(--color-blue); } .c-terms__inner h2:first-child, .c-terms__inner h3:first-child, .c-terms__inner h4:first-child { margin-top: 0; } .c-terms__inner h4 { margin-bottom: 1em; } .c-terms__inner h4 span { display: inline-block; margin-right: 0.5em; } .c-terms__inner h5 { margin-bottom: 0.75em; } .c-terms__inner h5 span { display: inline-block; margin-right: 0.5em; } .c-terms__inner > p, .c-terms__inner > ul, .c-terms__inner > ol { margin-bottom: 30px; } .c-terms__inner > p + p, .c-terms__inner > p + ul, .c-terms__inner > p + ol { margin-top: -10px; } .c-terms__inner > p span { display: inline-block; margin-right: 0.5em; } .c-terms__inner ul li, .c-terms__inner ol li { line-height: 2; } .c-terms__inner ul li:not(:last-of-type), .c-terms__inner ol li:not(:last-of-type) { margin-bottom: 0.6em; } .c-terms__inner ul li span, .c-terms__inner ol li span { display: inline-block; margin-right: 0.5em; } .c-terms__inner a { color: var(--color-blue); text-decoration: underline; } @media not all and (pointer: coarse) { .c-terms__inner a:hover { text-decoration: none; } } .c-terms__inner small:not([class]) { font-size: clamp(1.2rem, 0.8666666667rem + 0.6944444444vw, 1.4rem); } .c-terms__head { margin-top: 30px; margin-bottom: 30px; font-size: clamp(1.8rem, 1.5714285714rem + 0.4761904762vw, 2rem); } .c-terms__sub-head { margin-top: 30px; margin-bottom: 1em; font-size: clamp(1.6rem, 1.3714285714rem + 0.4761904762vw, 1.8rem); } .c-terms__box { box-sizing: border-box; margin-top: -10px; margin-bottom: 30px; padding: 16px 20px; background-color: var(--color-bg); } .c-terms__box > p { margin-bottom: 0 !important; } @media (min-width: 768px) { .c-terms__inner { padding-top: 60px; padding-bottom: 60px; } .c-terms__inner > p, .c-terms__inner > ul, .c-terms__inner > ol { margin-bottom: 40px; } .c-terms__inner p + p { margin-top: -20px; } .c-terms__head { margin-top: 40px; margin-bottom: 60px; } .c-terms__sub-head { margin-top: 40px; } .c-terms__box { margin-top: -20px; } } .c-terms-lead__inner { font-size: clamp(1.2rem, 0.8666666667rem + 0.6944444444vw, 1.4rem); } .c-terms-lead__inner { padding-top: 13.3vw; } .c-terms-lead__inner { padding-bottom: 16vw; } .c-terms-lead__head { --c-head-margin-bottom: 32px; } @media (min-width: 768px) { .c-terms-lead__inner { padding-top: 100px; padding-bottom: 60px; } } /* ------------------------------ Device-only Break Classes 主にbrで使用することを想定その場合、ソースコードはbrの後ろで改行しないこと（改行すると不要なスペースが入る）使用例：

吾輩は
猫である

------------------------------ */ @media (max-width: 767.98px) { .u-only-sp { display: block; } } @media (min-width: 768px) { .u-only-sp { display: none !important; } } @media (max-width: 767.98px) { .u-only-pc { display: none !important; } } @media (min-width: 768px) { .u-only-pc { display: block; } } /* a11y */ .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; } /* ------------------------------ Link ------------------------------ */ .u-link { display: block; } @media not all and (pointer: coarse) { .u-link:hover { opacity: var(--hover-opacity); } } .u-link-external { display: inline-flex; align-items: center; gap: 0.5em; } .u-link-external > :has(> svg):not([class]) { width: 0.8em; height: 0.8em; transform: translateY(0.1em); } .u-link-pdf { display: inline-flex; align-items: center; gap: 0.5em; } .u-link-pdf > :has(> svg):not([class]) { width: 1em; height: 1em; } .u-zoom { transition: transform 0.3s ease-in; } @media not all and (pointer: coarse) { .u-zoom:hover { transform: scale(1.1) rotateZ(0.03deg); } } :is(a, figure, div, picture):has(> .u-zoom) { display: block; overflow: hidden; } /* ------------------------------ Layout ------------------------------ */ .u-inner { box-sizing: border-box; width: 100%; padding-left: var(--inner-padding); padding-right: var(--inner-padding); } @media (min-width: 768px) { .u-inner { max-width: var(--inner-max-width, 900px); margin: auto; } } @media (min-width: 1000px) { .u-inner { padding-left: 0; padding-right: 0; } } @media (min-width: 768px) { .u-inner--wide { max-width: none; width: min(1200px, 100% - 100px); padding-left: 0; padding-right: 0; } } /* ------------------------------ Font ------------------------------ */ .u-uppercase { text-transform: uppercase; } .u-capitalize { text-transform: capitalize; } .u-note { font-size: clamp(1.1rem, 0.7666666667rem + 0.6944444444vw, 1.3rem); } .u-color-blue { color: var(--color-blue); } /* .p-history */ .p-history { padding-top: 16vw; } @media (min-width: 768px) { .p-history { padding-top: 40px; } } /* .p-about */ .p-about { margin-bottom: 26.6vw; } @media (min-width: 768px) { .p-about { margin-bottom: 160px; } } .p-brand-story { box-sizing: border-box; position: relative; height: 100vh; } .p-brand-story { margin-top: 21.3vw; } .p-brand-story__bg, .p-brand-story__copy { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease-in; } .p-brand-story__bg.is-active, .p-brand-story__copy.is-active { opacity: 1; } .p-brand-story__bg { background: no-repeat center/cover; } .p-brand-story__bg:first-of-type { background-image: url(../img/about-brand-story/bg_stage01_sp.jpg); } .p-brand-story__bg:nth-of-type(2) { background-image: url(../img/about-brand-story/bg_stage02_sp.jpg); } .p-brand-story__bg:nth-of-type(3) { background-image: url(../img/about-brand-story/bg_stage03_sp.jpg); } .p-brand-story__bg:nth-of-type(4) { background-image: url(../img/about-brand-story/bg_stage04_sp.jpg); } .p-brand-story__copy { display: flex; flex-direction: column; justify-content: center; margin: auto; line-height: 2.4; color: var(--color-white); text-shadow: 0 2px 7px rgba(0, 0, 0, 0.35); font-size: clamp(1.6rem, 1.3714285714rem + 0.4761904762vw, 1.8rem); } .p-brand-story__copy { max-width: 87.2vw; } .p-brand-story__bg-stage, .p-brand-story__copy-stage { position: absolute; inset: 0; } .p-brand-story__dots { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 14px; } .p-brand-story__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); border: none; cursor: pointer; padding: 0; transition: background 0.4s ease, transform 0.3s ease; } .p-brand-story__dot:hover { transform: scale(1.3); } .p-brand-story__dot.is-active { background: #fff; } @media (max-width: 374.98px) { .p-brand-story__copy { font-size: 4.2vw; } .p-brand-story__dots { right: 6.6vw; } } @media (min-width: 768px) { .p-brand-story { margin-top: 100px; } .p-brand-story__bg:first-of-type { background-image: url(../img/about-brand-story/bg_stage01_tb.jpg); } .p-brand-story__bg:nth-of-type(2) { background-image: url(../img/about-brand-story/bg_stage02_tb.jpg); } .p-brand-story__bg:nth-of-type(3) { background-image: url(../img/about-brand-story/bg_stage03_tb.jpg); } .p-brand-story__bg:nth-of-type(4) { background-image: url(../img/about-brand-story/bg_stage04_tb.jpg); } .p-brand-story__copy { align-items: center; text-align: center; } } @media (min-width: 1024px) { .p-brand-story__bg:first-of-type { background-image: url(../img/about-brand-story/bg_stage01_pc.jpg); } .p-brand-story__bg:nth-of-type(2) { background-image: url(../img/about-brand-story/bg_stage02_pc.jpg); } .p-brand-story__bg:nth-of-type(3) { background-image: url(../img/about-brand-story/bg_stage03_pc.jpg); } .p-brand-story__bg:nth-of-type(4) { background-image: url(../img/about-brand-story/bg_stage04_pc.jpg); } } @media (max-width: 932px) and (orientation: landscape) { .p-brand-story__copy { padding-top: var(--header-height); align-items: flex-start; text-align: left; font-size: clamp(1.4rem, 1.1876106195rem + 0.4424778761vw, 1.6rem); } } /* p-brand-story-banner */ .p-brand-story-banner__inner { padding-top: 21.3vw; } .p-brand-story-banner__inner { padding-bottom: 21.3vw; } .p-brand-story-banner__item { position: relative; display: flex; justify-content: center; align-items: center; width: min(100%, 327px); height: 94px; margin: auto; color: var(--color-white); } @media not all and (pointer: coarse) { .p-brand-story-banner__item:hover .p-brand-story-banner__image img { transform: scale(1.1) rotateZ(0.03deg); } .p-brand-story-banner__item:hover .p-brand-story-banner__icon { --banner-icon-border-color: var(--color-blue); --banner-icon-background: var(--color-blue); --banner-icon-color: var(--color-white); } } .p-brand-story-banner__image { position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden; } .p-brand-story-banner__image img { object-fit: cover; object-position: center; width: 100%; height: 100%; transition: all 0.3s ease-in; } .p-brand-story-banner__text-area { box-sizing: border-box; line-height: 1.6; } .p-brand-story-banner__icon { box-sizing: border-box; position: absolute; right: 12px; bottom: 12px; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--banner-icon-border-color, var(--color-white)); background-color: var(--banner-icon-background); color: var(--banner-icon-color, var(--color-white)); } .p-brand-story-banner__icon svg { width: 50%; height: 50%; } @media (min-width: 768px) { .p-brand-story-banner__inner { padding-top: 140px; padding-bottom: 140px; } .p-brand-story-banner__item { width: 480px; height: 138px; } .p-brand-story-banner__icon { width: 46px; height: 46px; } .p-brand-story-banner__icon svg { width: 16px; height: 16px; } } /* p-brand-story-gallery */ .p-brand-story-gallery__inner { padding-top: 21.3vw; } .p-brand-story-gallery__inner { padding-bottom: 21.3vw; } @media (min-width: 768px) { .p-brand-story-gallery__inner { --inner-max-width: 900px; padding-top: 140px; padding-bottom: 140px; } } /* p-brand-section */ .p-brand-section__inner { padding-top: 26.6vw; } .p-brand-section__image { margin-bottom: 8.5vw; } .p-brand-section__text p + p { margin-top: 2em; } @media (min-width: 768px) { .p-brand-section__inner { padding-top: 120px; } .p-brand-section__image { margin-bottom: 50px; } } @media (min-width: 1024px) { .p-brand-section__inner { display: grid; grid-template-columns: min(29.83%, 358px) min(65%, 780px); } .p-brand-section__inner > *:not(.p-brand-section__head) { grid-column: 2; justify-self: end; width: 100%; } .p-brand-section__head { grid-column: 1; } } /* p-brand-identity */ .p-brand-identity__inner { padding-top: 13.3vw; } .p-brand-identity__inner { padding-bottom: 26.6vw; } .p-brand-identity__image { display: block; } .p-brand-identity__image { margin-bottom: 16vw; } .p-brand-identity__text { text-align: center; } .p-brand-identity__text span { white-space: nowrap; } @media (min-width: 768px) { .p-brand-identity__inner { padding-top: 100px; padding-bottom: 120px; } .p-brand-identity__image { margin-bottom: 80px; } } /* p-brand-statement */ .p-brand-statement { background: url(../img/about-brand/bg_statement01_sp.jpg) no-repeat center bottom/cover; } .p-brand-statement__inner { padding-top: 18.6vw; } .p-brand-statement__inner { padding-bottom: 18.6vw; } .p-brand-statement__head::before { background: linear-gradient(to right, #fff 0%, #fff 50%, #467aad 50%, #467aad 100%); } .p-brand-statement__box { box-sizing: border-box; background-color: var(--color-white); text-align: center; } .p-brand-statement__box { margin-bottom: 16vw; } .p-brand-statement__box { padding-top: 10.6vw; } .p-brand-statement__box { padding-bottom: 10.6vw; } .p-brand-statement__box img { margin: 0 auto 8vw; } .p-brand-statement__box img { width: 53.3vw; } .p-brand-statement__sub-head { margin-bottom: 8vw; text-align: center; font-size: clamp(1.8rem, 1.1142857143rem + 1.4285714286vw, 2.4rem); } .p-brand-statement__text p + p { margin-top: 2em; } @media (min-width: 768px) { .p-brand-statement { background-image: url(../img/about-brand/bg_statement01_pc.jpg); } .p-brand-statement__inner { padding-top: 120px; padding-bottom: 120px; } .p-brand-statement__head { margin-bottom: 60px; text-align: center; } .p-brand-statement__box { margin-bottom: 120px; padding: 80px; } .p-brand-statement__box img { width: 335px; margin-bottom: 50px; } .p-brand-statement__sub-head { margin-bottom: 40px; } .p-brand-statement__text { text-align: center; } } /* p-brand-logo */ .p-brand-logo__list { display: grid; } .p-brand-logo__list { grid-row-gap: 8.7vw; } .p-brand-logo__list { margin-top: 21.3vw; } .p-brand-logo__item h3 { line-height: 1.4; color: var(--color-blue); font-size: clamp(2.2rem, 1.4941176471rem + 1.4705882353vw, 3rem); } .p-brand-logo__item h3 { margin-bottom: 3.7vw; } .p-brand-logo__item h3 small { display: flex; align-items: center; gap: 0.5em; font-size: clamp(1rem, 0.6470588235rem + 0.7352941176vw, 1.4rem); } .p-brand-logo__item h3 small span { font-size: clamp(1.2rem, 0.6705882353rem + 1.1029411765vw, 1.8rem); } .p-brand-logo__item h3 > span { letter-spacing: 0.5em; } @media (max-width: 899.98px) { .p-brand-logo__item { display: grid; grid-template-columns: 32vw 1fr; } .p-brand-logo__item img { grid-column: 1; grid-row: 1/3; } .p-brand-logo__item h3, .p-brand-logo__item p { grid-column: 2; } .p-brand-logo__item h3 { display: flex; align-items: center; } .p-brand-logo__item h3 { gap: 2.6vw; } } @media (min-width: 768px) { .p-brand-logo__list { margin-top: 100px; } .p-brand-logo__item h3 { margin-bottom: 20px; } } @media (min-width: 900px) { .p-brand-logo__list { grid-template-columns: repeat(3, 1fr); grid-gap: 47px; } .p-brand-logo__item h3 { text-align: center; } .p-brand-logo__item h3 small { justify-content: center; } } /* .p-career */ .p-career__inner { padding-top: 13.3vw; } @media (min-width: 768px) { .p-career__inner { padding-top: 80px; } } /* .p-company */ .p-company { padding-top: 26.6vw; } @media (min-width: 768px) { .p-company { padding-top: 100px; } } /* .p-contact */ .p-contact__inner { padding-top: 13.3vw; } .p-contact__inner { padding-bottom: 21.3vw; } .p-contact__lead { margin-bottom: 5.3vw; } .p-contact__item { box-sizing: border-box; display: grid; grid-template-columns: 18.66vw 1fr; grid-column-gap: 4.26vw; } .p-contact__item { padding-top: 10.6vw; } .p-contact__item { padding-bottom: 10.6vw; } .p-contact__item:not(:last-of-type) { border-bottom: 1px solid var(--color-cloud); } .p-contact__icon { grid-column: 1; grid-row: 1/3; align-self: center; } .p-contact__text-area h2 { line-height: 1.6; color: var(--color-blue); font-size: clamp(1.6rem, 0.8941176471rem + 1.4705882353vw, 2.4rem); } .p-contact__text-area p { font-size: clamp(1.2rem, 0.7428571429rem + 0.9523809524vw, 1.6rem); } .p-contact__button { --button-margin-top: 20px; } @media (max-width: 374.98px) { .p-contact__item { grid-template-columns: 16vw 1fr; } } @media (max-width: 767.98px) { .p-contact__button { --button-width: 180px; } } @media (min-width: 768px) { .p-contact__inner { padding-top: 80px; padding-bottom: 160px; } .p-contact__lead { margin-bottom: 20px; } .p-contact__item { grid-template-columns: min(14.63%, 120px) 1fr auto; grid-column-gap: min(4.44%, 40px); padding: 60px 40px; } .p-contact__icon { grid-row: 1; } .p-contact__text-area { align-self: center; } .p-contact__text-area h2 { margin-bottom: 16px; } .p-contact__button { --button-margin-top: 0; align-self: end; } } @media (min-width: 768px) and (max-width: 1023.98px) { .p-contact__item { padding: min(6.66%, 60px) 0; } } /* ============================================ * p-contact-form * WPForms スタイル上書き（contact/other） * ============================================ */ /* 404 */ .p-404__inner { padding-top: 13.3vw; } .p-404__inner { padding-bottom: 26.6vw; } .p-404__head { margin-bottom: 1em; text-align: center; color: var(--color-blue); font-size: clamp(3rem, 1.8571428571rem + 2.380952381vw, 4rem); } .p-404__text { margin-bottom: 60px; text-align: center; } @media (min-width: 768px) { .p-404__inner { padding-top: 100px; padding-bottom: 160px; } .p-404__text { margin-bottom: 80px; } } /* .p-home */ .p-home-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--home-head-margin-bottom, 20px); color: var(--color-blue); } .p-home-head__en { text-box-trim: trim-both; text-box-edge: cap alphabetic; font-size: clamp(2.4rem, 1.8705882353rem + 1.1029411765vw, 3rem); } .p-home-head__ja { font-size: clamp(1.4rem, 1.2235294118rem + 0.3676470588vw, 1.6rem); } @media (min-width: 768px) { .p-home-head { gap: 14px; } } /* intro */ .home-intro { margin-top: 100vh; background: transparent; } .home-intro { padding-top: 34.6vw; } .home-intro { padding-bottom: 13.3vw; } .home-intro__text img { width: 72.8vw; } .home-intro__image { box-sizing: border-box; margin-left: auto; background: no-repeat center/contain; } .home-intro__image--01 { aspect-ratio: 281/361; background-image: url(../img/home/pic_intro01.jpg); } .home-intro__image--02 { aspect-ratio: 562/353; background-image: url(../img/home/pic_intro02.jpg); } @media (max-width: 1023.98px) { .home-intro__image--01 { width: 45.3vw; } .home-intro__image--01 { margin-top: 26.6vw; } .home-intro__image--01 { margin-right: 6.4vw; } .home-intro__image--02 { width: 74.6vw; } .home-intro__image--02 { margin-top: 13.3vw; } } @media (min-width: 768px) { .home-intro { padding-top: 280px; padding-bottom: 310px; } .home-intro__image--01 { width: 281px; } .home-intro__image--02 { width: 562px; } } @media (min-width: 1024px) { .home-intro { display: grid; grid-template-columns: 50% 50%; } .home-intro__inner { grid-column: 1; } .home-intro__text { width: 376px; margin-left: auto; padding-right: 80px; } .home-intro__image-area { grid-column: 2; transform: translateY(270px); } .home-intro__image--01 { margin-top: 282px; margin-right: 12.142vw; } .home-intro__image--02 { margin-top: 160px; } } /* about */ .home-about { background-color: var(--color-white); } .home-about__inner { padding-top: 21.3vw; } .home-about__inner { padding-bottom: 21.3vw; } .home-about__head { color: var(--color-blue); text-align: center; } .home-about__head { margin-bottom: 6.4vw; } .home-about__head-ja { line-height: 1.6; font-size: clamp(2.2rem, 1.4941176471rem + 1.4705882353vw, 3rem); } .home-about__head-en { line-height: 1.4; font-size: clamp(1.6rem, 1.2470588235rem + 0.7352941176vw, 2rem); } .home-about__cards { display: grid; } .home-about__cards { gap: 8vw; } .home-about__card { position: relative; aspect-ratio: 327/220; color: var(--color-white); overflow: hidden; } @media not all and (pointer: coarse) { .home-about__card:hover .home-about__card-image { transform: scale(1.1) rotateZ(0.03deg); transform-origin: center; } .home-about__card:hover .home-about__card-icon { border-color: var(--color-blue); background-color: var(--color-blue); color: var(--color-white); } } .home-about__card-image { object-fit: cover; width: 100%; height: 100%; transition: transform 0.3s ease-in; } .home-about__card-texts { box-sizing: border-box; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; padding: 24px; text-align: center; } .home-about__card-name { font-size: clamp(1.6rem, 0.8941176471rem + 1.4705882353vw, 2.4rem); } .home-about__card-desc { margin-top: 23px; font-size: clamp(1.2rem, 1.0235294118rem + 0.3676470588vw, 1.4rem); } .home-about__card-icon { position: absolute; z-index: 10; right: 12px; bottom: 12px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-white); color: var(--color-white); transition: all 0.3s ease-in; } .home-about__card-icon svg { width: 12px; height: 12px; } @media (min-width: 768px) { .home-about__inner { --inner-max-width: 1366px; padding-top: 120px; padding-bottom: 120px; } .home-about__head { margin-bottom: 60px; } .home-about__cards { grid-template-columns: 1fr 1fr; gap: 40px; width: fit-content; margin: auto; } .home-about__card { aspect-ratio: 430/370; max-width: 430px; } .home-about__card-icon { right: 20px; bottom: 20px; width: 46px; height: 46px; } .home-about__card-icon svg { width: 16px; height: 16px; } } @media (min-width: 1366px) { .home-about__card-texts { padding: 110px 32px 80px; } .home-about__card-desc { min-height: 96px; margin-top: 50px; } } /* business */ .home-business { position: relative; z-index: 2; background: linear-gradient(180deg, #eceff4 6.25%, #fff 49.97%); } .home-business__inner { padding-top: 21.3vw; } .home-business__inner { padding-bottom: 10.6vw; } @media (max-width: 1023.98px) { .home-business__image { margin-bottom: 5.3vw; } } @media (min-width: 768px) { .home-business__inner { padding-top: 200px; padding-bottom: 100px; } } @media (min-width: 1024px) { .home-business__inner { display: grid; grid-template-columns: 360px 1fr; grid-column-gap: 50px; grid-auto-flow: dense; } .home-business__inner > *:not(.home-business__image) { grid-column: 1; } .home-business__image { grid-column: 2; grid-row: 1/4; } } @media (min-width: 1366px) { .home-business__image { width: 588px; } } /* news */ .home-news { position: relative; z-index: 2; background-color: var(--color-white); } .home-news__inner { padding-top: 10.6vw; } .home-news__inner { padding-bottom: 21.3vw; } @media (min-width: 768px) { .home-news__inner { padding-top: 100px; padding-bottom: 160px; } } /* banner */ .home-banner { position: relative; z-index: 2; background-color: var(--color-white); } .home-banner__inner { padding-bottom: 21.3vw; } .home-banner__external { margin-bottom: 21.3vw; } .home-banner__internal { display: flex; flex-direction: column; align-items: center; } .home-banner__internal { gap: 8vw; } .home-banner__item { position: relative; display: flex; } @media not all and (pointer: coarse) { .home-banner__item:hover .home-banner__image img { transform: scale(1.1) rotateZ(0.03deg); } .home-banner__item:hover .home-banner__icon { --banner-icon-border-color: var(--color-blue); --banner-icon-background: var(--color-blue); --banner-icon-color: var(--color-white); } } .home-banner__item--sustainability, .home-banner__item--report { --banner-icon-border-color: var(--color-white); aspect-ratio: 375/153; } .home-banner__item--sustainability .home-banner__text-area, .home-banner__item--report .home-banner__text-area { display: flex; flex-direction: column; justify-content: space-between; padding: 6.4vw 6.4vw 3.2vw 6.4vw; font-size: clamp(1.2rem, 0.2rem + 2.0833333333vw, 1.8rem); } .home-banner__item--sustainability .home-banner__icon, .home-banner__item--report .home-banner__icon { --banner-icon-border-color: var(--color-black); --banner-icon-background: var(--color-white); --banner-icon-color: var(--color-black); } .home-banner__item--sustainability .home-banner__text-area img { transform: translateY(2px); } .home-banner__item--sustainability .home-banner__text-area img { width: 35.1vw; } .home-banner__item--report .home-banner__text-area img { width: 38.1vw; } .home-banner__item--company, .home-banner__item--recruit { aspect-ratio: 327/94; max-width: 430px; border: 1px solid var(--color-blue-gray); } .home-banner__item--company, .home-banner__item--recruit { width: 87.2vw; } .home-banner__item--company .home-banner__image, .home-banner__item--recruit .home-banner__image { width: 58.13%; } .home-banner__item--company .home-banner__text-area, .home-banner__item--recruit .home-banner__text-area { display: flex; align-items: center; padding: 4.8vw; color: var(--color-blue); font-size: clamp(1.4rem, 0.7333333333rem + 1.3888888889vw, 1.8rem); } .home-banner__item--company { --banner-icon-color: var(--color-black); } .home-banner__item--recruit { --banner-icon-border-color: var(--color-white); } .home-banner__image { position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden; } .home-banner__image img { object-fit: cover; object-position: center; width: 100%; height: 100%; transition: all 0.3s ease-in; } .home-banner__text-area { box-sizing: border-box; } .home-banner__text-area p { line-height: 1.6; } .home-banner__icon { box-sizing: border-box; position: absolute; right: 12px; bottom: 12px; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--banner-icon-border-color, var(--color-black)); background-color: var(--banner-icon-background); color: var(--banner-icon-color, var(--color-white)); } .home-banner__icon svg { width: 50%; height: 50%; } @media (min-width: 768px) { .home-banner__inner { padding-bottom: 160px; } .home-banner__item--sustainability .home-banner__text-area img { width: 232px; transform: translateY(4px); } .home-banner__item--report .home-banner__text-area img { width: 245px; } .home-banner__item--company .home-banner__text-area, .home-banner__item--recruit .home-banner__text-area { padding: 24px; } } @media (min-width: 768px) and (max-width: 899.98px) { .home-banner__item--sustainability .home-banner__icon, .home-banner__item--report .home-banner__icon { right: 30px; bottom: 30px; width: 40px; height: 40px; } } @media (min-width: 900px) { .home-banner__external { display: grid; grid-template-columns: 50% 50%; margin-bottom: 120px; } .home-banner__internal { flex-direction: row; justify-content: center; gap: 40px; } .home-banner__item--sustainability .home-banner__text-area, .home-banner__item--report .home-banner__text-area { height: 100%; padding: 4.16%; } .home-banner__item--sustainability .home-banner__icon, .home-banner__item--report .home-banner__icon { right: 20px; bottom: 20px; width: 30px; height: 30px; } } @media (min-width: 1025px) { .home-banner__item--report { --banner-icon-border-color: var(--color-black); --banner-icon-color: var(--color-black); } } @media (min-width: 1200px) { .home-banner__external { max-width: 1920px; margin-left: auto; margin-right: auto; } .home-banner__item--sustainability .home-banner__icon, .home-banner__item--report .home-banner__icon { right: 30px; bottom: 30px; width: 46px; height: 46px; } .home-banner__item--sustainability .home-banner__icon svg, .home-banner__item--report .home-banner__icon svg { width: 16px; height: 16px; } } /* .p-idea */ .p-idea__inner { padding-top: 13.3vw; } .p-idea__lead { margin-bottom: 16vw; } .p-idea__list dt { line-height: 1.6; color: var(--color-blue); font-size: clamp(1.6rem, 1.1428571429rem + 0.9523809524vw, 2rem); } .p-idea__list dd { line-height: 2; } @media (max-width: 767.98px) { .p-idea__list dt { padding-top: 10.6vw; } .p-idea__list dt { padding-bottom: 3.2vw; } .p-idea__list dd { padding-bottom: 10.6vw; } .p-idea__list dd:not(:last-child) { border-bottom: 1px solid var(--color-cloud); } } @media (min-width: 768px) { .p-idea__inner { padding-top: 100px; } .p-idea__lead { margin-bottom: 100px; } .p-idea__list { display: grid; grid-template-columns: auto 1fr; grid-auto-flow: dense; } .p-idea__list dt, .p-idea__list dd { padding-top: 60px; padding-bottom: 60px; } .p-idea__list dt:not(:last-of-type), .p-idea__list dd:not(:last-of-type) { border-bottom: 1px solid var(--color-cloud); } .p-idea__list dt { box-sizing: border-box; grid-column: 1; padding-right: 2em; } .p-idea__list dd { grid-column: 2; } } @media (min-width: 1024px) { .p-idea__list { grid-template-columns: 280px 1fr; } } /* .p-message */ .p-message__inner { padding-top: 13.3vw; } .p-message__eyecatch { opacity: 0; } .p-message__eyecatch { margin-bottom: 12.8vw; } .p-message__eyecatch-label { box-sizing: border-box; position: relative; z-index: 2; width: fit-content; margin-top: -24px; margin-left: auto; padding: 9px 24px; background-color: var(--color-blue); color: var(--color-white); text-align: right; } .p-message__eyecatch-label { min-width: 55.4vw; } .p-message__eyecatch-company, .p-message__eyecatch-name { display: block; line-height: 1.4; } .p-message__eyecatch-company { font-size: clamp(1rem, 0.5428571429rem + 0.9523809524vw, 1.4rem); } .p-message__eyecatch-name { font-size: clamp(1.6rem, 1.1428571429rem + 0.9523809524vw, 2rem); } .p-message__image { margin-top: 64px; margin-bottom: 64px; } .p-message__image img { max-width: 480px; margin: auto; } @media (max-width: 767.98px) { .p-message__eyecatch { margin-inline: calc(50% - 50vw); } } @media (min-width: 768px) { .p-message__inner { --inner-max-width: 780px; padding-top: 80px; } .p-message__eyecatch { margin-bottom: 120px; } .p-message__eyecatch img { width: 640px; } .p-message__eyecatch-label { min-width: 288px; margin-top: -40px; padding: 12px 32px; } } /* .p-other */ .p-other__inner { padding-top: 13.3vw; } .p-other__inner { padding-bottom: 16vw; } .p-other__list { font-size: clamp(1.3rem, 1.1333333333rem + 0.3472222222vw, 1.4rem); } .p-other__list { margin-bottom: 10.6vw; } .p-other__list a { color: var(--color-blue); text-decoration: underline; } @media not all and (pointer: coarse) { .p-other__list a:hover { text-decoration: none; } } @media (min-width: 768px) { .p-other__inner { padding-top: 80px; padding-bottom: 160px; } .p-other__list { margin-bottom: 60px; } } /* .p-product-history */ .p-product-history { padding-top: 16vw; } @media (min-width: 768px) { .p-product-history { padding-top: 40px; } } /* .p-profile */ .p-profile { padding-top: 10.6vw; } .p-profile { padding-bottom: 21.3vw; } @media (min-width: 768px) { .p-profile { padding-top: 64px; padding-bottom: 160px; } } /* .p-profile-section */ .p-profile-section a { color: var(--color-blue); text-decoration: underline; } @media not all and (pointer: coarse) { .p-profile-section a:hover { text-decoration: none; } } .p-profile-section__inner { padding-bottom: 21.3vw; } .p-profile-section__head { --c-head-margin-bottom: 32px; } .p-profile-section__map { aspect-ratio: 327/184; } .p-profile-section__map { margin-bottom: 2.1vw; } .p-profile-section__map iframe { width: 100%; height: 100%; } .p-profile-section__image { display: block; border-bottom: 1px solid var(--color-cloud); } .p-profile-section__image { margin-bottom: 6.4vw; } .p-profile-section__image { padding-bottom: 8.5vw; } .p-profile-section__links h3 { line-height: 1.6; color: var(--color-blue); font-size: clamp(1.8rem, 1.5714285714rem + 0.4761904762vw, 2rem); } .p-profile-section__links h3 { margin-bottom: 6.4vw; } .p-profile-section__links ul { display: grid; gap: 1em; } .p-profile-section__links ul { margin-bottom: 10.6vw; } @media (min-width: 768px) { .p-profile-section__inner { padding-bottom: 160px; } .p-profile-section__head { --c-head-margin-bottom: 48px; } .p-profile-section__map { max-width: 640px; margin: 0 auto 8px; } .p-profile-section__map + p { max-width: 640px; margin: auto; } .p-profile-section__image { margin-bottom: 40px; padding-bottom: 54px; } .p-profile-section__links h3 { margin-bottom: 40px; } .p-profile-section__links ul { grid-template-columns: 1fr 1fr; margin-bottom: 48px; } } /* .p-quality */ .p-quality__inner { padding-top: 13.3vw; } .p-quality__section { padding-bottom: 26.6vw; } .p-quality__block h3 { line-height: 1.6; color: var(--color-blue); font-size: clamp(1.6rem, 1.2470588235rem + 0.7352941176vw, 2rem); } .p-quality__block small { display: inline-block; line-height: 1.8; font-size: clamp(1.1rem, 0.9235294118rem + 0.3676470588vw, 1.3rem); } .p-quality__block + .p-quality__block { border-top: 1px solid var(--color-cloud); } .p-quality__block + .p-quality__block { margin-top: 10.6vw; } .p-quality__block + .p-quality__block { padding-top: 10.6vw; } .p-quality__list { box-sizing: border-box; counter-reset: num; background-color: var(--color-bg); } .p-quality__list { margin-top: 8vw; } .p-quality__list { margin-bottom: 2.6vw; } .p-quality__list { padding: 5.3vw; } .p-quality__list li { position: relative; display: grid; grid-template-columns: auto 1fr; grid-column-gap: 0.25em; } .p-quality__list li::before { content: counter(num) "."; counter-increment: num; display: inline-block; margin-top: 0.1em; color: var(--color-blue); } .p-quality__list li:not(:last-of-type) { margin-bottom: 2.1vw; } .p-quality__links { display: grid; } .p-quality__links { grid-row-gap: 16vw; } @media (max-width: 899.98px) { .p-quality__block h3 { margin-bottom: 0.75em; } } @media (min-width: 768px) { .p-quality__inner { padding-top: 100px; } .p-quality__section { padding-bottom: 160px; } .p-quality__block + .p-quality__block { margin-top: 60px; padding-top: 60px; } .p-quality__list { margin-top: 40px; margin-bottom: 20px; } .p-quality__list li:not(:last-of-type) { margin-bottom: 10px; } .p-quality__links { grid-row-gap: 80px; } .p-quality__item { display: grid; grid-template-columns: 1fr 1fr; } .p-quality__item-head { --c-head-margin-bottom: 0; } } .p-environment__inner { padding-top: 13.3vw; } .p-environment__inner { padding-bottom: 26.6vw; } @media (min-width: 768px) { .p-environment__inner { padding-top: 100px; padding-bottom: 160px; } } /* .p-recruit */ .p-recruit__inner { padding-top: 13.3vw; } .p-recruit__inner { padding-bottom: 21.3vw; } .p-recruit__lead { margin-bottom: 40px; } .p-recruit__list { display: grid; grid-template-columns: 100%; } .p-recruit__list { gap: 16vw; } .p-recruit__item { display: grid; grid-template-columns: 1fr auto; grid-row-gap: 16px; } .p-recruit__item img { grid-column: 1/3; } .p-recruit__item p { line-height: 1.6; color: var(--color-blue); font-size: clamp(1.6rem, 0.9333333333rem + 1.3888888889vw, 2rem); } .p-recruit__button { --button-margin-top: 0; } @media (min-width: 768px) { .p-recruit__inner { padding-top: 80px; padding-bottom: 160px; } .p-recruit__item { grid-row-gap: 40px; } } @media (min-width: 1024px) { .p-recruit__list { grid-template-columns: 1fr 1fr; grid-gap: 80px; } } /* .p-sitemap */ .p-sitemap__inner { font-size: clamp(1.2rem, 0.8666666667rem + 0.6944444444vw, 1.4rem); } .p-sitemap__inner { padding-top: 13.3vw; } .p-sitemap__inner { padding-bottom: 21.3vw; } .p-sitemap__block + .p-sitemap__block { margin-top: 10.6vw; } .p-sitemap__heading { border-bottom: 1px solid var(--color-cloud); } .p-sitemap__heading { padding-bottom: 2.6vw; } .p-sitemap__heading a { display: inline-flex; gap: 8px; } @media not all and (pointer: coarse) { .p-sitemap__heading a:hover { color: var(--color-blue-rgb); text-decoration: underline; } .p-sitemap__heading a:hover .p-sitemap__icon { background-color: var(--color-blue); color: var(--color-white); } } .p-sitemap__icon { box-sizing: border-box; width: 24px; height: 24px; border: 1px solid; border-radius: 50%; transition: all 0.3s ease-in; } .p-sitemap__icon svg { width: 9px; height: 9px; } .p-sitemap__list { margin-top: 4.2vw; } .p-sitemap__list a { color: var(--color-blue); text-decoration: underline; } @media not all and (pointer: coarse) { .p-sitemap__list a:hover { text-decoration: none; } } .p-sitemap__list li { margin-bottom: 1em; line-height: 2; } .p-sitemap__list li ul { box-sizing: border-box; margin-bottom: 1em; padding-left: 20px; } @media (min-width: 768px) { .p-sitemap__inner { padding-top: 100px; padding-bottom: 160px; } .p-sitemap__block + .p-sitemap__block { margin-top: 50px; } .p-sitemap__heading { padding-bottom: 16px; } .p-sitemap__heading a { gap: 10px; } .p-sitemap__list { margin-top: 20px; } .p-sitemap__list li ul { display: grid; grid-template-columns: repeat(3, 1fr); padding-left: 40px; } .p-sitemap__list:not(:has(ul)) { display: grid; grid-template-columns: repeat(3, 1fr); } } /* .p-thanks */ .p-thanks__inner { text-align: center; } .p-thanks__inner { padding-top: 13.3vw; } .p-thanks__inner { padding-bottom: 26.6vw; } @media (min-width: 768px) { .p-thanks__inner { padding-top: 80px; padding-bottom: 160px; } }