.top-heading {
display: grid;
position: relative;
z-index: 10;
&:has(> .top-heading__description) {
align-items: end;
column-gap: 40px;
grid-template-columns: auto 1fr;
@media screen and (max-width: 1024px) {
grid-template-columns: 1fr;
row-gap: 16px;
}
}
& .top-heading__title-container {
display: grid;
row-gap: 18px;
@media screen and (max-width: 768px) {
row-gap: 16px;
}
& .top-heading__title-en {
display: flex;
align-items: center;
column-gap: 8px;
color: #737373;
font-size: 1.1875rem;
line-height: 1;
font-weight: bold;
@media screen and (max-width: 768px) {
font-size: 1rem;
}
&::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-color: #737373;
border-radius: 6px;
}
}
& .top-heading__title {
color: #363840;
font-size: 2.25rem;
line-height: 1.3;
font-weight: bold;
@media screen and (max-width: 768px) {
font-size: 1.5rem;
}
}
}
& .top-heading__description {
color: #737373;
font-size: 1.1875rem;
line-height: 1.6;
font-weight: 400;
@media screen and (max-width: 768px) {
font-size: 1rem;
}
}
& .top-heading__text--blue {
color: #0474db;
}
&.top-heading__position--center {
& .top-heading__title-container {
place-items: center;
& .top-heading__title {
text-align: center;
}
}
}
&.top-heading__color--white {
& .top-heading__title-container {
& .top-heading__title-en {
color: #fff;
&::before {
background-color: #fff;
}
}
& .top-heading__title {
color: #fff;
}
}
& .top-heading__description {
color: #fff;
}
}
&.top-tool-card__heading {
grid-template-columns: 1fr;
place-items: center;
@media screen and (max-width: 768px) {
row-gap: 6px;
}
& .top-heading__title-container {
display: grid;
row-gap: 12px;
@media screen and (max-width: 768px) {
row-gap: 10px;
}
& .top-heading__title-en {
color: #fff;
font-size: 0.875rem;
&::before {
background-color: #fff;
}
}
& .top-heading__title {
color: #fff;
font-size: 2rem;
line-height: 1.5;
@media screen and (max-width: 768px) {
font-size: 1.625rem;
}
}
}
& .top-heading__description {
color: #fff;
font-size: 1.25rem;
@media screen and (max-width: 768px) {
font-size: 1.0625rem;
}
}
}
}
.top-archive__button {
width: fit-content;
column-gap: 8px;
padding-block: 8px;
line-height: 1.8;
height: fit-content;
margin-left: auto;
transition: 0.15s opacity;
&.olga-button__type-outline {
border: 1px solid #d2dbe0;
}
&:hover {
opacity: 0.8;
}
}
.top-kv {
& .top-kv__banner-container {
margin-block: 30px;
}
}
.top-kv-content {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_kv_bg.webp);
background-repeat: no-repeat;
background-position: top right;
background-size: 61.1%;
@media screen and (max-width: 768px) {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_kv_bg_sp.webp);
background-position: bottom;
}
@media screen and (max-width: 1330px) {
background-size: contain;
}
& .top-kv-content__inner {
padding-left: 80px;
display: grid;
grid-template-columns: 42% 1fr;
column-gap: 16px;
max-width: 1366px;
margin-inline: auto;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
row-gap: 22px;
padding-inline: 16px;
}
& .top-kv-content__left {
height: fit-content;
margin-block: auto;
padding-block: 24px;
@media screen and (max-width: 768px) {
padding-block: 40px 0;
}
}
& .top-kv-content__right {
display: grid;
place-items: center;
padding-top: 54px;
padding-bottom: 62px;
row-gap: 24px;
grid-template-areas: "title" "image";
@media screen and (max-width: 768px) {
padding-top: 0;
padding-bottom: 60px;
grid-template-areas: "image" "title";
}
}
}
}
.top-kv__question {
color: #fff;
font-size: 1.125rem;
font-weight: bold;
line-height: 1;
background-color: #53657f;
padding: 12px 18px;
width: fit-content;
border-radius: 24px;
position: relative;
@media screen and (max-width: 1024px) {
font-size: 1rem;
padding: 8px 12px;
}
&::after {
content: "";
display: inline-block;
position: absolute;
width: 16px;
height: 18px;
background-color: #53657f;
bottom: -8px;
left: 20px;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
rotate: -15deg;
}
}
.top-kv__catchphrase {
margin-top: 44px;
font-size: 2.85rem;
font-weight: bold;
@media screen and (max-width: 1024px) {
font-size: 2rem;
margin-top: 22px;
}
& .top-kv__catchphrase--lg {
font-size: 3rem;
@media screen and (max-width: 1024px) {
font-size: 2rem;
}
}
& .top-kv__catchphrase--theme {
color: #0474db;
font-size: 3.075rem;
@media screen and (max-width: 1024px) {
font-size: 2rem;
}
}
& .top-kv__catchphrase--bg-theme {
background-color: #0085ee;
color: #fff;
padding: 10px;
border-radius: 4px;
display: inline-block;
line-height: 1;
@media screen and (max-width: 1024px) {
font-size: 2rem;
padding: 6px;
border-radius: 2px;
}
}
}
.top-kv__lead {
margin-top: 20px;
font-size: 1.125rem;
line-height: 1.8;
font-weight: bold;
@media screen and (max-width: 1024px) {
margin-top: 16px;
font-size: 1rem;
}
}
.top-kv__record-list {
display: flex;
column-gap: 12px;
margin-top: 34px;
@media screen and (max-width: 1024px) {
margin-top: 24px;
column-gap: 6px;
}
}
.top-kv__record {
flex: 1;
& .top-kv__record-text {
font-size: 0.5rem;
line-height: 1.4;
color: #737373;
text-align: center;
font-weight: 400;
margin-top: 3px;
@media screen and (max-width: 1024px) {
font-size: 0.4rem;
}
}
}
.top-kv__title-container {
grid-area: title;
& .top-kv__sub-title {
display: flex;
column-gap: 13px;
align-items: center;
font-size: 1.5rem;
line-height: 1.5;
color: #fff;
@media screen and (max-width: 1024px) {
font-size: 1rem;
column-gap: 8px;
}
}
& .top-kv__title {
color: #fff;
font-weight: bold;
font-size: 2rem;
line-height: 1.6;
display: flex;
align-items: center;
column-gap: 8px;
@media screen and (max-width: 1024px) {
font-size: 1.375rem;
}
& .top-kv__title-image {
@media screen and (max-width: 1024px) {
width: 90px;
}
}
}
}
.top-kv__image {
grid-area: image;
@media screen and (max-width: 768px) {
}
}
.company-logo-slider__container {
padding-block: 20px;
border-bottom: 1px solid #ecf0f2;
overflow: hidden;
& .company-logo-slider__image {
height: 100%;
width: 100px;
object-fit: contain;
}
}
.top-banner__container {
display: flex;
justify-content: center;
column-gap: 24px;
max-width: 1000px;
margin-top: 10px;
margin-inline: auto;
@media screen and (max-width: 768px) {
flex-direction: column;
row-gap: 8px;
}
}
.top-banner__item {
&:nth-child(1) .top-banner__link {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top-banner/banner_bg_01.webp);
}
&.top-banner__item_02 .top-banner__link{
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top-banner/banner_bg_02.webp);
}
&.top-banner__item_03 .top-banner__link{
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top-banner/banner_bg_03.webp);
} &.top-banner__item_03 .top-banner__link{
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top-banner/banner_bg_03.webp);
} }
.top-banner__link {
position: relative;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 6px;
display: grid;
grid-template-columns: 140px 1fr;
padding-inline: 16px;
column-gap: 16px;
transition: opacity 0.15s;
@media screen and (max-width: 768px) {
grid-template-columns: 92px 1fr;
align-items: center;
column-gap: 10px;
padding-block: 16px;
min-height: 120px;
}
&:hover {
opacity: 0.8;
}
}
.top-banner__text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 4px;
@media screen and (max-width: 768px) {
align-items: start;
}
& .top-banner__title {
color: #fff;
font-size: 1.25rem;
line-height: 1.6;
font-weight: bold;
@media screen and (max-width: 768px) {
font-size: 1.0625rem;
line-height: 1.3;
}
}
& .top-banner__description {
color: #fff;
font-size: 0.875rem;
line-height: 1.6;
font-weight: bold;
@media screen and (max-width: 768px) {
font-size: 0.75rem;
line-height: 1.6;
font-weight: 500;
}
}
}
.top-banner__icon {
position: absolute;
bottom: 10px;
right: 10px;
width: 18px;
height: 18px;
@media screen and (max-width: 768px) {
width: 14px;
height: 14px;
}
}
.top-banner__item--download {
& .top-banner__image {
margin-top: -6px;
@media screen and (max-width: 768px) {
margin-top: 0;
}
}
& .top-banner__link {
grid-template-columns: 130px 1fr;
@media screen and (max-width: 768px) {
grid-template-columns: 92px 1fr;
}
}
}
.top-before-after {
padding-block: 80px 110px;
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_before-after_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
& .top-before-after__inner {
max-width: 1136px;
}
& .top-before-after__banner-container {
margin-top: 60px;
}
}
.top-before-after-table__container {
margin-top: -40px;
overflow: scroll;
@media screen and (max-width: 768px) {
width: calc(100% + 16px);
margin-top: 30px;
padding-right: 16px;
}
& .top-before-after-table {
width: 100%;
height: 100%;
@media screen and (max-width: 768px) {
display: flex;
}
& .top-before-after-table__thead {
@media screen and (max-width: 768px) {
display: flex;
align-items: end;
}
& .top-before-after-table__tr {
@media screen and (max-width: 768px) {
display: grid;
width: 146px;
}
& .top-before-after-table__th {
&.top-before-after-table__th--before {
@media screen and (max-width: 768px) {
height: 108px;
}
}
&.top-before-after-table__th--after {
@media screen and (max-width: 768px) {
height: 160px;
}
}
& .top-before-after-table__th-inner {
@media screen and (max-width: 768px) {
padding: 14px 9px 16px;
}
& .top-before-after-table__th-content {
@media screen and (max-width: 768px) {
row-gap: 4px;
}
}
}
}
}
}
& .top-before-after-table__tbody {
@media screen and (max-width: 768px) {
display: flex;
}
& .top-before-after-content__tr {
overflow: hidden;
@media screen and (max-width: 768px) {
display: grid;
flex-shrink: 0;
} &:nth-child(odd) {
& .top-before-after-table__th {
background-color: #575f6c;
}
& .top-before-after-table__td {
&:nth-child(2) {
background-color: #fff;
}
&:last-child {
background-color: #e5f4ff;
}
}
} &:nth-child(even) {
& .top-before-after-table__th {
background-color: #505865;
}
& .top-before-after-table__td {
&:nth-child(2) {
background-color: #f6fafc;
}
&:last-child {
background-color: #d4edff;
}
}
} &:first-child .top-before-after-table__th {
border-top-left-radius: 8px;
@media screen and (max-width: 768px) {
border-top-left-radius: 4px;
}
} &:last-child {
& .top-before-after-table__th {
border-bottom-left-radius: 8px;
@media screen and (max-width: 768px) {
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
}
}
& .top-before-after-table__td:last-child {
border-bottom-right-radius: 8px;
}
} &:not(:last-child)
.top-before-after-table__th
.top-before-after-table__cell-inner-x {
border-bottom: 1px solid #7f8794;
}
& .top-before-after-table__th {
padding-inline: 30px;
width: 20%;
@media screen and (max-width: 768px) {
width: auto;
padding-inline: 20px;
height: 34px;
}
& .top-before-after-table__cell-inner-x {
padding-block: 24px;
height: 100%;
@media screen and (max-width: 768px) {
padding-block: 0;
}
& .top-before-after-table__cell-inner-y {
height: 100%;
display: grid;
row-gap: 10px;
color: #fff;
font-weight: bold;
font-size: 1.125rem;
line-height: 1.4;
place-content: center;
@media screen and (max-width: 768px) {
grid-template-columns: auto 1fr;
column-gap: 6px;
font-size: 0.8125rem;
white-space: nowrap;
align-items: center;
}
}
}
}
& .top-before-after-table__td {
&:nth-child(2) {
padding-inline: 32px;
width: 30.91%;
position: relative;
@media screen and (max-width: 768px) {
padding: 8px;
width: auto;
height: 108px;
}
&::before {
content: "";
display: inline-block;
position: absolute;
top: 0;
right: 0;
width: 42px;
height: 100%;
transform: translateX(50%);
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_before-after_boundary.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
@media screen and (max-width: 768px) {
width: 19px;
height: 40px;
transform: translateY(20px) rotate(90deg);
top: auto;
bottom: 0;
left: 50%;
}
}
& .top-before-after-table__cell-inner-x {
padding-block: 16px;
height: 100%;
border-bottom: 1px solid #c8c8c8;
@media screen and (max-width: 768px) {
padding: 0;
border: none;
}
& .top-before-after-table__cell-inner-y {
height: 100%;
color: #737373;
font-weight: 500;
font-size: 1.125rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
@media screen and (max-width: 768px) {
font-size: 0.9375rem;
}
}
}
}
&:last-child {
padding-inline: 20px;
@media screen and (max-width: 768px) {
padding-inline: 8px;
height: 160px;
}
& .top-before-after-table__cell-inner-x {
padding-block: 16px;
height: 100%;
border-bottom: 1px solid #b9d4e7;
@media screen and (max-width: 768px) {
padding: 0;
border: none;
}
& .top-before-after-table__cell-inner-y {
height: 100%;
color: #0f7cba;
font-weight: bold;
font-size: 1.375rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
@media screen and (max-width: 768px) {
font-size: 0.9375rem;
}
}
}
}
}
}
}
& .top-before-after-table__th-icon {
width: 30px;
height: 30px;
margin-inline: auto;
@media screen and (max-width: 768px) {
width: 13px;
height: 13px;
}
}
}
}
.top-before-after-table__th--before {
vertical-align: bottom;
@media screen and (max-width: 768px) {
display: flex;
}
& .top-before-after-table__th-inner {
padding: 32px 26px 28px;
background: #ecf0f2;
border-top-left-radius: 8px;
@media screen and (max-width: 768px) {
border-top-left-radius: 4px;
}
& .top-before-after-table__th-content {
display: grid;
row-gap: 16px;
& .top-before-after-table__th-label {
width: 110px;
background-color: #76817f;
@media screen and (max-width: 768px) {
width: 55px;
}
}
& .top-before-after-table__th-text {
color: #768189;
font-size: 1.375rem;
line-height: 1.5;
@media screen and (max-width: 768px) {
font-size: 0.9375rem;
line-height: 1.5;
}
}
}
}
}
.top-before-after-table__th--after {
& .top-before-after-table__th-inner {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_before-after_after_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
column-gap: 14px;
padding-block: 60px;
padding-inline: 48px 44px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
@media screen and (max-width: 768px) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
flex-direction: column;
align-items: start;
}
& .top-before-after-table__th-content {
display: grid;
row-gap: 16px;
& .top-before-after-table__th-label {
width: 98px;
background-color: #0f7cba;
@media screen and (max-width: 768px) {
width: 55px;
}
}
& .top-before-after-table__th-text {
color: #fff;
font-size: 1.625rem;
line-height: 1.5;
@media screen and (max-width: 768px) {
font-size: 0.9375rem;
line-height: 1.5;
}
& .top-before-after-table__th-text-image {
display: inline;
vertical-align: middle;
width: 96px;
@media screen and (max-width: 768px) {
width: 48px;
}
}
}
}
& .top-before-after-table__th-image {
width: 174px;
@media screen and (max-width: 768px) {
width: 71px;
}
}
}
}
.top-before-after-table__th-text {
font-weight: bold;
}
.top-before-after-table__th-label {
font-size: 1rem;
line-height: 1.2;
color: #fff;
padding-block: 3px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
@media screen and (max-width: 768px) {
font-size: 0.625rem;
line-height: 1;
padding-block: 2px;
border-radius: 2px;
}
}
.top-tool {
padding-block: 100px 140px;
background-color: #f0f0f0;
& .top-tool__inner {
max-width: 1136px;
display: grid;
row-gap: 60px;
}
}
.top-tool__list {
display: grid;
row-gap: 40px;
@media screen and (max-width: 768px) {
row-gap: 30px;
}
}
.top-tool-explain__inner {
position: relative;
max-width: 720px;
margin: auto;
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_tool_explain_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 30px;
padding-top: 36px;
border-radius: 10px;
@media screen and (max-width: 768px) {
padding: 14px;
padding-top: 28px;
border-radius: 6px;
}
h3 {
text-align: center;
font-size: 28px;
font-weight: bold;
margin-bottom: 24px;
color: #fff;
@media screen and (max-width: 768px) {
font-size: 18px;
margin-bottom: 10px;
}
}
.top-tool-explain__attention {
background-color: #fff;
padding: 8px 80px;
font-size: 16px;
color: #0474DB;
font-weight: 700;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 50vh;
@media screen and (max-width: 768px) {
padding: 2px 20px;
}
.number {
font-weight: bold;
font-size: 20px;
}
}
.top-tool-explain__video-wrapper {
position: relative;
&::after {
content: "";
position: absolute;
inset: 0;
background: #53657F;
opacity: .3;
pointer-events: none;
transition: opacity .3s;
z-index: 1;
}
&:not(.is-playing) .top-tool-explain__video {
filter: grayscale(35%) brightness(.9) contrast(.95);
transition: filter .3s;
} &.is-playing::after {
opacity: 0;
}
&.is-playing .top-tool-explain__video {
filter: none;
}
.top-tool-explain__video {
max-width: 100%;
border-radius: 8px;
display: block;
@media screen and (max-width: 768px) {
border-radius: 4px;
}
}
.top-tool-explain__video-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 98px;
height: 98px;
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_tool_play_button.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
cursor: pointer;
z-index: 10;
@media screen and (max-width: 768px) {
width: 46px;
height: 46px;
}
img {
filter: drop-shadow(0 0 20px rgba(149, 178, 199, 0.3));
}
}
}
}
.top-tool-card {
background-color: #fff;
border-radius: 10px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
@media screen and (max-width: 768px) {
border-radius: 4px;
}
&.top-tool-card__theme--blue {
& .top-tool-card__header {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_tool_bg_blue.webp);
}
& .top-tool-card__problem--theme,
& .top-tool-card__content-effect--theme {
color: #0474db;
}
}
&.top-tool-card__theme--green {
& .top-tool-card__header {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_tool_bg_green.webp);
}
& .top-tool-card__problem--theme,
& .top-tool-card__content-effect--theme {
color: #00c7a6;
}
}
&.top-tool-card__theme--yellow {
& .top-tool-card__header {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_tool_bg_yellow.webp);
}
& .top-tool-card__problem--theme,
& .top-tool-card__content-effect--theme {
color: #c7a900;
}
}
&.top-tool-card__theme--red {
& .top-tool-card__header {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_tool_bg_red.webp);
}
& .top-tool-card__problem--theme,
& .top-tool-card__content-effect--theme {
color: #c70003;
}
}
}
.top-tool-card__header {
padding: 40px 85px 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
display: grid;
place-items: center;
@media screen and (max-width: 768px) {
padding: 40px 16px 0;
}
}
.top-tool-card__problem-list {
display: flex;
column-gap: 24px;
margin-top: 30px;
width: 100%;
@media screen and (max-width: 768px) {
margin-top: 20px;
flex-direction: column;
row-gap: 20px;
}
& .top-tool-card__problem {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: min(150px);
background-color: #fff;
padding: 10px;
border-radius: 8px;
font-size: 1rem;
line-height: 1.5;
font-weight: 500;
margin-bottom: 16px;
@media screen and (max-width: 768px) {
height: auto;
padding-block: 12px;
border-radius: 2px;
margin-bottom: 0;
}
&::after {
content: "";
display: inline-block;
position: absolute;
width: 21px;
height: 18px;
background-color: #fff;
bottom: -16px;
@media screen and (max-width: 768px) {
bottom: -8px;
}
}
&:nth-child(1)::after {
right: 56px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
@media screen and (max-width: 768px) {
right: 20px;
}
}
&:nth-child(2)::after {
left: calc(50% + 21px);
transform: translateX(-50%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
@media screen and (max-width: 768px) {
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
left: calc(20px + 21px);
}
}
&:nth-child(3)::after {
left: 56px;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
@media screen and (max-width: 768px) {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
left: auto;
right: 20px;
}
}
& .top-tool-card__problem-inner {
text-align: center;
}
& .top-tool-card__problem--theme {
font-weight: bold;
}
}
}
.top-tool-card__problem-image {
width: 409px;
margin-top: 24px;
z-index: 10;
margin-right: 3.5%;
@media screen and (max-width: 768px) {
width: 262px;
}
}
.top-tool-card__catchphrase {
column-gap: 8px;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
margin-top: 50px;
margin-inline: auto;
width: fit-content;
@media screen and (max-width: 768px) {
text-align: center;
}
& .top-tool-card__catchphrase-image {
display: inline;
width: 127px;
vertical-align: middle;
@media screen and (max-width: 768px) {
width: 97px;
}
}
}
.top-tool-card__content {
margin-top: 34px;
display: grid;
grid-template-columns: 36% 1fr;
align-items: center;
column-gap: 30px;
padding-inline: 85px;
padding-bottom: 64px;
@media screen and (max-width: 768px) {
margin-top: 20px;
grid-template-columns: 1fr;
grid-template-areas: "image" "text";
row-gap: 20px;
padding-inline: 16px;
}
}
.top-tool-card__content-text {
display: grid;
row-gap: 16px;
@media screen and (max-width: 768px) {
grid-area: text;
row-gap: 8px;
}
& .top-tool-card__content-effect {
font-weight: bold;
font-size: 1.5rem;
line-height: 1.6;
@media screen and (max-width: 768px) {
font-size: 1.25rem;
line-height: 1.5;
}
}
& .top-tool-card__content-description {
font-size: 0.875rem;
line-height: 2;
font-weight: 400;
@media screen and (max-width: 768px) {
line-height: 1.8;
}
}
}
.top-tool-card__image {
border-radius: 6px;
@media screen and (max-width: 768px) {
grid-area: image;
}
}
.top-function {
padding-block: 100px 80px;
position: relative;
@media screen and (max-width: 768px) {
padding-block: 50px 60px;
}
}
.top-function__bg {
position: absolute;
top: 0;
object-fit: cover;
object-position: center;
height: 414px;
@media screen and (max-width: 768px) {
height: 263px;
}
}
.top-function-slider {
margin-top: 40px;
}
.top-function-card {
padding: 40px 30px 8px;
border-radius: 8px;
@media screen and (max-width: 768px) {
padding: 14px 16px;
}
&.top-function-card__theme--blue {
background-color: #f5fdfc;
}
&.top-function-card__theme--gray {
background-color: #f4f5f6;
}
&.top-function-card__theme--orange {
background-color: #fdf9f5;
}
&.top-function-card__theme--purple {
background-color: #f7f6f9;
}
& .top-function-card__title {
margin-top: 20px;
text-align: center;
font-size: 1.25rem;
line-height: 1.6;
font-weight: bold;
@media screen and (max-width: 768px) {
margin-top: 4px;
font-size: 0.9375rem;
line-height: 1.4;
}
}
& .top-function-card__description {
margin-top: 12px;
font-size: 1rem;
font-weight: 500;
line-height: 1.8;
@media screen and (max-width: 768px) {
margin-top: 8px;
font-size: 0.6875rem;
}
}
}
.top-function__button {
margin-top: 40px;
width: fit-content;
margin-inline: auto;
padding-block: 8px;
line-height: 1.9;
transition: 0.15s opacity;
@media screen and (max-width: 768px) {
font-size: 0.9375rem;
line-height: 1.5;
padding-block: 12px;
}
&:hover {
opacity: 0.8;
}
}
.top-download__container {
padding-inline: 16px;
@media screen and (max-width: 768px) {
container-type: inline-size;
}
}
.top-download {
position: relative;
color: #fff;
background-color: #f0f0f0;
height: 297px;
display: grid;
grid-template-columns: 52% 1fr;
place-items: center;
width: 100%;
max-width: 1000px;
padding-left: 64px;
padding-right: 56px;
margin-inline: auto;
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_download_bg.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 8px;
margin-top: 74px;
transition: 0.15s opacity;
@media screen and (max-width: 768px) {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_download_bg_sp.webp);
padding: 16px;
grid-template-columns: 1fr;
height: auto;
margin-top: 50px;
padding: 30px 30px 70vw;
border-radius: 4px;
overflow: hidden;
}
&:hover {
opacity: 0.8;
}
& .top-download__content {
display: grid;
row-gap: 14px;
z-index: 10;
@media screen and (max-width: 768px) {
row-gap: 20px;
}
}
}
.top-download__title {
font-size: 1.875rem;
line-height: 1.5;
font-weight: bold;
@media screen and (max-width: 768px) {
text-align: center;
}
@media screen and (max-width: 1024px) {
font-size: 1.5rem;
line-height: 1.4;
}
& .top-download__title--bg {
background-color: #fff;
color: #1381bf;
padding-inline: 8px;
border-radius: 2px;
@media screen and (max-width: 768px) {
padding-inline: 6px;
margin-top: 8px;
display: inline-block;
}
}
}
.top-download__description {
font-size: 0.875rem;
line-height: 1.8;
font-weight: 400;
padding-right: 16px;
@media screen and (max-width: 768px) {
text-align: center;
padding-inline: 22px;
}
@media screen and (max-width: 1024px) {
font-size: 0.875rem;
line-height: 1.7;
}
}
.top-download__image {
position: absolute;
object-fit: contain;
object-position: left;
&.top-download__image--pc {
width: 42%;
left: 53%;
bottom: 0;
@media screen and (max-width: 768px) {
display: none;
}
}
&.top-download__image--sp {
display: none;
width: 100cqw;
bottom: 40px;
@media screen and (max-width: 768px) {
display: block;
}
}
}
.top-download__label {
position: absolute;
right: 0;
bottom: 0;
font-size: 0.875rem;
height: 48px;
width: 210px;
background-color: #0474db;
display: flex;
align-items: center;
justify-content: center;
column-gap: 4px;
z-index: 10;
border-top-left-radius: 6px;
border-bottom-right-radius: 8px;
@media screen and (max-width: 768px) {
width: 100%;
height: 48px;
column-gap: 12px;
border-radius: 0;
}
&::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/download-mark.svg);
background-repeat: no-repeat;
background-size: contain;
@media screen and (max-width: 768px) {
width: 16px;
height: 16px;
}
}
}
.top-case {
background-image: url(//olga-legal.com/wp-content/themes/olga/files/images/top_case_bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding-block: 120px;
container-type: inline-size;
@media screen and (max-width: 768px) {
padding-block: 50px 60px;
}
& .top-case__inner {
display: grid;
grid-template-areas: "heading button" "slider slider";
grid-template-columns: 1fr auto;
gap: 40px;
align-items: end;
@media screen and (max-width: 768px) {
grid-template-areas: "heading" "slider" "button";
grid-template-columns: 1fr;
padding-inline: 36px;
row-gap: 30px;
}
}
.top-archive__button {
grid-area: button;
@media screen and (max-width: 768px) {
margin-inline: auto;
}
}
}
.top-case__heading {
grid-area: heading;
}
.case-slider {
display: grid;
row-gap: 40px;
width: 100cqw;
margin-left: calc((100cqw - 100%) / -2);
grid-area: slider;
& .case-slider__control {
display: flex;
justify-content: center;
column-gap: 40px;
width: 100%;
align-items: center;
@media screen and (max-width: 768px) {
column-gap: 30px;
}
& .case-slider__button-container {
display: flex;
column-gap: 10px;
@media screen and (max-width: 768px) {
display: none;
}
& .case-slider__button {
width: 50px;
height: 50px;
background: #fff;
position: static;
inset: auto;
transform: none;
transition: 0.15s opacity;
&:hover {
opacity: 0.8;
}
&:first-child {
rotate: 180deg;
}
}
}
& .case-slider__progress {
background: #d2dbe0;
height: 1px;
width: 100%;
display: flex;
align-items: center;
& .case-slider__progress-bar {
height: 3px;
background: #fff;
transition: width 400ms ease;
width: 0;
}
}
}
}
.top-archive__section {
background-color: #f6f8f9;
& .top-archive__section-inner {
display: grid;
grid-template-columns: 1fr;
row-gap: 50px;
border-bottom: 1px solid #ced2d4;
padding-block: 90px;
@media screen and (max-width: 768px) {
padding-block: 60px;
row-gap: 30px;
}
}
}
.top-seminar__inner {
padding-top: 100px;
@media screen and (max-width: 768px) {
padding-top: 54px;
}
}
.top__article-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 32px;
@media screen and (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
row-gap: 28px;
}
}
.top-column {
& .top-column__inner {
padding-bottom: 120px;
border: none;
@media screen and (max-width: 768px) {
padding-block: 30px;
}
}
}
.top-news {
background: #fff;
& .top-news__inner {
padding-block: 80px;
display: grid;
grid-template-areas: "heading list" " button list";
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
column-gap: 72px;
@media screen and (max-width: 768px) {
grid-template-areas: "heading" "list" "button";
grid-template-columns: auto;
grid-template-rows: auto;
row-gap: 30px;
}
}
}
.top-news__heading {
grid-area: heading;
}
.top-news__button {
grid-area: button;
margin-top: auto;
}
.top-news__list-container {
grid-area: list;
@media screen and (max-width: 1024px) {
overflow-x: scroll;
width: calc(100% + 16px);
}
& .top-news__list {
display: flex;
column-gap: 16px;
@media screen and (max-width: 1024px) {
column-gap: 8px;
}
}
}