/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}

/* プロモーション用チェックボックスを非表示にする */
.promotions-letter-flag, 
#client-marketing-consent, 
.marketing-consent-wrapper,
div[class*="marketing-consent"] {
    display: none !important;
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

/* フッターの「SimplyBook.me」クレジットを強力に非表示にする */
footer,
.footer,
#footer,
.copyright,
.sb-footer,
.bottom-footer,
div:has(> a[href*="simplybook.me"]) {
    display: none !important;
}


/* 予約サイト内のすべてのボタンの角を少し丸める */
.btn, .btn-primary, button, input[type="button"], input[type="submit"] {
    border-radius: 6px !important;
}

/* プルダウンメニュー（選択式）を視覚的に分かりやすくする */
.custom-form select,
.sb-custom-field select,
select {
    border: 1px solid #cccccc !important; /* 四角い枠線をつける */
    border-radius: 6px !important; /* 角を丸くする */
    background-color: #fdfdfd !important; /* ほんの少し色をつけて入力欄を強調 */
    padding: 12px 35px 12px 15px !important; /* 矢印と文字が被らないように余白調整 */
    margin-bottom: 15px !important;
    width: 100% !important;
    cursor: pointer !important;
    color: #333333 !important;
    
    /* 🔽 右端に下向き矢印を強制表示させる */
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23555555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
}

/* 選択した時に枠線の色を少し濃くする */
.custom-form select:focus {
    border-color: #777777 !important;
    outline: none !important;
}

/* --------------------------------------------------- */
/* 1. カテゴリーページ：LINE案内を「一番下」に強制表示 */
/* --------------------------------------------------- */
.category-step.step-content.content-mode-list {
    display: flex;
    flex-direction: column;
}
.category-step.step-content.content-mode-list::after {
    content: "📸 出張撮影・メイク＆ヘアセットのご相談\A LINEのDMにて受付しております\A 公式LINE@qnne";
    white-space: pre;
    display: block;
    text-align: center;
    padding: 16px 20px;
    margin: 20px 10px 0px 10px;
    background: #FFF5F3;
    border-radius: 12px;
    color: #8B5E52;
    font-size: 13px;
    line-height: 2.0;
    border: 1px solid #f0d5cc;
    order: 99; /* 要素の順番を強制的に一番最後（下）にする魔法のコードです */
}

/* --------------------------------------------------- */
/* 2. オプションページのみ：案内テキストを表示 */
/* --------------------------------------------------- */
/* ステップナビゲーションの3番目（オプション）がアクティブな時だけ、コンテンツの上部に表示します */
body:has(#steps-nav li.step_info_item:nth-child(3).active) #sb_booking_content::before {
    content: "オプションでプロorセルフ追加、レタッチ、時間延長、人数追加(セルフ)、ペット撮影が選べます！";
    display: block;
    text-align: left; /* ここを center から left に変更しました */
    padding: 12px 16px; /* 左寄せにした時のバランスを取るために少し余白を調整 */
    margin-bottom: 20px;
    background: #FFF5F3;
    border-radius: 8px;
    color: #8B5E52;
    font-size: 13px;
    line-height: 1.5; /* 行間を少し開けて読みやすくしました */
    border: 1px solid #f0d5cc;
}

/* --------------------------------------------------- */
/* スマホ画面での横揺れ（横スクロール）を強制的に防止する */
/* --------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}