@charset "UTF-8"; @keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}} .splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0} .splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1} .splide--rtl{direction:rtl} .splide__track--ttb>.splide__list{display:block} .splide__container{box-sizing:border-box;position:relative} .splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important} .splide.is-initialized:not(.is-active) .splide__list{display:block} .splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none} .splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto} .splide:not(.is-overflow) .splide__pagination{display:none} .splide__progress__bar{width:0} .splide{position:relative;visibility:hidden} .splide.is-initialized,.splide.is-rendered{visibility:visible} .splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative} .splide__slide img{vertical-align:bottom} .splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px} .splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} .splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none} .splide__toggle.is-active .splide__toggle__pause{display:inline} .splide__track{overflow:hidden;position:relative;z-index:0} :root { --mh--breakpoint--min: 375px; --mh--breakpoint--sm: 640px; --mh--breakpoint--md: 768px; --mh--breakpoint--lg: 1100px; --mh--breakpoint--xl: 1280px; --mh--breakpoint--x2l: 1500px; } :root { --mh--font-family--base: "Zen Kaku Gothic New", meiryo, sans-serif; --mh--font-family--en: "Rubik", sans-serif; } html body { --mh--font-size--x3s: 1.2rem; --mh--font-size--x2s: 1.3rem; --mh--font-size--xs: 1.4rem; --mh--font-size--sm: 1.5rem; --mh--font-size--md: 1.6rem; --mh--font-size--lg: 1.7rem; --mh--font-size--xl: 1.8rem; --mh--font-size--x2l: 2rem; --mh--font-size--x3l: 2.1rem; --mh--font-size--x4l: 2.2rem; --mh--font-size--x5l: 2.4rem; --mh--font-size--x6l: 2.6rem; --mh--font-size--x7l: 2.7rem; --mh--font-size--x8l: 2.9rem; --mh--font-size--x9l: 3.1rem; --mh--font-size--x10l: 3.4rem; --mh--font-size--x11l: 3.6rem; --mh--font-size--x12l: 3.9rem; } @media (width >= 768px ) { html body { --mh--font-size--lg: 1.8rem; --mh--font-size--xl: 2rem; --mh--font-size--x2l: 2.3rem; --mh--font-size--x3l: 2.6rem; --mh--font-size--x4l: 2.9rem; --mh--font-size--x5l: 3.2rem; --mh--font-size--x6l: 3.6rem; --mh--font-size--x7l: 4.1rem; --mh--font-size--x8l: 4.6rem; --mh--font-size--x9l: 5.2rem; --mh--font-size--x10l: 5.8rem; --mh--font-size--x11l: 6.6rem; --mh--font-size--x12l: 7.4rem; } } :root { --mh--letter-spacing--sm: 0; --mh--letter-spacing--md: 0.05em; } :root { --mh--line-height--none: 1; --mh--line-height--sm: 1.2; --mh--line-height--md: 1.5; --mh--line-height--lg: 1.9; } :root { --mh--header--height: 84px; } @media (width >= 768px ) { :root { --mh--header--height: 130px; } } :root { --mh--sidebar--width: 240px; } :root { --mh--contents--width: 1100px; --mh--contents--wide-width: 1400px; --mh--contents--padding--side: 20px; --mh--contents--width-with-padding: calc( var(--mh--contents--width) + var(--mh--contents--padding--side) * 2 ); --mh--contents--wide-width-with-padding: calc( var(--mh--contents--wide-width) + var(--mh--contents--padding--side) * 2 ); } @media (width >= 768px ) { :root { --mh--contents--padding--side: 50px; } } html body { --mh--color--primary-600: rgb(232, 116, 0); --mh--color--primary-500: rgb(243, 152, 0); --mh--color--primary-300: rgb(250, 213, 150); --mh--color--primary-200: rgb(251, 222, 173); --mh--color--primary-100: rgb(250, 241, 222); --mh--color--grayscale-900: rgb(51, 51, 51); --mh--color--grayscale-800: rgb(102, 102, 102); --mh--color--grayscale-500: rgb(179, 179, 179); --mh--color--grayscale-200: rgb(245, 244, 242); --mh--color--grayscale-100: rgb(255, 255, 255); --mh--color--error-500: rgb(255, 0, 0); --mh--color--category-red-100: rgb(255, 204, 191); --mh--color--category-green-100: rgb(187, 235, 211); --mh--color--category-blue-100: rgb(191, 234, 242); --mh--gradient01: linear-gradient(282deg, rgb(243, 152, 0) 0%, rgb(235, 77, 14) 100%); --mh--gradient02: linear-gradient(225deg, rgb(255, 234, 191) 0%, rgb(252, 215, 202) 100%); --mh--gradient03: linear-gradient(282deg, rgb(235, 87, 6) 0%, rgb(243, 152, 0) 100%); --mh--_: linear-gradient(0deg, rgb(232, 116, 0) 70%, rgba(232, 116, 0, 0) 70%); } :root { --mh--easing: ease; --mh--duration: 0.3s; --mh--duration05: 0.5s; } @keyframes loop01 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } :root { --mh--space--10-10: 10px; --mh--space--10-15: 10px; --mh--space--10-30: 10px; --mh--space--10-40: 10px; --mh--space--10-60: 10px; --mh--space--15-15: 15px; --mh--space--15-20: 15px; --mh--space--20-120: 20px; --mh--space--20-15: 20px; --mh--space--20-20: 20px; --mh--space--20-30: 20px; --mh--space--20-50: 20px; --mh--space--20-60: 20px; --mh--space--20-80: 20px; --mh--space--25-25: 25px; --mh--space--25-30: 25px; --mh--space--25-60: 25px; --mh--space--25-70: 25px; --mh--space--25-80: 25px; --mh--space--30-30: 30px; --mh--space--30-40: 30px; --mh--space--30-50: 30px; --mh--space--30-80: 30px; --mh--space--40-100: 40px; --mh--space--40-120: 40px; --mh--space--40-60: 40px; --mh--space--60-100: 60px; --mh--space--60-160: 60px; --mh--space--x5s: 2px; --mh--space--x4s: 5px; --mh--space--x3s: 10px; --mh--space--x2s: 15px; --mh--space--xs: 20px; --mh--space--sm: 30px; --mh--space--md: 40px; --mh--space--lg: 50px; --mh--space--xl: 60px; --mh--space--x2l: 70px; --mh--space--x3l: 80px; --mh--space--x4l: 90px; --mh--space--x5l: 100px; } @media (width >= 768px ) { :root { --mh--space--10-15: 15px; --mh--space--10-30: 30px; --mh--space--10-40: 40px; --mh--space--10-60: 60px; --mh--space--15-20: 20px; --mh--space--20-120: 120px; --mh--space--20-15: 15px; --mh--space--20-30: 30px; --mh--space--20-50: 50px; --mh--space--20-60: 60px; --mh--space--20-80: 80px; --mh--space--25-25: 25px; --mh--space--25-30: 30px; --mh--space--25-60: 60px; --mh--space--25-70: 70px; --mh--space--25-80: 80px; --mh--space--30-30: 30px; --mh--space--30-40: 40px; --mh--space--30-50: 50px; --mh--space--30-80: 80px; --mh--space--40-100: 100px; --mh--space--40-120: 120px; --mh--space--40-60: 60px; --mh--space--60-100: 100px; --mh--space--60-160: 160px; --mh--space--x5s: 4px; --mh--space--x4s: 10px; --mh--space--x3s: 20px; --mh--space--x2s: 30px; --mh--space--xs: 40px; --mh--space--sm: 60px; --mh--space--md: 80px; --mh--space--lg: 100px; --mh--space--xl: 120px; --mh--space--x2l: 140px; --mh--space--x3l: 160px; --mh--space--x4l: 180px; --mh--space--x5l: 200px; } } :root { --mh--border-radius--sm: 4px; --mh--border-radius--md: 8px; --mh--border-radius--lg: 16px; } @media (width >= 768px ) { :root { --mh--border-radius--sm: 8px; --mh--border-radius--md: 16px; --mh--border-radius--lg: 24px; } } * { box-sizing: border-box; padding: 0; margin: 0; font-size: 100%; vertical-align: baseline; background: transparent; } *::before, *::after { box-sizing: border-box; } * :focus-visible { outline: 2px solid; } html { block-size: 100%; font-size: 62.5%; -webkit-text-size-adjust: none; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizespeed; min-block-size: 100%; } img, video, canvas, audio, iframe, embed, object { display: block; } img, svg, video { max-inline-size: 100%; block-size: auto; } svg { fill: currentcolor; stroke: none; } p, h1, h2, h3, h4, h5, h6 { word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; line-break: strict; } ul, ol { list-style: none; } a[class] { text-decoration: none; } input, select { appearance: none; } input, button, textarea, select, input[type=file]::-webkit-file-upload-button { font: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; } a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"]) { touch-action: manipulation; cursor: pointer; } input[type=file] { cursor: auto; } button, button[type], input[type=button], input[type=submit], input[type=reset], input[type=file]::-webkit-file-upload-button, input[type=file]::file-selector-button { text-align: center; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } button[disabled], button[type][disabled], input[type=button][disabled], input[type=submit][disabled], input[type=reset][disabled] { cursor: not-allowed; } /* 02_base ================================================ */ html { overflow: auto; } html:not([class=is-no-smoothscroll]) { scroll-behavior: smooth; scroll-padding-top: var(--mh--header--height); } body { overflow: clip; min-width: 320px; font-family: var(--mh--font-family--base); font-size: var(--mh--font-size--md); font-weight: 500; line-height: var(--mh--line-height--md); color: var(--mh--color--grayscale-900); -webkit-text-size-adjust: 100%; } @media (width >= 768px ) { body { min-width: var(--mh--contents--width-with-padding); } } @media (width >= 768px ) and (hover: none) { body { -webkit-text-size-adjust: none; } } * { letter-spacing: var(--mh--letter-spacing--md); } ins { text-decoration: none; background-color: #ff9; } mark { font-weight: bold; background-color: #ff9; } del { text-decoration: line-through; } abbr[title], dfn[title] { cursor: help; border-bottom: 1px dotted; } sup { font-size: 0.75em; vertical-align: text-top; } sub { font-size: 0.75em; vertical-align: text-bottom; } hr { display: block; height: 1px; padding: 0; margin: 1em 0; border: 0; border-top: 1px solid; } table { width: 100%; table-layout: fixed; border-spacing: 0; border-collapse: collapse; } a { color: inherit; } @media (width < 768px) { a:hover { text-decoration: none; } } input[type=text], input[type=email], input[type=tel], textarea, button, select, option { display: block; width: 100%; max-width: 100%; font-family: inherit; background: none; border: 1px solid; border-radius: 0; } @media (width < 768px) { input[type=text], input[type=email], input[type=tel], textarea, button, select, option { font-size: 1.6rem; } } summary { display: block; cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } .l-wrapper { position: relative; padding-bottom: env(safe-area-inset-bottom); } @media (width >= 1100px ) { .l-container.is-col2 { display: grid; grid-template-columns: var(--mh--sidebar--width) 1fr; gap: 20px; width: var(--mh--contents--width); margin: 0 auto; } .l-container.is-col2 .l-sidebar { order: -1; } } /* .c-archive01 ================================================== */ .c-archive01 { display: grid; gap: var(--mh--space--sm); } @media (width >= 768px ) { .c-archive01 { grid-template-columns: repeat(3, 1fr); gap: 50px var(--mh--space--sm); } } /* c-box01 内枠線と内点線つき ====================================== */ .c-box01 { --boxInset: 10px; --decoSize: 4px; --decoMargin: 20px; --decoPosition: 4px; position: relative; z-index: 1; background: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--lg); } .c-box01:before { content: ""; position: absolute; z-index: -1; inset: var(--boxInset); border: 2px solid var(--mh--color--primary-300); border-radius: var(--mh--border-radius--sm); } .c-box01__deco { position: absolute; z-index: -1; } .c-box01__deco.is-top, .c-box01__deco.is-bottom { width: calc(100% - var(--decoMargin)); height: var(--decoSize); left: 50%; transform: translateX(-50%); background: repeating-linear-gradient(to right, var(--mh--color--primary-300) 0, var(--mh--color--primary-300) 2px, transparent 2px, transparent 6px); } .c-box01__deco.is-right, .c-box01__deco.is-left { width: var(--decoSize); height: calc(100% - var(--decoMargin)); top: 50%; transform: translateY(-50%); background: repeating-linear-gradient(to bottom, var(--mh--color--primary-300) 0, var(--mh--color--primary-300) 2px, transparent 2px, transparent 6px); } .c-box01__deco.is-top { top: var(--decoPosition); } .c-box01__deco.is-bottom { bottom: var(--decoPosition); } .c-box01__deco.is-right { right: var(--decoPosition); } .c-box01__deco.is-left { left: var(--decoPosition); } @media (width >= 768px ) { .c-box01 { --boxInset: 20px; --decoSize: 8px; --decoMargin: 40px; --decoPosition: 6px; } } /* c-btn01 ================================================== */ .c-btn01 { display: grid; grid-template-columns: auto 36px; align-items: center; gap: 0 10px; width: fit-content; font-weight: 700; font-size: var(--mh--font-size--lg); } .c-btn01[target=_blank] .c-btn01__ico:after { display: inline-block; width: 13px; aspect-ratio: 1; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } .c-btn01__ico { display: grid; place-items: center; width: 100%; aspect-ratio: 1; color: var(--mh--color--grayscale-100); background: var(--mh--color--primary-500); border-radius: var(--mh--border-radius--sm); border: 2px solid var(--mh--color--primary-500); transition: background-color var(--mh--duration) var(--mh--easing); } .c-btn01__ico:after { display: inline-block; width: 16px; aspect-ratio: 1; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } @media (width >= 768px ) { .c-btn01 { grid-area: other; } } @media (hover: hover) and (pointer: fine) { .c-btn01 { transition: color var(--mh--duration) var(--mh--easing); } .c-btn01:hover { color: var(--mh--color--primary-500); } .c-btn01:hover .c-btn01__ico { background: #fff; } .c-btn01:hover .c-btn01__ico:after { color: var(--mh--color--primary-500); } } /* .c-btn01.is-grayscale-100 ==================================== */ .c-btn01.is-grayscale-100 { color: var(--mh--color--grayscale-100); } .c-btn01.is-grayscale-100 .c-btn01__ico { background: var(--mh--color--grayscale-100); border-color: var(--mh--color--grayscale-100); } .c-btn01.is-grayscale-100 .c-btn01__ico:after { color: var(--mh--color--primary-500); } @media (hover: hover) and (pointer: fine) { .c-btn01.is-grayscale-100:hover .c-btn01__ico { background: transparent; } .c-btn01.is-grayscale-100:hover .c-btn01__ico:after { color: var(--mh--color--grayscale-100); } } /* c-card-interview01 =============================== */ .c-card-interview01 { --line: 3; --line-height: 1.5; } .c-card-interview01__in { position: relative; overflow: hidden; display: grid; grid-auto-columns: 100%; aspect-ratio: 340/453; padding: 20px; border-radius: var(--mh--border-radius--md); } .c-card-interview01__in:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 45.4746136865%; background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 0.8) 100%); } .c-card-interview01__img { position: absolute; inset: 0; z-index: -1; } .c-card-interview01__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mh--duration) var(--mh--easing); } .c-card-interview01__cat { position: absolute; z-index: 1; top: 20px; left: 20px; display: grid; place-items: center; min-width: 65px; min-height: 65px; font-weight: 700; font-size: var(--mh--font-size--sm); border-radius: var(--mh--border-radius--sm); background: var(--mh--color--category-blue-100); } .c-card-interview01__cat:before { display: inline-block; width: 30px; aspect-ratio: 13/18; color: var(--mh--color--grayscale-100); content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; } .c-card-interview01__txts { position: relative; z-index: 1; align-self: end; color: var(--mh--color--grayscale-100); } .c-card-interview01__head { display: -webkit-box; max-height: calc(var(--line) * var(--line-height) * 1em); overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: var(--line); line-height: var(--line-height); -webkit-box-orient: vertical; font-size: var(--mh--font-size--xl); } .c-card-interview01__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--mh--color--grayscale-500); } .c-card-interview01__bottom:before, .c-card-interview01__bottom:after { content: ""; position: absolute; top: -3px; width: 5px; aspect-ratio: 1; background: var(--mh--color--grayscale-500); border-radius: 50%; } .c-card-interview01__bottom:before { left: 0; } .c-card-interview01__bottom:after { right: 0; } .c-card-interview01__name { font-size: var(--mh--font-size--x2s); } .c-card-interview01__name span { display: inline-block; margin-right: 2px; font-size: var(--mh--font-size--md); } .c-card-interview01__year { font-size: var(--mh--font-size--xs); } @media (width >= 768px ) { .c-card-interview01__head { font-size: var(--mh--font-size--md); } .c-card-interview01__name { font-size: var(--mh--font-size--x3s); } .c-card-interview01__name span { font-size: var(--mh--font-size--sm); } .c-card-interview01__year { font-size: var(--mh--font-size--x3s); } } @media (hover: hover) and (pointer: fine) { .c-card-interview01__in:hover .c-card-interview01__img img { transform: scale(1.1); } } /* c-card-interview01.is-oita ==================================== */ .c-card-interview01.is-oita .c-card-interview01__cat { background: var(--mh--color--category-green-100); } /* c-head01 四角4つの飾り付き ====================================== */ .c-head01 { position: relative; font-weight: 700; font-size: var(--mh--font-size--x8l); } .c-head01:before { display: inline-block; width: 7px; aspect-ratio: 1; color: var(--mh--color--primary-500); content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); position: absolute; top: -6px; left: 0; } @media (width >= 768px ) { .c-head01:before { top: 15px; left: auto; right: calc(100% + 10px); width: 14px; } } /* c-head01.is-grayscale-100 ====================================== */ .c-head01.is-grayscale-100 { color: var(--mh--color--grayscale-100); } .c-head01.is-grayscale-100:before { color: var(--mh--color--grayscale-100); } /* c-head02 飾り下線つき ====================================== */ .c-head02 { position: relative; padding-bottom: var(--mh--space--10-15); font-weight: 700; font-size: var(--mh--font-size--x5l); border-bottom: 1px solid var(--mh--color--grayscale-500); } .c-head02:before, .c-head02:after { content: ""; position: absolute; bottom: -3px; width: 5px; aspect-ratio: 1; background: var(--mh--color--grayscale-500); border-radius: 50%; } .c-head02:before { left: 0; } .c-head02:after { right: 0; } .c-head02__ico { display: inline-block; width: 7px; aspect-ratio: 1; color: var(--mh--color--primary-500); content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); position: absolute; top: -6px; left: 0; } @media (width >= 768px ) { .c-head02__ico { top: 10px; left: auto; right: calc(100% + 10px); width: 14px; } } /* c-head02:has(.c-head02__ico) ====================================== */ @media (width >= 768px ) { .c-head02:has(.c-head02__ico) { padding-left: 24px; } .c-head02:has(.c-head02__ico) .c-head02__ico { right: calc(100% - 14px); } } /* c-head03 左に縦棒 ====================================== */ .c-head03 { position: relative; padding-left: 14px; font-weight: 700; font-size: var(--mh--font-size--x2l); } .c-head03:before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: calc(100% - 9px); background: var(--mh--color--primary-500); } @media (width >= 768px ) { .c-head03 { padding-left: 16px; } .c-head03:before { height: calc(100% - 11px); } } /* .c-ico ================================================== */ .c-ico { display: inline-block; vertical-align: baseline; } .c-ico svg { transition: all var(--mh--duration) var(--mh--easing); } /* .c-ico.is-arrow01 ================================================== */ .c-ico.is-arrow01::after { display: inline-block; width: 16px; aspect-ratio: 1; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } /* .c-ico.is-blank01 ================================================== */ .c-ico.is-blank01::after { display: inline-block; width: 13px; aspect-ratio: 1; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } /* .c-ico.is-map01 ================================================== */ .c-ico.is-map01::after { display: inline-block; width: 13px; aspect-ratio: 13/18; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } /* .c-ico.is-document01 ================================================== */ .c-ico.is-document01::after { display: inline-block; width: 14px; aspect-ratio: 14/18; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } /* .c-ico.is-deco01 ================================================== */ .c-ico.is-deco01::after { display: inline-block; width: 7px; aspect-ratio: 1; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } /* .c-ico.is-deco02 ================================================== */ .c-ico.is-deco02::after { display: inline-block; width: 295px; aspect-ratio: 295/100; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } /* c-modal01 =============================== */ .c-modal01 { position: relative; z-index: 3000; } .c-modal01[aria-hidden=false] .c-modal01__overlay { animation: c-modal01-fadein 0.3s ease; } .c-modal01[aria-hidden=false] .c-modal01__container { animation: c-modal01-slideIn 0.3s ease; } .c-modal01[aria-hidden=true] .c-modal01__overlay { animation: c-modal01-fadeout 0.3s ease; } .c-modal01[aria-hidden=true] .c-modal01__container { animation: c-modal01-slideOut 0.3s ease; } .c-modal01__overlay { position: fixed; inset: 0; background: rgba(33, 33, 33, 0.5); display: flex; justify-content: center; align-items: center; } .c-modal01__container { position: relative; width: calc(100% - 40px); } .c-modal01__container::-webkit-scrollbar { width: 5px; } .c-modal01__container::-webkit-scrollbar-track { background-color: greeen; border-radius: 1000px; } .c-modal01__container::-webkit-scrollbar-thumb { background: yellow; border-radius: 1000px; } .c-modal01__container-wrap { position: relative; max-width: calc(100% - 40px); margin: 0 auto; overflow: hidden; } .c-modal01__close { position: absolute; top: -30px; right: 0; width: 24px; height: 24px; border: none; } .c-modal01__close:before, .c-modal01__close:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 3px; background: #fff; border-radius: 2px; } .c-modal01__close:after { transform: translate(-50%, -50%) rotate(-45deg); } .c-modal01__box { position: relative; max-height: 100%; overflow-y: auto; max-height: calc(100dvh - 140px); padding: 20px; background: #fff; border-radius: var(--mh--border-radius--lg); } @media (width >= 768px ) { .c-modal01__container { width: calc(100% - 200px); max-width: 1000px; } .c-modal01__close { top: -50px; width: 38px; height: 38px; } .c-modal01__close:before, .c-modal01__close:after { height: 4px; } .c-modal01__box { padding: 60px; } } @media (hover: hover) and (pointer: fine) { .c-modal01__close { transition: opacity var(--mh--duration) var(--mh--easing); } .c-modal01__close:focus, .c-modal01__close:hover { opacity: 0.5; } } @keyframes c-modal01-fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes c-modal01-fadeout { from { opacity: 1; } to { opacity: 0; } } @keyframes c-modal01-slideIn { from { transform: translateY(30px); } to { transform: translateY(0); } } @keyframes c-modal01-slideOut { from { transform: translateY(0); } to { transform: translateY(-30px); } } /* c-note01 ================================= */ .c-note01 { position: relative; padding-left: calc(1em + 4px); color: var(--mh--color--grayscale-800); font-size: var(--mh--font-size--x2s); } .c-note01:before { content: "※"; position: absolute; top: 0; left: 0; } /* .c-pager01 =================================== */ .c-pager01 { margin-top: var(--mh--space--40-60); display: flex; flex-wrap: wrap; justify-content: center; overflow: hidden; text-align: center; gap: 5px; } .c-pager01 li a, .c-pager01 li span { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 31px; height: 31px; line-height: 1; font-weight: 600; text-decoration: none; font-family: var(--mh--font-family--en); font-weight: 600; line-height: var(--mh--line-height--sm); letter-spacing: var(--mh--letter-spacing--sm); } .c-pager01 li.pages span { width: auto; border: 0; } .c-pager01 li.current span { color: var(--mh--color--primary-600); border-bottom: 2px solid; } .c-pager01 li.first a, .c-pager01 li.last a { width: auto; border-color: transparent; } .c-pager01 .next a, .c-pager01 .previous a { display: grid; place-items: center; width: 36px; aspect-ratio: 1; color: var(--mh--color--grayscale-100); background: var(--mh--color--primary-500); border-radius: var(--mh--border-radius--sm); border: 2px solid var(--mh--color--primary-500); transition: background-color var(--mh--duration) var(--mh--easing); } .c-pager01 .next a:after, .c-pager01 .previous a:after { display: inline-block; width: 16px; aspect-ratio: 1; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } .c-pager01 .next { padding-left: 20px; } .c-pager01 .previous { padding-right: 20px; } .c-pager01 .previous a { transform: rotate(180deg); } @media (width >= 768px ) { .c-pager01 { align-items: center; gap: 10px; } .c-pager01 li a, .c-pager01 li span { width: 48px; height: 48px; } .c-pager01 .next a, .c-pager01 .previous a { width: 50px !important; height: 50px !important; } } @media (hover: hover) and (pointer: fine) { .c-pager01 li.page a { transition: color var(--mh--duration) var(--mh--easing), background-color var(--mh--duration) var(--mh--easing); } .c-pager01 li.page a:hover { color: var(--mh--color--primary-600); background-color: var(--mh--color--grayscale-100); } .c-pager01 .next a, .c-pager01 .previous a { transition: color var(--mh--duration) var(--mh--easing), background-color var(--mh--duration) var(--mh--easing); } .c-pager01 .next a:hover, .c-pager01 .previous a:hover { color: var(--mh--color--primary-600); background-color: var(--mh--color--grayscale-100); } } /* c-set-half ====================================== */ :root .c-set-half { --_align-items: start; --_gap: var(--mh--space--20-80); --_img-max-height: 400px; --_content-row-gap: var(--mh--space--20-30); margin-top: var(--mh--space--xl); display: grid; gap: var(--_gap); align-items: var(--_align-items); } :root .c-set-half__imgArea figure, :root .c-set-half__imgArea img { width: 100%; max-height: var(--_img-max-height); margin-inline: auto; object-fit: contain; border-radius: var(--mh--border-radius--md); } :root .c-set-half__txtArea-head { margin-top: var(--mh--space--10-10); font-size: var(--mh--font-size--x4l); font-weight: 700; } :root .c-set-half__txtArea-txt { margin-top: var(--mh--space--20-30); line-height: var(--mh--line-height--lg); } @media (width >= 768px ) { :root .c-set-half { display: flex; } :root .c-set-half__imgArea { width: 50%; } :root .c-set-half__txtArea { width: 50%; } } /* .c-set-half.is-reverse ================================================ */ @media (width >= 768px ) { :root .c-set-half.is-reverse { display: flex; flex-direction: row-reverse; } } /* c-interview-slider01 ====================================== */ .c-interview-slider01 { margin-top: var(--mh--space--xs); } @media (width >= 768px ) { .c-interview-slider01__ui { display: none !important; } } /* c-slider-ui01 ========================== */ .splide:not(.is-overflow) .c-slider-ui01 { display: none; } .c-slider-ui01 { display: flex; align-items: center; justify-content: space-between; gap: 0 30px; width: 100%; } .c-slider-ui01__progress { display: flex; align-items: center; gap: 0 40px; } .c-slider-ui01__progress-num:first-child { color: var(--mh--color--primary-500); } .c-slider-ui01__progress-num:last-child { position: relative; } .c-slider-ui01__progress-num:last-child:before { content: ""; position: absolute; top: 50%; right: calc(100% + 10px); transform: translateY(-50%); width: 20px; height: 1px; background: var(--mh--color--grayscale-500); } .c-slider-ui01 .splide__arrows { display: grid; grid-template-columns: repeat(2, 40px); gap: 0 5px; } .c-slider-ui01 .splide__arrow { width: 100%; aspect-ratio: 1; opacity: 1; display: grid; place-items: center; border: none; background: var(--mh--color--primary-500); border: 2px solid var(--mh--color--primary-500); border-radius: var(--mh--border-radius--sm); transition: all var(--mh--duration) var(--mh--easing); } .c-slider-ui01 .splide__arrow svg { display: none; } .c-slider-ui01 .splide__arrow::after { display: inline-block; width: 18px; aspect-ratio: 1; color: #fff; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); transition: none; } .c-slider-ui01 .splide__arrow--prev { left: 0; transform: scale(-1, -1); } .c-slider-ui01 .splide__arrow--next { right: 0; } @media (width >= 768px ) { .c-slider-ui01 .splide__arrows { grid-template-columns: repeat(2, 50px); } } @media (hover: hover) and (pointer: fine) { .c-slider-ui01 .splide__arrow:not([disabled]):hover { color: var(--mh--color--primary-500); background: transparent; } .c-slider-ui01 .splide__arrow:not([disabled]):hover:after { color: var(--mh--color--primary-500); } } /* .l-breadcrumb ================================================ */ .l-breadcrumb { padding-inline: var(--mh--contents--padding--side); } .l-breadcrumb__inner { padding-top: 20px; } /* .l-breadcrumb-list ================================================ */ .l-breadcrumb-list { display: flex; flex-wrap: wrap; justify-content: flex-end; } .l-breadcrumb-list__item { vertical-align: top; display: flex; flex-wrap: wrap; align-items: center; } .l-breadcrumb-list__item-txt { font-size: var(--mh--font-size--xs); } .l-breadcrumb-list__item a { color: var(--mh--color--primary-500); } .l-breadcrumb-list__item + .l-breadcrumb-list__item::before { margin-inline: var(--mh--space--10-15); content: ""; width: 15px; height: 1px; display: block; background-color: var(--mh--color--grayscale-800); } @media (width < 768px) { .l-breadcrumb-list { flex-wrap: nowrap; overflow: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .l-breadcrumb-list::-webkit-scrollbar { display: none; } } /* l-footer-cv ============================================= */ .l-footer-cv__img img { width: 100%; border-radius: var(--mh--border-radius--lg); } .l-footer-cv__txts { padding: 70px 30px; } .l-footer-cv__btn { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 62px; padding: 10px; margin-top: var(--mh--space--20-30); font-size: var(--mh--font-size--x3l); font-weight: 700; color: var(--mh--color--grayscale-100); background: var(--mh--color--primary-500); border-radius: 9999px; } .l-footer-cv__btn::before { display: inline-block; width: 18px; aspect-ratio: 14/18; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } @media (width >= 768px ) { .l-footer-cv { display: grid; grid-template-columns: repeat(2, 50%); } .l-footer-cv__img img { height: 100%; object-fit: cover; } .l-footer-cv__txts { padding: min(140px, 9.3333333333vw) min(120px, 8vw); } .l-footer-cv__btn { min-height: 99px; } .l-footer-cv__btn::before { width: 20px; } } @media (width >= 1500px ) { .l-footer-cv__txts { padding: min(140px, 7.2916666667vw) min(120px, 6.25vw); } } /* .l-footer ================================================ */ .l-footer__inner { padding: 60px 20px 25px; } .l-footer__main { display: grid; grid-auto-columns: 100%; gap: 30px; } @media (width >= 768px ) { .l-footer__inner { max-width: 1920px; padding: 120px 100px 50px; margin-inline: auto; } .l-footer__main { grid-template-areas: "logo list" "other list"; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: space-between; } } /* l-footer-logo ================================================ */ .l-footer-logo { display: flex; gap: 0 var(--mh--space--x2s); align-items: center; } .l-footer-logo svg { width: 120px; aspect-ratio: 120/36; color: var(--mh--color--primary-500); } .l-footer-logo__txt { font-size: var(--mh--font-size--x2s); font-weight: 700; color: var(--mh--color--grayscale-800); } @media (width >= 768px ) { .l-footer-logo { grid-area: logo; margin-top: -12px; } .l-footer-logo svg { width: 167px; } .l-footer-logo__txt { font-size: var(--mh--font-size--sm); } } @media (hover: hover) and (pointer: fine) { .l-footer-logo { transition: opacity var(--mh--duration) var(--mh--easing); } .l-footer-logo:hover { opacity: 0.7; } } /* .l-footer-list ================================================== */ .l-footer-list { display: grid; grid-auto-columns: 100%; gap: 20px; } .l-footer-list__item-txt { display: inline-block; font-weight: 700; } @media (width >= 768px ) { .l-footer-list { grid-area: list; grid-template-columns: 290px 270px; gap: 20px; } } @media (hover: hover) and (pointer: fine) { .l-footer-list__item-txt { transition: color var(--mh--duration) var(--mh--easing); } .l-footer-list__item-txt:hover { color: var(--mh--color--accent-500); } } /* l-footer-other ================================================== */ @media (width >= 768px ) { .l-footer-other { grid-area: other; align-self: end; } } /* l-footer-bottom ================================================== */ .l-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 25px; margin-top: 50px; border-top: 1px solid var(--mh--color--grayscale-500); } .l-footer-bottom small { font-size: var(--mh--font-size--xs); color: var(--mh--color--grayscale-800); } .l-footer-bottom__pagetop { display: grid; place-items: center; width: 36px; height: 36px; color: var(--mh--color--grayscale-100); background: var(--mh--color--primary-500); border: 2px solid var(--mh--color--primary-500); border-radius: var(--mh--border-radius--sm); transform: rotate(-90deg); } .l-footer-bottom__pagetop::after { display: inline-block; width: 16px; aspect-ratio: 1; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } @media (width >= 768px ) { .l-footer-bottom { padding-top: 50px; margin-top: 100px; } } @media (hover: hover) and (pointer: fine) { .l-footer-bottom__pagetop { transition: background-color var(--mh--duration) var(--mh--easing); } .l-footer-bottom__pagetop:hover { background: #fff; } .l-footer-bottom__pagetop:hover::after { color: var(--mh--color--primary-500); } } /* .l-header ================================================ */ .l-header { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; min-width: 320px; } .l-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0 20px; height: var(--mh--header--height); padding: 20px; background: var(--mh--color--grayscale-100); } @media (width >= 768px ) { .l-header { min-width: var(--mh--contents--width-with-padding); } } @media (width >= 768px ) and (hover: none) { .l-header { left: 0 !important; } } @media (width >= 768px ) { .l-header__inner { padding: 40px 50px; } } /* .l-header-logo ================================================== */ .l-header-logo { position: relative; z-index: 1; } .l-header-logo__link { display: flex; align-items: center; gap: 0 15px; } .l-header-logo__link svg { width: 120px; aspect-ratio: 120/36; color: var(--mh--color--primary-500); } .l-header-logo__txt { color: var(--mh--color--grayscale-800); font-weight: 700; font-size: var(--mh--font-size--x2s); } @media (width >= 768px ) { .l-header-logo__link { gap: 0 30px; } .l-header-logo__link svg { width: 167px; } .l-header-logo__txt { flex-shrink: 0; font-size: var(--mh--font-size--sm); } } @media (hover: hover) and (pointer: fine) { .l-header-logo { transition: opacity var(--mh--duration) var(--mh--easing); } .l-header-logo:hover { opacity: 0.7; } } /* .l-nav-btn ================================================== */ .l-nav-btn { position: relative; z-index: 1; width: 44px; height: 44px; cursor: pointer; border: none; border-radius: 50%; background: var(--mh--color--primary-500); } .l-nav-btn__line { content: ""; position: absolute; left: 13px; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--mh--duration) var(--mh--easing); } .l-nav-btn__line:nth-child(1) { top: 15px; } .l-nav-btn__line:nth-child(2) { top: 21px; } .l-nav-btn__line:nth-child(3) { top: 27px; } .l-nav-btn.is-open .l-nav-btn__line { width: 23px; left: 10px; } .l-nav-btn.is-open .l-nav-btn__line:nth-child(1), .l-nav-btn.is-open .l-nav-btn__line:nth-child(3) { top: 21px; } .l-nav-btn.is-open .l-nav-btn__line:nth-child(1) { transform: rotate(-45deg); } .l-nav-btn.is-open .l-nav-btn__line:nth-child(2) { opacity: 0; } .l-nav-btn.is-open .l-nav-btn__line:nth-child(3) { transform: rotate(45deg); } .l-nav-btn__txt { position: absolute; bottom: 3px; left: 0; width: 100%; line-height: var(--mh--line-height--sm); text-align: center; } /* .l-nav ================================================ */ .l-nav { min-width: 320px; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; } @media (width < 768px) { .l-nav { position: fixed; top: var(--mh--header--height); left: 0; width: 100%; padding: 40px var(--mh--contents--padding--side) calc(170px + env(safe-area-inset-bottom)); overflow: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: all var(--mh--duration) var(--mh--easing); height: calc(100dvh - var(--mh--header--height)); background: var(--mh--color--grayscale-100); box-shadow: inset 0 15px 15px -15px rgba(51, 51, 51, 0.2); } .l-nav::-webkit-scrollbar { display: none; } .l-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .l-nav:before, .l-nav:after { display: inline-block; width: 295px; aspect-ratio: 295/100; color: var(--mh--color--primary-500); content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); position: fixed; z-index: -1; opacity: 0.4; } .l-nav:before { top: calc(var(--mh--header--height) + 10px); right: 10px; } .l-nav:after { left: 10px; transform: scale(-1, -1); } } @media (width >= 768px ) { .l-nav { display: flex; justify-content: flex-end; align-items: center; gap: 0 30px; } } /* l-nav-link ================================================ */ .l-nav-link { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin: 0 0 30px; padding: 10px 40px; color: #fff; font-weight: 700; background: var(--mh--color--primary-500); border-radius: 9999px; } .l-nav-link__ico { display: inline-block; width: 14px; aspect-ratio: 14/18; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); margin-inline: 1px; } @media (width >= 768px ) { .l-nav-link { flex-shrink: 0; width: fit-content; min-height: 50px; margin: 0; } } /* .l-nav-list ================================================== */ .l-nav-list { display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px; } .l-nav-list__item-txt { display: inline-block; font-weight: 700; } .l-nav-list__item-ico { margin-left: var(--mh--space--x5s); color: var(--mh--color--primary-500); } @media (width >= 768px ) { .l-nav-list { order: -1; flex-direction: row; align-items: center; gap: 8px 30px; } } @media (768px <= width < 1500px) { .l-nav-list { max-width: 425px; } } @media (hover: hover) and (pointer: fine) { .l-nav-list__item-txt { transition: color var(--mh--duration) var(--mh--easing); } .l-nav-list__item-txt:hover { color: var(--mh--color--accent-500); } } /* l-nav-other ================================================== */ .l-nav-other { margin: 30px 0 0; } /* .l-nav-overlay ================================================ */ .l-nav-overlay { position: fixed; inset: 0; z-index: 10; display: none; opacity: 0.3; background: var(--mh--color--grayscale-900); } /* .l-main-img HOME ================================================ */ .l-main-img { min-height: 100vh; margin-bottom: 3px; padding: var(--mh--header--height) 0 40px; } .l-main-img.is-animated .l-main-img__copy { opacity: 1; transform: translateY(0); } .l-main-img__loop { --gap: 20; --width: 3254 + var(--gap); display: flex; width: max-content; animation: loop01 35s linear infinite; } .l-main-img__loop-img { padding-right: calc(var(--gap) / 375 * 100vw); } .l-main-img__loop-img img { width: auto; height: 44.9775112444vh; aspect-ratio: var(--width)/624; } .l-main-img__copy { padding: 40px 20px 0; opacity: 0; transform: translateY(20px); transition: all 0.6s var(--mh--easing); } .l-main-img__copy img { width: 100%; } @media (width < 768px) { .l-main-img__copy { max-width: 600px; } } @media (width >= 768px ) { .l-main-img { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); margin: 0; padding-bottom: min(153px, 7.96875vw); } .l-main-img__loop { --gap: 40; animation-duration: 60s; } .l-main-img__loop-img { padding-right: calc(var(--gap) / 1920 * 100vw); } .l-main-img__loop-img img { height: calc(0.5777777778 * var(--vh, 1vh) * 100); } .l-main-img__copy { padding: min(100px, 5.2083333333vw) min(100px, 5.2083333333vw) 0; } .l-main-img__copy img { max-width: 1500px; } } @media (width >= 768px ) and (max-height: 700px) { .l-main-img__copy { padding-top: 30px; } } @media (width >= 768px ) and (orientation: portrait) { .l-main-img__loop img { height: calc(0.7227722772 * var(--vh, 1vh) * 100); } } @media (min-width: 1921px) { .l-main-img__copy img { max-width: 78.125vw; } } /* .l-sub-img ================================================ */ .l-sub-img { padding-top: var(--mh--header--height); } .l-sub-img__inner { position: relative; } .l-sub-img__pic img { width: 100%; } .l-sub-img__txt { position: absolute; inset: 0; display: grid; align-items: center; max-width: var(--mh--contents--wide-width-with-padding); padding-inline: var(--mh--contents--padding--side); margin: auto; } .l-sub-img__head { font-size: var(--mh--font-size--x9l); font-weight: 700; color: var(--mh--color--grayscale-100); } .l-sub-img__head::before { display: block; width: 7px; aspect-ratio: 1; margin-bottom: -2px; content: ""; background-color: var(--mh--color--grayscale-100); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20fill%3D%22none%22%20viewBox%3D%220%200%207%207%22%3E%0A%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h3v3H0zm4%200h3v3H4zM0%204h3v3H0zm4%200h3v3H4z%22%2F%3E%0A%3C%2Fsvg%3E%0A") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20fill%3D%22none%22%20viewBox%3D%220%200%207%207%22%3E%0A%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h3v3H0zm4%200h3v3H4zM0%204h3v3H0zm4%200h3v3H4z%22%2F%3E%0A%3C%2Fsvg%3E%0A") no-repeat center/contain; } @media (width >= 768px ) { .l-sub-img__head { display: grid; grid-template-columns: 14px 1fr; gap: 12px; } .l-sub-img__head::before { width: 14px; margin-block: 16px 0; } } /* .l-sub-img.is-interview ================================================ */ .l-sub-img.is-interview .l-sub-img__inner { background: none; border-radius: 0; } .l-sub-img.is-interview .l-sub-img-interview-box { position: relative; z-index: 0; margin-inline: 10px; } .l-sub-img.is-interview .l-sub-img-interview-box .c-box01 { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-color: transparent; } .l-sub-img.is-interview .l-sub-img-interview-box .c-box01::before { border-color: var(--mh--color--grayscale-100); opacity: 0.3; } .l-sub-img.is-interview .l-sub-img-interview-box .c-box01__deco { opacity: 0.3; } .l-sub-img.is-interview .l-sub-img-interview-box .c-box01__deco.is-top, .l-sub-img.is-interview .l-sub-img-interview-box .c-box01__deco.is-bottom { background: repeating-linear-gradient(to right, var(--mh--color--grayscale-100) 0, var(--mh--color--grayscale-100) 2px, transparent 2px, transparent 6px); } .l-sub-img.is-interview .l-sub-img-interview-box .c-box01__deco.is-right, .l-sub-img.is-interview .l-sub-img-interview-box .c-box01__deco.is-left { background: repeating-linear-gradient(to bottom, var(--mh--color--grayscale-100) 0, var(--mh--color--grayscale-100) 2px, transparent 2px, transparent 6px); } .l-sub-img.is-interview .l-sub-img-interview-info { position: absolute; inset-inline: 0; bottom: 30px; width: calc(100% - 50px); margin-inline: auto; color: var(--mh--color--grayscale-100); } .l-sub-img.is-interview .l-sub-img-interview-info-in { display: flex; gap: 15px; align-items: center; margin-bottom: var(--mh--space--10-15); } .l-sub-img.is-interview .l-sub-img-interview-info-year { font-size: var(--mh--font-size--x2s); font-weight: 700; } .l-sub-img.is-interview .l-sub-img-interview-info-specialty { font-size: var(--mh--font-size--xs); font-weight: 700; } .l-sub-img.is-interview .l-sub-img-interview__profile { position: relative; max-width: 520px; padding-bottom: var(--mh--space--10-15); font-size: var(--mh--font-size--xs); border-bottom: 1px solid var(--mh--color--grayscale-100); } .l-sub-img.is-interview .l-sub-img-interview__profile::before, .l-sub-img.is-interview .l-sub-img-interview__profile::after { position: absolute; bottom: -2.5px; width: 5px; aspect-ratio: 1; content: ""; background-color: var(--mh--color--grayscale-100); border-radius: 100%; } .l-sub-img.is-interview .l-sub-img-interview__profile::before { left: 0; } .l-sub-img.is-interview .l-sub-img-interview__profile::after { right: 0; } .l-sub-img.is-interview .l-sub-img-interview__txt { margin-top: var(--mh--space--x3s); } .l-sub-img.is-interview .l-sub-img-interview__head { font-size: var(--mh--font-size--x4l); font-weight: 700; } .l-sub-img.is-interview .l-sub-img-interview__pic { position: relative; aspect-ratio: 355/520; overflow: hidden; border-radius: var(--mh--border-radius--md); } .l-sub-img.is-interview .l-sub-img-interview__pic::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(20deg, rgba(0, 46, 98, 0.55) 10.23%, rgba(0, 46, 98, 0.22) 48.41%, rgba(0, 46, 98, 0) 69.89%); } .l-sub-img.is-interview .l-sub-img-interview__pic img { width: 100%; height: 100%; object-fit: cover; } .l-sub-img.is-interview .l-sub-img-interview__cat { position: absolute; z-index: 1; top: 20px; right: 20px; display: grid; place-items: center; min-width: 50px; min-height: 50px; font-weight: 700; font-size: 1.2rem; border-radius: var(--mh--border-radius--sm); background: var(--mh--color--category-blue-100); } .l-sub-img.is-interview .l-sub-img-interview__cat:before { display: inline-block; width: 30px; aspect-ratio: 13/18; color: var(--mh--color--grayscale-100); content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; } .l-sub-img.is-interview .l-sub-img-interview__cat.is-oita { background: var(--mh--color--category-green-100); } @media (width >= 768px ) { .l-sub-img.is-interview { max-width: 1920px; margin-inline: auto; } .l-sub-img.is-interview .l-sub-img-interview-box { margin-inline: 0; } .l-sub-img.is-interview .l-sub-img-interview-box .c-box01 { height: 100%; } .l-sub-img.is-interview .l-sub-img-interview__head { font-size: var(--mh--font-size--x7l); } .l-sub-img.is-interview .l-sub-img-interview-info { inset: 0; display: grid; align-content: center; max-width: var(--mh--contents--wide-width-with-padding); padding-inline: var(--mh--contents--padding--side); margin: auto; } .l-sub-img.is-interview .l-sub-img-interview-info-in { width: fit-content; } .l-sub-img.is-interview .l-sub-img-interview-info-txt { padding-left: 15px; border-left: 1px solid var(--mh--color--grayscale-500); } .l-sub-img.is-interview .l-sub-img-interview-info-year { font-size: var(--mh--font-size--sm); } .l-sub-img.is-interview .l-sub-img-interview-info-specialty { font-size: var(--mh--font-size--lg); } .l-sub-img.is-interview .l-sub-img-interview__pic { height: 495px; aspect-ratio: auto; } .l-sub-img.is-interview .l-sub-img-interview__pic::before { min-width: 1200px; background: linear-gradient(83deg, rgba(0, 46, 98, 0.55) 23.37%, rgba(0, 46, 98, 0.22) 49.74%, rgba(0, 46, 98, 0) 61.01%); } .l-sub-img.is-interview .l-sub-img-interview__cat { top: 40px; right: 40px; min-width: 65px; min-height: 65px; font-size: var(--mh--font-size--sm); } } /* .l-sidebar ================================================== */ .js-c-anime-elem[data-anime=fadein-scale] { opacity: 0; transform: scale(0.5); transition: transform var(--mh--duration05) var(--mh--easing), opacity var(--mh--duration05) var(--mh--easing); } .js-c-anime-elem[data-anime=fadein-scale].is-animated { opacity: 1; transform: scale(1); } .js-c-anime-elem[data-anime=fadein-up] { opacity: 0; transform: translateY(30px); transition: transform var(--mh--duration05) var(--mh--easing), opacity var(--mh--duration05) var(--mh--easing); } .js-c-anime-elem[data-anime=fadein-up].is-animated { opacity: 1; transform: translateY(0); } .js-c-anime-elem[data-anime=fadein-left] { opacity: 0; transform: translateX(-30px); transition: transform var(--mh--duration) var(--mh--easing), opacity var(--mh--duration) var(--mh--easing); } .js-c-anime-elem[data-anime=fadein-left].is-animated { opacity: 1; transform: translateX(0); } .js-c-anime-elem[data-anime=fadein-right] { opacity: 0; transform: translateX(30px); transition: transform var(--mh--duration) var(--mh--easing), opacity var(--mh--duration) var(--mh--easing); } .js-c-anime-elem[data-anime=fadein-right].is-animated { opacity: 1; transform: translateX(0); } .js-c-anime-elem[data-anime-delay="0.1"] { transition-delay: 0.1s; } .js-c-anime-elem[data-anime-delay="0.2"] { transition-delay: 0.2s; } .js-c-anime-elem[data-anime-delay="0.3"] { transition-delay: 0.3s; } .js-c-anime-elem[data-anime-delay="0.4"] { transition-delay: 0.4s; } .js-c-anime-elem[data-anime-delay="0.5"] { transition-delay: 0.5s; } .js-c-anime-elem[data-anime-delay="0.6"] { transition-delay: 0.6s; } .js-c-anime-elem[data-anime-delay="0.7"] { transition-delay: 0.7s; } .js-c-anime-elem[data-anime-delay="0.8"] { transition-delay: 0.8s; } .js-c-anime-elem[data-anime-delay="0.9"] { transition-delay: 0.9s; } .js-c-anime-elem[data-anime-delay="1"] { transition-delay: 1s; } .js-c-anime-elem[data-anime-delay="1.1"] { transition-delay: 1.1s; } .js-c-anime-elem[data-anime-delay="1.2"] { transition-delay: 1.2s; } .js-c-anime-elem[data-anime-delay="1.3"] { transition-delay: 1.3s; } .js-c-anime-elem[data-anime-delay="1.4"] { transition-delay: 1.4s; } .js-c-anime-elem[data-anime-delay="1.5"] { transition-delay: 1.5s; } .js-c-anime-elem[data-anime-delay="1.6"] { transition-delay: 1.6s; } .js-c-anime-elem[data-anime-delay="1.7"] { transition-delay: 1.7s; } .js-c-anime-elem[data-anime-delay="1.8"] { transition-delay: 1.8s; } .js-c-anime-elem[data-anime-delay="1.9"] { transition-delay: 1.9s; } .js-c-anime-elem[data-anime-delay="2"] { transition-delay: 2s; } /* js-c-modal01 =============================== */ html:has(.js-c-modal01.is-open) { overflow: hidden; } .js-c-modal01 { display: none; } .js-c-modal01.is-open { display: block; } .js-c-switch-tab { cursor: pointer; } .js-c-switch-content { display: none; } .js-c-switch-content.is-active { display: block; } .js-c-toggle-trigger { cursor: pointer; } .js-c-toggle-content { display: none; } /* .js-header ==================================== */ .js-header.is-set { position: fixed; top: 0; left: 0; transform: translateY(calc(var(--mh--header--height) * -1)); } .js-header.is-set.is-show { transform: translateY(0); transition: transform var(--mh--duration) var(--mh--easing); } /* .error-page404 ================================================ */ .error-page404__inner { padding-top: 50px; padding-bottom: 50px; } @media (width >= 768px ) { .error-page404__inner { padding-top: 100px; padding-bottom: 100px; } } /* home-intro ====================================== */ .home-intro__inner { display: grid; grid-auto-columns: 100%; gap: 30px 80px; padding-bottom: var(--mh--space--xl); } .home-intro__txt { line-height: var(--mh--line-height--lg); } .home-intro__txt + .home-intro__txt { margin-top: 15px; } .home-intro__img img { width: 100%; } @media (width >= 768px ) { .home-intro__inner { grid-template-columns: 40.7142857143% 1fr; align-items: center; } .home-intro__txt { font-size: var(--mh--font-size--lg); } } /* home-message ====================================== */ .home-message { border-radius: 0 0 var(--mh--border-radius--lg) var(--mh--border-radius--lg); } .home-message__inner { padding-block: var(--mh--space--sm) var(--mh--space--md); } .home-message__box { padding: 0 30px 40px; } .home-message__img { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 9px; transform: translateY(-30px); margin-bottom: -10px; padding: 0 10px; } .home-message__img img { width: 100%; border-radius: var(--mh--border-radius--md); } .home-message__img img:nth-child(2) { margin-top: 9px; } @media (width >= 768px ) { .home-message { border-radius: 0; } .home-message__box { display: grid; grid-template-columns: 1fr 51.6129032258%; gap: 0 min(80px, 6.4516129032%); padding: 80px 80px 75px; } .home-message__img { gap: 0 20px; transform: translateY(-140px); margin-bottom: -160px; padding: 0; } .home-message__img img:nth-child(2) { margin-top: 20px; } } /* home-about ====================================== */ .home-about { position: relative; z-index: 1; padding-block: var(--mh--space--lg); background: var(--mh--gradient01); } .home-about:before, .home-about:after { display: inline-block; width: 295px; aspect-ratio: 295/100; color: var(--mh--color--grayscale-100); content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); position: absolute; z-index: -1; opacity: 0.4; } .home-about:before { top: 10px; right: 10px; } .home-about:after { bottom: 10px; left: 10px; transform: scale(-1, -1); } .home-about__head { max-width: calc(100% - 40px); margin: 0 auto var(--mh--space--20-30); } @media (width >= 768px ) { .home-about:before, .home-about:after { width: 800px; } .home-about:before { top: 30px; right: 30px; } .home-about:after { bottom: 30px; left: 30px; } .home-about__head { width: calc(100% - 100px); max-width: 1400px; } } /* home-about-slider ----------------------------------- */ .home-about-slider .splide__track { overflow: visible; } .home-about-slider__item { display: grid; grid-auto-columns: 100%; gap: 10px; width: 68vw; text-align: center; } .home-about-slider__card { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; padding: 20px 20px; background: var(--mh--color--grayscale-100); border: none; border-radius: var(--mh--border-radius--md); box-shadow: 0 0 15px 0 rgba(51, 51, 51, 0.2); } .home-about-slider__card:before, .home-about-slider__card:after { content: ""; position: absolute; z-index: -1; width: 40px; aspect-ratio: 1; background: url(../img/home/bg_about01.png) no-repeat 0 0/contain; } .home-about-slider__card:before { top: 10px; right: 10px; } .home-about-slider__card:after { bottom: 10px; left: 10px; transform: scale(-1, -1); } .home-about-slider__txt { font-weight: 700; font-size: var(--mh--font-size--lg); } .home-about-slider__txt.is-adj { margin-inline: -15px; } .home-about-slider__ico { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; background: var(--mh--color--primary-500); border: 2px solid var(--mh--color--primary-500); border-radius: var(--mh--border-radius--sm); transition: background-color var(--mh--duration) var(--mh--easing); } .home-about-slider__ico:before, .home-about-slider__ico:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 3px; background: #fff; border-radius: 6px; transition: background-color var(--mh--duration) var(--mh--easing); } .home-about-slider__ico:after { transform: translate(-50%, -50%) rotate(90deg); } .home-about-slider__area-copy { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; min-height: 255px; padding: 20px; border-radius: var(--mh--border-radius--sm); overflow: hidden; } .home-about-slider__area-copy img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; } .home-about-slider__copy { color: #fff; font-size: var(--mh--font-size--x4l); } @media (width >= 768px ) { .home-about-slider__item { width: 320px; } .home-about-slider__item.is-copy { width: 500px; } .home-about-slider__card { padding: 55px 30px; } .home-about-slider__card:before, .home-about-slider__card:after { width: 80px; } .home-about-slider__card:before { top: 15px; right: 15px; } .home-about-slider__card:after { left: 15px; bottom: 15px; } .home-about-slider__txt { font-size: var(--mh--font-size--xl); } .home-about-slider__ico { right: 15px; bottom: 15px; width: 36px; height: 36px; } .home-about-slider__area-copy { min-height: 500px; } .home-about-slider__copy { font-size: var(--mh--font-size--x5l); } } @media (min-width: 1921px) { .home-about-slider__con { width: 16.6666666667vw; } } @media (hover: hover) and (pointer: fine) { .home-about-slider__card { transition: all var(--mh--duration) var(--mh--easing); } .home-about-slider__card:hover { box-shadow: 0 0 5px 0 rgba(51, 51, 51, 0.4); background: var(--mh--color--primary-100); } .home-about-slider__card:hover .home-about-slider__ico { background: transparent; } .home-about-slider__card:hover .home-about-slider__ico:before, .home-about-slider__card:hover .home-about-slider__ico:after { background: var(--mh--color--primary-500); } } /* home-about-modal-list ------------------------------------ */ .home-about-modal-list { display: grid; grid-auto-columns: 100%; gap: 5px; } .home-about-modal-list__item { display: grid; grid-template-columns: 85px 1fr; gap: 20px; padding: 20px; background: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--md); } .home-about-modal-list__txts { display: grid; grid-auto-columns: 100%; align-items: center; gap: 5px 15px; text-align: center; } .home-about-modal-list__head { padding: 5px 10px; font-weight: 700; color: var(--mh--color--primary-500); background: #fff; border-radius: var(--mh--border-radius--sm); } .home-about-modal-list__num { font-size: var(--mh--font-size--x9l); } .home-about-modal-list__num span.is-suffix { margin-left: 5px; font-size: var(--mh--font-size--x3l); } @media (width >= 768px ) { .home-about-modal-list { grid-template-columns: repeat(3, 1fr); } .home-about-modal-list__item { grid-template-columns: 1fr; justify-items: center; padding: 30px 20px; } .home-about-modal-list__img { max-width: 170px; } .home-about-modal-list__txts { grid-template-columns: 136px 1fr; } .home-about-modal-list__head { padding: 10px; font-size: var(--mh--font-size--x2l); } } /* home-about-modal-list02 ------------------------------------ */ .home-about-modal-list02 { display: grid; grid-auto-columns: 100%; gap: var(--mh--space--x5s); } .home-about-modal-list02__item { display: grid; grid-template-columns: 23.6% auto; gap: 10px; padding: var(--mh--space--20-30); background: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--md); } .home-about-modal-list02__txts { text-align: left; } .home-about-modal-list02__lead { font-weight: 700; } @media (width >= 768px ) { .home-about-modal-list02 { grid-template-columns: repeat(3, 1fr); } .home-about-modal-list02__item { display: block; } .home-about-modal-list02__img { max-width: 150px; margin-inline: auto; } .home-about-modal-list02__txts { margin-top: 15px; } } /* home-about-modal-list03 ------------------------------------ */ .home-about-modal-list03 { display: grid; grid-auto-columns: 100%; gap: var(--mh--space--x5s); } .home-about-modal-list03__item { display: grid; grid-template-columns: auto 13.6%; gap: 10px; } .home-about-modal-list03__txts { position: relative; text-align: left; background: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--md); padding: var(--mh--space--20-30); } .home-about-modal-list03__txts::after { content: ""; position: absolute; margin: 0; top: 15px; right: -7px; width: 0; height: 0; border-top: 10px solid var(--mh--color--primary-100); border-left: 5px solid transparent; border-right: 5px solid transparent; transform: rotate(-70deg); } .home-about-modal-list03__lead { font-weight: 700; } @media (width >= 768px ) { .home-about-modal-list03 { grid-template-columns: repeat(3, 1fr); } .home-about-modal-list03__item { display: flex; flex-direction: column; } .home-about-modal-list03__img { max-width: 90px; margin-inline: auto; } .home-about-modal-list03__txts { flex-grow: 1; } .home-about-modal-list03__txts::after { top: auto; right: auto; left: 75px; bottom: -20px; border-top-width: 40px; border-left-width: 20px; border-right-width: 20px; transform: rotate(-25deg); } } /* home-about-modal-set ----------------------------------- */ .home-about-modal-set { display: grid; grid-auto-columns: 100%; gap: 20px 0; padding: 20px; background: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--md); } .home-about-modal-set__txt { font-weight: 700; font-size: var(--mh--font-size--x2l); } .home-about-modal-set__txt span.is-num { display: inline-block; margin-top: 4px; color: var(--mh--color--primary-500); font-size: var(--mh--font-size--x12l); } .home-about-modal-set__txt span.is-suffix { margin-inline: 5px; font-size: var(--mh--font-size--x3l); } .home-about-modal-set__txt.is-mb { margin-bottom: 5px; } .home-about-modal-set__img img { width: 100%; } @media (width < 768px) { .home-about-modal-set__txt-min { display: inline-block; font-size: var(--mh--font-size--md); margin-right: -20px; } .home-about-modal-set__money { font-size: var(--mh--font-size--x9l) !important; } } @media (width >= 768px ) { .home-about-modal-set { grid-template-columns: 51.2820512821% 1fr; align-items: center; padding: 40px 50px; } .home-about-modal-set__txt span.is-num { margin-top: 10px; } } /* home-semiconductor ================================ */ .home-semiconductor__inner { padding-block: var(--mh--space--xl); } @media (width >= 768px ) { .home-semiconductor__inner { display: grid; grid-template-columns: 370px 1fr; grid-template-areas: "head list" "ui list"; gap: 0 min(105px, 7.5%); } .home-semiconductor__head { grid-area: head; } .home-semiconductor .splide__track { grid-area: list; } .home-semiconductor__ui { grid-area: ui; align-self: end; } } /* home-semiconductor-list ------------------------------------ */ .home-semiconductor-list__item { position: relative; align-self: start; padding: 20px 72px 20px 75px; background: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--lg); } .home-semiconductor-list__item.is-visible .home-semiconductor-list__txt { opacity: 1; transform: translateY(0); } .home-semiconductor-list__num { position: absolute; top: 10px; right: 10px; color: var(--mh--color--primary-300); font-size: var(--mh--font-size--x8l); } .home-semiconductor-list__txts { position: relative; } .home-semiconductor-list__txts.is-head img { right: calc(100% + 15px); } .home-semiconductor-list__txts.is-head .home-semiconductor-list__txt:before { right: calc(100% - 1px); clip-path: polygon(0 50%, 100% 0, 100% 100%); } .home-semiconductor-list__txts.is-answer { margin-top: var(--mh--space--x4s); } .home-semiconductor-list__txts.is-answer img { left: calc(100% + 12px); } .home-semiconductor-list__txts.is-answer .home-semiconductor-list__txt { transition-delay: 0.1s; } .home-semiconductor-list__txts.is-answer .home-semiconductor-list__txt:before { left: calc(100% - 1px); clip-path: polygon(100% 50%, 0 0, 0 100%); } .home-semiconductor-list__txts img { position: absolute; top: 6px; width: 40px; height: 42px; } .home-semiconductor-list__txt { position: relative; display: grid; grid-auto-columns: 100%; align-items: center; min-height: 76px; padding: 15px; font-weight: 700; font-size: var(--mh--font-size--sm); background: #fff; border-radius: var(--mh--border-radius--md); opacity: 0; transform: translateY(30px); transition: all var(--mh--duration) var(--mh--easing); } .home-semiconductor-list__txt:before { content: ""; position: absolute; top: 22px; width: 10px; height: 10px; background: #fff; } @media (width >= 768px ) { .home-semiconductor-list__item { padding: 60px 188px 50px; } .home-semiconductor-list__num { top: 30px; right: 30px; } .home-semiconductor-list__txts.is-head img { right: calc(100% + 35px); } .home-semiconductor-list__txts.is-answer img { left: calc(100% + 35px); } .home-semiconductor-list__txts img { top: 50%; transform: translateY(-50%); width: 103px; height: 109px; } .home-semiconductor-list__txt { min-height: 90px; padding: 30px; font-size: var(--mh--font-size--xl); } .home-semiconductor-list__txt:before { top: 50%; transform: translateY(-50%); width: 20px; height: 20px; } } /* home-work ============================== */ .home-work__inner { padding-block: var(--mh--space--xl) 70px; } .home-work__box { padding: var(--mh--space--20-60); background: #fff; border-radius: var(--mh--border-radius--lg); } @media (width < 768px) { .home-work-modal__btn { display: block; position: absolute; z-index: 1; border: none !important; outline: none !important; } .home-work-modal__btn.is-work01 { top: 31%; left: 12%; width: 23%; height: 13%; } .home-work-modal__btn.is-work02 { top: 31%; left: 36%; width: 28%; height: 13%; } .home-work-modal__btn.is-work03 { top: 29%; left: 65%; width: 23%; height: 13%; } .home-work-modal__btn.is-work04 { top: 49.5%; left: 12%; width: 23%; height: 13%; } .home-work-modal__btn.is-work05 { top: 47.5%; left: 65%; width: 23%; height: 13%; } .home-work-modal-set__img img { margin-inline: auto; } .home-work-modal-set__txt { margin-top: 5px; text-align: center; font-weight: 700; } } @media (width >= 768px ) { .home-work__inner { padding-bottom: 120px; } } /* home-work-process ------------------------------------ */ .home-work-process__txt { margin-bottom: 15px; } .home-work-process__img { position: relative; width: 100%; } .home-work-process__img img { width: 100%; } @media (width >= 768px ) { .home-work-process__txt { margin-bottom: 25px; } } /* home-work-product --------------------------------------- */ .home-work-product { margin-top: 10px; } .home-work-product__head { position: relative; width: fit-content; min-width: 295px; margin: 0 auto 40px; padding-inline: 20px; font-weight: 700; font-size: var(--mh--font-size--xl); text-align: center; } .home-work-product__head:before, .home-work-product__head:after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); } .home-work-product__head:before { top: calc(100% + 15px); width: 1px; height: 15px; background: var(--mh--color--grayscale-500); } .home-work-product__head:after { top: calc(100% + 15px + 10px); width: 5px; height: 5px; background: var(--mh--color--grayscale-500); border-radius: 50%; } .home-work-product__head span.is-deco { position: absolute; bottom: -15px; left: 0; width: 100%; height: calc(50% + 15px - 5px); border: 1px solid var(--mh--color--grayscale-500); border-top: 0; } .home-work-product__head span.is-deco:before, .home-work-product__head span.is-deco:after { content: ""; position: absolute; bottom: 100%; width: 5px; height: 5px; background: var(--mh--color--grayscale-500); border-radius: 50%; } .home-work-product__head span.is-deco:before { left: -3px; } .home-work-product__head span.is-deco:after { right: -3px; } @media (width >= 768px ) { .home-work-product__head { margin-bottom: 50px; padding-inline: 30px; font-size: var(--mh--font-size--x4l); } .home-work-product__head span.is-deco { height: calc(50% + 15px); } } /* home-work-product-imgs --------------------------------- */ .home-work-product-imgs__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 20px; margin-bottom: -10.6666666667vw; } .home-work-product-imgs__list-item { position: relative; display: grid; grid-template-columns: 35px 1fr; gap: 0 5px; align-items: center; width: 100%; min-height: 60px; padding: 5px; font-weight: 700; font-size: var(--mh--font-size--x3s); border-radius: var(--mh--border-radius--sm); } .home-work-product-imgs__list-item:after { content: ""; position: absolute; top: calc(100% - 1px); width: 8px; height: 8px; } .home-work-product-imgs__list-item:nth-child(odd):after { right: 15px; clip-path: polygon(0 0, 100% 0, 100% 100%); } .home-work-product-imgs__list-item:nth-child(even):after { left: 15px; clip-path: polygon(0 0, 100% 0, 0 100%); } .home-work-product-imgs__list-item:nth-child(1) { background: var(--mh--color--primary-200); } .home-work-product-imgs__list-item:nth-child(1):after { background: var(--mh--color--primary-200); } .home-work-product-imgs__list-item:nth-child(2) { background: var(--mh--color--category-blue-100); } .home-work-product-imgs__list-item:nth-child(2):after { background: var(--mh--color--category-blue-100); } .home-work-product-imgs__list-item:nth-child(3) { background: var(--mh--color--category-red-100); } .home-work-product-imgs__list-item:nth-child(3):after { background: var(--mh--color--category-red-100); } .home-work-product-imgs__list-item:nth-child(4) { background: var(--mh--color--category-green-100); } .home-work-product-imgs__list-item:nth-child(4):after { background: var(--mh--color--category-green-100); } .home-work-product-imgs__img img { width: 100%; } @media (width < 768px) { .home-work-product-imgs__list-item { max-width: 200px; } .home-work-product-imgs__list-item:nth-child(odd) { justify-self: end; } .home-work-product-imgs__list-item:nth-child(1) { margin: 0 -6px 0 6px; } .home-work-product-imgs__list-item:nth-child(2) { width: 100%; padding-right: 0; margin: 0 6px 0 -6px; } } @media (width >= 768px ) { .home-work-product-imgs { display: grid; align-items: start; } .home-work-product-imgs__list { grid-area: 1/1/2/2; grid-template-columns: repeat(8, 1fr); align-items: start; gap: 30px 0; margin: 0; } .home-work-product-imgs__list-item { grid-template-columns: 75px 1fr; gap: 0 15px; min-height: 105px; padding: 15px; font-size: var(--mh--font-size--xl); } .home-work-product-imgs__list-item:after { width: 16px; height: 16px; } .home-work-product-imgs__list-item:nth-child(odd):after { right: 40px; } .home-work-product-imgs__list-item:nth-child(even):after { left: 40px; } .home-work-product-imgs__list-item:nth-child(1) { grid-row: 1/2; grid-column: 2/4; } .home-work-product-imgs__list-item:nth-child(2) { grid-row: 1/2; grid-column: 6/9; width: 75%; max-width: 320px; } .home-work-product-imgs__list-item:nth-child(3) { grid-row: 2/3; grid-column: 1/3; } .home-work-product-imgs__list-item:nth-child(4) { grid-row: 2/3; grid-column: 7/9; } .home-work-product-imgs__img { grid-area: 1/1/2/2; width: 50%; max-width: 640px; margin-inline: auto; } } /* home-location ================================= */ .home-location { padding-bottom: var(--mh--space--md); margin-top: -10px; } .home-location__box { position: relative; border-radius: var(--mh--border-radius--lg); background: var(--mh--gradient01); } .home-location__box:before { display: inline-block; width: 295px; aspect-ratio: 295/100; color: var(--mh--color--grayscale-100); content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); position: absolute; top: 10px; right: 10px; z-index: -1; opacity: 0.4; } .home-location__inner { display: grid; grid-auto-columns: 100%; gap: 50px; padding-block: 50px 20px; } .home-location__area-head { color: #fff; } .home-location__map { margin-top: var(--mh--space--sm); width: 100%; } .home-location__map img { width: 100%; border-radius: var(--mh--border-radius--md); } .home-location__con { padding: 20px; background: var(--mh--color--grayscale-100); border-radius: 0 0 var(--mh--border-radius--md) var(--mh--border-radius--md); } @media (width >= 768px ) { .home-location { margin: 0; } .home-location__box { max-width: calc(100% - 100px); margin-inline: auto; } .home-location__box:before { top: 30px; right: 30px; width: 801px; } .home-location__inner { display: grid; grid-template-columns: 26.4285714286% 1fr; gap: 0 7.5%; padding-block: 100px; } .home-location__con { padding: 30px 40px 40px; } } /* home-location-tab ---------------------------- */ .home-location-tab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 5px; } .home-location-tab__button { display: flex; flex-direction: column; gap: 5px 8px; justify-content: center; align-items: center; padding: 10px; color: var(--mh--color--primary-100); font-weight: 700; font-size: var(--mh--font-size--x2s); border: none; border-radius: var(--mh--border-radius--sm) var(--mh--border-radius--sm) 0 0; background: var(--mh--color--primary-500); } .home-location-tab__button:before { display: inline-block; width: 13px; aspect-ratio: 13/18; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } .home-location-tab__button.is-active { color: var(--mh--color--grayscale-900); background: var(--mh--color--grayscale-100); } .home-location-tab__button.is-active:before { color: var(--mh--color--primary-500); } @media (width >= 768px ) { .home-location-tab { gap: 0 9px; } .home-location-tab__button { flex-direction: row; justify-content: flex-start; padding: 20px; font-size: var(--mh--font-size--x2l); font-size: clamp(1.8rem, 0.4340277778vw + 1.4666666667rem, 2.3rem); } .home-location-tab__button:before { width: 26px; min-width: 26px; } } @media (hover: hover) and (pointer: fine) { .home-location-tab__button { transition: all var(--mh--duration) var(--mh--easing); } .home-location-tab__button:hover { color: var(--mh--color--grayscale-900); background: var(--mh--color--primary-300); } .home-location-tab__button:hover:before { color: var(--mh--color--primary-500); } } /* home-location-sec ------------------------------------ */ .home-location-sec__btn { display: grid; place-items: center; min-height: 50px; padding: 10px 20px; color: #fff; font-weight: 700; border-radius: 9999px; background: var(--mh--color--primary-500); } .home-location-sec__btn-ico::after { margin-left: var(--mh--space--x5s); } /* home-location-sec-set ------------------------------------ */ .home-location-sec-set { display: grid; grid-auto-columns: 100%; gap: 10px; margin-top: var(--mh--space--x3s); } .home-location-sec-set__sec { padding: var(--mh--space--20-30); border-radius: var(--mh--border-radius--sm); background: var(--mh--color--primary-100); } .home-location-sec-set__img img { width: 100%; border-radius: var(--mh--border-radius--sm); } .home-location-sec-set__txt { margin-top: 5px; line-height: var(--mh--line-height--lg); font-size: var(--mh--font-size--xs); } .home-location-sec-set__list { display: grid; grid-auto-columns: 100%; gap: var(--mh--space--10-15); } .home-location-sec-set__list-item { display: grid; grid-template-columns: minmax(24px, auto) 1fr; gap: 0 5px; padding-bottom: 9px; font-weight: 700; border-bottom: 1px solid var(--mh--color--grayscale-500); } .home-location-sec-set__list-item span.is-num { display: grid; place-items: center; min-height: 24px; padding-top: 1px; line-height: 1; color: #fff; font-size: var(--mh--font-size--xs); background: var(--mh--color--primary-500); border-radius: 50%; } @media (width >= 768px ) { .home-location-sec-set { display: grid; grid-template-columns: repeat(2, 1fr); } .home-location-sec-set__list-item { grid-template-columns: minmax(26px, auto) 1fr; padding-bottom: 15px; } .home-location-sec-set__list-item span.is-num { min-height: 26px; padding-top: 2px; } } /* home-location-sec-detail ------------------------------------ */ .home-location-sec-detail { margin-top: var(--mh--space--20-30); } .home-location-sec-detail__list { display: grid; grid-auto-columns: 100%; gap: 5px 15px; } .home-location-sec-detail__list-item { display: grid; grid-template-columns: 45px 1fr; gap: 0 10px; align-items: center; padding: 14px; font-weight: 700; border: 1px solid var(--mh--color--grayscale-500); border-radius: var(--mh--border-radius--sm); } @media (width >= 768px ) { .home-location-sec-detail__list { grid-template-columns: repeat(3, 1fr); } } /* home-interview =============================== */ .home-interview__inner { padding-block: var(--mh--space--xl); } @media (width < 768px) { .home-interview__slider { margin-inline: -20px; } .home-interview__slider .c-card-interview01__cat { min-width: 50px; min-height: 50px; } .home-interview__slider .c-card-interview01__bottom { margin-top: 10px; padding-top: 10px; } } @media (width >= 768px ) { .home-interview__box { display: grid; grid-template-columns: 370px calc(100% - 370px - min(105px, 5.46875vw)); grid-template-areas: "head slider" "ui slider"; gap: 0 min(105px, 5.46875vw); margin-right: calc(-1 * var(--mh--contents--padding--side)); } .home-interview__head { grid-area: head; } .home-interview__slider { grid-area: slider; } .home-interview__ui { grid-area: ui; align-self: end; } } @media (width >= 1280px ) { .home-interview__box { margin-right: calc(50% - 50vw) !important; } } /* interview-detail ====================================== */ .interview-detail { margin-top: 50px; } .interview-detail-head { margin-bottom: var(--mh--space--20-30); } /* interview-profile ====================================== */ .interview-profile__box { position: relative; padding: var(--mh--space--30-40) var(--mh--space--20-50); background-color: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--md); } .interview-profile__box::before, .interview-profile__box::after { position: absolute; width: 40px; aspect-ratio: 1; content: ""; background: url("../img/interview/bg_profile01.svg") no-repeat center/contain; } .interview-profile__box::before { top: 10px; right: 10px; } .interview-profile__box::after { bottom: 10px; left: 10px; transform: rotate(180deg); } .interview-profile__box-ttl { padding-bottom: var(--mh--space--10-10); font-size: var(--mh--font-size--x4l); color: var(--mh--color--primary-500); text-align: center; border-bottom: 1px solid var(--mh--color--primary-500); } .interview-profile__box-in { position: relative; z-index: 1; margin-top: var(--mh--space--xs); } .interview-profile__box-lead { line-height: var(--mh--line-height--lg); } @media (width >= 768px ) { .interview-profile__box::before, .interview-profile__box::after { width: 80px; } .interview-profile__box::before { top: 15px; right: 15px; } .interview-profile__box::after { bottom: 15px; left: 15px; } } /* interview-schedule ====================================== */ .interview-schedule__list { position: relative; display: grid; gap: 24px; } .interview-schedule__list-item { position: relative; display: grid; align-items: center; grid-template-columns: 15.4% 48px auto; gap: var(--mh--space--x3s); } .interview-schedule__list-item-ico { padding: 8px; background-image: url(./../img/interview/img_schedule_ico_base.svg); background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100%; } .interview-schedule__list-item-ico img { width: 100%; } .interview-schedule__list-item:not(:last-of-type)::after { display: inline-block; width: 5px; aspect-ratio: 8/18; color: var(--mh--color--grayscale-500); content: ""; background-color: currentcolor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22none%22%20viewBox%3D%220%200%206%2012%22%3E%0A%3Cpath%20fill%3D%22%23B3B3B3%22%20d%3D%22M.012%2011.088V.899C.012.408.419%200%20.91%200c.492%200%20.899.408.899.899v8.067l2.168-2.11a.893.893%200%200%201%201.27.024.894.894%200%200%201-.024%201.27L1.52%2011.748a.887.887%200%200%201-.97.18A.9.9%200%200%201%200%2011.1l.012-.012Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22none%22%20viewBox%3D%220%200%206%2012%22%3E%0A%3Cpath%20fill%3D%22%23B3B3B3%22%20d%3D%22M.012%2011.088V.899C.012.408.419%200%20.91%200c.492%200%20.899.408.899.899v8.067l2.168-2.11a.893.893%200%200%201%201.27.024.894.894%200%200%201-.024%201.27L1.52%2011.748a.887.887%200%200%201-.97.18A.9.9%200%200%201%200%2011.1l.012-.012Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: all var(--mh--duration) var(--mh--easing); position: absolute; left: 7%; bottom: -17px; } .interview-schedule__list-outer { margin-top: var(--mh--space--xs); position: relative; } .interview-schedule__list-outer::before { content: ""; display: block; width: 100%; height: 100%; background-image: url(./../img/interview/img_schedule_head_sp.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; aspect-ratio: 67/13; } .interview-schedule__list-in { display: grid; gap: 24px; padding: var(--mh--space--xs); border-width: 0px 1px 1px 1px; border-style: solid; border-color: var(--mh--color--grayscale-500); border-radius: 0 0 var(--mh--border-radius--md) var(--mh--border-radius--md); } .interview-schedule__list-time { color: var(--mh--color--primary-500); } .interview-schedule__list-detail { font-weight: 700; } .interview-schedule__note { margin-top: 15px; padding: var(--mh--space--10-10) 20px; background-color: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--sm); } .interview-schedule__note-txt { display: grid; grid-template-columns: 42px auto; gap: 15px; align-items: center; position: relative; font-size: var(--mh--font-size--xl); font-weight: 700; min-height: 42px; } .interview-schedule__note-txt::before { content: ""; background-image: url(./../img/interview/ico_timer.svg); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0; width: 42px; aspect-ratio: 1/1; } @media (width < 768px) { .interview-schedule__list:has(+ .interview-schedule__list)::after { display: inline-block; width: 5px; aspect-ratio: 8/18; color: var(--mh--color--grayscale-500); content: ""; background-color: currentcolor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22none%22%20viewBox%3D%220%200%206%2012%22%3E%0A%3Cpath%20fill%3D%22%23B3B3B3%22%20d%3D%22M.012%2011.088V.899C.012.408.419%200%20.91%200c.492%200%20.899.408.899.899v8.067l2.168-2.11a.893.893%200%200%201%201.27.024.894.894%200%200%201-.024%201.27L1.52%2011.748a.887.887%200%200%201-.97.18A.9.9%200%200%201%200%2011.1l.012-.012Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22none%22%20viewBox%3D%220%200%206%2012%22%3E%0A%3Cpath%20fill%3D%22%23B3B3B3%22%20d%3D%22M.012%2011.088V.899C.012.408.419%200%20.91%200c.492%200%20.899.408.899.899v8.067l2.168-2.11a.893.893%200%200%201%201.27.024.894.894%200%200%201-.024%201.27L1.52%2011.748a.887.887%200%200%201-.97.18A.9.9%200%200%201%200%2011.1l.012-.012Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: all var(--mh--duration) var(--mh--easing); position: absolute; left: 7%; bottom: -17px; } } @media (width >= 768px ) { .interview-schedule__list { gap: 38px; } .interview-schedule__list-outer::before { background-image: url(./../img/interview/img_schedule_head_pc.png); aspect-ratio: 11/1; } .interview-schedule__list-in { align-items: flex-start; gap: 38px; grid-template-columns: repeat(2, 1fr); } .interview-schedule__list-item { grid-template-columns: 16.4% 58px auto; } .interview-schedule__list-item:not(:last-of-type)::after { display: inline-block; width: 8px; aspect-ratio: 8/18; color: var(--mh--color--grayscale-500); content: ""; background-color: currentcolor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22none%22%20viewBox%3D%220%200%206%2012%22%3E%0A%3Cpath%20fill%3D%22%23B3B3B3%22%20d%3D%22M.012%2011.088V.899C.012.408.419%200%20.91%200c.492%200%20.899.408.899.899v8.067l2.168-2.11a.893.893%200%200%201%201.27.024.894.894%200%200%201-.024%201.27L1.52%2011.748a.887.887%200%200%201-.97.18A.9.9%200%200%201%200%2011.1l.012-.012Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2212%22%20fill%3D%22none%22%20viewBox%3D%220%200%206%2012%22%3E%0A%3Cpath%20fill%3D%22%23B3B3B3%22%20d%3D%22M.012%2011.088V.899C.012.408.419%200%20.91%200c.492%200%20.899.408.899.899v8.067l2.168-2.11a.893.893%200%200%201%201.27.024.894.894%200%200%201-.024%201.27L1.52%2011.748a.887.887%200%200%201-.97.18A.9.9%200%200%201%200%2011.1l.012-.012Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: all var(--mh--duration) var(--mh--easing); left: 7.5%; bottom: -27px; } .interview-schedule__list-item-ico { padding: 14px; } .interview-schedule__list-time { font-size: var(--mh--font-size--xl); } .interview-schedule__list-detail { margin-right: -10px; font-size: var(--mh--font-size--xl); } .interview-schedule__note-txt { justify-content: center; } } /* interview-holiday ====================================== */ .interview-holiday__box { padding: 0 20px 30px; position: relative; z-index: 0; margin-top: var(--mh--space--xs); display: grid; gap: var(--mh--space--20-60); } .interview-holiday__box-img img { width: 100%; border-radius: var(--mh--border-radius--md); margin-inline: auto; } .interview-holiday__box-txt-head { font-size: var(--mh--font-size--x3l); font-weight: 700; } .interview-holiday__box-txt-lead { margin-top: 10px; line-height: var(--mh--line-height--lg); } .interview-holiday__box::after { content: ""; display: block; height: calc(100% - 127px); width: 100%; position: absolute; bottom: 0; left: 0; z-index: -1; background-color: var(--mh--color--grayscale-200); border-radius: var(--mh--border-radius--md); } @media (width >= 768px ) { .interview-holiday__box { padding-block: 45px; padding-inline: 0; align-items: center; grid-template-columns: 35.9% auto; } .interview-holiday__box-txt { padding-right: 100px; } .interview-holiday__box-txt-lead { margin-top: 25px; } .interview-holiday__box::after { height: 100%; width: 69.1%; left: auto; right: 0; } } /* interview-employees ====================================== */ .interview-employees { border-top: 1px solid var(--mh--color--grayscale-500); } .interview-employees__btn { margin-top: var(--mh--space--xs); } .interview-employees__btn-link { max-width: 295px; font-weight: 700; margin-inline: auto; display: flex; align-items: center; justify-content: center; height: 50px; color: var(--mh--color--grayscale-100); background-color: var(--mh--color--primary-500); border-radius: 9999px; } @media (width >= 768px ) { .interview-employees__btn-link { max-width: 320px; } } @media (hover: hover) and (pointer: fine) { .interview-employees__btn-link { transition: background-color var(--mh--duration) var(--mh--easing); } .interview-employees__btn-link:hover { background-color: var(--mh--color--primary-600); } } /* message-box ====================================== */ .message-box__head-ttl { padding: var(--mh--space--10-15) var(--mh--space--x3s); font-size: var(--mh--font-size--x5l); background-color: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--sm); font-weight: 700; } .message-box__body { margin-top: var(--mh--space--30-40); } .message-box__body-img { grid-area: img; position: relative; } .message-box__body-img img { display: block; margin-inline: auto; width: calc(100% - 50px); border-radius: var(--mh--border-radius--sm); } .message-box__body-profile { position: relative; z-index: 1; max-width: 250px; margin-top: -35px; margin-left: auto; padding: 15px 10px; background-color: var(--mh--color--primary-500); border-radius: var(--mh--border-radius--md); } .message-box__body-profile-post { color: var(--mh--color--grayscale-100); font-size: var(--mh--font-size--sm); } .message-box__body-profile-name { margin-top: 5px; color: var(--mh--color--grayscale-100); font-size: var(--mh--font-size--xl); } .message-box__body-txt { grid-area: txt; margin-top: 20px; } .message-box__body-ttl { background: var(--mh--gradient01); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: var(--mh--font-size--x4l); } .message-box__body-lead { margin-top: var(--mh--space--x2s); line-height: var(--mh--line-height--lg); } .message-box + .message-box { margin-top: var(--mh--space--xl); } @media (width >= 768px ) { .message-box__body { display: grid; gap: 80px; grid-template-areas: "txt img"; grid-template-columns: auto 46.4%; } .message-box__body-img img { width: calc(100% - 94px); } .message-box__body-profile { margin-top: -38px; } .message-box__body-txt { margin-top: 0; } } /* requirements-contents ====================================== */ .requirements-contents { margin-top: 20px; } .requirements-contents-sec-in { background-color: var(--mh--color--grayscale-100); padding-block: var(--mh--space--40-120); border-radius: var(--mh--border-radius--lg); } .requirements-contents-sec-in + .requirements-contents-sec-in { margin-top: var(--mh--space--xs); } .requirements-contents__list-ttl { border-top: 1px solid; border-bottom: 1px solid; color: var(--mh--color--primary-500); padding-block: var(--mh--space--10-30); line-height: var(--mh--line-height--lg); } .requirements-contents__list-txt { padding-block: var(--mh--space--x2s); line-height: var(--mh--line-height--lg); } .requirements-contents__area-tab + .requirements-contents__area-tab { margin-top: var(--mh--space--xs); } .requirements-contents__link { position: relative; padding: var(--mh--space--15-20); margin-bottom: var(--mh--space--30-40); display: flex; flex-wrap: wrap; justify-content: space-around; gap: var(--mh--space--xl); background-color: var(--mh--color--primary-100); border-radius: var(--mh--border-radius--sm); } .requirements-contents__link-in { position: relative; } .requirements-contents__link-in a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: var(--mh--font-size--x3s); font-weight: 700; } .requirements-contents__link-in:not(:first-of-type)::after { content: ""; display: block; width: 1px; height: 18px; background-color: var(--mh--color--grayscale-500); position: absolute; top: 50%; left: -17.5px; transform: translate(-50%, -50%); } .requirements-contents__link-ico { width: 18px; transform: rotate(90deg); } @media (width < 768px) { .requirements-contents__list-ttl { line-height: var(--mh--line-height--md); } .requirements-contents__link { justify-content: center; gap: 20px 40px; } .requirements-contents__link-ico::after { width: 9px; height: 9px; } } @media (width >= 768px ) { .requirements-contents-inner { padding-inline: var(--mh--contents--padding--side); } .requirements-contents__list { display: grid; grid-template-columns: 230px auto; } .requirements-contents__list-ttl { border-bottom: none; } .requirements-contents__list-ttl:last-of-type { border-bottom: 1px solid; } .requirements-contents__list-txt { border-top: 1px solid; } .requirements-contents__list-txt:last-of-type { border-bottom: 1px solid; } .requirements-contents__link { padding-inline: 60px; } .requirements-contents__link-outer { display: flex; justify-content: center; } .requirements-contents__link-in a { font-size: var(--mh--font-size--lg); } .requirements-contents__link-in:not(:first-of-type)::after { height: 36px; left: -55px; } .requirements-contents__link-ico { width: 36px; } } @media (hover: hover) and (pointer: fine) { .requirements-contents__link-in a { transition: color var(--mh--duration) var(--mh--easing); } .requirements-contents__link-in a:hover { color: var(--mh--color--primary-500); } .requirements-contents__link-in a:hover .c-btn01__ico { background: #fff; } .requirements-contents__link-in a:hover .c-btn01__ico:after { color: var(--mh--color--primary-500); } } /* requirements-contents-tab ====================================== */ .requirements-contents-tab { display: flex; justify-content: center; gap: 0 5px; } .requirements-contents-tab__button { display: flex; flex-direction: column; gap: 5px 8px; justify-content: center; align-items: center; padding: 10px; color: var(--mh--color--primary-100); font-weight: 700; font-size: var(--mh--font-size--x2s); max-width: 165px; border: none; border-radius: var(--mh--border-radius--sm) var(--mh--border-radius--sm) 0 0; background: var(--mh--color--primary-500); } .requirements-contents-tab__button:before { display: inline-block; width: 13px; aspect-ratio: 13/18; color: currentColor; content: ""; background-color: currentcolor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all var(--mh--duration) var(--mh--easing); } .requirements-contents-tab__button.is-active { color: var(--mh--color--grayscale-900); background: var(--mh--color--grayscale-100); } .requirements-contents-tab__button.is-active:before { color: var(--mh--color--primary-500); } @media (width >= 768px ) { .requirements-contents-tab { gap: 0 9px; } .requirements-contents-tab__button { flex-direction: row; justify-content: flex-start; padding: 20px; font-size: var(--mh--font-size--x2l); max-width: 545px; font-size: clamp(1.8rem, 0.4340277778vw + 1.4666666667rem, 2.3rem); } .requirements-contents-tab__button:before { width: 26px; min-width: 26px; } } @media (hover: hover) and (pointer: fine) { .requirements-contents-tab__button { transition: all var(--mh--duration) var(--mh--easing); } .requirements-contents-tab__button:hover { color: var(--mh--color--grayscale-900); background: var(--mh--color--primary-300); } .requirements-contents-tab__button:hover:before { color: var(--mh--color--primary-500); } } .u-hidden { display: none; } .u-inline { display: inline; } .u-inline-block { display: inline-block; } .u-block { display: block; } .u-flex { display: flex; } .u-grid { display: grid; } @media (width < 640px) { .u-hidden-sm-down { display: none; } } @media (width < 768px) { .u-hidden-md-down { display: none; } } @media (width < 1100px) { .u-hidden-lg-down { display: none; } } @media (width < 1280px) { .u-hidden-xl-down { display: none; } } @media (width < 1500px) { .u-hidden-x2l-down { display: none; } } @media (width >= 640px) { .u-hidden-sm-up { display: none; } } @media (width >= 768px ) { .u-hidden-md-up { display: none; } } @media (width >= 1100px ) { .u-hidden-lg-up { display: none; } } @media (width >= 1280px ) { .u-hidden-xl-up { display: none; } } @media (width >= 1500px ) { .u-hidden-x2l-up { display: none; } } /* overflow -------------------------------------- */ .u-overflow-auto { overflow: auto; } .u-overflow-hidden { overflow: hidden; } .u-overflow-visible { overflow: visible; } /* screen reader -------------------------------------- */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; border-width: 0; clip: rect(0, 0, 0, 0); } /* text-transform -------------------------------------- */ .u-uppercase { text-transform: uppercase; } .u-capitalize { text-transform: capitalize; } /* text-align -------------------------------------- */ .u-text-left { text-align: left; } .u-text-right { text-align: right; } .u-text-center { text-align: center; } @media (width < 640px) { .u-text-left-sm-down { text-align: left; } } @media (width < 640px) { .u-text-right-sm-down { text-align: right; } } @media (width < 640px) { .u-text-center-sm-down { text-align: center; } } @media (width < 768px) { .u-text-left-md-down { text-align: left; } } @media (width < 768px) { .u-text-right-md-down { text-align: right; } } @media (width < 768px) { .u-text-center-md-down { text-align: center; } } @media (width < 1100px) { .u-text-left-lg-down { text-align: left; } } @media (width < 1100px) { .u-text-right-lg-down { text-align: right; } } @media (width < 1100px) { .u-text-center-lg-down { text-align: center; } } @media (width < 1280px) { .u-text-left-xl-down { text-align: left; } } @media (width < 1280px) { .u-text-right-xl-down { text-align: right; } } @media (width < 1280px) { .u-text-center-xl-down { text-align: center; } } @media (width < 1500px) { .u-text-left-x2l-down { text-align: left; } } @media (width < 1500px) { .u-text-right-x2l-down { text-align: right; } } @media (width < 1500px) { .u-text-center-x2l-down { text-align: center; } } @media (width >= 640px) { .u-text-left-sm-up { text-align: left; } } @media (width >= 640px) { .u-text-right-sm-up { text-align: right; } } @media (width >= 640px) { .u-text-center-sm-up { text-align: center; } } @media (width >= 768px ) { .u-text-left-md-up { text-align: left; } } @media (width >= 768px ) { .u-text-right-md-up { text-align: right; } } @media (width >= 768px ) { .u-text-center-md-up { text-align: center; } } @media (width >= 1100px ) { .u-text-left-lg-up { text-align: left; } } @media (width >= 1100px ) { .u-text-right-lg-up { text-align: right; } } @media (width >= 1100px ) { .u-text-center-lg-up { text-align: center; } } @media (width >= 1280px ) { .u-text-left-xl-up { text-align: left; } } @media (width >= 1280px ) { .u-text-right-xl-up { text-align: right; } } @media (width >= 1280px ) { .u-text-center-xl-up { text-align: center; } } @media (width >= 1500px ) { .u-text-left-x2l-up { text-align: left; } } @media (width >= 1500px ) { .u-text-right-x2l-up { text-align: right; } } @media (width >= 1500px ) { .u-text-center-x2l-up { text-align: center; } } /* font-size -------------------------------------- */ .u-text-x3s { font-size: var(--mh--font-size--x3s); } .u-text-x2s { font-size: var(--mh--font-size--x2s); } .u-text-xs { font-size: var(--mh--font-size--xs); } .u-text-sm { font-size: var(--mh--font-size--sm); } .u-text-md { font-size: var(--mh--font-size--md); } .u-text-lg { font-size: var(--mh--font-size--lg); } .u-text-xl { font-size: var(--mh--font-size--xl); } .u-text-x2l { font-size: var(--mh--font-size--x2l); } .u-text-x3l { font-size: var(--mh--font-size--x3l); } .u-text-x4l { font-size: var(--mh--font-size--x4l); } .u-text-x5l { font-size: var(--mh--font-size--x5l); } .u-text-x6l { font-size: var(--mh--font-size--x6l); } .u-text-x7l { font-size: var(--mh--font-size--x7l); } .u-text-x8l { font-size: var(--mh--font-size--x8l); } .u-text-x9l { font-size: var(--mh--font-size--x9l); } .u-text-x10l { font-size: var(--mh--font-size--x10l); } .u-text-x11l { font-size: var(--mh--font-size--x11l); } .u-text-x12l { font-size: var(--mh--font-size--x12l); } /* line-height -------------------------------------- */ .u-leading-none { line-height: var(--mh--line-height--none); } .u-leading-sm { line-height: var(--mh--line-height--sm); } .u-leading-md { line-height: var(--mh--line-height--md); } .u-leading-lg { line-height: var(--mh--line-height--lg); } /* letter-spacing -------------------------------------- */ .u-tracking-sm { letter-spacing: var(--mh--letter-spacing--sm); } .u-tracking-md { letter-spacing: var(--mh--letter-spacing--md); } /* font-weight -------------------------------------- */ .u-font-bold { font-weight: 700; } /* font-family -------------------------------------- */ .u-font-en { font-family: var(--mh--font-family--en); font-weight: 600; line-height: var(--mh--line-height--sm); letter-spacing: var(--mh--letter-spacing--sm); } /* position -------------------------------------- */ .u-relative { position: relative; } .u-absolute { position: absolute !important; } /* layout -------------------------------------- */ .u-inner { padding-right: var(--mh--contents--padding--side); padding-left: var(--mh--contents--padding--side); } @media (width >= 768px ) { .u-inner { width: 100%; max-width: var(--mh--contents--width-with-padding); margin-right: auto; margin-left: auto; } } .u-wide-inner { padding-right: var(--mh--contents--padding--side); padding-left: var(--mh--contents--padding--side); } @media (width >= 768px ) { .u-wide-inner { width: 100%; max-width: var(--mh--contents--wide-width-with-padding); margin-right: auto; margin-left: auto; } } .u-item-center { display: grid; place-items: center; } .u-clearfix { clear: both; display: block; height: 0; border: none; } /* link -------------------------------------- */ a.u-alpha { display: block; text-decoration: none; } @media (hover: hover) and (pointer: fine) { a.u-alpha { transition: opacity var(--mh--duration) var(--mh--easing); } a.u-alpha:hover { opacity: 0.7; } } a.u-zoom { display: block; text-decoration: none; } a.u-zoom .u-zoom__img { display: block; } a.u-zoom .u-zoom__img-wrap { display: block; overflow: hidden; } @media (hover: hover) and (pointer: fine) { a.u-zoom .u-zoom__img { transition: transform var(--mh--duration) var(--mh--easing); } a.u-zoom:hover .u-zoom__img { transform: scale(1.1); } } a.u-link-layer { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; text-indent: 200%; white-space: nowrap; } a[class].u-text-underline { text-decoration: underline; } @media (hover: hover) and (pointer: fine) { a[class].u-text-underline:hover { text-decoration: none; } } a.u-hover-underline, a span.u-hover-underline, button.u-hover-underline { transition: background-size var(--mh--duration) var(--mh--easing), color var(--mh--duration) var(--mh--easing); background-image: linear-gradient(transparent calc(100% - 1px), currentColor 0%); background-size: 0 1px; background-position: right bottom; background-repeat: no-repeat; } @media (hover: hover) and (pointer: fine) { a.u-hover-underline:hover, a span.u-hover-underline:hover, button.u-hover-underline:hover { background-size: 100% 1px; background-position: left bottom; } } @media (hover: hover) and (pointer: fine) { a:hover span.u-hover-underline { background-size: 100% 1px; background-position: left bottom; } } .u-hover-primary-500 { transition: color var(--mh--duration) var(--mh--easing); } @media (hover: hover) and (pointer: fine) { .u-hover-primary-500:hover { color: var(--mh--color--primary-500); } a:hover .u-hover-primary-500 { color: var(--mh--color--primary-500); } } @media (hover: hover) and (pointer: fine) { .u-hover-bg-primary-600 { transition: background-color var(--mh--duration) var(--mh--easing); } .u-hover-bg-primary-600:hover { background-color: var(--mh--color--primary-600); } a:hover .u-hover-bg-primary-600 { background-color: var(--mh--color--primary-600); } } .u-media-query { font-family: sp; } @media (width >= 768px ) { .u-media-query { font-family: tb; } } @media (width >= 1100px ) { .u-media-query { font-family: pc; } } .u-text-primary-600 { color: var(--mh--color--primary-600); } .u-text-primary-500 { color: var(--mh--color--primary-500); } .u-text-primary-300 { color: var(--mh--color--primary-300); } .u-text-primary-200 { color: var(--mh--color--primary-200); } .u-text-primary-100 { color: var(--mh--color--primary-100); } .u-text-grayscale-900 { color: var(--mh--color--grayscale-900); } .u-text-grayscale-800 { color: var(--mh--color--grayscale-800); } .u-text-grayscale-500 { color: var(--mh--color--grayscale-500); } .u-text-grayscale-200 { color: var(--mh--color--grayscale-200); } .u-text-grayscale-100 { color: var(--mh--color--grayscale-100); } .u-text-error-500 { color: var(--mh--color--error-500); } .u-text-category-red-100 { color: var(--mh--color--category-red-100); } .u-text-category-green-100 { color: var(--mh--color--category-green-100); } .u-text-category-blue-100 { color: var(--mh--color--category-blue-100); } .u-bg-primary-600 { background-color: var(--mh--color--primary-600); } .u-bg-primary-500 { background-color: var(--mh--color--primary-500); } .u-bg-primary-300 { background-color: var(--mh--color--primary-300); } .u-bg-primary-200 { background-color: var(--mh--color--primary-200); } .u-bg-primary-100 { background-color: var(--mh--color--primary-100); } .u-bg-grayscale-900 { background-color: var(--mh--color--grayscale-900); } .u-bg-grayscale-800 { background-color: var(--mh--color--grayscale-800); } .u-bg-grayscale-500 { background-color: var(--mh--color--grayscale-500); } .u-bg-grayscale-200 { background-color: var(--mh--color--grayscale-200); } .u-bg-grayscale-100 { background-color: var(--mh--color--grayscale-100); } .u-bg-error-500 { background-color: var(--mh--color--error-500); } .u-bg-category-red-100 { background-color: var(--mh--color--category-red-100); } .u-bg-category-green-100 { background-color: var(--mh--color--category-green-100); } .u-bg-category-blue-100 { background-color: var(--mh--color--category-blue-100); } /* space height -------------------------------------- */ .u-space-x5s { height: var(--mh--space--x5s); } .u-m-x5s { margin: var(--mh--space--x5s); } .u-my-x5s { margin-block: var(--mh--space--x5s); } .u-mx-x5s { margin-inline: var(--mh--space--x5s); } .u-mt-x5s { margin-top: var(--mh--space--x5s); } .u-mb-x5s { margin-bottom: var(--mh--space--x5s); } .u-ml-x5s { margin-left: var(--mh--space--x5s); } .u-mr-x5s { margin-right: var(--mh--space--x5s); } .u-p-x5s { padding: var(--mh--space--x5s); } .u-py-x5s { padding-block: var(--mh--space--x5s); } .u-px-x5s { padding-inline: var(--mh--space--x5s); } .u-pt-x5s { padding-top: var(--mh--space--x5s); } .u-pb-x5s { padding-bottom: var(--mh--space--x5s); } .u-pl-x5s { padding-left: var(--mh--space--x5s); } .u-pr-x5s { padding-right: var(--mh--space--x5s); } .u-row-gap-x5s { row-gap: var(--mh--space--x5s); } .u-column-gap-x5s { column-gap: var(--mh--space--x5s); } .u-space-x4s { height: var(--mh--space--x4s); } .u-m-x4s { margin: var(--mh--space--x4s); } .u-my-x4s { margin-block: var(--mh--space--x4s); } .u-mx-x4s { margin-inline: var(--mh--space--x4s); } .u-mt-x4s { margin-top: var(--mh--space--x4s); } .u-mb-x4s { margin-bottom: var(--mh--space--x4s); } .u-ml-x4s { margin-left: var(--mh--space--x4s); } .u-mr-x4s { margin-right: var(--mh--space--x4s); } .u-p-x4s { padding: var(--mh--space--x4s); } .u-py-x4s { padding-block: var(--mh--space--x4s); } .u-px-x4s { padding-inline: var(--mh--space--x4s); } .u-pt-x4s { padding-top: var(--mh--space--x4s); } .u-pb-x4s { padding-bottom: var(--mh--space--x4s); } .u-pl-x4s { padding-left: var(--mh--space--x4s); } .u-pr-x4s { padding-right: var(--mh--space--x4s); } .u-row-gap-x4s { row-gap: var(--mh--space--x4s); } .u-column-gap-x4s { column-gap: var(--mh--space--x4s); } .u-space-x3s { height: var(--mh--space--x3s); } .u-m-x3s { margin: var(--mh--space--x3s); } .u-my-x3s { margin-block: var(--mh--space--x3s); } .u-mx-x3s { margin-inline: var(--mh--space--x3s); } .u-mt-x3s { margin-top: var(--mh--space--x3s); } .u-mb-x3s { margin-bottom: var(--mh--space--x3s); } .u-ml-x3s { margin-left: var(--mh--space--x3s); } .u-mr-x3s { margin-right: var(--mh--space--x3s); } .u-p-x3s { padding: var(--mh--space--x3s); } .u-py-x3s { padding-block: var(--mh--space--x3s); } .u-px-x3s { padding-inline: var(--mh--space--x3s); } .u-pt-x3s { padding-top: var(--mh--space--x3s); } .u-pb-x3s { padding-bottom: var(--mh--space--x3s); } .u-pl-x3s { padding-left: var(--mh--space--x3s); } .u-pr-x3s { padding-right: var(--mh--space--x3s); } .u-row-gap-x3s { row-gap: var(--mh--space--x3s); } .u-column-gap-x3s { column-gap: var(--mh--space--x3s); } .u-space-x2s { height: var(--mh--space--x2s); } .u-m-x2s { margin: var(--mh--space--x2s); } .u-my-x2s { margin-block: var(--mh--space--x2s); } .u-mx-x2s { margin-inline: var(--mh--space--x2s); } .u-mt-x2s { margin-top: var(--mh--space--x2s); } .u-mb-x2s { margin-bottom: var(--mh--space--x2s); } .u-ml-x2s { margin-left: var(--mh--space--x2s); } .u-mr-x2s { margin-right: var(--mh--space--x2s); } .u-p-x2s { padding: var(--mh--space--x2s); } .u-py-x2s { padding-block: var(--mh--space--x2s); } .u-px-x2s { padding-inline: var(--mh--space--x2s); } .u-pt-x2s { padding-top: var(--mh--space--x2s); } .u-pb-x2s { padding-bottom: var(--mh--space--x2s); } .u-pl-x2s { padding-left: var(--mh--space--x2s); } .u-pr-x2s { padding-right: var(--mh--space--x2s); } .u-row-gap-x2s { row-gap: var(--mh--space--x2s); } .u-column-gap-x2s { column-gap: var(--mh--space--x2s); } .u-space-xs { height: var(--mh--space--xs); } .u-m-xs { margin: var(--mh--space--xs); } .u-my-xs { margin-block: var(--mh--space--xs); } .u-mx-xs { margin-inline: var(--mh--space--xs); } .u-mt-xs { margin-top: var(--mh--space--xs); } .u-mb-xs { margin-bottom: var(--mh--space--xs); } .u-ml-xs { margin-left: var(--mh--space--xs); } .u-mr-xs { margin-right: var(--mh--space--xs); } .u-p-xs { padding: var(--mh--space--xs); } .u-py-xs { padding-block: var(--mh--space--xs); } .u-px-xs { padding-inline: var(--mh--space--xs); } .u-pt-xs { padding-top: var(--mh--space--xs); } .u-pb-xs { padding-bottom: var(--mh--space--xs); } .u-pl-xs { padding-left: var(--mh--space--xs); } .u-pr-xs { padding-right: var(--mh--space--xs); } .u-row-gap-xs { row-gap: var(--mh--space--xs); } .u-column-gap-xs { column-gap: var(--mh--space--xs); } .u-space-sm { height: var(--mh--space--sm); } .u-m-sm { margin: var(--mh--space--sm); } .u-my-sm { margin-block: var(--mh--space--sm); } .u-mx-sm { margin-inline: var(--mh--space--sm); } .u-mt-sm { margin-top: var(--mh--space--sm); } .u-mb-sm { margin-bottom: var(--mh--space--sm); } .u-ml-sm { margin-left: var(--mh--space--sm); } .u-mr-sm { margin-right: var(--mh--space--sm); } .u-p-sm { padding: var(--mh--space--sm); } .u-py-sm { padding-block: var(--mh--space--sm); } .u-px-sm { padding-inline: var(--mh--space--sm); } .u-pt-sm { padding-top: var(--mh--space--sm); } .u-pb-sm { padding-bottom: var(--mh--space--sm); } .u-pl-sm { padding-left: var(--mh--space--sm); } .u-pr-sm { padding-right: var(--mh--space--sm); } .u-row-gap-sm { row-gap: var(--mh--space--sm); } .u-column-gap-sm { column-gap: var(--mh--space--sm); } .u-space-md { height: var(--mh--space--md); } .u-m-md { margin: var(--mh--space--md); } .u-my-md { margin-block: var(--mh--space--md); } .u-mx-md { margin-inline: var(--mh--space--md); } .u-mt-md { margin-top: var(--mh--space--md); } .u-mb-md { margin-bottom: var(--mh--space--md); } .u-ml-md { margin-left: var(--mh--space--md); } .u-mr-md { margin-right: var(--mh--space--md); } .u-p-md { padding: var(--mh--space--md); } .u-py-md { padding-block: var(--mh--space--md); } .u-px-md { padding-inline: var(--mh--space--md); } .u-pt-md { padding-top: var(--mh--space--md); } .u-pb-md { padding-bottom: var(--mh--space--md); } .u-pl-md { padding-left: var(--mh--space--md); } .u-pr-md { padding-right: var(--mh--space--md); } .u-row-gap-md { row-gap: var(--mh--space--md); } .u-column-gap-md { column-gap: var(--mh--space--md); } .u-space-lg { height: var(--mh--space--lg); } .u-m-lg { margin: var(--mh--space--lg); } .u-my-lg { margin-block: var(--mh--space--lg); } .u-mx-lg { margin-inline: var(--mh--space--lg); } .u-mt-lg { margin-top: var(--mh--space--lg); } .u-mb-lg { margin-bottom: var(--mh--space--lg); } .u-ml-lg { margin-left: var(--mh--space--lg); } .u-mr-lg { margin-right: var(--mh--space--lg); } .u-p-lg { padding: var(--mh--space--lg); } .u-py-lg { padding-block: var(--mh--space--lg); } .u-px-lg { padding-inline: var(--mh--space--lg); } .u-pt-lg { padding-top: var(--mh--space--lg); } .u-pb-lg { padding-bottom: var(--mh--space--lg); } .u-pl-lg { padding-left: var(--mh--space--lg); } .u-pr-lg { padding-right: var(--mh--space--lg); } .u-row-gap-lg { row-gap: var(--mh--space--lg); } .u-column-gap-lg { column-gap: var(--mh--space--lg); } .u-space-xl { height: var(--mh--space--xl); } .u-m-xl { margin: var(--mh--space--xl); } .u-my-xl { margin-block: var(--mh--space--xl); } .u-mx-xl { margin-inline: var(--mh--space--xl); } .u-mt-xl { margin-top: var(--mh--space--xl); } .u-mb-xl { margin-bottom: var(--mh--space--xl); } .u-ml-xl { margin-left: var(--mh--space--xl); } .u-mr-xl { margin-right: var(--mh--space--xl); } .u-p-xl { padding: var(--mh--space--xl); } .u-py-xl { padding-block: var(--mh--space--xl); } .u-px-xl { padding-inline: var(--mh--space--xl); } .u-pt-xl { padding-top: var(--mh--space--xl); } .u-pb-xl { padding-bottom: var(--mh--space--xl); } .u-pl-xl { padding-left: var(--mh--space--xl); } .u-pr-xl { padding-right: var(--mh--space--xl); } .u-row-gap-xl { row-gap: var(--mh--space--xl); } .u-column-gap-xl { column-gap: var(--mh--space--xl); } .u-space-x2l { height: var(--mh--space--x2l); } .u-m-x2l { margin: var(--mh--space--x2l); } .u-my-x2l { margin-block: var(--mh--space--x2l); } .u-mx-x2l { margin-inline: var(--mh--space--x2l); } .u-mt-x2l { margin-top: var(--mh--space--x2l); } .u-mb-x2l { margin-bottom: var(--mh--space--x2l); } .u-ml-x2l { margin-left: var(--mh--space--x2l); } .u-mr-x2l { margin-right: var(--mh--space--x2l); } .u-p-x2l { padding: var(--mh--space--x2l); } .u-py-x2l { padding-block: var(--mh--space--x2l); } .u-px-x2l { padding-inline: var(--mh--space--x2l); } .u-pt-x2l { padding-top: var(--mh--space--x2l); } .u-pb-x2l { padding-bottom: var(--mh--space--x2l); } .u-pl-x2l { padding-left: var(--mh--space--x2l); } .u-pr-x2l { padding-right: var(--mh--space--x2l); } .u-row-gap-x2l { row-gap: var(--mh--space--x2l); } .u-column-gap-x2l { column-gap: var(--mh--space--x2l); } .u-space-x3l { height: var(--mh--space--x3l); } .u-m-x3l { margin: var(--mh--space--x3l); } .u-my-x3l { margin-block: var(--mh--space--x3l); } .u-mx-x3l { margin-inline: var(--mh--space--x3l); } .u-mt-x3l { margin-top: var(--mh--space--x3l); } .u-mb-x3l { margin-bottom: var(--mh--space--x3l); } .u-ml-x3l { margin-left: var(--mh--space--x3l); } .u-mr-x3l { margin-right: var(--mh--space--x3l); } .u-p-x3l { padding: var(--mh--space--x3l); } .u-py-x3l { padding-block: var(--mh--space--x3l); } .u-px-x3l { padding-inline: var(--mh--space--x3l); } .u-pt-x3l { padding-top: var(--mh--space--x3l); } .u-pb-x3l { padding-bottom: var(--mh--space--x3l); } .u-pl-x3l { padding-left: var(--mh--space--x3l); } .u-pr-x3l { padding-right: var(--mh--space--x3l); } .u-row-gap-x3l { row-gap: var(--mh--space--x3l); } .u-column-gap-x3l { column-gap: var(--mh--space--x3l); } .u-space-x4l { height: var(--mh--space--x4l); } .u-m-x4l { margin: var(--mh--space--x4l); } .u-my-x4l { margin-block: var(--mh--space--x4l); } .u-mx-x4l { margin-inline: var(--mh--space--x4l); } .u-mt-x4l { margin-top: var(--mh--space--x4l); } .u-mb-x4l { margin-bottom: var(--mh--space--x4l); } .u-ml-x4l { margin-left: var(--mh--space--x4l); } .u-mr-x4l { margin-right: var(--mh--space--x4l); } .u-p-x4l { padding: var(--mh--space--x4l); } .u-py-x4l { padding-block: var(--mh--space--x4l); } .u-px-x4l { padding-inline: var(--mh--space--x4l); } .u-pt-x4l { padding-top: var(--mh--space--x4l); } .u-pb-x4l { padding-bottom: var(--mh--space--x4l); } .u-pl-x4l { padding-left: var(--mh--space--x4l); } .u-pr-x4l { padding-right: var(--mh--space--x4l); } .u-row-gap-x4l { row-gap: var(--mh--space--x4l); } .u-column-gap-x4l { column-gap: var(--mh--space--x4l); } .u-space-x5l { height: var(--mh--space--x5l); } .u-m-x5l { margin: var(--mh--space--x5l); } .u-my-x5l { margin-block: var(--mh--space--x5l); } .u-mx-x5l { margin-inline: var(--mh--space--x5l); } .u-mt-x5l { margin-top: var(--mh--space--x5l); } .u-mb-x5l { margin-bottom: var(--mh--space--x5l); } .u-ml-x5l { margin-left: var(--mh--space--x5l); } .u-mr-x5l { margin-right: var(--mh--space--x5l); } .u-p-x5l { padding: var(--mh--space--x5l); } .u-py-x5l { padding-block: var(--mh--space--x5l); } .u-px-x5l { padding-inline: var(--mh--space--x5l); } .u-pt-x5l { padding-top: var(--mh--space--x5l); } .u-pb-x5l { padding-bottom: var(--mh--space--x5l); } .u-pl-x5l { padding-left: var(--mh--space--x5l); } .u-pr-x5l { padding-right: var(--mh--space--x5l); } .u-row-gap-x5l { row-gap: var(--mh--space--x5l); } .u-column-gap-x5l { column-gap: var(--mh--space--x5l); } .u-space-10-10 { height: var(--mh--space--10-10); } .u-m-10-10 { margin: var(--mh--space--10-10); } .u-my-10-10 { margin-block: var(--mh--space--10-10); } .u-mx-10-10 { margin-inline: var(--mh--space--10-10); } .u-mt-10-10 { margin-top: var(--mh--space--10-10); } .u-mb-10-10 { margin-bottom: var(--mh--space--10-10); } .u-ml-10-10 { margin-left: var(--mh--space--10-10); } .u-mr-10-10 { margin-right: var(--mh--space--10-10); } .u-p-10-10 { padding: var(--mh--space--10-10); } .u-py-10-10 { padding-block: var(--mh--space--10-10); } .u-px-10-10 { padding-inline: var(--mh--space--10-10); } .u-pt-10-10 { padding-top: var(--mh--space--10-10); } .u-pb-10-10 { padding-bottom: var(--mh--space--10-10); } .u-pl-10-10 { padding-left: var(--mh--space--10-10); } .u-pr-10-10 { padding-right: var(--mh--space--10-10); } .u-row-gap-10-10 { row-gap: var(--mh--space--10-10); } .u-column-gap-10-10 { column-gap: var(--mh--space--10-10); } .u-space-10-15 { height: var(--mh--space--10-15); } .u-m-10-15 { margin: var(--mh--space--10-15); } .u-my-10-15 { margin-block: var(--mh--space--10-15); } .u-mx-10-15 { margin-inline: var(--mh--space--10-15); } .u-mt-10-15 { margin-top: var(--mh--space--10-15); } .u-mb-10-15 { margin-bottom: var(--mh--space--10-15); } .u-ml-10-15 { margin-left: var(--mh--space--10-15); } .u-mr-10-15 { margin-right: var(--mh--space--10-15); } .u-p-10-15 { padding: var(--mh--space--10-15); } .u-py-10-15 { padding-block: var(--mh--space--10-15); } .u-px-10-15 { padding-inline: var(--mh--space--10-15); } .u-pt-10-15 { padding-top: var(--mh--space--10-15); } .u-pb-10-15 { padding-bottom: var(--mh--space--10-15); } .u-pl-10-15 { padding-left: var(--mh--space--10-15); } .u-pr-10-15 { padding-right: var(--mh--space--10-15); } .u-row-gap-10-15 { row-gap: var(--mh--space--10-15); } .u-column-gap-10-15 { column-gap: var(--mh--space--10-15); } .u-space-10-30 { height: var(--mh--space--10-30); } .u-m-10-30 { margin: var(--mh--space--10-30); } .u-my-10-30 { margin-block: var(--mh--space--10-30); } .u-mx-10-30 { margin-inline: var(--mh--space--10-30); } .u-mt-10-30 { margin-top: var(--mh--space--10-30); } .u-mb-10-30 { margin-bottom: var(--mh--space--10-30); } .u-ml-10-30 { margin-left: var(--mh--space--10-30); } .u-mr-10-30 { margin-right: var(--mh--space--10-30); } .u-p-10-30 { padding: var(--mh--space--10-30); } .u-py-10-30 { padding-block: var(--mh--space--10-30); } .u-px-10-30 { padding-inline: var(--mh--space--10-30); } .u-pt-10-30 { padding-top: var(--mh--space--10-30); } .u-pb-10-30 { padding-bottom: var(--mh--space--10-30); } .u-pl-10-30 { padding-left: var(--mh--space--10-30); } .u-pr-10-30 { padding-right: var(--mh--space--10-30); } .u-row-gap-10-30 { row-gap: var(--mh--space--10-30); } .u-column-gap-10-30 { column-gap: var(--mh--space--10-30); } .u-space-10-40 { height: var(--mh--space--10-40); } .u-m-10-40 { margin: var(--mh--space--10-40); } .u-my-10-40 { margin-block: var(--mh--space--10-40); } .u-mx-10-40 { margin-inline: var(--mh--space--10-40); } .u-mt-10-40 { margin-top: var(--mh--space--10-40); } .u-mb-10-40 { margin-bottom: var(--mh--space--10-40); } .u-ml-10-40 { margin-left: var(--mh--space--10-40); } .u-mr-10-40 { margin-right: var(--mh--space--10-40); } .u-p-10-40 { padding: var(--mh--space--10-40); } .u-py-10-40 { padding-block: var(--mh--space--10-40); } .u-px-10-40 { padding-inline: var(--mh--space--10-40); } .u-pt-10-40 { padding-top: var(--mh--space--10-40); } .u-pb-10-40 { padding-bottom: var(--mh--space--10-40); } .u-pl-10-40 { padding-left: var(--mh--space--10-40); } .u-pr-10-40 { padding-right: var(--mh--space--10-40); } .u-row-gap-10-40 { row-gap: var(--mh--space--10-40); } .u-column-gap-10-40 { column-gap: var(--mh--space--10-40); } .u-space-10-60 { height: var(--mh--space--10-60); } .u-m-10-60 { margin: var(--mh--space--10-60); } .u-my-10-60 { margin-block: var(--mh--space--10-60); } .u-mx-10-60 { margin-inline: var(--mh--space--10-60); } .u-mt-10-60 { margin-top: var(--mh--space--10-60); } .u-mb-10-60 { margin-bottom: var(--mh--space--10-60); } .u-ml-10-60 { margin-left: var(--mh--space--10-60); } .u-mr-10-60 { margin-right: var(--mh--space--10-60); } .u-p-10-60 { padding: var(--mh--space--10-60); } .u-py-10-60 { padding-block: var(--mh--space--10-60); } .u-px-10-60 { padding-inline: var(--mh--space--10-60); } .u-pt-10-60 { padding-top: var(--mh--space--10-60); } .u-pb-10-60 { padding-bottom: var(--mh--space--10-60); } .u-pl-10-60 { padding-left: var(--mh--space--10-60); } .u-pr-10-60 { padding-right: var(--mh--space--10-60); } .u-row-gap-10-60 { row-gap: var(--mh--space--10-60); } .u-column-gap-10-60 { column-gap: var(--mh--space--10-60); } .u-space-15-15 { height: var(--mh--space--15-15); } .u-m-15-15 { margin: var(--mh--space--15-15); } .u-my-15-15 { margin-block: var(--mh--space--15-15); } .u-mx-15-15 { margin-inline: var(--mh--space--15-15); } .u-mt-15-15 { margin-top: var(--mh--space--15-15); } .u-mb-15-15 { margin-bottom: var(--mh--space--15-15); } .u-ml-15-15 { margin-left: var(--mh--space--15-15); } .u-mr-15-15 { margin-right: var(--mh--space--15-15); } .u-p-15-15 { padding: var(--mh--space--15-15); } .u-py-15-15 { padding-block: var(--mh--space--15-15); } .u-px-15-15 { padding-inline: var(--mh--space--15-15); } .u-pt-15-15 { padding-top: var(--mh--space--15-15); } .u-pb-15-15 { padding-bottom: var(--mh--space--15-15); } .u-pl-15-15 { padding-left: var(--mh--space--15-15); } .u-pr-15-15 { padding-right: var(--mh--space--15-15); } .u-row-gap-15-15 { row-gap: var(--mh--space--15-15); } .u-column-gap-15-15 { column-gap: var(--mh--space--15-15); } .u-space-15-20 { height: var(--mh--space--15-20); } .u-m-15-20 { margin: var(--mh--space--15-20); } .u-my-15-20 { margin-block: var(--mh--space--15-20); } .u-mx-15-20 { margin-inline: var(--mh--space--15-20); } .u-mt-15-20 { margin-top: var(--mh--space--15-20); } .u-mb-15-20 { margin-bottom: var(--mh--space--15-20); } .u-ml-15-20 { margin-left: var(--mh--space--15-20); } .u-mr-15-20 { margin-right: var(--mh--space--15-20); } .u-p-15-20 { padding: var(--mh--space--15-20); } .u-py-15-20 { padding-block: var(--mh--space--15-20); } .u-px-15-20 { padding-inline: var(--mh--space--15-20); } .u-pt-15-20 { padding-top: var(--mh--space--15-20); } .u-pb-15-20 { padding-bottom: var(--mh--space--15-20); } .u-pl-15-20 { padding-left: var(--mh--space--15-20); } .u-pr-15-20 { padding-right: var(--mh--space--15-20); } .u-row-gap-15-20 { row-gap: var(--mh--space--15-20); } .u-column-gap-15-20 { column-gap: var(--mh--space--15-20); } .u-space-20-120 { height: var(--mh--space--20-120); } .u-m-20-120 { margin: var(--mh--space--20-120); } .u-my-20-120 { margin-block: var(--mh--space--20-120); } .u-mx-20-120 { margin-inline: var(--mh--space--20-120); } .u-mt-20-120 { margin-top: var(--mh--space--20-120); } .u-mb-20-120 { margin-bottom: var(--mh--space--20-120); } .u-ml-20-120 { margin-left: var(--mh--space--20-120); } .u-mr-20-120 { margin-right: var(--mh--space--20-120); } .u-p-20-120 { padding: var(--mh--space--20-120); } .u-py-20-120 { padding-block: var(--mh--space--20-120); } .u-px-20-120 { padding-inline: var(--mh--space--20-120); } .u-pt-20-120 { padding-top: var(--mh--space--20-120); } .u-pb-20-120 { padding-bottom: var(--mh--space--20-120); } .u-pl-20-120 { padding-left: var(--mh--space--20-120); } .u-pr-20-120 { padding-right: var(--mh--space--20-120); } .u-row-gap-20-120 { row-gap: var(--mh--space--20-120); } .u-column-gap-20-120 { column-gap: var(--mh--space--20-120); } .u-space-20-15 { height: var(--mh--space--20-15); } .u-m-20-15 { margin: var(--mh--space--20-15); } .u-my-20-15 { margin-block: var(--mh--space--20-15); } .u-mx-20-15 { margin-inline: var(--mh--space--20-15); } .u-mt-20-15 { margin-top: var(--mh--space--20-15); } .u-mb-20-15 { margin-bottom: var(--mh--space--20-15); } .u-ml-20-15 { margin-left: var(--mh--space--20-15); } .u-mr-20-15 { margin-right: var(--mh--space--20-15); } .u-p-20-15 { padding: var(--mh--space--20-15); } .u-py-20-15 { padding-block: var(--mh--space--20-15); } .u-px-20-15 { padding-inline: var(--mh--space--20-15); } .u-pt-20-15 { padding-top: var(--mh--space--20-15); } .u-pb-20-15 { padding-bottom: var(--mh--space--20-15); } .u-pl-20-15 { padding-left: var(--mh--space--20-15); } .u-pr-20-15 { padding-right: var(--mh--space--20-15); } .u-row-gap-20-15 { row-gap: var(--mh--space--20-15); } .u-column-gap-20-15 { column-gap: var(--mh--space--20-15); } .u-space-20-20 { height: var(--mh--space--20-20); } .u-m-20-20 { margin: var(--mh--space--20-20); } .u-my-20-20 { margin-block: var(--mh--space--20-20); } .u-mx-20-20 { margin-inline: var(--mh--space--20-20); } .u-mt-20-20 { margin-top: var(--mh--space--20-20); } .u-mb-20-20 { margin-bottom: var(--mh--space--20-20); } .u-ml-20-20 { margin-left: var(--mh--space--20-20); } .u-mr-20-20 { margin-right: var(--mh--space--20-20); } .u-p-20-20 { padding: var(--mh--space--20-20); } .u-py-20-20 { padding-block: var(--mh--space--20-20); } .u-px-20-20 { padding-inline: var(--mh--space--20-20); } .u-pt-20-20 { padding-top: var(--mh--space--20-20); } .u-pb-20-20 { padding-bottom: var(--mh--space--20-20); } .u-pl-20-20 { padding-left: var(--mh--space--20-20); } .u-pr-20-20 { padding-right: var(--mh--space--20-20); } .u-row-gap-20-20 { row-gap: var(--mh--space--20-20); } .u-column-gap-20-20 { column-gap: var(--mh--space--20-20); } .u-space-20-30 { height: var(--mh--space--20-30); } .u-m-20-30 { margin: var(--mh--space--20-30); } .u-my-20-30 { margin-block: var(--mh--space--20-30); } .u-mx-20-30 { margin-inline: var(--mh--space--20-30); } .u-mt-20-30 { margin-top: var(--mh--space--20-30); } .u-mb-20-30 { margin-bottom: var(--mh--space--20-30); } .u-ml-20-30 { margin-left: var(--mh--space--20-30); } .u-mr-20-30 { margin-right: var(--mh--space--20-30); } .u-p-20-30 { padding: var(--mh--space--20-30); } .u-py-20-30 { padding-block: var(--mh--space--20-30); } .u-px-20-30 { padding-inline: var(--mh--space--20-30); } .u-pt-20-30 { padding-top: var(--mh--space--20-30); } .u-pb-20-30 { padding-bottom: var(--mh--space--20-30); } .u-pl-20-30 { padding-left: var(--mh--space--20-30); } .u-pr-20-30 { padding-right: var(--mh--space--20-30); } .u-row-gap-20-30 { row-gap: var(--mh--space--20-30); } .u-column-gap-20-30 { column-gap: var(--mh--space--20-30); } .u-space-20-50 { height: var(--mh--space--20-50); } .u-m-20-50 { margin: var(--mh--space--20-50); } .u-my-20-50 { margin-block: var(--mh--space--20-50); } .u-mx-20-50 { margin-inline: var(--mh--space--20-50); } .u-mt-20-50 { margin-top: var(--mh--space--20-50); } .u-mb-20-50 { margin-bottom: var(--mh--space--20-50); } .u-ml-20-50 { margin-left: var(--mh--space--20-50); } .u-mr-20-50 { margin-right: var(--mh--space--20-50); } .u-p-20-50 { padding: var(--mh--space--20-50); } .u-py-20-50 { padding-block: var(--mh--space--20-50); } .u-px-20-50 { padding-inline: var(--mh--space--20-50); } .u-pt-20-50 { padding-top: var(--mh--space--20-50); } .u-pb-20-50 { padding-bottom: var(--mh--space--20-50); } .u-pl-20-50 { padding-left: var(--mh--space--20-50); } .u-pr-20-50 { padding-right: var(--mh--space--20-50); } .u-row-gap-20-50 { row-gap: var(--mh--space--20-50); } .u-column-gap-20-50 { column-gap: var(--mh--space--20-50); } .u-space-20-60 { height: var(--mh--space--20-60); } .u-m-20-60 { margin: var(--mh--space--20-60); } .u-my-20-60 { margin-block: var(--mh--space--20-60); } .u-mx-20-60 { margin-inline: var(--mh--space--20-60); } .u-mt-20-60 { margin-top: var(--mh--space--20-60); } .u-mb-20-60 { margin-bottom: var(--mh--space--20-60); } .u-ml-20-60 { margin-left: var(--mh--space--20-60); } .u-mr-20-60 { margin-right: var(--mh--space--20-60); } .u-p-20-60 { padding: var(--mh--space--20-60); } .u-py-20-60 { padding-block: var(--mh--space--20-60); } .u-px-20-60 { padding-inline: var(--mh--space--20-60); } .u-pt-20-60 { padding-top: var(--mh--space--20-60); } .u-pb-20-60 { padding-bottom: var(--mh--space--20-60); } .u-pl-20-60 { padding-left: var(--mh--space--20-60); } .u-pr-20-60 { padding-right: var(--mh--space--20-60); } .u-row-gap-20-60 { row-gap: var(--mh--space--20-60); } .u-column-gap-20-60 { column-gap: var(--mh--space--20-60); } .u-space-20-80 { height: var(--mh--space--20-80); } .u-m-20-80 { margin: var(--mh--space--20-80); } .u-my-20-80 { margin-block: var(--mh--space--20-80); } .u-mx-20-80 { margin-inline: var(--mh--space--20-80); } .u-mt-20-80 { margin-top: var(--mh--space--20-80); } .u-mb-20-80 { margin-bottom: var(--mh--space--20-80); } .u-ml-20-80 { margin-left: var(--mh--space--20-80); } .u-mr-20-80 { margin-right: var(--mh--space--20-80); } .u-p-20-80 { padding: var(--mh--space--20-80); } .u-py-20-80 { padding-block: var(--mh--space--20-80); } .u-px-20-80 { padding-inline: var(--mh--space--20-80); } .u-pt-20-80 { padding-top: var(--mh--space--20-80); } .u-pb-20-80 { padding-bottom: var(--mh--space--20-80); } .u-pl-20-80 { padding-left: var(--mh--space--20-80); } .u-pr-20-80 { padding-right: var(--mh--space--20-80); } .u-row-gap-20-80 { row-gap: var(--mh--space--20-80); } .u-column-gap-20-80 { column-gap: var(--mh--space--20-80); } .u-space-25-25 { height: var(--mh--space--25-25); } .u-m-25-25 { margin: var(--mh--space--25-25); } .u-my-25-25 { margin-block: var(--mh--space--25-25); } .u-mx-25-25 { margin-inline: var(--mh--space--25-25); } .u-mt-25-25 { margin-top: var(--mh--space--25-25); } .u-mb-25-25 { margin-bottom: var(--mh--space--25-25); } .u-ml-25-25 { margin-left: var(--mh--space--25-25); } .u-mr-25-25 { margin-right: var(--mh--space--25-25); } .u-p-25-25 { padding: var(--mh--space--25-25); } .u-py-25-25 { padding-block: var(--mh--space--25-25); } .u-px-25-25 { padding-inline: var(--mh--space--25-25); } .u-pt-25-25 { padding-top: var(--mh--space--25-25); } .u-pb-25-25 { padding-bottom: var(--mh--space--25-25); } .u-pl-25-25 { padding-left: var(--mh--space--25-25); } .u-pr-25-25 { padding-right: var(--mh--space--25-25); } .u-row-gap-25-25 { row-gap: var(--mh--space--25-25); } .u-column-gap-25-25 { column-gap: var(--mh--space--25-25); } .u-space-25-30 { height: var(--mh--space--25-30); } .u-m-25-30 { margin: var(--mh--space--25-30); } .u-my-25-30 { margin-block: var(--mh--space--25-30); } .u-mx-25-30 { margin-inline: var(--mh--space--25-30); } .u-mt-25-30 { margin-top: var(--mh--space--25-30); } .u-mb-25-30 { margin-bottom: var(--mh--space--25-30); } .u-ml-25-30 { margin-left: var(--mh--space--25-30); } .u-mr-25-30 { margin-right: var(--mh--space--25-30); } .u-p-25-30 { padding: var(--mh--space--25-30); } .u-py-25-30 { padding-block: var(--mh--space--25-30); } .u-px-25-30 { padding-inline: var(--mh--space--25-30); } .u-pt-25-30 { padding-top: var(--mh--space--25-30); } .u-pb-25-30 { padding-bottom: var(--mh--space--25-30); } .u-pl-25-30 { padding-left: var(--mh--space--25-30); } .u-pr-25-30 { padding-right: var(--mh--space--25-30); } .u-row-gap-25-30 { row-gap: var(--mh--space--25-30); } .u-column-gap-25-30 { column-gap: var(--mh--space--25-30); } .u-space-25-60 { height: var(--mh--space--25-60); } .u-m-25-60 { margin: var(--mh--space--25-60); } .u-my-25-60 { margin-block: var(--mh--space--25-60); } .u-mx-25-60 { margin-inline: var(--mh--space--25-60); } .u-mt-25-60 { margin-top: var(--mh--space--25-60); } .u-mb-25-60 { margin-bottom: var(--mh--space--25-60); } .u-ml-25-60 { margin-left: var(--mh--space--25-60); } .u-mr-25-60 { margin-right: var(--mh--space--25-60); } .u-p-25-60 { padding: var(--mh--space--25-60); } .u-py-25-60 { padding-block: var(--mh--space--25-60); } .u-px-25-60 { padding-inline: var(--mh--space--25-60); } .u-pt-25-60 { padding-top: var(--mh--space--25-60); } .u-pb-25-60 { padding-bottom: var(--mh--space--25-60); } .u-pl-25-60 { padding-left: var(--mh--space--25-60); } .u-pr-25-60 { padding-right: var(--mh--space--25-60); } .u-row-gap-25-60 { row-gap: var(--mh--space--25-60); } .u-column-gap-25-60 { column-gap: var(--mh--space--25-60); } .u-space-25-70 { height: var(--mh--space--25-70); } .u-m-25-70 { margin: var(--mh--space--25-70); } .u-my-25-70 { margin-block: var(--mh--space--25-70); } .u-mx-25-70 { margin-inline: var(--mh--space--25-70); } .u-mt-25-70 { margin-top: var(--mh--space--25-70); } .u-mb-25-70 { margin-bottom: var(--mh--space--25-70); } .u-ml-25-70 { margin-left: var(--mh--space--25-70); } .u-mr-25-70 { margin-right: var(--mh--space--25-70); } .u-p-25-70 { padding: var(--mh--space--25-70); } .u-py-25-70 { padding-block: var(--mh--space--25-70); } .u-px-25-70 { padding-inline: var(--mh--space--25-70); } .u-pt-25-70 { padding-top: var(--mh--space--25-70); } .u-pb-25-70 { padding-bottom: var(--mh--space--25-70); } .u-pl-25-70 { padding-left: var(--mh--space--25-70); } .u-pr-25-70 { padding-right: var(--mh--space--25-70); } .u-row-gap-25-70 { row-gap: var(--mh--space--25-70); } .u-column-gap-25-70 { column-gap: var(--mh--space--25-70); } .u-space-25-80 { height: var(--mh--space--25-80); } .u-m-25-80 { margin: var(--mh--space--25-80); } .u-my-25-80 { margin-block: var(--mh--space--25-80); } .u-mx-25-80 { margin-inline: var(--mh--space--25-80); } .u-mt-25-80 { margin-top: var(--mh--space--25-80); } .u-mb-25-80 { margin-bottom: var(--mh--space--25-80); } .u-ml-25-80 { margin-left: var(--mh--space--25-80); } .u-mr-25-80 { margin-right: var(--mh--space--25-80); } .u-p-25-80 { padding: var(--mh--space--25-80); } .u-py-25-80 { padding-block: var(--mh--space--25-80); } .u-px-25-80 { padding-inline: var(--mh--space--25-80); } .u-pt-25-80 { padding-top: var(--mh--space--25-80); } .u-pb-25-80 { padding-bottom: var(--mh--space--25-80); } .u-pl-25-80 { padding-left: var(--mh--space--25-80); } .u-pr-25-80 { padding-right: var(--mh--space--25-80); } .u-row-gap-25-80 { row-gap: var(--mh--space--25-80); } .u-column-gap-25-80 { column-gap: var(--mh--space--25-80); } .u-space-30-30 { height: var(--mh--space--30-30); } .u-m-30-30 { margin: var(--mh--space--30-30); } .u-my-30-30 { margin-block: var(--mh--space--30-30); } .u-mx-30-30 { margin-inline: var(--mh--space--30-30); } .u-mt-30-30 { margin-top: var(--mh--space--30-30); } .u-mb-30-30 { margin-bottom: var(--mh--space--30-30); } .u-ml-30-30 { margin-left: var(--mh--space--30-30); } .u-mr-30-30 { margin-right: var(--mh--space--30-30); } .u-p-30-30 { padding: var(--mh--space--30-30); } .u-py-30-30 { padding-block: var(--mh--space--30-30); } .u-px-30-30 { padding-inline: var(--mh--space--30-30); } .u-pt-30-30 { padding-top: var(--mh--space--30-30); } .u-pb-30-30 { padding-bottom: var(--mh--space--30-30); } .u-pl-30-30 { padding-left: var(--mh--space--30-30); } .u-pr-30-30 { padding-right: var(--mh--space--30-30); } .u-row-gap-30-30 { row-gap: var(--mh--space--30-30); } .u-column-gap-30-30 { column-gap: var(--mh--space--30-30); } .u-space-30-40 { height: var(--mh--space--30-40); } .u-m-30-40 { margin: var(--mh--space--30-40); } .u-my-30-40 { margin-block: var(--mh--space--30-40); } .u-mx-30-40 { margin-inline: var(--mh--space--30-40); } .u-mt-30-40 { margin-top: var(--mh--space--30-40); } .u-mb-30-40 { margin-bottom: var(--mh--space--30-40); } .u-ml-30-40 { margin-left: var(--mh--space--30-40); } .u-mr-30-40 { margin-right: var(--mh--space--30-40); } .u-p-30-40 { padding: var(--mh--space--30-40); } .u-py-30-40 { padding-block: var(--mh--space--30-40); } .u-px-30-40 { padding-inline: var(--mh--space--30-40); } .u-pt-30-40 { padding-top: var(--mh--space--30-40); } .u-pb-30-40 { padding-bottom: var(--mh--space--30-40); } .u-pl-30-40 { padding-left: var(--mh--space--30-40); } .u-pr-30-40 { padding-right: var(--mh--space--30-40); } .u-row-gap-30-40 { row-gap: var(--mh--space--30-40); } .u-column-gap-30-40 { column-gap: var(--mh--space--30-40); } .u-space-30-50 { height: var(--mh--space--30-50); } .u-m-30-50 { margin: var(--mh--space--30-50); } .u-my-30-50 { margin-block: var(--mh--space--30-50); } .u-mx-30-50 { margin-inline: var(--mh--space--30-50); } .u-mt-30-50 { margin-top: var(--mh--space--30-50); } .u-mb-30-50 { margin-bottom: var(--mh--space--30-50); } .u-ml-30-50 { margin-left: var(--mh--space--30-50); } .u-mr-30-50 { margin-right: var(--mh--space--30-50); } .u-p-30-50 { padding: var(--mh--space--30-50); } .u-py-30-50 { padding-block: var(--mh--space--30-50); } .u-px-30-50 { padding-inline: var(--mh--space--30-50); } .u-pt-30-50 { padding-top: var(--mh--space--30-50); } .u-pb-30-50 { padding-bottom: var(--mh--space--30-50); } .u-pl-30-50 { padding-left: var(--mh--space--30-50); } .u-pr-30-50 { padding-right: var(--mh--space--30-50); } .u-row-gap-30-50 { row-gap: var(--mh--space--30-50); } .u-column-gap-30-50 { column-gap: var(--mh--space--30-50); } .u-space-30-80 { height: var(--mh--space--30-80); } .u-m-30-80 { margin: var(--mh--space--30-80); } .u-my-30-80 { margin-block: var(--mh--space--30-80); } .u-mx-30-80 { margin-inline: var(--mh--space--30-80); } .u-mt-30-80 { margin-top: var(--mh--space--30-80); } .u-mb-30-80 { margin-bottom: var(--mh--space--30-80); } .u-ml-30-80 { margin-left: var(--mh--space--30-80); } .u-mr-30-80 { margin-right: var(--mh--space--30-80); } .u-p-30-80 { padding: var(--mh--space--30-80); } .u-py-30-80 { padding-block: var(--mh--space--30-80); } .u-px-30-80 { padding-inline: var(--mh--space--30-80); } .u-pt-30-80 { padding-top: var(--mh--space--30-80); } .u-pb-30-80 { padding-bottom: var(--mh--space--30-80); } .u-pl-30-80 { padding-left: var(--mh--space--30-80); } .u-pr-30-80 { padding-right: var(--mh--space--30-80); } .u-row-gap-30-80 { row-gap: var(--mh--space--30-80); } .u-column-gap-30-80 { column-gap: var(--mh--space--30-80); } .u-space-40-100 { height: var(--mh--space--40-100); } .u-m-40-100 { margin: var(--mh--space--40-100); } .u-my-40-100 { margin-block: var(--mh--space--40-100); } .u-mx-40-100 { margin-inline: var(--mh--space--40-100); } .u-mt-40-100 { margin-top: var(--mh--space--40-100); } .u-mb-40-100 { margin-bottom: var(--mh--space--40-100); } .u-ml-40-100 { margin-left: var(--mh--space--40-100); } .u-mr-40-100 { margin-right: var(--mh--space--40-100); } .u-p-40-100 { padding: var(--mh--space--40-100); } .u-py-40-100 { padding-block: var(--mh--space--40-100); } .u-px-40-100 { padding-inline: var(--mh--space--40-100); } .u-pt-40-100 { padding-top: var(--mh--space--40-100); } .u-pb-40-100 { padding-bottom: var(--mh--space--40-100); } .u-pl-40-100 { padding-left: var(--mh--space--40-100); } .u-pr-40-100 { padding-right: var(--mh--space--40-100); } .u-row-gap-40-100 { row-gap: var(--mh--space--40-100); } .u-column-gap-40-100 { column-gap: var(--mh--space--40-100); } .u-space-40-120 { height: var(--mh--space--40-120); } .u-m-40-120 { margin: var(--mh--space--40-120); } .u-my-40-120 { margin-block: var(--mh--space--40-120); } .u-mx-40-120 { margin-inline: var(--mh--space--40-120); } .u-mt-40-120 { margin-top: var(--mh--space--40-120); } .u-mb-40-120 { margin-bottom: var(--mh--space--40-120); } .u-ml-40-120 { margin-left: var(--mh--space--40-120); } .u-mr-40-120 { margin-right: var(--mh--space--40-120); } .u-p-40-120 { padding: var(--mh--space--40-120); } .u-py-40-120 { padding-block: var(--mh--space--40-120); } .u-px-40-120 { padding-inline: var(--mh--space--40-120); } .u-pt-40-120 { padding-top: var(--mh--space--40-120); } .u-pb-40-120 { padding-bottom: var(--mh--space--40-120); } .u-pl-40-120 { padding-left: var(--mh--space--40-120); } .u-pr-40-120 { padding-right: var(--mh--space--40-120); } .u-row-gap-40-120 { row-gap: var(--mh--space--40-120); } .u-column-gap-40-120 { column-gap: var(--mh--space--40-120); } .u-space-40-60 { height: var(--mh--space--40-60); } .u-m-40-60 { margin: var(--mh--space--40-60); } .u-my-40-60 { margin-block: var(--mh--space--40-60); } .u-mx-40-60 { margin-inline: var(--mh--space--40-60); } .u-mt-40-60 { margin-top: var(--mh--space--40-60); } .u-mb-40-60 { margin-bottom: var(--mh--space--40-60); } .u-ml-40-60 { margin-left: var(--mh--space--40-60); } .u-mr-40-60 { margin-right: var(--mh--space--40-60); } .u-p-40-60 { padding: var(--mh--space--40-60); } .u-py-40-60 { padding-block: var(--mh--space--40-60); } .u-px-40-60 { padding-inline: var(--mh--space--40-60); } .u-pt-40-60 { padding-top: var(--mh--space--40-60); } .u-pb-40-60 { padding-bottom: var(--mh--space--40-60); } .u-pl-40-60 { padding-left: var(--mh--space--40-60); } .u-pr-40-60 { padding-right: var(--mh--space--40-60); } .u-row-gap-40-60 { row-gap: var(--mh--space--40-60); } .u-column-gap-40-60 { column-gap: var(--mh--space--40-60); } .u-space-60-100 { height: var(--mh--space--60-100); } .u-m-60-100 { margin: var(--mh--space--60-100); } .u-my-60-100 { margin-block: var(--mh--space--60-100); } .u-mx-60-100 { margin-inline: var(--mh--space--60-100); } .u-mt-60-100 { margin-top: var(--mh--space--60-100); } .u-mb-60-100 { margin-bottom: var(--mh--space--60-100); } .u-ml-60-100 { margin-left: var(--mh--space--60-100); } .u-mr-60-100 { margin-right: var(--mh--space--60-100); } .u-p-60-100 { padding: var(--mh--space--60-100); } .u-py-60-100 { padding-block: var(--mh--space--60-100); } .u-px-60-100 { padding-inline: var(--mh--space--60-100); } .u-pt-60-100 { padding-top: var(--mh--space--60-100); } .u-pb-60-100 { padding-bottom: var(--mh--space--60-100); } .u-pl-60-100 { padding-left: var(--mh--space--60-100); } .u-pr-60-100 { padding-right: var(--mh--space--60-100); } .u-row-gap-60-100 { row-gap: var(--mh--space--60-100); } .u-column-gap-60-100 { column-gap: var(--mh--space--60-100); } .u-space-60-160 { height: var(--mh--space--60-160); } .u-m-60-160 { margin: var(--mh--space--60-160); } .u-my-60-160 { margin-block: var(--mh--space--60-160); } .u-mx-60-160 { margin-inline: var(--mh--space--60-160); } .u-mt-60-160 { margin-top: var(--mh--space--60-160); } .u-mb-60-160 { margin-bottom: var(--mh--space--60-160); } .u-ml-60-160 { margin-left: var(--mh--space--60-160); } .u-mr-60-160 { margin-right: var(--mh--space--60-160); } .u-p-60-160 { padding: var(--mh--space--60-160); } .u-py-60-160 { padding-block: var(--mh--space--60-160); } .u-px-60-160 { padding-inline: var(--mh--space--60-160); } .u-pt-60-160 { padding-top: var(--mh--space--60-160); } .u-pb-60-160 { padding-bottom: var(--mh--space--60-160); } .u-pl-60-160 { padding-left: var(--mh--space--60-160); } .u-pr-60-160 { padding-right: var(--mh--space--60-160); } .u-row-gap-60-160 { row-gap: var(--mh--space--60-160); } .u-column-gap-60-160 { column-gap: var(--mh--space--60-160); } .u-mx-auto { margin-inline: auto; }