@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}:where(#main) {
--content-max-width: 79.6875rem;
--transition-fast: 0.2s;
--transition: 0.3s ease-in-out;
--color-accent-lightest: #ffe0e3;
--color-accent-light: #ff0026;
--color-accent: #b1000e;
--color-accent-dark: #7e000a;
--color-black: #000000;
--color-foreground: #333333;
--color-background: #fff;
--color-background-accent: #f0f0f0;
--color-border: #d9d9d9;
--color-red-01: #fa000f;
--color-red-02: #cc0000;
--color-supportive-gray: #f7f7f7;
--color-supportive-gray-02: #f0f0f0;
--color-blue-03: #004596;
--gradient-box_overlay_black: linear-gradient(238deg, rgba(0, 0, 0, 0.9) 82.85%, rgba(204, 0, 0, 0.42) 104.52%);
--SupportiveGray03: #c9cac8;
--SupportiveGrey05: #4d4d4d;
--icon-slide-arrow: url('data:image/svg+xml;utf8,');
--icon-slide-control-arrow: url('data:image/svg+xml;utf8,');
--icon-anchor: url('data:image/svg+xml;utf8,');
--icon-pdf: url('data:image/svg+xml;utf8,');
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
color: var(--color-black);
background-color: var(--color-background);
--content-width: min(calc(100% - 8%), var(--content-max-width));
}:where(#main) *,
:where(#main) *::before,
:where(#main) *::after {
box-sizing: border-box;
line-height: normal;
word-wrap: break-word;
/* overflow-wrapのフォールバック */
overflow-wrap: break-word;
}:where(#main) img {
max-width: 100%;
height: auto;
}:where(#main) button {
padding: 0;
font-size: inherit;
color: inherit;
text-align: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: transparent;
border: none;
}:where(#main) :disabled {
cursor: default;
}:where(#main) iframe {
border: none;
}:where(#main) h2,
.JS :where(#main) h2 {
padding: 0;
margin: 0;
background: none;
}:where(#main) h2 span {
display: inline;
padding: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
background-color: transparent;
}:where(#main) h3 {
padding: 0;
margin: 0;
color: inherit;
}:where(#main) h3 a {
padding: 0;
}:where(#main) h3 a:is(:link, :visited) {
color: inherit;
background: none;
}:where(#main) strong {
color: inherit;
}:where(#main) .GridSet {
margin: 0 auto !important;
}:where(#main) :is(a:link, a:visited) {
color: inherit;
text-decoration: none;
}html:where(main) {
font-family: "Noto Sans", "Noto Sans JP", "Hitachi Sans", sans-serif;
}body {
background-color: var(--color-background);
}:where(#main) {
padding-bottom: 6rem;
}.u-w-full {
width: 100%;
}.u-max-h-420px {
max-height: 26.25rem;
}.u-object-cover {
-o-object-fit: cover;
object-fit: cover;
}.u-max-w-949px {
max-width: 59.3125rem;
}.u-align-center {
text-align: center;
}.u-min-h-179px {
min-height: 179px;
}.u-mb-32 {
margin-bottom: 2rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.pc-u-mb-112 {
margin-bottom: 7rem;
}
}@media screen and (max-width: 768px) {
.sp-u-mb-56 {
margin-bottom: 3.5rem;
}
}@media screen and (min-width: calc(768px + 0.02px)), print {
.pc-u-pb-112 {
padding-bottom: 7rem;
}
}@media screen and (max-width: 768px) {
.sp-u-pb-56 {
padding-bottom: 3.5rem;
}
}@media screen and (max-width: 768px) {
.sp-u-pi-16 {
padding-inline: 1rem;
}
}.u-mt-32 {
margin-top: 2rem;
}.u-mt-48 {
margin-top: 3rem;
}.u-mt-16 {
margin-top: 1rem;
}.u-mt-56 {
margin-top: 3.5rem;
}@media screen and (max-width: 768px) {
.sp-text-center {
text-align: center;
}
}.u-pt-56 {
padding-top: 0 !important;
}@media screen and (max-width: calc(1305px + 0.02px)), print {
.u-pt-56 {
padding-top: 3.5rem !important;
}
}.u-pt-0 {
padding-top: 0 !important;
}.u-text-sm {
font-size: 0.5rem;
}main .container {
padding-block: 3.5rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
main .container {
margin-inline: 1.5rem;
}
}@media screen and (max-width: 768px) {
main .container {
margin-inline: 1rem;
}
}.firstContainer {
padding-bottom: 3.5rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.firstContainer {
margin-inline: 1.5rem;
}
}@media screen and (max-width: 768px) {
.firstContainer {
margin-inline: 1rem;
}
}.narrow-container {
padding-block: 3.5rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.narrow-container {
margin-inline: 3.5rem;
}
}@media screen and (max-width: 768px) {
.narrow-container {
margin-inline: 1rem;
}
}.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}@media screen and (max-width: 768px) {
.sp\:u-hidden {
display: none;
}
}@media screen and (min-width: calc(768px + 0.02px)), print {
.pc\:u-hidden {
display: none;
}
}.HeroBanner {
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
max-width: 79.6875rem;
padding-top: 2rem;
margin-bottom: 3.5rem;
color: #fff;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.HeroBanner {
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
}
}@media screen and (min-width: 768px) and (max-width: calc(1305px - 0.1px)) {
.HeroBanner {
padding-inline: 1.5rem;
margin-bottom: 0;
}
}@media screen and (max-width: 768px) {
.HeroBanner {
margin-bottom: 0;
}
}.HeroBanner .HeroBanner__img {
border-radius: 0.375rem;
}@media screen and (max-width: 768px) {
.HeroBanner .HeroBanner__img {
width: 100%;
aspect-ratio: 360 / 203;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0;
}
}@media screen and (min-width: 768px) and (max-width: calc(1305px - 0.1px)) {
.HeroBanner .HeroBanner__img {
border-radius: 6px 6px 0px 0px;
}
}.HeroBanner .HeroBanner__text-box {
background: var(--gradient-box_overlay_black) 0 0 no-repeat padding-box;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.HeroBanner .HeroBanner__text-box {
position: absolute;
opacity: 0.9;
bottom: 2rem;
left: 2rem;
width: 30.8125rem;
padding: 1.5rem;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid #747474;
border-radius: 0.375rem;
}
}@media screen and (min-width: 768px) and (max-width: calc(1305px - 0.1px)) {
.HeroBanner .HeroBanner__text-box {
position: static;
width: 100%;
border-width: 0;
border-radius: 0;
background: linear-gradient(238deg, #000 82.85%, #fa000f 104.52%);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
}@media screen and (max-width: 768px) {
.HeroBanner .HeroBanner__text-box {
width: 100%;
padding: 1rem 1rem 2rem 1rem;
transform: translateY(-0.05rem);
background: linear-gradient(238deg, #000 82.85%, #fa000f 104.52%);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
}.HeroBanner .HeroBanner__sub-title {
font-family: "Noto Sans";
font-size: 0.875rem;
line-height: 1.5;
}.HeroBanner .HeroBanner__heading01 {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.25;
margin-top: 0.5rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.HeroBanner .HeroBanner__heading01 {
font-size: 2.5rem;
}
}@media screen and (max-width: 768px) {
.HeroBanner .HeroBanner__heading01 {
font-size: 2rem;
}
}.HeroBanner .HeroBanner__body {
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
margin-top: 1rem;
}@media screen and (min-width: calc(1305px + 0.02px)), print {
.HeroBanner .HeroBanner__body {
display: flex;
flex-direction: column;
}
}.Title {
display: grid;
row-gap: 2rem;
text-align: center;
}.Title .Title__heading {
display: grid;
}.Title .Title__heading-shoulder {
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
font-weight: 600;
}.Title .Title__heading-main {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.25;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.Title .Title__heading-main {
font-size: 2rem;
}
}@media screen and (max-width: 768px) {
.Title .Title__heading-main {
font-size: 1.75rem;
}
}.Title .Title__heading-shoulder + .Title__heading-main {
padding-top: 0.5rem;
}.Title .Title__body {
display: grid;
row-gap: 1rem;
}.Title .Title__body-lead {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.5;
display: block;
color: var(--color-red-02);
}@media screen and (min-width: calc(768px + 0.02px)), print {
.Title .Title__body-lead {
font-size: 1.375rem;
}
}@media screen and (max-width: 768px) {
.Title .Title__body-lead {
font-size: 1.25rem;
}
}.Title .Title__body-image {
display: block;
height: auto;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.Title .Title__body-image {
max-width: 37.5rem;
margin-inline: auto;
}
}@media screen and (max-width: 768px) {
.Title .Title__body-image {
width: 100%;
}
}.Title .Title__body-content {
display: grid;
row-gap: 0.5rem;
}.Title .Title__body-text {
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
}.Title .Title__body-text > b {
font-weight: 600;
}.Topics {
display: flex;
flex-direction: column;
max-width: 79.6875rem;
margin-bottom: 7rem;
margin-inline: auto;
overflow: hidden;
}@media screen and (max-width: 1305px) {
.Topics {
padding-inline: 1rem;
}
}.Topics .Topics__h2 {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.25;
align-self: center;
margin-bottom: 3rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.Topics .Topics__h2 {
font-size: 2rem;
}
}@media screen and (max-width: 768px) {
.Topics .Topics__h2 {
font-size: 1.75rem;
}
}.Topics .Topics__slider {
display: flex;
margin-bottom: 3rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.Topics .Topics__slider {
-moz-column-gap: 1.5625rem;
column-gap: 1.5625rem;
}
}@media screen and (max-width: 768px) {
.Topics .Topics__slider {
flex-direction: column;
gap: 2rem;
}
}.Topics .Topics__card {
display: grid;
border: #f4f4f4 2px solid;
background-color: #f4f4f4;
border-radius: 0.5rem;
overflow: hidden;
}.Topics .Topics__card a {
display: flex;
flex-direction: column;
}@media screen and (min-width: calc(768px + 0.02px)) and (max-width: 994px), print {
.Topics .Topics__card {
width: 45%;
}
}@media screen and (min-width: calc(994px + 0.02px)) {
.Topics .Topics__card {
width: calc((100% - 1.5rem * 2) / 4);
max-width: 18.75rem;
}
}@media screen and (max-width: 768px) {
.Topics .Topics__card {
width: 100%;
}
}@media (hover: hover) {
.Topics .Topics__card a:-moz-any-link:hover {
color: var(--color-red-02);
}
.Topics .Topics__card a:any-link:hover {
color: var(--color-red-02);
}
.Topics .Topics__card a:-moz-any-link:hover .BottomLinkList__image {
transform: scale(1.1, 1.1);
}
.Topics .Topics__card a:any-link:hover .BottomLinkList__image {
transform: scale(1.1, 1.1);
}
}.Topics .Topics__card:active {
border: var(--color-black) 2px solid;
}.Topics .Topics__card:focus-within {
border: var(--color-black) 2px solid;
}.Topics .Topics__paragraph {
display: grid;
grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
grid-template-rows: min-content 1fr min-content;
padding: 1rem;
flex-grow: 1;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.Topics .Topics__paragraph {
min-height: 17.5rem;
}
}.Topics .Topics__image {
width: 100%;
border-radius: 0.5rem 0.5rem 0 0;
aspect-ratio: 3 / 2;
-o-object-fit: cover;
object-fit: cover;
transition: transform var(--transition);
}.Topics .Topics__paragraph__title {
transition: color var(--transition);
color: var(--black, #000);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5;
margin-bottom: 0.5rem;
}.Topics .Topics__paragraph__text {
color: var(--color-black);
font-size: 1.25rem;
font-weight: 500;
line-height: 1.5;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
flex-grow: 1;
}.Topics .Topics__paragraph__icon {
display: block;
align-self: end;
justify-self: end;
width: 1.5rem;
height: 1.5rem;
transition: color var(--transition);
}.Topics__imageBlock {
overflow: hidden;
}.Topics__btn {
align-self: center;
}.Button {
display: flex;
align-items: center;
justify-content: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
padding: 0.625rem 1.5rem;
background-color: #c00;
border-radius: 1.25rem;
transition: var(--transition);
}@media (hover: hover) {
.Button:where(:-moz-any-link, :enabled, summary):hover {
background-color: var(--color-black);
}
.Button:where(:any-link, :enabled, summary):hover {
background-color: var(--color-black);
}
.Button:where(:-moz-any-link, :enabled, summary):hover.isWhite {
outline-color: var(--color-black);
}
.Button:where(:any-link, :enabled, summary):hover.isWhite {
outline-color: var(--color-black);
}
.Button:where(:-moz-any-link, :enabled, summary):hover.isWhite .Button__text {
color: var(--color-black);
}
.Button:where(:any-link, :enabled, summary):hover.isWhite .Button__text {
color: var(--color-black);
}
}.Button:focus.isWhite {
background-color: #d9d9d9;
outline: 0.125rem solid #0c0c0c;
outline-offset: -0.125rem;
}.Button:focus.isWhite:focus .Button__text {
color: var(--color-black);
}.Button.isWhite {
background-color: #fff;
outline: 0.125rem solid;
outline-color: #c00;
outline-offset: -0.125rem;
}.Button.Button--narrow {
padding: 0.5rem 1rem 0.5rem 1.5rem;
}.Button__text {
display: inline-block;
word-break: keep-all;
font-family: "Noto Sans";
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
color: #fff;
transition: color var(--transition);
}.isWhite .Button__text {
color: #c00;
}.Button__text span {
text-box-trim: trim-both;
}.button-external {
display: inline-block;
width: 1rem;
height: 1rem;
margin-left: 0.875rem;
vertical-align: middle;
}.button__arrow {
display: inline-block;
transform: translateY(0.15rem);
margin-left: 0.35rem;
margin-right: 0.2rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.seminar {
padding-inline: 2rem;
}
}.seminarContainer {
display: flex;
max-width: 1059px;
padding: 1.5rem;
gap: 1.5rem;
border-radius: 0.5rem;
border: 1px solid var(--SupportiveGray03);
background: #fff;
margin-inline: auto;
}@media screen and (max-width: 768px) {
.seminarContainer {
flex-direction: column;
padding: 1rem 1rem 1.5rem 1rem;
gap: 1rem;
}
.seminarContainer.isBlue {
padding: 2rem 1rem;
}
}.seminarContainer.isBlue {
background: #16316e;
}.seminarParagraph {
display: flex;
flex-direction: column;
}.isBlue .seminarParagraph {
color: #fff;
}.seminarParagraph__schedule {
color: var(--SupportiveGrey05);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
margin-top: 0.75rem;
}.seminarParagraph__body {
margin-top: 0.75rem;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.5;
}.isBlue .seminarParagraph__body {
margin-top: 0.5rem;
}@media screen and (max-width: 768px) {
.isBlue .seminarParagraph__body {
margin-top: 1rem;
}
}.seminar__img {
align-self: baseline;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.seminar__img {
max-width: calc(50% - 0.75rem);
}
}@media screen and (max-width: 768px) {
.seminar__img {
width: 100%;
}
}.seminarParagraph__title {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.5;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.seminarParagraph__title {
font-size: 1.375rem;
}
}@media screen and (max-width: 768px) {
.seminarParagraph__title {
font-size: 1.25rem;
}
}@media screen and (min-width: calc(768px + 0.02px)), print {
.seminarParagraph__title {
flex-direction: column;
display: flex;
}
}.isBlue .seminarParagraph__title {
flex-direction: column;
display: flex;
}@media screen and (max-width: 768px) {
.isBlue .seminarParagraph__title {
font-size: 1.625rem;
}
}.Seminar__btn {
margin-top: 1.5rem;
}.seminarParagraph__lead {
color: var(--SupportiveGrey05);
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
margin-top: 0.5rem;
}@media screen and (max-width: 768px) {
.seminar__subtitle {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5;
margin-top: 0.5rem;
}
}.anchor__item__link {
display: block;
padding: 1rem 1.25rem;
transition: color var(--transition);
text-box-trim: trim-both;
}@media (hover: hover) {
.anchor__item__link:where(:-moz-any-link, :enabled, summary):hover {
color: #c00;
}
.anchor__item__link:where(:any-link, :enabled, summary):hover {
color: #c00;
}
}@media screen and (max-width: 768px) {
.anchor__item__link {
padding: 1rem;
}
}.anchor__list {
display: flex;
margin-inline: auto;
}@media screen and (max-width: 768px) {
.anchor__list {
flex-direction: column;
margin: 0;
width: 100%;
}
}.anchor {
display: flex;
background: var(--color-supportive-gray-02);
width: 100%;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.anchor__item {
border-right: 1px solid var(--SupportiveGray03);
}
.anchor__item:first-child {
border-left: 1px solid var(--SupportiveGray03);
}
}@media screen and (max-width: 768px) {
.anchor__item {
width: 100%;
border-bottom: 1px solid var(--SupportiveGray03);
}
}.iconArrow {
display: inline-block;
margin-left: 0.5rem;
transform: translateY(0.4rem);
}.iconArrow.iconArrow--right {
transform: rotate(-90deg);
margin-left: 1rem;
}.problems {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.85) 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 50% 100%, 0 calc(100% - 100px));
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 50% 100%, 0 calc(100% - 100px));
}@media screen and (max-width: 768px) {
.problems {
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
}
}.problemsContainer {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.problemsContainer {
padding-top: 7rem;
padding-bottom: 9.75rem;
padding-inline: 2rem;
}
}@media screen and (max-width: 768px) {
.problemsContainer {
padding: 3.5rem 1rem 5.125rem 1rem;
}
}.problems__h2 {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.25;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.problems__h2 {
font-size: 2rem;
}
}@media screen and (max-width: 768px) {
.problems__h2 {
font-size: 1.75rem;
}
}.problems__paragraph {
margin-top: 3rem;
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
display: flex;
flex-direction: column;
align-items: center;
}@media screen and (max-width: 768px) {
.problems__paragraph {
align-items: flex-start;
}
}.problems__paragraph .isBold {
font-weight: 600;
}.problems__img__note {
display: block;
margin-top: 0.75rem;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.5;
}.problems__img__note span + span {
margin: 1rem;
}.problems__lead {
text-align: center;
font-family: "Noto Sans";
font-weight: 500;
line-height: 1.5;
font-weight: 700;
display: flex;
flex-direction: column;
margin-top: 3.5rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.problems__lead {
font-size: 1.5rem;
}
}@media screen and (max-width: 768px) {
.problems__lead {
font-size: 1.375rem;
}
}@media screen and (max-width: 768px) {
.problems__lead {
align-items: flex-start;
text-align: start;
}
}.problems__figure {
margin-top: 3.5rem;
max-width: 66.1875rem;
display: block;
}.reason {
padding-inline: 2rem;
padding-top: 7rem;
}@media screen and (max-width: 768px) {
.reason {
padding-inline: 1rem;
padding-top: 3.5rem;
}
}.reasonContainer {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
margin-inline: auto;
margin-bottom: 7rem;
}@media screen and (max-width: 768px) {
.reasonContainer {
margin-bottom: 3.5rem;
}
}.reasonContainer ol {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
margin: 0;
padding: 0;
}.reason__h2 {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.25;
margin-bottom: 1rem !important;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.reason__h2 {
font-size: 2rem;
}
}@media screen and (max-width: 768px) {
.reason__h2 {
font-size: 1.75rem;
}
}@media screen and (max-width: 768px) {
.reason__h2 {
text-align: center;
font-size: 2rem;
font-weight: 600;
line-height: 1.25;
}
}.reasonParagraph__title {
font-family: "Noto Sans";
font-weight: 500;
line-height: 1.25;
margin-bottom: 1rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.reasonParagraph__title {
font-size: 1.75rem;
}
}@media screen and (max-width: 768px) {
.reasonParagraph__title {
font-size: 1.625rem;
}
}.reasonParagraph__title span {
line-height: 1.25;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.reasonParagraph__title {
display: flex;
flex-direction: column;
}
}.reason__card {
color: #fff;
max-width: 79.6875rem;
display: flex;
flex-direction: column;
padding: 2rem;
gap: 1.5rem;
width: 100%;
}@media screen and (max-width: 768px) {
.reason__card {
padding: 2rem 1rem;
}
}.reason__card.reason__card--01 {
background-image: url(/products/it/CloudDX/generative_ai/image/bg_reason_01_pc.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
}@media screen and (max-width: 768px) {
.reason__card.reason__card--01 {
background-image: url(/products/it/CloudDX/generative_ai/image/bg_reason_01_sp.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
}
}.reason__card.reason__card--02 {
background-image: url(/products/it/CloudDX/generative_ai/image/bg_reason_02_pc.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}@media screen and (max-width: 768px) {
.reason__card.reason__card--02 {
background-image: url(/products/it/CloudDX/generative_ai/image/bg_reason_02_sp.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
}.reasonParagraph__inner {
display: flex;
gap: 2rem;
}@media screen and (max-width: 1024px) {
.reasonParagraph__inner {
flex-direction: column;
}
}.reasonParagraph__id {
font-size: 1.625rem;
font-style: normal;
font-weight: 700;
line-height: 1.35;
}.reasonParagraph__body {
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
display: flex;
flex-direction: column;
}.reason__img {
align-self: baseline;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.reason__img {
max-width: 43.5%;
}
}@media screen and (min-width: 768px) and (max-width: 1024px) {
.reason__img {
width: 100%;
align-self: center;
}
}@media screen and (max-width: 768px) {
.reason__img {
width: 100%;
align-self: center;
}
}.cases {
padding-inline: 2rem;
background-color: #f7f7f7;
display: flex;
flex-direction: column;
align-items: center;
}@media screen and (max-width: 768px) {
.cases {
padding-inline: 1rem;
}
}.casesContainer {
max-width: 79.6875rem;
padding-block: 7rem;
display: flex;
flex-direction: column;
align-items: center;
margin-inline: auto;
width: 100%;
}@media screen and (max-width: 768px) {
.casesContainer {
padding-block: 3.5rem;
}
}.casesContainer__list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-inline: auto;
padding-top: 3rem;
width: 100%;
row-gap: 2rem;
-moz-column-gap: 1.5625rem;
column-gap: 1.5625rem;
margin-bottom: 7rem;
}.casesContainer__list li {
width: calc(50% - 12.5px);
}.casesContainer__list li:nth-child(2n + 1):last-child {
width: 100%;
}@media screen and (max-width: 768px) {
.casesContainer__list {
margin-bottom: 3.5rem;
}
.casesContainer__list li {
width: 100%;
}
}.cases__h2 {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.25;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.cases__h2 {
font-size: 2rem;
}
}@media screen and (max-width: 768px) {
.cases__h2 {
font-size: 1.75rem;
}
}.casesParagraph__title {
font-family: "Noto Sans";
font-weight: 500;
line-height: 1.25;
margin-bottom: 1rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.casesParagraph__title {
font-size: 1.75rem;
}
}@media screen and (max-width: 768px) {
.casesParagraph__title {
font-size: 1.625rem;
}
}@media screen and (min-width: calc(768px + 0.02px)), print {
.casesParagraph__title {
display: flex;
flex-direction: column;
}
}.cases__card {
display: flex;
align-items: flex-start;
padding: 2rem;
gap: 2rem;
border-radius: 8px;
background-color: #fff;
height: 100%;
}@media screen and (min-width: 768px) and (max-width: calc(1024px - 0.1px)) {
.cases__card {
flex-direction: column;
padding: 1.5rem 1rem;
}
}@media screen and (max-width: 768px) {
.cases__card {
flex-direction: column;
padding: 1.5rem 1rem;
}
}.cases__card__paragraph {
display: flex;
flex-direction: column;
height: 100%;
}.casesParagraph__body {
display: flex;
flex-direction: column;
}.cases__card__heading {
color: #747474;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
margin-bottom: 0.5rem;
}.cases__card__title {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.5;
margin-bottom: 0.75rem;
display: inline-block;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.cases__card__title {
font-size: 1.375rem;
}
}@media screen and (max-width: 768px) {
.cases__card__title {
font-size: 1.25rem;
}
}@media screen and (min-width: calc(768px + 0.02px)), print {
.cases__card__title {
display: flex;
flex-direction: column;
}
}.cases__card__text {
font-family: "Noto Sans";
font-size: 0.875rem;
line-height: 1.5;
display: flex;
flex-direction: column;
margin-bottom: 1.5rem;
gap: 0.75rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.cases__card__text {
flex-grow: 1;
}
}.cases__card__video {
position: relative;
display: block;
align-self: center;
width: 45.5%;
aspect-ratio: 16 / 9;
height: auto;
}@media screen and (min-width: 768px) and (max-width: calc(1024px - 0.1px)) {
.cases__card__video {
width: 80%;
}
}@media screen and (max-width: 768px) {
.cases__card__video {
width: 100%;
}
}.cases__card__video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}.cases__logo {
margin-bottom: 0.75rem;
}.cases__logo img {
width: auto;
height: 3.0625rem;
}.cases__note {
font-size: 0.75rem;
color: var(--SupportiveGrey05);
line-height: 1.5;
}.solution {
padding-inline: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}@media screen and (max-width: 768px) {
.solution {
padding-inline: 1rem;
}
}.solutionContainer {
max-width: 79.6875rem;
padding-block: 7rem;
display: flex;
flex-direction: column;
align-items: center;
margin-inline: auto;
width: 100%;
}@media screen and (max-width: 768px) {
.solutionContainer {
padding-block: 3.5rem;
}
}.solutionContainer__list {
display: flex;
flex-wrap: wrap;
margin-inline: auto;
padding-top: 3.5rem;
width: 100%;
row-gap: 3rem;
-moz-column-gap: 1.5625rem;
column-gap: 1.5625rem;
margin-bottom: 7rem;
}@media screen and (max-width: 768px) {
.solutionContainer__list {
row-gap: 2rem;
padding-top: 3rem;
margin-bottom: 3.5rem;
}
}@media screen and (min-width: calc(768px + 0.02px)), print {
.solutionContainer__list li {
width: calc(50% - 12.5px);
}
.solutionContainer__list li:first-child {
width: 100%;
}
}.solution__h2 {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.25;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.solution__h2 {
font-size: 2rem;
}
}@media screen and (max-width: 768px) {
.solution__h2 {
font-size: 1.75rem;
}
}@media screen and (max-width: 768px) {
.solution__h2 {
display: flex;
flex-direction: column;
align-items: center;
}
}.solutionParagraph__title {
font-family: "Noto Sans";
font-weight: 500;
line-height: 1.25;
margin-bottom: 1rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.solutionParagraph__title {
font-size: 1.75rem;
}
}@media screen and (max-width: 768px) {
.solutionParagraph__title {
font-size: 1.625rem;
}
}@media screen and (min-width: calc(768px + 0.02px)), print {
.solutionParagraph__title {
display: flex;
flex-direction: column;
}
}.solution__card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2rem;
border-radius: 8px;
background-color: #f7f7f7;
height: 100%;
}@media screen and (max-width: 768px) {
.solution__card {
padding: 2rem 1rem;
}
}.solutionParagraph__body {
display: flex;
flex-direction: column;
}.solution__img {
align-self: center;
}.solution__card__heading {
color: var(--SupportiveGrey05);
font-size: 1rem;
line-height: 1.5;
margin-bottom: 0.5rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.solution__card__heading {
margin-top: 0.5rem;
}
}.solution__card__title {
font-family: "Noto Sans";
font-weight: 600;
margin-bottom: 1.5rem;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.solution__card__title {
font-size: 1.625rem;
line-height: 1.25;
}
}@media screen and (max-width: 768px) {
.solution__card__title {
font-size: 1.5rem;
line-height: 1.5;
}
}.solution__card__text {
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}.solution__card__line {
position: absolute;
width: 1.25rem;
height: 0.125rem;
top: calc(2.625rem + 0.5em);
left: 0;
background-color: #fa000f;
}@media screen and (max-width: 768px) {
.solution__card__line {
top: calc(2.125rem + 0.5em);
width: 0.625rem;
}
}.solution__card__link {
color: #c00 !important;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
display: inline-block;
margin-bottom: 2rem;
width: 100%;
flex-grow: 1;
transition: color var(--transition);
}.solution__card__link svg {
transform: translateY(0.2rem);
display: inline-block;
width: 1.5rem;
height: 1.5rem;
margin-left: 0.2rem;
}@media (hover: hover) {
.solution__card__link:where(:-moz-any-link, :enabled, summary):hover {
color: var(--color-black) !important;
}
.solution__card__link:where(:any-link, :enabled, summary):hover {
color: var(--color-black) !important;
}
}.solution__card__link {
display: flex;
align-items: center;
}.solution__card__link span {
text-box-trim: trim-both;
}@media screen and (max-width: 768px) {
.solution__card__link span {
line-height: 1;
}
}.solution__h3 {
font-family: "Noto Sans";
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.solution__h3 {
font-size: 1.625rem;
line-height: 1.25;
}
}@media screen and (max-width: 768px) {
.solution__h3 {
font-size: 1.5rem;
line-height: 1.5;
}
}@media screen and (max-width: 768px) {
.solution__h3 {
padding-inline: 1.5rem !important;
}
}.solution__figure {
margin-top: 3rem;
max-width: 66.1875rem;
display: flex;
}@media screen and (max-width: 768px) {
.solution__figure {
margin-top: 2rem;
padding: 0;
}
}.contact {
width: 100%;
background-image: url(/products/it/CloudDX/generative_ai/image/bg_contact.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}.contactContainer {
max-width: 79.6875rem;
margin-inline: auto;
padding: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}@media screen and (max-width: 768px) {
.contactContainer {
flex-direction: column;
align-items: flex-start;
padding: 2rem 1rem;
}
}.contact__h2 {
font-family: "Noto Sans";
font-weight: 600;
line-height: 1.25;
margin-bottom: 1.5rem !important;
}@media screen and (min-width: calc(768px + 0.02px)), print {
.contact__h2 {
font-size: 2rem;
}
}@media screen and (max-width: 768px) {
.contact__h2 {
font-size: 1.75rem;
}
}@media screen and (max-width: 768px) {
.contact__h2 {
font-size: 2rem;
font-weight: 600;
line-height: 1.25;
}
}.contact__text {
font-family: "Noto Sans";
font-size: 1rem;
line-height: 1.5;
}@media screen and (max-width: 768px) {
.contact__text {
margin-bottom: 2rem;
}
}@media screen and (min-width: calc(768px + 0.02px)), print {
.contactParagraph {
margin-right: 2rem;
max-width: 72%;
}
}.contact__btn {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
white-space: nowrap;
}