@charset "UTF-8"; /* ======================================= このCSSファイルはSassにて生成されています。 This file is created by Sass Files. =========================================*/ /* --------------------------------------- Reset/ Basic Settings -----------------------------------------*/ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* --------------------------------------- Basic Settings -----------------------------------------*/ :root { --cl-primary: #ef6000; --cl-accent: #b94047; --cl-border: #dcdcdc; --cl-bg: #ffede1; --cl-bg02: #f6f6f6; --cl-text: #000; --cl-link: #000; --cl-link-hover: #000; --cl-gray: #ccc; --cl-white: #fff; --font-awesome: "Font Awesome 6 Free"; --font-noto: "Noto Sans JP", sans-serif; --font-thin: 300; --font-regular: 400; --font-bold: 600; --scale: 1.1; --opacity: 0.8; --trim-leading: calc((1em - 1lh) / 2); --transition: 0.3s ease-in-out; } html body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -ms-touch-action: manipulation; touch-action: manipulation; font-family: var(--font-noto); font-size: 1rem; background-color: var(--cl-white); color: var(--cl-text); line-height: 1.5; display: grid; grid-template: "header" auto "contents" 1fr "footer" auto/1fr; min-height: 100dvh; overflow-x: clip; } html body img { width: 100%; height: auto; vertical-align: bottom; font-size: 0; line-height: 0; } html body a { color: var(--cl-link); text-decoration: none; word-break: break-all; -webkit-transition: var(--transition); transition: var(--transition); } html body a:hover, html body a:link, html body a:visited, html body a:active { text-decoration: none; } @media (any-hover: hover) { html body a:hover { color: var(--cl-link-hover); opacity: var(--opacity); } } html body textarea, html body input, html body select { background-color: var(--cl-white); border: var(--cl-border) 1px solid; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 3px; } html body.modal-open { overflow: hidden; } /* --------------------------------------- Layout -----------------------------------------*/ /* --------------------------------------- Header -----------------------------------------*/ .l-header { grid-area: header; background-color: var(--cl-white); position: sticky; width: 100%; top: 0; left: 0; z-index: 10000; -webkit-transition: all 0.3s; transition: all 0.3s; } .l-header__wrapper { width: 100%; margin-inline: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (width > 1400px) { .l-header__wrapper { height: 5rem; } } @media screen and (width <= 1400px) { .l-header__wrapper { height: 5.7142857143vw; } } @media screen and (width <= 768px) { .l-header__wrapper { height: 16vw; } } @media screen and (width > 1400px) { .l-header__logo { width: 14.75rem; height: 2.3125rem; margin-left: 2.625rem; } } @media screen and (width <= 1400px) { .l-header__logo { width: 16.8571428571vw; height: 2.6428571429vw; margin-left: 3vw; } } @media screen and (width <= 768px) { .l-header__logo { width: 53.3333333333vw; height: auto; margin-left: 4.2666666667vw; } } .l-header__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .l-header.is_sticked { background-color: rgba(255, 255, 255, 0.9); } /* --------------------------------------- Global Navigation -----------------------------------------*/ .l-gNavi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (width > 1400px) { .l-gNavi { gap: 2.5rem; } } @media screen and (width <= 1400px) { .l-gNavi { gap: 2.8571428571vw; } } @media screen and (width <= 768px) { .l-gNavi { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; background-color: rgba(255, 255, 255, 0.9); position: fixed; width: 100%; left: 0; top: 16vw; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } } @media screen and (width <= 768px) and (width <= 768px) { .l-gNavi.is_active { -webkit-transform: translateX(0%); transform: translateX(0%); } } .l-gNavi__list { display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (width > 1400px) { .l-gNavi__list { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } } @media screen and (width <= 1400px) { .l-gNavi__list { -webkit-column-gap: 2.2857142857vw; -moz-column-gap: 2.2857142857vw; column-gap: 2.2857142857vw; } } @media screen and (width <= 768px) { .l-gNavi__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } } @media screen and (width > 1400px) { .l-gNavi__list li { font-size: 1rem; } } @media screen and (width <= 1400px) { .l-gNavi__list li { font-size: 16px; font-size: 1.1428571429vw; } } @media screen and (width <= 768px) { .l-gNavi__list li { width: 100%; border-bottom: var(--cl-border) 1px solid; font-size: 16px; font-size: 4.2666666667vw; } .l-gNavi__list li a { display: block; padding: 4.2666666667vw 6.4vw; position: relative; } .l-gNavi__list li a::before { content: "\f054"; font-family: var(--font-awesome); font-weight: 900; position: absolute; top: 50%; right: 4.2666666667vw; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } .l-gNavi__icon-list { display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (width <= 768px) { .l-gNavi__icon-list { width: 100%; background-color: var(--cl-white); border-bottom: #e4e4e4 1px solid; } } @media screen and (width > 1400px) { .l-gNavi__icon-list li { width: 7.5rem; height: 5rem; } } @media screen and (width <= 1400px) { .l-gNavi__icon-list li { width: 8.5714285714vw; height: 5.7142857143vw; } } @media screen and (width <= 768px) { .l-gNavi__icon-list li { width: 33.3333333333%; height: 16vw; } } .l-gNavi__icon-list li:not(:last-child) { border-left: #e4e4e4 1px solid; } .l-gNavi__icon-list li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } @media screen and (width > 1400px) { .l-gNavi__icon-list li a { gap: 0.5rem; font-size: 1rem; } } @media screen and (width <= 1400px) { .l-gNavi__icon-list li a { gap: 0.5714285714vw; font-size: 16px; font-size: 1.1428571429vw; } } @media screen and (width <= 768px) { .l-gNavi__icon-list li a { gap: 1.0666666667vw; font-size: 14px; font-size: 3.7333333333vw; } } .l-gNavi__icon-list li a::before { content: ""; display: inline-block; background-position: center center; background-size: contain; background-repeat: no-repeat; } @media screen and (width > 1400px) { .l-gNavi__icon-list li a::before { width: 1.5rem; height: 1.5rem; } } @media screen and (width <= 1400px) { .l-gNavi__icon-list li a::before { width: 1.7142857143vw; height: 1.7142857143vw; } } @media screen and (width <= 768px) { .l-gNavi__icon-list li a::before { width: 6.4vw; height: 6.4vw; } } .l-gNavi__icon-list li a.-news { text-transform: uppercase; } .l-gNavi__icon-list li a.-news::before { background-image: url("../img/layout/header/icon_news.png"); } .l-gNavi__icon-list li a.-access::before { background-image: url("../img/layout/header/icon_access.png"); } .l-gNavi__icon-list li a.-contact { background-color: var(--cl-primary); } .l-gNavi__icon-list li a.-contact::before { background-image: url("../img/layout/header/icon_contact.png"); } @media screen and (width > 768px) { .l-gNavi__spNavi { display: none; } } @media screen and (width <= 768px) { .l-gNavi__spNavi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 16vw; height: 16vw; background-color: var(--cl-primary); font-size: 12px; font-size: 3.2vw; font-weight: var(--font-bold); text-transform: uppercase; } .l-gNavi__spNavi::before { content: "\f0d1"; font-family: var(--font-awesome); font-weight: 900; font-size: 22px; font-size: 5.8666666667vw; color: var(--cl-white); display: inline-block; background-position: center center; background-size: contain; background-repeat: no-repeat; } } .l-gNavi__spNavi.is_active::before { content: "\f00d"; } /* --------------------------------------- Main -----------------------------------------*/ .l-main { grid-area: contents; position: relative; } .l-main::before { content: ""; display: block; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0))); background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); background-blend-mode: multiply; opacity: 0.2; } @media screen and (width > 1400px) { .l-main::before { height: 0.9375rem; } } @media screen and (width <= 1400px) { .l-main::before { height: 1.0714285714vw; } } @media screen and (width <= 768px) { .l-main::before { height: 4vw; } } /* --------------------------------------- Footer -----------------------------------------*/ .l-footer { grid-area: footer; } @media screen and (width > 1400px) { .l-footer { padding-bottom: 6.25rem; } } @media screen and (width <= 1400px) { .l-footer { padding-bottom: 7.1428571429vw; } } @media screen and (width <= 768px) { .l-footer { padding-bottom: 16vw; } } .l-footer__recruit { background-color: var(--cl-bg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (width > 1400px) { .l-footer__recruit { gap: 5rem; padding-bottom: 7.5rem; } } @media screen and (width <= 1400px) { .l-footer__recruit { gap: 5.7142857143vw; padding-bottom: 8.5714285714vw; } } @media screen and (width <= 768px) { .l-footer__recruit { gap: 10.6666666667vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 16vw; } } @media screen and (width > 1400px) { .l-footer__recruit-img { width: 60rem; height: 37.5rem; } } @media screen and (width <= 1400px) { .l-footer__recruit-img { width: 68.5714285714vw; height: 42.8571428571vw; } } @media screen and (width <= 768px) { .l-footer__recruit-img { width: 100%; height: auto; } } .l-footer__recruit-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .l-footer__recruit-textarea { -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (width > 1400px) { .l-footer__recruit-textarea { margin-right: 5rem; } } @media screen and (width <= 1400px) { .l-footer__recruit-textarea { margin-right: 5.7142857143vw; } } @media screen and (width <= 768px) { .l-footer__recruit-textarea { margin-right: 0; margin-inline: auto; width: calc(100% - 17.0666666667vw); } } .l-footer__recruit-title { font-weight: var(--font-bold); letter-spacing: 0.05em; color: var(--cl-primary); } @media screen and (width > 1400px) { .l-footer__recruit-title { font-size: 3.75rem; } } @media screen and (width <= 1400px) { .l-footer__recruit-title { font-size: 60px; font-size: 4.2857142857vw; } } @media screen and (width <= 768px) { .l-footer__recruit-title { font-size: 28px; font-size: 7.4666666667vw; } } .l-footer__recruit-text { font-weight: var(--font-bold); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .l-footer__recruit-text { font-size: 2.25rem; margin-top: 2rem; } } @media screen and (width <= 1400px) { .l-footer__recruit-text { font-size: 36px; font-size: 2.5714285714vw; margin-top: 2.2857142857vw; } } @media screen and (width <= 768px) { .l-footer__recruit-text { font-size: 18px; font-size: 4.8vw; margin-top: 4.2666666667vw; } } @media screen and (width > 1400px) { .l-footer__recruit-list { margin-top: 2rem; } } @media screen and (width <= 1400px) { .l-footer__recruit-list { margin-top: 2.2857142857vw; } } @media screen and (width <= 768px) { .l-footer__recruit-list { margin-top: 4.2666666667vw; } } .l-footer__recruit-list li { font-weight: var(--font-thin); letter-spacing: 0.05em; line-height: 2; } @media screen and (width > 1400px) { .l-footer__recruit-list li { font-size: 1.5rem; } } @media screen and (width <= 1400px) { .l-footer__recruit-list li { font-size: 24px; font-size: 1.7142857143vw; } } @media screen and (width <= 768px) { .l-footer__recruit-list li { font-size: 14px; font-size: 3.7333333333vw; } } .l-footer__recruit-list li::before { content: "・"; } @media screen and (width > 1400px) { .l-footer__recruit-btn { max-width: 14.375rem; } } @media screen and (width <= 1400px) { .l-footer__recruit-btn { max-width: 16.4285714286vw; } } @media screen and (width <= 768px) { .l-footer__recruit-btn { max-width: 100%; } } .l-footer__access { background-color: #8d8d8d; } @media screen and (width > 1400px) { .l-footer__access { padding-block: 5rem 7rem; } } @media screen and (width <= 1400px) { .l-footer__access { padding-block: 5.7142857143vw 8vw; } } @media screen and (width <= 768px) { .l-footer__access { padding-block: 0 10.6666666667vw; } } .l-footer__access-wrapper { width: 100%; margin-inline: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (width > 1400px) { .l-footer__access-wrapper { max-width: 80rem; gap: 3.75rem; } } @media screen and (width <= 1400px) { .l-footer__access-wrapper { max-width: 91.4285714286vw; gap: 4.2857142857vw; } } @media screen and (width <= 768px) { .l-footer__access-wrapper { max-width: 100%; gap: 8vw; } } .l-footer__access-block { display: grid; } @media screen and (width > 1400px) { .l-footer__access-block { grid-template-columns: auto 1fr; gap: 5rem; } } @media screen and (width <= 1400px) { .l-footer__access-block { grid-template-columns: auto 1fr; gap: 5.7142857143vw; } } @media screen and (width <= 768px) { .l-footer__access-block { grid-template-columns: 1fr; gap: 4.2666666667vw; } } .l-footer__access-map { aspect-ratio: 1.414/1; overflow: hidden; } @media screen and (width > 1400px) { .l-footer__access-map { width: 25rem; } } @media screen and (width <= 1400px) { .l-footer__access-map { width: 28.5714285714vw; } } @media screen and (width <= 768px) { .l-footer__access-map { width: 100%; } } .l-footer__access-map iframe { width: 100%; height: 100%; border: none; } @media screen and (width <= 768px) { .l-footer__access-textarea { margin-inline: auto; width: calc(100% - 17.0666666667vw); } } .l-footer__access-name { font-weight: var(--font-bold); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .l-footer__access-name { font-size: 1.5rem; } } @media screen and (width <= 1400px) { .l-footer__access-name { font-size: 24px; font-size: 1.7142857143vw; } } @media screen and (width <= 768px) { .l-footer__access-name { font-size: 18px; font-size: 4.8vw; } } .l-footer__access-address { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media screen and (width > 1400px) { .l-footer__access-address { margin-top: 1rem; gap: 1rem; } } @media screen and (width <= 1400px) { .l-footer__access-address { margin-top: 1.1428571429vw; gap: 1.1428571429vw; } } @media screen and (width <= 768px) { .l-footer__access-address { margin-top: 2.1333333333vw; gap: 2.1333333333vw; } } .l-footer__access-address dt { background-color: #d5d5d5; font-weight: var(--font-bold); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .l-footer__access-address dt { font-size: 1.125rem; padding: 0.0625rem 1rem; } } @media screen and (width <= 1400px) { .l-footer__access-address dt { font-size: 18px; font-size: 1.2857142857vw; padding: 0.0714285714vw 1.1428571429vw; } } @media screen and (width <= 768px) { .l-footer__access-address dt { font-size: 16px; font-size: 4.2666666667vw; padding: 0.2666666667vw 4.2666666667vw; } } .l-footer__access-address dd { font-weight: var(--font-thin); } @media screen and (width > 1400px) { .l-footer__access-address dd { font-size: 1rem; } } @media screen and (width <= 1400px) { .l-footer__access-address dd { font-size: 16px; font-size: 1.1428571429vw; } } @media screen and (width <= 768px) { .l-footer__access-address dd { font-size: 14px; font-size: 3.7333333333vw; } } .l-footer__access-info { border-top: var(--cl-text) 1px solid; } @media screen and (width > 1400px) { .l-footer__access-info { padding-top: 1rem; margin-top: 2rem; } } @media screen and (width <= 1400px) { .l-footer__access-info { padding-top: 1.1428571429vw; margin-top: 2.2857142857vw; } } @media screen and (width <= 768px) { .l-footer__access-info { padding-top: 2.1333333333vw; margin-top: 4.2666666667vw; } } .l-footer__access-title { font-weight: var(--font-bold); } @media screen and (width > 1400px) { .l-footer__access-title { font-size: 1rem; } } @media screen and (width <= 1400px) { .l-footer__access-title { font-size: 16px; font-size: 1.1428571429vw; } } @media screen and (width <= 768px) { .l-footer__access-title { font-size: 14px; font-size: 3.7333333333vw; } } .l-footer__access-dl { display: grid; } @media screen and (width > 1400px) { .l-footer__access-dl { grid-template-columns: auto 1fr; gap: 0.5rem; margin-top: 1rem; } } @media screen and (width <= 1400px) { .l-footer__access-dl { grid-template-columns: auto 1fr; gap: 0.5714285714vw; margin-top: 1.1428571429vw; } } @media screen and (width <= 768px) { .l-footer__access-dl { grid-template-columns: 1fr; gap: 1.0666666667vw; margin-top: 2.1333333333vw; } } @media screen and (width > 1400px) { .l-footer__access-dl dt, .l-footer__access-dl dd { font-size: 0.875rem; } } @media screen and (width <= 1400px) { .l-footer__access-dl dt, .l-footer__access-dl dd { font-size: 14px; font-size: 1vw; } } @media screen and (width <= 768px) { .l-footer__access-dl dt, .l-footer__access-dl dd { font-size: 12px; font-size: 3.2vw; } } .l-footer__access-dl dt { font-weight: var(--font-bold); } .l-footer__access-dl dt::before { content: "●"; } .l-footer__access-dl dd { font-weight: var(--font-thin); } .l-footer__copyright { background-color: #8d8d8d; text-align: center; } @media screen and (width > 1400px) { .l-footer__copyright { font-size: 0.875rem; padding-bottom: 7.5rem; } } @media screen and (width <= 1400px) { .l-footer__copyright { font-size: 14px; font-size: 1vw; padding-bottom: 8.5714285714vw; } } @media screen and (width <= 768px) { .l-footer__copyright { font-size: 12px; font-size: 3.2vw; padding-bottom: 16vw; } } .l-fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--cl-text); -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; padding-bottom: env(safe-area-inset-bottom); } @media screen and (width > 1400px) { .l-fixed-footer { height: 6.25rem; } } @media screen and (width <= 1400px) { .l-fixed-footer { height: 7.1428571429vw; } } @media screen and (width <= 768px) { .l-fixed-footer { height: 16vw; } } .l-fixed-footer::before { content: ""; display: block; width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); background-blend-mode: multiply; opacity: 0.3; position: absolute; left: 0; } @media screen and (width > 1400px) { .l-fixed-footer::before { height: 0.625rem; top: -0.625rem; } } @media screen and (width <= 1400px) { .l-fixed-footer::before { height: 0.7142857143vw; top: -0.7142857143vw; } } @media screen and (width <= 768px) { .l-fixed-footer::before { height: 2.6666666667vw; top: -2.6666666667vw; } } .l-fixed-footer__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (width > 1400px) { .l-fixed-footer__wrapper { padding: 0.625rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__wrapper { padding: 0.7142857143vw; } } @media screen and (width <= 768px) { .l-fixed-footer__wrapper { padding: 0; } } @media screen and (width > 1400px) { .l-fixed-footer__logo { width: 16.125rem; margin-left: 2.5rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__logo { width: 18.4285714286vw; margin-left: 2.8571428571vw; } } @media screen and (width <= 768px) { .l-fixed-footer__logo { display: none; } } .l-fixed-footer__logo img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .l-fixed-footer__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (width > 1400px) { .l-fixed-footer__nav { gap: 0.625rem; } } @media screen and (width > 1400px) { .l-fixed-footer__nav { gap: 0.625rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__nav { gap: 0.7142857143vw; } } @media screen and (width <= 768px) { .l-fixed-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; } } .l-fixed-footer__text { color: var(--cl-primary); -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (width > 1400px) { .l-fixed-footer__text { font-size: 1rem; margin-right: 2.25rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__text { font-size: 16px; font-size: 1.1428571429vw; margin-right: 2.5714285714vw; } } @media screen and (width <= 768px) { .l-fixed-footer__text { display: none; } } .l-fixed-footer__tel-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } @media screen and (width > 1400px) { .l-fixed-footer__tel-wrapper { max-width: 15.625rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__tel-wrapper { max-width: 17.8571428571vw; } } @media screen and (width <= 768px) { .l-fixed-footer__tel-wrapper { display: none; } } .l-fixed-footer__tel { color: var(--cl-primary); font-weight: var(--font-bold); letter-spacing: 0.05em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (width > 1400px) { .l-fixed-footer__tel { font-size: 1.625rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__tel { font-size: 26px; font-size: 1.8571428571vw; } } .l-fixed-footer__tel::before { content: ""; display: block; background-image: url("../img/layout/footer/icon_tel.png"); background-position: center center; background-size: contain; background-repeat: no-repeat; } @media screen and (width > 1400px) { .l-fixed-footer__tel::before { width: 2.125rem; height: 1.6875rem; margin-right: 0.5rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__tel::before { width: 2.4285714286vw; height: 1.9285714286vw; margin-right: 0.5714285714vw; } } .l-fixed-footer__tel-note { color: var(--cl-primary); font-weight: var(--font-bold); letter-spacing: 0.05em; border-top: var(--cl-primary) 1px solid; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (width > 1400px) { .l-fixed-footer__tel-note { font-size: 0.875rem; margin-top: 0.25rem; padding-top: 0.5rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__tel-note { font-size: 14px; font-size: 1vw; margin-top: 0.2857142857vw; padding-top: 0.5714285714vw; } } @media screen and (width <= 768px) { .l-fixed-footer__tel-note { display: none; } } .l-fixed-footer__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: var(--font-bold); } @media screen and (width > 1400px) { .l-fixed-footer__btn { width: 13.75rem; height: 5rem; font-size: 1rem; gap: 1rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__btn { width: 15.7142857143vw; height: 5.7142857143vw; font-size: 16px; font-size: 1.1428571429vw; gap: 1.1428571429vw; } } @media screen and (width <= 768px) { .l-fixed-footer__btn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 16vw; font-size: 14px; font-size: 3.7333333333vw; } } .l-fixed-footer__btn span { display: block; } .l-fixed-footer__btn::before { content: ""; display: block; background-image: url("../img/layout/header/icon_contact.png"); background-position: center center; background-size: contain; background-repeat: no-repeat; } @media screen and (width > 1400px) { .l-fixed-footer__btn::before { width: 2.125rem; height: 2.125rem; } } @media screen and (width <= 1400px) { .l-fixed-footer__btn::before { width: 2.4285714286vw; height: 2.4285714286vw; } } @media screen and (width <= 768px) { .l-fixed-footer__btn::before { width: 6.4vw; height: 6.4vw; } } .l-fixed-footer__btn.-tel { display: none; background-color: var(--cl-white); } @media screen and (width <= 768px) { .l-fixed-footer__btn.-tel { display: -webkit-box; display: -ms-flexbox; display: flex; } } .l-fixed-footer__btn.-tel::before { background-image: url("../img/layout/footer/icon_tel.png"); } .l-fixed-footer__btn.-contact { background-color: var(--cl-primary); } .l-fixed-footer__btn.-contact::before { background-image: url("../img/layout/footer/icon_contact.png"); } .l-fixed-footer__btn.-recruit { background-color: var(--cl-white); } @media screen and (width > 1400px) { .l-fixed-footer__btn.-recruit { border: var(--cl-primary) 0.25rem solid; } } @media screen and (width <= 1400px) { .l-fixed-footer__btn.-recruit { border: var(--cl-primary) 0.2857142857vw solid; } } @media screen and (width <= 768px) { .l-fixed-footer__btn.-recruit { border: var(--cl-primary) 1.0666666667vw solid; } } .l-fixed-footer__btn.-recruit::before { background-image: url("../img/layout/footer/icon_recruit.png"); } .l-fixed-footer.is_show { -webkit-transform: translateY(0); transform: translateY(0); } /* --------------------------------------- Components -----------------------------------------*/ /* --------------------------------------- Button Group -----------------------------------------*/ @media screen and (width > 1400px) { .c-btnarea { margin-top: 4.5rem; } } @media screen and (width <= 1400px) { .c-btnarea { margin-top: 5.1428571429vw; } } @media screen and (width <= 768px) { .c-btnarea { margin-top: 9.6vw; } } .c-btnarea--center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* --------------------------------------- Button -----------------------------------------*/ .c-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-color: transparent; border-radius: 9999px; text-transform: uppercase; font-weight: var(--font-bold); letter-spacing: 0.05em; width: 100%; cursor: pointer; -webkit-transition: var(--transition); transition: var(--transition); } @media screen and (width > 1400px) { .c-btn { height: 3.125rem; font-size: 1rem; } } @media screen and (width <= 1400px) { .c-btn { height: 3.5714285714vw; font-size: 16px; font-size: 1.1428571429vw; } } @media screen and (width <= 768px) { .c-btn { height: 13.3333333333vw; font-size: 16px; font-size: 4.2666666667vw; } } .c-btn--black { background-color: var(--cl-text); color: var(--cl-white); } @media (any-hover: hover) { .c-btn--black:hover { color: var(--cl-white); } } .c-btn--primary { background-color: var(--cl-primary); } .c-btn--mail { position: relative; } .c-btn--mail::after { content: ""; background-image: url("../img/common/icon_mail.png"); background-repeat: no-repeat; background-size: contain; display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (width > 1400px) { .c-btn--mail::after { width: 2.1875rem; height: 1.625rem; right: 1.5rem; } } @media screen and (width <= 1400px) { .c-btn--mail::after { width: 2.5vw; height: 1.8571428571vw; right: 1.7142857143vw; } } @media screen and (width <= 768px) { .c-btn--mail::after { width: 9.3333333333vw; height: 6.9333333333vw; right: 6.4vw; } } @media (any-hover: hover) { .c-btn--contact:hover { opacity: var(--opacity); } } @media screen and (width > 1400px) { .c-btn--pdf { gap: 1rem; } } @media screen and (width <= 1400px) { .c-btn--pdf { gap: 1.1428571429vw; } } @media screen and (width <= 768px) { .c-btn--pdf { gap: 2.1333333333vw; } } .c-btn--pdf::after { content: "\f1c1"; font-family: var(--font-awesome); font-weight: bold; color: var(--cl-white); } @media screen and (width > 1400px) { .c-btn--sm { max-width: 14.375rem; } } @media screen and (width <= 1400px) { .c-btn--sm { max-width: 16.4285714286vw; } } @media screen and (width <= 768px) { .c-btn--sm { max-width: 100%; } } .c-btn:disabled { background-color: #cecece; cursor: not-allowed; } /* --------------------------------------- Form -----------------------------------------*/ .form-block__flow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (width > 1400px) { .form-block__flow { gap: 3.75rem; } } @media screen and (width <= 1400px) { .form-block__flow { gap: 4.2857142857vw; } } @media screen and (width <= 768px) { .form-block__flow { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8vw; } } .form-block__flow li { background-color: #f1f1f1; color: #cecece; font-weight: var(--font-bold); letter-spacing: 0.05em; display: grid; place-content: center; width: 100%; position: relative; } @media screen and (width > 1400px) { .form-block__flow li { max-width: 12.5rem; height: 3.75rem; font-size: 1.125rem; } } @media screen and (width <= 1400px) { .form-block__flow li { max-width: 14.2857142857vw; height: 4.2857142857vw; font-size: 18px; font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .form-block__flow li { max-width: 40vw; height: 10.6666666667vw; font-size: 16px; font-size: 4.2666666667vw; } } .form-block__flow li:not(:last-child)::after { content: ""; display: block; background-color: var(--cl-bg); clip-path: polygon(0 0, 0% 100%, 100% 50%); position: absolute; } @media screen and (width > 1400px) { .form-block__flow li:not(:last-child)::after { width: 1.5rem; height: 1.75rem; top: 50%; right: -2.625rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media screen and (width <= 1400px) { .form-block__flow li:not(:last-child)::after { width: 1.7142857143vw; height: 2vw; top: 50%; right: -3vw; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media screen and (width <= 768px) { .form-block__flow li:not(:last-child)::after { width: 4.8vw; height: 3.2vw; background-color: var(--cl-bg); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); top: auto; bottom: -5.6vw; right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); } } .form-block__flow li.-active { background-color: var(--cl-bg); color: var(--cl-primary); } .form-block__text { font-weight: var(--font-thin); letter-spacing: 0.05em; line-height: 1.66; text-align: center; } @media screen and (width > 1400px) { .form-block__text { font-size: 1.125rem; margin-top: 2.5rem; } } @media screen and (width <= 1400px) { .form-block__text { font-size: 18px; font-size: 1.2857142857vw; margin-top: 2.8571428571vw; } } @media screen and (width <= 768px) { .form-block__text { font-size: 16px; font-size: 4.2666666667vw; margin-top: 4.2666666667vw; } } @media screen and (width > 1400px) { .form-block__form-wrapper { margin-top: 3.75rem; } } @media screen and (width <= 1400px) { .form-block__form-wrapper { margin-top: 4.2857142857vw; } } @media screen and (width <= 768px) { .form-block__form-wrapper { margin-top: 8.5333333333vw; } } .privacy { background-color: #f1f1f1; width: 100%; margin-inline: auto; } @media screen and (width > 1400px) { .privacy { max-width: 62.5rem; margin-top: 2.5rem; } } @media screen and (width <= 1400px) { .privacy { max-width: 71.4285714286vw; margin-top: 2.8571428571vw; } } @media screen and (width <= 768px) { .privacy { max-width: 100%; margin-top: 6.4vw; } } .privacy__wrapper { overflow-y: scroll; } @media screen and (width > 1400px) { .privacy__wrapper { padding: 1.5rem 4rem; height: 9.375rem; } } @media screen and (width <= 1400px) { .privacy__wrapper { padding: 2.2857142857vw 4.5714285714vw; height: 10.7142857143vw; } } @media screen and (width <= 768px) { .privacy__wrapper { padding: 4.2666666667vw; height: 40vw; } } .privacy__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: var(--font-bold); } @media screen and (width > 1400px) { .privacy__heading { font-size: 1.5rem; gap: 1rem; margin-bottom: 1rem; } } @media screen and (width <= 1400px) { .privacy__heading { font-size: 24px; font-size: 1.7142857143vw; gap: 1.1428571429vw; margin-bottom: 1.1428571429vw; } } @media screen and (width <= 768px) { .privacy__heading { font-size: 18px; font-size: 4.8vw; gap: 1.0666666667vw; margin-bottom: 2.1333333333vw; } } .privacy__heading::before, .privacy__heading::after { content: ""; display: block; width: 100%; height: 2px; background-color: var(--cl-text); } @media screen and (width > 1400px) { .privacy__heading::before, .privacy__heading::after { max-width: 13.125rem; -webkit-transform: translateY(0.125rem); transform: translateY(0.125rem); } } @media screen and (width <= 1400px) { .privacy__heading::before, .privacy__heading::after { max-width: 15vw; -webkit-transform: translateY(0.1428571429vw); transform: translateY(0.1428571429vw); } } @media screen and (width <= 768px) { .privacy__heading::before, .privacy__heading::after { max-width: 9.6vw; -webkit-transform: translateY(0.5333333333vw); transform: translateY(0.5333333333vw); } } .privacy__text { color: #8f8f8f; } @media screen and (width > 1400px) { .privacy__text { font-size: 1rem; } } @media screen and (width <= 1400px) { .privacy__text { font-size: 16px; font-size: 1.1428571429vw; } } @media screen and (width <= 768px) { .privacy__text { font-size: 14px; font-size: 3.7333333333vw; } } .privacy__text:not(:last-of-type) { margin-bottom: 1rem; } .privacy__agreement { text-align: center; font-weight: var(--font-thin); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .privacy__agreement { font-size: 1rem; margin-top: 2.5rem; } } @media screen and (width <= 1400px) { .privacy__agreement { font-size: 16px; font-size: 1.1428571429vw; margin-top: 2.8571428571vw; } } @media screen and (width <= 768px) { .privacy__agreement { font-size: 16px; font-size: 4.2666666667vw; margin-top: 4.2666666667vw; } } .privacy__agreement label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form__table { width: 100%; border-collapse: collapse; } .form__table th, .form__table td { text-align: left; vertical-align: top; } @media screen and (width > 1400px) { .form__table th, .form__table td { padding: 1.25rem 2.5rem; } } @media screen and (width <= 1400px) { .form__table th, .form__table td { padding: 1.4285714286vw 2.8571428571vw; } } @media screen and (width <= 768px) { .form__table th, .form__table td { padding: 4.2666666667vw; display: block; } } .form__table th { border-bottom: var(--cl-primary) 1px solid; font-weight: var(--font-bold); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .form__table th { font-size: 1.125rem; width: 21.875rem; } } @media screen and (width <= 1400px) { .form__table th { font-size: 18px; font-size: 1.2857142857vw; width: 25vw; } } @media screen and (width <= 768px) { .form__table th { font-size: 16px; font-size: 4.2666666667vw; background-color: var(--cl-bg); width: 100%; } } .form__table td { border-bottom: var(--cl-bg) 1px solid; } @media screen and (width > 1400px) { .form__table td { font-size: 1.125rem; } } @media screen and (width <= 1400px) { .form__table td { font-size: 18px; font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .form__table td { font-size: 16px; font-size: 4.2666666667vw; padding: 4.2666666667vw 0; } } .form__label { font-weight: var(--font-bold); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .form__label { font-size: 1.125rem; } } @media screen and (width <= 1400px) { .form__label { font-size: 18px; font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .form__label { font-size: 16px; font-size: 4.2666666667vw; } } .form__label--required::after { content: "※"; color: var(--cl-primary); display: inline-block; } @media screen and (width > 1400px) { .form__label--required::after { margin-left: 1rem; } } .form__select { position: relative; width: 100%; } @media screen and (width > 1400px) { .form__select { max-width: 31.25rem; } } @media screen and (width <= 1400px) { .form__select { max-width: 35.7142857143vw; } } @media screen and (width <= 768px) { .form__select { max-width: 100%; } } .form__select::after { content: "▼"; position: absolute; right: 10px; pointer-events: none; color: var(--cl-text); } @media screen and (width > 1400px) { .form__select::after { top: 0.25rem; } } @media screen and (width <= 1400px) { .form__select::after { top: 0.2857142857vw; } } @media screen and (width <= 768px) { .form__select::after { top: 2.1333333333vw; } } @media screen and (width > 1400px) { .form__submit-wrapper { margin-top: 2.5rem; } } @media screen and (width <= 1400px) { .form__submit-wrapper { margin-top: 2.8571428571vw; } } @media screen and (width <= 768px) { .form__submit-wrapper { margin-top: 6.4vw; } } .form__submit-wrapper p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (width > 1400px) { .form__submit-wrapper p { gap: 1rem; } } @media screen and (width <= 1400px) { .form__submit-wrapper p { gap: 1.1428571429vw; } } @media screen and (width <= 768px) { .form__submit-wrapper p { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.1333333333vw; } } .form__submit-wrapper .c-btn { text-align: center; } @media screen and (width > 1400px) { .form__submit-wrapper .c-btn { max-width: 31.25rem; } } @media screen and (width <= 1400px) { .form__submit-wrapper .c-btn { max-width: 35.7142857143vw; } } @media screen and (width <= 768px) { .form__submit-wrapper .c-btn { max-width: 100%; } } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=file], select, textarea { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (width > 1400px) { input[type=text], input[type=email], input[type=tel], input[type=number], input[type=file], select, textarea { max-width: 31.25rem; font-size: 1rem; padding: 0.25rem 0.5rem; } } @media screen and (width <= 1400px) { input[type=text], input[type=email], input[type=tel], input[type=number], input[type=file], select, textarea { max-width: 35.7142857143vw; font-size: 16px; font-size: 1.1428571429vw; padding: 0.2857142857vw 0.5714285714vw; } } @media screen and (width <= 768px) { input[type=text], input[type=email], input[type=tel], input[type=number], input[type=file], select, textarea { max-width: 100%; font-size: 16px; font-size: 4.2666666667vw; padding: 2.1333333333vw; } } input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=file]::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--cl-border); } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=file]::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder { color: var(--cl-border); } input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=file]:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--cl-border); } input[type=text]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=number]::-ms-input-placeholder, input[type=file]::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder { color: var(--cl-border); } input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder, input[type=file]::placeholder, select::placeholder, textarea::placeholder { color: var(--cl-border); } input[type=checkbox], input[type=radio] { position: relative; } @media screen and (width > 1400px) { input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; margin-right: 1rem; } } @media screen and (width <= 1400px) { input[type=checkbox], input[type=radio] { width: 1.4285714286vw; height: 1.4285714286vw; margin-right: 1.1428571429vw; } } @media screen and (width <= 768px) { input[type=checkbox], input[type=radio] { width: 4.2666666667vw; height: 4.2666666667vw; margin-right: 2.1333333333vw; } } input[type=radio] { border-radius: 50%; } input[type=radio]:checked::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: var(--cl-primary); border-radius: 50%; } @media screen and (width > 1400px) { input[type=radio]:checked::before { width: 0.75rem; height: 0.75rem; } } @media screen and (width <= 1400px) { input[type=radio]:checked::before { width: 0.8571428571vw; height: 0.8571428571vw; } } @media screen and (width <= 768px) { input[type=radio]:checked::before { width: 2.6666666667vw; height: 2.6666666667vw; } } input[type=checkbox]:checked { background-color: var(--cl-primary); border: var(--cl-primary) 1px solid; } input[type=checkbox]:checked::before { content: ""; position: absolute; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media screen and (width > 1400px) { input[type=checkbox]:checked::before { border-bottom: 0.125rem solid var(--cl-white); border-left: 0.125rem solid var(--cl-white); top: 0.25rem; left: 0.1875rem; width: 0.75rem; height: 0.375rem; } } @media screen and (width <= 1400px) { input[type=checkbox]:checked::before { border-bottom: 0.1428571429vw solid var(--cl-white); border-left: 0.1428571429vw solid var(--cl-white); top: 0.2857142857vw; left: 0.2142857143vw; width: 0.8571428571vw; height: 0.4285714286vw; } } @media screen and (width <= 768px) { input[type=checkbox]:checked::before { border-bottom: 0.5333333333vw solid var(--cl-white); border-left: 0.5333333333vw solid var(--cl-white); top: 0.5333333333vw; left: 0.5333333333vw; width: 2.6666666667vw; height: 1.6vw; } } input[type=checkbox] + label, input[type=radio] + label { cursor: pointer; } input[type=checkbox]:checked + label, input[type=radio]:checked + label { font-weight: var(--font-bold); } input[type=text]:disabled { background-color: #e2e2e2; } /* --------------------------------------- Contact Form7 -----------------------------------------*/ .confirm_area { display: none; } .wpcf7 .wpcf7-not-valid-tip { color: var(--cl-accent); } @media screen and (width > 1400px) { .wpcf7 .wpcf7-not-valid-tip { font-size: 0.875rem; margin-top: 0.25rem; } } @media screen and (width <= 1400px) { .wpcf7 .wpcf7-not-valid-tip { font-size: 14px; font-size: 1vw; margin-top: 0.2857142857vw; } } @media screen and (width <= 768px) { .wpcf7 .wpcf7-not-valid-tip { font-size: 14px; font-size: 3.7333333333vw; margin-top: 1.0666666667vw; } } .wpcf7 .wpcf7-not-valid-tip::before { content: "\f06a"; font-family: var(--font-awesome); font-weight: bold; } @media screen and (width > 1400px) { .wpcf7 .wpcf7-not-valid-tip::before { margin-right: 0.5rem; } } @media screen and (width <= 1400px) { .wpcf7 .wpcf7-not-valid-tip::before { margin-right: 0.625vw; } } @media screen and (width <= 768px) { .wpcf7 .wpcf7-not-valid-tip::before { margin-right: 2.0512820513vw; } } .wpcf7 .wpcf7-form-control .wpcf7-list-item { margin: 0; } .wpcf7 .wpcf7-spinner { display: none; } /* --------------------------------------- Section -----------------------------------------*/ @media screen and (width > 1400px) { .section { padding-block: 6rem 12rem; } } @media screen and (width <= 1400px) { .section { padding-block: 6.8571428571vw 13.7142857143vw; } } @media screen and (width <= 768px) { .section { padding-block: 12.8vw 25.6vw; } } .section--bg { background-color: var(--cl-bg); } .section--bg02 { background-color: var(--cl-bg02); } .section__wrapper { width: 100%; margin-inline: auto; } @media screen and (width > 1400px) { .section__wrapper { max-width: 80rem; } } @media screen and (width <= 1400px) { .section__wrapper { max-width: 91.4285714286vw; } } @media screen and (width <= 768px) { .section__wrapper { max-width: calc(100% - 17.0666666667vw); } } @media screen and (width > 1400px) { .section__wrapper--narrow { max-width: 62.5rem; } } @media screen and (width <= 1400px) { .section__wrapper--narrow { max-width: 71.4285714286vw; } } @media screen and (width <= 768px) { .section__wrapper--narrow { max-width: calc(100% - 17.0666666667vw); } } @media screen and (width > 1400px) { .section__head { margin-bottom: 2.5rem; } } @media screen and (width <= 1400px) { .section__head { margin-bottom: 2.8571428571vw; } } @media screen and (width <= 768px) { .section__head { margin-bottom: 5.3333333333vw; } } .section__heading { font-weight: var(--font-bold); text-align: center; text-transform: uppercase; color: var(--cl-primary); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .section__heading { font-size: 3.75rem; } } @media screen and (width <= 1400px) { .section__heading { font-size: 4.2857142857vw; } } @media screen and (width <= 768px) { .section__heading { font-size: 7.4666666667vw; } } .section__text { font-weight: var(--font-thin); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .section__text { font-size: 1.125rem; } } @media screen and (width <= 1400px) { .section__text { font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .section__text { font-size: 4.2666666667vw; } } /* --------------------------------------- Modal -----------------------------------------*/ .modal { position: fixed; z-index: 10100; inset: 0; width: 100vw; height: 100dvh; background-color: rgba(0, 0, 0, 0.5); display: grid; place-content: center; opacity: 0; visibility: hidden; -webkit-transition: var(--transition); transition: var(--transition); } .modal__container { background-color: var(--cl-white); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } @media screen and (width > 1400px) { .modal__container { max-width: 62.5rem; height: calc(100dvh - 5rem); border-radius: 0.5rem; } } @media screen and (width <= 1400px) { .modal__container { max-width: 71.4285714286vw; height: calc(100dvh - 5.7142857143vw); border-radius: 0.5714285714vw; } } @media screen and (width <= 768px) { .modal__container { max-width: calc(100% - 17.0666666667vw); height: calc(100dvh - 17.0666666667vw); margin-inline: auto; border-radius: 2.1333333333vw; } } .modal__close { position: absolute; z-index: 10200; color: var(--cl-primary); cursor: pointer; } @media screen and (width > 1400px) { .modal__close { font-size: 3rem; top: -1.5rem; right: -1rem; } } @media screen and (width <= 1400px) { .modal__close { font-size: 3.4285714286vw; top: -1.7142857143vw; right: -1.1428571429vw; } } @media screen and (width <= 768px) { .modal__close { font-size: 8.5333333333vw; top: -4.2666666667vw; right: -2.1333333333vw; } } .modal__inner { height: 100%; overflow-y: auto; scrollbar-width: none; } @media screen and (width > 1400px) { .modal__inner { padding: 3.75rem 2.5rem; } } @media screen and (width <= 1400px) { .modal__inner { padding: 4.2857142857vw; } } @media screen and (width <= 768px) { .modal__inner { padding: 4.2666666667vw; } } .modal__inner::-webkit-scrollbar { display: none; } @media screen and (width > 1400px) { .modal__head { margin-bottom: 1.5rem; } } @media screen and (width <= 1400px) { .modal__head { margin-bottom: 1.7142857143vw; } } @media screen and (width <= 768px) { .modal__head { margin-bottom: 4.2666666667vw; } } .modal__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: var(--font-bold); color: var(--cl-primary); } @media screen and (width > 1400px) { .modal__heading { font-size: 1.5rem; } } @media screen and (width <= 1400px) { .modal__heading { font-size: 24px; font-size: 1.7142857143vw; } } @media screen and (width <= 768px) { .modal__heading { font-size: 18px; font-size: 4.8vw; } } .modal__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (width > 1400px) { .modal__footer { margin-top: 2.5rem; } } @media screen and (width <= 1400px) { .modal__footer { margin-top: 2.8571428571vw; } } @media screen and (width <= 768px) { .modal__footer { margin-top: 6.4vw; } } .modal__footer-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (width > 1400px) { .modal__footer-btn { width: 12.5rem; } } @media screen and (width <= 1400px) { .modal__footer-btn { width: 14.2857142857vw; } } @media screen and (width <= 768px) { .modal__footer-btn { width: 100%; } } .modal.is_active { opacity: 1; visibility: visible; } /* --------------------------------------- サブページ：メインビュー -----------------------------------------*/ .mv-sub { width: 100%; background-size: cover; background-color: var(--cl-primary); background-position: center center; } .mv-sub.-about_us { background-image: -webkit-image-set(url("../img/page/about_us/mv.webp") type("image/webp"), url("../img/page/about_us/mv.png") type("image/png")); background-image: image-set(url("../img/page/about_us/mv.webp") type("image/webp"), url("../img/page/about_us/mv.png") type("image/png")); } .mv-sub.-service { background-image: -webkit-image-set(url("../img/page/service/mv.webp") type("image/webp"), url("../img/page/service/mv.png") type("image/png")); background-image: image-set(url("../img/page/service/mv.webp") type("image/webp"), url("../img/page/service/mv.png") type("image/png")); } .mv-sub.-flow { background-image: -webkit-image-set(url("../img/page/flow/mv.webp") type("image/webp"), url("../img/page/flow/mv.png") type("image/png")); background-image: image-set(url("../img/page/flow/mv.webp") type("image/webp"), url("../img/page/flow/mv.png") type("image/png")); } .mv-sub.-support { background-image: -webkit-image-set(url("../img/page/support/mv.webp") type("image/webp"), url("../img/page/support/mv.png") type("image/png")); background-image: image-set(url("../img/page/support/mv.webp") type("image/webp"), url("../img/page/support/mv.png") type("image/png")); } .mv-sub.-recruit { background-image: -webkit-image-set(url("../img/page/recruit/mv.webp") type("image/webp"), url("../img/page/recruit/mv.png") type("image/png")); background-image: image-set(url("../img/page/recruit/mv.webp") type("image/webp"), url("../img/page/recruit/mv.png") type("image/png")); } .mv-sub.-news { background-image: -webkit-image-set(url("../img/page/news/mv.webp") type("image/webp"), url("../img/page/news/mv.png") type("image/png")); background-image: image-set(url("../img/page/news/mv.webp") type("image/webp"), url("../img/page/news/mv.png") type("image/png")); } .mv-sub__wrapper { display: grid; place-content: center; } @media screen and (width > 1400px) { .mv-sub__wrapper { height: 18.75rem; } } @media screen and (width <= 1400px) { .mv-sub__wrapper { height: 21.4285714286vw; } } @media screen and (width <= 768px) { .mv-sub__wrapper { height: 40vw; } } .mv-sub__heading { color: var(--cl-white); font-weight: var(--font-bold); text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mv-sub__heading .-en { letter-spacing: 0.05em; } @media screen and (width > 1400px) { .mv-sub__heading .-en { font-size: 3rem; } } @media screen and (width <= 1400px) { .mv-sub__heading .-en { font-size: 48px; font-size: 3.4285714286vw; } } @media screen and (width <= 768px) { .mv-sub__heading .-en { font-size: 32px; font-size: 8.5333333333vw; } } .mv-sub__heading .-jp { letter-spacing: 0.05em; } @media screen and (width > 1400px) { .mv-sub__heading .-jp { font-size: 1.5rem; } } @media screen and (width <= 1400px) { .mv-sub__heading .-jp { font-size: 24px; font-size: 1.7142857143vw; } } @media screen and (width <= 768px) { .mv-sub__heading .-jp { font-size: 16px; font-size: 4.2666666667vw; } } .pagination { position: relative; } @media screen and (width > 1400px) { .pagination { margin-top: 3.75rem; } } @media screen and (width <= 1400px) { .pagination { margin-top: 4.2857142857vw; } } @media screen and (width <= 768px) { .pagination { margin-top: 8vw; } } .pagination .nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (width > 1400px) { .pagination .nav-links { gap: 1.5rem; } } @media screen and (width <= 1400px) { .pagination .nav-links { gap: 1.7142857143vw; } } @media screen and (width <= 768px) { .pagination .nav-links { gap: 3.2vw; } } .pagination .page-numbers { color: #9b9b9b; font-weight: var(--font-thin); } @media screen and (width > 1400px) { .pagination .page-numbers { font-size: 1.5rem; } } @media screen and (width <= 1400px) { .pagination .page-numbers { font-size: 24px; font-size: 1.7142857143vw; } } @media screen and (width <= 768px) { .pagination .page-numbers { font-size: 16px; font-size: 4.2666666667vw; } } .pagination .page-numbers.prev, .pagination .page-numbers.next { display: block; width: 100%; background-color: var(--cl-text); color: var(--cl-white); font-weight: var(--font-bold); letter-spacing: 0.05em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 9999px; position: absolute; top: 0; } @media screen and (width > 1400px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { max-width: 8.125rem; height: 3.125rem; gap: 1rem; font-size: 1rem; } } @media screen and (width <= 1400px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { max-width: 9.2857142857vw; height: 3.5714285714vw; gap: 1.1428571429vw; font-size: 16px; font-size: 1.1428571429vw; } } @media screen and (width <= 768px) { .pagination .page-numbers.prev, .pagination .page-numbers.next { max-width: 21.3333333333vw; height: 9.6vw; gap: 2.1333333333vw; font-size: 14px; font-size: 3.7333333333vw; } } @media (any-hover: hover) { .pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover { opacity: var(--opacity); } } .pagination .page-numbers.prev { left: 0; } @media screen and (width > 1400px) { .pagination .page-numbers.prev { margin-left: 8.75rem; } } @media screen and (width <= 1400px) { .pagination .page-numbers.prev { margin-left: 10vw; } } @media screen and (width <= 768px) { .pagination .page-numbers.prev { margin-left: 0; } } .pagination .page-numbers.prev::before { content: "<"; } .pagination .page-numbers.next { right: 0; } @media screen and (width > 1400px) { .pagination .page-numbers.next { margin-right: 8.75rem; } } @media screen and (width <= 1400px) { .pagination .page-numbers.next { margin-right: 10vw; } } @media screen and (width <= 768px) { .pagination .page-numbers.next { margin-right: 0; } } .pagination .page-numbers.next::after { content: ">"; } .pagination .page-numbers.current { color: var(--cl-text); font-weight: var(--font-bold); } /* --------------------------------------- Table -----------------------------------------*/ .c-table { width: 100%; border-collapse: collapse; } .c-table th, .c-table td { letter-spacing: 0.05em; } @media screen and (width > 1400px) { .c-table th, .c-table td { padding: 1rem 2.5rem; font-size: 1.125rem; } } @media screen and (width <= 1400px) { .c-table th, .c-table td { padding: 1.4285714286vw 2.8571428571vw; font-size: 18px; font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .c-table th, .c-table td { display: block; padding: 4.2666666667vw; font-size: 16px; font-size: 4.2666666667vw; } } .c-table th { border-bottom: var(--cl-primary) solid 1px; font-weight: var(--font-bold); text-align: left; } @media screen and (width <= 768px) { .c-table th { background-color: var(--cl-bg); } } .c-table td { border-bottom: var(--cl-bg) solid 1px; font-weight: var(--font-thin); } .c-table.is_stripe tr:nth-of-type(even) { background-color: var(--cl-primary-light); } /* --------------------------------------- 設備情報カード -----------------------------------------*/ .equipment-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; } .equipment-card__img { aspect-ratio: 1.618/1; } .equipment-card__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .equipment-card__name { font-weight: var(--font-bold); border-bottom: var(--cl-text) solid 1px; } @media screen and (width > 1400px) { .equipment-card__name { font-size: 1.5rem; padding-bottom: 0.75rem; margin-top: 1.5rem; } } @media screen and (width <= 1400px) { .equipment-card__name { font-size: 24px; font-size: 1.7142857143vw; padding-bottom: 0.8571428571vw; margin-top: 1.7142857143vw; } } @media screen and (width <= 768px) { .equipment-card__name { font-size: 18px; font-size: 4.8vw; padding-bottom: 2.1333333333vw; margin-top: 3.2vw; } } .equipment-card__description { font-weight: var(--font-thin); letter-spacing: 0.025em; } @media screen and (width > 1400px) { .equipment-card__description { font-size: 0.875rem; margin-top: 1rem; } } @media screen and (width <= 1400px) { .equipment-card__description { font-size: 14px; font-size: 1vw; margin-top: 1.1428571429vw; } } @media screen and (width <= 768px) { .equipment-card__description { font-size: 12px; font-size: 3.2vw; margin-top: 2.1333333333vw; } } /* --------------------------------------- News Card -----------------------------------------*/ .news-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; position: relative; -webkit-transition: var(--transition); transition: var(--transition); gap: 0; } @media (any-hover: hover) { .news-card:hover { opacity: var(--opacity); } } .news-card__img { aspect-ratio: 1.618/1; } .news-card__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .news-card__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (width > 1400px) { .news-card__info { gap: 1rem; margin-top: 0.5rem; } } @media screen and (width <= 1400px) { .news-card__info { gap: 1.1428571429vw; margin-top: 0.5714285714vw; } } @media screen and (width <= 768px) { .news-card__info { gap: 4.2666666667vw; margin-top: 2.1333333333vw; } } .news-card__date { -ms-flex-negative: 0; flex-shrink: 0; font-weight: var(--font-thin); } @media screen and (width > 1400px) { .news-card__date { font-size: 0.75rem; } } @media screen and (width <= 1400px) { .news-card__date { font-size: 12px; font-size: 0.8571428571vw; } } @media screen and (width <= 768px) { .news-card__date { font-size: 12px; font-size: 3.2vw; } } .news-card__category { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (width > 1400px) { .news-card__category { gap: 0.25rem; } } @media screen and (width <= 1400px) { .news-card__category { gap: 0.2857142857vw; } } @media screen and (width <= 768px) { .news-card__category { gap: 1.0666666667vw; } } .news-card__category li { background-color: var(--cl-bg); display: inline-block; } @media screen and (width > 1400px) { .news-card__category li { font-size: 0.75rem; min-height: 1.25rem; padding-inline: 0.75rem; } } @media screen and (width <= 1400px) { .news-card__category li { font-size: 12px; font-size: 0.8571428571vw; min-height: 1.4285714286vw; padding-inline: 0.8571428571vw; } } @media screen and (width <= 768px) { .news-card__category li { font-size: 12px; font-size: 3.2vw; min-height: 5.3333333333vw; padding-inline: 3.2vw; } } .news-card__title { font-weight: var(--font-bold); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: unset; } @media screen and (width > 1400px) { .news-card__title { font-size: 1.5rem; } } @media screen and (width <= 1400px) { .news-card__title { font-size: 24px; font-size: 1.7142857143vw; } } @media screen and (width <= 768px) { .news-card__title { font-size: 18px; font-size: 4.8vw; } } .news-card__title a { display: block; } .news-card__title a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; -webkit-transition: 0.5s; transition: 0.5s; } .news-card__summary { font-weight: var(--font-thin); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; white-space: unset; } @media screen and (width > 1400px) { .news-card__summary { font-size: 1.125rem; margin-top: 1rem; } } @media screen and (width <= 1400px) { .news-card__summary { font-size: 18px; font-size: 1.2857142857vw; margin-top: 1.1428571429vw; } } @media screen and (width <= 768px) { .news-card__summary { font-size: 16px; font-size: 4.2666666667vw; margin-top: 2.1333333333vw; } } /* --------------------------------------- 当社の安全対策カード -----------------------------------------*/ .safety-card { display: grid; } .safety-card__img { aspect-ratio: 1.414/1; overflow: hidden; } .safety-card__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .safety-card__description { font-weight: var(--font-bold); } @media screen and (width > 1400px) { .safety-card__description { font-size: 1.125rem; margin-top: 1rem; } } @media screen and (width <= 1400px) { .safety-card__description { font-size: 18px; font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .safety-card__description { font-size: 16px; font-size: 4.2666666667vw; } } .safety-card__description::before { content: "・"; } /* --------------------------------------- よくある質問カード -----------------------------------------*/ .support-card { border: var(--cl-border) 1px solid; background-color: var(--cl-white); } @media screen and (width > 1400px) { .support-card { border-radius: 2rem; } } @media screen and (width <= 1400px) { .support-card { border-radius: 2.2857142857vw; } } @media screen and (width <= 768px) { .support-card { border-radius: 4.2666666667vw; } } .support-card dt { cursor: pointer; font-weight: var(--font-bold); letter-spacing: 0.05em; position: relative; } @media screen and (width > 1400px) { .support-card dt { font-size: 1.125rem; padding: 1rem 6.25rem; } } @media screen and (width <= 1400px) { .support-card dt { font-size: 18px; font-size: 1.2857142857vw; padding: 1.1428571429vw 7.1428571429vw; } } @media screen and (width <= 768px) { .support-card dt { font-size: 16px; font-size: 4.2666666667vw; padding: 4.2666666667vw 8.5333333333vw; } } .support-card dt::before { content: "Q"; font-weight: var(--font-thin); color: var(--cl-primary); letter-spacing: 0.05em; position: absolute; } @media screen and (width > 1400px) { .support-card dt::before { font-size: 1.5rem; top: 0.5rem; left: 1.25rem; } } @media screen and (width <= 1400px) { .support-card dt::before { font-size: 24px; font-size: 1.7142857143vw; top: 0.5714285714vw; left: 1.4285714286vw; } } @media screen and (width <= 768px) { .support-card dt::before { font-size: 18px; font-size: 4.8vw; top: 4.2666666667vw; left: 2.1333333333vw; } } .support-card dt::after { content: ""; background-image: url("../img/page/support/icon_plus.png"); background-repeat: no-repeat; background-size: contain; background-position: center center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (width > 1400px) { .support-card dt::after { width: 2.125rem; height: 2.125rem; right: 0.75rem; } } @media screen and (width <= 1400px) { .support-card dt::after { width: 2.4285714286vw; height: 2.4285714286vw; right: 0.8571428571vw; } } @media screen and (width <= 768px) { .support-card dt::after { width: 6.4vw; height: 6.4vw; right: 2.1333333333vw; } } .support-card dd { display: none; color: var(--cl-primary); font-weight: var(--font-thin); letter-spacing: 0.05em; } @media screen and (width > 1400px) { .support-card dd { font-size: 1.125rem; padding: 1rem 8.75rem 1.25rem 8.75rem; } } @media screen and (width <= 1400px) { .support-card dd { font-size: 18px; font-size: 1.2857142857vw; padding: 1.1428571429vw 10vw; } } @media screen and (width <= 768px) { .support-card dd { font-size: 16px; font-size: 4.2666666667vw; padding: 0 8.5333333333vw 4.2666666667vw 8.5333333333vw; } } .support-card.is_open dt::after { background-image: url("../img/page/support/icon_minus.png"); } /* --------------------------------------- お客様の声Card -----------------------------------------*/ .voice-card { background-color: var(--cl-white); display: grid; position: relative; -webkit-transition: var(--transition); transition: var(--transition); } @media screen and (width > 1400px) { .voice-card { gap: 1.25rem; } } @media screen and (width <= 1400px) { .voice-card { gap: 1.4285714286vw; } } @media screen and (width <= 768px) { .voice-card { gap: 4.2666666667vw; } } .voice-card__img { aspect-ratio: 1.618/1; } .voice-card__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .voice-card__name { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: unset; } @media screen and (width > 1400px) { .voice-card__name { font-size: 1.125rem; } } @media screen and (width <= 1400px) { .voice-card__name { font-size: 18px; font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .voice-card__name { font-size: 16px; font-size: 4.2666666667vw; } } .voice-card__name a { display: block; } .voice-card__name a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; border-radius: 6px; -webkit-transition: 0.5s; transition: 0.5s; } .voice-card__category { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (width > 1400px) { .voice-card__category { gap: 1.25rem; } } @media screen and (width <= 1400px) { .voice-card__category { gap: 1.4285714286vw; } } @media screen and (width <= 768px) { .voice-card__category { gap: 4.2666666667vw; } } .voice-card__category dt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--cl-bg); width: 100%; font-weight: var(--font-thin); } @media screen and (width > 1400px) { .voice-card__category dt { max-width: 7.5rem; height: 1.875rem; font-size: 1rem; } } @media screen and (width <= 1400px) { .voice-card__category dt { max-width: 8.5714285714vw; height: 2.1428571429vw; font-size: 16px; font-size: 1.1428571429vw; } } @media screen and (width <= 768px) { .voice-card__category dt { max-width: 26.6666666667vw; height: 6.4vw; font-size: 14px; font-size: 3.7333333333vw; } } .voice-card__category dd { font-weight: var(--font-thin); } @media screen and (width > 1400px) { .voice-card__category dd { font-size: 1.125rem; } } @media screen and (width <= 1400px) { .voice-card__category dd { font-size: 18px; font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .voice-card__category dd { font-size: 16px; font-size: 4.2666666667vw; } } .voice-card__description { font-weight: var(--font-thin); letter-spacing: 0.05em; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; white-space: unset; } @media screen and (width > 1400px) { .voice-card__description { font-size: 1.125rem; } } @media screen and (width <= 1400px) { .voice-card__description { font-size: 18px; font-size: 1.2857142857vw; } } @media screen and (width <= 768px) { .voice-card__description { font-size: 16px; font-size: 4.2666666667vw; } } @media (any-hover: hover) { .voice-card:hover { opacity: var(--opacity); } } /* --------------------------------------- Utilities -----------------------------------------*/ /* --------------------------------------- Color -----------------------------------------*/ .cl-primary { color: var(--cl-primary); } .cl-accent { color: var(--cl-accent); } .cl-white { color: var(--cl-white); } /* --------------------------------------- Font -----------------------------------------*/ .font-bold { font-weight: var(--font-bold); } .font-thin { font-weight: var(--font-thin); } /* --------------------------------------- Margin -----------------------------------------*/ .u-mt00 { margin-top: 0px !important; } .u-mt01 { margin-top: 1px !important; } .u-mt02 { margin-top: 2px !important; } .u-mt03 { margin-top: 3px !important; } .u-mt04 { margin-top: 4px !important; } .u-mt05 { margin-top: 5px !important; } .u-mt06 { margin-top: 6px !important; } .u-mt07 { margin-top: 7px !important; } .u-mt08 { margin-top: 8px !important; } .u-mt09 { margin-top: 9px !important; } .u-mt10 { margin-top: 10px !important; } .u-mt11 { margin-top: 11px !important; } .u-mt12 { margin-top: 12px !important; } .u-mt13 { margin-top: 13px !important; } .u-mt14 { margin-top: 14px !important; } .u-mt15 { margin-top: 15px !important; } .u-mt16 { margin-top: 16px !important; } .u-mt17 { margin-top: 17px !important; } .u-mt18 { margin-top: 18px !important; } .u-mt19 { margin-top: 19px !important; } .u-mt20 { margin-top: 20px !important; } .u-mt25 { margin-top: 25px !important; } .u-mt30 { margin-top: 30px !important; } .u-mt35 { margin-top: 35px !important; } .u-mt40 { margin-top: 40px !important; } .u-mt45 { margin-top: 45px !important; } .u-mt50 { margin-top: 50px !important; } .u-mt55 { margin-top: 55px !important; } .u-mt60 { margin-top: 60px !important; } .u-mt65 { margin-top: 65px !important; } .u-mt70 { margin-top: 70px !important; } .u-mt75 { margin-top: 75px !important; } .u-mt80 { margin-top: 80px !important; } .u-mt85 { margin-top: 85px !important; } .u-mt90 { margin-top: 90px !important; } .u-mt95 { margin-top: 95px !important; } .u-mt100 { margin-top: 100px !important; } .u-mr00 { margin-right: 0 !important; } .u-mr01 { margin-right: 1px !important; } .u-mr02 { margin-right: 2px !important; } .u-mr03 { margin-right: 3px !important; } .u-mr04 { margin-right: 4px !important; } .u-mr05 { margin-right: 5px !important; } .u-mr06 { margin-right: 6px !important; } .u-mr07 { margin-right: 7px !important; } .u-mr08 { margin-right: 8px !important; } .u-mr09 { margin-right: 9px !important; } .u-mr10 { margin-right: 10px !important; } .u-mr11 { margin-right: 11px !important; } .u-mr12 { margin-right: 12px !important; } .u-mr13 { margin-right: 13px !important; } .u-mr14 { margin-right: 14px !important; } .u-mr15 { margin-right: 15px !important; } .u-mr16 { margin-right: 16px !important; } .u-mr17 { margin-right: 17px !important; } .u-mr18 { margin-right: 18px !important; } .u-mr19 { margin-right: 19px !important; } .u-mr20 { margin-right: 20px !important; } .u-mr25 { margin-right: 25px !important; } .u-mr30 { margin-right: 30px !important; } .u-mr35 { margin-right: 35px !important; } .u-mr40 { margin-right: 40px !important; } .u-mr45 { margin-right: 45px !important; } .u-mr50 { margin-right: 50px !important; } .u-mr55 { margin-right: 55px !important; } .u-mr60 { margin-right: 60px !important; } .u-mr65 { margin-right: 65px !important; } .u-mr70 { margin-right: 70px !important; } .u-mr75 { margin-right: 75px !important; } .u-mr80 { margin-right: 80px !important; } .u-mr85 { margin-right: 85px !important; } .u-mr90 { margin-right: 90px !important; } .u-mr95 { margin-right: 95px !important; } .u-mr100 { margin-right: 100px !important; } .u-mb00 { margin-bottom: 0px !important; } .u-mb01 { margin-bottom: 1px !important; } .u-mb02 { margin-bottom: 2px !important; } .u-mb03 { margin-bottom: 3px !important; } .u-mb04 { margin-bottom: 4px !important; } .u-mb05 { margin-bottom: 5px !important; } .u-mb06 { margin-bottom: 6px !important; } .u-mb07 { margin-bottom: 7px !important; } .u-mb08 { margin-bottom: 8px !important; } .u-mb09 { margin-bottom: 9px !important; } .u-mb10 { margin-bottom: 10px !important; } .u-mb11 { margin-bottom: 11px !important; } .u-mb12 { margin-bottom: 12px !important; } .u-mb13 { margin-bottom: 13px !important; } .u-mb14 { margin-bottom: 14px !important; } .u-mb15 { margin-bottom: 15px !important; } .u-mb16 { margin-bottom: 16px !important; } .u-mb17 { margin-bottom: 17px !important; } .u-mb18 { margin-bottom: 18px !important; } .u-mb19 { margin-bottom: 19px !important; } .u-mb20 { margin-bottom: 20px !important; } .u-mb25 { margin-bottom: 25px !important; } .u-mb30 { margin-bottom: 30px !important; } .u-mb35 { margin-bottom: 35px !important; } .u-mb40 { margin-bottom: 40px !important; } .u-mb45 { margin-bottom: 45px !important; } .u-mb50 { margin-bottom: 50px !important; } .u-mb55 { margin-bottom: 55px !important; } .u-mb60 { margin-bottom: 60px !important; } .u-mb65 { margin-bottom: 65px !important; } .u-mb70 { margin-bottom: 70px !important; } .u-mb75 { margin-bottom: 75px !important; } .u-mb80 { margin-bottom: 80px !important; } .u-mb85 { margin-bottom: 85px !important; } .u-mb90 { margin-bottom: 90px !important; } .u-mb95 { margin-bottom: 95px !important; } .u-mb100 { margin-bottom: 100px !important; } .u-mb150 { margin-bottom: 150px !important; } .u-ml00 { margin-left: 0px !important; } .u-ml01 { margin-left: 1px !important; } .u-ml02 { margin-left: 2px !important; } .u-ml03 { margin-left: 3px !important; } .u-ml04 { margin-left: 4px !important; } .u-ml05 { margin-left: 5px !important; } .u-ml06 { margin-left: 6px !important; } .u-ml07 { margin-left: 7px !important; } .u-ml08 { margin-left: 8px !important; } .u-ml09 { margin-left: 9px !important; } .u-ml10 { margin-left: 10px !important; } .u-ml11 { margin-left: 11px !important; } .u-ml12 { margin-left: 12px !important; } .u-ml13 { margin-left: 13px !important; } .u-ml14 { margin-left: 14px !important; } .u-ml15 { margin-left: 15px !important; } .u-ml16 { margin-left: 16px !important; } .u-ml17 { margin-left: 17px !important; } .u-ml18 { margin-left: 18px !important; } .u-ml19 { margin-left: 19px !important; } .u-ml20 { margin-left: 20px !important; } .u-ml25 { margin-left: 25px !important; } .u-ml30 { margin-left: 30px !important; } .u-ml35 { margin-left: 35px !important; } .u-ml40 { margin-left: 40px !important; } .u-ml45 { margin-left: 45px !important; } .u-ml50 { margin-left: 50px !important; } .u-ml55 { margin-left: 55px !important; } .u-ml60 { margin-left: 60px !important; } .u-ml65 { margin-left: 65px !important; } .u-ml70 { margin-left: 70px !important; } .u-ml75 { margin-left: 75px !important; } .u-ml80 { margin-left: 80px !important; } .u-ml85 { margin-left: 85px !important; } .u-ml90 { margin-left: 90px !important; } .u-ml95 { margin-left: 95px !important; } .u-ml100 { margin-left: 100px !important; } .u-ma00 { margin: 0px !important; } .u-ma01 { margin: 1px !important; } .u-ma02 { margin: 2px !important; } .u-ma03 { margin: 3px !important; } .u-ma04 { margin: 4px !important; } .u-ma05 { margin: 5px !important; } .u-ma06 { margin: 6px !important; } .u-ma07 { margin: 7px !important; } .u-ma08 { margin: 8px !important; } .u-ma09 { margin: 9px !important; } .u-ma10 { margin: 10px !important; } .u-ma11 { margin: 11px !important; } .u-ma12 { margin: 12px !important; } .u-ma13 { margin: 13px !important; } .u-ma14 { margin: 14px !important; } .u-ma15 { margin: 15px !important; } .u-ma16 { margin: 16px !important; } .u-ma17 { margin: 17px !important; } .u-ma18 { margin: 18px !important; } .u-ma19 { margin: 19px !important; } .u-ma20 { margin: 20px !important; } .u-ma25 { margin: 25px !important; } .u-ma30 { margin: 30px !important; } .u-ma35 { margin: 35px !important; } .u-ma40 { margin: 40px !important; } .u-ma45 { margin: 45px !important; } .u-ma50 { margin: 50px !important; } .u-ma55 { margin: 55px !important; } .u-ma60 { margin: 60px !important; } .u-ma65 { margin: 65px !important; } .u-ma70 { margin: 70px !important; } .u-ma75 { margin: 75px !important; } .u-ma80 { margin: 80px !important; } .u-ma85 { margin: 85px !important; } .u-ma90 { margin: 90px !important; } .u-ma95 { margin: 95px !important; } .u-ma100 { margin: 100px !important; } /* --------------------------------------- Padding -----------------------------------------*/ .u-pt00 { padding-top: 0px !important; } .u-pt01 { padding-top: 1px !important; } .u-pt02 { padding-top: 2px !important; } .u-pt03 { padding-top: 3px !important; } .u-pt04 { padding-top: 4px !important; } .u-pt05 { padding-top: 5px !important; } .u-pt06 { padding-top: 6px !important; } .u-pt07 { padding-top: 7px !important; } .u-pt08 { padding-top: 8px !important; } .u-pt09 { padding-top: 9px !important; } .u-pt10 { padding-top: 10px !important; } .u-pt11 { padding-top: 11px !important; } .u-pt12 { padding-top: 12px !important; } .u-pt13 { padding-top: 13px !important; } .u-pt14 { padding-top: 14px !important; } .u-pt15 { padding-top: 15px !important; } .u-pt16 { padding-top: 16px !important; } .u-pt17 { padding-top: 17px !important; } .u-pt18 { padding-top: 18px !important; } .u-pt19 { padding-top: 19px !important; } .u-pt20 { padding-top: 20px !important; } .u-pt25 { padding-top: 25px !important; } .u-pt30 { padding-top: 30px !important; } .u-pt35 { padding-top: 35px !important; } .u-pt40 { padding-top: 40px !important; } .u-pt45 { padding-top: 45px !important; } .u-pt50 { padding-top: 50px !important; } .u-pt55 { padding-top: 55px !important; } .u-pt60 { padding-top: 60px !important; } .u-pt65 { padding-top: 65px !important; } .u-pt70 { padding-top: 70px !important; } .u-pt75 { padding-top: 75px !important; } .u-pt80 { padding-top: 80px !important; } .u-pt85 { padding-top: 85px !important; } .u-pt90 { padding-top: 90px !important; } .u-pt95 { padding-top: 95px !important; } .u-pt100 { padding-top: 100px !important; } .u-pr00 { padding-right: 0px !important; } .u-pr01 { padding-right: 1px !important; } .u-pr02 { padding-right: 2px !important; } .u-pr03 { padding-right: 3px !important; } .u-pr04 { padding-right: 4px !important; } .u-pr05 { padding-right: 5px !important; } .u-pr06 { padding-right: 6px !important; } .u-pr07 { padding-right: 7px !important; } .u-pr08 { padding-right: 8px !important; } .u-pr09 { padding-right: 9px !important; } .u-pr10 { padding-right: 10px !important; } .u-pr11 { padding-right: 11px !important; } .u-pr12 { padding-right: 12px !important; } .u-pr13 { padding-right: 13px !important; } .u-pr14 { padding-right: 14px !important; } .u-pr15 { padding-right: 15px !important; } .u-pr16 { padding-right: 16px !important; } .u-pr17 { padding-right: 17px !important; } .u-pr18 { padding-right: 18px !important; } .u-pr19 { padding-right: 19px !important; } .u-pr20 { padding-right: 20px !important; } .u-pr25 { padding-right: 25px !important; } .u-pr30 { padding-right: 30px !important; } .u-pr35 { padding-right: 35px !important; } .u-pr40 { padding-right: 40px !important; } .u-pr45 { padding-right: 45px !important; } .u-pr50 { padding-right: 50px !important; } .u-pr55 { padding-right: 55px !important; } .u-pr60 { padding-right: 60px !important; } .u-pr65 { padding-right: 65px !important; } .u-pr70 { padding-right: 70px !important; } .u-pr75 { padding-right: 75px !important; } .u-pr80 { padding-right: 80px !important; } .u-pr85 { padding-right: 85px !important; } .u-pr90 { padding-right: 90px !important; } .u-pr95 { padding-right: 95px !important; } .u-pr100 { padding-right: 100px !important; } .u-pb00 { padding-bottom: 0px !important; } .u-pb01 { padding-bottom: 1px !important; } .u-pb02 { padding-bottom: 2px !important; } .u-pb03 { padding-bottom: 3px !important; } .u-pb04 { padding-bottom: 4px !important; } .u-pb05 { padding-bottom: 5px !important; } .u-pb06 { padding-bottom: 6px !important; } .u-pb07 { padding-bottom: 7px !important; } .u-pb08 { padding-bottom: 8px !important; } .u-pb09 { padding-bottom: 9px !important; } .u-pb10 { padding-bottom: 10px !important; } .u-pb11 { padding-bottom: 11px !important; } .u-pb12 { padding-bottom: 12px !important; } .u-pb13 { padding-bottom: 13px !important; } .u-pb14 { padding-bottom: 14px !important; } .u-pb15 { padding-bottom: 15px !important; } .u-pb16 { padding-bottom: 16px !important; } .u-pb17 { padding-bottom: 17px !important; } .u-pb18 { padding-bottom: 18px !important; } .u-pb19 { padding-bottom: 19px !important; } .u-pb20 { padding-bottom: 20px !important; } .u-pb25 { padding-bottom: 25px !important; } .u-pb30 { padding-bottom: 30px !important; } .u-pb35 { padding-bottom: 35px !important; } .u-pb40 { padding-bottom: 40px !important; } .u-pb45 { padding-bottom: 45px !important; } .u-pb50 { padding-bottom: 50px !important; } .u-pb55 { padding-bottom: 55px !important; } .u-pb60 { padding-bottom: 60px !important; } .u-pb65 { padding-bottom: 65px !important; } .u-pb70 { padding-bottom: 70px !important; } .u-pb75 { padding-bottom: 75px !important; } .u-pb80 { padding-bottom: 80px !important; } .u-pb85 { padding-bottom: 85px !important; } .u-pb90 { padding-bottom: 90px !important; } .u-pb95 { padding-bottom: 95px !important; } .u-pb100 { padding-bottom: 100px !important; } .u-pl00 { padding-left: 0px !important; } .u-pl01 { padding-left: 1px !important; } .u-pl02 { padding-left: 2px !important; } .u-pl03 { padding-left: 3px !important; } .u-pl04 { padding-left: 4px !important; } .u-pl05 { padding-left: 5px !important; } .u-pl06 { padding-left: 6px !important; } .u-pl07 { padding-left: 7px !important; } .u-pl08 { padding-left: 8px !important; } .u-pl09 { padding-left: 9px !important; } .u-pl10 { padding-left: 10px !important; } .u-pl11 { padding-left: 11px !important; } .u-pl12 { padding-left: 12px !important; } .u-pl13 { padding-left: 13px !important; } .u-pl14 { padding-left: 14px !important; } .u-pl15 { padding-left: 15px !important; } .u-pl16 { padding-left: 16px !important; } .u-pl17 { padding-left: 17px !important; } .u-pl18 { padding-left: 18px !important; } .u-pl19 { padding-left: 19px !important; } .u-pl20 { padding-left: 20px !important; } .u-pl25 { padding-left: 25px !important; } .u-pl30 { padding-left: 30px !important; } .u-pl35 { padding-left: 35px !important; } .u-pl40 { padding-left: 40px !important; } .u-pl45 { padding-left: 45px !important; } .u-pl50 { padding-left: 50px !important; } .u-pl55 { padding-left: 55px !important; } .u-pl60 { padding-left: 60px !important; } .u-pl65 { padding-left: 65px !important; } .u-pl70 { padding-left: 70px !important; } .u-pl75 { padding-left: 75px !important; } .u-pl80 { padding-left: 80px !important; } .u-pl85 { padding-left: 85px !important; } .u-pl90 { padding-left: 90px !important; } .u-pl95 { padding-left: 95px !important; } .u-pl100 { padding-left: 100px !important; } .u-pa00 { padding: 0px !important; } .u-pa01 { padding: 1px !important; } .u-pa02 { padding: 2px !important; } .u-pa03 { padding: 3px !important; } .u-pa04 { padding: 4px !important; } .u-pa05 { padding: 5px !important; } .u-pa06 { padding: 6px !important; } .u-pa07 { padding: 7px !important; } .u-pa08 { padding: 8px !important; } .u-pa09 { padding: 9px !important; } .u-pa10 { padding: 10px !important; } .u-pa11 { padding: 11px !important; } .u-pa12 { padding: 12px !important; } .u-pa13 { padding: 13px !important; } .u-pa14 { padding: 14px !important; } .u-pa15 { padding: 15px !important; } .u-pa16 { padding: 16px !important; } .u-pa17 { padding: 17px !important; } .u-pa18 { padding: 18px !important; } .u-pa19 { padding: 19px !important; } .u-pa20 { padding: 20px !important; } .u-pa25 { padding: 25px !important; } .u-pa30 { padding: 30px !important; } .u-pa35 { padding: 35px !important; } .u-pa40 { padding: 40px !important; } .u-pa45 { padding: 45px !important; } .u-pa50 { padding: 50px !important; } .u-pa55 { padding: 55px !important; } .u-pa60 { padding: 60px !important; } .u-pa65 { padding: 65px !important; } .u-pa70 { padding: 70px !important; } .u-pa75 { padding: 75px !important; } .u-pa80 { padding: 80px !important; } .u-pa85 { padding: 85px !important; } .u-pa90 { padding: 90px !important; } .u-pa95 { padding: 95px !important; } .u-pa100 { padding: 100px !important; } /* --------------------------------------- Display -----------------------------------------*/ @media screen and (width <= 768px) { .pc-only { display: none !important; } } .sp-only { display: none; } @media screen and (width <= 768px) { .sp-only { display: block !important; } }