@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: 400; --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; --color-cave: #625237; --color-soil01: #ac8138; --color-soil02: #816d4b; --color-soil03: #a88b77; 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), body figcaption: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; padding-bottom: 400px; } .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; } .l-main--index, .l-main--case, .l-main--culture, .l-main--tech, .l-main--tag { background-color: var(--archive-page-bg-color); } .l-main--index::before, .l-main--index::after, .l-main--case::before, .l-main--case::after, .l-main--culture::before, .l-main--culture::after, .l-main--tech::before, .l-main--tech::after, .l-main--tag::before, .l-main--tag::after { content: ""; display: inline-block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; } .l-main--index::before, .l-main--case::before, .l-main--culture::before, .l-main--tech::before, .l-main--tag::before { background-position: top center; } .l-main--index::after, .l-main--case::after, .l-main--culture::after, .l-main--tech::after, .l-main--tag::after { background-position: bottom center; } .l-main--index { --archive-page-bg-color: var(--color-soil01); } .l-main--index::before { background-image: url(../img/articles/bg_archive01_sp.png); } .l-main--index::after { background-image: url(../img/articles/bg_archive02_sp.png); } .l-main--case, .l-main--culture, .l-main--tech { --archive-page-bg-color: var(--color-cave); } .l-main--case::before, .l-main--culture::before, .l-main--tech::before { background-image: url(../img/articles/bg_archive03_sp.png); } .l-main--case::after, .l-main--culture::after, .l-main--tech::after { background-image: url(../img/articles/bg_archive04_sp.png); } .l-main--case { --taxonomy-color: var(--color-green); } .l-main--culture { --taxonomy-color: var(--color-blue); } .l-main--tech { --taxonomy-color: var(--color-red); } .l-main--tag { --archive-page-bg-color: var(--color-soil02); } .l-main--tag::before { background-image: url(../img/articles/bg_archive05_sp.png); } .l-main--tag::after { background-image: url(../img/articles/bg_archive06_sp.png); } .l-main--article { padding-bottom: 200px; } @media (max-width: 767.98px) { .l-main--home { padding-bottom: 350px; } } @media (min-width: 768px) { .l-main { padding-bottom: 400px; } .l-main--home::before { z-index: 100; width: 1920px; height: 3886px; min-height: revert; background-image: url(../img/home/bg_main01_pc.png); } .l-main--index, .l-main--case, .l-main--culture, .l-main--tech, .l-main--tag { background-repeat: repeat-y; background-position: top center; background-size: 1920px; } .l-main--index { background-image: url(../img/common/bg_archive01.png); } .l-main--index::before { background-image: url(../img/articles/bg_archive01_pc.png); } .l-main--index::after { background-image: url(../img/articles/bg_archive02_pc.png); } .l-main--case, .l-main--culture, .l-main--tech { background-image: url(../img/common/bg_archive01.png); } .l-main--case::before, .l-main--culture::before, .l-main--tech::before { background-image: url(../img/articles/bg_archive03_pc.png); } .l-main--case::after, .l-main--culture::after, .l-main--tech::after { background-image: url(../img/articles/bg_archive04_pc.png); } .l-main--tag { background-image: url(../img/common/bg_archive02.png); } .l-main--tag::before { background-image: url(../img/articles/bg_archive05_pc.png); } .l-main--tag::after { background-image: url(../img/articles/bg_archive06_pc.png); } .l-main--article { padding-bottom: 300px; } } @media (min-width: 1100px) { .l-main { padding-bottom: 520px; } .l-main--article { padding-bottom: 300px; } } 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; } /* bg animation */ .mogura-animation { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 0; } .mogura-animation--article { position: fixed; left: inherit; right: calc(50vw + 500px); transform: none; width: 160px; height: 100vh; overflow: visible; } .mogura-animation--article .mogura-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mogura-animation--article .mogura-unit { width: 100px; height: 112px; } @media (min-width: 1280px) { .mogura-animation { display: block; } } .mogura-animation--01 { width: 1920px; height: 914px; } .mogura-animation--02 { width: 1920px; height: 368px; } .mogura-animation--03 { top: 100px; width: 1920px; height: 482px; } .mogura-path { width: 100%; height: 100%; } .mogura-unit { position: absolute; width: 243px; height: 210px; } .mogura-lottie { width: 100%; height: 100%; } /* js-photoswipe */ .js-photoswipe { margin-top: 8vw; } .js-photoswipe { margin-bottom: 8vw; } .js-photoswipe a { position: relative; display: block; width: min(100%, 600px); margin: auto; } .js-photoswipe a::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; pointer-events: none; transition: background-color 0.2s ease; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; } .js-photoswipe a:hover::after { background-color: rgba(0, 0, 0, 0.8); } @media (min-width: 768px) { .js-photoswipe { margin-top: 40px; margin-bottom: 40px; } } /* .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: 2000; margin-top: -50px; background: linear-gradient(to bottom, transparent 30%, #2090e6 30%); color: #fff; } .l-footer::before { content: ""; display: inline-block; position: absolute; bottom: 56%; left: 50%; transform: translateX(-50%); width: 2233px; height: 400px; background: url(../img/common/bg_footer.svg) no-repeat center top/2233px; } .l-footer::after { content: ""; display: inline-block; position: absolute; top: -125px; left: 50%; transform: translateX(-50%); width: 282px; height: 183px; background: url(../img/common/img_mole-pop-up.png) no-repeat center top/contain; } .l-footer__page-top { position: fixed; z-index: 3000; bottom: 50px; left: 50%; transform: translateX(-50%); width: min(100%, 1920px); height: 86px; opacity: 0; visibility: hidden; pointer-events: none; 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__page-top > a { position: absolute; top: 0; right: 50px; width: 76px; pointer-events: auto; } .l-footer__inner { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 25px; } .l-footer__logo img { width: 48vw; } .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/img_footer01_sp.png); } .l-footer__credit::after { bottom: 10px; right: 10px; width: 60px; height: 60px; background-image: url(../img/common/img_footer02_sp.png); } .l-footer__review { display: flex; justify-content: center; align-items: center; gap: 1em; margin-top: 1em; 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)) { .l-footer__review { font-size: 1.2rem; } } .l-footer__review-number { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: fit-content; padding: 0.2em 1em; border: 1px solid; } .l-footer__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5em 2em; margin-top: 1em; } .l-footer__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__link { font-size: 1.1rem; } } @media not all and (pointer: coarse) { .l-footer__link:hover { text-decoration: underline; } } .l-footer__icon { display: inline-block; width: 1em; height: 1em; } .l-footer__icon svg { width: 100%; height: 100%; } @media (max-width: 767.98px) { .l-footer__logo { margin-bottom: 6.4vw; } .l-footer__logo img { margin: auto; } } @media (min-width: 768px) { .l-footer__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding-top: 100px; padding-bottom: 30px; } .l-footer__logo img { width: 300px; } .l-footer__text p { width: 91%; } .l-footer__review { grid-column: 1/3; grid-row: 2; margin-top: 30px; } .l-footer__links { grid-column: 1/3; grid-row: 3; margin-top: 30px; } .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/img_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/img_footer02_pc.png); } } @media (min-width: 1100px) { .l-footer__review { justify-self: end; } } @media (min-width: 1368px) { .l-footer::after { top: -142px; width: 312px; height: 208px; } } @media (min-width: 1600px) { .l-footer::after { top: -176px; width: 350px; height: 233px; } } .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-red); } .l-mainvisual.is-case { --mv-background-color: var(--color-green); } .l-mainvisual.is-culture { --mv-background-color: var(--color-blue); } .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; z-index: 100; background-color: var(--taxonomy-color, var(--color-blue)); } .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; margin-bottom: 8px; } .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: auto auto; 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; } } .c-archive__inner { padding-top: 17vw; } .c-archive__head { margin-bottom: 8.53vw; text-align: center; color: #fff; font-size: clamp(1.6rem, 0.5161290323rem + 2.2580645161vw, 3rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.5161290323rem + 2.2580645161vw, 30 * 0.1rem)) { .c-archive__head { font-size: 1.6rem; } } .c-archive__taxonomy { box-sizing: border-box; position: relative; display: flex; justify-content: center; align-items: center; width: fit-content; margin: 0 auto 8.53vw; padding: 4px 56px 4px 80px; border: 2px solid; border-radius: 60px; background-color: #fff; font-weight: 700; color: var(--taxonomy-color); font-size: clamp(1.6rem, 0.5161290323rem + 2.2580645161vw, 3rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.5161290323rem + 2.2580645161vw, 30 * 0.1rem)) { .c-archive__taxonomy { font-size: 1.6rem; } } .c-archive__taxonomy::before { content: ""; display: inline-block; position: absolute; top: 50%; left: -24px; transform: translateY(-50%); width: 88px; height: 57px; background: url(../img/common/img_mole-pop-up.png) no-repeat center/contain; } .c-archive__tag { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: fit-content; margin: 0 auto 8.53vw; padding: 4px 40px; border-radius: 10px; background-color: var(--color-beige); color: var(--color-dark-brown); font-size: clamp(1.6rem, 0.5161290323rem + 2.2580645161vw, 3rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.5161290323rem + 2.2580645161vw, 30 * 0.1rem)) { .c-archive__tag { font-size: 1.6rem; } } @media (max-width: 374.98px) { .c-archive__taxonomy { padding-left: 70px; } .c-archive__taxonomy::before { width: 70px; height: 46px; } } @media (max-width: 767.98px) { .c-archive__button-area { position: relative; } .c-archive__button-area::before { content: ""; display: inline-block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100vw; aspect-ratio: 375/120; background: url(../img/common/bg_button-area.png) no-repeat center/contain; } } @media (min-width: 768px) { .c-archive__inner { padding-top: 108px; } .c-archive__head { margin-bottom: 50px; } .c-archive__taxonomy { min-width: 464px; margin-bottom: 80px; padding: 4px 60px 4px 96px; } .c-archive__taxonomy::before { left: -44px; width: 140px; height: 90px; } .c-archive__tag { margin-bottom: 80px; padding: 0 40px; } } /* c-article-tags * 記事詳細にあるタグ一覧 */ .c-article-tags { margin-top: 13.3vw; } .c-article-tags { margin-bottom: 13.3vw; } .c-article-tags__head { font-weight: 700; text-align: center; color: var(--color-dark-brown); } .c-article-tags__head { margin-bottom: 6.4vw; } .c-article-tags__head { font-size: clamp(1.8rem, 1.335483871rem + 0.9677419355vw, 2.4rem); } @supports not (font-size: clamp(18 * 0.1rem, 1.335483871rem + 0.9677419355vw, 24 * 0.1rem)) { .c-article-tags__head { font-size: 1.8rem; } } .c-article-tags__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; } .c-article-tags__link { box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 0 16px; border-radius: 4px; border: 1px solid var(--color-dark-brown); background-color: #fff; color: var(--color-dark-brown); } @media not all and (pointer: coarse) { .c-article-tags__link:hover { background-color: var(--color-dark-brown); color: var(--color-light-brown); } } @media (max-width: 767.98px) { .c-article-tags__list { margin-left: auto; margin-right: auto; } .c-article-tags__list { width: 80vw; } } @media (min-width: 768px) { .c-article-tags { margin-top: 100px; margin-bottom: 100px; } .c-article-tags__head { margin-bottom: 16px; } .c-article-tags__list { justify-content: center; gap: 2em; } } .c-article { font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif; } .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.535483871rem + 0.9677419355vw, 2.6rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.535483871rem + 0.9677419355vw, 26 * 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: 1.5em; 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 h4:not([class]) { margin-top: 1em; margin-bottom: 0.75em; color: var(--color-dark-brown); font-size: clamp(1.5rem, 1.1129032258rem + 0.8064516129vw, 2rem); } @supports not (font-size: clamp(15 * 0.1rem, 1.1129032258rem + 0.8064516129vw, 20 * 0.1rem)) { .c-article h4:not([class]) { font-size: 1.5rem; } } .c-article p + p { margin-top: 1.8em; } .c-article a:not([class]) { text-decoration: underline; } @media not all and (pointer: coarse) { .c-article a:not([class]):hover { text-decoration: none; } } .c-article dl { display: grid; grid-gap: 0.5em; margin-top: 1em; } .c-article dl dt { line-height: 1.5; color: var(--color-dark-brown); font-size: clamp(1.5rem, 1.2677419355rem + 0.4838709677vw, 1.8rem); } @supports not (font-size: clamp(15 * 0.1rem, 1.2677419355rem + 0.4838709677vw, 18 * 0.1rem)) { .c-article dl dt { font-size: 1.5rem; } } .c-article figure:not([class]) { margin-top: 8vw; } .c-article figure:not([class]) { margin-bottom: 8vw; } .c-article figure:not([class]) img { width: min(100%, var(--article-image-width, 600px)); margin: auto; } .c-article figure figcaption { margin-top: 0.8em; text-align: center; 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-article figure figcaption { font-size: 1.2rem; } } .c-article figure figcaption small { font-size: 0.8em; } .c-article iframe { display: block; aspect-ratio: 16/9; width: min(100%, 600px); margin: auto; } .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, 1.0903225806rem + 0.6451612903vw, 1.8rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.0903225806rem + 0.6451612903vw, 18 * 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__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, 1.0677419355rem + 0.4838709677vw, 1.6rem); } @supports not (font-size: clamp(13 * 0.1rem, 1.0677419355rem + 0.4838709677vw, 16 * 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__box { box-sizing: border-box; margin: 1.8em 0; padding: 1.5em; border: 1px solid var(--color-dark-brown); background-color: #fff; } .c-article__box h4:not([class]) { margin-bottom: 0.75em; font-weight: 700; color: var(--color-dark-brown); font-size: clamp(1.5rem, 1.2677419355rem + 0.4838709677vw, 1.8rem); } @supports not (font-size: clamp(15 * 0.1rem, 1.2677419355rem + 0.4838709677vw, 18 * 0.1rem)) { .c-article__box h4:not([class]) { font-size: 1.5rem; } } @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:not([class]) { margin-top: 40px; margin-bottom: 40px; } .c-article__inner { --inner-max-width: 800px; } .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__outro { grid-template-columns: 1fr 180px; 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; } .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; margin: 8vw 0; 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--picture-only .c-interviewee-box__picture-area { text-align: center; } .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; text-box: trim-end cap alphabetic; 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-main { font-size: clamp(1.6rem, 1.4451612903rem + 0.3225806452vw, 1.8rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.4451612903rem + 0.3225806452vw, 18 * 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.8903225806rem + 0.6451612903vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.8903225806rem + 0.6451612903vw, 16 * 0.1rem)) { .c-interviewee-box__name-position { font-size: 1.2rem; } } .c-interviewee-box__list { margin-top: 4vw; } .c-interviewee-box__list { 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__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 p.c-interviewee-box__text { margin-top: 0; } .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: 60px 0 100px; padding: 45px 0; border-radius: 80px; } .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: 30px; } .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: 160px 1fr; grid-column-gap: 15px; padding: 0 50px; } .c-interviewee-box__item:not(:last-of-type) { margin-bottom: 60px; } .c-interviewee-box__item--text-only { grid-column-gap: 25px; } .c-interviewee-box__item--text-only .c-interviewee-box__picture { grid-row: 1; align-self: center; } .c-interviewee-box__item--text-only .c-interviewee-box__text-area { grid-column: 2; align-self: center; } .c-interviewee-box__picture { grid-column: 1; grid-row: 1/3; } .c-interviewee-box__picture img { width: 160px; height: 160px; } .c-interviewee-box__name-main, .c-interviewee-box__name-ruby, .c-interviewee-box__name-position { display: inline-block; } .c-interviewee-box__name-ruby { margin-right: 1em; } .c-interviewee-box__name p.c-interviewee-box__name-position { display: block; } .c-interviewee-box__list { margin-top: 15px; } .c-interviewee-box__note { box-sizing: border-box; margin-top: 30px; padding: 0 50px; 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; width: fit-content; margin-left: auto; margin-right: auto; padding-right: 70px; } .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.4rem, 2.8rem + 1.25vw, 3.8rem); } @supports not (font-size: clamp(34 * 0.1rem, 2.8rem + 1.25vw, 38 * 0.1rem)) { .c-reference-box__head-en { font-size: 3.4rem; } } .c-reference-box__head-ja { line-height: 1.5; font-size: clamp(1.6rem, 0.7rem + 1.875vw, 2.2rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.7rem + 1.875vw, 22 * 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, 1.4451612903rem + 0.3225806452vw, 1.8rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.4451612903rem + 0.3225806452vw, 18 * 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%, 800px); margin-top: 80px; margin-bottom: 80px; padding: 45px 40px; } .c-reference-box__head { display: flex; align-items: center; margin-bottom: 20px; } .c-reference-box__head-en { padding-right: 20px; } .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:not(.c-button--back) .c-button__link { padding-right: 1em; } .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-height); height: var(--button-height); 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: 400px; --button-height: 65px; --button-icon-svg-width: 77px; --button-icon-svg-height: 26px; --button-arrow-svg-width: 60px; --button-arrow-svg-height: 15px; --button-font-size: 2rem; } } .c-button--back .c-button__link { flex-direction: row-reverse; padding-left: 1em; } @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-top: 40px; } .c-button__wrapper { gap: 4vw; } .c-button__wrapper .c-button { --button-margin-top: 0; } .c-share-button { display: flex; flex-direction: column; justify-content: center; margin-top: 40px auto 64px; } .c-share-button__image img { width: 80px; margin: auto; } .c-share-button__head { line-height: 1.5; font-size: clamp(1.8rem, 1.4903225806rem + 0.6451612903vw, 2.2rem); } @supports not (font-size: clamp(18 * 0.1rem, 1.4903225806rem + 0.6451612903vw, 22 * 0.1rem)) { .c-share-button__head { font-size: 1.8rem; } } .c-share-button__list { box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 24px 40px; border-radius: 20px; background-color: #fff; } .c-share-button__list { gap: 6.1vw; } .c-share-button__item { display: flex; justify-content: center; align-items: center; } .c-share-button__item { width: 10.6vw; } .c-share-button__item--x { width: 9.6vw; } @media (max-width: 767.98px) { .c-share-button__head { text-align: center; } .c-share-button__head { margin-bottom: 4vw; } .c-share-button__list { margin: auto; } .c-share-button__list { width: 92vw; } } @media (min-width: 768px) { .c-share-button { width: fit-content; margin: 56px auto 80px; } .c-share-button__head { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 8px; } .c-share-button__list { grid-column: 2; justify-content: flex-start; gap: 28px; padding: 24px 80px; } .c-share-button__item { width: 56px; } .c-share-button__item--x { width: 42px; } } .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.7428571429rem + 1.7857142857vw, 3.6rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.7428571429rem + 1.7857142857vw, 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; } } @media (min-width: 1100px) { .c-taxonomy-button { width: 23vw; } } .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: 30px; width: fit-content; margin-left: auto; margin-right: auto; } } @media (min-width: 1100px) { .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; height: 100%; 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-red); } .c-card__more--case { --card-more-color: var(--color-green); } .c-card__more--culture { --card-more-color: var(--color-blue); } .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-red); } .c-card__meta--case { --card-meta-color: var(--color-green); } .c-card__meta--culture { --card-meta-color: var(--color-blue); } .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-weight: 700; font-size: 1.6rem; } .c-card__head { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .c-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .c-card__tag { box-sizing: border-box; width: fit-content; padding: 0 6px; border-radius: 4px; background: var(--color-beige); font-size: 1.4rem; color: var(--color-dark-brown); text-box: trim-both text; } @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; } } .c-card__tag { padding: 0 4px; } } @media (min-width: 1100px) { .c-card { max-width: 350px; } .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 { max-width: 480px; margin-left: auto; margin-right: auto; } } @media (min-width: 768px) { .c-card-list { grid-template-columns: 1fr 1fr; grid-gap: 25px; } } @media (min-width: 768px) and (max-width: 1099.98px) { .c-card-list--ranking { grid-template-columns: repeat(2, minmax(auto, 350px)); place-items: center; width: fit-content; margin-left: auto; margin-right: auto; } .c-card-list--ranking .c-card:last-of-type { grid-column: 1/3; width: 50%; justify-self: center; } } @media (min-width: 1100px) { .c-card-list { grid-template-columns: repeat(3, 1fr); } } .c-cave { position: relative; z-index: 500; background-color: var(--color-cave); } .c-cave { padding-top: 45.8vw; } .c-cave { padding-bottom: 85.3vw; } .c-cave::before, .c-cave::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 100vw; height: 100%; background-repeat: no-repeat; background-size: contain; } .c-cave::before { background-position: top center; background-image: var(--cave-upper-image, url(../img/common/bg_cave01_sp.png)); } .c-cave::after { background-position: bottom center; background-image: var(--cave-bottom-image, url(../img/common/bg_cave02_sp.png)); } .c-cave > * { position: relative; z-index: 2; } @media (min-width: 768px) { .c-cave { --cave-upper-image: url(../img/common/bg_cave01_pc.png); --cave-bottom-image: url(../img/common/bg_cave02_pc.png); padding-top: min(30vw, 397px); padding-bottom: min(30vw, 454px); } .c-cave::before, .c-cave::after { width: clamp(1024px, 79.277vw + 415.094px, 1100px); } } @media (min-width: 1100px) { .c-cave::before, .c-cave::after { width: min(100%, 1920px); } } .c-interview { margin-top: 8vw; } .c-interview__question { margin-bottom: 1em; 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-interview__question { font-size: 1.6rem; } } .c-interview__answer span { font-weight: 700; } .c-interview__answer p + p { margin-top: 1.8em; } @media (min-width: 768px) { .c-interview { margin-top: 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__link span { white-space: nowrap; } .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 { --pager-icon-width: 55px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; margin: 13.3vw auto; } .c-pager__button { box-sizing: border-box; align-items: center; gap: 20px; height: var(--pager-icon-width); border: 1px solid; background-color: #fff; border-radius: 38px; font-size: 1.6rem; transition: all 0.2s ease-in; } @media not all and (pointer: coarse) { .c-pager__button:hover { background-color: var(--color-light-brown); } } .c-pager__button--prev, .c-pager__button--next { display: grid; } .c-pager__button--prev .c-pager__icon, .c-pager__button--next .c-pager__icon { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: var(--pager-icon-width); height: var(--pager-icon-width); border-radius: 50%; background-color: var(--color-light-brown); border: 1px solid; transition: transform 0.2s ease-in; } .c-pager__button--prev .c-pager__icon svg, .c-pager__button--next .c-pager__icon svg { width: 21px; } @media not all and (pointer: coarse) { .c-pager__button--prev:hover .c-pager__icon, .c-pager__button--next:hover .c-pager__icon { transform: scale(1.1); background-color: var(--color-dark-brown); color: var(--color-light-brown); } } .c-pager__button--prev { grid-template-columns: var(--pager-icon-width) 1fr; } .c-pager__button--prev .c-pager__icon { margin-top: -1px; margin-left: -1px; } @media not all and (pointer: coarse) { .c-pager__button--prev:hover { transform: translateX(-16px); } } .c-pager__button--next { grid-template-columns: 1fr var(--pager-icon-width); } .c-pager__button--next .c-pager__icon { margin-top: -1px; margin-left: 1px; } .c-pager__button--next .c-pager__text { justify-self: end; } @media not all and (pointer: coarse) { .c-pager__button--next:hover { transform: translateX(16px); } } .c-pager__button--index { display: flex; justify-content: center; } .c-pager__button--index .c-pager__icon { display: inline-flex; align-items: center; transform: scaleX(-1); } .c-pager__button--index .c-pager__icon svg { width: 53px; } .c-pager__button.is-disabled { pointer-events: none; background-color: rgba(132, 132, 132, 0.25); } .c-pager__button.is-disabled .c-pager__icon { background-color: rgba(132, 132, 132, 0.5); } .c-pager__icon { color: var(--color-dark-brown); } @media (max-width: 767.98px) { .c-pager { width: min(79.73vw, 299px); } .c-pager__button--prev, .c-pager__button--next { grid-row: 1; } .c-pager__button--index { grid-column: 1/3; grid-row: 2; } } @media (min-width: 768px) { .c-pager { --pager-icon-width: 65px; grid-template-columns: 200px 1fr 200px; grid-gap: clamp(16px, -100.727px + 15.273vw, 34px); width: min(90%, 800px); margin: 100px auto; } .c-pager__button { font-size: 2rem; } } .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::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; font-size: clamp(2rem, 0.3333333333rem + 3.4722222222vw, 3rem); } @supports not (font-size: clamp(20 * 0.1rem, 0.3333333333rem + 3.4722222222vw, 30 * 0.1rem)) { .c-sns__head { font-size: 2rem; } } .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%; 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) / 832, 236px); height: clamp(160px, 160px + 77 * (100vw - 768px) / 832, 237px); } .c-sns__head { font-size: clamp(3rem, 1.498089172rem + 1.9108280255vw, 3.6rem); } @supports not (font-size: clamp(30 * 0.1rem, 1.498089172rem + 1.9108280255vw, 36 * 0.1rem)) { .c-sns__head { font-size: 3rem; } } .c-sns-list { gap: 40px; } .c-sns-list__item { width: clamp(35px, 35px + 33 * (100vw - 768px) / 332, 68px); } } @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); clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 12px), 96% calc(100% - 8px), 92% calc(100% - 14px), 88% calc(100% - 10px), 84% calc(100% - 15px), 80% calc(100% - 9px), 76% calc(100% - 13px), 72% calc(100% - 7px), 68% calc(100% - 14px), 64% calc(100% - 10px), 60% calc(100% - 16px), 56% calc(100% - 8px), 52% calc(100% - 13px), 48% calc(100% - 9px), 44% calc(100% - 15px), 40% calc(100% - 11px), 36% calc(100% - 7px), 32% calc(100% - 14px), 28% calc(100% - 10px), 24% calc(100% - 16px), 20% calc(100% - 8px), 16% calc(100% - 12px), 12% calc(100% - 9px), 8% calc(100% - 15px), 4% calc(100% - 11px), 0% calc(100% - 13px)); } .c-toc__inner { --inner-padding: 8vw; --inner-max-width: 975px; padding-top: 290px; padding-bottom: 290px; } .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: 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; align-self: center; } .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: auto 1fr; font-size: clamp(1.8rem, 0.8746987952rem + 1.2048192771vw, 2.2rem); } @supports not (font-size: clamp(18 * 0.1rem, 0.8746987952rem + 1.2048192771vw, 22 * 0.1rem)) { .c-toc-list__link { font-size: 1.8rem; } } .c-toc-list__num { width: 32px; height: 32px; font-size: 2rem; } } @media (min-width: 1100px) { .c-toc-header { grid-template-columns: 160px 193px 1fr; } .c-toc-list__num { width: 36px; height: 36px; font-size: 2.2rem; } } /* ------------------------------ 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; } .u-link-external { position: relative; display: inline-flex; align-items: center; column-gap: 0.25em; text-decoration: underline; } .u-link-external::after { content: ""; display: inline-block; width: 1em; height: 1em; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22currentColor%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M19%2C14%20L19%2C19%20C19%2C20.1045695%2018.1045695%2C21%2017%2C21%20L5%2C21%20C3.8954305%2C21%203%2C20.1045695%203%2C19%20L3%2C7%20C3%2C5.8954305%203.8954305%2C5%205%2C5%20L10%2C5%20L10%2C7%20L5%2C7%20L5%2C19%20L17%2C19%20L17%2C14%20L19%2C14%20Z%20M18.9971001%2C6.41421356%20L11.7042068%2C13.7071068%20L10.2899933%2C12.2928932%20L17.5828865%2C5%20L12.9971001%2C5%20L12.9971001%2C3%20L20.9971001%2C3%20L20.9971001%2C11%20L18.9971001%2C11%20L18.9971001%2C6.41421356%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); } @media not all and (pointer: coarse) { .u-link-external:hover { text-decoration: none; } } /* ------------------------------ 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 { position: relative; } .home-archive__inner { position: relative; z-index: 2; } .home-archive__inner { padding-top: 29.3vw; } .home-archive__inner { padding-bottom: 66.6vw; } .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 { background-color: var(--color-soil01); } .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__head { margin-bottom: 10.6vw; } .home-ranking__head img { margin: auto; } .home-ranking__head img { width: 87.7vw; } @media (min-width: 768px) { .home-ranking__head { margin-bottom: 52px; } .home-ranking__head img { width: 461px; } } @media (min-width: 1100px) { .home-ranking__head img { width: 658px; } } /* home-about */ .home-about { position: relative; text-align: center; } .home-about__inner { position: relative; z-index: 2; padding-bottom: 50vw; } .home-about__inner { padding-top: 37.3vw; } .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, 0.5333333333rem + 2.4305555556vw, 2.4rem); } @supports not (font-size: clamp(17 * 0.1rem, 0.5333333333rem + 2.4305555556vw, 24 * 0.1rem)) { .home-about__text span { font-size: 1.7rem; } } .home-about__text--only-pc { display: none; } @media (max-width: 374.98px) { .home-about__text span { font-size: 1.5rem; } } @media (min-width: 768px) { .home-about { background-color: var(--color-soil02); } .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: 80vw; } .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: 45vw; 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::before { content: ""; display: inline-block; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 1920px; height: 100%; background: var(--color-soil03) url(../img/home/bg_taxonomy01.png) no-repeat top center/contain; } .home-taxonomy__inner { position: relative; z-index: 2; padding-bottom: 200px; } .home-taxonomy__head { margin-bottom: 50px; } .home-taxonomy__head img { width: 277px; } } @media (min-width: 1100px) { .home-taxonomy__head img { width: 395px; } } /* home-sns */ .home-sns { position: relative; } .home-sns__inner { position: relative; z-index: 2; }