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

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

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

/* 基本的な背景色の設定 */
body {
    background-color: #FFFFFF !important;
}

/* =============================================
   カラー変数の定義
============================================= */
:root {
    --base-color: #FFD12C;
    --gray-bg: #EDEDED;
    --dark-gray-bg: #C3C3C3;
    --darkest-gray-bg: #FFD12C;
    --text-primary: #333333;
    --text-secondary: #666666;
    --white: #FFFFFF;
}

/* =============================================
   ヘッダー（#header）のスタイル
============================================= */
#header .view-header {
    background-color: var(--white) !important;
    border-bottom: 1px solid #E5E5E5 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
}

#header .view-header .row {
    height: 80px;
    align-items: center;
}

#header .view-header .logo img {
    max-height: 50px;
}

.view-header .first-row .detail-item {
  margin-left: auto !important;
  margin-right: 0 !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
}

.view-header .first-row .detail-item .button-list {
  margin: 0 !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
}

.view-header .first-row .detail-item .button-list li {
  margin: 0 !important;
}

.view-header .first-row .detail-item .button-list li .btn {
  background-color: var(--base-color) !important;
  color: var(--text-primary)!important;
  border: none !important;
  border-radius: 0 !important;
  height: 73px !important;
  min-width: 200px !important;
  padding: 0 40px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.view-header .first-row .detail-item .button-list li .btn:hover {
  background-color: rgba(255, 209, 44, 0.85) !important;
}
/* =============================================
   ヒーローセクション（#parts_1）
============================================= */
#parts_1 {
    margin-top: 0 !important;
    background-color: var(--darkest-gray-bg) !important;
}

#parts_1 .set-component-area,
#parts_1 .view-mainArea {
    background-color: transparent !important;
}

#parts_1 .view-mainArea {
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    width: 100% !important;
    margin: 0;
}

#parts_1 .view-mainArea.background {
    position: relative;
    overflow: hidden;
}

/* 背景画像にオーバーレイ効果 */
#parts_1 .view-mainArea.background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 51, 51, 0.7);
    z-index: 1;
}

#parts_1 .view-mainArea .parts-contents {
    position: relative;
    z-index: 2;
    padding: 80px 60px;
    max-width: 800px;
    margin: 0;
}

#parts_1 .view-mainArea .heading-text .heading {
    color: var(--white) !important;
    font-size: 42px !important;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#parts_1 .view-mainArea .heading-text .text {
    color: var(--white) !important;
    font-size: 16px !important;
    line-height: 1.8;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* =============================================
   見出しセクション（#parts_2, #parts_4）
============================================= */
 .is-pc .view-area.template-simple.siteColor-darkBlue .view-step .heading::after,
 .is-sp .view-area.template-simple.siteColor-darkBlue .view-step .heading::after{
    background-color: var(--darkest-gray-bg);
  }

#parts_2, #parts_4 {
    background-color: var(--white) !important;
    padding: 0 0 32px 0 !important;
}

#parts_2 .single_component_content,
#parts_4 .single_component_content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
    background-color: transparent !important;
}

#parts_2 .view-heading2,
#parts_4 .view-heading2 {
    color: var(--text-primary) !important;
    font-size: 28px !important;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
}

/* =============================================
   テキストセクション（#parts_3, #parts_5）
============================================= */
#parts_3, #parts_5 {
    background-color: var(--white) !important;
    padding: 0 0 48px 0 !important;
}

#parts_3 .single_component_content,
#parts_5 .single_component_content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
    background-color: transparent !important;
}

#parts_3 .view-text,
#parts_5 .view-text {
    color: var(--text-secondary) !important;
    font-size: 16px !important;
    line-height: 1.8;
    text-align: left;
}

/* =============================================
   切替セクション（#parts_6）
============================================= */
#parts_6 {
    background-color: var(--darkest-gray-bg) !important;
    padding: 80px 0 !important;
}

/* =============================================
   プロフィールセクション（#parts_7〜#parts_12）
============================================= */
#parts_7 {
    background-color: var(--gray-bg) !important;
    padding: 80px 0 24px 0 !important;
}

#parts_8 {
    background-color: var(--gray-bg) !important;
    padding: 0 0 40px 0 !important;
}

#parts_9, #parts_10 {
    background-color: var(--gray-bg) !important;
    padding: 0 0 16px 0 !important;
}

#parts_11 {
    background-color: var(--gray-bg) !important;
    padding: 0 0 32px 0 !important;
}

#parts_12 {
    background-color: var(--gray-bg) !important;
    padding: 0 0 80px 0 !important;
}

/* プロフィール見出し */
#parts_7 .view-heading2 {
    color: var(--text-primary) !important;
    font-size: 32px !important;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0;
}

/* プロフィール画像 */
#parts_8 .view-image {
    text-align: center;
}

#parts_8 .view-image img {
    border-radius:8px;
}

/* 名前と肩書き */
#parts_9 .view-heading3 {
    color: var(--text-primary) !important;
    font-size: 24px !important;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

#parts_10 .view-text {
    color: var(--text-secondary) !important;
    font-size: 16px !important;
    text-align: center;
    margin: 0;
}

/* プロフィールテーブル */
#parts_11 .view-table {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 60px;
}

#parts_11 .view-table table {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#parts_11 .view-table td {
    padding: 20px 24px !important;
    border: 1px solid #E5E5E5 !important;
    background-color: var(--white) !important;
}

#parts_11 .view-table td:first-child {
    background-color: #F9FAFB !important;
    font-weight: 600;
    width: 150px;
    color: var(--text-primary);
}

/* プロフィールコメント */
#parts_12 .view-text {
    color: var(--text-secondary) !important;
    font-size: 16px !important;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 60px;
}

/* =============================================
   料金セクション（#parts_13〜#parts_20）
============================================= */
#parts_13 {
    background-color: var(--darkest-gray-bg) !important;
    padding: 80px 0 40px 0 !important;
}

#parts_13 .view-heading2 {
    color: var(--text-primary) !important;
    font-size: 32px !important;
    font-weight: 700;
    text-align: center;
}

/* 料金レイアウト */
#parts_14, #parts_15, #parts_16, #parts_17, #parts_18, #parts_19 {
    background-color: var(--darkest-gray-bg) !important;
    padding: 0 0 16px!important;
}

#parts_14 .layout-column-area,
#parts_15 .layout-column-area,
#parts_17 .layout-column-area,
#parts_18 .layout-column-area,
#parts_19 .layout-column-area {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 60px;
    background-color: transparent !important;
}

#parts_14 .layout-background,
#parts_15 .layout-background,
#parts_17 .layout-background,
#parts_18 .layout-background,
#parts_19 .layout-background {
    background-color: var(--white);
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 回数券見出し */
#parts_16 {
    padding: 32px 0 16px 0 !important;
}

#parts_16 .view-heading3 {
    color: var(--text-primary) !important;
    font-size: 24px !important;
    font-weight: 700;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 60px;
}

/* 料金項目と価格の配置 */
.layout-column .view-heading4 {
    color: var(--text-primary) !important;
    font-size: 18px !important;
    font-weight: 600;
    margin: 0;
}

.layout-column .view-text {
    color: var(--text-primary) !important;
    font-size: 20px !important;
    font-weight: 700;
    margin: 0;
    text-align: right;
}

/* 注釈 */
#parts_20 {
    background-color: var(--darkest-gray-bg) !important;
    padding: 0 0 80px 0 !important;
}

#parts_20 .view-annotation {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 60px;
}

#parts_20 .view-annotation li {
    color: var(--text-primary) !important;
    font-size: 14px !important;
}

/* =============================================
   ご利用までの流れ（#parts_21）
============================================= */
#parts_21 {
    background-color: var(--white) !important;
    padding: 80px 0 !important;
}

#parts_21 .set-component-area {
    background-color: transparent !important;
}

#parts_21 .view-step {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 60px;
}

#parts_21 .view-step .heading {
    color: var(--text-primary) !important;
    font-size: 32px !important;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
}

#parts_21 .step-contents .step-images {
    background-color: var(--base-color) !important;
    width: 56px;
    height: 56px;
}

#parts_21 .step-contents .step-images span {
    font-size: 28px;
    font-weight: 700;
    color:var(--text-primary) !important;
}

#parts_21 .step-context h4 {
    color: var(--text-primary) !important;
    font-size: 20px !important;
    font-weight: 700;
}

#parts_21 .step-context p {
    color: var(--text-secondary) !important;
    font-size: 16px !important;
}

/* =============================================
   よくあるご質問（#parts_22, #parts_23）
============================================= */
#parts_22 {
    background-color: var(--gray-bg) !important;
    padding: 80px 0 40px 0 !important;
}

#parts_22 .view-heading2 {
    color: var(--text-primary) !important;
    font-size: 32px !important;
    font-weight: 700;
    text-align: center;
}

#parts_23 {
    background-color: var(--gray-bg) !important;
    padding: 0 0 80px 0 !important;
}

#parts_23 .view-accordion {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 60px;
}

#parts_23 .view-accordion li {
    background-color: var(--white) !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 8px;
    margin-bottom: 16px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

#parts_23 .view-accordion li:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#parts_23 .view-accordion .title {
    color: var(--text-primary) !important;
    font-size: 18px !important;
    font-weight: 600;
}

#parts_23 .view-accordion .accordion-block p {
    color: var(--text-secondary) !important;
    font-size: 16px !important;
    padding: 20px 24px !important;
    background-color: var(--white);
}

/* =============================================
   フッター（#footer）
============================================= */
#footer {
    background-color: var(--darkest-gray-bg) !important;
    margin-top: 0 !important;
}

#footer .view-footer {
    background-color: transparent !important;
    padding: 40px 60px;
    height: auto;
}

#footer .view-footer .copyright {
    color: var(--text-primary) !important;
    font-size: 14px !important;
    text-align: center;
    margin: 0;
}

/* =============================================
   共通要素の調整
============================================= */

/* 背景色の統一 */
.single_component_content,
.set-component-area,
.layout-column-area,
.preview [class^=view-]:not(.view-area):not(.view-components) {
    background-color: transparent !important;
}

/* レイアウトカラムのボーダー削除 */
.layout-column {
    border: none !important;
}

/* =============================================
   レスポンシブ対応
============================================= */
@media screen and (max-width: 768px) {
    /* パディング調整 */
    #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 .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(--text-primary) !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;
    }
}