@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { /* カラーパレット */ --main-color: #940910; --black-color: #212728; } :root { font-family: "Roboto", "Noto Sans", sans-serif; } picture img { width: 100%; vertical-align: bottom; } rt { font-size: 0.6875rem; margin-bottom: 0.5px; } @media screen and (min-width: 1280px) { [data-device=sp] { display: none !important; } } @media screen and (min-width: 960px) and (max-width: 1279px) { [data-device=sp] { display: none !important; } } @media screen and (min-width: 768px) and (max-width: 959px) { [data-device=sp] { display: flex !important; } } @media screen and (min-width: 480px) and (max-width: 767px) { [data-device=sp] { display: flex !important; } } @media screen and (max-width: 479px) { [data-device=sp] { display: flex !important; } } @media screen and (min-width: 1280px) { [data-device=pc] { display: flex !important; } } @media screen and (min-width: 960px) and (max-width: 1279px) { [data-device=pc] { display: flex !important; } } @media screen and (min-width: 768px) and (max-width: 959px) { [data-device=pc] { display: none !important; } } @media screen and (min-width: 480px) and (max-width: 767px) { [data-device=pc] { display: none !important; } } @media screen and (max-width: 479px) { [data-device=pc] { display: none !important; } } /* ****************************** TOPへ戻るボタンのアニメーション ******************************* */ @keyframes moveanime { 0% { bottom: 35px; } 50% { bottom: 60px; } 100% { bottom: 35px; } } /* ****************************** 画像やテキストのワイプ表示アニメーション ******************************* */ .img-wrap { opacity: 0; } .img-animation { animation: img-opacity 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; overflow: hidden; position: relative !important; } .img-animation:before { animation: img-animation 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: var(--black-color); bottom: 0; content: ""; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 1; } /* 画像やテキストのワイプ表示のアニメーション1 */ @keyframes img-opacity { 100% { opacity: 1; } } /* 画像やテキストのワイプ表示のアニメーション2 */ @keyframes img-animation { 99% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } /* ****************************** fadeアニメーション ******************************* */ /* 初期状態 */ .js-fadeInTrigger, .js-fadeUpTrigger, .js-fadeDownTrigger, .js-fadeLeftTrigger, .js-fadeRightTrigger { opacity: 0; } /* その場でfade */ .fadeIn { animation-name: fadeInAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeInAnime { from { opacity: 0; } to { opacity: 1; } } /* 下からfade */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /* 上からfade */ .fadeDown { animation-name: fadeDownAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeDownAnime { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } } /* 左からfade */ .fadeLeft { animation-name: fadeLeftAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeLeftAnime { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } /* 右からfade */ .fadeRight { animation-name: fadeRightAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeRightAnime { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } /* ****************************** メインビジュアルでスライドする画像を少しずつ拡大していくアニメーション ******************************* */ @keyframes img-expansion { 100% { transform: scale(1.2, 1.2); } } /* ****************************** 画像がblurしながら浮かび上がるアニメーション ******************************* */ .blur { -webkit-animation-name: imageBlur; animation-name: imageBlur; opacity: 1; transition: 0.5s; } @-webkit-keyframes imageBlur { from { opacity: 0; -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); } to { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } } @keyframes imageBlur { from { opacity: 0; -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); } to { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } } /* ****************************** blurアニメーション ******************************* */ .is-blur { animation: textBlur 1.2s forwards; } .js-blur { opacity: 0; } @keyframes textBlur { 0% { color: transparent; filter: blur(50px); opacity: 0; } 100% { filter: blur(0); opacity: 1; } } /* ****************************** フェードインのアニメーション ******************************* */ .js-fadein { opacity: 0; transform: translateY(30px); transition-property: transform, opacity; transition-duration: 1.5s; transition-delay: 0s; } .js-fadein.is-fade { opacity: 1; transform: translateY(0); } /* ****************************** ハンバーガーメニュー ******************************* */ body.home .l-header .c-hamburger span { background-color: #fff; } body.home .l-header.is-scrolled .c-hamburger span { background-color: black; } body.home .l-header.is-scrolled .c-hamburger.active span { background-color: #fff; } @media screen and (max-width: 479px) { .c-hamburger { display: block; position: fixed; z-index: 9999; right: 20px; top: 19px; width: 65px; height: 42px; cursor: pointer; text-align: center; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-hamburger { display: block; position: fixed; z-index: 9999; right: 20px; top: 19px; width: 65px; height: 42px; cursor: pointer; text-align: center; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-hamburger { display: block; position: fixed; z-index: 9999; right: 20px; top: 19px; width: 65px; height: 42px; cursor: pointer; text-align: center; } } @media screen and (max-width: 479px) { .c-hamburger span { display: block; position: absolute; width: 55px; height: 1px; left: 6px; background: black; -webkit-transition: transform 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-hamburger span { display: block; position: absolute; width: 55px; height: 1px; left: 6px; background: black; -webkit-transition: transform 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-hamburger span { display: block; position: absolute; width: 55px; height: 1px; left: 6px; background: black; -webkit-transition: transform 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; } } @media screen and (max-width: 479px) { .c-hamburger span:nth-child(1) { top: 13px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-hamburger span:nth-child(1) { top: 13px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-hamburger span:nth-child(1) { top: 13px; } } @media screen and (max-width: 479px) { .c-hamburger span:nth-child(2) { top: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-hamburger span:nth-child(2) { top: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-hamburger span:nth-child(2) { top: 20px; } } @media screen and (max-width: 479px) { .c-hamburger span:nth-child(3) { top: 27px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-hamburger span:nth-child(3) { top: 27px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-hamburger span:nth-child(3) { top: 27px; } } /* ナビ開いてる時のボタン */ @media screen and (max-width: 479px) { .c-hamburger.active span:nth-child(1) { top: 16px; left: 20px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); width: 35px; background: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-hamburger.active span:nth-child(1) { top: 16px; left: 20px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); width: 35px; background: #fff; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-hamburger.active span:nth-child(1) { top: 16px; left: 20px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); width: 35px; background: #fff; } } @media screen and (max-width: 479px) { .c-hamburger.active span:nth-child(2), .c-hamburger.active span:nth-child(3) { width: 35px; top: 16px; left: 20px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); background: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-hamburger.active span:nth-child(2), .c-hamburger.active span:nth-child(3) { width: 35px; top: 16px; left: 20px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); background: #fff; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-hamburger.active span:nth-child(2), .c-hamburger.active span:nth-child(3) { width: 35px; top: 16px; left: 20px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); background: #fff; } } /* ****************************** header ******************************* */ body:not(.home) .l-header { background: #fff; } body:not(.home) .l-header__navLink-ja { color: var(--black-color); } body:not(.home) .l-header__navLink-en { color: var(--main-color); } body:not(.home) .l-header__logoImg { content: url("/wp-content/themes/irimajiri-group/assets/img/logo_ja.png"); } .l-header { position: fixed; top: 0; width: 100%; z-index: 9999; background-color: rgba(255, 255, 255, 0); transition: background-color 0.3s ease; } .l-header.is-scrolled { background-color: #fff; } .l-header.is-scrolled .l-header__navItem { color: black; } .l-header.is-scrolled .l-header__navLink-en { color: var(--main-color); } .l-header.is-scrolled .l-header__logoImg { content: url("/wp-content/themes/irimajiri-group/assets/img/logo_ja.png"); } @media screen and (max-width: 479px) { .l-header { background: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-header { background: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-header * { color: #fff; } } .l-header__wrapper { width: 90%; height: 80px; margin: 0 auto; display: flex; justify-content: space-between; } @media screen and (max-width: 479px) { .l-header__wrapper { width: 100%; align-items: center; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-header__wrapper { width: 100%; align-items: center; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-header__wrapper { width: 100%; align-items: center; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-header__wrapper { width: 90%; } } .l-header__navLink { display: flex; flex-direction: column; align-items: center; position: relative; font-size: 0.6875rem; } @media screen and (max-width: 479px) { .l-header__navLink { flex-direction: column; font-weight: unset; font-size: 0.875rem; font-weight: unset; align-items: start; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-header__navLink { flex-direction: column; font-weight: unset; font-size: 0.875rem; font-weight: unset; align-items: start; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-header__navLink { flex-direction: column; font-weight: unset; font-size: 0.875rem; font-weight: unset; align-items: start; } } .l-header__navLink::after { position: absolute; bottom: -10px; left: 0; content: ""; width: 100%; height: 1px; background: var(--main-color); transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; } @media screen and (max-width: 479px) { .l-header__navLink::after { display: none; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-header__navLink::after { display: none; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-header__navLink::after { display: none; } } .l-header__navLink-ja { font-size: 0.875rem; } @media screen and (max-width: 479px) { .l-header__navLink-ja { font-weight: unset; font-size: 0.875rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-header__navLink-ja { font-weight: unset; font-size: 0.875rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-header__navLink-ja { font-weight: unset; font-size: 0.875rem; } } .l-header__navLink-en { font-size: 0.75rem; font-weight: 800; } @media screen and (max-width: 479px) { .l-header__navLink-en { font-size: 3.5rem; font-weight: 800; margin-right: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-header__navLink-en { font-size: 3.5rem; font-weight: 800; margin-right: 24px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-header__navLink-en { font-size: 3.5rem; font-weight: 800; margin-right: 24px; } } .l-header__logo { width: 200px; transition: 0.4s; display: flex; } @media screen and (max-width: 479px) { .l-header__logo { width: 40%; max-width: 250px; margin-left: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-header__logo { width: 40%; max-width: 175px; margin-left: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-header__logo { width: 40%; max-width: 175px; margin-left: 20px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-header__logo { width: 170px; } } .l-header__logo:hover { opacity: 0.6; } .l-header__logo a { display: flex; } .l-header__logoImg { width: 100%; object-fit: contain; content: url("/wp-content/themes/irimajiri-group/assets/img/logo_ja_white.png"); } .l-header__navMenu { display: flex; align-items: center; color: #fff; } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-header__navMenu.pc { display: flex; } } .l-header__navLists { display: flex; align-items: center; gap: 48px; } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-header__navLists { gap: 28px; } } .l-header__navItem { font-size: 1rem; color: #fff; transition: color 0.3s ease; position: relative; } .l-header__navItem:nth-child(1)::after, .l-header__navItem:nth-child(3)::after, .l-header__navItem:nth-child(4)::after { content: ""; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); /* === ここから三角形の描画 === */ width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: var(--main-color) transparent transparent transparent; } .l-header__navItem:nth-child(3) .l-header__navChildLink { font-size: 0.875rem; font-weight: 600; background: #fff; color: black; padding: 14px 10px; border-radius: 6px; border: 1px solid #fff; text-align: center; display: flex; justify-content: center; transition: 0.3s ease; } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-header__navItem:nth-child(3) .l-header__navChildLink { padding: 14px 8px; } } .l-header__navItem:nth-child(3) .l-header__navChildLink:hover { background: var(--main-color); color: #fff; border: 1px solid #fff; } .l-header__navItem:nth-child(3) .l-header__navChildItemList { gap: 10px; } .l-header__navItem:nth-child(3) .l-header__navChildItem { width: calc(25% - 7.5px); } .l-header__navItem:nth-child(1) .l-header__navChildItem, .l-header__navItem:nth-child(4) .l-header__navChildItem { transition: opacity 0.3s ease; } .l-header__navItem:nth-child(1) .l-header__navChildItem:hover, .l-header__navItem:nth-child(4) .l-header__navChildItem:hover { opacity: 0.7; } .l-header__navItem:hover .l-header__navLink { opacity: 0.8; } .l-header__navItem:hover .l-header__megaMenu { visibility: visible; opacity: 1; } .l-header__megaMenu { position: fixed; width: 100vw; left: 0; top: 80px; background: var(--main-color); color: #fff; opacity: 0; visibility: hidden; box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3); transition: opacity 0.3s, visibility 0.3s; } .l-header__megaMenuWrapper { width: 90%; max-width: 1180px; margin-inline: auto; padding-block: 40px; display: flex; } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-header__megaMenuWrapper { flex-direction: column; gap: 24px; } } .l-header__megaMenuTitle { padding-right: 40px; border-right: 1px solid; display: flex; flex-direction: column; flex-shrink: 0; width: fit-content; } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-header__megaMenuTitle { width: 100%; border-right: 0; border-bottom: 1px solid; padding-bottom: 24px; } } .l-header__megaMenuTitle .l-header__navChildLink-en { font-size: 2rem; font-weight: 600; } .l-header__navChildItemList { padding-left: 40px; display: flex; justify-content: space-between; align-items: center; flex-grow: 1; flex-wrap: wrap; } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-header__navChildItemList { justify-content: unset; gap: 40px; padding-left: 0; } } .l-header__navChildLink { display: flex; align-items: center; } .l-header__navChildItem .l-header__navChildLink-en { font-size: 0.75rem; } .l-header__navChildLink-ja { display: flex; align-items: center; font-size: 0.875rem; font-weight: 600; } .l-header__sectionTitle-line { width: 40px; height: 1px; display: inline-block; background: #fff; margin-right: 10px; position: relative; top: 2px; } .l-header__link-arrow { display: inline-block; vertical-align: middle; color: var(--main-color); line-height: 1; width: 30px; height: 30px; background: #fff; border-radius: 50%; box-sizing: content-box; transform: translateY(0%); margin-right: 10px; } .l-header__link-arrow::before { content: ""; color: var(--main-color); width: 0; height: 0; border-style: solid; border-color: transparent; border-width: 5px 8px; border-left-color: currentColor; border-right: 0; transform: translateX(15%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.4s; } @media screen and (max-width: 479px) { .globalMenuSp { position: fixed; z-index: 999; top: 0; left: 0; transform: translateY(-100%); transition: all 0.6s; width: 100%; background: var(--main-color); height: 100vh; overflow-y: scroll; opacity: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp { position: fixed; z-index: 999; top: 0; left: 0; transform: translateY(-100%); transition: all 0.6s; width: 100%; background: var(--main-color); height: 100vh; overflow-y: scroll; opacity: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp { position: fixed; z-index: 999; top: 0; left: 0; transform: translateY(-100%); transition: all 0.6s; width: 100%; background: var(--main-color); height: 100vh; overflow-y: scroll; opacity: 0; } } @media screen and (max-width: 479px) { .globalMenuSp ul { background: unset; color: #fff; margin: 0 auto; padding: 108px 0; width: 80%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp ul { background: unset; color: #fff; margin: 0 auto; padding: 108px 0; width: 80%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp ul { background: unset; color: #fff; margin: 0 auto; padding: 108px 0; width: 80%; } } @media screen and (max-width: 479px) { .globalMenuSp ul li { background: unset; color: #fff; position: relative; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp ul li { background: unset; color: #fff; position: relative; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp ul li { background: unset; color: #fff; } } @media screen and (max-width: 479px) { .globalMenuSp ul li a { color: #fff; padding: 14px; font-size: 1rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp ul li a { color: #fff; padding: 16px; font-size: 1rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp ul li a { color: #fff; padding: 16px; font-size: 1rem; } } @media screen and (max-width: 479px) { .globalMenuSp ul li a .l-header__navLink-en { color: #fff !important; font-size: 1.75rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp ul li a .l-header__navLink-en { color: #fff !important; font-size: 1.75rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp ul li a .l-header__navLink-en { color: #fff !important; font-size: 1.75rem; } } @media screen and (max-width: 479px) { .globalMenuSp ul li a .l-header__navLink-ja { color: #fff; font-size: 0.75rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp ul li a .l-header__navLink-ja { color: #fff; font-size: 0.75rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp ul li a .l-header__navLink-ja { color: #fff; font-size: 0.75rem; } } @media screen and (max-width: 479px) { .globalMenuSp.active { /* このクラスを、jQueryで付与・削除する */ transform: translateY(0px); opacity: 1; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp.active { /* このクラスを、jQueryで付与・削除する */ transform: translateY(0px); opacity: 1; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp.active { /* このクラスを、jQueryで付与・削除する */ transform: translateY(0px); opacity: 1; } } @media screen and (max-width: 479px) { .hamburgerBtns { margin-top: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .hamburgerBtns { margin-top: 16px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .hamburgerBtns { margin-top: 16px; } } @media screen and (max-width: 479px) { .globalMenuSp__item-head { font-weight: 800; border-top: 1px solid #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp__item-head { font-weight: 800; border-top: 1px solid #fff; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp__item-head { font-weight: 800; border-top: 1px solid #fff; } } @media screen and (max-width: 479px) { .globalMenuSp__item-link a::before { content: "\f105"; font-family: FontAwesome; padding-right: 5px; color: #fff; margin-top: -8px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp__item-link a::before { content: "\f105"; font-family: FontAwesome; padding-right: 5px; color: #fff; margin-top: -8px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp__item-link a::before { content: "\f105"; font-family: FontAwesome; padding-right: 5px; color: #fff; margin-top: -8px; } } @media screen and (max-width: 479px) { .globalMenuSp__item-link { padding-left: 6px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .globalMenuSp__item-link { padding-left: 6px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .globalMenuSp__item-link { padding-left: 6px; } } .globalMenuSp__subMenu { padding: 0 !important; display: flex; flex-direction: column; gap: 14px; padding-block: 0; margin-top: 0; clip-path: inset(0 -100vmax); max-height: 0; overflow: hidden; transition: max-height 0.4s, padding 0.4s; } .globalMenuSp__item.is-open .globalMenuSp__subMenu { max-height: 1000px; padding-bottom: 14px !important; } .globalMenuSp__subMenuLink { padding: 0 !important; font-size: 0.875rem !important; font-weight: 400; } .globalMenuSp__subMenuLink::before { content: "─"; margin-right: 8px; } .globalMenuSp__toggle { display: inline-block; position: absolute; right: -10px; top: 0px; padding: 22px 24px; cursor: pointer; transition: 0.4s; -webkit-tap-highlight-color: transparent; } .globalMenuSp__toggle::after { content: "＋"; color: #ffffff; font-size: 1.5rem; font-weight: 500; } .globalMenuSp__item.is-open .globalMenuSp__toggle::after { content: "─"; color: #fff; } .l-footer { position: relative; background: #212728; color: #fff; border-bottom: solid 10px var(--main-color); } @media screen and (max-width: 479px) { .l-footer { flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer { flex-direction: column; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer { flex-direction: column; } } .l-footer__wrapper { width: 90%; max-width: 1180px; padding-block: 48px; display: flex; justify-content: space-between; margin: auto; } @media screen and (max-width: 479px) { .l-footer__wrapper { width: 85%; flex-direction: column-reverse; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer__wrapper { width: 85%; flex-direction: column-reverse; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer__wrapper { width: 85%; flex-direction: column-reverse; } } .l-footer__logo { text-align: center; } .l-footer__logoImg img { max-width: 100px; } .l-footer__navMenu { display: flex; width: 75%; justify-content: space-between; } @media screen and (max-width: 479px) { .l-footer__navMenu { width: 100%; flex-direction: column; gap: 40px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer__navMenu { width: 100%; flex-direction: column; gap: 40px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer__navMenu { width: 100%; flex-direction: column; gap: 40px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-footer__navMenu { width: 82%; } } .l-footer__navLists { display: flex; gap: 18px; justify-content: center; margin-top: 24px; font-size: 0.75rem; flex-direction: column; } @media screen and (max-width: 479px) { .l-footer__navLists { font-size: 0.875rem; margin-top: 18px; gap: 18px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer__navLists { font-size: 0.875rem; margin-top: 18px; gap: 18px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer__navLists { font-size: 0.875rem; margin-top: 18px; gap: 18px; } } .l-footer__navItem { display: flex; align-items: center; gap: 12px; position: relative; } @media screen and (max-width: 479px) { .l-footer__navItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #fe1b00; border-right: 1px solid #fe1b00; transform: rotate(404deg); } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer__navItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #fe1b00; border-right: 1px solid #fe1b00; transform: rotate(404deg); } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer__navItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #fe1b00; border-right: 1px solid #fe1b00; transform: rotate(404deg); } } @media screen and (max-width: 479px) { .l-footer__navItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 0px; width: 13px; height: 1px; background: #fe1b00; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer__navItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 0px; width: 13px; height: 1px; background: #fe1b00; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer__navItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 0px; width: 13px; height: 1px; background: #fe1b00; } } .l-footer__listWrapper-nonList { display: flex; flex-direction: column; gap: 40px; } .l-footer__listName-en { font-size: 1.75rem; } .l-footer__listName-ja { color: #c7c7c7; font-size: 0.875rem; } .l-footer__line { width: 18px; height: 1px; display: inline-block; background: #fff; transition: 0.4s; position: relative; top: 2px; transition: width 0.4s; } .l-footer__oyaLink { transition: opacity 0.4s; } .l-footer__oyaLink:hover { opacity: 0.4; } @media screen and (max-width: 479px) { .l-footer__oyaLink { border-bottom: 1px solid #fff; display: block; padding-bottom: 10px; font-weight: 600; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer__oyaLink { border-bottom: 1px solid #fff; display: block; padding-bottom: 10px; font-weight: 600; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer__oyaLink { border-bottom: 1px solid #fff; display: block; padding-bottom: 10px; font-weight: 600; } } .l-footer__navItem .l-footer__navLink { transition: opacity 0.4s; } .l-footer__navItem:hover .l-footer__line { width: 18px; } .l-footer__navItem:hover .l-footer__navLink { opacity: 0.4; } @media screen and (max-width: 479px) { .l-footer__logo { margin-top: 40px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer__logo { margin-top: 40px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer__logo { margin-top: 40px; } } .l-footer__copyright { margin-top: 40px; font-size: 0.875rem; } @media screen and (max-width: 479px) { .l-footer__copyright { margin-top: 24px; font-size: 0.75rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .l-footer__copyright { margin-top: 24px; font-size: 0.75rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .l-footer__copyright { margin-top: 24px; font-size: 0.75rem; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .l-footer__copyright { font-size: 0.625rem; } } .l-footer #page-top { position: absolute; right: 35px; bottom: 35px; height: 50px; text-decoration: none; font-weight: bold; transform: rotate(90deg); font-size: 90%; line-height: 2rem; color: #fff; padding: 0 0 0 35px; border-top: solid 1px; animation: moveanime 2s ease-in-out infinite; } .l-footer #page-top::before { content: ""; display: block; position: absolute; top: -1px; left: 0px; width: 15px; border-top: solid 1px; transform: rotate(35deg); transform-origin: left top; } /* ****************************** ハンバーガーメニュー ******************************* */ .c-viewAllBtn { margin-top: 40px; display: inline-block; border: 1px solid #fff; width: 100%; padding-block: 16px; border-radius: 50px; transition: 0.4s; text-align: center; background: var(--main-color); color: #fff; } .c-viewAllBtn:hover { background: #fff; color: var(--main-color); } .c-pageHeader { background: var(--main-color); } .c-pageHeader__wrapper { width: 1180px; max-width: 100%; height: 320px; margin-inline: auto; margin-top: 80px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } @media screen and (max-width: 479px) { .c-pageHeader__wrapper { width: 90%; height: 200px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-pageHeader__wrapper { width: 90%; height: 250px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-pageHeader__wrapper { width: 90%; height: 250px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .c-pageHeader__wrapper { width: 90%; } } .c-pageHeader__pageTitle-en { font-size: 5rem; font-weight: 600; color: #fff; } @media screen and (max-width: 479px) { .c-pageHeader__pageTitle-en { font-size: 2.8125rem; margin-bottom: 10px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-pageHeader__pageTitle-en { font-size: 2.8125rem; margin-bottom: 10px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-pageHeader__pageTitle-en { font-size: 2.8125rem; margin-bottom: 10px; } } .c-pageHeader__pageTitle-ja { font-size: 1.5rem; font-weight: 600; background: #fff; color: var(--main-color); padding: 4px 48px; } @media screen and (max-width: 479px) { .c-pageHeader__pageTitle-ja { font-size: 0.875rem; padding: 4px 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-pageHeader__pageTitle-ja { font-size: 0.875rem; padding: 4px 24px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-pageHeader__pageTitle-ja { font-size: 0.875rem; padding: 4px 24px; } } .c-sectionTitle { color: var(--main-color); } .c-sectionTitle-en { font-size: 5rem; font-weight: 800; width: fit-content; } @media screen and (max-width: 479px) { .c-sectionTitle-en { font-size: 3.5rem; } } .c-sectionTitle-ja { font-size: 1.125rem; display: flex; align-items: center; gap: 32px; width: fit-content; } @media screen and (max-width: 479px) { .c-sectionTitle-ja { font-size: 0.875rem; gap: 16px; } } .c-sectionTitle-line { width: 80px; height: 1px; display: inline-block; background: var(--main-color); } @media screen and (max-width: 479px) { .c-sectionTitle-line { width: 35px; } } .c-breadcrumb { margin-bottom: 32px; } @media screen and (max-width: 479px) { .c-breadcrumb { margin-bottom: 16px; } } .c-breadcrumb__wrapper { color: #fff; border-bottom: 1px solid #fff; padding-bottom: 10px; } .c-breadcrumb__path { display: flex; align-items: center; column-gap: 12px; } .c-breadcrumb__path li { display: flex; flex-shrink: 0; column-gap: 12px; align-items: center; } @media screen and (max-width: 479px) and (max-width: 479px) { .c-breadcrumb__path li { font-size: 0.625rem; } } .c-breadcrumb__path li:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-breadcrumb__path li:not(:first-child)::before { content: ">"; } .c-sustainability__subMenu { padding-top: 96px; position: relative; } @media screen and (max-width: 479px) { .c-sustainability__subMenu { padding-block: 64px; overflow-y: clip; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__subMenu { padding-block: 64px; overflow-y: clip; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-sustainability__subMenu { padding-block: 64px; overflow-y: clip; padding-bottom: 0; } } .c-sustainability__subMenuTitle { font-size: 2rem; font-weight: 400; text-align: center; margin-block: 48px; color: #fff; position: relative; z-index: 1; } @media screen and (max-width: 479px) { .c-sustainability__subMenuTitle { margin-top: 0; margin-bottom: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__subMenuTitle { margin-top: 0; margin-bottom: 32px; } } .c-sustainability__subMenuWrapper { display: flex; justify-content: space-between; position: relative; z-index: 1; } @media screen and (max-width: 479px) { .c-sustainability__subMenuWrapper { flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__subMenuWrapper { flex-direction: column; } } .c-sustainability__link { width: calc((100% - 64px) / 3); display: inline-block; } @media screen and (max-width: 479px) { .c-sustainability__link:not(:last-child) { margin-bottom: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__link:not(:last-child) { margin-bottom: 32px; } } @media screen and (max-width: 479px) { .c-sustainability__link { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__link { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-sustainability__link { width: calc((100% - 30px) / 3); } } @media screen and (min-width: 960px) and (max-width: 1279px) { .c-sustainability__link { width: calc((100% - 32px) / 3); } } .c-sustainability__link:hover .c-sustainability__linkImg img { transform: scale(1.1); filter: brightness(0.7); } .c-sustainability__group { display: flex; margin-top: 16px; align-items: center; } @media screen and (max-width: 479px) { .c-sustainability__group { margin-top: 8px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__group { margin-top: 8px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .c-sustainability__group { margin-top: 10px; } } .c-sustainability__link-arrow { display: inline-block; vertical-align: middle; color: #fff; line-height: 1; width: 35px; height: 35px; background: var(--main-color); border-radius: 50%; box-sizing: content-box; transform: translateY(0%); margin-right: 16px; } @media screen and (max-width: 479px) { .c-sustainability__link-arrow { color: var(--main-color); background: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__link-arrow { color: var(--main-color); background: #fff; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-sustainability__link-arrow { aspect-ratio: 1/1; margin-right: 10px; } } .c-sustainability__link-arrow::before { content: ""; color: #fff; width: 0; height: 0; border-style: solid; border-color: transparent; border-width: 5px 8px; border-left-color: currentColor; border-right: 0; transform: translateX(15%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.4s; } @media screen and (max-width: 479px) { .c-sustainability__link-arrow::before { color: var(--main-color); } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__link-arrow::before { color: var(--main-color); } } .c-sustainability__linkImg { overflow: hidden; display: inline-block; width: 100%; border-radius: 18px; vertical-align: bottom; aspect-ratio: 16/10; } @media screen and (max-width: 479px) { .c-sustainability__linkImg { aspect-ratio: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__linkImg { aspect-ratio: unset; } } .c-sustainability__linkImg img { width: 100%; vertical-align: bottom; transition: 0.3s ease-out; transform: scale(1); } @media screen and (max-width: 479px) { .c-sustainability__linkImg img { height: 200px; object-fit: cover; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__linkImg img { height: 325px; object-fit: cover; } } .c-sustainability__text-ja { color: var(--main-color); display: flex; align-items: center; font-size: 1rem; font-weight: 600; } @media screen and (max-width: 479px) { .c-sustainability__text-ja { color: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__text-ja { color: #fff; } } .c-sustainability__text-en { font-size: 0.875rem; color: var(--main-color); } @media screen and (max-width: 479px) { .c-sustainability__text-en { color: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__text-en { color: #fff; } } .c-sustainability__bg { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); width: 100vw; height: 75%; z-index: 0; } @media screen and (max-width: 479px) { .c-sustainability__bg { top: 0; height: 200%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .c-sustainability__bg { top: 0; height: 200%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .c-sustainability__bg { top: 64px; } } .c-pagination .page-numbers { display: flex; align-items: center; justify-content: center; column-gap: 24px; } .c-pagination .page-numbers li { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; color: black; transition: 0.4s; } @media screen and (max-width: 479px) { .c-pagination .page-numbers li { width: 45px; height: 45px; } } .c-pagination .page-numbers li a { width: 40px; height: 40px; display: flex; align-items: center; } @media screen and (max-width: 479px) { .c-pagination .page-numbers li a { width: 45px; height: 45px; } } .c-pagination .page-numbers li:hover { opacity: 0.6; } .c-pagination .page-numbers li:has(.current) { color: var(--black-color); background: #e5e5e5; border-radius: 40px; } .c-pagination .page-numbers li:has(.next) { color: #fff; background: var(--main-color); border-radius: 40px; } .c-pagination .page-numbers li:has(.prev) { color: #fff; background: var(--main-color); border-radius: 40px; } .c-pagination .arrow a { justify-content: center; } .p-top-mainVisual { position: relative; overflow: hidden; } .p-top-mainVisual__picture img { height: 105vh; width: 100%; object-fit: cover; vertical-align: bottom; filter: brightness(0.8); } @media screen and (max-width: 479px) { .p-top-mainVisual__picture img { height: 100svh; object-position: 65%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-mainVisual__picture img { height: 100vh; object-position: 65%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-mainVisual__picture img { height: 100vh; } } .p-top-mainVisual__catchCopyWrapper { position: absolute; bottom: 3%; left: 5%; color: #fff; font-weight: 700; font-family: "Roboto", sans-serif; z-index: 99; } .p-top-mainVisual__catchCopy-ja { font-size: 4.0625rem; font-size: clamp(0px, 4.0625rem, 5vw); width: fit-content; opacity: 0; } @media screen and (max-width: 479px) { .p-top-mainVisual__catchCopy-ja { font-size: clamp(0px, 4.0625rem, 8vw); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-mainVisual__catchCopy-ja { font-family: "Roboto", sans-serif; font-size: clamp(0px, 4.0625rem, 7vw); } } .p-top-mainVisual__catchCopy-en { font-size: 7.5rem; font-size: clamp(0px, 7.5rem, 7vw); width: fit-content; opacity: 0; } @media screen and (max-width: 479px) { .p-top-mainVisual__catchCopy-en { font-size: clamp(0px, 7.5rem, 15vw); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-mainVisual__catchCopy-en { font-size: clamp(0px, 7.5rem, 14vw); } } .p-top-mainVisual::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 25vh; border-top: 175px solid transparent; border-left: 100vw solid var(--main-color); } @media screen and (max-width: 479px) { .p-top-mainVisual::after { border-left: 200vw solid var(--main-color); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-mainVisual::after { border-left: 200vw solid var(--main-color); } } .p-top-news { background: var(--main-color); position: relative; } .p-top-news__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; margin-inline: auto; display: flex; gap: 108px; } @media screen and (max-width: 479px) { .p-top-news__wrapper { max-width: 90%; flex-direction: column; gap: 0px; padding-top: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-news__wrapper { max-width: 90%; flex-direction: column; gap: 0px; padding-top: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-news__wrapper { padding-block: 64px; max-width: 90%; gap: 48px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-news__wrapper { padding-block: 96px; max-width: 90%; gap: 48px; } } .p-top-news__sectionTitleWrapper { width: 240px; max-width: 100%; text-align: center; color: #fff; } @media screen and (max-width: 479px) { .p-top-news__sectionTitleWrapper { display: contents; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-news__sectionTitleWrapper { display: contents; } } .p-top-news__sectionTitle-en { font-size: 3rem; font-weight: 800; } .p-top-news__newsContetsWrapper { width: 100%; } @media screen and (max-width: 479px) { .p-top-news__newsContetsWrapper { margin-top: 48px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-news__newsContetsWrapper { margin-top: 48px; } } @media screen and (max-width: 479px) { .p-top-news__viewAllBtn { order: 1; margin-top: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-news__viewAllBtn { order: 1; margin-top: 24px; } } .p-top-news__news { display: flex; align-items: center; border-top: 1px solid #E5ECE9; padding-block: 24px; gap: 40px; } @media screen and (max-width: 479px) { .p-top-news__news { gap: 14px; padding-block: 18px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-news__news { gap: 14px; padding-block: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-news__news { gap: 16px; padding-block: 18px; } } .p-top-news__date { padding-inline: 40px; border-right: 1px solid #E5ECE9; color: #fff; } @media screen and (max-width: 479px) { .p-top-news__date { padding-right: 14px; padding-left: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-news__date { padding-right: 14px; padding-left: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-news__date { padding-inline: 16px; } } .p-top-news__companyName { padding: 1px 20px; font-size: 0.625rem; background: #fff; color: var(--main-color); border-radius: 4px; width: fit-content; text-align: center; margin-bottom: 8px; display: inline-block; letter-spacing: 0.2em; } @media screen and (max-width: 479px) { .p-top-news__companyName { margin-bottom: 0px; padding: 4px 20px; line-height: 1em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-news__companyName { padding: 4px 20px; margin-bottom: 0px; line-height: 1em; } } .p-top-news__year { font-size: 0.875rem; } .p-top-news__days { font-size: 1.25rem; } .p-top-news__newsTtileWrapper { width: 100%; } .p-top-news__newsTitle { width: 100%; letter-spacing: 0.1em; } @media screen and (max-width: 479px) { .p-top-news__newsTitle { margin-top: 7px; font-size: 0.875rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-news__newsTitle { margin-top: 10px; font-size: 1rem; } } .p-top-news__newsLink { color: #fff; } .p-top-news__newsLink:hover { text-decoration: underline; } .p-top-news__line { position: absolute; background: #fff; width: 100%; z-index: 999; } .p-top-news__line:nth-child(2) { bottom: 4px; height: 3px; } .p-top-news__line:nth-child(3) { bottom: 14px; height: 4px; } .p-top-news__line:nth-child(4) { bottom: 24px; height: 2px; } .p-top-news__line:nth-child(5) { bottom: 36px; height: 1px; } .p-top-message { transition: filter 0.2s ease-out; position: relative; background: linear-gradient(to left, transparent -60%, transparent -60%, #fff 80%), linear-gradient(to bottom, transparent 60%, #fff 100%), url("../img/message.webp"); background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; height: 140vh; display: flex; align-items: center; will-change: transform; } @media screen and (max-width: 479px) { .p-top-message { height: unset; background: linear-gradient(to left, transparent 0%, transparent 0%, #fff 100%), url("../img/message.webp"); background: linear-gradient(to left, transparent -60%, transparent -60%, #fff 80%), linear-gradient(to bottom, transparent 60%, #fff 100%), url("../img/message.webp"); background-position: center top; background-attachment: fixed; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-message { height: unset; background: linear-gradient(to left, transparent 0%, transparent 0%, #fff 100%), url("../img/message.webp"); background: linear-gradient(to left, transparent -60%, transparent -60%, #fff 80%), linear-gradient(to bottom, transparent 60%, #fff 100%), url("../img/message.webp"); background-position: center top; background-attachment: fixed; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-message { height: unset; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-message { height: 120vh; } } .p-top-message__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-top-message__wrapper { max-width: 90%; padding-block: 96px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-message__wrapper { max-width: 90%; padding-block: 96px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-message__wrapper { padding-block: 64px; max-width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-message__wrapper { padding-block: 96px; max-width: 90%; } } .p-top-message__sectionItem { color: #fff; width: 580px; max-width: 100%; } .p-top-message__itemHead { font-size: 3rem; color: var(--main-color); font-family: "Noto Serif JP", serif; } @media screen and (max-width: 479px) { .p-top-message__itemHead { font-weight: 500; font-size: clamp(20px, 2rem, 7.5vw); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-message__itemHead { font-weight: 500; font-size: clamp(20px, 2rem, 7.5vw); } } .p-top-message__itemBody { font-size: 1rem; line-height: 2.5em; margin-top: 3.5em; color: var(--black-color); } .p-top-message__itemBody span { display: inline-block; } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-message__itemBody br { display: none !important; } } @media screen and (max-width: 479px) { .p-top-message__itemBody { font-family: "Noto Serif JP", serif; font-size: 4.5vw; font-weight: 500; margin-top: 32px; line-height: 1.7em; display: flex; gap: 18px; flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-message__itemBody { font-family: "Noto Serif JP", serif; font-size: 1.25rem; font-weight: 500; margin-top: 32px; line-height: 1.7em; display: flex; gap: 18px; flex-direction: column; } } .p-top-about { background: #fff; transition: background-color 0.8s ease; } .p-top-about.is-active { background: var(--main-color); } .p-top-about.is-active .p-top-about__link { color: #fff; border-top: 1px solid #fff; } .p-top-about.is-active .p-top-about__link-line { background: #fff; } .p-top-about.is-active .p-top-about__link-arrow { color: #fff; background: #fff; } .p-top-about.is-active .p-top-about__link-arrow:before { color: var(--main-color); } .p-top-about__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; margin-inline: auto; padding-bottom: 30px; padding-top: 64px; } @media screen and (max-width: 479px) { .p-top-about__wrapper { max-width: 90%; padding-block: 64px; padding-top: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-about__wrapper { max-width: 90%; padding-block: 64px; padding-top: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-about__wrapper { max-width: 90%; padding-block: 64px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-about__wrapper { padding-block: 96px; max-width: 90%; } } .p-top-about__content { margin-top: 32px; display: flex; gap: 64px; align-items: center; } @media screen and (max-width: 479px) { .p-top-about__content { gap: 32px; flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-about__content { gap: 32px; flex-direction: column; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-about__content { gap: 32px; flex-direction: column; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-about__content { gap: 48px; } } .p-top-about__aboutImg { width: 50%; border-radius: 20px; } @media screen and (max-width: 479px) { .p-top-about__aboutImg { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-about__aboutImg { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-about__aboutImg { width: 100%; } } .p-top-about__aboutImg img { height: 425px; object-fit: cover; border-radius: 20px; } @media screen and (max-width: 479px) { .p-top-about__aboutImg img { height: auto; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-about__aboutImg img { height: auto; } } .p-top-about__links { width: 50%; display: flex; flex-direction: column; color: var(--main-color); } @media screen and (max-width: 479px) { .p-top-about__links { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-about__links { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-about__links { width: 100%; flex-direction: row; flex-wrap: wrap; column-gap: 16px; } } .p-top-about__link { position: relative; display: flex; flex-direction: column; padding-block: 32px; padding-left: 60px; border-top: 1px solid var(--main-color); transition: 0.4s; gap: 4px; } @media screen and (max-width: 479px) { .p-top-about__link { padding-block: 24px; padding-left: 14px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-about__link { padding-block: 24px; padding-left: 14px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-about__link { width: calc((100% - 16px) / 2); padding-block: 24px; padding-left: 14px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-about__link:nth-child(3) { border-bottom: 1px solid; } } .p-top-about__link:last-child { border-bottom: 1px solid; } .p-top-about__link:hover { background: var(--main-color); color: #fff; } .p-top-about__link:hover .p-top-about__link-arrow { background: #fff; color: var(--main-color); } .p-top-about__link:hover .p-top-about__link-arrow::before { color: var(--main-color); } .p-top-about__link:hover .p-top-about__link-line { background: #fff; } .p-top-about__link-arrow { position: absolute; display: inline-block; vertical-align: middle; color: var(--main-color); line-height: 1; width: 35px; height: 35px; background: var(--main-color); border-radius: 50%; box-sizing: content-box; right: 60px; top: 50%; transform: translateY(-50%); transition: 0.4s; } @media screen and (max-width: 479px) { .p-top-about__link-arrow { width: 28px; height: 28px; right: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-about__link-arrow { width: 28px; height: 28px; right: 24px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-about__link-arrow { width: 28px; height: 28px; right: 24px; } } .p-top-about__link-arrow::before { content: ""; color: #fff; width: 0; height: 0; border-style: solid; border-color: transparent; border-width: 5px 8px; border-left-color: currentColor; border-right: 0; transform: translateX(15%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.4s; } .p-top-about__link-ja { font-size: 1.125rem; font-weight: 600; } .p-top-about__link-en { display: flex; align-items: center; gap: 10px; } .p-top-about__link-line { width: 24px; height: 1px; display: inline-block; background: var(--main-color); transition: 0.4s; } .p-top-about .js-about-img img { transition: opacity 0.6s ease; } .p-top-business { background: #fff; transition: background-color 0.8s ease; overflow: hidden; } .p-top-business.is-active { background: var(--main-color); } .p-top-business__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; margin-inline: auto; display: flex; align-items: center; } @media screen and (max-width: 479px) { .p-top-business__wrapper { max-width: 90%; padding-block: 64px; flex-direction: column; align-items: start; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-business__wrapper { max-width: 90%; padding-block: 64px; flex-direction: column; align-items: start; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business__wrapper { max-width: 90%; padding-block: 64px; padding-top: 0; flex-direction: column; align-items: start; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-business__wrapper { padding-block: 96px; max-width: 90%; } } .p-top-business__contentWrapper { width: 35%; } @media screen and (max-width: 479px) { .p-top-business__contentWrapper { width: 100%; display: contents; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-business__contentWrapper { width: 100%; display: contents; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business__contentWrapper { width: 100%; display: contents; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-business__contentWrapper { width: 40%; } } .p-top-business .c-sectionTitle { color: #fff; } .p-top-business .c-sectionTitle-line { background: #fff; } @media screen and (max-width: 479px) { .p-top-business__content { display: contents; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-business__content { display: contents; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business__content { display: contents; } } @media screen and (max-width: 479px) { .p-top-business__text { display: contents; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-business__text { display: contents; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business__text { display: contents; } } .p-top-business__secTit { font-size: 2.5rem; color: #fff; margin-top: 56px; } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business__secTit br { display: none; } } @media screen and (max-width: 479px) { .p-top-business__secTit { font-size: 2rem; margin-top: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-business__secTit { font-size: 2rem; margin-top: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business__secTit { font-size: 2rem; margin-top: 32px; } } .p-top-business__secDesc { font-size: 1rem; color: #fff; margin-top: 40px; line-height: 2em; } @media screen and (max-width: 479px) { .p-top-business__secDesc { line-height: 1.8em; margin-top: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-business__secDesc { line-height: 1.8em; margin-top: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business__secDesc { line-height: 1.8em; margin-top: 20px; } } @media screen and (max-width: 479px) { .p-top-business .c-viewAllBtn { order: 1; margin-top: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-business .c-viewAllBtn { order: 1; margin-top: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business .c-viewAllBtn { order: 1; margin-top: 20px; } } .p-top-business__businessImg { width: 65%; position: relative; right: -5%; } @media screen and (max-width: 479px) { .p-top-business__businessImg { width: 115%; right: 7%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-business__businessImg { width: 115%; right: 7%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-business__businessImg { width: 100%; right: 0%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-business__businessImg { width: 70%; right: -3%; } } .p-top-sustainability__bg { width: 1180px; max-width: 100%; margin-block: 128px; margin-inline: auto; display: flex; justify-content: center; background-image: url("../img/sustainability/sustainability_subMenu01.jpg"); background-size: cover; border-radius: 20px; } @media screen and (max-width: 479px) { .p-top-sustainability__bg { margin-block: 0; border-radius: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability__bg { margin-block: 0; border-radius: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability__bg { margin-block: 0; border-radius: 0; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-sustainability__bg { margin-block: 96px; max-width: 90%; } } .p-top-sustainability__wrapper { width: calc(100% - 128px); display: flex; align-items: center; justify-content: space-between; gap: 40px; background: #fff; padding: 48px; margin-block: 48px; border-radius: 20px; } @media screen and (max-width: 479px) { .p-top-sustainability__wrapper { margin-block: 64px; width: 90%; flex-direction: column; padding: 24px; align-items: start; gap: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability__wrapper { margin-block: 64px; width: 90%; flex-direction: column; padding: 24px; align-items: start; gap: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability__wrapper { margin-block: 64px; width: 90%; flex-direction: column; padding: 48px; align-items: start; gap: 0; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-sustainability__wrapper { width: calc(100% - 96px); } } @media screen and (max-width: 479px) { .p-top-sustainability__content { display: contents; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability__content { display: contents; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability__content { display: contents; } } .p-top-sustainability__contentWrapper { width: 45%; } @media screen and (max-width: 479px) { .p-top-sustainability__contentWrapper { width: 100%; display: contents; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability__contentWrapper { width: 100%; display: contents; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability__contentWrapper { width: 100%; display: contents; } } .p-top-sustainability .c-sectionTitle-en { font-size: 3.5rem; } @media screen and (max-width: 479px) { .p-top-sustainability .c-sectionTitle-en { font-size: 2.5rem; font-size: 12vw; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability .c-sectionTitle-en { font-size: 2.5rem; font-size: 12vw; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability .c-sectionTitle-en { font-size: 5rem; } } .p-top-sustainability .c-sectionTitle-ja { font-size: 1.125rem; } @media screen and (max-width: 479px) { .p-top-sustainability .c-sectionTitle-ja { font-size: 0.875rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability .c-sectionTitle-ja { font-size: 0.875rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability .c-sectionTitle-ja { font-size: 0.875rem; } } .p-top-sustainability__secDesc { font-size: 1rem; color: var(--main-color); margin-top: 40px; line-height: 2em; } @media screen and (max-width: 479px) { .p-top-sustainability__secDesc { margin-top: 32px; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability__secDesc { margin-top: 32px; line-height: 1.8em; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability__secDesc { margin-top: 32px; line-height: 1.8em; } } .p-top-sustainability__sustainabilityImg { width: 55%; } @media screen and (max-width: 479px) { .p-top-sustainability__sustainabilityImg { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability__sustainabilityImg { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability__sustainabilityImg { width: 100%; } } .p-top-sustainability__sustainabilityImg img { margin-top: 20px; width: 100%; } @media screen and (max-width: 479px) { .p-top-sustainability__viewAllBtn { order: 1; margin-top: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-sustainability__viewAllBtn { order: 1; margin-top: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-sustainability__viewAllBtn { order: 1; margin-top: 20px; } } .p-top-sustainability__viewAllBtn:hover { border: solid 1px var(--main-color); } .p-top-sustainability-line { background: #fff; } .p-top-recruit { position: relative; } .p-top-recruit:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(8.01%, #35405C), to(rgba(54, 64, 91, 0))); z-index: 3; } @media screen and (max-width: 479px) { .p-top-recruit:after { background: -webkit-gradient(linear, left top, right top, color-stop(10%, #35405C), to(rgba(54, 64, 91, 0))); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit:after { background: -webkit-gradient(linear, left top, right top, color-stop(10%, #35405C), to(rgba(54, 64, 91, 0))); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit:after { background: -webkit-gradient(linear, left top, right top, color-stop(10%, #35405C), to(rgba(54, 64, 91, 0))); } } .p-top-recruit__bg { width: 100%; margin-top: 128px; margin-inline: auto; display: flex; justify-content: center; background: var(--black-color); background-size: cover; position: relative; overflow: hidden; } @media screen and (max-width: 479px) { .p-top-recruit__bg { margin-top: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit__bg { margin-top: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit__bg { margin-top: 0; } } .p-top-recruit__wrapper { padding-block: 48px; margin-block: 48px; width: 1180px; max-width: 100%; height: 100vh; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 9; } @media screen and (max-width: 479px) { .p-top-recruit__wrapper { max-width: 90%; padding-block: 64px; margin-block: 0px; height: auto; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit__wrapper { max-width: 90%; padding-block: 64px; margin-block: 0px; height: auto; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit__wrapper { max-width: 90%; padding-block: 64px; margin-block: 0px; height: auto; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-recruit__wrapper { max-width: 90%; } } .p-top-recruit__contentWrapper { width: 50%; } @media screen and (max-width: 479px) { .p-top-recruit__contentWrapper { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit__contentWrapper { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit__contentWrapper { width: 100%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-recruit__contentWrapper { width: 60%; } } .p-top-recruit .c-sectionTitle { color: #fff; } .p-top-recruit .c-sectionTitle-line { background: #fff; } .p-top-recruit__secTit { margin-top: 56px; color: #fff; font-size: 4.5rem; font-family: "Noto Serif JP", serif; } @media screen and (max-width: 479px) { .p-top-recruit__secTit { margin-top: 32px; font-size: 48px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit__secTit { margin-top: 32px; font-size: 48px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit__secTit { margin-top: 32px; font-size: 48px; } } .p-top-recruit__secDesc { font-size: 1rem; color: #fff; margin-top: 40px; line-height: 2em; text-shadow: 3px 3px 5px black; } @media screen and (max-width: 479px) { .p-top-recruit__secDesc { margin-top: 24px; line-height: 1.8em; display: flex; flex-direction: column; gap: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit__secDesc { margin-top: 24px; line-height: 1.8em; display: flex; flex-direction: column; gap: 16px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit__secDesc { margin-top: 24px; line-height: 1.8em; display: flex; flex-direction: column; gap: 16px; } } .p-top-recruit__sustainabilityImg { width: 55%; } .p-top-recruit__sustainabilityImg img { width: 100%; } .p-top-recruit__viewAllBtn { border: unset; } @media screen and (max-width: 479px) { .p-top-recruit__viewAllBtn { margin-top: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit__viewAllBtn { margin-top: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit__viewAllBtn { margin-top: 20px; } } .p-top-recruit__viewAllBtn:hover { border: var(--main-color); } .p-top-recruit__slider { display: flex; overflow: hidden; justify-content: space-between; align-items: center; flex-wrap: wrap; position: absolute; top: -45rem; right: -45vw; z-index: 2; transform: rotate(30deg); transform-origin: left top; gap: 16px; } @media screen and (max-width: 479px) { .p-top-recruit__slider { top: -65%; right: -200%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit__slider { top: -65%; right: -100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit__slider { top: -65%; right: -65%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-top-recruit__slider { right: -80vw; } } .p-top-recruit__slideContainer { gap: 16px; display: flex; flex-direction: column; } .p-top-recruit__slideWrapper { display: flex; flex-direction: column; gap: 16px; animation: slide-flow 30s infinite linear 1s both; } .p-top-recruit__slide { width: 420px; object-fit: cover; } @media screen and (max-width: 479px) { .p-top-recruit__slide { width: 280px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-top-recruit__slide { width: 280px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-top-recruit__slide { width: 280px; } } .p-top-recruit__sliderItem { display: flex; gap: 16px; flex-direction: column; } .p-top-recruit__sliderItem:nth-child(2) .p-top-recruit__slideWrapper { animation: slide-flow-reverse 30s infinite linear 1s both; } @keyframes slide-flow { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes slide-flow-reverse { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @-webkit-keyframes infinity-scroll-left1 { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes infinity-scroll-left1 { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } } @-webkit-keyframes infinity-scroll-left2 { 0% { transform: translateX(0%); } to { transform: translateX(-200%); } } @keyframes infinity-scroll-left2 { 0% { transform: translateX(0%); } to { transform: translateX(-200%); } } @-webkit-keyframes infinity-scroll-left3 { 0% { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes infinity-scroll-left3 { 0% { transform: translateX(-100%); } to { transform: translateX(100%); } } @-webkit-keyframes infinity-scroll-left4 { 0% { transform: translateX(-200%); } to { transform: translateX(0%); } } @keyframes infinity-scroll-left4 { 0% { transform: translateX(-200%); } to { transform: translateX(0%); } } _::-webkit-full-page-media, _:future, :root .p-top-message { background-attachment: unset; } .p-aboutUs-pageMenu__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 96px; } @media screen and (max-width: 479px) { .p-aboutUs-pageMenu__wrapper { width: 90%; padding-block: 64px; flex-direction: column; gap: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-aboutUs-pageMenu__wrapper { width: 90%; padding-block: 64px; flex-direction: column; gap: 48px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-aboutUs-pageMenu__wrapper { width: 90%; padding-block: 64px; flex-direction: unset; gap: 32px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-aboutUs-pageMenu__wrapper { width: 90%; gap: 48px; padding-block: 96px; } } .p-aboutUs-pageMenu__link { width: 50%; width: calc(50% - 48px); display: inline-block; } @media screen and (max-width: 479px) { .p-aboutUs-pageMenu__link { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-aboutUs-pageMenu__link { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-aboutUs-pageMenu__link { width: calc(50% - 24px); } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-aboutUs-pageMenu__link { width: calc(50% - 24px); } } .p-aboutUs-pageMenu__link:hover .p-aboutUs-pageMenu__linkImg img { transform: scale(1.1); filter: brightness(0.7); } .p-aboutUs-pageMenu__group { display: flex; margin-top: 16px; align-items: center; } @media screen and (max-width: 479px) { .p-aboutUs-pageMenu__group { margin-top: 8px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-aboutUs-pageMenu__group { margin-top: 8px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-aboutUs-pageMenu__group { margin-top: 8px; } } .p-aboutUs-pageMenu__link-arrow { display: inline-block; vertical-align: middle; color: #fff; line-height: 1; width: 35px; height: 35px; background: var(--main-color); border-radius: 50%; box-sizing: content-box; transform: translateY(0%); margin-right: 16px; } .p-aboutUs-pageMenu__link-arrow::before { content: ""; color: #fff; width: 0; height: 0; border-style: solid; border-color: transparent; border-width: 5px 8px; border-left-color: currentColor; border-right: 0; transform: translateX(15%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.4s; } .p-aboutUs-pageMenu__linkImg { overflow: hidden; display: inline-block; width: 100%; border-radius: 18px; vertical-align: bottom; } @media screen and (max-width: 479px) { .p-aboutUs-pageMenu__linkImg { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-aboutUs-pageMenu__linkImg { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-aboutUs-pageMenu__linkImg { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } .p-aboutUs-pageMenu__linkImg img { width: 100%; vertical-align: bottom; transition: 0.3s ease-out; transform: scale(1); } .p-aboutUs-pageMenu__text-ja { color: var(--main-color); display: flex; align-items: center; font-size: 1rem; font-weight: 600; } .p-aboutUs-pageMenu__text-en { font-size: 0.875rem; } .p-philosophy-pageMenu { margin-top: 48px; margin-bottom: 96px; border-bottom: 1px solid #E3E3E3; } @media screen and (max-width: 479px) { .p-philosophy-pageMenu { border-bottom: unset; margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu { border-bottom: unset; margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-philosophy-pageMenu { margin-bottom: 64px; } } .p-philosophy-pageMenu__wrapper { width: 1180px; max-width: 100%; margin-inline: auto; } @media screen and (max-width: 479px) { .p-philosophy-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-philosophy-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-philosophy-pageMenu__wrapper { width: 90%; } } .p-philosophy-pageMenu__menuList { display: flex; justify-content: space-around; } @media screen and (max-width: 479px) { .p-philosophy-pageMenu__menuList { flex-wrap: wrap; gap: 10px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__menuList { flex-wrap: wrap; gap: 10px; } } .p-philosophy-pageMenu__menuItem { padding-bottom: 16px; padding-inline: 32px; border-bottom: 3px solid #fff; transition: 0.4s; box-sizing: content-box; } @media screen and (max-width: 479px) { .p-philosophy-pageMenu__menuItem { font-size: 0.9375rem; background: #f0f0f0; padding: 16px 32px; border-radius: 32px; border-bottom: unset; position: relative; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-philosophy-pageMenu__menuItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 8px; height: 8px; border-top: 1px solid var(--black-color); border-right: 1px solid var(--black-color); transform: rotate(404deg); } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-philosophy-pageMenu__menuItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 13px; height: 1px; background: var(--black-color); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__menuItem { font-size: 0.9375rem; background: #f0f0f0; padding: 16px 32px; border-radius: 32px; border-bottom: unset; position: relative; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__menuItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 8px; height: 8px; border-top: 1px solid var(--black-color); border-right: 1px solid var(--black-color); transform: rotate(404deg); } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__menuItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 13px; height: 1px; background: var(--black-color); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-philosophy-pageMenu__menuItem { padding-inline: 20px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-philosophy-pageMenu__menuItem { padding-inline: 24px; } } @media (any-hover: hover) { .p-philosophy-pageMenu__menuItem:hover { border-bottom: 3px solid var(--main-color); opacity: 0.7; } } @media screen and (any-hover: hover) and (max-width: 479px) { .p-philosophy-pageMenu__menuItem:hover { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (any-hover: hover) and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__menuItem:hover { background-color: var(--main-color); color: #fff; border-bottom: unset; } } .p-philosophy-pageMenu__menuItem-current { font-weight: 600; color: var(--main-color); border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-philosophy-pageMenu__menuItem-current { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-philosophy-pageMenu__menuItem-current::before { border-top: 1px solid #fff; border-right: 1px solid #fff; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-philosophy-pageMenu__menuItem-current::after { background: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__menuItem-current { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__menuItem-current::before { border-top: 1px solid #fff; border-right: 1px solid #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__menuItem-current::after { background: #fff; } } @media screen and (max-width: 479px) { .p-philosophy-pageMenu__link { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu__link { width: 100%; } } .p-philosophy-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid #fff; } @media screen and (max-width: 479px) { .p-philosophy-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-philosophy-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-philosophy-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-philosophy-philosophy__wrapper { width: 1180px; max-width: 100%; padding-bottom: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-philosophy-philosophy__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-philosophy__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-philosophy-philosophy__wrapper { padding-bottom: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-philosophy-philosophy__wrapper { padding-bottom: 96px; width: 90%; } } .p-philosophy-philosophy__shaze img { margin-block: 72px; margin-inline: auto; display: flex; max-width: 500px; } @media screen and (max-width: 479px) { .p-philosophy-philosophy__shaze img { margin-block: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-philosophy-philosophy__shaze img { margin-block: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-philosophy-philosophy__shaze img { margin-block: 56px; } } .p-philosophy-philosophy__rinen { line-height: 2em; } .p-history-pageMenu { margin-top: 48px; margin-bottom: 96px; border-bottom: 1px solid #E3E3E3; } @media screen and (max-width: 479px) { .p-history-pageMenu { border-bottom: unset; margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu { border-bottom: unset; margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-pageMenu { margin-bottom: 64px; } } .p-history-pageMenu__wrapper { width: 1180px; max-width: 100%; margin-inline: auto; } @media screen and (max-width: 479px) { .p-history-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-pageMenu__wrapper { width: 90%; } } .p-history-pageMenu__menuList { display: flex; justify-content: space-around; } @media screen and (max-width: 479px) { .p-history-pageMenu__menuList { flex-wrap: wrap; gap: 10px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__menuList { flex-wrap: wrap; gap: 10px; } } .p-history-pageMenu__menuItem { padding-bottom: 16px; padding-inline: 32px; border-bottom: 3px solid #fff; transition: 0.4s; box-sizing: content-box; } @media screen and (max-width: 479px) { .p-history-pageMenu__menuItem { font-size: 0.9375rem; background: #f0f0f0; padding: 16px 32px; border-radius: 32px; border-bottom: unset; position: relative; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-history-pageMenu__menuItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 8px; height: 8px; border-top: 1px solid var(--black-color); border-right: 1px solid var(--black-color); transform: rotate(404deg); } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-history-pageMenu__menuItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 13px; height: 1px; background: var(--black-color); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__menuItem { font-size: 0.9375rem; background: #f0f0f0; padding: 16px 32px; border-radius: 32px; border-bottom: unset; position: relative; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__menuItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 8px; height: 8px; border-top: 1px solid var(--black-color); border-right: 1px solid var(--black-color); transform: rotate(404deg); } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__menuItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 13px; height: 1px; background: var(--black-color); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-pageMenu__menuItem { padding-inline: 20px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-pageMenu__menuItem { padding-inline: 24px; } } @media (any-hover: hover) { .p-history-pageMenu__menuItem:hover { border-bottom: 3px solid var(--main-color); opacity: 0.7; } } @media screen and (any-hover: hover) and (max-width: 479px) { .p-history-pageMenu__menuItem:hover { background-color: var(--main-color); color: #fff; border-bottom: unset; } } .p-history-pageMenu__menuItem-current { font-weight: 600; color: var(--main-color); border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-history-pageMenu__menuItem-current { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-history-pageMenu__menuItem-current::before { border-top: 1px solid #fff; border-right: 1px solid #fff; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-history-pageMenu__menuItem-current::after { background: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__menuItem-current { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__menuItem-current::before { border-top: 1px solid #fff; border-right: 1px solid #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__menuItem-current::after { background: #fff; } } @media screen and (max-width: 479px) { .p-history-pageMenu__link { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu__link { width: 100%; } } .p-history-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid #fff; } @media screen and (max-width: 479px) { .p-history-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-history-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-history-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-history-story__wrapper { max-width: 100%; overflow: hidden; padding-bottom: 128px; } @media screen and (max-width: 479px) { .p-history-story__wrapper { width: 100%; padding-block: 64px; padding-bottom: 0; margin-inline: auto; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story__wrapper { width: 100%; padding-block: 64px; padding-bottom: 0; margin-inline: auto; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story__wrapper { width: 100%; padding-block: 0px; margin-inline: auto; } } .p-history-story .c-sectionTitle { width: 1180px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-history-story .c-sectionTitle { width: 90%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .c-sectionTitle { width: 90%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .c-sectionTitle { width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .c-sectionTitle { width: 90%; } } .p-history-story .p-history-startupPhase { margin-top: 72px; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase { margin-top: 32px; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase { margin-top: 32px; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase { margin-top: 32px; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase { margin-top: 32px; font-family: "Noto Serif JP", serif; } } .p-history-story .p-history-startupPhase__wrapper { display: flex; justify-content: end; gap: 32px; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase__wrapper { flex-direction: column-reverse; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase__wrapper { flex-direction: column-reverse; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase__wrapper { flex-direction: column-reverse; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase__wrapper { flex-direction: column-reverse; } } .p-history-story .p-history-startupPhase__img { width: 50%; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase__img { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase__img { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase__img { width: 100%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase__img { width: 100%; } } .p-history-story .p-history-startupPhase__textContent { width: 50%; font-family: serif; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase__textContent { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase__textContent { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase__textContent { width: 100%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase__textContent { width: 100%; } } .p-history-story .p-history-startupPhase__sectionTitleWrapper { margin-bottom: 144px; position: relative; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase__sectionTitleWrapper { width: 90%; margin-inline: auto; margin-bottom: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase__sectionTitleWrapper { width: 90%; margin-inline: auto; margin-bottom: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase__sectionTitleWrapper { width: 90%; margin-inline: auto; margin-bottom: 32px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase__sectionTitleWrapper { width: 90%; margin-inline: auto; margin-bottom: 32px; } } .p-history-story .p-history-startupPhase__sectionTitle { font-size: 2.8125rem; color: #d5d5d5; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase__sectionTitle { font-family: "Noto Serif JP", serif; font-size: 2rem; position: relative; top: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase__sectionTitle { font-family: "Noto Serif JP", serif; font-size: 2rem; position: relative; top: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase__sectionTitle { font-family: "Noto Serif JP", serif; font-size: 2rem; position: relative; top: 20px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase__sectionTitle { font-family: "Noto Serif JP", serif; font-size: 2rem; position: relative; top: 20px; } } .p-history-story .p-history-startupPhase__sectionTitle-en { width: 100vw; display: inline-block; position: absolute; bottom: -120px; font-size: 6.25rem; color: #d5d5d5; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase__sectionTitle-en { width: 100%; position: unset; font-family: "Noto Serif JP", serif; font-size: 3.125rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase__sectionTitle-en { width: 100%; position: unset; font-family: "Noto Serif JP", serif; font-size: 4.5rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase__sectionTitle-en { width: 100%; position: unset; font-family: "Noto Serif JP", serif; font-size: 4.5rem; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase__sectionTitle-en { width: 100%; position: unset; font-family: "Noto Serif JP", serif; font-size: 4.5rem; } } .p-history-story .p-history-startupPhase__sectionSubTitle { font-size: 2rem; font-weight: 600; color: var(--main-color); margin-bottom: 20px; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase__sectionSubTitle { width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase__sectionSubTitle { width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase__sectionSubTitle { width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase__sectionSubTitle { width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } .p-history-story .p-history-startupPhase__sectionDesc { line-height: 2em; width: 495px; } @media screen and (max-width: 479px) { .p-history-story .p-history-startupPhase__sectionDesc { line-height: 1.8em; width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-startupPhase__sectionDesc { line-height: 1.8em; width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-startupPhase__sectionDesc { line-height: 1.8em; width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-startupPhase__sectionDesc { line-height: 1.8em; width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } .p-history-story .p-history-developmentPhase { font-family: serif; margin-top: 148px; width: 1180px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase { width: 90%; margin-inline: auto; margin-top: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase { width: 90%; margin-inline: auto; margin-top: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase { width: 90%; margin-inline: auto; margin-top: 32px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-developmentPhase { width: 90%; margin-inline: auto; margin-top: 32px; } } .p-history-story .p-history-developmentPhase__sectionTitleWrapper { position: relative; writing-mode: vertical-rl; } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase__sectionTitleWrapper { writing-mode: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase__sectionTitleWrapper { writing-mode: unset; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase__sectionTitleWrapper { writing-mode: unset; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-developmentPhase__sectionTitleWrapper { writing-mode: unset; } } .p-history-story .p-history-developmentPhase__sectionTitle { font-size: 2.8125rem; color: #d5d5d5; } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase__sectionTitle { font-family: "Noto Serif JP", serif; font-size: 2rem; position: relative; top: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase__sectionTitle { font-family: "Noto Serif JP", serif; font-size: 2rem; position: relative; top: 20px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase__sectionTitle { font-family: "Noto Serif JP", serif; font-size: 2rem; position: relative; top: 20px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-developmentPhase__sectionTitle { font-family: "Noto Serif JP", serif; font-size: 2rem; position: relative; top: 20px; } } .p-history-story .p-history-developmentPhase__sectionTitle-en { display: inline-block; position: absolute; left: -118px; font-size: 6.25rem; color: #d5d5d5; height: 100vh; } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase__sectionTitle-en { position: unset; font-family: "Noto Serif JP", serif; font-size: 3.125rem; height: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase__sectionTitle-en { position: unset; font-family: "Noto Serif JP", serif; font-size: 4.5rem; height: unset; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase__sectionTitle-en { position: unset; font-family: "Noto Serif JP", serif; font-size: 4.5rem; height: unset; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-developmentPhase__sectionTitle-en { position: unset; font-family: "Noto Serif JP", serif; font-size: 4.5rem; height: unset; margin-bottom: 16px; } } .p-history-story .p-history-developmentPhase__wrapper { display: flex; justify-content: space-between; } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase__wrapper { flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase__wrapper { flex-direction: column; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase__wrapper { flex-direction: column; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-developmentPhase__wrapper { flex-direction: column; } } @media screen and (min-width: 1280px) { .p-history-story .p-history-developmentPhase__wrapper { gap: 32px; justify-content: flex-end; } } .p-history-story .p-history-developmentPhase__itemList { width: 90%; display: flex; gap: 32px; flex-wrap: wrap; } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase__itemList { width: 100%; flex-direction: column; margin-top: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase__itemList { width: 100%; flex-direction: column; margin-top: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase__itemList { width: 100%; flex-direction: column; margin-top: 32px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-developmentPhase__itemList { width: 100%; } } .p-history-story .p-history-developmentPhase__item { width: calc(50% - 16px); } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase__item { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase__item { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase__item { width: 100%; } } .p-history-story .p-history-developmentPhase__itemTitle { background: var(--main-color); color: #fff; text-align: center; padding-block: 5px; } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase__itemTitle { font-size: 0.9375rem; padding-block: 8px; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase__itemTitle { font-size: 0.9375rem; padding-block: 8px; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase__itemTitle { font-size: 0.9375rem; padding-block: 8px; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-developmentPhase__itemTitle { font-size: 0.9375rem; padding-block: 8px; font-family: "Noto Serif JP", serif; } } .p-history-story .p-history-developmentPhase__itemDesc { padding: 8px 4px; line-height: 2em; } @media screen and (max-width: 479px) { .p-history-story .p-history-developmentPhase__itemDesc { font-family: "Noto Serif JP", serif; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-developmentPhase__itemDesc { font-family: "Noto Serif JP", serif; line-height: 1.8em; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-developmentPhase__itemDesc { font-family: "Noto Serif JP", serif; line-height: 1.8em; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-developmentPhase__itemDesc { font-family: "Noto Serif JP", serif; line-height: 1.8em; } } .p-history-story .p-history-nowadays { background-image: linear-gradient(to top, rgb(255, 255, 255) 0%, transparent 80%), linear-gradient(to bottom, rgb(255, 255, 255) 0%, transparent 80%), url(../img/aboutus/his-bg.webp); background-size: cover; padding-block: 200px; height: 80vh; margin-top: 150px; } @media screen and (max-width: 479px) { .p-history-story .p-history-nowadays { margin-top: 64px; padding-block: 80px; height: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-nowadays { margin-block: 32px; padding-block: 80px; height: unset; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-nowadays { margin-block: 32px; padding-block: 80px; height: unset; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-nowadays { margin-bottom: 80px; } } .p-history-story .p-history-nowadays__wrapper { font-family: serif; width: 1180px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-history-story .p-history-nowadays__wrapper { width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-nowadays__wrapper { width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-nowadays__wrapper { width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-story .p-history-nowadays__wrapper { width: 90%; margin-inline: auto; font-family: "Noto Serif JP", serif; } } .p-history-story .p-history-nowadays__sectionSubTitle { font-size: 2.625rem; color: var(--main-color); margin-bottom: 32px; } .p-history-story .p-history-nowadays__desc { line-height: 2.5em; } @media screen and (max-width: 479px) { .p-history-story .p-history-nowadays__desc { line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-story .p-history-nowadays__desc { line-height: 1.8em; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-story .p-history-nowadays__desc { line-height: 1.8em; } } .p-history-history { position: relative; } .p-history-history__wrapper { width: 1180px; margin-inline: auto; padding-bottom: 128px; } @media screen and (max-width: 479px) { .p-history-history__wrapper { width: 90%; padding-bottom: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__wrapper { width: 90%; padding-bottom: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__wrapper { padding-bottom: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-history__wrapper { padding-bottom: 96px; width: 90%; } } .p-history-history__body { display: flex; flex-direction: column; row-gap: 32px; margin-top: 96px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-history-history__body { width: 100%; margin-top: 32px; padding: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__body { width: 100%; margin-top: 48px; padding: 48px 0px; padding-top: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__body { width: 100%; margin-top: 48px; padding: 0px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-history__body { width: 100%; } } .p-history-history__timeline { position: relative; } .p-history-history__line { position: absolute; top: 0%; left: 0; height: 100%; border-left: 3px solid var(--main-color); } @media screen and (max-width: 479px) { .p-history-history__line { border-left: 0.1px solid #b1b1b1; left: 16px; height: 102%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__line { border-left: 0.1px solid #b1b1b1; left: 16px; height: 102%; } } .p-history-history__dataList { display: flex; flex-direction: column; row-gap: 48px; padding-left: 60px; } @media screen and (max-width: 479px) { .p-history-history__dataList { row-gap: 30px; padding-left: 40px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__dataList { row-gap: 30px; padding-left: 48px; } } .p-history-history__item { display: flex; flex-direction: column; row-gap: 16px; background: #f9f9f9; padding: 32px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 479px) { .p-history-history__item { row-gap: 0px; padding: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__item { row-gap: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__item { row-gap: 0px; } } .p-history-history__dataTerm { position: relative; display: flex; align-items: center; font-size: 1rem; color: #fff; width: fit-content; background: var(--main-color); padding-inline: 2em; padding-block: 0.2em; border-radius: 16px; } @media screen and (max-width: 479px) { .p-history-history__dataTerm { font-size: 0.75rem; padding: 3px 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__dataTerm { font-size: 0.875rem; padding: 4px 16px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__dataTerm { font-size: 0.875rem; padding: 4px 16px; } } .p-history-history__dataTerm::before { position: absolute; left: -102px; display: inline-block; content: ""; width: 21px; height: 21px; border-radius: 50%; background: var(--main-color); } @media screen and (max-width: 479px) { .p-history-history__dataTerm::before { left: -48px; width: 17px; height: 17px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__dataTerm::before { left: -74px; } } @media screen and (max-width: 479px) { .p-history-history__dataDesc { font-size: 0.875rem; margin-top: 10px; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__dataDesc { font-size: 1rem; margin-top: 10px; line-height: 1.8em; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__dataDesc { font-size: 1rem; margin-top: 10px; line-height: 1.8em; } } .p-history-history__imgWrapper { display: flex; gap: 24px; } @media screen and (max-width: 479px) { .p-history-history__imgWrapper { flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__imgWrapper { flex-direction: column; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__imgWrapper { flex-direction: column; } } .p-history-history__img { max-width: 450px; } @media screen and (max-width: 479px) { .p-history-history__img { width: 100%; margin-top: 10px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__img { width: 100%; margin-top: 10px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__img { width: 100%; margin-top: 10px; max-width: 100%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-history-history__img { min-width: 350px; } } .p-history-history__img img { height: 250px; object-fit: cover; } @media screen and (max-width: 479px) { .p-history-history__img img { height: auto; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__img img { height: auto; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__img img { height: auto; } } .p-history-history__imgDesc { font-size: 0.875rem; color: #2f2f2f; } @media screen and (max-width: 479px) { .p-history-history__imgDesc { margin-top: 2px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-history-history__imgDesc { margin-top: 4px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-history-history__imgDesc { margin-top: 4px; } } .p-data-pageMenu { margin-top: 48px; margin-bottom: 96px; border-bottom: 1px solid #E3E3E3; } @media screen and (max-width: 479px) { .p-data-pageMenu { border-bottom: unset; margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu { border-bottom: unset; margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-data-pageMenu { margin-bottom: 64px; } } .p-data-pageMenu__wrapper { width: 1180px; max-width: 100%; margin-inline: auto; } @media screen and (max-width: 479px) { .p-data-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-data-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-data-pageMenu__wrapper { width: 90%; } } .p-data-pageMenu__menuList { display: flex; justify-content: space-around; } @media screen and (max-width: 479px) { .p-data-pageMenu__menuList { flex-wrap: wrap; gap: 10px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__menuList { flex-wrap: wrap; gap: 10px; } } .p-data-pageMenu__menuItem { padding-bottom: 16px; padding-inline: 32px; border-bottom: 3px solid #fff; transition: 0.4s; box-sizing: content-box; } @media screen and (max-width: 479px) { .p-data-pageMenu__menuItem { font-size: 0.9375rem; background: #f0f0f0; padding: 16px 32px; border-radius: 32px; border-bottom: unset; position: relative; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-data-pageMenu__menuItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 8px; height: 8px; border-top: 1px solid var(--black-color); border-right: 1px solid var(--black-color); transform: rotate(404deg); } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-data-pageMenu__menuItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 13px; height: 1px; background: var(--black-color); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__menuItem { font-size: 0.9375rem; background: #f0f0f0; padding: 16px 32px; border-radius: 32px; border-bottom: unset; position: relative; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__menuItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 8px; height: 8px; border-top: 1px solid var(--black-color); border-right: 1px solid var(--black-color); transform: rotate(404deg); } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__menuItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 13px; height: 1px; background: var(--black-color); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-data-pageMenu__menuItem { padding-inline: 20px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-data-pageMenu__menuItem { padding-inline: 24px; } } @media (any-hover: hover) { .p-data-pageMenu__menuItem:hover { border-bottom: 3px solid var(--main-color); opacity: 0.7; } } @media screen and (any-hover: hover) and (max-width: 479px) { .p-data-pageMenu__menuItem:hover { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (any-hover: hover) and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__menuItem:hover { background-color: var(--main-color); color: #fff; border-bottom: unset; } } .p-data-pageMenu__menuItem-current { font-weight: 600; color: var(--main-color); border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-data-pageMenu__menuItem-current { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-data-pageMenu__menuItem-current::before { border-top: 1px solid #fff; border-right: 1px solid #fff; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-data-pageMenu__menuItem-current::after { background: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__menuItem-current { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__menuItem-current::before { border-top: 1px solid #fff; border-right: 1px solid #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__menuItem-current::after { background: #fff; } } @media screen and (max-width: 479px) { .p-data-pageMenu__link { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu__link { width: 100%; } } .p-data-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid #fff; } @media screen and (max-width: 479px) { .p-data-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-data-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-data-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-data-data__wrapper { width: 1180px; padding-bottom: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-data-data__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-data__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-data-data__wrapper { padding-bottom: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-data-data__wrapper { padding-bottom: 96px; width: 90%; } } .p-data-data__img img { height: 140px; object-fit: contain; } .p-data-data__list { margin-top: 72px; display: flex; flex-wrap: wrap; gap: 24px; } @media screen and (max-width: 479px) { .p-data-data__list { margin-top: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-data__list { margin-top: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-data-data__list { margin-top: 56px; } } .p-data-data__item { width: calc((100% - 72px) / 4); padding-block: 32px; padding-inline: 16px; display: flex; flex-direction: column; align-items: center; box-shadow: 0px 0px 15px -5px #777777; border-radius: 10px; } @media screen and (max-width: 479px) { .p-data-data__item { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-data__item { width: calc((100% - 24px) / 2); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-data-data__item { width: calc((100% - 24px) / 2); } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-data-data__item { width: calc((100% - 24px) / 2); } } .p-data-data__itemName { background: var(--main-color); color: #fff; width: fit-content; padding-block: 6px; padding-inline: 40px; border-radius: 5px; margin-top: 24px; font-size: 1.375rem; } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-data__itemName { font-size: 1.125rem; padding-inline: 20px; } } .p-data-data__num { color: var(--main-color); font-size: 4.375rem; font-weight: 600; } @media screen and (max-width: 479px) { .p-data-data__num { display: inline-block; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-data__num { font-size: 3rem; display: inline-block; } } .p-data-data__numBody { vertical-align: bottom; display: flex; align-items: baseline; } @media screen and (max-width: 479px) { .p-data-data__numBody { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-data__numBody { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; } } .p-data-data__leftText, .p-data-data__rightText { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; font-size: 1.25rem; font-weight: 600; } @media screen and (max-width: 479px) { .p-data-data__leftText, .p-data-data__rightText { font-size: 1.5rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-data__leftText, .p-data-data__rightText { writing-mode: unset; font-size: 1rem; } } .p-data-data__comment { font-size: 0.875rem; } @media screen and (max-width: 479px) { .p-data-data__comment { font-size: 1rem; margin-top: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-data-data__comment { font-size: 0.75rem; margin-top: 10px; } } @supports (not (-webkit-touch-callout: none)) and (-webkit-appearance: none) { @media screen and (max-width: 479px) { .p-data-data__leftText, .p-data-data__rightText { position: relative; top: -17px; } } } /* Firefox のみ*/ @-moz-document url-prefix() { @media screen and (max-width: 479px) { .p-data-data__leftText, .p-data-data__rightText { position: relative; top: unset; } } } @media screen and (max-width: 479px) { _::-webkit-full-page-media, _:future, :root .p-data-data__numBody { margin-top: 16px; display: flex; align-items: end; } } @media screen and (min-width: 480px) and (max-width: 767px) { _::-webkit-full-page-media, _:future, :root .p-data-data__numBody { align-items: baseline; } } @media screen and (min-width: 768px) and (max-width: 959px) { _::-webkit-full-page-media, _:future, :root .p-data-data__numBody { align-items: end; } } @media screen and (min-width: 960px) and (max-width: 1279px) { _::-webkit-full-page-media, _:future, :root .p-data-data__numBody { align-items: end; } } @media screen and (min-width: 1280px) { _::-webkit-full-page-media, _:future, :root .p-data-data__numBody { align-items: end; } } @media screen and (min-width: 768px) and (max-width: 959px) { _::-webkit-full-page-media, _:future, :root .p-data-data__leftText, .p-data-data__rightText { position: relative; top: -17px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { _::-webkit-full-page-media, _:future, :root .p-data-data__leftText, .p-data-data__rightText { position: relative; top: -17px; } } @media screen and (min-width: 1280px) { _::-webkit-full-page-media, _:future, :root .p-data-data__leftText, .p-data-data__rightText { position: relative; top: -17px; } } .p-movie-pageMenu { margin-top: 48px; margin-bottom: 96px; border-bottom: 1px solid #E3E3E3; } @media screen and (max-width: 479px) { .p-movie-pageMenu { border-bottom: unset; margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu { border-bottom: unset; margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-pageMenu { margin-bottom: 64px; } } .p-movie-pageMenu__wrapper { width: 1180px; max-width: 100%; margin-inline: auto; } @media screen and (max-width: 479px) { .p-movie-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-movie-pageMenu__wrapper { width: 90%; } } .p-movie-pageMenu__menuList { display: flex; justify-content: space-around; } @media screen and (max-width: 479px) { .p-movie-pageMenu__menuList { flex-wrap: wrap; gap: 10px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__menuList { flex-wrap: wrap; gap: 10px; } } .p-movie-pageMenu__menuItem { padding-bottom: 16px; padding-inline: 32px; border-bottom: 3px solid #fff; transition: 0.4s; box-sizing: content-box; } @media screen and (max-width: 479px) { .p-movie-pageMenu__menuItem { font-size: 0.9375rem; background: #f0f0f0; padding: 16px 32px; border-radius: 32px; border-bottom: unset; position: relative; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-movie-pageMenu__menuItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 8px; height: 8px; border-top: 1px solid var(--black-color); border-right: 1px solid var(--black-color); transform: rotate(404deg); } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-movie-pageMenu__menuItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 13px; height: 1px; background: var(--black-color); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__menuItem { font-size: 0.9375rem; background: #f0f0f0; padding: 16px 32px; border-radius: 32px; border-bottom: unset; position: relative; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__menuItem::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 8px; height: 8px; border-top: 1px solid var(--black-color); border-right: 1px solid var(--black-color); transform: rotate(404deg); } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__menuItem::after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; width: 13px; height: 1px; background: var(--black-color); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-pageMenu__menuItem { padding-inline: 20px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-movie-pageMenu__menuItem { padding-inline: 24px; } } @media (any-hover: hover) { .p-movie-pageMenu__menuItem:hover { border-bottom: 3px solid var(--main-color); opacity: 0.7; } } @media screen and (any-hover: hover) and (max-width: 479px) { .p-movie-pageMenu__menuItem:hover { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (any-hover: hover) and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__menuItem:hover { background-color: var(--main-color); color: #fff; border-bottom: unset; } } .p-movie-pageMenu__menuItem-current { font-weight: 600; color: var(--main-color); border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-movie-pageMenu__menuItem-current { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-movie-pageMenu__menuItem-current::before { border-top: 1px solid #fff; border-right: 1px solid #fff; } } @media screen and (max-width: 479px) and (max-width: 479px) { .p-movie-pageMenu__menuItem-current::after { background: #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__menuItem-current { background-color: var(--main-color); color: #fff; border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__menuItem-current::before { border-top: 1px solid #fff; border-right: 1px solid #fff; } } @media screen and (min-width: 480px) and (max-width: 767px) and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__menuItem-current::after { background: #fff; } } @media screen and (max-width: 479px) { .p-movie-pageMenu__link { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu__link { width: 100%; } } .p-movie-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid #fff; } @media screen and (max-width: 479px) { .p-movie-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-movie-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-movie-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-movie-movie__wrapper { width: 1180px; padding-bottom: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-movie-movie__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-movie__wrapper { padding-bottom: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-movie-movie__wrapper { padding-bottom: 96px; width: 90%; } } .p-movie-movie__list { margin-top: 72px; display: flex; flex-wrap: wrap; gap: 32px; } @media screen and (max-width: 479px) { .p-movie-movie__list { margin-top: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__list { margin-top: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-movie__list { margin-top: 56px; gap: 16px; } } .p-movie-movie__youtube { width: 100%; max-height: 100%; object-fit: cover; pointer-events: none; border-radius: 18px; aspect-ratio: 16/9; } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__youtube { width: 100%; max-height: 100%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-movie-movie__youtube { width: 100%; max-height: 100%; } } .p-movie-movie__videoContet { width: calc((100% - 32px) / 2); position: relative; overflow: unset; aspect-ratio: 16/9; } @media screen and (max-width: 479px) { .p-movie-movie__videoContet { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__videoContet { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-movie__videoContet { width: calc((100% - 16px) / 2); } } .p-movie-movie__startBtn { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0%, -50%); margin: 0 auto; display: block; width: 90px; height: 90px; background-color: #fff; border-radius: 100%; border: 0; transition: 0.4s; cursor: pointer; } @media screen and (max-width: 479px) { .p-movie-movie__startBtn { top: 45%; width: 75px; height: 75px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__startBtn { top: 46%; width: 75px; height: 75px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-movie__startBtn { top: 45%; width: 75px; height: 75px; } } .p-movie-movie__startBtn:hover { background-color: #c63d40; } .p-movie-movie__startBtn:hover .p-movie-movie__startBtnInnerTriangle { background-color: #fff; } .p-movie-movie__startBtnInnerTriangle { position: absolute; left: 0; right: 0; top: 49%; transform: translate(10%, -50%); margin: 0 auto; display: block; width: 24px; height: 32px; background-color: #c63d40; clip-path: polygon(0 0, 100% 50%, 0 100%); transition: 0.4s; } @media screen and (max-width: 479px) { .p-movie-movie__startBtnInnerTriangle { width: 17px; height: 23px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__startBtnInnerTriangle { width: 17px; height: 23px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-movie__startBtnInnerTriangle { width: 17px; height: 23px; } } .p-movie-movie { /* モーダル背景 */ } .p-movie-movie__modal { display: none; /* 初期状態では非表示 */ justify-content: center; align-items: center; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } @media screen and (max-width: 479px) { .p-movie-movie__modal { background-color: rgba(0, 0, 0, 0.9); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__modal { background-color: rgba(0, 0, 0, 0.9); } } .p-movie-movie { /* モーダルコンテンツ */ } .p-movie-movie__modalContent { position: relative; width: 90%; max-width: 90%; height: 90vh; box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); background: #000; } @media screen and (max-width: 479px) { .p-movie-movie__modalContent { height: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__modalContent { height: unset; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-movie__modalContent { height: unset; } } .p-movie-movie { /* 動画の埋め込みをレスポンシブ対応させる */ } .p-movie-movie__videoContainer { aspect-ratio: 16/9; overflow: hidden; height: 100%; margin: 0 auto; } .p-movie-movie__videoContainer iframe { width: 100%; height: 100%; } .p-movie-movie { /* 閉じるボタン */ } .p-movie-movie__close { position: absolute; top: -3rem; right: 0; font-size: 2rem; color: #fff; cursor: pointer; } @media screen and (max-width: 479px) { .p-movie-movie__close { top: -4rem; font-size: 3rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-movie-movie__close { top: -4rem; font-size: 3rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-movie-movie__close { top: -4rem; font-size: 3rem; } } @media screen and (max-width: 479px) { .page-template-business { background: #f0f0f0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .page-template-business { background: #f0f0f0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .page-template-business { background: #f0f0f0; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .page-template-business { background: #f0f0f0; } } .p-business-pageMenu { margin-top: 48px; margin-bottom: 96px; border-bottom: 1px solid #E3E3E3; } @media screen and (max-width: 479px) { .p-business-pageMenu { margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu { margin-top: 64px; margin-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu { margin-block: 48px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu { margin-block: 48px; } } .p-business-pageMenu__wrapper { width: 1180px; max-width: 100%; margin-inline: auto; } @media screen and (max-width: 479px) { .p-business-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu__wrapper { width: 90%; padding-block: 0px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu__wrapper { width: 90%; padding-block: 0px; } } .p-business-pageMenu__menuList { display: flex; justify-content: space-around; flex-wrap: wrap; row-gap: 20px; } @media screen and (max-width: 479px) { .p-business-pageMenu__menuList { flex-direction: column; counter-reset: listnum; list-style: none; gap: 10px; border-radius: 10px; border: 1px solid var(--main-color); padding: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu__menuList { flex-direction: column; counter-reset: listnum; list-style: none; gap: 10px; border-radius: 10px; border: 1px solid var(--main-color); padding: 24px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu__menuList { flex-direction: row; counter-reset: listnum; list-style: none; gap: 10px; border-radius: 10px; border: 1px solid var(--main-color); padding: 24px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu__menuList { flex-direction: row; counter-reset: listnum; list-style: none; gap: 10px; border-radius: 10px; border: 1px solid var(--main-color); padding: 24px; } } @media screen and (max-width: 479px) { .p-business-pageMenu__menuList a li::before { counter-increment: listnum; content: counter(listnum, decimal-leading-zero) "．"; /* 半角スペースを入れて""の中にピリオドを追加 */ } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu__menuList a li::before { counter-increment: listnum; content: counter(listnum, decimal-leading-zero) "．"; /* 半角スペースを入れて""の中にピリオドを追加 */ } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu__menuList a li::before { counter-increment: listnum; content: counter(listnum, decimal-leading-zero) "．"; /* 半角スペースを入れて""の中にピリオドを追加 */ } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu__menuList a li::before { counter-increment: listnum; content: counter(listnum, decimal-leading-zero) "．"; /* 半角スペースを入れて""の中にピリオドを追加 */ } } .p-business-pageMenu__link { width: 20%; text-align: center; padding-inline: 6px; } @media screen and (max-width: 479px) { .p-business-pageMenu__link { width: 100%; font-size: 0.9375rem; text-align: left; font-weight: 700; color: var(--main-color); border-bottom: 1px solid; padding: 8px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu__link { width: 100%; font-size: 0.9375rem; text-align: left; font-weight: 700; color: var(--main-color); border-bottom: 1px solid; padding: 8px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu__link { width: calc((100% - 16px) / 2); font-size: 0.9375rem; text-align: left; font-weight: 700; color: var(--main-color); border-bottom: 1px solid; padding: 8px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu__link { width: calc((100% - 16px) / 2); font-size: 0.9375rem; text-align: left; font-weight: 700; color: var(--main-color); border-bottom: 1px solid; padding: 8px; } } .p-business-pageMenu__menuItem { padding-bottom: 16px; padding-inline: 0px; border-bottom: 3px solid #fff; transition: 0.4s; position: relative; } @media screen and (max-width: 479px) { .p-business-pageMenu__menuItem { padding-bottom: 0; border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu__menuItem { padding-bottom: 0; border-bottom: unset; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu__menuItem { padding-bottom: 0; border-bottom: unset; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu__menuItem { padding-bottom: 0; border-bottom: unset; } } .p-business-pageMenu__menuItem:after { content: ""; width: 8px; height: 8px; border: 0; border-bottom: solid 3px var(--main-color); border-right: solid 3px var(--main-color); transform: rotate(45deg) translateY(50%); position: absolute; top: -55%; right: 0; bottom: 0; margin: auto; } .p-business-pageMenu__menuItem:hover { border-bottom: 3px solid var(--main-color); opacity: 0.7; } @media screen and (max-width: 479px) { .p-business-pageMenu__menuItem:hover { border-bottom: unset; opacity: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu__menuItem:hover { border-bottom: unset; opacity: unset; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu__menuItem:hover { border-bottom: unset; opacity: unset; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu__menuItem:hover { border-bottom: unset; opacity: unset; } } .p-business-pageMenu__menuItem-current { font-weight: 600; color: var(--main-color); border-bottom: 3px solid var(--main-color); opacity: 1; } .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid #fff; } @media screen and (max-width: 479px) { .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; } } .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: 3px solid var(--main-color); opacity: 1; } @media screen and (max-width: 479px) { .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; opacity: unset; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; opacity: unset; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; opacity: unset; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-pageMenu:has(.p-philosophy-pageMenu__menuItem-current:hover) .p-philosophy-pageMenu__menuItem-current { border-bottom: unset; opacity: unset; } } @media screen and (min-width: 1280px) { .p-business-pageMenu .p-business-pageMenu__link:nth-child(8) .p-business-pageMenu__menuItem::after { right: -12px; } } .p-business-field__wrapper { width: 1180px; padding-bottom: 128px; margin-inline: auto; display: flex; flex-direction: column; gap: 72px; } @media screen and (max-width: 479px) { .p-business-field__wrapper { width: 90%; padding-block: 24px; padding-bottom: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__wrapper { width: 90%; padding-block: 24px; padding-bottom: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__wrapper { width: 90%; padding-top: 0px; padding-bottom: 64px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__wrapper { width: 90%; padding-top: 0px; padding-bottom: 64px; } } .p-business-field__section { display: flex; gap: 40px; align-items: center; background: #f5f5f5; padding: 48px; position: relative; min-height: 450px; box-sizing: content-box; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 479px) { .p-business-field__section { flex-direction: column; padding-inline: 24px; gap: 24px; background: #fff; padding-block: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__section { flex-direction: column; padding-inline: 24px; gap: 24px; background: #fff; padding-block: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__section { flex-direction: column; padding-inline: 48px; gap: 24px; background: #fff; padding-block: 48px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__section { flex-direction: column; padding-inline: 48px; gap: 24px; background: #fff; padding-block: 48px; } } .p-business-field__section::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 150px 150px; border-color: transparent transparent var(--main-color) transparent; } @media screen and (max-width: 479px) { .p-business-field__section::after { border-width: 0 0 100px 100px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__section::after { border-width: 0 0 100px 100px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__section::after { border-width: 0 0 100px 100px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__section::after { border-width: 0 0 100px 100px; } } .p-business-field__textContent { width: 47%; } @media screen and (max-width: 479px) { .p-business-field__textContent { width: 100%; display: contents; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__textContent { width: 100%; display: contents; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__textContent { width: 100%; display: contents; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__textContent { width: 100%; display: contents; } } .p-business-field__fieldName { font-size: 2rem; font-weight: 600; color: var(--main-color); margin-bottom: 24px; position: relative; padding-left: 65px; } @media screen and (max-width: 479px) { .p-business-field__fieldName { font-size: 1.125rem; width: 100%; padding-left: 40px; margin-bottom: 0; order: 1; padding-block: 4px; border-bottom: 2px solid var(--main-color); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__fieldName { font-size: 1.5rem; width: 100%; padding-left: 40px; margin-bottom: 0; order: 1; padding-block: 4px; border-bottom: 2px solid var(--main-color); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__fieldName { font-size: 1.5rem; width: 100%; padding-left: 40px; margin-bottom: 0; order: 1; padding-block: 4px; border-bottom: 2px solid var(--main-color); } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__fieldName { font-size: 1.5rem; width: 100%; padding-left: 40px; margin-bottom: 0; order: 1; padding-block: 4px; border-bottom: 2px solid var(--main-color); } } .p-business-field__fieldName::before { content: ""; position: absolute; left: 0; top: 50%; width: 30px; height: 100%; background: var(--main-color); transform: translateY(-50%) skewX(-25deg); margin-left: 14px; } @media screen and (max-width: 479px) { .p-business-field__fieldName::before { margin-left: 8px; width: 13px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__fieldName::before { margin-left: 8px; width: 13px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__fieldName::before { margin-left: 8px; width: 13px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__fieldName::before { margin-left: 8px; width: 13px; } } .p-business-field__fieldDesc { line-height: 1.8em; margin-bottom: 24px; white-space: pre-line; } @media screen and (max-width: 479px) { .p-business-field__fieldDesc { font-size: 0.875rem; margin-bottom: 0; order: 3; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__fieldDesc { font-size: 0.875rem; margin-bottom: 0; order: 3; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__fieldDesc { font-size: 0.875rem; margin-bottom: 0; order: 3; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__fieldDesc { font-size: 0.875rem; margin-bottom: 0; order: 3; } } @media screen and (max-width: 479px) { .p-business-field__relatedCompanyWrapper { width: 100%; order: 4; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__relatedCompanyWrapper { width: 100%; order: 4; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__relatedCompanyWrapper { width: 100%; order: 4; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__relatedCompanyWrapper { width: 100%; order: 4; } } .p-business-field__relatedCompanyNames { display: flex; flex-wrap: wrap; gap: 10px; } .p-business-field__relatedCompanyName { width: fit-content; border: 1px solid var(--main-color); padding-inline: 16px; padding-block: 2px; font-size: 0.875rem; color: var(--main-color); } @media screen and (max-width: 479px) { .p-business-field__relatedCompanyName { font-size: 0.75rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__relatedCompanyName { font-size: 0.75rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__relatedCompanyName { font-size: 0.75rem; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__relatedCompanyName { font-size: 0.75rem; } } .p-business-field__relatedCompanyTitle { margin-bottom: 10px; } .p-business-field .swiper { width: 53%; position: absolute; right: -50px; border-top-left-radius: 20px; } @media screen and (max-width: 479px) { .p-business-field .swiper { position: relative; right: 0; width: 100vw; order: 2; margin: 0 calc(50% - 50vw); border-top-left-radius: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field .swiper { position: relative; right: 0; width: 100%; order: 2; border-top-left-radius: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field .swiper { position: relative; right: 0; width: 100%; order: 2; border-top-left-radius: 0px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field .swiper { position: relative; right: 0; width: 100%; order: 2; border-top-left-radius: 0px; } } .p-business-field .swiper img { height: 450px; object-fit: cover; border-top-left-radius: 20px; } @media screen and (max-width: 479px) { .p-business-field .swiper img { height: 250px; border-radius: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field .swiper img { height: 375px; border-radius: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field .swiper img { height: 450px; border-radius: 0px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field .swiper img { height: 450px; border-radius: 0px; } } .p-business-field .swiper .swiper-pagination-bullet-active { background: #fff; } .p-business-field__sectionWrapper { background: #f5f5f5; padding: 48px; position: relative; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 479px) { .p-business-field__sectionWrapper { padding-inline: 24px; display: flex; flex-direction: column; gap: 24px; background: #fff; padding-block: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__sectionWrapper { padding-inline: 24px; display: flex; flex-direction: column; gap: 24px; background: #fff; padding-block: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__sectionWrapper { padding-inline: 48px; display: flex; flex-direction: column; gap: 24px; background: #fff; padding-block: 48px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__sectionWrapper { padding-inline: 48px; display: flex; flex-direction: column; gap: 24px; background: #fff; padding-block: 48px; } } .p-business-field__sectionWrapper::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 150px 150px; border-color: transparent transparent var(--main-color) transparent; } @media screen and (max-width: 479px) { .p-business-field__sectionWrapper::after { border-width: 0 0 100px 100px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__sectionWrapper::after { border-width: 0 0 100px 100px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__sectionWrapper::after { border-width: 0 0 100px 100px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__sectionWrapper::after { border-width: 0 0 100px 100px; } } .p-business-field__sectionWrapper .p-business-field__section { background: #fff; margin-bottom: 48px; border-radius: 10px; } @media screen and (max-width: 479px) { .p-business-field__sectionWrapper .p-business-field__section { background: unset; padding: 0; order: 5; box-shadow: unset; margin-bottom: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__sectionWrapper .p-business-field__section { background: unset; padding: 0; order: 5; box-shadow: unset; margin-bottom: 24px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__sectionWrapper .p-business-field__section { background: unset; padding: 0; order: 5; box-shadow: unset; margin-bottom: 24px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__sectionWrapper .p-business-field__section { background: unset; padding: 0; order: 5; box-shadow: unset; margin-bottom: 24px; } } .p-business-field__sectionWrapper .p-business-field__section:last-child { margin-bottom: 0; } .p-business-field__sectionWrapper .p-business-field__section:after { display: none; content: none; } .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName { font-size: 1.5rem; background: #940910; color: #fff; padding: 6px 24px; border-radius: 4px; font-weight: 100; overflow: hidden; } @media screen and (max-width: 479px) { .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName { font-size: 1.125rem; background-color: var(--main-color); color: #fff; padding: 5px 32px; border-radius: 4px; font-weight: 600; overflow: hidden; text-align: center; width: fit-content; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName { font-size: 1.25rem; background-color: var(--main-color); color: #fff; padding: 5px 32px; border-radius: 4px; font-weight: 600; overflow: hidden; text-align: center; width: fit-content; border-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName { font-size: 1.25rem; background-color: var(--main-color); color: #fff; padding: 5px 32px; border-radius: 4px; font-weight: 600; overflow: hidden; text-align: center; width: fit-content; border-bottom: 0; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName { font-size: 1.25rem; background-color: var(--main-color); color: #fff; padding: 5px 32px; border-radius: 4px; font-weight: 600; overflow: hidden; text-align: center; width: fit-content; border-bottom: 0; } } .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName:before { left: 0; top: 15%; width: 7px; background: #ffffff; transform: translateY(-50%) skewX(-45deg); margin-left: 8px; } @media screen and (max-width: 479px) { .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName:before { display: none; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName:before { display: none; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName:before { display: none; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__sectionWrapper .p-business-field__section .p-business-field__fieldName:before { display: none; } } .p-business-field__sectionWrapper .p-business-field__section .swiper { width: 53%; right: -98px; min-width: 620px; } @media screen and (max-width: 479px) { .p-business-field__sectionWrapper .p-business-field__section .swiper { min-width: unset; position: relative; right: 0; width: 100vw; margin: 0 calc(50% - 50vw); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-business-field__sectionWrapper .p-business-field__section .swiper { min-width: unset; position: relative; right: 0; width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-business-field__sectionWrapper .p-business-field__section .swiper { min-width: unset; position: relative; right: 0; width: 100%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-business-field__sectionWrapper .p-business-field__section .swiper { min-width: unset; position: relative; right: 0; width: 100%; } } .p-group { background: #f5f5f5; overflow: hidden; } .p-group__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-group__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-group__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-group__wrapper { padding-block: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-group__wrapper { padding-block: 96px; width: 90%; } } .p-group__companyList { margin-top: 72px; display: flex; flex-wrap: wrap; gap: 16px; row-gap: 24px; } @media screen and (max-width: 479px) { .p-group__companyList { gap: 14px; row-gap: 20px; margin-top: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-group__companyList { gap: 14px; row-gap: 20px; margin-top: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-group__companyList { gap: 14px; row-gap: 20px; margin-top: 56px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-group__companyList { row-gap: 32px; } } .p-group__company { width: calc((100% - 48px) / 4); display: flex; flex-direction: column; text-align: center; align-items: center; position: relative; } @media screen and (max-width: 479px) { .p-group__company { width: calc((100% - 14px) / 2); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-group__company { width: calc((100% - 14px) / 2); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-group__company { width: calc((100% - 28px) / 3); } } .p-group__company a { width: 100%; background: #fff; padding-inline: 20px; height: 85px; max-height: 85px; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 479px) { .p-group__company a { height: 65px; padding-inline: 10px; border-radius: 6px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-group__company a { height: 75px; padding-inline: 24px; border-radius: 6px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-group__company a { height: 70px; padding-inline: 24px; border-radius: 6px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-group__company a { height: 60px; padding-inline: 10px; } } .p-group__company img { width: 100%; max-height: 65px; object-fit: contain; } @media screen and (max-width: 479px) { .p-group__company img { max-height: 40px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-group__company img { max-height: 40px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-group__company img { max-height: 40px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-group__company img { max-height: 40px; } } .p-group__company:hover .p-group__img { opacity: 0.6; } .p-group__company:hover .p-group__fukidashi { display: inline-block; opacity: 1; } @media screen and (max-width: 479px) { .p-group__company:hover .p-group__fukidashi { display: none; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-group__company:hover .p-group__fukidashi { display: none; } } .p-group__img { transition: 0.4s; display: flex; } .p-group__companyName { font-size: 0.875rem; margin-top: 6px; } @media screen and (max-width: 479px) { .p-group__companyName { font-size: 0.625rem; margin-top: 4px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-group__companyName { font-size: 0.625rem; margin-top: 4px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-group__companyName { font-size: 0.75rem; margin-top: 4px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-group__companyName { font-size: 0.6875rem; } } .p-group__fukidashi { position: absolute; top: -10px; transform: translateY(-100%); display: inline-block; width: max-content; margin-bottom: 10px; padding: 16px; border-radius: 8px; background-color: var(--main-color); text-align: left; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; color: #ffffff; opacity: 0; transition: 0.4s; display: none; max-width: 400px; } .p-group__fukidashi::after { content: ""; position: absolute; bottom: 0; left: 50%; border-style: solid; border-width: 10px 10px 0 10px; border-color: var(--main-color) transparent transparent; translate: -50% 100%; } .p-singleGroup { width: 100%; overflow: hidden; } .p-singleGroup .c-sectionTitle { width: 100%; } .p-singleGroup-overview__wrapper { width: 1180px; max-width: 100%; padding-top: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-singleGroup-overview__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-overview__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-overview__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-overview__wrapper { width: 90%; padding-block: 96px; padding-bottom: 0; } } .p-singleGroup-overview__img { display: inline-block; margin-top: 72px; margin-bottom: 48px; text-align: center; width: 100%; } @media screen and (max-width: 479px) { .p-singleGroup-overview__img { margin-top: 32px; margin-bottom: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-overview__img { margin-top: 32px; margin-bottom: 24px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-overview__img { margin-top: 56px; margin-bottom: 24px; } } .p-singleGroup-overview table { width: 100%; margin-bottom: 128px; } @media screen and (max-width: 479px) { .p-singleGroup-overview table { margin-bottom: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-overview table { margin-bottom: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-overview table { margin-bottom: 56px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-overview table { margin-bottom: 96px; } } .p-singleGroup-overview a { color: #625eff; text-decoration: underline; transition: 0.4s; } .p-singleGroup-overview a:hover { opacity: 0.6; } .p-singleGroup-overview__logo { max-width: 400px; max-height: 100px; object-fit: contain; } @media screen and (max-width: 479px) { .p-singleGroup-overview__logo { max-width: 80%; max-height: 50px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-overview__logo { max-width: 60%; max-height: 50px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-overview__logo { max-width: 50%; max-height: 85px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-overview__logo { max-height: 75px; } } .p-singleGroup-overview__tableHeader { width: 250px; padding: 40px; font-weight: 500; vertical-align: middle; border-top: 1px solid var(--main-color); } @media screen and (max-width: 479px) { .p-singleGroup-overview__tableHeader { display: inline-block; width: 100%; padding: 16px; background: var(--main-color); color: #fff; font-size: 0.875rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-overview__tableHeader { width: 160px; padding: 24px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-overview__tableHeader { width: 160px; padding: 24px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-overview__tableHeader { padding: 32px; } } .p-singleGroup-overview__tableData { padding: 40px; border-top: 1px solid #f5f5f5; } @media screen and (max-width: 479px) { .p-singleGroup-overview__tableData { display: inline-block; width: 100%; padding: 16px; font-size: 0.875rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-overview__tableData { padding: 24px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-overview__tableData { padding: 24px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-overview__tableData { padding: 32px; } } .p-singleGroup-overview__tableBodyRow:last-child .p-singleGroup-overview__tableHeader { border-bottom: 1px solid var(--main-color); } .p-singleGroup-overview__tableBodyRow:last-child .p-singleGroup-overview__tableData { border-bottom: 1px solid #f5f5f5; } .p-singleGroup-overview__imagePic { width: 100vw; height: 110vh; object-fit: cover; max-width: unset; margin: 0 calc(50% - 50vw); background-size: cover; background-position: center; } @media screen and (max-width: 479px) { .p-singleGroup-overview__imagePic { height: 80vw; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-overview__imagePic { height: 80vw; } } .p-singleGroup-overview__imagePic-入交トラストエナジー株式会社 { background-size: cover; background-repeat: no-repeat; width: 100%; margin-inline: auto; height: 590px; margin-bottom: 128px; } @media screen and (max-width: 479px) { .p-singleGroup-overview__imagePic-入交トラストエナジー株式会社 { background-size: contain; margin-bottom: 64px; height: 197px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-overview__imagePic-入交トラストエナジー株式会社 { background-size: contain; margin-bottom: 64px; height: 327px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-overview__imagePic-入交トラストエナジー株式会社 { background-size: contain; margin-bottom: 64px; height: 327px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-overview__imagePic-入交トラストエナジー株式会社 { background-size: contain; margin-bottom: 64px; height: 570px; } } .p-singleGroup-groupCompanyList { background: #f5f5f5; } .p-singleGroup-groupCompanyList__wrapper { width: 1180px; padding-block: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-singleGroup-groupCompanyList__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-groupCompanyList__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-groupCompanyList__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-groupCompanyList__wrapper { width: 90%; padding-block: 96px; } } .p-singleGroup-groupCompanyList__itemList { margin-top: 72px; display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-grow: 1; flex-wrap: wrap; } @media screen and (max-width: 479px) { .p-singleGroup-groupCompanyList__itemList { gap: 8px; margin-top: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-groupCompanyList__itemList { gap: 8px; margin-top: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-groupCompanyList__itemList { gap: 8px; margin-top: 56px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-groupCompanyList__itemList { gap: 10px; } } .p-singleGroup-groupCompanyList__item { width: calc((100% - 54px) / 4); transition: 0.4s; } @media screen and (max-width: 479px) { .p-singleGroup-groupCompanyList__item { width: calc((100% - 8px) / 2); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-groupCompanyList__item { width: calc((100% - 8px) / 2); } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-groupCompanyList__item { width: calc((100% - 16px) / 3); } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-groupCompanyList__item { width: calc((100% - 30px) / 4); } } .p-singleGroup-groupCompanyList__link { font-size: 1rem; font-weight: 600; background: #fff; color: black; padding: 16px 4px; border-radius: 6px; border: 1px solid #fff; text-align: center; display: flex; align-items: center; justify-content: center; transition: 0.3s ease; } @media screen and (max-width: 479px) { .p-singleGroup-groupCompanyList__link { font-size: 0.6875rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleGroup-groupCompanyList__link { font-size: 0.875rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleGroup-groupCompanyList__link { font-size: 0.875rem; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleGroup-groupCompanyList__link { font-size: 0.875rem; } } .p-singleGroup-groupCompanyList__link:hover { background: var(--main-color); color: #fff; border: 1px solid #fff; } .p-sustainability { overflow: hidden; } .p-sustainability__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-sustainability__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-sustainability__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-sustainability__wrapper { padding-block: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-sustainability__wrapper { padding-block: 96px; width: 90%; } } .p-sustainability .c-sectionTitle-ja { display: none; } .p-sustainability__intro { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 32px; } @media screen and (max-width: 479px) { .p-sustainability__intro { flex-direction: column; align-items: flex-start; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-sustainability__intro { flex-direction: column; align-items: flex-start; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-sustainability__intro { flex-direction: column; align-items: flex-start; } } .p-sustainability__lead { font-size: 2rem; color: var(--main-color); } @media screen and (max-width: 479px) { .p-sustainability__lead { font-size: 1.625rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-sustainability__lead { font-size: 1.625rem; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-sustainability__lead { font-size: 2.5rem; } } .p-sustainability__description { width: 60%; line-height: 2em; } @media screen and (max-width: 479px) { .p-sustainability__description { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-sustainability__description { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-sustainability__description { width: 100%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-sustainability__description { width: 50%; line-height: 1.8em; } } .p-sustainability__content { margin-top: 72px; padding: 32px; background: #f5f5f5; line-height: 2em; display: flex; align-items: center; gap: 32px; } @media screen and (max-width: 479px) { .p-sustainability__content { margin-top: 32px; padding: 32px 24px; flex-direction: column-reverse; align-items: flex-start; gap: 16px; margin-bottom: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-sustainability__content { margin-top: 32px; padding: 32px 24px; flex-direction: column-reverse; align-items: flex-start; gap: 16px; margin-bottom: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-sustainability__content { margin-top: 32px; flex-direction: column-reverse; align-items: flex-start; } } .p-sustainability__text { width: 55%; } @media screen and (max-width: 479px) { .p-sustainability__text { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-sustainability__text { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-sustainability__text { width: 100%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-sustainability__text { line-height: 1.7em; } } .p-sustainability__img { width: 45%; vertical-align: bottom; } @media screen and (max-width: 479px) { .p-sustainability__img { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-sustainability__img { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-sustainability__img { width: 100%; } } .p-environment { overflow: hidden; } @media screen and (max-width: 479px) { .p-environment { background: #f5f5f5; } } .p-environment__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; padding-top: 0; margin-inline: auto; } @media screen and (max-width: 479px) { .p-environment__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment__wrapper { padding-block: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-environment__wrapper { padding-block: 96px; padding-top: 0; width: 90%; } } .p-environment__sdgs { margin-top: 72px; display: flex; flex-direction: column; gap: 96px; } @media screen and (max-width: 479px) { .p-environment__sdgs { margin-top: 32px; gap: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__sdgs { margin-top: 32px; gap: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment__sdgs { margin-top: 48px; gap: 32px; } } @media screen and (max-width: 479px) { .p-environment__effort:last-child { margin-bottom: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__effort:last-child { margin-bottom: 64px; } } @media screen and (max-width: 479px) { .p-environment__effort { background: #fff; padding: 32px 24px; border-radius: 16px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__effort { background: #fff; padding: 32px 24px; border-radius: 16px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } .p-environment__effortNameWrapper { display: flex; justify-content: space-between; } @media screen and (max-width: 479px) { .p-environment__effortNameWrapper { flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__effortNameWrapper { flex-direction: column; } } .p-environment__effortName { font-size: 2rem; font-weight: 600; color: var(--main-color); position: relative; padding-left: 120px; display: flex; align-items: center; } @media screen and (max-width: 479px) { .p-environment__effortName { font-size: 1.125rem; padding-left: 60px; min-height: 50px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__effortName { font-size: 1.5rem; padding-left: 80px; min-height: 50px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment__effortName { font-size: 1.25rem; padding-left: 80px; min-height: 50px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-environment__effortName { font-size: 1.5rem; padding-left: 96px; } } .p-environment__effortName::before { content: ""; position: absolute; left: 0; top: 50%; width: 90px; height: 90px; background: url("../img/sdgs/sdg_icon_wheel_3.png") no-repeat center/contain; transform: translateY(-50%); } @media screen and (max-width: 479px) { .p-environment__effortName::before { width: 45px; height: 45px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__effortName::before { width: 60px; height: 60px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment__effortName::before { width: 60px; height: 60px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-environment__effortName::before { width: 75px; height: 75px; } } .p-environment__sgdsIcons { display: flex; } @media screen and (max-width: 479px) { .p-environment__sgdsIcons { margin-block: 16px; justify-content: center; gap: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__sgdsIcons { margin-block: 16px; justify-content: center; gap: 16px; } } .p-environment__linkImg { max-width: 140px; } @media screen and (max-width: 479px) { .p-environment__linkImg img { margin-top: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__linkImg img { margin-top: 16px; } } @media screen and (max-width: 479px) { .p-environment__linkImg { max-width: 100px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__linkImg { max-width: 100px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment__linkImg { max-width: 95px; min-width: 95px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-environment__linkImg { max-width: 110px; } } .p-environment__effortbody { display: flex; gap: 32px; padding: 40px; background: #f5f5f5; border-radius: 16px; align-items: center; } @media screen and (max-width: 479px) { .p-environment__effortbody { display: contents; padding: 32px 24px; flex-direction: column; gap: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__effortbody { display: contents; padding: 32px 24px; flex-direction: column; gap: 16px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment__effortbody { padding: 32px; gap: 16px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-environment__effortbody { gap: 16px; } } .p-environment__effortbody .p-environment__linkImg { width: 30%; max-width: unset; } @media screen and (max-width: 479px) { .p-environment__effortbody .p-environment__linkImg { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__effortbody .p-environment__linkImg { width: 100%; } } .p-environment__effortDesc { width: 70%; line-height: 2.5em; color: var(--main-black); } @media screen and (max-width: 479px) { .p-environment__effortDesc { font-size: 1rem; width: 100%; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment__effortDesc { font-size: 1rem; width: 100%; line-height: 1.8em; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment__effortDesc { line-height: 2em; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-environment__effortDesc { line-height: 2em; } } .p-environment__effortDesc-w100 { width: 100%; } .p-environment-pageMenu { margin-top: 48px; margin-bottom: 96px; border-bottom: 1px solid #E3E3E3; } @media screen and (max-width: 479px) { .p-environment-pageMenu { display: none; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment-pageMenu { margin-bottom: 0px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment-pageMenu { margin-bottom: 0px; } } .p-environment-pageMenu__wrapper { width: 1180px; margin-inline: auto; } @media screen and (min-width: 768px) and (max-width: 959px) { .p-environment-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-environment-pageMenu__wrapper { width: 90%; } } .p-environment-pageMenu__menuList { display: flex; justify-content: space-around; } .p-environment-pageMenu__menuItem { padding-bottom: 16px; padding-inline: 32px; border-bottom: 3px solid #fff; transition: 0.4s; } @media screen and (min-width: 480px) and (max-width: 767px) { .p-environment-pageMenu__menuItem { padding-inline: 14px; } } .p-environment-pageMenu__menuItem:hover { border-bottom: 3px solid var(--main-color); opacity: 0.7; } .p-environment-pageMenu__menuItem-current { font-weight: 600; color: var(--main-color); border-bottom: 3px solid var(--main-color); opacity: 1; } .p-environment-pageMenu:has(.p-environment-pageMenu__menuItem:hover) .p-environment-pageMenu__menuItem-current { border-bottom: 3px solid #fff; } .p-environment-pageMenu:has(.p-environment-pageMenu__menuItem-current:hover) .p-environment-pageMenu__menuItem-current { border-bottom: 3px solid var(--main-color); opacity: 1; } .p-social { overflow: hidden; } @media screen and (max-width: 479px) { .p-social { background: #f5f5f5; } } .p-social__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; padding-top: 0; margin-inline: auto; } @media screen and (max-width: 479px) { .p-social__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-social__wrapper { width: 90%; padding-block: 96px; padding-top: 0; } } .p-social__sdgs { margin-top: 72px; display: flex; flex-direction: column; gap: 96px; } @media screen and (max-width: 479px) { .p-social__sdgs { margin-top: 32px; gap: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__sdgs { margin-top: 32px; gap: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social__sdgs { margin-top: 48px; gap: 32px; } } @media screen and (max-width: 479px) { .p-social__effort:last-child { margin-bottom: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effort:last-child { margin-bottom: 64px; } } @media screen and (max-width: 479px) { .p-social__effort { background: #fff; padding: 32px 24px; border-radius: 16px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effort { background: #fff; padding: 32px 24px; border-radius: 16px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } .p-social__effortNameWrapper { display: flex; justify-content: space-between; } @media screen and (max-width: 479px) { .p-social__effortNameWrapper { flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortNameWrapper { flex-direction: column; } } .p-social__effortName { font-size: 2rem; font-weight: 600; color: var(--main-color); position: relative; padding-left: 120px; display: flex; align-items: center; } @media screen and (max-width: 479px) { .p-social__effortName { font-size: 1.125rem; padding-left: 60px; min-height: 50px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortName { font-size: 1.5rem; padding-left: 80px; min-height: 50px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social__effortName { font-size: 1.25rem; padding-left: 80px; min-height: 50px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-social__effortName { font-size: 1.5rem; padding-left: 96px; } } .p-social__effortName::before { content: ""; position: absolute; left: 0; top: 50%; width: 90px; height: 90px; background: url("../img/sdgs/sdg_icon_wheel_3.png") no-repeat center/contain; transform: translateY(-50%); } @media screen and (max-width: 479px) { .p-social__effortName::before { width: 45px; height: 45px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortName::before { width: 60px; height: 60px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social__effortName::before { width: 60px; height: 60px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-social__effortName::before { width: 75px; height: 75px; } } .p-social__sgdsIcons { display: flex; } @media screen and (max-width: 479px) { .p-social__sgdsIcons { margin-block: 16px; justify-content: center; gap: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__sgdsIcons { margin-block: 16px; justify-content: center; gap: 16px; } } .p-social__linkImg { max-width: 140px; } @media screen and (max-width: 479px) { .p-social__linkImg img { margin-top: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__linkImg img { margin-top: 16px; } } @media screen and (max-width: 479px) { .p-social__linkImg { max-width: 100px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__linkImg { max-width: 100px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social__linkImg { max-width: 95px; min-width: 95px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-social__linkImg { max-width: 110px; } } .p-social__effortbody { display: flex; gap: 32px; padding: 40px; background: #f5f5f5; border-radius: 16px; align-items: center; } @media screen and (max-width: 479px) { .p-social__effortbody { display: contents; padding: 32px 24px; flex-direction: column; gap: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortbody { display: contents; padding: 32px 24px; flex-direction: column; gap: 16px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social__effortbody { padding: 32px; gap: 16px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-social__effortbody { gap: 16px; } } .p-social__effortbody .p-social__linkImg { width: 30%; max-width: unset; } @media screen and (max-width: 479px) { .p-social__effortbody .p-social__linkImg { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortbody .p-social__linkImg { width: 100%; } } .p-social__effortbody-special01 { line-height: 1.5em; } .p-social__effortbody-special01 .p-social__effortDesc { display: flex; flex-direction: column; gap: 24px; } .p-social__effortbody-special01 ul { line-height: 2em; list-style: auto; padding-left: 32px; margin-top: 10px; font-size: 1rem; } @media screen and (max-width: 479px) { .p-social__effortbody-special01 ul { padding-left: 17px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortbody-special01 ul { padding-left: 17px; } } .p-social__effortbody-special01 ul li::marker { font-weight: 600; } .p-social__effortbody-special01 .p-social__effortSubTit { color: var(--main-color); font-weight: 600; font-size: 1.25rem; position: relative; padding-left: 45px; min-height: 40px; display: flex; align-items: center; margin-bottom: 4px; } @media screen and (max-width: 479px) { .p-social__effortbody-special01 .p-social__effortSubTit { min-height: 40px; display: flex; align-items: center; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortbody-special01 .p-social__effortSubTit { min-height: 40px; display: flex; align-items: center; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social__effortbody-special01 .p-social__effortSubTit { font-size: 1.125rem; } } .p-social__effortbody-special01 .p-social__effortSubTit::before { content: ""; position: absolute; left: 0; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); } .p-social__effortbody-special01 .p-social__effortBlock:nth-of-type(1) .p-social__effortSubTit::before { background: url("../img/sdgs/sdgs_01.png") no-repeat center/contain; } .p-social__effortbody-special01 .p-social__effortBlock:nth-of-type(2) .p-social__effortSubTit::before { background: url("../img/sdgs/sdgs_02.png") no-repeat center/contain; } .p-social__effortbody-special01 .p-social__effortBlock:nth-of-type(3) .p-social__effortSubTit::before { background: url("../img/sdgs/sdgs_03.png") no-repeat center/contain; } .p-social__effortbody-special01 .p-social__effortBlock:nth-of-type(4) .p-social__effortSubTit::before { background: url("../img/sdgs/sdgs_04.png") no-repeat center/contain; } .p-social__effortbody-special01 .p-social__effortBlock:nth-of-type(5) .p-social__effortSubTit::before { background: url("../img/sdgs/sdgs_05.png") no-repeat center/contain; } .p-social__effortbody-special01 .p-social__effortSubDesc { font-size: 1rem; line-height: 2em; } @media screen and (max-width: 479px) { .p-social__effortbody-special01 .p-social__effortSubDesc { margin-top: 10px; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortbody-special01 .p-social__effortSubDesc { margin-top: 10px; line-height: 1.8em; } } .p-social__effortDesc { width: 70%; line-height: 2.5em; color: var(--main-black); } @media screen and (max-width: 479px) { .p-social__effortDesc { font-size: 0.875rem; width: 100%; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social__effortDesc { font-size: 1rem; width: 100%; line-height: 1.8em; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social__effortDesc { line-height: 2em; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-social__effortDesc { line-height: 2em; } } .p-social__effortDesc-w100 { width: 100%; } .p-social-pageMenu { margin-top: 48px; margin-bottom: 96px; border-bottom: 1px solid #E3E3E3; } @media screen and (max-width: 479px) { .p-social-pageMenu { display: none; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social-pageMenu { margin-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social-pageMenu { margin-bottom: 0px; } } .p-social-pageMenu__wrapper { width: 1180px; margin-inline: auto; } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-social-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-social-pageMenu__wrapper { width: 90%; } } .p-social-pageMenu__menuList { display: flex; justify-content: space-around; } .p-social-pageMenu__menuItem { padding-bottom: 16px; padding-inline: 32px; border-bottom: 3px solid #fff; transition: 0.4s; } @media screen and (min-width: 480px) and (max-width: 767px) { .p-social-pageMenu__menuItem { padding-inline: 14px; } } .p-social-pageMenu__menuItem:hover { border-bottom: 3px solid var(--main-color); opacity: 0.7; } .p-social-pageMenu__menuItem-current { font-weight: 600; color: var(--main-color); border-bottom: 3px solid var(--main-color); opacity: 1; } .p-social-pageMenu:has(.p-social-pageMenu__menuItem:hover) .p-social-pageMenu__menuItem-current { border-bottom: 3px solid #fff; } .p-social-pageMenu:has(.p-social-pageMenu__menuItem-current:hover) .p-social-pageMenu__menuItem-current { border-bottom: 3px solid var(--main-color); opacity: 1; } .p-governance { overflow: hidden; } @media screen and (max-width: 479px) { .p-governance { background: #f5f5f5; } } .p-governance__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; padding-top: 0; margin-inline: auto; } @media screen and (max-width: 479px) { .p-governance__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__wrapper { width: 90%; padding-block: 64px; padding-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance__wrapper { padding-block: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-governance__wrapper { padding-block: 96px; padding-top: 0; width: 90%; } } .p-governance__sdgs { margin-top: 72px; display: flex; flex-direction: column; gap: 96px; } @media screen and (max-width: 479px) { .p-governance__sdgs { margin-top: 32px; gap: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__sdgs { margin-top: 32px; gap: 32px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance__sdgs { margin-top: 48px; gap: 32px; } } @media screen and (max-width: 479px) { .p-governance__effort:last-child { margin-bottom: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effort:last-child { margin-bottom: 64px; } } @media screen and (max-width: 479px) { .p-governance__effort { background: #fff; padding: 32px 24px; border-radius: 16px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effort { background: #fff; padding: 32px 24px; border-radius: 16px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } } .p-governance__effortNameWrapper { display: flex; justify-content: space-between; } @media screen and (max-width: 479px) { .p-governance__effortNameWrapper { flex-direction: column; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortNameWrapper { flex-direction: column; } } .p-governance__effortName { font-size: 2rem; font-weight: 600; color: var(--main-color); position: relative; padding-left: 120px; display: flex; align-items: center; } @media screen and (max-width: 479px) { .p-governance__effortName { font-size: 1.125rem; padding-left: 60px; min-height: 50px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortName { font-size: 1.5rem; padding-left: 80px; min-height: 50px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance__effortName { font-size: 1.25rem; padding-left: 80px; min-height: 50px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-governance__effortName { font-size: 1.5rem; padding-left: 96px; } } .p-governance__effortName::before { content: ""; position: absolute; left: 0; top: 50%; width: 90px; height: 90px; background: url("../img/sdgs/sdg_icon_wheel_3.png") no-repeat center/contain; transform: translateY(-50%); } @media screen and (max-width: 479px) { .p-governance__effortName::before { width: 45px; height: 45px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortName::before { width: 60px; height: 60px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance__effortName::before { width: 60px; height: 60px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-governance__effortName::before { width: 75px; height: 75px; } } .p-governance__sgdsIcons { display: flex; } @media screen and (max-width: 479px) { .p-governance__sgdsIcons { margin-block: 16px; justify-content: center; gap: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__sgdsIcons { margin-block: 16px; justify-content: center; gap: 16px; } } .p-governance__linkImg { max-width: 140px; } @media screen and (max-width: 479px) { .p-governance__linkImg img { margin-top: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__linkImg img { margin-top: 16px; } } @media screen and (max-width: 479px) { .p-governance__linkImg { max-width: 100px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__linkImg { max-width: 100px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance__linkImg { max-width: 95px; min-width: 95px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-governance__linkImg { max-width: 110px; } } .p-governance__effortbody { display: flex; gap: 32px; padding: 40px; background: #f5f5f5; border-radius: 16px; align-items: center; } @media screen and (max-width: 479px) { .p-governance__effortbody { display: contents; padding: 32px 24px; flex-direction: column; gap: 16px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortbody { display: contents; padding: 32px 24px; flex-direction: column; gap: 16px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance__effortbody { padding: 32px; gap: 16px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-governance__effortbody { gap: 16px; } } .p-governance__effortbody .p-governance__linkImg { width: 30%; max-width: unset; } @media screen and (max-width: 479px) { .p-governance__effortbody .p-governance__linkImg { width: 100%; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortbody .p-governance__linkImg { width: 100%; } } .p-governance__effortbody-special01 { line-height: 1.5em; } .p-governance__effortbody-special01 .p-governance__effortDesc { display: flex; flex-direction: column; gap: 24px; } .p-governance__effortbody-special01 ul { line-height: 2em; list-style: auto; padding-left: 32px; margin-top: 10px; font-size: 0.875rem; } @media screen and (max-width: 479px) { .p-governance__effortbody-special01 ul { padding-left: 17px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortbody-special01 ul { padding-left: 17px; } } .p-governance__effortbody-special01 ul li::marker { font-weight: 600; } .p-governance__effortbody-special01 .p-governance__effortSubTit { color: var(--main-color); font-weight: 600; font-size: 1.25rem; position: relative; padding-left: 45px; min-height: 40px; display: flex; align-items: center; margin-bottom: 4px; } @media screen and (max-width: 479px) { .p-governance__effortbody-special01 .p-governance__effortSubTit { min-height: 40px; display: flex; align-items: center; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortbody-special01 .p-governance__effortSubTit { min-height: 40px; display: flex; align-items: center; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance__effortbody-special01 .p-governance__effortSubTit { font-size: 1.125rem; } } .p-governance__effortbody-special01 .p-governance__effortSubTit::before { content: ""; position: absolute; left: 0; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); } .p-governance__effortbody-special01 .p-governance__effortBlock:nth-of-type(1) .p-governance__effortSubTit::before { background: url("../img/sdgs/sdgs_01.png") no-repeat center/contain; } .p-governance__effortbody-special01 .p-governance__effortBlock:nth-of-type(2) .p-governance__effortSubTit::before { background: url("../img/sdgs/sdgs_02.png") no-repeat center/contain; } .p-governance__effortbody-special01 .p-governance__effortBlock:nth-of-type(3) .p-governance__effortSubTit::before { background: url("../img/sdgs/sdgs_03.png") no-repeat center/contain; } .p-governance__effortbody-special01 .p-governance__effortBlock:nth-of-type(4) .p-governance__effortSubTit::before { background: url("../img/sdgs/sdgs_04.png") no-repeat center/contain; } .p-governance__effortbody-special01 .p-governance__effortBlock:nth-of-type(5) .p-governance__effortSubTit::before { background: url("../img/sdgs/sdgs_05.png") no-repeat center/contain; } .p-governance__effortbody-special01 .p-governance__effortSubDesc { font-size: 1rem; line-height: 2em; } @media screen and (max-width: 479px) { .p-governance__effortbody-special01 .p-governance__effortSubDesc { margin-top: 10px; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortbody-special01 .p-governance__effortSubDesc { margin-top: 10px; line-height: 1.8em; } } .p-governance__effortDesc { width: 70%; line-height: 2.5em; color: var(--main-black); } @media screen and (max-width: 479px) { .p-governance__effortDesc { font-size: 0.875rem; width: 100%; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance__effortDesc { font-size: 1rem; width: 100%; line-height: 1.8em; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance__effortDesc { line-height: 2em; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-governance__effortDesc { line-height: 2em; } } .p-governance__effortDesc-w100 { width: 100%; } .p-governance-pageMenu { margin-top: 48px; margin-bottom: 96px; border-bottom: 1px solid #E3E3E3; } @media screen and (max-width: 479px) { .p-governance-pageMenu { display: none; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance-pageMenu { margin-bottom: 0; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance-pageMenu { margin-bottom: 0px; } } .p-governance-pageMenu__wrapper { width: 1180px; margin-inline: auto; } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-governance-pageMenu__wrapper { width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-governance-pageMenu__wrapper { width: 90%; } } .p-governance-pageMenu__menuList { display: flex; justify-content: space-around; } .p-governance-pageMenu__menuItem { padding-bottom: 16px; padding-inline: 32px; border-bottom: 3px solid #fff; transition: 0.4s; } @media screen and (min-width: 480px) and (max-width: 767px) { .p-governance-pageMenu__menuItem { padding-inline: 14px; } } .p-governance-pageMenu__menuItem:hover { border-bottom: 3px solid var(--main-color); opacity: 0.7; } .p-governance-pageMenu__menuItem-current { font-weight: 600; color: var(--main-color); border-bottom: 3px solid var(--main-color); opacity: 1; } .p-governance-pageMenu:has(.p-governance-pageMenu__menuItem:hover) .p-governance-pageMenu__menuItem-current { border-bottom: 3px solid #fff; } .p-governance-pageMenu:has(.p-governance-pageMenu__menuItem-current:hover) .p-governance-pageMenu__menuItem-current { border-bottom: 3px solid var(--main-color); opacity: 1; } .p-news__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-news__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-news__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-news__wrapper { padding-block: 64px; width: 90%; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-news__wrapper { padding-block: 96px; width: 90%; } } .p-news__sectionTitleWrapper { width: 240px; text-align: center; color: var(--main-black); } .p-news__sectionTitle-en { font-size: 3rem; font-weight: 800; } .p-news__newsContetsWrapper { width: 100%; } .p-news__news { display: flex; align-items: center; border-top: 1px solid #E5ECE9; padding-block: 24px; gap: 40px; } @media screen and (max-width: 479px) { .p-news__news { gap: 14px; padding-block: 20px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-news__news { gap: 14px; padding-block: 20px; } } .p-news__date { padding-inline: 40px; border-right: 1px solid #E5ECE9; color: var(--main-black); } @media screen and (max-width: 479px) { .p-news__date { padding-right: 14px; padding-left: 0; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-news__date { padding-right: 14px; padding-left: 0; } } .p-news__companyName { padding: 1px 20px; font-size: 0.625rem; background: #fff; color: var(--main-color); border-radius: 4px; width: fit-content; text-align: center; margin-bottom: 8px; display: inline-block; letter-spacing: 0.2em; border: 1px solid var(--main-color); } @media screen and (max-width: 479px) { .p-news__companyName { margin-bottom: 0px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-news__companyName { margin-bottom: 0px; } } .p-news__year { font-size: 0.875rem; } .p-news__days { font-size: 1.25rem; } .p-news__newsTtileWrapper { width: 100%; } .p-news__newsTitle { width: 100%; letter-spacing: 0.1em; } @media screen and (max-width: 479px) { .p-news__newsTitle { margin-top: 7px; font-size: 0.875rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-news__newsTitle { margin-top: 7px; font-size: 0.875rem; } } .p-news__newsLink { color: var(--main-black); } .p-news__newsLink:hover { text-decoration: underline; } .p-news__pageNationWrapper { margin-top: 48px; } @media screen and (max-width: 479px) { .p-news__pageNationWrapper { margin-top: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-news__pageNationWrapper { margin-top: 24px; } } .p-singleNews { width: 100%; overflow: hidden; } .p-singleNews__wrapper { width: 980px; max-width: 100%; padding-block: 128px; margin-inline: auto; } @media screen and (max-width: 479px) { .p-singleNews__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleNews__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-singleNews__wrapper { width: 90%; padding-block: 64px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-singleNews__wrapper { padding-block: 96px; max-width: 85%; } } .p-singleNews__title { font-size: 2rem; color: var(--main-color); margin-bottom: 24px; } @media screen and (max-width: 479px) { .p-singleNews__title { font-size: 1.5rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleNews__title { font-size: 1.5rem; } } .p-singleNews__dataAndCategory { display: flex; gap: 24px; align-items: center; margin-bottom: 48px; } @media screen and (max-width: 479px) { .p-singleNews__dataAndCategory { margin-bottom: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleNews__dataAndCategory { margin-bottom: 24px; } } .p-singleNews__date { font-size: 1.125rem; } @media screen and (max-width: 479px) { .p-singleNews__date { font-size: 0.875rem; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleNews__date { font-size: 0.875rem; } } .p-singleNews__category { font-size: 0.75rem; padding: 2px 32px; background: #fff; color: var(--main-color); border: 1px solid var(--main-color); border-radius: 4px; } .p-singleNews__body { line-height: 2.2em; border-top: 1px solid; padding-top: 48px; } @media screen and (max-width: 479px) { .p-singleNews__body { padding-top: 24px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleNews__body { padding-top: 24px; } } .p-singleNews__body p { margin: 0; } @media screen and (max-width: 479px) { .p-singleNews__body p { font-size: 1rem; line-height: 1.8em; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleNews__body p { font-size: 1rem; line-height: 1.8em; } } .p-singleNews__body { /* 格タグのレイアウト */ } .p-singleNews__body h1, .p-singleNews__body h2 { font-size: 1.125rem; background: var(--main-color); color: #fff; padding: 16px 0 !important; padding-left: 16px !important; margin: 24px 0 12px 0 !important; } .p-singleNews__body h3 { font-size: 1rem; color: black; padding-left: 8px !important; border-left: 5px solid var(--main-color); margin: 16px 0 12px 0 !important; padding-block: 6px !important; font-weight: 800; } .p-singleNews__body h4 { font-size: 1rem; font-weight: 800; color: black; margin: 16px 0 12px 0 !important; } .p-singleNews__body h4::before { content: "\f13a"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 8px; color: var(--main-color); font-size: 1.25rem; position: relative; top: 2px; } .p-singleNews__body ol, .p-singleNews__body ul { counter-reset: number; list-style-type: none !important; padding: 0.5em; } .p-singleNews__body ol li, .p-singleNews__body ul li { font-size: 0.875rem; position: relative; padding-left: 30px; line-height: 1.5em; padding: 0.1em 0.5em 0.1em 25px; list-style-type: none !important; } .p-singleNews__body ol li::before, .p-singleNews__body ul li::before { position: absolute; counter-increment: number; content: counter(number); display: flex; background: var(--main-color); color: #fff; font-weight: unset; font-size: 0.625rem; border-radius: 50%; left: 0; width: 16px; height: 16px; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); flex-direction: column; justify-content: center; } .p-singleNews__body ul li { padding: 0.1em 0.5em 0.1em 16px; } .p-singleNews__body ul li::before { content: ""; width: 6px; height: 6px; } .p-singleNews__body blockquote { position: relative; width: fit-content; max-width: 100%; word-break: break-all; padding: 10px 36px; box-sizing: border-box; font-style: italic; color: #555; background: #efefef; margin-block: 16px; margin-inline: 0; } .p-singleNews__body blockquote:before { display: inline-block; position: absolute; top: 7px; left: 10px; content: "\f10d"; font-family: FontAwesome; color: #cfcfcf; font-size: 0.875rem; line-height: 1; font-weight: 900; } .p-singleNews__body blockquote:after { display: inline-block; position: absolute; bottom: 5px; right: 15px; text-align: center; content: "\f10e"; font-family: FontAwesome; color: #cfcfcf; font-size: 0.875rem; line-height: 1; font-weight: 900; } .p-singleNews__body a { color: #337ab7; text-decoration: underline; transition: 0.4s; } .p-singleNews__body a:hover { opacity: 0.6; } .p-singleNews__body img { max-width: 100% !important; height: auto; object-fit: cover; } .p-singleNews__body strong { font-weight: 800; } .p-singleNews__returnArchiveBtn { width: 350px; display: flex; justify-content: center; margin-top: 72px; margin-inline: auto; padding: 16px 32px; } @media screen and (max-width: 479px) { .p-singleNews__returnArchiveBtn { margin-top: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-singleNews__returnArchiveBtn { margin-top: 32px; } } .p-singleNews__returnArchiveBtn:hover { border: 1px solid var(--main-color); } .p-404__wrapper { width: 1180px; max-width: 100%; padding-block: 128px; padding-top: 185px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 48px; text-align: center; justify-content: center; } @media screen and (max-width: 479px) { .p-404__wrapper { width: 90%; padding-block: 144px; padding-bottom: 64px; flex-direction: column; gap: 32px; } } @media screen and (min-width: 480px) and (max-width: 767px) { .p-404__wrapper { width: 90%; padding-block: 144px; padding-bottom: 64px; gap: 48px; } } @media screen and (min-width: 768px) and (max-width: 959px) { .p-404__wrapper { width: 90%; padding-block: 144px; padding-bottom: 64px; gap: 32px; } } @media screen and (min-width: 960px) and (max-width: 1279px) { .p-404__wrapper { width: 90%; gap: 48px; padding-block: 176px; padding-bottom: 96px; } } .p-404__img { max-width: 500px; } .p-404__tit { width: 100%; display: inline-block; font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; } @media screen and (max-width: 479px) { .p-404__tit { font-size: 1.25rem; } } .p-404 .c-viewAllBtn:hover { border: 1px solid var(--main-color); } @media print { * { opacity: 1 !important; } html { zoom: 0.6; overflow-x: hidden; } [data-device=sp] { display: none; } .c-pageHeader { padding-top: 0; } body:not(.home) .l-header { position: relative; } .l-header { position: relative; background: #ffffff !important; } .l-header__navItem { color: #000000; z-index: 99999999999; } .c-pageHeader__wrapper { margin-top: 0; } .c-pageTitle__wrapper { margin-inline: calc(50% - 90vw); } [class$=__wrapper] { width: 90%; } .p-top-mainVisual__catchCopy-ja { font-size: 66px; } .p-top-mainVisual__catchCopy-en { font-size: 120px; } .p-top-mainVisual__wrapper { width: 100%; } .p-top-mainVisual::after { border-left: 200vw solid var(--main-color); } .p-top-news__news { padding-block: 45px; } .p-top-message { height: 100%; } .p-top-about { background: #fff; } .p-top-business { background: var(--main-color); } .p-top-recruit__wrapper { height: 100%; } .p-history-story__wrapper { width: 100%; } .p-history-story .p-history-nowadays { padding-block: 150px; height: 100%; margin: 0; } .p-history-story .p-history-developmentPhase { width: 90%; display: flex; justify-content: end; } .p-movie-movie__startBtn { display: none; } .p-singleGroup__wrapper { width: 100%; } .p-singleGroup-overview__imagePic { width: 100%; height: 750px; margin: 0; } .p-sustainability__content { padding-block: 72px; } .c-sustainability__bg { width: unset; } .p-404-contents { padding-top: 0px; } .p-404-contents__wrapper { padding-block: 200px; } }/*# sourceMappingURL=style.css.map */