@charset "UTF-8"; /*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, input, select):not(svg *, symbol *)) { all: unset; display: revert; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } * { --header-height: 50px; --inner-padding: 4vw; --hover-opacity: 0.7; --base-line-height: 1.8; --base-font-weight: 500; --base-font-family: "Zen Kaku Gothic New", sans-serif; --text-color: #222; --hover-text-color: #848484; --color-yellow: #ffff00; --color-green: #12a000; --color-red: #ff4343; --color-blue: #2090e6; --color-light-brown: #fff0de; --color-dark-brown: #7a4d2d; --color-beige: #ebdfca; margin: 0; padding: 0; } @media (min-width: 768px) { * { --header-height: 83px; } } *::before, *::after { pointer-events: none; } html { overflow: auto; font-size: 62.5%; } body { position: relative; overflow: hidden; min-width: 320px; max-width: 1920px; margin-left: auto; margin-right: auto; padding-top: var(--header-height); line-height: var(--base-line-height); background-color: #fff; font-weight: var(--base-font-weight); font-family: var(--base-font-family); -webkit-text-size-adjust: 100%; color: var(--text-color); font-size: clamp(1.4rem, 1.2451612903rem + 0.3225806452vw, 1.6rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.2451612903rem + 0.3225806452vw, 16 * 0.1rem)) { body { font-size: 1.4rem; } } body h1:has(wbr), body h2:has(wbr), body h3:has(wbr), body h4:has(wbr), body h5:has(wbr), body h6:has(wbr), body p:has(wbr), body li:has(wbr), body dt:has(wbr), body dd:has(wbr), body span:has(wbr) { word-break: keep-all; overflow-wrap: anywhere; } body#error { --wrapper-background: #ac8238; } .l-wrapper { background-color: var(--wrapper-background, #a88b77); } .l-main { position: relative; } .l-main > * { position: relative; z-index: 2; } .l-main--home::before { content: ""; display: inline-block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 101vw; height: 110%; min-height: 5996px; background: url(../img/home/bg_main01_sp.png) no-repeat top center/cover; pointer-events: none; } .l-main--has-sidebar::before { content: ""; display: inline-block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; min-height: 6209px; background: url(../img/articles/bg_main01_sp.png) no-repeat top center/100%; pointer-events: none; } @media (min-width: 768px) { .l-main--home::before { width: 1920px; height: 4615px; background-image: url(../img/home/bg_main01_pc.png); } .l-main--has-sidebar { width: 95%; margin: auto; display: grid; grid-template-columns: 198px 1fr; grid-column-gap: 30px; } .l-main--has-sidebar::before { width: 1920px; min-height: 5094px; background-image: url(../img/home/bg_main01_pc.png); } } @media (min-width: 1100px) { .l-main--has-sidebar { width: fit-content; grid-column-gap: 60px; } } @media (min-width: 1280px) { .l-main--home::before { background-image: url(../img/home/bg_main01_pc-large.png); } } a { color: inherit; text-decoration: none; transition: all 0.2s ease-in; } @media not all and (pointer: coarse) { a:hover { cursor: pointer; } } span { font-weight: inherit; } img { display: block; width: 100%; height: auto; } input, textarea, button, select { border: none; appearance: none; caret-color: currentcolor; cursor: pointer; } input:focus-visible, textarea:focus-visible, button:focus-visible, select:focus-visible { outline-color: var(--color-blue); } @media (max-width: 767.98px) { input, textarea, button, select { font-size: 1.6rem; } } /* gnav overlay */ .js-overlay { display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.4); background-blend-mode: multiply; opacity: 0; } /* MV slider */ .js-mv-slider .splide__arrow { background: #fff; border: 1px solid var(--color-blue); opacity: 1; } .js-mv-slider .splide__arrow::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .js-mv-slider .splide__arrow--next::after { margin-left: 2px; content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent transparent transparent var(--color-blue); border-width: 7.5px 0 7.5px 12px; } .js-mv-slider .splide__arrow--prev::after { margin-left: -2px; content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent var(--color-blue) transparent transparent; border-width: 7.5px 12px 7.5px 0; } .js-mv-slider .splide__pagination { justify-content: flex-start; } .js-mv-slider .splide__pagination__page { z-index: 10; background: var(--color-blue); } .js-mv-slider .splide__pagination__page.is-active { background: #bababa; } .js-mv-slider .splide:not(.is-overflow) .splide__pagination { display: block; } /* latest slider */ .js-latest-slider .splide__arrow { background: #fff; border: 1px solid var(--color-blue); opacity: 1; } .js-latest-slider .splide__arrow::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .js-latest-slider .splide__arrow--next { right: -2em; } .js-latest-slider .splide__arrow--next::after { margin-left: 2px; content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent transparent transparent var(--color-blue); border-width: 7.5px 0 7.5px 12px; } .js-latest-slider .splide__arrow--prev { left: -2em; } .js-latest-slider .splide__arrow--prev::after { margin-left: -2px; content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent var(--color-blue) transparent transparent; border-width: 7.5px 12px 7.5px 0; } @media (min-width: 1100px) { .js-latest-slider .splide__arrows { display: none; } } /* bg animation */ .js-bg-animation { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3000px; height: 5268px; pointer-events: none; } @media (min-width: 1280px) { .js-bg-animation { display: block; } } #mogura { width: 300px; height: 260px; } /* .l-header */ .l-header { box-sizing: border-box; position: fixed; z-index: 5000; top: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; width: min(100%, 1920px); height: var(--header-height); padding: 0 var(--header-padding, 15px); background-color: #fff; } .l-header__logo { width: var(--header-logo-size, 66px); } .l-header__sns { margin-top: 10.6vw; } .l-header__privacy { font-size: 1rem; text-align: center; } .l-header__privacy { margin-top: 6.6vw; } @media (max-width: 767.98px) { .l-header { --gnav-line-gap: 9px; transition: all 0.2s ease-in; } .l-header::after { content: ""; display: inline-block; position: absolute; top: 11px; left: calc(50% - 27px); transform: translateY(100%) scale(0); width: 54px; height: 47px; background: url(../img/common/img_hover-mole.png) no-repeat center/contain; opacity: 1; visibility: hidden; transition: transform 0.2s ease-in, opacity 0.3s ease-in-out; } .l-header.is-open { background-color: var(--color-yellow); } .l-header.is-open::after { z-index: 9001; transform: translateY(0) scale(1); opacity: 1; visibility: visible; } .l-header__btn { position: relative; width: 36px; height: 16px; } .l-header__btn-line { position: absolute; left: 0; width: 100%; height: 2px; background: var(--text-color); transition: all 0.2s ease-in; } .l-header__btn-line:nth-child(1) { top: 0; } .l-header__btn-line:nth-child(2) { top: var(--gnav-line-gap); } .l-header__btn-line:nth-child(3) { top: calc(var(--gnav-line-gap) * 2); } .l-header__btn.is-open .l-header__btn-line:nth-child(1) { top: var(--gnav-line-gap); transform: rotate(-25deg); } .l-header__btn.is-open .l-header__btn-line:nth-child(2) { opacity: 0; } .l-header__btn.is-open .l-header__btn-line:nth-child(3) { top: var(--gnav-line-gap); transform: rotate(25deg); } .l-header__nav { box-sizing: border-box; position: absolute; z-index: 9000; top: var(--header-height); left: 50%; transform: translateX(-50%); padding-top: 48px; padding-bottom: 104px; background: #fff url(../img/common/bg_gnav01.png) no-repeat center bottom/100%; border-radius: 0 0 200px 200px; overflow-y: auto; opacity: 0; visibility: hidden; } .l-header__nav { width: 85.3vw; } .l-header__nav.is-open { opacity: 1; visibility: visible; } } @media (min-width: 768px) { .l-header { --header-padding: 50px; --header-logo-size: 124px; } .l-header__nav { height: 100%; } } @media (min-width: 1100px) { .l-header__nav { position: relative; padding-right: 118px; } .l-header__nav::after { content: ""; display: inline-block; position: absolute; top: 23px; right: 0; width: 88px; height: 76px; background: url(../img/common/img_hover-mole.png) no-repeat center/contain; } } /* .l-footer */ .l-footer { position: relative; z-index: 5; color: #fff; } .l-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; } .l-footer::before { height: 138.3vw; } .l-footer::before { background: url(../img/common/bg_footer03_sp.png) no-repeat center bottom/100%; } .l-footer__page-top { position: fixed; z-index: 3000; bottom: 50px; right: 50px; width: 76px; height: 86px; opacity: 0; visibility: hidden; transition: all 0.2s ease-in; } @media not all and (pointer: coarse) { .l-footer__page-top:hover { opacity: var(--hover-opacity); } } .l-footer__page-top.is-visible { opacity: 1; visibility: visible; } .l-footer__inner { position: relative; z-index: 2; } .l-footer__inner { padding-top: 57vw; } .l-footer__inner { padding-bottom: 6.6vw; } .l-footer__logo img { width: 58.6vw; } .l-footer__text { font-size: clamp(1.4rem, 1.0903225806rem + 0.6451612903vw, 1.8rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.0903225806rem + 0.6451612903vw, 18 * 0.1rem)) { .l-footer__text { font-size: 1.4rem; } } .l-footer__credit { position: relative; padding: 10px 0; background-color: var(--color-dark-brown); font-size: 1rem; color: #fff; text-align: center; } .l-footer__credit::before, .l-footer__credit::after { content: ""; position: absolute; background: no-repeat center bottom/contain; } .l-footer__credit::before { bottom: 0; left: -20px; width: 112px; height: 98px; background-image: url(../img/common/bg_footer01_sp.png); } .l-footer__credit::after { bottom: 10px; right: 10px; width: 60px; height: 60px; background-image: url(../img/common/bg_footer02_sp.png); } .l-footer-sec { justify-self: center; margin-top: 2.5em; } .l-footer-sec__shinsa { font-size: 1.2rem; } .l-footer-sec__number { display: inline-block; padding: 3px 9px; border: 1px solid #fff; } .l-footer-sec__kigen { display: inline-block; padding-inline: 0; border-color: transparent; } .l-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1em 2em; margin-top: 2em; } .l-footer-links__link { font-size: clamp(1.1rem, 0.8677419355rem + 0.4838709677vw, 1.4rem); } @supports not (font-size: clamp(11 * 0.1rem, 0.8677419355rem + 0.4838709677vw, 14 * 0.1rem)) { .l-footer-links__link { font-size: 1.1rem; } } @media not all and (pointer: coarse) { .l-footer-links__link:hover { text-decoration: underline; } } .l-footer-links__icon { display: inline-block; width: 1em; height: 1em; } .l-footer-links__icon svg { width: 100%; height: 100%; } @media (max-width: 370px) { .l-footer::after { content: ""; position: absolute; z-index: -1; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 25%; background-color: #2090e6; } } @media (max-width: 767.98px) { .l-footer__logo { margin-bottom: 6.4vw; } .l-footer__logo img { margin: auto; } } @media (min-width: 768px) { .l-footer::before { top: inherit; bottom: 0; width: 1920px; height: 634px; background-image: url(../img/common/bg_footer03_pc.png); background-position: center bottom; background-size: 1920px; } .l-footer__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding-top: 250px; padding-bottom: 30px; } .l-footer__logo { padding-right: 28px; } .l-footer__logo img { width: min(87%, 479px); } .l-footer__text p { width: 91%; } .l-footer-sec { justify-self: end; grid-column: 2/3; grid-row: 2; margin-top: 70px; } .l-footer-links { grid-column: 1/3; grid-row: 3; margin-top: 0; } .l-footer__credit { padding: 16px 0; font-size: 1.2rem; } .l-footer__credit::before { bottom: 0; left: inherit; right: calc(50% + 495px); background-image: url(../img/common/bg_footer01_pc.png); width: clamp(347px, 347px + 149 * (100vw - 768px) / 332, 496px); height: clamp(205px, 205px + 89 * (100vw - 768px) / 332, 294px); } .l-footer__credit::after { bottom: 0; right: inherit; left: calc(50% + 566px); width: 139px; height: 112px; background-image: url(../img/common/bg_footer02_pc.png); } } @media (min-width: 1100px) { .l-footer__inner { padding-top: 450px; } } .l-breadcrumb { padding: 10px 0; } @media (min-width: 768px) { .l-breadcrumb { padding: 14px 30px; } } .l-breadcrumb-list { display: flex; white-space: nowrap; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; overflow: auto; } .l-breadcrumb-list::-webkit-scrollbar { display: none; } .l-breadcrumb-list__item { display: inline-flex; align-items: center; line-height: 1.5; font-weight: 500; font-size: 1.1rem; word-break: keep-all; color: #fff; } .l-breadcrumb-list__item + .l-breadcrumb-list__item { margin-left: 10px; } .l-breadcrumb-list__item + .l-breadcrumb-list__item:before { content: ">"; display: inline-block; margin-right: 10px; transform: translateY(-2px); } @media not all and (pointer: coarse) { .l-breadcrumb-list__link:hover { text-decoration: underline; } } @media (min-width: 768px) { .l-breadcrumb-list__item { font-size: 1.4rem; } } .l-mainvisual { position: relative; background-color: var(--mv-background-color, --color-blue); } .l-mainvisual::before { content: ""; position: absolute; display: inline-block; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: url(../img/home/bg_mv01_sp.png) no-repeat center bottom/100%; } .l-mainvisual.is-tech { --mv-background-color: var(--color-blue); } .l-mainvisual.is-case { --mv-background-color: var(--color-green); } .l-mainvisual.is-culture { --mv-background-color: var(--color-red); } .l-mainvisual__inner { padding-top: 8.2vw; } .l-mainvisual__image { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .l-mainvisual__image { width: 58.1vw; } .l-mainvisual__image { aspect-ratio: 1.1764705882; } @supports not (aspect-ratio: 1.1764705882) { .l-mainvisual__image { position: relative; padding-top: 85%; } .l-mainvisual__image > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .l-mainvisual__lottie { pointer-events: none; width: 100%; height: 100%; } @media (max-width: 767.98px) { .l-mainvisual { --inner-padding: 8.66vw; } .l-mainvisual { aspect-ratio: 0.4921259843; } @supports not (aspect-ratio: 0.4921259843) { .l-mainvisual { position: relative; padding-top: 203.2%; } .l-mainvisual > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .l-mainvisual__head { margin-bottom: 8vw; } } @media (min-width: 768px) { .l-mainvisual { height: 750px; } .l-mainvisual::before { width: 1920px; height: 1000px; background-image: url(../img/home/bg_mv01_pc.png); } .l-mainvisual__inner { display: grid; grid-template-columns: 1fr 1fr; place-items: center; grid-column-gap: 5%; padding-top: 80px; } .l-mainvisual__image { width: min(35%, 542px); } } @media (min-width: 1100px) { .l-mainvisual { height: 1000px; } } @media (min-width: 1280px) { .l-mainvisual__inner { display: grid; grid-template-columns: 57.64% 1fr; grid-column-gap: min(7.14%, 100px); place-items: start; max-width: 1400px; padding-top: 123px; } } .l-subvisual { position: relative; background-color: var(--taxonomy-color, var(--color-blue)); } .l-subvisual--error .l-subvisual__head { line-height: 1.5; font-weight: 700; color: var(--color-yellow); font-size: clamp(4rem, 1.6774193548rem + 4.8387096774vw, 7rem); } @supports not (font-size: clamp(40 * 0.1rem, 1.6774193548rem + 4.8387096774vw, 70 * 0.1rem)) { .l-subvisual--error .l-subvisual__head { font-size: 4rem; } } .l-subvisual::before { content: ""; display: inline-block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: url(../img/articles/bg_mv01_sp.png) no-repeat center bottom/100%; } .l-subvisual--article::before { background-image: url(../img/articles/bg_mv03_sp.png); } .l-subvisual--article .l-subvisual__inner { position: relative; z-index: 2; margin: auto; } .l-subvisual--article .l-subvisual__inner { width: 80vw; } .l-subvisual--article .l-subvisual__inner { padding-top: 13.3vw; } .l-subvisual--article .l-subvisual__inner { padding-bottom: 17vw; } .l-subvisual__inner { padding-top: 13.3vw; } .l-subvisual__head { display: flex; flex-direction: column; gap: 0.5em; font-weight: 700; } .l-subvisual__head-en { display: inline-block; } .l-subvisual__head-en img { width: 40.5vw; } .l-subvisual__head-ja { display: inline-block; line-height: 1.3; color: #fff; font-size: clamp(2.4rem, 0.3870967742rem + 4.1935483871vw, 5rem); } @supports not (font-size: clamp(24 * 0.1rem, 0.3870967742rem + 4.1935483871vw, 50 * 0.1rem)) { .l-subvisual__head-ja { font-size: 2.4rem; } } .l-subvisual__lead { margin-top: 1em; color: #fff; font-size: clamp(2rem, 1.3806451613rem + 1.2903225806vw, 2.8rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.3806451613rem + 1.2903225806vw, 28 * 0.1rem)) { .l-subvisual__lead { font-size: 2rem; } } @media (max-width: 767.98px) { .l-subvisual__inner { padding-bottom: 57.6vw; } } @media (min-width: 768px) { .l-subvisual { height: 614px; } .l-subvisual::before { width: 1920px; background-image: url(../img/articles/bg_mv01_pc.png); } .l-subvisual__inner { padding-top: 80px; } .l-subvisual__head { flex-direction: row; align-items: end; gap: 27px; } .l-subvisual__head-en img { width: 273px; } .l-subvisual--article { height: auto; } .l-subvisual--article::before { background-image: url(../img/articles/bg_mv03_pc.png); } .l-subvisual--article .l-subvisual__inner { width: min(90%, 900px); padding-top: 65px; padding-bottom: 110px; } } .l-subvisual--article .l-subvisual-header__meta { display: flex; justify-content: space-between; align-items: center; } .l-subvisual--article .l-subvisual-header__taxonomy { display: inline-block; padding: 0 28px; background-color: #fff; border-radius: 27px; color: var(--mv-taxonomy-font-color); font-size: clamp(1.5rem, 0.9580645161rem + 1.1290322581vw, 2.2rem); } @supports not (font-size: clamp(15 * 0.1rem, 0.9580645161rem + 1.1290322581vw, 22 * 0.1rem)) { .l-subvisual--article .l-subvisual-header__taxonomy { font-size: 1.5rem; } } .l-subvisual--article .l-subvisual-header__date { color: #fff; font-size: clamp(1.4rem, 0.7806451613rem + 1.2903225806vw, 2.2rem); } @supports not (font-size: clamp(14 * 0.1rem, 0.7806451613rem + 1.2903225806vw, 22 * 0.1rem)) { .l-subvisual--article .l-subvisual-header__date { font-size: 1.4rem; } } .l-subvisual--article .l-subvisual-header__head { line-height: 1.5; font-weight: 700; color: var(--color-yellow); } .l-subvisual--article .l-subvisual-header__head { margin-bottom: 5.3vw; } .l-subvisual--article .l-subvisual-header__head { font-size: clamp(2rem, 0.4516129032rem + 3.2258064516vw, 4rem); } @supports not (font-size: clamp(20 * 0.1rem, 0.4516129032rem + 3.2258064516vw, 40 * 0.1rem)) { .l-subvisual--article .l-subvisual-header__head { font-size: 2rem; } } .l-subvisual--article .l-subvisual-header__eyecatch { border-radius: 20px; overflow: hidden; } .l-subvisual--article .l-subvisual-header__eyecatch { margin-bottom: 4.2vw; } .l-subvisual--article .l-subvisual-header__share-button { display: block; width: fit-content; margin-left: auto; padding: 6px 20px; background-color: #fff; font-size: clamp(1.2rem, 0.8903225806rem + 0.6451612903vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.8903225806rem + 0.6451612903vw, 16 * 0.1rem)) { .l-subvisual--article .l-subvisual-header__share-button { font-size: 1.2rem; } } @media (min-width: 768px) { .l-subvisual--article .l-subvisual-header__meta { margin-bottom: 15px; } .l-subvisual--article .l-subvisual-header__taxonomy { padding: 0 52px; } .l-subvisual--article .l-subvisual-header__head { margin-bottom: 15px; } .l-subvisual--article .l-subvisual-header__eyecatch { margin-bottom: 25px; border-radius: 40px; } .l-subvisual--article .l-subvisual-header__share-button { padding: 7px 24px; } } .l-sidebar { box-sizing: border-box; margin-left: auto; margin-right: auto; padding: 4.8vw 8vw; background-color: var(--color-yellow); border-radius: 40px; } .l-sidebar { width: 88vw; } .l-sidebar__head { line-height: 1.1; text-align: center; } .l-sidebar__head { margin-bottom: 3.4vw; } .l-sidebar__head { font-size: clamp(2.2rem, 1.5806451613rem + 1.2903225806vw, 3rem); } @supports not (font-size: clamp(22 * 0.1rem, 1.5806451613rem + 1.2903225806vw, 30 * 0.1rem)) { .l-sidebar__head { font-size: 2.2rem; } } .l-sidebar-list__link { position: relative; display: block; font-weight: 700; font-size: 1.8rem; } .l-sidebar-list__link::before { content: "-"; display: inline-block; margin-right: 0.25em; } @media not all and (pointer: coarse) { .l-sidebar-list__link:hover { color: var(--color-blue); text-decoration: underline; } } @media (max-width: 767.98px) { .l-sidebar-list { display: grid; grid-template-columns: minmax(auto, 30%) 1fr; grid-gap: 1em 2em; } } @media (min-width: 768px) { .l-sidebar { position: relative; width: 180px; height: fit-content; min-height: 480px; padding: 80px 20px; border-radius: 98px; } .l-sidebar__head { margin-bottom: 20px; } .l-sidebar-list__item:not(:last-of-type) { margin-bottom: 1.5em; } } @media (max-width: 767.98px) { .c-archive__inner { padding-top: 34.1vw; } .c-archive__button-area { position: relative; } .c-archive__button-area { padding-top: 53.3vw; } .c-archive__button-area { padding-bottom: 53.3vw; } .c-archive__button-area::before, .c-archive__button-area::after { content: ""; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-repeat: no-repeat; background-size: contain; } .c-archive__button-area::before { top: 0; background-image: url(../img/articles/bg_button01.png); background-position: top center; } .c-archive__button-area::after { bottom: 0; background-image: url(../img/articles/bg_button02.png); background-position: center bottom; } } @media (min-width: 768px) { .c-archive__inner { padding-bottom: 220px; } } .c-article + .c-article { margin-top: 16vw; } .c-article h2:not([class]) { font-weight: 700; color: var(--color-dark-brown); } .c-article h2:not([class]) { margin-bottom: 4vw; } .c-article h2:not([class]) { font-size: clamp(2rem, 1.3806451613rem + 1.2903225806vw, 2.8rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.3806451613rem + 1.2903225806vw, 28 * 0.1rem)) { .c-article h2:not([class]) { font-size: 2rem; } } .c-article h2:not([class]) span { display: inline-block; margin-right: 0.25em; } .c-article h3:not([class]) { margin-top: 1em; margin-bottom: 0.75em; font-weight: 700; color: var(--color-dark-brown); font-size: clamp(1.6rem, 1.135483871rem + 0.9677419355vw, 2.2rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.135483871rem + 0.9677419355vw, 22 * 0.1rem)) { .c-article h3:not([class]) { font-size: 1.6rem; } } .c-article p + p { margin-top: 1.8em; } .c-article figure { margin-top: 8vw; } .c-article figure { margin-bottom: 8vw; } .c-article figure img { margin: auto; } .c-article figure figcaption { margin-top: 0.8em; text-align: center; font-size: clamp(1.2rem, 0.8903225806rem + 0.6451612903vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.8903225806rem + 0.6451612903vw, 16 * 0.1rem)) { .c-article figure figcaption { font-size: 1.2rem; } } .c-article__intro { position: relative; box-sizing: border-box; padding: 3.2vw 4vw 3.2vw 18.67vw; background-color: var(--taxonomy-color, var(--color-blue)); font-weight: 700; color: #fff; } .c-article__intro { margin-bottom: 8vw; } .c-article__intro { font-size: clamp(1.4rem, 0.935483871rem + 0.9677419355vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 0.935483871rem + 0.9677419355vw, 20 * 0.1rem)) { .c-article__intro { font-size: 1.4rem; } } .c-article__intro::before { content: ""; display: inline-block; position: absolute; top: 50%; left: -4vw; transform: translateY(-50%); height: 78px; background: url(../img/common/img_mole-pop-left.png) no-repeat left center/contain; } .c-article__image-area { display: grid; grid-template-columns: 100%; grid-gap: 2em; place-items: center; } .c-article__outro { display: grid; grid-template-columns: 100%; grid-gap: 15px; } .c-article__outro { margin-top: 8vw; } .c-article__outro--has-margin-bottom { margin-bottom: 8vw; } .c-article__outro p { position: relative; box-sizing: border-box; padding: 5.87vw 6.93vw; border-radius: 30px; background-color: var(--color-yellow); font-size: clamp(1.3rem, 0.9129032258rem + 0.8064516129vw, 1.8rem); } @supports not (font-size: clamp(13 * 0.1rem, 0.9129032258rem + 0.8064516129vw, 18 * 0.1rem)) { .c-article__outro p { font-size: 1.3rem; } } .c-article__outro p::after { position: absolute; } .c-article__outro img { width: 24.5vw; } .c-article__outro img { height: 16vw; } @media (max-width: 767.98px) { .c-article__intro { margin-inline: calc(50% - 50vw); } .c-article__intro::before { width: 100vw; } .c-article__outro { place-items: center; } .c-article__outro p::after { top: 100%; left: 50%; transform: translateX(-50%); content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: #ffff00 transparent transparent transparent; border-width: 10px 5px 0 5px; } } @media (min-width: 768px) { .c-article + .c-article { margin-top: 170px; } .c-article h2:not([class]) { margin-bottom: 40px; } .c-article figure { margin-top: 40px; margin-bottom: 40px; } .c-article__intro { width: fit-content; margin-bottom: 50px; padding: 15px 28px 15px 80px; transform: translateX(53px); border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .c-article__intro::before { left: -53px; width: 127px; height: 127px; } .c-article__image-area { grid-template-columns: 1fr 1fr; } .c-article__outro { grid-template-columns: 1fr 200px; grid-gap: 25px; margin-top: 50px; } .c-article__outro--has-margin-bottom { margin-bottom: 50px; } .c-article__outro:not(.c-article__outro--reversed) p { margin-left: auto; } .c-article__outro:not(.c-article__outro--reversed) p::after { top: 50%; left: 100%; transform: translateY(-50%); content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent transparent transparent #ffff00; border-width: 7px 0 7px 14px; } .c-article__outro p { align-self: start; max-width: 843px; padding: 16px 60px; border-radius: 30px; } .c-article__outro img { width: 200px; height: 129px; } .c-article__outro--reversed { grid-template-columns: 200px 1fr; } .c-article__outro--reversed p { grid-column: 2; grid-row: 1; } .c-article__outro--reversed p::after { top: 50%; right: 100%; transform: translateY(-50%); content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent #ffff00 transparent transparent; border-width: 7px 14px 7px 0; } .c-article__outro--reversed img { grid-column: 1; grid-row: 1; } } .c-interviewee-box { box-sizing: border-box; padding: 8vw 4vw 10.67vw; border-radius: 24px; background-color: #fff; } .c-interviewee-box { margin-bottom: 10.6vw; } .c-interviewee-box--has-margin-top { margin-top: 10.6vw; } .c-interviewee-box__head { position: relative; padding-left: 97px; } .c-interviewee-box__head { margin-bottom: 8vw; } .c-interviewee-box__head::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 77px; height: 67px; background: url(../img/common/img_mole-crawler.png) no-repeat left center/contain; } .c-interviewee-box__head-en, .c-interviewee-box__head-ja { display: inline-block; } .c-interviewee-box__head-en { line-height: 1.1; color: var(--color-blue); font-size: clamp(3.6rem, 3.2903225806rem + 0.6451612903vw, 4rem); } @supports not (font-size: clamp(36 * 0.1rem, 3.2903225806rem + 0.6451612903vw, 40 * 0.1rem)) { .c-interviewee-box__head-en { font-size: 3.6rem; } } .c-interviewee-box__head-ja { line-height: 1.5; font-size: clamp(1.6rem, 0.9806451613rem + 1.2903225806vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.9806451613rem + 1.2903225806vw, 24 * 0.1rem)) { .c-interviewee-box__head-ja { font-size: 1.6rem; } } .c-interviewee-box__item:not(:last-of-type) { margin-bottom: 8vw; } .c-interviewee-box__picture img { border-radius: 50%; overflow: hidden; } .c-interviewee-box__picture img { width: 26.6vw; } .c-interviewee-box__picture img { height: 26.6vw; } .c-interviewee-box__name { margin-bottom: 4vw; } .c-interviewee-box__name-main { font-size: clamp(1.6rem, 0.9806451613rem + 1.2903225806vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.9806451613rem + 1.2903225806vw, 24 * 0.1rem)) { .c-interviewee-box__name-main { font-size: 1.6rem; } } .c-interviewee-box__name-ruby { font-size: clamp(1.2rem, 0.8903225806rem + 0.6451612903vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.8903225806rem + 0.6451612903vw, 16 * 0.1rem)) { .c-interviewee-box__name-ruby { font-size: 1.2rem; } } .c-interviewee-box__name-position { font-size: clamp(1.2rem, 0.735483871rem + 0.9677419355vw, 1.8rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.735483871rem + 0.9677419355vw, 18 * 0.1rem)) { .c-interviewee-box__name-position { font-size: 1.2rem; } } .c-interviewee-box__list { font-size: clamp(1.2rem, 0.735483871rem + 0.9677419355vw, 1.8rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.735483871rem + 0.9677419355vw, 18 * 0.1rem)) { .c-interviewee-box__list { font-size: 1.2rem; } } .c-interviewee-box__list li { box-sizing: border-box; position: relative; padding-left: 1.5em; } .c-interviewee-box__list li::before { content: "・"; display: inline-block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; } .c-interviewee-box__note { margin-top: 8vw; } .c-interviewee-box__note { font-size: clamp(1.2rem, 1.0451612903rem + 0.3225806452vw, 1.4rem); } @supports not (font-size: clamp(12 * 0.1rem, 1.0451612903rem + 0.3225806452vw, 14 * 0.1rem)) { .c-interviewee-box__note { font-size: 1.2rem; } } @media (max-width: 767.98px) { .c-interviewee-box__picture { margin-bottom: 2.1vw; } .c-interviewee-box__picture img { margin-left: auto; margin-right: auto; } .c-interviewee-box__name { text-align: center; } .c-interviewee-box__name-main, .c-interviewee-box__name-ruby, .c-interviewee-box__name-position { display: block; } } @media (min-width: 768px) { .c-interviewee-box { margin-bottom: 60px; padding: 45px 0; border-radius: 130px; } .c-interviewee-box--has-margin-top { margin-top: 60px; } .c-interviewee-box--picture-only .c-interviewee-box__picture-area { box-sizing: border-box; display: flex; justify-content: center; gap: clamp(30px, 30px + 30 * (100vw - 768px) / 332, 60px); } .c-interviewee-box--picture-only .c-interviewee-box__picture { margin: 0; } .c-interviewee-box__head { display: flex; align-items: center; gap: 24px; min-height: 72px; margin-bottom: 60px; padding-left: 124px; } .c-interviewee-box__head::before { top: -27px; left: -35px; transform: none; width: 140px; height: 121px; } .c-interviewee-box__item { box-sizing: border-box; display: grid; grid-template-columns: 180px 1fr; grid-column-gap: 15px; padding: 0 86px; } .c-interviewee-box__item:not(:last-of-type) { margin-bottom: 60px; } .c-interviewee-box__item--text-only { place-items: center; } .c-interviewee-box__item--text-only .c-interviewee-box__picture { grid-row: 1; } .c-interviewee-box__item--text-only .c-interviewee-box__text-area { grid-column: 2; } .c-interviewee-box__picture { grid-column: 1; grid-row: 1/3; } .c-interviewee-box__picture img { width: 180px; height: 180px; } .c-interviewee-box__name { margin-bottom: 15px; } .c-interviewee-box__note { box-sizing: border-box; margin-top: 30px; padding: 0 86px; text-align: right; } } .c-reference-box { box-sizing: border-box; padding: 13vw 5.87vw; margin-left: auto; margin-right: auto; background-color: #fff; border: 4px dotted var(--color-dark-brown); } .c-reference-box { width: 91.2vw; } .c-reference-box { margin-top: 10.6vw; } .c-reference-box { margin-bottom: 10.6vw; } .c-reference-box__head { position: relative; left: 50%; transform: translateX(-45%); padding-right: 70px; display: inline-block; } .c-reference-box__head { margin-bottom: 4vw; } .c-reference-box__head::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 67px; height: 67px; background: url(../img/articles/img_learn-more.png) no-repeat right center/contain; } .c-reference-box__head-en, .c-reference-box__head-ja { display: block; } .c-reference-box__head-en { line-height: 1.1; color: var(--color-blue); padding-right: 0rem; font-size: clamp(3.6rem, 3.2903225806rem + 0.6451612903vw, 4rem); } @supports not (font-size: clamp(36 * 0.1rem, 3.2903225806rem + 0.6451612903vw, 40 * 0.1rem)) { .c-reference-box__head-en { font-size: 3.6rem; } } .c-reference-box__head-ja { line-height: 1.5; font-size: clamp(1.6rem, 0.9806451613rem + 1.2903225806vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.9806451613rem + 1.2903225806vw, 24 * 0.1rem)) { .c-reference-box__head-ja { font-size: 1.6rem; } } .c-reference-box__text { border-bottom: 1px solid var(--color-dark-brown); } .c-reference-box__text { margin-bottom: 8vw; } .c-reference-box__text { padding-bottom: 8vw; } .c-reference-box__link { position: relative; display: inline-block; padding-left: 1.5em; color: var(--color-blue); text-decoration: underline; font-size: clamp(1.6rem, 0.9806451613rem + 1.2903225806vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.9806451613rem + 1.2903225806vw, 24 * 0.1rem)) { .c-reference-box__link { font-size: 1.6rem; } } .c-reference-box__link::before { content: "・"; display: inline-block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; } @media not all and (pointer: coarse) { .c-reference-box__link:hover { text-decoration: none; } } .c-reference-box__link-icon { display: inline-block; width: 1em; height: 1em; margin-left: 0.25em; vertical-align: text-top; } .c-reference-box__link-icon svg { width: 100%; height: 100%; } @media (min-width: 768px) { .c-reference-box { width: min(90%, 976px); margin-top: 80px; margin-bottom: 80px; padding: 50px 46px; } .c-reference-box__head-en, .c-reference-box__head-ja { display: inline-block; padding-right: 1rem; } .c-reference-box__text { margin-bottom: 30px; padding-bottom: 30px; } } .c-button { --button-margin-top: 10.66vw; --button-margin-left: auto; --button-margin-right: auto; --button-margin-bottom: 0; --button-width: 308px; --button-height: 56px; --button-border-color: var(--color-dark-brown); } .c-button__link { position: relative; box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 5px; width: min(82.13vw, var(--button-width)); height: var(--button-height); margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left); border: 1px solid var(--button-border-color); background-color: var(--button-background-color, #fff); border-radius: 38px; color: var(--color-dark-brown); font-weight: 700; font-size: var(--button-font-size, 1.6rem); } @media not all and (pointer: coarse) { .c-button__link:hover { --button-background-color: var(--color-light-brown); --button-arrow-background-color: var(--color-dark-brown); transform: translateX(32px); } .c-button__link:hover .c-button__arrow { color: var(--color-light-brown); } .c-button__link:hover .c-button__arrow::after { transform: translate(-50%, -50%) scale(1.33); } } .c-button__icon { display: flex; align-items: center; } .c-button__icon svg { width: var(--button-icon-svg-width, 53px); height: var(--button-icon-svg-height, 18px); } .c-button__arrow { box-sizing: border-box; position: absolute; top: 50%; right: -1px; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: var(--button-arrow, 55px); height: var(--button-arrow, 55px); color: var(--color-dark-brown); transition: all 0.2s ease-in; } .c-button__arrow::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background-color: var(--button-arrow-background-color, var(--color-light-brown)); border: 1px solid var(--button-border-color); transition: all 0.2s ease-in; } .c-button__arrow svg { width: var(--button-arrow-svg-width, 22px); height: var(--button-arrow-svg-height, 12px); } @media (min-width: 768px) { .c-button { --button-margin-top: 80px; --button-width: 450px; --button-height: 75px; --button-icon-svg-width: 77px; --button-icon-svg-height: 26px; --button-arrow: 75px; --button-arrow-svg-width: 60px; --button-arrow-svg-height: 15px; --button-font-size: 2rem; } } .c-button--back .c-button__link { flex-direction: row-reverse; } @media not all and (pointer: coarse) { .c-button--back .c-button__link:hover { transform: translateX(-32px); } } .c-button--back .c-button__icon { transform: scaleX(-1); } .c-button--back .c-button__arrow { right: inherit; left: -1px; transform: translateY(-50%) scaleX(-1); } .c-button__wrapper { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20.2vw; } .c-button__wrapper { gap: 4vw; } .c-button__wrapper .c-button { --button-margin-top: 0; } @media (min-width: 768px) { .c-button__wrapper { margin-bottom: 170px; } } .c-share-button { display: flex; flex-direction: column; justify-content: center; } .c-share-button { padding-bottom: 10.6vw; } .c-share-button__image { margin: auto; } .c-share-button__image { width: 26.6vw; } .c-share-button__head { line-height: 1.5; font-size: clamp(1.6rem, 0.9806451613rem + 1.2903225806vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.9806451613rem + 1.2903225806vw, 24 * 0.1rem)) { .c-share-button__head { font-size: 1.6rem; } } .c-share-button__list { display: flex; justify-content: center; align-items: center; } .c-share-button__list { gap: 6.1vw; } .c-share-button__item { width: 9.8vw; } .c-share-button__item--x { width: 8.5vw; } @media (max-width: 767.98px) { .c-share-button__head { text-align: center; } .c-share-button__head { margin-bottom: 4vw; } .c-share-button__image { margin-bottom: 5.3vw; } } @media (min-width: 768px) { .c-share-button { display: grid; grid-template-columns: 158px 1fr; place-items: center; grid-gap: 16px 28px; width: fit-content; margin: auto; padding-bottom: 130px; } .c-share-button__image { grid-column: 1; grid-row: 1/3; width: 158px; } .c-share-button__head { grid-column: 2; justify-self: start; } .c-share-button__list { grid-column: 2; justify-content: flex-start; gap: 28px; } .c-share-button__item { width: 73px; } .c-share-button__item--x { width: 51px; } } .c-taxonomy-button { position: relative; display: inline-block; max-width: 333px; } .c-taxonomy-button__link { position: relative; display: block; height: 100%; width: 100%; } .c-taxonomy-button__shape { fill: var(--taxonomy-button-fill, var(--color-blue)); transition: all 0.2s ease-in; } .c-taxonomy-button__shape svg { width: 100%; height: 100%; } .c-taxonomy-button__content { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; text-align: center; transition: all 0.2s ease-in; } .c-taxonomy-button__icon svg { width: 77px; height: 26px; } .c-taxonomy-button__text { line-height: 1.4; font-weight: 700; text-align: center; font-size: clamp(1.6rem, 0.0516129032rem + 3.2258064516vw, 3.6rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.0516129032rem + 3.2258064516vw, 36 * 0.1rem)) { .c-taxonomy-button__text { font-size: 1.6rem; } } @media not all and (pointer: coarse) { .c-taxonomy-button:hover .c-taxonomy-button__shape { fill: #fff; stroke: var(--taxonomy-button-stroke, var(--color-blue)); stroke-width: 2px; } .c-taxonomy-button:hover .c-taxonomy-button__content { color: var(--taxonomy-button-stroke, var(--color-blue)); } } @media (min-width: 768px) { .c-taxonomy-button__icon svg { width: 133px; height: 44px; } } .c-taxonomy-button--blue { --taxonomy-button-fill: var(--color-blue); --taxonomy-button-stroke: var(--color-blue); } .c-taxonomy-button--green { --taxonomy-button-fill: var(--color-green); --taxonomy-button-stroke: var(--color-green); } .c-taxonomy-button--red { --taxonomy-button-fill: var(--color-red); --taxonomy-button-stroke: var(--color-red); } .c-taxonomy-button__wrap { display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; } .c-taxonomy-button__wrap { gap: 2.6vw; } @media (min-width: 768px) { .c-taxonomy-button__wrap { gap: 50px; } } .c-card { position: relative; } .c-card__ranking-icon { width: 78px; height: 39px; margin: auto; } .c-card__link { position: relative; display: block; background-color: #fff; border-radius: 40px; overflow: hidden; } @media not all and (pointer: coarse) { .c-card__link:hover .c-card__icon { z-index: 10; transform: translateY(0) scale(1); opacity: 1; visibility: visible; } .c-card__link:hover .c-card__image { transform: scale(0.7); transform-origin: center bottom; } .c-card__link:hover .c-card__head { color: var(--hover-text-color); text-decoration: underline; } .c-card__link:hover .c-card__more { opacity: 1; visibility: visible; } } .c-card__more { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); font-size: 1.6rem; color: var(--card-more-color); opacity: 0; visibility: hidden; transition: all 0.2s ease-in; } .c-card__more--tech { --card-more-color: var(--color-blue); } .c-card__more--case { --card-more-color: var(--color-green); } .c-card__more--culture { --card-more-color: var(--color-red); } .c-card__image-area { position: relative; } .c-card__image-area { margin-bottom: 4vw; } .c-card__icon { display: inline-block; position: absolute; bottom: calc(70% - 17px); left: calc(50% - 38px); transform: translateY(100px) scale(0); width: 76px; height: 66px; background: url(../img/common/img_hover-mole.png) no-repeat center/contain; opacity: 0; visibility: hidden; transition: transform 0.2s ease-in, opacity 0.3s ease-in-out; } .c-card__image { transition: all 0.2s ease-in; } .c-card__text-wrap { overflow: hidden; box-sizing: border-box; } .c-card__text-wrap { padding-left: 4.5vw; } .c-card__text-wrap { padding-right: 4.5vw; } .c-card__text-wrap { padding-bottom: 8vw; } .c-card__meta { display: flex; justify-content: space-between; align-items: center; } .c-card__meta { margin-bottom: 4vw; } .c-card__meta--tech { --card-meta-color: var(--color-blue); } .c-card__meta--case { --card-meta-color: var(--color-green); } .c-card__meta--culture { --card-meta-color: var(--color-red); } .c-card__meta-date { color: var(--card-meta-color); } .c-card__meta-taxonomy { box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 2px 20px; border-radius: 40px; background-color: var(--card-meta-color); font-weight: 700; color: #fff; font-size: clamp(1.3rem, 1.0677419355rem + 0.4838709677vw, 1.6rem); } @supports not (font-size: clamp(13 * 0.1rem, 1.0677419355rem + 0.4838709677vw, 16 * 0.1rem)) { .c-card__meta-taxonomy { font-size: 1.3rem; } } .c-card__head { font-size: clamp(1.4rem, 1.0903225806rem + 0.6451612903vw, 1.8rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.0903225806rem + 0.6451612903vw, 18 * 0.1rem)) { .c-card__head { font-size: 1.4rem; } } .c-card__head { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (min-width: 768px) { .c-card__ranking-icon { width: 120px; height: 59px; } .c-card__image-area { margin-bottom: 30px; } .c-card__text-wrap { padding-left: 10px; padding-right: 10px; padding-bottom: 52px; } .c-card__meta { margin-bottom: 10px; } .c-card__meta-taxonomy { font-size: clamp(1.1rem, 0.1746987952rem + 1.2048192771vw, 1.5rem); } @supports not (font-size: clamp(11 * 0.1rem, 0.1746987952rem + 1.2048192771vw, 15 * 0.1rem)) { .c-card__meta-taxonomy { font-size: 1.1rem; } } } @media (min-width: 1100px) { .c-card--first .c-card__ranking-icon { width: 148px; height: 81px; margin-left: 27px; } .c-card--second, .c-card--third { margin-top: 52px; } .c-card__ranking-icon { margin-left: 34px; } .c-card__text-wrap { padding-left: 20px; padding-right: 20px; } } .c-card-list { display: grid; } .c-card-list { grid-gap: 4.8vw; } @media (max-width: 767.98px) { .c-card-list--ranking { margin-left: auto; margin-right: auto; } .c-card-list--ranking { max-width: 66.6vw; } .c-card-list--latest { display: flex; grid-gap: 0; } } @media (min-width: 768px) { .c-card-list { grid-template-columns: 1fr 1fr; grid-gap: 25px; } .c-card-list--has-sidebar { grid-template-columns: 100%; } .c-card-list--ranking { grid-template-columns: repeat(3, 1fr); } .c-card-list--latest .c-card { width: 300px; } } @media (min-width: 1024px) { .c-card-list--has-sidebar { max-width: 726px; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .c-card-list { grid-template-columns: repeat(3, 1fr); } .c-card-list--ranking { max-width: 1040px; grid-template-columns: 350px repeat(2, 1fr); } .c-card-list--has-sidebar { grid-template-columns: repeat(2, 1fr); } .c-card-list--latest { place-items: center; } .c-card-list--latest .c-card { width: 350px; } } .c-interview + .c-interview { margin-top: 8vw; } .c-interview__question { color: var(--color-dark-brown); } .c-interview__question { margin-bottom: 8vw; } .c-interview__question { font-size: clamp(1.6rem, 1.135483871rem + 0.9677419355vw, 2.2rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.135483871rem + 0.9677419355vw, 22 * 0.1rem)) { .c-interview__question { font-size: 1.6rem; } } .c-interview__answer { font-size: clamp(1.4rem, 1.0903225806rem + 0.6451612903vw, 1.8rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.0903225806rem + 0.6451612903vw, 18 * 0.1rem)) { .c-interview__answer { font-size: 1.4rem; } } .c-interview__answer span { font-weight: 700; } .c-interview__answer p + p { margin-top: 1.8em; } @media (min-width: 768px) { .c-interview + .c-interview { margin-top: 30px; } .c-interview__question { margin-bottom: 30px; } } .c-header-nav { display: flex; align-items: center; } .c-header-nav__item { font-weight: 700; } @media (max-width: 767.98px) { .c-header-nav { flex-direction: column; justify-content: center; text-align: center; } .c-header-nav__item { font-size: 1.6rem; } .c-header-nav__item { width: 53.3vw; } .c-header-nav__item:not(:last-of-type):not(.c-header-nav__item--index) { margin-bottom: 5.3vw; } .c-header-nav__item--index { position: relative; } .c-header-nav__item--index { margin-bottom: 8vw; } .c-header-nav__item--index { padding-bottom: 8vw; } .c-header-nav__item--index::after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-color: var(--text-color); } .c-header-nav__link { display: flex; justify-content: center; align-items: center; } .c-header-nav__link { gap: 2.6vw; } .c-header-nav__icon--brown { color: var(--color-brown); } .c-header-nav__icon--blue { color: var(--color-blue); } .c-header-nav__icon--green { color: var(--color-green); } .c-header-nav__icon--red { color: var(--color-red); } } @media (min-width: 768px) { .c-header-nav { height: 100%; } .c-header-nav__item { font-size: 1.8rem; } .c-header-nav__item:not(:last-of-type) { margin-right: 40px; } .c-header-nav__item--index { position: relative; padding-right: 40px; } .c-header-nav__item--index::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); height: 30px; width: 1px; background-color: var(--text-color); } .c-header-nav__link { padding-top: 28px; padding-bottom: 28px; transition: revert; word-break: keep-all; } @media not all and (pointer: coarse) { .c-header-nav__link:hover { color: var(--color-blue); text-decoration: underline; } } } .c-news { background-color: #ac8138; } .c-news__inner { box-sizing: border-box; display: grid; grid-template-columns: 11.73vw 1fr; margin-left: auto; margin-right: auto; padding: 5.33vw 3.2vw; background-color: var(--color-yellow); border-radius: 20px; } .c-news__inner { width: 91.4vw; } .c-news__inner { grid-gap: 3.2vw; } .c-news__text { box-sizing: border-box; max-height: 72px; padding-right: 0.5em; overflow-y: auto; } @media (min-width: 768px) { .c-news__inner { grid-template-columns: 77px 1fr; grid-gap: 34px; max-width: 1100px; margin: auto; padding: 25px 131px 25px 53px; border-radius: 60px; } .c-news__inner::after { content: ""; display: inline-block; position: absolute; top: -46px; right: -9px; width: 140px; height: 140px; background: url(../img/home/img_shovel01.png) no-repeat center/contain; } .c-news__inner__text { max-height: 65px; font-size: 1.8rem; } } .c-pager { padding-top: 8vw; } .c-pager { padding-bottom: 8vw; } .c-pager__list { display: flex; justify-content: center; align-items: center; gap: 10px; } .c-pager__item { box-sizing: border-box; width: 40px; height: 40px; line-height: 1.1; font-weight: 500; font-size: 1.6rem; } .c-pager__item--prev, .c-pager__item--next { width: 83px; height: 32px; padding: 10px; } .c-pager__item--prev .c-pager__link, .c-pager__item--next .c-pager__link { gap: 15px; background-color: revert; border-radius: revert; word-break: keep-all; } .c-pager__item--prev { margin-right: 15px; } .c-pager__item--next { margin-left: 15px; } .c-pager__item--ellipsis { display: flex; justify-content: center; align-items: center; } .c-pager__link { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #ebebeb; border-radius: 50%; } .c-pager__link.is-current { background-color: rgba(var(--text-color), 1); color: rgba(var(--button-text-color), 1); } .c-pager__icon { width: 15px; height: 15px; } .c-pager__icon svg { width: 100%; height: 100%; } .c-pager__num { display: flex; justify-content: space-between; margin-top: 20px; } @media (max-width: 767.98px) { .c-pager { margin-left: auto; margin-right: auto; } .c-pager { max-width: 89.3vw; } } @media (min-width: 768px) { .c-pager { max-width: 964px; margin: auto; padding-top: 50px; padding-bottom: 50px; } } .c-single { padding-top: 8vw; } .c-single { padding-bottom: 8vw; } .c-single--event { --single-background-color: rgba(var(--event-category-color), 0.15); } .c-single--recommended { --single-background-color: rgba(var(--recommended-category-color), 0.15); } .c-single--recruit { --single-background-color: rgba(var(--recruit-category-color), 0.15); } .c-single__header { line-height: 1.5294117647; } .c-single__header { margin-bottom: 9vw; } .c-single__header { font-size: clamp(2.5rem, 1.96rem + 1.125vw, 3.4rem); } @supports not (font-size: clamp(25 * 0.1rem, 1.96rem + 1.125vw, 34 * 0.1rem)) { .c-single__header { font-size: 2.5rem; } } .c-single__tag { margin-bottom: 2.6vw; } .c-single__meta { box-sizing: border-box; padding: 6.66vw 5.33vw; background-color: var(--single-background-color); border-radius: 10px; } .c-single__meta { margin-bottom: 10.6vw; } .c-single__meta-list { display: grid; grid-template-columns: auto 1fr; } .c-single__meta-list { grid-gap: 2.6vw; } .c-single__meta-head { font-size: 1.6rem; } .c-single__meta-text { font-weight: 400; font-size: 1.5rem; } .c-single__slider { aspect-ratio: 1.6226415094; } @supports not (aspect-ratio: 1.6226415094) { .c-single__slider { position: relative; padding-top: 61.6279069767%; } .c-single__slider > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .c-single__slider { margin-bottom: 16vw; } .c-single__slider img { object-fit: cover; width: 100%; height: 100%; border-radius: 10px; } .c-single__content { overflow: hidden; font-weight: 400; font-size: 1.5rem; } .c-single__content { padding-bottom: 10.6vw; } .c-single__content > *:not(img) { clear: both; } .c-single__content h1, .c-single__content h2, .c-single__content h3, .c-single__content h4, .c-single__content h5, .c-single__content h6 { margin-bottom: 0.5em; line-height: 1.5; font-weight: 700; } .c-single__content h1 { font-size: 2em; } .c-single__content h2 { box-sizing: border-box; padding: 0.5em 0.75em; border-radius: 10px; background-color: var(--single-background-color); font-size: 1.75em; } .c-single__content h3 { font-size: 1.5em; } .c-single__content h4 { font-size: 1.25em; } .c-single__content h5 { font-size: 1.125em; } .c-single__content h6 { font-size: 1.1em; } .c-single__content p, .c-single__content ul, .c-single__content ol, .c-single__content dl { margin-bottom: 1.5em; } .c-single__content ul, .c-single__content ol { list-style-type: revert; list-style-position: inside; } .c-single__content ul li::marker { color: rgba(var(--main-color), 1); } .c-single__content img { display: inline; width: auto; max-width: 100%; } .c-single__content table { margin-top: 1em; margin-bottom: 1em; } .c-single__content table th, .c-single__content table td { padding: 0.25em; border: 1px solid rgba(var(--border-color), 1); } .c-single__content table th { font-weight: 700; } .c-single__box { box-sizing: border-box; border-radius: 10px; background-color: var(--single-background-color); } .c-single__box { margin-bottom: 10.6vw; } .c-single__box { padding: 5.3vw; } .c-single__box-head { margin-bottom: 20px; line-height: 1.6666666667; font-size: clamp(1.8rem, 1.68rem + 0.25vw, 2rem); } @supports not (font-size: clamp(18 * 0.1rem, 1.68rem + 0.25vw, 20 * 0.1rem)) { .c-single__box-head { font-size: 1.8rem; } } .c-single__box-texts { margin-bottom: 35px; } .c-single__box p { font-weight: 400; font-size: 1.5rem; } .c-single__box p small { font-size: 1.1rem; } .c-single__box a { position: relative; display: inline-block; padding-bottom: 5px; line-height: 1.7333333333; } .c-single__box a::before { content: ""; display: inline-block; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background-color: rgba(var(--text-color), 1); } @media not all and (pointer: coarse) { .c-single__box a:hover::before { display: none; } } .c-single__map { margin-top: 10.6vw; } .c-single__map { margin-bottom: 10.6vw; } .c-single__map-iframe { aspect-ratio: 0.8170731707; } @supports not (aspect-ratio: 0.8170731707) { .c-single__map-iframe { position: relative; padding-top: 122.3880597015%; } .c-single__map-iframe > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .c-single__map-iframe { margin-bottom: 5.3vw; } .c-single__map-iframe iframe { width: 100%; height: 100%; } .c-single__map-head { margin-bottom: 20px; line-height: 1.6666666667; font-size: clamp(1.8rem, 1.68rem + 0.25vw, 2rem); } @supports not (font-size: clamp(18 * 0.1rem, 1.68rem + 0.25vw, 20 * 0.1rem)) { .c-single__map-head { font-size: 1.8rem; } } .c-single__map p { font-weight: 400; font-size: 1.5rem; } .c-single__button { margin-bottom: 10.6vw; } .c-single__job-detail { margin-bottom: 10.6vw; } .c-single__job-detail-term { line-height: 1.3333333333; font-weight: 700; font-size: 1.6rem; } .c-single__job-detail-description { line-height: 1.7333333333; font-weight: 400; font-size: 1.5rem; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .c-single__meta-list + .c-single__meta-list { margin-top: 2.6vw; } .c-single__job-detail-term, .c-single__job-detail-description { box-sizing: border-box; } .c-single__job-detail-term:not(:first-of-type) { padding-top: 5.3vw; } .c-single__job-detail-description { border-bottom: 1px solid rgba(var(--border-color), 1); } .c-single__job-detail-description { padding-bottom: 5.3vw; } } @media (min-width: 768px) { .c-single { --inner-max-width: 860px; padding-top: 50px; padding-bottom: 50px; } .c-single--recommended .c-single__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; } .c-single--recommended .c-single__meta-list { display: block; } .c-single__header { margin-bottom: 40px; } .c-single__tag { margin-bottom: 30px; } .c-single__meta { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; margin-bottom: 40px; padding: 20px 50px; } .c-single__meta-list { grid-gap: 10px; } .c-single__content { padding-bottom: 40px; } .c-single__slider { margin-bottom: 60px; } .c-single__box { margin-bottom: 40px; padding: 30px 50px; } .c-single__map { margin-top: 40px; margin-bottom: 40px; } .c-single__map-iframe { margin-bottom: 20px; } .c-single__map-iframe { aspect-ratio: 2.048; } @supports not (aspect-ratio: 2.048) { .c-single__map-iframe { position: relative; padding-top: 48.828125%; } .c-single__map-iframe > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .c-single__button { margin-bottom: 40px; } .c-single__job-detail { display: grid; grid-template-columns: calc(27.9% + 20px) 1fr; margin-bottom: 40px; } .c-single__job-detail-term, .c-single__job-detail-description { box-sizing: border-box; padding: 15px 0; border-bottom: 1px solid rgba(var(--border-color), 1); } .c-single__job-detail-term { padding-right: 20px; } } .c-latest-slider { position: relative; } .c-latest-slider { margin-bottom: 20.2vw; } .c-latest-slider::before { content: ""; position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../img/articles/bg_slider01_sp.png) center bottom/cover; } .c-latest-slider::before { width: 95.7vw; } .c-latest-slider::before { height: 208.8vw; } .c-latest-slider__inner { --inner-padding: 18vw; box-sizing: border-box; } .c-latest-slider__inner { padding-top: 29.3vw; } .c-latest-slider__inner { padding-bottom: 53vw; } .c-latest-slider__head { position: relative; z-index: 2; } .c-latest-slider__head { margin-bottom: 8vw; } .c-latest-slider__head img { margin-left: auto; margin-right: auto; } .c-latest-slider__head img { width: 61.3vw; } .c-latest-slider__track { position: relative; } @media (min-width: 768px) { .c-latest-slider { margin-bottom: 170px; } .c-latest-slider::before { width: 1698px; height: 874px; background-image: url(../img/articles/bg_slider01_pc.png); } .c-latest-slider__inner { --inner-padding: 50px; padding-top: 74px; padding-bottom: 164px; } .c-latest-slider__head { margin-bottom: 84px; } .c-latest-slider__head img { width: 654px; } } @media (min-width: 1100px) { .c-latest-slider__inner { --inner-padding: 0; } } .c-mv-slider__slide { position: relative; box-sizing: border-box; width: 100%; padding: 3.2vw 5.06vw; background-color: #fff; border-radius: 10px; } .c-mv-slider__taxonomy { display: block; width: fit-content; margin-left: auto; margin-bottom: 0.5em; padding: 2px 15px; line-height: 1.5; border-radius: 40px; background-color: var(--mv-background-color); font-weight: 700; color: #fff; font-size: clamp(1.1rem, 0.8677419355rem + 0.4838709677vw, 1.4rem); } @supports not (font-size: clamp(11 * 0.1rem, 0.8677419355rem + 0.4838709677vw, 14 * 0.1rem)) { .c-mv-slider__taxonomy { font-size: 1.1rem; } } .c-mv-slider__image { margin-bottom: 2.6vw; } .c-mv-slider__head { font-size: clamp(1.6rem, 1.2903225806rem + 0.6451612903vw, 2rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.2903225806rem + 0.6451612903vw, 20 * 0.1rem)) { .c-mv-slider__head { font-size: 1.6rem; } } .c-mv-slider__head { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .c-mv-slider__date { display: block; text-align: right; } @media (min-width: 768px) { .c-mv-slider { width: 320px; } .c-mv-slider__slide { border-radius: 20px; width: 320px; padding: 26px 20px 52px; } .c-mv-slider__date { font-size: 1.7rem; } } @media (min-width: 1100px) { .c-mv-slider { width: 490px; } .c-mv-slider__slide { width: 490px; padding: 26px 30px 52px; } .c-mv-slider__date { font-size: 2rem; } } .c-sns--has-bg { box-sizing: border-box; position: relative; margin-left: auto; padding: 4vw 0; background-color: #fff; border-radius: 100px; } .c-sns--has-bg { width: 97.9710144928%; } .c-sns--has-bg { margin-top: 8vw; } .c-sns--has-bg::before { content: ""; display: inline-block; position: absolute; left: -2%; top: 50%; transform: translateY(-50%); background: url(../img/common/img_mole-pop-left.png) no-repeat center/contain; } .c-sns--has-bg::before { width: 23.7vw; } .c-sns--has-bg::before { height: 23.7vw; } .c-sns__head { font-weight: 700; text-align: center; } .c-sns-list { display: flex; justify-content: center; align-items: center; } .c-sns-list { gap: 4vw; } .c-sns-list__item { width: 30px; } @media (max-width: 767.98px) { .c-sns__head { margin-bottom: 2.6vw; } } @media (min-width: 768px) { .c-sns--has-bg { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 92.45%; margin-top: 118px; padding: min(4.54%, 45px); gap: clamp(20px, 20px + 30 * (100vw - 768px) / 332, 50px); } .c-sns--has-bg::before { left: -8%; width: 236px; height: 237px; width: clamp(160px, 160px + 76 * (100vw - 768px) / 332, 236px); height: clamp(160px, 160px + 77 * (100vw - 768px) / 332, 237px); } .c-sns__head { font-size: clamp(2.4rem, -0.6038216561rem + 3.821656051vw, 3.6rem); } @supports not (font-size: clamp(24 * 0.1rem, -0.6038216561rem + 3.821656051vw, 36 * 0.1rem)) { .c-sns__head { font-size: 2.4rem; } } .c-sns-list { gap: 50px; } .c-sns-list__item { width: clamp(50px, 50px + 41 * (100vw - 768px) / 332, 91px); } } @media (min-width: 900px) { .c-sns--has-bg { flex-direction: row; border-radius: 40px; } .c-sns__head { text-align: left; } } .c-tag { box-sizing: border-box; position: relative; display: flex; justify-content: center; align-items: center; padding: 6px 10px; line-height: 1.1; border-radius: 30px; font-size: 1.1rem; background-color: rgba(var(--main-color), 0.3); color: var(--text-color); } .c-tag::before { content: ""; display: inline-block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 30px; } .c-tag-list { display: flex; flex-wrap: wrap; gap: 4px; } .c-tag-list--event .c-tag { background-color: rgba(var(--event-category-color), 0.3); } .c-tag-list--recommended .c-tag { background-color: rgba(var(--recommended-category-color), 0.3); } .c-tag-list--recruit .c-tag { background-color: rgba(var(--recruit-category-color), 0.3); } .c-tag-list .c-tag--official { padding-left: 22px; padding-right: 22px; background-color: rgba(var(--sub-text-color), 1); color: rgba(var(--button-text-color), 1); } .c-toc { position: relative; background-color: #625237; color: #fff; } .c-toc { margin-bottom: 21.3vw; } .c-toc::before, .c-toc::after { content: ""; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-repeat: no-repeat; background-size: contain; } .c-toc::before { top: 0; background-image: url(../img/articles/bg_cave01_sp.png); background-position: top center; } .c-toc::after { bottom: -2vw; background-image: url(../img/articles/bg_cave02_sp.png); background-position: center bottom; } .c-toc__inner { --inner-padding: 14vw; position: relative; } .c-toc__inner { padding-top: 30.4vw; } .c-toc__inner { padding-bottom: 65.3vw; } .c-toc__inner::before { content: ""; display: inline-block; position: absolute; z-index: -1; right: 19px; width: 122px; height: 122px; background: url(../img/articles/img_light.png) no-repeat center/contain; } .c-toc__inner::before { top: 21.3vw; } .c-toc-list__item:not(:last-of-type) { margin-bottom: 5.3vw; } .c-toc-list__link { display: grid; grid-template-columns: 22px 1fr; grid-gap: 19px; align-items: center; text-decoration: underline; } @media not all and (pointer: coarse) { .c-toc-list__link:hover { text-decoration: none; } } .c-toc-list__num { display: flex; justify-content: center; align-items: center; width: 22px; height: 22px; border-radius: 50%; background-color: var(--color-yellow); font-size: 1.2rem; color: var(--text-color); } @media (max-width: 767.98px) { .c-toc-header__image img { width: 107px; margin: auto; } .c-toc-header__head { margin-bottom: 4vw; } .c-toc-header__head { text-align: center; } .c-toc-header__head svg { width: 119px; height: 35px; } .c-toc-header__time { text-align: center; } .c-toc-header__time { margin-bottom: 5.3vw; } .c-toc-header__lead { margin-bottom: 7.4vw; } } @media (min-width: 768px) { .c-toc { margin-bottom: 160px; } .c-toc::before, .c-toc::after { width: 1920px; } .c-toc::before { background-image: url(../img/articles/bg_cave01_pc.png); } .c-toc::after { background-image: url(../img/articles/bg_cave02_pc.png); } .c-toc__inner { --inner-padding: 8vw; --inner-max-width: 975px; padding-top: 292px; padding-bottom: 360px; } .c-toc__inner::before { top: 156px; right: inherit; left: 75.89%; width: 252px; height: 252px; } .c-toc-header { display: grid; grid-template-columns: 120px 193px 1fr; grid-gap: 40px 28px; margin-bottom: clamp(50px, 50px + 26 * (100vw - 768px) / 332, 76px); } .c-toc-header__image { grid-column: 1; grid-row: 2; } .c-toc-header__head { grid-column: 2; grid-row: 1; } .c-toc-header__head svg { width: 193px; height: 58px; } .c-toc-header__time { grid-column: 3; grid-row: 1; align-self: center; } .c-toc-header__lead { grid-column: 2/4; grid-row: 2; } .c-toc-list { width: fit-content; margin-inline: auto; } .c-toc-list__item:not(:last-of-type) { margin-bottom: 43px; } .c-toc-list__link { grid-template-columns: 38px 1fr; font-size: clamp(2.2rem, 1.7373493976rem + 0.6024096386vw, 2.4rem); } @supports not (font-size: clamp(22 * 0.1rem, 1.7373493976rem + 0.6024096386vw, 24 * 0.1rem)) { .c-toc-list__link { font-size: 2.2rem; } } .c-toc-list__num { width: 38px; height: 38px; font-size: 2.2rem; } } @media (min-width: 1100px) { .c-toc-header { grid-template-columns: 184px 193px 1fr; } } /* ------------------------------ Device-only Break Classes 主にbrで使用することを想定その場合、ソースコードはbrの後ろで改行しないこと（改行すると不要なスペースが入る）使用例：

吾輩は
猫である

------------------------------ */ @media (max-width: 767.98px) { .u-only-sp { display: block; } } @media (min-width: 768px) { .u-only-sp { display: none !important; } } @media (max-width: 767.98px) { .u-only-pc { display: none !important; } } @media (min-width: 768px) { .u-only-pc { display: block; } } /* ------------------------------ Link ------------------------------ */ @media not all and (pointer: coarse) { .u-link:hover { opacity: var(--hover-opacity); } } a:where(.u-link) { display: block; } /* ------------------------------ Layout ------------------------------ */ .u-inner { box-sizing: border-box; width: 100%; padding-left: var(--inner-padding); padding-right: var(--inner-padding); } @media (min-width: 768px) { .u-inner { max-width: var(--inner-max-width, 1100px); margin: auto; } } @media (min-width: 1100px) { .u-inner { padding-left: 0; padding-right: 0; } } .u-bg-beige { background-color: var(--color-beige); } .u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------ Font ------------------------------ */ .u-uppercase { text-transform: uppercase; } .u-capitalize { text-transform: capitalize; } .u-font-oswald { font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-style: normal; } .p-error__inner { padding-top: 26.6vw; } .p-error__inner { padding-bottom: 26.6vw; } .p-error__head { margin-bottom: 1em; line-height: 1.5; color: var(--color-yellow); text-align: center; font-size: clamp(3.2rem, 1.8064516129rem + 2.9032258065vw, 5rem); } @supports not (font-size: clamp(32 * 0.1rem, 1.8064516129rem + 2.9032258065vw, 50 * 0.1rem)) { .p-error__head { font-size: 3.2rem; } } .p-error__text { color: #fff; text-align: center; } @media (min-width: 768px) { .p-error__inner { padding-top: 0; padding-bottom: 150px; } } /* home-archive */ .home-archive__inner { padding-top: 29.3vw; } .home-archive__inner { padding-bottom: 88.4vw; } .home-archive__head { font-weight: 700; color: #fff; text-align: center; } .home-archive__head { margin-bottom: 8vw; } .home-archive__head { font-size: clamp(2.6rem, 0.7419354839rem + 3.8709677419vw, 5rem); } @supports not (font-size: clamp(26 * 0.1rem, 0.7419354839rem + 3.8709677419vw, 50 * 0.1rem)) { .home-archive__head { font-size: 2.6rem; } } .home-archive__head-icon { display: block; line-height: 1.1; color: var(--color-yellow); } .home-archive__head-icon svg { width: 61px; height: 20px; } .home-archive__head-text { display: block; } @media (max-width: 767.98px) { .home-archive { position: relative; } .home-archive::after { content: ""; display: inline-block; position: absolute; z-index: -1; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 80.2vw; background: url(../img/home/bg_tunnel01.png) no-repeat center/contain; } } @media (min-width: 768px) { .home-archive__inner { padding-top: 107px; padding-bottom: 110px; } .home-archive__head { margin-bottom: 34px; } .home-archive__head-icon svg { width: 77px; height: 26px; } } /* home-ranking */ .home-ranking__inner { --inner-padding: 16.66vw; position: relative; } .home-ranking__inner { padding-top: 29.5vw; } .home-ranking__inner { padding-bottom: 68.6vw; } .home-ranking__inner > * { position: relative; z-index: 2; } .home-ranking__inner::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; background: url(../img/home/bg_ranking01_sp.png) no-repeat center/contain; } .home-ranking__inner::before { height: 405.8vw; } .home-ranking__head { margin-bottom: 10.6vw; } .home-ranking__head img { margin: auto; } .home-ranking__head img { width: 61.3vw; } @media (max-width: 767.98px) { .home-ranking { position: relative; } .home-ranking::after { content: ""; display: inline-block; position: absolute; z-index: -1; top: 98%; left: 50%; transform: translateX(-50%); width: 100vw; height: 48.53vw; background: url(../img/home/bg_tunnel02.png) no-repeat center/contain; } } @media (min-width: 768px) { .home-ranking__inner { position: relative; padding-top: 80px; padding-bottom: 140px; } .home-ranking__inner::before { width: 1528px; height: 786px; background: url(../img/home/bg_ranking01_pc.png); background-size: 1528px; } .home-ranking__head { margin-bottom: 52px; } .home-ranking__head img { width: 658px; } } @media (min-width: 1100px) { .home-ranking__inner::before { width: 1698px; height: 874px; background-size: 1698px; } } /* home-about */ .home-about { text-align: center; } .home-about__inner { padding-bottom: 50vw; } .home-about__inner { padding-top: 41vw; } .home-about__head { margin-bottom: 8vw; } .home-about__head img { margin: auto; } .home-about__head img { width: 62.1vw; } .home-about__text { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; color: var(--color-dark-brown); } .home-about__text span { display: block; width: fit-content; margin-left: auto; margin-right: auto; padding: 0 0.5em; background-color: #fff; border-radius: 30px; font-size: clamp(1.7rem, 1.1580645161rem + 1.1290322581vw, 2.4rem); } @supports not (font-size: clamp(17 * 0.1rem, 1.1580645161rem + 1.1290322581vw, 24 * 0.1rem)) { .home-about__text span { font-size: 1.7rem; } } .home-about__text--only-pc { display: none; } @media (min-width: 768px) { .home-about__inner { padding-top: 202px; padding-bottom: 197px; } .home-about__head { margin-bottom: 50px; } .home-about__head img { width: min(84.81%, 933px); } .home-about__text { gap: 21px; } } @media (min-width: 1100px) { .home-about__text--only-sp { display: none; } .home-about__text--only-pc { display: flex; } } /* home-taxonomy */ .home-taxonomy__inner { padding-bottom: 112vw; } .home-taxonomy__head { margin-bottom: 2.6vw; } .home-taxonomy__head img { margin: auto; } .home-taxonomy__head img { width: 38.4vw; } @media (max-width: 767.98px) { .home-taxonomy { position: relative; } .home-taxonomy::after { content: ""; display: inline-block; position: absolute; z-index: -1; top: calc(100% - 100vw); left: 50%; transform: translateX(-50%); width: 100vw; height: 58.66vw; background: url(../img/home/bg_tunnel03.png) no-repeat center/contain; } } @media (min-width: 768px) { .home-taxonomy__inner { padding-bottom: 340px; } .home-taxonomy__head { margin-bottom: 50px; } .home-taxonomy__head img { width: 395px; } }