@charset "UTF-8";
/* reset */
html {
  overflow-x: hidden;
  touch-action: manipulation;
}

* {
  box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
abbr,
address,
cite,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ul,
ol,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
a {
  box-sizing: border-box;
  margin: 0;
  outline: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 100%;
  letter-spacing: 0.05rem;
  list-style: none;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
small {
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

pre {
  margin: 0;
  margin-top: 1rem;
  padding: 0;
}

body {
  background: var(--color-bg-gray);
  overflow-x: hidden;
  font-family: "Noto Sans JP", sans-serif;
}

a:hover {
  opacity: 0.7;
  transition-duration: 0.2s;
}

img {
  max-width: 100%;
  height: auto;
}

:root {
  --color-main: #00a3ad;
  --color-bg-gray: #f4f4f4;
  --gradient-main: #006ab7 0%, #19d7cc 100%;
  --section-gap-y: 2.5rem;
  --contents-gap: 1.5rem;
}

.c-blank-link {
  display: flex;
  align-items: center;
  color: #888888;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.c-blank-link::after {
  margin: 0 0 0 0.5rem;
  content: url(../images/link-open.svg);
}

.c-inline-block {
  display: inline-block;
}

.l-section {
  display: grid;
  gap: var(--section-gap-y);
  margin: 0 auto;
  padding: min(8vw, 3.75rem) max(5%, (100vw - 72.5rem) / 2);
}
.l-section:first-child {
  padding-top: calc(var(--section-gap-y) * 2);
}

.l-section-title {
  color: #000;
  font-size: clamp(2rem, 7.5vw, 2.5rem);
  line-height: 1.25;
  text-align: center;
}
.l-section-title p {
  color: var(--color-main);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
}
.l-section-title + p {
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
}

/* header */
.mainvisual {
  position: relative;
}
.mainvisual h2 {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: difference;
  margin: auto;
  width: 100%;
  color: #fff;
  font-size: 9.3vw;
  line-height: 1.2;
  text-align: center;
}

.mainvisual-content {
  display: flex;
  position: relative;
  border-radius: 0 0 2rem 2rem;
  height: clamp(45rem, 60vw, 90vh);
  overflow: hidden;
}

.mainvisual-left-content {
  display: flex;
  row-gap: 1rem;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(-15deg, #006ab7 0%, #19d7cc 100%);
  padding: 2.5rem 3.75rem 10vw;
  width: 50%;
}
.mainvisual-left-content .badges img {
  width: 30vw;
  height: auto;
}

.catch {
  mix-blend-mode: screen;
  background: #ffffff;
  padding: 0 0.5em;
  width: -moz-fit-content;
  width: fit-content;
  color: #000000;
  font-weight: bold;
  font-size: 2vw;
  line-height: 1.5;
}

.annotation {
  color: #fff;
  font-size: 0.75rem;
}

.header-title p {
  color: #fff;
  font-size: max(1vw, 1rem);
}
.header-title p.annotation {
  font-size: max(0.75vw, 0.75rem);
}

h1 {
  color: #fff;
  font-weight: bold;
  font-size: 3vw;
  line-height: 1.25;
}
.swiper-container {
  display: flex;
  z-index: -1;
  width: 100%;
  overflow: hidden;
}

.swiper-slide {
  align-items: center;
}
.swiper-slide img {
  align-items: flex-start;
  vertical-align: bottom;
  z-index: 9999;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
/* ----------------------------------------------
issue

----------------------------------------------*/
.issue h3 {
  margin: 0.875rem auto;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 700;
  font-size: 1.5rem;
}

.issue__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--contents-gap);
}
.issue__list li {
  display: grid;
  place-content: center;
  border-radius: 1rem;
  background-color: #ffffff;
  padding: 2.5rem 1.25rem;
  color: var(--color-main);
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
}

.issue__solution {
  margin: 0 calc(50% - 50vw);
  margin-top: 2.5rem;
  background: linear-gradient(-15deg, #006ab7 0%, #19d7cc 100%);
  padding: 2.5rem;
  width: 100vw;
}
.issue__solution p {
  color: #ffffff;
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
}

/* ----------------------------------------------
PLATFORM

----------------------------------------------*/
figure.platform-media {
  margin: 2.5rem auto;
  text-align: center;
}

.platform-merit-list {
  display: flex;
  row-gap: 2rem;
  flex-direction: column;
  margin-bottom: 4rem;
}

.platform-merit-item {
  display: flex;
  place-items: center;
  gap: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  padding: 1.25rem;
}
.platform-merit-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.merit-text {
  flex-grow: 7;
}
.merit-text > * + * {
  margin-top: 1rem;
}

.merit-image {
  flex-grow: 5;
  flex-shrink: 0;
}

.merit-text h3 {
  font-size: 1.5rem;
}

.merit-text h3 span {
  color: var(--color-main);
}

.case {
  display: grid;
  align-items: stretch;
  gap: 2.5rem;
  margin: 0 calc(50% - 50vw);
  border-radius: 2rem 2rem 0 0;
  background: linear-gradient(
      180deg,
      rgba(0, 163, 173, 0.15) 0%,
      rgba(27, 29, 126, 0.15) 100%
    ),
    #ffffff;
  padding: 5rem 0;
  width: 100vw;
}

.case h3 {
  font-size: 2rem;
  text-align: center;
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--contents-gap);
  width: 100%;
}

.case-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 1rem;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1.25rem;
}

.case-item h4 {
  place-self: center;
  line-height: 1.5;
  text-align: center;
}

.case-item p {
  min-height: 1.875rem;
  font-size: 0.75rem;
}

.case-item table tbody th {
  margin: 0 0.5rem 0 0;
  background: var(--color-main);
  width: 40%;
  min-width: 3.75rem;
  color: #fff;
  font-weight: normal;
  word-break: keep-all;
}

.case-item table tbody td {
  width: 100%;
  font-size: 0.875rem;
}

.case-item table tbody tr {
  display: flex;
  align-items: start;
  margin: 0 0 0.75rem 0;
}

.case-image-list {
  display: flex;
  justify-content: center;
}

.case-image-item {
  border-right: 1px solid #fff;
  padding: 1.25rem 2rem;
  text-align: center;
}

.case-image-item:last-child {
  border: none;
}
/* ----------------------------------------------
flow

----------------------------------------------*/
.flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--contents-gap);
}

.flow-list-item {
  background: #fff;
  padding: 1.25rem;
  text-align: center;
}

.flow-list-item h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
}

.flow-list-item h3 span {
  margin: 0 0.5rem 0 0;
  color: var(--color-main);
  font-size: 2.5rem;
}

.flow-list-item p {
  text-align: left;
}

.flow-list-item .annotation-paragraph {
  padding-left: 1rem;
  font-size: 0.75rem;
  text-indent: -1rem;
}

.flow-list-item .annotation-paragraph::before {
  content: "※";
}

.flow h4 {
  color: var(--color-main);
  font-size: 2rem;
  text-align: center;
}

.flow-annotation {
  color: #000;
  font-size: 0.75rem;
  text-align: center;
}
/* ----------------------------------------------
cta

----------------------------------------------*/
.cta-wrapper {
  background: linear-gradient(to bottom, var(--color-bg-gray) 0%, #ffffff 100%);
  padding: 5rem 0;
}

.cta {
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 2.5rem rgba(25, 215, 204, 0.2);
  border-radius: 1rem;
  background: linear-gradient(-30deg, var(--gradient-main));
  padding: 3.75rem min(5%, 4rem);
  width: min(90%, 85rem);
  overflow: hidden;
  text-align: center;
}

.cta h2 {
  position: relative;
  z-index: 999;
  margin: 0 0 2.5rem;
  color: #fff;
  font-size: 2rem;
  line-height: 1.4;
}

.cta a {
  display: block;
  position: relative;
  z-index: 999;
  margin: auto;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1rem 2rem;
  max-width: 20rem;
  color: #1b1d7e;
  font-weight: bold;
}

.cta::after {
  position: absolute;
  right: 0;
  bottom: -0.625rem;
  z-index: 1;
  width: 25rem;
  overflow: hidden;
  content: url(../images/ribon_cta.svg);
}

.cta-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 0 auto;
  width: min(90%, 75rem);
}
.cta-list a {
  display: inline-block;
  margin: 0;
  width: 100%;
}
/* ----------------------------------------------
support

----------------------------------------------*/
.support {
  background-color: #ffffff;
}

.support-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--contents-gap);
}

.support-list-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0.5rem;
}
.support-list-item h3 {
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-main);
  font-weight: 700;
  font-size: 1.25rem;
}
.support-list-item img {
  width: 100%;
}
.support-list-item .support-list-item__note {
  font-size: 0.75em;
}

/* ----------------------------------------------
semminar

----------------------------------------------*/
.seminar {
  background-color: #ffffff;
  padding-bottom: 5rem;
}

.seminar-profile {
  --basis-column: calc((100% - 2rem) / 3);
  display: flex;
  gap: var(--contents-gap);

  &:last-child {
    margin-top: 2.5rem;
  }
}

.seminar-profile figure {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: var(--basis-column);
}

.seminar-profile figure img {
  width: 100%;
}

.schedule {
  flex-grow: 2;
  flex-shrink: 0;
  flex-basis: calc(var(--basis-column) * 2);
  display: grid;
  row-gap: 1rem;
}

.schedule h3 {
  color: var(--color-main);
  font-size: 1.5rem;
}

.schedule h4 {
  font-size: 1.125em;
}

.schedule > div:not(:last-child) {
  margin-bottom: 0.5rem;
}

.schedule dl {
  display: flex;
  margin: 0 0 0.875rem 0;
}

.schedule dt {
  margin: 0 0.5rem 0 0;
  font-weight: 700;
}

.schedule-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--contents-gap) / 2);
}

li.schedule-item a {
  display: block;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  border: 1px solid #888888;
  border-radius: 0.5rem;
  background: var(--color-bg-gray);
  padding: 0.5rem;
  color: currentColor;
  text-align: center;
}
li.schedule-item a:not([tabindex="-1"]):hover {
  opacity: 1;
  background-color: var(--color-main);
  color: #ffffff;
}
li.schedule-item a[tabindex="-1"] {
  opacity: 0.4;
}
/* ----------------------------------------------
company

----------------------------------------------*/
.company {
  position: relative;
  border-radius: 2rem 2rem 0 0;
  background-color: var(--color-bg-gray);
}
.company::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  background-color: #ffffff;
  height: 3rem;
  content: "";
}

.company-table {
  /* stylelint-disable */
  --border: 1px solid #aaaaaa;
}
.company-table tr {
  display: flex;
  border-top: var(--border);
  padding: 2rem;
}
.company-table tr:last-child {
  border-bottom: var(--border);
}
.company-table th {
  width: 30%;
  text-align: left;
}
.company-table td {
  width: 70%;
}
/* ----------------------------------------------
footer

----------------------------------------------*/
footer {
  background: var(--color-main);
  padding: 2rem;
}

footer p {
  color: #fff;
  text-align: center;
}

/* .banner {
  position: fixed;
  right: 0;
  bottom: 2rem;
  opacity: 0;
  z-index: 999;
  filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.2));
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.banner.show {
  opacity: 1;
  pointer-events: all;
}

.banner-close {
  display: grid;
  position: absolute;
  top: 0;
  right: 1rem;
  place-content: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-color: var(--color-main);
  padding: 0;
  aspect-ratio: 1;
  width: 1.25rem;
} */

.banner {
  position: fixed;
  right: 0;
  bottom: 2rem;
  opacity: 0;
  z-index: 999;
  filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.2));
  transition: opacity 0.2s ease;
  pointer-events: none;
  padding: 1rem;
  color: white;
  font-size: 1rem;
  width: 300px;
  border-radius: 10px 0px 0px 10px;
}

.banner.show {
  opacity: 1;
  pointer-events: all;
}

#js-banner-partner {
  background: linear-gradient(-15deg, #006ab7 0%, #19d7cc 100%);
  color: white;
  border-radius: 10px 0px 0px 10px;
  bottom: 6rem;
  margin-bottom: 20px;
  padding: 30px;
}

#js-banner-freelance {
  background: linear-gradient(to right, #ff6b37, #f7991e);
  border-radius: 10px 0px 0px 10px;
  padding: 20px 30px;
}

.banner a {
  display: block;
  color: white;
  font-weight: bold;
  text-decoration: none;
  width: 100%;
  height: 100%;
  position: relative; /* 相対位置指定 */
  font-size: 1.2rem;
}

.banner-link {
  display: block;
  color: white;
  font-weight: bold;
  text-decoration: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.banner-close {
  position: absolute;
  top: -0.625rem;
  right: 1rem;
  display: grid;
  place-content: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0;
  aspect-ratio: 1;
  width: 1.25rem;
  z-index: 2; /* ボタンをリンクの上に表示 */
}

.banner-for {
  background-color: white;
  border-radius: 50px;
  text-align: center;
  width: 50%;
  font-size: 1rem;
  color: #00a3ad;
  font-weight: bold;
  margin-bottom: 5px;
}

.location-name {
  background-color: var(--color-main);
  color: white;
  text-align: center;
  width: fit-content;
  border-radius: 50px;
  font-weight: bold;
  display: inline-block;
  padding: 2px 17px;
  font-size: 18px;
  margin-bottom: 5px;
}
@media (max-width: 1024px) {
  .mainvisual-content {
    flex-direction: column;
    height: max(150vw, 95vh);
  }
  .mainvisual-left-content {
    padding: 1.25rem;
    width: 100%;
  }
  .mainvisual-left-content .logo {
    width: -moz-fit-content;
    width: fit-content;
    height: 2rem;
  }
  .mainvisual-left-content .logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  .mainvisual-left-content .catch {
    font-size: 4.75vw;
  }
  .mainvisual-left-content .header-title > *:not(:last-child) {
    margin-bottom: 0.5rem;
  }
  .mainvisual-left-content .header-title h1 {
    color: #fff;
    font-weight: bold;
    font-size: 9vw;
    line-height: 1.25;
  }
  .mainvisual-left-content .header-title p {
    color: #fff;
    font-size: max(1vw, 1rem);
    line-height: 1.25;
  }
  .mainvisual-left-content .header-title p.annotation {
    font-size: max(0.75vw, 0.75rem);
  }
  .mainvisual-left-content .badges img {
    width: min(20rem, 90vw);
    height: auto;
  }
  .mainvisual h2 {
    font-size: 15vw;
    text-align: left;
  }
  .swiper-slide img {
    -o-object-position: top;
    object-position: top;
  }
  .flow-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .cta-wrapper {
    padding: 3rem 0;
  }
  .cta h2 {
    font-size: 1.5rem;
  }
  .cta::after {
    width: 12.5rem;
    content: url(../images/ribon_cta.svg);
  }
  .cta-list {
    flex-direction: column;
  }
  .seminar-profile {
    flex-direction: column;
  }
  .support-list-item {
    margin: 0 0 1.5rem;
    width: 100%;
  }
  .schedule dl {
    display: block;
  }
  .company-table tr {
    justify-content: space-between;
    padding: 1rem;
  }
  .company-table td {
    width: 65%;
  }
}

@media (max-width: 800px) {
  figure.platform-media {
    margin: 0 auto;
  }
  .platform-merit-item,
  .platform-merit-item:nth-child(odd) {
    flex-direction: column;
  }
  .merit-text h3 {
    font-size: 1.25rem;
  }
  .case-item {
    width: 100%;
  }
  .case-image-list {
    flex-direction: column;
  }
  .case-image-item {
    border: none;
    padding: 1rem 1.25rem;
  }
  .schedule-list {
    grid-template-columns: auto;
  }
}

@media (max-width: 600px) {
  .mainvisual-content {
    height: max(200vw, 95vh);
  }
}

@media (max-width: 480px) {
  .flow-list {
    grid-template-columns: auto;
  }
  .banner {
    width: 100%;
    bottom: 0;
    border-radius: 0;
    padding: 0.5rem;
    font-size: 0.9rem;
  }

  .banner-link {
    padding: 0.5rem;
    text-align: center;
  }

  .banner-close {
    top: 0.25rem;
    right: 0.25rem;
    width: 1rem;
    height: 1rem;
  }

  #js-banner-partner {
    margin-bottom: -46px;
    border-radius: 0px;
    padding: 5px;
  }
  #js-banner-freelance {
    margin-bottom: 0px;
    border-radius: 0px;
    padding: 5px;
  }

  .banner a {
    font-size: 1rem;
  }

  .banner-for {
    font-size: 0.8rem;
    margin: 0 auto;
  }
}