@charset "UTF-8";
/* ===================================================================
   PC Styles (1025px以上)
   =================================================================== */

@media screen and (min-width: 1025px) {
  
  /* ===================================================================
     Base Styles
     =================================================================== */
  body {
    font-family: var(--font-sans);
    font-size: 0.9em;
    color: var(--color-text);
  }

  #wrapper {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  a {
    color: var(--color-brand);
    transition: all 0.5s ease;
    text-decoration: none;
  }
  a:link { color: var(--color-brand); }
  a:visited { opacity: 0.5; color: var(--color-brand); }
  a:hover { opacity: 0.5; }

  li { list-style-type: none; }
  .sp { display: none; }
  .clear { clear: both; }

  /* ===================================================================
     Typography
     =================================================================== */
  h1 { text-align: center; }
  
  h2 {
    font-family: 'Quicksand', sans-serif;
    text-align: center;
    color: var(--color-text);
    font-size: 1.5em;
    letter-spacing: 0.2em;
    font-weight: normal;
    padding-bottom: 48px;
  }

  h3 {
    text-align: center;
    font-size: 1.4em;
    line-height: 1.4em;
    letter-spacing: 0.2em;
    color: var(--color-text);
    font-weight: normal;
  }

  h4 {
    font-size: 1.2em;
    letter-spacing: 0.2em;
    color: var(--color-text);
    font-weight: normal;
  }

  /* ===================================================================
     Header & Navigation
     =================================================================== */
  .inner {
    width: 96%;
    margin: 0 auto;
  }
  .inner:after {
    content: "";
    clear: both;
    display: block;
  }

  #top-head {
    top: -100px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 10px 0 0;
    line-height: 1;
    z-index: 999;
  }
  #top-head a, #top-head {
    color: var(--color-gray-500);
    text-decoration: none;
  }
  #top-head .inner {
    position: relative;
  }
  #top-head .logo {
    float: left;
  }
  #top-head .logo img {
    width: 180px;
  }

  #global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 30px;
    font-size: 14px;
  }
  #global-nav ul li {
    float: left;
    letter-spacing: 0.3em;
  }
  #global-nav ul li a {
    padding: 0 20px;
  }

  /* Fixed Header */
  #top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    background: rgba(255, 255, 255, 0.95);
    transition: top 0.65s ease-in;
  }
  #top-head.fixed .logo {
    font-size: 24px;
  }
  #top-head.fixed #global-nav ul {
    top: 30px;
    font-size: 14px;
  }
  #top-head.fixed #global-nav ul li {
    letter-spacing: 0.3em;
  }
  #top-head.fixed #global-nav ul li a {
    color: var(--color-gray-500);
    padding: 0 20px;
  }

  /* Mobile Toggle (Hidden on PC) */
  #nav-toggle {
    display: none;
  }

  /* ===================================================================
     Common Components
     =================================================================== */
  
  /* Buttons */
  div.btn {
    width: 100%;
    text-align: center;
    margin-top: 16px;
  }

  .btn_more {
    display: inline-block;
    width: 260px;
    padding: 16px 0;
    text-decoration: none;
    color: var(--color-brand);
    border: solid 1.5px var(--color-brand);
    border-radius: 3px;
    transition: 0.4s;
    letter-spacing: 0.4em;
    font-size: 1.4em;
    font-weight: 300;
  }
  .btn_more:hover, .btn_more:link, .btn_more:active {
    color: var(--color-brand);
    background: var(--color-white);
  }

  .btn_contact {
    display: inline-block;
    width: 340px;
    padding: 24px 0;
    text-decoration: none;
    color: var(--color-white);
    background: var(--color-brand);
    border: solid 2px var(--color-brand);
    border-radius: 3px;
    transition: 0.4s;
    letter-spacing: 0.2em;
    font-size: 1.2em;
  }
  .btn_contact:hover, .btn_contact:link, .btn_contact:active {
    color: var(--color-white);
  }

  /* Text Area */
  div.text_area {
    width: 630px;
    margin: 32px auto;
    letter-spacing: 0.1em;
    line-height: 2em;
    font-size: 14px;
  }

  /* Breadcrumb */
  div#breadcrumb {
    width: 100%;
    margin: 12px 0 0 24px;
    font-size: 14px;
  }
  .breadcrumb {
    padding-left: 0;
    margin-left: 0;
  }
  .breadcrumb li {
    display: inline;
    list-style: none;
    font-weight: bold;
  }
  .breadcrumb li:after {
    content: '>';
    padding: 0 3px;
    color: var(--color-breadcrumb-sep);
  }
  .breadcrumb li:last-child:after {
    content: '';
  }
  .breadcrumb li a {
    text-decoration: none;
    color: var(--color-brand);
  }
  .breadcrumb a.here:link {
    color: var(--color-breadcrumb-sep);
  }

  span.attention {
    color: var(--color-attention);
    font-size: 10px;
    line-height: 20px;
  }

  /* ===================================================================
     Section: Common Contact
     =================================================================== */
  div#common_contact section {
    width: 800px;
    margin: 0 auto;
    padding: 48px 0 144px;
  }
  div#common_contact h2 {
    text-align: center;
    margin-left: 20px;
    margin-bottom: -16px;
  }
  div#common_contact p {
    text-align: center;
    letter-spacing: 0.4em;
    line-height: 1em;
    margin: 16px 0 32px;
    clear: both;
    font-size: 14px;
  }
  div.common_contact_recruit {
    width: 48%;
    float: left;
    margin-right: 12px;
  }
  div.common_contact_other {
    width: 48%;
    float: right;
  }
  .btn_common_contact {
    width: 90%;
    margin: 56px auto 0;
  }

  /* ===================================================================
     Footer
     =================================================================== */
  #footer {
    width: 100%;
    margin: 0;
    letter-spacing: 0.1em;
    font-size: 12px;
    padding: 24px 0 32px;
    overflow: hidden;
    background-color: #e4efff;
  }
  #footer section {
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
  }
  .footer_left {
    float: left;
  }
  .footer_right {
    float: right;
    margin-top: 22px;
  }
  #footer h3 img {
    width: 220px;
  }
  .footer_address {
    float: right;
    clear: both;
    overflow: hidden;
    line-height: 1.6em;
  }
  .copyright {
    width: 100%;
    padding-bottom: 20px;
    text-align: center;
    font-size: 0.7em;
    letter-spacing: 0.2em;
  }

  /* ===================================================================
     Section: Top Main (Hero)
     =================================================================== */
  div#top_main {
    background-size: contain;
  }
  div#top_main section {
    width: 800px;
    margin: 0 auto;
  }

  /* ===================================================================
     Section: Vision
     =================================================================== */
  div#top_vision {
    width: 100%;
    background-image: url(/img/vision_mainvisual.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 65%;
  }
  div#top_vision section {
    padding: 120px 0 116px;
    width: 800px;
    margin: 0 auto;
  }
  div#top_vision h2 {
    color: var(--color-white);
  }
  div#top_vision h3 {
    text-align: center;
    color: var(--color-white);
    font-size: 19px;
    letter-spacing: 0.1em;
  }
  div#top_vision .text_area {
    color: var(--color-white);
    text-shadow: 0 3px 6px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8);
    font-size: 17px;
    line-height: 1.8;
  }

  /* ===================================================================
     Section: WinActor (Vision Header)
     =================================================================== */
  div#top_winactor {
    width: 800px;
    margin: 0 auto;
  }
  div#top_winactor section {
    width: 800px;
    padding: 56px 0 144px;
    margin: 0 auto;
  }
  div#top_winactor h2 {
    padding-bottom: 4px;
  }
  div#top_winactor h3 {
    width: 100%;
    margin-bottom: 24px;
    text-align: center;
  }

  /* ===================================================================
     Section: Service (RECRUIT-STYLE CARDS WITH PHOTOS)
     =================================================================== */
  div#top_service {
    width: 100%;
    margin: 0 auto;
  }
  div#top_service section {
    width: 90%;
    max-width: 1100px;
    padding: 80px 0 240px;
    margin: 0 auto;
  }

  /* Service Cards Grid - Same as Recruit */
  div#top_service .service-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 60px !important;
    margin-top: 48px;
    width: 100%;
  }

  div#top_service .service-cards-grid > a {
    text-decoration: none;
    display: block;
    height: 100%;
  }

  /* Service Card - Same structure as Recruit */
  div#top_service ul.service-card {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 28px;
    list-style: none;
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0;
    background: #fff;
    transition: opacity 0.3s ease, transform 0.2s ease;
  }
  div#top_service ul.service-card:hover {
    opacity: 0.8;
    transform: translateY(-2px);
  }

  /* All li elements */
  div#top_service ul.service-card li {
    position: relative;
    text-align: center;
    background-color: #fff;
    padding: 0;
    margin: 0;
  }

  /* 1st row: Title */
  div#top_service .service-title {
    padding-bottom: 20px;
  }
  div#top_service .service-title h3 {
    margin: 0;
    text-align: center;
    color: var(--color-text);  /* ← サービス見出しと同じ色に統一 */
    font-weight: bold;
    font-size: 1.4em;
    letter-spacing: 0.1em;
    line-height: 1.3;
  }

  /* 2nd row: Image + Overlaid Button */
  div#top_service .service-image {
    padding-bottom: 20px;
    position: relative;
  }
  div#top_service .service-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
    transition: transform 0.3s ease;
  }
  div#top_service ul.service-card:hover .service-image img {
    transform: scale(1.02);
  }

  /* 画像内に「詳細」ボタンをオーバーレイ */
  div#top_service .service-image .service-btn {
    position: absolute;
    left: 50%;
    top: 62%;                         /* 真ん中より少し下 */
    transform: translate(-50%, -50%);
    margin: 0;
  }

  /* 通常時：半透明背景 + ピンク文字 */
  div#top_service .service-image .service-btn .btn_more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 7rem;
    padding: 0.6em 1.8em;
    line-height: 1;
    border-radius: 3px;
    border: 2px solid var(--color-accent);
    background: transparent;
    color: var(--color-accent);             /* 文字ピンク */
    letter-spacing: 0.2em;
    font-weight: 600;
    white-space: nowrap;
  }

  /* ホバー時：ピンク背景 + 白文字 */
  div#top_service .service-cards-grid > a:hover .service-image .service-btn .btn_more,
  div#top_service .service-cards-grid > a:focus .service-image .service-btn .btn_more {
    background: var(--color-accent);
    color: #ffffff;
  }

/* ==============================================================
   TOP Service Section - Modern Layout (B案)
   PC: 3列グリッド
   ============================================================== */

div#top_service.service-modern section {
  width: 90%;
  max-width: 1120px;
  padding: 80px 0 160px;
  margin: 0 auto;
}

div#top_service.service-modern .service-intro {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--color-text);
  font-size: 0.95em;
}

div#top_service.service-modern .service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 32px;
}

/* カード本体 */
div#top_service.service-modern .service-item {
  background: #f6f7ff;
  border-radius: 10px;
  padding: 24px 24px 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

div#top_service.service-modern .service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
}

/* アイコン（画像を小さめに切り抜いて使う） */
div#top_service.service-modern .service-icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
}
div#top_service.service-modern .service-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル & 説明 */
div#top_service.service-modern .service-title {
  margin: 0 0 12px;
  font-size: 1.1em;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-text);
}

div#top_service.service-modern .service-text {
  margin: 0 0 20px;
  font-size: 0.9em;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

/* ボタン（下部固定） */
div#top_service.service-modern .service-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.0em 2.4em !important;
  border-radius: 999px;
  border: 2px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font-size: 1.1em !important;
  letter-spacing: 0.16em;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

div#top_service.service-modern .service-link:hover,
div#top_service.service-modern .service-link:focus-visible {
  background: var(--color-accent);
  color: #ffffff;
  transform: translateY(-1px);
}



  /* 旧 .service-button ブロックは HTML からは参照されなくなるが、
     他影響を避けるため CSS は残しておいても問題なし */


  /* ===================================================================
     Section: Recruit (Top)
     =================================================================== */
  div#top_recruit {
    width: 100%;
    background-image: url(/img/top_recruit_pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
    color: var(--color-nearwhite);
  }
  div#top_recruit section {
    width: 800px;
    text-align: center;
    margin: 0 auto;
    padding: 80px 0 100px;
  }
  div#top_recruit section h2 {
    color: var(--color-nearwhite);
  }
  div#top_recruit .btn_more {
    width: 260px;
    padding: 16px 0;
  }
  div#top_recruit .btn_more:hover {
    background-color: var(--color-brand);
    color: var(--color-white);
  }
  div#top_recruit .text_area {
    text-align: center;
    width: 760px;
    margin: 0 0 32px;
    color: var(--color-white);
    text-shadow: 0 3px 6px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8);
  }

  /* ===================================================================
     Section: Company
     =================================================================== */
  div#top_company {
    width: 800px;
    margin: 0 auto;
  }
  div#top_company section {
    width: 800px;
    text-align: left;
    margin: 0 auto;
    padding: 80px 0 104px;
    font-size: 14px;
  }
  .company_list {
    width: 640px;
    border-collapse: separate;
    border-spacing: 6px;
    margin: 0 auto;
  }
  .company_list tr th {
    width: 100px;
    font-weight: 400;
    padding: 10px;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--color-bgsoft);
    background-color: var(--color-bgsoft);
  }
  .company_list td {
    width: 400px;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    border-bottom: 1px solid var(--color-bgsoft);
    padding-bottom: 16px;
  }
  /* 会社概要：地図（PC） */
  .company_map {
    width: 640px;
    height: 320px;
    margin: 32px auto 0;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--color-bgsoft);
    background-color: #fff;
  }
  .company_map iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }


  /* ===================================================================
     Section: Privacy Policy (Top)
     =================================================================== */
  div#top_privacypolicy {
    width: 100%;
    background-image: url(/img/top_privacy_policy_pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 0%;
    color: var(--color-nearwhite);
  }
  div#top_privacypolicy section {
    width: 800px;
    text-align: center;
    margin: 0 auto;
    padding: 80px 0 100px;
  }
  div#top_privacypolicy section h2 {
    color: var(--color-nearwhite);
  }
  div#top_privacypolicy .btn_more {
    width: 260px;
    padding: 16px 0;
  }
  div#top_privacypolicy .btn_more:hover {
    background-color: var(--color-brand);
    color: var(--color-white);
  }
  div#top_privacypolicy .text_area {
    text-align: center;
    width: 760px;
    margin: 0 0 32px;
    color: var(--color-white);
    text-shadow: 0 3px 6px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8);
  }

  /* ===================================================================
     Recruit Page
     =================================================================== */
  div#recruit {
    width: 800px;
    margin: 0 auto;
  }
  div#recruit section {
    width: 800px;
    text-align: left;
    margin: 0 auto;
    padding: 80px 0 104px;
    font-size: 14px;
  }
  div#recruit .text_area {
    margin-top: -10px;
    width: 800px;
  }
  div#recruit .company_list {
    width: 800px;
  }

  /* Recruit Hero */
  div#recruit_main,
  div#recruit_main01,
  div#privacy_main01 {
    background-size: contain;
  }

  /* Section Title */
  .section-title {
    width: min(1100px, 90%);
    margin: 40px auto 16px;
    text-align: center;
    letter-spacing: 0.2em;
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 600;
    color: #6f6e6f;
  }

  /* Recruit Job Cards Grid */
  #recruit_contents {
    width: 100%;
    margin: 12px auto 0;
  }
  #recruit_contents section {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 60px;
    align-items: stretch;
  }
  #recruit_contents section > a {
    text-decoration: none;
    display: block;
    height: 100%;
  }
  
  /* カード本体 - 完全に高さを揃える */
  #recruit_contents ul.contents_01,
  #recruit_contents ul.contents_02 {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 28px;
    list-style: none;
    border: 3px solid var(--color-brand);
    border-radius: 3px;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    background: #fff;
    transition: opacity 0.3s ease, transform 0.2s ease;
  }
  #recruit_contents ul.contents_01:hover,
  #recruit_contents ul.contents_02:hover {
    opacity: 0.8;
    transform: translateY(-2px);
  }
  
  /* 全てのli要素の基本スタイル */
  #recruit_contents ul li {
    position: relative;
    text-align: left;
    background-color: #fff;
    padding: 0;
    margin: 0;
  }
  
  /* 1行目: アイコン + タイトル */
  #recruit_contents ul li:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
  }
  #recruit_contents ul li:first-child img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
  }
  #recruit_contents ul li h3 {
    margin: 0;
    text-align: left;
    color: var(--color-brand);
    font-weight: bold;
    font-size: 1.4em;
    letter-spacing: 0.1em;
    line-height: 1.3;
  }
  
  /* 2行目: 説明文 - flexで伸縮 */
  #recruit_contents ul li:nth-child(2) {
    display: flex;
    align-items: flex-start;
    padding-bottom: 24px;
  }
  #recruit_contents .text {
    color: var(--color-text);
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-size: 0.95em;
  }
  
  /* 3行目: ボタン - 常に下部に固定 */
  #recruit_contents ul li:nth-child(3) {
    align-self: end;
  }
  #recruit_contents .btn {
    margin: 0;
    text-align: center;
  }
  #recruit_contents .btn_more {
    display: inline-block;
    width: 100%;
    max-width: 280px;
    padding: 14px 20px;
    text-align: center;
    border: 3px solid var(--color-brand);
    background-color: var(--color-brand);
    color: #fff;
    border-radius: 3px;
    font-weight: 500;
    letter-spacing: 0.2em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative;
    z-index: 1;
  }
  #recruit_contents .btn_more:hover {
    background-color: #0d1f75;
    transform: scale(1.02);
  }
  
  /* リンクスタイルのリセット */
  #recruit_contents a {
    color: inherit;
  }
  #recruit_contents a:visited {
    opacity: 1;
  }
  #recruit_contents a:hover {
    text-decoration: none;
  }

  /* Recruit Forms */
  div#recruit_form {
    width: 800px;
    margin: 0 auto;
  }
  div#recruit_form section {
    width: 800px;
    margin-top: 0;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
  }
  div.recruit_form {
    width: 800px;
    margin: 20px auto 8px;
    border: solid 1px var(--color-bgsoft);
    background-color: var(--color-bgsoft);
    border-radius: 3px;
    padding: 16px 0;
  }
  div.recruit_form p {
    text-align: left;
    padding: 12px;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    clear: both;
  }
  div.recruit_form p:first-child {
    padding-bottom: 0;
    font-weight: bold;
  }
  .icon {
    background-image: url(/img/form_icon01.png);
    background-repeat: no-repeat;
    background-position: left center;
    margin: 0;
    padding: 50px 0 52px 45px;
    border-left: none;
    border-bottom: 0;
    background-size: 35px;
  }
  div.recruit_form:last-child .icon {
    background-image: url(/img/form_icon02.png);
  }

  /* ===================================================================
     Privacy Policy Page
     =================================================================== */
  div#privacy_form {
    width: 800px;
    margin: 0 auto;
  }
  div#privacy_form section {
    width: 800px;
    margin-top: 0;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
  }
  div.privacy_form {
    width: 800px;
    margin: 20px auto 8px;
    border: solid 1px var(--color-bgsoft);
    background-color: var(--color-bgsoft);
    border-radius: 3px;
    padding: 16px 0;
  }
  div.privacy_form p {
    text-align: left;
    padding: 12px;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    clear: both;
  }
  div.privacy_form p:first-child {
    padding-bottom: 0;
    font-weight: bold;
  }
  div.privacy_form:last-child .icon {
    background-image: url(/img/form_icon02.png);
  }

  /* ===================================================================
     Utility Classes
     =================================================================== */
  div.space {
    margin-top: 120px;
  }

}
/* common-theme.css : shared design tokens */
:root {
  /* === Color Palette === */
  --color-brand: #1C37B8;
  --color-mint: #1C37B8;
  --color-text: #6f6e6f;
  --color-heading: #1b2430;
  --color-white: #FFFFFF;
  --color-nearwhite: #f9f9f9;
  --color-breadcrumb-sep: #D1D1D1;
  --color-muted: #9aa3ad;
  --color-frame: #edf1f8;
  --color-bgsoft: #f7e9f7;
  --color-gray-100: #f1f1f1;
  --color-gray-200: #CCCCCC;
  --color-gray-500: #555555;
  --color-gray-600: #666666;
  --color-navy: #364454;
  --color-accent: #EF5285;
  --color-attention: #db6e84;

  /* === Typography === */
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
               "Noto Sans Japanese", "Meiryo", "Hiragino Kaku Gothic Pro W3",
               "MS PGothic", "Osaka", sans-serif;

  /* === Spacing === */
  --space-section-pt: 80px;
  --space-section-pb: 104px;
  --radius-sm: 3px;
  --radius-md: 10px;
  --radius-lg: 12px;
}

/* === Section Colors === */
/* お問い合わせセクション - 白背景 */
#common_contact {
  background-color: #FFFFFF !important;
}

/* フッター - ピンク背景 */
#footer {
  background-color: #e4efff !important;
}

/* その他のセクション */
#top_company .company_list th {
  background-color: #F9EEFC !important;
}

#recruit_form .recruit_form,
#privacy_form .privacy_form {
  background-color: #F9EEFC !important;
}

/* === Contact Buttons === */
#common_contact .btn_contact {
  background-color: #EF5285 !important;
  color: #ffffff !important;
  border-color: #EF5285 !important;
}

#common_contact .common_contact_other a:hover .btn_contact,
#common_contact .common_contact_other a:focus .btn_contact,
#common_contact .common_contact_recruit a:hover .btn_contact,
#common_contact .common_contact_recruit a:focus .btn_contact {
  background-color: #EF5285 !important;
}

/* === Recruit/Privacy Section Buttons === */
#top_recruit .btn a,
#top_privacypolicy .btn a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.6em 1.8em;
  min-width: 7rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  word-break: keep-all;
  border: 2px solid #EF5285;
  color: #EF5285;
  background: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

#top_recruit .btn a .btn_more,
#top_privacypolicy .btn a .btn_more {
  color: inherit;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  letter-spacing: inherit;
  display: inline-block;
  line-height: 1;
}

#top_recruit .btn a .btn_more::before,
#top_recruit .btn a .btn_more::after,
#top_privacypolicy .btn a .btn_more::before,
#top_privacypolicy .btn a .btn_more::after {
  content: none !important;
}

#top_recruit .btn a:hover,
#top_privacypolicy .btn a:hover {
  background: #EF5285;
  color: #ffffff;
  border-color: #EF5285;
}

/* === Responsive Button Adjustments === */
@media (max-width: 480px) {
  #top_recruit .btn a,
  #top_privacypolicy .btn a {
    padding: 0.55em 1.4em;
    min-width: 6.2rem;
    font-size: clamp(14px, 3.6vw, 16px);
  }
}

@media (min-width: 768px) and (max-width: 1024.98px) {
  #top_recruit .btn a,
  #top_privacypolicy .btn a {
    padding: 0.6em 1.6em;
  }
}

/* === Breadcrumb Styling === */
#breadcrumb,
#breadcrumb .breadcrumb,
#breadcrumb li,
#breadcrumb a {
  color: #1C37B8;
}

#breadcrumb a:link,
#breadcrumb a:visited,
#breadcrumb a:hover,
#breadcrumb a:active {
  color: #1C37B8;
}

.breadcrumb li:after {
  color: #464747;
}

/* === Recruit Flow Styling === */
:root {
  --flow-bg: #ffffff;
  --flow-frame: #edf1f8;
  --flow-accent: #1C37B8;
  --flow-mint: #81cbcc;
  --flow-text: #6f6e6f;
  --flow-note: #9aa3ad;
  --flow-shadow: 0 6px 18px rgba(28, 55, 184, 0.06);
}

#recruit_flow {
  width: 100%;
  margin: 0 auto;
}

#recruit_flow > section {
  width: min(1100px, 90%);
  margin: 0 auto;
  padding: 32px 0 24px;
}

#recruit_flow h2 {
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}

.flow-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.flow-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: stretch;
  background: var(--flow-bg);
  border: 1px solid var(--flow-frame);
  border-radius: 12px;
  box-shadow: var(--flow-shadow);
}

.flow-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #f7f9ff;
  border-right: 1px solid var(--flow-frame);
  border-radius: 12px 0 0 12px;
  min-height: 120px;
}

.flow-badge .step {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--flow-accent);
  background: #ffffff;
  border: 1px dashed var(--flow-accent);
  border-radius: 999px;
  padding: 6px 10px;
}

.flow-badge .num {
  display: block;
  font-family: 'Quicksand', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--flow-accent);
}

.flow-body {
  padding: 22px 24px;
  color: var(--flow-text);
}

.flow-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.flow-head h3 {
  font-size: 20px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #1b2430;
  margin: 0;
}

.flow-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--flow-frame);
}

.flow-content p {
  margin: 0 0 10px;
  line-height: 1.9;
}

.flow-ol {
  margin: 0 0 10px;
  padding-left: 1.2em;
  line-height: 1.9;
  list-style-position: outside;
}

.flow-ol li {
  margin-left: 0;
}

.flow-content .note {
  color: var(--flow-note);
  font-size: 0.92em;
}

/* === Flow Icon Styling === */
.flow-item {
  grid-template-columns: 112px 120px 1fr;
}

.flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 120px;
}

.flow-icon img {
  max-width: 96px;
  max-height: 96px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* === Hover Effects === */
@media (hover: hover) {
  .flow-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .flow-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(28, 55, 184, 0.10);
  }
}

/* === Tablet Adjustments === */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .flow-item {
    grid-template-columns: 120px 1fr;
  }
}

/* === Mobile Adjustments === */
@media (max-width: 767.98px) {
  .flow-item {
    grid-template-columns: 1fr;
  }
  
  .flow-badge {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--flow-frame);
    border-radius: 12px 12px 0 0;
    order: 1;
  }
  
  .flow-icon {
    order: 2;
    padding: 12px 16px;
    min-height: auto;
  }
  
  .flow-icon img {
    max-width: 72px;
  }
  
  .flow-body {
    order: 3;
    padding: 16px;
  }
  
  .flow-head h3 {
    font-size: 18px;
  }
}

/* === Recruit Section Spacing === */
#recruit_flow {
  margin-bottom: 40px;
}

#recruit_form section {
  margin-top: 0 !important;
  padding-top: 12px;
}

@media (min-width: 768px) {
  #recruit_flow {
    margin-bottom: 48px;
  }
}

/* === Section Title Styling === */
.section-title {
  width: min(1100px, 90%);
  margin: 40px auto 16px;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  color: #6f6e6f;
}

#recruit_contents {
  margin-top: 12px;
}

/* === Text Area Centering === */
#top_recruit .text_area,
#top_privacypolicy .text_area {
  max-width: 760px;
  width: min(90%, 760px);
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#common_contact section > p:first-of-type {
  max-width: 900px;
  width: min(92%, 900px);
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.text_area {
  text-align: inherit;
}

/* Recruit-specific styles moved to common-theme.css for unified management */