@charset "UTF-8";
/* ==========================================================================
  component => top only
========================================================================== */
/* --------------------------------------------------------------------------
  c-top-header
-------------------------------------------------------------------------- */
.c-top-header--left {
  padding-bottom: var(--c-top-header-space-bottom);
}
.c-top-header--left .c-top-header__title--jp {
  font-size: var(--font-xxxl);
  font-weight: 700;
  line-height: 1.35;
}
.c-top-header--left .c-top-header__title--en {
  font-family: var(--font-roboto);
  font-weight: 700;
  font-size: var(--font-s);
  padding-top: var(--c-top-header-title-en-space-top);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.08em;
}
.c-top-header--left .c-top-header__subtitle {
  padding-top: var(--c-top-header-subtitle-space-top);
  font-size: var(--font-ll);
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .c-top-header--left .c-top-header__subtitle {
    line-height: 1.7;
  }
}
.c-top-header--center {
  padding-bottom: var(--c-top-header-space-bottom);
  text-align: center;
}
.c-top-header--center .c-top-header__title--jp {
  font-size: var(--font-xxxl);
  font-weight: 700;
  line-height: 1.35;
}
.c-top-header--center .c-top-header__title--en {
  font-family: var(--font-roboto);
  font-weight: 700;
  font-size: var(--font-s);
  padding-top: var(--c-top-header-title-en-space-top);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.08em;
}
.c-top-header--center .c-top-header__subtitle {
  padding-top: var(--c-top-header-subtitle-space-top);
  font-size: var(--font-ll);
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .c-top-header--center .c-top-header__subtitle {
    line-height: 1.7;
  }
}
/* --------------------------------------------------------------------------
  c-top-section
-------------------------------------------------------------------------- */
.c-top-section {
  padding-top: var(--c-top-section-space);
  padding-bottom: var(--c-top-section-space);
}
/* ==========================================================================
   index
========================================================================== */
/* --------------------------------------------------------------------------
  p-top-hero
-------------------------------------------------------------------------- */
.p-top-hero {
  position: relative;
  padding: var(--header-h) 0 40px;
}
@media screen and (min-width: 768px) {
  .p-top-hero {
    padding: 50px 0 43px;
  }
}
.p-top-hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
  background-image: url(../img/top/hero/bg_sp@2x.png);
}
@media screen and (min-width: 768px) {
  .p-top-hero::before {
    height: 126%;
    background-image: url(../img/top/hero/bg_pc@2x.webp);
  }
}

.p-top-hero__contents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "hero_image" "hero_side";
  gap: 25px 0;
}
@media screen and (min-width: 768px) {
  .p-top-hero__contents {
    grid-template-columns: 416px 1fr;
    grid-template-areas: "hero_side hero_image";
    justify-content: center;
    align-items: center;
    gap: 0 47px;
  }
}

.p-top-hero-image {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: hero_image;
}

.p-top-hero-side {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: hero_side;
  display: flex;
  flex-direction: column;
  gap: 48px 0;
}

@media screen and (min-width: 768px){
  .p-top-hero-image {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .p-top-hero-side {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
@media screen and (min-width: 768px) {
  .p-top-hero-side {
    gap: 60px 0;
  }
}

.p-top-hero-side__title {
  font-weight: 700;
}

.p-top-hero-side__title-title {
  width: min(100%, 290px);
}
@media screen and (min-width: 768px) {
  .p-top-hero-side__title-title {
    width: 100%;
  }
}

.p-top-hero-side__title-subtext {
  padding-top: 1.25em;
}
@media screen and (min-width: 768px) {
  .p-top-hero-side__title-subtext {
    font-size: 1.8rem;
  }
}

.p-top-hero-side__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px 0;
}
.p-top-hero-side__buttons-sideicon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 71px;
}
@media screen and (min-width: 768px) {
  .p-top-hero-side__buttons-sideicon {
    width: 71px;
  }
}

.p-top-hero-side__buttons-download::before {
  content: "ワンキャリアが3分でわかる";
  display: inline-block;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content;
  padding: 2px 16px;
  color: var(--color-main);
  font-size: 10px;
  line-height: 1.5;
  border-radius: 48px;
  background-color: var(--color-attention-yellow);
}
@media screen and (min-width: 768px) {
  .p-top-hero-side__buttons-download::before {
    top: -14px;
    font-size: 13px;
    padding: 0 16px;
  }
}

.p-top-hero-side__buttons-download-side {
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 66px;
}
@media screen and (min-width: 768px) {
  .p-top-hero-side__buttons-download-side {
    width: 71px;
  }
}

/* --------------------------------------------------------------------------
  .p-top-companies
-------------------------------------------------------------------------- */
.p-top-companies {
  padding: 32px 0;
}
/* --------------------------------------------------------------------------
  .p-top-feature
-------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .p-top-feature {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.p-top-feature {
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), rgba(68, 173, 233, 0.06) calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), rgba(68, 173, 233, 0.06) calc(100% - 1px));
  background-size: 45px 45px;
  background-repeat: repeat;
  background-position: center center;
}
@media screen and (min-width: 768px) {
  .p-top-feature {
    background-size: 48px 48px;
  }
}

.p-top-feature__text {
  padding-bottom: 24px;
  font-size: var(--font-ll);
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-top-feature__text {
    padding-bottom: 32px;
  }
}

/* --------------------------------------------------------------------------
  p-top-service
-------------------------------------------------------------------------- */
.p-top-service__contents:not(:nth-last-of-type(1)) {
  margin-bottom: 16px;
}
/* --------------------------------------------------------------------------
  p-top-scene
-------------------------------------------------------------------------- */
.p-top-scene-inner {
  padding-top: 80px;
}
@media screen and (min-width: 768px) {
  .p-top-scene-inner {
    padding-top: 80px;
  }
}
.p-top-scene-inner:not(:nth-last-of-type(1)) {
  padding-top: 24px;
}
@media screen and (min-width: 768px) {
  .p-top-scene-inner:not(:nth-last-of-type(1)) {
    padding-top: 40px;
  }
}

.p-top-scene__more {
  width: min(78vw, 300px);
  margin: auto;
  margin-top: 40px;
}
@media screen and (min-width: 768px) {
  .p-top-scene__more {
    width: 300px;
    margin-top: 64px;
  }
}

/* --------------------------------------------------------------------------
  .-top-reason
-------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .p-top-reason-header {
    text-align: center;
  }
}
@media screen and (min-width: 1100px) {
  .p-top-reason-header {
    text-align: left;
  }
}

.p-top-reason__contents {
  position: relative;
}
@media screen and (min-width: 1100px) {
  .p-top-reason__contents {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0 45px;
  }
}
.p-top-reason__contents::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  right: calc(var(--padding-side) * -1);
  aspect-ratio: 336/391;
  width: 170px;
  height: auto;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(../img/common/reason/image_sp@2x.png?20251023);
}
@media screen and (min-width: 768px) {
  .p-top-reason__contents::after {
    display: none;
    top: 350px;
    left: -460px;
    right: auto;
    aspect-ratio: 1460/1022;
    width: 730px;
    background-image: url(../img/common/reason/image_pc@2x.webp);
  }
}
@media screen and (min-width: 1100px) {
  .p-top-reason__contents::after {
    display: block;
  }
}

.p-top-reason-side {
  padding: 50px 0 80px;
}
@media screen and (min-width: 768px) {
  .p-top-reason-side {
    padding: 0;
  }
}

.p-top-reason-points {
  counter-reset: pointNumber 0;
  display: grid;
  grid-auto-rows: auto;
  gap: 24px 0;
}
@media screen and (min-width: 768px) {
  .p-top-reason-points {
    display: grid;
    grid-auto-rows: auto;
    gap: 16px 0;
  }
}

.p-top-reason-points__item {
  padding: 24px 16px;
  border-radius: var(--border-radius-m);
  background-color: var(--color-white);
}
@media screen and (min-width: 768px) {
  .p-top-reason-points__item {
    display: grid;
    grid-template-columns: 430px 1fr;
    grid-template-rows: auto;
    gap: 0 24px;
    padding: 32px;
  }
}
@media screen and (min-width: 1100px) {
  .p-top-reason-points__item {
    grid-template-columns: 367px 1fr;
  }
}

.p-top-reason-points-texts {
  font-size: var(--font-m);
  line-height: 1.65;
}

.p-top-reason-points-texts__titles {
  position: relative;
  padding-left: 66px;
}
@media screen and (min-width: 768px) {
  .p-top-reason-points-texts__titles {
    padding-left: 66px;
  }
}

.p-top-reason-points-texts__titles-point {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  align-content: center;
  width: 56px;
  height: 56px;
  color: var(--color-white);
  font-family: var(--font-roboto);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  background-color: var(--color-brand-blue--100);
  border-radius: 100%;
}
@media screen and (min-width: 768px) {
  .p-top-reason-points-texts__titles-point {
    width: 60px;
    height: 60px;
  }
}
.p-top-reason-points-texts__titles-point::before {
  content: "point";
  display: inline-block;
  font-size: 1rem;
}
.p-top-reason-points-texts__titles-point::after {
  counter-increment: pointNumber 1;
  content: counter(pointNumber, decimal-leading-zero);
  display: inline-block;
  font-size: var(--font-xxl);
}

.p-top-reason-points-texts__titles-subtitle {
  font-weight: 700;
}

.p-top-reason-points-texts__titles-title {
  font-size: var(--font-xxl);
  font-weight: 700;
  line-height: 1.3;
}

.p-top-reason-points-texts__text {
  padding-top: 1em;
}

.p-top-reason-points-texts__other {
  padding-top: 16px;
}
@media screen and (min-width: 768px) {
  .p-top-reason-points-texts__other {
    padding-top: 26px;
  }
}

.p-top-reason-points-texts__other-link {
  width: 160px;
  margin: 0 0 0 auto;
}
@media screen and (min-width: 768px) {
  .p-top-reason-points-texts__other-link {
    width: 180px;
    margin: 0;
  }
}

.p-top-reason-points-texts__other-notes {
  display: flex;
  flex-direction: column;
  gap: 6px 0;
}
.p-top-reason-points-texts__other-notes a {
  word-break: break-all;
}

.p-top-reason-points-image {
  overflow: hidden;
  margin-top: 24px;
  border-radius: var(--border-radius-s);
}
@media screen and (min-width: 768px) {
  .p-top-reason-points-image {
    margin-top: 0;
  }
}
.p-top-reason-points-image img {
  background-color: var(--color-bg-gray);
}

/* --------------------------------------------------------------------------
  p-top-case
-------------------------------------------------------------------------- */
.p-top-case__more {
  width: min(78vw, 300px);
  margin: 40px auto auto;
}
@media screen and (min-width: 768px) {
  .p-top-case__more {
    width: 300px;
    margin: auto;
    padding-top: 48px;
  }
}

/* --------------------------------------------------------------------------
  p-top-infos
-------------------------------------------------------------------------- */
.p-top-infos {
  padding-top: 0;
}

.p-top-infos__contents {
  display: grid;
  gap: 80px 0;
}
@media screen and (min-width: 768px) {
  .p-top-infos__contents {
    grid-template-columns: 1fr;
    gap: 0 64px;
  }
}
@media screen and (min-width: 1024px) {
  .p-top-infos__contents {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 768px) {
  .p-top-infos-inner:not(:nth-of-type(1)) {
    padding-top: 64px;
  }
}
@media screen and (min-width: 1024px) {
  .p-top-infos-inner:not(:nth-of-type(1)) {
    padding-top: 0;
  }
}
.p-top-infos-header {
  display: grid;
  grid-template-columns: 1fr 128px;
  padding-right: var(--padding-side);
  padding-bottom: 16px;
}
@media screen and (min-width: 768px) {
  .p-top-infos-header {
    grid-template-columns: 1fr 138px;
    padding-left: 0;
    padding-bottom: 24px;
  }
}

.p-top-infos-header__title {
  font-size: var(--font-xxl);
  font-weight: 700;
}
.p-top-infos-scroll {
  overflow-x: scroll;
  width: 100vw;
}

.p-top-infos-lists {
  overflow-x: auto;
  display: flex;
  width: 93.8461538462vw;
  padding-bottom: 15px;
}
@media screen and (min-width: 768px) {
  .p-top-infos-lists {
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 0;
    border-radius: var(--border-radius-m);
    border: 1px solid var(--color-bg-gray);
  }
}

.p-top-infos-lists__item {
  overflow: hidden;
  display: grid;
  min-width: 300px;
  margin-right: 16px;
  border: 1px solid var(--color-brand-gray--025);
  border-radius: var(--border-radius-s);
}
@media screen and (min-width: 768px) {
  .p-top-infos-lists__item:not(:nth-last-of-type(1)) {
    border-bottom: 1px solid var(--color-bg-gray);
  }
}
@media screen and (min-width: 768px) {
  .p-top-infos-lists__item {
    overflow: visible;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0 16px;
    width: 100%;
    min-width: inherit;
    margin: 0;
    padding: 24px;
    border: none;
    border-radius: 0;
  }
}
@media screen and (min-width: 1024px) {
  .p-top-infos-lists__item {
    grid-template-columns: 1fr 224px;
  }
}
.p-top-infos-lists__item:hover img {
  transform: scale(1.05);
}
.p-top-infos-lists__item:hover:has(.c-link-round-white--s) .c-link-round-white--s {
  background-color: var(--hover-color-bg-white);
}

.p-top-infos-lists__item-image {
  overflow: hidden;
  aspect-ratio: var(--aspect-ratio-thumbnail);
  border-radius: var(--border-radius-s);
}
.p-top-infos-lists__item-image img {
  transition: transform var(--link-transition-duration) ease;
}

.p-top-infos-lists__item-titles {
  padding: 16px 16px 24px;
}
@media screen and (min-width: 768px) {
  .p-top-infos-lists__item-titles {
    padding: 0;
  }
}

.p-top-infos-lists__item-titles-time {
  display: flex;
  gap: 0 8px;
  padding-bottom: 0.5em;
  color: var(--color-brand-blue--100);
  font-size: var(--font-s);
  font-weight: 700;
}

.p-top-infos-lists__item-titles-title {
  display: -webkit-box;
  -webkit-box-orient: vertical; /* 垂直方向に配置 */
  overflow: hidden; /* 溢れた部分を隠す */
  text-overflow: ellipsis; /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 2; /* 最大行数を2行に設定 */
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 1.4;
}

.p-top-infos-lists__item-more {
  width: 153px;
  margin: 16px auto 0;
}
@media screen and (min-width: 768px) {
  .p-top-infos-lists__item-more {
    width: 166px;
    margin: 16px 0 0 0;
  }
}
.p-top-infos-lists__item-more:has(.c-link-round-white--s) .c-link-round-white--s {
  transition: background-color var(--link-transition-duration) ease;
}

/* --------------------------------------------------------------------------
  p-top-support
-------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .p-top-support__contents {
    padding-top: 80px;
  }
}

/* --------------------------------------------------------------------------
  p-top-cv01
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  p-top-cv02
-------------------------------------------------------------------------- */
.p-top-cv02 {
  background: linear-gradient(180deg, var(--color-bg-gray) 0%, var(--color-bg-gray) 60%, var(--color-white) 60%, var(--color-white) 100%);
}
/* --------------------------------------------------------------------------
  p-top-news
-------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .p-top-news .c-container {
    --padding-side: 0;
  }
}

@media screen and (min-width: 768px) {
  .p-top-news {
    padding-bottom: 0;
  }
}

.p-top-news-lists {
  border-top: 1px solid var(--color-bg-gray);
  border-bottom: 1px solid var(--color-bg-gray);
}
@media screen and (min-width: 768px) {
  .p-top-news-lists {
    border-radius: var(--border-radius-m);
    border: 1px solid var(--color-bg-gray);
  }
}

.p-top-news-lists__item:not(:nth-last-of-type(1)) {
  border-bottom: 1px solid var(--color-bg-gray);
}
.p-top-news-lists__item:has(.c-list-news-thumb) .c-list-news-thumb {
  display: none;
}

.p-top-news__more {
  width: min(78vw, 300px);
  margin: 24px auto 0;
}
@media screen and (min-width: 768px) {
  .p-top-news__more {
    width: 300px;
    margin: 0 auto;
    padding-top: 48px;
  }
}