/* ========================================================================================= ^^ Custom properties ============================================================================================ ^^ */ :root { --font-noto-sans: "Noto Sans JP", sans-serif; --font-inter: "Inter", sans-serif; --font-weight-thin: 100; --font-weight-extra-light: 200; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semi-bold: 600; --font-weight-bold: 700; --font-weight-extra-bold: 800; --font-weight-black: 900; --black: #000; --white: #fff; --font-base-color: #222; --bg-color: #f7f7f7; --footer-bg-color: #222; --reference-border: #ddd; --reference-category-color1: #f49d24; --section-title-border: #ddd; --list-circle-color: #f49d24; --layer-color: 34, 34, 34; --modal-title-border: #ddd; --modal-title-circle: #f49d24; --min-layout-width: 360; --max-layout-width: 1120; --base-font-size: 16; --rem-ratio: calc(1rem / var(--base-font-size)); --min-ratio: calc(1 / var(--min-layout-width) * 100vw); --max-ratio: calc(1 / var(--max-layout-width) * 100vw); --2025-reference-category-color1: #aa97c4; --2025-modal-title-circle: #695c98; } /* ========================================================================================= ^^ Reset ============================================================================================ ^^ */ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { 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; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } * { box-sizing: border-box; } html { height: 100%; } main { display: block; } @media (max-width: 1920px) { main { margin: 0 auto; } } .content { width: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0 0 1rem; } ul, ol { padding: 0; margin: 0; list-style: none; } dl { margin: 0; } dt, dd { padding: 0; margin: 0; } img { max-width: none; width: 100%; height: auto; vertical-align: top; } figure { margin: 0; } em { font-weight: bold; font-style: normal; } button { padding: 0; border-radius: 0; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } button:focus { outline: none; } a { text-decoration: none; } a:link { color: var(--font-color); } a:visited { color: var(--font-color); } a:hover { color: var(--font-color); } a:focus { color: var(--font-color); } /* ======================================================================================== ^^ Typography =========================================================================================== ^^ */ html { font-size: 100%; } body { width: 100vw; background-color: var(--bg-color); font-family: var(--font-noto-sans); font-size: 100%; color: var(--font-base-color); font-weight: var(--font-weight-medium); line-height: 1.5; font-feature-settings: "palt"; } @media (min-width: 768px) { body { width: 100%; } } abbr[title] { text-decoration: none; } a:link { color: var(--font-noto-sans); text-decoration: none; } a:visited { color: var(--font-noto-sans); text-decoration: none; } a:hover { color: var(--font-noto-sans); text-decoration: none; opacity: 0.7; } a:focus { color: var(--font-noto-sans); text-decoration: none; } sub { font-size: calc(10 * var(--min-ratio)); } @media (min-width: 768px) { sub { font-size: calc(10 * var(--max-ratio)); } } @media (min-width: 1120px) { sub { font-size: calc(10 * var(--rem-ratio)); } } /* ======================================================================================== ^^ Utilities ============================================================================================ ^^ */ .tel-link, a[href^="tel:"] { pointer-events: all; cursor: pointer; } @media (min-width: 768px) { .tel-link, a[href^="tel:"] { pointer-events: none; cursor: default; } } @media (min-width: 768px) { .is-sp { display: none !important; } } .is-pc { display: none !important; } @media (min-width: 768px) { .is-pc { display: block !important; } } @media not all and (min-width: 768px) { .is-pc-br { display: none; } } @media (min-width: 768px) { .is-sp-br { display: none; } } .is-hide { display: none !important; } a { transition: all 0.3s linear; } .is-fixed { position: fixed; top: 0; left: 0; z-index: -1; } .screen-reader-text { clip: rect(0, 0, 1px, 1px); overflow: hidden; position: absolute; top: 0; left: 0; } /* ========================================================================================= ^^ Font ============================================================================================ ^^ */ .u-noto-sans { font-family: var(--font-noto-sans); } .u-inter { font-family: var(--font-inter); } /* ========================================================================================= ^^ Text transform ============================================================================================ ^^ */ .u-uppercase { text-transform: uppercase; } .u-lowercase { text-transform: lowercase; } .u-capitalize { text-transform: capitalize; } .u-text-border { color: var(--white); text-shadow: 1px 1px 0 #222, -1px 1px 0 #222, 1px -1px 0 #222, -1px -1px 0 #222, 1px 0px 0 #222, 0px 1px 0 #222, -1px 0px 0 #222, 0px -1px 0 #222; } /* ========================================================================================= ^^ Marker ============================================================================================ ^^ */ .u-marker { background: linear-gradient(to bottom, var(--color-brown2) 0%, var(--color-brown2) 100%); } .u-marker--20 { background: linear-gradient(to bottom, transparent 80%, var(--color-brown2) 80%, var(--color-brown2) 100%); } .u-marker--20-10 { background: linear-gradient(to bottom, transparent 80%, var(--color-brown2) 80%, var(--color-brown2) 95%, transparent 95%, transparent 100%); } /* ========================================================================================= ^^ Break ============================================================================================ ^^ */ @media (min-width: 768px) { .u-pc-hide-br { display: none; } } @media not all and (min-width: 768px) { .u-sp-hide-br { display: none; } } /* ========================================================================================= ^^ Float ============================================================================================ ^^ */ .u-float-left { float: left; } .u-float-right { float: right; } /* ========================================================================================= ^^ Clear ============================================================================================ ^^ */ .u-clear-left { clear: left; } .u-clear-right { clear: right; } .u-clear-both { clear: both; } /* ========================================================================================= ^^ Header ============================================================================================ ^^ */ .l-site-header { width: 100vw; padding: calc(16 * var(--min-ratio)) calc(17 * var(--min-ratio)) 0; position: absolute; top: 0; left: 0; z-index: 6000; } @media (min-width: 768px) { .l-site-header { width: 100%; padding: calc(40 * var(--max-ratio)) calc(64 * var(--max-ratio)) 0; } } @media (min-width: 1120px) { .l-site-header { padding: calc(40 * var(--rem-ratio)) calc(64 * var(--rem-ratio)) 0; } } .l-site-header__inner { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-start; } .l-site-header .c-site-logo { width: calc(184 * var(--min-ratio)); } @media (min-width: 768px) { .l-site-header__inner { align-items: center; } .l-site-header .c-site-logo { width: calc(264 * var(--max-ratio)); } } @media (min-width: 1120px) { .l-site-header .c-site-logo { width: calc(264 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Footer ============================================================================================ ^^ */ .l-site-footer { width: 100vw; height: calc(320 * var(--min-ratio)); padding: calc(73 * var(--min-ratio)) calc(24 * var(--min-ratio)) 0; background-color: var(--footer-bg-color); position: relative; } @media (min-width: 768px) { .l-site-footer { width: 100%; height: calc(416 * var(--max-ratio)); padding: calc(118 * var(--max-ratio)) calc(65 * var(--max-ratio)) 0; } } @media (min-width: 1120px) { .l-site-footer { height: calc(416 * var(--rem-ratio)); padding: calc(118 * var(--rem-ratio)) calc(65 * var(--rem-ratio)) 0; } } .l-site-footer__inner { width: 100%; height: 100%; } .l-site-footer .c-footer-logo { width: calc(174 * var(--min-ratio)); margin-bottom: calc(57 * var(--min-ratio)); } @media (min-width: 768px) { .l-site-footer .c-footer-logo { width: calc(264 * var(--max-ratio)); margin-bottom: calc(48 * var(--max-ratio)); } } @media (min-width: 1120px) { .l-site-footer .c-footer-logo { width: calc(264 * var(--rem-ratio)); margin-bottom: calc(48 * var(--rem-ratio)); } } .l-site-footer .c-social-links { margin-bottom: calc(53 * var(--min-ratio)); } @media (min-width: 768px) { .l-site-footer .c-social-links { margin-bottom: calc(45 * var(--max-ratio)); } } @media (min-width: 1120px) { .l-site-footer .c-social-links { margin-bottom: calc(45 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Section ============================================================================================ ^^ */ .l-section { width: 100%; overflow: hidden; } .l-section__inner { max-width: calc(1024 * var(--rem-ratio)); width: 100%; margin-inline: auto; padding-right: calc(23 * var(--min-ratio)); padding-left: calc(23 * var(--min-ratio)); font-size: calc(14 * var(--min-ratio)); font-weight: var(--font-weight-regular); line-height: 2; } @media (min-width: 768px) { .l-section__inner { padding-right: calc(20 * var(--max-ratio)); padding-left: calc(20 * var(--max-ratio)); font-size: calc(16 * var(--max-ratio)); line-height: 2; } } @media (min-width: 1120px) { .l-section__inner { padding-right: 0; padding-left: 0; font-size: calc(16 * var(--rem-ratio)); } } .l-section__inner p:last-of-type { margin-bottom: 0; } /* ========================================================================================= ^^ Site logo ============================================================================================ ^^ */ .c-site-logo { margin: 0; } /* ========================================================================================= ^^ Footer logo ============================================================================================ ^^ */ .c-footer-logo { margin: 0; } /* ========================================================================================= ^^ Social links ============================================================================================ ^^ */ .c-social-links { display: grid; grid-template-columns: repeat(auto-fill, calc(16 * var(--min-ratio))); grid-template-rows: calc(16 * var(--min-ratio)); -moz-column-gap: calc(38 * var(--min-ratio)); column-gap: calc(38 * var(--min-ratio)); } @media (min-width: 768px) { .c-social-links { grid-template-columns: repeat(auto-fill, calc(20 * var(--max-ratio))); grid-template-rows: calc(20 * var(--max-ratio)); -moz-column-gap: calc(40 * var(--max-ratio)); column-gap: calc(40 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-social-links { grid-template-columns: repeat(auto-fill, calc(20 * var(--rem-ratio))); grid-template-rows: calc(20 * var(--rem-ratio)); -moz-column-gap: calc(40 * var(--rem-ratio)); column-gap: calc(40 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Copyright ============================================================================================ ^^ */ .c-copyright { margin: 0; font-family: var(--font-inter); font-size: calc(8.5 * var(--min-ratio)); color: #fff; line-height: 1; } @media (min-width: 768px) { .c-copyright { font-size: calc(12 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-copyright { font-size: calc(12 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Page top ============================================================================================ ^^ */ .c-page-top { width: calc(40 * var(--min-ratio)); margin-bottom: 0; aspect-ratio: 1; position: absolute; right: calc(24 * var(--min-ratio)); bottom: calc(256 * var(--min-ratio)); z-index: 6000; } @media (min-width: 768px) { .c-page-top { width: calc(64 * var(--max-ratio)); right: calc(65 * var(--max-ratio)); bottom: calc(288 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-page-top { width: calc(64 * var(--rem-ratio)); right: calc(65 * var(--rem-ratio)); bottom: calc(288 * var(--rem-ratio)); } } .c-page-top.is-hidden { display: none; } .c-page-top.is-fixed-pos { position: fixed; bottom: calc(24 * var(--min-ratio)); } @media (min-width: 768px) { .c-page-top.is-fixed-pos { bottom: calc(65 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-page-top.is-fixed-pos { bottom: calc(65 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Reference list ============================================================================================ ^^ */ .c-reference-list { border-top: 1px solid var(--reference-border); } .c-reference-list__item { padding: calc(43 * var(--min-ratio)) 0 calc(36 * var(--min-ratio)); border-bottom: 1px solid var(--reference-border); display: grid; grid-template-columns: 25.7272727273% 27.303030303% 6.0606060606% 40.9090909091%; grid-template-rows: auto auto auto auto; } @media (min-width: 768px) { .c-reference-list__item { padding: calc(70 * var(--max-ratio)) 0 calc(64 * var(--max-ratio)); grid-template-columns: calc(100 * var(--max-ratio)) calc(93 * var(--max-ratio)) calc(575 * var(--max-ratio)) calc(64 * var(--max-ratio)) calc(192 * var(--max-ratio)); grid-template-rows: auto auto auto; } } @media (min-width: 1120px) { .c-reference-list__item { padding: calc(70 * var(--rem-ratio)) 0 calc(64 * var(--rem-ratio)); grid-template-columns: calc(100 * var(--rem-ratio)) calc(93 * var(--rem-ratio)) calc(575 * var(--rem-ratio)) calc(64 * var(--rem-ratio)) calc(192 * var(--rem-ratio)); } } .c-reference-list__title { padding: calc(16 * var(--min-ratio)) 0 0; margin-bottom: calc(21 * var(--min-ratio)); font-size: calc(16 * var(--min-ratio)); line-height: 2; font-weight: var(--font-weight-semi-bold); grid-column: 1/5; grid-row: 2/3; } @media (min-width: 768px) { .c-reference-list__title { padding-top: 0; margin-bottom: calc(2 * var(--max-ratio)); font-size: calc(18 * var(--max-ratio)); line-height: 1.4; grid-column: 3/4; grid-row: 1/2; } } @media (min-width: 1120px) { .c-reference-list__title { margin-bottom: calc(2 * var(--rem-ratio)); font-size: calc(18 * var(--rem-ratio)); } } .c-reference-list__date { margin-bottom: 0; font-family: var(--font-inter); font-size: calc(14 * var(--min-ratio)); line-height: 1.2; font-weight: var(--font-weight-regular); grid-column: 1/2; grid-row: 1/2; } @media (min-width: 768px) { .c-reference-list__date { padding-top: calc(2 * var(--max-ratio)); font-size: calc(16 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-reference-list__date { padding-top: calc(2 * var(--rem-ratio)); font-size: calc(16 * var(--rem-ratio)); } } .c-reference-list__category { height: calc(20 * var(--min-ratio)); margin-bottom: 0; grid-column: 2/5; grid-row: 1/2; } @media (min-width: 768px) { .c-reference-list__category { height: calc(20 * var(--max-ratio)); margin-top: calc(3 * var(--max-ratio)); grid-column: 2/3; } } @media (min-width: 1120px) { .c-reference-list__category { height: calc(20 * var(--rem-ratio)); margin-top: calc(3 * var(--rem-ratio)); } } .c-reference-list__category-inner { height: 100%; padding: calc(1 * var(--min-ratio)) calc(10 * var(--min-ratio)) 0; border-radius: calc(4 * var(--min-ratio)); border: 1px solid var(--reference-category-color1); font-size: calc(14 * var(--min-ratio)); color: var(--reference-category-color1); line-height: 1; font-weight: var(--font-weight-semi-bold); vertical-align: top; display: inline-flex; justify-content: center; align-items: center; } .page-wnpp-2025 .c-reference-list__category-inner { border-color: var(--2025-reference-category-color1); color: var(--2025-reference-category-color1); } @media (min-width: 768px) { .c-reference-list__category-inner { padding: calc(2.2 * var(--max-ratio)) calc(10 * var(--max-ratio)) 0; border-radius: calc(4 * var(--max-ratio)); font-size: calc(14 * var(--max-ratio)); } .page-wnpp-2025 .c-reference-list__category-inner { padding-top: calc(1.2 * var(--max-ratio)); } .is-mac.is-firefox .c-reference-list__category-inner { padding-top: 0; padding-bottom: calc(1.05 * var(--max-ratio)); } .is-mac.is-chrome .c-reference-list__category-inner { padding-top: calc(1 * var(--max-ratio)); padding-bottom: calc(2 * var(--max-ratio)); } .is-mac.is-safari .c-reference-list__category-inner { padding-top: calc(2 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-reference-list__category-inner { padding: calc(1 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) 0; border-radius: calc(4 * var(--rem-ratio)); font-size: calc(14 * var(--rem-ratio)); } .page-wnpp-2025 .c-reference-list__category-inner { padding-top: calc(1.2 * var(--rem-ratio)); } .is-mac.is-firefox .c-reference-list__category-inner { padding-top: 0; padding-bottom: calc(1.05 * var(--rem-ratio)); } .is-mac.is-chrome .c-reference-list__category-inner { padding-top: calc(1 * var(--rem-ratio)); padding-bottom: calc(2 * var(--rem-ratio)); } .is-mac.is-safari .c-reference-list__category-inner { padding-top: calc(2 * var(--rem-ratio)); } } .c-reference-list__excerpt { margin-bottom: 0; font-size: calc(14 * var(--min-ratio)); line-height: 2; font-weight: var(--font-weight-regular); grid-column: 1/3; grid-row: 3/4; } @media (min-width: 768px) { .c-reference-list__excerpt { margin-bottom: calc(-12 * var(--max-ratio)); font-size: calc(16 * var(--max-ratio)); line-height: 1.4; grid-column: 3/4; grid-row: 2/3; } } @media (min-width: 1120px) { .c-reference-list__excerpt { margin-bottom: calc(-12 * var(--rem-ratio)); font-size: calc(16 * var(--rem-ratio)); } } .c-reference-list__link { margin: calc(8 * var(--min-ratio)) 0 0; font-size: calc(14 * var(--min-ratio)); line-height: 2.2857142857; font-weight: var(--font-weight-medium); display: inline-block; grid-column: 1/5; grid-row: 4/5; } @media (min-width: 768px) { .c-reference-list__link { margin-top: 0; font-size: calc(16 * var(--max-ratio)); line-height: 2; text-align: right; grid-column: 3/4; grid-row: 3/4; } } @media (min-width: 1120px) { .c-reference-list__link { font-size: calc(16 * var(--rem-ratio)); } } .c-reference-list__link button, .c-reference-list__link a { padding: 0 calc(25 * var(--min-ratio)) 0 0; border: none; background: url(../images/common/icon-more.svg) no-repeat 100% 50%/calc(18 * var(--min-ratio)) auto; display: inline-block; } @media (min-width: 768px) { .c-reference-list__link button, .c-reference-list__link a { padding-right: calc(25 * var(--max-ratio)); background-size: calc(18 * var(--max-ratio)) auto; } } @media (min-width: 1120px) { .c-reference-list__link button, .c-reference-list__link a { padding-right: calc(25 * var(--rem-ratio)); background-size: calc(18 * var(--rem-ratio)) auto; } } .c-reference-list__image { border-radius: calc(12 * var(--min-ratio)); overflow: hidden; grid-column: 4/5; grid-row: 3/4; } @media (min-width: 768px) { .c-reference-list__image { border-radius: calc(16 * var(--max-ratio)); grid-column: 5/6; grid-row: 1/4; } } @media (min-width: 1120px) { .c-reference-list__image { border-radius: calc(16 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Section title ============================================================================================ ^^ */ .c-section-title { padding-bottom: calc(18 * var(--min-ratio)); margin-bottom: calc(40 * var(--min-ratio)); border-bottom: 1px solid var(--section-title-border); font-size: calc(24 * var(--min-ratio)); line-height: 1.6166666667; font-weight: var(--font-weight-semi-bold); } @media (min-width: 768px) { .c-section-title { padding-bottom: calc(25 * var(--max-ratio)); margin-bottom: calc(50 * var(--max-ratio)); font-size: calc(32 * var(--max-ratio)); line-height: 1.68; } } @media (min-width: 1120px) { .c-section-title { padding-bottom: calc(25 * var(--rem-ratio)); margin-bottom: calc(50 * var(--rem-ratio)); font-size: calc(32 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Content image ============================================================================================ ^^ */ .c-content-image { border-radius: calc(16 * var(--min-ratio)); overflow: hidden; } @media (min-width: 768px) { .c-content-image { border-radius: calc(24 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-content-image { border-radius: calc(24 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Content text ============================================================================================ ^^ */ .c-content-text p { margin-bottom: calc(30 * var(--min-ratio)); } @media (min-width: 768px) { .c-content-text p { margin-bottom: calc(40 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-content-text p { margin-bottom: calc(40 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Modal ============================================================================================ ^^ */ .c-modal { width: 100%; height: 100%; display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 7000; } .c-modal.is-active { display: flex; } .c-modal__layer { width: 100%; height: 100%; background-color: rgba(var(--layer-color), 0.6); position: absolute; z-index: 7100; } .c-modal__close { width: calc(40 * var(--min-ratio)); aspect-ratio: 1; position: absolute; top: calc(13 * var(--min-ratio)); right: calc(13 * var(--min-ratio)); } @media (min-width: 480px) { .c-modal__close { width: calc(30 * var(--min-ratio)); } } @media (min-width: 768px) { .c-modal__close { width: calc(40 * var(--max-ratio)); top: calc(35 * var(--max-ratio)); right: calc(35 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-modal__close { width: calc(40 * var(--rem-ratio)); top: calc(35 * var(--rem-ratio)); right: calc(35 * var(--rem-ratio)); } } .c-modal__container { max-width: calc(968 * var(--rem-ratio)); width: 91.1111111111%; max-height: 90vh; padding: calc(40 * var(--min-ratio)) calc(25 * var(--min-ratio)); border-radius: calc(40 * var(--min-ratio)); background-color: #fff; position: relative; z-index: 7200; } @media (min-width: 768px) { .c-modal__container { padding: calc(80 * var(--max-ratio)); border-radius: calc(80 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-modal__container { padding: calc(80 * var(--rem-ratio)); border-radius: calc(80 * var(--rem-ratio)); } } @media (min-width: 480px) { .c-modal__body { height: 70vw; overflow: auto; } } @media (min-width: 768px) { .c-modal__body { height: auto; overflow: visible; } } .c-modal__title { padding: 0 0 calc(8 * var(--min-ratio)) calc(20 * var(--min-ratio)); margin-bottom: calc(16 * var(--min-ratio)); border-bottom: 1px solid var(--modal-title-border); position: relative; top: 0; left: 0; } @media (min-width: 768px) { .c-modal__title { padding: 0 0 calc(3 * var(--max-ratio)) calc(28 * var(--max-ratio)); margin-bottom: calc(14 * var(--max-ratio)); font-size: calc(24 * var(--max-ratio)); line-height: 2.25; } } @media (min-width: 1120px) { .c-modal__title { padding: 0 0 calc(3 * var(--rem-ratio)) calc(28 * var(--rem-ratio)); margin-bottom: calc(14 * var(--rem-ratio)); font-size: calc(24 * var(--rem-ratio)); } } .c-modal__title::before { width: calc(16 * var(--min-ratio)); background-color: var(--modal-title-circle); border-radius: 50%; aspect-ratio: 1; content: " "; display: block; position: absolute; top: calc(5 * var(--min-ratio)); left: 0; } .page-wnpp-2025 .c-modal__title::before { background-color: var(--2025-modal-title-circle); } @media (min-width: 480px) { .c-modal__title::before { width: calc(10 * var(--min-ratio)); top: calc(2 * var(--min-ratio)); } } @media (min-width: 768px) { .c-modal__title::before { width: calc(20 * var(--max-ratio)); top: calc(19 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-modal__title::before { width: calc(20 * var(--rem-ratio)); top: calc(19 * var(--rem-ratio)); } } .c-modal figure { overflow: auto; } @media (min-width: 768px) { .c-modal figure { overflow: hidden; } } .c-modal figcaption { font-size: calc(11 * var(--min-ratio)); font-weight: var(--font-weight-regular); line-height: 2.9090909091; } @media (min-width: 768px) { .c-modal figcaption { font-size: calc(12 * var(--max-ratio)); line-height: 2.6666666667; } } @media (min-width: 1120px) { .c-modal figcaption { font-size: calc(12 * var(--rem-ratio)); } } .c-modal__note { margin-bottom: 0; font-size: calc(11 * var(--min-ratio)); font-weight: var(--font-weight-regular); line-height: 2.9090909091; } @media (min-width: 768px) { .c-modal__note { font-size: calc(12 * var(--max-ratio)); line-height: 2.6666666667; } } @media (min-width: 1120px) { .c-modal__note { font-size: calc(12 * var(--rem-ratio)); } } .c-modal__pdf { margin-bottom: 0; } @media (min-width: 768px) { .c-modal__pdf { text-align: right; } } .c-modal__pdf a { padding-right: calc(20 * var(--min-ratio)); background: url(../images/common/icon-pdf.svg) no-repeat 100% 50%; background-size: calc(14 * var(--min-ratio)) auto; font-size: calc(14 * var(--min-ratio)); font-weight: var(--font-weight-medium); line-height: 1; } @media (min-width: 480px) { .c-modal__pdf a { font-size: calc(12 * var(--min-ratio)); } } @media (min-width: 768px) { .c-modal__pdf a { padding-right: calc(20 * var(--max-ratio)); background-size: calc(14 * var(--max-ratio)) auto; font-size: calc(16 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-modal__pdf a { padding-right: calc(20 * var(--rem-ratio)); background-size: calc(14 * var(--rem-ratio)) auto; font-size: calc(16 * var(--rem-ratio)); } } @media not all and (min-width: 768px) { .c-modal.figure1 figure img { width: calc(808 * var(--rem-ratio)); } } @media (min-width: 768px) { .c-modal.figure1 figure figcaption { text-align: right; } } @media (min-width: 768px) { .c-modal.figure1 .c-modal__pdf { margin-top: calc(-30 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-modal.figure1 .c-modal__pdf { margin-top: calc(-30 * var(--rem-ratio)); } } @media not all and (min-width: 768px) { .c-modal.figure2 figure img { width: calc(806 * var(--rem-ratio)); } } .c-modal.figure2 .c-modal__pdf { margin-top: calc(16 * var(--min-ratio)); } @media (min-width: 768px) { .c-modal.figure2 .c-modal__pdf { margin-top: calc(8 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-modal.figure2 .c-modal__pdf { margin-top: calc(8 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Fade ============================================================================================ ^^ */ .c-fade { transition: all 0.3s linear; transform: translateY(50px); opacity: 0; } .c-fade.is-view { transform: translateY(0); opacity: 1; } /* ========================================================================================= ^^ Banner ============================================================================================ ^^ */ .p-banner .l-section__inner { max-width: calc(1185 * var(--rem-ratio)); padding: calc(25 * var(--min-ratio)) calc(15 * var(--min-ratio)) 0; } @media (min-width: 768px) { .p-banner .l-section__inner { padding: calc(68 * var(--max-ratio)) calc(20 * var(--max-ratio)) 0; } } @media (min-width: 1120px) { .p-banner .l-section__inner { padding: calc(68 * var(--rem-ratio)) 0 0; } } /* ========================================================================================= ^^ Lead ============================================================================================ ^^ */ .p-lead { background-image: url(../images/top/bg-lead_sp.svg), url(../images/common/dot01.png); background-repeat: no-repeat; background-position: calc(-17 * var(--min-ratio)) calc(47 * var(--min-ratio)), 0 calc(303 * var(--min-ratio)); background-size: calc(585 * var(--min-ratio)) auto, calc(120 * var(--min-ratio)) auto; } @media (min-width: 768px) { .p-lead { background: url(../images/top/bg-lead_pc.svg), url(../images/common/dot01.png); background-repeat: no-repeat; background-position: calc(19 * var(--max-ratio)) calc(100 * var(--max-ratio)), 0 calc(100% + 597 * var(--rem-ratio)); background-size: calc(1643 * var(--max-ratio)) auto, calc(280 * var(--max-ratio)) auto; } } @media (min-width: 1120px) { .p-lead { background-position: 50% calc(100 * var(--rem-ratio)), 0 calc(100% + 597 * var(--rem-ratio)); background-size: calc(1643 * var(--rem-ratio)) auto, calc(280 * var(--rem-ratio)) auto; } } .p-lead .l-section__inner { max-width: calc(1185 * var(--rem-ratio)); padding: calc(177 * var(--min-ratio)) calc(15 * var(--min-ratio)) calc(25 * var(--min-ratio)); } @media (min-width: 768px) { .p-lead .l-section__inner { padding: calc(328 * var(--max-ratio)) calc(20 * var(--max-ratio)) calc(68 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-lead .l-section__inner { padding: calc(328 * var(--rem-ratio)) 0 calc(68 * var(--rem-ratio)); } } @media (min-width: 768px) { .p-lead .l-section__inner div { display: grid; grid-template-columns: 60.2278481013% 39.0843881857%; grid-template-rows: auto auto; -moz-column-gap: .6877637131%; column-gap: .6877637131%; } } .p-lead p { font-size: calc(25 * var(--min-ratio)); line-height: 1.6; font-weight: var(--font-weight-semi-bold); text-align: center; } @media (min-width: 768px) { .p-lead p { margin-top: auto; margin-bottom: calc(20 * var(--max-ratio)); font-size: calc(38 * var(--max-ratio)); line-height: 1.5; text-align: left; grid-column: 1/2; grid-row: 1/2; } } @media (min-width: 1120px) { .p-lead p { margin-bottom: calc(20 * var(--rem-ratio)); font-size: calc(42 * var(--rem-ratio)); } } .p-lead p + p { font-size: calc(14 * var(--min-ratio)); line-height: 1.5; display: flex; justify-content: center; align-items: center; -moz-column-gap: calc(10 * var(--min-ratio)); column-gap: calc(10 * var(--min-ratio)); } .page-wnpp-2025 .p-lead p + p { padding: 0 0 calc(6 * var(--min-ratio)) calc(28 * var(--min-ratio)); background: url(../images/2025/line_sp.svg) no-repeat 0 100% / auto 85%; justify-content: flex-start; text-align: left; } @media (min-width: 768px) { .p-lead p + p { margin-top: 0; margin-bottom: auto; font-size: calc(24 * var(--max-ratio)); line-height: 1.5; justify-content: flex-start; -moz-column-gap: calc(10 * var(--max-ratio)); column-gap: calc(10 * var(--max-ratio)); grid-row: 2/3; } .page-wnpp-2025 .p-lead p + p { padding: 0 0 calc(14 * var(--max-ratio)) calc(55 * var(--max-ratio)); background: url(../images/2025/line.svg) no-repeat 0 100% / auto 87%; } } @media (min-width: 1120px) { .p-lead p + p { font-size: calc(24 * var(--rem-ratio)); -moz-column-gap: calc(10 * var(--rem-ratio)); column-gap: calc(10 * var(--rem-ratio)); } .page-wnpp-2025 .p-lead p + p { padding: 0 0 calc(14 * var(--rem-ratio)) calc(55 * var(--rem-ratio)); } } .p-lead p + p::before, .p-lead p + p::after { width: calc(44 * var(--min-ratio)); height: 1px; background-color: var(--font-base-color); content: " "; display: block; } .page-wnpp-2025 .p-lead p + p::before, .page-wnpp-2025 .p-lead p + p::after { display: none; } @media (min-width: 768px) { .p-lead p + p::before, .p-lead p + p::after { width: calc(72 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-lead p + p::before, .p-lead p + p::after { width: calc(72 * var(--rem-ratio)); } } @media (min-width: 768px) { .p-lead p:last-of-type { margin-bottom: auto; } } .p-lead figure { width: calc(221 * var(--min-ratio)); margin-top: calc(35 * var(--min-ratio)); margin-inline: auto; } @media (min-width: 768px) { .p-lead figure { width: calc(442 * var(--max-ratio)); margin-top: 0; grid-column: 2/3; grid-row: 1/3; } } @media (min-width: 1120px) { .p-lead figure { width: calc(442 * var(--rem-ratio)); } } /* ========================================================================================= ^^ Content 06 ============================================================================================ ^^ */ .content .c-section-title { padding-top: calc(50 * var(--min-ratio)); position: relative; } @media (min-width: 768px) { .content .c-section-title { padding-top: 0; } } .content .c-section-title::before { width: calc(57 * var(--min-ratio)); height: calc(40 * var(--min-ratio)); content: " "; display: block; position: absolute; top: 0; left: 0; } @media (min-width: 768px) { .content .c-section-title::before { width: calc(77 * var(--max-ratio)); height: calc(54 * var(--max-ratio)); left: calc(-96 * var(--max-ratio)); } .page-wnpp-2025 .content .c-section-title::before { top: 50%; transform: translateY(calc(-50% - calc(12.5 * var(--max-ratio)))); } } @media (min-width: 1120px) { .content .c-section-title::before { width: calc(77 * var(--rem-ratio)); height: calc(54 * var(--rem-ratio)); left: calc(-96 * var(--rem-ratio)); } .page-wnpp-2025 .content .c-section-title::before { transform: translateY(calc(-50% - calc(12.5 * var(--rem-ratio)))); } } .p-content01 { padding-top: calc(25 * var(--min-ratio)); padding-bottom: calc(74 * var(--min-ratio)); background-image: url(../images/common/dot01.png), url(../images/common/dot02.png); background-repeat: no-repeat; background-position: 0 calc(-260 * var(--min-ratio)), 100% calc(100% + 180 * var(--min-ratio)); background-size: calc(120 * var(--min-ratio)) auto; } @media not all and (min-width: 768px) { .page-wnpp-2025 .p-content01 .grid { display: flex; flex-direction: column; } } @media (min-width: 768px) { .p-content01 { padding-top: calc(68 * var(--max-ratio)); padding-bottom: calc(160 * var(--max-ratio)); background-position: 0 calc(-198 * var(--max-ratio)), 100% calc(100% + 397 * var(--max-ratio)); background-size: calc(280 * var(--max-ratio)) auto; } } @media (min-width: 1120px) { .p-content01 { padding-top: calc(68 * var(--rem-ratio)); padding-bottom: calc(160 * var(--rem-ratio)); background-position: 0 calc(-198 * var(--rem-ratio)), 100% calc(100% + 397 * var(--rem-ratio)); background-size: calc(280 * var(--rem-ratio)) auto; } } @media (min-width: 768px) { .p-content01 .l-section__inner { padding-left: calc(118 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content01 .l-section__inner { padding-left: 0; } } .p-content01 .c-section-title::before { background: url(../images/common/num01.png) no-repeat 0 0/auto 100%; } .page-wnpp-2025 .p-content01 .c-section-title::before { background: url(../images/common/num01-02.png) no-repeat 0 0/auto 100%; } @media (min-width: 768px) { .p-content01 .grid { display: grid; grid-template-columns: 25% 67.96875%; grid-template-rows: auto auto; align-items: flex-start; -moz-column-gap: 7.03125%; column-gap: 7.03125%; } } @media (min-width: 768px) { .p-content01 .c-content-text { grid-column: 2/3; grid-row: 1/2; } } .p-content01 .c-content-image { margin-bottom: calc(38 * var(--min-ratio)); margin-left: calc(-23 * var(--min-ratio)); border-radius: 0 calc(24 * var(--min-ratio)) calc(24 * var(--min-ratio)) 0; overflow: hidden; } @media (min-width: 768px) { .p-content01 .c-content-image { margin-bottom: 0; margin-left: calc(-336 * var(--max-ratio)); border-radius: 0 calc(24 * var(--max-ratio)) calc(24 * var(--max-ratio)) 0; grid-column: 1/2; grid-row: 1/2; } } @media (min-width: 1120px) { .p-content01 .c-content-image { margin-left: calc(-336 * var(--rem-ratio)); border-radius: 0 calc(24 * var(--rem-ratio)) calc(24 * var(--rem-ratio)) 0; } } .p-content02 { background: url(../images/common/dot01.png), linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%); background-repeat: no-repeat; background-position: 0 calc(100% + 110 * var(--min-ratio)); background-size: calc(120 * var(--min-ratio)) auto, auto; } @media (min-width: 768px) { .p-content02 { background-position: 0 calc(100% + 400 * var(--max-ratio)), 0 0; background-size: calc(280 * var(--max-ratio)) auto, auto; } } @media (min-width: 1120px) { .p-content02 { background-position: 0 calc(100% + 400 * var(--rem-ratio)), 0 0; background-size: calc(280 * var(--rem-ratio)) auto, auto; } } .p-content02 .l-section__inner { max-width: calc(1454 * var(--rem-ratio)); width: 100vw; padding: calc(42 * var(--min-ratio)) calc(25 * var(--min-ratio)) calc(72 * var(--min-ratio)); margin: 0 calc(-25 * var(--min-ratio)); margin-inline: auto; border-radius: calc(60 * var(--min-ratio)) 0 0 calc(60 * var(--min-ratio)); background-color: #fff; overflow: hidden; } @media (min-width: 768px) { .p-content02 .l-section__inner { width: 100%; padding: calc(145 * var(--max-ratio)) calc(118 * var(--max-ratio)) calc(153 * var(--max-ratio)); border-radius: calc(120 * var(--max-ratio)) 0 0 calc(120 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content02 .l-section__inner { padding: calc(145 * var(--rem-ratio)) calc(215 * var(--rem-ratio)) calc(153 * var(--rem-ratio)); border-radius: calc(120 * var(--rem-ratio)) 0 0 calc(120 * var(--rem-ratio)); } } .p-content02 .c-section-title::before { background: url(../images/common/num02.png) no-repeat 0 0/auto 100%; } .page-wnpp-2025 .p-content02 .c-section-title::before { background: url(../images/common/num02-02.png) no-repeat 0 0/auto 100%; } .p-content02 .text-block01 { margin-bottom: calc(35 * var(--min-ratio)); } @media (min-width: 768px) { .p-content02 .text-block01 { margin-bottom: calc(38 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content02 .text-block01 { margin-bottom: calc(38 * var(--rem-ratio)); } } .p-content02 .c-content-image { margin-bottom: calc(37 * var(--min-ratio)); } @media (min-width: 768px) { .p-content02 .c-content-image { margin-right: calc(-176 * var(--max-ratio)); margin-bottom: calc(38 * var(--max-ratio)); display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto; } .page-wnpp-2025 .p-content02 .c-content-image { width: calc(448 * var(--max-ratio)); margin-right: 0; margin-left: calc(58 * var(--max-ratio)); display: block; } .page-wnpp-2025 .p-content02 .c-content-image:last-of-type { width: calc(448 * var(--rem-ratio)); margin-right: calc(58 * var(--rem-ratio)); margin-left: 0; } } @media (min-width: 1120px) { .p-content02 .c-content-image { margin-right: calc(-176 * var(--rem-ratio)); margin-bottom: calc(38 * var(--rem-ratio)); } .page-wnpp-2025 .p-content02 .c-content-image { width: calc(448 * var(--rem-ratio)); margin-right: 0; margin-left: calc(58 * var(--rem-ratio)); } .page-wnpp-2025 .p-content02 .c-content-image:last-of-type { margin-right: calc(58 * var(--rem-ratio)); margin-left: 0; } } .p-content03 { padding-top: calc(64 * var(--min-ratio)); padding-bottom: calc(80 * var(--min-ratio)); background: url(../images/common/dot01.png), url(../images/common/dot02.png); background-repeat: no-repeat; background-position: 0 calc(-220 * var(--min-ratio)), 100% calc(100% + 180 * var(--min-ratio)); background-size: calc(120 * var(--min-ratio)) auto; } @media (min-width: 768px) { .p-content03 { padding-top: calc(148 * var(--max-ratio)); padding-bottom: calc(160 * var(--max-ratio)); background-position: 0 calc(-397 * var(--max-ratio)), 100% calc(100% + 398 * var(--max-ratio)); background-size: calc(280 * var(--max-ratio)) auto; } } @media (min-width: 1120px) { .p-content03 { padding-top: calc(148 * var(--rem-ratio)); padding-bottom: calc(160 * var(--rem-ratio)); background-position: 0 calc(-397 * var(--rem-ratio)), 100% calc(100% + 398 * var(--rem-ratio)); background-size: calc(280 * var(--rem-ratio)) auto; } } @media (min-width: 768px) { .p-content03 .l-section__inner { padding-left: calc(118 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content03 .l-section__inner { padding-left: 0; } } .p-content03 .c-section-title::before { background: url(../images/common/num03.png) no-repeat 0 0/auto 100%; } .page-wnpp-2025 .p-content03 .c-section-title::before { background: url(../images/common/num03-02.png) no-repeat 0 0/auto 100%; } @media (min-width: 768px) { .p-content03 .grid { display: grid; grid-template-columns: 69.82421875% 24.90234375%; grid-template-rows: auto auto; align-items: flex-start; -moz-column-gap: 5.2734375%; column-gap: 5.2734375%; } } @media (min-width: 1506px) { .p-content03 .grid { grid-template-columns: 69.82421875% 24.90234375%; } } .page-wnpp-2025 .p-content03 p { margin-bottom: calc(28 * var(--min-ratio)); } @media (min-width: 768px) { .p-content03 p { margin-top: calc(-10 * var(--max-ratio)); grid-column: 1/2; grid-row: 1/2; } .page-wnpp-2025 .p-content03 p { margin-bottom: calc(40 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content03 p { margin-top: calc(-10 * var(--rem-ratio)); } .page-wnpp-2025 .p-content03 p { margin-bottom: calc(40 * var(--rem-ratio)); } } .p-content03 ul { padding-left: calc(13 * var(--min-ratio)); margin-bottom: calc(37 * var(--min-ratio)); } @media (min-width: 768px) { .p-content03 ul { padding-left: calc(26 * var(--max-ratio)); margin-bottom: 0; grid-column: 1/2; grid-row: 2/3; } } @media (min-width: 1120px) { .p-content03 ul { padding-left: calc(26 * var(--rem-ratio)); } } .p-content03 ul li { position: relative; } .p-content03 ul li::before { width: calc(8 * var(--min-ratio)); border-radius: 50%; background-color: var(--list-circle-color); aspect-ratio: 1; content: " "; display: block; position: absolute; top: calc(11 * var(--min-ratio)); left: calc(-13 * var(--min-ratio)); } @media (min-width: 768px) { .p-content03 ul li::before { width: calc(10 * var(--max-ratio)); top: calc(12 * var(--max-ratio)); left: calc(-15 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content03 ul li::before { width: calc(10 * var(--rem-ratio)); top: calc(12 * var(--rem-ratio)); left: calc(-15 * var(--rem-ratio)); } } .p-content03 .c-content-image { margin-right: calc(-25 * var(--min-ratio)); border-radius: calc(16 * var(--min-ratio)) 0 0 calc(16 * var(--min-ratio)); position: relative; } .page-wnpp-2025 .p-content03 .c-content-image { margin-bottom: calc(36 * var(--min-ratio)); margin-right: 0; border-radius: calc(16 * var(--min-ratio)); } @media (min-width: 768px) { .p-content03 .c-content-image { margin-top: 0; margin-right: calc(-241 * var(--max-ratio)); border-radius: calc(24 * var(--max-ratio)) 0 0 calc(24 * var(--max-ratio)); grid-column: 2/3; grid-row: 1/3; } .page-wnpp-2025 .p-content03 .c-content-image { margin: 0 calc(-174 * var(--max-ratio)) 0 0; border-radius: calc(24 * var(--max-ratio)) 0 0 calc(24 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content03 .c-content-image { margin-right: calc(-241 * var(--rem-ratio)); border-radius: calc(24 * var(--rem-ratio)) 0 0 calc(24 * var(--rem-ratio)); } .page-wnpp-2025 .p-content03 .c-content-image { margin-right: calc(-174 * var(--rem-ratio)); border-radius: calc(24 * var(--rem-ratio)) 0 0 calc(24 * var(--rem-ratio)); } } .p-content04 { background: url(../images/common/dot02.png), linear-gradient(to left, transparent 0%, transparent 50%, #fff 50%, #fff 100%); background-repeat: no-repeat; background-position: 100% calc(-140 * var(--min-ratio)); background-size: calc(120 * var(--min-ratio)) auto, auto; } .page-wnpp-2025 .p-content04 .c-section-title::before { background: url(../images/common/num04-02.png) no-repeat 0 0/auto 100%; } @media (min-width: 768px) { .p-content04 { background-position: 100% calc(-397 * var(--max-ratio)), 0 0; background-size: calc(280 * var(--max-ratio)) auto, auto; } } @media (min-width: 1120px) { .p-content04 { background-position: 100% calc(-397 * var(--rem-ratio)), 0 0; background-size: calc(280 * var(--rem-ratio)) auto, auto; } } .p-content04 .l-section__inner { max-width: calc(1264 * var(--rem-ratio)); width: 100vw; padding-top: calc(43 * var(--min-ratio)); padding-bottom: calc(72 * var(--min-ratio)); margin: 0 calc(-25 * var(--min-ratio)); margin-inline: auto; border-radius: 0 calc(60 * var(--min-ratio)) calc(60 * var(--min-ratio)) 0; background-color: #fff; overflow: hidden; } .page-wnpp-2025 .p-content04 .l-section__inner { overflow: visible; } @media (min-width: 768px) { .p-content04 .l-section__inner { width: 100%; padding: calc(145 * var(--max-ratio)) calc(120 * var(--max-ratio)) calc(153 * var(--max-ratio)); border-radius: 0 calc(120 * var(--max-ratio)) calc(120 * var(--max-ratio)) 0; } } @media (min-width: 1120px) { .p-content04 .l-section__inner { padding: calc(145 * var(--rem-ratio)) calc(120 * var(--rem-ratio)) calc(153 * var(--rem-ratio)); border-radius: 0 calc(120 * var(--rem-ratio)) calc(120 * var(--rem-ratio)) 0; } } .p-content04 .c-section-title::before { background: url(../images/common/num04.png) no-repeat 0 0/auto 100%; } .p-content04 .image-block01 { margin-bottom: calc(37 * var(--min-ratio)); } .page-wnpp-2025 .p-content04 .image-block01 { margin-top: calc(38 * var(--min-ratio)); display: block; } .p-content04 .image-block02 { margin-bottom: calc(35 * var(--min-ratio)); } .p-content04 .text-block01 { margin-bottom: calc(35 * var(--min-ratio)); } @media (min-width: 768px) { .page-wnpp-2025 .p-content04 .image-block01 { margin: calc(43 * var(--max-ratio)) 0 calc(38 * var(--max-ratio)) calc(-176 * var(--max-ratio)); } } @media (min-width: 1120px) { .page-wnpp-2025 .p-content04 .image-block01 { margin: calc(43 * var(--rem-ratio)) 0 calc(38 * var(--rem-ratio)) calc(-176 * var(--rem-ratio)); } } .p-content05 { padding-top: calc(59 * var(--min-ratio)); padding-bottom: calc(73 * var(--min-ratio)); background: url(../images/common/dot01.png), url(../images/common/dot02.png); background-repeat: no-repeat; background-position: 0 calc(-209 * var(--min-ratio)), 100% calc(100% + 180 * var(--min-ratio)); background-size: calc(120 * var(--min-ratio)) auto; } @media (min-width: 768px) { .p-content05 { padding-top: calc(146 * var(--max-ratio)); padding-bottom: calc(160 * var(--max-ratio)); background-position: 0 calc(-397 * var(--max-ratio)), 100% calc(100% + 398 * var(--max-ratio)); background-size: calc(280 * var(--max-ratio)) auto; } } @media (min-width: 1120px) { .p-content05 { padding-top: calc(146 * var(--rem-ratio)); padding-bottom: calc(160 * var(--rem-ratio)); background-position: 0 calc(-397 * var(--rem-ratio)), 100% calc(100% + 398 * var(--rem-ratio)); background-size: calc(280 * var(--rem-ratio)) auto; } } @media (min-width: 768px) { .p-content05 .l-section__inner { padding-left: calc(67 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content05 .l-section__inner { padding-left: 0; } } .p-content05 .c-section-title::before { background: url(../images/common/num05.png) no-repeat 0 0/auto 100%; } .page-wnpp-2025 .p-content05 .c-section-title::before { background: url(../images/common/num05-02.png) no-repeat 0 0/auto 100%; } @media not all and (min-width: 768px) { .page-wnpp-2025 .p-content05 .grid { display: flex; flex-direction: column; } } @media (min-width: 768px) { .p-content05 .grid { margin-bottom: calc(45 * var(--max-ratio)); display: grid; grid-template-columns: 43.75% 50.78125%; grid-template-rows: auto auto; align-items: flex-start; -moz-column-gap: 5.46875%; column-gap: 5.46875%; } } @media (min-width: 1120px) { .p-content05 .grid { margin-bottom: calc(45 * var(--rem-ratio)); } } @media (min-width: 768px) { .p-content05 .grid + .grid { margin-bottom: 0; grid-template-columns: 64.453125% 30.2734375%; -moz-column-gap: 5.2734375%; column-gap: 5.2734375%; } } .p-content05 .image-block01 { margin-bottom: calc(38 * var(--min-ratio)); } @media (min-width: 768px) { .p-content05 .image-block01 { margin-bottom: 0; grid-column: 1/2; grid-row: 1/2; } } .p-content05 .image-block02 { margin-bottom: calc(33 * var(--min-ratio)); } @media (min-width: 768px) { .p-content05 .image-block02 { margin-right: calc(-175 * var(--max-ratio)); margin-bottom: 0; grid-column: 2/3; grid-row: 1/2; } } @media (min-width: 1120px) { .p-content05 .image-block02 { margin-right: calc(-175 * var(--rem-ratio)); } } .p-content05 .text-block01 { margin-bottom: calc(38 * var(--min-ratio)); } @media (min-width: 768px) { .p-content05 .text-block01 { margin-bottom: 0; grid-column: 2/3; grid-row: 1/2; } } @media (min-width: 768px) { .p-content05 .text-block02 { grid-column: 1/2; grid-row: 1/2; } } .p-content06 { padding-right: 0; padding-left: 0; background: url(../images/common/dot02.png) no-repeat 100% calc(-140 * var(--min-ratio)); background-size: calc(120 * var(--min-ratio)); } @media (min-width: 768px) { .p-content06 { background: url(../images/common/dot01.png), url(../images/common/dot02.png); background-repeat: no-repeat; background-position: 0 calc(100% + 398 * var(--max-ratio)), 100% calc(-397 * var(--max-ratio)); background-size: calc(280 * var(--max-ratio)) auto; } } @media (min-width: 1120px) { .p-content06 { background-position: 0 calc(100% + 398 * var(--rem-ratio)), 100% calc(-397 * var(--rem-ratio)); background-size: calc(280 * var(--rem-ratio)) auto; } } .p-content06 .l-section__inner { max-width: calc(1470 * var(--rem-ratio)); padding-top: calc(43 * var(--min-ratio)); padding-bottom: calc(78 * var(--min-ratio)); border-radius: calc(60 * var(--min-ratio)) calc(60 * var(--min-ratio)) calc(60 * var(--min-ratio)) 0; background-color: #fff; } @media (min-width: 768px) { .p-content06 .l-section__inner { padding: calc(146 * var(--max-ratio)) calc(119 * var(--max-ratio)) calc(152 * var(--max-ratio)) calc(119 * var(--max-ratio)); border-radius: calc(120 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content06 .l-section__inner { padding: calc(146 * var(--rem-ratio)) calc(177 * var(--rem-ratio)) calc(152 * var(--rem-ratio)) calc(270 * var(--rem-ratio)); border-radius: calc(120 * var(--rem-ratio)); } } .p-content06 .c-section-title::before { background: url(../images/common/num06.png) no-repeat 0 0/auto 100%; } .page-wnpp-2025 .p-content06 .c-section-title::before { background: url(../images/common/num06-02.png) no-repeat 0 0/auto 100%; } @media not all and (min-width: 768px) { .page-wnpp-2025 .p-content06 .grid { display: flex; flex-direction: column-reverse; } } @media (min-width: 768px) { .p-content06 .grid { display: grid; grid-template-columns: 47.65625% 46.875%; grid-template-rows: auto auto; -moz-column-gap: 5.46875%; column-gap: 5.46875%; row-gap: calc(32 * var(--max-ratio)); } .page-wnpp-2025 .p-content06 .grid { align-items: flex-start; } } @media (min-width: 1120px) { .p-content06 .grid { row-gap: calc(32 * var(--rem-ratio)); } } .p-content06 .c-content-image { margin-bottom: calc(37 * var(--min-ratio)); } @media (min-width: 768px) { .p-content06 .c-content-image { margin-bottom: 0; grid-column: 1/2; grid-row: 1/2; } .page-wnpp-2025 .p-content06 .c-content-image { grid-column: 2/3; } } .p-content06 .text-block01 { margin-bottom: calc(37 * var(--min-ratio)); } @media (min-width: 768px) { .p-content06 .text-block01 { margin-bottom: 0; grid-column: 2/3; grid-row: 1/2; } .page-wnpp-2025 .p-content06 .text-block01 { margin-bottom: 0; grid-column: 1/2; } } @media (min-width: 768px) { .p-content06 .text-block02 { grid-column: 1/3; grid-row: 2/3; } } .p-content07 { padding-top: calc(59 * var(--min-ratio)); padding-bottom: calc(37 * var(--min-ratio)); background: url(../images/common/dot01.png); background-repeat: no-repeat; background-position: 0 calc(-209 * var(--min-ratio)); background-size: calc(120 * var(--min-ratio)) auto; } @media (min-width: 768px) { .p-content07 { padding-top: calc(146 * var(--max-ratio)); padding-bottom: calc(29 * var(--max-ratio)); background-position: 0 calc(-397 * var(--max-ratio)), 100% calc(100% + 398 * var(--max-ratio)); background-size: calc(280 * var(--max-ratio)) auto; } } @media (min-width: 1120px) { .p-content07 { padding-top: calc(146 * var(--rem-ratio)); padding-bottom: calc(29 * var(--rem-ratio)); background-position: 0 calc(-397 * var(--rem-ratio)), 100% calc(100% + 398 * var(--rem-ratio)); background-size: calc(280 * var(--rem-ratio)) auto; } } @media (min-width: 768px) { .p-content07 .l-section__inner { padding-left: calc(67 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-content07 .l-section__inner { padding-left: 0; } } .p-content07 .c-section-title::before { background: url(../images/common/num07.png) no-repeat 0 0/auto 100%; } .page-wnpp-2025 .p-content07 .c-section-title::before { background: url(../images/common/num07-02.png) no-repeat 0 0/auto 100%; } @media not all and (min-width: 768px) { .page-wnpp-2025 .p-content07 .grid { display: flex; flex-direction: column-reverse; } } @media (min-width: 768px) { .p-content07 .grid { margin-bottom: calc(45 * var(--max-ratio)); display: grid; grid-template-columns: 43.75% 50.78125%; grid-template-rows: auto auto; align-items: flex-start; -moz-column-gap: 5.46875%; column-gap: 5.46875%; } } @media (min-width: 1120px) { .p-content07 .grid { margin-bottom: calc(45 * var(--rem-ratio)); } } @media (min-width: 768px) { .p-content07 .grid + .grid { margin-bottom: 0; grid-template-columns: 64.453125% 30.2734375%; -moz-column-gap: 5.2734375%; column-gap: 5.2734375%; } } .p-content07 .image-block01 { margin-bottom: calc(38 * var(--min-ratio)); } @media (min-width: 768px) { .p-content07 .image-block01 { margin-bottom: 0; grid-column: 1/2; grid-row: 1/2; } } .p-content07 .image-block02 { margin-bottom: calc(33 * var(--min-ratio)); } @media (min-width: 768px) { .p-content07 .image-block02 { margin-right: calc(-175 * var(--max-ratio)); margin-bottom: 0; grid-column: 2/3; grid-row: 1/2; } } @media (min-width: 1120px) { .p-content07 .image-block02 { margin-right: calc(-175 * var(--rem-ratio)); } } .p-content07 .text-block01 { margin-bottom: 0; } @media (min-width: 768px) { .p-content07 .text-block01 { margin-bottom: 0; grid-column: 2/3; grid-row: 1/2; } } @media (min-width: 768px) { .p-content07 .text-block02 { grid-column: 1/2; grid-row: 1/2; } } /* ========================================================================================= ^^ Reference ============================================================================================ ^^ */ .p-reference { padding-top: calc(29 * var(--min-ratio)); padding-bottom: calc(122 * var(--min-ratio)); background: url(../images/common/dot02.png); background-repeat: no-repeat; background-position: 100% calc(100% + 180 * var(--min-ratio)); background-size: calc(120 * var(--min-ratio)) auto; } @media (min-width: 768px) { .p-reference { padding-top: calc(54 * var(--max-ratio)); padding-bottom: calc(160 * var(--max-ratio)); background-position: 100% calc(100% + 397 * var(--max-ratio)); background-size: calc(280 * var(--max-ratio)) auto; } } @media (min-width: 1120px) { .p-reference { padding-top: calc(54 * var(--rem-ratio)); padding-bottom: calc(160 * var(--rem-ratio)); background-position: 100% calc(100% + 397 * var(--rem-ratio)); background-size: calc(280 * var(--rem-ratio)) auto; } } .p-reference .reference-title { max-width: calc(1120 * var(--rem-ratio)); width: 100%; margin-inline: auto; font-size: calc(24 * var(--min-ratio)); font-weight: var(--font-weight-semi-bold); letter-spacing: -0.05em; } @media (min-width: 768px) { .p-reference .reference-title { margin-bottom: calc(12 * var(--max-ratio)); font-size: calc(40 * var(--max-ratio)); } } @media (min-width: 1120px) { .p-reference .reference-title { margin-bottom: calc(12 * var(--rem-ratio)); font-size: calc(40 * var(--rem-ratio)); } } .p-reference .c-reference-list { max-width: calc(1120 * var(--rem-ratio)); width: 100%; margin-inline: auto; } .c-archive-navigation { position: relative; z-index: 7100; } .c-archive-navigation__inner { width: calc((360 / 375) * 100vw); height: calc((600 / 375) * 100vw); padding: calc(35 * var(--min-ratio)) calc(25 * var(--min-ratio)) calc(30 * var(--min-ratio)); background-color: #fff; border-radius: 0 0 0 calc(16 * var(--min-ratio)); position: absolute; top: calc(-37 * var(--min-ratio)); right: calc(-18 * var(--min-ratio)); z-index: 10; display: none; flex-direction: column; } .c-archive-navigation .c-hamburger { width: calc(40 * var(--min-ratio)); padding-top: calc(20 * var(--min-ratio)); font-family: var(----font-inter); font-size: calc(11 * var(--min-ratio)); line-height: 1; text-align: center; text-transform: uppercase; position: absolute; top: 0; right: 0; z-index: 15; } .is-menu-open .c-archive-navigation .c-hamburger span { font-size: 0; } .is-menu-open .c-archive-navigation .c-hamburger span::before { font-size: calc(11 * var(--min-ratio)); line-height: 1; text-align: center; text-transform: uppercase; content: 'Close'; display: inline; } .c-archive-navigation .c-hamburger::before, .c-archive-navigation .c-hamburger::after { width: 100%; height: calc(2 * var(--min-ratio)); background-color: #222; border-radius: 9999px; content: '\0020'; display: block; position: absolute; left: 0; } .c-archive-navigation .c-hamburger::before { top: 0; } .c-archive-navigation .c-hamburger::after { top: calc(10 * var(--min-ratio)); } .is-menu-open .c-archive-navigation .c-hamburger::before { top: calc(5 * var(--min-ratio)); transform: translateY(-50%) rotate(-15deg) } .is-menu-open .c-archive-navigation .c-hamburger::after { top: calc(5 * var(--min-ratio)); transform: translateY(-50%) rotate(15deg) } .is-menu-open .c-archive-navigation__inner { display: flex; } .c-archive-navigation__logo { width: calc(177 * var(--min-ratio)); margin: 0 0 calc(30 * var(--min-ratio)) calc(-8 * var(--min-ratio)); } .c-archive-navigation__menu-item { height: calc(40 * var(--min-ratio)); border-top: 1px solid #e7e7e7; font-size: calc(16 * var(--min-ratio)); } .c-archive-navigation__menu-item:first-child { border-top: 1px solid #fff; } .c-archive-navigation__menu-item--sub { font-size: calc(14 * var(--min-ratio)); } /* 2026 */ .c-archive-navigation__menu-item--year-links { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(12 * var(--min-ratio)); align-items: stretch; } .c-archive-navigation__menu-item--year-links .c-archive-navigation__menu-link { justify-content: center; } /* /2026 */ .c-archive-navigation__menu-link { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: calc(5 * var(--min-ratio)); } .c-archive-navigation__menu-link[target=_blank]::after { width: calc(14 * var(--min-ratio)); height: calc(12 * var(--min-ratio)); background: url(../images/common/icon-ext.svg) no-repeat 50% 50% / cover; content: '\0020'; display: block; } .c-archive-navigation__social-menu { padding-top: calc(24 * var(--min-ratio)); margin-top: auto; border-top: 1px solid #e7e7e7; display: flex; justify-content: flex-start; align-items: center; column-gap: calc(40 * var(--min-ratio)); } @media (min-width: 768px) { .c-archive-navigation__inner { width: calc(400 * var(--max-ratio)); height: calc(600 * var(--max-ratio)); padding: calc(18 * var(--max-ratio)) calc(30 * var(--max-ratio)) calc(30 * var(--max-ratio)); border-radius: calc(24 * var(--max-ratio)); top: calc(-36 * var(--max-ratio)); right: calc(-30 * var(--max-ratio)); } .c-archive-navigation .c-hamburger { width: calc(48 * var(--max-ratio)); padding-top: calc(22 * var(--max-ratio)); font-size: calc(14 * var(--max-ratio)); transform: translateY(-50%); } .is-menu-open .c-archive-navigation .c-hamburger span::before { font-size: calc(14 * var(--max-ratio)); } .c-archive-navigation .c-hamburger::before, .c-archive-navigation .c-hamburger::after { height: calc(3 * var(--max-ratio)); } .c-archive-navigation .c-hamburger::after { top: calc(10 * var(--max-ratio)); } .is-menu-open .c-archive-navigation .c-hamburger::before { top: calc(5 * var(--max-ratio)); } .is-menu-open .c-archive-navigation .c-hamburger::after { top: calc(5 * var(--max-ratio)); } .c-archive-navigation__logo { width: calc(184 * var(--max-ratio)); margin: 0 0 calc(50 * var(--max-ratio)); } .c-archive-navigation__menu-item { height: calc(73 * var(--max-ratio)); font-size: calc(16 * var(--rem-ratio)); } .c-archive-navigation__menu-item--sub { font-size: calc(14 * var(--rem-ratio)); } .c-archive-navigation__menu-link { column-gap: calc(5 * var(--max-ratio)); } .c-archive-navigation__menu-link[target=_blank]::after { width: calc(14 * var(--max-ratio)); height: calc(12 * var(--max-ratio)); } .c-archive-navigation__social-menu { padding-top: calc(24 * var(--max-ratio)); column-gap: calc(40 * var(--max-ratio)); } } @media (min-width: 1120px) { .c-archive-navigation__inner { width: calc(400 * var(--rem-ratio)); height: calc(600 * var(--rem-ratio)); padding: calc(18 * var(--rem-ratio)) calc(30 * var(--rem-ratio)) calc(30 * var(--rem-ratio)); border-radius: calc(24 * var(--rem-ratio)); top: calc(-36 * var(--rem-ratio)); right: calc(-30 * var(--rem-ratio)); } .c-archive-navigation .c-hamburger { width: calc(48 * var(--rem-ratio)); padding-top: calc(22 * var(--rem-ratio)); font-size: calc(14 * var(--rem-ratio)); } .is-menu-open .c-archive-navigation .c-hamburger span::before { font-size: calc(14 * var(--rem-ratio)); } .c-archive-navigation .c-hamburger::before, .c-archive-navigation .c-hamburger::after { height: calc(3 * var(--rem-ratio)); } .c-archive-navigation .c-hamburger::after { top: calc(10 * var(--rem-ratio)); } .is-menu-open .c-archive-navigation .c-hamburger::before { top: calc(7 * var(--rem-ratio)); } .is-menu-open .c-archive-navigation .c-hamburger::after { top: calc(7 * var(--rem-ratio)); } .c-archive-navigation__logo { width: calc(184 * var(--rem-ratio)); margin-bottom: calc(30 * var(--rem-ratio)); } .c-archive-navigation__menu-item { height: calc(50 * var(--rem-ratio)); font-size: calc(16 * var(--rem-ratio)); } .c-archive-navigation__menu-item--sub { font-size: calc(14 * var(--rem-ratio)); } .c-archive-navigation__menu-link { column-gap: calc(5 * var(--rem-ratio)); } .c-archive-navigation__menu-link[target=_blank]::after { width: calc(14 * var(--rem-ratio)); height: calc(12 * var(--rem-ratio)); } .c-archive-navigation__social-menu { padding-top: calc(24 * var(--rem-ratio)); column-gap: calc(40 * var(--rem-ratio)); } } .c-layer { width: 100%; height: 100%; background-color: rgba(34, 34, 34, .6); position: fixed; top: 0; left: 0; z-index: 7000; display: none; } .is-menu-open .c-layer { display: block; }