@charset "utf-8";
/*****
Smile Survey カスタマイズpc
Created date: 2026.02.06
last update:

[ 1 ] 全体
 	1.フォントの変更
	-----------------------------
	Instrument Sans, sans-serif
	-----------------------------
[ 2 ] ヘッダー：なし
[ 3 ] 回答ページ（カラーカスタマイズなど）
	1.カラーの変更
	-----------------------------
	#333333
	-----------------------------
[ 4 ] フッター：なし
*****/

/****************************************
	[ 1 ] 全体
*****************************************/

* {
  font-family: Instrument Sans, sans-serif;
}

.btn{
	background-color:#333333 !important;
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
}

/****************************************
	[ 2 ] ヘッダー
*****************************************/


/****************************************
	[ 3 ] 回答ページ（カラーカスタマイズ）
	SSのcssから色設定している要素をピックアップして、
	指定のカラーにカスタマイズ
*****************************************/
/* 回答率のバーの色 */
#percent #percent_gauge_comp{
	background-color: #333333 !important;
}

/* 質問前テキストの色 */
.bef_text {
	margin-top:30px;
	color:#333333 !important;
}

/* 設問分のQナンバー（表示の場合） */
#question dt span {
	background-color: #333333 !important;
}

/*==========
	回答欄
============*/
.nu_slide #answer .slider-help {
	color:#333333 !important;
}
.sa_slide #answer .slider-help {
	color:#333333 !important;
}
.slide_matrix #answer .slider-help{
	color:#333333 !important;
}
.select-ranking .ranking-help{
	color:#333333 !important;
}

/*---- 画像 ----*/
.nu_slide #answer #slider .ui-state-default {
	background-image:url(../images/roomclip/slide-handle.png) !important;
}
.sa_slide #answer #slider .ui-state-default {
	background-image:url(../images/roomclip/slide-handle.png) !important;
}
.slide_matrix #answer #slider .ui-state-default{
	background-image:url(../images/roomclip/slide-handle.png) !important;
}

/*---- 選択した後の画像 ----*/
.sa_card_text #answer input[type="radio"]:checked + label{
	background-image: url(../images/roomclip/radio_on.png) !important;
	border-color:#333333 !important;
}
.sa_card_text #answer input[type="checkbox"]:checked + label{
	background-image: url(../images/roomclip/checkbox_on.png) !important;
	border-color:#333333 !important;
}
.sa_matrix #answer input[type="radio"]:checked + label{
	background-image: url(../images/roomclip/radio_on.png) !important;
	border-color:#333333 !important;
}
.sa_scale #answer input[type="radio"]:checked + label,
.sa_scale #answer input[type="radio"].survey-selected + label{
	background-image: url(../images/roomclip/radio_on.png) !important;
	border-color:#333333 !important;
}
.sa_matrix #answer tr input[type="checkbox"]:checked + label{
	border-color:#333333 !important;
	background-image: url(../images/roomclip/checkbox_on.png) !important;
}

/*---- 選択した後の枠の色 ----*/
.sa_card_image #answer input[type="radio"]:checked + label{
	border-color:#333333 !important;
}
.sa_card_image #answer input[type="checkbox"]:checked + label{
	border-color:#333333 !important;
}

#survey-app .survey-section {
	margin-bottom: 0; /* 設問同士の余白を詰める 2022.11.07 追加 */
}
#survey-app .survey-section .border01 {
	border:2px dotted #333333 !important;
}
/*---- hoverの背景色 ----*/
.sa_matrix #answer td.hover,
.sa_matrix #answer th.hover {
	background-color:#eeeeee;
}
.sa_card_image #answer input[type="radio"] + label:hover,
.sa_card_text #answer input[type="radio"] + label:hover{
	border-color:#333333 !important;
}
.sa_card_image #answer input[type="radio"] + label:hover{
	border-color:#333333 !important;
}
.sa_matrix #answer input[type="radio"] + label:hover{
	border-color:#333333 !important;
}
.sa_card_image #answer input[type="radio"] + label:hover,
.sa_scale #answer input[type="radio"] + label:hover{
	border-color:#333333 !important;
}
.sa_card_image #answer input[type="checkbox"] + label:hover,
.sa_card_text #answer input[type="checkbox"] + label:hover{
	border-color:#333333 !important;
}
.sa_card_image #answer input[type="checkbox"] + label:hover{
	border-color:#333333 !important;
}
.sa_matrix #answer input[type="checkbox"] + label:hover {
	border-color:#333333 !important;
}
.fa_matrix #answer td.hover,
.fa_matrix #answer th.hover {
	background-color: #eeeeee;
}

/*---- ボタン背景色 ----*/
#nextbtn input,
#nextbtn button{
	background-color:#333333;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
}
#nextbtn input.one_preview_disabled {
	background-color:#333333 !important;
}
#nextbtn input[disabled] {
	background-color:#333333 !important;
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	opacity: 0.2;
}
#survey-dialog .survey-dialog-body .ok-btn,
#error-dialog #error-message .ok-btn {
	background-color:#333333 !important;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
}
#answer .file-view {
	background-color:#333333;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
}
#answer .file-view:hover {
	background-color: #333333;
}
#answer .file-view:hover span {
	cursor: pointer;
	background-color: #333333 !important;
}
#nextbtn input:hover:not([disabled]){
	opacity: 0.8;
	background: #333333;
}
#nextbtn input.one_preview_disabled {
	background-color:#333333;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
}
.btn[disabled]{
	background-color:#333333;
	color: #fff;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	cursor:auto;
}
.btn:hover:not([disabled]){
	background-color:#333333;
}

/*---- 店舗検索 ----*/
.select2-container--default .select2-selection--single {
	border: 1px solid #333333 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	background: #333333 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #333333 transparent transparent transparent !important;
}

/*---- NPS設問 ----*/
.sa_card_text #answer .survey-answer.nps .survey-answer-item ul li input[type="radio"]:checked + label{
	background-image: none !important;
}
.sa_card_image #answer .survey-answer.nps  input[type="radio"] + label:hover, .sa_card_text #answer .survey-answer.nps input[type="radio"] + label:hover {
	border-color: #ccc !important;
}
.sa_card_text #answer .survey-answer.nps .survey-answer-item ul li input[type="radio"]:checked + label {
	background-color: #333333;
	color: #fff;
}

 /* IE9以上対応 */
.select2-container {
	display: inline\0;
	zoom: 1\0;
}
.select2-container--default .select2-selection--single  {
	position: relative\0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0\0;
	right: 0\0;
}
/*-- 以下、base-custom.cssより引用 --*/
#survey-dialog .survey-dialog-body button.survey-dialog-submit,
#error-dialog #error-message .ok-btn {
	background-color:#333333;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1) !important;
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1) !important;
}
select.ques-select {
	padding: 10px 30px 10px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: url(../images/roomclip/select-arrow.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%, #efebe1 100%);
	background: url(../images/roomclip/select-arrow.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%, #efebe1 100%);
	background-size: 20px, 100%;
	font-size: 14px;
}
#answer .file-delete-view {
	display: none;
	position: inherit;
	width: auto;
	z-index: inherit;
	max-width: 50%;
	height: 100%;
	background-color: #333333;
	padding: 10px 20px;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	box-shadow: 4px 4px 0px 0px rgba(209, 209, 209, 1);
	border-radius: 5px;
}
#answer .file-delete-view:hover {
	opacity: 0.8;
}

/****************************************
	[ 4 ] footer
*****************************************/