/* Figmaデザイン再現用 adhoc.css */

/* =============================================
   リセット・ベース設定
============================================= */

/* フォントファミリーの統一 */
body,
html,
* {
    font-family: "Noto Sans JP", sans-serif !important;
}

/* 基本的な背景色の設定 */
body {
    background-color: var(--white) !important;
}

/* =============================================
   カラー変数の定義
============================================= */
:root {
    --base-color: #333333;
    --gray-bg: #f8fafa;
    --dark-gray-bg: #C3C3C3;
    --dark-blue-bg: #2c575a;;
    --text-primary: #1a3436;
    --text-secondary: #5a7879;
    --accent-primary: #4a9da6;    /* プライマリアクセント：明るいティール */
    --accent-secondary: #e67e22;  /* セカンダリアクセント：ウォームオレンジ */
    --accent-subtle: #b8d4d6;     /* サブトルアクセント：淡いティール */
    --white: #FFFFFF;
}

/* =============================================
   ヘッダー（#header）のスタイル
============================================= */
/* ヘッダー透過・固定設定 */
.view-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--dark-blue-bg) !important;
  backdrop-filter: none;
  border-bottom: none !important;
}

.view-header .first-row .detail-item .button-list li .btn {
  background-color:var(--white) !important;
  border: none !important;
}

.view-header .first-row .detail-item .button-list li .btn:hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

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

/* メインビジュアル調整 - claude-recruit.css準拠 */
#parts_1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

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

/* 既存CSSの上書き - padding-topを強制的に0に */
.is-pc .view-mainArea.background.background-image {
  padding-top: 0 !important;
  width: 100% !important;
}

.is-sp .view-mainArea.background.background-image {
  padding-top: 0 !important;
  width: 100% !important;
}

#parts_1 .view-mainArea .parts-contents {
  margin-top: 0 !important;
  padding-top: 120px !important;
  width: 100% !important;
  position: relative;
}

/* 背景画像を見せるために子要素の背景を透明化 */
#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: #ffffff !important;
  font-size: 80px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
  margin-bottom: 32px !important;
}

.view-mainArea .parts-contents .heading-text .text {
  color: #ffffff !important;
  text-shadow: none !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  margin-bottom: 48px !important;
}

.view-mainArea .parts-contents .buttons .btn {
  background-color: var(--dark-blue-bg) !important;
  border: none !important;
  color: var(--white) !important;
  padding: 16px 32px !important;
  font-size: 16px !important;
  font-weight: 500 !important;

}

.view-mainArea .parts-contents .buttons .btn:hover {
  background-color: var(--white) !important;
  color: var(--dark-blue-bg) !important;
}

.view-mainArea .parts-contents .buttons .btn::after {
  content: '→';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.view-mainArea .parts-contents .buttons .btn:hover::after {
  opacity: 1;
}


/* =============================================
   ビジョンセクション（#parts_2）
============================================= */
.view-area.template-simple.siteColor-darkBlue .view-listDisplay .heading::after,
.view-area.template-simple.siteColor-darkBlue .view-oneLineNews .heading::after,
.view-area.template-simple.siteColor-darkBlue .view-message .heading::after,
.view-area.template-simple.siteColor-darkBlue .view-textWithTopImages .heading::after,
.view-area.template-simple.siteColor-darkBlue .view-companyOverview .heading::after,
.view-area.template-simple.siteColor-darkBlue .view-textWithLeftAndRightImages .heading::after,
.view-area.template-simple.siteColor-darkBlue .view-map .heading::after,
.view-area.template-simple.siteColor-darkBlue .view-step .heading::after,
.view-area.template-simple.siteColor-darkBlue .view-customer-voice .heading::after,
.view-area.template-simple .view-listDisplay .heading::after,
.view-area.template-simple .view-oneLineNews .heading::after,
.view-area.template-simple .view-message .heading::after,
.view-area.template-simple .view-textWithTopImages .heading::after,
.view-area.template-simple .view-companyOverview .heading::after,
.view-area.template-simple .view-textWithLeftAndRightImages .heading::after,
.view-area.template-simple .view-map .heading::after,
.view-area.template-simple .view-step .heading::after,
.view-area.template-simple .view-customer-voice .heading::after {
    background: var(--dark-blue-bg) !important;
}

#parts_2 .heading {
  color: var(--text-secondary) !important;
}

#parts_2.messageComponent{
  min-height: 500px;
}

/* =============================================
   サービスセクション（#parts_3,4,5）
============================================= */
/* #parts_3,5のスタイル */
#parts_3,#parts_5,#parts_4,#parts_11 {
  width: 100%;
  margin: 0;
  padding: 0;
}

#parts_3 .layout-column-area,
#parts_5 .layout-column-area,
#parts_4 .layout-column-area,
#parts_11 .layout-column-area {
  display: flex;
  width: 100%;
  min-height: 500px; /* 最小高さを設定 */
  margin: 0;
  padding: 0;
}

#parts_3 .layout-background,
#parts_5 .layout-background,
#parts_4 .layout-background,
#parts_11 .layout-background{
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 左側の画像カラム */
#parts_3 .layout-column.column-2:first-child,
#parts_5 .layout-column.column-2:first-child,
#parts_4 .layout-column.column-2:last-child,
#parts_11 .layout-column.column-2{
  width: 50%;
  padding: 0;
  margin: 0 !important;
  display: flex;
}

#parts_3 .layout-column.column-2:first-child #componentListRoot,
#parts_3 .layout-column.column-2:first-child .layout-container,
#parts_3 .layout-column.column-2:first-child .view-components ,
#parts_5 .layout-column.column-2:first-child #componentListRoot,
#parts_5 .layout-column.column-2:first-child .layout-container,
#parts_5 .layout-column.column-2:first-child .view-components,
#parts_4 .layout-column.column-2:last-child #componentListRoot,
#parts_4 .layout-column.column-2:last-child .layout-container,
#parts_4 .layout-column.column-2:last-child .view-components,
#parts_11 .layout-column.column-2 #componentListRoot,
#parts_11 .layout-column.column-2 .layout-container,
#parts_11 .layout-column.column-2 .view-components  {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#parts_3 .layout-column.column-2:first-child .single_component_content,
#parts_5 .layout-column.column-2:first-child .single_component_content,
#parts_4 .layout-column.column-2:last-child .single_component_content,
#parts_11 .layout-column.column-2 .single_component_content {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0;
}

#parts_3 .layout-column.column-2:first-child .view-image,
#parts_5 .layout-column.column-2:first-child .view-image,
#parts_4 .layout-column.column-2:last-child .view-image,
#parts_11 .layout-column.column-2 .view-image {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#parts_3 .layout-column.column-2:first-child .view-image div,
#parts_5 .layout-column.column-2:first-child .view-image div,
#parts_4 .layout-column.column-2:last-child .view-image div,
#parts_11 .layout-column.column-2 .view-image div {
  width: 100% !important;
  max-height: none !important;
  height: 100%;
  display: block;
}

#parts_3 .layout-column.column-2:first-child .view-image img,
#parts_5 .layout-column.column-2:first-child .view-image img,
#parts_4 .layout-column.column-2:last-child .view-image img,
#parts_11 .layout-column.column-2 .view-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview .prev-footer-component [class^=view-]:not(.view-oneLineNews):not(.view-breadcrumb):not(.view-conversion){
  margin-bottom: 0 !important;
}

/* 右側のテキストカラム */
#parts_3 .layout-column.column-2:last-child,
#parts_5 .layout-column.column-2:last-child,
#parts_4 .layout-column.column-2:first-child {
  width: 50%;
  background-color: var(--dark-blue-bg);
  display: flex;
  align-items: center;
  padding: 60px 80px;
  box-sizing: border-box;
  margin: 0 !important;
}

#parts_3 .layout-column.column-2:last-child #componentListRoot,
#parts_3 .layout-column.column-2:last-child .layout-container,
#parts_3 .layout-column.column-2:last-child .view-components,
#parts_5 .layout-column.column-2:last-child #componentListRoot,
#parts_5 .layout-column.column-2:last-child .layout-container,
#parts_5 .layout-column.column-2:last-child .view-components,
#parts_4 .layout-column.column-2:first-child #componentListRoot,
#parts_4 .layout-column.column-2:first-child .layout-container,
#parts_4 .layout-column.column-2:first-child .view-components {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

#parts_3 .layout-column.column-2:last-child .single_component_content,
#parts_5 .layout-column.column-2:last-child .single_component_content,
#parts_4 .layout-column.column-2:first-child .single_component_content {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

#parts_3 .layout-column.column-2:last-child .view-heading3,
#parts_5 .layout-column.column-2:last-child .view-heading3,
#parts_4 .layout-column.column-2:first-child .view-heading3 {
  color: var(--accent-subtle) !important;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
  background: transparent !important;
}

#parts_3 .layout-column.column-2:last-child .view-text,
#parts_5 .layout-column.column-2:last-child .view-text,
#parts_4 .layout-column.column-2:first-child .view-text {
  color: var(--white) !important;
  font-size: 1.1rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  opacity: 0.9;
  background: transparent !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  #parts_3 .layout-column-area,
  #parts_5 .layout-column-area,
  #parts_4 .layout-column-area,
  #parts_11 .layout-column-area {
    flex-direction: column;
    min-height: auto;
  }
  
  #parts_3 .layout-column.column-2:first-child,
  #parts_3 .layout-column.column-2:last-child,
  #parts_5 .layout-column.column-2:first-child,
  #parts_5 .layout-column.column-2:last-child,
  #parts_4 .layout-column.column-2:first-child,
  #parts_4 .layout-column.column-2:last-child,
  #parts_11 .layout-column.column-2{
    width: 100%;
  }
  
  #parts_3 .layout-column.column-2:last-child,
  #parts_5 .layout-column.column-2:last-child,
  #parts_4 .layout-column.column-2:first-child {
    padding: 40px 30px;
  }
  
  #parts_3 .layout-column.column-2:last-child .view-heading3,
  #parts_5 .layout-column.column-2:last-child .view-heading3,
  #parts_4 .layout-column.column-2:first-child .view-heading3 {
    font-size: 2rem;
  }
}

/* =============================================
   ACTION MINDセクション（#parts_6-#parts_10）
============================================= */

/* ACTION MINDヘッダー */
#parts_6 {
  background-color: var(--gray-bg);
  padding: 80px 0 40px 0;
  text-align: center;
}

#parts_6 .view-heading2 {
  font-size: 48px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 0 !important;
}

/* サブタイトル */
#parts_7 {
  background-color: var(--gray-bg);
  padding: 20px 0 60px 0;
  text-align: center;
}

#parts_7 .view-heading3 {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--base-color) !important;
  line-height: 1.8 !important;
  margin-bottom: 0 !important;
  letter-spacing: 0.05em;
}

/* 4列レイアウト（上段） */
#parts_8 {
  background-color: var(--gray-bg);
  padding: 0 0 60px 0;
}

#parts_8 .layout-column-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

#parts_8 .layout-column.column-4 {
  width: 25%;
  padding: 0 20px;
  text-align: center;
}

#parts_8 .view-image {
  margin-bottom: 30px;
}

#parts_8 .view-image div {
  width: 80px !important;
  height: 80px !important;
  max-height: 80px !important;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#parts_8 .view-image img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

#parts_8 .view-text {
  font-size: 14px !important;
  color: var(--base-color) !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

#parts_8 .view-heading4,
#parts_9 .view-heading4{
  color:var(--accent-secondary) !important;
}

/* 3列レイアウト（下段） */
#parts_9 {
  background-color: var(--gray-bg);
  padding: 0 0 80px 0;
}

#parts_9 .layout-column-area {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}

#parts_9 .layout-column.column-3 {
  width: 33.333%;
  padding: 0 20px;
  text-align: center;
}

#parts_9 .view-image {
  margin-bottom: 30px;
}

#parts_9 .view-image div {
  width: 80px !important;
  height: 80px !important;
  max-height: 80px !important;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#parts_9 .view-image img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

#parts_9 .view-text {
  font-size: 14px !important;
  color: var(--base-color) !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

/* ABOUT USボタン */
#parts_10 {
  background-color: var(--gray-bg);
  padding: 0 0 80px 0;
  text-align: center;
}

#parts_10 .view-button .btn {
  background-color: transparent !important;
  border: 2px solid #333333 !important;
  color: #333333 !important;
  padding: 16px 40px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#parts_10 .view-button .btn:hover {
  background-color: var(--dark-blue-bg) !important;
  color: var(--white) !important;
}

#parts_10 .view-button .btn::after {
  content: '→';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#parts_10 .view-button .btn:hover::after {
  opacity: 1;
}

body .preview div#parts_6 [class^=view-]:not(.view-area):not(.view-components),
body .preview div#parts_7 [class^=view-]:not(.view-area):not(.view-components),
body .preview div#parts_8 [class^=view-]:not(.view-area):not(.view-components),
body .preview div#parts_9 [class^=view-]:not(.view-area):not(.view-components),
body .preview div#parts_10 [class^=view-]:not(.view-area):not(.view-components){
  background-color: transparent !important;
}

#parts_6 .preview .single_component_content,
#parts_7 .preview .single_component_content,
#parts_8 .preview .single_component_content,
#parts_9 .preview .single_component_content,
#parts_10 .preview .single_component_content {
  background: transparent !important;
}

#parts_6 .single_component_content,
#parts_7 .single_component_content,
#parts_8 .single_component_content,
#parts_9 .single_component_content,
#parts_10 .single_component_content {
  background: transparent !important;
}

.view-components #parts_8 .layout-column-area:not(.paid),
.view-components #parts_9 .layout-column-area:not(.paid){
  background: transparent !important;
}

/* =============================================
   レスポンシブ対応
============================================= */
@media screen and (max-width: 768px) {
    /* ACTION MINDセクション モバイル対応 */
    #parts_6 {
        padding: 60px 0 30px 0;
    }
    
    #parts_6 .view-heading2 {
        font-size: 32px !important;
    }
    
    #parts_7 {
        padding: 15px 0 40px 0;
    }
    
    #parts_7 .view-heading3 {
        font-size: 16px !important;
        padding: 0 20px;
    }
    
    #parts_8 .layout-column-area,
    #parts_9 .layout-column-area {
        flex-direction: column;
        padding: 0 20px;
    }
    
    #parts_8 .layout-column.column-4,
    #parts_9 .layout-column.column-3 {
        width: 100%;
        margin-bottom: 40px;
        padding: 0;
    }
    
    #parts_8 .layout-column.column-4:last-child,
    #parts_9 .layout-column.column-3:last-child {
        margin-bottom: 0;
    }
    
    #parts_10 {
        padding: 0 20px 60px 20px;
    }
    
    #parts_10 .view-button .btn {
        width: 100%;
        max-width: 280px;
    }

    /* パディング調整 */
    #parts_2 .single_component_content,
    #parts_3 .single_component_content,
    #parts_4 .single_component_content,
    #parts_5 .single_component_content,
    #parts_6 .single_component_content,
    #parts_11 .view-table,
    #parts_12 .view-text,
    #parts_14 .layout-column-area,
    #parts_15 .layout-column-area,
    #parts_16 .view-heading3,
    #parts_17 .layout-column-area,
    #parts_18 .layout-column-area,
    #parts_19 .layout-column-area,
    #parts_20 .view-annotation,
    #parts_21 .view-step,
    #parts_22 .single_component_content,
    #parts_23 .view-accordion {
        padding: 0 20px;
    }

    .is-sp .preview .layout-column-area {
      width:100% !important;
    }
    
    .is-sp .view-header .first-row .detail-item {
        display:none !important;
    }

    .is-sp .view-header .spMenu:checked + .spMenu-detail {
        border-top: 1px solid var(--dark-gray-bg);
        border-bottom: 1px solid var(--dark-gray-bg);
        background: var(--gray-bg);
    }

    .is-sp #header .spMenu-detail .btn {
        background-color: var(--base-color) !important;
        color: var(--white) !important;
        border: none !important;
    }

    /* ヒーローセクション */
    #parts_1 .view-mainArea {
        min-height: 500px;
    }
    
    #parts_1 .view-mainArea .parts-contents {
        padding: 60px 20px;
    }
    
    #parts_1 .view-mainArea .heading-text .heading {
        font-size: 32px !important;
    }
    
    /* セクションパディング */
    #parts_2, #parts_6, #parts_7, #parts_13, #parts_21, #parts_22 {
        padding: 60px 0 !important;
    }
    
    #parts_12, #parts_20, #parts_23 {
        padding: 0 0 60px 0 !important;
    }
    
    /* 見出しサイズ */
    #parts_7 .view-heading2,
    #parts_13 .view-heading2,
    #parts_21 .view-step .heading,
    #parts_22 .view-heading2 {
        font-size: 28px !important;
    }
    
    #parts_2 .view-heading2,
    #parts_4 .view-heading2 {
        font-size: 24px !important;
    }
    
    /* プロフィール画像 */
    #parts_8 .view-image img {
        width: 160px;
        height: 160px;
    }
    
    /* 料金レイアウト */
    .layout-column .view-text {
        text-align: left !important;
        margin-top: 8px;
    }
}