@charset "UTF-8"; /* reset css ----------------------------------------------------------------- */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; padding: 0; margin: 0; } p, body, h1, h2, h3, h4 { margin: 0; padding: 0; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* base css ----------------------------------------------------------------- */ :root { --black: #000000; --grey-252525: #252525; --grey-666: #666666; --grey-999: #999999; --grey-300: #585858; --grey-100: #f4f4f4; --font-family_cor: "Cormorant Garamond", serif; --font-family_eb: "EB Garamond", sans-serif; --font-family_mincyo: "Shippori Mincho", serif; --font-family_mincyoB1: "Shippori Mincho B1", serif; --font-family_noto: "Noto Sans JP", sans-serif; } a { text-decoration: none; } img { max-width: 100%; height: auto; vertical-align: unset; } /* animation css ----------------------------------------------------------------- */ .fadeInObserve { opacity: 0; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; } .fadeInObserve.is-active { opacity: 1; } /* l-contents ----------------------------------------------------------------- */ .l-contents { padding-top: 93px; padding-bottom: 100px; } @media (max-width: 766px) { .l-contents { padding-top: 70px; padding-bottom: 66px; } } /* l-container ----------------------------------------------------------------- */ .l-container { max-width: 1620px; width: 100%; margin: 0 auto; padding: 0 20px; } @media (max-width: 766px) { .l-container { padding: 0; } } /* l-main ----------------------------------------------------------------- */ .l-main { color: var(--grey-default); font-family: var(--font-family_mincyoB1); font-weight: var(--font-weight_normal); } /* c-heading ----------------------------------------------------------------- */ .c-heading { font-family: var(--font-family_mincyoB1); font-size: 12px; line-height: 1.4; color: var(--black); margin-top: 2px; } @media (max-width: 766px) { .c-heading { text-align: center; margin-top: 4px; } } /* p-archive ----------------------------------------------------------------- */ .p-archive__headingBox { text-align: center; padding-top: 3.6rem; } @media (max-width: 766px) { .p-archive__headingBox { background: var(--grey-100); padding-top: 44px; padding-bottom: 33px; margin-bottom: 30px; } } .p-archive__heading { display: block; font-weight: 200; font-size: 72px; line-height: 1; margin-bottom: 20px; font-family: var(--font-family_cor); color: var(--grey-999); } @media (max-width: 766px) { .p-archive__heading { color: var(--grey-666); font-size: 50px; } } .p-archive__heading span { padding-top: 12px; display: block; font-size: 48px; font-style: normal; } @media (max-width: 766px) { .p-archive__heading span { color: var(--grey-666); font-size: 32px; } } .p-archive__heading__p { display: block; font-size: 14px; text-align: center; line-height: 170%; color: var(--grey-300); } .p-archive__subHeading { display: block; font-family: var(--font-family_mincyoB1); font-size: 24px; line-height: 1; letter-spacing: 0.83em; color: var(--black); margin-top: 23px; } @media (max-width: 766px) { .p-archive__subHeading { font-size: 12px; color: var(--grey-300); } } .p-archive__layoutBox { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 65px; margin-top: 90px; } @media (max-width: 766px) { .p-archive__layoutBox { gap: 47px; margin-top: 52px; } } /* p-layoutA ----------------------------------------------------------------- */ .p-layoutA { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1.5%; } @media (max-width: 766px) { .p-layoutA { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 47px 15px; } } .p-layoutA__item:nth-of-type(1) { max-width: 47.5%; width: 100%; } @media (max-width: 766px) { .p-layoutA__item:nth-of-type(1) { max-width: 100%; } } .p-layoutA__item:nth-of-type(2), .p-layoutA__item:nth-of-type(3) { max-width: 24.75%; width: 100%; } @media (max-width: 766px) { .p-layoutA__item:nth-of-type(2), .p-layoutA__item:nth-of-type(3) { max-width: 44.1%; } } .p-layoutA__itemLink { display: block; width: 100%; height: auto; opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } @media (min-width: 767px) { .p-layoutA__itemLink:hover { opacity: 0.8; } } .p-layoutA__imgBox { width: 100%; } .p-layoutA__img { width: 100%; } /* p-layoutB ----------------------------------------------------------------- */ .p-layoutB { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1.5%; } @media (max-width: 766px) { .p-layoutB { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 47px 15px; } } .p-layoutB__item:nth-of-type(1) { max-width: 47.5%; width: 100%; } @media (max-width: 766px) { .p-layoutB__item:nth-of-type(1) { max-width: 100%; } } .p-layoutB__item:nth-of-type(2), .p-layoutB__item:nth-of-type(3) { max-width: 24.75%; width: 100%; } @media (max-width: 766px) { .p-layoutB__item:nth-of-type(2), .p-layoutB__item:nth-of-type(3) { max-width: 66.4%; } } .p-layoutB__itemLink { display: block; width: 100%; height: auto; opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } @media (min-width: 767px) { .p-layoutB__itemLink:hover { opacity: 0.8; } } .p-layoutB__imgBox { width: 100%; } .p-layoutB__img { width: 100%; } /* p-layoutC ----------------------------------------------------------------- */ .p-layoutC { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1.5%; } @media (max-width: 766px) { .p-layoutC { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 47px 15px; } } .p-layoutC__item:nth-of-type(1), .p-layoutC__item:nth-of-type(2) { max-width: 24.75%; width: 100%; } @media (max-width: 766px) { .p-layoutC__item:nth-of-type(1), .p-layoutC__item:nth-of-type(2) { max-width: 100%; } } .p-layoutC__item:nth-of-type(3) { max-width: 47.5%; width: 100%; } @media (max-width: 766px) { .p-layoutC__item:nth-of-type(3) { max-width: 100%; } } .p-layoutC__itemLink { display: block; width: 100%; height: auto; opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } @media (min-width: 767px) { .p-layoutC__itemLink:hover { opacity: 0.8; } } .p-layoutC__imgBox { width: 100%; } .p-layoutC__img { width: 100%; } /* p-layoutD ----------------------------------------------------------------- */ .p-layoutD { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1.5%; } @media (max-width: 766px) { .p-layoutD { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 47px; } } .p-layoutD__item:nth-of-type(1), .p-layoutD__item:nth-of-type(3) { max-width: 24.75%; width: 100%; } @media (max-width: 766px) { .p-layoutD__item:nth-of-type(1), .p-layoutD__item:nth-of-type(3) { max-width: 66.4%; } } .p-layoutD__item:nth-of-type(2) { max-width: 100%; width: 100%; } @media (max-width: 766px) { .p-layoutD__item:nth-of-type(2) { max-width: 100%; } } .p-layoutD__itemLink { display: block; width: 100%; height: auto; opacity: 1; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } @media (min-width: 767px) { .p-layoutD__itemLink:hover { opacity: 0.8; } } .p-layoutD__imgBox { width: 100%; } .p-layoutD__img { width: 100%; } /* p-layoutD ----------------------------------------------------------------- */ /* アニメーション設定 */ .scr-target { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } .scr-target.is-active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: 1s; transition: 1s; } /* u-display-none ----------------------------------------------------------------- */ .u-displayNone--PU { display: block; } @media (max-width: 766px) { .u-displayNone--PU { display: none; } } .u-displayNone--PO { display: none; } @media (max-width: 766px) { .u-displayNone--PO { display: block; } } .u-displayNone--flexPU { display: block; } @media (max-width: 766px) { .u-displayNone--flexPU { display: none; } } .u-displayNone--flexPO { display: none; } @media (max-width: 766px) { .u-displayNone--flexPO { display: -webkit-box; display: -ms-flexbox; display: flex; } }