@charset "utf-8";


/* =========================================================
   社会保険労務士法人そら
   Servicesページ 改善CSS
========================================================= */


/* =========================================================
   共通レイアウト
========================================================= */

.sora-services-inner {
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
}


/* PCだけ改行 */
.sora-services-pc-only {
  display: inline;
}


/* =========================================================
   Services：ファーストビュー
========================================================= */

.sora-services-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 10vw, 138px) 0 clamp(72px, 8vw, 108px);

  background:
    linear-gradient(
      135deg,
      var(--sora-color-primary-pale, #f7fcfe) 0%,
      #ffffff 65%
    );
}


/* 背景のやわらかい円 */
.sora-services-hero::after {
  content: "";
  position: absolute;
  top: -150px;
  right: -120px;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background:
    rgba(78, 173, 211, 0.1);

  pointer-events: none;
}


.sora-services-hero__content {
  position: relative;
  z-index: 1;

  max-width: 800px;
}


/* 英字ラベル */
.sora-services-hero__label {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 0 0 18px;

  color: var(--sora-color-primary-dark, #176a91);

  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}


.sora-services-hero__label::before {
  content: "";

  width: 34px;
  height: 2px;

  border-radius: 999px;

  background:
    var(--sora-color-primary, #4eadd3);
}


/* H1 */
.sora-services-hero__title {
  margin: 0;

  color: var(--sora-color-navy, #173b55);

  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
}


/* 導入文章 */
.sora-services-hero__lead {
  max-width: 700px;

  margin: 28px 0 0;

  color: var(--sora-color-muted, #627884);

  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
}


/* =========================================================
   Services：提供体制
========================================================= */

.sora-services-guide {
  padding: clamp(76px, 8vw, 112px) 0;

  background: #ffffff;
}


/* セクション見出し */
.sora-services-section-heading {
  max-width: 800px;

  margin: 0 auto 48px;

  text-align: center;
}


.sora-services-section-heading__en {
  margin: 0 0 10px;

  color: var(--sora-color-primary-dark, #176a91);

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
}


.sora-services-section-heading__title {
  margin: 0;

  color: var(--sora-color-navy, #173b55);

  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}


.sora-services-section-heading__text {
  margin: 20px 0 0;

  color: var(--sora-color-text, #334a5a);

  font-size: 1rem;
  line-height: 1.95;
}


/* =========================================================
   2法人カード
========================================================= */

.sora-services-guide__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;
}


/*
  display:grid は、
  2つのカードをきれいに横並びにするCSSです。
*/
.sora-services-guide-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 34px;

  border:
    1px solid
    var(--sora-color-border, #d6e8ef);

  border-radius: 20px;

  color: inherit;
  background:
    var(--sora-color-primary-pale, #f7fcfe);

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


/* Sora Plus側 */
.sora-services-guide-card--plus {
  background: #ffffff;
}


/* 法人名 */
.sora-services-guide-card__company {
  display: inline-block;

  margin-bottom: 14px;

  color: var(--sora-color-primary-dark, #176a91);

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.6;
}


/* 支援領域 */
.sora-services-guide-card__title {
  color: var(--sora-color-navy, #173b55);

  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.55;
}


/* 説明 */
.sora-services-guide-card__text {
  margin-top: 14px;

  color: var(--sora-color-muted, #627884);

  font-size: 0.95rem;
  line-height: 1.9;
}


/* リンク部分 */
.sora-services-guide-card__link {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-top: 26px;

  color: var(--sora-color-primary-dark, #176a91);

  font-size: 0.92rem;
  font-weight: 700;
}


/* マウスが使えるPCのみhover */
@media (hover: hover) and (pointer: fine) {

  .sora-services-guide-card:hover {
    transform: translateY(-3px);

    border-color:
      rgba(78, 173, 211, 0.55);

    box-shadow:
      0 16px 38px
      rgba(23, 59, 85, 0.09);
  }

}


/* キーボード操作 */
.sora-services-guide-card:focus-visible {
  outline:
    3px solid
    var(--sora-color-focus, #ffbf47);

  outline-offset: 4px;
}


/* =========================================================
   タブレット・スマートフォン
========================================================= */

@media (max-width: 767px) {

  .sora-services-inner {
    width: min(100% - 36px, 720px);
  }


  .sora-services-pc-only {
    display: none;
  }


  /* ファーストビュー */
  .sora-services-hero {
    padding:
      64px 0
      62px;
  }


  .sora-services-hero::after {
    top: -100px;
    right: -160px;

    width: 320px;
    height: 320px;
  }


  .sora-services-hero__label {
    margin-bottom: 14px;

    font-size: 0.72rem;
  }


  .sora-services-hero__title {
    font-size:
      clamp(2rem, 11vw, 2.8rem);
  }


  .sora-services-hero__lead {
    margin-top: 20px;

    font-size: 0.94rem;
    line-height: 1.9;
  }


  /* 提供体制 */
  .sora-services-guide {
    padding: 64px 0 72px;
  }


  .sora-services-section-heading {
    margin-bottom: 32px;

    text-align: left;
  }


  .sora-services-section-heading__en {
    font-size: 0.72rem;
  }


  .sora-services-section-heading__title {
    font-size:
      clamp(1.55rem, 7vw, 2rem);
  }


  .sora-services-section-heading__text {
    margin-top: 16px;

    font-size: 0.92rem;
    line-height: 1.9;
  }


  /* 2カラム→1カラム */
  .sora-services-guide__grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .sora-services-guide-card {
    padding: 26px 22px;

    border-radius: 16px;
  }


  .sora-services-guide-card__company {
    margin-bottom: 10px;

    font-size: 0.78rem;
  }


  .sora-services-guide-card__title {
    font-size: 1.15rem;
  }


  .sora-services-guide-card__text {
    margin-top: 10px;

    font-size: 0.9rem;
  }


  .sora-services-guide-card__link {
    margin-top: 20px;
  }

}
/* =========================================================
   社会保険労務士法人そら：サービス一覧
========================================================= */

.sora-service-list {
  padding:
    clamp(80px, 9vw, 120px)
    0;

  background:
    var(--sora-color-primary-pale, #f7fcfe);
}


/* 見出し */
.sora-service-list__heading {
  max-width: 760px;

  margin-bottom: 48px;
}


.sora-service-list__company {
  margin: 0 0 10px;

  color:
    var(--sora-color-primary-dark, #176a91);

  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
}


.sora-service-list__en {
  margin: 0 0 12px;

  color:
    var(--sora-color-primary, #4eadd3);

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}


.sora-service-list__title {
  margin: 0;

  color:
    var(--sora-color-navy, #173b55);

  font-size:
    clamp(1.8rem, 3vw, 2.6rem);

  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}


.sora-service-list__lead {
  margin: 18px 0 0;

  color:
    var(--sora-color-muted, #627884);

  font-size: 1rem;
  line-height: 1.9;
}


/* =========================================================
   カード一覧
========================================================= */

.sora-service-list__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;
}


/*
  display:grid は、
  カードをきれいに2列で並べるためのCSSです。
*/
.sora-service-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 290px;

  padding: 32px;

  border:
    1px solid
    var(--sora-color-border, #d6e8ef);

  border-radius: 18px;

  color: inherit;
  background: #ffffff;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


/* 番号 */
.sora-service-card__number {
  margin-bottom: 22px;

  color:
    var(--sora-color-primary, #4eadd3);

  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


/* サービス名 */
.sora-service-card__title {
  margin: 0;

  color:
    var(--sora-color-navy, #173b55);

  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.55;
}


/* 説明文 */
.sora-service-card__text {
  margin: 14px 0 0;

  color:
    var(--sora-color-muted, #627884);

  font-size: 0.94rem;
  line-height: 1.9;
}


/* 詳しく見る */
.sora-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: auto;
  padding-top: 28px;

  color:
    var(--sora-color-primary-dark, #176a91);

  font-size: 0.9rem;
  font-weight: 700;
}


/* PC hover */
@media (hover: hover) and (pointer: fine) {

  .sora-service-card:hover {
    transform: translateY(-3px);

    border-color:
      rgba(78, 173, 211, 0.55);

    box-shadow:
      0 16px 38px
      rgba(23, 59, 85, 0.08);
  }

}


/* キーボード操作 */
.sora-service-card:focus-visible {
  outline:
    3px solid
    var(--sora-color-focus, #ffbf47);

  outline-offset: 4px;
}


/* =========================================================
   スマートフォン
========================================================= */

@media (max-width: 767px) {

  .sora-service-list {
    padding:
      68px
      0
      76px;
  }


  .sora-service-list__heading {
    margin-bottom: 30px;
  }


  .sora-service-list__company {
    font-size: 0.78rem;
  }


  .sora-service-list__en {
    font-size: 0.7rem;
  }


  .sora-service-list__title {
    font-size:
      clamp(1.55rem, 7vw, 2rem);
  }


  .sora-service-list__lead {
    margin-top: 14px;

    font-size: 0.92rem;
  }


  .sora-service-list__grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .sora-service-card {
    min-height: auto;

    padding: 25px 22px;

    border-radius: 16px;
  }


  .sora-service-card__number {
    margin-bottom: 14px;

    font-size: 0.76rem;
  }


  .sora-service-card__title {
    font-size: 1.12rem;
  }


  .sora-service-card__text {
    margin-top: 10px;

    font-size: 0.9rem;
  }


  .sora-service-card__link {
    margin-top: 22px;
    padding-top: 0;
  }

}
/* =========================================================
   株式会社Sora Plus：サービス一覧
========================================================= */

.sora-plus-service-list {
  padding:
    clamp(80px, 9vw, 120px)
    0;

  background: #ffffff;
}


/* =========================================================
   見出し
========================================================= */

.sora-plus-service-list__heading {
  max-width: 760px;

  margin-bottom: 48px;
}


.sora-plus-service-list__company {
  margin: 0 0 10px;

  color:
    var(--sora-color-primary-dark, #176a91);

  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
}


.sora-plus-service-list__en {
  margin: 0 0 12px;

  color:
    var(--sora-color-primary, #4eadd3);

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}


.sora-plus-service-list__title {
  margin: 0;

  color:
    var(--sora-color-navy, #173b55);

  font-size:
    clamp(1.8rem, 3vw, 2.6rem);

  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}


.sora-plus-service-list__lead {
  margin: 18px 0 0;

  color:
    var(--sora-color-muted, #627884);

  font-size: 1rem;
  line-height: 1.9;
}


/* =========================================================
   カード一覧
========================================================= */

.sora-plus-service-list__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;
}


/*
  2つのサービスを
  PCでは横並びにします。
*/
.sora-plus-service-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 300px;

  padding: 32px;

  border:
    1px solid
    var(--sora-color-border, #d6e8ef);

  border-radius: 18px;

  color: inherit;

  background:
    var(--sora-color-primary-pale, #f7fcfe);

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}


/* 番号 */
.sora-plus-service-card__number {
  margin-bottom: 10px;

  color:
    var(--sora-color-primary, #4eadd3);

  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


/* 提供法人 */
.sora-plus-service-card__provider {
  display: inline-block;

  width: fit-content;

  margin-bottom: 18px;
  padding: 5px 10px;

  border-radius: 999px;

  color:
    var(--sora-color-primary-dark, #176a91);

  background:
    rgba(78, 173, 211, 0.11);

  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.5;
}


/* サービス名 */
.sora-plus-service-card__title {
  margin: 0;

  color:
    var(--sora-color-navy, #173b55);

  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.55;
}


/* 説明 */
.sora-plus-service-card__text {
  margin: 14px 0 0;

  color:
    var(--sora-color-muted, #627884);

  font-size: 0.94rem;
  line-height: 1.9;
}


/* 詳しく見る */
.sora-plus-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: auto;
  padding-top: 28px;

  color:
    var(--sora-color-primary-dark, #176a91);

  font-size: 0.9rem;
  font-weight: 700;
}


/* =========================================================
   hover
========================================================= */




/* =========================================================
   スマートフォン
========================================================= */

@media (max-width: 767px) {

  .sora-plus-service-list {
    padding:
      68px
      0
      76px;
  }


  .sora-plus-service-list__heading {
    margin-bottom: 30px;
  }


  .sora-plus-service-list__company {
    font-size: 0.78rem;
  }


  .sora-plus-service-list__en {
    font-size: 0.7rem;
  }


  .sora-plus-service-list__title {
    font-size:
      clamp(1.55rem, 7vw, 2rem);
  }


  .sora-plus-service-list__lead {
    margin-top: 14px;

    font-size: 0.92rem;
  }


  .sora-plus-service-list__grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .sora-plus-service-card {
    min-height: auto;

    padding: 25px 22px;

    border-radius: 16px;
  }


  .sora-plus-service-card__number {
    font-size: 0.76rem;
  }


  .sora-plus-service-card__provider {
    margin-bottom: 14px;

    font-size: 0.7rem;
  }


  .sora-plus-service-card__title {
    font-size: 1.12rem;
  }


  .sora-plus-service-card__text {
    margin-top: 10px;

    font-size: 0.9rem;
  }


  .sora-plus-service-card__link {
    margin-top: 22px;
    padding-top: 0;
  }

}