.portal--block > div {
position: relative;
z-index: 2; }
.portal--block::after {
background: url(/portal/imgV2/title_bg.webp) repeat center #eb0f30;
background-size: auto 220px;
content: "";
height: 160px;
margin: auto;
position: absolute;
inset: 0px 0px auto; }
@media screen and (max-width: 1023px) {
.portal--block::after {
background-size: auto 206.25px;
height: 150px; } }
@media screen and (max-width: 639px) {
.portal--block::after {
background-size: auto 110px;
height: 120px; } }
.portal--block:is(.c-block--right *)::after {
left: -50%; }
@media screen and (max-width: 1023px) {
.portal--block:is(.c-block--right *)::after {
left: -20px; } }
@media screen and (max-width: 639px) {
.portal--block:is(.c-block--right *)::after {
left: 0px; } }
.portal--block:is(.c-block--left *)::after {
right: -50%; }
@media screen and (max-width: 1023px) {
.portal--block:is(.c-block--left *)::after {
right: -20px; } }
@media screen and (max-width: 639px) {
.portal--block:is(.c-block--left *)::after {
right: 0px; } }
.portal--block:has(.utilization)::after {
height: 211px; }
@media screen and (max-width: 1023px) {
.portal--block:has(.utilization)::after {
height: 150px; } }
@media screen and (max-width: 639px) {
.portal--block:has(.utilization)::after {
height: 120px; } }
@media screen and (max-width: 374px) {
.portal--block:has(.utilization)::after {
height: 160px; } }
.portal__mv {
font-size: 0px;
text-align: center; }
.portal__mv--default {
background: url(/portal/imgV2/mv_bg.webp) no-repeat center;
background-size: cover; }
.portal__mv--default img {
max-width: 1440px;
width: 100%; }
.portal__mv--cmp {
background: url(/portal/imgV2/mv_cmp_bg.webp) no-repeat center;
background-size: cover; }
@media screen and (max-width: 639px) {
.portal__mv--cmp {
padding: 0px 10px; } }
.portal__mv--cmp img {
max-width: 1024px;
width: 80%; }
@media screen and (max-width: 1023px) {
.portal__mv--cmp img {
width: 65.88%; } }
@media screen and (max-width: 639px) {
.portal__mv--cmp img {
width: 100%; } }
.portal__anchorlink {
background: #FFEEF1;
margin-bottom: 40px;
padding: 50px 40px 40px; }
@media screen and (max-width: 1023px) {
.portal__anchorlink {
padding: 40px 30px 30px; } }
@media screen and (max-width: 639px) {
.portal__anchorlink {
margin-bottom: 20px;
padding: 30px; } }
.portal__anchorlink[data-scrollanimation="show"] li {
opacity: 1;
transition: transform 500ms ease 0s, opacity 500ms ease 0s;
transform: translateY(0px); }
.portal__anchorlink[data-scrollanimation="show"] li:nth-of-type(1) {
transition-delay: 0ms; }
.portal__anchorlink[data-scrollanimation="show"] li:nth-of-type(2) {
transition-delay: 100ms; }
.portal__anchorlink[data-scrollanimation="show"] li:nth-of-type(3) {
transition-delay: 200ms; }
.portal__anchorlink[data-scrollanimation="show"] li:nth-of-type(4) {
transition-delay: 300ms; }
.portal__anchorlink[data-scrollanimation="show"] li:nth-of-type(5) {
transition-delay: 400ms; }
.portal__anchorlink li {
opacity: 0;
transform: translateY(15px); }
.portal__anchorlink--pc {
-ms-flex-align: start;
align-items: flex-start;
display: block flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0px 45px;
-ms-flex-pack: center;
justify-content: center;
margin: 0px auto;
max-width: 1256px; }
@media screen and (max-width: 1023px) {
.portal__anchorlink--pc {
gap: 0px 25px; } }
@media screen and (max-width: 639px) {
.portal__anchorlink--pc {
display: none; } }
.portal__anchorlink--pc li {
width: calc((100% - 90px) / 3); }
@media screen and (max-width: 1023px) {
.portal__anchorlink--pc li {
width: calc((100% - 50px) / 3); } }
.portal__anchorlink--pc a {
display: block;
position: relative;
width: 100%; }
.portal__anchorlink--pc a:hover img:nth-of-type(1) {
opacity: 0; }
.portal__anchorlink--pc a:hover img:nth-of-type(2) {
opacity: 1; }
.portal__anchorlink--pc a img {
width: 100%;
transition: all 200ms ease; }
.portal__anchorlink--pc a img:hover {
opacity: 1; }
.portal__anchorlink--pc a img:nth-of-type(2) {
opacity: 0;
position: absolute;
inset: 0px auto auto 0px; }
.portal__anchorlink--sp {
display: none; }
@media screen and (max-width: 639px) {
.portal__anchorlink--sp {
display: block flex;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px; } }
.portal__anchorlink--sp li {
width: 100%; }
.portal__anchorlink--sp a {
background: #fff;
border: 1px solid #6b6b6b;
border-radius: 14px;
display: block flow;
font-size: 1.4rem;
font-weight: 700;
padding: 15px 0px 15px 70px;
position: relative;
text-decoration: none; }
.portal__anchorlink--sp a strong {
color: #eb0f30;
font-size: 1.8rem;
font-weight: inherit; }
.portal__anchorlink--sp a::before {
background-position: center;
background-repeat: no-repeat;
content: "";
height: 32px;
margin: auto;
position: absolute;
width: 32px;
inset: 0px auto 0px 26px; }
.portal__anchorlink--sp a::after {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 7px;
margin: auto;
position: absolute;
width: 12px;
inset: 0px 15px 0px auto; }
@media screen and (max-width: 639px) {
.portal__anchorlink--01 a::before {
background-image: url(/portal/imgV2/anchorlink_01.svg);
background-size: auto 21px; } }
@media screen and (max-width: 639px) {
.portal__anchorlink--02 a::before {
background-image: url(/portal/imgV2/anchorlink_02.svg);
background-size: auto 22px; } }
@media screen and (max-width: 639px) {
.portal__anchorlink--03 a::before {
background-image: url(/portal/imgV2/anchorlink_03.svg);
background-size: auto 26px; } }
@media screen and (max-width: 639px) {
.portal__anchorlink--04 a::before {
background-image: url(/portal/imgV2/anchorlink_04.svg);
background-position: 6px 50%;
background-size: auto 30px; } }
@media screen and (max-width: 639px) {
.portal__anchorlink--05 a::before {
background-image: url(/portal/imgV2/anchorlink_05.svg);
background-position: 6px 50%;
background-size: auto 24px; } }
.portal__anchorlink02 {
background: #fff;
border-radius: 14px;
box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
gap: 20px;
margin: 0px auto;
max-width: 1174px;
opacity: 0;
padding: 20px 40px;
position: fixed;
z-index: 100;
inset: auto 30px 30px;
display: block flex;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-ms-flex-align: center;
align-items: center;
transition: all 200ms ease;
translate: 0px 30px; }
@media (max-width: 1279px) {
.portal__anchorlink02 {
gap: 15px;
padding: 20px 20px; } }
@media screen and (max-width: 1023px) {
.portal__anchorlink02 {
display: none; } }
.portal__anchorlink02[data-scroll="show"] {
opacity: 1;
translate: 0px 0px; }
.portal__anchorlink02 ul {
-ms-flex-positive: 10;
flex-grow: 10;
gap: inherit;
display: block flex;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-ms-flex-align: center;
align-items: center; }
.portal__anchorlink02 ul a {
display: block flow;
font-size: 1.6rem;
line-height: 1.5;
padding-right: 21px;
position: relative;
text-align: center;
text-decoration: none;
text-decoration: none;
transition: opacity 200ms ease; }
@media (max-width: 1279px) {
.portal__anchorlink02 ul a {
font-size: 1.4rem; } }
@media screen and (min-width: 640px) {
.portal__anchorlink02 ul a:hover {
text-decoration: none;
opacity: 0.5; } }
.portal__anchorlink02 ul a strong {
color: #eb0f30;
font-size: 2rem; }
@media (max-width: 1279px) {
.portal__anchorlink02 ul a strong {
font-size: 1.6rem; } }
.portal__anchorlink02 ul a::after {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 8px;
margin: auto;
position: absolute;
width: 14px;
inset: 0px 0px 0px auto; }
.portal__anchorlink02 nav a {
background: #eb0f30;
border: 2px solid #eb0f30;
border-radius: 7px;
box-sizing: border-box;
color: #fff;
font-weight: 700;
gap: 10px;
height: 50px;
padding: 0px 10px;
text-decoration: none;
width: -moz-fit-content;
width: fit-content;
font-weight: 400;
line-height: 1.5em;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
transition: all 200ms ease; }
@media (max-width: 1279px) {
.portal__anchorlink02 nav a {
font-size: 1.4rem; } }
@media screen and (max-width: 1023px) {
.portal__anchorlink02 nav a {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal__anchorlink02 nav a {
font-size: 1.4rem; } }
@media screen and (min-width: 640px) {
.portal__anchorlink02 nav a:hover {
background: #fff;
color: #eb0f30; }
.portal__anchorlink02 nav a:hover::after {
background-image: url('data:image/svg+xml;utf8,'); } }
.portal__anchorlink02 nav a::after {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
height: 14px;
width: 8px; }
.portal__pagetop {
border-radius: 100%;
bottom: 20px;
display: none;
height: 55px;
opacity: 0;
pointer-events: none;
position: fixed;
right: 20px;
width: 55px;
z-index: 100;
transition: all 200ms ease; }
@media screen and (max-width: 1023px) {
.portal__pagetop {
display: block flow; } }
@media screen and (max-width: 639px) {
.portal__pagetop {
bottom: 10px;
height: 35px;
right: 10px;
width: 35px; } }
.portal__pagetop[data-pagetop="show"] {
opacity: 1;
pointer-events: auto; }
.portal__pagetop a {
background-color: #eb0f30;
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: 16px auto;
border-radius: 100%;
content: "";
display: block flow;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: 0px;
height: 100%;
width: 100%; }
@media screen and (max-width: 639px) {
.portal__pagetop a {
background-size: 11px auto; } }
.portal__title {
box-sizing: border-box;
color: #fff;
font-size: 3.6rem;
font-weight: 700;
gap: 7px;
height: 160px;
line-height: 1.1em;
padding-bottom: 50px;
opacity: 0;
transform: translateY(15px);
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: end;
align-items: flex-end; }
.portal__title[data-scrollanimation="show"] {
opacity: 1;
transition: transform 500ms ease 0s, opacity 500ms ease 0s;
transform: translateY(0px); }
@media (max-width: 1279px) {
.portal__title {
font-size: 3.1rem; } }
@media screen and (max-width: 1023px) {
.portal__title {
font-size: 2rem;
gap: 3px;
height: 150px; } }
@media screen and (max-width: 639px) {
.portal__title {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 3px;
height: 120px;
padding-bottom: 43px; } }
.portal__title--ndirect {
width: 206px; }
@media screen and (max-width: 1023px) {
.portal__title--ndirect {
width: 164px; } }
@media screen and (max-width: 639px) {
.portal__title--ndirect {
width: 121px; } }
.portal__title em {
font-size: 1.333em;
font-weight: inherit;
margin-bottom: 6px; }
@media screen and (max-width: 1023px) {
.portal__title em {
font-size: 3.5rem; } }
@media screen and (max-width: 639px) {
.portal__title em {
font-size: 2.5rem;
margin-bottom: 3px; } }
.portal__title span {
font-size: 2.4rem;
font-weight: 700;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal__title span {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal__title span {
font-size: 1.6rem; } }
.portal__title:is(.utilization *) {
-ms-flex-line-pack: center;
align-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 211px;
padding-bottom: 0px; }
@media screen and (max-width: 1023px) {
.portal__title:is(.utilization *) {
height: 150px; } }
@media screen and (max-width: 639px) {
.portal__title:is(.utilization *) {
height: 120px; } }
@media screen and (max-width: 374px) {
.portal__title:is(.utilization *) {
height: 160px; } }
.portal__title:is(.utilization *) span {
margin-bottom: 7px;
text-align: center;
width: 100%; }
@media screen and (max-width: 639px) {
.portal__title:is(.utilization *) span {
margin-bottom: 0px; } }
@media screen and (max-width: 639px) {
.portal__title:is(.hearing *), .portal__title:is(.yourself *), .portal__title:is(.two-service *) {
-ms-flex-line-pack: center;
align-content: center;
padding-bottom: 0px;
grid-row-gap: 13px; } }
.portal__title:is(.yourself *) {
margin-inline: -25px; }
@media screen and (max-width: 1023px) {
.portal__title:is(.yourself *) {
margin-inline: 0px; } }
@media (max-width: 767px) {
.portal__title:is(.yourself *) {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: center;
align-content: center;
gap: 20px 0px;
padding-bottom: 0px; } }
@media screen and (max-width: 767px) and (max-width: 639px) {
.portal__title:is(.yourself *) {
gap: 13px 0px; } }
.portal__nav {
padding: 60px 0px 80px;
text-align: center; }
@media screen and (max-width: 1023px) {
.portal__nav {
padding-block: 40px; } }
@media screen and (max-width: 639px) {
.portal__nav {
padding-block: 30px; } }
.portal__nav[data-scrollanimation="show"] dt {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal__nav[data-scrollanimation="show"] dd {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal__nav[data-scrollanimation="show"] nav {
opacity: 1;
transition: transform 500ms ease 300ms, opacity 500ms ease 300ms;
transform: translateY(0px); }
.portal__nav dt {
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal__nav dt {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal__nav dt {
font-size: 1.6rem; } }
.portal__nav dd {
font-size: 4rem;
font-weight: 500;
gap: 10px;
line-height: 1.1;
margin-bottom: 40px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: end;
align-items: flex-end; }
@media screen and (max-width: 1023px) {
.portal__nav dd {
font-size: 2.2rem;
margin-bottom: 30px; } }
@media screen and (max-width: 639px) {
.portal__nav dd {
font-size: 2.5rem;
gap: 2px;
margin-bottom: 25px; } }
.portal__nav dd img {
margin-bottom: 2px;
width: 204px; }
@media screen and (max-width: 1023px) {
.portal__nav dd img {
width: 164px; } }
@media screen and (max-width: 639px) {
.portal__nav dd img {
margin-bottom: 0px;
width: 149px; } }
.portal__nav dd::after, .portal__nav dd::before {
border-color: #fabd00 transparent transparent transparent;
border-style: solid;
border-width: 65px 15px 0px 15px;
content: "";
display: inline-block;
height: 0;
width: 0; }
@media screen and (max-width: 1023px) {
.portal__nav dd::after, .portal__nav dd::before {
border-width: 47px 10px 0px 10px; } }
@media screen and (max-width: 639px) {
.portal__nav dd::after, .portal__nav dd::before {
content: none; } }
.portal__nav dd::before {
margin-right: 10px;
rotate: -30deg; }
.portal__nav dd::after {
rotate: 30deg; }
.portal__nav nav a {
background: #eb0f30;
border: 2px solid #eb0f30;
border-radius: 10px;
box-sizing: border-box;
color: #fff;
font-size: 3.2rem;
font-weight: 700;
gap: 10px;
height: 108px;
max-width: 518px;
text-decoration: none;
margin-inline: auto;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
transition: all 200ms ease; }
@media screen and (max-width: 1023px) {
.portal__nav nav a {
font-size: 1.8rem;
height: 70px;
width: 365px; } }
@media screen and (max-width: 639px) {
.portal__nav nav a {
border-radius: 14px;
display: block flow;
font-size: 2.2rem;
height: 102px;
padding: 20px 0px 0px 40px;
position: relative;
text-align: left;
width: 272px; } }
@media screen and (min-width: 640px) {
.portal__nav nav a:hover {
background: #fff;
color: #eb0f30; }
.portal__nav nav a:hover::after {
background-image: url('data:image/svg+xml;utf8,'); }
.portal__nav nav a:hover em {
background: #eb0f30;
color: #fff; } }
.portal__nav nav a em {
background: #fff;
border-radius: 5px;
color: #eb0f30;
height: 36px;
margin-right: 10px;
transition: all 200ms ease;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.5em;
padding-inline: 10px; }
@media screen and (max-width: 1023px) {
.portal__nav nav a em {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal__nav nav a em {
font-size: 2rem; } }
@media screen and (max-width: 1023px) {
.portal__nav nav a em {
font-weight: 500;
height: 30px; } }
@media screen and (max-width: 639px) {
.portal__nav nav a em {
font-weight: 700;
width: -moz-fit-content;
width: fit-content; } }
.portal__nav nav a::after {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
height: 23px;
margin-top: 5px;
width: 14px; }
@media screen and (max-width: 1023px) {
.portal__nav nav a::after {
background-image: url('data:image/svg+xml;utf8,');
height: 19px;
width: 13px; } }
@media screen and (max-width: 639px) {
.portal__nav nav a::after {
background-image: url('data:image/svg+xml;utf8,');
height: 15px;
margin: auto;
position: absolute;
width: 9px;
inset: 0px 31px 0px auto; } }
.portal__nav dt,
.portal__nav dd,
.portal__nav nav {
opacity: 0;
transform: translateY(15px); }
.portal .asset-support,
.portal .recommended-corner {
margin: 0px auto;
max-width: 1280px;
position: relative;
z-index: 1;
padding-block: 60px; }
@media screen and (max-width: 1023px) {
.portal .asset-support,
.portal .recommended-corner {
padding-block: 40px; } }
@media screen and (max-width: 639px) {
.portal .asset-support,
.portal .recommended-corner {
padding-block: 30px; } }
.portal .recommended-corner ul {
gap: 60px;
display: block flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: start;
align-items: flex-start; }
@media screen and (max-width: 1023px) {
.portal .recommended-corner ul {
gap: 30px; } }
@media screen and (max-width: 639px) {
.portal .recommended-corner ul {
-ms-flex-direction: column;
flex-direction: column;
gap: 25px; } }
.portal .recommended-corner ul li {
-ms-flex-preferred-size: calc((100% - 60px) * 0.5);
flex-basis: calc((100% - 60px) * 0.5); }
@media screen and (max-width: 1023px) {
.portal .recommended-corner ul li {
-ms-flex-preferred-size: calc((100% - 30px) * 0.5);
flex-basis: calc((100% - 30px) * 0.5); } }
@media screen and (max-width: 639px) {
.portal .recommended-corner ul li {
-ms-flex-preferred-size: auto;
flex-basis: auto; } }
.portal .recommended-corner ul a {
display: block flow;
text-decoration: none; }
@media screen and (min-width: 640px) {
.portal .recommended-corner ul a:hover img {
opacity: 0.5; } }
.portal .recommended-corner ul a img {
width: 100%; }
.portal .recommended-corner ul h3 {
margin-bottom: 30px; }
@media screen and (max-width: 1023px) {
.portal .recommended-corner ul h3 {
margin-bottom: 20px; } }
@media screen and (max-width: 639px) {
.portal .recommended-corner ul h3 {
margin-bottom: 15px; } }
.portal .recommended-corner ul h3 img {
border-radius: 14px;
transition: opacity 200ms ease; }
.portal .recommended-corner ul p {
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .recommended-corner ul p {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .recommended-corner ul p {
font-size: 1.4rem; } }
.portal .asset-support[data-scrollanimation="show"] h2,
.portal .recommended-corner[data-scrollanimation="show"] h2 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .asset-support[data-scrollanimation="show"] li,
.portal .recommended-corner[data-scrollanimation="show"] li {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .asset-support[data-scrollanimation="show"] li:nth-of-type(1),
.portal .recommended-corner[data-scrollanimation="show"] li:nth-of-type(1) {
transition-delay: 100ms; }
.portal .asset-support[data-scrollanimation="show"] li:nth-of-type(2),
.portal .recommended-corner[data-scrollanimation="show"] li:nth-of-type(2) {
transition-delay: 200ms; }
.portal .asset-support[data-scrollanimation="show"] li:nth-of-type(3),
.portal .recommended-corner[data-scrollanimation="show"] li:nth-of-type(3) {
transition-delay: 300ms; }
.portal .asset-support[data-scrollanimation="show"] li:nth-of-type(4),
.portal .recommended-corner[data-scrollanimation="show"] li:nth-of-type(4) {
transition-delay: 400ms; }
.portal .asset-support[data-scrollanimation="show"] li:nth-of-type(5),
.portal .recommended-corner[data-scrollanimation="show"] li:nth-of-type(5) {
transition-delay: 500ms; }
.portal .asset-support[data-scrollanimation="show"] li:nth-of-type(6),
.portal .recommended-corner[data-scrollanimation="show"] li:nth-of-type(6) {
transition-delay: 600ms; }
.portal .asset-support h2,
.portal .asset-support li,
.portal .recommended-corner h2,
.portal .recommended-corner li {
opacity: 0;
transform: translateY(15px); }
.portal .whatisndirect__point {
counter-reset: point;
margin-top: 60px;
margin-inline: -70px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point {
margin-top: 40px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point {
margin-top: 0px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point {
margin-inline: -30px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point {
margin-inline: -20px; } }
.portal .whatisndirect__point li {
-ms-flex-align: center;
align-items: center;
counter-increment: point;
display: block flex;
-ms-flex-pack: end;
justify-content: flex-end;
margin-bottom: 60px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point li {
margin-bottom: 40px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li {
display: block flow;
margin-bottom: 33px; } }
.portal .whatisndirect__point li div {
-ms-flex-positive: 10;
flex-grow: 10;
height: 293px;
position: relative; }
@media (max-width: 1279px) {
.portal .whatisndirect__point li div {
height: 206px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li div {
height: auto;
margin-bottom: 25px;
width: 100%; } }
.portal .whatisndirect__point li div::after {
content: "";
margin: auto;
position: absolute;
width: 24%;
inset-block: 0px; }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li div::after {
content: none; } }
.portal .whatisndirect__point li img {
height: 100%;
object-fit: cover;
width: 100%; }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li img {
height: auto; } }
.portal .whatisndirect__point li dl {
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
width: 430px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point li dl {
width: 280px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li dl {
width: auto;
padding-inline: 20px; } }
.portal .whatisndirect__point li dl dt {
margin-bottom: -6px;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point li dl dt {
margin-bottom: 0px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point li dl dt {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li dl dt {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li dl dt {
margin-bottom: -2px; } }
.portal .whatisndirect__point li dl dt::before {
content: "Point " counter(point);
margin-bottom: 10px;
-ms-flex-align: center;
align-items: center;
border: 1px solid #0F81EB;
border-radius: 999px;
color: #0F81EB;
display: block flex;
font-family: Jost, sans-serif;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 1.1;
min-height: 23px;
vertical-align: top;
width: -moz-fit-content;
width: fit-content;
font-optical-sizing: auto;
padding-inline: 5px; }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li dl dt::before {
margin-bottom: 4px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point li dl dt::before {
font-size: 1.2rem; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li dl dt::before {
font-size: 1rem;
min-height: 15px;
padding-inline: 4px; } }
.portal .whatisndirect__point li dl dd {
background: linear-gradient(currentcolor, currentcolor) right bottom no-repeat;
background-size: 100% 4px;
color: #eb0f30;
display: inline flow;
font-size: 4rem;
font-weight: 500;
line-height: 1.8em;
padding-bottom: 2px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point li dl dd {
background-size: 100% 3px;
font-size: 2.8rem;
line-height: 1.7em;
padding-bottom: 4px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point li dl dd {
background-size: 100% 2px;
font-size: 2rem;
padding-bottom: 1px; } }
.portal .whatisndirect__point--01 {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
gap: 30px;
padding-left: 11.12%; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point--01 {
padding-left: 64px; } }
@media (max-width: 1279px) {
.portal .whatisndirect__point--01 {
gap: 30px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point--01 {
gap: 10px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point--01 {
padding: 0px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point--01 div {
margin-left: -45px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point--01 div {
margin-left: 0px; } }
.portal .whatisndirect__point--01 div::after {
background: linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%);
left: 0px; }
.portal .whatisndirect__point--02 {
gap: 88px;
padding-right: 100px; }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point--02 {
padding: 0px; } }
@media (max-width: 1279px) {
.portal .whatisndirect__point--02 {
gap: 30px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point--02 {
gap: 10px; } }
.portal .whatisndirect__point--02 div::after {
background: linear-gradient(to left, #fff 0%, rgb(255 255 255 / 0) 100%);
right: 0px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__point--02 dl {
padding-left: 40px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__point--02 dl {
padding-left: 0px; } }
.portal .whatisndirect__movie {
background: #FFEEF1;
text-align: center;
padding-block: 40px 80px;
margin-inline: -70px;
padding-inline: 70px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie {
padding-bottom: 60px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie {
margin-inline: -30px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie {
margin-inline: -20px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie {
padding-inline: 30px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie {
padding-inline: 20px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie {
padding: 30px 0px; } }
.portal .whatisndirect__movie h3 {
gap: 5px;
margin-bottom: 37px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: end;
align-items: flex-end;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.2; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie h3 {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie h3 {
font-size: 1.2rem; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie h3 {
margin-bottom: 32px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie h3 {
margin-bottom: 16px; } }
.portal .whatisndirect__movie h3 strong {
font-size: 4rem;
font-weight: inherit; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie h3 strong {
font-size: 3rem; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie h3 strong {
font-size: 2rem; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie h3 img {
width: 105px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie h3 img {
width: 66px; } }
.portal .whatisndirect__movie h3::before {
background: url(/portal/imgV2/whatisndirect_03.webp) no-repeat center;
background-size: contain;
content: "";
height: 82px;
margin: 0px 10px -17px 0px;
width: 70px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie h3::before {
height: 65px;
margin: 0px 10px -12px 0px;
width: 55px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie h3::before {
height: 45px;
margin: 0px 5px -6px 0px;
width: 35px; } }
.portal .whatisndirect__movie div {
max-width: 860px;
position: relative;
margin-inline: auto; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie div {
max-width: 628px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie div {
max-width: 320px; } }
.portal .whatisndirect__movie div a {
background: #eb0f30;
border: 1px solid #eb0f30;
border-radius: 100%;
color: #fff;
cursor: pointer;
-ms-flex-direction: column;
flex-direction: column;
font-family: Jost, sans-serif;
font-size: 1.4rem;
gap: 10px;
height: 147px;
position: absolute;
text-decoration: none;
width: 147px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
inset: auto -53px -27px auto; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie div a {
font-size: 1.2rem;
height: 108px;
width: 108px;
inset: auto -12px -22px auto; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie div a {
font-size: 1rem;
gap: 3px;
height: 74px;
width: 74px;
inset: auto -7px -11px auto; } }
@media screen and (min-width: 640px) {
.portal .whatisndirect__movie div a:hover {
background: #fff;
color: #eb0f30; } }
.portal .whatisndirect__movie div a::before {
border-color: transparent transparent transparent currentColor;
border-style: solid;
border-width: 25px 0px 25px 44px;
content: "";
display: inline flow-root;
height: 0;
margin-left: 13px;
width: 0; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__movie div a::before {
border-width: 20px 0px 20px 34px;
margin-left: 10px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie div a::before {
border-width: 12px 0px 12px 20px;
margin-left: 5px; } }
.portal .whatisndirect__movie div img {
width: 100%;
border-radius: 10px; }
@media screen and (max-width: 639px) {
.portal .whatisndirect__movie div img {
border-radius: 5px; } }
.portal .whatisndirect__solution__header {
position: relative;
margin-inline: -70px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__header {
margin-inline: -30px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__header {
margin-inline: -20px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__header {
padding-top: 30px; } }
.portal .whatisndirect__solution__header p {
background: #9cc9f2;
border-radius: 10px;
box-sizing: border-box;
gap: 20px;
min-height: 76px;
padding: 20px 30px;
position: absolute;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__header p {
gap: 10px;
padding: 15px 20px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__header p {
gap: 20px;
position: relative;
width: -moz-fit-content;
width: fit-content; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__header p {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__header p {
font-size: 1.6rem; } }
.portal .whatisndirect__solution__header p br {
display: none; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__header p br {
display: block; } }
.portal .whatisndirect__solution__header p::after {
border-color: #9cc9f2 transparent transparent transparent;
border-style: solid;
border-width: 22px 12.5px 0px 12.5px;
content: "";
display: inline-block;
height: 0;
position: absolute;
top: 100%;
width: 0; }
.portal .whatisndirect__solution__header p::before {
background: url(/portal/imgV2/whatisndirect_06.svg) no-repeat center;
background-size: contain;
content: "";
height: 36px;
width: 23px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__header p::before {
height: 23px;
width: 15px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__header p::before {
height: 24px;
width: 16px; } }
.portal .whatisndirect__solution__header p:nth-of-type(1) {
left: 8.8%;
top: 25.1%; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__header p:nth-of-type(1) {
left: 50px;
top: 25px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__header p:nth-of-type(1) {
left: 32.5px;
margin-bottom: 37px;
top: 0px; } }
.portal .whatisndirect__solution__header p:nth-of-type(1)::after {
left: 30px; }
.portal .whatisndirect__solution__header p:nth-of-type(2) {
left: 21.7%;
top: 54.9%; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__header p:nth-of-type(2) {
left: 190px;
top: 125px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__header p:nth-of-type(2) {
left: 86px;
margin-bottom: 32px;
top: 0px; } }
.portal .whatisndirect__solution__header p:nth-of-type(2)::after {
right: 30px; }
.portal .whatisndirect__solution__header img {
width: 100%; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__header img {
height: 250px;
object-fit: cover; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__header img {
height: auto; } }
.portal .whatisndirect__solution__body {
text-align: center;
padding-block: 80px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__body {
padding-block: 40px; } }
.portal .whatisndirect__solution__body p {
margin-bottom: 5px;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__body p {
margin-bottom: 10px; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__body p {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__body p {
font-size: 1.4rem; } }
.portal .whatisndirect__solution__body dt {
font-size: 4rem;
font-weight: 500;
gap: 10px;
line-height: 1.1;
margin: 0px auto 40px;
width: -moz-fit-content;
width: fit-content;
box-sizing: border-box;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: end;
align-items: flex-end; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__body dt {
font-size: 2.2rem;
margin-bottom: 30px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__body dt {
display: block flow;
font-size: 2rem;
line-height: 1.6;
margin-bottom: 25px; }
.portal .whatisndirect__solution__body dt:first-line {
font-size: 2.5rem; } }
.portal .whatisndirect__solution__body dt > span {
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: end;
align-items: flex-end;
gap: 5px; }
@media (max-width: 1200px) {
.portal .whatisndirect__solution__body dt > span {
text-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column; } }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__body dt > span {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: end;
align-items: flex-end; } }
@media (max-width: 680px) {
.portal .whatisndirect__solution__body dt > span {
text-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__body dt > span {
gap: 0px; } }
.portal .whatisndirect__solution__body dt > span span {
white-space: nowrap; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__body dt > span span {
white-space: normal; } }
.portal .whatisndirect__solution__body dt span {
font-weight: inherit; }
.portal .whatisndirect__solution__body dt img {
width: 204px;
margin: 0px 10px 2px; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__body dt img {
width: 163px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__body dt img {
margin-inline: 0px 10px;
vertical-align: -5px;
width: 146px; } }
.portal .whatisndirect__solution__body dt::after, .portal .whatisndirect__solution__body dt::before {
border-color: #fabd00 transparent transparent transparent;
border-style: solid;
border-width: 65px 15px 0px 15px;
content: "";
display: inline-block;
height: 0;
width: 0; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__body dt::after, .portal .whatisndirect__solution__body dt::before {
border-width: 47px 10px 0px 10px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__body dt::after, .portal .whatisndirect__solution__body dt::before {
content: none; } }
.portal .whatisndirect__solution__body dt::before {
left: 0px;
rotate: -30deg; }
.portal .whatisndirect__solution__body dt::after {
right: 0px;
rotate: 30deg; }
.portal .whatisndirect__solution__body nav a {
background: #eb0f30;
border: 2px solid #eb0f30;
border-radius: 10px;
box-sizing: border-box;
color: #fff;
font-size: 3.2rem;
font-weight: 700;
height: 108px;
max-width: 518px;
text-decoration: none;
margin-inline: auto;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
transition: all 200ms ease; }
@media screen and (max-width: 1023px) {
.portal .whatisndirect__solution__body nav a {
font-size: 1.8rem;
height: 64px;
width: 335px; } }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__body nav a {
border-radius: 14px;
font-size: 2.2rem;
gap: 5px;
height: 106px;
text-align: left;
width: 257px; } }
@media screen and (min-width: 640px) {
.portal .whatisndirect__solution__body nav a:hover {
background: #fff;
color: #eb0f30; }
.portal .whatisndirect__solution__body nav a:hover::after {
background-image: url('data:image/svg+xml;utf8,'); } }
.portal .whatisndirect__solution__body nav a::after {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
height: 12px;
margin-left: 5px;
width: 25px; }
@media screen and (max-width: 639px) {
.portal .whatisndirect__solution__body nav a::after {
background-image: url('data:image/svg+xml;utf8,'); } }
.portal .whatisndirect__point li[data-scrollanimation="show"] dl {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .whatisndirect__point li[data-scrollanimation="show"] div {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .whatisndirect__point li dl {
opacity: 0;
transform: translateY(15px); }
.portal .whatisndirect__point li div {
opacity: 0; }
.portal .whatisndirect__movie[data-scrollanimation="show"] h3 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .whatisndirect__movie[data-scrollanimation="show"] div {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .whatisndirect__movie h3,
.portal .whatisndirect__movie div {
opacity: 0;
transform: translateY(15px); }
.portal .whatisndirect__solution__header[data-scrollanimation="show"] p {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .whatisndirect__solution__header[data-scrollanimation="show"] p:nth-of-type(2) {
transition-delay: 150ms; }
.portal .whatisndirect__solution__header p {
opacity: 0;
transform: translateY(15px); }
.portal .whatisndirect__solution__body[data-scrollanimation="show"] p {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .whatisndirect__solution__body[data-scrollanimation="show"] dt {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .whatisndirect__solution__body[data-scrollanimation="show"] dd {
opacity: 1;
transition: transform 500ms ease 300ms, opacity 500ms ease 300ms;
transform: translateY(0px); }
.portal .whatisndirect__solution__body dt,
.portal .whatisndirect__solution__body dd,
.portal .whatisndirect__solution__body p {
opacity: 0;
transform: translateY(15px); }
.portal .hearing__question {
height: 397px;
margin-bottom: 60px;
position: relative;
margin-inline: -70px; }
@media screen and (max-width: 1023px) {
.portal .hearing__question {
height: 210px;
margin-bottom: 40px; } }
@media screen and (max-width: 639px) {
.portal .hearing__question {
height: auto;
margin-bottom: 30px;
padding-top: 30px; } }
@media screen and (max-width: 1023px) {
.portal .hearing__question {
margin-inline: -30px; } }
@media screen and (max-width: 639px) {
.portal .hearing__question {
margin-inline: -20px; } }
.portal .hearing__question::after {
background: url(/portal/imgV2/hearing_01.webp) no-repeat 50% center;
background-size: cover;
content: "";
height: 100%;
left: 0px;
margin: auto;
position: absolute;
right: min(-50px,calc((1800px - 100vw) * 0.5)); /*250128修正*/
top: 0%;
z-index: -1; }
@media screen and (max-width: 1023px) {
.portal .hearing__question::after {
right: -20px; } }
@media screen and (max-width: 639px) {
.portal .hearing__question::after {
background: url(/portal/imgV2/hearing_01_sp.webp) no-repeat left center;
background-size: cover;
display: block;
height: auto;
position: static;
width: 100%;
aspect-ratio: 73 / 43; } }
.portal .hearing__question p {
background: #9cc9f2;
border-radius: 10px;
box-sizing: border-box;
gap: 20px;
min-height: 76px;
padding: 20px 30px;
position: absolute;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 639px) {
.portal .hearing__question p {
position: relative; } }
@media screen and (max-width: 1023px) {
.portal .hearing__question p {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .hearing__question p {
font-size: 1.6rem; } }
@media screen and (max-width: 1023px) {
.portal .hearing__question p {
gap: 10px;
min-height: 54px;
padding: 15px 20px; } }
@media screen and (max-width: 639px) {
.portal .hearing__question p {
gap: 20px;
position: relative;
width: -moz-fit-content;
width: fit-content; } }
.portal .hearing__question p::after {
border-color: #9cc9f2 transparent transparent transparent;
border-style: solid;
border-width: 22px 12.5px 0px 12.5px;
content: "";
display: inline-block;
height: 0;
position: absolute;
top: 100%;
width: 0; }
.portal .hearing__question p::before {
background: url(/portal/imgV2/whatisndirect_06.svg) no-repeat center;
background-size: contain;
content: "";
height: 36px;
width: 23px; }
@media screen and (max-width: 1023px) {
.portal .hearing__question p::before {
height: 23px;
width: 15px; } }
@media screen and (max-width: 639px) {
.portal .hearing__question p::before {
height: 24px;
width: 16px; } }
.portal .hearing__question p:nth-of-type(1) {
left: 9.31507%;
top: 15.39043%; }
@media screen and (max-width: 1023px) {
.portal .hearing__question p:nth-of-type(1) {
left: 33px;
top: 22px; } }
@media screen and (max-width: 639px) {
.portal .hearing__question p:nth-of-type(1) {
left: 20px;
margin-bottom: 27px;
top: 0px; } }
.portal .hearing__question p:nth-of-type(1)::after {
left: 30px; }
.portal .hearing__question p:nth-of-type(2) {
left: 41.81507%;
top: 33.19899%; }
@media screen and (max-width: 1023px) {
.portal .hearing__question p:nth-of-type(2) {
left: 300px;
top: 40px; } }
@media screen and (max-width: 639px) {
.portal .hearing__question p:nth-of-type(2) {
left: 93px;
margin-bottom: 27px;
top: 0px; } }
.portal .hearing__question p:nth-of-type(2)::after {
right: 30px; }
.portal .hearing__question p:nth-of-type(3) {
left: 20.17123%;
top: 64.10579%; }
@media screen and (max-width: 1023px) {
.portal .hearing__question p:nth-of-type(3) {
left: 149px;
top: 108px; } }
@media screen and (max-width: 639px) {
.portal .hearing__question p:nth-of-type(3) {
left: 20px;
margin-bottom: 32px;
top: 0px; } }
.portal .hearing__question p:nth-of-type(3)::after {
left: 30px; }
.portal .hearing__question img {
width: 100%; }
.portal .hearing__check {
counter-reset: check; }
@media screen and (max-width: 639px) {
.portal .hearing__check {
margin-bottom: 10px; } }
.portal .hearing__check h3 {
margin-bottom: 30px;
text-align: center;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .hearing__check h3 {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .hearing__check h3 {
font-size: 1.6rem; } }
@media screen and (max-width: 1023px) {
.portal .hearing__check h3 {
margin-bottom: 20px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check h3 {
gap: 5px;
margin-bottom: 30px; } }
.portal .hearing__check h3::after, .portal .hearing__check h3::before {
background: url(/portal/imgV2/utilization_04.svg) no-repeat center;
background-size: contain;
content: "";
height: 50px;
width: 50px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check h3::after, .portal .hearing__check h3::before {
height: 40px;
width: 40px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check h3::after, .portal .hearing__check h3::before {
height: 32.5px;
width: 32.5px; } }
.portal .hearing__check h4 {
border-bottom: 1px solid #fff;
font-size: 2.8rem;
font-weight: 500;
gap: 20px;
line-height: 1.5em;
margin-bottom: 40px;
padding-bottom: 40px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .hearing__check h4 {
font-size: 1.8rem;
margin-bottom: 20px;
padding-bottom: 20px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check h4 {
font-feature-settings: "palt";
font-size: 1.6rem;
gap: 10px;
letter-spacing: 1px; } }
.portal .hearing__check h4::before {
background: #eb0f30;
border-radius: 5px;
box-sizing: border-box;
color: #fff;
content: counter(check);
font-size: 3rem;
font-weight: inherit;
height: 38px;
padding-bottom: 2px;
width: 38px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .hearing__check h4::before {
font-size: 2rem;
height: 30px;
width: 30px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check h4::before {
font-size: 2rem;
height: 28px;
width: 28px; } }
.portal .hearing__check dl {
margin-bottom: 45px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check dl {
margin-bottom: 37px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check dl {
margin-bottom: 22px; } }
.portal .hearing__check dl dt {
margin-bottom: -3px;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .hearing__check dl dt {
margin-bottom: -4px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check dl dt {
margin-bottom: -2px; } }
@media screen and (max-width: 1023px) {
.portal .hearing__check dl dt {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .hearing__check dl dt {
font-size: 1.6rem; } }
.portal .hearing__check dl dd {
background: linear-gradient(#fabd00, #fabd00) right bottom no-repeat;
background-size: 100% 5px;
color: #eb0f30;
display: inline flow;
font-size: 40px;
font-weight: 500;
line-height: 1.85em;
padding-bottom: 7px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check dl dd {
background-size: 100% 3px;
font-size: 2.2rem;
padding-bottom: 5px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check dl dd {
background-size: 100% 2px;
font-feature-settings: "palt";
font-size: 2.5rem;
letter-spacing: 1px;
line-height: 1.65em;
padding-bottom: 1px; } }
.portal .hearing__check ul li {
gap: 20px;
margin-bottom: 20px;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em;
display: block flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .hearing__check ul li {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .hearing__check ul li {
font-size: 1.4rem; } }
@media screen and (max-width: 1023px) {
.portal .hearing__check ul li {
font-weight: 400;
gap: 15px;
margin-bottom: 15px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check ul li {
gap: 10px;
margin-bottom: 10px; } }
.portal .hearing__check ul li::before {
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
height: 36px;
width: 36px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check ul li::before {
height: 30px;
width: 30px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check ul li::before {
height: 20px;
width: 20px; } }
.portal .hearing__check > div {
background: #f0f0f0;
counter-increment: check;
margin-bottom: 50px;
padding: 40px 40px 50px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check > div {
margin-bottom: 20px;
padding: 30px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check > div {
margin-bottom: 15px;
padding: 30px 25px; } }
.portal .hearing__check__01 {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
gap: 60px;
display: block flex;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__01 {
gap: 50px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__01 {
display: block flow; } }
.portal .hearing__check__01 figure {
-ms-flex-preferred-size: 583px;
flex-basis: 583px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__01 figure {
-ms-flex-preferred-size: 330px;
flex-basis: 330px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__01 div {
margin-bottom: 25px; } }
.portal .hearing__check__01 li:nth-of-type(1)::before {
background: url(/portal/imgV2/hearing_03.svg) no-repeat left top;
background-size: contain; }
.portal .hearing__check__01 li:nth-of-type(2)::before {
background: url(/portal/imgV2/hearing_04.svg) no-repeat left top;
background-size: contain; }
.portal .hearing__check__02 {
gap: 35px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__02 {
gap: 5px;
-ms-flex-pack: space-evenly;
justify-content: space-evenly; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__02 {
display: block flow; } }
.portal .hearing__check__02 figure {
-ms-flex-preferred-size: 551px;
flex-basis: 551px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__02 figure {
-ms-flex-preferred-size: 320px;
flex-basis: 320px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__02 div {
margin-bottom: 25px; } }
.portal .hearing__check__02 li:nth-of-type(1)::before {
background: url(/portal/imgV2/hearing_06.svg) no-repeat left top;
background-size: contain; }
.portal .hearing__check__02 li:nth-of-type(2)::before {
background: url(/portal/imgV2/hearing_07.svg) no-repeat left top;
background-size: contain; }
.portal .hearing__check__03 {
margin: 0px auto;
max-width: 1120px; }
.portal .hearing__check__03 dl {
margin-bottom: 0px;
margin-left: 10px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__03 dl {
margin-left: 15px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__03 dl {
margin-left: 0px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__03 dl {
margin-bottom: 5px; } }
.portal .hearing__check__03 figure {
margin-inline: -40px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__03 figure {
margin-inline: -30px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__03 figure {
margin-inline: -15px; } }
.portal .hearing__check__03 a {
display: block flow;
position: relative;
text-decoration: none;
transition: opacity 200ms ease; }
@media screen and (min-width: 640px) {
.portal .hearing__check__03 a:hover {
text-decoration: none;
opacity: 0.5; } }
.portal .hearing__check__03 a:hover img {
opacity: 1; }
.portal .hearing__check__03 a img:hover {
opacity: 1; }
.portal .hearing__check__03 a::after {
background: url(/portal/imgV2/icon_zoom.svg) no-repeat center;
background-size: contain;
content: "";
display: block flow;
height: 44px;
position: absolute;
width: 38px;
inset: auto 55px -10px auto; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__03 a::after {
height: 34px;
width: 28px;
inset: auto 50px -5px auto; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__03 a::after {
height: 27.2px;
width: 22.4px;
inset: auto 20px -20px auto; } }
.portal .hearing__check__04 {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
gap: 30px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__04 {
gap: 5px;
-ms-flex-pack: space-evenly;
justify-content: space-evenly; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__04 {
display: block flow; } }
.portal .hearing__check__04 figure {
-ms-flex-preferred-size: 569px;
flex-basis: 569px; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__04 figure {
-ms-flex-preferred-size: 320px;
flex-basis: 320px;
margin-left: -10px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__04 figure {
margin-left: 0px; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__04 div {
margin-bottom: 25px; } }
.portal .hearing__check__04 li:nth-of-type(1)::before {
background: #eb0f30; }
.portal .hearing__check__04 li:nth-of-type(2)::before {
background: #ff6e80; }
.portal .hearing__check__04 li:nth-of-type(3)::before {
background: #51abe2; }
.portal .hearing__check__caption {
color: #6b6b6b;
margin-left: 1em;
margin-top: -20px;
text-indent: -1em;
font-weight: 400;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .hearing__check__caption {
margin-top: 30px; } }
@media screen and (max-width: 1023px) {
.portal .hearing__check__caption {
font-size: 1.4rem; } }
@media screen and (max-width: 639px) {
.portal .hearing__check__caption {
font-size: 1.2rem; } }
.portal .hearing__question[data-scrollanimation="show"] p {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .hearing__question[data-scrollanimation="show"] p:nth-of-type(2) {
transition-delay: 150ms; }
.portal .hearing__question[data-scrollanimation="show"] p:nth-of-type(3) {
transition-delay: 300ms; }
.portal .hearing__question p {
opacity: 0;
transform: translateY(15px); }
.portal .hearing__check[data-scrollanimation="show"] h3 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .hearing__check h3 {
opacity: 0;
transform: translateY(15px); }
.portal .hearing__check > div[data-scrollanimation="show"] h4 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .hearing__check > div[data-scrollanimation="show"] > div {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .hearing__check > div h4,
.portal .hearing__check > div > div {
opacity: 0;
transform: translateY(15px); }
.portal .hearing__check__caption {
opacity: 0;
transform: translateY(15px); }
.portal .hearing__check__caption[data-scrollanimation="show"] {
opacity: 1;
transition: transform 500ms ease 0s, opacity 500ms ease 0s;
transform: translateY(0px); }
.portal .two-service__body {
counter-reset: service;
position: relative;
padding-block: 40px;
margin-inline: -70px;
padding-inline: 70px; }
@media screen and (max-width: 1023px) {
.portal .two-service__body {
margin-inline: -30px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body {
margin-inline: -20px; } }
@media screen and (max-width: 1023px) {
.portal .two-service__body {
padding-inline: 30px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body {
padding-inline: 20px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body {
padding-block: 30px; } }
.portal .two-service__body::before {
background: #FFEEF1;
content: "";
margin: auto;
position: absolute;
z-index: -1;
inset: 0px 0% 0px -50%; }
.portal .two-service__body::after {
background: url(/portal/imgV2/two-service_03.svg) no-repeat center;
background-size: contain;
content: "";
height: 108px;
margin: auto;
position: absolute;
width: 108px;
inset: 0px; }
@media screen and (max-width: 1023px) {
.portal .two-service__body::after {
height: 78px;
width: 78px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body::after {
content: none; } }
.portal .two-service__body div {
counter-increment: service;
gap: 80px;
max-width: 970px;
margin-inline: auto;
display: block flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .two-service__body div {
gap: 30px;
max-width: 563px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body div {
display: block flow; } }
.portal .two-service__body div figure {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 290px; }
@media screen and (max-width: 1023px) {
.portal .two-service__body div figure {
width: 170px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body div figure {
margin: 0px auto;
width: 185px; } }
.portal .two-service__body div figure img {
width: 100%; }
.portal .two-service__body div dl {
background: #fff;
border-radius: 10px;
box-sizing: border-box;
-ms-flex-positive: 10;
flex-grow: 10;
padding: 30px;
text-align: center; }
@media screen and (max-width: 1023px) {
.portal .two-service__body div dl {
padding-inline: 20px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body div dl {
margin-bottom: 20px;
padding-block: 20px; } }
.portal .two-service__body div dl dt {
font-size: 4rem;
font-weight: 500;
gap: 20px;
line-height: 1.5em;
margin-bottom: 15px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .two-service__body div dl dt {
font-size: 3rem;
gap: 15px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body div dl dt {
font-size: 2.5rem;
gap: 10px;
margin-bottom: 20px; } }
.portal .two-service__body div dl dt::before {
background: #eb0f30;
border-radius: 6px;
box-sizing: border-box;
color: #fff;
content: counter(service);
font-size: 3rem;
font-weight: 500;
height: 43px;
line-height: 1em;
padding-bottom: 3px;
width: 43px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .two-service__body div dl dt::before {
font-size: 2.5rem;
height: 36px;
width: 36px; } }
@media screen and (max-width: 1023px) {
.portal .two-service__body div dl dt img {
width: 45px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body div dl dt img {
width: 38px; } }
.portal .two-service__body div dl dd {
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
.portal .two-service__body div dl li {
gap: 20px;
margin-bottom: 5px;
text-align: left;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.5em;
display: block flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .two-service__body div dl li {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .two-service__body div dl li {
font-size: 1.6rem; } }
@media screen and (max-width: 1023px) {
.portal .two-service__body div dl li {
font-weight: 500;
gap: 15px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body div dl li {
margin-top: 15px; } }
.portal .two-service__body div dl li::before {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
height: 18px;
width: 21px; }
.portal .two-service__body--01::after {
background: url(/portal/imgV2/two-service_03.svg) no-repeat center;
background-size: contain;
display: block flow;
height: 82px;
margin: 40px auto;
width: 82px; }
@media screen and (max-width: 639px) {
.portal .two-service__body--01::after {
content: ""; } }
.portal .two-service__body--02 {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
margin-top: -45px; }
@media screen and (max-width: 1023px) {
.portal .two-service__body--02 {
margin-top: 33px; } }
@media screen and (max-width: 639px) {
.portal .two-service__body--02 {
margin-top: 0px; } }
.portal .two-service__body::after {
opacity: 0; }
.portal .two-service__body[data-scrollanimation="show"]::after {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .two-service__body--01 dl,
.portal .two-service__body--01 figure, .portal .two-service__body--02 dl,
.portal .two-service__body--02 figure {
opacity: 0;
transform: translateY(15px); }
.portal .two-service__body--01[data-scrollanimation="show"] dl, .portal .two-service__body--02[data-scrollanimation="show"] dl {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .two-service__body--01[data-scrollanimation="show"] figure, .portal .two-service__body--02[data-scrollanimation="show"] figure {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .yourself__ranking {
background: #f0f0f0;
padding: 40px 50px;
margin-block: 60px 80px; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking {
padding: 40px 30px;
margin-block: 40px 60px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking {
border-radius: 10px;
margin: 30px 5px;
padding: 30px 20px; } }
.portal .yourself__ranking h3 {
font-size: 3.2rem;
font-weight: 500;
gap: 30px;
line-height: 1.2em;
margin-bottom: 40px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking h3 {
font-size: 2.6rem;
margin-bottom: 30px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking h3 {
font-size: 1.8rem;
gap: 10px;
margin-bottom: 20px; } }
.portal .yourself__ranking h3::after, .portal .yourself__ranking h3::before {
background: url(/portal/imgV2/yourself_01.svg) no-repeat center;
background-size: contain;
content: "";
height: 51px;
width: 63px; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking h3::after, .portal .yourself__ranking h3::before {
height: 40px;
width: 50px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking h3::after, .portal .yourself__ranking h3::before {
height: 33px;
width: 40px; } }
.portal .yourself__ranking p {
color: #6b6b6b;
text-align: right;
font-weight: 400;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking p {
font-size: 1.4rem; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking p {
font-size: 1.2rem; } }
.portal .yourself__ranking ol {
counter-reset: ranking;
margin-bottom: 40px;
max-width: 1080px;
margin-inline: auto; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking ol {
margin-bottom: 20px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking ol {
margin-bottom: 15px; } }
.portal .yourself__ranking li {
counter-increment: ranking;
margin-bottom: 30px; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li {
margin-bottom: 20px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li {
margin-bottom: 15px; } }
.portal .yourself__ranking li:nth-of-type(1) a, .portal .yourself__ranking li:nth-of-type(2) a, .portal .yourself__ranking li:nth-of-type(3) a {
color: #fff;
min-height: 100px;
padding: 13px 60px 13px 120px;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li:nth-of-type(1) a, .portal .yourself__ranking li:nth-of-type(2) a, .portal .yourself__ranking li:nth-of-type(3) a {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(1) a, .portal .yourself__ranking li:nth-of-type(2) a, .portal .yourself__ranking li:nth-of-type(3) a {
font-size: 1.6rem; } }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li:nth-of-type(1) a, .portal .yourself__ranking li:nth-of-type(2) a, .portal .yourself__ranking li:nth-of-type(3) a {
font-weight: 500;
line-height: 1.75em;
padding: 20px 128px 20px 120px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(1) a, .portal .yourself__ranking li:nth-of-type(2) a, .portal .yourself__ranking li:nth-of-type(3) a {
font-weight: 700;
line-height: 1.5em;
gap: 5px 0px;
min-height: 120px;
padding: 10px 30px 10px 52px; } }
.portal .yourself__ranking li:nth-of-type(1) a::before, .portal .yourself__ranking li:nth-of-type(2) a::before, .portal .yourself__ranking li:nth-of-type(3) a::before {
font-size: 3.2rem;
padding-top: 7px; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li:nth-of-type(1) a::before, .portal .yourself__ranking li:nth-of-type(2) a::before, .portal .yourself__ranking li:nth-of-type(3) a::before {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(1) a::before, .portal .yourself__ranking li:nth-of-type(2) a::before, .portal .yourself__ranking li:nth-of-type(3) a::before {
font-size: 1.1rem;
padding-top: 4px; } }
.portal .yourself__ranking li:nth-of-type(1) a::after, .portal .yourself__ranking li:nth-of-type(2) a::after, .portal .yourself__ranking li:nth-of-type(3) a::after {
background-image: url('data:image/svg+xml;utf8,'); }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(1) a::after, .portal .yourself__ranking li:nth-of-type(2) a::after, .portal .yourself__ranking li:nth-of-type(3) a::after {
background-image: url('data:image/svg+xml;utf8,'); } }
.portal .yourself__ranking li:nth-of-type(1) a strong, .portal .yourself__ranking li:nth-of-type(2) a strong, .portal .yourself__ranking li:nth-of-type(3) a strong {
border-bottom: 3px solid currentColor; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li:nth-of-type(1) a strong, .portal .yourself__ranking li:nth-of-type(2) a strong, .portal .yourself__ranking li:nth-of-type(3) a strong {
padding-bottom: 1px;
border-bottom-width: 2px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(1) a strong, .portal .yourself__ranking li:nth-of-type(2) a strong, .portal .yourself__ranking li:nth-of-type(3) a strong {
padding-bottom: 0px; } }
.portal .yourself__ranking li:nth-of-type(1) a {
background: #f1b600; }
.portal .yourself__ranking li:nth-of-type(1) a::before {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat; }
.portal .yourself__ranking li:nth-of-type(2) a {
background: #77aede; }
.portal .yourself__ranking li:nth-of-type(2) a::before {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat; }
.portal .yourself__ranking li:nth-of-type(3) a {
background: #ec6a06; }
.portal .yourself__ranking li:nth-of-type(3) a::before {
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat; }
.portal .yourself__ranking li:nth-of-type(4) a, .portal .yourself__ranking li:nth-of-type(5) a {
background: #fff;
min-height: 94px;
padding: 10px;
padding: 10px 60px 10px 120px;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li:nth-of-type(4) a, .portal .yourself__ranking li:nth-of-type(5) a {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(4) a, .portal .yourself__ranking li:nth-of-type(5) a {
font-size: 1.6rem; } }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li:nth-of-type(4) a, .portal .yourself__ranking li:nth-of-type(5) a {
line-height: 1.75em;
padding: 19px 128px 19px 120px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(4) a, .portal .yourself__ranking li:nth-of-type(5) a {
line-height: 1.5em;
gap: 5px 0px;
min-height: 120px;
padding: 10px 30px 10px 52px; } }
.portal .yourself__ranking li:nth-of-type(4) a::before, .portal .yourself__ranking li:nth-of-type(5) a::before {
background: #969292;
font-size: 3.6rem;
padding-bottom: 3px; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li:nth-of-type(4) a::before, .portal .yourself__ranking li:nth-of-type(5) a::before {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(4) a::before, .portal .yourself__ranking li:nth-of-type(5) a::before {
font-size: 1.4rem; } }
.portal .yourself__ranking li:nth-of-type(4) a strong, .portal .yourself__ranking li:nth-of-type(5) a strong {
border-bottom: 3px solid #eb0f30; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li:nth-of-type(4) a strong, .portal .yourself__ranking li:nth-of-type(5) a strong {
padding-bottom: 1px;
border-bottom-width: 2px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li:nth-of-type(4) a strong, .portal .yourself__ranking li:nth-of-type(5) a strong {
padding-bottom: 0px; } }
.portal .yourself__ranking li:nth-of-type(4) a::after, .portal .yourself__ranking li:nth-of-type(5) a::after {
background-image: url('data:image/svg+xml;utf8,'); }
.portal .yourself__ranking li a {
-ms-flex-line-pack: center;
align-content: center;
border-radius: 10px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
text-align: left;
text-decoration: none;
transition: opacity 200ms ease;
display: block flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center; }
@media screen and (min-width: 640px) {
.portal .yourself__ranking li a:hover {
text-decoration: none;
opacity: 0.5; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li a {
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center; } }
.portal .yourself__ranking li a span,
.portal .yourself__ranking li a strong {
font-weight: inherit; }
.portal .yourself__ranking li a::after {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 23px;
margin: auto;
position: absolute;
width: 14px;
inset: 0px 20px 0px auto; }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li a::after {
height: 19px;
width: 11px;
inset: 0px 13px 0px auto; } }
.portal .yourself__ranking li a::before {
border-radius: 10px;
box-sizing: border-box;
color: #fff;
content: counter(ranking);
font-weight: 500;
height: 74px;
margin: auto;
margin-right: 30px;
position: absolute;
width: 74px;
inset: 0px auto 0px 15px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .yourself__ranking li a::before {
border-radius: 8px;
height: 60px;
width: 60px;
inset: 0px auto 0px 30px; } }
@media screen and (max-width: 639px) {
.portal .yourself__ranking li a::before {
border-radius: 5px;
height: 32px;
width: 32px;
inset: 0px auto 0px 10px; } }
.portal .yourself__series {
padding-bottom: 80px; }
@media screen and (max-width: 1023px) {
.portal .yourself__series {
padding-bottom: 40px; } }
@media screen and (max-width: 639px) {
.portal .yourself__series {
padding-bottom: 30px; } }
.portal .yourself__series h3 {
margin-bottom: 40px;
text-align: center;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.55; }
@media screen and (max-width: 1023px) {
.portal .yourself__series h3 {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .yourself__series h3 {
font-size: 1.6rem; } }
@media screen and (max-width: 1023px) {
.portal .yourself__series h3 {
line-height: 1.2;
margin-bottom: 25px; } }
@media screen and (max-width: 639px) {
.portal .yourself__series h3 {
line-height: 1.6; } }
.portal .yourself__series h3 span {
display: block flow;
font-size: 4rem;
font-weight: inherit;
margin-top: 9px; }
@media screen and (max-width: 1023px) {
.portal .yourself__series h3 span {
font-size: 3rem; } }
@media screen and (max-width: 639px) {
.portal .yourself__series h3 span {
font-size: 2.5rem;
margin-top: 0px; } }
.portal .yourself__series h3 em {
border-bottom: 5px solid #eb0f30;
font-weight: inherit;
margin-right: 3px; }
@media screen and (max-width: 1023px) {
.portal .yourself__series h3 em {
border-bottom-width: 3px; } }
@media screen and (max-width: 639px) {
.portal .yourself__series h3 em {
border-bottom-width: 2px; } }
.portal .yourself__series nav {
max-width: 860px;
margin-inline: auto; }
@media screen and (max-width: 1023px) {
.portal .yourself__series nav {
max-width: 628px; } }
@media screen and (max-width: 639px) {
.portal .yourself__series nav {
margin: 0px 5px; } }
.portal .yourself__series nav a {
display: block flow;
text-decoration: none;
transition: opacity 200ms ease; }
@media screen and (min-width: 640px) {
.portal .yourself__series nav a:hover {
text-decoration: none;
opacity: 0.5; } }
.portal .yourself__series nav a img {
border-radius: 10px;
width: 100%; }
.portal .yourself__series nav a img:hover {
opacity: 1; }
.portal .yourself__ranking h3,
.portal .yourself__ranking li,
.portal .yourself__ranking p {
opacity: 0;
transform: translateY(15px); }
.portal .yourself__ranking[data-scrollanimation="show"] h3 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .yourself__ranking[data-scrollanimation="show"] p {
opacity: 1;
transition: transform 500ms ease 900ms, opacity 500ms ease 900ms;
transform: translateY(0px); }
.portal .yourself__ranking[data-scrollanimation="show"] li {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .yourself__ranking[data-scrollanimation="show"] li:nth-of-type(1) {
transition-delay: 150ms; }
.portal .yourself__ranking[data-scrollanimation="show"] li:nth-of-type(2) {
transition-delay: 300ms; }
.portal .yourself__ranking[data-scrollanimation="show"] li:nth-of-type(3) {
transition-delay: 450ms; }
.portal .yourself__ranking[data-scrollanimation="show"] li:nth-of-type(4) {
transition-delay: 600ms; }
.portal .yourself__ranking[data-scrollanimation="show"] li:nth-of-type(5) {
transition-delay: 750ms; }
.portal .yourself__series h3,
.portal .yourself__series nav {
opacity: 0;
transform: translateY(15px); }
.portal .yourself__series[data-scrollanimation="show"] h3 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .yourself__series[data-scrollanimation="show"] nav {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .utilization__solution, .portal .utilization__trouble {
gap: 60px;
position: relative;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: start;
align-items: flex-start;
margin-inline: -70px;
padding-inline: 70px; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution, .portal .utilization__trouble {
margin-inline: -30px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution, .portal .utilization__trouble {
margin-inline: -20px; } }
@media screen and (max-width: 1023px) {
.portal .utilization__solution, .portal .utilization__trouble {
padding-inline: 30px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution, .portal .utilization__trouble {
padding-inline: 20px; } }
@media (max-width: 1279px) {
.portal .utilization__solution, .portal .utilization__trouble {
gap: 20px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution, .portal .utilization__trouble {
display: block flow; } }
.portal .utilization__solution figure, .portal .utilization__trouble figure {
-ms-flex-item-align: center;
align-self: center;
-ms-flex-preferred-size: 575px;
flex-basis: 575px; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution figure, .portal .utilization__trouble figure {
-ms-flex-preferred-size: 256px;
flex-basis: 256px;
-ms-flex-negative: 0;
flex-shrink: 0; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution figure, .portal .utilization__trouble figure {
margin-bottom: 25px; } }
.portal .utilization__solution figure img, .portal .utilization__trouble figure img {
width: 100%; }
.portal .utilization__solution div, .portal .utilization__trouble div {
box-sizing: border-box;
-ms-flex-preferred-size: 505px;
flex-basis: 505px;
-ms-flex-negative: 0;
flex-shrink: 0;
padding-left: 50px; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution div, .portal .utilization__trouble div {
-ms-flex-negative: 1;
flex-shrink: 1;
padding-left: 35px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution div, .portal .utilization__trouble div {
padding-left: 25px; } }
.portal .utilization__solution dt, .portal .utilization__trouble dt {
margin-top: 30px;
font-size: 1.8rem;
font-weight: 500;
line-height: 2em; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution dt, .portal .utilization__trouble dt {
font-size: 1.6rem; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution dt, .portal .utilization__trouble dt {
font-size: 1.4rem; } }
@media screen and (max-width: 1023px) {
.portal .utilization__solution dt, .portal .utilization__trouble dt {
font-weight: 400;
margin-top: 20px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution dt, .portal .utilization__trouble dt {
font-weight: 500; } }
.portal .utilization__solution dt span, .portal .utilization__trouble dt span {
vertical-align: 5px; }
@media screen and (max-width: 639px) {
.portal .utilization__solution dt span, .portal .utilization__trouble dt span {
vertical-align: 3px; } }
.portal .utilization__solution dd, .portal .utilization__trouble dd {
color: #eb0f30;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution dd, .portal .utilization__trouble dd {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution dd, .portal .utilization__trouble dd {
font-size: 1.6rem; } }
.portal .utilization__solution h3, .portal .utilization__trouble h3 {
height: 50px;
margin-bottom: -10px;
position: relative; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution h3, .portal .utilization__trouble h3 {
height: 40px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution h3, .portal .utilization__trouble h3 {
height: 32.5px;
padding-left: 20px; } }
.portal .utilization__solution h3::before, .portal .utilization__trouble h3::before {
content: "";
height: 50px;
left: -55px;
position: absolute;
top: 0px;
width: 50px; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution h3::before, .portal .utilization__trouble h3::before {
height: 40px;
left: -40px;
width: 40px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution h3::before, .portal .utilization__trouble h3::before {
height: 32.5px;
left: -17.5px;
width: 32.5px; } }
.portal .utilization__trouble {
margin-bottom: 20px;
padding-block: 60px 92px; }
@media screen and (max-width: 1023px) {
.portal .utilization__trouble {
padding-block: 40px 92px; } }
@media screen and (max-width: 639px) {
.portal .utilization__trouble {
margin-bottom: 10px;
padding-block: 30px 50px; } }
.portal .utilization__trouble::before {
background: url(/portal/imgV2/utilization_bg.svg) no-repeat center bottom;
background-size: cover;
content: "";
margin: auto;
position: absolute;
z-index: -1;
clip-path: inset(0% 50px 0% 0%);
inset: 0px -50px; }
@media screen and (max-width: 1023px) {
.portal .utilization__trouble::before {
clip-path: inset(0% 20px 0% 0%);
inset: 0px -20px; } }
@media screen and (max-width: 639px) {
.portal .utilization__trouble::before {
clip-path: inset(0% 10px 0% 0%);
inset: 0px -10px; } }
.portal .utilization__trouble div h3 {
font-size: 2.4rem;
font-weight: 500;
line-height: 1.5em;
display: block flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .utilization__trouble div h3 {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .utilization__trouble div h3 {
font-size: 1.6rem; } }
.portal .utilization__trouble div h3::before {
background: url(/portal/imgV2/utilization_03.svg) no-repeat center;
background-size: contain; }
.portal .utilization__solution {
margin-bottom: 60px;
padding-block: 40px 30px; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution {
padding-bottom: 0px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution {
margin-bottom: 30px; } }
.portal .utilization__solution div h3 {
gap: 5px;
font-size: 2.4rem;
font-weight: 500;
line-height: 1;
display: block flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: end;
align-items: flex-end; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution div h3 {
font-size: 2rem; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution div h3 {
font-size: 1.6rem; } }
@media screen and (max-width: 1023px) {
.portal .utilization__solution div h3 {
padding-left: 10px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution div h3 {
padding-left: 20px; } }
.portal .utilization__solution div h3::before {
background: url(/portal/imgV2/utilization_04.svg) no-repeat center;
background-size: contain; }
.portal .utilization__solution div h3 img {
width: 162px; }
@media screen and (max-width: 1023px) {
.portal .utilization__solution div h3 img {
width: 130px; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution div h3 img {
width: 102px; } }
.portal .utilization__solution div p {
color: #6b6b6b;
margin-top: 30px;
font-weight: 400;
line-height: 1.5em; }
@media screen and (max-width: 639px) {
.portal .utilization__solution div p {
margin-top: 20px; } }
@media screen and (max-width: 1023px) {
.portal .utilization__solution div p {
font-size: 1.4rem; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution div p {
font-size: 1.2rem; } }
.portal .utilization__solution div p a {
text-decoration: underline;
transition: opacity 200ms ease; }
@media screen and (min-width: 640px) {
.portal .utilization__solution div p a:hover {
text-decoration: underline;
opacity: 0.5; } }
@media screen and (max-width: 639px) {
.portal .utilization__solution div p a {
font-size: 1.2rem; } }
.portal .utilization__combination {
margin: 0px auto 60px;
max-width: 1090px; }
@media screen and (max-width: 1023px) {
.portal .utilization__combination {
margin-bottom: 40px; } }
@media screen and (max-width: 639px) {
.portal .utilization__combination {
margin: 0px 5px 30px; } }
.portal .utilization__combination h3 {
margin-bottom: 40px;
text-align: center;
font-size: 3.6rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .utilization__combination h3 {
margin-bottom: 20px; } }
@media screen and (max-width: 1023px) {
.portal .utilization__combination h3 {
font-size: 2.8rem; } }
@media screen and (max-width: 639px) {
.portal .utilization__combination h3 {
font-size: 2rem; } }
.portal .utilization__combination div {
gap: 30px;
margin-bottom: 30px;
display: block flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 1023px) {
.portal .utilization__combination div {
-ms-flex-direction: column;
flex-direction: column;
width: 500px;
margin-inline: auto; } }
@media screen and (max-width: 639px) {
.portal .utilization__combination div {
gap: 10px;
margin-bottom: 20px;
width: auto; } }
.portal .utilization__combination div p {
box-sizing: border-box;
color: #fff;
-ms-flex-preferred-size: 500px;
flex-basis: 500px;
-ms-flex-positive: 10;
flex-grow: 10;
font-size: 2.8rem;
font-weight: 700;
line-height: 1.5em;
padding: 30px 20px;
text-align: center; }
@media screen and (max-width: 1023px) {
.portal .utilization__combination div p {
-ms-flex-preferred-size: auto;
flex-basis: auto;
font-size: 2.5rem;
width: 100%; } }
@media screen and (max-width: 639px) {
.portal .utilization__combination div p {
font-size: 1.8rem;
font-weight: 500;
padding: 27px 15px;
width: 100%; } }
.portal .utilization__combination div p span {
font-size: 1.8rem;
font-weight: inherit;
vertical-align: 0.5em; }
@media screen and (max-width: 639px) {
.portal .utilization__combination div p span {
font-size: 1.4rem; } }
.portal .utilization__combination div p:nth-of-type(1) {
background: #eb0f30;
-ms-flex-order: 1;
order: 1; }
.portal .utilization__combination div p:nth-of-type(2) {
background: #0F81EB;
-ms-flex-order: 3;
order: 3; }
.portal .utilization__combination div::before {
background: url(/portal/imgV2/utilization_05.svg) no-repeat center;
background-size: contain;
content: "";
-ms-flex-negative: 0;
flex-shrink: 0;
height: 30px;
-ms-flex-order: 2;
order: 2;
width: 30px; }
@media screen and (max-width: 1023px) {
.portal .utilization__combination div::before {
height: 24px;
width: 24px; } }
@media screen and (max-width: 639px) {
.portal .utilization__combination div::before {
height: 21px;
width: 21px; } }
.portal .utilization__combination ul {
color: #6b6b6b;
font-weight: 400;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .utilization__combination ul {
font-size: 1.4rem; } }
@media screen and (max-width: 639px) {
.portal .utilization__combination ul {
font-size: 1.2rem; } }
.portal .utilization__operation {
margin: 0px auto 40px;
max-width: 900px; }
@media screen and (max-width: 1023px) {
.portal .utilization__operation {
margin-bottom: 10px; } }
@media screen and (max-width: 639px) {
.portal .utilization__operation {
margin: 0px 5px 10px; } }
.portal .utilization__operation h3 {
margin-bottom: -20px;
text-align: center;
font-size: 3.6rem;
font-weight: 500;
line-height: 1.5em; }
@media screen and (max-width: 1023px) {
.portal .utilization__operation h3 {
margin-bottom: 0px; } }
@media screen and (max-width: 639px) {
.portal .utilization__operation h3 {
margin-bottom: 10px; } }
@media screen and (max-width: 1023px) {
.portal .utilization__operation h3 {
font-size: 2.8rem; } }
@media screen and (max-width: 639px) {
.portal .utilization__operation h3 {
font-size: 1.6rem; } }
.c-block:has(.utilization)::after {
background: blue;
background: url(/portal/imgV2/utilization_bg02.svg) no-repeat right top;
background-size: cover;
content: "";
height: 577px;
position: absolute;
inset: 211px 50% auto 0px; }
@media (max-width: 1380px) {
.c-block:has(.utilization)::after {
content: none; } }
.portal .utilization__solution[data-scrollanimation="show"] figure,
.portal .utilization__solution[data-scrollanimation="show"] h3, .portal .utilization__trouble[data-scrollanimation="show"] figure,
.portal .utilization__trouble[data-scrollanimation="show"] h3 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .utilization__solution[data-scrollanimation="show"] p, .portal .utilization__trouble[data-scrollanimation="show"] p {
opacity: 1;
transition: transform 500ms ease 600ms, opacity 500ms ease 600ms;
transform: translateY(0px); }
.portal .utilization__solution[data-scrollanimation="show"] dt,
.portal .utilization__solution[data-scrollanimation="show"] dd, .portal .utilization__trouble[data-scrollanimation="show"] dt,
.portal .utilization__trouble[data-scrollanimation="show"] dd {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .utilization__solution[data-scrollanimation="show"] dt:nth-of-type(1),
.portal .utilization__solution[data-scrollanimation="show"] dd:nth-of-type(1), .portal .utilization__trouble[data-scrollanimation="show"] dt:nth-of-type(1),
.portal .utilization__trouble[data-scrollanimation="show"] dd:nth-of-type(1) {
transition-delay: 150ms; }
.portal .utilization__solution[data-scrollanimation="show"] dt:nth-of-type(2),
.portal .utilization__solution[data-scrollanimation="show"] dd:nth-of-type(2), .portal .utilization__trouble[data-scrollanimation="show"] dt:nth-of-type(2),
.portal .utilization__trouble[data-scrollanimation="show"] dd:nth-of-type(2) {
transition-delay: 300ms; }
.portal .utilization__solution[data-scrollanimation="show"] dt:nth-of-type(3),
.portal .utilization__solution[data-scrollanimation="show"] dd:nth-of-type(3), .portal .utilization__trouble[data-scrollanimation="show"] dt:nth-of-type(3),
.portal .utilization__trouble[data-scrollanimation="show"] dd:nth-of-type(3) {
transition-delay: 450ms; }
.portal .utilization__solution figure,
.portal .utilization__solution h3,
.portal .utilization__solution dt,
.portal .utilization__solution dd,
.portal .utilization__solution p, .portal .utilization__trouble figure,
.portal .utilization__trouble h3,
.portal .utilization__trouble dt,
.portal .utilization__trouble dd,
.portal .utilization__trouble p {
opacity: 0;
transform: translateY(15px); }
.portal .utilization__combination[data-scrollanimation="show"] h3 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .utilization__combination[data-scrollanimation="show"] div {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .utilization__combination[data-scrollanimation="show"] ul {
opacity: 1;
transition: transform 500ms ease 300ms, opacity 500ms ease 300ms;
transform: translateY(0px); }
.portal .utilization__combination h3,
.portal .utilization__combination div,
.portal .utilization__combination ul {
opacity: 0;
transform: translateY(15px); }
.portal .utilization__operation[data-scrollanimation="show"] h3 {
opacity: 1;
transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
transform: translateY(0px); }
.portal .utilization__operation[data-scrollanimation="show"] figure {
opacity: 1;
transition: transform 500ms ease 150ms, opacity 500ms ease 150ms;
transform: translateY(0px); }
.portal .utilization__operation h3,
.portal .utilization__operation figure {
opacity: 0;
transform: translateY(15px); }
/*# sourceMappingURL=map/portal.css.map */