/***
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):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;
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;
}
/*
* Base
*/
:root {
--base-color: #000;
--primary-color: #005EAE;
--secondary-color: #005298;
--link-color: #0066BE;
--bg-color: #EFF6FD;
--accent-color: #FDDA65;
--font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans","BIZ UDPGothic", Meiryo, sans-serif;
}
.layout_main {
font-family: var(--font-base);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
text-size-adjust: 100%;
color: var(--base-color);
}
.layout_main * {
box-sizing: border-box;
}
.layout_main picture {
display: block;
line-height: 0;
text-align: center;
}
.inner {
max-width: 960px;
margin: 0 auto;
}
[aria-hidden="true"] {
display: none;
}
/* Layout */
.layout_section {
padding: 6.5rem min(3.125%, 2rem);
}
.layout_column {
display: flex;
flex-direction: column;
gap: 60px;
}
@media screen and (max-width: 960px) {
.for-tb {
display: none;
}
}
@media only screen and (min-width: 768px) {
.for-sp {
display: none;
}
}
@media only screen and (max-width: 767px) {
.for-pc {
display: none;
}
.inner {
margin: 0 1rem;
}
.layout_section {
padding: 4rem 0;
}
.layout_column {
gap: 50px;
}
}
/*
* Contents
*/
/* headline */
.headline {
font-size: 2.25rem;
font-weight: 600;
letter-spacing: 0.09rem;
line-height: 1.4;
text-align: center;
margin: 0 0 4rem;
}
.section-head {
line-height: 1.9;
text-align: center;
margin: 0 0 4rem;
& .headline {
margin: 0 0 2rem;
}
}
/* ボタン */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
line-height: 1.6;
&.-primary {
background: var(--accent-color);
}
&.-secondary {
border: solid 1px var(--primary-color);
background: var(--primary-color);
color: #fff;
}
&.-arrow {
background: #fff;
position: relative;
&::after {
content: "";
display: block;
width: .5625rem;
height: .9375rem;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
background-size: 100% 100%;
position: absolute;
top: 0;
bottom: 0;
right: 1.95rem;
margin: auto;
}
}
@media only screen and (min-width: 768px) {
transition: 0.3s;
&.-primary {
&:hover {
background: #DAAE1A;
}
}
&.-secondary {
&:hover {
background: #005EAEB2;
}
}
&.-arrow {
&:hover {
opacity: .7;
}
}
}
}
/* リンク */
.link {
color: var(--link-color);
border-bottom: solid 1px;
@media only screen and (min-width: 768px) {
transition: opacity .3s;
&:hover {
opacity: .7;
}
}
}
/* 注釈 */
.note-list {
& li {
font-size: 0.875rem;
line-height: 1.9;
&::before {
content: "※";
}
}
}
/* ナビゲーション */
.nav {
padding: .62rem min(3.125%, 2rem);
font-family: var(--font-base);
text-size-adjust: 100%;
@media only screen and (max-width: 767px) {
background: var(--primary-color);
padding: .9375rem 0;
}
& .row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
@media only screen and (max-width: 767px) {
margin: 0 .5rem 0 1rem;
gap: 0;
}
}
& .logo {
color: #1F1F1F;
font-weight: 500;
@media only screen and (max-width: 767px) {
font-size: 1.125rem;
color: #fff;
}
}
& * {
box-sizing: border-box;
}
}
.nav-list {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 1.6875rem;
& li {
& a {
font-size: 0.8125rem;
@media only screen and (max-width: 767px) {
font-size: 0.875rem;
}
}
& a:not(.button) {
display: flex;
align-items: center;
gap: .44rem;
color: var(--primary-color);
&::before {
content: "";
display: block;
width: 0.4375rem;
height: 0.625rem;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
background-size: 100% 100%;
}
@media only screen and (min-width: 768px) {
&:hover {
opacity: .7;
}
}
@media only screen and (max-width: 767px) {
color: #fff;
&::before {
background-image: url('data:image/svg+xml;charset=utf-8,');
}
}
}
&.buttons {
@media only screen and (max-width: 767px) {
display: none;
}
}
}
}
.buttons-list {
display: flex;
align-items: center;
gap: 0.625rem;
& li {
& .button {
border-radius: 0.1875rem;
height: 35px;
padding: 0.125rem 0.875rem 0;
}
& .cta-button {
border-radius: 1.0625rem;
padding: 0.25rem 1.25rem 0;
}
}
}
/*
* Page
*/
/* hero */
.hero {
padding: 5.5rem min(3.125%, 2rem) 0;
background: url(../images/bg-hero.png) no-repeat center center;
background-size: cover;
position: relative;
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #1F5DAE;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: multiply;
opacity: .53;
}
@media only screen and (max-width: 767px) {
padding: 50px 0 0;
}
}
.hero-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7.08333333%;
position: relative;
z-index: 1;
@media only screen and (max-width: 767px) {
flex-direction: column;
align-items: flex-start;
gap: 25px;
margin: 0 1.5rem;
}
}
.hero-headline {
position: relative;
&::before {
content: "新登場";
display: flex;
align-items: center;
justify-content: center;
width: 8.125rem;
height: 8.125rem;
font-size: 1.4375rem;
font-weight: 700;
color: #fff;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
background-size: 100% 100%;
position: absolute;
top: -5.5rem;
left: -5.69rem;
}
@media only screen and (max-width: 767px) {
&::before {
display: block;
width: auto;
height: auto;
font-size: 1.25rem;
line-height: 1.45;
background: none;
position: static;
margin: 0 0 14px;
}
}
}
.hero-cta {
flex-shrink: 0;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 1.3125rem;
box-shadow: 0px 1px 25px 0px rgba(19, 71, 137, 0.20);
padding: 2.75rem 2.38rem 3rem;
margin: 0 0 -1.94rem;
& .copy {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem;
font-size: 1.0625rem;
font-weight: 600;
margin: 0 0 1rem;
&::before,
&::after {
content: '';
display: block;
width: 0.5625rem;
height: 1.125rem;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
background-size: 100% 100%;
}
&::after {
transform: scale(-1,1);
}
}
& .price-text {
display: flex;
align-items: flex-end;
justify-content: center;
font-size: 1.71169rem;
font-weight: 600;
line-height: 1;
color: var(--primary-color);
margin: 0 0 .74rem;
& img {
margin: 0 .32rem 0 .75rem;
}
& span {
writing-mode: vertical-lr;
font-size: 1.21244rem;
letter-spacing: .1175em;
}
}
& .sub-text {
color: var(--primary-color);
font-size: 1.00925rem;
margin: 0 0 1.07rem;
}
& .cta-button {
font-size: 1.1875rem;
padding: 0.9375rem 2.8125rem;
border-radius: 1.875rem;
}
@media only screen and (max-width: 767px) {
width: 100%;
align-items: center;
margin: 0 0 -5.81rem;
}
}
.about {
padding: 5.25rem min(3.125%, 2rem) 4.75rem;
background: var(--primary-color);
color: #fff;
letter-spacing: 0.04rem;
line-height: 2;
& .row {
display: flex;
align-items: center;
gap: 4rem;
}
@media only screen and (max-width: 767px) {
padding: 8.28rem 0 4.75rem;
& .row {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin: 0 1.5rem;
}
}
}
.about-headline {
flex-shrink: 0;
font-size: 1.3125rem;
font-weight: 600;
letter-spacing: 0.14438rem;
line-height: 2.47;
}
.feature {
& .row {
display: flex;
justify-content: center;
gap: 6.5rem;
}
@media only screen and (max-width: 767px) {
& .row {
flex-direction: column;
}
}
}
.feature-item {
display: flex;
flex-direction: column;
gap: 1.94rem;
width: 25.875rem;
& figure {
text-align: center;
line-height: 0;
height: 10.625rem;
}
& .text {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.9;
}
& .title {
font-size: 1.75rem;
font-weight: 600;
font-feature-settings: 'pwid' on;
line-height: 1.5;
text-align: center;
margin: 0 0 1rem;
}
& .button {
border-radius: 0.3125rem;
padding: 0.75rem 3.25rem;
margin: 2rem 0 0;
}
@media only screen and (max-width: 767px) {
width: 100%;
& .button {
width: 100%;
}
}
}
.case {
background: var(--bg-color);
overflow: hidden;
@media only screen and (max-width: 767px) {
& .section-head {
margin: 0 1rem 1.94rem;
}
}
}
.case-wrap {
margin: 0 0 4rem;
& .note {
font-feature-settings: 'pwid' on;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.035rem;
line-height: 1.7;
text-align: center;
color: #484848;
}
@media only screen and (max-width: 767px) {
margin: 0 0 5.19rem;
& .note {
margin: 0 1rem;
}
}
}
.case-slider {
margin: 0 min(-2.77777777%, -40px) 2.5rem;
& .swiper-wrapper {
transition-timing-function: linear;
gap: 2.5rem;
}
& .swiper-slide {
width: 25rem;
height: auto;
border-radius: 1.25rem;
overflow: hidden;
& a {
display: flex;
flex-direction: column;
height: 100%;
}
}
& picture {
display: block;
height: 15.31rem;
& img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
}
& .text {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.37rem;
background: #fff;
border-top: 1px solid #E4E4E4;
padding: 0.875rem 1.5rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.7;
}
& .label {
font-feature-settings: 'pwid' on;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.7;
padding: 0.125rem 0.5rem;
border: 1px solid #D7D7D7;
margin: auto 0 0 auto;
}
@media only screen and (min-width: 768px) {
& .swiper-slide {
& a {
will-change: opacity;
transition: opacity .3s;
&:hover {
opacity: .7;
}
}
}
}
@media only screen and (max-width: 767px) {
margin: 0 0 2rem;
& .swiper-slide {
width: 22.8125rem;
}
}
}
.partner {
display: flex;
flex-direction: column;
gap: 1.63rem;
background: #fff;
border-radius: 0.625rem;
padding: 4rem 5rem;
max-width: 960px;
margin: 0 auto;
font-feature-settings: 'pwid' on;
line-height: 1.9;
& .head {
display: flex;
flex-direction: column;
gap: 1.25rem;
letter-spacing: 0.04rem;
}
& .title {
font-feature-settings: 'pwid' on;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.5;
color: var(--primary-color);
}
@media only screen and (max-width: 767px) {
gap: 2rem;
padding: 2rem 1.5rem;
margin: 0 1rem;
}
}
.partner-item {
display: flex;
align-items: center;
gap: 2.5rem;
border: solid 1px #D7D7D7;
border-radius: 0.625rem;
padding: 2rem 3rem;
font-size: 0.875rem;
letter-spacing: 0.035rem;
& figure {
width: 10rem;
flex-shrink: 0;
}
& figcaption {
color: #6F6969;
line-height: 2rem;
letter-spacing: 0;
margin: .88rem 0 0;
text-align: center;
}
@media only screen and (max-width: 767px) {
flex-direction: column;
gap: 1.5rem;
padding: 2rem 1.5rem;
}
}
/* CTA AREA */
.cta-area {
}
.cta-top {
display: flex;
justify-content: center;
background: var(--primary-color);
padding: 2.69rem 0 3.56rem;
& .button-set {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
& .label {
display: flex;
align-items: center;
gap: .82rem;
color: #fff;
font-size: 1.26925rem;
line-height: 1.6;
font-weight: 600;
&::before,
&::after {
content: "";
display: block;
width: .75rem;
height: 1.375rem;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
background-size: 100% 100%;
}
&::after {
transform: scale(-1,1);
}
}
}
& .button {
padding: 1.25rem 4.375rem;
border-radius: 2.4375rem;
font-size: 1.3125rem;
}
@media only screen and (min-width: 768px) {
& .button-set {
position: relative;
&::before,
&::after {
content: "";
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: absolute;
bottom: -3.56rem;
}
&::before {
width: 9.21013rem;
height: 9.15106rem;
background-image: url(../images/illust-cta-01.svg);
left: -11.06013rem;
}
&::after {
width: 11rem;
height: 9.1875rem;
background-image: url(../images/illust-cta-02.svg);
right: -11.56rem;
}
}
}
@media only screen and (max-width: 767px) {
display: block;
padding: 2.31rem .94rem 1.875rem;
gap: 1.5rem;
& .button {
width: 100%;
}
}
}
.cta-buttons {
background: #0277DC;
padding: 2.81rem min(3.125%, 2rem) 2.94rem;
& .button-list {
display: flex;
align-items: center;
justify-content: center;
gap: 3.3rem;
& li {
width: 23.75rem;
}
}
& .button {
display: flex;
padding: 1.62rem 0;
border-radius: 0.3125rem;
font-size: 1.1875rem;
}
@media only screen and (max-width: 767px) {
padding: 1.87rem .94rem;
& .button-list {
flex-direction: column;
gap: 1rem;
& li {
width: 100%;
}
}
}
}
.price {
background: var(--bg-color);
& .box {
display: flex;
flex-direction: column;
gap: 1.5rem;
background: #fff;
padding: 3.5rem 10.833333% 4rem;
& + .box {
margin-top: 2rem;
}
& .title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.6;
color: var(--primary-color);
margin: 0 0 .5rem;
}
& .text {
line-height: 2;
}
& .column {
display: flex;
flex-direction: column;
gap: 1.12rem;
}
}
& .wrap {
border-radius: .9375rem;
border: solid 1px #484848;
overflow: hidden;
}
& dl {
display: flex;
& + dl {
border-top: solid 1px #484848;
}
& dt {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: .31rem 0 .37rem;
font-size: 1.25rem;
line-height: 2.6;
text-align: center;
background: var(--primary-color);
color: #fff;
width: 39.33333%;
border-right: solid 1px #484848;
vertical-align: middle;
}
& dd {
padding: .87rem 2.56rem .88rem;
font-size: 1.125rem;
line-height: 1.5;
& strong {
font-size: 1.4375rem;
}
& span {
font-size: 0.9375rem;
}
}
}
@media only screen and (max-width: 767px) {
& .box {
padding: 1.5rem 1.5rem 2rem;
& .column {
gap: 1.31rem;
}
}
& dl {
& dt {
width: 7.625rem;
align-items: flex-start;
}
& dd {
padding: .87rem 1.04rem .88rem;
}
}
}
}
.comparison {
background: var(--primary-color);
color: #fff;
& .table-wrap {
max-width: 1140px;
margin: 0 auto;
border-radius: 1.875rem;
overflow: hidden;
}
& table {
width: 100%;
border-collapse: separate;
border-spacing: 2px;
& thead {
& th {
background: #005298;
color: #fff;
line-height: 1.6;
text-align: center;
}
}
& tr {
&:nth-child(even) {
& th,
& td {
background: #EFF6FD;
}
}
}
& th {
padding: 1.875rem 1.25rem;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.7;
text-align: center;
color: #1D1D1D;
text-justify : auto;
text-align: right;
background: #fff;
&:first-child {
width: 14.375rem;
}
& span {
display: flex;
align-items: center;
justify-content: center;
}
}
& td {
background: #fff;
color: #1D1D1D;
width: 28.3125rem;
padding: 1.875rem;
line-height: 1.8;
& .note {
font-size: 0.875rem;
color: #1C1C1C;
margin: .5rem 0 0;
}
& .list {
line-height: 1.8;
& li {
display: flex;
&::before {
content: "・";
}
}
}
}
}
@media only screen and (max-width: 767px) {
& table {
& thead {
& th {
font-size: 1.25rem;
padding: 1rem 0.5rem;
vertical-align: middle;
&:first-child {
font-size: 1rem;
}
}
}
& th {
padding: 1rem 0.25rem;
font-feature-settings: 'pwid' on;
font-size: 1rem;
text-align: left;
&:first-child {
width: 6.25rem;
}
}
& td {
width: 8.8125rem;
padding: 1rem 0.5rem;
}
}
}
}
.flow {
& .row {
display: flex;
justify-content: center;
gap: 3.125%;
}
@media only screen and (max-width: 767px) {
& .row {
flex-direction: column;
gap: 1.5625rem;
}
}
}
.flow-item {
flex: 1;
display: flex;
flex-direction: column;
& .head {
font-size: 0.9375rem;
line-height: 1.9;
text-align: center;
margin: 0 0 2.63rem;
position: relative;
}
& .illust {
height: 8.9375rem;
margin: 0 0 1.16rem;
}
& .title {
font-size: 1.375rem;
font-weight: 600;
line-height: 2.36;
color: var(--primary-color);
margin: 0 0 .62rem;
}
& .button {
display: flex;
width: 100%;
height: 4.375rem;
font-size: 1.1875rem;
border-radius: 0.3125rem;
&.-primary {
border-radius: 2.4375rem;
}
}
&:nth-child(2) {
& .illust {
& img {
transform: translateX(1rem);
}
}
}
@media only screen and (min-width: 768px) {
& .head {
min-height: 19.30375rem;
flex: 0;
&::after {
content: "";
display: block;
width: 40px;
height: 43px;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
background-size: 100% 100%;
position: absolute;
bottom: -4.4375rem;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
}
}
&:first-child {
.flow-list {
padding-top: 2.44rem;
}
}
&:nth-child(2) {
.flow-list {
padding-top: 11.88rem;
position: relative;
& li {
&:first-child {
width: 210%;
position: absolute;
z-index: 1;
margin-top: -84px;
&::before {
content: "";
display: block;
width: 23px;
height: 165px;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
position: absolute;
bottom: -165px;
right: 22.0635%;
}
&::after {
left: 22.0635%;
margin: 0;
}
}
}
}
}
&:nth-child(3) {
.flow-list {
padding-top: 21rem;
& li {
&:first-child {
display: none;
}
&:last-child {
&::after {
display: none;
}
}
}
}
}
& .title {
font-size: min(2.1484275vw, 1.375rem);
}
}
@media only screen and (max-width: 767px) {
&::after {
content: "";
display: block;
width: 40px;
height: 43px;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
background-size: 100% 100%;
margin: 2.25rem auto 0;
}
& .head {
margin: 0 0 1.62rem;
}
&:first-child {
.flow-list {
display: none;
}
}
&:last-child {
&::after {
display: none;
}
}
}
}
.flow-list {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.25rem;
margin: 0 0 3.87rem;
position: relative;
& li {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
font-size: 1.25rem;
font-weight: 600;
line-height: 2.4;
color: var(--primary-color);
padding: 0.375rem 0.625rem;
background: #fff;
border: solid 2px var(--primary-color);
border-radius: 0.3125rem;
position: relative;
&.-fs2 {
font-size: 1.125rem;
}
&::after {
content: "";
display: block;
width: 23px;
height: 21px;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
position: absolute;
bottom: -21px;
left: 0;
right: 0;
margin: 0 auto;
}
}
@media only screen and (min-width: 768px) {
padding: 0 0 .63rem;
&::before,
&::after {
content: "";
display: block;
width: calc(100% - 5rem);
position: absolute;
left: 0;
right: 0;
margin: auto;
}
&::before {
height: 100%;
background: var(--bg-color);
top: 0;
}
&::after {
height: 39px;
background: url('data:image/svg+xml;charset=utf-8,') no-repeat center center;
bottom: -39px;
}
& li {
font-size: min(1.953125vw,1.25rem);
&.-fs2 {
font-size: min(1.7578125vw,1.125rem);
}
&:last-child {
&::after {
width: 61.66667%;
height: 45px;
background-image: url('data:image/svg+xml;charset=utf-8,');
background-position: center top;
background-size: contain;
bottom: -45px;
left: calc(50% - 4px);
}
}
}
}
@media only screen and (max-width: 767px) {
margin: 0 auto 1.75rem;
width: 100%;
max-width: 300px;
& li {
&:last-child {
&::after {
display: none;
}
}
}
}
}
.faq {
background: var(--bg-color);
& dl {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1.625rem 4rem 1.625rem 2rem;
background: #fff;
position: relative;
cursor: pointer;
& + dl {
margin-top: .75rem;
}
&::before,
&::after {
content: "";
display: block;
width: 24px;
height: 3px;
background: var(--primary-color);
position: absolute;
top: 0;
bottom: 0;
right: 2rem;
margin: auto;
transition: transform .3s;
}
&::after {
transform: rotate(90deg);
}
& dt {
display: flex;
gap: 1rem;
color: var(--primary-color);
font-weight: 600;
line-height: 1.875;
&::before {
content: "Q";
}
}
& dd {
font-size: 0.9375rem;
line-height: 2;
padding: 0 2.06rem;
& .note {
font-size: 0.875rem;
}
}
&:has([aria-expanded="true"]) {
&::before {
transform: rotate(180deg);
}
&::after {
opacity: 0;
}
}
}
@media only screen and (max-width: 767px) {
& dl {
padding: 1rem 3.06rem 1rem 1rem;
&::before,
&::after {
right: 1rem;
}
&:has([aria-expanded="true"]) {
&::before,
&::after {
top: 1.81rem;
bottom: auto;
}
}
}
}
}