@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) 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, table, th, td, tr, tbody, thead, tfoot):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-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; } /* 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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: "Source Han Code JP"; src: url("../../fonts/SourceHanCodeJP.ttc") format("truetype-collection"); font-weight: normal; font-style: normal; font-display: swap; } * { min-inline-size: 0; } html { scroll-padding-top: 50px; touch-action: manipulation; } @media screen and (max-width: 767px) { html { scroll-padding-top: 60px; } } body { font-size: 1rem; font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #222222; } h1, h2, h3, h4, h5, p, span, a, dt, dd, th, td, button, label { letter-spacing: 0.1em; } p { font-feature-settings: "palt"; } a { color: inherit; text-decoration: none; transition: all 0.3s; cursor: pointer; } @media (any-hover: hover) { a:hover { opacity: 0.7; } } a[href*="tel:"] { pointer-events: none; } @media screen and (max-width: 767px) { a[href*="tel:"] { pointer-events: auto; } } img { max-width: 100%; height: auto; vertical-align: bottom; } @media screen and (max-width: 767px) { img { width: 100%; } } button { cursor: pointer; } .c-title { display: flex; flex-direction: column; } .c-title__en { font-size: 2rem; font-weight: bold; color: rgba(75, 88, 26, 0.3); } @media screen and (max-width: 767px) { .c-title__en { font-size: 1.25rem; } } .c-title__ja { font-size: 2.625rem; color: #4B581A; margin-top: 22px; font-weight: bold; } @media screen and (max-width: 767px) { .c-title__ja { font-size: 1.625rem; margin-top: 0; } } .c-title__ja-contact { margin-top: 5px; } .c-title--center { text-align: center; } .c-title--center__ja { margin-top: 16px; } .c-title--white__en { color: rgba(255, 255, 255, 0.3); } .c-title--white__ja { color: #fff; } @media screen and (max-width: 767px) { .c-title--contact { text-align: center; } } .c-link { font-size: 1.5rem; color: #4B581A; display: flex; align-items: center; letter-spacing: 0.05em; border-bottom: 2px solid #4B581A; width: -moz-fit-content; width: fit-content; margin-top: 55px; font-weight: bold; padding-bottom: 5px; } @media screen and (max-width: 767px) { .c-link { font-size: 1rem; margin-left: auto; } } .c-link__icon { width: 17px; height: 20px; margin-left: 20px; display: flex; align-items: center; flex-shrink: 0; margin-top: 3px; } @media screen and (max-width: 767px) { .c-link__icon { width: 12px; height: 15px; } } .c-link__icon img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-contact { background: url(../img/common/contact-bg.png) no-repeat center center/cover; position: relative; z-index: 0; padding-top: 100px; padding-bottom: 100px; } @media screen and (max-width: 767px) { .c-contact { padding-top: 50px; padding-bottom: 50px; } } .c-contact::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(75, 88, 26, 0.8); z-index: -1; } .c-contact__body { display: flex; align-items: center; justify-content: center; gap: 35px; } @media screen and (max-width: 767px) { .c-contact__body { flex-direction: column; gap: 50px; } } .c-contact__text { color: #fff; font-size: 1.125rem; line-height: 2.1; margin-top: 15px; } @media screen and (max-width: 767px) { .c-contact__text { font-size: 0.9375rem; text-align: center; line-height: 1.6; white-space: nowrap; margin-top: 39px; } } .c-contact__right { display: flex; flex-direction: column; } .c-contact__link { background-color: #fff; color: #4B581A; padding: 20px 20px; border-radius: 60px; display: flex; align-items: center; justify-content: center; font-size: 1.625rem; gap: 14px; width: 362px; font-weight: bold; } @media screen and (max-width: 767px) { .c-contact__link { color: #4B581A; width: 345px; } } .c-contact__link--tel { margin-top: 20px; } @media screen and (max-width: 767px) { .c-contact__link--tel { white-space: nowrap; } } .c-contact__link-icon { display: flex; align-items: center; } .c-contact__link-icon svg { display: block; width: 100%; height: auto; fill: #4B581A; } .c-page__title { display: flex; flex-direction: column; margin-bottom: 60px; justify-content: center; align-items: center; } @media screen and (max-width: 767px) { .c-page__title { margin-bottom: 40px; } } .c-page__title-en { font-size: 2rem; font-weight: bold; color: rgba(75, 88, 26, 0.5); letter-spacing: 0.1em; text-transform: uppercase; } @media screen and (max-width: 767px) { .c-page__title-en { font-size: 1.25rem; } } .c-page__title-ja { font-size: 2.625rem; font-weight: bold; color: #4B581A; margin-top: 16px; } @media screen and (max-width: 767px) { .c-page__title-ja { font-size: 1.625rem; margin-top: 12px; text-align: center; } } .c-content-title { font-size: 2.75rem; font-weight: bold; color: #4B581A; padding-bottom: 10px; border-bottom: 2px solid #4B581A; margin-bottom: 20px; font-weight: bold; } @media screen and (max-width: 767px) { .c-content-title { font-size: 1.25rem; margin-bottom: 15px; } } .c-text { font-size: 1.125rem; line-height: 1.9; margin-top: 15px; } @media screen and (max-width: 767px) { .c-text { font-size: 1rem; } } .c-text--green { color: #4B581A; font-weight: bold; } .c-text--mt0 { margin-top: 0px; } .c-text--bold { font-weight: bold; } .c-text--source { font-family: "Source Han Code JP", monospace; } .c-content-body-title { font-size: 2.125rem; font-weight: bold; color: #4B581A; padding-left: 30px; position: relative; } .c-content-body-title::before { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 37px; background-color: #4B581A; margin-top: 9px; } @media screen and (max-width: 767px) { .c-content-body-title { font-size: 1.25rem; margin-bottom: 15px; border-left: 8px solid #4B581A; padding-left: 10px; } .c-content-body-title::before { content: none; } } .c-card { display: flex; align-items: stretch; justify-content: center; background-color: #F2EFEA; border-radius: 40px; overflow: hidden; /* Safari: flex子要素の高さ計算をChromeと揃える */ min-height: 0; } @media screen and (max-width: 767px) { .c-card { flex-direction: column; } } .c-card--white { background-color: #fff; } .c-card-img { width: 24%; flex-shrink: 0; /* Safari: 画像エリアの高さを親に合わせて伸縮させる */ min-height: 0; align-self: stretch; display: flex; } @media screen and (max-width: 767px) { .c-card-img { width: 100%; height: 150px; display: block; } } .c-card-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; /* Safari: 画像がflexコンテナ内で正しく高さに収まる */ min-height: 0; flex: 1 1 0%; } .c-card-body { width: 76%; padding: 40px; /* Safari: flex子の高さを他ブラウザと揃える */ min-height: 0; } @media screen and (max-width: 767px) { .c-card-body { width: 100%; padding: 20px; } } .c-card-title { font-size: 1.25rem; text-align: center; color: #4B581A; background-color: #fff; padding: 20px; font-weight: bold; border-radius: 20px; } .c-card-title--base { background-color: #F2EFEA; } @media screen and (max-width: 767px) { .c-card-title { font-size: 0.9375rem; padding: 10px; } } .c-card-text { line-height: 2.2; margin-top: 20px; } @media screen and (max-width: 767px) { .c-card-text { margin-top: 15px; font-size: 0.875rem; } } body.is-fixed { overflow: hidden; } .js-header.offset { top: -54px; } @media screen and (max-width: 767px) { .js-header.offset { top: 0; } } @media screen and (max-width: 767px) { .js-header.is-header-hidden { top: -80px; } } .js-header { transition: top 0.3s ease; } .l-header { width: 100%; position: fixed; top: 35px; right: 0; z-index: 130; } @media screen and (max-width: 767px) { .l-header { height: 60px; top: 15px; } } .l-header__inner { max-width: 1120px; margin-left: auto; padding: 0 40px; } @media screen and (max-width: 767px) { .l-header__inner { padding: 0 20px 0 5px; } } .l-header__nav { display: flex; align-items: center; width: -moz-fit-content; width: fit-content; margin-inline: auto; background-color: rgba(255, 255, 255, 0.8); border-radius: 31px; padding: 10px 10px 10px 30px; } .l-header__logo { width: 100%; max-width: 160px; } .l-header__nav-list { display: flex; align-items: center; justify-content: space-between; margin-left: 56px; gap: 20px; } .l-header__nav-item { position: relative; padding: 10px; } .l-header__nav-item--has-sub .js-nav-toggle { cursor: pointer; } .l-header__nav-item--has-sub:hover { border-bottom: 2px solid #4B581A; } .l-header__nav-item--has-sub:hover .l-header__nav-sub-list { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .l-header__nav-item--has-sub.is-open { border-bottom: 2px solid #4B581A; } .l-header__nav-item--has-sub.is-open .l-header__nav-sub-list { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .l-header__nav-link { display: block; text-decoration: none; color: #333; font-size: 1.125rem; font-weight: bold; transition: color 0.3s ease; } .l-header__nav-link:hover { color: #4B581A; opacity: 1; } .l-header__nav-sub-list { position: absolute; top: 170%; left: 50%; margin-top: 0; background-color: rgba(255, 255, 255, 0.8); border-radius: 0 0 4px 4px; padding: 25px; min-width: 110px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translate(-50%, 0); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; z-index: 100; border-radius: 20px; } .l-header__nav-sub-list::before { content: ""; position: absolute; top: -40px; left: 0; width: 100%; height: 40px; } .l-header__nav-sub-list--jpmaca { min-width: 170px; } .l-header__nav-sub-list--service { min-width: 140px; } .l-header__nav-sub-item { list-style: none; margin-bottom: 24px; } .l-header__nav-sub-item:last-child { margin-bottom: 0; } .l-header__nav-sub-link { display: block; text-decoration: none; color: #333; font-size: 1rem; font-weight: bold; transition: color 0.3s ease; white-space: nowrap; } .l-header__nav-sub-link:hover { color: #4B581A; opacity: 1; } .l-header__contact { background-color: #4B581A; color: #fff; padding: 12px 20px; border-radius: 21px; display: flex; align-items: center; gap: 8px; } .l-header__contact:hover { border-bottom: none; } .l-header__contact-icon { width: 23px; height: 17px; display: flex; align-items: center; flex-shrink: 0; color: #4B581A; } .l-header__contact-icon img { display: block; width: 100%; height: auto; } .l-header__contact-link { color: #fff; white-space: nowrap; display: flex; align-items: center; } .l-header__hamburger { display: none; flex-direction: column; justify-content: space-between; width: 35px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 200; position: relative; } @media screen and (max-width: 767px) { .l-header__hamburger { display: flex; margin-left: auto; } } .l-header__hamburger-line { display: block; width: 100%; height: 3px; background-color: #4B581A; transition: all 0.3s ease; border-radius: 2px; } .l-header__hamburger.is-active .l-header__hamburger-line { background-color: #fff; } .l-header__hamburger.is-active .l-header__hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .l-header__hamburger.is-active .l-header__hamburger-line:nth-child(2) { opacity: 0; } .l-header__hamburger.is-active .l-header__hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .l-header body.home .l-header__hamburger:not(.is-active) .l-header__hamburger-line, .l-header body.front-page .l-header__hamburger:not(.is-active) .l-header__hamburger-line { background-color: #fff; } .l-header body.home.is-top-company-inview .l-header__hamburger:not(.is-active) .l-header__hamburger-line, .l-header body.front-page.is-top-company-inview .l-header__hamburger:not(.is-active) .l-header__hamburger-line { background-color: #4B581A; } .l-header__mobile-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 133; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .l-header__mobile-menu.is-active { opacity: 1; visibility: visible; } @media screen and (max-width: 767px) { .l-header__mobile-menu { display: block; } } .l-header__mobile-menu-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #4B581A; opacity: 0.8; z-index: -1; } .l-header__mobile-menu-content { position: relative; width: 100%; height: 100%; padding: 60px 20px 40px; overflow-y: auto; } .l-header__mobile-nav-list { list-style: none; padding: 0; margin: 0; } .l-header__mobile-nav-item { margin-bottom: 0; } .l-header__mobile-nav-item--has-sub .l-header__mobile-nav-sub-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .l-header__mobile-nav-item--has-sub.is-open .l-header__mobile-nav-sub-list { max-height: 500px; } .l-header__mobile-nav-item--has-sub.is-open .l-header__mobile-nav-arrow--down { transform: rotate(0deg); } .l-header__mobile-nav-link-wrapper { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 20px 0; } .l-header__mobile-nav-link { display: flex; align-items: center; justify-content: space-between; width: -moz-fit-content; width: fit-content; padding: 20px 0; color: #fff; font-size: 1.375rem; font-weight: bold; text-decoration: none; transition: opacity 0.3s ease; text-align: left; } .l-header__mobile-nav-link:active { opacity: 0.7; } .l-header__mobile-nav-link span { text-shadow: 0 0 6px rgba(0, 0, 0, 0.3); } .l-header__mobile-nav-link--text { padding: 0; text-align: left; } .l-header__mobile-nav-link--toggle { text-align: left; } .l-header__mobile-nav-toggle { display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } .l-header__mobile-nav-toggle:active { opacity: 0.7; } .l-header__mobile-nav-tagline { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin: -15px 0 15px 0; padding-left: 0; line-height: 1.6; font-weight: normal; } .l-header__mobile-nav-arrow { display: inline-block; width: 37px; height: 20px; transition: transform 0.3s ease; margin-right: auto; transform: rotate(-90deg); } .l-header__mobile-nav-arrow img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .l-header__mobile-nav-arrow--down { transform: rotate(-90deg); } .l-header .l-header__mobile-nav-item--has-sub.is-open .l-header__mobile-nav-arrow--down { transform: rotate(0deg); } .l-header__mobile-nav-sub-list { list-style: none; padding: 0; margin: 0; padding-left: 20px; } .l-header__mobile-nav-sub-link { display: block; padding: 15px 0; color: #fff; font-size: 1.125rem; text-decoration: none; transition: opacity 0.3s ease; } .l-header__mobile-nav-sub-link:active { opacity: 0.7; } .l-header__mobile-nav-contact { background-color: #fff; color: #4B581A; padding: 10px 20px; border-radius: 60px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; } .l-header__mobile-nav-contact .l-header__mobile-nav-link { color: #4B581A; padding: 0; justify-content: center; } .l-header__mobile-nav-contact .l-header__mobile-nav-link span { text-shadow: none; white-space: nowrap; } .l-header__mobile-nav-contact .l-header__mobile-nav-link--tel { font-weight: bold; } .l-header__mobile-nav-contact--tel { margin-top: 20px; } .l-header__mobile-nav-access { margin-top: 20px; color: #fff; text-align: center; } .l-header__mobile-nav-access-title { font-size: 0.9375rem; } .l-header__mobile-nav-access-address { font-size: 0.6875rem; line-height: 1.6; } .l-header__mobile-nav-contact-icon { width: 15%; display: flex; align-items: center; flex-shrink: 0; color: #4B581A; margin-right: 3%; } .l-header__mobile-nav-contact-icon svg { display: block; width: 100%; height: auto; } @media screen and (max-width: 767px) { .l-header__nav-list { display: none; } .l-header__nav { justify-content: space-between; width: 100%; padding: 0; background-color: transparent; } .l-header__logo { max-width: 200px; } } .l-footer { background-color: #402F19; color: #fff; padding: 60px 0 40px; } @media screen and (max-width: 767px) { .l-footer { padding: 0; } } .l-footer__inner { max-width: 1200px; padding: 0 40px; margin-inline: auto; } @media screen and (max-width: 767px) { .l-footer__inner { padding: 0 20px; } } .l-footer__content { display: flex; gap: 100px; } @media screen and (max-width: 767px) { .l-footer__content { gap: 0px; } } .l-footer__left { flex-shrink: 0; } @media screen and (max-width: 767px) { .l-footer__left { width: 40%; } } .l-footer__logo { font-family: "vdl-logog", sans-serif; font-size: 1.5rem; color: #fff; margin-bottom: 15px; } @media screen and (max-width: 767px) { .l-footer__logo { display: none; } } .l-footer__address { line-height: 1.8; color: #fff; } @media screen and (max-width: 767px) { .l-footer__address { display: none; } } .l-footer__contact { margin-top: 13px; } @media screen and (max-width: 767px) { .l-footer__contact { display: none; } } .l-footer__contact-link { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid #fff; border-radius: 4px; color: #fff; text-decoration: none; transition: all 0.3s; width: -moz-fit-content; width: fit-content; } @media (any-hover: hover) { .l-footer__contact-link:hover { opacity: 0.7; } } .l-footer__contact-icon { display: flex; align-items: center; flex-shrink: 0; } .l-footer__contact-icon img { display: block; width: 23px; height: 17px; } .l-footer__contact-text { font-size: 0.875rem; } .l-footer__right { flex: 1; } @media screen and (max-width: 767px) { .l-footer__right { display: none; } } .l-footer__nav { display: flex; gap: 60px; } .l-footer__nav-column--company { width: 110px; } .l-footer__nav-title { font-size: 1.125rem; font-weight: bold; color: #fff; margin-bottom: 16px; } .l-footer__nav-list { list-style: none; padding: 0; margin: 0; padding-left: 15px; white-space: nowrap; } .l-footer__nav-item { margin-bottom: 8px; } .l-footer__nav-item:last-child { margin-bottom: 0; } .l-footer__nav-link { color: #fff; text-decoration: none; transition: all 0.3s; } @media (any-hover: hover) { .l-footer__nav-link:hover { opacity: 0.7; } } .l-footer__bottom-links { display: flex; flex-direction: column; margin-top: 20px; } .l-footer__bottom-link { color: #fff; text-decoration: none; transition: all 0.3s; font-weight: bold; } .l-footer__bottom-link:first-child { margin-bottom: 7px; } @media (any-hover: hover) { .l-footer__bottom-link:hover { opacity: 0.7; } } .l-footer__company-sp { display: none; } @media screen and (max-width: 767px) { .l-footer__company-sp { display: block; margin-top: 30px; } } .l-footer__company-sp-title { font-size: 1rem; color: #fff; margin-bottom: 16px; } .l-footer__company-sp-list { list-style: none; padding: 0; margin: 0; padding-left: 15px; } .l-footer__company-sp-item { margin-bottom: 8px; } .l-footer__company-sp-item:last-child { margin-bottom: 0; } .l-footer__company-sp-link { font-size: 0.6875rem; color: #fff; text-decoration: none; transition: all 0.3s; } @media (any-hover: hover) { .l-footer__company-sp-link:hover { opacity: 0.7; } } .l-footer__right-sp { display: none; } @media screen and (max-width: 767px) { .l-footer__right-sp { display: flex; flex-direction: column; width: 100%; border-left: 1px solid #fff; } } .l-footer__right-sp-link { font-size: 0.875rem; color: #fff; text-decoration: none; padding: 15px 0 15px 15px; border-bottom: 1px solid #fff; transition: all 0.3s; } .l-footer__right-sp-link:last-child { border-bottom: none; } @media (any-hover: hover) { .l-footer__right-sp-link:hover { opacity: 0.7; } } @media screen and (max-width: 767px) { .l-footer__right { display: block; width: 100%; } .l-footer__nav { display: none; } .l-footer__bottom-links { display: none; } } .l-footer__copyright { font-size: 0.875rem; margin-top: 46px; } @media screen and (max-width: 767px) { .l-footer__copyright { font-size: 0.75rem; text-align: center; padding-bottom: 20px; } } .l-container { max-width: 1920px; margin-inline: auto; min-width: 1200px; } @media screen and (max-width: 767px) { .l-container { min-width: auto; } } .l-inner { max-width: 1200px; padding: 0 40px; margin-inline: auto; } @media screen and (max-width: 767px) { .l-inner { padding: 0 20px; } } .l-inner--wide { max-width: 1400px; } .js-fadein { opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 1s, visibility 1s, transform 1s; } .js-fadein.visible { opacity: 1; visibility: visible; transform: translateY(0); } .js-fadein--delay1 { transition-delay: 0.2s; } .js-fadein--delay2 { transition-delay: 0.4s; } .js-fadein--delay3 { transition-delay: 0.6s; } .p-top__mv { background: url(../img/top/mv-pc.webp) no-repeat center center/cover; padding-bottom: 20px; } @media screen and (max-width: 767px) { .p-top__mv { background: url(../img/top/mv-sp.webp) no-repeat center center/cover; } } .p-top__mv-title { font-size: 6.6875rem; font-weight: bold; color: #fff; line-height: 1.2; letter-spacing: 0.05em; padding-top: 72px; } @media screen and (max-width: 767px) { .p-top__mv-title { font-size: 3rem; } } .p-top__mv-title-first { font-size: 3rem; } @media screen and (max-width: 767px) { .p-top__mv-title-first { font-size: 1.375rem; } } .p-top__mv-title-middle { font-size: 3.8125rem; } @media screen and (max-width: 767px) { .p-top__mv-title-middle { font-size: 1.625rem; } } .p-top__mv-text { color: #fff; font-size: 1.5rem; margin-top: 30px; font-weight: bold; } @media screen and (max-width: 767px) { .p-top__mv-text { font-size: 1.125rem; } } .p-top__mv-know { display: block; color: #4B581A; font-size: 1.75rem; margin-top: 20px; font-weight: bold; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 767px) { .p-top__mv-know { font-size: 1.125rem; } } .p-top__mv-know-link { background-color: #fff; width: -moz-fit-content; width: fit-content; padding: 20px 40px 20px 180px; border-top-right-radius: 33px; border-bottom-right-radius: 33px; display: flex; align-items: center; } @media screen and (max-width: 767px) { .p-top__mv-know-link { padding: 15px 25px 15px 20px; } } .p-top__mv-know-link img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top__mv-know-icon { margin-left: 16px; width: 20px; height: 25px; margin-top: 3px; } @media screen and (max-width: 767px) { .p-top__mv-know-icon { width: 15px; height: 17px; margin-left: 12px; } } .p-top__company { padding-bottom: 104px; } .p-top__company__link { font-size: 1.5rem; color: #4B581A; } .p-top__company-body { margin-top: 104px; display: flex; align-items: center; justify-content: space-between; } @media screen and (max-width: 767px) { .p-top__company-body { flex-direction: column; align-items: flex-start; margin-top: 51px; } } .p-top__company-text { font-size: 1.125rem; line-height: 2.2; } @media screen and (max-width: 767px) { .p-top__company-text { font-size: 0.9375rem; } } .p-top__company-images { display: flex; align-items: center; justify-content: space-between; margin-top: 42px; gap: 20px; } @media screen and (max-width: 767px) { .p-top__company-images { gap: 12px; } } .p-top__body { display: flex; align-items: center; justify-content: space-between; gap: 40px; } @media screen and (max-width: 767px) { .p-top__body { flex-direction: column; align-items: flex-start; } } @media screen and (max-width: 767px) { .p-top__body-reverse { flex-direction: column-reverse; } } .p-top__left { width: 50%; } @media screen and (max-width: 767px) { .p-top__left { width: 100%; } } .p-top__right { width: 50%; } @media screen and (max-width: 767px) { .p-top__right { width: 100%; } } .p-top__text { font-size: 1.125rem; line-height: 2.2; margin-top: 42px; } @media screen and (max-width: 767px) { .p-top__text { font-size: 0.9375rem; margin-top: 20px; line-height: 1.9; } } .p-top__about { position: relative; padding-top: 57px; padding-bottom: 60px; } .p-top__about::before { content: ""; position: absolute; top: 0; left: 0; width: 95%; height: 100%; background-color: #F2EFEA; z-index: -1; border-top-right-radius: 40px; border-bottom-right-radius: 40px; } @media screen and (max-width: 767px) { .p-top__about::before { left: initial; right: 0; border-top-left-radius: 40px; border-bottom-left-radius: 40px; border-top-right-radius: 0; border-bottom-right-radius: 0; width: 97%; } } .p-top__about-links { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 40px; } @media screen and (max-width: 767px) { .p-top__about-links { gap: 12px; flex-direction: column; } } .p-top__about-link { display: flex; justify-content: space-between; align-items: stretch; width: 33.3333333333%; padding: 0; border: 1px solid #4B581A; background-color: #fff; border-radius: 6px; box-shadow: 0 3px 6px rgba(34, 34, 34, 0.16); } @media screen and (max-width: 767px) { .p-top__about-link { padding: 0; width: 100%; } } .p-top__about-link-left { display: flex; align-items: center; gap: 10px; padding: 20px 11px 20px 20px; } @media screen and (max-width: 767px) { .p-top__about-link-left { padding: 15px 25px 15px 20px; } } .p-top__about-link-number { font-size: 3.5625rem; font-weight: bold; color: rgba(75, 88, 26, 0.3); } .p-top__about-link-title { font-size: 1.25rem; color: #4B581A; font-weight: bold; } @media screen and (max-width: 767px) { .p-top__about-link-title { font-size: 0.9375rem; } } .p-top__about-link-right { display: flex; align-items: center; justify-content: center; background-color: #4B581A; padding: 0 20px; } @media screen and (max-width: 767px) { .p-top__about-link-right { padding: 0 15px; } } .p-top__service { position: relative; padding-top: 57px; padding-bottom: 60px; margin-top: 60px; } .p-top__service::before { content: ""; position: absolute; top: 0; right: 0; width: 95%; height: 100%; background-color: #F2EFEA; z-index: -1; border-top-left-radius: 40px; border-bottom-left-radius: 40px; } @media screen and (max-width: 767px) { .p-top__service::before { left: 0; right: initial; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-top-left-radius: 0; border-bottom-left-radius: 0; width: 97%; } } .p-top__news { padding-top: 57px; padding-bottom: 60px; margin-top: 60px; background-color: #E9ECE4; } .p-top__news-body { background-color: #fff; padding: 60px; border-radius: 10px; } @media screen and (max-width: 767px) { .p-top__news-body { padding: 20px; } } .p-top__news-list { margin-top: 50px; } @media screen and (max-width: 767px) { .p-top__news-list { margin-top: 35px; } } .p-top__news-item { display: flex; align-items: center; justify-content: flex-start; gap: 5px; border-bottom: 1px solid #4B581A; padding-bottom: 25px; } .p-top__news-item:not(:first-child) { margin-top: 25px; } @media screen and (max-width: 767px) { .p-top__news-item:not(:first-child) { margin-top: 10px; } } @media screen and (max-width: 767px) { .p-top__news-item { flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: 10px; } } .p-top__news-left { display: flex; align-items: center; gap: 5px; min-width: 175px; flex-shrink: 0; } @media screen and (max-width: 767px) { .p-top__news-left { min-width: auto; } } .p-top__news-time { color: #343534; font-size: 0.875rem; white-space: nowrap; } @media screen and (max-width: 767px) { .p-top__news-time { font-size: 0.6875rem; } } .p-top__news-tag { background-color: #4B581A; color: #fff; font-size: 0.75rem; padding: 6px 9px; border-radius: 2px; min-width: 60px; text-align: center; white-space: nowrap; } @media screen and (max-width: 767px) { .p-top__news-tag { font-size: 0.5rem; min-width: 50px; padding-top: 3px; padding-bottom: 3px; } } .p-top__news-title { font-size: 1.125rem; color: #343534; text-align: left; flex: 1; } @media screen and (max-width: 767px) { .p-top__news-title { font-size: 0.875rem; margin-top: 10px; } } .p-top__news-more { color: #4B581A; font-size: 1.5rem; font-weight: bold; margin-top: 50px; width: -moz-fit-content; width: fit-content; margin-left: auto; display: flex; align-items: center; gap: 20px; padding-bottom: 10px; border-bottom: 2px solid #4B581A; } @media screen and (max-width: 767px) { .p-top__news-more { font-size: 1rem; } } .p-top__news-more-icon { width: 19px; height: 16px; display: block; margin-top: 3px; } .p-top__news-more-icon img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-about { padding-top: 130px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .p-about { padding-top: 90px; padding-bottom: 60px; } } .p-about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 456px)); justify-content: center; gap: 20px; } @media screen and (max-width: 767px) { .p-about__grid { grid-template-columns: repeat(2, 1fr); gap: 5px; } } .p-about__item { display: flex; flex-direction: column; background-color: #fff; border: 2px solid #4B581A; border-radius: 30px; overflow: hidden; transition: all 0.3s; text-decoration: none; } @media (any-hover: hover) { .p-about__item:hover { box-shadow: 0 4px 12px rgba(34, 34, 34, 0.15); transform: translateY(-2px); } } @media screen and (max-width: 609px) { .p-about__item { border-radius: 15px; height: -moz-fit-content; height: fit-content; } } .p-about__item-image { width: 100%; overflow: hidden; flex-shrink: 0; } .p-about__item-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-about__item-content { display: flex; align-items: stretch; justify-content: space-between; padding: 0px; gap: 0; } @media screen and (max-width: 767px) { .p-about__item-content { gap: 0; } } .p-about__item-content-left { display: flex; align-items: center; gap: 10px; padding: 13px 11px 16px 20px; flex: 1; } .p-about__item-content-left--pt40 { padding-top: 20px; } @media screen and (max-width: 767px) { .p-about__item-content-left { gap: 8px; } .p-about__item-content-left--pt40 { padding: 32px 5px 29px 3px; } } @media screen and (max-width: 609px) { .p-about__item-content-left { padding: 10px 5px 10px 3px; } .p-about__item-content-left--pt40 { padding: 16px 5px 16px 3px; } } .p-about__item-content-right { display: flex; align-items: center; justify-content: center; background-color: #4B581A; padding: 0 15px; flex-shrink: 0; } @media screen and (max-width: 767px) { .p-about__item-content-right { padding: 0 5px; } } .p-about__item-number { font-size: 3.5625rem; font-weight: bold; color: rgba(75, 88, 26, 0.3); line-height: 1; flex-shrink: 0; } @media screen and (max-width: 767px) { .p-about__item-number { font-size: 0.9375rem; } } .p-about__item-text { font-size: 1.25rem; color: #4B581A; font-weight: 600; flex: 1; line-height: 1.6; } @media screen and (max-width: 767px) { .p-about__item-text { font-size: 0.75rem; line-height: 1.2; } } @media screen and (max-width: 609px) { .p-about__item-text { font-size: 0.6875rem; } } .p-about__item-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .p-about__item-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 767px) { .p-about__item-icon { width: 8px; height: 8px; } } .p-history { padding-top: 130px; } @media screen and (max-width: 767px) { .p-history { padding-top: 90px; } } .p-history__content { background-color: #F2EFEA; position: relative; padding-top: 60px; padding-bottom: 100px; } @media screen and (max-width: 767px) { .p-history__content { margin-top: 40px; padding-bottom: 60px; } } .p-history__sections { position: relative; padding-left: 40px; } @media screen and (max-width: 767px) { .p-history__sections { padding-left: 30px; } } .p-history__sections::before { content: ""; position: absolute; left: 2px; top: 65px; bottom: 0; width: 1px; height: 96%; border-left: 1px dashed #4B581A; } @media screen and (max-width: 767px) { .p-history__sections::before { left: 12px; top: 30px; height: 94%; } } .p-history__section { position: relative; margin-bottom: 42px; background-color: #fff; border: 2px solid #4B581A; border-radius: 20px; padding: 50px 30px; } .p-history__section:last-child { margin-bottom: 0; } @media screen and (max-width: 767px) { .p-history__section { margin-bottom: 40px; padding: 20px 15px; border-radius: 6px; } } @media screen and (max-width: 767px) { .p-history__section:not(.p-history__section--open) .p-history__section-content { display: none; } } .p-history__section-header { position: relative; margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; cursor: pointer; } @media screen and (max-width: 767px) { .p-history__section-header { margin-bottom: 0; gap: 10px; } } .p-history__section-dot { position: absolute; left: -70px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background-color: transparent; border: 5px solid #4B581A; background-color: #fff; z-index: 2; transform: translateX(-50%); } @media screen and (max-width: 767px) { .p-history__section-dot { left: -35px; top: 0; } } @media screen and (max-width: 609px) { .p-history__section-dot { width: 16px; height: 16px; border-width: 3px; } } .p-history__section-title { position: relative; font-size: 2.125rem; font-weight: bold; color: #4B581A; flex: 1; line-height: 1.5; } .p-history__section-title::before { content: ""; position: absolute; top: 45%; transform: translateY(-50%); left: -60px; width: 2.5%; height: 1px; border-top: 1px dashed #4B581A; } @media screen and (max-width: 767px) { .p-history__section-title::before { left: -30px; width: 2.3%; top: 20%; } } @media screen and (max-width: 400px) { .p-history__section-title::before { width: 6%; } } @media screen and (max-width: 767px) { .p-history__section-title { font-size: 0.9375rem; padding-top: 0; } } .p-history__section-toggle { display: none; flex-shrink: 0; color: #4B581A; cursor: pointer; transition: all 0.3s; } @media screen and (max-width: 767px) { .p-history__section-toggle { display: flex; width: 30px; height: 15px; font-size: 1.875rem; font-weight: 100; } } .p-history__section-toggle-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .p-history__section-content { margin-top: 20px; } @media screen and (max-width: 767px) { .p-history__section-content { margin-top: 15px; } } .p-history__section-content p { font-size: 1.25rem; line-height: 1.65; color: #222222; } @media screen and (max-width: 767px) { .p-history__section-content p { font-size: 0.9375rem; line-height: 1.6; } } .p-history__btns { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 60px; } @media screen and (max-width: 767px) { .p-history__btns { flex-direction: column; } } .p-history__btn { background-color: #fff; border: 2px solid #4B581A; border-radius: 23px; padding: 10px 20px; display: flex; align-items: center; } @media screen and (max-width: 767px) { .p-history__btn { width: 92%; margin-right: auto; margin-left: auto; text-align: center; justify-content: center; } } .p-history__btn-text { font-size: 1.125rem; color: #4B581A; } @media screen and (max-width: 450px) { .p-history__btn-text { font-size: 0.75rem; } } .p-history__btn-icon { width: 16px; height: 16px; margin-left: 5px; margin-top: 3px; } .p-history__btn-icon img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-archive { padding-top: 130px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .p-archive { padding-top: 60px; padding-bottom: 60px; } } .p-archive__tabs { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; border: 3px solid #4B581A; border-radius: 9999px; width: -moz-fit-content; width: fit-content; margin: 0 auto 60px; padding: 12px; } @media screen and (max-width: 767px) { .p-archive__tabs { margin-bottom: 40px; gap: 0; } } .p-archive__tab { display: inline-block; padding: 10px 64px; font-size: 1.125rem; transition: all 0.3s; color: #4B581A; font-weight: bold; cursor: pointer; border-radius: 9999px; } @media screen and (max-width: 767px) { .p-archive__tab { padding: 5px 8px; font-size: 14px; } } .p-archive__tab.is-active { background-color: #4B581A; color: #fff; } @media (any-hover: hover) { .p-archive__tab:hover:not(.is-active) { background-color: rgba(75, 88, 26, 0.1); } } .p-archive__list { display: flex; flex-direction: column; gap: 0; } .p-archive__item { border-bottom: 1px solid #DEDEDE; } .p-archive__item-link { display: flex; align-items: center; gap: 20px; padding: 36px 0; text-decoration: none; transition: all 0.3s; } @media screen and (max-width: 767px) { .p-archive__item-link { gap: 5px; padding: 10px 0; flex-direction: column; align-items: baseline; } } @media (any-hover: hover) { .p-archive__item-link:hover { opacity: 0.7; } } .p-archive__item-date { font-size: 1.125rem; color: #222222; white-space: nowrap; flex-shrink: 0; min-width: 100px; } @media screen and (max-width: 767px) { .p-archive__item-date { font-size: 0.75rem; min-width: 70px; } } .p-archive__item-content { display: flex; align-items: center; gap: 16px; width: 18%; } @media screen and (max-width: 767px) { .p-archive__item-content { gap: 10px; } } .p-archive__item-category { display: inline-block; padding: 6px 10px; background-color: #4B581A; color: #fff; font-size: 0.75rem; border-radius: 3px; white-space: nowrap; flex-shrink: 0; } @media screen and (max-width: 767px) { .p-archive__item-category { font-size: 0.625rem; padding: 3px 8px; } } .p-archive__item-title { font-size: 1.125rem; color: #222222; font-weight: 500; line-height: 1.6; flex: 1; } @media screen and (max-width: 767px) { .p-archive__item-title { font-size: 0.875rem; line-height: 1.5; } } .p-archive__no-posts { text-align: center; padding: 60px 0; color: #222222; font-size: 1rem; } @media screen and (max-width: 767px) { .p-archive__no-posts { padding: 40px 0; font-size: 0.875rem; } } .p-archive__pagination { display: flex; justify-content: center; align-items: center; margin-top: 60px; } @media screen and (max-width: 767px) { .p-archive__pagination { display: none; margin-top: 40px; } } .p-archive__pagination .page-numbers { display: flex; align-items: center; gap: 15px; list-style: none; padding: 0; margin: 0; } @media screen and (max-width: 767px) { .p-archive__pagination .page-numbers { gap: 6px; } } .p-archive__pagination .page-numbers li { margin: 0; } .p-archive__pagination .page-numbers a, .p-archive__pagination .page-numbers span { display: flex; align-items: center; justify-content: center; width: 57px; height: 51px; border-radius: 50%; font-size: 1.125rem; transition: all 0.3s; border: 3px solid #4B581A; background-color: #fff; color: #4B581A; } @media screen and (max-width: 767px) { .p-archive__pagination .page-numbers a, .p-archive__pagination .page-numbers span { width: 32px; height: 32px; font-size: 0.875rem; } } .p-archive__pagination .page-numbers .current { background-color: #4B581A; color: #fff; border-color: #4B581A; } .p-archive__pagination .page-numbers a:hover { background-color: rgba(75, 88, 26, 0.1); } .p-archive__pagination .page-numbers .next, .p-archive__pagination .page-numbers .prev { border: none; background-color: transparent; color: transparent; font-size: 0; width: 0; height: 0; padding: 0; } @media screen and (max-width: 767px) { .p-archive__pagination .page-numbers .next, .p-archive__pagination .page-numbers .prev { border-left-width: 8px; border-top-width: 6px; border-bottom-width: 6px; } } @media (any-hover: hover) { .p-archive__pagination .page-numbers .next:hover, .p-archive__pagination .page-numbers .prev:hover { opacity: 0.7; } } .p-archive__pagination .page-numbers .next { border-left: 12px solid #4B581A; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-radius: 0; } .p-archive__pagination .page-numbers .prev { border-right: 12px solid #4B581A; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-radius: 0; } .p-archive__loadmore { display: none; margin-top: 40px; flex-direction: column; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { .p-archive__loadmore { display: flex; } } .p-archive__loadmore-dots { display: flex; align-items: center; justify-content: center; gap: 5px; } .p-archive__loadmore-dots span { display: block; width: 8px; height: 8px; border-radius: 50%; background-color: rgba(75, 88, 26, 0.25); } .p-archive__loadmore-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 40px; color: #4B581A; font-weight: bold; font-size: 0.9375rem; transition: all 0.3s; } .p-archive__loadmore-btn.is-loading { opacity: 0.6; } @media (any-hover: hover) { .p-archive__loadmore-btn:hover { opacity: 0.7; } } .p-single { padding-top: 130px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .p-single { padding-top: 90px; padding-bottom: 60px; } } .p-single__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } @media screen and (max-width: 767px) { .p-single__meta { gap: 10px; margin-bottom: 12px; } } .p-single__date { font-size: 0.875rem; color: #222222; } @media screen and (max-width: 767px) { .p-single__date { font-size: 0.75rem; } } .p-single__category { display: inline-block; padding: 6px 10px; background-color: #343534; color: #fff; font-size: 0.75rem; border-radius: 3px; } @media screen and (max-width: 767px) { .p-single__category { font-size: 0.625rem; padding: 4px 8px; } } .p-single__title { font-size: 1.75rem; border-bottom: 3px solid #4B581A; padding-bottom: 15px; font-weight: bold; line-height: 1.5; color: #222222; margin-bottom: 40px; } @media screen and (max-width: 767px) { .p-single__title { font-size: 1.25rem; margin-bottom: 24px; } } .p-single__content { margin-bottom: 60px; } @media screen and (max-width: 767px) { .p-single__content { margin-bottom: 40px; } } .p-single__content.c-entry-content, .p-single .c-entry-content { font-size: 1rem; line-height: 1.8; color: #222222; } .p-single__content.c-entry-content p, .p-single .c-entry-content p { margin-bottom: 1em; } .p-single__content.c-entry-content p:last-child, .p-single .c-entry-content p:last-child { margin-bottom: 0; } .p-single__content.c-entry-content img, .p-single .c-entry-content img { max-width: 100%; height: auto; vertical-align: top; display: block; margin: 1.5em 0; } .p-single__content.c-entry-content figure, .p-single .c-entry-content figure { margin: 1.5em 0; max-width: 590px; } .p-single__content.c-entry-content figure img, .p-single .c-entry-content figure img { margin: 0; } .p-single__content.c-entry-content figcaption, .p-single .c-entry-content figcaption { font-size: 0.875rem; color: #343534; margin-top: 0.5em; text-align: left; } .p-single__content.c-entry-content .aligncenter, .p-single .c-entry-content .aligncenter { margin-left: auto; margin-right: auto; } .p-single__content.c-entry-content .alignleft, .p-single .c-entry-content .alignleft { float: left; margin-right: 1.5em; margin-bottom: 0.5em; } .p-single__content.c-entry-content .alignright, .p-single .c-entry-content .alignright { float: right; margin-left: 1.5em; margin-bottom: 0.5em; } .p-single__nav { margin-top: 60px; } @media screen and (max-width: 767px) { .p-single__nav { margin-top: 40px; } } .p-single__nav-inner { display: flex; align-items: center; justify-content: center; gap: 100px; flex-wrap: wrap; } @media screen and (max-width: 767px) { .p-single__nav-inner { gap: 10px; } } .p-single__nav-prev, .p-single__nav-next { display: flex; } .p-single__nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 47px; border: 3px solid #4B581A; border-radius: 9999px; color: #222222; font-size: 1.125rem; color: #4B581A; font-weight: bold; transition: all 0.3s; text-decoration: none; } @media screen and (max-width: 767px) { .p-single__nav-link { padding: 10px 14px; font-size: 0.875rem; gap: 6px; } } @media (any-hover: hover) { .p-single__nav-link:hover { opacity: 0.7; } } .p-single__nav-link--disabled { opacity: 0.5; cursor: default; pointer-events: none; } .p-single__nav-arrow { display: inline-block; width: 16px; height: 16px; } @media screen and (max-width: 767px) { .p-single__nav-arrow { width: 13px; height: 13px; } } .p-single__nav-arrow--prev { transform: rotate(180deg); position: relative; top: 12px; } @media screen and (max-width: 767px) { .p-single__nav-arrow--prev { top: 8px; } } .p-single__nav-arrow--next { position: relative; top: -8px; } @media screen and (max-width: 767px) { .p-single__nav-arrow--next { top: -7px; } } .p-single__nav-center { flex-shrink: 0; } .p-single__nav-blog { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; transition: all 0.3s; } @media screen and (max-width: 767px) { .p-single__nav-blog { width: 48px; height: 48px; } .p-single__nav-blog img { width: 40px; height: 40px; } } @media (any-hover: hover) { .p-single__nav-blog:hover { opacity: 0.7; } } .p-contact { padding-top: 130px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .p-contact { padding-top: 60px; padding-bottom: 60px; } } .p-contact .p-contact__text { margin-bottom: 30px; font-size: 1.25rem; line-height: 2.1; text-align: center; } @media screen and (max-width: 767px) { .p-contact .p-contact__text { font-size: 1rem; line-height: 1.6; text-align: left; } } .p-contact .p-contact__text-link { text-decoration: underline; } .p-contact .p-form { padding-top: 60px; } @media screen and (max-width: 767px) { .p-contact .p-form { padding-top: 0px; } } .p-contact .p-form__list { max-width: 910px; margin-right: auto; margin-left: auto; } .p-contact .p-form__item { display: flex; padding: 22px 0 0; flex-direction: column; } @media screen and (max-width: 767px) { .p-contact .p-form__item { margin-right: auto; margin-left: auto; align-items: flex-start; } } .p-contact .p-form__title { display: flex; width: 30%; gap: 10px; align-items: center; margin-bottom: 12px; } @media screen and (max-width: 767px) { .p-contact .p-form__title { width: 100%; } } .p-contact .p-form__title span { display: inline-block; padding: 5px 8px; color: #fff; font-size: 12px; background-color: #DD585B; border-radius: 3px; } .p-contact .p-form__input { flex: 1; } @media screen and (max-width: 767px) { .p-contact .p-form__input { width: 100%; } } .p-contact .p-formInput input::-moz-placeholder, .p-contact .p-formTextarea textarea::-moz-placeholder { color: lightgray; font-size: 1rem; } .p-contact .p-formInput input::placeholder, .p-contact .p-formTextarea textarea::placeholder { color: lightgray; font-size: 1rem; } @media screen and (max-width: 767px) { .p-contact .p-formInput input::-moz-placeholder, .p-contact .p-formTextarea textarea::-moz-placeholder { font-size: 0.875rem; } .p-contact .p-formInput input::placeholder, .p-contact .p-formTextarea textarea::placeholder { font-size: 0.875rem; } } .p-contact .p-formInput input { width: 100%; height: 43px; padding-left: 20px; border: 1px solid #222222; border-radius: 3px; font-size: 16px; } @media screen and (max-width: 767px) { .p-contact .p-formInput input { width: 100%; height: 50px; margin-left: 0; padding-left: 15px; } } .p-contact .p-formInput input:focus, .p-contact .p-formTextarea textarea:focus { outline: 2px solid #B5B5B5; } .p-contact .p-formInput--sm input { width: 357px; max-width: 100%; } @media screen and (max-width: 767px) { .p-contact .p-formInput--sm input { width: 100%; } } .p-contact .p-formInput__address { margin-top: 10px; } .p-contact .p-formInput__address input { width: 70%; } @media screen and (max-width: 767px) { .p-contact .p-formInput__address input { width: 100%; } } .p-contact .p-formInput--tel { display: flex; gap: 5px; align-items: center; } .p-contact .p-formInput--tel > * { min-width: 0; } .p-contact .p-formInput--tel input { width: 150px; max-width: 100%; } .p-contact .p-formSelect select { width: 375px; max-width: 100%; height: 43px; padding-left: 20px; border: 1px solid #222222; border-radius: 3px; color: #222222; font-size: 1rem; background: url(../img/common/arrow-down.svg) no-repeat right 15px center/15px 13px; -webkit-appearance: none; -moz-appearance: none; appearance: none; align-items: center; } @media screen and (max-width: 767px) { .p-contact .p-formSelect select { width: 100%; height: 50px; font-size: 0.875rem; padding-left: 15px; } } .p-contact .p-formSelect select:focus { outline: 2px solid #B5B5B5; } .p-contact .p-formTextarea textarea { width: 100%; min-height: 253px; padding-top: 10px; padding-left: 20px; border: 1px solid #222222; border-radius: 3px; font-size: 16px; } @media screen and (max-width: 767px) { .p-contact .p-formTextarea textarea { width: 100%; min-height: 200px; margin-left: 0; padding-left: 15px; } } .p-contact .p-form__acceptance { margin-top: 30px; text-align: center; } @media screen and (max-width: 767px) { .p-contact .p-form__acceptance { text-align: left; } } .p-contact .p-formCheckbox input { display: none; } .p-contact .p-formCheckbox input + span { position: relative; display: inline-block; width: auto; padding: 0 0 0 35px; font-size: 1rem; cursor: pointer; } @media screen and (max-width: 767px) { .p-contact .p-formCheckbox input + span { font-size: 0.875rem; } } .p-contact .p-formCheckbox input + span::before { content: ""; position: absolute; top: 50%; left: 0; display: block; width: 20px; height: 20px; border: 1px solid #222222; border-radius: 3px; background-color: #fff; transform: translateY(-50%); } .p-contact .p-formCheckbox input + span::after { content: ""; position: absolute; top: 50%; left: 6px; display: block; width: 8px; height: 13px; margin-top: -8px; border-right: 3px solid #4B581A; border-bottom: 3px solid #4B581A; opacity: 0; transform: rotate(45deg); } .p-contact .p-formCheckbox input:checked + span::after { opacity: 1; } .p-contact .p-form__submit { margin-top: 50px; text-align: center; position: relative; width: -moz-fit-content; width: fit-content; margin-right: auto; margin-left: auto; } @media screen and (max-width: 767px) { .p-contact .p-form__submit { margin-top: 30px; } } .p-contact .p-form__submit::after { content: ""; position: absolute; top: 50%; right: 100px; width: 12px; height: 12px; transform: translateY(-50%); background: url("../img/common/arrow-white.svg") no-repeat center/contain; pointer-events: none; } @media screen and (max-width: 767px) { .p-contact .p-form__submit::after { right: 60px; } } .p-contact .p-formBtn input { width: 330px; padding: 17px 0; border: none; color: #fff; font-size: 18px; text-align: center; border-radius: 9999px; background-color: #4B581A; cursor: pointer; transition: opacity 0.5s; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; } .p-contact .p-formBtn input:disabled { color: #fff; background-color: #eee; border-color: #eee; } @media screen and (min-width: 768px) { .p-contact .p-formBtn input:disabled:hover { cursor: not-allowed; } } @media screen and (min-width: 768px) { .p-contact .p-formBtn input:hover { opacity: 0.7; transition: opacity 0.5s; } } @media screen and (max-width: 767px) { .p-contact .p-formBtn input { width: -moz-fit-content; width: fit-content; padding: 14px 92px; } } .p-contact .wpcf7 form.sent .wpcf7-response-output { padding: 15px 10px; border: 5px solid #4B581A; font-size: 1.125rem; text-align: center; border-radius: 3px; } @media screen and (max-width: 767px) { .p-contact .wpcf7 form.sent .wpcf7-response-output { font-size: 1rem; } } .p-contact .wpcf7 form.invalid .wpcf7-response-output, .p-contact .wpcf7 form.unaccepted .wpcf7-response-output, .p-contact .wpcf7 form.payment-required .wpcf7-response-output { padding: 15px 10px; border-color: #DD585B; font-size: 1.125rem; } @media screen and (max-width: 767px) { .p-contact .wpcf7 form.invalid .wpcf7-response-output, .p-contact .wpcf7 form.unaccepted .wpcf7-response-output, .p-contact .wpcf7 form.payment-required .wpcf7-response-output { font-size: 16px; } } .p-contact .wpcf7-spinner { display: none; } .p-contact .wpcf7-not-valid-tip { display: block; color: #DD585B; font-size: 16px; font-weight: normal; } .p-contact .p-formValidation__error { display: none; margin-top: 10px; color: #DD585B; font-size: 16px; font-weight: normal; } .p-contact .wpcf7-form:not(.hide_error_message) .p-formValidation:has(.wpcf7-not-valid-tip) .p-formValidation__error { display: block; } .p-privacy-policy { padding-top: 130px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .p-privacy-policy { padding-top: 90px; padding-bottom: 60px; } } .p-privacy-policy__text { margin-bottom: 60px; } @media screen and (max-width: 767px) { .p-privacy-policy__text { font-size: 0.875rem; } } .p-privacy-policy__content { margin-top: 60px; } @media screen and (max-width: 767px) { .p-privacy-policy__content { margin-top: 40px; } } .p-privacy-policy__content-title { font-size: 2rem; font-weight: bold; color: #4B581A; padding-bottom: 10px; border-bottom: 2px solid #4B581A; margin-bottom: 20px; } @media screen and (max-width: 767px) { .p-privacy-policy__content-title { font-size: 1.25rem; margin-bottom: 15px; } } @media screen and (max-width: 767px) { .p-privacy-policy__content-text { font-size: 0.875rem; } } .p-privacy-policy__content-text-link { color: blue; text-decoration: underline; } .p-privacy-policy__bottom { margin-left: auto; width: -moz-fit-content; width: fit-content; margin-top: 50px; } .p-privacy-policy__bottom-text { text-align: center; } @media screen and (max-width: 767px) { .p-privacy-policy__bottom-text { font-size: 0.875rem; } } .p-message { padding-top: 130px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .p-message { padding-top: 90px; padding-bottom: 60px; } } .p-message__img { border-radius: 40px; overflow: hidden; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: inline-block; } .p-message__title { font-size: 1.5rem; font-weight: bold; color: #4B581A; margin-top: 30px; } @media screen and (max-width: 767px) { .p-message__title { font-size: 1.25rem; } } .p-message__text { font-size: 1.25rem; line-height: 1.7; margin-top: 30px; } @media screen and (max-width: 767px) { .p-message__text { font-size: 1rem; margin-top: 15px; } } .p-message__sign { margin-left: auto; width: -moz-fit-content; width: fit-content; } .p-message__sign p { text-align: center; } .p-corporation { padding-top: 130px; padding-bottom: 100px; } @media screen and (max-width: 767px) { .p-corporation { padding-top: 90px; padding-bottom: 60px; } } .p-corporation__content { margin-top: 60px; } @media screen and (max-width: 767px) { .p-corporation__content { margin-top: 40px; } } .p-corporation__content--mt130 { margin-top: 130px; } @media screen and (max-width: 767px) { .p-corporation__content--mt130 { margin-top: 80px; } } .p-corporation__content-text { font-size: 1.25rem; line-height: 1.7; margin-top: 30px; } @media screen and (max-width: 767px) { .p-corporation__content-text { font-size: 0.9375rem; margin-top: 20px; } } .p-corporation__info { margin-top: 40px; } @media screen and (max-width: 767px) { .p-corporation__info { margin-top: 30px; } } .p-corporation__info-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; margin-top: 5px; } .p-corporation__info-row--first { margin-top: 0; } @media screen and (max-width: 767px) { .p-corporation__info-row { margin-top: 3px; } } .p-corporation__info-label { width: 200px; background-color: #4B581A; color: #fff; font-size: 1.125rem; font-weight: bold; padding: 20px 30px; display: flex; align-items: center; flex-shrink: 0; flex-grow: 0; justify-content: center; border-radius: 6px; box-sizing: border-box; } @media screen and (max-width: 767px) { .p-corporation__info-label { width: 30%; padding: 10px 5px; font-size: 0.9375rem; border-radius: 10px; text-align: center; } } @media screen and (max-width: 609px) { .p-corporation__info-label { font-size: 0.875rem; } } .p-corporation__info-value { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 0; background-color: #fff; color: #222222; font-size: 1.125rem; padding: 13px 30px 13px 10px; margin-left: 15px; display: block; border-bottom: 1px solid #4B581A; overflow-wrap: break-word; word-break: break-word; box-sizing: border-box; } @media screen and (max-width: 767px) { .p-corporation__info-value { padding: 10px; font-size: 0.875rem; margin-left: 5px; } } @media screen and (max-width: 609px) { .p-corporation__info-value { font-size: 0.75rem; } } .p-corporation__content-body { margin-top: 30px; display: flex; align-items: flex-start; justify-content: flex-start; gap: 40px; } @media screen and (max-width: 767px) { .p-corporation__content-body { margin-top: 20px; flex-direction: column; gap: 20px; } } .p-corporation__content-map { max-width: 426px; width: 100%; position: relative; overflow: hidden; } .p-corporation__content-map iframe { width: 100%; height: 100%; aspect-ratio: 4/3; border: 0; display: block; } .p-corporation__content-address { margin-top: 20px; } .p-corporation__content-address--first { margin-top: 0; } .p-corporation__content-address-text { font-family: "Source Han Code JP", monospace; } .p-corporation__content-address-title { color: #4B581A; font-weight: bold; } .p-service { padding-top: 130px; padding-bottom: 100px; } @media screen and (max-width: 767px) { .p-service { padding-top: 90px; padding-bottom: 60px; } } .p-service__inner { max-width: 1160px; margin-left: auto; margin-right: auto; padding: 0 40px; } @media screen and (max-width: 767px) { .p-service__inner { padding: 0 20px; } } .p-service__links { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 900px; margin: 40px auto 0; } @media screen and (max-width: 767px) { .p-service__links { gap: 12px; flex-direction: column; } } .p-service__link { display: flex; align-items: stretch; width: 50%; padding: 0; border: 2px solid #4B581A; background-color: #fff; border-radius: 6px; box-shadow: 0 3px 6px rgba(34, 34, 34, 0.16); overflow: hidden; text-decoration: none; cursor: pointer; } @media screen and (max-width: 767px) { .p-service__link { width: 100%; } } .p-service__link-left { flex: 1; display: flex; align-items: stretch; overflow: hidden; min-width: 0; } .p-service__link-img { flex: 0 0 30%; display: flex; align-items: stretch; overflow: hidden; } .p-service__link-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .p-service__link-title { flex: 1; display: flex; align-items: center; justify-content: center; padding: 38px 0; background-color: #fff; font-size: 1.25rem; color: #4B581A; font-weight: bold; text-align: center; } @media screen and (max-width: 767px) { .p-service__link-title { padding: 15px 25px 15px 20px; font-size: 0.9375rem; } } .p-service__link-right { flex: 0 0 8%; display: flex; align-items: center; justify-content: center; background-color: #4B581A; padding: 0; min-width: 60px; } @media screen and (max-width: 767px) { .p-service__link-right { flex: 0 0 10%; min-width: 50px; } } .p-service__link-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .p-service__link-icon img { display: block; width: 20px; height: 20px; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 767px) { .p-service__br { margin-top: 10px; display: block; } } .p-service__content { margin-top: 60px; } @media screen and (max-width: 767px) { .p-service__content { margin-top: 40px; } } .p-service__content-body { margin-top: 40px; } .p-service__content-body--first { margin-top: 20px; } @media screen and (max-width: 767px) { .p-service__content-body { margin-top: 40px; } } .p-service__content-body-item { background-color: #F2EFEA; border-radius: 40px; padding: 35px 40px; margin-top: 20px; } .p-service__content-body-item--reverse { display: flex; align-items: center; justify-content: center; gap: 10px; } @media screen and (max-width: 767px) { .p-service__content-body-item--reverse { flex-direction: column; } } .p-service__content-body-item:not(:first-child) { margin-top: 27px; } @media screen and (max-width: 767px) { .p-service__content-body-item { padding: 30px 15px; } } .p-service__content-body-item-left { width: 55%; } @media screen and (max-width: 767px) { .p-service__content-body-item-left { width: 100%; } } .p-service__content-body-item-right { width: 45%; } @media screen and (max-width: 767px) { .p-service__content-body-item-right { width: 100%; } } .p-service__content-body-item-content { margin-top: 28px; } @media screen and (max-width: 767px) { .p-service__content-body-item-content { margin-top: 10px; } } .p-service__content-body-item-title { font-size: 1.75rem; font-weight: bold; color: #4B581A; } @media screen and (max-width: 767px) { .p-service__content-body-item-title { font-size: 0.9375rem; } } .p-service__content-body-item-sub-title { font-size: 1.375rem; font-weight: bold; } @media screen and (max-width: 767px) { .p-service__content-body-item-sub-title { font-size: 0.9375rem; } } .p-service__content-body-item-text { font-size: 1.25rem; line-height: 1.9; } .p-service__content-body-item-text-mt { margin-top: 14px; } @media screen and (max-width: 767px) { .p-service__content-body-item-text { font-size: 0.9375rem; line-height: 1.68; } } .p-service__content-body-item-right-img { border-radius: 40px; overflow: hidden; } .p-service__content-body-item-right-imgs { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; } .p-service__content-body-item-right-img01 { grid-area: 1/1/2/3; border-top-right-radius: 40px; border-top-left-radius: 40px; overflow: hidden; } .p-service__content-body-item-right-img02 { grid-area: 2/1/3/2; border-bottom-left-radius: 40px; overflow: hidden; height: -moz-fit-content; height: fit-content; } .p-service__content-body-item-right-img03 { grid-area: 2/2/3/3; border-bottom-right-radius: 40px; overflow: hidden; height: -moz-fit-content; height: fit-content; } .p-service__quality { margin-top: 80px; } @media screen and (max-width: 767px) { .p-service__quality { margin-top: 60px; } } .p-service__quality-content { margin-top: 64px; } .p-service__quality-content--first { margin-top: 24px; } @media screen and (max-width: 767px) { .p-service__quality-content { margin-top: 50px; } .p-service__quality-content--first { margin-top: 30px; } } .p-service__content-body-sub-title { font-size: 1.75rem; font-weight: bold; color: #4B581A; margin-top: 26px; } .p-service__content-body-sub-title--mt { margin-top: 60px; } @media screen and (max-width: 767px) { .p-service__content-body-sub-title { font-size: 1.25rem; } } .p-service__content-body-text { font-size: 1.25rem; line-height: 1.9; margin-top: 20px; } @media screen and (max-width: 767px) { .p-service__content-body-text { font-size: 1rem; margin-top: 15px; } } .p-service__quality-cards { display: flex; gap: 20px; margin-top: 40px; } @media screen and (max-width: 767px) { .p-service__quality-cards { flex-direction: column; gap: 15px; margin-top: 30px; } } .p-service__quality-card { flex: 1; display: flex; align-items: center; gap: 10px; padding: 25px 20px; background-color: #fff; border: 2px solid #4B581A; border-radius: 6px; } @media screen and (max-width: 767px) { .p-service__quality-card { padding: 20px 10px; } } .p-service__quality-card-icon { flex-shrink: 0; width: 145px; height: 145px; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { .p-service__quality-card-icon { width: 100px; height: 100px; } } .p-service__quality-card-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; } .p-service__quality-card-content { flex: 1; min-width: 0; } .p-service__quality-card-title { font-size: 1.25rem; font-weight: bold; color: #4B581A; margin-bottom: 7px; } @media screen and (max-width: 767px) { .p-service__quality-card-title { font-size: 0.9375rem; margin-bottom: 5px; } } .p-service__quality-card-text { font-size: 1.25rem; } @media screen and (max-width: 767px) { .p-service__quality-card-text { font-size: 0.9375rem; } } .p-service__quality-inspection { margin-top: 20px; } @media screen and (max-width: 767px) { .p-service__quality-inspection { margin-top: 20px; } } .p-service__quality-inspection-list { margin: 0; padding: 0; list-style: none; } .p-service__quality-inspection-item { padding: 30px 40px 30px 30px; background-color: #F8F8F8; display: flex; align-items: flex-start; gap: 20px; margin-bottom: 10px; } .p-service__quality-inspection-item:last-child { margin-bottom: 0; } @media screen and (max-width: 767px) { .p-service__quality-inspection-item { flex-direction: column; gap: 8px; margin-bottom: 30px; padding: 15px; } } .p-service__quality-inspection-label { flex: 0 0 17%; font-size: 1.125rem; font-weight: bold; color: #4B581A; line-height: 1.6; } @media screen and (max-width: 767px) { .p-service__quality-inspection-label { flex: none; font-size: 0.9375rem; } } .p-service__quality-inspection-desc { flex: 1; font-size: 1rem; line-height: 1.9; min-width: 0; } @media screen and (max-width: 767px) { .p-service__quality-inspection-desc { font-size: 0.9375rem; padding-left: 0; line-height: 1.68; } } .p-service__process { display: flex; gap: 20px; margin-top: 20px; } @media screen and (max-width: 767px) { .p-service__process { flex-direction: column; gap: 15px; margin-top: 30px; } } .p-service__process-item { flex: 1; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background-color: #fff; border: 2px solid #4B581A; } @media screen and (max-width: 767px) { .p-service__process-item { width: 100%; } } .p-service__process-header { background-color: #4B581A; color: #fff; font-size: 1.25rem; font-weight: bold; padding: 15px 20px; } @media screen and (max-width: 767px) { .p-service__process-header { font-size: 1.125rem; padding: 12px 15px; } } .p-service__process-content { display: flex; align-items: center; gap: 5px; padding: 17px 15px; min-height: 150px; } @media screen and (max-width: 767px) { .p-service__process-content { padding: 15px; min-height: auto; } } .p-service__process-icon { flex-shrink: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { .p-service__process-icon { width: 60px; height: 60px; } } .p-service__process-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; } .p-service__process-text { flex: 1; font-size: 1rem; line-height: 1.8; color: #222222; min-width: 0; } @media screen and (max-width: 767px) { .p-service__process-text { font-size: 0.875rem; line-height: 1.7; } } .p-service__content-body-wrap { display: flex; align-items: center; gap: 60px; } .p-service__content-body-wrap:not(:first-child) { margin-top: 46px; } @media screen and (max-width: 767px) { .p-service__content-body-wrap { flex-direction: column; gap: 20px; } } .p-service__content-body-left { width: 65%; } @media screen and (max-width: 767px) { .p-service__content-body-left { width: 100%; } } .p-service__content-body-right { width: 35%; } @media screen and (max-width: 767px) { .p-service__content-body-right { width: 100%; } } .p-service__content-body-right-img { border-radius: 40px; overflow: hidden; } .p-service__text { font-size: 1.0625rem; margin-top: 16px; } .p-pawdered { padding-top: 130px; padding-bottom: 100px; } @media screen and (max-width: 767px) { .p-pawdered { padding-top: 90px; padding-bottom: 60px; } } .p-pawdered__content { margin-top: 60px; padding-bottom: 60px; } @media screen and (max-width: 767px) { .p-pawdered__content { margin-top: 40px; padding-bottom: 30px; } } .p-pawdered__peru { margin-top: 60px; } .p-pawdered__peru-body { margin-top: 60px; } .p-pawdered__peru-body-title-source { font-family: "Source Han Code JP", monospace; } .p-pawdered__compare { margin-top: 24px; } @media screen and (max-width: 767px) { .p-pawdered__compare { margin-top: 15px; } } .p-pawdered__compare-text { margin-top: 16px; } @media screen and (max-width: 767px) { .p-pawdered__compare-text { font-size: 0.6875rem; margin-top: 20px; } } .p-pawdered__tables { margin-top: 60px; } @media screen and (max-width: 767px) { .p-pawdered__tables { margin-top: 40px; } } .p-pawdered__tables-inner { display: flex; gap: 40px; align-items: flex-start; } @media screen and (max-width: 767px) { .p-pawdered__tables-inner { flex-direction: column; gap: 32px; } } .p-pawdered__table-section { flex: 1; min-width: 0; } @media screen and (max-width: 767px) { .p-pawdered__table-section { width: 100%; } } .p-pawdered__table-title { font-size: 2.125rem; font-weight: bold; color: #4B581A; padding-left: 12px; border-left: 4px solid #4B581A; margin-bottom: 12px; line-height: 1.4; } @media screen and (max-width: 767px) { .p-pawdered__table-title { font-size: 1rem; border-left: 6px solid #4B581A; } } .p-pawdered__table-wrap { overflow-x: auto; border: 1px solid #4B581A; border-radius: 4px; } .p-pawdered__table { width: 100%; font-size: 0.9375rem; background-color: #fff; } .p-pawdered__table thead tr { border-bottom: 2px solid #4B581A; } .p-pawdered__table thead th { background-color: #4B581A; color: #fff; font-weight: bold; padding: 10px 8px; text-align: center; white-space: nowrap; } .p-pawdered__table thead th:first-child { text-align: left; padding-left: 12px; } .p-pawdered__table tbody tr { border-bottom: 1px dotted #ccc; } .p-pawdered__table tbody tr:last-child { border-bottom: none; } .p-pawdered__table tbody td { padding: 10px 8px; vertical-align: middle; border-right: 1px solid #4B581A; } .p-pawdered__table tbody td:first-child { text-align: left; padding-left: 12px; } .p-pawdered__table tbody td:not(:first-child) { text-align: center; } .p-pawdered__table tbody td:last-child { border-right: none; } @media screen and (max-width: 767px) { .p-pawdered__table { font-size: 0.75rem; } .p-pawdered__table thead th, .p-pawdered__table tbody td { padding: 8px 6px; } .p-pawdered__table thead th:first-child, .p-pawdered__table tbody td:first-child { padding-left: 8px; } } .p-pawdered__table-num { font-weight: bold; color: #343534; } .p-pawdered__table-diff { color: #DD585B; font-weight: bold; } .p-pawdered__tables-note { margin-top: 20px; font-size: 0.75rem; color: #343534; line-height: 1.8; } @media screen and (max-width: 767px) { .p-pawdered__tables-note { font-size: 0.6875rem; margin-top: 16px; } } .p-pawdered__woman { padding-top: 60px; background-color: #F2EFEA; padding-bottom: 60px; } @media screen and (max-width: 767px) { .p-pawdered__woman { padding-top: 30px; padding-bottom: 30px; } } .p-pawdered__woman-body { margin-top: 60px; } .p-pawdered__woman-body-text { margin-top: 15px; } @media screen and (max-width: 767px) { .p-pawdered__woman-body-text { font-size: 0.875rem; } } .p-pawdered__woman-body-wrap:not(:first-child) { margin-top: 60px; } @media screen and (max-width: 767px) { .p-pawdered__woman-body-wrap:not(:first-child) { margin-top: 30px; } } .p-pawdered__woman-body-title-num { margin-right: 10px; } @media screen and (max-width: 767px) { .p-pawdered__woman-body-title-text { margin-left: 30px; } } .p-pawdered__improve-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 2px; margin-top: 20px; border: 2px solid #4B581A; border-radius: 6px; overflow: hidden; background-color: #4B581A; } @media screen and (max-width: 767px) { .p-pawdered__improve-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); } } .p-pawdered__improve-item { background-color: #fff; color: #4B581A; font-weight: bold; font-size: 1.25rem; padding: 20px 16px; display: flex; align-items: center; justify-content: center; text-align: center; } @media screen and (max-width: 767px) { .p-pawdered__improve-item { padding: 16px; font-size: 0.9375rem; } } .p-pawdered__info-cards { display: flex; gap: 24px; margin-top: 20px; } @media screen and (max-width: 767px) { .p-pawdered__info-cards { flex-direction: column; gap: 20px; } } .p-pawdered__info-card { flex: 1; min-width: 0; background-color: #fff; border: 2px solid #4B581A; border-radius: 6px; padding: 30px; } @media screen and (max-width: 767px) { .p-pawdered__info-card { padding: 10px; } } .p-pawdered__info-card-title { font-size: 1.25rem; font-weight: bold; color: #4B581A; margin-bottom: 12px; line-height: 1.4; } @media screen and (max-width: 767px) { .p-pawdered__info-card-title { font-size: 0.9375rem; margin-bottom: 7px; } } .p-pawdered__info-card-text { font-size: 1.25rem; color: #222222; line-height: 1.8; } @media screen and (max-width: 767px) { .p-pawdered__info-card-text { font-size: 0.6875rem; line-height: 1.5; } } .p-pawdered__market { margin-top: 60px; } @media screen and (max-width: 767px) { .p-pawdered__market { margin-top: 30px; } } .p-pawdered__example { margin-top: 40px; } .p-pawdered__example-title { font-size: 1.5rem; font-weight: bold; color: #4B581A; margin-bottom: 10px; } .p-pawdered__example-cards { display: flex; gap: 24px; flex-wrap: wrap; } @media screen and (max-width: 767px) { .p-pawdered__example-cards { justify-content: center; gap: 12px; } } .p-pawdered__example-card { flex: 1; min-width: 0; background-color: #fff; border: 2px solid #4B581A; border-radius: 8px; padding: 24px 5px; display: flex; flex-direction: column; align-items: center; text-align: center; } @media screen and (max-width: 767px) { .p-pawdered__example-card { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); padding: 16px; } } .p-pawdered__example-card-icon { width: 130px; height: 100px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; } .p-pawdered__example-card-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 767px) { .p-pawdered__example-card-icon { width: 80px; height: 50px; } } .p-pawdered__example-card-text { font-size: 1.125rem; font-weight: bold; color: #4B581A; margin-bottom: 4px; line-height: 1.4; } @media screen and (max-width: 767px) { .p-pawdered__example-card-text { font-size: 0.875rem; } } .p-pawdered__link { color: #4B581A; border: 3px solid #4B581A; border-radius: 999px; padding: 10px 20px; display: flex; text-align: center; text-decoration: none; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; margin-top: 40px; gap: 5px; } @media screen and (max-width: 767px) { .p-pawdered__link { width: 100%; justify-content: center; } } .p-pawdered__link-text { font-size: 1.125rem; font-weight: bold; } .p-pawdered__link-icon { width: 18px; height: 18px; } .p-raw { padding-top: 130px; padding-bottom: 80px; } @media screen and (max-width: 767px) { .p-raw { padding-top: 90px; padding-bottom: 60px; } } .p-raw__flavor { margin-top: 60px; } .p-raw__flavor-box { display: flex; align-items: center; justify-content: space-between; gap: 40px; } @media screen and (max-width: 767px) { .p-raw__flavor-box { flex-direction: column; gap: 20px; } } .p-raw__flavor-left { width: 55%; } @media screen and (max-width: 767px) { .p-raw__flavor-left { width: 100%; } } .p-raw__flavor-text { margin-top: 20px; line-height: 1.7; } .p-raw__flavor-right { width: 45%; border-radius: 20px; overflow: hidden; } .p-raw__flavor-right img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .p-raw__flavor-right { width: 100%; height: 180px; } } .p-raw__flavor-food { margin-top: 60px; } .p-raw__flavor-pic { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } @media screen and (max-width: 767px) { .p-raw__flavor-pic { flex-wrap: wrap; gap: 10px; } } .p-raw__flavor-pic-item { width: 30%; border-radius: 20px; overflow: hidden; } .p-raw__flavor-pic-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .p-raw__flavor-pic-item { width: calc(50% - 5px); } } .p-raw__flavor-restaurant { margin-top: 60px; } @media screen and (max-width: 767px) { .p-raw__flavor-restaurant { margin-top: 30px; } } .p-raw__flavor-common-box { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; } @media screen and (max-width: 767px) { .p-raw__flavor-common-box { flex-direction: column; gap: 20px; } } .p-raw__flavor-common-left { width: 65%; } @media screen and (max-width: 767px) { .p-raw__flavor-common-left { width: 100%; } } .p-raw__flavor-common-title { white-space: nowrap; } @media screen and (max-width: 767px) { .p-raw__flavor-common-title { white-space: inherit; font-size: 1.125rem; } } .p-raw__flavor-common-right { width: 35%; border-radius: 40px; overflow: hidden; } .p-raw__flavor-common-right img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 767px) { .p-raw__flavor-common-right { width: 100%; height: 180px; border-radius: 20px; } } .p-raw__flavor-supply { margin-top: 60px; } @media screen and (max-width: 767px) { .p-raw__flavor-supply { margin-top: 30px; } } .p-raw__link { color: #4B581A; border: 3px solid #4B581A; border-radius: 999px; padding: 10px 20px; display: flex; text-align: center; text-decoration: none; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; margin-top: 40px; gap: 5px; } @media screen and (max-width: 767px) { .p-raw__link { width: 100%; justify-content: center; padding: 10px; } } .p-raw__link-text { font-size: 1.125rem; font-weight: bold; } @media screen and (max-width: 767px) { .p-raw__link-text { font-size: 1rem; } } .p-raw__link-icon { width: 18px; height: 18px; } @media screen and (max-width: 767px) { .p-raw__link-icon { width: 20px; height: 20px; } } @media screen and (max-width: 1199px) { .pc-on--xl { display: none; } } @media screen and (max-width: 965px) { .pc-on--middle { display: none; } } @media screen and (max-width: 767px) { .pc-on { display: none; } } @media screen and (max-width: 609px) { .pc-on--sm { display: none; } } @media screen and (min-width: 768px) { .sp-on { display: none; } } @media screen and (max-width: 965px) { .sp-on--middle { display: block; } } .sp-on--middle { display: none; } @media screen and (max-width: 609px) { .sp-on--sm { display: block; } } .sp-on--sm { display: none; }/*# sourceMappingURL=style.css.map */