#parts_16 .btn {
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #ffffff !important;
}

#parts_16 .btn:hover {
  background-color: #ffffff !important;
  color: #ffffff !important;
}

#parts_8 .btn {
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #ffffff !important;
}

#parts_8 .btn:hover {
  background-color: #ffffff !important;
  color: #fff !important;
}/* index.cssの背景色を上書き（parts_3, parts_4に限定） */
div#parts_3 .component.single-component .single_component_content .view-button {
  background-color: transparent !important;
}

body .preview div#parts_3 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: transparent !important;
}

#parts_3 .preview .single_component_content {
  background: transparent !important;
}

#parts_3 .single_component_content {
  background: transparent !important;
}

/* parts_4についても同様の指定を追加 */
div#parts_4 .component.single-component .single_component_content .view-heading2 {
  background-color: transparent !important;
}

body .preview div#parts_4 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: transparent !important;
}

div#parts_4 .preview .single_component_content {
  background: transparent !important;
}

div#parts_4 .single_component_content {
  background: transparent !important;
}

/* parts_5, parts_6, parts_7の背景色上書き */
body div#parts_5 .view-components .layout-column-area:not(.paid) {
  background: transparent !important;
}

body div#parts_6 .view-components .layout-column-area:not(.paid) {
  background: transparent !important;
}

body div#parts_7 .view-components .layout-column-area:not(.paid) {
  background: transparent !important;
}

#parts_5 .layout-column-area {
  background: transparent !important;
}

#parts_6 .layout-column-area {
  background: transparent !important;
}

#parts_7 .layout-column-area {
  background: transparent !important;
}

/* parts_8の背景色上書き */
body .preview div#parts_8 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: transparent !important;
}

div#parts_8 .preview .single_component_content {
  background: transparent !important;
}

div#parts_8 .single_component_content {
  background: transparent !important;
}

/* parts_9の背景色調整（#fffに戻す） */
body .preview div#parts_9 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: #fff !important;
}

#parts_9 .preview .single_component_content {
  background: #fff !important;
}

#parts_9 .single_component_content {
  background: #fff !important;
}

.preview .view-components div#parts_9.component.single-component {
  background: #fff !important;
}

/* parts_10の背景色調整（#fffに戻す） */
body .preview div#parts_10 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: #fff !important;
}

#parts_10 .preview .single_component_content {
  background: #fff !important;
}

#parts_10 .single_component_content {
  background: #fff !important;
}

.preview .view-components div#parts_10.component.layout-component {
  background: #fff !important;
}

/* parts_11の背景色調整（#fffに戻す） */
body .preview div#parts_11 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: #fff !important;
}

#parts_11 .preview .single_component_content {
  background: #fff !important;
}

#parts_11 .single_component_content {
  background: #fff !important;
}

.preview .view-components div#parts_11.component.single-component {
  background: #fff !important;
}

/* parts_12の背景色調整（#fffに戻す） */
body .preview div#parts_12 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: #fff !important;
}

#parts_12 .preview .single_component_content {
  background: #fff !important;
}

#parts_12 .single_component_content {
  background: #fff !important;
}

.preview .view-components div#parts_12.component.layout-component {
  background: #fff !important;
}

/* parts_13の背景色調整（#fffに戻す） */
body .preview div#parts_13 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: #fff !important;
}

.view-area.template-simple.siteColor-darkBlue #parts_13 .btn{
  background:linear-gradient(135deg, #309bf8, #32d8c6 52%) !important;
}

.view-area.template-simple.siteColor-darkBlue #parts_13 .btn:hover{
  background:linear-gradient(135deg, #309bf8, #32d8c6 100%) !important;
}

#parts_13 .preview .single_component_content {
  background: #fff !important;
}

#parts_13 .single_component_content {
  background: #fff !important;
}

.preview .view-components div#parts_13.component.single-component {
  background: #fff !important;
}

/* parts_14の背景色調整（#6c6c6cに変更） */
body .preview div#parts_14 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: #6c6c6c !important;
}

#parts_14 .preview .single_component_content {
  background: #6c6c6c !important;
}

#parts_14 .single_component_content {
  background: #6c6c6c !important;
}

/* parts_15の背景色調整（parts_15 div要素は#6c6c6cに戻す） */
body .preview div#parts_15 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: transparent !important;
}

#parts_15 .preview .single_component_content {
  background: transparent !important;
}

#parts_15 .single_component_content {
  background: transparent !important;
}

.preview .view-components div#parts_15.component.single-component {
  background: #6c6c6c !important;
}

#parts_15 .view-accordion {
  background: transparent !important;
}

/* parts_16の背景色調整（#6c6c6cに変更） */
body .preview div#parts_16 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: #6c6c6c !important;
}

#parts_16 .preview .single_component_content {
  background: #6c6c6c !important;
}

#parts_16 .single_component_content {
  background: #6c6c6c !important;
}

.preview .view-components div#parts_16.component.single-component {
  background: #6c6c6c !important;
}

#parts_16 .view-button {
  background: #6c6c6c !important;
}#parts_3 {
  background-color: rgba(0, 0, 0, 0.2) !important;
  padding: 40px 0 !important;
}

#parts_3 .single_component_content {
  background-color: transparent !important;
}

#parts_3 .btn {
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #ffffff !important;
}

#parts_3 .btn:hover {
  color: #fff!important;
}/* Figmaデザイン実装用CSS */

/* フォントファミリー設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

body, html {
  font-family: 'Gotham', 'Noto Sans JP', sans-serif;
}

/* ボディ背景設定（view-mainAreaの背景を移動） */
body {
  background-image: url('https://images.hirameki7.io/web-assets/133988/25765c01-0699-4fc7-b8ec-2f95f8f7d54f.png?1752118781354');
  background-position: center 500px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: scroll;
}

/* テーマカラー #FF500A の適用 */
/*.view-area.template-simple.siteColor-darkBlue .view-components .btn {
  background: linear-gradient(135deg, #309bf8, #32d8c6 52%) !important;
}*/

.view-area.template-simple.siteColor-darkBlue .view-components .btn:hover:not(.btn-disabled){
  background:linear-gradient(135deg, #309bf8, #32d8c6 100%) !important;
}

.view-area.template-simple.siteColor-darkBlue .view-header .link-list li a.current {
  border-bottom: 4px solid linear-gradient(135deg, #309bf8, #32d8c6 52%) !important;
}

.view-area.template-simple.siteColor-darkBlue .view-oneLineNews .news .label {
  background:linear-gradient(135deg, #309bf8, #32d8c6 52%) !important;
}

/* ヘッダー透過・固定設定 */
.view-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)) !important;
  border-bottom: none !important;
}

.view-header .logo img {
  filter: brightness(0) invert(1); /* ロゴを白色に */
}

.view-header .first-row .detail-item .button-list li .btn {
  background:linear-gradient(135deg, #309bf8, #32d8c6 52%) !important;
  border: none !important;
}

.view-header .first-row .detail-item .button-list li .btn:hover {
  background-color: linear-gradient(135deg, #309bf8, #32d8c6 100%) !important;
}

.view-header .link-list li a {
  color: #ffffff !important;
}

/* メインビジュアル調整 */
#parts_1 {
  margin-top: 0 !important;
}

.view-mainArea.background {
  background: none !important;
  padding-top: 0 !important;
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.view-mainArea .parts-contents {
  margin-top: 0 !important;
  width: 100% !important;
}

/* 背景画像を見せるために子要素の背景を透明化 */
#parts_1,
#parts_1 .set-component-area,
#parts_1 .view-mainArea,
#parts_1 .view-mainArea.background,
.view-components.preview,
.view-area > .layout-container > .view-components,
.layout-container,
.view-area {
  background-color: transparent !important;
  background: transparent !important;
}

.view-mainArea .parts-contents .heading-text .heading {
  color: #000 !important;
  font-size: 80px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
}

.view-mainArea .parts-contents .heading-text .text {
  color: #000 !important;
  text-shadow: none !important;
}

/* About セクション */
#parts_2 {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)) !important;
}

.view-message {
  background: transparent !important;
  color: #ffffff !important;
  padding: 80px 0 !important;
  margin-top: 0 !important;
}

.view-message .heading {
  color: #ffffff !important;
  position: relative;
  margin-bottom: 40px !important;
}

.view-message .heading::before {
  content: "About";
  display: block;
  font-family: 'Gotham', sans-serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}

.view-message .heading::after {
  background: none !important;
}

.view-message .text {
  color: #ffffff !important;
  line-height: 1.8 !important;
}

/* Job Category セクション */
#parts_4 .view-heading2 {
  position: relative;
  color: #ffffff !important;
  padding-bottom: 40px !important;
}

#parts_4 .view-heading2::before {
  content: "Job Category";
  display: block;
  font-family: 'Gotham', sans-serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 16px;
}

#parts_4 {
  background: linear-gradient(90deg, #309bf8, #32d8c6 52%) !important;
  color: #ffffff !important;
  padding: 80px 0 !important;
  margin: 0 !important;
}

#parts_8 {
  background: linear-gradient(90deg, #309bf8, #32d8c6 52%) !important;
  color: #ffffff !important;
  padding: 80px 0 80px 0 !important;
  margin: 0 !important;
}

#parts_5 {
  background: linear-gradient(90deg, #309bf8, #32d8c6 52%) !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
}

#parts_6 {
  background: linear-gradient(90deg, #309bf8, #32d8c6 52%) !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
}

#parts_7 {
  background: linear-gradient(90deg, #309bf8, #32d8c6 52%) !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
}

#parts_5 .layout-column, #parts_6 .layout-column, #parts_7 .layout-column {
  background-color: #ffffff !important;
  color: #333333 !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

#parts_5 .view-heading3, #parts_6 .view-heading3, #parts_7 .view-heading3 {
  color: #333333 !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

#parts_5 .view-text, #parts_6 .view-text, #parts_7 .view-text {
  color: #666666 !important;
  line-height: 1.6 !important;
}

/* Message セクション */
#parts_9 {
  padding-top: 80px !important;
}

#parts_9 .view-heading2 {
  position: relative;
  padding-bottom: 40px !important;
}

#parts_9 .view-heading2::before {
  content: "Message";
  display: block;
  font-family: 'Gotham', sans-serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 16px;
}

#parts_10 {
  padding: 80px 0 !important;
}

#parts_10 .layout-column img {
  border-radius: 8px !important;
}

#parts_10 .view-heading3 {
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 24px !important;
}

#parts_10 .view-text {
  line-height: 1.8 !important;
  margin-bottom: 24px !important;
}

#parts_10 .view-heading4 {
  font-weight: 500 !important;
  color: #666666 !important;
}

/* Member セクション */
#parts_11 .view-heading2 {
  position: relative;
  padding-bottom: 40px !important;
}

#parts_11 .view-heading2::before {
  content: "Member";
  display: block;
  font-family: 'Gotham', sans-serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 16px;
}

#parts_12 {
  padding: 80px 0 !important;
}

#parts_12 .layout-column {
  position: relative;
}

#parts_12 .layout-column:nth-child(1) {
  transform: translateY(0px);
}

#parts_12 .layout-column:nth-child(2) {
  transform: translateY(-20px);
}

#parts_12 .layout-column:nth-child(3) {
  transform: translateY(-40px);
}

#parts_12 .layout-column:nth-child(4) {
  transform: translateY(-60px);
}

#parts_12 .layout-column img {
  border-radius: 8px !important;
  margin-bottom: 16px !important;
}

#parts_12 .view-heading4 {
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

#parts_12 .view-text {
  color: #666666 !important;
  font-size: 14px !important;
}

/* Q&A セクション */
#parts_14 .view-heading2 {
  position: relative;
  color: #ffffff !important;
  margin-bottom: 0 !important;
}

#parts_14 .view-heading2::before {
  content: "Q&A";
  display: block;
  font-family: 'Gotham', sans-serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 16px;
}

#parts_14 {
  background-color: #6C6C6C !important;
  color: #ffffff !important;
  padding: 80px 0 0 0 !important;
  margin: 0 !important;
}

#parts_15, #parts_16 {
  background-color: #6C6C6C !important;
  color: #ffffff !important;
  padding: 40px 0 80px 0 !important;
  margin: 0 !important;
}

#parts_15 .view-accordion li {
  background-color: rgba(255, 255, 255, 0) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
}

#parts_15 .view-accordion li .title {
  color: #ffffff !important;
}

#parts_15 .view-accordion li .viewAccordion-text {
  color: #ffffff !important;
}

/* フッター */
#parts_17 {
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 80px 0 0 0 !important;
}

#parts_17 .layout-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

#parts_17 .layout-column:first-child .btn {
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  width: 555px !important;
  height: 136px !important;
  font-size: 16px !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#parts_17 .layout-column:first-child .btn::before {
  content: "Contact";
  display: block;
  font-family: 'Gotham', sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}

#parts_17 .layout-column:first-child .btn:hover {
  background-color: #ffffff !important;
  color: #ffffff !important;
}

#parts_17 .layout-column:first-child .btn:hover::before {
  color: #ffffff;
}

#parts_17 .layout-column:last-child .btn {
  background: linear-gradient(135deg, #309bf8, #32d8c6 52%) !important;
  border: 2px solid linear-gradient(135deg, #309bf8, #32d8c6 52%) !important;
  color: #ffffff !important;
  width: 555px !important;
  height: 136px !important;
  font-size: 16px !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#parts_17 .layout-column:last-child .btn::before {
  content: "Entry";
  display: block;
  font-family: 'Gotham', sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}

#parts_17 .layout-column:last-child .btn:hover {
  background: linear-gradient(135deg, #309bf8, #32d8c6 100%) !important;
}

/* parts_17の背景色上書き */
body .preview div#parts_17 [class^=view-]:not(.view-area):not(.view-components) {
  background-color: transparent !important;
}

#parts_17 .preview .single_component_content {
  background: transparent !important;
}

#parts_17 .single_component_content {
  background: transparent !important;
}

.preview .view-components div#parts_17.component.layout-component {
  background: transparent !important;
}

#parts_17 .layout-column-area {
  background: transparent !important;
}

#parts_17 .view-button {
  background: transparent !important;
}

.view-footer {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.view-footer .copyright {
  color: #ffffff !important;
}

/* レスポンシブ対応 */
@media screen and (min-width: 769px) {
  .is-pc .view-mainArea.background .parts-contents {
    position: absolute;
    top: 10%;
    left: 0;
    transform: translateY(-10%);
  }
}

@media screen and (max-width: 768px) {
  .view-mainArea .parts-contents .heading-text .heading {
    font-size: 48px !important;
  }
  
  .view-header {
    background: rgba(0, 0, 0, 0.9) !important;
  }

  .is-sp .view-header .spMenu:checked + .spMenu-detail {
    background: #000000;
  }

  .is-sp #header .spMenu-detail .btn {
  background-image: linear-gradient(135deg, #309bf8, #32d8c6 100%) !important;
  border: #ffffff !important;
  }

  #parts_5 .layout-column, #parts_6 .layout-column, #parts_7 .layout-column {
    width: 100% !important;
    margin-right: 0 !important;
  }

  #parts_17 .layout-column:first-child .btn, #parts_17 .layout-column:last-child .btn {
    width: 320px !important;
    height: 100px !important;
  }

  .is-sp .preview .prev-footer-component [class^=view-]:not(.view-oneLineNews):not(.view-breadcrumb):not(.view-conversion){
    margin-bottom:0 !important;
  }
  .is-sp .view-components #footer .view-footer{
    width: 100% !important;
  }
}