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

[ 1 ] 全体
[ 2 ] ヘッダー（左上にロゴ）
[ 3 ] 回答ページ（カラーカスタマイズなど）
	1.カラーの変更
	-----------------------------
	#897865
	-----------------------------
[ 4 ] フッター：あり
 　	4-1. リンク設定（フッター右に配列）
	4-2. copyright（フッター中央配置）
*****/

/****************************************
	[ 1 ] 全体
*****************************************/
.btn{
	background-color:#897865 !important;
}
.btn:hover {
	opacity:0.8 !important;
}

/****************************************
	[ 2 ] ヘッダー
*****************************************/
.kotokurie_header{
	background: #fff;
    border-bottom: 1px solid #897865;;
}
.kotokurie_header_inner{
	width: 1080px;
	margin: 0 auto;
	padding: 10px 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.kotokurie_header_logo img{
	vertical-align: top;
	/*width: 25%;
    height: auto;*/
}

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

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

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

/*==========
	回答欄
============*/
.nu_slide #answer .slider-help {
	color:#897865 !important;
}
.sa_slide #answer .slider-help {
	color:#897865 !important;
}
.slide_matrix #answer .slider-help{
	color:#897865 !important;
}
.select-ranking .ranking-help{
	color:#897865 !important;
}
/*---- 画像 ----*/
.nu_slide #answer #slider .ui-state-default {
	background-image:url(../images/kotokurie/slide-handle.png) !important;
}
.sa_slide #answer #slider .ui-state-default {
	background-image:url(../images/kotokurie/slide-handle.png) !important;
}
.slide_matrix #answer #slider .ui-state-default{
	background-image:url(../images/kotokurie/slide-handle.png) !important;
}

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

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

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

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

/*---- 店舗検索 ----*/
.select2-container--default .select2-selection--single {
	border: 1px solid #897865 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	background: #897865 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #897865 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: #897865;
	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:#897865;
	-webkit-box-shadow: 0px 4px 0px 0px rgba(190, 180, 160, 0.5) !important;
	box-shadow: 0px 4px 0px 0px rgba(190, 180, 160, 0.5) !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/kotokurie/select-arrow.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%, #efebe1 100%);
	background: url(../images/kotokurie/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: #897865;
	padding: 10px 20px;
	-webkit-box-shadow: 0px 4px 0px 0px rgba(190, 180, 160, 0.5);
	box-shadow: 0px 4px 0px 0px rgba(190, 180, 160, 0.5);
	border-radius: 5px;
}
#answer .file-delete-view:hover {
	opacity: 0.8;
}

/****************************************
	[ 4 ] footer
*****************************************/
/* footerがある場合
コンテンツ（設問の数が）下まで足りていない時に、
中途半端な位置にフッターが表示される事象を防ぐための対応
（bodyをflexにして、flex-directionをcolumnにし、wrapper（コンテンツ部分）にflex:1を設定） */
body {
	padding-bottom: 0;
	display: flex;
  	flex-direction: column;
  	min-height: 100vh !important;
}
#wrapper {
	margin: 0 auto 3.00em;
	flex: 1;
}

footer.kotokurie_footer {
	border-top: 4px solid #897865;
    background: #fff;
    padding: 0.8em 0;
    width: 100%;
    margin: 2.00em auto 0;
    text-align: center;
}
footer.kotokurie_footer .footer_inner {
	width: 1080px;
    margin: 0 auto;
}
footer.kotokurie_footer .footer_inner figure {
	float: left;
	width: 100px;
}
footer.kotokurie_footer .footer_inner div {
	float: left;
	width: 940px;
	letter-spacing: 0.05em;
}
footer.kotokurie_footer .footer_inner div ul {
	float: left;
	display: flex;
	flex-direction: row;
    justify-content: center;
	width: 940px;
	margin: 2px 0px 2px 20px;
}
footer.kotokurie_footer .footer_inner div ul li {
	font-size: 14px;
	height: 1.5em;
	line-height: 1.5em;
	text-align: center;
	border-right: 1px solid #ccc;
	padding: 0 1.00em;
}
footer.kotokurie_footer .footer_inner div ul li:last-child {
	border: none;
}
footer.kotokurie_footer .footer_inner div ul li a {
	color: #000;
	text-decoration: none;
}
footer.kotokurie_footer .footer_inner div ul li a:hover {
	text-decoration: underline;
}

footer.kotokurie_footer .kotokurie_footer_copy {
	margin-left: 30px;
	margin-top: 10px;
    text-align: center;
    font-size: 14px;
}