@layer global, reset, wordpress, base, layout, vendor, components, site, page, javascript, utility; @layer global{ :root { --color-back: #fff; --color-text: #000; --color-primary: #20ad4c; --color-secondary: #20ad4c; --color-error: #8b055b; --color-form: var(--color-primary); --fontFamily-default: "a-otf-ud-shin-go-pr6n", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; --fontFamily-noto: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; --fontFamily-shin-go: "a-otf-ud-shin-go-pr6n", sans-serif; --height-header: 66; --line-clamp: 2; --width-inner-lg: 1200; --width-inner: 1000; --width-inner-sm: 800; --zIndex-spmenu: 39; --zIndex-header: 40; --zIndex-toggle: 42; --zIndex-splash: 50; --leading-trim: calc((1em - 1lh) / 2); --size-check: 24px; --gutter: max(20px, calc(20/1366 * 100vw)); --gutter-inner: 20px; --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); } @media screen and (max-width: 768px) { :root { --height-header: 46; } } /* @font-face { font-family: "xxxxxxxx"; src: url(../fonts/xxxxxxxx.otf) format("opentype"); font-weight: 400; font-style: normal; } */ } @layer reset{ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { 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; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } } @layer base{ /* base style */ html { scroll-padding-top: calc(var(--scroll-padding-top) * 1px); scrollbar-gutter: stable; } body { background: var(--color-back); color: var(--color-text); font-family: var(--fontFamily-default); overflow-wrap: break-word; /* word-break: break-all; */ text-rendering: optimizeLegibility; overflow-x: clip; } a:where(:not(.wp-element-button)) { text-decoration: none; } /* セマンティック要素の復元 (all: unset による消失を補完) */ strong, b { font-weight: 700; } em, i { font-style: italic; } small { font-size: 80%; } sub { vertical-align: sub; font-size: 75%; } sup { vertical-align: super; font-size: 75%; } mark { background-color: #ff0; color: #000; } del, s { text-decoration: line-through; } ins, u { text-decoration: underline; } abbr[title] { text-decoration: underline dotted; cursor: help; } hr { border: none; border-top: 1px solid #ccc; } code, pre { font-family: var(--fontFamily-default); white-space: pre-wrap; } img, picture > img, picture > source, figure { max-width: 100%; } img { height: auto; image-rendering: auto; display: block; } picture { display: contents; } iframe { border: 0; max-width: 100%; } :where(figure) { margin: 0 0 1em; } button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; touch-action: manipulation; font-size: 1rem; } :where( :any-link, button, [type="button"], [type="reset"], [type="submit"], label[for], select, summary, [role="tab"], [role="button"] ) { cursor: pointer; } :focus:not(:focus-visible) { outline: none; } :where(a, button, summary, [role="button"], [role="tab"]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } /* ================================================================ フォーム要素 ================================================================ */ /* label: iOS対応のためにポインター指定 */ label { cursor: pointer; } /* プレースホルダー色調整 */ ::placeholder { color: #ccc; } optgroup { font-size: 1rem; } /* テキスト系入力・テキストエリア・セレクトボックス共通 */ input:not( [type="radio"], [type="checkbox"], [type="range"], [type="file"], [type="hidden"], [type="button"], [type="reset"], [type="submit"], [type="image"], [type="color"] ), textarea, select { border: 1px solid #666666; border-radius: 10px; font-size: 1rem; min-width: 0; padding: 0.5em 0.75em; width: 100%; accent-color: var(--color-form); } @media screen and (max-width: 768px) { input:not( [type="radio"], [type="checkbox"], [type="range"], [type="file"], [type="hidden"], [type="button"], [type="reset"], [type="submit"], [type="image"], [type="color"] ), textarea, select { padding: 0.1em 0.75em; border-radius: 5px; } } /* フォーカス */ input:not( [type="radio"], [type="checkbox"], [type="range"], [type="file"], [type="hidden"], [type="button"], [type="reset"], [type="submit"], [type="image"], [type="color"] ):focus, textarea:focus, select:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: -2px; } textarea { height: 181px; overflow-y: auto; resize: vertical; } /* スピンボタン非表示 (Chrome / Safari) */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button, input[type="month"]::-webkit-outer-spin-button, input[type="month"]::-webkit-inner-spin-button, input[type="datetime-local"]::-webkit-outer-spin-button, input[type="datetime-local"]::-webkit-inner-spin-button, input[type="week"]::-webkit-outer-spin-button, input[type="week"]::-webkit-inner-spin-button, input[type="time"]::-webkit-outer-spin-button, input[type="time"]::-webkit-inner-spin-button, input[type="date"]::-webkit-outer-spin-button, input[type="date"]::-webkit-inner-spin-button { appearance: none; display: none; margin: 0; } /* スピンボタン非表示 (Firefox) */ input[type="number"] { appearance: textfield; } /* 日付系入力のクリアボタン非表示 */ input[type="date"]::-webkit-clear-button, input[type="month"]::-webkit-clear-button, input[type="datetime-local"]::-webkit-clear-button, input[type="time"]::-webkit-clear-button, input[type="week"]::-webkit-clear-button { appearance: none; } /* セレクトボックス */ select { appearance: none; } .c-select { display: block; position: relative; } .c-select select { padding-right: 2.5em; } .c-select::after { border-bottom: 2px solid var(--color-text); border-right: 2px solid var(--color-text); content: ""; display: block; height: 8px; margin: auto; pointer-events: none; position: absolute; right: 16px; top: 0; bottom: 0; transform: rotate(45deg) translateY(-25%); width: 8px; } option:disabled { color: #ccc; opacity: 1; } /* スライダー (type="range") */ input[type="range"] { appearance: none; width: 100%; height: 4px; padding: 0; border: none; border-radius: 0; background: #ddd; margin: 0.5em 0; accent-color: var(--color-form); } input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--color-primary); border-radius: 50%; cursor: pointer; margin-top: -6px; } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--color-primary); border-radius: 50%; cursor: pointer; } input[type="range"]::-moz-range-track { height: 4px; background: #ddd; } /* ラジオボタン・チェックボックス共通 --size-check (variables.css) を変更すると全体のサイズが連動します */ input[type="radio"], input[type="checkbox"] { opacity: 0; position: absolute; } input[type="radio"] + span, input[type="checkbox"] + span { cursor: pointer; display: inline-block; line-height: 1.5; padding-left: calc(var(--size-check) + 0.5em); position: relative; } input[type="radio"]:focus-visible + span, input[type="checkbox"]:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ラジオボタン */ input[type="radio"] + span::before { background: #fff; border: 1px solid #666666; border-radius: 50%; content: ""; height: var(--size-check); left: 0; position: absolute; top: calc((1.5em - var(--size-check)) / 2); width: var(--size-check); } input[type="radio"] + span::after { content: ""; display: none; } input[type="radio"]:checked + span::after { background: var(--color-primary); border-radius: 50%; display: block; height: calc(var(--size-check) * 0.5); left: calc(var(--size-check) * 0.25); position: absolute; top: calc((1.5em - var(--size-check)) / 2 + var(--size-check) * 0.25); width: calc(var(--size-check) * 0.5); } /* チェックボックス */ input[type="checkbox"] + span::before { background: #fff; border-radius: 5px; border: 1px solid #666666; content: ""; height: var(--size-check); left: 0; position: absolute; top: calc((1.5em - var(--size-check)) / 2); width: var(--size-check); } input[type="checkbox"] + span::after { content: ""; display: none; } input[type="checkbox"]:checked + span::after { border-bottom: 3px solid var(--color-primary); border-right: 3px solid var(--color-primary); content: ""; display: block; height: calc(var(--size-check) * 0.6); left: calc(var(--size-check) * 0.35); position: absolute; top: calc((1.5em - var(--size-check)) / 2 + var(--size-check) * 0.13); transform: rotate(45deg); width: calc(var(--size-check) * 0.35); } } @layer layout{ .l-main { /* margin-top: calc(var(--height-header) * 1px); */ position: relative; z-index: 1; } /* .l-main._page { padding-top: 13.7%; } */ .l-col-2 { display: grid; grid-template-columns: 1fr 1fr; } .l-inner { max-width: calc(var(--width-inner) * 1px); margin-left: auto; margin-right: auto; } .l-inner-sm { max-width: calc(var(--width-inner-sm) * 1px); margin-left: auto; margin-right: auto; } .l-inner-lg { max-width: calc(var(--width-inner-lg) * 1px); margin-left: auto; margin-right: auto; } } @layer vendor{ /* プラグイン等のベンダースタイル上書き用 */ } @layer vendor{ /* ブロックエディタ用のスタイル */ #wp-postbody { display: flow-root; overflow: clip; font-size: 15px; line-height: calc(20 / 15); color: #666666; } #wp-postbody :where(.wp-block-pullquote) { font-size: 1em; } #wp-postbody > * { margin-top: 1em; margin-bottom: 1em; } #wp-postbody > *:first-child { margin-top: 0; } #wp-postbody > *:last-child { margin-bottom: 0; } #wp-postbody h1 { font-size: 3em; } #wp-postbody h2 { font-size: 2.5em; } #wp-postbody h3 { font-size: 2em; } #wp-postbody h4 { font-size: 1.5em; } #wp-postbody h5 { font-size: 1.25em; } #wp-postbody h6 { font-size: 1em; } #wp-postbody :is(th, td) { padding: 0.5em; } #wp-postbody blockquote { border: 1px solid #808080; padding: 1.5em; } #wp-postbody .wp-block-pullquote { font-size: 1em !important; line-height: unset !important; margin: 1em 0 !important; padding: unset !important; } #wp-postbody figure { width: fit-content; max-width: 100%; } #wp-postbody figure.wp-block-table { overflow: visible; width: 100%; } #wp-postbody figcaption { text-align: center; margin-top: 0.2em; margin-bottom: 0.2em; } #wp-postbody figure.aligncenter { margin-left: auto !important; margin-right: auto !important; } #wp-postbody img { max-width: 100%; } #wp-postbody :is(img.alignnone, img.alignleft, img.alignright, img.aligncenter) { display: block; height: auto; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; object-fit: contain; width: auto; } #wp-postbody img.alignnone { margin-left: 0; } #wp-postbody img.alignleft { float: left; margin-left: 0; margin-right: 0.5em; } #wp-postbody img.alignright { float: right; margin-left: 0.5em; margin-right: 0; } #wp-postbody ul > li { margin-top: 1em; padding-left: 1em; position: relative; } #wp-postbody ul > li::before { background: currentColor; border-radius: 50%; content: ""; display: block; height: 0.4em; left: 0.25em; position: absolute; top: 0.6em; width: 0.4em; translate: -50% -50%; } #wp-postbody ol { counter-reset: li; } #wp-postbody ol > li { list-style: none; margin-top: 1em; padding-left: 1.8em; position: relative; } #wp-postbody ol > li::before { content: counter(li) "."; counter-increment: li; font-weight: bold; left: 0; position: absolute; top: 0; } #wp-postbody a[href] { text-decoration: underline; transition: opacity 0.2s; } #wp-postbody a[href]:hover { opacity: 0.8; } #wp-postbody table { width: 100%; } #wp-postbody table th { font-weight: 700; } #wp-postbody dt { font-weight: 700; } #wp-postbody dd { margin-bottom: 1.25em; } #wp-postbody pre, #wp-postbody code { white-space: pre-wrap; } #wp-postbody .aligncenter { display: block; } #wp-postbody .alignright { float: right; margin-left: 0.5em; margin-right: 0; } #wp-postbody .alignleft { float: left; margin-left: 0; margin-right: 0.5em; } #wp-postbody .wp-caption, #wp-postbody [class*="wp-image"] { display: block; max-width: 100%; object-fit: contain; text-align: center; } #wp-postbody .wp-caption-text { margin-bottom: 0; margin-top: 0; } #wp-postbody summary::before { content: "▽"; margin-right: 0.2em; display: inline-block; } #wp-postbody details[open] > summary::before { content: "▼"; } #wp-postbody details > * { margin-top: 1em; } #wp-postbody details > *:first-child { margin-top: 0; } #wp-postbody .wp-element-button { background-color: var(--color-primary); color: #fff; } #wp-postbody a[href].wp-element-button { text-decoration: none; } } @layer components{ .c-button-simple { background-color: #666; border: 2px solid #666; padding: 0.5em; text-align: center; border-radius: 20px; min-height: 36px; display: grid; place-items: center; width: fit-content; min-width: 218px; transition: opacity 0.2s; } .c-button-simple:hover { opacity: 0.8; } @media screen and (max-width: 768px) { .c-button-simple { padding: 0.2em; min-width: 167px; min-height: 28px; } } .c-button-simple__text { color: white; font-size: 18px; line-height: calc(21 / 18); letter-spacing: 0.007em; font-weight: 700; } @media screen and (max-width: 768px) { .c-button-simple__text { font-size: 14px; letter-spacing: -0.03em; } } .c-button-cta { background-color: #20ad4c; border: 2px solid #20ad4c; padding: 0.5em 0.75em; text-align: center; border-radius: 25px; min-height: 43px; display: grid; place-items: center; width: fit-content; min-width: 128px; transition: opacity 0.2s; } .c-button-cta:hover { opacity: 0.8; } @media screen and (max-width: 1024px) { .c-button-cta { min-width: 90px; } } .c-button-cta__text { color: white; font-size: 19px; line-height: calc(21 / 18); letter-spacing: 0.1em; font-weight: 700; } @media screen and (max-width: 1024px) { .c-button-cta__text { font-size: 14px; } } } @layer components{ .c-hamburger { --width: 16px; --height: 14px; --line-weight: 2px; --color: #666666; --active-color: #666666; cursor: pointer; height: var(--height); position: relative; width: var(--width); } .c-hamburger__line { background: var(--color); display: inline-block; height: var(--line-weight); left: 0; pointer-events: none; position: absolute; transition: all 0.3s; width: 100%; } .c-hamburger__line:nth-of-type(1) { top: 0; } .c-hamburger__line:nth-of-type(2) { top: calc((var(--height) - var(--line-weight)) / 2); } .c-hamburger__line:nth-of-type(3) { top: calc(var(--height) - var(--line-weight)); } .c-hamburger[aria-expanded="true"] .c-hamburger__line { background: var(--active-color); } .c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-of-type(1) { transform: translateY(calc((var(--height) - var(--line-weight)) / 2)) rotate(-45deg); } .c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-of-type(2) { opacity: 0; } .c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-of-type(3) { transform: translateY(calc((var(--height) - var(--line-weight)) / -2)) rotate(45deg); } } @layer components{ .c-tablist { } .c-tablist__item { border: 1px solid transparent; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 700; margin-left: 10px; margin-top: 10px; min-width: calc(100 / 16 * 1rem); position: relative; text-align: center; text-transform: uppercase; } .c-tablist__item:hover::after { transform: scaleX(1); } .c-tablist__item[aria-selected="true"] { border-color: var(--color-primary); background-color: var(--color-primary); color: #fff; } .c-tablist__item[aria-selected="true"]::after { display: none; } .c-tablist__item::after { background-color: var(--color-primary); bottom: 0; content: ""; height: 1px; left: 15%; position: absolute; transform: scaleX(0); transition: all 0.3s; width: 70%; } .c-tablist__link { display: inline-block; padding-bottom: 10px; padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 10px; width: 100%; } .c-tabmenu__tablist { display: flex; width: 89%; margin-left: auto; margin-right: auto; margin-bottom: -6px; gap: 15px; } @media screen and (max-width: 768px) { .c-tabmenu__tablist { display: grid; grid-template-columns: 1fr 1fr; width: 100%; row-gap: 15px; column-gap: 10px; } } .c-tabmenu__tabListArea { position: relative; } .c-tabmenu__tab { border-top-left-radius: 30px; border-top-right-radius: 30px; flex: 1; text-align: center; position: relative; padding: 30px 10px 20px; cursor: pointer; font-size: 24px; font-weight: 700; line-height: calc(30 / 24); transition: all 0.3s; background-color: transparent; border: 1px solid #fff; border-bottom: none; color: #fff; } @media screen and (max-width: 768px) { .c-tabmenu__tab { border-radius: 8px; border: 2px solid white; font-size: 15px; line-height: calc(18 / 15); padding: 10px; display: grid; place-items: center; } } .c-tabmenu__tab[aria-selected="true"] { transform: translateY(-6px); z-index: 2; background-color: #fff; color: var(--color-primary); border-color: #fff; filter: drop-shadow(8px -8px 0 #157a17); } @media screen and (max-width: 768px) { .c-tabmenu__tab[aria-selected="true"] { transform: translateY(0); filter: drop-shadow(4px -4px 0 #157a17); } } .c-tabmenu__tabpanel { position: relative; z-index: 2; padding-top: 60px; padding-bottom: 45px; padding-left: var(--gutter); padding-right: var(--gutter); border-radius: 50px; background-color: #fff; } @media screen and (max-width: 768px) { .c-tabmenu__tabpanel { margin-top: 50px; padding-top: 45px; padding-bottom: 45px; border-radius: 10px; padding-left: 3%; padding-right: 3%; } } .c-tabmenu__tabpanel > *:not(:first-child) { margin-top: var(--gutter); } } @layer components{ .c-post-row { border-radius: 30px; background-color: #f4ece4; color: #49a44f; } .c-post-row__link { align-items: center; min-height: 45px; display: grid; grid-template-columns: 0.8fr 2fr; transition: opacity 0.2s; } .c-post-row__link:hover { opacity: 0.8; } @media screen and (max-width: 768px) { .c-post-row__link { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } } .c-post-row__date { text-align: center; font-size: 15px; font-weight: 700; line-height: calc(20 / 15); padding-left: 1em; padding-right: 1em; } @media screen and (max-width: 768px) { .c-post-row__date { font-size: 12px; text-align: left; line-height: 1; padding-left: 1.7em; padding-right: 1.7em; } } .c-post-row__title { font-size: 16px; font-weight: 700; line-height: calc(20 / 16); padding-right: 1em; font-weight: 700; } @media screen and (max-width: 768px) { .c-post-row__title { font-size: 14px; line-height: calc(16 / 14); padding-left: 1em; padding-right: 1em; align-self: flex-start; padding-left: 1.4em; padding-right: 1.4em; } } } @layer components{ .c-pagination__list { display: flex; justify-content: center; align-items: center; gap: 5px; } .c-pagination__item a, .c-pagination__item span { font-size: 15px; line-height: 1; text-decoration: none; color: var(--color-primary); transition: opacity 0.2s; } .c-pagination__item a:hover { opacity: 0.8; } } @layer components{ .c-navigation-post { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; } @media screen and (max-width: 768px) { .c-navigation-post { padding: 0; } } .c-navigation-post__link { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #333; text-decoration: none; font-weight: 700; } .c-navigation-post__link--next { margin-left: auto; } .c-navigation-post__icon { flex-shrink: 0; transition: transform 0.3s; } .c-navigation-post__link--prev:hover .c-navigation-post__icon { transform: translateX(-4px); } .c-navigation-post__link--next:hover .c-navigation-post__icon { transform: translateX(4px); } } @layer components{ .c-logo-footer { border-radius: 50px; background-color: white; padding: 30px; display: grid; place-items: center; transition: opacity 0.2s; } .c-logo-footer:hover { opacity: 0.8; } @media screen and (max-width: 768px) { .c-logo-footer { padding: 16px; } } @media screen and (max-width: 1024px) { .c-logo-header__img { width: 205px; } } @media screen and (max-width: 768px) { .c-logo-footer__img { width: 221px; } } } @layer components{ .c-fukidashi-map { width: 280px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px; } .c-fukidashi-map__pic { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; } .c-fukidashi-map__pic img { width: 100%; height: 100%; object-fit: cover; } .c-fukidashi-map__title { margin-top: 12px; font-size: 20px; font-weight: 700; } .c-fukidashi-map__subtitle { font-weight: 700; margin-top: 4px; font-size: 14px; } .c-fukidashi-map__dl { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .c-fukidashi-map__dt { font-size: 12px; font-weight: 700; color: #666666; border-top: 1px solid #dadada; padding-top: 10px; } .c-fukidashi-map__dd { padding-top: 5px; font-size: 14px; font-weight: 700; padding-bottom: 5px; } } @layer site{ .s-header { background-color: #fff; height: calc(var(--height-header) * 1px); left: 0; position: fixed; top: 30px; border-radius: calc(var(--height-header) / 2 * 1px); width: calc(100% - 2 * var(--gutter)); z-index: var(--zIndex-header); left: var(--gutter); padding-left: 24px; padding-right: 24px; filter: drop-shadow(0 3px 6px color-mix(in srgb, #000000 16%, transparent)); } @media screen and (max-width: 768px) { .s-header { top: 20px; padding-left: 17px; left: calc(12 / 375 * 100%); width: calc(351 / 375 * 100%); padding-right: 17px; } } .s-header__inner { display: flex; height: 100%; justify-content: space-between; align-items: center; } .s-header__spmenu { height: 100vh; height: 100svh; left: 0; pointer-events: none; position: fixed; top: 0; transition: 0.3s; width: 100vw; z-index: var(--zIndex-spmenu); } @media screen and (max-width: 768px) { .s-header__nav { display: none; } } .s-header__toggle { display: none; position: relative; z-index: var(--zIndex-toggle); } @media screen and (max-width: 768px) { .s-header__toggle { display: block; } } .s-header__right { display: flex; column-gap: 15px; align-items: center; } @media screen and (max-width: 768px) { .s-header__button { display: none; } } } @layer site{ .s-header-nav__list { align-items: center; display: flex; height: 100%; justify-content: space-between; } .s-header-nav__list .menu-item { flex-grow: 1; position: relative; } .s-header-nav__list .menu-item > a { color: var(--color-primary); font-size: 19px; padding: 0.7em; display: block; font-weight: 700; transition: opacity 0.2s; } .s-header-nav__list .menu-item > a:hover { opacity: 0.8; } @media screen and (max-width: 1024px) { .s-header-nav__list .menu-item > a { font-size: 14px; } } } @layer site{ .s-spmenu { background-color: var(--color-secondary); height: 100dvh; opacity: 0; pointer-events: none; position: relative; transition: opacity 0.3s; width: 100%; display: flex; flex-direction: column; padding-top: 19lvh; } .s-spmenu:not([inert]) { opacity: 1; pointer-events: auto; } .s-spmenu-nav__list { display: flex; flex-direction: column; row-gap: 8lvh; align-items: center; } .s-spmenu-nav__link._button { margin-top: 4lvh; background-color: white; width: 246px; display: block; display: grid; place-items: center; min-height: 42px; border-radius: 21px; } .s-spmenu__bottom { margin-top: auto; position: relative; } .s-spmenu__copyright { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; } } @layer site{ .s-footer { background-color: #20ad4c; position: relative; padding-top: 13.8%; padding-left: var(--gutter); padding-right: var(--gutter); overflow-x: clip; } .s-footer__oval { pointer-events: none; } .s-footer:has(.s-footer__oval) { padding-top: 23%; } @media screen and (max-width: 768px) { .s-footer:has(.s-footer__oval) { padding-top: 34%; margin-top: 11%; } } .s-footer:has(.s-footer__oval) .s-footer__cloud { top: 20%; } @media screen and (max-width: 768px) { .s-footer:has(.s-footer__oval) .s-footer__cloud { top: 13%; } } @media screen and (max-width: 768px) { .s-footer { padding-top: 24.5%; } } .s-footer__oval { position: absolute; left: 0; top: 0; translate: 0 -50%; width: 100%; } .s-footer__oval .-img { width: 100%; } @media screen and (max-width: 768px) { .s-footer__bottom-bg { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } } .s-footer__inner { max-width: 679px; margin-left: auto; position: relative; z-index: 2; margin-right: auto; } .s-footer__cloud { position: absolute; width: calc(1283 / 1366 * 100%); left: 3%; top: 6%; pointer-events: none; } @media screen and (max-width: 768px) { .s-footer__cloud { left: 0; top: 7%; width: 100%; } } .s-footer__cloud .-img { width: 100%; height: auto; } .s-footer__list { margin-top: 105px; display: flex; justify-content: center; column-gap: 30px; } @media screen and (max-width: 768px) { .s-footer__list { flex-direction: column; row-gap: 20px; align-items: center; margin-top: 55px; } } .s-footer__button { background-color: white; display: block; display: grid; place-items: center; width: 262px; height: 73px; border-radius: 40px; filter: drop-shadow(10px 10px 0 #157a17); transition: filter 0.2s; } .s-footer__button:hover { filter: unset; } .s-footer__item { display: flex; flex-direction: column; align-items: center; } @media screen and (max-width: 768px) { .s-footer__button { width: 180px; height: 49px; filter: drop-shadow(5px 5px 0 #157a17); } .s-footer__button._sala .-img { width: 68px; } .s-footer__button._food .-img { width: 140px; } } .s-footer__caption { font-size: 14px; letter-spacing: -0.05em; line-height: calc(17 / 11); text-align: center; margin-top: 10px; color: white; } .s-footer__bottom { position: relative; margin-top: 30px; pointer-events: none; } .s-footer__bottom .-img { width: 100%; } .s-footer__copyright { position: absolute; bottom: 15px; left: 50%; translate: -50%; color: white; font-size: 10px; letter-spacing: 0.1em; font-weight: 700; text-align: center; } @media screen and (max-width: 768px) { .s-footer__copyright { bottom: 10px; } } .s-footer__nav { margin-top: 25px; } } @layer site{ .s-footer-nav__list { align-items: center; display: flex; flex-wrap: wrap; height: 100%; justify-content: center; } @media screen and (max-width: 768px) { .s-footer-nav__list { flex-direction: column; } } .s-footer-nav__list .menu-item { position: relative; } .s-footer-nav__list .menu-item + .menu-item::before { content: "/"; color: white; font-size: 14px; line-height: 1.5; margin-inline: 0.5em; } @media screen and (max-width: 768px) { .s-footer-nav__list .menu-item + .menu-item::before { display: none; } } .s-footer-nav__list .menu-item > a { color: white; font-size: 14px; line-height: 1.5; font-weight: 700; transition: opacity 0.2s; } .s-footer-nav__list .menu-item > a:hover { opacity: 0.8; } } @layer site{ .s-page-bg-top { /* position: fixed; */ left: 0; top: 0; width: 100%; height: calc(249 / 1366 * 100vw); translate: 0 -29%; margin-bottom: -4.5%; } @media screen and (max-width: 768px) { .s-page-bg-top { height: calc(98 / 375 * 100vw); translate: 0 0; margin-bottom: 0%; margin-bottom: 8%; } } .s-page-bg-top__bg { width: 100%; height: 100%; } .s-page-bg-top__bg .-img { width: 100%; object-fit: cover; object-position: bottom; } } @layer page{ .p-page404-body { padding-top: 6%; padding-bottom: 6%; padding-left: var(--gutter); padding-right: var(--gutter); } .p-page404-body__num { text-align: center; font-size: clamp(45px, calc(75 / 1366 * 100vw), 999px); letter-spacing: 0.1em; line-height: 1; } @media screen and (max-width: 768px) { .p-page404-body__num { font-size: 45px; } } .p-page404-body__heading { margin-top: 40px; font-size: 28px; text-align: center; } @media screen and (max-width: 768px) { .p-page404-body__heading { font-size: 24px; margin-top: 30px; } } .p-page404-body__heading .-ib { display: inline-block; } .p-page404-body__text { margin-top: 40px; text-align: center; } @media screen and (max-width: 768px) { .p-page404-body__text { font-size: 14px; margin-top: 20px; } } .p-page404-body__button { display: flex; justify-content: center; align-items: center; margin-top: 40px; } } @layer page{ .p-top-contact { background-color: #20ad4c; padding-top: 13.7%; padding-bottom: 2%; padding-left: var(--gutter); padding-right: var(--gutter); } @media screen and (max-width: 768px) { .p-top-contact { padding-top: 26%; } } .p-top-contact__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-top-contact__heading .-img { width: clamp(180px, calc(180 / 375 * 100vw), 285px); } } .p-top-contact__intro { font-size: 18px; line-height: calc(35 / 18); text-align: center; margin-top: 65px; color: white; } @media screen and (max-width: 768px) { .p-top-contact__intro { font-size: 14px; line-height: calc(26 / 14); margin-top: 30px; } } .p-top-contact__lead { text-align: center; color: white; margin-top: 40px; font-size: 32px; line-height: calc(40 / 32); font-weight: 700; letter-spacing: 0.05em; } @media screen and (max-width: 768px) { .p-top-contact__lead { font-size: 20px; line-height: calc(25 / 20); } } .p-top-contact__inner { max-width: 1200px; margin-left: auto; margin-right: auto; } .p-top-contact__tab { margin-top: 100px; } @media screen and (max-width: 768px) { .p-top-contact__tab { margin-top: 50px; } } } @layer page{ .p-contact-form { color: #666666; } .p-contact-form__inner { max-width: 772px; margin-left: auto; margin-right: auto; } .p-contact-form__heading { font-size: 40px; text-align: center; font-weight: 700; color: #20ad4c; } @media screen and (max-width: 768px) { .p-contact-form__heading { font-size: 25px; line-height: calc(30 / 25); } } .p-contact-form__required { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; line-height: calc(20 / 14); border-radius: 10px; background-color: #20ad4c; color: white; width: 42px; display: grid; place-items: center; flex-shrink: 0; align-self: flex-start; margin-top: 2px; } @media screen and (max-width: 768px) { .p-contact-form__required { line-height: calc(20 / 13); font-size: 13px; } } .p-contact-form__list { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; } @media screen and (max-width: 768px) { .p-contact-form__list { grid-template-columns: 1fr; margin-top: 25px; } } .p-contact-form__head { margin-top: 25px; font-size: 18px; line-height: calc(22 / 18); font-weight: 700; padding-top: 13px; display: flex; justify-content: space-between; column-gap: 10px; } @media screen and (max-width: 768px) { .p-contact-form__head { margin-top: 15px; justify-content: flex-start; column-gap: 10px; padding-top: unset; letter-spacing: 0.2em; font-size: 15px; align-items: center; } } .p-contact-form__body { margin-top: 25px; } @media screen and (max-width: 768px) { .p-contact-form__body { margin-top: 10px; } } .p-contact-form__note { font-size: 14px; margin-top: 5px; } .p-contact-form__privacy { padding-top: 45px; padding-bottom: 20px; max-width: 666px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 768px) { .p-contact-form__privacy { padding-top: 60px; padding-bottom: 25px; } } .p-contact-form__privacy-heading { font-size: 20px; font-weight: 500; line-height: calc(24 / 20); text-align: center; } @media screen and (max-width: 768px) { .p-contact-form__privacy-heading { font-size: 17px; line-height: calc(22 / 17); letter-spacing: -0.02em; } } .p-contact-form__privacy-text { font-size: 15px; line-height: calc(22 / 15); margin-top: 20px; font-weight: 500; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 768px) { .p-contact-form__privacy-text { font-size: 14px; line-height: calc(22 / 14); margin-top: 35px; letter-spacing: 0; } } .p-contact-form__privacy-text [href] { text-decoration: underline; color: #ad5a5a; transition: opacity 0.2s; } .p-contact-form__privacy-text [href]:hover { opacity: 0.8; } .p-contact-form__acceptance { color: #666666; display: grid; font-size: 20px; place-items: center; } @media screen and (max-width: 768px) { .p-contact-form__acceptance { font-size: 15px; } } .p-contact-form__submit { margin-top: 50px; } @media screen and (max-width: 768px) { .p-contact-form__submit { margin-top: 65px; } } .p-contact-form__submit input { background-color: var(--color-primary); font-size: 25px; color: white; min-height: 60px; display: grid; place-items: center; width: min(100%, 307px); margin-left: auto; margin-right: auto; text-align: center; border-radius: 30px; transition: opacity 0.2s; } @media screen and (max-width: 768px) { .p-contact-form__submit input { min-height: 50px; width: min(100%, 255px); font-size: 21px; } } .p-contact-form__submit input:hover { opacity: 0.8; } .p-contact-form__submit input:disabled { background-color: #666666; pointer-events: none; } .p-contact-form__body .wpcf7-checkbox { display: flex; column-gap: 15px; row-gap: 10px; flex-wrap: wrap; padding-top: 13px; } @media screen and (max-width: 768px) { .p-contact-form__body .wpcf7-checkbox { padding-top: 5px; } } .p-contact-form__body .wpcf7-list-item { margin-left: unset !important; } .p-contact-form__submit { position: relative; } .p-contact-form__submit .wpcf7-spinner { position: absolute !important; top: 0%; left: 50%; translate: -50% -125%; margin: 0 !important; } .wpcf7 form .wpcf7-response-output { font-size: 18px; max-width: 772px; margin-left: auto !important; margin-right: auto !important; margin-top: 40px !important; padding: 0.5em 1em !important; border-radius: 10px; } @media screen and (max-width: 768px) { .wpcf7 form .wpcf7-response-output { font-size: 16px; margin-top: 30px !important; } } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #f2ad00 !important; } .wpcf7 form.sent .wpcf7-response-output { border-color: #20ad4c !important; } } @layer page{ .p-archive-head { padding-top: 4%; padding-bottom: 4%; padding-left: var(--gutter); padding-right: var(--gutter); } @media screen and (max-width: 768px) { .p-archive-head { margin-bottom: 12%; } } .p-archive-head__inner { max-width: calc(var(--width-inner) * 1px); margin-left: auto; margin-right: auto; } .p-archive-head__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-archive-head__heading .-img { width: 160px; } } .p-archive-head__subheading { font-size: 28px; margin-top: 20px; font-weight: 700; text-align: center; line-height: 1; letter-spacing: 0.1em; color: #20ad4c; } } @layer page{ .p-archive-body { padding-bottom: 2.2%; padding-left: var(--gutter); padding-right: var(--gutter); } @media screen and (max-width: 768px) { .p-archive-body { padding-bottom: 9%; } } .p-archive-body__inner { max-width: 750px; margin-left: auto; margin-right: auto; } .p-archive-body__list { display: flex; flex-direction: column; row-gap: 15px; } @media screen and (max-width: 768px) { .p-archive-body__list { row-gap: 25px; } } } @layer page{ .p-archive-pagination { padding-left: var(--gutter); padding-right: var(--gutter); } .p-archive-pagination__inner { max-width: 750px; margin-left: auto; margin-right: auto; display: flex; justify-content: flex-end; } } @layer page{ .p-single-body { padding-top: 3.5%; padding-left: var(--gutter); padding-right: var(--gutter); } @media screen and (max-width: 768px) { .p-single-body { padding-top: unset; } } .p-single-body__inner { max-width: 700px; margin-left: auto; margin-right: auto; } .p-single-post__body { padding-bottom: 9%; padding-top: 6%; } @media screen and (max-width: 768px) { .p-single-post__body { padding-top: 12%; padding-bottom: 10%; } } } @layer page{ .p-single-post__category-list { display: flex; flex-wrap: wrap; row-gap: 8px; column-gap: 8px; } .p-single-post__category-link { display: inline-block; color: white; font-weight: 700; font-size: 15px; border-radius: 14px; line-height: calc(27 / 15); padding-left: 1em; padding-right: 1em; background-color: #20ad4c; text-align: center; transition: opacity 0.2s; } .p-single-post__category-link:hover { opacity: 0.8; } .p-single-post__heading { font-size: 25px; line-height: calc(48 / 25); color: #20ad4c; font-weight: 700; margin-top: 10px; } @media screen and (max-width: 768px) { .p-single-post__heading { margin-top: 5px; } } .p-single-post__date { color: #20ad4c; font-size: 14px; line-height: 1; font-weight: 700; margin-top: 10px; } @media screen and (max-width: 768px) { .p-single-post__date { margin-top: 5px; } } .p-single-post__thumbnail { margin-top: 20px; display: grid; place-items: center; } .p-single-post__thumbnail img { width: 100%; object-fit: cover; max-height: 480px; } } @layer page{ .p-top-mv { overflow: clip; } .p-top-mv__layout { display: grid; position: relative; overflow: hidden; } .p-top-mv__pic { grid-area: 1/-1; } .p-top-mv__pic .-img { width: 100%; height: auto; object-position: bottom; display: block; } .p-top-mv__clip { grid-area: 1/-1; overflow: hidden; position: relative; z-index: 2; } .p-top-mv__clip .-img { display: block; width: 100%; height: auto; object-position: bottom; } .p-top-mv__catch { grid-area: 1/-1; z-index: 1; display: flex; align-items: center; justify-content: center; padding-top: 5%; } .p-top-mv__catch .-img { width: calc(728 / 1366 * 100vw); } @media screen and (max-width: 768px) { .p-top-mv__catch { padding-top: 12%; } .p-top-mv__catch .-img { width: calc(295 / 375 * 100vw); } } } @layer page{ .p-top-news { padding-top: 13.7%; padding-left: var(--gutter); padding-right: var(--gutter); background-color: #20ad4c; margin-top: -1px; position: relative; z-index: 3; } @media screen and (max-width: 768px) { .p-top-news { padding-top: 26%; padding-bottom: 8%; } } .p-top-news__inner { max-width: 750px; margin-left: auto; margin-right: auto; } .p-top-news__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-top-news__heading .-img { width: clamp(103px, calc(103 / 375 * 100vw), 185px); } } .p-top-news__body { margin-top: 55px; } @media screen and (max-width: 768px) { .p-top-news__body { margin-top: 50px; } } .p-top-news__list { display: flex; flex-direction: column; row-gap: 35px; } @media screen and (max-width: 768px) { .p-top-news__list { row-gap: 25px; } } .p-top-news::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; transform: translateY(100%); aspect-ratio: 1365.718 / 148.903; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1365.718 148.903'%3E%3Cpath d='M1365.722.004c0 75.057-305.726 135.9-682.859 135.9S.004 75.061.004.004' fill='%2320ad4c'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .p-top-news__more { margin-top: 30px; font-size: 16px; color: white; transition: opacity 0.2s; display: block; width: fit-content; margin-left: auto; } @media screen and (max-width: 768px) { .p-top-news__more { font-size: 14px; margin-top: 20px; margin-right: 5px; } } .p-top-news__more:hover { opacity: 0.8; } } @layer page{ .p-top-message { padding-top: 13.7%; padding-bottom: 7.5%; color: white; position: relative; z-index: 2; } @media screen and (max-width: 768px) { .p-top-message { padding-top: 26%; } } .p-top-message__bg { position: absolute; inset: 0; width: 100%; height: 100%; } .p-top-message__bg .-img { width: 100%; height: 100%; } .p-top-message__contents { padding-left: var(--gutter); padding-right: var(--gutter); position: relative; z-index: 2; } @media screen and (max-width: 768px) { .p-top-message__contents { padding-bottom: 30%; } } .p-top-message__inner { max-width: 928px; margin-left: auto; margin-right: auto; } .p-top-message__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-top-message__heading .-img { width: clamp(173px, calc(173 / 375 * 100vw), 311px); } } .p-top-message__text { margin-top: 35px; font-size: 16px; line-height: calc(34 / 16); } @media screen and (max-width: 768px) { .p-top-message__text { font-size: 14px; line-height: calc(27 / 14); letter-spacing: 0.04em; } } .p-top-message__note { font-size: 12px; margin-top: 30px; line-height: calc(21 / 12); } @media screen and (max-width: 768px) { .p-top-message__note { line-height: calc(15 / 12); margin-top: 60px; } } .p-top-message__name { margin-top: 20px; font-size: 16px; display: flex; align-items: flex-end; column-gap: 20px; justify-content: flex-end; padding-right: 10px; } @media screen and (max-width: 768px) { .p-top-message__name { margin-top: 40px; padding-right: 0; } } } @layer page{ .p-top-philosophy { padding-top: 14%; margin-top: -9%; position: relative; background-color: #f4ece4; padding-left: var(--gutter); padding-right: var(--gutter); } @media screen and (max-width: 768px) { .p-top-philosophy { padding-top: 28%; } } .p-top-philosophy__inner { max-width: 928px; margin-left: auto; margin-right: auto; } .p-top-philosophy__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-top-philosophy__heading .-img { width: clamp(106px, calc(106 / 375 * 100vw), 192px); } } .p-top-philosophy__text { margin-top: 50px; font-size: 23px; line-height: calc(48 / 23); color: #26af50; text-align: center; } @media screen and (max-width: 768px) { .p-top-philosophy__text { font-size: 15px; margin-top: 35px; line-height: calc(34 / 15); } } } @layer page{ .p-top-plan { padding-top: 8%; position: relative; background-color: #f4ece4; padding-left: var(--gutter); padding-right: var(--gutter); } @media screen and (max-width: 768px) { .p-top-plan { padding-top: 14%; } } .p-top-plan__inner { max-width: 900px; margin-left: auto; margin-right: auto; } .p-top-plan__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-top-plan__heading .-img { width: clamp(106px, calc(106 / 375 * 100vw), 191px); } } .p-top-plan__list { display: flex; flex-direction: column; row-gap: 13px; margin-top: 55px; } @media screen and (max-width: 768px) { .p-top-plan__list { margin-top: 40px; row-gap: 10px; } } .p-top-plan__item { border-radius: 25px; background-color: white; font-size: 23px; line-height: calc(36 / 23); color: #666666; display: grid; place-items: center; padding: 15px; min-height: 106px; letter-spacing: 0.072em; } @media screen and (max-width: 768px) { .p-top-plan__item { min-height: 118px; font-size: 16px; line-height: calc(27 / 16); letter-spacing: 0.06em; text-align: center; padding: 20px 10px; } } .p-top-plan__subheading { font-size: 25px; line-height: calc(30 / 25); color: #666666; text-align: center; margin-top: 50px; } @media screen and (max-width: 768px) { .p-top-plan__subheading { font-size: 18px; line-height: calc(30 / 18); margin-top: 25px; } } .p-top-plan__text { margin-top: 20px; color: #666666; font-size: 16px; line-height: calc(30 / 16); letter-spacing: 0.06em; padding-left: 5%; padding-right: 5%; } @media screen and (max-width: 768px) { .p-top-plan__text { font-size: 14px; line-height: calc(27 / 14); margin-top: 10px; } } .p-top-plan__button { display: flex; justify-content: flex-end; margin-top: 20px; padding-left: 5%; padding-right: 5%; } @media screen and (max-width: 768px) { .p-top-plan__button { justify-content: center; margin-top: 30px; padding-left: unset; padding-right: unset; display: grid; place-items: center; } } } @layer page{ .p-top-optimize { position: relative; background-color: #f4ece4; z-index: 2; padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 12%; padding-bottom: 3%; } @media screen and (max-width: 768px) { .p-top-optimize { padding-top: 19%; padding-bottom: 15%; } } .p-top-optimize__inner { max-width: 1200px; margin-left: auto; margin-right: auto; } .p-top-optimize__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-top-optimize__heading .-img { width: clamp(270px, calc(270 / 375 * 100vw), 848px); } } .p-top-optimize::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 1px; width: 100%; transform: translateY(50%); aspect-ratio: 1365.719 / 262.153; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1365.719 262.153'%3E%3Cpath d='M1365.719 131.076c0 72.392-305.728 131.077-682.86 131.077S0 203.468 0 131.076s305.727-131.077 682.859-131.077 682.86 58.685 682.86 131.077' fill='%23f4ece4'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .p-top-optimize__radius { margin-top: 4.5%; background-color: white; border-radius: 20px; padding-top: 5.9%; padding-bottom: 7.5%; padding-left: 9%; padding-right: 9%; } @media screen and (max-width: 768px) { .p-top-optimize__radius { margin-top: 9.5%; padding-top: 11.9%; padding-bottom: 7.5%; padding-left: 2%; padding-right: 2%; } } .p-top-optimize__text { font-size: 16px; line-height: calc(36 / 16); letter-spacing: 0.06em; margin-top: 45px; color: #666666; } @media screen and (max-width: 768px) { .p-top-optimize__text { font-size: 13px; line-height: calc(21 / 13); letter-spacing: 0.072em; padding-left: 2%; padding-right: 2%; margin-top: 25px; } } } @layer page{ .p-top-service { position: relative; z-index: 3; padding-top: 13.7%; padding-bottom: 3.5%; padding-left: var(--gutter); padding-right: var(--gutter); overflow-x: clip; } @media screen and (max-width: 768px) { .p-top-service { padding-top: 26%; padding-bottom: 17%; } } .p-top-service__inner { max-width: 1200px; margin-left: auto; margin-right: auto; } .p-top-service__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-top-service__heading .-img { width: clamp(148px, calc(148 / 375 * 100vw), 289px); } } .p-top-service::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; transform: translateY(50%); aspect-ratio: 1365.719 / 262.153; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1365.719 262.153'%3E%3Cpath d='M1365.719 131.076c0 72.392-305.728 131.077-682.86 131.077S0 203.468 0 131.076s305.727-131.077 682.859-131.077 682.86 58.685 682.86 131.077' fill='white'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .p-top-service__row { margin-top: 13%; border: 5px solid #f2ad00; border-radius: clamp(30px, calc(90 / 1280 * 100vw), 90px); padding-top: 8%; padding-bottom: 60px; padding-left: 40px; padding-right: 40px; position: relative; z-index: 3; } @media screen and (max-width: 768px) { .p-top-service__row { margin-top: 22%; border: 3px solid #f2ad00; padding-top: 18%; padding-bottom: 4%; padding-left: 15px; padding-right: 15px; } } .p-top-service__row:first-of-type { margin-top: 16.5%; } @media screen and (max-width: 768px) { .p-top-service__row:first-of-type { margin-top: 29.5%; } } .p-top-service__num { position: absolute; translate: 0 -50%; left: 6%; top: 0; } .p-top-service__num._01 .-img { width: clamp(30px, calc(67 / 1200 * 100vw), 67px); } .p-top-service__num._02 .-img { width: clamp(80px, calc(169 / 1200 * 100vw), 169px); } @media screen and (max-width: 768px) { .p-top-service__num._01 { translate: 0 -50%; left: 1%; } .p-top-service__num._02 { translate: 0 -50%; left: 1%; } .p-top-service__num._01 .-img { width: clamp(90px, calc(90 / 375 * 100vw), 135px); } .p-top-service__num._02 .-img { width: clamp(90px, calc(90 / 375 * 100vw), 135px); } } .p-top-service__subheading { position: absolute; top: 0; left: 50%; translate: -50% -50%; background-color: white; padding-left: 20px; padding-right: 20px; } @media screen and (max-width: 768px) { .p-top-service__subheading._01 { translate: -25% -50%; } .p-top-service__subheading._01 .-img { width: clamp(154px, calc(154 / 375 * 100vw), 154px); } .p-top-service__subheading._02 { translate: -20% -30%; padding-left: unset; padding-right: unset; } .p-top-service__subheading._02 .-img { width: clamp(158px, calc(158 / 375 * 100vw), 158px); } } .p-top-service__text { font-size: 18px; line-height: calc(35 / 18); text-align: center; color: #4d4d4d; max-width: 94%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 768px) { .p-top-service__text { font-size: 15px; line-height: calc(24 / 15); letter-spacing: 0.02em; text-align: left; max-width: unset; } } .p-top-service__text [href] { color: #f2ad00; text-decoration: underline; transition: opacity 0.2s; } .p-top-service__text [href]:hover { opacity: 0.8; } .p-top-service__figure { display: grid; place-items: center; margin-top: 30px; } @media screen and (max-width: 768px) { .p-top-service__figure { margin-top: 20px; } } .p-top-service__contents { max-width: 892px; margin-left: auto; margin-right: auto; } .p-top-service__map { margin-top: 40px; height: 500px; border-radius: 12px; overflow: hidden; } @media screen and (max-width: 768px) { .p-top-service__map { margin-top: 10px; height: 306px; } } } @layer page{ .p-top-company { position: relative; background-color: #f4ece4; z-index: 2; padding-top: 13.7%; padding-bottom: 2%; padding-left: var(--gutter); padding-right: var(--gutter); } @media screen and (max-width: 768px) { .p-top-company { padding-top: 26%; padding-bottom: 14%; } } .p-top-company__inner { max-width: 750px; margin-left: auto; margin-right: auto; } .p-top-company__heading { display: grid; place-items: center; } @media screen and (max-width: 768px) { .p-top-company__heading .-img { width: clamp(106px, calc(106 / 375 * 100vw), 191px); } } .p-top-company__list { margin-top: 60px; display: flex; flex-direction: column; row-gap: 15px; color: #666666; } @media screen and (max-width: 768px) { .p-top-company__list { margin-top: 30px; row-gap: 12px; } } .p-top-company__row { padding-top: 6px; padding-bottom: 6px; display: grid; grid-template-columns: 80px 1fr; column-gap: 50px; padding-left: 10%; padding-right: 10%; border-radius: 20px; background-color: white; align-items: center; } @media screen and (max-width: 768px) { .p-top-company__row { border-radius: 10px; padding-left: 6%; padding-right: 6%; } } .p-top-company__row._lg { border-radius: 40px; align-items: flex-start; } @media screen and (max-width: 768px) { .p-top-company__row._lg { border-radius: 10px; } } .p-top-company__row._lg .p-top-company__head { padding-top: 8px; } @media screen and (max-width: 768px) { .p-top-company__row._sp-col { grid-template-columns: 1fr; row-gap: 0; } } .p-top-company__head { text-align: justify; font-size: 16px; line-height: calc(19 / 16); text-align-last: justify; } @media screen and (max-width: 768px) { .p-top-company__head { text-align: unset; text-align-last: unset; letter-spacing: 0.05em; line-height: calc(27 / 14); font-size: 14px; width: 70px; text-align-last: justify; } } .p-top-company__body { font-size: 16px; line-height: 1.75; } @media screen and (max-width: 768px) { .p-top-company__body { line-height: calc(27 / 14); font-size: 14px; } } .p-top-company::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; transform: translateY(50%); aspect-ratio: 1365.719 / 262.153; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1365.719 262.153'%3E%3Cpath d='M1365.719 131.076c0 72.392-305.728 131.077-682.86 131.077S0 203.468 0 131.076s305.727-131.077 682.859-131.077 682.86 58.685 682.86 131.077' fill='%23f4ece4'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; z-index: -1; } } @layer page{ .p-page-body { padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 4%; padding-bottom: 6%; } } @layer page{ .p-legal-body { padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 4%; padding-bottom: 6%; line-height: calc(30 / 16); } .p-legal-body__inner { max-width: 800px; margin-left: auto; margin-right: auto; } .p-legal-body__heading { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 60px; } @media screen and (max-width: 768px) { .p-legal-body__heading { font-size: 22px; margin-bottom: 32px; } } .p-legal-body__body { font-size: 14px; line-height: 1.8; color: #333; } .p-legal-body__body > *:first-child { margin-top: 0; } .p-legal-body__body h2 { font-size: 18px; font-weight: 700; margin-top: 40px; margin-bottom: 16px; padding-bottom: 4px; position: relative; } .p-legal-body__body h2::before { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background-color: var(--color-primary); } .p-legal-body__body h3 { font-size: 16px; font-weight: 700; margin-top: 24px; margin-bottom: 4px; } .p-legal-body__body p { margin-top: 0; } .p-legal-body__body ul { margin-top: 0; margin-bottom: 12px; padding-left: 0; } .p-legal-body__body ul > li { padding-left: 1em; text-indent: -1em; } .p-legal-body__body ul > li > p { display: inline; } .p-legal-body__body ul > li > p + p { display: block; text-indent: 0; } .p-legal-body__body .p-legal-body__date { text-align: right; margin-top: 15px; } .p-legal-body__body a[href] { color: var(--color-primary); transition: opacity 0.2s; } .p-legal-body__body a[href]:hover { opacity: 0.7; } @media screen and (max-width: 768px) { .p-legal-body__body { font-size: 13px; } .p-legal-body__body h2 { font-size: 16px; margin-top: 32px; margin-bottom: 12px; } .p-legal-body__body h3 { font-size: 15px; margin-top: 20px; margin-bottom: 10px; } } } @layer javascript{ /* JavaScript アニメーション用スタイル */ } @layer utility{ .u-visually-hidden { border: 0 !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .u-hidden { display: none !important; } .u-overflow-hidden { overflow: hidden; } .u-clamp-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp); overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 768px) { .u-md-hidden { display: none; } } .u-md-visible { display: none; } @media screen and (max-width: 768px) { .u-md-visible { display: revert; } } @media screen and (max-width: 1024px) { .u-lg-hidden { display: none; } } .u-lg-visible { display: none; } @media screen and (max-width: 1024px) { .u-lg-visible { display: revert; } } @media screen and (max-width: 1280px) { .u-xl-hidden { display: none; } } .u-xl-visible { display: none; } @media screen and (max-width: 1280px) { .u-xl-visible { display: revert; } } }