@charset "UTF-8";

/* ------------------------------------
  サンプルサイトにstyleタグで記載があったレイアウトを移植
	------------------------------------*/
body .top-container {
	margin-top: 70px;
}

body {
	padding-bottom: 0px;
	padding-top: 60px;/* now is redefine in JS to fit any title length */
	background-color:#ffffff ;
	color: #444444;
	/*追記：フォントの定義*/
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 500;
}

.navbar-default .navbar-nav > li > a:hover {
	color: #444444;
}

.question-container {
	background-color: #ffffff;
	border:  1px solid #B7B7B7;
}

.checkbox-item input[type="checkbox"]:checked + label::after, .checkbox-item input[type="radio"]:checked + label::after {
	content: "\f00c";
}

.checkbox-item input[type="checkbox"]:checked + label::after{
	animation-name: rubberBand;
	animation-duration: 500ms;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	display: inline-block;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
.checkbox-item input[type="checkbox"] + label::after{
	display: none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}

.radio-item input[type="radio"]:checked + label::after{
	animation-name: zoomIn;
	animation-duration: 500ms;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	display: inline-block;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
.radio-item input[type="radio"] + label::after{
	display:none;
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}

input.form-control[type="text"],
select.form-control{
	height:50px;
	display: inline-block;
}

textarea{
	width:100%;
}

/* ------------------------------------
	当サイトのデザインのために上書きした
	汎用スタイル
	------------------------------------*/

/*このフォームのレイアウト都合上上書き*/
.row {
    margin-right: 0px;
    margin-left: 0px;
}

/* ------------------------------------
	当サイトのデザインのために追加した
	汎用スタイル
	------------------------------------*/
/*フッター*/
#footer{
	background-color: #2D2D2D;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
	padding: 30px 0;
}

#footer .footer-copyright{
	font-size: 14px;
	font-weight:normal;
	margin: 0;
	
}


/* ------------------------------------
  汎用スタイル
	全ページに共通して利用できること想定
	------------------------------------*/

/* ---- 入力ステップ form-step ---- */

/*レイアウトコンテナの定義*/
ol.form-step{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}

/*アイテムのコンテナを定義*/
ol.form-step li{
	position:relative;
	display: inline-block;
	letter-spacing: normal;
	height:100px;
	vertical-align: middle;
}

/*ステップテキスト*/
ol.form-step li > span{
	display: inline-block;
	width: 100%;
	height: inherit;
	background-color: #B7B7B7;
	color: #FFF;
	padding:20px 5px 20px 10px;
	font-size: 17px;
}

/*
@media (min-width: 375px) {
  ol.form-step li > span {
    font-size: calc(0.875rem + (17 - 14) * ((100vw - 375px) / (768 - 375)));
    min-height: 0vw;
  }
}
@media (min-width: 768px) {
  ol.form-step li > span {
    font-size: 17px;
  }
}
*/

ol.form-step li.current > span{
	background-color: #A3977B;
}

/*ステップ番号*/
ol.form-step li > span > span{
	font-size: 24px;
}

/*アイテムの装飾（三角の定義）*/
ol.form-step li:nth-of-type(1),
ol.form-step li:nth-of-type(2){
	flex-grow: 2;
	padding-right:20px; /*三角を配置するスペース*/
}

ol.form-step li:nth-of-type(1)::after,
ol.form-step li:nth-of-type(2)::after{
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	border-style: solid;
	border-width: 10px 0 10px 20px;
	border-color: transparent transparent transparent #B7B7B7;
	transform: translateY(-50%);
}

ol.form-step li.current:nth-of-type(1)::after,
ol.form-step li.current:nth-of-type(2)::after{
	border-color: transparent transparent transparent #A3977B;
}

/*「完了」表記の伸び率の定義*/
ol.form-step li:nth-of-type(3){
	flex-grow: 1;
}

/*必須アイコン ※最後に全角スペースを入れてください*/
.hissu{
	position: relative;
	display: inline-block;
	background-color: #e60012;
	color: #FFF;
	width:40px;
	height: 20px;
	text-align: center;
	font-size: 14px;
}

.hissu::after{
	position: absolute;
	left:-30px;
	content: '';
	width: 30px;
	height: 20px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #e60012 transparent transparent;
}


/*ヘッダーデザインの変更*/
.fruity .navbar.navbar-fixed-top{
	background-color: #fff;
  box-shadow: 0 0 rgba(0,0,0,0);
  border-radius: 0 !important;
	border-bottom: solid 2px #DDBD57;
}


/*ボタンデザイン（次へ・前へ・送信する）*/
.fruity .btn-default {
    background-color: rgba(255,255,255,0.2);
    border: 1px solid #A3977B;
    color: #A3977B;
}

.fruity .btn-default:hover,
.fruity .btn-default:focus,
.fruity .btn-default:active,
.fruity .btn-default.active,
.fruity .btn-default.active:focus,
.fruity .open .dropdown-toggle.btn-default {
    color:#A3977B;
		border:1px solid #A3977B;
		background-color:#EDEAE5;
}

.fruity .btn-primary {
    color: #fff;
    background-color: #A3977B;
    border: 1px solid #A3977B;
}

.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary:active,
.fruity .btn-primary.active,
.fruity .btn-primary.active:focus,
.fruity .open .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #7A715C;
    border: 1px solid #A3977B;
}


/* ------------------------------------
  各個別ページの設定
	【規則】各ステップのbodyにフッタid属性を識別用にセレクタを通すこと
	bodyのID属性はステップごと
	・ウェルカムページ：survey-welcome
	・お客様情報：survey-personal-data
	・ご意見・ご感想：survey-formpage
	・完了：survey-thanks
	------------------------------------*/
/*---
ウェルカムページ ( page01.html #survey-welcome )
 ---*/
#survey-welcome .container{
	padding: 0;
}
 
#survey-welcome #welcome-container{
	background-color: #F2F2F2;
	box-sizing: border-box;
	padding:30px;
	margin-bottom: 30px;
}

/*感者文*/
#survey-welcome #welcome-container .welcom-message p{
	color:#A3977B;
	font-size: 22px;
	font-weight: bold;
}

#survey-welcome #welcome-container .welcom-message{
	margin-bottom: 30px;
}

/*あいさつ文*/
#survey-welcome #welcome-container .welcom-greeting{
	font-size: 16px;
	color: #000;
	background-color: #FFFFFF;
	border-radius: 6px;
	box-sizing: border-box;
	padding:40px 30px;
}

/*代表取締役の表記*/
#survey-welcome .welcom-yakushoku{
	font-size: 20px;
}

/*---
  01.お客さま情報 page02.html
	---*/
	
/*ページ名のスタイル*/
#survey-personal-data .group-title{
	font-size: 24px;
	color:#A3977B;
	font-weight: bold;
}

/*設問に関するスタイル調整*/
#survey-personal-data .question-text{
	font-weight: bold;
	font-size: 18px;
}

/*---
  02.ご意見・ご感想 page02.html
	---*/
/*フォームのステップ*/
#survey-formpage .group-title{
	font-size: 24px;
	color:#A3977B;
	font-weight: bold;
}

#survey-formpage .group-title + p.text{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px
}

/*設問テキスト*/
#survey-formpage .question-title-container{
	padding:0px;
	font-size: 18px;
}

#survey-formpage .question-title-container .num{
	color: #A3977B;
	font-weight: bold;
}

/*1項目のスタイル調整*/
#survey-formpage .question-container{
	border:none;
}

/*回答箇所のスタイル調整*/
#survey-formpage .answer-container{
	border:solid #B7B7B7 1px;
	padding:30px;
}

/*ラジオボタンの配置レイアウト*/
/*コンテナを定義*/
/*
#survey-formpage .answer-container ul.answers-list{
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-areas:
	"box1 box2"
	"box3 box4";
	grid-gap: 10px;
}
*/
/*余計な余白を削除*/
#survey-formpage .answer-container ul.answers-list li{
	display: block;
	margin-bottom: 0px;
	padding: 10px;
	box-sizing: border-box;
	/*text-indent: 1em;*/
	margin-right:0;
}

#survey-formpage .answer-container ul.answers-list li{
	
}

/*選択項目ごとにエリアを定義*/
/*
#survey-formpage .answer-container ul.answers-list li:nth-of-type(1){
	grid-area: box1;
}

#survey-formpage .answer-container ul.answers-list li:nth-of-type(2){
	grid-area: box2;
}

#survey-formpage .answer-container ul.answers-list li:nth-of-type(3){
	grid-area: box3;
}

#survey-formpage .answer-container ul.answers-list li:nth-of-type(4){
	grid-area: box4;
}
*/

/*---
完了 ( page04.html #survey-thanks )
 ---*/
#survey-thanks .container{
	padding: 0;
}

/*ページ名のスタイル*/
#survey-thanks .group-title{
	font-size: 22px;
	color:#A3977B;
	font-weight: bold;
}
 
#survey-thanks #thanks-container{
	background-color: #F2F2F2;
	box-sizing: border-box;
	padding:30px;
	margin-bottom: 30px;
}

/*感者文*/
#survey-thanks #thanks-container .thanks-message p{
	color:#A3977B;
	font-size: 24px;
	font-weight: bold;
}

#survey-thanks #thanks-container .thanks-message{
	margin-bottom: 30px;
}

#survey-thanks #thanks-container .thanks-description p{
	font-size: 18px;
	color: #000;
}

/*あいさつ文*/
#survey-thanks #thanks-container .thanks-greeting{
	font-size: 16px;
	color: #000;
	background-color: #FFFFFF;
	border-radius: 6px;
	box-sizing: border-box;
	padding:40px 30px;
}

.suffix-prefix-force .ls-input-group-extra {
    width: initial;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    padding: 0.6rem 1.2rem;
    line-height: 1;
}

.radio-item{
	padding-left: 0;
}