/* =========================================================

   社会保険労務士法人そら

   全ページ共通カラーシステム

   2026

\========================================================= */





/* =========================================================

   01. COLOR TOKENS

\========================================================= */



:root {



  /* -----------------------------------------

     Brand

  ----------------------------------------- */



  /* SORAらしい空色

     装飾・ラベル・アイコン等 */

  --sora-brand-sky: #58b4d9;



  /* 通常のブランドブルー */

  --sora-brand-blue: #14759d;



  /* CTA・重要箇所 */

  --sora-brand-deep: #0b6289;



  /* 最も濃い見出し色 */

  --sora-brand-navy: #163b52;





  /* -----------------------------------------

     Text

  ----------------------------------------- */



  /* 本文 */

  --sora-text-main: #354d5c;



  /* 補足 */

  --sora-text-muted: #657985;



  /* さらに弱い補足 */

  --sora-text-light: #7d909a;





  /* -----------------------------------------

     Background

  ----------------------------------------- */



  --sora-bg-white: #ffffff;



  /* 非常に薄い水色 */

  --sora-bg-pale: #f7fbfd;



  /* 淡い水色 */

  --sora-bg-light: #edf7fb;



  /* 人柄・採用・温かいコンテンツ */

  --sora-bg-warm: #faf7f2;





  /* -----------------------------------------

     Border

  ----------------------------------------- */



  --sora-border: #d4e5ec;



  --sora-border-strong: #b9d9e5;





  /* -----------------------------------------

     Accent

  ----------------------------------------- */



  /* 注意事項のみ使用 */

  --sora-accent: #f3a93b;



  --sora-accent-bg: #fff9ee;



  --sora-accent-border: #efd7a8;





  /* -----------------------------------------

     Shadows

  ----------------------------------------- */



  --sora-shadow-card:

    0 8px 24px rgba(22, 59, 82, 0.06);



  --sora-shadow-soft:

    0 12px 32px rgba(22, 59, 82, 0.08);



  --sora-shadow-button:

    0 10px 24px rgba(11, 98, 137, 0.18);





  /* -----------------------------------------

     Compatibility

     既存CSS用

  ----------------------------------------- */



  --sora-color-primary: var(--sora-brand-sky);



  --sora-color-primary-dark: var(--sora-brand-blue);



  --sora-color-primary-deep: var(--sora-brand-deep);



  --sora-color-navy: var(--sora-brand-navy);



  --sora-color-text: var(--sora-text-main);



  --sora-color-muted: var(--sora-text-muted);



  --sora-color-primary-light: var(--sora-bg-light);



  --sora-color-primary-pale: var(--sora-bg-pale);



  --sora-color-white: var(--sora-bg-white);



  --sora-color-warm: var(--sora-bg-warm);



  --sora-color-border: var(--sora-border);



}





/* =========================================================

   02. GLOBAL

\========================================================= */



html {

  background:

    var(--sora-bg-white);

}





body {

  color:

    var(--sora-text-main);



  background:

    var(--sora-bg-white);

}





body,

button,

input,

textarea,

select {

  color:

    var(--sora-text-main);

}





h1,

h2,

h3,

h4,

h5,

h6 {

  color:

    var(--sora-brand-navy);

}





p,

li,

dd,

td {

  color:

    var(--sora-text-main);

}





a {

  color:

    var(--sora-brand-blue);

}





a:hover {

  color:

    var(--sora-brand-deep);

}





/* =========================================================

   03. HEADER

\========================================================= */







.p-header__link,

.p-header__submenu-button {

  color:

    var(--sora-brand-navy);

}





.p-header__link:hover,

.p-header__submenu-button:hover {

  color:

    var(--sora-brand-blue);

}





.p-header__submenu {

  background:

    var(--sora-bg-white);



  border:

    1px solid var(--sora-border);



  box-shadow:

    var(--sora-shadow-soft);

}





.p-header__submenu a {

  color:

    var(--sora-text-main);

}





.p-header__submenu a:hover {

  color:

    var(--sora-brand-blue);



  background:

    var(--sora-bg-pale);

}





/* 電話 */



.p-header__phone-label {

  color:

    var(--sora-text-muted);

}





.p-header__phone-number {

  color:

    var(--sora-brand-deep);

}





.p-header__phone-hours {

  color:

    var(--sora-text-muted);

}





/* 通常お問い合わせ */



.p-header__contact {

  color:

    var(--sora-brand-deep);



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-brand-blue);

}





.p-header__contact:hover {

  color:

    var(--sora-bg-white);



  background:

    var(--sora-brand-blue);

}





/* スマホお問い合わせ */



.p-header__mobile-contact-link {

  color:

    var(--sora-bg-white);



  background:

    var(--sora-brand-deep);

}





/* =========================================================

   04. COMMON CTA

\========================================================= */



.sora-top-button--primary,

.sora-services-cta__button,

.sora-price-cta__button,

.sora-members-contact__button,

.recruit-btn--primary {



  color:

    var(--sora-bg-white) !important;



  background:

    var(--sora-brand-deep) !important;



  border-color:

    var(--sora-brand-deep) !important;



  box-shadow:

    var(--sora-shadow-button);

}





.sora-top-button--primary:hover,

.sora-services-cta__button:hover,

.sora-price-cta__button:hover,

.sora-members-contact__button:hover,

.recruit-btn--primary:hover {



  color:

    var(--sora-bg-white) !important;



  background:

    var(--sora-brand-navy) !important;



  border-color:

    var(--sora-brand-navy) !important;

}





/* サブCTA */



.sora-top-button--secondary,

.sora-services-guide-card__link,

.sora-service-card__link,

.sora-price-nav-card__link {



  color:

    var(--sora-brand-deep);



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-brand-blue);

}





/* =========================================================

   05. COMMON LABELS

\========================================================= */



.sora-services-hero__label,

.sora-services-section-heading__en,

.sora-service-details__en,



.sora-price-hero__label,

.sora-price-heading__en,

.sora-price-section-head__en,



.sora-top-fv__label,

.sora-top-brand-message__eyebrow,



.sora-about-hero__en,

.sora-about-section-label,



.sora-members-hero__en,

.sora-members__label,



.recruit-hero__en,

.recruit-heading__en,

.recruit-entry__en,



.contact-hero__en,

.contact-intro__label,

.contact-form-section__en,



.privacy-hero__en,



.topics-eyebrow,



.news-eyebrow,



.voices-eyebrow {



  color:

    var(--sora-brand-blue) !important;

}





/* =========================================================

   06. TOP PAGE

\========================================================= */





/* ABOUT */



.sora-top-about {

  background:

    var(--sora-bg-white);

}





/* ブランドメッセージ */



.sora-top-brand-message {

  background:

    var(--sora-bg-pale);

}





/* サービス */



.sora-top-services {

  background:

    var(--sora-bg-white);

}





/* お悩み */



.sora-top-concerns {

  background:

    var(--sora-bg-pale);

}





/* 人・日常 */



.sora-daily {

  background:

    var(--sora-bg-warm);

}





/* トピックス */



.sora-top-tips {

  background:

    var(--sora-bg-light);

}





/* 採用 */



.sora-top-recruit {

  background:

    var(--sora-bg-white);

}





/* カード */



.sora-top-service-card,

.sora-top-concern-card,

.sora-top-voice-card {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





/* =========================================================

   07. SERVICES

   サービス一覧・サービス詳細共通

\========================================================= */



.sora-services-hero {

  background:

    var(--sora-bg-light);

}





.sora-services-hero__title {

  color:

    var(--sora-brand-navy);

}





.sora-services-hero__lead {

  color:

    var(--sora-text-main);

}





/* ガイド */



.sora-services-guide {

  background:

    var(--sora-bg-white);

}





.sora-services-guide-card {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.sora-services-guide-card--plus {

  background:

    var(--sora-bg-pale);

}





/* サービスカード */



.sora-service-list {

  background:

    var(--sora-bg-pale);

}





.sora-service-card {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.sora-service-card__number {

  color:

    var(--sora-brand-sky);

}





.sora-service-card__title {

  color:

    var(--sora-brand-navy);

}





.sora-service-card__text {

  color:

    var(--sora-text-main);

}





/* 詳細ページ */



.sora-service-details {

  background:

    var(--sora-bg-white);

}





.sora-service-details--plus {

  background:

    var(--sora-bg-pale);

}





.sora-service-detail {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.sora-service-detail__subtitle,

.sora-service-detail__summary-text {

  color:

    var(--sora-brand-navy);

}





.sora-service-detail__number {

  color:

    var(--sora-brand-blue);

}





.sora-service-detail__list li::marker {

  color:

    var(--sora-brand-sky);

}





/* 注意事項 */



.sora-service-detail__caution {



  color:

    var(--sora-text-main);



  background:

    var(--sora-accent-bg);



  border-color:

    var(--sora-accent-border);

}





.sora-service-detail__caution strong {

  color:

    #9a6415;

}





/* 料金誘導 */



.sora-services-price-guide {

  background:

    var(--sora-bg-warm);

}





/* 最終CTA */



.sora-services-cta {

  background:

    var(--sora-bg-light);

}





/* =========================================================

   08. PRICE

\========================================================= */



.sora-price-hero {

  background:

    var(--sora-bg-light);

}





.sora-price-nav {

  background:

    var(--sora-bg-white);

}





.sora-price-nav-card {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.sora-price-nav-card--plus {

  background:

    var(--sora-bg-pale);

}





.sora-price-section {

  background:

    var(--sora-bg-white);

}





.sora-price-section--pale {

  background:

    var(--sora-bg-pale);

}





.sora-price-section--plus {

  background:

    var(--sora-bg-light);

}





.sora-price-table {

  border-color:

    var(--sora-border);

}





.sora-price-table th {

  color:

    var(--sora-brand-navy);



  background:

    var(--sora-bg-light);

}





.sora-price-table td {

  color:

    var(--sora-text-main);



  background:

    var(--sora-bg-white);

}





/* =========================================================

   09. ABOUT / COMPANY

\========================================================= */



.sora-about-hero {

  background:

    var(--sora-bg-light);

}





.sora-about-hero__title,

.sora-about-section-title {

  color:

    var(--sora-brand-navy);

}





.sora-about-hero__text,

.sora-about-intro__text {

  color:

    var(--sora-text-main);

}





.sora-about-intro {

  background:

    var(--sora-bg-white);

}





.sora-about-intro__points li {



  background:

    var(--sora-bg-pale);



  border-color:

    var(--sora-border);

}





/* =========================================================

   10. MEMBERS

\========================================================= */



.sora-members-hero {

  background:

    var(--sora-bg-light);

}





.sora-members {

  background:

    var(--sora-bg-white);

}





.sora-member-card {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.sora-member-card__company,

.sora-member-card__role {

  color:

    var(--sora-brand-blue);

}





.sora-member-card__name {

  color:

    var(--sora-brand-navy);

}





.sora-member-card__description {

  color:

    var(--sora-text-main);

}





.sora-members-about {

  background:

    var(--sora-bg-warm);

}





.sora-members-contact {

  background:

    var(--sora-bg-light);

}





/* =========================================================

   11. RECRUIT

\========================================================= */



.recruit-page {

  color:

    var(--sora-text-main);

}





.recruit-hero {

  background:

    var(--sora-bg-light);

}





.recruit-hero__title,

.recruit-heading__title {

  color:

    var(--sora-brand-navy);

}





.recruit-message {

  background:

    var(--sora-bg-white);

}





.recruit-work {

  background:

    var(--sora-bg-pale);

}





.recruit-work-card,

.recruit-feature-card {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.recruit-features {

  background:

    var(--sora-bg-warm);

}





/* =========================================================

   12. VOICES

   お客様の声

\========================================================= */



.voices-main {

  color:

    var(--sora-text-main);

}





.voices-hero {

  background:

    var(--sora-bg-light);

}





.voices-hero__title,

.voices-heading {

  color:

    var(--sora-brand-navy);

}





.voices-intro {

  background:

    var(--sora-bg-white);

}





.voices-list {

  background:

    var(--sora-bg-pale);

}





.voice-card {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.voice-card__industry {

  color:

    var(--sora-brand-blue);

}





.voice-card__company {

  color:

    var(--sora-brand-navy);

}





.voice-card__quote {

  color:

    var(--sora-brand-deep);

}





.voices-policy {

  background:

    var(--sora-bg-warm);

}





/* =========================================================

   13. TOPICS

\========================================================= */



.topics-main {

  color:

    var(--sora-text-main);

}





.topics-hero {

  background:

    var(--sora-bg-light);

}





.topics-hero__title,

.topics-heading {

  color:

    var(--sora-brand-navy);

}





.topics-intro {

  background:

    var(--sora-bg-white);

}





.topics-hattori {

  background:

    var(--sora-bg-pale);

}





.topics-hattori-card,

.topics-sns-card,

.topics-professional__box {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





/* 働く人向け */



.topics-audience--worker {

  background:

    var(--sora-bg-light);

}





/* 企業向け */



.topics-audience--company {

  background:

    var(--sora-bg-warm);

}





/* =========================================================

   14. NEWS

\========================================================= */



.news-main {

  color:

    var(--sora-text-main);

}





.news-hero {

  background:

    var(--sora-bg-light);

}





.news-hero__title,

.news-heading {

  color:

    var(--sora-brand-navy);

}





.news-intro {

  background:

    var(--sora-bg-white);

}





.news-list {

  background:

    var(--sora-bg-pale);

}





.news-card__link {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.news-card__category {

  color:

    var(--sora-brand-blue);



  background:

    var(--sora-bg-light);

}





.news-card__title {

  color:

    var(--sora-brand-navy);

}





.news-card__excerpt {

  color:

    var(--sora-text-main);

}





/* =========================================================

   15. CONTACT

\========================================================= */



.contact-page {

  color:

    var(--sora-text-main);

}





.contact-hero {

  background:

    var(--sora-bg-light);

}





.contact-hero__title,

.contact-intro__title,

.contact-form-section__title {

  color:

    var(--sora-brand-navy);

}





.contact-intro {

  background:

    var(--sora-bg-white);

}





.contact-reassurance {

  background:

    var(--sora-bg-pale);

}





.contact-reassurance__item {



  background:

    var(--sora-bg-white);



  border-color:

    var(--sora-border);



  box-shadow:

    var(--sora-shadow-card);

}





.contact-reassurance__number {

  color:

    var(--sora-brand-sky);

}





.contact-form-section {

  background:

    var(--sora-bg-white);

}





.contact-tel {

  background:

    var(--sora-bg-light);

}





.contact-tel__number {

  color:

    var(--sora-brand-deep);

}





/* =========================================================

   16. PRIVACY

\========================================================= */



.privacy-page {

  color:

    var(--sora-text-main);

}





.privacy-hero {

  background:

    var(--sora-bg-light);

}





.privacy-hero__title,

.privacy-section h2 {

  color:

    var(--sora-brand-navy);

}





.privacy-content {

  background:

    var(--sora-bg-white);

}





.privacy-section {

  border-color:

    var(--sora-border);

}





.privacy-contact {

  background:

    var(--sora-bg-pale);

}





/* =========================================================

   17. FOCUS

   キーボード操作対応

\========================================================= */



a:focus-visible,

button:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible {



  outline:

    3px solid rgba(88, 180, 217, 0.42);



  outline-offset:

    3px;

}





/* =========================================================

   18. SELECTION

\========================================================= */



::selection {

  color:

    var(--sora-brand-navy);



  background:

    #d9f1fa;

}





/* =========================================================

   19. MOBILE

\========================================================= */



@media screen and (max-width: 767px) {



  .sora-services-hero,

  .sora-price-hero,

  .sora-about-hero,

  .sora-members-hero,

  .recruit-hero,

  .voices-hero,

  .topics-hero,

  .news-hero,

  .contact-hero,

  .privacy-hero {



    background:

      var(--sora-bg-light);

  }





  .sora-service-card,

  .sora-services-guide-card,

  .sora-price-nav-card,

  .sora-member-card,

  .voice-card,

  .recruit-work-card,

  .recruit-feature-card,

  .topics-hattori-card,

  .contact-reassurance__item {



    box-shadow:

      0 6px 18px rgba(22, 59, 82, 0.055);

  }



}
/* =========================================================
   COMMON SECTION HEADING
========================================================= */

.sora-section-heading {
  max-width: 760px;

  margin: 0 auto 48px;

  text-align: center;
}

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

  color: var(--sora-brand-blue);

  font-size: 12px;
  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.18em;
}

.sora-section-heading__title {
  margin: 0;

  color: var(--sora-brand-navy);

  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 700;

  line-height: 1.45;
}

.sora-section-heading__text {
  max-width: 640px;

  margin: 20px auto 0;

  color: var(--sora-text-main);

  font-size: 16px;

  line-height: 1.9;
}


@media (max-width: 767px) {

  .sora-section-heading {
    margin-bottom: 34px;

    text-align: left;
  }

  .sora-section-heading__title {
    font-size: clamp(26px, 7vw, 34px);
  }

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

    font-size: 14px;
  }

}
/* =========================================================
   COMMON SECTION BACKGROUND
========================================================= */

.sora-section {
  position: relative;

  width: 100%;

  padding: clamp(80px, 8vw, 120px) 0;
}


/* 白 */
.sora-section--white {
  background: var(--sora-bg-white, #ffffff);
}


/* ごく薄い空色 */
.sora-section--pale {
  background: var(--sora-bg-pale, #f7fbfd);
}


/* 薄い空色 */
.sora-section--light {
  background: var(--sora-bg-light, #edf7fb);
}


/* 温かみ */
.sora-section--warm {
  background: var(--sora-bg-warm, #faf7f2);
}


/* スマートフォン */
@media (max-width: 767px) {

  .sora-section {
    padding: 64px 0;
  }

}