@charset "UTF-8";
/***
The new CSS reset - version 1.7.2 (last updated 23.6.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Reapply the pointer cursor for anchor tags */
a,
button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input,
textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
* {
--inner-padding: 5.12vw;
--hover-opacity: 0.7;
margin: 0;
padding: 0;
}
*::before, *::after {
pointer-events: none;
}
html {
overflow: auto;
font-size: 62.5%;
}
body {
position: relative;
overflow: hidden;
min-width: 320px;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
line-height: 2;
background-color: #d2c2ac;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: #232320;
-webkit-text-size-adjust: 100%;
letter-spacing: 0.04em;
color: #232320;
font-size: clamp(1.3rem, 1.013740458rem + 0.7633587786vw, 1.6rem);
}
@supports not (font-size: clamp(13 * 0.1rem, 1.013740458rem + 0.7633587786vw, 16 * 0.1rem)) {
body {
font-size: 1.3rem;
}
}
body h1:has(wbr),
body h2:has(wbr),
body h3:has(wbr),
body h4:has(wbr),
body h5:has(wbr),
body h6:has(wbr),
body p:has(wbr) {
word-break: keep-all;
overflow-wrap: anywhere;
}
a {
color: inherit;
text-decoration: none;
transition: all 0.3s ease-in;
}
@media (min-width: 768px) {
a:not([class]) {
text-decoration: underline;
}
@media not all and (pointer: coarse) {
a:not([class]):hover {
text-decoration: none;
}
}
}
span {
font-weight: inherit;
}
img {
display: block;
width: 100%;
height: auto;
}
input,
textarea,
button {
border: none;
appearance: none;
caret-color: #d2c2ac;
}
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
outline-color: #d2c2ac;
}
@media (max-width: 767.98px) {
input,
textarea,
button {
font-size: 1.6rem;
}
}
.js-business-image a {
position: relative;
}
.js-business-image a::after {
content: "";
position: absolute;
bottom: 10px;
right: 10px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.6) url('data:image/svg+xml,') center/60% no-repeat;
border-radius: 50%;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.js-business-image a:hover::after {
opacity: 1;
}
/* .l-header
================================================ */
.l-header {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
height: 64px;
padding: 0 15px;
background-color: #fff;
}
.l-header__logo {
width: 269px;
}
@media (min-width: 768px) {
.l-header {
height: 80px;
padding: 0 60px;
}
.l-header__logo {
width: 310px;
}
}
/* .l-footer
================================================ */
.l-footer {
padding: 24px 0 25px;
border-top: 1px solid;
}
.l-footer__credit {
line-height: 1.1;
text-align: center;
}
@media (max-width: 767.98px) {
.l-footer {
padding-bottom: 129px;
}
}
/* .l-float-area
================================================ */
.l-float-area {
box-sizing: border-box;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
padding: 40px 20px 10px;
}
.l-float-area__link {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: min(89.74vw, 350px);
height: 54px;
border-radius: 27px;
background: linear-gradient(90deg, #e6bc3a 0%, #ffe189 25%, #dcaf3d 50%, #ffe189 75%, #e6bc3a 100%);
font-size: 1.8rem;
}
.l-float-area__link::before {
content: "";
position: absolute;
bottom: 42px;
left: 50%;
transform: translateX(-50%);
width: 144px;
height: 43px;
background: url(../img/ico_bubble01_sp.png) no-repeat center/contain;
}
.l-float-area__link::after {
content: "";
display: inline-block;
width: 32px;
height: 32px;
background: no-repeat center/32px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M22%2016L12.25%2022.9282L12.25%209.0718L22%2016Z%22%20fill%3D%22%23232320%22%2F%3E%3C%2Fsvg%3E");
}
@media (max-width: 767.98px) {
.l-float-area {
left: 0;
bottom: 0;
width: 100%;
background: rgba(35, 35, 32, 0.6);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in;
}
.l-float-area.is-visible {
opacity: 1;
visibility: visible;
}
.l-float-area__link::after {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
}
@media (min-width: 768px) {
.l-float-area {
top: 144px;
right: 0;
padding: 47px 32px 16px;
background-color: #fff;
}
.l-float-area.is-closed {
opacity: 0;
visibility: hidden;
}
.l-float-area__link {
gap: 8px;
width: 257px;
height: 54px;
}
.l-float-area__link::before {
background-image: url(../img/ico_bubble01_pc.png);
}
@media not all and (pointer: coarse) {
.l-float-area__link:hover {
opacity: var(--hover-opacity);
}
}
.l-float-area__close {
position: absolute;
top: -20px;
left: -20px;
display: flex;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background-color: #d2c2ac;
font-size: 2rem;
color: #fff;
text-align: center;
cursor: pointer;
}
@media not all and (pointer: coarse) {
.l-float-area__close:hover {
opacity: var(--hover-opacity);
}
}
}
@media (max-width: 767.98px) {
.l-mainvisual__inner {
position: relative;
}
.l-mainvisual__position {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
width: min(89.74vw, 350px);
height: 56px;
font-size: 1.6rem;
background: linear-gradient(90deg, #e6bc3a 0%, #ffe189 25%, #dcaf3d 50%, #ffe189 75%, #e6bc3a 100%);
}
.l-mainvisual__position::after {
content: "";
display: inline-block;
width: 24px;
height: 20px;
background: no-repeat center/24px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2221%22%20height%3D%2216%22%20viewBox%3D%220%200%2021%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.3926%2015.0968L0.000272163%202.47453e-05L20.7849%202.65623e-05L10.3926%2015.0968Z%22%20fill%3D%22%23232320%22%2F%3E%3C%2Fsvg%3E");
}
.l-mainvisual__list {
display: none !important;
}
}
@media (min-width: 768px) {
.l-mainvisual__position {
display: none !important;
}
.l-mainvisual__anchor {
display: flex;
align-items: center;
flex-direction: column;
padding: 32px;
background-color: #232320;
}
.l-mainvisual__anchor-head {
margin-bottom: 24px;
line-height: 1.4;
font-size: 2.8rem;
color: #fff;
}
.l-mainvisual__list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
max-width: 1087px;
margin: auto;
}
.l-mainvisual__button {
box-sizing: border-box;
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
padding: 16px;
background: linear-gradient(90deg, #e6bc3a 0%, #ffe189 25%, #dcaf3d 50%, #ffe189 75%, #e6bc3a 100%);
color: #232320;
font-size: clamp(1.7rem, 0.8111111111rem + 1.1574074074vw, 2.2rem);
}
@supports not (font-size: clamp(17 * 0.1rem, 0.8111111111rem + 1.1574074074vw, 22 * 0.1rem)) {
.l-mainvisual__button {
font-size: 1.7rem;
}
}
@media not all and (pointer: coarse) {
.l-mainvisual__button:hover {
opacity: var(--hover-opacity);
}
}
.l-mainvisual__button::after {
content: "";
display: inline-block;
width: 24px;
height: 20px;
background: no-repeat center/contain;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2221%22%20height%3D%2216%22%20viewBox%3D%220%200%2021%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.3926%2015.0968L0.000272163%202.47453e-05L20.7849%202.65623e-05L10.3926%2015.0968Z%22%20fill%3D%22%23232320%22%2F%3E%3C%2Fsvg%3E");
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.l-mainvisual__list {
gap: 15px;
}
.l-mainvisual__button {
padding: 10px;
}
.l-mainvisual__button::after {
width: 18px;
}
.l-mainvisual__button small {
font-size: clamp(1.3rem, 0.7rem + 0.78125vw, 1.5rem);
}
@supports not (font-size: clamp(13 * 0.1rem, 0.7rem + 0.78125vw, 15 * 0.1rem)) {
.l-mainvisual__button small {
font-size: 1.3rem;
}
}
}
.c-card__item {
box-sizing: border-box;
padding: 8.2vw 6.4vw 6.15vw;
background-color: #d2c2ac;
color: #232320;
}
@media not all and (pointer: coarse) {
.c-card__item:hover {
transform: translateY(8px);
}
}
.c-card__position {
line-height: 1.5;
text-align: center;
font-size: clamp(2.7rem, 1.3rem + 2.9166666667vw, 4.8rem);
}
.c-card__position {
margin-bottom: 6.1vw;
}
@supports not (font-size: clamp(27 * 0.1rem, 1.3rem + 2.9166666667vw, 48 * 0.1rem)) {
.c-card__position {
font-size: 2.7rem;
}
}
.c-card__position small {
font-size: 0.7em;
}
.c-card__description {
margin-bottom: 6.1vw;
}
.c-card__description h4 {
font-size: clamp(1.6rem, 1.2rem + 0.8333333333vw, 2.2rem);
}
@supports not (font-size: clamp(16 * 0.1rem, 1.2rem + 0.8333333333vw, 22 * 0.1rem)) {
.c-card__description h4 {
font-size: 1.6rem;
}
}
.c-card__entry {
display: flex;
justify-content: space-between;
align-items: center;
width: 182px;
height: 23px;
margin-left: auto;
font-size: 2rem;
}
.c-card__entry::after {
content: "";
display: inline-block;
width: 67px;
height: 16px;
background: url(../img/ico_card01.png) no-repeat center top/cover;
}
@media (max-width: 767.98px) {
.c-card__item:not(:last-of-type) {
margin-bottom: 4.1vw;
}
.c-card__description {
text-align: center;
}
}
@media (min-width: 768px) {
.c-card {
display: grid;
gap: 16px;
}
.c-card__item {
padding: 54px 32px 40px;
}
.c-card__position {
margin-bottom: 40px;
}
.c-card__description {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 26px;
margin-bottom: 40px;
}
.c-card__description p {
align-self: center;
}
.c-card__entry {
width: 334px;
height: 40px;
font-size: clamp(3rem, 1.7157190635rem + 1.6722408027vw, 4rem);
}
@supports not (font-size: clamp(30 * 0.1rem, 1.7157190635rem + 1.6722408027vw, 40 * 0.1rem)) {
.c-card__entry {
font-size: 3rem;
}
}
.c-card__entry::after {
width: 122px;
height: 32px;
}
}
@media (min-width: 1024px) {
.c-card {
grid-template-columns: 1fr 1fr;
}
}
.c-faq {
--faq-icon-width: 19px;
--faq-icon-height: 42px;
}
.c-faq__item {
box-sizing: border-box;
border-bottom: 2px solid #d2c2ac;
}
.c-faq__item[open] .c-faq__summary::after {
transform: translateY(-50%) rotate(0deg);
}
.c-faq__item:first-of-type {
border-top: 2px solid #d2c2ac;
}
.c-faq__summary {
box-sizing: border-box;
position: relative;
display: block;
list-style: none;
padding: 17px 70px 17px 20px;
cursor: pointer;
}
.c-faq__summary::marker {
display: none;
}
.c-faq__summary::-webkit-details-marker {
display: none;
}
.c-faq__summary::before, .c-faq__summary::after {
content: "";
display: inline-block;
position: absolute;
top: 50%;
right: var(--faq-toggle-right, 20px);
width: var(--faq-toggle-width, 34px);
height: 4px;
background-color: #d2c2ac;
transition: transform 0.2s var(--transition-easing);
}
.c-faq__summary::before {
transform: translateY(-50%);
}
.c-faq__summary::after {
transform: translateY(-50%) rotate(-90deg);
}
.c-faq__q, .c-faq__a {
display: grid;
grid-template-columns: var(--faq-icon-width) 1fr;
grid-column-gap: 14px;
}
.c-faq__q-icon, .c-faq__a-icon {
width: var(--faq-icon-width, );
height: var(--faq-icon-height);
line-height: var(--faq-icon-height);
font-size: var(--faq-icon-font-size, 2.6rem);
color: #d2c2ac;
}
.c-faq__q {
font-size: clamp(1.6rem, 0.6rem + 2.0833333333vw, 2.2rem);
}
@supports not (font-size: clamp(16 * 0.1rem, 0.6rem + 2.0833333333vw, 22 * 0.1rem)) {
.c-faq__q {
font-size: 1.6rem;
}
}
.c-faq__a {
padding: 17px 43px 17px 20px;
background-color: #fff;
color: #000;
}
.c-faq__a *[itemprop=text] {
align-self: center;
}
.c-faq__a p + p {
margin-top: 1.8em;
}
.c-faq__a small {
font-size: 1.2rem;
}
.c-faq__a a {
text-decoration: underline;
}
@media not all and (pointer: coarse) {
.c-faq__a a:hover {
text-decoration: none;
}
}
.c-faq__a ul {
margin-top: 1.8em;
}
.c-faq__a ul li {
position: relative;
padding-left: 1em;
text-indent: -1em;
}
.c-faq__a ul li::before {
content: "・";
width: 1em;
height: 1em;
}
@media (min-width: 768px) {
.c-faq {
--faq-icon-width: 30px;
--faq-toggle-right: 48px;
--faq-toggle-width: 40px;
--faq-icon-font-size: 4rem;
}
.c-faq__summary {
padding: 28px 110px 28px 40px;
}
.c-faq__a {
padding: 28px 110px 28px 40px;
}
}
.c-job-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.c-job-filter {
margin-bottom: 12.3vw;
}
.c-job-filter__button {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
padding: 6px 24px;
border: 3px solid #d2c2ac;
background-color: #fff;
border-radius: 29px;
cursor: pointer;
color: #d2c2ac;
font-size: clamp(1.6rem, 0.6rem + 2.0833333333vw, 2.2rem);
}
@supports not (font-size: clamp(16 * 0.1rem, 0.6rem + 2.0833333333vw, 22 * 0.1rem)) {
.c-job-filter__button {
font-size: 1.6rem;
}
}
.c-job-filter__button.is-active {
background-color: #d2c2ac;
color: #fff;
}
@media (min-width: 768px) {
.c-job-filter {
max-width: 1000px;
margin: 0 auto 64px;
}
.c-job-filter__button {
padding: 7px 32px;
}
}
.c-section__inner {
padding-top: 20.5vw;
}
.c-section__inner {
padding-bottom: 22.5vw;
}
.c-section__head {
position: relative;
line-height: 1.5;
text-align: center;
font-size: clamp(2.7rem, 1.3rem + 2.9166666667vw, 4.8rem);
}
.c-section__head {
margin-bottom: 8.2vw;
}
@supports not (font-size: clamp(27 * 0.1rem, 1.3rem + 2.9166666667vw, 48 * 0.1rem)) {
.c-section__head {
font-size: 2.7rem;
}
}
.c-section__lead {
text-align: center;
font-size: clamp(1.6rem, 0.6rem + 2.0833333333vw, 2.2rem);
}
.c-section__lead {
margin-bottom: 12.3vw;
}
@supports not (font-size: clamp(16 * 0.1rem, 0.6rem + 2.0833333333vw, 22 * 0.1rem)) {
.c-section__lead {
font-size: 1.6rem;
}
}
@media (min-width: 768px) {
.c-section__inner {
padding-top: 80px;
padding-bottom: 180px;
}
.c-section__head, .c-section__lead {
margin-bottom: 64px;
}
.c-section__head::before {
width: 43px;
height: 120px;
}
}
/* ------------------------------
Device-only Break Classes
主にbrで使用することを想定
その場合、ソースコードはbrの後ろで改行しないこと（改行すると不要なスペースが入る）
使用例：
吾輩は
猫である
------------------------------ */
@media (max-width: 767.98px) {
.u-only-sp {
display: block;
}
}
@media (min-width: 768px) {
.u-only-sp {
display: none !important;
}
}
@media (max-width: 767.98px) {
.u-only-pc {
display: none !important;
}
}
@media (min-width: 768px) {
.u-only-pc {
display: block;
}
}
/* ------------------------------
Link
------------------------------ */
.u-link {
display: block;
}
@media not all and (pointer: coarse) {
.u-link:hover {
opacity: var(--hover-opacity);
}
}
/* ------------------------------
Layout
------------------------------ */
.u-inner {
box-sizing: border-box;
width: 100%;
padding-left: var(--inner-padding);
padding-right: var(--inner-padding);
}
@media (min-width: 768px) {
.u-inner {
max-width: 1200px;
margin: auto;
}
}
@media (min-width: 1200px) {
.u-inner {
padding-left: 0;
padding-right: 0;
}
}
.u-bg-black {
background-color: #232320;
color: #d2c2ac;
}
.u-iframe {
max-width: 640px;
margin: auto;
}
/* ------------------------------
Font
------------------------------ */
.u-uppercase {
text-transform: uppercase;
}
.u-capitalize {
text-transform: capitalize;
}
.u-font-shippori {
font-family: "Shippori Mincho B1", serif;
font-weight: 500;
font-style: normal;
}
.u-font-cardo {
font-family: "Cardo", serif;
font-weight: 400;
font-style: normal;
}
/* message */
.home-message {
background-color: #245544;
color: #d2c2ac;
}
.home-message__inner {
display: grid;
}
.home-message__inner {
padding-top: 13.3vw;
}
.home-message__inner {
padding-bottom: 11.2vw;
}
.home-message__image {
position: relative;
}
.home-message__image {
height: 37.6vw;
}
.home-message__image img {
position: absolute;
top: 0;
right: 0;
}
.home-message__image img {
min-width: 106.1vw;
}
.home-message__head {
font-size: clamp(3.2rem, 2.6666666667rem + 1.1111111111vw, 4rem);
}
.home-message__head {
margin-bottom: 12.3vw;
}
@supports not (font-size: clamp(32 * 0.1rem, 2.6666666667rem + 1.1111111111vw, 40 * 0.1rem)) {
.home-message__head {
font-size: 3.2rem;
}
}
.home-message__text-area img {
width: 76.9vw;
}
@media (min-width: 1024px) {
.home-message__inner {
grid-template-columns: auto 55%;
grid-gap: 46px;
padding-top: 140px;
padding-bottom: 160px;
}
.home-message__image {
position: relative;
grid-column: 1;
grid-row: 1;
}
.home-message__image img {
position: absolute;
top: 0;
right: 0;
max-width: 1008px;
}
.home-message__image img {
min-width: 52.5vw;
}
.home-message__head {
margin-bottom: 80px;
}
.home-message__text-area {
grid-column: 2;
grid-row: 1;
margin-bottom: 0;
}
.home-message__text-area img {
width: 600px;
}
}
/* business */
.home-business__lead {
text-align: center;
}
.home-business__lead {
margin-top: -4.2vw;
}
.home-business__lead {
margin-bottom: 16.4vw;
}
.home-business__list {
display: grid;
}
.home-business__list {
grid-gap: 3.8vw;
}
.home-business__item {
box-sizing: border-box;
padding: 4.87vw 2.56vw 6.15vw;
background-color: #dfd4c6;
color: #232320;
}
.home-business__picture {
margin-bottom: 4.1vw;
}
.home-business__text-area h3 {
line-height: 1.5;
font-size: clamp(2.1rem, 1.6333333333rem + 0.9722222222vw, 2.8rem);
}
.home-business__text-area h3 {
margin-bottom: 2.8vw;
}
@supports not (font-size: clamp(21 * 0.1rem, 1.6333333333rem + 0.9722222222vw, 28 * 0.1rem)) {
.home-business__text-area h3 {
font-size: 2.1rem;
}
}
.home-business__note {
margin-top: 1.5em;
font-size: 0.8em;
color: #d2c2ac;
}
@media (max-width: 767.98px) {
.home-business__item {
display: grid;
grid-template-columns: 30vw 1fr;
}
.home-business__item {
grid-gap: 4.1vw;
}
}
@media (min-width: 768px) {
.home-business__head {
margin-bottom: 16px;
}
.home-business__lead {
margin-top: -48px;
margin-bottom: 64px;
}
.home-business__list {
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
}
.home-business__item {
padding: 19px 17px 24px;
}
.home-business__picture {
margin-bottom: 32px;
}
.home-business__text-area h3 {
margin-bottom: 11px;
}
}
@media (min-width: 1200px) {
.home-business__list {
grid-template-columns: repeat(3, 1fr);
}
}
/* position */
.home-position {
background-color: #245544;
color: #d2c2ac;
}
/* reason */
.home-reason__list {
counter-reset: reason-counter;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.home-reason__list {
gap: 6.1vw;
}
.home-reason__item {
position: relative;
box-sizing: border-box;
padding: 4vw 2vw;
border-bottom: 1px solid;
counter-increment: reason-counter;
}
.home-reason__item::before {
content: counter(reason-counter, decimal-leading-zero);
display: block;
margin: 0 auto 4.1vw;
line-height: 1.1;
font-family: "Cardo", serif;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: clamp(5.1rem, 3.7rem + 2.9166666667vw, 7.2rem);
}
@supports not (font-size: clamp(51 * 0.1rem, 3.7rem + 2.9166666667vw, 72 * 0.1rem)) {
.home-reason__item::before {
font-size: 5.1rem;
}
}
.home-reason__icon {
margin: auto;
}
.home-reason__icon {
width: 36.4vw;
}
.home-reason__text-area {
margin-bottom: 4.1vw;
}
.home-reason__text-area h3 {
line-height: 1.5;
font-size: clamp(2.1rem, 1.6333333333rem + 0.9722222222vw, 2.8rem);
}
@supports not (font-size: clamp(21 * 0.1rem, 1.6333333333rem + 0.9722222222vw, 28 * 0.1rem)) {
.home-reason__text-area h3 {
font-size: 2.1rem;
}
}
.home-reason__text-area small {
font-size: 0.8em;
}
.home-reason__text-area p {
color: #fff;
}
@media (max-width: 899.98px) {
.home-reason__text-area h3 {
margin-bottom: 4px;
}
}
@media (min-width: 900px) {
.home-reason__list {
gap: 24px;
}
.home-reason__item {
display: grid;
grid-template-columns: auto 1fr auto;
grid-column-gap: 56px;
padding: 0 88px 16px;
}
.home-reason__item::before {
margin-bottom: 0;
align-self: center;
}
.home-reason__icon {
width: 164px;
}
.home-reason__text-area {
margin-bottom: 0;
}
.home-reason__text-area h3 {
margin-bottom: 13px;
}
}
/* voice */
.home-voice {
background-color: #245544;
color: #d2c2ac;
}
.home-voice__item {
border-bottom: 4px solid;
}
.home-voice__item {
padding-bottom: 4.1vw;
}
.home-voice__image {
position: relative;
}
.home-voice__image img {
margin: auto;
}
.home-voice__image img {
width: 43.5vw;
}
.home-voice__image figcaption {
margin-top: 8px;
text-align: center;
}
.home-voice__image figcaption span {
display: block;
width: fit-content;
margin: auto;
padding: 0.2em 1em;
background-color: #d2c2ac;
color: #232320;
}
.home-voice__image figcaption span:nth-of-type(2) {
line-height: 1.4;
font-size: clamp(1.6rem, 1.2rem + 0.8333333333vw, 2.2rem);
}
@supports not (font-size: clamp(16 * 0.1rem, 1.2rem + 0.8333333333vw, 22 * 0.1rem)) {
.home-voice__image figcaption span:nth-of-type(2) {
font-size: 1.6rem;
}
}
.home-voice__text-area {
color: #fff;
}
@media (max-width: 767.98px) {
.home-voice__item:not(:last-of-type) {
margin-bottom: 11.2vw;
}
.home-voice__image {
margin-bottom: 4.1vw;
}
}
@media (min-width: 768px) {
.home-voice__list {
display: grid;
grid-gap: 44px;
}
.home-voice__item {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 26px;
padding-bottom: 16px;
}
.home-voice__image {
max-height: 360px;
}
.home-voice__image img {
width: 234px;
}
}
@media (min-width: 1200px) {
.home-voice__list {
grid-template-columns: 1fr 1fr;
}
}
/* faq */
@media (min-width: 768px) {
.home-faq__inner {
max-width: 1200px;
margin: auto;
}
}
/* info */
.home-info__banner a + a {
margin-top: 8.2vw;
}
@media (min-width: 768px) {
.home-info__banner {
width: 640px;
margin: 0 auto 32px;
}
.home-info__banner a + a {
margin-top: 32px;
}
}