@layer global, reset, wordpress, base, layout, vendor, components, site, page, javascript, utility; @layer global{ :root { --color-back: #fff; --color-text: #000; --color-primary: #220a88; --color-secondary: #539a16; --color-error: #8b055b; --color-form: var(--color-primary); --fontFamily-default: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; --fontFamily-noto: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; --height-header: 70; --line-clamp: 2; --width-inner-lg: 1200; --width-inner: 1000; --width-inner-sm: 800; --zIndex-header: 40; --zIndex-spmenu: 41; --zIndex-toggle: 42; --zIndex-splash: 50; --leading-trim: calc((1em - 1lh) / 2); --size-check: 1.25em; --gutter: max(20px, 4%); --gutter-inner: max(20px, 4%); --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); } /* @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; } /* セマンティック要素の復元 (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 #ccc; border-radius: 4px; background-color: #fff; font-size: 1rem; min-width: 0; padding: 0.5em 0.75em; width: 100%; accent-color: var(--color-form); } /* フォーカス */ 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 { 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.75em); 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: 2px solid var(--color-primary); 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: 2px solid var(--color-primary); 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); */ } .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: 1rem; } #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 { max-width: 100%; } #wp-postbody figure.wp-block-table { overflow: visible; } #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; } #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: var(--color-primary); border: 2px solid var(--color-primary); display: inline-block; max-width: 100%; padding: 1em; text-align: center; } .c-button-simple__text { color: white; } } @layer components{ .c-hamburger { --width: 24px; --height: 24px; --line-weight: 2px; --color: var(--color-primary); --active-color: #fff; 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 site{ .s-header { background-color: #fff; padding-left: var(--gutter); padding-right: var(--gutter); height: calc(var(--height-header) * 1px); } .s-header._fixed { left: 0; position: fixed; top: 0; width: 100%; z-index: var(--zIndex-header); } .s-header__inner { align-items: center; display: flex; height: 100%; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: calc(var(--width-inner) * 1px); } .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); } .s-header__toggle { display: none; position: relative; z-index: var(--zIndex-toggle); } @media screen and (max-width: 768px) { .s-header__toggle { display: block; } } } @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); } .s-header-nav__list .menu-item > a[aria-current="page"] { font-weight: 700; } } @layer site{ .s-spmenu { background-color: var(--color-secondary); height: 100lvh; opacity: 0; pointer-events: none; position: relative; transition: opacity 0.3s; width: 100%; } .s-spmenu:not([inert]) { opacity: 1; pointer-events: auto; } .s-spmenu__inner .s-header-nav { display: block; } .s-spmenu__inner .s-header-nav__list { align-items: center; display: flex; flex-direction: column; gap: 5lvh; } .s-spmenu__inner .s-header-nav__list > .menu-item { font-weight: 700; width: 100%; } .s-spmenu__inner .s-header-nav__list > .menu-item > a { color: white; transition: opacity 0.3s; } .s-spmenu__inner .s-header-nav__list > .menu-item > a:hover { opacity: 0.7; } } @layer site{ /* フッタースタイル */ } @layer site{ .s-footer-nav__list { align-items: center; display: flex; gap: 10px; height: 100%; justify-content: space-between; } .s-footer-nav__list .menu-item { color: var(--color-primary); flex-grow: 1; position: relative; text-align: center; } .s-footer-nav__list .menu-item > a { color: var(--color-primary); } .s-footer-nav__list .menu-item > a[aria-current="page"] { font-weight: 700; } } @layer page{ .p-page404-body { padding-top: 120px; padding-bottom: 120px; padding-left: var(--gutter); padding-right: var(--gutter); } .p-page404-body__heading { font-size: 28px; text-align: center; } .p-page404-body__heading .-ib { display: inline-block; } .p-page404-body__text { margin-top: 60px; text-align: center; } .p-page404-body__button { display: flex; justify-content: center; align-items: center; margin-top: 60px; } } @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; } } } @layer sample{ .c-tablist { margin-left: calc(10px * -1); margin-top: calc(10px * -1); } .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; } .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: var(--gutter); cursor: pointer; font-size: 20px; font-weight: 700; transition: opacity 0.3s; background-color: #808080; color: #fff; } .c-tabmenu__tab[aria-selected="true"] { top: -6px; margin-bottom: -6px; z-index: 2; } .c-tabmenu__tab:nth-of-type(1) { background-color: var(--color-primary); } .c-tabmenu__tab:nth-of-type(1)[aria-selected="true"] { filter: drop-shadow(15px 6px 6px rgba(0, 0, 0, 1)); } .c-tabmenu__tab:nth-of-type(2) { background-color: var(--color-secondary); } .c-tabmenu__tab:nth-of-type(2)[aria-selected="true"] { filter: drop-shadow(-15px 9px 6px rgba(0, 0, 0, 1)); } .c-tabmenu__tab:nth-of-type(3) { background-color: var(--color-primary); } .c-tabmenu__tabpanel { position: relative; z-index: 2; padding: 32px; color: #fff; } .c-tabmenu__tabpanel > *:not(:first-child) { margin-top: var(--gutter); } .c-tabmenu__tabpanel:nth-of-type(1) { background-color: var(--color-primary); } .c-tabmenu__tabpanel:nth-of-type(2) { background-color: var(--color-secondary); } .c-tabmenu__tabpanel:nth-of-type(3) { background-color: var(--color-primary); } /* ---------------------------------------- * Accordion * ---------------------------------------- */ .c-accordion__head { align-items: center; cursor: pointer; display: flex; gap: 1em; justify-content: space-between; padding: 1em; } .c-accordion__plus { flex-shrink: 0; height: 20px; position: relative; width: 20px; } .c-accordion__plus::before, .c-accordion__plus::after { background-color: currentColor; content: ""; inset: 0; margin: auto; position: absolute; transition: transform 700ms ease; } .c-accordion__plus::before { height: 2px; width: 100%; } .c-accordion__plus::after { height: 100%; width: 2px; } summary[aria-expanded="true"] .c-accordion__plus::after { transform: rotate(90deg); } .c-accordion__body { padding: 0 1em 1em; } }